/* GENERAL */
html { width: 100%; height: 100%; padding: 0px; margin: 0px; }
body {margin:0px;}

/* TYPE */
h1, h2{ font-family: 'Open Sans', sans-serif; font-weight: 600; font-style: normal;}
/* h1 {border-bottom: 10px #008c5a solid; width: 50%; } */
h2 {padding-top: 30px;color: #008c5a; margin-bottom:0; padding-bottom: 0;}
h3, h4 { font-family: 'Open Sans', sans-serif; font-weight: 400; font-style: normal;}
p {font-family: 'Open Sans', sans-serif; font-weight: 400; font-style: normal;color: #242424;}
ul, li, a { font-family: 'Open Sans', sans-serif; font-weight: 400; font-style: normal; }
a {text-decoration: none; color: #008c5a; font-weight: bolder;}
/* ul li {list-style-type: none!important;} */
.row {max-width: 100%;}
.far { color: #008c5a; margin-right: 15px;}

.greenline {border-bottom: 5px solid #7eab5f; width: 6%; margin-bottom: 25px;}


/* HOME HEADER */
div#header > ul { background-color: #34303f; clear: both; list-style-type: none; width: 100%; }
div#header > ul > li { display: inline-block; text-align: center; width: 19%; }
div#header > ul > li > a { color: #fff; display: block; padding: 8px; text-decoration: none; }
div#header > ul > li > a:hover { background-color: #595a61; }
div#header > ul > li:nth-child(3) { margin-left: 17%; }

div#banner-image { background-color: #fff; height: 394px; overflow: hidden; position: relative; text-align: center; width: 100%; }
div#banner-image > img { left: 0; position: absolute; width: 100%; height: 100%; opacity: 0.3;}
div#banner-image.animated > img { transition: top 2.3s ease-out .1s; }
div#banner-image > p { top: 80px; border: 7px solid #008c5a; border-top: transparent; border-bottom: transparent; color: #008c5a; display: inline-block; font-size: 2.4em; letter-spacing: .2em; overflow: hidden; padding: 16px 16px 10px; position: relative; width: 724px; font-weight: bolder;}
div#banner-image.animated > p { transition: height .7s, opacity 1.6s, width 1.45s ease-out .7s; }
div#banner-image > p > span { display: block; width: 700px; }

div#quick-links { height: 170px; width: 100%; }
div#quick-links > a { background-color: #333; color: #fff; display: inline-block; font-size: 2.7em; height: 100%; line-height: .85em; padding: 20px; overflow: hidden; position: relative; text-decoration: none; vertical-align: top; width: 33.33333%; text-align: center;}
#quick-links img {opacity: 0.5;}
div#quick-links > a:before, div#quick-links > a:after { background-color: rgba(23,23,23,.2); content: ""; height: 50%; left: 0; position: absolute; top: -50%; transition: top .3s; width: 100%; z-index: 5; }
div#quick-links > a:after { top: 100%; }
div#quick-links > a:hover:before { top: 0; }
div#quick-links > a:hover:after { top: 50%; }
div#quick-links > a:nth-of-type(2) { padding: 20px; } /** DOCUMENTS **/
div#quick-links > a > img { left: 0; position: absolute; top: 0; width: 100%; }

div#quick-links > a > span { position: relative; text-align: center; }
div#quick-links span.rnd-button { background-color: transparent; border-color: #fff; color: #fff; display: block; font-size: .45em; line-height: 1.3em; margin: 25px auto; text-align: center; width: 120px; }

.rnd-button { background-color: #fff; border: 1px solid #7eab5f; border-radius: 3px; color: #7eab5f; font-size: .9em; font-weight: 700; padding: 4px 6px; }
a.rnd-button:hover { background-color: #7eab5f; color: #fff; }
a.rnd-button { text-decoration: none; }

.content {width: 80%; margin: 0 auto; height: 100%;}
.intro {margin-top: 35px;}

ol li {padding-bottom: 10px;}

#documents {background-color: #F5F5F1; padding: 25px 60px;}
/* #documents > div {width: 85%; margin: 0 auto;} */
#documents ul li {list-style-type: none;}

/* Accordions */
/* #faq-questions {padding: 16px 5% 50px; } */
.faq-question { padding: 22px 20px 20px 0px; position: relative; }
.faq-question > h3 {background-color: transparent; color:  #009244; cursor: pointer; font-size: 1.1em; font-weight: 700; margin: 0; padding: 0; }
.faq-question > span { color:  #009244; position: absolute; left: 24px; top: 16px; font-size: 25px;}

.criteria h3 {color: rgb(65, 185, 230);}

.document {margin-top: 10px; margin-bottom: 50px; }
.document span {font-weight: 300; color: darkgray; font-size: 12px;}
.document h3 {margin: 5px 0 0; font-size: 16px; font-weight: bolder;}
.document p {margin: 5px 0 0; font-size: 14px;}
.document h4 { margin-top: auto;}
.document h4 a {margin: 10px 0 0; font-size: 16px; }
.document .border {width: 80%; border-bottom: solid 1px darkgray;}

.survey {height: 250px;}

.location img {width: 100%;}

.carousel { background: #EEE; margin-bottom: 80px;  box-shadow: 0px 5px 15px rgba(34, 34, 34, 0.2); }
.carousel-cell {width: 50%; height: 200px; margin-right: 10px; background: rgba(65, 185, 230, 0.48); border-radius: 5px;}
  /* cell number */
.carousel-cell:before {display: block; text-align: center; line-height: 200px; }
.carousel h3 {color: #333; font-weight: bold; font-size: 18px; padding: 20px 0 5px 25px;}
.carousel p {color: #333; font-size: 14px; padding: 0 25px 0 25px;}


/* COMMENT BUTTON */
button { background: white; border: 0; box-sizing: border-box; overflow: hidden; box-shadow: inset 0 0 0 2px #008c5a; color: #008c5a; font-size: 1em; text-align: center; position: absolute; vertical-align: middle; padding: 15px;}
button::before, button::after { box-sizing: inherit; content: ''; position: absolute; width: 150px; height: 75px;}
button .fas {font-size: 3em; padding: 5px 0 5px; }
.draw { -webkit-transition: color 0.25s; transition: color 0.25s;  }
.draw::before, .draw::after { border: 2px solid transparent; width: 0; height: 0;}
.draw::before { top: 0; left: 0;  }
.draw::after { bottom: 0; right: 0;  }
.draw:hover::before, .draw:hover::after { width: 100%; height: 100%;}
.draw:hover::before { -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;}
.meet:hover { color: #41b9e6; background-color: #FFF;}
.meet::after { top: 0; left: 0;}
.meet:hover::before { border-top-color: #41b9e6; border-right-color: #41b9e6;}
.meet:hover::after { border-bottom-color: #41b9e6; border-left-color: #41b9e6;-webkit-transition: height 0.25s ease-out, width 0.25s ease-out 0.25s; transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;}

/* UPCOMING EVENTS */
#upcoming {height: auto; width: 100%;}
.upcoming { background: url('../assets/images/Picture1.jpg'); background-size: cover; width: 100%; margin: 0; position: relative; overflow: hidden;}

.upcoming h1 { font-size: 40px; color: white; padding-top: 30px; padding-bottom: 10px; width: 85%; margin: 0 auto; }
.upcoming p {font-size: 18px; color: white; width: 85%; margin: 0 auto; padding-bottom: 25px;}
.upcoming a {color: white;}
.upcoming a:hover {color: #222222; transition: 0.5s all; font-weight: bolder;}
.upcoming a .fas {color: white; font-size: 25px; margin-right: 5px;}

/* MEDIA QUERIES */
@media screen and (max-width: 1160px) {
    h2 { font-size: 1.9em; }
    div#banner-image { height: 346px; }
    /* div#banner-image > img { top: -12% !important; transition: 0; width: 120%; } */
  
    div#quick-links { height: 140px; }
    div#quick-links > a { font-size: 1.8em; padding: 42px 0 0 13%; }
    div#quick-links > a:nth-of-type(2) { padding: 43px 0 0 11%; }
    div#quick-links > a > img { width: 128%; }
    div#quick-links > a > span > i { font-size: 1.4em; left: -64px; padding: 6px 9px; }
    div#quick-links span.rnd-button { width: 90px; }
  
}

@media screen and (max-width: 920px) {
  .small-3 {width: 100%;}  
}
@media screen and (max-width: 876px) {
    .flickity-viewport {height: 300px!important;}
    .carousel-cell {height:300px!important; }
    .carousel h3 {font-size: 16px; padding: 10px 0 5px 15px;}
    .carousel p {color: #333; font-size: 11px; padding: 0 10px 0 15px;}
}

@media screen and (max-width: 780px) {
    div#banner-image { height: 270px; }
    /* div#banner-image > img {  width: 140%; } */
    div#banner-image > strong { font-size: .8em; letter-spacing: .1em; padding-top: 44px; }
    div#banner-image > p { font-size: 1.4em; line-height: 25px; padding-bottom: 8px; width: 70% !important; }
    div#banner-image > p > span { width: 100%; }
  
    div#quick-links { height: auto; }
    div#quick-links > a { display: block; height: 54px; line-height: 54px; padding: 0 0 0 8%; text-align: center; width: 100%; }
    div#quick-links > a:nth-of-type(2) { padding: 0 0 0 6%; }
    div#quick-links span.rnd-button { display: inline-block; margin: -2px 0 0 2%; vertical-align: middle; }
}

@media screen and (max-width: 580px) {
    div#banner-image { font-size: .8em; height: 175px; }
    div#banner-image > strong { margin: 0 auto; padding-top: 25px; width: 80%;}
    div#banner-image > p { height: 70px !important; line-height: 18px; }
    /* div#banner-image > img { top: 2% !important; width: 170%; } */
  
    div#header > ul > li { font-size: .6em; }
  
    div#quick-links > a, div#quick-links > a:nth-of-type(2) { font-size: 1.2em; height: 40px; line-height: 40px; padding-left: 14%; }

    .survey {height: 275px;}
}  

@media screen and (max-width: 417px) {
  div#banner-image > p { height: 70px !important; line-height: 18px; top: 65px}
}