body,
html {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



*,
*:before,
*:after {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

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,img,ins,kbd,q,s,samp,small,
strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,
label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,
details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,
section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block;
}

body {
    line-height: 1;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

sup{
    font-size: 7px;
    position: relative;
    bottom: 4px;
    vertical-align: top;
}

.material-icons {
    font-family: 'Material Icons';
    display: block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

@font-face {
    font-family: 'icons';
    src: url('../font/icons.eot?21258575');
    src: url('../font/icons.eot?21258575#iefix') format('embedded-opentype'),
        url('../font/icons.woff?21258575') format('woff'),
        url('../font/icons.ttf?21258575') format('truetype'),
        url('../font/icons.svg?21258575#icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fontello';
    src: url('./assets/font/fontello.eot');
    src: url('./assets/font/fontello.eot?45226023#iefix') format('embedded-opentype'),
         url('./assets/font/fontello.woff') format('woff'),
         url('./assets/font/fontello.ttf') format('truetype'),
         url('./assets/font/fontello.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

header{
    position:relative;z-index:5000;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.hidden{
    display: none;
}
.icons {
    font-family: 'icons';
}
.width-limiter{
	max-width: 1400px;
    margin: 0px auto;
}
.button-1, .button-2,.button-3{
    display: inline-block;
   
   background-color: transparent;
    padding: 10px 15px;
    width: 150px;
    border:3px solid #fff;
    font-size: 16px;
    font-weight: 500;
    margin-top: 25px;
    color:#fff;  
    text-transform:uppercase;
    text-align:center;
    text-decoration:none;
}
.button-1:hover, .button-2:hover,.button-3:hover{
    color:#fff;
}



#content ul,
#content ol {
    padding-left: 40px;
}

/*Base Layout*/
.header-wrapper {
	background-image: url('./img/amsoil-header-banner-texture.jpg');
    background-color: #333;
    margin-left: auto;
    margin-right: auto;
}

#header {
    height: 85px;
    overflow: hidden;
    text-align: center;
    padding-top: 7px;
}

.nav-wrapper {
    /*background-color: #fff;*/
    background-image: url(./img/amsoil-header-banner-texture.jpg);
    border-bottom: none;
    margin-left: auto;
    margin-right: auto;
}
.nav-wrapper.other{
    border-bottom: 1px solid #ccc;
}

nav.main-nav {
}
.hero-wrapper {
    margin-left: auto;
    margin-right: auto;
}

#hero {
    position: relative;
    clear: both;
    height: 420px;
    overflow: hidden;
}

.content-wrapper {
    background-color: #fff;
    border-bottom: none;
    margin-left: auto;
    margin-right: auto;
    padding-top: 35px;
}

#content {
    background-color: #fff;
    width: 100%;
    overflow: hidden;
    min-height: 300px;
}

.footer-wrapper {
	background-color: #131313;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 40px;
}

#footer {
    max-width: 1400px;
    margin: 0px auto;
    clear: both;
    text-align: center;
    padding-top: 10px;
}

#legal {
    background-color: #ddd;
    height: 40px;
    max-width: 1400px;
    margin: 0px auto;
    clear: both;
    text-align: center;
    padding-top: 10px;
}




.header-wrapper,
.block-wrapper,
.nav-wrapper,
.footer-wrapper {
    padding-left: 50px;
    padding-right: 50px;
}

#header,
#container,
.main-nav {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

#container{
    max-width: 1100px;
}

.homepage-container#container{
    max-width:1230px;   
}

.homepage-container#container #content{
    min-height: auto;   
}

/*Interior Layout*/
#container {
    background-color: #fff;
    width: 100%;
    overflow: hidden;    
    position: relative;
}

#subnav {
    background-color: #fff;
    width: 250px;
    float: left;
}

#container #content {
    padding: 30px 30px 30px;
    width: calc(100% - 250px);
    float: right;
}

#container #content.has-side-content {
    width: calc(100% - 650px);
    float: right;
    margin-right: 360px
}

#container #content.no-subnav {
    padding: 30px 0px 30px 0px;
    border: none;
    width: 100%;
    float: right;
}

#container #content.no-subnav.has-side-content {
    padding: 30px 0px 30px 30px;
    width: calc(100% - 360px);
    float: right;
    margin-right: 360px;
}

#container #side {
    position: absolute;
    right: 0px;
    padding: 30px 30px 30px;
    width: 360px;
    color: #fff;
    float: right;
    clear: none;
}

#subnav {
    margin-top: 30px;
    padding: 0;
    list-style-type: none;
    float: right;
}





.scrollable {
    overflow-y: scroll;
}

.scrollable::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.scrollable::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}

.scrollable::-webkit-scrollbar-thumb {
    background: #ccc;
    border: 0px none #ccc;
    border-radius: 4px;
}

.scrollable::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}

.scrollable::-webkit-scrollbar-thumb:active {
    background: #ccc;
}

.scrollable::-webkit-scrollbar-track {
    background: #aaa;
    border: 0px none #ccc;
    border-radius: 3px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.scrollable::-webkit-scrollbar-track:hover {
    background: #aaa;
}

.scrollable::-webkit-scrollbar-track:active {
    background: #aaa;
}

.scrollable::-webkit-scrollbar-corner {
    background: transparent;
}




/*logos*/
#header a.logo {
    background-image: url(./img/amsoil_logo.png);
    display: inline-block;
    margin-top: 15px;
    margin-left: 15px;
    width: 172px;
    height: 43px;
    background-size: 172px 43px;
    background-repeat: no-repeat;
}

nav.main-nav #mobile-nav a.mobile-logo {
    background-image: url(./img/amsoil_logo.png);
    float: left;
    display: block;
    margin-left: 12px;
    margin-top: 10px;
    width: 140px;
    height: 35px;
    background-size: contain;
    background-repeat: no-repeat;
}


/*Sub Navigation*/
#subnav {
    background-color: transparent;
}

#subnav>li.section {
    border-radius: 8px 8px 0px 0px;
    line-height: 16px;
    font-weight: 600;
    color: #fff;
    background-image: url(../images/header-banner-texture.jpg);
    display: block;
    width: 100%;
    padding: 20px 15px;
    text-align: center;
    border-bottom: 1px solid #fff;
}

#subnav>li {}

#subnav>li>a {
    border-bottom: 1px solid #fff;
    font-size: 14px;
    line-height: 16px;
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #fff;
    background-color: #0b65af;
    font-weight: 600;
}
#subnav>li>a.on,
#subnav>li>a:hover  {
    text-decoration: none;
    background-color: #ea2b29;
}

#subnav>li>ul>li {}

