/* cmsms stylesheet: buddy013_v1.0.1-vars modified: woensdag 4 november 2026 14:47:03 */
:root {
  font-size: 16px;
}

@charset "utf-8";
/* ==================================================
  Main vars CSS Document - CMS Template Buddy
  Template No.: 013
  Version 1.0.1 / for CMSMS 2.2.10+
  
  www.cmstemplatebuddy.com
================================================== */
:root {--color1-hex-color: #ffa726;--color1-rgb-color: 255, 167, 38;--color2-hex-color: #469fd5;--orange-hex-color: #ffa726;--red-hex-color:    #fa2f20;--blue-hex-color:   #469fd5;--lgreen-hex-color: #2ffb1e;--dgreen-hex-color: #4db6ac;--dgreen-rgb-color: 77, 182, 172;--lgrey-hex-color:  #f6f6f6;--dgrey-hex-color:  #8a8a8a;--lgreen-bg-color:     #edf7f6;--lgreen-bg-rgb-color: 237, 247, 246;--lorange-bg-color:    #fff6e8;--lorange-bg-rgb-color: 255, 246, 232;--lgrey-bg-color:      #f6f6f6;--gradient--green-to-transparent: -150deg, #469fd5 15%, #469fd590 50%, #469fd520 65%, #469fd500 85%;}/* ReadSpeaker button */.rs_addtools .rsbtn_play, .rsbtn .rsbtn_play {background-color: var(--color2-hex-color) !important;border-color: var(--color2-hex-color) !important;color: #fff !important;border-radius: .2rem  !important;}.rs_addtools .rsbtn_play .rsbtn_left .rsbtn_text::after, .rsbtn .rsbtn_play .rsbtn_left .rsbtn_text::after,.rs_addtools .rsbtn_play .rsbtn_left .rsbtn_text::before, .rsbtn .rsbtn_play .rsbtn_left .rsbtn_text::before,.rs_addtools .rsbtn_play .rsbtn_left .rsbtn_text span, .rsbtn .rsbtn_play .rsbtn_left .rsbtn_text span {color: #fff !important;}.rs_addtools .rsbtn_play .rsbtn_right, .rsbtn .rsbtn_play .rsbtn_right {border-color: #fff !important;color: #fff !important;}
/* cmsms stylesheet: buddy013_v1.0.1-main modified: woensdag 4 november 2026 14:47:03 */
@charset "utf-8";
/* ==================================================
  Main CSS Document - CMS Template Buddy
  Template No.: 013
  Version 1.0.1 / for CMSMS 2.2.10+ 
  www.cmstemplatebuddy.com
  See our Copyrights page
================================================== */

/* DEFINE MAIN COLOR HERE */

/* Common 
================================================== */

span.accesskey {
  text-decoration: none;
}

.accessibility {
  position: absolute;
  top: -999em;
  left: -999em;
}

dfn {
  position: absolute;
  left: -1000px;
  top: -1000px;
  width: 0;
  height: 0;
  overflow: hidden;
  display: inline;
}
dl, dt, dd, ol, ul {
  margin: 0;
  padding-left: 1rem;
}
::selection {
  background: #ffa726;
  color: #FFF;
  text-shadow: none;
}
::-moz-selection {
  background: #ffa726; /* Firefox */
  color: #FFF;
  text-shadow: none;
}
::-webkit-selection {
  background: #ffa726; /* Safari */
  color: #FFF;
  text-shadow: none;
}
:active,
:focus { outline: none !important; }

/* Typography 
================================================== */

body {
  font-size: 1rem;
  font-weight: 400;
  line-height: 160%;
  font-family: 'Source Sans 3', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: #333;
}



.home-title {
  margin-bottom: 60px;
  text-align: center;
}
.home-title:after {
  display: block;
  height: 2px;
  width: 50px;
  content: '';
  margin: 30px auto 0;
  background-color: #ffa726;
}

p,
pre,
ul,
ol,
dl,
dd,
blockquote,
address,
table,
fieldset,
form { margin-bottom: 30px; }

small { font-family: 'Source Sans 3', sans-serif; }

p {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

a {
	text-decoration: none !important;
	color: #ffa726;
}

a:hover { color: var(--color2-hex-color); }

a img { border: none; }

img { max-width: 100%; }

iframe { border: none !important; }

.error_message { color: red; }

.textCenter { text-align: center; }

.noScroll { overflow: hidden; }

.subtitle {
    display: block;
    margin: 16px 0 6px 0;
    text-transform: initial;
    font-family: 'Roboto Slab', Arial, Helvetica, sans-serif;
    font-style: italic;
    font-weight: 400;
    color: #8a8a8a;
    letter-spacing: 0;
    line-height: 120%;
}
.overflow-x-auto {
  overflow-x: auto !important; 
}

/* Layout 
================================================== */

.wrapper {
  position: relative;
	float: none;
	width: 100%;
	margin: 0;
	background-color: #FFF;	
}

header {
  width: 100%;
  z-index: 1000;
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #FFF;
  border-bottom: 1px solid rgba(0,0,0,.1);
  -webkit-transition: all .3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

header .container-fluid { padding: 0 15px; }

.content-wrapper { padding: 40px 0; }

section.content { padding: 30px 0; }

section.grey { background-color: #f6f6f6; }

/* Header smaller (page scroll) */

header.header-smaller {
  height: 60px;
  box-shadow: 0 0 10px rgba(0,0,0,0.12);
  background-color: #FFF;
}
.header-smaller .logo {
  top: 25px;
  /* background-color: rgba(255,255,255, 1); */
}
.header-smaller .logo a img {
  height: 60px;
}

.header-smaller .main-title {
  margin-top: 60px;
}

.header-smaller .search-trigger {
  height: 60px;
}

.header-smaller .search-trigger i {
  top: 37%;
}

.header-smaller .search-input form {
  height: 60px;
}

.home-heading {
  padding-bottom: 20px;
  margin-bottom: 40px;
  position: relative;
}


.home-heading:after {
  display: block;
  height: 2px;
  width: 50px;
  content: '';
  bottom: 0px;
  position: absolute;
  margin-left: -25px;
  left: 50%;
  background-color: #ffa726;
}

.home-heading span {
    display: block;
    text-align: center;
    font-weight: 300;
    color: #777;
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.main-menu {
  margin-right: 50px;
  opacity: 1;
}

.main-title {
	position: relative;
	padding: 25px 0;
	background-color: #F5F5F5;
  border-bottom: 1px solid #EEE;
  margin-top: 60px;
  -webkit-transition: all .3s ease;
  -ms-transition: all 0.3s;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
/*
.main-title .topGradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.2)
}
*/
.main-title .main-subtitle {
  display: block;
  margin-top: 10px;
  font-weight: 700;
  color: rgb(68, 68, 68)!important;
  font-size: 1.3rem;
  font-family: 'Roboto Slab', Arial, Helvetica, sans-serif;
  text-shadow: 0 0 5px #fff;
}

.main-title.parallax {
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
  padding: 120px 0;
  transition: 0s linear;
  transition-property: background-position;
}
@media (min-width: 768px) {
.main-title .main-subtitle {
    font-size: 1.4rem;
  }
  .main-title.parallax {
    padding: 120px 0;
  }
}


.main-title--dark h1,
.main-title--dark span,
.main-title--dark .main-subtitle,
.main-title--dark .breadcrumbs,
.main-title--dark .breadcrumb,
.dark, .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6, .dark p, 
.dark .video-caption h2, .dark .video-caption h3, .dark .scroll-down-arrow, .scroll-down-arrow.dark {
  color: rgba(255,255,255,0.9);
}

.dark .home-title:after {
  background-color: rgba(255,255,255,.9);
}

.main-title.margin-smaller {
  margin-top: 60px;
}

/* Footer */

footer {
  background-color: #ECECEC;
  border-top: 4px solid rgba(0,0,0,0.2);
  line-height: 1.8;
  font-size: 0.9rem;
}

footer a {
  color: #bdbdbd;
  border-bottom: 1px dotted #666;
}

footer a:hover {
  color: #eee;
  border-bottom: 1px dotted #eee;
}

.footer-big {
  padding: 40px 0;
}

.footer-small {
  padding: 40px 0;
  background-color: #DCDCDC;
}

footer.dark {
  background-color: #333;
  color: #CCC;
  border-top-color: rgba(0,0,0,0.2);
}

footer.dark .footer-small {
  background-color: rgba(0,0,0,0.2);
  color: rgba(255,255,255,0.3);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

.feater-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  margin-bottom: 25px;
}

.feature-icon i {
  font-size: 2.8rem;
  color: #ffa726;
}

.feature-content, .feature-content p {  
  line-height: 1.8;
}

.footer__contact-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  text-align: center;
  gap: 15px;
}
.footer__contact-item a,
.footer__contact-item span {
  font-size: 1.1rem;
}
.footer__contact-item .icon {
  display: flex;
  justify-content: center;
  align-items: end;
  min-height: 42px;
}
.footer__contact-nav ul {
  font-size: 1.1rem;
  float: right;
  padding: 2rem 0 0;
}


/* Logo */

.logo {
	position: relative;
	float: left;
	font-family: 'Raleway', sans-serif;
	font-size: 36px;
	line-height: 100%;
  margin-right: 40px;
  padding-right: 30px;
  margin-right: 30px;
  border-right: 1px solid rgba(0,0,0,.1);
  opacity: 1;
}

.logo a {
	display: block;
	color: #000;
}

.logo a img {
	display: block;
  max-width: 100%;
  height: 60px;
  -webkit-transition: all .3s ease;
  -ms-transition: all 0.3s;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.logo a.standard-logo { display: block; }
.logo a.retina-logo { display: none; }

.logo img.logo-default { display: block; }
.logo img.logo-inverse { display: none; }
.logo.dark img.logo-default { display: none; }
.logo.dark img.logo-inverse { display: block; }

.header-smaller .logo img.logo-default { display: block !important; }
.header-smaller .logo img.logo-inverse { display: none !important; }

/* Breadcrumbs */

.breadcrumbs	{
  display: inline-block;
	margin: -19px 0 0 0 !important;
	background-color: transparent !important;
	padding: 0 !important;
	font-size: 0.8rem;
}

.breadcrumb {
	margin-bottom: 0;
	background-color: transparent;
  padding: 8px 10px;
  display: inline-block;
}

.breadcrumb-text {
  font-size: 0.8rem;
	margin-left: 6px;
}

.home-parallax {
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
  min-height: 500px;  
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
}

.home-parallax h3 {
  font-size: 2rem;
}

/* Search */

.search-wrapper {
  position: absolute;
  top: 0;
  right: 70px;
}

.search-trigger {
	position: relative;
	display: block;
	width: 70px;
	height: 60px;
  color: #333;
  z-index: 10;
  text-align: center;
  border-left: 1px solid rgba(0,0,0,.1);
	-webkit-transition: all .3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.search-trigger:hover {
  color: #666;
}

.search-trigger i {
  position: absolute;
  top: 37%;
  right: 40%;
	text-shadow: none;
}

.search-input form {
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  padding: 0 15px;
  margin: 0;
  z-index: -2;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.search-input form input {
  box-shadow: none !important;
  pointer-events: none;
  border-radius: 0;
  border: 0;
  outline: 0 !important;
  font-size: 1.5rem;
  padding: 10px 80px 10px 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  color: #333;
  font-weight: 700;
  margin-top: 0 !important;
  font-family: 'Roboto Slab', sans-serif;
  letter-spacing: 1px;
}

.search-trigger i.fa-times, 
.show-search i.fa-search,
.show-search .logo, 
.show-search .main-menu,
.show-search .mobile-nav-trigger { opacity: 0; }

.show-search i.fa-times, 
.show-search .search-input form { opacity: 1; }

.show-search .search-input form { z-index: 9; }

.show-search i.fa-times { z-index: 11; }

.show-search .search-input form input {
    pointer-events: auto;
}

.show-search .search-wrapper {
  right: 0;
}

/* To top link, shows on scroll */
.totoplink a	{
  display: none;
  z-index: 999; 
  position: fixed;
  right: 20px;
  bottom: 20px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: rgba(0,0,0,.3);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#page-registratie .totoplink a {
  right: 80px;
}
#page-registratie .grecaptcha-badge {
  z-index: 999999;
}

.totoplink i {
  font-size: 1.3rem;
	color: white;
}
.totoplink a:hover	{
  background-color: #ffa726;
}

/*
 * Swiper 4.5.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * http://www.idangero.us/swiper/
 *
 * Copyright 2014-2019 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: February 22, 2019
================================================== */

.slider {
  position: relative;
  margin-top: 60px;
  -webkit-transition: all .3s ease;
  -ms-transition: all 0.3s;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.slider.margin-smaller {
  margin-top: 60px;
}

.slider .error_message {
  margin-top: 150px;
  text-align: center;
}

.swiper-container {
	width: 100%;
	height: 500px;
	overflow: hidden;
}

.slider-fullscreen .slider {
  height: 100vh;
  margin-top: 0;
}

.slider-fullscreen .video-container video {
  margin-top: 0;
}

.slider-fullscreen .swiper-container {
  height: 100%;
}

.slider-fullscreen header {
  background-color: transparent;
}

.slider-fullscreen header.header-smaller {
  background-color: #FFF;
}

.slider-fullscreen header.dark {
  border-bottom: 1px solid rgba(255,255,255,.25);
}

.slider-fullscreen header.dark:not(.header-smaller) .search-trigger {
  border-left: 1px solid rgba(255,255,255,.25);
  color: white;
}

.slider-fullscreen header.dark:not(.header-smaller) .logo {
  border-right: 1px solid rgba(255,255,255,.25);
}

.slider-fullscreen header.dark:not(.header-smaller) .search-input form input,
.slider-fullscreen header.dark:not(.header-smaller) .search-input form input::placeholder {
  color: white;
}

.swiper-slide {
  text-align: center;
  font-size: 1.5rem;
  background: #f2f2f2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
  margin: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.slider-caption,
.video-caption {
  font-weight: 300;
  line-height: 1.4;
  opacity: 1;
}


.slider-caption h3,
.video-caption h3 {
  display: none;
  -webkit-animation-delay: .5s;
	-moz-animation-delay: .5s;
	animation-delay: .5s;
  text-shadow: 0 0 15px rgba(0,0,0,.5);
}

.slider-caption h3 {
  font-weight: 700;
  font-family: 'Roboto Slab', Arial, Helvetica, sans-serif;
  z-index: 1;
  position: relative;
  color: #eee;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #333;

  text-shadow: 0px 0px 20px #000;
  letter-spacing: 2px;
}
.swiper-next, .swiper-prev {
  position: absolute;
  top: 50%;
  left: 0;
  cursor: pointer;
  z-index: 10;
  margin-top: -26px;
  background-color: rgba(0,0,0,0.15);
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 0 3px 3px 0;
  -webkit-transition: background-color .25s ease-in-out;
  -o-transition: background-color .25s ease-in-out;
  transition: background-color .25s ease-in-out;
}

.swiper-next {
  left: auto;
  right: 0;
  border-radius: 3px 0 0 3px;
}

.swiper-next:hover, .swiper-prev:hover {
  background-color: rgba(0,0,0,0.45);  
}

.swiper-next i, .swiper-prev i {
  line-height: 50px;
  width: 34px;
  height: 52px;
  color: #DDD;
  color: rgba(255,255,255,0.6);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
  font-size: 2.1rem;
  text-align: center;
  margin-left: 7px;
  -webkit-transition: color .25s ease-in-out;
  -o-transition: color .25s ease-in-out;
  transition: color .25s ease-in-out;
}

.swiper-next:hover i, .swiper-prev:hover i {
  color: #F6F6F6;
  color: rgba(255,255,255,.95);
}

.swiper-next i {
  margin-left: 12px;
}

.btn-slider {
  display: none;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 2px;
  border: none;
  opacity: 1;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.4);
  background-color: #ffa726;
  color: white;
  -webkit-transition: opacity .15s ease-in-out;
  -o-transition: opacity .15s ease-in-out;
  transition: opacity .15s ease-in-out;
  -webkit-animation-delay: .7s;
	-moz-animation-delay: .7s;
	animation-delay: .7s;
}
.btn-slider:hover,
.btn-slider:focus {
  color: white;
  opacity: 0.4;
}
.btn-slider:active {
  box-shadow: inset 0 2px 0 rgba(0,0,0,0.4);
}

/* Portfolio detail swiper gallery */
.swiper-detail-container {
  width: 100%;
  height: 300px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
.gallery-top .swiper-slide {
  background-size: cover;
  background-position: center;
}
.gallery-top {
  height: 300px;
  width: 100%;
}
.gallery-thumbs {
  height: 100px;
  box-sizing: border-box;
  padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}

/*
 * jQuery Superfish Menu Plugin
 * Copyright (c) 2013 Joel Birch
 *
 * Dual licensed under the MIT and GPL licenses:
 *  http://www.opensource.org/licenses/mit-license.php
 *  http://www.gnu.org/licenses/gpl.html
 ================================================== */

/*** ESSENTIAL STYLES ***/

.sf-menu, .sf-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-menu li {
  position: relative;
}

.sf-menu ul {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  width: 220px;
  background-color: #FFF;
  box-shadow: 0px 13px 42px 11px rgba(0, 0, 0, 0.05);
  border-top: 4px solid #ffa726;
  height: auto;
  z-index: 199;
  margin: 0;
}

.sf-menu > li {
  float: left;
}

.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
  display: block;
}

.sf-menu a {
  display: block;
  position: relative;
}

.sf-menu ul ul {
  top: -4px !important;
  left: 100%;
}

/*** Menu link ***/

.sf-menu a {
  padding: 10px 15px;
  text-decoration: none;
  zoom: 1; /* IE7 */
  color: #666;
  font-size: 0.8rem;
  letter-spacing: 0;
  font-weight: 600;
  text-transform: uppercase;
  font-family: 'Source Sans 3', sans-serif;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  text-shadow: none;
}

.sf-menu a.menuactive {
  color: #ffa726 !important;
  font-weight: bold;
}

.sf-menu a:hover,
.sf-menu .sfHover > a {
  color: #ffa726 !important;
}

.sf-menu li li a:not([href]):not([tabindex]), 
.sf-menu li li li a:not([href]):not([tabindex]) {
  color: #666;
}

/*** first level ***/

.sf-menu > li > a {
  font-size: 1rem;
  font-weight: bold;
  font-family: 'Roboto Slab', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 39px 16px;
  line-height: 22px;
  color: #444;
}

.header-smaller .sf-menu > li > a {
  padding: 19px 16px;
  color: #444;
}

.header-smaller .sf-menu > li > a:hover {
  color: #ffa726;
}

.header-smaller.dark .sf-menu > li > a {
  color: #444;
}

/*** dark background ***/

.dark .sf-menu > li > a {
  color: white;
}

.dark .sf-menu > li > a:hover {
  color: #ffa726;
}

.sf-menu ul li {
  background-color: rgba(255,255,255,.97);
}

.sf-menu ul li:first-child {
  border-top: none;
}

.sf-menu ul ul li {
  background-color: rgba(255,255,255,.97);
}

.sf-menu li:hover,
.sf-menu li.sfHover {
  /* only transition out, not in */
  -webkit-transition: none;
  transition: none;
}

.sf-menu li.sectionheader > a,
.sf-menu .sectionheader {
  cursor: default;  
}

.sf-menu li.separator hr {
  border-top: 1px solid #777;
}

/*** arrows (for all except IE7) **/

.sf-arrows .sf-with-ul {
  padding-right: 2.2em !important;
  *padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}

/* styling for both css and generated arrows */

.sf-arrows .sf-with-ul:after {
  content: "\f107";
  position: absolute;
  top: 50%;
  right: 1em;
  margin-top: -3px;
  width: 32px;
  font-size: 0.9rem;
  display: inline-block;
  text-align: right;
  font: normal 14px/.5 FontAwesome;
}

/* styling for right-facing arrows */

.sf-arrows ul .sf-with-ul:after {
  content: "\f105" !important;
}

.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
  border-top-color: #333; /* IE8 fallback colour */
}

.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
  border-left-color: #333;
}

@media screen and (max-width: 1280px) {
  .sf-menu > li:last-child ul ul {
    left: -100%;
  }
}

/*** Mobile navigation ***/

section.mobile-navigation {	
  position: fixed;
  padding: 0;
  top: 60px;
  bottom: 0;
  overflow-y: auto;
  z-index: 10000;
  width: 100%;
  display: none;
}

.mobile-nav {
  display: block;
  list-style: none; 
  margin: 0;
  padding:10px 6px;
  background-color: #6c757d;
  width: 100%;
}

.mobile-nav li {
  margin: 0;
  padding: 0;
  float: none;
}

.mobile-nav li a {
  width: 100%;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  font-family: 'Source Sans 3', sans-serif;
  padding: 7px 10px;
  display: block;
  color: #fff;
}

.mobile-nav li a.menuactive {
  color: #ffa726;
}

.mobile-nav li a:hover {
  text-decoration: none;
  background-color: #2c3e50;
}

.mobile-nav li a .sectionheader {
  color: #aaa;  
}

/* second level */

.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav ul li a {
  padding-left: 30px;
}

/* third level */

.mobile-nav ul ul {
  list-style: none;
}

.mobile-nav ul ul li a {
  padding-left: 60px;
}

/*** Footer navigation ***/
.footerNav {
  list-style: none;
  padding-left: 0;
}

.footerNav a {
  color: #aaa;
  border: none;
}

.footerNav a:hover {
  color: #eee;
  border: none;
}

.footerNav .activeparent,
.footerNav .currentpage {
  color: white !important;
}

.footerNav .sectionheader {
  color: #808080;
}

.footerNav li .fa {
  margin-right: 10px;
}

/*** Google map fix ***/

[id^="cggm_map_"] {
	width: 100% !important;
	margin: 0;
}

[id^="cggm_map_"] img {
	max-width: none;
}

/*** Form ***/

.form-group {
  margin: 1rem 0;
}

.form-group label {
  font-family: 'Roboto Slab', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/*** Bootstrap overwrites ***/

.btn {
  border-radius: 0.125rem;
  text-transform: uppercase;
  font-size: 0.9rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

.btn-default {
  color: #ffa726;
}

.btn-light {
  background-color: #DCDCDC;
}

.btn-primary, .btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active {
  background-color: #ffa726;
  border-color: #ffa726;
}

.btn-primary:hover {
  opacity: 0.85;
}

.form-group .btn + .btn {
  margin-left: 8px;
}

/*** CG Calendar ***/

.fc table {
  margin: 0;
}

.fc-event {
  border-radius: 2px !important;
  cursor: pointer;
}

.fc-state-default.fc-corner-left {
  border-top-left-radius: 2px !important;
  border-bottom-left-radius: 2px !important;
}

.fc-state-default.fc-corner-right {
  border-top-right-radius: 2px !important;
  border-bottom-right-radius: 2px !important;
}

.fc-state-default { 
  background-color: #f5f5f5;
  background-image: none !important;
  background-repeat: no-repeat !important;
}

.fc-state-active, .fc-state-down {
  background-color: #6c757d !important;
  border-color: rgba(0,0,0,.5) #6c757d #6c757d #6c757d !important;
  color: white !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0px rgba(0,0,0,.5) !important;
}

.fc-state-disabled {
  cursor: default !important;
}

.fc-basic-view .fc-body .fc-row {
  min-height: 8rem !important;
}

.fc-basic-view .fc-day-number {
  font-size: 1.5rem;
}

.calendar-event {
  background-color: white;
  margin-bottom: 30px;
  padding: 20px;
  border-radius: 1px;
  display: flex;
}

.calendar-event.detail {
  background-color: rgba(255,255,255,.8); 
}

.calendar-list-nav {
  margin-bottom: 20px;
}

.calendar-list .calendar-event {
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.1);
}

.calendar-details {
  margin: 20px 0;
}

.calendar-details-title,
.calendar-summary-title {
  font-weight: 600;
}

.calendar-cur {
  margin: 0 10px;
}

.calendar-date-from {
  font-size: 0.9rem;
  font-family: 'Crete Round', serif;
  color: #aaa;
}

.calendar-event.detail .calendar-date-from {
  color: #888;
}

.calendar-event h1 a,
.calendar-event h2 a,
.calendar-event h3 a,
.calendar-event h4 a,
.calendar-event h5 a,
.calendar-event h6 a {
  color: #333;
}

.calendar-event h1 a:hover,
.calendar-event h2 a:hover,
.calendar-event h3 a:hover,
.calendar-event h4 a:hover,
.calendar-event h5 a:hover,
.calendar-event h6 a:hover {
  color: #ffa726;
}

.calendar-fields {
  max-width: 200px;
  width: 100%;
  margin-right: 20px; 
}

.calendar-fields--detail {
  max-width: 360px;
}

.calendar-with-image .fc h1,
.calendar-with-image .fc h2,
.calendar-with-image .fc h3,
.calendar-with-image .fc h4,
.calendar-with-image .fc h5,
.calendar-with-image .fc h6,
.calendar-with-image .fc th,
.calendar-with-image .fc td,
.calendar-with-image .fc-day-number {
  color: white !important;
}

.calendar-with-image .fc th,
.calendar-with-image .fc td {
  background-color: rgba(255,255,255,.06);
}

.calendar-with-image .fc-state-highlight .fc-day-number {
  color: black !important;
}

/*** Mobile navigation trigger ***/

.mobile-nav-trigger {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 60px;
  text-indent: -9999px;
  border-left: rgba(0,0,0,.1) solid 1px;
  overflow: hidden;
}

.mobile-nav-trigger span {
  position: relative;
  display: block;
}

.mobile-nav-trigger span:before {
  content: "";
  position: absolute;
  left: 24px;
  top: 24px;
  width: 20px;
  height: 3px;
  background: #505050;
  box-shadow: 0 6px 0 0 #505050, 0 12px 0 0 #505050;
}

.mobile-nav-trigger.active {
  background-color: #6c757d;
  border-right: none;
  height: 60px;
}

.mobile-nav-trigger.active span:before {
  background: #fff;
  box-shadow: 0 6px 0 0 #fff, 0 12px 0 0 #fff;
}

.dark:not(.header-smaller) .mobile-nav-trigger {
  border-left: rgba(255,255,255,.25) solid 1px;
}

.dark:not(.header-smaller) .mobile-nav-trigger span:before {
  background: #fff;
  box-shadow: 0 6px 0 0 #fff, 0 12px 0 0 #fff;
}

.grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-gap: 20px;
  margin: 0;
  max-width: 90%;
  margin: 0 auto 20px; 
}
.grid-list__item {
  position: relative;
  z-index: 1;
}

/* FAQs - Toggle - Tabs 
================================================== */

/* FAQs */
.faqs .toggle {
	border-bottom: 1px solid #EEE;
	padding-bottom: 12px;
	margin-bottom: 12px;
}
.faqs .toggle .toggle__tab,
.faqs .toggle .toggle__tab--active,
.faqs .toggle .toggle__content { 
  font-size: 0.9rem; 
}
.faqs .toggle .toggle__tab i {
	top: 1px;
	font-size: 0.9rem;
}
.faqs .toggle .toggle__content { 
  padding-bottom: 4px; 
}

/* Toggle */
.toggle {
	display: block;
	position: relative;
	margin: 0 0 20px 0;
}
.toggle .toggle__tab,
.toggle .toggle__tab--active {
	display: block;
	position: relative;
	line-height: 24px;
	padding: 0 0 0 24px;
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: #444;
	cursor: pointer;
}
.toggle .toggle__tab i {
	position: absolute;
	top: 0;
	left: 0;
	width: 16px;
	text-align: center;
	font-size: 1rem;
	line-height: 24px;
}
.toggle .toggle__tab { 
  font-weight: 600; 
}
.toggle .toggle__tab.no-icon {
  padding: 0;
}
.toggle .toggle__tab i.toggle--open,
.toggle .toggle__tab--active i.toggle--closed { 
  display: none; 
}
.toggle .toggle__tab--active i.toggle--open { 
  display: block; 
}
.toggle .toggle__content {
	display: block;
	position: relative;
	padding: 10px 0 0 24px;
}
.toggle .toggle__content p { 
  margin-bottom: 10px;
}

/* Tabs */
.tabs-filter {
  position: relative;
  margin: 0 0 20px 0;
  list-style: none;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
.tabs-filter li a {
  display: block;
  position: relative;
  padding: 12px 18px;
  font-size: 0.8rem;
  line-height: 15px;
  color: #666;
  border-left: 1px solid rgba(0,0,0,0.08);
}
.tabs-filter li:first-child a {
  border-left: none;
  border-radius: 4px 0 0 4px;
}
.tabs-filter li:last-child a {
  border-radius: 0 4px 4px 0;
}
.tabs-filter li.active a {
  color: #FFF !important;
  background-color: #ffa726;
  margin: -1px 0;
  padding: 13px 18px;
  font-weight: 600;
}
.tabs-filter li a:hover {
  color: #ffa726;
}

/*** 404 page not found
================================================== */
.error-404 {
  display: block;
  font-size: 15rem;
  font-weight: 700;
  color: #DDD;
  line-height: 1;
  letter-spacing: 4px;
}

/*** Captcha
================================================== */
.captchapict {
  margin: 10px 0;
}
.cgbf_input_captcha {
  display: inline-block;
  width: 200px;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  margin: 10px 0;
}
.cgbf_input_captcha:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/*** Video home page
================================================== */
.video-wrapper {  
  position: relative;
	overflow:hidden;
  height: 100vh;
}
.video-container video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translateX(-50%) translateY(-50%);
    margin-top: 60px;
    filter: brightness(70%);
}
.video-caption {
    display: flex;
    flex-direction: column;
    min-height:calc(100vh + 50px);
    justify-content:center;
    align-items:center;
    text-align:center;
    z-index: 2;
    position: relative;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.video-caption h2 {
    font-size: 3.4rem;
    line-height: 120%;
    animation-delay: .3s;
    display: none;
}
.video-caption h3 {
  animation-delay: .5s;
  display: none;
  margin: 0 auto 30px;
}
.scroll-down-arrow {
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -16px;
  width: 32px;
  height: 60px;
  font-size: 2rem;
  text-align: center;
  color: #222;
  z-index: 3;
}

/*** Media Queries
================================================== */

/* Extra small devices (portrait phones, less than 576px) 
No media query for `xs` since this is the default in Bootstrap  */

/* sm : Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .video-caption {
    width: 70%;
  }
}

/* md : Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
  .grid-list {
    grid-gap: 0;
    max-width: 1200px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    margin: 0 auto 40px;
  }
  .content-wrapper { 
    padding: 80px 0;
  }

}

/* lg : Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  header .container-fluid { 
    padding: 0 30px; 
  }
  .search-wrapper {
    right: 0;
  }
  .search-trigger,
  header,
  .logo a img, 
  .search-input form,
  .mobile-nav-trigger {
    height: 100px;
  }
  .slider,
  .main-title {
    margin-top: 100px;
  }
  .main-title {
    padding: 55px 0;
  }

  .search-trigger i {
    top: 41%;
  }
  section.content { 
    padding: 60px 0; 
  }
  .footer-big {
    padding: 80px 0;
  }
  .video-container video {
    margin-top: 100px;
  }
}

/* xl : Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .error-404 {
    font-size: 18.8rem;
  }
}

/* Retina CSS */

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {

	.logo a.standard-logo { display: none; }

	.logo a.retina-logo { display: block; }
}


/* Smoother variant of Animate.css's fadeInUp for the homepage parallax
   title/text: shorter travel distance, eased-out timing, and a slight
   stagger between title and text instead of both animating at once. */
@keyframes smoothFadeInUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: none; }
}
.smoothFadeInUp {
  animation-name: smoothFadeInUp;
  animation-duration: 1.1s;
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  animation-fill-mode: both;
}
.smoothFadeInUp-delay {
  animation-delay: .15s;
}

/* Subtle dark tint over the homepage slider photos, so the caption text
   and the transparent top menu (which overlaps the same image) both stay
   readable regardless of how bright the photo is. The slide already had
   this ::after layer reserved (position/size), just no background. */
.swiper-slide::after { background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 20%, rgba(0,0,0,.28) 100%); z-index: -1; }

.slider-caption { margin-top: 30px; }

/* Decorative cube accent along the right edge of page-header photos,
   reusing the theme's own cubes-right.svg (already used elsewhere on
   .content) - the same idea as the cube motif on asvz.nl's hero images. */
.main-title.parallax::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(/uploads/Buddy013/images/cubes-right-header.svg);
  background-repeat: repeat-y;
  background-position: center right;
  background-size: max(15%, 80px) auto;
  z-index: 0;
  pointer-events: none;
}
.main-title .container {
  z-index: 1;
}
/* cmsms stylesheet: buddy013_v1.0.1-custom modified: woensdag 11 november 2026 11:11:47 */

/* Font Awesome 5: the v4-shims map "FontAwesome" to the regular set (few icons);
   point it at the solid set so the old FontAwesome font-family rules keep working. */
@font-face {
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff2") format("woff2"),
       url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff") format("woff");
}
@charset "utf-8";
/* ==================================================
  Custom CSS Document - CMS Template Buddy
  Template No.: 013
  Version 1.0.1 / for CMSMS 2.2.10+
  www.cmstemplatebuddy.com
  See our Copyrights page
================================================== */
.relative {position: relative;}.vertical-center {display: flex;align-items: center;justify-content: center;}.gradient-background {position: absolute;top: 0;left: 0;bottom: 0;right: 0;z-index: 1;opacity: 0.5;}.green-to-transparent-gradient-background {background: linear-gradient(var(--gradient--green-to-transparent)) !important;background: -moz-linear-gradient(var(--gradient--green-to-transparent)) !important;background: -webkit-linear-gradient(var(--gradient--green-to-transparent)) !important;opacity: 1;}.orange-to-transparent-gradient-background {background: linear-gradient(var(--gradient--orange-to-transparent)) !important;opacity: 1;}/* Typography ================================================== */body {font-size: 1.1rem;color: #444;}.feature-content h3 {margin: 10px 0 0;}.text--orange { color: var(--orange-hex-color); }.text--red    { color: var(--red-hex-color); }.text--blue   { color: var(--blue-hex-color); }.text--lgreen { color: var(--lgreen-hex-color); }.text--dgreen { color: var(--dgreen-hex-color); }.text--lgrey  { color: var(--lgrey-hex-color); }.text--dgrey  { color: var(--dgrey-hex-color); }.bg--lgreen  { background-color: var(--lgreen-bg-color); }.bg--lgrey   { background-color: var(--lgrey-bg-color); }.bg--lorange { background-color: var(--lorange-bg-color); }.bg--gradient {background: rgb(var(--lgreen-bg-rgb-color));background: -moz-linear-gradient(0deg, rgba(var(--lgreen-bg-rgb-color),1) 0%, rgba(var(--lgreen-bg-rgb-color),0.5019141445640756) 35%, rgba(var(--lgreen-bg-rgb-color),0) 100%);background: -webkit-linear-gradient(0deg, rgba(var(--lgreen-bg-rgb-color),1) 0%, rgba(var(--lgreen-bg-rgb-color),0.5019141445640756) 35%, rgba(var(--lgreen-bg-rgb-color),0) 100%);background: linear-gradient(0deg, rgba(var(--lgreen-bg-rgb-color),1) 0%, rgba(var(--lgreen-bg-rgb-color),0.5019141445640756) 35%, rgba(var(--lgreen-bg-rgb-color),0) 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--lgreen-bg-color)",endColorstr="var(--lgreen-bg-color)",GradientType=1);}.home-title {margin: 60px 0 0;}.dark .home-title::after {background-color: var(--color1-hex-color);}p.intro {font-size: 1.4rem;line-height: 2.5rem;}p,pre,ul,ol,dl,dd,blockquote,address,table,fieldset,form { margin-bottom: 1rem; }.subtitle {display: inline-block;margin-left: .5rem;}/* Layout ================================================== */header {border-bottom: 1px solid transparent; /* rgba(0,0,0,.1); */}#page-opdrachten section.content { background-color: rgb(210, 226, 232);}section.grey { background-color: var(--lgrey-bg-color); }section.green { background-color: var(--lgreen-bg-color); }.home-parallax::before {position: absolute;content: " ";width: 100%;height: 100%;top: 0;left: 0;background: linear-gradient(var(--gradient--green-to-transparent)) !important;background: -moz-linear-gradient(var(--gradient--green-to-transparent)) !important;background: -webkit-linear-gradient(var(--gradient--green-to-transparent)) !important;}/* Header smaller (page scroll) ================================================== */header.header-smaller {height: 60px;background-color: var(--color2-hex-color);}.home-heading h1,.home-heading h2 {text-align: center;margin: 20px 0;text-transform: uppercase;}.search-wrapper {display: none;}.main-menu {margin-right: 0;}.main-title {background-color: transparent ;border-bottom: 0px solid #EEE;}.feature-icon i {font-size: 4.1rem;}.feature-content p {line-height: 1.8;margin-bottom: .5rem;}.feature-content div {border-top: 1px solid var(--color1-hex-color);padding-top: 20px;margin-top: 20px;}.feature-content div p {font-size: 0.9rem;font-weight: 200;}/* Logo ================================================== */.logo {border-right: 0;top: 1rem;}.header-smaller .logo {top: .6rem;}/* Search ================================================== */.search-trigger {position: relative;display: block;width: 70px;height: 60px;color: #333;z-index: 10;text-align: center;border-left: 0px solid rgba(0,0,0,.1);-webkit-transition: all .3s ease;-ms-transition: all 0.3s ease;-o-transition: all .3s ease;transition: all .3s ease;}#page-home header {background-color: transparent;}#page-home header.header-smaller {background-color: var(--color2-hex-color);}/* CUSTOM ================================================== */#myModal .col-404 {display: none;}section.mobile-navigation {bottom: unset;z-index: 2;}.content li {/*  margin-left: 20px; */}.btn-item {background-color: orange;padding: .5rem 1rem;color: #fff;border-radius: 0.125rem;}.btn-item:hover {color: #444;}.btn-item-outline {background-color: transparent;border: 1px solid #444;padding: .5rem 1rem;color: inherit;border-radius: 0.125rem;}form {margin-bottom: 0;}.input-group > .input-group-append:not(:last-child) > .input-group-text {border-top-right-radius: .25rem;border-bottom-right-radius: .25rem;}.last {margin-bottom: 0;}.control-label.req {position: relative;}.control-label.req::after {bottom: -1px;color: #e74c3c;content: "*";font-size: 2.5em;font-weight: 600;padding-left: 3px;position: absolute;}.feature-icon .subtitle,.feature-icon h5 {margin-left: 3rem;margin-top: 0;}.feature-icon h1 {font-size: 3.8rem;color: #E6AE48;font-weight: 700;height: 3rem;padding: .5rem 0;line-height: unset;}.text-link {-webkit-transition: color 0.3s ease;transition: color 0.3s ease;}.text-link::after {content: "\f105";font-family: 'FontAwesome';-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-style: normal;font-variant: normal;font-weight: normal;text-decoration: none;text-transform: none;text-rendering: auto;color: inherit;font-size: 1rem;margin-left: 5px;-webkit-transition: margin-left 0.3s ease-out;transition: margin-left 0.3s ease-out;}.text-link:hover::after {margin-left: 10px;}.no-break {margin: 0;-webkit-column-break-inside: avoid;        /* Chrome, Safari */page-break-inside: avoid;        /* Theoretically FF 20+ */break-inside: avoid-column; /* IE 11 */display: table;                            /* Actually FF 20+ */}input.form-control::-webkit-input-placeholder,textarea.form-control::-webkit-input-placeholder,.fake-input::-webkit-input-placeholder {color:#acacac}input.form-control:-moz-placeholder,textarea.form-control:-moz-placeholder,.fake-input:-moz-placeholder{color:#acacac}input.form-control::-moz-placeholder,textarea.form-control::-moz-placeholder,.fake-input::-moz-placeholder{color:#acacac}input.form-control:-ms-input-placeholder,textarea.form-control:-ms-input-placeholder,.fake-input:-ms-input-placeholder{color:#acacac}#aanmelden .block-large {padding: 1.5rem;}#aanmelden .block {background-color: inherit;}#aanmelden .right-border {border-right: 0;border-bottom: 1px solid #ddd;padding-bottom: 1rem;}#aanmelden .left-border {border-left: 0;border-top: 1px solid #ddd;padding-top: 1.5rem;}.grey-box-light {background-color: var(--grey-box-light);}.green-box-light {background-color: var(--green-box-light);}.blue-box-light {background-color: var(--blue-box-light);}.orange-box-light {background-color: var(--orange-box-light);}abbr {min-width: 1.5rem;line-height: 2rem;display: inline-block;text-align: center;}/* Alerts */.bs-callout, .quote, .alert {margin: 5px 0;border: 0 solid #eee;border-left-color: #cbdb2a; /* rgb(238, 238, 238); */border-left-width: 5px;border-radius: 0;color: #333;}div.alert.alert-default {color: #383d41;background-color: #e2e3e5;border-color: #ccc;}div.alert {position: relative;}div.alert.alert-success {background-color: #dff0d8;border-color: #d0e9c6;color: #3c763d;}div.alert.alert-success hr {border-top-color: #c1e2b3;}div.alert.alert-success div.alert.alert-link {color: #2b542c;}div.alert.alert-info {background-color: #d9edf7;border-color: #bcdff1;color: #31708f;}div.alert.alert-info hr {border-top-color: #a6d5ec;}div.alert.alert-info div.alert.alert-link {color: #245269;}div.alert.alert-warning {background-color: #fcf8e3;border-color: #f7ecb5;color: #8a6d3b;}div.alert.alert-warning hr {border-top-color: #f7ecb5;}div.alert.alert-warning div.alert.alert-link {color: #66512c;}div.alert.alert-danger {background-color: #f2dede;border-color: #ebcccc;color: #a94442;}div.alert.alert-danger hr {border-top-color: #e4b9b9;}div.alert.alert-danger div.alert.alert-link {color: #843534;}div.alert.alert-success, .bs-callout-success {border-left-color: #94c826;background-color: #eaf4d4;}/*div.alert.alert-success::before {color: #94c826;content: "\f00c";}*/div.alert.alert-info, .bs-callout-info {border-left-color: #51b4d3;background-color: #d9ecf3;}/*div.alert.alert-info::before {color: #51b4d3;content: "\f129";}*/div.alert.alert-warning, .bs-callout-warning {border-left-color: #f5a417;background-color: #fdedd1;}/*div.alert.alert-warning::before {color: #f5a417;content: "\f071";}*/div.alert.alert-danger, .bs-callout-danger {border-left-color: #e74c3c;background-color: #fce0e7;}/*div.alert.alert-danger::before {color: #e74c3c;content: "\f06a";}*/div.alert .close,div.alert .close {position: absolute;top: 10px;right: 15px;}div.alert .close:hover,div.alert .close:focus {color: #333;opacity: 1;}#readspeaker_button1 {position: unset;}#page-opdrachten #readspeaker_button1 {position: absolute;z-index: 99;top: 190px;right: unset;left: 10px;}#page-opdrachten header {background-color: transparent;}#page-opdrachten header.header-smaller {background-color: var(--color2-hex-color);}/*  THEMES GRID */.theme-description {padding: 15px 5px 10px;}.theme-description .theme-title {text-transform: initial;font-size: 1.2rem;font-weight: 600;line-height: 120%;letter-spacing: 0;margin: 0;}.theme-description p {font-size: 0.9rem;color: #777;min-height: 3rem;line-height: 1.5;margin: 0;}.xt_message {background-color: var(--lgreen-bg-color);padding: 2rem;max-width: 80%;}.xt_message .xt_msgtitle {font-size: 1.3rem;font-weight: 600;margin-bottom: .5rem;font-family: 'Roboto Slab', Arial, Helvetica, sans-serif;line-height: 150%;text-transform: uppercase;color: #333;letter-spacing: 1px;}@font-face {font-family: 'default';src: url('/player/css/fonts/default.eot?c38q6t');src: url('/player/css/fonts/default.eot?c38q6t#iefix') format('embedded-opentype'), url('/player/css/fonts/default.ttf?c38q6t') format('truetype'), url('/player/cssfonts/default.woff?c38q6t') format('woff'), url('/player/cssfonts/default.svg?c38q6t#default') format('svg');font-weight: normal;font-style: normal;font-display: block;}.feature-icon {position: relative;}.ev-icon {/* use !important to prevent issues with browser extensions that change fonts */font-family: 'default' !important;speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;/* Better Font Rendering =========== */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.feature-icon .ev-icon {position: absolute;margin-left: -1rem;margin-top: -.5rem;}.feature-icon .ev-icon span {position: absolute;font-weight: 700;font-family: Arial, Helvetica, sans-serif;left: 27px;top: 9px;font-size: 1.3rem;}.ev-icon-medal-empty:before {content: "\e6dd";}.icon-finger-tap::before {content: "\e9c4";}.footer-small p {color: #666;}.footer-small p a {color: #aaa;}.footerNav .activeparent, .footerNav .currentpage {color: #ffa726 !important;}@media (max-width: 769px) {/* Tap targets mobile */.footerNav a {padding: 4px 10px;margin: 1px;}}section.mobile-navigation {z-index: 999;}#page-privacyverklaring .content-wrapper li {margin-left: 1.3rem;padding-left: .7rem;}/* Unsorted List Icons */ul.arrow,ul.doc,ul.pdf {list-style-image: none;}ul.arrow li, ul.doc li, ul.pdf li {list-style-type: none;background-image: none;display: flex;}ul.arrow li::before, ul.doc li::before, ul.pdf li::before {font-family: "FontAwesome";margin-left: 0.2rem;padding-right: .6rem;color: #fff;}/*.footerNav.arrow li.activeparent::before,.footerNav.arrow li.currentpage::before {color: #ffa726 !important;}*/ul.arrow li::before {content: "\f061";}ul.arrow.angle li::before {content: "\f105";}ul.arrow.angle-double li::before {content: "\f101";}ul.arrow.chevron li::before {content: "\f054";}ul.pdf li::before {content: "\f1c1";}ul.doc li::before {content: "\f1c2";}/* === Multi column try-out === */.multi-column-2 {-webkit-column-count: 1; /* Chrome, Safari, Opera */-moz-column-count: 1; /* Firefox */column-count: 1;-webkit-column-gap: 0;   /* Chrome, Safari, Opera */-moz-column-gap: 0;   /* Firefox */column-gap: 0;}.multi-column-2 li {-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */page-break-inside: avoid; /* Firefox */break-inside: avoid; /* IE 10+ */}@media all and (max-width: 768px) {header {border-bottom: rgba(0,0,0,.1) solid 1px;}.logo {top: .6rem;}.home-title::after {content: none;}#readspeaker_button1 {position: absolute;top: -14px;left: unset;right: 20px;}#page-opdrachten #readspeaker_button1 {top: 80px;right: 20px;}}@media (min-width: 769px) {.home-parallax {clip-path: ellipse(150% 100% at 50% 0);}#aanmelden .block-large {padding: 2rem;}#aanmelden .block {padding: 0 2rem;}#aanmelden .right-border {border-right: 1px solid #ddd;border-bottom: 0;padding-bottom: 0;}#aanmelden .left-border {border-left: 1px solid #ddd;border-top: 0;padding-top: 0;}.multi-column-2 {-webkit-column-count: 2; /* Chrome, Safari, Opera */-moz-column-count: 2; /* Firefox */column-count: 2;-webkit-column-gap: 30px; /* Chrome, Safari, Opera */-moz-column-gap: 30px; /* Firefox */column-gap: 30px;}}@media (min-width: 992px) {.footer-big {padding: 80px 0 50px;}section.content {padding: 40px 0 60px;}}

/* Swiper 14: its css sets .swiper-slide to display:block; keep the theme's centred flex slides */
.swiper-container.swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* Cards (cursus overview): .theme-item and its image get 5px rounded corners */
.theme-item,
.theme-image {
  border-radius: 5px;
}

/* /cursussen: the course cards are Bootstrap cards (.card, .card-img-top, .card-body), 4 per row.
   Rounded corners 5px, hover shadow and the image overlay (the theme's rules used .theme-item:hover). */
.portfolio-gallery .card {
  --bs-card-border-radius: 5px;
  --bs-card-inner-border-radius: 4px;
  transition: box-shadow ease-in 0.2s;
}
.portfolio-gallery .card:hover {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
}
.portfolio-gallery .card .theme-image {
  padding: 15px 15px 0;
}
/* Same 15px side padding as the image, so the text never touches the card edge */
.portfolio-gallery .card .card-body {
  padding: 25px 15px 20px;
  border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
}
.portfolio-gallery .card .theme-image img {
  border-radius: 3px;
  width: 100%;
  aspect-ratio: 472 / 391; /* the course images are all 472x391 */
  object-fit: cover;
  margin: 0;
}
/* Overlay: only over the image (inside the padding), blue tint, white round icon that scales in */
.portfolio-gallery .card .theme-image .image-overlay {
  inset: 15px 15px 0 15px;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background-color: rgba(10, 57, 112, 0);
}
.portfolio-gallery .card .theme-image .image-overlay .overlay-icon {
  position: static;
  width: 56px;
  height: 56px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  transform: scale(.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.portfolio-gallery .card .theme-image .image-overlay .overlay-icon i {
  margin: 0;
  font-size: 22px;
  color: #0a3970;
}
.portfolio-gallery .card:hover .theme-image .image-overlay {
  opacity: 1;
  background-color: rgba(10, 57, 112, .55);
}
.portfolio-gallery .card:hover .theme-image .image-overlay .overlay-icon {
  opacity: 1;
  top: auto;
  margin: 0;
  transform: scale(1);
}
.portfolio-gallery .card .theme-title {
  font-size: 1.1rem;
}

/* .pull-left / .pull-right used to come from Font Awesome 4 (removed in FA 5); the theme markup still uses them (e.g. nav.main-menu.pull-right) */
.pull-right { float: right !important; }
.pull-left { float: left !important; }

/* Maximum page width (very wide screens).
   Photo blocks (slider, parallax, page-header photo) and the header content stay at most 1920px wide and
   centred, with small rounded corners once the screen is wider than that. Everything else (coloured
   section backgrounds, footer) stays full width, so there is no hard side edge there. */
:root {
  --page-max-width: 1920px;
}
header .container-fluid {
  max-width: var(--page-max-width);
  margin-left: auto;
  margin-right: auto;
}
.slider,
.home-parallax,
.main-title.parallax {
  max-width: var(--page-max-width);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1921px) {
  .home-parallax,
  .main-title.parallax {
    border-radius: 10px;
  }
  /* the slider starts at the top of the screen: only the bottom corners are rounded */
  .slider {
    border-radius: 0 0 10px 10px;
  }
  /* clip the photos on the inner swiper, so the side cubes below (outside the 1920px slider) are not cut off */
  .slider .swiper-container {
    border-radius: inherit;
    overflow: hidden;
  }
  .wrapper {
    overflow-x: clip;
  }
  /* cube pattern left and right of the slider, as the theme does along the sides of .content */
  .slider::before,
  .slider::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: calc((100vw - var(--page-max-width)) / 2);
    background-repeat: repeat-y;
    background-size: auto;
    pointer-events: none;
  }
  .slider::before {
    right: 100%;
    background-image: url(/uploads/Buddy013/images/cubes-left.svg);
    background-position: left top;
  }
  .slider::after {
    left: 100%;
    background-image: url(/uploads/Buddy013/images/cubes-right.svg);
    background-position: right top;
  }
  /* Page-header photo (.main-title.parallax): its ::after is already the right-hand cube accent, so one ::before spans the whole
     viewport (both cube images) and a mask hides the middle 1920px. */
  .main-title.parallax::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    height: 100%;
    background-image: url(/uploads/Buddy013/images/cubes-left.svg), url(/uploads/Buddy013/images/cubes-right.svg);
    background-position: left top, right top;
    background-repeat: repeat-y;
    background-size: auto;
    -webkit-mask-image: linear-gradient(to right, #000 calc((100vw - var(--page-max-width)) / 2), transparent calc((100vw - var(--page-max-width)) / 2), transparent calc(100vw - (100vw - var(--page-max-width)) / 2), #000 calc(100vw - (100vw - var(--page-max-width)) / 2));
    mask-image: linear-gradient(to right, #000 calc((100vw - var(--page-max-width)) / 2), transparent calc((100vw - var(--page-max-width)) / 2), transparent calc(100vw - (100vw - var(--page-max-width)) / 2), #000 calc(100vw - (100vw - var(--page-max-width)) / 2));
    pointer-events: none;
  }
  /* Home parallax (.home-parallax sits in its own full-width section / block): the same cubes beside it */
  section:has(> .home-parallax),
  ._container:has(> .home-parallax) {
    position: relative;
  }
  section:has(> .home-parallax)::before,
  section:has(> .home-parallax)::after,
  ._container:has(> .home-parallax)::before,
  ._container:has(> .home-parallax)::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: calc((100% - var(--page-max-width)) / 2);
    background-repeat: repeat-y;
    background-size: auto;
    pointer-events: none;
  }
  section:has(> .home-parallax)::before,
  ._container:has(> .home-parallax)::before {
    left: 0;
    background-image: url(/uploads/Buddy013/images/cubes-left.svg);
    background-position: left top;
  }
  section:has(> .home-parallax)::after,
  ._container:has(> .home-parallax)::after {
    right: 0;
    background-image: url(/uploads/Buddy013/images/cubes-right.svg);
    background-position: right top;
  }
  /* Headings on very wide screens: Bootstrap caps them at 1200px, so step up once more */
  .h1, h1 {
    font-size: 3rem;
  }
  .h2, h2 {
    font-size: 2.25rem;
  }
  .display-6 {
    font-size: 2.75rem;
  }
  .h3, h3 {
    font-size: 2rem;
  }
  .h4, h4 {
    font-size: 1.75rem;
  }
  .h5, h5 {
    font-size: 1.375rem;
  }
  .h6, h6 {
    font-size: 1.125rem;
  }
  /* Body text on very wide screens */
  p,
  li {
    font-size: 1.125rem;
  }
  /* Open search bar on very wide screens: the white bar stays full width, but the input and the close button line up with the 1920px page */
  .search-input form {
    padding-left: calc((100% - var(--page-max-width)) / 2 + 15px);
  }
  .show-search .search-wrapper {
    right: calc((100% - var(--page-max-width)) / 2);
  }
  /* "Lees voor" button: left under the slider, in line with the 1920px page, not with the 1320px text column */
  .readspeaker-wrapper .container {
    max-width: var(--page-max-width);
  }
  /* the search button is absolutely positioned against the full-width header: keep it inside the 1920px area */
  header .search-wrapper {
    right: calc(50% - var(--page-max-width) / 2);
  }
}

/* Read-aloud (ReadSpeaker) button: inside the content container instead of against the screen edge */
.readspeaker-wrapper {
  left: 0;
  width: 100%;
  pointer-events: none;
}
.readspeaker-wrapper .rsbtn {
  display: inline-block;
  vertical-align: top;
}
.readspeaker-wrapper .rsbtn a,
.readspeaker-wrapper .rsbtn button {
  pointer-events: auto;
}

/* To top button, as on dare-is.nl: round white button with a progress ring around the chevron */
div.totoplink a {
  right: 1.25rem;
  bottom: 1.25rem;
  width: 52px;
  height: 52px;
  line-height: 1;
  border-radius: 999px;
  background-color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  animation: scrollHint 1.8s ease-in-out infinite;
}
div.totoplink a:hover {
  background-color: #fff;
}
div.totoplink .progress-ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
div.totoplink .ring-bg {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 4;
}
div.totoplink .ring-progress {
  fill: none;
  stroke: var(--color2-hex-color);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 138;
  stroke-dashoffset: 138;
  transition: stroke-dashoffset .15s linear;
}
div.totoplink a:hover .ring-progress {
  stroke: var(--heading-primary);
}
div.totoplink .icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--color2-hex-color);
  line-height: 1;
}
div.totoplink i {
  font-size: inherit;
  color: inherit;
}
div.totoplink a:hover .icon {
  color: var(--heading-primary);
}
@keyframes scrollHint {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.03); }
}

/* Text links in content: stay blue on hover, with a blue bottom border */
section.content p a:not(.btn):hover,
section.content li a:not(.btn):hover,
section.content td a:not(.btn):hover {
  color: var(--color2-hex-color);
  border-bottom: 1px solid var(--color2-hex-color);
}

/* Primary button hover: a clearly darker shade instead of a slight fade */
.btn.btn-primary:hover,
.btn.btn-primary:focus-visible {
  background-color: var(--heading-primary);
  border-color: var(--heading-primary);
  color: #fff;
  opacity: 1;
  box-shadow: 0 4px 10px rgba(10, 57, 112, .3);
}
.online-modules .btn.btn-primary:hover,
.online-modules .btn.btn-primary:focus-visible {
  background-color: #d97f00;
  border-color: #d97f00;
  color: #fff;
  opacity: 1;
  box-shadow: 0 4px 10px rgba(217, 127, 0, .35);
}

/* Themes/grid: zelfde breedte als vóór Bootstrap 5 (container 1140px i.p.v. 1320px vanaf 1400px), zodat weer 3 kolommen */
@media (min-width: 768px) {
  .grid-list {
    max-width: 1110px;
  }
}

/* Readspeaker-knop linksonder de header image (was rechtsonder). Niet voor #page-opdrachten: die pagina heeft geen header image. */
#readspeaker_button1 {
  position: absolute;
  top: -73px; /* readspeaker-bottomleft: 37px high button + 20px above the bottom edge of the slider/parallax + the 16px top margin of its container */
  left: 20px;
  right: unset;
}

