* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    text-decoration: none;
    list-style: none;
    outline: none;

}

img {
    max-width: 100%;
}



.prox {
    font-size: 1em;
    letter-spacing: .1em;
    border-bottom: solid .01em;
    text-align: center;
    padding-bottom: .4em;
    margin-top: 1em;
    margin-bottom: 1em;
}


/*----------INICIO-------*/

body {
    background-color: white;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between;
    font-family: 'Roboto', sans-serif;

}



ul {
    list-style: none;
}


body header p {
    font-size: 1.3em;
    font-weight: bold;



}


#drysdaletitulo {
    width: 85%;
    font-size: 1.2em;
    text-align: center;
    align-items: center;
    flex-grow: 1;
    text-transform: uppercase;
}

footer {
     background: black;
    color: white;
    font-size: .8rem;
      padding: 1em;
    padding-top: 2em;
    z-index: 9998;
}


footer ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.imgfooter {
    background-color: rgba(234, 234, 234, 0.53);
    margin: .7em;
    width: 2.3em;
    height: 2.3em;
    border-radius: 100%;
    border: solid .08em black;
    border-radius: 5em;
    padding: .4em;
}

footer p {
    padding: .5em 1em;
    padding-bottom: 2em;
}

/* íconos */


#llamamenu .material-icons,
#ocultamenu .material-icons {
    padding-right: 0;


}


/*
----------------
encabezado
----------------

/* menu */

header {
    background-image: url(../imagenes/);
    background-repeat: round;
    color: white;
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 4em;
}


.contenedor {
    background-color: rgba(0, 0, 0, 0.69);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    height: 4em;

}



.paquetepadilla {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#logoclub {
    display: block;
    width: 15%;
    height: auto;
    margin: 0;
    padding: 0;
}

#logoclub img {
    display: block;
    width: 1.8em;
    height: auto;
    padding: 0;
    margin: 0;
}


#padillatitulo {
    width: 75%;
    text-align: center;
    align-items: center;
    flex-grow: 1;
}

#menu {
    width: 15%;
    line-height: 1.5em;

}



/* se oculta la "casilla de verificación" */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    display: none;
}

header div nav label {
    cursor: pointer;
    position: relative;
    z-index: 9998;
}

#menu-toggle:not(:checked) + #llamamenu,
#menu-toggle:checked + #llamamenu + #ocultamenu {
    display: flex;
    margin: 0;
    padding: 0;
    justify-content: flex-end;
}

#menu-toggle:checked + #llamamenu,
#menu-toggle:not(:checked) + #llamamenu + #ocultamenu,
#menuacordeon {
    display: none;
}



#menulista {
    position: fixed;
    right: 100%;
    top: 0;
    height: 100vh;
    width: 50%;
    z-index: 9998;
    padding-top: 5em;
    transition: all .5s ease;
    background-color: rgb(255, 255, 255);
}

header div nav ul li a, .menuacordeon, .opciones li a {
    display: block;
    color: #5a5959;
    text-transform: uppercase;
    padding: .6em 1em;
    text-decoration: none;
      border-bottom: thin solid #b1b1b1;
}



header div nav ul li a:hover{
        color:aquamarine;
        background-color: red;
    }





#ocultamenu {
    color: re;
    z-index: 9999;
}



#menu-toggle:checked + #llamamenu + #ocultamenu + #menulista {
    left: 50%;
    transition: all .25s ease;
}







/*--INICIO--*/



.caratularelampago {
    display: flex;
    flex-direction: column;
    background-image: url("../imagenes/imagenfondo.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 45em;
    margin-bottom: 1em;

}

#caratularelampago {
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.65);
    padding: 2em;
    height: 45em;
    box-shadow: 0 .01em .9em .01em rgba(0, 0, 0, 0.59);
    padding-top: 0;


}

.caratularelampago h1 {

    color: white;
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 1em;
    margin-top: 2em;

}


#titulo1 {
    width: 100%;
    text-align: center;
    align-items: center;
    color: white;
    font-weight: 100;
    text-align: center;
    font-size: 1.4em;
    letter-spacing: .1em;

    animation: zoomIn 1s;
}