#subnav>li>ul>li>a {
    line-height: 16px;
    border-bottom: 1px solid #fff;
    font-size: 14px;
    display: block;
    padding: 15px 30px;
    text-decoration: none;
    color: #000;
    background-color: #b4b4b4;
    border-radius: 0px;
    font-weight: 600;
}
#subnav>li>ul>li:last-of-type>a{
    border-bottom:none;
}
#subnav>li>ul>li>a.on,
#subnav>li>ul>li>a:hover{
    text-decoration: none;
    background-color: #848484;
}

.nav-phone{
    width: 100%;
    font-size: 18px;
    color: #ea2b29;
    text-align: right;
    padding: 15px 0px;
}
.nav-logo{
    display: block;
    position: absolute;
    left: 0px;
    top: 40px;
    width: 276px;
    height: 121px;
    background-image: url(./img/amsoil-nav-logo.png);
    background-position: center;
    background-size: contain;
}

#nav,
#nav ul {
    display: none
}

#nav li,
#subnav li {
    padding-bottom: 0
}

#nav>li.hover>ul {
    display: block
}

.hover #nav {
    display: block
}

nav.main-nav #mobile-nav {
    display: none;
    height: 56px;
    background-color: #333
}

#nav-toggle {
    display: block;
    float: right;
    cursor: hand;
    font-size: 38px;
    color: #fff;
    cursor: pointer
}

#nav-toggle:before {
    content: "menu";
    display: block;
    float: left;
    padding: 9px 10px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease
}

nav.main-nav.hover #nav-toggle:before {
    content: "close";
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

#nav,
ul#nav ul {
    
    margin: 0;
    padding: 0;
    list-style-type: none
}
ul#nav ul{
	float: right;
}
ul#subnav li ul {
    list-style: none;
    float: none;
    clear: none;
    padding-left: 0;
    padding-top: 0;
    margin: 0
}




@media only screen and (max-width:1400px) {

    .enable-hover #nav.center>li:hover:first-child>ul,
    #nav.center>li.hover:first-child>ul {
        left: 0;
        right: auto
    }

    .enable-hover #nav.center>li:hover:last-child>ul,
    #nav.center>li.hover:last-child>ul {
        left: auto;
        right: 0
    }

    .enable-hover #nav.center>li:hover:first-child>ul>li,
    #nav.center>li.hover:first-child>ul>li,
    .enable-hover #nav.center>li:hover:last-child>ul>li,
    #nav.center>li.hover:last-child>ul>li {
        position: static
    }
}

@media only screen and (min-width:931px) {
    nav.main-nav {
        height: 100px
    }

    #nav>li.hover>ul {
        display: none
    }

    #nav {
        padding-top: 45px;
        display: block;
        width:100%;
        text-align: right;
    }

    #nav ul {
        position: absolute
    }

    .enable-hover #nav>li:hover>ul {
        display: block
    }

    .enable-hover #nav>li:hover>ul,
    #nav>li.hover>ul {
        left: 0;
        top: auto;
    }

    .enable-hover #nav>li:hover:last-child>ul,
    #nav>li.hover:last-child>ul {
        left: auto;
        right: 0
    }

    .enable-hover #nav.center>li:hover>ul,
    #nav.center>li.hover>ul {
        right: 50%;
        left: auto
    }

    .enable-hover #nav.center>li:hover>ul>li,
    #nav.center>li.hover>ul>li {
        position: relative;
        right: -50%;
        left: auto
    }

    #nav>li>ul>li.hover>ul {
        display: none
    }

    #nav>li>ul>li.hover:hover>ul {
        display: block
    }

    #nav>li {
        position: relative;
        /*float: left;*/
        text-align: left;
        display: inline-block;
    }

    nav.main-nav {
        position: relative;
        z-index: 1000
    }

    nav.main-nav #nav>li>ul {
        width: 250px;
        text-align: left
    }

    #nav>li>ul>li {
        display: flex
    }

    #nav>li>ul>li a {
        width: 100%
    }

    #nav>li>ul>li:hover>ul {
        display: block;
        left: 100%;
        width: 250px;
        margin-bottom: -100%
    }
}

@media only screen and (max-width:930px) {
    .nav-wrapper{padding: 0px;}
    main {
        /*padding-top: 56px*/
    }

    div.nav-wrapper nav.hide-nav {
        top: -56px
    }

    div.nav-wrapper nav {
        top: 0;
        position: fixed;
        z-index: 120;
        width: 100%;
        z-index: 120;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -o-transition: all .3s ease;
        -ms-transition: all .3s ease;
        transition: all .3s ease
    }

    ul#subnav {
        border: none;
        width: calc(100% - 30px);
        clear: right;
        margin: 21px 15px
    }

    nav.main-nav,
    ul#nav {
        float: none
    }

    #nav>li.hover>ul {
        width: 100%
    }

    #nav>li {
        float: left;
        width: 100%
    }

    .header-wrapper,
    .mini-wrapper {
        display: none
    }

    nav.main-nav #mobile-nav {
        display: block;
        position: relative;
        z-index: 101;
        background-image: url(../images/header-banner-texture.jpg);
    }

    .nav-wrapper {
        border-top: 0
    }

    nav.main-nav>ul#nav {
        display: block;
        position: absolute;
        width: 100%;
            top: -370px;
        -webkit-transition: all .2s ease;
        z-index: 100;
        opacity: 0;
        -moz-transition: all .2s ease;
        -o-transition: all .2s ease;
        -ms-transition: all .2s ease;
        transition: all .2s ease
    }

    nav.main-nav.hover>ul#nav>li>a {
        overflow: hidden
    }

    nav.main-nav.hover>ul#nav {
        top: 56px;
        opacity: 1;
        -webkit-box-shadow: 0 5px 25px 0 rgba(0, 0, 0, .4);
        -moz-box-shadow: 0 5px 25px 0 rgba(0, 0, 0, .4);
        box-shadow: 0 5px 25px 0 rgba(0, 0, 0, .4)
    }

    nav.main-nav.hover>#mobile-nav {
        -webkit-transition: all .2s ease;
        -moz-transition: all .2s ease;
        -o-transition: all .2s ease;
        -ms-transition: all .2s ease;
        transition: all .2s ease;
        -webkit-box-shadow: 0 0 25px 0 rgba(0, 0, 0, .7);
        -moz-box-shadow: 0 0 25px 0 rgba(0, 0, 0, .7);
        box-shadow: 0 0 25px 0 rgba(0, 0, 0, .7)
    }
    #nav li a {
        border-left: none;
        border-bottom: 1px solid #fff;
        padding: 30px 20px;
        background-color: #0b65af;
        color: #fff;
        display: block;
        font-size: 16px;
        line-height: 16px;
        font-weight: 300;
        text-decoration: none
    }
    #nav>li:hover,
    #nav>li.hover {
         background-color: #ea2b29;
    }
    #nav li:last-of-type a{
        border-bottom: none;
    }

    #nav li.has-children>a:after {
        color: #fff;
        position: relative;
        left: 4px;
        top: 7px;
        content: "expand_more";
        display: inline-block;
        float: right;
        display: inline-block;
        text-decoration: none;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        white-space: nowrap;
        direction: ltr;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: liga;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: liga;
        font: 24px/1px 'Material Icons'
    }

    #nav>li>ul>li>a {
        background-color: #ea2b29;
        color: #fff;
        border-bottom: 1px solid #fff;
        padding-left: 25px;
    }

    #nav>li>ul>li.hover>ul {
        display: block;
        float: none
    }

    #nav>li>ul>li:hover>ul>li>a,
    #nav>li>ul>li.hover>ul>li>a {
        background-color: #eee;
        color: #555;
        border-bottom: 1px solid #fff;
        padding-left: 40px;
    }
    .nav-logo{display:none;}
}

