.cf:before, .cf:after {
    content: " ";
    display: table
}

.cf:after {
    clear: both
}

.cf {
    *zoom: 1
}

.p-0 {
    padding: 0 !important
}

.p-1 {
    padding: 0.5rem !important
}

.p-2 {
    padding: 1rem !important
}

.p-3 {
    padding: 2rem !important
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.px-1 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important
}

.px-2 {
    padding-left: 1rem !important;
    padding-right: 1rem !important
}

.px-3 {
    padding-left: 2rem !important;
    padding-right: 2rem !important
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.py-1 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important
}

.py-2 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important
}

.py-3 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important
}

.pl-0 {
    padding-left: 0 !important
}

.pl-1 {
    padding-left: 0.5rem !important
}

.pl-2 {
    padding-left: 1rem !important
}

.pl-3 {
    padding-left: 2rem !important
}

.pt-0 {
    padding-top: 0 !important
}

.pt-1 {
    padding-top: 0.5rem !important
}

.pt-2 {
    padding-top: 1rem !important
}

.pt-3 {
    padding-top: 2rem !important
}

.pr-0 {
    padding-right: 0 !important
}

.pr-1 {
    padding-right: 0.5rem !important
}

.pr-2 {
    padding-right: 1rem !important
}

.pr-3 {
    padding-right: 2rem !important
}

.pb-0 {
    padding-bottom: 0 !important
}

.pb-1 {
    padding-bottom: 0.5rem !important
}

.pb-2 {
    padding-bottom: 1rem !important
}

.pb-3 {
    padding-bottom: 2rem !important
}

.pl-xs-0 {
    padding-left: 0 !important
}

.pl-xs-1 {
    padding-left: 0 !important
}

.pl-xs-2 {
    padding-left: 0 !important
}

.pl-xs-3 {
    padding-left: 0 !important
}

@media (max-width: 768px) {
    .pl-xs-0 {
        padding-left: 0 !important
    }

    .pl-xs-1 {
        padding-left: 0.5rem !important
    }

    .pl-xs-2 {
        padding-left: 1rem !important
    }

    .pl-xs-3 {
        padding-left: 2rem !important
    }
}

.m-0 {
    margin: 0 !important
}

.m-1 {
    margin: 0.5rem !important
}

.m-2 {
    margin: 1rem !important
}

.m-3 {
    margin: 2rem !important
}

.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important
}

.mx-1 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important
}

.mx-2 {
    margin-left: 1rem !important;
    margin-right: 1rem !important
}

.mx-3 {
    margin-left: 2rem !important;
    margin-right: 2rem !important
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.my-1 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important
}

.my-2 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important
}

.my-3 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important
}

.ml-0 {
    margin-left: 0 !important
}

.ml-1 {
    margin-left: 0.5rem !important
}

.ml-2 {
    margin-left: 1rem !important
}

.ml-3 {
    margin-left: 2rem !important
}

.mt-0 {
    margin-top: 0 !important
}

.mt-1 {
    margin-top: 0.5rem !important
}

.mt-2 {
    margin-top: 1rem !important
}

.mt-3 {
    margin-top: 2rem !important
}

.mr-0 {
    margin-right: 0 !important
}

.mr-1 {
    margin-right: 0.5rem !important
}

.mr-2 {
    margin-right: 1rem !important
}

.mr-3 {
    margin-right: 2rem !important
}

.mb-0 {
    margin-bottom: 0 !important
}

.mb-1 {
    margin-bottom: 0.5rem !important
}

.mb-2 {
    margin-bottom: 1rem !important
}

.mb-3 {
    margin-bottom: 2rem !important
}

@font-face {
    font-family: "Clear Sans Thin";
    font-style: "normal";
    font-weight: 400;
    src: url("../fonts/ClearSans-Thin.eot?") format("eot"),url("../fonts/ClearSans-Thin.woff") format("woff"),url("../fonts/ClearSans-Thin.ttf") format("truetype"),url("../fonts/ClearSans-Thin.svg#Clear_Sans_Thin") format("svg")
}

@font-face {
    font-family: "Clear Sans Light";
    font-style: "normal";
    font-weight: 400;
    src: url("../fonts/ClearSans-Light.eot?") format("eot"),url("../fonts/ClearSans-Light.woff") format("woff"),url("../fonts/ClearSans-Light.ttf") format("truetype"),url("../fonts/ClearSans-Light.svg#Clear_Sans_Light") format("svg")
}

@font-face {
    font-family: "Clear Sans Regular";
    font-style: "normal";
    font-weight: 400;
    src: url("../fonts/ClearSans-Regular.eot?") format("eot"),url("../fonts/ClearSans-Regular.woff") format("woff"),url("../fonts/ClearSans-Regular.ttf") format("truetype"),url("../fonts/ClearSans-Regular.svg#Clear_Sans_Regular") format("svg")
}

@font-face {
    font-family: "Clear Sans Regular Italic";
    font-style: "normal";
    font-weight: 400;
    src: url("../fonts/ClearSans-Italic.eot?") format("eot"),url("../fonts/ClearSans-Italic.woff") format("woff"),url("../fonts/ClearSans-Italic.ttf") format("truetype"),url("../fonts/ClearSans-Italic.svg#Clear_Sans_Regular_Italic") format("svg")
}

@font-face {
    font-family: "Clear Sans Medium";
    font-style: "normal";
    font-weight: 400;
    src: url("../fonts/ClearSans-Medium.eot?") format("eot"),url("../fonts/ClearSans-Medium.woff") format("woff"),url("../fonts/ClearSans-Medium.ttf") format("truetype"),url("../fonts/ClearSans-Medium.svg#Clear_Sans_Medium") format("svg")
}

@font-face {
    font-family: "Clear Sans Medium Italic";
    font-style: "normal";
    font-weight: 400;
    src: url("../fonts/ClearSans-MediumItalic.eot?") format("eot"),url("../fonts/ClearSans-MediumItalic.woff") format("woff"),url("../fonts/ClearSans-MediumItalic.ttf") format("truetype"),url("../fonts/ClearSans-MediumItalic.svg#Clear_Sans_Medium_Italic") format("svg")
}

@font-face {
    font-family: "Clear Sans Bold";
    font-style: "normal";
    font-weight: 400;
    src: url("../fonts/ClearSans-Bold.eot?") format("eot"),url("../fonts/ClearSans-Bold.woff") format("woff"),url("../fonts/ClearSans-Bold.ttf") format("truetype"),url("../fonts/ClearSans-Bold.svg#Clear_Sans_Bold") format("svg")
}

