/* small only, tablet only */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        width: 100%;
    }

    #header .topright {
        padding: 0;
        clear: both;
    }

    #sidebar {
        padding: 0;
        clear: both;
    }

    .mobileaccountfoldoutbox {
        display: block !important;
    }

    .productfeat label {
        font-size: 100%;
        display: inline-block;
    }

    #productright .biginputbutton {
        margin: 10px 0;
    }

    #mainImageHolder {
        height: auto !important;
    }

    .get-the-look-strip {
        height: 240px;
    }

    #getthelook .imagechanger .changer-item, #getthelook .nonchanger .changer-item {
        padding-bottom: 240px;
    }

    #getthelook .imagechangernav {
        bottom: 260px;
    }

    #getthelook .imagechangerbox_bottomleft {
        bottom: 260px;
    }

    #getthelook .imagechangerbox_bottomright {
        bottom: 260px;
    }

    .sidebarfoldoutbox2 {
        display: block !important;
    }

    .tabs ul li ul {
        width: 100%;
        left: 0;
    }

    ul.tabnav li a {
        padding: 8px;
        font-size: 100%;
    }

    #calendar td a {
        font-size: 120%;
    }

    #breadcrumb a {
        display: inline-block;
        padding: 8px;
    }

    #highlights {
        flex-wrap: wrap;
    }

    #highlights div {
        margin: 0 0 20px 0;
    }

    .filters-popout {
        width: 45%;
    }

    .pageblock_callout blockquote {
        font-size: 200%;
    }
}

/* mobile & tablet only */
@media (max-width: 991px) {

    .usps.usp-slider {
        justify-content: center;
    }
    .usps.usp-slider .changer-item {
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.9s, transform 0.9s;
    }
    .usps.usp-slider .changer-item.active {
        display: flex;
        -webkit-animation: cssAnimationRoller 4s both;
        animation: cssAnimationRoller 4s both;
    }
    @keyframes cssAnimationRoller {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }
        25% {
            opacity: 1;
            transform: translateY(0);
        }
        78% {
            opacity: 1;
            transform: translateY(0);
        }
        100% {
            opacity: 0;
            transform: translateY(-10px);
        }
    }
    @-webkit-keyframes cssAnimationRoller {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }
        25% {
            opacity: 1;
            transform: translateY(0);
        }
        78% {
            opacity: 1;
            transform: translateY(0);
        }
        100% {
            opacity: 0;
            transform: translateY(-10px);
        }
    }
    .usps.usp-slider, .usps.usp-slider .changer-item {
        min-height: 40px;
    }

    .pageblock .imagechangerbox {
        max-width: 75%;
    }

    .imagechangerbox_central {
        top: 5%;
    }

    .pageblock .imagechangerbox_topleft {
        top: 30%;
        left: 5%;
    }

    .pageblock .imagechangerbox_topright {
        top: 30%;
        right: 5%;
    }

    .pageblock .imagechangerbox_bottomleft {
        bottom: 5%;
        left: 5%;
    }

    .pageblock .imagechangerbox_bottomright {
        bottom: 5%;
        right: 5%;
    }

    .imagechangerbox h1 {
        font-size: 150%;
    }

    .imagechangerbox p {
        font-size: 115%;
    }

    .imagechanger .owl-dots {
        display: none;
    }

    #footer ul {
        margin: 0;
        padding: 0;
    }

    #footer .footerbox li {
        list-style: none;
        margin: 0 0 1px 0;
    }

    #footer .footerbox li a {
        background: none;
        padding: 10px 15px;
        margin: 4px 0;
        font-size: 100%;
        color: var(--color-alt);
    }

    #footer .footerbox li a:hover, #footer .footerbox li a:active {
        background: url("/images/shopnav_arrow.png") no-repeat scroll 97% 50% var(--primary-color);
        background-size: 20px;
        color: var(--color-alt);
        text-decoration: none;
    }

    #footer .footerbox a {
        display: block;
    }

    #footer .footerbox a.inline {
        display: inline-block;
    }

    #footer .footerbox h5 {
        margin-top: 1em;
    }

    #footer .footerbox .container {
        padding: 0;
    }
    #footer .footerbox .foldout {
        clear: both;
    }
    #footer .footerbottom span:not(.cardicon):first-of-type {
        display: none;
    }

    #footer .foldout {
        border-bottom: 1px solid var(--secondary-color);
    }
    #footer .mobilefoldouttoggle {
        background: url(/images/expand_w.png) no-repeat right 15px center;
        background-size: 15px;
        color: var(--color-alt) !important;
        font-weight: bold;
    }
    #footer .mobilefoldouttoggle.foldoutopen {
        background: url("/images/collapse_w.png") no-repeat right 15px center;
        background-size: 15px;
    }

    #newsletterbar {
        padding: 0 15px;
    }
    #newsletterbar .textfield, #newsletterbar .inputbutton {
        padding: 8px 15px !important;
    }
    .brandscroller.static {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

/* not mobile */
@media (min-width: 768px) {
    .productframe.double {
        display: grid;
        grid-template-columns: 60% 40%;
        grid-template-rows: 100%;
    }

    .productframe.double .name {
        text-align: left;
        grid-column-start: 2;
    }

    .productframe.double .thumb {
        grid-column-start: 1;
    }

    .productframe.double .name .longdesc {
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .productframe.double .name a {
        display: block;
        font-size: 160%;
        margin-bottom: 10px;
    }

    .filters-bar .filters-left-container {
        width: 30%;
    }

    .filters-bar .filters-right-container {
        width: 70%;
    }

    #prodpics {
        float: left;
        width: 100%;
        position: sticky;
        top: 80px;
        bottom: 80px;
    }

    #prodpics #thumbs a.thumb {
        max-width: 100%;
        height: auto;
    }

    #prodpics .thumbsvertical-wrapper {
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #prodpics .thumbsvertical-wrapper .thumbsvertical {
        float: none !important;
        width: auto;
        margin: 0;
        padding: 0;
        clear: both;
        overflow: hidden;
        max-width: 100%;
        max-height: 495px;
    }

    #prodpics .thumbsvertical a {
        position: relative;
        margin: 8px 0 0 0 !important;
    }

    #prodpics .thumbsvertical ul, #prodpics .thumbsvertical ul li {
        margin: 0;
        padding: 0;
        width: 100%;
        list-style: none;
    }

    #prodpics .thumbsvertical ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

}

