@media only screen and (max-width: 800px) {
    html {
        font-size: 0.9rem;
    }
}

@media only screen and (max-width: 600px) {
    html {
        font-size: 0.8rem;
    }
}

/* -------------------------- */
@media only screen and (max-width: 1080px) {
    #main-menu li a {
        padding: 0 20px;
    }
}

@media only screen and (max-width: 1030px) {
    #c-search a {
        padding-right: 15px;
    }
}

@media only screen and (max-width: 900px) {
    #footer-content #sec-left {
        width: 100%;
    }

    #footer-content #sec-right {
        width: 100%;
        margin-top: 40px;
        padding-left: 0;
    }
}

@media only screen and (max-width: 750px) {
    #c-content .grid.gc-2 {
        grid-template-columns: 1fr;
    }

   #c-content .cmp .grid.gc-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (max-width: 700px) {
    #footer-menu {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media only screen and (max-width: 600px) {
    #c-top-bar {
        padding: 29px 0 25px 0;
    }

    #main {
        padding-top: 98px;
    }

    #site-logo {
        margin-right: 0;
        height: 44px;
    }

    #c-search a {
        height: 44px;
        padding-top: 11px;
        padding-bottom: 12px;
    }

    #c-user {
        padding-top: 7px;
    }
}

@media only screen and (max-width: 500px) {
    #footer-menu {
        grid-template-columns: 1fr 1fr;
    }

    #c-content .cmp .grid.gc-3 {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 400px) {
    #site-logo {
        height: 38px;
        margin-top: 3px;
    }

    #c-search a {
        height: 44px;
        padding-top: 11px;
        padding-bottom: 12px;
    }

    #footer-menu {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 370px) {
    #site-logo {
        height: 30px;
        margin-top: 6px;
    }
}

@media only screen and (max-width: 320px) {
    body {
        border-top: 3px solid red;
    }
}