@import url('https://fonts.googleapis.com/css2?family=Signika:wght@300..700&display=swap');

:root {
    /* colors */
    --greenLight: rgb(241, 242, 228);
    --greenMid: rgb(154, 170, 41);
    --greenDark: rgb(49, 48, 27);
    --white: rgb(249, 249, 249);
    --greyLight: rgb(238, 238, 238);
    --greyMid: rgb(198, 198, 198);
    --greyDark: rgba(48, 48, 48, 0.97);
}

* { margin: 0; padding: 0; outline: 0; /*box-sizing: border-box;*/ }
html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; font-family: "Signika", sans-serif;
    font-size: 15px; color: var(--greenDark); background-color: var(--greenDark);}
.menu-active  { position: fixed; }
div.wrapper { /*width: 1140px;*/ width: 96%;  margin: 0 auto;  }

h1 { font-weight: 700; font-size: 40px; line-height: 1.3em; }
h2 { font-weight: 700; font-size: 40px; line-height: 1.3em; }
h3 { font-weight: 700; font-size: 20px; line-height: 1.3em; }
h4 {  }
h5 {  }
h6 { font-weight: 700; font-size: 18px; line-height: 1.6em; }
p  { padding: 14px 0; line-height: 1.8em; }
img { display: block; max-width: 100%; height: auto; }


/* mobile menu styling */
div#mobilemenu { width: 280px; height: 100%; overflow-y: auto !important;
    background-color: rgba(48, 48, 48, 0.97); position: fixed; z-index: 50; top: 0; right: -280px;
    /*-webkit-overflow-scrolling: touch; */ overflow-y: auto; transition: 0.3s right; }
div#mobilemenu ul { list-style-type: none; }
/* div#mobilemenu div.menu-topnav-container>ul { padding: 60px 20px 20vh 30px; margin-top: 40px; text-align: left; } */
div#mobilemenu div.menu-topnav-container>ul { padding: 80px 20px 20vh 30px; margin-top: 40px; text-align: left; }
div#mobilemenu li { padding: 10px 0; border-top: solid 1px #444; }
div#mobilemenu li:first-child { border-top: none; }
div#mobilemenu a  { text-decoration: none; font-weight: 700; font-size: 16px; color: var(--white); transition: 0.3s color; }
div#mobilemenu a:hover { color: var(--greenLight); }
div#mobilemenu li ul li { padding: 5px 0; border: none; }
div#mobilemenu li ul a { padding-left: 20px; font-weight: 400; font-size: 13px; font-style: italic; text-transform: none; }
div#mobilemenu li ul li ul a { padding-left: 40px; font-weight: 400; font-style: normal; text-transform: none; }


/* top section styling */
section#top { padding: 30px 0; border-top: 12px solid var(--greenMid); background-color: var(--white); }
section#top div.top_holder { overflow: auto; }
section#top div.logo { float: left; width: 320px; padding: 12px 0 28px 0; }
section#top div.logo a { text-decoration: none; color: var(--greenMid); font-size: 26px;
    text-transform: uppercase; transition: 0.3s color;}
section#top div.logo a:hover { color: var(--greenLight) }
section#top div.topnav { float: right; position: relative; }
section#top div.topnav div.hamburger { z-index: 300; position: absolute; top: 35px; transform: translateY(-50%); right: 0;
    width: 20px; height: 20px; cursor: pointer; padding: 8px 12px 9px 12px; border-radius: 6px;
    background-color: var(--greenMid);
    border: 2px solid rgb(255, 255, 255); transition: 0.3s all; }
section#top div.topnav div.hamburger:hover { background-color: var(--greenDark); }
section#top div.topnav div.hamburger svg { display: block; position: relative; top: 50%; transform: translateY(-50%); }


/* regular content section styling */
section.content { padding: 20px 0; background-color: var(--white); }
section.content div.content_holder { box-sizing: border-box; overflow: auto; padding: 32px 32px; border-radius: 16px;
    background-color: var(--greyLight); }
section.content div.content_holder>div { padding: 10px 0; }
section.content p { }
section.content a { text-decoration: underline; color: var(--greenMid); }
section.content a:hover { text-decoration: none; }
section.content a.readmore { display: inline-block; text-decoration: none;
    background-color: var(--greenMid); color: var(--white); padding: 12px 24px; }
section.content img { max-width: 600px; width: 90%; }
section.content ul { list-style-position: inside; line-height: 1.8em; }
section.content li { }

/* province / address cards within content section */
section.content div.province-list { display: flex; flex-wrap: wrap; gap: 16px; }
section.content div.province-card { box-sizing: border-box; padding: 12px 12px; margin: 0;
    border: 1px solid var(--greyMid); border-radius: 6px; background-color: var(--white);
    flex: 0 0 calc(33.333% - 11px); }
section.content span.province-counter-label { display: block; margin-bottom: 8px; }
section.content span.province-button { display: block; }
section.content span.province-button a { display: inline-block; text-decoration: none; transition: 0.3s background-color;
    background-color: var(--greenMid); color: var(--white); padding: 6px 8px; border-radius: 6px; }
section.content span.province-button a:hover { background-color: var(--greenDark); }

section.content div.addresses {}
section.content div.address-card { box-sizing: border-box; width: 50%; background-color: var(--white); margin: 16px 0px;
    padding: 10px 20px; border-top-left-radius: 16px; border-bottom: 3px solid var(--greenLight);}

/* footer section styling */
section#footer { padding: 30px 0; background-color: var(--greenMid); color: var(--white);
    border-top: 10px solid var(--greenLight); }
section#footer div.footer_holder { overflow: auto; }
section#footer div.col { float: left; width: calc(50% - 20px); margin-right: 20px; }
section#footer p { padding: 0; }
section#footer a { color: var(--white); text-decoration: underline; }
section#footer a:hover { text-decoration: none; }


/* credits section styling */
section#credits { background-color: var(--greenDark); color: var(--white); }
section#credits div.credits_holder { overflow: auto; padding-bottom: 20px; }
section#credits a { display: inline-block; float: right; background-color: var(--greenLight); color: var(--greenDark);
    text-decoration: none; font-size: 12px; padding: 20px 10px;
    border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
section#credits a:hover { text-decoration: underline; }


/* --- @media queries --- */
@media screen and (max-width: 1160px) {
	div.wrapper { width: 90%; }
}

@media screen and (max-width: 750px) {
    section.content img { margin: 0 auto; }
	section#footer div.col { float: none; width: 100%; margin-right: 0px; }
}

@media screen and (max-width: 550px) {
	h1 { font-size: 24px; }
	h2 { font-size: 24px; }
	section#visual { height: 240px; }
}

@media screen and (max-width: 500px) {
	section.content div.contact_holder input[type=text] { width: 90%; }
	section.content div.contact_holder textarea { width: 90%; }
}

@media screen and (max-width: 450px) {
	section#top div.logo { width: 200px; }
	section#top div.topnav div.hamburger { top: 25px; }
}


@media screen and (max-width: 400px) {
	section#footer p { font-size: 13px; }
}