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

/* Main Template */
body {font-family: Lato, "Open Sans", Arial, Helvetica, Tahoma, sans-serif; font-size: 18px; margin: 0; padding: 0; font-weight: normal;}
.end {clear:both; visibility: hidden;}
img {border: 0px none #000; padding:0px; margin: 0px;}
a {font-size: 16px; color: #003078; font-weight: bold; text-decoration: underline;}

/* Headings */
h1 {font-size: 38px; color:#666; margin: 0px; font-weight: 300; font-family: "Open Sans", Arial, Helvetica, Tahoma, sans-serif;} 
h2 {color: #fff; font-size:18px; font-weight: bold; margin: 0px;}
	
/* Canvas Nav*/
.sidenav {height: 100%; width: 84px; position: fixed; z-index: 1; top: 0; left: 0; background-color: #334451; overflow-x: hidden; overflow-y: hidden; padding-top: 8px; float:left; border-top: 2px #394b58 solid;}

/* Header */
.header {width: calc(100% - 204px); height:auto; margin: 0px 60px 0px 144px;}
.title {width: 100%; height: auto; padding: 26px 0px 26px 0px; background-color: #fff;}
.topnav {width: 96%; height: auto; background-color: #000; padding: .4% 2% .75% 2%; text-align: right; color: #fff;}
.topnavM {width: 96%; height: auto; background-color: #000; padding: .4% 2% .75% 2%; text-align: right; color: #fff; display: none;}
.topnav a {color: #fff; font-size: 17px;}
.banner {width: 100%; height: auto; background-color: #333333; text-align: center;}
.banner img {width: 100%; max-width: 1285px; height: auto;}
.bannerM {width: 100%; height: auto; background-color: #333333; text-align: center; display: none;}
.bannerM img {width: 100%; max-width: 324px; height: auto;}

/* Webpage */
.main {width: calc(100% - 204px); height:auto; margin: 0px 60px 0px 144px;}
.skip-to-main-content-link {background-color:#000;color:#fff;display:block;font-size:1em;left:0;line-height:1;padding:1em;position:fixed;text-decoration:underline;top:0;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:-webkit-transform .1s;transition:-webkit-transform .1s;transition:transform .1s;transition:transform .1s,-webkit-transform .1s;z-index:99999}
.skip-to-main-content-link:focus {-webkit-transform:translateY(0);transform:translateY(0)}img{max-width:100%}

/* Main Area */
.page {width: 100%; height: auto; padding: 5px 0px 34px 0px; margin: 0px auto 0px auto; background-color: #f0f2f5;}
.page1 {width: 96%; max-width: 1190px; padding: 0% 2% 0% 2%; height: auto; margin: 0px auto 0px auto;}
.featured {width: 97%; height: auto; padding: 1.5%; margin: 20px auto 0px auto; background-color: #fff; box-shadow: inset 0px 0px 0px 1px #c0c0c0; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}
.featured img {width: 100%; height: auto;}
.content {width: 98%; height: auto; padding: 1%; margin: 20px auto 0px auto; background-color: #fff; box-shadow: inset 0px 0px 0px 1px #c0c0c0; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}
.content-title {width: 95%; height: auto; padding: 2%; margin: .5% .5% .5% .5%; background-color: #000; float: left;}
.content-button {width: 47%; height: auto; background-color: #e7e9ec; padding: 1%; margin: .5% .5% .5% .5%; text-align: center; float: left; font-size: 16px;}
.content-G-button {width: 47%; height: auto; background-color: #1c6d00; padding: 1%; margin: .5% .5% .5% .5%; text-align: center; float: left; color: #fff; font-size: 16px;}
.content-G-button a {color: #fff;}
.content-text {width: 96%; height: auto; background-color: #e7e9ec; padding: 1.5%; margin: .5% .5% .5% .5%; float: left; line-height: 1.5;}
.content-box {width: 96%; height: auto; background-color: #e7e9ec; padding: 1.5%; margin: .5% .5% .5% .5%; float: left; line-height: 1.5;}
.content-box img {float: left; margin-top: 5px;}
.content-box p {margin: 0px 0px 0px 130px;}
.content-box a {font-size: 18px;}

/* Bottom Bar */
.bottombar {width: 96.5%; height: auto; background-color: #333333; padding: 1.75%; color: #fff; font-weight: bold; border-top: 15px #000 solid; text-align: right; margin-bottom: 50px; font-size: 17px;}
.bottombar a{color: #fff; font-size: 17px;}

/* YouTube Videos */
.iframe {position: relative; padding-bottom: 56.25%;}
.iframe iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0px;}

/* Responsive Tags */
@media only screen and (min-width : 150px) and (max-width : 1200px){
.sidenav {display: none;}
.main {width: 100%; margin: 0px; overflow-x: hidden;}
.header {width: 100%; margin: 0px; overflow-x: hidden;}
.title {width: 98%; padding: 26px 1% 26px 1%;}
.bottombar {width: 94.5%; padding: 2.75%;margin-bottom: 0px;}
}

@media only screen and (min-width : 150px) and (max-width: 800px){
.page1 {width: 94%; padding: 0% 3% 0% 3%;}
.title {width: 96%; padding: 2%;}
h1 {font-size: 18px; font-weight:bold;} 
.topnav {display: none;}
.topnavM {display: inherit;}
.banner {display: none;}
.bannerM {display: inherit;}
.content-button {width: 96%; padding: 1.5%;}
.content-G-button {width: 96%; padding: 1.5%;}
}