/* Parallax-koppen gelijk aan slider-koppen (stras.nl): zelfde lettertype, gewicht, kleur, schaduw en uitlijning. Grootte blijft. */
.home-parallax h1.intro,
.home-parallax h3.intro {
  font-family: 'Roboto Slab', Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #fff;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}
.home-parallax h3.intro {
  margin: 15px 0 0;
}

/* Parallax-titel als h2 (was h1), met dezelfde slider-stijl als stras.nl */
.home-parallax h2.intro {
  font-family: 'Roboto Slab', Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 0.75rem + 5vw, 3.125rem);
  color: #fff;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}
/* parallax-h1-mobile: parallax-kop (h1 of h2) kleiner op telefoons */
.home-parallax h1.intro,
.home-parallax h2.intro {
  font-size: clamp(1.75rem, 0.75rem + 5vw, 3.125rem);
}

/* header-container-width: on desktop the logo and the menu line up with the Bootstrap .container (the text column),
   not with the screen edge. Widths are the Bootstrap container widths. */
@media (min-width: 992px) {
  :root { --header-container-width: var(--page-max-width); }
  header .container-fluid {
    max-width: var(--header-container-width);
    padding: 0 12px;
  }
}
@media (min-width: 1200px) {
  :root { --header-container-width: var(--page-max-width); }
}
@media (min-width: 1400px) {
  :root { --header-container-width: var(--page-max-width); }
}

/* header-mobile: no vertical line next to the menu button and no line under the header on phones; on the home page
   the menu icon is white (dark again once the header turns white after scrolling) */
@media (max-width: 991.98px) {
  .mobile-nav-trigger,
  .dark:not(.header-smaller) .mobile-nav-trigger {
    border: 0;
  }
  header,
  header.header-smaller {
    border-bottom: 0;
  }
  #page-home header:not(.header-smaller) .mobile-nav-trigger span:before {
    background: #fff;
    box-shadow: 0 6px 0 0 #fff, 0 12px 0 0 #fff;
  }
}

