/*Color scheme*/

.wp-block-search .wp-block-search__input {
    font-size: 16px;
    font-weight: 400;
}

.wp-block-search .wp-block-search__button:before {
    color: var(--color-primary);
    font-size: 18px;
}

.img-overlay .img-box .text:after {
    background-image: linear-gradient(180deg, #25a6ec 0%, rgba(71, 94, 204, 0.3) 100%);
}

.board-column .name {
    background: var(--color-primary);
}

.board-column .img-wrap .name h2 {
    color: #ffffff;
}

.board-column .img-wrap .name p {
    font-size: 14px;
    color: #ffffff;
}

.board-list .descr {
    background: #ffffff;
}

.board-list .descr h2 {
    color: #ffffff;
}

.board-list .item .descr h2 {
    color: #ffffff;
}

.board-list .descr p {
    font-size: 16px;
    color: #ffffff;
    line-height: 1.3em;
}

.board-list .descr p.position {
    font-size: 14px;
    color: #ffffff;
}

.pager li a,
.pager li span {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.no-touchevents .pager li a:hover,
.no-touchevents .pager li span:hover {
    background: transparent;
    color: var(--color-primary);
}

.pager li.active span {
    background: transparent;
    color: var(--color-primary);
}

.no-touchevents main .blog-articles-list h2 > a:hover {
    color: #4548a3;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.4em;
}

main h3.divider:after {
    background-color: var(--color-primary);
}

main p.category {
    font-size: 14px;
    color: #687b89;
    font-weight: 400;
    margin-bottom: 0;
}

.button_div input[type="checkbox"] + label:before,
.mc-field-group.input-group input[type="checkbox"] + label:before,
.field-wrap.check-wrap input + label:before,
.bbp-form.check-wrap input + label:before {
    border: 1px solid var(--wpforms-field-border-color);
}

.button_div input[type="checkbox"]:checked + label:before,
.mc-field-group.input-group input[type="checkbox"]:checked + label:before,
.field-wrap.check-wrap input:checked + label:before,
.bbp-form.check-wrap input:checked + label:before {
    border-color: var(--wpforms-accent-color);
}

.mc-field-group.input-group input[type="radio"] + label:before,
.field-wrap.radio-wrap input + label:before,
.bbp-form.radio-wrap input + label:before {
    border: 1px solid var(--wpforms-field-border-color);
}
.mc-field-group.input-group input[type="radio"]:checked + label:before,
.field-wrap.radio-wrap input:checked + label:before,
.bbp-form.radio-wrap input:checked + label:before {
    border-color: var(--wpforms-accent-color);
}

.button_div input[type="checkbox"] + label,
.wpcf7-acceptance input + .wpcf7-list-item-label,
.wpcf7-checkbox input + .wpcf7-list-item-label {
    color: #444444;
    font-size: 16px;
    font-weight: 500;
}

.wpcf7-acceptance input + .wpcf7-list-item-label:before,
.wpcf7-checkbox input + .wpcf7-list-item-label:before {
    border: 2px solid var(--color-primary);
}

.wpcf7-acceptance input:checked + .wpcf7-list-item-label:before,
.wpcf7-checkbox input:checked + .wpcf7-list-item-label:before {
    background: var(--color-primary);
}

.wpcf7-radio input + .wpcf7-list-item-label {
    color: #444444;
    font-size: 16px;
    font-weight: 500;
}

.wpcf7-radio input:checked + .wpcf7-list-item-label:before {
    background: var(--color-primary);
}

.wpcf7-radio input + .wpcf7-list-item-label:before {
    border: 2px solid var(--color-primary);
}

.wpcf7-radio input + .wpcf7-list-item-label:after {
    background: #fff;
}

.send-status .success {
    color: #25a6ec;
}

.send-status .success i {
    color: #25a6ec;
    border: 2px solid rgba(37, 166, 236, 0.5);
}

.send-status .fail {
    color: #b62c2c;
}

.send-status .fail i {
    border: 2px solid rgba(182, 44, 44, 0.5);
    color: #b62c2c;
}

.span.wpcf7-not-valid-tip {
    color: #b62c2c;
    font-size: 13px;
    font-weight: 700;
}

.top-img.small .text h1,
.top-img.small .text .title {
    color: white;
    line-height: 1.25em;
    font-weight: 300;

    font-size: 38px;
}

.top-img .text h1,
.top-img .text .title {
    color: white;
    font-size: 54px;
    font-weight: 300;
    line-height: 1.25em;
}

.top-img .text p {
    color: white;
    /* font-family: "Lato", sans-serif; */
    font-size: 18px;
    font-weight: 500;
    line-height: 1.666666em;
}

.article-controls a {
    color: #72808e;
    font-size: 13px;
    font-weight: 500;
}

.article-controls a i {
    color: var(--color-primary);
    font-weight: 400;
    font-size: 17px;
}

.layout__columns .layout__content .link-box a {
    color: #000;
}

/* MENU  */
aside .link-box ul li a {
    font-weight: normal;
}

.no-touchevents .layout__columns .layout__content .link-box a:hover {
    color: var(--color-primary);
}
aside .link-box ul li a {
    color: #000000;
    font-size: 18px;
}

/* MENU with icons  */
aside .link-box.with-icon ul li a {
    font-weight: normal;
}
aside .link-box.with-icon ul li a {
    color: #000000;
    font-size: 18px;
}

/* MENU with hierarchy */
aside .text-box.with-icon.divider:after {
    background-color: var(--color-primary);
}
aside .text-box.with-icon > ul > li > a {
    font-size: 18px;
    color: #4548a3;
}
aside .text-box.with-icon > ul > li ul li a {
    color: #000000;
    font-size: 18px;
}
aside .text-box.with-icon > ul > li ul li ul li a {
    color: #000000;
    font-size: 18px;
}
aside .text-box.with-icon > ul > li > a {
    font-weight: normal;
}
aside .text-box.with-icon > ul > li ul li a {
    font-weight: normal;
}
aside .text-box.with-icon > ul > li ul li ul li a {
    font-weight: normal;
}

aside .facebook-widget h3,
aside .instagram-widget h3,
aside .twitter-widget h3 {
    color: #000000;
    font-size: 22px;
    font-weight: normal;
}

aside .link-box.bullets ul li:before {
    background: #4548a3;
}

.question-box .question {
    color: var(--color-primary);
}

.no-touchevents .faq-toggle .question-wrap h2:hover {
    color: var(--color-primary);
}

.faq-toggle .question-wrap h2 i {
    color: var(--color-primary);
}

.faq-toggle .question-wrap.open h2 {
    color: var(--color-primary);
}

/*Delete this*/

.slider-box.slider-fw .slider-wrap .slider .slide .text h2 {
    color: white;
    font-size: 54px;
    font-weight: 300;
}

.slider-box.slider-fw .slider-wrap .slider .slide .text p {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
}

.slider-box.slider-right .text h2,
.slider-box.slider-left .text h2 {
    color: black;
    font-size: 38px;
    font-weight: 300;
}

.slider-box.slider-right .text h2:after,
.slider-box.slider-left .text h2:after {
    background-color: var(--color-primary);
}

.no-touchevents .slider-box .slider-controls .slick-arrow:hover {
    color: var(--color-primary);
}

.slider-box .slider-controls .slick-dots li.slick-active button {
    border: 2px solid var(--color-primary);
    background-color: var(--color-primary);
}

.key-features h2 {
    color: white;
    font-size: 38px;
    font-weight: 300;
}

.key-features .row {
    margin: 0 -20px;
}

.key-features .row .row-item h3 {
    color: #c86f00;
    font-size: 24px;
    font-weight: 300;
}

.key-features .row .row-item p {
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 500;
}

.key-features .row .row-item .icon {
    border: 2px solid var(--color-primary);
    transition: all 0.2s;
}

.menu-features .row .row-item .icon {
    border: 2px solid #25a6ec;
}

.key-features .row .row-item .icon .fa {
    color: var(--color-primary);
    line-height: 46px;
    font-size: 46px;
}

.menu-features .row .row-item .icon .fa {
    color: #25a6ec;
}

.no-touchevents .key-features .row .row-item a:hover .icon {
    background: var(--color-primary);
}

.no-touchevents .menu-features .row .row-item a:hover .icon {
    background: #25a6ec;
}

.no-touchevents .key-features .row .row-item a:hover .icon .fa {
    color: #fff;
}

.main-events .row .row-item .descr h3 {
    color: white;
    font-size: 24px;
    font-weight: 500;
}

.main-events .row .row-item .descr p {
    color: #b8ddfa;
    font-size: 16px;
    font-weight: 400;
}

.topics h2 {
    color: #000;
    font-size: 38px;
    font-weight: 300;
    text-align: center;
}

.topics h2:after {
    background-color: var(--color-primary);
}

.text-main-box h2 .board,
.topics h2 .board {
    background-color: var(--color-primary);
}

.topics .topics-list .icon {
    background-color: var(--color-primary);
}

.topics .topics-list .icon .fa {
    color: #fff;
    line-height: 54px;
    font-size: 27px;
}

.topics .topics-list p {
    /* font-family: "Lato", sans-serif; */
    color: yellowgreen;
    font-size: 18px;
    font-weight: 400;
}

.feeds {
    background-color: #f5f8fa;
}

.feeds .row .row-item h2 {
    font-weight: 300;
    color: #000;
}

.feeds .row .row-item .layout__content {
    background-color: #ffffff;
}

.feeds .row .row-item .box {
    background-color: #ffffff;
}

.feeds .row .row-item .box h3,
.feeds .row .row-item .box h3 > a {
    color: #687b89;
    font-size: 16px;
    font-weight: 500;
}

.feeds .row .row-item .box p.category {
    font-size: 14px;
    color: #687b89;
    font-weight: 400;
}

.feeds .row .row-item .box p.text {
    color: #687b89;

    font-size: 14px;
}

.feeds .row .row-item .box time {
    color: #687b89;
    font-size: 12px;
    font-weight: 500;
}

.feeds .row .row-item .box .more {
    color: #16b1b5;
    font-size: 14px;
    font-weight: 800;
}

.feeds .row .row-item .box .more .fa {
    font-size: 20px;
}

.search h3 {
    font-family: inherit;
}

#bbpress-forums li.bbp-header {
    background: var(--color-primary);
}

#bbpress-forums li.bbp-header li {
    color: #fff;
}

