@charset "UTF-8";

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

	html {  }
	
	body { width: 100%; min-width: 320px; height: 100%; font-family: 'Montserrat', Arial, sans-serif; }
	html, body { 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; }
	
	.features-background { clear: both; height: auto; padding: 0; overflow: hidden; z-index: -1000; }
		.yellow-background { background: linear-gradient(45deg, #FBF1E1 60%, white 45%); }
			.yellow-background-alt { background: linear-gradient(135deg, #FBF1E1 58%, white 45%); }
		.white-background { background: white; }
		.light-gray-background { background: #E9EBEE; }
		.light-gray-background-gradient { background: linear-gradient(180deg, white 20%, #E9EBEE 80%); }
		.blue-background { background: #4696D8; }
	
	.white h1, .white h2, .white h3, .white p, .white li, .white li a, .white a, .white a:visited, .white a:link { color: white; }
	
	a.button { position: relative; display: block; clear: both; width: 90%; max-width: 400px; margin: 15px 0 0 0; padding: 10px 0; text-align: center; color: white;  text-decoration: none; border: none; cursor: pointer; font-size: 1.1rem; font-weight: 400; transition: all 0.3s ease-out; margin: 0 auto; margin-top: 10px; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.15); }
		a.button.blue, button.blue-button { background: white; color: black; padding: 7px 0; font-size: 0.9rem; }

		a.button.yellow, button.yellow-button {  color: white; margin-top: 20px; padding: 15px 0; font-size: 1rem; font-weight: 500; }

			
	.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; }
			
	.center-text h1, .center-text p { text-align: center; }
			
	::-ms-input-placeholder, ::-webkit-input-placeholder { color: #BBBBBB; }


/* ---------------------------------------------------------------------------------------------------------------------------------------------
03 LOGIN
--------------------------------------------------------------------------------------------------------------------------------------------- */
	
	.login { width: 100%; height: 100%; display: table; position: relative; text-align: center; }  
        .login-center { display: table-cell; vertical-align: middle;  text-align: center;}
			.login-center img { width: 300px; padding: 50px 0 20px 0; }

		.login-content { width: 100%; max-width: 600px; margin: 0 auto; padding: 50px 150px; background-color: white; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.15); }
			
		    .login-content .title { width: 100%; margin: 0 auto; padding: 0 0 0 0; text-align: center; }
			    .login-content .title h1 { width: 80%; margin: 0 auto; padding: 0 0 5px 0; color: #005590; font-size: 2rem; font-weight: 600; text-align: center; }
			    .login-content .title h2 { margin: 0 auto; padding: 0 0 10px 0; font-size: 1.2rem; font-weight: 400; text-align: center;}
			    .login-content .title p { margin: 0 auto; color: black; font-weight: 500; font-size: 1rem; padding: 20px 0 0 0; }

		    .login-content p.error-message { color: #C9364B; margin: 0; padding: 0 0 5px 0; text-align: center; font-weight: 500; }

	.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; }

        .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-content { width: 90%; padding: 100px 0 50px 0; }

            .login-center { vertical-align: middle; }

        .login-footer { position: fixed; width: 100%; margin: 0 auto; text-align: center; }
		    .login-footer img { display: none; }
		    .login-footer p { float: none; margin: 0 auto; padding: 30px 0 10px 0; font-size: 0.7em; text-align: center; }
	
	}

    .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: #E9EBEE; }
            .popup-top-header h3 { font-size: 1.5rem; }
        
        .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; }

        .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: #3BB273; color: white; font-weight: 500; border: 1px solid #3BB273; }
				.popup-top .button.green:hover { background-color: #3FC17C; border: 1px solid #3FC17C; }
				.popup-top .button.green span { font-weight: 600; padding: 0 5px 0 0; }
			
			.popup-top .button.red { background-color: #EA7466; color: white; font-weight: 500; border: 1px solid #EA7466;  }
				.popup-top .button.red:hover { background-color: #E65644; border: 1px solid #E65644; }
				.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; }