html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; scroll-behavior: smooth;
 a:link {text-decoration: underline; color: #28431d;}
a:visited {text-decoration: underline; color: #28431d;}
a:hover {text-decoration: none; background-color: #fff; color: #28431d; cursor: pointer;}
a:active {color: #28431d;}
a:focus {outline: 2px dotted #fff;
    outline-offset: -2px;
    box-shadow: 0 0 2px 0 inset #28431d; }
    *:focus:not(:focus-visible) {
      outline: none;
      box-shadow: none;}
}
body {font-family: 'Amiri', serif; font-weight: 500; color: #2A838E; margin: auto;  text-align: center; padding-top: 84px;}
@media screen and (max-width:400px) {
    body {font-size: 62.5%}
}
#skip a {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; color: #fff; background: #000;} 
#skip a:focus {position:absolute; left:280px; top:105px; width:auto; height:auto; color: #fff; background: #000; z-index: 1200;}

/*  ********** header *********** */
#hdrdiv {height: 85px; max-width: 100%; padding: 0; position: relative; margin: 0; border-bottom: 1px dotted #336066; background-color: #e7f9fb; /* For browsers that do not support gradients */ background-image: linear-gradient(to right, #e7f9fb , #9ae2ee);}
.hdrimage {display: block; top: 5px; left: 15px; z-index: 600; float: left; position: absolute; max-width: 230px;}
.fixed-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: auto;
  background: transparent;}
@media screen and (max-width:1179px) {
   .fixed-nav-bar {height: 0px; z-index: 1000;  position: absolute;}}
#top {padding:0; margin: 0;}

/*  ********** main navigation *********** */

#cssmenu {margin-top: 0px;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative; padding-left: 0; float: right; z-index: 900;}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {margin-top: 0px;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0; color: #598b91;}
@media screen and (max-width:1179px) {
  #cssmenu ul {margin-top:10px; padding-left: 0; margin-left: 0; width: 100%}}
#cssmenu #menu-button {
display: none;}
#cssmenu {max-width: 100%; font-family: 'Amiri', serif; line-height: 1;}
#cssmenu > ul > li {float: left;}
#cssmenu.align-center > ul {
font-size: 0;
  text-align: center;}
#cssmenu.align-center > ul > li {
display: inline-block;
  float: none;}
#cssmenu.align-right > ul > li {
float: right;}
#cssmenu > ul > li > a {
padding: 25px 20px 25px 20px;
  font-size: 160%;
  font-weight: 500; text-decoration: none;
  color: #11373c;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;}

#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
color: #59594C;}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {background: rgba(91, 144, 40, 0.6); color: #fff; padding-bottom: 34px;}
#cssmenu.align-right > ul > li:after {right: auto;  left: -1px;}

#cssmenu.align-right > ul > li:before {right: auto;  left: 0px;}
#cssmenu > ul > li:last-child:after,#cssmenu > ul > li:last-child:before {display: none;}

#cssmenu.small-screen {
background-color: #e7f9fb; width: 100%; padding-top:0px; padding-left: 0}

#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {width: 100%;
  text-align: left; font-size: 120%;}
@media all and (max-width: 400px) {
   #cssmenu.small-screen > ul, #cssmenu.small-screen.align-center > ul {font-size: 5vw;}
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-left {
float: none;  display: block;}

#cssmenu.small-screen > ul > li > a {min-width: 100%;
padding: 20px 20px; background-width; 100%;}

#cssmenu.small-screen > ul > li:after,
#cssmenu.small-screen > ul > li:before {
display: none;}

#cssmenu.small-screen #menu-button {
display: block;
  padding: 0px 25px 0px 25px;
  cursor: pointer;
  font-size: 22px; font-weight: 600;
  text-decoration: none;
  color: #2A838E; z-index: 1000; clear:both;}

@media all and (max-width: 400px) {
    #cssmenu.small-screen #menu-button {top: 10px}
}
#cssmenu.small-screen #menu-button.menu-opened {
color: #2A838E;}
#cssmenu.small-screen #menu-button:after {
content: "";
  position: absolute;
  right: 30px;
  top: 25px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 5px solid #378496;
 border-bottom: 5px solid #378496;
  width: 25px;
  height: 5px;}
#cssmenu.small-screen #menu-button.menu-opened:after {
border-top: 4px solid #A9E5EC;
  border-bottom: 4px solid #57912B;}
#cssmenu.small-screen #menu-button:before {
content: "";
  position: absolute;
  right: 30px;
  top: 44px;
  display: block;
  width: 25px;
  height: 5px;
  background: #2A838E;}
#cssmenu.small-screen #menu-button.menu-opened:before {
background: #378496;}

/*  ********** body *********** */

