
.desktop-hidden { display: none; }

@media screen and (max-width: 960px) {

    #layout { margin: 0; }

    #header .logo { margin: 10px 0 10px 10px !important; }
    #header .social { margin: 28px 10px 0 0 !important; }
    #breadcrumbs { margin: 1em 10px 0; }

    #content { margin: 0 10px; }

    .columns .columnVisual,
    .columns .columnProduct {
        margin: 10px 0;
        width: auto !important;
        float: none;
        }

    .columns .columnProduct {
        font-size: 24px;
        margin: 0 auto 1.5em;
        }

    .columns .columnProduct H4 { font-size: 24px; }

    .rating SMALL { font-size: .65rem; }

    .columns .columnContent {
        margin: 0 0 25px;
        }

    .columnProduct .purchase-button I { display: none; }

    .button { font-size: 4.75vw; }

    #footer {
        margin: 30px 0 0;
        position: inherit;
        left: auto;
        right: auto;
        bottom: auto;
        }

    .mobile-hidden { display: none; }
    .desktop-hidden { display: block; }

}

@media screen and (max-width: 767px) {

    #header .mmenu {
        font-size: .65em;
        margin: 0 25px 1em;
        }

    .columns .columnProduct {
        font-size: 7vw;
    }

}

@media (min-width: 768px) and (max-width: 1023px) {

    #header .mmenu {
        font-size: .65em;
        margin: 30px 10px 0 0;
        }

    .columns .columnProduct {
        max-width: 400px;
    }

}