/* main-title-mobile: the page-header title (h1 in .main-title) is smaller on phones, and the cube accent
   (.main-title.parallax::after) is desktop only */
body .main-title h1 {
  font-size: clamp(1.75rem, 0.75rem + 5vw, 3.125rem);
}
@media (max-width: 991.98px) {
  .main-title.parallax::after {
    content: none;
    display: none;
  }
}

/* slider-h2-mobile: smaller slider title on phones, 50px from tablet up */
.slider-caption h2,
.video-caption h2 {
  font-size: clamp(1.75rem, 0.75rem + 5vw, 3.125rem);
}

/* readspeaker-left-1920-end: above 1920px the button stays in the 1920px area (the button is positioned against the full-width .wrapper) */
@media (min-width: 1921px) {
  #readspeaker_button1,
  #page-opdrachten #readspeaker_button1 {
    left: calc((100% - var(--page-max-width)) / 2 + 20px);
  }
}
/* totoplink-icon-fix: player/css/player.css (CED Module template) has a global .icon { width:23px; height:23px }, which kept the chevron
   span from filling the round to-top button */
div.totoplink .icon {
  width: auto;
  height: auto;
}

/* opdrachten-header-readspeaker: on /opdrachten (CED Module template) the Readspeaker button sits in the header, right of the logo and
   level with the menu; the player navigation (the "Terug" button, .navigation-top / .ev-navigation-top) sits right of it, styled like it.
   --rs-right / --rs-top are set by a small script in the template (place of the Readspeaker button). Phones keep the old layout. */
