.header {
    position:relative;
    padding-top:200px;
    padding-bottom:200px;
    overflow:hidden;
}
.header .image_background {
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    z-index: 0;
}
.header .image_background img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}
.header .image_background:after {
    content:'';
    background: rgb(27,23,172);
    background: -moz-linear-gradient(270deg, rgba(27,23,172,0) 0%, rgba(16,13,49,1) 70%, rgba(16,13,49,1) 100%);
    background: -webkit-linear-gradient(270deg, rgba(27,23,172,0) 0%, rgba(16,13,49,1) 70%, rgba(16,13,49,1) 100%);
    background: linear-gradient(270deg, rgba(27,23,172,0) 0%,  rgba(16,13,49,1) 70% , rgba(16,13,49,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1b17ac",endColorstr="#100d31",GradientType=1);
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
}
.header p {
    font-size: 20px;
    line-height:32px;
}
.header .header-knoppen {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:20px;
}
/* Bel-knop in de hero. Bouwt voort op .main-btn/.roze-btn zodat vorm en kleur
   gelijk zijn aan de andere knoppen; alleen de inhoud (icoon + nummer) wijkt af.
   Iets steviger dan de buren, want dit is de knop die bezoekers moeten zien. */
.header .header-belknop {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    font-size: 18px;
    font-weight: 600 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}

.header .header-belknop__icon {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
}

/* De kleur staat met !important in .roze-btn, maar de losse spans erbinnen
   worden door de theme-regel `.site span` alsnog donkerblauw. */
.header .header-belknop__label,
.header .header-belknop__nummer {
    color: #fff !important;
}

/* Bij hover maakt de sitebrede regel .roze-btn:hover het vlak wit en de tekst
   zwart, maar dat laatste bereikte de losse spans niet: die stonden hierboven
   op wit met !important en wonnen. Gevolg: witte tekst op een wit vlak, alleen
   het icoon bleef zichtbaar (gemeld 24 juli).

   Bewust NIET achter @media (hover: hover): op touch kan een aangetikte knop in
   zijn hover-stand blijven hangen, en dan zou de tekst juist daar onleesbaar
   worden. Deze regel moet gelden wanneer die stand ook maar optreedt. */
.header .header-belknop:hover .header-belknop__label,
.header .header-belknop:hover .header-belknop__nummer,
.header .header-belknop:focus .header-belknop__label,
.header .header-belknop:focus .header-belknop__nummer {
    color: #000 !important;
}

.header .header-belknop__nummer {
    font-weight: 700;
    white-space: nowrap;
}

.header .container, .header .logo_slider {
    z-index: 1;
    position:relative;
}
.header .logo_slider_container {
    min-height:130px;
} 

.header .logo_slider  {
    padding-top:100px;
    max-width:1350px;
    margin:auto;
    max-height:130px;
    display:none;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;    

}
.header .logo_slider.visible {
    display:block;
    opacity:1;
}
.header .logo_slider .slick-list {
    overflow:visible;
}
.header .logo_slider .slick-list div img {
    max-width:80%;
    max-height:35px;
    margin:auto;
}

.acf-block-preview .logo_slider {
    display:flex;
}
.acf-block-preview .logo_slider div {
    width:200px;
    text-align:center;
}

.line-animation-text {
    opacity:0;
}
.line-animation-text .word {
    opacity:0;
    transform: translatey(20px);
}
@media all and (max-width:768px) {
   .header .image_background:after {
        background: rgb(27, 23, 172);
        background: -moz-linear-gradient(180deg, rgba(27,23,172,0.2) 0%, rgba(16,13,49,1) 70%, rgba(16,13,49,1) 100%);
        background: -webkit-linear-gradient(180deg, rgba(27, 23, 172, 0.2) 0%, rgba(16, 13, 49, 1) 70%, rgba(16, 13, 49, 1) 100%);
        background: linear-gradient(180deg, rgba(27, 23, 172, 0.2) 0%, rgba(16, 13, 49, 1) 70%, rgba(16, 13, 49, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1b17ac",endColorstr="#100d31",GradientType=1);
        position: absolute;
        top: 0;
        left: 0px;
        height: 100%;
        width: 100%;
    }
    .header p {
        font-size: 16px;
        line-height:24px;
    }
    .header .header-knoppen {
        gap:10px;
    }

    /* Volle breedte op mobiel: makkelijk te raken, en de knop valt niet weg
       naast de andere twee. */
    .header .header-belknop {
        display: flex;
        width: 100%;
        justify-content: center;
    }
}