#titulo2 {
    font-size: .8em;
    padding-top: .5em;
    padding-bottom: 1.4em;
    font-weight: 100;
    color: white;
    text-align: center;
    letter-spacing: .1em;
    animation: zoomIn 1s;

}


#bajadaa {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.1em;
    padding: 1em;
    font-weight: 100;
    border-top: rgb(193, 120, 180) .03em;
    border-bottom: rgb(193, 120, 180).03em;



}

.caratularelampago img {
    margin-top: 1em;
    display: flex;
    width: 2.5em;
    height: 2.5em;
    border: rgb(193, 120, 180).09em;
    border-radius: 5em;
    padding: .4em;
    top: 10em;
    animation: fadeIn 1s;

}

#explicacionaa {
    top: 27vh;
    margin: 0;
    font-size: 1.05em;
    font-weight: 400;
    line-height: 1.5em;
    color: white;
    text-align: center;
    padding: 1em 0em;
    animation: fadeIn 1s;


}
}


#fecharelampago li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 9em;
    color: white;


}

.quees {
    font-size: .9em;
    text-align: center;
    padding: .5em;
    animation: fadeIn 1s;

}




.inscribite {
    background-color: rgb(193, 120, 180);
    color: black;
    letter-spacing: .1em;
    padding: .2em;
    margin-bottom: 1em;
    margin-left: 2em;
    margin-right: 2em;
    margin-bottom: 1.3em;
    text-transform: uppercase;
    animation: zoomIn 1s;
    z-index: 9997;


}






#inscribite {
    color: white;
    font-weight: bold;
    align-content: center;
    text-align: center;
    font-size: .9em;
    color: rgb(0, 0, 0);
    padding: .8em;

}

#conocemas {
    display: block;
    color: rgb(193, 120, 180);
    text-align: center;
    font-size: 1em;
    text-transform: uppercase;

}




}


.iniciotr {
    background-color: #eaeaea;
    margin-top: 3.5em;
    padding: 1em;
    padding-bottom: 2em;

}



.torneos {
    margin-top: 3em;

}

.torneos h3 {
    font-size: .9em;
    margin-top: 1em;
    text-align: center;
    font-weight: 100;
}

#fecha {
    font-size: 1em;
    margin-top: 1.2em;
}

.noticiasinicio {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 2em;

}

.noticiasinicio a {
    color: mediumseagreen;
}

#ultimoscampeones {
    position: relative;
    width: 40vmin;
    margin: 0 .5em;
}



.fotocontenedorinicio {
    width: 40vmin;
    height: 40vmin;
    overflow: hidden;
    position: relative;

}


.fotocontenedorinicio img {
    position: absolute;
    top: 0;
    overflow: hidden;
    margin: auto;
    min-height: 100%;
    min-width: auto;
    object-fit: cover;

}


#iconosnoticias {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.0);
    top: .7em;
    left: .7em;
    width: 2em;
    height: 2em;
    border-radius: 100%;
    border: solid red .1em;
    border-radius: 5em;
    padding: .25em;


}

#noticiasparrafo {
    margin-top: .5em;
    margin-bottom: 2.5em;
    font-size: .7em;
    font-weight: 100;
}

#ultimoscam {
    margin-top: .2em;
    margin-bottom: .45em;
    font-size: 1.2em;
    line-height: 1.2em;
    font-weight: bold;
    color: #989898;
}


#conocepadilla {
    margin: 1em;
    font-size: 1em;
    letter-spacing: .1em;
    margin-bottom: 1em;
    border-bottom: solid .01em;
    text-align: center;
    padding-bottom: .4em;
    margin-top: 3em;
    text-transform: uppercase;
}

.prox {
    text-transform: uppercase;
}

#botonvermasnoticias {
    display: block;
    background-color: rgb(193, 120, 180);
    align-content: center;
    text-align: center;
    padding: 1em;
    width: 70%;
    justify-content: center;
    color: darkseagreen;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .9em;
    margin: auto;



}


/* UBICACION*/

