@charset utf-8;
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');

body, html {
height: 100%;
font-size:100%;
font-family: 'Open Sans', sans-serif;
color: #222;
margin:0;
padding:0}
body#home a#homenav,
body#about a#aboutnav,
body#sol a#solnav,
body#eco a#econav, 
body#gal a#galnav,
body#test a#testnav,
body#priv a#privnav,
body#blog a#blognav {
	background:#F90;
	color: #fff}
	
/*///////////////////////////// html ////////////////////////////////*/ 	
	
a:link {
	color: #555;
	text-decoration: none}
a:visited {
	color: #555;
	text-decoration: none}
a:hover,a:active,a:focus {
	color: #F90;
	text-decoration: underline}
address {
	width: 49%;
	display: inline-block;
	text-align: right;
	padding: 0}	
article {
	display: inline-block;
	width: 60%;
	margin-top: 3%;
	vertical-align: top}
footer {
	max-width: 90%;
	margin: 0 auto;
	clear: both;
	padding-top: 3%}
footer address {
	width: 49%;
	display: inline-block;
	text-align: left;
	vertical-align: top}
footer address a:link {
	color: #fff;
	text-decoration: none}
footer address a:visited {
	color: #fff;
	text-decoration:none}
footer address a:hover,a:active,a:focus {
	color: #F90;
	text-decoration:none}
