@charset 'UTF-8';
/* -----------------------------

   Responsive Starter Kit Pro
   Variables Style Sheet

-------------------------------- */
/* General
-------------------------------- */
/* 16px */
/*@font-weight-roman: 400;
@font-weight-normal: 400;
@font-weight-semibold: 600;
@font-weight-medium: 600;
@font-weight-bold: 700;
@font-weight-extrabold: 800;
@font-weight-condensed-bold: 900;*/
/* Common Breakpoints
-------------------------------- */
/* Extra Small: 320px / 16px = 20em */
/* Small: 480px / 16px = 30em */
/* Medium: 700px / 16px = 43.75em */
/* Large: 900px / 16px = 56.25em */
/* Extra Large: 1100px / 16px = 68.75em */
/* THIS FILE IS GENERATED */
@font-face {
  font-family: 'icomoon';
  src: url(/Content/ValvolineUS/fonts/icomoon/icomoon.eot);
  src: url(/Content/ValvolineUS/fonts/icomoon/icomoon.eot?#iefix) format('embedded-opentype'), url(/Content/ValvolineUS/fonts/icomoon/icomoon.woff) format('woff'), url(/Content/ValvolineUS/fonts/icomoon/icomoon.ttf) format('truetype'), url(/Content/ValvolineUS/fonts/icomoon/icomoon.svg#icomoon) format('svg');
  font-weight: 400;
  font-style: normal;
}
.icon-file-pdf:before {
  background: url('/~/media/ValvolineUS/Images/icon_pdf.png') no-repeat;
  content: '' !important;
  display: inline-block;
  height: 19px;
  width: 19px;
}
@media screen and (min-width: 43.75em) {
  .icon-file-pdf:before {
    vertical-align: middle;
  }
}
/* THIS FILE IS GENERATED */
/*
 * jQuery FlexSlider v2.6.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 and later license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 *
 */
/* ====================================================================================================================
 * FONT-FACE
 * ====================================================================================================================*/
@font-face {
  font-family: 'flexslider-icon';
  src: url('/Content/ValvolineUS/fonts/vendor/flexslider-icon.eot');
  src: url('/Content/ValvolineUS/fonts/vendor/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('/Content/ValvolineUS/fonts/vendor/flexslider-icon.woff') format('woff'), url('/Content/ValvolineUS/fonts/vendor/flexslider-icon.ttf') format('truetype'), url('/Content/ValvolineUS/fonts/vendor/flexslider-icon.svg#flexslider-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* ====================================================================================================================
 * RESETS
 * ====================================================================================================================*/
.flex-container a:hover,
.flex-slider a:hover {
  outline: none;
}
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
.flex-pauseplay span {
  text-transform: capitalize;
}
/* ====================================================================================================================
 * BASE STYLES
 * ====================================================================================================================*/
.flexslider {
  margin: 0;
  padding: 0;
}
.flexslider .slides > li {
  display: none;
  -webkit-backface-visibility: hidden;
}
.flexslider .slides img {
  width: 100%;
  display: block;
}
.flexslider .slides:after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
html[xmlns] .flexslider .slides {
  display: block;
}
* html .flexslider .slides {
  height: 1%;
}
.no-js .flexslider .slides > li:first-child {
  display: block;
}
/* ====================================================================================================================
 * DEFAULT THEME
 * ====================================================================================================================*/
.flexslider {
  margin: 0 0 60px;
  background: #ffffff;
  border: 4px solid #ffffff;
  position: relative;
  zoom: 1;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
}
.flexslider .slides {
  zoom: 1;
}
.flexslider .slides img {
  height: auto;
  -moz-user-select: none;
}
.flex-viewport {
  max-height: 2000px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.loading .flex-viewport {
  max-height: 300px;
}
.carousel li {
  margin-right: 5px;
}
.flex-direction-nav {
  *height: 0;
}
.flex-direction-nav a {
  text-decoration: none;
  display: block;
  width: 40px;
  height: 40px;
  margin: -20px 0 0;
  position: absolute;
  top: 50%;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {
  font-family: "flexslider-icon";
  font-size: 40px;
  display: inline-block;
  content: '\f001';
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.flex-direction-nav a.flex-next:before {
  content: '\f002';
}
.flex-direction-nav .flex-prev {
  left: -50px;
}
.flex-direction-nav .flex-next {
  right: -50px;
  text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
  opacity: 0.7;
  left: 10px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
  opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
  opacity: 0.7;
  right: 10px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
  opacity: 1;
}
.flex-direction-nav .flex-disabled {
  opacity: 0!important;
  filter: alpha(opacity=0);
  cursor: default;
  z-index: -1;
}
.flex-pauseplay a {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 5px;
  left: 10px;
  opacity: 0.8;
  z-index: 10;
  overflow: hidden;
  cursor: pointer;
  color: #000;
}
.flex-pauseplay a:before {
  font-family: "flexslider-icon";
  font-size: 20px;
  display: inline-block;
  content: '\f004';
}
.flex-pauseplay a:hover {
  opacity: 1;
}
.flex-pauseplay a.flex-play:before {
  content: '\f003';
}
.flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: -40px;
  text-align: center;
}
.flex-control-nav li {
  margin: 0 6px;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background: #666;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-indent: -9999px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.flex-control-paging li a:hover {
  background: #333;
  background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
  background: #000;
  background: rgba(0, 0, 0, 0.9);
  cursor: default;
}
.flex-control-thumbs {
  margin: 5px 0 0;
  position: static;
  overflow: hidden;
}
.flex-control-thumbs li {
  width: 25%;
  float: left;
  margin: 0;
}
.flex-control-thumbs img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.7;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.flex-control-thumbs img:hover {
  opacity: 1;
}
.flex-control-thumbs .flex-active {
  opacity: 1;
  cursor: default;
}
/* ====================================================================================================================
 * RESPONSIVE
 * ====================================================================================================================*/
@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {
    opacity: 1;
    left: 10px;
  }
  .flex-direction-nav .flex-next {
    opacity: 1;
    right: 10px;
  }
}
#fancybox-buttons {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 8050;
}
#fancybox-buttons.top {
  top: 10px;
}
#fancybox-buttons.bottom {
  bottom: 10px;
}
#fancybox-buttons ul {
  display: block;
  width: 166px;
  height: 30px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  border: 1px solid #111;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  -moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  background: #323232;
  background: -moz-linear-gradient(top, #444444 0%, #343434 50%, #292929 50%, #333333 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(50%, #343434), color-stop(50%, #292929), color-stop(100%, #333333));
  background: -webkit-linear-gradient(top, #444444 0%, #343434 50%, #292929 50%, #333333 100%);
  background: -o-linear-gradient(top, #444444 0%, #343434 50%, #292929 50%, #333333 100%);
  background: -ms-linear-gradient(top, #444444 0%, #343434 50%, #292929 50%, #333333 100%);
  background: linear-gradient(top, #444444 0%, #343434 50%, #292929 50%, #333333 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222', GradientType=0);
}
#fancybox-buttons ul li {
  float: left;
  margin: 0;
  padding: 0;
}
#fancybox-buttons a {
  display: block;
  width: 30px;
  height: 30px;
  text-indent: -9999px;
  background-color: transparent;
  background-image: url('/~/media/ValvolineUS/Images/fancybox_buttons.png');
  background-repeat: no-repeat;
  outline: none;
  opacity: 0.8;
}
#fancybox-buttons a:hover {
  opacity: 1;
}
#fancybox-buttons a.btnPrev {
  background-position: 5px 0;
}
#fancybox-buttons a.btnNext {
  background-position: -33px 0;
  border-right: 1px solid #3e3e3e;
}
#fancybox-buttons a.btnPlay {
  background-position: 0 -30px;
}
#fancybox-buttons a.btnPlayOn {
  background-position: -30px -30px;
}
#fancybox-buttons a.btnToggle {
  background-position: 3px -60px;
  border-left: 1px solid #111;
  border-right: 1px solid #3e3e3e;
  width: 35px;
}
#fancybox-buttons a.btnToggleOn {
  background-position: -27px -60px;
}
#fancybox-buttons a.btnClose {
  border-left: 1px solid #111;
  width: 35px;
  background-position: -56px 0px;
}
#fancybox-buttons a.btnDisabled {
  opacity: 0.4;
  cursor: default;
}
#fancybox-thumbs {
  position: fixed;
  left: 0;
  width: 100%;
  overflow: hidden;
  z-index: 8050;
}
#fancybox-thumbs.bottom {
  bottom: 2px;
}
#fancybox-thumbs.top {
  top: 2px;
}
#fancybox-thumbs ul {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
#fancybox-thumbs ul li {
  float: left;
  padding: 1px;
  opacity: 0.5;
}
#fancybox-thumbs ul li.active {
  opacity: 0.75;
  padding: 0;
  border: 1px solid #fff;
}
#fancybox-thumbs ul li:hover {
  opacity: 1;
}
#fancybox-thumbs ul li a {
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid #222;
  background: #111;
  outline: none;
}
#fancybox-thumbs ul li img {
  display: block;
  position: relative;
  border: 0;
  padding: 0;
  max-width: none;
}
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp {
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  vertical-align: top;
}
.fancybox-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8020;
}
.fancybox-skin {
  position: relative;
  background: #f9f9f9;
  color: #444;
  text-shadow: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.fancybox-opened {
  z-index: 8030;
}
.fancybox-opened .fancybox-skin {
  -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer,
.fancybox-inner {
  position: relative;
}
.fancybox-inner {
  overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
  -webkit-overflow-scrolling: touch;
}
.fancybox-error {
  color: #444;
  font: 14px/20px 'Helvetica', Arial, sans-serif;
  margin: 0;
  padding: 15px;
  white-space: nowrap;
}
.fancybox-image,
.fancybox-iframe {
  display: block;
  width: 100%;
  height: 100%;
}
.fancybox-image {
  max-width: 100%;
  max-height: 100%;
}
#fancybox-loading,
.fancybox-close,
.fancybox-prev span,
.fancybox-next span {
  background-image: url('/~/media/ValvolineUS/Images/fancybox_sprite.png');
}
#fancybox-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -22px;
  margin-left: -22px;
  background-position: 0 -108px;
  opacity: 0.8;
  cursor: pointer;
  z-index: 8060;
}
#fancybox-loading div {
  width: 44px;
  height: 44px;
  background: url('/~/media/ValvolineUS/Images/fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 8040;
}
.fancybox-nav {
  position: absolute;
  top: 0;
  width: 40%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
  background: transparent url('/~/media/ValvolineUS/Images/blank.gif');
  /* helps IE */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  z-index: 8040;
}
.fancybox-prev {
  left: 0;
}
.fancybox-next {
  right: 0;
}
.fancybox-nav span {
  position: absolute;
  top: 50%;
  width: 36px;
  height: 34px;
  margin-top: -18px;
  cursor: pointer;
  z-index: 8040;
  visibility: hidden;
}
.fancybox-prev span {
  left: 10px;
  background-position: 0 -36px;
}
.fancybox-next span {
  right: 10px;
  background-position: 0 -72px;
}
.fancybox-nav:hover span {
  visibility: visible;
}
.fancybox-tmp {
  position: absolute;
  top: -99999px;
  left: -99999px;
  visibility: hidden;
  max-width: 99999px;
  max-height: 99999px;
  overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
  overflow: hidden !important;
  width: auto;
}
.fancybox-lock body {
  overflow: hidden !important;
}
.fancybox-lock-test {
  overflow-y: hidden !important;
}
.fancybox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: none;
  z-index: 8010;
  background: url('/~/media/ValvolineUS/Images/fancybox_overlay.png');
}
.fancybox-overlay-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}
.fancybox-lock .fancybox-overlay {
  overflow: auto;
  overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
  visibility: hidden;
  font: normal 13px/20px 'Helvetica', Arial, sans-serif;
  position: relative;
  text-shadow: none;
  z-index: 8050;
}
.fancybox-opened .fancybox-title {
  visibility: visible;
}
.fancybox-title-float-wrap {
  position: absolute;
  bottom: 0;
  right: 50%;
  margin-bottom: -35px;
  z-index: 8050;
  text-align: center;
}
.fancybox-title-float-wrap .child {
  display: inline-block;
  margin-right: -100%;
  padding: 2px 20px;
  background: transparent;
  /* Fallback for web browsers that doesn't support RGBa */
  background: rgba(0, 0, 0, 0.8);
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  text-shadow: 0 1px 2px #222;
  color: #FFF;
  font-weight: bold;
  line-height: 24px;
  white-space: nowrap;
}
.fancybox-title-outside-wrap {
  position: relative;
  margin-top: 10px;
  color: #fff;
}
.fancybox-title-inside-wrap {
  padding-top: 10px;
}
.fancybox-title-over-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  padding: 10px;
  background: #000;
  background: rgba(0, 0, 0, 0.8);
}
/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  #fancybox-loading,
  .fancybox-close,
  .fancybox-prev span,
  .fancybox-next span {
    background-image: url('/~/media/ValvolineUS/Images/fancyboxsprite2x.png');
    background-size: 44px 152px;
    /*The size of the normal image, half the size of the hi-res image*/
  }
  #fancybox-loading div {
    background-image: url('/~/media/ValvolineUS/Images/fancyboxloading2x.gif');
    background-size: 24px 24px;
    /*The size of the normal image, half the size of the hi-res image*/
  }
}
/*======================================================================
  Selectric
======================================================================*/
.selectricWrapper {
  position: relative;
  margin: 0 0 10px;
  width: 300px;
  cursor: pointer;
}
.selectricResponsive {
  width: 100%;
}
.selectric {
  border: 1px solid #DDD;
  background: #F8F8F8;
  position: relative;
  border-radius: 2px;
}
.selectric .label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 30px 0 0;
  padding: 6px;
  font-size: 12px;
  line-height: 18px;
  color: #444;
  min-height: 18px;
}
.selectric .button {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
  color: #BBB;
  text-align: center;
  font: 0/0 a;
  /* IE Fix */
  *font: 0.66666667px Lucida Sans Unicode, Arial Unicode MS, Arial;
}
.selectric .button:after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: #BBB;
  border-bottom: none;
}
.selectricHover .selectric {
  border-color: #CCC;
}
.selectricHover .selectric .button {
  color: #888;
}
.selectricHover .selectric .button:after {
  border-top-color: #888;
}
.selectricOpen {
  z-index: 9999;
}
.selectricOpen .selectric {
  border-color: #CCC;
  background: #F0F0F0;
}
.selectricOpen .selectricItems {
  display: block;
}
.selectricDisabled {
  filter: alpha(opacity=50);
  opacity: 0.5;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.selectricHideSelect {
  position: relative;
  overflow: hidden;
  width: 0;
  height: 0;
}
.selectricHideSelect select {
  position: absolute;
  left: -100%;
  display: none;
}
.selectricInput {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 1px !important;
  height: 1px !important;
  outline: none !important;
  border: none !important;
  /* I'm not sure the purpose of this, but it prevented less from compiling
  *font: 0/0 a !important;
  */
  background: none !important;
}
.selectricTempShow {
  position: absolute !important;
  visibility: hidden !important;
  display: block !important;
}
/* Items box */
.selectricItems {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #F9F9F9;
  border: 1px solid #CCC;
  z-index: -1;
  box-shadow: 0 0 10px -6px;
}
.selectricItems .selectricScroll {
  height: 100%;
  overflow: auto;
}
.selectricAbove .selectricItems {
  top: auto;
  bottom: 100%;
}
.selectricItems ul,
.selectricItems li {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  line-height: 20px;
  min-height: 20px;
}
.selectricItems li {
  display: block;
  padding: 5px;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #EEE;
  color: #666;
  cursor: pointer;
}
.selectricItems li.selected {
  background: #EFEFEF;
  color: #444;
  border-top-color: #E0E0E0;
}
.selectricItems li:hover {
  background: #F0F0F0;
  color: #444;
}
.selectricItems li.disabled {
  background: #F5F5F5;
  color: #BBB;
  border-top-color: #FAFAFA;
  cursor: default;
}
/* Slider */
.slick-loading .slick-list {
  background: #fff url('vendor/ajax-loader.gif') center center no-repeat;
}
/* Icons */
@font-face {
  font-family: 'slick';
  font-weight: normal;
  font-style: normal;
  src: url('/Content/ValvolineUS/fonts/vendor/slick.eot');
  src: url('/Content/ValvolineUS/fonts/vendor/slick.eot?#iefix') format('embedded-opentype'), url('/Content/ValvolineUS/fonts/vendor/slick.woff') format('woff'), url('/Content/ValvolineUS/fonts/vendor/slick.ttf') format('truetype'), url('/Content/ValvolineUS/fonts/vendor/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  color: transparent;
  outline: none;
  background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
  font-family: 'slick';
  font-size: 20px;
  line-height: 1;
  opacity: 0.75;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-prev {
  left: -25px;
}
[dir='rtl'] .slick-prev {
  right: -25px;
  left: auto;
}
.slick-prev:before {
  content: '←';
}
[dir='rtl'] .slick-prev:before {
  content: '→';
}
.slick-next {
  right: -25px;
}
[dir='rtl'] .slick-next {
  right: auto;
  left: -25px;
}
.slick-next:before {
  content: '→';
}
[dir='rtl'] .slick-next:before {
  content: '←';
}
/* Dots */
.slick-slider {
  margin-bottom: 30px;
}
.slick-dots {
  position: absolute;
  bottom: -45px;
  display: block;
  width: 100%;
  padding: 0;
  list-style: none;
  text-align: center;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  font-family: 'slick';
  font-size: 6px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: '•';
  text-align: center;
  opacity: 0.25;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: black;
}
/* Slider */
.slick-slider {
  position: relative;
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}
.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}
.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}
[dir='rtl'] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
  display: none;
}
/* -----------------------------

   Responsive Starter Kit Pro
   Reset Style Sheet

   Note: Feel free to
   use a normalize.css file
   instead of this reset.

-------------------------------- */
html,
body,
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 {
  margin: 0;
  padding: 0;
  border: none;
  text-decoration: none;
}
ul {
  list-style: none;
}
mark {
  background-color: transparent;
}
/*
   Box-sizing: Border-box
   http://www.paulirish.com/2012/box-sizing-border-box-ftw/
   http://css-tricks.com/box-sizing/
*/
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* -----------------------------

   Responsive Starter Kit Pro
   Mixins Style Sheet

   Credit 
   -----------------
   Sections of this document
   were inspired by:
    + LESS Elements
    + Preboot

