/* Hero */
.hero_row{
    position: relative;
}
.hero_row .fl-row-content{
    position: static !important;
}

#heroImageCol > .fl-col-content{
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
}


body:not(.fl-builder) #stickyButton{
   right: 0;
}
.playbutton_parent{
    display: grid; place-items: center;
}
.mute-button-col{
    bottom: 20px; right: 0; position: absolute; z-index: 500;
}
.mute-button-col.fixed #stickyButton{
    margin: 0;
    position: fixed; top: 20px; right: 0;
}
.playbutton{
    border-radius: 50%; aspect-ratio: 1/1; background-color: #FFF; border: none;
    display: grid; place-items: center; height: 75px; scale: 1;
    transition: scale .15s ease-in-out; 
}
.playbutton:hover{
    scale: 1.1; background-color: #FFF; border: none;
}
.playbutton:active{
    scale: .95;
}
.playbutton:focus{
    background-color: #FFF; border: none; 
}
.playbutton svg{
    width: 50%; height: 50%;
}
#videoDialog{
    aspect-ratio: 16/9; height: 60%; background-color: transparent; border: none;
    padding: 0; border-radius: 10px; overflow: visible;
}
#videoDialog iframe{
    width: 100%; height: 100%; border-radius: 20px;
}


/* Form dialog */

#formDialog input[type='submit']:hover{
    background-color: var(--flex-accent-color);
}
#formDialog *{
    color: #000;
}
#formDialog input::placeholder,
#formDialog textarea::placeholder{
    color: grey;
}

/* Header */
#v2_tp{
    background: transparent !important; 
}


.scroll_down_button{
    bottom: 0; top: 50%;
}
/* .unmute-button-container{
    position: absolute; bottom: 0; right: 0; transform: translateY(-100%);
} */
.unmute_button_col{
    position: absolute; bottom: 100px; right: 0; display: inline-block; width: auto;
}
.unmute-button,
.unmute-button:hover{
    background: var(--flex-main-color); border: none; aspect-ratio: 1/1; border-radius: 10px;
}
.unmute-button:hover svg path{
    transition: fill 150ms ease-in-out;
}
.unmute-button:hover svg path{
    fill: var(--flex-accent-color);
}

.unmute-button{
    display: flex; align-items: center; justify-content: center;
}
.unmute-button svg{
    max-width: 40px; max-height: 40px;
}

.unmute-button.mute_active .unmute-icon{
    display: none;
}
.unmute-button.mute_active .mute-icon{
    display: inline-block;
}

.mute-icon{
    display: none;
}

/* Text - media */
.text_media .content-wrapper .image{
    background-size: cover;
    display: flex; justify-content: flex-start;
}
.text_media .content-wrapper.flipped .image{
    justify-content: flex-end;
}
.text_media .content-wrapper:not(.flipped) .content{
    padding-right: 20px;
}
.text_media .content-wrapper.flipped .content{
    padding-left: 20px;
}
.text_media .content-wrapper .image img{
    border-radius: 0 10px 10px 0;
}
.text_media .content-wrapper.flipped .image img{
    border-radius: 10px 0 0 10px;
}

.text_media .image.center{
    justify-content: center;
}


/* Counting numbers */
.counting_numbers .content-wrapper{
    display: flex; flex-direction: row; justify-content: space-between;
}
.counting_numbers .number-wrapper{
    display: flex; flex-direction: column; align-items: center;
    font-size: 20px; font-weight: 700;
}
.counting_numbers .number{
    color: var(--flex-accent-color);
    font-size: 50px;
    display: flex; flex-direction: row; align-items: center;
}


