


body {
background-color:#bb0a27;
	font: 1em/150% Georgia, Aerial, sans-serif; color: #333;
	padding: 0; margin: 0;
    
}
a {
	color: #004b6f;
	text-decoration: none;
padding-left:2%;
}

a:hover {text-decoration: underline;}

}
h1 {font: bold 24px/100% Georgia, Aerial, sans-serif; color: #004b6f;}
h2 { color: #333; text-align:center; }
h4 { color: #333; text-align:center; font: 16px/100%; line-height: 10px;}

/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
	padding: 5px;
	width: 960px;
	margin: 20px auto;
}
#header {
	height: 100px;
	padding: 0 15px;
}
#content {
	width: 290px;
	float: left;
	padding: 5px 15px;
text-align:justify; 
}

#middle {
	width: 294px; /* Account for margins + border values */
	float: left;
	padding: 5px 15px; 
	margin: 0px 5px 5px 5px;text-align:justify;;
}

#sidebar {
	width: 270px;
	padding: 5px 15px;
	float: left;text-align:left;
}
    
#footer {
	clear: both;
	padding: 0 15px; 
}
#footer ul		{ padding: 0 0px; border-bottom: 5px solid #333; list-style: none;  }
		#footer li		{ display: inline; font-size: 11px; font-weight: bold;  }

        #footer2 {background-color:#bb0a27; text-align:center;}
        
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
	
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 41%;
		padding: 1% 4%;
	}
	#middle {
		width: 41%;
		padding: 1% 4%;
		margin: 0px 0px 5px 5px;
		float: right;
	}
	
	#sidebar {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
	}

	#header, #footer {
		padding: 1% 4%;
	}
}

/* for 800px or less 
@media screen and (max-width: 800px) {
	
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 49%;
	}
	#middle {
		width: 49%;
		margin: 0px 0px 5px 0px;
		float: right;
	}
	
	#sidebar {
		clear: both;
		width: auto;
		float: none;
	}

}
*/

/* for 700px or less */
@media screen and (max-width: 600px) {

	#content {
		width: auto;
		float: none;
	}
	
	#middle {
		width: auto;
		float: none;
		margin-left: 0px;
	}
	
	#sidebar {
		width: auto;
		float: none;
	}

}

/* for 480px or less */
@media screen and (max-width: 480px) {

	#header {
		height: auto;
	}
	h1 {
		font-size: 24px;
	}
	#sidebar {
		display: none;
	}

}

/* border & guideline (you can ignore these) */
#content {
	background: #f8f8f8;
}
#sidebar {
	background: #f0efef;
}
#header, #content, #middle, #sidebar {
	margin-bottom: 5px;
}

#pagewrap, #header, #content, #middle, #sidebar, #footer {
	border: solid 1px #ccc; background: #f8f8f8;
}

img {
	max-width: 100%;
	height: auto;
	width: auto\9; 
     /* ie8 */
}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
 ul.topnav {
  list-style-type: none;
  margin: 1%;
  padding: 5px 5px 5px 5px;
  overflow: hidden;
  background-color: #333;
  }

ul.topnav li {float: left;}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px ;
  text-decoration: none;
  transition: 0.3s;
  font-size: 16px/100%;
}

ul.topnav li a:hover {background-color: #111;}

ul.topnav li.icon {display: none;}

@media screen and (max-width:600px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }


@media screen and (max-width:600px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
  
  <script>
function myFunction() {
    document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>