@font-face {
    font-family: "Clear Sans Bold Italic";
    font-style: "normal";
    font-weight: 400;
    src: url("../fonts/ClearSans-BoldItalic.eot?") format("eot"),url("../fonts/ClearSans-BoldItalic.woff") format("woff"),url("../fonts/ClearSans-BoldItalic.ttf") format("truetype"),url("../fonts/ClearSans-BoldItalic.svg#Clear_Sans_Bold_Italic") format("svg")
}

.sd-banner .topic-block:first-child a {
    text-decoration: none
}

.sd-banner .topic-block:first-child .topic-block-title {
    margin: 0;
    background-color: #ED1B24;
    background-image: url("../images/shop-banner-trimmed-dark.png");
    background-size: cover;
    border: 0;
    padding: 2rem
}

@media screen and (min-width: 678px) {
    .sd-banner .topic-block:first-child .topic-block-title {
        position: relative;
        padding: 0
    }

        .sd-banner .topic-block:first-child .topic-block-title:before {
            display: block;
            content: "";
            width: 100%;
            padding-top: 42.16667%
        }

        .sd-banner .topic-block:first-child .topic-block-title > .content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0
        }
}

.sd-banner .topic-block:first-child .topic-block-title > div {
    z-index: 1
}

@media screen and (min-width: 678px) {
    .sd-banner .topic-block:first-child .topic-block-title > div {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }
}

.sd-banner .topic-block:first-child .topic-block-title > div h2, .sd-banner .topic-block:first-child .topic-block-title > div p {
    color: white;
    text-shadow: 0 0 2px rgba(0,0,0,0.17)
}

.sd-banner .topic-block:first-child .topic-block-title > div h2 {
    font-size: 3rem;
    font-weight: 600
}

.sd-banner .topic-block:first-child .topic-block-title > div p {
    font-size: 1.5rem;
    text-align: inherit
}

.sd-banner .topic-block:first-child .topic-block-title > div a {
    display: inline-block
}

.sd-banner .topic-block:first-child .topic-block-body {
    padding: 2rem;
    display: block;
    background-color: white;
    border: 1px solid #E4E4E4;
    border-top: none
}

    .sd-banner .topic-block:first-child .topic-block-body h4:first-child {
        color: #111;
        font-weight: normal;
        margin-bottom: 1.5rem
    }

    .sd-banner .topic-block:first-child .topic-block-body a {
        color: #ED1B24;
        border: 2px solid #ED1B24;
        padding: 0.55rem 1.125rem 0.45rem 1.125rem;
        margin: 0 0.275rem;
        line-height: 3
    }

    .sd-banner .topic-block:first-child .topic-block-body p.text-center {
        text-align: center
    }

.alert {
    border-style: solid;
    border-width: 0;
    border-top-width: 1px;
    padding: 1rem
}

.alert-neutral {
    border-color: #e0e0e0;
    background-color: #f9f9f9;
    color: #777
}

@media screen and (max-width: 1000px) {
    #toggle-menu:not(:checked) ~ .header-content {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        transform: translateX(100%)
    }
}

.menu-control {
    font-size: 1.5rem;
    font-family: "Clear Sans Light",Helvetica,Arial,sans-serif,monospace;
    color: #ED1B24;
    line-height: 40px;
    display: block;
    margin: 20px 0;
    padding: 0 20px
}

@media screen and (min-width: 1001px) {
    .menu-control {
        display: none
    }
}

.menu-open {
    float: right
}

.menu-close {
    position: absolute;
    margin: 30px 0;
    right: 1rem;
    z-index: 150
}

@media screen and (min-width: 481px) {
    .menu-close {
        right: 2rem
    }
}

@media screen and (min-width: 1001px) {
    .header {
        margin-top: 45px
    }
}

.header-logo + .search-box {
    margin-bottom: 2rem
}

@media screen and (min-width: 1001px) {
    .header-upper {
        background-color: #343435
    }
}

@media screen and (max-width: 1000px) {
    .header-upper {
        position: static
    }
}

.header-upper span.admin a {
    font-family: "Clear Sans Medium",Helvetica,Arial,sans-serif,monospace
}

@media all and (min-width: 1001px) {
    .header-upper span.admin li {
        color: #fff;
        background-color: #ED1B24
    }
}

.header-upper span.admin li:first-child {
    border-left: none
}

.header-upper span.admin li:hover {
    background-color: #f9f9f9
}

.header-upper span.admin + li {
    border-left: none !important
}

@media all and (min-width: 1001px) {
    .header-upper .header-links ul > li {
        color: #fff;
        border-left: 1px solid #777
    }

        .header-upper .header-links ul > li:last-child {
            border-right: 1px solid #777
        }

    .header-upper .header-links ul > span:last-child {
        border-right: 1px solid #777
    }
}

.header-upper .header-links li {
    margin: 0
}

    .header-upper .header-links li#topcartlink {
        padding: 0;
        background-color: transparent
    }

@media all and (min-width: 1001px) {
    .header-upper .header-links li#topcartlink {
        background-color: rgba(0,0,0,0.27)
    }
}

.header-upper .header-links li#topcartlink > a {
    padding-left: 12px;
    padding-right: 12px;
    background-position-x: 12px
}

    .header-upper .header-links li#topcartlink > a > span {
        padding-left: 20px
    }

@media all and (min-width: 1001px) {
    .header-upper .header-links li#topcartlink > a {
        padding-left: 18px;
        padding-right: 18px;
        background-position-x: 18px
    }

        .header-upper .header-links li#topcartlink > a:hover {
            background-color: #f9f9f9
        }
}

.header-upper .header-links li > a {
    padding-left: 10px;
    padding-right: 10px
}

@media all and (min-width: 1001px) {
    .header-upper .header-links li > a {
        padding-left: 16px;
        padding-right: 16px
    }

        .header-upper .header-links li > a:hover {
            background-color: #f9f9f9
        }
}

@media all and (max-width: 1000px) {
    .header-upper .header-links-wrapper {
        padding: 0
    }

        .header-upper .header-links-wrapper > div {
            margin-top: 5px;
            margin-bottom: 4px
        }
}

.header-upper .header-selectors-wrapper {
    border: 0
}

@media all and (max-width: 1000px) {
    .header-upper .header-selectors-wrapper {
        padding: 0
    }

        .header-upper .header-selectors-wrapper > div {
            margin-top: 7px;
            margin-bottom: 6px
        }
}

.header-upper .header-selectors-wrapper .language-selector {
    width: 100%
}

@media screen and (min-width: 1001px) {
    .header-upper .header-selectors-wrapper .language-list {
        white-space: nowrap
    }
}

.header-upper .header-selectors-wrapper .language-list .selected {
    position: relative
}

    .header-upper .header-selectors-wrapper .language-list .selected:after {
        content: "";
        position: absolute;
        width: 1.5rem;
        height: 1.5rem;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: rgba(0,0,0,0.27);
        z-index: -1;
        border-radius: 50%
    }

