/*-----------------------------------------------------------------------------------*/
/*	1. Responsive Grid 
/*-----------------------------------------------------------------------------------*/

.container { 
	margin: 0 auto; 
	max-width: 960px;
	position: relative;
}

.container:after,
.row:after, 
.col:after, 
.clr:after, 
.group:after { 
	content: ""; 
	display: table; 
	clear: both; 
}

.row { padding-bottom: 0em; }	
.col { 
	display: block;
	float: left;
	min-height: 1px;
	width: 100%;
}

/*-----------------------------------------------------------------------------------*/
/*	2. Responsive Grid For Mobile
/*-----------------------------------------------------------------------------------*/

@media ( min-width : 768px ) {
	.span_1 { width: 8.33333333333%; }
	.span_2 { width: 16.6666666667%; }
	.span_3 { width: 25%; }
	.span_4 { width: 33.3333333333%; }
	.span_5 { width: 41.6666666667%; }
	.span_6 { width: 50%; }
	.span_7 { width: 58.3333333333%; }
	.span_8 { width: 66.6666666667%; }
	.span_9 { width: 75%; }
	.span_10 { width: 83.3333333333%; }
	.span_11 { width: 91.6666666667%; }
	.span_12 { width: 100%; }
	
	.gutters .col { margin-left: 2%; }
	.gutters .col:first-child { margin-left: 0; }	
	.gutters .span_1 { width: 6.5%; }
	.gutters .span_2 { width: 15.0%; }
	.gutters .span_3 { width: 23.5%; }
	.gutters .span_4 { width: 32.0%; }
	.gutters .span_5 { width: 40.5%; }
	.gutters .span_6 { width: 49.0%; }
	.gutters .span_7 { width: 57.5%; }
	.gutters .span_8 { width: 66.0%; }
	.gutters .span_9 { width: 74.5%; }
	.gutters .span_10 { width: 83.0%; }
	.gutters .span_11 { width: 91.5%; }
	.gutters .span_12 { width: 100%; }

}

/*-----------------------------------------------------------------------------------*/
/*	3. Responsive Menu for mobile
/*-----------------------------------------------------------------------------------*/

@media screen and (max-width: 600px) {

.nav-collapse ul {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%; 
	z-index: 99999;
}
.nav-collapse li {
	float: left;
	display: block;
	width: 100%;
}
.nav-collapse a {
	background: #003399;
	color: #fff!important;
	float: left;
	font-weight: 600;
	padding: 10px 20px;
	text-align: left!important;
	text-transform: uppercase; 
	width: 100%;
}
.nav-collapse a:hover {
	color: #ff9900!important;
}
.js .nav-collapse {
	display: block;
	clip: rect(0 0 0 0);
	max-height: 0;
	position: absolute;
	overflow: hidden;
	zoom: 1;
}

.nav-collapse.opened {
	max-height: 9999px;
}

.disable-pointer-events {
	pointer-events: none !important;
}

.nav-toggle {
	float: right; 
	height: 55px;
	overflow: hidden;
	position: fixed;
	position: relative;
	text-decoration: none;
	text-indent: -999px;
	width: 70px;
	z-index: 99999;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.nav-toggle:before { 
	color: #003399; 
	content: "\f0c9"; 
	font-family: 'FontAwesome',sans-serif;  
	font-size: 28px;  
	left: 0; 
	line-height: 55px; 
	position: absolute; 
	text-align: center; 
	text-indent: 0;
	speak: none;
	top: 0; 
	width: 100%; 
	z-index: 999999; }

.nav-toggle.active::before {
	content:"\f00d";
	font-size: 24px; }
	
}
	
@media screen and (min-width: 40em) {
	.js .nav-collapse {
		position: relative;
	}
	.js .nav-collapse.closed {
		max-height: none;
	}
	.nav-toggle {
		display: none;
	}
}
@media ( min-width : 768px ) {
	.nav-collapse { display: none!important; }
}


/*-----------------------------------------------------------------------------------*/
/*	4. Media Queries
/*-----------------------------------------------------------------------------------*/

@media screen and (max-width: 320px) {

}

@media screen and (max-width: 480px) {

}

@media screen and (max-width: 600px) {

	/* default */
	.main-menu { display: none; }
	.wp-caption, .wp-caption img { width: auto!important; }
	.wp-caption.alignright, .wp-caption.alignleft { margin: 0 0 20px!important; }
	.alignright, .alignleft { float: none!important; }
	
	img.alignleft { display: block!important; float: none!important; margin-right: 0!important; }
	img.alignright { display: block!important; float: none!important; margin-left: 0!important; }	
	
	.text-center, .text-left, .text-right  { text-align: left; }
	
	#header .primary-area *, #header .secondary-area .col.span_3,
	.home-section .span_4,
    #footer .secondary-area * { text-align: center!important; }
	.header-text, .footer-menu { display: inline-block; float: none!important; }
	
	#logo { float: none!important; }
	
	#content { padding: 0 10px; }
	#footer { padding: 30px 10px 10px; }
	#footer .contact-details { list-style-position: inside!important; }
	#footer .footer-menu { padding: 10px 0; }
	.newsletter input[type="submit"] { margin-top: 10px!important; }

}
@media screen and (min-width: 768px) {
	.home-section .span_4 { padding: 58px 0; }
	.home-section .span_8  { }

}

@media screen and (min-width: 1024px) {
	.home-section { min-height: 168px;; } 
	.home-section .span_4 { padding: 58px 20px; width: 294px; }
	.home-section .span_8 { width: 646px; }

	#services  .service { width: 137.141px; }
	
	#footer .primary-area .span_6.first {
		width: 470px;
	}
	#footer .primary-area .span_2.second {
		margin-left: 0!important;
		width: 196px;
	}
	#footer .primary-area .span_4.third {
		margin-left: 0!important;
		width: 294px;
	}	
}

@media screen and (min-width: 1140px) {

}