-------------------------------- */
/* -----------------------------

   Responsive Starter Kit Pro
   Common Style Sheet

   Note: All visual styles can
   be overwritten, deleted, or
   moved to theme as needed.

   Table of Contents:
   -----------------------------
   + Basics
   + Non-semantic Helpers

-------------------------------- */
/* Basics
-------------------------------- */
body {
  font-size: 14px;
  line-height: 1.5;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  background-color: #fff;
  color: #191919;
  text-align: center;
  margin: 0 auto;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: subpixel-antialiased;
}
.wrapper {
  margin: 0 auto;
  padding: 0 10px;
  max-width: 1170px;
  position: relative;
}
a {
  text-decoration: underline;
  color: #191919;
  /* default link color */
}
a:hover,
a:focus {
  color: #000000;
  /* default link hover/focus color */
}
a:focus {
  outline: thin dotted;
  /* outline focused elements for accessibility */
}
a:hover,
a:active {
  outline: none;
}
input[type=checkbox] {
  border: 0px !important;
}
::-moz-selection {
  background: #dcf0ff;
  color: inherit;
  text-shadow: none;
}
::selection {
  background: #dcf0ff;
  color: inherit;
  text-shadow: none;
}
/* HTML5 placeholder attribute (don't combine into a group selector) */
::-webkit-input-placeholder {
  color: #cccccc;
  /* WebKit browsers */
}
:-moz-placeholder {
  color: #cccccc;
  /* Mozilla Firefox 4 to 18 */
}
::-moz-placeholder {
  color: #cccccc;
  /* Mozilla Firefox 19+ */
}
:-ms-input-placeholder {
  color: #cccccc;
  /* Internet Explorer 10+ */
}
/*
   IE 10 Snap Mode Viewport Setting
   http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
*/
@media screen and (max-width: 400px) {
  @-ms-viewport {
    width: device-width;
  }
}
hr {
  border: 0;
  height: 1px;
  margin-bottom: 1em;
  background-color: #ddd;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #3f3f3f;
  font-weight: 600;
  line-height: 1.2;
  text-rendering: optimizeLegibility;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: #191919;
  text-decoration: none;
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover,
h1 a:focus,
h2 a:focus,
h3 a:focus,
h4 a:focus,
h5 a:focus,
h6 a:focus {
  text-decoration: underline;
  color: #000000;
}
h1 {
  font-size: 2.5em;
  margin: 1em 0 0.5em;
}
.page-title {
  margin-top: 0;
}
h2 {
  font-size: 1.8em;
  margin: 1em 0 0.5em;
}
h3 {
  font-size: 1.5em;
  margin: 1em 0 0.5em;
}
h4 {
  font-size: 1.2em;
  margin: 1em 0 0.5em;
}
h5 {
  font-size: 1.1em;
  margin: 1em 0 0.5em;
}
h6 {
  font-size: 1em;
  margin: 1em 0 0.5em;
}
article,
p,
ul,
ol,
dl,
blockquote,
.box {
  margin: 0 0 1.5em;
}
img {
  max-width: 100%;
  height: auto !important;
  border: 0;
  outline: 0;
}
nav ul,
nav ol {
  margin-bottom: 0;
}
dl.milestones dt {
  width: 18%;
  float: left;
  margin-bottom: 10px;
}
@media screen and (min-width: 50em) {
  dl.milestones dt {
    width: 25%;
  }
}
@media screen and (min-width: 68.75em) {
  dl.milestones dt {
    width: 18%;
  }
}
dl.milestones dd {
  width: 82%;
  float: left;
  margin-bottom: 10px;
}
@media screen and (min-width: 50em) {
  dl.milestones dd {
    width: 75%;
  }
}
@media screen and (min-width: 68.75em) {
  dl.milestones dd {
    width: 82%;
  }
}
table {
  margin: 0 0 1.5em;
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-spacing: 0;
}
table th {
  text-align: center;
  background-color: #ddd;
}
table th,
table td {
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 9px 10px;
}
table tr:nth-child(even) td {
  background-color: #eee;
}
.caption img,
.caption iframe,
.caption object {
  display: block;
}
.caption-text {
  font-size: 0.875em;
  margin: 0.5em 0;
}
sup {
  font-size: 5px;
  line-height: 0.75;
}
h1 sup {
  font-size: 0.6em;
}
/* Non-semantic Helpers
-------------------------------- */
.uppercase {
  text-transform: uppercase;
}
.reg {
  position: relative;
  top: -4px;
  font-size: 0.7em;
}
.img-priority {
  width: 100%;
}
@media screen and (min-width: 60em) {
  .img-priority {
    width: auto;
  }
}
.img-left {
  float: left;
  height: auto;
  margin: 5px 20px 20px 0;
}
.img-left.img-priority {
  float: none;
}
@media screen and (min-width: 60em) {
  .img-left.img-priority {
    float: left;
    width: auto;
  }
}
.img-right {
  float: right;
  height: auto;
  margin: 5px 0 20px 20px;
}
.img-right.img-priority {
  float: none;
}
@media screen and (min-width: 60em) {
  .img-right.img-priority {
    float: right;
    width: auto;
  }
}
.sidebar .img-left {
  margin: 2px 10px 5px 0;
}
.sidebar .img-right {
  margin: 2px 0 5px 10px;
}
.indent {
  margin-left: 10px;
  margin-right: 10px;
}
.outdent {
  margin-left: auto;
  margin-right: auto;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}
.left {
  text-align: left;
}
.clear {
  clear: both;
}
.margin-bottom-20 {
  margin-bottom: 20px;
}
/*
   Micro Clearfix
   http://nicolasgallagher.com/micro-clearfix-hack/
*/
.clearfix:after,
.cf:after,
.grid:after,
.box:after,
.column-wrapper:after {
  content: "";
  display: table;
  clear: both;
}
/* accessibility, print, image replacement */
.visually-hidden,
.screen-reader-text,
.wai,
.ir {
  position: absolute;
  left: -999em;
  overflow: hidden;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;
  width: 0;
  height: 0;
}
.homepage-footer {
  display: none;
}
.standard-footer {
  display: block;
}
/* -----------------------------

   Responsive Starter Kit Pro
   Alerts Style Sheet

-------------------------------- */
.alert {
  background-color: #f2f2f2;
  color: #666666;
  margin: 0 0 1em;
  padding: 10px;
}
.cookie-nav-container .cookie-notification.alert.black {
  background-color: black;
}
.alert-success {
  background-color: #dff0d8;
  border-color: #a3d48e;
  color: #477f31;
}
.alert-success a {
  color: #477f31;
}
.alert-success a:hover,
.alert-success a:focus {
  color: #28471c;
}
.alert-info {
  background-color: #d9edf7;
  border-color: #85c5e5;
  color: #207098;
}
.alert-info a {
  color: #207098;
}
.alert-info a:hover,
.alert-info a:focus {
  color: #134158;
}
.alert-warning {
  background-color: #fcf8e3;
  border-color: #f2e187;
  color: #b39a13;
}
.alert-warning a {
  color: #b39a13;
}
.alert-warning a:hover,
.alert-warning a:focus {
  color: #6e5e0c;
}
.alert-danger {
  background-color: #f2dede;
  border-color: #d59595;
  color: #843434;
}
.alert-danger a {
  color: #843434;
}
.alert-danger a:hover,
.alert-danger a:focus {
  color: #4d1e1e;
}
.loader-overlay {
  display: none;
  background-color: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.loader-overlay.active {
  display: block;
}
.loader {
  display: none;
  margin: 100px auto;
  font-size: 10px;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader.active {
  display: block;
}
.product-recommender .loader {
  font-size: 8px;
  width: 1.3em;
  height: 1.3em;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.5), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5), 2.5em 0em 0 0em rgba(0, 0, 0, 0.7), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.5), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5), 0em 2.5em 0 0em rgba(0, 0, 0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.5), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5), -2.6em 0em 0 0em rgba(0, 0, 0, 0.7), -1.8em -1.8em 0 0em #000000;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.5), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5), 2.5em 0em 0 0em rgba(0, 0, 0, 0.7), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.5), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5), 0em 2.5em 0 0em rgba(0, 0, 0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.5), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5), -2.6em 0em 0 0em rgba(0, 0, 0, 0.7), -1.8em -1.8em 0 0em #000000;
  }
}
/* -----------------------------

   Responsive Starter Kit Pro
   Buttons Style Sheet

-------------------------------- */
.btn {
  position: relative;
  margin: 0 0.25em 0.75em 0;
  padding: 12px 5px;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  font-size: 0.7em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
.btn.btn-red {
  background-color: #d20017;
  border: 0;
  color: #fff;
}
.btn.btn-gray {
  background-color: #EFEFEF;
  border: 1px solid #7d7e7e;
  color: #3f3f3f;
}
/* Full Width */
.btn-block {
  display: block;
  width: 100%;
}
/* Form Buttons (useful in sidebars and columns) */
input[type=submit] {
  padding-top: 0;
  margin-right: 0;
  cursor: pointer;
}
@media all and (min-width: 43.75em) {
  input[type=submit] {
    margin-right: 15px;
  }
}
.btn-cancel {
  font-weight: 700;
  text-align: center;
  padding: 11px 20px;
  text-decoration: none;
}
/* -----------------------------

   Responsive Starter Kit Pro
   Show-Hide Style Sheet

-------------------------------- */
.show-hide h3 {
  color: #3f3f3f;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
}
.show-hide .toggle {
  margin-bottom: 0.5em;
  padding: 20px 10px 20px 37px;
  cursor: pointer;
}
@media screen and (min-width: 43.75em) {
  .show-hide .toggle {
    padding-left: 30px;
  }
}
.show-hide .toggle span.icon-expand-less {
  color: #ababab;
  display: inline-block;
  font-size: 150%;
  margin-left: -27px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
@media screen and (min-width: 43.75em) {
  .show-hide .toggle span.icon-expand-less {
    margin-left: 0;
  }
}
.full-width .show-hide .toggle span.icon-expand-less,
.sidebar .show-hide .toggle span.icon-expand-less {
  margin-left: 0;
}
.show-hide .toggle.active span.icon-expand-less {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.show-hide .close-section {
  display: block;
  font-size: 14px;
  text-align: right;
  margin-bottom: 1.5em;
}
/* -----------------------------

   Responsive Starter Kit Pro
   Pagination Style Sheet

-------------------------------- */
.pagination {
  text-align: center;
  margin: 2em 0 1.5em;
  font-weight: 700;
}
.pagination .info {
  font-weight: 400;
  font-size: 0.9375em;
  color: #5e5e5e;
  padding: 0.5em 0;
}
@media screen and (min-width: 43.75em) {
  .pagination .info {
    float: left;
  }
}
.pagination ul {
  margin-bottom: 10px;
  padding-left: 0;
}
@media screen and (min-width: 43.75em) {
  .pagination ul {
    text-align: right;
  }
}
.pagination li {
  display: inline-block;
  margin-left: 3px;
  margin-bottom: 3px;
  text-align: center;
}
.pagination li a {
  background-color: #e6e6e6;
  display: block;
  padding: 5px 10px;
  height: 30px;
  text-decoration: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
.pagination li a:hover,
.pagination li a:focus {
  background: #999999;
  color: #fff;
}
.pagination li.current a {
  background-color: #191919;
  color: #fff;
}
.pagination li:nth-child(1) {
  margin-left: 0;
}
.pagination .missing {
  margin-right: -2px;
  margin-left: 1px;
}
/* -----------------------------

   Responsive Starter Kit Pro
   Simple Grids Style Sheet

-------------------------------- */
/* Note: Set the @gutter var in mixins.less to set space between columns. */
@media all and (min-width: 43.75em) {
  .grid .one-half,
  .grid .one-third,
  .grid .two-thirds,
  .grid .one-fourth,
  .grid .three-fourths,
  .grid .one-fifth,
  .grid .two-fifths,
  .grid .three-fifths,
  .grid .four-fifths,
  .grid .one-sixth,
  .grid .five-sixths {
    float: left;
    margin-left: 1.73913043%;
  }
  .grid.wider-gutter .one-half,
  .grid.wider-gutter .one-third,
  .grid.wider-gutter .two-thirds,
  .grid.wider-gutter .one-fourth,
  .grid.wider-gutter .three-fourths,
  .grid.wider-gutter .one-fifth,
  .grid.wider-gutter .two-fifths,
  .grid.wider-gutter .three-fifths,
  .grid.wider-gutter .four-fifths,
  .grid.wider-gutter .one-sixth,
  .grid.wider-gutter .five-sixths {
    float: left;
    margin-left: 2.60869565%;
  }
  .grid .one-half {
    width: 49.13043478%;
  }
  .grid.wider-gutter .one-half {
    width: 48.69565217%;
  }
  .grid .one-third {
    width: 32.17391304%;
  }
  .grid.wider-gutter .one-third {
    width: 31.5942029%;
  }
  .grid .two-thirds {
    width: 64.34782609%;
  }
  .grid .one-fourth {
    width: 23.69565217%;
  }
  .grid .three-fourths {
    width: 71.08695652%;
  }
  .grid .one-fifth {
    width: 18.60869565%;
  }
  .grid .two-fifths {
    width: 37.2173913%;
  }
  .grid .three-fifths {
    width: 55.82608696%;
  }
  .grid .four-fifths {
    width: 74.43478261%;
  }
  .grid .one-sixth {
    width: 15.2173913%;
  }
  .grid .five-sixths {
    width: 76.08695652%;
  }
  .grid div:first-child {
    margin-left: 0 !important;
  }
}
@media all and (min-width: 43.75em) {
  .grid.height-control .col {
    float: none;
    margin-left: 0;
    width: auto;
  }
}
@media all and (min-width: 1000px) {
  .grid.height-control .col {
    float: left;
    margin-left: 2.60869565%;
    min-height: 460px;
  }
  .grid.height-control .col.one-half {
    width: 48.69565217%;
  }
}
@media all and (min-width: 1100px) {
  .grid.height-control .col {
    min-height: 410px;
  }
}
@media all and (min-width: 1200px) {
  .grid.height-control .col {
    min-height: 400px;
  }
}
@media all and (min-width: 1300px) {
  .grid.height-control .col {
    min-height: 350px;
  }
}
@media all and (min-width: 1400px) {
  .grid.height-control .col {
    min-height: 330px;
  }
}
div.img-priority {
  float: none;
  width: 100%;
}
/* -----------------------------

   Responsive Starter Kit Pro
   Forms Style Sheet

   Note: All visual styles can
   be overwritten, deleted, or
   moved to theme as needed.

-------------------------------- */
.form-group {
  margin: 0 0 1.5em;
  clear: both;
}
.form-group .info {
  color: #3f3f3f;
  display: block;
  font-size: 0.7em;
  margin-top: 0.15em;
}
.input-error {
  background-color: #ffeded;
  border: 1px solid red;
}
label {
  color: #3f3f3f;
  display: block;
  font-size: 0.75em;
  margin: 0 0 0.15em;
}
label.inline {
  display: inline;
}
.info-error {
  font-size: 0.8em;
  font-weight: 400;
  margin-top: 0.15em;
}
fieldset {
  border: 1px solid #ddd;
  display: block;
  margin: 0 0 1.5em;
  padding: 20px 20px 5px;
  width: 100%;
}
legend {
  border: 1px solid #ccc;
  padding: 0.25em 0.75em;
  font-weight: 700;
  font-size: 1.1em;
}
.validator,
.info-error {
  color: red;
}
input,
select,
textarea {
  font-size: 16px;
}
@media all and (min-width: 43.75em) {
  input,
  select,
  textarea {
    font-size: 1em;
  }
}
input[type="text"],
textarea,
input[type="submit"],
input[type="search"] {
  -webkit-appearance: none;
}
input {
  width: 100%;
  border: 1px solid #d7d7d7;
  padding: 5px 10px;
}
input:focus {
  outline: thin dotted;
}
input[type=radio],
input[type=checkbox] {
  width: auto;
  margin-right: 5px;
  vertical-align: top;
  line-height: 1;
  border: 0;
}
.text-wide,
.text-narrow,
textarea {
  width: 100%;
}
textarea {
  border: 1px solid #d7d7d7;
  height: 7em;
  color: #222;
  overflow: auto;
  padding: 5px 10px;
  -webkit-appearance: none;
}
textarea:focus {
  outline: thin dotted;
}
.textarea-short {
  height: 4em;
}
.required {
  font-weight: 700;
  color: red;
}
input[type=submit].btn {
  background-color: #EFEFEF;
  padding: 12px 22px 12px 22px;
  text-transform: uppercase;
}
::-webkit-input-placeholder {
  color: #7d7e7e;
  font-style: italic;
  font-size: 12px;
  line-height: 1.5;
}
:-moz-placeholder {
  /* Firefox 18- */
  color: #7d7e7e;
  font-style: italic;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: #7d7e7e;
  font-style: italic;
}
:-ms-input-placeholder {
  color: #7d7e7e;
  font-style: italic;
}
/* Styles for Tablets and Larger */
@media all and (min-width: 43.75em) {
  fieldset {
    display: inline-block;
    width: auto;
  }
  input {
    border-radius: 4px;
    width: 220px;
  }
  .text-wide {
    width: 320px;
  }
  .text-narrow {
    width: 75px;
  }
  textarea {
    border-radius: 4px;
    width: 500px;
    height: 15em;
    resize: none;
  }
  .textarea-short {
    height: 7em;
  }
}
/*
    Hide the original radios and checkboxes
    (but still accessible)

    :not(#foo) > is a rule filter to block browsers
                 that don't support that selector from
                 applying rules they shouldn't

*/
form:not(#foo) input[type='radio'],
form:not(#foo) input[type='checkbox'] {
  /* Hide the input, but have it still be clickable */
  opacity: 0;
  float: left;
  width: 18px;
}
form:not(#foo) input[type='radio'] + label,
form:not(#foo) input[type='checkbox'] ~ label {
  margin: 0;
  clear: none;
  /* Left padding makes room for image */
  padding: 5px 0 4px 24px;
  /* Make look clickable because they are */
  cursor: pointer;
}
form:not(#foo) input[type='radio'] + label {
  background: url("/~/media/ValvolineUS/Images/form/radio-unselected.gif") left center no-repeat;
}
form:not(#foo) input[type='checkbox'] ~ label {
  background: url("/~/media/ValvolineUS/Images/form/checkbox-unchecked.gif") left center no-repeat;
}
/*
    Change from unchecked to checked graphic
*/
form:not(#foo) input[type='radio']:checked + label {
  background: url("/~/media/ValvolineUS/Images/form/radio-selected.gif") left center no-repeat;
}
form:not(#foo) input[type='checkbox']:checked ~ label {
  background: url("/~/media/ValvolineUS/Images/form/checkbox-checked.gif") left center no-repeat;
}
input[type="text"]::-ms-clear {
  display: none;
}
input[type="text"]::-ms-clear {
  display: none;
}
/* -----------------------------

   Responsive Starter Kit Pro
   Plugin Overrides Style Sheet

-------------------------------- */
/* fancybox modal */
.fancybox-overlay {
  text-align: left;
}
.fancybox-close {
  left: -18px;
}
/* fitvids.js */
.flexible-video {
  margin-bottom: 1em;
}
/* -----------------------------

   Responsive Starter Kit Pro
   Print Style Sheet

-------------------------------- */
@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 13pt;
    line-height: 1.3;
    font-family: Helvetica, Arial, sans-serif;
  }
  .site-header {
    background: none;
    margin: 0 0 15px;
    padding: 0 0 10px;
    border-bottom: 1px solid #ccc;
    position: static;
    height: auto;
    width: 100%;
  }
  .site-header .wrapper {
    height: auto;
  }
  .site-header .site-branding {
    display: inline;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    float: none;
    text-align: left;
  }
  .site-header .site-branding a {
    background-image: none;
    text-indent: 0;
    color: #000;
    text-decoration: none;
    font-size: 24pt;
    font-weight: 700;
    margin: 0;
    padding: 0;
    text-align: left;
    width: auto;
    height: auto;
    display: block;
    border: none;
  }
  h1,
  h2,
  h3,
  h4,
  h5 {
    color: #000;
    text-align: left;
    margin: 0 0 0.5em;
  }
  h1 em,
  h2 em,
  h3 em,
  h4 em,
  h5 em,
  h1 strong,
  h2 strong,
  h3 strong,
  h4 strong,
  h5 strong,
  h1 i,
  h2 i,
  h3 i,
  h4 i,
  h5 i,
  h1 b,
  h2 b,
  h3 b,
  h4 b,
  h5 b {
    color: #000;
    text-align: left;
  }
  h1 {
    font-size: 21pt;
  }
  h2 {
    font-size: 18pt;
  }
  h3 {
    font-size: 15pt;
  }
  h4,
  h5 {
    font-size: 13pt;
  }
  h2,
  h3,
  h4,
  h5 {
    page-break-after: avoid;
    margin-top: 0.75em;
  }
  img {
    max-width: 100% !important;
  }
  ul,
  img {
    page-break-inside: avoid;
  }
  ul li {
    margin-bottom: 5px;
  }
  blockquote,
  cite,
  p,
  main p,
  em,
  strong,
  a,
  ul,
  ol,
  li,
  dl,
  dt,
  dd {
    color: #000 !important;
    /* paint it black */
  }
  table {
    border-top: 1px solid #ccc !important;
    border-left: 1px solid #ccc !important;
  }
  table th,
  table td {
    color: #000 !important;
    border-right: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
    padding: 5px 10px !important;
  }
  table th > td,
  table td > td {
    padding: 0 !important;
  }
  .btn {
    display: block;
    background: none;
    color: #000;
    width: auto;
    height: auto;
    text-align: left;
    margin: 0;
    padding: 0;
    font-size: 15pt;
    border: none;
    text-decoration: underline;
  }
  .site-footer {
    margin: 15px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid #ccc;
  }
  .previous-next-wrap {
    display: none !important;
  }
  .site-container,
  .st-pusher,
  .st-content,
  .st-content-inner {
    height: auto;
    overflow: visible !important;
  }
  /* Hide Some Stuff */
  nav,
  .flexible-video,
  .sidebar,
  footer,
  .back-to-top,
  .header-utility-nav,
  .content-utility-nav,
  #search-link,
  #nav-primary-link,
  #nav-primary,
  .icon-expand-less,
  .product-recommender {
    display: none !important;
  }
  .site-content {
    margin-left: 0;
  }
  main {
    width: 100% !important;
  }
  .show-hide .body {
    display: block !important;
  }
  .page-content {
    padding-top: 0 !important;
  }
  .toggle {
    background-color: transparent !important;
  }
  /* Compare */
  .oiltypes td {
    font-size: 0.65em !important;
  }
  .detail td {
    font-size: 0.55em !important;
  }
  .oil-specifics td,
  .fuel-specifics td,
  .cleanliness-specifics td {
    padding: 0 !important;
  }
  .section-title-wrapper h3 {
    font-size: 1em !important;
  }
  body.compare-motor-oil .product_options {
    text-align: right;
  }
  body.compare-motor-oil .product_options .product_option {
    width: 15% !important;
    display: inline-block !important;
    vertical-align: top !important;
    font-size: 12px !important;
    text-transform: none !important;
  }
  body.compare-motor-oil table.wrapper-chart tr > td {
    display: table-cell !important;
    width: 15% !important;
  }
  body.compare-motor-oil .bubble {
    border: none !important;
    width: 32px !important;
    height: 32px !important;
  }
  body.compare-motor-oil .bubble span {
    background-color: transparent !important;
    border-radius: 0 !important;
    height: 100% !important;
    -webkit-print-color-adjust: exact;
  }
  body.compare-motor-oil .bubble span.full-height {
    background: url('/~/media/ValvolineUS/Images/compare_oil/full.jpg') 0 0 no-repeat !important;
  }
  body.compare-motor-oil .bubble span.three-quarter-height {
    background: url('/~/media/ValvolineUS/Images/compare_oil/third-full.jpg') 0 0 no-repeat !important;
  }
  body.compare-motor-oil .bubble span.half-height {
    background: url('/~/media/ValvolineUS/Images/compare_oil/half-full.jpg') 0 0 no-repeat !important;
  }
  body.compare-motor-oil .bubble span.quarter-height {
    background: url('/~/media/ValvolineUS/Images/compare_oil/quarter-full.jpg') 0 0 no-repeat !important;
  }
  body.compare-motor-oil .bubble span.full-height {
    height: 100% !important;
  }
  body.compare-motor-oil .bubble span.three-quarter-height {
    height: 75% !important;
  }
}
.super-stripes {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  opacity: 0.5;
  transform: skewX(-33deg) translateX(0);
  transform-origin: 0 0;
  transition: transform 1500ms 500ms cubic-bezier(0.165, 0.84, 0.44, 1), width 1500ms 500ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1500ms cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 10;
}
.transition-out .super-stripes {
  width: 250%;
  opacity: 1;
  transform: skewX(-33deg) translateX(0);
  transition: width 1000ms cubic-bezier(0.77, 0, 0.175, 1), transform 1000ms 1000ms cubic-bezier(0.77, 0, 0.175, 1), opacity 500ms 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.carousel-inner .item.active .super-stripes {
  opacity: 0.85;
}
.stripe {
  display: block;
  position: absolute;
  top: 0;
  height: 100%;
  transition: transform 1000ms 1000ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1000ms 1000ms cubic-bezier(0.77, 0, 0.175, 1);
  opacity: 0;
  left: 0;
  background-position: top right;
  background-repeat: repeat-y;
  background-size: 100%;
}
.stripe:nth-child( 1) {
  background-color: #1c76bd;
  width: 15.25%;
  left: 0;
  transform: scaleX(0.001);
  opacity: 1;
}
.transition-out .stripe:nth-child( 1) {
  transform: scaleX(0.001) translateX(305%) skewX(33deg);
  opacity: 0;
}
.carousel-inner .item.active .stripe:nth-child( 1) {
  transform: scaleX(1);
  opacity: 1;
  transition: transform 1000ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1000ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.stripe:nth-child( 2) {
  background-color: #0f4979;
  width: 20.25%;
  left: 15%;
  transform: scaleX(0.001);
  opacity: 1;
}
.transition-out .stripe:nth-child( 2) {
  transform: scaleX(0.001) translateX(405%) skewX(33deg);
  opacity: 0;
}
.carousel-inner .item.active .stripe:nth-child( 2) {
  transform: scaleX(1);
  opacity: 1;
  transition: transform 1000ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1000ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.stripe:nth-child( 3) {
  background-color: #7d7e7e;
  width: 10.25%;
  left: 35%;
  transform: scaleX(0.001);
  opacity: 1;
}
.transition-out .stripe:nth-child( 3) {
  transform: scaleX(0.001) translateX(205%) skewX(33deg);
  opacity: 0;
}
.carousel-inner .item.active .stripe:nth-child( 3) {
  transform: scaleX(1);
  opacity: 1;
  transition: transform 1000ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1000ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.stripe:nth-child( 4) {
  background-color: #8a0a12;
  width: 35.25%;
  left: 45%;
  transform: scaleX(0.001);
  opacity: 1;
}
.transition-out .stripe:nth-child( 4) {
  transform: scaleX(0.001) translateX(705%) skewX(33deg);
  opacity: 0;
}
.carousel-inner .item.active .stripe:nth-child( 4) {
  transform: scaleX(1);
  opacity: 1;
  transition: transform 1000ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1000ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.stripe:nth-child( 5) {
  background-color: #d20017;
  width: 20%;
  left: 80%;
  transform: scaleX(0.001);
  opacity: 1;
}
.transition-out .stripe:nth-child( 5) {
  transform: scaleX(0.001) translateX(400%) skewX(33deg);
  opacity: 0;
}
.carousel-inner .item.active .stripe:nth-child( 5) {
  transform: scaleX(1);
  opacity: 1;
  transition: transform 1000ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1000ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.stripe:nth-child(5) {
  background-image: url("/~/media/ValvolineUS/Images/stripes/stripe-5.jpg");
}
.stripe:nth-child(4) {
  background-image: url("/~/media/ValvolineUS/Images/stripes/stripe-4.jpg");
}
.stripe:nth-child(3) {
  background-image: url("/~/media/ValvolineUS/Images/stripes/stripe-3.jpg");
}
.stripe:nth-child(1) {
  background-image: url("/~/media/ValvolineUS/Images/stripes/stripe-1.jpg");
}
/*======================================================================
  Selectric
======================================================================*/
.selectricWrapper {
  position: relative;
  margin: 0;
  width: 100%;
  cursor: pointer;
}
@media all and (min-width: 43.75em) {
  .selectricWrapper {
    width: 300px;
  }
}
.selectricResponsive {
  width: 100%;
}
.selectric {
  border: 1px solid #d7d7d7;
  background: #fff;
  position: relative;
  border-radius: 4px;
  color: #fff;
}
.selectric .label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 30px 0 0;
  padding: 6px;
  font-size: 15px;
  line-height: 18px;
  color: #7d7e7e;
  min-height: 18px;
}
@media all and (min-width: 43.75em) {
  .selectric .label {
    font-size: 0.9em;
  }
}
.selectric .button {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  border: 0;
  width: 30px;
  height: 30px;
  color: #7d7e7e;
  text-align: center;
  font: 0/0 a;
  /* IE Fix */
  *font: 0.66666667px Lucida Sans Unicode, Arial Unicode MS, Arial;
}
.selectric .button:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "\e610";
  border: 0;
  font-family: 'icomoon';
  font-size: 13px;
  width: 30px;
  height: 15px;
  padding-bottom: 9px;
  line-height: 1;
}
.selectricHover .selectric {
  border-color: #3f3f3f;
}
.selectricHover .selectric .button {
  color: #888;
}
.selectricHover .selectric .button:after {
  border-top-color: #3f3f3f;
}
.selectricOpen {
  z-index: 9999;
}
.selectricOpen .selectric .button:after {
  border-top-color: #7d7e7e;
  content: "\e611";
}
.selectricOpen .label {
  color: #7d7e7e;
}
.selectricOpen .button {
  border-left: 0;
}
.selectricOpen .selectric {
  border-color: #7d7e7e;
  background: #F0F0F0;
}
.selectricOpen .selectricItems,
.selectricOpen .selectricItems li {
  display: block;
  visibility: visible;
}
.selectricDisabled {
  filter: alpha(opacity=50);
  opacity: 0.5;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.selectricHideSelect {
  position: relative;
  overflow: hidden;
  width: 0;
  height: 0;
}
.selectricHideSelect select {
  position: absolute;
  left: -100%;
  display: none;
}
.selectricInput {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 1px !important;
  height: 1px !important;
  outline: none !important;
  border: none !important;
  /* I'm not sure the purpose of this, but it prevented less from compiling
  *font: 0/0 a !important;
  */
  background: none !important;
}
.selectricTempShow {
  position: absolute !important;
  visibility: hidden !important;
  display: block !important;
}
/* Items box */
.selectricItems {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #F9F9F9;
  border: 1px solid #7d7e7e;
  z-index: -1;
  box-shadow: 0 0 10px -6px;
  visibility: hidden;
  border-radius: 4px;
}
.selectricItems .selectricScroll {
  height: 100%;
  overflow: auto;
}
.selectricAbove .selectricItems {
  top: auto;
  bottom: 100%;
}
.selectricItems ul,
.selectricItems li {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  min-height: 20px;
}
@media all and (min-width: 43.75em) {
  .selectricItems ul,
  .selectricItems li {
    font-size: 0.9em;
  }
}
.selectricItems li {
  display: block;
  padding: 5px;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #EEE;
  color: #666;
  cursor: pointer;
}
.selectricItems li.selected {
  background: #EFEFEF;
  color: #444;
  border-top-color: #E0E0E0;
}
.selectricItems li:hover {
  background: rgba(125, 126, 126, 0.1);
  color: #444;
}
.selectricItems li.disabled {
  background: #F5F5F5;
  color: #BBB;
  border-top-color: #FAFAFA;
  cursor: default;
}
/* Gray Select */
.input-wrapper.select.gray .selectricWrapper {
  width: auto;
  max-width: 380px;
  margin: 10px 0px;
}
.input-wrapper.select.gray .selectric {
  background: #e2dfdc;
  border-color: #3f3f3f;
  border: 0;
}
.input-wrapper.select.gray .selectric .label {
  color: #000;
}
.input-wrapper.select.gray .selectric .button {
  border-color: #3f3f3f;
  border-left: 0;
}
.input-wrapper.select.gray .selectric .button:after {
  border-top-color: #3f3f3f;
}
@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon/icomoon.eot?3l0lo9');
  src: url('fonts/icomoon/icomoon.eot?3l0lo9#iefix') format('embedded-opentype'), url('fonts/icomoon/icomoon.ttf?3l0lo9') format('truetype'), url('fonts/icomoon/icomoon.woff?3l0lo9') format('woff'), url('fonts/icomoon/icomoon.svg?3l0lo9#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-suppliers:before {
  content: "\e922";
}
.icon-plant-directory:before {
  content: "\e921";
}
.icon-purchase-order:before {
  content: "\e91b";
}
.icon-supplier-chain:before {
  content: "\e91c";
}
.icon-register:before {
  content: "\e91d";
}
.icon-code-conduct:before {
  content: "\e91e";
}
.icon-accounts-payable:before {
  content: "\e91f";
}
.icon-management-systems:before {
  content: "\e920";
}
.icon-our-story:before {
  content: "\e907";
}
.icon-faq:before {
  content: "\e91a";
}
.icon-icon-gen-motor:before {
  content: "\e909";
}
.icon-icon-oil-myths:before {
  content: "\e90a";
}
.icon-icon-oil-types:before {
  content: "\e90b";
}
.icon-icon-our-business:before {
  content: "\e90c";
}
.icon-icon-people:before {
  content: "\e90d";
}
.icon-icon-performance-oil:before {
  content: "\e90e";
}
.icon-icon-planet:before {
  content: "\e90f";
}
.icon-icon-product:before {
  content: "\e910";
}
.icon-icon-racing:before {
  content: "\e911";
}
.icon-icon-racing-oil:before {
  content: "\e912";
}
.icon-icon-recycle:before {
  content: "\e913";
}
.icon-icon-recycled-myths:before {
  content: "\e914";
}
.icon-icon-specialty-oil:before {
  content: "\e915";
}
.icon-icon-sponsorships:before {
  content: "\e916";
}
.icon-icon-sustainability:before {
  content: "\e917";
}
.icon-icon-synthetic-myths:before {
  content: "\e918";
}
.icon-icon-system-fluids:before {
  content: "\e919";
}
.icon-team-valvoline-updated:before {
  content: "\e908";
}
.icon-CommIndustrail_Rail:before {
  content: "\e901";
}
.icon-CommIndustrail_Road:before {
  content: "\e902";
}
.icon-CommIndustrail_Truck:before {
  content: "\e903";
}
.icon-CommIndustrail_Power:before {
  content: "\e904";
}
.icon-CommIndustrail_Mining:before {
  content: "\e905";
}
.icon-CommIndustrail_Marine:before {
  content: "\e906";
}
.icon-comm-industrial:before {
  content: "\e900";
}
.icon-ashland-info:before {
  content: "\e628";
}
.icon-about-v:before {
  content: "\e625";
}
.icon-chat-bubble:before {
  content: "\e627";
}
.icon-all-services:before {
  content: "\e626";
}
.icon-oem_icon:before {
  content: "\e616";
}
.icon-serv-airconditioning:before {
  content: "\e617";
}
.icon-serv-battery:before {
  content: "\e618";
}
.icon-serv-breaks:before {
  content: "\e619";
}
.icon-serv-differential:before {
  content: "\e61a";
}
.icon-serv-engine:before {
  content: "\e61b";
}
.icon-serv-filters:before {
  content: "\e61c";
}
.icon-serv-fuelair:before {
  content: "\e61d";
}
.icon-serv-oilchange:before {
  content: "\e61e";
}
.icon-serv-powersteer:before {
  content: "\e61f";
}
.icon-serv-radiator:before {
  content: "\e620";
}
.icon-serv-serpentine:before {
  content: "\e621";
}
.icon-serv-tires:before {
  content: "\e622";
}
.icon-serv-transmission:before {
  content: "\e623";
}
.icon-serv-wipers:before {
  content: "\e624";
}
.icon-gridview:before {
  content: "\e600";
}
.icon-listview:before {
  content: "\e612";
}
.icon-print:before {
  content: "\e613";
}
.icon-share:before {
  content: "\e614";
}
.icon-ashland-logo:before {
  content: "\e601";
}
.icon-biz-opps:before {
  content: "\e602";
}
.icon-car:before {
  content: "\e603";
}
.icon-career-tech-ed:before {
  content: "\e604";
}
.icon-contact_us:before {
  content: "\e605";
}
.icon-intl-distributors:before {
  content: "\e606";
}
.icon-job-opp:before {
  content: "\e607";
}
.icon-oil:before {
  content: "\e608";
}
.icon-press-room:before {
  content: "\e609";
}
.icon-promotion:before {
  content: "\e60a";
}
.icon-search:before {
  content: "\e60b";
}
.icon-valv-social:before {
  content: "\e60c";
}
.icon-valvoline-brands:before {
  content: "\e60d";
}
.icon-valvoline-web:before {
  content: "\e60e";
}
.icon-why-valvoline:before {
  content: "\e60f";
}
.icon-expand-more:before {
  content: "\e610";
}
.icon-expand-less:before {
  content: "\e611";
}
.icon-previous:before {
  content: "\e629";
}
.icon-next:before {
  content: "\e62a";
}
.icon-rss:before {
  content: "\ea9b";
}
.icon-file-pdf:before {
  content: "\eadf";
}
.icon-instagram:before {
  content: "\ea92";
}
.icon-plus:before {
  content: "\e615";
}
.icon-printer:before {
  content: "\e954";
}
.icon-plus2:before {
  content: "\ea0a";
}
.icon-minus:before {
  content: "\ea0b";
}
.icon-play2:before {
  content: "\ea15";
}
.icon-share2:before {
  content: "\ea82";
}
.icon-facebook2:before {
  content: "\ea8d";
}
.icon-twitter:before {
  content: "\ea91";
}
.icon-youtube:before {
  content: "\ea97";
}
.icon-linkedin:before {
  content: "\e999";
}
*,
*:after,
*::before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body,
.st-container,
.st-pusher,
.st-content {
  height: 100%;
}
.st-content {
  overflow-y: scroll;
}
/*.st-content,
.st-content-inner {
	position: relative;
}*/
.st-container {
  position: relative;
  overflow: hidden;
}
.st-pusher {
  position: relative;
  left: 0;
  z-index: 99;
  height: 100%;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}
.st-pusher::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  background: rgba(0, 0, 0, 0.4);
  content: '';
  opacity: 0;
  z-index: 2000;
  -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
.st-menu-open .st-pusher::after {
  width: 100%;
  height: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.st-menu {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  visibility: hidden;
  width: 300px;
  height: 100%;
  background: #000000;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
@media all and (min-width: 43.75em) {
  .st-menu {
    position: fixed;
  }
}
.st-menu::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  content: '';
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.st-menu-open .st-menu::after {
  width: 0;
  height: 0;
  opacity: 0;
  -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
/* content style */
.st-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (min-width: 30em) {
  .st-menu ul {
    margin: 40px 0 0;
  }
}
.st-menu h2 {
  margin: 0;
  padding: 1em;
  color: rgba(0, 0, 0, 0.4);
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
  font-weight: 400;
  font-size: 2em;
}
.st-menu ul li a {
  display: block;
  margin: 1em 0;
  padding: 0.5em 2em 0.75em 2.2em;
  outline: none;
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
  letter-spacing: 1px;
  font-weight: 400;
  -webkit-transition: background 0.3s, box-shadow 0.3s;
  transition: background 0.3s, box-shadow 0.3s;
}
@media screen and (min-width: 30em) {
  .st-menu ul li a {
    padding: 1em 2em 1em 2.2em;
  }
}
.st-menu ul li:first-child a {
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2), inset 0 1px rgba(0, 0, 0, 0.2);
}
.st-menu ul li a:hover {
  background: rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0);
  color: #fff;
}
/* Individual effects */
/* Effect 1: Slide in on top */
.st-effect-1.st-menu {
  visibility: visible;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.st-effect-1.st-menu-open .st-effect-1.st-menu {
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.st-effect-1.st-menu::after {
  display: none;
}
/* Effect 2: Reveal */
.st-effect-2.st-menu-open .st-pusher {
  -webkit-transform: translate3d(300px, 0, 0);
  transform: translate3d(300px, 0, 0);
}
.st-effect-2.st-menu {
  z-index: 1;
}
.st-effect-2.st-menu-open .st-effect-2.st-menu {
  visibility: visible;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}
.st-effect-2.st-menu::after {
  display: none;
}
/* Effect 3: Push*/
.st-effect-3.st-menu-open .st-pusher {
  -webkit-transform: translate3d(300px, 0, 0);
  transform: translate3d(300px, 0, 0);
}
.st-effect-3.st-menu {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.st-effect-3.st-menu-open .st-effect-3.st-menu {
  visibility: visible;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}
.st-effect-3.st-menu::after {
  display: none;
}
/* Effect 4: Slide along */
.st-effect-4.st-menu-open .st-pusher {
  -webkit-transform: translate3d(300px, 0, 0);
  transform: translate3d(300px, 0, 0);
}
.st-effect-4.st-menu {
  z-index: 1;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}
.st-effect-4.st-menu-open .st-effect-4.st-menu {
  visibility: visible;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.st-effect-4.st-menu::after {
  display: none;
}
/* Effect 5: Reverse slide out */
.st-effect-5.st-menu-open .st-pusher {
  -webkit-transform: translate3d(300px, 0, 0);
  transform: translate3d(300px, 0, 0);
}
.st-effect-5.st-menu {
  z-index: 1;
  -webkit-transform: translate3d(50%, 0, 0);
  transform: translate3d(50%, 0, 0);
}
.st-effect-5.st-menu-open .st-effect-5.st-menu {
  visibility: visible;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
/* Effect 6: Rotate pusher */
.st-effect-6.st-container {
  -webkit-perspective: 1500px;
  perspective: 1500px;
}
.st-effect-6 .st-pusher {
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.st-effect-6.st-menu-open .st-pusher {
  -webkit-transform: translate3d(300px, 0, 0) rotateY(-15deg);
  transform: translate3d(300px, 0, 0) rotateY(-15deg);
}
.st-effect-6.st-menu {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.st-effect-6.st-menu-open .st-effect-6.st-menu {
  visibility: visible;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(15deg);
  transform: translate3d(-100%, 0, 0) rotateY(15deg);
}
.st-effect-6.st-menu::after {
  display: none;
}
/* Effect 7: 3D rotate in */
.st-effect-7.st-container {
  -webkit-perspective: 1500px;
  perspective: 1500px;
  -webkit-perspective-origin: 0% 50%;
  perspective-origin: 0% 50%;
}
.st-effect-7 .st-pusher {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.st-effect-7.st-menu-open .st-pusher {
  -webkit-transform: translate3d(300px, 0, 0);
  transform: translate3d(300px, 0, 0);
}
.st-effect-7.st-menu {
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.st-effect-7.st-menu-open .st-effect-7.st-menu {
  visibility: visible;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg);
  transform: translate3d(-100%, 0, 0) rotateY(0deg);
}
/* Effect 8: 3D rotate out */
.st-effect-8.st-container {
  -webkit-perspective: 1500px;
  perspective: 1500px;
  -webkit-perspective-origin: 0% 50%;
  perspective-origin: 0% 50%;
}
.st-effect-8 .st-pusher {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.st-effect-8.st-menu-open .st-pusher {
  -webkit-transform: translate3d(300px, 0, 0);
  transform: translate3d(300px, 0, 0);
}
.st-effect-8.st-menu {
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg);
  transform: translate3d(-100%, 0, 0) rotateY(90deg);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.st-effect-8.st-menu-open .st-effect-8.st-menu {
  visibility: visible;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg);
  transform: translate3d(-100%, 0, 0) rotateY(0deg);
}
.st-effect-8.st-menu::after {
  display: none;
}
/* Effect 9: Scale down pusher */
.st-effect-9.st-container {
  -webkit-perspective: 1500px;
  perspective: 1500px;
}
.st-effect-9 .st-pusher {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.st-effect-9.st-menu-open .st-pusher {
  -webkit-transform: translate3d(0, 0, -300px);
  transform: translate3d(0, 0, -300px);
}
.st-effect-9.st-menu {
  opacity: 1;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.st-effect-9.st-menu-open .st-effect-9.st-menu {
  visibility: visible;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.st-effect-9.st-menu::after {
  display: none;
}
/* Effect 10: Scale up */
.st-effect-10.st-container {
  -webkit-perspective: 1500px;
  perspective: 1500px;
  -webkit-perspective-origin: 0% 50%;
  perspective-origin: 0% 50%;
}
.st-effect-10.st-menu-open .st-pusher {
  -webkit-transform: translate3d(300px, 0, 0);
  transform: translate3d(300px, 0, 0);
}
.st-effect-10.st-menu {
  z-index: 1;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, -300px);
  transform: translate3d(0, 0, -300px);
}
.st-effect-10.st-menu-open .st-effect-10.st-menu {
  visibility: visible;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
/* Effect 11: Scale and rotate pusher */
.st-effect-11.st-container {
  -webkit-perspective: 1500px;
  perspective: 1500px;
}
.st-effect-11 .st-pusher {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.st-effect-11.st-menu-open .st-pusher {
  -webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg);
  transform: translate3d(100px, 0, -600px) rotateY(-20deg);
}
.st-effect-11.st-menu {
  opacity: 1;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.st-effect-11.st-menu-open .st-effect-11.st-menu {
  visibility: visible;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.st-effect-11.st-menu::after {
  display: none;
}
/* Effect 12: Open door */
.st-effect-12.st-container {
  -webkit-perspective: 1500px;
  perspective: 1500px;
}
.st-effect-12 .st-pusher {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.st-effect-12.st-menu-open .st-pusher {
  -webkit-transform: rotateY(-10deg);
  transform: rotateY(-10deg);
}
.st-effect-12.st-menu {
  opacity: 1;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.st-effect-12.st-menu-open .st-effect-12.st-menu {
  visibility: visible;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.st-effect-12.st-menu::after {
  display: none;
}
/* Effect 13: Fall down */
.st-effect-13.st-container {
  -webkit-perspective: 1500px;
  perspective: 1500px;
  -webkit-perspective-origin: 0% 50%;
  perspective-origin: 0% 50%;
}
.st-effect-13.st-menu-open .st-pusher {
  -webkit-transform: translate3d(300px, 0, 0);
  transform: translate3d(300px, 0, 0);
}
.st-effect-13.st-menu {
  z-index: 1;
  opacity: 1;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}
.st-effect-13.st-menu-open .st-effect-13.st-menu {
  visibility: visible;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-speed: 0.2s;
  transition-speed: 0.2s;
}
/* Effect 14: Delayed 3D rotate */
.st-effect-14.st-container {
  -webkit-perspective: 1500px;
  perspective: 1500px;
  -webkit-perspective-origin: 0% 50%;
  perspective-origin: 0% 50%;
}
.st-effect-14 .st-pusher {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.st-effect-14.st-menu-open .st-pusher {
  -webkit-transform: translate3d(300px, 0, 0);
  transform: translate3d(300px, 0, 0);
}
.st-effect-14.st-menu {
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg);
  transform: translate3d(-100%, 0, 0) rotateY(90deg);
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.st-effect-14.st-menu-open .st-effect-14.st-menu {
  visibility: visible;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg);
  transform: translate3d(-100%, 0, 0) rotateY(0deg);
}
/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
/*.no-csstransforms3d .st-pusher,
.no-js .st-pusher {
	padding-left: 300px;
}*/
svg {
  -webkit-font-smoothing: antialiased;
}
.header-banner-content-wrapper {
  position: relative;
  padding-bottom: 0;
  margin-bottom: 15px;
  -webkit-font-smoothing: antialiased;
}
@media screen and (min-width: 43.75em) {
  .header-banner-content-wrapper {
    margin-bottom: 20px;
  }
  .header-banner-content .header-banner-content-wrapper {
    padding-bottom: 5px;
    margin-bottom: 5px;
  }
}
.header-banner-content .header-banner-content-wrapper {
  padding-bottom: 0;
  margin-bottom: 10px;
}
.header-banner-content-wrapper img {
  display: block;
  width: 210%;
  max-width: none;
  margin-left: -85%;
}
@media screen and (min-width: 43.75em) {
  .header-banner-content-wrapper img {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
}
.header-banner-content-wrapper .stripes {
  position: absolute;
  top: 0;
  left: 75px;
  width: 51.3%;
  height: auto;
  text-align: left;
}
@media screen and (min-width: 43.75em) {
  .header-banner-content-wrapper .stripes {
    left: 0;
  }
}
.header-banner-content-wrapper .header-content {
  position: absolute;
  top: 40px;
  left: 0;
  padding: 0 22px;
  z-index: 15;
  width: 100%;
  text-align: left;
}
.header-banner-content .header-banner-content-wrapper .header-content {
  top: 20%;
}
.hero .header-banner-content-wrapper .header-content {
  /*top: 40px;*/
}
@media screen and (min-width: 43.75em) {
  .hero .header-banner-content-wrapper .header-content {
    top: 100px;
  }
}
@media screen and (min-width: 43.75em) {
  .header-banner-content-wrapper .header-content {
    top: 17%;
    left: 47%;
    padding-right: 10%;
    width: 42%;
    text-align: left;
  }
  .hero .header-banner-content-wrapper .header-content {
    left: 0;
    width: 75%;
  }
}
@media screen and (min-width: 50em) {
  .header-banner-content-wrapper .header-content {
    left: 50%;
  }
}
.header-banner-content-wrapper .header-content h1 {
  color: #fff;
  font-family: 'Helvetica', Arial, sans-serif;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
  font-weight: 600;
}
@media screen and (min-width: 43.75em) {
  .header-banner-content-wrapper .header-content h1 {
    font-size: 3.5vw;
  }
}
.header-banner-content-wrapper .header-content p {
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
  text-align: left;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  width: 50%;
}
@media screen and (min-width: 43.75em) {
  .header-banner-content-wrapper .header-content p {
    width: auto;
  }
}
@media screen and (min-width: 68.75em) {
  .header-banner-content-wrapper .header-content p {
    /*font-size: 16px;*/
    font-size: 17px;
  }
}
.header-banner-content-wrapper .header-content p.right {
  float: right;
}
@media screen and (min-width: 43.75em) {
  .header-banner-content-wrapper .header-content p.right {
    float: none;
  }
}
.hero .header-banner-content-wrapper .header-content p {
  margin: 20px 0;
  display: none;
}
@media screen and (min-width: 1024px) {
  .hero .header-banner-content-wrapper .header-content p {
    display: block;
    width: 38%;
  }
}
.header-banner-content-wrapper .header-content .my-svg-alternate {
  display: none;
}
.no-svg .header-banner-content-wrapper .header-content .my-svg-alternate {
  display: block;
}
.header-banner-content-wrapper.copy-right {
  overflow: hidden;
}
@media screen and (min-width: 43.75em) {
  .header-banner-content-wrapper.copy-right .header-content {
    top: 17%;
    left: 47%;
    padding-right: 10%;
    width: 49%;
    text-align: left;
  }
}
@media screen and (min-width: 43.75em) {
  .hero .header-banner-content-wrapper.copy-right .header-content {
    top: 80px;
  }
}
@media screen and (min-width: 43.75em) {
  .header-banner-content-wrapper.copy-right .header-imagery {
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
@media screen and (min-width: 56.25em) {
  .header-banner-content-wrapper.copy-right .header-imagery {
    left: 6%;
  }
}
@media screen and (min-width: 68.75em) {
  .header-banner-content-wrapper.copy-right .header-imagery {
    left: 13%;
  }
}
.header-banner-content-wrapper.copy-left {
  overflow: hidden;
}
.header-banner-content-wrapper.copy-left.promotions .header-content .svg-wrapper svg {
  width: 100%;
  height: 1.5em;
}
@media screen and (min-width: 43.75em) {
  .header-banner-content-wrapper.copy-left .header-content {
    top: 50%;
    left: 9%;
    padding-left: 0;
    width: 49%;
    text-align: left;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
  .homepage .header-banner-content-wrapper.copy-left .header-content {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
  }
}
@media screen and (min-width: 43.75em) {
  .hero .header-banner-content-wrapper.copy-left .header-content {
    top: 80px;
    left: 220px;
    width: 75%;
  }
}
@media screen and (min-width: 43.75em) {
  .header-banner-content-wrapper.copy-left .header-imagery {
    position: absolute;
    bottom: 0;
    left: auto;
    right: 0;
  }
}
@media screen and (min-width: 56.25em) {
  .header-banner-content-wrapper.copy-left .header-imagery {
    right: 6%;
  }
}
@media screen and (min-width: 68.75em) {
  .header-banner-content-wrapper.copy-left .header-imagery {
    right: 13%;
  }
}
.header-banner-content-wrapper.promotions {
  padding-bottom: 20px;
}
@media screen and (min-width: 43.75em) {
  .header-banner-content-wrapper.promotions {
    padding-bottom: 30px;
  }
}
.header-banner-content-wrapper.promotions .header-content {
  padding-top: 5%;
}
@media screen and (min-width: 30em) {
  .header-banner-content-wrapper.promotions .header-content {
    padding-top: 10%;
  }
}
@media screen and (min-width: 43.75em) {
  .header-banner-content-wrapper.promotions .header-content {
    padding-top: 0;
    width: 80%;
  }
}
.header-banner-content-wrapper.promotions .header-content .svg-wrapper svg {
  width: 100%;
  height: 1.5em;
}
.header-banner-content-wrapper .header-imagery {
  z-index: 10;
  position: absolute;
  bottom: 0;
  left: 15px;
  text-align: left;
}
@media screen and (min-width: 43.75em) {
  .header-banner-content-wrapper .header-imagery {
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
@media screen and (min-width: 56.25em) {
  .header-banner-content-wrapper .header-imagery {
    left: 6%;
  }
}
@media screen and (min-width: 68.75em) {
  .header-banner-content-wrapper .header-imagery {
    left: 13%;
  }
}
.header-banner-content-wrapper .header-imagery img {
  display: block;
  margin-left: 0;
  width: 50%;
}
@media screen and (min-width: 43.75em) {
  .header-banner-content-wrapper .header-imagery img {
    width: 50%;
  }
}
@media screen and (min-width: 56.25em) {
  .header-banner-content-wrapper .header-imagery img {
    width: 80%;
  }
}
@media screen and (min-width: 68.75em) {
  .header-banner-content-wrapper .header-imagery img {
    width: auto;
  }
}
@media screen and (min-width: 43.75em) {
  .header-banner-product .page-content {
    margin-top: -30px;
  }
}
/* -----------------------------

   Responsive Starter Kit Pro
   Theme Style Sheet

   Table of Contents:
   -----------------------------
   + Header
   + Navigation
   + Page Content
   + Main
   + Sidebar
   + Footer

-------------------------------- */
/* Web Fonts
-------------------------------- */
body {
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  background: url("/~/media/ValvolineUS/Images/background.jpg");
}
h1,
h2,
h3,
h4,
h5,
h6,
.nav-breadcrumb {
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  margin-top: 0;
  text-transform: uppercase;
}
h1 {
  color: #3f3f3f;
  font-size: 1.75em;
  line-height: 1;
  margin-bottom: 0;
  text-transform: uppercase;
}
h1.grunge {
  position: relative;
}
h1.grunge span {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url('/~/media/ValvolineUS/Images/title-grunge.png') left top repeat;
}
.internal h1 {
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 400;
}
b,
strong {
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 600;
}
fieldset {
  border: none;
  padding: 0;
}
.btn,
input[type="submit"] {
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.065em;
}
.site-header nav {
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 400;
}
.gist {
  margin: 0 0 1.5em;
}
.site-container {
  position: relative;
  overflow: hidden;
  max-width: 1440px;
  height: 100%;
  background-color: white;
  -webkit-overflow-scrolling: touch;
}
.wrapper {
  max-width: none;
  padding: 0;
}
.padding-wrapper {
  padding: 0 22px;
}
@media all and (min-width: 43.75em) {
  .padding-wrapper {
    padding: 0 4%;
  }
}
.st-content {
  overflow-y: auto;
}
.st-content-inner {
  height: 100%;
  background-color: #fff;
}
.site-content.no-margin {
  margin-left: 0;
}
.site-content .wrapper {
  background-color: #fefefe;
}
.xs-top-padding {
  padding-top: 0.5em;
}
.sm-top-margin {
  margin-top: 1em;
}
.md-top-margin {
  margin-top: 2em;
}
.lg-top-margin {
  margin-top: 3em;
}
.no-bottom-margin {
  margin-bottom: 0;
}
.sm-bottom-margin {
  margin-bottom: 1em;
}
.md-bottom-margin {
  margin-bottom: 2em;
}
.lg-bottom-margin {
  margin-bottom: 3em;
}
p.disclaimer {
  font-style: italic;
}
/* Header
-------------------------------- */
.site-header {
  background: #343434;
  color: #fff;
  font-size: 0.875em;
  padding: 8px 0 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3000;
  width: 100%;
}
@media all and (min-width: 43.75em) {
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 128px;
    height: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    z-index: 5;
    -webkit-transition: left 0.5s;
    transition: left 0.5s;
  }
  .st-menu-open .site-header {
    left: 280px;
    z-index: 0;
  }
  .cookie-notification-active .site-header {
    /*top: 81px;*/
    height: 100%;
    position: fixed;
  }
}
body.homepage .site-header {
  background: rgba(0, 0, 0, 0.8);
}
.site-header .wrapper {
  padding: 0;
}
.site-header .selectricWrapper {
  margin: 0 auto;
  width: 100%;
}
@media all and (min-width: 43.75em) {
  .site-header .selectricWrapper {
    width: 90%;
  }
}
.site-header .selectricWrapper .selectric {
  background-color: transparent;
  border-radius: 0;
  border-width: 0;
}
@media all and (min-width: 43.75em) {
  .site-header .selectricWrapper .selectric {
    background-color: #454545;
    border-width: 1px;
  }
}
.site-header .selectricWrapper .selectric .button {
  border: 0;
  /*position: relative;*/
}
.site-header .selectricWrapper .selectric .button:after {
  position: absolute;
  right: 20px;
  bottom: 4px;
  top: auto;
  left: auto;
  content: "\e610";
  font-size: 24px;
  color: #fff;
  -wekbkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media all and (min-width: 43.75em) {
  .site-header .selectricWrapper .selectric .button:after {
    content: "\e611";
    border: 0;
    font-size: 13px;
    width: 21px;
    height: 30px;
    line-height: 1;
    bottom: 1px;
    right: 8px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
.site-header .selectricWrapper .selectric .label {
  color: #fdfdfe;
  font-size: 11px;
  font-weight: normal;
  padding: 10px 1.25em;
  text-align: left;
}
@media all and (min-width: 43.75em) {
  .site-header .selectricWrapper .selectric .label {
    padding: 5px 9px;
  }
}
.site-header .selectricWrapper .selectricItems .selectricScroll ul li:first-child {
  display: none;
}
.site-header .site-branding {
  width: 52px;
  height: 35px;
  display: inline-block;
  margin: 0 auto 8px;
  /* Retina Version of Logo */
}
.site-header .site-branding a {
  background: url("/~/media/ValvolineUS/Images/valvoline-logo-mobile.png") no-repeat 0 0;
  width: 100%;
  height: 100%;
  display: block;
  text-indent: -999em;
  overflow: hidden;
}
@media all and (min-width: 43.75em) {
  .site-header .site-branding {
    border-bottom: 1px solid #bdbdbd;
    width: 98px;
    height: 85px;
    margin: 0;
  }
  .site-header .site-branding a {
    background-image: url('/~/media/ValvolineUS/Images/valvoline-logo.png');
    margin: 0 5px;
  }
}
@media only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 43.75em), only screen and (-o-min-device-pixel-ratio: 2) and (max-width: 43.75em), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 43.75em), only screen and (min-device-pixel-ratio: 2) and (max-width: 43.75em) {
  .site-header .site-branding a {
    background: url("/~/media/ValvolineUS/Images/valvoline-logo-mobile2x.png") no-repeat 0 0;
    background-size: 52px 35px;
  }
}
.site-header #nav-primary-link {
  float: left;
  height: 30px;
  margin-top: 8px;
  margin-left: 4%;
  overflow: hidden;
  padding: 8px 0;
  text-indent: -999em;
  width: 22px;
}
.site-header #nav-primary-link span,
.site-header #nav-primary-link span:before,
.site-header #nav-primary-link span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 4px;
  width: 23px;
  background: #EFEFEF;
  position: absolute;
  display: block;
  content: '';
  -webkit-font-smoothing: antialiased;
}
.site-header #nav-primary-link span:before {
  top: -9px;
}
.site-header #nav-primary-link span:after {
  bottom: -9px;
}
.site-header #nav-primary-link span,
.site-header #nav-primary-link span:before,
.site-header #nav-primary-link span:after {
  transition: all 300ms ease-in-out;
}
.site-header #nav-primary-link.active span {
  background-color: transparent;
}
.site-header #nav-primary-link.active span:before {
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.site-header #nav-primary-link.active span:after {
  top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
@media all and (min-width: 43.75em) {
  .site-header #nav-primary-link {
    display: none;
  }
}
.site-header #search-link {
  color: #fff;
  float: right;
  font-size: 150%;
  line-height: 1;
  margin-top: 8px;
  padding-right: 4%;
  text-decoration: none;
}
@media all and (min-width: 43.75em) {
  .site-header #search-link {
    display: none;
    padding-right: 0;
  }
}
.site-header .search-link-wrapper {
  max-height: 0;
  padding: 0 2%;
  overflow: hidden;
  -webkit-transition: max-height 0.25s ease-out;
  transition: max-height 0.25s ease-out;
}
.site-header .search-link-wrapper.active-search {
  max-height: 50px;
  -webkit-transition: max-height 0.5s ease-in;
  transition: max-height 0.5s ease-in;
}
.site-header .search-link-wrapper input {
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  margin-bottom: 10px;
}
.site-header .search-link-wrapper #mobile-search-wrapper {
  position: relative;
}
.site-header .search-link-wrapper #mobile-search-wrapper button {
  position: absolute;
  right: 0px;
  top: 6px;
  background-color: transparent;
  border: 0;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  font-size: 1.2em;
  -webkit-appearance: none;
}
@media screen and (min-width: 43.75em) {
  .site-header .search-link-wrapper input {
    background-color: rgba(255, 255, 255, 0.5);
  }
}
.site-header .search-link-wrapper ::-webkit-input-placeholder {
  color: #fff;
}
.site-header .search-link-wrapper :-moz-placeholder {
  /* Firefox 18- */
  color: #fff;
}
.site-header .search-link-wrapper ::-moz-placeholder {
  /* Firefox 19+ */
  color: #fff;
}
.site-header .search-link-wrapper :-ms-input-placeholder {
  color: #fff;
}
.site-header nav.utility-nav {
  display: none;
}
@media all and (min-width: 43.75em) {
  .site-header nav.utility-nav {
    position: absolute;
    top: 0;
    right: 0;
  }
}
.site-header nav.utility-nav form.site-search {
  display: inline-block;
  float: left;
}
.site-header nav.utility-nav .partner-login {
  display: none;
}
@media all and (min-width: 43.75em) {
  .site-header nav.utility-nav .partner-login {
    float: left;
    display: inline-block;
  }
}
@media only screen and (min-width: 43.75em) and (max-height: 900px), only screen and (min-width: 43.75em) and (max-device-height: 1024px) and (orientation: landscape) {
  .site-header {
    height: 100vh;
    padding-top: 2%;
    /*nav.nav-primary ul.nav-primary-list ul.active.auto-services {
            top: -190px;
        }*/
  }
  .site-header .wrapper {
    height: 100%;
  }
  .site-header .site-branding {
    height: 75px;
  }
  .site-header nav.nav-primary ul.nav-primary-list li a {
    padding-top: 1vh !important;
    padding-bottom: 1vh !important;
  }
  .site-header nav.nav-primary ul.nav-primary-list li p {
    padding-top: 1vh !important;
    padding-bottom: 1vh !important;
  }
  .site-header nav.nav-primary ul.nav-primary-list ul.active.auto-services li {
    height: 100px !important;
  }
  .site-header nav.nav-primary ul.nav-secondary-list li a {
    padding-top: 0.5vh !important;
    padding-bottom: 0.5vh !important;
  }
  .site-header nav.nav-primary ul.nav-primary-list li:first-child a {
    padding-top: 13%;
  }
  .site-header nav.nav-primary ul.nav-primary-list li:last-child a {
    padding-bottom: 38px;
  }
  .site-header nav.nav-primary ul.nav-primary-list [class^="icon-"],
  .site-header nav.nav-primary ul.nav-primary-list [class*=" icon-"] {
    font-size: 5.5vh;
  }
  .site-header nav.nav-primary ul.nav-primary-list .icon-team-valvoline-updated {
    font-size: 9.5vh;
    line-height: 0.5;
  }
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
  .site-header {
    height: 100%;
  }
  .site-header nav.nav-primary ul li a {
    padding-top: 5%;
    padding-bottom: 5%;
  }
  .site-header nav.nav-primary ul.nav-primary-list li:first-child a,
  .site-header nav.nav-primary ul.nav-primary-list li:last-child a {
    padding-top: 10%;
    padding-bottom: 10%;
  }
  .site-header nav.nav-primary ul.nav-primary-list [class^="icon-"],
  .site-header nav.nav-primary ul.nav-primary-list [class*=" icon-"] {
    font-size: 400%;
  }
  .site-header nav.nav-primary ul.nav-primary-list .icon-team-valvoline-updated {
    font-size: 9.5vh;
    line-height: 0.5;
  }
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
  .site-header nav.nav-primary ul li a {
    padding-top: 12%;
    padding-bottom: 12%;
  }
  .site-header nav.nav-primary ul.nav-primary-list li:first-child a,
  .site-header nav.nav-primary ul.nav-primary-list li:last-child a {
    padding-top: 15%;
    padding-bottom: 15%;
  }
  .site-header nav.nav-primary ul.nav-primary-list [class^="icon-"],
  .site-header nav.nav-primary ul.nav-primary-list [class*=" icon-"] {
    font-size: 350%;
  }
  .site-header nav.nav-primary ul.nav-primary-list .icon-team-valvoline-updated {
    font-size: 6.5vh;
    line-height: 0.5;
  }
}
.site-header .nav-primary-list .sub-nav.products-flyout img {
  width: 94px;
}
.cookie-nav-container {
  position: fixed;
  width: 100%;
  max-width: 1440px;
  z-index: 1000;
  top: 0;
  left: 0;
}
.cookie-nav-container .cookie-notification {
  position: relative;
  background: #000;
  display: none;
  color: #fff;
  font-size: 14px;
  z-index: 10000;
  padding: 30px 50px;
  margin: 0;
  text-align: center;
}
.cookie-nav-container .cookie-notification a {
  color: #fff;
}
.cookie-nav-container .cookie-notification .close-btn {
  border: solid 1px white;
  border-radius: 20px;
  padding: 5px 10px;
  color: #fff;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 10px;
}
.cookie-nav-container .cookie-notification.alert {
  background-color: #df2625;
}
.cookie-nav-container .cookie-notification.alert h4 {
  color: #fff;
}
/* Header Utility Nav */
.header-utility-nav {
  display: none;
}
@media all and (min-width: 43.75em) {
  .header-utility-nav {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 500;
  }
  .header-utility-nav form#top-search {
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin-top: 2px;
    margin-right: 8px;
    float: right;
  }
  .header-utility-nav form#top-search input {
    background-color: rgba(51, 133, 168, 0.6);
    border: 1px solid #3385a8;
    color: #fff;
    font-family: 'Helvetica', Arial, sans-serif;
    font-weight: 400;
    font-size: 12px;
    font-style: normal;
    height: 34px;
    line-height: 1.5;
    text-transform: uppercase;
    width: 160px;
  }
  .header-utility-nav form#top-search button {
    background-color: transparent;
    border: 0;
    color: #fff;
    position: absolute;
    right: 0;
    top: 7px;
    width: 28px;
    height: 20px;
    padding: 0;
  }
  .header-utility-nav form#top-search button:before {
    content: "\e60b";
    position: absolute;
    right: 10px;
    top: 0;
    display: block;
    font-size: 17px;
    font-family: 'icomoon';
    line-height: 1;
  }
  .header-utility-nav form#top-search ::-webkit-input-placeholder {
    color: #fff;
    font-size: 12px;
    font-style: normal;
    text-transform: uppercase;
  }
  .header-utility-nav form#top-search :-moz-placeholder {
    /* Firefox 18- */
    color: #fff;
    font-size: 12px;
    font-style: normal;
    text-transform: uppercase;
  }
  .header-utility-nav form#top-search ::-moz-placeholder {
    /* Firefox 19+ */
    color: #fff;
    font-size: 12px;
    font-style: normal;
    text-transform: uppercase;
  }
  .header-utility-nav form#top-search :-ms-input-placeholder {
    color: #fff;
    font-size: 12px;
    font-style: normal;
    text-transform: uppercase;
  }
  .header-utility-nav .partner-login {
    background-color: #3385a8;
    border-radius: 0;
    border: 0;
    color: #fff;
    display: inline-block;
    font-family: 'Helvetica', Arial, sans-serif;
    font-weight: 400;
    font-size: 12px;
    margin: 0;
    text-decoration: none;
    width: 170px;
    float: right;
  }
}
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}
[data-tooltip]:before {
  position: absolute;
  top: 125%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #EFEFEF;
  color: #000;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  text-transform: none;
}
.filter-results [data-tooltip]:before {
  background-color: #fff;
  padding: 10px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 0 0 1px #60add8;
  box-shadow: 0 0 0 1px #60add8;
}
[data-tooltip]:after {
  position: absolute;
  top: 110%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-bottom: 5px solid #EFEFEF;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}
.filter-results [data-tooltip]:after {
  border-bottom: 5px solid #fff;
  -webkit-box-shadow: 0 0 0 1px #60add8;
  box-shadow: 0 0 0 1px #60add8;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
a[data-tooltip-border] {
  position: relative;
  cursor: pointer;
  color: #000;
  display: inline-block;
}
a[data-tooltip-border] > i {
  text-align: center;
  line-height: 150%;
  color: black;
  font-style: normal;
  text-transform: none;
  text-shadow: white 0 1px;
  background: #fff;
  background-clip: padding-box;
  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
  border: 1px solid #60add8;
  border-radius: 3px;
  position: absolute;
  width: 200px;
  left: 50%;
  margin-left: 0;
  padding: 10px;
  top: 100%;
  margin-top: 15px;
  visibility: hidden;
  opacity: 0;
  z-index: 100;
  -webkit-transition: opacity 0.5s linear;
  -moz-transition: opacity 0.5s linear;
  -ms-transition: opacity 0.5s linear;
  -o-transition: opacity 0.5s linear;
  transition: opacity 0.5s linear;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
a[data-tooltip-border] > i:before,
a > i:after {
  content: "";
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  bottom: 100%;
  left: 50%;
  margin-left: -10px;
}
a[data-tooltip-border] > i:before {
  border-bottom: 10px solid #60add8;
  margin-bottom: 0;
}
a[data-tooltip-border] > i:after {
  border-bottom: 10px solid #fff;
  margin-bottom: -2px;
  z-index: 1;
}
a[data-tooltip-border]:hover > i {
  visibility: visible;
  opacity: 1;
}
a.align-top[data-tooltip-border] > i {
  bottom: 100%;
  margin-bottom: 15px;
  top: auto;
}
a.align-top[data-tooltip-border] > i:before,
a.align-top > i:after {
  top: 100%;
  bottom: auto;
}
a.align-top[data-tooltip-border] > i:before {
  border-top: 10px solid #60add8;
  margin-top: 0;
  border-bottom: 0;
}
a.align-top[data-tooltip-border] > i:after {
  border-top: 10px solid #fff;
  border-bottom: 0;
  margin-top: -2px;
  z-index: 1;
}
/* Navigation
-------------------------------- */
/* Primary Navigation */
nav.nav-primary {
  clear: both;
  background-color: #2c2c2c;
  font-weight: 400;
  text-align: center;
  margin: 0;
}
@media all and (min-width: 43.75em) {
  nav.nav-primary {
    z-index: 500;
    position: relative;
  }
}
nav.nav-primary ul {
  border-bottom: 1px solid #525252;
}
@media all and (min-width: 43.75em) {
  nav.nav-primary ul {
    text-align: left;
  }
}
nav.nav-primary ul li {
  margin-left: 0;
  border: 0;
  display: block;
  border-top: 1px solid #525252;
  text-align: left;
}
nav.nav-primary ul li a {
  color: #EFEFEF;
  text-transform: uppercase;
}
@media all and (min-width: 43.75em) {
  nav.nav-primary ul li a {
    padding-top: 15%;
    padding-bottom: 15%;
    text-align: center;
  }
}
@media all and (min-width: 43.75em) {
  nav.nav-primary ul li {
    background-image: none;
    border-top: 0;
    width: 100%;
  }
  nav.nav-primary ul li.current > a {
    background-image: none;
  }
  nav.nav-primary ul li.current > a [class^="icon-"],
  nav.nav-primary ul li.current > a [class*=" icon-"] {
    color: #d20017;
  }
}
nav.nav-primary ul.nav-primary-list {
  /* Popover for above mobile */
}
@media all and (min-width: 43.75em) {
  nav.nav-primary ul.nav-primary-list {
    z-index: 600;
    position: relative;
  }
}
nav.nav-primary ul.nav-primary-list li a {
  font-weight: 400;
  letter-spacing: 0.05em;
  position: relative;
}
nav.nav-primary ul.nav-primary-list li a:hover [class^="icon-"],
nav.nav-primary ul.nav-primary-list li a:hover [class*=" icon-"] {
  color: #d20017;
}
nav.nav-primary ul.nav-primary-list li a.active {
  color: #d20017;
}
@media all and (min-width: 43.75em) {
  nav.nav-primary ul.nav-primary-list li a.active {
    color: #051754;
  }
}
nav.nav-primary ul.nav-primary-list li a.active [class^="icon-"],
nav.nav-primary ul.nav-primary-list li a.active [class*=" icon-"] {
  color: #d20017;
}
nav.nav-primary ul.nav-primary-list li a:after {
  position: absolute;
  right: 20px;
  bottom: 8px;
  content: "\e610";
  display: block;
  font-size: 24px;
  color: #fff;
  -wekbkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media all and (min-width: 22em) {
  nav.nav-primary ul.nav-primary-list li a:after {
    bottom: 12px;
  }
}
@media all and (min-width: 43.75em) {
  nav.nav-primary ul.nav-primary-list li a.stacked-title {
    padding: 10%;
  }
  nav.nav-primary ul.nav-primary-list li a:after {
    display: none;
  }
  nav.nav-primary ul.nav-primary-list li a#teamValvolineNav {
    font-size: 0;
  }
}
@media all and (min-width: 43.75em) {
  nav.nav-primary ul.nav-primary-list li {
    position: relative;
  }
}
nav.nav-primary ul.nav-primary-list li:first-child {
  border-width: 0;
}
@media all and (min-width: 43.75em) {
  nav.nav-primary ul.nav-primary-list li:first-child a {
    padding-top: 20px;
  }
}
@media all and (min-width: 43.75em) {
  nav.nav-primary ul.nav-primary-list li:last-child a {
    margin-bottom: 10px;
    padding-bottom: 28px;
  }
}
nav.nav-primary ul.nav-primary-list [class^="icon-"],
nav.nav-primary ul.nav-primary-list [class*=" icon-"] {
  display: none;
}
@media all and (min-width: 43.75em) {
  nav.nav-primary ul.nav-primary-list [class^="icon-"],
  nav.nav-primary ul.nav-primary-list [class*=" icon-"] {
    font-size: 450%;
    display: block;
    text-align: center;
  }
  nav.nav-primary ul.nav-primary-list .icon-team-valvoline-updated {
    font-size: 5.5vh;
    line-height: 0.8;
  }
}
@media all and (min-width: 56.25em) {
  nav.nav-primary ul.nav-primary-list [class^="icon-"],
  nav.nav-primary ul.nav-primary-list [class*=" icon-"] {
    font-size: 44px;
    line-height: 1.2;
  }
  nav.nav-primary ul.nav-primary-list .icon-team-valvoline-updated {
    font-size: 72px;
    line-height: 0.8;
  }
  nav.nav-primary ul.nav-primary-list span.icon-car {
    line-height: 0.85;
  }
}
nav.nav-primary ul.nav-primary-list li ul {
  display: none;
}
nav.nav-primary ul.nav-primary-list li.inline-mobile-links a.active:after {
  -wekbkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
nav.nav-primary ul.nav-primary-list li.inline-mobile-links ul.active {
  display: block;
}
nav.nav-primary ul.nav-primary-list li.inline-mobile-links ul.active [class^="icon-"],
nav.nav-primary ul.nav-primary-list li.inline-mobile-links ul.active [class*=" icon-"] {
  display: block;
  font-size: 30px;
}
@media all and (min-width: 43.75em) {
  nav.nav-primary ul.nav-primary-list li.inline-mobile-links ul.active [class^="icon-"],
  nav.nav-primary ul.nav-primary-list li.inline-mobile-links ul.active [class*=" icon-"] {
    font-size: 450%;
  }
}
@media all and (min-width: 56.25em) {
  nav.nav-primary ul.nav-primary-list li.inline-mobile-links ul.active [class^="icon-"],
  nav.nav-primary ul.nav-primary-list li.inline-mobile-links ul.active [class*=" icon-"] {
    font-size: 44px;
  }
}
nav.nav-primary ul.nav-primary-list li.inline-mobile-links ul.active.three-across {
  background-color: #fff;
  border: none;
  border-width: 0 1px 1px 0;
  width: 100%;
}
@media all and (min-width: 43.75em) {
  nav.nav-primary ul.nav-primary-list li.inline-mobile-links ul.active.three-across {
    max-width: 391px;
    top: 0;
    width: 391px;
  }
}
nav.nav-primary ul.nav-primary-list li.inline-mobile-links ul.active.three-across li {
  background-color: #fff;
  border-right: 1px solid #e8e6e7;
  border-bottom: none;
  border-top: none;
  float: left;
  width: 33.3%;
  height: 70px;
}
@media all and (min-width: 43.75em) {
  nav.nav-primary ul.nav-primary-list li.inline-mobile-links ul.active.three-across li {
    width: 130px;
    height: 120px;
  }
}
nav.nav-primary ul.nav-primary-list li.inline-mobile-links ul.active.three-across li:last-child {
  border-right: none;
}
nav.nav-primary ul.nav-primary-list li.inline-mobile-links ul.active.three-across li h3 {
  font-size: 1em;
  font-weight: 400;
}
nav.nav-primary ul.nav-primary-list li.inline-mobile-links ul.active.three-across li a {
  color: #1c76bd;
  text-align: center;
}
nav.nav-primary ul.nav-primary-list li.inline-mobile-links ul.active.three-across li a span.icon-all-services {
  font-size: 38px;
}
nav.nav-primary ul.nav-primary-list li.inline-mobile-links ul.active.three-across li a:after {
  content: none;
}
nav.nav-primary ul.nav-primary-list li.inline-mobile-links ul.active.three-across.valvoline-social li a {
  color: #2f2e2e;
}
nav.nav-primary ul.nav-primary-list li.inline-mobile-links ul.active.three-across.valvoline-social .icon-facebook2 {
  color: #3b579d;
}
nav.nav-primary ul.nav-primary-list li.inline-mobile-links ul.active.three-across.valvoline-social .icon-twitter {
  color: #55acee;
}
nav.nav-primary ul.nav-primary-list li.inline-mobile-links ul.active.three-across.valvoline-social .icon-youtube {
  color: #d32322;
}
@media all and (min-width: 43.75em) {
  nav.nav-primary ul.nav-primary-list {
    /*Hide dropdown links until they are needed*/
  }
  nav.nav-primary ul.nav-primary-list li ul {
    background: #fff;
    width: 175%;
    max-width: 330px;
    padding-left: 0;
  }
  nav.nav-primary ul.nav-primary-list ul.active {
    display: block;
    position: absolute;
    left: 128px;
    top: -63px;
    -webkit-box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.6);
    box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.6);
    /*Make dropdown links vertical*/
  }
  nav.nav-primary ul.nav-primary-list ul.active li {
    background-color: #fff;
    border-bottom: 1px solid #e8e6e7;
    display: block;
    float: left;
    height: 125px;
    width: 49%;
    /*&:last-child,
                        &:nth-last-child(2) {
                            border-bottom: 0;
                        }/*

                        /*Prevent text wrapping*/
  }
  nav.nav-primary ul.nav-primary-list ul.active li img {
    display: block;
    margin: 0 auto;
    width: 100%;
  }
  nav.nav-primary ul.nav-primary-list ul.active li:first-child {
    border-bottom: 1px solid #e8e6e7;
  }
  nav.nav-primary ul.nav-primary-list ul.active li:nth-child(even) {
    border-right: 1px solid #e8e6e7;
  }
  nav.nav-primary ul.nav-primary-list ul.active li a {
    color: #666465;
    width: auto;
    min-width: 100px;
    padding: 20px 20px;
    /*Display the dropdown on hover*/
  }
  nav.nav-primary ul.nav-primary-list ul.active li a:hover + .hidden {
    display: block;
    position: fixed;
    left: 175px;
    top: 0;
  }
  nav.nav-primary ul.nav-primary-list ul.active.auto-services {
    background-color: #fff;
    border: 1px solid #e8e6e7;
    border-width: 0 1px 1px 0;
    max-width: 391px;
    width: 391px;
    top: -100px;
    /*-202px*/
  }
  nav.nav-primary ul.nav-primary-list ul.active.auto-services .flyout-link a:first-child {
    border-bottom: 3px solid #fff;
  }
  nav.nav-primary ul.nav-primary-list ul.active.auto-services .flyout-link p {
    border-bottom: 1px solid #e8e6e7;
    color: #000;
    font-size: 1em;
    margin-bottom: 0;
    padding: 20px 2%;
    text-align: center;
  }
  nav.nav-primary ul.nav-primary-list ul.active.auto-services li {
    background-color: #fff;
    border-right: 1px solid #e8e6e7;
    border-bottom: none;
    width: 130px;
    height: 120px;
  }
  nav.nav-primary ul.nav-primary-list ul.active.auto-services li:nth-child(3n+4) {
    border-right: none;
  }
  nav.nav-primary ul.nav-primary-list ul.active.auto-services li:nth-child(-n+13) {
    border-bottom: 1px solid #e8e6e7;
  }
  nav.nav-primary ul.nav-primary-list ul.active.auto-services li h3 {
    font-size: 1em;
    font-weight: 400;
  }
  nav.nav-primary ul.nav-primary-list ul.active.auto-services li a {
    color: #1c76bd;
  }
  nav.nav-primary ul.nav-primary-list ul.active.auto-services li a span {
    font-size: 600%;
  }
  nav.nav-primary ul.nav-primary-list ul.active.auto-services li a span.icon-all-services {
    font-size: 38px;
  }
  nav.nav-primary ul.nav-primary-list ul.active.auto-services li span.recommended-icon {
    color: #3f3f3f;
    display: block;
    font-size: 175%;
    margin-bottom: 20px;
    position: absolute;
    top: 1px;
    right: 1px;
  }
}
@media all and (min-width: 56.25em) {
  nav.nav-primary ul.nav-primary-list li ul {
    width: 340px;
    max-width: 340px;
  }
  nav.nav-primary ul.nav-primary-list ul.active {
    /*&.auto-services {
                        top: -222px;
                    }*/
  }
  nav.nav-primary ul.nav-primary-list ul.active li {
    /*height: 165px;
                        width: 170px;*/
    position: relative;
  }
  nav.nav-primary ul.nav-primary-list ul.active li a {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0;
    width: 75%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  nav.nav-primary ul.nav-primary-list ul.active li img {
    max-width: 100%;
    width: auto;
  }
}
nav.nav-primary ul.nav-primary-list div.flyout-link a {
  background-color: #EFEFEF;
  border-bottom: 1px solid #e8e6e7;
  color: #3f3f3f;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 1.15em;
  font-weight: 400;
  letter-spacing: 0;
  padding: 20px;
  position: relative;
  text-align: left;
}
nav.nav-primary ul.nav-primary-list div.flyout-link a:hover {
  background-color: #ddd;
}
nav.nav-primary ul.nav-primary-list div.flyout-link a:after {
  position: absolute;
  right: 5px;
  top: 12px;
  content: "\e610";
  display: block;
  font-size: 20px;
  color: #bababa;
  -wekbkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
nav.nav-primary ul.nav-secondary-list {
  background-color: #323232;
  padding: 0;
}
@media all and (min-width: 43.75em) {
  nav.nav-primary ul.nav-secondary-list {
    border-top: 1px solid #bdbdbd;
    background-color: transparent;
    padding: 10px 0 0;
    margin: 0 10px 15px;
  }
}
nav.nav-primary ul.nav-secondary-list li {
  background-image: none;
  border: 0;
  padding: 0;
}
nav.nav-primary ul.nav-secondary-list li.partner-login {
  background-color: #1c76bd;
}
nav.nav-primary ul.nav-secondary-list li.partner-login a {
  text-transform: uppercase;
}
nav.nav-primary ul.nav-secondary-list li.current a {
  background-image: none;
  color: #d20017;
}
nav.nav-primary ul.nav-secondary-list li a {
  padding: 0.5em 0.8em 0.4em;
}
@media all and (min-width: 30em) {
  nav.nav-primary ul.nav-secondary-list li a {
    padding: 1em;
  }
}
@media all and (min-width: 43.75em) {
  nav.nav-primary ul.nav-secondary-list li a {
    padding: 0.5em 1em;
  }
}
nav.nav-primary ul.nav-secondary-list li a:hover {
  color: #d20017;
  background-color: transparent;
}
@media all and (min-width: 43.75em) {
  nav.nav-primary ul.nav-secondary-list li.partner-login {
    display: none;
  }
}
nav.nav-primary ul.nav-secondary-list a {
  font-size: 1em;
  font-weight: normal;
  text-transform: none;
}
@media all and (min-width: 43.75em) {
  nav.nav-primary ul.nav-secondary-list a {
    margin-left: -10px;
    margin-right: -10px;
    padding: 4% 12%;
    text-align: left;
  }
}
nav.nav-primary ul.nav-secondary-list a:hover {
  background-color: #f2f0f1;
  color: #d20017;
}
nav.nav-primary ul.nav-secondary-list a[data-effect="st-effect-2"]:hover {
  background-color: #000;
}
.st-menu-open nav.nav-primary ul.nav-secondary-list a[data-effect="st-effect-2"] {
  background-color: #000;
}
nav.nav-primary .selectricWrapper .selectric {
  border-radius: 4px;
}
nav.nav-primary .selectricWrapper.selectricOpen .selectric {
  background-color: #000;
}
nav.nav-primary a {
  color: #333;
  padding: 0.8em;
  font-size: 0.9em;
  display: block;
  text-decoration: none;
  border: 0;
}
@media all and (min-width: 22em) {
  nav.nav-primary a {
    padding: 1em;
    font-size: 1em;
  }
}
@media all and (min-width: 43.75em) {
  nav.nav-primary a {
    /*font-size: 0.7528125075282em;*/
    font-size: 0.786em;
    padding: 1.25em;
  }
}
@media all and (min-width: 43.75em) {
  nav.nav-primary {
    background-color: transparent;
    margin: 0 0 10px;
    clear: none;
  }
  nav.nav-primary ul {
    margin: 0;
    border-bottom: 0;
  }
  nav.nav-primary li {
    border-top: 0;
    display: inline-block;
  }
  nav.nav-primary a {
    padding: 7px;
  }
  nav.nav-primary a.active {
    background-color: #f2f0f1;
  }
}
/* Toggle Slidebar */
.st-menu {
  width: 180px;
}
@media all and (min-width: 43.75em) {
  .st-menu {
    width: 280px;
  }
}
.st-menu [class^="icon-"],
.st-menu [class*=" icon-"] {
  display: none;
}
@media all and (min-width: 43.75em) {
  .st-menu [class^="icon-"],
  .st-menu [class*=" icon-"] {
    display: inline-block;
    font-size: 350%;
    padding-right: 15px;
    text-align: left;
    vertical-align: middle;
  }
}
.st-menu a {
  color: #EFEFEF;
  font-size: 0.8em;
  text-align: right;
  text-decoration: none;
  text-transform: none;
}
@media all and (min-width: 43.75em) {
  .st-menu a {
    text-align: left;
  }
}
.st-menu a [class^=icon-] {
  color: #7d7e7e;
}
.st-menu a:hover {
  color: #fff;
}
.st-menu a:hover [class^=icon-] {
  color: #fff;
}
/* Effect 2: Reveal */
.st-pusher {
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
}
.homepage .st-pusher {
  z-index: 3000;
}
.st-effect-2.st-menu-open .st-pusher {
  -webkit-transform: translate3d(180px, 0, 0);
  transform: translate3d(180px, 0, 0);
}
@media all and (min-width: 43.75em) {
  .st-effect-2.st-menu-open .st-pusher {
    -webkit-transform: none;
    transform: none;
    left: 280px;
  }
}
/* Site Content */
.site-content {
  background-color: #fff;
  margin-top: 50px;
}
@media all and (min-width: 43.75em) {
  .site-content {
    margin-left: 128px;
    margin-top: 0;
    z-index: 0;
    position: relative;
  }
  .cookie-notification-active .site-content {
    /*padding-top:81px;*/
  }
}
/* Breadcrumb Navigation */
.page-utility-wrapper {
  margin-bottom: 0;
  padding: 0 22px;
}
@media all and (min-width: 43.75em) {
  .page-utility-wrapper {
    padding: 0 2%;
  }
}
@media all and (min-width: 43.75em) {
  .internal .page-utility-wrapper.icons-below {
    margin-bottom: 0;
  }
}
@media all and (min-width: 43.75em) {
  .utility-wrapper {
    margin-bottom: 20px;
  }
}
@media all and (min-width: 43.75em) {
  .social-icons .utility-wrapper .page-utility-wrapper {
    float: left;
  }
}
.social-icons .utility-wrapper .content-utility-nav {
  position: relative;
}
@media all and (min-width: 43.75em) {
  .social-icons .utility-wrapper .content-utility-nav {
    float: right;
    padding-right: 2%;
    margin-bottom: 0;
    padding-top: 1.2em;
  }
}
@media all and (min-width: 50em) {
  .social-icons .utility-wrapper .content-utility-nav {
    padding-right: 28%;
  }
}
@media all and (min-width: 68.75em) {
  .social-icons .utility-wrapper .content-utility-nav {
    padding-right: 18%;
  }
}
@media all and (min-width: 50em) {
  .social-icons.absolute-sidebar .content-utility-nav {
    padding-right: 30%;
  }
}
@media all and (min-width: 68.75em) {
  .social-icons.absolute-sidebar .content-utility-nav {
    padding-right: 24%;
  }
}
.social-icons.history .utility-wrapper .content-utility-nav {
  padding-right: 35%;
}
.social-icons.history .utility-wrapper .content-utility-nav a {
  padding-right: 0;
}
.page-content {
  text-align: left;
}
@media all and (min-width: 43.75em) {
  .page-content {
    position: relative;
  }
}
.internal .page-content,
.products-landing .page-content {
  padding: 1.5em 0;
}
@media all and (min-width: 43.75em) {
  .internal .page-content,
  .products-landing .page-content {
    padding-top: 3.75em;
  }
}
.nav-breadcrumb {
  font-size: 0.75em;
  line-height: 1.4;
  margin: 0 0 0.4em;
  color: #3f3f3f;
  text-transform: uppercase;
  display: none;
}
@media all and (min-width: 43.75em) {
  .nav-breadcrumb {
    display: block;
  }
}
.nav-breadcrumb a {
  color: #d20017;
  text-decoration: none;
  text-transform: uppercase;
}
.nav-breadcrumb b {
  font-size: 1em;
  margin: 0 0.3em;
}
.back-to-top {
  margin: 2.5em 0 1.5em;
  display: none;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 100;
}
.back-to-top a {
  background: url('/~/media/ValvolineUS/Images/back2top-sm.png') 0 0 no-repeat;
  width: 45px;
  height: 47px;
  color: #333333;
  display: block;
  float: right;
  font-size: 0.75em;
  padding: 0;
  text-decoration: none;
  text-indent: -9999px;
}
@media all and (min-width: 43.75em) {
  .back-to-top {
    display: none !important;
    /* hide on tablet and up, important so we don't have to have size specific JS for Back to Top reveal */
  }
}
/* Credit box for documentation */
.credit-box {
  display: inline-block;
  margin: 0 0 1.5em;
  padding: 5px 15px 5px 5px;
  background-color: #e6e6e6;
  border: 1px solid #b3b3b3;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.credit-box h3 {
  font-size: 1em;
  margin: 0 0 0.25em;
  padding: 0 0 0.3em;
  border-bottom: 1px solid #b3b3b3;
}
.credit-box img {
  float: left;
  margin: 0 7px 0 0;
}
.credit-box .body {
  float: right;
  margin-top: 20px;
}
/* Main
-------------------------------- */
main {
  font-size: 1em;
  /*line-height: @line-height-base;*/
  /*font-size: 1.0625em;*/
  line-height: 1.5;
  margin: 0 0 1.5em;
  padding: 0 22px;
}
@media all and (min-width: 50em) {
  main {
    padding: 0;
  }
}
@media all and (min-width: 50em) {
  .site-content main {
    border-right: 1px solid #EFEFEF;
    padding-left: 2%;
    padding-right: 2.25%;
    width: 70%;
    margin-bottom: 150px;
    /* Adding margin-bottom 0 for those without footers */
  }
}
@media all and (min-width: 68.75em) {
  .site-content main {
    width: 76%;
  }
}
main .article-meta {
  font-size: 0.875em;
  color: #777;
}
main ul {
  padding-left: 35px;
  list-style: disc;
}
main ul ul {
  margin-bottom: 0;
  list-style: square;
}
main ol {
  padding-left: 35px;
}
main dt {
  font-weight: 700;
}
main dd {
  margin-bottom: 0.75em;
  padding-left: 0.75em;
}
main .intro {
  font-size: 1em;
  line-height: 1.65;
}
main blockquote {
  border-left: 5px solid #bbb;
  font-style: italic;
  padding: 0 60px 0 30px;
}
main blockquote p {
  margin-bottom: 0.75em;
}
main .image-gallery {
  display: inline-block;
  margin: 0 0 1.5em;
}
main .image-gallery img {
  display: block;
  padding: 3px;
}
@media all and (min-width: 43.75em) {
  main .image-gallery img {
    display: inline;
    float: left;
    padding: 2px 4px;
  }
}
/* Product List */
body.products .page-utility-wrapper {
  padding: 0 22px;
  margin-bottom: 20px;
}
body.products .header-banner-product-wrapper {
  margin-bottom: 0;
}
.product-grid-list {
  border-top: 1px solid #e1e1e1;
  padding-left: 0;
}
@media screen and (min-width: 43.75em) {
  .product-grid-list {
    border-top: none;
  }
}
.product-grid-list li {
  display: inline-block;
  float: left;
  width: 49%;
  border-bottom: 1px solid #e1e1e1;
}
.product-grid-list li:nth-child(odd) {
  border-right: 1px solid #e1e1e1;
}
@media screen and (min-width: 43.75em) {
  .product-grid-list li {
    border: none;
    width: auto;
  }
  .product-grid-list li:nth-child(odd) {
    border-right: none;
  }
}
.product-grid-list li a {
  color: #666;
  display: block;
  font-size: 11px;
  padding: 0 2%;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  min-height: 200px;
}
.product-grid-list li a:hover {
  text-decoration: underline;
}
.product-grid-list li a img {
  display: block;
}
.grid.product-grid-list {
  margin-top: 40px;
  border-top: 0;
  position: relative;
}
.grid.product-grid-list div {
  text-align: center;
}
.grid.product-grid-list a {
  color: #666;
  display: block;
  font-size: 11px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
.grid.product-grid-list a:hover {
  text-decoration: underline;
}
.grid.product-grid-list a img {
  display: block;
  margin: 0 auto;
  width: 75%;
}
@media screen and (min-width: 43.75em) {
  .grid.product-grid-list a img {
    width: auto;
  }
}
.grid.product-grid-list a.btn {
  max-width: 170px;
  margin: 0 auto;
  min-height: 0;
  text-decoration: none;
}
.grid.product-grid-list a.btn:hover {
  text-decoration: none;
}
.grid.product-grid-list a.btn-gray {
  color: #3f3f3f;
}
.grid.product-grid-list a.btn-gray:hover {
  color: black;
}
.grid.product-grid-list .view-all-products {
  padding: 20px 0 10px;
}
@media screen and (min-width: 43.75em) {
  .grid.product-grid-list .view-all-products {
    padding: 0;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -18px;
  }
}
.grid.bottom-content {
  font-size: 0.9em;
}
/* Product Recommender Widget */
.product-recommender {
  background: #EFEFEF;
  margin: 1.5em 0;
  padding: 1.5em;
  position: relative;
}
@media screen and (min-width: 43.75em) {
  .product-recommender {
    margin-top: 3em;
    background-image: url('/~/media/ValvolineUS/Images/about-us/product-recommender-bkg.png');
    background-position: right;
    background-repeat: no-repeat;
  }
}
.product-recommender h2 {
  margin-top: 0;
}
.product-recommender .form-group {
  display: inline-block;
  width: 100%;
}
.product-recommender .form-group:last-child {
  margin-bottom: 0;
}
.product-recommender .form-group label {
  display: none;
}
.product-recommender .form-group select {
  width: 100%;
  height: 35px;
  margin-bottom: 10px;
}
.product-recommender .form-group .selectricWrapper {
  width: auto;
}
.product-recommender .form-group .selectricWrapper .selectric {
  height: 2.643em;
}
.product-recommender .form-group .selectricWrapper .selectric .label {
  line-height: 1.85em;
}
/* Icon Lists*/
.icon-list {
  padding-left: 0;
}
@media screen and (min-width: 43.75em) {
  .icon-list {
    margin-top: 30px;
  }
}
.icon-list .icon-link {
  float: left;
  margin-left: 1.73913043%;
  padding-bottom: 2.813em;
  width: 48%;
}
.icon-list .icon-link:first-child {
  margin-left: 0!important;
}
@media screen and (min-width: 43.75em) {
  .icon-list .icon-link.one-third {
    width: 32.17391304%;
  }
  .icon-list .icon-link.one-third:nth-child(3n+1) {
    margin-left: 0!important;
  }
}
@media screen and (min-width: 43.75em) {
  .icon-list .icon-link.one-fourth {
    width: 23.69565217%;
  }
}
.icon-list .icon-link a {
  color: #1c76bd;
  display: block;
  min-height: 145px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
.icon-list .icon-link a:hover {
  text-decoration: none;
}
.icon-list .icon-link a span {
  font-size: 450%;
  display: block;
  margin-bottom: 20px;
}
.icon-list .icon-link a h3 {
  color: #7d7e7e;
  font-size: 0.9em;
}
/* Serive Locator */
.service-locator fieldset {
  border: 0;
  padding: 0;
}
.service-locator fieldset input {
  display: block;
}
.service-locator fieldset input[type="number"] {
  width: 100%;
  margin-bottom: 20px;
}
.service-locator fieldset input[type="submit"] {
  display: inline-block;
  width: auto;
}
.recommended-services .service-locator fieldset input[type="submit"] {
  display: block;
}
.service-locator fieldset input.zipcode {
  width: 65%;
  margin-bottom: 1em;
  margin-top: 0;
  height: 37px;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-block;
  vertical-align: top;
}
.recommended-services .service-locator fieldset input.zipcode {
  display: block;
  width: auto;
  vertical-align: baseline;
}
.testimonials-wrapper {
  margin-top: 10px;
}
@media all and (min-width: 43.75em) {
  .testimonials-wrapper {
    margin-top: 20px;
  }
}
.testimonials-wrapper .testimonial {
  border-bottom: solid 1px #cdcdcd;
  margin-bottom: 20px;
}
.testimonials-wrapper .testimonial p.quoter {
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 600;
}
/* Content below columns for desktop, in middle for mobile.
-------------------------------- */
.lower-content-wrapper {
  padding: 0 22px;
}
@media all and (min-width: 50em) {
  .lower-content-wrapper {
    margin-bottom: 50px;
  }
}
@media all and (min-width: 43.75em) {
  .lower-content-wrapper .widget {
    display: inline-block;
    float: left;
    padding-right: 3%;
    width: 49.5%;
  }
}
@media all and (min-width: 68.75em) {
  .lower-content-wrapper .widget img {
    float: left;
    max-width: 180px;
    padding-right: 10px;
    margin-bottom: 20px;
  }
}
.lower-content-wrapper .widget h4 {
  color: #686767;
  margin-top: 0;
  margin-bottom: 0.4em;
  font-weight: 600;
}
.lower-content-wrapper .widget h4 span {
  font-size: 80%;
  display: block;
}
.lower-content-wrapper .widget p {
  color: #686767;
  font-size: 12px;
  margin-bottom: 0.4em;
  /*@media all and (min-width: @break-m) {
                font-size: 11px;
            }*/
}
.lower-content-wrapper .widget a {
  color: #d20017;
  font-family: 'Helvetica', Arial, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
}
.lower-content-wrapper.full-width {
  padding: 0;
}
.lower-content-wrapper.full-width .show-hide {
  font-size: 1.071em;
}
/* Sidebar
-------------------------------- */
.sidebar {
  font-size: 1em;
  line-height: 1.2;
  margin-bottom: 1.5em;
  padding: 15px 22px 0;
  text-align: left;
}
@media all and (min-width: 50em) {
  .sidebar {
    padding: 0;
  }
}
.sidebar h3,
.sidebar h4 {
  font-size: 1em;
  /*font-weight: 400;*/
  font-weight: 600;
  margin: 0 0 0.5em;
  color: #333333;
}
.sidebar .widget img {
  margin-bottom: 0.4em;
}
.sidebar .widget h4 {
  color: #686767;
  margin-bottom: 0.3em;
}
.sidebar .widget h4 span {
  font-size: 80%;
  display: block;
}
.sidebar .widget p {
  color: #686767;
  font-size: 12px;
  margin-bottom: 0.3em;
  line-height: 1.5;
}
.sidebar .widget a {
  color: #d20017;
  font-family: 'Helvetica', Arial, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
}
.sidebar.filter-results {
  position: relative;
}
/* Widgets */
.widget {
  margin: 0 0 2.5em;
}
.widget p,
.widget ul,
.widget ol,
.widget dl {
  margin-bottom: 1em;
}
.widget.panel {
  background-color: #f1f1f1;
  margin-bottom: 1.5em;
  padding: 10px 10px 5px;
}
.widget.panel h4 {
  background-color: #ccc;
  font-size: 1.1em;
  font-weight: 400;
  margin: -10px -10px 10px;
  padding: 5px 10px;
  display: block;
}
.widget.press-contact {
  background-color: #edecec;
  padding: 15px;
}
.widget.press-contact h4 {
  margin-bottom: 0.5em;
}
.widget.press-contact h5 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 0.1em;
  margin-top: 0.6em;
}
.widget.press-contact p {
  line-height: 14px;
}
.three-across-widget {
  margin-top: 35px;
  margin-bottom: 35px;
}
@media screen and (min-width: 43.75em) {
  .three-across-widget {
    margin-bottom: 2em;
    margin-top: 2em;
  }
}
.three-across-widget .column-wrapper {
  padding: 0 !important;
}
.three-across-widget .column-wrapper .one-third {
  margin-bottom: 22px;
}
@media screen and (min-width: 43.75em) {
  .three-across-widget .column-wrapper .one-third {
    float: none;
    margin-left: 0;
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .three-across-widget .column-wrapper .one-third {
    float: left;
    margin-bottom: 0;
    margin-left: 1.73913043%;
    width: 32.17391304%;
  }
}
.three-across-widget .column-wrapper .one-third:last-child {
  margin-bottom: 0;
}
.three-across-widget .section-wrapper {
  position: relative;
}
@media screen and (min-width: 43.75em) {
  .three-across-widget .section-wrapper {
    min-width: 130px;
  }
}
.three-across-widget div.no-link {
  color: #fff;
  display: block;
  text-decoration: none;
}
.three-across-widget div.no-link img {
  display: block;
  width: 100%;
}
.three-across-widget div.no-link .section-copy {
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  padding: 3% 4%;
  width: 100%;
  text-align: left;
}
.three-across-widget div.no-link .section-copy.top {
  bottom: auto;
  top: 0;
}
.three-across-widget div.no-link .section-copy h4 {
  color: #fff;
}
.three-across-widget div.no-link .section-copy p {
  font-size: 12px;
  margin-bottom: 0.5em;
}
@media screen and (min-width: 70em) {
  .three-across-widget div.no-link .section-copy p {
    font-size: 12.75px;
  }
}
.three-across-widget a {
  color: #fff;
  display: block;
  text-decoration: none;
}
.three-across-widget a:after {
  position: absolute;
  right: 0;
  bottom: 12px;
  content: "\e610";
  display: block;
  font-size: 24px;
  color: #fff;
  -wekbkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.three-across-widget a img {
  display: block;
  width: 100%;
}
.three-across-widget a .section-copy {
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  padding: 3% 4%;
  width: 100%;
  text-align: left;
}
.three-across-widget a .section-copy.top {
  bottom: auto;
  top: 0;
}
.three-across-widget a .section-copy h4 {
  color: #fff;
}
.three-across-widget a .section-copy p {
  font-size: 12px;
  margin-bottom: 0.5em;
}
@media screen and (min-width: 70em) {
  .three-across-widget a .section-copy p {
    font-size: 12.75px;
  }
}
.three-across-widget a .section-copy p.learn-more {
  display: block;
  font-size: 12px;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}
/* Common
-------------------------------- */
.filter-results {
  background-color: #EFEFEF;
}
.outline {
  border: 1px solid #999;
}
.outline-pad {
  padding: 5px;
  border: 1px solid #999;
}
.sidebar .outline-pad {
  padding: 3px;
}
/* Buttons */
@media all and (min-width: 43.75em) {
  input.btn {
    width: auto;
  }
}
/* Colors can be added like this. */
.btn-gray {
  background: #bbb;
  color: #333;
}
.btn-gray:hover,
.btn-gray:focus {
  color: #111;
}
/* Disabled */
.btn-disabled {
  background-color: #eee;
  color: #888;
  padding: 11px 20px;
  cursor: not-allowed;
  -webkit-appearance: none;
}
.btn-disabled:hover,
.btn-disabled:focus {
  background-color: #eee;
  color: #888;
}
/* Transparent */
.btn-transparent {
  border: 1px solid #fff;
  color: #fff;
  background-color: #000000;
  background-color: hsla(0, 0%, 0%, 0.25);
  zoom: 1;
  background-color: transparent\9;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#40000000, endColorstr=#40000000)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#40000000, endColorstr=#40000000);
}
.btn-transparent:hover {
  color: #000;
}
.btn-cancel {
  border: 1px solid #bbb;
  color: #777;
  border-radius: 4px;
}
.show-hide {
  margin-bottom: 3px;
}
.show-hide h3.toggle {
  background-color: #EFEFEF;
  padding: 10px;
}
@media all and (min-width: 43.75em) {
  .show-hide h3.toggle {
    padding: 20px;
  }
}
.show-hide p {
  color: #5f5f5f;
}
.show-hide ul {
  list-style: disc;
  margin-left: 20px;
}
.show-hide ul li {
  color: #5f5f5f;
  line-height: 1.75;
}
.wrapper .show-hide .body {
  margin: 0 2%;
}
@media all and (min-width: 43.75em) {
  .wrapper .show-hide .body {
    margin: 0 4%;
  }
}
.show-hide .toggle {
  margin: 0;
}
.show-hide .toggle.active {
  margin-bottom: 0.5em;
}
.show-hide .toggle [class^="icon-"],
.show-hide .toggle [class*=" icon-"] {
  line-height: 0.75;
  vertical-align: bottom;
}
.people p strong,
.planet p strong {
  color: #09C;
}
/* Footer
-------------------------------- */
.site-footer {
  clear: both;
  color: #86888a;
  font-size: 0.8125em;
  margin: 0 auto;
  min-height: 44px;
  padding: 10px 10px 55px;
  text-align: left;
  z-index: 0;
  position: relative;
  background: url('/~/media/ValvolineUS/Images/footer-since-1866.png') bottom right no-repeat, #ffffff 465px bottom repeat-x;
}
@media all and (min-width: 43.75em) {
  .site-footer {
    background: url('/~/media/ValvolineUS/Images/footer-since-1866.png') bottom right no-repeat, #ffffff 465px bottom repeat-x;
    margin-left: 128px;
    padding: 0px 20px 10px 20px;
  }
}
@media all and (min-width: 1025px) {
  .site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
.site-footer a.privacy-policy {
  background: none;
}
@media all and (min-width: 43.75em) {
  .homepage .site-footer .wrapper {
    display: block;
    margin-left: 148px;
  }
}
.homepage .site-footer .wrapper p {
  margin-bottom: 0.45em;
  padding: 0 10px;
}
@media all and (min-width: 30em) {
  .homepage .site-footer .wrapper p {
    font-size: 10px;
    padding: 0;
  }
}
@media all and (min-width: 68.75em) {
  .homepage .site-footer .wrapper p {
    font-size: 12px;
  }
}
.site-footer ul {
  margin: 0 0 1em;
  text-align: center;
  display: inline-block;
}
.site-footer ul li {
  display: inline-block;
  padding: 0 5px;
}
.site-footer ul li:first-child {
  padding-left: 0;
}
.site-footer .social-icons {
  padding-left: 10px;
}
@media all and (min-width: 43.75em) {
  .site-footer .social-icons {
    padding-top: 10px;
    padding-left: 0;
  }
}
@media all and (min-width: 43.75em) {
  .site-footer .social-icons {
    max-width: 230px;
  }
}
@media all and (min-width: 68.75em) {
  .site-footer .social-icons {
    max-width: none;
  }
}
.site-footer .social-icons a {
  display: inline-block;
  text-decoration: none;
}
.site-footer .social-icons [class^="icon-"],
.site-footer .social-icons [class*=" icon-"] {
  color: #000;
  font-size: 2em;
  padding-right: 20px;
}
.site-footer .social-icons [class^="icon-"]:before,
.site-footer .social-icons [class*=" icon-"]:before {
  display: block;
}
.site-footer p.copyright {
  color: #3f3f3f;
  padding: 5px 10px 0;
  margin-bottom: 0;
}
@media all and (min-width: 43.75em) {
  .site-footer p.copyright {
    padding: 5px 0 0;
    max-width: 350px;
  }
}
@media all and (min-width: 56.25em) {
  .site-footer p.copyright {
    max-width: none;
  }
}
@media all and (min-width: 68.75em) {
  .site-footer p.copyright {
    max-width: none;
  }
}
.site-footer a {
  color: #5a5a5a;
}
.site-footer a:hover,
.site-footer a:focus {
  color: #222;
}
.site-footer a.live-chat {
  display: block;
  background-color: #1b76bd;
  background-image: none;
  color: #fff;
  font-size: 14px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  text-transform: capitalize;
  border-radius: 10px;
  position: absolute;
  top: -15px;
  right: 0;
}
.site-footer a.live-chat span {
  font-size: 1.3em;
  margin-top: 2px;
  padding-right: 4px;
  vertical-align: middle;
}
@media all and (min-width: 43.75em) {
  .site-footer a.live-chat {
    font-size: 1.66666667em;
    height: 54px;
    padding-top: 12px;
    width: 254px;
    top: -5px;
  }
}
@media all and (min-width: 56.25em) {
  .site-footer a.live-chat {
    width: 332px;
    top: -38px;
  }
}
@media all and (min-width: 43.75em) {
  .site-footer .site-copyright {
    float: left;
  }
  .site-footer .nav-utility {
    float: right;
  }
}
/* Filter Results */
.filter-results {
  padding-top: 0.05em;
}
@media all and (min-width: 43.75em) {
  .filter-results {
    padding-top: 0;
  }
}
.filter-results h3,
.filter-results h4 {
  margin: 0;
  text-transform: uppercase;
}
.filter-results h3 a,
.filter-results h4 a {
  color: #000;
  display: block;
  padding: 10px;
  text-decoration: none;
}
@media all and (min-width: 43.75em) {
  .filter-results h3 a,
  .filter-results h4 a {
    font-size: 18px;
    padding: 15px 4%;
  }
}
.filter-results h3 a span.icon-expand-less,
.filter-results h4 a span.icon-expand-less {
  color: #ababab;
  display: inline-block;
  font-size: 150%;
  line-height: 0.8;
  vertical-align: bottom;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.filter-results h3 a.active span.icon-expand-less,
.filter-results h4 a.active span.icon-expand-less {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.filter-options {
  padding: 0 10px;
  width: 100%;
  -webkit-transition: max-height 0.6s, padding 0.6s;
  transition: max-height 0.6s, padding 0.6s;
}
@media all and (min-width: 43.75em) {
  .filter-options {
    padding: 0 5%;
  }
}
.filter-options.hidden {
  max-height: 0;
  overflow: hidden;
}
.filter-options.hidden fieldset,
.filter-options.hidden input,
.filter-options.hidden label {
  display: none;
  padding-bottom: 0 !important;
}
.filter-options.active {
  border-bottom: 1px solid #e1e1e1;
  max-height: 600px;
  padding: 10px;
  overflow: hidden;
}
@media all and (min-width: 43.75em) {
  .filter-options.active {
    padding: 15px 5%;
  }
}
.filter-options .selected-subsections {
  color: #3f3f3f;
  font-size: 11px;
  padding-bottom: 5px;
}
.filter-options .selected-subsections span {
  display: inline-block;
  padding-right: 10px;
}
.filter-options .show-hide .grades-sub ul {
  float: left;
  width: 45%;
  margin-left: 10px;
}
@media all and (min-width: 43.75em) {
  .filter-options .show-hide .grades-sub ul {
    margin-left: -10px;
    width: 60px;
  }
}
@media all and (min-width: 43.75em) {
  .filter-options .show-hide .grades-sub ul.second-list {
    margin-left: 10px;
    width: 88px;
  }
}
/* Tabbed */
.cd-tabs {
  position: relative;
  width: 100%;
  margin: 0;
}
.cd-tabs:after {
  content: "";
  display: table;
  clear: both;
}
.cd-tabs::after {
  /* subtle gradient layer on top right - to indicate it's possible to scroll */
  position: absolute;
  top: 0;
  right: 0;
  height: 60px;
  width: 50px;
  z-index: 1;
  pointer-events: none;
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}
.no-cssgradients .cd-tabs::after {
  display: none;
}
.cd-tabs.is-ended::after {
  /* class added in jQuery - remove the gradient layer when it's no longer possible to scroll */
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.cd-tabs nav {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
@media only screen and (min-width: 60em) {
  .cd-tabs nav {
    position: relative;
    float: none;
    background: transparent;
    box-shadow: none;
  }
}
.cd-tabs-navigation {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cd-tabs-navigation li {
  float: left;
  width: 49%;
  overflow: hidden;
}
@media all and (min-width: 20em) {
  .cd-tabs-navigation li {
    width: auto;
  }
}
.cd-tabs-navigation a {
  position: relative;
  display: block;
  text-align: center;
  font-size: 0.75em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  color: #7d7e7e;
  padding: 12px 1.5em;
  background-color: #e8e8e8;
  border-radius: 10px 10px 0 0;
  border: 1px solid #c8c8c8;
  border-width: 1px 1px 0;
  text-decoration: none;
  text-transform: uppercase;
}
.cd-tabs-navigation a.selected {
  background-color: #ffffff !important;
  border-color: #29324e;
  color: #3f3f3f;
  font-weight: bold;
}
@media all and (min-width: 30em) {
  .cd-tabs-navigation a {
    padding: 12px 2em;
  }
}
.cd-tabs-navigation:after {
  content: "";
  display: table;
  clear: both;
}
.no-touch .cd-tabs-navigation a:hover {
  color: #29324e;
  background-color: rgba(233, 230, 202, 0.3);
}
@media only screen and (min-width: 43.75em) {
  .cd-tabs-navigation a {
    width: auto;
    text-align: left;
  }
}
@media only screen and (min-width: 60em) {
  .cd-tabs-navigation {
    /* tabbed on top on big devices */
    width: auto;
    box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);
  }
  .cd-tabs-navigation a::before {
    top: 50%;
    margin-top: -10px;
    margin-left: 0;
    left: 38px;
  }
}
.filter-wrapper fieldset {
  padding-bottom: 0 !important;
  width: 49%;
  display: inline-block !important;
}
.cd-tabs-content {
  background: #ffffff;
  border-top: 1px solid #e8e8e8;
  margin: 0;
  padding: 0;
}
.cd-tabs-content h4.filter-selection {
  margin: 0;
  text-transform: uppercase;
  font-weight: normal;
  text-align: center;
}
.cd-tabs-content h4.filter-selection a {
  color: #000;
  display: block;
  padding: 10px;
  text-decoration: none;
}
@media all and (min-width: 43.75em) {
  .cd-tabs-content h4.filter-selection a {
    font-size: 18px;
    padding: 15px 4%;
  }
}
.cd-tabs-content h4.filter-selection a span.icon-expand-less {
  color: #ababab;
  display: inline-block;
  font-size: 150%;
  line-height: 0.8;
  vertical-align: bottom;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.cd-tabs-content h4.filter-selection a.active span.icon-expand-less {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.locationslist {
  display: none;
  padding: 0;
  margin: 0;
  padding-bottom: 50px;
}
.locationslist.content {
  padding: 3% 2%;
}
.locationslist.selected {
  display: block;
  -webkit-animation: cd-fade-in 0.5s;
  -moz-animation: cd-fade-in 0.5s;
  animation: cd-fade-in 0.5s;
}
.locationslist.body {
  margin: 0 !important;
}
.locationslist div.location {
  border-bottom: 1px solid #e8e8e8;
  position: relative;
  padding: 15px 30px 15px 65px;
  cursor: pointer;
}
.locationslist div.location:last-child {
  border-bottom: none;
}
.locationslist div.location:after {
  position: absolute;
  right: 30px;
  top: 50%;
  content: "\e610";
  display: block;
  font-size: 32px;
  margin-top: -16px;
  color: #cccccc;
  -wekbkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.locationslist div.location:hover,
.locationslist div.location.active {
  background-color: #fafafa;
}
.locationslist div.location p {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #666666;
  margin-bottom: 0;
}
.locationslist div.location p.location-hours {
  display: none;
}
.locationslist div.location span.pin {
  background: url('/~/media/ValvolineUS/Images/locator-pin.png') 0 0 no-repeat;
  color: #d20017;
  display: block;
  font-weight: 400;
  font-size: 13px;
  width: 25px;
  height: 35px;
  padding: 3px 0px 0;
  text-align: center;
  position: absolute;
  left: 22px;
  top: 50%;
  margin-top: -17px;
}
@media all and (min-width: 43.75em) {
  .locationslist div.location span.pin {
    left: 30px;
  }
}
.locationslist div.location .location-links p {
  font-size: 0.9em;
}
.locationslist div.location .location-links a.get-directions-links {
  display: none;
}
@media all and (min-width: 43.75em) {
  .locationslist div.location .location-links a.get-directions-links {
    display: inline;
  }
}
.locationslist div.location .location-links span.spacer {
  display: none;
}
@media all and (min-width: 43.75em) {
  .locationslist div.location .location-links span.spacer {
    display: inline;
  }
}
#locationContent .grid {
  min-width: 290px;
}
#locationContent .one-half {
  min-width: 140px;
}
#locationContent p {
  font-size: 0.95em;
}
.content {
  padding: 15px 30px;
  display: none;
}
.content.selected {
  display: block;
  -webkit-animation: cd-fade-in 0.5s;
  -moz-animation: cd-fade-in 0.5s;
  animation: cd-fade-in 0.5s;
}
@media only screen and (min-width: 60em) {
  .cd-tabs-content {
    min-height: 0;
  }
}
.content-utility-nav {
  text-align: left;
  margin: 1.429em 14px 0;
}
@media screen and (min-width: 43.75em) {
  .content-utility-nav {
    text-align: right;
    margin: 0 0 1.429em;
  }
}
.content-utility-nav a {
  text-decoration: none;
  padding: 0 0.8em;
  color: #1c76bd;
}
.content-utility-nav a:last-child {
  padding: 0;
}
.content-utility-nav a span[class^="icon-"] {
  padding-right: 0.714em;
  color: #7d7e7e;
  font-size: 115%;
  display: inline;
}
.content-utility-nav a span[class^="icon-"].icon-print {
  font-size: 135%;
}
.content-utility-nav.subscribe {
  margin: 1.429em 12px;
}
.content-utility-nav.subscribe span {
  display: none;
}
@media screen and (min-width: 43.75em) {
  .content-utility-nav.subscribe span {
    display: inline-block;
  }
}
body.in-progress .site-container {
  overflow: visible;
}
@-webkit-keyframes cd-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes cd-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes cd-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#map-canvas {
  min-height: 600px;
}
@media all and (min-width: 56.25em) {
  #map-canvas {
    min-height: 100%;
  }
}
#map-canvas img {
  max-width: none;
}
@media all and (min-width: 43.75em) {
  .popular-searches {
    margin-bottom: 3em;
  }
}
.popular-searches a {
  color: #000;
}
.sidebar .show-hide a {
  display: block;
  text-decoration: none;
  padding-left: 15px;
  border-bottom: 1px solid #ccc;
}
.sidebar .show-hide a:last-child {
  border-bottom: none;
}
.sidebar .show-hide a.active {
  color: #ccc;
  position: relative;
}
.sidebar .show-hide a.active:before {
  position: absolute;
  left: -5px;
  top: 19px;
  content: "\e610";
  display: block;
  font-size: 19px;
  margin-top: -13px;
  color: #cccccc;
  -wekbkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.sidebar .show-hide a.active .learn-more {
  color: #ccc;
}
.sidebar .show-hide .learn-more {
  text-decoration: none;
  padding: 8px 5px;
  margin: 0;
}
p.question {
  margin-bottom: 5px;
}
div.answer {
  color: #7d7e7e;
  font-size: 1.2em;
  padding-left: 1.5em;
}
p.img-center {
  text-align: center;
}
@media all and (min-width: 43.75em) {
  p.img-center {
    text-align: left;
  }
}
p.before-submission {
  padding: 10px;
  text-align: center;
}
img.valvoline-guarantee {
  float: none;
  width: 200px;
  margin: 0 auto;
}
@media all and (min-width: 43.75em) {
  img.valvoline-guarantee {
    float: left;
    max-height: 110px;
    margin: 0;
    width: auto;
  }
}
.manufacturer-recommended {
  display: inline-block;
}
.manufacturer-recommended .icon-oem_icon {
  color: #6195cf;
  font-size: 200%;
  float: left;
}
.manufacturer-recommended p {
  color: #5f5f5f;
  display: inline-block;
  float: left;
  font-size: 11px;
  line-height: 0.95;
  margin-bottom: 0;
  padding-top: 5px;
  text-transform: uppercase;
}
h1.manufacturer-recommended {
  float: left;
  margin-right: 10px;
}
a.glossary-link {
  position: relative;
  top: -20px;
}
@media screen and (min-width: 43.75em) {
  a.glossary-link {
    top: auto;
  }
}
.oil-glossary .letter-wrapper {
  background-color: #f9f9f9;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
}
.flexslider {
  background-color: transparent;
  border: none;
}
.pagination {
  margin: 20px 0;
  width: 100%;
  float: left;
  position: relative;
}
.pagination .previous-article {
  float: left;
  margin-top: 40px;
  max-width: 120px;
}
@media screen and (min-width: 360px) {
  .pagination .previous-article {
    max-width: none;
  }
}
@media screen and (min-width: 43.75em) {
  .pagination .previous-article {
    margin-top: 0;
  }
}
.pagination .next-article {
  float: right;
  margin-top: 40px;
  max-width: 120px;
}
@media screen and (min-width: 360px) {
  .pagination .next-article {
    max-width: none;
  }
}
@media screen and (min-width: 43.75em) {
  .pagination .next-article {
    margin-top: 0;
  }
}
.pagination ul.pagination-numbers {
  position: absolute;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
@media screen and (min-width: 43.75em) {
  .pagination ul.pagination-numbers {
    width: auto;
  }
}
.search-form fieldset {
  display: block;
  margin-bottom: 0;
  padding: 0;
}
.search-form input {
  vertical-align: top;
}
.search-form input.search-form-input {
  padding-top: 9px;
  padding-bottom: 9px;
  margin-bottom: 10px;
}
@media screen and (min-width: 43.75em) {
  .search-form input.search-form-input {
    width: 65%;
    margin-bottom: 0;
  }
}
.search-results-widget a.active {
  color: #d20017;
}
#buyNowOptions {
  text-align: center;
}
#buyNowOptions img.buy-now-location {
  -web-border-radius: 5px;
  border-radius: 5px;
  margin: 5px 5px 0 0;
}
#buyNowOptions .row {
  width: 163px;
}
.buy-now-overlay .fancybox-wrap {
  width: 98%;
  max-width: 650px;
}
@media screen and (min-width: 43.75em) {
  .buy-now-overlay .fancybox-wrap {
    width: 60%;
  }
}
.buy-now-overlay .fancybox-inner {
  max-width: 620px;
}
.buy-now-overlay .fancybox-skin {
  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
}
.buy-now-overlay .fancybox-skin h3 {
  color: #fff;
}
.contact-confirmation-overlay .fancybox-wrap {
  width: 98%;
  max-width: 544px;
}
@media screen and (min-width: 43.75em) {
  .contact-confirmation-overlay .fancybox-wrap {
    width: 60%;
  }
}
.contact-confirmation-overlay .fancybox-inner {
  max-width: 514px;
}
.contact-confirmation-overlay .fancybox-skin {
  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
}
.contact-confirmation-overlay .fancybox-skin h3 {
  color: #fff;
}
.site-content.four-oh-four main {
  border-right: none;
  float: none;
  width: 100%;
}
.site-content.four-oh-four article {
  text-align: center;
}
@media screen and (min-width: 43.75em) {
  .site-content.four-oh-four article {
    margin-top: 50px;
  }
}
.site-content.four-oh-four article h2 {
  font-size: 4em;
  margin-bottom: 0;
}
@media screen and (min-width: 43.75em) {
  .site-content.four-oh-four article h2 {
    font-size: 12em;
  }
}
.site-content.four-oh-four article p.intro {
  line-height: 2;
}
.site-content.four-oh-four article a.btn {
  margin-right: 1em;
}
.full-width-content-wrapper .site-content main .full-width {
  margin: 0 -3.25% 0 -2.75%;
}
.social-share-buttons {
  display: none;
}
.social-share-buttons.active {
  display: block;
  position: absolute;
  top: 30px;
  left: 22px;
}
@media screen and (min-width: 43.75em) {
  .social-share-buttons.active {
    left: -10px;
    top: 35px;
  }
}
@media screen and (min-width: 43.75em) {
  .history .social-share-buttons.active {
    width: 200px;
    top: 42px;
    left: 20px;
  }
}
.social-share-buttons .sharrre {
  margin: 10px 0 0 5px;
  float: left;
}
.social-share-buttons .sharrre .box a:hover {
  text-decoration: none;
}
body.product-recommender-page div.product-recommender {
  margin-top: 0;
}
table.wrapper-chart {
  width: 100%;
}
table.wrapper-chart th {
  background-color: #fff;
  color: #666;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}
table.wrapper-chart table {
  border: none;
  width: 100%;
}
table.wrapper-chart td {
  padding: 0;
  text-align: center;
}
table.wrapper-chart td td {
  border: none;
}
table.wrapper-chart table.image-division {
  border: none;
  margin-top: 2em;
  width: 100%;
}
table.wrapper-chart table.image-division td {
  padding: 0 10px;
}
table.wrapper-chart table.image-division td a {
  font-weight: bold;
  text-decoration: underline;
}
table.wrapper-chart table.image-division td a p {
  margin-bottom: 1em;
}
table.wrapper-chart .motor-oil-result-row .image-division td {
  padding-left: 20px;
  width: 33%;
  float: left;
}
table.wrapper-chart .motor-oil-result-row .image-division td p {
  width: 60%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
a.youtube.thumbnail:before {
  content: "\ea15";
  background-color: #000;
  border-radius: 40px;
  color: #eeeeee;
  display: block;
  font-size: 5em;
  opacity: 0.8;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a.youtube.thumbnail.small:before {
  font-size: 2em;
}
body.procurement .sales-item,
body.salesterms .sales-item {
  padding-left: 40px;
  min-height: 29px;
  margin: 15px 0;
}
body.procurement .sales-item p:first-child,
body.salesterms .sales-item p:first-child {
  margin-bottom: 0;
  font-weight: bold;
}
body.procurement .sales-item.china,
body.salesterms .sales-item.china {
  background: url("/~/media/ValvolineUS/Images/flags/Flag-of-China.png") no-repeat left center;
}
body.procurement .sales-item.other,
body.salesterms .sales-item.other {
  background: url("/~/media/ValvolineUS/Images/flags/Asia-Pacific-Button.png") no-repeat left center;
}
body.procurement .sales-item.india,
body.salesterms .sales-item.india {
  background: url("/~/media/ValvolineUS/Images/flags/Flag-of-India.png") no-repeat left center;
}
body.procurement .sales-item.finland,
body.salesterms .sales-item.finland {
  background: url("/~/media/ValvolineUS/Images/flags/Flag-of-Finland.png") no-repeat left center;
}
body.procurement .sales-item.poland,
body.salesterms .sales-item.poland {
  background: url("/~/media/ValvolineUS/Images/flags/Flag-of-Poland.png") no-repeat left center;
}
body.procurement .sales-item.france,
body.salesterms .sales-item.france {
  background: url("/~/media/ValvolineUS/Images/flags/Flag-of-France.png") no-repeat left center;
}
body.procurement .sales-item.spain,
body.salesterms .sales-item.spain {
  background: url("/~/media/ValvolineUS/Images/flags/Flag-of-Spain.png") no-repeat left center;
}
body.procurement .sales-item.germany,
body.salesterms .sales-item.germany {
  background: url("/~/media/ValvolineUS/Images/flags/Flag-of-Germany.png") no-repeat left center;
}
body.procurement .sales-item.italy,
body.salesterms .sales-item.italy {
  background: url("/~/media/ValvolineUS/Images/flags/Flag-of-Italy.png") no-repeat left center;
}
body.procurement .sales-item.austria,
body.salesterms .sales-item.austria {
  background: url("/~/media/ValvolineUS/Images/flags/Flag-of-Austria.png") no-repeat left center;
}
body.procurement .sales-item.sweden,
body.salesterms .sales-item.sweden {
  background: url("/~/media/ValvolineUS/Images/flags/Flag-of-Sweden.png") no-repeat left center;
}
body.procurement .sales-item.belgium,
body.salesterms .sales-item.belgium {
  background: url("/~/media/ValvolineUS/Images/flags/Flag-of-Belgium.png") no-repeat left center;
}
body.procurement .sales-item.netherlands,
body.salesterms .sales-item.netherlands {
  background: url("/~/media/ValvolineUS/Images/flags/Flag-of-Netherlands.png") no-repeat left center;
}
body.procurement .sales-item.netherlands p:nth-child(2),
body.salesterms .sales-item.netherlands p:nth-child(2) {
  margin-bottom: 0;
}
body.procurement .sales-item.england,
body.salesterms .sales-item.england {
  background: url("/~/media/ValvolineUS/Images/flags/Flag-of-UnitedKingdom.png") no-repeat left center;
}
body.procurement .sales-item.canada,
body.salesterms .sales-item.canada {
  background: url("/~/media/ValvolineUS/Images/flags/Flag-of-Canada.png") no-repeat left center;
}
body.procurement .sales-item.mexico,
body.salesterms .sales-item.mexico {
  background: url("/~/media/ValvolineUS/Images/flags/Flag-of-Mexico.png") no-repeat left center;
}
body.procurement .sales-item.usa,
body.salesterms .sales-item.usa {
  background: url("/~/media/ValvolineUS/Images/flags/Flag-of-UnitedStates.png") no-repeat left center;
}
body.procurement .sales-item.denmark,
body.salesterms .sales-item.denmark {
  background: url("/~/media/ValvolineUS/Images/flags/Flag-of-Denmark.png") no-repeat left center;
}
body.procurement .sales-item.ireland,
body.salesterms .sales-item.ireland {
  background: url("/~/media/ValvolineUS/Images/flags/Flag-of-Ireland.png") no-repeat left center;
}
body.procurement .sales-item.norway,
body.salesterms .sales-item.norway {
  background: url("/~/media/ValvolineUS/Images/flags/Flag-of-Norway.png") no-repeat left center;
}
body.procurement .sales-item.portugal,
body.salesterms .sales-item.portugal {
  background: url("/~/media/ValvolineUS/Images/flags/Flag-of-Portugal.png") no-repeat left center;
}
body.procurement .language-selection a,
body.salesterms .language-selection a {
  display: inline-table;
}
.supplies-callout-container .one-half {
  margin-bottom: 0;
}
.supplies-callout-container .one-half:nth-child(1n + 2) {
  margin-left: 0;
}
.supplies-callout-container .one-half .callout {
  display: inline-block;
  width: 100%;
}
.supplies-callout-container .one-half .callout a {
  color: #2378bb;
  text-decoration: none;
}
.supplies-callout-container .one-half .callout div[class^="icon"] {
  font-size: 4.5vh;
  font-weight: bold !important;
  color: #2378bb;
  float: left;
  text-align: center;
}
.supplies-callout-container .one-half .callout .content {
  display: inline-block;
  padding: 15px 0 15px 0;
  width: 70%;
  margin-left: 20px;
  float: left;
}
.supplies-callout-container .one-half .callout .content h3 {
  margin-bottom: 5px;
  padding-bottom: 0;
  font-weight: bold;
  font-size: 1.25em;
}
.supplies-callout-container .one-half .callout .content h3 a {
  color: #3f3f3f;
}
.supplies-callout-container .one-half .callout .content p {
  margin-bottom: 10px;
  line-height: 1.5em;
}
/* Breakpoints (if preferred)
-------------------------------- */
/* Base Styles */
/* Insert base styles for Page or Section here. */
/* Extra Small: 320px / 16px = 20em */
@media all and (min-width: 20em) {
  /* Insert breakpoint styles here. */
}
/* Small: 480px / 16px = 30em */
@media all and (min-width: 30em) {
  /* Insert breakpoint styles here. */
}
/* Medium: 700px / 16px = @break-m */
@media all and (min-width: 43.75em) {
  /* Insert breakpoint styles here. */
}
/* Large: 900px / 16px = 56.25em */
@media all and (min-width: 56.25em) {
  /* Insert breakpoint styles here. */
}
/* Extra Large: 1100px / 16px = 68.75em */
@media all and (min-width: 68.75em) {
  /* Insert breakpoint styles here. */
}