@media only screen and (min-width:931px) {
    #nav > li > a{
        padding: 15px 15px 21px;
    }
    #nav li a {
        font-size: 16px;
        line-height: 16px;
        color: #fff;
        display: block;
        font-size: 16px;
        line-height: 16px;
        font-weight: 600;
        text-decoration: none
    }

    #nav>li:hover>a,
    #nav>li.hover>a {
        color: #636363;
    }

    #nav>li>a.on {
        color: #636363;
        text-decoration: none;
    }

    #nav>li>ul>li>a {
        padding: 15px;
        background-color: rgba(6, 72, 149, .9);;
        color: #fff;
        border-bottom: 1px solid #fff;
    }
    #nav>li>ul>li.last-li>a{
        border-radius: 0px 0px 8px 8px;
        border-bottom: none;
    }
    #nav>li>ul>li>a:hover {
        background-color: rgba(234, 43, 41, .9);;
    }
    

    #nav>li>ul>li.has-children>a:after {
        color: #555;
        position: relative;
        left: 10px;
        top: 7px;
        content: "chevron_right";
        display: inline-block;
        float: right;
        display: inline-block;
        text-decoration: none;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        white-space: nowrap;
        direction: ltr;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: liga;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: liga;
        font: 24px/1px 'Material Icons'
    }

    #nav>li>ul>li:hover>ul>li>a,
    #nav>li>ul>li.hover>ul>li>a {
        background-color: #eee;
        color: #555;
    }
}

@media only screen and (max-width: 1400px){
    .nav-wrapper{
        padding-left: 15px;
        padding-right: 15px;
    }
    #nav li a{
        font-size: 14px;
        padding: 15px 10px 21px;
    }
}

@media only screen and (max-width: 1200px){
    #nav li a{
        font-size: 14px;
        padding: 15px 7px 15px;
    }
}
@media only screen and (max-width: 1100px){
    #nav li a{
        font-size: 11px;
        padding: 15px 3px 15px;
    }
}

@media only screen and (max-width: 400px) {
    #subnav {
        width: 100%;
        clear: right;
    }

    #container #content {
        width: 100%;
    }
}


@media only screen and (max-width: 1200px) {
    #subnav {
        width: 250px;
        float: left;
    }

    #container #content {
        padding: 30px 30px 30px;
        width: calc(100% - 250px);
        float: right;
    }

    #container #content.has-side-content {
        width: calc(100% - 250px);
        float: right;
        margin-right: 0px;
    }

    #container #side {
        position: relative;
        padding: 30px 30px 30px;
        width: 100%;
        float: left;
        clear: both;
    }

    #container #content.no-subnav,
    #container #content.no-subnav.has-side-content {
        width: 100%;
        float: right;
        margin-right: 0px;
        padding: 30px 30px 30px;
    }
}


@media only screen and (max-width: 930px) {
    #container #content {
        padding-bottom: 0px;
    }

    #container #content,
    #container #content.has-side-content,
    #container #content.no-subnav {
        border: none;
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        min-height: 400px;
    }

    .mini-wrapper,
    .header-wrapper,
    .nav-wrapper,
    .hero-wrapper,
    .content-wrapper,
    .footer-wrapper,
    .legal-wrapper,
    .scroller-wrapper {
        padding-left: 0px;
        padding-right: 0px;
    }

    #container #side {
        padding: 0 15px 15px;
    }
}


.block-wrapper {
    background-size: cover;
}

.inner-limiter {
    max-width: 1100px;
    margin: 0px auto;
    padding-top: 30px;
    padding-bottom: 30px;
}

.text-white p,
.text-white a,
.text-white ol li,
.text-white ul li,
.text-white blockquote {
    color: #fff;
}


.slide .cta-wrapper {
    text-align: left;
}


a.cta-button {
    float:left;
    color: #111;
    background-color: #f90;
    font-size: 18px;
    line-height: 20px;
    text-decoration: none;
    padding: 11px 20px 11px;
    font-weight: 700;
    display: block;
    margin-bottom: 15px;
    width: auto;
    border: 1px solid #111;
    cursor: hand;
    cursor: pointer;
    margin-right:15px;
}

a.cta-button:after {
    position: relative;
    left: 0px;
    top: 5px;
    padding-top: 7px;
    margin-top: -5px;
    content: "chevron_right";
    display: inline-block;
    margin-left: 5px;
    font-family: 'Material Icons';
    color: #111;
    font-size: 22px;
    height: 22px;
    width: 13px;
    display: inline-block;
    text-decoration: none;
    line-height: 1px;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}



a.cta-button-2 {
    float:left;
    color: #111;
    background-color: transparent;
    font-size: 18px;
    line-height: 20px;
    text-decoration: none;
    padding: 11px 20px 11px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 15px;
    width: auto;
    border: 1px solid #111;
    cursor: hand;
    cursor: pointer;
}

a.cta-button-2:after {
    position: relative;
    left: 0px;
    top: 5px;
    padding-top: 7px;
    margin-top: -5px;
    content: "chevron_right";
    display: inline-block;
    margin-left: 5px;
    font-family: 'Material Icons';
    color: #111;
    font-size: 22px;
    height: 22px;
    width: 13px;
    display: inline-block;
    text-decoration: none;
    line-height: 1px;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}



a.cta-button:hover {
    background-color: #111;
    color: #fff;
}

a.cta-button:hover:after {
    color: #fff;
}
a.cta-button-2:hover {
    background-color: #111;
    color: #fff;
}

a.cta-button-2:hover:after {
    color: #fff;
}



.text-white a.cta-button {
    color: #fff;
    background-color: transparent;
    border: 1px solid #fff;
}

.text-white a.cta-button:after {
    color: #fff;
}

.text-white a.cta-button:hover {
    background-color: #fff;
    color: #333;
}

.text-white a.cta-button:hover:after {
    color: #333;
}

.cta-wrapper {
    width: 100%;
    text-align: center;
}



