/* RESET*/

*{
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* header*/
header{
    height: 100px;
    /*background: #4d4d5c;*/
    background: #fff;
    padding: 0 50px;
    color: #6cc091;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo{
    text-transform: uppercase;
    color: #fff;
    

}
.menu a{
    color: #6cc091;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 10px;
    transition: 0.4s;

}

.mostrar-menu,
.esconder-menu{
    font-size: 30px;
    cursor: pointer;
    display: none;
    transition: 0.4s;
}

.mostrar-menu{
    order: 1;
}

.menu a:hover,
.mostrar-menu:hover,
.esconder-menu:hover{
    color: #8bb40b;
}

#check{
    display: none;

}
/* titulo */
#titulo1{
    width: 1000px;
    padding: 30px 0px;
    display: flex;
    justify-content: center;
   
    
}
#titulo1 h22{
    color: #8bb40b;
    font-size: 30px;

}
#titulo1 p{
    
    text-align:justify; 
    
    
    color: #4d4d5c;
    font-size: 22px;
}
#titulo2{
    background: rgba(77, 77, 92, 0.6);
    padding: 20px 0px;
    display: flex;
    justify-content: center;
    text-align: center;  
}
#titulo2 h22{
    color: #fff;
    font-size: 30px;

}
#titulo3{
    background: #6cc091;
    padding: 10px 0px;
    display: flex;
    justify-content: center;
    text-align: center;  
   
}
#titulo3 h22{
    color: #fff;
    font-size: 30px;
}
#titulo3 p{
    color: #fff;
    font-size: 25px;
}
/*personas*/
#personas{
    padding: 0px 50px;
   display:flex;
   width: 100%;
justify-content: space-around;
text-align: center;  
flex-wrap: wrap;
margin: auto;
    
}
#personas img{
    /*border-radius: 100%;*/

}

#personas div{
    padding: 10px 30px;
   

}
#personas div h4{
    color: #4d4d5c;
    font-size: 20px;
    margin: 15px 0px; 

}
#personas div p{
    color: #4d4d5c87;
    font-size: 18px;
}
.boton-saber-mas{
    display: inline-block;
    text-decoration: none;
    color: #6cc091;
    padding: 10px 30px;
    border: 3px solid #6cc091;
    border-radius: 30px;
    margin-top: 15px;
    transition: all 0.4s;
}
.boton-saber-mas:hover{
    background: #6cc091;
    color: #fff;
}
/* banner*/
#banner{
    padding: 0 50px;
   /* background-image: url(./img/banner.jpeg);*/
    height: 65vh;
    background-size: cover;
    background-position: center;

    animation: banner 22s infinite;
}
@keyframes banner{
    0%, 20%{
        background-image: url(./img/banner1.jpg);
        opacity: 1;
    }
   

    25%, 45%{
        background-image: url(./img/banner2.jpeg);
        opacity: 1;
    }
    50%, 70%{
        background-image: url(./img/banner3.jpeg);
        opacity: 1;
    }
    76%, 100%{
        background-image: url(./img/banner4.jpeg);
        opacity: 1;
    }
}


#banner::before{
    content: '';
    background: rgba(77, 77, 92, 0.7);
    position:absolute;
    width: 100%;
    height: 25vh;
    left: 0;
    margin-top: 180px;
}
.contenido-banner{
    position: relative;
    color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column ;
    justify-content: center;

}


.contenido-banner h3{
    font-size: 26px;
    font-weight: 400;
    padding: 10px 0px;

}
.contenido-banner h3 span{
    font-weight: 600;
    color: #6cc091;
    font-size: 50px;
}

/* iconos*/

#iconos{
    padding: 0px 50px;
    background: rgba(77, 77, 92, 0.6);
}
.contenido-iconos{
    padding: 5px 50px 0px 50px;
    display: flex;
    justify-content: space-between;
    text-align: center;
}
.contenido-iconos div{
    flex: 1;
    margin: 20px 0px;
    border-right: 2px solid rgba(255, 255, 255, 0.2);

}
#icono-mobile{
    border: none;
}

