* {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: 100%;

    object-fit: cover;
}

#tope-de-pagina {
    color: rgb(37, 36, 36);
}

body {
    background-color: rgb(37, 36, 36);
    width: 100dvw;
    height: auto;
}

.container-nav {
    position: sticky;
    top: 1dvh;
    z-index: 1;
}

.sticky-whatsaap {
    max-width: 9dvw;
    height: auto;
    position: sticky;
    top: 80dvh;
    left: 90dvw;
    z-index: 1;

}

@media(max-width:600px) {
    .sticky-whatsaap {
        width: 1%;
        height: auto;
        position: sticky;
        top: 82dvh;
        left: 70dvw;
        z-index: 1;

    }
}

.logo-club {
    max-width: 10dvw;
    height: auto;
    aspect-ratio: 5/3;
    object-fit: cover;
    border: 5px solid rgb(125, 113, 113);

}

.logoo-club {
    width: 9dvw;
    position: sticky;
    top: 10dvh;
    left: 88dvw;
    z-index: 1;
}

@media(max-width: 600px) {
    .logoo-club {
        display: none;
    }
}


header {
    background-color: rgb(37, 36, 36);
    height: 100dvh;
    width: 100dvw;
}

h1 {
    color: rgb(125, 113, 113);
    letter-spacing: 0.5vw;
    word-spacing: 2vw;
    text-align: center;
    padding-bottom: 10dvh;
    font-size: clamp(1.8rem, 5vw, 3rem);
}


.imagenes-top {
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(37, 36, 36);
    justify-content: space-around;
    width: 100dvw;
}


.imagenes-container-gris-1 {
    width: max(20rem, 30dvw);

}

@media(max-width:600px) {
    .imagenes-container-gris-1 {
        display: none;
    }
}

.Una-de-dos-imagenes {

    aspect-ratio: 5/3;

    border: 5px solid rgb(125, 113, 113);
    position: relative;
    animation: cambioimagen 20s infinite;
    transition-duration: 0;
}

@media(max-width:600px) {

    .Una-de-dos-imagenes {
        display: none;
    }
}


.Imagen-Encabezado {
    aspect-ratio: 5/3;

    position: absolute;
    border: 5px solid rgb(125, 113, 113);
    transition-duration: 0.1;
    animation: cambioimagen 20s infinite;
}

@keyframes cambioimagen {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }

}


.foto-logo {
    aspect-ratio: 5/3;

    position: absolute;
    border: 5px solid rgb(125, 113, 113);
    transition-duration: 0.1;
    animation: cambiodeimagen 20s infinite;
}

@keyframes cambiodeimagen {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }


}

.imagenes-container-dannevirke {
    width: 30dvw;


    position: relative;
}

@media (max-width: 600px) {
    .imagenes-container-dannevirke {
        width: 90dvw;
        height: 30dvh;
        position: absolute;

    }
}


.imagenes-container-gris-2 {
    width: max(20rem, 30dvw);

}

@media (max-width:600px) {
    .imagenes-container-gris-2 {
        display: none;
    }
}

.dos-de-dos-imagenes {
    aspect-ratio: 5/3;
    border: 5px solid rgb(125, 113, 113);
    position: relative;
    animation: cambioimagen 20s infinite;
    transition-duration: 0;
}


@media(max-width: 600px) {

    .dos-de-dos-imagenes {
        display: none;
    }

}

.icono-navegacion {
    color: rgb(111, 100, 100);

}

.icono-navegacion:hover {
    color: rgb(204, 190, 190);
}

.barra-navegacion {
    background-color: rgb(27, 26, 26);
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;


}



a {
    color: rgb(111, 100, 100);
    font-size: clamp(1rem, 5vw, 2rem);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1dvw;
}


/******************************************seccion Actividades**************************************/

main {
    align-items: center;
    width: 100dvw;
    height: auto;

}

.section-actividades {
    background-color: rgb(111, 100, 100);

    width: 100dvw;
    padding-bottom: 10dvh;
}

h2 {
    padding: 10dvh 0dvw;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1dvw;
    word-spacing: 2.5dvw;
    font-weight: 900;

}

@media(max-width: 600px) {
    h2 {
        padding: 2dvh 0dvw 1dvh 0 dvw;
    }
}

