* {
    scroll-behavior: smooth;
    margin: 0;
}

body {
    background-color: rgb(27, 26, 26);
}

header {
    background-color: rgb(27, 26, 26);
    height: 100%;
    width: 100%;
}

h1 {
    color: rgb(125, 113, 113);
    letter-spacing: 20px;
    text-align: center;
    margin-top: 100px;
}

.imagenes-top {
    display: flex;
    flex-direction: row;
    background-color: rgb(27, 26, 26);
    justify-content: space-around;
    margin: 100px 0px 80px 0px;
}

.Una-de-dos-imagenes {

    height: 300px;
    width: 400px;
    border: 5px solid rgb(111, 100, 100);
    position: relative;
    animation: cambioimagen 20s infinite;
    transition-duration: 0;
}


.Imagen-Encabezado {

    height: 300px;
    width: 550px;
    position: absolute;
    border: 5px solid rgb(111, 100, 100);
    transition-duration: 0.1;
    animation: cambioimagen 20s infinite;
}

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

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }

}


.foto-logo {
    height: 300px;
    width: 550px;
    position: absolute;
    border: 5px solid rgb(111, 100, 100);
    transition-duration: 0.1;
    animation: cambiodeimagen 20s infinite;
}

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

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }


}

.imagenes-container-dannevirke {

    width: 550px;
    height: 300px;
    position: relative;
}





.dos-de-dos-imagenes {
    height: 300px;
    width: 400px;
    border: 5px solid rgb(111, 100, 100);
    position: relative;
    animation: cambioimagen 20s infinite;
    transition-duration: 0;
}




.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-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 30px 0px 30px 0px;
    margin: 0px px 70px 0px;
}

.sticky {
    position: sticky;
    top: 0;
}

.sticky-whatsaap {
    width: 100px;

    position: sticky;
    top: 85vh;
    left: 90vw;
    z-index: 1;

}

a {
    color: rgb(111, 100, 100);
    font-weight: 900;
    font-size: larger;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 3px;
}


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

main {
    background-color: rgb(27, 26, 26);
}

.section-actividades {
    background-color: rgb(111, 100, 100);
    height: 100%;
    width: 100%;
}

h2 {
    padding: 90px 00px 90px;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 20px;
    font-weight: 900;
}

.meses {
    text-transform: uppercase;
    letter-spacing: 20px;
    color: rgb(27, 26, 26);
    font-weight: 500;
    font-size: 1.5rem;
    padding: 50px 0px 50px 0px;
    text-align: center;
}

.meses-b {
    text-transform: uppercase;
    letter-spacing: 20px;
    color: rgb(212, 210, 210);
    font-weight: 500;
    font-size: 1.5rem;
    padding: 50px 0px 50px 0px;
    text-align: center;
}

.fotos {
    height: 300px;
    width: auto;
    display: flex;
    flex-direction: row;
    border: 1px solid rgb(27, 26, 26);
    margin: 10px;
}

.fotos-b {
    height: 300px;
    width: auto;
    display: flex;
    flex-direction: row;
    border: 1px solid rgb(212, 210, 210);
    margin: 10px;
}

.evento {

    text-align: center;
    color: rgb(27, 26, 26);
    font-weight: 500;
    padding: 10px;
    font-size: 1.5rem;
    text-transform: uppercase;

}

.evento-b {

    text-align: center;
    color: rgb(212, 210, 210);
    font-weight: 500;
    padding: 10px;
    font-size: 1.5rem;
    text-transform: uppercase;

}

.container-fotos {
    display: flex;
    flex-direction: row;
    list-style: none;
    align-items: center;



}

.mes-y-evento {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding: 0px 5vw 100px 5vw;



}

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

/***************************************************seccion servicios*************************/
.section-servicios {
    height: 700%;
    width: 100%;

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



.dos {

    margin: 70px 30px 70px 100px;
    padding-top: 5px;
}

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

    font-weight: 100px;
    font-size: 1.5rem;
    margin: 30px 80px 0px 80px;

}

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

    font-weight: 100px;
    font-size: 1.5rem;
    padding: 0px 30px 0px 0px;
}

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

}

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

.section-festival {
    height: 110%;
    width: 100%;
    background-color: rgb(111, 100, 100);
    color: rgb(212, 210, 210);
}

.imagenes-festival {
    display: flex;
    flex-direction: row;
}

.imagen-festival {

    width: 480px;
    height: auto;
    margin: 5px;
}

/*****************************************************seccion club******************************************/
.section-club {
    height: 450%;
    width: 100%;
    background-color: rgb(37, 36, 36);
    color: rgb(162, 146, 146);
    align-items: center;

}

.margenes-seccion-club {
    padding: 0px 100px 50px 180px;
    font-size: 1.5rem;
    word-spacing: 6%;
    letter-spacing: 5%;
    line-height: 200%;
}

.fotos-horizontales {
    display: flex;
    flex-direction: row;
    padding-top: 50px;
}



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

}

summary {
    cursor: pointer;
}

.contenedor-comision {
    position: relative;
}

.foto {
    height: 350px;
    width: auto;
    display: flex;
    flex-direction: row;
    padding: 5px;
}



.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: row;
    column-gap: 300px;
    padding-top: 10px;
}

.foto-equipo-futbol-centenario {
    width: auto;
    height: 400px;
    padding: 5px;
}

h3 {
    padding: 30px 0px 0px 0px;

}

.club {
    padding: 80px 00px 30px 00px;
    letter-spacing: 10px;
    color: rgb(204, 190, 190);
    font-weight: 500;
    font-size: 1.25rem;
}




.redes-sociales {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 10px 0px 0px 0px;
    font-size: 1.5rem;
}



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




footer {

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

.club-agradecimientos {
    letter-spacing: 1px;
    font-weight: 70;
    font-size: 2rem;
    margin: 100px 80px 0 80px;
}

.agradecimientos {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 80px 80px 0 80px;

}

.t {

    letter-spacing: 1px;
    font-weight: 70px;
    font-size: 1.5rem;


}

.logo-club {

    height: auto;
    width: 200px;
    position: sticky;
    margin: 100px 0px 100px 600px;
    border: 5px solid rgb(212, 210, 210);
    ;


}