#content img[style*="float: left;"] {
    margin: 0 25px 25px 0 !important;
}

#content img[style*="float: right;"] {
    margin: 0 0 25px 25px !important;
}

@media screen and (max-width: 600px) {
    #content img[style*="float: left;"] {
        margin: 0 0 25px 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }

    #content img[style*="float: right;"] {
        margin: 0 0 25px 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
}


@media screen and (min-width: 931px) {
    .user-mobile {
        display: none;
    }
}

/***************header styles***************/
#header div{
	display: inline-block;
	color:#fff;
	font-weight: 500;
	position: relative;
    bottom: 20px;
}
#header .dealer{
	font-style: italic;
	margin: 0px 15px;
}
nav.main-nav #nav li {
	text-transform: uppercase;
}

.top-bar{
    background-color: #ea2b29;
    color: #fff;
    text-decoration: none;
    text-align: center;
    display: block;
}
.top-bar .width-limiter{
    display: flex;
    pa
}
.top-bar:hover{
    color: #fff;
    background-color: #064895;
}
.top-bar div{
    flex-grow: 1;
    display: inline-block;
}
.top-bar .left{
    margin-left: 15px;
}
.top-bar .center,
.top-bar .left{
    margin-top: 13px;
    text-align: left;
}
.top-bar .right{
    padding: 13px 0px;
    background-color: #064895;
    max-width: 165px;
}
.top-bar:hover .right{
    background-color: #ea2b29;
}
.top-bar .center span:before{
    font-family: "fontello";
    content: '\e800';
    color: #064895;
    margin: 0px 10px;
    font-size: 14px;
    position: relative;
    bottom: 1px;
}
.top-bar:hover .center span:before{
    color: #ea2b29;
}
@media screen and (max-width: 1080px) {
    .top-bar div{
        font-size: 14px;
    }
    .top-bar .right{
        max-width: 150px;
    }
}

@media screen and (max-width: 880px) {
    .top-bar .center{
        display: none;
    }
}




/***************footer styles***************/
.bottom-nav{
	text-align: center;
	background-color: #4e5254;
	padding: 40px 50px 50px;
}
.bottom-nav .legal{
	font-size: 13px;
	color: #fff;
	clear: both;
    font-weight: 500;
}
.bottom-nav ul{
	list-style-type: none;
	display: block;
	margin: 0px auto 10px;
	width: 100%;
	padding-left: 0px;
}
.bottom-nav ul li{
	display: inline-block;
}
.bottom-nav ul li a{
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	padding: 13px 20px;
}
.links-list{
	display: inline-block;
	width: 15.6666666666%;
	vertical-align: top;
	text-align: left;
	line-height: 24px;
	margin-bottom: 30px;
    padding-right: 15px;
}
.links-list a{
	display: block;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
}
.links-list a:hover{
	color: #ea2b29;
}
.links-list .link-header{
	color: #cdcdcd;
	font-weight: 500;
	font-size: 16px;
	text-transform: uppercase;
}
.links-list .line{
	width: 40px;
	height: 4px;
	background-color: #cdcdcd;
	margin: 13px 0px;
}
.links-list .link-header{
	margin-top: 30px;
}
@media only screen and (max-width: 900px){
    .links-list{
        width: calc(50% - 2px);
        padding-left: 30px;
    }
}
@media only screen and (max-width: 390px){
    .links-list{
        width: 100%;
        text-align: center;
        padding-left: 0px;
    }
    .links-list .line{
        margin:13px auto;
    }
    .bottom-nav ul li{
        display: block;
        width: 100%;
    }
}
/***************hero styles***************/
#hero .slide,
.slide > .width-limiter{
    height: 420px;
}
.hero-wrapper {
    padding-left: 0px;
    padding-right: 0px;
    border-bottom: 10px solid #212122;
}

#hero .slide {
    width: 100%; 
    position: absolute;
    background-position: center;
    background-repeat:no-repeat;
    background-size:cover;
}

.slide > .width-limiter{
    position: relative;
}

#hero .slide-textbox{
    padding: 30px;
    color: #fff;
    width: 470px;
    background-color: rgba(0, 0, 0, .8);
    position: absolute;
    left: 100px;
    top: 50%;
    transform: translate(0%,-50%);
}
#hero .slide-heading{
    font-size: 30px;
    font-weight: 700;
}
#hero .slide-text{
    margin: 15px 0px 30px;
    line-height: 26px;
}
#hero .slide-text p{
    color: #fff; line-height:22px;
}
#hero .slide-button{
    padding: 10px 17px 10px 20px;
    border: 1px solid #111;
    color: #111;
    background-color:#fab744;
    text-decoration: none;
    font-weight: 700;text-transform: uppercase;
    font-size: 18px;
}
#hero .slide-button:hover{
    background-color: #fff;
    color: #111;
}
#hero .slide-button span:before{
    font-family: 'Material Icons';
    content: 'keyboard_arrow_right';
    font-size: 25px;text-transform:none;
    vertical-align: middle;
    position: relative;
    bottom: 2px;
    margin-right: -5px; 
}
#hero-controls{
    max-width:100%; 
    margin:0 auto;
    position: relative;
    top: 170px;
    text-shadow: 0px 0px 2px #000;
}

#hero-slide-selector > a {
    box-shadow: 0px 0px 3px #000;
    padding: 7px;
    background-color: rgba(0, 0, 0, .2);
    display: inline-block;
    border: 2px solid white;
    margin: 2px;
    border-radius: 50%;
    padding: 7px;
}
#hero-slide-selector > a.on {
    background-color: white;
    color: white;
}
#hero-current-slide{
    display:inline-block;

}
#hero-slide-selector{
    display:block;
    text-align: center;
    position:absolute;
    top:205px;
    left:50%;
    transform: translate(-50%,0%);
    z-index: 1000;
}
#hero-overlay {
    position: relative;
    max-width: 100%;
    z-index: 1000;    
    left: 0px;
    top: 0px; 
}
#hero-prev-slide,
#hero-next-slide{
    cursor:pointer;
    cursor:hand;
    color: #fff;
    font-size: 80px;
}
#hero-prev-slide{
    float:left;
    margin-left: 15px;
}
#hero-next-slide{
    float:right;
     margin-right: 15px;
}
#hero-prev-slide:hover,
#hero-next-slide:hover{
    color: #f8b038;
}

#hero-prev-slide:before,
#hero-next-slide:before{
    font-family: 'Material Icons';
    position: relative;
    
}
#hero-prev-slide:before{
    content: 'keyboard_arrow_left';
}
#hero-next-slide:before{
    content: 'keyboard_arrow_right';
    
}

