* {}

html {}

body {
    width: 100vw;
    display: inline-flex;
    flex-direction: column;
    background-color: #fbfbfb;
    font-family: ubuntu;
    letter-spacing: 0px;
}

/* --------- coookies ---------------*/

body>div.cookie-policy {
    padding: 30px calc((100vw - 960px) / 2);
    box-sizing: border-box;

    width: 100vw;
    display: none;
    flex-direction: column;
    align-items: flex-start;

}

body>div.cookie-policy>p {
    font-size: 16px;
    color: #363636;
    line-height: 1.75;
}

body>div.cookie-policy>p>a {
    color: #769d3e;
}

body>div.cookie-policy>p>a:hover {
    color: #668539;
    text-decoration: none;
}

body>div.cookie-policy>div {
    margin-top: 20px;
}

body>div.cookie-policy>div>a {
    text-decoration: none;
    border: 1px solid #769d3e;
    color: #769d3e;
    padding: 10px;
    border-radius: 10px;
    font-size: 16px;
    display: inline-flex;
}

body>div.cookie-policy>div>a:hover {
    border: 1px solid #668539;
    background-color: #668539;
    color: #fff;
}

@media screen and (max-width:1200px) {
    body>div.cookie-policy {
        padding: 30px 5vw;
    }
}

/* ---------- header ------------------ */

