html, body, div, header, footer, main, section, article, nav, aside, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, span, a, strong, em, img, iframe, details, br, hr, sub, sup, time, pre, code, blockquote, q, cite, address, summary, form, label, fieldset, legend, input, textarea, select, option, button, table, caption, thead, tbody, tfoot, th, tr, td, figure, figcaption, video, audio, canvas {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    text-decoration: none
}

header, footer, section, nav, article, aside, main, details, summary, figure, figcaption {
    display: block
}

ul, ol {
    list-style: none
}

input, textarea, select, option, button, label, legend {
    font-family: inherit;
    color: inherit;
    font-size: inherit;
    font-weight: inherit
}

button {
    cursor: pointer;
    background: none;
    line-height: inherit
}

    button::-moz-focus-inner {
        border: 0;
        padding: 0
    }

address, cite {
    font-style: normal
}

table {
    border-collapse: separate;
    border-spacing: 0;
    word-wrap: break-word
}

html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-size: 20px
}

body {
    min-width: 300px;
    max-width: 1200px;
    background: #fff url(../images/background-small.jpg) fixed no-repeat top center;
    font-family: 'PT Sans', sans-serif;
    color: #444;
    line-height: 1;
    margin: 0 auto
}

@media (min-width: 500px) {
    body {
        background-image: url(../images/background-medium.jpg)
    }
}

@media (min-width: 1200px) {
    body {
        background-image: url(../images/background-large.jpg)
    }
}

a {
    color: #386a8d
}

    a:hover, a:focus {
        color: #1b3344
    }

p {
    padding: 0 0 1em;
    font-size: .9em;
    line-height: 1.3
}

    p a {
        font-weight: bold;
        word-wrap: break-word
    }

sup, sub {
    font-size: .6em
}

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

textarea {
    -webkit-appearance: none;
    -webkit-overflow-scrolling: touch
}

input[type="search"], input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="date"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    -webkit-appearance: none
}

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield
}

    input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
        -moz-appearance: none;
        -webkit-appearance: none
    }

input[type="button"], input[type="submit"] {
    -webkit-appearance: none
}

input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-search-results-button, input::-webkit-search-results-decoration {
    display: none
}

input::-ms-clear {
    display: none
}

:focus::-webkit-input-placeholder {
    opacity: 0;
    transition: opacity 0.2s 0.2s ease
}

:focus::-moz-placeholder {
    opacity: 0;
    transition: opacity 0.2s 0.2s ease
}

:focus::input-placeholder {
    opacity: 0;
    transition: opacity 0.2s 0.2s ease
}

::-webkit-input-placeholder {
    color: #b0b0b0
}

::-moz-placeholder {
    color: #b0b0b0;
    opacity: 1
}

:-ms-input-placeholder {
    color: #b0b0b0
}

::input-placeholder {
    color: #b0b0b0
}

input, textarea, select, fieldset, legend, label, button {
    display: block
}

label {
    display: table;
    border-collapse: separate;
    padding: 0 0 .5em;
    font-size: .8em;
    font-weight: bold
}

fieldset {
    min-width: inherit;
    padding: 0 0 .5em
}

legend {
    padding: 0 0 1em;
    font-size: .8em;
    font-weight: bold
}

input, textarea, select {
    box-sizing: border-box;
    max-width: 100%;
    padding: .4em .5em;
    background-color: #fff;
    border: 1px solid #b0b0b0;
    border-radius: .2rem;
    font-size: .8em;
    margin: 0 0 1.2em;
    text-overflow: ellipsis;
    transition: background-color .2s, color .2s, border-color .2s
}

    input:focus, textarea:focus, select:focus {
        border-color: #386a8d
    }

.select-container > div {
    box-sizing: border-box;
    display: inline-block;
    max-width: 100%;
    position: relative;
    margin: 0 0 1.2em
}

    .select-container > div:before {
        box-sizing: border-box;
        display: block;
        width: 1.7em;
        background-color: #386a8d;
        border-radius: .2rem;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        pointer-events: none;
        content: "";
        transition: background-color .2s
    }

    .select-container > div:after {
        display: block;
        width: 0;
        height: 0;
        border: 0 solid transparent;
        border-width: .3em .3em 0 .3em;
        border-top-color: #fff;
        position: absolute;
        top: .8em;
        right: .55em;
        pointer-events: none;
        content: ""
    }

    .select-container > div:hover:before {
        background-color: #4685b2
    }

    .select-container > div select {
        padding-right: 2.6em;
        margin-bottom: 0;
        -webkit-appearance: none
    }

textarea {
    overflow: auto
}

input[type='checkbox'], input[type='radio'] {
    float: left;
    clear: left;
    width: auto;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    margin: 0;
    position: relative;
    top: .05rem;
    left: .15rem
}

    input[type='checkbox'] + label, input[type='radio'] + label {
        padding: 0 .3em 1em .8em;
        position: relative
    }

        input[type='checkbox'] + label:hover, input[type='radio']:not(:checked) + label:hover {
            color: #386a8d
        }

label input[type='checkbox'], label input[type='radio'] {
    margin-right: .8em
}

fieldset input[type='checkbox'] + label, fieldset input[type='radio'] + label {
    font-weight: normal
}

input[type='checkbox'] + label:before, input[type='radio'] + label:before {
    box-sizing: border-box;
    display: block;
    width: 1em;
    height: 1em;
    background-color: #fff;
    border: 1px solid #b0b0b0;
    font-size: .8rem;
    position: absolute;
    top: .05em;
    left: -.6rem;
    content: ""
}

input[type='radio'] + label:before {
    border-radius: 50%
}

input[type='checkbox']:checked + label:before, input[type='radio']:checked + label:before {
    background-color: #386a8d;
    border-color: #386a8d
}

input[type='checkbox'] + label:not([for]):hover, input[type='radio'] + label:not([for]):hover {
    color: #386a8d
}

input[type='checkbox'] + label:not([for]):before, input[type='radio'] + label:not([for]):before {
    display: none;
    pointer-events: none
}

.button {
    background-color: #386a8d;
    padding: .6em .8em;
    border-radius: .2rem;
    font-weight: bold;
    font-size: .8em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 1em;
    cursor: pointer
}

    .button:hover, .button:focus {
        background-color: #4685b2;
        color: #fff
    }

    .button:after {
        display: none;
        vertical-align: middle;
        width: 1em;
        height: 1em;
        background: url(../images/icon-sprite.svg) no-repeat -18em center;
        background-size: auto 100%;
        font-size: .6rem;
        position: relative;
        top: -.1rem;
        margin: 0 0 0 .8em;
        content: ""
    }

a.button {
    display: table
}

button, input[type="button"], input[type="submit"] {
    background-color: #386a8d;
    padding: .6em .8em;
    border-radius: .2rem;
    font-weight: bold;
    font-size: .8em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 1em;
    cursor: pointer
}

    button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:focus {
        background-color: #4685b2;
        color: #fff
    }

    button:after, input[type="button"]:after, input[type="submit"]:after {
        display: none;
        vertical-align: middle;
        width: 1em;
        height: 1em;
        background: url(../images/icon-sprite.svg) no-repeat -18em center;
        background-size: auto 100%;
        font-size: .6rem;
        position: relative;
        top: -.1rem;
        margin: 0 0 0 .8em;
        content: ""
    }

input[type="button"], input[type="submit"] {
    line-height: 1;
    white-space: normal;
    border: none;
    transition: background-color .2s, color .2s
}

a, a:before, a:after, button, button:before, button:after, label {
    transition: color .2s, background-color .2s, border-color .2s
}

ul.bullet-list, .product .product-details > ul, main > ul:not([class]) {
    max-width: 50rem;
    padding: 0 0 0;
    overflow: hidden
}

    ul.bullet-list li, .product .product-details > ul li, main > ul:not([class]) li {
        padding: 0 0 .5em .8em;
        font-size: .9em;
        line-height: 1.3;
        position: relative
    }

        ul.bullet-list li:before, .product .product-details > ul li:before, main > ul:not([class]) li:before {
            display: block;
            width: .3rem;
            height: .3rem;
            background-color: #444;
            border-radius: 50%;
            position: absolute;
            top: .5em;
            left: .1em;
            content: ""
        }

    ul.bullet-list a, .product .product-details > ul a, main > ul:not([class]) a {
        font-weight: bold
    }

