/*

orange
#f37124

blue (standard links)
#017dc7

medium blue
#0167a5

dark blue
#00468c

'black' (standard/paragraph text)
#202020

*/

/*---RESET------------------------------------------------------------------------------------------------------------------------*/
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, 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 {
    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
}

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

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;
    font-family: 'Roboto', Arial, sans-serif;
    color: #202020;
    line-height: 1;
    position: relative
}

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

/*---paragraph text---*/
p {
    font-size: .8em;
    line-height: 1.1875em
}

    p + p {
        padding-top: 1em
    }

    p a {
        font-weight: bold
    }

/*---standard links---*/
a {
    color: #017dc7;
    word-wrap: break-word
}

    a:hover, a:focus {
        color: #0167a5
    }

/*---form reset---*/
textarea {
    resize: none;
    -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"], input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    -webkit-appearance: none
}

input[type="button"] {
    -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
}

::-webkit-input-placeholder {
    color: #636363;
    font-style: italic
}

::-moz-placeholder {
    color: #636363;
    opacity: 1;
    font-style: italic
}

:-ms-input-placeholder {
    color: #636363;
    font-style: italic
}

::input-placeholder {
    color: #636363;
    font-style: italic
}

/*---GENERAL FORMS------------------------------------------------------------------------------------------------------------------*/
form {
}

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

label, legend {
    padding: 0 0 .4em
}

label, legend {
    font-family: 'Roboto Condensed';
    font-size: .8em;
    color: #444
}

label {
    display: table
}

legend {
    max-width: 100%
}

/*---text inputs---*/
input, textarea, select {
    box-sizing: border-box;
    max-width: 100%;
    padding: .7em .6em .6em;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: .2rem;
    font-size: .7em;
    margin: 0 0 1em;
    text-overflow: ellipsis
}

    input:focus, textarea:focus, select:focus {
        border-color: #017dc7
    }

/*---optional fancy select box buttons (wrap <select> with <div class="select-container"><div>...</div></div>)---*/
.select-container {
    margin: 0 0 1em
}

    .select-container > div:first-child {
        display: inline-block;
        max-width: 100%;
        position: relative
    }

        .select-container > div:first-child:before {
            box-sizing: border-box;
            display: block;
            width: 1.5em;
            background: #fff url(images/icons-sprite.svg) no-repeat -8em center;
            background-size: auto .6em;
            border-radius: 0 .2rem .2rem 0;
            content: "";
            position: absolute;
            top: 1px;
            bottom: 1px;
            right: 1px;
            pointer-events: none
        }

    .select-container select {
        margin-bottom: 0;
        -webkit-appearance: none
    }

/*---textareas---*/
textarea {
    overflow: auto
}

/*---checkbox/radio inputs---*/
input[type='checkbox'], input[type='radio'] {
    display: block;
    float: left;
    width: auto;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    margin: .1em 0 0 0;
    opacity: 0
}
    /*---resets some styles from <input>---*/
    input[type='checkbox'] + label, input[type='radio'] + label {
        padding: 0 .5em .6em .5em;
        position: relative
    }

        /*---special checkboxs/radio buttons---*/
        input[type='checkbox'] + label:before, input[type='radio'] + label:before {
            box-sizing: border-box;
            display: block;
            float: left;
            width: .875em;
            height: .875em;
            background: #fff;
            border: 1px solid #888;
            position: absolute;
            top: .05em;
            left: -.875em;
            z-index: 1;
            content: ""
        }

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

    /*---checked state---*/
    input[type='checkbox']:checked + label:before, input[type='radio']:checked + label:before {
        background: #f37124
    }

    /*---hover/checked label states---*/
    input[type='checkbox'] + label:hover, input[type='checkbox']:focus + label, input[type='radio']:not(:checked) + label:hover, input[type='radio']:not(:checked):focus + label {
        color: #017dc7
    }


/*---GENERAL BUTTONS--------------------------------------------------------------------------------------------------------------------*/
button {
    padding: .8em 1em .7em;
    background-color: #f37124;
    border-radius: .2rem;
    font-size: .8em;
    text-transform: uppercase;
    color: #fff;
    margin: 1em 0
}

    button:hover, button:focus {
        background-color: #e26115
    }


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




/*---COMMON-------------------------------------------------------------------------------------------------------------------------*/


/*---in-progress transition state for heightopen jQuery function----*/
.opening {
    overflow: hidden !important
}


/*---social links----------------------------------------------*/
.social-links {
}

    .social-links li {
    }

    .social-links a {
        display: block;
        padding: .7em .8em .7em 2.8em;
        background-color: #f37124;
        border-radius: .2rem;
        font-size: .9em;
        color: #fff;
        position: relative
    }

        .social-links a:before {
            display: block;
            width: 1.5em;
            height: 1.5em;
            background: url(images/icons-sprite.svg) no-repeat -3em center;
            background-size: auto 100%;
            position: absolute;
            left: .8em;
            top: 50%;
            margin: -.75em 0 0 0;
            content: ""
        }
    /*---twitter---*/
    .social-links li:nth-child(2) a:before {
        background-position: -6em center
    }
    /*---facebook---*/
    .social-links li:nth-child(3) a:before {
        background-position: -9em center
    }
    /*---google---*/
    .social-links a:hover, .social-links a:focus {
        background-color: #e66b22
    }

@media (max-width:499px) {
    .follow .social-links a {
        font-size: .8em
    }
}


/*---breadcrumb----------------------------------------------*/
#breadcrumb {
    padding: 0 0 1rem;
    clear: both;
    font-size: .7em;
    color: #545454
}

    #breadcrumb a {
        display: inline-block
    }

.breadcrumb {
    display: none;
}



/*---HEADER-------------------------------------------------------------------------------------------------------------------------*/
header.site {
    position: relative; /*overflow:hidden;*/
    background: #444
}


/*---logo---------------------------------------*/
.header-logo {
    box-sizing: border-box;
    display: table;
    height: 6.5rem;
    max-width: 16rem;
    padding: 1.65em .5em 1em;
    background: #444;
    color: #fff;
    margin: 0 auto
}

    .header-logo:hover {
        color: #000
    }

    .header-logo:focus {
        color: #e11F26
    }

    .header-logo b {
        display: block;
        font: 0/0 a;
        padding: 13.40579710144928% 0 0;
        background: url(images/partsklassik-logo.svg) no-repeat center;
        background-size: contain
    }

    .header-logo span {
        display: block;
        padding: .5em 1.2em 0;
        font-size: .7em;
        letter-spacing: .025em;
        font-style: italic;
        text-align: center
    }

    .header-logo:hover, .header-logo:focus {
        color: #fff
    }

    .header-logo:focus {
        background: radial-gradient(50% 25%, rgba(255,255,255,.3), rgba(255,255,255,0)), #444
    }


/*---header-buttons---------------------------------------*/
.header-buttons {
    display: none;
    float: right;
    overflow: hidden
}

    .header-buttons li {
        float: left
    }

    .header-buttons a {
        box-sizing: border-box;
        display: block;
        width: 3rem;
        height: 4rem;
        padding: .6rem 0 0;
        background: none;
        border-radius: 0;
        font-size: .5em;
        text-align: center;
        color: #fff;
        text-transform: uppercase;
        font-weight: 500;
        margin: 0;
        cursor: pointer
    }

        .header-buttons a:before {
            display: block;
            width: 2.5rem;
            height: 2rem;
            background: url(images/icons-sprite.svg) no-repeat -41.6rem center;
            background-size: auto 1.5rem;
            content: "";
            margin: 0 auto .5em
        }

    .header-buttons li:nth-child(2) a:before {
        background-position: -11.6rem center
    }

    .header-buttons li:nth-child(3) a:before {
        background-position: -44.5rem center
    }


/*---search-----------------------------------*/
.header-search {
}

    .header-search > div {
        padding: .5rem .5rem;
        position: relative
    }

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

    .header-search input {
        width: 100%;
        min-width: 19.5em;
        padding-right: 2.5rem;
        border: none;
        margin: 0
    }

    .header-search button {
        display: block;
        width: 2rem;
        background: url(images/icons-sprite.svg) no-repeat -9.5rem center;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        position: absolute;
        background-size: auto 1rem;
        top: .5rem;
        bottom: .5rem;
        right: .5rem;
        margin: 0;
        overflow: hidden
    }

        .header-search button:before {
            display: block;
            height: 200%;
            content: ""
        }


/*---contact-----------------------------------*/
.header-contact {
    padding: .3em .2em;
    color: #fff;
    font-weight: bold;
    text-align: center
}

    .header-contact a:first-child {
        font-size: 1.1em;
        color: #fff
    }

    .header-contact a:last-child {
        font-size: 1.4em;
        color: #fff
    }


/*---utility menu----------------------------*/
.utility-menu {
    display: none;
    overflow: hidden
}

    .utility-menu li {
        float: left
    }

    .utility-menu a {
        display: block;
        padding: .8em .5em;
        font-size: .8em;
        font-weight: 500;
        color: #fff
    }

        .utility-menu a:hover, .utility-menu a:focus {
            background: #fa823b;
            color: #fff
        }


/*---checkout---------------------------------------*/
.header-checkout {
    display: block;
    padding: .6rem .8rem;
    background: #f37124;
    font-size: .6em;
    font-weight: 600;
    color: #fff;
    line-height: 1.5em
}

    .header-checkout:before {
        display: block;
        float: left;
        width: 1.6rem;
        height: 1.6rem;
        background: url(images/icons-sprite.svg) no-repeat -12.8rem center;
        background-size: auto 100%;
        content: "";
        margin: 0em .7rem 0 0
    }

    .header-checkout span {
        display: block
    }

    .header-checkout:hover, .header-checkout:focus {
        background: #fa823b;
        color: #fff
    }


