@charset "UTF-8";

/* CSS Document */



/* RESPONSIVE ADDITIONS TO BASIC.CSS */





/* Universal responsive elements */



/* Not universally supported, but this is an alternative to the viewport meta tag */

@viewport {

    zoom: 1.0;

    width: extend-to-zoom;

}



/* And the version for IE10 */

@-ms-viewport {

    width: extend-to-zoom;

    zoom: 1.0;

}





html,
body {

    width: 100%;

    height: auto;

    margin: 0px;

    padding: 0px;

    overflow-x: hidden;

}





#hp-banner {

    background-size: cover;

}



#hp-banner img {

    max-width: 100%;

    height: auto;

}



.content img {

    max-width: 100%;

    height: auto;

    margin: 15px auto;

}



/* To get words to wrap properly on product pages etc. */

.content p,
.content h1 {

    /*margin-left:20px;*/

    margin-right: 10px;

}



.homepage-new .content p,
.homepage-new .content h1 {

    margin-left: 20px;

    margin-right: 10px;

}



.homepage-new>.content {

    position: relative;

    top: -30px;

}



#footer {

    position: relative;

    top: -40px;

}



/* Attempt to get li to wrap words correctly as well, but this is not working. */

.content ul,
.content ul li {

    margin-right: 10px;

}



ul.list-menus li {

    display: inline-block;

}



.ourHolder.list-menus {

    max-width: 100%;

}



#header {

    width: 960px;

    max-width: 100%;

    /*margin-left:8px;*/

}



#tagline {

    margin: 30px 0 0 50px;

}



/* Copy of #tagline, for the version which is used on smallest screens */

#tagline-sm {

    max-width: 90%;

    margin: 30px 0 0 80px;
    float: left;
    color: #000;
    font-size: 1.25em;
    font-weight: bold;
    line-height: 1.5;

}



#google_translate_element {

    position: absolute;

    top: 15px;

    right: 10px;

}



/* An attempt to get the product-list items to display properly, but it doesn't seem to work while the li are floated left */

.col-full,
ul.list-menus {

    margin: 0 auto;

    float: none;

    max-width: 100%;

    width: 960px;

}



/* To fix the issue with inline styles on the individual product pages, where heights for the two UL elements seem to be set by jQuery.  The element.style height attribute is set differently from time to time between several values, and if the value is less than the length of the content then the content overlaps with the footer. This prevents that. */

.ourHolder,
.ourHolder2 {

    height: auto !important;

}



.bx-viewport .bxslider2 li {

    max-width: 100%;

}



#contactform {

    max-width: 100%;

}



#contactform label {

    max-width: 37.2%;

}



#contactform input {

    max-width: 39.3%
}



#contactform textarea {

    max-width: 97%;

}



fieldset {

    min-width: initial;

}



/* Down arrow for Sidr.  Only displays on small screens. */

.sidr ul li span.arrow-down-sm {

    width: 0;

    height: 0;

    display: inline-block;

    float: right;

    position: relative;

    top: 22px;

    right: 10px;

    border-left: 5px solid transparent;

    border-right: 5px solid transparent;

    border-top: 7px solid #fff;

    border-bottom: 0px solid transparent;

    padding: 0px;

}



#mb-navigation.main-navigation ul {

    display: none;

}



/* To fix appearance of the top headings in .col-right on the Contact page. */

#contactoptions a {

    padding: 10px 40px 3px 40px;

}



/* Add space between .col3 images */

.col3 h2 {

    margin-top: 15px !important;

}



/* Formerly inline styles, for use at desktop screen sizes. */

.index-products-header {

    width: 100%;
    background-color: #07263a;
    margin-top: 80px;

}



/* Fix how the lists are displaying when they stack on mobile. */

#bannerleft ul {

    height: auto;

}



/* Fix how the PDF titles display when they're too long for the screen. */

.ourHolder2 span,
.ourHolder3 span {

    min-height: 30px;

    height: auto;

}



/* Fixes text in the visual product lists  */

