/* Mobile Navigation icon */
.navbar-toggle {
   margin: 0;
   margin-top: 20px;
   margin-right: 15px;
   padding: 2px;
   width: 24px;
   height: 22px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: 2px 0;
}
.navbar-toggle .icon-bar {
   display: block;
   background-color: #000;
   width: 22px;
   height: 3px;
   border-radius: 1px;
}
/* Mobile Navigation icon - END */


   /* ipad fix */
   @media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
      /* bag-in-box & products Page */
      .b-container { width: 49%; }
      /* Footer Bootstrap .col width adjustments */
      .footer-links div:nth-child(1) { margin-right: 1.8%; }
      .footer-links div:nth-child(2) { margin-right: 1.2%; }
      #footer-header img { width: 28px; height: 28px; margin-right: 6px !important; }
   }
   @media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
      /* bag-in-box & products Page */
      .b-container { width: 49%; }
      /* Footer Bootstrap .col width adjustments */
      .footer-links div:nth-child(1) { margin-right: 1.0%; }
      .footer-links div:nth-child(2) { margin-right: 2.0%; }
      .footer-links div:nth-child(5) { margin-right: 4.3%; }
   }
   /* ipad fix - End */

@media (max-width: 1200px) {
   .button-group .block-button-dark-blue, .button-group .block-button-light-blue, .button-group .block-button-yellow {
      display: inline-block;
      margin-right: 25%;
      margin-left: 0 !important;
      margin-top: 10px !important;
      margin-bottom: 10px;
   }
   .button-group hr { margin-top: 40px; }
   .block-button-light-blue { margin-left: 0 !important; }
   .block-button-dark-blue, .block-button-light-blue { margin-top: 10px; margin-bottom: 10px; }

   /*navigation*/
   #navbar { padding: 0; }
   .navigation li a { padding-left: 0.25em; padding-right: 0.25em; }
}

@media (min-width: 992px) and (max-width: 1200px){
   /* Text Overlay & image with <a> tag Link */
   .text-overlays .col-md-2 .text-overlays-box { font-size: 0.68em; } /* INDUSTRIAL CHEMICALS Length */
}

@media (max-width: 1024px) {
   .block-background-parallax { background-attachment: scroll; }
}

@media (max-width: 992px) {

   .header img:first-child { max-width: 80px !important; }
   .header .text-bottom { font-size: 0.8em; }
   .text-bottom, .header .search-box { top:0; bottom: auto; }

   .top-col .b-title { margin-bottom: 20px; }


   /* Navigation */
   #nav-bar { font-size: 13px; }


   /* Side Panel left */
   .side-panel ul#side-nav li { font-size: 1em; }

   /* Products Page */
   .b-container a:last-child { width: 50%; max-width: 220px; height: auto; margin: 12px auto; }

   /* Left Side Panel font size ( Industries Pags */
   .side-panel h1 { font-size: 1.8em; }

   /* Products Block */
   .separator-bar .pull-right { position: absolute; right: 0; top: 0; bottom: 0; margin-top: -1px; margin-bottom: -1px; }
   .separator-bar .pull-left  { position: absolute; left:  0; top: 0; bottom: 0; margin-top: -1px; margin-bottom: -1px; }
   .separator-bar .pull-right img, .separator-bar .pull-left img { position: absolute; top:50%; transform: translateY(-50%); }
   .separator-bar .pull-left + div { float: right; }


    /* Text Overlay & image with <a> tag Link */
    .text-overlays-box { font-size: 0.8em; }

   /* Testimonies */
   .testimonies .quote-wrapper .col-sm-4:last-child { display: none; }  /* stop the text from being too tall. */
   .testimonies .quote-wrapper .col-sm-4 { width: 50%; }                /* stop the text from being too tall. */
   .testimonies .quote { min-height: 0; }
   .testimonies .quote span:first-of-type { padding-top: 18px; }

   /* Footer Desktop */
   #footer-header { font-size: 1.8em; position: relative; }
   #footer-header img { height: 80%; }

   .block-button + .block-button { margin-left: 0; }
   .separator-bar .block-button:last-of-type:not(.block-button-yellow) { margin-bottom: 40px; }
}