@media only screen and (max-width: 930px) { 
    .hero-wrapper{margin-top: 0px; top:0px;}
    #hero .slide-textbox{
        width: 100%;
        max-width: 470px;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
}
@media only screen and (max-width: 680px) { 
    #hero .slide-textbox{
        width: calc(100% - 80px);
    }
    #hero-next-slide,
    #hero-prev-slide{
        margin:0px;
        font-size: 60px;
    }
    #hero-controls{
        top:180px;
    }
    #hero-slide-selector{
        top: 195px;
    }
}

@media only screen and (max-width: 900px) {
    #hero .mobile_bg_image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat
    }

	#hero{
        height: auto;
    }
    
    #hero:after{
        content: '';
        display: block;
        padding-bottom: 80%;
    }
    
    #hero-controls{
        position: absolute;
        width: 100%;
    }
    
    #hero-next-slide{
        right: 0;
    }
}

/**********************************/
.hero-buttons{
	width: 100%;
	text-align: center;
	position: relative;
	bottom: 0px;
}
.hero-buttons a{
    position: relative;
        z-index: 3000;
    text-align: right;
	font-size: 20px;
	font-weight: 400;
	display: inline-block;
	padding: 19px 20px;
	width: calc(33% - 30px);
	border-radius: 0px 0px 10px 10px;
	color: #fff;
	text-decoration: none;
    border:none;
}
.hero-buttons a:hover{
	color: #fff;
	
}
.hero-buttons a:nth-child(2){
	margin: 0px 15px;
}

.hero-buttons .first{
    /*background-color: #ea2b29;*/background-image: url(./img/amsoil-header-banner-texture.jpg);
}
.hero-buttons .second{
    /*background-color: #064895;*/background-image: url(./img/amsoil-header-banner-texture.jpg);
}
.hero-buttons .third{
   /* background-color: #636363;*/background-image: url(./img/amsoil-header-banner-texture.jpg);
}


.hero-buttons .first:hover,
.hero-buttons .second:hover,
.hero-buttons .third:hover{
    background-image: url(../images/header-banner-texture.jpg);
}