/*---main menu----------------------------*/
.main-menu {
    background: #ddd;
    overflow: hidden
}

    .main-menu > li {
        float: left
    }

    .main-menu a {
        display: block;
        padding: .8em .5em;
        font-size: .8em;
        font-weight: 500;
        text-transform: uppercase;
        color: #636363
    }

        .main-menu a:hover, .main-menu a:focus {
            background-color: #eee
        }

    /*--- items with submenus ----------*/
    .main-menu > li > a:not(:only-child) {
        display: flex;
        justify-content: center;
        align-content: center;
        gap: .5em
    }

        .main-menu > li > a:not(:only-child)::after {
            display: block;
            width: 1em;
            height: 1em;
            border: 0 solid #636363;
            border-width: 0 .4em .4em 0;
            font-size: .4em;
            rotate: 45deg;
            margin: .2em 0 0;
            content: ""
        }

    /*--- open state ---*/
    .main-menu > li > a.open:not(:hover):not(:focus) {
    }

    .main-menu > li > a.open::after {
        border-color: #f37124
    }

    /*--- submenus ----------*/
    .main-menu ul {
        display: flex;
        flex-wrap: wrap; /*columns:8em 4*/
        ;
        gap: 0;
        visibility: hidden;
        height: 0;
        background-color: #eee;
        overflow: hidden;
        transition: visibility .2s, height .2s;
        z-index: 1000;
    }

        .main-menu ul li {
            flex: 1 0 8em
        }

        .main-menu ul a {
            border: 0 !important;
            font-size: .7em;
            text-align: left;
            outline2: 1px dashed red
        }

            .main-menu ul a:hover, .main-menu ul a:focus {
                background-color: #ddd
            }

        /*--- open state ---*/
        .main-menu ul.open {
            visibility: visible;
            height: auto;
            overflow: visible;
            transition-delay: 0s;
            z-index: 1000;
        }


/*---vehicle selector----------------------------*/
.vehicle-selector {
    padding: .5em .5em;
    background: #bbb;
    overflow: hidden
}

    .vehicle-selector > div:first-child {
        float: left;
        padding: .6em 0 0 0;
        font-size: .9em;
        font-weight: bold;
        color: #636363
    }

    .vehicle-selector label {
        font: 0/0 a
    }

    .vehicle-selector .select-container {
        float: left;
        width: 7rem;
        margin: 0 0 0 1em
    }

.MMY_MainContainer div {
    float: left;
    width: 7rem;
    margin: 0 0 0 1em
}

.vehicle-selector select {
    border: none
}

.vehicle-selector .select-container > div:first-child:before {
    background-position: -11.8em center;
    background-size: auto 1em;
    top: 0;
    bottom: 0;
    right: 0
}

.vehicle-selector .select-container > div:first-child, .vehicle-selector select {
    width: 100%
}

.vehicle-selector .MMY_MainContainer div > div:first-child:before {
    background-position: -11.8em center;
    background-size: auto 1em;
    top: 0;
    bottom: 0;
    right: 0
}

.vehicle-selector .MMY_MainContainer div > div:first-child, .vehicle-selector select {
    width: 100%
}

.MMY_MakeSelect {
    display: none;
}

.vehicle-selector .MMY_MainContainer {
    display: inline;
}

    .vehicle-selector .MMY_MainContainer span {
        display: inline-block;
        margin: 0.4em 0 0 1em;
    }

.vehicle-selector .MMY_go {
    float: right;
}

    .vehicle-selector .MMY_go * {
        display: inline;
        margin: 0 0.5em 0 0;
        cursor: pointer;
    }

    .vehicle-selector .MMY_go .clearMMY a {
        font-size: 0.75em;
        color: #fff;
    }

@media (max-width:799px) {
    header.site {
        padding-top: 2rem
    }

    /*---logo---------------------------------------*/
    .header-logo {
        float: left;
        height: 4rem;
        padding-top: .5em;
        padding-bottom: .2em
    }


    /*---header-buttons---------------------------------------*/
    .header-buttons {
        display: block
    }


    /*---search-----------------------------------*/
    .header-search {
        clear: both;
        height: 0;
        background: #f37124;
        overflow: hidden;
        transition: height .2s
    }

        .header-search > div:first-child {
            border-bottom: 1px solid #be5c22
        }

        /*---open state---*/
        .header-search.open {
            height: auto;
            overflow: visible
        }


    /*---contact-----------------------------------*/
    .header-contact {
        box-sizing: border-box;
        height: 2rem;
        background: #ddd;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        color: #444
    }

        .header-contact a {
            color: #444 !important
        }


    /*---checkout---------------------------------------*/
    .header-checkout {
        display: none
    }


    /*---main menu-----------------------------------*/
    .main-menu {
        visibility: hidden;
        height: 0;
        overflow: hidden;
        transition: visibility .2s, height .2s;
        z-index:1000;
    }

        .main-menu li {
            float: none
        }

        .main-menu a {
            text-align: center
        }

        .main-menu li /*:not(:first-child)*/ a {
            border-top: 1px solid #aaa
        }

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


        /*--- submenus ----------*/
        .main-menu ul {
            box-shadow: inset 0 .05rem .1rem rgba(0,0,0,.4), inset 0 -.025rem .1rem rgba(0,0,0,.3)
        }


    /*---vehicle selector----------------------------*/
    .vehicle-selector {
        clear: both;
        padding-right: 0;
        background: #f37124
    }

        .vehicle-selector:before {
            display: block;
            float: left;
            padding: .9em 0 .7em 0;
            font-size: .7em;
            font-weight: 500;
            color: #fff;
            content: "Vehicle Search"
        }

        .vehicle-selector > div:first-child {
            display: none
        }

        .vehicle-selector .select-container {
            width: 8em;
            margin-left: .5em
        }

            .vehicle-selector .select-container:last-of-type {
                width: -webkit-calc(100% - 14.5rem);
                width: calc(100% - 14.5rem)
            }
}

@media (max-width:499px) {
    header.site {
        padding-top: 1.5rem
    }

    /*---logo---------------------------------------*/
    .header-logo {
        width: -webkit-calc(100% - 8.5rem);
        width: calc(100% - 8.5rem);
        padding-top: .8em
    }

        .header-logo span {
            padding-left: 0;
            padding-right: 0;
            font-size: 60%
        }

    /*---header-buttons---------------------------------------*/
    .header-buttons a {
        width: 2.5rem
    }


    /*---contact-----------------------------------*/
    .header-contact {
        height: 1.5rem;
        font-size: .7em
    }

    /*---vehicle selector----------------------------*/
    .vehicle-selector:before {
        clear: both;
        float: none;
        padding-top: .2em;
        text-align: center
    }

    .vehicle-selector .select-container {
        width: 6.5em;
        margin: 0
    }

        .vehicle-selector .select-container:last-of-type {
            width: -webkit-calc(100% - 7.5rem);
            width: calc(100% - 7.5rem);
            margin-left: .5em
        }
}


@media (min-width:800px) {
    /*---logo---------------------------------------*/
    .header-logo {
        float: left
    }


    /*---header-group-----------------------------------*/
    .header-group {
        box-sizing: border-box;
        height: 3.25rem;
        background: #f37124
    }


    /*---search-----------------------------------*/
    .header-search {
        box-sizing: border-box;
        float: left;
        height: 3.25rem;
        padding-top: .3em
    }


    /*---contact-----------------------------------*/
    .header-contact {
        box-sizing: border-box;
        height: 3.25rem;
        padding-top: .4em
    }

        .header-contact a:first-child {
            display: block
        }


    /*---checkout---------------------------------------*/
    .header-checkout {
        box-sizing: border-box;
        height: 3.25rem;
        width: 7.5rem;
        padding-top: 1.25em;
        padding-bottom: 0;
        background: #aaa;
        position: absolute;
        bottom: 0;
        right: 0
    }

        .header-checkout:hover, .header-checkout:focus {
            background: #888
        }


    /*---main menu-----------------------------------*/
    .main-menu {
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        height: 3.25rem;
        overflow: visible
    }
        /*.main-menu::after {display:block;float:none;width:100%;outline:2px dashed green;content:""}*/
        .main-menu > li {
            float: none;
            position: relative
        }

        /*--- submenus ----------*/
        .main-menu ul {
            min-width: 11rem;
            width: clamp(24rem, 60vw, 35rem);
            position: absolute;
            top: 100%;
            left: -.5rem;
            right: 0;
            z-index: 1;
            border-radius: .05rem;
            box-shadow: 0 .05em .1em rgba(0,0,0,.4)
        }

    /*---vehicle selector----------------------------*/
    .vehicle-selector {
        box-sizing: border-box;
        height: 3.25rem;
        padding-top: .7em;
        padding-right: 8rem
    }

        .vehicle-selector > div:first-child {
            font-size: .7em;
            padding-top: 1em
        }

        .vehicle-selector .select-container {
            width: 6.5em
        }

            .vehicle-selector .select-container:last-of-type {
                width: -webkit-calc(100% - 22rem);
                width: calc(100% - 22rem)
            }
}

@media (min-width:800px) and (max-width:1199px) {
    /*---main menu-----------------------------------*/
    .main-menu > li > a {
        position: relative
    }

    .main-menu > li:not(:first-child) a::before {
        display: block;
        height: 1em;
        width: 2px;
        background: #aaaaaa;
        position: absolute;
        top: 50%;
        left: -1px;
        margin: -.5em 00;
        content: ""
    }
}

@media (min-width:800px) and (max-width:1099px) {
    /*---main menu-----------------------------------*/
    .main-menu > li {
        width: 33.333333%
    }

        .main-menu > li:nth-child(4) {
            clear: left
        }

        .main-menu > li > a {
            padding: .5em .5em;
            text-align: center
        }

        .main-menu > li:nth-child(4) a:before {
            display: none
        }
}

@media (min-width:1000px) {
    /*---contact-----------------------------------*/
    .header-contact {
        padding-top: .8em
    }

        .header-contact a:first-child {
            display: inline
        }




    /*---vehicle selector----------------------------*/
    .vehicle-selector > div:first-child {
        font-size: .9em;
        padding-top: .6em
    }

    .vehicle-selector .select-container {
        width: 8em
    }

        .vehicle-selector .select-container:last-of-type {
            width: -webkit-calc(100% - 27.5rem);
            width: calc(100% - 27.5rem)
        }
}

@media (min-width:1100px) {
    /*---main menu-----------------------------------*/
    .main-menu > li > a {
        padding: 1.55em .7em;
        padding: 1.55em -webkit-calc((100vw - 48rem) / 12);
        padding: 1.55em calc((100vw - 48rem) / 12)
    }

    /*--- submenus ----------*/
    .main-menu ul {
        top: calc(100% - .5rem)
    }
}