@media (max-width: 767px) {

   .float-text { float: none; display: block; margin: 15px auto; max-width: 90%; width: 90%; line-height: 1.25em; }

   .button-group .block-button-dark-blue, .button-group .block-button-light-blue, .button-group .block-button-yellow { display: block; margin-right: 0; }
   .top-col div:nth-child(2).row div:nth-child(2).col-md-2 .img-responsive { width: 35%; }

   .top-col h2:first-of-type { font-size: 1.6em !important; }

         #nav-bar { background-color: #164974; } /* desk-top Nav bgr Color: #1e639d  |  footer bgr Color: #164974 */
         .navbar-collapse {
            margin: 0;
            padding: 0;
            overflow: hidden;
         }
         .navigation { display: block; }
         .navigation > li {
            width: 100% !important;
            padding: 0 15px !important;
            float: none !important;
            text-align: left !important;
            display: block !important;
         }
         .navigation li:nth-of-type(1) a { border: none; }
         .navigation li a {
            font-weight: normal;
            font-size: 20px;
            top: 0;
            width: 100% !important;
            line-height: 24px;
            padding: 11px 0 11px 15px !important;
            border-top: 1px solid #aaa;
            display: block !important;
         }
         .dropmenu {
            background-color: #1e639d;
            position: relative;
            min-width: 100% !important;
            min-height: 0;
            padding: 0 15px 0 40px;
            margin-left: -15px;
            margin-right: -15px !important;
            border-bottom: none;
         }
         .dropmenu ul.two-column {
            min-width: 100%;
            width: 100% !important;
            -moz-column-count: 1;
            -moz-column-gap: 10px;
            -webkit-column-count: 1;
            -webkit-column-gap: 10px;
            column-count: 1;
            column-gap: 20px;
         }
         .dropdown li, .dropdown li a {
            background-color: #1e639d !important;
            padding-left: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            border-top: none !important;
            font-size: 18px;
         }
         .dropdown li { border-bottom: 1px solid #aaa; }
         .dropdown li:last-of-type { border-bottom: none; }

         .dropdown .m-arrow {
            width: 45px;
            height: 50px;
            position: absolute;
            top: 0;
            right: 15px;
            display: inline-block;
         }
         .dropdown .m-arrow-up::after {
            margin-top: -20px !important;
            border-color: transparent transparent #fff transparent !important;
            border-width: 13px 8px 13px 8px !important;
         }
         .dropdown .m-arrow::after {
             position: absolute;
             content: " ";
             pointer-events: none;
             border-color: #fff transparent transparent transparent;
             border-image: none;
             border-style: solid;
             border-width: 13px 8px 13px 8px;
             width: 0;
             height: 0;
             top: 50%;
             margin-top: -5px;
             right: 15px;
             float: right;
             background-image: none;
         }

         /*  The .mobile-no-hover Class is to stop the css hover override fix ( android ) - Code in init.js  */
         .mobile-no-hover{ display: block !important; }

         .banner-nav { height: auto !important; min-height: 0 !important; }
         /*.banner-img-mobile { margin: auto; width: auto; }*/
         .navigation li:hover a, .navigation li a.current { background-color: #164974; }

         .navigation > li:hover div.dropmenu { display: none; }
      /*                            */
      /* Mobile Navigation  -  END  */


      /* Products Block */
   .separator-bar { padding-bottom: 30px; margin-top: 30px; }
   .separator-bar h3 { margin-top: 26px; }

   /* Text Overlay & image with <a> tag Link */
   .text-overlays-box { font-size: 0.7em; }

   /* Testimonies */
   .block-background-parallax { background-size: auto; }
   .testimonies { padding-top: 40px; }
   .testimonies .quote-wrapper { left: 15px; right: 15px;  }
   .testimonies .quote-wrapper .col-sm-4 { width: 100%; }
   .testimonies .quote-wrapper .col-xs-12 + .col-xs-12 { display: none !important; }

   /* Get A Quote Block */
   .quote-block-text { margin-left: 0; margin-top: 0; }
   .separator-bar .col-md-6.vertical-align { margin-top: 45px; }
   .separator-bar .col-md-6.vertical-align img { width: 40%; }
   .block-background-parallax .quote-block-text + .vertical-align { margin-top: 15px;  margin-bottom: 8px; }

   .block-image { width: 80%; height: auto; margin: 0 auto; }
   .separator-bar .text-center img { width: 60% !important; }
   .separator-bar .text-center a strong { margin-bottom: 35px; margin-top: -7px; display: block; }

   /* Products Block */
   .separator-bar .pull-right { position: relative; right: 0; top: 0; transform: translateY(0); }
   .separator-bar .pull-left  { position: relative; left:  0; top: 0; transform: translateY(0); }
   .separator-bar .pull-right img, .separator-bar .pull-left img { position: relative; top:0; transform: translateY(0); }
   .separator-bar .pull-left + div { float: none; }

   .separator-bar .block-button { margin-bottom: 15px !important; }

   /*Industries We Serve*/
   .separator-bar .x-large, .separator-bar h1 { margin-top: 0; }
   .separator-bar .text-overlays { padding-bottom: 15px !important; }

   /* Related Products */
   .col-md-offset-1 .row:last-child .col-xs-12:last-child a strong { margin-bottom: -15px; }

   /* Side Panel left */
   .side-panel #side-nav { display: none; }

   /* Industries Page */
   .center-scale50 { width: 50%; height: auto; margin-left: 15px; float: right; }
   .mobile-border-bottom { padding-bottom: 1em; border-bottom: 1px solid #ccc; }

   /* Footer - mobile */
    #footer .group-textlinks li {
        padding: 0;
        margin-bottom: 15px;
        line-height:1.5em;
    }

    #footer .group-textlinks ul, #footer .group-textlinks ul li:last-of-type { margin-bottom: 0; }
    #footer .group-textlinks a { font-weight: bold; }
    #footer .footer-office { line-height: 2em; }

    #footer .footer-office h5 {
        margin-top: 0;
        font-weight: bold;
        margin-bottom: 10px;
    }

   .mobile-footer { padding-top: 20px; font-size:1.25em !important; }


/* See if we can fix this on the masterpage.aspx.cs File,  if not,  this works.  ? ? ?    */
    #footer .footer-office + .row .col-xs-2 { width: 60px; }
    #footer .footer-office + .row .col-xs-2 a { margin-left: 0 !important; }


}


/* under mini tablet to small phones */
@media (max-width: 599px) {

   .separator-bar h1, h1.x-large { font-size: 2em; line-height: 1em !important; }

   /* Testimonies */
   .testimonies h1 { padding-left: 10%; padding-right: 10%; }

   /* Employees */
   .employee-title { display: block; }
   .employee h3 { font-size: 0.85em; }

   .email-link { float: none; text-align: right; }
   .email-link a img { float: none; }

   .block-button-dark-blue, .block-button-light-blue, .block-button-yellow { font-size: .75em; }

}


@media (max-width: 366px) { /* 320 small iphone */

   /* Text Overlay & image with <a> tag Link */
   .text-overlays .col-md-2 .text-overlays-box { font-size: 0.65em; }

}


/* Responsive Text Align */
.text-xs-left { text-align: left; }
.text-xs-right { text-align: right; }
.text-xs-center { text-align: center; }
.text-xs-justify { text-align: justify; }

@media (min-width: 768px) {
    .text-sm-left { text-align: left; }
    .text-sm-right { text-align: right; }
    .text-sm-center { text-align: center; }
    .text-sm-justify { text-align: justify; }
    /*! Five equal columns fix */
    div.col-sm-7.five-three {
        width: 60% !important;
    }
    div.col-sm-5.five-two {
        width: 40% !important;
    }
}

@media (min-width: 992px) {
    .text-md-left { text-align: left; }
    .text-md-right { text-align: right; }
    .text-md-center { text-align: center; }
    .text-md-justify { text-align: justify; }
}

@media (min-width: 1200px) {
    .text-lg-left { text-align: left; }
    .text-lg-right { text-align: right; }
    .text-lg-center { text-align: center; }
    .text-lg-justify { text-align: justify; }
}