/* index */
* {
margin:0px;
padding:0px;
}

body{
background: rgba(70,157,188,1);
background: -moz-linear-gradient(top, rgba(70,157,188,1) 0%, rgba(70,157,188,1) 43%, rgba(9,29,141,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(70,157,188,1)), color-stop(43%, rgba(70,157,188,1)), color-stop(100%, rgba(9,29,141,1)));
background: -webkit-linear-gradient(top, rgba(70,157,188,1) 0%, rgba(70,157,188,1) 43%, rgba(9,29,141,1) 100%);
background: -o-linear-gradient(top, rgba(70,157,188,1) 0%, rgba(70,157,188,1) 43%, rgba(9,29,141,1) 100%);
background: -ms-linear-gradient(top, rgba(70,157,188,1) 0%, rgba(70,157,188,1) 43%, rgba(9,29,141,1) 100%);
background: linear-gradient(to bottom, rgba(70,157,188,1) 0%, rgba(70,157,188,1) 43%, rgba(9,29,141,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#469dbc', endColorstr='#091d8d', GradientType=0 );
font-family:Inter,sans-serif;
}

a {
color:white;
font-size:17px;
font-family:Inter,sans-serif;
}

a:hover {
color:#f9dd00;
}

#img_principal{
/*border:1px solid white;*/
margin:0 auto !important;
width:33%;
height:33%;
text-align: center;
color:black;
}		

#img_principal > img{
/* border:1px solid white;*/
margin:10px;
margin-left:20px;
width:50% !important;
height:50% !important;
border-radius: 50%;
aspect-ratio: 1; /* Se ajusta al mismo valor que el width */
object-fit: cover;
}

#enmedio {
/* border: 1px solid red;*/
margin:0 auto;
width:550px;
height:auto;
font-family:Inter,sans-serif;
}

#titulo01{
/* border: 1px solid white;*/
margin: 0 auto;
width:580px;
height:40px;
border-radius: 80px;
align-items: center;
display: in-line;
justify-content: center;
margin-top:7px;	
margin-bottom:11px;	
}

#titulo{
/* border: 1px solid white;*/
margin:0 auto;
width:470px;
height:40px;
border-radius: 80px;
color:white;
align-items: center;
display: flex;
justify-content: center;
display: in-line;
}

#titulo:hover > a{
text-decoration:none !important;	
color:#0054bc;
}

#titulo02{
/* border: 1px solid white; */
margin: 0 auto;
margin-top:-28px !important;
width:580px;
height:30px;
border-radius: 80px;
align-items: center;
display: in-line;
justify-content: center;
}

#titulo02 > #subtitulo{
/* border: 1px solid white;*/
font-size:1.0rem !important;	
margin:0 auto;
width:500px;
height:30px;
border-radius: 80px;
color:white;
align-items: center;
display: flex;
justify-content: center;
display: in-line;
}

#titulocampus{
/* border: 1px solid white; */
margin: 0 auto;
width:400px;
height:30px;
border-radius: 80px;
align-items: center;
display: in-line;
justify-content: center;
margin-top:11px;
}

#titulocampus > #subtitulo {
/* border:1px solid red; */
margin:0 auto;	
width:300px;
height:30px;
font-size:1.0rem !important;
color:white;
align-items: center;
display: flex;
justify-content: center;
display: in-line;
}

#mainboxiconos{
/* border: 1px solid white; */
margin: 0 auto;
width:580px;
height:50px;
border-radius: 80px;
align-items: center;
display: in-line;
justify-content: center;
margin-top:11px;	
}

#boxiconos{
/* border: 1px solid white;	*/
margin:0 auto;
width:300px;
height:50px;
border-radius: 80px;
color:white;
align-items: center;
display: flex;
justify-content: center;
display: in-line;
}

.imgiconos{
/* border: 1px solid white;	*/
margin:0 auto;
margin-left:10px;
margin-right:10px;
width:40px;
height:40px;
float:left;
color:white;
align-items: center;
display: flex;
justify-content: center;
display: in-line;
}

.imgiconos:hover{
transform:scale(1.1);
}

/** Inicio - Botones de planteles */
#box1,#box2,#box3,#box4,#box5,#box6,#box7,#box8{
border: 1px solid white;
margin: 0 auto;
margin-top:20px;
width:500px;
height:44px;
border-radius: 80px;
align-items: center;
display: in-line;
justify-content: center;
}