@media (min-width:1200px) {
    /*---contact-----------------------------------*/
    .header-contact {
        float: left;
        padding: .4em .5em 0
    }

        .header-contact a:first-child {
            display: block
        }



    /*---utility menu---------------------------------------*/
    .utility-menu {
        box-sizing: border-box;
        display: block;
        float: left;
        height: 3.25rem;
        padding: .4em 0 0 1.5em
    }

        .utility-menu li {
            float: left
        }

            .utility-menu li:nth-child(3) {
                clear: left
            }

        .utility-menu a {
            padding: .5em .5em .2em
        }

        .utility-menu li:nth-child(n+3) a {
            padding-top: .3em;
            padding-bottom: .5em
        }


    /*---checkout---------------------------------------*/
    .header-checkout {
        float: right;
        background: #f37124;
        position: static
    }

        .header-checkout:hover, .header-checkout:focus {
            background: #fa823b
        }


    /*---main menu-----------------------------------*/
    .main-menu {
        float: right
    }

        .main-menu > li:nth-child(n + 4) {
            display: none
        }

        .main-menu > li > a {
            padding-left: 1em;
            padding-right: 1em
        }


        /*--- submenus ----------*/
        .main-menu ul {
            width: 27rem;
            left: -8.5rem
        }


    /*---vehicle selector----------------------------*/
    .vehicle-selector {
        padding: .7em 0 0 .5em;
        background: #ddd
    }

        .vehicle-selector:before {
            display: block;
            float: left;
            padding: .9em 0 .7em 0;
            font-size: .7em;
            font-weight: 500;
            color: #555;
            content: "Vehicle Search"
        }

        .vehicle-selector > div:first-child {
            display: none
        }

        .vehicle-selector .select-container {
            width: 6.5em;
            margin-left: .5em
        }

            .vehicle-selector .select-container:last-of-type {
                width: -webkit-calc(100vw - 51.5rem);
                width: calc(100vw - 51.5rem)
            }
}

@media (min-width:1300px) {
    /*---utility menu---------------------------------------*/
    .utility-menu {
        padding-top: 0
    }

        .utility-menu li {
            clear: none !important
        }

        .utility-menu a {
            height: 3.25rem !important;
            padding-top: 1.65em !important
        }
}

@media (min-width:1400px) {
    /*---contact-----------------------------------*/
    .header-contact {
        padding: 1.6em 0 0 1.5em;
        font-size: .7em
    }

        .header-contact a:first-child {
            display: inline
        }

    /*---vehicle selector----------------------------*/
    .vehicle-selector .select-container {
        width: 8em;
        margin-left: 1em
    }

        .vehicle-selector .select-container:last-of-type {
            width: -webkit-calc(100vw - 54.5rem);
            width: calc(100vw - 54.5rem)
        }
}

@media (min-width:1500px) {
    /*---contact---------------------------------------*/
    .header-contact {
        padding-top: .9em;
        font-size: 1em
    }

    /*---vehicle selector----------------------------*/
    .vehicle-selector:before {
        display: none
    }

    .vehicle-selector > div:first-child {
        display: block
    }

    .vehicle-selector .select-container {
        width: 7em
    }

        .vehicle-selector .select-container:last-of-type {
            width: -webkit-calc(100vw - 65.5rem);
            width: calc(100vw - 65.5rem)
        }
}

@media (min-width:1600px) {
    header.site {
        padding-left: -webkit-calc((100vw - 1600px) /2);
        padding-right: -webkit-calc((100vw - 1600px) /2);
        padding-left: calc((100vw - 1600px) /2);
        padding-right: calc((100vw - 1600px) /2);
        background: #444;
        background: linear-gradient(to right, #444 50%, transparent 50%), linear-gradient(#f37124 3.25rem, #ddd 3.25rem), #444
    }

    /*---search-----------------------------------*/
    .header-search input {
        width: 24em
    }

    /*---utility menu---------------------------------------*/
    .utility-menu {
        padding-left: 2em
    }

    /*---vehicle selector----------------------------*/
    .vehicle-selector .select-container {
        width: 8em
    }

        .vehicle-selector .select-container:last-of-type {
            width: 13.5em
        }
}




/*---CONTENT AREA-------------------------------------------------------------------------------------------------------------------------*/
main {
    clear: both;
    padding: 1rem
}

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

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

@media (min-width:1316px) {
    main {
        ;
        padding-left: -webkit-calc(((100vw - 1316px) / 2) + 1rem);
        padding-right: -webkit-calc(((100vw - 1316px) / 2) + 1rem);
        padding-left: calc(((100vw - 1316px) / 2) + 1rem);
        padding-right: calc(((100vw - 1316px) / 2) + 1rem)
    }
}

/*---content headings-----------------------------------------*/
main h1, main h2, main h3 {
    padding: 1em 0 .4em;
    line-height: 1.2em;
    font-weight: normal
}

main h1 {
    padding-top: 0;
    font-size: 1.8em
}

main h2 {
    font-size: 1.1em
}

main h3 {
    font-size: .9em
}

main h2 + h3 {
    padding-top: 0
}




/*---FOOTER-----------------------------------------------------------------------------------------------------------------------------------*/
footer.site {
}

/*---footer links--------------------------------------------------*/
.footer-links {
    padding: 2em 1.5rem 1em;
    background: #017dc7;
    border: .65em solid #0167a5;
    border-width: .65em 0;
    overflow: hidden
}

    /*---link groups------------------------*/
    .footer-links > li:not(:last-child) {
        padding: 0 0 1em
    }

    /*---group heading---*/
    .footer-links h2 {
        padding: 0 0 .5em;
        font-size: 1.4em;
        color: #fff
    }

    /*---link lists---*/
    .footer-links ul li a {
        display: block;
        padding: .5em 0;
        font-size: .9em;
        color: #fff
    }

        .footer-links ul li a:hover, .footer-links ul li a:focus {
            color: #ddd
        }

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

        .footer-links:after {
            display: inline-block;
            width: 100%;
            content: ""
        }

        /*---link groups------------------------*/
        .footer-links > li {
            display: inline-block;
            vertical-align: top;
            max-width: 14em;
            text-align: left
        }

            .footer-links > li:not(:last-child) {
                padding-right: 2em
            }
}

@media (min-width:850px) {
    .footer-links {
        text-align: justify
    }

        /*---link groups------------------------*/
        .footer-links > li:not(:last-child) {
            padding-right: 2em
        }
}

@media (min-width:1050px) {
    .footer-links {
        padding-left: -webkit-calc(((100vw - 1050px) / 2) + 1.5rem);
        padding-right: -webkit-calc(((100vw - 1050px) / 2) + 1.5rem);
        padding-left: calc(((100vw - 1050px) / 2) + 1.5rem);
        padding-right: calc(((100vw - 1050px) / 2) + 1.5rem)
    }
}


/*---footer bottom--------------------------------------------------*/
.footer-bottom {
    padding: 2.5em 1.5rem 2.5em;
    background: #e4e4e4;
    border: 1px solid #fff;
    border-width: 1px 0;
    box-shadow: inset 0 .65rem #d1d1d1, inset 0 -.65rem #d1d1d1;
    font-size: .7em;
    line-height: 1.4em;
    text-align: center;
    color: #333
}

    .footer-bottom a {
        color: #333
    }

        .footer-bottom a:hover, .footer-bottom a:focus {
            color: #f37124
        }

    .footer-bottom span {
        display: inline-block
    }

@media (min-width:1150px) {
    .footer-bottom {
        padding-left: -webkit-calc(((100vw - 1150px) / 2) + 1.5rem);
        padding-right: -webkit-calc(((100vw - 1150px) / 2) + 1.5rem);
        padding-left: calc(((100vw - 1150px) / 2) + 1.5rem);
        padding-right: calc(((100vw - 1150px) / 2) + 1.5rem)
    }
}




/*---BANNER-----------------------------------------------------------------------------------------------------------------------------------*/
.banner {
    box-sizing: border-box;
    padding: 3rem 1rem;
    background: #222 url() no-repeat center;
    background-size: cover;
    box-shadow: inset 0 .65em rgba(0,0,0,.5), inset 0 -.65em rgba(0,0,0,.5);
    color: #fff;
    text-shadow: .1em .1em .1em rgba(0,0,0,.8);
    margin: -1rem -1rem 1rem;
    position: relative;
    z-index: 1
}

    .banner:after {
        display: block;
        background: rgba(34, 34, 34, .5);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -1;
        content: ""
    }

    .banner h1, .banner h2 {
        padding: 0 0 1.2em;
        font-size: 1.4em;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center
    }

        .banner h1 span, .banner h2 span {
            font-weight: normal
        }

            .banner h1 span i, .banner h2 span i {
                font-style: italic;
                font-weight: bold
            }

    .banner a {
        color: #fff;
        font-weight: inherit
    }

        .banner a:hover, .banner a:focus {
            color: #017dc7
        }

@media (max-width:499px) {
    .banner {
        padding-left: .5rem;
        padding-right: .5rem;
        margin-left: -.5rem;
        margin-right: -.5rem
    }
}

@media (min-width:1000px) {
    .banner {
        min-height: 15rem
    }

        .banner p {
            font-size: 1em;
            font-weight: 500;
            line-height: 1.2em
        }
}

@media (min-width:1100px) {
    .banner {
        min-height: 23rem;
        padding: 5rem -webkit-calc(((100vw - 1100px) / 2) + 1rem);
        padding: 5rem calc(((100vw - 1100px) / 2) + 1rem)
    }
}

@media (min-width:1316px) {
    .banner {
        margin-left: -webkit-calc(((1316px - 100vw) / 2) - 1rem);
        margin-right: -webkit-calc(((1316px - 100vw) / 2) - 1rem);
        margin-left: calc(((1316px - 100vw) / 2) - 1rem);
        margin-right: calc(((1316px - 100vw) / 2) - 1rem)
    }
}


/*---homepage 'about' version-----------------------------------*/
.follow + .banner {
    border: 1px solid #fff;
    border-width: 1px 0;
    margin-bottom: -1rem
}




/*---CATEGORY LISTING----------------------------------------------------------------------------------------------------------------------------------*/
.category-listing {
    clear: both;
    padding: 0 0 1rem
}

    .category-listing li {
        padding: 0 0 1rem
    }

    .category-listing a {
        display: block
    }

        /*---special image container---*/
        .category-listing a > span:first-child {
            display: block;
            padding: 100% 0 0;
            margin: 0 0 .2em;
            position: relative
        }

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

    /*---category title----*/
    .category-listing h2, .category-listing h3 {
        max-height: 1em;
        padding: .7em .4em;
        background: #017dc7;
        border-radius: .2rem;
        box-shadow: 0 .15rem #00468c;
        font-size: .8em;
        font-weight: normal;
        text-align: center;
        text-transform: uppercase;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: background-color .2s
    }

    .category-listing a:hover h2, .category-listing a:focus h2, .category-listing a:hover h3, .category-listing a:focus h3 {
        background: #0167a5
    }

@media (max-width:499px) {
    .category-listing a {
        max-width: 300px;
        margin: 0 auto
    }
}

@media (min-width:500px) {
    .category-listing {
        text-align: center;
        margin: 0 0 0 -1rem
    }

        .category-listing li {
            box-sizing: border-box;
            display: inline-block;
            vertical-align: top;
            width: 50%;
            padding-left: 1rem
        }
}

