* {
margin: 0 0 0 0;
padding: 0 0 0 0}
body {
max-width: 1280px;
margin: 0 auto;
color: #000;
/*background: #ddd; solid background*/
background:linear-gradient(to bottom , #ccc, #fff);
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}


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


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

img.image1l, img.image2l , img.image3l , img.image4l {
max-width:100%;
float:left;
margin: 2% 2%;
border: none;
box-shadow:none }


img.image1r, img.image2r , img.image3r , img.image4r {
max-width:100%;
float:right;
margin: 2% 2%;
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;
}

.centerimg {
max-width:100%;
display:block;
margin: 2% auto;
box-shadow: 1px 1px 4px #000;
}

img.image4l, img.image2l , img.image1l {display:none}
img.image3l {display:block; }
img.image4r, img.image2r , img.image1r {display:none}
img.image3r {display:block; }
img.image4c, img.image2c , img.image1c {display:none}
img.image3c {display:block; }

.main {
  background-color: #fff;
  width: 50%;
padding: 0 10%;
  height: 600px;
  border:none;
  overflow-y: scroll; /* Add the ability to scroll */
float:left;

}


.main-single {
  background-color: #fff;
  width: 80%;
padding: 0 10%;
  height: 600px;
  border:none;
  overflow-y: scroll; /* Add the ability to scroll */
float:left;
}
.right-front {
  background-color: #eee;
  width: 25%;
padding: 0 2.5%;
  height: 600px;
  border:none;
  overflow-y: scroll; /* Add the ability to scroll */
float: right;
margin: 0 auto;
}



/* Hide scrollbar for Chrome, Safari and Opera */
.main::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.main {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


/* Hide scrollbar for Chrome, Safari and Opera */
.main-single::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.main-single {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}




/* Hide scrollbar for Chrome, Safari and Opera */
.right-front::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.right-front {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


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

.right-half {
width: 48.75%;
margin : 0 0 0 0;
float:right}

.right-static {
  background-color: #eee;
  width: 25%;
  padding: 0 2.5%;
  height: auto;
  border:none;
  float: right;
  margin: 0 auto;
}

footer {
width: 100%;
background:linear-gradient(to top , #0066cc, #fff);
float: left;
padding: 25px 0;
margin-bottom: 20px}


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

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.clear {
font-size:12px;
clear:both;
width:100%
}

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

p a {color: #00000f}


footer p , header p.header-links  {
font-size: 18px;
color: #000;
text-align : center;
padding: 0 0} 

footer p a , header p.header-links 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;
}

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

}

@media  (max-width:1120px) {

img.image1l , img.image2l, img.image3l {display:none}
img.image4l {display:block}

img.image1r , img.image2r, img.image3r {display:none}
img.image4r {display:block}

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

}


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

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) {
img.image4l , img.image3l, img.image2l {display:none}
img.image1l {display:block}

img.image4r , img.image3r, img.image2r {display:none}
img.image1r {display:block}


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

p {font-size: 16px}
}

@media  (max-width:800px) {

.main {
  background-color: #fff;
  width: 50%;
  padding: 0 10%;
  min-height:100vh; /*Adjust height to amount of text*/
  border:none;
  float:left;
}

.main-single {
  background-color: #fff;
  width: 80%;
  padding: 0 10%;
  min-height:100vh; 
  border:none;
  float:left;
}


.right-front {
  background-color: #eee;
  width: 25%;
  padding: 0 2.5%;
  min-height:100vh;  /*Adjust height to amount of text*/
  border:none;
  float: right;
  margin: 0 auto;
}

img.image4l , img.image3l, img.image1l {display:none}
img.image2l {display:block}

img.image4r , img.image3r, img.image2r {display:none}
img.image1r {display:block}


img.image4c , img.image3c, img.image1c {display:none}
img.image2c {
display:block;
max-width: 100%

}



div.main , div.main-single , div.right-front , div.left-half , div.right-half , div.right-static {
width: 90%;
display:block;
float:none;
padding:0 5%;
margin: 0 auto}

}


@media  (max-width:650px) {
img.image4l , img.image2l, img.image1l {display:none}
img.image3l {display:block}

img.image4r , img.image3r, img.image2r {display:none}
img.image1r {display:block}

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

}

@media  (max-width: 550px) {
div.main , div.main-single , div.right-front , div.left-half , div.right-half , div.right-static {
width: 90%;
display:block;
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}

img.image2l, img.image3l, img.image4l {display:none}
img.image1l { 
max-width: 100%;
display: block;
float:none;
margin: 2% auto}



img.image2r , img.image3r, img.image4r {display:none}
img.image1r { 
max-width: 100%;
display: block;
float:none;
margin: 2% auto}

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