body>header {
    padding: 20px calc((100vw - 960px) / 2);
    box-sizing: border-box;
    background-color: #192e1d;
    width: 100vw;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

body>header>a.logo {
    text-decoration: none;
}

body>header>a.logo>img.full-logo {
    height: 36px;
}

body>header>a.logo>img.icon-logo {
    height: 36px;
    display: none;
}





body>header>nav {
    display: inline-flex;
    flex-direction: row;
    gap: 5px;
    background-color: #263e2a;
    padding: 10px;
    border-radius: 10px;
}

body>header>nav>a {
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    font-size: 18px;
}

body>header>nav>a.current {
    color: #769d3e;
}

body>header>nav>a:hover {
    color: #668539;
}


body>header>nav>p {
    color: #fff;
    font-size: 18px;
}

body>header>a.hamburger-icon,
body>header>a.close-icon {
    text-decoration: none;
    display: none;
}

body>header>a.hamburger-icon>svg,
body>header>a.close-icon>svg {
    fill: #fff;
    height: 30px;
}

@media screen and (max-width:1100px) {
    body>header {
        padding: 20px 5vw;
    }
}

@media screen and (max-width: 960px) {

    body>header>a.hamburger-icon.showing,
    body>header>a.close-icon.showing {
        display: inline-flex;
    }

    body>header>nav {
        display: none;
    }
}

@media screen and (max-width: 550px) {
    body>header>a.logo>img.full-logo {
        display: none;
    }

    body>header>a.logo>img.icon-logo {
        display: inline-flex;
    }
}

/*---------------------------------*/

body>main {
    padding: 30px calc((100vw - 960px) / 2);

    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

@media screen and (max-width:1100px) {
    body>main {
        padding: 60px 5vw;

    }
}

@media screen and (max-width:960px) {
    body>main {
        padding: 0 0 30px 0;
    }
}


/*---------------------*/

body>main>div.split-view {
    align-self: stretch;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 30px;
    box-sizing: border-box;
}

/*------------------------*/

body>main>div.split-view>div.resources {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

body>main>div.split-view>div.resources>nav {
    display: inline-flex;
    flex-direction: row;
    gap: 5px;
    background-color: #263e2a;
    padding: 10px;
    border-radius: 10px;
    display: none;
}

body>main>div.split-view>div.resources>nav>a {
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    font-size: 18px;
}

body>main>div.split-view>div.resources>nav>a.current {
    color: #769d3e;
}

body>main>div.split-view>div.resources>nav>a:hover {
    color: #668539;
}


body>main>div.split-view>div.resources>nav>p {
    color: #fff;
    font-size: 18px;
}

body>main>div.split-view>div.resources>p.section {
    font-size: 15px;
    font-weight: 500;
    color: #192e1d;
    font-size: 15px;
    line-height: 1.75;

}

body>main>div.split-view>div.resources>ul {
    list-style: circle;
    padding-left: 20px;
}

body>main>div.split-view>div.resources>ul>li {
    margin-top: 10px;
}

body>main>div.split-view>div.resources>ul>li>a {
    color: #646464;
    font-size: 15px;
    line-height: 1.75;
}

body>main>div.split-view>div.resources>ul>li>a:hover {
    color: #668539;
    text-decoration: none;
}

@media screen and (max-width: 960px) {
    body>main>div.split-view {
        display: inline-flex;
        flex-direction: column;
        gap: 0;
    }

    body>main>div.split-view>div.main {
        padding: 60px 5vw;
    }

    body>main>div.split-view>div.resources {
        display: none;
        width: 100vw;
        box-sizing: border-box;
        background-color: #fbfbfb;
        padding: 30px 5vw;
    }

    body>main>div.split-view>div.resources.showing {
        display: inline-flex;

    }

    body>main>div.split-view>div.resources>nav {
        display: inline-flex;
    }

    body>main>div.split-view>div.resources>p.section {
        margin-top: 30px;
    }
}


/*---*/

body>main>div.split-view>div.main {
    background-color: #fff;
    padding: 30px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
}

@media screen and (max-width: 960px) {
    body>main>div.split-view>div.main {
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 30px 5vw;
    }
}



/*---------------------------------*/

body>img.footer-accent {
    width: 200px;
    align-self: center;
    margin-top: 100px;
}

body>footer {
    padding: 60px calc((100vw - 960px) / 2);
    width: 100vw;
    box-sizing: border-box;
    background-color: #192e1d;

    display: inline-flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;

}

@media screen and (max-width:1100px) {
    body>footer {
        padding: 60px 5vw;

    }
}

body>footer>div {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

body>footer>div:last-of-type {
    align-items: flex-start;
}

body>footer>div>div.social-icons {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

body>footer>div>div.social-icons>a {
    background-color: #325137;
    border-radius: 100%;
    width: 30px;
    height: 30px;

    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body>footer>div>div.social-icons>a:hover {
    background-color: #769d3e;
}

body>footer>div>div.social-icons>a>svg {
    fill: #192e1d;
    height: 15px;
}

body>footer>div>div.links {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin-top: 20px;
}

body>footer>div>div.links>a {
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    font-weight: 500;
}

body>footer>div>div.links>a:hover {
    color: #769d3e;
}

body>footer>div>p.copyright {
    color: #ffffffbd;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.35;
    margin-top: 20px;
}

body>footer>div>p.disclaimer {
    color: #ffffffbd;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.35;
    margin-top: 20px;
    font-style: italic;
}

body>footer>div>p.disclaimer>span {
    font-weight: 600;
}

body>footer>div>hr {
    width: 40%;
    background-color: #263e2a;
    height: 1px;
    border: none;
    margin: 20px 0 0 0;
}

@media screen and (max-width:800px) {
    body>footer {
        flex-direction: column;
        align-items: center;

    }

    body>footer>div,
    body>footer>div:last-of-type {
        align-items: center;
    }

    body>footer>div>div.links {
        align-items: center;
        margin-top: 45px;
        gap: 10px;
    }

    body>footer>div>p.copyright {
        text-align: center;
        margin-top: 45px;
    }

    body>footer>div>p.disclaimer {
        text-align: center;
        margin-top: 45px;
    }

    body>footer>div>hr {
        margin: 45px 0 0 0;
    }

    body>footer>div>div.social-icons>a {
        width: 40px;
        height: 40px;
    }

    body>footer>div>div.social-icons>a>svg {
        height: 20px;
    }
}