/*
 * Custom CSS - www.studiovanzwet.nl
 * 
 *     (  )   (   )  )
 *      ) (   )  (  (
 *      ( )  (    ) )
 *      _____________
 *     <_____________> ___
 *     |             |/ _ \
 *     |               | | |
 *     |               |_| |
 *  ___|             |\___/
 * /    \___________/    \
 * \_____________________/
 * 
 * Let's turn coffee (or another beverage) into website code.
 *
 */


:root {
    
    --blauw: rgb(0,71,153);
    --geel: rgb(255,237,0);
    
}


.svz .lang-item span {visibility: hidden; display: none;}
.svz .lang-item img {width: 25px!important; height:17px!important;}
.svz {font-family: "Montserrat", sans-serif;}

.svz .bg-blauw {background-color: var(--blauw); color: #FFF;}
.svz .bg-blauw a {color: #FFF;}

.svz .btn-blauw {background-color: var(--blauw); color: #FFF;}

.svz .img-responsive {width: 100%!important; height: auto;}
.svz .img-cover {width: 100%; height: 100%; object-fit: cover;}


.navbar-toggler .navbar-toggler-icon:before {
font-family: "Font Awesome 6 Free";
content: "\f00d"; 
font-size: 2rem;
font-weight: 900;
}

.navbar-toggler.collapsed .navbar-toggler-icon:before {
content: "\f0c9";
font-weight: 900;
}

.navbar-toggler, .navbar-toggler:active, .navbar-toggler:hover, .navbar-toggler:link {border: none; outline:0; outline: none;}
.navbar-toggler:focus {outline:0 !important; box-shadow: none !important;}
.navbar-toggler-icon { background-image: none!important; }



.svz .navbar-brand {
position: relative;
left: 50%;
display: block;
transform: translateX(-50%);
width: 130px;
height: 130px;
}

.navbar-brand img {
  width: 130px;
}



.btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none;
}

@media screen and (min-width: 992px) {
   
.svz .lang-item span {visibility: hidden; display: none;}
    
    
.svz .dropdown a:focus, .svz .dropdown a:active {border: none; outline: none !important; }
.svz .dropdown-item.active, .svz .dropdown-item:active {
/*color: #fff;*/
text-decoration: none;
background-color: var(--blauw);
    color: #FFF;
}


 .svz  .navbar-brand img {
  width: 150px;
}
 
	.svz .navbar-brand {height:150px;}
	
	.svz .navbar.sticky-top {
        min-height: 160px; /* 10px extra speling */
    }
	
}


/* image-marquee */

.svz-marquee-wrapper {
  overflow: hidden;
  width: 100%;
        margin-bottom: 0.5rem;
}

.svz-marquee-track {
  display: flex;
  width: max-content; /* voorkomt wrapping */
  animation: marquee 30s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
      transition: animation-duration 0.5s ease;
}

.svz-marquee-images {
  display: flex;
}

.svz-marquee-images img {
  height: 220px;
  width: auto;
  margin-right: 0.5rem;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Pauzeer bij hover */
.svz-marquee-wrapper:hover .svz-marquee-track {
  animation-play-state: paused;
}



/* streamers */

.streamer {font-size: 1.5vw; display: flex; align-items: center;  position: absolute; width: 25vw; height: 100%; color: #fff; top: 0; z-index: 5; padding: 20px; 
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Vloeiende overgang */
    opacity: 0; /* Begin onzichtbaar */ }

.links {
    text-align: right; 
left: 0; 
    transform: translateX(-100%);
}

.rechts {
    right: 0; 
    transform: translateX(100%);
}

/* 2. De Actieve Stijl (De div is zichtbaar en in positie) */
.streamer.toon {
    opacity: 1; /* Wordt zichtbaar */
    transform: translateX(0); /* Komt in beeld */
}

.svz h1, .svz h2 {color: var(--blauw)}