#bbpress-forums li a {
    color: var(--color-primary);
    font-size: 14px;
}

.mc-field-group input,
.field-wrap input,
.bbp-form input,
.mc-field-group textarea,
.field-wrap textarea,
.bbp-form textarea,
.wpcf7 .field-wrap span input,
.wpcf7 .field-wrap span textarea,
.rc-anchor-light.rc-anchor-normal {
    border: var(--wpforms-field-border-size) var(--wpforms-field-border-style) var(--wpforms-field-border-color);
    color: var(--wpforms-field-text-color);
    font-family: inherit;
    font-size: var(--wpforms-field-size-font-size);
}
.mc-field-group label,
.field-wrap label,
.bbp-form label,
.wpcf7 .field-wrap label {
    margin-bottom: var(--wpforms-field-size-input-spacing);
    color: var(--wpforms-label-color);
    font-size: var(--wpforms-label-size-font-size);
    line-height: var(--wpforms-label-size-line-height);
}
main .button_div input[type="submit"],
.field-wrap .btn,
.mc-field-group .btn,
main .wpcf7 .btn {
    color: #fff;
    background: #000000;
    border: 2px solid #000000;
}
.no-touchevents main .button_div input[type="submit"]:not(:disabled):hover,
.field-wrap .btn:not(:disabled):hover,
.mc-field-group .btn:not(:disabled):hover,
.no-touchevents main .wpcf7 .btn:not(:disabled):hover {
    background: #fff;
    color: #000000;
}