@media (min-width:750px) {
    .category-listing li {
        width: 33.333333333333%
    }
}

@media (min-width:1000px) {
    .category-listing li {
        width: 25%
    }
}

@media (min-width:1250px) {
    .category-listing li {
        width: 20%
    }
}




/*---PRODUCT LISTING GROUP WRAPPER--------------------------------------------------------------------*/
.listing-group-wrapper {
    position: relative;
    overflow: hidden
}




/*---SORTING------------------------------------------------------------------------------------------------------------------*/
.sorting {
    padding: .6em .5em .2em;
    background: #017dc7;
    border-radius: .2rem;
    margin: 0 0 1em;
    overflow: hidden
}

    /*---heading---*/
    .sorting h2 {
        padding: 0 0 .4em;
        font-size: 1.2em;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff
    }

    /*---sort dropdowns----*/
    .sorting .sort {
    }

        .sorting .sort label {
            float: left;
            padding: .7em .5em .5em 0;
            color: #fff
        }

        .sorting .sort .select-container {
            margin: 0 0 .6em
        }

            .sorting .sort .select-container > div:first-child:before {
                top: 0;
                bottom: 0;
                right: 0
            }

        .sorting .sort select {
            min-width: 5em;
            border: none
        }

    /*---page nav---*/
    .sorting .page-nav {
        font-size: .8em;
        color: #fff;
        text-align: center
    }

        .sorting .page-nav a {
            display: inline-block;
            vertical-align: top;
            width: 2em;
            height: 2em;
            background: url(images/icons-sprite.svg) no-repeat -23.2em center;
            background-size: auto 1em;
            color: #fff;
            overflow: hidden
        }

            .sorting .page-nav a:before {
                display: block;
                height: 200%;
                content: ""
            }

            .sorting .page-nav a:last-of-type {
                background-position: -25.9em center
            }

        .sorting .page-nav div {
            display: inline-block;
            vertical-align: top;
            padding: .5em 0
        }

@media (max-width:399px) {
    /*---sort dropdowns---*/
    .sorting .sort label {
        float: none;
        padding-top: 0
    }
}

@media (min-width:500px) {
    .sorting .sort {
        overflow: hidden
    }

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

            .sorting .sort .select-container:first-of-type {
                margin-right: 1em
            }

        .sorting .sort select {
            max-width: 10em
        }
}

@media (min-width:800px) {
    /*---heading---*/
    .sorting h2 {
        float: left;
        max-width: 60%
    }

    /*---sort dropdowns---*/
    .sorting .sort {
        float: right;
        margin-bottom: .3em
    }

        .sorting .sort label {
            padding-top: .35em;
            padding-right: .2em
        }

        .sorting .sort .select-container {
            margin: 0
        }

            .sorting .sort .select-container:first-of-type {
                margin-right: .5em
            }

            .sorting .sort .select-container > div:first-child:before {
                border-radius: 0
            }

        .sorting .sort select {
            min-width: 4em;
            max-width: 8.5em;
            padding-top: .3em;
            padding-bottom: .3em;
            padding-left: .2em;
            border-radius: 0
        }

    /*---page nav---*/
    .sorting .page-nav {
        float: right;
        font-size: .7em;
        text-align: right
    }
}

@media (min-width:1000px) {
    /*---heading---*/
    .sorting h2 {
        max-width: 50%
    }
}

@media (min-width:1200px) {
    .sorting {
        box-sizing: border-box;
        float: left;
        width: 100%;
        max-width: calc(100% - 13.5rem)
    }

        /*---heading---*/
        .sorting h2 {
            float: left;
            max-width: 45%
        }
}




/*---FILTERS------------------------------------------------------------------------------------------------------------------*/
.filters {
    padding: 0 0 1em
}

    /*---heading---*/
    .filters h2 {
        display: block;
        padding: .9em .2em .8em .8em;
        background: #017dc7;
        border-radius: .2rem;
        font-size: .9em;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff
    }

    /*---attribute groups------------------------------------*/
    .filters > ul {
        padding: .8em;
        background: #ddd;
        border-radius: .2rem
    }

        /*---group heading---*/
        .filters > ul > li h3 {
            padding: 0 0 .4em;
            font-family: 'Roboto Condensed';
            font-size: .9em;
            font-weight: bold;
            text-transform: uppercase
        }

        /*---group---*/
        .filters > ul > li {
            padding: 0 0 .6em
        }

        /*---attribute lists---*/
        .filters > ul ul {
            padding: 0 0 0 .6em
        }

    /*---checkboxes---*/
    .filters input[type='checkbox'] + label:before {
        border: none
    }


@media (max-width:799px) {
    /*---list---*/
    .filters ul ul {
        -webkit-columns: 8em 4;
        -webkit-column-gap: 1em;
        -moz-columns: 8em 4;
        -moz-column-gap: 1em;
        columns: 8em 4;
        column-gap: 1em
    }

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

    /*---checkboxes---*/
    .filters label {
        display: block;
        padding-left: 1.2em !Important
    }

    .filters input[type='checkbox'] + label:before {
        left: 0
    }
}

@media (min-width:800px) {
    .filters {
        float: right;
        width: 10rem
    }

        /*---faux full-height column---*/
        .filters > ul:after {
            display: block;
            width: 10rem;
            background: #ddd;
            border-radius: 0 0 .2rem .2rem;
            position: absolute;
            top: 7em;
            bottom: 0;
            right: 0;
            z-index: -1;
            content: ""
        }
}

@media (min-width:1200px) {
    .filters {
        width: 12.5rem
    }

        /*---faux full-height column---*/
        .filters > ul:after {
            width: 12.5rem
        }
}




/*---PRODUCT LISTING------------------------------------------------------------------------------------------------------------------*/
.product-listing {
    overflow: hidden;
    width: 100%;
}

    .product-listing li {
        padding: 0 0 1.5rem;
        text-align: center
    }

    .product-listing a {
        display: block;
        color: #202020;
        position: relative;
        overflow: hidden
    }

        /*---special image container---*/
        .product-listing a > span:first-child {
            display: block;
            padding: 100% 0 0;
            margin: 0 0 .2em;
            position: relative
        }

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

    /*---product title----*/
    .product-listing h2, .product-listing h3 {
        padding: .8em 0 .5em;
        font-size: .9em;
        text-transform: uppercase
    }

        .product-listing h2 b, .product-listing h3 b {
            display: block;
            font-weight: bold
        }

    /*---price----*/
    .product-listing .price {
        padding: 0 0 .5em;
        font-weight: bold
    }

        .product-listing .price i {
            font-size: .95em;
            font-weight: normal;
            font-style: italic;
            text-transform: lowercase
        }

    /*---free shipping----*/
    .product-listing .free-shipping {
        height: 0;
        width: 0;
        border: 0 solid transparent;
        border-width: 0 2.8em 2.8em;
        border-bottom-color: #f37124;
        position: absolute;
        top: 0;
        right: -2.8em;
        box-shadow: 0 .1em .1em rgba(0,0,0,.35);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform-origin: top center;
        transform-origin: top center
    }

        .product-listing .free-shipping span {
            display: block;
            width: 6em;
            height: 2em;
            position: relative;
            top: 1.75em;
            left: -3em;
            font-size: .65em;
            color: #fff;
            font-weight: bold;
            text-transform: uppercase;
            text-align: center
        }

    /*---rating----*/
    .product-listing .rating {
        padding: 0 0 .8em;
        font-size: .65em
    }

    /*---view details----*/
    .product-listing a:after {
        display: block;
        max-height: 1em;
        padding: .75em .4em .5em;
        background: #017dc7;
        border-radius: .2rem;
        box-shadow: 0 .15rem #00468c;
        font-size: .8em;
        font-weight: normal;
        text-align: center;
        text-transform: uppercase;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0 0 .2rem;
        content: "View Details";
        transition: background-color .2s
    }

    .product-listing a:hover:after {
        background: #0167a5
    }

    .product-listing .MoreProductsPerCat span {
        padding: 0 !important;
    }

.product_list_container h2 {
    clear: both;
}

.product_list_container .product-listing {
    width: 100% !important;
    text-align: left !important;
}

.product-listing .MoreProductsPerCat a:after {
    display: none !important;
}

@media (max-width:499px) {
    .product-listing a {
        max-width: 300px;
        margin: 0 auto
    }
}

@media (min-width:550px) {
    .product-listing {
        text-align: center;
        margin: 0 0 0 -1rem
    }

        .product-listing li {
            box-sizing: border-box;
            display: inline-block;
            vertical-align: top;
            width: 50%;
            padding-left: 1rem
        }

        /*---product title----*/
        .product-listing h2, .product-listing h3 {
            height: 3.6em
        }

            .product-listing h2 b, .product-listing h3 b {
                height: 1.2em;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis
            }
}

@media (min-width:800px) {
    .product-listing {
        max-width: -webkit-calc(100% - 10rem);
        max-width: calc(100% - 10rem);
        float: left
    }
}

@media (min-width:1030px) {
    .product-listing li {
        width: 33.333333333%
    }
}

@media (min-width:1200px) {
    .product-listing {
        max-width: -webkit-calc(100% - 12.5rem);
        max-width: calc(100% - 12.5rem);
        clear: left
    }
}

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




/*---PAGINATION---------------------------------------------------------------------------------------------------------*/
.pagination {
    display: table; /*padding:1em 0;*/
    margin: 0 auto;
    overflow: hidden
}

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

        .pagination li a {
            display: block;
            min-width: 1.2em;
            padding: .6em .5em;
            border: 1px solid #ddd;
            border-width: 1px 0;
            font-size: .8em;
            font-weight: 500;
            text-align: center;
            color: #5b5b5b
        }

        .pagination li:first-child a {
            border-radius: .2rem 0 0 .2rem;
            border-left-width: 1px
        }

        .pagination li:last-child a {
            border-radius: 0 .2rem .2rem 0;
            border-right-width: 1px
        }

        /*---active/hover----*/
        .pagination .active a, .pagination li a:hover, .pagination li a:focus {
            background-color: #5b5b5b;
            color: #fff
        }

    .pagination .active a {
        pointer-events: none
    }

    /*---next----*/
    .pagination .next a {
        background: #f37124;
        color: #fff
    }

        .pagination .next a:after {
            display: inline-block;
            vertical-align: middle;
            height: 1.1em;
            width: 1em;
            background: url(images/icons-sprite.svg) no-repeat -17.7em center;
            background-size: auto .7em;
            content: ""
        }

        .pagination .next a:hover, .pagination .next a:focus {
            background-color: #e3671d
        }

    /*---disabled----*/
    .pagination .next.disabled a {
        background: #ddd;
        pointer-events: none
    }


