@charset "UTF-8";
/* CSS Document
Client: Future Systems In
Company: Informatics, Inc
Author: Jeff S
Date: April 2019

*/

/* Variables */
:root {
  --teal: #599288;
  --dark-teal: #006f67;
  --teal-opacity: rgba(0,113,103,.8);
  --light-gray: #b7b6b5;
  --gray: #6d6d6d;
  --orange: #ea9f39;
  --dark-orange: #c97a0d;
  --blue: #58bef9;
  --dark-blue: #1b48a5;
  --purple: #70648c;
  --dark-purple: #563977;
  --text: rgba(0,0,0,.7);
  --header: 'Montserrat', sans-serif;
  --body: 'Roboto', sans-serif;
  --maxwidth: 1200px;
}

/* TYPOGRAPHY */
html {font-size: 100%; scroll-behavior: smooth;}
body {margin: 0; font-size: 1rem; background: #fff; font: 1em/1.5 var(--body), sans-serif; color: var(--text);-moz-font-feature-settings: "liga" on; overflow-x: hidden; font-feature-settings: normal; position: relative;}
.light-on-dark {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;}
h1, h2, h3, h4, h5 {font-weight: 700; font-family: var(--header); color: var(--dark-teal); margin: 0 0 1.5rem 0; line-height: 1.1;}
h1 {font-size: 2rem; color: #fff; line-height: 1; letter-spacing: 2px; text-transform: uppercase;font-weight: 800;}
h2 {font-size: 1.75rem; letter-spacing: -1px; text-transform: uppercase; position: relative; padding: 0 0 25px 0;}
h2:after {position: absolute; left: 0; bottom: 0; width: 50px; height: 5px; background: var(--teal); content: "";}
.animate-in h2:after {width: 0; transition-delay: .75s;}
.animate-in.visible  h2:after {width: 50px;}
h3 {font-size: 1.5rem; letter-spacing: -.5px;}
h4 {Font-size: .9rem; font-weight: 700; font-family: var(--header);}
.blockquote {font-size: 2.35rem; line-height: 1.2; font-family: var(--header); font-weight: 100; color: var(--dark); }
h5 {text-transform: uppercase; font-size: .8rem; color: var(--gray);}
.col-sm-12 hr {margin: 0;}

p {margin: 0 0 1.25rem 0;}
p strong {color: var(--dark);}
strong {font-weight: 700;}
h2[style="text-align: center;"]::before, .cta h2:before, .hgroup h2:before {left: 50%; margin-left: -25px; /* Half of length */}
h2[style="text-align: right;"]::before {left: auto; right: 0; margin-left: 0; /* Half of length */}
p, ul, ol {margin-bottom: 1.75em;}
img {max-width: 100%; height: auto;}
.img-right, .img-left {margin: 0 0 25px 0;}
hr {border-color: #ccc; margin: 30px 0; position: relative;}
.preheader {font-size: .8rem; text-transform: uppercase; color: var(--dark-teal); letter-spacing: 2px; margin: 0 0 5px 0;}
.text-center {margin: 0 0 50px 0;}
.text-center h2:after {left: calc(50% - 25px);}
h2[style="text-align: center;"]:after {left: calc(50% - 25px);}
img + h3, picture + h3 {margin-top: 25px;}
.file-list ul {list-style: none; padding: 0; margin: 15px 0;}
.file-list ul li {margin: 0 0 5px 0;}
.file-list ul a:before {content: "\f15b";font-family: FontAwesome; margin: 0 10px 0 0;}
.file-list ul a {display: block; padding: 10px; background: #f4f4f4;}
.file-list ul a:hover {padding: 10px 5px 10px 15px; background: none;}

.btn-blue a {display: inline-block; padding: 10px 15px; text-transform: uppercase; color: #fff !important; font-weight: 700;background: var(--dark-blue); border-radius: 5px; letter-spacing: 1px;}
.btn-blue a:hover {background: var(--blue); text-decoration: none;}
.btn-orange a {display: inline-block; padding: 10px 15px; text-transform: uppercase; color: #fff !important; font-weight: 700;background: var(--dark-orange); border-radius: 5px; letter-spacing: 1px;}
.btn-orange a:hover {background: var(--orange); text-decoration: none;}
.btn-purple a {display: inline-block; padding: 10px 15px; text-transform: uppercase; color: #fff !important; font-weight: 700;background: var(--dark-purple); border-radius: 5px; letter-spacing: 1px;}
.btn-purple :hover {background: var(--purple); text-decoration: none;}
.btn-green a {display: inline-block; padding: 10px 15px; text-transform: uppercase; color: #fff !important; font-weight: 700;background: var(--dark-teal); border-radius: 5px; letter-spacing: 1px;}
.btn-green:hover a {background: var(--teal); text-decoration: none;}

/* LINKS */
a {color: var(--dark-teal);}
a:visited {opacity: .8;}
a.btn-theme, .btn-theme > a {position: relative; z-index: 5; display: inline-block; padding: 15px 25px; text-transform: uppercase; font-family: var(--header); font-weight: 700; letter-spacing: 1px; font-size: .8rem; background: var(--gray); border-radius: 10px; color: #fff;}
a.btn-theme:hover, .btn-theme > a:hover {text-decoration: none; color: #fff; background: #999;}
.text-link {text-transform: uppercase; font-family: var(--header); letter-spacing: 2px;}

/* Animate  */
#menu a, .btn-theme, button, .ftr-links a, .ccm-page a, .hover-link:before, .hover-link:after, .feature-icon, .process-item, #search-toggle .fa, #search-toggle:after {
-webkit-transition: all .25s linear;-moz-transition: all .25s linear;-o-transition: all .25s linear;transition: all .25s linear;}

.ease, .icon-bar, #menu, #logo, #site-header, #hdr-search, #menu ul ul, #nav-main > li > a:after, a.btn-theme:before, a.btn-theme:after, .btn-theme a:before, .btn-theme a:after, .hover-link *, .hover-link .text p, #slide-nav a:after, h2:after, .success-item img, .process-item .text, .text-link {
  -webkit-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 h2:after, .hover-link h3 {
  -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 

/* --------------
/* GLOBAL */
:root {--spacer: 20px;}
.wrapper {width: 100%; max-width: var(--maxwidth); padding: 0 var(--spacer); margin: 0 auto;}
.content .wrapper { margin: var(--spacer) auto;}
.success-stories {padding: 0 var(--spacer);}
.container {width: 100%; max-width: var(--maxwidth); padding: 0 var(--spacer); margin: 0 auto;}
.content .container {margin: 50px auto;}
.scroll-section .container {padding: 0 var(--spacer);margin: var(--spacer) auto;}
.lead {font-size: 1.5rem; font-weight: 300;}
.grid {display: grid; gap: 25px;}
.col {position: relative;}
/* Header */
.page-header {position: relative; padding: 175px 25px 40px 25px; z-index: 5; text-align: center; margin: 0; border: none;}
.page-header figure {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; background: #222;}
.page-header figure img {width: 100%; height: 100%; object-fit: cover;}
.page-header .breadcrumb {background: none; padding: 0; margin: 0 0 15px 0; font-size: .8rem; color: #fff;}
.page-header .breadcrumb a {color: var(--teal);}
.page-header .wrapper {margin: 0 auto;}
.page-header figure, .page-header figure > div {width: 100%; height: 100%;}

#hero {display: flex; flex-direction: column; justify-content: flex-end; padding: 150px 0 0 0;}
#hero video, .page-header video {width: 100%; height: 100%; object-fit: cover;}
#hero .text {height: 100%; padding: 50px 50px 75px 50px; position: relative; display: flex; justify-content: center; flex-direction: column;}
#hero .text:before, #landing-header .text:before {display: block; width: 30px; height: 40px; position: absolute; bottom: 5%; left: calc(50% - 15px); content: "";background: url(../img/arrow.png) center center no-repeat; background-size: 20px auto;}
#hero .text p {color: #fff; font-family: var(--header); margin: 0 0 25px 0;}
#hero .text p:last-of-type {margin: 0;}
#hero .text .btn-theme a, #slider .btn-theme a {color: #fff; font-size: .9rem;}
#hero .text .btn-theme a:before, #slider .btn-theme a:before {background-image: url(../img/bkg-btn-white.png);}
#hero .text .btn-theme a:after, #slider .btn-theme a:after {background-image: url(../img/bkg-btn-white.png);}
#hero .text:before, #landing-header .text:before { animation: arrowAnimation 1.5s infinite ease-out;}
#hero-slides, #hero-slides * {height: 100%;}

.divisions {padding: 20px; gap: 20px; display: grid;}
.hover-link {padding: 15px; text-align: center; display: block; position: relative; z-index: 5; height: 100%; overflow: hidden;}
.hover-link h3 {color: #222; margin: 15px 0;}
.hover-link p {font-size: .8rem; color: var(--text);}
.hover-link img.logo {max-width: 50px;}
.hover-link .text {height: 100%;}
.hover-link img.hover-bkg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; padding: 0; max-width: none; opacity: .17; z-index: -1; margin: 0;}
.hover-link:hover {text-decoration: none;}
.hover-link:hover:before, .hover-link:hover:after {opacity: 0;}
.hover-link:before {width: 70px; height: 120px; position: absolute; right: -35px; top: -55px; content: ""; background: var(--teal); transform: rotate(-55deg);}
.hover-link:after {width: 70px; height: 120px; position: absolute; left: -35px; bottom: -55px; content: ""; background: var(--dark-teal); transform: rotate(-55deg);}

@media (min-width: 992px) {
.grid-two-desktop .hover-link:before {width: 105px; height: 180px; top: -85px; right: -15px;}
.grid-two-desktop .hover-link:after {width: 105px; height: 180px; bottom: -85px; left: -15px;}
}
.hover-link.water:before {background: var(--blue);}
.hover-link.cleaning:before {background: var(--purple);}
.hover-link.process:before {background: var(--orange);}
.hover-link.water:after {background: var(--dark-blue);}
.hover-link.cleaning:after {background: var(--dark-purple);}
.hover-link.process:after {background: var(--dark-orange);}

.full-img-content {position: relative;}
.full-img-content figure {height: 100%; width: 100%; height: 300px; overflow: hidden;}
.full-img-content figure img {width: 100%; height: 120%; object-fit: cover;}
.full-img-content .text {padding: 50px;}

.grid {display: grid; grid-gap: 25px;}
.full-bkg-img {position: relative; z-index: 5; background: var(--dark-teal); overflow: hidden;}
.full-bkg-img picture {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.full-bkg-img img {width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: .1; position: absolute; left: 0; top: 0;}
.full-bkg-img .grid {margin: 25px 0;}
.container + .full-bkg-img {margin-top: var(--spacer);}

.feature-number {display: grid; grid-template-columns: 130px auto;}
.feature-number h2 {font-size: 3.75rem; margin: 0 25px 0 0; padding: 0; text-align: right;}
.feature-number h2:after {display: none;}
.feature-number p {font-family: var(--header); text-transform: uppercase; color: var(--dark-teal); font-size: 1.25rem; margin-top: 5px;}
.full-bkg-img .feature-number h2 {color: #fff;}
.full-bkg-img .feature-number p {color: #fff;}

.feature-icon {background: #fff; padding: 25px; text-align: center; box-shadow: 0 0 15px rgba(0,0,0,.1); position: relative; top: 0;}
.feature-icon h3 {text-align: center; position: relative; padding: 0 0 25px 0;}
.feature-icon h3:after {position: absolute; bottom: 0; width: 50px; height: 5px; background: var(--light-gray); content: ""; left: calc(50% - 25px);}
.feature-icon p {text-align: left;}
.feature-icon .fa {font-size: 3rem; margin: 0 0 15px 0; color: var(--light-gray);}
.feature-icon:hover {top: -15px;}

#slide-nav {background: var(--dark-teal); padding: 25px 50px; height: 100%;}
#slide-nav ul {list-style: none; padding: 0; margin: 0;}
#slide-nav a {display: block; padding: 15px 0; opacity: .6; color: #fff; border-bottom:1px solid rgba(255,255,255,.25); position: relative;}
#slide-nav a:after {content: "\f061"; font-family: FontAwesome; opacity: 0; position: absolute; right: -25px; transform: rotate(90deg); top: calc(50% - 1rem);}
#slide-nav a:hover {opacity: 1; text-decoration: none; cursor: pointer;}
#slide-nav .slick-active a:after {opacity: 1; right: -10px;}
#slide-nav .slick-active a {opacity: 1;font-weight: 700;}
#slider .slide {position: relative; z-index: 5; padding: 50px; color: rgba(255,255,255,.8); font-size: .9rem; background: #222; text-align: center;}
#slider .slide img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: .25;}
#slider .slide h3 {color: #fff; text-transform: uppercase;}
#slider, #slider div {height: 100%;}

#slide-dots {position: absolute; bottom: 0; width: 100%; padding: 25px;}
#slide-dots .slick-slide {width: 10px !important; height: 10px; background: #fff; border-radius: 50%; margin: 0 3px;}
#slide-dots .slick-track {display: flex; justify-content: center;}
#slide-dots .slick-slide.slick-current {background: var(--teal);}

.footer {background: #f4f4f4; margin-top: 50px;}
.footer .col img {max-width: 200px; align-self: center;}
.footer ul {padding: 0 0 0 15px;}
.footer h4 {margin: 25px 0 10px 0;}
.footer .copy {background: var(--dark-teal); margin: 0; padding: 20px; color: rgba(255,255,255,.5); font-size: .8rem; text-align: center;}
.footer .copy a {color: rgba(255,255,255,.5);}
.footer .social a {font-size: 1.5rem; margin: 0 5px 0 0;}
.footer h2, .footer h3, .footer h4 {color: var(--dark-teal) !important;}

.footer-cta {text-align: center; padding: 45px 25px; background: var(--dark-teal); border-bottom: 1px solid #ddd; position: relative; margin: -50px 0 0 0; width: 100%; box-shadow: 10px 10px 20px rgba(0,0,0,.1);}
.footer-cta img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: .1;}
.footer-cta h3 {margin: 0 0 10px 0; text-transform: uppercase; color: #fff !important;}
.footer-cta p {font-size: 1.25rem; font-weight: 300; margin: 0 0 15px 0; color: #fff;}
.footer-cta .btn-theme a {background: rgba(255,255,255,.9); text-align: center; font-size: 1.25rem; box-shadow: 5px 5px 5px rgba(0,0,0,.2);}
.footer-cta .btn-theme a:hover {background: #fff;}

#landing-header {padding: 200px 0 0 0; min-height: 30vh; display: flex; justify-content: flex-end; flex-direction: column;}
#landing-header img {opacity: 1;}
#landing-header .text {padding: 50px 25px; position: relative; z-index: 5;}
#landing-header .text:after {width: 100%; height: 100%; display: block; content: ""; background: var(--dark-teal); z-index: -1; position: absolute; left: 0; top: 0; opacity: .8;}
#landing-header .breadcrumb a {color: #fff; opacity: .7;}
#landing-header .text:before {bottom: 15px;}
#landing-header .wrapper {padding-top: 0; padding-bottom: 0;}

#sec-nav ul {list-style: none; border-top: 5px solid var(--teal); padding: 0;}
#sec-nav ul a {display: block; padding: 20px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px dotted #ccc; background: #eee;}
#sec-nav ul a:hover {background: none; padding: 20px 15px 20px 25px; text-decoration: none;}

.success-item {display: block; position: relative; min-height: 350px; display: flex; justify-content: flex-end; flex-direction: column; background: var(--dark-teal); overflow: hidden; flex: 0 1 330px; margin:  0 0 15px 0;}
.success-item img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.success-item .text {position: relative; z-index: 5; padding: 25px 25% 25px 25px; color: #fff;background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5));}
.success-item .text h3 {margin: 0 0 10px 0; color: #fff;}
.success-item .text p {margin: 0; font-size: .8rem;}
.success-item:hover img {transform: scale(1.1); opacity: .25;}
.success-item:hover {text-decoration: none;}
.success-grid {display: flex; flex-wrap: wrap; gap: 1px; margin: 0; justify-content: center;}
.success-item {margin: 0;}

/* Template Color Themes */
.ccm-page-template-water #nav-main > li.nav-path-selected a:after, .ccm-page-template-water #nav-main li > a:after, .ccm-page-template-water .success-item, .ccm-page-template-water .full-bkg-img, .ccm-page-template-water .story-popover .modal-dialog .close, .ccm-page-template-water #slide-nav, .ccm-page-template-water .scroll-nav ul li.nav-path-selected > a {background: var(--dark-blue);}
.ccm-page-template-water h2:after, .ccm-page-template-water #landing-header .text:after, .ccm-page-template-water .quote .quote-mark:after, .ccm-page-template-water .quote .quote-mark:before, .ccm-page-template-water #slide-dots .slick-slide.slick-current {background: var(--blue);}
.ccm-page-template-water h2, .ccm-page-template-water h3, .ccm-page-template-water #sec-nav ul a, .ccm-page-template-water a {color: var(--dark-blue);}
.ccm-page-template-water #sec-nav ul {border-color: var(--blue);}
.ccm-page-template-water .quote .fa {color: var(--blue);}

.ccm-page-template-cleaning #nav-main > li.nav-path-selected a:after, .ccm-page-template-cleaning #nav-main > li a:after, .ccm-page-template-cleaning .success-item, .ccm-page-template-cleaning .full-bkg-img, .ccm-page-template-cleaning .story-popover .modal-dialog .close, .ccm-page-template-cleaning #slide-nav, .ccm-page-template-cleaning .scroll-nav ul li.nav-path-selected > a {background: var(--dark-purple);}
.ccm-page-template-cleaning h2:after, .ccm-page-template-cleaning #landing-header .text:after, .ccm-page-template-cleaning .quote .quote-mark:after, .ccm-page-template-cleaning .quote .quote-mark:before, .ccm-page-template-cleaning #slide-dots .slick-slide.slick-current {background: var(--purple);}
.ccm-page-template-cleaning h2, .ccm-page-template-cleaning h3, .ccm-page-template-cleaning #sec-nav ul a, .ccm-page-template-cleaning a {color: var(--dark-purple);}
.ccm-page-template-cleaning #sec-nav ul {border-color: var(--purple);}
.ccm-page-template-cleaning .quote .fa {color: var(--purple);}

.ccm-page-template-process #nav-main > li.nav-path-selected a:after, .ccm-page-template-process #nav-main > li a:after, .ccm-page-template-process .success-item, .ccm-page-template-process .full-bkg-img, .ccm-page-template-process .story-popover .modal-dialog .close, .ccm-page-template-process #slide-nav, .ccm-page-template-process .scroll-nav ul li.nav-path-selected > a {background: var(--dark-orange);}
.ccm-page-template-process h2:after, .ccm-page-template-process #landing-header .text:after, .ccm-page-template-process .quote .quote-mark:after, .ccm-page-template-process .quote .quote-mark:before, .ccm-page-template-process #slide-dots .slick-slide.slick-current {background: var(--orange);}
.ccm-page-template-process h2, .ccm-page-template-process h3, .ccm-page-template-process #sec-nav ul a, .ccm-page-template-process a {color: var(--dark-orange);}
.ccm-page-template-process #sec-nav ul {border-color: var(--orange);}
.ccm-page-template-process .quote .fa {color: var(--light-gray);}

.footer a {color: var(--dark-teal) !important;}

.scroll-nav {width: 100%; background: #fff; position: relative; z-index: 15; border-bottom: 1px solid #ddd; background: linear-gradient(#fff, #f9f9f9);}
.scroll-nav ul {list-style: none; display: flex; justify-content: center; flex-wrap: wrap; margin: 0; align-items: center; padding: 10px 0;}
.scroll-nav ul a {display: block; padding: 10px 25px; color: var(--gray); border-right: 1px solid #ccc; font-weight: 700; opacity: .5;}
.scroll-nav ul a:after {color: #222; content: "\f078";font-family: FontAwesome; position: absolute; left: calc(50% - 25px); bottom: -10px; text-align: center; width: 50px; height: 25px; opacity: 0;}
.scroll-nav ul li:last-child a {border: 0;}
.scroll-nav ul li.active > a, .scroll-nav ul li.nav-path-selected > a {background: var(--dark-teal); color: #fff; opacity: 1;}
.scroll-nav ul li.active > a:after, .scroll-nav ul li.nav-path-selected > a:after {opacity: 1;}
.scroll-nav ul li.nav-path-selected > a:after {display: none;}
.fix-affix {min-height: 75px;}
:target:before {
    content: "";
    display: block;
    height: 200px;
    margin: -200px 0 0;
}

#section-one {margin-top: var(--spacer);}
.scroll-section {margin: 25px auto;}
.quote {padding: 100px 50px; color: #fff; text-align: center; max-width: 950px; margin: 0 auto;}
.quote .quote-mark {position: relative; height: 75px; display: block;}
.quote .quote-mark:before, .quote .quote-mark:after {position: absolute; right: calc(50% - 35px); width: 30px; height: 40px; background: var(--teal); content: ""; clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 100% 75%, 50% 100%, 50% 75%, 0% 75%);}
.quote .quote-mark:after {right: auto; left: calc(50% - 35px);}
.story-popover .modal-dialog {width: 100%; max-width: 800px; background: #fff;}
.story-popover .modal-dialog .close {position: absolute; right: 0; top: 0; padding: 10px 20px; font-size: 2rem; background: var(--dark-teal); opacity: 1; color: #fff;}
.story-popover .modal-dialog .text {padding: 50px;}

.norchem-process {display: flex; justify-content: center; margin: 0 0 50px 0; padding: 0 var(--spacer); position: relative; z-index: 15;}
.norchem-process .process-item {color: #444;}
.norchem-process .process-item .text {display: none;}
.norchem-process .process-item .text h3 {text-align: center; margin: 25px 0;}

#to-top {display: block; padding: 10px 15px; background: var(--gray); color: #fff; font-size: 1.5rem; position: fixed; right: 15px; bottom: 15px; box-shadow: 5px 5px 15px rgba(0,0,0,.2); z-index: 15; opacity: 0;}
#to-top.active {opacity: 1;}

/* Clean List Item */
.blog-list {display: grid; grid-template-columns: repeat( auto-fit, minmax(280px, 1fr) ); gap: 25px;}
.clean-list-item {color: #555; box-shadow: 0 0 25px rgba(0,0,0,.1); transform: scale(1); font-size: .9rem;}
.clean-list-item figure {height: 200px; overflow: hidden;}
.clean-list-item figure img {width: 100%; height: 100%; object-fit: cover;}
.clean-list-item .text {padding: 25px;display: flex; justify-content: flex-start; flex-direction: column; height: calc(100% - 200px);}
.clean-list-item .text h2 {font-size: 24px; text-transform: none;}
.clean-list-item .text .text-link {padding: 10px; font-size: .9rem; background: #eee; text-align: center; display: block; margin-top: auto;}
.clean-list-item strong, .clean-list-item time {font-weight: bold; color: #333; margin: 0 0 10px 0; display: block; font-size: .8rem;}
.clean-list-item:hover .text-link {background: var(--teal); color: #fff;}
.clean-list-item:hover .text-link:hover {background: var(--dark-teal);}
.clean-list-item:hover {transform: scale(1.05); text-decoration: none; color: #555;}

/* BLOG SIDEBAR ITEMS */
.ccm-block-date-navigation-wrapper ul, .ccm-block-topic-list-wrapper ul {list-style: none; padding: 0; margin: 0 0 25px 0;}
.ccm-block-date-navigation-wrapper ul a, .ccm-block-topic-list-wrapper ul a {display: block; padding: 10px; border-bottom: 1px dotted #ccc;}
.ccm-block-date-navigation-wrapper .ccm-block-date-navigation-date-selected, .ccm-block-topic-list-wrapper .ccm-block-topic-list-topic-selected {background: #f4f4f4;}
.ccm-block-date-navigation-header h5, .ccm-block-tags-wrapper h5, .ccm-block-topic-list-header h5 {border-top: 5px solid var(--gray); padding: 10px;}
.ccm-block-tags-wrapper .ccm-block-tags-tag-selected {background: #ccc;}

/* BLOG DETAIL STYLES */.container.skinny {max-width: 900px;}
#blog-detail header {border-bottom: 1px dotted #ccc; margin: 175px 0 25px 0; text-align: center;}
#blog-detail header h1 {font-size: 42px; margin: 0 0 25px 0; text-transform: none; font-style: normal; letter-spacing: -1px; color: #333; font-weight: 700;}
#blog-detail header .breadcrumb {background: none; padding: 0; margin: 0 0 15px 0; font-size: 14px;}
#blog-detail {font-size: 18px;}
#blog-detail .lead {color: var(--primary); padding: 25px 25px 25px 35px; border-left: 10px solid var(--secondary); background: #f4f4f4; margin: 25px 0; font-size: 28px;}
#blog-detail .text-skinny {max-width: 900px; margin: 50px auto;}
#blog-detail img {margin-bottom: 25px;}
/* SHARE NEWS BLOG */
#blog-share {border-top: 1px dotted #ccc; padding-top: 50px;}
#blog-share ul.list-inline {display: flex; justify-content: center;}
#blog-share .ccm-block-share-this-page ul.list-inline li {background: none; padding: 0; margin: 0;}
#blog-share ul.list-inline a {font-size: 30px; margin: 0 10px;}

#sec {background: #f4f4f4; padding: 15px; margin: 0 0 25px 0;}
#sec ul {list-style: none; padding: 0; margin: 0; background: #fff;}
#sec ul a {display: block; padding: 18px; border-bottom: 1px dotted #ccc; color: #222; font-size: 16px; border-left: 5px solid rgba(255,255,255,0);}
#sec ul .nav-path-selected > a {background: #fff; border-left-color: #222; font-weight: 700;}
#sec ul a:hover {background: #fff; padding: 18px 12px 18px 23px;border-left-color: var(--tertiary); text-decoration: none;}
#sec ul ul {padding: 15px 0; border-top: 1px solid #fff; margin-top: -1px;}
#sec ul ul a {padding: 5px 5px 5px 30px; border: 0; font-size: .85rem; color: #555; font-weight: 400;}
#sec ul ul a:hover {padding: 5px 0 5px 35px; color: #333;}

/* Search Layout */
.ccm-search-block-form h3 {font-size: 28px; border-bottom: 1px solid #ccc; padding: 15px 0; margin: 15px 0;}
.ccm-search-block-form h4 {margin-top: 85px !important;}
.ccm-search-block-form input {width: 75%; float: left; height: 50px; background: #f4f4f4; border: 1px solid #ccc; padding: 10px;}
.ccm-search-block-form .btn {width: 23%; float: right; height: 50px; background: var(--dark-teal); color: #fff; font-weight: bold; border: none;}
.ccm-search-block-form #searchResults {display: block; padding: 15px 0; width: 100%; overflow: hidden;}
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: var(--dark-teal);
    border-color: var(--dark-teal);
}
/* --------------
/* TABLETS */
@media (min-width: 768px) {
  h1 {font-size: 3.25rem;}
  :root {--spacer: 50px;}
.img-left {max-width: 50%; float: left; margin: 0 25px 25px 0;}
.img-right {max-width: 50%; float: right; margin: 0 0 25px 25px;}

#hero {height: 85vh; min-height: 800px;}
.divisions {display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 0 15px rgba(0,0,0,.1); background: #fff;}
.divisions .col {background: #fff;}

.grid-three {grid-template-columns: 1fr 1fr 1fr;}
.grid-two-desktop {grid-template-columns: 0 1fr 1fr 0;}
.ccm-edit-mode .grid-two-desktop {grid-template-columns: 1fr 1fr 1fr 1fr;}
#two-col-slider {display: grid; grid-template-columns: 1.25fr 2fr;}
#two-col-slider > .col {overflow: hidden;}
#slider .slide {padding: 100px;}
#slide-nav {padding: 100px 50px;}
#slide-nav a {font-size: 1.5rem;}
#slide-nav a:after {transform: none;}
#slide-nav .slick-active a:after {right: -40px;}

.story-popover .modal-dialog {margin: 5px auto;}
.success-item {flex: 0 1 350px;}

.footer .wrapper {display: flex; padding: 15px var(--spacer) 15px var(--spacer);}
.footer .wrapper .col:first-of-type {margin: 0 auto 0 0;}

.quote .lead {font-size: 1.75rem;}

.ftr-logo {display: flex;}
.ftr-logo p {display: flex; justify-content: center; flex-direction: column;}

#landing-header {min-height: 50vh;}
}

/* --------------
/* SMALL DESKTOPS */
@media (min-width: 992px) {
h2 {font-size: 2.5rem;}
hr {margin: 50px 0;}

/* Header */
.page-header {position: relative; padding: 225px 25px 75px 25px;}
#hero {min-height: 800px;}
#hero .text {padding-bottom: 100px;}
.divisions {margin-top: -175px; position: relative; z-index: 5; grid-template-columns: 1fr 1fr 1fr 1fr;}
.grid-three-desktop {grid-template-columns: 1fr 1fr 1fr;}
.grid-two-desktop {grid-template-columns: 0 1fr 1fr 0;}

.hover-link {height: 275px;}
.hover-link p {opacity: 0; margin: 20px 0; height: 70px; position: absolute; bottom: 0px; left: 0; right: 0; padding: 0 15px;}
.hover-link .text>span {position: absolute; bottom: 45px; width: 100%; left: 0; font-size: .9rem;}
.hover-link .text h3 {font-size: 1.85rem;}
.grid-two-desktop .hover-link .text h3 span {display: block; width: 100%; font-size: 3.8rem;}
.hover-link img.logo {opacity: 0; position: relative; top: -5px;}
.hover-link h3 {position: relative; top: -5px; padding: 0 10px;}

.hover-link:hover {background: #222;}
.hover-link:hover img.hover-bkg {opacity: .25; transform: scale(1.1);}
.hover-link:hover p {opacity: 1; color: rgba(255,255,255,.75); bottom: 5px;}
.hover-link:hover .text img {margin: 0;}
.hover-link:hover h3 {color: #fff; top: 5px;}
.hover-link:hover span {color: #fff; bottom: 15px; transition-delay: .1s;}
.hover-link:hover img.logo {opacity: 1; transition-delay: .2s; top: 10px;}

.wrapper + .full-img-content {padding-top: 0;}
.full-img-content {display: grid; grid-template-columns: 1.25fr 2fr; padding: 75px var(--spacer);}
.full-img-content .text {grid-column: 1; grid-row: 1; background: #f4f4f4; display: flex; justify-content: center; flex-direction: column; padding: 75px;}
.full-img-content figure {height: auto; grid-column: 2; grid-row: 1;}
.full-img-content figure img {height: 108%;}
.full-img-content-flip {grid-template-columns: 2fr 1.25fr;}
.full-img-content-flip .text {grid-column: 2;}
.full-img-content-flip figure {grid-column: 1;}

#slider .slide {display: flex !important; justify-content: center; flex-direction: column;}
#slider .slide h3 {font-size: 2.5rem;}
#slider .slide p {max-width: 650px; margin: 0 auto 35px auto; font-size: 1.25rem;}
#slider .slide p:last-of-type {margin:  auto;}
#slide-nav {padding: 100px;}

.grid-sidebar-right {grid-template-columns: 2fr 1fr; gap: 50px;}

#landing-header .text h1 {font-size: 4rem;}
#landing-header.page-header-short {height: 700px;}

.scroll-nav, .scroll-nav ul {min-height: 65px;}
.scroll-nav.affix {top: 84px; position: fixed;}

.footer {margin-top: 125px;}
.footer-cta h3 {font-size: 1.65rem;}
.footer-cta {display: grid; grid-template-columns: 2fr 1fr; text-align: left; padding: 50px; margin-top: -100px;}
.footer-cta .col {display: flex; justify-content: center; flex-direction: column;}
.footer-cta p {margin: 0;}
.footer .wrapper .col {margin-left: 75px;}

.norchem-process {padding: 0 100px;}
.norchem-process .process-item {margin: 0; padding: 0; position: relative;}
.norchem-process .process-item .text {display: block; position: absolute; width: 250px; left: calc(50% - 125px); top: 110%; padding: 15px; background: var(--gray); font-size: .8rem; box-shadow: 10px 10px 10px rgba(0,0,0,.1); z-index: 5; color: rgba(255,255,255,.8); opacity: 0;}
.norchem-process .process-item .text h3 {color: #fff; font-size: 1.2rem; margin: 10px 0;}
.norchem-process .process-item .text:before { position: absolute; left: calc(50% - 4px); bottom: 100%; content: "";width: 0; height: 0;  border-left: 7px solid transparent;border-right: 7px solid transparent;border-bottom: 7px solid var(--gray);}
.norchem-process .process-item:after {width: 100%; height: 100%; border: 3px solid #999; content: ""; position: absolute; left: 0 ;top: 0; opacity: 0;}
.norchem-process:hover .process-item {opacity: .5;}
.norchem-process:hover .process-item:hover {box-shadow:  0 0 25px rgba(0,0,0,.2); z-index: 5; opacity: 1;}
.norchem-process .process-item:hover .text {top: 105%; opacity: 1;}
.norchem-process .process-item:hover:after {opacity: 1;}

.story-popover .modal-dialog {margin: 25px auto;}
}

/* LARGE DESKTOPS */
@media (min-width: 1200px) {
:root {--spacer: 50px;}

#hero h1 {font-size: 4.5rem;}

.success-grid {grid-template-columns: 1fr 1fr 1fr 1fr;}

.success-item {flex: 0 1 400px;}

}


/* MEGA DESKTOPS */
@media (min-width: 1400px) {}

/* TALL AND WIDE DESKTOPS */
@media (min-height: 900px) and (min-width: 1200px) {

}

/* ----------------------*/
/* -- MENU AND HEADER -- */
/* ----------------------*/
/* ONLY MOBILE */
@media (max-width: 992px) {
#menu-toggle {position: relative; z-index: 200; border: 0; padding: 5px 5px 0 15px; background: none; color: #333; display: flex; flex-direction: column; justify-content: center; font-size: 12px; float: right; color: #999; }
#menu-toggle .icon-bar {display: block; height: 4px; background: var(--dark-teal); width: 100%; margin: 0 0 5px 0; float: right;}
#menu-toggle .icon-bar:nth-of-type(2) {width: 75%;}
#menu-toggle:hover .icon-bar:nth-of-type(2), #menu-toggle.active .icon-bar:nth-of-type(2) {width: 100%;}

#menu {background: #fff; padding: 25px 90px 25px 25px; position: fixed; top: 0; right: -30px; bottom: 0; height: 100%; width: 100vw; visibility: hidden; opacity: 0; z-index: 100; overflow-y: scroll; box-shadow: 0 0 25px rgba(0,0,0,.2); max-width: 450px; padding-right: 90px;}
#menu.active {opacity: 1; right: 0; visibility: visible;}
#nav-main {margin-bottom: 25px;}
#menu li:first-of-type a {border: 0;}
#nav-main > li:last-of-type {margin-bottom: 15px;}
#menu ul a {border-top: 1px dotted #ccc;}
}

/* HEADER */
.mini-nav {background: rgba(0,0,0,.75);}
.mini-nav ul {list-style: none; padding: 3px var(--spacer); margin: 0; display: flex; justify-content: center;  width: 100%; max-width: var(--maxwidth); margin: 0 auto;}
.mini-nav a {display: block; font-size: .8rem; text-transform: uppercase; padding: 5px 10px; color: #fff; opacity: .9; text-align: center;}
.mini-nav a:hover {opacity: 1;}
.mini-nav ul li i.fa {display: block;}
#site-header {position: fixed; top: 0; left: 0; width: 100%; z-index: 150; background:#fff; box-shadow: 0 5px 10px rgba(0,0,0,.1);}
#site-header .wrapper {display: flex; justify-content: space-between; padding: 15px var(--spacer); position: relative; align-items: center;}
#logo {max-width: 175px; display: block;}
#logo.division-logo {background: #fff; padding: 25px 15px; max-width: 250px; min-height: 95px; display: flex; align-items: center;}
#menu ul {list-style: none; padding: 0; margin: 0 0 15px 0;}
#menu li {margin: 0;}
#menu ul a {display: block; color: #222; font-size: 1rem; padding: 10px 0; font-weight: 700; text-transform: uppercase;}
#menu ul a:hover {color: var(--secondary); text-decoration: none; background: none;}
#menu ul a.btn-theme {text-align: center; color: #fff;}
#menu ul ul {padding: 0 0 0 15px; border-left: 2px solid var(--secondary);}
#menu ul ul a {font-size: .85rem; padding: 5px; font-weight: 400; border: none; color: var(--text);}
#menu ul ul .nav-path-selected a {font-weight: 700;}
.nav-divisions img {width: 25px; margin: 0 5px 0 0;}

#search-toggle {font-size: 1.25rem; border: none; background: none; display: none;}
#hdr-search {font-size: .8rem; display: flex; align-items: center; width: 100%; background: #fff; padding: 25px 0;}
#hdr-search form {display: grid; grid-template-columns: auto 50px; width: var(--maxwidth); margin: 0 auto;}
#hdr-search form input {padding: 12px; border: 1px solid #ccc; border-right: none; background: #f9f9f9; width: 100%; font-size: 1rem;}
#hdr-search form button {background: rgba(0,0,0,.75); border: none; font-size: 1rem; padding: 0 15px; color: #fff;}
#hdr-search form input:focus {border-color: rgba(0,0,0,.75); outline: none;}
#hdr-search form button:hover {background: rgba(0,0,0,.9);}

@media (min-width: 768px) {
/* Header & Nav */
#menu {padding: 50px 110px 20px 40px;}
.mini-nav a {text-align: left;}
.mini-nav ul li i.fa {display: inline-block;}
}

@media (min-width: 992px) {
#logo {max-width: 180px; top: -36px; left: 75px;}
#logo.division-logo {max-width: 325px; height: 165px;}
#menu-toggle {display: none;}
.mini-nav ul {justify-content: flex-end;}

#site-header .wrapper {padding: 0 var(--spacer);}
#site-header.scroll {top: -35px;}
/*#site-header.scroll #logo {top: 0; max-width: 155px;}
#site-header.scroll #logo.division-logo {max-width: 325px; height: 115px;}*/

#menu > ul > li:last-of-type {display: flex; flex-direction: column; justify-content: center;}
#menu {padding: 0;display: grid; grid-template-columns: auto 50px; gap: 15px;}
#menu ul {display: flex; margin: 0;}
#menu ul li {position: relative; display: block;}
#nav-main > li > a {font-size: .9rem; padding: 30px 20px;}
#nav-main > li > a.btn-theme {padding: 10px 18px !important;}
#menu ul ul {position: absolute; right: 0; top: 102%; width: 250px; display: block; background: #fff; padding: 20px; border: none; box-shadow: 5px 5px 15px rgba(0,0,0,.2); border-top: 5px solid var(--primary); opacity: 0; visibility: hidden;}
#menu ul ul.nav-divisions {width: 350px;}
#menu ul ul li {width: 100%; display: block;}
#menu ul ul li a {border-bottom: 1px dotted #ccc; padding: 10px;}
#menu ul ul li:last-of-type a {border: none;}
#menu ul li:hover ul {opacity: 1; visibility: visible; top: 83%;}
#menu ul ul li a:hover {padding: 10px 5px 10px 15px;}

#nav-main > li > a:after {width: 0; height: 5px; background: var(--teal); content: ""; position: absolute; bottom: 15px; left: 50%; opacity: 0;}
#nav-main > li:hover > a:after, #nav-main > li.nav-path-selected a:after {width: 50px; left: calc(50% - 25px); opacity: 1;}
#nav-main:hover > li.nav-path-selected a:after {opacity: 0;}

#search-toggle {display: block; position: relative;}
#search-toggle:after {position: absolute; opacity: 0; font-family: fontawesome; content:"\f00d"; left: 35%;}
#search-toggle.active .fa-search {opacity: 0;}
#search-toggle.active:after {opacity: 1;}
#hdr-search.active {opacity: 1; visibility: visible; top: 115px;}
#hdr-search {position: fixed; left: 0; top: 115px; padding: 25px 0; opacity: 0; visibility: hidden;} 
#hdr-search form { padding: 0 var(--spacer);}
#site-header.scroll #hdr-search {top: 80px;}
}

@media (min-width: 1300px) {
#logo {max-width: 250px;}
#nav-main > li > a {font-size: 1rem; padding: 30px 20px;}
#menu ul ul {right: calc(50% - 125px);}
#menu ul ul.nav-divisions {right: calc(50% - 175px);}
}