body{
  font: 15px/1.5 Verdana, Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
}
.container{
  width: 100%;
  margin: auto;
  overflow: hidden;
}
ul{
  margin: 0;
  padding: 0;
}
header{
  background:url('../img/maroon1.jpg') repeat;
  color: #ffffff;
  padding-top: 30px;
  min-height: 70px;
}
header a{
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
}
header li{
  float: left;
  display: inline;
  padding: 0 20px 0 20px;
}
header #branding{
  float: left;
}
header #branding h1{
  margin: 0;
}
header nav{
  float: right;
  margin-top: 10px;
}
header .highlight, header .current a{
  color: #ffffff;
  font-weight: bold;
}
header .highlight {
  padding-left:20px;
}
header a:hover{
  color: #ffd700;
  font-weight: bold;
}
.figure6{
  margin-bottom: 10px;
 }
input.MyButton {
width: 350px;
padding: 10px;
cursor: pointer;
font-weight: bold;
font-size: 100%;
background:url('../img/maroon1.jpg') repeat;
color: #fff;
}
input.MyButton:hover {
color: #FFD700;
background: #680c30;
}
#showcase {
  min-height: 500px;
  background:url('../img/mhsback.jpg') no-repeat center;
  background-size: cover;
  text-align: center;
  color: #ffffff;
}
#showcase h1{
  margin-top: 10px;
  font-size: 50px;
  margin-bottom: 10px;
}
#quest {
  margin-top:250px;
  position: relative;
  color:#4a1112;
  font-size:20px;
}
.box1 {
  color: #ffffff;
  background:url('../img/maroon1.jpg') repeat;
  text-align:center;
  float:left;
  width:24%;
  height:350px;
}
.box1s {
  color: #ffffff;
  background:url('../img/maroon1.jpg') repeat;
  text-align:center;
  float:left;
  width:14%;
  height:350px;
}
.box11 {
  padding-top:20px;
  color: #ffffff;
  background:url('../img/maroon1.jpg') repeat;
  text-align:center;
  float:left;
  width:24%;
  height:330px;
}
.box2 {
  color: #ffffff;
  background:url('../img/maroon4.jpg') repeat;
  text-align:center;
  border: double 5px #4a1112;
  margin:0 auto;
  width:20%;
}
footer{
  padding: 20px;
  color: #ffffff;
  background:url('../img/maroon1.jpg') repeat;
  text-align: center;
}
#url {
  color:white;
  font-size:x-small;
  clear:both;
}
@media (min-width:150px) and (max-width:520px){ 
.box1 {
  width:100%;
  height:230px;
}
.box1s {
  display:none;
}
.box11 {
  width:100%;
  height:230px;
}
.box2 {
  width:100%;
}
}
@media (min-width:521px) and (max-width:768px){ 
.box1 {
  width:100%;
  height:230px;
}
.box1s {
  display:none;
}
.box11 {
  width:100%;
  height:230px;
}
.box2 {
  width:60%;
}
}
@media (min-width:769px) and (max-width:850px){ 
.box1 {
  padding-left:5%;
  padding-right:5%;
  padding-top:10%;
  width:24%;
  height:330px;
}
.box1s {
  padding-top:10%;
  height:330px; 
  width:1%;
}
.box11 {
  padding-top:10%;
  width:30%;
  height:330px;
}
.box2 {
  width:40%;
}
} 
@media (min-width:851px) and (max-width:1024px){ 
.box1 {
  padding-left:5%;
  padding-right:5%;
  padding-top:10%;
  width:19%;
  height:300px;
}
.box1s {
  padding-top:10%;
  height:300px; 
  width:1%;
}
.box11 {
  padding-top:10%;
  width:40%;
  height:300px;
}
.box2 {
  width:40%;
}
}
@media (min-width:1025px) and (max-width:1470px){ 
.box2 {
  width:30%;
}
}
@media (min-width:1471px){ 
.box2 {
  width:20%;
}
}