@media screen and (min-width: 1001px) {
    .header-upper .header-selectors-wrapper .language-list .selected:after {
        background-color: #777
    }
}

.header-upper .header-selectors-wrapper .language-list .hint-bubble {
    width: auto;
    line-height: 1.5;
    padding: 0.5rem 1rem
}

    .header-upper .header-selectors-wrapper .language-list .hint-bubble a {
        display: inline
    }

.header-fixed {
    border-bottom: 0
}

@media screen and (min-width: 1001px) {
    .header-fixed {
        position: fixed;
        top: -45px;
        left: 0;
        right: 0;
        z-index: 100
    }
}

@media screen and (max-width: 1000px) {
    .header-lower {
        padding-top: 10px;
        padding-bottom: 10px
    }
}

@media screen and (min-width: 1001px) {
    .header-lower > div:not(:first-child) {
        height: 40px;
        margin: 20px 0
    }
}

.header-lower > div:first-child {
    float: left;
    height: 60px;
    margin: 10px 0;
    overflow: hidden
}

.header-lower .header-menu {
    float: none;
    border: 0 !important;
    padding: 0
}

    .header-lower .header-menu li {
        padding: 0
    }

@media screen and (max-width: 1000px) {
    .header-lower .header-menu {
        width: 100%;
        max-width: 100%
    }
}

@media screen and (min-width: 1001px) {
    .header-lower .header-menu {
        color: #111;
        font-family: "Clear Sans Medium",Helvetica,Arial,sans-serif,monospace;
        width: auto !important;
        text-transform: uppercase;
        line-height: 40px;
        text-align: right;
        margin-bottom: 0 !important
    }
}

@media screen and (min-width: 1367px) {
    .header-lower .header-menu li {
        padding: 0 10px
    }
}

.header-lower .header-navigation {
    float: right
}

    .header-lower .header-navigation > div {
        float: left
    }

.header-lower .header-content .menu-title {
    display: none
}

@media screen and (max-width: 1000px) {
    .header-lower .header-content {
        z-index: 100;
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        overflow-y: auto;
        overflow-x: hidden;
        width: 550px;
        max-width: 85%;
        padding: 0 1rem;
        margin-left: 1rem;
        box-shadow: 0 0 1rem rgba(0,0,0,0.27);
        background-color: #f9f9f9;
        transform-origin: center right;
        transition: transform 0.2s ease-in-out
    }
}

@media screen and (max-width: 1000px) and (min-width: 481px) {
    .header-lower .header-content {
        padding: 0 2rem;
        margin-left: 2rem
    }
}

@media screen and (max-width: 1000px) {
    .header-lower .header-content .menu-title {
        display: block;
        text-align: left;
        font-weight: normal;
        line-height: 2;
        font-size: 1.25rem;
        font-family: "Clear Sans Medium",Helvetica,Arial,sans-serif,monospace;
        margin-top: 1rem;
        margin-bottom: 0.25rem
    }

    .header-lower .header-content .header-links, .header-lower .header-content .header-menu {
        margin: 0
    }
}

@media screen and (max-width: 1000px) and (max-width: 350px) {
    .header-lower .header-content .search-box .search-box-text {
        width: 125px
    }
}

@media screen and (max-width: 1000px) {
    .header-lower .header-content .header {
        position: static;
        width: 100%
    }

        .header-lower .header-content .header .language-selector {
            position: relative;
            margin: 10px auto;
            min-height: 80px;
            width: 100%;
            padding-right: 3.5rem;
            text-align: left
        }

            .header-lower .header-content .header .language-selector .language-list > li a {
                padding: 0.5rem
            }
}

@media screen and (max-width: 1000px) and (min-width: 321px) {
    .header-lower .header-content .header .language-selector .language-list > li a {
        padding: 1rem
    }
}

@media screen and (max-width: 1000px) and (min-width: 481px) {
    .header-lower .header-content .header .language-selector .language-list > li a {
        padding: 1.5rem
    }
}

@media screen and (max-width: 1000px) {
    .header-lower .header-content .header .language-selector .language-list > li.selected:after {
        width: 1.75rem;
        height: 1.75rem
    }
}

@media screen and (max-width: 1000px) and (min-width: 481px) {
    .header-lower .header-content .header .language-selector .language-list > li.selected:after {
        width: 2.25rem;
        height: 2.25rem
    }
}

@media screen and (max-width: 1000px) {
    .header-lower .header-content ul:not(.language-list) > li, .header-lower .header-content ul:not(.language-list) > span {
        display: block;
        text-align: left;
        width: 100% !important;
        max-width: 100% !important;
        background-color: transparent !important;
        margin: 0 auto !important;
        padding: 0 !important
    }

        .header-lower .header-content ul:not(.language-list) > li a, .header-lower .header-content ul:not(.language-list) > span a {
            display: block;
            font-size: 1.125rem;
            text-transform: none;
            line-height: 2;
            padding: 0.334rem 0.667rem !important
        }

            .header-lower .header-content ul:not(.language-list) > li a:hover, .header-lower .header-content ul:not(.language-list) > span a:hover {
                color: #ED1B24
            }

        .header-lower .header-content ul:not(.language-list) > li .cart-label, .header-lower .header-content ul:not(.language-list) > li .cart-qty, .header-lower .header-content ul:not(.language-list) > span .cart-label, .header-lower .header-content ul:not(.language-list) > span .cart-qty {
            font-size: 1.125rem;
            text-transform: none;
            line-height: 1
        }

    .header-lower .header-content ul:not(.language-list) #topcartlink .ico-cart {
        background: none
    }

        .header-lower .header-content ul:not(.language-list) #topcartlink .ico-cart > span {
            line-height: 0;
            padding: 0
        }
}

.header-lower .main-menu-item {
    position: relative
}

    .header-lower .main-menu-item:after {
        content: "";
        opacity: 0;
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: -5px;
        height: 2px;
        background-color: #777;
        transition: opacity 0.2s ease-in-out
    }

    .header-lower .main-menu-item:hover:after {
        opacity: 0.25
    }

    .header-lower .main-menu-item.active:after {
        opacity: 1;
        height: 5px;
        background-color: #ED1B24
    }

@media screen and (min-width: 1000px) {
    .header-lower .search-box {
        margin-left: 0.5rem !important
    }
}

@media screen and (min-width: 1367px) {
    .header-lower .search-box {
        margin-left: 2rem !important
    }
}

.header-lower .search-box input.search-box-text {
    background: #f9f9f9
}

@media screen and (min-width: 1000px) {
    .header-lower .search-box input.search-box-text {
        width: 120px
    }
}