/* desktop, medium and large */
@media (min-width: 992px) {
    body:not(#home) header {
        position: initial;
    }

    .sidebarfoldoutbox, .sidebarfoldoutbox2, .mobilefoldoutbox, .mobileaccountfoldoutbox {
        display: block !important;
    }

    .productframe:not(.double) .thumbimagewrap:hover .thumb1 {
        display: none;
    }

    .productframe:not(.double) .thumbimagewrap:hover .thumb2 {
        display: block;
    }

    .tabs a {
        margin: 0 4px;
    }

    .financepopupbody .financecalculatorbody {
        padding: 0 15px 15px 15px;
    }
    .financecalculatorbody .greybox {
        padding-left: 30px;
        padding-right: 30px;
    }
    #checkordercolumn {
        padding-right: 30px !important;
    }
    #paymentcolumn {
        padding-left: 30px !important;
        border-left: 1px solid var(--border-color);
    }
    #stickywrap {
        position: relative;
        width: 100%;
        float: left;
    }
    #stickywrap #sidebar {
        position: sticky;
        top: 55px;
        padding: 0;
    }

    .pageblock_imagecarousel .pageblockheading {
        padding: 0 30px;
    }
    .imagecarousel {
        padding: 5px 30px;
    }
}

@media (max-width: 1199px) {
    .foldout.foldoutopendefault .foldoutopen {
        background: url("/images/collapse.png") no-repeat right 15px center;
        background-size: 16px;
    }
    .foldout.foldoutopendefault .foldoutbox {
        display: block;
    }
    .filters-bar.filters-fixed {
        display: flex;
        align-items: center;
    }
    .filters-bar.filters-fixed .filters-right-container {
        padding: 0;
    }
}

/* desktop, medium and large */
@media (min-width: 992px) and (max-width: 1199px) {
    #prodpics .thumbsvertical-wrapper .thumbsvertical {
        max-height: 440px;
    }
}

@media (min-width: 200px) and (max-width: 399px) {
    .optiongroup.bundlewizard .optioncontentinner .optionswatch {
        padding-bottom: 60px;
    }
    .optiongroup.bundlewizard .optioncontentinner .qtywrap {
        bottom: 20px;
        left: 22px;
        right: 22px;
        max-width: calc(100% - 44px);
    }
    .optiongroup.bundlewizard .optioncontentinner span.price {
        bottom: 70px;
        left: 22px;
        right: 22px;
        text-align: center;
    }
}

@media (min-width: 1600px) and (max-width: 2140px) {
    .optiongroup.bundlewizard .optioncontentinner .optionswatch {
        padding-bottom: 55px;
    }
    .optiongroup.bundlewizard .optioncontentinner .qtywrap {
        bottom: 4px;
        left: 22px;
        right: 22px;
    }
    .optiongroup.bundlewizard .optioncontentinner span.price {
        bottom: 56px;
        left: 22px;
        right: 22px;
        text-align: center;
    }
}