.elclubinicio {
    background-color:beige;
    color: black;
}


.elclubinicio .prox {
    margin-top: 0;
    padding-top: 3em;
    margin-bottom: .5em;
    border-bottom: none;
}


#encontranosen {
    font-size: 1em;
    padding-top: .5em;
    padding-bottom: 1em;
    font-weight: 100;
    color: ye;
    text-align: center;
    letter-spacing: .1em;
    text-transform: uppercase;

}

#iconosubicacion {
    margin: .7em;
    width: 3em;
    height: 3em;
    border-radius: 100%;
    border: solid rgb(193, 120, 180); .08em;
    border-radius: 5em;
    padding: .6em;
}




#ubicaciondatos {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
}

#ubicaciondatos ul {
    display: flex;
    align-items: center;
}

#ubicacion {

    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 2.5em;

}

#mapa {
    width: 100%;
    height: 50vh.
}

#ubicaciontexto {
    color: black;
    font-size: 1em;
    text-align: center;
    margin-bottom: 1em;
    margin-top: .4em;
    line-height: 1.4em;

}


.elclubinicio {
    padding: 0 1em;

}



.noticiadestacada {
    margin: 1em;
     padding-bottom: 2em;
        border-bottom: rgb(193, 120, 180); .07em;

}

.noticiadestacada figure {
    position: relative;
}

.noticiadestacada figcaption {
    color: black;
}



#filtrarnoticias {
    display: flex;
    align-content: center;
    align-items: center;
    position: relative;
    margin-top: 1em;
    margin-left: 1em;

}

#filtrosboton img {
    width: 2.5em;
    border-radius: 5em;
    border: solid black .09em;
    padding: .5em;
    margin-right: 1.5em;


}

#noticias {
    flex-grow: 1;

}

.noticiasinicio2 figcaption {
    color: black;
   

}

.noticiasinicio2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 2em;
    justify-content: center;

}

.prox1 {
    font-size: 1em;
    letter-spacing: .1em;
    border-bottom: solid .01em;
    text-align: center;
    padding-bottom: .4em;
    margin: 1em 1em 1em 1em;
    text-transform: uppercase;


}



/*------ANIMACIONES-----*/

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}


/*RESPONSIVE NOTICIAS*/

@media (min-width:30em) {
    
    
    #derecha {
    width: 100%;
      flex-wrap: nowrap;
    padding: 0;
        margin:0;;

    }
    
  .noticiadestacada {
        width: 80%;
        margin: auto;
        margin-top:2em;
      border-bottom: none;
      
    }

       #noticias_secundarias {
           margin: 2em auto;
           max-width: 100%;
           padding: 3em;
           top: 0;
           border-top: solid rgb(155, 155, 155) .07em;
           
    }
        #noticias_secundarias figure {
           margin: 2em 0;
           padding:0;
           top: 0;
    }
    
    #noticias_secundarias figure div {
        width: 25vmin;
        height: 25vmin;
          
    }
    
        
    #imgcampeones {
        width: 100%;
        flex-grow: 1;
    }
    
    #noticias_secundarias a {
        margin: 0 1em;
    }
    
   }



@media (min-width:60em) {
    
     
    #filtrarnoticias {
       margin-left: 3em; 
    }

    #derecha {
    width: 100%;
      flex-wrap: nowrap;
        padding: 3em;
        margin: auto;
    
    }
    
    .noticiadestacada {
        width: 40%;
        margin: auto;
        margin-top:0;
      
    }
    

    

       
    
   }


@media (min-width:81em) {
    
     #noticias_secundarias  {
        width: 82%;
       
          
    }
}





/*------RESPONSIVE INICIO-----*/