@media (min-width:800px) {
    .pagination {
        padding-right: 11.5em
    }
}

@media (min-width:1200px) {
    .pagination {
        padding-right: 13.5em
    }
}


/*.Paging { clear: left; }
.Paging:first-of-type pagination {
    padding-right: 0 !important;
}*/


/*---PRODUCT---------------------------------------------------------------------------------------------------------------------------------*/
.product {
}

    .product .product-gallery-items {
        margin: 1em 0 0 0;
    }

        .product .product-gallery-items .gallery-item-inner {
            padding: 0.25em;
        }

/*---product images----------------------------------------------*/
.product-images {
    margin: 0 auto 2em;
    position: relative;
    overflow: hidden
}

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

    /*---image list---------------*/
    .product-images ul {
        margin: 0 0 0 -.8em
    }

        .product-images ul li {
            box-sizing: border-box;
            float: left; /*width:20%*/
            width: 100%;
            padding: 0 0 .8em .8em;
            position: relative
        }

    .product-images li a {
        display: block;
        padding: 100% 0 0;
        margin: 0 auto;
        position: relative;
        transition: border-color .2s
    }

    .product-images li img {
        box-sizing: border-box;
        display: block;
        max-height: 100%;
        border: 0px solid #d4d4d4;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        transition: border-color .2s
    }

    .product-images li a:hover img, .product-images li a:focus img {
        border-color: #962026
    }

    /*.product-images .videoIcon img { margin: auto; }*/
    .product-images .product-gallery-item {
        vertical-align: middle;
    }


    /*---video item----*/
    .product-images .video a {
        position: relative
    }

        .product-images .video a:before, .product-images .video a:after {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            content: ""
        }

        .product-images .video a:before {
            width: 2rem;
            height: 2em;
            border-radius: 50%;
            background: #017dc7
        }

        .product-images .video a:after {
            width: 0;
            height: 0;
            border: 0 solid transparent;
            border-width: .5rem 0 .5rem .8rem;
            border-left-color: #fff;
            left: .2em
        }

        .product-images .video a:hover:before {
            background: #1995e0
        }

    /*---single image----*/
    .product-images li:only-child { /*display:none*/
    }

    /*---background fill----*/
    .product-images li.fill a {
        background: url() no-repeat center;
        background-size: cover;
        border: 1px solid #d4d4d4
    }

    .product-images li.fill img {
        visibility: hidden
    }

    /*---hover/active----*/
    .product-images li.active a {
        pointer-events: none
    }

    .product-images li.active a, .product-images li a:hover {
        border-color: #017dc7
    }

/*---main image------------*/
.main-image {
    padding: 100% 0 0;
    margin: 0 0 .5em;
    position: relative
}

    .main-image img {
        box-sizing: border-box;
        max-height: 100%;
        border: 1px solid #888;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto
    }

@media (max-width:999px) {
    .product-images {
        max-width: 500px
    }
}

@media (min-width:1000px) {
    .product-images {
        box-sizing: border-box;
        float: left;
        width: 56%;
        padding-right: 4%
    }
}

@media (min-width:1100px) {
    .product-images {
        width: 50%;
        padding-right: 8%
    }
}

@media (min-width:1200px) {
    .product-images {
        padding-right: 10%
    }
}


/*---product info group----------------------------------------------*/
.product-info {
    padding: 0 0 2em;
    position: relative;
    overflow: hidden
}

    .product-info h1 {
        padding: .2em 1.5em;
        font-size: 1.8em;
        text-align: center
    }

        .product-info h1 b {
            font-weight: bold;
            text-transform: uppercase;
            text-align: center
        }

    /*---free shipping---*/
    .product-info .free-shipping {
        height: 0;
        width: 0;
        border: 0 solid transparent;
        border-width: 0 2.8em 2.8em;
        border-bottom-color: #f37124;
        position: absolute;
        top: 0;
        right: -2.8em;
        box-shadow: 0 .1em .1em rgba(0,0,0,.35);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform-origin: top center;
        transform-origin: top center
    }

        .product-info .free-shipping span {
            display: block;
            width: 6em;
            height: 2em;
            position: relative;
            top: 1.75em;
            left: -3em;
            font-size: .65em;
            color: #fff;
            font-weight: bold;
            text-transform: uppercase;
            text-align: center
        }

    /*---rating---*/
    .product-info .rating {
        padding: .5em 0;
        text-align: center;
        font-size: 0.95em;
        color: #666;
    }

    /*---price-------------------*/
    .product-info .price {
        text-align: center
    }

        .product-info .price > div {
            padding: .5em 0;
            font-size: .95em;
            color: #666;
            font-weight: bold
        }

            .product-info .price > div span {
                font-weight: normal;
                color: #017dc7
            }

        /*---out of stock---*/
        .product-info .price .out-of-stock span {
            color: #de4520
        }

        /*---regular price---*/
        .product-info .price .regular span {
            text-decoration: line-through
        }

        /*---sale price---*/
        .product-info .price .sale {
            font-size: 1.2em;
            font-style: italic;
            font-weight: normal
        }

            .product-info .price .sale span {
                font-size: 1.1666666666em;
                font-style: normal;
                font-weight: bold;
                color: #f37124
            }

    /*---add-to-cart group-------------------*/
    .product-info .add-group {
        padding-left: 1em !important;
        max-width: 500px;
        padding: .5rem;
        background: #017dc7;
        border-radius: .2rem;
        box-shadow: 0 .15rem #00468c;
        margin: .5rem auto 1em;
        overflow: hidden;
        color: white;
    }

        .product-info .add-group a {
            color: #fff;
        }

    .product-info .exactFit {
        color: #fff;
        padding: 0.5em 0 0 1em;
        display: inline-block;
    }

    /*---fit note---*/
    .product-info .add-group > p:first-child {
        font-family: 'Roboto Condensed';
        font-size: .8em;
        color: #fff;
        text-align: center
    }

    /*---cart add group-------------------*/
    .product-info .add-to-cart-group {
        display: flex;
        ;
        padding: .5em 0 0
    }

@media (max-width:399px) {
    .product-info .add-to-cart-group {
        flex-wrap: wrap;
        justify-content: center
    }
}

.addToCartFormNoMMY {
    margin-top: 1em;
}

    .addToCartFormNoMMY select[name=variantsNoMMY] {
        display: inline-block !important;
        margin-left: 0.5em;
        color: #000
    }

/*---quantity---*/
.product-info .add-group .add-to-cart-quantity {
    flex: 1 0 auto;
    display: block;
    text-align: center;
    margin: 0 0 .5em;
}

    .product-info .add-group .add-to-cart-quantity label {
        display: inline-block;
        vertical-align: top;
        padding: .3em .2em 0 0;
        font-size: 1.2em;
        color: #fff
    }

    .product-info .add-group .add-to-cart-quantity .quantity-field {
        display: inline-block;
        vertical-align: top;
        width: 2em;
        padding: .2em .2em;
        border: none;
        font-size: 1.2em;
        text-align: center;
        margin: 0
    }

/*--- button group ---*/
.product-info .add-group .add-to-cart-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start
}

@media (max-width:399px) {
    .product-info .add-group .add-to-cart-buttons {
        justify-content: center
    }
}


/*---add-to-cart button---*/
.product-info .add-group .add-to-cart-button {
    padding: .7em 2em .6em;
    background: #f37124;
    border: none;
    box-shadow: 0 .15rem #00468c;
    font-size: .8em;
    text-transform: uppercase;
    color: #fff; /*margin:0 .5em .5em 0*/
    ;
    cursor: pointer;
    transform: background-color .2s
}

    .product-info .add-group .add-to-cart-button:hover {
        background: #e5671d
    }

.product-info .add-group .add-to-cart { /* margin: 0 0.5em 0 1em; */
    padding: .7em 2em .6em;
    background: #f37124;
    border: none;
    box-shadow: 0 .15rem #00468c;
    font-size: .8em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 .5em .5em;
    cursor: pointer;
    transform: background-color .2s;
}

    .product-info .add-group .add-to-cart:hover {
        background: #e5671d
    }

/*---wishlist button---*/
.product-info .add-group .add-to-wishlist-button {
    display: none
}

.product-info .add-group .add-to-wishlist { /*display:inline-block;*/
    margin: 0 .5em .5em
}

/*---vehicle selector---*/
.product-info .product-vehicle-selector {
    padding: .5em 0 0
}

    .product-info .product-vehicle-selector label {
        font: 0/0 a
    }

    .product-info .product-vehicle-selector .select-container {
        width: 100%;
        max-width: 14em;
        margin-left: auto;
        margin-right: auto
    }

    .product-info .product-vehicle-selector .select-container {
        margin-bottom: .4em
    }

    .product-info .product-vehicle-selector select {
        border: none
    }

    .product-info .product-vehicle-selector .select-container > div:first-child:before {
        background-position: -11.8em center;
        background-size: auto 1em;
        top: 0;
        bottom: 0;
        right: 0
    }

    .product-info .product-vehicle-selector .select-container > div:first-child, .product-info .product-vehicle-selector select {
        width: 100%
    }

.product-info .product-vehicle-selector {
}


/*---share----------------------------------------------*/
.product-info .share {
    text-align: center
}

    .product-info .share li {
        display: inline-block;
        font-size: .6em;
        margin: 0 0 .5em
    }

    .product-info .share a {
        display: block;
        padding: .5em;
        color: #666
    }

        .product-info .share a:before {
            display: block;
            float: left;
            width: 1.2rem;
            height: 1.2rem;
            background: url(images/icons-sprite.svg) no-repeat -21.6rem center;
            background-size: auto 1.2rem;
            content: "";
            margin: -.4em .5em 0 0
        }

    .product-info .share li:nth-child(2) a:before {
        background-position: -19.2rem center
    }

    .product-info .share a:hover, .product-info .share a:focus {
        color: #333
    }





@media (min-width:500px) and (max-width:799px), (min-width:1000px) {
    .product-info .add-group > p:first-child span {
        display: inline-block
    }

    .product-info .add-to-cart-group { /*float:left;width:50%; margin: 1em 0em 0 0.5em; */
    }

    .product-info .product-vehicle-selector {
        float: left;
        width: 50%
    }

        .product-info .product-vehicle-selector .select-container {
            max-width: 10em
        }
}

@media (min-width:1000px) {
    .product-info {
        float: right;
        width: 44%
    }
}

@media (min-width:1100px) {
    .product-info {
        width: 50%
    }
}