/* desktop, large and extra-large only */
@media (min-width: 1200px) {

    #header #basketsummary, #header #wishlist, #header #account, #header #currencies, #header #languages, #header #search, #header #location, #header .placeholder {
        padding-top: 19px;
        padding-bottom: 26px;
    }

    #header #contactus {
        padding-top: 25px;
    }

    #header #basketsummary span, #header #contactus span, #header #wishlist span, #header #account span, #header #currencies span, #header #languages span, #header #location span, #header #search span, #header .placeholder span {
        padding: 10px 15px;
    }

    #header .logo img {
        max-height: 42px;
        width: auto;
    }

    .imagechangerbox h1 {
        font-size: 300%;
    }

    .imagechangerbox p {
        font-size: 130%;
    }

    .tabs li.topleveltab {
        padding: 35px 0;
    }

    .tabs a {
        margin: 0 8px;
    }

    .tabs ul li ul {
        top: 86px;
    }

    .tabs ul li ul li {
        min-width: 190px;
    }

    .optionswatch {
        width: 24%;
    }

    #jquery-live-search > ul > li {
        width: 220px;
        height: 250px;
        clear: none;
        text-align: center;
        font-size: 90%;
    }

    #jquery-live-search > ul > li.small {
        height: auto;
        width: auto;
        padding: 15px 25px 15px 5px;
        text-align: left;
    }

    #jquery-live-search .quicksearchimage {
        width: 100%;
    }

    #jquery-live-search .quicksearchimage img {
        max-width: 80%;
        padding: 15px;
    }

    #jquery-live-search .quicksearchsummary {
        display: block;
    }

    #jquery-live-search .quicksearchtext {
        display: none;
    }

    .filters-bar {
        display: flex;
    }
    .filters-bar .filters-left-container {
        display: inline-flex;
        width: 100%;
    }
    .filters-bar .filters-right-container {
        width: initial;
        min-width: fit-content;
        margin-left: 20px;
        padding: 7px 0 0 0;
    }
    .filters-bar .filters-count {
        min-width: fit-content;
        padding: 11px 0 0 0;
    }
    .filters-bar .filters-bar-reset {
        display: inline-block;
        padding: 11px 0 10px 15px;
        text-decoration: underline;
        cursor: pointer;
        min-width: fit-content;
    }
    .filters-popout {
        display: block;
        position: relative;
        width: initial;
        max-width: initial;
        height: initial;
        z-index: 22;
    }
    .filters-bar .filters-toggle, .filters-popout .filters-popout-header, .filters-popout .filters-popout-footer, .filters-popout .filterby {
        display: none;
    }
    .filters-popout .filters-popout-body {
        width: 100%;
        padding: 0;
        overflow: visible;
        border-left: 1px solid var(--border-color);
    }
    .filters-popout .filters-popout-body form {
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .filters-popout .filters-popout-body .foldout {
        width: initial;
    }
    .filters-popout .filters-popout-body .foldout.showall {
        display: none;
    }
    .filters-popout .filters-popout-body .foldout .foldouttoggle {
        position: relative;
        width: initial;
        padding-right: 40px;
        border: 1px solid var(--border-color);
        border-left: none;
        text-transform: capitalize;
    }
    .filters-popout .filters-popout-body .foldout .foldouttoggle.foldoutopen:after {
        content: '';
        display: block;
        height: 1px;
        width: 100%;
        position: absolute;
        bottom: -1px;
        left: 0;
        background: var(--white);
        z-index: 4;
    }
    .filters-popout .filters-popout-body .foldout .foldoutbox {
        display: none;
        flex-wrap: wrap;
        justify-content: space-evenly;
        position: absolute;
        left: 0;
        right: 0;
        width: 100vw;
        max-width: 100%;
        max-height: 60vh;
        padding: 10px 0;
        margin: -1px 0 0 0;
        background: var(--white);
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        z-index: 3;
    }
    .filters-popout .filters-popout-body .foldout .productfeat label, .filters-popout .filters-popout-body .foldout .productfeat label.csschecklabel {
        display: inline-block;
        width: initial;
        margin: 6px 18px 6px 0;
    }
    .filters-popout .filters-popout-body .foldout .foldoutbox #pricerangeslider, .filters-popout .filters-popout-body .foldout .foldoutbox .searchspringslider {
        width: 100%;
    }
    .filters-popout .filters-popout-body .foldout .foldoutbox .filtersubmitwrap {
        width: 100%;
        margin: 15px 0;
        text-align: center;
    }
    .filters-popout .filters-popout-body .foldout .foldoutbox .filtersubmit {
        display: inline-block;
        padding: 5px 20px;
    }
    .filters-popout .filters-popout-body .foldout .foldoutbox .filterreset {
        margin-left: 10px;
    }
    .filters-popout .filters-popout-body .showallfilters {
        padding: 10px 0 10px 15px;
        text-decoration: underline;
        cursor: pointer;
    }
    .filters-popout-overlay {
        display: none !important;
    }
}

/* desktop, extra-large only */
@media (min-width: 1600px) {

    .tabs a {
        margin: 0 15px;
    }

    .optiongroup.swatchwizard.bundlewizard .optioncontent {
        min-width: 50%;
        max-width: 85%;
    }

    #jquery-live-search > ul > li {
        width: 300px;
        height: 310px;
        font-size: 100%;
    }

    .biginputbutton {
        padding: 16px 32px;
    }

    #availabletoviewpopup {
        width: 28%;
        right: -33%;
    }

}