.list-menus span {

    height: auto;

    padding: 10px 1px;

}







/* Center the product listings. */

ul.list-menus,
ul.library-list {

    display: block;
    /* Fallback */

    display: -webkit-box !important;
    /* OLD - iOS 6-, Safari 3.1-6, BB7 */

    display: -ms-flexbox !important;
    /* TWEENER - IE 10 */

    display: -webkit-flex !important;
    /* NEW - Safari 6.1+. iOS 7.1+, BB10 */

    display: flex !important;
    /* NEW, Spec - Firefox, Chrome, Opera */

    -webkit-flex-wrap: wrap;
    /* Safari 6.1+ */

    flex-wrap: wrap;

    /*justify-content:center;*/

}

/*ul.list-menus li:first-child, ul.library-list li:first-child {

        margin-top:20px;

    }*/

ul.list-menus li,
ul.library-list li {

    flex: 0 0 auto;
    /* The <li> do not resize.*/

    -webkit-flex-wrap: wrap;
    /* Safari 6.1+ */

    flex-wrap: wrap;

    float: none;

    /*margin:0 auto;*/

    margin: 0 1px;

}



.blue {

    color: #0071ac;

    border-bottom: none;

    margin-top: 30px;

}



.table-striped {

    border: 1px solid black;

    margin: 10px 10px 10px 25px;

}



.table-striped tr {

    background-color: #eaf2f6;

}



.table-striped tr:nth-child(even) {

    background-color: white;

}



.table-striped td {

    padding: 5px 15px;

}



.indent {

    margin-left: 30px;

}



.img-full-width {

    width: 100%;

    display: block;

}



.border-left {

    border-right: 2px solid #c8c9cb;

}



.full-width,
p.full-width,
.content p.full-width {

    width: 100%;

}





/* Two column subnav */



.two-columns-holder {

    width: 300px;
    /*270px*/

}



.two-columns {

    display: inline-block;

    width: 49%;

}



.two-columns+.two-columns {

    border-left: dotted 1px #dce0ed;

}



ul#main-navigation li ul.subnav.two-columns-holder li a {

    width: 88%;

    padding: 5px 10px;

}



#mb-navigation.main-navigation ul ul {

    display: block;

}







/* Marine Pressure Sets page */



.content .list.list-left,
.content .list.list-right {

    max-width: 40%;

    float: left;

}



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

    .content .list.list-left,
    .content .list.list-right {

        max-width: 90%;

        float: none;

    }

}



.list-right:after {

    content: "";

    display: table;

    clear: both;

}



/* END Marine Pressure Sets page */





/* New homepage design */

.content .list.list-horizontal {

    width: 90%;

}



.list-horizontal li {

    display: inline-block;

}



.content p.full {

    width: 100%;

}



@media screen and (min-width: 767px) {

    .col3-min-height {

        min-height: 480px;

    }

}



.bg-grey {

    background-color: #eceef0;

    padding-top: 15px;

    padding-bottom: 15px;

}



.bg-grey .content {

    background-color: #eceef0;

    margin-bottom: 10px;

}



.bg-grey h1,
.bg-grey a:link,
.bg-grey a:visited,
.bg-grey a:hover,
.bg-grey a:active {

    color: #138dcd;

}



.bg-grey a {

    font-weight: bold;

    font-style: italic;

}



.blue {

    color: #138dcd;

    font-weight: bold;

}



.col2-3rds h2.h2-rect-bullets:before,
.col3 h2.h2-rect-bullets:before,
.col-full-width h2.h2-rect-bullets:before {

    content: "\00a0";

    position: absolute;

    left: -25px;

    top: 0px;

    background-color: #0979bf;

    width: 10px;

    border: 5px solid #0979bf;

    display: inline-block;

}



.col2-3rds h2.h2-rect-bullets,
.col3 h2.h2-rect-bullets,
.col-full-width h2.h2-rect-bullets {

    margin-left: 20px;

    position: relative;

    font-size: 1.1em;

    margin-top: 15px !important;

    margin-bottom: 11px;

    color: #fff;

    text-decoration: none;

    background-color: #07263a;

    padding: 5px 10px;

    max-width: 100%;

}



