@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,700&display=swap')
*{
     margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;}
/* general */
p {margin-left: 1.3em;
   margin-top: .8em;
   margin-right: 1.3em}
h1 {color: #4b1595;}
h2 {color: white;}
h3 {color: white;}
h4 {color: #ffffff}
.cuerpo {
    background-color: rgba(0, 0, 0, 0.73);color: #39BC88;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    }
ul li a:hover{
       cursor: pointer;
        color:#10d99b;
        background-color: #0d5c43}

body { display:flex;
       background-image: url(imagenes/fondo.png);
       background-repeat: no-repeat;
       background-color: #2ad47f;
       flex-direction: column;
       font-family: "Avenir Next", "Avenir", sans-serif;
       background-color:rgb:white;
       height: 100vh;
       justify-content: space-between;
       padding: inherit;
       margin: inherit;
       align-content: center
   
   
}
#titulo { font-weight: 700;
            font-size: 1rem;
           color: rgba(18, 134, 98, 0)
            }  
/* cabezera y menu*/

header {
     
    /*menu estatico
    position:fixed*/
    
     width: 100%;
     background-color:rgba(242, 242, 242, 0); 
     display: flex;
     justify-content:space-between;
     text-align:center;
    
    }



#boton-menu { 
      display: none;}


header label {
       

       display: none;
       width: 40px;
       height: 40px;
       padding: :0px;
       margin-left: 8px;
        }

header label:hover{
       cursor: pointer;
       background-color: #cccccc;}

.menu ul { 
  
       margin: 0;
       list-style: none;
       padding: 0;
       display: flex;
       justify-content: space-around;
}


.menu .submenu {
    text-decoration:underline;
    font-size: .8rem;
 display: none;}
    
.menu ul li:hover .submenu{display: flex;
flex-direction: column;}

.menu li:hover {
       background-color: white;
}

.menu li{ flex-grow: 1;
          text-align:center;}


.menu li a {
       display: block;
       padding: 10px 15px;  
       color: white;
       text-decoration: none;
       background-color: #128662;
}




.logo {width: 28px;
       margin-right: 6px;
       margin-top: 3px}
       


/* despliegue menu*/ 

nav ul li ul {display:flex; flex-direction: row;
position: absolute;}
00egundo{position: absolute; top:50px; background-color: darkcyan;
;
}


/* finnnn  cabezera y menu*/

 /* botones*/




.titular { display: flex;
background-color: aqua;
background-image:url(imagenes/fondo.png);
height: 100vh;
    
/* formulario*/
}
.contenedor{
      padding-top: 20px;
        padding-bottom: 10px; background-color: rgba(18, 134, 98, 0.69)}

.uno {display: inline-block;
       text-align: right;
   
    margin-bottom: 1em;
    width: 40%;
       padding-right: 1em;
     padding-left: 15px ; 
    color: #ffffff;
      }
.dos {
    margin-left: 2%;    
  
    display: inline-block;
    width: 40%;
   
    }

.tres{display: inline-block;
       text-align: right;
background-color: #000000; padding: 5px;
        margin-top: 5px;
   
    text-align: center;
        margin-bottom:5px;
       width: 100px;
        border: 0px none #000000;
        box-shadow: 2px 10px 5px -2px rgba(0,0,0,0.38);
        box-shadow: 2px 10px 5px -2px rgba(0,0,0,0.38);
        box-shadow: 2px 10px 5px -2px rgba(0,0,0,0.38);}}

.cuatro{  margin-left: 2%;    
  
    display: inline-block;
    width: 40%;
    background-color: #000000; padding: 5px;
        margin-top: 5px;
   
    text-align: center;
        margin-bottom:5px;
       width: 100px;
        border: 0px none #000000;
        box-shadow: 2px 10px 5px -2px rgba(0,0,0,0.38);
        box-shadow: 2px 10px 5px -2px rgba(0,0,0,0.38);
        box-shadow: 2px 10px 5px -2px rgba(0,0,0,0.38);}
  

}

.boton{display:inline;
    margin-bottom: 1em;
    width: 25%;
       padding-right: 1em;
    margin-left: 21%;
       }

.boton2{margin-left: 2%;    
  
    display: inline-block;
    width: 25%;}

.relleno{
    ; padding: 15px}
/* modificacion de los logos*/
.logo2 { width:25px;
        height: 25px;
        margin-top:1.3em;
        margin-right:.5em;
        margin-left: 1em;
          margin-bottom: 2em;}   
.logobalon { width: 35px;
        height: 35px;
        margin-top:.8em;
        margin-right:.5em;
        margin-left: 1em;}   
.logoficha { width: 25px;
        height: 25px;
        margin-top:.3em;
        margin-right:.5em;
         margin-left: 1em;}   
.logomenu{ height: 18px;
           margin-left: 4px;
           margin-right: 5px;}
.logosubmenu{height: 15px;
           margin-left: 4px;
           margin-right: 5px;
               }


a{color: white;text-decoration: none;  }
.botones{
    
;
       display: flex;
 
    justify-content:space-around;
    
       }

.botones2{ background-color: #000000; padding: 5px;
        margin-top: 5px;
   
    text-align: center;
        margin-bottom:5px;
       width: 100px;
        border: 0px none #000000;
        box-shadow: 2px 10px 5px -2px rgba(0,0,0,0.38);
        box-shadow: 2px 10px 5px -2px rgba(0,0,0,0.38);
        box-shadow: 2px 10px 5px -2px rgba(0,0,0,0.38);}
  

footer {
     display: flex;
    flex-direction: column;
    align-items: center;
    background-color: black;
    font-size: 8pt;
    min-width: 100%;
    text-shadow:rgba(21, 16, 16, 0.79);
 
    color: white;
   ;}

.promo {display: flex;
;
    justify-content: center;
    align-content:center;
    align-items: flex-end;
    padding: 5px;
    padding-top: 55px
        
    ;
}

.explorar  {
   
    border: 4px solid rgba(0,0,0,.25);
   
    box-shadow: 0 0.15em 0.1em rgba(0,0,0,.215);
  
    cursor: pointer;
    display: flex;
    padding: 15px;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
 }


@media (max-width:768px) {
    body{background-image: url(imagenes/fondo2.png)}
    .titular { display: flex;
background-color: aqua;
background-image:url(imagenes/fondo2.png);
        height: 100vh;}
    
    header label {
        display: block;
    }
    .menu {
         position: absolute;
          background-color:#39BC88;
         width: 70%;
        height: 100%;
        margin-left: -80%; 
        transition: all 0.5s;
        
    }
    header {
     
    
    }
    .menu ul { flex-direction: column;}
    .menu li:hover {
        background-color: #39BC88;}
    
    #boton-menu:checked ~ .menu{ margin: 0;}

    
    
    
    
    
    
    .menu .submenu {

 display: flex}

     .submenu {
      ;
        color: #39BC88;}
    
    .menu .submenu a{
        background-color: #39BC88;
        color: #128662;}
    .menu .submenu a:hover{ background-color: #cecece}
    nav ul li ul {
        position: static;
    
    
  
    }
    
 
    
  
    
    
    
}