@import url('../../../../ext/fonts.googleapis.com/css.css');


/* Resets */
html {height:100%;}
body {-webkit-font-smoothing: antialiased; font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 1.6;}
a, button {-webkit-transition: color .25s, background-color .25s, padding .25s, margin .25s, height .25s, width .25s, opacity .25s, border .25s;
     -moz-transition:  color .25s, background-color .25s, padding .25s, margin .25s, height .25s, width .25s, opacity .25s, border .25s;
      -ms-transition:  color .25s, background-color .25s, padding .25s, margin .25s, height .25s, width .25s, opacity .25s, border .25s;
          transition:  color .25s, background-color .25s, padding .25s, margin .25s, height .25s, width .25s, opacity .25s, border .25s;}
a:hover, button:hover {text-decoration: none;}
a {color:#0d4e8e; font-weight: 700;}
a:hover {color:#65a7e8;}

.center-vertical {position:relative; top:50%;
    /* translateZ(0) and -webkit-backface-visibility are needed to fix a HW-acceleration bug in Chrome */
    -webkit-transform: translateZ(0) translateY(-50%);
    -moz-transform: translateZ(0) translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateZ(0) translateY(-50%);
    transform: translateZ(0) translateY(-50%);
    -webkit-backface-visibility: hidden;}

.navbar {border-radius: 0; margin-bottom: 0;}
.padded-section {padding:100px 0;}
footer {background:#ccc; padding:50px 0;}
    
/* BX Slider */
.bx-wrapper {margin:0;box-shadow:none; border:none; background:transparent;}
.bx-wrapper .bx-viewport {box-shadow:none; border:none; left:0;}

/* Colors */
.dark-blue {color:#002f6c;}
.brand-blue {color:#0d4e8e;}
.med-blue {color:#5b7fa8;}
.light-blue {color:#65a7e8;}
.dark-gray {color:#454544;}
.med-gray {color:#6e6e6e;}
.xlight-gray {color:#f3f3f3;}

/* Site Styles */
h1 {font-size:3em; font-weight:100; color:#0d4e8e;}
h2 { text-transform:uppercase; letter-spacing:.1em; font-weight:100; color:#0d4e8e;}
h3 {font-weight:700; font-size:2em; color:#0d4e8e;}
h4 {font-weight:700; font-size:1.4em; color:#0d4e8e;}
h5 {font-size:1.3em; font-weight:100; color:#0d4e8e;}
h6 {font-size:.6em; text-transform:uppercase; letter-spacing:.1em; font-weight:700}

p {margin-bottom: 20px;}
blockquote {font-weight:100; font-size:1.5em; color:#0d4e8e;}


.btn {border-radius:100px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; font-size:.8em; padding: 10px 25px;}
.btn-default {background-color:#002f6c; color:#fff; border:none;}
.btn-sm {padding:7px 15px; font-size:.6em}
.btn-outline {border:1px solid #0d4e8e; color:#0d4e8e;}
.btn-outline:hover {background:#0d4e8e; color:#fff;}
.btn-lg {font-size:1.2em; padding:20px 40px;}

.link-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.link-wrap .btn-lg {
    margin-bottom: 1rem;
}
.link-wrap .btn-lg:first-of-type {
    margin-right: 1rem;
}

.padded-section {padding:100px 0;}
.section-title {padding-bottom:40px;}
.padded-column {padding:0 20px;}
.padded-column .column-content {padding:20px;}

.dark-section, .dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4, .dark-section h5, .dark-section h6, .dark-section a {color:#fff;}
.dark-section .btn-outline {border-color:#fff;}
.dark-section .btn-outline:hover {background:#fff; color:#0d4e8e;}
.dark-section .btn-default {background-color: #fff; color:#002f6c;}
.dark-section .btn-default:hover {background-color: #65a7e8; color:#002f6c;}
.section-title .btn {font-size:.4em}

.slide-content {height:50vh; display:flex; justify-content: vertical; align-items:center;}
.slide-content p {font-size:1.2em; font-weight:200;}

footer {background:#ebf4fb; padding:50px 0;}

.navbar-brand>img {width:225px; max-width:100%;}
.home .navbar-brand>img {max-height: 116px; width:auto;}
.navbar-brand {height:auto; background:#fff; box-shadow: 0 5px 15px rgba(0,0,0,.1); position:relative; z-index:10; margin-bottom:-50px; padding:20px;}

.navbar {background:#fff; border:none; z-index:100;}
.navbar .container {position:relative;}
.top-nav { position:absolute; top:10px; right:20px;}
.main-nav {padding-top:60px;}
.navbar-nav.top-nav>li>a {font-size:.7em; color:#6e6e6e; text-transform: uppercase; letter-spacing:.2em; font-weight: 700;}
.navbar-nav.top-nav>li>a:hover {background:#fff; color:#002f6c;}
.navbar-nav.main-nav>li>a {font-size:1.3em; font-weight:300;}
.navbar-nav.main-nav>li>a {padding:25px 10px; color:#002f6c;}
.navbar-nav.main-nav>li>a:hover {color:#65a7e8;}
.navbar-nav.top-nav>li.social>a {padding:15px 7px}
.navbar-nav.top-nav>li.phone-number {font-size:.8em; border:1px solid #002f6c; margin:8px 10px; padding:5px 10px; color:#002f6c; border-radius: 50px;}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {background-color:#aaa}

.navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus {background-color: #ffffff;}

.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {color:#aaa;}

.slider-section .slide {height:calc(100vh - 130px);}
.slider-section {position:relative;}
.slider-buttons {position:absolute; bottom:15vh; left:0; width:100%; z-index:200; text-align:center}
.slider-section .bx-wrapper .bx-pager, .slider-section .bx-wrapper .bx-controls-auto {bottom:0; padding:5px 10px 10px;; width:auto; left:50%; transform:translateX(-50%); background:rgba(13,78,142,.2); border-radius:5px 5px 0 0}
.slider-section .bx-pager.bx-default-pager a.active {background:#fff}
.slider-section .bx-pager.bx-default-pager a {background:transparent; border:1px solid #fff;}

.slider-button {background:#ccc; font-size:1.5em; text-transform:uppercase; letter-spacing:.2em; font-weight:700; padding:60px; border-radius:200px; margin:10px; color:#fff; box-shadow: 0 10px 20px rgba(0,0,0,.1); position: relative; top:0; transition: color .25s, top .25s, border-color .25s;}
.slider-button:hover {top:-5px; transition: color .25s, top .25s, border-color .25s;}
.slider-button#office-delivery {background: url(../images/bg-office.jpg) center center no-repeat; background-size: cover;}
.slider-button#office-delivery:hover {color:#65a7e8;}
.slider-button#office-delivery:hover span {border-color:#65a7e8;}
.slider-button#home-delivery {background: url(../images/bg-home.jpg) center center no-repeat; background-size: cover;}
.slider-button#home-delivery:hover {color:#002f6c;}
.slider-button#home-delivery:hover span {border-color:#002f6c;}
.slider-button span {border-bottom: 2px solid #fff; padding-bottom:5px; transition: border-color .25s;}
.slider-button:hover span {transition: border-color .25s;}

.home-announcement {padding:30px; 0;}

.three-column-section#our-products {background:#f3f3f3;}

#areas-we-serve {background:url(../images/bg-maps.jpg) center center no-repeat; background-size: cover;}
form .row {margin:15px -15px;}
.input-group-btn .btn {font-size:10px;}
.map-form {padding-top:10px;}

.featured-products {background:url(../images/bg-featured-products.jpg) center bottom no-repeat; background-size: cover; padding-top:0; padding-bottom:250px;} 
.two-up-slider .row {padding:0 50px;}
.product-card-holder {padding:10px;}
.product-card {box-shadow:0 3px 10px rgba(0,0,0,.1);}
.card-image {text-align:center; padding:20px; 
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,d7e8f9+100 */
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #ffffff 0%, #d7e8f9 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #ffffff 0%,#d7e8f9 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #ffffff 0%,#d7e8f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d7e8f9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.card-image img {width:150px; display:block; margin:0 auto;}
.card-content {padding:30px; background:rgba(255,255,255,.8);}
.card-content h4 {margin:0 0 10px;; font-size:1.1em;}

.card-content p {font-size:.8em;}
.two-up-slider-holder .card-content p {height:60px;}
.two-up-slider-holder .card-content h4 {height:30px;}


.testimonials {background:#5b7fa8;}
.testimonial-text {padding:0 10%; text-align:center; font-size:1.3em; font-style:italic;}
.testimonial-credit {font-size:.6em; font-style:normal; text-transform:uppercase; letter-spacing:.2em; font-weight:700}

.call-to-action h3 {padding-bottom:20px;}
.call-to-action {background:url(../images/bg-cta.jpg) center bottom no-repeat; background-size: cover; padding-bottom:400px;}

.footer-logo {padding:0 20px;}
.footer-social {padding:0; margin:0}
.footer-social li {display:inline-block;  list-style:none; padding-right:7px;}
.footer-links ul {padding:0 0 10px;}
.footer-links li {list-style:none; font-size:.8em; text-transform:uppercase; letter-spacing:.1em; font-weight:700; padding-bottom:5px;}

.subfooter {padding:30px; font-size:.6em; text-transform:uppercase; letter-spacing:.2em; color:#aaa}
.subfooter a {font-weight:100}

.interior-nav {margin:0; padding:0; text-align:center; background:#0d4e8e; font-size:0;}
.interior-nav li {list-style:none; display:inline-block; }
.interior-nav a {color:#fff; display:block; text-transform:uppercase; letter-spacing:.1em; padding:15px 20px; font-size:14px;}
.interior-nav a:hover {background:#002f6c;}

.two-column-image-right .row, .two-column-image-right .col-sm-6, .two-column-image-right .col-sm-5 {display:flex;}
.two-column-image-right .col-sm-6, .two-column-image-right .col-sm-5 {flex-direction:column; justify-content:center;}

.two-column-image-left .row, .two-column-image-left .col-sm-6, .two-column-image-left .col-sm-5 {display:flex;}
.two-column-image-left .col-sm-6, .two-column-image-left .col-sm-5 {flex-direction:column; justify-content:center;}

.interior-header {background:url(../images/slide-1.jpg) center top no-repeat #c8d6eb; background-size: cover; padding: 143px 0;}
.interior-header h1, .header-title-panel h1 {padding-bottom:10px;}
.interior-header p, .header-title-panel p {font-size:1.2em; font-weight:200;}
.interior-header .col-sm-6, .header-title-panel {background:rgba(255,255,255,.8)}
.interior-header.dark-bg .col-sm-6, .header-title-wrapper.dark-bg .header-title-panel {background:rgba(13,78,142,.8)}
.header-title-wrapper {background:#fff;}
.header-title-wrapper .row {display:flex;justify-content:center;}
.header-title-wrapper.dark-bg {background:#0d4e8e;}
.header-title-panel {margin:0; border-radius:4px;}
.header-title-panel h1 {font-weight: 600;padding-left:15px; padding-right:15px;}
.header-title-panel p:last-child {margin-bottom:0;}

#five-gallon-bottled-water {background:url(../images/bg-5-gallon.jpg) center top no-repeat; background-size: cover;}
#private-label {background:url(../images/bg-private-label.jpg) center top no-repeat; background-size: cover;}

.faq-holder {background:#0d4e8e; padding:30px 90px 30px 30px; margin-bottom:20px; border-radius:10px; position:relative; border:1px solid #0d4e8e;}
.faq-holder h4 {color:#fff;}
.faq-holder .faq-answer {height:0; overflow:hidden;}
.faq-icon {width:50px; height:50px; border:1px solid #fff; border-radius:50px; position:absolute; top:30px; right:30px;}
.faq-icon .horiz-bar {width:25px; height:3px; background:#fff; position:absolute; top:23px; left:12px;}
.faq-icon .vert-bar {height:25px; width:3px; background:#fff; position:absolute; top:12px; left:23px; opacity:1}
.faq-holder, .faq-icon div, .faq-answer, .faq-holder h4 {transition: background .25s, opacity .25s, height .25s, color .25s;}

.faq-holder.active {background:#fff;}
.faq-holder.active .faq-answer {height:auto; }
.faq-holder.active h4 {color:#0d4e8e;}
.faq-holder.active .faq-icon {border-color:#0d4e8e;}
.faq-holder.active .horiz-bar {background:#0d4e8e;}
.faq-holder.active .vert-bar {background:#0d4e8e; opacity:0;}

.padded-section.short-header {padding:50px 0;}


.woocommerce ul.products li.product a {box-shadow: 0 5px 15px rgba(0,0,0,.1); display:block; border-radius:5px; overflow:hidden;}
.woocommerce ul.products li.product a img {}
.woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3 {padding:20px !important; font-weight:700; text-transform:none; letter-spacing:0; height:80px;}
.woocommerce ul.products li.product .woocommerce-loop-category__title mark {font-weight:100; background:transparent; font-size:10px;}
#secondary h1.widget-title, .woocommerce-products-header__title.page-title {text-transform:uppercase; letter-spacing:.2em; font-size:2em;}
.woocommerce ul.products li.product .price {display:block; padding:0 20px 20px;}
.padded-section.shop-section {padding-top:50px;}
.woocommerce-cart .padded-section {padding-top:50px;}

.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {background-color:#0d4e8e !important;}
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {background-color:#65a7e8 !important;}

.blog article, .category article {background:#f3f3f3; padding:30px 50px; margin-bottom: 30px; position: relative;}
.blog article h1 a, .category article h1 a {font-weight:100;}
.blog article .entry-meta, .category article .entry-meta {font-size:.8em; text-transform:uppercase; letter-spacing:.2em; margin-bottom:20px;}
.blog article.has-post-thumbnail, .category article.has-post-thumbnail {padding-top: 230px;}
.blog article.has-post-thumbnail a.post-thumbnail, .category article.has-post-thumbnail a.post-thumbnail {display: block; position: absolute; top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 200px; overflow: hidden;}
.blog article.has-post-thumbnail a.post-thumbnail img, .category article.has-post-thumbnail a.post-thumbnail img {display: block; width: 100%; height: auto;}
.blog .featured-post-section {background: no-repeat top center;background-size: cover; padding: 90px 50% 90px 20px;}
.blog .featured-post-section article {background: none;padding: 0 350px 0 0;margin: 0 auto auto;width: 900px;}
.blog .featured-post-section article.has-post-thumbnail .post-thumbnail {display: none;}

.blog .featured-post-section article {padding:30px; background-color:rgba(255,255,255,.8); width:100%; }

.widget-title {font-size:1.5em; font-weight:700;}
.widget {padding-bottom:10px; margin-bottom:10px;}
.widget:after {content:""; display:block; height:20px; width:100%; background:url(../images/widget-divider.png) center center no-repeat; background-size: contain; padding-top:20px;}
.widget h6 {line-height:1.5em; color:#0d4e8e}

.widget_categories li {list-style:none;}
.widget_categories ul {padding:0; margin:0;}
.widget_categories li a {font-size:.8em; text-transform:uppercase; letter-spacing:.2em; color:#65a7e8;}
.widget:after {margin-top:30px;}

span.wpcf7-list-item {display:block !important; position: relative;}
.wpcf7-submit {border-radius: 100px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;background-color: #002f6c; color: #fff; border: none; padding:15px 40px; margin-top:30px; }
.wpcf7-submit:hover {color:#000; background:#eee;}

#loginModal h2 {font-size:1.5em; margin:30px 0;}
#loginModal h4 {font-size:1.2em;}
#loginModal p {margin:30px 0;}

.dark-bg, .dark-bg h1 {color:#fff; text-shadow:0 0 20px rgba(13,78,142,.9)}
.dark-bg {position:relative;}
/* .dark-bg:after {content:""; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(13,78,142,.5);} */
.dark-bg .container {position:relative; z-index:1}


@media (max-width:1200px){
	.top-nav {right:10px;}
	.nav>li>a {padding:10px}
	.navbar-nav.top-nav>li.social>a {padding:10px 5px}
	.navbar-nav.top-nav>li.phone-number {margin:4px 10px;}
	.navbar-brand>img {max-height:100px; width: auto;}
	.navbar-nav.main-nav>li>a {padding:25px 7px; font-size:1.2em;}
}

@media (max-width:991px){
	.navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
    
    .navbar-toggle {margin-top:15px;}
	.navbar-inverse .navbar-toggle .icon-bar {background:#0d4e8e}
	.navbar-inverse .navbar-toggle {border-color:#0d4e8e;}
	.top-nav {position:relative; right:auto; top:auto; padding-bottom:25px;}
	.navbar-brand>img {max-height:80px; width:auto;}
	.navbar-nav.main-nav>li>a {font-size:.7em; font-weight:700; text-transform:uppercase; letter-spacing:.2em;}
	.navbar-nav.main-nav>li>a, .nav>li>a {padding:5px; border-bottom:1px solid #eee}
	.navbar-nav {margin-top:0;}
	.nav>li.social>a {border-bottom:none;}
	.nav>li.social, .nav>li.phone-number {display:inline-block; margin-top:10px;}
	
	.slider-button {font-size:1.3em; padding-left:40px; padding-right:40px;}
}

@media (max-width:768px){
	.footer-logo {padding-bottom:20px; width:200px; margin:0 auto;}
	footer, .footer-links li {text-align:center;}
	
	.column-image {margin-left:auto; margin-right:auto;}
	
	.two-column-image-right .row, .two-column-image-right .col-sm-6, .two-column-image-right .col-sm-5 {display:block;}
	.two-column-image-left .row, .two-column-image-left .col-sm-6, .two-column-image-left .col-sm-5 {display:block;}
	
	.slider-button {display:block; padding:30px;}
	.slider-buttons {bottom:10vh}
	
	.padded-section {padding:70px 0;}
	
	.interior-nav a {font-size:12px; padding:10px;}
	
	
}

@media (max-width:600px){
    .slider-section .slide {height:120vw;}
    .home .navbar-brand>img, .navbar-brand>img {max-height:70px;}
	.slider-button {padding:15px; font-size:12px;}
	.slider-buttons {bottom:5vh;}
	.slide-content {height:60vh;}
	.slide-content p, .interior-header p {font-size:1em;}
	
	.announcement-icon {display:none;}
	
	.three-column-section .padded-column {margin-bottom:30px;}
	
	.map-form input[placeholder="Email"] {margin-bottom:12px;}
	
	.two-column-image-right {background-position: center left !important;}
	.two-column-image-left {background-position: center right !important;}
	
	.blog .featured-post-section {padding:90px 20px;}
	
	
	
}