h3 {
    font-size: 1.5rem;
    word-spacing: 0.5vw;
    font-weight: 900;
    margin: 2dvh 0dvw;
    padding-top: 4dvh;
}

@media(max-width: 600px) {
    h3 {
        font-size: 1rem;
        margin: 1dvh 4dvw;
        padding-top: 2dvh;
    }
}

@media(max-width: 600px) {
    p {
        font-size: 1rem;
    }
}


.evento-b {

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: rgb(212, 210, 210);
    font-weight: 500;
    
    padding: 2dvh 2dvw;
    width: 30dvw;

}

@media(max-width:600px) {
    .evento-b{
         display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: rgb(212, 210, 210);
    padding: 1dvh 0dvw;
    width: 32dvw;

    }
}




.container-fotos {

    list-style: none;
    margin: 2dvh 1dvw;
}
@media(max-width:600px) {
    .container-fotos{
        list-style: none;
        margin: 0dvh 0 dvw;
        width: 100%;
    }
   
}

.fotos-b {
    aspect-ratio: 5/3;
    border: 5px solid rgb(125, 113, 113);
    box-shadow: 0px 0px 20px black;
    width: 30dvw;
}

@media(max-width:600px) {
    .fotos-b {
        border: 1px solid rgb(125, 113, 113);
        width: 95dvw;
        height: auto;
    }
.fotos-b:hover {
   z-index: 1;
    width: 100dvw;
    height: auto;

}
}
.fechas{
     color: rgb(17, 17, 17);
    font-size: 1.5rem;
    padding-top: 1dvh;
}
@media(max-width:600px) {
    .fechas{
        font-size: 1rem;
    }
}
.descripcion {
    color: rgb(17, 17, 17);
    font-size: 1.5rem;
    padding-top: 1dvh;
}

@media(max-width:600px) {
    .descripcion {
        display: none;
    }
}

.mes-y-evento {
    display: flex;

    justify-content: space-evenly;
    align-items: center;
    margin: 10dvh 5dvw;
    padding: 2dvh 2dvw;
    background-color: rgb(125, 113, 113);
    box-shadow: 0px 0px 20px black;
}

@media(max-width:600px) {
    .mes-y-evento {
        display: flex;
        justify-content: center;
        padding: 1dvh 1dvw;
        margin: 5dvh 2dvw;
    }
}

.mes-actividad {
    font-size: clamp(0.75rem, 5vw, 3rem);
    font-weight: 900;
    margin-bottom: 1dvh;
}


.evento {
    font-size: clamp(1rem, 4vw, 2rem);
    font-weight: 100;
    letter-spacing: normal;

}

#Actividades {
    color: rgb(212, 210, 210);
}

/***************************************************seccion servicios*************************/
.section-servicios {

    padding: 5dvh 5dvw;

    background-color: rgb(125, 113, 113);
    ;


}

#Servicios {
    color: rgb(212, 210, 210);
    ;
}


.dos {

    margin: 10dvh 2dvw;

}

.titulo-servicios {

    font-size: 1.5rem;
    color: rgb(218 211 211);

}

@media(max-width: 600px) {
    .titulo-servicios {
        font-size: 1rem;
    }
}

.introduccion-titulo-servicios {

    font-size: 1.5rem;
    color: rgb(218 211 211);

}

@media(max-width: 600px) {
    .introduccion-titulo-servicios {
        display: none;
    }
}


.titulo-servicios- {
    color: rgb(27, 26, 26);

    font-weight: 150px;
    font-size: clamp (1rem, 2.5vw, 1.5rem);

}

.titulo-items-servicios {
    margin: 10dvh 0dvw;
}

@media(max-width: 600px) {
    .titulo-items-servicios {
        margin: 1dvh 0dvw;
    }
}

.contacto {
    color: rgb(27, 26, 26);
    font-weight: 100px;
    font-size: 1.5rem;
    margin: 120px 30px 50px 200px;
    letter-spacing: 1px;

}

.contacto:hover {
    color: rgb(27, 26, 26);
}

/******************************************secion festival ISOCA**************************************/

.section-festival {

    background-color: rgb(111, 100, 100);
    color: rgb(212, 210, 210);
}