.hero-buttons .first .link-image,
.hero-buttons .second .link-image,
.hero-buttons .third .link-image{
    position: absolute;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.hero-buttons .first .link-image{
    background-image: url(./img/amsoil-hero-button-3.png);
    width: 92px;
    height: 80px;
    left: 12px;
    bottom: -15px;
}
.hero-buttons .second .link-image{
    background-image: url(./img/amsoil-hero-button-2.png);
    width: 76px;
    height: 77px;
    left: 30px;
    bottom: -5px;
}
.hero-buttons .third .link-image{
    background-image: url(./img/amsoil-hero-button-1.png);
    width: 50px;
    height: 78px;
    left: 20px;
    bottom: -9px;
}

@media only screen and (max-width: 1215px){
    .hero-buttons a{
        font-size: 18px;
        width: calc(33% - 10px);
    }
    .hero-buttons a:nth-child(2){
        margin: 0px 5px;
    }
}

@media only screen and (max-width: 1100px){
    .hero-buttons a{
        font-size: 16px;
        width: calc(33% - 10px);
    }
}
@media only screen and (max-width: 1000px){
    .hero-buttons a{
        font-size: 14px;
        width: calc(33% - 10px);
    }
}
@media only screen and (max-width: 930px){
    .hero-buttons .link-image{
        display: none;
    }
     .hero-buttons a{
        text-align: center;
    }
    .hero-buttons .first{
        background-color: #ea2b29;  background-image: none;
    }
    .hero-buttons .second{
        background-color: #064895;  background-image: none;
    }
    .hero-buttons .third{
        background-color: #636363;  background-image: none;
    }
}
@media only screen and (max-width: 930px){
    .hero{
        margin-top: -55px;
    }
    
    .hero-buttons a{
        display: block;
        width: 100%;
        border-radius: 0px;
        font-size: 20px;
    }
    .hero-buttons a:nth-child(2){
        margin: 4px 0px;
    }
    .hero-content{
        padding: 55px 15px 0px;
    }
}
/***************homepage content styles***************/
.business-links {
	width: 100%;
	margin-bottom: 30px;
    margin-top: -20px;
	text-align: center;
	position: relative;
}
.link-container{
	width: 100%;
}
.link-container a{
    background-image: url(./img/amsoil-rounded-rectangle.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 40px;
    padding: 30px 20px 0px;
    width: calc(28%);
    height: 220px;
    display: inline-block;
    vertical-align: top;
    background-color: #333;
    font-weight: 500;
    border-radius: 10px;   
    color: #fff;
    text-decoration: none;
}




.link-container .link-content{
    position: relative;
    height: 160px;
}
.link-container a .learn-more{
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%,0);
    background-color: #ea2b29;
    padding: 10px 15px;
    width: 150px;
    border:3px solid #fff;   
}
.link-container a:hover .learn-more{  
    color: #fff;
}
.link-container .link-info{
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
}

.link-container a:nth-child(2){
	margin: 0px 30px;
}
.link-container a:hover{
	color: #fab744;
}
.link-container a .link-title{
	font-size: 32px;
	font-weight: 700;
	display: block;
	text-transform: uppercase;
	margin-bottom: 10px;
}

@media only screen and (max-width: 900px){
    .link-container a:nth-child(2){
        margin: 0px 20px;
    }
}
@media only screen and (max-width: 900px){
    .business-links{
       
    }
    .link-container a{
        display: block;
        margin: 0px auto;
        width: calc(100% - 30px);
    }
    .link-container a:nth-child(2){
        margin: 15px auto;
    }
}

/*****************************************/


.find-products{
        text-align: center;
  font-family: 'Montserrat', sans-serif;
    padding: 20px 15px;
    color: #141414;
    font-size: 28px;
    font-weight: 700;
}
.find-container{
    text-align: center;   
    padding: 0px 20px;
    border-radius: 0px 0px 10px 10px;
}
.find-products-wrapper{
    margin-top:40px;
    margin-bottom:20px;
}
.find-container a{
    text-align: center;
    display: inline-block;
    width: 80px;
    margin: 0px 20px 20px;
    text-decoration: none;
    color: #282828;
    font-weight: bold;
    font-size: 14px;
}
.find-container a:hover{
    color:#111;
}
.find-container a img{opacity:.3;}
.find-container a:hover img{opacity:1;}
.find-container a img{
    display: block;
    margin: 0px auto 15px;
}
.find-container a img.car{
    width: 98px;
}
.find-container a img.motorcycle{
    width: 84px;
}
.find-container a img.atv{
    width: 78px;
}
.find-container a img.utv{
    width: 62px;
}
.find-container a img.mower{
    width: 69px;
}
.find-container a img.truck{
    width: 53px;
}
.find-container a img.snowmobile{
    width: 92px;
}
.find-container a img.boat{
    width: 98px;
}
.find-container a img.pwc{
    width: 93px;
}


.innovation-left h3{
    font-weight: 500;
    margin-bottom: 30px;
}
.innovation-left{
    width: calc(100% - 500px);
    float: left;
    padding: 0px 15px;
    min-height: 300px;
}
.innovation-right{
    width: 470px;
    float: right;
    min-height: 300px;
    background-color: red;
    margin-bottom: 50px;
}


/*****************************************/
.oils{
   /* background-image: url(/img/amsoil-oil-bottles.png);*/
    background-color: #3c3d40;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 30px 50px 20px;
    border-top: 4px solid #fff;
}
.oils .left{
    background-image: url(./img/amsoil-oil-bottles.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 374px;
}
.oils .left, .oils .middle, .oils .right{
    display: inline-block;
    width: 33%;
    vertical-align: top;
}
.oils .middle, .oils .right{
    padding: 50px 30px 0px;
}
.oils .middle div, .oils .right div{
    color: #fff;
    font-weight: 500;
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 30px; 
}
.oils .middle p, .oils .right p{
    color: #fff;
    margin-bottom: 0px;
}
@media only screen and (max-width: 950px){
    .oils .left{
        display: block;
        margin: 10px auto;
        width: 100%;
        max-width: 350px;
    }
    .oils .middle, .oils .right{
        width: calc(50% - 2px);
    }
    .oils{
        padding: 30px 15px 50px;
    }
}
@media only screen and (max-width: 575px){
    .oils .middle, .oils .right{
        display: block;
        margin: 0px auto;
        width: 100%;
        max-width: 350px;
        padding-top: 0px;
    }
    .oils .right{
        margin-top: 50px;
    }
}





.products-container{
    padding: 30px ;
    text-align: center;
    min-height: 355px;
}
.products-container.bottom{
    margin-bottom: 0px;
    padding-top: 0px;
}
.products-container .product-heading{
    font-size: 32px;
    font-weight:500;
    margin-bottom: 30px;
    text-transform: uppercase;
}
.products-container .container{
    position: relative;
    text-align: center;
}
#leftArrow, #rightArrow,
#leftArrow2, #rightArrow2{
    position: absolute;
    top: 93px;
    text-decoration: none;
}
#leftArrow:after, #rightArrow:before,
#leftArrow2:after, #rightArrow2:before{
    font-family: 'Material Icons';
    font-size: 80px;
    color: #000;
    opacity: .15;
}
#leftArrow:hover:after, #rightArrow:hover:before,
#leftArrow2:hover:after, #rightArrow2:hover:before{
    opacity: .5;
}
#leftArrow2:after,
#leftArrow:after{
    content: 'keyboard_arrow_left'
}
#rightArrow2:before,
#rightArrow:before{
    content: 'keyboard_arrow_right'
}
#leftArrow2,
#leftArrow{
    left: 0;
}
#rightArrow2,
#rightArrow{
    right: 0;
}
.equipment a,.product a{ 
    text-decoration: none;
    margin-bottom: 50px;
    width: 100%;
    height: 210px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}
 #content .products-container .container ul{
    display: block;
    width: calc(100% - 60px);
    text-align: center;
    margin: 0 auto;

    padding: 30px 0px 70px !important;
}
.products-container .container li {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    padding: 0 5px 0;
    list-style: none;
    width:calc(25% - 10px);
}
.equipment span, .product span{
    display: block;
    margin-top: 215px;
    font-weight: 600;
    color: #064895;
    text-transform: uppercase;
}
.equipment a:hover span,.product a:hover span{
    color: #ea2b29
}
.motor-oils{
    background-image: url(./img/amsoil-motor-oil.jpg);
}
.transmission-fluids{
    background-image: url(./img/amsoil-transmission.jpg);
}
.filtration-products{
    background-image: url(./img/amsoil-filtration.jpg);
}
.fuel-additives{
    background-image: url(./img/amsoil-fuel-additive.jpg);
}
.gear-lubes{
    background-image: url(./img/amsoil-gear-lube.jpg);
}
.greases{
    background-image: url(./img/amsoil-grease.jpg);
}
.hydraulic-oils{
    background-image: url(./img/amsoil-hydraulic-oil.jpg);
}
.compressor-oils{
    background-image: url(./img/amsoil-compressor-oil.jpg);
}
.other-products{
    background-image: url(./img/amsoil-other-products.jpg);
}
.clothing{
    background-image: url(./img/amsoil-clothing.jpg);
}
.literature{
    background-image: url(./img/amsoil-literature.jpg);
}
.save{
    background-image: url(./img/amsoil-buy-wholesale.jpg);
}
.auto-light-trucks{
    background-image: url(./img/amsoil-auto-truck.jpg);
}
.diesels{
    background-image: url(./img/amsoil-diesel.jpg);
}
.motorcycles{
    background-image: url(./img/amsoil-motorcycles.jpg);
}
.dirt-bikes{
    background-image: url(./img/amsoil-dirt-bikes.jpg);
}
.atvs-utvs{
    background-image: url(./img/amsoil-atv.jpg);
}
.marine{
    background-image: url(./img/amsoil-marine.jpg);
}
.snowmobiles{
    background-image: url(./img/amsoil-snowmobile.jpg);
}
.semi-trucks{
    background-image: url(./img/amsoil-semi-trucks.jpg);
}
.off-road-trucks{
    background-image: url(./img/amsoil-off-road.jpg);
}
.modified-vehicles{
    background-image: url(./img/amsoil-modified.jpg);
}
.motor-homes{
    background-image: url(./img/amsoil-motor-home.jpg);
}
.small-equipment{
    background-image: url(./img/amsoil-small-equipment.jpg);
}

.products-container-home{
    margin-top:30px;margin-bottom:30px;
}

@media only screen and (max-width: 1100px){
    .products-container .container li {
        width:calc(33.333% - 10px);
    }
}
@media only screen and (max-width: 890px){
    #content .products-container .container li {
        width:calc(50% - 10px);
    }
    #content .products-container .container ul{
        padding: 30px 0px;
        margin: 0px; 
        width: 100%
    }
}
@media only screen and (max-width: 530px){
    .products-container .container li {
        width:100%;
        max-width: 315px;
    }
    .products-container{
        padding: 0px 0px 30px;
    }
}


/***************page styles***************/
.page-header{
    text-align: center; 
    margin-bottom: 50px;
}
.page-right,
.page-left{
    width: calc(50% - 15px);
}