/*---product tabs-----------------------------------------------------*/
.product-tabs {
    clear: both;
    margin: 0 auto;
    overflow: hidden
}

    /*---heading/tab---*/
    .product-tabs > section > h2 {
        padding: .7em 1em;
        background: #fff;
        border: 1px solid #cdcdcd;
        font-size: .7em;
        font-weight: bold;
        cursor: pointer;
        transition: background-color .2s
    }

    .product-tabs > section:not(:first-of-type) h2 {
        border-top-width: 0
    }

    .product-tabs > section > h2:after {
        display: block;
        float: right;
        width: 1em;
        height: 1em;
        background: url(images/icons-sprite.svg) no-repeat -14em center;
        background-size: auto 100%;
        content: "";
        margin: .2em .5em 0 .5em
    }

    .product-tabs > section > h2:hover, .product-tabs > section > h2:focus {
        background: #f7f7f7
    }

    /*---content area------------------*/
    .product-tabs > section > div > div {
        padding: .5rem .7em;
        border: 1px solid #cdcdcd;
        border-width: 0 1px 1px
    }

    /*---headings---*/
    .product-tabs > section h3 {
        font-size: 1.1em
    }

    .product-tabs > section > div > div > h3:first-child {
        padding-top: 0
    }

    /*---callout text---*/
    .product-tabs > section strong {
        color: #ff0000;
        font-weight: normal
    }

    .product-tabs > section .open {
        padding-left: 0.5em;
    }

        .product-tabs > section .open ul.MMY_AlsoFits li {
            font-size: 0.75em;
            width: 48%;
            display: inline-block;
        }

@media (max-width:599px) {
    /*---expander---*/
    .product-tabs > section > div {
        height: 0;
        overflow: hidden;
        transition: height .2s
    }

    /*---open state---*/
    .product-tabs > section > h2.open {
        background: #f2f2f2
    }

        .product-tabs > section > h2.open:after {
            background-position: -32em center
        }

    .product-tabs > section > div.open {
        height: auto
    }
}

@media (min-width:600px) {
    .product-tabs {
        position: relative
    }

        /*---heading/tab---*/
        .product-tabs > section > h2 {
            box-sizing: border-box;
            width: 5.5rem;
            padding: .7em .2em;
            background: #017dc7;
            border-top-width: 1px !important;
            border-bottom: 0;
            border-color: #017dc7;
            color: #fff;
            text-align: center;
            position: relative;
            transition: background-color .2s
        }

            .product-tabs > section > h2:after {
                display: none
            }

            .product-tabs > section > h2:hover, .product-tabs > section > h2:focus {
                background: #39a5e5
            }

        /*---tab positioning---*/
        .product-tabs > section:first-of-type > h2 {
            margin-left: 1rem
        }

        .product-tabs > section:not(:first-of-type) > h2 {
            position: absolute;
            top: 0;
            left: 6.7rem
        }

        .product-tabs > section:nth-of-type(3) > h2 {
            left: 12.4rem
        }

        .product-tabs > section:nth-of-type(4) > h2 {
            left: 18.1rem
        }

        /*---expander---*/
        .product-tabs > section > div {
            height: 0;
            opacity: 0;
            transition: height .1s .1s, opacity .2s 0s;
            overflow: hidden
        }

            /*---content area---*/
            .product-tabs > section > div > div {
                padding: 1em 0;
                border: none
            }

        /*---open state---*/
        .product-tabs > section > h2.open {
            background: #fff;
            color: #000;
            border-color: #cdcdcd;
            pointer-events: none
        }

        .product-tabs > section > div.open {
            height: auto;
            opacity: 1;
            overflow: visible;
            transition-delay: .1s, .2s
        }

        .product-tabs > section > div > div.open2 {
            z-index: 1;
            opacity: 1;
            transition-delay: .2s
        }
}

@media (min-width:1000px) {
    .product-tabs {
        box-sizing: border-box;
        clear: left;
        float: left;
        width: 56%;
        padding-right: 4%
    }
}

@media (min-width:1100px) {
    .product-tabs {
        width: 50%;
        padding-right: 8%
    }
}


/*---related products----------------------------------------------*/
.product .product-listing {
    max-width: none
}

@media (min-width:800px) {
    .product .product-listing li {
        width: 33.333333333%
    }
}

/*---(first instance)---*/
@media (max-width:999px) {
    .product .related-products:first-of-type {
        display: none
    }
}

@media (min-width:1000px) {
    .product .related-products:first-of-type {
        clear: right;
        float: right;
        width: 44%
    }

        .product .related-products:first-of-type h2 {
            padding-top: 0
        }

        .product .related-products:first-of-type .product-listing li {
            width: 50%
        }

    .product .product-listing li:nth-child(n + 5) {
        display: none
    }
}

@media (min-width:1100px) {
    .product .related-products:first-of-type {
        width: 50%
    }
}


/*---(second instance)---*/
@media (min-width:1000px) {
    .product .related-products:last-of-type {
        display: none
    }
}





/*---ROTATOR---------------------------------------------------------------------------------------------------------------------------------*/
.rotator {
    background: #000;
    margin: -1rem -1rem 1rem
}

    .rotator li {
        width: 100%
    }

    .rotator img {
        width: 100%;
        margin: 0 auto
    }

@media (max-width:499px) {
    .rotator {
        margin-left: -.5rem;
        margin-right: -.5rem
    }
}

@media (min-width:1316px) {
    .rotator {
        margin-left: -webkit-calc(((1316px - 100vw) / 2) - 1rem);
        margin-right: -webkit-calc(((1316px - 100vw) / 2) - 1rem);
        margin-left: calc(((1316px - 100vw) / 2) - 1rem);
        margin-right: calc(((1316px - 100vw) / 2) - 1rem)
    }
}




/*---FOLLOW---------------------------------------------------------------------------------------------------------------------------------*/
.follow {
    padding: 1em 1rem;
    background: #017dc7;
    border: .65em solid #0167a5;
    border-width: .65em 0;
    margin: 0 -1rem;
    overflow: hidden
}

    .follow section {
    }

    .follow h2 {
        font-size: 1.4em;
        font-weight: bold;
        color: #fff
    }

    /*---email signup------------------------------------*/
    .follow label {
        font: 0/0 a
    }

    .follow input {
        float: left;
        width: -webkit-calc(100% - 6.6rem);
        width: calc(100% - 6.6rem);
        max-width: 16.9em;
        height: 2.15rem;
        border: none;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        box-shadow: 0 .15rem #00468c;
        font-size: .9em
    }

    .follow ::-webkit-input-placeholder {
        color: #8d909b;
        font-style: normal
    }

    .follow ::-moz-placeholder {
        color: #8d909b;
        font-style: normal
    }

    .follow :-ms-input-placeholder {
        color: #8d909b;
        font-style: normal
    }

    .follow ::input-placeholder {
        color: #8d909b;
        font-style: normal
    }

    .follow button {
        box-sizing: border-box;
        display: block;
        width: 6.6rem;
        height: 2.15rem;
        padding: .6em .8em .6em 2.8em;
        background-color: #f37124;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        box-shadow: 0 .15rem #00468c;
        font-size: .9em;
        text-transform: none;
        font-weight: normal;
        color: #fff;
        position: relative;
        margin: 0
    }

        .follow button:before {
            display: block;
            width: 1.2em;
            height: 1.2em;
            background: url(images/icons-sprite.svg) no-repeat 0 center;
            background-size: auto 100%;
            position: absolute;
            left: .8em;
            top: 50%;
            margin: -.6em 0 0 0;
            content: ""
        }

        .follow button:hover, .follow button:focus {
            background-color: #e66b22
        }

    /*---social links------------------------------------*/
    .follow .social-links {
        padding: 0 0 .5em;
        overflow: hidden
    }

        .follow .social-links li {
            float: left;
            margin: 0 1em 1em 0
        }

            .follow .social-links li:last-child {
                margin-right: 0
            }

        .follow .social-links a {
            box-shadow: 0 .15rem #00468c
        }


@media (max-width:499px) {
    .follow {
        padding-left: .5rem;
        padding-right: .5rem;
        margin-left: -.5rem;
        margin-right: -.5rem
    }

        /*---email signup------------------------------------*/
        .follow input {
            width: -webkit-calc(100% - 5.8rem);
            width: calc(100% - 5.8rem);
            max-width: 16em;
            height: 1.9rem;
            font-size: .8em
        }

        .follow button {
            width: 5.8rem;
            height: 1.9rem;
            font-size: .8em
        }

        /*---social links------------------------------------*/
        .follow .social-links li {
            margin-right: .5em;
            margin-bottom: .6em
        }
}

@media (min-width:430px) and (max-width:919px) {
    .follow section {
        display: table;
        min-width: 372px;
        margin: 0 auto
    }

    .follow input {
        max-width: none
    }
}

@media (min-width:500px) and (max-width:919px) {
    .follow section {
        min-width: 436px
    }
}

@media (min-width:920px) {
    .follow {
        text-align: center
    }

        .follow section {
            display: inline-block;
            vertical-align: top;
            text-align: left
        }

            .follow section:first-of-type {
                padding-right: 3%
            }
}

@media (min-width:1100px) {
    .follow {
        padding: 1rem -webkit-calc(((100vw - 1100px) / 2) + 1rem);
        padding: 1rem calc(((100vw - 1100px) / 2) + 1rem)
    }

        .follow section:first-of-type {
            padding-right: 8%
        }

        /*---email signup------------------------------------*/
        .follow input {
            max-width: none
        }
}

@media (min-width:1316px) {
    .follow {
        margin-left: -webkit-calc(((1316px - 100vw) / 2) - 1rem);
        margin-right: -webkit-calc(((1316px - 100vw) / 2) - 1rem);
        margin-left: calc(((1316px - 100vw) / 2) - 1rem);
        margin-right: calc(((1316px - 100vw) / 2) - 1rem)
    }
}




/*---CAROUSEL---------------------------------------------------------------------------------------------------------------------------*/
.carousel {
    padding: 1.5em 2.5rem;
    background: #ddd;
    border: .6em solid #ccc;
    border-width: .6em 0;
    margin: 0 -1rem
}

    .carousel li {
        background: url() no-repeat center;
        background-size: cover;
        margin: 0 .3em;
        position: relative
    }

        .carousel li:before {
            display: block;
            padding: 100%0 0;
            content: "";
            position: relative
        }

        .carousel li img {
            display: block;
            max-height: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto
        }

/*---background fill----*/
.category-listing li.fill {
}

    .category-listing li.fill img {
        visibility: hidden
    }

@media (max-width:499px) {
    .carousel {
        margin-left: -.5rem;
        margin-right: -.5rem
    }
}

