.titulo_area {
		font-size: 3.5em;
		position: absolute;
		top: 25px;
		left: 80px;
		z-index: 160;
		font-family: 'Noto Serif', serif;
	}

	.caja_areas .areas {
		display: block;
		color: #fff;
		text-decoration: none;
		padding: 40px;
		margin: 0;
		margin-bottom: 10px;
		position: relative;
		overflow: hidden;
		width: 100%;
		min-height: 135px;
		background: grey;
	}

	.caja_areas .areas:last-child {
		margin-bottom: 0;
	}

	.caja_areas .areas img {
        width: 100%;
        height: auto;
		position: absolute;
		left: 0;
		top: -9999px;
		bottom: -9999px;
		margin: auto;
		z-index: 55!important;
	}

	.caja_areas .areas:hover img {
		-webkit-filter: grayscale(100%);
		filter: grayscale(100%);
		transition: all 0.8s ease;
	}

	.caja_descripcion_area {
		padding: 40px 80px 10px;
	}

	.caja_descripcion_area span {
		font-size: 1.3em;
		margin: 0;
	}

	.mas_areas {
		font-size: 3em;
		position: absolute;
		right: 20px;
		top: -9999px;
		bottom: -9999px;
		margin: auto;
		z-index: 177;
		display: block;
		padding: 0 10px;
		height: 70px;
		color: #fff;
	}

	.mas_areas:hover {
		background-color: #fff;
		border-radius: 10px;
		transition: all 0.8s ease;
	}

	#lista_areas {
		display: none;
	}

	.lista2 {
	list-style: none;
	/*float: left;*/
	/*margin-left: 2em;*/
	/*width: 90%;*/
}

.lista2 li {
	line-height: 1.3;
	margin-left: 10px;
	margin-bottom: 15px;
	position: relative;
	padding-right: 40px;

}

.lista2 li span {
	vertical-align: top;
	color: #707070;
}

.bala {
	color: #5a72b1;
	font-size: 0.5em;
	position: absolute;
	top: 5px;
	left: -25px;
}

.vinculo {
	margin-left: 40px;
}

	#lessons {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  overflow-x: hidden;
	  overflow-y: scroll;
	  transition: visibility 0.8s, opacity 0.8s;
	  visibility: visible;
	  opacity: 1;
	  z-index: 3;
	}
	
	#lessons .primera {
	  position: relative;
	  height: 100%;
	  transition: width 0.5s, background 0.5s, opacity 0.5s;
	  opacity: 1.0;
	  margin: 0;
	  padding: 0!important;
	}

	#lessons .primera a .text-center {
		color: #fff;
		text-decoration: none;
		display: block;
		border: 1px solid #fff;
		border-radius: 22px;
		text-shadow: 1px 1px 1px #AAAAAA;
		background: rgba(255,255,255,.4);
		position: absolute;
		bottom: 20px;
		left: 0; 
		right: 0;
		width: 140px;
		margin-left: auto;
		margin-right: auto;
		font-size: 1em;
		padding: 5px 20px;
		opacity: 0;
		filter:alpha(opacity=0);
		margin-top: 30px;
	}
	
	#lessons .primera:nth-child(1)::after {
		background-image: url('imgs/bg1.png');
		background-size: cover;
		background-position: center bottom;
		background-repeat: no-repeat;
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -2;
		opacity: 1;
	}

	#lessons .primera:nth-child(2)::after {
		background-image: url('imgs/bg2.png');
		background-size: cover;
		background-position: center bottom;
		background-repeat: no-repeat;
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -2;
		opacity: 1;
	}

	#lessons .primera:nth-child(3)::after {
		background-image: url('imgs/bg3.png');
		background-size: cover;
		background-position: center bottom;
		background-repeat: no-repeat;
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -2;
		opacity: 1;
	}

	#lessons .primera:nth-child(4)::after {
		background-image: url('imgs/bg4.png');
		background-size: cover;
		background-position: center bottom;
		background-repeat: no-repeat;
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -2;
		opacity: 1;
	}

	#lessons .primera:nth-child(5)::after {
		background-image: url('imgs/bg5.png');
		background-size: cover;
		background-position: center bottom;
		background-repeat: no-repeat;
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -2;
		opacity: 1;
	}

	#lessons .inner {
		width: 100%;
		height: 100%;
		margin: 0!important;
		padding: 0!important;
		text-align: left;
		transition: transform 0.5s;
		position: relative;
	}

	#lessons .primera .inner a {
		display: block;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		color: #fff;
		text-decoration: none;
		background: transparent;
		transition: background 0.5s;
		/*font-size: 14px;
		position: absolute;*/
		position: relative;
	}

	#lessons .primera .inner a.div:first-child {
		position: relative;
		width: 100%;
		height: 100%;
	}

	#lessons .primera a span {
		line-height: normal;
		font-weight: normal;
		width: 100%;
	}

	.titulos_area {
		background: rgba(199, 198, 198, 0.35);
		position: absolute;
		bottom: 0;
		padding: 10px;
		width: 100%;
	}

	.titulos_area span:first-child {
		font-size: 1em;
		display: inline-block;
	}

	.titulos_area span:nth-child(2) {
		font-size: 2em;
		display: inline-block;
		height: 112px;
	}

	.slideup, .slidedown {
		max-height: 0;
		overflow-y: hidden;
		-webkit-transition: max-height 1s ease-in-out;
		-moz-transition: max-height 1s ease-in-out;
		-o-transition: max-height 1s ease-in-out;
		transition: max-height 1s ease-in-out;
	}

	.slidedown {            
	    max-height: 305px;
	}

	#lessons .primera a:focus {
	  box-shadow: 0 0 15px #666;
	}