.img01 > img{
/* border:1px solid blue; */
margin:4px;
margin-left:20px;
width:7% !important;
height:7% !important;
border-radius: 50%;
aspect-ratio: 1; /* Se ajusta al mismo valor que el width */
object-fit: cover;
float:left;
}

#campus1,#campus2,#campus3,#campus4,#campus5,#campus6,#campus7,#campus8{
/* border:1px solid white; */
border-radius: 80px;
margin-left: 10px;
width:380px;
height:42px;
color:white;
align-items: center;
display: flex;
justify-content: center;
display: in-line;
font-size:15.7px;
float:left;
}

#tresbotones0 > img{
/* border:1px solid white; */
margin-right:5px;
margin-top:1px;
aspect-ratio: 1; /* Se ajusta al mismo valor que el width */
object-fit: cover;
float:left;
}

#tresbotones0,#tresbotones1,#tresbotones2,#tresbotones3,#tresbotones4,#tresbotones5,#tresbotones6,#tresbotones7,#tresbotones8>img{
margin-left:11px;
margin-top:6px;
aspect-ratio: 1; /* Se ajusta al mismo valor que el width */
object-fit: cover;
float:left;
}

#tresbotones8 > img{
margin-left:11px;
margin-top:6px;
aspect-ratio: 1 !important; /* Se ajusta al mismo valor que el width */
object-fit: cover;
float:left;
width: 9.5999px; 
height: 28px;
}

.campus:hover{
font-weight:bold;
color:#0054bc;
background-color:white;
}

#box1,#box2,#box3,#box4,#box5,#box6,#box7,#box8 > a{
color:white;
}
/** Fin - Botones de planteles */

.boxactiva{
border: 1px solid white;
margin: 0 auto;
margin-top:8px;
width:500px;
height:44px;
border-radius: 80px;
align-items: center;
display: in-line;
justify-content: center;
}

/******* Oculta **********/
.activa{
/* border: 1px solid white; */
margin: 0 auto;
border-radius: 80px; 
width:380px;
height:42px;
color:white;
align-items: center;
display: flex;
justify-content: center;
display: in-line;
font-size:15.2px;
}

.boxactiva:hover{
color:#0054bc;
background-color:white;	
}

.activa:hover{
background-color:white;	
color:#0054bc;	
}

.boxactiva > a{
font-weight:bold;
color:#0054bc;
}

.boxactiva:hover > a{
text-decoration:none !important;	
color:#0054bc;
}
/******* Oculta **********/

/* MODAL 30/01/2025 */
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

.modalDialog:target {
opacity:1;
pointer-events: auto;
}

.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: rgb(158,157,170);
background: linear-gradient(180deg, rgba(158,157,170,1) 0%, rgba(177,177,187,1) 41%, rgba(255,255,255,1) 100%); 
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
}

.close {
background: black;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #606061; }

.campusmodal{
font-size:21px !important;
text-align:center;
font-weight:bold;
}

.boxplantel{
/* border:1px solid white; */
margin:0 auto !important;
width:100%;
height:100%;
text-align: center;
color:black;
margin-bottom:7px !important;
}	

#mainboxiconosblack{
/* border: 1px solid red; */
margin: 0 auto;
width:300px;
height:50px;
border-radius: 80px;
align-items: center;
display: in-line;
justify-content: center;
margin-top:7px;	
}

#boxiconosblack{
/* border: 1px solid red; */
margin:0 auto;
width:290px;
height:50px;
border-radius: 80px;
color:white;
align-items: center;
display: flex;
justify-content: center;
display: in-line;
}

.imgiconosblack{
/* border: 1px solid white;	*/
margin:0 auto;
margin-left:10px;
margin-right:10px;
width:50px;
height:50px;
float:left;
color:white;
align-items: center;
display: flex;
justify-content: center;
display: in-line;
}

.imgiconosblack:hover{
transform:scale(1.1);
}

.share{
font-weight:bold;	
}

/*****************************/
/******** Media screen *******/
@media screen and (max-width: 428px) {

#enmedio {
/* border:1px solid white; */
margin:0 auto;
width:401px;
height:auto;
}

#tresbotones0 > img{
/*border:1px solid white;*/
margin-right:40px;
margin-top:1px;*/
aspect-ratio: 1; /* Se ajusta al mismo valor que el width */
object-fit: cover;
float:right;
}

#img_principal{
/*border:1px solid white;*/
margin:0 auto !important;
width:50%;
height:50%;
text-align: center;
color:black;
}

