*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
/* ESTILOS GENERALES PC */


body{
    width:100%;
    margin: auto;
}

.textgray {
    color:rgb(20,20,20);
}

.bggray{
    background: rgb(20,20,20);
}

.notalpie{
    font-size: small;
    max-width: 100%;
    margin-left: 0px;
    padding-left: 0px;
    
}

/* ***************** ESTILOS PARA FORMULARIOS ***********************/

.jumbotronFormularios{
    
    height: auto;
    max-width: 80%;
    margin: auto;
    margin-top:20px; 
    background: #fff;
    border-radius: 20px;
}

.jumbotronFormularios figure{
   
    height: 200px;
    width:100%;
}

.jumbotronFormularios figure img{
    height: 100%;
    width:100%;
    object-fit: contain;
    display: block;
    margin: auto;    
}

.jumbotronFormularios h1{
    text-align: center;
    
}

.jumbotronFormularios P, .jumbotronFormularios fieldset{
    
    max-width: 80%;
    margin: auto; 
    border-radius: 12px;
}

.jumbotronFormularios input, .jumbotronFormularios select{
    display: block;
    border:solid gray 1px;
    border-radius: 12px;
    margin-top: 2em;
    height: 3em;
    font-size: 1.2em;
    line-height: 3;
    padding-left: 1em;   
    margin-left: 10px;   
} 

.jumbotronFormularios textarea{
    display: block;
    border:solid gray 1px;
    border-radius: 12px;
    margin-top: 2em;
    min-height: 100px;
    max-height: 100px;
    max-width: 550px;
    min-width: 550px;
    margin-left: 10px;
    padding-left: 10px;
    font-size: 1.2em;   
}

.zonaTexto{
    max-width: 70%;
    margin: auto;
}

.zonaTexto h1, .zonaTexto h2, .zonaTexto h3{
    text-align: center;
}


 #btnSubmit, .btnSubmit{
    
    color:#fff;
    margin: auto;
    text-align: center;
    padding: 20px 25px; 
    margin-top: 3em;
    line-height: 1;
    cursor: pointer;
    border-radius: 10px;
    background: rgb(0,152,255); 
     
    
}

.btnSubmit{
    text-align:center;
    display: block;
    margin: auto;
}

#btnSubmit:active{
    background:rgb(20,20,20);
    color:rgb(0,152,255);
}

.btnSubmit:active{
    background:rgb(20,20,20);
    color:rgb(0,152,255);
}


.darkbg{
     background:rgb(20,20,20);
    color:#fff;
}

.officialbg{
    background: rgb(0,152,255);
}


.oficialcolor{
    color:rgb(0,152,255);
}

.flexcenterrow{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.flexcentercolumn{
   
    display: flex;
    flex-direction: column;
    justify-content: center;    
}


/* ESTILOS PARA EL MENU DE HAMBURGUESA */



.cabeceraMenuHamburguesa{
   
    height: 10vh;
    width: 100%;   
    background-color: #ffffff;
    position: fixed;
}

#btnMenu{
    display: none;
}

.cabeceraMenuHamburguesa label{
    
    display: block;
    width:50px;
    height:100%;
    padding: 10px;
    display: none;
}

.cabeceraMenuHamburguesa label img{
    height: 90%;
    width: 100%;
    object-fit: contain;    
}

.cabeceraMenuHamburguesa label:hover{
    cursor: pointer;
    background: rgba(0,0,0,.3);
    border-right: solid 1px 0;
}

.menu ul{
   
    height: 100%;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: flex-end;
}

.menu ul li{
    border-right: solid #fff 2px;
    height: 100%;
}

.menu li a {
    display: block;
    height: 100%;
    padding:15px 20px;
    background-color: rgb(0,152,255);
    color:white;
    text-decoration: none;
    transition: all 0.2s;
}

.menu li a:hover{
    background: rgba(0,0,0,0.3);
    color:black;
}

.espacioBlancoCabecera{
    height: 10vh;
    
}

/* ESTILOS GENERALES */

.logofigure{
    height: 25vh;
}

.logofigure img{
    height: 80%;
}

.logofigure figcaption{
    font-size: 1em;
}

/* ESTILOS PARA PASARELA DE NAVEGACION */

.pasarelaNav{
   
    height:250px;
    width:100%;
    overflow-x:auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: solid 2px rgb(20,20,20);
    
}

.pasarelaNav a{
   
    min-width:200px;
    height: 90%;
    margin-left: 5px;
    border: dashed 1px rgb(20,20,20);;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    
}

.pasarelaNav a img{
    height: 100%;
    object-fit: contain;
}




/* ESTILOS PARA JUMBOTRON (SECCION PRINCIPAL) */



.jumbotronMini, .jumbotronMiniArticulo{
  
    height: 90vh;
    width:100%;  
}



.jumbotronMini figure{
    text-align: center;
}

.miniDualResp {
   
    height:65vh;
    display: flex;
    width:100%;
   
   
}

.miniDualResp a,.flexcentercolumn a {
    background:rgb(0,152,255);
    color: #fff;
    padding: 10px;
    border-radius: 20px;
    text-align: center;
    
    
}

.miniDualRespImage, .miniDualRespText{   
  
    height: 100%;
    width:50%;    
}

.miniDualRespText{
   
    font-size: 1.3em;
    text-align: center;    
    justify-content: center;
    align-items: center;
   
}

.miniDualRespText h2{
    padding: 0px 10px;
}

