:root {
    --brand-primary: '#';
    --brand-yellow: #fae055;
    --brand-green: #56733c;
    --brand-green-lt: #74915a;
    --brand-green-dk: #425f28;
    --heading: #333333;
    --body-text: #21259;
    
    --transition: all .3s ease;
    --transition-long: all .6s ease;
    --transition-xlong: all .9s ease;
    --transition-xxlong: all 1.2s ease;
    --radius-sm: 6px;
    --radius-lg: 20px;

    --header-height: 96px;
    --footer-height: 300px;


    @media (max-width: 575px) {
        --header-height: 88px;
    }
}


@font-face {
    font-family: 'Poppins';
    src: url('/static/fonts/Poppins/Poppins-Bold.ttf') format('TrueType');
}

@font-face {
    font-family: 'Poppins-regular';
    src: url('/static/fonts/Poppins/Poppins-Regular.ttf') format('TrueType');
}

@font-face {
    font-family: 'Poppins-medium';
    src: url('/static/fonts/Poppins/Poppins-Light.ttf') format('TrueType');
}

@font-face {
    font-family: 'Nunito Sans';
    src: url('/static/fonts/Nunito_Sans/NunitoSans-VariableFont.ttf');
}

body {
    box-sizing: border-box;
    interpolate-size: allow-keywords;
}

/* KEYFRAMES */
@keyframes fade-in {
    from {opacity: 0}
    to {opacity: 1}
}

/* UTILITY */
.hidden {
    display: none!important;
}

.invisible {
    visibility: hidden;
}

.w-full {
    width: 100%!important;
}

.max-w-fit {
    max-width: fit-content!important;
}

.max-w-30 {
    max-width: 30%!important;
}

.max-w-50 {
    max-width: 50%!important;
}

.max-w-75 {
    max-width: 75%!important;
}

.rounded {
    border-radius: 12px;
}

/* ELEMENTS */
a {
    color: var(--brand-green-lt);
    transition: var(--transition);

    &:hover {
        color: var(--brand-green-dk);
    }
}

a, span {
     &.st-link {
        position: relative;
        text-decoration: none;
        max-width: fit-content;
        max-height: fit-content;
        font-weight: 600;

        &:after {
            content: '';
            position: absolute;
            width: 100%;
            transform: scaleX(0);
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: var(--brand-green-dk);
            transition: var(--transition);
            transform-origin: bottom left;
        }

        &:hover,
        &:active {
            &:after {
                transform: scaleX(1);
            }
        }
    }
}

h1, h2, h3, h4, h5, h6 {
    color: var(--heading);
    font-family: 'Poppins';
    line-height: 100%;
    text-transform: uppercase;

    &.medium {
        font-family: 'Poppins-medium';
    }

    &.text-left {
        text-align: left;
    }
}
h1 {
    font-size: 96px;

    &.medium {
        font-size: 80px;
    }

    @media (max-width: 576px) {
        /* font-size: 88px; */
        font-size: 44px;

        &.medium {
            /* font-size: 80px; */
            font-size: 40px;
        }
    }
}

h2 {
    font-size: 72px;

    &.medium {
        font-size: 56px;
    }

    @media (max-width: 576px) {
        font-size: 52px;

        &.medium {
            font-size: 48px;
        }
    }
}

h3 {
    font-size: 48px;

    &.medium {
        font-size: 44px;
    }

    @media (max-width: 576px) {
        font-size: 38px;

        &.medium {
            font-size: 34px;
        }
    }
}

h4 {
    font-size: 28px;

    @media (max-width: 576px) {
        font-size: 24px;
    }
}


p, a {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    &.font-xs {
        font-size: 16px;
    }

    &.font-sm {
        font-size: 18px;
    }

    &.font-md {
        font-size: 20px;
    }

    &.font-lg {
        font-size: 24px;
    }
}

.text-brand-green {
    color: var(--brand-green);
}