.field-wrap .btn.white,
.mc-field-group .btn.white,
main .wpcf7 .btn.white {
    background: transparent;
    color: #000000;
    border: 2px solid #000000;
}
.field-wrap .btn.white:not(:disabled):hover,
.mc-field-group .btn.white:not(:disabled):hover,
.no-touchevents main .wpcf7 .btn.white:not(:disabled):hover {
    background: #000000 !important;
    color: #fff;
}

div.wpcf7-mail-sent-ok {
    color: #28ba00;
}

div.wpcf7-mail-sent-ok:before {
    color: #28ba00;
    border-color: rgba(40, 186, 0, 0.5);
}

div.wpcf7-validation-errors,
div.wpcf7-spam-blocked {
    color: #ff0000;
}

div.wpcf7-validation-errors:before,
div.wpcf7-spam-blocked:before {
    border-color: rgba(255, 0, 0, 0.5);
    color: #ff0000;
}

#bbpress-forums li a.subscription-toggle {
    color: #fff;
}

#bbpress-forums li a.favorite-toggle {
    color: #fff;
}

main input.gsc-search-button-v2 {
    background: green;
}

main .gs-webResult.gs-result a.gs-title:hover b,
main .gs-webResult.gs-result a.gs-title:visited b,
main .gs-webResult.gs-result a.gs-title:link b,
main .gs-webResult.gs-result a.gs-title b,
main .gs-webResult.gs-result a.gs-title:hover,
main .gs-webResult.gs-result a.gs-title:visited,
main .gs-webResult.gs-result a.gs-title:link,
main .gs-webResult.gs-result a.gs-title {
    color: #4548a3 !important;
}

main .gsc-results .gsc-cursor-box .gsc-cursor-page {
    background: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
}

main .gsc-results .gsc-cursor-box .gsc-cursor-page:hover,
main .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
    background: #fff !important;
    color: var(--color-primary) !important;
}

main .gsc-result-info {
    font-size: 15px;
    color: #000000;
    font-weight: 400;
}

main .gcsc-find-more-on-google {
    color: #000000 !important;
}
main .gcsc-find-more-on-google .gcsc-find-more-on-google-magnifier {
    fill: #000000 !important;
}

main .gs-webResult .gs-snippet {
    color: #000000;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6em;
    margin: 0;
}

main .gsc-control-cse,
main .gsc-control-cse * {
}

main .gsc-control-cse .gs-spelling,
main .gsc-control-cse .gs-result .gs-title,
main .gsc-control-cse .gs-result .gs-title * {
    font-size: 24px !important;
    font-weight: bold !important;
    line-height: 1.4em !important;
    margin: 34px 0 12px;
}

.text-main-box {
    background: none;
}

.text-main-box h2 {
    color: black;
    font-size: 38px;
    font-weight: 300;
}

