/*
Theme Name: hwhenvironmental
Author: Al Silver
Description: hwhenvironmental's site custom theme
Version: 1.0
Text Domain: hwhenvironmental
*/


/**
 * Alignments
 */
.twocol{-webkit-column-count: 2; /* Chrome, Safari, Opera */-moz-column-count: 2; /* Firefox */column-count: 2; -webkit-column-gap: 40px; /* Chrome, Safari, Opera */-moz-column-gap: 40px; /* Firefox */column-gap: 40px;}
.alignleft {
 float: left;
 margin: 0.375em 1.75em 1.75em 0;
}

.alignright {
 float: right;
 margin: 0.375em 0 1.75em 1.75em;
}

.aligncenter {
 clear: both;
 display: block;
 margin: 0 auto 1.75em;
}

blockquote.alignleft {
 margin: 0.3157894737em 1.4736842105em 1.473684211em 0;
}

blockquote.alignright {
 margin: 0.3157894737em 0 1.473684211em 1.4736842105em;
}

blockquote.aligncenter {
 margin-bottom: 1.473684211em;
}

#post-13 ul { /*margin-left: 25px;*/position: relative; left: 20px; }
#post-223 ul, #post-80 ul{ list-style-position: inside; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
/**
 * Galleries
 */

.gallery {
 margin: 0 -1.1666667% 1.75em;
}

.gallery-item {
 display: inline-block;
 max-width: 33.33%;
 padding: 0 1.1400652% 2.2801304%;
 text-align: center;
 vertical-align: top;
 width: 100%;
}

.gallery-columns-1 .gallery-item {
 max-width: 100%;
}

.gallery-columns-2 .gallery-item {
 max-width: 50%;
}

.gallery-columns-4 .gallery-item {
 max-width: 25%;
}

.gallery-columns-5 .gallery-item {
 max-width: 20%;
}

.gallery-columns-6 .gallery-item {
 max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
 max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
 max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
 max-width: 11.11%;
}

.gallery-icon img {
 margin: 0 auto;
}

.gallery-caption {
 color: #686868;
 display: block;
 font-size: 13px;
 font-size: 0.8125rem;
 font-style: italic;
 line-height: 1.6153846154;
 padding-top: 0.5384615385em;
}

.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
 display: none;
}


/**
 * THEME CSS
 */
/* Placeholder text color -- selectors need to be separate to work. */
::-webkit-input-placeholder {
 color: #777;
 font: 12px 'Raleway', sans-serif;
}

:-moz-placeholder {
 color: #777;
 font: 12px 'Raleway', sans-serif;
}

::-moz-placeholder {
 color: #777;
 font: 12px 'Raleway', sans-serif;
 opacity: 1;
 /* Since FF19 lowers the opacity of the placeholder by default */
}

:-ms-input-placeholder {
 color: #777;
 font: 12px 'Raleway', sans-serif;
}


@keyframes fadein { from { opacity:0;} to { opacity:1;} }
@-moz-keyframes fadein { /* Firefox */ from { opacity:0;} to { opacity:1;} }
@-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity:0;} to { opacity:1;} }
@-o-keyframes fadein { /* Opera */ from { opacity:0; } to { opacity: 1; } }

