@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto+Condensed:300,400|Roboto+Slab|Spinnaker');

.conoce .container {
    max-width: 100%;
}

/*@media(max-width: 1200px){
	.container {
	    width: 1140;
	}
}*/

section{
	display: block;
	overflow: hidden;
	width: 100%
}

section.segundo_nivel{
	display: block;
	overflow: hidden;
	width: 100%;
}

div.centrar{
	width: 1620px;
	margin: 0 auto;
	overflow: hidden;
}

.page-on-scroll section.banner{
	position: relative;
	z-index: 1;
	padding-top: 51px;
}

@media(max-width: 840px){
	.page-on-scroll section.banner{
		padding-top: 0px;
	}
}

@media(max-width: 1620px){
	div.centrar{
		width: 100%;
	}
}

a {
    cursor: pointer;
    outline: none;
    border: none;
    color: transparent;
}

a:hover {
    cursor: pointer;
    outline: none;
    border: none;
    color: transparent;
}

body{
	padding: 0px !important;
}

/*================================================
					BANNER
=================================================*/
section.banner ul{
	width: 100%;
}

section.banner img{
	width: 100%;
}

.degradado {
    height: 150px;
    position: relative;
    z-index: 43;
    margin-top: -150px;
    background: linear-gradient(to bottom, transparent, white 100%);
    width: 100%;
}

.conoce_contenedor_top {
    padding-top: 83px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #4d4d4d;
    text-align: center;
}

.conoce_contenedor_top p {
    padding: 32px 20px;
}

#my-div, #my-div-dos {
    position: relative;
    margin: 0 auto;
    width: 560px;
    padding-bottom: 20px;
}

@media(max-width: 556px){
	#my-div, #my-div-dos {
	    width: 100%;
	}
}

svg {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    fill: none;
    stroke: currentColor;
}

/*==================================================
					ICONOS AJAX
==================================================*/

div.btn-custom-ajax {
    position: relative;
    margin: 0 auto;
    width: 1620px;
    text-align: center;
    margin-bottom: 75px;
}

@media(max-width: 1620px){
	div.btn-custom-ajax {
	    width: 100%;
	}
}

div.btn-custom-ajax div{
	padding-right: 5px;
}

div.btn-custom-ajax img{
	display: inline-block;
	padding: 5px;
}

._selected {
    position: relative;
    width: 180px;
    height: 37px;
    border: 2px solid #999999;
    display: inline-block;
    top: 0px;
    text-align: left;
    margin-top: 5px;
}

span.texto_nivel {
    position: relative;
    color: #6f6f6f;
    top: 4px;
    left: 12px;
}

.n_gris, .n_amarillo, .nivel_nuevo, .nivel_nuevo:hover .n_amarillo{
	position: relative;
}

.n_gris, .n_amarillo, .nivel_nuevo:hover .n_amarillo{
	overflow: hidden;
	background-repeat: no-repeat;
    background-size: cover;
    float: right;
	width: 35px;
	height: 25px;
	top: 4px;
}

.n_gris {
    background: url(/templates/conoceupaep/img/svg/icon_vermas_gris.svg);
}

.n_amarillo {
    background: url(/templates/conoceupaep/img/svg/icon_vermas_amarillo.svg);
}

.nivel_nuevo {
    width: 180px;
    height: 37px;
    border: 2px solid #ffc006;
    display: inline-block;
    top: 0px;
    text-align: left;
    margin-top: 5px;
}

.nivel_nuevo:hover{
	border-color: #b61b1b;
}

.nivel_nuevo:hover .n_amarillo{
	background: url(/templates/conoceupaep/img/svg/icon_vermas_rojo.svg);
}


/*================================================
			CONTENEDOR CONOCE
================================================*/
section.contenido div.contenedor_categoria{
	overflow: hidden;
	display: block;
}

.conoce_izquierda{
    min-height: 491px;
    font-size: 16px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
}

.conoce_contenedor{
	width: 100%;
	margin: 0 auto;
	position: relative;
	font-size: 14px;
	font-family: 'Montserrat', sans-serif;
    text-align: left;
	font-weight: 300;
}

.conoce_izquierda .conoce_left {
    width: 40%;
    float: left;
    height: 491px;
    padding: 30px 0;
    position: relative;
    z-index: 3;
}

.conoce_txt{
	position: relative;
	width: 85%;
	float: right;
	color:#FFFFFF;
	font-family: 'Montserrat', sans-serif;
	font-weight:400;
	font-size:16px;
	text-align:left;
	top: 3%;
}