/* Content Usps */
.content_usps .usps{
    display: flex; flex-direction: row; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.content_usps .usps .usp{
    height: auto; background-color: #313131; padding: 50px;
    aspect-ratio: 1/1; display: flex; align-items: flex-start; flex-direction: column; justify-content: flex-end;
    flex: 1; flex-basis: calc(33% - 30px);
}

.content_usps .usps .usp img{
    max-width: 90%; height: 130px; object-fit: contain; margin-left: auto; margin-right: auto;
}

.content_usps .usps .usp h5{
    margin: 40px 0 20px 0;
}


/* Apply styles to the parent if it has more than 3 children */
.content_usps .usps:has( > :nth-child(n+4)) .usp{
    /* Your styles here */
    flex-basis: 40%;
}

.content.center{
    text-align: center; max-width: 900px; margin: 0 auto; padding-bottom: 40px;
}

/* Referenties */
.referenties .referenties_inner{
    display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between;
    gap: 30px;
}

.referenties .referentie{
    flex: 1;
}

.referenties .referentie-kaart{
    display: flex; align-items: flex-end; 
    height: 550px; padding: 30px;
    background-repeat: no-repeat; background-position: center; background-size: cover;
    margin-bottom: 20px;

    position: relative;
}
.referenties .referentie-kaart h5 {
    z-index: 2; font-size: 30px;
}
.referenties .referentie-kaart::after{
    content: ''; position: absolute; inset: 0; height: 100%; width: 100%; background-color: #000; opacity: .2; z-index: 0;
}

/* USPS SMALL */
.usps_small_wrapper{
    display: flex; flex-direction: row; justify-content:  space-between; gap: 50px;
}
.usps_small_wrapper .usp_small{
    display: flex; flex-direction: row; align-items: center; gap: 10px;
}
.usps_small_wrapper .usp_small .icoon{
    background-color: var(--flex-main-color); border-radius: 5px; height: 3em; aspect-ratio: 1/1; display: grid; place-items: center;
}
.usps_small_wrapper .usp_small p{
    margin: 0; font-size: 19px; line-height: 1.1; font-weight: 700;
}
.usps_small_wrapper .usp_small .icoon img{
    max-width: 24px;
}

/* Nummer + Media */
.nummers_media .number{
    height: 50px; aspect-ratio: 1/1; border-radius: 50%; display: grid; place-items: center;
    font-weight: 700; font-size: 20px;
}

.nummers_media .number_wrapper{
    display: flex; align-items: center; gap: 20px; margin-bottom: 30px;
}

.nummers_media .number.groen,
.nummers_media .number.grijs{
    color: #000; 
}
.nummers_media .number.groen{
    background-color: var(--flex-accent-color);
}
.nummers_media .number.grijs{
    background-color: #D9D9D9;
}

.nummers_media .content-wrapper > div,
.nummers_media .video video{
   width: 100%;
}

/* Afbeeldingen + pijl */
.afbeelding_pijl .afbeeldingen{
     display: flex; flex-direction: row; align-items: center;
     gap: 50px;
}
.afbeelding_pijl .afbeeldingen .afbeelding_1,
.afbeelding_pijl .afbeeldingen .afbeelding_2{
    flex: 1; width: 100%;
    display: flex; flex-direction: column; align-items: center;
}

.afbeelding_pijl #animated_arrow{
    object-position: center;
    transform-origin: top center;
    width: 130px; height: 70px; object-fit: contain;
    margin-top: 2em;
    transform: translateX(-20%);

}

.afbeelding_pijl #animated_arrow.animate{
    animation: animatedArrow 1s ease-in-out;
    transform: translateX(0);
}

@keyframes animatedArrow{
    0%{
        transform: translateX(-20%);
    }
    100%{
        transform: translateX(0);
    }
}

/* Clients */
.clients .clients-inner{
    display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; grid-auto-flow: dense;
    gap: 100px; max-width: 900px; margin: 0 auto;
}

.clients .clients-inner .client{
    display: flex; align-items: center; text-align: center; flex-direction: column; gap: 20px;
}
.clients .clients-inner .client > *{
    margin: 0;
}
.clients .client img{
    width: 100%; height: 250px; object-fit: cover; object-position: center; 
}

