/*======================================
Element: General
======================================*/
#usp .grid-item--image figure img {
    object-fit: cover;
}

.header-scroll-visability {
    transform: translateY(-100%);
    transition: ease-in-out 0.3s;
}

.scroll .top {
    transition: ease-in-out 0.3s;
}

@media only screen and (min-width: 821px) {
    body {
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 50px;
    }

    .grid-item--boxed.grid-item--text {
        padding: 0 0 0 calc(var(--grid-gutter) * 2);
    }

    .grid-item--boxed {
        padding: calc(var(--grid-gutter) * 2) 0 0 calc(var(--grid-gutter) * 2);
        background: transparent;
        box-shadow: unset;
    }

    .grid-item--image figure, .grid-item--image figure img {
        height: 100% !important;
    }

    .row.row--v-grow > [class*='col-'] {
        margin-bottom: 0;
    }
}

.grid-item--boxed {
    background: transparent;
    box-shadow: unset;
}

@media only screen and (max-width: 767px) {
    .hero .hero__inner .row.row--right {
        justify-content: flex-start;
        text-align: left;
    }

    .text-right .button-wrap {
        justify-content: flex-start;
    }



    .footer-item.text-right .button-wrap {
        justify-content: center;
    }

    p {
        line-height: 2rem;
    }
    .hero .button-wrap {
        flex-flow: column;
        align-items: flex-start;
    }
}

