*{
    padding:0;
    margin: 0;
}

#menubar{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: azure;
}

#menubar .etiqueta{
    display: none;
    height: 40px;
}

#menubar .etiqueta span{
    font-size: 4.5vh;
    width: 10%;
    line-height: 40px;
    text-align: center;
}

/*#menubar .etiqueta .mini_logo{
    width: 80%;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
}

#menubar .etiqueta .mini_logo img{
    width: 20%;
    padding: 5px;
    text-align: center;
}*/

input{
    display: none;
}

#menubar .menuhide{
    display: none;
    width: 100%;
    /*height: 40px;*/
    line-height: 40px;
    display: flex;
    flex-direction: row;
    /*flex-direction: column;
    background-color: aquamarine;*/
    background-color: dodgerblue;
    border: 0.1px;
    border-style: solid;
    border-color: dodgerblue;
}

#mini_logo{
    display:none;
    height: 40px;
    width: 100%;
    text-align: center;
}

#mini_logo img{
    width: 50px;
    height: 40px;
    padding:2px;
}


/*.item01{
    width: 100%;
    text-align: center;
    border: 0.1px;
    border-style: solid;
    border-color: skyblue;
}*/

.item01,.item02,.item03,.item04,.item05{
    width: 100%;
    text-align: center;
    border: 0.1px;
    border-style: solid;
    border-color: skyblue;
}

.item01:hover,.item02:hover,.item03:hover,.item04:hover,.item05:hover {
    /*-moz-box-shadow:inset 0px 7px 5px #73bbeb;
    -webkit-box-shadow:inset 0px 7px 5px #73bbeb;
    box-shadow:inset 0px 7px 5px #73bbeb;*/
    background-color: rgba(25, 225, 225, 0.3);
}

#menubar  a{
    text-decoration: none;
    color: white;
}


/* RESPONSIVE DESIGN -- media screen and (max-width: 520px) and (min-width: 480px) */

@media only screen and (min-width : 250px) and (max-width : 480px)
{
    /*#mini_logo{
        height: 0px;
    }*/
    
    
    /*#mini_logo img{
        display:none;
    }*/
    
    #menubar .etiqueta{
        display:flex;
        /*display:block; */
        /*background-color: whitesmoke;*/
        background-color: dodgerblue;
        color: white;
        position: relative;
        z-index: 1;
        border: 0.1px;
        border-style: solid;
        border-color: skyblue;
    }
    
    #menubar .menuhide{
        width: 100%;
        display: flex;
        flex-direction: column;
        /*background-color: aquamarine;*/
        background-color: white;
    }
    
    .menuhide {
        transform:translate(0%,-100%);
        transition: transform,1s;
        transform:translate(0%,-100%);
        transition: transform,1s;
        -webkit-transform:translate(0%,-100%);
        -webkit-transition: transform,1s;
        -ms-transform:translate(0%,-100%);
        -ms-transition: transform,1s;  
        -moz-transform:translate(0%,-100%);
        -moz-transition: transform,1s;
  }
    
     #menu-bar:checked ~ .menuhide{
        transform:translate(0%,0%);
        transition: transform,1s;  
        -webkit-transform:translate(0%,0%);
        -webkit-transition: transform,1s;
        -ms-transform:translate(0%,0%);
        -ms-transition: transform,1s;
        -moz-transform:translate(0%,0%);
        -moz-transition: transform,1s; 
      }
    
    .item01:hover,.item02:hover,.item03:hover,.item04:hover,.item05:hover {
    /*-moz-box-shadow:inset 0px 7px 5px #73bbeb;
    -webkit-box-shadow:inset 0px 7px 5px #73bbeb;
    box-shadow:inset 0px 7px 5px #73bbeb;*/
    background-color: rgba(25, 225, 225, 0.3);
}

#menubar  a{
    text-decoration: none;
    color: gray;
}
    
}