@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body {
	font-family: 'Open Sans', sans-serif;
}

h1, h2 {
	margin: 40px auto 60px;
}

h1 span, h2 span {
	position: relative;
	display: inline-block;
	padding: 10px 50px;
}

.total { display: table; overflow: hidden; width: 100%; height: 100%; }
.medio { display: table-cell; vertical-align: middle; }

h1 span:after, h2 span:after {
	border-bottom: #011123 2pt solid;
	content: '';
	display: block;
	width: 100%;
	position: absolute;
	bottom: -1px;
	left: 0;
}

.formulario {
	position: relative;
}

.formulario img.fondo {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}

.formulario, .gracias {
	padding: 40px 0 80px;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
}

.formulario form {
	box-shadow: 0 0 30px rgba(1, 17, 35, 0.39);
	-moz-box-shadow: 0 0 30px rgba(1, 17, 35, 0.39);
	-webkit-box-shadow: 0 0 30px rgba(1, 17, 35, 0.39);
	padding: 35px 20px;
	background: rgba(255, 255, 255, 0.39);
}

/*----------------------------------------
Oferta Educativa
----------------------------------------*/
.oferta .carrera {
	position: relative;
	cursor: pointer;
}

.oferta .carrera img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	z-index: 10;
}

.oferta .carrera .gradient {
	position: absolute;
	left: 0;
	bottom: 0;
	top: 0;
	right: 0;
	z-index: 20;
}

.oferta .carrera .gradient.blue {
	opacity: 0.8;
	filter: alpha(opacity=80);
	background-image: -webkit-linear-gradient(top, rgba(11, 55, 104, 0.3) 0%, #0b3768 100%);
	background-image: linear-gradient(to bottom, rgba(11, 55, 104, 0.3) 0%, #0b3768 100%);
}

.oferta .carrera .fondo {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	z-index: 30;
	width: 100%;
	height: 100%;
	background: #011123;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: opacity 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	-moz-transition: opacity 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	transition: opacity 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.oferta .carrera:hover .fondo {
	opacity: 0.9;
	filter: alpha(opacity=90);
}

.oferta .carrera .titulo {
	position: absolute;
	left: 45px;
	right: 45px;
	top: 50%;
	text-align: center;
	z-index: 40;
	-webkit-transform: translate3d(0, -50%, 0);
	-ms-transform: translate3d(0, -50%, 0);
	transform: translate3d(0, -50%, 0);
}

.oferta .carrera .titulo .nombre {
	position: relative;
	font: normal 400 20px/24px;
	color: #FFFFFF;
	-webkit-transition: all 180ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	-moz-transition: all 180ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	transition: all 180ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.oferta .carrera:hover .titulo .nombre {
	padding-bottom: 8px;
	margin-bottom: 8px;
}

.oferta .carrera .titulo .nombre:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 15px;
	height: 1px;
	margin-left: -7.5px;
	background: #FFFFFF;
	opacity: 0;
	-webkit-transition: opacity 180ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	-moz-transition: opacity 180ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	transition: opacity 180ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.oferta .carrera:hover .titulo .nombre:after {
	opacity: .4;
}

.oferta .carrera .titulo .modalidad {
	font: normal 400 13px/17px "Futura", sans-serif;
	color: #FFFFFF;
	letter-spacing: 0.4px;
	opacity: 0.6;
	filter: alpha(opacity=60);
}

/*----------------------------------------
Beneficios
----------------------------------------*/
.beneficios, .sedes {
	background: #D4D7DB;
}

.beneficios .general {
	width: 25%;
	float: left;
	position: relative;
	overflow: hidden;
}

.beneficios .benef {
	position: relative;
}

.beneficios .benef:after {
	background: rgba(0, 0, 0, .4);
	content: '';
	left: 0;
	height: 100%;
	opacity: .8;
	position: absolute;
	top: 0;
	transition: opacity .2s linear;
	width: 100%;
}

.beneficios .benef:hover:after {
	opacity: 1;
}

.beneficios .benef img {
	position: relative;
	width: 100%;
}

.beneficios .benef .titulo {
	text-align: left;
	bottom: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #fff;
	left: 0;
	background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .64) 100%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .64) 100%);
	padding: 20px;
	position: absolute;
	width: 100%;
	z-index: 1;
}