@media only screen and (max-width: 821px) {
    .footer .footer-grid .row .col-s-100:not(:first-child) {
        max-width: 50%;
        flex-basis: 50%
    }

    .footer .footer-grid .row .col-s-100:last-child {
        max-width: 100%;
        flex-basis: 100%
    }

    .footer .footer-grid .row .col-s-100 .footer-item--text.text-right h2 {
        font-size: 1.5rem;
    }
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .act-heading {
    margin-bottom: 0;
}

::selection {
    background: var(--theme-alt);
}

p img {
    margin-bottom: -1.5em;
}

.pre-head {
    font-size: 1.25rem;
    letter-spacing: 0;
    opacity: 1;
    color: var(--theme-alt);
    margin-bottom: 0.5em;
}

.button {
    text-transform: uppercase;
    border-width: 1px;
    padding: 1.2rem;
}

/*======================================
Element: Menu & Header
======================================*/
.top.top--light {
    background: var(--white);
    box-shadow: none;
}

.main-nav__li > .main-nav__a {
    text-transform: uppercase;
    color: var(--theme);
}

.main-nav__li.selected > .main-nav__a {
    color: var(--selected-nav-item) !important;
    text-transform: uppercase;
}

.main-nav__ul--first > .main-nav__li:first-child > .main-nav__a {
    padding-left: 0 !important;
}

.main-nav__li--btn .button {
    padding: 1em 1.35em;
}

.scroll .top.top--light {
    box-shadow: none;
}

/* mobile nav*/
.mobile-nav-visible header.top {
    background: #FFFFFF;
    background: -webkit-linear-gradient(left, #FFFFFF, #E3E8F1);
    background: -moz-linear-gradient(left, #FFFFFF, #E3E8F1);
    background: linear-gradient(to right, #FFFFFF, #E3E8F1);
}

@media only screen and (max-width: 992px) {
    .mobile-nav-visible .main-nav--main {
        left: 0;
        background: #FFFFFF;
        background: -webkit-linear-gradient(left, #FFFFFF, #E3E8F1);
        background: -moz-linear-gradient(left, #FFFFFF, #E3E8F1);
        background: linear-gradient(to right, #FFFFFF, #E3E8F1);
    }

    .mobile-nav-visible .main-nav--main .main-nav__ul--first {
        margin-left: 5%;
    }

    .mobile-nav-visible .main-nav--main .main-nav__ul--first .main-nav__li.selected {
        color: var(--theme-alt);
    }

    .mobile-nav-visible .main-nav--main .main-nav__ul--first .main-nav__li.selected > .main-nav__a {
        color: var(--theme-alt) !important;
    }

    .mobile-nav-visible .main-nav--main .main-nav__a {
        text-shadow: none;
    }

    .main-nav__a {
        border-top: 1px solid rgba(56,29,115,0.075) !important;
        padding: 20px var(--grid-gutter) 20px 0 !important;
    }

    .mobile-nav-visible .main-nav__ul--second,
    .mobile-nav-visible .main-nav__ul--third {
        background: transparent;
    }

    .top--scroll-light .main-nav > ul > li > .main-nav__a {
        color: var(--theme);
    }

    .top--scroll-light .main-nav > ul > li > .main-nav__a:hover {
        color: var(--theme);
    }

    .main-nav__ul--first > .main-nav__li:hover {
        box-shadow: none;
    }

    .main-nav__ul--first > .main-nav__li::before {
        content: none;
    }

    .mobile-actions ul li a {
        color: var(--theme) !important;
        width: 55px;
    }

    .hamburger {
        width: 55px;
        max-width: none;
    }

    .hamburger-inner,
    .hamburger-inner::before,
    .hamburger-inner::after {
        background-color: var(--theme) !important;
    }

    .main-nav .main-nav__a .expand {
        background-color: rgba(56,29,115,0.0) !important;
    }

    .main-nav .main-nav__ul--second .main-nav__a {
        background-color: transparent !important;
        padding-left: 20px !important;
        font-size: 1rem;
        color: var(--theme) !important;
    }

    .mobile-nav-visible .main-nav__ul--second .main-nav__li.selected > .main-nav__a {
        color: var(--theme-alt) !important;
    }

    .mobile-nav-visible .main-nav__ul--second .main-nav__li.selected::after {
        content: none;
    }

    .main-nav__ul--first .main-nav__li.selected:after {
        content: " ";
        position: absolute;
        bottom: 0;
        height: 3px;
        width: 100%;
        background-color: var(--theme-alt);
    }
}

/* making header.top transparent, only on homepage and only when firstchild is banner */

body.template-site:has(#content > section.hero:first-of-type) header.top {
    background: transparent;
}

body.scroll.template-site:has(#content > section.hero:first-of-type) header.top.top--scroll-bg,
body.scroll.template-site:has(#content > section.hero:first-of-type) header.top.top--scroll-bg.top--light {
    background: #fff;
}

@media only screen and (max-width: 992px) {
    body.template-site:has(#content > section.hero:first-of-type) header.top .hamburger-inner, 
    body.template-site:has(#content > section.hero:first-of-type) header.top .hamburger-inner::before, 
    body.template-site:has(#content > section.hero:first-of-type) header.top .hamburger-inner::after {
        background-color: #ffffff !important;
    } 
}


/*======================================
Element: Footer
======================================*/
footer {
    padding: 30px 0;
    position: relative;
    font-size: 1rem;
    background-color: var(--theme) !important;
}

.navigation ul li.selected > div a {
    color: white;
    font-weight: 300 !important;
    font-size: 1rem;
    padding-left: 10px;
}

.navigation ul li > div a {
    color: white;
    font-weight: 300 !important;
    font-size: 1rem;
    padding-left: 10px;
}

.footer-item .h6 {
    margin-bottom: 0.5em;
    font-size: 1.75rem;
}

h6.pre-head {
    color: var(--theme-alt) !important;
    margin-bottom: 0.5rem;
    font-weight: 300;
}

.footer-item.footer-item--text.text-left h3 {
    line-height: 2.5rem;
}

.footer-item--text p {
    font-size: 1rem;
    font-weight: 300;
    color: white;
    line-height: 1.5rem;
    padding-top: 1.5rem;
}

.navigation ul li::before {
    content: "-";
    margin-right: 0.5em;
    position: absolute;
    color: var(--theme-alt);
    margin-top: -3px;
}

.footer-item--logos ul::after {
    content: "";
    width: 25%;
    background: var(--theme-alt);
    height: 2px;
    position: absolute;
    margin-top: -33px;
    left: 75%;
}

.footer-item--logos ul::before {
    content: "";
    width: 25%;
    background: var(--theme-alt);
    height: 2px;
    position: absolute;
    margin-top: -33px;
    right: 75%;
}

.footer-item.footer-item--social-links {
    text-align: center;
    margin: 30px 0 10px 0;
}

.social-nav li a:hover {
    background-color: var(--theme-alt) !important;
}

@media only screen and (min-width: 821px) {
    .footer-item--logos ul::after {
        content: "";
        width: 45%;
        background: var(--theme-alt);
        height: 2px;
        position: absolute;
        margin-top: -33px;
        left: 55%;
    }

    .footer .footer-grid {
        padding-bottom: 20px;
    }

    .footer-item.footer-item--social-links {
        margin: 35px 0 0 0;
    }

    .footer-item--logos ul::before {
        content: "";
        width: 45%;
        background: var(--theme-alt);
        height: 2px;
        position: absolute;
        margin-top: -33px;
        right: 55%;
    }
}

@media only screen and (min-width: 1550px) {
    .footer > .container {
        padding-left: 0;
        padding-right: 0;
    }

    #noPadding > .container, #noPadding > .container {
        padding-left: 0;
        padding-right: 0;
    }
}

/*======================================
Widget: Tabs
======================================*/
.tabs.tabs--pills .tabs__nav {
    background-color: var(--theme);
    width: 100%;
    display: flex;
    overflow-y: auto;
    padding: 2.5rem 0.5rem;
}

.tabs .tabs__container {
    background-color: var(--white);
    width: 100%;
    height: 100%;
}

.tabs.tabs--pills .tabs__nav ul li a {
    font-size: 0.875rem;
    padding: 2em 0.5em;
    background: transparent !important;
    border: 2px solid var(--theme-alt);
    border-radius: 0;
    color: white;
    font-size: 1.5rem;
}

.tabs.tabs--theme .tabs__container {
    width: 100%;
    height: auto !important;
}

.tabs.tabs--theme .tabs__container .tab,
.tabs.tabs--theme .tabs__container .tab .tab__body,
.tabs.tabs--theme .tabs__container .tab .tab__body section.hero {
    height: 100% !important;
}

.tabs.tabs--pills .tabs__nav ul li a::after {
    display: none !important;
}

.tabs.tabs--pills .tabs__nav ul {
    flex-wrap: unset;
}

.tabs.tabs--theme.tabs--pills .tabs__nav .active {
    background-color: var(--theme-alt) !important;
    color: white;
    opacity: 1;
}

p.tab-text {
    font-size: 1rem;
    font-weight: 300;
}

p.tab-text {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5rem;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
}

p.tab-title {
    margin-bottom: 0.85rem;
    font-size: 1.55rem;
}

.tab__body .hero__background::before {
    background: transparent linear-gradient(180deg, #00000000 0%, #000000 120%) 0% 0% no-repeat padding-box;
    content: "";
    position: relative;
    height: 100%;
    width: 100%;
    display: block;
    pointer-events: none;
}

.tab .hero::before {
    display: none;
}

.tab .hero__inner h1, .hero__inner h2 {
    font-size: 2.2rem;
}

.hero__inner .h2, .hero__inner .h2 strong {
    font-size: var(--hero-heading);
    color: white;
    line-height: 1.2;
}

@media only screen and (min-width: 821px) {
    .tabs {
        display: flex;
        flex-direction: row-reverse
    }

    p.tab-text {
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.5rem;
        white-space: pre-wrap;
        max-width: unset;
        text-overflow: inherit;
    }


    nav.tabs__nav::after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        left: -95%;
        border-left: 45px solid transparent;
        border-right: 45px solid transparent;
        border-top: 45px solid var(--theme);
        margin-left: -7px;
        transition: all 0.3s ease;
        opacity: 1;
        position: relative;
        display: block;
        z-index: 1000;
        transform: rotate(90deg);
        top: 45%;
        z-index: 2;
    }

    .tab .hero__inner h1, .hero__inner h2 {
        font-size: var(--hero-heading);
    }

    .tabs.tabs--pills .tabs__nav {
        background-color: var(--theme);
        max-width: 550px;
        display: unset;
        padding-top: 3rem;
        overflow-y: unset;
        padding: var(--grid-gutter) 0 10px;
    }

    .tabs.tabs--pills .tabs__nav ul {
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        padding: 1rem 3rem 5rem 3rem;
        flex-wrap: wrap;
        height: fit-content;
    }

    .tabs.tabs--pills .tabs__nav ul li a {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 2rem 35px 0 80px;
        box-sizing: border-box;
        white-space: inherit;
    }

    .tabs.tabs--pills .tabs__nav ul li {
        flex: 1 1 auto;
        width: 100%;
    }

    nav.tabs__nav::after {
        content: "";
        width: 0;
        height: 0;
        left: -10%;
        border-left: 45px solid transparent;
        border-right: 45px solid transparent;
        border-top: 45px solid var(--theme);
        margin-left: -7px;
        transition: all 0.3s ease;
        opacity: 1;
        position: relative;
        display: block;
        transform: rotate(90deg);
        margin-top: -100px;
        top: -35%;
        z-index: 2;
    }

    p.tab-title::before {
        content: "";
        width: 35px;
        height: 2px;
        position: absolute;
        display: block;
        background: var(--theme-alt);
        margin-top: 7px;
        left: -2px;
        transition: max-width 0.5s ease-out;
        max-width: 35px;
    }

    .active p.tab-title::before {
        content: "";
        width: 65px;
        height: 2px;
        position: absolute;
        display: block;
        background: var(--theme);
        margin-top: 7px;
        left: -2px;
        transition: max-width 0.25s ease-in-out;
        max-width: 85px;
    }


    .row--left.row--v-center.row--v-grow {
        align-items: center;
    }

    .grid.theme-bg .sub-grid::after {
        content: "";
        width: 0;
        height: 0;
        border-left: 38px solid transparent;
        border-right: 38px solid transparent;
        border-top: 35px solid var(--theme);
        margin-left: -7px;
        transition: all 0.3s ease;
        opacity: 1;
        position: relative;
        display: block;
        transform: rotate(-90deg);
        margin-right: -78px;
        margin-top: -211px;
    }
}

/*======================================
Widget: Hero
======================================*/
.hero .pre-head {
    font-size: 1.25rem;
    letter-spacing: 0;
    font-weight: 300;
    justify-content: flex-end;
    text-align: right;
}

.hero__inner h1,
.hero__inner h2 {
    line-height: 1.2;
}

.hero__inner h1 {
    text-shadow: 0 0 50px rgba(0,0,0,0.5);
}

.top.top--scroll-bg + #content > .hero:first-child {
    padding: calc(var(--header-height) + 80px) 0 80px;
}

@media only screen and (min-width: 821px) {
    .hero .hero__inner .container-fluid, .hero .hero__inner .container {
        margin-right: auto;
        margin-left: auto;
        padding-left: calc(var(--grid-gutter) * 2);
        padding-right: calc(var(--grid-gutter) * 2);
    }

    .hero > .hero__inner .row.row--right {
        text-align: right;
    }
}
/*
@media only screen and (min-width: 821px) {
    .hero::before {
        content: "";
        background-image: url(../images/Seine-S.svg);
        position: absolute;
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        z-index: 5;
        pointer-events: none;
        background-position: center right;
    }

    .hero.hero--40::before,
    .hero.hero--45::before,
    .hero.hero--50::before,
    .hero.hero--55::before {
        content: "";
        background-image: url(../images/Seine-S.svg);
        position: absolute;
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        z-index: 5;
        pointer-events: none;
        background-position: center right;
        top: 0;
    }
}*/

/*======================================
Widget: Card
======================================*/
.card .card__text {
    padding: 5rem;
}

.card .card__text .card__header {
    font-size: 1.8rem;
    line-height: 1.2;
    margin-bottom: 0.3em;
}

.card.dark-color .act-heading {
    color: white;
}

span.card__header.act-heading::before {
    content: "";
    width: 65px;
    position: relative;
    display: block;
    height: 2px;
    background: white;
    top: 20px;
    left: -80px;
}

.card span {
    display: block;
    width: 100%;
    color: white;
}

.grid-item--card:hover {
    background-color: var(--theme-alt);
    transition: 0.3s;
}

.grid-item--card.theme-alt:hover {
    background-color: var(--theme);
    transition: 0.3s;
}

.grid-item.grid-item--card.card {
    margin-bottom: 25px;
}

.background-shadow .card__bg::before {
    background: transparent linear-gradient(180deg, #00000000 0%, #000000 100%) 0% 0% no-repeat padding-box;
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    opacity: 0.7;
}

.grid-item--card.gray-bg:hover {
    background-color: var(--background-light);
}

@media only screen and (min-width: 821px) {

    .card.card--25 .card__text {
        min-height: calc(30vh - var(--grid-gutter));
        max-height: calc(30vh - var(--grid-gutter));
    }

    .card .card__text .card__header {
        font-size: 1.3rem;
        line-height: 1.2;
        margin-bottom: 0.3em;
    }

    .card .card__text {
        padding: 5rem 0.5rem;
    }
}

@media only screen and (min-width: 993px) and (max-width: 1250px) {
    #contactCards span.card__header.act-heading {
        font-size: 1.2rem;
    }

    #contactCards .card span {
        display: block;
        width: 100%;
        color: white;
        font-size: 14px;
    }

    #contactCards .card .card__text {
        padding: 3rem 0.7rem;
    }
}

@media only screen and (min-width: 1250px) {

    .card .card__text .card__header {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: 0.3em;
    }

    .card .card__text {
        padding: 5rem;
    }
}

@media only screen and (min-width: 1250px) and (max-width: 1400px) {
    #contactCards .card .card__text .card__header {
        font-size: 1.5rem;
        line-height: 1.2;
        margin-bottom: 0.3em;
    }

    #contactCards .card .card__text {
        padding: 5rem 2rem;
    }
}

@media only screen and (min-width: 1600px) {
    .card.card--25 .card__text {
        min-height: calc(25vh - var(--grid-gutter));
        max-height: calc(25vh - var(--grid-gutter));
    }
}

/*======================================
Widget: Breadcrumbs
======================================*/
ul.breadcrumbs li {
    font-size: 1rem;
    color: var(--theme);
    font-weight: 400;
    transition: ease-in-out 0.2s;
}

.breadcrumbs-block {
    padding: 50px 0;
}

ul.breadcrumbs li:last-child a {
    font-size: 1rem;
    color: var(--theme);
    font-weight: 400;
    text-decoration: underline;
}

ul.breadcrumbs li:hover a {
    color: var(--theme-alt);
    transition: ease-in-out 0.2s;
}

ul.breadcrumbs li::before {
    content: "/";
    padding: 0 0.5em;
    opacity: 1;
    color: var(--theme-alt);
}

/*======================================
Widget: Slider en multiple slider
======================================*/
.flickity-prev-next-button {
    position: absolute;
    top: -6%;
    width: 65px;
    height: 65px;
    border: none;
    border-radius: 0;
    background: var(--theme-alt);
    color: var(--theme) !important;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    border: 2px solid var(--theme-alt)
}

.flickity-prev-next-button.previous {
    right: 300px;
    left: unset;
}

.flickity-prev-next-button.next {
    right: 230px;
}

.flickity-prev-next-button .flickity-button-icon {
    position: absolute;
    left: 38%;
    top: 38%;
    width: 30%;
    height: 30%;
}

.flickity-button {
    overflow: hidden;
    z-index: 10 !important;
}

.flickity-button:hover .flickity-button-icon {
    fill: var(--theme-alt);
}

.carousel {
    padding: var(--grid-gutter) 0;
}

.carousel-cell {
    width: 100%;
    margin-right: 35px;
    border-radius: 5px;
    counter-increment: carousel-cell;
}

.flickity-page-dots {
    display: none;
}

@media screen and ( min-width: 821px ) {
    /* half-width cells for larger devices */
    .carousel-cell {
        width: 30%;
        margin-right: 35px;
        border-radius: 5px;
        counter-increment: carousel-cell;
    }

    .items-3 .carousel-cell {
        width: 32%;
    }

    .items-4 .carousel-cell {
        width: 25%;
    }

    .items-6 .carousel-cell {
        width: 16.6%;
    }

    .items-7 .carousel-cell {
        width: 15%;
    }

    .items-8 .carousel-cell {
        width: 12.5%;
    }

    .items-8 .carousel-cell {
        width: 11%;
    }

    .items-8 .carousel-cell {
        width: 10.5%;
    }
}

@media screen and ( min-width: 1200px ) {
    /* half-width cells for larger devices */
    .carousel-cell {
        width: 20%;
        margin-right: 35px;
        border-radius: 5px;
        counter-increment: carousel-cell;
    }
}

@media only screen and (min-width: 821px) {
    .hero__inner.light-color.col-100.col-m-100::after {
        content: "";
        background-image: url(../images/Seine-S.svg);
        position: absolute;
        height: 200%;
        width: 100%;
        right: -55%;
        top: -50%;
        background-repeat: no-repeat;
        z-index: -1;
        pointer-events: none;
        display: none;
    }

    .slider .container-fluid, .slider .container {
        padding-left: 0;
        padding-right: 0;
    }

    .slider::before, .carousel::before {
        content: "";
        width: 15%;
        height: 2px;
        background: var(--theme);
        display: block;
        margin-right: -50px;
        right: 0;
        position: absolute;
        z-index: 10;
        top: -6%;
    }
}

.grid-item--header h1, .grid-item--header h2 {
    font-size: 2rem;
    line-height: 2.5rem;
}

.pre-head {
    color: var(--theme-alt) !important;
}

.theme-alt .pre-head {
    color: var(--theme) !important;
}


@media only screen and (min-width: 821px) {
    .grid-item--header h1, .grid-item--header h2 {
        font-size: 3.125rem;
        line-height: 60px;
    }
}

@media only screen and (max-width: 700px) {
    .flickity-prev-next-button {
        display: inline-block;
    }

    .flickity-prev-next-button.previous {
        margin-right: 10px;
    }
}

@media only screen and (max-width: 600px) {
    .flickity-prev-next-button {
        display: inline-block;
    }

    .flickity-prev-next-button.previous {
        margin-right: 10px;
    }

    .flickity-prev-next-button {
        position: initial;
        width: 65px;
        height: 65px;
        border: none;
        border-radius: 0;
        background: var(--theme-alt);
        color: var(--theme) !important;
        cursor: pointer;
        outline: none;
        transition: all 0.3s ease;
        border: 2px solid var(--theme-alt);
        transform: translateX(175%);
    }
}
/*======================================
Widget: Pod
======================================*/
.grid-item--pod {
    margin: 0 0 var(--grid-gutter) 0;
}

.row.row--v-grow .grid-item--pod {
    height: auto;
    margin-bottom: var(--grid-gutter);
}

.pod .pod__text {
    margin-top: 0;
    padding-top: var(--grid-gutter);
}

.pod.grid-item--boxed .pod__text {
    padding: var(--grid-gutter);
}

.pod .pod__image i {
    opacity: 0.3;
    margin-top: 0;
}

.pod.grid-item--boxed .pod__image i {
    margin-top: var(--grid-gutter);
}

.pod.pod--compact .pod__image i {
    font-size: 3rem;
}

.pod__text p {
    line-height: 1.55rem;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .pod .pod__text p:last-of-type {
        margin-bottom: 2em !important;
    }
}


.row.sub-grid div:nth-child(4) .pod article .pod__text {
    padding-right: 50px;
}

.row.sub-grid div:nth-child(6) .pod article .pod__text {
    padding-right: 50px;
}

@media only screen and (min-width: 821px) and (max-width: 1390px) {
    .row.sub-grid .pod article .pod__text .h3 {
        font-size: clamp(1rem, 2.5vw, 1.5rem);
    }
}

/*image as icon*/
.pod .pod__image.image-as-icon {
    margin: var(--grid-gutter) 0 0 0;
    display: inline-block;
    width: 50px;
    height: 50px;
}

.pod.grid-item--boxed .pod__image.image-as-icon {
    margin: calc(var(--grid-gutter) * 0.5) 0 0 calc(var(--grid-gutter) * 2);
    display: inline-block;
    width: 50px;
    height: 50px;
}

.pod.grid-item--boxed.text-center .pod__image.image-as-icon {
    margin: var(--grid-gutter) 0 0 0;
}

.pod.pod__image.image-as-icon img {
    object-fit: contain;
    height: auto;
    max-width: none;
}


@media only screen and (max-width: 500px) {
    article.image-as-icon-con {
        display: flex;
    }

    .pod article.image-as-icon-con .pod__text {
        padding-top: 0;
    }
}


/*image as icon- media left */
.pod.pod--compact .pod__image.image-as-icon {
    top: 0;
    left: 0;
    position: absolute;
    width: 50px;
    text-align: center;
    margin: 0;
    padding: 0;
}

.pod.pod--compact.grid-item--boxed .pod__image.image-as-icon {
    top: var(--grid-gutter);
    left: var(--grid-gutter);
}

.pod.grid-item--boxed.text-center.pod--compact .pod__image.image-as-icon {
    top: 0;
    left: var(--grid-gutter);
}

.pod.pod--compact.grid-item--boxed .pod__image i {
    margin-top: 0;
}

@media only screen and (min-width: 1037px) {
    .pod {
        margin: 0 0;
    }

    .pod .pod__text {
        padding-top: calc(var(--grid-gutter) * 0.5);
    }

    .row.row--v-grow .pod {
        height: 100%;
        margin-bottom: 0;
    }

    .pod.grid-item--boxed .pod__text {
        padding: 0 0 0 calc(var(--grid-gutter) * 2);
    }

    .pod.pod--compact .pod__text {
        padding-top: 0;
    }

    .row.row--v-grow .pod.pod--compact.grid-item--boxed .pod__text {
        padding: var(--grid-gutter) var(--grid-gutter) var(--grid-gutter) var(--grid-gutter);
    }
}

/*logo widget*/
ul.logos {
    justify-content: space-around;
}


@media only screen and (max-width: 821px) {
    ul.logos li {
        width: 50% !important;
        flex-basis: 50%;
    }

    ul.logos li img {
        max-width: 120px;
    }
}

/*colors*/
.transparent-bg .pod.grid-item--boxed,
.white-bg .pod.grid-item--boxed,
.gray-bg .pod.grid-item--boxed,
.light-bg .pod.grid-item--boxed {
    background-color: transparent;
}

.transparent-bg .pod .pod__image i,
.white-bg .pod .pod__image i,
.gray-bg .pod .pod__image i,
.light-bg .pod .pod__image i {
    color: var(--theme);
}

.theme-bg .pod.grid-item--boxed,
.theme-alt-bg .pod.grid-item--boxed,
.dark-bg .pod.grid-item--boxed {
    background-color: transparent;
}

.theme-bg .pod .pod__image i,
.theme-alt-bg .pod .pod__image i,
.dark-bg .pod .pod__image i {
    color: #ffffff;
}

.theme-bg .pod .pod__text p,
.theme-alt-bg .pod .pod__text p,
.dark-bg .pod .pod .pod__text p {
    color: #E3E8F1;
}


/*======================================
Widget: Text & Image
======================================*/

.split__text-inner h2 {
    font-size: 3.1rem;
    line-height: 3.7rem;
}

@media screen and (min-width: 1100px) {
    .main-nav__ul--first > .main-nav__li:hover > a.main-nav__a::after, .main-nav__ul--second > .main-nav__li:hover > a.main-nav__a::after {
        width: 100%;
    }

    .main-nav__ul--first > .main-nav__li > a.main-nav__a::after, .main-nav__ul--second > .main-nav__li > a.main-nav__a::after {
        position: absolute;
        bottom: 15px;
        left: 0;
        width: 0;
        height: 3px;
        content: "";
        background: var(--theme-alt);
        -webkit-transition: var(--smooth-transition);
        -o-transition: var(--smooth-transition);
        transition: all 0.4s ease;
    }
}

.split--full .split__text {
    justify-content: unset;
}

#belofte .grid-item--image {
    background: var(--theme-alt);
    padding: 3rem 3rem;
    width: 175px;
    margin-top: 10px;
}

#belofte .grid-item--image figure img {
    height: 50px !important;
}

@media only screen and (min-width: 821px) and (max-width: 1250px) {
    #belofte .grid-item--image {
        background: var(--theme-alt);
        padding: 2.25rem 2.25rem;
        width: 100%;
        margin-top: 0;
    }
}

@media only screen and (min-width: 1251px) {
    #belofte .grid-item--image {
        background: var(--theme-alt);
        padding: 3rem 3rem;
        width: 100%;
        margin-top: 0;
    }

    #belofte .sub-grid div:nth-child(6n+3) .grid-item.grid-item--image::before {
        content: "";
        position: absolute;
        display: block;
        width: 60px;
        height: 2px;
        background: white;
        margin-top: 25px;
        right: 11%;
    }

    #belofte .sub-grid div:nth-child(6n) .grid-item.grid-item--image::before {
        content: "";
        position: absolute;
        display: block;
        width: 60px;
        height: 2px;
        background: white;
        margin-top: 25px;
        right: 3%;
    }
}