h2.h2-rect-bullets a {

    color: white;

    text-decoration: none;

}



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

    .col3 h2.h2-rect-bullets,
    .col2-3 h2.h2-rect-bullets,
    h2.h2-rect-bullets {

        margin-left: auto;

        margin-right: auto;

        margin: auto;

        width: 90%;

        float: none;

    }

}



.below-logo {

    margin-top: -40px !important;

    margin-bottom: 10px;

}



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

    .below-logo {

        margin-top: -20px !important;

    }

}



.col2-3rds {

    display: inline-block;

    width: 632px;

    max-width: 100%;

    position: relative;

    /*top: -240px;*/

    float: left;
    /* to match the .col3 */

}



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

    .homepage-new .col3 h1 {

        margin-left: -10px;

    }

}



.col-full-width {

    width: 100%;

}



.col-2-of-3 {

    float: left;

    width: 66%;

}



.col-1-of-3 {

    float: left;

    width: 33%;

}



.col-2-of-3 p {

    /*padding-right: 30px;*/

    box-sizing: border-box;

}



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

    .col-2-of-3 {

        width: 100% !important;

        float: none;

    }



    .col-2-of-3 p {

        width: 100% !important;

        float: none;

    }



    .col-1-of-3 {

        width: 100% !important;

        float: none;

    }



    .col-1-of-3 img {

        display: block;

        float: none;

    }

}



.col3:first-child,
.col3:first-child+.col3,
.col3:first-child+.col3+.col3 {

    /*min-height:480px;*/

}





.hr-col3-3 {

    background-color: #000;

    height: 2px;

    padding-left: 15px;

    position: relative;

    top: 37px;

}



.vr {

    height: 90%;

    min-height: 428px;

    margin-top: 15px;

    width: 2px;

    background-color: #000;

    float: left;

    position: relative;

    left: 12px;

}



.content .content {

    position: relative;

    top: -36px;

}



.content .col-full-width {

    position: relative;

    top: -30px;

}



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

    .vr,
    .hr-col3-3 {

        display: none;

    }

}



.list-menus.one-fifth li {

    width: 19.5%;

}



.learn-more,
.col3 img.learn-more {

    display: inline;
    /*inline-block;*/

    width: 8px;

    max-width: 8px;

    position: relative;

    top: 3px;

    left: 3px;

    margin: 0 35px 0px 0 !important;

}



.right {

    float: right;

    margin-left: 10px;

    clear: right;

    margin-bottom: 10px;

}



.slider-pro {

    opacity: 0;

    transition: opacity 1s;

}



.slider-pro area,
.slider-pro .sp-grab area,
.slider-pro *[href],
area {

    cursor: pointer !important;

    display: block !important;

}



.slider-pro .sp-thumbnail-container,
.slider-pro .sp-thumbnail-container *,
.slider-pro .sp-arrow {

    cursor: pointer !important;

}



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

    .hide-on-small {

        display: none;

    }



}



.sp-arrow {

    width: 30px !important;

    height: 70px !important;

}



#my-slider {

    opacity: 0;

    transition: opacity .4s;

}



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

    #my-slider {

        opacity: 1;

    }

}



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

    .col3,
    .col2-3rds,
    .col-full-width,
        {

        padding-left: 0;

        padding-right: 0;

        margin-left: auto;

        margin-right: auto;

        width: 100%;

    }



    .h2-rect-bullets,
    .col3 .h2-rect-bullets,
    .col2-3rds .h2-rect-bullets,
    .col-full-width h2.h2-rect-bullets {

        width: 150% !important;

        /*margin-left: 32px !important;*/

        margin-left: 0 !important;

        margin-right: 0 !important;

        padding-left: 0 !important;

        padding-right: 0 !important;

        text-align: center;

    }



    h2.h2-rect-bullets:before {

        content: none !important;

        display: none !important;

    }



    .homepage-new {

        margin: 0 auto;

    }



    .homepage-new .list-menus {

        margin-left: 16px;
        /*32px;*/

    }





}