#wpadminbar { margin-top: -15px; opacity: 0;}
#wpadminbar:hover{ margin: 0; opacity: 1;}
html.js,html.no-js{ margin: 0 auto !important;}
body{ background: #fff; color: #37464E; font:15px 'Raleway', sans-serif; margin: 0 auto; position: relative; animation: fadein 1s; -moz-animation: fadein 1s; /* Firefox */ -webkit-animation: fadein 1s; /* Safari and Chrome */ -o-animation: fadein 1s; /* Opera */}
a,img{ color: #0876C1; text-decoration: none; border: none; max-width: 100%; height: auto;}
ul,dd{ padding: 0; margin: 0; line-height: 160%;}
input, select, textarea { border: 1px solid #ddd; max-width: 90%; padding: 10px; width: 100%;}
input[type="submit"] { width: 200px; margin: 10px auto 0; } 
.wpcf7-form { text-align: center; }
.wpcf7-form label { text-align: left; display: block; }
div.quote-btn input[type="submit"]{color: white;background: #81d325;}

h1,h2,h3,h4,h5{ color: #0667B5; font-family: Montserrat, sans-serif; line-height: 110%; hyphens: auto; margin: 0 auto;}
a, a > *, input, select, textarea, #page, .main-navigation li, #header, #menu-btn div, #wpadminbar, #content-bottom2 .widget_simpleimage, #content-bottom2 .widget_simpleimage *{ -webkit-transition: all ease-in-out 0.25s !important; -moz-transition: all ease-in-out 0.25s !important; -o-transition: all ease-in-out 0.25s !important; transition: all ease-in-out 0.25s !important;}

.container{ width: 1280px; max-width: 100%; margin: 0 auto; padding: 0; position: relative; clear: both; }
.left{ float: left; }
.right{ float: right; }
.clear{clear: both;}


/*Socials*/
.socials li{ display: inline-block; margin: 0 3px; vertical-align: top; text-indent: -9999px; color: transparent;}
.socials li a{ background-position: center top; overflow: hidden; }
.socials li a:hover{ background-position: center bottom; }
.fb{ background: url('images/facebook.png') no-repeat; display: block; width: 24px; height: 24px; }
.gplus{ background: url('images/gplus.png') no-repeat; display: block; width: 24px; height: 24px; }
.twitter{ background: url('images/twitter.png') no-repeat; display: block; width: 24px; height: 24px; }
.linkedin{ background: url('images/linkedin.png') no-repeat; display: block; width: 24px; height: 24px; }


#header-top{ background: url('images/header-gray-bg.jpg') repeat-x center bottom #E6E7E8; color: #78909C; font: 16px Montserrat, sans-serif; padding: 5px 0;}
#header-top .header-right .phone { color: #0876c1; display: inline-block; font-size: 30px; margin: 0 0 0 10px; vertical-align: middle;}
#header-top .socials { float: left; padding: 5px 0; width: 50%;}
#header-top .header-right { float: right; text-align: right; width: 50%;}

#header-main{ background: url('images/header-blue-bg.jpg') repeat-x center bottom #0876C1; border-bottom: 1px solid #000; border-top: 1px solid #fff; color: #fff; }
#logo-con { display: inline-block; vertical-align: middle; /*width: 25%;*/ width: 36%; padding: 5px 0;}
#logo { display: block;}
#site-navigation { display: inline-block; text-align: right; /*width: 74%;*/width: 63%;}
#site-navigation li { display: inline-block; margin: 0 25px;}
#site-navigation li a { border-bottom: 5px solid transparent; color: #fff; display: block; font: 16px/25px Montserrat,sans-serif; height: 25px; padding: 30px 0;}
#site-navigation li.current-menu-item a, #site-navigation li:hover a { border-bottom: 5px solid #76bb22;}


/*submenu*/
#site-navigation .sub-menu {position: absolute; width: 200px;z-index: 99;padding: 15px 0 0 0; -moz-transition:0.8s;-o-transition:0.8s;-ms-transition:0.8s;-webkit-transition:0.5s;transition:0.8s;  opacity: 0;}
#site-navigation li.menu-item-has-children:hover .sub-menu {opacity: 1}
#site-navigation .sub-menu:before {content:'▲'; display: block; position: absolute; margin: -17px 0 0 15px;color: #6990c5;}
#site-navigation .sub-menu li {display: block; width: auto; padding:0;margin: 0}
#site-navigation .sub-menu li a {display: block; width: auto; padding:5px 10px;margin: 0; text-align: left; border-bottom: 1px solid #000;background: #6990c5}
#site-navigation .dropdown-toggle {display: none;}
#site-navigation .sub-menu li a:hover {color:#0665b4}


#banner { position: relative; overflow: hidden;}
#banner * {-moz-transition:0s!important;-o-transition:0s!important;-ms-transition:0s!important;-webkit-transition:0s!important;transition:0s!important;}
#banner .ms-slide-info { color: #fff; font-size: 18px; font-weight: 500; left: 0; margin: auto !important; max-width: 1280px; position: absolute !important; right: 0; top: 7%;}
#firstslide .ms-slide-info:before, #firstslide .ms-slide-info .ms-info:after{ display: none!important; }
#banner .ms-slide-info .ms-info-inner:before{	background: url("images/banner-caption-bg.png");	content: ""; height: 100%; left: -100%; position: absolute; width: 100%; top:0px;}
#banner .ms-slide-info .ms-info-inner.first:before {display: none}
#banner .ms-slide-info .ms-info-inner { background: url("images/banner-caption-bg.png"); max-width: 600px; padding: 25px; position: relative;}
#banner .ms-slide-info .ms-info-inner:after { background: url("images/banner-after.png") no-repeat scroll right center / 100% 100%; content: ""; height: 100%; position: absolute; right: -220px; top: 0; width: 220px;}
#banner .ms-slide-info .ms-info-inner.first {display: block;margin: 27% auto 0; text-align: center;max-width: 800px;}
#banner .ms-slide-info .ms-info-inner.first:after {display: none}
#banner .ms-slide-info .ms-info-inner.first h2 {font-size: 30px;}
#banner .ms-slide-info .ms-info-inner.first p {border-top: 1px dotted #fff; width: 75%; margin:20px auto; padding-top: 10px}
#banner .ms-slide-info h2 { color: #fff; font-size: 43px;}
#banner .ms-slide-info h3 { color: #fff; font-size: 40px;}
#banner .ms-slide-info h4 { color: #fff; font-size: 35px;}
#banner .ms-slide-info h5 { color: #fff; font-size: 30px;}
#banner .ms-slide-info ul { padding: 15px 0 25px 20px;}
#banner .ms-slide-info li{ list-style-image: url('images/list.png'); }
#banner .ms-bullets { bottom: 27% !important;}
#banner-callouts { bottom: 0; left: 0; margin: auto; position: absolute; right: 0; text-align: center;z-index: 999;}
#banner-callouts .widget:nth-of-type(3n) { border: medium none;}
#banner-callouts .widget { background: url('images/gray-big-gr.png') repeat-x center top #c0c1c7; border-right: 1px solid #fff; display: inline-block; font-size: 13px; text-align: left; vertical-align: top; width: 415px; height: 185px; max-width: 30%; overflow-y: auto;}
#banner-callouts .widget .widget-title { color: #0876c1; font: bold 23px Montserrat,sans-serif; margin: 10px auto; }
#banner-callouts .widget:hover { background: url("images/blue-big-gr.png") repeat-x scroll center top #0E469C; color: #fff;}
#banner-callouts .widget:hover .widget-title{ color: #fff;}
#banner-callouts .widget .simple-image-widget-container { padding: 25px;}
#banner-callouts .widget:first-of-type { border-radius: 5px 0 0;}
#banner-callouts .widget:nth-of-type(3) { border-radius: 0 5px 0 0;}
#banner-callouts .widget .simple-image { background: url('images/light-blue-gr.jpg') repeat-x center top #fff; border-radius: 100px; float: left; height: 92px; margin: 15px 25px 15px 0; overflow: hidden; position: relative; width: 92px;}
#banner-callouts .widget .simple-image img { bottom: 0; left: 0; margin: auto; max-height: 100%; max-width: 100%; position: absolute; right: 0; top: 0;}
#banner-callouts .simple-image-widget-container p { color: #37474F; margin: 0;}
#banner-callouts .widget:hover .simple-image-widget-container p{ color: #fff; }
#banner-callouts .simple-image-widget-container p.text { line-height: 20px; max-height: 60px; overflow: hidden;}
#banner-callouts p.more { display: none;}


/*SMART SLIDER*/
#banner .n2-ss-slide-4 .n2-ss-layer {background: rgba(0,0,0,.7);display: block;margin: 20% auto 0;text-align: center!important;max-width: 800px;width: 100%!important;position: relative!important;padding: 15px!important}
#banner .n2-ss-slide-4 .caption1 h2 {font-size: 30px!important;color: #fff;}
#banner .n2-ss-slide-4 .caption1 h3 {color: #fff;font-size: 40px!important;}
#banner .n2-ss-slide-4 .caption1 p {border-top: 1px dotted #fff!important; width: 75%; margin:20px auto; padding-top: 10px!important;font-size: 18px!important;}
#banner .n2-ss-layer a { background: url('images/header-gray-bg.jpg') repeat-x center bottom #E6E7E8; border-radius: 4px; color: #263238; display: inline-block; font: 12px Montserrat,sans-serif; letter-spacing: 2px; padding: 13px 20px;margin: 0 auto} 
#banner .n2-ss-layer a:hover{ background: url('images/green-small-gr.jpg') repeat-x center bottom #76BB22 ; color: #fff; }
#banner .n2-ss-slide-13 .n2-ss-layer, #banner .n2-ss-slide-14 .n2-ss-layer, #banner .n2-ss-slide-15 .n2-ss-layer, #banner .n2-ss-slide-16 .n2-ss-layer {position: relative!important; width:100%!important; margin: 5% auto 0!important}
#banner .n2-ss-slide-13 .n2-ss-layer li, #banner .n2-ss-slide-14 .n2-ss-layer li, #banner .n2-ss-slide-15 .n2-ss-layer li, #banner .n2-ss-slide-16 .n2-ss-layer li {margin: 5px 0}
#banner .n2-ss-slide-13 h3 {font-size: 35px!important;}
#banner .n2-ss-slide-13 h2 {font-size: 25px!important;}


#content{ padding: 90px 0 0; position: relative; }
#content:after{ background: url('images/light-blue-gr.png') repeat-x center top; position: absolute; content: ''; top: 0; left: 0; right: 0; margin: auto; height: 100%; z-index: -1; }
#content h1{ font-size: 40px; }
#content p, #content ul{ line-height: 180%;} 
#content ul {margin: 10px 0 20px 10px;}
#content a:hover{ color: #8CD82D; }
#content blockquote{ background: url('images/blockquote.png') no-repeat left top; padding-left: 60px; margin: 20px 0;}
#content .cb-shade-box-inner h3 img, #content .cb-shade-box-inner h2 img, #content .cb-shade-box-inner h4 img, #content .cb-shade-box-inner h5 img { display: inline-block; vertical-align: middle;}


#footer-top { background: url("images/blue-big-gr.jpg") repeat-x center bottom #0875c1; color: #fff; font: 13px Montserrat, sans-serif; padding: 60px 0; text-align: center;}
#footer-top section { display: inline-block; margin: 0 auto 25px; max-width: 450px; padding: 0 3.5%; text-align: left; vertical-align: top;}
#footer-top section .widget-title:after { border-bottom: 1px solid #fff; bottom: 0; content: ""; height: 1px; left: 0; position: absolute; width: 50px;}
#footer-top section .widget-title { color: #fff; font: bold 17px Montserrat,sans-serif; margin: 0 auto 25px; padding: 0 0 15px; position: relative; text-transform: uppercase;}
#footer-top section p{ font: 14px/160% "Raleway",sans-serif; }
#footer-top a{ color: #fff; }
#footer-top a:hover, #footer-top .current-menu-item a, #footer-top .textwidget a{ color: #8CD82D; }
#footer-top .socials li a{ background-position: center bottom; }
#footer-top .socials li a:hover{ background-position: center top; }
#footer-top .menu li { display: block; margin: 0 0 15px;}
#footer-top .phone { display: block;}
#copyright{ background: url('images/header-gray-bg.jpg') repeat-x center bottom #E6E7E8; color: #455A64; font: 12px Montserrat, sans-serif; padding: 15px 0; text-align: center;}
#copyright small { font-size: 12px; letter-spacing: 2px;}

/*.home.page #content{margin:-88px 0 0; padding: 128px 0 0!important;}*/
/*.home.page #banner{min-height: 800px!important;}*/
.page #banner{min-height: auto!important;}
.page #content{padding: 38px 0 0!important;}
.blog #content{padding: 38px 0 0!important;}



/* Beaver Overrides */
.cb-shade-box-inner img { margin: 0 auto;}

.single #primary, .blog #primary, .archive #primary {width: 100%; max-width: 1100px; margin: 0 auto;}
.single #primary #main, .blog #primary #main, .archive #primary #main {width: 100%; max-width: 65%; float: left;}
.single #primary aside, .blog #primary aside, .archive #primary aside {width: 100%; max-width: 30%; float: right;padding: 0 15px}

.single #primary aside ul, .blog #primary aside ul, .archive #primary aside ul {padding-left: 30px; margin-top: 10px;}
.single #primary aside ul li, .blog #primary aside ul li, .archive #primary aside ul li {list-style: none;}
.single #primary aside section, .blog #primary aside section, .archive #primary aside section {margin-bottom: 35px; border-bottom: 1px solid #ccc}

.single #primary h1, .blog #primary h1, .archive #primary h1 {margin-bottom: 25px}
.single #primary h2, .blog #primary h2, .archive #primary h2 {margin-bottom: 0px}
.single #primary .date, .blog #primary .date, .archive #primary .date {margin:0;}
#banner .ms-slide-info .ms-info-inner{text-align:left;}

/**
 * Media Queries
 */

/**
 * Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See https://core.trac.wordpress.org/ticket/25888.
 */
@-ms-viewport {
 width: device-width;
}

@viewport {
 width: device-width;
}
/*#banner {min-height: 800px;}*/
@media (max-width: 1600px) {#banner .ms-slide-info .ms-info-inner.first {margin:20% auto 0;}}
@media (max-width: 1440px) {#banner .ms-slide-info .ms-info-inner.first {margin:16% auto 0;}}

@media (max-width: 1360px) {
	#banner .ms-slide-info { top: 5%;}
	#banner .ms-slide-info{ font-size: 14px; }
	#banner .ms-slide-info h2 { font-size: 30px;}
	#banner .ms-slide-info h3 { font-size: 27px;}
	#banner .ms-slide-info h4 { font-size: 24px;}
	#banner .ms-slide-info h5 { font-size: 20px;}
	#banner .ms-slide-info .ms-info-inner { max-width: 400px; }
	#banner .ms-slide-info .ms-info-inner.first { max-width: 800px; }
}


@media (max-width: 1280px) {

	.fl-row-fixed-width{ padding: 0 15px; }
	.container{ padding: 0 15px; width: auto; }
	#site-navigation li {margin:0 15px;}
	/*#banner {min-height: 300px;}*/
	#banner .ms-slide-info .ms-info-inner.first { margin: 5% auto 0;}

}

@media (max-width: 1185px) {
#banner-callouts {bottom: 0}
#site-navigation li {margin:0 5px;}
#banner .n2-ss-slide-13 .n2-ss-layer, #banner .n2-ss-slide-14 .n2-ss-layer, #banner .n2-ss-slide-15 .n2-ss-layer, #banner .n2-ss-slide-16 .n2-ss-layer {position: relative!important; width:100%!important; margin: 1% auto 0!important}
#banner .n2-ss-slide-4 .n2-ss-layer {margin: 13% auto 0;}
#banner .n2-ss-slide-4 .caption1 h2 {font-size: 20px !important;}
#banner .n2-ss-slide-4 .caption1 h3 {font-size: 25px !important;}
#banner .n2-ss-slide-4 .caption1 p {font-size: 10px !important;}
}

@media (max-width: 1024px) {
	#banner .ms-slide-info{ font-size: 12px; }
	#banner .ms-slide-info h2 { font-size: 25px;}
	#banner .ms-slide-info h3 { font-size: 22px;}
	#banner .ms-slide-info h4 { font-size: 20px;}
	#banner .ms-slide-info h5 { font-size: 15px;}
	#banner-callouts .widget .widget-title{ font-size: 17px; }
	.single #content, .blog #content, .archive #content {width: auto; max-width: 100%; padding:15px;}
}


@media (max-width: 960px) {
	#banner .ms-slide-info{ font-size: 14px; }
	#banner .ms-slide-info h2 { font-size: 30px;}
	#banner .ms-slide-info h3 { font-size: 27px;}
	#banner .ms-slide-info h4 { font-size: 24px;}
	#banner .ms-slide-info h5 { font-size: 20px;}
	#banner .ms-slide-info .ms-info{ max-width: 400px; }

	#banner .ms-slide-info { /*background: rgba(65, 65, 65, 0.9);*/ border-radius: 0; max-width: 100%; padding: 20px; position: static !important; width: auto}
	#banner .ms-slide-info .ms-info-inner.first{ margin-top: 0; }
	#banner .ms-info-inner.first, #banner .ms-slide-info .ms-info { max-width: 100%;}
	#banner .ms-slide-info .ms-info-inner { background: rgba(0,0,0,.5); max-width: 100%; padding: 10px; width:auto}
	#banner .ms-slide-info .ms-info-inner:after, #banner .ms-slide-info .ms-info-inner:before { display: none; }
	#banner-callouts { background: rgba(65, 65, 65, 0.9); position: static; padding: 30px 0 10px 0;}
	#banner-callouts .widget { border: medium none; border-radius: 5px !important; display: block; height: auto; margin: 0 auto 20px; max-width: 90%;}.
	.single #primary, .blog #primary, .archive #primary {width: 100%; max-width: 100%; margin: 0 auto;}
	.single #primary #main, .blog #primary #main, .archive #primary #main {width: 100%; max-width: 100%; float: none;}
	.single #primary aside, .blog #primary aside, .archive #primary aside {width: 100%; max-width: 100%; float: none;padding: 15px 0}

}

@media (max-width: 860px) {
	#header-main{ text-align: center; }
	#logo-con{ width: auto; }
}

@media (max-width: 768px) {
	.cb-shade-boxes { margin: 25px auto;}
}

@media (max-width: 640px) {
	#banner {display: none!important;}
	/*#banner .ms-slide-info, #banner .n2-ss-slide-4 .n2-ss-layer {display: none!important;}*/
	#header-top .socials { float: none; text-align: center; width: auto;}
	#header-top .header-right { float: none; text-align: center; width: auto;}
	#header-top .header-right .phone { font-size: 20px;}

	#content { padding: 50px 0 0;}
	#content h1{ font-size: 25px; }

	#footer-top section { display: block; padding: 0; text-align: center; margin: 0 auto 40px;}
	#footer-top section:last-of-type{ margin-bottom: 0px; }
	#footer-top section .widget-title:after { margin: 0 auto; right: 0;}

	.fl-col.fl-node-580dd8965583c.fl-col-small { padding: 0 15px;}
}