/* estilos para el movil */

.menuGrande{
         display: none;
     }

/*barra del menu de hamburguesa */
.menu_bar{
    width: 100%;
  /*este color aparece debajo del menu cuando está la barra de hamburguesa */
   background-color: #005555;
    /*barra hamburguesa*/
    display: none;
}

/**********************************/
/* tamaño del menu de hamburguesa */
/**********************************/
.menu_bar img{
   width: 10%; /* tamaño de la img(o sea el logotipo a la derecha) en el menu de hamburguesa */
}

/*anchura de la barra de menu de hamburguesa*/
header{
       margin-top:-20px; /*asi se ajusta la barra al tope superior */
       margin-left:0px;
       margin-right:0px;
       padding: 0px;
       width: 100%; 
    }

header nav{
        width:  70%;      /*ancho de cajas movil*/
        height: 1.em;     /* tal cual está. No 1.0em */
        z-index: 1; 
        position:absolute; /*para que se ponga detras del menu*/
        left: -100%;       /* lo mantiene cerrado al principio*/
        overflow: hidden;  /*sin scroll en en las cajas*/
        background-color: #005555;/*color de menu*/
        box-shadow:black;
        box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.32);
    }
header nav ul{
        list-style: none;
        overflow: hidden;
    }
.menu_bar{
        /*barra hamburguesa*/
        display: block; /*bloquear la barra del menu hamburguesa*/
        margin:0;  
       /* padding: 0 */
        padding:0%;
        width: 100%;
    }   
.menu_bar .bt-menu{
        /*bt_menu es el acceso directo de la hamburguesa*/
        display: block;
        padding: 1em; 
        background-color: #005555;
        overflow: hidden;
       /* box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.32); */
    }
header nav ul li{
        display: block;
        float: none;
        /*tamaño del menu desplegable para movil*/
        text-align: center;
        font-size: 0.9em;/*tamaño de la letra*/
        list-style: none;    
    }

header nav ul li a{
    display: block;
    font-size: 1.2em;
    padding: 10%; /*tamaño de cajas solo sirve para movil*/
    font-family: 'Open Sans', sans-serif;    
    text-decoration: none;
    color:rgb(255,255,255);
    margin: 1%;
    
}
header nav ul li a:focus{
 font-weight: bold;
/* color al pasar por encima de las cajas*/
}

a {
    text-decoration: none;
    background-image: linear-gradient(white, white); 
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1.2px;
    transition: background-size .9s;
    color:rgb(244, 245, 247);
    margin-right: 1.5%;
    font-size: 1.1em;
    font-family: 'Open Sans', sans-serif;
}

/*desactiva la animación del enlace para el logotipo de inicio */
.noraya {  
    background-image: none; 
  }

a:hover, a:focus {
        background-size: 100% 1.2px;
        font-weight: normal;
}

#logoMovil img{
    position: absolute;
    width: 23%; 
    left: 74%;  
    margin-top: 2%; /*altura donde aparece el logotipo en en el movil */
    top: 0%; 
    height: auto;
    z-index: 2;
}

@media screen and (min-width:300px ){

    #logoMovil img{
        position: absolute;
        width: 40%;
        left: 60%;
        height: auto;
        top: 0.5%;
        margin-top: -0.70%; /*altura donde aparece el logotipo en en el movil */
        z-index: 2;
     } 

@media screen and (min-width:400px ){

    #logoMovil img{
     position: absolute;
     width: 30%;
     left: 66%;
     height: auto;
     top: 0.5%;
     margin-top: -0.80%; /*altura donde aparece el logotipo en en el movil */
     z-index: 2;
   } 

@media screen and (min-width:500px ){

   #logoMovil img{
    position: absolute;
    width: 30%;
    left:  65%;
    height: auto;
    top: 0.5%;
    margin-top: -0.90%; /*altura donde aparece el logotipo en en el movil */
    height: auto;
    z-index: 2;
}  
    


@media screen and (min-width:600px ){

   #logoMovil img{
    position: absolute;
    width: 30%;
    left: 70%;
    height: auto;
    top: 0.5%;
    margin-top: -0.90%; /*altura donde aparece el logotipo en en el movil */
    z-index: 2;
    }
    
    header nav ul li{
        font-size: 1.1em;/*tamaño de la letra*/
      
    }
    header nav ul li a{
        padding:9.5%;/*tamaño de cajas solo sirve para movil*/
        margin: 1%;
    
    }
    header nav{
        width:  65%; /*ancho de cajas movil*/
      
    }

}
    
@media screen and (min-width:800px ){

   #logoMovil img{
    position: absolute;
    width: 30%;
    height: auto;
    left: 70%;
    top: 0.5%;
    margin-top: -0.90%; /*altura donde aparece el logotipo en en el movil */

    z-index: 2;
    }
    header nav ul li{
        font-size: 1.1em; /*tamaño de la letra*/
      
    }
    header nav ul li a{
        padding:8%; /*tamaño de cajas solo sirve para movil*/3
    }
    header nav{
        width:  63%; /*ancho de cajas movil*/    
    }

}


    
@media screen and (min-width:900px ){
.menuMovil{
         display: none;
     }  
.menuGrande{
         display: block;
     }
     
   a {
        margin-right: 1.5%;
        font-size: 1.1em;
    }

    a:hover, a:focus {
            background-size: 100% 1.2px;
            font-weight: normal;
    }

    .menuPantallasGrandes{
        position: absolute;
        margin-top: 0%;
        z-index: 1;
        background-color: #005555;
        width: 100%; 
        height: 2.8em;   /*ancho de la barra de menu en ordenador */
        padding-top: 4%;  /* padding del menu del ordenador */
    }
    .contenidoMenuG{
        position: absolute;
        width: 20%;
        height: auto;
        margin-top:3%;
        margin-left: 6%;
        z-index: 2; 
    }
    .logoOrdenador{
         width: 70%;
         height: 70%;
         margin-top: -2%;
         margin-left:-30%;
     }
}

