@media only screen and (max-width: 735px) {
    /* Menu */
    .menu {
        display: none;
    }
    .overlay {
        display: flex;
        position: absolute;
        bottom: 0;
        left: 100%;
        right: 0;
        background-color: rgba(0,0,0,1);
        overflow: hidden;
        width: 0;
        height: 100%;
        transition: .5s ease;
        z-index: 3;
        flex-direction: column;
    }
    .overlay.change {
        width: 50%;
        left: 50%;
    }
    .overlay .menu {
        display: inherit;
        background-color: initial;
        flex-grow: 1;
        flex-direction: column;
    }
    .overlay .footer {
        display: flex;
        background-color: initial;
    }
    .overlay .footer .copyright{
        width: 100%;
        text-align: center;   
        margin: 0; 
    }
    .overlay .footer .dev{
        /* position: relative; */
        display: none;
    }
    .overlay .menu  ul{
        transform: rotate(180deg);
    }
    .overlay .menu  li{
        float: right;
        width: 100%;
        transform: rotate(-180deg);
    }
   
    .mobile-menu {
        display: block;
        position: absolute;
        right: 5vw;
        top: 2vh;
        z-index: 4;
    }
    .logo {
        position: absolute;
        top: 65px;
        left: 2%;
        width: 20%;
        z-index: 1;
    }
    .logo img {
        height: 80px;
        width: auto;
        margin-top: -40%;
    }  
    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #9DC217;
        margin: 6px 0;
        transition: 0.4s;
        border: 1px solid #bbb ;
    }
    
    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px);
        transform: rotate(-45deg) translate(-9px, 6px);
    }
    
    .change .bar2 {opacity: 0;}
    
    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px);
        transform: rotate(45deg) translate(-8px, -8px);
    }
    .header {
        height: auto;
    }
    .gridwrapper {
        height: auto !important;
    }
    .gridcontent {
        width: 100% !important;
    }
    .footer {
        display: none;
    }
    .filler {
        display: none;
    }

}

@media only screen and (max-width: 500px) {
    .logo {
        display: none;
    }
    .overlay.change {
        width: 100%;
        left: 0;
    }

}