.page-left{
    float: left;
    margin-right: 15px;
}
.page-right{
    float: right;
    margin-left: 15px;
}
.page-bottom{
    margin: 50px auto;
    text-align: center;
}
.imagelink{
    text-decoration:none;
}
@media only screen and (max-width: 950px){
    .page-right,
    .page-left{
        width: 100%;
        float: inherit;
        margin: 0px;
    }
    .page-right{
        margin-top: 50px;
    }
}
.red-text{
    color: #ea2b29;
}
.blue-text{
    color: #064895;
}
.global-bottom{
    text-align: center;
    margin-top: 25px;
    margin-bottom: 80px;
    padding-left:20px;padding-right:20px;
}
.one-stop{
    margin: 0px 0px 50px;
    text-align: center;
}
.one-stop a{
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    color: #000;
}
.page-section{
    margin: 0px 0px 30px;
    max-width:800px;
    margin:0px auto;

}
ol.blue-list {
  counter-reset: item;
}

ol.blue-list > li {
    clear: both;
  text-indent: -2em;
  list-style-type: none;
  counter-increment: item;
}

ol.blue-list > li:before {
  display: inline-block;
  padding-right: 0.5em;
  font-weight: bold;
  text-align: right;
  content: counter(item) ".";
  color: #064895;
}
ol.blue-list ul li,
ol.blue-list ol li{
  text-indent: 0px;
}