@media (min-width: 769px) {
  #page-opdrachten .header-readspeaker {
    float: left;
    margin: 36px 0 0 16px;
    transition: margin .3s ease;
  }
  #page-opdrachten header.header-smaller .header-readspeaker {
    margin-top: 32px;
  }
  #page-opdrachten #readspeaker_button1 {
    position: static;
    z-index: auto;
  }
  body#page-opdrachten .navigation-top,
  body#page-opdrachten .ev-navigation-top {
    top: var(--rs-top, 36px);
    left: calc(var(--rs-right, 180px) + 10px);
    right: auto;
    width: auto;
    height: 28px !important; /* the player sets an inline height: 56px */
    border-radius: 3.2px;
    box-shadow: none;
    transition: none;
  }
  body#page-opdrachten .navigation-top .navigation-top-left,
  body#page-opdrachten .navigation-top .navigation-top-inner,
  body#page-opdrachten .navigation-top .navigation-top-outer {
    height: 100%;
    width: auto;
  }
  body#page-opdrachten .navigation-top .navigation-back-button {
    display: flex;
    align-items: center;
    width: auto;
    height: 100%;
    padding: 0 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
  }
  body#page-opdrachten .navigation-top .navigation-back-button .navigation-back-button-text {
    padding-right: 0;
    margin-left: 10px;
  }
  body#page-opdrachten .navigation-top .navigation-back-button .icon {
    width: 14px;
    height: 14px;
    padding: 0; /* player.css gives .icon 16.5px padding */
    color: #fff;
  }
  body#page-opdrachten .navigation-top .navigation-back-button .navigation-back-button-text {
    top: 0;
  }
  /* no visible back button (start menu): no empty blue block */
  /* opdrachten-navtop-orange: the bar keeps the player's own (orange) colour; it only hides when there is neither a visible back button nor an achievements button */
  body#page-opdrachten .navigation-top:not(:has(.navigation-back-button:not(.ev-is-hidden), .ev-achievements-navigation)) {
    display: none;
  }
  body#page-opdrachten .navigation-top .navigation-back-button.ev-is-hidden,
  body#page-opdrachten .ev-navigation-top .ev-navigation-back-button.ev-is-hidden {
    display: none;
  }
}