.content-image {
    clear: both;
    display: table;
    max-height: 30em;
    margin: .5em auto 1em
}

    .content-image img {
        max-height: 30em
    }

@media (min-width: 800px) {
    .content-image {
        display: block
    }

        .content-image.left {
            clear: left;
            float: left;
            max-width: 40%;
            margin-right: 1.5em
        }

        .content-image.right {
            clear: right;
            float: right;
            max-width: 40%;
            margin-left: 1.5em
        }

    h1 + .content-image, h2 + .content-image, h3 + .content-image, main > .content-image:first-child {
        margin-top: 0
    }
}

.social-links:after {
    display: block;
    clear: both;
    content: ""
}

.social-links li {
    float: left;
    padding: 0 .5em 0 0
}

.social-links a {
    overflow: hidden;
    display: block;
    width: 1em;
    height: 1em;
    background-color: #fff;
    border-radius: 50%;
    font-size: 1.3em;
    position: relative;
    cursor: pointer;
    transition: opacity .2s
}

    .social-links a:before {
        display: block;
        height: 200%;
        content: ""
    }

    .social-links a:after {
        display: block;
        width: 1em;
        height: 1em;
        background: url(../images/social-icon-sprite.svg) no-repeat 0 center;
        background-size: auto 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: .7rem;
        margin: -.5em 0 0 -.5em;
        content: ""
    }

    .social-links a:hover, .social-links a:focus {
        opacity: .7
    }

.social-links .twitter a:after {
    background-position: -2em center
}

.social-links .linkedin a:after {
    background-position: -12em center
}

.social-links .google a:after {
    background-position: -4em center
}

.social-links .instagram a:after {
    background-position: -6em center
}

.social-links .youtube a:after {
    background-position: -8em center
}

.social-links .pinterest a:after {
    background-position: -10em center
}

.staff-heading {
    box-sizing: border-box;
    max-width: 391px;
    height: 42px;
    padding: .65em 1.5em 0;
    background: url(../images/staff-heading-background.png) no-repeat center;
    background-size: contain;
    font-family: 'PT Sans Narrow';
    font-size: .95em;
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
    margin: 0 auto 1em;
    position: relative
}

    .staff-heading a {
        display: block;
        padding: .65em 1.5em 0;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0
    }

.slick-list {
    display: block;
    padding: 0;
    margin: 0;
    position: relative;
    overflow: hidden
}

    .slick-list:focus {
        outline: none
    }

    .slick-list.dragging {
        cursor: pointer;
        cursor: hand
    }

.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slick-track {
    display: block;
    position: relative;
    top: 0;
    left: 0
}

    .slick-track:before, .slick-track:after {
        display: table;
        content: ""
    }

    .slick-track:after {
        clear: both
    }

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    clear: none !important;
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px
}

[dir='rtl'] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

.slick-slider {
    position: relative;
    overflow: visible
}

.slick-arrow {
    display: block;
    width: 1em;
    height: 1em;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: .2rem;
    position: absolute;
    bottom: .5em;
    z-index: 100;
    font-size: 1.5em;
    color: #000;
    margin: 0 0 0;
    overflow: hidden;
    opacity: .5;
    transition: opacity .2s
}

    .slick-arrow:hover, .slick-arrow:focus {
        opacity: 1
    }

    .slick-arrow:before {
        display: block;
        height: 200%;
        content: ""
    }

    .slick-arrow:after {
        display: block;
        height: 1em;
        width: 1em;
        background: url(../images/icon-sprite.svg) no-repeat -16em center;
        background-size: auto 100%;
        padding: 0;
        font-size: .5em;
        color: #368ee6;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -.5em 0 0 -.5em;
        content: ""
    }

.slick-prev {
    left: 0
}

.slick-next {
    right: 0
}

    .slick-next:after {
        background-position: -18em center
    }

.slick-dots {
    box-sizing: border-box;
    list-style: none;
    width: 100%;
    padding: 1em 2em;
    text-align: center;
    margin: 0
}

    .slick-dots li {
        display: inline-block;
        float: none;
        width: auto !important;
        padding: .3em .3em !important;
        overflow: hidden;
        margin: 0 .1em !important;
        cursor: pointer
    }

    .slick-dots button {
        display: block;
        width: .3rem;
        height: .3rem;
        padding: 0;
        background: #444;
        border: none;
        border-radius: 50%;
        margin: 0;
        overflow: hidden
    }

        .slick-dots button:before {
            display: block;
            clear: both;
            height: 200%;
            content: ""
        }

    .slick-dots li:hover button, .slick-dots li:focus button {
        background-color: #444
    }

    .slick-dots .slick-active button {
        background: #444;
        pointer-events: none
    }

header.site {
    padding-top: .5em;
    position: relative;
    z-index: 1000
}

    header.site:after {
        display: block;
        clear: both;
        content: ""
    }

    header.site .header-logo {
        display: table;
        min-width: 280px;
        font-family: 'PT Sans Narrow';
        font-size: 1.2em;
        color: #444;
        text-shadow: 0 0.05em 0.05em #fff;
        margin: 0 auto .2em;
        transition: opacity .2s
    }

        header.site .header-logo:before {
            display: block;
            float: left;
            width: 1em;
            height: .4204545455em;
            background: url(../images/theodore-front-musical-literature-logo.png) no-repeat center;
            background-size: contain;
            font-size: 6rem;
            margin: -.2rem .2rem 0 0;
            content: ""
        }

        header.site .header-logo span {
            display: block
        }

        header.site .header-logo:hover, header.site .header-logo:focus {
            opacity: .7
        }

@media (min-width: 500px) {
    header.site .header-logo {
        padding-top: .6em;
        padding-bottom: .3em
    }

        header.site .header-logo:before {
            margin-top: -.8rem
        }

        header.site .header-logo span {
            display: inline
        }
}

@media (min-width: 900px) {
    header.site .header-logo {
        float: left
    }
}

@media (min-width: 1000px) {
    header.site .header-logo {
        font-size: 1.4em
    }

        header.site .header-logo:before {
            font-size: 7rem
        }
}

header.site .main-menu-toggle {
    overflow: hidden;
    display: block;
    float: left;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: none;
    background-color: transparent;
    border-radius: 0;
    color: #fff;
    position: relative;
    margin: 0
}

    header.site .main-menu-toggle:before {
        display: block;
        height: 200%;
        content: ""
    }

    header.site .main-menu-toggle:after {
        display: block;
        width: 1em;
        height: 1em;
        padding: .5em;
        background: #386a8d url(../images/icon-sprite.svg) no-repeat 0 center;
        background-size: auto 100%;
        background-origin: content-box;
        border-radius: .2rem;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        font-size: .8rem;
        margin: auto;
        content: ""
    }

    header.site .main-menu-toggle:hover {
        background-color: transparent
    }

        header.site .main-menu-toggle:hover:after, header.site .main-menu-toggle:focus:after {
            background-color: #4685b2
        }

    header.site .main-menu-toggle.open:after {
        background-color: #4685b2
    }

@media (min-width: 900px) {
    header.site .main-menu-toggle {
        display: none
    }
}

header.site .utility-menu {
    float: right
}

    header.site .utility-menu li {
        float: left
    }

    header.site .utility-menu a {
        display: block;
        padding: .4em .6em;
        background-color: #386a8d;
        font-family: 'PT Sans Narrow';
        font-size: .8em;
        line-height: 1.3em;
        text-transform: uppercase;
        color: #fff;
        cursor: pointer;
        position: relative;
        z-index: 1
    }

        header.site .utility-menu a:hover, header.site .utility-menu a:focus {
            background-color: #4685b2
        }

