@media screen and (max-width:870px) {
    .logo a{ 

        font-size: 27px;
        top: 20px;
        margin-left: -27%;
    }

    .logo a:focus{
        text-decoration: none;
        outline: none;
    }

    .hamburger{
        position: relative;
        width: 28px;
        height: 2.8px;
    }

    .hamburger-top,
    .hamburger-middle,
    .hamburger-bottom{
        left: 28px;
        top: 25px;
    }

    #menu{
        top: 0;
        background: none;
        position: absolute;
    }

    .menu-content{
        left: 0;
        margin-left: 15%;
    }

    .menu-content .mob-logo{
        line-height: 1.5;
    }

}

@media screen and (max-width:770px) {
    .logo a{ 

        font-size: 27px;
        top: 20px;
        margin-left: -25%;
    }

    .logo a:focus{
        text-decoration: none;
        outline: none;
    }

    .hamburger{
        position: relative;
        width: 28px;
        height: 2.8px;
    }

    .hamburger-top,
    .hamburger-middle,
    .hamburger-bottom{
        left: 29px;
        top: 25px;
    }

    #menu{
        top: 0;
        background: none;
        position: absolute;
    }

    .menu-content{
        left: 0;
        margin-left: 15%;
    }

    .menu-content .mob-logo{
        line-height: 1.5;
    }

}

@media screen and (max-width:550px) {
    .logo a{ 

        font-size: 27px;
        top: 20px;
        margin-left: -15%;
    }

    .logo a:focus{
        text-decoration: none;
        outline: none;
    }

    .hamburger{
        position: relative;
        width: 28px;
        height: 2.8px;
    }

    .hamburger-top,
    .hamburger-middle,
    .hamburger-bottom{
        left: 28px;
        top: 25px;
    }

    #menu{
        top: 0;
        background: none;
        position: absolute;
    }

    .menu-content{
        left: 0;
        margin-left: 15%;
    }

    .menu-content .mob-logo{
        line-height: 1.5;
    }

}

@media screen and (max-width:450px) {
    .logo a{ 

        font-size: 27px;
        top: 20px;
        margin-left: -20px;
    }

    .logo a:focus{
        text-decoration: none;
        outline: none;
    }

    .hamburger{
        position: relative;
        width: 28px;
        height: 2.8px;
    }

    .hamburger-top,
    .hamburger-middle,
    .hamburger-bottom{
        left: 28px;
        top: 25px;
    }

    #menu{
        top: 0;
        background: none;
        position: absolute;
    }

    .menu-content{
        left: 0;
        margin-left: 15%;
    }

    .menu-content .mob-logo{
        line-height: 1.5;
    }

}

@media screen and (max-width:400px) {
    .logo a{ 

        font-size: 27px;
        top: 20px;
        margin-left: 0;
    }

    .logo a:focus{
        text-decoration: none;
        outline: none;
    }

    .hamburger{
        position: relative;
        width: 28px;
        height: 2.8px;
    }

    .hamburger-top,
    .hamburger-middle,
    .hamburger-bottom{
        left: 28px;
        top: 25px;
    }

    #menu{
        top: 0;
        background: none;
        position: absolute;
    }

    .menu-content{
        left: 0;
        margin-left: 15%;
    }

    .menu-content .mob-logo{
        line-height: 1.5;
    }

}

@media screen and (max-width:300px) {
    .logo a{ 

        font-size: 27px;
        top: 20px;
        margin-left: 17%;
    }

    .logo a:focus{
        text-decoration: none;
        outline: none;
    }

    .hamburger{
        position: relative;
        width: 28px;
        height: 2.8px;
    }

    .hamburger-top,
    .hamburger-middle,
    .hamburger-bottom{
        left: 28px;
        top: 25px;
    }

    #menu{
        top: 0;
        background: none;
        position: absolute;
    }

    .menu-content{
        left: 0;
        margin-left: 15%;
    }

    .menu-content .mob-logo{
        line-height: 1.5;
    }

}