@media only screen and (max-width: 768px) {
    .split {
        min-height: 0 !important;
    }

    .split .split__text .split__text-inner {
        padding-top: calc(var(--grid-gutter) *2);
        padding-bottom: calc(var(--grid-gutter) *2);
    }

    .split .hide-image-mobile {
        display: none;
    }
}

/*======================================
  Widget: Spacer
======================================*/
.desktop-spacer {
    display: none;
}

.mobile-spacer {
    display: block;
}

@media only screen and (min-width: 992px) {
    .desktop-spacer {
        display: block;
    }

    .mobile-spacer {
        display: none;
    }
}

.spacer--theme {
    background-color: var(--theme);
}

.spacer--theme-alt {
    background-color: var(--theme-alt);
}

.spacer--white {
    background-color: var(--white);
}

.spacer--background-dark {
    background-color: var(--background-dark);
}

.spacer--background-light {
    background-color: var(--background-light);
}

.spacer--gray {
    background-color: var(--background-light);
}

.spacer--dark {
    background-color: var(--background-dark);
}


/*======================================
  Widget: Umbraco Form + block.form
======================================*/
.grid-item--form form label,
.grid-item--form .form-label,
.block.form form label,
.block.form .form-label {
    margin-bottom: 0;
    letter-spacing: 0;
}