footer h2 {
	font: 700 1.6em/1.2 "Open Sans",sans-serif;
	margin: 0 0 1em 0;
	color: #fff}
footer p {
	font: 1em/1.4 'Open Sans', sans-serif;
	margin: 0 0 1em 0;
	color: #fff}
header {
	max-width: 94%;
	margin: 0 auto;
	padding: 3% 0;
	overflow: auto}
h1 {
	font: 600 2.2em/1.2 'Open Sans Condensed', sans-serif;
	margin-bottom: 1em}
h2 {
	font: 600 1.6em/1.4 "Open Sans Condensed",sans-serif;
	margin-bottom: 0.6%}
h3 {
	font: 600 1.5em/1.4 'Open Sans Condensed', sans-serif;
	margin: 4% 0 1% 0;
	clear: both}
h4 {
	font: 600 1.5em/1.4 'Open Sans Condensed', sans-serif;
	margin: 2% 0 1% 0}			
hr {
	width: 100%;
	border: 0;
	margin-bottom: 3%;
	background: #F90;
	height: 1px}
nav {
	width: 100%; 
	border-top: .13em solid #fff;	
	border-bottom: .13em solid #F90;
	float: left}		
p {
	font: 109%/1.6 'Open Sans', sans-serif;
	margin: 0 0 1% 0;
	color: #333}		
section {
	width: 100%; 
	display: inline-block}
	
/*///////////////////////////// Masthead section ////////////////////////////////*/ 


.logo {
	width: 50%;
	display: inline-block;
	vertical-align: top;
}
				.logo img {
					max-width: 40%;
					min-width: 44%;
					width: auto; /* IE8 */
					height: auto}	 			
	

						.email {
							width: 100%;
							padding: 0 0 4% 0}	
						.phone {
							width: 100%;
							padding: 0;
							margin: 0 0 4% 0}
						.followButtons {font-size: 1.8em}
							#fb { color: #3B579D}
							#tw { color: #70B9EC}
							#li { color: #006699}
							.twitter {margin: 0 .5em}	

/*///////////////////////////// Main Content ////////////////////////////////*/ 	

		.content {
			max-width: 90%;
			background: #fff;
			padding: 1em;
			margin: 0 auto 4%}
		.content a:link {
			color: #390;
			text-decoration: underline}
		.content a:visited {
			color: #390;
			text-decoration: underline}
		.content a:hover,a:active,a:focus {
			color: #F90;
			text-decoration: underline}			
			.content article img {
				float: left;
				margin: 0 3% 1% 0;
				max-width: 69%}
		.content ul {
			font: 1em/1.8 'Open Sans', sans-serif;
			margin: 2% 0 0 6%;
			list-style-type: disc}
		.content li {
			font: 1em/1.8 'Open Sans', sans-serif;
			margin: 0 0 1em 0;
			color: #333}
							
		.rightCol {
			display: inline-block;
			width: 34%;
			margin: 3% 0 0 5%;
			vertical-align: top}
				.logos{
				text-align:center}
				.rightCol img{
				max-width: 92%}						
				.logos img{
				max-width:92%;
				padding: 0;
				margin-bottom: 1.25em;
				text-align:center}	
	.solutions {
		width: 64em%;
		padding: 1em 0;
		margin: 0 auto;
		text-align: center;
		display: inline-block}				
	.boxesCol {
		width: 100%;
		padding: 1em 0;
		margin: 0;
		text-align: center;
		display: inline-block}
	.boxesCol a:link {
		color: #390;
		text-decoration: underline}
	.boxesCol a:visited {
		color: #390;
		text-decoration: underline}	
	.boxesCol 	a:hover,a:active,a:focus {
			color: #F90;
			text-decoration: underline}		
		.box {
			border: 1px solid #ccc;
			-webkit-border-radius: .25em;
			-moz-border-radius: .25em;
			border-radius: .25em;
			display: inline-block;
			max-width: 40%;
			text-align: center;
			vertical-align: top;
			padding: 1em;
			margin: 0 1% 1% 0}
		.boxesCol img{
			max-width: 100% !important;
			margin-bottom: 1em}	
				.boxImg img:last-child{display:none}
				.boxImg:hover img:first-child{display:none}
				.boxImg:hover img:last-child{display:inline-block}				
					
.align {
	width: 70%;
	padding: 2% 0 0 30%}
			.voucherAd {
				display: none !important}		
	

/*///////////////////////////// Responsive css ////////////////////////////////*/ 	

@media (min-width: 1200px) {
.rightCol img {
    max-width: 100%;
}
}
	
@media screen and (max-width: 768px) {
.voucherAd {
	margin-top: 20px;
	display: inherit !important;
	text-align:	center
}		
footer address {
	width: 100%;
	display: inline-block;
	text-align: left}
h4 {clear: left}
nav {
	border-top: 1px solid #f90;
	border-bottom: 1px solid #f90}	
p {	font-size: 100%}
					.logo {
					width: 100%;
					text-align:center}
				.logo img {
					min-width: 46%}	 			
				address {
					width: 100%;
					padding: 5% 0 0 0; 
					text-align: center}	
						.email {
							padding: 3% 0}	
						.phone {
							margin: 0}
		.content {
			max-width: 96%;
			padding: 0 2%;
			margin-bottom: 6%}
		.content article img {
			max-width: 100%;
			padding-bottom: 3%;
			border-bottom: solid 1px #f90;
			margin: 0 0 2% 0}			
			.copy h1 {
				font-size: 1.5em}	
			copy h2 {
				font-size: 1.2em}
			article {
				width: 100%}				
			.rightCol {
				display: none !important}						
			.box {
			max-width: 43%;
			margin: 0 2% 2% 0}
			.boxesCol img{
			width: 100%;
			border: none !important}					
.align {
	width: 100%;
	text-align: center;
	padding: 0} }
	
@media screen and (max-width: 600px) {	
h4 {
	clear: none;
	margin: 0 }
	.boxesCol img {
	width: 40%;
	margin: 0 4% 0 0 !important}
		.box {
			text-align: left;
			max-width: 100% !important;
			min-width: 94% !important;
			margin-right: 0} }
		
@media screen and (max-width: 480px) {
.logo img {
	min-width: 60%} 
.boxesCol img {
	max-width: 100%}	
	.box {
	text-align: left;
	max-width: 90% !important;
	min-width: 90% !important}}
	
@media screen and (max-width: 320px) {
section {width: 99%}
.logo img {
	min-width: 74%}	
.boxesCol img {
	width: 100%}
	.box {
	text-align: left;
	max-width: 88% !important;
	min-width: 88% !important}
			.rightCol {
				display: none !important}	}