/* ================================================================ *\
	#Reset
\* ================================================================ */

* { padding: 0; margin: 0; outline: 0; }

/* ================================================================ *\
	#Base
\* ================================================================ */

article,
aside,
figcaption,
figure,
footer,
header,
main,
nav,
section { display: block; }

html,
body { height: 100%; }

html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { font-family: "Lato", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.44; color: #261c1c; letter-spacing: -0.005em; -webkit-font-smoothing:antialiased; }

h1 {}
h2 {}
h3 { font-size: 24px; margin-bottom: 10px;}
h4 {}
p {}
center { margin: 30px 0; }

a { text-decoration: none; }
a:hover { text-decoration: none; }

img { border: 0; vertical-align: middle; max-width: 100%; margin: 20px auto; display: block; }
strong { font-weight: bold; }
small { font-size: 80%; }

button,
input,
select,
textarea { font-family: inherit; font-size: inherit; color: inherit; -webkit-font-smoothing:antialiased; }

button,
input[type="button"],
input[type="reset"],
input[type="submit"] { cursor: pointer; }

button::-moz-focus-inner,
input::-moz-focus-inner { padding: 0; border: 0; }

button { overflow: visible; }
textarea { overflow: auto; resize: none; }

table { border-collapse: collapse; border-spacing: 0; }
th,
td { padding: 5px 10px; }

/* ================================================================ *\
	#Helpers
\* ================================================================ */

.alignleft { float: left; }
.alignright { float: right; }
.hidden { display: none; visibility: hidden; }

.clearfix:before,
.clearfix:after { display: table; content: ' '; }
.clearfix:after { clear: both; }

/* ------------------------------------------------------------ *\
	#Clearfixes
\* ------------------------------------------------------------ */
.header .shell:before,
.header .shell:after { display: table; content: ' '; }
.header .shell:after { clear: both; }

/* ------------------------------------------------------------ *\
	#Containers
\* ------------------------------------------------------------ */
.main { padding-bottom: 29px; }
.shell { max-width: 960px; margin: 0 auto; box-sizing: border-box; }

/* ------------------------------------------------------------ *\
	#Buttons
\* ------------------------------------------------------------ */
.btn { display: inline-block; }
.btn-simple { padding: 6px 17px; border-radius: 4px; border: 2px solid #00ae91; background-color: transparent; font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 14px; line-height: 1.2; color: #00ae91; }
.btn-simple:hover { background: #00ae91; color: #fff; }

/* ------------------------------------------------------------ *\
	#Header
\* ------------------------------------------------------------ */
.header { padding: 10px 0 13px; background: #fff; box-shadow: 2px 2px 3px rgba(0, 0, 0, .42); }
.logo { float: left; display: block; width: 370px; height: 100px; background: url(images/logo.png) no-repeat 0 0; background-size: contain; font-size: 0; line-height: 0; text-indent: -4000px; }
.header-inner { float: right; padding: 6px 1px 0 0; text-align: right; }
.header-inner .phone { margin-bottom: 15px; }
.header-inner .phone a[href^="tel"] { display: inline-block; margin-right: 25px; font-size: 24px; line-height: 1.1; color: #00a651; font-weight: bold; vertical-align: middle; }

.list-areas { margin-bottom: 6px; font-size: 0; }
.list-areas li { display: inline-block; height: 12px; line-height: 12px; vertical-align: middle; }
.list-areas li + li { padding-left: 3px; border-left: 1px solid #222; margin-left: 5px; }
.list-areas a { font-size: 13px; line-height: 12px; color: #222; }


/* ------------------------------------------------------------ *\
	#Slider
\* ------------------------------------------------------------ */
.section-slider { position: relative; }
/* ------------------------------------------------------------ *\
.section-slider:after,
.section-slider:before { z-index: 20; }
.section-slider:after { position: absolute; top: 0; right: 0; width: 364px; height: 100%; background: url(images/slider-overlay-right.png) no-repeat 0 0; content: ''; }
.section-slider:before { position: absolute; top: 0; left: 0; width: 364px; height: 100%; background: url(images/slider-overlay-left.png) no-repeat 0 0; content: ''; }
\* ------------------------------------------------------------ */
.slides { overflow: hidden; list-style: none outside none; }
.slide { float: left; }
.slider { position: relative; width: 100%; height: 379px; }
.slider .slider-clip { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
.slider .slide { width: 100%; height: 379px; }
.slider .shell { position: relative; }
.slider-content { float: right; padding: 194px 192px 0 0; }
.slider-content h3 { padding: 0 18px; }
.slider-content h3 span,
.slider-content h3 em { display: block; text-align: center; }
.slider-content h3 span { font-family: "Lato", Arial, sans-serif; font-size: 37px; line-height: 1.1; color: #183872; text-transform: uppercase; font-style: normal; }
.slider-content h3 em { font-family: "LucidaSans-Italic", Arial, sans-serif; font-size: 24px; line-height: 1.2; color: #00a651; text-transform: none; font-style: normal; }
.slider-content h3,
.slider-content p span { font-family: "LucidaSans-Italic", Arial, sans-serif; font-size: 20px; line-height: 1.85; color: #444; background: rgba(255,255,255, .8); font-weight: normal; font-style: normal; }
.slider-content p { text-align: right; }
.slider-content p span { padding: 0 9px; }

/* ------------------------------------------------------------ *\
	#Section Intro
\* ------------------------------------------------------------ */
.section-intro { position: relative; padding: 72px 0 50px; margin-bottom: 61px; z-index: -3;}
.section-intro:after { position: absolute; top: 0; right: 0; width: 364px; height: 100%; background: url(images/intro-overlay-left.png) no-repeat 0 0; content: ''; background-size: cover; z-index: -2;
	-webkit-transform: rotate(-180deg);
	    -ms-transform: rotate(-180deg);
	     -o-transform: rotate(-180deg);
	        transform: rotate(-180deg);
}
.section-intro:before { position: absolute; top: 0; left: 0; width: 363px; height: 100%; background: url(images/intro-overlay-left.png) no-repeat 0 0; content: ''; z-index: -2;}
.section-intro h1 { font-size: 51px; line-height: 1.1; color: #fff; text-shadow: 5px 5px 5px rgba(0, 0, 0, .75); text-transform: uppercase; text-align: center; letter-spacing: -0.008em; }


/* ------------------------------------------------------------ *\
	#Section features
\* ------------------------------------------------------------ */
.section-features { padding: 38px 0 0; }
.section-features .section-body { padding: 39px 0 0; }
.section-features .section-entry h3 { padding: 0 20px; font-size: 26px; line-height: 1.35; font-weight: normal; color: #4d4d4d; text-align: center; }

.features { overflow: hidden; list-style: none outside none; }
.feature { position: relative; float: left; width: 48.958%; margin-right: 1.875%; margin-bottom: 16px; }
.feature-image img { width: 100%; height: auto; }
.feature:nth-child(2n+2) { margin-right: 0; }
.feature-overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: rgba(24, 56, 114, .6); color: #fff; font-size: 22px; line-height: 1.1; }
/* background: rgba(24, 56, 114, .8); */
.feature-overlay span { position: absolute; top: 50%; left: 0; display: block; width: 100%; text-align: center; }
.feature:hover .feature-overlay { background: rgba(0, 166, 81, .8); }

/* ------------------------------------------------------------ *\
	#Article
\* ------------------------------------------------------------ */
article { margin-bottom: 40px; }
.article { overflow: hidden; }
.article h2 { margin-bottom: 20px; font-size: 26px; line-height: 1.35; color: #183872; border-bottom: 1px solid #183872; }
.article p { padding-right: 10px; margin-bottom: 23px; font-size: 16px; line-height: 1.44; }
article ul { margin: 10px 30px 30px; list-style: disc; }
.article-content { float: left; width: 48.958%; }
.article-aside { float: right; width: 48.958%; }
.article-30L { float: left; width: 28.958%; }
.article-70R { float: right; width: 68.958%; }
.article-70L { float: left; width: 68.958%; }
.article-30R { float: right; width: 28.958%; }
.article-aside:after {    content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both; }
.article-aside img { margin-bottom: 22px; max-width: 100%; height: auto; }
.article p span { color: #00a651;}


/* ------------------------------------------------------------ *\
	#Services
\* ------------------------------------------------------------ */
.services { overflow: hidden; list-style: none outside none; }
.service { float: left; width: 48.854%; margin-right: 1.979%; margin-bottom: 45px; }
.service:nth-child(2n+2) { margin-right: 0; }
.service-image { margin-bottom: 10px; }
.service-image img { max-width: 100%; height: auto; }
.service h3 { margin-bottom: 4px; font-size: 26px; line-height: 1.35; color: #261c1c; }
.service p { font-size: 16px; line-height: 1.44; }

/* ------------------------------------------------------------ *\
	#Contacts
\* ------------------------------------------------------------ */
.cols { overflow: hidden; }
.col-1of2 { float: left; width: 48.958%; }
.col-1of2 ~ .col-1of2 { float: right; width: 48.958%; }

.col-third { float: left; width: 33%; }


.section-contacts .locations { margin-top: 30px; }
.section-contacts .locations p { margin-bottom: 6px; }
.section-contacts .contacts h3 { margin-bottom: 19px; font-size: 26px; line-height: 1.35; }
.section-contacts .contacts p li,
.section-contacts p { font-size: 16px; line-height: 1.44; color: #261c1c; }
.section-contacts .contacts a { color: #2a7dc3; text-decoration: underline; }
.section-contacts .list-areas li { height: 14px; line-height: 14px; margin: 0 7px 9px 0; }
.section-contacts .list-areas li + li { border-left: 0; padding-left: 0; margin-left: 0; }
.section-contacts .list-areas li a { display: inline-block; font-size: 16px; line-height: 14px; height: 14px; color: #261c1c; vertical-align: middle; text-decoration: none; }

.form-quote .form-head h2 { margin-bottom: 2px; font-size: 26px; line-height: 1.35; color: #00a651; text-transform: uppercase; }

/* ------------------------------------------------------------ *\
	#Footer
\* ------------------------------------------------------------ */
.footer { padding: 32px 0 45px; background: #183872; }
.footer-cols { overflow: hidden; }
.footer-col { float: left; padding-right: 21px; box-sizing: border-box; }
.footer-col-size1 { width: 620px; }
.footer-col-size2 { width: 275px; }
.footer-col-size2 .form { max-width: 245px; padding-left: 10px; }
.footer-logos { margin-bottom: 19px; }
.footer-logos img { display: block; margin: 0 auto; max-width: 100%; height: auto; }

.footer .contacts p { padding-bottom: 15px; font-size: 26px; line-height: 1.23; font-weight: 300; color: #fff; letter-spacing: 0; text-transform: uppercase; text-align: center; }
.footer .contacts .phone a { font-size: 26px; line-height: 1; color: #00a651; }

.copyright { padding: 17px 0; font-family: Tahoma, Arial, sans-serif; font-size: 14px; text-align: center; }
.copyright ul { display: inline-block; overflow: hidden; list-style: none outside none; }
.copyright li { float: left; height: 14px; line-height: 14px; color: #595959; letter-spacing: 0; }
.copyright a { color: #595959; }
.copyright a:hover { text-decoration: underline; }
.copyright li + li { padding-left: 11px; border-left: 1px solid #595959; margin-left: 12px; }

.form-title { position: relative; padding: 8px 0; background: #00a651; color: #fff; text-align: center; text-transform: uppercase; font-weight: normal; }
.form-title:after { content: " "; display: block; bottom: -20px; left: 0; position: absolute; width: 0; height: 0; border-left: 120px solid transparent; border-right: 120px solid transparent; border-top: 20px solid #00a651; }
.form-body { border: none;}

/* ------------------------------------------------------------ *\
	#Map
\* ------------------------------------------------------------ */
.map { width: 100%; height: 280px; border: 6px solid #fff; box-sizing: border-box; box-shadow: 5px 5px 5px rgba(0, 0, 0, .38); }

/* ------------------------------------------------------------ *\
	#Transitions AND #Transforms
\* ------------------------------------------------------------ */
.btn {
	-webkit-transition: all .3s ease-in-out;
	     -o-transition: all .3s ease-in-out;
	        transition: all .3s ease-in-out;
}
.feature-overlay {
	-webkit-transition: background .3s ease-in-out;
	     -o-transition: background .3s ease-in-out;
	        transition: background .3s ease-in-out;
}
.nav a {
	-webkit-transition: color .3s ease;
	     -o-transition: color .3s ease;
	        transition: color .3s ease;
}
.feature-overlay span {
	-webkit-transform: translate(0, -50%);
	    -ms-transform: translate(0, -50%);
	     -o-transform: translate(0, -50%);
	        transform: translate(0, -50%);
}
.fsr-container { overflow: hidden; background-repeat: no-repeat; background-size: cover; }
.fsr-image { position: absolute; }
.fsr-hidden { display: none; }

@media ( max-width: 1024px ) {
	.footer-col-size1 { width: 550px; padding-left: 0; }
}

/* ==========================================================================
	#Media - Tablets in landscape
========================================================================== */
@media (max-width: 979px) {
	.shell { padding: 0 15px; }

	.slider-content { padding: 150px 240px 0 0; }
	.section-intro:after,
	.section-intro:before,
	.section-slider:after,
	.section-slider:before { width: 200px; background-size: auto 100%; }
	.section-slider:after { background-position: 0 center; }
	.section-slider:before { background-position: right center; }

	.logo { width: 300px; height: 66px; }

	.section-intro { padding: 39px 0 34px; }
	.section-intro h1 { font-size: 31px; }
	.section-features .section-entry h3 { font-size: 20px; }
	.service h3 { font-size: 23px; }

	.footer .contacts .phone a { font-size: 45px; }
	.footer-logos img { max-width: 85%; }
	.footer-col { padding-left: 0; }
	.footer-col-size1 { width: 55%; max-width: 389px; }
	.footer-col-size2 { float: right; width: 40%; padding-left: 10px; padding-top: 20px; }
}

/* ==========================================================================
	#Media - Mobile
========================================================================== */
@media (max-width: 767px) {
	.logo { width: 280px; height: 59px; }
	.header-inner { width: auto; margin: 9px 0 0; text-align: center; font-size: 14px; line-height: 2;}
	.header-inner .phone { margin-bottom: 0; }
	.header-inner .phone a { margin-bottom: 10px; }
	.list-areas { display: none; }

	.nav {  position: relative; z-index: 999; min-height: 40px; padding: 0; }
	.nav .shell { position: fixed; top: 0; left: 0; bottom: 0; width: 250px; padding: 0; background: #183872; text-align: left; padding: 25px 12px; }
	.nav li { display: block; padding: 5px 0; }
	.nav li + li { border-top: 1px solid #fff; }

	.nav .shell { left: -250px; }

	.wrapper { width: 100%; }
	.mobile-show .shell { left: 0; }
	.mobile-show .wrapper {	margin-left: 250px; width: 100%; }

	.nav .shell,
	.wrapper {
		-webkit-transition: left .3s ease-in-out, margin-left .3s ease-in-out, width .3s ease-in-out;
		     -o-transition: left .3s ease-in-out, margin-left .3s ease-in-out, width .3s ease-in-out;
		        transition: left .3s ease-in-out, margin-left .3s ease-in-out, width .3s ease-in-out;
	}

	/* ==========================================================================
		#Nav Button
	========================================================================== */
	.nav-button span:after,
	.nav-button:after,
	.nav-button:before {
		-webkit-transition: -webkit-transform 0.7s, visibility 0.7s, opacity 0.7s;
		     -o-transition: -o-transform 0.7s, visibility 0.7s, opacity 0.7s;
		        transition: transform 0.7s, visibility 0.7s, opacity 0.7s;
	}
	.nav-button.active span:after,
	.nav-button.active:after,
	.nav-button.active:before {
		background: #fff;
	}

	.nav-button span:after,
	.nav-button:after,
	.nav-button:before { position: absolute; content: ' '; border-radius: 3px; background: #fff; }
	.nav-button span:after { top: 0; left: 0; width: 100%; height: 3px; }
	.nav-button:after { top: 5px; left: 0; width: 100%; height: 3px; }
	.nav-button:before { top: 10px; left: 0; width: 100%; height: 3px; }
	.nav-button { position: absolute; top: 15px; left: 19px; width: 26px; z-index: 5; color: #6BB135; font-size: 12px; font-variant: small-caps; text-transform: uppercase; }

	.nav-button.active span:after {
		top: 5px;
		-webkit-transform: rotate(45deg);
		    -ms-transform: rotate(45deg);
		     -o-transform: rotate(45deg);
		        transform: rotate(45deg);
	 }
	.nav-button.active:before {
		top: 5px;
		-webkit-transform: rotate(-45deg);
	       -ms-transform: rotate(-45deg);
	        -o-transform: rotate(-45deg);
	           transform: rotate(-45deg);
	 }
	.nav-button.active:after {
		opacity: 0; visibility: hidden; top: 5px;
		-webkit-transform: rotate(45deg);
		    -ms-transform: rotate(45deg);
		     -o-transform: rotate(45deg);
		        transform: rotate(45deg);
	}

	.section-intro h1 { font-size: 21px; }
	.section-contacts .locations .list-areas { display: block; }
	.section-contacts .list-areas li a,
	.section-contacts .locations .list-areas li { line-height: 1.3; height: auto; }
	.copyright { padding: 10px 0; }
	.copyright li { float: none; display: block; height: auto; line-height: 1.3; text-align: center; margin-bottom: 5px; }
	.copyright li + li { border-left: none; padding-left: 0; margin-left: 0; }

	.col-1of2 ~ .col-1of2,
	.article-aside { margin-top: 20px; }
	.col-1of2, .col-third,
	.col-1of2 ~ .col-1of2,
	.article-aside,
	.article-content { float: none; width: 100%; }
	.footer-col-size2,
	.footer-col-size1 { float: none; width: 100%; max-width: 100%; }
	.footer-col-size2 .form { max-width: 100%; padding-top: 20px; }
	.form { width: 240px; display: inline-block; }
	.header-inner .phone a[href^="tel"] { margin-right: 14px; }

	.slider { position: relative; }
	.slider .slider-clip { position: relative; }
	.slider-content { position: absolute; bottom: 0; left: 0; padding: 0; text-align: center; width: 100%; }
	.slider .slide,
	.slider { height: 270px; }
	.slider-content p { text-align: center; }
	.section-intro:after, .section-intro:before, .section-slider:after, .section-slider:before { width: 120px; }
	.section-features .section-entry h3 { font-size: 16px; }
	.service,
	.feature { width: 100%; margin-right: 0; }
	.feature-overlay { font-size: 17px; }
	.service h3 { font-size: 20px; }
}


.toggle,
[id^=drop] {
	display: none;
}

/* Giving a background-color to the nav container. */
nav {
	margin:0;
	padding: 0;
	background-color: #183872;
	border-bottom: 1px solid #fff;
}


/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	padding: 16px 0;
	margin:0;
	list-style: none;
	position: relative;
	}

nav ul.menu { text-align: justify; padding-bottom: 0; margin-bottom: -5px;}
nav ul.menu:after { display: inline-block;
    content: '';
    display: inline-block;
    width: 100%;
}
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	}

/* Styling the links */
nav a {
    display: block;
    font-size: 18px;
    line-height: 1.28;
    font-weight: bold;
    color: #fff;
	text-decoration:none;
	-webkit-transition: color .3s ease;
    -o-transition: color .3s ease;
    transition: color .3s ease;
}


nav a:hover { color: #00a650; }


/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute;
	/* has to be the same number as the "line-height" of "nav a" */
	top: 60px;
}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
	z-index: 90;
	text-align: left;
	top: 36px;
	background: #183872;
	margin-left: -10px;
}

/* Fisrt Tier Dropdown */
nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
	padding: 10px;
}

/* Second, Third and more Tiers
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */
	left:170px;
}


/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

	nav {
		margin: 0;
		padding: 10px 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		color:#FFF;
		font-size:18px;
		font-weight: bold;
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		color: #00a650;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		padding-bottom: 5px;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #000000;
	}

	nav ul li ul li .toggle,
	nav ul ul a,
    nav ul ul ul a{
		color:#FFF;
		font-size:17px;
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}

	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}

	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */

	}

}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}

}

/* ==========================================================================
	Supplies
========================================================================== */

.supplies { text-align: center; }
.supply { display: inline-block; text-align: center; width: 275px; margin: 20px; }
.supply img { width: 100%; height: 200px; overflow: hidden; margin: 0; }
.supply h2 { background: #183872; color: #fff; font-size: 18px; padding: 10px 25px; font-weight: 400; }
.supply p {}

/* ==========================================================================
	Events
========================================================================== */

.events { margin: 0 auto; }

.events td, .events th { padding: 5px 20px; border: 1px solid #000; }
table.events tr:nth-child(even) { background: #eee; }

.footer-special { color: #fff; margin-top: 20px; padding: 20px; border: 3px dotted;}
.footer-special ul { margin-left: 20px;}
.footer-special h3 { font-size: 40px;}
.footer-special h4 { font-size: 28px;}

@media (max-width:469px) {
	.footer-special h3 { font-size: 26px;}
	.footer-special h4 { font-size: 18px;}
}
/* ==========================================================================
	Multiple items
========================================================================== */

.multiple { text-align: left; }
.item { display: inline-block; text-align: left; width: 275px; margin: 20px; }
.item img { width: 100%; height: 100%; overflow: hidden; margin: 0; }
.item h2 { background: #183872; color: #fff; font-size: 18px; padding: 10px 25px; font-weight: 400; }
.item p {}