.umbraco-forms-form .shortanswer {
    width: 49.5%;
    display: inline-block;
}

.grid-item--form .umbraco-forms-form fieldset,
.block.form .umbraco-forms-form fieldset {
    padding: 0;
    margin: 0 0 1.5em 0;
    border: none !Important;
}

.grid-item--form .umbraco-forms-field,
.block.form .umbraco-forms-field {
    padding-bottom: 8px;
}

.grid-item--form .umbraco-forms-field.fileupload,
.block.form .umbraco-forms-field.fileupload {
    padding: 15px 0 0 0;
    margin-top: 0; /* the 15px padding already gives the row spacing of the other fields */
}

.fileupload .umbraco-forms-label {
    color: black;
    font-weight: 300;
}

::-webkit-input-placeholder {
    font-style: normal !important;
    color: #bdbdbd;
}

::-moz-placeholder {
    font-style: normal !important;
    color: #bdbdbd;
}

:-ms-input-placeholder {
    font-style: normal !important;
    color: #bdbdbd;
}

:-moz-placeholder {
    font-style: normal !important;
    color: #bdbdbd;
}

.grid-item--form .umbraco-forms-form .umbraco-forms-field-wrapper input.text,
.grid-item--form .umbraco-forms-form .umbraco-forms-field-wrapper textarea,
.block.form .umbraco-forms-field-wrapper input.text,
.block.form .umbraco-forms-field-wrapper textarea {
    max-width: none !important;
    padding: 17px 20px !important;
    display: block;
    width: 100% !important;
}

