@import url( 'https://fonts.googleapis.com/css?family=Raleway:300,700&display=swap' );
:root {
	--gris: #dcdcdc;
	--grisOscuro: #9C9A9A;
	--azul: #002f90;
	--rojo: #d00000;
	--blanco: #ffffff;
	--negro: #000000;
	--azulFondo: #F6F7FB;
	--azulMarroquin: #232F69;
	--azulClaro: #234B86;
	--grisTexto: #716F70;
	--azulLight: #076BDB;
	--azulLetras: #B3CBF9;
}
body {
	margin: 0;
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	background-color: var( --gris );
	color: var( --azul );
}
body.nivel, body.marroquin, body.costa-azul { background-color: var( --blanco ); color: var( --grisOscuro ) }
img { max-width: 100%; }
.tRight { text-align: right; }
.tCenter { text-align: center; }
.mainBanner {
	width: 100%;
	display: flex;
	align-items: center;
	background-size: cover;
}
.mainBanner.home { background-image: url( '../images/fondo-home.jpg' ); background-position: center right; }
.mainBanner.marroquin { background-image: url( '../images/fondo-marroquin.jpg' ); background-position: center center; }
.mainBanner.costa { background-image: url( '../images/fondo-costa-azul.jpg' ); background-position: center center; }
.contenedor {
	width: 700px;
	height: 100%;
	max-width: 100%;
	padding: 50px;
	box-sizing: border-box;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}