/* CUSTOM COMPONENTS */
.st-button {
    border: solid var(--brand-green-lt) 1px;
    border-radius: 20px;
    background: #fff;
    color: var(--brand-green-lt)!important;
    min-height: 36px;
    padding: 8px 24px 6px 32px;
    text-decoration: none!important;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
    max-width: fit-content;
    line-height: 1.3;

    &.full-width {
        max-width: 100%;
        min-width: 100%;

        div {
            margin: auto;
            max-width: fit-content;
        }
    }

    div {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        height: 100%;

        .st-label {
            padding: 0!important;
        }

        .divider {
            padding: 0!important;
            margin: 0!important;
            width: 0!important;
            height: 80%;
            min-height: 28px;
            border: solid var(--brand-green-lt) .5px;
        }
    }

    &:hover,
    &:active {
        border: solid var(--brand-green-dk) 1px;
        color: #fff!important;
        background: var(--brand-green);

        .divider {
            border-color: #fff;
        }

        svg {
            fill: var(--brand-yellow);
        }
    }

    &.arrow-right {
        .divider {
            transform: skew(-22deg) translateX(7px);
        }
    }

    &.arrow-left {
        padding-right: 32px;
        padding-left: 24px;

        .divider {
            transform: skew(-22deg) translateX(-6px);
        }
    }
}

.st-arrow-link {
    span {
        display: inline-block;
        max-width: fit-content;

        svg {
            transform: translateY(-2px);
        }
    }
}

.st-input {
    input[type="checkbox"] {
        
        &.st-checkbox {
            appearance: none;
            position: relative;
            border: solid var(--brand-green) 1px;
            border-radius: 2px;
            background-color: #fff;
            height: 15px;
            width: 15px;

            &::after {
                content: '\2713';
                position: absolute;
                height: 15px;
                width: 15px;
                color: #fff;
                transform: scale(0);
                transition: var(--transition);
            }

            &:checked {
                background-color: var(--brand-green);
                
                &::after {
                    transform: scale(1.2) translateY(-6px);
                }
            }
        }
    }

    label {
        margin-left: 8px;
    }
}

.icon.arrow_right {
    height: 12px;
    width: 14px;
    transform: translateX(10px);
}

.icon.arrow_left {
    height: 12px;
    width: 14px;
    transform: translate(-10px, -1px);
}

/* NAVIGATION */