.grid-item--form .umbraco-forms-submitmessage,
.block.form .umbraco-forms-submitmessage,
.umbraco-forms-submitmessage {
    color: var(--success) !important;
    font-weight: var(--heading-font-weight);
}

.umbraco-forms-form span.field-validation-error {
    display: block;
    color: var(--error) !important;
    font-weight: var(--font-weight-bold);
    font-size: 0.75rem;
    position: absolute;
}

.grid-item--form .help-block,
.block.form .help-block {
    padding: 1em 0 5px 0;
}

.grid-item--form .umbraco-forms-form .umbraco-forms-navigation,
.block.form .umbraco-forms-form .umbraco-forms-navigation {
    padding: 0 0 1em 0em;
}

.umbraco-forms-field.dataconsent {
    padding-bottom: 20px;
}

.grid-item--form .umbraco-forms-form .umbraco-forms-fieldset .row {
    margin-left: 0;
    margin-right: 0;
}

.umbraco-forms-navigation .col-md-12 {
    padding: 0;
    width: fit-content;
}

.umbraco-forms-form span.checkboxlist,
.umbraco-forms-form span.radiobuttonlist,
.umbraco-forms-form span.checkbox {
    padding: 0 !important;
    float: none !important;
}

.umbraco-forms-form .checkboxlist label {
    float: none !important;
}

.umbraco-forms-navigation .col-md-12::after {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    background: black;
    clip-path: polygon(100% 40%, 100% 36%, 100% 100%, 0 100%, 0 100%);
    -webkit-clip-path: polygon(100% 40%, 100% 36%, 100% 100%, 0 100%, 0 100%);
    margin-top: 17px;
    margin-left: -30px;
    transition: 0.3s ease-in-out;
}

/* css for input type file*/
input[type=file] {
    font-size: 1rem;
    color: var(--heading-dark);
    position: relative;
}