@media screen and (min-width: 1367px) {
    .header-lower .search-box input.search-box-text {
        width: 180px
    }
}

.header-lower .search-box .search-box-button {
    text-transform: capitalize
}

.category-page .page-title .product-selectors {
    padding: 0;
    margin-bottom: 0;
    margin-right: -5px;
    border: 0
}

@media screen and (min-width: 1000px) {
    .category-page .page-title .product-selectors {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 0
    }
}

.category-page .page-title .product-selectors .product-sorting {
    line-height: 1.5
}

    .category-page .page-title .product-selectors .product-sorting > span {
        color: #111;
        font-family: "Clear Sans Medium",Helvetica,Arial,sans-serif,monospace;
        font-size: 1.125rem;
        line-height: 1.33333334
    }

    .category-page .page-title .product-selectors .product-sorting select {
        margin-top: 0.5rem;
        font-size: 1rem;
        line-height: 1.5;
        margin-right: 0
    }

@media screen and (min-width: 1000px) {
    .block .title {
        padding-top: 0;
        padding-bottom: 2rem
    }
}

.block h1.title {
    font-size: 24px;
    line-height: 1.5;
    font-family: "Clear Sans Medium",Helvetica,Arial,sans-serif,monospace;
    font-weight: normal
}

.block .listbox {
    padding-left: 0;
    padding-right: 0
}

.block .list li {
    padding-left: 20px;
    position: relative
}

    .block .list li.active > a:before {
        background-color: #ED1B24
    }

    .block .list li a:before {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        left: -15px
    }

.block-content {
    background-color: #f9f9f9
}

.mock-table {
    text-align: left
}

.mock-header {
    border: 1px solid #E4E4E4;
    font-family: "Clear Sans Medium",Helvetica,Arial,sans-serif,monospace;
    background-color: #f9f9f9
}

.mock-header {
    *zoom: 1
}

    .mock-header:before, .mock-header:after {
        content: "";
        display: table
    }

    .mock-header:after {
        clear: both
    }

    .mock-header .mock-row {
        border-bottom: 0
    }

.mock-body .mock-cell {
    text-overflow: ellipsis;
    overflow: hidden
}

.mock-body:not(:last-child) .mock-row:last-child {
    border-bottom: none
}

.mock-row {
    width: 100% !important;
    max-width: 100% !important;
    border-bottom: 1px solid #E4E4E4;
    transition: background-color 0.2s ease-in-out
}

@media screen and (min-width: 768px) {
    .mock-row {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}

@media screen and (max-width: 768px) {
    .mock-row {
        border-bottom: 1px solid #AAA;
    }
}

.mock-row .mock-row {
    flex-grow: 0;
    flex-shrink: 0;
    border-bottom: none
}

.mock-row-hidden {
    display: none
}

@media screen and (min-width: 768px) {
    .mock-row-section {
        display: flex;
        flex-direction: row;
        align-items: center
    }
}

.mock-row:hover {
    background-color: #f9f9f9
}

.mock-row-warning {
    position: relative
}

    .mock-row-warning:before {
        content: "";
        position: absolute;
        left: 0;
        width: 2px;
        top: 25%;
        bottom: 25%;
        background-color: #ED1B24
    }

    .mock-row-warning .due-date {
        color: #ED1B24 !important
    }

.mock-cell {
    flex-grow: 0;
    flex-shrink: 0;
    padding: 0.667rem 1rem;
    float: left
}

    .mock-cell a, .mock-cell .clickable {
        cursor: pointer
    }

        .mock-cell a:hover, .mock-cell .clickable:hover {
            color: #ED1B24
        }

    .mock-cell button {
        max-width: 100%;
        min-width: 25px !important
    }

    .mock-cell input {
        max-width: 100%
    }

        .mock-cell input[type="button"] {
            text-transform: capitalize;
            min-width: 42px !important
        }

        .mock-cell input[type="text"] {
            height: 40px
        }

    .mock-cell small {
        position: absolute;
        right: 1rem;
        bottom: 0
    }

    .mock-cell .repeat-order {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 0
    }

        .mock-cell .repeat-order.clickable {
            margin-top: -0.125em;
            color: #ED1B24
        }

            .mock-cell .repeat-order.clickable:hover {
                color: #111
            }

        .mock-cell .repeat-order.disabled {
            color: inherit
        }

    .mock-cell .align-right {
        position: absolute;
        right: 0.667rem;
        white-space: nowrap
    }

    .mock-cell:not(.muted) {
        color: #111
    }

    .mock-cell.action-buttons {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap
    }

        .mock-cell.action-buttons button, .mock-cell.action-buttons input[type="button"] {
            flex-grow: 1;
            overflow: hidden;
            text-overflow: ellipsis
        }

            .mock-cell.action-buttons button.add-to-wishlist-button, .mock-cell.action-buttons input[type="button"].add-to-wishlist-button {
                flex-grow: 0
            }

            .mock-cell.action-buttons button:not(:first-child), .mock-cell.action-buttons input[type="button"]:not(:first-child) {
                margin-left: 15px
            }

    .mock-cell .decrease-order {
        left: 15px
    }

.hint {
    position: relative
}

    .hint:hover .hint-bubble {
        opacity: 1;
        pointer-events: all
    }

    .hint span, .hint a {
        cursor: pointer;
        position: relative
    }

        .hint span:after, .hint a:after {
            content: "";
            display: block;
            border-bottom: 1px dashed #ED1B24;
            position: absolute;
            left: -0.125em;
            right: 0;
            bottom: -1px
        }

        .hint span .hint-bubble, .hint a .hint-bubble {
            margin-top: -1em
        }

.hint-bubble {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    font-size: 1rem !important;
    padding: 1rem;
    z-index: 100;
    width: 250px;
    max-width: 85vw;
    border-radius: 4px;
    cursor: default;
    box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.26)
}

    .hint-bubble.inverse {
        color: #111;
        background-color: #fff;
        border: 1px solid #E4E4E4
    }

        .hint-bubble.inverse:after {
            z-index: -1;
            background-color: #fff;
            border-bottom: 1px solid #E4E4E4;
            border-right: 1px solid #E4E4E4
        }

    .hint-bubble.left {
        top: 50%;
        left: -1rem;
        -webkit-transform: translate(-100%, -50%);
        -moz-transform: translate(-100%, -50%);
        -ms-transform: translate(-100%, -50%);
        transform: translate(-100%, -50%);
        border-bottom-right-radius: 0px
    }

        .hint-bubble.left:after {
            top: 50%;
            right: 0;
            -webkit-transform: translate(50%, -50%) rotate(-45deg);
            -moz-transform: translate(50%, -50%) rotate(-45deg);
            -ms-transform: translate(50%, -50%) rotate(-45deg);
            transform: translate(50%, -50%) rotate(-45deg)
        }

    .hint-bubble.bottom {
        left: 50%;
        -webkit-transform: translate(-50%, 0);
        -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0)
    }

        .hint-bubble.bottom:after {
            top: 0;
            left: 50%;
            bottom: auto !important;
            -webkit-transform: translate(-50%, -50%) rotate(45deg);
            -moz-transform: translate(-50%, -50%) rotate(45deg);
            -ms-transform: translate(-50%, -50%) rotate(45deg);
            transform: translate(-50%, -50%) rotate(45deg)
        }

    .hint-bubble.right {
        margin-top: 0 !important;
        top: 50%;
        left: 2rem;
        -webkit-transform: translate(0%, -50%);
        -moz-transform: translate(0%, -50%);
        -ms-transform: translate(0%, -50%);
        transform: translate(0%, -50%);
        border-bottom-right-radius: 0px
    }

        .hint-bubble.right:after {
            top: 50%;
            left: 0;
            -webkit-transform: translate(-50%, -50%) rotate(135deg);
            -moz-transform: translate(-50%, -50%) rotate(135deg);
            -ms-transform: translate(-50%, -50%) rotate(135deg);
            transform: translate(-50%, -50%) rotate(135deg)
        }

    .hint-bubble:not(.right):not(.left):not(.bottom) {
        top: 0;
        left: 50%;
        -webkit-transform: translate(-50%, -100%);
        -moz-transform: translate(-50%, -100%);
        -ms-transform: translate(-50%, -100%);
        transform: translate(-50%, -100%)
    }

        .hint-bubble:not(.right):not(.left):not(.bottom):after {
            left: 50%;
            -webkit-transform: translate(-50%, 50%) rotate(45deg);
            -moz-transform: translate(-50%, 50%) rotate(45deg);
            -ms-transform: translate(-50%, 50%) rotate(45deg);
            transform: translate(-50%, 50%) rotate(45deg)
        }

    .hint-bubble:not(.inverse) {
        color: #fff;
        background-color: #111
    }

        .hint-bubble:not(.inverse):after {
            background-color: #111;
            box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.26)
        }

    .hint-bubble a:after {
        display: none
    }

    .hint-bubble table td {
        padding: 0.25em 0.5em;
        border-bottom: 1px solid #777
    }

        .hint-bubble table td:not(:last-child) {
            border-right: 1px solid #777
        }

    .hint-bubble table img {
        height: 16px;
        width: auto;
        margin: 0.5rem;
        margin-top: 0.75rem
    }

    .hint-bubble small {
        position: static
    }

    .hint-bubble:after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0 !important;
        -webkit-transform-origin: center;
        -moz-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center;
        width: 1rem;
        height: 1rem
    }