/* DESKTOP MENU */
.header {
    border-bottom: solid #CCCDC6 1px;
    position: relative;
    z-index: 1;
    height: 110px;
    background-color: #fff;

    .header-inner {
        padding: 5px;
        height: 100%;

        @media (max-width: 575px) {
            max-width: 95%;
            margin-bottom: 10px;
        }
    }

    .site-logo {
        /* position: absolute;
        left: 0;
        bottom: 0; */

        svg {
            width: 142px;
        }

        @media (max-width: 575px) {
            transform: scale(.9) translate(-7%, -1%);
            /* max-width: fit-content;
            display: none; */
        }
    }

    ul.header-menu-list,
    ul.header-utility-list {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 48px;
        list-style: none;
        margin-top: 22px;
        line-height: 1.3;
        width: 100%;

        li {
            display: flex;
            justify-content: center;
            transition: var(--transition);
            position: relative;

            a {
                position: relative;
                text-decoration: none;
                text-align: center;
                font-weight: 700;
                transition: var(--transition);

                div {
                    padding: 10px 0;
                    
                    &.with-icon {
                        display: flex;
                        gap: 8px;
                    }
                }
              
                .nav-icon {
                    padding: 0;
                    align-self: flex-start;
                    transition: var(--transition);
                }
            }

            a.menu-item {
                color: var(--body-text);
                text-transform: uppercase;

                
                &.active {
                    color: var(--brand-green-dk);
                 
                    .nav-icon {
                        transform: rotate(-180deg);
                        top: 0;
                    }
                }
            }

            &:hover,
            &:focus {
                a.menu-item {
                    color: var(--brand-green-dk);

                    .nav-icon {
                        transform: rotate(-180deg);
                        top: 0;
                    }
    
                }
            }

            .main-menu-child {
                position: absolute;
                background: #fff;
                z-index: 100;
                top: 80%;
                left: -8px;
                border-radius: 0 0 20px 20px;
                transform: none;

                .menu-list {
                    display: flex;
                    justify-content: space-between;
                    padding: 22px;

                    .link-list {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: start;
                        gap: 20px;

                        a {
                            color: var(--body-text);
                            font-weight: 400;

                            &:focus,
                            &:hover {
                                color: var(--brand-green);
                                filter: none;
                            }
                        }
                    }

                }

                .menu-inner {
                    border-radius: 6px 6px 20px 20px;
                    min-width: fit-content;
                    /* width: 600px; */
                   
                    a:hover {
                        color: #000;
                        background: var(--brand-yellow);
                        filter: none;

                    }

                    .featured-title,
                    .view-all-lg {
                        display: flex;
                        background: var(--brand-green);
                        padding: 12px 12px 8px 12px;
                        color: #fff;
                        margin: 0;
                        text-transform: uppercase;
                        transform: var(--transition);

                        &:hover {
                            color: #000;
                            background: var(--brand-yellow);
                            filter: none;

                            h6 {
                                color: #000;
                            }
                        }

                        svg {
                            transform: translateY(-4px);
                        }
                    }

                    .image-box {
                        border-radius: 20px 0 20px 0;
                        overflow: hidden;
                    }

                    .featured-title {
                        justify-content: space-between;

                        h6 {
                            color: #fff;
                        }
                    }

                    .view-all-lg {
                        justify-content: end;
                        gap: 14px;
                        text-align: right;

                        h5 {
                            color: #fff;
                            white-space: nowrap;
                        }

                        &:hover {
                            h5 {
                                color: #000;
                            }
                        }
                    }
                }

            }

        }

        @media (max-width: 575px) {
            gap: 12px;
        }
    }

    ul.header-menu-list {
        padding-left: 0;
        justify-content: center;

        transform: translateX(-25%);
        margin-left: 25%;

        @media (max-width: 1400px) {
            transform: translateX(-15%);
            margin-left: 15%;
        }
    }

    ul.header-utility-list {
        /* width: 290px; */
        justify-content: end;
        padding-left: 0;


        li a {
            text-transform: uppercase;
        }
        
        @media (max-width: 596px) {
            position: absolute;
            top: 0;
            right: auto;
            width: unset;
            li {
        
                font-size: 12px;
            }
        }

        a svg {
            transform: translateY(-2px)
        }
    }

    /* MOBILE MENU */
    .mobile-menu-icon span,
    .sub-menu-close {
        display: flex;
        flex-direction: row;
        gap: 8px;
        max-height: fit-content;
        font-weight: 600;
    }

    .mobile-menu-icon,
    .mobile-menu-close > svg {
        color: var(--body-text);
        transition: var(--transition);
        font-size: 16px;

        &:focus,
        &:hover {
            color: var(--brand-green);
        }
    }

    .mobile-menu-sidebar {
        position: absolute;
        top: var(--header-height);
        right: 0;
        width: 0;
        transition: var(--transition-long);
        height: calc(100vh - 67px);
        background: #fff;
        border-left: solid #CCCDC6 1px;
        overflow: hidden;
        z-index: 99;

        * {
            visibility: hidden
        }
        
        &.active {
            * {
                visibility: visible;
            }
            width: 300px;
        }

        ul.mobile-menu-list {
            list-style: none;
            
            li.mobile-menu-item {
                transition: var(--transition);
                max-height: 50px;
                position: relative;
    
                a {
                    color: var(--body-text);
                    text-decoration: none;
                    
                    span {
                        display: flex;
                        
                        &.with-icon {
                            justify-content: space-between;
                            padding-right: 30px;

                            .nav-icon {
                                position: absolute;
                                right: -4px;
                                top: 1px;
                            }
                        }
                    }
    
                    &:hover,
                    &:active {
                        color: var(--brand-green);
                    }
                }

                .mobile-menu-child-slidein {
                    position: fixed;
                    top: var(--header-height);
                    right: 0;
                    height: 100vh;
                    width: 0;
                    background: #fff;
                    transition: var(--transition-long);
                    z-index: 100;

                    * {
                        z-index: 101;
                    }

                    &.active {
                        width: 100vw;
                    }

                    .menu-list {

                        .link-list {
                            display: flex;
                            flex-direction: column;
                            align-items: start;
                            padding-top: 8px;
                            gap: 20px;

                            .menu-link {
                                &.active {
                                    color: var(--brand-green);
                                }
                            }
                        }
                    }

                    .featured-box {
                        >h5 {
                            font-weight: 600;
                        }

                        .feature-link {

                            .image-box {
                                border-radius: 20px 0 20px 0;
                                overflow: hidden;
                                max-width: fit-content;
                            }

                            .featured-title {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                background: var(--brand-green);
                                padding: 12px 12px 8px 12px;
                                color: #fff;
                                margin: 0;
                                text-transform: uppercase;
                                transform: var(--transition);

                                h6 {
                                    font-weight: 600;
                                }

                                &:hover {
                                    color: var(--brand-green);
                                    background: var(--brand-yellow);
                                    filter: none;
                                }

                                svg {
                                    transform: translateY(-2px);
                                }
                            }

                            h6 {
                                margin-bottom: 0;
                            }
                        }
                    }
                }
            }


        }
    }

}

