@property --pistachio {
    syntax: "<color>";
    inherits: false;
    initial-value: #8ed081;
}

@property --pigment-green {
    syntax: "<color>";
    inherits: false;
    initial-value: #4EA43D;
}

@property --mantis {
    syntax: "<color>";
    inherits: false;
    initial-value: #79c76b;
}

@property --mantis-rgba {
    syntax: "<color>";
    inherits: false;
    initial-value: rgba(121, 199, 107, 0.5);
}

@property --magnolia {
    syntax: "<color>";
    inherits: false;
    initial-value: #efe9f4;
}

@property --max-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 950px;
}

@font-face {
    font-family: "PTSans";
    src: url("../font/PTSans/PTSans-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "PTSans-Bold";
    src: url("../font/PTSans/PTSans-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "PTSans-BoldItalic";
    src: url("../font/PTSans/PTSans-BoldItalic.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "PTSans-Italic";
    src: url("../font/PTSans/PTSans-Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Lora";
    src:
        url("../font/Lora/Lora-BoldItalic.ttf") format("truetype"),
        url("../font/Lora/Lora-Bold.ttf") format("truetype"),
        url("../font/Lora/Lora-Italic.ttf") format("truetype");
}

@font-face {
    font-family: "Lora";
    src:
        url("../font/Lora/Lora-MediumItalic.ttf") format("truetype"),
        url(".../font/Lora/Lora-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "Lora";
    src:
        url("../font/Lora/Lora-Regular.ttf") format("truetype"),
        url("../font/Lora/Lora-SemiBoldItalic.ttf") format("truetype"),
        url("../font/Lora/Lora-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    src:
        url("../font/Montserrat/Montserrat-Regular.ttf") format("truetype"),
        url("../font/Montserrat/Montserrat-Italic.ttf") format("truetype"),
        url("../font/Montserrat/Montserrat-BlackItalic.ttf") format("truetype"),
        url("../font/Montserrat/Montserrat-ExtraLight.ttf") format("truetype"),
        url("../font/Montserrat/Montserrat-Thin.ttf") format("truetype"),
        url("../font/Montserrat/Montserrat-MediumItalic.ttf") format("truetype"),
        url("../font/Montserrat/Montserrat-ThinItalic.ttf") format("truetype"),
        url("../font/Montserrat/Montserrat-ExtraLightItalic.ttf")
            format("truetype"),
        url("../font/Montserrat/Montserrat-Light.ttf") format("truetype"),
        url("../font/Montserrat/Montserrat-Medium.ttf") format("truetype"),
        url("../font/Montserrat/Montserrat-BoldItalic.ttf") format("truetype"),
        url("../font/Montserrat/Montserrat-Bold.ttf") format("truetype"),
        url("../font/Montserrat/Montserrat-LightItalic.ttf") format("truetype"),
        url("../font/Montserrat/Montserrat-SemiBold.ttf") format("truetype"),
        url("../font/Montserrat/Montserrat-ExtraBold.ttf") format("truetype"),
        url("../font/Montserrat/Montserrat-ExtraBoldItalic.ttf")
            format("truetype"),
        url("../font/Montserrat/Montserrat-Black.ttf") format("truetype"),
        url("../font/Montserrat/Montserrat-SemiBoldItalic.ttf")
            format("truetype");
}

* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    font-size: 1em;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--magnolia);
    font-family: "PTSans", Verdana, sans-serif;
}
.wrapper {
    margin: auto;
}
.set-max-width {
    max-width: var(--max-width);
}
.content {
    background-color: white;
    padding: 20px;
}

#header {
    margin: auto;
}
.soft-bot-border {
    border-bottom: 3px solid var(--pistachio);
    border-radius: 0px 0px 10px 10px;
}

.top-contact-header {
    background-color: var(--mantis);
}

.top-contact-header a {
    display: inline-block;
    padding: 10px;
    color: white;
    text-decoration: none;
}
.top-contact-header a:hover {
    background-color: var(--magnolia);
    color: #333;
}

.top-contact-link-signal {
    background-image: url("../img/Signal-Logo-White.png");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 20px;
    padding-left: 35px !important;
}
.top-contact-link-signal:hover {
    background-image: url("../img/Signal-Logo-Ultramarine.png");
}
.top-contact-link-phone {
}

.text-right {
    text-align: right;
}
.text-left {
    text-align: left;
}

header#header,
header div#branding {
    border-radius: 10px 10px 0px 0px;
}

header#header {
    background-image: url("../img/sunlit-forest-mornings-stockcake.webp");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center -400px;
}
header#header #branding {
    padding: 4.5em;
    background-color: var(--mantis-rgba);
    text-shadow: 1px 1px 1px rgba(38, 17, 10, 0.5);
    color: #fff;
}
header#header h1 {
    line-height: 0.75em;
}
header#header #branding #site-title {
    font-family: "Lora";
    font-weight: bold;
    display: block;
    font-size: 2.5em;
}
header#header #branding #site-title a {
    font-weight: bold;
    color: white;
    text-decoration: none;
}
#branding #site-title a:hover {
    text-decoration: none !important;
}
header#header #branding #site-description {
    font-size: 1.5em;
    color: #fff;
}
nav ol,
nav ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
nav {
    text-align: right;
}
.nav-logo {
    box-sizing: border-box;
    width: 25%;
    max-width: 300px;
    display: inline-block;
}
.nav-logo a {
    padding: 10px;
    display: inline-block;
}
.nav-logo img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.nav-menu {
    width: auto;
}