@media (max-width: 599px) {
    header.site .utility-menu a {
        overflow: hidden;
        width: 2.2rem;
        height: 2.2rem;
        padding: 0;
        background-color: transparent;
        position: relative
    }

        header.site .utility-menu a:before {
            display: block;
            height: 200%;
            content: ""
        }

        header.site .utility-menu a:after {
            display: block;
            width: 1em;
            height: 1em;
            padding: .5em;
            background: #386a8d url(../images/icon-sprite.svg) no-repeat -16em center;
            background-size: auto 100%;
            background-origin: content-box;
            border-radius: .2rem;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            font-size: .8rem;
            margin: auto;
            content: ""
        }

        header.site .utility-menu a:hover, header.site .utility-menu a:focus {
            background-color: transparent
        }

            header.site .utility-menu a:hover:after, header.site .utility-menu a:focus:after {
                background-color: #4685b2
            }

    header.site .utility-menu li:nth-child(2) a:after {
        background-position: -20em center
    }

    header.site .utility-menu li:nth-child(3) a:after {
        background-position: -22em center
    }

    header.site .utility-menu li:nth-child(4) a:after {
        background-position: -24em center
    }

    header.site .utility-menu li:nth-child(5) a:after {
        background-position: -26em center
    }
}

@media (min-width: 600px) {
    header.site .utility-menu {
        padding: .3em .5em 0 0
    }

        header.site .utility-menu li {
            margin-left: .5em
        }

        header.site .utility-menu a {
            border-radius: .2rem
        }
}

@media (min-width: 900px) {
    header.site .utility-menu {
        padding-top: .5em
    }
}

@media (min-width: 1000px) {
    header.site .utility-menu {
        padding-top: .7em
    }
}


