/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* #Site Styles
================================================== */

/* ### general ### */
:root {
	scroll-behavior: unset;
}
html,
body { font-family: 'Roboto Slab', serif; font-size: 25px; font-weight: 300; line-height: 1.8; color: #000; }
body { background: #fff; }
img { display: block; max-width: 100%; border: 0; }
:focus { outline: none; }
h1,
h2,
h3,
h4,
h5,
h6 { font-family: 'Roboto Slab', serif; font-weight: 700; line-height: 1.1; }
h1 { font-size: 50px; }
h2 { font-size: 50px; }
h3 { font-size: 35px; }
h4 { font-size: 30px; }
h5 { font-size: 25px; }
h6 { font-size: 20px; }

/* ### global classes ### */
.clear { visibility: hidden; clear: both; height: 0; line-height: 0; }
.container { max-width: 1636px; }
.form-control { padding: 10px 33px; height: 81px; font-size: 25px; font-weight: 300; color: #252223 !important; border: 0; border-top-left-radius: 30px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0; background-color: #f7e9ef; }
.form-control::placeholder { color: #252223; }
.form-control:focus { border-color: transparent; box-shadow: none; background-color: #f7e9ef; }
textarea.form-control { padding-top: 22px; min-height: 308px; }
.btn { padding: 17px 40px; display: inline-block; font-family: 'Roboto Slab', serif; font-size: 25px; font-weight: 700; text-transform: uppercase; text-decoration: none; border-top-left-radius: 30px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0; transition: all 0.3s; cursor: pointer; }
.btn-primary { color: #fff; border: 0; background-color: #4999ca; }
.btn-primary:hover { background-color: #2c78bc; }
.btn-secondary { color: #fff; border: 0; background-color: #000; }
.btn-secondary:hover { background-color: #ca1466; }

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; overflow: hidden; }

/* ### main container ### */
#mainCntr { width: 100%; }

/* ### header container ### */
#headerCntr { padding-top: 23px; padding-bottom: 21px; position: relative; z-index: 9; width: 100%; background-color: #000; }
#headerCntr .logo { position: relative; z-index: 2; }
#headerCntr .logo img { max-height: 280px !important; }

/* ### menu box ### */
.menuBox { margin-top: -40px; }
.menuBox .social-media { margin-bottom: 16px; text-align: right; }
.menuBox .social-media li { margin-right: 10px; }
.menuBox .social-media img { height: 35px; }
.menuBox li { margin-right: 31px; display: inline-block; }
.menuBox li:last-child { margin-right: 0; }
.menuBox li > a { font-size: 28px; text-decoration: none; color: #fff; transition: all 0.3s; }
.menuBox li > a:hover { color: #fff; }
.menuBox .menu-items > li:first-child { display: none; }

/* ### dropdown menu ### */
.menuBox .menu-items > li { position: relative; }
.menuBox .submenu-toggle { margin-left: 6px; padding: 0; position: relative; display: inline-block; width: 22px; height: 22px; vertical-align: middle; border: 0; background: none; cursor: pointer; }
.menuBox .submenu-toggle span { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translate(-50%, -75%) rotate(45deg); transition: transform 0.3s; }
.menuBox .has-sub.open > .submenu-toggle span { transform: translate(-50%, -25%) rotate(-135deg); }
.menuBox .sub-menu { margin: 0; padding: 10px 0; position: absolute; top: 100%; left: -20px; z-index: 20; min-width: 260px; list-style: none; text-align: left; opacity: 0; visibility: hidden; background-color: #000; transform: translateY(10px); transition: all 0.3s; }
.menuBox .menu-items > li:last-child .sub-menu { left: auto; right: 0; }
.menuBox .sub-menu li { margin: 0; display: block; }
.menuBox .sub-menu li > a { padding: 8px 20px; display: block; font-size: 20px; line-height: 1.4; white-space: nowrap; }
.menuBox .sub-menu li > a:hover,
.menuBox .sub-menu li > a:focus { color: #ca1c67; }
.menuBox .has-sub.open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

@media only screen and (min-width: 992px) {
	.menuBox .has-sub:hover > .sub-menu,
	.menuBox .has-sub:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
}

/* ### mobileMenu ### */
.mobileMenu { position: absolute; top: 50%; right: 20px; z-index: 15; display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: #ca1c67; transform: translateY(-50%); transition: all 0.3s; cursor: pointer; overflow: hidden; }
.mobileMenu span { position: absolute; top: 50%; left: 50%; display: block; width: 20px; height: 2px; text-indent: -9999px; border-radius: 0; background: #fff; transform: translateX(-50%) translateY(-50%); transition: 0.2s; }
.mobileMenu span:before,
.mobileMenu span:after { position: absolute; left: 0; display: block; width: 100%; height: 2px; border-radius: 0; background-color: #fff; transition-duration: 0.2s, 0.2s; content: ''; }
.mobileMenu span:before { top: -6px; left: 0; }
.mobileMenu span:after { bottom: -6px; }
.mobileMenu.active span { left: 50%; background: none; }
.mobileMenu.active span:before,
.mobileMenu.active span:after { left: 0; transition-delay: 0s, 0.2s; }
.mobileMenu.active span:before { top: 0; transform: rotate(45deg); }
.mobileMenu.active span:after { bottom: 0; transform: rotate(-45deg); }

/* ### content container ### */
#contentCntr { width: 100%; }

/* ### hero box ### */
.hero { background-color: #000; }
.hero img { width: 100%; min-height: 960px; object-fit: cover; object-position: center center; }

/* ### team box ### */
.teamBox { margin-bottom: 20px; padding-top: 8px; background-color: #000; }
.teamBox .image { transform: translateY(55px); }
.teamBox .image img { width: 100%; min-height: 706px; border-top-left-radius: 150px; border-bottom-right-radius: 150px; object-fit: cover; object-position: center center; }
.teamBox h1 { margin-bottom: 29px; color: #fff; }
.teamBox .paragraph { margin-bottom: 38px; max-width: 640px; color: #fff; }
.teamBox .shape { top: -472px; right: -1px; }
.teamBox { color: #fff; padding-bottom: 38px; }
.teamBox a { color: #fff; }
.no-hero { padding-top: 100px; padding-bottom: 100px; }

/* ### team box ### */
.newsBox { margin-bottom: 213px; }
.newsBox h2 { margin-bottom: 52px; color: #565656; }
.newsBox .item { padding-right: 23px; padding-left: 23px; }
.newsBox .image img { width: 100%; border-top-left-radius: 150px; }
.newsBox .content { padding: 41px 40px 52px; border-bottom-right-radius: 150px; background-color: #e0e0e0; }
.newsBox h3 { margin-bottom: 19px; color: #000; }
.newsBox p { margin-bottom: 28px; color: #000; }
.newsBox .slick-list { margin-right: -23px; margin-left: -23px; }
.newsBox .slick-arrow { position: absolute; top: 19%; z-index: 1; font-size: 50px; border: 0; background-color: transparent; transition: all 0.3s; cursor: pointer; }
.newsBox .slick-arrow:hover { color: #ca1c67; }
.newsBox .slick-prev { left: -120px; }
.newsBox .slick-next { right: -120px; }

/* ### team box ### */
.formBox { padding-top: 78px; padding-bottom: 39px; }
.formBox .content { margin: 0 auto; z-index: 1; max-width: 1124px; }
.formBox .title { max-width: 680px; }
.formBox h2 { margin-bottom: 32px; color: #fff; }
.formBox p { margin-bottom: 78px; color: #fff; }
.formBox .row { z-index: 1; }
.formBox .form-group { margin-bottom: 33px; }
.formBox .form-group.submit { text-align: right; }
.formBox .bg { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }
.formBox .bg img { margin-left: auto; object-fit: cover; object-position: center left; height: 100%; }
.formBox a { color: #fff; }

/* ### footer container ### */
#footerCntr { overflow: hidden; width: 100%; }

/* ### footer box ### */
.footerBox { padding-top: 65px; padding-bottom: 73px; font-size: 0.8rem; background-color: #fff; }
.footerBox .title { margin-bottom: 9px; font-size: 50px; font-weight: 700; }
.footerBox address { margin-bottom: 0; width: 45%; }
.footerBox ul { margin-bottom: 0; padding-left: 20px; width: 55%; }
.footerBox ul > li { list-style: none; }
.footerBox ul > li > a { padding-left: 40px; position: relative; text-decoration: none; color: #000; transition: all 0.3s; }
.footerBox ul > li > a:hover { color: #ca1c67; }
.footerBox ul > li > a > i { position: absolute; top: 4px; left: 0; }
.footerBox .logo img { margin-left: auto; }

/* ### copyright box ### */
.copyrightBox { padding-top: 29px; padding-bottom: 26px; background-color: #000; }
.copyrightBox p { margin-bottom: 0; color: #fff; }
.copyrightBox a { color: #fff; }

/* ### content box ### */
.contentBox a { text-decoration: underline; color: #000; }
.contentBox-images img { margin-bottom: 20px; width: 100%; border-radius: 40px; }

/* ### sponsoren ### */
.sponsor { margin-bottom: 20px; padding: 40px; min-height: 750px; border-radius: 50px 0 50px 0; background: #e2eff7; }
.sponsor img { display: block; margin: 0 auto 50px 0; max-height: 100px; }

/* ### galleries ### */
.gallery-item img {
	margin-bottom: 30px;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
	border-radius: 50px;
}

.video { margin-bottom: 100px; }
.video video, .video iframe { max-width: 100%; border: 3px solid #000; border-radius: 20px; }
.video h3 { font-size: 1.2rem; }

/* #Media Queries
================================================== */
@media only screen and (max-width: 1800px) {
	.newsBox .js-news-slider { padding-right: 80px; padding-left: 80px; }
	.newsBox .slick-prev { left: 0; }
	.newsBox .slick-next { right: 0; }
}

@media only screen and (max-width: 1500px) {
	.menuBox li { margin-right: 25px; }
	.menuBox li > a { font-size: 25px; }
	.newsBox .content { padding: 40px 30px; border-bottom-right-radius: 80px; }
	.newsBox h3 { font-size: 25px; }
	.newsBox p { font-size: 20px; }
	.newsBox .image img { border-top-left-radius: 80px; }
	.newsBox .btn { font-size: 20px; }
	.formBox .content { padding-left: 150px; max-width: 100%; }
}

@media only screen and (max-width: 1199px) {
	h1 { font-size: 40px; }
	h2 { font-size: 36px; }
	h3 { font-size: 30px; }
	#headerCntr .logo img { max-width: 250px; }
	.menuBox .social-media { margin-bottom: 0; }
	.menuBox .social-media img { max-width: 30px; }
	.menuBox li { margin-right: 20px; }
	.menuBox li > a { font-size: 20px; }
	.hero img { min-height: 600px; }
	.teamBox { padding-top: 25px; }
	.teamBox .paragraph { font-size: 24px; }
	.newsBox { margin-bottom: 100px; }
	.footerBox address { font-size: 24px; }
	.footerBox ul > li > a { font-size: 24px; }
}

@media only screen and (max-width: 991px) {
	.form-control { font-size: 20px; }
	#headerCntr { padding-top: 15px; padding-bottom: 15px; }
	.menuBox { padding: 110px 20px 30px; position: absolute; top: 0; left: 0; display: flex; flex-wrap: wrap; opacity: 0; visibility: hidden; width: 100%; background-color: #000; transition: all 0.3s; z-index: 1000; }
	.menuBox.active { opacity: 1; visibility: visible; }
	.menuBox .social-media { order: 2; width: 100%; text-align: left; }
	.menuBox .social-media li { margin-right: 15px; display: inline-block; }
	.menuBox .social-media li:last-child { margin-right: 0; }
	.menuBox .menu-items { margin-bottom: 20px !important; order: 1; }
	.menuBox li { margin-right: 0; display: block; }
	.menuBox .has-sub { display: flex; flex-wrap: wrap; align-items: center; }
	.menuBox .submenu-toggle { margin-left: 10px; width: 40px; height: 40px; }
	.menuBox .sub-menu { padding: 0 0 10px 20px; position: static; display: none; width: 100%; min-width: 0; opacity: 1; visibility: visible; background: none; transform: none; transition: none; }
	.menuBox .has-sub.open > .sub-menu { display: block; }
	.menuBox .sub-menu li > a { padding: 6px 0; white-space: normal; }
	.mobileMenu { display: flex; }
	.hero img { min-height: 500px; }
	.teamBox { margin-bottom: 20px; }
	.teamBox .paragraph { max-width: 100%; }
	.teamBox .image { width: 100%; }
	.teamBox .image img { min-height: auto; }
	.teamBox .shape { display: none; }
	.newsBox { margin-bottom: 80px; }
	.newsBox .js-news-slider { padding-right: 50px; padding-left: 50px; }
	.newsBox .slick-arrow { font-size: 30px; }
	.newsBox .content { padding: 25px; border-bottom-right-radius: 50px; }
	.newsBox .image img { border-top-left-radius: 50px; }
	.formBox p { margin-bottom: 40px; font-size: 20px; }
	.footerBox .title { font-size: 40px; }
	.footerBox address { font-size: 20px; }
	.footerBox ul > li > a { padding-left: 30px; font-size: 20px; }
	.footerBox .logo img { max-width: 150px; }
	.copyrightBox p { font-size: 20px; }
}

@media only screen and (max-width: 767px) {
	body { font-size: 20px; }
	.form-control { height: 60px; border-top-left-radius: 20px; border-bottom-right-radius: 20px; }
	textarea.form-control { padding: 22px 29px; min-height: 250px; }
	#headerCntr .logo img { max-width: 200px; }
	.hero img { min-height: 400px; }
	.teamBox { margin-bottom: 50px; padding-top: 25px; }
	.teamBox .image img { border-top-left-radius: 50px; border-bottom-right-radius: 50px; }
	.teamBox .paragraph { font-size: 20px; }
	.newsBox .js-news-slider { padding-right: 30px; padding-left: 30px; }
	.newsBox .slick-arrow { font-size: 20px; }
	.newsBox .slick-prev { left: -10px; }
	.newsBox .slick-next { right: -10px; }
	.formBox { background-color: #ca1466; }
	.formBox .content { padding-left: 0; }
	.formBox .bg img { display: none; }
	.formBox .form-group { margin-bottom: 25px; }
	.footerBox { padding-top: 50px; padding-bottom: 50px; }
	.footerBox address { margin-bottom: 30px; width: 100%; }
	.footerBox ul { margin-bottom: 30px; padding-left: 0; width: 100%; }
	.footerBox .logo img { margin-left: 0; max-width: 100px; }
	.copyrightBox { padding-top: 20px; padding-bottom: 17px; text-align: center; }
	.copyrightBox p { margin-bottom: 5px; width: 100%; }
	.copyrightBox p:last-child { margin-bottom: 0; }
	.sponsor { min-height: auto; }
}

.payoff { display: flex; align-items: center; justify-content: flex-end; min-height: 100%; font-size: 64px; font-weight: 700; line-height: 1.1; color: #fff; text-align: right; word-break: break-word; }

/* ### header payoff (responsive) ### */
@media only screen and (max-width: 1500px) {
	.payoff { font-size: 52px; }
}

@media only screen and (max-width: 1199px) {
	.payoff { font-size: 40px; }
}

@media only screen and (max-width: 991px) {
	.payoff { justify-content: flex-start; margin-top: 10px; font-size: 32px; text-align: left; }
	#headerCntr .logo img { max-height: 180px !important; }
}

@media only screen and (max-width: 767px) {
	.payoff { font-size: 26px; }
	#headerCntr .logo img { max-height: 140px !important; }
}

/* ### hero home (groepsfoto, volledige breedte) ### */
.hero.hero-home img { min-height: 0; height: auto; object-fit: contain; }

@media only screen and (max-width: 991px) {
	.hero.hero-home img { min-height: 240px; object-fit: cover; object-position: 50% 35%; }
}

@media only screen and (max-width: 575px) {
	.hero.hero-home img { min-height: 200px; }
}

/* ### footer adresgegevens + social media ### */
.footerBox .title { margin-bottom: 35px; line-height: 1.2; }
.footerBox .footer-cols { margin-bottom: 15px; }
.footerBox .footer-cols > div { margin-bottom: 35px; }
.footerBox .footer-cols p { margin-bottom: 22px; line-height: 1.5; }
.footerBox .footer-cols p:last-child { margin-bottom: 0; }
.footerBox a { text-decoration: none; color: #000; transition: all 0.3s; }
.footerBox a:hover { color: #ca1c67; }
.footerBox .social-media-footer { margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; width: auto; list-style: none; }
.footerBox .social-media-footer li { margin-right: 20px; list-style: none; }
.footerBox .social-media-footer li:last-child { margin-right: 0; }
.footerBox .social-media-footer img { width: auto; height: 55px; }

@media only screen and (max-width: 767px) {
	.footerBox .footer-cols { font-size: 20px; }
	.footerBox .footer-cols > div { margin-bottom: 25px; }
	.footerBox .social-media-footer img { height: 45px; }
}

/* ### footer QR-code doneren ### */
.footerBox .footer-qr { margin-top: 0; }
.footerBox .footer-qr img { display: block; width: 140px; height: auto; }
.footerBox .footer-qr span { display: block; margin-top: 6px; font-size: 0.85em; line-height: 1.3; }