section.conoce_derecha div.concoe_contenedor a div.conoce_right.animation-element.slide-right.in-view div.conoce_txt{
	padding-right: 75px;
	width: 96%;
}

.conoce_txt h4{
	font-family: 'Montserrat', sans-serif;
	font-weight:300;
	font-size:32px;
	padding-bottom: 10px;
}

.conoce_izquierda .conoce_right {
    width: 60%;
    float: left;
    text-align: left;
    color: #FFFFFF;
    position: relative;
    height: 491px;
    overflow: hidden;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
    background-position: center; 
}

.diagonal_right{
	transition: All 1s linear;
	-webkit-transition: All 1s linear;
	-moz-transition: All 1s linear;
	transform: rotate(0deg) scale(1) skew(-16deg) translate(0px);
	-webkit-transform: rotate(0deg) scale(1) skew(-16deg) translate(0px);
	-moz-transform: rotate(0deg) scale(1) skew(-16deg) translate(0px);
	-o-transform: rotate(0deg) scale(1) skew(-16deg) translate(0px);
	-ms-transform: rotate(0deg) scale(1) skew(-16deg) translate(0px);
	width: 2px;
	height: 491px;
	left: -71px;
	padding: 0px 70px;
	position: absolute;
	z-index: 0;
}

.conoce_verBlanco{
	position: relative;
	top: 9px;
	right: 5px;
	float: right;
}

.conoce_derecha {
    min-height: 491px;
}

.diagonal_left{
	transition: All 1s linear;
	-webkit-transition: All 1s linear;
	-moz-transition: All 1s linear;
	transform: rotate(0deg) scale(1) skew(-16deg) translate(0px);
	-webkit-transform: rotate(0deg) scale(1) skew(-16deg) translate(0px);
	-moz-transform: rotate(0deg) scale(1) skew(-16deg) translate(0px);
	-o-transform: rotate(0deg) scale(1) skew(-16deg) translate(0px);
	-ms-transform: rotate(0deg) scale(1) skew(-16deg) translate(0px);
	width: 2px;
	height: 491px;
	right: -72px;
	padding: 0px 70px;
	position: absolute;
	z-index: 0;
	top: 0;
}

.conoce_derecha .conoce_left{
	width: 60%;
	float: left;
	text-align: left;
	position: relative;
	height: 491px;
    overflow: hidden;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
    background-position: center; 
}

.conoce_derecha .conoce_right{
	width: 40%;
	float: left;
	height: 491px;
	position: relative;
	padding: 30px 0;
}

.animation-element.slide-left {
	opacity: 0;
	-moz-transition: all 500ms linear;
	-webkit-transition: all 500ms linear;
	-o-transition: all 500ms linear;
    transition: all 500ms linear;
	-moz-transform: translate3d(-100px, 0px, 0px);
	-webkit-transform: translate3d(-100px, 0px, 0px);
	-o-transform: translate(-100px, 0px);
	-ms-transform: translate(-100px, 0px);
	transform: translate3d(-100px, 0px, 0px);
	overflow:hidden;
}

.animation-element.slide-left.in-view {
	opacity: 1;
	-moz-transform: translate3d(0px, 0px, 0px);
	-webkit-transform: translate3d(0px, 0px, 0px);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate(0px, 0px);
	transform: translate3d(0px, 0px, 0px);
	overflow:hidden;
}

.animation-element.slide-right {
	opacity: 0;
	-moz-transition: all 500ms linear;
	-webkit-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	transition: all 500ms linear;
	-moz-transform: translate3d(100px, 0px, 0px);
	-webkit-transform: translate3d(100px, 0px, 0px);
	-o-transform: translate(100px, 0px);
	-ms-transform: translate(100px, 0px);
	transform: translate3d(100px, 0px, 0px);
	overflow:hidden;
}

.animation-element.slide-right.in-view {
	opacity: 1;
	-moz-transform: translate3d(0px, 0px, 0px);
	-webkit-transform: translate3d(0px, 0px, 0px);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate(0px, 0px);
	transform: translate3d(0px, 0px, 0px);
	overflow:hidden;
}