/* main menu */

nav#menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-item {
    display: inline-block;
    position: relative;
    transition: all 0.2s ease-in-out;
}

.sub-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    padding-bottom: 10px;
    font-size: 1em;
    top: 100%;
    width: auto;
    min-width: 150px;
    text-align: center;
}

.menu-item:hover .sub-menu {
    display: block;
}

.menu-item > a {
    padding: 20px 20px;
    display: inline-block;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.menu-item:hover,
a[aria-current="page"] {
    background-color: #fff;
}

.menu-item_has-children {
    position: relative;
}

.sub-menu ul {
    margin: 0;
    padding: 0;
}

.sub-menu li {
    display: block;
}

/* Hamburger toggle button */
.menu-toggle {
    display: none;
    background: none;
    width: 100%;
    box-sizing: border-box;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 10px;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    .nav-menu {
        display: none;
    }
    .nav-menu.show {
        display: block;
    }

    nav#menu li {
        display: block;
    }
    nav#menu li a {
        display: block;
        width: 100%;
        text-align: center;
    }
    .sub-menu {
        background-color: inherit;
    }
    .current-menu-item .sub-menu,
    .current_menu-item .sub-menu,
    .sub-menu {
        width: 100%;
        position: relative;
        display: block;
    }
}

#footer-street-map {
    min-height: 200px;
    height: auto;
    border-radius: 10px 10px 0px 0px;
    width: auto;
    max-width: var(--max-width);
    margin: 15px auto 0px;
}

/* center the blockquote in the page */
.blockquote-wrapper {
    display: block;
    padding: 0 20px;
}

/* Blockquote main style */
.blockquote {
    position: relative;
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    padding: 30px 0;
    width: 100%;
    max-width: 500px;
    z-index: 1;
    margin: 40px auto;
    align-self: center;
    border-top: solid 1px;
    border-bottom: solid 1px;
}

/* Blockquote header */
.blockquote h1 {
    position: relative;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    margin: 0;
}

/* Blockquote right double quotes */
.blockquote:after {
    position: absolute;
    content: "”";
    color: rgba(0, 0, 0, 1);
    font-size: 10rem;
    line-height: 0;
    bottom: -43px;
    right: 30px;
}

.team {
}
.team h3,
.team h4 {
    margin-top: 0px !important;
}
.team .person {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.team .person .picture img {
    border-radius: 80px;
    overflow: hidden;
    display: inline-block;
    margin: 10px 0px;
    outline: 5px solid var(--mantis);
    max-width: 100%;
}

.team .picture {
    flex-basis: 25%;
    align-content: center;
}
.team .team-content {
    flex-basis: 75%;
    padding: 15px;
    align-content: center;
}
.team .team-content .title {
    font-family: "PTSans";
}
.bot20 {
    margin-bottom: 20px;
}
@media only screen and (max-width: 650px) {
    .team .person {
        display: block;
    }
    .team .picture {
        display: block;
        text-align: center;
    }
    .team .picture img {
        max-width: 100px !important;
    }
}

body a,
#footer-street-map,
.leaflet-container a {
    text-decoration: none;
    color: var(--pigment-green); /* #6D8F5E;*/

    &:hover {
        text-decoration: underline;
    }