*{margin:0 0 0 0;
padding:0 0 0 0}
body{
max-width:1280px;
margin:0 auto;
font-family: Roboto , arial, verdana, tahoma, sans-serif;
font-size:20px;
font-style:normal;
font-weight:normal;
color:#000;
background:#f9f9f9}



header{
	width:90%;
	float:left;
	padding: 2% 5% 0 5%;
	background:linear-gradient(to bottom , #0066cc, #ffffff);
	box-shadow: none }


div.main{
	width:90%;
	padding:0 5%;
   background: #fff;
	float:left}


div.left-third {
width: 27.3%;
padding: 0 2% 0 5%;
float: left;}
div.middle {
width: 27.4%;
padding: 0 2% 0 2%;
float: left;}
div.right-third {
width: 27.3%;
padding: 0 5% 0 2%;
float: left;}

footer{
	width:96%;
   background:linear-gradient(to top , #0066cc, #ffffff);
	/*background:#0066cc;*/
	float:left;
   padding: 0 2% 2% 2%;
	}

/*Define Text*/
header p {
font-size: 36px;
float: left;
margin: 2% 0 0 5%;
color: #fff;
line-height: 100%;
font-weight : bold;
text-indent: 0px;
text-shadow: 1px 1px 1px #000;}

.slogan {
font-size: 28px;
font-style: oblique;
color: #0e0e0e;
font-weight: 200;
line-height: 100%;
text-indent:0px;
text-shadow :none}

div.main h1{
	font-size:24px;
	text-align:center;
	color:#0066cc;
	margin:1% 0}

div.main h2 , .left-third h2 , .middle h2 , .right-third h2 {
font-size:22px;
text-align:center;
color:#0066cc;
margin:1% 0}

div.main p , .left-third p , .middle p , .right-third p {
font-size: 20px;
text-align:left;
text-indent:16px;
margin:1% 0}

div.main p.clear{font-size: 1px; clear:both}

footer p, footer p a {
font-size : 18px;
text-align:center;
color:#000;
text-shadow: none;
padding:0 0}

/*Define Images*/
.image1,.image2,.image3,.image4,.image5 {
max-width: 100%;	
margin: 1% 2%;
box-shadow:1px 1px 4px #000004;
float:right}
 
.image6, .image7 , .image8 , .image9 {
width: 100%;
float: none;
margin : 0 auto
}

.image1,.image3,.image4,.image5{display:none}

.image7 , .image8 , .image9 {display: none}

/*Begin Media Queries*/

@media (max-width:1100px){
.image6 , .image8 , .image9 {display: none}
.image7 {display: block}
}

@media (max-width:1024px){
	div.main h1{font-size:24px}
    div.main h2 , div.left h2 , div.right h2 {font-size:22px}
.image1,.image2,.image4,.image5 {display:none}
	.image3 {display:block}
}


@media (max-width:1000px) {

header p {
display : block;
float:none; 
margin:2% auto 0 auto;
font-size:32px;
text-align: center;
}
.slogan {
display : block;
float:none; 
margin:0 auto;
font-size:24px;}
div.main h1 {font-size:22px}
div.main h2 , div.left-third h2 , div.middle h2 , div.right-third h2 {font-size:18px}
div.main p , div.left-third p , div.middle p , div.right-third p  {font-size: 18px}
.image6 , .image7 , .image9 {display: none}
.image8 {display : block}
}


	
@media (max-width:850px) {
	
}



@media (max-width:768px) {
.image1 , .image2, .image4 , .image5 {display:none}
		.image3 {display:block}
}


@media (max-width:720px) {
div.main h1 {font-size:20px}
.image1 , .image2, .image3 , .image4 {display:none}
		.image5 {display:block}
.image6, .image7, .image8  {display: none}
.image9 {display:block}
div.left-third p , div.middle p , div.right-third p {font-size: 16px}
}

@media (max-width:600px) {
div.left-third {
width:42.5%;
padding: 0 5% 0 5%;
float:left
}

div.middle {
width: 42.5%;
padding: 0 5% 0 0;
float:left

}

div.right-third {
width:90% ;
padding:0 5%;
margin:0 auto }
}
	

@media (max-width: 540px) {
header {
width:100% ;
padding: 2% 0 0 0;
margin:0 auto}

div.main , div.left-third , div.middle ,  div.right-third {
width:96% ;
padding:0 2%;
margin:0 auto }

footer {width:96%; padding : 0 2% 2% 2%}
footer p {font-size: 16px}	
header p {font-size:24px}
.slogan{font-size: 18px;}
div.main h1 , div.main h2  {
font-size:18px; 
font-weight: normal;}

.image7 , .image8 , .image9  , .image5 , .image2, .image3 , .image4 {display:none}
	
.image1 , .image6 {
float:none;
display:block;
width:100%;
box-shadow: none;
margin:2% auto;}
}