.dealership-rectangle{
    background-image: url(../images/rounded-rectangle.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 40px; 
    width: 250px;
    height: 135px;
    display: inline-block;
    vertical-align: top;
    font-weight: 500;
    border-radius: 28px;
    box-shadow: 0px 0px 10px #000;
    color: #fff;
    text-decoration: none;
    position: relative;
    z-index: 200;
}
.dealership-rectangle .link-title{
    font-size: 32px;
    font-weight: 700;
    display: block;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.dealership-rectangle .synth{
    background: -webkit-linear-gradient(#fff, #333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 12px;
    margin-top: 10px;
    width: 100%;
    text-align:right;
    padding-right: 30px; 
}
.dealer-image{
    background-image: url(./img/amsoil-dealer-cta.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    width: 255px;
    height: 203px;
    display: inline-block;
    position: relative;
    top: 4px;
    z-index: 100;
}
.inline-logo{
    position: relative;
    top: 5px;
    width: 100px;
}
.side-image{
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.side-image.left{
    background-position: center left;
}
.side-image.right{
    background-position: center right;
}
.side-image.shelves{
    background-image: url(../images/about/retail-thumb.png);
    height: 415px;
    max-height: 415px;
}
.side-image.locator{
    background-image: url(../images/about/comm-map.jpg);
    height: 273px;
    max-height: 273px;
}
.side-image.profits{
    background-image: url(../images/about/comm-profits.jpg);
    height: 299px;
    max-height: 299px;
}
.side-image.distribuion{
    background-image: url(../images/about/distibution-thumb.jpg);
    height: 273px;
    max-height: 273px;
}
.side-image.product-line{
    background-image: url(../images/products-thumb.jpg);
    height: 284px;
    max-height: 284px;
}
.side-image.advertising{
    background-image: url(../images/about/ad-cta.jpg);
    height: 313px;
    max-height: 313px;
}
.side-image.advantages{
    background-image: url(../images/about/comm-thumb.jpg);
    height: 468px;
    max-height: 468px;
}
.side-image.investment{
    background-image: url(../images/about/protect-investment-cta.jpg);
    height: 287px;
    max-height: 287px;
}
.side-image.maintenance{
    background-image: url(../images/about/maintenance.jpg);
    height: 266px;
    max-height: 266px;
}
.side-image.personalized{
    background-image: url(../images/about/comm-personal.jpg);
    height: 300px;
    max-height: 300px;
}
.form-width-limiter{
    display: block;
    margin: 0px auto;
    width: 100%;
    max-width: 600px;
}
@media only screen and (max-width: 950px){
    .side-image.left,
    .side-image.right{
        background-position: center bottom;
        height: 50vw;
    }
    .side-image.right{
        margin-bottom: 30px;
    }
}

label{
    display: block;
    font-size: 20px;
    font-weight: 500;
    margin: 15px 0px 5px;
}
input,
select,
textarea{
    border: 1px solid #ccc;
    padding:7px 5px;
    width: 100%;
    border-radius:5px;
    display:inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
input[type="checkbox"]{
    width: min-content;
    margin: 15px ;
}
.checkbox-container{
    display: block;
    font-size:16px;
}

.checkbox-container input[type="checkbox"]{
    margin:2px 8px 0px 0px;
}
.checkboxes-container{
    margin-top: 20px;
    margin-bottom: 30px;
    padding-left: 10px;
}

textarea{
    max-width: 100%;
    min-height: 75px;
    height: 150px;
    border-radius: 5px;
    display: block;
}
select{
    border-radius:5px;
    display:inline-block;
}
.shop-container{
    text-align: center;
    margin-bottom: 75px;
}
.shop-container img{
    margin: 0px 10px 20px;
}
ol.half-indent,ul.half-indent{
    padding-left: 20px !important;
}
.shop-or{
    display: inline-block;
    vertical-align: top;
    font-size: 50px;
    position: relative;
    top: 75px;
    font-weight: 500;
    font-style: italic;
    margin-right: 15px
}
.arrow{
    position: relative;
    top: 67px;
    left: calc(50% - 201px);
    transform: rotate(-91deg);
    width: 0px;
    height: 0px;
    margin-top: 20px;
}
.arrow:before{
    font-family: "Material Icons";
    content: 'reply';
    font-size: 106px;
    color: #ea2b29;
}
@media only screen and (max-width: 580px){
    .shop-or{
        display: block;
        top: 0px;
        margin: 0px 0px 20px
    }
    .arrow{
        top: 18px;
        left: calc(50% - 54px);
        transform: rotate(-45deg);
        margin-top: 5px;
    }
    .arrow:before{
        font-family: "Material Icons";
        content: 'transit_enterexit';
        font-size: 80px;
        color: #ea2b29;
    }
}

.post-container{
    border-bottom: 1px solid #eee;
    margin-top: 30px;
}

.more-arrow:after{
    font-family: 'Material Icons';
    content: 'keyboard_arrow_right';
    text-transform: none;
    display: inline-block;
    font-size: 28px;
    margin: -14px 0px -10px;
    vertical-align: middle;
}
.back-arrow:before{
    font-family: 'Material Icons';
    content: 'keyboard_arrow_left';
    text-transform: none;
    display: inline-block;
    font-size: 28px;
    margin: -14px 0px -10px -10px;
    vertical-align: middle;
}

.category-select{
    text-align: right;
}
.category-select select{
    max-width: 200px;
}

.pagination-cont a{
    display: inline-block;
    margin: 0px 3px;
    padding: 2px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
}

.pagination-cont a:hover,
.pagination-cont a.on{
    color: #ea2b29;
}
.pagination-cont a.on{
    text-decoration: underline;
}
.tiles-2{
   overflow:hidden;vertical-align: top;
    width:100%;
}
.tiles-2 > div:first-child{
    width:calc(50% - 20px);
    float:left;margin-right:20px;
    vertical-align: top;text-align:center;
}
.tiles-2 > div:last-child{
    width:calc(50% - 20px);
    float:left;margin-left:20px;
    vertical-align: top;text-align:center;
}
.divider-2{
    display:none;
}

h4 > a {text-decoration:none;}

.cta-wrapper-center{
     width: auto;
    display: inline-block;
    text-align: center;
}

@media only screen and (max-width: 580px){
    .divider-2{
        display:inline-block;
        margin-bottom:30px;width:100%;float:left;clear:both;
        border-bottom:2px solid #ddd;
    }
    .tiles-2 > div:first-child,.tiles-2 > div:last-child{
        margin:0px;width:100%;
    }   
}

.products-container-home ul{
    padding-left:0px;
}


.submit-button {    
    color: #111;
    background-color: transparent;
    font-size: 18px;
    line-height: 20px;
    text-decoration: none;
    padding: 11px 20px 11px;
    font-weight: 700;
    display: inline-block;
    margin:50px auto;

    width: auto;
    border: 1px solid #111;
    cursor: hand;
    cursor: pointer;
}

.submit-button:after {
    position: relative;
    left: 0px;
    top: 5px;
    padding-top: 7px;
    margin-top: -5px;
    content: "chevron_right";
    display: inline-block;
    margin-left: 5px;
    font-family: 'Material Icons';
    color: #111;
    font-size: 22px;
    height: 22px;
    width: 13px;
    display: inline-block;
    text-decoration: none;
    line-height: 1px;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}



.submit-button:hover {
    background-color: #111;
    color: #fff;
}

.submit-button:hover:after {
    color: #fff;
}


ul.slideshow {
     width: 100%;
    height:280px;
    overflow:hidden;
    position:relative;
    margin:0;
    padding:0;  
    list-style-type: none  !important;  margin-bottom:20px;
}   

ul.slideshow li {
    position:absolute;
    left:0;
    right:0;
}

ul.slideshow li.show {
    z-index:500;    
}

ul img {
    border:none;    
}


#slideshow-caption {
    width:100%;
    height:40px;
    position:absolute;
    bottom:0;
    left:10;    
    color:#FFFFFF;
    font-family:Arial;
    font-style: normal;
    background: #000000;
    z-index:500;
    font-size:24px;
}

#slideshow-caption .slideshow-caption-container {
    padding: 10px 10px;
    text-align: center;
    width: 100%;
    z-index: 1000;
}

#slideshow-caption h3 {
    margin:0;
    padding:0;  
    font-size:20px;
    font-family:Arial;
    font-weight: normal;
    font-style: italic;
    width: 100%;
    color:#FFFFFF;
}

#slideshow-caption p {
    margin:5px 0 0 0;
    padding:0;
}
.slide_width{
    width:100%
}

@media only screen and (max-width: 1200px){
    ul.slideshow{
        height:37vw;
    }
}

/*************************/

.block-wrapper.pc-banner{
    background-color: #333;
    color: #fff;
    background-image: url(./img/amsoil-pc-banner.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    padding: 50px;
    margin: 0 0 50px;

    font-family: 'Roboto', sans-serif;
}

.block-wrapper.pc-banner *,.block-wrapper.pc-banner *:before,.block-wrapper.pc-banner *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.block-wrapper.pc-banner .block-content{
    max-width: 1200px;
    padding: 0 30px;
    margin: 0 auto;
}

@media only screen and (max-width: 800px){
    .block-wrapper.pc-banner{
        padding: 50px 0;
    }
    .block-wrapper.pc-banner .block-content{
        padding: 0 15px;
    }
}

.pc-banner .bottom > div.watermark,
.pc-banner .bottom div.watermark{
    display: block;
    font-size: 12px;
    opacity: .25;
    margin-top: -21px;
    margin-bottom: 9px;
}


.pc-banner .top{
    font-size: 60px;
    text-align: center;
    font-weight: 600;
    text-shadow: 0 0 7px black;
    margin-bottom: 15px;
}

.pc-banner .top .amsoil{
    font-size: 0;
    color: transparent;
    background-image: url(./img/amsoil-logo-clean.png);
    width: 212px;
    height: 54px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: top;
    margin-top: 6px;
}

.pc-banner .middle{
    color: #f4ba3f;
    font-size: 108px;
    text-align: center;
    font-weight: 800;
    text-shadow: 0 0 15px black;
    margin-bottom: 15px;
}

.pc-banner .bottom > div{
    display: inline-block;
    vertical-align: bottom;
    width: calc(50% - 76px);
    text-shadow: 0 0 7px black;
    padding-left: 30px;
}

.pc-banner .bottom > div:last-of-type{
    width: 143px;
    padding-left: 0;
}

.pc-banner .bottom li{
    text-shadow: 0 0 5px black;
    font-weight: 600;
    padding-bottom: 10px;
    font-size: 18px;
    color: #fff;
}

.pc-banner .bottom  ul li:last-of-type{
    padding-bottom: 0;
}

.pc-banner .bottom  ul{
    margin-bottom: 0;
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}

.pc-banner .button{
    color: #fff;
    background-color: #ea2b29;
    border-color: #ea2b29;
    display: inline-block;
    text-decoration: none;
    background-color: #ea2b29;
    border-color: #ea2b29;
    color: #fff;
    border-radius: 3px;
    padding: 10px 35px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .07px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
}
.pc-banner .button:hover{
    color: #fff;
    background-color: #f35453;
    border-color: #f35453;
}

@media only screen and (max-width: 1260px){
    .pc-banner .top{
        font-size: 50px;
    }

    .pc-banner .middle{
        font-size: 92px;
    }
}

@media only screen and (max-width: 1110px){
    .pc-banner .top{
        font-size: 40px;
    }

    .pc-banner .middle{
        font-size: 74px;
    }
    
    .pc-banner .top .amsoil{
        width: 151px;
        height: 37px;
    }

    .pc-banner .bottom > div:last-of-type,
    .pc-banner .bottom > div{
        width: 100%;
        display: block;
        text-align: center;
    }

    .pc-banner .bottom  ul li:last-of-type{
        padding-bottom: 10px;
    }

    .pc-banner .bottom > div:last-of-type{
        padding-top: 10px;
    }
}

@media only screen and (max-width: 470px){
    .pc-banner .top{
        font-size: 30px;
    }

    .pc-banner .middle{
        font-size: 40px;
    }

    .pc-banner .top .amsoil{
        width: 109px;
        height: 29px;
        margin-top: 2px;
    }
}


p.error{
    background-color: #ea2b29;
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 2px 15px;
}

p.error span{
    display: inline-block;
    background-color: #fff;
    color: #ea2b29;
    width: 20px;
    height: 20px; 
    border-radius: 50%;
    vertical-align: middle;
    line-height: 21px;
    margin-right: 3px;
}