/* 
=======================================
==   CUSTOMIZACION DE ESTILOS.CSS    ==
=======================================
*/

/*Importación*/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300&display=swap;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');

/*Colores identidad de la web FONDO*/ 
 .fondo-destacado { background-color: #ff8b00 }
 
 
/*Colores identidad de la web TEXTO*/
 .c-destacado { color: #0098ff }
 .c-destacado2 { color: #35546a }
 
 .fondo-pie { background-color:  }

/*Botón hover*/
.boton:hover, .boton:focus {color: #ffffff; 
							background: #ddcc59;}
@media (max-width:991px) { .boton:hover, .boton:focus {color: #ffffff; 
							background: #585858;} }		/*Comportamiento en movil*/		

.boton.destacado { background-color: #0098ff; color:#FFF;  }	
.boton.destacado:hover { background-color: #000000; color:#FFF;  }							


/*Botón hover en formulario*/
.button:focus,.button:hover{background-color:#ff8b00;
							color:#fff}							

/*Link invert*/
.ainvert:hover { color:#fff; }

/*Fuente destacada*/
.fuente-destacada { font-family: 'Oswald', sans-serif; }
.fuente-destacada2 { font-family: 'Russo One', sans-serif; }
.fuente-destacada3 { font-family: 'Manrope', sans-serif; }



/*selecciones*/
::selection { 	background:#ffc500;  
				color:#fff;}
::-moz-selection { 	background:#ffc500; 
					color:#fff;}

/*scrolltop*/
.scrolltop { background: #ffc500 url(../images/top.png) no-repeat center center; }

/*Separa de menu (espacio que ocupa el menu horizontalmente)*/
.separa-menu { height: 96px } /*Escritorio*/
 @media (max-width:991px) { .separa-menu { height: 25px } }  /*Tableta / Movil*/

/* 
==============================
==   CONTENIDO DE LA WEB    ==
==============================
*/

/*ZONA MENU*/
	.fontop {
    background: rgba(255,255,255,0.5);
    width: 100%;
    padding: 0;
    color: white;
    position: fixed;
    z-index: 100;
    border-top: 0px solid #e39000; 
    border-bottom: 0px solid #dbdbdb;}
	
	.separa-menu {
	    height: 0px;
	}

/*ZONA CABECERA*/

	/*Hero2*/
	.boxhero { overflow: hidden; height: 100vh; 
		position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around} 
	@media (max-width: 991px) { .boxhero { height: auto; }}
	.boxhero__img { position: absolute; top: 0; left: 0; height: 100vh; width: 100%; z-index: 1;
		min-height: 100vh;
		background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;
		background-image: url(../images/fondo-cabecera.jpg); background-position: center top; background-repeat: no-repeat; }
	.boxhero__img:after { /*hack iphone ? (hay que probarlo)*/
			content:"";
	      	position:fixed; /* stretch a fixed position to the whole screen */
	      	top:0;
	      	height:100vh; /* fix for mobile browser address bar appearing disappearing */
	      	left:0; right:0;
	      	z-index:-1; /* needed to keep in the background */
	      	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
			background-image: url(../images/fondo-cabecera.jpg); background-position: center top; background-repeat: no-repeat; }	
	@media (max-width: 991px) { .boxhero {  /*min-height: 100vh;*/ /*hack iphone ?*/
											/*background-size: 100vmax 100vmax;*/ /*hack iphone ?*/ }}	
	/*Fin Hero2*/

	/*Video*/
		.section { position: relative;
			width: 100%;
			/*height: 100vh;*/
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden; 
			padding-top: 120px;
			}
		@media (max-width: 1500px) { .section { /*height: 90vh*/height: auto; padding-top: 120px; } }	
		@media (max-width: 1300px) { .section { /*height: 90vh*/ height: auto; } }	
		@media (max-width: 991px)  { .section {align-items: start} }
		@media (max-width: 768px)  { .section {align-items: start; padding-top: 0} }


		/*.section h1 { text-align: center;
			font-size: 6rem;
			z-index: 1 }*/

		.box-video {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
		video { width: 100%; /*height: 100vh*/ }
		@media (max-width: 1300px) { video { width:auto; height: 900px } }
		@media (max-width: 1200px) { video { width:auto; height: 900px } }
		@media (max-width: 991px) { video { width:auto; height: 900px } }
		@media (max-width: 500px) { video { width:auto; height: 800px } }
		@media (max-width: 450px) { video { width:auto; height: 800px } }
		@media (max-width: 400px) { video { width:auto; height: 900px } }


		.color-overlay { position: absolute;
			top: 0;
			left: 0;
			/*background-image: url(../images/pixel-video.png); background-repeat: repeat;*/
			/*background-color: lightblue;*/
			width: 100%;
			height: 100vh; opacity: 0.5 }
	/*Fin Video*/

	.contenedor-slogans {
		width: 100%; margin: 0 auto; z-index: 1; position: relative; padding: 20px; 
	}
	.box-mapa { background-image: url(../images/mapa.svg); background-size: cover; background-repeat: no-repeat; 
		height: 500px; width: 70%; margin: 0 auto; }
	@media (max-width: 1450px) { .box-mapa { height: 400px } }	
	@media (max-width: 1200px) { .box-mapa { height: 400px } }
	@media (max-width: 991px) { .box-mapa { height: 250px; margin-top: 50px } }
	@media (max-width: 768px) { .box-mapa { height: auto; background-image: none } }	

	.tit-hero { font-size: 5.2em; line-height: 1em; width: 100%; text-align: center }
	@media (max-width: 991px) { .tit-hero { font-size: 3.2em; margin-top: 100px } }
	
	.rayon { width: 65px; height: 9px; background-color: #ffc400; margin: 20px auto auto }
	.subtit-hero { font-size: 2.437em; line-height: 1em; width: 100%; text-align: center  }
	@media (max-width: 991px) { .subtit-hero { font-size: 1.5em } }

	.slogans { margin-top: 110px }
	@media (max-width: 500px) { .slogans { margin-top: 50px } }

	.slogans-v { /*margin-top: 110px*/ margin-top: 40px }
	@media (max-width: 991px) {  }

	@media (max-width: 991px) { .slogans-v { margin-top: 60px } }
	.box-slogan { background-color: rgba(255,255,255,0.54); border-left: 5px solid #ffc400; padding: 25px 25px 25px 15px; font-size: 1.25em; display: block; }
	@media (max-width: 991px) { .box-slogan { margin-bottom: 10px }  }
	@media (max-width: 500px) { .box-slogan { padding: 15px 25px 15px 15px } } 
	
	.box-slogan img { float: left; line-height: 55px }
	.box-slogan p { margin-left: 65px; }
	@media (max-width: 991px) { .box-slogan p { font-size: 0.8em } }


	.raya { background-color: #ffc400; width: 75px; height: 2px; margin: 20px auto}
	.titulo-pag { color: #35546a;font-size: 3.125em; line-height: 1em }
	.subtitulo-pag { color: #35546a;font-size: 1.075em; line-height: 1em }


	/*Zona Our Way*/
	.ourway {background-color: #f9f9f9}
	.box-our { background-color: white; margin-bottom: 30px }
	.box-our.izq  { margin-right: 20px }
	.box-our.der  { margin-left: 20px }
	@media (max-width: 991px) { .box-our.izq  { margin-right: 0px } .box-our.der  { margin-left: 0px } }

	.box-our__cuadrado { display: inline-block; background-color: #ffc400; width: 9px; height: 16px;  }
	.box-our__ico {height: 170px; width: 150px; background-color: #e4e4e4; float: right; padding: 35px 28px}
	.box-our__ico.izqu { float: left; }

	@media (max-width: 500px) { .box-our__ico {height: 140px; width: 90px;  padding: 15px 17px} }

	.box-our__ico img {  }
	@media (max-width: 500px) { .box-our__ico img { width: 60px } }

	.box-our__texto { /*text-align: right;*/ padding: 20px 15px; padding-right: 160px }
	.box-our__texto.izqu { /*text-align: right;*/ padding: 20px 15px; padding-left: 160px }
	@media (max-width: 1400px) { .box-our__texto { padding: 15px 10px; padding-right: 160px } }
	@media (max-width: 1200px) { .box-our__texto { padding: 15px 10px; padding-right: 160px } }
	@media (max-width: 500px) { .box-our__texto { padding: 15px 10px; padding-right: 100px } }

	@media (max-width: 1400px) { .box-our__texto.izqu { padding: 15px 10px; padding-left: 160px } }
	@media (max-width: 1200px) { .box-our__texto.izqu { padding: 15px 10px; padding-left: 160px } }
	@media (max-width: 500px) { .box-our__texto.izqu { padding: 15px 10px; padding-left: 100px } }	

	.box-our__tit { font-size: 1.25em; color: #464646; text-align: right; }
	.box-our__parrafo { font-size: 0.9em; line-height: 1.5em; color: #464646; text-align: right; }
	.box-our__tit.izqu { text-align: left; }
	.box-our__parrafo.izqu { text-align: left; }
	
	@media (max-width: 1200px) {
		.box-our__tit { font-size: 1.1em; color: #464646; }
		.box-our__parrafo { font-size: 1em; color: #464646; line-height: 1.4em; }		
	}
	@media (max-width: 500px) { .box-our__parrafo { font-size: 0.9em; color: #464646; text-align: right; line-height: 1.2em } }

	
	/*Zona Perfect Partner*/
	.zona-partner {background-color: #fff}

	.box-partner { background-color: #f2faff; padding: 25px; text-align: center; margin: 0 auto; position: relative; margin-bottom: 30px }
	@media (max-width: 1400px) { .box-partner { min-height: 320px } }
	@media (max-width: 1200px) { .box-partner { min-height: 300px } }
	@media (max-width: 768px) { .box-partner { min-height: auto } }
	.box-partner__texto { font-size: 1.375em; color: #35546a }
	@media (max-width: 1200px)  { .box-partner__texto { font-size: 1.1em; line-height: 1.1em } }

	.box-partner img {width: 130px}
	.readmore { position: absolute; bottom: 0; right: 0; background-color: #0098ff; padding: 2px 5px; color: white; font-size: 0.7em; line-height: 1.7em; cursor: pointer; }
	.parrafo-partner { margin-bottom: 20px; background-color: #f9f9f9; padding: 25px 15px; color: #35546a; text-align: center }


	/*Zona Work With Us*/
	.box-workus { background-color: #f9f9f9; padding: 25px;  text-align: right; }
	.box-workus.dere { text-align: left }
	.box-workus__tit { font-size: 1.562em; color: #414141; line-height: 1em }
	.box-workus__parr p {  }
	.box-workus__circulo { width: 10px; height: 10px; border-radius: 5px; background-color: #90aec8; display: inline-block; }

	.box-workus__ico { padding: 25px }
	@media (max-width: 1200px) { .box-workus__ico.dere { padding: 25px auto; width: 100%; text-align: center; } }

	.box-workus__ico.izqu { padding: 25px; float: right; }
	@media (max-width: 991px) { .box-workus__ico.izqu { float: none; text-align: center; width: 100% } }

	.box-oferta { background-color: #fff; padding: 20px; border-left: 5px solid #ffc500; margin-bottom: 10px }
	.box-oferta:hover {background-color: #eaf5ff;-webkit-box-shadow: 2px 3px 5px -1px rgba(0,0,0,0.23);  -moz-box-shadow: 2px 3px 5px -1px rgba(0,0,0,0.23);box-shadow: 2px 3px 5px -1px rgba(0,0,0,0.23);}
	.box-oferta span { font-size: 0.9em }
	

	/*Zona formulario*/
	.zona.contact { background-image: url(../images/fon-contact.jpg); background-size: cover; background-repeat: no-repeat; }


	/*Zona Oferta*/
	.fon-oferta { background-image: url(../images/fondo-oferta.jpg); background-size: cover; background-repeat: no-repeat; }
	.box-oferta__cab { padding-top: 50px }
	.box-oferta__cab h2 { color: #fff; font-size: 1.5em; line-height: 1em }
	.box-oferta__cab h3 { color: #fff; font-size: 1.2em; line-height: 1em }

	.box-empresa { background-color: #f9f9f9; padding: 20px; font-size: 1em; line-height: 1em; display: inline-block; color: #000 }
	.fb-spacebetween { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;
    	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }