@media only screen and (max-width: 640px) {
    .main-card {
        width: 90%;
        max-width: 480px;
        margin-top: 3px;
    }
    div.head {
        height: auto;
    }
    div.head img.logo {
        width: 100%;
        padding: 10px;
    }
    ul.navigation, ul.menu, ul.sub-menu {
        position: relative;
    }
    .navigation .navlink:not(:first-child)::after {
            content: "";
            background: #afca0b;
            position: absolute;
            bottom: 0;
            height: 2px;
            width: 80%;
            margin-left: 10%;
            align-self: center;
    }
    #scrollBack {
        bottom: 30px;
        right: 15px;
        padding: 12px 17px;
        border-radius: 50%;
    }
    .foot { width:100% }
}
@media only screen and (max-width: 319px) {
    .main-card {
        width: 100%;
    }
    .head {
        height: auto;
    }
}

@media only screen and (min-width: 320px) and (max-width: 550px) {
    
}