@media (min-width:1316px) {
    .carousel {
        margin-left: -webkit-calc(((1316px - 100vw) / 2) - 1rem);
        margin-right: -webkit-calc(((1316px - 100vw) / 2) - 1rem);
        margin-left: calc(((1316px - 100vw) / 2) - 1rem);
        margin-right: calc(((1316px - 100vw) / 2) - 1rem)
    }
}




/*---SLICK CAROUSEL---------------------------------------------------------------------------------------------------------------------------*/

/*---base styles-------------------------------*/
.slick-slide {
    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-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 {
    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
}


/*---custom------------------------------------------------------------*/
.slick-slider {
    position: relative
}

/*---nav buttons----*/
.slick-arrow {
    display: block;
    width: 2.5rem;
    height: 100%;
    background: none;
    background-size: auto 1.5rem;
    position: absolute;
    top: 0;
    z-index: 1;
    overflow: hidden;
    margin: 0
}

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

    .slick-arrow:after {
        display: block;
        width: 100%;
        height: 4rem;
        background: url(images/icons-sprite.svg) no-repeat -49.9rem center;
        background-size: auto 2.5rem;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin: -2rem auto 0;
        content: ""
    }

    .slick-arrow:hover, .slick-arrow:focus {
        background-color: transparent
    }

.slick-prev {
    left: 0
}

.slick-next {
    right: 0
}

    .slick-next:after {
        background-position: -55.1rem center
    }





/* COMPUNIX ADDED */
a.sub-entity-name-link { /*font-size: 0.8em;*/
}

a.sub-entity-image-link img {
    margin: auto;
}

#apscInfo {
    font-size: 0.9em;
    margin-top: 1em;
}

.cc-images img {
    display: inline-block;
}

.ResultsArea div.PageNumberDisplay {
    display: none;
}

.listing-group-wrapper .sorting .PageNumberDisplay, .listing-group-wrapper .sorting .PageCountDisplay {
    display: inline-block;
    margin: 0.4em 0 0 2em;
    color: #fff;
    font-size: 0.8em;
}

img#LoadingImage {
    display: none;
}

.LoadingImage {
    display: block;
}

.LoadingOverLay {
    opacity: 0.5;
    filter: alpha(opacity = 50);
    border: dashed 0px #4776bd;
    background-color: #fcfcfc;
    display: inline;
}

.RestingOverLay {
    border: 0;
}

.RestingImage {
    display: none;
}

div.vinLookup {
    text-align: left;
    padding-top: 20px;
}

    div.vinLookup label {
        font-weight: bold;
    }

    div.vinLookup #txtVIN {
        /*width: 140px;
    border: 1px solid #404040;
    color: #404040;
    height: 22px;
    vertical-align: top;*/
        display: inline-block;
    }

    div.vinLookup input[type=button] {
        display: inline-block;
        margin: 0 0 0 20px; /*padding: 2px; height: 22px; font-size: 1em; width: 22px;*/
    }

    div.vinLookup #VinResponse {
        display: block;
    }

/* Compunix MMY List */
#selectListMMY {
    border: solid 1px #cecece;
    background-color: #f9f9f9;
    padding: 10px;
    margin: 0 0 10px 0;
    /*radius*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    /*end radius*/
}

section#selectListMMY {
    margin: 3em 0 1em 0;
}

#selectListMMY ul {
    padding: 0;
    margin: 10px;
}

    #selectListMMY ul li {
        display: inline-block;
        width: 32%;
    }

#selectListMMY .ListMMYMakeTitle, #selectListMMY .ListMMYModelTitle, #selectListMMY .ListMMYYearTitle {
    font-weight: bold;
    display: block;
    margin: 0 0 5px 0;
    width: 100%;
}

#selectListMMY .listMakes {
    float: left;
    width: 24%;
}

#selectListMMY .listModels {
    float: left;
    width: 24%;
}

#selectListMMY .listYears {
    float: left;
    width: 24%;
}

    #selectListMMY .listModels h3, #selectListMMY .listYears h3 {
        border: 0;
        margin: 0 0 0 10px;
        padding: 0;
        font-size: 0.9em;
        font-weight: normal;
    }

#selectListMMY .vinLookup {
    text-align: left;
}

ul.ListMMYCategories {
    margin: 0;
    padding: 0 0 0 10px;
}

    ul.ListMMYCategories li {
        margin: 0;
        padding: 2px;
        font-size: 0.9em;
    }

@media (max-width:1199px) {
    ul.ListMMYCategories li {
        width: 49% !important;
    }
}

@media (max-width:800px) {
    ul.ListMMYCategories li {
        width: 99% !important;
    }
}

/* COMPUNIX cart object updates */
.account-page > .account-form, #ctl00_PageContent_pnlAddress, #ctl00_PageContent_pnlSubTotals, #ctl00_PageContent_ctl00_ctrlLogin_FormPanel {
    border: 1px solid #cecece;
    border-radius: 5px;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
    margin: 5px 5px 20px 5px;
    padding: 10px;
    background-color: #f9f9f9;
}

.cart-column-edit .delete-wrap a {
    font-size: 0.7em;
    font-weight: normal;
}

#ctl00_PageContent_pnlGiftCard, #ctl00_PageContent_pnlPromotion {
    width: 47%;
    min-width: 320px;
    float: right;
    padding: 10px;
}

#ctl00_PageContent_pnlOrderNotes {
    display: block;
    padding: 10px;
}

#ctl00_PageContent_pnlSubTotals div {
    margin: 0;
    text-align: right;
}


.order-table .table-header span {
    font-weight: bold;
}


.button {
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 0.8em;
    background-color: #666;
    /*padding-bottom: 5px;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 5px;*/
    padding: 0.7em 1em .6em;
    display: inline;
}

.call-to-action, .vinLookup input[type=button], .update-account-button, .update-button, #ctl00_PageContent_btnSearch {
    padding: .7em 2em .6em;
    background: #f37124;
    border: none;
    box-shadow: 0 .15rem #00468c;
    font-size: .8em;
    text-transform: uppercase;
    color: #fff;
    margin: .4em auto 0;
    cursor: pointer;
    transform: background-color .2s;
}

.button-checkout-now, .add-to-cart {
    margin: 5px 3px 0 3px;
    /* display: inline; */
}



.form-group {
    margin-bottom: 10px;
}

div.nick-name, div.residence-type, .account-form .form-group {
    width: 47% !important;
    min-width: 320px !important;
    padding: 5px !important;
    display: block;
}

div.address-one {
    padding: 5px !important;
    display: block !important;
}

div.first-name, div.last-name, div.phone-number, div.phone, div.company, div.address-two, div.suite, div.city, div.state, div.country, div.zip-code, div.password-one, div.password-two, div.login-form .form-group,
#ctl00_PageContent_pnlContact .form-group {
    /*width: 50% !important;*/
    min-width: 320px !important;
    padding: 5px !important;
    display: inline-block !important;
    margin: 0 !important;
}

#ctl00_PageContent_pnlContact .form-group {
    width: 49% !important;
}

    #ctl00_PageContent_pnlContact .form-group:nth-last-of-type(3) {
        /*comment block on contact*/
        width: 100% !important;
        display: block !important;
    }

.cart-summary-discount {
    color: #4681c7;
}

/* Compunix - cSearch */
div.YouSave {
    font-size: 120%;
    color: Red;
    margin: 5px 0 0 0;
}

div.AddToCart {
    margin: 5px 0 0 0;
}

a.Page {
    margin: 0 4px 0 4px;
}

span.CurrentPage {
    font-weight: bold;
    margin: 0 2px 0 2px;
}

.FirstPage, .LastPage {
    font-size: 90%;
    margin: 0 6px 0 6px;
}

.PreviousPage, .NextPage {
    margin: 0 2px 0 2px;
}

.filtersWrapper, .divSearchWrapper {
    border-radius: 5px;
    border: solid 1px #c2c2c2;
    background-color: #f9f9f9;
    padding: 10px;
    margin-bottom: 20px;
}

    .filtersWrapper .filterWrapper {
        display: inline-block;
        width: 49%;
        min-width: 300px;
    }

    .divSearchWrapper * {
        display: inline-block;
    }

    .divSearchWrapper label { /*font-size: 10px;*/
    }

    .divSearchWrapper h5 {
        display: inline-block;
    }

#ctl00_PageContent_btnSearch {
    margin: 0 10px 0 10px;
    padding: 10px;
    border: solid 2px black;
}

.divPaging {
    text-align: right;
    margin: 10px;
    font-size: 0.8em;
}

.pageControlsWrapper {
    border-top: solid 1px #c2c2c2;
    border-bottom: solid 1px #c2c2c2;
    padding: 5px 10px 8px 10px;
    margin-bottom: 10px;
}

    .pageControlsWrapper .pageControlWrapper {
        display: inline-block;
        width: 33%; /*min-width: 175px;*/
        font-size: 0.9em;
    }

        .pageControlsWrapper .pageControlWrapper b {
            display: block;
            font-weight: normal;
        }

#ctl00_PageContent_tblDisplay {
    margin-top: 1.5em;
}

#ctl00_PageContent_dlResultGrid {
    width: 100%;
}

    #ctl00_PageContent_dlResultGrid br {
        display: none;
    }

    #ctl00_PageContent_dlResultGrid > span {
        display: inline-block;
        width: 33%;
        min-width: 150px;
        vertical-align: top;
    }

div#csTopics {
    border: solid 1px #c2c2c2;
    padding: 10px;
    margin: 20px;
    background-color: #f9f9f9;
}

    div#csTopics .topicsWrapper {
        margin: 10px 5px 0 5px;
        display: block;
        overflow: visible;
    }

        div#csTopics .topicsWrapper div {
            width: 100%;
            margin: 3px;
        }

            div#csTopics .topicsWrapper div span {
                color: #606060;
            }

h6, #ctl00_PageContent_dvRefine {
}

#ctl00_PageContent_divRefine .filterWrapper { /*font-size: 0.8em;*/
}

.searchPageWrapper .product-listing {
    width: 100%;
    max-width: 100%;
}

    .searchPageWrapper .product-listing li {
    }

.pageControlsWrapper .pageControlWrapper:nth-of-type(3) {
    display: none;
}

span#ctl00_PageContent_rbAndOr input[type='checkbox'] + label::before,
span#ctl00_PageContent_rbAndOr input[type='radio'] + label::before {
    left: -0.4em;
}

@media (min-width:550px) {
    .searchPageWrapper .product-listing li {
        width: 49%;
    }
}

@media (min-width:1030px) {
    .searchPageWrapper .product-listing li {
        width: 32.333333333%
    }
}

@media (min-width:1300px) {
    .searchPageWrapper .product-listing li {
        width: 24%
    }
}

