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





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





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

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

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


/* image control */
.banner1  {
max-width: 100%;
display: block;
float:none;
margin: 1% auto;
padding: 0 0}


.image1c, .image2c , .image3c , .image4c {
max-width:100%;
float:none;
margin: 1% auto;
border: none;
box-shadow:none }

.l-img {
max-width:100%;
float:left;
margin: 2% 2%;
box-shadow: 1px 1px 4px #000;
}


.r-img {
max-width:100%;
float:right;
margin: 2% 2%;
box-shadow: 1px 1px 4px #000;
}

.image4c, .image2c , .image1c {display:none}
.image3c {display:block; }

div.left {
width: 20.875%;
padding: 0 0 ;
margin: 0 2.166% 0 5%;
float: left;
 }


div.inner-left {
width: 20.875%;
padding: 0 0 ;
margin: 0 0;
float: left;
}

div.inner-right {
width: 20.875%;
padding: 0 0;
margin: 0 2.166% 0 2.166%;
float: left;
}

div.right {
width: 20.875%;
padding: 0 0;
margin: 0 5% 0 0;
float: left;
}


.single-column {
width: 100%;
float: left;}

.left-half {
width: 43.75%;
margin : 0 2.5% 0 5%;
float:left
}

.right-half {
width: 43.75%;
margin : 0 5% 0 0;
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: 100%;
background:linear-gradient(to top , #0066cc, #fff);
float: left;
padding: 25px 0;
margin-bottom: 20px}

form input, form textarea {
max-width: 100%;}

h1 , h2 {color: #0066cc;
font-weight: 600;
text-shadow : none;
text-align: center;
margin: 1% 0}

h1 {font-size : 30px;}
h2 {font-size : 24px;}

p {
font-size: 20px;
text-align : left;
text-indent : 16px ;
padding: 1% 0;
text-shadow: none}

p.top {
font-size: 20px;
text-align : left;
text-indent : 16px ;
margin: 0 4%;
text-shadow: none}

p a {color: #00000f}

.content-list {
list-style:none;margin: 0 0 0 5%}
.clear {clear: both}

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

footer p a { color: #000}

pre {font-size: 16px}

pre  { /*Wrap Overflow*/
  overflow-x: auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

form {
font-size : 18px;
text-align : left;
text-indent : 0px ;
padding: 2% 0 ;
line-height: 200%;
text-shadow: none}

label {
color: #0066cc;
text-shadow: .5px .5px 1px #000;
font-weight: 600}

input , textarea { font-size: 20px}




@media  (max-width:1280px) {
body {font-size:20px}
 h1 {font-size:28px}
 h2 {font-size:24px;}

}

@media  (max-width:1120px) {
div.left-half img , div.right-half img {
max-width:100%;
display: block;
float:none;
margin: 2% auto
}
.image1c , .image2c, .image3c {display:none}
.image4c {display:block}
}


@media  (max-width:1024px) {
.banner1 {display:inline}

h2 {font-size:20px}
p {font-size: 18px}


header p {
display : block;
float:none; 
margin:2% auto 0 auto;
font-size:30px;
text-align: center;
}
.slogan {
display: block;
float:none; 
margin:0 auto;
font-size:24px;
text-align: center}
}

@media  (max-width:950px) {
.image4c , .image3c, .image2c {display:none}
.image1c {display:block}


p {font-size: 18px}

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


div.inner-left {
width: 42.5%;
margin: 0 5% 0 0%;
padding: 0 0;
float:left}

div.inner-right {
width: 42.5%;
margin: 0 5% 0 5%;
padding: 0 0;
float:left}

 div.right {
width: 42.5%;
margin: 0 5% 0 0;
padding: 0 0;
float:left
}

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:800px) {
.image4c , .image3c, .image1c {display:none}
.image2c {display:block}

}


@media  (max-width:650px) {
.image4c , .image2c, .image1c {display:none}
.image3c {display:block}
div.left-third , div.middle , div.right-third {
width: 90%;

float:none;
padding:0 5%;
margin: 0 auto}
}

@media  (max-width: 550px) {
div.main , div.left , div.inner-left , div.inner-right , div.right , div.left-half , div.right-half , form {
width: 90%;
float:none;
padding:0 5%;
margin: 0 auto}

header {
width: 100%;
padding : 2% 0 0 0}

footer {
width : 100%;
padding : 0 0 2% 0}

footer p  {
font-size : 16px;
padding: 0 1%}

img.l-img , img.r-img {
max-width:100%;
display:block;
float:none;
margin: 2% auto
}

 h1 ,  h2  {
font-size: 24px;
float: none; 
text-align: center}

header p { font-size : 28px}
.slogan { font-size: 20px}

.image2c , .image3c, .image4c {display:none}
.image1c  {
max-width: 100%;
display: block;
float:none;
margin: 2% auto}
}

@media (max-width: 360px) {
.image1c , .image2c, .image4c {display:none}
.image3c  {
max-width: 100%;
display:block;
float: none;
margin: 2% auto}
}