@media only screen and (max-width: 1100px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    .button.but-menu {
        display: none;
    }

    .button.but-menu-mobile {
        display: block;
    }

    .navbar .navbar-left-col {
        width: 70%;
        float: left;
    }

    .navbar .navbar-right-col {
        width: 30%;
        float: left;
        text-align: right;
        display: none;
    }

    .button.but-menu-mobile {
        margin-right: 16px;
    }

    .button.but-menu-mobile:before {
        background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg version='1.1' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EHamburger%3C/title%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23242477'%3E%3Cpath d='m14.4 12.8c0.88366 0 1.6 0.71634 1.6 1.6s-0.71634 1.6-1.6 1.6h-12.8c-0.88366 0-1.6-0.71634-1.6-1.6 1.1383e-16 -0.88366 0.71634-1.6 1.6-1.6h12.8zm0-6.4c0.88366 0 1.6 0.71634 1.6 1.6s-0.71634 1.6-1.6 1.6h-12.8c-0.88366 0-1.6-0.71634-1.6-1.6-1.0822e-16 -0.88366 0.71634-1.6 1.6-1.6h12.8zm0-6.4c0.88366 5.972e-17 1.6 0.71634 1.6 1.6s-0.71634 1.6-1.6 1.6h-12.8c-0.88366 0-1.6-0.71634-1.6-1.6s0.71634-1.6 1.6-1.6h12.8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
        margin-top: 6px;
    }

    .button.but-menu,
    .button.but-menu-ham {
        background-color: #fff;
        width: 30px;
        float: left;
        margin-right: 0px;
    }

    ul.navi-primary {
        width: 100%;
        margin: 0;
        text-align: left;
        display: flex;
        align-items: center;
        overflow: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Hide scrollbar for Chrome, Safari and Opera */
    ul.navi-primary::-webkit-scrollbar {
        display: none;
    }

    .logo-lg {
        width: 160px;
        height: 25px;
        float: left;
        display: block;
        margin: 0px;
        background-position: center;
    }

    .button.but-menu span,
    .button.but-menu-ham span,
    .button.but-radio span,
    .button.but-store span,
    .button.but-help span,
    .button.but-sale span,
    .button.but-mail span,
    .button.but-search span,
    .button.but-external span {
        text-indent: -9999px;
        display: inline-flex;
    }

    .button.but-menu,
    .button.but-menu-ham,
    .button.but-radio,
    .button.but-store,
    .button.but-help,
    .button.but-sale,
    .button.but-mail,
    .button.but-search {
        padding: 0px;
    }

    .button.but-menu::before,
    .button.but-menu-ham::before,
    .button.but-radio::before,
    .button.but-store::before,
    .button.but-help::before,
    .button.but-sale::before,
    .button.but-mail::before,
    .button.but-search::before {
        margin: 5px 5px 0 0;
    }

    .main {
        display: block;
    }

    .main .main-left-col {
        width: 100%;
    }

    .main .main-right-col {
        width: 100%;
        padding-left: 0px;
    }

    .related-post .card {
        max-width: 48%;
    }
}

@media only screen and (max-width: 960px) {

    ul.navi-primary li a {
        font-size: 12px;
        padding: 5px 15px 5px 0;
        font-weight: 500;
    }


    .header-global h1 {
        font-size: 20px;
        line-height: 28px;
    }

    .header-global p {
        font-size: 16px;
        line-height: 26px;
    }

    article {
        padding: 20px;
    }

    article p {
        line-height: 24px;
    }

    .panel {
        max-height: 0;
    }

    /* FOOTER */
    footer {
        padding-top: 40px;
        margin-top: 50px;
        display: block;
    }

    footer.wrap {
        width: 100%;
    }

    footer .col-1 {
        border-bottom: 1px dashed rgba(21, 28, 36, .2);
        padding-bottom: 20px;
        width: 95%;
        margin: 0 auto 20px auto;
    }

    footer .break {
        margin: 0;
    }

    footer .social-box {
        width: 100%;
        margin-bottom: 0px;
    }
}

@media only screen and (max-width: 1100px) {

    /* Let left + right size naturally */
    .navbar .navbar-left-col {
        width: auto;
    }

    .navbar .navbar-right-col.mobile-only {
        width: auto;
        float: right;
        white-space: nowrap;
    }

    /* Keep original animation but align properly */
    .navbar-right-col.mobile-only .anim-btn {
        display: inline-flex;
        vertical-align: middle;
        margin-left: 6px;
        position: relative;
        top: -3px;
        width:auto;
        max-width: 89px;
        justify-content:center;
    }

}