.blurb {font-family: 'Amiri', sans-serif; font-weight: 700; font-size: 300%; color: #11373c; padding:20px 0 25px; text-transform: uppercase; text-align: center; background-color: #e7f9fb; /* For browsers that do not support gradients */ background-image: linear-gradient(to right, #e7f9fb , #9ae2ee);}
.heroimg {display:block; position: relative;  margin-left: auto; margin-right: auto; margin-bottom:0; max-width: 100%;  max-height: 870px; padding: 0; background-color: #e7f9fb; /* For browsers that do not support gradients */ background-image: linear-gradient(to right, #e7f9fb , #9ae2ee);}
.img {max-width: 100%; max-height: auto; border: 0;}
.imgbloc {display: block; max-width: 100%; max-height: auto; border: 0;}
.imgcent {display: block; max-width: 100%; max-height: auto; border: 1px dotted #336066; text-align: center; margin:auto;}
.arrow {display: block; text-align: center; margin:auto; padding: 5px;}
h1{font-family: 'Amiko', sans-serif; font-weight: 500; font-size: 190%; color: #5f742b; padding:20px 0; text-align: center;}
h2 {font-family: 'Amiko', sans-serif; font-weight: 500; font-size: 170%; color: ##4B7981; padding:15px 0; text-align: center;}
h3{font-family: 'Amiko', sans-serif; font-weight: 500; font-size: 160%; color: #5f742b; text-transform: uppercase; padding:0; text-align: center;}
h4{font-family: 'Amiko', sans-serif; font-weight: 500; font-size: 140%; color: #5f742b; text-transform: uppercase;padding:0; line-height: 2em; text-align: center;  margin:auto; background-color: #f2f7ef; /* For browsers that do not support gradients */ background-image: linear-gradient(to right, #f2f7ef , #dae7d4);}
#container {max-width: 100%; background: transparent; text-align: center; margin: 0 auto; padding:0; }
#container a:link {text-decoration: underline; color: #28431d;}
#container a:visited {text-decoration: underline; color: #28431d;}
#container a:hover {text-decoration: none; color: #fff; background: #28431d; cursor: pointer;}
#container a:active {color: #28431d;}
#container a:focus {outline: 2px dotted #fff;
    outline-offset: -2px;
    box-shadow: 0 0 2px 0 inset #28431d; }
    *:focus:not(:focus-visible) {
      outline: none;
      box-shadow: none;}
.logo {text-align: center; margin-left: auto; margin-right: auto; padding-top:40px; border: 0}
.img {max-width: 100%; max-height: auto; border: 0}
@media screen and (max-width:1024px) {
    .imgsmfrnt {max-width: 248px; height: auto; border: 0}}
.block {display: inline-block; max-width: 60%;}
@media screen and (max-width:1024px) {
    .block {padding-right: 5px; padding-left:5px; max-width: 98%;}}
.textwtbg {font-family: 'Didact Gothic', sans-serif; font-weight: 550; font-size: 125%; line-height: 1 em; color: #11373c; padding:0 0 20px 0; text-align: left;}
.textwtbg a, .textwtbg a:visited {color: #28431d; text-decoration:underline;}
.textwtbg a:hover {color:#fff; background:#28431d; text-decoration:overline; cursor: pointer;}
.arrow {display: block; text-align: center; margin:auto; padding: 5px;}
.center {text-align: center; margin:auto; padding: 5px;}
.conltgreen {max-width: 100%; background: #e4eedf; text-align: center; margin: 0 auto; padding:0;}
.conltblu {max-width: 100%; background: #e7f9fb; text-align: center; margin: 0 auto; padding:0;}
.conltblu a:link {text-decoration: underline; color: #28431d;}
.conltblu a:visited {text-decoration: underline; color: #28431d;}
.conltblu a:hover {text-decoration: none; color: #fff; background: #28431d; cursor: pointer;}
.conltblu a:active {color: #28431d;}
.conltblu a:focus {outline: 2px dotted #fff;
    outline-offset: -2px;
    box-shadow: 0 0 2px 0 inset #28431d; }
    *:focus:not(:focus-visible) {
      outline: none;
      box-shadow: none;}
.leftcol {position: relative; margin-right: auto; margin-left: auto;  margin-top: 1%; max-width: 50%; padding-right: 35px; text-align: center; display:inline-block; vertical-align:middle;}
@media screen and (max-width:1050px) {
    .leftcol {padding-right: 0; max-width: 100%;min-width: 98%}
}
.rtcol {position: relative; margin-right: auto; margin-left: auto;  margin-top: 0.50%; max-width: 50%; text-align: center; display:inline-block; vertical-align:middle;}
@media screen and (max-width:1050px) {
    .rtcol {padding-right: 5px; padding-left:5px; max-width: 98%; min-width: 98%;}
}
.leftcolalt {position: relative; margin-right: auto; margin-left: auto; margin-top: 4%; max-width: 40%; padding-right: 35px; text-align: center; display:inline-block; vertical-align:middle;}
@media screen and (max-width:1050px) {
    .leftcolalt {padding-right: 5px; padding-left:5px; max-width: 98%; min-width: 98%; margin-top: 0}
}
.rtcolfrnt {position: relative; margin-top: 5%; margin-bottom: 2%; width: 45%; text-align: left; display:inline-block; vertical-align:middle;}
@media screen and (max-width:1179px) {
    .rtcolfrnt {max-width: 98%; min-width: 98%;}
}
.clearfix {clear:both}
.text{font-family: 'Didact Gothic', sans-serif; font-weight: 500; font-size: 130%; color: #5f742b; text-align: left; padding: 25px;}
.txtcent {font-family: 'Didact Gothic', sans-serif; font-weight: 500; font-size: 130%; color: #5f742b; text-align: center; padding: 25px;}
.color {display: none; padding: 0; margin: 0;}
.services li {display:block; padding-top: 5px; padding-bottom: 5px; margin:-10px 0 0 5px; list-style-type:none; font:500 130%; color:#517b21; line-height: 1.1em}
@media screen and (max-width:900px) {
    .services li {max-width: 98%;min-width: 98%; margin-left:-15px; text-align: left;}
}
.form {font-family: 'Didact Gothic', sans-serif; font-weight: 500; font-size: 130%; color: #336066; text-align: left; padding: 25px;}
.formbodywht {background: #fff; padding; 20px; margin-bottom: -6px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; margin-bottom: 30px}
.formfrnt {font-family: 'Didact Gothic', sans-serif; font-weight: 500; font-size: 110%; color: #fff; border: 0; padding-bottom: 2px; padding-top: 2px; padding-right: 3px; padding-left: 3px; background: #487734; margin-bottom: -6px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;}
input, textarea, button {outline: none; }
input[type=text] {width: 95%; height: 40px; line-height: 40px;}
textarea {width: 95%; height: auto; line-height: 40px;}

/*  ********** footer *********** */
footer {background-color: #e7f9fb; /* For browsers that do not support gradients */ background-image: linear-gradient(to right, #e7f9fb , #9ae2ee); border-top: 1px dotted #336066; margin-right: auto; margin-left: auto;  text-align: center; margin-top: 0px; padding: 0; clear:both; max-width: 100%;  clear:both;}
#endtitle {font-family: arial, verdana, "Courier New"; font-size: 10px; font-weight: normal; text-align: left; color: #11373c; padding: 0 0 10px 10px;}
#bttm {width: 100%}
.btmlinks {margin-left: 30px; padding-bottom: 20px; text-align: left; display: inline-block; overflow: auto; vertical-align: top; width: 30%}
@media screen and (max-width: 400px) {
   .btmlinks {width: 30%; float: none; margin-left: 5px}
}
.bttmtitle {font-family: 'Amiri', serif; font-weight: 600; font-size: 170%; color: #A3C6BC; font-variant: small-caps; line-height: 1.55em; text-align: left; vertical-align:top; padding-bottom: 5px; padding-left: 16px; text-align: left;}
.bttmtitle a, .bttmtitle a:visited {color: #A3C6BC; text-decoration:none;}
.bttmtitle a:hover {color:#BBCA61; background:transparent; text-decoration:underline; cursor: pointer;}
@media screen and (max-width: 780px) {
   .bttmtitle {font-size: 20px}
}
.plain {display: inline-block; padding: 0px; text-align: left}
.plain ul {display:inline-block; padding: 0; margin:0px;}
.plain li {display:block; padding-top: 5px; padding-bottom: 5px; margin:-10px 0 0 25px; list-style-type:none; font:500 120% Arial, Helvetica, sans-serif; color:#fff; line-height: 1.25em}
@media screen and (max-width: 780px) {
   .plain li {font-size: 16px}
}
.botmenuspc {margin: 0; text-align:left; padding: 5px 0 10px 0;}
.botmenu {font-family: 'Amiri', serif; font-weight: 500; color: #CCAB62; text-align:left; padding:  0 10px 0 0;}
.navbot {display:inline-block;}
.navbot {display:inline;}
.strip {display:table;}
.navbot {display:table-row; padding:0; margin:0; list-style-type:none; white-space:nowrap;}
.navbot li {display:inline; font: 500 105% 'Didact Gothic', sans-serif;; display:block; float:left; padding:4px 12px; color:#11373c; border-right: 1px dotted #336066;}
@media screen and (max-width: 780px) {
   .navbot li {font-size: 12px}
}
.navbot a, .navbot a:visited {color:#334818; background:transparent; text-decoration:underline;}
.navbot a:hover {color: #fff; background: #334818; font-weight: 500; text-decoration:underline; cursor: pointer;}
#botmenu {margin: auto; text-align: center; padding-bottom: 30px; padding-top: 10px; max-width: 100%; clear:both}
#botmenu .strip {text-align:left;}

/*  ********** image slide *********** */
#slide {position: relative; display:inline-block; margin-left: auto; margin-right: auto; text-align: center; }
.rslides {position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }
.rslides li:first-child {position: relative;
  display: block;}
.rslides img {
display: block;
  height: auto; width: 100%;
  border: 0;
  }