input[type=file]::file-selector-button {
    height: 50px;
    border: 3px solid var(--border-dark);
    padding: 13px 20px !important;
    font-size: 1rem;
    color: #111;
    font-weight: bold;
    background-image: linear-gradient(45deg, var(--border-dark) 50%, transparent 50%) !important;
    background-size: 250% 100% !important;
    background-position: right bottom !important;
    transition: background-position 0.3s ease;
}

input[type=file]::file-selector-button:hover {
    transition: 0.3s ease-in-out;
    background-position: left top !important;
    border: 3px solid var(--border-dark);
}

.gray-bg input[type=file]::file-selector-button {
    background-color: #fff;
}

input[type="submit"] {
    color: white !important;
    background: var(--theme-alt);
    border-color: var(--theme-alt)
}

/*======================================
  Form macro
======================================*/
.umbraco-forms-form fieldset {
    margin-bottom: 0;
}

.umbraco-forms-form .shortanswer {
    width: 100%;
    padding-right: 0;
    display: block;
}

.umbraco-forms-field.material1, .umbraco-forms-field.amount1,
.umbraco-forms-field.material2, .umbraco-forms-field.amount2,
.umbraco-forms-field.material3, .umbraco-forms-field.amount3 {
    display: inline-block !important;
    width: 49% !important;
}

.umbraco-forms-field.uploaduwtekeningofontwerp label, .umbraco-forms-field.uploaduwtekeningofontwerp2 label, .umbraco-forms-field.uploaduwtekeningofontwerp3 label {
    display: none;
}

.umbraco-forms-form .shortanswer {
    width: 100%;
    display: inline-block;
}

@media only screen and (min-width:1250px) {
    .umbraco-forms-form .shortanswer {
        width: 49.5%;
        display: inline-block;
    }

    .umbraco-forms-field.shortanswer:nth-of-type(2n-1) {
        padding-right: 7px;
    }

    .umbraco-forms-field.shortanswer:nth-of-type(2n) {
        padding-left: 7px;
    }

    .umbraco-forms-form .amount1, .umbraco-forms-form .amount3 {
        padding-right: 0 !important;
        padding-left: 7px;
    }

    .umbraco-forms-form .uploaduwtekeningofontwerp,
    .umbraco-forms-form .uploaduwtekeningofontwerp2,
    .umbraco-forms-form .uploaduwtekeningofontwerp3 {
        display: inline-block;
        width: 50% !important;
        margin-bottom: 0.3em;
    }

    .umbraco-forms-form .material1, .umbraco-forms-form .material2, .umbraco-forms-form .material3 {
        display: inline-block !important;
        width: 73% !important;
    }

    .umbraco-forms-form .amount1, .umbraco-forms-form .amount2, .umbraco-forms-form .amount3 {
        display: inline-block;
        width: 25% !important;
    }
}

.umbraco-forms-form .shortanswer input.text {
    width: 100%;
    margin: 0 0 15px 0;
}

.umbraco-forms-form textarea {
    margin: 0 0 15px 0 !important;
    height: 100px !important;
}

.fileupload .umbraco-forms-label {
    display: none;
}

.fileupload {
    margin-bottom: -0.5rem;
    margin-top: 1.5rem; /* was 2rem. Forms inside text (no 15px padding above): collapses with the textarea spacing to a 16px gap, like their other rows (15px) */
}

/* Captcha field (uCaptcha: Cloudflare Turnstile / reCAPTCHA): after a file field (which has a negative bottom margin) the widget needs extra room; after normal fields the standard row spacing is enough */
.umbraco-forms-field.fileupload ~ .umbraco-forms-field.ucaptcha {
    padding-top: 1.5rem;
}

.umbraco-forms-form textarea, .umbraco-forms-form .shortanswer input.text, .umbraco-forms-form select {
    border: 1px solid var(--theme) !important;
    padding: 10px 17px !important;
    height: 45px;
    background: transparent;
    border-radius: 0;
}

.umbraco-forms-form fieldset {
    margin: 0;
}

.umbraco-forms-form .umbraco-forms-navigation {
    padding: 0em;
}


::placeholder { /* Most modern browsers support this now. */
    color: var(--theme);
    font-weight: 300;
}

#belofte .sub-grid .grid-item--text h4 {
    color: black;
    font-weight: bold;
}

#belofte .sub-grid .grid-item--text p {
    line-height: 1.5rem;
    padding-right: 0;
}

@media only screen and (min-width: 821px) {
    #contactformulier.grid.grid--compact,
    #contactformulier.grid.grid--compact .grid-item--image,
    #offerteformulier.grid.grid--compact,
    #offerteformulier.grid.grid--compact .grid-item--image {
        padding: 0;
        margin-bottom: 0;
    }

    #belofte .sub-grid .grid-item--text p {
        line-height: 1.5rem;
        padding-right: 30px;
    }

    .fa-check-square-o:before {
        content: "\f046";
        /* font-size: 3rem; */
        font-size: clamp(2rem, -1rem + 3.2vw, 48px) !important;
    }

    #ExtraInformation .pod .pod__text h3.h3 {
        font-size: clamp(1rem, -1rem + 3.2vw, 2rem);
    }

    .umbraco-forms-form span.field-validation-error {
        display: block;
        color: var(--error) !important;
        font-weight: var(--font-weight-bold);
        font-size: 0.75rem;
        margin-top: -19px;
        position: absolute;
    }
}


@media only screen and (min-width: 821px) and (max-width: 1600px) {

    .pod.grid-item--boxed .pod__text {
        padding: 0 0 0 calc(var(--grid-gutter) * 1.5);
    }

    .grid-item--boxed.grid-item--text {
        padding: 0 0 0 calc(var(--grid-gutter) * 1.5);
    }
}