.contenido-iconos  h6{
    font-size: 26px; 
    color: #6cc091;
}
.contenido-iconos p{
    font-size: 24px; 
   text-align: justify;
   padding: 5px 50px 0px 50px;
}
/*convocatoria */
#convocatoria{
    width: 800px;
    display: block;
    justify-content: space-around;
    text-align: center;  
    flex-wrap: wrap;
    margin: auto; 
}

#convocatoria img{
    width: 100%;
 
}
/* ranking*/
#ranking{
    background: #6cc091;
   
   display:flex;
   
justify-content: space-around;
text-align: center;  
flex-wrap: wrap;

}
#ranking div{
    padding: 10px 30px;
   

}
#convocatoria2{
   
    display: block;
    justify-content: space-around;
    text-align: center;  
    flex-wrap: wrap;
    margin: auto; 
}
#convocatoria2 img{
    width: 100%;

}
/*fotter*/
footer{
    background:#cccccc4a;
    color:  #4d4d5c;
    text-align: center;
    padding: 15px 0px;
}

/*nosotros*/
#nosotros{
    width: 800px;
   
    padding: 15px 0px;
    display: block;
    justify-content: space-around;
    text-align: center;  
    flex-wrap: wrap;
    margin: auto; 
}
#nosotros p{
    font-size: 24px;
    text-align: justify;
}
#draws{
    padding: 15px 0px;
    display: block;
    justify-content: space-around;
    text-align: center;  
    flex-wrap: wrap;
    margin: auto;  
}


/* responsive*/
@media(max-width: 768px){
    /* header */

    header{
        
        padding: 0 10px;
        
    }
    .mostrar-menu,
    .esconder-menu{
        display: block;

    }

    header img{
        width: 80%;
    }
    .menu{
        position: fixed;
        width: 100%;
        height: 100vh;
        background: #4d4d5c;
       
       right: -100%;
        top: 0;
        text-align: center;
        padding: 100px 0px;
        z-index: 100;
        transition: 0.8s;

    }
    .menu a{
        display: block;
        padding: 20px;

    }
    .esconder-menu{
        position: absolute;
        top: 40px;
        right: 150px;

    }
    #check:checked  ~ .menu{
        right: 0;
    }
    /* personas*/

 
    #personas{
        flex-direction: column;
        padding: 0px 5px;
        justify-content: space-around;
        text-align: center;  
 flex-wrap: wrap;
 margin: auto;
    }
    #personas img{
        width: 70%;
        height: 70%;
    }
    #personas div h4{
      margin: 5px 0px; 
    
    }
    /* banner*/
    #banner {
        width: auto;
        
        height: 45vh;
    background-size: cover;
    background-position: center;
    }
    #banner::before{
        content: '';
        background: rgba(76, 76, 82, 0.952);
        position:absolute;
        width: 100%;
        height: 18vh;
        left: 0;
        margin-top: 100px;
        
    }
    .contenido-banner h3{
        font-size: 12px;
        font-weight: 0;
        padding: 10px 0px;
    
    }

    .contenido-banner h3 span{
        font-weight: 0;
        color: #6cc091;
        font-size: 28px;
    }

/* titulo */

        #titulo1 h22{
            color: #8bb40b;
            font-size: 20px;

        }
        #titulo1 p{
            color: #4d4d5c;
            font-size: 14px;
        }
       
        #titulo3 h22{
            color: #fff;
            font-size: 22px;
        }
        #titulo3 p{
            color: #fff;
            font-size: 14px;
        }
    /*iconos */
    #iconos{
        padding: 0px 5px;
    }
    .contenido-iconos{
        flex-direction: column;

    }   
    
    .contenido-iconos img{
        width: 60%;
    }
    .contenido-iconos  h6{
        font-size: 16px; 
        color: #6cc091;
    }
    .contenido-iconos p{
        font-size: 14px; 
       text-align: justify;
       padding: 1px 1px 0px 1px;
    }
    .contenido-iconos div{
        border: none;
    }

    #convocatoria{
        width: 100%;
        display: block;
        justify-content: space-around;
        text-align: center;  
        flex-wrap: wrap;
        margin: auto;
        
    }
    #convocatoria2 img{
        width: 100%;
 
    }
    #draws{
        width: 800px;
 
    }
  /*fotter*/
  footer p{
    font-size: 12px;

}
    
}