@media screen and (min-width: 1000px) {
    .side-2 {
        width: 15%;
        padding-right: 15px
    }
}

@media screen and (min-width: 1000px) {
    .center-2 {
        width: 85%;
        padding-left: 15px
    }
}

.page-title + .page-body > .search-input form {
    position: relative
}

.page-title + .page-body > .search-input form {
    *zoom: 1
}

    .page-title + .page-body > .search-input form:before, .page-title + .page-body > .search-input form:after {
        content: "";
        display: table
    }

    .page-title + .page-body > .search-input form:after {
        clear: both
    }

.page-title + .page-body > .search-input .fieldset {
    margin-bottom: 0;
    margin-left: auto
}

    .page-title + .page-body > .search-input .fieldset input {
        background-color: #f9f9f9
    }

        .page-title + .page-body > .search-input .fieldset input.search-text {
            width: 100%;
            padding-right: 155px
        }

    .page-title + .page-body > .search-input .fieldset label {
        display: none
    }

    .page-title + .page-body > .search-input .fieldset .form-fields {
        padding: 0;
        border-top: 0
    }

    .page-title + .page-body > .search-input .fieldset .inputs {
        margin: 0
    }

.page-title + .page-body > .search-input .buttons {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0
}

    .page-title + .page-body > .search-input .buttons input {
        padding-top: 0;
        padding-bottom: 0
    }

        .page-title + .page-body > .search-input .buttons input:first-child:last-child {
            width: 150px
        }

@media screen and (max-width: 1000px) {
    .page-title + .page-body > .search-input .buttons input {
        line-height: 36px
    }
}

@media screen and (min-width: 1001px) {
    .page-title + .page-body > .search-input .buttons input {
        line-height: 40px
    }
}

.html-search-page .header .search-box {
    display: none
}

.add-to-wishlist-button.active {
    background-image: url("../images/wishlist-button-filled.png")
}

.landing-layout {
    margin: 0;
    background-color: #ED1B24;
    background-image: url("../images/shop-banner.jpeg");
    background-size: cover;
    background-position: center;
    border: 0;
    padding: 2rem 0
}

    .landing-layout .modal-dialog .modal-header {
        text-align: center
    }

    .landing-layout .modal-dialog .modal-title {
        margin-bottom: 1.75rem;
        position: relative
    }

        .landing-layout .modal-dialog .modal-title:after {
            content: "";
            position: absolute;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            bottom: -0.5rem;
            width: 3rem;
            height: 0.25rem;
            background-color: #ED1B24
        }

@media screen and (min-width: 1200px) {
    .landing-layout {
        position: relative
    }

        .landing-layout:before {
            display: block;
            content: "";
            width: 100%;
            padding-top: 37.5%
        }

        .landing-layout > .content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0
        }
}

.landing-content .customer-blocks {
    margin: 0
}

    .landing-content .customer-blocks .title {
        text-align: center
    }

    .landing-content .customer-blocks .buttons {
        margin-bottom: 0;
        padding-top: 2rem;
        padding-bottom: 0;
        text-align: center
    }

    .landing-content .customer-blocks .inputs {
        text-align: center
    }

        .landing-content .customer-blocks .inputs input {
            width: 400px
        }

@media screen and (min-width: 1200px) {
    .landing-content .customer-blocks .fieldset {
        margin: 0
    }

    .landing-content .customer-blocks .inputs label {
        width: 100px
    }

    .landing-content .customer-blocks .inputs input {
        width: 400px
    }

    .landing-content .customer-blocks .inputs.reversed {
        padding-left: 80px
    }

        .landing-content .customer-blocks .inputs.reversed input {
            width: 20px;
            margin-right: 10px
        }

        .landing-content .customer-blocks .inputs.reversed label {
            margin: 0;
            width: 400px;
            text-align: left
        }

    .landing-content .customer-blocks .inputs:last-of-type {
        margin-bottom: 0
    }
}

.landing-content .register-block .text {
    margin-bottom: 0
}