/*======================================
  Widget: Buttons
======================================*/
.button {
    color: #fff;
    margin: 1rem;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/*Theme alt button*/
.button--solid.button--theme-alt::after {
    content: "";
    background: var(--theme);
    position: absolute;
    display: block;
}

.button.button--theme-alt:hover {
    color: white !important;
}

/*Theme button*/
.button--solid.button--theme::after {
    content: "";
    background: var(--theme-alt);
    position: absolute;
    display: block;
}

/*White and gray button*/
.button--white.button--solid::after, .button--gray.button--solid::after {
    content: "";
    background: var(--theme);
    position: absolute;
    display: block;
}

.button.button--white.button--solid, .button.button--gray.button--solid {
    color: var(--theme) !important;
}

.button--white.button--solid:hover, .button--gray.button--solid:hover {
    color: white !important;
}

/*Dark button*/
.button--dark.button--solid::after {
    content: "";
    background: var(--white);
    position: absolute;
    display: block;
}

.button--dark.button--solid.button--solid:hover {
    color: black !important;
}


/*Button Dark border*/
.button--dark.button--border::after {
    content: "";
    background: var(--background-dark);
    position: absolute;
    display: block;
}


/*Button theme-alt border*/
.button--theme-alt.button--border::after {
    content: "";
    background: var(--theme-alt);
    position: absolute;
    display: block;
}


/*Button white and gray border*/
.button--white.button--border::after, .button--gray.button--border::after {
    content: "";
    background: var(--theme);
    position: absolute;
    display: block;
}

.button.button--white.button--border:hover, .button.button--gray.button--border:hover {
    color: white !important;
}

.footer-item .button--white.button--border::after, .button--gray.button--border::after {
    content: "";
    background: var(--theme-alt);
    position: absolute;
    display: block;
}

.footer-item .button.button--white.button--border:hover, .button.button--gray.button--border:hover {
    color: white !important;
}

/*Theme button*/
.button--border.button--theme::after {
    content: "";
    background: var(--theme);
    position: absolute;
    display: block;
}

.button:hover::after {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transition: all 0.6s;
}

.button::after {
    left: -20%;
    right: -20%;
    top: 0;
    bottom: 0;
    transform: skewX(-45deg) scale(0, 1);
    transition: 0.3s ease-in-out;
    z-index: -1;
    padding: 0.85em 0.75em;
}

.button:hover::after {
    transform: skewX(-45deg) scale(1.7, 1);
    transition: 0.3s ease-in-out;
}

.flickity-button:hover {
    border-color: var(--theme);
}

.flickity-button::before {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -20%;
    right: -20%;
    transform: skewX(-45deg) scale(0, 1);
    transition: transform 0.2s ease-in-out;
    background-color: var(--theme);
    z-index: -1;
}

.flickity-button:hover::before {
    transform: skewX(-45deg) scale(1.7, 1);
    transition: transform 0.2s ease-in-out;
}

.button-wrap {
    margin-top: 1rem;
}

/*======================================
Widget: Grid
======================================*/
/*fixing the styling when AND a backgroundimage is chosen AND a backgroundcolor is set in a GRID, 
so the bgcolor will shine through when an transparent svg is chosen as bgimage. 
This needs additional css for when NOT using an bgimage AND using a 'boxed' style on elements. 
The z-indez is then wrong --------------------------------------------*/
.grid > .container,
.grid > .container-fluid {
    position: relative;
    z-index: 1;
}

.grid .block__background {
    z-index: 0;
}

.block__background.dark-bg {
    background-color: var(--background-dark);
}

.block__background.white-bg {
    background-color: var(--white);
}

.block__background.gray-bg {
    background-color: var(--background-light);
}

.block__background.theme-bg {
    background-color: var(--theme);
}

.block__background.theme-alt-bg {
    background-color: var(--theme-alt);
}

.block__background.transparent-bg {
    background-color: var(--transparent);
}

.block.grod.gray-bg .block__background {
    background-size: unset;
}

.block__background {
    background-color: var(--background-dark);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-size: initial;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
}

/* Why was this needed? Keep and check just in case */
/*.block.grid.gray-bg.in-view .container {
    padding-left: 0;
    padding-right: 0;
}*/

#ExtraInformation.block.grid.gray-bg.in-view .container {
    padding-left: var(--grid-gutter);
    padding-right: var(--grid-gutter);
}


.block.grid.white-bg .container-fluid .row.row--v-grow .col-33,
.block.grid.white-bg .container .row.row--v-grow .col-33 {
    margin-bottom: 25px;
}


.umbraco-forms-form.umbraco-forms-igloo .umbraco-forms-container.col {
    padding-left: 0;
}

@media only screen and (max-width: 821px) {
    .gray-bg.grid.grid--compact {
        padding: var(--grid-gutter);
    }

    #pluspunten .col-25.col-m-50.col-s-100 .grid-item--image img {
        width: 50px;
        margin: 0;
    }

    #pluspunten .col-20.col-m-33.col-s-100 .grid-item--image img {
        width: 50px;
        margin: 0;
    }

    #pluspunten .col-25.col-m-50.col-s-100 {
        flex-basis: 10%;
        max-width: 10%
    }

    #pluspunten .col-100 {
        flex-basis: 75%;
        max-width: 75%;
    }

    #pluspunten .col-20.col-m-33.col-s-100 .grid-item--image img {
        width: 50px;
        margin: 0;
    }

    #contactformulier .container,
    #offerteformulier .container {
        padding-left: var(--grid-gutter);
        padding-right: var(--grid-gutter);
    }

    .tabs.tabs--pills .tabs__nav ul li a {
        max-height: 255px;
        min-height: 255px;
        padding: 2em;
    }

    .tabs.tabs--pills .tabs__nav ul li {
        margin: 5px;
    }

    p.tab-title {
        white-space: normal;
    }

    #usp .col-50 .sub-grid .col-50.col-s-100 {
        flex-basis: 50%;
        max-width: 50%;
    }


    .footer-grid .col-40:last-child .footer-item--text {
        margin-top: 4rem !important;
    }

    .footer-grid .col-40:last-child .footer-item--text {
        margin-top: 4rem !important;
    }

    .footer-item--text, .footer-item--links {
        width: fit-content;
        margin: 0 25%;
        text-align: left;
    }

    .footer-item .navigation--level-0 {
        text-align: left;
    }


    #belofte .sub-grid .grid-item--text p {
        line-height: 1.5rem;
        padding-right: 1rem;
    }

    .navigation ul li::before {
        display: none;
    }

    .navigation ul li > div a {
        color: white;
        font-weight: 300 !important;
        font-size: 1rem;
        padding-left: 0px;
    }

    .orderLast {
        order: 2
    }
}


@media only screen and (max-width: 500px) {
    #usp .col-50 .sub-grid .col-50.col-s-100 {
        flex-basis: 100%;
        max-width: 100%;
    }
}



@media only screen and (max-width: 374px) {
    .hero__video .hero__video-player {
        position: absolute;
        max-width: 180% !important;
        min-width: unset !important;
        min-height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #videoHero.hero.hero--100 {
        min-height: calc(35vh + 5px);
    }

    .top.top--scroll-bg + #content > #videoHero.hero:first-child {
        margin-top: 0;
    }

    #videoHero.hero {
        padding: 0 !important;
    }

    #videoHero.hero .hero__inner {
        flex-grow: 1;
        width: 100%;
        margin-top: 50px;
        margin-bottom: 15px;
    }
}

@media only screen and (min-width:375px) and (max-width: 450px) {
    .hero__video .hero__video-player {
        position: absolute;
        max-width: 170% !important;
        min-width: unset !important;
        min-height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #videoHero.hero.hero--100 {
        min-height: calc(35vh + 5px);
    }

    .top.top--scroll-bg + #content > #videoHero.hero:first-child {
        margin-top: 0;
    }

    #videoHero.hero {
        padding: 0 !important;
    }

    #videoHero.hero .hero__inner {
        flex-grow: 1;
        width: 100%;
        margin-top: 50px;
        margin-bottom: 15px;
    }
}

