@charset "utf-8";
/* CSS Document */


* {
  box-sizing: border-box;
}
body, html {
	background: #fff;
	font-family: "Khula", sans-serif;
  	font-weight: 300;
  	font-style: normal;
  	font-optical-sizing: auto;
	height: 100%;
	color: #285033;
}

/** Members **/
.login {
	margin: 0 auto;
	width: 300px;
	text-align: center;
}
.login .form-control {
	text-align: center;
}
input.form-control {
	border-radius: 0;
}
#accordion {
	padding: 0 20%;
}
#accordion .btn-link {
	color: #285033;
}

.map-gif-container {
	margin: 30px 0;
	padding: 0 10%;
}
.map-gif {
	margin: 0 auto;
	width: 100%;
}
.map-gif img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
@media (min-width: 576px) {
.map-gif-container {
	padding: 0 20%;
}
}
@media (min-width: 1200px) {
.map-gif-container {
	padding: 0 30%;
}
}


.contact {
	font-size: 1em;
	padding: 0 5%;
	text-align: center;
}
.contact-list {
	list-style: none;
	font-weight: 500;
	font-size: 1em;
	text-align: center;
}
.contact form {
	font-size: 1.1em;
}
@media (min-width: 768px) {
.contact-list {
	text-align: right;
}
.contact {
	text-align: left;
	padding: 0 10%;
}
}
@media (min-width: 1200px) {
.contact {
	padding: 0 20%;
}
}

/** Social Icons **/
header .social-icons {
	text-align: center;
	z-index: 1000;
	margin: 0;
}
.contact .social-icons {
	text-align: center;
	z-index: 1000;
	margin: 0 0 30px 0;
}
footer .social-icons {
	text-align: center;
	z-index: 1000;
	margin: 0 0 30px 0;
}
.social-icon {
	width: 20px;
	height: 20px;
	display: inline-block;
}
.social-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.social-icon:hover {
	opacity: .7;
}
@media (min-width: 768px) {
.contact .social-icons {
	text-align: right;
}
}
@media (min-width: 992px) {
header .social-icons {
	text-align: right;
}
}

.downloads {
	padding: 0 15%;
	text-align: center;
}
.download {
	padding: 10px;
	margin: 10px 20px 10px 0;
	display: inline-block;
}
.download-icon {
	width: 120px;
	height: 140px;
	margin: 0 auto 20px auto;
}
.download-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/** Gallery **/
.gallery {
	margin: 50px 0 0 0;
	text-align: center;
	padding: 0 15%;
}
.gallery-pic {
	width: 100px;
	height: 100px;
	margin: 0 10px 10px 0;
	display: inline-block;
}
.gallery-pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #eaeaea;
}
.gallery hr {
	border-bottom: 0.5px dotted #333;
	border-top: none;
}
@media (min-width: 442px) {
.gallery-preview-pic {
	height: 250px;
}
}
@media (min-width: 576px) {
.gallery-pic {
	width: 180px;
	height: 200px;
}
}
@media (min-width: 768px) {
.gallery-pic {
	width: 250px;
	height: 300px;
}
}
@media (min-width: 1200px) {
.gallery-pic {
	width: 250px;
	height: 250px;
}
}


/** Header **/
header {
	border-bottom: 1px solid #789508;
}
.header {
	width: 100%;
	padding: 0 5%;
}
.logo {
	width: 250px;
	padding: 20px 0 10px 0;
	margin: 0 auto;
}
.logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.navigation {
	width: 100%;
	padding: 0 0 10px 0;
}
.social {
	width: 100%;
	padding: 0 0 0 0;
}
@media (min-width: 992px) {
.header {
	padding: 0 2%;
}
.logo {
	width: 280px;
	margin: 30px auto 0 auto;
}
.navigation {
	padding: 20px 0 10px 0;
}
.social {
	width: 100%;
	padding: 20px 0 0 0;
}
}
@media (min-width: 1200px) {
.header {
	padding: 0 5%;
}
.logo {
	width: 350px;
	margin: 30px 0 0 0;
}
.navigation {
	padding: 35px 0 10px 0;
}
}
@media (min-width: 1400px) {
.header {
	padding: 0 10%;
}
}


.jumbo {
	width: 100%;
	background: url(../images/jumbo01_02.jpg);
  	background-repeat: no-repeat;
  	background-size: cover;
	background-position: center;
	padding: 80px 0;
	margin-bottom: 20px;
}
.jumbo-text {
	margin: 0 auto;
	background: rgba(255,255,255,0.7);
	-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3); 
	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
	padding: 30px 20px;
	width: 100%;
	text-align: center;
	position: relative;
	top: 30%;
}

