body, html {
  height: 100%;
  margin: 0;
}

.graphic {
vertical-align:middle;
margin-right: 3px;
}

.swap-on-hover {
  position: relative;
	margin:  0 auto;
	width: 600px;
	height: 400px;
}

.swap-on-hover img {
  position: absolute;
  top:0;
  left:0;
	overflow: hidden;
	/* Sets the width and height for the images*/
	height: 100%;
	width: 100%;
}

.swap-on-hover .swap-on-hover__front-image {
  z-index: 9999;
  transition: opacity .5s linear;
  cursor: pointer;
}

.swap-on-hover:hover > .swap-on-hover__front-image {
  opacity: 0;
}

@media screen and (max-width:800px){
.swap-on-hover {
width: 100%;
margin: 10px auto;
display: inline-block; 
vertical-align: top; 
}
}

p {
    display: block;
    margin-block-start: .6em;
    margin-block-end: .6em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

#locationbox a:link { color: #FFFFFF; }
#locationbox a:visited { color: #FFFFFF; }
#bulletbox a:link { color: #FFFFFF; }
#bulletbox a:visited { color: #FFFFFF; }
.column a:link { color: #FFFFFF; }
.column a:visited { color: #FFFFFF; }

a:link {
  text-decoration: none;
}

@media screen and (max-width:800px){
.mobimg {
width: 100%;
margin-bottom: 5px;
}
}

.responsive {
  max-width: 100%;
  height: auto;
  margin: 10px;
}

@media screen and (max-width:800px){
.responsive {
  width: 100%;
  height: auto;
  margin: 5px auto;
}
} 

.respimage {
  height: auto;
  margin: 10px;
}
} 

@media screen and (max-width:800px){
.respimage {
width: 100%;
margin: 5px auto;
}
} 

.imagerespon {
  width: 100%;
  height: auto;
} 

.photospace {
margin: 6px;
}


.divider {
margin: 6px auto;
}

.photomar {
margin: 10px;
}

hr.new2 {
  border-top: 4px solid #0068C8;
width: 90%;
}

#bulletbox {
width: 100%;
text-align: left;
margin-left: -12px;
font-size: 14pt;
}

#head {
max-width: 1200px;
margin: auto;
display: block;
}

#content {
max-width: 1200px;
width: 100%;
margin-left: auto;
margin-right: auto;
display: inline-block;
background-color: #006ED4;
}

#main {
width: 100%;
text-align: center;
} 

#menubox {
width: 100%;
height: 50px;
margin-top: -5px;
text-align: center;
background: #9B2121;
display: inline-block;
float: left;
}

.bg {
  /* The image used */
  background-image: url("blu_gry_bk.png");
}

#headerbox {
width: 100%;
display: inline-block;
float: left;
text-align: center;
}

@media screen and (max-width:800px){
#headerbox {
width: 100%;
text-align: center;

}
} 

#pagetitle {
Width: 100%;
font-family: Skranji;
font-size: 26px;
text-align: center;
}

@media screen and (max-width: 800px) {
#pagetitle {
width: 100%;
font-family: Skranji;
font-size: 20px;
text-align: center;
  }
}

.column {
float: left;
width: 22%;
height: 100% !important;
font-family: sans-serif;
text-align: center;
padding: 0 10px;
color: #FFFFFF;
}

@media screen and (max-width: 800px) {
.column {
width: 100%;
color: #FFFFFF;
font-family: sans-serif;
text-align: center;
  }
}

.column2 {
  float: left;
  width: 56%;
  height: 100% !important;
  font-family: sans-serif;
  text-align: center;
  color: #000000;
  padding: 0 10px;
}

@media screen and (max-width: 800px) {
  .column2 {
    width: 100%;
    text-align: center;
    font-family: sans-serif;
    color: #000000;
  }
}

.column3 {
  float: left;
  width: 78%;
  min-height: 550px;
  height: 100% !important;
  font-family: sans-serif;
  text-align: center;
  color: #000000;
  padding: 0 10px;
}

@media screen and (max-width: 800px) {
  .column3 {
    width: 100%;
    text-align: center;
    font-family: sans-serif;
    color: #000000;
    min-height: 150px;
  }
}

.poemquote  {
width: 50%;
background: #DCDCDC;
border: solid #075e71 3px;
border-radius: 8px;
margin: 10px auto;
display: block;
padding: 10px;
text-align: center;
}

@media screen and (max-width: 800px) {
.poemquote {
width: 100%;
margin: 5px auto;
  }
}

.banner {
max-width: 640px;
}

@media screen and (max-width: 800px) {
.banner {
width: 100%;
  }
}

#locationbox {
width: 100%;
padding-top: 10px;
font-size: 14pt;
font-family: sans-serif;
}

#footer {
width: 100%;
max-width: 1200px;
margin: auto;
display: block;
padding: 10px;
text-align: center;
color: #FFFFFF;
background-color:#8B0000;
font-family: arial;
border: solid #8B0000 3px;
border-top-color: #99CCFF;
float: left;
}

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}

#textbox {
width: 100%;
text-align: center;
font-size: 14pt;
font-family: sans-serif;
margin-top: 10px;
float: left;
}

#textbox2 {
width: 100%;
text-align: left;
font-size: 12pt;
font-family: sans-serif;
margin-top: 10px;
float: left;
}