.news-desktop {

    display: block;

}



.news-mobile {

    display: none;

}



.news-mobile p,
.news-mobile img {

    display: block;

    margin-left: auto;

    margin-right: auto;

}



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

    .news-desktop {

        display: none;

    }



    .news-mobile {

        display: block;

    }

}



/* END new homepage design */









/* To get the footer images to stack correctly on smaller screens */

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



    #footer div.container {

        margin: 20px;

    }



    #footer-address {

        border-right: none;

        border-bottom: solid 1px #ececec;

        height: auto;

        float: none;

    }



    ul#footer-navigation,
    ul#footer-info {

        margin-top: 30px;

        height: 220px;

        float: none;

    }



    /*#footer-images {

        position:relative;

        top:8em;

    }*/



    .col-left-product img.right {

        float: none;

        height: auto;

        margin: 0 auto;

        display: block;

    }



}







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



    /* For the logo and tagline on the smallest screens */

    #tagline {

        display: none;

    }



    #logo {

        float: none;

    }



    /* But the tagline behaves differently on Marketing Library pages */

    #tagline#tagline-mk {

        display: visible;

    }



    #tagline-sm {

        display: visible;

        text-align: center;

    }



    #header {

        height: 208px;
        /* Older browsers */

        height: calc(133px + 3em);
        /*calc(160px + 3em);*/

        background-image: none;

    }



    /* To keep the Megator and Pumps2000America logos from stacking strangely, and having them float to either side when they're stacked.' */

    img[style*="float"] {

        margin: 0 auto !important;

        display: block;

        float: none !important;

    }



    img#logo {

        margin-top: 30px;

        max-width: 90%;
        /* Older browsers */

        width: initial;

        height: auto;

        margin: auto;



    }



    #tagline-sm {

        margin: 20px 5% 0 5%;

    }



    /* For the images in the footer on the smallest screens */

    /*#footer-navigation img.right::before {

        clear:both;

        content:" ";

    }



    #footer-navigation img.right {

        display:block;

        float:none;

    }

    #footer-navigation img.right + img.right {

        display:block;

        float:right;

    }*/



}



/* For smallest screens */

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



    /* On the smallest screens, the header displays differently */

    #header {

        height: auto;
        /* Older browsers */

        /* height: 160px; */
        /*calc(160px + 4em);*/

    }



    img#logo {

        max-width: 90%;

        float: none;

        margin: auto;

    }



    .list-menus.one-fifth li {

        width: 30%;

    }



    /*#google_translate_element {

        position:relative;

        float:none!important;

        display:block;

        top:10px;

        left:10px;

    }*/



    /*div#mb-menu-toggle-container {

        position:relative;

        float:right;

        display:block;

        top:-20px;

        right:10px;

    }*/



    #tagline-sm {

        float: none;

        display: block;

        position: relative;

        top: -40px;

        width: 100%;

    }





    /* On smallest screens, keeps the tagline out of the way of the logo if need be */

    #tagline-sm {

        margin: 30px auto 0 auto;

    }



    /* Size up the background image so it covers the whole textbox and image on smaller / narrower screen sizes. */

    #hp-banner {

        background-size: cover;

    }



    ul#footer-navigation,
    ul#footer-info {

        height: 330px;

    }



    ul#footer-navigation li {

        float: none;

        font-size: 1.25em;

    }



    #footer-images img {

        max-width: 95%;
        /* Older browsers */

        max-width: calc(100% - 40px);

        height: auto;

        margin-right: 20px
    }



    .col-right .contactbox {

        float: none;

        margin-left: 0;

        max-width: 334px;

        margin: auto;

    }



    .col-right {

        width: 90% !important;

        max-width: 90% !important;

    }



    /* Keeps the product headers from staying too wide on small screens */

    .col-right-product h3,
    .col-right-product ul {

        max-width: 100%;

    }



}