.jumbo-text h1 {
	font-size: 3em;
	line-height: 1em;
	color: #285033;
	font-family: "Aboreto", system-ui;
  	font-weight: 400;
  	font-style: normal;
	margin-bottom: 20px;
}
.jumbo-text p {
	font-size: 1.2em;
	line-height: 1.3em;
	color: #285033;
}
@media (min-width: 576px) {
.jumbo-text {
	width: 550px;
}
}
@media (min-width: 992px) {
.jumbo-text {
	padding: 40px 40px;
	width: 600px;
}
.jumbo-text h1 {
	font-size: 4em;
}
.jumbo-text p {
	font-size: 1.6em;
}
}

/* Text Pics */
.text-pics {
	padding: 0 5%;
}
.text-pic {
	width: 100%;
	height: 300px;
	background: #eaeaea;
}

/* Teasers */
.teasers {
	padding: 0 2%;
}
.teaser {
	margin: 0 0 30px 0;
	padding: 30px 20px 20px 20px;
	text-align: center;
}
.teaser-pic {
	width: 100%;
	height: 200px;
	margin: 20px 0 0 0;
	background: #eaeaea;
}
.teaser-pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.teaser p {
	font-size: 1em;
	letter-spacing: 0.5px;
}
@media (min-width: 576px) {
.teaser-pic {
	height: 250px;
}
}
@media (min-width: 992px) {
.teaser {
	padding: 40px 20px 20px 20px;
}
.teaser-pic {
	height: 250px;
}
.teaser p {
	font-size: 1.2em;
}
}
@media (min-width: 1200px) {
.teasers {
	padding: 0 5%;
}
.teaser-pic {
	height: 300px;
}
}


/** Colour Sections **/
.clr-section {
	width: 100%;
	padding: 30px 0;
	margin: 10px 0;
	color: #fff;
	text-align: center;
}
.clr-section-txt {
	width: 100%;
	margin: auto;
}
.clr-section-pic {
	width: 300px;
	height: 200px;
	margin: 0 auto 20px auto;
}
.clr-section-pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.clr-section a {
	color: #fff;
}


.dkgreenback {
	background: url(../images/oakleaves-dkgreen.gif);
  	background-repeat: no-repeat;
	background-position: center;
	background-color: #285033;
	color: #fff;
}
.dkgreenoakleaves {
	background: url(../images/oakleaves-dkgreen.gif);
  	background-repeat: no-repeat;
	background-position: right;
	background-color: #285033;
}
.orangeback {
	background: url(../images/oakleaves-orange.gif);
  	background-repeat: no-repeat;
	background-position: center;
	background-color: #bb490b;
	color: #fff;
}
.orangeoakleaves {
	background: url(../images/oakleaves-orange.gif);
  	background-repeat: no-repeat;
	background-position: left;
	background-color: #bb490b;
}
.ltgreenback {
	background: url(../images/oakleaves-ltgreen.gif);
  	background-repeat: no-repeat;
	background-position: center;
	background-color: #789508;
	color: #fff;
}
.ltgreenoakleaves {
	background: url(../images/oakleaves-ltgreen.gif);
  	background-repeat: no-repeat;
	background-position: right;
	background-color: #789508;
}
@media (min-width: 768px) {
.clr-section {
	text-align: left;
}
.clr-section-pic {
	width: 100%;
	height: 350px;
	margin: 0 0 20px 0;
}
}
@media (min-width: 992px) {
.clr-section {
	padding: 30px 15%;
}
}

/** Sections **/
.section-head {
	text-align: center;
	padding: 20px 5% 0 5%;
}
.alert-box {
	margin: 30px auto;
	padding: 30px;
	width: 100%;
}
.alert-box-pic {
	width: 300px;
	height: 200px;
	margin: 20px auto;
}
.alert-box-pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (min-width: 1200px) {
.section-head {
	padding: 60px 20% 20px 20%;
}
.alert-box {
	margin: 30px auto;
	padding: 50px 30px 30px 30px;
	width: 90%;
}
}

hr.halfwidth-wht {
	width: 50%;
	margin: 20px auto;
	border-bottom: 0.5px dotted #fff;
}

/** Picbanner */
.picbanner {
	width: 100%;
	height: 200px;
	border-bottom: 0.5px solid #789508;
}
.picbanner01 {
	background: url(../images/picbanner01.jpg);
  	background-repeat: no-repeat;
	background-size: cover;
}
.picbanner02 {
	background: url(../images/picbanner02.jpg);
  	background-repeat: no-repeat;
	background-size: cover;
}
.picbanner03 {
	background: url(../images/picbanner03.jpg);
  	background-repeat: no-repeat;
	background-size: cover;
}
.picbanner04 {
	background: url(../images/picbanner04.jpg);
  	background-repeat: no-repeat;
	background-size: cover;
}
.picbanner05 {
	background: url(../images/picbanner05.jpg);
  	background-repeat: no-repeat;
	background-size: cover;
}