/*--- MAIN MENU -------------------------------------------------*/
header.site .main-menu {clear:both;background:#444;position:relative}
    header.site .main-menu:after {display:block;clear:both;content:""}

    @media (max-width:899px) {
        header.site .main-menu {visibility:hidden;height:0;overflow:hidden;transition:visibility .2s 0s, height .2s}

            /*--- open state ---*/
            header.site .main-menu.open {visibility:visible;height:auto;transition-delay:0s}
    }

    @media (min-width:900px) {
        header.site .main-menu {display:table;padding:0 .5em;background-image:linear-gradient(#777, #444);border-radius:.2rem .2rem 0 0;margin:0 auto}
            header.site .main-menu:after {display:block;clear:both;max-width:40em;height:1px;background-image:linear-gradient(to right, transparent, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.2) 80%, transparent);margin:.4em auto .3em;content:""}
    }


    /*--- top-level items -------------------*/
    header.site .main-menu > li > a {display:block;padding:.6em .6em;border-bottom:1px solid #b0b0b0;border-color:#636363;font-family:'PT Sans Narrow';font-size:.9em;text-transform:uppercase;line-height:1.2;color:#fff;cursor:pointer}
         header.site .main-menu > li > a:hover, header.site .main-menu > li > a:focus {background-color:#585858}

         /*--- items with submenus ---*/
         header.site .main-menu a:not(:only-child) {padding-right:2.4em;position:relative}
             header.site .main-menu a:not(:only-child):after {display:block;width:0;height:0;border:0 solid transparent;border-width:.3rem .3rem 0 .3rem;border-top-color:#fff;border-bottom-color:#fff;position:absolute;top:50%;right:1rem;margin:-.1em 0 0;pointer-events:none;content:""}

         /*--- open state ---*/
         header.site .main-menu a.open {background-color:#585858}
             header.site .main-menu a.open:not(:only-child):after {border-top-width:0;border-bottom-width:.3em}

        @media (min-width:900px) {
             header.site .main-menu > li {float:left;position:relative}
                 header.site .main-menu > li > a {padding:.5em 1em;border:none;font-size:.8em}
                     header.site .main-menu > li > a:hover, header.site .main-menu > li > a:focus {background-color:rgba(255,255,255,0.1) }

                     /*--- items with submenus ---*/
                     header.site .main-menu > li > a:not(:only-child) {padding-right:1.5em}
                         header.site .main-menu > li > a:not(:only-child):after {right:.5em}

                     /*--- open state ---*/
                     header.site .main-menu > li > a.open:not(:only-child):after {margin-top:-.15em}
        }


    /*--- submenus -----------------------*/
    header.site .main-menu ul {visibility:hidden;height:0;background-color:#303030;overflow:hidden;transition:visibility .2s 0s, height .2s}

         /*--- open state ---*/
         header.site .main-menu ul.open {visibility:visible;height:auto;transition-delay:0s}

        /*--- sub-submenus ---*/
        header.site .main-menu ul ul {background-color:#222}

            /*--- items ---*/
            header.site .main-menu ul ul a {padding-left:3em !important}
                header.site .main-menu > li > ul a {display:block;padding:.5em 1em .5em 2em;border-bottom:1px solid #b0b0b0;border-color:#585858;font-family:'PT Sans Narrow';font-size:.8em;text-transform:uppercase;line-height:1.2;color:#fff}
                    header.site .main-menu > li > ul a:hover, header.site .main-menu > li > ul a:focus {background-color:#585858}

        @media (min-width:900px) {
            header.site .main-menu > li > ul {width:100%;min-width:7em;background-color:#444;background-image:linear-gradient(#6a6a6a, #444);border-radius:.2rem;position:absolute;left:0;z-index:1000;margin:-.1em 0 0}

                 /*--- open state ---*/
                 header.site .main-menu > li > ul.open {box-shadow:0 0 0 1px rgba(255,255,255,0.2),0 0.1em 0.2em rgba(0,0,0,0.2);overflow:visible}

                 /*--- items ---*/
            header.site .main-menu ul li {position:relative}
                 header.site .main-menu > li > ul a {padding:.3em .5em;border:none;text-align:center;position:relative}
                    header.site .main-menu > li > ul a:hover, header.site .main-menu > li > ul a:focus {background-color:rgba(255,255,255,0.1)}

                 /*--- bottom border ---*/
                 header.site .main-menu > li > ul a:before {display:block;height:1px;background-image:linear-gradient(to right, transparent, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.2) 80%, transparent);margin:0 auto;position:absolute;bottom:0;left:.5em;right:.5em;content:""}
                 header.site .main-menu > li > ul li:last-child a:before {display:none}


                 /*--- items with submenus ---*/
                header.site .main-menu ul a:not(:only-child) {padding-left:1em;padding-right:1em}
                    header.site .main-menu ul a:not(:only-child):after {border:0 solid transparent;border-width:.3rem 0 .3rem .3rem;border-left-color:#fff;border-right-color:#fff;right:.5em;margin-top:-.35em}

                     /*--- open state ---*/
                     header.site .main-menu ul a.open {}
                         header.site .main-menu ul a.open:not(:only-child):after {border-width:.3rem .3rem .3rem 0}


                /*--- sub-submenus ---*/
                header.site .main-menu ul ul {min-width:6em;height:auto;border-radius:.2rem;position:absolute;top:0;left:100%;z-index:100;opacity:0;transition:visibility .2s 0s, opacity .2s}

                     /*--- open state ---*/
                     header.site .main-menu ul ul.open {box-shadow:0 0 0 1px rgba(255,255,255,0.2),0 0.1em 0.2em rgba(0,0,0,0.2);opacity:1}

                    /*--- items ---*/
                    header.site .main-menu ul ul a {padding-left:.5em !important}
        }




/*--- search bar -----------------------*/
header.site .header-search-bar {
    padding: .3em .2em 0;
    background-color: #386a8d
}

    header.site .header-search-bar:after {
        display: block;
        clear: both;
        content: ""
    }

@media (min-width: 900px) {
    header.site .header-search-bar {
        max-width: 1000px;
        padding: .2em .4em 0;
        background-image: linear-gradient(#3f789f, #386a8d);
        border-radius: .2rem .2rem 0 0;
        margin: 0 auto
    }
}

header.site .header-search {
    padding: 0 0 .3em;
    overflow: hidden
}

    header.site .header-search label {
        font: 0/0 a
    }

    header.site .header-search input {
        width: 100%;
        width: calc(100% - 1.9rem);
        height: 1.65rem;
        float: left;
        border: none;
        margin: 0
    }

        header.site .header-search button, header.site .header-search input[type="submit"], header.site .header-search input[type="button"] {
            overflow: hidden;
            float: right;
            width: 1.65rem;
            height: 1.65rem;
            padding: 0;
            background-color: #408538;
            box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.2);
            margin: 0;
            position: relative
        }

            header.site .header-search button:before, header.site .header-search input[type="submit"]:before, header.site .header-search input[type="button"]:before {
                display: block;
                height: 200%;
                content: ""
            }

            header.site .header-search button:after, header.site .header-search input[type="submit"]:after, header.site .header-search input[type="button"]:after {
                display: block;
                width: 1em;
                height: 1em;
                background: url(../images/icon-sprite.svg) no-repeat -2em center;
                background-size: auto 100%;
                font-size: .9rem;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                content: ""
            }

            header.site .header-search button:hover, header.site .header-search button:focus, header.site .header-search input[type="submit"]:hover, header.site .header-search input[type="submit"]:focus, header.site .header-search input[type="button"]:hover, header.site .header-search input[type="button"]:focus {
                background-color: #51a947
            }

@media (min-width: 400px) {
    header.site .header-search {
        box-sizing: border-box;
        float: left;
        width: calc(100% - 4.9rem);
        padding-right: .3em
    }
}

@media (min-width: 900px) {
    header.site .header-search {
        width: calc(100% - 30.5rem);
        padding-top: .2em
    }
}

header.site .header-advanced-search {
    display: table;
    padding: .55em 1.5em .55em .7em;
    background-color: #4685b2;
    border-radius: .2rem;
    font-family: 'PT Sans Narrow';
    font-size: .8em;
    text-transform: uppercase;
    color: #fff;
    position: relative;
    box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.2)
}

    header.site .header-advanced-search:after {
        display: block;
        width: 0;
        height: 0;
        border: 0 solid transparent;
        border-width: .25rem 0 .25rem .25rem;
        border-left-color: #fff;
        position: absolute;
        top: 50%;
        right: .8em;
        margin: -.3em 0 0;
        pointer-events: none;
        content: ""
    }

    header.site .header-advanced-search:hover, header.site .header-advanced-search:focus {
        background-color: #689ec3
    }

@media (max-width: 399px) {
    header.site .header-advanced-search {
        display: none
    }
}

@media (min-width: 400px) {
    header.site .header-advanced-search {
        box-sizing: border-box;
        float: left;
        width: 4.5rem;
        height: 1.65rem
    }
}

@media (min-width: 900px) {
    header.site .header-advanced-search {
        margin-top: .2em
    }
}

header.site .browse-by-composer {
    clear: both;
    max-width: 35em;
    font-family: 'PT Sans Narrow';
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    overflow: hidden
}

    header.site .browse-by-composer > div {
        font-size: .7em
    }

        header.site .browse-by-composer > div:after {
            display: block;
            clear: both;
            max-width: 40em;
            height: 1px;
            background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.4) 30%, rgba(255,255,255,0.4) 70%, transparent);
            margin: .2em auto 0;
            content: ""
        }

    header.site .browse-by-composer ul {
        margin: 0 auto
    }

    header.site .browse-by-composer li {
        float: left;
        width: 7.6923%
    }

    header.site .browse-by-composer a {
        display: block;
        padding: .1em 0;
        font-size: .9em;
        color: #fff
    }

        header.site .browse-by-composer a:hover, header.site .browse-by-composer a:focus {
            background-color: rgba(255,255,255,0.2)
        }

@media (min-width: 500px) {
    header.site .browse-by-composer li {
        width: 3.846153846%
    }
}

@media (min-width: 900px) {
    header.site .browse-by-composer {
        clear: none;
        float: right;
        width: 25rem
    }
}

.breadcrumb {
    min-height: 1.7em;
    padding: .4em .2rem;
    background-color: #444;
    background-image: linear-gradient(#5e5e5e, #444);
    border-radius: .2rem .2rem 0 0;
    font-size: .6em;
    color: #fff;
    overflow: hidden
}

    .breadcrumb a {
        display: inline-block;
        padding: .3em .3em;
        border: 1px solid #b0b0b0;
        border-color: #b0b0b0;
        border-radius: .2rem;
        color: #fff
    }

        .breadcrumb a:hover, .breadcrumb a:focus {
            background-color: #444
        }

        .breadcrumb a:not([href]) {
            color: #fff
        }

@media (max-width: 1199px) {
    .breadcrumb {
        border-radius: 0
    }
}

main {
    clear: both;
    padding: 2rem 1rem 2rem;
    background: #fff url(../images/background-small.jpg) no-repeat center -10em;
    border: 1px solid #b0b0b0;
    border-width: 0 2px;
    margin: 0 auto
}

    main:after {
        display: block;
        clear: both;
        content: ""
    }

@media (max-width: 399px) {
    main {
        padding-left: .5rem;
        padding-right: .5rem
    }
}

@media (max-width: 1199px) {
    main {
        border: none
    }
}

@media (min-width: 500px) {
    main {
        background-image: url(../images/background-medium.jpg)
    }
}

@media (min-width: 1200px) {
    main {
        background-image: url(../images/background-medium.jpg)
    }
}

main h1, main h2, main h3, main h4, main h5, main h6 {
    padding: 0 0 1em
}

main h1 {
    font-size: 1.4em;
    font-weight: normal
}

main h2 {
    font-size: 1.2em
}

main h3 {
    font-size: .9em
}

main h4 {
    font-size: .8em
}

main > section {
    clear: both;
    padding: 0 0 2em
}

    main > section > h2 {
        box-sizing: border-box;
        max-width: 391px;
        height: 42px;
        padding: .65em 1.5em 0;
        background: url(../images/staff-heading-background.png) no-repeat center;
        background-size: contain;
        font-family: 'PT Sans Narrow';
        font-size: .95em;
        font-weight: normal;
        text-transform: uppercase;
        text-align: center;
        margin: 0 auto 1em;
        position: relative
    }

        main > section > h2 a {
            display: block;
            padding: .65em 1.5em 0;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0
        }

footer.site {
    padding: 1em 1rem;
    background-color: #386a8d;
    background-image: linear-gradient(#689ec3, #386a8d);
    color: #fff;
    font-size: .8em;
    overflow: hidden
}

@media (max-width: 399px) {
    footer.site {
        padding-left: .5rem;
        padding-right: .5rem
    }
}

@media (min-width: 1200px) {
    footer.site {
        border-radius: 0 0 .2rem .2rem;
        margin-bottom: 2em
    }
}

footer.site a {
    color: #fff
}

    footer.site a:hover, footer.site a:focus {
        color: #b0b0b0
    }

footer.site .footer-links {
    display: table;
    margin: 0 auto
}

    footer.site .footer-links a {
        display: table;
        padding: .3em .0;
        font-family: 'PT Sans Narrow'
    }

    footer.site .footer-links > li {
        box-sizing: border-box;
        float: left;
        width: 50%;
        min-width: 10em;
        padding-right: 2em
    }

    footer.site .footer-links ul {
        padding: 0 0 1em
    }

@media (max-width: 499px) {
    footer.site .footer-links > li:nth-child(2n+3) {
        clear: left
    }
}

@media (min-width: 500px) {
    footer.site .footer-links {
        margin-left2: 0
    }

        footer.site .footer-links > li {
            width: auto;
            min-width: 0
        }
}

@media (min-width: 800px) {
    footer.site .footer-links {
        float: left
    }
}

@media (min-width: 1000px) {
    footer.site .footer-links ul {
        padding-bottom: 0
    }
}

footer.site table {
    margin: 0 auto 1em
}

@media (min-width: 800px) {
    footer.site table {
        float: left
    }
}

footer.site .footer-contact {
    padding: 0 0 1em
}

    footer.site .footer-contact a {
        display: table;
        padding: .3em;
        font-family: 'PT Sans Narrow';
        margin: 0 auto
    }

@media (min-width: 800px) {
    footer.site .footer-contact {
        float: right
    }
}

@media (min-width: 1000px) {
    footer.site .footer-contact {
        float: left
    }
}

@media (min-width: 1200px) {
    footer.site .footer-contact {
        margin-left: 4em
    }
}

footer.site .footer-logo {
    clear: both;
    display: block;
    max-width: 15em;
    font-family: 'PT Sans Narrow';
    font-size: 1.1em;
    line-height: 1.1;
    margin: 0 auto;
    transition: opacity .2s
}

    footer.site .footer-logo:before {
        display: block;
        float: left;
        width: 1em;
        height: .42045454545454545454545454545455em;
        background: url(../images/theodore-front-musical-literature-logo.png) no-repeat center;
        background-size: cover;
        font-size: 6em;
        margin: -.02em .05em 0 0;
        content: ""
    }

    footer.site .footer-logo span {
        display: block
    }

    footer.site .footer-logo:hover, footer.site .footer-logo:focus {
        color: #fff;
        opacity: .6
    }

@media (min-width: 1000px) {
    footer.site .footer-logo {
        clear: none;
        float: right;
        min-width: 15em
    }
}

.filters-toggle {
    background-color: #386a8d;
    padding: .6em .8em;
    border-radius: .2rem;
    font-weight: bold;
    font-size: .8em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 1em;
    cursor: pointer;
    width: 100%;
    margin: .5em 0 1rem
}

    .filters-toggle:hover, .filters-toggle:focus {
        background-color: #4685b2;
        color: #fff
    }

    .filters-toggle:after {
        display: none;
        vertical-align: middle;
        width: 1em;
        height: 1em;
        background: url(../images/icon-sprite.svg) no-repeat -18em center;
        background-size: auto 100%;
        font-size: .6rem;
        position: relative;
        top: -.1rem;
        margin: 0 0 0 .8em;
        content: ""
    }

    .filters-toggle:after {
        display: inline-block;
        width: 0;
        height: 0;
        border: 0 solid transparent;
        border-width: .4em .4em 0 .4em;
        border-top-color: #fff;
        border-bottom-color: #fff;
        content: ""
    }

    .filters-toggle.open:after {
        border-width: 0 .4em .4em .4em
    }

@media (min-width: 700px) {
    .filters-toggle {
        display: none
    }
}

.filters fieldset {
    padding: 0 0 1em
}

.filters legend {
    float: left;
    width: 100%;
    padding: 0 0 .5em;
    font-weight: normal
}

.filters ul {
    clear: both;
    /*padding-left: .5em*/
}

.filters label {
    font-weight: normal
}

.filters .active label a {
    color: #444;
    font-weight: bold;
    pointer-events: none
}

.filters fieldset fieldset {
    max-height: 9.9em;
    padding-bottom: .5em;
    margin-bottom: 1.5em;
    overflow-y: auto
}

    .filters fieldset fieldset legend {
        font-size: .85em;
        font-weight: bold;
        text-transform: none
    }

    .filters fieldset fieldset label:last-of-type {
        padding-bottom: 0
    }

@media (max-width: 699px) {
    .filters {
        height: 0;
        -webkit-columns: 8em 3;
        -webkit-column-gap: 1em;
        -moz-columns: 8em 3;
        -moz-column-gap: 1em;
        columns: 8em 3;
        column-gap: 1em;
        overflow: hidden;
        transition: height .2s
    }

        .filters.open {
            height: auto
        }

        .filters fieldset {
            -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
            break-inside: avoid
        }
}

@media (min-width: 700px) {
    .filters {
        float: left;
        /*width: 8rem;
        padding: 0 2rem 1em 0*/
    }
}

@media (min-width: 700px) {
    .filters + div {
        overflow: hidden
    }
}

@media (min-width: 900px) {
    .sort {
        padding: .5em 0;
        border: 1px solid #b0b0b0;
        border-width: 1px 0;
        margin: 0 0 1em;
        overflow: hidden
    }
}

.sort .view {
    min-width: 8em;
    padding: 0 0 1em;
    overflow: hidden
}

    .sort .view div {
        float: left;
        padding: .3em 0 0;
        font-size: .8em
    }

    .sort .view button {
        float: left;
        padding: .4em .5em;
        font-size: .75em;
        margin: 0 0 0 .2em
    }

        .sort .view button.active {
            background-color: #4685b2;
            pointer-events: none
        }

@media (max-width: 499px) {
    .sort .view {
        display: none
    }
}

@media (min-width: 900px) {
    .sort .view {
        float: left;
        padding: .1em 0 0
    }
}

.sort .sort-options {
    overflow: hidden
}

    .sort .sort-options li {
        float: left;
        padding: 0 .5em 0 0
    }

@media (min-width: 900px) {
    .sort .sort-options {
        float: right
    }

        .sort .sort-options li {
            padding: 0 0 0 1em
        }

        .sort .sort-options label {
            float: left;
            padding: .5em .5em 0 0
        }

        .sort .sort-options .select-container {
            float: left
        }

            .sort .sort-options .select-container > div {
                margin: 0
            }
}

.pagination {
    display: table;
    clear: both;
    padding: 0 0 1em;
    margin: 0 auto;
    overflow: hidden
}

    .pagination:after {
        display: block;
        clear: both;
        content: ""
    }

    .pagination li {
        float: left;
        margin: 0 .25em 0em 0
    }

        .pagination li:empty {
            display: none
        }

    .pagination a, .pagination span {
        box-sizing: border-box;
        display: block;
        height: 2em;
        min-width: 2em;
        padding: .5em .3em;
        background: #b0b0b0;
        border-radius: .2rem;
        font-size: .7em;
        text-align: center;
        color: #fff
    }

        .pagination a:hover, .pagination a:focus, .pagination span:hover, .pagination span:focus {
            background-color: #386a8d;
            color: #fff
        }

    .pagination li:first-child a, .pagination li:first-child span, .pagination li:last-child a, .pagination li:last-child span {
        overflow: hidden;
        background-color: #b0b0b0;
        position: relative
    }

        .pagination li:first-child a:before, .pagination li:first-child span:before, .pagination li:last-child a:before, .pagination li:last-child span:before {
            display: block;
            height: 200%;
            content: ""
        }

        .pagination li:first-child a:after, .pagination li:first-child span:after, .pagination li:last-child a:after, .pagination li:last-child span:after {
            display: block;
            width: 0;
            height: 0;
            border: 0 solid transparent;
            border-width: .4em .4em .4em 0;
            border-left-color: #fff;
            border-right-color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -.35em 0 0 -.2em;
            content: ""
        }

        .pagination li:first-child a:hover, .pagination li:first-child a:focus, .pagination li:first-child span:hover, .pagination li:first-child span:focus, .pagination li:last-child a:hover, .pagination li:last-child a:focus, .pagination li:last-child span:hover, .pagination li:last-child span:focus {
            background-color: #386a8d
        }

        .pagination li:last-child a:after, .pagination li:last-child span:after {
            border-width: .4em 0 .4em .4em
        }

    .pagination .disabled {
        opacity: .3;
        pointer-events: none
    }

    .pagination .paging-ellipses span {
        pointer-events: none
    }

    .pagination .active a {
        background-color: #386a8d;
        color: #fff;
        pointer-events: none
    }

.promo-banner {
    display: block;
    margin: 0 auto 1em
}

    .promo-banner img {
        margin: 0 auto
    }











/*--- product listing wrapper ---*/
.ProductContent, .XSearchProducts {overflow:hidden}



/*--- product listing ----------------------------------------------------------------*/
.product-listing {clear:both;padding:0 0 1em}
    .product-listing:after {display:block;clear:both;content:""}

    .product-listing li {padding:0 0 2em}
        .product-listing a {display:block;font-size:.8em;line-height:1.1em;color:#444;margin:0 auto}

        /*--- image ---*/
        .product-listing a > span:first-child {display:block;margin:0 0 .2em}
            .product-listing a > span:first-child img {box-sizing:border-box;max-height:400px;margin:0 auto}

        /*--- title ---*/
        .product-listing a h2, .product-listing a h3 {padding:.3em 0;font-size:.9rem;line-height:1.1em;font-weight:bold;color:#444;overflow:hidden;transition:color .2s}
            .product-listing a:hover h2, .product-listing a:hover h3, .product-listing a:focus h2, .product-listing a:focus h3 {color:#386a8d}

        /*--- content ---*/
        .product-listing .product-author {padding:0 0 1em }
        .product-listing .publisher {padding:0 0 .5em }
        .product-listing .product-number {padding:0 0 .5em }
        .product-listing .product-description {padding:0 0 0 }
        .product-listing .product-price {padding:0 0 1em;font-size:1.1em }

        /*--- link button ---*/
        .product-listing .product-link {background-color:#386a8d;padding:.6em .8em;border-radius:.2rem;font-weight:bold;font-size:.8em;text-transform:uppercase;color:#fff;margin:0 0 1em;cursor:pointer;box-sizing:border-box;float:left;min-width:5rem;height:1.8rem;padding:.6em .2em;background-color:#408538;font-family:'PT Sans Narrow';font-weight:normal;font-size:.8rem;text-align:center;margin:0 .3em 0 0;transition:background-color .2s }
            .product-listing .product-link:hover, .product-listing .product-link:focus {background-color:#4685b2;color:#fff }
            .product-listing .product-link:after {display:none;vertical-align:middle;width:1em;height:1em;background:url(../images/icon-sprite.svg) no-repeat -18em center;background-size:auto 100%;font-size:.6rem;position:relative;top:-.1rem;margin:0 0 0 .8em;content:"" }
            .product-listing .product-link:before {display:inline-block;vertical-align:top;width:1em;height:1em;background:url(../images/icon-sprite.svg) no-repeat -30em center;background-size:auto 100%;font-size:.8rem;content:"";margin:.05em .3em 0 0 }
            .product-listing .product-link:hover, .product-listing .product-link:focus {background-color:#4a9b41 }

        /*--- add-to-cart button ---*/
        .product-listing button {min-width:5rem;height:1.8rem;padding:.6em .2em;font-family:'PT Sans Narrow';font-weight:normal }
            .product-listing button:before {display:inline-block;vertical-align:top;width:1em;height:1em;background:url(../images/icon-sprite.svg) no-repeat -28em center;background-size:auto 100%;font-size:.8rem;content:"";margin:0 .3em 0 0 }

        /*--- extra text area ---*/
        .product-listing li > div {font-size:.8em}


    @media (min-width:500px) {
        .product-listing a > span:first-child {float:left;width:8rem;position:relative;margin:0 1rem 1rem 0 }
            .product-listing a > span:first-child:before {display:block;padding:100% 0 0;content:"" }
            .product-listing a > span:first-child img {max-height:100%;position:absolute;top:0;bottom:0;right:0;left:0;margin:auto !important }
            /*compunix 06062019*/
            /*.product-listing a > div {overflow:hidden }
            */
            .product-listing a > div:first-of-type {overflow:hidden }
            /*compunix 06062019*/
            .product-listing .product-link {display:block;min-width:0;width:calc(50% - .2em) }
            .product-listing button {float:right;min-width:0;width:calc(((100% - 9rem) / 2) - .2em);position:relative;margin:-1.8rem 0 0 0 }
    }

    @media (min-width:800px) {
        .product-listing li {position:relative }
            /*compunix 06062019*/
            /*.product-listing a > div {padding-right:7rem }
            */
            .product-listing a > div:first-of-type {padding-right:7rem}
            /*compunix 06062019*/
            .product-listing .product-link {width:6rem;margin:0;position:absolute;top:0;right:0}
            .product-listing button {float:none;width:6rem;margin:0;position:absolute;top:2.1rem;right:0}
    }





/*--- GRID VERSION -------------------------------------------------------------------------------------------*/
.product-listing.grid li {margin-bottom:2em}
    .product-listing.grid a > div {padding:0;color:#386a8d}
        .product-listing.grid .product-publisher, .product-listing.grid .product-number, .product-listing.grid .product-description {display:none}
        .product-listing.grid .product-price {text-align:right}



@media (max-width: 499px) {
    .product-listing.grid.full-rows li:nth-child(n+5) {display:none}
}

@media (min-width: 500px) {
    .product-listing.grid {display:flex;flex-wrap:wrap;margin-left:-2px}

        .product-listing.grid li {float:left/*fallback for flexbox*/;width:50%;padding:0;border-left:2px solid #e4e4e4;position:relative;margin-bottom:1em}

    .product-listing.grid a {box-sizing:border-box;height:100%;padding:.2em .5em 4.2em}

        /*--- image ---*/
        .product-listing.grid a > span:first-child {float:none;width:auto;height:120px;position:relative;margin:0 0 .5em}
            .product-listing.grid a > span:first-child img {right:auto}

        /*--- heading ---*/
        .product-listing.grid h2, .product-listing.grid h3 {font-size:1em;color:#4480ab}

    /*--- price ---*/
    .product-listing.grid .product-price {font-size:1em;color:#444;position:absolute;bottom:2.4rem;right:.5rem}

    /*--- "details" button ---*/
    .product-listing.grid .product-link {min-width:0;width:50%;width:calc(50% - .6rem);height:1.7rem;padding:.5em .2em;position:absolute;top:auto;bottom:.5rem;left:.5rem}

    /*--- "add" button ---*/
    .product-listing.grid button {min-width:0;width:50%;width:calc(50% - .6rem);height:1.7rem;padding:.5em .2em;position:absolute;top:auto;bottom:.5rem;right:.5rem;margin-top:0}
}

@media (min-width: 500px) and (max-width: 699px) {
    /*.product-listing.grid li:nth-child(2n+3) {clear:left}*/

    .product-listing.grid.full-rows li:nth-last-child(-n+3):first-child ~ li:nth-child(n+3), .product-listing.grid.full-rows li:nth-last-child(-n+5):first-child ~ li:nth-child(n+5), .product-listing.grid.full-rows li:nth-last-child(-n+7):first-child ~ li:nth-child(n+7), .product-listing.grid.full-rows li:nth-last-child(-n+9):first-child ~ li:nth-child(n+9), .product-listing.grid.full-rows li:nth-child(n+9) {display:none}
}

@media (min-width: 700px) {
    .product-listing.grid li {width:33.33333333333%}
        /*.product-listing.grid .product-price {text-align:inherit;padding-bottom2:0.75em}*/
}

@media (min-width: 700px) and (max-width: 899px) {
    /*.product-listing.grid li:nth-child(3n+4) {clear: left}*/

    .product-listing.grid.full-rows li:nth-last-child(-n+5):first-child ~ li:nth-child(n+4), .product-listing.grid.full-rows li:nth-last-child(-n+8):first-child ~ li:nth-child(n+7), .product-listing.grid.full-rows li:nth-last-child(-n+11):first-child ~ li:nth-child(n+10), .product-listing.grid.full-rows li:nth-last-child(-n+14):first-child ~ li:nth-child(n+13), .product-listing.grid.full-rows li:nth-child(n+13) {display:none}
}

@media (min-width: 900px) {
    .product-listing.grid li {width:25%}
}

@media (min-width: 900px) and (max-width: 1099px) {
    /*.product-listing.grid li:nth-child(4n+5) {clear left}*/

    .product-listing.grid.full-rows li:nth-last-child(-n+7):first-child ~ li:nth-child(n+5), .product-listing.grid.full-rows li:nth-last-child(-n+11):first-child ~ li:nth-child(n+9), .product-listing.grid.full-rows li:nth-last-child(-n+15):first-child ~ li:nth-child(n+13), .product-listing.grid.full-rows li:nth-last-child(-n+19):first-child ~ li:nth-child(n+17), .product-listing.grid.full-rows li:nth-child(n+17) {display:none}
}

@media (min-width: 1100px) {
    .product-listing.grid li {width:25%}

        /*.product-listing.grid li:nth-child(5n+6) {clear:left}*/

    .product-listing.grid.full-rows li:nth-last-child(-n+9):first-child ~ li:nth-child(n+6), .product-listing.grid.full-rows li:nth-last-child(-n+14):first-child ~ li:nth-child(n+11), .product-listing.grid.full-rows li:nth-last-child(-n+19):first-child ~ li:nth-child(n+16), .product-listing.grid.full-rows li:nth-last-child(-n+24):first-child ~ li:nth-child(n+21), .product-listing.grid.full-rows li:nth-child(n+21) {display:none}

}

ul.recommended li { display:flex !important; }


/*--- filters version ---------------------------------------------------------------------------------*/


@media (min-width: 700px) {
    .filters + div .product-listing.grid li {/*clear:none !important*/;width:50%}
}

@media (min-width: 700px) and (max-width: 899px) {
    /*.filters + div .product-listing.grid li:nth-child(2n+3) {clear:left}*/

    .filters + div .product-listing.grid.full-rows li:nth-last-child(-n+3):first-child ~ li:nth-child(n+3), .filters + div .product-listing.grid.full-rows li:nth-last-child(-n+5):first-child ~ li:nth-child(n+5), .filters + div .product-listing.grid.full-rows li:nth-last-child(-n+7):first-child ~ li:nth-child(n+7), .filters + div .product-listing.grid.full-rows li:nth-last-child(-n+9):first-child ~ li:nth-child(n+9), .filters + div .product-listing.grid.full-rows li:nth-child(n+9) {display:none}
}

@media (min-width: 900px) {
    .filters + div .product-listing.grid li {/*clear:none !important*/;width: 33.333333333333333333%}
}

@media (min-width: 900px) and (max-width: 1099px) {
    /*.filters + div .product-listing.grid li:nth-child(3n+4) {clear:left !important}*/

    .filters + div .product-listing.grid.full-rows li:nth-last-child(-n+5):first-child ~ li:nth-child(n+4), .filters + div .product-listing.grid.full-rows li:nth-last-child(-n+8):first-child ~ li:nth-child(n+7), .filters + div .product-listing.grid.full-rows li:nth-last-child(-n+11):first-child ~ li:nth-child(n+10), .filters + div .product-listing.grid.full-rows li:nth-last-child(-n+14):first-child ~ li:nth-child(n+13), .filters + div .product-listing.grid.full-rows li:nth-child(n+13) {display:none}
}

@media (min-width: 1100px) {
    .filters + div .product-listing.grid li {/*clear:none !important*/;width:25%}

        /*.filters + div .product-listing.grid li:nth-child(4n+5) {clear:left !important}*/

    .filters + div .product-listing.grid.full-rows li:nth-last-child(-n+7):first-child ~ li:nth-child(n+5), .filters + div .product-listing.grid.full-rows li:nth-last-child(-n+11):first-child ~ li:nth-child(n+9), .filters + div .product-listing.grid.full-rows li:nth-last-child(-n+15):first-child ~ li:nth-child(n+13), .filters + div .product-listing.grid.full-rows li:nth-last-child(-n+19):first-child ~ li:nth-child(n+17), .filters + div .product-listing.grid.full-rows li:nth-child(n+17) {display:none}
}






.product {
    padding: 0 0 2em
}

    .product .product-images {
        max-width: 300px;
        margin: 0 auto 1em
    }

        .product .product-images:after {
            display: block;
            clear: both;
            content: ""
        }

@media (min-width: 800px) {
    .product .product-images {
        box-sizing: border-box;
        float: left;
        width: 50%;
        padding: 0 1rem 0 0
    }
}

.product .product-images .medium-image-wrap img {
    margin: 0 auto
}

.product .product-images .thumbnails {
    margin: .5em 0 0 -.5em
}

    .product .product-images .thumbnails li {
        box-sizing: border-box;
        float: left;
        width: 20%;
        padding: 0 0 .5em .5em
    }

    .product .product-images .thumbnails a {
        display: block;
        border: 1px solid #b0b0b0;
        position: relative
    }

        .product .product-images .thumbnails a:before {
            display: block;
            padding: 100% 0 0;
            content: ""
        }

        .product .product-images .thumbnails a:hover, .product .product-images .thumbnails a:focus {
            border-color: #386a8d
        }

    .product .product-images .thumbnails img {
        max-height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto
    }

.product #AJAXATC {
    display: block;
    clear: right;
    overflow: hidden
}

.product .product-details {
    padding: 0 0 .5em
}

    .product .product-details .product-price {
        padding: 0 0 .5em;
        font-size: 1em;
        color: #386a8d;
        font-weight: bold
    }

        .product .product-details .product-price.regular {
            display: inline-block;
            padding-right: .3em;
            text-decoration: line-through;
            color: #b0b0b0
        }

        .product .product-details .product-price.sale {
            display: inline-block
        }

    .product .product-details .product-stock {
        padding: 0 0 .5em;
        font-size: .8em;
        font-weight: bold
    }

        .product .product-details .product-stock.out {
            color: #386a8d
        }

.product .product-add {
    margin: 0 0 1em
}

.product .add-to-cart-form .add-to-cart-quantity {
    float: left;
    padding: 0 .5em 0 0
}

    .product .add-to-cart-form .add-to-cart-quantity label {
        display: inline-block;
        padding: .9em .5em 0 0
    }

    .product .add-to-cart-form .add-to-cart-quantity .quantity-field {
        display: inline-block;
        vertical-align: top;
        width: 3em;
        height: 1.9rem;
        padding: .4em .5em;
        font-size: .9em;
        text-align: center;
        margin: 0
    }

.product .add-to-cart-form .add-to-cart {
    height: 1.9rem;
    background-color: #408538;
    margin: 0 0 .5em;
    position: relative
}

    .product .add-to-cart-form .add-to-cart:before {
        display: inline-block;
        vertical-align: top;
        width: 1em;
        height: 1em;
        background: url(../images/icon-sprite.svg) no-repeat -28em center;
        background-size: auto 100%;
        font-size: .8rem;
        content: "";
        margin: 0 .5em 0 0
    }

    .product .add-to-cart-form .add-to-cart:hover, .product .add-to-cart-form .add-to-cart:focus {
        background-color: #4a9b41
    }

.page-wrap {
    clear: both
}

.group-header {
    padding: 0 0 .5em;
    font-weight: bold;
    font-size: 1em
}

.form-text {
    padding: 0 0 1em;
    font-size: .8em;
    line-height: 1.3
}

.form-group {
    padding: 0 0 1em
}

    .form-group input, .form-group textarea, .form-group select {
        margin-bottom: 0
    }

.checkbox-label, .radio-label {
    padding-bottom: 0
}

.form-label-suffix {
    padding-left: .5em;
    font-size: .8em
}

.form-description {
    padding: .4em 0 0;
    font-size: .6em
}

.field-validation-error {
    display: block;
    padding: .3em 0 0;
    font-size: .6em;
    font-style: italic;
    color: #386a8d
}

h1 .continue-shopping-text {
    display: inline-block;
    padding: .3em 0 0;
    font-size: .7em
}

a.btn.cancel-button, a.btn.cancel-estimate-checkout-button, a.btn.delete-button, a.btn.credit-card-cancel, .a.btn.edit-payment-method-checkout-button {
    font-size: .8em
}

.add-address-button, .choose-payment-method-button {
    display: table;
    font-size: .8em;
    margin: 0 !important
}

.off {
    display: none
}

.loading-overlay-wrap {
    position: relative;
    z-index: 10000000
}

.loading-overlay {
    background-color: rgba(255,255,255,0.6);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.loading-message-wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: .6
}

.loading-message {
    box-sizing: border-box;
    display: table;
    max-width: 90%;
    max-width: calc(100% - 1rem);
    padding: 1em;
    background-color: #386a8d;
    border-radius: .2rem;
    color: #fff;
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
    margin: 0 auto
}

@media (min-width: 800px) {
    .checkout-page .col-md-8 {
        box-sizing: border-box;
        float: left;
        width: 58%;
        padding: 0 1em 0 0
    }
}

@media (min-width: 800px) {
    .checkout-page .col-md-4 {
        box-sizing: border-box;
        float: right;
        width: 42%
    }
}

.checkout-page .checkout-content .form-description {
    padding: .5em 0 0;
    font-size: .7em
}

.checkout-page .checkout-block, .checkout-page .cart-details, .checkout-page .order-block {
    padding: .5em;
    border: 1px solid #b0b0b0;
    border-radius: .2rem;
    margin: 0 0 1em
}

.checkout-page .checkout-header {
    padding: 0 0 1em;
    font-size: 1em
}

.checkout-page .checkout-content form .form-group:last-child {
    padding-bottom: 0
}

.checkout-page .checkout-content .col-md-6 + .col-md-6 {
    padding-top: 1em
}

.checkout-page .form-label-suffix-required {
    padding: 0 0 0 .5em;
    font-size: .7em
}

.checkout-page .checkout-content input.text-box.single-line {
    width: 100%
}

.checkout-page .btn {
    margin-top: 1em;
    margin-bottom: 0
}

.checkout-page .shipping-estimator {
    padding: 0 0 2em
}

.checkout-page .js-selected-address .col-xs-7 {
    padding: 0 0 .5em;
    font-size: .8em
}

.checkout-page .js-selected-address .address-name, .checkout-page .js-selected-address .address-company {
    padding: 0 0 .3em;
    font-weight: bold
}

.checkout-page .js-selected-address .address-phone {
    padding: .3em 0
}

.checkout-page .js-address-options .address-edit-button {
    display: inline-block;
    font-size: .8em;
    margin-bottom: 1em
}

.checkout-page .payment-details {
    padding: 0 0 1em
}

.checkout-page .payment-method-options {
    padding: 0 0 1em
}

.checkout-page .selected-payment-method {
    padding: 0 0 .5em
}

.checkout-page .payment-method-detail {
    padding: 0 0 .5em;
    font-size: .8em
}

    .checkout-page .payment-method-detail span {
        display: inline-block;
        vertical-align: middle
    }

.checkout-page .cart-items {
    border-top: 1px solid #b0b0b0
}

.checkout-page .cart-item {
    padding: .5em 0;
    border-bottom: 1px solid #b0b0b0;
    margin: 0 0 .5em;
    overflow: hidden
}

    .checkout-page .cart-item .col-sm-6 {
        overflow: hidden
    }

    .checkout-page .cart-item .cart-item-title {
        font-size: .8em
    }

    .checkout-page .cart-item .cart-size-and-color {
        float: left;
        padding: 0 0 .5em;
        font-size: .7em;
        font-weight: bold
    }

    .checkout-page .cart-item .cart-sku-wrap {
        float: right;
        padding: 0 0 .5em;
        font-size: .7em;
        font-weight: bold
    }

    .checkout-page .cart-item .cart-item-quantity {
        float: left;
        overflow: hidden
    }

        .checkout-page .cart-item .cart-item-quantity label {
            padding: .5em .5em 0 0;
            font-size: .7em;
            float: left
        }

        .checkout-page .cart-item .cart-item-quantity input {
            max-width: 3em;
            text-align: center;
            margin-bottom: 0
        }

        .checkout-page .cart-item .cart-item-quantity .cart-delete-link {
            font-size: .55em;
            font-weight: bold;
            text-transform: uppercase
        }

    .checkout-page .cart-item .cart-subtotal-wrap {
        float: right;
        font-size: .7em
    }

    .checkout-page .cart-item .cart-subtotal {
        font-weight: bold
    }

.checkout-page .checkout-order-options .cart-upsell-items {
    padding: .5em 0 0
}

.checkout-page .checkout-order-options .cart-order-option {
    overflow: hidden
}

.checkout-page .checkout-order-options .media-left, .checkout-page .checkout-order-options .media-body {
    float: left
}

.checkout-page .checkout-order-options .check-box {
    margin: 0 .6em 0 0
}

.checkout-page .checkout-order-options .cart-upsell-image {
    display: none
}

.checkout-page .checkout-order-options .cart-order-option-name {
    font-size: .8em
}

.checkout-page .checkout-order-options .media-right {
    float: right
}

.checkout-page .checkout-order-options .order-option-cost {
    font-size: .8em
}

.checkout-page .order-notes textarea {
    width: 100%
}

.checkout-page .checkout-details-bar .checkout-content [class^="order-summary-"] {
    clear: both;
    padding: .5em 0;
    border-top: 1px solid #b0b0b0;
    font-size: .8em;
    font-weight: bold;
    overflow: hidden
}

    .checkout-page .checkout-details-bar .checkout-content [class^="order-summary-"] label {
        padding: 0;
        font-size: 1em
    }

    .checkout-page .checkout-details-bar .checkout-content [class^="order-summary-"] .left {
        float: left
    }

    .checkout-page .checkout-details-bar .checkout-content [class^="order-summary-"] .right {
        float: right
    }

.checkout-page .checkout-details-bar .checkout-content .order-summary-total {
    font-size: 1em
}

.checkout-page .checkout-details-bar .checkbox-label input {
    margin-right: .5em
}

.checkout-page .checkout-details-bar .place-order-button {
    font-size: 1em;
    background-color: #408538;
    border: none;
    color: #fff;
    margin-top: 0
}

    .checkout-page .checkout-details-bar .place-order-button:hover, .checkout-page .checkout-details-bar .place-order-button:focus {
        background-color: #51a947
    }

.credit-card-page #card-entry-wrapper .jp-card-container {
    margin-left: 0
}

.orderconfirmation-page {
    padding: 0 0 2em;
    line-height: 1.3
}

    .orderconfirmation-page .orderconfirmation-received {
        padding: 0 0 1em;
        font-weight: bold
    }

    .orderconfirmation-page .orderconfirmation-print {
        padding: 1em 0;
        font-weight: bold
    }

        .orderconfirmation-page .orderconfirmation-print ~ div {
            font-weight: bold
        }

            .orderconfirmation-page .orderconfirmation-print ~ div span {
                display: inline-block;
                padding: 0 .5em 0 0;
                font-weight: normal
            }

.account-page .page-links {
    padding: 0 0 1em
}

    .account-page .page-links a {
        display: table;
        padding: .2em 0;
        font-size: .7em
    }

.account-page > form, .account-page #PageContent_pnlAddress {
    padding: 0 0 2em
}

.account-page #order-history-wrap {
    clear: both
}

@media (min-width: 800px) {
    .account-page > form, .account-page #PageContent_pnlAddress {
        box-sizing: border-box;
        float: left;
        width: 50%;
        padding-right: 2em
    }
}

.order-history {
    padding: 0 0 2em
}

    .order-history table {
        width: 100%;
        border-collapse: collapse;
        font-size: .7em;
        text-align: center
    }

    .order-history th, .order-history td {
        padding: .5em .2em;
        border: 1px solid #b0b0b0
    }

    .order-history th {
        background-color: #444;
        border-color: #fff;
        color: #fff;
        font-weight: normal
    }

        .order-history th:first-of-type {
            border-left-color: #444
        }

        .order-history th:last-of-type {
            border-right-color: #444
        }

    .order-history table + span {
        display: block;
        padding: .5em 0;
        font-size: .8em
    }

@media (max-width: 599px) {
    .order-history .table-header {
        display: none
    }

    .order-history tr, .order-history td {
        display: block
    }

    .order-history tr {
        padding: .2em 0;
        border: 1px solid #b0b0b0
    }

        .order-history tr:not(:nth-child(2)) {
            border-top: none
        }

    .order-history td {
        padding-left: .5em;
        border: none;
        text-align: left
    }
}

.address-wrap .address-header {
    padding: 0 0 .5em;
    font-size: .8em;
    font-weight: bold
}

.address-wrap .address-edit {
    display: table;
    padding: .5em 0;
    font-size: .8em
}

.address-wrap .address-view {
    padding: 0 0 1em;
    font-size: .8em
}

.address-wrap .address-new {
    padding: 0 0 1em
}

.address-page {
    display: block;
    padding: 0 0 2em
}

    .address-page .address-row {
        padding: 0 0 2em;
        font-size: .8em;
        line-height: 1.2
    }

    .address-page .one-half2 {
        padding: 0 0 1em;
        line-height: 1.2
    }

    .address-page .address-row {
        overflow: hidden
    }

        .address-page .address-row .address-column {
            padding: 0 0 1em
        }

@media (min-width: 500px) {
    .address-page .address-row .address-column {
        float: left;
        padding-right: 2em
    }
}

.address-page .address-actions {
    padding: .2em 0 0
}

    .address-page .address-actions a {
        display: table
    }

.address-page .back-address-button {
    display: inlien-block;
    padding: .5em 0;
    font-size: .8em
}