.text-main-box p {
    color: inherit;
    font-size: 18px;
    font-weight: 400;
}

@media (max-width: 960px) {
    .slider-box.slider-fw .slider-wrap .slider .slide .text h2 {
        font-size: 30px;
    }
}

@media (max-width: 540px) {
    .top-img .text h1,
    .top-img .text .title {
        font-size: 36px;
    }
}

.tco-sidebar-menu-image {
    width: 26px;
    border-radius: 0;
}

.nav-menu:after {
    display: none !important;
}

.wp-block-tco-blocks-two-column-preview-block {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

.desc-box__title {
    color: white;
}


div.layout__container section.wp-block-tco-blocks-section-block {
    /*
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);*/
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

}

.icon-text-box__icon.fa-icon,
.icon-text-box__icon.fa-icon::before {
    font-size: var(--tco-icon-size, 32px) !important;
    line-height: 1;
}

@media (min-width: 768px) {
    .resource-control__bottom-group {
        --wpforms-max-width: 125px !important;
    }
}

/* ============================================================
   Growing Numbers Block
   ============================================================ */

:root {
    --growing-numbers-bg-color: var(--color-primary);
    --growing-numbers-text-color: white;
    --growing-numbers-underline-color: #94ab66;
}

/* Custom link base styles */
.custom-link {
    color: var(--custom-link-color);
    display: block;
    font-size: var(--custom-link-font-size, inherit);
    font-weight: 500;
    text-decoration-line: none;
    width: -moz-fit-content;
    width: fit-content;
}

@media (any-hover: hover) {
    .custom-link:hover {
        color: var(--custom-link-color-hover);
        text-decoration-line: underline;
    }
}

.custom-link:focus-visible {
    color: var(--custom-link-color-hover);
    text-decoration-line: underline;
}

.growing-numbers {
    --custom-link-color: var(--color-green-161, inherit);
    background-color: var(--growing-numbers-bg-color);
    color: var(--growing-numbers-text-color);
    overflow: hidden;
    padding: 30px 0 180px;
    position: relative;
}

.growing-numbers::after {
    --height: 100px;
    --width: calc(var(--height) * 42.5263);
    background-image: url(../images/plants-bg.png);
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: var(--width) var(--height);
    bottom: 45px;
    content: "";
    display: block;
    height: var(--height);
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: 0;
}

.growing-numbers__wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    z-index: 1;
}

.growing-numbers__desc {
    width: 100%;
}

.growing-numbers__desc-bold {
    font-size: 20px;
    font-weight: 600;
}

.growing-numbers__lines {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.growing-numbers__line {
    border-bottom: thin solid var(--growing-numbers-underline-color);
    display: flex;
    flex-direction: column;
    font-size: 20px;
    gap: 25px;
    padding-bottom: 17px;
    text-align: right;
}

.growing-numbers__value {
    font-family: var(--font-family-secondary, inherit);
    font-size: 55px;
    line-height: 1;
    position: relative;
    top: 5px;
}

@media (min-width: 768px) {
    .growing-numbers {
        padding: 100px 0 250px;
    }

    .growing-numbers::after {
        --height: 127px;
        background-position: bottom;
        bottom: 60px;
        left: -320px;
        width: calc(100% + 320px);
    }

    .growing-numbers__wrapper {
        gap: 60px;
    }

    .growing-numbers__lines {
        gap: 50px;
    }

    .growing-numbers__line {
        align-items: baseline;
        flex-direction: row;
    }

    .growing-numbers__line:nth-child(3) {
        align-items: flex-start;
    }
}

@media (min-width: 1000px) {
    .growing-numbers__wrapper {
        flex-direction: row;
        gap: 30px;
        justify-content: space-between;
    }

    .growing-numbers__desc {
        max-width: 430px;
    }
}

@media (min-width: 1200px) {
    .growing-numbers {
        padding: 100px 0 145px;
    }

    .growing-numbers__desc {
        max-width: 592px;
    }
}

/* ============================================
   Studies Section + Slideshow C
   ============================================ */

.studies-section {
    background: var(--color-primary);
    color: #fff;
    overflow: hidden;
    padding: 30px 0;
}

@media (min-width: 768px) {
    .studies-section {
        padding: 56px 0 82px;
    }
}

.studies-section__wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

@media (min-width: 768px) {
    .studies-section__wrapper {
        gap: 60px;
    }
}

@media (min-width: 1000px) {
    .studies-section__wrapper {
        align-items: center;
        flex-direction: row;
    }
}

.studies-section__text {
    --custom-link-color: var(--color-green-124, inherit);
    flex-shrink: 0;
    max-width: 464px;
    width: 100%;
}

.studies-section__title {
    color: #fff;
    margin: 0 0 20px;
}

.studies-section__desc-bold {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
}

.studies-section__desc {
    animation-delay: 0.25s;
}

/* Slideshow C */

.slideshow-c {
    --custom-link-font-size: var(--font-size-small);
    color: var(--color-primary);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 768px) {
    .slideshow-c {
        align-items: center;
        flex-direction: row;
    }
}

.slideshow-c__inner {
    flex-shrink: 0;
    width: 100%;
}

@media (min-width: 768px) {
    .slideshow-c__inner {
        overflow: hidden;
        width: 735px;
    }
}

.slideshow-c__slides {
    display: flex;
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: transform 0.5s ease-out;
}

@media (min-width: 768px) {
    .slideshow-c__slides {
        margin-left: -20px;
        padding: 0 20px;
    }
}

.slideshow-c__slide {
    background: #fff;
    flex-shrink: 0;
    height: 431px;
    max-width: 360px;
    opacity: 0.4;
    overflow-y: auto;
    padding: 25px;
    /* Clickable to scroll into the active position (handled in JS). Active card below
       resets the cursor and its links work normally. */
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0.5s ease-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%;
}

@supports (scrollbar-color: auto) {
    .slideshow-c__slide {
        scrollbar-color: #ccc #f3f3f3;
        scrollbar-width: thin;
    }
}

@supports selector(::-webkit-scrollbar) {
    .slideshow-c__slide::-webkit-scrollbar {
        background-color: #f3f3f3;
        border-radius: var(--border-radius-small);
        height: auto;
        width: 6px;
    }
    .slideshow-c__slide::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: var(--border-radius-small);
    }
}