.area_elegida {
	margin: 0;
	padding: 15px;
	width: 100%;
	height: 100%;
	/*background: #237da2;
	background: rgba(35, 125, 162, 0.8)*/
	background: rgba(0, 0, 0, 0.4)
}

.area_elegida span:last-child {
	display: block;
	font-size: 2em;
	margin-top: 20px;
}

.grid-item:hover div {
	opacity: 1;
}

.caja_proyectos h2 {
	font-size: 2em;
	text-align: left;
	margin-top: 50px;
	margin-bottom: 50px;
}

.caja_proyectos h2 strong {
	font-size: 1.5em;
	color: #2280a0;
}

.caja_proyectos h3 {
	font-size: 1.5em;
	text-align: center;
	margin: 0 9%;
}

.animado {
	position: relative;
	height: 700px;
	width: 100%;
}

.animado div:first-child {
	background-image: linear-gradient(to bottom, #222F6E , #991F80);
	height: 658px;
	width: 334px;
	position: absolute;
	bottom: 10px;
	left: 90px;
}

.animado div:nth-child(2) {
	background-color:#2280a0;
	height: 382px;
	width: 734px;
	position: absolute;
	bottom: 0;
	left: 120px;
}

.animado div:last-child {
	background-color:#00748B;
	height: 480px;
	width: 370px;
	position: absolute;
	bottom: 10px;
	left: 120px;
	overflow: hidden;
	opacity: 0;
}

.animado img {
	width: 100%;
	heigth: auto;
}

.animadob {
	position: relative;
	height: 700px;
	width: 100%;
}

.animadob div:first-child {
	background-image: linear-gradient(to bottom, #222F6E , #991F80);
	height: 84%;
	width: 43%;
	position: absolute;
	bottom: 10px;
	left: 12%;
}

.animadob div:nth-child(2) {
	background-color: #2280a0;
	background-image: url('imgs/edificio_iisue.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: 49%;
	width: 70%;
	position: absolute;
	bottom: 0;
	left: 15%;
}

.animadob div:last-child {
	background-color: #00748B;
	background-image: url('imgs/edificio_estructura.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: 62%;
	width: 48%;
	position: absolute;
	bottom: 10px;
	left: 15%;
}

.fulljustify {
  text-align: justify;
}

.fulljustify:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.caja_seminarios {
	background-image: linear-gradient(to right, #00748B , #102360);
}

.infinite-item {
	opacity: 0;
}

.sticky-top { top: 70px; }

.grid_p, .grid_nap {
	width: 97%;
	margin-left: 3%;
	margin-right: 0;
}

.element-item.transition { background: #0F8; background: hsl( 144, 100%, 50%); }

.quitar_filtro {
	display: none;
}

#no_activos {
	display:none;
}

.grid_p:after, .grid_nap:after {
  content: '';
  display: block;
  clear: both;
}

.grid_ip, .grid_ipn {
	float: left;
	width: 20%;
	margin-bottom: 30px;
	padding: 0;
	margin-right: 20px;
	position: relative;
}

.grid_ip {
	width: 11.28%;
	margin-right: 3%;
}

.grid_ip:first-child {
	padding-left: 0;
}

.grid_ip a, .grid_ipn a {
	display: block;
	width: 100%;
	height: 100%;
	float: left;
	position: relative;
}

.grid_ip img, .grid_ipn img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

.grid_ip a:hover img, .grid_ipn a:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
	transition: all 1.1s ease;
}

.grid_ip a p, .grid_ipn a p {
	font-size: 0.85em;
	color: #fff;
	margin: 0;
	text-align: center;
	float: left;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 4px 5px;
	width: 100%;
	background: rgba(51, 153, 153, 0.6);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-height: X;
	max-height: X*N;
}

.grid_ip a:hover p, .grid_ip a:hover, .grid_ipn a:hover p, .grid_ipn a:hover {
	background: rgba(0, 0, 0, 0.5);
	transition: background 1s ease;
}

	.caja_seccion {
		float: none;
	}
	
	.caja_investigadores h2 {
		color: #fff;
		font-family: 'Noto Sans', sans-serif;
        font-size: 2em;
        text-align: left;
        margin-bottom: 60px;
        margin-left: 3%;
	}
	
	.caja_investigadores {
		background-image: url('../images/textura.png');
		padding: 3%;
		background-size: cover;
	}
	
	.caja_fondo {
		background-image: linear-gradient(to right, #322a7e , #006c9a);
	}
	
	.caja_titulo {
		background-image: linear-gradient(to right, #222F6E , #5378B9);
		padding: 20px 0!important;
		margin-bottom: 40px;
	}
	
	.caja_titulo h2 {
		color: #fff;
		text-align:left;
		margin: 0 3%!important;
	}
	
	.banner_investigador {
        margin-bottom: 50px;
    }

    .banner_investigador a {
        font-size: 1.1em;
        text-decoration: none;
        padding: 20px!important;
        border: none;
        margin: 0;
        text-align: center;
        width: 100%;
        display: block;
        height: 100%;
        border: 1px solid #237da2;
    }
    .banner_investigador a:hover {
        text-decoration: none;
        /*background:  rgba(0, 0, 0, 0.1);*/
        background: rgba(51, 153, 153, 0.1);
    }
    /**  Pedrio orona
    55 1613 4417
    servicioplusmac@gmail.com  */
     .banner_investigador a p:first-child {
	 	font-weight: bold;
	 	font-size: 1.1em;
	 	margin-bottom: 10px;
	 }
	
    .banner_investigador a p:last-child {
		font-size: 0.8em;
		margin-top: 10px;
	}
    .banner_investigador a p {
        width: 100%!important;
        margin: 0;
        padding: 0;
        text-align: left;
    }
    .banner_investigador a span {
        font-size: 0.9em;
    }
    
    /*.banner_investigador .swiper-container {
      width: 100%;
      height: 100%;
      margin-left: auto;
      margin-right: auto;
    }*/

    .banner_investigador .swiper-slide {
		height: auto;
    }
    
    .s15, .s16 {
		width: 84%;
		margin-left: 8%;
		margin-right: 8%;
		padding-top: 25px;
	}
	
	.caja_publicaciones {
		position: relative;
		width: 100%;
	}
	
	[class^="swiper-button-"], .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet::before {
		transition: all .3s ease;
	}
	
	.caja_publicaciones:hover .button-prev,
	.caja_publicaciones:hover .button-next {
  		-webkit-transform: translateX(0);
		transform: translateX(0);
  		opacity: .7;
  		visibility: visible;
	}
	
	.caja_publicaciones .swiper-pagination-bullet {
    	opacity: 0.8;
		background-color: #fff;
		border: 1px solid #ccc;
		-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.25)!important;
        -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.25)!important;
        box-shadow: 1px 1px 1px rgba(0,0,0,0.25)!important;
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=180, Color='#333333')"!important;
        filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=180, Color='#333333')!important;
    }
	
	.caja_publicaciones .swiper-pagination-bullet-active {
		background-color: #237da2;
		border-color: #237da2;
	}
    
    %transition_all_03s {
		transition: all .3s ease;
	}
	
	%backface_visibility_hidden{
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}
	
    [class^="button-"]{
		height: 80px;
		padding: 17px 25px;
		cursor: pointer;
		opacity:0;
		visibility: hidden;
		@extend %transition_all_03s;
		margin: 0;
		position: absolute;
		top: 45%;
		transition: all .3s ease;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	.caja_publicaciones .button-prev {
		-webkit-transform: translateX(50px);
		transform: translateX(50px);
		left: 10px;
	}

	.caja_publicaciones .button-next {
		-webkit-transform: translateX(-50px);
		transform: translateX(-50px);
		right: 10px;
	}
	
	.caja_publicaciones .button-prev:hover, .caja_publicaciones .button-next:hover {
		color: #fff!important;
		background:  rgba(0, 0, 0, 0.8);
	}
	
	.swiper-pagination {
		/*position: relative;*/
		pading-top: 50px;
	}
	/*
	.swiper-pagination-bullets .swiper-pagination-bullet {
		margin: 0 9px;
		position: relative;
		width: 12px;
		height: 12px;
		background-color: #102360;
		opacity: .4;
	}
	
	.swiper-pagination-bullets .swiper-pagination-bullet::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 18px;
		height: 18px;
		-webkit-transform: translate(-50%, -50%);
		      transform: translate(-50%, -50%);
		border: 0px solid #102360;
		border-radius: 50%;
	}
	
	.swiper-pagination-bullets .swiper-pagination-bullet:hover, .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
		opacity: 1;
	}
	
	.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
		border-width: 1px;
	}*/
	
	.custom-control-lg .custom-control-label::before,
.custom-control-lg .custom-control-label::after {
    top: 0.1rem !important;
    left: -2rem !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
}

.custom-control-lg .custom-control-label {
    margin-left: 0.5rem !important;
    font-size: 1rem !important;
}

.custom-control-lg {
	margin-bottom:20px;
}

.custom-control-lg:last-child {
	margin-bottom:0;
}

.lista li {
    font-size: 30px;
    color: #237da2;
    line-height: 30px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.lista li span {
    font-size: .55em;
    color: #000;
    vertical-align: top;
}

	@media (max-width:1340px) {
		.animadob {
			height: 540px;
		}
		
		.grid_ip {
			width: 13.66%;
		}
	}

	@media (max-width:1240px) {
		.area_elegida span:last-child {
			font-size: 1.7em;
		}
		
		.cabeza_seccion {
			font-size: 3em;
		}
	}
	
	@media (min-width: 1026px) {
		#lessons > .primera {
			display: table-cell;
			vertical-align: middle;
			height: 100%;
			padding: 18px 0;
			padding-bottom: 0;
			width: 19%;
		}

		#lessons > .primera:hover {
			width: 24%;
			z-index: 2;
		}
		
		#lessons > .primera:before {
			position: absolute;
			width: 1px;
			height: 100%;
			top: 50%;
			left: 0;
			content: '';
			transform: translateY(-50%);
			background: linear-gradient(
				to bottom,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255, 0.6) 50%,
				rgba(255, 255, 255, 0) 100%
			);
		}

		#lessons > .primera:after {
			position: absolute;
			width: 1px;
			height: 100%;
			top: 50%;
			right: 0;
			content: '';
			transform: translateY(-50%);
			background: linear-gradient(
				to bottom,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255, 0.6) 50%,
				rgba(255, 255, 255, 0) 100%
			);
		}
		
		#lessons {
			display: table;
			overflow: hidden;
		}
		
		#lessons img {
			width: 90%;
			padding: 40px 0;
		}
		
		#lessons .primera:hover .titulos_area span:nth-child(2) {
			font-size: 1.2em;
			height: 50px;
			-webkit-transition: all 1s ease-in-out;
		    -moz-transition: all 1s ease-in-out;
		    -o-transition: all 1s ease-in-out;
		    transition: all 1s ease-in-out;
		}
		
		.titulos_area span:nth-child(2) {
			font-size: 1.5em;
		}
		
		#lessons .primera:hover .titulos_area {
			background: #237da2;
			-webkit-transition: all 1s ease-in-out;
		    -moz-transition: all 1s ease-in-out;
		    -o-transition: all 1s ease-in-out;
		    transition: all 1s ease-in-out;
		}
		
		#lessons .primera:hover .titulos_area > span:first-child {
			font-size: 0.8em;
			-webkit-transition: all 1s ease-in-out;
		    -moz-transition: all 1s ease-in-out;
		    -o-transition: all 1s ease-in-out;
		    transition: all 1s ease-in-out;
		}

		#lessons .primera:hover .titulos_area span:nth-child(2) {
			font-size: 1.3em;
			height: 50px;
			-webkit-transition: all 1s ease-in-out;
		    -moz-transition: all 1s ease-in-out;
		    -o-transition: all 1s ease-in-out;
		    transition: all 1s ease-in-out;
		}
		
		#lessons .primera a .text-center:hover {
			background: #fff;
			text-shadow: none;
			text-decoration: none;
			color: #102360;
		}

		#lessons .primera:hover .text-center {
			opacity: 1;
			filter:alpha(opacity=100);
		    -webkit-transition: all 1s ease-in-out;
		    -moz-transition: all 1s ease-in-out;
		    -o-transition: all 1s ease-in-out;
		    transition: all 1s ease-in-out;
		}

		#lessons .primera:hover a p span:nth-child(1),
		#lessons .primera:hover a p span:nth-child(2),
		#lessons .primera:hover a p span:nth-child(3) {
			background: none;
		}

		#lessons .primera:nth-child(1):hover + #lessons .primera:nth-child(1)::after {
			opacity: 1.0;
		}
	}
	
	@media (max-width: 1025px) {
		#lessons > .primera:after {
			position: absolute;
			width: 100%;
			height: 1px;
			right: 0;
			bottom: 0;
			content: '';
			background: linear-gradient(
				to right,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255, 0.6) 50%,
				rgba(255, 255, 255, 0) 100%
			);
		}
		
		#lessons {
			overflow: hidden;
		}
		
		#lessons .primera:hover .titulos_area {
			background: #237da2;
			-webkit-transition: all 0.5s ease-in-out;
		    -moz-transition: all 0.5s ease-in-out;
		    -o-transition: all 0.5s ease-in-out;
		    transition: all 0.5s ease-in-out;
		}
		
		.titulos_area {
			padding: 15px;
			width: 100%;
			height: 100%;
			/*background: #237da2;*/
			/*background: rgba(35.0, 125.0, 162.0, 0.8)*/
		}

		.titulos_area div {
			font-size: 1em;
			padding: 0;
		}

		.titulos_area div span {
			display: block;
			height: 300px;
		}

		.titulos_area span:first-child {
			font-size: 1em;
			margin-bottom: 15px;
		}

		.titulos_area span:nth-child(2) {
			font-size: 1.8em;
			height: auto;
			margin-bottom: 15px;
			line-height: 110%!important;
		}
		
		#lessons .primera {
			height: 410px;
			border-bottom: 2px solid #fff;
		}
		
		#lessons .primera:nth-child(1)::after,
		#lessons .primera:nth-child(2)::after,
		#lessons .primera:nth-child(3)::after,
		#lessons .primera:nth-child(4)::after,
		#lessons .primera:nth-child(5)::after {
			top: 0;
		}
		
		#lessons a p span:nth-child(3) {
			font-size: 0.9em;
			opacity:1;
		}
		
		#lessons .primera .inner a {
			height: 100%;
			top: 0;
		}
		
		.slideup, .slidedown {
			max-height: 305px;
		}
		
		#lessons .primera a .text-center {
			opacity: 1;
			filter:alpha(opacity=1);
			text-shadow: none;
			text-decoration: none;
			color: #102360;
		}
		
		.grid_ip {
			width: 17%;
		}
		
		.area_elegida span:last-child {
			font-size: 2em;
		}
	}