.imagenes-festival {
    display: flex;

    flex-wrap: wrap;
    padding: min(2rem, 5hvw);
}

.imagen-festival {
    border: 5px solid rgb(125, 113, 113);
    width: 32dvw;
    height: auto;
    margin: 5px;
    box-shadow: 0px 0px 20px black;
}

@media(max-width: 600px) {
    .imagen-festival {
        border: 1px solid rgb(125, 113, 113);
        width: 97dvw;
        height: auto;
        margin: 0, 5dvh 1dvw;
        box-shadow: 0px 0px 20px black;
    }
}

/*****************************************************seccion club******************************************/
.section-club {
    background-color: rgb(162, 146, 146);
    padding: 5dvh 5dvw;
}

.margenes-seccion-club {
    margin: min(2rem, 5vw);
    font-size: 1.5rem;
}

.fotos-club-miembros {
    display: flex;
    flex-wrap: wrap;

}

.foto {

    height: 230px;
    width: 300px;
    border: 5px solid rgb(125, 113, 113);
    box-shadow: 0px 0px 20px black;
}


.comisiones {
    display: flex;
    display: inline-block;

}


summary {
    cursor: pointer;
}

.contenedor-comision {
    position: relative;
}






.libro {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 80dvw;

}

.foto-libro {
    width: 20dvw;
    box-shadow: 0px 0px 20px black;


}

@media(max-width:600px) {
    .foto-libro {
        width: 70dvw;
    }
}

.container-info-libro {
    width: 40dvw;
    height: auto;
    box-shadow: 0px 0px 20px black;
}

@media(max-width:600px) {
    .container-info-libro {
        display: none;
    }
}

.info-libro {
    color: rgb(17, 17, 17);
    font-size: clamp(1.5rem, 1vw, 70ch);
    padding: 5dvh 5dvw;

}

@media(max-width:600px) {
    .info-libro {
        display: none;
    }
}

.foto {



    aspect-ratio: 3/5;

    border: 5px solid rgb(125, 113, 113);
    position: relative;
    display: flex;
    flex-direction: row;

}



.periodo {
    height: 100px;
    width: 100px;
    position: absolute;
    color: black;
    opacity: 1;
    transition: opacity o, 3 easy;



}

.cargos-en-comision {
    height: 100vh;
    width: 40vw;
    background-color: white;
    color: black;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transition: opacity 0, 3s ease;
}

.periodo :hover {
    opacity: 1;

}

.cargos-en-comision :hover {
    opacity: 1;
}

.tres-columnas {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    column-gap: 300px;
    padding-top: 10px;
    height: 40dvh;
    width: 90dvw;
}

@media(max-width: 600px) {
    .tres-columnas {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        column-gap: 300px;
        padding-top: 10px;
        height: auto;
        width: 90dvw;
    }
}

.redes-sociales {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 10px 0px 0px 0px;
    font-size: 1.5rem;
    background-color: rgb(111, 100, 100);
    ;
}

.container-ubicacion {
    width: 100dvw;
    margin: 0dvh 3dvw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.mapa-dibujo {
    margin: 5dvw;
    height: 60dvh;
    width: 23dvw;
    box-shadow: 0px 0px 20px black;
}

@media(max-width:600px) {
    .mapa-dibujo {
        width: 65dvw;
        height: auto;
    }
}

/******************************************************************************************************/




footer {

    background-color: rgb(111, 100, 100);
    color: rgb(212, 210, 210);
    height: auto;
    width: 100dvw;
}

.club {

    margin: 0dvh 3dvw 5dvh 3dvw;
    padding: 10dvh 0dvw 3dvh 0dvw;
}

.agradecimientos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    color: rgb(37, 36, 36);
    margin: 2dvh 5dvw 50dvh 5dvw;

}

.t {

    letter-spacing: 1px;
    font-weight: 70px;
    font-size: 1.5rem;
    margin-bottom: 5dvh;
}

@media(max-width:600px) {
    .t {
        display: none;
    }
}


.redesypertenencia {
    box-shadow: 0px 0px 20px black;
    margin: odvh 1dvw 5dvh 1dvw;
    padding: 2dvh 2dvw;
}

.redesypertenencia:hover {

    font-size: 2rem;
    background-color: rgb(212, 210, 210);
    color: black;
}