:root{
	--blanco:  #FFFFFF;
    --oscuro:  #212121;
    --primario:#FFC107;
}


*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	font-family: "Open Sans", Arial, Sans-serif;
	font-size: 16px;
}

/*SCROLL DE NAVBAR AÑADIDO POR ALBERTO CRUZ
EL 1 DE SEPTIEMBRE DE 2021
 ****************/

.DivWithScroll{
		height:65vh;
		width:200px;
		overflow:hidden;
		overflow-y:scroll;
		overflow-x: hidden;
		direction:rtl;
		background-color: #F5F5F5;
		border: 1px solid #DDDDDD;
		font-weight: bold;
		border:1px solid rgba(136, 90, 90, 0.25);
		font-size: 12px;
		
	}
/*webkit sólo mejora apariencia de scroll, no es compatible con mozilla*/
/* width */
::-webkit-scrollbar {
width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}

/*El tamaño maximo donde se aplicara esta clase
es de 768px. Es decir, para esconcer el navbar de las
PC -- Alberto Cruz*/
@media (max-width: 768px){
	.hide_desk_nav{
		display: none;
	}
	
}

.provisional{
	max-width: 50%;
	align-content: center;

}

/********** NAVBAR ADAPTABLE A DISPOSITIVOS MOVILES ****************/
.fixed-top {
  max-height: 100vh;
  overflow: auto;
}
/*para cambiar enlaces del navbar*/
/*.linea .container .collapse a{
	font-size: 8px;
	padding: 5px 0px;
}
*/
/****** HEADER ********/
.header {
	padding-top: 56px;
	overflow: hidden;
}
.header .encabezado{
	background-image: url(../img/header.png);
    background-repeat: no-repeat;
    background-size:cover;
    height: 400px;
    padding: 5rem;
	width: 100%;
    position: relative;
}

.header .encabezado .encabezado__contenido{
	position:absolute;
	top:1;
    bottom:0;
    right:0;
    left:0;
    /*Código para alinear cualquier elemento, de forma universal*/
    display:flex;
    flex-direction:column;
    align-items:center;/*Orientación vertial*/
    justify-content: center; /*Orientación horizontal*/
	
}

.header .encabezado .encabezado__contenido span{
	font-weight: 700;/*BOLDER*/
}

.boton{
    background-color:rgba(14, 11, 63, .3);
    color:#fff;
    padding:0.75rem 0rem;
    margin-top: 3rem;
	margin-bottom:0.5rem;
    font-size:1rem;
    text-decoration: none;
    border-radius: 1.8rem;
    width:20%;
    text-align: center;
    border: groove;
	border-color:var(--primario);

}

@media (max-width: 980px) {
	.boton{
		width: 80%;
		margin-top: 1.5rem;
		margin-bottom:0.7rem;
		font-size:0.8rem;
	}

	.header .encabezado{
		width:100%;
		height: 260px;
		background-position: center center;
		background-color: #fff;
		background-attachment:local;
	}
}


.header .enlace{
	text-align: 	center;		
}
.header .youtube{
	width: 10%;
}
.contenedor{
			margin-bottom: 20px;			
			color: #000;
		}
.contenedor .unam{
	width: 200px;
}


.contenedor div{
			
			padding: 20px;
			border:1px solid rgba(255,255,255,.25);
		}
/****** BARRA LATERAL*****/
.aside{

	position: fixed;
	font-size: 14px;
	
}
.aside li{
	text-align: center;
}
.aside li .active{
	
	color: #fff;
	background: #1E296D;
}
.aside h1{
	font-weight: 300;
}
.aside a{

	color: #000;
}
.aside a:hover{
	color: red;
}

/***** MAIN ******/

.main{
	margin-top: 50px;
}
.main .btn{
	background: #1E296D;
	font-family: "Open Sans", Arial, Sans-serif;
	font-weight: 300;
}

.main .card{
	margin-top: 50px;
}
/*para que el enlace este en la misma linea que el parrafo*/
.main .card .flexible p{
	   display: inline;
}

.main h4{
	font-family: "Open Sans", Arial, Sans-serif;
	font-weight: 400;
	font-size: 50px;
	padding: 10px;
	color: #1E296D;
}

/** FOOTER ***/
.footer h4{
	margin-top: 80px;
	font-family: "Open Sans", Arial, Sans-serif;
	font-weight: 400;
	font-size: 50px;
	padding: 10px;
	color: #1E296D;
}

.footer p{
	margin-bottom: 50px;
}

.footer .social img{
	width: 10%;
}
/*para que el enlace este en la misma linea que el parrafo*/
.footer .social{
	display: inline-block;
	margin-bottom: 30px;
}

.footer .bajoLicencia{
	text-align: left;
}
.footer .bajoLicencia img{
	width: 70%;
}

/********* MEDIAQUERIES *******/
@media screen and (max-width:600px)
{
	/* NAVBAR */
	.linea .container a{
		font-size: 10px;
	}
	.linea .container .collapse a{
	font-size: 10px;
	padding: 5px 0px;
	}

	/****** MAIN ******/
	.main{
		margin-top: 10px;
	}
	/**** FOOTER ******/

	.footer .ubicacion{
		font-size: 12px;
	}
	.footer .bajoLicencia{
		margin-top: 20px;
		text-align: center;
	}
	.footer .redes{
		margin-top: 30px;
	}
	.footer p{
		margin-bottom: 10px;
	}
}

@media screen and (max-width:400px)
{
	/* MAIN */

	.main h4{
		font-size: 20px;
		padding: 0px;
	}
	.main .card{
		margin-top: 10px;
		margin-bottom: 50px;
	}
	.main .card .card-title{
		font-size: 15px;
	}

	.main .card .card-text{
		font-size: 12px;
	}
	.main .card a{
		font-size: 12px;
	}

	/* FOOTER ****/
	.footer h4{
		font-size: 20px;
		margin-top: 0px;
	}
	.footer p{
		font-size: 15px;
		margin-bottom: 10px;
	}

}

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

	/*** HEADER ***/
	.header {
	padding-top: 86px;
	}
	.header p{
		font-size: 12px;
	}
	.contenedor{
			margin-bottom: 0px;			
			color: #000;
		}
	/* MAIN */
	.main h4{
		font-size: 20px;
	}
	.main .card .card-title{
		font-size: 10px;
	}

	.main .card .card-text{
		font-size: 12px;
	}
	.main .card a{
		font-size: 12px;
	}
	/* FOOTER ****/
	.footer p{
		margin-bottom: 10px;
	}
	.footer h4{
		margin-top: 20px;
		font-size: 12px;
	}
	.footer .correo{
		font-size: 12px;
	}
	.footer p,
	.footer a{
		font-size: 12px;
	}
	.footer .ubicacion{
		font-size: 10px;
	}
}