@media (min-width: 30em) {

     .caratularelampago {
        width: 100%;
    }

    #caratularelampago {
        height: 45em;
        box-shadow: 0 .01em .9em .01em rgba(0, 0, 0, 0.59);
        padding-top: em;
        align-items: center;


    }

    .caratularelampago h1 {
        font-size: 1.8em;
        width: 70%;

    }


    #torneosrelampagostitulo {
        width: 70%;
        font-size: 1.7em;

    }

    #futbol5 {
        font-size: 1.3em;
        padding-top: .4em;
        padding-bottom: 1em;
        margin-bottom: 0;
    }

    #explicaciontorneo {
        width: 80%;

    }


    .inscribite {
        width: 50%;
        margin-bottom: 2em;
    }


    #responsive {
        margin: 0;
        padding: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .torneos {
        align-items: center;
        justify-content: center;
        margin-top: 0;
        padding-top: 0;
        flex-grow: 1;

    }


    .iniciotr {
        width: 100%;
        margin: 0;
        margin-top: 2em;
        margin-bottom: 2em;
        padding: 1em;
        background-color: #eaeaea;

    }

    .iniciotr .prox {
        width: 100%;
    }



    .noticiasinicio {
        width: 80%;
        padding: 0;
        margin:0 auto;
    }


    #noticiasparrafo {
        margin-top: .5em .5em 2.5em .5em;
        font-size: .7em;
        font-weight: 100;
        width: 25vmin;
    }

    #ultimoscampeones {
        margin: 0 1em;
        padding: 0;
        position: none;
        width: 80%;

    }


    .fotocontenedorinicio {
        margin: 0;
        padding: 0;
        width: 25vmin;
        height: 25vmin;
        overflow: hidden;
        position: relative;

    }


    .fotocontenedorinicio img {
        position: absolute;
        top: 0;
        overflow: hidden;
        margin: auto;
        min-height: 100%;
        min-width: auto;
        object-fit: cover;

    }

    

    #botonvermasnoticias {
        width: 12em;
        margin: auto;

    }


    .elclubinicio {
        width: 100%;
        align-items: center;
    }


    .elclubinicio .prox {
        padding-top: 2.1em;
        margin-bottom: .5em;
        border-bottom: none;
        font-size: 1.1em;
    }


    #queesdrysdale {
        width: 70%;
        margin: auto;

    }


    #ubicaciondatos {
        width: 80%;
        margin: auto;
        margin-top: 2em;
        padding-bottom: 3em;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #ubicacion {
        width: 100%;
        padding-bottom: 2.5em;

    }

    #mapa {
        width: 90%;
    }


    footer {
        width: 100%;
        padding: 3em;
        padding-top: 4em;
    }





    #torneosrelampagostr {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        flex-grow: 1;
        align-items: center;
        justify-content: center;
        align-content: center;
        padding: 1em;
    }

    #torneosrelampagostr .prox {
        margin: 0 1em;
        width: 100%;
        margin-bottom: 1em;
    }

    #contenedorvideo {
        width: 50%;
        margin-left: 0;
        height: 15rem;
        margin-right: 1em;
        margin top: 2em;
        padding: 0;
    }


    .videorelampago iframe {
        height: 50%;
        height: 100%;
        margin: 0;
        padding: 0;



    }

    #responsiverevivi {
        width: 40%;
        height: 10em;
        display: flex;
        flex-direction: column;
        border-left: solid rgba(90, 89, 89, 0.44) .07em;
        margin-left: 1em;
        padding: 1em;
        justify-content: center;

    }


    #cuerponoticia {
        width: 100%;
        padding: 0;
        padding-left: 1em;

  
}






