@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Cabin:ital,wght@0,400;0,700;1,700&display=swap'); 

/* CSS Document */

body {background-size:100% auto; background-color:#fff; margin:0; padding:0; font-size:110%; text-align:center; color:#333;}
html {margin:0; font-family: Cabin, Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; }
img {max-width: 100%; height: auto; border:0; }
* {box-sizing: border-box;}
table {line-height:1.2em; padding:2px; }
form {width:95%; margin:8px auto; border-radius:12px; border:inset #ff0; }
input[type=submit] {max-width:90%; text-align:center; font-size:120%;}
input [type=select] {font-size:110%; }
iframe {border:none; border-radius:12px; border:inset #ff0; }
button {padding: 1px; border:1px inset #ff0; border-radius:8px; background-color:transparent; display:inline; vertical-align:middle; }
button:hover { background-color:rgba(255,255,255,0.7); transition: 0.5s;}

h1, h2, h3, h4, h5 { font-family: Lato, Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; font-weight: bold; text-align: center; padding-top: 4px; }
h1 {font-size: 28px; color:#000; }
h2    { font-size: 24px; color: #006; }
h3   { font-size: 22px; color: #000;  }
h4  { font-size: 20px; color: #003; }
@media only screen and (max-width: 800px) { h1 {font-size: 125%; color:#000; } }
@media only screen and (max-width: 800px) { h2 {font-size: 120%; color:#006; } }
@media only screen and (max-width: 800px) { h3 {font-size: 115%; color:#000; } }
@media only screen and (max-width: 800px) { h4 {font-size: 115%; color:#003; } }

p {padding-left:8px; padding-right:8px; color:#333; font-size:110%;}
li, ul, ol { font-size: 110%; margin-top:0; color:#333; text-align:left; }
a:link { color:#000; font-weight: bold; text-decoration: underline; }
a:visited { color:#333; font-weight: bold; text-decoration: none; }
a:hover { color: #f60; font-weight: bold; text-decoration: underline; transition: 0.5s; }
a:active { color: #333; font-weight: bold; text-decoration: underline;}

#hdrtop { margin:0;  padding:0;  z-index:5; position:fixed; top:0; left:0; width:100%; height:1px; background-color:#d4e2ff; border-top:inset thin #006; border-bottom:inset thin #006; overflow:visible; } 
#hdrtop .fltlft {border:none; }
#hdrtop .fltrt {border:none; }
#hdrtop button {border:none; padding-left:4px; }
#hdrtop .img80 {padding: 2px; border:0; }	
@media only screen and (max-width: 800px) {#hdrtop .img80 {padding: 2px; border:0; max-width:30%;}	}

#hdr { margin:0;  padding:8px; width:100%; height:auto; min-height:46px; border-bottom:inset thin #006; background-color:#d4e2ff; } 
@media only screen and (max-width: 800px) { #hdr { padding:4px 4px 0 4px;  } }
#hdr h2 { color: #000; margin: 0; padding: 8px;  font-size: 26px; font-weight: bold; text-align: center; }
#hdr h3 { color: #000; margin: 0; padding: 8px;  font-size: 100%; font-weight: bold; text-align: left; }
@media only screen and (max-width: 800px) { #hdr h2{ margin: 0; padding: 2px;  font-size: 100%;  }}
@media only screen and (max-width: 800px) { #hdr h3{ margin: 0; padding: 4px;  font-size: 80%;  }}
#hdr p { color:#333; font-size:100%; margin-left:60px; }
@media only screen and (max-width: 800px) {#hdr p { color:#333; font-size:95%; margin-left:44px;} }
#hdr a {text-decoration:none; }
#hdr .fltlft {border:none; }
#hdr .fltrt {border:none; }

#nav {margin: 0 0 0 72px; padding:0; }
#nav a {text-decoration:none; }

.navbtn {padding:2px 8px 2px 8px; border-right:1px solid #f60; border-left:1px solid #f60; background-color:transparent; border-radius:4px; font-family: Lato, Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; font-variant:small-caps; }
.navbtn:hover { transition: 0.5s; text-shadow: 0 1px 1px #000; background-color:rgba(255,255,255, .7); }


#hdrfb { background: #ffffff;	padding: 0 10px;  	width:100%;} 
.imghdr {width:96px; height:96px; float:left; }
@media only screen and (min-width: 601px) and (max-width: 800px) { .imghdr {width:72px; height:72px; float:left; }  }
@media only screen and (max-width: 600px) { .imghdr {width:55px; height:55px; float:left; }  }
.imgicon {padding:2px; margin:0; width:48px; height:48px; }
#top {position:fixed; right:0; bottom:0; z-index:8; width:48px; height:48px; padding:6px; border:none; }

#contdrop  { width: 100%; background:transparent; margin:144px 0 0 0; padding: 0; border:none; text-align: left; }
@media only screen and (max-width: 800px) { #contdrop { width: 100%; background:transparent; margin:72px 0 0 0; padding: 0; border:none; text-align: left; } }
#container { width: 100%; background:transparent; margin:0 auto; padding: 0; border:.1px #fff; text-align: left; }
#container li {margin-left:8px; }
@media only screen and (max-width: 800px) {#container li {margin-left:4px; } }

#mainContent { width:100%; margin: 0px; padding:0; border:.1px #fff; } 
#mainContent p, h1, h2, h3, h4 {margin: 24px 12px 12px 12px;}
#imgblk {background-color:#fff; }
#video {width:80%; height:80%; margin: 0 auto; max-width:1080px; background-color:#003; }
@media only screen and (max-width:1080px) { #video {width:100%; } }

.desc {position: absolute; top: 15%; left:12%; width:80%; height:auto; z-index:5; background-color:transparent; }
@media only screen and (min-width:801px) and (max-width:1080px) { .desc {position: absolute; top: 15%; left:10%; width:90%; height:auto; }  }
@media only screen and (max-width:800px) { .desc {position: absolute; top: 15%; left:5%; width:95%; height:auto; }  }
.desc h1 {font-size: 200%; line-height:1.5em; font-weight: bold; text-align:center; color:#000!important; text-shadow: 0 1px 1px #066; }
@media only screen and (max-width: 800px) { .desc h1 {font-size: 150%; line-height:1.5em; }  }
.desc p, .desc a {font-size:135%; font-weight:bold; text-align:right; color:#006; text-shadow: 0 2px 2px #fff;  }
@media only screen and (min-width:600px) and (max-width: 1080px) { .desc p, .desc a {font-size: 120%; line-height:1.5em; }  }
@media only screen and (max-width: 601px) { .desc p, .desc a {font-size: 100%; line-height:1.5em; }  }

#ftr { margin: 0; padding: 0 10px; background-color:#d4e2ff; border-bottom:inset 1px #006; border-top:inset 1px #006; }
#ftr p { margin: 0; padding: 10px 0; font-size:.8em; line-height:1.4em; font-weight:bold; }
#ftr .floatrt30 {width: 38%; float:right; text-align:right;  }
@media only screen and (max-width: 680px) {#ftr .floatrt30 {width: 100%; float:none; } }

.img-no-pad img {padding:0;}
.bgnavy { background-color:#006; color:#fff; border-bottom:.5px #009;}
.bgteal { background-color:#099; color:#fff; border-bottom:.5px #099;}
.bgteallt { background-color:#dfffff; color:#000; border:.5px #dfffff solid; }
.bgteallt12 { background-color:#dfffff; color:#000; border:.5px #dfffff solid; padding:12px; }
.bgwhite {background-color:#fff;  color:#333; border-bottom:.5px #fff;}
.bgltblue {background-color:#d4e2ff; color:#333; border-bottom:.5px #d4e2ff; }
.bgltblue0 {background-color:rgba(212,226,255,0.9); color:#333; border-bottom:.5px #d4e2ff; }
.bglogo {background-color:#687d9b; }
.bgsand {background-color:#dedecc; border-bottom:.5px #dedecc;}
.bgyellow {background-color:#FF9; border-bottom:.5px #ff0; color:#333; }
.bgdk {background-image:linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)); }
.bgdk a:link { color: #99f; font-weight: bold; text-decoration: underline; }
.bgdk a:visited { color: #e2d6ea; font-weight: bold; text-decoration: underline; }
.bgdk a:hover { color: #cff; font-weight: bold; text-decoration: none; transition: 0.5s; }
.bgdk a:active { color: #ccc; font-weight: bold; text-decoration: underline;}

.big {font-size:140%; }
@media only screen and (max-width:800px) { .big {font-size:120%; } }
.brdr { border:inset #006 2px; }

.btncta {background-color:#006; color:#ff0; padding:4px 8px 4px 8px; border-radius:8px; display:inline-block; text-align:center; font-weight:bold; margin:4px; }
.btncta a:link { color: #ff0; font-weight: bold; text-decoration: none; }
.btncta a:visited { color: #ff0; font-weight: bold; text-decoration: none; }
.btncta a:hover { color: #f60; font-weight: bold; text-decoration: underline; transition: 0.5s; }
.btncta a:active { color: #fff; font-weight: bold; text-decoration: none;}
.btnctarev {background-color:#f60; color:#FF0; padding:4px 8px 4px 8px; border-radius:8px; display:inline-block; text-align:center; font-weight:bold; margin:4px;}
.btnctarev a:link { color: #fff; font-weight: bold; text-decoration: none; }
.btnctarev a:visited { color: #fff; font-weight: bold; text-decoration: none; }
.btnctarev a:hover { background-color:#006; color: #ff0; font-weight: bold; text-decoration: underline; transition: 0.5s; border-radius:4px; }
.btnctarev a:active { color: #fff; font-weight: bold; text-decoration: none; }

.caption { color: #f60; font-size: 90%; font-weight: bold; text-align: center; line-height:1.25em; }
.caption-rt { color: #f60; font-size: 90%; font-weight: bold; text-align: right; line-height:1.25em; }
.caption-lft { color: #f60; font-size: 90%; font-weight: bold; text-align: left; line-height:1.25em; }

.img_middle {display:inline; padding:0 12px; margin:0; vertical-align:middle; height:auto; width:auto; }
@media only screen and (max-width:800px) { .img_middle {max-width:50%; height:auto; padding:0 4px; }  }
.img_100w {width:100%; height:auto; }

.pbold {font-weight:bold; }
.pcenter { text-align: center; }
.pcenter10  { font-size: 90%; text-align: center; }
.pcenter10bold  { font-size: 90%; font-weight: bold; text-align: center; }
.pleft {text-align:left; }
.pleft10bold  { font-size: 90%; font-weight: bold; text-align: left; }
.pright { text-align: right; }
.pright10bold { font-size: 90%; font-weight: bold; text-align: right; }

.emphasis-teal { color: #066; font-weight: bold; }
.emphasis-teallt { color:#0CC; font-weight: bold; }

.margins0 {margin:0!important; padding:0!important; }
.pad10 {padding:5%; text-align:center; vertical-align:middle; }
@media only screen and (max-width:800px) { .pad10 {padding:2%; text-align:center; vertical-align:middle; } }
.pad8p {padding:8px; }
.padtopbtm {padding-top:48px; padding-bottom:48px; }
.padtop48 {padding-top:48px; padding-bottom:12px; }

.clearfloat { clear:both; font-size: 1px; line-height: 1em; padding:0; margin:0; }
.floatrt50 {display:block; float:right; width:50%; text-align:left; margin:0; height:auto; }
@media only screen and (max-width:719px) { .floatrt50 {float:none; width:100%; } } 
.floatlft50 {display:block; float:left; width:50%; text-align:left; margin:0; height:auto; }
@media only screen and (max-width:719px) { .floatlft50 {float:none; width:100%; } }

.floatlft33 {display:block; float:left; width:32%; margin:8px; padding:0; }
@media only screen and (min-width:800px) and (max-width:1365px) {.floatlft33 {width:31%; } }
@media only screen and (max-width:799px) {.floatlft33 {float:none; width:98%; margin:8px auto; } }

.floatrt25 {display:block; float:right; width:24%; text-align:left; font-weight:bold; margin:2px; height:auto; }
@media only screen and (min-width:471px) and (max-width:719px) {.floatrt25 {width:48%; } }
@media only screen and (max-width:470px) {.floatrt25 {float:none; width:100%; } }

.floatlft25 {display:block; float:left; width:24%; text-align:left; font-weight:bold; margin:2px; height:auto; }
@media only screen and (min-width:471px) and (max-width:960px) {.floatlft25 {width:47%; margin:0; height:auto; } }
@media only screen and (max-width:470px) {.floatlft25 {float:none; width:100%; margin:2px; } }

.floatlft20 {display:block; float:left; width:19%; text-align:left; font-weight:bold; margin:.5%; height:auto; }
@media only screen and (min-width:800px) and (max-width:1365px) {.floatlft20 {width:49%; margin:0; height:auto; } }
@media only screen and (max-width:790px) {.floatlft20 {float:none; width:100%; margin:2px; } }

.cont { position: relative;}
.float-overlay { position: absolute; top: 0; left: 0; width:100%; height:auto; font-weight:bold; text-align:left; padding:4px; z-index:2;}
.featured {padding-top:0; color:#fff; font-weight:bold; overflow:visible; text-align:left; text-shadow: 8px 8px 18px #687d9b; text-shadow: 1px 1px 2px black, 0 0 25px #fff, 0 0 5px #687d9b;}
.featured p, .featured li { color:#ff0;  }
.featured h1, .featured h2, .featured h3, .featured h4 {color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; }

.flt_gmw0 {float:left; width:68.57%; height:auto; vertical-align:middle; }
.flt_gmn0 {float:left; width:31.43%; height:auto; vertical-align:middle; }
@media only screen and (max-width: 800px) { .flt_gmw0 {float:none; width:100%; height:auto; padding:10px; margin:0; }  }
@media only screen and (max-width: 800px) { .flt_gmn0 {float:none; width:100%; height:auto; padding:10px; margin:0;}  }
.flt_gmw {float:left; width:68.57%; height:auto; padding:24px; margin:0; vertical-align:middle; }
.flt_gmn {float:left; width:31.43%; height:auto; padding:12px; margin:0; vertical-align:middle;}
@media only screen and (max-width: 800px) { .flt_gmw {float:none; width:100%; height:auto; padding:10px; margin:0; }  }
@media only screen and (max-width: 800px) { .flt_gmn {float:none; width:100%; height:auto; padding:10px; margin:0;}  }
.gmc {width:68.57%; margin:0 auto; padding:0; }

.fltrt { float: right; margin-left: 8px; }
.fltrt_img {float: right; padding:0 8px; margin-right: 4px; margin-left:8px; max-width:50%;}
@media only screen and (max-width: 800px) { .fltrt_img img {float: right; padding:0 4px; margin-right: 8px; margin-left:8px; max-width:50%;} }
.fltlft { float: left; margin-right: 8px; }
.fltlft_img {float:left; padding: 0 8px; margin-right: 8px; margin-left:4px; max-width:50%; }
@media only screen and (max-width: 800px) { .fltlft_img img{float:left; padding: 0 4px; margin-right: 8px; margin-left:8px; max-width:50%; } }
.fltlft6up { float:left; width:16%; padding:.25%; margin:0; }
@media only screen and (max-width: 470px) { .fltlft6up { float:left; width:32%; padding:.5%; margin:0; }  }
.fltlft3up { float:left; width:32%; padding:.5%; margin:0; }
@media only screen and (max-width: 600px) { .fltlft3up { float:none; width:100%; padding:.5%; margin:0 auto; }  }

.lmlogo {font-family:  Calligrapher, Geneva, Arial, Helvetica, sans-serif;}
.mplogo {font-family: "Maiandra GD", Philosopher, "Averia Serif Libre", Geneva, sans-serif; color:#609; font-weight:bold; }
.logo {font-family:Lato, Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; color:#009; font-weight:bold; }
.white {color:#fff; }
.black {color:#000; }
.green {color:#0C3; }
.maroon { color: #800000; font-weight: bold; }
.yellow {color:#ff0; font-weight: bold; }

.hide-n {display:inline; }
@media only screen and (max-width: 800px) { .hide-n {display:none; }  }
.hide-w {display:none; }
@media only screen and (max-width: 800px) { .hide-w {display:inline; }  }
.hide-w942 {display:none; }
@media only screen and (max-width: 942px) { .hide-w942 {display:inline; }  }
.ind12 {margin-left:12px; margin-right:12px; }
@media only screen and (max-width: 600px) { .ind12 {margin-left:8px; margin-right:8px; }  }
.wid88 {width:88%; height:auto; margin:0 auto; }
@media only screen and (max-width: 600px) { .wid88 {float:none; width:95%; height:auto; }  }
.wid88-100 {width:88%; height:auto; margin:0 auto; }
@media only screen and (max-width: 900px) { .wid88-100 {float:none; width:100%; height:auto; }  }

/*nav pop-up */
.sidepanel  { width: 0; position: fixed; z-index: 7; height: auto; top: 0px; right: 0; border:1px inset #006; border-radius:4px;  overflow-x: hidden; transition: 0.5s; padding-top: 30px; line-height:2.0em;  }
.sidepanel .closebtn { position: absolute; top: 0; right: 12px; font-size: 30px; color:#003; }
.closebtn a {text-decoration:none; }