@charset "UTF-8";

@font-face {
	font-display: optional;
}

/* montserrat-300 - latin */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 300;
	src: local(''),
		 url('/font/montserrat-v25-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		 url('/font/montserrat-v25-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-regular - latin */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: local(''),
		 url('font/montserrat-v25-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		 url('font/montserrat-v25-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-500 - latin */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	src: local(''),
		 url('font/montserrat-v25-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		 url('font/montserrat-v25-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-600 - latin */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	src: local(''),
		 url('font/montserrat-v25-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		 url('font/montserrat-v25-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-700 - latin */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	src: local(''),
		 url('font/montserrat-v25-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		 url('font/montserrat-v25-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------
01 HTML - BODY
--------------------------------------------------------------------------------------------------------------------------------------------- */

	html {  }
	
	body { width: 100%; min-width: 320px; height: 100%; font-family: 'Montserrat', Arial, sans-serif; }
	html, body { height: 100%; margin: 0; padding: 0; overflow-x: hidden;  z-index: 1; }
	
	::selection { background: #f3d3ad; /* WebKit/Blink Browsers */ }
	

/* ---------------------------------------------------------------------------------------------------------------------------------------------
02 GENERAL
--------------------------------------------------------------------------------------------------------------------------------------------- */
	
	h1, h2, h3, h4, p, ul, li, a { margin: 0; padding: 0; font-weight: 500; text-align: left; }
	h1 { font-size: 3rem;  }
	h2 { font-size: 1.5rem; font-weight: 600; }
	h3, h4 { font-size: 1.2rem; font-weight: 600; }
	h1, h2, h3, h4 { color: #333333; }
	p, li, a { font-size: 1rem; line-height: 1.7rem; color: #555555; }
	p li, li p, li li, li a { font-size: 1rem; }
	a { text-decoration: none; }
	img { border-style: none; }
	
	.hide { visibility: hidden; }
		
	a.button { position: relative; display: block; clear: both; width: 100%; max-width: 400px; margin: 15px 0 0 0; padding: 15px 0; text-align: center; color: white;  text-decoration: none; border: none; cursor: pointer; font-size: 1.1rem; font-weight: 600; transition: all 0.3s ease-out; margin: 0 auto; margin-top: 10px; }
			
	.input { display:inline-block; width: 100%; padding: 15px 10px; font-size: 0.95rem; border: 1px solid #F0F0F0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
		::placeholder { color: #BBBBBB; }
			
	::-ms-input-placeholder, ::-webkit-input-placeholder { color: #BBBBBB; }


/* ---------------------------------------------------------------------------------------------------------------------------------------------
03 LOGIN
--------------------------------------------------------------------------------------------------------------------------------------------- */
	
	.login { width: 100%; height: 100%; position: absolute; text-align: center; }  
		.login-right { width: 50%; height: 100%; float: left; position: relative; text-align: center; display: flex; align-items: center; justify-content: center; background-image: url('/img/fondo.jpg'); background-size: cover; background-position: 0 0; }
		.login-left { width: 50%; height: 100%; float: left; position: relative; text-align: center; display: flex; align-items: center; justify-content: center;}
			.login-right img, .login-left img { max-width: 300px; max-height: 200px; padding: 0 0 50px 0; }

		.login-content-right { width: 80%; margin: 0 auto; padding: 50px 0; background-color: rgba(236, 236, 236, 0.95); text-align: center; position: relative; float: none; }
			
			.login-content-right .title { width: 90%; margin: 0 auto; padding: 0 0 0 0; text-align: center; }
				.login-content-right .title h1 { width: 100%; margin: 0 auto; padding: 0 0 5px 0; color: #333333; font-size: 2rem; font-weight: 600; text-align: center; }
				.login-content-right .title h2 { margin: 0 auto; padding: 0 0 10px 0; font-size: 1.2rem; font-weight: 400; text-align: center;}
				.login-content-right .title p { margin: 0 auto; color: black; font-weight: 500; font-size: 1rem; padding: 20px 0 0 0; }
				.login-content a.enlace { margin: 0 auto; color: rgba(55, 145, 214, 1.00); font-weight: 500; font-size: 1.1rem; padding: 50px 0 0 0 !important; max-width: 500px; text-align: center; }
				
			.login-content-right .title { width: 90%; margin: 0 auto; padding: 0 0 0 0; text-align: center; display: table; vertical-align: middle; }
				.login-content-right .title h1 { width: 100%; margin: 0 auto; padding: 0 0 5px 0; color: #333333; font-size: 1.3rem; font-weight: 600; text-align: center; }
				.login-content-right .title h2 { width: 100%; margin: 0 auto; padding: 0 0 5px 0; color: #333333; font-size: 1.2rem; font-weight: 600; text-align: center; }
				.login-content-right .title p { margin: 0 auto; color: black; font-weight: 500; font-size: 1rem; padding: 20px 0 0 0; }

			.login-content p.error-message { color: #d16a66; margin: 0; padding: 0 0 5px 0; text-align: center; font-weight: 500; }
			
		.login-content-left { width: 90%; margin: 0 auto; padding: 100px 0; text-align: center; position: relative; float: none; }
		
			.login-content-left .title { width: 100%; margin: 0 auto; padding: 0 0 0 0; text-align: center; }
				.login-content-left .title h1 { width: 80%; margin: 0 auto; padding: 0 0 5px 0; color: white; font-size: 2rem; font-weight: 600; text-align: center; }
				.login-content-left .title h2 { width: 80%; margin: 0 auto; padding: 50px 0 5px 0; color: white; font-size: 1.5rem; font-weight: 600; text-align: center; }
				.login-content-left .title p { margin: 0 auto; color: white; font-weight: 500; font-size: 1.1rem; padding: 20px 0 0 0; max-width: 500px; text-align: center; }
				.login-content-left .title a { margin: 0 auto; color: rgba(55, 145, 214, 1.00); font-weight: 500; font-size: 1.1rem; padding: 20px 0 0 0; max-width: 500px; text-align: center; }
							
			.login-content-left p.error-message { color: #d16a66; margin: 0; padding: 0 0 5px 0; text-align: center; font-weight: 500; }

	.pure-form { width: 100%; max-width: 400px; margin: 0 auto; padding: 0 0 0 0; clear: both; border: none; }
		.login .pure-form .pure-input { width: 100%; background-color: white; min-height: 60px; }
			.login .pure-form .pure-input.hide { display: none; }

		.login .pure-form .pure-label.hide { display: none; }
			
		a.fahorro.pure-label { color: #2D82C9; } 

		input:-webkit-autofill,
		input:-webkit-autofill:hover, 
		input:-webkit-autofill:focus, 
		input:-webkit-autofill:active  {
			-webkit-box-shadow: 0 0 0 30px white inset !important;
		}

	a.pure-button-recover { position: relative; display: block; text-align: center; margin: 0 auto; margin-top: 50px; color: #4183C4; text-decoration: none; font-size: 0.95rem; font-weight: 500; outline: none; }
		a.pure-button-recover:hover { color: #458CD3; transition: all 0.3s ease-out; }
		a.pure-button-recover.hide { display: none; }

	.login-footer { position: fixed; width: 100%; margin: 0 auto; bottom: 0; }
		.login-footer img { width: 200px; float: right; padding: 0 20px 10px 0; }
		.login-footer p { float: left; padding: 30px 0 0 20px; color: white; font-size: 0.85em; }


	@media screen and (max-width : 700px) {

		.login-right { width: 100%; height: auto; float: left; position: relative; text-align: center; display: flex; align-items: center; justify-content: center;}
		.login-left { width: 100%; height: auto; background-color: none; float: left; position: relative; text-align: center; display: flex; align-items: center; justify-content: center;}
		
		.login { width: 100%; height: auto; position: absolute; text-align: center; }  
		.login-right { width: 100%; height: auto; float: left; position: relative; text-align: center; display: flex; align-items: center; justify-content: center;}
		.login-left { width: 100%; height: auto; background-color: none; float: left; position: relative; text-align: center; display: flex; align-items: center; justify-content: center;}
		
		.login-content-left .title { width: 100%; margin: 0 auto; padding: 0 0 0 0; text-align: center; }
		
		.login-content { width: 90%; margin: 0 auto; padding: 50px 0; background-color: rgba(236, 236, 236, 0.95); text-align: center; position: relative; float: none; }
		
		.login-content-left { width: 90%; margin: 0 auto; padding: 50px 0; text-align: center; position: relative; float: none; }
		
		.pure-form { width: 90%; max-width: 400px; margin: 0 auto; padding: 0 0 0 0; clear: both; border: none; }
		.login .pure-form .pure-input { width: 100%; background-color: white; }
			.login .pure-form .pure-input.hide { display: none; }
	
	}

	.loading { width: 50px; height: 50px; background-color: transparent; position: absolute; top: 50%; left: 50%; margin-left: -25px; display: block; z-index: 200000; }
	/*CubrePantalla*/
	.cubrepantalla { width: 100%; height: 100%; background-color: black; position: fixed; top: 0px; left: 0px; display: block; opacity: 0.7; z-index: 1000;  }
		.cubrepantalla.hide { visibility: hidden; display: none; }
		.cubrepantalla.gris { background-color: black; opacity: .7; }
		.cubrepantalla.trans {background-color: transparent; z-index:100000;}


/* 

/* ---------------------------------------------------------------------------------------------------------------------------------------------
02 PopUps
--------------------------------------------------------------------------------------------------------------------------------------------- */


	.popup-top { position: relative; margin: 0 auto; padding: 0; width: 40%; min-width: 600px; max-height: 80%; border-radius: 0 0 4px 4px; overflow-y: auto; background: white; transition: all 5s ease-in-out; }
		.popup-top-header { margin: 0; padding: 20px; background-color: #eeede9; }
			.popup-top-header h3 { font-size: 1.5rem; color: #2f4858; }
		
		.popup-top-content { margin: 0; padding: 20px; overflow: auto; text-align: center; }
			.popup-top-content p { width: 90%; padding: 0 0 10px 0; }            

		.popup-top.translate {  width: 95%; min-width: 600px; max-height: 95%; }
		.popup-top.translate .popup-top-content { width: 97%; }
			.popup-top.translate .popup-top-content .grid { float: left; margin: 0 auto; padding: 0 10px 20px 10px; width: 48%; }

		.popup-top.translate-scale {  width: 60%; min-width: 600px; max-height: 95%; }
		.popup-top.translate-scale .popup-top-content { width: 95%; overflow: hidden; }
			.popup-top.translate-scale .popup-top-content .grid { float: left; margin: 0 auto; padding: 0 10px 20px 10px; width: 45%; }

		.popup-top-step { width: 40%; min-height: 175px; display: inline-block; margin: 20px; background-color: #565d6c; border-radius: 8px; vertical-align: top; }
			.popup-top-step.price { width: 30%; margin: 20px 5px; }
			.popup-top-step:hover { transition: all 200ms; background-color: #292C33; }
			.popup-top-step h2 { text-align: center; color: white; margin: 0 auto; padding: 50px 0 30px 0; font-size: 4rem; }
			.popup-top-step p { text-align: center; color: white; margin: 0 auto; padding: 0 0 20px 0; font-size: 1.1rem; }

		.popup-top-list { width: 90%; height: 50px; vertical-align:middle; }
			.popup-top-list p { float: left; width: 70px; margin:5px 0 0 0; }

		p.popup-top-error { padding: 10px 0 0 0; float: left; }

		.popup-top-close { float: right; font-size: 2rem; margin-top: 5px; }
			.popup-top-close:hover { transition: color .3s ease-in-out; color: #3299D6; cursor: pointer; }

		.popup-top .textbox { float: left; }
			.popup-top .textbox.phone-area { width: 50px; margin: 0 10px 0 0; }

		.popup-top .select { float: left; max-width:40%; margin: 0px 50% 20px 0px}

		.popup-top-content .button { clear: none; float: right; width: 50px; margin: 20px 0 0 5px; padding: 10.2px 12px; font-weight: 500; font-size: 1rem; cursor: pointer; }
			.popup-top .button.green { background-color: #54947b; color: white; font-weight: 500; border: 1px solid #54947b; }
				.popup-top .button.green:hover { background-color: #54947b; border: 1px solid #54947b; }
				.popup-top .button.green span { font-weight: 600; padding: 0 5px 0 0; }
			
			.popup-top .button.red { background-color: #d16a66; color: white; font-weight: 500; border: 1px solid #d16a66;  }
				.popup-top .button.red:hover { background-color: #d16a66; border: 1px solid #d16a66; }
				.popup-top .button.red span { font-weight: 600; padding: 0 5px 0 0; }

		.popup-top .checkbox { float: left; width: 300px; padding: 15px 0 15px 0; }

		.popup-top-content { margin: 0; padding: 20px; overflow: auto; text-align: center; } 
			.popup-top-content .language-options { display: inline-block; width:100%;  }
				.popup-top-content .language-options p { width: 30%; }
				.popup-top-content .language-options select { width: 200px; float: left; }


	@media screen and (max-width : 500px) {
		.popup-top { width: 95%; min-width: unset; } 
	}

	.overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); z-index: 99999; transition: opacity 500ms; height: 0; overflow: hidden; opacity: 0; display: none; }           
			.overlay:target { display: block; height: auto; opacity: 1; transition: opacity 500ms; }
			.overlay.clear { right: 0; top: 0; left: unset; background: rgba(0, 0, 0, 0.0); width: 60%; max-width: 600px; box-shadow: 0px 0px 45px -8px rgba(0,0,0,0.75); }
			.overlay.back { z-index: 999 }
			.overlay.show { display: block; height: auto; opacity: 1; transition: opacity 500ms; }