.miniDualRespText p{
    max-width: 70%;
    text-align: center;
    
   
    
}

 strong{
    color:rgb(0,152,255);
}

.miniDualRespImage{
  
   
}

.miniDualRespImage img{
    height:100%;
    width:100%;
    object-fit: contain;
     
    
}



/* ******************* SLIDER PORTADA ****************/

.sliderPortada{
   
    height: 100%;
    width:100%; 
   
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;    
    animation: slideportada 14s infinite; 
    background-origin: content-box;
    background-clip: content-box;
    
    
}

@keyframes slideportada {
    0%,35% {
        background: url("../recursos/imagenes/portadaSlider/1.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat; 
        background-origin: content-box;
        background-clip: content-box;

     }
    
     40%,65% { 
         background: url("../recursos/imagenes/portadaSlider/2.png"); 
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat; 
        background-origin: content-box;
        background-clip: content-box;
     }
    
     70%,100% {
         background: url("../recursos/imagenes/portadaSlider/3.png"); 
         background-size: contain;
        background-position: center;
        background-repeat: no-repeat; 
        background-origin: content-box;
        background-clip: content-box;
     }
    
    
}


    /* ********************************** ESTILOS PARA ARTICULOMINI ****************************/

.jumbotronMiniArticulo{
    height: 70vh;   
    display: flex;
    justify-content: space-around;
    flex-grow: 1;
}


.articuloMini{
    
      
    min-width: 250px;
    max-width: 30%;
    
}

.articuloMini figure{
    width: 100%;
    height: 50%;
   
}

.articuloMini figure img{
    display: block;
    height: 100%;    
    object-fit: contain;
    margin: auto;
}

.articuloMini section{
    
}

.articuloMini section h3{
    
    text-align: center;
    
}

/* ESTILOS DE PIE DE PAGINA INFORMATIVO */
.infoPiePagina{
    padding: 20px;
     display: flex;
    justify-content: space-around;
    
}


.infoPieArticulo{
   color:#fff;
   
}

.infoPieArticulo a{
    text-decoration: none;
    color:rgb(0,152,255);
    
}

.infoPieArticulo ul {
    
}

.infoPiePaginacopy{
    font-size: small;
}


.infoPiePaginacopy h3{
    color:#fff;
}

.infoPiePaginacopy a{
     color:rgb(0,152,255);
}



/* ESTILOS PARA EL FOOTER PRINCIPAL */

.piePrincipal{
    background-color:rgb(0,152,255) ;
    height: 5vh;
    display: flex;
    margin-top: 1px;
    justify-content: center;
    align-items: center;
}




.piePrincipal p{

}

.piePrincipal a{

   text-decoration: none;
    color:#fff;
}


/* ESTILOS PARA MOVILES */

@media(max-width:768px){
    
    /* ESTILOS GENERALES PARA MOVILES */
    

    .cabeceraMenuHamburguesa{
      
        background-size: contain;
        background-position: center;
    }


    /* ESTILOS PARA MENU HAMBURGUESA MOVIL */

    .cabeceraMenuHamburguesa label{
        display: block;
    }

    .menu{
        position: absolute;
        width:70%;
        margin-left:-70%;
        transition: all 0.3s;
    }

    .menu ul{
        flex-direction: column;       
        background:rgb(0,152,255);
    }

    .menu ul li{
       border-top:1px solid white;
    }

    .menu ul li a{
        text-align: center;
    }

    #btnMenu:checked ~ .menu {
        margin:0;
    }
     /* FIN ESTILOS PARA MENU HAMBURGUESA MOVIL */
    
    /* ESTILOS PARA PASARELA DE NAVEGACION */

    .pasarelaNav{
        justify-content: flex-start;
    }
    
    .jumbotronMini{
        height: auto;
    }
    
    .miniDualResp{
      
        height: auto; 
        width:100%;
        flex-direction: column; 
        
    }
    
    .jumbotronMini, .miniDualResp{
        margin-top:30px;
    }
    
    .miniDualRespImage{
        height: 50vh;
        width:100%;
    }
    
     .miniDualRespText{
       
        width: 100%;
        height: auto; 
         padding: 20px;
        
    }
    
    .miniDualRespText p{
        width:85%;
    }
    
    /* ********************** jumbotronMiniArticulo *****************************************/
    
    .jumbotronMiniArticulo{
        height: auto;
        width: 100%;
        flex-direction: column;
       
        
    }
    
    .articuloMini{
        height: 400px;
        min-width: 90%;
        margin: auto;
       
    }
    
  
   /****************************** FORMULARIOS *****************************/ 
    
    .jumbotronFormularios {
        max-width: 95%;
    }
    
    
    
    .jumbotronFormularios h1,.jumbotronFormularios p,.jumbotronFormularios input,
    .jumbotronFormularios select, .jumbotronFormularios textarea{
        
        font-size: 1em;   
       
    }
    
    .jumbotronFormularios fieldset{
        max-width:90%;
    }
    
    .jumbotronFormularios textarea,.jumbotronFormularios input , .jumbotronFormularios select{
        max-width: 80%;
        min-width: 80%;
        margin: auto;
    }
    
    .jumbotronFormularios fieldset input, .jumbotronFormularios fieldset select, .jumbotronFormularios fieldset textarea{
        margin-top: 10px;
    }
    
    .infoPiePagina{
        flex-direction: column;
    }
    
}