/* For phones and smaller tablet screens */

/* 806px was the breakpoint I used for pumps2000america.com */

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



    #hp-banner {

        /*height:100%;*/

    }



    #hp-banner img {

        margin: auto;

    }



    #bannerleft,
    #bannerright {

        width: 100%;

        max-width: 100%;

        float: none;

        display: inline-block;

    }



    #bannerleft {

        /*padding-right:10px;*/

        text-align: justify;

        vertical-align: top;

        overflow: visible;

        height: initial;

        width: 90%;
        /* Older browsers */

        width: calc(100% - 30px);

    }



    #bannerright {

        height: auto;

    }



    .col3,
    .col2-3rds {

        width: 100%;

        display: inline-block;

        margin-left: 0;

    }



    /*.col3 img {

        display:block;

        width:50%;

        margin:auto;

    }*/



    .col3 img,
    .col3 iframe {

        display: block;

        width: 70%;

        margin: auto;

    }



    .col3 p,
    .col3 h1,
    .col3 h2,
    .col3 h3 {

        width: 90%;

        margin: auto;

    }



    ul#footer-navigation+img,
    ul#footer-navigation+img+img {

        clear: left;

        margin: auto;

        float: none;

    }



    #footer>container>img::before {

        clear: both;

    }



    #footer>container>img {

        margin: auto;

        float: none;

        display: block;

        bottom: 0px;

    }



    #footer-images::before {

        clear: both;

    }



    #footer-images {

        display: block;

        margin-top: 10px;

    }



    #footer-images img {

        float: none;

    }



    .col-left {

        float: none;

        width: 500px;

        margin: auto;

        max-width: 90%;

    }



    .col-right {

        float: none;

        width: 400px;

        margin: auto;

        max-width: 70%;

    }



    .col-left-product {

        float: none;

        max-width: 90%;

        margin: auto;

    }



    .col-left-product::after {

        clear: both;

        overflow: auto;

    }



    .col-right-product {

        float: none;

        max-width: 90%;

        margin: auto;

    }



    #footer-address {

        margin-left: 20px;

    }



    /* Move the footer images in line with rest of footer on screens where images will stack */

    #footer-images img {

        margin-left: 20px
    }



    #filterOptions {

        margin: 0 auto;

        float: none !important;

    }



    #filterOptions li.padding {

        margin-top: 11px;

        margin-bottom: 11px;

    }





    /* To get the menu to display vertically and centered. */

    .ourHolder.list-menus {

        margin: 0 auto;

        float: none !important;

    }



    /* Prevent the image in the #bannerright from running into the #bannerleft */

    #bannerleft {

        margin-bottom: 15px;

    }



    .index-products-header {

        margin-top: initial;

    }



    #list-menus-industry {

        width: 670px !important;

        max-width: 100%;

    }



    #tradeshow,
    #tradeshow-text {

        left: 30px;

        /*top:42px;*/

        /*top: 37px;*/

        height: 100px;

    }

    #tradeshow-text-2,
    #tradeshow-text-header {
        font-size: 11px;
    }

    #tradeshow-text-header {
        left: -116px;
    }



}


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

    #tradeshow,
    #tradeshow-text,
    #tradeshow-text-header {

        /* display: none !important; */

    }

}


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



    .col3 img,
    .col3 iframe {

        display: block;

        width: 50%;

        margin: auto;

    }



    .col2-3rds {

        width: 100%;

    }



    .col3 p,
    .col3 h1,
    .col3 h2,
    .col3 h3,
    .col2-3rds h2 {

        width: 70%;

        margin: auto;

        margin-left: auto !important;

        margin-right: auto !important;

    }



    #tagline {

        display: visible;

    }



    #tagline-sm {

        display: none;

    }



    .arrow-down-sm {

        display: none;

    }



    #tradeshow-mb {

        display: none;

    }



}





/* Small devices (tablets, 768px and up) */

/* Should this be 783px to make the hp-banner work better, or 768px to be more standard? */