/* opdrachten-ev-navigation: on the lesson pages the player uses the ev- prefix (.ev-navigation-top ...); same look as the menu pages */
@media (min-width: 769px) {
  body#page-opdrachten .ev-navigation-top .ev-navigation-top-outer,
  body#page-opdrachten .ev-navigation-top .ev-navigation-top-inner,
  body#page-opdrachten .ev-navigation-top .ev-navigation-top-left,
  body#page-opdrachten .ev-navigation-top .ev-navigation-top-center,
  body#page-opdrachten .ev-navigation-top .ev-navigation-top-right {
    height: 100%;
    width: auto;
    align-items: center;
  }
  body#page-opdrachten .ev-navigation-top .ev-navigation-back-button {
    display: flex;
    align-items: center;
    width: auto;
    height: 100%;
    padding: 0 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
  }
  body#page-opdrachten .ev-navigation-top .ev-navigation-back-button .ev-icon {
    width: 14px;
    height: 14px;
    padding: 0;
    color: #fff;
  }
  body#page-opdrachten .ev-navigation-top .ev-navigation-back-button .ev-navigation-back-button-text {
    top: 0;
    padding-right: 0;
    margin-left: 10px;
  }
  body#page-opdrachten .ev-navigation-top .ev-navigation-item.ev-achievements-navigation {
    height: 100%;
    padding: 0 4px;
    align-items: center;
  }
  body#page-opdrachten .ev-navigation-top .ev-achievements-navigation-item {
    margin: 0;
    padding: 0 6px;
    top: 0;
  }
  /* no visible back button: no empty block */
  body#page-opdrachten .ev-navigation-top:not(:has(.ev-navigation-back-button:not(.ev-is-hidden), .ev-achievements-navigation)) {
    display: none;
  }
}

