header{
    background-color: rgb(216, 216, 216);
    border-radius: 4px;
    width: 98%;
    margin: auto;
    position: relative;
    box-shadow: 2px 2px 2px black;
}
.header-body{
    width: 98%;
    margin: auto;
}
.header-section{
    text-align: center;
    width: 100%;
    margin: auto;
}
.header-section img{
    width: 100%;
    margin: 8px;
}
.museo img{
    border-radius: 50%;
    width: 40%;
}
.header-article{
    text-align: center;
    width: 100%;
    padding: 8px 0px;
}
h1{
    font-size: 26px;
}

.logo img{
    width: 90%;
}
/*-----------------nav------------------*/
nav{
    background-color: rgba(241, 241, 241, 0.8);
    border-radius: 4px;
    width: 40%;
    padding: 0px 8px 8px 8px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    z-index: 2;
    position: absolute;
    top: 56%;
    left: -100%;
    transform: scale(0.2);
    transition: 800ms;
    box-shadow: 3px 3px 3px black;
    }
    .nav_visible{		
        left: 1%;
        transform: scale(1);
    }
    .header-nav-boton-a a{
        background-color: white;
        border-radius: 3px;
        color: black;
        text-decoration: none;
        display: inline-block;
         width: 100%;
         height: 30px;
         margin-top: 5px;
         text-align: center;
         line-height: 30px;
         box-shadow: 2px 2px 2px black;
         transition: 500ms;
    
    }
    .header-nav-boton-a a:hover{
        background-color:beige;
        transform: scale(1.1);
    } 
/*----------------logo hamburguesa----------------------*/
    .header-nav-logo-hamb{
       width: 98%;
       max-width: 60px;
       min-height: 20px;
       position: absolute;
       z-index: 3000;
       bottom: -27%;
       right: 2%;
    }
    .header-nav-logo-hamb-imagen{
        width: 100%;
        cursor: pointer;
        transition: 500ms;
    }
    .header-nav-logo-hamb img{
        border: solid 2px black;
        background-color: white;
        width: 100%;
        padding: 6px;
        box-shadow: 4px 4px 4px black;
    
    }
    .header-nav-logo-hamb-imagen:hover{
        transform: scale(1.1);
    
    }
   
          /*-----------------400----------------------------------*/
@media (min-width: 400px) {
    h1{
        font-size: 32px;
    }
 nav{
    top: 65%;
 }
.header-nav-logo-hamb{    
   bottom: -24%;
   right: 2%;
}
}
          /*-----------------450----------------------------------*/
          @media (min-width: 450px) {
            nav{
                top: 55%;
             }
            .museo img{
             width: 25%;
}
           .logo img{
             width: 70%;
}
           .header-nav-logo-hamb{
            bottom: -28%;
            right: 2%;
}
}

          /*-----------------500----------------------------------*/
          @media (min-width: 500px) {
            nav{
                top: 60%;
             }


}
          /*-----------------550----------------------------------*/
          @media (min-width: 550px) {
            nav{
                top: 20%;
             }
             

            .header-body{
                width: 100%;
                display: flex;
            }
            .header-section{
                text-align: center;
                width: 24%;
                display: flex;
            }
            .header-article{
                width: 52%;
                margin: auto;
            }
           
            .museo img{
                width: 90%;
                max-width: 100px;
                margin: auto;
            }
            .logo img{
                width: 90%;
            }
            h1{
                font-size: 26px;
            }
            .header-nav-logo-hamb{
                bottom: -90%;
            right: 3%;
}
    }

   /*-----------------600----------------------------------*/
@media (min-width: 600px) {
   
    

    nav{
        width: 100%;
        margin: auto;
        margin-left: 100%;
        display: flex;
        flex-direction: row;
        top: 120px;


        /*--position: absolute;
        top: 105%;
        left: -19%;--*/
        transform: scale(0.9);
        transition: 1s;
        box-shadow: 3px 3px 3px black;
    }
  
        .header-nav-boton-a a{
          /*---  display: inline-block;
            width: 170px;  --*/
           padding: 2px 10px;
        }
        .header-nav-logo-hamb{
            display: none;
        }
    }
           /*-----------------800----------------------------------*/
           @media (min-width: 800px) {
           h1{
            font-size: 37px;
           }
}
          /*-----------------1100----------------------------------*/
          @media (min-width: 1100px) {
            nav{
                top: 160px;
            }
            .museo img{
                max-width: 120px;
            }
            h1{
                font-size: 48px;
            }
}