@media screen and (max-width: 1366px) {
    .landing-content .register-block {
        margin-top: 3rem
    }
}

@media screen and (min-width: 1200px) {
    .landing-content {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }
}

.modal-dialog {
    background-color: #fff;
    padding: 3rem
}

    .modal-dialog .modal-title {
        font-family: "Clear Sans Thin",Helvetica,Arial,sans-serif,monospace;
        font-size: 2rem;
        color: #343435
    }

@media screen and (min-width: 1000px) {
    .modal-dialog .modal-title {
        font-size: 3rem
    }
}

.modal-dialog .modal-header {
    margin-bottom: 2rem
}

.breadcrumb {
    border-top: 1px solid #E4E4E4;
    border-bottom: 1px solid #E4E4E4
}

.page-title {
    min-height: 1rem;
    position: relative;
    border: 0
}

@media screen and (max-width: 999px) {
    .page-title {
        margin-bottom: 1rem !important
    }
}

.page-title h1 {
    font-size: 24px;
    line-height: 1.5;
    font-family: "Clear Sans Medium",Helvetica,Arial,sans-serif,monospace;
    font-weight: normal
}

@media screen and (max-width: 999px) {
    .page-title h1 {
        margin-bottom: 1rem
    }
}

.page-title h1 small {
    font-size: 50%;
    position: absolute;
    color: #777
}

.previous-orders label {
    cursor: pointer
}

.previous-orders .list-small, .previous-orders .list-expanded, .previous-orders .show-all, .previous-orders .hide-all {
    display: none
}

.previous-orders .list-expanded {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 265px;
    margin-top: -10px;
    border-bottom: 1px solid #ddd
}

    .previous-orders .list-expanded > li:first-child {
        margin-top: 10px
    }

.previous-orders #toggle-previous-order-visibility:checked ~ .list-expanded {
    display: block
}

.previous-orders #toggle-previous-order-visibility:checked ~ .actions-list .hide-all {
    display: block
}

.previous-orders #toggle-previous-order-visibility:not(:checked) ~ .list-small {
    display: block
}

.previous-orders #toggle-previous-order-visibility:not(:checked) ~ .actions-list .show-all {
    display: block
}

.previous-orders .actions-list .view-all {
    font-size: 1rem;
    color: #ED1B24;
    padding: 0
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.27);
    z-index: 1000
}

.popup-control:not(:checked) ~ .popup {
    display: none
}