/* opdrachten-btn-item: the header buttons on /opdrachten get the layout of the menu's .btn-item (Roboto Slab 700, 16px, uppercase,
   letter-spacing 1px, 37px high, 2px radius, padding 8px 16px). Colours stay: the player navigation keeps its orange, "Lees voor" its own. */
@media (min-width: 1600px) {
  /* level with the menu button (AANMELDEN is 37px high, top 31px) */
  #page-opdrachten .header-readspeaker {
    margin-top: 31px;
  }
  #page-opdrachten header.header-smaller .header-readspeaker {
    margin-top: 27px;
  }

  /* Lees voor */
  #page-opdrachten #readspeaker_button1 a.rsbtn_play {
    height: 37px;
    border-radius: 2px;
  }
  #page-opdrachten #readspeaker_button1 a.rsbtn_play .rsbtn_left,
  #page-opdrachten #readspeaker_button1 a.rsbtn_play .rsbtn_right {
    height: 35px;
    line-height: 35px;
  }
  #page-opdrachten #readspeaker_button1 a.rsbtn_play .rsbtn_text span {
    font-family: "Roboto Slab", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 35px;
  }

  /* Terug + Badges (player navigation) */
  body#page-opdrachten .navigation-top,
  body#page-opdrachten .ev-navigation-top {
    height: 37px !important;
    border-radius: 2px;
    font-family: "Roboto Slab", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
  }
  body#page-opdrachten .navigation-top .navigation-back-button,
  body#page-opdrachten .ev-navigation-top .ev-navigation-back-button {
    padding: 0 16px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
  }
  body#page-opdrachten .ev-navigation-top .ev-navigation-back-button .ev-button-inner {
    display: flex;
    align-items: center;
  }
  body#page-opdrachten .navigation-top .navigation-back-button-text,
  body#page-opdrachten .ev-navigation-top .ev-navigation-back-button-text,
  body#page-opdrachten .ev-navigation-top .ev-button-text {
    margin-left: 8px;
    padding: 0;
    top: 0;
    font-size: 16px;
    line-height: 1;
  }
  body#page-opdrachten .navigation-top .navigation-back-button .icon,
  body#page-opdrachten .ev-navigation-top .ev-navigation-back-button .ev-icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
  }
  /* Badges: icon + text */
  body#page-opdrachten .navigation-top .ev-achievements-navigation-item,
  body#page-opdrachten .ev-navigation-top .ev-achievements-navigation-item {
    display: flex;
    align-items: center;
    width: auto;
    height: 100%;
    padding: 0 16px;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  body#page-opdrachten .navigation-top .ev-achievements-navigation-item::after,
  body#page-opdrachten .ev-navigation-top .ev-achievements-navigation-item::after {
    content: "Badges";
    margin-left: 8px;
    line-height: 1;
    font-family: "Roboto Slab", sans-serif; /* the item itself uses the player icon font */
    height: auto; /* player.css uses ::after as a clearfix (height 0, overflow hidden) */
    overflow: visible;
    clear: none;
  }
  body#page-opdrachten .navigation-top .ev-achievements-navigation-item-glyph,
  body#page-opdrachten .ev-navigation-top .ev-achievements-navigation-item-glyph {
    display: flex;
    align-items: center;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
  }
  body#page-opdrachten .navigation-top .ev-achievements-navigation-item-glyph .ev-icon,
  body#page-opdrachten .ev-navigation-top .ev-achievements-navigation-item-glyph .ev-icon {
    font-size: 16px;
    color: #fff;
  }
}