@media(max-width: 820px){

	section.conoce_derecha div.concoe_contenedor a div.conoce_right.animation-element.slide-right.in-view div.conoce_txt {
	    padding-right: 5%;
	    width: 100%;
	}
	.diagonal_right{
		display: none;
	}

	.diagonal_left{
		display: none;
	}

	.conoce_izquierda{
		position: relative;
		height: 700px;
	}

	.conoce_izquierda .conoce_right {
		position: relative;
	    width: 100%;
	    height: 360px;
	    top: -341px;
	}

	.conoce_izquierda .conoce_left {
		position: relative;
		width: 100%;
		float: left;
		height: 335px;
		top: 353px;
		padding: 0px;
	}

	.conoce_derecha{
		position: relative;
		height: 700px;
	}

	.conoce_derecha .conoce_left{
		position: relative;
	    width: 100%;
	    height: 360px;
	}

	.conoce_derecha .conoce_right{
		position: relative;
	    width: 100%;
	    float: left;
	    height: 315px;
	    padding: 0px;
	}


	.conoce_txt{
	    width: 100%;
	    padding: 5% 5% 0% 5%;
	    top: 0%;
	}
}

@media (max-width: 480px){
	.conoce_txt {
	    font-size: 13px;
	}
	.conoce_txt h4 {
	    font-size: 24px;
	}
}

/*================================================
					INFRAESTRUCTURA
================================================*/

.conoce_infraestructura_datos {
    position: relative;
    width: 1620px;
    margin: 0 auto;
        margin-top: 0px;
    margin-top: 20px;
}

@media(max-width: 1620px){
	.conoce_infraestructura_datos {
	    width: 100%;
	}
}

.conoce_terreno, .conoce_construccion, .conoce_areas{
	width: 227px;
    display: inline-block;
    padding: 10px 10px;
}

.conoce_terreno {
    margin: 0 11% 0 0;
}

.conoce_construccion {
    margin: 0 10% 0 10%;
}

.conoce_areas {
    margin: 0 0 0 11%;
}

div.conoce_infraestructura_datos div img{
	padding-bottom: 55px;
}

div.conoce_contenedor_top div.conoce_menu a img.conoce_menu_contenido{
	padding-bottom: 15px;
}

@media(max-width: 1188px){
	.conoce_terreno {
	    margin: 0 0% 0 0;
	}

	.conoce_construccion {
	    margin: 0 25px 0 25px;
	}

	.conoce_areas {
	    margin: 0 0 0 0%;
	}
}

/*================================================
					PUEBLA
=================================================*/

.conoce_puebla {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.conoce_puebla .contenedor_puebla {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.contenedor_puebla .imagen_puebla {
    width: 70%;
    position: relative;
    background: url(/templates/conoceupaep/img/foto_puebla.jpg);
    height: 530px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
}

.conoce_puebla .contenido_puebla {
    position: relative;
    width: 30%;
    height: 530px;
    background-color: #000;
    float: right;
    -webkit-box-shadow: -111px 0px 22px 10px rgba(0,0,0,0.78);
    -moz-box-shadow: -111px 0px 22px 10px rgba(0,0,0,0.78);
    box-shadow: -111px 0px 22px 10px rgba(0,0,0,0.78);
}

.conoce_puebla .contenido_puebla h3, .conoce_puebla .contenido_puebla h4, .conoce_puebla .contenido_puebla p{
	position: relative;
    text-align: left;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

.conoce_puebla .contenido_puebla h3 {
    font-size: 26px;
    top: 20px;
    left: -30px;
}

.conoce_puebla .contenido_puebla h4 {
    font-size: 18px;
    left: -30px;
    padding-top: 10px;
}

.conoce_puebla .contenido_puebla p {
    font-size: 16px;
    left: -30px;
    padding-right: 35px;
    padding-top: 20px;
}

@media(max-width: 1104px){
	.contenedor_puebla .imagen_puebla {
	    width: 100%;
	}
	.conoce_puebla .contenido_puebla {
	    width: 100%;
	    -webkit-box-shadow: -111px 0px 22px 10px rgba(0,0,0,0.0);
	    -moz-box-shadow: -111px 0px 22px 10px rgba(0,0,0,0.0);
	    box-shadow: -111px 0px 22px 10px rgba(0,0,0,0.0);
	    height: auto;
	}
	.conoce_puebla .contenido_puebla h3, .conoce_puebla .contenido_puebla h4, .conoce_puebla .contenido_puebla p{
	    text-align: center;
	}

	.conoce_puebla .contenido_puebla h3, .conoce_puebla .contenido_puebla h4, .conoce_puebla .contenido_puebla p {
	    left: 0px;
	}
	.conoce_puebla .contenido_puebla p {
	    padding: 0px 10px;
	}
}

/*================================================
					ICONOS CONOCE
=================================================*/

section.conoce_botones{
	padding-bottom: 83px;
}

.conoce_comoLlegar, .conoce_campusCentral, .conoce_tressesenta {
    display: inline-block;
    width: 227px;
    padding: 10px 10px:;
}

@media(max-width: 458px){
	.conoce_tressesenta > a:nth-child(1) > img:nth-child(1){
		padding: 20px 0px;
	}
}

/*-----------------------------------------------------------------
                          [CONOCE UPAEP]
-----------------------------------------------------------------*/
section.conoce{
	padding: 50px 0px;
	overflow: hidden;
	display: block;
	text-align: center;
}


@media(max-width: 1620px){
	div.elementos{
		width: 100%;
	}
}

section.conoce div.cont_conoce{
	width: 1620px;
	margin: 0 auto;
}

@media(max-width: 1620px){
	section.conoce div.cont_conoce{
		width: 100%;
	}
}

section.conoce div.elementos div.cont_conoce{
	width: 100%;
	display: block;
}

h1.conoce_titulo{
	text-align: center;
	font-size: 40px;
	font-family: 'Spinnaker', sans-serif;
	text-transform: uppercase;
	color: #4d4d4d;
}

div.iconos_conoce{
	margin: 0 auto;
	text-align: center;
	padding: 15px 0px;
}

.iconos_conoce > a:nth-child(2) > svg:nth-child(1){
	margin: 0px 35px;
}

.loaderImage{
	display: none;
	position: absolute;
	min-height: 100%;
	width: 100%;
	z-index: 1;
	background: #000;
	opacity: .5;
	left: 0%;
	text-align: center;
}

.loaderImage img{
	position: static;
	width: 60px;
    padding-top: 296px;
}
a.venobox.vbox-item img.img_conoce{
	width: 100%;
}

div#foto.item{
	display: inline-table;
	margin: 6px 3px auto;
	width: 19.5%;
	overflow: hidden;
}

@media(max-width: 1188px){
	div#foto.item {
	    width: 24.5%;
	}
}

@media(max-width: 1180px){
	div#foto.item {
	    width: 24.2%;
	}
}