#titulo01{
/* border:1px solid red; */
margin-left:-18px;
margin: 0 auto;
width:320px;
height:40px;
border-radius: 80px;
align-items: center;
display: in-line;
justify-content: center;
margin-top:20px;	
margin-bottom:10px;	
}

#titulo01 > #titulo {
/* border:1px solid;*/	 
margin: 0 auto;
width:310px;
} 

#titulo02{
/* border:1px solid white;  */
margin: 0 auto;
width:345px;
height:35px;
border-radius: 80px;
align-items: center;
display: in-line;
justify-content: center;
margin-top:31px;	
}

#titulo02 > #subtitulo{
/* border:1px solid white; */
font-size:0.9rem !important;	
width:300px;
height:20px;
margin-top:11px;	
}


#titulo{
/*border:1px solid white;*/
margin:0 auto;
width:390px;
height:40px;
border-radius: 80px;
color:white;
align-items: center;
display: flex;
justify-content: center;
display: in-line;
}

h3{
font-size:26px;	
}

#titulocampus{
/* border:1px solid white; */
margin: 0 auto;
width:320px;
height:45px;
border-radius: 80px;
align-items: center;
display: in-line;
justify-content: center;
margin-top:21px;
}

#titulocampus > #subtitulo{
/* border:1px solid white; */
margin:0 auto;
margin-top: 2px;
width:310px;
height:40px;
border-radius: 80px;
float:left;
color:white;
align-items: center;
display: flex;
justify-content: center;
display: in-line;
}

.imgiconos{
/*border:1px solid white;*/
margin:0 auto;
margin-left:30px;
margin-right:30px;
width:60px;
height:60px;
float:left;
color:white;
align-items: center;
display: flex;
justify-content: center;
display: in-line;
}

#box1,#box2,#box3,#box4,#box5,#box6,#box7,#box8 {
border: 1px solid white;
margin: 0 auto;
margin-top:20px;
width:325px;
height:44px;
border-radius: 80px;
align-items: center;
display: in-line;
justify-content: center;
}

#campus1,#campus2,#campus3,#campus4,#campus5,#campus6,#campus7,#campus8{
/* border:1px solid white; */
/* border-radius: 80px; */
margin-left: 10px;
width:230px;
height:42px;
color:white;
align-items: center;
display: flex;
justify-content: center;
display: in-line;
font-size:15.2px;
float:left;
}

.img01 > img{
margin:8px;
margin-top:5px;
margin-left:15px;
width:10% !important;
height:10% !important;
border-radius: 50%;
aspect-ratio: 1; 
object-fit: cover;
float:left;
}

#tresbotones0,#tresbotones1,#tresbotones2,#tresbotones3,#tresbotones4,#tresbotones5,#tresbotones6,#tresbotones7,#tresbotones8 > img{
margin-left:5px;
margin-top:6px;
aspect-ratio: 1; /* Se ajusta al mismo valor que el width */
object-fit: cover;
float:left;
}

.box1:hover{
color:#0054bc;
background-color:white;	
}

.campus:hover{
background-color:white;	
color:#0054bc;	
}

.box1 > a{
font-weight:bold;
color:#0054bc;
}

.box1:hover > a{
text-decoration:none !important;	
color:#0054bc;
}
/*********************************/

.modalDialog > div {
width: 350px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: rgb(158,157,170);
background: linear-gradient(180deg, rgba(158,157,170,1) 0%, rgba(177,177,187,1) 41%, rgba(255,255,255,1) 100%); 
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
}

.boxactiva{
border: 1px solid white;
margin: 0 auto;
margin-top:8px;
width:320px;
height:44px;
border-radius: 80px;
align-items: center;
display: in-line;
justify-content: center;
}

.activa{
/* border:1px solid red;*/
margin:0 auto;
margin-left: 2px;
width:310px;
height:43px;
border-radius: 80px;
color:white;
align-items: center;
display: flex;
justify-content: center;
display: in-line;
}

.boxactiva:hover{
color:#0054bc;
background-color:white;	
}

.boxactiva > a{
font-weight:bold;
color:#0054bc;
}

.boxactiva:hover > a{
text-decoration:none !important;	
color:#0054bc;
}

.activa:hover{
background-color:white;	
color:#0054bc;	
}
}

/*****************************/
/******** Media screen *******/
@media screen and (max-width: 375px) {

#enmedio {
/* border:1px solid white; */
margin:0 auto;
width:370px;
height:auto;
}

}