@media screen and (min-width: 980px) {



    .arrow-down-sm {

        display: none;

    }



    #hp-banner {

        position: relative;

        width: 100%;

        height: 275px;

        padding-bottom: 10px;

    }



    /* May be worth double-checking that this doesn't break anything */

    #hp-banner .container {

        height: 100%;

    }







    #bannerleft,
    #bannerright {

        box-sizing: border-box;

        display: inline-block;

    }



    #bannerleft {

        position: relative;

        height: 95%;
        /* Older browsers */

        height: calc(100% - 22px);

        margin-bottom: 25px;

        /*width:50%;*/

        /*padding:10px;*/

        width: 45%;
        /* Older browsers */

        width: calc(100% - 446px);

        float: left;



    }



    #bannerright {

        /*width:calc(100%/3);*/

        /*background-image: url("slide5.png");*/

        /*content:"";*/

        margins: 0px;

        display: block;

        position: relative;

        /*width:50%;*/

        /*height:100%;*/

        height: 100%;

        width: 436px;

        overflow: hidden;

        float: right;



    }





    .col3 {

        min-width: 295px;

        max-width: 30%;
        /* Older browsers */

        max-width: calc(100% / 3 - 32px);

        box-sizing: border-box;



    }



    #tradeshow-mb {

        display: none;

    }



    /*#bannerleft {

        height:100%;

        width:calc(100% - 436px);

    }



    #bannerright {

        height:100%;

        width:436px;

        overflow:hidden;

    }*/



    #tagline {

        display: visible;

    }



    #tagline-sm {

        display: none;

    }



    .footer-images-clear {

        clear: none;

    }



    #footer-images {

        display: inline;

    }



    .sidr-close {

        display: none;

    }



}





/* For col3, when they get beyond a certain screen size they lose margin:auto */

@media screen and (min-width:949px) {



    .col3 {

        margin-left: 20px;

    }



}





/* Mobile navigation, based on #nav-container */

#sidr {
    /*display:block;width:100%;height:54px;*/
    background: #0167a5;
    /*margin:0 auto;*/
}

#mb-navigation {
    /*display:block;width:960px;margin:0 auto;*/
    list-style: none;
    font: normal 1em Helvetica, Arial, sans-serif;
}

/*#mb-navigation li.mainnavli {float:left;position:relative;display:block;}*/

#mb-navigation li.distlogin {
    /*float:right;*/
}

#mb-navigation li a.mainnav {
    /*display:block;*/
    text-decoration: none;
    color: #fff;
    /*height:38px;*/
    padding: 16px 18px 0;
}

#mb-navigation li.distlogin a {
    background-color: #005282;
    /*display:block;*/
    text-decoration: none;
    color: #fff;
    height: 28px;
    padding: 12px 18px 0;
    margin-top: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
}

#mb-navigation li a.mainnav:hover,
#sidr li a.nactive {
    background-color: #0d8cdb;
}

#nav-toggle {
    display: none;
}



/*DROPDOWN*/

ul#mb-navigation li ul.subnav {
    list-style: none;
    /*position:absolute;left:0;*/
    background: #f2f5ff;
    /*margin:0 0 10px 0;*/
    padding: 0;
    /*display:none;float:left;*/
    text-transform: none;
    z-index: 300;
    /*top:55px;*/
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
}

ul#mb-navigation li ul.subnav li {
    /*margin:0;clear:both;*/
    font: .9em Helvetica, Arial, sans-serif;
}

ul#mb-navigation li ul.subnav li a {
    /*float:left;width:270px;height:22px;*/
    padding: 10px 0 10px 10px;
    text-decoration: none;
    color: #333;
    border-bottom: dotted 1px #dce0ed;
}

ul#mb-navigation li ul.subnav li a:hover {
    color: #333;
    border: 0;
    background-color: #bfe1f2;
    border-bottom: dotted 1px #dce0ed;
}



/* Only show Sidr on mobile */