.slideshow-c__slide.is-visible {
    opacity: 1;
    pointer-events: all;
    cursor: default;
    -webkit-user-select: all;
    -moz-user-select: all;
    user-select: all;
}

.slideshow-c__slide-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.slideshow-c__slide-img {
    display: block;
    flex-shrink: 0;
    margin-bottom: 20px;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
}

.slideshow-c__heading {
    color: var(--color-blue-0);
    margin: 0;
}

.slideshow-c__text {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-small);
    gap: 10px;
    margin-bottom: 10px;
}

.slideshow-c__text * {
    margin: 0;
}

.slideshow-c__arrows {
    display: flex;
    gap: 15px;
}

.slideshow-c__arrow {
    align-items: center;
    background: #9dada0;
    border: 0.5px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    font-weight: inherit;
    height: 47px;
    justify-content: center;
    padding: 0;
    width: 47px;
}

@media (prefers-reduced-motion: no-preference) {
    .slideshow-c__arrow {
        transition: transform 0.15s;
    }
}

.slideshow-c__arrow:active {
    transform: scale(0.95);
}

@media (any-hover: hover) {
    .slideshow-c__arrow:hover {
        opacity: 0.7;
    }
}

@media (min-width: 768px) {
    .slideshow-c__arrow:nth-child(2) {
        display: none;
    }
}

.slideshow-c__arrow:focus:not(:focus-visible) {
    outline: none;
}

.slideshow-c__arrow-icon {
    transition: all 0.15s linear;
}

.slideshow-c__arrow:first-child .slideshow-c__arrow-icon {
    transform: scale(-1);
}

.slideshow-c__arrow-path {
    fill: #fff;
}


/* ============================================
   Media Box — has-mask modifier
   ============================================ */

.media-box.has-mask .media-box__media-wrapper::before {
    background: rgba(124, 164, 47, 0.2);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

.media-box.has-mask .media-box__media {
    opacity: 0.15;
}


/* Header C — hide bottom border modifier */
.header-c__nav-container.has-no-border {
    border-bottom: none !important;
}


/* ============================================
   Header C — control link
   (ported from header-e__control-link)
   ============================================ */

.header-c__control-link {
    color: var(--header-c-control-link-color);
    font-style: italic;
    font-weight: 500;
    text-decoration-line: none;
    white-space: nowrap;
}

@media (any-hover: hover) {
    .header-c__control-link:hover {
        color: var(--header-c-control-link-color-hover);
    }
}

.header-c__control-link:focus-visible {
    color: var(--header-c-control-link-color-hover, var(--color-primary-hover));
}

@media (min-width: 1200px) {
    .header-c.is-transparent {
        --header-c-control-link-color: #fff;
        --header-c-control-link-color-hover: var(--color-transparent-white);
    }

    .header-c.is-fixed {
        --header-c-control-link-color: var(--color-primary);
        --header-c-control-link-color-hover: var(--color-primary-hover);
    }
}

/* Solid (non-transparent) header — e.g. internal pages: the control link must be dark.
   The global --header-c-control-link-color option is white (for the transparent homepage
   hero), and only .is-transparent/.is-fixed override it — leaving the solid-header default
   white and invisible. The homepage always carries .is-transparent (server-side) and
   internal pages never do, so force the visible colour whenever the header isn't transparent. */
.header-c:not(.is-transparent) .header-c__control-link {
    color: var(--color-primary);
}
.header-c:not(.is-transparent) .header-c__control-link:hover,
.header-c:not(.is-transparent) .header-c__control-link:focus-visible {
    color: var(--color-primary-hover);
}

/* Below the desktop breakpoint the control link only appears inside the (white) mobile
   menu, and the desktop .is-transparent white override doesn't apply here — so on the
   transparent homepage it would be white-on-white. Force it dark on mobile regardless. */
@media (max-width: 1199px) {
    .header-c__control-link {
        color: var(--color-primary);
    }
    .header-c__control-link:hover,
    .header-c__control-link:focus-visible {
        color: var(--color-primary-hover);
    }
}


/* Hero block — disable overlay mask */
.hero__media-wrapper.no-mask::before {
    display: none;
}


/* ============================================
   Slide Box — Section layout (.slide-box-section)
   ============================================ */

.slide-box-section {
    display: flex;
    position: relative;
    text-align: center;
}

.slide-box-section__title {
    color: var(--color-primary);
    min-height: 51px;
    position: relative;
    z-index: 20;
}

.slide-box-section__list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    margin: 28px auto 0;
    position: relative;
    z-index: 20;
}