.beneficios .benef .titulo.up {
	left: 0;
	position: absolute;
	top: 0;
	z-index: 1;
}

.beneficios .conte {
	position: absolute;
	top: 0;
	left: 0;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 2.1875rem .9375rem;
	color: #fff;
	background: #011123;
	opacity: 0;
	visibility: hidden;
	transition: all .4s ease;
}

.beneficios .benef:hover + .conte, .conte:hover {
	opacity: 1;
	visibility: visible;
}

.beneficios .conte ul {
	margin: 0 auto;
	padding: 0 20px;
	padding-top: 2rem;
	font-size: 1rem;
	line-height: 1.17;
}

.beneficios .conte ul li {
	list-style: none;
	margin: 20px 0;
	color: #fff;
	transform: translateX(-40px);
	transition: all .4s ease;
}

.beneficios .conte ul li:nth-child(2n) {
	color: #D4D7DB;
	transform: translateX(-60px);
	transition: all .6s ease;
}

.beneficios .benef:hover + .conte ul li, .conte:hover ul li, .beneficios .benef:hover + .conte ul li:nth-child(2n), .conte:hover ul li:nth-child(2n) {
	transform: translateX(0);
}

/*----------------------------------------
Sedes
----------------------------------------*/
.sedes .sede {
	border-right: 1px solid #011123;
	padding: 10px 30px;
}

.sedes .sede:last-child {
	border: transparent;
}

/*----------------------------------------
Versión Movil
----------------------------------------*/

/* Dispositivo xl */
@media screen and (max-width:1721px) {
	.beneficios .conte ul {
		font-size: .8em;
	}

	.beneficios .conte ul li {
		margin: 8px auto;
	}

	h1 {
		font-size: 2em;
	}

	h1 span, h2 span {
		padding: 10px 25px;
	}

	h5 {
		font-size: 1em;
	}

}

@media screen and (max-width:1551px) {
	.beneficios .benef .titulo h3 {
		font-size: 1.2em;
	}

}

@media screen and (max-width:1281px) {
	.beneficios .benef img {
		height: 100%;
		width: inherit;
	}

}

@media (max-width:1025px) {
	.beneficios .general {
		width: 50% !important;
		height: 320px !important;
	}

	.beneficios .benef img {
		width: 100%;
		height: inherit;
	}

	.beneficios .conte ul {
		font-size: 1em;
	}

	.beneficios .conte ul li {
		margin: 10px auto;
	}

	.beneficios .conte {
		background: rgba(1, 17, 35, .75);
	}

	.beneficios .benef + .conte, .conte {
		opacity: 1;
		visibility: visible;
	}

	.beneficios .conte ul li, .beneficios .conte ul li:nth-child(2n) {
		transform: translateX(0);
	}

}

/* Dispositivo md */
@media screen and (max-width:770px) {
	h1 {
		font-size: 2em;
		margin: 20px 10px;
	}

	h1 span, h2 span {
		padding: 10px 20px;
	}

	.sedes .sede {
		padding: 10px 15px;
	}

	.oferta .carrera .titulo {
		left: 10px;
		right: 10px;
	}

	.beneficios .general {
		height: 380px !important;
	}

}

@media (max-width:641px) {

	.beneficios .general {
		width: 100% !important;
		max-height: 300px !important;
		height: inherit !important;
		float: none;
	}
}

/* Dispositivo sm */
@media screen and (max-width:575px) {
	h1 {
		font-size: 1.5em;
	}

}

@media (max-width:451px) {
	h1 {
		font-size: 1.3em;
	}

	.sedes .sede {
		padding: 10px;
	}

	.beneficios .general {
		width: 100% !important;
		max-height: inherit !important;
		height: inherit !important;
		float: none;
	}

}

/* Dispositivo moviles */
@media (max-width:391px) {
}

@media screen and (max-width:321px) {
}