@import 'base.css';
@import 'web.css';
@import 'login.css';

/* Estilos Generales */
.titulo {
	/*font-family: "Rimac";*/
	font-size: 64px;
	font-weight: 700;	
	line-height: 66px;
	color: #000000;
	background: linear-gradient(90deg,#F6052D 0%, #FF6200 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.bv_gris {
	border-right: 2px solid #D8D8D8;
}
.bv_blanca {
	border-left: 4px solid #FFFFFF;
}
.bg-inicio {
	background-image:  url("../img/web/fondo-pagina-inicio.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: bottom center;
}

/*#cabecera {
	background-image:  url("../img/web/fondo-pagina.png");
	overflow: hidden;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}*/

/* Estilos del <header> */
header #logoResponsive,
header .iconMenu,
header .cerrarMenu {
	display: none;
}
#menu .boton {
	color: #000000;
}
#menu .boton:hover {
	background-color: #000000;
	color: #FFFFFF !important;
}
#menu #btnIngresar {
	border: 1px solid #000000;
}
#menu .btnBuscar {
	background-color: transparent;
	color: #FFFFFF;
	border: none;
}

/* Estilos del #banner */
#banner {
	margin-top: 100px;
}
#banner .cajaBanner {
	position: relative;
	height: 524px;
	/*background-color: #FFFFFF;
	border-radius: 25px;*/
}
#banner .cajaBanner .iconosBanner,
#banner .cajaBanner .textoBanner,
#banner .cajaBanner .imagenBanner {
	position: absolute;
}
#banner .cajaBanner .iconosBanner {
	top: 4px;
	right: 4px;
}
#banner .cajaBanner .iconosBanner img {
	/*height: 516px;*/
	width: auto;
}
#banner .cajaBanner .imagenBanner {
	top: -109px;
	left: 114px;
}
#banner .cajaBanner .imagenBanner img {
	/*height: 784px;
	height: 640px;*/
	border-radius: 50px;
}
#banner .cajaBanner .textoBanner {
	top: 34px;
	left: 47px;
	width: 500px;
}
#banner .textoBanner .tituloBanner {
	margin-top: -109px;
	opacity: 0;
	color: #DF3238;
}
#banner .cajaBanner .textoBanner h1 {
	/*font-family: "Rimac";*/
	font-size: 64px;
	line-height: 70px;
	font-weight: bold;
	margin: 0;
	letter-spacing: -1px;
	background: linear-gradient(90deg,#FF6200 10%,#F6052D 50%,#F6052D 70%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#banner .cajaBanner .textoBanner h2 {
	color: #000000;
	font-size: 31px;
	line-height: 40px;
	margin: 0;
	letter-spacing: -1px;
	margin-top: 150px !important;
	margin-left: 400px !important;
	width: 100%;
	opacity: 0;
}
#banner .cajaBanner .textoBanner p {
	color: #000;
	font-size: 17px;
	margin: 4px;
	width: 430px;
	font-weight: lighter;
	margin-top: 120px !important;
	opacity: 0;
	line-height: 25px;
}
	.bannerImageInAnimation {
	    opacity: 1;
	    transform: translateX(515px);
	    transition: opacity 0.5s ease-out, transform 0.5s;
	}
	.bannerImageOutAnimation {
		opacity: 0;
		transform: translateX(-250px);
		transition-delay: 0.4s !important;
		transition: opacity 0.2s ease-out, transform 0.2s;
	}
	.bannerTitleInAnimation {
		opacity: 1 !important;
		transform: translateY(100px);
		transition: opacity 0.5s ease-out, transform 0.5s;
	}
	.bannerTitleOutAnimation {
		opacity: 0;
		transform: translateY(-50px);
		transition-delay: 0.4s !important;
		transition: opacity 0.2s ease-out, transform 0.2s;
	}
	.bannerSubtitleInAnimation {
		opacity: 1 !important;
		transform: translateX(-400px);
		transition-delay: 0.5s !important;
		transition: opacity 0.5s ease-out, transform 0.5s;
	}
	.bannerSubtitleOutAnimation {
		opacity: 0;
		transform: translateX(200px);
		transition-delay: 0.2s !important;
		transition: opacity 0.2s ease-out, transform 0.2s;
	}
	.bannerMessageInAnimation {
		opacity: 1 !important;
		transform: translateY(-100px);
		transition-delay: 1s !important;
		transition: opacity 0.5s ease-out, transform 0.5s;
	}
	.bannerMessageOutAnimation {
		opacity: 0;
		transform: translateY(100px);
		transition: opacity 0.2s ease-out, transform 0.2s;
	}

