@charset "UTF-8";
/* CSS Document */

.white {color:#ffffff;}
.grijs {color:#4d4d4d;}
.lgrijs {color:#999999;}
.oranje {color:#ee7925;}
.loranje {color:#feeee1;}
.bg-wit {background-color:#fff;}
.bg-oranje {background-color:#ee7925;}
.bg-loranje {background-color:#feeee1;}
.bg-blauw {background-color:#19337a;}
.bg-lblauw {background-color:#d9d9eb;}
.blauw {color:#19337a;}

.bg-blauw-gradient {background: #19337A;
background: linear-gradient(180deg, rgba(25, 51, 122, 1) 0%, rgba(13, 28, 66, 1) 100%);}

.bg-oranje-gradient {background: #EE7925;
background: linear-gradient(180deg,rgba(238, 121, 37, 1) 0%, rgba(212, 88, 0, 1) 100%);}


#maintop {background-color:#fff;height:130px;right:0px;left:0px;position: fixed;z-index: 10;  transition: all 0.3s ease;}
#verloop {position:fixed; top:130px; z-index:1000;transition: all 0.3s ease;}
#top {opacity:1;z-index:20000;  transition: all 0.3s ease;}

#logo {width: 120px;  transition: all 0.3s ease;}

/* wanneer gescrolled */
#mainNavbar.shrink #maintop {height:90px;}
#mainNavbar.shrink #verloop {top:90px;}
#mainNavbar.shrink #top {opacity:0;z-index:0;}
#mainNavbar.shrink #logo {width: 60px;}

.dropdown-item:active {background-color:#ee7925 !important;} 

.page-item.active .page-link { background-color:#ee7925; border-color: white; color:white;}
.page-item .page-link { background-color:#dae2f0; border-color:white; color:#4d4d4d;}
.page-link a { color:white;}


.nav-link {color:#4d4d4d;font-size:20px; text-transform:uppercase;font-weight:500;margin-right:20px;}

.btn-oranje {background-color:#ee7925;border-radius:25px;color:#fff;padding:10px 30px;}
.btn-oranje:hover {background-color:#19337a;color:#fff;}
.btn-blauw {background-color:#19337a;border-radius:25px;color:#fff;padding:10px 30px;}
.btn-blauw:hover {background-color:#ee7925;color:#fff;}

.btn-outline-grijs {border:2px solid #999999;border-radius:25px;color:#4d4d4d;padding:10px 20px;}
.btn-outline-grijs:hover {border:2px solid #ee7925;color:#4d4d4d;}
.btn-outline-oranje {border:2px solid #ee7925;border-radius:25px;color:#ee7925;padding:10px 20px;}
.btn-outline-oranje:hover {border:2px solid #19337a;color:#4d4d4d;}
.btn-outline-blauw {border:2px solid #19337a;border-radius:25px;color:#19337a;padding:10px 20px;}
.btn-outline-blauw:hover {border:2px solid #ee7925;color:#19337a;}
.btn-outline-wit {border:2px solid #fff;border-radius:25px;color:#fff;padding:10px 20px;}
.btn-outline-wit:hover {border:2px solid #ee7925;color:#fff;}

.dropdown-menu {min-width: 5rem;background-color:#fff}
	
.header-afb {position: relative; background-position:center; background-size:cover; height: 800px; width: 100%;}

.list-group-item.active { background-color: #ee7925; border-bottom: 0;}

#headerCarousel .carousel-item img {  height: 1000px;object-fit: cover;}
.carousel-inner .carousel-item > img {
  -webkit-animation: thing 20s;
  -o-animation: thing 20s;
  animation: thing 20s; 
}

.carousel-blokje {background-color:#fff; padding:30px; display:inline-block; border-radius:20px; max-width:50%;}

@keyframes thing {
  from { transform: scale(1, 1); }
  to { transform: scale(1.2, 1.2); }
}

a {color:#ee7925;}
a:hover {color:#19337a;}
a.white {color:#fff;}
a.white:hover {color:#ee7925;}
a.white-hover {color:#fff;}
a.white-hover:hover {color:#fff}
h1 {font-size:50px;line-height: 50px; color:#19337a}
h2 {font-size:30px;line-height: 40px;color:#19337a}
h3 {font-size:20px;color:#19337a}

.groter-font {font-size:48px;line-height:48px;}


.lead {font-weight: 700;padding-bottom:40px;}

.anchored {
    scroll-margin-top: 250px;
}

.cricket-background {
    position:absolute; opacity:0.2; left:0;right:0; top:0; bottom:0;background-size:cover;background-position:center;z-index:0;}

.bovenruimte {padding-top:750px;}

.scroll-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.6s ease-out;
}

.scroll-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.6s ease-out;
}

.scroll-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.scroll-in-left.visible,
.scroll-in-right.visible,
.scroll-in-up.visible {
  opacity: 1;
  transform: translate(0, 0);
}

.max img{
    max-width: 100% !important; 
    height:auto !important; 
}

.afb-link {
  overflow: hidden;
  border-radius: 20px;
  width: 100%;
  height: 250px;
  position: relative;
}

.afb-link-groot {
  overflow: hidden;
  border-radius: 20px;
  width: 100%;
  height: 300px;
  position: relative;
}
.afb-zoom {
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.afb-link:hover .afb-zoom {
  transform: scale(1.1);
}
.afb-link-groot:hover .afb-zoom {
  transform: scale(1.1);
}
/* Voor de grotere bovenste afbeelding */
.col-md-6 .afb-link {
  height: 400px;
}

.accordion-button {
color: #19337a;background-color: #d9d9eb;
}
.accordion-button:not(.collapsed) {
    color: #fff;background-color: #19337a;}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sponsor {height:60px;}

@media (max-width: 1600px) {
#headerCarousel .carousel-item img {  height: 800px; }
	.bovenruimte {padding-top:550px;}
}
@media (max-width: 1200px) {
#headerCarousel .carousel-item img {height: 600px; }
	.bovenruimte {padding-top:350px;}

	h1 {font-size:30px;line-height: 30px;}
	h2 {font-size:20px;line-height: 30px;}
	h3 {font-size:16px;}

	.groter-font {font-size:40px;line-height:40px;}

	.navbar-toggler {margin-top:0px;}

	.navbar-collapse {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    width: auto; /* Pas aan indien gewenst */
    z-index: 9999;
    padding: 1rem;
	box-shadow: -3px 3px 10px #ccc;
    border-radius: 20px;
	margin-top: -20px;
  }

  .navbar-nav {
    flex-direction: column;
    align-items: flex-end; /* Rechts uitlijnen */
  }
	.dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
  }
}
@media (max-width: 767px) {
	.carousel-blokje {padding:15px; display: block; border-radius:10px; max-width:100%;}
	h1 {line-height: auto;}
		.groter-font {font-size:30px;line-height:30px;}
	.sponsor {height:40px;}



}

.cookie-banner {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  max-width: 380px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02);
  z-index: 9999;
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.cookie-content p {
  margin: 0 0 1rem 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #374151;
}

.cookie-buttons {
  display: flex;
  gap: 0.625rem;
}