/* Carousel */
.carousel .swiper-slide{
    height: auto;
}
.carousel .item_inner{
    display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
    height: 100%; width: 100%; padding: 30px; aspect-ratio: 1/1;
}

.carousel .item_inner img{
    height: auto; width: 100%; max-height: 150px; max-width: 150px; object-fit: contain;
}
.carousel .item_inner .image_text img{
    max-width: 100px;
}

.carousel .image_text{
    display: flex; flex-direction: column; align-items: center; gap: 20px;
}

.carousel .item_inner h4,
.carousel .item_inner p{
    margin: 0;
    text-align: center;
}
.carousel .item_inner h4{
    color: var(--flex-accent-color); font-size: 25px; font-weight: 700; line-height: 1.4;
}
.carousel .item_inner p{
    text-align: center; font-size: 20px; font-weight: 700; line-height: 1.3;
}
.swiper.flex-carousel{
    padding: 20px;

}
.flex-carousel-wrapper{
    position: relative;
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 10px;
}
.swiper-button-next, 
.swiper-button-prev{
    background-color: var(--flex-main-color); color: var(--flex-accent-color);
    border-radius: 50%; aspect-ratio: 1/1; height: 50px; width: 50px;
    top: 50%;
}

.swiper-button-next {
    right: -40px;
}
.swiper-button-prev{
    left: -40px;
}

/* Afbeelding rij */
.image_full_width{
    width: 100%; height: auto; max-height: 100vh; object-fit: cover; object-position: center;
}

/* Content switcher */
.content_switcher h2,
.content_switcher h5{
    text-align: center;
}
.content_switcher .swiper-slide{
    display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;
    background-color: #1c1c1c !important;
    height: auto; gap: 50px
}

.content_switcher .swiper-slide .image img{
    max-height: 100%; width: 100%;
}
.content_switcher .swiper-slide .image,
.content_switcher .swiper-slide .video{
    text-align: right;
}
.content_switcher .swiper-slide .image img,
.content_switcher .swiper-slide .video video{
    max-height: 550px;
    width: 100%;
}
.content_switcher .switch-button-wrapper{
    display: flex; justify-content: center; align-items: center; gap: 50px;
    margin-top: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    row-gap: 20px;
}
.content_switcher .cta{
    margin: 20px 0;
}

.content_switcher .switch-button{
    color: #1c1c1c;
    cursor: pointer;
    font-size: 20px;
    background-color: var(--flex-accent-color);
    border-radius: 5px;
    font-weight: 700;
    padding: 10px 20px;
    transition: opacity .3s ease-in-out;
    text-align: center; white-space: nowrap;
    opacity: .5;
}
.content_switcher .switch-button:hover,
.content_switcher .switch-button.active{
      /* font-weight: 700; */
    opacity: 1;
}


.content_switcher .swiper-slide .text h3{
	line-height: 1.5 !important;
	margin-bottom: 20px;
}


.flex-row.formulier form input{
    color: #000;
}
.flex-row.formulier form select{
    padding: 0;
}

@media only screen and (min-width: 1280px){
    .text_media .content-wrapper:not(.flipped) .wrapper-right{
     margin-right: calc((100vw - 1280px) / 2);
    }
    .text_media .flipped .wrapper-right{
        margin-left: calc((100vw - 1280px) / 2);
    }
    .text_media .content-wrapper .image{
        flex: 2;
    }
    
    .content_switcher .swiper-slide .content{
        width: 40%;
        padding-top: 30px;
    }
    .content_switcher .swiper-slide .image img{
        max-height: 100%; width: 100%;
    }
    .content_switcher .swiper-slide .image,
    .content_switcher .swiper-slide .video{
        width: 60%; text-align: right;
    }
    .content_switcher .wrapper-left{
        margin-left: calc((100vw - 1280px) / 2);
    }

    .text_media .content-wrapper > div{
        flex: 1;
    }

}