/* opdrachten-icons: vertically centred speaker icon in "Lees voor" (the widget gives its ::before a 27px line-height in a 35px button)
   and a slightly bolder, larger badge icon */
@media (min-width: 1600px) {
  #page-opdrachten #readspeaker_button1 a.rsbtn_play .rsbtn_text:before,
  #page-opdrachten #readspeaker_button1 a.rsbtn_play .rsbtn_text:after {
    height: 35px;
    line-height: 35px;
  }
  body#page-opdrachten .navigation-top .ev-achievements-navigation-item-glyph .ev-icon,
  body#page-opdrachten .ev-navigation-top .ev-achievements-navigation-item-glyph .ev-icon {
    font-size: 18px;
    -webkit-text-stroke: .8px currentColor;
  }
}

/* opdrachten-rspanel: the expanded Readspeaker player (controls and status bar) next to the "Lees voor" button, same 37px height and
   Roboto Slab as the buttons beside it. The widget scales the status text with an inline transform; that is switched off here. */
@media (min-width: 1600px) {
  #page-opdrachten #readspeaker_button1 .rsbtn_exp,
  #page-opdrachten #readspeaker_button1 .rsbtn_exp_inner {
    height: 37px;
    border-radius: 0 2px 2px 0;
  }
  #page-opdrachten #readspeaker_button1 .rsbtn_exp_inner {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border: 0;
    background: #fff;
  }
  /* a status message (e.g. an error) needs more room than the player controls */
  #page-opdrachten #readspeaker_button1 .rsbtn_exp_inner:has(.rsbtn_status_overlay[style*="flex"]) {
    min-width: 340px;
  }
  #page-opdrachten #readspeaker_button1 .rsbtn_player_item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 37px;
  }
  #page-opdrachten #readspeaker_button1 .rsbtn_player_item .rsicn {
    width: auto;
    height: auto;
    line-height: 1;
    font-size: 18px;
  }
  #page-opdrachten #readspeaker_button1 .rsbtn_closer {
    margin-left: auto; /* the close button sits at the right edge, under no status overlay */
  }
  #page-opdrachten #readspeaker_button1 .rsbtn_status_overlay {
    width: calc(100% - 41px) !important; /* leave the close button visible */
    height: 37px;
    background: #fff;
  }
  #page-opdrachten #readspeaker_button1 .rsbtn_status {
    display: flex;
    align-items: center;
    height: 37px;
    padding: 0 8px;
    transform: none !important;
    white-space: nowrap;
  }
  #page-opdrachten #readspeaker_button1 .rsbtn_status,
  #page-opdrachten #readspeaker_button1 .rsbtn_status * {
    font-family: "Roboto Slab", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 37px;
    color: #444;
    text-shadow: none;
  }
  #page-opdrachten #readspeaker_button1 .rsbtn_status a {
    margin-left: 6px;
    font-weight: 400;
  }
}

