/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


.brxe-slider-nested .splide__track {
    overflow: visible !important;
    padding-right: calc((100% - 1440px) / 2) !important;
    padding-left: calc((100% - 1440px) / 2) !important;
}

.image-slider{
    position:relative;
}

.image-slider::before{
    content:'';
    position:absolute;
    width:100%;
    height:50%;
    bottom:0px;
    right:0px;
    left:0px;
    background-color:#E8EDF3;
    max-height:500px;
}

.text-white,
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6{
    color:#fff;
}

.brxe-text ul,
.brxe-text ul li{
    padding-left:20px;
    margin-block-start: 0px;
}

.gform-theme .gform_description,
.gform-theme .gform_required_legend{
    display:none !important;
}

.gform-theme input[type="submit"]{
    white-space: nowrap !important;
    padding-top: 16px !important;
    padding-right: 32px !important;
    padding-bottom: 16px !important;
    padding-left: 32px !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    font-family: "Clash Display" !important;
    font-size: 18px !important;
    border-radius: 8px !important;
}

.image-content .blue-bg{
    background-color:#e8edf3;
}

.image-content .green-bg{
    background-color:rgba(62, 183, 33, 0.1);
}

.image-content .blue-bg .bricks-button{
    background-color:#15488a !important;
}

.image-content .green-bg .bricks-button{
    background-color:#3eb721 !important;
}

.image-content .blue-bg .bricks-button:hover{
    background-color:#1e67c6 !important;
}

.image-content .green-bg .bricks-button:hover{
    background-color:#31921a !important;
}

.image-content.image-left > .brxe-container{
    grid-template-columns: 2fr 3fr;
}

.image-content.image-right > .brxe-container{
    grid-template-columns: 3fr 2fr;
}

.image-content.image-right> .brxe-container >div:first-child{
    order:2;
}

.image-content.image-right> .brxe-container >div:last-child{
    order:1;
    border-radius: 16px 0px 0px 16px !important;
}

.image-content.image-left > .brxe-container >div:first-child{
    order:1;
}

.image-content.image-left > .brxe-container >div:last-child{
    order:2;
    border-radius: 0px 16px 16px 0px !important;
}

.image-content-nocolor.image-right .brxe-container{
    flex-direction:row-reverse;
}

.lightbox-gallery {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.lightbox-gallery__item {
    position: relative;
    width: 100%;
    aspect-ratio: 1.5 / 1;
    border-radius: 1.25rem;
    overflow: clip;
}

.lightbox-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lightbox-gallery__overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.lightbox-gallery__overlay span {
    font-size: var(--font-size-h4);
    font-weight: 500;
    line-height: normal;
    color: #fff;
}

.project-loop-container > div:nth-child(even){
    flex-direction: row-reverse;
}

.image-marquee{
    width: 100%;
    position: relative;
}

.image-track{
    /* display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
    width: max-content;
    align-items: flex-start;
    animation: scroll-left 35s linear infinite;
    will-change: transform; */

    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
    width: max-content;
    align-items: flex-start;
    will-change: transform;
    transform: translate3d(0,0,0);
}

.image-track img{
    position: relative;
    border-radius:16px;
    width:400px;
}

.image-track img:nth-child(4n+0){
    height:410px;
    margin-top:30px;
}

.image-track img:nth-child(4n+1){
    height:415px;
    margin-top:103px;
}

.image-track img:nth-child(4n+2){
    height:340px;
    margin-top:64px;
}

.image-track img:nth-child(4n+3){
    height:470px;
    margin-top:0px;
}

/* scroll rechts -> links */
@keyframes scroll-left{
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* werkt goed als je je items 2× dupliceert */
}

/* optioneel: pauze on hover */
.image-marquee:hover .image-track{
    animation-play-state: paused;
}

.resnav-menu.brxe-nav-menu .bricks-nav-menu > li > a{
    position: relative;
    display:inline;
}

.resnav-menu.brxe-nav-menu .bricks-nav-menu > li > a::after{
    content:'';
    background-image:url('data:image/svg+xml,<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.625 3.97748C0.279822 3.97748 -1.50882e-08 4.2573 0 4.60248C1.50882e-08 4.94766 0.279822 5.22748 0.625 5.22748L0.625 4.60248L0.625 3.97748ZM11.0669 5.04442C11.311 4.80034 11.311 4.40461 11.0669 4.16054L7.08947 0.18306C6.84539 -0.0610173 6.44966 -0.0610173 6.20558 0.18306C5.9615 0.427138 5.9615 0.822866 6.20558 1.06694L9.74112 4.60248L6.20558 8.13801C5.96151 8.38209 5.96151 8.77782 6.20558 9.0219C6.44966 9.26597 6.84539 9.26597 7.08947 9.0219L11.0669 5.04442ZM0.625 4.60248L0.625 5.22748L10.625 5.22748L10.625 4.60248L10.625 3.97748L0.625 3.97748L0.625 4.60248Z" fill="%232A1011"/></svg>');
    margin-left:10px;
    width:12px;
    height:10px;
    top:2px;
    position: relative;
    display: inline-block;
}

/* :where(.brxe-nav-menu) .bricks-nav-menu .sub-menu{
    background-color: white;
    border:1px solid rgba(0, 0, 0, 0.5);
    padding:10px;
    min-width:unset;
} */

#brxe-f4d1ae .bricks-nav-menu > li > .brx-submenu-toggle > *,
.wpml-ls-menu-item .wpml-ls-flag{
    height:32px;
}

@media (max-width: 991px) {
    .image-track img{
        width:350px;
    }

    .image-content.image-left > .brxe-container >div:last-child{
        order:2;
        border-radius: 0px 0px 16px 16px !important;
    }

    .image-content.image-left > .brxe-container >div:last-child{
        border-radius: 0px 0px 16px 16px !important;
    }


    .image-content.image-right > .brxe-container{
        flex-direction: column-reverse;
    }

    .image-content.image-right> .brxe-container >div:last-child{
        border-radius: 0px 0px 16px 16px !important;
    }
}

@media (max-width: 768px) {
    .image-track img{
        width:200px;
    }

    .image-track img:nth-child(4n+0){
        height:310px;
        margin-top:20px;
    }

    .image-track img:nth-child(4n+1){
        height:315px;
        margin-top:80px;
    }

    .image-track img:nth-child(4n+2){
        height:240px;
        margin-top:50px;
    }

    .image-track img:nth-child(4n+3){
        height:370px;
        margin-top:0px;
    }
}