@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');

:root{
  --color-primario: #011671;
  --color-secundario: #AA001B;
  --color-terciario: #4D4D4D;
  --color-cuaternario: #FFFFFF;
  --color-negro: #000000;
  --color-gris-claro: #f2f2f2;
}

/*colores institucionales
azul: #011671
rgba(1, 22, 113, 0.5);

rojo: #AA001B
rgba(170, 0, 27, 0.5);
*/

/*
fuentes

font-family: 'Open Sans', sans-serif;
font-family: 'Bebas Neue', cursive;
font-family: 'Reenie Beanie', cursive;

*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}



h1,h2,h3,h4,h5,h6{
    font-family: 'Bebas Neue', cursive;
}

h2{
    color:#011671;
}

.h1Azul{
    color:#011671;
}

.contTitulo{
    max-width:400px;
}


.titleDiv{
    background-color:#011671;
    border-radius:7px;
    text-align:center;
    color:#fff;
    position:relative;
    letter-spacing:2px;
    padding:5px;
    font-size:0.9em;
   
}
    .titleDivBottom{
        width:90%;
        height:4px;
        background-color:#AA001B;
        margin:auto;
        border-radius:3px;
        animation-name:redline;
        animation-duration:20s;
        animation-iteration-count: infinite;
         margin-bottom:20px;
    }
    
    @keyframes redline{
        0%{
            width:0%;
        }
       
        50%{
            width:90%;
        }
        
        100%{
            width:0%;
        }
    }


body{
    background-color:#f3f3f3;
    font-family: 'Open Sans', sans-serif;
}

.divGen{
            background-color:white;
            padding:30px;
            font-size:1em;
            margin:20px;
        }
        
        .divGen p{
            padding:10px;
        }
        
        
        .tableComunicado {
            border-collapse: collapse;
            width: 100%;
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            color: #011671;
            border-right: 10px solid #AA001B;
            margin:5px;
        }
        .tableComunicado td, .tableComunicado th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
        .tableComunicado th {
            background-color: #011671;
            font-weight: bold;
            color: #FFFFFF;
            letter-spacing: 1px;
            font-family: 'Bebas Neue', cursive;
            
        }
        .tableComunicado tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        .tableComunicado tr:hover{
            background-color: #AA001B;
            color: white;
        }

ul,ol{
    margin-left:2%;
}

    li{
        margin-left:3%;
        margin-bottom:4px;
    }

h1,h2,h3,h4,h5,h6{
    font-family: 'Bebas Neue', cursive;
}

.sectionDiv{
    margin:25px;
    padding:20px;
    border-radius:3px;
    background-color:white;
}

    .sectionDiv h1{
        color:#011671;
    }
    
        .sectionDiv h2{
            color:#AA001B;
        }
        
    .sectionDiv p{
        margin:5px;
    }
    
.sectionDiv2{
    padding:20px;
    background-color:#011671;
}

.sectionDiv3{
    padding:20px;
    background-color:#fff;
}


    .contenedor-imagen-texto-br{
        width: 100%;
        height: 60vh;
        overflow:hidden;
    }
    
        .contenedor-imagen-texto-l-b{
             width: 50%;
             height: 100%;
             background-color: #011671;
             display:flex;
             color:#fff;
             float:left;
             background-position:center center;
            background-size: cover;
        }
        
            .contenedor-imagen-texto-l-b p{
                margin:auto;
                max-width:70%;
                text-align:justify;
            }
        
         .contenedor-imagen-texto-r-r{
             width: 50%;
             height: 100%;
             background-color: #AA001B;
             display:flex;
             color:#fff;
             float:right;
             background-position:center center;
            background-size: cover;
        }
        
            .contenedor-imagen-texto-r-r p{
                margin:auto;
                text-align:justify;
            }
            
            
            
/*galeria de perfiles*/
.contenedor-galeria-perf{
    background-color:#f2f2f2;
    padding:20px;
    text-align:center;
}

    .perfil{
        display:inline-block;
        width:180px;
        height:280px;
        margin:10px;
        vertical-align:top;
    }
    
        .perfil span{
            color:#2D2D2D; 
            font-weight:bolder;
        }
    
/*fin galeria de perfiles*/

/*imagenes*/
.imagen-full{
    width:100%;
    height:auto;
}

.cont-div-text-img-der{
    padding:10px;
    vertical-align:top;
}

    .texto-izq{
        display:inline-block;
        max-width:70%;
    }
    
    .foto-der{
        display:inline-block;
        max-width:50%;
        text-align:center;
    }
    
        .foto-der img{
            width:100%;
            height:auto;
            margin:auto;
        }
        