@media (max-width:992px) {
	.grid_ip {
		width: 17%;
	}
	
	.grid_ip a p {
		-webkit-line-clamp: 3; /* number of lines to show */
	}
	
	.grid_p .grid_ip:last-child {
		display: block;
	}
	
	.grid_nap .grid_ipn:last-child {
		display: block;
	}
	
	.animadob {
		height: 400px;
	}
	
	h1 {
		font-size: 2.6em;
	}
	
	h3 {
		font-size: 1.8em;
	}
	
	.cabeza_seccion {
		font-size: 2.5em;
	}
}

@media (max-width: 867px) {
	.grid_ip {
		width: 22%;
	}
}

@media (max-width: 767px) {
	.grid_ip {
		width: 30.3%;
	}
	
	.animadob {
		height: 310px
	}
	
	h1 {
		font-size: 2.3em;
	}
	
	h3 {
		font-size: 1.4em;
	}
	
	.cabeza_seccion {
		font-size: 2em;
	}

	.caja_areas .areas {
			min-height: 90px;
		}

		.titulo_area {
			font-size: 1.5em;
			position: absolute;
			top: 25px;
			left: 10px;
			padding-right: 80px;
		}

		.caja_descripcion_area {
			padding: 20px 25px 0px;
		}

		.mas_areas {
			font-size: 2.5em;
			height: 55px;
		}
	}

@media (max-width:576px) {
	.grid_ip {
		width: 47%;
	}
	
	.animadob {
		height: 250px;
	}
	
	h1 {
		font-size: 2em;
	}
	
	h3 {
		font-size: 1.2em;
	}

	.caja_areas .areas {
			min-height: 95px;
		}

		.titulo_area {
			font-size: 1.5em;
			position: absolute;
			top: 15px;
			left: 10px;
		}
}