/* Compunix - tSearch */
#tsearch_results {
    margin: 35px 0 0 3px;
    padding: 0;
    width: 265px;
    border: solid 1px #deedff;
    display: none;
    position: absolute;
    background-color: #f2f2f2;
    line-height: 100%;
    /*top: 86px;*/
    border-top: solid 0px #999999;
    z-index: 101;
}

    #tsearch_results ul {
        margin: 0;
        padding: 5px;
    }

        #tsearch_results ul li {
            clear: both;
            list-style: none;
            display: block;
            padding: 2px;
            text-align: left;
            font-size: 0.75em;
        }

            #tsearch_results ul li a, #tsearch_results ul li a:visited {
                text-decoration: none;
                color: #666666;
            }

                #tsearch_results ul li a:hover {
                    text-decoration: underline;
                }

                #tsearch_results ul li a z {
                    color: Red;
                    font-size: 100%;
                }

            #tsearch_results ul li.tSearchEntityHeader {
                font-weight: bold;
                padding: 10px 0 0 0;
            }

            #tsearch_results ul li img {
                float: left;
                height: 50px !important;
                margin: 0 4px 0 -2px;
            }

    #tsearch_results .tSearchTopX {
        float: left;
        padding: 3px;
        color: #666666;
    }

    #tsearch_results .tSearchViewAll {
        float: right;
        padding: 3px;
        color: #666666;
    }
/* END Compunix - tSearch */


/* COMPUNIX REVIEWS */
#CompunixProductReviews {
    font-size: 12px
}

    #CompunixProductReviews select {
        font-size: 12px
    }

    #CompunixProductReviews .ReviewsStats {
        float: left;
        background-color: #f4f4f4;
        width: 190px;
        padding: 5px 10px 10px 10px
    }

        #CompunixProductReviews .ReviewsStats .StatsLine .StarNo,
        #CompunixProductReviews .ReviewsStats .StatsLine .ProgressBar,
        #CompunixProductReviews .ReviewsStats .StatsLine .StatsInfo {
            float: left;
            padding-right: 5px
        }

        #CompunixProductReviews .ReviewsStats .StatsLine {
            clear: left
        }

        #CompunixProductReviews .ReviewsStats .ReviewsCount {
            padding-bottom: 5px;
            font-size: 14px
        }

    #CompunixProductReviews .ProgressBar {
        background: url("../../images/reviewprogressbg.png") no-repeat scroll left top transparent;
        width: 75px; /* 4px less than the image */
        height: 17px;
        z-index: 0;
    }

    #CompunixProductReviews .ProgressBarValue {
        background: url("../../images/reviewprogressvalue.png") repeat scroll left top transparent;
        background-position: 3px 0px;
        height: 17px; /* width is calculated in % */
        z-index: 1;
        margin-left: 2px;
    }

    #CompunixProductReviews .ReviewWritePrompt {
        padding-bottom: 5px;
        font-size: 14px
    }

    #CompunixProductReviews .ReviewWriteWrapperOuter {
        padding: 5px 10px 10px 10px;
        width: 520px;
        margin-left: 10px;
        float: left;
        background-color: #f4f4f4
    }

    #CompunixProductReviews #ReviewWriteText {
        width: 420px;
        height: 90px;
        overflow-y: scroll;
    }

    #CompunixProductReviews .ReviewWriteBox {
        float: left;
        width: 425px
    }

    #CompunixProductReviews .ReviewWriteRatings {
        float: left;
    }

    #CompunixProductReviews .ReviewWriteSubmit {
        padding-top: 20px;
        text-align: right;
        font-weight: bold;
    }

        #CompunixProductReviews .ReviewWriteSubmit #btnReviewSubmit {
            padding: 10px;
            font-weight: bold;
        }

    #CompunixProductReviews .ReviewWriteRatings .ReviewWriteRatingDropdown {
        margin-bottom: 5px;
        margin-top: 10px;
    }

        #CompunixProductReviews .ReviewWriteRatings .ReviewWriteRatingDropdown select {
            width: 500px
        }

    #CompunixProductReviews .ReviewsList {
        clear: left;
        padding-top: 30px
    }

        #CompunixProductReviews .ReviewsList .Review {
            padding: 10px;
            border-top: dashed 1px #d6d6d6
        }

            #CompunixProductReviews .ReviewsList .Review .ReviewRatings {
                width: 570px
            }

            #CompunixProductReviews .ReviewsList .Review .ReviewRating {
                margin-right: 0px;
            }

                #CompunixProductReviews .ReviewsList .Review .ReviewRating span {
                    display: inline-block;
                    width: 430px;
                }

                #CompunixProductReviews .ReviewsList .Review .ReviewRating img {
                    display: inline-block;
                }

            #CompunixProductReviews .ReviewsList .Review .ReviewText {
                clear: left;
                font-style: italic;
                padding-top: 10px;
            }

            #CompunixProductReviews .ReviewsList .Review .ReviewRating span {
                padding-top: 5px;
                float: left
            }

            #CompunixProductReviews .ReviewsList .Review .ReviewRatings {
                margin-bottom: 10px
            }

            #CompunixProductReviews .ReviewsList .Review .ReviewSign {
                text-align: right
            }

    #CompunixProductReviews #ReviewSubmitWarning {
        padding-top: 10px;
        text-align: right;
        color: red
    }

    #CompunixProductReviews .ReviewsPaging {
        text-align: right;
        color: black;
        font-size: 14px;
        border-top: dashed 1px #d6d6d6;
        padding-top: 10px
    }

        #CompunixProductReviews .ReviewsPaging a {
            text-decoration: none;
            color: black
        }

        #CompunixProductReviews .ReviewsPaging span {
            padding: 0px 3px 0px 3px
        }

        #CompunixProductReviews .ReviewsPaging .ReviewsActualPage {
            background-color: #96cb00
        }

    #CompunixProductReviews .ReviewWaitingForApproval {
        padding-top: 20px;
        float: left; /*width:145px*/
    }

.CompunixCategoryProductRating {
    padding: .5em 0;
}

    .CompunixCategoryProductRating img {
        display: inline-block;
        vertical-align: bottom;
        position: inherit;
    }

div.product-image-column .CompunixCategoryProductRating {
    text-align: center;
}
/* END COMPUNIX REVIEWS */

/* COMPUNIX SHIPPING NOTE*/
div.compunixShippingNote {
    float: right;
    display: inline-block;
    text-align: center;
    border: solid 3px black;
    padding: 1em;
    width: calc(100% - 350px);
    min-width: 300px
}

main #ctl00_PageContent_pnlCartAllowsShippingMethodSelection {
    display: inline-block;
}

.compunixShippingNote + .group-header {
    clear: both;
}
/* COMPUNIX SHIPPING NOTE - END*/

.parts-request-items li > div {
    width: 710px !important;
}

.parts-request-items input:first-of-type {
    width: 272px !important;
}


div.slick-track {
    width: 100% !important;
}

    div.slick-track iframe {
        width: 100% !important;
    }


.social-links a:before {
    background: url(images/social/social.png) no-repeat left center !important;
}
/*---instagram---*/
.social-links li:nth-child(2) a:before {
    background: url(images/social/facebook.png) no-repeat left center !important;
}
/*---facebook---*/
.social-links li:nth-child(3) a:before {
    background: url(images/social/video.png) no-repeat left center !important;
}
/*---youtube---*/

.divSearchRefine + #ctl00_PageContent_tblDisplay {
    margin-top: 2.5em;
}

    .divSearchRefine + #ctl00_PageContent_tblDisplay .sort-options {
        border-bottom: 1px solid #c2c2c2;
        border-top: 1px solid #c2c2c2;
        padding-top: -1em;
        margin-bottom: -1em;
    }

        .divSearchRefine + #ctl00_PageContent_tblDisplay .sort-options li {
            display: inline-block;
            padding-right: 20%;
        }

            .divSearchRefine + #ctl00_PageContent_tblDisplay .sort-options li:first-of-type {
                display: block;
                position: relative;
                top: -1em;
            }

                .divSearchRefine + #ctl00_PageContent_tblDisplay .sort-options li:first-of-type label {
                    font-size: 20px;
                    font-family: "Roboto",Arial,sans-serif;
                    color: black;
                }

.divSearchRefine #ctl00_PageContent_btnSearch {
    margin-right: 30px;
}

.checkbox input[type=checkbox], .credit-card-form input[type=checkbox] {
    opacity: inherit;
    margin-right: 0.75em;
}


@media (max-width:999px) {
    .product .other-options + .related-products {
        display: none
    }

    .product .other-options, .product .other-options:first-of-type {
        width: 100%
    }
}

@media (min-width:1000px) {
    .product .other-options:first-of-type {
        clear: right;
        float: right;
        width: 44%
    }

        .product .other-options:first-of-type h2 {
            padding-top: 0
        }

        .product .other-options:first-of-type .product-listing li {
            width: 50%
        }

    .product .other-options + .related-products {
        clear: right;
        float: right;
        width: 44%
    }

        .product .other-options + .related-products h2 {
            padding-top: 0
        }

        .product .other-options + .related-products .product-listing li {
            width: 50%
        }

        .product .other-options + .related-products h2 {
            margin-top: 20px
        }
}

@media (min-width:1100px) {
    .product .related-products {
        width: 50%
    }
}

.product-listing .price i {
    text-transform: none;
}


#walletUseCardWrap span input {
    opacity: 1;
}

#ctl00_PageContent_CimWalletSelector_PanelWallet::before {
    content: 'Saved Credit Cards:';
    display: block;
    font-weight: bold;
}

#ctl00_PageContent_CimWalletSelector_PanelWallet div.page-row div.one-third div {
    font-size: 0.7em;
}

#ctl00_PageContent_CimWalletSelector_PanelWallet div.page-row div.one-third:nth-of-type(1) {
    width: 30px;
}

#ctl00_PageContent_CimWalletSelector_PanelWallet div.page-row div.one-third:nth-of-type(2) {
    width: 70px;
}


.ctooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    font-size: 65%;
    position: relative;
    top: -5px;
    border-bottom-width: 0px;
}

    .ctooltip .ctooltiptext {
        visibility: hidden;
        position: absolute;
        width: 120px;
        background-color: #555;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.3s;
        top: -5px;
        bottom: auto;
        right: 128%;
    }

        .ctooltip .ctooltiptext::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 100%;
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent transparent #555;
        }

    .ctooltip:hover .ctooltiptext {
        visibility: visible;
        opacity: 1;
    }

    .ctooltip a {
        color: black;
    }

@media (max-width:599px) {
    .row-checkout-controls > div, .signin-row > div {
        display: block;
        float: none;
        width: auto
    }
}