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


header {
width: 100%;
float: left;
background: linear-gradient(to bottom , #0066cc,#ffffff);
}
header p {
font-size: 36px;
float: left;
margin: 2% 0 0 5%;
color: #fefefe;
line-height: 100%;
font-weight : bold;
text-indent: 0px;
text-shadow: 1px 1px 1px #0f0f0f;}

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


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

footer {
width: 96%;
float: left;
box-shadow: none;
padding : 0 2% 2% 2%;
background: linear-gradient(to top , #0066cc, #fff);
}




/* Define Text and Images */
div.main h1 , .main h2 {
color: #0066cc;
font-weight : normal;
text-align : center;
margin: 1% 0;
}
div.main h1 {font-size:24px;}
div.main h2 {font-size: 22px; }
div.main p {
text-align : left;
text-indent : 16px ;
margin: 1% 0;}


div.main p.clear {
clear: both;
line-height: 10px}

 

img.image1 , img.image2 {
	max-width:100%;
	margin:1%;
	float:right;
	box-shadow: 0 4px 8px #000003}
	
	img.image2{
	display:none}

footer p, footer p a {
text-align : center;
color: #000;
padding:  0 0} 


@media (max-width:1000px) {
div.main h1 {font-size:24px}
div.main h2  {font-size:20px}

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;}

}

@media all and (max-width:768px) {
div.main p {font-size: 18px}
 footer p {font-size: 16px;}

div.main h1 {font-size:22px}
div.main h2  {font-size:18px}
img.image1 {display:none}

img.image2 {display:block}
}

@media all and (max-width:650px) {
div.main h1 {font-size:20px}
}


@media (max-width: 500px) {

header {
float:none;
width: 96% ;
padding: 2% 2%;
margin: 0 auto;
}

div.main   {
float:none;
width: 96% ;
padding:0 2%;
margin: 0 auto;
}

footer {
float:none;
width: 96% ;
padding : 0 2% 2% 2%;
background: linear-gradient(to top , #0066cc, #fff);
margin:0 auto
}

header p {
font-size:24px;
text-align: center}

.slogan {font-size:18px}

div.main h1 , div.main h2  { 
text-align: center}

img.image2{display:none}
img.image1 {
float:none;
display:block;
width:96%;
box-shadow:none;
   margin: 0 auto   }
}