@media (min-width: 768px) {
    .slide-box-section__list {
        justify-content: flex-start;
        max-width: 674px;
    }
}

@media (min-width: 1200px) {
    .slide-box-section__list {
        max-width: 1026px;
    }
}

/* Taller heading with background color in section layout */
.slide-box-section__list .slide-box__heading {
    height: 90px;
    padding: 0 16px;
}

/* Green top border when panel opens in section layout */
.slide-box-section__list .slide-box:hover .slide-box__hidden-part::before,
.slide-box-section__list .slide-box:focus-visible .slide-box__hidden-part::before,
.slide-box-section__list .slide-box.is-active .slide-box__hidden-part::before,
.slide-box-section__list .slide-box__hidden-part:focus-within::before {
    background: #a1cd51;
    height: 2px;
    width: 100%;
}


/* Slide box — heading uses the settings-managed variables */
.slide-box__heading {
    background: var(--slide-box-heading-bg-color);
    color: var(--slide-box-heading-text-color);
}

/* Slide Box Section — 322px max-width (bonnefield spec) + block-level custom props */
@media (min-width: 768px) {
    .slide-box-section__list .slide-box {
        max-width: var(--sb-max-width, 322px);
    }
}

@media (any-hover: hover) {
    .slide-box-section__list .slide-box:hover .slide-box__hidden-part {
        height: var(--sb-expanded-height, 333px);
    }
}

@media (any-hover: hover) and (min-width: 768px) {
    .slide-box-section__list .slide-box:hover .slide-box__hidden-part {
        height: var(--sb-expanded-height, 289px);
    }
}

.slide-box-section__list .slide-box:focus-visible .slide-box__hidden-part,
.slide-box-section__list .slide-box.is-active .slide-box__hidden-part,
.slide-box-section__list .slide-box__hidden-part:focus-within {
    height: var(--sb-expanded-height, 333px);
}

@media (min-width: 768px) {
    .slide-box-section__list .slide-box:focus-visible .slide-box__hidden-part,
    .slide-box-section__list .slide-box.is-active .slide-box__hidden-part,
    .slide-box-section__list .slide-box__hidden-part:focus-within {
        height: var(--sb-expanded-height, 289px);
    }
}


/* Slide Box Section — fixed height (aspect-ratio), content panel anchored to bottom */
/* overflow:hidden prevents the expanding panel from resizing the slide or zooming the image */
/* border-radius matches .slide-box__content so overflow:hidden clips to rounded corners */
.slide-box-section__list .slide-box {
    aspect-ratio: .85;
    border-radius: var(--border-radius-large);
    overflow: hidden;
    padding: 0;
}

/* Detach content panel from normal flow so it can't resize the slide */
.slide-box-section__list .slide-box__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.slide-box__scrollable {
    height: 100%;
}

.media-box__filled-content {
    /*padding:50px;*/
    max-width: 637px;
}

:root {
    --custom-link-font-size: 20px;
    --email-box-button-bg-color: #002641;
}

/* ===== Email Box ===== */

:root {
    --email-box-button-bg-color-hover: #456074;
}

.email-box {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: -5px;
}

@media (min-width: 768px) {
    .email-box {
        flex-direction: row;
    }
}

@media (min-width: 1200px) {
    .email-box {
        padding: 0 12px;
    }
}

.email-box__button {
    align-items: center;
    -moz-appearance: button;
    appearance: button;
    -webkit-appearance: button;
    background: transparent;
    background: var(--email-box-button-bg-color);
    border: 1px solid transparent;
    border-color: var(--email-box-button-bg-color);
    border-radius: var(--button-border-radius);
    color: var(--button-font-color);
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-family: inherit;
    font-size: 100%;
    font-weight: var(--button-font-weight);
    gap: 10px;
    justify-content: center;
    line-height: inherit;
    margin: 0;
    padding: var(--button-v-padding) var(--button-h-padding);
    text-align: center;
    text-decoration-line: none;
    text-transform: none;
    width: var(--button-width, fit-content);
}