/* Estilos del <main> */
#desarrollo {
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #EAECFB;
	font-size: 20px;
}
#desarrollo .foto img {
	width: 600px;
}

#reinventate .bg-reinvenate {
	background-image: url('../img/web/fondo-reinventate.png');
	background-position: bottom;
	background-repeat: no-repeat;
}
#reinventate .contenido {
	padding-top: 80px;
	padding-bottom: 180px;
	font-size: 20px;
	text-align: center;
}
#reinventate .contenido .fotos img {
	width: 255px;
}
#reinventate .contenido .recuerda {
	text-align: left;
	padding: 0 10px;
}

/* Estilos Responsive */
@media only screen and (max-width: 768px) {
	#desarrollo .contenido,
	#desarrollo .contenido p,
	#reinventate .contenido {
		width: 100%;
	}
	.titulo {
		letter-spacing: -1px;
	}
	
	/* Banner */
	#banner {
		height: auto;
		margin-top: 10px;
	}
	#banner .flex-direction-nav .flex-prev,
	#banner .flex-direction-nav .flex-next {
		top: 200px;
		padding: 7px 12px;
		width: 34px;
		height: 34px;
	}
	#banner .flex-direction-nav a:before {
		font-size: 20px;
	}
	#banner .cajaBanner {
		text-align: center;
		height: 754px;
	}
	#banner .cajaBanner .imagenBanner,
	#banner .cajaBanner .textoBanner {
		position: static;
	}
	#banner .cajaBanner .iconosBanner {
		display: none;
	}
	#banner .cajaBanner .textoBanner  {
		width: auto;
		margin-top: -40px;
		height: 280px;
	}
	#banner .cajaBanner .textoBanner .tituloBanner {
		display:inline-block;
	}
	#banner .cajaBanner .textoBanner .tituloBanner .iconosBanner {
		text-align: left;
	}
	#banner .cajaBanner .textoBanner .tituloBanner .iconosBanner img {
		width: 100px;
	}
	#banner .cajaBanner .textoBanner h1 {
		font-size: 36px;
		line-height: 36px;
	}
	#banner .cajaBanner .textoBanner h2 {
		font-size: 28px;
		line-height: 28px;
		text-align: center;
	}
	#banner .cajaBanner .textoBanner p {
		height: 100px;
		font-size: 14px;
		text-align: center;
		width: auto;
	}
	#banner .ir-abajo img {
	  	width: auto;
	}
	.imagenBanner {
		margin-top: 116px;
		margin-left: -149px;
	}
	#banner .cajaBanner .imagenBanner img {
		height: 485px;
    	width: auto;
	}
	.bannerImageInAnimation {
	    transform: translateY(-100px);
	}

	/* Desarrollo */
	#desarrollo .contenido {
		font-size: 22px;
		padding: 0 30px;
		
	}
	#desarrollo .foto img {
		width: 100%;
	}

	#desarrollo .titulo,
	#reinventate .titulo {
		font-size: 34px;
		line-height: 36px;
	}
	#desarrollo .titulo {
		margin-top: 20px;
	}

	/* Reinventate */
	#reinventate .bg-reinvenate {
		background-image: none;
	}
	#reinventate .contenido {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}