*{
    font-family: 'Oswald', sans-serif;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0;
}


body{
    background-image: url("../img/fondoinicio.jpg");
    background-repeat: repeat-y;
    background-size: cover;
    max-width: 60em;
    margin: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-x: hidden;
    

}

header{
    height: 5.3em;
    
    background-color: black;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    

    }


    #idlogo {
    margin: 3.5em;
    height: 3em;
    margin-top: 1.2em;
    

}

.container{
    display: flex;
    flex-direction: row;
    margin-right: 4em;
        
    }

.flex-item { 
  background-color: darkorange;
  width: 7em;
  height: 2.5em;
  line-height: 40px;
  text-align: center;
  margin-right: 1.5em;
  margin-top: 1.3em;
    
}

ul li:hover {
    background-color: #f56e00;
    text-decoration: none;
    
}

a:link, a:visited{  
text-decoration:none;  
    
}

nav ul li a {
    color:#ffffff;
    text-decoration: none;
    font-size: 1em;
    font-weight: 300;    
    
    }

.caja {
    display: block;
    margin: -3em 0em -10em 0em;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    
    height: 12em;
    padding: 1.4em 0em 0em 2em;
    
    }   

.caja2 {
    display: block;
    margin-top: 1em;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    
    height: 30em;
    padding: 1.2em;
}

.caja3{
    display: block;
    margin-top: 1em;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    
    height: 32em;
    padding: 1.2em;
    
}

.caja4{
    display: block;
    margin-top: 1em;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    
    height: 32em;
    padding: 1.2em;

    }

.flex-container{
    max-width:960px;
    max-height: 23em;
    width:100%;
    height: 100%;
    list-style-type:none;
    margin: 0.5em;
    display: flex;
    flex-flow: row wrap;
   }

    .entrenamientos{
        text-align: center;
        margin-top: 0em;
    }

.practicas{
    display:flex;
    width: 40em;
    align-items: center;
    align-self: center;
    margin: auto;
    padding: 0em;
    
 }

.descarga{
    display:block;
    width: 25em;
    text-align: left;
    margin: 13em 0em -7em 0em;
}

.video{
    width: 350px;
    height: 215px;
    display:block;
    margin: -4em 0em 0em 36em;
}


 .mapa{
margin: -2.3em 0em 0em 7em;
}

    
#tenis{
    line-height:1.6em;
    font-size:1em;
    height: 6em;
    margin: 1em 15em 0em 1em; 
}

}
    
#futbol11{
    line-height:1.6em;
    font-size:1em;
    height: 6em;
    margin: 1em 15em 0em 1em; 
}
        
        
#handball{
    line-height:1.6em;
    font-size:1em;
    height: 6em;
    margin: 1em 1em 0em 16.5em; 
}


#futbol5{
    line-height:1.6em;
    font-size:1em;
    height: 6em;
    margin: 2em 15em 0em 1em; 

}

#ajedrez{
    line-height:1.6em;
    font-size:1em;
    height: 6em;
    margin: 2em 0em 16em;

}

#voley{
    line-height:1.6em;
    font-size:1em;
    height: 6em;
    margin: 2em 0em 0em 16em; 

}

#basquetball{
    line-height:1.6em;
    font-size:1em;
    height: 6em;
    margin: -14em 0em 1em 1em; 

}

#natacion{
    line-height:1.6em;
    font-size:1em;
    height: 6em;
    margin: -14em 0em 0em 14.5em; 

}

#tenisdemesa{
    line-height:1.6em;
    font-size:1em;
    height: 6em;
    margin: -14em 0em 0em 16.5em; 

}


#tenisimagen{
    width: 130px;
    height: 130px;
    margin: 1em 0em 16em 2em;
    
}

#futbol11imagen{
    width: 130px;
    height: 130px;
    margin: 1em 0em 16em 10em;
    
}

#handballimagen{
    width: 130px;
    height: 130px;
    margin: 1em 0em 16em 12em;
        
}