/* tamaño de mi pantalla: 1000  px */
 @media screen and (min-width:1000px ){
.menuMovil{
         display: none;
     }  
.menuGrande{
         display: block;
     }
     
   a {
        font-size: 1.25em;
    }

    a:hover, a:focus {
        background-size: 100% 1.2px;
    }
   

    .menuPantallasGrandes{
        position: absolute;
        margin-top: 0%;
        z-index: 1;
        background-color: #005555;
        width: 100%; 
        height: 4em; /*4.3 em */    /*ancho de la barra de menu en ordenador */
        padding-top: 5%; /* 4% */   /* padding del menu del ordenador */ 
        margin-top: 0%;
    }
    .contenidoMenuG{
        position: absolute;
        width: 20%;
        height: auto;
        margin-top:3%;
        margin-left: 6%;
        z-index: 2; 
    }
    .logoOrdenador{
         width: 90%;
         height: 90%;
         margin-top: -2%;
         margin-left:-30%;
     }
}
    
@media screen and (min-width:1300px ){
.menuMovil{
         display: none;
     }  
.menuGrande{
         display: block;
     }
     
a {
        font-size: 1.3em;

    }

.menuPantallasGrandes{
    position: absolute;
    margin-top: 0%;
    z-index: 1;
    background-color: #005555; 
    width: 100%; 
    height: 4em;   /*ancho de la barra de menu en ordenador */
    padding-top: 5%; /* padding del menu del ordenador */ 
    margin-top: 0%;
}
.contenidoMenuG{
    position: absolute;
    width: 20%;
    height: auto;
    margin-top:3%;
    margin-left: 6%;
    z-index: 2; 
}
.logoOrdenador{
    width: 90%;
    height: 90%;
    margin-top: -2%;
    margin-left:-30%;
}
  
        
 @media screen and (min-width:1400px ){

    .menuMovil{
        display: none;
    }  
.menuGrande{
        display: block;
    }
    
a {
       font-size: 1.3em;

   }

.menuPantallasGrandes{
   position: absolute;
   margin-top: 0%;
   z-index: 1;
   background-color: #005555; 
   width: 100%; 
   height: 4em;   /*ancho de la barra de menu en ordenador */
   padding-top: 5%; /* padding del menu del ordenador */ 
   margin-top: 0%;
}
.contenidoMenuG{
   position: absolute;
   width: 20%;
   height: auto;
   margin-top:3%;
   margin-left: 6%;
   z-index: 2; 
}
.logoOrdenador{
   width: 90%;
   height: 90%;
   margin-top: -2%;
   margin-left:-30%;
}
}

@media screen and (min-width:1600px ){

    .menuMovil{
        display: none;
    }  
.menuGrande{
        display: block;
    }
    
a {
       font-size: 1.3em;

   }

.menuPantallasGrandes{
   position: absolute;
   margin-top: 0%;
   z-index: 1;
   background-color: #005555; 
   width: 100%; 
   height: 4em;   /*ancho de la barra de menu en ordenador */
   padding-top: 5%; /* padding del menu del ordenador */ 
   margin-top: 0%;
}
.contenidoMenuG{
   position: absolute;
   width: 20%;
   height: auto;
   margin-top:3%;
   margin-left: 6%;
   z-index: 2; 
}
.logoOrdenador{
   width: 90%;
   height: 90%;
   margin-top: -5%;
   margin-left:-30%;
}
}

@media screen and (min-width:1800px ){

    .menuMovil{
        display: none;
    }  
.menuGrande{
        display: block;
    }
    
a {
       font-size: 1.3em;

   }

.menuPantallasGrandes{
   position: absolute;
   margin-top: 0%;
   z-index: 1;
   background-color: #005555; 
   width: 100%; 
   height: 4em;   /*ancho de la barra de menu en ordenador */
   padding-top: 5%; /* padding del menu del ordenador */ 
   margin-top: 0%;
}
.contenidoMenuG{
   position: absolute;
   width: 20%;
   height: auto;
   margin-top:3%;
   margin-left: 6%;
   z-index: 2; 
}
.logoOrdenador{
   width: 90%;
   height: 90%;
   margin-top: -7%;
   margin-left:-30%;
}
}


@media screen and (min-width:2000px ){

    .menuMovil{
        display: none;
    }  
.menuGrande{
        display: block;
    }
    
a {
       font-size: 1.3em;

   }

.menuPantallasGrandes{
   position: absolute;
   margin-top: 0%;
   z-index: 1;
   background-color: #005555; 
   width: 100%; 
   height: 4em;   /*ancho de la barra de menu en ordenador */
   padding-top: 5%; /* padding del menu del ordenador */ 
   margin-top: 0%;
}
.contenidoMenuG{
   position: absolute;
   width: 20%;
   height: auto;
   margin-top:3%;
   margin-left: 6%;
   z-index: 2; 
}
.logoOrdenador{
   width: 90%;
   height: 90%;
   margin-top: -9%;
   margin-left:-30%;
}
}