/*!
* By Eureka Crew on March 21, 2018
*  Senior Backend Developer: Carolina Mazzaglia
*  Senior Frontend Developer: Jorge L Garcia G
*/

@import url(../fonts/helvetica/helvetica.css);
@import url(../fonts/bebas/bebas-neue.css);

*{border:0;margin:0;padding:0;}
html{font-size:16px;}
body{font-family:'helvetica_light';}

/***** Header *****/
	header{align-items:center;display:flex;height:110px;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:100;}
		.logo{height:100%;width:45%;}
			.logo a{display:block;height:10rem;margin-top:.75rem;position:relative;width:10rem;}
				.logo a img{left:0;position:absolute;top:0;width:100%;}
					.logoColor,.logoNegro,.logoBlanco,.playNegro,.playBlanco,.appleNegro,.appleBlanco{opacity:0;transition:all .5s;}
					.activo{opacity:1;}

		.menuApp{align-items:center;display:flex;justify-content:flex-end;width:45%;}
			.menuApp a{display:block;height:3rem;position:relative;transition:all .5s;width:9rem;}
				.menuApp a img{height:100%;left:0;position:absolute;top:0;width:100%;}
			.menuApp a:hover{transform:scale(1.07,1.07);}
			.menuApp a:nth-child(2){margin:0 3rem 0 .5rem;}

		.btnMenu{height:1.5rem;position:absolute;right:5%;top:43px;width:2.5rem;z-index:500;}
			.btnMenu button{background:none;cursor:pointer;height:100%;outline:none;position:relative;width:100%;}
				.btnMenu button div{background:black;border-radius:5px;height:5px;position:absolute;transition:all .5s;width:35px;}
				.btnMenu button div:nth-child(1){top:0;right:0;}
				.btnMenu button div:nth-child(2){margin:.25rem 0;right:0;top:6px;}
				.btnMenu button div:nth-child(3){bottom:0;right:0;}

			.btnEquis{}
			.btnEquis div:nth-child(1){background:#FFF;top:10px !important;transform:rotate(45deg);}
			.btnEquis div:nth-child(2){opacity:0;width:0;}
			.btnEquis div:nth-child(3){background:#FFF;bottom:9px !important;transform:rotate(-45deg);}

			.hamburguerWhite div{background:#FFF !important;}

/***** Menú *****/
	.menuComplete{align-items:center;background:rgba(0,0,0,.85);display:flex;flex-direction:column;height:100vh;justify-content:center;opacity:0;position:fixed;top:-105vh;transition:all .5s;width:100%;z-index:150;}
	.menuActivo{opacity:1;top:0;}
		.contMenu{align-items:center;color:#FFF;display:flex;justify-content:center;text-align:center;width:50%;}

	.menu{opacity:0;width:100%;}
	.menuActivoInterno{opacity:1;}
		.menu li{list-style-type:none;width:100%;}
			.menu li a{color:#FFF;display:block;font-family:'bebas_neue_regular';font-size:2rem;letter-spacing:.1rem;margin:.25rem 0;padding:.25rem 0;text-decoration:none;transition:all .5s;width:100%;}
			.menu li a:hover{background:rgba(255,255,255,.05);}

/***** General *****/
	section{height:100vh;width:100%;}
	.txtWhite{color:#FFF;}

/***** Autobus (Footer) *****/
	.lineaBus{align-items:flex-end;background:url(../img/ciudad.svg) center/100% no-repeat;bottom:0;display:flex;height:80px;justify-content:space-around;position:fixed;width:100%;z-index:10;}
		.parada{align-items:flex-end;display:flex;height:50%;justify-content:center;margin-bottom:1rem;position:relative;transition:all .5s;width:1rem;}
		.parada:nth-child(2),.parada:last-child{width:1.5rem;}
			.parada img{bottom:0;left:0;position:absolute;transition:all .5s;width:100%;}
			.paradaSubir{margin-bottom:3rem;}
		.bus{bottom:.75rem;left:2%;position:absolute;transition:all 1s;width:5rem;}
			.bus img{width:100%;}
			.busUno{left:14%;}
			.busDos{left:25%;}
			.busTres{left:36%;}
			.busCuatro{left:47%;}
			.busCinco{left:58%;}
			.busSeis{left:69%;}
			.busSiete{left:80%;}
			.busOcho{left:91%;}

/***** View internal *****/
	.contInternal{box-sizing:border-box;display:flex;height:100%;justify-content:space-between;padding:110px 0 80px 0;position:relative;width:100%;}
		.internalTxt{align-items:center;display:flex;flex-direction:column;justify-content:center;width:50%;}
			.internalTxt img{height:8rem;width:8rem;}
			.internalTxt h2{font-family:'bebas_neue_regular';font-size:3rem;letter-spacing:.1rem;margin:.5rem 0;text-align:center;width:50%;}
			.internalTxt p{text-align:center;width:50%;}
		.internalImg{align-items:center;display:flex;justify-content:center;height:100%;position:relative;width:50%;}

/***** Elementos Flotantes *****/
	.flotantes{height:80%;position:absolute;width:100%;z-index:25;}
		.flotantes img{position:absolute;}

/***** Portada *****/
	.portada{background:#F2F2F2;}
		.internalHome{align-items:center;box-sizing:border-box;display:flex;justify-content:center;padding:110px 0 70px 0;position:relative;width:100%;}
			.cellFront,.cellIzq,.cellDer,.backColors,.blancoPortada,.lineasColores,.textPortada{box-sizing:border-box;height:100%;text-align:center;width:100%;}
			.cellFront{padding-top:3%;position:relative;text-align:center;z-index:50;}
				.cellFront img:nth-child(1){bottom:7%;left:39%;position:absolute;width:22%;}
				.cellFront img:nth-child(2){width:15%;}
				.cellFront img:nth-child(4){width:1.1%;}
			.cellIzq{z-index:46;}
				.cellIzq img{margin:9% 30% 0 0;width:12%;}
			.cellDer{z-index:46;}
				.cellDer img{margin:9% 0 0 30%;width:12%;}
			.backColors{padding-top:3%;z-index:48;}
				.backColors img{width:32%;}
			.blancoPortada{padding-top:2%;z-index:46;}
				.blancoPortada img{width:75%;}
			.lineasColores{position:relative;z-index:44;}
				.lineasColores img{position:absolute;width:15%;}
				.lineasColores img:nth-child(1){bottom:43%;left:17%;}
				.lineasColores img:nth-child(2){top:40%;right:17%;}

/***** Cursos *****/
	.cursos{background:#cbd12d;}
		.cursos .contInternal .internalImg img{width:60%;}
		.flotanteCursos img:nth-child(1){bottom:13%;left:2%;width:13%;}
		.flotanteCursos img:nth-child(2){left:47%;top:15%;width:4%;}
		.flotanteCursos img:nth-child(3){bottom:15%;right:3%;width:7%;}
		.blancoCurso{position:absolute;}

	.imgCurso{animation:cursos 3s infinite;height:85%;width:60%;}

	@keyframes cursos {
		0%   {background:url(../img/animacion/anim1/01.png) center/cover no-repeat;}
		2%  {background:url(../img/animacion/anim1/02.png) center/cover no-repeat;}
		4% {background:url(../img/animacion/anim1/03.png) center/cover no-repeat;}
		6% {background:url(../img/animacion/anim1/04.png) center/cover no-repeat;}
		8% {background:url(../img/animacion/anim1/05.png) center/cover no-repeat;}
		10% {background:url(../img/animacion/anim1/06.png) center/cover no-repeat;}
		12% {background:url(../img/animacion/anim1/07.png) center/cover no-repeat;}
		14% {background:url(../img/animacion/anim1/08.png) center/cover no-repeat;}
		16% {background:url(../img/animacion/anim1/09.png) center/cover no-repeat;}
		18% {background:url(../img/animacion/anim1/10.png) center/cover no-repeat;}
		20% {background:url(../img/animacion/anim1/11.png) center/cover no-repeat;}
		22% {background:url(../img/animacion/anim1/12.png) center/cover no-repeat;}
		24% {background:url(../img/animacion/anim1/13.png) center/cover no-repeat;}
		26% {background:url(../img/animacion/anim1/14.png) center/cover no-repeat;}
		28% {background:url(../img/animacion/anim1/15.png) center/cover no-repeat;}
		30% {background:url(../img/animacion/anim1/16.png) center/cover no-repeat;}
		32% {background:url(../img/animacion/anim1/17.png) center/cover no-repeat;}
		34% {background:url(../img/animacion/anim1/18.png) center/cover no-repeat;}
		36% {background:url(../img/animacion/anim1/19.png) center/cover no-repeat;}
		38% {background:url(../img/animacion/anim1/20.png) center/cover no-repeat;}
		40% {background:url(../img/animacion/anim1/21.png) center/cover no-repeat;}
		42% {background:url(../img/animacion/anim1/22.png) center/cover no-repeat;}
		94% {background:url(../img/animacion/anim1/22.png) center/cover no-repeat;}
		100% {background:url(../img/animacion/anim1/01.png) center/cover no-repeat;}
	}

/***** Horarios *****/
	.horarios{background:#862885;}
		.horarios .contInternal .internalImg img{width:60%;}
		.flotanteHorarios img:nth-child(1){bottom:13%;left:2%;width:10%;}
		.flotanteHorarios img:nth-child(2){left:47%;top:15%;width:4%;}
		.flotanteHorarios img:nth-child(3){bottom:15%;right:3%;width:10%;}

/***** Servicios *****/
	.servicios{background:#03b19b;}
		.servicios .contInternal .internalImg img{width:60%;}
		.flotanteServicios img:nth-child(1){bottom:13%;left:2%;width:9%;}
		.flotanteServicios img:nth-child(2){left:47%;top:15%;width:4%;}
		.flotanteServicios img:nth-child(3){bottom:15%;right:3%;width:10%;}

/***** Finanzas *****/
	.finanzas{background:#f79321;}
		.finanzas .contInternal .internalImg img{width:60%;}
		.flotanteFinanzas img:nth-child(1){bottom:13%;left:2%;width:8%;}
		.flotanteFinanzas img:nth-child(2){left:45%;top:15%;width:7%;}
		.flotanteFinanzas img:nth-child(3){bottom:15%;right:3%;width:10%;}

/***** Movilidad *****/
	.movilidad{background:#E90E8B;}
		.movilidad .contInternal .internalImg img{width:60%;}
		.flotanteMovilidad img:nth-child(1){bottom:13%;left:2%;width:12%;}
		.flotanteMovilidad img:nth-child(2){left:47%;top:15%;width:4%;}
		.flotanteMovilidad img:nth-child(3){bottom:15%;right:3%;width:10%;}
		.btnVideo{background:none;color:#FFF;cursor:pointer;margin-top:1rem;outline:none;text-align:center;text-decoration:none;width:40%;z-index:26;}
			.btnVideo img{height:35px;transition:all .5s;width:50px;}
			.btnVideo p{color:rgba(255,255,255,.75);width:100%;}
		.btnVideo:hover img{transform:scale(1.1,1.1);}

/***** Video Modal *****/
	.videoModal{align-items:center;background:rgba(0,0,0,.9);display:flex;height:100vh;justify-content:center;left:0;opacity:0;position:fixed;top:105vh;width:100%;z-index:550;}
		.videoInternal{height:80%;opacity:0;position:relative;width:50%;}
			.videoInternal video{height:100%;width:100%;}
			.btnCerrarVideo{height:25px;position:absolute;right:20px;text-align:center;top:0;width:40px;z-index:600;}
				.btnCerrarVideo button{background:none;color:#FFF;cursor:pointer;font-size:2rem;margin-bottom:.5rem;outline:none;transition:all .5s;width:100%;}
				.btnCerrarVideo button:hover{color:#CAD12C;}

/***** Contáctos *****/
	.contactos{background:#C92545;}
		.contactos .contInternal .internalImg img{width:60%;}
		.flotanteContacto img:nth-child(1){bottom:13%;left:2%;width:9%;}
		.flotanteContacto img:nth-child(2){left:47%;top:15%;width:4%;}
		.flotanteContacto img:nth-child(3){bottom:15%;right:3%;width:10%;}

/***** Datos Personales *****/
	.datos{background:#8E8E8E;}
		.datos .contInternal .internalImg img{width:60%;}
		.flotanteDatos img:nth-child(1){bottom:13%;left:3%;width:8%;}
		.flotanteDatos img:nth-child(2){left:47%;top:15%;width:4%;}
		.flotanteDatos img:nth-child(3){bottom:15%;right:3%;width:10%;}

/***** Desacarga *****/
	.descarga{background:#F2F2F2;}
		.linkWeb{bottom:25px;left:0;position:absolute;width:100%;}
			.linkWeb h3{color:#E90E8B;font-family:'bebas_neue_regular';font-size:2rem;letter-spacing:.05rem;text-align:center;}
			.linkWeb h2{color:#862885;font-family:'bebas_neue_regular';font-size:2.5rem;letter-spacing:.05rem;text-align:center;}
			.linkWeb a{color:#03B19B;display:block;text-align:center;text-decoration:none;}
			.linkWeb a:hover{}

		.phonesCont{align-items:center;display:flex;height:50vh;justify-content:center;width:75%;}
			.iphoneCont{height:100%;position:relative;width:50%;}
				.iphoneCont img{position:absolute;right:0;top:10%;transition:all .5s;}
					.iphoneCont img:nth-child(1){right:30%;top:35%;width:12rem;z-index:14;}
					.iphoneCont img:nth-child(2){right:15%;top:10%;width:9rem;z-index:12;}
					.iphoneCont img:nth-child(3){right:3%;top:10%;width:17rem;z-index:10;}
				.iphoneCont:hover img:nth-child(1){right:32.5%;top:30%;transform:scale(1.05,1.05);}
				.iphoneCont:hover img:nth-child(2){transform:scale(1.1,1.1);}
			.androidCont{height:100%;position:relative;width:50%;}
				.androidCont img{left:0;position:absolute;top:10%;transition:all .5s;}
					.androidCont img:nth-child(1){left:30%;top:35%;width:13rem;z-index:14;}
					.androidCont img:nth-child(2){left:15%;top:10%;width:9rem;z-index:12;}
					.androidCont img:nth-child(3){left:3%;top:10%;transform:rotate(300deg);width:17rem;z-index:10;}
				.androidCont:hover img:nth-child(1){left:32.5%;top:30%;transform:scale(1.05,1.05);}
				.androidCont:hover img:nth-child(2){transform:scale(1.1,1.1);}

/***** No View *****/
	.noView{align-items:center;background:#F2F2F2;display:none;flex-direction:column;height:100%;justify-content:center;}
		.logoNoView{width:12.5%;}
			.logoNoView img{width:100%;}
		.txtNoView{text-align:center;margin:.4rem 0;width:90%;}
			.txtNoView h1{color:#862885;font-family:'bebas_neue_regular';font-size:1.75rem !important;letter-spacing:.05rem;margin:0rem 0;}
			.txtNoView p{color:#E90E8B;}
		.gifNoView{width:17.5%;}
			.gifNoView img{width:100%;}

/***** Responsive *****/
	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-width:1400px) {
		.btnCerrarVideo{right:0px;}
	}

	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (max-width:1024px) {
		.btnCerrarVideo{right:-50px;}
	}

	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (max-width:768px) {
		html{font-size: 19px;}

		header{/*background:rgba(0,0,0,.5);*/height:90px;}
			.logo a{width:7rem;}

			.menuApp a{width:6.25rem;}
			.menuApp a:nth-child(1){width:7rem;}

			.btnMenu{top:30px;}
			.btnEquis div:nth-child(1){top:12px !important;}
			.btnEquis div:nth-child(3){bottom:12px !important;}

		.contInternal{align-items:center;flex-direction:column;justify-content:center;padding:95px 0 80px 0;}
			.internalTxt{margin-bottom:2rem;width:100%;}
				.internalTxt img{width:6rem;}
				.internalTxt h2{font-size:2.5rem;margin:0;}
				.internalTxt p{font-size:.85rem;width:75%;}

			.internalImg{height:50%;position:relative;width:100%;}
			.cursos .contInternal .internalImg img{width:45%;}
			.horarios .contInternal .internalImg img{width:45%;}
			.servicios .contInternal .internalImg img{width:45%;}
			.finanzas .contInternal .internalImg img{width:50%;}
			.movilidad .contInternal .internalImg img{width:40%;}
			.contactos .contInternal .internalImg img{width:45%;}
			.datos .contInternal .internalImg img{width:40%;}

		.cellFront img:nth-child(1){left:27%;width:45%;}
		.cellFront img:nth-child(2){width:30%;}
		.cellIzq img{margin:15% 50% 0 0;width:25%;}
		.cellDer img{margin:15% 0 0 50%;width:25%;}
		.backColors img{width:55%;}
		.blancoPortada img{width:100%;}
		.lineasColores img{vwidth:35%;}
		.lineasColores img:nth-child(1){left:-10%;}
		.lineasColores img:nth-child(2){right:-10%;}

		.busUno{left:12%;}
		.busDos{left:22%;}
		.busTres{left:33%;}
		.busCuatro{left:44%;}
		.busCinco{left:55%;}
		.busSeis{left:66%;}
		.busSiete{left:77%;}
		.busOcho{left:87%;}

		.flotanteCursos img:nth-child(2),.flotanteHorarios img:nth-child(2),.flotanteServicios img:nth-child(2),.flotanteFinanzas img:nth-child(2),.flotanteMovilidad img:nth-child(2),.flotanteContacto img:nth-child(2),.flotanteDatos img:nth-child(2){display:none;}

		.btnVideo{z-index:26;}
			.btnVideo img{width:50px;}
			.btnVideo p{width:100%;}

		.videoModal{align-items:center;background:rgba(0,0,0,.9);display:flex;height:100vh;justify-content:center;left:0;opacity:0;position:fixed;top:105vh;width:100%;z-index:550;}
		.videoInternal{width:75%;}
			.btnCerrarVideo{right:-50px;top:75px;}

		.phonesCont{justify-content:space-around;width:95%;}
			.iphoneCont img:nth-child(1){width:9rem;}
			.iphoneCont img:nth-child(2){width:9rem;}
			.iphoneCont img:nth-child(3){width:16rem;}
				.iphoneCont:hover img:nth-child(1){transform:scale(1,1);}
				.iphoneCont:hover img:nth-child(2){transform:scale(1,1);}
			.androidCont img:nth-child(1){width:10rem;}
			.androidCont img:nth-child(2){width:9rem;}
			.androidCont img:nth-child(3){width:16rem;}
				.androidCont:hover img:nth-child(1){transform:scale(1,1);}
				.androidCont:hover img:nth-child(2){transform:scale(1,1);}
	}

	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (max-width:640px) {
		#fullpage,header,.btnMenu,.menuComplete,.lineaBus{display:none;}
		.noView{display:flex;}
			.txtNoView h1{font-size:2rem;}
			.txtNoView p{font-size:.9rem;}
	}

	@media (max-width:480px) {
		#fullpage{display:block;}
		header,.btnMenu,.menuComplete,.lineaBus{display:flex;}
		.noView{display:none;}

		header{height:75px;}
			.logo{width:30%;}
			.logo a{width:4rem;}

			.menuApp{width:65%;}
			.menuApp a{width:9rem;}
			.menuApp a:nth-child(1){width:10rem;}

			.btnMenu{height:1.25rem;top:27px;}
				.btnMenu button div{width:32px;}
				.btnMenu button div:nth-child(2){margin:.15rem 0;}

			.btnEquis div:nth-child(1){top:7px !important;}
			.btnEquis div:nth-child(3){bottom:12px !important;}

		.contInternal{align-items:center;flex-direction:column;justify-content:center;padding:20px 0 40px 0;}
			.internalTxt{height:48%;margin-bottom:1rem;width:100%;}
				.internalTxt img{height:4rem;width:3rem;}
				.internalTxt h2{font-size:1.75rem;margin:0;}
				.internalTxt p{font-size:.65rem;width:90%;}

			.internalImg{height:40%;position:relative;width:100%;}
			
			.cursos .contInternal .internalImg img{width:55%;}
			.horarios .contInternal .internalImg img{width:50%;}
			.servicios .contInternal .internalImg img{width:50%;}
			.finanzas .contInternal .internalImg img{width:55%;}
			.movilidad .contInternal .internalImg img{width:45%;}
			.contactos .contInternal .internalImg img{width:50%;}
			.datos .contInternal .internalImg img{width:45%;}

		.btnVideo{z-index:26;}
			.btnVideo img{height:35px;width:50px;}
			.btnVideo p{width:100%;}

		.menu li a{font-size:1.35rem;}

		.cellFront img:nth-child(1){left:21%;margin-bottom:18px;width:60%;}
		.cellFront img:nth-child(2){margin-bottom:15px;width:40%;}
		.cellFront img:nth-child(4){margin-top:7rem !important;width:1.1%;}
		.cellIzq img{margin:40% 50% 0 0;width:35%;}
		.cellDer img{margin:40% 0 0 50%;width:35%;}
		.backColors{padding-top:21%;}
			.backColors img{width:65%;}
		.blancoPortada img{margin-top:25%;width:100%;}
		.lineasColores img:nth-child(1){left:0%;}
		.lineasColores img:nth-child(2){right:0%;}

		.phonesCont{align-items:flex-end;height:50vh;width:95%;}
			
			.linkWeb{bottom:40px;}
			.linkWeb h3{font-size:1.75rem;}
			.linkWeb h2{font-size:2rem;}

			.iphoneCont img:nth-child(1){top:20%;width:5rem;}
			.iphoneCont img:nth-child(2){top:-5%;width:5rem;}
			.iphoneCont img:nth-child(3){top:-5%;width:8rem;}

			.androidCont img:nth-child(1){top:20%;width:5rem;}
			.androidCont img:nth-child(2){top:-5%;width:5rem;}
			.androidCont img:nth-child(3){top:-5%;width:8rem;}



		.lineaBus{align-items:flex-end;background:url(../img/ciudad.svg) center/250% no-repeat;}
		.parada{width:.65rem;}
		.parada:nth-child(2),.parada:last-child{width:.9rem;}
			.paradaSubir{margin-bottom:2.5rem;}
		.bus{left:-3%;width:3rem;}
			.bus img{width:100%;}
			.busUno{left:9%;}
			.busDos{left:21%;}
			.busTres{left:31%;}
			.busCuatro{left:42%;}
			.busCinco{left:53%;}
			.busSeis{left:64%;}
			.busSiete{left:75%;}
			.busOcho{left:84%;}
	}