#mb-menu-toggle {

    display: none;

}

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

    #mb-menu-toggle {

        display: block;

    }

    #main-navigation {

        display: none;

    }



    #nav-container {

        display: none;

    }



    /* The Sidr close button */

    .sidr-close {

        position: fixed;

        right: 15%;

        top: 0%;

        width: 70px;

        height: 70px;

        border: 5px solid #201c1d;

        border-radius: 15%;

        color: #201c1d;

        background-color: #fff;

        /*content:"X";*/

        font-size: 4em;

        position: absolute;

        top: 45px;

        right: 16px;

        display: -webkit-box;
        /* OLD - iOS 6-, Safari 3.1-6, BB7 */

        display: -ms-flexbox;
        /* TWEENER - IE 10 */

        display: -webkit-flex;
        /* NEW - Safari 6.1+. iOS 7.1+, BB10 */

        display: flex;
        /* NEW, Spec - Firefox, Chrome, Opera */

        align-items: center;

        justify-content: center;

        -webkit-transition-duration: .2s;
        /* Safari */

        transition-duration: .2s;

    }



    /* A "Bootstrap hamburger"-style icon to slide out the mobile menu */

    #mb-menu-toggle-container {

        /*position:absolute;

        top:45px;

        right: 16px;*/

        display: block;

        width: 100%;

        height: 15px;

        padding: 15px 20px 25px 0px;

        /*border:5px solid #201c1d;

        border-radius:15%;*/

        -webkit-transition-duration: .2s;
        /* Safari */

        transition-duration: .2s;

        background-color: #0167a5;

    }

    .mb-menu-bar {

        width: 30px;

        height: 3px;

        margin: 5px 5px 5px 20px;

        background-color: #fff;

        display: block;

        border-radius: 15%;

        -webkit-transition-duration: .2s;
        /* Safari */

        transition-duration: .2s;

    }

    /*#mb-menu-toggle-container:first-child {

        margin-top:10px;

    }*/

    #mb-menu-toggle-container:hover,
    .sidr-close:hover {

        /*background-color:#0167a5;

        border-color:#4f97bd;*/

        background-color: #888;

        border-color: #fff;

        color: #fff;

    }

    #mb-menu-toggle-container:hover .mb-menu-bar {

        /*background-color:#4f97bd;*/

        background-color: #fff;

    }



    /* Make tables scrollable. */

    table {

        overflow-x: auto;

    }

    table:after {

        font-style: italic;

        font-size: 1.25em;

        font-weight: bold;

        content: "Swipe or scroll to see the rest of the table.";

    }

}



/* Ensures the email field and button in the main-navigation looks okay on screen widths smaller than 960px */

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

    #main-navigation {

        width: 100%;

    }

    .distlogin {

        max-width: 240px;

    }

}







.content p,
.content .list {

    max-width: 100%;

}



.homepage-new .content p,
.homepage-new .content .list {

    max-width: 90%;

}



/* To keep the Megator and Pumps2000America logos which often appear in e.g. .col-right and .col-left from sizing to 100% unnecessarily. */

img[style*="float"] {

    width: initial;

    height: auto;

    max-width: 100%;

    max-height: auto;

}





/* Oil Dispersant page */



ul.list-blue-arrows {

    list-style-type: none;

    margin: 15px 0;

    font-size: .875em;

}



ul.list-blue-arrows li:before {

    content: "\003e";

    display: inline-block;

    color: #0e76bc;

    font-weight: bold;

    margin-right: 7px;

}



.blue {

    color: #0e76bc;

}



.oil-dispersant-header {

    width: 49%;

    max-width: 49%;

    display: inline-block;

    box-sizing: border-box;

    margin: 5px 0;

}



.oil-dispersant-header img {

    display: block;

    width: 95%;

    max-width: 100%;

    margin: 0;

}



.content .row~p,
.content .row~table,
.content .row~ul,
.content .row~img,
.content .row~a img,
.content .row~h3.blue,
.content .row~a {

    position: relative;

    top: -15px;

}