#futbol5imagen{
    width: 130px;
    height: 130px;
    margin: 0em 0em 7em -47em;    
}

#ajedrezimagen{
    width: 130px;
    height: 130px;
    margin: 0em 0em 7em 10em;
        
}

#voleyimagen{
    width: 130px;
    height: 130px;
    margin: 0em 0em 7em 12em;
        
}


#basquetimagen{
    width: 130px;
    height: 130px;
    margin: 0em 0em -2em -47em;
    
}


#natacionimagen{
    width: 130px;
    height: 130px;
    margin: 0em 0em -2em 10em;
        
}

#tenisdemesaimagen{
    width: 130px;
    height: 130px;
    margin: 0em 0em -2em 12em;
        
}

h1{ 
    color: orange;
    font-size: 2em;
    width: 6em;
    padding: 0;   
    margin: 0;
    
}

h2{ 
    color: #ffffff;
    font-size: 3em;
    margin-bottom: 3em
}
    
h3{
    color: #ffffff;
    font-size: 2em;
    font-weight: 300;
    line-height: 1.1em;
     margin: -2em 0em 0em 0em;
}


h4{
    color: darkorange;
    font-size: 1.8em;
    font-weight: 300;
}
    
    h5{
    color: ghostwhite;
    font-size: 1.2em;
    font-weight: 100;
    line-height: 1.1em;
    text-align: center;
    margin: 1em 0em 0em 0em;
}
        
    h6{
     color: darkorange;
     font-size: 1.4em;
     font-weight: 300;
     text-align: left;
        
    }


    h7{
        
     color: #ffffff;
     font-size: 2em;
     font-weight: 400;
     
        
    }

    h8{
        
   font-weight: 100;

}

    h9{
        
    color: darkorange;
}


   h10{
      margin: 0em 0em 0em 0.3em;
      color:darkorange;
      font-size: 1.8em;
      font-weight: 400;
}

    h11{
        
      font-size: 1em;
      color:whitesmoke;
      font-weight: 100;
         margin: 1em 0em 0em 1em;
        padding-right: 2em
        }

    h12{
     margin: 0em 0em 0em 0.5em;
     color: darkorange;
     font-size: 1.4em;
     font-weight: 300;
     text-align: left;

}

}

p {
    margin-top: 1em;
    font-size: 1em;
    font-weight: 100;   
}


footer {
    display: block;
    color: white;
    height: 7em;
    margin: 2em 0em 0em 0em;
    padding: 1.2em 1em 1em 2.5em;
    font-size: 0.65em;
    background-color: black;
    justify-content: space-between;
    min-height: 1vh;
    
        
    
}

@media screen and (max-width: 60em) {
    
    #body{
       overflow-x:hidden;
       background-image: url("../img/fondo688.jpg");\
       background-repeat: no-repeat;
       background-size: auto;
       max-height: 100vh;
       width: 688px;
       margin: auto;
      
        
    }
    
    header{
        width: 688px;
        display: flex;
        flex-direction: column;
        flex-flow:wrap;
        align-items: center;
        margin: auto;
        margin-top: 0;
        margin-bottom: 0;
        
        
    }
    
    #nave{
        margin: auto
        
    }
    
    .conteiner{
       display: block;
       flex-direction: column;
        
        
        }
    
   .flex-item{    
       width: 8em;
       flex-wrap: nowrap;
       justify-content: center;
       align-items: center;
       background-color: darkorange;
       margin: -11em 0.6em 0em 0em;
       
    }
    
    .flex-container{
        margin-top: 7em
    }
   .caja{ 
     padding: 1.5em 0em 0em 1.5em;
     height: 13em;
     
     margin: auto;
     width: 43em   
    }
    
    .caja2{
        height: 32em;
        margin-left: auto;
        margin-right: auto;
        width: 43em;
        margin-top: 7em
        
        
        }
    
      
    .caja3{
        height: 40em;
        margin-left: auto;
        margin-right: auto;
        margin-top: 7em;
        width: 43em;
        
        
        }
    
        
    .caja4{
        width: 43em;
        height: 32em;
        margin: auto;
    }
    
    
    #mapa{
        width: auto;
        height: auto;
        margin: 1em 0em 0em -9.5em;
    }
    
