/* 2nd TH */

.updatecode { color: #006990; font-weight: bold; }

.message {
background: white;
color:#FFF;
position: absolute;
border: 1px solid black;
border-radius: 20px;
top: -350px;
margin: 0 auto;
width: 90%;
height: 350px;
padding: 20px;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;
  
}

#toggle {
  position:absolute;

  cursor:pointer;
  left:-100%;
  top:-100%;
}

#toggle + label {
  position:absolute;
  cursor:pointer;
  padding:10px;
  background: white;
width: 50px;
font-weight: bold;
border: 2px solid black;
border-radius: 10px;
padding: 5px 5px;
color: blue;
line-height:20px;
font-size:14px;
text-align:center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
  margin:10px 10px;
  transition:all 500ms ease;
}
#toggle + label:after {
  content:"MENU" 
}

.container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding:5em 3em;
}

#toggle:checked ~ .message {
  top: 0;
}

#toggle:checked ~ .container {
  margin-top: 250px;
}

#toggle:checked + label {
  background:#dd6149;
}

#toggle:checked + label:after {
  content:"Close"
}

/*   all above toggle menu code */

#navigation ul li { 
	display: inline-block; 
}




#content {
background:transparent;
}

.content{margin-left: auto; margin-right: auto;}

#contents {margin-left: auto; margin-right: auto;}

.content {
	background: transparent; float: right;
}


a { color: blue; text-decoration:underline; font-weight:bold; }
a:visited { color:blue; text-decoration:underline; font-weight:bold; }
a:hover { color:blue; text-decoration:underline; font-weight:bold; }
a:focus { outline:1px dotted #79160d; }

#header { height: 339px; margin-top: 20px; margin-bottom: 0px; max-width: 100%; border: 2px solid white; border-radius: 25px;  background-color: red; background-position: center; background-repeat: no-repeat; background-image: url(../img/banner.jpg); max-width: 100%; }

#footer {background: white; margin-top: 20px; margin-bottom: 20px; border: 1px solid #939ba1; border-radius: 25px; padding-top: 10px;}

#div1 {margin-left:3.5%;}

.note { box-shadow: 10px 10px 5px #888888; border: 1px solid black; border-radius: 25px; margin: 0 auto; width: 80%; padding: 15px; background-color: #eff24b; background-image: url(img/pin.png);      background-position: 90% 2%;  background-repeat:  no-repeat; }

.callout { color: #006990; font-weight: bold; font-size: 24px; margin-top: 10px; font-family: arial; }

.pagetitle {line-height: 1.8em; text-align: center; font-size: 24px; font-weight: bold;   margin-left: 20px; margin-right: 20px; margin-top: 10px; margin-bottom: 10px;}

.panel22 /* {float: left; width: 22%; margin-bottom: 5px; padding: 5px;  border-radius: 25px;} */
 {
	width: 22%;
	border: 1px solid #939ba1;
                  border-radius: 25px;
	display: inline-block;
	vertical-align: top;
padding: 3px;
text-align: left;
}

.panel30  /*  {float: left; width: 30%; margin-bottom: 5px; margin: 0 0.5%; border: 1px solid darkgoldenrod; border-radius: 25px; padding: 5px;} */

 {
	width: 30%;
	border: 1px solid #939ba1;
                  border-radius: 25px;
	display: inline-block;
	vertical-align: top;
padding: 3px;
text-align: left;
}

.panel60 /* {float: left; width: 50%; margin-bottom: 5px; margin-left: 4px;  padding: 5px;  border-radius: 25px;} */
 {
	width: 50%;
	border: 1px solid #939ba1;
                  border-radius: 25px;
	display: inline-block;
	vertical-align: top;
padding: 3px;
text-align: left;
}

.panel90 /* {float: left; width: 90%; margin-bottom: 5px; margin-left: 4px;  padding: 5px;  border-radius: 25px;} */
 {
	width: 90%;
	border: 1px solid #939ba1;
                  border-radius: 25px;
	display: inline-block;
	vertical-align: top;
padding: 3px;
text-align: left;
}

.panel {width: 90%; margin: 0 auto; padding: 10px;  border-radius: 25px;}

.panel40 {float: left; width: 40%; margin-bottom: 5px; padding: 5px; border-radius: 25px;}

.panel90 {float: left; width: 99%; margin-bottom: 5px; border-radius: 25px; padding: 5px; }

.panel30, .panel, .panel22, .panel60, .panel90 {background: white; padding-top: 15px; padding-bottom: 15px; border: 1px solid #939ba1;}

h3 { color: #4d2177; font-weight: bold ; font-family: arial; }

h1 { color:  #4d2177; font-weight: bold; font-family: arial; }
h2 { color:  #4d2177; font-weight: bold; font-family: arial; }

button {cursor: pointer;}

body { background: #2f4f4f; color : black; height: 101%; font-family: verdana, arial;}

html {
   height: 101%;
}

img {
	margin-bottom: 20px;
	max-width: 100%;
	border-radius: 20px;
	border:1px solid black;
}

.noborder { border: none; }

.row,   .pagetitle {border: none; background: #2f4f4f;}

img { max-width: 100%; }

.mobile-only {display: none;}

.container {padding-left: 20px; padding-right: 20px; background: transparent;}
.row  {clear: both; width: 100%; max-width: 1140px; margin: 0 auto; overflow: hidden;} 

@media handheld, only screen and (max-width: 767px) {

h1 {font-size:18px;}
h2 {font-size: 16px;}
h3 {font-size: 14px;}
p   {font-size: 12px;}
.panel30, .panel, .panel22, .panel60, .panel90 {width: 95%; margin-left: auto; margin-right: auto; padding: 5px;}
.pagetitle {width: 90%; text-align: center; font-size: 24px; font-weight: bold; color: white;  margin-left: 20px; margin-right: 20px; margin-top: 0px; margin-bottom: 0px;}
.mobile-hide {display: none;}
.mobile-only {display: block;}
}