@font-face {
	
}

* {
	font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
	box-sizing: border-box;
}

	body {
		width:100%;
		height: 100vh;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		
		
		#menu {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap; /* Permite varias filas si no caben */
			justify-content: center;
			align-items: center;
			gap: 24px;
			margin-top: 32px;
		}
	}

		#test_mark {
			position: absolute;
			width:1px;
			left:50%;
			height:100%;
			z-index: 9999999999;
			background-color: red;
		}

		#test_mark2 {
			position: absolute;
			height:1px;
			top:50%;
			width:100%;
			z-index: 9999999999;
			background-color: red;
		}

		#test_mark, #test_mark2 {

			display: none;

		}

		#top_container {
			position:absolute;
			float:left;
			width:100%;
			height:100vh;
			background-color:rgba(255,255,255,.6);
			display: none;
			z-index:999999;
		}

		.message-box {
		  	position: relative;
			
			width: 380px;

			height: auto;
			display: block;
			border: 1px solid rgba(15,160,191,1);
			border-radius: 4px;
			background-color: #fff;
    		padding-bottom: 0px;
			box-shadow: rgba(50, 50, 50, 0.5) 0px 7px 29px 0px;
			
		}

			.message-box .title {
				position: relative;
				float: left;
				width: 100%;
				background-color: rgba(15,160,191,1);
				padding: 10px;
				font-weight: bold;
				text-align: center;
				border-radius: 0px 0px 0 0;
				color:#fff;
				text-transform: uppercase;
			}
			
			.message-box .content {
				height: auto;
				width:90%;
				
				padding: 24px 16px;
				margin: 0 5%;
				margin-top: 30px;
				margin-bottom: 10px;
				text-align: center;
				font-weight: bold;
				color:#3e3e3e;
				
			}

			.content {
				margin-top:53px !important;
			}

			.message-box .close-button {
				
				position: relative;
				float:left;
				background-color: rgba(15,160,191,1);
				border: none;
				padding: 10px;
				cursor: pointer;
				font-weight: bold;
				width: 90px;
				margin-bottom: 0px;
				margin-top: 15px;
				color: #fff;
				border-radius: 4px;
				left: 0%;
				margin-left: 0px;
				margin-right:10px;
				
			}

			.close-button {
				
					position: absolute;
					bottom: 15px;
					left: 50% !important;
					margin-left: -45px !important;
					margin-bottom: 10px !important;
				
			}

		#container {
			width:100%;
			height: 100%;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			
			background-position:center;
			background-repeat:no-repeat;
			background-size:cover;
			background-color:rgba(15,160,191,1);
			background-image: url(../img/bg.PNG);

		}

			#form_wrap {
				
				
				width:400px;
				height:auto;
				padding:20px;
				
				background-color:rgba(255,255,255,1);
				border-radius:0px;
				box-shadow: rgba(50, 50, 50, 0.5) 0px 7px 29px 0px;
				display: none;
				border-radius: 4px;
				
			}

				#logo {
					
					position:relative;
					float:left;
					width:90%;
					margin: 0px 5%;
					margin-bottom: 20px;
					height:120px;
					background-image:url(../img/logo1.png);
					background-position:center;
					background-repeat:no-repeat;
					background-size:80%;

				}

				#login_form, #signup_form {
					
					height: auto;
					position:relative;
					float: left;
					width:80%;
					margin:0 10%;
					color:#fff;

				}

				#signup_form {
					
					margin-top:-24px;
					
				}

					#login_form input, #signup_form input {
						
						position:relative;
						float:left;
						width:100%;
						font-size:.9em;
						text-transform: uppercase;
						margin:5px 0;
						
						font-weight:bold;
						background-color: rgba(0,0,0,0) !important;
						
					}

					#login_form label {
						position: relative;
						float: left;
						width:90%;
						text-align: left;
						color: rgba(15,160,191,1);
						font-weight: bold;
					}

					#login_form input[type="text"], #login_form input[type="password"], #signup_form input[type="text"], #signup_form input[type="password"] {
						
						padding:10px;
						border:none;
						color:#3e3e3e;
						border-bottom: 1px solid rgba(15,160,191,.3);
						text-transform: none !important;
						margin-bottom: 20px;
						box-sizing: border-box;
					}

					#login_form input::placeholder, #signup_form input::placeholder {
						
						color:rgba(333,333,333,.8);
						
						
					}

					#login_form input:focus, #signup_form input:focus {
						
						border:solid 0px black !important;
						outline: none;
						border-bottom: solid 1px rgba(15,160,191,1) !important;
						
					}

					#remember_input {
						
						position: relative;
						float: left;
						width: auto !important;
						margin-right: 7px !important;
						margin-top: 12px !important;
						margin-bottom: 16px !important;
						
					}

					#remember_label {
						
						position: relative;
						float: left;
						width: auto !important;
						margin-right: 15px !important;
						margin-top: 4px !important;
						padding-top: 5px !important;
						color:#3e3e3e !important;
						
						
					}

					#login_form input[type="submit"], #signup_form input[type="submit"] {
						
						padding:12px;
						background-color:rgba(15,160,191) !important;
						border:none;
						text-transform:uppercase;
						color:#fff;
						cursor:pointer;
						margin-bottom: 10px;
						
					}
				
		
@media only screen and (min-width: 360px) and (max-width:1024px) {
	
}
@media only screen and (max-width: 1024px) and (max-height:600px) {
	
}