.mainBanner.costa .contenedor { background-color: rgba( 208, 0, 0, 0.8 ); }
.mainBanner.marroquin .contenedor { background-color: rgba( 22, 56, 104, 0.8 ); }
.mainBanner.marroquin .contenedor,
.mainBanner.costa .contenedor {
	text-align: center;
	width: 400px;
}
.direccion { color: var( --blanco ); }
.break { flex-basis: 100%; height: 0; }
.hashTag {
	color: var( --blanco );
	font-size: 35px;
	font-weight: 700;
	text-align: center;
	min-width: 100%;
	margin-top: -50px;
}
.fullImg, .mapaMovil { width: 100%; height: auto; }
.mapaMovil { display: none; }
.contentBanner {
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	padding: 50px 0;
}
.contentBanner h1 {
	align-items: center;
	margin: 0 auto;
	font-weight: 300;
	font-size: 35px;
	letter-spacing: 5px;
}
.contentBanner h1 b { font-weight: 700; }
.contentBanner h1 i {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	text-align: center;
	border: 1px solid var( --azul );
	box-sizing: border-box;
	padding: 5px 8px;
	margin-right: 5px;
	justify-content: center;
}
.botones {
	width: 900px;
	max-width: 80%;
	margin: 50px auto;
	text-align: center;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 15px;
}
.botones a {
	text-transform: uppercase;
	color: var( --blanco );
	display: block;
	width: 230px;
	height: 65px;
	box-sizing: border-box;
	padding: 20px 0;
	text-align: center;
	background-color: var( --grisOscuro );
	border-radius: 10px;
	font-weight: 300;
	letter-spacing: 2px;
	text-decoration: none;
	transition: 0.4s all;
}
.botones a.azul:hover, .botones a.azul.elegido { background-color: var( --azul ) }
.botones a.rojo:hover, .botones a.rojo.elegido { background-color: var( --rojo ) }
.principal { width: 1600px; margin: 0 auto; max-width: 95%; } /* el valor de width era 1300 antes del 04-03-2024 */
.filaFlex { display: flex; }
.aCenter { align-items: center; }
.spaceFlex { justify-content: space-between; }
.fila { zoom: 1; width: 100%; box-sizing: border-box; }
.fila:before, .fila:after { content: ''; display: table; }
.fila:after { clear: both; }
.full { width: 100%; float: left; box-sizing: border-box; }
.veinteCinco { width: 25%; float: left; box-sizing: border-box; }
.treintaTres { width: 33.3%; float: left; box-sizing: border-box; }
.cincuenta { width: 50%; float: left; box-sizing: border-box; }
.sesenta { width: 60%; float: left; box-sizing: border-box; }
.cuarenta { width: 40%; float: left; box-sizing: border-box; }
.preHeader { background-color: var( --azulMarroquin ); color: var( --blanco ); text-align: right; box-sizing: border-box; padding: 10px; }
.preHeader a { color: var( --blanco ); margin-left: 15px; text-decoration: none; }
.azulFondo { background-color: var( --azulFondo ); }
body.nivel h1, body.marroquin h1, body.costa-azul h1 { font-size: 40px; color: var( --azul ); }
body.nivel h1.rojo, body.marroquin h1.rojo, body.costa-azul h1.rojo { color: var( --rojo ); }
body.nivel p, body.marroquin p, body.costa-azul p { font-size: 18px; line-height: 28px; }
.logoHome { display: block; max-width: 300px; }
.menu {
	list-style: none;
	margin: 0;
	padding-left: 0;
	display: flex;
	width: 100%;
	float: right;
}
.menu li a {
	font-size: 18px;
	margin: 5px 10px;
	display: inline-block;
	color: var( --grisTexto );
	text-decoration: none;
	transition: 0.4s;
}
.menu li a:hover { color: var( --rojo ) }
.boton {
	background-color: var( --rojo );
	color: var( --blanco );
	box-sizing: border-box;
	padding: 10px;
	display: block;
	max-width: 140px;
	text-align: center;
	text-decoration: none;
	transition: 0.4s;
}
.boton:hover { background-color: var( --grisOscuro ); }
.bx-wrapper li { position: relative; }
.bannerInfo {
	background-image: url( '../images/marroquin/slide.png' );
	background-position: top right;
	background-size: cover;
	position: absolute;
	height: 100%;
	width: 700px;
	max-width: 70%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	box-sizing: border-box;
	padding: 0 14% 0 60px;
	color: var( --blanco );
}
body.nivel .bannerInfo h1, body.marroquin .bannerInfo h1, body.costa-azul .bannerInfo h1 { font-weight: 300; display: block; width: 100%; font-size: 40px; color: var( --blanco )!important; }
body.nivel .bannerInfo h1 b, body.marroquin .bannerInfo h1 b, body.costa-azul .bannerInfo h1 b { font-weight: 700; display: block; width: 100%; }
.bannerInfo .boton { margin-top: -200px; font-size: 16px; }
.bx-wrapper .bx-controls-direction a {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 2px solid var( --blanco );
	font-size: 40px;
	color: var( --blanco );
	text-align: center;
	box-sizing: border-box;
	padding: 5px 0;
	margin-top: -30px;
}
.padTopBottom { padding: 80px 0; }
.iconoLista { display: flex; align-items: center; font-size: 20px; }
.iconoLista img { margin-right: 5px; }
.backgroundLeon {
	background-image: url( '../images/marroquin/leon.png' );
	background-position: top right;
	background-size: cover;
	padding: 150px 0;
}
.listaBullet { list-style: none; }
.listaBullet li { font-size: 18px; margin-bottom: 10px; }
.listaBullet li:before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f111";
	color: var( --azul );
	font-size: 10px;
	margin-right: 5px;
}
.oferta {
	width: 90%;
	margin: 5%;
	background-color: var( --blanco );
	-webkit-box-shadow: 5px 11px 21px 6px rgba( 0, 0, 0, 0.27 );
	box-shadow: 5px 11px 21px 6px rgba( 0, 0, 0, 0.27 );
	text-align: center;
	color: var( --azulLight );
	border: 1px solid var( --grisClaro );
}
.oferta img { width: 100%; height: auto; }
.oferta .info { box-sizing: border-box; padding: 25px 0 35px; position: relative; }
.oferta .info h2 { margin: 0 }
.oferta .info .boton {
	margin: 0 auto;
	position: absolute;
	right: 0;
	left: 0;
	bottom: -20px;
}
.videoFrame { width: 100%; height: auto; border: none; }
.backgroundCampus {
	background-image: url( '../images/marroquin/campus.png' );
	background-position: top center;
	background-size: cover;
	color: var( --blanco );
	padding: 150px 0 100px;
}
#ofertaEducativa p, #nuestraInstalacion p { width: 900px; margin: 0 auto; max-width: 90%; margin-bottom: 50px; }
body.nivel .backgroundCampus h1, body.marroquin .backgroundCampus h1, body.costa-azul .backgroundCampus h1 { color: var( --blanco ) }
.backgroundCampus .treintaTres { min-height: 250px; }
.backgroundCampus h2 { text-transform: uppercase; color: var( --azulLetras ); margin-bottom: 0; }
.backgroundCampus h3 { margin: 0; }
.backgroundCampus p { margin-top: 0; }
.backgroundCampus p, .backgroundCampus a { font-size: 14px !important; }
.backgroundCampus i { font-size: 30px; margin-right: 10px; color: #F7C95A; }
.backgroundCampus a { display: block; color: var( --blanco ); text-decoration: none; font-weight: 900; }
.backgroundCampus .filaFlex { align-items: flex-start; margin-top: 20px; }
.mapaContacto { margin-bottom: -5px; }
.preFooter { margin-top: -5px; background-color: var( --azulMarroquin ); color: var( --blanco ); text-align: center; box-sizing: border-box; padding: 10px; }
.preFooter a { color: var( --blanco ); text-decoration: none; }
.cPad { padding: 10px; }
footer { position: fixed; bottom: 0; width: 100%; text-align: right; }
body.nivel footer, body.marroquin footer, body.costa-azul footer {
	position: relative;
	bottom: initial;
	text-align: initial;
	background-color: var( --azulClaro );
	color: var( --blanco );
	box-sizing: border-box;
	padding: 20px 0;
}
body.nivel footer .copyRight, body.marroquin footer .copyRight, body.costa-azul footer .copyRight { color: var( --blanco ); width: 350px; }
.mMovil { font-size: 50px; color: var( --azul ); display: none; }
.copyRight { color: var( --grisOscuro ); padding: 20px; box-sizing: border-box; }
footer .sociales { width: 180px; text-align: right; }
footer .sociales a { color: var( --blanco ); font-size: 20px; margin: 0 5px; }
@media screen and ( max-width: 1070px ) {
	.bannerInfo .boton { margin-top: -100px; }
	#somos h1 { margin-top: 0; }
}
@media screen and ( max-width: 970px ) {
	.menu li a { font-size: 16px; }
	body.marroquin h1, body.costa-azul h1 { font-size: 35px; }
}
@media screen and ( max-width: 880px ) {
	body.marroquin .bannerInfo h1, body.costa-azul .bannerInfo h1 { font-size: 30px; }
	.menu li a { font-size: 15px; }
	#opcionEducativa .sesenta, #somos .cincuenta { width: 100%; float: none; }
	#somos .cincuenta.iconoLista { width: 50%; float: left; }
	#somos h1, #somos p, #opcionEducativa h1, #opcionEducativa p { text-align: center; }
	#somos .iconosDiv { width: 450px; margin: 0 auto; }
}
@media screen and ( max-width: 840px ) {
	.menu {
		display: none;
		position: absolute;
		width: 100%;
		float: none;
		left: 0;
		right: 0;
		top: 175px;
		z-index: 1;
		background-color: var( --blanco );
		box-sizing: border-box;
	}
	.menu li { padding: 10px 0; box-sizing: border-box }
	.menu li a { display: block; width: 100%; text-align: center; font-size: 18px; box-sizing: border-box }
	.mMovil { display: block; }
	#ofertaEducativa .veinteCinco { width: 50%; }
}
@media screen and ( max-width: 750px ) {
	footer { position: relative; margin-top: -50px; }
	body.marroquin footer, body.costa-azul footer { margin-top: 0; }
	.contentBanner h1 { font-size: 25px; width: 90%; }
	.contentBanner h1 i { width: 40px; height: 40px; font-size: 28px; }
	.mainBanner.marroquin, .mainBanner.costa { display: block; }
	.mainBanner.costa { background-color: rgba( 208, 0, 0, 0.8 ); background-image: none; }
	.mainBanner.marroquin { background-color: rgba( 22, 56, 104, 0.8 ); background-image: none; }
	.mainBanner.marroquin .contenedor, .mainBanner.costa .contenedor {
		width: 100%;
		padding: 15px;
		text-align: center;
		display: block;
		height: auto;
	}
	.mainBanner.marroquin .contenedor .logo, .mainBanner.costa .contenedor .logo { width: 320px; max-width: 100%; }
	.hashTag { margin-top: 0; font-size: 20px; }
	.mainBanner.marroquin .direccion, .mainBanner.costa .direccion { margin-top: 30px; }
	.mapaMovil { display: block; margin-bottom: 15px; }
	.bannerInfo .boton { margin-top: 0; font-size: 14px; }
	body.marroquin h1, body.costa-azul h1 { font-size: 25px; }
	body.marroquin .bannerInfo h1, body.costa-azul .bannerInfo h1 { font-size: 25px; }
	#nuestroCampus .treintaTres { width: 50%; }
	#nuestroCampus .treintaTres:last-child { width: 100%; float: none; }
	.galeriaDiv .treintaTres { width: 50%; }
}
@media screen and ( max-width: 580px ) {
	body.marroquin footer .filaFlex, body.costa-azul footer .filaFlex { display: block; }
	body.marroquin footer .filaFlex .sociales, body.marroquin footer .filaFlex .copyRight,
	body.costa-azul footer .filaFlex .sociales, body.costa-azul footer .filaFlex .copyRight { width: 100%; text-align: center; }
}
@media screen and ( max-width: 550px ) {
	.botones { display: block; text-align: center; }
	.botones a { margin: 15px auto; }
	.hashTag { font-size: 30px; }
	.bannerInfo { padding-left: 30px; }
	.bannerInfo .boton { display: none; }
	body.marroquin .bannerInfo h1, body.costa-azul .bannerInfo h1 { font-size: 20px; }
	.bx-wrapper .bx-controls-direction a {
		width: 30px;
		height: 30px;
		font-size: 15px;
		margin-top: -8px;
	}
	#somos .iconosDiv { width: 220px; }
	#nuestroCampus .treintaTres, #somos .iconosDiv .cincuenta { width: 100%; float: none; min-height: 0; }
	#nuestroCampus .treintaTres { margin-bottom: 30px; }
	.backgroundCampus .filaFlex { text-align: center; }
	.backgroundCampus { padding-bottom: 50px; }
	.backgroundCampus i { display: none; }
}
@media screen and ( max-width: 450px ) {
	footer { text-align: center; }
	#ofertaEducativa .veinteCinco { width: 100%; float: none; margin-bottom: 40px; }
	.galeriaDiv .treintaTres { width: 100%; float: none; }
}
@media screen and ( max-width: 370px ) {
	.hashTag { font-size: 25px; }
	.contentBanner h1 { font-size: 20px; }
	.contentBanner h1 i { width: 30px; height: 30px; font-size: 16px; }
}
@media screen and ( max-height: 700px ) and ( orientation: landscape ) {
	.hashTag { font-size: 20px; }
	footer { position: relative; margin-top: -50px; }
}
@media screen and ( max-height: 670px ) and ( orientation: landscape ) {
	.mainBanner.home .contenedor { padding: 20px; }
	.mainBanner.marroquin .hashTag, .mainBanner.costa .hashTag { margin-top: 0; }
}