#tenisimagen{
    width: 130px;
    height: 130px;
    margin: 1em 0em 0em 4em;
    
}

#futbol11imagen{
    width: 130px;
    height: 130px;
    margin: 1em 0em 0em 2em;
    
}

#handballimagen{
    width: 130px;
    height: 130px;
    margin: 1em 0em 0em 3em;
        
}

#futbol5imagen{
    width: 130px;
    height: 130px;
    margin: 1em 0em 3em 4em;
        
}

#ajedrezimagen{
    width: 130px;
    height: 130px;
    margin: -3em 0em 3em 2em;
        
}

#voleyimagen{
    width: 130px;
    height: 130px;
    margin: -3em 0em 3em 3em;
        
}


#basquetimagen{
    width: 130px;
    height: 130px;
    margin: -3em 0em 0em 4em;
    
}


#natacionimagen{
    width: 130px;
    height: 130px;
    margin: -5em 0em 0em 2em;
        
}

#tenisdemesaimagen{
    width: 130px;
    height: 130px;
    margin: -3em 0em 0em 3em;
        
}
        
    h6{
        font-size: 1.2em;
        margin: -2em 0em 0em 0em;
    }
    
    
    .practicas{
        height: 5em;
        margin-top: 7em;
        margin-left: auto;
        margin-right: auto
        
    }
    
    
    .descarga{
        margin: 6em 0em -7em 0em;
        font-size: 0.8em;
    
    }
    
    #cansado {
        margin: auto;
        width: 43em;
        
    }
    .video{
        margin: 0em 0em 0em 21em;
        width: 350px;
        height: 200px;
        
    }
    
    footer{
        
        width: 67em;
        margin-right: auto;
        margin-left: auto;
        min-height: 1vh;
    }
        #tenis{
        
    margin: -2em 0em 0em 0em;
        
    }
    
    #futbol11{
        
    margin: -2em 0em 0em 9em;
        
    }
    
    
    #handball{
        
    margin: -2em 0em 0em 9em;
        
    }
    
       
        
    #futbol5{
        
    margin: 0em 0em 0em 0em;
        
    }
    
   #ajedrez{
        
    margin: 0em 0em 0em 9em;
        
    }
    
    #voley{
        
    margin: 0em 0em 0em 8.5em;
        
    }
    
    
    #basquetball{
        
    margin: 2em 0em 0em 0em;
        
    }
    
       
        
    #natacion{
        
    margin: 2em 0em 0em 9em;
        
    }
        
    #tenisdemesa{
        
    margin: 2em 0em 0em 9em;
        
    }
    
    .entrenamientos{
        margin: 0em;
        
    }
    
    
    #idlogo {
      margin: 30%;
      height: 3em;
      margin-top: 1.3em;
       
      }
    
    
    
@media screen and (max-width: 40em) {
    
#body{
    
    background-image: url("../img/fondo388.jpg");
    background-repeat: no-repeat;
    background-size: auto;
    width: 40em;
    margin: auto
        
    }
    
    header{
        display: flex;
        flex-direction: column;
        flex-flow:wrap;
        width: 24em;
        align-items: center;
        
        
    }
    
    #nave{
        margin: auto
    }
    
    container{
       display: block;
       flex-direction: column;
       flex-flow: wrap;
        
        }
    
   .flex-item{   
       display: block;
       flex-direction: column;
       flex-flow:wrap;
       width: 4.2em;
       background-color: darkorange;
       margin: -5em 0.7em 0em 0em;
       font-size: 0.999em;
       
        
    }
    
   .caja{ 
     
     height:25em ;
     margin: auto;
     width: 24em;    
    }
    
    
    .caja2 {
     height: 55em;
      margin: auto;
     font-size: 0.8em;
        margin-top: 7em;
        width: 30em
        
    }
    
    
    .caja3{
        width:24em;
        height:60em;
        margin: auto;
        margin-top: 6em
    }
    
    .caja4{
        width: 24em;
        margin-left: auto;
        height: 25em;
        
    }
    
        #mapa{
        
        height: 15.2em;
        margin: 2em 0em 0em -9em;
    }
    
