.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400
}

.black-txt-button,
.red-button,
.red-txt-button {
    display: inline-block;
    cursor: pointer;
    text-decoration: none
}

body {
    font-family: Verdana, Helvetica Neue, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
    overflow-x: hidden
}

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

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

.btn.active,
.btn:active {
    box-shadow: none
}

.ui-page:focus {
    outline: -webkit-focus-ring-color auto 0
}

img {
    width: auto;
    max-width: 100%
}

.small-right-margin {
    margin-right: 8px !important
}

.modal-dialog {
    margin-left: auto;
    margin-right: auto
}

.video-popup .modal-dialog {
    width: auto;
    max-width: 1186px
}

.hideScroll {
    overflow: hidden !important
}

.caret {
    border-top: 4px solid #d10f1f;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent
}

.form-control:focus,
a:focus,
input:focus {
    outline: 0;
    outline: -webkit-focus-ring-color auto 0;
    outline-offset: 0;
    box-shadow: none
}

.image-component {
    overflow: hidden
}

    .image-component img {
        float: left;
        width: auto;
        max-width: inherit
    }

.light-grey {
    background: #f3f3f3 !important;
    color: #000 !important
}

.dark-grey,
.dark-grey h2,
.dark-grey h3,
.dark-grey p {
    color: #fff !important
}

.dark-grey {
    background: #464646 !important
}

button,
button:focus,
button:hover {
    outline: 0 !important
}

.red-button {
    background: #d10f1f;
    height: 34px;
    font-size: 12px;
    line-height: 34px;
    color: #fff;
    padding: 0 10px;
    border: none;
    border-radius: 0;
    letter-spacing: -.04rem
}

.btn.red-button:focus {
    color: #fff
}

.black-txt-button b,
.red-button b,
.red-txt-button b {
    padding-left: 5px
}

.red-button:hover {
    text-decoration: none;
    color: #fff;
    background: #970b16
}

.black-txt-button,
.red-txt-button {
    font-size: 12px !important;
    line-height: 1.4em;
    color: #d10f1f;
    padding: 0 15px 0 0;
    border: none;
    position: relative;
    white-space: inherit;
    text-align: left
}

    .black-txt-button:after,
    .black-txt-button:before,
    .red-txt-button:after,
    .red-txt-button:before {
        content: "";
        background: #d10f1f;
        -webkit-border-radius: .2em;
        border-radius: .2em;
        display: block;
        height: 7px;
        position: absolute;
        right: 2px;
        width: 2px
    }

    .black-txt-button:before,
    .red-txt-button:before {
        -webkit-transform: rotate(-40deg);
        transform: rotate(-40deg);
        bottom: 7px
    }

    .black-txt-button:after,
    .red-txt-button:after {
        -webkit-transform: rotate(40deg);
        transform: rotate(40deg);
        bottom: 2px
    }

.black-txt-button {
    color: #000
}

    .black-txt-button:after,
    .black-txt-button:before {
        background: #000
    }

.red-txt-button:hover {
    text-decoration: none;
    color: #970b16
}

    .red-txt-button:hover:after,
    .red-txt-button:hover:before {
        background: #970b16
    }

.black-txt-button:hover {
    text-decoration: none;
    color: #d10f1f !important
}

    .black-txt-button:hover:after,
    .black-txt-button:hover:before {
        background: #d10f1f !important
    }

.social-media ul {
    padding: 0
}

.social-media li {
    width: 30px;
    height: 20px;
    float: left;
    list-style: none
}

    .social-media li a,
    .social-media li.facebook-icon a,
    .social-media li.gplus-icon a,
    .social-media li.twitter-icon a {
        width: 100%;
        height: 100%;
        text-decoration: none;
        overflow: hidden;
        text-indent: -999px;
        background: url(../images/social-media-icons.png) no-repeat;
        display: none
    }

    .social-media li.twitter-icon a {
        background-position: 3px 0
    }

        .social-media li.twitter-icon a:hover {
            background-position: 3px -29px
        }

    .social-media li.facebook-icon a {
        background-position: -32px 0
    }

        .social-media li.facebook-icon a:hover {
            background-position: -32px -29px
        }

    .social-media li.gplus-icon a {
        background-position: -72px -1px;
        margin-left: 5px
    }

        .social-media li.gplus-icon a:hover {
            background-position: -72px -30px
        }

#popup-modal-message .popuptext p {
    font-weight: 600;
    font-size: 12px;
}

@media (min-width:768px) {
    .red-button {
        padding: 0 15px
    }

    .row.row-eq-height {
       display: flex;
    }

   .imgCenter {
      display:block;
      margin-top: auto;
      margin-bottom: auto;
      padding-bottom:20px
   }

   .row.lube-col1.resource-video-cont {
      margin-left: 15px;
      margin-right: 15px;
    }
}

@media (min-width:992px) {
    .red-button {
        padding: 0 20px
    }
    #popup-modal-message .popuptext p {
        font-size: 17px;
    }
}

.home-carousel .item {
    position: relative;
    width: 100%;
    overflow: hidden
}

    .home-carousel .item .image-cont {
        height: 202px;
        position: relative
    }

    .home-carousel .item .carousel-bgImage {
        height: 100%;
        width: inherit;
        max-width: inherit;
        float: right
    }

.home-carousel .carousel-control {
    width: 25px;
    background-image: none;
    opacity: 1
}

    .home-carousel .carousel-control img {
        font-size: 12px;
        padding: 0 15px;
        top: 40%;
        z-index: 5;
        display: inline-block;
        height: auto
    }

    .home-carousel .carousel-control .left,
    .home-carousel .carousel-control .right {
        background-image: none
    }

.carousel-caption {
    position: static;
    width: 100%;
    z-index: 999;
    text-align: left;
    padding: 25px 20px;
    background: #464646;
    bottom: inherit
}

    .carousel-caption h1 {
        margin: 0;
        color: #fff;
        font-size: 24px;
        line-height: 1.1em;
        font-weight: 700;
        padding-bottom: 15px
    }

    .carousel-caption p {
        margin-bottom: 0
    }

.owl-theme .owl-controls {
    margin: 0;
    text-align: initial
}

.owl-buttons {
    height: 0
}

.owl-page-pause {
    display: none
}

.owl-theme .owl-controls .owl-buttons div {
    background: 0 0;
    width: 25px;
    margin: 0;
    padding: 0;
    opacity: 1
}

.home-carousel .carousel-control span {
    position: absolute;
    top: 50%;
    left: 0;
    background-color: #000;
    width: 25px;
    height: 25px;
    margin-top: -12px
}

.owl-next .carousel-arrow:after,
.owl-next .carousel-arrow:before,
.owl-prev .carousel-arrow:after,
.owl-prev .carousel-arrow:before {
    content: "";
    background: #fff;
    -webkit-border-radius: .2em;
    border-radius: .2em;
    display: block;
    height: 10px;
    position: absolute;
    right: 10px;
    width: 2px
}

.cta-logo,
.cta-logo img {
    height: 34px
}

.owl-next .carousel-arrow:before {
    -webkit-transform: rotate(-40deg);
    transform: rotate(-40deg);
    top: 50%;
    margin-top: -8px
}

.owl-next .carousel-arrow:after {
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    top: 50%;
    margin-top: -2px
}

.owl-prev .carousel-arrow:before {
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    top: 50%;
    margin-top: -8px
}

.owl-prev .carousel-arrow:after {
    -webkit-transform: rotate(-40deg);
    transform: rotate(-40deg);
    top: 50%;
    margin-top: -2px
}

.cta-logo {
    margin-left: 15px
}

.owl-pagination {
    counter-reset: numbercounter;
    position: absolute;
    bottom: 14px;
    right: 28px
}

.owl-theme .owl-controls .owl-page span {
    width: 45px;
    height: 3px;
    position: relative;
    margin: 0 0 3px 15px;
    background: #fff;
    opacity: 1;
    border-radius: 0
}

.owl-theme .owl-controls .owl-page.active span {
    height: 6px;
    margin: 0 0 0 15px
}

.owl-pagination .owl-page span:before {
    content: counter(numbercounter);
    counter-increment: numbercounter;
    position: absolute;
    bottom: 10px;
    left: 0;
    color: #fff;
    font-size: 12px
}

.owl-theme .owl-controls .owl-page.active span:before {
    bottom: 13px;
    font-weight: 700
}

.lube-title {
    margin-bottom: 15px
}

    .lube-title h2 {
        font-size: 20px;
        line-height: 24px;
        font-weight: 700;
        color: #000;
        margin-top: 0;
        margin-bottom: 0
    }
	
	.contact-tab-cont .where-to-buy .form-text h2,
    .contact-tab-cont .where-to-buy .form-text a {
        font-size: 20px;
    }

    .pclform .tab-content {
        width: 100%;
    }

@media (min-width:500px) {
    .home-carousel .item .image-cont {
        height: 310px
    }
}

@media (min-width:768px) {

    .cta-logo,
    .cta-logo img,
    .red-button {
        height: 40px
    }

    .red-button {
        font-size: 14px;
        line-height: 40px
    }

    .home-carousel .red-button {
        float: left
    }

    .carousel-caption {
        position: absolute;
        top: initial;
        left: 0;
        width: 50%;
        z-index: 999;
        text-align: left;
        padding: 0 0 0 33px;
        background: 0 0
    }

        .carousel-caption h1 {
            font-size: 27px;
            padding-bottom: 15px
        }

    .image-cont {
        position: relative
    }

        .image-cont:after,
        .image-cont:before {
            content: "";
            background: #fff;
            -webkit-border-radius: .2em;
            border-radius: .2em;
            display: block;
            height: 15px;
            position: absolute;
            left: 50%;
            width: .25em;
            bottom: 10px;
            z-index: 1
        }

        .image-cont:before {
            -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
            margin-left: -5px
        }

        .image-cont:after {
            -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
            margin-left: 5px;
            top: inherit
        }

    .home-carousel .item .image-cont {
        height: 309px
    }

    .lube-title {
        font-size: 24px;
        margin-bottom: 25px
    }
	
	.contact-tab-cont .where-to-buy .lube-title h2,
	.contact-tab-cont .where-to-buy .form-text h2,
    .contact-tab-cont .where-to-buy .form-text a {
        font-size: 25px;
    }

        .lube-title h2 {
            font-size: 24px;
            line-height: 28px
        }
}

@media (min-width:992px) {

    .cta-logo,
    .cta-logo img,
    .red-button {
        height: 47px
    }

    .red-button {
        font-size: 15px;
        line-height: 48px
    }

    .carousel-caption {
        width: 50%;
        padding: 0 0 0 60px
    }

        .carousel-caption h1 {
            font-size: 36px;
            padding-bottom: 30px
        }

    .image-cont:after,
    .image-cont:before {
        bottom: 25px
    }

    .home-carousel .item .image-cont {
        height: 380px
    }

    .lube-title {
        margin-bottom: 40px
    }
	
	.contact-tab-cont .where-to-buy .lube-title {
        margin-bottom: 25px
    }

        .lube-title h2 {
            font-size: 30px;
            line-height: 36px
        }
		
	.contact-tab-cont .where-to-buy .lube-title h2,
	.contact-tab-cont .where-to-buy .form-text h2,
    .contact-tab-cont .where-to-buy .form-text a {
        font-size: 25px;
    }

    .lube-container.searchbox-filter.light-grey .container .row.lube-col1 .col-sm-12.first-column .row.lube-col1.lube-title {
        margin-bottom: 30px;
        margin-top: -10px
    }
}

@media (min-width:1200px) {
    .home-carousel .item .image-cont {
        height: 516px
    }
}

@media (min-width:1366px) {
    .carousel-caption {
        padding: 0 25px 0 120px
    }
}

@media (max-width:991px) {
    .lube-breadcrumb {
        display: none
    }

    .carousel-wrapper,
    .hero-banner {
        margin: 0 -20px
    }
}

@media (max-width:767px) {
    html {
        /* background: #464646; */
    }

    body {
        background: #fff
    }

    .owl-pagination {
        bottom: inherit;
        top: 0;
        margin-top: -8px
    }

    .home-carousel .item.left-align .carousel-bgImage {
        float: left
    }

    .home-carousel .item.center-align .carousel-bgImage {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }

    #popup-modal-message .popuptext p {
       font-size: 14px;
       text-align: left;
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .container {
        width: 732px
    }

    .mainLogo img {
        height: 80px
    }

    .navbar-default .navbar-toggle {
        margin-top: 39px
    }

    .carousel-wrapper,
    .hero-banner {
        margin: 0 -33px
    }

}

.page-title {
    margin: 0;
    padding: 0
}

.dropdown-menu > li > a {
    white-space: inherit
}

.mainLogo,
.navbar-default {
    min-height: 80px
}

    .navbar-default,
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-toggle:focus,
    .navbar-default .navbar-toggle:hover {
        background: 0 0;
        border: none
    }

.navbar-toggle {
    float: left
}

    .navbar-toggle.close-icon span {
        margin-top: 9px;
        border-radius: 6px
    }

        .navbar-toggle.close-icon span:last-child {
            display: none
        }

        .navbar-toggle.close-icon span:first-child {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg)
        }

        .navbar-toggle.close-icon span:nth-child(2) {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            margin-top: -3px
        }

.main-navigation .navbar-nav {
    margin-top: 0;
    margin-bottom: 0
}

.navbar-brand {
    padding: 10px;
    height: auto
}

.navbar-default .navbar-toggle {
    border: none;
    margin: 30px 0 0;
    padding: 0;
    position: absolute;
    border-radius: inherit
}

    .navbar-default .navbar-toggle .icon-bar {
        background: #333;
        height: 3px
    }

.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 5px
}

.main-navigation .navbar-nav > li > a {
    color: #fff
}

.main-navigation .dropdown-submenu.pull-left {
    float: none
}

.main-navigation .navbar-nav > li:last-child {
    border: none
}

.main-navigation .navbar-nav > li > a:hover {
    background: #000;
    color: #fff
}

.main-navigation .dropdown-menu {
    padding: 0;
    margin: 0;
    position: static;
    top: auto;
    left: auto;
    z-index: 1;
    float: none;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 0
}

.caseStudy-image-cont a img,
.handBook-image-cont a img {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: inherit
}

.main-navigation .navbar-nav .col2-menu .dropdown-menu:last-child li.lubeBorder,
.menu-buy-btn p {
    border-top: 2px solid #464646
}

.main-navigation .dropdown-menu > li > a {
    color: #fff;
    font-size: 14px
}

.col3-menu .dropdown-menu:nth-child(2) {
    background: #f3f3f3
}

.col3-menu .dropdown-menu:last-child {
    background: #464646
}

.level2-menu-2 > .dropdown-menu {
    padding: 0
}

.main-navigation .navbar-nav .col2-menu .dropdown-menu:nth-child(2) li a,
.main-navigation .navbar-nav .level2-menu-1 .dropdown-menu:nth-child(2) > li > a,
.main-navigation .navbar-nav .level2-menu-2 .dropdown-menu:nth-child(2) > li > a {
    padding: 15px 0;
    color: #000;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word
}

    .main-navigation .navbar-nav .col2-menu .dropdown-menu:nth-child(2) li a:hover,
    .main-navigation .navbar-nav .level2-menu-1 .dropdown-menu:nth-child(2) > li > a:hover,
    .main-navigation .navbar-nav .level2-menu-2 .dropdown-menu:nth-child(2) > li > a:hover {
        color: #d10f1f;
        background: 0 0
    }

.main-navigation .navbar-nav .has-tertiary .dropdown-submenu > a {
    line-height: 44px;
    color: #fff;
    padding: 0 20px
}

    .main-navigation .navbar-nav .has-tertiary .dropdown-submenu.open > a,
    .main-navigation .navbar-nav .has-tertiary .dropdown-submenu > a:hover {
        background: #d10f1f
    }

.main-navigation .navbar-nav .col3-menu .dropdown-menu:nth-child(2) {
    padding-bottom: 15px
}

.main-navigation .navbar-nav .col3-menu .dropdown-menu h3 {
    padding: 30px 0 15px;
    margin: 0;
    font-size: 16px;
    font-weight: 700
}

.handBook-image-cont {
    height: 282px;
    overflow: hidden;
    margin-top: 15px
}

    .handBook-image-cont a {
        width: 100%;
        height: 100%;
        display: block;
        padding: 0 !important;
        position: relative
    }

.col3-menu .dropdown-menu:last-child {
    padding-bottom: 32px
}

.handBook-image-cont a img {
    position: absolute;
    margin-right: -50%;
    margin-left: inherit;
    width: 100%
}

.main-navigation .navbar-nav .col3-menu .dropdown-menu:last-child li > a.red-button {
    padding: 0 13px;
    line-height: 34px;
    display: inline-block;
    font-size: 12px;
    color: #fff;
    margin-top: 15px
}

    .main-navigation .navbar-nav .col3-menu .dropdown-menu:last-child li > a.red-button:hover {
        background: #970b16
    }

.main-navigation .navbar-nav .col3-menu .dropdown-menu:last-child h3 a {
    color: #fff;
    text-decoration: none
}

.main-navigation .navbar-nav .col3-menu .dropdown-menu:nth-child(3) {
    padding-bottom: 30px;
    font-size: 12px
}

    .main-navigation .navbar-nav .col3-menu .dropdown-menu:nth-child(3) h4,
    .main-navigation .navbar-nav .col3-menu .dropdown-menu:nth-child(3) h4 a {
        font-size: 20px;
        color: #000
    }

    .main-navigation .navbar-nav .col3-menu .dropdown-menu:nth-child(3) .red-txt-button {
        text-align: left;
        display: inline-block;
        padding: 0 20px 0 0;
        color: #d10f1f
    }

        .main-navigation .navbar-nav .col3-menu .dropdown-menu:nth-child(3) .red-txt-button:hover {
            color: #970b16
        }

.caseStudy-image-cont {
    overflow: hidden;
    margin: 15px 0;
    height: 180px
}

.main-navigation .navbar-nav .col3-menu .dropdown-menu li a {
    padding: 15px 0;
    color: #000;
    text-decoration: none
}

    .main-navigation .navbar-nav .col3-menu .dropdown-menu li a:hover {
        color: #d10f1f;
        background: 0 0
    }

.main-navigation .navbar-nav .col3-menu .dropdown-menu li p a {
    font-size: 12px;
    line-height: 16px
}

.navbar-default .main-navigation .navbar-nav .open .dropdown-menu > li.dropdown-submenu > a {
    color: #fff
}

.main-navigation .navbar-nav .has-tertiary .dropdown-submenu > a {
    background: #464646 !important
}

.main-navigation .navbar-nav .has-tertiary .dropdown-submenu.open > a {
    background: #d10f1f !important
}

.caseStudy-image-cont a {
    display: block;
    padding: 0 !important;
    position: relative;
    width: 100%;
    height: 100%
}

    .caseStudy-image-cont a img {
        position: absolute;
        margin-right: -50%;
        height: 100%;
        margin-left: inherit;
        width: auto
    }

.menu-image-cont {
    width: 44px;
    display: inline-block;
    line-height: 40px;
    text-align: center
}

    .menu-image-cont img {
        margin-top: -3px
    }

.menu-image-title {
    width: calc(100% - 44px)
}

    .menu-image-title,
    .menu-image-title p {
        display: inline-block;
        line-height: 40px;
        color: #000
    }

.level2-menu-2 .dropdown-menu:last-child li a:hover p {
    color: #d10f1f
}

.level2-menu-2 .dropdown-menu:last-child li a {
    padding: 0 20px;
    background: 0 0
}

.col3-menu .dropdown-menu {
    padding: 0 20px
}

.menu-buy-btn {
    margin-bottom: 20px
}

    .menu-buy-btn p {
        margin: 0;
        padding: 35px 0;
        border-bottom: 2px solid #464646;
        color: #000
    }

.level2-menu-2 .dropdown-menu:last-child li.misc-menu-item a {
    padding: 15px 20px;
    color: #000
}

    .level2-menu-2 .dropdown-menu:last-child li.misc-menu-item a:hover,
    .main-navigation .navbar-nav .col2-menu .dropdown-menu:last-child li.lubeBorder a:hover {
        color: #d10f1f
    }

.col2-menu .dropdown-menu:nth-child(2),
.has-tertiary > ul > li.level2-menu-1 > .dropdown-menu,
.has-tertiary > ul > li.level2-menu-2 > .dropdown-menu:nth-child(2) {
    background: #f3f3f3
}

.col2-menu .dropdown-menu:last-child,
.col3-menu .dropdown-menu,
.has-tertiary > ul > li.level2-menu-2 > .dropdown-menu:last-child {
    background: #fff
}

    .col2-menu .dropdown-menu:last-child a:hover,
    .col2-menu .dropdown-menu:last-child a:hover p {
        color: #d10f1f;
        background: 0 0
    }

.has-tertiary > ul > li.level2-menu-2 > .dropdown-menu:last-child,
.top-right-nav {
    padding-top: 15px
}

.all-cat-menu a {
    font-weight: 700 !important
}

.main-navigation .col2-menu .dropdown-menu:last-child {
    padding-top: 15px;
    padding-bottom: 10px
}

    .main-navigation .col2-menu .dropdown-menu:last-child .misc-menu-item {
        margin: 0 20px
    }

        .main-navigation .col2-menu .dropdown-menu:last-child .misc-menu-item a {
            margin-top: 10px;
            padding-top: 15px;
            padding-bottom: 15px;
            margin-left: -20px;
            margin-right: -20px;
            color: #000
        }

.misc-menu-item a {
    color: #000 !important
}

.level2-menu-2 .dropdown-menu .menu-items-left,
.level2-menu-2 .dropdown-menu .menu-items-right {
    padding: 0
}

    .level2-menu-2 .dropdown-menu .menu-items-left li,
    .level2-menu-2 .dropdown-menu .menu-items-right li {
        width: 100%;
        list-style: none
    }

        .level2-menu-2 .dropdown-menu .menu-items-left li a,
        .level2-menu-2 .dropdown-menu .menu-items-right li a {
            padding: 15px 20px;
            display: inline-block;
            font-size: 14px;
            line-height: 20px;
            color: #000;
            text-decoration: none
        }

@media (min-width:768px) {
    .main-navigation .navbar-nav > li {
        position: static
    }

    .dropdown-menu {
        width: 100%
    }

    .navbar-header {
        float: none
    }

    .dropdown-menu > li > a {
        padding: 0 20px
    }

    .second-side-menu {
        width: 25%;
        float: left;
        background: #464646;
        padding-top: 20px
    }

    .dropdown-menu > .second-side-menu > a {
        line-height: 44px;
        padding: 0 26px
    }

        .dropdown-menu > .second-side-menu > a:hover {
            background: #d10f1f
        }

    .level2-menu-1 > a,
    .level2-menu-2 > a {
        display: none !important
    }

    .has-tertiary > ul > li.level2-menu-2 > .dropdown-menu:nth-child(2) {
        width: 50%;
        float: left;
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
        padding-left: 15px;
        padding-right: 15px
    }

    .has-tertiary > ul > li.level2-menu-2 > .dropdown-menu:last-child {
        width: 25%;
        float: left;
        padding-top: 20px
    }

    .main-navigation .dropdown-menu.view360nav li {
        padding-top: 12px;
        padding-bottom: 12px
    }

        .main-navigation .dropdown-menu.view360nav li.buy-menu-item,
        .main-navigation .dropdown-menu.view360nav li.misc-menu-item {
            padding-top: 0;
            padding-bottom: 0
        }

        .main-navigation .dropdown-menu.view360nav li.buy-menu-item {
            margin-top: 15px
        }

    .has-tertiary > ul > li.level2-menu-1 > .dropdown-menu {
        width: calc(100% - 196px);
        float: left;
        padding-left: 15px;
        padding-right: 15px
    }

    .open-menu .dropdown-menu {
        display: block
    }

    .second-side-menu a.selected {
        background: #d10f1f !important
    }

    .level2-menu-1 ul.dropdown-menu {
        columns: 3;
        -webkit-columns: 3;
        -moz-columns: 3
    }

    .col2-menu .dropdown-menu:nth-child(2) {
        width: 75%;
        float: left;
        padding: 15px;
        columns: 3;
        -webkit-columns: 3;
        -moz-columns: 3
    }

    .col2-menu .dropdown-menu:last-child {
        width: 25%;
        float: left
    }

    .col3-menu .dropdown-menu {
        width: 33.335%;
        float: left;
        padding: 0 20px
    }

    .level2-menu-1 > .dropdown-menu,
    .level2-menu-2 > .dropdown-menu {
        padding: 20px 0
    }

    .main-navigation .dropdown-menu > li > a {
        position: relative
    }

    li.second-side-menu a.active::after,
    li.second-side-menu a.active::before,
    li.second-side-menu a.selected::after,
    li.second-side-menu a.selected::before,
    li.second-side-menu a:hover::after,
    li.second-side-menu a:hover::before {
        content: "";
        background: #fff;
        -webkit-border-radius: .2em;
        border-radius: .2em;
        display: block;
        height: 13px;
        position: absolute;
        right: 29px;
        width: 2px;
        top: 14px;
        margin-top: -1px
    }

    .level2-menu-1 .dropdown-menu .menu-items-left li a:hover,
    .level2-menu-1 .dropdown-menu .menu-items-left-mid li a:hover,
    .level2-menu-1 .dropdown-menu .menu-items-right li a:hover,
    .level2-menu-1 .dropdown-menu .menu-items-right-mid li a:hover,
    .level2-menu-2 .dropdown-menu .menu-items-left li a:hover,
    .level2-menu-2 .dropdown-menu .menu-items-right li a:hover {
        color: #d10f1f;
        background: 0 0
    }

    li.second-side-menu a.active::before,
    li.second-side-menu a.selected::before,
    li.second-side-menu a:hover::before {
        -webkit-transform: rotate(-40deg);
        transform: rotate(-40deg)
    }

    li.second-side-menu a.active::after,
    li.second-side-menu a.selected::after,
    li.second-side-menu a:hover::after {
        transform: rotate(40deg);
        top: 50%;
        margin-top: -2px
    }

    .main-navigation .navbar-nav .col3-menu .dropdown-menu:last-child li > a.red-button {
        font-size: 14px;
        line-height: 38px;
        margin-top: 20px
    }

    .handBook-image-cont {
        height: 346px
    }

    .col2-menu .dropdown-menu:last-child a {
        display: inline-block;
        width: 100%
    }

    .menu-image-cont,
    .menu-image-title {
        display: table-cell;
        vertical-align: middle
    }

    .menu-image-title {
        padding-left: 10px
    }

        .menu-image-title p {
            float: left;
            margin: 0;
            padding: 0;
            line-height: 20px
        }

            .menu-image-title p:first-child {
                padding-right: 5px
            }

    .main-navigation .col2-menu .dropdown-menu:last-child li {
        padding-top: 12px;
        padding-bottom: 12px
    }

        .main-navigation .col2-menu .dropdown-menu:last-child li.misc-menu-item {
            padding-top: 0;
            padding-bottom: 0
        }

    .level2-menu-2 .dropdown-menu .menu-items-left,
    .level2-menu-2 .dropdown-menu .menu-items-right {
        float: left;
        width: 50%;
        padding: 0 0 0 10px
    }

        .level2-menu-2 .dropdown-menu .menu-items-left li,
        .level2-menu-2 .dropdown-menu .menu-items-right li {
            width: 100%;
            list-style: none
        }

            .level2-menu-2 .dropdown-menu .menu-items-left li a,
            .level2-menu-2 .dropdown-menu .menu-items-right li a {
                padding: 15px 10px
            }

    .level2-menu-1 .dropdown-menu .menu-items-left,
    .level2-menu-1 .dropdown-menu .menu-items-left-mid,
    .level2-menu-1 .dropdown-menu .menu-items-right,
    .level2-menu-1 .dropdown-menu .menu-items-right-mid {
        float: left;
        width: 25%;
        padding: 0 0 0 10px
    }

        .level2-menu-1 .dropdown-menu .menu-items-left li,
        .level2-menu-1 .dropdown-menu .menu-items-left-mid li,
        .level2-menu-1 .dropdown-menu .menu-items-right li,
        .level2-menu-1 .dropdown-menu .menu-items-right-mid li {
            width: 100%;
            list-style: none
        }

            .level2-menu-1 .dropdown-menu .menu-items-left li a,
            .level2-menu-1 .dropdown-menu .menu-items-left-mid li a,
            .level2-menu-1 .dropdown-menu .menu-items-right li a,
            .level2-menu-1 .dropdown-menu .menu-items-right-mid li a {
                padding: 15px 10px
            }

    li.all-cat-menu {
        margin-top: 10px
    }

    .newCatItem,
    .newCatItem + .all-cat-menu {
        margin-top: 20px
    }

        .newCatItem + .newCatItem {
            margin-top: 0
        }

    .caseStudy-image-cont {
        height: 220px
    }
}

@media (min-width:992px) {
    .main-navigation {
        display: inline-block !important;
        margin-top: 42px
    }

    .mainLogo {
        float: left
    }

    .mainHeader-cont {
        
    }

    .level2-menu-1 .dropdown-menu:nth-child(2) li,
    .level2-menu-2 .dropdown-menu:nth-child(2) li,
    .main-navigation,
    .navbar-brand {
        padding: 0
    }

        .main-navigation > ul > li > ul.dropdown-menu {
            left: 0;
            position: absolute;
            margin-top: 47px;
            z-index: 3
        }

        .main-navigation .navbar-nav > li > a {
            color: #000
        }

    .navbar-collapse.collapse {
        display: block !important
    }

    .dropdown-menu > .second-side-menu > a {
        line-height: 48px
    }

    .level2-menu-2 .dropdown-menu:last-child li a {
        background: 0 0
    }

    .main-navigation .navbar-nav .col2-menu .dropdown-menu:nth-child(2) li a,
    .main-navigation .navbar-nav .level2-menu-1 .dropdown-menu:nth-child(2) > li > a,
    .main-navigation .navbar-nav .level2-menu-2 .dropdown-menu:nth-child(2) > li > a {
        padding: 5px 0;
        display: inline-block;
        font-size: 15px;
        line-height: 20px
    }

    .has-tertiary > ul > li.level2-menu-2 > .dropdown-menu:nth-child(2) {
        width: calc(66.6666% - 121px);
        padding-left: 20px;
        padding-right: 20px
    }

    .has-tertiary > ul > li.level2-menu-2 > .dropdown-menu:last-child {
        width: calc(33.3333% - 121px);
        float: left
    }

    .main-navigation .navbar-nav .col2-menu .dropdown-menu {
        padding: 30px 20px
    }

    .level2-menu-1 > .dropdown-menu,
    .level2-menu-2 > .dropdown-menu {
        padding: 30px 0
    }

    .col3-menu .dropdown-menu {
        padding-bottom: 10px;
        padding-top: 10px
    }

    .main-navigation .navbar-nav .col2-menu .dropdown-menu:last-child {
        padding-right: 30px;
        padding-left: 30px
    }

    .main-navigation .navbar-nav .col2-menu .dropdown-menu:nth-child(2) li a {
        padding: 5px 0
    }

    .col2-menu .dropdown-menu:last-child,
    .col3-menu .dropdown-menu:last-child {
        right: 0;
        left: inherit
    }

    .col3-menu .dropdown-menu:nth-child(3) {
        left: 33.3333%
    }

    .main-navigation > .navbar-nav > li {
        padding-left: 40px
    }

        .main-navigation > .navbar-nav > li > a {
            font-size: 18px;
            line-height: 22px;
            font-weight: 700;
            padding: 0
        }

            .main-navigation > .navbar-nav > li.open > a,
            .main-navigation > .navbar-nav > li > a:hover {
                background: 0 0 !important;
                color: #d10f1f !important
            }

                .main-navigation > .navbar-nav > li.open > a:after,
                .main-navigation > .navbar-nav > li.open > a:before {
                    content: "";
                    background: #d10f1f;
                    -webkit-border-radius: .2em;
                    border-radius: .2em;
                    display: block;
                    height: 13px;
                    position: absolute;
                    left: 50%;
                    width: 2px;
                    bottom: 10px;
                    z-index: 1;
                    top: 30px
                }

                .main-navigation > .navbar-nav > li.open > a:before {
                    -webkit-transform: rotate(-50deg);
                    transform: rotate(-50deg);
                    margin-left: -4px
                }

                .main-navigation > .navbar-nav > li.open > a:after {
                    -webkit-transform: rotate(50deg);
                    transform: rotate(50deg);
                    margin-left: 4px
                }

    .main-navigation .navbar-nav .col3-menu .dropdown-menu:last-child li > a.red-button {
        line-height: 46px;
        font-size: 15px;
        margin-top: 30px
    }

    .main-navigation .navbar-nav .col3-menu .dropdown-menu:nth-child(2) h3 {
        padding-bottom: 25px
    }

    .dropdown-menu > .second-side-menu > a .main-navigation .navbar-nav .col3-menu .dropdown-menu li a {
        padding: 5px 0
    }

    .has-tertiary > ul > li.level2-menu-2 > .dropdown-menu:last-child a,
    .main-navigation .dropdown-menu > .second-side-menu > a,
    .main-navigation .dropdown-menu > li.all-cat-menu > a,
    .main-navigation .navbar-nav .col2-menu .dropdown-menu:last-child a {
        font-size: 15px
    }

    .second-side-menu {
        padding-top: 25px;
        width: 242px
    }

    .navbar-default .main-navigation .navbar-nav .open .dropdown-menu > li.dropdown-submenu > a:first-child:hover,
    .navbar-default .main-navigation .navbar-nav .open .dropdown-menu > li.dropdown-submenu > a:focus {
        background: #d10f1f;
        color: #fff
    }

    .menu-image-title p {
        display: inline-block
    }

    .main-navigation .navbar-nav .col3-menu .dropdown-menu h3 {
        font-size: 20px;
        line-height: 24px
    }

    .main-navigation .navbar-nav .col3-menu .dropdown-menu:nth-child(3) h4,
    .main-navigation .navbar-nav .col3-menu .dropdown-menu:nth-child(3) h4 a {
        font-size: 24px;
        line-height: 28px
    }

    .level2-menu-1 .dropdown-menu .menu-items-left li a,
    .level2-menu-1 .dropdown-menu .menu-items-left-mid li a,
    .level2-menu-1 .dropdown-menu .menu-items-right li a,
    .level2-menu-1 .dropdown-menu .menu-items-right-mid li a,
    .level2-menu-2 .dropdown-menu .menu-items-left li a,
    .level2-menu-2 .dropdown-menu .menu-items-right li a {
        padding: 5px 0;
        font-size: 15px
    }

    .level2-menu-1 ul.dropdown-menu {
        columns: 4;
        -webkit-columns: 4;
        -moz-columns: 4
    }

    li.all-cat-menu {
        margin-top: 15px
    }

    .col2-menu .dropdown-menu li.all-cat-menu,
    .level2-menu-1 .dropdown-menu .all-cat-menu,
    .newCatItem,
    .newCatItem + .all-cat-menu {
        margin-top: 30px
    }

    .caseStudy-image-cont {
        height: 130px
    }

        .caseStudy-image-cont a img {
            height: auto
        }

    .handBook-image-cont {
        height: 204px
    }

    .main-navigation .navbar-nav .col3-menu .dropdown-menu li a {
        padding: 5px 0
    }

    .has-tertiary > ul > li.level2-menu-1 > .dropdown-menu {
        width: calc(100% - 242px);
        float: left;
        padding-left: 20px;
        padding-right: 20px
    }
}

@media (max-width:991px) {
    .navbar-collapse.collapse {
        display: none
    }

        .navbar-collapse.collapse.in,
        .navbar-toggle {
            display: block
        }

    .main-navigation .navbar-nav,
    .navbar-nav > li {
        width: 100%
    }

        .main-navigation .navbar-nav > .open > a,
        .main-navigation .navbar-nav > .open > a:focus,
        .main-navigation .navbar-nav > .open > a:hover,
        .main-navigation .navbar-nav > li > a:focus {
            color: #fff;
            background-color: #000
        }

    .mainLogo {
        text-align: center
    }

    .main-navigation .navbar-nav > .active > a,
    .main-navigation .navbar-nav > .active > a:hover,
    .main-navigation .navbar-nav > li > a {
        background: #000
    }

    .main-navigation .navbar-nav > li > a {
        line-height: 18px;
        padding: 15px 40px 15px 20px;
        font-size: 16px;
        font-weight: 700
    }

        .main-navigation .navbar-nav > li > a:after,
        .main-navigation .navbar-nav > li > a:before {
            content: "";
            background: #fff;
            -webkit-border-radius: .2em;
            border-radius: 4px;
            display: block;
            height: 12px;
            position: absolute;
            right: 20px;
            top: 50%;
            width: 2px;
            bottom: 10px;
            z-index: 1;
            margin-top: -5px
        }

        .main-navigation .navbar-nav > li > a:before {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            margin-left: -5px;
            right: 27px
        }

        .main-navigation .navbar-nav > li.open > a:before,
        .main-navigation .navbar-nav > li > a:after {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg)
        }

    .main-navigation .navbar-nav > li.open > a:after {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }

    .navbar-brand,
    .page-title {
        display: inline-block;
        float: none
    }

    .main-navigation .navbar-nav > li {
        border-bottom: 1px solid #fff
    }
}

@media (max-width:767px) {
    .navbar-default .navbar-toggle {
        margin-top: 34px
    }

    .mainLogo img {
        max-height: 60px
    }

    .navbar-collapse {
        margin: 0 -20px
    }

    .main-navigation .navbar-nav,
    .navbar-nav > li {
        width: auto
    }

        .main-navigation .navbar-nav .open .dropdown-menu > li > a {
            position: relative
        }

        .main-navigation .navbar-nav .col3-menu .dropdown-menu:nth-child(3) .red-txt-button {
            line-height: 1.4
        }

        .main-navigation .navbar-nav .open .dropdown-menu > li > a.dropdown-toggle:after,
        .main-navigation .navbar-nav .open .dropdown-menu > li > a.dropdown-toggle:before {
            content: "";
            background: #fff;
            -webkit-border-radius: .2em;
            border-radius: 4px;
            display: block;
            height: 12px;
            position: absolute;
            right: 20px;
            top: 50%;
            width: 2px;
            bottom: 10px;
            z-index: 1;
            margin-top: -5px
        }

        .main-navigation .navbar-nav .open .dropdown-menu > li > a.dropdown-toggle:before {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            margin-left: -5px;
            right: 27px
        }

        .main-navigation .navbar-nav .open .dropdown-menu > li.open > a.dropdown-toggle:before,
        .main-navigation .navbar-nav .open .dropdown-menu > li > a.dropdown-toggle:after {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg)
        }

        .main-navigation .navbar-nav .open .dropdown-menu > li.open > a.dropdown-toggle:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg)
        }

    li.has-tertiary li.dropdown-submenu {
        border-top: 1px solid #fff
    }

    .main-navigation .dropdown-menu.view360nav {
        display: block;
        padding: 12px 0
    }

    .has-tertiary > ul > li.level2-menu-1 > .dropdown-menu li,
    .has-tertiary > ul > li.level2-menu-2 > .dropdown-menu:last-child li,
    .navbar-default .navbar-nav .col2-menu.open .dropdown-menu > li > a {
        padding-left: 20px;
        padding-right: 20px
    }

    .menu-image-title p {
        line-height: inherit;
        margin: 0
    }

    .main-navigation .dropdown-menu {
        min-height: inherit !important
    }

    .top-right-nav {
        padding-bottom: 20px
    }

    .main-navigation .dropdown-menu.view360nav .buy-menu-item,
    .main-navigation .dropdown-menu.view360nav .misc-menu-item {
        display: none
    }

    .main-navigation .navbar-nav > li > a {
        padding-bottom: 10px
    }

    .col2-menu .dropdown-menu:nth-child(2),
    .has-tertiary > ul > li.level2-menu-1 > .dropdown-menu {
        padding-top: 15px
    }

    .has-tertiary > ul > li.level2-menu-2 > .dropdown-menu:last-child {
        background: #f3f3f3
    }

    .level2-menu-2 .dropdown-menu .menu-items-left li:first-child a {
        padding-top: 0
    }

    .menu-image-title {
        width: calc(100% - 50px)
    }

    .main-navigation .col2-menu .dropdown-menu:last-child {
        padding-top: 0;
        padding-bottom: 0
    }

        .main-navigation .col2-menu .dropdown-menu:last-child li.lubeBorder a {
            margin-top: 0
        }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .mainHeader-cont > .container {
        width: 100%
    }

    .navbar-default .navbar-toggle {
        position: absolute;
        left: 50%;
        margin-left: -353px;
        margin-top: 44px;
        margin-bottom: 44px
    }

    .main-navigation {
        padding: 0;
        margin: 0 -18px
    }

        .main-navigation .navbar-collapse {
            margin: 0 -15px;
            padding: 0
        }

    .mainLogo,
    .navbar-default {
        margin-bottom: 0
    }

    .mainHeader-cont .navbar-default.container {
        padding: 0
    }

    ul.nav.navbar-nav.top-right-nav {
        padding-bottom: 15px;
        padding-top: 20px
    }

        ul.nav.navbar-nav.top-right-nav li a {
            padding: 10px 40px 15px 20px
        }
}

@media (min-width:1366px) {

    .level2-menu-2 .dropdown-menu:last-child li a,
    .level2-menu-2 .dropdown-menu:last-child li.misc-menu-item a {
        padding-left: 50px;
        padding-right: 50px
    }
}

.lube-HP-widget {
    padding: 25px 0 5px
}

.news-block ul,
ul.hp-promoList-item {
    margin-top: 0;
    list-style-type: none;
    padding-left: 15px
}

    .news-block ul > li,
    ul.hp-promoList-item > li {
        position: relative;
        list-style: none;
        width: 100%;
        margin-top: 5px
    }

        .news-block ul > li:before,
        ul.hp-promoList-item > li:before {
            content: " ";
            width: 6px;
            height: 6px;
            background: 0 0;
            border: 1px solid;
            display: block;
            border-radius: 6px;
            position: absolute;
            top: 6px;
            left: -15px
        }

.bg-black {
    background: #000;
    color: #fff
}

    .bg-black h2,
    .bg-black h3,
    .bg-black p,
    .bg-grey a.btn.black-txt-button,
    .bg-grey h2.title {
        color: #fff !important
    }

        .bg-grey a.btn.black-txt-button:hover {
            color: #d10f1f !important
        }

        .bg-grey a.btn.black-txt-button:after,
        .bg-grey a.btn.black-txt-button:before {
            background: #fff
        }

.light-grey ul.hp-promoList-item > li:before,
ul.hp-promoList-item > li:before {
    border: 1px solid #000 !important
}

.bg-grey ul.hp-promoList-item > li:before,
.case-study ul.hp-promoList-item > li:before,
.dark-grey ul.hp-promoList-item > li:before {
    border: 1px solid #fff !important
}

.bg-wgite h2.title,
.bg-white a.btn.black-txt-button,
.light-grey a.btn.black-txt-button,
.light-grey h2.title {
    color: #000
}

.case-stydy h2.title,
.dark-grey a.btn.black-txt-button,
.dark-grey h2.title {
    color: #fff
}

    .dark-grey a.btn.black-txt-button:after,
    .dark-grey a.btn.black-txt-button:before {
        background: #fff !important
    }

.bg-white a.btn.black-txt-button:hover,
.light-grey a.btn.black-txt-button:hover {
    color: #d10f1f
}

    .bg-white a.btn.black-txt-button:hover:after,
    .bg-white a.btn.black-txt-button:hover:before,
    .dark-grey a.btn.black-txt-button:hover:after,
    .dark-grey a.btn.black-txt-button:hover:before,
    .light-grey a.btn.black-txt-button:hover:after,
    .light-grey a.btn.black-txt-button:hover:before {
        background: #d10f1f !important
    }

.bg-white a.btn.black-txt-button:after,
.bg-white a.btn.black-txt-button:before,
.light-grey a.btn.black-txt-button:after,
.light-grey a.btn.black-txt-button:before {
    background: #000 !important
}

.bg-black .text-component p.title,
.bg-grey .text-component p.title {
    color: #fff
}

.bg-black .text-component ul.hp-promoList-item > li:before,
.bg-grey .text-component ul.hp-promoList-item > li:before {
    border: 1px solid #fff
}

.bg-lightgrey {
    background: #f3f3f3;
    color: #000
}

    .bg-lightgrey .text-component p.title,
    .bg-white .text-component p.title {
        color: #000 !important
    }

    .bg-lightgrey .text-component ul.hp-promoList-item > li:before,
    .bg-white .text-component ul.hp-promoList-item > li:before {
        border: 1px solid #000
    }

.hp-largeImageText-grid,
.hp-text-grid,
.hp-textImage-grid,
.hp-textVideo-grid {
    min-height: 270px;
    position: relative
}

    .hp-text-grid a.btn,
    .hp-textImage-grid a.btn,
    .hp-textVideo-grid a.btn {
        position: absolute;
        bottom: 20px;
        left: 15px
    }

.hp-text-grid,
.hp-textImage-grid,
.hp-textVideo-grid {
    position: relative;
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
    display: block
}

    .hp-textImage-grid .image-component,
    .hp-textImage-grid .text-component,
    .hp-textVideo-grid .image-component,
    .hp-textVideo-grid .text-component {
        width: 100%
    }

.hp-fullImage-grid {
    position: relative;
    text-align: center;
    margin-bottom: 20px;
    background: #fff;
    height: 290px
}

.fullImageText {
    width: 100%;
    max-width: 280px;
    position: absolute;
    bottom: 20px;
    left: 0
}

.hp-fullImage-grid .text-component {
    width: 140px;
    text-align: left;
    float: right;
    padding-right: 20px;
    padding-left: 10px
}

    .hp-fullImage-grid .text-component h2.title {
        margin: 0 0 15px
    }

.hp-largeImageText-grid {
    position: relative;
    text-align: center;
    margin-bottom: 20px
}

    .hp-largeImageText-grid .text-component {
        position: absolute;
        left: 0;
        bottom: 0;
        width: auto;
        padding: 20px 15px 55px;
        text-align: left
    }

    .hp-largeImageText-grid .image-component h2.largeImage-heading {
        font-weight: 700;
        position: absolute;
        margin: 0;
        padding: 40px 15px 0;
        top: 0;
        text-align: left
    }

    .hp-largeImageText-grid .text-component h3 {
        margin-top: 0
    }

    .hp-largeImageText-grid a.btn {
        bottom: 20px;
        position: absolute
    }

.hp-text-grid .text-component,
.hp-textImage-grid .text-component,
.hp-textVideo-grid .text-component {
    text-align: left;
    padding: 15px 15px 60px
}

    .hp-largeImageText-grid .text-component h3.title,
    .hp-text-grid .text-component h3.title,
    .hp-textImage-grid .text-component h3.title,
    .hp-textVideo-grid .text-component h3.title {
        font-size: 20px;
        margin: 0 0 10px
    }

    .hp-text-grid .text-component h3.title {
        margin-bottom: 40px;
    }  
 
.hp-textImage-grid .image-component,
.hp-textImage-grid .text-component {
    float: left
}

    .hp-textImage-grid .text-component h3.title {
        font-size: 24px;
        color: #000;
        margin: 0 0 10px
    }

    .hp-textImage-grid .text-component p {
        color: #000;
        font-size: 12px;
        margin-bottom: 10px;
        font-weight: 400
    }

.hp-largeImageText-grid .text-component p,
.hp-text-grid .text-component p {
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 15px
}

.hp-largeImageText-grid .text-component p {
    height: 70px;
    overflow: hidden
}

.hp-fullImage-grid .image-component {
    overflow: hidden;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

    .hp-fullImage-grid .image-component img {
        width: auto;
        max-width: inherit
    }

.hp-textlogo-grid {
    min-height: 290px;
    background: #fff;
    position: relative;
    margin-bottom: 20px;
    float: left
}

    .hp-textlogo-grid .hp-textlogo-grid-header {
        background: #464646;
        float: left;
        width: 100%;
        height: 105px;
        display: table
    }

        .hp-textlogo-grid .hp-textlogo-grid-header .image-component {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 40%;
            height: 100%
        }

            .hp-textlogo-grid .hp-textlogo-grid-header .image-component img {
                float: none
            }

        .hp-textlogo-grid .hp-textlogo-grid-header .text-component {
            display: table-cell;
            vertical-align: middle;
            text-align: left;
            width: 60%;
            height: 100%;
            position: relative;
            padding-right: 15px
        }

            .hp-textlogo-grid .hp-textlogo-grid-header .text-component h2 {
                color: #fff !important;
                font-weight: 700;
                float: left;
                font-size: 18px;
                margin: 0;
                padding-top: 5px;
                padding-bottom: 5px
            }

    .hp-textlogo-grid > .text-component {
        float: left;
        width: 100%;
        padding: 15px 15px 60px
    }

        .hp-textlogo-grid > .text-component h3 {
            margin: 0 0 10px;
            font-size: 18px
        }

        .hp-textlogo-grid > .text-component p {
            margin: 0 0 10px
        }

    .hp-textlogo-grid a.btn {
        bottom: 20px;
        position: absolute
    }

.hp-fullImage-grid a.btn.black-txt-button:after,
.hp-fullImage-grid a.btn.black-txt-button:before {
    content: none
}

.hp-fullImage-grid a.btn.black-txt-button b {
    padding-left: 0;
    position: relative
}

.hp-fullImage-grid .black-txt-button b:after,
.hp-fullImage-grid .black-txt-button b:before {
    content: "";
    background: #000;
    -webkit-border-radius: .2em;
    border-radius: .2em;
    display: block;
    height: 7px;
    position: absolute;
    right: -10px;
    width: 2px
}

.hp-fullImage-grid .black-txt-button b:hover:after,
.hp-fullImage-grid .black-txt-button b:hover:before {
    background: #d10f1f
}

.hp-fullImage-grid .black-txt-button b:before {
    -webkit-transform: rotate(-40deg);
    transform: rotate(-40deg);
    bottom: 6px
}

.hp-fullImage-grid .black-txt-button b:after {
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    bottom: 1px
}

.btn-dwnld-text a.btn {
    bottom: 45px !important
}

.btn-dwnld-text .text-component p.pdf-size,
.btn-dwnld-text p.pdf-size {
    position: absolute !important;
    bottom: 20px !important;
    height: auto !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important
}

.btn-dwnld-text .text-component {
    padding-bottom: 90px
}

.hp-largeImageText-grid .text-component h3.title {
    font-size: 20px;
    color: #fff !important;
    margin: 0 0 10px !important;
    height: 40px;
    overflow: hidden
}

.hp-textVideo-grid .text-component a.callToAction {
    font-size: 16px;
    color: #000;
    line-height: 1.1em;
    text-decoration: none
}

.hp-textVideo-grid.bg-grey .text-component a.callToAction,
.hp-textVideo-grid.dark-grey .text-component,
.hp-textVideo-grid.dark-grey .text-component a.callToAction {
    color: #fff
}

.lube-HP-widget .hp-text-grid .text-component h3.title,
.lube-HP-widget .hp-textImage-grid .text-component h3.title {
    height: 40px;
    overflow: hidden
}

.lube-HP-widget .hp-text-grid .text-component p {
    margin-bottom: 10px;
    max-height: 100px;
    overflow: hidden
}

@media (min-width:768px) {
    .lube-HP-widget {
        padding: 40px 0 10px
    }

        .lube-HP-widget .hp-textVideo-grid .text-component h3.title {
            overflow: hidden;
            height: 28px;
            margin-bottom: 20px
        }

        .lube-HP-widget .hp-textImage-grid > .text-component p,
        .lube-HP-widget .hp-textlogo-grid > .text-component p {
            overflow: hidden;
            height: 50px;
            margin-bottom: 10px
        }

        .hp-fullImage-grid,
        .hp-text-grid,
        .hp-textImage-grid,
        .hp-textVideo-grid,
        .lube-HP-widget .hp-text-grid,
        .lube-HP-widget .hp-textImage-grid {
            min-height: 278px;
            margin-bottom: 30px
        }

            .hp-largeImageText-grid .text-component h3.title,
            .hp-text-grid .text-component h3.title,
            .hp-textImage-grid .text-component h3.title,
            .hp-textVideo-grid .text-component h3.title {
                font-size: 20px
            }

    .hp-largeImageText-grid .text-component h3.title {
        height: 55px
    }

    .hp-largeImageText-grid {
        height: 586px;
        overflow: hidden;
        margin-bottom: 30px;
        position: relative
    }

        .hp-largeImageText-grid .text-component {
            padding: 20px 20px 60px
        }

    .hp-fullImage-grid {
        height: 278px
    }

        .hp-fullImage-grid .text-component {
            width: 200px;
            padding-left: 0;
            padding-right: 50px
        }

            .hp-fullImage-grid .text-component h2.title {
                font-size: 25px;
                margin: 0 0 10px;
                color: #000;
                font-weight: 700
            }

    .hp-largeImageText-grid .image-component h2.largeImage-heading {
        padding: 15px;
        font-size: 25px;
        line-height: 32px;
        margin: 30px 0 0
    }

    .hp-largeImageText-grid .text-component p.title {
        font-size: 20px
    }

    .hp-textImage-grid .text-component,
    .hp-textVideo-grid .text-component,
    .hp-textlogo-grid > .text-component {
        padding: 10px 20px 60px
    }

    .hp-text-grid .text-component {
        padding: 20px 20px 60px
    }

    .lube-HP-widget .hp-textImage-grid .text-component,
    .lube-HP-widget .hp-textlogo-grid > .text-component {
        height: calc(100% - 84px)
    }

    .lube-HP-widget .hp-textVideo-grid .text-component {
        padding-top: 20px;
        height: calc(100% - 150px)
    }

    .hp-textlogo-grid {
        min-height: 278px;
        margin-bottom: 30px;
        float: left
    }

        .hp-textlogo-grid .hp-textlogo-grid-header .text-component h2 {
            font-size: 22px
        }

        .hp-textlogo-grid > .text-component h3 {
            font-size: 20px
        }

    .hp-text-grid a.btn,
    .hp-textImage-grid a.btn,
    .hp-textVideo-grid a.btn {
        left: 20px
    }

    .lube-HP-widget .hp-fullImage-grid .black-txt-button {
        font-size: 14px !important
    }

    .hp-textlogo-grid .hp-textlogo-grid-header {
        height: 83px
    }

    .hp-textVideo-grid .text-component a.callToAction {
        font-size: 20px
    }

    .fullImageText {
        max-width: 350px
    }

    .lube-HP-widget .hp-text-grid .text-component h3.title,
    .lube-HP-widget .hp-textImage-grid .text-component h3.title {
        height: 55px
    }
}

@media (min-width:992px) {
    .lube-HP-widget {
        padding: 50px 0 10px
    }

    .hp-text-grid a.btn,
    .hp-textImage-grid a.btn,
    .hp-textVideo-grid a.btn {
        bottom: 20px;
        left: 25px
    }

    .hp-text-grid,
    .hp-textImage-grid,
    .hp-textVideo-grid {
        min-height: 300px;
        margin-bottom: 36px
    }

    .hp-largeImageText-grid {
        height: 640px;
        margin-bottom: 40px;
        position: relative
    }

    .lube-HP-widget .hp-text-grid,
    .lube-HP-widget .hp-textImage-grid,
    .lube-HP-widget .hp-textVideo-grid,
    .lube-HP-widget .hp-textlogo-grid {
        height: 300px !important;
        margin-bottom: 40px;
        display: block
    }

    .hp-largeImageText-grid .image-component h2.largeImage-heading {
        padding: 15px;
        font-size: 30px;
        line-height: 32px;
        margin: 30px 0 0
    }

    .hp-largeImageText-grid .text-component {
        padding: 20px 25px 68px
    }

    .hp-fullImage-grid {
        min-height: 300px;
        margin-bottom: 40px
    }

    .hp-largeImageText-grid .text-component h3 {
        margin-top: 0;
        margin-bottom: 15px;
        height: 55px
    }

    .hp-fullImage-grid .black-txt-button b:after,
    .hp-fullImage-grid .black-txt-button b:before {
        height: 10px
    }

    .hp-fullImage-grid .text-component h3.title {
        font-size: 30px;
        margin: 0 0 15px
    }

    .hp-text-grid .text-component,
    .hp-textImage-grid .text-component,
    .hp-textVideo-grid .text-component {
        font-family: Verdana;
        font-weight: 400
    }

    .lube-HP-widget .hp-text-grid .text-component,
    .lube-HP-widget .hp-textImage-grid .text-component {
        padding-bottom: 67px;
        height: calc(100% - 91px)
    }

    .lube-HP-widget .hp-textImage-grid .text-component {
        padding: 15px 25px 67px
    }

    .lube-HP-widget .hp-textVideo-grid .text-component {
        padding-bottom: 67px;
        height: calc(100% - 166px)
    }

    .hp-textImage-grid .text-component h3.title p {
        font-size: 12px
    }

    .hp-fullImage-grid img {
        height: 100%;
        max-width: inherit
    }

    .hp-fullImage-grid .image-component {
        overflow: hidden
    }

    .hp-textlogo-grid .hp-textlogo-grid-header {
        height: 90px
    }

    .hp-textlogo-grid {
        margin-bottom: 30px;
        float: left
    }

        .hp-textlogo-grid .hp-textlogo-grid-header .text-component h2 {
            font-size: 27px
        }

        .hp-textlogo-grid > .text-component h3 {
            font-size: 24px
        }

        .hp-textlogo-grid a.btn {
            bottom: 20px
        }

    .lube-HP-widget .hp-textlogo-grid > .text-component {
        padding-bottom: 70px
    }

    .btn-dwnld-text .text-component {
        padding-bottom: 100px
    }

    .lube-HP-widget .hp-fullImage-grid .black-txt-button {
        font-size: 15px !important
    }

    .hp-textVideo-grid .text-component a.callToAction {
        font-size: 20px
    }

    .hp-text-grid .text-component,
    .hp-textImage-grid .text-component,
    .hp-textVideo-grid .text-component,
    .hp-textlogo-grid > .text-component {
        padding: 25px 25px 30px
    }

    .lube-breadcrumb ul {
        padding: 30px 0;
        margin: 0;
        float: left
    }

        .lube-breadcrumb ul li {
            list-style-type: none;
            float: left
        }

            .lube-breadcrumb ul li,
            .lube-breadcrumb ul li a {
                text-decoration: none;
                color: #000;
                font-size: 15px;
                line-height: 15px
            }

                .lube-breadcrumb ul li.active,
                .lube-breadcrumb ul li.active a,
                .lube-breadcrumb ul li:hover a {
                    color: #ef293d
                }

                    .lube-breadcrumb ul li.active,
                    .lube-breadcrumb ul li.active a {
                        cursor: default
                    }

                .lube-breadcrumb ul li:not(:first-child):before {
                    content: ' |';
                    margin: 0 8px;
                    color: #ef293d;
                    font-size: 13px
                }
}

.footer-nav-search label,
.footer-section.home .contact-ribbon,
.search-block > .frm-search > .search-group > label,
.show-lan label,
span.btn-title {
    display: none
}

@media (max-width:767px) {

    .hp-fullImage-grid .text-component h2.title,
    .hp-textImage-grid .text-component h3.title {
        font-size: 18px;
        color: #000
    }

    .hp-fullImage-grid .text-component h2.title,
    .hp-largeImageText-grid .image-component h2.largeImage-heading {
        font-weight: 700
    }

    .hp-largeImageText-grid .image-component h2.largeImage-heading {
        padding: 15px;
        line-height: 32px;
        margin: 30px 0 0;
        width: 100%
    }

    .hp-largeImageText-grid .image-component h2.largeImage-heading,
    .hp-largeImageText-grid .text-component h3.title,
    .hp-text-grid .text-component h3.title,
    .hp-textVideo-grid .text-component h3.title {
        font-size: 18px
    }

    .hp-textImage-grid .image-component {
        height: 105px;
        overflow-y: hidden
    }

    .hp-fullImage-grid .image-component {
        height: 290px
    }

    .hp-textVideo-grid .image-component img {
        height: 200px
    }

    .hp-largeImageText-grid,
    .hp-text-grid,
    .hp-textImage-grid,
    .hp-textVideo-grid {
        min-height: 290px
    }

        .hp-largeImageText-grid,
        .hp-largeImageText-grid img {
            height: 640px
        }

    .hp-fullImage-grid a.btn.black-txt-button {
        white-space: inherit;
        text-align: left
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {

    .hp-text-grid.extended,
    .hp-textImage-grid.extended,
    .hp-textVideo-grid.extended {
        float: left
    }
}

@media only screen and (min-width:992px) and (max-width:1169px) {
    .hp-fullImage-grid .text-component {
        right: 5px !important;
        bottom: 35px !important
    }
}

@media (min-width:1200px) {
    .fullImageText {
        max-width: 100%;
        bottom: 30px
    }

    .hp-fullImage-grid .text-component {
        width: 220px;
        padding-right: 40px
    }

        .hp-fullImage-grid .text-component h2.title {
            font-size: 30px
        }
}

.footer-top-nav li {
    float: left;
    list-style-type: none;
    padding: 30px 12px 10px
}

    .footer-top-nav li a {
        text-decoration: none
    }

.footer-nav-search {
    margin-top: 10px
}

    .footer-nav-search .form-group {
        background: #f3f3f3;
        position: relative;
        width: 285px;
        padding: 5px 0
    }

        .footer-nav-search .form-group input.form-control::-webkit-input-placeholder {
            font-style: italic
        }

        .footer-nav-search .form-group input.form-control::-moz-placeholder {
            font-style: italic
        }

        .footer-nav-search .form-group input.form-control:-ms-input-placeholder {
            font-style: italic
        }

.footer-nav-icon-search {
    background: url(../images/icon-search.png) center no-repeat;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9999;
    cursor: pointer;
    border: none;
    text-indent: 9999px
}

    .footer-nav-icon-search:hover {
        background-image: url(../images/search-icon-open.png)
    }

.search-form-control {
    border-radius: 0;
    background: 0 0;
    border: 0;
    box-shadow: none;
    padding-right: 40px;
    font-size: 12px;
    color: #464646;
    font-weight: 400
}

.footer-section > .container {
    width: 100%;
    padding: 0
}

.footer-section .container .row.lube-col1 {
    margin: 0
}

    .footer-section .container .row.lube-col1 .first-column {
        padding: 0
    }

.footer-info-nav li {
    list-style-type: none;
    float: left;
    padding: 10px
}

    .footer-info-nav li a {
        text-decoration: none
    }

    .footer-info-nav li:first-child {
        padding-left: 0
    }

.footer {
    background: #464646;
    position: relative;
    float: left;
    clear: both;
    width: 100%
}

    .footer ul.nav.navbar-nav > li > a {
        padding-right: 35px;
        padding-top: 0;
        padding-bottom: 0
    }

    .footer ul.nav.navbar-nav li a {
        color: #fff;
        font-size: 12px;
        font-weight: 400
    }

    .footer ul.nav.navbar-nav li.dropdown a .caret {
        color: #d10f1f;
        margin-left: 15px
    }

    .footer ul.nav.navbar-nav > li.dropdown.open > a {
        color: #d10f1f
    }

    .footer ul.nav.navbar-nav li.dropdown.open a .caret {
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    .footer .dropdown-menu ul.container {
        padding: 0 20px;
        list-style: none
    }

        .footer .dropdown-menu ul.container li {
            display: block;
            float: left;
            padding: 10px 25px 10px 0
        }

.copyright p,
.copyright p a,
.copyright span {
    color: #fff;
    font-weight: 400
}

.copyright sup {
    margin-right: 5px
}

.copyright p a:hover {
    text-decoration: none
}

footer .nav .open > a,
footer .nav .open > a:focus,
footer .nav .open > a:hover,
footer .nav > li > a:focus,
footer .nav > li > a:hover {
    background: 0 0 !important
}

.footer .dropdown-position {
    position: initial
}

.footer .dropdown-menu-position {
    position: absolute;
    width: 100%
}

.footer .dropdown-menu {
    left: 14px !important
}

.footer-bottom-left ul.navbar-nav li.dropdown {
    position: inherit
}

    .footer-bottom-left ul.navbar-nav li.dropdown .dropdown-menu {
        width: 100%;
        left: 0 !important;
        box-shadow: none;
        border: 0;
        background: #000;
        border-radius: 0
    }

.footer-top-nav ul {
    float: left
}

.social-media {
    float: left;
    clear: both
}

.footer-info-nav ul li a,
.footer-top-nav ul li a {
    color: #000;
    font-weight: 400
}

    .footer-info-nav ul li a:hover,
    .footer-top-nav ul li a:hover {
        color: #d10f1f
    }

.footer-bottom-left ul,
.footer-info-nav ul,
.footer-top-nav ul {
    padding: 0
}

.footer-bottom-left > ul {
    padding-top: 15px;
    padding-bottom: 15px
}

.footer ul.nav.navbar-nav li a:hover {
    text-decoration: none;
    color: #d10f1f;
    background: none;
}

@media (max-width:991px) {
    .footer-top {
        width: inherit
    }
}

@media (max-width:767px) {

    .footer .dropdown-menu ul.container li,
    .footer-top-nav li,
    .social-media ul {
        text-align: center
    }

    .footer-top-nav li {
        padding: 0 0 30px;
        width: 50%
    }

    .footer-top-nav {
        padding: 20px 0
    }

        .footer-top-nav ul {
            margin-bottom: 20px;
            float: left;
            width: 100%;
            position: relative;
            padding-left: 0 !important;
            padding-bottom: 0
        }

            .footer-top-nav ul:after {
                width: 50%;
                height: 2px;
                background: #000;
                content: "";
                position: absolute;
                bottom: 0;
                left: 25%;
                right: 25%
            }

    .footer-info-nav ul li {
        width: 33.333%;
        text-align: center
    }

    .footer-nav-search {
        display: none
    }

    .social-media {
        float: none;
        display: none
    }

        .social-media ul {
            width: 100%
        }

        .social-media li {
            margin: 10px;
            width: 30px;
            height: 20px;
            list-style: none;
            float: none;
            display: inline-block
        }

    .footer-info-nav,
    .footer-info-nav ul {
        width: 100%;
        float: left
    }

    .social-media ul li:first-child {
        float: left
    }

    .social-media ul li:last-child {
        float: right;
        margin-right: 20px
    }

    .footer-top {
        padding: 0 20px
    }

    .footer-info-nav ul {
        display: block
    }

        .footer-info-nav ul li {
            list-style-type: none;
            float: left;
            padding: 5px;
            display: table;
            height: 45px
        }

            .footer-info-nav ul li a {
                display: table-cell;
                float: none;
                vertical-align: middle
            }

    .footer-bottom-left {
        padding: 0;
        float: left;
        width: 100%
    }

        .footer-bottom-left .navbar-nav {
            margin: 0
        }

        .footer-bottom-left ul.nav.navbar-nav > li > a {
            padding: 10px 0
        }

    .footer ul.nav.navbar-nav li.dropdown a .caret,
    .footer ul.nav.navbar-nav li.dropdown.open a .caret {
        float: right;
        margin-top: 8px
    }

    .dropdown-menu ul.container li {
        width: 50%;
        padding: 10px 20px
    }

    .footer {
        padding-top: 20px
    }

    .footer-bottom-left ul.navbar-nav li.dropdown .dropdown-menu {
        margin: 0 -20px;
        width: auto
    }

    .copyright,
    .footer-center-cont {
        padding: 0
    }

    .footer-top-nav li:nth-child(2n+1) {
        padding-right: 10px
    }

    .footer-top-nav li:nth-child(2n) {
        padding-left: 10px
    }
}

@media (min-width:768px) {
    .footer-top-nav ul li:first-child {
        padding-left: 0 !important
    }

    .footer-info-nav {
        float: right
    }

        .footer-info-nav ul {
            float: left
        }

    .footer-bottom-left ul.navbar-nav li a:first-child {
        padding-left: 0
    }

    .footer,
    .footer .dropdown-menu ul.container,
    .footer-top {
        padding: 0 15px
    }

    .copyright span {
        display: inline-block
    }

    .footer-info-nav ul li:last-child {
        padding-right: 0
    }

    footer .social-media {
        margin-top: 5px
    }
}

@media (min-width:992px) {
    .footer-nav-search .typeahead {
        padding-left: 15px;
        width: 230px
    }

    .footer-nav-search ul.typeahead {
        padding-left: 0 !important;
        width: 285px !important
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .footer-top-nav li {
        float: left;
        list-style-type: none;
        padding: 15px !important;
        width: 16.666%
    }

    .footer-top-nav ul {
        width: 100%;
        margin-bottom: 0;
        margin-top: 10px
    }

        .footer-top-nav ul li {
            text-align: center;
            padding: 15px 0
        }

            .footer-top-nav ul li:first-child {
                text-align: left
            }

    .footer-nav-search {
        float: left;
        width: 100%
    }

        .footer-nav-search .form-group {
            width: 100%
        }

            .footer-nav-search .form-group input.search-form-control {
                padding-right: 50px
            }

    .footer-bottom-left ul.navbar-nav li.dropdown:nth-child(2) {
        width: 45%
    }

    .footer-bottom-left ul.navbar-nav li.dropdown:first-child {
        width: 30%
    }

    .footer-bottom-left ul.navbar-nav li.dropdown:last-child {
        width: 25%;
        text-align: right
    }

    .copyright,
    .footer-bottom-left ul.navbar-nav {
        width: 100%
    }

    .copyright {
        float: left;
        margin-top: 30px;
        margin-bottom: 30px
    }

        .copyright a,
        .copyright span:last-child {
            float: right
        }

    .dropdown-menu ul.container li {
        width: 25%
    }

    .footer ul.nav.navbar-nav > li > a {
        padding-right: 25px
    }

    .social-media li {
        width: 40px
    }

    .footer-bottom-left > ul {
        padding-bottom: 30px
    }

    .footer-nav-search .typeahead {
        padding-left: 15px;
        width: calc(100%-15px)
    }

    .footer-nav-search ul.typeahead {
        padding-left: 0 !important;
        width: 100% !important
    }
}

@media (min-width:992px) {
    .footer-top-nav {
        float: left;
        display: inline-block
    }

    .footer-nav-search {
        float: right;
        display: inline-block;
        margin-top: 15px
    }

    .footer-bottom-left {
        float: left;
        width: 50%
    }

    .footer .dropdown-menu ul.container {
        padding: 0 15px
    }

    .copyright {
        float: right;
        width: 50%;
        text-align: right;
        padding: 15px 0;
        line-height: 20px
    }

        .copyright span:last-child {
            padding-left: 20px
        }

    .footer-center-cont.container {
        margin-left: -15px
    }

    .footer-bottom-left ul.navbar-nav > li:last-child > a {
        padding-right: 0
    }
}

@media (min-width:1366px) {

    .dropdown-menu ul.container,
    .footer-bottom,
    .footer-top {
        max-width: 1336px;
        padding-left: 25px;
        padding-right: 25px;
        margin: 0 auto
    }

    .footer-bottom-left .container,
    .footer-bottom-left .dropdown-menu ul.container {
        padding: 0 25px
    }

    .footer-bottom-left .container,
    .footer-bottom.container,
    .footer-center-cont.container {
        width: 1336px
    }

    .footer-center-cont.container {
        margin-left: -25px;
        margin-top: 15px
    }

    .footer-top-nav li a {
        font-size: 15px
    }

    .footer-top-nav li {
        padding: 25px 17px 10px
    }
}

.suncor_cookie-cont {
    background: #f3f3f3;
    display: none
}

.suncor_cookie {
    padding: 20px;
    width: 80%
}

.cookie_statement {
    width: 30%;
    font-size: 24px;
    float: left;
    text-align: center;
    margin-top: 12px;
    margin-bottom: 30px;
    color: #000
}

.cookie_paragraph {
    width: 70%;
    float: left;
    color: #000
}

.cookie-close-btn {
    position: absolute;
    display: inline-block;
    width: 15px;
    height: 15px;
    overflow: hidden;
    top: 25px;
    right: 15px;
    bottom: 50px;
    cursor: pointer
}

    .cookie-close-btn::after,
    .cookie-close-btn::before {
        content: '';
        position: absolute;
        height: 2px;
        width: 100%;
        top: 50%;
        left: 0;
        margin-top: -1px;
        background: #000
    }

    .cookie-close-btn::before {
        transform: rotate(45deg)
    }

    .cookie-close-btn::after {
        transform: rotate(135deg)
    }

@media (max-width:767px) {
    .suncor_cookie {
        width: 100%;
        padding: 20px 0
    }

    .cookie_statement {
        width: 100%;
        font-size: 18px;
        text-align: left;
        margin-bottom: 0;
        margin-top: 0
    }

    .cookie_paragraph {
        width: 100%;
        padding: 15px 15px 15px 0;
        margin-top: -4px;
        margin-bottom: 0
    }

    .cookie-close-btn {
        top: 20px;
        right: 20px
    }
}

.contact-ribbon p,
.hero-banner,
.hero-banner .item .herobanner-image {
    text-align: center
}

@media (min-width:768px) and (max-width:991px) {
    .suncor_cookie {
        width: 100%
    }

    .cookie_statement {
        width: 40%;
        font-size: 20px
    }

    .cookie_paragraph {
        width: 55%
    }

    .cookie-close-btn {
        top: 10px
    }
    .hp-largeImageText-grid .text-component h3.title,
            .hp-text-grid .text-component h3.title,
            .hp-textImage-grid .text-component h3.title,
            .hp-textVideo-grid .text-component h3.title {
                font-size: 18px !important
            }
}

@media (min-width:992px) {
    .suncor_cookie {
        padding-left: 10%;
        width: inherit
    }

    p.cookie_paragraph {
        margin-right: 25px;
        width: 55%
    }

    .footer-top {
        position: relative
    }
}

@media (min-width:1366px) {
    .cookie-close-btn {
        right: -25px
    }

    .scroll_top {
        height: 40px;
        width: 40px;
        background-color: #000;
        position: absolute;
        top: -70px;
        right: 25px;
        display: none;
        cursor: pointer
    }

    span.bottom-arrow:after,
    span.bottom-arrow:before,
    span.top-arrow:after,
    span.top-arrow:before {
        content: "";
        background: #fff;
        -webkit-border-radius: .2em;
        border-radius: .2em;
        display: block;
        height: 11px;
        position: absolute;
        left: 50%;
        width: 2px
    }

    span.top-arrow:before {
        -webkit-transform: rotate(-55deg);
        transform: rotate(-55deg);
        margin-left: 4px;
        margin-top: 12px
    }

    span.top-arrow:after {
        -webkit-transform: rotate(55deg);
        transform: rotate(55deg);
        margin-left: -4px;
        margin-top: 12px
    }

    span.bottom-arrow:before {
        -webkit-transform: rotate(-55deg);
        transform: rotate(-55deg);
        margin-left: 4px;
        margin-top: 19px
    }

    span.bottom-arrow:after {
        -webkit-transform: rotate(55deg);
        transform: rotate(55deg);
        margin-left: -4px;
        margin-top: 19px
    }

    .scroll_top:hover {
        background: #d10f1f
    }
}

.top-right-nav {
    color: #000
}

@media (min-width:768px) and (max-width:991px) {
    .navbar-nav {
        float: none
    }

    .top-right-nav.navbar-nav > li {
        width: 33.333%
    }
}

.contact-ribbon {
    background: #d10f1f
}

    .contact-ribbon p:first-child {
        padding-top: 27px;
    }

    .contact-ribbon p:last-child {
        padding-bottom: 27px
    }

    .contact-ribbon p {
        color: #fff;
        font-size: 16px;
        font-weight: 400;
        margin: 0;
    }

        .contact-ribbon p > a {
            text-decoration: none;
            font-weight: 700;
            color: #fff;
            font-size: 16px;
            position: relative;
            display: inline-block
        }

            .contact-ribbon p > a span {
                margin-left: 10px;
                position: relative;
                width: 20px;
                height: 20px;
                display: inline-block;
                top: 2px
            }

                .contact-ribbon p > a span:after,
                .contact-ribbon p > a span:before {
                    content: "";
                    background: #fff;
                    -webkit-border-radius: .2em;
                    border-radius: .2em;
                    display: block;
                    height: 12px;
                    position: absolute;
                    left: 50%;
                    width: 2px
                }

                .contact-ribbon p > a span:before {
                    -webkit-transform: rotate(-40deg);
                    transform: rotate(-40deg);
                    margin-left: -4px;
                    margin-top: 1px
                }

                .contact-ribbon p > a span:after {
                    -webkit-transform: rotate(40deg);
                    transform: rotate(40deg);
                    margin-left: -4px;
                    margin-top: 9px
                }

@media (min-width:768px) {

    .contact-ribbon p:first-child {
        padding-top: 40px;
    }

    .contact-ribbon p:last-child {
        padding-bottom: 40px
    }

    .contact-ribbon p {
        font-size: 18px;
    }

        .contact-ribbon p > a {
            font-size: 18px
        }
}

@media (min-width:992px) {
    .contact-ribbon {
        margin-left: 0;
        margin-right: 0;
        width: 100%
    }

        .contact-ribbon p:first-child {
            padding-top: 54px
        }

        .contact-ribbon p:last-child {
            padding-bottom: 54px;
        }

        .contact-ribbon p {
            font-size: 20px;
        }

            .contact-ribbon p > a {
                font-size: 20px
            }
}

@media (max-width:991px) {
    .contact-ribbon {
        margin-left: -20px;
        margin-right: -20px
    }

        .contact-ribbon p {
            padding-left: 20px;
            padding-right: 20px
        }
}

@media (min-width:768px) and (max-width:991px) {
    .contact-ribbon {
        margin-left: -15px;
        margin-right: -15px
    }
}

.lube-text-component p {
    font-size: 16px
}

.lube-text-component ul {
    padding-left: 15px;
    list-style: none
}

    .lube-text-component ul li {
        position: relative;
        font-size: 16px
    }

        .lube-text-component ul li:before {
            content: " ";
            width: 4px;
            height: 4px;
            background: 0 0;
            border: 1px solid #000 !important;
            display: block;
            border-radius: 4px;
            position: absolute;
            top: 8px;
            left: -15px
        }

.bg-grey .lube-text-component ul li:before {
    border: 1px solid #fff !important
}

.bg-white .lube-text-component ul li:before,
.light-grey .lube-text-component ul li:before {
    border: 1px solid #000 !important;
    background: #000
}

.page-intro-cont {
    padding-top: 25px;
    padding-bottom: 25px
}

@media (min-width:768px) {

    .lube-text-component p,
    .lube-text-component ul li {
        font-size: 18px
    }

    .page-intro-cont {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .lube-text-component ul li:before {
        width: 6px;
        height: 6px;
        border-radius: 6px;
        top: 12px
    }
}

@media (min-width:992px) {
    .lube-text-component p {
        font-size: 20px;
        margin: 0 0 15px
    }

    .lube-text-component ul li {
        font-size: 20px
    }

    .page-intro-cont {
        padding-top: 50px;
        padding-bottom: 50px
    }
}

.hero-banner {
    position: relative;
    overflow: hidden;
    height: 100%
}

.herobanner-image {
    height: 202px
}

    .herobanner-image img {
        height: 202px;
        width: inherit;
        max-width: inherit;
        float: right;
        margin-right: -60px
    }

.hero-banner .item {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.herobanner-caption {
    position: static;
    width: 100%;
    text-align: left;
    padding: 25px 20px;
    background: #464646
}

    .herobanner-caption h2 {
        margin: 0;
        color: #fff;
        font-size: 24px;
        line-height: 1.1em;
        font-weight: 700;
        padding-bottom: 10px
    }

    .herobanner-caption p {
        margin: 0;
        color: #fff;
        font-size: 18px;
        line-height: 1.3em;
        font-weight: 700
    }

.hero-banner .herobanner-caption a.btn {
    margin-top: 15px
}

@media (min-width:768px) {
    .herobanner-image {
        position: relative
    }

        .herobanner-image img {
            height: inherit;
            max-width: 100%;
            width: 100%;
            float: none;
            margin: 0
        }

    .herobanner-caption {
        position: absolute;
        top: 0;
        left: 0;
        width: 60%;
        text-align: left;
        padding: 0 0 0 33px;
        background: 0 0
    }

        .herobanner-caption h2 {
            font-size: 27px
        }

        .herobanner-caption p {
            font-size: 18px;
            line-height: 1.1em
        }

    .search-group input::-webkit-input-placeholder {
        font-style: italic
    }

    .search-group input::-moz-placeholder {
        font-style: italic
    }

    .search-group input:-ms-input-placeholder {
        font-style: italic
    }
}

@media (min-width:992px) {
    .herobanner-caption {
        padding: 0 0 0 50px
    }

        .herobanner-caption h2 {
            font-size: 36px
        }

        .herobanner-caption p {
            font-size: 26px;
            padding-top: 20px
        }
}

@media (max-width:991px) {

    .hero-banner .herobanner-image img,
    .hero-banner .herobanner-image img.hero-bgImage {
        position: relative
    }
}

@media (min-width:768px) and (max-width:991px) {
    .hero-banner .item .herobanner-image img.hero-bgImage {
        height: 250px
    }
}

.lube-quote-container {
    padding-top: 20px;
    padding-bottom: 45px
}

    .lube-quote-container .lube-quote {
        padding: 0 10%
    }

        .lube-quote-container .lube-quote p {
            font-size: 20px;
            text-align: center;
            padding: 0;
            line-height: 1.2em;
            margin-bottom: 0
        }

            .lube-quote-container .lube-quote p:after {
                width: 49%;
                height: 2px;
                background: #d10f1f;
                content: "";
                position: absolute;
                left: 25.5%;
                right: 25.5%;
                bottom: -15px
            }

@media (min-width:768px) {
    .lube-quote-container {
        padding-top: 35px;
        padding-bottom: 65px
    }

        .lube-quote-container .lube-quote {
            padding: 0 15%
        }

            .lube-quote-container .lube-quote p {
                font-size: 24px;
                padding: 0
            }

                .lube-quote-container .lube-quote p:after {
                    bottom: -25px
                }
}

@media (min-width:992px) {
    .lube-quote-container {
        padding-top: 50px;
        padding-bottom: 95px
    }

        .lube-quote-container .lube-quote {
            padding: 0 20%
        }

            .lube-quote-container .lube-quote p {
                font-size: 30px
            }

                .lube-quote-container .lube-quote p:after {
                    bottom: -35px
                }
}

@media (min-width:1366px) {
    .carousel-wrapper {
        margin: 0 -50px
    }

    .footer-top,
    .mainHeader-cont > .container {
        max-width: 1336px;
        width: inherit
    }

    .hero-banner-main > .container {
        width: 1336px
    }

    .breadcrumb-main-cont .lube-breadcrumb {
        margin: 0px -50px 0
    }
}

.top-right-nav > li > a {
    font-size: 15px;
    color: #000 !important;
    padding: 8px 15px
}

    .top-right-nav > li > a:hover {
        color: #d10f1f !important
    }

.header-search-btn,
.news-btn {
    float: left;
    position: inherit !important
}

    .header-search-btn > a,
    .header-search-btn > a:focus {
        color: #000;
        background: url(../images/search-icon.png) left center no-repeat;
        text-indent: -999px;
        padding: 15px 0 15px 30px;
        text-decoration: none
    }

    .news-btn > a,
    .news-btn > a:focus {
        color: #000;
        background: url(../images/news-icon.png) left center no-repeat;
        padding: 15px 15px 15px 30px;
        text-decoration: none
    }

    .header-search-btn.open.open > a,
    .header-search-btn.open.open > a:hover,
    .header-search-btn > a:hover {
        color: #d10f1f;
        background: url(../images/search-icon-open.png) left center no-repeat #fff
    }

.news-search {
    float: right;
    display: block
}

    .news-btn div.dropdown-menu,
    .news-search div.search-block.dropdown-menu {
        width: 100%;
        border-radius: 0;
        box-shadow: none;
        margin-top: 0;
        padding: 0;
        border: 0
    }

form.frm-search {
    margin: 0
}

.search-block > .frm-search > .search-group > input[type=search] {
    width: 100%;
    padding: 15px !important;
    font-size: 12px;
    color: #464646;
    outline: 0;
    border-radius: 0;
    line-height: 1.42857;
    height: auto;
    background: #f3f3f3;
    border: 0
}

.search-group input::-webkit-input-placeholder {
    font-style: italic;
    font-size: 12px;
    font-weight: 700;
    color: #464646
}

.search-group input::-moz-placeholder {
    font-size: 12px;
    font-weight: 700;
    color: #464646;
    font-style: italic
}

.search-group input:-ms-input-placeholder {
    font-size: 12px;
    font-weight: 700;
    color: #464646;
    font-style: italic
}

.typeahead {
    margin-top: 0;
    padding: 0;
    border-radius: 0;
    border: none;
    width: 100%
}

    .typeahead li,
    .typeahead li a {
        margin-top: -1px
    }

        .typeahead li a {
            padding-top: 10px;
            padding-bottom: 10px;
            display: block !important
        }

        .typeahead li.active a,
        .typeahead li.active a:hover {
            background: #d10f1f
        }

.news-section {
    padding: 0;
    border-radius: 0;
    border: 0;
    box-shadow: none
}

.news-heading {
    background: #464646;
    padding: 20px
}

.news-grid {
    background: #f3f3f3
}

.news-grid-1col {
    padding: 20px
}

.news-heading h2 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    padding-bottom: 40px
}

.news-grid h2,
.news-grid h2 a {
    color: #000;
    text-decoration: none;
    margin: 0;
    font-size: 18px;
    padding-bottom: 15px
}

    .news-grid h2 a:hover {
        color: #d10f1f
    }

.news-grid p {
    font-size: 12px;
    line-height: 16px
}

@media (min-width:768px) {

    .news-btn.open > a,
    .news-btn.open > a:hover,
    .news-btn > a:hover {
        color: #d10f1f;
        padding-left: 30px;
        background: url(../images/news-icon-open.png) left center no-repeat #fff;
        text-decoration: none
    }

    .search-group input::-webkit-input-placeholder {
        font-weight: 400;
        color: #464646;
        font-style: italic;
        font-size: 18px
    }

    .search-group input::-moz-placeholder {
        font-weight: 400;
        color: #464646;
        font-style: italic;
        font-size: 18px
    }

    .search-group input:-ms-input-placeholder {
        font-weight: 400;
        color: #464646;
        font-style: italic;
        font-size: 18px
    }

    .news-heading {
        width: 20%;
        float: left;
        height: 100%;
        padding: 25px 20px
    }

    .news-grid {
        width: 80%;
        float: left;
        height: 100%
    }

    .news-grid-1col {
        width: 50%;
        float: left
    }

    .news-section {
        width: auto !important
    }

    .header-search-btn > a,
    .news-btn > a {
        position: relative;
        font-weight: 700;
        font-size: 12px;
        line-height: 16px
    }

    .header-search-btn.open > a:after,
    .header-search-btn.open > a:before,
    .news-btn.open > a:after,
    .news-btn.open > a:before {
        content: "";
        background: #d10f1f;
        -webkit-border-radius: .2em;
        border-radius: .2em;
        display: block;
        height: 13px;
        position: absolute;
        left: 40%;
        width: 2px;
        bottom: 10px;
        z-index: 1;
        top: 30px
    }

    .header-search-btn.open > a:after,
    .news-btn.open > a:after {
        margin-left: 5px;
        -webkit-transform: rotate(50deg);
        transform: rotate(50deg)
    }

    .header-search-btn.open > a:before,
    .news-btn.open > a:before {
        margin-left: -4px;
        -webkit-transform: rotate(-50deg);
        transform: rotate(-50deg)
    }

    .news-grid h2,
    .news-grid h2 a,
    .news-heading h2 {
        font-size: 18px
    }

        .news-heading h2,
        .news-heading h2 a {
            font-size: 24px;
            font-family: Verdana;
            font-weight: 400;
            color: #fff
        }

            .news-heading h2 a {
                color: #fff;
                text-decoration: none
            }

                .news-heading h2 a:hover {
                    text-decoration: none;
                    color: #d10f1f
                }

    .search-block > .frm-search > .search-group > input[type=search] {
        height: 54px;
        font-size: 18px
    }
}

@media (min-width:992px) {
    .news-search {
        margin-top: -30px
    }

    .top-right-nav {
        float: right;
        display: block;
        padding-top: 0
    }

    ul.nav.navbar-nav.top-right-nav li:last-child a {
        padding-right: 0
    }

    .news-grid-1col,
    .news-heading {
        padding: 40px
    }

        .news-grid-1col:first-child {
            padding-right: 20px
        }

        .news-grid-1col:last-child {
            padding-left: 20px
        }

    .news-btn div.dropdown-menu,
    .news-search div.search-block.dropdown-menu {
        margin-left: 0;
        margin-top: 40px
    }

    .search-block > .frm-search > .search-group > input[type=search] {
        height: 75px;
        font-size: 20px;
        line-height: 26px
    }

    .header-search-btn a {
        padding-right: 0
    }

    .header-search-btn.open > a:after,
    .header-search-btn.open > a:before,
    .news-btn.open > a:after,
    .news-btn.open > a:before {
        top: 45px !important
    }

    .search-group input::-webkit-input-placeholder {
        font-size: 20px;
        line-height: 26px
    }

    .search-group input::-moz-placeholder {
        font-size: 20px;
        line-height: 40px
    }

    .search-group input:-ms-input-placeholder {
        font-size: 20px;
        line-height: 26px
    }

    .news-grid h2,
    .news-grid h2 a,
    .news-heading h2 {
        font-size: 20px;
        line-height: 26px
    }

        .news-heading h2,
        .news-heading h2 a {
            font-size: 30px;
            line-height: 36px
        }
}

@media (max-width:991px) {

    .header-search-btn > a,
    .news-btn > a {
        position: relative;
        display: block;
        text-indent: -999px;
        z-index: 999
    }

    ul.nav.navbar-nav.top-right-nav li {
        width: 33.333%;
        float: left
    }

    .top-right-nav {
        float: left
    }

        .top-right-nav li a {
            background: #fff !important;
            float: left;
            font-size: 14px !important;
            font-weight: 400 !important
        }
}

.country-leftsidebar h3,
.country-leftsidebar h4 {
    font-weight: 700;
    line-height: 1.1em;
    color: #fff;
    margin: 15px
}

@media (max-width:767px) {
    .news-btn {
        margin: 0 -15px;
        float: none
    }

        .news-btn > a,
        .news-btn > a:hover {
            font-size: 12px !important;
            font-weight: 700;
            color: #464646;
            background-position: calc(100% - 20px) center !important;
            background-color: #fff;
            text-indent: 0;
            padding-left: 20px !important;
            width: 100%
        }

        .news-btn.open > a,
        .news-btn.open > a:hover {
            color: #fff;
            background: url(../images/news-icon-white.png) no-repeat #d10f1f;
            background-position: calc(100% - 20px) center;
            padding-left: 20px !important
        }

    ul.nav.navbar-nav.top-right-nav li {
        width: 100%
    }

    .news-grid-1col:first-child {
        padding: 20px 20px 0
    }

    .search-group input::-webkit-input-placeholder {
        font-style: normal
    }

    .search-group input::-moz-placeholder {
        font-style: normal
    }

    .search-group input:-ms-input-placeholder {
        font-style: normal
    }
}

@media (min-width:768px) and (max-width:991px) {

    .header-search-btn.open > a:after,
    .news-btn.open > a:after {
        right: 29px
    }

    .header-search-btn.open > a:before,
    .news-btn.open > a:before {
        right: 37px
    }

    .news-btn.open > a:after,
    .news-btn.open > a:before {
        content: "";
        left: 27%;
        top: 49px
    }

    .header-search-btn.open > a:after,
    .header-search-btn.open > a:before {
        content: "";
        left: 38%;
        top: 49px
    }

    .news-heading h2 {
        padding-bottom: 30px
    }

    .news-heading .red-button {
        padding-left: 11px;
        padding-right: 11px;
        width: auto;
        font-size: 12px;
        line-height: 33px;
        height: 33px
    }

    .news-search {
        margin-right: 15px
    }

    .news-section,
    .search-block {
        width: auto !important;
        margin: 0 -18px
    }

    .search-block {
        border: none;
        box-shadow: none;
        padding: 0;
        left: 0;
        right: 0
    }

    .header-search-btn > a {
        margin-right: 10px
    }

    .header-search-btn,
    .news-btn {
        margin-top: 8px;
        margin-right: 10px
    }
}

button.close {
    text-indent: -9999px
}

    button.close:after,
    button.close:before {
        content: "";
        background: #fff;
        -webkit-border-radius: .2em;
        border-radius: .2em;
        display: block;
        height: 15px;
        position: absolute;
        width: 2px;
        z-index: 2;
        right: 10px;
        top: 5px
    }

    button.close:before {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    button.close:after {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }

.top-header-nav {
    float: right;
    margin: 0;
    display: block
}

.show-country,
.show-lan {
    float: left;
    position: relative
}

.top-header-nav > .show-lan {
    display: none
}

.show-lan .btn-group.open .dropdown-toggle,
.show-lan .btn-group > .btn,
.show-lan .btn-group > .btn:focus,
.show-lan .btn-group > .btn:hover {
    border: 0;
    background: 0 0;
    color: #000;
    font-size: 12px;
    box-shadow: none
}

    .show-lan .btn-group > .btn:hover,
    .show-lan ul.dropdown-menu li a:hover {
        color: #d10f1f !important
    }

.top-header-nav > .show-country > a {
  background: url(../images/nav/region_grey.png) left center no-repeat;
  background-position-y: 4px;
  text-indent: -9999px;
  display: block;
  height: 45px;
  width: 60px;
  padding: 15px 37px
}

.top-header-nav a:focus,
.top-header-nav a:hover {
    text-decoration: none
}

.show-country:after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 3px solid #d10f1f;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    content: "";
    position: absolute;
    top: 12px;
    right: 2px;
    color: #d10f1f
}

.country-modal button.close,
.country-modal button.close:focus,
.country-modal button.close:hover {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 1;
    opacity: 1;
    text-shadow: none
}

.mainHeader-cont .modal-dialog {
    max-width: 1186px;
    width: inherit
}

    .mainHeader-cont .modal-dialog .modal-content {
        position: relative;
        border-radius: 0;
        box-shadow: none;
        border: 0
    }

        .mainHeader-cont .modal-dialog .modal-content .modal-header {
            position: absolute;
            padding: 0;
            border: 0;
            z-index: 1;
            width: 100%
        }

            .mainHeader-cont .modal-dialog .modal-content .modal-header button.close,
            .mainHeader-cont .modal-dialog .modal-content .modal-header button.close:focus,
            .mainHeader-cont .modal-dialog .modal-content .modal-header button.close:hover {
                opacity: 1;
                margin-top: 5px;
                margin-right: 5px;
                position: relative;
                width: 20px;
                height: 20px
            }

.mainHeader-cont .modal-body {
    position: relative;
    float: left;
    padding: 0;
    width: 100%;
    background: #f3f3f3
}

.country-leftsidebar {
    background: #464646;
    float: left;
    width: 100%
}

.country-rightsidebar,
.mainHeader-cont .tab-content {
    background: #f3f3f3;
    width: 100%;
    float: left
}

.country-leftsidebar h3 {
    font-size: 16px
}

.country-leftsidebar h4 {
    font-size: 15px
}

.country-leftsidebar .countryModal-left-bottom p {
    font-size: 12px;
    line-height: 16px;
    color: #fff;
    margin: 15px
}

.country-leftsidebar > nav.countryTab > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    z-index: 1
}

    .country-leftsidebar > nav.countryTab > ul > li,
    .country-leftsidebar > nav.countryTab > ul > li a {
        width: 100%;
        border-radius: 0;
        float: left;
        border: 0;
        color: #fff !important
    }

.country-tabs > .country-leftsidebar > nav.countryTab > ul > li > a {
    color: #fff !important;
    text-align: left;
    border: none;
    padding: 15px;
    cursor: pointer;
    width: 100%;
    height: auto;
    font-size: 16px
}

    .country-tabs > .country-leftsidebar > nav.countryTab > ul > li > a:focus,
    .country-tabs > .country-leftsidebar > nav.countryTab > ul > li > a:hover {
        text-decoration: none
    }

.mainHeader-cont .modal {
    padding: 0 !important;
    top: 9vh;
    overflow-y: auto
}

.mainHeader-cont .modal-footer {
    float: left;
    width: 100%;
    padding: 0;
    border: 0
}

.countryModal-left-bottom {
    float: left;
    position: relative;
    width: 100%
}

.countryTab ul.nav.nav-tabs {
    position: relative
}

.panel-3column {
    width: 100%;
    float: left;
    list-style: none;
    padding-left: 0
}

    .panel-3column .country-block {
        float: left;
        margin-bottom: 65px;
        width: 100%
    }

        .panel-3column .country-block h5 {
            font-weight: 400;
            font-size: 15px;
            line-height: 20px
        }

        .panel-3column .country-block p {
            font-weight: 700;
            font-size: 12px;
            line-height: 16px;
            float: left;
            width: 100%;
            margin-bottom: 0
        }

.country-leftsidebar .country-block {
    color: #000
}

.country-block p a {
    margin-bottom: 0;
    color: #000;
    margin-right: 15px;
    position: relative;
    float: left;
    height: 25px
}

    .country-block p a.select-lan,
    .country-block.selected h5,
    .country-block:hover {
        color: #d10f1f
    }

    .country-block p a:after {
        content: '';
        width: 2px;
        background: #000;
        position: absolute;
        margin-left: 6px;
        margin-top: 1px;
        height: 12px;
        top: inherit
    }

.country-block.selected p a:after {
    background: #d10f1f
}

.country-block p a:last-child:after {
    content: none
}

.country-block p a:focus,
.country-block p a:hover {
    color: #d10f1f;
    text-decoration: none
}

@media (min-width:768px) {

    button.close:after,
    button.close:before {
        background: #000
    }

    .country-leftsidebar {
        float: left;
        width: 25%
    }

        .country-leftsidebar h3 {
            font-size: 14px
        }

        .country-leftsidebar p {
            font-size: 12px
        }

    .country-rightsidebar {
        width: 75%;
        padding: 15px 35px 15px 20px
    }

    .country-tabs > .country-leftsidebar > nav.countryTab > ul > li > a {
        font-size: 14px;
        position: relative
    }

        .country-tabs > .country-leftsidebar > nav.countryTab > ul > li > a.active {
            background: #d10f1f
        }

            .country-tabs > .country-leftsidebar > nav.countryTab > ul > li > a.active::after,
            .country-tabs > .country-leftsidebar > nav.countryTab > ul > li > a.active::before,
            .country-tabs > .country-leftsidebar > nav.countryTab > ul > li > a:hover::after,
            .country-tabs > .country-leftsidebar > nav.countryTab > ul > li > a:hover::before {
                content: "";
                background: #fff;
                -webkit-border-radius: .2em;
                border-radius: .2em;
                display: block;
                height: 13px;
                position: absolute;
                right: 15px;
                width: 2px;
                top: 16px;
                margin-top: -2px
            }

    .country-tabs > .country-leftsidebar > nav.countryTab > ul > li.loregion > a.active::after,
    .country-tabs > .country-leftsidebar > nav.countryTab > ul > li.loregion > a.active::before,
    .country-tabs > .country-leftsidebar > nav.countryTab > ul > li.loregion > a:hover::after,
    .country-tabs > .country-leftsidebar > nav.countryTab > ul > li.loregion > a:hover::before {
        content: "";
        background: #fff;
        -webkit-border-radius: .2em;
        border-radius: .2em;
        display: block;
        height: 13px;
        position: absolute;
        right: 15px;
        width: 2px;
        top: 26px;
        margin-top: -2px
    }

    .country-tabs > .country-leftsidebar > nav.countryTab > ul > li.loregion > a.active::before,
    .country-tabs > .country-leftsidebar > nav.countryTab > ul > li.loregion > a:hover::before,
    .country-tabs > .country-leftsidebar > nav.countryTab > ul > li > a.active::before,
    .country-tabs > .country-leftsidebar > nav.countryTab > ul > li > a:hover::before {
        -webkit-transform: rotate(-40deg);
        transform: rotate(-40deg)
    }

    .country-tabs > .country-leftsidebar > nav.countryTab > ul > li.loregion > a.active::after,
    .country-tabs > .country-leftsidebar > nav.countryTab > ul > li.loregion > a:hover::after,
    .country-tabs > .country-leftsidebar > nav.countryTab > ul > li > a.active::after,
    .country-tabs > .country-leftsidebar > nav.countryTab > ul > li > a:hover::after {
        transform: rotate(40deg);
        top: 50%
    }

    .panel-3column li {
        width: 33.33%;
        float: left;
        padding-right: 15px
    }

    .countryModal-left-bottom:after {
        height: 1px;
        background: #fff;
        content: "";
        position: absolute;
        top: 0;
        left: 10%;
        right: 10%
    }
}

@media (min-width:992px) {
    .countryModal-left-bottom:after {
        left: 25px;
        right: 25px
    }

    .top-header-nav {
        display: inline-block;
        float: none;
        margin-left: 0px;
        margin-top: 0px
    }

        .top-header-nav > .show-lan {
            display: block
        }

    .show-lan ul.dropdown-menu {
        border-radius: 0;
        box-shadow: none;
        border: 0;
        margin-top: -5px;
        padding: 0 12px;
        /*min-width: inherit*/
    }

        .show-lan ul.dropdown-menu li a,
        .show-lan ul.dropdown-menu li a:focus,
        .show-lan ul.dropdown-menu li a:hover {
            padding: 7px 0;
            font-size: 12px;
            color: #000;
            background: no-repeat;
            outline: 0
        }
    .show-lan .btn-group > .btn {
      position: relative;
      padding: 12px 20px 5px 0px;
    }
      .show-lan .btn-group > .btn span.caret {
          margin-left: 10px;
          color: #d10f1f;
          display: none
      }

  

        .show-lan .btn-group > .btn:after {
            display: inline-block;
            width: 0;
            height: 0;
            margin-left: 2px;
            vertical-align: middle;
            border-top: 3px solid #d10f1f;
            border-right: 3px solid transparent;
            border-left: 3px solid transparent;
            content: "";
            position: absolute;
            top: 21px;
            right: 10px;
            color: #d10f1f
        }

    .show-lan .btn-group.open > .btn .caret {
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    .mainHeader-cont .modal-dialog .modal-content .modal-header button.close,
    .mainHeader-cont .modal-dialog .modal-content .modal-header button.close:focus,
    .mainHeader-cont .modal-dialog .modal-content .modal-header button.close:hover {
        margin-top: 10px;
        margin-right: 10px
    }

    .top-header-nav > .show-country > a {
        padding: 12px 25px 5px 90px;
        font-size: 12px;
        text-indent: 0;
        color: #484848;
        width: auto;
        outline: 0
    }

        .top-header-nav > .show-country > a:hover {
            color: #d10f1f
        }

    .show-country:after {
        top: 21px;
        right: 14px
    }

    .country-leftsidebar h3 {
        font-size: 20px;
        line-height: 26px;
        margin: 40px 25px 30px
    }

    .country-leftsidebar > nav.countryTab > ul {
        margin-bottom: 25px;
        float: left
    }

    .countryModal-left-bottom {
        padding-top: 10px;
        padding-bottom: 15px
    }

    .country-leftsidebar h4 {
        font-size: 15px;
        line-height: 20px;
        margin: 15px 25px
    }

        .country-leftsidebar h4 sup {
            font-weight: 400
        }

    .country-leftsidebar p {
        font-size: 12px;
        margin: 15px 25px !important
    }

    .country-tabs > .country-leftsidebar > nav.countryTab > ul > li > a {
        font-size: 15px;
        line-height: 20px;
        padding: 15px 25px
    }

    .country-rightsidebar {
        margin-top: 30px;
        padding: 15px 50px
    }

    .mainHeader-cont .navbar-default.container {
        width: 100%;
        padding: 0
    }

    .panel-3column .country-block h5 {
        margin-top: 0
    }

    .panel-3column .country-block {
        margin-bottom: 15px;
        height: 100px;
        padding-right: 25px
    }
}

@media (min-width:1366px) {
    .panel-3column .country-block {
        padding-right: 50px
    }
}

@media (max-width:767px) {
    .dropdown.header-search-btn a {
        display: none
    }

    .top-header-nav.country-modal {
        margin-top: -60px
    }

    .mainHeader-cont .modal-dialog button.close,
    .mainHeader-cont .modal-dialog button.close:focus,
    .mainHeader-cont .modal-dialog button.close:hover {
        color: #fff
    }

    .mainHeader-cont .modal-dialog {
        margin: 25px auto
    }

    .mainHeader-cont .modal-footer {
        padding: 0;
        text-align: left;
        background: #464646;
        color: #fff
    }

        .mainHeader-cont .modal-footer .countryModal-left-bottom,
        mainHeader-cont .tab-pane {
            padding: 15px
        }

    nav.countryTab {
        width: 100%;
        height: 50px
    }

    .countryTab ul {
        border-bottom: 0;
        position: relative
    }

    .country-leftsidebar h3 {
        margin: 20px 40px 20px 15px
    }

    .country-leftsidebar > nav.countryTab > ul > li,
    .country-leftsidebar > nav.countryTab > ul > li a {
        background: #d10f1f
    }

    .country-tabs > .country-leftsidebar > nav.countryTab > ul:after,
    .country-tabs > .country-leftsidebar > nav.countryTab > ul:before {
        content: "";
        background: #fff;
        -webkit-border-radius: .2em;
        border-radius: .2em;
        display: block;
        height: 13px;
        position: absolute;
        top: 20px;
        width: .2em;
        z-index: 2
    }

    .country-tabs > .country-leftsidebar > nav.countryTab > ul:after {
        right: 10000px;
        -webkit-transform: rotate(-120deg);
        transform: rotate(-135deg)
    }

    .country-tabs > .country-leftsidebar > nav.countryTab > ul:before {
        right: 10000px;
        -webkit-transform: rotate(-40deg);
        transform: rotate(-45deg)
    }

    .countryTab ul.open a {
        position: relative;
        display: block;
        height: 25px
    }

    .countryTab li {
        display: block
    }

    .countryTab a {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    [class] .countryTab a.active {
        border: 0;
        z-index: 1;
        background: #464646;
        height: 25px
    }

    .country-block p a {
        width: 50%;
        float: left;
        margin-bottom: 12px;
        margin-right: 0
    }

        .country-block p a:after {
            content: none
        }

    ul.panel-3column {
        padding: 20px
    }

    nav.navbar.navbar-default {
        position: static;
        margin-bottom: 0
    }

    .search-block > .frm-search > .search-group > input[type=search] {
        background: url(../images/icon-search.png) center no-repeat #f3f3f3;
        background-position: calc(100% - 20px) center;
        height: 44px;
        padding: 15px 20px !important
    }

    .header-search-btn {
        float: inherit
    }

    .dropdown-menu.search-block {
        display: block;
        position: static;
        top: inherit;
        width: inherit;
        float: inherit;
        margin: 0 -20px;
        border: none;
        padding: 0;
        border-radius: 0;
        box-shadow: none
    }

    .mainHeader-cont .navbar-default.container {
        padding: 0;
        width: inherit;
        margin: 0 15px
    }

    .panel-3column .country-block {
        float: left;
        margin-bottom: 0;
        width: 100%
    }
}

@media (min-width:768px) and (max-width:991px) {
    .top-header-nav.country-modal {
        margin-top: -85px;
        margin-right: 10px
    }

    .country-leftsidebar {
        padding: 15px 0
    }

    .country-block p a:nth-child(2):after {
        content: none
    }

    .top-header-nav > .show-country > a {
        height: 55px
    }

    .show-country {
        float: right;
        margin-top: 4px
    }

        .show-country:after {
            top: 25px
        }

    .news-heading {
        width: 25%
    }

    .news-grid {
        width: 75%;
        padding-left: 15px;
        padding-right: 15px
    }

    .news-grid-1col {
        padding: 25px 15px
    }

    .country-block p a:last-child {
        margin-top: 0;
        margin-right: 0;
        float: left
    }

    .panel-3column li:last-child > div {
        margin-bottom: 0
    }
}

@media (max-width:991px) {
    form.frm-search .search-group {
        position: relative
    }

    .mainHeader-cont .modal {
        top: 2vh
    }

    form.frm-search .search-group .search-img {
        position: absolute;
        background: url(../images/icon-search.png) center no-repeat #f3f3f3;
        background-position: calc(100% - 20px) center;
        content: '';
        right: 0;
        top: 0;
        width: 60px;
        height: 44px
    }

    .search-block > .frm-search > .search-group > input[type=search] {
        padding-right: 50px !important
    }
}

@media (min-width:768px) and (max-width:991px) {
    form.frm-search .search-group .search-img {
        background: url(../images/search-tab-arrow.png) center no-repeat #f3f3f3 !important;
        content: '';
        top: 5px;
        height: 44px
    }
}

.featured-bc .hp-textImage-grid h3,
.featured-bc .hp-textImage-grid p {
    color: #fff;
    height: 50px;
    overflow: hidden
}

.featured-bc ul.nav.nav-tabs {
    border: 0;
    margin-bottom: 0
}

    .featured-bc ul.nav.nav-tabs li {
        border-bottom: 2px solid #000;
        width: 50%
    }

        .featured-bc ul.nav.nav-tabs li a,
        .featured-bc ul.nav.nav-tabs li a:hover {
            border: 0;
            border-radius: 0;
            font-size: 14px;
            text-align: center;
            background: 0 0;
            color: #000;
            margin-right: 0
        }

        .featured-bc ul.nav.nav-tabs li.active a {
            font-weight: 700;
            color: #fff;
            background: #000;
            text-align: center
        }

.featured-bc .hp-textImage-grid .text-component h3 {
    color: #fff;
    font-size: 18px
}

.featured-bc .hp-textImage-grid {
    min-height: 230px;
    float: left
}

    .featured-bc .hp-textImage-grid .black-txt-button {
        color: #fff
    }

        .featured-bc .hp-textImage-grid .black-txt-button:hover {
            color: #d10f1f
        }

.featured-bc .black-txt-button:after,
.featured-bc .black-txt-button:before {
    background: #fff
}

.featured-bc .black-txt-button:hover:after,
.featured-bc .black-txt-button:hover:before {
    background: #d10f1f
}

.featured-bc .hp-textImage-grid .image-component img {
    width: 100%;
    height: auto
}

.featured-bc .hp-textImage-grid .text-component {
    padding: 15px 20px 45px
}

    .featured-bc .hp-textImage-grid .text-component h3 {
        height: 45px;
        overflow: hidden
    }

.popular-bc-cont .bg-grey {
    background: #4d4d4d !important
}

.popular-bc-cont .hp-textImage-grid .black-txt-button {
    left: 15px
}

.featured-bc .hp-textImage-grid .image-component {
    height: 85px;
    overflow: hidden
}

@media (min-width:768px) {
    .featured-bc .hp-textImage-grid .text-component {
        padding: 15px 20px 40px
    }

    .featured-bc .hp-textImage-grid .image-component {
        height: 65px
    }

    .featured-bc .tab-content .tab-pane .lube-title {
        margin-bottom: 30px
    }

    .popular-bc-cont .hp-textImage-grid .black-txt-button {
        left: 20px
    }
}

@media (min-width:992px) {
    .featured-bc ul.nav.nav-tabs {
        width: 350px
    }

        .featured-bc ul.nav.nav-tabs li a,
        .featured-bc ul.nav.nav-tabs li a:hover {
            font-size: 20px
        }

    .featured-bc .hp-textImage-grid {
        margin-bottom: 60px;
        height: 250px !important
    }

        .featured-bc .hp-textImage-grid .text-component {
            padding: 20px 25px 45px
        }

            .featured-bc .hp-textImage-grid .text-component h3 {
                font-size: 18px
            }

    .popular-bc-cont .hp-textImage-grid {
        min-height: 259px
    }

        .popular-bc-cont .hp-textImage-grid .black-txt-button {
            left: 25px
        }
}

@media (min-width:1200px) {
    .featured-bc .hp-textImage-grid .text-component h3 {
        font-size: 20px
    }
}

@media (max-width:767px) {
    .featured-bc ul.nav.nav-tabs {
        margin-left: -20px;
        margin-right: -20px
    }

    .featured-bc .hp-textImage-grid .text-component {
        padding: 15px 15px 45px
    }

    .featured-bc .border-top:before {
        top: 5px;
        width: 40%;
        left: 30%;
        right: 30%
    }
}

@media (min-width:768px) and (max-width:991px) {
    .featured-bc .tab-content .col-sm-3 {
        width: 50%
    }

    .featured-bc .popular-bc-cont,
    .featured-bc ul.nav.nav-tabs {
        width: 66.66%
    }

    .featured-bc .hp-textImage-grid .text-component h3 {
        min-height: 38px
    }

    .featured-bc .fourth-column .hp-textImage-grid,
    .featured-bc .third-column .hp-textImage-grid {
        margin-bottom: 45px
    }

    .popular-bc-cont .hp-textImage-grid .black-txt-button {
        bottom: 15px
    }
}

.lube-related-cat .hp-textImage-grid .text-component {
    padding: 15px 25px 50px
}

    .lube-related-cat .hp-textImage-grid .text-component h3 {
        margin: 0;
        height: 50px;
        padding-bottom: 10px;
        overflow: hidden
    }

.lube-related-cat .hp-textImage-grid a.btn {
    position: absolute;
    bottom: 25px
}

.lube-related-cat .hp-textImage-grid.extended a.btn {
    bottom: 30px
}

.lube-related-cat .hp-textImage-grid .text-component p {
    margin: 0;
    height: 68px;
    overflow: hidden
}

@media (max-width:767px) {
    .lube-related-cat .hp-textImage-grid.extended a.btn {
        bottom: 20px
    }

    .lube-related-cat .hp-textImage-grid {
        min-height: 270px
    }

        .lube-related-cat .hp-textImage-grid .image-component {
            height: 90px;
            overflow-y: hidden
        }

        .lube-related-cat .hp-textImage-grid .text-component {
            padding: 10px 15px 45px
        }

            .lube-related-cat .hp-textImage-grid .text-component h3 {
                font-size: 16px;
                min-height: initial
            }

        .lube-related-cat .hp-textImage-grid.small-text .text-component h3 {
            font-size: 14px
        }

    .lube-related-cat.more-about-section .hp-textImage-grid .text-component h3 {
        min-height: 40px
    }
}

@media (min-width:768px) and (max-width:991px) {
    .lube-related-cat .hp-textImage-grid .text-component h3 {
        font-size: 18px;
        min-height: 35px
    }

    .lube-related-cat .hp-textImage-grid.small-text .text-component h3 {
        font-size: 14px
    }

    .lube-related-cat .hp-textImage-grid .text-component p {
        margin: 0
    }

    .lube-related-cat .hp-textImage-grid a.btn {
        left: 25px
    }

    .lube-related-cat .hp-text-grid,
    .lube-related-cat .hp-textImage-grid,
    .lube-related-cat .hp-textVideo-grid {
        display: inline-block
    }
}

@media(min-width:992px) {
    .lube-related-cat .hp-textImage-grid {
        min-height: 260px;
        float: left
    }

        .lube-related-cat .hp-textImage-grid .text-component {
            padding: 20px 25px 50px
        }

            .lube-related-cat .hp-textImage-grid .text-component h3 {
                font-size: 20px
            }

        .lube-related-cat .hp-textImage-grid.small-text .text-component h3 {
            font-size: 16px
        }

        .lube-related-cat .hp-textImage-grid.extended .text-component h3 {
            height: 46px;
            margin-bottom: 10px;
            padding-bottom: 0
        }

        .lube-related-cat .hp-textImage-grid.extended .text-component p {
            height: 100px
        }
}

@media(min-width:1366px) {
    .lube-related-cat .hp-textImage-grid.extended .text-component h3 {
        height: 43px
    }
}

.fact-figure-cont {
    margin-bottom: 15px;
    width: 100%;
    display: table
}

    .fact-figure-cont .col-sm-6 {
        width: 50%;
        float: left
    }

.fact-figure {
    padding: 20px 15px;
    width: 50%;
    float: none;
    display: table-cell;
    vertical-align: middle;
    background: 0 0;
    position: relative;
    z-index: 1
}

    .fact-figure h3,
    .fact-figure p {
        font-size: 18px;
        font-weight: 700;
        margin: 0
    }

    .fact-figure p {
        font-size: 12px;
        padding-top: 5px
    }

    .fact-figure:nth-child(2n+1) {
        padding-right: 25px
    }

        .fact-figure:nth-child(2n+1):before,
        .fact-figure:nth-child(2n+2):before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 10px;
            height: 100%;
            background: #fff;
            z-index: -1
        }

    .fact-figure:nth-child(2n+2) {
        padding-left: 25px
    }

        .fact-figure:nth-child(2n+2):before {
            left: 10px;
            right: 0
        }

.fact-figure-cont.extended .fact-figure {
    display: block;
    width: 100%;
    padding-right: 15px
}

    .fact-figure-cont.extended .fact-figure:before {
        right: 0;
        left: 0
    }

    .fact-figure-cont.extended .fact-figure h3 {
        width: 50%;
        display: table-cell;
        text-align: right;
        padding-right: 15px
    }

.fact-figure h3 {
    text-align: center
}

.featured-resource-grid .hp-text-grid .text-component h3 {
    margin-top: 0
}

@media (min-width:768px) {

    .fact-figure h3,
    .fact-figure p {
        vertical-align: middle
    }

    .fact-figure h3 {
        font-size: 20px;
        display: table-cell;
        width: 50%;
        text-align: right;
        padding-right: 15px
    }

    .fact-figure p {
        display: table-cell;
        padding: 0
    }

    .fact-figure-cont.extended .fact-figure {
        width: calc(50% - 10px)
    }

        .fact-figure-cont.extended .fact-figure:before {
            right: 0
        }
}

@media (min-width:992px) {
    .fact-figure-cont {
        max-width: 568px
    }

        .fact-figure-cont:last-child {
            margin-bottom: 0
        }

    .fact-figure {
        padding: 15px
    }

        .fact-figure h3 {
            font-size: 30px
        }
}

@media (max-width:767px) {
    .fact-figure-cont:last-child {
        margin-bottom: 25px
    }

    .fact-figure h3 {
        text-align: left;
        vertical-align: middle
    }

    .fact-figure p {
        display: table-cell;
        vertical-align: middle
    }
}

@media (min-width:1366px) {
    .lube-text-component {
        padding-right: 50px
    }
}

.lube-title-link {
    margin-bottom: 20px
}

    .lube-title-link h2 {
        font-size: 20px;
        font-weight: 700;
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 8px;
        color: #000
    }

    .lube-title-link a {
        white-space: normal;
        text-align: left
    }

        .lube-title-link a .caret {
            position: relative;
            margin-left: 15px;
            border: none
        }

        .lube-title-link a span.caret:after,
        .lube-title-link a span.caret:before {
            content: "";
            background: #d10f1f;
            -webkit-border-radius: .2em;
            border-radius: .2em;
            display: block;
            height: 7px;
            position: absolute;
            right: 2px;
            width: .15em
        }

        .lube-title-link a span.caret:before {
            -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg);
            top: -6px
        }

        .lube-title-link a span.caret:after {
            -webkit-transform: rotate(40deg);
            transform: rotate(40deg);
            top: -2px
        }

        .lube-title-link a:after,
        .lube-title-link a:before {
            content: none
        }

@media (min-width:768px) {
    .lube-title-link {
        margin-bottom: 30px
    }

        .lube-title-link h2 {
            font-size: 24px;
            margin-top: 0;
            padding-bottom: 15px
        }
}

@media (min-width:992px) {
    .lube-title-link h2 {
        font-size: 30px
    }
}

.featured-resource-grid .lube-text-component,
.pod-grid .lube-text-component {
    background: #f3f3f3;
    padding: 45px 15px 70px;
    min-height: 290px;
    margin-bottom: 20px;
    position: relative
}

    .featured-resource-grid .lube-text-component.without-btn p {
        margin-bottom: 0
    }

    .featured-resource-grid .lube-text-component.without-btn {
        padding-bottom: 20px
    }

    .featured-resource-grid .lube-text-component h2,
    .pod-grid .lube-text-component h2 {
        margin: 0 0 15px;
        font-size: 18px;
        overflow: hidden
    }

    .featured-resource-grid .lube-text-component p,
    .pod-grid .lube-text-component p {
        font-size: 12px
    }

    .featured-resource-grid .lube-text-component a,
    .pod-grid .lube-text-component a {
        position: absolute;
        bottom: 20px
    }

    .featured-resource-grid .lube-text-component p > a,
    .pod-grid .lube-text-component p > a {
        position: static
    }

.featured-resource-grid .hp-textVideo-grid {
    background: #f3f3f3;
    padding-bottom: 20px;
    float: left;
    width: 100%
}

.featured-resource-grid .lube-text-component.red-button-with-pdf p {
    height: 66px
}

.featured-resource-grid .lube-text-component.red-button-with-pdf {
    padding-bottom: 100px
}

.featured-resource-grid .featured-bottom-resource .hp-textVideo-grid {
    float: none
}

.featured-resource-grid .hp-textVideo-grid .image-component,
.featured-resource-grid .hp-textVideo-grid .text-component {
    float: left;
    padding-bottom: 0
}

    .featured-resource-grid .hp-textVideo-grid .image-component,
    .featured-resource-grid .hp-textVideo-grid .image-component a {
        float: left;
        width: 100%
    }

    .featured-resource-grid .hp-textVideo-grid .text-component h3.title {
        color: #000;
        font-size: 16px;
        margin-bottom: 0
    }

.featured-resource-grid .hp-textVideo-grid a.btn {
    position: absolute;
    bottom: 20px
}

.featured-resource-grid .hp-textImage-grid {
    background: #f3f3f3;
    min-height: 290px;
    overflow: hidden;
    display: block
}

    .featured-resource-grid .hp-textImage-grid .text-component {
        float: left
    }

        .featured-resource-grid .hp-textImage-grid .text-component a.btn {
            bottom: 20px
        }

.case-study {
    background: #464646;
    min-height: 200px;
    position: relative;
    margin-bottom: 20px;
    color: #fff
}

    .case-study.bg-white {
        background: #fff;
        color: #000
    }

    .case-study .image-component {
        text-align: center;
        padding-top: 50px;
        position: absolute;
        display: block;
        width: 100%
    }

        .case-study .image-component img {
            height: auto !important;
            float: none
        }

    .case-study .text-component {
        padding: 25px 15px 60px;
        width: 100%;
        min-height: 150px;
        position: relative;
        z-index: 1;
        height: 100%
    }

    .case-study.without-btn .text-component {
        padding: 25px
    }

        .case-study.without-btn .text-component h2.title {
            margin-top: 10px
        }

    .case-study .text-component h2.title {
        font-size: 16px;
        font-style: italic;
        font-weight: 400;
        text-align: center;
        margin: 0;
        color: #fff;
        padding-top: 18px;
        height: 88px;
        overflow: hidden
    }

    .case-study .text-component p {
        display: block;
        padding-left: 50%;
        margin: 0;
        overflow: hidden;
        max-height: 116px
    }

.bg-white .text-component h2.title,
.bg-white .text-component p {
    color: #000
}

.case-study .text-component p span {
    color: #d10f1f;
    font-weight: 700
}

.case-study .text-component a.btn {
    position: absolute;
    bottom: 15px
}

.case-study.light-grey .text-component p,
.case-study.light-grey h2.title {
    color: #000
}

.bg-grey,
.bg-grey h3,
.bg-grey p,
.bg-grey > .text-component > h3,
.bg-grey > .text-component > p {
    color: #fff !important
}

.tools-service {
    min-height: 290px;
    position: relative;
    margin-bottom: 20px;
    background: #fff;
    float: left;
    width: 100%
}

    .tools-service .text-component {
        text-align: left;
        padding: 30px 15px 15px;
        min-height: 290px
    }

        .tools-service .text-component h3.title {
            font-size: 16px;
            width: 50%;
            min-height: 40px
        }

        .tools-service .text-component a.btn {
            position: absolute;
            bottom: 20px;
            left: 15px
        }

    .tools-service .image-component {
        display: block;
        top: 50px;
        position: absolute;
        right: 20px;
        max-width: 132px
    }

.bg-grey {
    background: #464646 !important
}

.bg-white {
    background: #fff !important;
    color: #000
}

    .bg-white h3,
    .bg-white > .text-component > h3,
    .bg-white > .text-component > p {
        color: #000 !important
    }

.featured-resource-grid .hp-text-grid .text-component {
    padding-top: 35px
}

.resource-comp-cont .case-study,
.resource-comp-cont .hp-text-grid,
.resource-comp-cont .hp-text-icon-grid,
.resource-comp-cont .hp-textImage-grid,
.resource-comp-cont .hp-textVideo-grid,
.resource-comp-cont .hp-textlogo-grid {
    height: 300px !important;
    margin-bottom: 40px;
    float: left;
    width: 100%
}

@media (min-width:768px) {

    .featured-resource-grid .lube-text-component h2,
    .pod-grid .lube-text-component h2 {
        font-size: 20px;
        height: 45px
    }

    .featured-resource-grid .lube-largeLeft .hp-textVideo-grid {
        min-height: 300px;
        height: 300px !important
    }

    .featured-resource-grid .featured-bottom-resource .hp-textVideo-grid {
        min-height: 335px
    }

    .featured-resource-grid .hp-textVideo-grid .text-component h3.title {
        font-size: 20px;
        height: 90px;
        overflow: hidden
    }

    .case-study,
    .featured-resource-grid .hp-textImage-grid,
    .tools-service {
        min-height: 335px;
        margin-bottom: 30px
    }

        .case-study .text-component {
            padding: 25px 20px 20px
        }

            .case-study .text-component h2.title {
                font-size: 18px
            }

        .tools-service .text-component h3.title {
            font-size: 20px
        }

        .tools-service .image-component {
            top: 53px
        }

        .case-study .text-component a.btn {
            bottom: 20px
        }

        .case-study .text-component,
        .resource-comp-cont .hp-textImage-grid .text-component {
            padding-bottom: 76px
        }

        .featured-resource-grid .hp-textImage-grid .text-component {
            padding-bottom: 80px
        }

    .featured-resource-grid .hp-text-grid p,
    .featured-resource-grid .lube-text-component p {
        font-size: 12px;
        line-height: 16px;
        height: 625px;
        overflow: hidden
    }
}

@media (min-width:992px) {

    .featured-resource-grid .lube-text-component,
    .pod-grid .lube-text-component {
        padding: 32px 25px 70px;
        margin-bottom: 40px;
        height: 560px;
    }

    .featured-resource-grid .hp-text-grid .text-component {
        padding-top: 45px
    }

    .featured-resource-grid .lube-text-component h2 {
        font-size: 24px;
        padding-bottom: 3px;
        height: 33px
    }
    .pod-grid .lube-text-component h2 {
        font-size: 24px;
        padding-bottom: 3px;
        height: 53px
    }

    .featured-resource-grid .hp-textImage-grid,
    .featured-resource-grid .hp-text-grid,
    .featured-resource-grid .hp-textVideo-grid {
        height: 300px !important;
        min-height: 300px;
        margin-bottom: 40px
    }

        .featured-resource-grid .hp-textVideo-grid .text-component h3.title {
            font-size: 24px;
            letter-spacing: -1px
        }

    .case-study,
    .featured-resource-grid .hp-text-grid,
    .tools-service {
        min-height: 300px;
        margin-bottom: 40px
    }

        .case-study .text-component {
            padding: 25px 25px 70px;
            height: 300px
        }

            .case-study .text-component h2.title {
                font-size: 20px;
                height: 107px
            }

        .tools-service .text-component h3.title {
            font-size: 24px
        }

        .case-study .text-component p {
            padding-top: 10px;
            max-height: 97px
        }

    .featured-resource-grid .case-study {
        height: 300px !important
    }

    .featured-resource-grid .article-resource-card .case-study {
        height: auto !important
    }

    .featured-resource-grid .hp-textVideo-grid .text-component h3.title {
        height: 56px
    }

    .featured-resource-grid .hp-text-grid p,
    .featured-resource-grid .lube-text-component p {
        height: 98px
    }

    .featured-resource-grid .lube-text-component.without-btn p,
    .featured-resource-grid.without-btn .hp-text-grid p {
        height:470px;
    }

    .case-study .text-component a.btn.black-txt-button {
        bottom: 30px
    }

    .pod-grid .lube-text-component.without-btn {
        padding: 32px 25px 30px;
        max-height: 360px
    }

    .tools-service .text-component {
        padding: 30px 25px 65px;
        height: 300px
    }

        .tools-service .text-component a.btn {
            left: 25px
        }
}

@media (min-width:1366px) {
    .case-study .text-component h2.title {
        height: 107px
    }
}

@media (max-width:767px) {
    .article-resource-card .case-study .text-component p {
        padding-top: 10px
    }

    .tools-service .image-component {
        max-width: 100px
    }

    .featured-resource-grid .hp-textImage-grid .image-component {
        height: 85px;
        overflow-y: hidden
    }

    .featured-resource-grid .hp-textVideo-grid .text-component {
        padding-top: 25px
    }

    .featured-resource-grid .hp-textVideo-grid {
        padding-bottom: 25px
    }

    .case-study {
        height: 300px !important
    }

        .case-study .text-component p {
            padding-top: 15px
        }

    .lube-container.resource-center-filter-main {
        padding-bottom: 20px
    }
}

.brandcard-item .image-component img,
.subbrand .subbrand-item .image-component img {
    max-width: 100%
}

@media (min-width:768px) and (max-width:991px) {
    .featured-resource-grid .hp-textVideo-grid .image-component {
        height: 184px
    }

        .featured-resource-grid .hp-textVideo-grid .image-component a {
            height: 100%
        }

    .tools-service .image-component {
        width: 85px
    }

    .case-study .text-component p {
        padding-top: 20px;
        max-height: 140px !important
    }

    .case-study .text-component h2.title {
        height: 95px !important
    }

    .featured-resource-grid .case-study,
    .featured-resource-grid .hp-text-grid,
    .featured-resource-grid .hp-textImage-grid {
        height: 335px !important
    }

        .featured-resource-grid .case-study .text-component h2.title {
            height: 170px
        }

    .featured-resource-grid .lube-largeLeft .hp-textVideo-grid {
        min-height: 335px;
        height: 320px !important
    }

    .featured-resource-grid .lube-text-component {
        min-height: 335px;
        height: 725px;
        margin-bottom: 30px
    }
}

.brandcard-item {
    float: left;
    margin-bottom: 20px;
    width: 100%;
    padding: 0 0 54px;
    min-height: 260px;
    position: relative
}

.sub-brand button.close:after,
.sub-brand button.close:before,
.sub-brand button.close:focus:after,
.sub-brand button.close:focus:before,
.sub-brand button.close:hover:after,
.sub-brand button.close:hover:before {
    background: #000
}

.sub-brand button.close {
    position: absolute;
    z-index: 1;
    right: 10px;
    top: 10px;
    width: 10px;
    height: 10px;
    opacity: 1
}

.brandcard-item .image-component {
    display: block;
    padding-left: 50%;
    min-height: 125px;
    text-align: center
}

    .brandcard-item .image-component a,
    .subbrand .subbrand-item .image-component a {
        display: inline-block
    }

    .brandcard-item .image-component a {
        padding-left: 10px
    }

.brandcard-item > .text-component {
    display: block;
    float: left;
    width: 100%
}

.brandcard-item .text-component h3,
.brandcard-item .text-component h3 a,
.subbrand-item .text-component h3,
.subbrand-item .text-component h3 a {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 25px;
    width: 100%;
    text-decoration: none;
    color: #000;
    word-wrap: break-word
}

.brandcard-item .text-component h3 {
    position: relative;
    margin: 0;
    width: 50%;
    padding-right: 10px
}

    .brandcard-item .text-component h3 a {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        line-height: 1.2em;
        margin: 0;
        padding-right: 10px;
        word-wrap: break-word
    }

.brandcard-item > .text-component p {
    margin: 10px 0 0
}

.brandcard-item .button-group {
    position: absolute;
    bottom: 0;
    width: inherit
}

    .brandcard-item .button-group .btn.red-button {
        float: left;
        margin-right: 20px
    }

    .brandcard-item .button-group > button.btn.red-txt-button {
        box-shadow: none;
        background: 0 0;
        height: 34px
    }

    .brandcard-item .button-group .open .btn.red-button {
        background: #f3f3f3;
        color: #000
    }

        .brandcard-item .button-group .open .btn.red-button b {
            padding: 0
        }

    .brandcard-item .button-group > a.btn.red-txt-button {
        margin-top: 12px;
        padding: 0
    }

    .brandcard-item .button-group .btn.red-button.brand-btn.active {
        background: #f3f3f3;
        box-shadow: none;
        color: #000;
        position: relative
    }

        .brandcard-item .button-group .btn.red-button.brand-btn.active:after {
            position: absolute;
            left: 0;
            content: "";
            height: 25px;
            width: 100%;
            background: #f3f3f3;
            bottom: -25px
        }

.sub-brand {
    background: #f3f3f3;
    display: none;
    float: left
}

.subbrand.container {
    padding-bottom: 25px
}

.sub-brand button.close:after,
.sub-brand button.close:before {
    height: 12px;
    content: "";
    right: 4px;
    top: -1px
}

.subbrand .subbrand-item {
    float: left;
    padding: 25px 15px 15px;
    display: table;
    min-height: 180px
}

    .subbrand .subbrand-item .image-component {
        display: table-cell;
        vertical-align: top;
        width: 50%;
        padding-left: 10px;
        text-align: center
    }

        .subbrand .subbrand-item .image-component a {
            padding-top: 10px
        }

.subbrand-item p {
    font-size: 12px
}

.subbrand-item .text-component {
    display: table-cell;
    float: none;
    width: 50%;
    padding-bottom: 10px;
    padding-right: 10px
}

    .subbrand-item .text-component h2 {
        margin: 0 0 15px;
        font-size: 16px;
        font-weight: 700;
        height: 80px;
        overflow: hidden
    }

    .subbrand-item .text-component p {
        margin: 0 0 15px;
        height: 68px;
        overflow-y: hidden
    }

    .subbrand-item .text-component a.btn.red-txt-button:after,
    .subbrand-item .text-component a.btn.red-txt-button:before {
        content: none
    }

    .subbrand-item .text-component a.btn.red-txt-button {
        position: absolute;
        bottom: 0
    }

        .subbrand-item .text-component a.btn.red-txt-button b {
            position: relative;
            padding-right: 15px;
            white-space: pre-wrap
        }

            .subbrand-item .text-component a.btn.red-txt-button b:after,
            .subbrand-item .text-component a.btn.red-txt-button b:before {
                content: "";
                background: #d10f1f;
                -webkit-border-radius: .2em;
                border-radius: .2em;
                display: block;
                height: 7px;
                position: absolute;
                right: 2px;
                width: 2px
            }

        .subbrand-item .text-component a.btn.red-txt-button:hover b:after,
        .subbrand-item .text-component a.btn.red-txt-button:hover b:before {
            background: #970b16
        }

        .subbrand-item .text-component a.btn.red-txt-button b:before {
            -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg);
            bottom: 7px
        }

        .subbrand-item .text-component a.btn.red-txt-button b:after {
            -webkit-transform: rotate(40deg);
            transform: rotate(40deg);
            bottom: 2px
        }

.brand-expanded {
    float: left;
    width: 100%;
    margin-top: 0;
    position: relative;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease
}

    .brand-expanded .sub-brand {
        display: block;
        margin-bottom: 20px
    }

.product-line-grid .button-group a:focus {
    color: #fff
}

.brandcard-item .button-group .btn.red-button b {
    padding: 0
}

.brand-card .brandcard-item a.red-txt-button .caret {
    position: relative;
    margin-left: 15px;
    border: none
}

.brand-card .brandcard-item a.red-txt-button span.caret:after,
.brand-card .brandcard-item a.red-txt-button span.caret:before {
    content: "";
    background: #d10f1f;
    -webkit-border-radius: .2em;
    border-radius: .2em;
    display: block;
    height: 7px;
    position: absolute;
    right: 2px;
    width: .15em
}

.brand-card .brandcard-item a.red-txt-button span.caret:before {
    -webkit-transform: rotate(-40deg);
    transform: rotate(-40deg);
    top: -6px
}

.brand-card .brandcard-item a.red-txt-button span.caret:after {
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    top: -2px
}

.brand-card > .brand-card-block > .brandcard-item > .button-group > a.red-txt-button:after,
.brand-card > .brand-card-block > .brandcard-item > .button-group > a.red-txt-button:before {
    content: none
}

.brandcard-item.small-text .text-component h2 a,
.subbrand-item.small-text .text-component h2 a {
    font-size: 14px
}

@media (min-width:768px) {
    .brandcard-item {
        margin-bottom: 30px;
        min-height: 280px;
        padding: 0 20px 45px
    }

        .brandcard-item .text-component h2,
        .brandcard-item .text-component h3 a {
            font-size: 14px
        }

    .subbrand-item .text-component h2 {
        font-size: 18px;
        height: 80px
    }

    .brand-expanded {
        margin-top: 0
    }

        .brand-expanded .sub-brand {
            margin-top: -15px;
            margin-bottom: 00px
        }

    .subbrand .subbrand-item {
        min-height: 220px;
        padding: 25px 20px 15px
    }

    .subbrand-item .text-component a.btn {
        bottom: 35px
    }

    .product-line-grid .brandcard-item {
        min-height: 290px
    }

    .brandcard-item .button-group > button.btn.red-txt-button {
        height: 40px
    }

    .brandcard-item ul.hp-promoList-item {
        margin-top: 4px
    }

    .brandcard-item .button-group {
        width: auto;
        left: 20px;
        right: 20px;
        height: 34px
    }

        .brandcard-item .button-group > a.btn.red-txt-button {
            float: right;
            margin-right: 10px
        }

    .subbrand .subbrand-item .image-component a {
        padding-top: 0
    }

    .sub-brand button.close {
        width: 15px;
        height: 15px;
        right: 33px;
        top: 0
    }

        .sub-brand button.close:after,
        .sub-brand button.close:before {
            height: 19px;
            right: 6px;
            top: -2px
        }
}

@media (min-width:992px) {
    .brandcard-item .button-group .btn.red-button {
        padding: 0 10px;
        margin-right: 0;
        font-size: 12px
    }

    .brandcard-item {
        margin-bottom: 40px;
        padding: 0 25px 60px !important
    }

        .brandcard-item .button-group > a.btn.red-txt-button {
            margin-top: 15px
        }

        .brandcard-item .button-group > button.btn.red-txt-button {
            height: 47px
        }

    .brand-card > .col-md-4 {
        position: static
    }

    .brand-expanded {
        margin-top: 0;
        margin-bottom: 0
    }

        .brand-expanded .sub-brand {
            margin-top: -20px;
            margin-bottom: 40px
        }

    .subbrand .subbrand-item {
        min-height: 240px;
        padding: 30px 25px 15px
    }

    .product-line-grid .brandcard-item {
        min-height: 315px
    }

    .brandcard-item > .text-component p {
        margin: 16px 0 0;
        max-height: 100px;
        overflow: hidden;
        font-weight: 400
    }

    .brandcard-item ul.hp-promoList-item {
        margin-top: 8px
    }

    .subbrand-item .text-component p {
        height: 68px
    }

    .subbrand-item .text-component h2 {
        height: 62px
    }

    .brandcard-item .button-group > a.btn.red-txt-button {
        width: auto;
        margin-right: 0
    }

    .brandcard-item .button-group {
        height: 47px
    }
}

@media (min-width:1200px) {
    .brandcard-item .button-group .btn.red-button {
        padding: 0 15px;
        margin-right: 0;
        font-size: 12px
    }
    .featured-resource-grid .lube-text-component.without-btn p,
    .featured-resource-grid.without-btn .hp-text-grid p {
        height: 370px;
    }
    .featured-resource-grid .lube-text-component,
    .pod-grid .lube-text-component {
        height: 460px;
    }
}

@media (min-width:1366px) {
    .brandcard-item .button-group .btn.red-button {
        padding: 0 20px;
        margin-right: 25px
    }

    .brandcard-item .button-group > a.btn.red-txt-button {
        margin-right: 10px
    }
}

@media (max-width:767px) {
    .brandcard-item .button-group .btn.red-button {
        margin-right: 0
    }

    .brandcard-item .button-group > a.btn.red-txt-button {
        margin-top: 10px;
        float: right
    }

    .brandcard-item .button-group {
        bottom: 5px;
        height: 34px
    }

        .brandcard-item .button-group .btn.red-button:hover {
            background: #d10f1f
        }

    .brand-expanded {
        margin-top: -15px;
        margin-bottom: 0
    }

        .brand-expanded .sub-brand {
            margin-bottom: 20px
        }

        .brand-expanded .subbrand .subbrand-item {
            margin-left: -15px;
            margin-right: -15px
        }

            .brand-expanded .subbrand .subbrand-item .image-component a {
                display: inline-block
            }

    .brandcard-item .text-component h3 a {
        margin-bottom: 0
    }

    .brandcard-item ul.hp-promoList-item {
        margin-top: 5px
    }
}

@media (min-width:768px) and (max-width:991px) {
    .brandcard-item .button-group .btn.red-button {
        margin-right: 20px;
        padding: 0 15px;
        font-size: 12px;
        line-height: 33px;
        height: 33px
    }

        .brandcard-item .button-group .btn.red-button:hover {
            background: #d10f1f
        }
}

.pod-grid .hp-text-grid,
.pod-grid .hp-textImage-grid {
    min-height: 230px;
    height: auto;
    background: #fff;
    display: inline-block
}

    .pod-grid .hp-text-grid .text-component h3.title,
    .pod-grid .hp-textImage-grid .text-component h3.title {
        font-weight: 700;
        text-transform: inherit
    }

    .pod-grid .hp-text-grid .text-component p,
    .pod-grid .hp-textImage-grid .text-component p {
        margin-bottom: 0
    }

    .pod-grid .hp-text-grid .text-component,
    .pod-grid .hp-textImage-grid .text-component {
        padding-bottom: 15px
    }

.pod-grid .hp-text-grid {
    display: table !important
}

    .pod-grid .hp-text-grid .text-component {
        display: table-cell;
        vertical-align: middle
    }

.hp-text-grid.regular-resource-card .text-component {
    vertical-align: top
}

    .hp-text-grid.regular-resource-card .text-component p {
        height: 150px;
        overflow: hidden
    }

@media (min-width:768px) {

    .pod-grid .hp-text-grid,
    .pod-grid .hp-textImage-grid {
        min-height: 273px
    }

        .pod-grid .hp-text-grid .text-component {
            padding-top: 30px
        }

        .pod-grid .hp-textImage-grid .text-component {
            padding: 15px 20px
        }

        .pod-grid .hp-text-grid .text-component {
            padding: 28px 20px 15px
        }

            .pod-grid .hp-text-grid .text-component h3.title,
            .pod-grid .hp-textImage-grid .text-component h3.title {
                font-size: 18px
            }
}

@media (min-width:992px) {
    .pod-grid .hp-textImage-grid .text-component {
        padding: 20px 25px
    }

    .pod-grid .hp-text-grid,
    .pod-grid .hp-textImage-grid {
        min-height: 300px
    }

        .pod-grid .hp-text-grid .text-component h3.title,
        .pod-grid .hp-textImage-grid .text-component h3.title {
            font-size: 20px
        }
}

@media (min-width:768px) and (max-width:991px) {
    .pod-grid .col-sm-3 {
        width: 50%
    }

    .pod-grid .hp-text-grid,
    .pod-grid .hp-textImage-grid {
        display: table
    }
}

.product-resource-card {
    min-height: 290px;
    position: relative
}

.resource-card-height-unset {
    min-height: unset !important
}

.product-resource-textImage-grid .image-component img {
    width: 100%;
    max-width: 100%;
    height: 105px;
    overflow: hidden
}

.product-resource-card .product-resource-textImage-grid .product-resource-text-component h3.product-resource-title {
    padding-bottom: 5px;
    min-height: 45px;
    margin: 0
}

.product-resource-card .product-resource-textImage-grid .product-resource-text-component p {
    font-size: 12px;
    margin-bottom: 15px;
    max-height: 50px;
    overflow: hidden
}

.product-resource-card .product-resource-textImage-grid .product-resource-text-component {
    padding: 15px 15px 50px
}

.product-resource-text-component a.btn {
    position: absolute;
    bottom: 15px
}

.product-resource-text-component h3 {
    margin-top: 0
}

@media (min-width:768px) {
    .product-resource-card {
        min-height: 335px
    }

    .product-resource-textImage-grid .image-component img {
        height: 80px;
        overflow: hidden
    }

    .product-resource-card .product-resource-textImage-grid .product-resource-text-component h3.product-resource-title {
        font-size: 20px;
        min-height: 30px;
        padding-bottom: 10px;
        margin: 0
    }

    .product-resource-card .product-resource-textImage-grid .product-resource-text-component {
        padding: 10px 20px 70px
    }

    .product-resource-text-component a.btn {
        bottom: 20px
    }
}

@media (min-width:992px) {
    .product-resource-card {
        min-height: 271px
    }

    .product-resource-textImage-grid .image-component img {
        height: 90px;
        overflow: hidden
    }

    .product-resource-card .product-resource-textImage-grid .product-resource-text-component h3.product-resource-title {
        font-size: 24px;
        height: 65px;
        overflow: hidden;
        margin: 0;
        font-family: Verdana
    }

    .product-resource-card .product-resource-textImage-grid .product-resource-text-component {
        padding: 20px 25px 65px
    }
}

@media (max-width:767px) {
    .product-resource-textImage-grid .image-component {
        height: 105px;
        overflow: hidden
    }

        .product-resource-textImage-grid .image-component img {
            width: inherit;
            max-width: inherit;
            height: 105px;
            left: 100%;
            margin-left: -20%;
            overflow: hidden
        }
}

@media (min-width:768px) and (max-width:991px) {
    .product-resource-textImage-grid .image-component {
        height: 80px;
        overflow: hidden
    }

        .product-resource-textImage-grid .image-component img {
            height: 80px;
            overflow: hidden;
            width: inherit;
            max-width: inherit;
            margin-left: -35%;
            left: 100%
        }
}

.product-related-item {
    min-height: 140px;
    padding: 0;
    display: table;
    margin-bottom: 20px;
    width: 100%
}

    .product-related-item .image-component,
    .product-related-item .text-component {
        width: 50%;
        display: table-cell;
        vertical-align: middle
    }

        .product-related-item .text-component h2,
        .product-related-item .text-component h2 a {
            font-size: 14px;
            font-weight: 700;
            margin: 0 0 15px;
            min-height: 40px;
            text-decoration: none;
            color: #000
        }

    .product-related-item .image-component {
        text-align: right
    }

        .product-related-item .image-component a {
            display: inline-block
        }

            .product-related-item .image-component a img {
                max-width: 100%
            }

    .product-related-item.small-text h2,
    .product-related-item.small-text h2 a {
        font-size: 14px !important;
        line-height: 16px;
        letter-spacing: -.01em
    }

@media (min-width:768px) {
    .product-related-item {
        min-height: 170px;
        margin-bottom: 30px
    }

        .product-related-item .text-component h2,
        .product-related-item .text-component h2 a {
            font-size: 14px;
            min-height: 80px
        }

        .product-related-item .image-component {
            text-align: center
        }
}

@media (min-width:992px) {
    .product-related-item {
        height: 180px;
        margin-bottom: 30px
    }

        .product-related-item .text-component h2,
        .product-related-item .text-component h2 a {
            font-size: 14px;
            min-height: 88px
        }
}

@media (max-width:767px) {
    .product-related-line-grid .col-md-4.col-sm-6.col-xs-12:last-child {
        display: none
    }
}

.panel-body ul {
    list-style-type: none;
    padding-left: 15px
}

    .panel-body ul > li {
        position: relative;
        list-style: none;
        width: 100%;
        margin-top: 5px
    }

        .panel-body ul > li:before {
            content: " ";
            width: 4px;
            height: 4px;
            display: block;
            border-radius: 6px;
            position: absolute;
            top: 10px;
            left: -15px
        }

.contact-form-cont ul > li:before {
    content: none
}

.compare-products form.compare-products-form {
    margin-bottom: 0
}

.compare-products .btn-group {
    width: 100%
}

    .compare-products .btn-group .btn-default,
    .compare-products .btn-group.open .btn-default {
        width: 100%;
        border-radius: 0;
        border: 0;
        background: #d10f1f;
        text-align: left;
        font-size: 16px;
        color: #fff;
        padding: 15px 40px 15px 20px;
        box-shadow: none;
        white-space: normal
    }

        .compare-products .btn-group .btn-default .caret {
            display: none
        }

        .compare-products .btn-group .btn-default:after,
        .compare-products .btn-group .btn-default:before {
            content: "";
            background: #fff;
            -webkit-border-radius: .2em;
            border-radius: .2em;
            display: block;
            height: 13px;
            position: absolute;
            top: 20px;
            width: 2px;
            z-index: 2
        }

        .compare-products .btn-group .btn-default:before {
            right: 32px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg)
        }

        .compare-products .btn-group .btn-default:after {
            right: 24px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg)
        }

        .compare-products .btn-group.open .btn-default:after {
            right: 32px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg)
        }

        .compare-products .btn-group.open .btn-default:before {
            right: 24px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg)
        }

    .compare-products .btn-group.open ul.dropdown-menu {
        border-radius: 0;
        box-shadow: none;
        background: #d10f1f;
        margin-top: 0;
        border: 0;
        padding: 0;
        width: 100%
    }

.compare-products {
    margin-bottom: 15px
}

    .compare-products a {
        position: relative;
        font-size: 16px;
        color: #fff;
        padding: 11px 40px 11px 20px;
        background: #d10f1f;
        outline: 0;
        display: block;
        text-decoration: none
    }

        .compare-products a:hover {
            background: #970b16
        }

        .compare-products a:after,
        .compare-products a:before {
            content: "";
            background: #fff;
            -webkit-border-radius: .2em;
            border-radius: .2em;
            display: block;
            height: 13px;
            position: absolute;
            right: 25px;
            width: 2px;
            top: 50%;
            margin-top: -11px
        }

        .compare-products a:before {
            -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg)
        }

        .compare-products a:after {
            -webkit-transform: rotate(40deg);
            transform: rotate(40deg);
            margin-top: -2px
        }

.product-grades-accordion {
    width: 100%;
    float: left
}

    .product-grades-accordion .panel-default {
        border-radius: 0;
        box-shadow: none;
        border: 0;
        padding: 0;
        float: left;
        width: 100%
    }

        .product-grades-accordion .panel-default .panel-collapse > .panel-body {
            border-radius: 0;
            box-shadow: none;
            border: 0;
            padding: 30px 20px 15px;
            position: relative
        }

            .product-grades-accordion .panel-default .panel-collapse > .panel-body .close {
                position: absolute;
                margin-right: 4px;
                margin-top: -20px;
                width: 15px;
                height: 15px;
                opacity: 1;
                outline: 0;
                right: 15px
            }

            .product-grades-accordion .panel-default .panel-collapse > .panel-body button.close:after,
            .product-grades-accordion .panel-default .panel-collapse > .panel-body button.close:before {
                content: "";
                background: #000;
                position: absolute;
                top: 0;
                right: 7px
            }

        .product-grades-accordion .panel-default > .panel-heading {
            border: 0;
            border-radius: 0;
            padding: 0;
            width: 100%;
            display: block;
            float: left
        }

            .product-grades-accordion .panel-default > .panel-heading .panel-title {
                float: left;
                width: 100%;
                background: #232323;
                display: table
            }

            .product-grades-accordion .panel-default > .panel-heading .panel-title-details {
                background: #464646;
                float: left;
                width: 100%;
                padding: 11px 0;
            }

                .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul {
                    list-style: none;
                    margin: 0;
                    float: left;
                    padding: 0;
                    width: 100%;
                    height: 100%;
                    display: table;
                    flex-direction: row;
                    justify-content: space-around;
                }

                    .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li {
                        display: table-cell;
                        vertical-align: middle;
                        height: 100%;
                        margin: auto 0;
                        margin-inline:2%;
                    }

                        .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a {
                            font-size: 12px;
                            color: #fff;
                            display: table-cell;
                            vertical-align: middle;
                            padding: 4px 24px 4px 0;
                        }

            .product-grades-accordion .panel-default > .panel-heading .panel-title a {
                font-weight: 700;
                color: #fff;
                padding: 11px 46px 11px 20px;
                display: table-cell;
                vertical-align: middle;
                width: 100%;
                font-size: 16px;
                position: relative
            }

                .product-grades-accordion .panel-default > .panel-heading .panel-title a:focus,
                .product-grades-accordion .panel-default > .panel-heading .panel-title a:hover {
                    text-decoration: none
                }

                .product-grades-accordion .panel-default > .panel-heading .panel-title a:after,
                .product-grades-accordion .panel-default > .panel-heading .panel-title a:before {
                    content: "";
                    background: #fff;
                    -webkit-border-radius: .2em;
                    border-radius: .2em;
                    display: block;
                    height: 13px;
                    position: absolute;
                    top: 16px;
                    width: 2px;
                    z-index: 2
                }

                .product-grades-accordion .panel-default > .panel-heading .panel-title a:before {
                    right: 32px;
                    -webkit-transform: rotate(45deg);
                    transform: rotate(45deg)
                }

                .product-grades-accordion .panel-default > .panel-heading .panel-title a:after {
                    right: 24px;
                    -webkit-transform: rotate(-45deg);
                    transform: rotate(-45deg)
                }

                .product-grades-accordion .panel-default > .panel-heading .panel-title a.collapsed:before {
                    right: 32px;
                    -webkit-transform: rotate(-45deg);
                    transform: rotate(-45deg)
                }

                .product-grades-accordion .panel-default > .panel-heading .panel-title a.collapsed:after {
                    right: 24px;
                    -webkit-transform: rotate(45deg);
                    transform: rotate(45deg)
                }

            .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a .grade-item-title {
                margin: 0;
                float: left;
                position: relative;
                padding-right: 14px;
            }

            .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a .grade-icons {
                float: left;
                position: absolute;
                top: 50%;
                right: 0;
                margin-top: -9px
            }

                .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a .grade-icons:after,
                .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a .grade-icons:before {
                    content: "";
                    background: #fff;
                    -webkit-border-radius: .2em;
                    border-radius: .2em;
                    display: block;
                    height: 7px;
                    position: absolute;
                    right: 3px;
                    width: 2px;
                    z-index: 2
                }

        .product-grades-accordion .panel-default.empty-content .panel-collapse,
        .product-grades-accordion .panel-default.empty-content > .panel-heading .panel-title-details ul li a.accordion-toggle .grade-item-title {
            display: none
        }

        .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a {
            position: relative;
            text-decoration: none
        }

            .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a .grade-icons:before {
                top: 8px;
                -webkit-transform: rotate(40deg);
                transform: rotate(40deg)
            }

            .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a .grade-icons:after {
                top: 4px;
                -webkit-transform: rotate(-40deg);
                transform: rotate(-40deg)
            }

        .product-grades-accordion .panel-default > .panel-collapse {
            float: left;
            width: 100%
        }

        .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a.accordion-toggle .grade-icons {
            transform: rotate(-90deg);
            margin-top: -4px;
            right: 17px
        }

        .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a.accordion-toggle.collapsed .grade-icons {
            transform: rotate(90deg);
            margin-top: 4px;
            right: -5px
        }

        .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a.accordion-toggle .grade-item-title {
            padding-right: 20px
        }

        .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a.accordion-toggle .grade-icons:after,
        .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a.accordion-toggle .grade-icons:before {
            height: 9px
        }

        .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a.accordion-toggle .grade-icons:before {
            top: 9px
        }

    .product-grades-accordion.panel-group .panel + .panel {
        margin-top: 15px
    }

.prod-line-title h2 {
    font-size: 18px
}

.product-grades-accordion .panel-default .panel-collapse > .panel-body h3 {
    margin-top: 0
}

.product-grades-accordion .panel-body ul {
    padding-left: 15px
}

.product-grades-accordion .panel-default.empty-content > .panel-heading .panel-title a {
    cursor: default
}

    .product-grades-accordion .panel-default.empty-content > .panel-heading .panel-title a:after,
    .product-grades-accordion .panel-default.empty-content > .panel-heading .panel-title a:before {
        content: none
    }

@media (min-width:768px) {
    .prod-line-title h2 {
        font-size: 20px;
        line-height: 26px
    }

    .product-grades-accordion {
        margin-bottom: 0
    }

    .compare-products .btn-group .btn-default,
    .compare-products .btn-group.open .btn-default,
    .compare-products .btn-group.open ul.dropdown-menu li a,
    .compare-products .btn-group.open ul.dropdown-menu li a:hover {
        font-size: 18px
    }

    .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a:after,
    .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a:before {
        right: 24px
    }

    .product-grades-accordion .panel-default > .panel-heading .panel-title a {
        font-size: 16px
    }

    .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a {
        font-size: 14px;
        padding: 0 20px 0 0;
        text-align: center
    }


    .compare-products a {
        font-size: 18px
    }

    .panel-body ul > li:before {
        top: 11px
    }
}

@media (min-width:992px) {

    .panel-body ul > li:before,
    .product-grades-accordion .panel-body ul > li:before {
        content: " ";
        width: 6px !important;
        height: 6px !important
    }

    .panel-body ul > li:before {
        top: 13px
    }

    .product-grades-accordion .panel-body ul > li:before {
        top: 6px
    }

    .compare-products a:after,
    .compare-products a:before {
        right: 29px
    }

    .product-grades-accordion .panel-default > .panel-heading .panel-title a:after,
    .product-grades-accordion .panel-default > .panel-heading .panel-title a:before {
        top: 26px
    }

    .product-grades-accordion .panel-default > .panel-heading .panel-title a {
        font-size: 20px;
        padding: 14px 60px 14px 25px
    }

    .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li {
        display: inline-block
    }

        .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a {
            font-size: 15px;
            background: url(../images/pdf-icon.png) right center no-repeat;
            padding: 4px 32px 4px 0;
        }

            .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a.accordion-toggle {
                background: 0 0
            }

    .product-grades-accordion .panel-default > .panel-heading .panel-title-details {
        height: 55px
    }

        .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a:not(.accordion-toggle) .grade-icons {
            display: none
        }

    .product-grades-accordion .panel-default .panel-collapse > .panel-body {
        padding: 30px 25px 15px
    }

    .compare-products {
        margin-bottom: 20px
    }

    .product-grades-accordion.panel-group .panel + .panel {
        margin-top: 20px
    }

    .compare-products a {
        font-size: 20px;
        padding: 14px 40px 14px 25px
    }
}

@media (max-width:767px) {
    .product-grades-grid > .col-xs-12 {
        padding-left: 0;
        padding-right: 0
    }

    .product-grades-accordion {
        width: 100%;
        float: left
    }

    .compare-products {
        width: auto;
        margin-left: -20px;
        margin-right: -20px
    }

    .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li:first-child a:after,
    .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li:first-child a:before {
        content: "";
        right: 10px
    }

    .product-grades-accordion .panel-default > .panel-heading .panel-title-details {
        padding: 0 20px 0 30px;
    }
}

@media (max-width:991px) {
    .panel-body ul > li:before {
        top: 6px
    }
}

.industries-products-grid-list {
    width: auto
}

.industries-categories-grid .hp-textImage-grid .text-component h3.title {
    color: #000
}

.industries-categories-grid .hp-textImage-grid .text-component p {
    height: 50px;
    overflow: hidden;
    color: #000
}

.industries-categories-grid .black-txt-button:after,
.industries-categories-grid .black-txt-button:before {
    background: #000
}

.industries-categories-grid-mobile .btn-group {
    width: 100%
}

    .industries-categories-grid-mobile .btn-group .btn-default,
    .industries-categories-grid-mobile .btn-group.open .btn-default {
        width: 100%;
        border-radius: 0;
        border: 0;
        background: #000;
        text-align: left;
        font-size: 16px;
        color: #fff;
        padding: 15px 40px 15px 20px;
        box-shadow: none;
        white-space: normal
    }

.industries-categories-grid-mobile .btn.btn-default .caret {
    display: none
}

.industries-categories-grid-mobile .btn.btn-default:after,
.industries-categories-grid-mobile .btn.btn-default:before {
    content: "";
    background: #fff;
    -webkit-border-radius: .2em;
    border-radius: .2em;
    display: block;
    height: 13px;
    position: absolute;
    top: 20px;
    width: 3px;
    z-index: 2
}

.industries-categories-grid-mobile .btn.btn-default:before {
    right: 32px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.industries-categories-grid-mobile .btn.btn-default:after {
    right: 24px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.industries-categories-grid-mobile .btn-group.open ul.dropdown-menu {
    border-radius: 0;
    box-shadow: none;
    background: #464646;
    margin-top: 0;
    border: 0;
    padding: 0 0 20px;
    width: 100%
}

    .industries-categories-grid-mobile .btn-group.open ul.dropdown-menu li:first-child {
        display: none
    }

    .industries-categories-grid-mobile .btn-group.open ul.dropdown-menu li a,
    .industries-categories-grid-mobile .btn-group.open ul.dropdown-menu li a:hover {
        font-size: 14px;
        color: #000;
        padding: 12px 40px 12px 20px;
        background: #f3f3f3;
        outline: 0
    }

.industries-categories-grid .hp-textImage-grid a.btn {
    color: #000
}

@media (min-width:768px) {
    .industries-categories-grid-mobile {
        display: none
    }

    .industries-categories-grid .hp-textImage-grid .image-component {
        height: 68px;
        overflow: hidden
    }

        .industries-categories-grid .hp-textImage-grid .image-component img {
            width: 100%
        }

    .industries-categories-grid .hp-textImage-grid {
        min-height: 240px;
        height: auto;
        margin-bottom: 30px;
        display: inline-block
    }

        .industries-categories-grid .hp-textImage-grid .text-component {
            padding: 15px 20px 45px
        }

            .industries-categories-grid .hp-textImage-grid .text-component p {
                margin-bottom: 0;
                height: 50px;
                overflow: hidden
            }

            .industries-categories-grid .hp-textImage-grid .text-component h3.title {
                font-size: 18px;
                margin-bottom: 10px;
                letter-spacing: -1px;
                height: 40px;
                overflow: hidden
            }

        .industries-categories-grid .hp-textImage-grid.small-text .text-component h3.title {
            font-size: 14px;
            height: 32px
        }

        .industries-categories-grid .hp-textImage-grid a.btn {
            bottom: 16px;
            left: 20px
        }
}

@media (min-width:992px) {
    .industries-categories-grid .hp-textImage-grid .image-component {
        height: 80px;
        overflow: hidden
    }

    .industries-categories-grid .hp-textImage-grid {
        height: 250px
    }

        .industries-categories-grid .hp-textImage-grid .text-component {
            padding: 20px 25px 45px
        }

        .industries-categories-grid .hp-textImage-grid a.btn {
            bottom: 20px;
            left: 25px
        }

        .industries-categories-grid .hp-textImage-grid .text-component h3.title {
            font-size: 15px;
            height: 50px
        }

        .industries-categories-grid .hp-textImage-grid.small-text .text-component h3.title {
            font-size: 14px;
            height: 47px
        }
}

@media (min-width:1200px) {
    .industries-categories-grid .hp-textImage-grid .text-component h3.title {
        font-size: 20px;
        height: 47px
    }
}

@media (max-width:767px) {
    .industries-categories-grid {
        display: none
    }
}

.product-content .tab-content {
    float: left;
    margin-top: 20px
}

    .product-content .tab-content p {
        font-size: 16px
    }

.product-content-main ul {
    list-style: none;
    padding-left: 15px
}

.product-content-main .tab-pane ul li {
    margin-bottom: 10px;
    font-size: 16px;
    position: relative
}

    .product-content-main .tab-pane ul li:before {
        content: " ";
        width: 6px;
        height: 6px;
        display: block;
        border-radius: 6px;
        position: absolute;
        top: 7px;
        left: -15px
    }

.product-line-cont .lube-title {
    margin-bottom: 20px
}

.product-grades-accordion .panel-body li {
    margin-bottom: 10px
}

@media (min-width:768px) {
    .product-content .tab-content p {
        font-size: 18px
    }

    .product-content-main .tab-pane ul li {
        font-size: 18px;
        margin-bottom: 0
    }

        .product-content-main .tab-pane ul li:before {
            top: 11px
        }
}

@media (min-width:992px) {
    .product-content .tab-content {
        margin-top: 25px
    }

    .product-content .product-content-tilte {
        width: 100%;
        float: left
    }

    .product-content-tilte ul {
        position: relative;
        padding-left: 0;
        float: left;
        border-bottom: 2px solid #000;
        margin-bottom: 0
    }

        .product-content-tilte ul li {
            list-style-type: none;
            display: inline-block;
            position: relative;
            margin-bottom: -4px
        }

            .product-content-tilte ul li a:before {
                content: "";
                width: 2px;
                height: 10px;
                background: #000;
                position: absolute;
                bottom: 0;
                left: -6px
            }

            .product-content-tilte ul li a.active:before,
            .product-content-tilte ul li:first-child a:before {
                content: none
            }

            .product-content-tilte ul li a {
                text-decoration: none;
                font-size: 16px;
                color: #000;
                padding: 0 15px;
                height: 45px;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                max-width: 170px
            }

                .product-content-tilte ul li a.active {
                    background-color: #000;
                    color: #fff;
                    font-size: 16px;
                    font-weight: 700;
                    white-space: -moz-pre-wrap;
                    white-space: -o-pre-wrap;
                    white-space: pre-wrap;
                    word-wrap: break-word
                }

    .product-content .tab-content p {
        font-size: 20px;
        margin-bottom: 0
    }

    .product-content-main .tab-pane ul li {
        font-size: 20px
    }

        .product-content-main .tab-pane ul li:before {
            top: 13px
        }
}

@media (min-width:1200px) {
    .product-content-tilte ul li a.active {
        font-size: 20px
    }

    .product-content-tilte ul li a {
        font-size: 20px;
        padding: 0 15px;
        height: 60px;
        max-width: 234px
    }
}

@media (min-width:1366px) {
    .product-content-tilte ul li a {
        padding: 0 25px
    }
}

@media (max-width:991px) {
    nav.product-content-tilte {
        float: left;
        width: 100%;
        margin-bottom: 0;
        height: 50px
    }

    .product-content-tilte ul {
        border-bottom: 0;
        position: relative;
        padding-left: 0;
        float: left;
        width: 100%;
        margin: 0;
        z-index: 1
    }

    .product-content-tilte li {
        display: block;
        float: left;
        width: 100%
    }

    .product-content-tilte a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        text-decoration: none;
        background: #000;
        color: #fff;
        height: auto;
        padding: 15px 40px 15px 15px;
        font-weight: 700;
        font-size: 16px;
        display: none
    }

    .product-content-tilte ul.open a {
        position: static;
        display: block;
        color: #fff;
        z-index: 1
    }

    nav.product-content-tilte li a.active {
        z-index: 1;
        display: block
    }

    nav.product-content-tilte ul li a.active:after,
    nav.product-content-tilte ul li a.active:before {
        content: "";
        background: #fff;
        -webkit-border-radius: .2em;
        border-radius: 4px;
        display: block;
        height: 12px;
        position: absolute;
        right: 20px;
        width: 2px;
        top: 25px;
        z-index: 2;
        margin-top: -5px;
        margin-left: -5px
    }

    nav.product-content-tilte ul li a.active:before {
        transform: rotate(-45deg);
        right: 27px
    }

    nav.product-content-tilte ul li a.active:after,
    nav.product-content-tilte ul.open li a.active:before {
        transform: rotate(45deg)
    }

    nav.product-content-tilte ul.open li a.active:after {
        transform: rotate(-45deg)
    }

    .product-content-tilte-block p {
        font-size: 16px
    }

    .product-content-tilte ul.nav.nav-tabs {
        position: relative
    }
}

@media (max-width:767px) {
    .product-content-tilte a {
        font-size: 14px
    }
}

.resource-center-filter .resource-center-filter-cont .tab-content > .tab-pane {
    float: left;
    width: 100%
}

.resource-center-filter .resource-center-filter-cont ul.nav.nav-tabs {
    width: auto;
    margin: 0 -20px 25px
}

.resource-center-search {
    margin-top: 20px;
    float: left;
    width: 100%
}

.resource-center-filter-cont ul.nav.nav-tabs {
    border-bottom: 2px solid #000
}

    .resource-center-filter-cont ul.nav.nav-tabs li {
        width: 50%;
        height: 100%;
        display: table
    }

        .resource-center-filter-cont ul.nav.nav-tabs li a,
        .resource-center-filter-cont ul.nav.nav-tabs li a:hover {
            border: 0;
            border-radius: 0;
            font-size: 16px;
            text-align: center;
            background: 0 0;
            color: #000;
            margin-right: 0;
            padding: 10px 18px
        }

        .resource-center-filter-cont ul.nav.nav-tabs li.active a {
            font-weight: 700;
            color: #fff;
            background: #000;
            text-align: center;
            display: table-cell;
            vertical-align: middle
        }

.resource-center-search .form-group {
    background: #f3f3f3;
    position: relative;
    width: 100%
}

    .resource-center-search .form-group input.form-control {
        font-size: 12px;
        padding: 0 20px;
        height: 40px;
        font-style: italic;
        font-family: Verdana
    }

        .resource-center-search .form-group input.form-control::-webkit-input-placeholder {
            color: #464646;
            font-style: italic;
            font-size: 12px
        }

        .resource-center-search .form-group input.form-control::-moz-placeholder {
            color: #464646;
            font-style: italic;
            font-size: 12px
        }

        .resource-center-search .form-group input.form-control:-ms-input-placeholder {
            color: #464646;
            font-style: italic;
            font-size: 12px
        }

.resource-center-icon-search {
    background: url(../images/icon-search.png) 0 10px no-repeat;
    width: 40px;
    height: 40px;
    padding: 20px 22px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    cursor: pointer;
    border: none
}

    .resource-center-icon-search:hover {
        background: url(../images/search-icon-open.png) 0 10px no-repeat
    }

.filter-element-list,
.filter-element-list form.filter-element {
    float: left;
    width: 100%
}

.resource-center-filter-cont .tab-content .filter-element-list > h3,
.resource-center-filter-cont .tab-content .handbook-block > h3,
.resource-center-filter-cont .tab-content .service-block > h3 {
    font-weight: 700;
    font-size: 14px;
    margin: 0 0 20px;
    float: left;
    width: 100%
}

.resource-center-pane h3.show-title {
    display: none
}

.resource-center-pane input[type=checkbox] {
    visibility: hidden;
    position: absolute;
    z-index: -1
}

.resource-center-pane label {
    position: relative;
    padding-left: 20px;
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 0;
    cursor: pointer
}

    .resource-center-pane label:before {
        content: '';
        border: 2px solid #464646;
        width: 12px;
        height: 12px;
        float: left;
        background: 0 0;
        position: absolute;
        left: 0;
        top: 4px
    }

.resource-center-pane input[type=checkbox]:checked + label:before {
    background: #d10f1f;
    border: 2px solid #d10f1f
}

.resource-center-pane p {
    margin-bottom: 20px
}

    .resource-center-pane p:last-child {
        margin-bottom: 0
    }

.resource-center-pane .btn-filter,
.resource-center-pane .btn-filter.collapsed {
    width: 100%;
    border-radius: 0;
    border: 0;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    padding: 11px 40px 11px 15px;
    box-shadow: none;
    white-space: normal;
    position: relative
}

.resource-center-pane .btn-filter {
    background: #d10f1f
}

    .resource-center-pane .btn-filter.collapsed {
        background: #000
    }

        .resource-center-pane .btn-filter.collapsed:after,
        .resource-center-pane .btn-filter.collapsed:before,
        .resource-center-pane .btn-filter:after,
        .resource-center-pane .btn-filter:before {
            content: "";
            background: #fff;
            -webkit-border-radius: .2em;
            border-radius: .2em;
            display: block;
            height: 13px;
            position: absolute;
            top: 16px;
            width: 2px;
            z-index: 2
        }

        .resource-center-pane .btn-filter.collapsed:after {
            right: 24px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg)
        }

        .resource-center-pane .btn-filter.collapsed:before {
            right: 32px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg)
        }

    .resource-center-pane .btn-filter:after {
        right: 24px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }

    .resource-center-pane .btn-filter:before {
        right: 32px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }

.resource-center-filter-item .hp-text-grid.without-btn {
    padding-top: 0;
    display: table
}

    .resource-center-filter-item .hp-text-grid.without-btn .text-component {
        padding-top: 0;
        padding-bottom: 0;
        display: table-cell;
        vertical-align: middle
    }

        .resource-center-filter-item .hp-text-grid.without-btn .text-component h3 {
            height: 40px;
            overflow: hidden
        }

        .resource-center-filter-item .hp-text-grid.without-btn .text-component p {
            max-height: 135px;
            overflow: hidden
        }

.service-block {
    float: left;
    margin-bottom: 20px;
    position: relative
}

    .resource-center-pane:after,
    .service-block:after,
    .service-block:before {
        position: absolute;
        content: '';
        width: 100%;
        height: 2px;
        background: #000;
        bottom: 0;
        left: 0
    }

    .service-block ul {
        list-style: none;
        padding-left: 0;
        float: left;
        margin-bottom: 5px
    }

        .handbook-block .image-component,
        .service-block ul li {
            margin-bottom: 20px;
            width: 100%;
            float: left
        }

            .service-block ul li a {
                display: block;
                text-decoration: none;
                color: #000;
                font-size: 15px
            }

                .service-block ul li a:hover {
                    color: #d10f1f
                }

                .service-block ul li a img {
                    float: left;
                    margin-right: 12px
                }

.handbook-block {
    float: left
}

    .handbook-block .image-component {
        margin-top: 2px
    }

        .handbook-block .image-component img {
            width: 100%
        }

    .handbook-block .download-handbook {
        width: 100%;
        float: left
    }

        .handbook-block .download-handbook a {
            margin-bottom: 10px
        }

.resource-center-filter-item {
    float: left
}

    .resource-center-filter-item .hp-text-grid {
        display: block
    }

        .featured-resource-grid .hp-text-grid.with-btn,
        .hp-text-grid.v-center,
        .hp-text-grid.v-center.btn-dwnld-text,
        .hp-text-grid.v-center.with-btn,
        .hp-text-grid.v-center.without-btn,
        .resource-center-filter-item .hp-text-grid.btn-dwnld-text,
        .resource-center-filter-item .hp-text-grid.with-btn,
        .highlighted-resource .hp-text-grid,
        .resource-comp-cont .hp-text-grid,
        .brands-resource-cont .hp-text-grid {
            display: table
        }

            .featured-resource-grid .hp-text-grid.with-btn .text-component,
            .hp-text-grid.v-center .text-component,
            .hp-text-grid.v-center.btn-dwnld-text .text-component,
            .hp-text-grid.v-center.without-btn .text-component,
            .resource-center-filter-item .hp-text-grid.btn-dwnld-text .text-component,
            .resource-center-filter-item .hp-text-grid.with-btn .text-component,
             hp-text-grid.v-center.with-btn .text-component,
            .highlighted-resource .hp-text-grid .text-component,
            .resource-comp-cont .hp-text-grid .text-component,
            .brands-resource-cont .hp-text-grid .text-component {
                display: table-cell;
                vertical-align: middle;
                padding-top: 0
            }

                .resource-center-filter-item .hp-text-grid.with-btn .text-component h3.title,.highlighted-resource .hp-text-grid .text-component h3.title, .resource-comp-cont .hp-text-grid .text-component h3.title,.brands-resource-cont .hp-text-grid .text-component h3.title {
                    margin-bottom: 5px
                }

.itemlist_detail span.result-count {
    font-size: 15px;
    margin: 0 15px 0 0;
    padding: 10px 20px 10px 0;
    position: relative;
    font-weight: 700;
    font-family: verdana
}

    .itemlist_detail span.result-count:after {
        content: "";
        width: 2px;
        height: 12px;
        top: 12px;
        background: #d10f1f;
        position: absolute;
        right: 0
    }

.itemlist_detail .btn-group.open .dropdown-toggle,
.itemlist_detail .btn-group > .btn,
.itemlist_detail .btn-group > .btn:focus,
.itemlist_detail .btn-group > .btn:hover {
    border: 0;
    background: 0 0;
    color: #000;
    font-size: 12px;
    box-shadow: none;
    padding: 9px 0 11px
}

.itemlist_detail .btn-group button,
.itemlist_detail .btn-group button span {
    font-size: 12px;
    margin: 0;
    padding: 0;
    line-height: normal
}

.itemlist_detail a.view-count,
.itemlist_detail a.view-count:active,
.itemlist_detail a.view-count:focus {
    font-size: 12px;
    color: #000;
    text-decoration: none
}

    .itemlist_detail a.view-count:hover {
        color: #d10f1f;
        text-decoration: none
    }

a.view-count span.caret {
    margin-left: 10px
}

.itemlist_detail .btn-group > .btn span.caret {
    margin-left: 10px;
    color: #d10f1f;
    margin-top: -2px
}

.itemlist_detail ul.dropdown-menu {
    border-radius: 0;
    box-shadow: none;
    border: 0;
    margin-left: -15px;
    margin-top: -5px;
    padding: 0 15px;
    background: #fff;
    width: inherit;
    min-width: inherit
}

    .itemlist_detail ul.dropdown-menu > li > a,
    .itemlist_detail ul.dropdown-menu > li > a:focus,
    .itemlist_detail ul.dropdown-menu > li > a:hover {
        padding: 5px 0;
        font-size: 12px;
        background: #fff;
        outline: 0
    }

.sds-page-message {
    padding-bottom: 16px;
    font-size: 16px;
}

.lube-pagination {
    text-align: center
}

    .lube-pagination .pagination > li > a,
    .lube-pagination .pagination > li > a:focus,
    .lube-pagination .pagination > li > a:hover,
    .lube-pagination .pagination > li > span:focus,
    .lube-pagination .pagination > li > span:hover {
        border: 0;
        border-radius: 0;
        background: 0 0;
        color: #000;
        font-size: 12px;
        padding: 0 20px
    }

    .lube-pagination .pagination > li:first-child > a {
        padding-left: 0 !important
    }

    .lube-pagination .pagination > .active > a,
    .lube-pagination .pagination > .active > a:focus,
    .lube-pagination .pagination > .active > a:hover,
    .lube-pagination .pagination > .active > span,
    .lube-pagination .pagination > .active > span:focus,
    .lube-pagination .pagination > .active > span:hover {
        font-weight: 700;
        cursor: default;
        background: 0 0;
        border: none;
        color: #000
    }

    .lube-pagination .pagination li a:after {
        content: "";
        width: 2px;
        height: 11px;
        top: 3px;
        background: #d10f1f;
        position: absolute;
        right: 0
    }

    .lube-pagination .pagination li:last-child a:after {
        content: none
    }

.item-list .hp-textVideo-grid .text-component {
    padding-bottom: 25px
}

    .item-list .hp-textVideo-grid .text-component h3 {
        margin-bottom: 0;
        color: #000 !important
    }

.dark-grey .hp-textVideo-grid.item-list .text-component h3,
.item-list .hp-textVideo-grid.bg-grey .text-component h3 {
    margin-bottom: 0;
    color: #fff !important
}

.filter-search-submitBtn button {
    width: 100%;
    margin-top: 5px
}

@media (min-width:768px) {
    .resource-center-filter-item .hp-text-grid.without-btn .text-component h3 {
        height: 55px
    }

    .resource-center-filter-item .hp-text-grid.without-btn .text-component p {
        max-height: 190px;
        overflow: hidden
    }

    .resource-center-filter .resource-center-filter-cont .tab-content > .tab-pane {
        display: block
    }

    .resource-center-filter .resource-center-filter-cont ul.nav.nav-tabs {
        display: none
    }

    .resource-center-filter .resource-center-filter-cont .collapse {
        display: block
    }

    .resource-center-filter .resource-center-filter-cont .btn-filter {
        display: none
    }

    .resource-center-search .form-group {
        margin-bottom: 20px
    }

    .resource-center-filter-cont .tab-content .handbook-block > h3,
    .resource-center-filter-cont .tab-content .service-block > h3 {
        font-weight: 700;
        font-size: 15px;
        margin: 0 0 25px
    }

    .itemlist_detail .btn-group button,
    .itemlist_detail .btn-group button span,
    .itemlist_detail a.view-count,
    .itemlist_detail a.view-count:active,
    .itemlist_detail a.view-count:focus,
    .itemlist_detail ul.dropdown-menu > li > a,
    .itemlist_detail ul.dropdown-menu > li > a:focus,
    .itemlist_detail ul.dropdown-menu > li > a:hover,
    .lube-pagination .pagination > li > a,
    .lube-pagination .pagination > li > a:focus,
    .lube-pagination .pagination > li > a:hover,
    .lube-pagination .pagination > li > span:focus,
    .lube-pagination .pagination > li > span:hover {
        font-size: 14px
    }

    .resource-center-pane h3.show-title {
        display: block
    }

    .resource-center-pane {
        margin-bottom: 30px;
        position: relative;
        padding-bottom: 32px;
        width: 100%
    }

    .service-block {
        margin-bottom: 33px;
        padding-bottom: 13px;
        width: 100%
    }

        .service-block ul li {
            margin-bottom: 20px
        }

    .itemlist_detail span.result-count {
        font-size: 14px;
        margin: 0 15px 0 0;
        padding: 0 20px 0 0
    }

        .itemlist_detail span.result-count:after {
            top: 4px
        }

    .itemlist_detail ul.dropdown-menu {
        margin-top: 5px;
        width: inherit;
        padding: 0 15px;
        margin-left: -15px
    }

    .itemlist_detail .btn-group.open .dropdown-toggle,
    .itemlist_detail .btn-group > .btn,
    .itemlist_detail .btn-group > .btn:focus,
    .itemlist_detail .btn-group > .btn:hover {
        padding: 0;
        margin-top: -5px
    }

    .itemlist_detail {
        margin-bottom: 25px
    }

    .lube-pagination .pagination > li > a:hover {
        color: #d10f1f
    }

    .lube-pagination .pagination li a:after {
        top: 5px
    }

    .resource-center-filter-main {
        margin-top: -17px
    }
}

@media(min-width:992px) {

    .resource-center-filter-item .box-container,
    .resource-center-filter-item .case-study,
    .resource-center-filter-item .hp-text-grid,
    .resource-center-filter-item .hp-textImage-grid,
    .resource-center-filter-item .hp-textVideo-grid {
        margin-bottom: 30px;
        height: 300px !important
    }

        .resource-center-filter-item .case-study .text-component {
            padding: 25px 25px 89px
        }

    .resource-center-search .form-group input.form-control {
        padding: 7px 45px 7px 20px;
        height: 40px;
        font-family: Verdana;
        font-style: italic
    }

    .itemlist_detail a.view-count,
    .itemlist_detail a.view-count:active,
    .itemlist_detail a.view-count:focus {
        font-size: 15px
    }

    .resource-center-search .form-group {
        margin-bottom: 35px
    }

    .resource-center-search {
        margin-top: 5px
    }

    .resource-center-pane p {
        margin-bottom: 10px
    }

    .itemlist_detail span.result-count {
        font-size: 15px;
        margin: 0 6px 0 0;
        padding: 0 10px 10px 0
    }

        .itemlist_detail span.result-count:after {
            top: 5px
        }

    .itemlist_detail .btn-group button,
    .itemlist_detail .btn-group button span,
    .itemlist_detail ul.dropdown-menu > li > a,
    .itemlist_detail ul.dropdown-menu > li > a:focus,
    .itemlist_detail ul.dropdown-menu > li > a:hover {
        font-size: 15px
    }

    .itemlist_detail {
        margin-bottom: 30px
    }

    .lube-pagination .pagination > li > a,
    .lube-pagination .pagination > li > a:focus,
    .lube-pagination .pagination > li > a:hover,
    .lube-pagination .pagination > li > span:focus,
    .lube-pagination .pagination > li > span:hover {
        font-size: 15px;
        padding: 0 10px
    }

    .resource-center-filter-cont .tab-content {
        max-width: 312px
    }

    .resource-center-filter-cont .handbook-block .download-handbook a {
        margin-bottom: 2px
    }

    .handbook-block .download-handbook p {
        padding-top: 0
    }

    .resource-center-filter-cont .red-txt-button b {
        padding-left: 0
    }

    .resource-center-filter-cont .red-txt-button {
        padding-right: 15px
    }

    .resource-center-filter-cont .service-block ul {
        margin-bottom: 7px
    }

    .resource-center-filter-cont .service-block h3:nth-child(3) {
        margin: 0 0 30px
    }

    .resource-center-filter-cont .service-block :nth-child(4) {
        margin-bottom: 0
    }

    .resource-center-filter-cont .tab-content .filter-element-list h3 {
        margin: 0 0 10px
    }

    .resource-center-filter-cont .resource-center-search input {
        font-size: 12px;
        color: #464646
    }

    .filter-search-submitBtn button {
        margin-top: 20px
    }
}

@media (min-width:768px) and (max-width:991px) {
    .item-list > div > div {
        min-height: 337px
    }

    .resource-center-search {
        margin-top: 0;
        padding: 0 15px
    }

    .service-block h3:first-child img {
        float: left;
        margin-right: 10px;
        margin-top: 5px
    }

    .service-block h3:first-child span {
        float: left;
        width: 90px
    }
}

@media (max-width:767px) {

    .resource-center-filter-item .lube-pagination .pagination,
    div.filter {
        float: left
    }

    .resource-center-filter-item .hp-text-grid,
    .resource-center-filter-item .hp-text-grid.without-btn {
        height: 250px
    }

    div.filter {
        position: relative;
        width: 100%
    }

        div.filter:after {
            position: absolute;
            content: '';
            width: 100%;
            height: 2px;
            background: #000;
            bottom: 0;
            left: 0
        }

    .filter-element-list {
        padding-bottom: 32px
    }

    .itemlist_detail {
        margin-bottom: 10px;
        margin-top: -15px
    }

    .resource-center-filter-cont .itemlist_detail {
        margin-left: -15px;
        margin-right: -15px;
        margin-top: -5px
    }

    .resource-center-filter-item {
        padding-top: 15px;
        width: 100%
    }

        .resource-center-filter-item .col-sm-6,
        .resource-center-filter-item .lube-pagination .first-column {
            margin-left: -20px;
            margin-right: -20px
        }

    .resource-center-pane:after,
    .service-block:after {
        content: none
    }

    .service-block ul {
        padding-left: 15px
    }
}

.content-feature p {
    font-size: 16px;
    margin-top: 5px
}

.content-feature h2 {
    padding-bottom: 0
}

.content-feature a.btn {
    margin-top: 10px
}

.article-accordion {
    width: 100%;
    float: left
}

    .article-accordion.panel-group {
        margin-bottom: 0
    }

    .article-accordion .panel-default {
        border-radius: 0;
        box-shadow: none;
        border: 0;
        padding: 0;
        float: left;
        width: 100%;
        margin-bottom: 15px
    }

        .article-accordion .panel-default:last-child {
            margin-bottom: 0
        }

        .article-accordion .panel-default > .panel-heading {
            border: 0;
            border-radius: 0;
            padding: 0;
            width: 100%;
            display: block;
            float: left
        }

            .article-accordion .panel-default > .panel-heading .panel-title {
                float: left;
                width: 100%;
                height: 45px;
                display: table
            }

                .article-accordion .panel-default > .panel-heading .panel-title a {
                    font-weight: 700;
                    color: #fff;
                    padding: 10px 70px 10px 20px;
                    display: table-cell;
                    vertical-align: middle;
                    width: 100%;
                    font-size: 16px;
                    position: relative;
                    text-decoration: none;
                    background: #d10f1f
                }

                    .article-accordion .panel-default > .panel-heading .panel-title a.collapsed {
                        background: #232323
                    }

        .article-accordion .panel-default > .panel-collapse {
            float: left
        }

        .article-accordion .panel-default > .panel-heading .panel-title a:after,
        .article-accordion .panel-default > .panel-heading .panel-title a:before {
            content: "";
            background: #fff;
            -webkit-border-radius: .2em;
            border-radius: .2em;
            display: block;
            height: 13px;
            position: absolute;
            top: 18px;
            width: 2px;
            z-index: 2
        }

        .article-accordion .panel-default > .panel-heading .panel-title a.collapsed:before {
            right: 32px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg)
        }

        .article-accordion .panel-default > .panel-heading .panel-title a.collapsed:after {
            right: 24px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg)
        }

        .article-accordion .panel-default > .panel-heading .panel-title a:after {
            right: 24px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg)
        }

        .article-accordion .panel-default > .panel-heading .panel-title a:before {
            right: 32px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg)
        }

        .article-accordion .panel-default > .panel-collapse > .panel-body {
            padding: 15px 0;
            font-size: 16px;
            border-top: 0
        }

            .article-accordion .panel-default > .panel-collapse > .panel-body h3 {
                font-weight: 700;
                font-size: 18px;
                margin: 0 0 10px
            }

            .article-accordion .panel-default > .panel-collapse > .panel-body p {
                font-size: 16px
            }

            .article-accordion .panel-default > .panel-collapse > .panel-body .image-with-Text {
                margin-bottom: 15px
            }

@media (min-width:768px) {
    .content-feature p {
        font-size: 16px
    }

    .content-feature a.btn {
        margin-top: 10px
    }

    .article-accordion .panel-default > .panel-heading .panel-title a {
        font-size: 18px
    }

    .article-accordion .panel-default > .panel-collapse > .panel-body h3 {
        font-size: 20px
    }

    .article-accordion .panel-default > .panel-collapse > .panel-body p {
        font-size: 18px
    }

    .article-accordion .panel-default > .panel-collapse > .panel-body {
        font-size: 18px;
        padding: 30px 0
    }

    .image-with-Text .image-component {
        min-height: 258px
    }

    .image-with-Text > div {
        display: table;
        min-height: 300px
    }

        .image-with-Text > div > div {
            display: table-cell;
            text-align: left;
            vertical-align: middle
        }
}

@media (min-width:992px) {
    .content-feature .herobanner-caption {
        padding-left: 50px
    }

    .content-feature p {
        font-size: 20px
    }

    .content-feature a.btn {
        margin-top: 15px
    }

    .article-accordion .panel-default > .panel-collapse > .panel-body {
        padding: 40px 0 35px
    }

    .article-accordion .panel-default > .panel-heading .panel-title a {
        font-size: 20px;
        padding: 22px 70px 22px 25px;
        line-height: 1.5em
    }

        .article-accordion .panel-default > .panel-heading .panel-title a:before {
            right: 35px;
            top: 23px
        }

        .article-accordion .panel-default > .panel-heading .panel-title a:after {
            right: 27px;
            top: 23px
        }

    .article-accordion .panel-default > .panel-collapse > .panel-body h3 {
        font-size: 24px;
        margin: 0 0 15px
    }

    .article-accordion .panel-default > .panel-collapse > .panel-body,
    .article-accordion .panel-default > .panel-collapse > .panel-body p {
        font-size: 20px
    }
}

@media (max-width:767px) {
    .image-with-Text .image-component img {
        width: 100%;
        margin-bottom: 15px
    }

    .news-block .image-component {
        padding-bottom: 10px;
        position: relative;
        height: 100%
    }

    .news-components-cont .image-text-news {
        margin-bottom: 10px
    }

    .article-accordion .panel-default > .panel-collapse > .panel-body {
        padding-bottom: 0;
        padding-right: 20px !important;
        padding-left: 20px !important
    }

    .news-block {
        margin-bottom: 5px
    }
}

.news-components-cont {
    padding: 0
}

.image-text-news.left-image-right-text .news-block:first-child,
.image-text-news.left-text-right-image .news-block:last-child {
    height: 240px;
    position: relative;
    margin-bottom: 25px;
    overflow: hidden
}

.news-components-cont img {
    width: 100%
}

.news-text .image-component img {
    position: static;
    float: right;
    margin: 0 0 15px 15px;
    transform: inherit
}

.news-components-cont .news-block h2,
.news-components-cont h3 {
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 10px
}

.news-components-cont li,
.news-components-cont p {
    font-size: 16px
}

    .news-components-cont p:last-child {
        margin: 0
    }

.news-components-cont .image-text-news {
    margin-bottom: 15px
}

.general-page-wrap p.date,
.news-components-cont p.date {
    font-weight: 700;
    margin-top: 5px
}

.news-components-cont ul {
    padding-left: 20px
}

    .news-block ul li,
    .news-components-cont ul li {
        position: relative;
        margin-bottom: 0;
        list-style: none
    }

        .news-block ul li:before,
        .news-components-cont ul li:before {
            content: " ";
            width: 6px;
            height: 6px;
            background: 0 0;
            border: 1px solid #000;
            display: block;
            border-radius: 4px;
            position: absolute;
            top: 8px;
            left: -15px
        }

.general-page-wrap h2 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    color: #000;
    margin-top: 0;
    margin-bottom: 0
}

.general-page-wrap h4 {
    font-size: 16px;
    line-height: 18px;
    font-weight: 700
}

.terms-content {
    margin-bottom: 10px
}

@media screen and (min-width:768px) {
    .news-text .image-component {
        margin: 0;
        float: right
    }

    .news-components-cont .news-block h2,
    .news-components-cont h3 {
        font-size: 20px
    }

    .news-components-cont li,
    .news-components-cont p {
        font-size: 18px
    }

    .news-components-cont .image-text-news {
        display: table;
        padding-bottom: 20px;
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .news-components-cont .news-block {
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: table-cell;
        vertical-align: middle;
        float: none;
        padding-top: 22px
    }

    .news-block ul li:before,
    .news-components-cont ul li:before {
        top: 10px
    }

    .image-text-news.left-image-right-text .news-block:first-child,
    .image-text-news.left-text-right-image .news-block:last-child {
        height: 162px;
        position: relative;
        overflow: hidden
    }

    .news-components-cont img {
        height: 100%;
        width: auto
    }

    .general-page-wrap h2 {
        font-size: 24px;
        line-height: 28px
    }

    .general-page-wrap h4 {
        font-size: 18px;
        line-height: 20px
    }

    .terms-content {
        margin-bottom: 15px
    }
}

@media screen and (min-width:992px) {

    .news-components-cont .news-block h2,
    .news-components-cont h3 {
        font-size: 24px
    }

    .news-components-cont li,
    .news-components-cont p {
        font-size: 20px
    }

    .left-image-right-text .text-component {
        padding-left: 50px
    }

    .left-text-right-image .text-component {
        padding-right: 50px
    }

    .news-block ul li:before,
    .news-components-cont ul li:before {
        top: 12px
    }

    .image-text-news.left-image-right-text .news-block:first-child,
    .image-text-news.left-text-right-image .news-block:last-child {
        height: 272px;
        position: relative;
        overflow: hidden
    }

    .general-page-wrap h2 {
        font-size: 30px;
        line-height: 36px
    }

    .general-page-wrap h4 {
        font-size: 18px;
        line-height: 20px
    }

    .terms-content {
        margin-bottom: 20px
    }
}

@media (min-width:768px) and (max-width:991px) {
    .resource-comp-cont .hp-textImage-grid {
        min-height: 335px
    }

    .image-text-news.left-image-right-text .news-block:last-child {
        padding-left: 15px !important
    }

    .image-text-news.left-text-right-image .news-block:first-child {
        padding-right: 15px !important
    }

    /*FG fix*/
    .featured-resource-grid .hp-textImage-grid, .featured-resource-grid .hp-textVideo-grid{
        height: 320px !important;
    }
}

.image-block,
.video-block {
    background: #000
}
.hp-textVideo-grid .video-block {
    background: white !important
}

    .video-block a:before {
        width: 70px;
        height: 47px;
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -20px 0 0 -28px;
        background: url(../images/play-icon.png) center center no-repeat;
        z-index: 1
    }

    .video-block img {
        width: 100%;
        max-width: 100%
    }

.video-player {
    height: 0;
    padding-bottom: 56.25%;
    position: relative
}

    .video-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important
    }

.about-video-text {
    padding: 50px;
    background: #464646;
    color: #fff
}

.about-video-cont .about-video-text h2 {
    font-family: Verdana;
    font-size: 30px;
    font-weight: 700;
    margin: 0;
    padding-bottom: 10px
}

.about-image-text {
    float: right;
    width: 70%;
    padding: 0 40px 0 100px;
    font-family: Verdana;
    font-weight: 400;
    font-size: 20px
}

    .about-image-text p {
        margin-bottom: 15px
    }

.about-us-banner-caption .herobanner-caption {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: 50%;
    text-align: left;
    padding: 0 0 0 33px;
    background: 0 0;
    color: #fff
}

    .about-us-banner-caption .herobanner-caption p,
    .about-video-third-cont .herobanner-caption p {
        line-height: inherit
    }

.video-popup .modal-header {
    border: none;
    margin-bottom: 10px
}

.video-popup .modal-body {
    padding: 0;
    background: #000
}

.video-popup .modal-content {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    border-radius: 0
}

.video-popup .modal-header button.closed {
    position: absolute;
    display: inline-block;
    width: 15px;
    height: 15px;
    overflow: hidden;
    /*top: 5px;*/
    right: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    text-indent: -999999px
}

    .video-popup .modal-header button.closed::after,
    .video-popup .modal-header button.closed::before {
        content: '';
        position: absolute;
        height: 2px;
        width: 100%;
        top: 50%;
        left: 0;
        background: #fff
    }

    .video-popup .modal-header button.closed::before {
        transform: rotate(45deg)
    }

    .video-popup .modal-header button.closed::after {
        transform: rotate(135deg)
    }

.more-about-section .hp-textImage-grid {
    margin-bottom: 0
}

@media screen and (min-width:768px) {
    .about-video-block {
        display: table;
        font-size: 20px
    }

    .about-video-cont .about-video-text,
    .about-video-cont .image-block,
    .about-video-cont .video-block {
        width: 50%;
        display: table-cell;
        float: none;
        vertical-align: middle;
        font-family: Verdana;
        font-weight: 400
    }

    .about-us-banner-caption .herobanner-caption {
        padding: 0 33px 0 0
    }

    .about-story-block {
        margin-left: -15px;
        margin-right: -15px;
        padding-top: 30px;
        padding-bottom: 30px
    }

    .about-video-second-cont .about-image-block {
        width: 33.3333%;
        padding-left: 15px;
        padding-right: 15px;
        display: table-cell;
        float: none;
        vertical-align: middle
    }

    .about-video-second-cont .about-image-text {
        width: 66.6666%;
        padding-left: 30px;
        padding-right: 15px;
        display: table-cell;
        float: none;
        vertical-align: middle
    }

        .about-video-second-cont .about-image-text h2 {
            margin-top: 0
        }
}

@media screen and (min-width:992px) {
    .about-story-block {
        margin-left: 0;
        margin-right: 0;
        padding: 0 25px
    }

    .about-video-second-cont .about-image-block {
        padding-left: 25px;
        padding-right: 25px
    }

    .about-video-second-cont .about-image-text {
        padding-left: 75px;
        padding-right: 25px
    }

    .about-video-cont .about-video-text,
    .about-video-cont .image-block,
    .about-video-cont .video-block {
        display: table-cell;
        float: none;
        vertical-align: middle;
        font-family: Verdana;
        font-weight: 400
    }

    .about-video-cont .about-video-text {
        width: 52%
    }

    .about-video-cont .image-block,
    .about-video-cont .video-block {
        width: 48%
    }

    .about-image-block {
        float: left;
        width: 30%
    }

    .about-section .image-block,
    .about-section .video-block {
        max-width: 724px
    }

    .about-video-second-cont .about-image-text h2 {
        font-size: 30px;
        font-family: Verdana;
        font-weight: 700;
        margin: 0;
        padding-bottom: 10px;
        letter-spacing: -1.5px
    }

    .about-video-cont .about-video-text p {
        margin: 0;
        padding-bottom: 15px
    }

    .about-video-second-cont .about-image-text{
        padding: 25px 20px
    }

    .about-video-second-cont {
        padding: 40px 0
    }

    .about-video-third-cont .herobanner-caption {
        padding: 0 0 0 50px;
        width: 50%
    }

        .about-video-third-cont .herobanner-caption h2 {
            font-size: 36px;
            font-family: Verdana;
            font-weight: 700;
            margin: 0
        }

        .about-video-third-cont .herobanner-caption p {
            font-size: 20px;
            font-family: Verdana;
            font-weight: 700;
            margin: 0;
            padding: 10px 0 0
        }

    .about-us-banner-caption .herobanner-image img,
    .about-video-third-cont .herobanner-image img {
        width: inherit;
        max-width: inherit
    }

    .about-us-banner-caption .herobanner-caption p {
        font-size: 20px;
        padding: 10px 0
    }

    .about-video-block {
        min-height: 310px
    }
}

@media screen and (min-width:1366px) {
    .about-story-block {
        margin-left: -25px;
        margin-right: -25px;
        padding: 0
    }

    .about-video-cont .about-video-text h2 {
        margin-top: -4px
    }
}

@media screen and (max-width:767px) {
    .articles-right-text {
        margin-top: 15px
    }

    .about-story-block,
    .about-video-block {
        margin-left: -20px;
        margin-right: -20px
    }

    .about-image-text {
        float: none;
        width: auto
    }

    .about-video-text {
        padding: 25px 20px
    }

    .about-video-cont .about-video-text h2 {
        font-family: Verdana;
        font-weight: 700;
        font-size: 20px;
        color: #fff;
        margin: 0;
        padding-bottom: 10px
    }

    .about-video-cont .about-video-text p {
        font-family: Verdana;
        font-weight: 400;
        font-size: 12px;
        color: #fff;
        padding-bottom: 15px;
        margin: 0
    }

    .about-video-second-cont .about-image-text {
        padding: 25px 20px
    }

        .about-video-second-cont .about-image-text h2 {
            font-family: Verdana;
            font-weight: 700;
            font-size: 20px;
            color: #000;
            margin: 0;
            padding-bottom: 10px
        }

        .about-video-second-cont .about-image-text p {
            font-family: Verdana;
            font-weight: 400;
            font-size: 16px;
            color: #000;
            padding-bottom: 15px;
            margin: 0
        }

    .about-video-third-cont .herobanner-caption h2 {
        font-family: Verdana;
        font-size: 24px;
        font-weight: 700;
        color: #fff;
        margin: 0;
        padding-bottom: 10px
    }

    .about-video-third-cont .herobanner-caption p {
        font-family: Verdana;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        padding-bottom: 15px
    }

    .about-us-banner-caption .herobanner-caption h2 {
        font-family: Verdana;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        margin: 0;
        padding-bottom: 10px
    }

    .about-us-banner-caption .herobanner-caption p {
        font-family: Verdana;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        margin: 0;
        padding-bottom: 10px
    }

    .about-video-third-cont .herobanner-caption {
        background: #464646;
        padding: 25px 20px
    }

    .about-us-banner-caption .herobanner-caption {
        width: auto;
        background: #464646;
        padding: 25px 20px;
        position: static
    }

    .about-video-second-cont .about-image-block img {
        width: 100%
    }

    .more-about-section .hp-textImage-grid {
        margin-bottom: 20px;
        float: left
    }

    .more-about-section .third-column .hp-textImage-grid {
        margin-bottom: 0
    }
}

@media (min-width:768px) and (max-width:991px) {

    .about-us-banner-caption,
    .about-video-third-cont {
        min-height: 280px
    }

    .about-video-text {
        padding: 30px
    }

    .about-video-cont {
        margin-left: -33px;
        margin-right: -33px
    }

        .about-video-cont .col-sm-12 {
            padding-left: 0;
            padding-right: 0
        }

        .about-video-cont .about-video-text h2 {
            font-size: 24px;
            line-height: 1.2;
            letter-spacing: -.8px
        }

        .about-video-cont .about-video-text p {
            font-size: 12px;
            font-weight: 400;
            line-height: 1.3
        }

    .about-video-second-cont .about-image-text h2 {
        font-size: 24px;
        font-weight: 700
    }

    .about-video-second-cont .about-image-text p {
        font-size: 18px;
        font-weight: 400
    }

    .about-video-third-cont .herobanner-image img {
        width: inherit;
        max-width: inherit
    }

    .about-video-third-cont .herobanner-caption {
        width: 50%;
        padding: 0 0 0 33px
    }

        .about-video-third-cont .herobanner-caption p {
            font-size: 16px;
            padding-bottom: 15px
        }

    .about-us-banner-caption .herobanner-image img {
        width: inherit;
        max-width: inherit
    }

    .about-us-banner-caption .herobanner-caption h2 {
        font-size: 25px;
        padding-bottom: 10px
    }

    .about-us-banner-caption .herobanner-caption p {
        font-size: 16px;
        font-weight: 700;
        padding-bottom: 10px
    }

    .articles-promo-text {
        vertical-align: top !important
    }

    .more-about-section .hp-textImage-grid {
        height: auto !important;
        min-height: 278px !important
    }
}

@media (min-width:1366px) {

    .about-us-banner-caption .hero-banner,
    .about-video-cont .about-video-block,
    .about-video-third-cont .hero-banner,
    .hero-wrapper .hero-banner {
        margin-left: -50px;
        margin-right: -50px
    }
}

.download-case-study-cont p {
    margin-bottom: 0;
    margin-top: 10px;
    font-size: 12px !important
}

.article-resource-card .case-study {
    margin-bottom: 0;
    min-height: 200px;
    width: 100%
}

    .article-resource-card .case-study .text-component {
        padding: 20px 20px 80px
    }

        .article-resource-card .case-study .text-component h2.title {
            height: auto;
            overflow: visible;
            max-height: inherit
        }

.article-resource-card .col-sm-12 .col-sm-12 .text-component {
    padding-left: 0
}

@media (min-width:768px) {
    .article-resource-card {
        padding-top: 15px;
        min-height: inherit
    }

        .article-resource-card .case-study {
            padding: 0;
            display: table;
            min-height: inherit
        }

            .article-resource-card .case-study .text-component {
                display: table-cell;
                vertical-align: top;
                float: none;
                position: relative;
                padding: 0;
                min-height: inherit
            }

                .article-resource-card .case-study .image-component,
                .article-resource-card .case-study .text-component h2.title {
                    padding-top: 0
                }

                .article-resource-card .case-study .text-component p {
                    width: auto;
                    padding-left: 75% !important
                }

        .article-resource-card .image-component.article-image {
            max-width: 175px;
            margin-top: 5px
        }
}

@media (min-width:992px) {

    .article-resource-card,
    .article-resource-card .case-study {
        padding-top: 0
    }

        .article-resource-card .case-study .text-component {
            padding: 15px 0 0 90px;
            height: auto !important
        }

        .article-resource-card .image-component.article-image {
            max-width: 260px;
            margin-top: 0
        }

        .article-resource-card .case-study .image-component {
            padding-top: 15px
        }

        .article-resource-card .case-study .text-component p {
            padding-left: 63%;
            margin-bottom: 0;
            padding-top: 15px
        }

        .article-resource-card .case-study .text-component h2.title {
            font-size: 24px
        }
}

@media (max-width:767px) {
    .article-resource-card .case-study {
        min-height: 175px
    }

        .article-resource-card .case-study .image-component {
            padding-top: 30px
        }

        .article-resource-card .case-study .text-component h2.title {
            padding-top: 0
        }

    .article-resource-card .image-component.article-image img {
        width: 100%
    }

    .article-resource-card .case-study .text-component {
        padding: 20px 0 80px
    }

        .article-resource-card .case-study .text-component p {
            width: auto;
            float: left;
            margin-top: 0;
            padding-left: 0
        }
}

.resource-banner-promo {
    background: #464646;
    color: #fff;
    padding: 20px 0 25px
}

@media (min-width:768px) {
    .resource-banner-promo {
        padding: 45px 0
    }

    .resource-banner-text {
        font-size: 24px;
        padding-bottom: 25px
    }

    .resource-video-text h2 {
        font-size: 20px
    }
}

@media (min-width:992px) {
    .resource-banner-promo {
        padding: 60px 0
    }

    .resource-banner-text {
        font-size: 30px
    }

    .resource-video-text h2 {
        font-size: 24px
    }
}

.resource-banner-text {
    font-size: 20px;
    padding-bottom: 0;
    font-weight: 700
}

.resource-video-text h2 {
    font-size: 18px;
    margin: 0;
    padding: 0 0 12px;
    font-weight: 400
}

.about-section .resource-video-text h2,
.component-tag {
    font-weight: 700
}

.resource-video-text ul {
    margin: 15px 0;
    list-style: none;
    padding-left: 15px;
    padding-bottom: 20px
}

    .resource-video-text ul > li {
        position: relative;
        font-size: 14px
    }

        .resource-video-text ul > li:before {
            content: " ";
            width: 6px;
            height: 6px;
            display: block;
            border-radius: 6px;
            position: absolute;
            top: 5px;
            left: -15px
        }

.about-section .product-resource-card .product-resource-textImage-grid .product-resource-text-component h3.product-resource-title {
    padding-bottom: 10px
}

.about-section .second-column {
    position: relative;
    z-index: 1
}

.component-tag {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 25px;
    background: #232323;
    z-index: 2;
    color: #fff;
    font-size: 12px;
    line-height: 25px
}

.about-section .product-resource-card {
    margin-top: 15px
}

.resource-video-text p {
    font-size: 14px;
    margin-bottom: 5px
}

.resource-video-text li {
    font-size: 14px;
    margin-bottom: 10px
}

.resource-video-popup .modal-header {
    border: none;
    margin-bottom: 10px
}

.resource-video-popup .modal-body {
    padding: 0
}

.resource-video-popup .modal-header button.closed {
    background: 0 0;
    border: none;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 21px;
    font-weight: 400;
    color: #fff
}

.resource-video-popup .modal-content {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    border-radius: 0
}

.resource-video-popup .modal-dialog {
    width: 58%
}

.resource-banner-promo .resource-video-text ul {
    padding-bottom: 0
}

    .resource-banner-promo .resource-video-text ul > li {
        padding-bottom: 6px
    }

.resource-banner-promo .download-case-study-cont {
    margin-top: 10px
}

.about-section p {
    margin-bottom: 10px
}

.about-section ul {
    padding-bottom: 0
}

@media (min-width:768px) {
    .resource-banner-promo {
        padding: 45px 0
    }

    .resource-banner-text {
        font-size: 24px;
        padding-bottom: 25px
    }

    .resource-video-text h2 {
        font-size: 20px
    }

    .about-section .product-resource-card {
        margin-top: 0
    }

    .about-section .resource-video-text li,
    .about-section .resource-video-text p {
        font-size: 18px;
        line-height: 21px
    }
}

@media (min-width:992px) {
    .resource-banner-promo {
        padding: 50px 0
    }

        .resource-banner-promo .resource-video-text ul > li:before {
            top: 5px
        }

    .resource-banner-text {
        font-size: 30px;
        padding-bottom: 35px
    }

    .resource-video-text {
        font-family: verdana;
        font-weight: 400;
        margin-bottom: 25px
    }

        .resource-video-text h2 {
            font-size: 24px;
            line-height: 28px;
            margin-bottom: 5px
        }

    .about-section .resource-video-text li,
    .about-section .resource-video-text p {
        font-size: 20px;
        line-height: 26px
    }

    .resource-video-text ul > li:before {
        top: 12px
    }
}

@media (max-width:767px) {
    .about-section {
        padding: 20px 0
    }

    .resource-video-text {
        margin-bottom: 15px
    }

        .resource-video-text h2 {
            padding: 0 0 12px;
            line-height: 1.2em
        }

        .resource-video-text p {
            font-size: 12px
        }

        .resource-video-text ul > li {
            position: relative;
            font-size: 12px
        }
}

@media (min-width:1366px) {
    .resource-video-text {
        max-width: 724px
    }

    .resource-video-cont .resource-video-text {
        max-width: inherit
    }

    .resource-video-text.only-text {
        max-width: 100%
    }
}

.top-bottom-50,
.top-bottom-60 {
    padding-top: 25px;
    padding-bottom: 25px
}

.top-50,
.top-60 {
    padding-top: 25px
}

.top-15 {
    padding-top: 15px
}

.top-bottom-60-40 {
    padding-top: 25px;
    padding-bottom: 0
}

.top-bottom-60-20 {
    padding-top: 25px;
    padding-bottom: 5px
}

.top-bottom-50-30 {
    padding-top: 25px;
    padding-bottom: 25px
}

.bottom-15 {
    padding-bottom: 15px
}

.bottom-20 {
    padding-bottom: 20px
}

.bottom-30 {
    padding-bottom: 30px
}

.bottom-40 {
    margin-bottom: 20px
}

.bottom-60 {
    padding-bottom: 25px
}

.border-top {
    position: relative
}

    .border-top:before {
        position: absolute;
        content: "";
        top: 0;
        width: 50%;
        height: 2px;
        background: #000;
        left: 25%;
        right: 25%
    }

.top-40 {
    margin-top: 15px
}

.top-30 {
    padding-top: 15px
}

.top-20 {
    padding-top: 20px
}

.lube-text-component h3 {
    font-size: 18px;
    margin-bottom: 15px;
    margin-top: 0;
    font-weight: 700
}

@media (min-width:768px) {
    .bottom-40 {
        margin-bottom: 30px
    }

    .top-bottom-60 {
        padding-top: 45px;
        padding-bottom: 45px
    }

    .top-bottom-60-40 {
        padding-top: 45px;
        padding-bottom: 25px
    }

    .top-bottom-60-20 {
        padding-top: 45px;
        padding-bottom: 15px
    }

    .top-bottom-50 {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .top-bottom-50-30 {
        padding-top: 40px;
        padding-bottom: 20px
    }

    .top-60 {
        padding-top: 45px
    }

    .top-50 {
        padding-top: 35px
    }

    .top-40 {
        margin-top: 25px
    }

    .top-30 {
        padding-top: 20px
    }

    .bottom-60 {
        padding-bottom: 45px
    }

    .lube-text-component h3 {
        font-size: 20px
    }
}

@media(min-width:992px) {
    .bottom-40 {
        margin-bottom: 40px
    }

    .top-bottom-60 {
        padding-top: 60px;
        padding-bottom: 60px
    }

    .top-bottom-60-40 {
        padding-top: 60px;
        padding-bottom: 40px
    }

    .top-bottom-60-20 {
        padding-top: 60px;
        padding-bottom: 20px
    }

    .top-bottom-50 {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .top-bottom-50-30 {
        padding-top: 50px;
        padding-bottom: 30px
    }

    .top-60 {
        padding-top: 60px
    }

    .top-40 {
        margin-top: 40px
    }

    .top-50 {
        padding-top: 50px
    }

    .top-30 {
        padding-top: 30px
    }

    .bottom-60 {
        padding-bottom: 60px
    }

    .lube-text-component h3 {
        font-size: 24px
    }

    .m-bottom-20 {
        margin-bottom: 20px
    }

    .lube-container.top-bottom-60.resource-center-filter-main {
        margin-top: -39px
    }

    .row.lube-largeLeft.search-result.bottom-60 {
        padding-bottom: 50px
    }
}

@media(max-width:767px) {
    .bottom-m-0 {
        padding-bottom: 0
    }
}

.gas-sources,
.level-of-ash,
.performance {
    display: none
}

.decision-tree-function h2 {
    margin: 0 0 20px;
    font-weight: 700;
    font-size: 20px
}

.decision-tree-function p {
    font-size: 12px;
    color: #000;
    margin: 0 0 20px
}

.grey-button,
.grey-button:active,
.grey-button:focus {
    background: #f3f3f3;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    border-radius: 0;
    box-shadow: none;
    white-space: initial;
    padding: 15px 0
}

    .grey-button.active,
    .grey-button:hover {
        box-shadow: none;
        background: #d10f1f;
        color: #fff
    }

    .grey-button span {
        font-weight: 400;
        display: block
    }

.decision-tree-function .btn-group label {
    position: relative;
    overflow: hidden
}

    .decision-tree-function .btn-group label input[type=radio] {
        position: absolute;
        top: -5000px;
        left: 0
    }

.decision-ree-function .btn.red-button:focus,
.decision-ree-function .red-button:hover {
    color: #fff
}

.performance .subbrand .subbrand-item .image-component {
    width: 35%;
    text-align: center
}

.performance ul {
    padding-left: 0;
    list-style: none
}

    .performance ul li {
        margin-top: 10px;
        padding-left: 10px;
        position: relative
    }

        .performance ul li:before {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            border: 1px solid #000;
            position: absolute;
            left: 0;
            top: 5px;
            content: ""
        }

.performance .subbrand-item {
    margin-bottom: 20px
}

    .performance .subbrand-item h3 {
        margin: 0;
        font-size: 18px
    }

    .performance .subbrand-item p span {
        font-weight: 700;
        font-size: 12px
    }

.common-decision {
    display: none;
    width: 100%;
    float: left
}

.decision-tree-common .decision-no,
.decision-tree-common .decision-yes {
    display: block
}

.ash-level-cont .grey-button span {
    font-size: 12px
}

.start-over-btn {
    margin-bottom: 15px
}

.performance .subbrand-item .image-component img {
    float: none
}

@media (min-width:768px) {
    .decision-tree-function h2 {
        font-size: 24px
    }

    .decision-tree-function p {
        font-size: 14px;
        margin: 5px 0 0
    }

    .decision-tree-function .btn-group {
        margin-bottom: 20px
    }

        .decision-tree-function .btn-group .btn-cont {
            display: inline-block;
            float: left
        }

    .grey-button,
    .grey-button:active,
    .grey-button:focus,
    .grey-button:hover {
        font-size: 14px;
        padding-left: 8px;
        padding-right: 8px
    }

    .ash-level-cont .btn-cont .grey-button {
        margin-right: 20px
    }

    .ash-level-cont .btn-cont:last-child .grey-button {
        margin-right: 0
    }

    .decision-tree-function .decision-content-cont .btn-group .btn-cont label {
        padding-left: 20px;
        padding-right: 20px;
        margin-right: 20px
    }

    .performance .col-md-6 .subbrand-item,
    .performance .col-md-6:last-child .subbrand-item {
        margin-bottom: 30px
    }

    .start-over-btn {
        margin-bottom: 15px
    }

    .common-decision .btn-group {
        margin-bottom: 0
    }

    .common-decision {
        margin-bottom: 24px
    }

    .decision-tree-function .btn-group .btn-cont.fr-ashlebel-btn {
        display: table;
        float: left;
        margin-right: 15px
    }

        .decision-tree-function .btn-group .btn-cont.fr-ashlebel-btn:last-child {
            margin-right: 0
        }

    .btn-cont.fr-ashlebel-btn label.grey-button {
        width: 164px;
        height: 115px;
        display: table-cell;
        vertical-align: middle;
        padding-top: 0;
        padding-bottom: 0
    }

    .btn-cont.fr-ashlebel-btn .grey-button.active span {
        top: 108px
    }
}

@media (min-width:992px) {
    .decision-tree-function h2 {
        font-size: 30px;
        margin: 5px 0 0;
        letter-spacing: -1px
    }

    .decision-tree-function p {
        font-size: 15px
    }

    .decision-tree-function .btn-group .grey-button span {
        display: none
    }

    .btn.grey-button.active span {
        display: block;
        position: absolute;
        color: #d10f1f;
        top: 60px;
        font-size: 12px;
        width: 100%;
        left: 0
    }

    .decision-content-cont {
        margin-top: 36px
    }

    .level-of-ash {
        padding-top: 20px !important
    }

    .decision-tree-function .btn-group > .btn.grey-button {
        margin: 0 0 0 10px;
        padding: 15px 0;
        font-size: 15px;
        width: 22%
    }

    .ash-level-cont .btn-cont .grey-button {
        margin-right: 10px;
        overflow: visible;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 15px;
        font-weight: 700;
        font-family: verdana
    }

    .decision-tree-function .btn-group > .btn.grey-button span {
        font-size: 12px
    }

    .performance .subbrand .subbrand-item {
        padding: 25px
    }

    .performance .subbrand-item h3 {
        font-size: 20px
    }

    .performance .col-md-6 .subbrand-item {
        margin-bottom: 40px
    }

    .sentron-tree-cont {
        margin-top: -30px
    }

    .common-decision {
        margin-bottom: 30px
    }

    .decision-tree-function .performance h2 {
        margin-top: 30px
    }

    .btn-cont.fr-ashlebel-btn label.grey-button {
        font-size: 12px;
        width: 102px
    }

    .btn-cont.fr-ashlebel-btn .grey-button.active span {
        top: 127px
    }
}

@media (min-width:1200px) {
    .ash-level-cont .btn-cont .grey-button {
        margin-right: 18px
    }

    .ash-level-cont .btn-cont.fr-ashlebel-btn .grey-button {
        font-size: 15px
    }

    .btn-cont.fr-ashlebel-btn label.grey-button {
        width: 120px
    }
}

@media (max-width:767px) {

    .decision-tree,
    .sentron-tree-cont > .container,
    .sentron-tree-cont > .container > .row > .first-column {
        padding: 0;
        margin: 0
    }

    .decision-tree-function .btn-group {
        margin: 0 -10px;
        display: block
    }

    .decision-content-cont,
    .decision-tree-main-btn {
        padding: 0 20px
    }

    .decision-tree-main-btn {
        padding: 0 20px 20px
    }

    .performance h2 {
        padding: 0 20px
    }

    .decision-content-cont .common-decision:first-child p {
        margin: 0 0 20px
    }

    .decision-content-cont .common-decision,
    .decision-tree-function .btn-group .btn-cont:first-child,
    .decision-tree-function .btn-group .btn-cont:nth-child(2) {
        margin-bottom: 20px
    }

    .decision-tree-function .btn-group .btn-cont {
        width: 50%;
        float: left;
        padding-left: 10px;
        padding-right: 10px;
        display: table;
        min-height: 66px
    }

        .decision-tree-function .btn-group .btn-cont.fr-ashlebel-btn {
            min-height: 73px
        }

    .decision-tree-function .decision-content-cont .btn-group .btn-cont {
        min-height: 40px;
        margin-bottom: 0
    }

    .decision-tree-function .btn-group label {
        display: table-cell;
        vertical-align: middle;
        padding: 0
    }

    .subbrand-item .text-component {
        padding-bottom: 10px
    }

    .performance .subbrand .subbrand-item .image-component {
        width: 100%;
        display: block;
        text-align: center
    }

    .performance .subbrand-item {
        padding-left: 20px;
        padding-right: 20px
    }

    .start-over-btn {
        margin-left: 20px
    }

    .start-over-desc {
        padding: 0 20px
    }

    .decision-tree-function .common-decision .btn-group {
        width: 100%;
        display: table;
        margin: 0
    }

    .decision-tree-function .common-decision .btn-cont {
        display: table-cell;
        float: none
    }

        .decision-tree-function .common-decision .btn-cont:first-child {
            padding-left: 0
        }

        .decision-tree-function .common-decision .btn-cont:last-child {
            padding-right: 0
        }

        .decision-tree-function .common-decision .btn-cont label {
            display: block;
            vertical-align: middle;
            padding: 0;
            font-size: 14px;
            line-height: 40px
        }

    .performance .subbrand {
        margin: 0
    }

        .performance .subbrand .col-md-6 {
            padding: 0
        }

    .performance .subbrand-item .text-component {
        display: block;
        float: none;
        width: 100%
    }

        .performance .subbrand-item .text-component p {
            height: auto
        }
}

.sentron-hero-banner .herobanner-image {
    position: absolute;
    top: 0;
    height: inherit;
    left: 0;
    bottom: 0;
    width: 100%
}

    .sentron-hero-banner .herobanner-image img {
        width: inherit;
        max-width: inherit
    }

.sentron-hero-banner .herobanner-caption {
    width: 100%;
    background: 0 0;
    position: relative;
    top: 0 !important
}

.sentron-banner-left-cont {
    width: 100%;
    padding: 15px;
    background: rgba(255, 255, 255, .8)
}

.about-video-third-cont .herobanner-caption .sentron-banner-left-cont p {
    font-weight: 400;
    color: #000
}

.about-video-third-cont .herobanner-caption .sentron-banner-left-cont > p:first-child {
    padding-bottom: 0
}

.sentron-banner-right-cont {
    float: right;
    padding: 15px;
    background: #4d4d4d
}

    .sentron-banner-right-cont h3 {
        color: #fff;
        margin: 0;
        font-size: 18px;
        letter-spacing: -1px
    }

    .sentron-banner-right-cont .red-txt-button {
        color: #fff;
        margin-top: 10px
    }

        .sentron-banner-right-cont .red-txt-button:active,
        .sentron-banner-right-cont .red-txt-button:focus,
        .sentron-banner-right-cont .red-txt-button:hover {
            color: #d10f1f
        }

            .sentron-banner-right-cont .red-txt-button:hover:after,
            .sentron-banner-right-cont .red-txt-button:hover:before {
                background: #d10f1f !important
            }

            .sentron-banner-right-cont .red-txt-button:after,
            .sentron-banner-right-cont .red-txt-button:before,
            .sentron-banner-right-cont .red-txt-button:hover:after,
            .sentron-banner-right-cont .red-txt-button:hover:before {
                background: #fff
            }

@media (min-width:768px) {
    .sentron-hero-banner .herobanner-caption {
        padding: 40px 33px 0
    }

        .sentron-hero-banner .herobanner-caption .herobanner-heading {
            width: 65.5%
        }

    .sentron-banner-left-cont {
        width: 65%;
        float: left;
        padding: 30px 20px
    }

        .sentron-banner-left-cont p:last-child {
            padding-bottom: 0
        }

    .sentron-banner-detail {
        float: left;
        margin-top: 15px
    }

    .sentron-banner-right-cont {
        padding: 30px 20px;
        width: 30%
    }

    .sentron-hero-banner .hero-banner {
        padding-bottom: 40px
    }

    .sentron-banner-right-cont h3 {
        font-size: 20px
    }

    .about-video-third-cont .herobanner-caption .sentron-banner-left-cont p {
        font-size: 18px
    }
}

@media (min-width:992px) {
    .sentron-hero-banner .herobanner-caption {
        width: 100%;
        padding: 50px 50px 0;
        top: 0 !important
    }

    .lube-container.sentron-tree-cont p.start-over-desc {
        padding-top: 40px
    }

    .sentron-banner-detail {
        margin-top: 20px
    }

    .sentron-banner-left-cont,
    .sentron-banner-right-cont {
        padding: 30px 25px
    }

    .about-video-third-cont .herobanner-caption .sentron-banner-left-cont p {
        padding: 0 0 12px !important;
        line-height: 26px
    }

        .about-video-third-cont .herobanner-caption .sentron-banner-left-cont p:last-child {
            padding: 0 !important
        }

    .sentron-hero-banner .hero-banner {
        padding-bottom: 50px
    }

    .sentron-banner-right-cont h3 {
        font-size: 24px
    }

    .about-video-third-cont .herobanner-caption .sentron-banner-left-cont p {
        font-size: 20px
    }
}

@media (max-width:767px) {
    .sentron-hero-banner .herobanner-caption {
        padding: 0
    }

    .sentron-banner-right-cont {
        float: left;
        width: 100%;
        margin-top: 20px;
        margin-bottom: 25px;
        padding: 25px 20px
    }

    .sentron-hero-banner .hero-banner {
        width: auto;
        margin: 0 -20px
    }

    .sentron-hero-banner .herobanner-heading {
        padding: 25px 20px 15px
    }

    .sentron-banner-left-cont {
        padding: 15px 20px 0
    }

    .sentron-hero-banner .herobanner-image {
        min-height: 530px;
        overflow: hidden
    }

        .sentron-hero-banner .herobanner-image img {
            float: left;
            margin: 0;
            height: 100%;
            width: auto
        }

    .about-video-third-cont .herobanner-caption .sentron-banner-left-cont p {
        font-size: 16px
    }
}

@media (min-width:1366px) {
    .sentron-hero-banner .lube-breadcrumb {
        margin-left: -50px;
        margin-right: -50px
    }
}

.about-article-promo {
    padding: 0
}

    .about-article-promo .articles-promo-image img {
        width: 100%
    }

.articles-promo-text {
    background: #464646;
    padding: 15px;
    color: #fff
}

    .articles-promo-text h2 {
        margin: 0;
        font-size: 18px;
        padding-bottom: 15px;
        font-weight: 400
    }

    .articles-promo-text p {
        font-size: 12px;
        line-height: 16px
    }

.articles-right-text {
    background: #fff;
    padding: 15px 15px 45px;
    position: relative
}

    .articles-right-text h2 {
        margin: 0;
        font-size: 18px;
        padding-bottom: 10px;
        font-weight: 400
    }

    .articles-right-text p {
        font-size: 12px;
        margin-bottom: 0
    }

    .articles-right-text .black-txt-button {
        position: absolute;
        bottom: 20px
    }

a.about-article-promo-link {
    font-size: 12px;
    color: #000
}

.articles-promo-text h2,
.articles-promo-text p,
.articles-right-text h2,
.articles-right-text p {
    color: #fff !important
}

.articles-right-text h2,
.articles-right-text p {
    color: #000 !important
}

@media (min-width:768px) {
    .articles-promo-image {
        background: #464646
    }

    .articles-right-text {
        width: 100%;
        padding: 25px 20px 60px
    }

    .articles-promo-text {
        width: 50%;
        float: none;
        display: table-cell;
        vertical-align: middle;
        padding: 25px 25px 80px;
        position: relative;
        right: 50%
    }

        .articles-promo-text a.btn.red-button {
            position: absolute;
            bottom: 20px
        }

        .articles-promo-text p {
            margin-bottom: 0
        }

        .articles-promo-text h2,
        .articles-right-text h2 {
            font-size: 20px
        }

        .articles-promo-text a.btn.red-button,
        .articles-right-text .black-txt-button {
            bottom: 20px
        }

    .about-article-promo .hp-textImage-grid {
        height: 300px
    }

        .about-article-promo .hp-textImage-grid .image-component,
        .about-article-promo .hp-textImage-grid .text-component {
            width: 50% !important;
            height: 100% !important;
            float: none !important;
            position: absolute
        }

        .about-article-promo .hp-textImage-grid .text-component {
            right: 50%;
            left: 0;
            padding: 20px 25px 81px
        }

        .about-article-promo .hp-textImage-grid .image-component {
            left: 50%;
            top: 0
        }

            .about-article-promo .hp-textImage-grid .image-component img {
                height: 100%;
                width: auto
            }

    .about-article-promo .hp-text-grid {
        height: 300px
    }

        .about-article-promo .hp-text-grid .text-component p {
            height: 150px;
            overflow-y: hidden
        }

        .about-article-promo .hp-text-grid .text-component h3.title {
            height: 55px;
            overflow-y: hidden
        }
}

@media (min-width:992px) {
    .about-article-promo .articles-promo-image img {
        width: auto
    }

    .about-article-promo .hp-textImage-grid .text-component h3.title {
        font-size: 24px;
        line-height: 28px;
        max-height: 50px;
        overflow: hidden
    }

    .articles-right-text h2 {
        font-size: 24px
    }

    .lube-related-cat.more-about-section .hp-textImage-grid .text-component h3 {
        font-size: 20px
    }

    .articles-right-text {
        padding: 25px 25px 60px
    }

        .articles-promo-text a.btn.red-button,
        .articles-right-text .black-txt-button {
            bottom: 20px
        }

    .about-article-promo .col-md-12.col-lg-12 .hp-textImage-grid {
        height: 271px !important;
        min-height: 271px
    }

    .about-article-promo .col-sm-12 .hp-textImage-grid .text-component p {
        max-height: 137px;
        overflow: hidden
    }

    .about-article-promo .col-md-12.col-lg-12 .hp-textImage-grid .text-component p {
        max-height: 105px;
        overflow: hidden
    }
}

@media (min-width:768px) and (max-width:991px) {
    .about-article-promo .articles-right-text {
        margin-top: 20px
    }

    .articles-right-text {
        min-height: inherit !important
    }
}

@media (max-width:767px) {
    .about-article-promo .articles-promo-image {
        height: 245px;
        position: relative;
        overflow: hidden
    }

        .about-article-promo .articles-promo-image img {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%);
            width: 100%;
            margin-left: inherit
        }

    .about-article-promo .hp-textImage-grid {
        display: inline-block
    }

        .about-article-promo .hp-textImage-grid .image-component {
            height: 245px;
            width: 100%
        }

            .about-article-promo .hp-textImage-grid .image-component img {
                height: auto;
                width: auto
            }
}

@media (min-width:1200px) {
    .about-article-promo .hp-textImage-grid .text-component h3.title {
        max-height: 55px;
        letter-spacing: -1px
    }

    .about-article-promo .col-md-12.col-lg-12 .hp-textImage-grid .text-component p {
        max-height: 120px;
        overflow: hidden
    }

    .about-article-promo .col-md-12.col-lg-12 .hp-textImage-grid .image-component img {
        height: auto;
        width: 100%
    }
}

.white-button,
.white-button:active,
.white-button:focus,
.white-button:hover {
    background: #fff;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    border-radius: 0;
    box-shadow: none;
    white-space: initial;
    padding: 13px 0
}

    .white-button.active {
        box-shadow: none;
        background: #d10f1f;
        color: #fff
    }

.searchbox-filter {
    padding-top: 30px;
    padding-bottom: 30px
}

.searchbox-cont .form-group {
    background: #fff;
    position: relative;
    margin-bottom: 0
}

    .searchbox-cont .form-group .form-control {
        height: 50px;
        padding: 0 60px 0 20px;
        color: #000;
        font-size: 16px
    }

    .searchbox-cont .form-group input.form-control::-webkit-input-placeholder {
        font-size: 16px;
        font-weight: 400;
        color: #000
    }

    .searchbox-cont .form-group input.form-control::-moz-placeholder {
        font-size: 16px;
        font-weight: 400;
        color: #000
    }

    .searchbox-cont .form-group input.form-control:-ms-input-placeholder {
        font-size: 16px;
        font-weight: 400;
        color: #000
    }

    .searchbox-cont .form-group .form-control:focus {
        box-shadow: none
    }

    .searchbox-cont .form-group .search-icon {
        background: url(../images/icon-search.png) center no-repeat;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        cursor: pointer;
        padding: 25px 30px;
        border: 0
    }

        .searchbox-cont .form-group .search-icon:hover {
            background: url(../images/search-icon-open.png) center no-repeat
        }

.searchfilter-cont .label-chklist-title {
    display: table;
    padding-top: 15px;
    float: left
}

    .searchfilter-cont .label-chklist-title label {
        display: table-cell;
        vertical-align: middle;
        font-weight: 400;
        font-size: 14px
    }

.searchfilter-btngroup-cont.btn-group .btn-cont {
    display: inline-block;
    float: left
}

.searchfilter-btngroup-cont.btn-group label {
    position: relative;
    overflow: hidden
}

    .searchfilter-btngroup-cont.btn-group label input[type=checkbox] {
        position: absolute;
        top: -500px;
        left: 0
    }

@media (min-width:768px) {
    .searchfilter-cont .label-chklist-title label {
        font-size: 15px
    }

    .searchbox-filter {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .searchbox-cont .form-group .form-control {
        height: 55px;
        font-size: 18px
    }

    .searchbox-cont .form-group input.form-control::-webkit-input-placeholder {
        font-size: 18px
    }

    .searchbox-cont .form-group input.form-control::-moz-placeholder {
        font-size: 18px
    }

    .searchbox-cont .form-group input.form-control:-ms-input-placeholder {
        font-size: 18px
    }

    .remove-italic-style::-webkit-input-placeholder {
        font-style: normal !important;
        font-size: 20px !important
    }

    .remove-italic-style::-moz-placeholder {
        font-style: normal !important;
        font-size: 20px !important
    }

    .remove-italic-style:-ms-input-placeholder {
        font-style: normal !important;
        font-size: 20px !important
    }

    .searchfilter-cont {
        margin-top: 20px
    }

        .searchfilter-cont .label-chklist-title {
            margin-right: 20px
        }

    .searchfilter-btngroup-cont.btn-group .btn-cont label {
        padding-left: 20px;
        padding-right: 20px;
        margin-right: 20px;
        font-size: 14px
    }
}

@media (min-width:992px) {
    .searchbox-filter {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .searchfilter-btngroup-cont.btn-group .btn-cont label {
        font-size: 15px
    }

    .searchbox-cont .form-group .form-control {
        padding-left: 30px;
        height: 70px;
        font-size: 20px
    }
}

@media (max-width:767px) {
    .searchbox-cont .form-group {
        margin: 0 -20px
    }

    .searchfilter-btngroup-cont.btn-group .btn-group {
        margin: 0 -10px;
        display: block
    }

    .searchfilter-btngroup-cont.btn-group .btn-cont {
        float: left;
        display: table;
        min-height: 40px;
        margin-right: 20px;
        margin-top: 15px
    }

    .searchfilter-btngroup-cont.btn-group label {
        display: table-cell;
        vertical-align: middle;
        padding: 0 15px
    }

    .searchfilter-cont .label-chklist-title {
        width: 100%
    }
}

.search-result .lube-pagination {
    text-align: left;
    margin-top: 0
}

.lube-pagination .pagination {
    margin: 25px 0 0
}

.search-result .lube-pagination .pagination > li:first-child > a {
    padding-left: 0
}

.search-item-cont {
    display: block
}

.search-item {
    background: #f3f3f3;
    padding: 15px;
    min-height: 225px;
    margin-bottom: 20px;
    float: left;
    width: 100%
}

    .search-item .search-item-header {
        width: 100%;
        float: left;
        margin-bottom: 12px;
        min-height: 60px
    }

        .search-item .search-item-header span {
            float: left;
            margin-right: 10px
        }

        .search-item .search-item-header h2,
        .search-item .search-item-header h2 a {
            font-size: 18px;
            margin: 0;
            color: #000;
            float: left;
            text-decoration: none;
            font-weight: 400
        }

            .search-item .search-item-header h2 a:hover,
            .search-item .text-component p a:hover,
            .search-rightsidebar-cont .sidebar-info h3 a:hover,
            .search-rightsidebar-cont .sidebar-info p a:hover,
            .search-rightsidebar-cont a.red-txt-button:hover {
                color: #d10f1f
            }

    .search-item .search-item-subheader {
        width: 100%;
        float: left;
        margin-bottom: 10px
    }

        .search-item .search-item-subheader h3,
        .search-item .search-item-subheader h3 a {
            font-size: 12px;
            font-weight: 700;
            margin: 2px 10px 0 0;
            float: left;
            color: #000;
            text-decoration: none
        }

    .search-item .text-component {
        float: left
    }

        .search-item .text-component p,
        .search-item .text-component p a {
            margin: 0;
            color: #000;
            text-decoration: none;
            font-weight: 400
        }

        .search-item .text-component ul {
            display: none
        }

    .search-item:last-child {
        margin-bottom: 0
    }

ul.pagination.resource-item-pagination {
    margin-top: 25px
}

.resource-center-filter-main ul.pagination.resource-item-pagination {
    margin-top: 0
}

@media (min-width:768px) {
    .search-item {
        padding: 25px 20px;
        min-height: 195px;
        margin-bottom: 30px
    }

        .search-item .search-item-header {
            min-height: 45px
        }

            .search-item .search-item-header h2,
            .search-item .search-item-header h2 a {
                font-size: 20px
            }

        .search-item .text-component p {
            margin-bottom: 10px
        }

        .search-item .text-component ul {
            display: block;
            list-style: none;
            padding-left: 0;
            margin-top: 0;
            margin-bottom: 0;
            float: left;
            width: 100%
        }

            .search-item .text-component ul li {
                display: block;
                float: left;
                font-size: 14px;
                padding: 0 10px;
                position: relative;
                color: #464646
            }

                .search-item .text-component ul li:after {
                    content: "";
                    position: absolute;
                    height: 10px;
                    top: 5px;
                    width: 2px;
                    background: #464646;
                    right: 0
                }

                .search-item .text-component ul li:last-child:after {
                    content: none
                }

                .search-item .text-component ul li:first-child {
                    padding-left: 0
                }

                .search-item .text-component ul li:last-child {
                    padding-right: 0
                }

    .lube-pagination .pagination {
        margin-top: 25px
    }
}

@media (min-width:992px) {
    .search-item {
        padding: 25px;
        min-height: 215px;
        margin-bottom: 40px
    }

        .search-item .search-item-header {
            min-height: 50px
        }

            .search-item .search-item-header h2,
            .search-item .search-item-header h2 a {
                font-size: 24px
            }

        .search-item .text-component p {
            margin-bottom: 20px
        }

    .lube-pagination .pagination {
        margin-top: 55px
    }

    .search-item .text-component ul li {
        font-size: 15px
    }
}

@media (max-width:767px) {
    .search-rightsidebar-cont {
        margin: 25px -20px 0
    }

    .search-item .search-item-header h2 {
        margin-top: 5px
    }
}

@media (min-width:768px) and (max-width:991px) {
    .search-rightsidebar-cont {
        margin-top: 40px
    }
}

.search-rightsidebar-cont {
    background: #464646;
    color: #fff;
    padding: 25px 20px;
    float: left
}

    .search-rightsidebar-cont a.red-txt-button {
        color: #fff;
        padding: 0 15px 0 0
    }

        .search-rightsidebar-cont a.red-txt-button b {
            padding-left: 0
        }

    .search-rightsidebar-cont .black-txt-button:after,
    .search-rightsidebar-cont .black-txt-button:before,
    .search-rightsidebar-cont .red-txt-button:after,
    .search-rightsidebar-cont .red-txt-button:before {
        background: #fff;
        width: 1px
    }

    .search-rightsidebar-cont .black-txt-button:hover:after,
    .search-rightsidebar-cont .black-txt-button:hover:before,
    .search-rightsidebar-cont .red-txt-button:hover:after,
    .search-rightsidebar-cont .red-txt-button:hover:before {
        background: #d10f1f
    }

    .search-rightsidebar-cont .black-txt-button:after,
    .search-rightsidebar-cont .red-txt-button:after {
        bottom: 3px
    }

    .search-rightsidebar-cont .black-txt-button:before,
    .search-rightsidebar-cont .red-txt-button:before {
        bottom: 8px
    }

    .search-rightsidebar-cont .search-sidebar-header {
        margin-bottom: 23px
    }

        .search-rightsidebar-cont .search-sidebar-header span {
            float: left;
            margin-right: 10px
        }

        .search-rightsidebar-cont .search-sidebar-header h2,
        .search-rightsidebar-cont .search-sidebar-header h2 a {
            color: #fff;
            font-size: 18px;
            margin: 0;
            font-weight: 400
        }

    .search-rightsidebar-cont .sidebar-info {
        display: block;
        float: left;
        padding-bottom: 20px;
        margin-bottom: 20px;
        position: relative
    }

        .search-rightsidebar-cont .sidebar-info:after {
            content: '';
            position: absolute;
            bottom: 0;
            width: 100%;
            left: 0;
            height: 2px;
            background: #fff
        }

        .search-rightsidebar-cont .sidebar-info h3,
        .search-rightsidebar-cont .sidebar-info h3 a {
            font-size: 16px;
            margin-top: 0;
            margin-bottom: 10px;
            color: #fff;
            text-decoration: none;
            font-weight: 400
        }

        .search-rightsidebar-cont .sidebar-info p a {
            color: #fff;
            text-decoration: none
        }

        .search-rightsidebar-cont .sidebar-info:last-child {
            padding-bottom: 0;
            margin-bottom: 0
        }

            .search-rightsidebar-cont .sidebar-info:last-child:after {
                content: none
            }

@media (min-width:768px) {

    .search-rightsidebar-cont .search-sidebar-header h2,
    .search-rightsidebar-cont .search-sidebar-header h2 a {
        font-size: 20px
    }

    .search-rightsidebar-cont .sidebar-info h3,
    .search-rightsidebar-cont .sidebar-info h3 a {
        font-size: 18px
    }

    .search-rightsidebar-cont {
        padding: 30px 20px
    }
}

@media (min-width:992px) {
    .search-rightsidebar-cont .search-sidebar-header h2 {
        font-size: 24px
    }

    .search-rightsidebar-cont .sidebar-info h3,
    .search-rightsidebar-cont .sidebar-info h3 a {
        font-size: 20px
    }

    .search-rightsidebar-cont {
        padding: 30px 25px
    }
}

.duran-range-cont {
    position: relative;
    float: left
}

    .duran-range-cont .range-image-cont {
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center
    }

        .duran-range-cont .range-image-cont img {
            width: inherit;
            max-width: inherit
        }

    .currency-measurement-cont,
    .duran-range-cont ul,
    .duroncalc-inner-cont,
    .measurement-cont,
    .unit-level-cont {
        float: left;
        width: 100%
    }

    .duran-range-cont .range-text-cont {
        padding: 20px;
        position: relative;
        z-index: 1;
        width: 100%;
        float: left
    }

.currency-measurement-cont .first-column,
.currency-measurement-cont .second-column {
    float: left
}

.duran-range-cont .lube-title h2 {
    color: #000 !important
}

.calculator-info {
    background: #fff;
    padding: 15px;
    margin-bottom: 25px
}

    .calculator-info p {
        font-size: 14px;
        font-weight: 400
    }

.unit-level-cont {
    margin-top: 10px
}

    .unit-level-cont label {
        float: left;
        margin-right: 9px
    }

    .unit-level-cont btn-cont:last-child {
        margin-right: 0
    }

.calculator-cont {
    background: rgba(255, 255, 255, .7);
    padding: 15px
}

.duran-range-cont label {
    font-weight: 700;
    margin-bottom: 0;
    font-size: 14px
}

.minus,
.plus {
    cursor: pointer
}

.duran-range-cont ul {
    padding: 0;
    margin-bottom: 0
}

    .duran-range-cont ul.duron-calculator-slider li {
        list-style: none;
        margin: 0 0 10px
    }

.range-cont {
    margin-top: 10px
}

div.ui-slider {
    height: 48px;
    margin: 0;
    padding: 0;
    position: relative;
    -ms-touch-action: pan-y pinch-zoom double-tap-zoom
}

.calculator-cont input.ui-slider-input {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    line-height: 20px;
    background: #fff;
    border: 0;
    padding: 10px 5px;
    float: right;
    text-align: center;
    width: 90px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1
}

.calculator-cont .ui-slider-input::-webkit-inner-spin-button,
.calculator-cont .ui-slider-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.calculator-cont .ui-slider-track {
    position: relative;
    overflow: visible;
    height: 4px;
    margin: 20px 22px;
    background: #fff;
    border: 0
}

    .calculator-cont .ui-slider-track:after,
    .calculator-cont .ui-slider-track:before {
        width: 22px;
        height: 4px;
        background: #fff;
        content: '';
        display: block;
        position: absolute;
        z-index: 0
    }

    .calculator-cont .ui-slider-track:after {
        right: -12px;
        border-radius: 0 8px 8px 0
    }

    .calculator-cont .ui-slider-track:before {
        left: -13px;
        border-radius: 8px 0 0 8px
    }

    .calculator-cont .ui-slider-track.ui-shadow-inset.ui-bar-inherit.ui-corner-all a {
        position: absolute;
        width: 45px;
        height: 45px;
        background: #d10f1f;
        margin: -21px 0 0 -23px;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        z-index: 1
    }

.calculator-cont .ui-loader.ui-corner-all.ui-body-a.ui-loader-default {
    display: none !important
}

.range-cont .ui-slider .minus,
.range-cont .ui-slider .plus {
    display: block;
    float: left;
    width: 19px;
    height: 19px
}

.range-cont .ui-slider .minus {
    position: absolute;
    top: 14px;
    left: 0
}

.range-cont .ui-slider .plus {
    position: absolute;
    top: 14px;
    right: 155px
}

.calc-slider-cont {
    width: 100%;
    display: block;
    float: left;
    padding-right: 190px;
    padding-left: 30px;
    position: relative
}

.range-cont .ui-slider .minus:after,
.range-cont .ui-slider .plus:after,
.range-cont .ui-slider .plus:before {
    content: '';
    height: 3px;
    width: 100%;
    background: #6c6c6c;
    border-radius: 3px;
    display: block;
    margin-top: 9px
}

.range-cont .ui-slider .minus:hover:after,
.range-cont .ui-slider .plus:hover:after,
.range-cont .ui-slider .plus:hover:before {
    background: #d10f1f
}

.range-cont .ui-slider .plus:after {
    transform: rotate(180deg);
    margin-top: -3px
}

.range-cont .ui-slider .plus:before {
    transform: rotate(90deg)
}

.calc-button-cont {
    padding-top: 20px;
    padding-bottom: 15px
}

.currency-measurement li {
    display: block;
    float: left;
    width: auto !important;
    position: relative;
    margin-right: 10px
}

    .currency-measurement li:last-child {
        margin-right: 0
    }

    .currency-measurement li label {
        position: relative;
        padding: 10px;
        font-size: 15px;
        margin-bottom: 0;
        cursor: pointer;
        font-weight: 700;
        min-width: 40px;
        height: 40px;
        background: #fff;
        text-align: center
    }

.currency-measurement {
    margin-top: 10px
}

    .currency-measurement li label.ui-radio-on {
        background: #d10f1f !important;
        color: #fff
    }

    .currency-measurement li .ui-radio input[type=radio] {
        position: absolute;
        visibility: hidden
    }

.ui-loader.ui-corner-all.ui-body-a.ui-loader-default {
    display: none
}

.duroncalc-desc {
    padding-top: 25px;
    padding-bottom: 30px;
    float: left
}

    .duroncalc-desc h5 {
        font-size: 12px;
        font-weight: 700;
        margin-top: 0;
        margin-bottom: 0
    }

    .duroncalc-desc p {
        font-size: 12px;
        font-weight: 400;
        margin-bottom: 0;
        margin-top: 10px
    }

.duron-calculator-slider sup {
    top: -3px
}

.duron-calc-wrap {
    margin-bottom: 15px
}

sup {
    font-size: 75%;
    top: -.5em
}

@media (min-width:768px) {
    .currency-measurement-cont .first-column {
        margin-right: 95px
    }

    .calculator-cont input.ui-slider-input {
        padding: 14px 5px
    }

    .calculator-cont .ui-slider-track,
    .calculator-cont .ui-slider-track:after,
    .calculator-cont .ui-slider-track:before {
        height: 8px
    }

        .calculator-cont .ui-slider-track:after {
            right: -20px
        }

        .calculator-cont .ui-slider-track:before {
            left: -22px
        }

    .currency-measurement .ui-radio label,
    .currency-measurement label:hover {
        font-size: 15px
    }

    .currency-measurement {
        margin-top: 20px
    }

        .currency-measurement li label {
            min-width: 47px;
            height: 47px;
            padding: 12px 10px
        }

    .duran-range-cont ul.duron-calculator-slider li {
        margin: 0 0 38px
    }

    .calculator-info {
        margin-bottom: 25px
    }

    .ui-slider-track.ui-shadow-inset.ui-bar-inherit.ui-corner-all a {
        width: 45px;
        height: 45px;
        margin: -20px 0 0 -25px
    }

    .currency-measurement li,
    .unit-level-cont label {
        margin-right: 15px
    }

    .duran-range-cont ul.duron-calculator-slider {
        padding-left: 30px;
        padding-top: 50px;
        margin-bottom: 25px
    }

    .unit-level-cont {
        margin-top: 20px
    }

    .duron-calc-wrap {
        margin-bottom: 25px
    }
}

@media (min-width:992px) {
    .duran-range-cont .range-text-cont {
        padding: 25px
    }

        .duran-range-cont .range-text-cont label.grey-button,
        .duran-range-cont .range-text-cont label.grey-button:active,
        .duran-range-cont .range-text-cont label.grey-button:focus,
        .duran-range-cont .range-text-cont label.grey-button:hover {
            padding: 10px 16px !important
        }

    .range-text-cont .lube-title {
        margin-bottom: 30px
    }

    .duran-range-cont .lube-title h2 {
        font-size: 36px
    }

    .calc-button-cont {
        padding-top: 35px;
        padding-bottom: 30px;
        padding-left: 25px
    }

    .calculator-info {
        padding: 30px 25px;
        width: 100%;
        float: left
    }

        .calculator-info p {
            font-size: 20px
        }

    .calculator-cont {
        padding: 25px 100px 25px 20px;
        width: 100%;
        float: left
    }

    .duran-range-cont label {
        font-size: 18px
    }

    .calculator-cont input.ui-slider-input {
        font-size: 16px
    }

    .currency-measurement li {
        margin-right: 20px
    }

        .currency-measurement li label {
            padding: 12px 15px
        }

    .duroncalc-desc {
        padding-top: 25px
    }

    .duron-calc-wrap {
        margin-bottom: 60px
    }
}

@media (max-width:767px) {

    .currency-measurement-cont .first-column,
    .currency-measurement-cont .second-column {
        width: 100%
    }

    .calculator-cont .ui-slider-track.ui-shadow-inset.ui-bar-inherit.ui-corner-all a {
        width: 25px;
        height: 25px;
        margin: -11px 0 0 -13px
    }

    .duran-range-cont ul {
        float: left
    }

        .duran-range-cont ul.duron-calculator-slider li {
            float: left;
            width: 100%;
            margin-bottom: 30px
        }

    .range-cont {
        margin-top: 0
    }

    .duran-range-cont .range-text-cont label.grey-button,
    .duran-range-cont .range-text-cont label.grey-button:active,
    .duran-range-cont .range-text-cont label.grey-button:focus,
    .duran-range-cont .range-text-cont label.grey-button:hover {
        padding: 10px 16px !important;
        font-size: 14px
    }

    .measurement-cont {
        margin-top: 20px;
        margin-bottom: 20px
    }

    .duran-range-cont {
        margin: 0 -20px
    }

    .calculator-cont input.ui-slider-input {
        position: static;
        float: left;
        width: 100%;
        padding: 5px;
        margin-top: 10px
    }

    .calculator-cont .ui-slider-track {
        margin: 15px 22px
    }

    .calc-slider-cont {
        padding-right: 15px;
        padding-left: 15px
    }

    .range-cont .ui-slider .minus:after,
    .range-cont .ui-slider .plus:before {
        margin-top: 2px
    }

    .range-cont .ui-slider .minus,
    .range-cont .ui-slider .plus {
        width: 15px;
        height: 15px
    }

    .range-cont .ui-slider .plus {
        right: 0
    }
}

@media (min-width:1366px) {
    .invividual-result:after {
        margin-left: 25px;
        margin-right: 25px
    }
}

@media only screen and (min-width:767px) and (max-width:991px) {
    .duron-calc-wrap > .container {
        width: inherit;
        margin-left: -15px;
        margin-right: -15px
    }

    .calculator-op-cont > .container,
    .duron-chart-cont > .container {
        width: inherit;
        margin-left: 0;
        margin-right: 0
    }

    .duroncalc-desc {
        padding-left: 20px;
        padding-right: 20px
    }

    .duron-chart-cont .duroncalc-desc {
        padding-left: 0;
        padding-right: 0
    }
}

op-prod-img-2 img {
    float: left
}

.button-group-cont {
    display: block;
    position: absolute;
    top: 0;
    right: 0
}

    .button-group-cont ul {
        list-style: none;
        padding-left: 0
    }

        .button-group-cont ul li {
            margin-right: 20px;
            height: 40px;
            display: table;
            float: left
        }

            .button-group-cont ul li button {
                font-weight: 700;
                font-size: 12px;
                color: #000;
                text-decoration: none;
                display: table-cell;
                vertical-align: middle;
                background: 0 0;
                border: 0
            }

                .button-group-cont ul li button:hover {
                    color: #d10f1f
                }

span.ico-mail-print {
    margin-right: 3px
}

.button-group-cont ul li:first-child span.ico-mail-print img {
    width: 23px;
    height: 17px
}

.button-group-cont ul li:last-child span.ico-mail-print img {
    width: 25px;
    height: 23px
}

.invividual-result h1 {
    font-weight: 700;
    margin-top: 10px;
    font-size: 24px
}

.result-op .estimated-cost,
.result-op .pump-icon {
    float: left;
    display: block
}

    .result-op .estimated-cost h1.fuel-percentage {
        margin-bottom: 10px;
        color: #007a33
    }

.result-op {
    display: block;
    float: left
}

.op-prod-img {
    float: left
}

    .op-prod-img img {
        padding-top: 0;
        max-width: 125px
    }

h1.saving-cost {
    margin-top: 10px
}

.invividual-result {
    padding-bottom: 25px;
    margin-bottom: 25px
}

    .invividual-result:after {
        width: auto;
        display: block;
        height: 3px;
        background: #7F7F7F;
        position: relative;
        bottom: -25px;
        margin-left: 20px;
        margin-right: 20px;
        content: ''
    }

    .invividual-result:last-child {
        margin-bottom: 0
    }

        .invividual-result:last-child:after {
            content: none
        }

.result-title .red-txt-button b {
    padding-left: 0
}

@media (min-width:768px) {
    .calc-result-title {
        padding-right: 350px
    }

    .pump-icon {
        margin-right: 20px
    }

    .invividual-result h1 {
        font-size: 24px
    }

    .op-prod-img {
        float: right
    }

    .result-op {
        float: left
    }

    .op-prod-img img {
        padding-top: 25px;
        max-width: 75px
    }

    .result-op .estimated-cost h1.fuel-percentage {
        font-size: 30px;
        margin-top: 15px
    }

    .row-single-icon img {
        max-width: 40px;
        margin-left: 20px;
        padding-bottom: 5px
    }

    .row-double-icon img {
        max-width: 40px;
        margin-left: 0;
        padding-bottom: 5px
    }
}

@media (min-width:992px) {
    .row-single-icon img {
        max-width: 70px;
        margin-left: 35px;
        padding-bottom: 5px
    }

    .row-double-icon img {
        max-width: 70px;
        margin-left: 0;
        padding-bottom: 5px
    }

    .estimated-cost,
    .pump-icon {
        margin-right: 30px
    }

    .invividual-result {
        padding-bottom: 45px;
        margin-bottom: 45px
    }

        .invividual-result h1 {
            font-size: 40px
        }

    .result-title .red-txt-button {
        padding: 0 20px 0 0
    }

    .op-prod-img img {
        padding-top: 0;
        max-width: 200px
    }

    .result-op .estimated-cost h1.fuel-percentage {
        font-size: 50px;
        margin-top: 5px
    }

    .invividual-result:after {
        bottom: -40px;
        margin-left: 17px;
        margin-right: 17px
    }
}

@media (max-width:767px) {

    .invividual-result,
    .result-op,
    .result-title {
        margin-bottom: 15px
    }

    .invividual-result {
        padding-bottom: 10px;
        padding-top: 10px
    }

    .pump-icon {
        max-width: 75px;
        margin-right: 25px
    }

    .op-prod-img {
        float: left;
        width: 100%;
        display: block
    }

    .calc-result-title {
        margin-top: 30px
    }

    .printEmail-cont {
        display: block;
        top: -35px;
        right: -4px
    }

        .printEmail-cont ul li:last-child {
            display: none
        }

    .row-single-icon img {
        max-width: 20px;
        margin-left: 10px
    }

    .row-double-icon img {
        max-width: 20px;
        margin-left: 0
    }

    .estimated-cost {
        margin-right: 30px
    }
}

@media only screen and (min-width:767px) and (max-width:991px) {
    .pump-icon {
        max-width: 95px
    }

    .about-video-third-cont .herobanner-caption .sentron-banner-left-cont > p:first-child {
        padding-bottom: 15px
    }

    .printEmail-cont ul li {
        margin-right: 10px
    }

        .printEmail-cont ul li:last-child {
            display: none
        }
}

@media (min-width:1366px) {
    .invividual-result:after {
        bottom: -40px;
        margin-left: 25px;
        margin-right: 25px
    }
}

.bar-chart-container .duron-chart {
    width: auto;
    height: 300px
}

    .bar-chart-container .duron-chart .jqplot-target {
        font-size: 10px
    }

    .bar-chart-container .duron-chart .jqplot-title {
        top: 0;
        left: 0;
        padding-bottom: 20px;
        font-size: 20px
    }

.bar-chart-container .jqplot-axis .jqplot-yaxis-tick {
    font-size: 10px;
    right: 0
}

.bar-chart-container .jqplot-axis .jqplot-xaxis-tick {
    font-size: 10px;
    width: 18%;
    font-weight: 700;
    white-space: pre-wrap;
    text-align: center;
    margin-top: 10px
}

.bar-chart-container .jqplot-axis.jqplot-yaxis {
    margin-right: 10px
}

canvas.jqplot-series-canvas {
    border: 1px solid #fff;
    box-shadow: -2px 5px 5px 5px #fff
}

.bar-chart-container .jqplot-yaxis .jqplot-yaxis-tick:first-child {
    margin-top: -6px
}

.bar-chart-container .jqplot-yaxis .jqplot-yaxis-tick:last-child {
    margin-top: 5px
}

@media (min-width:768px) {
    .bar-chart-container .duron-chart {
        max-width: 850px;
        height: 540px;
        margin: 0 auto
    }

        .bar-chart-container .duron-chart .jqplot-title {
            padding-bottom: 15px;
            font-size: 29px
        }

            .bar-chart-container .duron-chart .jqplot-title sup {
                font-size: 18px
            }

    .bar-chart-container .jqplot-axis .jqplot-yaxis-tick {
        font-size: 19px
    }

    .bar-chart-container .jqplot-axis .jqplot-xaxis-tick {
        font-size: 17px;
        width: 18%;
        margin-top: 17px
    }

    .bar-chart-container .jqplot-yaxis .jqplot-yaxis-tick:first-child {
        margin-top: -14px !important
    }

    .bar-chart-container .jqplot-yaxis .jqplot-yaxis-tick:last-child {
        margin-top: 14px !important
    }
}

@media (min-width:992px) {
    .bar-chart-container {
        margin-top: 5px;
        margin-bottom: 40px
    }
}

@media (max-width:991px) {
    .bar-chart-container {
        padding-left: 0;
        padding-right: 0
    }

        .bar-chart-container .jqplot-axis .jqplot-xaxis-tick {
            font-size: 8px
        }
}

@media only screen and (min-width:767px) and (max-width:991px) {
    .pump-icon {
        max-width: 95px
    }
}

.duroncalc-disclaimer {
    padding-top: 200px
}

@media (min-width:1366px) {
    .calculator-main {
        margin-left: -50px;
        margin-right: -50px
    }
}

@media (max-width:440px) {
    .nav-tabs.contact-tabs > li > a {
        margin-right: 0;
        padding: 0 10px;
        border: none;
        border-radius: 0;
        font-family: verdana;
        font-weight: 700;
        font-size: 8px;
        color: #000;
        height: 45px;
        line-height: 45px;
        text-align: center;
        position: relative
    }

    .nav-tabs.contact-tabs {
        border-bottom: 2px solid #000;
        margin-bottom: 20px !important;
        display: inline-block
    }
}

@media (min-width:441px) {
    .nav-tabs.contact-tabs > li > a {
        margin-right: 0;
        padding: 0 15px;
        border: none;
        border-radius: 0;
        font-family: verdana;
        font-weight: 700;
        font-size: 8px;
        color: #000;
        height: 45px;
        line-height: 45px;
        text-align: center;
        position: relative
    }

    .nav-tabs.contact-tabs {
        border-bottom: 2px solid #000;
        margin-bottom: 20px !important;
        display: inline-block
    }
}

@media (min-width:767px) {
    .nav-tabs.contact-tabs > li > a {
        margin-right: 0;
        padding: 0 15px;
        border: none;
        border-radius: 0;
        font-family: verdana;
        font-weight: 700;
        font-size: 11px;
        color: #000;
        height: 45px;
        line-height: 45px;
        text-align: center;
        position: relative
    }

    .nav-tabs.contact-tabs {
        border-bottom: 2px solid #000;
        margin-bottom: 30px !important;
        display: inline-block
    }
}

@media (min-width:992px) {
    .nav-tabs.contact-tabs > li > a {
        margin-right: 0;
        padding: 0 30px;
        border: none;
        border-radius: 0;
        font-family: verdana;
        font-weight: 700;
        font-size: 18px;
        color: #000;
        height: 45px;
        line-height: 45px;
        text-align: center;
        position: relative
    }

    .nav-tabs.contact-tabs {
        border-bottom: 2px solid #000;
        margin-bottom: 60px !important;
        display: inline-block
    }
}

.nav-tabs.contact-tabs > li > a:focus,
.nav-tabs.contact-tabs > li > a:hover {
    background: 0 0
}

.nav-tabs.contact-tabs > li.active > a,
.nav-tabs.contact-tabs > li.active > a:focus,
.nav-tabs.contact-tabs > li.active > a:hover {
    color: #fff;
    background-color: #000;
    border: none
}

.nav-tabs.contact-tabs > li > a:after {
    content: "";
    width: 2px;
    height: 10px;
    background-color: #000;
    position: absolute;
    right: -2px;
    bottom: 0;
    z-index: -2
}

.nav-tabs.contact-tabs > li:last-child > a:after {
    display: none
}

.nav-tabs.contact-tabs > li.active:last-child > a:after,
.nav-tabs.contact-tabs > li > a:hover:after {
    display: block
}

.nav-tabs.contact-tabs > li:last-child > a:hover:after {
    content: none
}

.nav-tabs.contact-tabs > li.active > a:after {
    content: "";
    width: 2px;
    height: 10px;
    background-color: #fff;
    position: absolute;
    left: -2px;
    bottom: 1px;
    z-index: -1
}

.panel-default > .panel-heading {
    color: #fff;
    background-color: #000;
    border: none;
    border-radius: 0;
    padding: 0
}

i.indicator.glyphicon.glyphicon-chevron-up.pull-right {
    color: #fff
}

@media (min-width:992px) {
    .nav-tabs.contact-tabs > li > a {
        padding: 0 10px;
        font-weight: 400
    }

    .nav-tabs.contact-tabs > li.active > a {
        font-weight: 700;
        font-size: 20px
    }
}

@media (min-width:1200px) {
    .nav-tabs.contact-tabs > li > a {
        padding: 0 25px
    }
}

@media (min-width:1366px) {
    .nav-tabs.contact-tabs > li > a {
        padding: 0 35px
    }
}

@media (max-width:991px) {
    .contact-tab-cont .panel-group .panel {
        border: none;
        box-shadow: none;
        margin-bottom: 15px;
        margin-top: 0
    }

        .contact-tab-cont .panel-group .panel + .panel:last-child {
            margin-bottom: 25px
        }

    .contact-tab-cont a.js-tabcollapse-panel-heading.collapsed {
        background: #000
    }

        .contact-tab-cont a.js-tabcollapse-panel-heading.collapsed:before {
            right: 32px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg)
        }

        .contact-tab-cont a.js-tabcollapse-panel-heading.collapsed:after,
        .contact-tab-cont a.js-tabcollapse-panel-heading.collapsed:before {
            content: "";
            background: #fff;
            -webkit-border-radius: .2em;
            border-radius: .2em;
            display: block;
            height: 13px;
            position: absolute;
            top: 15px;
            width: 2px;
            z-index: 2
        }

        .contact-tab-cont a.js-tabcollapse-panel-heading.collapsed:after {
            right: 24px;
            -webkit-transform: rotate(45deg);
            transform: rotate(-45deg)
        }

    .contact-tab-cont a.js-tabcollapse-panel-body {
        background-color: #d10f1f
    }

    .contact-tab-cont a.js-tabcollapse-panel-heading:before {
        right: 32px;
        -webkit-transform: rotate(45deg);
        transform: rotate(-45deg)
    }

    .contact-tab-cont a.js-tabcollapse-panel-heading:after {
        right: 24px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(0)
    }

    .contact-tab-cont .panel-body {
        padding: 45px 0 0
    }
}

@media (max-width:767px) {
    .contact-tab-cont .panel-group .panel + .panel:last-child {
        margin-bottom: 10px
    }

    .contact-tab-cont .panel-body {
        padding: 25px 0 0
    }
}

.contact-sidebar .sidebar-block {
    margin: 0 0 20px;
    padding: 20px 15px
}

.contact-looking-for h3 {
    margin: 0;
    padding-bottom: 15px;
    font-family: Verdana;
    font-weight: 400;
    font-size: 20px;
    background: url(../images/bothside-arrow-white.png) left 5px no-repeat;
    padding-left: 30px
}

.contact-find-us h3,
.contact-prefer-call h3,
.contact-privacy h3 {
    padding-left: 30px;
    padding-bottom: 20px
}

.contact-looking-for a {
    color: #fff;
    margin: 15px 0;
    white-space: inherit;
    text-align: left
}

    .contact-looking-for a.black-txt-button span:last-child {
        width: 14px;
        height: 10px;
        display: inline-block;
        position: relative;
        top: 50%;
        margin-top: -5px
    }

    .contact-looking-for a.black-txt-button:after,
    .contact-looking-for a.black-txt-button:before {
        display: none
    }

    .contact-looking-for a.black-txt-button span:last-child:after,
    .contact-looking-for a.black-txt-button span:last-child:before {
        content: "";
        background: #fff;
        -webkit-border-radius: .2em;
        border-radius: .2em;
        display: block;
        height: 7px;
        position: absolute;
        right: 2px;
        width: 1px
    }

    .contact-looking-for a.black-txt-button span:last-child:before {
        -webkit-transform: rotate(-40deg);
        transform: rotate(-40deg);
        bottom: 3px
    }

    .contact-looking-for a.black-txt-button span:last-child:after {
        -webkit-transform: rotate(40deg);
        transform: rotate(40deg);
        bottom: -2px
    }

    .contact-looking-for a.black-txt-button:hover span:last-child:after,
    .contact-looking-for a.black-txt-button:hover span:last-child:before {
        background: #d10f1f !important
    }

    .contact-looking-for a.btn.black-txt-button {
        width: 100%
    }

        .contact-looking-for a.btn.black-txt-button.last-item {
            margin-bottom: 0
        }

.contact-find-us a,
.contact-looking-for a,
.contact-prefer-call a,
.contact-privacy a {
    position: relative;
    font-size: 12px;
    font-family: Verdana;
    font-weight: 400
}

.contact-find-us h3,
.contact-prefer-call h3,
.contact-privacy h3,
.contact-right-grid-experts h3 {
    font-size: 20px;
    font-family: Verdana;
    font-weight: 400
}

.contact-looking-for a.black-txt-button:after,
.contact-looking-for a.black-txt-button:before {
    background: #fff
}

.contact-prefer-call h3 {
    margin: 0;
    background: url(../images/phone-contact.png) left 0 no-repeat
}

.contact-find-us h3 {
    background: url(../images/location-contact.png) left 0 no-repeat;
    margin: 0
}

.contact-privacy h3 {
    background: url(../images/privacy-contact.png) left 0 no-repeat;
    margin: 0;
    line-height: 1.5
}

.contact-right-grid-experts {
    padding: 30px 20px 25px
}

    .contact-right-grid-experts h3 {
        margin: 0;
        padding-bottom: 20px
    }

.contact-online-order {
    margin: 0 0 20px;
    padding: 25px 20px 20px
}

.contact-ibuy-advantage {
    padding: 30px 20px 25px;
    margin: 0 0 20px
}

    .contact-ibuy-advantage h3,
    .contact-online-order h3 {
        margin: 0;
        font-family: Verdana;
        font-weight: 400;
        font-size: 20px;
        padding-bottom: 20px
    }

.contact-online-order a.btn.black-txt-button {
    color: #fff
}

    .contact-online-order a.btn.black-txt-button:after,
    .contact-online-order a.btn.black-txt-button:before {
        background: #fff
    }

.contact-right-grid-experts p {
    font-size: 12px;
    font-family: Verdana;
    font-weight: 400;
    padding-top: 21px
}

.contact-ibuy-advantage ul {
    margin: 0;
    padding: 0 0 0 15px;
    list-style: none
}

    .contact-ibuy-advantage ul li {
        position: relative;
        margin-bottom: 10px
    }

    .contact-ibuy-advantage ul > li:before {
        content: " ";
        width: 6px;
        height: 6px;
        background: 0 0;
        border: 1px solid;
        display: block;
        border-radius: 6px;
        position: absolute;
        top: 7px;
        left: -15px
    }

.contact-request-call {
    padding: 25px 15px
}

    .contact-request-call h3 {
        margin: 0;
        font-family: Verdana;
        font-weight: 400;
        font-size: 20px;
        padding-bottom: 20px
    }

    .contact-request-call ul {
        margin: 0;
        padding: 0 0 0 15px;
        list-style: none
    }

        .contact-request-call ul li {
            position: relative;
            margin-bottom: 10px;
            color: #fff
        }

        .contact-request-call ul > li:before {
            content: " ";
            width: 7px;
            height: 7px;
            display: block;
            border-radius: 6px;
            position: absolute;
            top: 5px;
            left: -15px
        }

.contact-sidebar .sidebar-block p:last-child {
    margin-bottom: 0
}

.show-all-address,
.show-worldwide-no {
    display: none
}

.one-address,
.one-no {
    display: block
}

.all-address-btn,
.all-contact-btn {
    margin-bottom: 15px
}

@media (min-width:768px) {
    .contact-sidebar .sidebar-block {
        padding: 25px 20px
    }

    .contact-find-us h3,
    .contact-looking-for h3,
    .contact-prefer-call h3,
    .contact-privacy h3 {
        font-size: 18px;
        padding-bottom: 5px
    }

    .contact-looking-for h3 {
        padding-bottom: 0
    }

    .contact-find-us h3,
    .contact-privacy h3 {
        padding-bottom: 10px
    }

    .contact-looking-for {
        padding: 27px 20px 25px
    }

    .contact-find-us,
    .contact-prefer-call,
    .contact-privacy {
        padding: 35px 20px 30px
    }

    .contact-looking-for a {
        margin: 15px 0
    }

    .contact-find-us .black-txt-button b,
    .contact-looking-for .black-txt-button b,
    .contact-prefer-call .black-txt-button b,
    .contact-privacy .black-txt-button b {
        padding-left: 0
    }

    .contact-side-bar .black-txt-button:after,
    .contact-side-bar .black-txt-button:before,
    .contact-side-bar .red-txt-button:after,
    .contact-side-bar .red-txt-button:before {
        right: 5px
    }

    .contact-find-us,
    .contact-looking-for,
    .contact-prefer-call,
    .contact-privacy,
    .contact-right-grid-experts {
        margin: 0 0 15px
    }

        .contact-find-us h3,
        .contact-looking-for h3,
        .contact-prefer-call h3 {
            line-height: 1.2
        }

    contact-right-grid-experts {
        font-size: 18px
    }

    .contact-right-grid-experts p {
        padding-top: 15px
    }

    .contact-privacy {
        padding: 20px 25px
    }

    .contact-right-grid-experts {
        padding: 25px 20px
    }

    .contact-ibuy-advantage h3,
    .contact-online-order h3 {
        font-size: 20px
    }

    .contact-request-call h3 {
        padding: 0 0 20px
    }

    .contact-request-call {
        padding: 30px 20px
    }
}

@media (min-width:992px) {

    .contact-find-us h3,
    .contact-ibuy-advantage h3,
    .contact-looking-for h3,
    .contact-online-order h3,
    .contact-prefer-call h3,
    .contact-privacy h3,
    .contact-request-call h3,
    .contact-right-grid-experts h3 {
        font-size: 24px
    }

    .contact-sidebar .sidebar-block {
        padding: 25px
    }

    .contact-online-order,
    .contact-request-call,
    .contact-right-grid-experts {
        padding: 30px 25px
    }

    .contact-find-us,
    .contact-looking-for,
    .contact-prefer-call,
    .contact-privacy,
    .contact-right-grid-experts {
        padding: 30px 25px;
        margin: 0 0 40px
    }

        .contact-privacy h3 {
            line-height: 1.2
        }

        .contact-looking-for h3 {
            margin-bottom: 5px
        }

        .contact-looking-for a {
            margin: 10px 0 5px
        }

    .contact-online-order {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .contact-sidebar > .sidebar-block:first-child {
        margin-top: 25px
    }

    .contact-sidebar > .sidebar-block:last-child {
        margin-bottom: 10px
    }

    .customer-type {
        width: 100%;
        display: inline-block
    }
}

.contact-form-cont h3 {
    font-size: 16px;
    margin-top: 0
}

.form-field-cont.account-field .field-cont .instruction,
label.error {
    margin-top: 10px
}

label.error {
    display: none;
    margin-left: 0;
    color: #d10f1f;
    margin-bottom: 0;
    padding: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 1em;
    background: 0 0
}

.form-field-cont .label-cont label {
    font-weight: 400;
    font-size: 12px;
    color: #000;
    margin-bottom: 15px
}

.form-text a {
    color: #E71D26;
    text-decoration: none;
    font-weight: bold;
}

.radio-group ul {
    padding: 0;
    margin-bottom: 0;
    list-style: none
}

.form-field-cont .radio-group li {
    display: inline-block;
    width: 100%;
    position: relative;
    margin-right: 10px;
    margin-bottom: 15px
}

    .form-field-cont .radio-group li label {
        padding: 10px 15px;
        position: relative;
        font-size: 15px;
        margin-bottom: 0;
        cursor: pointer;
        font-weight: 700;
        height: 45px;
        background: #f3f3f3;
        text-align: center;
        width: 100%;
        border-radius: 0
    }

        .form-field-cont .radio-group li label.ui-radio-on {
            background: #d10f1f !important;
            color: #fff
        }

    .form-field-cont .radio-group li .ui-radio input[type=radio] {
        position: absolute;
        visibility: hidden;
        width: 0
    }

.form-field-cont .btn-default,
.form-field-cont input,
.form-field-cont select {
    width: 100%;
    background: #f3f3f3;
    border: 2px solid #f3f3f3;
    outline: 0;
    padding: 10px;
    color: #000;
    font-size: 14px;
    border-radius: 0;
    text-align: left;
    position: relative
}

.form-field-cont textarea {
    width: 100%;
    height: 310px;
    background: #f3f3f3;
    border: 2px solid #f3f3f3;
    resize: none;
    outline: 0;
    padding: 10px;
    color: #000;
    font-size: 14px
}

.form-field-cont select {
    -webkit-appearance: none;
    border: none;
    border-radius: 0;
    width: 100%
}

.form-field-cont .select-wrapper {
    background-color: #FFF;
    display: inline-block;
    width: 100%;
    position: relative
}

    .form-field-cont .select-wrapper:after,
    .form-field-cont .select-wrapper:before {
        content: "";
        background: #464646;
        -webkit-border-radius: .2em;
        border-radius: .2em;
        display: block;
        height: 13px;
        position: absolute;
        top: 13px;
        width: 2px;
        z-index: 5
    }

    .form-field-cont .select-wrapper:after {
        right: 15px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    .form-field-cont .select-wrapper:before {
        right: 23px;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg)
    }

.form-field-cont input.error,
.form-field-cont select.error,
.form-field-cont textarea.error {
    border: 2px solid #d10f1f
}

.form-field-cont input:invalid,
.form-field-cont textarea:invalid {
    font-size: 14px;
    font-style: italic;
    color: #464646
}

.form-field-cont input:valid,
.form-field-cont textarea:valid {
    font-style: normal
}

.order-online .contact-form-cont h3 {
    font-weight: 700
}

.form-field-cont button b {
    padding-left: 0
}

.order-online-sub-cont {
    display: none
}

.form-field-cont.account-field .field-cont input[type=number] {
    max-width: 90px
}

.form-field-cont.account-field .field-cont .instruction p {
    line-height: 1.7em;
    margin: 0
}

.form-field-cont.account-field .field-cont input.error {
    display: block
}

.form-field-cont.text-component .label-cont p {
    font-size: 16px
}

.contact-us .herobanner-caption h2 {
    padding-bottom: 0
}

.contact-us-field-cont {
    padding-top: 25px
}

.form-field-cont input::-webkit-input-placeholder,
.form-field-cont textarea::-webkit-input-placeholder {
    color: #464646
}

.form-field-cont input::-moz-placeholder,
.form-field-cont textarea::-moz-placeholder {
    color: #464646
}

.form-field-cont input:-ms-input-placeholder,
.form-field-cont textarea:-ms-input-placeholder {
    color: #464646
}

.form-field-cont input:-moz-placeholder,
.form-field-cont textarea:-moz-placeholder {
    color: #464646
}

@media (min-width:768px) {

    .form-field-cont input:invalid,
    .form-field-cont textarea:invalid {
        font-size: 15px
    }

    .contact-us-field-cont {
        padding-top: 45px
    }

    .contact-form-cont,
    .contact-form-cont form,
    .order-online-cont {
        float: left
    }

        .contact-form-cont h3 {
            font-size: 18px;
            margin-bottom: 25px
        }

    .form-field-cont {
        width: 100%;
        margin-bottom: 20px;
        float: left
    }

        .form-field-cont .label-cont {
            width: 92px;
            margin-right: 30px;
            float: left;
            display: table;
            vertical-align: top;
            min-height: 40px
        }

            .form-field-cont .label-cont label {
                display: table-cell;
                vertical-align: middle;
                font-size: 14px
            }

        .form-field-cont .field-cont {
            display: block;
            float: left;
            width: calc(100% - (92px + 30px))
        }

        .form-field-cont .select-wrapper:after {
            top: 20px;
            right: 25px
        }

        .form-field-cont .select-wrapper:before {
            top: 20px;
            right: 33px
        }

        .form-field-cont select option {
            padding: 15px
        }

        .form-field-cont input,
        .form-field-cont select,
        .form-field-cont textarea {
            padding: 15px;
            color: #464646;
            font-size: 15px;
            max-width: 100%
        }

        .form-field-cont input {
            padding: 0 15px;
            line-height: 36px
        }

        .form-field-cont .radio-group li {
            width: auto
        }

            .form-field-cont .radio-group li:last-child {
                margin-bottom: 0
            }

            .form-field-cont .radio-group li label {
                height: inherit;
                line-height: 40px;
                padding: 0 15px
            }

    .ibuy-order-cont {
        width: 100%;
        float: left
    }

        .ibuy-order-cont .image-component {
            float: left;
            margin-top: 25px;
            margin-right: 30px
        }

        .ibuy-order-cont .text-component {
            float: left;
            width: calc(100% - 125px)
        }

    .form-field-cont.text-component .label-cont {
        width: 100%;
        margin-right: 0;
        min-height: 0
    }

    .form-field-cont .radio-group li {
        margin-bottom: 20px;
        margin-right: 16px
    }

    .order-online .contact-form-cont h3 {
        font-size: 20px
    }

    .order-online .form-field-cont.text-component .field-cont {
        margin-top: 5px
    }

    .order-online .form-field-cont .field-cont li {
        margin-bottom: 0
    }

    .order-online-sub-cont {
        float: left
    }

    .form-field-cont.text-component .label-cont p {
        font-size: 18px
    }

    .form-field-cont.account-field .label-cont {
        min-height: 105px
    }

    .form-field-cont.account-field .field-cont input[type=number] {
        max-width: 110px
    }

    .form-field-cont.account-field .label-cont label {
        vertical-align: top
    }
}

@media(min-width:992px) {

    .form-field-cont .select-wrapper,
    .form-field-cont input,
    .form-field-cont select,
    .form-field-cont textarea {
        max-width: 518px
    }

    .contact-form-cont {
        margin-bottom: 15px
    }

    .contact-us-field-cont {
        padding-top: 10px
    }

    .contact-form-cont h3 {
        font-size: 20px;
        margin-bottom: 30px
    }

    .form-field-cont {
        margin-bottom: 30px
    }

        .form-field-cont .label-cont label {
            font-size: 15px;
            letter-spacing: -1px
        }

    .radio-group li label {
        padding: 10px 18px
    }

    .form-field-cont.text-component .label-cont p {
        font-size: 20px
    }

    .order-online .contact-form-cont h3 {
        font-size: 24px
    }

    .ibuy-order-cont .image-component {
        margin-right: 50px;
        max-width: 95px
    }

    .ibuy-order-cont .text-component {
        float: left;
        width: calc(100% - 145px)
    }

    .form-field-cont .label-cont {
        width: 146px;
        min-height: 45px
    }

    .form-field-cont input {
        line-height: 43px
    }

    .form-field-cont .radio-group li label {
        line-height: 47px
    }

    .form-field-cont .field-cont {
        width: calc(100% - (146px + 50px))
    }

    .form-field-cont.account-field .label-cont label {
        vertical-align: top;
        padding-top: 10px
    }
}

@media (min-width:1366px) {
    .form-field-cont .label-cont {
        margin-right: 50px
    }
}

@media (max-width:767px) {
    .get-in-touch .radio-group ul:last-child {
        margin-top: 15px
    }

    .form-field-cont,
    .radio-group ul:last-child li:first-child {
        margin-bottom: 15px
    }

    .contact-form-cont h3 {
        margin-bottom: 17px
    }

    .form-field-cont.text-component .field-cont .radio-group ul li {
        margin: 0;
        width: 50%;
        float: left
    }

        .form-field-cont.text-component .field-cont .radio-group ul li:first-child .ui-radio {
            margin-right: 10px
        }

        .form-field-cont.text-component .field-cont .radio-group ul li:last-child .ui-radio {
            margin-left: 10px
        }

    .order-online-sub-cont {
        clear: both;
        padding-top: 15px
    }

    .ibuy-order-cont .image-component {
        width: 80px;
        margin-bottom: 10px
    }

        .ibuy-order-cont .image-component img {
            width: 80px !important;
            height: auto !important
        }

    .form-field-cont .radio-group li label {
        font-size: 12px;
        line-height: 33px;
        height: inherit;
        padding: 0 15px
    }

    .form-getInTouch .form-field-cont {
        margin-bottom: 20px
    }

        .form-getInTouch .form-field-cont:first-child {
            margin-bottom: 10px
        }

        .form-getInTouch .form-field-cont:last-child {
            margin-bottom: 0
        }

    .form-field-cont input {
        padding: 6px 12px
    }

    .form-field-cont textarea {
        min-height: 359px
    }

    .contact-tab-cont .panel-group {
        margin: 0
    }
}

.legal-foot-note ul {
    padding: 20px 0;
    margin: 0
}

    .legal-foot-note ul li {
        list-style: none;
        margin-bottom: 10px
    }

        .legal-foot-note ul li p,
        .legal-foot-note ul li:last-child {
            margin-bottom: 0;
            font-weight: 400
        }

        .legal-foot-note ul li sup {
            margin-right: 3px
        }

.legal-foot-cont {
    margin: 30px -20px 10px;
    display: none
}

.show-legalnote .legal-foot-cont {
    display: block
}

.legal-foot-cont .legal-foot-note sup {
    font-size: 75%;
    top: -.5em
}

@media (min-width:768px) {
    .legal-foot-note ul {
        padding: 30px 0
    }

    .legal-foot-cont {
        margin-left: -15px;
        margin-right: -15px
    }
}

@media (min-width:992px) {
    .legal-foot-cont .container {
        width: 100%
    }

    .legal-foot-note ul {
        padding: 40px 0
    }

    .legal-foot-cont {
        margin: 40px 0 10px
    }

        .legal-foot-cont .legal-foot-note {
            padding: 0 25px
        }
}

@media (min-width:1200px) {
    .extended {
        display: table !important
    }

        .extended .image-component,
        .extended .text-component {
            width: 50% !important;
            height: 100% !important;
            display: table-cell !important;
            float: none !important;
            position: relative
        }

        .extended .image-component {
            left: 50%
        }

        .extended .text-component {
            right: 50%;
            padding-top: 30px !important
        }

        .extended .image-component.newImg img {
            height: 100%;
            width: auto
        }

    .lube-related-cat .hp-textImage-grid.extended .text-component {
        padding-top: 30px
    }

        .lube-related-cat .hp-textImage-grid.extended .text-component h3 {
            height: 70px
        }

        .lube-related-cat .hp-textImage-grid.extended .text-component p {
            height: 85px;
            margin-bottom: 5px
        }
}

.contact-interested-heading {
    margin-bottom: 0
}

.contact-tab-cont {
    font-family: Verdana, Helvetica Neue, Arial, Helvetica, sans-serif
}

    .contact-tab-cont input[type=submit],
    .contact-tab-cont input[type=button] {
        background: #d10f1f;
        height: 34px;
        font-size: 12px;
        line-height: 34px;
        color: #fff;
        display: inline-block;
        padding: 0 10px;
        border: none;
        cursor: pointer;
        text-decoration: none;
        border-radius: 0
    }

        .contact-tab-cont input[type=submit]:hover,
        .contact-tab-cont input[type=button]:hover {
            background: #970b16
        }

    .contact-tab-cont .page-header {
        padding-bottom: 0 !important;
        margin: 0 !important;
        border-bottom: 0 solid #eee !important
    }

        .contact-tab-cont .page-header h1 {
            font-size: 16px;
            margin-top: 0;
            margin-bottom: 0
        }

    .contact-tab-cont .form-group {
        margin-bottom: 15px
    }

    .contact-tab-cont .has-success .checkbox,
    .contact-tab-cont .has-success .checkbox-inline,
    .contact-tab-cont .has-success .control-label,
    .contact-tab-cont .has-success .help-block,
    .contact-tab-cont .has-success .radio,
    .contact-tab-cont .has-success .radio-inline,
    .contact-tab-cont .has-success.checkbox label,
    .contact-tab-cont .has-success.checkbox-inline label,
    .contact-tab-cont .has-success.radio label,
    .contact-tab-cont .has-success.radio-inline label {
        color: #000 !important
    }

    .contact-tab-cont .form-group .form-control {
        border-color: #f6f6f6 !important;
        box-shadow: none !important
    }

    .contact-tab-cont input.text-box,
    .contact-tab-cont textarea.form-control {
        border: 2px solid #f3f3f3;
        padding: 10px;
        color: #000;
        background: #f3f3f3;
        width: 100%;
        outline: 0
    }

    .contact-tab-cont .control-label,
    .contact-tab-cont .has-error .control-label {
        font-weight: 400;
        font-size: 12px;
        color: #000;
        margin-bottom: 15px
    }

    .contact-tab-cont .required-field .control-label:before {
        content: none !important
    }

    .contact-tab-cont .required-field .control-label:after {
        color: #000;
        content: "*";
        font-weight: bolder;
        margin-left: 0
    }

    .contact-tab-cont input.text-box {
        font-size: 14px;
        box-shadow: none;
        border-radius: 0;
        text-align: left;
        position: relative
    }

    .contact-tab-cont textarea.form-control {
        height: 150px;
        resize: none;
        font-size: 14px;
        box-shadow: none;
        border-radius: 0;
        margin: 0
    }

        .contact-tab-cont textarea.form-control:invalid {
            font-size: 14px;
            font-style: italic;
            color: #464646
        }

    .contact-tab-cont .select-wrapper select {
        background: #f3f3f3;
        border: 2px solid #f3f3f3;
        border-radius: 0;
        width: 100%;
        height: 54px;
        box-shadow: none;
        color: #000;
        display: inline-block;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

        .contact-tab-cont .select-wrapper select::-ms-expand {
            display: none
        }

        .contact-tab-cont .select-wrapper select option {
            padding: 14px;
            color: #000 !important;
            font-size: 15px;
            max-width: 100%
        }

    .contact-tab-cont .select-wrapper:after,
    .contact-tab-cont .select-wrapper:before {
        content: "";
        background: #464646;
        -webkit-border-radius: .2em;
        border-radius: .2em;
        display: block;
        height: 13px;
        position: absolute;
        top: 13px;
        width: 2px;
        z-index: 5
    }

    .contact-tab-cont .select-wrapper:before {
        right: 23px;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg)
    }

    .contact-tab-cont .select-wrapper:after {
        right: 15px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    .contact-tab-cont .field-cont.select-wrapper {
        position: relative
    }

    .contact-tab-cont .radio {
        float: left;
        margin: 0
    }

        .contact-tab-cont .radio label {
            width: 100%;
            background: #f6f6f6;
            min-height: 35px;
            text-align: center;
            padding: 10px;
            line-height: 33px;
            font-size: 12px;
            font-weight: 700;
            float: left
        }

        .contact-tab-cont .radio input[type=radio] {
            visibility: hidden
        }

        .contact-tab-cont .radio + .radio {
            margin-top: 0
        }

    .contact-tab-cont .has-error .form-control,
    .contact-tab-cont .has-error .form-control:focus {
        border-color: #d10f1f !important;
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .contact-tab-cont .has-error .help-block {
        margin-left: 0;
        color: #d10f1f;
        margin-bottom: 0;
        padding: 0;
        margin-top: 12px;
        font-weight: 400;
        font-size: 12px;
        line-height: 1em;
        background: 0 0
    }

    .contact-tab-cont .radio label.active {
        background: #d10f1f;
        color: #fff
    }

.contact-form-cont h1 {
    font-size: 16px;
    margin-top: 0
}

#orderOnline-collapse .contact-form-cont h1,
.order-online .contact-form-cont h1 {
    font-size: 16px;
    margin-top: 0;
    font-weight: 700
}

.field-cont input[type=text]::-webkit-input-placeholder,
.field-cont textarea::-webkit-input-placeholder {
    font-style: italic;
    color: #464646
}

.field-cont input[type=text]::-moz-placeholder,
.field-cont textarea::-moz-placeholder {
    font-style: italic;
    color: #464646
}

.field-cont input[type=text]:-ms-input-placeholder,
.field-cont textarea:-ms-input-placeholder {
    font-style: italic;
    color: #464646
}

.customer-type input[type=radio]:checked + label {
    background: #d10f1f;
    color: #fff
}

.dark-grey .black-txt-button:after,
.dark-grey .black-txt-button:before {
    background: #fff
}

.instruction {
    margin-top: 10px;
    clear: both;
    float: left
}

    .instruction p {
        margin-bottom: 5px
    }

@media (min-width:768px) {
    .contact-tab-cont .has-error .help-block {
        font-size: 14px
    }

    .contact-tab-cont input[type=submit],
    .contact-tab-cont input[type=button] {
        height: 40px;
        font-size: 14px;
        line-height: 40px
    }

    .contact-tab-cont .select-wrapper select option,
    .contact-tab-cont textarea.form-control,
    .contact-tab-cont textarea.form-control:invalid,
    input.text-box:invalid {
        font-size: 15px
    }

    .contact-tab-cont .field-cont {
        display: block;
        float: left;
        width: calc(100% - (93px + 30px))
    }

    .contact-tab-cont input.text-box {
        padding: 0 15px !important;
        height: 36px;
        line-height: 36px;
        font-size: 15px
    }

    .contact-tab-cont .select-wrapper {
        padding: 0 !important;
        height: 40px;
        line-height: 36px;
        font-size: 15px
    }

    .contact-tab-cont .page-header h1 {
        font-size: 18px;
        margin-bottom: 25px
    }

    .contact-tab-cont .label-cont {
        width: 93px;
        margin: 0 30px 0 0;
        padding: 0;
        float: left;
        display: table;
        vertical-align: top;
        font-size: 14px;
        min-height: 40px
    }

        .contact-tab-cont .label-cont label {
            display: table-cell;
            vertical-align: middle;
            letter-spacing: -.018em
        }

    .contact-tab-cont .form-group {
        float: left;
        width: 100%
    }

    .contact-tab-cont .form-control {
        height: 40px
    }

    .contact-tab-cont .radio {
        float: left;
        margin: 0 16px 20px 0;
        display: inline-block
    }

        .contact-tab-cont .radio label {
            height: inherit;
            line-height: 40px;
            padding: 0 15px;
            font-size: 15px
        }

    .contact-tab-cont .control-label,
    .contact-tab-cont .has-error .control-label,
    .contact-tab-cont .label-cont label {
        font-size: 15px
    }

    .contact-tab-cont .has-error .help-block {
        padding-left: 0;
        float: left
    }

    .order-online .contact-form-cont h1 {
        font-size: 18px;
        margin-bottom: 25px
    }

    .contact-tab-cont div.radio {
        margin-bottom: 15px
    }

        .contact-tab-cont div.radio:last-child {
            margin-bottom: 0
        }

        .contact-tab-cont div.radio:nth-child(3) {
            clear: both
        }

    .contact-tab-cont .form-group.has-error .field-cont.select-wrapper {
        height: 75px
    }

    .form-submit-border {
        float: left;
        margin-left: 120px
    }
}

@media (min-width:992px) {
    .contact-tab-cont {
        padding-bottom: 47px
    }

        .contact-tab-cont input[type=submit],
        .contact-tab-cont input[type=button] {
            height: 47px;
            font-size: 15px;
            line-height: 48px;
            padding: 0 20px
        }

        .contact-tab-cont .radio label,
        .contact-tab-cont input.text-box {
            line-height: 45px;
            height: 45px
        }

        .contact-tab-cont .form-group {
            margin-bottom: 30px
        }

        .contact-tab-cont .radio {
            margin-bottom: 0;
            margin-right: 20px
        }

        .contact-tab-cont div.radio:first-child,
        .contact-tab-cont div.radio:nth-child(2) {
            margin-bottom: 20px
        }

        .contact-tab-cont .select-wrapper,
        .contact-tab-cont input.text-box,
        .contact-tab-cont textarea.form-control {
            max-width: 518px
        }

        .contact-tab-cont .page-header h1 {
            font-size: 20px;
            margin-bottom: 35px
        }

        .contact-tab-cont .label-cont label {
            font-size: 15px
        }

        .contact-tab-cont .label-cont {
            min-height: 45px;
            width: 155px;
            margin-right: 50px
        }

        .contact-tab-cont .field-cont {
            width: calc(100% - (155px + 50px))
        }

        .contact-tab-cont .has-error .help-block {
            padding-left: 0
        }

    .order-online .contact-form-cont h1 {
        font-size: 24px;
        margin-bottom: 25px
    }

    .contact-tab-cont .form-control {
        height: 45px
    }

    .contact-tab-cont .select-wrapper:after,
    .contact-tab-cont .select-wrapper:before {
        top: 18px
    }

    .form-submit-border {
        margin-left: 205px
    }
}

@media (max-width:767px) {

    .contact-tab-cont .field-cont,
    .contact-tab-cont .form-group,
    .contact-tab-cont .has-feedback,
    .contact-tab-cont .label-cont {
        display: block;
        clear: both
    }

    .contact-tab-cont input.text-box {
        padding: 6px 12px
    }

    .contact-tab-cont .page-header h1 {
        margin-bottom: 17px
    }

    .contact-tab-cont .radio {
        width: 100%;
        margin: 0 0 15px
    }

        .contact-tab-cont .radio label {
            padding: 0
        }

    .contact-tab-cont .select-wrapper:after,
    .contact-tab-cont .select-wrapper:before {
        top: 12px;
        height: 11px
    }

    .contact-tab-cont .select-wrapper:before {
        right: 22px
    }

    .contact-tab-cont .control-label,
    .contact-tab-cont .has-error .control-label {
        margin-bottom: 10px
    }
}

.thank-you-cont {
    padding-bottom: 10px
}

    .thank-you-cont h2 {
        font-size: 20px;
        font-weight: 700;
        color: #000;
        margin: 0 0 10px
    }

    .thank-you-cont p {
        font-size: 16px;
        color: #000;
        margin: 0 0 10px
    }

        .thank-you-cont p:last-child {
            margin: 0
        }

@media (min-width:768px) {
    .thank-you-cont {
        padding-bottom: 30px
    }

        .thank-you-cont h2 {
            font-size: 24px;
            margin: 0 0 15px
        }

        .thank-you-cont p {
            font-size: 18px
        }
}

@media (min-width:992px) {
    .thank-you-cont {
        padding-bottom: 60px
    }

        .thank-you-cont h2 {
            font-size: 30px
        }

        .thank-you-cont p {
            font-size: 20px;
            line-height: 26px;
            margin: 0 0 15px
        }
}

@media (min-width:768px) and (max-width:991px) {
    .panel-body.js-tabcollapse-panel-body {
        padding-bottom: 18px
    }

    .contact-tab-cont .label-cont {
        margin: 0 20px 0 0;
        width: 100px
    }
}

.lang-Modal .modal-content {
    box-shadow: none !important;
    border: 0 !important
}

.pop-up-language {
    text-align: left;
    color: #000;
    padding: 25px 20px;
    position: fixed;
    top: 80px;
    background: #fff
}

.pcl-table td,
.pcl-table th,
.pcl-table-margeRow td,
.pcl-table-margeRow th {
    text-align: center;
    border-bottom: 2px solid #000;
    padding: 10px
}

.pop-up-language h2 {
    font-size: 16px;
    font-weight: 700
}

.pop-up-language p {
    font-size: 16px
}

.pop-up-language .select-language {
    padding: 30px 0
}

.pop-up-language a.red-text {
    font-size: 12px;
    color: #ef293d;
    font-weight: 700
}

.select-language a:not(:first-child):before {
    content: "";
    border-left: 1px solid #ef293d;
    padding-right: 20px;
    margin-left: 20px;
    height: 10px;
    display: inline-block
}

.pop-up-language p.small-text {
    font-size: 12px
}

    .pop-up-language p.small-text a.red-text {
        font-weight: 400;
        padding: 0;
        font-size: 12px;
        display: inline
    }

@media (min-width:768px) {
    .pop-up-language {
        width: 336px;
        padding: 45px 30px;
        left: 50%;
        margin-left: -168px
    }

        .pop-up-language h2,
        .pop-up-language p {
            font-size: 18px
        }

        .pop-up-language a.red-text {
            font-size: 14px
        }
}

@media (min-width:992px) {
    .pop-up-language {
        width: 568px;
        padding: 50px;
        left: 50%;
        margin-left: -284px
    }

        .pop-up-language h2,
        .pop-up-language p {
            font-size: 20px
        }

        .pop-up-language a.red-text {
            font-size: 15px
        }
}

.lube-360-component {
    background: #fff;
    padding: 40px 24px 60px;
    margin-bottom: 20px;
    position: relative;
    min-height: 540px
}

    .lube-360-component .image-component {
        text-align: center
    }

        .lube-360-component .image-component img {
            float: none;
            margin: 0 auto
        }

    .lube-360-component .text-component {
        margin: 15px auto 25px
    }

        .lube-360-component .text-component p {
            margin-bottom: 15px
        }

        .lube-360-component .text-component ul {
            margin: 0;
            padding: 0 0 0 15px;
            list-style: none
        }

            .lube-360-component .text-component ul > li {
                position: relative;
                margin-bottom: 5px
            }

                .lube-360-component .text-component ul > li:before {
                    content: " ";
                    width: 6px;
                    height: 6px;
                    background: #fff;
                    display: block;
                    border-radius: 6px;
                    position: absolute;
                    top: 7px;
                    left: -15px;
                    border: 1px solid
                }

    .lube-360-component .button-component {
        position: absolute;
        bottom: 24px
    }

@media (min-width:992px) {
    .lube-360-component {
        padding-left: 36px;
        padding-right: 36px;
        padding-bottom: 70px;
        float: left;
        margin-bottom: 30px;
        min-height: 340px;
        width: 100%
    }

        .lube-360-component .image-component {
            max-width: 113px;
            float: left;
            margin-right: 36px;
            margin-top: 20px
        }

        .lube-360-component .text-component {
            margin-top: 0;
            float: left;
            width: calc(100% - 149px)
        }

        .lube-360-component .text-component-noimage{
            margin-top: 0;
            margin-left:36px;
            width: calc(100% - 70px)
        }

        .lube-360-component .button-component {
            padding-left: 150px
        }
        .lube-360-component .button-component.padding {
            padding-left: 60px !important
        }
}

@media (min-width:1366px) {
    .lube-360-component {
        margin-bottom: 50px
    }
}

@media (max-width:767px) {
    .lube-360-component {
        margin-left: -20px;
        margin-right: -20px
    }

    .lube-360-intro {
        padding-top: 20px
    }

    .pcl-table-cont {
        overflow-x: scroll
    }
}

@media (min-width:768px) and (max-width:991px) {
    .lube-360-intro {
        padding-top: 30px
    }
}

.sitemap-accordion-cont .panel-default > .panel-heading h4.panel-title a {
    padding: 10px;
    display: block;
    text-decoration: underline;
    font-weight: 700;
    font-size: 12px;
    background: #D9EDF8;
    color: #65B2CC
}

.sitemap-accordion-cont .panel-default:first-child > .panel-heading h4.panel-title a,
.sitemap-accordion-cont .panel-default:nth-child(2) > .panel-heading h4.panel-title a {
    font-size: 14px
}

.sitemap-accordion-cont .panel-default {
    border: 0;
    box-shadow: none
}

.sitemap-accordion-cont .panel-body {
    padding: 0;
    margin: 0;
    border: 0 !important
}

.sitemap-sub-heading {
    clear: both
}

    .sitemap-sub-heading a {
        padding: 5px 10px;
        font-weight: 700;
        text-decoration: underline;
        display: block;
        background: #D9EDF8;
        color: #81C7E9
    }

.sitemap-sub-content {
    float: left;
    width: 100%;
    background: #fff;
    padding: 10px
}

    .sitemap-sub-content ul {
        list-style: none;
        padding: 0;
        float: left;
        width: 100%
    }

        .sitemap-sub-content ul li {
            width: 100%;
            float: left;
            display: block;
            margin-top: 15px
        }

            .sitemap-sub-content ul li:before {
                content: none
            }

            .sitemap-sub-content ul li a {
                text-decoration: none
            }

                .sitemap-sub-content ul li a p.sitemap-subcont-title {
                    font-size: 14px;
                    text-decoration: underline;
                    margin-bottom: 0;
                    color: #000
                }

                .sitemap-sub-content ul li a p.sitemap-subcont-item {
                    font-size: 14px;
                    text-decoration: none;
                    margin-bottom: 0;
                    color: #d10f1f
                }

@media (min-width:768px) {

    .sitemap-accordion-cont .panel-default:first-child > .panel-heading h4.panel-title a,
    .sitemap-accordion-cont .panel-default:nth-child(2) > .panel-heading h4.panel-title a,
    .sitemap-sub-content ul li a p.sitemap-subcont-item,
    .sitemap-sub-content ul li a p.sitemap-subcont-title {
        font-size: 18px
    }

    .sitemap-sub-content ul li {
        width: 33.33%;
        padding-right: 10px
    }

    .sitemap-sub-content {
        padding-bottom: 45px
    }
}

.pcl-table,
.pcl-table-margeRow {
    border: 2px solid #000;
    width: 100%;
    border-collapse: collapse
}

    .pcl-table th.bg-lightRed,
    .pcl-table-margeRow th.bg-lightRed {
        background: #e7c2c2
    }

    .pcl-table td,
    .pcl-table-margeRow td {
        border-right: 1px solid #ccc
    }

        .pcl-table td:last-child,
        .pcl-table th:last-child {
            border-right: 2px solid #000
        }

    .pcl-table thead tr:first-child th:first-child,
    .pcl-table thead tr:nth-child(2) th:first-child,
    .pcl-table thead tr:nth-child(2) th:nth-child(2) {
        background: #fff;
        border-right: 2px solid #000
    }

    .pcl-table td:first-child,
    .pcl-table td:nth-child(2),
    .pcl-table-margeRow td:first-child,
    .pcl-table-margeRow td:nth-child(2) {
        border-right: 2px solid #000
    }

    .pcl-table tbody tr:nth-child(2n+1) {
        background-color: #ccc
    }

    .pcl-table td.left,
    .pcl-table th.left,
    .pcl-table-margeRow td.left,
    .pcl-table-margeRow th.left {
        text-align: left
    }

    .pcl-table td.right,
    .pcl-table th.right,
    .pcl-table-margeRow td.right,
    .pcl-table-margeRow th.right {
        text-align: right
    }

    .pcl-table-margeRow thead tr:first-child th:first-child,
    .pcl-table-margeRow thead tr:nth-child(2) th:first-child,
    .pcl-table-margeRow thead tr:nth-child(2) th:nth-child(2) {
        background: #fff;
        border-right: 2px solid #000;
        width: 15%
    }

    .pcl-table-margeRow th {
        border-bottom: 2px solid #000;
        text-align: center;
        padding: 10px
    }

    .pcl-table-margeRow td.thin-border,
    tr.tr-thin-border td {
        border-bottom: 1px solid #ccc
    }

    .pcl-table-margeRow td.thin-right-border {
        border-right: 1px solid #ccc
    }

    .pcl-table-margeRow tr.bg-tr-grey {
        background: #ccc
    }

.general-page-wrap .lube-title {
    margin-bottom: 25px
}

.general-page-cont h3 {
    font-weight: 700;
    font-size: 18px;
    line-height: 21px
}

.general-page-cont a {
    color: #d10f1f;
    text-decoration: none
}

    .general-page-cont a:hover {
        color: #970b16
    }

.general-page-cont p {
    line-height: 16px
}

.general-page-cont ul {
    margin-top: 0;
    list-style-type: none;
    padding-left: 15px
}

    .general-page-cont ul > li {
        position: relative;
        list-style: none;
        width: 100%;
        margin-top: 5px
    }

        .general-page-cont ul > li:before {
            content: " ";
            width: 5px;
            height: 5px;
            background: 0 0;
            border: 1px solid #000;
            display: block;
            border-radius: 6px;
            position: absolute;
            top: 6px;
            left: -15px
        }

.lube-container.bg-grey,
.lube-container.light-grey,
.lube-container.resource-banner-promo {
    background: 0 0 !important;
    position: relative
}

    .lube-container.bg-grey:before,
    .lube-container.light-grey:before,
    .lube-container.resource-banner-promo:before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        display: block;
        top: 0;
        margin-left: 50%;
        transform: translate(-50%, 0)
    }

    .lube-container.light-grey:before {
        background: #f3f3f3 !important
    }

    .lube-container.bg-grey:before,
    .lube-container.resource-banner-promo:before {
        background: #464646 !important
    }

@media (min-width:768px) {
    .general-page-cont h3 {
        font-size: 20px;
        margin-top: 25px;
        line-height: 24px
    }

    .lube-container.bg-grey:before,
    .lube-container.light-grey:before,
    .lube-container.resource-banner-promo:before {
        max-width: 770px
    }
}

@media (min-width:992px) {
    .general-page-cont h3 {
        font-size: 24px;
        margin-top: 30px;
        line-height: 28px
    }

    .lube-container.bg-grey:before,
    .lube-container.light-grey:before,
    .lube-container.resource-banner-promo:before {
        max-width: 940px
    }
}

@media (min-width:1200px) {

    .lube-container.bg-grey:before,
    .lube-container.light-grey:before,
    .lube-container.resource-banner-promo:before {
        max-width: 1145px
    }
}

@media (min-width:1366px) {

    .lube-container.bg-grey:before,
    .lube-container.light-grey:before,
    .lube-container.resource-banner-promo:before {
        max-width: 1286px
    }
}

.hp-textImage-grid .image-component {
    height: 85px;
    position: relative
}

    .hp-largeImageText-grid .image-component img,
    .hp-textImage-grid .image-component img,
    .image-block img,
    .product-resource-card .image-component img,
    .resource-video-cont .image-component img,
    .video-block a img {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        width: 100%;
        margin-left: inherit
    }

.hero-banner .herobanner-image img.hero-bgImage {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    width: auto;
    max-width: inherit;
    height: 100%;
    margin-right: -60px
}

.hero-banner .herobanner-image {
    overflow: hidden;
    position: relative
}

.lube-HP-widget .hp-textImage-grid .image-component {
    height: 105px
}

    .lube-HP-widget .hp-largeImageText-grid .image-component img,
    .lube-HP-widget .hp-textImage-grid .image-component img {
        height: 100%;
        width: auto
    }

.lube-HP-widget .hp-largeImageText-grid .image-component {
    height: 640px;
    position: relative
}

.lube-HP-widget .hp-fullImage-grid .image-component img {
    height: 100%
}

.video-block {
    height: 208px
}

    .image-block,
    .video-block a {
        height: 100%;
        overflow: hidden;
        position: relative;
        display: block
    }

        .image-block img,
        .video-block a img {
            height: 100%;
            width: inherit;
            max-width: inherit
        }

   .imgCenter .image-block img {
    width: 100%;
}

.imgCenter .cs-img-block {
    background-color: initial;
}
.imgCenter .cs-img-block img {
    height: auto;
}

.lube-HP-widget .hp-textVideo-grid .video-block {
    height: 198px
}

.pod-grid .hp-textImage-grid .image-component {
    height: 86px
}

.featured-bottom-resource .hp-textImage-grid .image-component {
    height: 106px
}

.about-video-block .video-block {
    height: 202px
}

    .about-video-block .video-block a img {
        height: 100%;
        width: auto
    }

.about-us-banner-caption .hero-banner .herobanner-image img.hero-bgImage {
    right: inherit;
    left: 0;
    margin-left: -60px;
    margin-right: inherit
}

.image-block {
    height: 208px
}

.about-story-block .about-image-block,
.news-components-cont .image-component {
    height: 240px;
    overflow: hidden;
    position: relative
}

.sentron-hero-banner .hero-banner .herobanner-image {
    height: inherit;
    position: absolute
}

.product-resource-card .image-component {
    overflow: hidden;
    position: relative;
    height: 106px
}

    .product-resource-card .image-component img {
        height: auto
    }

.about-section .video-block {
    height: 158px
}

.resource-video-cont .image-block,
.resource-video-cont .image-component,
.resource-video-cont .video-block {
    height: 210px;
    overflow: hidden;
    position: relative
}

    .resource-video-cont .image-component img {
        height: 100%;
        width: auto
    }

@media (min-width:768px) {
    .hp-textImage-grid .image-component {
        height: 68px
    }

    .lube-HP-widget .hp-textImage-grid .image-component {
        height: 84px
    }

    .lube-HP-widget .hp-largeImageText-grid .image-component {
        height: 586px
    }

    .lube-HP-widget .hp-fullImage-grid .image-component {
        height: 278px
    }

    .image-block,
    .video-block {
        height: 184px
    }

    .lube-HP-widget .hp-textVideo-grid .video-block {
        height: 160px
    }

    .hero-banner .herobanner-image img.hero-bgImage {
        margin-right: 0
    }

    .pod-grid .hp-textImage-grid .image-component {
        height: 126px
    }

    .featured-bottom-resource .hp-textImage-grid .image-component,
    .product-resource-card .image-component {
        height: 80px
    }

    .industries-categories-grid .hp-textImage-grid .image-component img {
        height: auto
    }

    .about-us-banner-caption .herobanner-image,
    .about-video-third-cont .herobanner-image {
        height: 278px
    }

    .about-us-banner-caption .hero-banner .herobanner-image img.hero-bgImage {
        margin-left: 0
    }

    .about-story-block .about-image-block {
        height: 162px
    }

        .about-story-block .about-image-block img,
        .about-video-block .video-block a img {
            width: auto;
            height: 100%
        }

    .about-section .video-block {
        height: 258px
    }

    .resource-video-cont .image-block,
    .resource-video-cont .image-component,
    .resource-video-cont .video-block {
        height: 252px
    }

    .news-components-cont .image-component {
        height: 272px
    }
}

@media (min-width:992px) {
    .hp-textImage-grid .image-component {
        height: 80px
    }

    .lube-HP-widget .hp-textImage-grid .image-component {
        height: 91px
    }

    .lube-HP-widget .hp-fullImage-grid .image-component {
        height: 300px
    }

    .image-block,
    .video-block {
        height: 204px
    }

    .lube-HP-widget .hp-textVideo-grid .video-block {
        height: 166px
    }

    .lube-HP-widget .hp-largeImageText-grid .image-component {
        height: 640px
    }

    .hero-banner .herobanner-image {
        height: 310px
    }

    #Lubes360Image {
        height:auto;
    }

    .featured-bottom-resource .hp-textImage-grid .image-component,
    .product-resource-card .image-component {
        height: 80px
    }

    .about-story-block .about-image-block,
    .news-components-cont .image-component9148 {
        height: 272px
    }

    .about-section .image-block,
    .about-section .video-block {
        height: 408px
    }

    .resource-video-cont .image-block,
    .resource-video-cont .image-component,
    .resource-video-cont .video-block {
        height: 320px
    }
}

@media (min-width:1200px) {
    .hp-textImage-grid.extended .image-component {
        position: absolute;
        top: 0
    }

    .pod-grid .hp-text-grid.extended,
    .pod-grid .hp-textImage-grid.extended {
        display: table !important
    }

        .pod-grid .hp-text-grid.extended .text-component,
        .pod-grid .hp-textImage-grid.extended .text-component {
            display: table-cell !important;
            vertical-align: middle
        }

        .pod-grid .hp-text-grid.extended .text-component {
            right: 0
        }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .lube-HP-widget .hp-textVideo-grid .video-block {
        height: 150px
    }
}

.calc-breadcrumb-cont.light-grey,
.duron-calc-wrap.light-grey {
    background: #f3f3f3 !important
}

.ytp-title-link {
    padding-top: 50px !important
}

.ytp-popup {
    display: none
}

.video-player iframe html body .full-frame .ytp-popup.ytp-generic-popup {
    display: none !important
}

.hp-text-icon-grid {
    height: 300px !important;
    position: relative;
    display: table;
    padding: 0 15px;
    margin-bottom: 20px;
    width: 100%
}

    .hp-text-icon-grid .text-icon-cont {
        display: table-cell;
        vertical-align: middle
    }

        .hp-text-icon-grid .text-icon-cont .image-component {
            float: left;
            width: 110px;
            margin-bottom: 15px;
            margin-right: 10px
        }

            .hp-text-icon-grid .text-icon-cont .image-component img {
                width: 100%
            }

        .hp-text-icon-grid .text-icon-cont .icon-text {
            float: left;
            width: calc(100% - 120px)
        }

            .hp-text-icon-grid .text-icon-cont .icon-text h3 {
                margin-top: 0
            }

    .hp-text-icon-grid a.btn {
        position: absolute;
        bottom: 15px;
        left: 15px
    }

    .hp-text-icon-grid .text-component p {
        vertical-align: top;
        float: left;
        max-height: 70px;
        overflow: hidden
    }

@media (min-width:768px) {
    .hp-text-icon-grid a.btn {
        bottom: 20px;
        left: 20px
    }

    .hp-text-icon-grid {
        padding: 0 20px;
        margin-bottom: 30px
    }

        .hp-text-icon-grid .text-icon-cont .image-component {
            width: 150px
        }

        .hp-text-icon-grid .text-icon-cont .icon-text {
            width: calc(100% - 160px)
        }
}

@media (max-width:767px) {
    .top-header-nav > .show-lan {
        float: left;
        position: relative;
        display: none
    }

    .show-country,
    .show-lan {
        display: block
    }

    .top-header-nav > .show-lan .btn .caret {
        margin-left: 5px
    }

    .show-lan ul.dropdown-menu {
        border-radius: 0;
        box-shadow: none;
        border: 0;
        margin-top: -5px;
        padding: 0;
        min-width: inherit;
        margin-left: -8px
    }
}

@media (min-width:1200px) {
    .product-content-tilte ul li a {
        font-size: 20px;
        padding: 0 15px;
        height: 60px;
        max-width: 210px
    }

    .about-video-cont .about-video-block {
        height: 350px
    }

    .decision-tree-function .btn-group .btn-cont.fr-ashlebel-btn {
        width: 120px
    }
}

.case-study.dark-grey p span {
    color: #fff
}

.news-button-fr-class {
    height: auto !important;
    width: 140px !important;
    line-height: 25px !important;
    padding: 10px 0
}

@media (min-width:768px) {
    .btn-cont.fr-ashlebel-btn {
        width: 120px;
        height: 115px !important;
        display: block !important;
        float: left !important
    }

        .btn-cont.fr-ashlebel-btn label.grey-button {
            word-wrap: break-word !important;
            height: 115px !important;
            padding: 25px 10px;
            display: block !important;
            float: left !important;
            font-size: 14px !important
        }

        .btn-cont.fr-ashlebel-btn:nth-child(3) label.grey-button,
        .btn-cont.fr-ashlebel-btn:nth-child(4) label.grey-button {
            padding: 35px 10px
        }
}

@media (min-width:1200px) {

    .product-content-tilte ul li a,
    .product-content-tilte ul li a.active {
        font-size: 20px;
        max-width: 205px
    }

    .product-content-tilte ul li a {
        padding: 0 10px;
        height: 60px
    }
}

@media (max-width:767px) {
    .sentron-hero-banner .herobanner-image img {
        left: 0
    }

    .owl-carousel .owl-item,
    .owl-wrapper {
        height: 457px;
        background: #474747
    }
}

.brandcard-item .text-component h3 a {
    white-space: pre-line !important;
    white-space: -moz-pre-line !important;
    white-space: -o-pre-line !important
}

.lube-HP-widget .hp-text-grid .text-component {
    padding-top: 35px
}

.lube-HP-widget .hp-text-grid h3.title {
    overflow: visible !important;
    height: auto !important
}

.product-content-main .tab-pane ul li:before,
.resource-video-text ul > li:before {
    background: #000;
    border: 1px solid #000
}

.product-content-main .tab-pane ul li ul li:before {
    background: 0 0
}

.panel-body ul > li:before {
    background: #000 !important;
    border: 1px solid #000 !important
}

.contact-request-call ul > li:before {
    border: 1px solid #fff !important;
    background: #fff !important
}

.hp-textVideo-grid .text-component {
    padding-bottom: 15px !important
}

.product-resource-card .product-resource-textImage-grid .product-resource-text-component h3.product-resource-title {
    height: auto !important;
    overflow: visible !important;
    font-size: 20px
}

@media (max-width:991px) and (min-width:768px) {
    .article-resource-card .case-study .text-component h2.title {
        max-height: 95px !important;
        height: auto !important
    }
}

@media (max-width:992px) {
    .sentron-hero-banner .herobanner-heading h2 {
        color: #000
    }
}

@media (max-width:767px) {
    .case-study {
        height: unset !important
    }

    /*.dropdown-backdrop {
        z-index: -1
    }*/

    .hp-text-grid a.btn,
    .hp-textImage-grid a.btn,
    .hp-textVideo-grid a.btn {
        bottom: 15px
    }
}

.resource-banner-promo .resource-video-text ul > li:before {
    background: #fff;
    border: 1px solid #fff
}

@media (min-width:992px) {
    .about-section .lube-title h2 {
        font-size: 30px
    }
}

@media(min-width:992px) {

    label#ash-less,
    label#low-ash,
    label#mid-ash,
    label#other-ash {
        white-space: normal
    }
}

::-webkit-validation-bubble-message {
    display: none
}

.contact-tab-cont input.form-control.text-box.error,
.contact-tab-cont textarea.form-control.error {
    border-color: #d10f1f !important;
    outline: 0;
    border: 2px solid #f3f3f3
}

.form-field-cont.select-field {
    margin-bottom: 45px
}

.phone-number {
    display: block
}

input[type=number].ph-ext {
    float: left;
    width: 141px;
    height: 45px
}

input[type=text].ph-ext {
    float: left;
    width: 119px
}

input[type=number].ph-main {
    float: left;
    width: 235px;
    margin: 0 2px;
    height: 45px
}

input[type=number]#accountnumber {
    height: 45px
}

@media (max-width:1199px) {
    .form-field-cont .phone-number input {
        margin-bottom: 15px;
        width: 100%
    }

        .form-field-cont .phone-number input:last-child {
            margin-bottom: 0
        }
}

.highlighted-resource .light-grey {
    background: #464646 !important
}

    .highlighted-resource .light-grey .text-component .pdf-size,
    .highlighted-resource .light-grey .text-component .title {
        color: #fff
    }

.field-cont .ui-checkbox {
    display: inline
}

    .field-cont .ui-checkbox .chkBx-duron-forms {
        width: 40px
    }

.duronChallenge-banner .content-feature h2 {
    font-size: 23px
}

.hero-banner-main-nocaption .herobanner-caption {
    padding: 0
}

h1.hdn {
    display: none
}

.news-text ul li:before {
    background: #000;
}

ul.sublistcircle li:before {
    background: #fff;
}

ul.sublist li:before {
    background: #fff !important;
}

.infogrphicimg {
    margin-bottom: 20px;
}

.linked-in-btn {
    float: right;
    width: 24px;
    height: 24px;
    margin-left: 15px;
    margin-top: -4px;
}

@media (max-width: 768px) {
    .linked-in-btn {
        display: none;
    }

    .product-grades-accordion .panel-default > .panel-heading .panel-title-details {
        padding: 11px 20px 11px 30px;
    }

    .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li {
        padding-right: 15px;
    }

    .panel-title-details .dropbtn {
        width: 150px !important;
    }
}

@media (max-width: 1279px) and (min-width: 1024px) {
    .main-navigation > .navbar-nav > li {
        padding-left: 30px;
    }
}

@media (min-width: 1200px) {
    .footer-info-nav ul p:first-child {
        float: left;
        position: absolute;
        left: 12px;
    }
}

@media (min-width: 1366px) {
    .footer-info-nav ul p:first-child {
        float: left;
        position: absolute;
        left: 25px;
    }
}

/*FdB: Initial SDS DropDown - @DMMS FED - Style this please! Unsure if conflicting with existing CSS classes for common elements, e.g. DropDown*/
/* Dropdown Button */
.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

    /* Dropdown button on hover & focus */
    .dropbtn:hover, .dropbtn:focus {
        background-color: #2980B9;
    }

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 4;
}

    /* Links inside the dropdown */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        /* Change color of dropdown links on hover */
        .dropdown-content a:hover {
            background-color: #ddd
        }

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
    display: block;
}

/*FdB: Initial SDS DropDown - @DMMS FED - Style this please! Unsure if conflicting with existing CSS classes for common elements, e.g. DropDown*/

/*DMMS Alignment fix for SDS DropDown*/

.resource-center-filter-item .dropbtn {
    background-color: #d10f1f;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width: 210px;
}


.resource-center-filter-item .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    width: 209px;
    height: 130px;
    overflow-y: scroll;
}

.dropdown-content.show a {
    color: black !important;
    padding: 4px 16px !important;
    text-decoration: none !important;
    display: block !important;
    background: none !important;
    text-align: left !important;
}

.panel-title-details .dropbtn {
    width: 100%;
    margin-top: -10px;
    background: url(../images/pdf-icon.png) right center no-repeat;
    background-color: transparent;
    text-align: left;
}

.dropdown-sds{
    width: 70px;
    padding-left: 10px;
}

.resource-center-filter-item button.dropbtn:after {
    content: ' PDF...';
    font-weight: bold;
}

.product-grades-accordion .dropdown-content {
    height: auto;
    max-height: 165px;
    overflow-y: scroll;
}

li .dropdown {
    position: inherit;
    display: inline-block;
}

.product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li a:hover {
    background-color: #3979e2 !important;
}

.resource-center-filter-item .dropdown-content a:hover {
    background-color: #3979e2 !important;
}

.print-only-image {
    display: none;
}

@media screen and (max-width: 1024px) {
    .product-grades-accordion .dropdown-content {
        position: absolute;
        z-index: 10;
    }

    .product-grades-accordion .dropdown-sds .dropdown-content {
        right: 0;
    }
}

@media screen and (min-width: 992px) {
    .top-bottom-20 {
        padding-top: 20px;
        padding-bottom: 15px
    }
    .top-bottom-30 {
        padding-bottom: 30px
    }
}

@media (min-width: 376px) and (max-width: 767px){
    #Lubes360Image img{
       margin-right: -25px
    }
}
@media (max-width: 376px){
     #Lubes360Image img{
       margin-right: -150px
    }   
} 

@media (max-width: 350px){
    #Lubes360Image img{
        margin-right: -150px
    } 

    .product-grades-accordion .panel-default > .panel-heading .panel-title-details ul li {
         padding-right: 0px;
     }
} 
#inforgraphics-btn{
    bottom: 20px !important;
}

@media (min-width: 992px) and (max-width: 1265px){
    #popup-modal-message .popuptext p {
        font-size: 13px;
    }
}


.popup-modal-message{
position:fixed;
bottom:10%;
text-align:center;
transform:translate(-20%,0%) scale(0);
color:white;
background-color:#484848;
width:100%;
padding:20px 10%;
z-index:2147483647;
}
.popup-modal-message.active{
transform:translate(0%,0%) scale(1);
}
.popup-modal-message.active .page-header{
z-index:1121;
}
#popup-modal-overlay{
position:fixed;
opacity:0;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgba(0,0,0,0.5);
pointer-events:none;
z-index:2147483646;
}

#popup-modal-overlay.active{
pointer-events:all;
opacity:1;
}

.hover-underline:hover {
    text-decoration: underline !important
}

    /*End*/