/** Text **/
h1 {
	font-size: 2.5em;
	line-height: 1em;
	color: #285033;
	font-family: "Aboreto", system-ui;
  	font-weight: 400;
  	font-style: normal;
	margin-bottom: 20px;
}
h2  {
	font-family: "Aboreto", system-ui;
  	font-weight: 400;
  	font-style: normal;
	font-size: 2.25em;
	line-height: 1.1em;
}
h3 {
	font-size: 1.7em;
	line-height: 1em;
	text-transform: uppercase;
}
h4 {
	font-size: 1.6em;
	text-transform: uppercase;
}
p {
	font-size: 1.1em;
	line-height: 1.4em;
	letter-spacing: 0.5px;
	font-weight: 400;
}
.alert-box p {
	font-weight: 500;
	font-size: 1.1em;
}
.intro p:first-child {
	font-size: 110%;
	font-weight: 700;
}
.content ul {
	list-style-position: inside;
	font-size: 1.1em;
	font-weight: 400;
}
ul.links {
	list-style: none;
	margin-left: -50px;
}
ul.links li {
	margin: 10px 0;
}
@media (min-width: 992px) {
h1 {
	font-size: 3.5em;
}
h2  {
	font-size: 2.75em;
}
h3 {
	font-size: 2em;
	line-height: 1em;
	text-transform: uppercase;
}
.intro p:first-child {
	font-size: 130%;
}
.alert-box p {
	font-size: 1.2em;
}
}
	
.about-list {
}
.about-list-pic {
	width: 100%;
	height: 300px;
	margin: 0 auto 20px auto;
}
.about-list-pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.about-list ul {
	list-style: none;
	margin-left: -40px;
	font-weight: 400;
}
.about-list-2col ul {
	list-style: none;
	margin-left: -40px;
	font-weight: 400;
	column-count: 2;
}
.intro ul {
	margin-left: -40px;
	font-weight: 400;
	font-size: 1.1em;
	padding: 0 20%;
}
.intro ul li {
	margin: 0 0 10px 0;
}
.align-center {
	text-align: center;
}
.ruled-box {
	border: 0.5px solid #789508;
	padding: 20px 20px 0 20px;
	margin: 0 0 30px 0;
}
.floraandfauna {
	padding: 0 5%;
	text-align: center;
}
@media (min-width: 1200px) {
.floraandfauna {
	padding: 0 12%;
}
}


/** Links **/
a {
	color: #789508;
	text-decoration: underline;
	font-weight: 700;
}
a:hover {
	color: #285033;
	text-decoration: underline;
	font-weight: 700;
}
.teaser a {
	color: #fff;
}
.teaser a:hover {
	color: rgba(255,255,255,0.5);
}
.clr-section a {
	color: #fff;
}
.clr-section a:hover {
	color: rgba(255,255,255,0.5);
}
.alert-box a {
	color: #fff;
}
.alert-box a:hover {
	color: rgba(255,255,255,0.5);
}