#textbox22 {
width: 100%;
text-align: left;
font-size: 18px;
font-family: sans-serif;
margin-top: 10px;
float: left;
}

#textbox3 {
width: 100%;
text-align: left;
font-size: 17px;
font-family: sans-serif;
margin-top: 10px;
float: left;
}

#textbox4 {
width: 100%;
text-align: center;
font-size: 17px;
font-family: sans-serif;
margin-top: 10px;
float: left;
}

#textbox5 {
width: 100%;
text-align: center;
background-color: #C3E2FF;
font-size: 17px;
font-family: sans-serif;
margin-top: 10px;
float: left;
}

#textbox6 {
width: 100%;
text-align: center;
background-color: #99CCFF;
font-size: 17px;
font-family: sans-serif;
margin-top: 10px;
float: left;
}

#textbox7 {
width: 100%;
text-align: center;
font-size: 12pt;
font-family: sans-serif;
margin-top: 10px;
float: left;
}

.shortbox {
width: 20%;
float: left;
text-align: center;
font-size: 12pt;
font-family: sans-serif;
}

@media screen and (max-width: 800px) {
.shortbox {
width: 100%;
  }
}

#box50 {
width: 50%;
margin: 4px auto;
display: inline-block;
vertical-align: top;
float: left;
font-size: 14pt;
}

@media screen and (max-width:800px){
#box50 {
width: 100%;
margin: 10px auto;
display: inline-block; 
vertical-align: top;
font-size: 14pt;
}
}

#box30 {
width: 30%;
margin: 4px auto;
display: inline-block;
vertical-align: top;
float: left;
font-size: 22px;
}

@media screen and (max-width:800px){
#box30 {
width: 100%;
margin: 10px auto;
display: inline-block; 
vertical-align: top;
font-size: 18px;
}
}

#box70 {
width: 70%;
margin: 4px auto;
display: inline-block;
vertical-align: top;
float: left;
font-size: 18px;
}

@media screen and (max-width:800px){
#box70 {
width: 100%;
margin: 10px auto;
display: inline-block; 
vertical-align: top;
font-size: 18px;
}
}

#box501 {
width: 50%;
text-align: left;
margin: 4px auto;
display: inline-block;
vertical-align: top;
float: left;
font-size: 12pt;
}

@media screen and (max-width:800px){
#box501 {
width: 100%;
text-align: left;
margin: 10px auto;
display: inline-block; 
vertical-align: top;
font-size: 12pt;
}
}

#miscbox {
width: 100%;
text-align: center;
font-size: 14pt;
font-family: sans-serif;
margin-top: 15px;
}

#miscbox1 {
width: 100%;
text-align: center;
font-size: 14pt;
font-family: sans-serif;
margin-top: 15px;
}

#miscbox2 {
width: 100%;
text-align: center;
font-size: 14pt;
font-family: sans-serif;
color: #FFD700;
margin-top: 15px;
}

#miscbox3 {
width: 100%;
text-align: left;
font-size: 14pt;
font-family: sans-serif;
color: #FFD700;
margin-top: 5px;
margin-left: -10px;
}

 /* NAVIGATION */

#menu {
	color: #FFF;
	height: 50px;
	padding-left: 10%;
	border-radius: 0px;
}
#menu ul, #menu li {
	margin: 0 auto;
	padding: 0;
	list-style: none
}
#menu ul {
	width: 100%;
}
#menu li {
	float: left;
	display: inline;
	position: relative;
}
#menu a {
	display: block;
	line-height: 45px;
	padding: 0 14px;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 16pt;
    font-family: Arial, sans-serif;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 1.8);
}
#menu a.dropdown-arrow:after {
	content: "\25BE";
	margin-left: 5px;
}
#menu li a:hover {
	color: #FFFFFF;
	background: #A52323;
}
#menu input {
	display: none;
	margin: 0;
	padding: 0;
	height: 50px;
	width: 100%;
	opacity: 0;
	cursor: pointer
}
#menu label {
	display: none;
	line-height: 50px;
	text-align: center;
	position: absolute;
	left: 35px
}
#menu label:before {
	font-size: 1.6em;
	content: "\2261"; 
	margin-left: 20px;
    font-family: Arial, sans-serif;
}
#menu ul.sub-menus{
	height: auto;
	overflow: hidden;
	width: 210px;
	background: #000000;
	position: absolute;
	z-index: 99;
	display: none;
}
#menu ul.sub-menus li {
	display: block;
	width: 100%;
}
#menu ul.sub-menus a {
	color: #FFFFFF;
	font-size: 14pt;
    font-family: Arial, sans-serif;
    width: 100%;
    background: #006ED4;
}
#menu li:hover ul.sub-menus {
	display: block
}
#menu ul.sub-menus a:hover{
	background: #000000;
	color: #FFFFFF;
}
@media screen and (max-width: 800px){
	#menu {position:relative}
	#menu ul {background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
	#menu ul.sub-menus {width:100%;position:static;}
	#menu ul.sub-menus a {padding-left:30px;}
	#menu li {display:block;float:none;width:auto;}
	#menu input, #menu label {position:absolute;top:0;left:0;display:block}
	#menu input {z-index:4}
	#menu input:checked + label {color:white}
	#menu input:checked + label:before {content:"\00d7"}
	#menu input:checked ~ ul {display:block}
}