#body_wrap {
    min-height: calc(100vh - var(--header-height));
    padding: 0;
}

#main-content {
    min-height: calc(100vh - var(--header-height) - var(--footer-height));

    .main-content-inner {
        padding: 0;

        /*  Text is constrained to same widths as '.st-headline' */
        .lf-textplugin {
            width: 50%;

            @media (max-width: 520px) {
                width: 66%;
            }
        }
    }
}

.lf-textplugin {
    max-width: 800px;
}

.st-footer {
    display: grid;
    grid-template-columns: 2fr 2fr 3fr 2fr;
    min-height: var(--footer-height);
    width: 100%;
    margin: 50px auto;
    gap: 32px;

    @media (max-width: 992px) {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 8px;

        .st-footer-contact {
            grid-area: 1 / 1 / span 1 / span 1;
        }

        .st-footer-links {
            grid-area: 1 / 2 / span 1 / span 1;
        }

        .st-footer-guide {
            grid-area: 1 / 3 / span 1 / span 1;
        }

        .st-footer-newsletter {
           .newsletter-blurb {
                display: flex;
                flex-direction: column;
                grid-area: 1 / 1 / span 1 / span 2;
            }

            .newsletter-links {
                a:first-child {
                    margin-right: 16px;
                }
            }

            .newsletter-copyright {
                margin: 0 !important;
                align-self: center;
                justify-self: center;
                grid-area: 2 / 2 / span 1 / span 2;
            }
        }
    }

    @media (max-width: 768px) {
        grid-template-columns: 1fr 1fr;
        gap: 24px;

        .st-footer-contact {
            grid-area: 1 / 1 / span 1 / span 1;
        }
        .st-footer-links {
            grid-area: 1 / 2 / span 1 / span 1;
        }
        .st-footer-guide {
            grid-area: 2 / 1 / span 1 / span 1;
            justify-self: unset;
        }
        .st-footer-newsletter {
            display: flex;
            flex-direction: column;
            grid-area: 2 / 2 / span 1 / span 1;

            .newsletter-button {
                margin-bottom: 24px;
            }
            .newsletter-links {
                margin-top: unset;
                margin-bottom: 24px;

                a:first-child {
                    margin-left: 0;
                }
            }
        }
    }

    @media (max-width: 520px) {
        grid-template-columns: 1fr;
        justify-items: center;
        row-gap: 36px;

        .st-footer-newsletter {
            grid-area: 1 / 1 / span 1 / span 1;
        }
        .st-footer-links {
            grid-area: 2 / 1 / span 1 / span 1;
        }
        .st-footer-guide {
            grid-area: 3 / 1 / span 1 / span 1;
        }
        .st-footer-newsletter {
            grid-area: 4 / 1 / span 1 / span 1;
            margin: 0 36px;

            .newsletter-links {
                margin-top: unset;
            }
        }
    }
}

.st-footer-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.st-footer-newsletter {
    justify-self: center;

    .newsletter-links {
        margin-top: 48px;
    }
}

.st-footer-guide {
    display: flex;
    flex-direction: column;
    justify-self: end;
}

.dev-border {
    border: solid red 1px;

    &.blue {
        border: solid blue 1px;
    }
}

div.related-page-img {
    position: relative;
    width: 100%;
    min-height: fit-content;
    border-radius: 20px 0 20px 0;
    overflow: hidden;
}

div.related-page-img img {
    transition: var(--transition-long);
    width: 100%;
    object-fit: cover;
}

div.search-drop-closed {
    display: none;
}

.lf-skip-link {
  position: absolute;
  top: 64px;
  left: -100px;
  height: 1px;
  width: 1px;
  text-align: left;
  overflow: hidden;
  z-index: 100;
  background: #fff;
  color: black;

  &:focus {
    position: initial;
  }
}

* {
    scroll-padding-top: 50px;
}