#tenisimagen{
    width: 130px;
    height: 130px;
    margin: 0em 0em 15em 0em;
    
}

#futbol11imagen{
    width: 130px;
    height: 130px;
    margin: 0em 0em 15em 3em;
    
}

#handballimagen{
    width: 130px;
    height: 130px;
    margin: -13em 0em 14em 0em;
        
}

#futbol5imagen{
    width: 130px;
    height: 130px;
    margin: -20em 0em 14em 3em;
        
}

#ajedrezimagen{
    width: 130px;
    height: 130px;
    margin: -12em 0em 14em 0em;
        
}

#voleyimagen{
    width: 130px;
    height: 130px;
    margin: -15em 0em 14em 3em;
        
}


#basquetimagen{
    width: 130px;
    height: 130px;
    margin: -20em 0em 5em 0em;
    
}


#natacionimagen{
    width: 130px;
    height: 130px;
    margin: -32em 0em 5em 3em;
        
}

#tenisdemesaimagen{
    width: 130px;
    height: 130px;
    margin: -5em 0em 5em 5.5em;
        
}
    
    .practicas{
        font-size: 0.66em;
        height: 8em;
        margin-top: 8em;
        margin-left: auto;
        margin-right: auto
        
        
    }
    
    
    .descarga{
        margin: 8em 0em 0em 2.5em;
        text-align: center;
        font-size: 0.8em;
    
    }
    
    
    
    .video{
        
        margin: 1em 0em 0em 2em;
        width: 320px;
        height: 280px;
        

        
    }
    
    #cansado{
        width: 24em;
    }
    
    
    .flex-conteiner{
        margin: 1em 0em 0em 1em;
               display: block;
       flex-direction: column;
        flex-flow: wrap;
            
    }
    
    #tenis{
        
    margin: 4em 0em 0em 0.7em;
        
    }
    
    #futbol11{
        
    margin: 4em 0em 0em 12em;
        
    }
    
    
    #handball{
        
    margin: 1em 0em 0em 0.6em;
        
    }
    
       
        
    #futbol5{
        
    margin: 1em 0em 0em 11.5em;
        
    }
    
   #ajedrez{
        
    margin: 1em 0em 0em 0.7em;
        
    }
    
    #voley{
        
    margin: 1em 0em 0em 11em;
        
    }
    
    
    #basquetball{
        
    margin: 1em 0em 0em 0.6em;
        
    }
    
       
        
    #natacion{
        
    margin: 1em 0em 0em 11.5em;
        
    }
        
    #tenisdemesa{
        
    margin: 1.5em 0em 0em 9.7em;
        
    }
    
    .entrenamientos{
        margin: 0em;
        width: 24em;
        margin: auto
    }
    
    h7{
         
     margin-bottom: 1em
     font-size: 2.5em;
        
    }
    
    footer{
        width: 37em;
        
        padding: 1em 1em 2em 1em;
        margin-top: 2em;
        margin-right: auto;
        margin-left: auto;
        min-height: 1vh;
        
    }  
    h10{
         
     margin: 0em 0em 0em 0em;
     font-size: 1.8em;
        
    }
    
            
    
    
    h3{
         
     margin: -2.3em 0em 0em 0em;
     font-size: 2em;
        
    }
    
     h11{
         
     margin: 1em 0em 0em 1em;
     font-size: 1.2em;
         padding-right: 2em;
        
    }
    
    
     h6{
         
     margin: -1em 0em 0em 0em;
     font-size: 1.2em;
        
    }
    
         h12{
         
     margin: -1em 0em 0em 0em;
     font-size: 1.2em;
        
    }
    
   #idlogo {
      
      height: 3em;
      align-items: center;
   
    }
    h2{
        
        margin:auto
    }