:root{
  --color-primario: #0a548b;
  --color-secundario:#00adba;
  --boton-padding:20px 40px;
}
body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.circulares__grid{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
}

.circulares_item{
    width: 95%;
    align-items: center;
    margin: 0 auto;
    background: var(--color-secundario);
    box-shadow: 0 8px 10px rgba(66,66,66,.5);
    border-radius: 7px;
    padding: 30px 25px;
    color: white;
    margin-bottom: 50px;
}

.circulares__person{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 0;
}
.circulares__img{
    width: 100px;
    min-width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: top;
}

.circulares_titulo{
    font-size: 1.0rem;
    color: var(--color-primario);
    margin-bottom: 10px;
    padding: 1px 0;
}

.circulares_desc{
    font-size: 0.9rem;
    color: var(--color-primario);
    margin-bottom: 10px;    
}


/*CLASES PAGINAS*/

.container_pag{    
    width: 100%;
    margin: 0 auto;
    background: white;
    overflow: hidden;
    padding: 10px 0;
    max-width: 800px;
}

.container_pag_img{    
    width: 100%;
    margin: 0 auto;
    background: white;
    overflow: hidden;
    padding: 20px 0;
    max-width: 600px;
}

.container_pag_img_bol{    
    width: 100%;
    margin: 0 auto;
    background: white;
    overflow: hidden;
    padding: 20px 0;
    max-width: 800px;
}

.menu__img_pag{
    width: 100%;
    height: 100%;
    object-fit: cover;    
    border: 2px solid #00adba;
}



/*CLASES PRINCIPALES*/

.container{
    width: 90%;
    margin: 0 auto;
    background: white;
    overflow: hidden;
    padding: 80px 0;
    max-width: 1200px;    
}

.hero__subtitulo{
    color: var(--color-secundario);
    font-size: 1.5rem;
    margin-bottom: 3px;
    text-align: center;
}

.hero__titulo{
    color: var(--color-primario);
    font-size: 2.5rem;
    margin-bottom: 3px;
    text-align: center;
}

.menu_titulo{
    font-size: 1.2rem;
    color:white;

}

.menu__grid{
    display: grid;
    height: 500px;
    grid-template-areas: 
    "Acreditacion Boletin Capacitacion Evaluacion Felicitacion"
    "Galeria Novedades Programacionfds Seguridad Vacaciones";
    gap: 10px;

}

.menu__item{
    position: relative;
    width: 80%;
    height: 80%;
    overflow: hidden;
}

.menu__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    border-radius: 25%;
    border: 5px solid #00adba;
}

.menu__item:nth-of-type(1){
    grid-area: Acreditacion;
}

.menu__item:nth-of-type(2){
    grid-area: Boletin;

}.menu__item:nth-of-type(3){
    grid-area: Capacitacion;

}.menu__item:nth-of-type(4){
    grid-area: Evaluacion;

}
.menu__item:nth-of-type(5){
    grid-area: Felicitacion;

}
.menu__item:nth-of-type(6){
    grid-area: Galeria;

}
.menu__item:nth-of-type(7){
    grid-area: Novedades;

}
.menu__item:nth-of-type(8){
    grid-area: Programacionfds;

}
.menu__item:nth-of-type(9){
    grid-area: Seguridad;

}
.menu__item:nth-of-type(10){
    grid-area: Vacaciones;

}

.menu__hover{
    position: absolute;
    background: #010e4659;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: aqua;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content:center;
    transform: translateX(100%);
    cursor: pointer;
    transition: transform .4s ease-in-out;
    border-radius: 25%;
    border: 5px solid #010e4659;
}

.menu__item:hover .menu__hover{
    transform: translateX(0%);
}