﻿@charset "UTF-8";
/* Web Solutions 4.0 Compatible */
* {margin:0;padding:0;border:0;outline:none;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-box-sizing:border-box}
ul li{list-style:none}
html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr{font-family:inherit; font-size:inherit; font-style:inherit;font-weight:inherit}
table {border-collapse:collapse}
td, th {empty-cells:show;vertical-align:top;text-align:left}
body {background:#fff; padding-top: 4.188rem}
.management {padding-top: 6.15em}
#skipNavigation{background:#fff;color:#000;padding:.5em;position:absolute;left:0;top:-100px;z-index:10}
	#skipNavigation:focus,#skipNavigation:active{top:0;}
/*page widths*/
body>header, body>nav, main, body>footer, #alertApp{width:100%;float:left;clear:left;padding:0 1em;display:block;}
body>*>.wrap, body>footer>.fatFooter,#alertApp>*, #vehicleList > section .wrap{max-width:75em; width:100%; margin-left:auto;margin-right:auto;position:relative;overflow:auto}

/* text */
body, .text, input, button, .cmsTable th{font-family:"museo-sans", sans-serif;line-height:1.8em;color:#000; font-weight:300}

a, a *{color:#0057b8;text-decoration:none}
a:hover, a:active, a:hover *, a:active *{color:#febb21}
#content a {font-weight:500}
p,h1,h2,h3,h4, h5,hr,.content ul,.contentEditor ul,blockquote,dd,ol{margin-bottom:1em}
h1, h2, h3, h4, h5, h6, h7, h8, h9, th{font-weight:900; font-family: "museo-sans-condensed", sans-serif; line-height: 110%}
p + h2, p + h3, p + h4, p + h5, p + h6 {margin-top:1.3em;}
.textColor, h1, h2, h3, h4, h5, h6, h7, h8, h9, th, dt{color:#31659b}
em, i, q, cite, .italic{font-style: italic}
b, strong{font-weight:700}
u { text-decoration:none}
hr{border-top:1px solid rgba(0,0,0,.15);margin:1em 0;padding-top:1px}
p, .content ul, .content ol{font-size:1em; margin-bottom: 1em}
h1, .content article.blog>h1{font-size:2.625em; font-style: italic; text-transform: uppercase; color: #000; margin-bottom:1em}
.content>section{margin:2em 0}
h1+h2{margin-top:-1em}
h2{font-size:1.75em; color: #4bbf06; margin-bottom: 0.75em;}
h3{font-size:1.563em; color:#363636}
h4, th{font-size:1.375em; color:#0057b8}
h5 {font-size:1.188em; color:#363636}
h6 {font-size:1.0em;}
h7, h8, h9{font-size:1em}
sup, sub { font-size:.6em; line-height:.6em;vertical-align:baseline;position:relative}
sup {bottom:1ex}
sub {top:.5ex}
blockquote {max-width: 18.750rem; font-size: 0.875em; font-weight: 700; font-style: italic; line-height:1.571em; color:#000; float: right; margin: 0 -8.4% 5% 5%}
blockquote > footer {font-weight: 300; margin-top: 0.5em; text-align: right}

.shareIcons{display:inline-block;position:relative;overflow:auto}
.shareIcons a{display:block;float:left;margin:0 .5em 1em 0;height:20px;width:20px;background-position:center center; background-repeat:no-repeat;background-size:contain;border-radius:.2em;-webkit-box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, .2);box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, .2)}
.shareIcons a:hover{background-color:#F03C5E}
	.shareFacebook{background-color:#3b5998; background-image:url(../../images/icons/64x64/facebook.png)}
	.shareTwitter{background-color:#00aced; background-image:url(../../images/icons/64x64/twitter.png)}
	.shareLinkedin{background-color:#007bb6; background-image:url(../../images/icons/64x64/linkedin.png)}

/* level1 list */
.content ul li, .content_home ul li, .contentEditor ul li, #featVid ul li, #news ul li, #events ul li, #blog ul li, #quickLinks ul li{background:url(/images/icons/misc/bullet.svg) no-repeat 1em 0.65em;background-size: 4px 7px;margin-top:.3em;padding-left:2em}
.content ol, #content_home ol, .contentEditor ol{margin-left:35px}
.contentEditor ol {padding: 10px 0 0 25px !important}

/* level2 list */
.content ul li ul li, .content_home ul li ul li, .contentEditor ul li ul li{background-image:none; position: relative}
.content ul li ul li:before, .content_home ul li ul li:before, .contentEditor ul li ul li:before {content:"-"; position:absolute; left:1em; color:#0057b8}

/* addon classes */
.clearFloats{clear:both}
.nobr{ white-space: nowrap}
.twoCol {
-webkit-columns:2;
        columns:2;
-webkit-column-gap:40px;
        column-gap:40px;
}
.threeCol {
-webkit-columns:3;
        columns:3;
-webkit-column-gap:30px;
        column-gap:30px;
-webkit-column-rule:1px outset rgba(0,0,0,.15);
        column-rule:1px outset rgba(0,0,0,.15);
}

 .resCol {
-webkit-column-rule:none;
        column-rule:none;
	-webkit-columns: auto;columns: auto;
	-webkit-column-width: 20em;column-width: 20em;
}

.req{color:#c00}
.textIcon{background:#999; background-color:rgba(0,0,0,.2);font-size:.8em;line-height:1em;display:inline-block;padding:.2em .4em;border-radius: .5em;color:#fff}
.textIcon:hover{background:#666; background-color:rgba(0,0,0,.4);color:#fff}
.cmsTable{margin-bottom: 1em;border-bottom: 1px solid #dadada}
.cmsTable th{font-weight: 600;font-size: 1em;padding: .25em 0;color: #000}
.cmsTable td{border-top: 1px solid #dadada}

/* forms */
input, button{font-size:.9em}
input[type="text"], input[type="password"], input[type="tel"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], textarea, input[type="button"], input[type="submit"]{border-radius:0;-webkit-appearance:none}
input[type="radio"],input[type="checkbox"]{}
input[type="text"], input[type="password"], input[type="tel"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], textarea, select{background-color:#ececec;padding:3px 5px; border-radius: 2px; -webkit-transition: ease all 200ms; transition: ease all 200ms; -webkit-box-shadow:none; box-shadow:none}
input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, textarea:focus, select:focus{background: #eee; -webkit-box-shadow:inset 0px 2px 4px 0px rgba(0, 0, 0, .2); box-shadow:inset 0px 2px 4px 0px rgba(0, 0, 0, .2)}
textarea{display:block}
select{}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {background: red}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	input[type="search"]::-webkit-search-decoration {-webkit-appearance:none}
	input[type="search"]{padding-right:0}
}
select option{padding:0 .2em}
button,.button,input[type="button"], input[type="submit"], input[type="reset"]{background: #0057b8; color: #fff;border:0;padding:.4em .6em;line-height:1em;cursor:pointer}
button,input[type="button"], input[type="submit"], input[type="reset"]{border-radius: 3px; font-size: 1em; padding: 1em}
input::-moz-focus-inner {border:0;padding:0;}
button:hover,input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover,.button:hover,.button:focus,input[type="button"]:focus,input[type="submit"]:focus,input[type="reset"]:focus{background: #febb21; color:#000}
button img{height:1em;width:auto;vertical-align:top}
input.bulky, .bulky {padding:1em 1.6em;font-size:1.2em}
.formTable, .formTable table{width:100%}
.formTable td{width:50%}
.formTable input[type="text"], .formTable input[type="password"], .formTable input[type="tel"], .formTable input[type="number"], .formTable input[type="email"], .formTable input[type="url"], .formTable input[type="search"], .formTable textarea{width:100%}
.formTable td{padding:0 0 .5em .5em}
.formTable td:first-child{padding:0 .5em .5em 0}
.formTable table td,.formTable table td:first-child{padding-bottom:0}
.formTable.right td:first-child{text-align:right;width:1%}
.formTable.right td{width:auto}
.formTable td[colspan="2"]{padding-right:0}
.formTable.formLoose,.formTable.formLoose td{width:auto}
.subjClass{display:none !important;}
#Captcha label{padding-left:0}
td.right, th.right{text-align:right}
.wsNew{display:inline-block;font-size:.7em;line-height:1.5em;height:1.5em;padding:0 .3em;margin:.3em 0;background-color:#FFC700;overflow:visible;vertical-align:top;color:#fff;font-style:italic}
.button {font-size: 1em; line-height: 120%; display: inline-block; padding: 0.5em 1em; border-radius: 4px; background: #0057b8; color: #fff; font-weight:500}
.button:hover {background: #febb21; color:#000}
     .button.yellow {background: #febb21; color:#000}
     .button.yellow:hover {background: #0057b8; color:#fff}
     .button.dark {background: #0f0f11; color:#fff}
     .button.dark:hover {background: #febb21; color:#000}
     .button.white {background: #fff; color:#0057b8}
     .button.white:hover {background: #febb21; color:#000}
.button.bulky {padding:1em 1.75em}

.ContactForm h3 .text { font-size:.85rem}


/* HEADER ------------------------------*/
body>header{height:4.188rem; position: fixed; text-align: right; top:0; left:0; width: 100%; margin:0 auto;width:100%; padding: 0; background:#fff; z-index: 10; border-bottom: 1px solid #fff; -webkit-transition: ease all 200ms; transition: ease all 200ms}
    header.small {height: 3em; -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.25); box-shadow: 0 2px 2px rgba(0,0,0,0.25)}
    .management > header {top: 34px}
    .management2 > header {top: 78px}
body>header>.wrap{height:4.188rem; overflow: visible}
#brand {position: absolute; left: 0; top: 0; height: 100%; z-index: 11; width: 12em; background: #0057b8; text-align: center;}
    #brand:hover {background: #000}
    #brand img{display: inline-block; width: auto; max-width: 80%; height: auto; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); max-height: 75%;}
    .small #brand {width: 10em; padding: 0 2em}
    #mainnav .search, #mainnav .myCart {padding:0; display: inline-block; width:3.75em; text-align:center; cursor: pointer; float: right; color:#000; background: #e6e6e6; border-left: 1px solid #ccc}
        #mainnav .search:before {content: "\f002"; font-weight:600; display: block; font-family: FontAwesome; font-size: 1.25em}
        #mainnav .myCart:before {content: "\f07a"; font-weight:600; display: block; font-family: FontAwesome; font-size: 1.25em}
    .small #mainnav .search:before, .small #mainnav .myCart:before {font-size: 1.25em}
    #mainnav .search:hover, #mainnav .myCart:hover {color:#fff; background: #0057b8}

    aside#search {position: fixed; top: 0; left: 0; width:100%; height: 100%; background: rgba(21,22,25,0.98); z-index:999}
    aside#search .center {max-width: 75%; text-align: left; width:50%; position: absolute; top:40%; left:50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%)}
    aside#search .center h1 {color: #febb21; font-size: 3em; margin-bottom: 0.75em}
    aside#search .center form {position: relative}
    aside#search .center input {width: 100%; font-size: 2em; color:#fff; position: relative; border-bottom: 1px solid rgba(255,255,255,0.25); background: none; border-radius: 0; padding:0.25em 2em 0.25em 0.25em}
    aside#search .center input:focus {border-bottom: 1px solid #febb21; -webkit-box-shadow: none; box-shadow: none}
    aside#search .center button {position: absolute; top:0; right:0; font-size: 2em; padding: 0.5em; background:none; color:#fff}
    aside#search .center button:hover {color:#febb21}
    aside#search .center button:before {content: "\f002"; font-family: FontAwesome;}
        aside#search .center ::-webkit-input-placeholder {color: rgba(255,255,255,0.5); opacity:1; font-weight:100; font-style: normal}
        aside#search .center ::-moz-placeholder {color: rgba(255,255,255,0.5); opacity:1; font-weight:100; font-style: normal}
        aside#search .center :-ms-input-placehol {color: rgba(255,255,255,0.5); opacity:1; font-weight:100; font-style: normal}
        aside#search .center :-moz-placeholder {color: rgba(255,255,255,0.5); opacity:1; font-weight:100; font-style: normal}
    aside#search #close {color: #fff; -webkit-transition: ease all 200ms; transition: ease all 200ms; display: inline-block; position: absolute; top:0; right:0; font-size: 2.25em; font-weight:100; padding:1em; cursor:pointer; opacity:0.3}
    aside#search #close:hover {opacity: 1}
    aside#search #close:before {content: "\2715"}




/* PRIMARY NAV ------------------------------ */
#mainnav{background:#fff;overflow:visible; position: relative; z-index:12; display: inline-block;}
#mainnav ul{text-align:right;overflow:visible; display: inline-block;}
#mainnav li{display:inline-block;position:relative}
#mainnav > ul > li {margin-left: 1px}
#mainnav > ul > li:last-child {background: #e6e6e6}
#mainnav a{color:#000; cursor: pointer; line-height:4.188rem;font-size: 0.875em; padding:0 1em; text-transform: uppercase; font-weight:500; display:inline-block;text-decoration:none;-webkit-text-size-adjust:none}
.small #mainnav a {line-height: 3rem}
#mainnav > ul > li:last-child > a {font-weight: 700; padding: 0 1em}
#mainnav > ul > li:last-child:hover > a {color:#fff; background: #0057b8}
#mainnav>ul>li:hover>a, #mainnav>ul>li:active>a{background:#FEBB21;color:#fff}
#mainnav>ul>li.on>a{background:#fff;color:#000; position: relative;}
    .small #mainnav>ul>li.on>a {background: #FEBB21; color:#000}
#mainnav>ul>li.on>a:after {content: "";width: 100%;height: 0.563em; background: #febb21; display: block;position: absolute;left: 0;bottom: 0;}
    .small #mainnav>ul>li.on>a:after {opacity: 0}
/*dhtml*/
#mainnav li ul{z-index:1;width:17.5em; top:100%; left:0;padding:0.5em 0;background:rgba(0,0,0,.8);position:absolute;overflow:auto;height:auto}
.small #mainnav li ul {font-size: 0.9em}
#mainnav>ul>li:last-child ul{right:0}
#mainnav li ul li{width:100%;display:block;float:left}
#mainnav ul li ul li a{background:none;color:#fff}
#mainnav li ul li a{font-size:1em; text-transform: none; line-height:1.1em;padding:.5em 1em; display:block;width:100%;text-align:left;float:left}
    .small #mainnav li ul li a {line-height: 120%}
#mainnav li ul li a:hover, .t1 li ul li a:active{color:#fff;background:#0057B8}

/*mega menu*/
#megamenu {position: fixed; top: 4.188rem; left:0; width:100%; z-index:3;}
.management #megamenu {top: calc(34px + 4.188rem)}
.management2 #megamenu {top: calc(78px + 4.188rem)}
.management .small #megamenu {top: calc(34px + 3em)}
.small #megamenu {top: 3em}
#megamenu > div {z-index: 9; position: relative; width:100%; height:auto; color:#fff; -webkit-box-shadow: 0 15px 15px 0 #000; box-shadow: 0 15px 15px 0 #000; border-bottom:1px solid #fff;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-pack: start;
    -webkit-box-pack: start;
            justify-content: flex-start;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -ms-flex-align: stretch;
    -webkit-box-align: stretch;
            align-items: stretch;
}
#megamenu > div > ul {background: rgba(0,0,0,0.6); position: relative; min-width: 17.5em; padding: 1em 0;
    -ms-flex-order: 0;
    -webkit-box-ordinal-group: 1;
            order: 0;
    -ms-flex: 0 1 16em;
    -webkit-box-flex: 0;
            flex: 0 1 16em;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

}
#megamenu > div > ul li a {color:#fff; font-weight:500; display: block; padding: 0.75em 1.5em}
#megamenu > div > ul li a:hover {color: #fff; background: #0057b8}
#megamenu > div section {padding: 4em 25% 4em 18%; text-align: left; position: relative; overflow: hidden;
    -ms-flex-order: 0;
    -webkit-box-ordinal-group: 1;
            order: 0;
    -ms-flex: 1 1 auto;
    -webkit-box-flex: 1;
            flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
#megamenu > div section.mega {padding-left: 4em}
#megamenu > div section.mega ul {all: unset}
#megamenu > div section.mega ul li a {display: inline-block; width: auto; border-radius: 4px; position: relative; padding-left: 2em; background: url(/images/navigation/list-style.svg) no-repeat 1em 0.75em}
#megamenu > div section.mega ul li a:hover {background-color: #fff; color: #000}
#megamenu > div section p {line-height: 1.375em; margin-bottom: 0}
#megamenu > div section .button {line-height: 100%; padding: 1em 2.5em; font-weight:600; margin: 2em 0 0; background: #febb21;}
#megamenu > div section .button:hover {background: #0057b8; color:#fff}
#megamenu h1 {font-size: 2.125em; margin-bottom: 0.75em; color: #fff; font-style: normal}
#megamenu .megaBottle {position: absolute; left:0; height: 80%; top:10%; width:23%; background-size:contain; background-position:center top; background-repeat:no-repeat}
     #megamenu .performance .megaBottle {background-image: url(/images/navigation/bottle-performance.png)}
     #megamenu .powersports .megaBottle {background-image: url(/images/navigation/bottle-powersports.png)}
     #megamenu .heavyduty .megaBottle {background-image: url(/images/navigation/bottle-heavy.png)}
     #megamenu .racing .megaBottle {background-image: url(/images/navigation/bottle-racing.png)}
     #megamenu .prepfluid .megaBottle {background-image: url(/images/navigation/bottle-prep.png)}
     #megamenu .prepfluid .megaBottle {background-image: url(/images/navigation/bottle-prep.png)}
     #megamenu .meter .megaBottle {background-image: url(/images/navigation/refractometer.png)}
#megamenu .megaImage {position: absolute; right:0; height: 100%; top:0; width:28%; background-size:cover; background-position:center; background-repeat:no-repeat}
     #megamenu .performance .megaImage {background-image:  url(/images/navigation/img-prep.jpg)}
     #megamenu .powersports .megaImage {background-image: url(/images/navigation/img-powersports.jpg)}
     #megamenu .heavyduty .megaImage {background-image: url(/images/navigation/img-heavy.jpg)}
     #megamenu .racing .megaImage {background-image:url(/images/navigation/img-performance.jpg)}
     #megamenu .prepfluid .megaImage {background-image: url(/images/navigation/img-racing.jpg)}
     #megamenu .meter .megaImage {background-image: url(/images/navigation/img-meter.jpg)}
     #megamenu .mega .megaImage {background-image: url(/images/navigation/img-mega-list.jpg)}

#megamenu .performance,
#megamenu .mega {background: url(/images/navigation/bg-performance.jpg) no-repeat center / cover}
#megamenu .powersports {background: url(/images/navigation/bg-powersports.jpg) no-repeat center / cover}
#megamenu .heavyduty {background: url(/images/navigation/bg-heavy.jpg) no-repeat center / cover}
#megamenu .racing {background: url(/images/navigation/bg-racing.jpg) no-repeat center / cover}
#megamenu .prepfluid {background: url(/images/navigation/bg-prep.jpg) no-repeat center / cover}
#megamenu .meter {background: url(/images/navigation/bg-meter.jpg) no-repeat center / cover}

#megamenu > .fade {content: ""; position: fixed; pointer-events: none; z-index:2; top:4.188rem; left:0; bottom:0; right:0; background:rgba(0,0,0,0.9)}
.small #megamenu > .fade {top:3em}
.management #megamenu >.fade {top: calc(4.188rem + 34px)}
.management2 #megamenu >.fade {top: calc(4.188rem + 78px)}


/* MAIN ------------------------------ */
main, .mceContentBody{background:#fff}
main>.wrap{padding-top:3.750em}
.contentEditor{background:#fff;min-width:100%;}
/* side column */
main>div>aside{position: relative; float: left; width: 20%; margin-bottom: 4em}
/* t1 */
#sidenav{overflow:hidden;margin:0 0 3em}
#sidenav li{height:1%;overflow:hidden}
#sidenav li a{padding:.5em 5px;line-height:1.1em;display:block}
#sidenav > ul > li > a {display: none}
#sidenav li a:hover, #sidenav li a:active{background:#e5e5e5}
#sidenav li.on>a{color:#000}
/* t2 */
#sidenav li.on ul li{border-bottom:1px solid #c0c1b7}
#sidenav > ul > li.on > ul > li.on {background: #0057b8}
#sidenav li.on ul li a{padding:0.75em 9.2%; font-weight: 500; color: #0057b8}
#sidenav li ul li a:hover, #sidenav li ul li a:active{color:#fff;background: #0057b8}
#sidenav li ul li.on>a{color:#fff;}
#sidenav li ul li.on>a:hover {background: rgba(0,0,0,0.5)}
/* t3 */
#sidenav li ul li.on ul{padding-bottom:.5em;border:0}
#sidenav li ul li.on ul li{border:0}
#sidenav li ul li.on ul li.on{background: #151619}
#sidenav li ul li.on ul li a{padding-left:17%; font-weight:300; font-size:0.938em;color:#a8cef9}
#sidenav li ul li ul li a:hover, #sidenav li ul li ul li a:active{color:#000; background:#febb21}
#sidenav li ul li ul li.on>a{color:#fff; background:#151619;}
/* t4 */
#sidenav li ul li ul li.on ul li a{padding-left:23%;font-size:.85em;color:#ccc}
#sidenav li ul li ul li ul li a:hover, #sidenav li ul li ul li a:active{color:#fff; background: #0057b8}
#sidenav li ul li ul li ul li.on>a{color:#000; background:#febb21;}
#sidenav li li li.on>a:hover {color:#fff; background: #0057b8}

/*CTA*/
.cta{background-color: #febb21; width: 100%; float: left; clear: left; padding: 0 1em;}
.cta-content {margin-left: auto; margin-right: auto; max-width: 75em; padding: 3em 0;}
.cta h1 {font-style: normal; font-size:  2em; margin-bottom: .5em;}
.cta p {font-weight: 400; margin-bottom: 0;}
.cta a {background:#000; color: #fff; padding: 1em 1.5em; border-radius: 4px; }
.cta-text {width: 75%; float: left; padding-bottom: 3em;}
.cta-button {width: 20%; float: right; padding: 3em 1em;}
@media screen and (max-width:950px) {
    .cta-text {width: 65%;}
    .cta-button {width: 30%; padding-top: 4em;}
}
@media screen and (max-width:800px) {
    .cta {text-align: center;}
    .cta-text {width: 100%; padding-bottom: 2.5em;}
    .cta-button {float: left; width: 100%; padding-top: 0; }
}


/*sidebar callouts*/
.calloutVideo {width:100%; height: auto; display: block; background: url(/images/videoGallery.jpg) no-repeat top center / cover; border-radius: 4px; overflow:hidden; padding-top:50%}
.calloutVideo > span {display: block; padding: 1em; background: rgba(15,15,15,0.95); color:#febb21; line-height:120%; text-align:center; font-weight:600}

/* content */
#content{float: right; width: 80%; padding: 0 8.4% 8%; overflow: hidden; min-height: 600px; word-wrap: break-word; position: relative;}
#content .photoright, #content .photoleft{max-width:50%;height:auto}
#content .photoright img,#content .photoleft img {max-width:100%;height:auto}
#content img.phototreatment{max-width:50%;height:auto}
img.phototreatment,img.photoright,img.photoleft,.photoright img,.photoleft img {}
.photoright{float:right;margin:0 0 3em 4em;clear:right}
.photoleft{float:left;margin:0 4em 3em 0;clear:left}
.photofull {float: left; clear: both; width: 100%; max-width: 100%; height:auto; margin:2em 0; border-radius: 5px; border: 1px solid rgba(0,0,0,0.2)}
.muted {opacity:0.5;filter:alpha(opacity=50)}
.highlight, .content .highlight{background:#e6e6e6; border-radius: 5px; padding:2em;margin:3em 0}
.highlight2{background: #FEBB21;text-align: center;padding: 1rem;margin-top: -1rem;}
#content * h1{font-size:1.625em;margin-bottom:1em; color: #ff0000}
small, .textSm{font-size:.8em}
#content table, .contentEditor table{width:100%}
.vehicles {width:100%; float:left; clear: both; display: block; border-top:1px solid #fff; border-bottom:1px solid #fff}
     .vehicles a {display: block; width: 20%; float: left; position: relative; padding-top: 17%; overflow: hidden}
     .vehicles .vehicle-classic {background: url(/images/callouts/classic.jpg) no-repeat center / cover}
     .vehicles .vehicle-hotrods {background: url(/images/callouts/hotrods.jpg) no-repeat center / cover}
     .vehicles .vehicle-powersports {background: url(/images/callouts/powersports.jpg) no-repeat center / cover}
     .vehicles .vehicle-offroad {background: url(/images/callouts/offroad.jpg) no-repeat center / cover}
     .vehicles .vehicle-heavyduty {background: url(/images/callouts/heavyduty.jpg) no-repeat center / cover}
     .vehicles a + a {border-left: 1px solid #fff}
     .vehicles a > div {position: absolute; width:100%; max-width:100%; height:100%; left:0; right:0; text-align: center}
     .vehicles a > div.front span, .vehicles a > div.back {background: rgba(15,15,17,0.8)}
    .vehicles a > div.front {bottom:0} 
    .vehicles a > div.front span {position: absolute; bottom:0; left: 0; width: 100%; font-size: 1.125em; padding: 0.5em 0.25em; color:#febb21; font-weight:600; text-align:center}
     .vehicles a > div.back {bottom:-100%; width:100%; height: 100%; color:#fff; font-size: 0.938em; line-height: 1.333em; padding: 0 1em; font-weight:500; -webkit-transition: all 200ms ease-out; transition: all 200ms ease-out;
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        -ms-flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -ms-flex-pack: center;
        -webkit-box-pack: center;
        justify-content: center;
        -ms-flex-line-pack: center;
        align-content: center;
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
        }
     .vehicles a:hover > div.back{transform:translateY(-100%); -webkit-transform:translateY(-100%)}
     .vehicles a:hover > div.front {transform:translateY(-100%); -webkit-transform:translateY(-100%)}
     .vehicles a > div.back .button {margin-top:1.5em; color:#fff}
     .vehicles a > div.back .button:hover {background: #febb21; color:#000}
     .vehicles a > div.back div {position: relative; width:100%; color:#fff}
     .vehicles a > div.back div > .brief { display: block; color:#fff}

.video {float: left; clear: both; width: 100%; padding:10% 1em; height:auto; background-image: url(/images/home/video-bg.jpg)}
     .video .wrap {padding: 0}
     .video .left, .video .right {width:50%; float: left; overflow:hidden}
     .video .right {padding-left: 5%; color:#fff}
     .video .right h1 {color:#fff; font-style: normal; font-size: 2.5em; margin-bottom:0.25em}
     .video .right p {margin-bottom:0.75em}
     .video .right .button {margin:0.5em 0.75em 0 0; padding: 0.85em 1.75em}
     .embed-container {position: relative; z-index:1; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; border: 1px solid #fff} 
     .embed-container iframe, .embed-container object, .embed-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.parallax{background-position:center center;background-size:cover;background-repeat:no-repeat;}

.home .events {clear:both; color:#fff; text-align: center; padding: 10% 1em; float: left; width:100%; background:url(/images/home/events-bg.jpg) no-repeat center / cover}
     .home .events .wrap {overflow: hidden}
     .home .events h1 {color:#fff; font-style: normal; font-size: 2.5em; margin-bottom:2em}
     .home .events h2 {color:#fbad12; font-style: normal; font-size: 1.375em; text-transform: uppercase; margin-bottom:0.25em}
     .home .events ul {}
     .home .events li {text-align: left; display: inline-block; vertical-align: top; padding-left:4.125em; width:33%; position: relative}
     .home .events .logo {width: 2.500em; height: 2.500em; display: block; position: absolute; top:0; left:0; background-color: #fff; background-position: center; background-size:contain}
     .home .events span {display: block; line-height: 1.6em; font-weight: 600}
     .home .events .date {font-size: 0.875em; font-weight: 300; font-style: italic}
     .home .events li .button {font-size: 0.875em; margin-top: 1.5em}
     .home .events .white {padding:0.85em 1.75em; margin-top: 5em}

.home .news {clear:both; color:#000; padding: 8% 1em; float: left; width:100%; background-image:url(/images/home/news-bg.jpg)}
     .home .news h1 {color:#000; font-style: normal; font-size: 2.5em; margin-bottom:1em}
     .home .news .right {width:50%; float: right; padding-left: 5%; overflow: hidden}
     .home .news li {margin-bottom: 1.75em}
     .home .news li a {display: block; font-weight:600}
     .home .news li .brief {font-size: 0.875em; line-height: 140%; display: block;}
     .home .news .button {padding:0.85em 1.75em; margin-top: 1em}

.home .products {width:100%; float: left; clear:both; text-align: center; padding: 6% 1em;
     /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#191800+0,ffffff+40,ffffff+74,207cca+74,1f1d1b+100&0.2+0,0+74,0.25+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
     background: -webkit-gradient(linear,  left top, left bottom,  from(rgba(25,24,0,0.2)),color-stop(40%, rgba(255,255,255,0.09)),color-stop(74%, rgba(32,124,202,0)),to(rgba(31,29,27,0.25)));
     background: linear-gradient(to bottom,  rgba(25,24,0,0.2) 0%,rgba(255,255,255,0.09) 40%,rgba(32,124,202,0) 74%,rgba(31,29,27,0.25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33191800', endColorstr='#401f1d1b',GradientType=0 ); /* IE6-9 */
     }
     .home .products h1 {font-style: normal; margin-bottom: 2.5em}
     .product-wrap {
         display: -ms-flexbox;
         display: -webkit-box;
         display: flex;
         -ms-flex-direction: row;
         -webkit-box-orient: horizontal;
         -webkit-box-direction: normal;
                 flex-direction: row;
         -ms-flex-wrap: nowrap;
         flex-wrap: nowrap;
         -ms-flex-pack: center;
         -webkit-box-pack: center;
                 justify-content: center;
         -ms-flex-line-pack: center;
         align-content: center;
         -ms-flex-align: stretch;
         -webkit-box-align: stretch;
                 align-items: stretch;
     }
     .products .product {padding: 0 1em 6.5em; position: relative; text-align: center; max-width:15em;
         -ms-flex-order: 0;
         -webkit-box-ordinal-group: 1;
                 order: 0;
         -ms-flex: 1 1 50%;
         -webkit-box-flex: 1;
                 flex: 1 1 50%;
         -webkit-align-self: auto;
         -ms-flex-item-align: auto;
         align-self: auto;
     }
     @media screen and (min-width:800px) {
     .home .products .product {padding-bottom: 7.5em}
     .home .products .product .action > span {margin:-7.75em 0 0}
     }
     @media screen and (max-width:800px) {
     .home .products .product {margin: 0 auto}
     .home .products .product .action,
     .home .products .product .action .button {position: relative; left:auto; top:auto; right:auto; bottom:auto; margin:0; transform:none}
     .home .products .product .action {margin-top:1em}
     }
    #Convert .products .product {padding: 0 1em 2.5em}
     .products .product * {display: block; margin: 0 auto; max-width:100%; height: auto}
     .product .shadow {width:110%; margin: 0 0 1em -2.5%; height: 3em; background: url(/images/home/shadow.png) no-repeat center / 100%, url(/images/home/shadow.png) no-repeat center / 100%; -webkit-transition: all 200ms ease-out; transition: all 200ms ease-out}
          .products .product:hover .shadow {opacity: 0.5; background-size:80%}
     .products .product h2 {color:#000; display: inline-block; font-size: 1.375em; margin-bottom: 0.75em}
     .products .product .description {font-size: 0.875em; line-height: 1.429em; font-style: italic; font-weight:300}
     .products .product .action {position: absolute; display: block; font-size: 0.875em; bottom:0; left: 0; width: 100%}
        .products .product .action > span{display: block; line-height: 130%; margin:0 0 1em; font-style: normal}
     .products .product .action .button { display: inline-block;}
     .products .product .action .button + a { display: block; text-decoration: underline}
     .products .product:hover .bottle {transform: translateY(-5%); -webkit-transform: translateY(-5%)}
        .products.interiorProducts {margin-bottom: 3em}

.managementTeam {width: 100%; clear: both; float: left; line-height: 150%}
.managementTeam + hr {width: 100%; clear: both;}
.managementTeam .half {width:50%; float: left; padding-right: 5%}
.managementTeam .half li {min-height: 8.75em;}
.managementTeam h2 {color:#333; margin-bottom: 0.15em}
.managementTeam h2+span {font-style: italic; display: block; font-weight: 600; color:#ff1e06}
.managementTeam a {display: block; margin-bottom: 2em}

#content .pdf-links li {background: none; padding: 0 0.75em 2em; width: 32%; line-height: 1.25em; text-align: center; display: inline-block; vertical-align: top}
#content .pdf-links li a {font-weight: 600;}
#content .pdf-links li img {max-width: 100%; height: auto; display: block; margin-bottom: 0.5em;}

/* Where To Buy ------------------------------ */
.whereToBuy .pageHeader{height: 13vh}
.whereToBuy .searchOptions .button {margin-bottom: .5em}
.where-to-buy {width:100%; float:left; color:#fff; font-style: italic; font-weight:300; clear:both; background: #151619; text-align: center; padding:5% 1em}
     .where-to-buy h1 {font-size: 2.500em; color:#fff; font-style: normal}
     .styledForm > div {    
          display: -ms-flexbox;
         display: -webkit-box;
         display: flex;
         -ms-flex-direction: row;
         -webkit-box-orient: horizontal;
         -webkit-box-direction: normal;
                 flex-direction: row;
         -ms-flex-wrap: nowrap;
         flex-wrap: nowrap;
         -ms-flex-pack: justify;
         justify-content: space-around;
         -ms-flex-line-pack: center;
         align-content: center;
         -ms-flex-align: center;
         -webkit-box-align: center;
                 align-items: center;
     }
     .styledForm > div > div {margin-bottom: 1em}
     .styledForm > div span, .styledForm > div .styledSelect, .styledForm > div input {display: inline-block; vertical-align: middle; -webkit-transition: ease all 200ms; transition: ease all 200ms}
     .styledForm > div span {width:2.5rem; height: 2.5rem; line-height: 2.5rem; font-size: 1.438em; font-style: normal; font-family: "museo-sans-condensed", sans-serif; font-weight:600; color:#202020; background:#febb21; border: 1px solid transparent; text-align: center;}
     .styledForm input {height: 2.5rem; line-height: 2.5rem; font-size: 1em; padding: 0 1em; -webkit-appearance:none; -webkit-box-shadow:none; box-shadow:none; color:#fff; font-style: italic; font-weight:300}
     .styledForm input {background: rgba(255,255,255,0.1);}
          .styledForm input.zip {width:10em; margin-right:0.5em}
          .styledForm input.town {width:8em; margin-left:0.5em}
     .styledForm .styledSelect {height: 2.5rem; line-height: 2.5rem; width:12.5em; overflow: hidden; font-size: 1em; position: relative; background: rgba(255,255,255,0.1) url(/images/icons/misc/down-arrow.svg) no-repeat center right;}
     .styledForm .styledSelect:after {width: 2.500rem; height: 2.500rem; position: absolute; right:0; content:''; background: rgba(255,255,255,0.1) url(/images/icons/misc/down-arrow.svg); pointer-events:none}
     .styledForm .styledSelect select, .styledForm .styledSelect select:focus {position: absolute; -webkit-box-shadow: none; box-shadow: none; left:0; top:0; width: 120%; height: 2.5rem; color:#fff; line-height: 2.5rem; font-size: 1em; padding: 0 20% 0 1em; background: none; border: 0;-webkit-appearance: none;}
    .styledForms .styledSelect::-ms-expand {display: none;}
     .styledForm .styledSelect.short {width:12em;}
     .styledForm .styledSelect.last {width:9.5em;}
     .styledForm .styledSelect:hover, .styledForm input:hover, .styledForm input:focus {background-color: #fff; color:#333}
     .styledForm .styledSelect:hover select, .styledForm input:hover, .styledForm input:focus.styledForm, .styledSelect select:focus {color: #5c5c5e}
     .styledForm .styledSelect:hover select, .styledSelect select:focus {color: #5c5c5e}
     .styledForm .styledSelect:hover {background: #fff url(/images/icons/misc/down-arrow.svg) no-repeat center right;}
     .styledForm .styledSelect select option {background: #fff; color:#333}
     .styledForm .button {padding:1em 2.75em; margin-top: 3.5em}
          .styledForm ::-webkit-input-placeholder {color:#fff; opacity: 1}
          .styledForm ::-moz-placeholder {color:#fff; opacity: 1}
          .styledForm :-ms-input-placeholder {color:#fff; opacity: 1}
          .styledForm :-moz-placeholder {color:#fff; opacity: 1}
               .styledForm input[type="text"]:focus::-webkit-input-placeholder, .styledForm input[type="text"]:hover::-webkit-input-placeholder {color:#5c5c5e; opacity: 1}
               .styledForm input[type="text"]:focus::-moz-placeholder, .styledForm input[type="text"]:hover::-moz-placeholder {color:#5c5c5e; opacity: 1}
               .styledForm input[type="text"]:focus:-ms-input-placeholder, .styledForm input[type="text"]:hover:-ms-input-placeholder {color:#5c5c5e; opacity: 1}
               .styledForm input[type="text"]:focus:-moz-placeholder, .styledForm input[type="text"]:hover:-moz-placeholder {color:#5c5c5e; opacity: 1}

/*where to buy interior*/
.fullWidth #content {width: 100%; float: left; clear:both; padding: 0 0 6em}
     .fullWidth #content h1 {text-align: center}

.searchOptions h2 {font-style: normal; color: #FEBB21; margin-bottom:0.75em;}
.searchOptions {text-align: center}
     .searchOptions .styledForm > div {display: block}
     .searchOptions .styledSelect.last {margin-left:2em}
     .searchOptions .local input, .searchOptions .local .styledSelect {margin-bottom: 0.5em}
    #content .searchOptions .buy-online {margin: 0 0 0.5rem}
    #content .searchOptions .button {font-size: 1.125rem; display: inline-block; vertical-align: bottom; border-radius: 4px; line-height: 120%; padding: 0.75em 1.25em 0.75em 1em; font-weight: 600; margin: 0 0 1rem;}
    #content .searchOptions .buyDirect {background: #4bbf06; color: #fff;}
    #content .searchOptions .buyDirect:before {content: "\f07a"; margin-right: 0.35em; display: inline-block; font-family: FontAwesome; opacity: 0.75;}
    #content .searchOptions .buyDirect:hover {color:#fff; background: #febb21; border-color: #de9e0a}
    .searchOptions input[type="radio"], .searchOptions input[type="checkbox"] {display: none;}
     .searchOptions label {font-size: 1rem; border: 1px solid transparent; padding: 0.75em 1em; font-weight: 600; margin:0 0.5em 2em 0; background:#ccc; color:#000}
          .searchOptions input[type="radio"] + label:before {border: 1px solid #ffffff;content: "\00a0"; display: inline-block;height: 1em; font-size: 1.15em; font-family: sans-serif;margin: 0 .25em 0 0; padding:0;vertical-align: middle; width: 1em; margin-right: 0.75em; border-radius: 2px; background:#fff}
          .searchOptions input[type="radio"]:checked + label {color:#fff; background: #0057b8}
          .searchOptions input[type="radio"]:checked + label:before { background: #fff; color: #000; content: "\2713";text-align: center;}
          .searchOptions input[type="radio"]:checked + label:after {font-weight: bold;}
               .searchOptions input[type="checkbox"] + label {font-size: 0.95em; padding: 0.75em 1em; font-weight: 300; margin:0 0.5em 0.5em 0; background:rgba(255,255,255,0.1); color:#fff}
               .searchOptions input[type="checkbox"] + label:before { border: 1px solid #ffffff;content: "\00a0"; display: inline-block;height: 1em; font-size: 1.15em; font-family: sans-serif;margin: 0 .25em 0 0; padding:0;vertical-align: middle; width: 1em; margin-right: 0.75em; border-radius: 2px; background:#fff}
               .searchOptions input[type="checkbox"]:checked + label {color:#000; background: #fff}
               .searchOptions input[type="checkbox"]:checked + label:before { background: #fff; color: #000; content: "\2713";text-align: center;}
               .searchOptions input[type="checkbox"]:checked + label:after {font-weight: bold;}
.searchOptions .online, .searchOptions .local, .searchOptions .distributor {display: none;}
     /*  .searchOptions input[type="radio"]:checked + label + input + label + .online {display: block}
     .searchOptions input[type="radio"]:checked + label + div + .local {display: block} */
     .searchOptions .styledForm {width:100%; color:#fff; font-style:italic; font-weight:300; background:#151619; text-align:center; float: none; clear:both; border-radius: 5px; padding: 3em 1em; font-size: 0.9em}
     .searchOptions .styledForm .styledSelect select {}
     .searchOptions .styledForm div + .button{font-size: 1.2em; margin:0.75em 0 0; padding: 1em 2.75em}

.map-wrapper {width: 100%; float: left; clear: both; position: relative; margin:0 0 2em}
#gmap_canvas img{max-width:none!important;background:none!important}

.searchResults {margin-top: 2em; text-align: left;}
     .searchResults > ul {clear:both;}
     .searchResults > ul > li {display: inline-block; padding-left:5.25em; padding-right:1em; position: relative; background:none; width: 33%; vertical-align: top; margin-bottom:5em}
     .searchResults li > * {display: block}
     .searchResults li h2 {color:#000; margin-bottom: 0.15em; font-size:1.5em}
     .searchResults li h2 span {font-family: "museo-sans", sans-serif; font-size: 0.55em; font-weight:300; color:#0057b8; font-style: italic; margin-left:0.25em}
     .searchResults li > span, .searchResults li a {font-size: 0.9em; line-height: 120%}
     .searchResults li .store-type {font-style: italic; color:#666; margin:-0.25em 0 0.75em}
     .searchResults li .address, .searchResults li .links {margin-bottom: 0.75em}
     .searchResults li .links {overflow: auto; font-size: 0.9em; margin-bottom:1.25em;}
          .searchResults li .links a {display: inline-block; float: left; clear: both; padding: 0.25em 0.5em; line-height: 120%; border-radius:3px; white-space: nowrap; text-overflow:ellipsis; overflow:hidden;text-transform: lowercase}
          .searchResults li .links a:before {content:''; display: inline-block; width: 1em; height: 1em; margin-right:0.5em; background-position: center; background-size:contain; background-repeat: no-repeat}
               .searchResults li .links a.phone:before {background-image: url(/images/icons/misc/phone.svg)}
               .searchResults li .links a.email:before {background-image: url(/images/icons/misc/mail.svg)}
               .searchResults li .links a.website:before {background-image: url(/images/icons/misc/globe.svg)}
          .searchResults li .links a+a {margin-top:1px}
          .searchResults li .links a:hover {background: #FEBB21; color: #0057B7}
          .searchResults li .products {font-size: 0.9em; line-height: 120%}
          .searchResults li .products span, .searchResults li .conversion span {font-weight:600}
          .searchResults li .products ul {margin-bottom: 1.25em; font-style: italic}
          .searchResults li .conversion {margin-bottom: 1.25em;}
          .searchResults li .notes {font-style: italic; margin-bottom: 1.25em;}
          .searchResults li .button {display: inline-block}
          .searchResults li .logo {display: block; width:5em; height: 5em; position: absolute; top:-1.75em; left:0; background-size:contain; background-position:center; background-repeat:no-repeat}
     .searchResults .disclaimer {font-style:italic; position: relative; padding-left:0.75em; display: block}
     .searchResults .disclaimer:before {content:"*"; position: absolute; left:0}

.products-List {margin-bottom: 6em; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: start; -webkit-box-pack: start; justify-content: flex-start; -ms-flex-line-pack: stretch; align-content: stretch; -ms-flex-align: stretch; -webkit-box-align: stretch; align-items: stretch;}
.products-List .product {display: block; position: relative; text-align: center; padding:2em 1em 17em; margin: 0 0.5% 2em; overflow: auto; clear: both; width:32%; border: 1px solid #ccc}
.products-List .product:nth-child(even) {border-left: 1px solid #ccc}
        .products-List .product.learn-more {padding-bottom: 20em}
.products-List .product .shadow {margin: -2.25em 0 0 -5%}
.products-List .product h2 {color: #333; margin: 0 0 0.5em}
.products-List .product .image {width: 8em; height: auto; margin: 0 auto}
.products-List .product .image img {max-width: 100%; height: auto}
.products-List .product .price {display: block; font-size: 1.25em; color: #ff0000; font-weight: 600}
.products-List .product .action {margin-top: 2em; width: 100%; height: 16em; position: absolute; bottom: 0; left:0; border-top: 1px solid #ccc; background: #ececec; padding: 2em 1em 3em;}
.products-List .product .description {max-width:88%; line-height: 120%; margin: 0 auto 1em; display: block;}
.products-List .product select,
.products-List .product [type="number"] {border: 1px solid rgba(0,0,0,0.2); font-size: 1rem; background: #fff; margin: 0.25em 0; height: 2.5em; padding: 0 0.5em;}
.products-List .product [type="number"] {width: 3.5em; text-align: center; -moz-appearance: textfield}
.products-List .product select {width: auto; max-width:calc(100% - 4em); font-family: "museo-sans", sans-serif; font-weight:300; padding: 0 2.75em 0 0.5em; -moz-appearance: none; -webkit-appearance: none; background-image: url(/images/icons/misc/down-arrow.svg); background-repeat: no-repeat; background-position: right center}
.products-List .product [type="number"]::-webkit-inner-spin-button, 
.products-List .product [type="number"]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;}
.products-List .product [type="submit"], .action .button {display: block; position: absolute; bottom: 2.125em; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width:85%; margin: 1em auto 0}
#content .action a.button {font-weight: 300; padding: 1em;}

.authorized-dealers {text-align: center; margin: 1.5rem 0 0; font-size: 0.875em; line-height: 180%}
.authorized-dealers p {max-width: 840px; margin:0 auto}
#content .description a {display: block; text-transform: uppercase; margin-top: 1em; font-weight: 900}
#content .description .button {display: block; margin: 1em auto 0; font-size: 0.8em; border-radius: 2px; border: 1px solid #febb21; color: #000; width: 8.5em; text-transform: none; font-weight: 400; background: #febb2133;}
        #content .learn-more .description .button {margin: 0; position: absolute; bottom: 23em; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
#content .description .button:hover {background: #febb21;}
.products-List .product.sponsorship {padding: 2em 1em 13em}
.products-List .product.sponsorship .action {height: 12em;padding: 1em 1em}

/* Product Page ------------------------------ */
.product main>.wrap {overflow: visible}
.productSide {width:24%; float: left; padding-bottom:8%}
    .productSide img {max-width: 100%; height: auto; display: block; margin:0 auto}
    .productSide > .productImage {width: 100%; height: auto}
    .productSide > .productImage .shadow {width: 120%; margin: 0 0 1em -10%; height: 3em; background: url(/images/products/shadow.png) no-repeat center / contain}
    .productSide section {font-size: 0.875em; color:#4d4d4d; font-weight:500; line-height: 1.286em; text-align: center; padding: 12% 0}
    .productSide section + section{border-top: 1px solid #e3dddb}
    .productSide section h1{font-size: 1.429em; color:#4d4d4d;font-style: normal; text-transform: none; margin-bottom: 0.75em}
    .productSide section .smallProduct {width:100%; height: 12em; margin-bottom:2em; background-size: contain; background-position: center top; background-repeat:no-repeat}
    .productSide section .button + a {display: block; font-weight:700; margin-top:0.5em; color: #0f0f11; text-decoration: underline}
    .productSide section .button + a:hover {color: #FEBB21;}

.products-intro{padding: 0 20% 2rem;text-align: center;}

.product #content {width:76%; padding-left:6%}
    .product #content > h1 {margin-bottom: 0.25em; line-height: 100%}
    .product #content h1 > span {font-size: 0.476em; color: #717171}
    .product #content h1 + h2 {font-size: 1.125em; color: #000; padding:0.25em 0.5em; margin:0; display: inline-block; background: #febb21}
    .product #content h2 {color: #ff1e06}
    .product #content h3 {font-size: 1.438em; margin-bottom: 0.85em}
    .product #content hr {margin: 3.5em 0}
    .product #content .highlight {padding: 1.5em; margin: 0 0 2em}
    .product #content .highlight ul {margin: 0;}
    .product #content .buy-options {margin: 5% 0;}
    .product #content .buy-options .button {font-size: 1.125em; padding: 1.15em 2.75em; margin-right:0.25em}
    .product #content .buy-options .button + a,
    .product #content .buy-options .buy-direct{padding:0.75em 0.5em 0.75em 1.25em; display: inline-block; border-radius: 4px}
    .product #content .buy-options .buy-direct{padding:0.75em 1.25em}
    .product #content .buy-options .button + a:after{content: ""; display: inline-block; vertical-align: middle; height: 1em; width:1.75em; background: url(/images/icons/misc/down-arrow-blue.svg) no-repeat center}
    .product #content .buy-options .button + a:hover,
    .product #content .buy-options .buy-direct:hover{color:#0f0f11; background: #ccc}
    .product #content #locate {padding:1.5em; border-radius:5px; background: #e6e6e6}
    .product #content #locate h2 {color:#a0a1a3}
    .product #content #locate .styledForm {font-size: 0.9em; font-style: italic;
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        -ms-flex-direction: row;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
                flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-pack: justify;
        -webkit-box-pack: justify;
                justify-content: space-between;
        -ms-flex-line-pack: start;
        align-content: flex-start;
        -ms-flex-align: center;
        -webkit-box-align: center;
                align-items: center;}
    .product #content #locate input, .product #content #locate .styledSelect {background-color:#535456; -webkit-transition: ease all 200ms; transition: ease all 200ms}
    .product #content #locate input:hover, .product #content #locate input:focus {background-color:#ccc}
    .product #content #locate .styledSelect {display: inline-block}
    .product #content #locate .styledSelect:hover {background:#ccc url(/images/icons/misc/down-arrow.svg) no-repeat center right}
    .product #content #locate .vr {display: inline-block; vertical-align: middle; width:1px; height: 4rem; margin: 0 0.5em; background: #c0c0c0}
    .product #content #locate .button {margin:0.5em 0; font-style: normal}
    .product .productCallout {padding: 5% 1em; text-align: center; clear:both; width:100%; float: left; background:#febb21}
    .product .productCallout h1 {font-style: normal}
    .product .productCallout .shadow{margin: -1.75em auto 0; background: url(/images/home/shadow.png) no-repeat center / 100%, url(/images/home/shadow.png) no-repeat center / 100%, url(/images/home/shadow.png) no-repeat center / 100%}
    .product .productCallout h2{margin: 0}
    .product .productCallout a {position: relative; z-index: 2}
    .product .productCallout .button:hover {color:#fff; background: #151619}
    .product .productCallout .button + a:hover {color:#151619}

.product #content .cart-options > h2 {font-weight: 700; font-family: "museo-sans", sans-serif; margin-bottom: 1.25em; font-size: 2em; color: #0057b8}
.product #content .cart-options > h2 span {font-size: 1.125rem; display: block; color:#000}
.product #content .cart-options .size-options {display: inline-block; vertical-align: bottom; line-height: 2em; margin-right:2em}
.product #content .cart-options .styledSelect {display: inline-block; border-radius: 3px; -webkit-transition: ease all 200ms; transition: ease all 200ms; vertical-align: middle; padding: 0;}
.product #content .cart-options .styledSelect select {font-size: 1rem; background: none; -webkit-appearance:none; padding: 0.25em 2em 0.25em 0.75em; background: #e6e6e6 url(/images/icons/misc/select-down.svg) no-repeat; background-position: calc(100% - 0.75em) center; float: left; -moz-appearance:none; text-indent: 0.1px; text-overflow:''}
.product #content .cart-options .styledSelect select::-ms-expand {display: none;}
.product #content .cart-options button {font-weight: 600; padding:1.25em 1.5em}

.product #content .find-it-local {float: right; padding:3em 2em; max-width: 42%; text-align: center; background: #e6e6e6; border-radius: 3px}
    .product #content .find-it-local h2 {color: #2f2f2f; margin-bottom: 1em; font-size:1.625em}
    .product #content .find-it-local .button {color: #febb21; font-size: 1rem; padding: 1em 1.25em; background: #2f2f2f}
    .product #content .find-it-local .button:hover {color: #fff; background: #0057b8}

.product #content .also-available-from {clear: both; width:100%; float:left; margin-top:3em}
.product #content .carousel {padding: 1em 3em 2em; margin-bottom: 3em; text-align: center; overflow: hidden; border-top: 1px solid #e3dddb; border-bottom: 1px solid #e3dddb; position: relative}
    .product #content .carousel button img {height: auto;}
    .product #content .carousel button.prev {left:0}
    .product #content .carousel button.next {right:0}
    .product #content .shop-carousel {-webkit-box-sizing: border-box;box-sizing: border-box;z-index: 2}
    /*.product #content .shop-carousel ul {box-sizing: content-box;}
    .product #content .shop-carousel li {box-sizing: content-box; text-align: left; position: relative; background: none; position: relative; padding: 4.5em 1.5em 3em; width: calc(33% - 3em); height: auto}
    .product #content .shop-carousel li > * {display: block}*/
    .product #content .shop-carousel .slider:not(.slick-slider) {overflow: auto; margin: 0 0 2em}
    .product #content .shop-carousel li {padding: 4em 0 0 0; float: left; width:33.333%; position: relative; background: none; text-align: left;}
    .product #content .shop-carousel li h3 {color:#000; margin-bottom: 0.15em; font-size:1.15em}
    .product #content .shop-carousel li h3 span {font-family: "museo-sans", sans-serif; font-size: 0.55em; font-weight:300; color:#0057b8; font-style: italic; margin-left:0.25em}
    .product #content .shop-carousel li > span,
    .product #content .shop-carousel li a {font-size: 0.8em; line-height: 120%}
    .product #content .shop-carousel li .store-type {font-style: italic; color:#666; margin:-0.25em 0 0.75em}
    .product #content .shop-carousel li .address, .searchResults li .links {margin-bottom: 0.75em}
    .product #content .shop-carousel li .links {overflow: auto; font-size: 0.9em; margin-bottom:1.25em;}
         .product #content .shop-carousel li .links a {display: block; float: left; clear: both; max-width:100%; padding: 0.25em 0.5em; line-height: 120%; border-radius:3px; white-space: nowrap; text-overflow:ellipsis; overflow:hidden}
         .product #content .shop-carousel li .links a:before {content:''; vertical-align: bottom; display: inline-block; width: 1em; height: 1em; margin-right:0.5em; background-position: center; background-size:contain; background-repeat: no-repeat}
              .product #content .shop-carousel li .links a.phone:before {background-image: url(/images/icons/misc/phone.svg)}
              .product #content .shop-carousel li .links a.email:before {background-image: url(/images/icons/misc/mail.svg)}
         .product #content .shop-carousel li .links a+a {margin-top:1px}
         .product #content .shop-carousel li .links a:hover {background: #FEBB21; color: #0057B7}
         .product #content .shop-carousel li .button {display: inline-block; padding: 0.75em 1em}
         .product #content .shop-carousel li .logo {display: block; width:5em; height: 5em; position: absolute; top:0; left:1.5em; background-size:contain; background-position:center; background-repeat:no-repeat}
    .product .play-button {position: absolute; cursor: pointer; z-index:2; top:50%; left:50%; width: 3.875em; height: 2.750em; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); background: url(/images/icons/misc/play-off.svg) no-repeat center / contain}
    .product .play-button:after {content:''; width: 3.875em; height: 2.750em; display: block; opacity: 0; -webkit-transition: ease all 200ms; transition: ease all 200ms; background: url(/images/icons/misc/play-on.svg) no-repeat center / contain}
        .product .videoContain:hover .play-button:after {opacity: 1;}
    .product .videoContain {width: 100%; position: relative; border: 1px solid #fff;  background: #000}
        .product .videoContain .play-button {opacity: 1; font-size: 0.7em}
        .product .videoContain .videoThumb {width:100%; cursor: pointer; -webkit-transition: ease all 200ms; transition: ease all 200ms; opacity: 0.8; height: 0; padding-bottom: 56%; background-position: center; background-repeat:no-repeat; background-size:cover}
        .product .videoContain:hover .videoThumb {opacity: 1}


/* Audience Page ------------------------------ */
.landing * h1 {font-size: 2.500em; font-style: normal}
.landing main, .landing > section {float: left; clear: both; width: 100%}
.landingHeader {height: 35vh; min-height: 25em; width: 100%; position: relative; float: left; clear: both; border-bottom:1px solid #fff}
    .landing-ClassicCars .landingHeader {background: url(/images/landing/header-classiccars.jpg) no-repeat center / cover}
    .landing-HotRods .landingHeader {background: url(/images/landing/header-hotrods.jpg) no-repeat center / cover}
    .landing-Powersports .landingHeader {background: url(/images/landing/header-powersports.jpg) no-repeat center / cover}
    .landing-OffRoad .landingHeader {background: url(/images/landing/header-offroad.jpg) no-repeat center / cover}
    .landing-HeavyDuty .landingHeader {background: url(/images/landing/header-generator.jpg) no-repeat center / cover}
.landing main {text-align: center; padding-bottom:2em}
        .landing-ClassicCars main {background: url(/images/landing/texture-classiccarsleft.jpg) no-repeat top left / 50% auto, url(/images/landing/texture-classiccarsright.jpg) no-repeat top right / 50% auto} 
        .landing-HotRods main {background: url(/images/landing/texture-hotrodsleft.jpg) no-repeat top left / 50% auto, url(/images/landing/texture-hotrodsright.jpg) no-repeat top right / 50% auto} 
        .landing-Powersports main {background: url(/images/landing/texture-powersportsleft.jpg) no-repeat top left / 50% auto, url(/images/landing/texture-powersportsright.jpg) no-repeat top right / 50% auto} 
        .landing-OffRoad main {background: url(/images/landing/texture-offroadleft.jpg) no-repeat top left / 50% auto, url(/images/landing/texture-offroadright.jpg) no-repeat top right / 50% auto} 
        .landing-HeavyDuty main {background: url(/images/landing/texture-heavydutyleft.jpg) no-repeat top left / 50% auto, url(/images/landing/texture-heavydutyright.jpg) no-repeat top right / 50% auto} 
    .landing main .wrap {max-width: 47.5em}
    .landing main h1 {font-size: 4.125em; display: inline-block; color:#000; font-style: normal; position: relative; padding-bottom: 0.3em}
    .landing main h1:after {content: ''; width: 80%; height: 0.375rem; display: block; position: absolute; bottom:0; left:10%; background: #febb21}
    .landing main h2 {font-style: italic; font-size: 1.125em; color:#000; margin-top: -3.25em}
    .landing main .landingBottle {width: 18.750em; height: 24em; margin:-18em auto 0; position: relative; z-index: 1}
        .landing-ClassicCars main .landingBottle {background:url(/images/products/High-Performance-Coolant.png) no-repeat center bottom / contain}
        .landing-HotRods main .landingBottle {background:url(/images/products/High-Performance-Coolant.png) no-repeat center bottom / contain}
        .landing-Powersports main .landingBottle {background:url(/Customer-Content/www/products/Photos/Full/Powersports-Coolant.png) no-repeat center bottom / contain}
        .landing-OffRoad main .landingBottle {background:url(/images/products/High-Performance-Coolant.png) no-repeat center bottom / contain}
        .landing-HeavyDuty main .landingBottle {background:url(/images/products/Heavy-Duty-Coolant.png) no-repeat center bottom / contain}
        .landing main .bottleShadow {width: 25em; height: 2.5em; margin: -1.75em auto; background:url(/images/landing/bottle-shadow.png) no-repeat center / contain}
.landing .seekers {margin: 3em 0}
    .landing .seekers a {padding: 1em 1.75em}

.landing #TechnicalSpecs {background-color: #000; color:#fff; padding: 8% 1em 6%}
        .landing-ClassicCars #TechnicalSpecs {background: url(/images/landing/tech-classiccars.jpg) no-repeat center / cover}
        .landing-HotRods #TechnicalSpecs {background: url(/images/landing/tech-hotrods.jpg) no-repeat center / cover}
        .landing-Powersports #TechnicalSpecs {background: url(/images/landing/tech-powersports.jpg) no-repeat center / cover}
        .landing-OffRoad #TechnicalSpecs {background: url(/images/landing/tech-offroad.jpg) no-repeat center / cover}
        .landing-HeavyDuty #TechnicalSpecs {background: url(/images/landing/tech-heavyduty.jpg) no-repeat center / cover}
    .landing #TechnicalSpecs .content {width:50%; float: right; padding-left:5%}
    .landing #TechnicalSpecs h1 {color:#fff}
    .landing #TechnicalSpecs p {line-height: 130%; margin-bottom: 1.5em}

.landing .photo-strip {width: 100%; float: left; border-top: 1px solid #fff; border-bottom: 1px solid #fff; display: table}
    .landing .photo-strip > * {width: 10%; border-right: 1px solid #fff; text-align: center; display: table-cell}
        .landing .photo-strip a {background: #febb21; color:#000; font-weight:700; padding: 6.5% 0; height:100%; color:#000;}
        .landing .photo-strip a:hover {background: #151619; color: #febb21}
            .landing-ClassicCars .photo-strip .photo1 {background: url(/images/landing/classiccars/gallery-4.jpg) no-repeat center / cover}
            .landing-ClassicCars .photo-strip .photo2 {background: url(/images/landing/classiccars/gallery-1.jpg) no-repeat center / cover}
            .landing-ClassicCars .photo-strip .photo3 {background: url(/images/landing/classiccars/gallery-3.jpg) no-repeat center / cover}
            .landing-ClassicCars .photo-strip .photo4 {background: url(/images/landing/classiccars/gallery-2.jpg) no-repeat center / cover}
            .landing-ClassicCars .photo-strip .photo5 {background: url(/images/landing/classiccars/gallery-5.jpg) no-repeat center / cover}
            .landing-HotRods .photo-strip .photo1 {background: url(/images/landing/hotrods/gallery-1.jpg) no-repeat center / cover}
            .landing-HotRods .photo-strip .photo2 {background: url(/images/landing/hotrods/gallery-2.jpg) no-repeat center / cover}
            .landing-HotRods .photo-strip .photo3 {background: url(/images/landing/hotrods/gallery-3.jpg) no-repeat center / cover}
            .landing-HotRods .photo-strip .photo4 {background: url(/images/landing/hotrods/gallery-4.jpg) no-repeat center / cover}
            .landing-HotRods .photo-strip .photo5 {background: url(/images/landing/hotrods/gallery-5.jpg) no-repeat center / cover}
            .landing-Powersports .photo-strip .photo1 {background: url(/images/landing/powersports/gallery-1.jpg) no-repeat center / cover}
            .landing-Powersports .photo-strip .photo2 {background: url(/images/landing/powersports/gallery-2.jpg) no-repeat center / cover}
            .landing-Powersports .photo-strip .photo3 {background: url(/images/landing/powersports/gallery-3.jpg) no-repeat center / cover}
            .landing-Powersports .photo-strip .photo4 {background: url(/images/landing/powersports/gallery-4.jpg) no-repeat center / cover}
            .landing-Powersports .photo-strip .photo5 {background: url(/images/landing/powersports/gallery-5.jpg) no-repeat center / cover}

.landing #HowItWorks {color:#fff; padding: 8% 1em}
.landing #TechnicalSpecs + #HowItWorks {border-top: 1px solid #fff}
        .landing-ClassicCars #HowItWorks {background: url(/images/landing/how-classiccars.jpg) no-repeat center / cover}
        .landing-HotRods #HowItWorks {background: url(/images/landing/how-hotrods.jpg) no-repeat center / cover}
        .landing-Powersports #HowItWorks {background: url(/images/landing/how-powersports.jpg) no-repeat center / cover}
        .landing-OffRoad #HowItWorks {background: url(/images/landing/how-offroad.jpg) no-repeat center / cover}
        .landing-HeavyDuty #HowItWorks {background: url(/images/landing/how-heavyduty.jpg) no-repeat center / cover}
    .landing #HowItWorks .left, .landing #HowItWorks .right {width:50%; float:left; overflow: hidden;}
    .landing #HowItWorks .right {padding-left: 5%; text-align: center}
    .landing #HowItWorks .play-button {position: absolute; cursor: pointer; z-index:2; top:50%; left:50%; width: 3.875em; height: 2.750em; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); background: url(/images/icons/misc/play-off.svg) no-repeat center / contain}
    .landing #HowItWorks .play-button:after {content:''; width: 3.875em; height: 2.750em; display: block; opacity: 0; -webkit-transition: ease all 200ms; transition: ease all 200ms; background: url(/images/icons/misc/play-on.svg) no-repeat center / contain}
        .landing #HowItWorks #youtube-player:hover .play-button:after, .landing #HowItWorks .videoContain:hover .play-button:after {opacity: 1;}
    .landing #HowItWorks .videoContain {width: 35%; display: inline-block; position: relative; border: 1px solid #fff; margin:2%; background: #000}
        .landing #HowItWorks .videoContain .play-button {opacity: 1; font-size: 0.7em}
        .landing #HowItWorks .videoContain .videoThumb {width:100%; cursor: pointer; -webkit-transition: ease all 200ms; transition: ease all 200ms; opacity: 0.4; height: 0; padding-bottom: 56%; background-position: center; background-repeat:no-repeat; background-size:cover}
        .landing #HowItWorks .videoContain:hover .videoThumb {opacity: 1}
    .landing #HowItWorks h1 {color:#fff; margin-bottom: 0.7em}
    .landing #HowItWorks .button {margin-top:4%}
    
    .landing .play-button {position: absolute; cursor: pointer; z-index:2; top:50%; left:50%; width: 3.875em; height: 2.750em; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); background: url(/images/icons/misc/play-off.svg) no-repeat center / contain}
    .landing .play-button:after {content:''; width: 3.875em; height: 2.750em; display: block; opacity: 0; -webkit-transition: ease all 200ms; transition: ease all 200ms; background: url(/images/icons/misc/play-on.svg) no-repeat center / contain}
        .landing #youtube-player:hover .play-button:after, .landing .videoContain:hover .play-button:after {opacity: 1;}
    .landing .videoContain {width: 35%; display: inline-block; position: relative; border: 1px solid #fff; margin:2%; background: #000}
        .landing .videoContain .play-button {opacity: 1; font-size: 0.7em}
        .landing .videoContain .videoThumb {width:100%; cursor: pointer; -webkit-transition: ease all 200ms; transition: ease all 200ms; opacity: 0.4; height: 0; padding-bottom: 56%; background-position: center; background-repeat:no-repeat; background-size:cover}
        .landing .videoContain:hover .videoThumb {opacity: 1}

    .landing .youtube-thumb {position: absolute; cursor: pointer; top: 0; right:0; left:0; bottom:0; background-size:cover; background-position:center; background-repeat: no-repeat}
    .landing #youtube-player {position: absolute; width: 100%; height: 100%; position: absolute; top:0; left:0;}

.landing .vehicles {padding: 7% 1em; text-align: center; border:0}
        .landing-ClassicCars .vehicles {background: url(/images/landing/vehicleTypeBg-ClassicCars.jpg) no-repeat center / cover}
        .landing-HotRods .vehicles {background: url(/images/landing/vehicleTypeBg-HotRod.jpg) no-repeat center / cover}
        .landing-Powersports .vehicles {background: url(/images/landing/vehicleTypeBg-Powersports.jpg) no-repeat center / cover}
        .landing-OffRoad .vehicles {background: url(/images/landing/vehicleTypeBg-Offroad.jpg) no-repeat center / cover}
        .landing-HeavyDuty .vehicles {background: url(/images/landing/vehicleTypeBg-HeavyDuty.jpg) no-repeat center / cover}
    .landing .vehicles h1 {color:#fff; text-shadow: 0 1px 10px #000 }
    .landing .vehicles a {width:25%; padding-top: 20%; border-top: 1px solid #fff; border-bottom: 1px solid #fff; border-left: 1px solid #fff}
        .landing .vehicles a:last-child {border-right: 1px solid #fff;}

.landing #Convert {padding:5% 1em; text-align: center}
    .landing #Convert .content > h1 {position: relative;max-width: 47.5em; display: inline-block; padding-bottom: 0.65em; margin-bottom: 0.5em;}
    .landing #Convert .content > h1:after {content: ''; width: 50%; height: 0.375rem; display: block; position: absolute; bottom:0; left:25%; background: #febb21}
    .landing #Convert .content > p {max-width: 47.5em; margin: 0 auto 2em}
    .landing #Convert .product-wrap {background: #febb21; border-radius:4px; padding:3em 1em 2em;}
    .landing #Convert .product img {position: relative; z-index:2; max-width: 10em;}
        .landing #Convert .product.large img {max-width: none;}
    .landing #Convert .product h2 {text-transform: uppercase; margin-bottom:0}
    .landing #Convert .product a {bottom:auto; left:auto; position: relative; transform: none; z-index: 2}
    .landing #Convert .product a.bottle {height: 16.875em}
    .landing #Convert .product .shadow {width:16em; margin: -1.75em auto 0}
    .landing #Convert .product-wrap .vr {width: 2.813em; min-width: 2.813em; height: 2.813em;margin-top:8em; background: url('/images/landing/plus.svg') no-repeat center}
    .landing #Convert .product .button:hover {color:#fff; background: #151619}
    .landing #Convert .product .button + a:hover {color: #151619;}
    .landing #Convert .convertContent {margin:4em 0 2em}
    .landing #Convert .convertContent .half {text-align:left; width: 45%; display: inline-block; vertical-align: top}
    .landing #Convert .convertContent .half + .half {padding-left: 5%; margin-left: 5%; border-left: 1px solid #b2b2b2}
    .landing #Convert .convertContent span {font-size: 1.125em; font-family: "museo-sans-condensed", sans-serif; font-style: italic; padding: 0.15em 0.5em; margin-bottom:1em; text-transform:uppercase; display: inline-block; color:#febb21; background:#000}
    .landing #Convert .convertContent span+h3 {font-size: 1.125em; color:#0057b8; font-size: 1.875em; margin-bottom: 0.4em}
    .landing #Convert .convertContent h3 + h4 {font-size: 1rem; font-family: "museo-sans", sans-serif; color: #4d4d4d; font-style: italic; font-weight:600; margin-bottom:2em}
    .landing #Convert .convertContent ol{counter-reset: counterstyle; overflow: hidden; margin:0}
    .landing #Convert .convertContent ol > li{position: relative; padding-left: 3em; margin-bottom:1.5em}
    .landing #Convert .convertContent ol > li:before{content: counter(counterstyle); counter-increment: counterstyle; position: absolute; left: 0; top: 0; font-family: "museo-sans-condensed", sans-serif; font-size: 1.125em; color: #202020; background: #febb21; width: 1.750em; text-align: center}
    .landing #Convert .convertContent ol > li:last-child{margin:0}
    .landing #Convert .convertContent .full {text-align:center; width: 75%; display: inline-block; vertical-align: top}
    .landing #Convert .convertContent .full > p {text-align: left; max-width: 100%}
    .landing #Convert .convertContent .full ol, .landing #Convert .convertContent .full ul {text-align: left}
    .landing #Convert .convertContent .full span+h3 {margin-bottom: 1em}
    .landing #Convert .convertContent aside{text-align: left; max-width:80%; margin: 3em auto 0}
    .landing #Convert .convertContent aside p{margin-bottom: 0.75em}
.landing .where-to-buy .buying-options .button {font-style: normal; padding:0.85em 1.5em}
    .landing .where-to-buy .buying-options .buy-online {margin-bottom: 0.75em}
    .landing .where-to-buy .buying-options .buy-online .buyDirect {font-size: 1.125rem; display: inline-block; vertical-align: bottom; border: 2px solid #4baf11; border-radius: 4px; line-height: 120%; padding: 0.75em 1.25em 0.75em 1em; font-weight: 600; margin: 0 0 0.5rem; background: #4bbf06; color: #fff;}
    .landing .where-to-buy .buying-options .buyDirect:before {content: "\f07a"; margin-right: 0.35em; display: inline-block; font-family: FontAwesome; font-size: 1.25em; opacity: 0.75;}
    .landing .where-to-buy .buying-options .buyDirect:hover {color:#fff; background: #febb21; border-color: #de9e0a}

.landing.how-it-works .landingHeader {background: url(/images/landing/header-how-it-works.jpg) no-repeat center / cover}
.landing.how-it-works main {padding: 0; position: relative}
.landing.how-it-works main:before {content: ""; height: 353px; width: 50%; position: absolute; top:0; left:0; background: url(/images/how-it-works-liquid-left.jpg) no-repeat top left / auto 100%}
.landing.how-it-works main:after {content: ""; height: 259px; width: 50%; position: absolute; top:0; right:0; background: url(/images/how-it-works-liquid-right.jpg) no-repeat top right / auto 100%}
.landing.how-it-works main .button {padding: 0 1em; line-height: 2.94rem;}
.landing.how-it-works main .button.hollow {background: #fff; border: 2px solid #febb21; color: #febb21}
.landing.how-it-works main .button.hollow:hover {color: #fff; background: #febb21}
.landing.how-it-works main .landingBottle {width: 100%; max-width: 587px; background: url(/images/bottles-updated.png) no-repeat center bottom / contain}
.landing.how-it-works main > .wrap {padding: 0.5rem 1em 4.88rem; z-index: 1}
.landing.how-it-works main > .wrap .content strong {display: block; font-weight: 900; font-size: 1.125rem}
.landing.how-it-works main section {width: 100%; padding: 6em 1em; text-align: left; float: left; clear: both; border-bottom: 1px solid #fff; background-color:#333; overflow: auto}
.landing.how-it-works main .flex {overflow: auto; clear: both; float: left; width: 100%;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-pack: start;
    -webkit-box-pack: start;
            justify-content: flex-start;
    -ms-flex-line-pack: stretch;
    align-content: stretch;}
.landing.how-it-works main > section .wrap {max-width: 78.13rem; margin: 0 auto;}
.landing.how-it-works main > .flex section .wrap {max-width: 38.06em; float: left}
    .landing.how-it-works main > .flex section {padding:6em 3.75em}
    .landing.how-it-works main > .flex section+section {border-left: 1px solid #fff}
.landing.how-it-works section h2 {font-size: 2.500em; margin: 0 auto 0.5em; color: #fff; text-transform: uppercase; font-style: normal}
.landing.how-it-works main section p {color: #fff}
.landing.how-it-works main .left {width: 50%; float: left}
.landing.how-it-works main .right {width: calc(50% - 3.75em); float: right}
.landing.how-it-works main .flex section p {max-width: 30.13em}
    .landing.how-it-works #Benefits {background: url(/images/landing/how-it-works-benefits-bg.jpg) no-repeat center / cover}
    .landing.how-it-works #Conversion {background: url(/images/landing/how-it-works-conversion-bg.jpg) no-repeat center / cover}
    .landing.how-it-works #TechTips {background: url(/images/landing/how-it-works-techtips-bg.jpg) no-repeat center / cover}
    .landing.how-it-works #FAQ {background: url(/images/landing/how-it-works-faqs-bg.jpg) no-repeat center / cover}


.productSearchFilter {display: block; clear: both; margin-bottom:4em}
.accordion {padding:0 0}
.accordion form {margin: 0; padding:1em 1em;background: #e6e6e6;border-radius: 5px;}
.accordion h2 { padding:.5em .75em .5em .25em; margin-bottom: 0;cursor: pointer; font-size: 1.5em;display: inline-block;color:#363636}
.accordion h2:before {
    content: "+";
    float: left;
padding:0 .25em;
color:#FEBB21}
#content .accordion h2:hover:before {color: #000}
#content .accordion h2:hover { background:#FEBB21; color: #000}
.productSearchFilter form label {display: block}
/* Museum Landing Page ------------------------------ */
.museums main {padding: 0 0 4em}
.museums .pageHeader {height: 0; padding-bottom: 31%}
.museums main .wrap {max-width: 54em; margin: 0 auto}
.museums main > .wrap {padding: 3.750em 1em 0; overflow: visible}
.museums .wrap h1 {font-style: normal; margin-left: 11rem; overflow: visible; text-align: center; position: relative; padding-bottom: 2em; margin-bottom: 0.25em}
.museums .wrap h1:before {content: ''; display: block; position: absolute; top: -1rem; left: -10rem; background: url(/images/museums/Evans-Protected.png) no-repeat center; background-size: contain; width: 8.44rem; height: 8.44rem; -webkit-transform: rotate(-15deg); transform: rotate(-15deg);}
.museums .wrap h1:after {content: ''; width: 70%; height: 0.375rem; display: block; position: absolute; bottom: 1em; left: 15%; background: #febb21;}
.museums .wrap h2 {color: #000; margin-bottom: 0.5em}
.museums .wrap p {margin-bottom: 1em}
.museums .wrap .photoright {max-width:40%; margin: 0 -5em 0em 1em; height: auto}
.museums .museum {margin-top: 2em}
.museums .museum .top {background: #000; color:#fff;}
.museums .museum .top .wrap {padding: 4em 1em;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-pack: start;
    -webkit-box-pack: start;
            justify-content: flex-start;
    -ms-flex-line-pack: stretch;
    align-content: stretch;}
.museums .museum .top .wrap .logo {width: 50%;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-pack: start;
    -webkit-box-pack: start;
            justify-content: flex-start;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
            align-items: center;
}
.museums .museum .top .wrap .logo img {max-width:20.5em; height: auto}
.museums .museum .top .wrap .contact-info {width: 50%; text-align: left; line-height: 140%; margin-left: 2em;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-pack: start;
    -webkit-box-pack: start;
            justify-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -ms-flex-align: center;
    -webkit-box-align: center;
            align-items: center;}
.museums .museum .top .wrap .contact-info div {width: 100%}
.museums .museum .top .wrap .contact-info h3 {color:#fff; font-size: 1.5em; margin-bottom: 0.25em}
.museums .museum .top .wrap .contact-info a {display: block}
.museums .museum .top .wrap .contact-info a:not(.tel) {color: #febb21}
.museums .museum .top .wrap .contact-info a:not(.tel):hover {color: #0057b8}
.museums .museum .top .wrap .contact-info a.tel {color: #fff}
.museums .museum-image {padding-bottom: 33%; margin-bottom: 2em; background-size: cover; background-position: center;}





/* Vehicle Landing Page ------------------------------ */
.fullWidth.vehicle-list main, .fullWidth.vehicle-list #content, .fullWidth.vehicle-list main > .wrap {width: 100%; padding:0; max-width: 100%}
    .fullWidth.vehicle-list #content > h1 {display: none}
    #vehicleList > a{width: 100%; display: block; float: left; cursor: pointer; padding:10%; border-bottom: 1px solid #fff; clear:both; position: relative}
        #vehicleList > a.classic-cars{background: url(/images/landing/vehicle-page/classic-cars.jpg) no-repeat center left / cover}
        #vehicleList > a.muscle-cars{background: url(/images/landing/vehicle-page/hot-rods.jpg) no-repeat center left / cover}
        #vehicleList > a.power-sports{background: url(/images/landing/vehicle-page/power-sports.jpg) no-repeat center left / cover}
        #vehicleList > a.off-road{background: url(/images/landing/vehicle-page/off-road.jpg) no-repeat center left / cover}
        #vehicleList > a.heavy-duty{background: url(/images/landing/vehicle-page/heavy-duty.jpg) no-repeat center left / cover}
        #vehicleList > a.events{background: url(/images/landing/vehicle-page/events.jpg) no-repeat center left / cover}
        #vehicleList > a.photos{background: url(/images/landing/vehicle-page/photos.jpg) no-repeat center left / cover}
        #vehicleList > a.videos{background: url(/images/landing/vehicle-page/videos.jpg) no-repeat center left / cover}
        #vehicleList > a.news{background: url(/images/landing/vehicle-page/news.jpg) no-repeat center left / cover}
        #vehicleList > a.museum-program{background: url(/images/museums/museum-header.jpg) no-repeat center left / cover}
    .fullWidth.vehicle-list #content * {text-align: left}
    .fullWidth.vehicle-list #content .h1, .fullWidth.vehicle-list .content .h1 {font-size: 4.125em; text-transform: uppercase; display: inline-block; line-height: 120%;float: left; clear: both; font-family: "museo-sans-condensed", sans-serif; display: inline-block; padding: 0.25rem 0.75rem; background: rgba(0,0,0,0.6); color: #fff; font-style: normal;margin-bottom: 0;}
    .fullWidth.vehicle-list #content .h1:hover {background: #0057b8; cursor: pointer;}
    .fullWidth.vehicle-list #content > h1 {display: none}
    .fullWidth.vehicle-list #content .h2 {font-size: 1.125em; color: #000; font-family: "museo-sans-condensed", sans-serif; display: inline-block; line-height: 120%;float: left; clear: both; padding: 0.25em 0.75rem; margin: 0; display: inline-block; background: #febb21;}

/* Videos Page */
.videos section:first-child hr {margin-top: 0;}

/* FOOTER ------------------------------ */
body>footer{padding-top:5em;color:#b8b8b8;line-height:1.1em; background:#0f0f11; border-bottom: 3px solid #febb21}
body>footer a{color:#fff}
body>footer a.tel {all: unset; color:#b8b8b8}
body>footer a:hover, footer a:active{color:#ccc}
body>footer a.on, footer .on>a{text-decoration:none;color:#febb21}
.fatFooter{margin-bottom:4.625em}
.fatFooter > section {width:33.33%; float: left; font-size: 0.813em; overflow: hidden}
.fatFooter > section + section {text-align: center}
.fatFooter h1 {font-size: 1.538em; font-style: normal; color:#febb21; margin-bottom: 1.6em;}
.fatFooter address {width:50%; float: left}
.fatFooter address span {font-size: 1.154em; font-family: "museo-sans-condensed", sans-serif; display:block; margin-bottom:0.5em; color:#fff; text-transform: uppercase}
.fatFooter > section a {display: block; font-size: 1.231em; font-weight:400; margin-top:1em}
.fatFooter > section h1+a {font-size:2.308em; font-family: "museo-sans-condensed", sans-serif; color:#fff; margin: -0.3em 0 0.25em}
.fatFooter > section .button {font-size: 1.25em; display: inline-block; margin-bottom: 0.5em}
.fatFooter > section .social {clear:both; width:100%; float:left; margin-top: 3.231em}
.fatFooter > section .social a {display: inline-block; float: left; margin:0}
.fatFooter > section .social a+a {margin-left:5%}
.fatFooter > section .social a:hover {opacity: 0.5}

body>footer #google_translate_element {font-size: 1em; border-radius: 0.25em; -webkit-transition:all ease-out 200ms; transition:all ease-out 200ms; position: relative; background: rgba(51,51,51,0.5); display: inline-block}
body>footer #google_translate_element:hover {background: rgba(255,255,255,0.15)}
body>footer #google_translate_element img {display: none}
body>footer #google_translate_element a {display: inline-block; margin-top:0}
body>footer #google_translate_element .goog-te-gadget-simple > span {display: inline-block; line-height:1.875rem; color:#fff; vertical-align: middle}
body>footer #google_translate_element .goog-te-gadget-simple > span:before {content: ""; display: inline-block; vertical-align: middle; width: 1.875rem; height: 1.875rem; background:url(/images/icons/misc/google-translate@2x.png) no-repeat center / 1.875rem 1.875rem}
body>footer #google_translate_element .goog-te-gadget-simple a span {color:#fff; font-size: 0.875rem; margin-left:0.5em}
body>footer #google_translate_element .goog-te-gadget-simple a:after {content: '\f0d7'; font-family: FontAwesome; color: #e2231a; margin-left:0.75em}
body>footer #google_translate_element .goog-te-gadget-simple a span {display: none}
body>footer #google_translate_element .goog-te-gadget-simple a span:first-child {display: inline-block}
body>footer #google_translate_element .goog-te-gadget-simple {border:0; background:none; padding:0.75em;}
body>footer #google_translate_element .goog-te-gadget-simple spam[style="border-left-width: 1px"] {display: none}


body>footer .wrap {border-top: 1px solid rgba(255,255,255,0.15); padding: 1.688em 0}
body>footer .copyright {color:#666; font-size: 0.813em; line-height: 1.75em}
body>footer .copyright a {color: #fff}
body>footer .copyright .on {color: #febb21}
body>footer nav{display:inline}
body>footer .copyright > div {float: right}

/* APPS ------------------------------ */

/* pagination */
.pagination{font-size:.95em;text-align:right}

/* page header */
.pageHeader{width:100%;height:25vh; float:left; clear: both; background-size: cover; background-position: center}
.vehicle-list .pageHeader {display: none}

/* MANAGEMENT OVERRIDES ------------------------------ */
#wysiwygBody{background:#fff}

/* management table */
hr+.manage{margin-top:-1em}
.manage{border-bottom:1px solid rgba(0,0,0,.2);width:100%;line-height:1.3em}
.manage th{border-bottom:1px solid rgba(0,0,0,.2);text-align:left}
.manage th.right{text-align:right}
.manage th.sort{cursor:pointer}
.manage th.sort img{margin-left:5px}
.manage th img {position:relative;bottom:-2px}
.manage td,.manage th{padding:5px 5px 5px 0}
.manage td:first-child{padding-left:.8em}
.manage img.preload{display:none;position:absolute;z-index:9900;top:0;border:solid 1px #fff}
.manage td.icons img{margin-left:5px;position:relative;bottom:-2px}
.manage td:first-child.icons img{margin-left:0}
.manage td:first-child.icons{padding-left:3px;padding-right:3px}
.manage td.icons a:first-child img{margin-left:0}
.manage td.icons input{position:relative;bottom:2px;margin-left:5px}
.manage .hidden{font-style:italic;color:#900}
.manageButton{text-align:right;padding:10px 0}
.alternate tbody tr:nth-child(even), .even{background:#fff}
.alternate tbody tr:nth-child(odd), .odd {background:rgba(0,0,0,.06)}
.manage+hr, .manage+.manageLinks+hr{margin-top:50px}
.manageLinks{margin-top:10px}
.manageLinks a{white-space:nowrap}
.manageLinks a img{position:relative;bottom:-2px}
.manageLinks button{margin-left:5px}
.manageButtons{text-align: right;padding:10px 0}
.wsReturnToButton {float:right;margin-top:-3.5em}
.manage.rightFirstChild td:first-child{text-align:right}
.sortRow th{cursor:pointer}
.manageEllipsis{width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
/*
.manage td.reportTitle{padding-left:5px;width:150px; cursor:pointer}
.manage td.views{padding-right:5px}
.manageCaption{}
.manageCaption td:first-child{padding-top:0;padding-left:0;font-size:.85em; font-style:italic;opacity:0.4;filter:alpha(opacity=4)}
*/


#mainnav > .menu, .primary, .secondary, #mainnav li>span, header>.menu, .mobileOnly {display: none}

.content img[alt="image003.png"] {height: 1em !important;width: auto !important;margin-right: .25em !important;}

/* RESPONSIVE ------------------------------ */

@media screen and (min-width:2000px) {
    body>*>.wrap, body>footer>.fatFooter, #alertApp>*, #vehicleList > section .wrap {max-width: 95em}
    
}

@media screen and (max-width:1220px) {
/*     body {padding-top: 5rem}
     body>header {height: 5rem}
     #brand {width: 12.5em; padding: 0 1em}
     #mainnav {font-size: 0.9em;}
     #mainnav a {line-height: 5rem; padding: 0 1em}
     #megamenu {top: 5rem}*/
    #mainnav a {font-size: 0.8em}
    #mainnav .search {width:4em}
     #megamenu > div section {padding: 3em 2em 2em 20%}
     #megamenu .megaBottle {width:27%; top:2em; background-position: center; background-size:90%}
     #megamenu .megaImage{display: none}
    .landing.how-it-works main:before {width: 30%; background-size: contain}
    .landing.how-it-works main:after {width: 30%; background-size: contain}

    
}

@media screen and (max-width:1134px) {
    body>header, header.small {height: 6rem}
    #brand, .small #brand {position: relative;height: 3em;width: 100%;display: block;}
    #mainnav {display: block; width: 100%; float: left}
    #mainnav a {line-height: 3rem; font-size: 0.7em}
    #mainnav > ul {width: calc(100% - 6rem); float: left; padding-left: 1em;
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        -ms-flex-direction: row;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
                flex-direction: row;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -ms-flex-pack: justify;
        -webkit-box-pack: justify;
                justify-content: space-between;
        -ms-flex-line-pack: center;
        align-content: center;
        -ms-flex-align: center;
        -webkit-box-align: center;
                align-items: center;}
    #megamenu, #megamenu > .fade,
    .small #megamenu, .small #megamenu > .fade {top: 6rem}
    #mainnav .myCart, #mainnav .search {width: 3rem}

}

@media screen and (max-width:1030px) {
    .vehicles a > div.front span {font-size: 1.5vw}
    .home .products h1 {margin-bottom: 5%}
    .styledForm > div {display: block}
    .home .video {background: url(/images/home/video-bg.jpg) no-repeat center / cover !important}
    .home .news {background: url(/images/home/news-bg.jpg) no-repeat center / cover !important}
    .fatFooter address {-webkit-appearance:none}
    .searchResults > ul > li {width:49%}
     .managementTeam .half{width: 100%; clear: both; margin-bottom: 0}
    .managementTeam .half li {min-height: 0; margin-bottom: 2em;}
    .product #content .shop-carousel li {width:50%}
        #content .pdf-links li {width:48%}
}

@media screen and (max-width:950px) {
    .cart-options{
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        -ms-flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
                flex-direction: column;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -ms-flex-pack: start;
        -webkit-box-pack: start;
                justify-content: flex-start;
        -ms-flex-line-pack: stretch;
        align-content: stretch;
        -ms-flex-align: start;
        -webkit-box-align: start;
                align-items: flex-start;
    }
    .product #content .find-it-local {width:100%; font-size: 0.875em; padding:2em; margin:3em 0; max-width:100%; -ms-flex-order: 3; -webkit-box-ordinal-group: 4; order: 3;}
    .products-List .product {width:49%}
}
@media screen and (max-width:800px) {
    body {padding:0; right:0; position: relative; -webkit-transition: ease all 200ms; transition: ease all 200ms}
    .slideNav {right:80%}
    .mobileOnly {display: block; text-align: center; margin:2em 0 1em;}
    .mobileOnly .shadow {background-size:contain; margin-top:-1em}
    body>header, header.small {position: relative; float: left; width:100%; height:auto}
    body>header>aside, .desktopOnly {display: none}
    
    /* Universal */
    h1 {font-size: 1.8em}
    h1+h2{margin-top:-1em}
    h2{font-size:1.6em; color: #4bbf06; margin-bottom: 0.75em;}
    h3{font-size:1.5em; color:#363636}
    h4, th{font-size:1.4em; color:#0057b8}
    h5 {font-size:1.3em; color:#363636}
    h6 {font-size:1.2em;}
    h1, h2, h3, h4, h5, h6 {margin-bottom: 0.75em}

    /* Header & Navigation */
    header > .menu {position: fixed; display: block; top:0; right:-2.5rem; -webkit-transition: ease all 200ms; transition: ease all 200ms; width:2.5rem; height: 2.5rem; background:#151619 url(/images/m/menu.svg) no-repeat center / 44%; border-radius: 0 0 0 4px}
    header > .menu.on {right:0}
    #brand, .small #brand {position:relative; float: left; clear:both; line-height: 3rem; height: 3rem; display: inline-block; padding: 0 1rem; width:50%;}
    #brand img {width:6em}
    .primary {position: relative; display: table; width: 100%; float: left; clear:both; background:#151619;}
        .primary > * {vertical-align: middle; line-height: 3rem; display: table-cell; padding:0 1em; color:#febb21; font-weight:700; font-size:0.9em; text-align: center}
        .primary > * + * {border-left: 1px solid rgba(255,255,255,0.15)}
        .primary > .menu:after {content:''; display: inline-block; width:1em; height: 1em; vertical-align: middle; margin-left:0.5em; background: url(/images/m/menu.svg) no-repeat center / contain}
    .secondary {position: absolute; width:50%; display: block; background: #e6e6e6; top:0; right:0; line-height: 3rem; height: 3rem}
        .secondary a {display: block; float: left; font-size: 0.875em; font-weight: 500; text-align: center; color:#000; padding:0}
        .secondary a.myCart {width: 3em; border-left: 1px solid rgba(0,0,0,0.125); float: right; line-height: 3rem; height: 3rem;}
        .secondary a.myCart:before {content: "\f07a"; font-weight: 600; display: block; font-family: FontAwesome; font-size: 1.25em;}
        .secondary a:first-child {width: calc(100% - 3em); text-align: center; font-weight: 700;}
    #mainnav{right: -80%; position: fixed; -webkit-transition: ease all 200ms; transition: ease all 200ms; overflow: auto; -webkit-overflow-scrolling: touch; height: 100vh; top: 0; padding: 0; width: 80%; z-index: 10; background: #1972c4;}
    .slideNav #mainnav {right:0; -webkit-box-shadow: 0 0 0 100em rgba(0,0,0,0.85); box-shadow: 0 0 0 100em rgba(0,0,0,0.85)}
    #mainnav > .menu {display: block; text-align: left; font-size: 0.8em; text-transform: uppercase; font-weight: 500; position: relative; padding:0 1rem; color: #fff; background: none; line-height: 2.5rem; display: block; position: relative; z-index: 1}
    #mainnav > .menu:before {content: "\f00d"; display: inline-block; vertical-align: middle; color:#fff; font-family: FontAwesome; margin-right:0.5em}
    #mainnav li {text-align:left; margin:0; display: block;}
    #mainnav a {font-size: 0.8em}
    #mainnav .search, #mainnav .myCart {background: none; color:#fff; border-top: 1px solid rgba(255,255,255,0.25)}
    #mainnav > ul {width: 100%}
    #mainnav > ul > li {margin-left:0; border-top: 1px solid rgba(255,255,255,0.25)}
    #mainnav > ul > li.on, #mainnav > ul > li:last-child.on {background: rgba(0,0,0,0.25)}
    #mainnav > ul > li:last-child {background:none}
    #mainnav a, #mainnav > ul > li:last-child a, .small #mainnav a, #mainnav>ul>li:hover>a, #mainnav>ul>li:active>a {position: relative; padding:0 1rem; color: #fff; background: none; line-height: 2.5rem; display: block; position: relative; z-index: 1}
    #mainnav ul {padding-left:0; margin:0; display: block; text-align: left}
    #mainnav li ul {width:100%; position: relative !important; font-size: 1em !important; padding: 0 0 1em; background: none;}
    #mainnav>ul>li.on>a {background: none; color:#fff}
    #mainnav>ul>li.on>a:after {display: none}
    #mainnav li>span {display: block; -webkit-transition: ease all 200ms; transition: ease all 200ms}
    #mainnav li>ul+span, #mainnav li>nav+span {display: block; z-index: 999; position: absolute; right: 0; top: 0; opacity: .9; width: 2.5rem; height: 2.5rem; background: url(/images/icons/misc/mobile-arrow.svg) no-repeat center / 60%}
    #mainnav li.on>ul, #mainnav li.on>nav {display: block !important}
    #mainnav li.on>ul+span, #mainnav li.on>nav+span {-webkit-transform: rotate(90deg); transform: rotate(90deg);}
    .small #mainnav li ul li a {line-height: 1.1em; padding: .5em 1em}
    #megamenu {top:auto; position: relative}
    #megamenu > div {position: relative; height: auto; border:0; -webkit-box-shadow: none; box-shadow: none; display: block; background:none !important}
    #megamenu > div section {display: none !important}
    #mainnav li ul li a,
    #megamenu > div ul li a {font-size: 0.7em;line-height: 1.1em; padding: 0.5em 1rem}
    .small #mainnav>ul>li.on>a {color: #fff; background: none}
    .small #megamenu {top:auto}
    #mainnav .search {width: 100%; text-align: left; padding: 0 1rem; color: #fff; background: none; margin: 0; border-top: 1px solid rgba(255,255,255,0.25); border-left: 0;}
    #mainnav .search:before {display: inline-block; margin-right:0.5em}
    #mainnav .search:after {content: "Search"; font-weight:600}
    #mainnav .myCart {display: block; width: 100%; margin: 0; border-left: 0; text-align: left; padding-left: 1rem;}
    #mainnav .myCart:before {display: inline-block}
    #mainnav .myCart:after {content: "View Cart"; margin-left: 0.5em}
    aside#search {background: #1972c4;}
    aside#search #close {display: inline-block; z-index:1; position: relative; top: 0; right: 0; font-size: 2em; padding: 0.6em 0.85em; text-align: right;float: right;}
    aside#search .center{position: relative; width:100%; padding: 1rem; left:20%; max-width:80%; top:0; transform: none; -webkit-transform:none}
    aside#search .center h1 {font-size: 2em; margin-bottom: 1em;}
    aside#search .center input {padding:  0.25em 0.25em}
    aside#search .center input,aside#search .center button {font-size: 1.25em}
    
    /* Homepage */
    .vehicles a, .vehicles a+a {width:100%; padding-top:60%; border-bottom: 1px solid #fff; border-left: 0; border-right:0}
    .vehicles a > div.front span {font-size: 1em}
    .home .products {background: #e6e6e6; padding:10% 1em}
    .home .products h1 {font-size:1.8em; margin-bottom: 10%}
    .home .products .product-wrap, .interiorProducts .product-wrap {display: block;}
    .home .products .product, .interiorProducts .product { margin-bottom: 10%; padding-bottom: 10%; border-bottom: #ccc}
    .home .products .product .shadow, .interiorProducts .product .shadow {height: 2em; margin:0 auto}
    .products .product .action {position: relative; margin:1em auto; left:0; transform: none; -webkit-transform:none}
    .where-to-buy {padding: 10% 1em}
    .where-to-buy h1 {margin-bottom: 10%}
    .styledForm > div input, .styledForm > div .styledSelect, .styledForm > div span, .styledForm input.zip, .styledForm input.town, .styledForm .styledSelect.short, .styledForm .styledSelect.last {margin-bottom: 0.5em; width:100%; max-width:100%;}
    .styledForm > div span {color: #febb21; background: none}
    .styledForm > div span:after {content:"."}
    .styledForm input.town {margin-left:0}
    .styledForm .button {margin:5% 0}
    .video {padding:0;}
    .video .left, .video .right {width:100%; padding:15% 1em 15%; background: rgba(0,0,0,0.7);}
    .video .right {padding-top:0}
    .home .events {padding: 10% 1em}
    .home .events h1 {margin-bottom:0}
    .home .events ul {display: block}
    .home .events ul li {width:100%; padding-top:10%; margin-top: 10%; border-top:1px solid rgba(255,255,255,0.25)}
    .home .events ul li .logo {top:20%}
    .home .events .white {margin-top: 15%}
    .home .news {padding: 0}
    .home .news .right {padding: 15% 1em; text-align: center;width:100%; background: rgba(255,255,255,0.85)}
    .home .news h1 {margin-bottom: 10%}
    .home .news ul {text-align: left}
    
    /* Interior */
    main>.wrap {padding-top: 10%}
    .pageHeader {display: none}
    #content, main>div>aside {width:100%;}
    #content {padding:0 0 2em}
    .highlight, .content .highlight {padding: 1em}
    #content * h1 {margin-bottom: 0.5em}
    #sidenav {background: #ececec; margin-bottom:2em; border-radius: 5px}
    #sidenav li.on ul li:last-child {border:0}
    .calloutVideo {margin-bottom: 2em}
    .twoCol {
    -webkit-columns:1;
            columns:1;
    -webkit-column-gap:0;
            column-gap:0;
    }
    .threeCol {
    -webkit-columns:1;
            columns:1;
    -webkit-column-gap:0;
            column-gap:0;
    -webkit-column-rule:0;
            column-rule:0;
    }
	#content .photoright, #content .photoleft{max-width:40%;max-height:40%;height:auto;margin: 0 0 5% 5%;}
        #content .pdf-links li {width:100%}

    /* Product Page*/
    .product #content {width:100%; padding-left:0; padding-bottom: 0}
    .productSide {width: 100%; padding-bottom: 0}
    .productSide > .productImage {width: 70%; margin: 1em auto 0}
    .productSide > .productImage .shadow {margin-bottom: 0}
    .product #content .buy-options {margin: 0; clear: both; text-align: center}
    .product #content .buy-options .button, .product #content .buy-options .button + a {display: block; margin-right:0}
    .product #content hr {margin: 1.5em 0}
    .product #content #locate .vr {height: 1px; width:100%; margin: 1em 0}
    main>.wrap>.productSide {padding-bottom: 8%}
    .product .productCallout {padding: 8% 0}
    .product .productCallout .product-wrap {display: block}
    .product .productCallout .product-wrap .product {margin-bottom: 2em}
    .product #content .carousel button {width: 3em}
    .product #content .carousel button:hover {opacity: 1; }
    .product #content .shop-carousel li {width:100%; text-align: center; padding: 4.5em 0 3em}
    .product #content .shop-carousel li .logo {left:50%; -webkit-transform: translateX(-50%); transform: translateX(-50%)}
    .product #content .shop-carousel li .links a {float: none}
    .product #content .cart-options > h2,
    .product #content .cart-options form,
    .product #content .cart-options .size-options {width:100%; margin-bottom: 1rem; display: block; text-align: center}
    .product #content .cart-options button {width:100%}
    .product #content .find-it-local {margin: 2em 0}
    .products-List .product,
    .products-List .product.learn-more {width:100%; padding: 2em 0 0}
        #content .learn-more .description .button {position: relative; bottom: auto; left: auto; -webkit-transform:none; transform:none; margin: 1em auto 0}
    .products-List .product .action {position: relative; height: auto}
    .products-List .product [type="submit"] {position: relative; -webkit-transform: none; transform: none; left:auto; bottom: auto}
    
    
    /* Audience Page*/
    .landingHeader {min-height: 0}
    .landing main {padding-bottom: 0}
    .landing main .landingBottle {width:60%; margin: }
    .landing main .bottleShadow {width: 70%}
    .landing main h1 {font-size: 2em}
    .landing main h2 {margin-top: -1em}
    .landing .seekers {margin: 2em 0 1em}
    .landing .seekers a {display: block; margin: 0 0 0.25em}
    .landing #TechnicalSpecs, .landing #HowItWorks {padding:0; border-bottom: 5px solid #fff}
    .landing #TechnicalSpecs .content, #HowItWorks .content {width:100%; padding:8% 1em 6%; overflow: auto; background: rgba(0,0,0,0.75)}
    .landing * h1 {font-size: 1.75em}
    .landing .photo-strip {display: none}
    .landing #HowItWorks .left, .landing #HowItWorks .right {width:100%; margin-bottom:1em}
    .landing #HowItWorks .videoContain {width: 46%; margin:1%}
    .landing #Convert {padding: 8% 1em}
    .landing #Convert .product-wrap {display: block}
    .products .product-wrap .product {padding:0}
    .landing #Convert .product.large .bottle {height: 10em; overflow: hidden}
    .landing #Convert .product.large img {margin-top: -6em}
    .landing #Convert .product-wrap .vr {margin:1em auto 3em; width:100%; background-position: top}
    .landing #Convert .convertContent .half {width:100%;}
    .landing #Convert .convertContent .half+.half {padding: 3em 0 0; border:0}
    .landing #Convert .convertContent aside {max-width:100%}
    .landing .vehicles a {width:100%; padding-top:50%; border:1px solid #fff; margin: 5% 0}
    .landing-ClassicCars .landingHeader, .landing-HotRods .landingHeader, .landing-Powersports .landingHeader, .landing-OffRoad .landingHeader, .landing-HeavyDuty .landingHeader {background:#fff}
    .landing-ClassicCars main, .landing-HotRods main, .landing-Powersports main, .landing-OffRoad main, .landing-HeavyDuty main {background:#fff}
    .landing #Convert .convertContent .full {width: 100%}
    
    /* Where To Buy*/
    .searchOptions label {margin: 0 0 0.25em}
    .searchOptions .styledForm {padding: 8% 1em; margin-top: 2em}
    .styledForm .styledSelect.last {margin-left: 0}
    .searchResults > ul > li {width: 100%; padding: 2em 2em 2em 3.5em; margin:0}
    .searchResults > ul > li+li {border-top: 1px solid #ccc;}
    .searchResults > ul > li .logo {top:1.25em; width:3.5em; height:3.5em;}
    .authorized-dealers {text-align: center; margin: 0 0 3em}
    .authorized-dealers p {max-width: 700px; margin:0 auto 0.25em}
    
    /* Museum Page */
    .museums .wrap h1 { font-style: normal; margin-left: 0; overflow: visible; text-align: center; position: relative; padding-bottom: 2em; margin-bottom: 0.25em; padding-top: 5em;}
    .museums .wrap h1:before {content: '';display: block;position: absolute;top: -2rem;left: 50%;background: url(/images/museums/Evans-Protected.png) no-repeat center;background-size: contain;width: 8.44rem;height: 8.44rem;-webkit-transform: rotate(-15deg) translateX(-50%);transform: rotate(-15deg) translateX(-50%);}
    .museums .wrap .photoright {max-width: 100%; width: 100%; margin: 0 0 1em}
    .museums .museum .top .wrap {display: block}
    .museums .museum .top .wrap .logo,
    .museums .museum .top .wrap .contact-info {width: 100%; text-align: center; display: block; margin:0}
    .museums .museum .top .wrap .logo img {max-width: 100%}
    .museums .museum .top .wrap .contact-info {margin-top: 2em}
    .museums .museum .bottom {padding: 0 1em}
    
    /* Vehicle Page */
    #vehicleList > a {padding: 20% 1em}
    .fullWidth.vehicle-list #content .h1 {font-size: 1.75em}
    .fullWidth.vehicle-list #content .h2 {font-size: 1.125em; color: #000; font-family: "museo-sans-condensed", sans-serif; display: inline-block; line-height: 120%;float: left; clear: both; padding: 0.25em 0.75rem; margin: 0; display: inline-block; background: #febb21;}
    .landing .where-to-buy h1 {margin-bottom: 0.5em}
    .landing .where-to-buy .buying-options .button,
    .landing .where-to-buy .buying-options .buy-online .buyDirect {display: block; margin: 0.25em auto}
    .landing .where-to-buy .buying-options .buy-online br {display: none}
    
    
    /* How It Works */
    .landing.how-it-works main section,
    .landing.how-it-works main .flex section{padding: 3em 1em}
    .landing.how-it-works main section h2 {font-size: 2em}
    .landing.how-it-works main .left,
    .landing.how-it-works main .right {width: 100%;}
    .landing.how-it-works main .left {margin-bottom: 2em}
    .landing.how-it-works main .flex {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;}
    .landing.how-it-works main .flex #FAQ {border-left: 0}

    /* Footer */
    body>footer {padding-top:10%}
    .fatFooter {margin-bottom:0}
    .fatFooter > section {width:100%; text-align: center; margin-bottom: 15%}
    .fatFooter address {width:100%; margin-bottom:10%;}
    .fatFooter > section .social {float: none}
    .fatFooter > section .social a {float: none;}
    .fatFooter > section:last-child h1 {margin-bottom:0.25em}
    body>footer nav, body>footer div {display: block; float: none}
    footer .copyright > div {display: none}
}

@media screen and (max-width:500px) {
    /*#brand, .small #brand {width: 100%;}
    .secondary {float:left; position: relative; width:100%;}
        .secondary a {display: block;width: calc(50% - 1.875em); float: left; font-size: 0.875em; font-weight: 500; text-align: center; color:#000; padding:0}
        .secondary a:first-child {background: #0057b8; color: #fff;}
        .secondary a:first-child:hover {background: #febb21;}*/
}
/* TRANSITIONS ------------------------------ */
a, a *,button,.button,input[type="button"],input[type="submit"],.rsFullscreenBtn,#alertApp,#alertApp span,#alertDesc{-webkit-transition: all 100ms ease-out;-webkit-transition: all 200ms ease-out;transition: all 200ms ease-out}


/* FORM ERROR ------------------------------ */
.formError {background-color:Black; border:0; padding: 5px 10px; color:#fff; display:none; margin:0 0 2px; z-index:9999; border-radius: 10px; -moz-box-shadow:0 2px 2px #333; -webkit-box-shadow:0 2px 2px #333;}
.formError p {margin:0; font-size:.9em; }
.formError em { border:10px solid;  border-color:Black transparent transparent; bottom:-17px; display:block; height:0; left:40px; position:absolute; width:0; }