@media (min-width: 73em) {



    #logoclub {
        width: 2.2em;
        height: auto;


    }


    .paquetedrysdale {
        width: 50%;
        display: flex;
        padding-left: 1.2em;

    }



    #drysdaletitulo {
        width: 50%;
        text-align: left;
        padding: 1em;

    }



    .caratularelampago {
        height: 100%;
        margin-bottom: 1em;
        width: 100%;

    }

    #caratularelampago {
        padding: 2em;
        width: 100%;
        height: 100%;
        padding-top: 4em;
        justify-content: center;
        align-items: center;


    }

    .caratularelampago h1 {
        font-size: 2.5em;
        margin-top: 0;
        padding: 1em;
    }


    #explicaciontorneo {
        align-items: center;
        width: 49rem;
        margin-top: 2em;
        margin-bottom: 2em;
        padding: 1em 3em;

    }


    #torneosrelampagostitulo {
        font-size: 2em;
        margin-bottom: .3em;
    }

    #futbol5 {
        font-size: 1.3em;
        padding-bottom: 0;
        margin-bottom: 0;
    }



    .inscribite {
        width: 19em;
        margin-bottom: 2em;
    }


    #responsive {
        margin: 0;
        padding: 0 3em;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .torneos {
        align-items: center;
        justify-content: center;
        margin-top: 0;
        margin-right: 2em;
        padding-top: 0;
        width: 40%;
        flex-grow: 1;
    }


    .iniciotr {
        margin-right: 0;
        margin-top: 1em;
        width: 35%;
        justify-content: center;
        align-items: center;
        background-color: #eaeaea;
    }

    .iniciotr .prox {
        width: 100%;
    }


    .noticiasinicio {
        width: 100%;
        padding: 0;
        margin: 0;
        margin-top: 1em;
        display: flex;
        flex-grow: 1;
        justify-content: center;
    }

    #ultimoscampeones {
        position: none;
        width: 100%;
        margin: 0 .8em;
    }


    #noticiasparrafo {
        margin-top: .5em;
        margin-bottom: 2.5em;
        font-size: .7em;
        font-weight: 100;
        width: 9rem;
    }



    .fotocontenedorinicio {
        width: 9rem;
        height: 9rem;
    }



    #botonvermasnoticias {
        width: 18em;
        margin-bottom: 1em;
        margin-top: 1em;

    }




    .elclubinicio {
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    .elclubinicio .prox {
        padding-top: 2.5em;
        margin-bottom: .5em;
        border-bottom: none;
        font-size: 1.1em;
    }

    #queesdrysdale {
        width: 49rem;
    }



    #ubicaciondatos {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #ubicacion {

        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 2.5em;

    }

    #mapa {
        width: 50%;
    }


    footer {
        padding: 3em;
        padding-top: 4em;
    }






    /*------RESPONSIVE TORNEO RELÁMPAGO-------*/


    

    }

    #responsiverevivi {
        width: 40%;
        height: 10em;
        display: flex;
        flex-direction: column;
        border-left: solid rgba(90, 89, 89, 0.44) .07em;
        margin-left: 2em;
        padding: 1em;
        justify-content: center;

    }


    #cuerponoticia {
        width: 30em;

    }



    #iranoticia {
        margin: 0;
        width: 15em;
        margin-left: 1em;

    }








    }




    #menu label i {
        display: none;
    }

    .paquetedrysdale {
        align-items: flex-start
    }

    #logoclub {
        display: block;
        align-self: center;
    }

    #menulista {
        height: 4em;
        width: 100%;
        top: 0;
        right: 0em;
        background: none;
        padding: 0 1em;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        transition: none;


    }


    #menulista li {
        text-align: center;
        top: 0;
        color: white;
        border-bottom: none;
        margin: 0 .4em;
        transition: none;
        padding: 0;
    }

    .menuacordeon {
        padding: 0;
        margin: 0;
    cursor: pointer;
    }

    #actividadesmenu {
        width: 100%;
        padding: 1.25em 1em;
        color: white;
        margin: 0;
    }



    #menulista li a {
        text-align: center;
        display: block;
        width: 100%;
        padding: 1.3em 1em;
        color: white;
        margin: 0;
        border: none;
    }



    .opciones {
        background-color: black;
        transition: none;
        padding: 0;
        margin: 0;
        
    }

    .opciones li a {
        display: block;
        margin: 0;
        padding: 0;
        flex-grow: 1;


    }

    #actividadesmenu i {
        color: rgb(193, 120, 180);
        margin-left: .3em;

    }

    #actividadesmenu i {
        display: block;
    }


    #menulista li a:hover,
    #actividadesmenu i:hover,
    #actividadesmenu:hover {
        color: black;
        background-color: rgb(193, 120, 180);
    }
    
    
  
    footer {
        padding: 3em;
    }

    footer p {
        padding: 1em 10em;
    }

}