.text-pic-small {
	width: 150px;
	height: 150px;
	margin: 0 auto;
}
.text-pic-small img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/** Events Diary **/
.events-diary {	
	margin : 0 0 50px 0;
	padding: 0 0;
	text-align: center;
}
ul.events-diary-list li {
	list-style: none;
	margin-left: -35px;
}
date {
	font-size: 1.1em;
	font-weight: 700;
}
ul.events-diary-list li h4 {
	margin: 3px 0 3px 0;
	line-height: 1em;
}
ul.events-diary-list li p {
	margin: 0;
	font-size: 1.1em;
	line-height: 1.4em;
}
ul.events-diary-list li hr {
	border-top: none;
	border-bottom: 0.5px dotted #285033;
	margin: 10px auto 20px auto;
	width: 30%;
}
.events-diary-pic {
	width: 300px;
	margin: 0 auto 20px auto;
}
.events-diary-pic img  {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (min-width: 768px) {
.events-diary {	
	padding: 0 5%;
	text-align: left;
}
.events-diary-pic {
	width: 100%;
}
}
@media (min-width: 992px) {
.events-diary {	
	margin : 0 0 50px 0;
	padding: 0 15%;
}
ul.events-diary-list li hr {
	border-bottom: 0.5px dotted #285033;
	margin: 10px 0 20px 0;
	width: 50%;
}
}

/* Symbol Divider */
.symbol-divider {
	width: 100%;
	margin: -30px auto 40px auto;
	border-bottom: .5px solid #789508;
	position: relative;
}
.symbol-divider-symbol {
	width: 90px;
	height: auto;
	margin: 0 auto;
	position: relative;
	bottom: -25px;
}
.symbol-divider-symbol img  {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (min-width: 992px) {
.symbol-divider {
	width: 50%;
	margin: -20px auto 40px auto;
}
}


/** Content **/
.content {
	padding: 20px 0;
}
@media (min-width: 992px) {
.content {
	padding: 50px 0;
}
}

/** Footer **/
.map {
	margin: 50px 0 100px 0;
	width: 100%;
	height: 300px;
}
.footer {
	padding: 50px 15%;
	margin: 0;
	text-align: center;
}
.footer-logos {
	margin: 20px auto;
}
.footer-logo {
	width: 200px;
	height: 150px;
	display: inline-block;
}
.footer-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}





/** Hover Styles **/
[class^="hvr-"] {
  margin: .4em;
  padding: 1em;
  cursor: pointer;
  background: #e1e1e1;
  text-decoration: none;
  color: #666;
  /* Prevent highlight colour when element is tapped */
  -webkit-tap-highlight-color: rgba(0,0,0,0);

  /* Smooth fonts */
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Grow */
.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) tFranslateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.khula-light {
  font-family: "Khula", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.khula-regular {
  font-family: "Khula", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.khula-semibold {
  font-family: "Khula", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.khula-bold {
  font-family: "Khula", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.khula-extrabold {
  font-family: "Khula", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.aboreto-regular {
  font-family: "Aboreto", system-ui;
  font-weight: 400;
  font-style: normal;
}

/** Timeline */
.timeline {
    position: relative;
    background: #fff;
    padding: 5rem;
    margin: 0 auto 1rem auto;
    overflow: hidden;
}
.timeline:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -2px;
    border-right: 1px dashed #285033;
    height: 100%;
    display: block;
}
.timeline-row {
    padding-left: 50%;
    position: relative;
    margin-bottom: 30px;
}
.timeline-row .timeline-time {
    position: absolute;
    right: 50%;
    top: 15px;
    text-align: center;
    margin-right: 20px;
    color: #285033;
    font-size: 1.5rem;
	font-weight: 700;
}
.timeline-row .timeline-time small {
    display: block;
    font-size: 0.8rem;
}
.timeline-row .timeline-content {
    position: relative;
    padding: 20px 30px 0 30px;
    background: #789508;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.timeline-row .timeline-content p {
	color: #fff;
	margin: 0;
}
.timeline-row .timeline-content:after {
    content: "";
    position: absolute;
    top: 20px;
    height: 16px;
    width: 16px;
    background: #789508;
}
.timeline-row .timeline-content:before {
    content: "";
    position: absolute;
    top: 20px;
    right: -49px;
    width: 20px;
    height: 20px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    z-index: 10;
    background: #fff;
    border: 2px solid #789508;
}
.timeline-row .timeline-content h4 {
    margin: 0 0 20px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 150%;
}
.timeline-row .timeline-content p {
    margin-bottom: 30px;
    line-height: 150%;
}
.timeline-row:nth-child(even) .timeline-content {
    margin-left: 40px;
    text-align: left;
}
.timeline-row:nth-child(even) .timeline-content:after {
    left: -8px;
    right: initial;
    border-bottom: 0;
    border-left: 0;
    transform: rotate(-135deg);
}
.timeline-row:nth-child(even) .timeline-content:before {
    left: -52px;
    right: initial;
}
.timeline-row:nth-child(odd) {
    padding-left: 0;
    padding-right: 50%;
}
.timeline-row:nth-child(odd) .timeline-time {
    right: auto;
    left: 50%;
    text-align: center;
    margin-right: 0;
    margin-left: 20px;
}
.timeline-row:nth-child(odd) .timeline-content {
    margin-right: 40px;
}
.timeline-row:nth-child(odd) .timeline-content:after {
    right: -8px;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
}

@media (max-width: 992px) {
    .timeline {
        padding: 15px;
    }
    .timeline:after {
        border: 0;
    }
    .timeline .timeline-row:nth-child(odd) {
        padding: 0;
    }
    .timeline .timeline-row:nth-child(odd) .timeline-time {
        position: relative;
        top: 0;
        left: 0;
        margin: 0 0 10px 0;
    }
    .timeline .timeline-row:nth-child(odd) .timeline-content {
        margin: 0;
    }
    .timeline .timeline-row:nth-child(odd) .timeline-content:before {
        display: none;
    }
    .timeline .timeline-row:nth-child(odd) .timeline-content:after {
        display: none;
    }
    .timeline .timeline-row:nth-child(even) {
        padding: 0;
    }
    .timeline .timeline-row:nth-child(even) .timeline-time {
        position: relative;
        top: 0;
        left: 0;
        margin: 0 0 10px 0;
        text-align: right;
    }
    .timeline .timeline-row:nth-child(even) .timeline-content {
        margin: 0;
    }
    .timeline .timeline-row:nth-child(even) .timeline-content:before {
        display: none;
    }
    .timeline .timeline-row:nth-child(even) .timeline-content:after {
        display: none;
    }
}