.email-box__button:is([disabled], .is-disabled) {
    background: grey;
    border-color: grey;
    pointer-events: none;
}

.email-box__button.has-no-gap {
    margin: 0;
}

@media (any-hover: hover) {
    .email-box__button:hover {
        text-decoration-line: none;
        background: var(--email-box-button-bg-color-hover);
        border-color: var(--email-box-button-bg-color-hover);
    }
}

.email-box__button:focus-visible {
    background: var(--email-box-button-bg-color-hover);
    border-color: var(--email-box-button-bg-color-hover);
}

/* Email Box — input field */

.form-field {
    border: none;
    border-bottom: thin solid var(--color-grey-102);
    border-radius: 0;
    font-family: inherit;
    font-size: inherit;
    height: 45px;
    line-height: 1.15;
    margin: 0;
    padding: 0;
    text-transform: none;
    width: 100%;
}

.form-field::-moz-placeholder {
    color: var(--color-grey-175);
    font-weight: 500;
}

.form-field::placeholder {
    color: var(--color-grey-175);
    font-weight: 500;
}


.home .hero__content h1, .home .hero__content p  {
    margin:0;
} 

.home .hero__content h1 {
    font-weight: 400;
}

mark, .mark {
  padding: .2em;
  background-color: #fcf8e3;
}

/* Header "Additional menu" element — one-level links styled like the language selector */
.header-additional-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Slide box ("Image slide card buttons"): hide the icon circle by default;
   only show it when an actual icon image has been set on the box. */
.slide-box__icon-wrapper {
    display: none;
}

.slide-box__icon-wrapper:has(img) {
    display: flex;

}

/* ============================================
   Stacked buttons list (button-list-block) — custom colours
   ============================================
   Default background/text colours are applied inline on each .button-menu.
   :hover can't be set inline, so the block also writes the hover colours as
   inline custom properties (--btnl-bg-hover / --btnl-text-hover); these rules
   pick them up. Scoped by the presence of those properties so buttons without
   custom colours keep the component's default hover behaviour. !important is
   needed to win over the baked-in .button-menu.has-big-icon.theme-primary
   hover rules. */
.column-box__reference-list .button-menu[style*="--btnl-bg-hover"]:hover,
.column-box__reference-list .button-menu[style*="--btnl-bg-hover"]:focus-visible {
    background: var(--btnl-bg-hover) !important;
}
.column-box__reference-list .button-menu[style*="--btnl-text-hover"]:hover,
.column-box__reference-list .button-menu[style*="--btnl-text-hover"]:focus-visible {
    color: var(--btnl-text-hover) !important;
}

/* Right arrow follows the button text colour (default + hover), so it matches
   the Text colour settings. currentColor resolves to the .button-menu color,
   which the inline text colour / hover-colour rules above set. The hover
   selector is specific enough to beat the baked-in white-arrow hover rule. */
.column-box__reference-list .button-menu__arrow-icon-path {
    fill: currentColor;
}
.column-box__reference-list .button-menu.has-big-icon:hover .button-menu__arrow-icon-path,
.column-box__reference-list .button-menu.has-big-icon:focus-visible .button-menu__arrow-icon-path {
    fill: currentColor;
}

/* Link-less item (empty URL): no hover effect and no arrow.
   Driven purely from the empty/absent href so the block's saved markup never changes
   (existing content keeps validating — no "Attempt Recovery"). pointer-events:none means
   :hover never matches, neutralising every hover rule above (background, text, icon
   bg/colour, arrow); the arrow is hidden with display:none. This is a front-end style
   (custom-style.css isn't loaded in the block editor), so editing is unaffected. */
.column-box__reference-list a.button-menu[href=""],
.column-box__reference-list a.button-menu:not([href]) {
    pointer-events: none;
}
.column-box__reference-list a.button-menu[href=""] .button-menu__arrow-icon,
.column-box__reference-list a.button-menu:not([href]) .button-menu__arrow-icon {
    display: none;
}

/* Team single — contact-method links without a configured icon degrade to a readable
   text pill instead of overflowing the 32px social-link circle. Once an icon is set on the
   contact-method term the circle is used as normal. */
.staff-post__footer .social-link:not(:has(img)) {
    width: auto;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 13px;
    line-height: 1;
    color: #fff;
    text-decoration: none;
}

/* Stacked buttons list — icon colours.
   When an icon colour is chosen, the block renders the icon as a CSS mask so single-colour
   icons can be tinted; the fill comes from the inline --btnl-icon-color custom property
   (default white, matching the original icons). Hover reads --btnl-icon-color-hover. */