@media only screen and (max-width: 992px){
    .text_media .content-wrapper,
    .text_media .content-wrapper.flipped,
    .referenties .content-wrapper{
        flex-direction: column;
    }
    .text_media .content-wrapper.flipped .content,
    .text_media .content-wrapper:not(.flipped) .content{
        padding-left: 0; padding-right: 0;
    }
    .content_usps .usps .usp{
        padding: 20px;
    }

    .usps_small .usps_small_wrapper{
        gap: 20px;
   }


   .clients .clients-inner{
        gap: 50px;
    }
    .flex-carousel-wrapper{
        padding: 20px;
    }
    .swiper-button-next {
        right: -15px;
    }
    .swiper-button-prev{
        left: -15px;
    }

    .content_switcher .swiper-slide{
        flex-direction: column-reverse; justify-content: flex-end;
        gap: 0;
    }
    .content_switcher .swiper-slide .content{
        margin-left: 0; margin-top: 20px;
    }
    .content_switcher .swiper-slide > div{
        width: 100% !important;
    }
    .content_switcher .swiper-slide .image,
    .content_switcher .swiper-slide .video video{
       text-align: center;
       width: 100%;
    }
    .content_switcher .swiper-slide .content{
        margin-left: 0;
    }
    .content_switcher .switch-button-wrapper{
        
    }
    .content_switcher .switch-button-wrapper{
        gap: 20px;
    }
}

@media only screen and (max-width: 767px){
    #videoDialog iframe{
        border-radius: 10px;
    }

    .unmute_button_col{
        bottom: 0;
    }

    .text_media .content-wrapper .image img,
    .text_media .content-wrapper.flipped .image img{
        border-radius: 10px;
    }

    .text_media .content-wrapper .content{
        padding-block: 0;
    }

    .counting_numbers .content-wrapper{
        display: grid; grid-template-columns: repeat(2, 1fr); place-items: center; grid-row-gap: 20px;
    }

    .content_usps .usps,
    .referenties .referenties_inner,
    .usps_small .usps_small_wrapper,
    .afbeelding_pijl .afbeeldingen{
        flex-direction: column;
    }
    
    .nummers_media .content-wrapper,
    .nummers_media .content-wrapper.flipped{
        gap: 20px;
        flex-direction: column-reverse;
    }
    
    .nummers_media .number_wrapper{
        gap: 10px;
    }
    .nummers_media .number{
        height: 50px; 
    }
    
    
    .referenties .referentie-kaart{
        height: unset; aspect-ratio: 16/9;
        padding: 20px;
    }
    .referenties .referentie-kaart h5{
        font-size: 20px;
    }
    
    @keyframes animatedArrow{
        0%{
            transform: translateY(-20%) rotate(90deg);
        }
        100%{
            transform: translateY(0) rotate(90deg);
        }
    }
    .afbeelding_pijl #animated_arrow.animate{
        transform: translateY(0);
    }
    .afbeelding_pijl .afbeeldingen #animated_arrow{
        transform: rotate(90deg); margin-left: 60px; margin-top: 40px;
    }

    .afbeelding_pijl .afbeeldingen img{
        width: 100%;
    }
    

    .clients .clients-inner{
        grid-template-columns: 1fr;
    }

    .swiper-button-next, 
    .swiper-button-prev{
        width: 40px; height: 40px;
    }

    .swiper-button-next{
        right: -10px; 
    }
    .swiper-button-prev{
        left: -10px;
    }

    .flex-carousel-wrapper{
        padding: 0 20px;
    }

    .content_usps .usps .usp img{
        max-width: 50%;
    }

    .content_usps .usps .usp{
        justify-content: flex-end;
    }

    .mute-button-col.fixed #stickyButton{
        top: 0;
    }
    .mute-button-col #stickyButton{
        margin-bottom: 60px;
    }


    
    
}
#formDialog input:not([type='submit']):not(input[type="checkbox"]){
    width: 100%;
}