/* readspeaker-bottomleft: "Lees voor" at the bottom left of the slider/parallax on all pages except /opdrachten (there it sits in the
   header, right of the logo); the button has the layout of the menu's AANMELDEN .btn-item (Roboto Slab 700, 16px, uppercase, 37px high) */
body:not(#page-opdrachten) #readspeaker_button1 a.rsbtn_play { height: 37px; border-radius: 2px; }
body:not(#page-opdrachten) #readspeaker_button1 a.rsbtn_play .rsbtn_left,
body:not(#page-opdrachten) #readspeaker_button1 a.rsbtn_play .rsbtn_right { height: 35px; line-height: 35px; }
body:not(#page-opdrachten) #readspeaker_button1 a.rsbtn_play .rsbtn_text span {
  font-family: "Roboto Slab", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; line-height: 35px;
}
body:not(#page-opdrachten) #readspeaker_button1 a.rsbtn_play .rsbtn_text:before,
body:not(#page-opdrachten) #readspeaker_button1 a.rsbtn_play .rsbtn_text:after { height: 35px; line-height: 35px; }
body:not(#page-opdrachten) #readspeaker_button1 .rsbtn_exp,
body:not(#page-opdrachten) #readspeaker_button1 .rsbtn_exp_inner { height: 37px; border-radius: 0 2px 2px 0; }
body:not(#page-opdrachten) #readspeaker_button1 .rsbtn_exp_inner { display: flex; align-items: center; box-sizing: border-box; border: 0; background: #fff; }
body:not(#page-opdrachten) #readspeaker_button1 .rsbtn_exp_inner:has(.rsbtn_status_overlay[style*="flex"]) { min-width: 340px; }
body:not(#page-opdrachten) #readspeaker_button1 .rsbtn_player_item { display: flex; align-items: center; justify-content: center; width: 40px; height: 37px; }
body:not(#page-opdrachten) #readspeaker_button1 .rsbtn_player_item .rsicn { width: auto; height: auto; line-height: 1; font-size: 18px; }
body:not(#page-opdrachten) #readspeaker_button1 .rsbtn_closer { margin-left: auto; }
body:not(#page-opdrachten) #readspeaker_button1 .rsbtn_status_overlay { width: calc(100% - 41px) !important; height: 37px; background: #fff; }
body:not(#page-opdrachten) #readspeaker_button1 .rsbtn_status { display: flex; align-items: center; height: 37px; padding: 0 8px; transform: none !important; white-space: nowrap; }
body:not(#page-opdrachten) #readspeaker_button1 .rsbtn_status,
body:not(#page-opdrachten) #readspeaker_button1 .rsbtn_status * { font-family: "Roboto Slab", sans-serif; font-size: 13px; font-weight: 600; line-height: 37px; color: #444; text-shadow: none; }
body:not(#page-opdrachten) #readspeaker_button1 .rsbtn_status a { margin-left: 6px; font-weight: 400; }

/* rs-menu-btn: speaker button left of the menu, shown (by init.js) once the Readspeaker button has scrolled out of view */
.rs-menu-btn {
  display: none;
}
@media (min-width: 992px) {
  header nav.main-menu {
    position: relative;
  }
  .rs-menu-btn {
    position: absolute;
    right: 100%;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    margin: -18px 16px 0 0;
    border-radius: 2px;
    background: var(--color2-hex-color, #469fd5);
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .rs-menu-btn:hover,
  .rs-menu-btn:focus {
    color: #fff;
    filter: brightness(.92);
  }
  body.rs-btn-out .rs-menu-btn {
    opacity: 1;
    visibility: visible;
  }
}
/* cmsms stylesheet: buddy013_v1.0.1-headings modified: zondag 8 november 2026 08:15:26 */
/* buddy013_v1.0.1-headings */
/* All h1-h6 (and tightly-coupled .lato/legend/h1.intro) typography,
   extracted out of buddy013_v1.0.1-main and buddy013_v1.0.1-custom
   so heading styles live in one place. Mixed selectors that style a
   heading alongside unrelated elements (e.g. .main-title--dark h1,
   .dark h1..h6) were left where they were, to avoid fragmenting a
   shared declaration across two files.

   Layering:
   1. Bootstrap (4.6.2, loaded from the CDN) is leading for the font
      sizes of h1-h6 (2.5 / 2 / 1.75 / 1.5 / 1.25 / 1rem). No font-size
      is set here for headings in the text, so they follow Bootstrap.
   2. Custom styling taken from asvz.nl (asvz-headings.html) is added on
      top: font family, weight, colour, spans. */

:root {
  --heading-primary: #0a3970; /* --color-primary in asvz-headings.html */
}

h1,
h2,
h3,
h4,
h5,
h6,
legend {
  font-weight: 700;
  font-family: 'Roboto Slab', Arial, Helvetica, sans-serif;
  line-height: 125%;
  text-transform: none;
  color: var(--heading-primary);
  letter-spacing: normal;
}

h1.lato,
h2.lato,
h3.lato,
h4.lato,
h5.lato,
h6.lato,
txt.lato {
  font-family: 'Source Sans 3', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: inherit;
}

.feature-content h3 {
  margin: 14px 0;
}
.subtitle + h3 {
  margin: 0 0 14px 0;
}

/* A span in a heading gets the low weight (Roboto Slab 300); the heading
   itself keeps the base weight above. */
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
  font-weight: 300;
}

h4 { font-weight: 600; }

h5 { font-weight: 600; }

h6 { font-weight: 600; }

.home-heading h1 {
  text-align: center;
  margin: 20px 0;
  text-transform: none;
}

.home-heading h1,
.home-heading h2 {
  text-align: center;
  margin: 20px 0;
  text-transform: none;
}

h1.intro {
  font-size: 3.1rem;
  text-shadow: 0px 0px 8px #4d4f53;
  margin-bottm: 1rem;
}

/* ================================================================
   Page / hero titles: .main-title h1 and the slider/video caption h2
   (asvz.nl: h1.hero__title). Size is 3.125rem (50px) at every width, as in
   asvz-headings.html.
   ================================================================ */

.main-title h1 {
  padding: 0;
  margin: 0;
  line-height: 1.25;
  text-shadow: 0 0 15px rgba(0,0,0,.5);
}

.slider-caption h2,
.video-caption h2 {
  display: none;
  text-shadow: 0 0 15px rgba(0,0,0,.5);
  color: #fff;
  line-height: 1.25;
  margin-top: 0;
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  animation-delay: .3s;
  z-index: 1;
  position: relative;
}

.main-title h1,
.slider-caption h2,
.video-caption h2 {
  font-family: 'Roboto Slab', Arial, sans-serif;
  font-size: 3.125rem; /* 50px, as h1.hero__title in asvz-headings.html */
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  -webkit-text-stroke-width: 0;
}

/* slider-h2-mobile: smaller title on phones, 50px from tablet up */
.slider-caption h2,
.video-caption h2 {
  font-size: clamp(1.75rem, 0.75rem + 5vw, 3.125rem);
}

/* The bold first word on its own line (asvz: <span> inside h1.hero__title)
   needs that word wrapped in a span in the template/slider content. */
.main-title h1 span,
.slider-caption h2 span,
.video-caption h2 span {
  display: block;
}

/* ================================================================
   Headings in the text (asvz.nl: h2.content__title and h3).
   No font-size here: Bootstrap leads (h2 2rem, h3 1.75rem).
   ================================================================ */

section.content h2 {
  margin-bottom: 25px;
  font-family: 'Roboto Slab', Arial, sans-serif;
  text-transform: none;
  letter-spacing: normal;
}

section.content h3 {
  font-family: 'Roboto Slab', Arial, sans-serif;
  text-transform: none;
  letter-spacing: normal;
}

/* Lead text next to the hero title (asvz: .c-entry). */
.main-subtitle,
.slider-caption h3,
.video-caption h3 {
  font-family: 'Source Sans 3', Arial, sans-serif;
  font-weight: 700;
}

/* ================================================================
   Slider (.swiper-slide): everything centred horizontally and
   vertically, no text-stroke, shadow as the hero title in
   asvz-headings.html (0 0 15px rgba(0,0,0,.5)).
   The slide itself is already a flex box (justify/align: center).
   ================================================================ */

.swiper-slide .slider-caption,
.swiper-slide .video-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.swiper-slide .slider-caption h2,
.swiper-slide .slider-caption h3,
.swiper-slide .video-caption h2,
.swiper-slide .video-caption h3 {
  text-align: center;
  -webkit-text-stroke: 0;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

/* the h2 / p stay hidden until _init.js shows them with jQuery .show(),
   which sets display:block inline: keep them centred as blocks */
.swiper-slide .slider-caption h2,
.swiper-slide .slider-caption h3 {
  width: 100%;
}

/* Slider subtitle (the p under the title, {$gallery_subtitle}): styled like
   h3.hero__header in asvz-headings.html (Roboto Slab 1.25rem / 300),
   in white because it sits on a photo. */
.swiper-slide .slider-caption h3,
.swiper-slide .video-caption h3 {
  margin: 15px 0 0;
  font-family: 'Roboto Slab', Arial, Helvetica, sans-serif;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: normal;
  color: #fff;
}