@media(max-width: 750px){
	div#foto.item {
	    width: 24%;
	}
}

@media(max-width: 605px){
	div#foto.item {
	    width: 23.8%;
	}
}

@media(max-width: 528px){
	div#foto.item {
	    width: 23.5%;
	}
}

@media(max-width: 478px){
	div#foto.item {
	    width: 23%;
	}
}

@media(max-width: 328px){
	div#foto.item {
	    width: 31%;
	}
}

div#foto_360.item{
	display: inline-table;
	margin: 6px 3px 6px 4px;
	width: 27%;
	overflow: hidden;
}

div.vbox-overlay div.vbox-container div.vbox-content{
	margin: 0px !important;
}

div.conoce_video{
	width: 30%;
	margin: 0 auto;
	display: inline-block;
}


@media(max-width: 1618px){
	div#foto_360.item {
	    width: 30%;
	}
}

@media(max-width: 1416px){
	div#foto_360.item {
	    width: 31%;
	}
}

@media(max-width: 1372px){
	div#foto_360.item {
	    width: 32%;
	}
}

@media(max-width: 1372px){
	div#foto_360.item {
	    width: 34%;
	}
}

@media(max-width: 1254px){
	div#foto_360.item {
	    width: 36%;
	}
}

@media(max-width: 1156px){
	div#foto_360.item {
	    width: 40%;
	}
}

@media(max-width: 1040px){
	div#foto_360.item {
	    width: 49%;
	}
}

@media(max-width: 900px){
	div#foto_360.item {
	    width: 80%;
	}
}

@media(max-width: 800px){
	div.vbox-overlay div.vbox-container div.vbox-content img.figlio{
		position: absolute;
		top: 50%;
		width: 100%;
		transform: translateY(-50%);
		left: 0%;
	}
}

@media (max-width: 700px){
	div.conoce_video{
		width: 100%;
	}
}

@media(max-width: 520px){
	div#foto_360.item {
	    width: 90%;
	}
}

@media(max-width: 462px){
	div#foto_360.item {
	    margin: 0px;
	}
}


@media(max-width: 415px) and (max-height: 320px){
	.momento-spherical-content-view .right-button-wrapper {
	    display: block !important;
	}
}

@media(max-width: 378px){
	h1.conoce_titulo {
	    font-size: 27px;
	}
}
/*================================================
					ANIMACIÓN
=================================================*/

div#animation_container, div#animation_container2{
	margin: 0 auto;
}