.column-box__reference-list .button-menu__icon--masked {
    width: var(--btnl-icon-size, 24px);
    height: var(--btnl-icon-size, 24px);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    background-color: var(--btnl-icon-color, #fff);
}
.column-box__reference-list .button-menu:hover .button-menu__icon--masked,
.column-box__reference-list .button-menu:focus-visible .button-menu__icon--masked {
    background-color: var(--btnl-icon-color-hover, var(--btnl-icon-color, #fff));
}

/* Un-tinted icon image (any format — PNG/SVG/etc.). The theme's global
   img{object-fit:cover} would crop non-square raster icons inside the 24px slot, so show
   the whole icon (contain) at a consistent size. The tinted (masked) variant above already
   uses mask-size:contain. */
.column-box__reference-list .button-menu__icon-wrapper > img {
    width: var(--btnl-icon-size, 24px);
    height: var(--btnl-icon-size, 24px);
    object-fit: contain;
}

/* Icon wrapper (80x80 box) background — default + hover. Falls back to the theme-primary
   colour when only a hover colour is set. !important beats the baked-in themed background. */
.column-box__reference-list .button-menu[style*="--btnl-icon-bg"] .button-menu__icon-wrapper {
    background: var(--btnl-icon-bg, var(--button-menu-primary-color)) !important;
}
.column-box__reference-list .button-menu[style*="--btnl-icon-bg-hover"]:hover .button-menu__icon-wrapper,
.column-box__reference-list .button-menu[style*="--btnl-icon-bg-hover"]:focus-visible .button-menu__icon-wrapper {
    background: var(--btnl-icon-bg-hover) !important;
}

/* Simple button (button-block) — "Custom" style. Same shape as .button--primary,
   but colours come from inline custom properties set by the block, falling back
   to the primary palette when a colour isn't chosen. Hover reads the *-hover
   custom properties (which can't be set inline). */
.button--custom {
    align-items: center;
    -moz-appearance: button;
    appearance: button;
    -webkit-appearance: button;
    border: 1px solid transparent;
    border-radius: var(--button-border-radius);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-family: inherit;
    font-size: 100%;
    font-weight: var(--button-font-weight);
    gap: 10px;
    justify-content: center;
    line-height: inherit;
    margin: var(--button-margin, 25px 0);
    padding: var(--button-v-padding) var(--button-h-padding);
    text-align: center;
    text-decoration-line: none;
    text-transform: none;
    width: var(--button-width, fit-content);
    background: var(--btn-custom-bg, var(--button-primary-bg-color));
    color: var(--btn-custom-text, var(--button-primary-text-color));
}
.button--custom:hover,
.button--custom:focus-visible {
    text-decoration-line: none;
    background: var(--btn-custom-bg-hover, var(--btn-custom-bg, var(--button-primary-bg-color-hover)));
    color: var(--btn-custom-text-hover, var(--btn-custom-text, var(--button-primary-text-color-hover)));
}

/* Image or video block (hero-media): the content area is now an InnerBlocks
   region wrapped in .media-box__text. Trim the outer margins of the first/last
   inner block so they don't disrupt the flex layout, while keeping the spacing
   between multiple inner blocks. */
.media-box__text > :first-child {
    margin-top: 0;
}
.media-box__text > :last-child {
    margin-bottom: 0;
}

/* On tablet/mobile the media box stacks (column-reverse) with a gap (25px below
   768px, 50px from 768px). Remove that gap; the desktop layout kicks in at
   1000px and is unaffected. */
@media (max-width: 999.98px) {
    .media-box__inner {
        gap: 0;
    }
}

/* Flip cards (.image-preview.js-flipped-card) set aspect-ratio:1.38 on a flex
   card. iOS Safari doesn't grow an aspect-ratio flex item to fit taller content
   (Chrome does), so the content overflows the box and cards overlap. On mobile
   (single column) let the card height follow its content; the image keeps its
   own aspect-ratio and the flip/back face still work. */
@media (max-width: 767.98px) {
    .image-preview-list > .image-preview {
        aspect-ratio: auto;
    }
}

/* ── Simple Banner + mobile header coexistence ─────────────────────────────
   The Simple Banner plugin renders a banner at the very top of the page that
   overlaps the theme's viewport-fixed mobile header bar (.header__inner /
   .header-b__inner / .header-c__inner).

   custom-main.js — only while the banner is actually rendered — adds
   .has-simple-banner to <html> and sets --sb-offset to max(0, bannerHeight -
   scrollY). Result: the bar sits just below the banner at the top, slides up and
   stays pinned to the top of the viewport once the banner scrolls out of view,
   and reverses when you scroll back up.

   The offset/marker live on <html>, NOT <body>: the theme's toggleMobileMenu()
   runs body.removeAttribute('style') on close, which would otherwise wipe it.

   Mobile only — desktop (>=1200px) bars are position:relative and untouched. */
@media (max-width: 1199.98px) {
    html.has-simple-banner .header__inner,
    html.has-simple-banner .header-b__inner,
    html.has-simple-banner .header-c__inner {
        top: var(--sb-offset, 0px);
        z-index: 100000; /* above the Simple Banner layer while they overlap */
    }
}