.banner-imagen{
    height:80vh;
    background-position:center center;
    background-size: cover;
    margin-bottom:30px;
}
/*fin imagenes*/

/*botones*/
.btnRed{
    background-color:#AA001B;
    color:#fff;
    text-align:center;
    padding:20px;
    border-radius:10px;
    max-width:280px;
    margin:20px;
    text-decoration:none;
    font-weight:bolder;
}

.btnBlue{
    background-color:#011671;
    color:#fff;
    text-align:center;
    padding:20px;
    border-radius:10px;
    max-width:280px;
    margin:20px;
    text-decoration:none;
    font-weight:bolder;
}
/*fin botones*/

/*formularios*/
input{
    padding:5px;
    border:1px solid #ccc;
    margin:3px;
}

select{
    padding:5px;
    border:1px solid #ccc;
}

label{
    font-weight:bolder;
    height:40px;
}

.blueBtn{
    padding:5px;
    background-color:#011671;
    color:white;
    font-family: 'Bebas Neue', cursive;
    border-radius:5px;
    cursor:pointer;
    margin-top:10px;
    margin-bottom:10px;
    font-size:1em;
    border:1px solid #011671;
}

.blueBtnNiveles{
    padding:5px;
    background-color:#011671;
    color:white;
    font-family: 'Bebas Neue', cursive;
    border-radius:5px;
    cursor:pointer;
    margin:10px;
    display:inline-block;
    font-size:1em;
    border:1px solid #011671;
}

.redBtnNiveles{
    padding:5px;
    background-color:#AA001B;
    color:white;
    font-family: 'Bebas Neue', cursive;
    border-radius:5px;
    cursor:pointer;
    margin:10px;
    display:inline-block;
    font-size:1em;
    border:1px solid #AA001B;
}

.redBtn{
    padding:5px;
    background-color:#AA001B;
    color:white;
    font-family: 'Bebas Neue', cursive;
    border-radius:5px;
    cursor:pointer;
    border:1px solid #AA001B;
    margin-top:10px;
    margin-bottom:10px;
    font-size:1em;
}

.btnEstadistica{
    padding:5px;
    background-color:#fff;
    color:#011671;
    font-family: 'Bebas Neue', cursive;
    border-radius:5px;
    cursor:pointer;
    border:1px solid #011671;
    margin:10px;
    display:inline-block;
    font-size:1em;
}
/*fin formularios*/



/*loader*/
    .custom-loader {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: 
        radial-gradient(farthest-side,#011671 94%,#0000) top/8px 8px no-repeat,
        conic-gradient(#0000 30%,#011671);
      -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
      animation:s3 1s infinite linear;
    }
    
    @keyframes s3{ 
      100%{transform: rotate(1turn)}
    }
/*fin loader*/

/*lista de planes semestrales*/
.contenedor-lista-planes{
    border-right:5px solid var(--color-primario);
    border-bottom:1px solid var(--color-primario);
    font-size:1.1rem;
}

    .div-contenedor-plan{
        display:flex;
        flex-direction:column;
        margin:1%;
    }
    
        .boton-plan{
            background-color:var(--color-gris-claro);
            max-width:50%;
            padding:2px;
            cursor:pointer;
            margin:1%;
        }
        
        .titulo-boton-plan-semestral{
            text-align:right;
            margin:20px;
            font-size:1.2rem;
        }
        
        .contenido-plan{
            display:none;
            padding:20px;
            margin-top:2%;
            background-color:var(--color-cuaternario);
            text-align:center;
        }
        
        .link-curso-plan{
            margin:1%;
            display:inline-block;
            background-color:rgba(1, 22, 113, 0.7);
            padding:6px;
            text-decoration:none;
            border-radius:6px;
            color:white;
        }
/*fin lista de planes semestrales*/

@media only screen and (max-width: 1115px) {
   .divGen{
       margin:10px;
       padding:5px;
       font-size:1em;
   }
   
    .contTitulo{
        max-width:80%;
        font-size:0.7em;
    }
    
    .banner-imagen{
        height:50vh;
    }
   
    .contenedor-imagen-texto-br{
        height:auto;
    }
   
   .contenedor-imagen-texto-l-b,.contenedor-imagen-texto-r-r{
       width: 100%;
       height:300px;
       float: none;
   }
   
   .texto-izq, .foto-der{
       max-width:100%;
   }
   
   .boton-plan{
       width:100%;
       max-width:400px;
   }
}
        