@charset"utf-8"
     *{
        box-sizing:border-box;
         margin: 0;
         padding:0;
        
        
       
}
.fondo{
   background-image: url(https://image.freepik.com/psd-gratis/diseno-fondo-abstracto_1297-87.jpg)
}
    body{ background-color: #5a8fed;
        font-family:sans-serif ;
        margin: 0}




header nav ul {
  list-style: none; 
    display: flex;
    justify-content: space-evenly; 
    padding:.5em; 
    flex-wrap: wrap;
    color: #011F72;
    font-weight: bold;
    font-size: 95%;
    background-color: aqua
   
  
}

header nav ul li a {
    display: flex;
    align-items: center;
    justify-content: center; 
        
}

 header nav ul li img {
     display: flex;
     align-items: center }

#futsal img {
    width: 100%;
    height: auto
}

.botonera  {
    background: aqua;
     display: flex;
    justify-content:space-around;
    margin: 0;
    padding: .5em;
    border-top: 2px solid #5a8fed;
    flex-wrap: wrap;
    
    
    text-decoration: none;
      font-weight: bold;
}
.botonera a
{
   text-decoration: none;
    background-color: #011F72;
    border-radius: 30px;
padding: .5em;
    font-size: .9em;
    color: aqua;
     
box-shadow:.0rem .2rem .5rem #000c2e;
    
        
}
section {margin-left: .8em}
ul{margin: 0;list-style: none}
h1{color: aqua}
.comitente {display: flex;flex-direction: column;background-color: #011F72;margin-left: 0;}
.comitente h1 {margin-left: 0.5em;;text-align: center;margin-bottom: 0}
.comitente h5 {color:aqua;text-align: center;margin-bottom: 0px;margin-top: 0px }
.comitente p{color: aliceblue;text-align: center;text-align:left;padding: .5em}



.grupo h2{color: #011F72;font-weight:bold}
.grupo  ul {
  list-style: none; display: flex;justify-content: space-around; 
    padding:0; flex-wrap: wrap;margin: 0}
.grupo ul li img {
    display: flex;
    align-items: center }
.grupo a {color: aliceblue;text-decoration: none;font-weight: bold
}

.web  img{
    max-width:50%;
}
#dg{
    max-width: 30%;
}
#b{
     max-width: 65%;
}

.web nav {margin-top: 1em;}
.web li {
    border-top: 2px solid #26282B;
    padding-top: 1em;
}

.web ul {
    display:flex;
    flex-direction: column;
    padding: 0;
}

/*--------PLAN-----------------*/


    

.club {
    background-color: #011F72;
    margin: 0;
    padding: .8em
}

.club p {
    color: aliceblue
}

.historia p{
    margin-top: 1em;
}
.historia{
    display: flex;
    flex-direction: column
}
.historia h2{color: aqua}

.historia p {
   
    margin-right:  0.8em;
    margin-top: 0
}
.historia img {
    display:flex;
    margin: auto;
    padding-top: 1em;
    
}
.objetivo h3{
    color: aqua;
}
.objetivo h2{
    color: aqua;
    border-top: 2px solid aqua;
    padding-top: 10px}

/*-------------MAPA-------------*/

#mapa img {
    max-width: 100%;
    height: auto;}



footer {font-size: 0.8em; color: #484848;background-color: #307bff;
    padding: 2px;
    padding-left: 1em}



    
/*--------------panel sponsor y panel app-------*/
#panelsponsors {
    display: flex;
    padding: .5em;
 margin-left: -1em;
    margin-top: 3em;
    margin-bottom: 3em;
        
  


}
#panelsponsors img{
    
  
    width: 100%;
    height: auto;

    background-color:#ffffff
}
/*--------------Langing Page--------------------------------*/
.foto2 {
  display: none;
    }

.foto2 {

    }
.fondo {

/* Ubicación de la imagen */



/* Para dejar la imagen de fondo centrada, vertical y

horizontalmente */

background-position: center center;

/* Para que la imagen de fondo no se repita */

background-repeat: no-repeat;

/* La imagen se fija en la ventana de visualización para que la altura de la imagen no supere a la del contenido */

background-attachment: fixed;

/* La imagen de fondo se reescala automáticamente con el cambio del ancho de ventana del navegador */

background-size: cover;

/* Se muestra un color de fondo mientras se está cargando la imagen

de fondo o si hay problemas para cargarla */

background-color: #66999;

}
#contenedorfondo{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#fondohinchas {
    background-size:contain;
    position: absolute;
    
    width: 100%;
    }

.landing{
    margin-left: 2em;
    margin-right:2.5em;
    margin-top: 1.5em;
    margin-bottom: 1em;
    padding-right: 1.7em;
    padding-left: 1.5em;
    padding-bottom: .2em;
    position: relative;
    background-color: #011F72;
    opacity: 0.9;
    border-radius: .8rem;
    display: flex;
    flex-direction: column;
   
    
}
.centrarmarco{
    display: flex;
    justify-content:center;
    padding-left: -1em;
    
    
}


#nuevaapp{
    color: white;
    font-weight:bold;
    margin-bottom: .1em;
}
#textolanding{
   color: white;
   font-size: 1em;
   margin-top: .1em;
    
}
#corre{
    color: #25f0a2;
    font-weight: 700;
    font-size: 1.1em;
    margin-top: .5em;
    
}

#descargar{
    background-color: #FF0086;
    color: white;
    font-weight: 700;
    font-size: 1.1em;
    padding: .5em;
    border-radius: .5em;
    margin-bottom: .5em;
    width: 5em;
    text-decoration: none;
    text-align: center;
}
#figurappal{
    background-image:url(imagenes/imagenfondo1.jpg);
    background-repeat: repeat;
    position: relative;
    width:90%;
    height: auto;
    margin-left: 1.2em;
    margin-bottom: 0em;
 }

footer {
    position: relative;
}

@media ( min-width: 50em ){
    .fondo{
        background-image: url(http://img.fenixzone.net/i/k9Ls2gc.jpeg)}
    
    .foto2  {
        width: 45%;
        max-width: 50%;
        position: relative;
        display: flex;
        margin-top: 5em;
        }
    
    .tamao{
        width: 460px;
    }
    
    .cortar{
        width: 460px;
        height: 250px;
    }
   
   .mover{
    display: flex;
    position: relative;
    
    
    
    
    
}
    .moverrecuadro{
        padding-top: 1em;
        padding-bottom: 1em;
    }
    
    .foto1{
        display: none;
    }
  

    body {background-color: #25f0a2}
   
    .historia{display:flex;flex-direction: row}
    .historia p{margin-left: 2rem}
    .historia h2{margin-left: 2rem}
    .historia img{display: flex;margin-top: 2rem}
    
    
    .caja {display: flex;text-align: left;}
    .caja p{padding: 10px 3rem 0 3rem}
    .caja h3{ margin-left: 3rem}
    
    .comitente p{margin:1rem 15rem 1rem 15rem;text-align: center}
    
    .imagenplan {background-color: #5a8fed; margin-left: 0;padding-left: 0}
    #wepapp img {display:flex; margin-left: 0;padding-left: 0}
    
    footer p{margin:1rem 10rem 1rem 10rem;text-align: center}
    
    
    
}