@media only screen and (min-width: 451px) and (max-width: 821px) {
    .hero__video .hero__video-player {
        position: absolute;
        max-width: 170% !important;
        min-width: unset !important;
        min-height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #videoHero.hero.hero--100 {
        min-height: calc(50vh + 5px);
    }

    .top.top--scroll-bg + #content > #videoHero.hero:first-child {
        margin-top: 0;
    }

    #videoHero.hero {
        padding: 0 !important;
    }

    #videoHero.hero .hero__inner {
        flex-grow: 1;
        width: 100%;
        margin-top: 35px;
    }

    .card .card__text .card__header {
        font-size: 2.8rem;
    }

    #belofte .grid-item--image {
        background: var(--theme-alt);
        padding: 1.75rem 2rem;
        width: 125px;
        margin-top: 8px;
        height: 100px;
    }

    #belofte .col-s-100 {
        display: flex;
    }

    #belofte .col-s-100 .row.sub-grid {
        width: 100%;
    }

    #belofte .col-s-100 .sub-grid .col-75 {
        flex-basis: 75%;
        max-width: 75%;
        order: 1;
    }

    #belofte .col-s-100 .sub-grid .col-25 {
        flex-basis: 20%;
        max-width: 20%;
        order: 2;
    }
}



@media only screen and (max-width: 450px) {
    #ExtraInformation .pod .pod__text h3 {
        font-size: 1.5rem;
    }

    .footer-item--text div h3,
    .footer-item--links h2.h6 {
        font-size: 1.3rem !important;
    }

    #belofte .grid-item--image {
        background: var(--theme-alt);
        padding: 0rem 1rem;
        width: 50px;
        margin-top: 10px;
        height: 50px;
    }

    .pod.grid-item--boxed .pod__image.image-as-icon {
        margin: calc(var(--grid-gutter) * 0.5) 0 0 calc(var(--grid-gutter) * 2);
        display: inline-block;
        width: 75px;
        height: 50px;
    }

    .footer-item--text, .footer-item--links {
        width: fit-content;
        margin: 0 5%;
        text-align: left;
    }

    #belofte .col-s-100 {
        display: flex;
    }

    #belofte .col-s-100 .sub-grid .col-75 {
        flex-basis: 75%;
        max-width: 75%;
        order: 2;
    }

    #belofte .col-s-100 .sub-grid .col-25 {
        flex-basis: 20%;
        max-width: 20%;
        order: 1;
    }

    #pluspunten .col-25.col-m-50.col-s-100 {
        flex-basis: 20;
        max-width: 20;
    }

    #pluspunten .col-100 {
        flex-basis: 75%;
        max-width: 75%;
    }
}

.item-right-mobile {
    width: 100%
}

/* Styling for cookie code*/
.cc_root {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    z-index: 1000;
}

.cc_root .cc_text {
    text-align: left;
}

.cc_text > svg {
    display: none !important;
}

.cc_text {
    padding-left: 0 !important;
    margin: 25px 25px 0 !important;
}

.cc_text::before {
    content: "";
    display: block;
    background-image: url(https://www.seinemetaal.nl/media/3vzmtjm0/seine_ms_logo.png);
    width: 120px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 5px;
}

.cc_text > span:nth-child(1) {
    color: black;
}

.cc_buttons {
    grid-template-columns: 1fr 2fr !important;
    grid-template-areas: "button_settings button_allowall" !important;
    margin: 20px 25px 25px !important;
}

@media only screen and (min-width: 600px) {
    .cc_buttons button.cc_button_settings {
        border: 1px solid var(--text-color);
    }

    .cc_root > div {
        border-radius: 10px !important;
        min-width: 650px !important;
    }


    .cc_buttons button {
        height: 46px;
        max-height: 46px;
    }

    .cc_text {
        padding-left: 0 !important;
        margin: 35px 35px 0 !important;
    }

    .cc_buttons {
        grid-template-columns: 1fr 2fr !important;
        grid-template-areas: "button_settings button_allowall" !important;
        margin: 30px 35px 35px !important;
    }
}

@media only screen and (max-width: 600px) {
    .cc_buttons button {
        padding: 8px 8px !important;
    }

    .cc_buttons button:nth-child(2) {
        margin-top: 5px;
    }

    .cc_text > span:nth-child(2) {
        display: none !important;
    }

    .cc_text > span {
        display: block !important;
    }
}

@media only screen and (max-width: 768px) {
    main#content {
        display: flex;
        flex-direction: column;
    }

    .top.top--scroll-bg + #content {
        margin-top: -30px !important;
    }

    .hero ~ .split-wrap.order-2 .split__text {
        order: 1 !important;
    }

    .hero ~ .split-wrap.order-2 split__image {
        order: 2 !important;
    }

    .order-1 {
        order: 1;
    }

    .order-2 {
        order: 2;
    }

    .order-3 {
        order: 3;
    }

    .order-4 {
        order: 4;
    }

    .order-5 {
        order: 5;
    }

    .order-6 {
        order: 6;
    }

    .order-7 {
        order: 7;
    }

    .order-8 {
        order: 8;
    }

    .order-9 {
        order: 9;
    }

    .order-10 {
        order: 10;
    }

    .order-11 {
        order: 11;
    }

    .order-12 {
        order: 12;
    }

    .order-13 {
        order: 13;
    }

    .order-14 {
        order: 14;
    }

    .order-15 {
        order: 15;
    }

    .order-16 {
        order: 16;
    }

    .order-17 {
        order: 17;
    }

    .order-18 {
        order: 18;
    }

    .order-19 {
        order: 19;
    }

    .order-20 {
        order: 20;
    }

    .order-21 {
        order: 21;
    }

    .order-22 {
        order: 22;
    }

    .order-23 {
        order: 23;
    }

    .order-24 {
        order: 24;
    }

    .order-25 {
        order: 25;
    }

    .order-26 {
        order: 26;
    }

    .order-27 {
        order: 27;
    }

    .order-28 {
        order: 28;
    }

    .order-29 {
        order: 29;
    }

    .order-30 {
        order: 30;
    }
}

/* Long words in headings (e.g. "Kwaliteitswaarborging", "Metaalbewerkingsbedrijf") are wider than a phone screen. The text block next to
   an image is a flex item that cannot shrink below its widest word, so it widened the whole page sideways and cut the heading off.
   Let the block shrink and, as a last resort, break the word instead. */
@media only screen and (max-width: 820px) {
    .split__text-inner {
        min-width: 0;
        max-width: 100%;
    }

    .split__text h1,
    .split__text h2,
    .split__text h3,
    .split__text h4,
    .split__text p,
    .split__text li {
        overflow-wrap: break-word; /* only breaks a word that is wider than the line; normal words still wrap whole, like on the old site */
    }
}