.popup-dialog {
    max-height: 85%;
    overflow-y: auto;
    background-color: #fff;
    padding: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.popup .close {
    position: absolute;
    top: 2rem;
    right: 2rem
}

    .popup .close ~ .topic-block .topic-block-title {
        text-align: left
    }

.btn {
    border: 0;
    padding: 0.667rem 1.667rem;
    text-align: center;
    text-decoration: none
}

.btn-link {
    color: #D20021;
    background-color: transparent;
    border: 0;
    padding: 0.667rem 1.667rem;
    text-align: center;
    text-decoration: none
}

    .btn-link:not(:hover) {
        color: #ED1B24
    }

.btn-primary {
    color: #fff;
    background-color: #D20021;
    border: 0;
    padding: 0.667rem 1.667rem;
    text-align: center;
    text-decoration: none
}

    .btn-primary:not(:hover) {
        background-color: #ED1B24
    }

.btn-primary-inverse {
    color: #D20021;
    background-color: #fff;
    border: 0;
    padding: 0.667rem 1.667rem;
    text-align: center;
    text-decoration: none;
    font-variant: small-caps;
    text-transform: uppercase
}

    .btn-primary-inverse:not(:hover) {
        color: #ED1B24
    }

    .btn-muted {
        background-color: #D4D4D4;
        border: 0;
        padding: 0.667rem 1.667rem;
        text-align: center;
        text-decoration: none
    }

    .btn-muted:not(:hover) {
        background-color: #E4E4E4
    }

    .shopping-cart-flexcontainer {
        display: flex;
        gap: 15px;
    }

@media screen and (max-width: 1000px) {
    .shopping-cart-flexcontainer {
        display: block;
    }

    .shopping-cart-flex-center-items {
        display: flex;
        align-items: center;
    }
}

    .shopping-cart-overview {
        width: 100%;
    }

    .shopping-cart-total {
        max-width: 10rem;
    }

@media screen and (max-width: 1000px) {
    .shopping-cart-total {
        max-width: none;
    }
}

    .shopping-cart-discount {
        display: flex;
        gap: 5px
    }

@media screen and (max-width: 1000px) {
    .shopping-cart-discount {
        display: block;
        text-align: center;
    }
}

.btn-block {
    display: block;
    width: 100%
}

    .btn-favorite {
        display: inline-block;
        font-size: 0;
        border: 0;
        background-image: url("../images/wishlist-button.png");
        background-position: center;
        background-repeat: no-repeat
    }

        .btn-favorite.active {
            background-image: url("../images/wishlist-button-filled.png")
        }

    .item-box .product-box-add-to-cart-button {
        border: 0;
        text-transform: none
    }

        .item-box .product-box-add-to-cart-button img {
            margin-top: 4px
        }

    .html-shopping-cart-page .side-2 {
        margin-bottom: 0
    }

    .html-checkout-page .html-checkout-page-hidden {
        display: none !important
    }

    @media screen and (max-width: 767px) {
        .html-checkout-page .html-checkout-page-hidden-xs {
            display: none !important
        }
    }

    .html-checkout-page .field-validation-error {
        text-align: left
    }

    .html-checkout-page .breadcrumb {
        height: 40px;
        box-sizing: border-box
    }

    .html-checkout-page .inputs {
        text-align: left
    }

        .html-checkout-page .inputs label {
            font-family: "Clear Sans Medium",Helvetica,Arial,sans-serif,monospace;
            color: #777;
            text-align: left
        }

        .html-checkout-page .inputs input, .html-checkout-page .inputs textarea {
            width: 400px;
            max-width: 100%;
            background-color: #f9f9f9;
            height: 36px;
            border: 1px solid #E4E4E4;
            padding: 8px;
            vertical-align: middle;
            color: #777
        }

            .html-checkout-page .inputs input:focus, .html-checkout-page .inputs textarea:focus {
                color: #111
            }

    .html-checkout-page label {
        font-weight: normal;
        font-family: "Clear Sans Bold",Helvetica,Arial,sans-serif,monospace;
        color: #777;
        text-align: left
    }

    .html-checkout-page .total-info .cart-total .cart-total-right > div {
        text-align: right !important
    }

    .opc {
        position: relative
    }

        .opc .allow:not(.active) .step-title .number {
            color: #777;
            background-color: transparent !important
        }

        .opc .step-title {
            position: absolute;
            height: 40px;
            top: -40px;
            background-color: transparent !important
        }

    @media screen and (min-width: 768px) {
        .opc .step-title {
            padding-left: 40px;
            padding-right: 40px
        }
    }

    .opc .step-title:after {
        position: absolute;
        left: 0;
        right: 0;
        background-color: #ED1B24;
        bottom: -3px;
        height: 3px;
        z-index: 50
    }

    .opc .step-title .number {
        color: #777;
        height: 30px;
        min-height: 30px;
        max-height: 30px;
        line-height: 26px;
        width: 30px;
        min-width: 30px;
        max-width: 30px;
        margin-top: 5px;
        margin-bottom: 5px;
        border: 1px solid transparent;
        border-radius: 50%;
        padding: 0;
        transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out
    }

    @media screen and (max-width: 767px) {
        .opc .step-title .number {
            display: block;
            float: none;
            margin-left: auto;
            margin-right: auto
        }
    }

    @media screen and (min-width: 768px) {
        .opc .step-title .number {
            position: absolute;
            left: 0;
            margin-left: 5px;
            margin-right: 5px
        }
    }

    .opc .step-title .title {
        float: none;
        margin: 0 auto;
        color: #111 !important;
        line-height: 40px;
        padding: 0;
        word-break: keep-all;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden
    }

    .opc .tab-section.active .step-title {
        overflow: visible
    }

        .opc .tab-section.active .step-title:after {
            content: ""
        }

        .opc .tab-section.active .step-title .number {
            color: #ED1B24;
            background-color: #fff !important;
            border-color: #E4E4E4
        }

    .opc .tab-section.active ~ .tab-section .step-title .number {
        background-color: #fff !important;
        border-color: #E4E4E4
    }

    .opc .tab-section.allow .step-title .number {
        border-color: #E4E4E4
    }

    .opc .tab-section:first-child .step-title {
        border-left: 1px solid #E4E4E4;
        border-right: 1px solid #E4E4E4
    }

    .opc .tab-section:first-child ~ .tab-section .step-title {
        border-right: 1px solid #E4E4E4
    }

    .opc .step .buttons {
        text-align: left
    }

    @media screen and (max-width: 767px) {
        .opc .step .buttons .btn {
            display: block;
            width: 100%
        }
    }

    .edit-address .inputs input, .edit-address .inputs textarea, .edit-address .inputs select {
        background-color: #fff
    }

    .opc .tab-section:nth-child(1) .step-title {
        left: 0%;
        width: 25%
    }

    .opc .tab-section:nth-child(2) .step-title {
        left: 25%;
        width: 25%
    }

    .opc .tab-section:nth-child(3) .step-title {
        left: 50%;
        width: 25%
    }

    .opc .tab-section:nth-child(4) .step-title {
        left: 75%;
        width: 25%
    }

    #opc-orderInfo #co-orderInfo-form {
        position: relative
    }

        #opc-orderInfo #co-orderInfo-form .validation-summary-errors > ul > li:first-child:last-child {
            position: absolute;
            bottom: 0;
            transform: translateY(50%);
            white-space: nowrap;
            overflow: hidden;
            max-width: 100%;
            text-overflow: ellipsis
        }

    .notification {
        opacity: 0;
        pointer-events: none;
        position: fixed;
        margin: 1rem;
        padding: 1rem;
        box-sizing: border-box;
        color: #fff;
        width: 320px;
        max-width: 100%;
        height: auto;
        max-height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 1050;
        box-shadow: rgba(0,0,0,0.27) 0 0 1rem;
        min-height: 1rem;
        background-size: 2rem;
        background-position: 0.75rem center;
        background-repeat: no-repeat
    }

        .notification .content {
            max-height: 100%;
            padding-right: 1.5rem
        }

        .notification .btn {
            padding: 0.3334rem 0.83334rem 0.375rem
        }

        .notification .btn-link {
            color: #f9f9f9
        }

            .notification .btn-link:hover, .notification .btn-link :focus, .notification .btn-link :active {
                color: #fff
            }

        .notification .btn-primary {
            background-color: #fff;
            color: #111
        }

            .notification .btn-primary:hover, .notification .btn-primary :focus, .notification .btn-primary :active {
                color: #ED1B24
            }

        .notification .close {
            cursor: pointer;
            position: absolute;
            line-height: 0.875;
            font-size: 1.25rem;
            right: 0.95rem;
            top: 1rem
        }

        .notification.success {
            background-color: #f9f9f9;
            color: #111;
            opacity: 1;
            pointer-events: all;
            padding-left: 3.5rem;
            background-image: url("../images/notification-success.png")
        }

            .notification.success .close {
                color: #111
            }

        .notification.error {
            background-color: #f9f9f9;
            color: #111;
            opacity: 1;
            pointer-events: all;
            padding-left: 3.5rem;
            background-image: url("../images/notification-error.png")
        }

            .notification.error .close {
                color: #111
            }

        .notification.default {
            background-color: #ED1B24;
            opacity: 1;
            pointer-events: all
        }

        .notification.plain {
            background-color: #f9f9f9;
            color: #111;
            opacity: 1;
            pointer-events: all
        }

            .notification.plain .close {
                color: #111
            }

        .notification.ajax-loading-block-window {
            background-position: 1rem center;
            padding-left: 4rem;
            top: auto;
            left: auto
        }

            .notification.ajax-loading-block-window[style="display: block;"] ~ .notification {
                display: none !important
            }

    .order-details-page .section.products {
        padding: 0 10px
    }

    .order-details-page .section.info {
        margin: 0 -5px
    }

    .product-details-page .page-title {
        border-bottom: 1px solid #ddd;
        padding-right: 2rem
    }

        .product-details-page .page-title .btn-favorite {
            position: absolute;
            right: 0;
            width: 2rem;
            height: 2rem;
            box-sizing: border-box
        }

    .product-details-page .product-essential {
        border: 0
    }

    .product-details-page .prices {
        background-color: #f9f9f9
    }

    @media screen and (min-width: 768px) {
        .product-details-page .prices {
            border: 1px solid #E4E4E4;
            border-right: 0;
            box-sizing: border-box
        }
    }

    .product-details-page .add-to-cart input {
        height: 48px;
        border-right: 0
    }

    @media screen and (min-width: 768px) {
        .product-details-page .add-to-cart input {
            border-left: 0
        }
    }

    .product-details-page .add-to-cart .btn-primary {
        border: 1px solid transparent
    }

    .product-details-page .gallery {
        width: 100%
    }

    .sales-rep-list-page .customers-items .mock-cell:first-of-type img {
        height: 1.2em;
        width: auto;
        margin-bottom: 0.1rem;
        margin-top: 0.3rem
    }

    .sales-rep-list-page .search-input input {
        width: 100%
    }

    .masonry-item {
        border: 1px solid #E4E4E4;
        padding: 1.75rem
    }

        .masonry-item img {
            max-width: 100%
        }

    .news-list-homepage h2 {
        text-align: center;
        font-family: "Clear Sans Medium",Helvetica,Arial,sans-serif,monospace;
        font-size: 2rem;
        color: #343435
    }

    .news-item-page img {
        display: block;
        max-width: 100%;
        height: auto
    }

    @media screen and (max-width: 760px) {
        .news-item-soudal {
            position: relative !important;
            top: auto !important;
            left: auto !important;
            width: auto !important;
            margin-bottom: 12px
        }

        .news-items-soudal {
            height: auto !important
        }
    }

    .contact-page .inputs input[type="text"], .contact-page .inputs input[type="password"], .contact-page .inputs select, .contact-page .inputs textarea {
        width: 100%
    }

    @media screen and (max-width: 767px) {
        .invoice-items .mock-table .mock-header {
            display: none
        }

        .invoice-items .mock-table .mock-row {
            border: 1px solid #E4E4E4
        }

        .invoice-items .mock-table b {
            white-space: nowrap;
            text-overflow: ellipsis
        }
    }

    html, body {
        font-family: "Clear Sans Regular",Helvetica,Arial,sans-serif,monospace !important
    }

    input.invalid {
        border-color: #ED1B24
    }

    .orderInfo .field-validation-error {
        text-align: left
    }

    .hidden {
        display: none !important
    }

    @media screen and (min-width: 768px) {
        .hidden-sm-up {
            display: none
        }
    }

    @media screen and (max-width: 767px) {
        .hidden-sm-down {
            display: none
        }
    }

    @media screen and (max-width: 767px) {
        .mirror-xs {
            transform: rotate(180deg)
        }

            .mirror-xs > div {
                transform: rotate(180deg)
            }
    }

    .img-responsive {
        display: block;
        max-width: 100%;
        height: auto
    }

    .text-right {
        text-align: right
    }

    @media screen and (min-width: 768px) {
        .text-right-sm {
            text-align: right
        }
    }

    .text-left {
        text-align: left
    }

    @media screen and (min-width: 768px) {
        .text-left-sm {
            text-align: left
        }
    }

    @media screen and (min-width: 1000px) {
        .text-left-desktop {
            text-align: left
        }
    }

    .text-center {
        text-align: center
    }

    @media screen and (min-width: 768px) {
        .text-center-sm {
            text-align: center
        }
    }

    .text-primary {
        color: #ED1B24
    }

    .text-black {
        color: #111
    }

    .text-muted {
        color: #777
    }

    .topic-block-body {
        text-align: left
    }

    .social .networks {
        border-bottom: none !important
    }

        .social .networks .linkedin a {
            display: block;
            width: 38px;
            height: 38px;
            background: url("../images/linkedin_circle_color.png") no-repeat;
            font-size: 0;
            background-size: 100%;
            background-color: white;
            border-radius: 50%
        }

    .bg-clear {
        background: transparent !important
    }

    .bg-primary {
        background-color: #ED1B24
    }

    .bg-black {
        background-color: #111
    }

    .bg-muted {
        background-color: #777
    }

    .bg-faint {
        background-color: #f9f9f9
    }

    .float-right {
        float: right
    }

    @media screen and (max-width: 1000px) {
        .float-right-mobile {
            float: right
        }
    }

    .float-left {
        float: left
    }

    @media screen and (max-width: 1000px) {
        .float-left-mobile {
            float: left
        }
    }

    .lh-1 {
        line-height: 1
    }

    .invisible {
        visibility: hidden
    }

    .single {
        word-break: keep-all;
        white-space: nowrap
    }

    .o-v {
        overflow: visible !important
    }

    small {
        display: block;
        font-size: 75%;
        line-height: 1.15;
        font-family: "Clear Sans Light",Helvetica,Arial,sans-serif,monospace
    }

    hr {
        opacity: 0.1;
        margin: 1rem 0
    }

    .inputs input.invalid {
        border: 1px solid red
    }

    .inputs input[disabled] {
        background-color: #E4E4E4;
        cursor: not-allowed
    }

    .inputs input[type="email"], .inputs input[type="phone"] {
        width: 400px;
        max-width: 100%;
        background-color: #fff;
        height: 36px;
        border: 1px solid #ddd;
        padding: 8px;
        vertical-align: middle
    }

        .inputs input[type="email"]:focus, .inputs input[type="phone"]:focus {
            border-color: #ccc;
            color: #444
        }

    .a-r {
        right: 0
    }

    .a-b {
        bottom: 0
    }

    .a-l {
        left: 0
    }

    .a-t {
        top: 0
    }

    .pos-rel {
        position: relative
    }

    .increase-order, .decrease-order {
        cursor: pointer;
        width: 1ex;
        height: 1ex;
        padding: 0.75rem;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        border: 1px solid #E4E4E4;
        color: #111;
        background-color: #f9f9f9;
        font-size: 150%;
        -webkit-touch-callout: none;
        z-index: 75;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

        .increase-order span, .decrease-order span {
            margin-top: -0.125em;
            position: absolute;
            display: inline-block;
            top: 50%;
            left: 50%;
            -webkit-transform-origin: center;
            -moz-transform-origin: center;
            -ms-transform-origin: center;
            transform-origin: center;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%)
        }

    .decrease-order {
        margin-left: 7px;
        left: 0
    }

    .increase-order {
        margin-right: 7px;
        right: 0
    }

    .quantity input {
        width: 100%
    }

    [onclick] {
        cursor: pointer
    }

    .ui-icon-faded {
        opacity: 0.25
    }

.discount-control {
    display: flex;
    align-items: center;
}

.discount-input {
    width: 60px;
    height: 35px;
    text-align: right;
    margin-right: 2px;
    padding: 5px 2px;
    border: 1px solid #ddd;
}

.discount-toggle {
    display: flex;
    border: 1px solid #ddd;
}

    .discount-toggle button {
        padding: 2px 5px;
        border: none;
        cursor: pointer;
    }

.currency-toggle.active, .percentage-toggle.active {
    background-color: #ED1B24;
    color: white;
}

.currency-toggle {
    border: 1px solid #ddd;
    background-color: white;
    color: #111;
    padding: 5px 2px;
    height: 35px;
}

.percentage-toggle {
    border: 1px solid #ddd;
    background-color: white;
    color: #111;
    padding: 5px 2px;
    height: 35px;
}

.remove-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    align-items: center;
    min-height: 25px;
}

.remove-button img {
    width: 12px;
    height: 12px;
}