/*-----------------------------Estilo en pantallas pequeñas-----------------------------*/

@media screen and (max-width: 940px)
    {
/*-----------------------------Pie de Pagina------------------------------*/

     .footer .text .box{
                        margin-left: 40px;
                       }
    }



/*----------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 880px)
    {
/*-----------------------------Encabezado------------------------------*/

     .Encabezado{
                 width: 100%;                 /* Establecemos largo de la imagen */
                }

     .Encabezado .logo{
                       display: none;         /* Desactiva la visualizacion del elemento */
                      }

     .Encabezado h1{
                    float: none;              /* Desactica el elemento flotante de un elemento */           
                    float: left;      /* Colocamos un elemento en el centro de la pagina */
                    font-size: 47px;          /* Ajustamos el tamaño del texto */
                    margin-top: 10px;
                    margin-bottom: 10px;
                    margin-left: 18px;
                   }


/*------------------------Barra de Navegacion--------------------------*/

     nav .logo{
               display: initial;              /* Inicializamos la visualizacion de un elemento */
               float: left;                   /* Colocamos el elemento al lado izquiero*/
               width: 60px;                   /* Establecemos el ancho del elemento */
               height: 60px;                  /* Establecemos el largo del elemento */
               margin-left: 5px;              /* Establecemos el margen izquierdo de elemento */
               margin-top: 1px;               /* Establecemos el margen superior de elemento */
               margin-bottom: 5px;            /* Establecemos el margen inferior de elemento */
              }

     nav .list{
               margin-top: 20px;              /* Establecemos el margen superior de elemento */
              }

     nav .list a{
                 font-size: 22px;             /* Ajustamos el tamaño del texto */
                }


/*------------------------Pie de Pagina--------------------------*/

     .footer{
             display: block;
            }

     .footer .box .log{
                       margin-left: 0;
                       margin-bottom: 10px;
                      }

     .footer .text{
                   margin-left: 0%;
                  }
    }


/*----------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 768px)
    {
/*-----------------------------Encabezado------------------------------*/

     .Encabezado{
                 display: none;    
                }


/*------------------------Barra de Navegacion--------------------------*/

     nav .logo{
               display: initial;
               float: left;
               width: 60px;
               height: 60px;
               display: flex;
               margin-left: 5px;
               margin-top: 1px;
               margin-bottom: 5px;
              }
    
     nav .titulo{
                 display: initial;
                 color: white;
                 float: left;
                 margin-left: 10px;
                 margin-top: 8px;
                 font-size: 30px;
                }
    
     nav .list{
               position: fixed;
               left: 0px;
               right: 0px;
               top: 46px;
               bottom: 100%;
               z-index: 11;
               width: auto;
               height: auto;
               margin-bottom: 0;
               background-color:#ca0000;
               overflow: hidden;
               transition: all .5s ease-in-out;
              }
    
     nav .list a{
                 display: block;
                 margin-top: 8px;
                 font-size: 30px;
                }

     nav :checked ~ .list{
                          bottom: 0;
                         }

     nav .menu{
               display: block;
              }


/*------------------------Pie de Pagina--------------------------*/
      .footer .text{
                    margin-left: 0%;
                   }
    }


/*----------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 540px)
    {
/*------------------------Barra de navegacion--------------------------*/

nav .titulo{
            font-size: 21px;
            margin-top: 15px;
           }


/*---------------------Pie de Pagina---------------------*/

     .footer{
             margin-top: 50px;
             height: 900px;
            }

     .footer .box .log img{
                           margin-top: 20px;
                           margin-bottom: 20px;
                          }

     .footer .text{
                   display: block;
                  }

     .footer .text .box{
                        margin-left: 32%;
                        margin-bottom: 80px;
                       }

     .footer .text .box h1{
                           text-align: center;
                           margin-left: -50%;
                          }

     .footer .text .box .nave{
                              margin-left: 2%;
                             }

     .footer .text .box .conta{
                               margin-top: 3%;
                               margin-left: -10%;
                              }
    }


/*----------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 412px)
    {
/*------------------------Barra de navegacion--------------------------*/

      nav .titulo{
                  font-size: 21px;
                  margin-top: 15px;
                 }


/*------------------------Pie de Pagina--------------------------*/

     .footer{
             height: 930px;
            }

     .footer .text .box .nave{
                margin-left: 2%;
               }

     .footer .text .box .conta{
                margin-top: 3%;
                margin-left: -30%;
              }
    }



/*----------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 398px)
    {
/*------------------------Barra de navegacion--------------------------*/

     nav .menu .menu-icono{
                           width: 40px;              
                           height: 30px;     
                           margin-top: 5px;        
                           margin-right: 0px;
                          }
    }

/*----------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 380px)
    {
/*------------------------Barra de navegacion--------------------------*/

     nav .titulo{
                 display: none;
                }
    }