.content .big-text {

    font-size: 1.2em;

    margin-right: 0;

    margin: 0;

    position: relative;

    top: -72px;

}



.table-oil-dispersant {

    width: 100%;

    margin: 30px 0;

}



.table-oil-dispersant,
.table-oil-dispersant th,
td {

    border: 2px solid black;

    text-align: center;

    vertical-align: middle;

}



.table-oil-dispersant tr:first-child {

    background-color: #0e76bc;

    color: white;

}



.table-oil-dispersant tr:nth-child(2),
.table-oil-dispersant tr:nth-child(3) {

    color: #0e76bc;

}



.table-oil-dispersant tr:nth-child(4),
.table-oil-dispersant tr:nth-child(6) {

    background-color: #e7e7e8;

}



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

    .content .big-text {

        font-size: .875em;

        position: static;

    }



    .oil-dispersant-header {

        max-width: 100%;

        width: 100%;

    }



    .oil-dispersant-header img {

        margin: 0 auto;

    }

}







#news-tradeshow-slider img {

    margin: auto;

}



#news-tradeshow-slider .sp-layer {

    bottom: -95px;

    top: auto !important;

    height: 90px;

    width: 100%;

    max-width: 100%;

    padding: 0;
    /*0 calc(50% - 185px);  370px / 2 */

}



#news-tradeshow-slider .sp-layer strong {

    display: block;

    position: relative;

    top: 0;



}



#news-tradeshow-slider .sp-layer [href] {

    display: inline !important;

}



#news-tradeshow-slider {

    opacity: 1;

}



/*.front-page-redesign h2.h2-rect-bullets,*/
h2.h2-rect-bullets-inner {

    margin-left: 20px;

    position: relative;

    font-size: 1.1em;

    margin-top: 15px !important;

    margin-bottom: 11px;

    color: #fff;

    text-decoration: none;

    background-color: #07263a;

    padding: 5px 10px;

    max-width: 100%;

}

/*.front-page-redesign h2.h2-rect-bullets:before,*/
h2.h2-rect-bullets-inner:before {

    content: "\00a0";

    position: absolute;

    left: -35px;
    /*-25px*/

    top: 0px;

    background-color: #0979bf;

    width: 20px;

    border: 5px solid #0979bf;

    display: inline-block;

}



img {
    -ms-interpolation-mode: bicubic;
}



@media screen and (max-width: 480px) {
    .content.content-product-pages {
        display: flex;
        flex-direction: column-reverse;
    }
}

.sp-image {
    width: 100% !important;
    height: auto !important;
}








/* #tradeshow-mb-container {
    display: flex;
}



#tradeshow-mb {
    max-width: 70%;
    height: auto;
    margin: 20px 15%;
    margin: 0 auto;
    flex: 0 0 auto;
}

#tradeshow,
#tradeshow-text {
    float: left;
    height: 116px;
    /*140px;*/
/* width: auto;
    position: relative;
    left: 60px; */
/*20px;*/
/* top: 7px; */
/*24px;*/
/* } */

/* #tradeshow-text-header {
    position: relative;
    top: 81px;
    left: -91px;
} */

/* #tradeshow-text-2 {
    display: block;
} */



#tradeshow-mb-container {
    display: flex;
}

#tradeshow-mb {
    max-width: 70%;
    height: auto;
    margin: 20px 15%;
    margin: 0 auto;
    flex: 0 0 auto;
}


#tradeshow,
#tradeshow-text {
    /* float:left; */
    height: 82px;
    /*116px;*/
    /*140px;*/
    width: auto;
}

#tradeshow-wrapper {
    display: inline-block;
    position: relative;
    left: 120px;
    /*20px;*/
    top: 25px;
    /*24px;*/
}

#tradeshow-text {
    max-width: 165px;
    margin-top: 0;
}

#tradeshow-text-2 {
    display: block;
}

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

    #tradeshow, #tradeshow-wrapper {
        left: unset!important;
        top: unset!important;
        margin-left: 45px;
    }

}