﻿body { font-family: 'proxima-nova', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.8; margin: 0; color: #181818; }
	body.KMCMSeditor { padding: 20px; }

h1, h3, h2, h4, h5, h6 { color: #231f20; font-family: 'proxima-nova', serif; line-height: 1.2; }
h1 { font-weight: 400; font-size: 46px; margin-bottom: 35px; position: relative; padding-bottom: 30px;; }
	h1::before { content: ""; width: 90px; height: 4px; display: inline-block; background: #f3cb03; position: absolute; bottom: 0px; }
h3.yellow { font-weight: 700; position: relative; padding-bottom: 20px; }
	h3.yellow::before { content: ""; width: 90px; height: 4px; display: inline-block; background: #f3cb03; position: absolute; bottom: 0px; }

h2 { font-weight: 400; font-size: 36px; margin-bottom: 20px; }
h3 { font-weight: 400; font-size: 30px; margin-bottom: 20px; }
h4 { font-weight: 400; font-size: 26px; margin-bottom: 20px; }
h5 { font-weight: 400; font-size: 24px; margin-bottom: 10px; }
h6 { font-weight: 400; font-size: 20px; margin-bottom: 10px; }
p, ul, ol, td, label { color: #181818; font-size: 18px; font-weight: 400; }
	p b, ul b, ol b { font-weight: 700; }
a { text-decoration: none; }
	a:hover { color: #181818; }

.termsfeed-com---reset { font-family: 'proxima-nova', sans-serif !important; color: #fff !important; }
.termsfeed-com---palette-light.termsfeed-com---nb { background-color: #ccc !important; color: #181818 !important; }
.termsfeed-com---palette-light .cc-nb-okagree { color: #fff !important; background-color: #ec5598 !important; }
.termsfeed-com---palette-light .cc-nb-reject { color: #fff !important; background-color: #ec5598 !important; }
.termsfeed-com---palette-light .cc-cp-foot-save { color: #fff !important; background-color: #ec5598 !important; }

/*.carousel {height:calc(100vh - 180px);}*/
.carousel-indicators { bottom: unset; top: 0; }
.homecontainer { z-index: 400; position: relative; }
.welkom { background-color: #fff; padding: 40px; border-radius: 20px; box-shadow: #ccc 0 0 30px; }
	.welkom h1 { font-weight: 400; font-size: 32px; }
.jeugd { margin-top: 0px; background-color: #fce900; padding: 20px; border-radius: 20px; box-shadow: #ccc 0 0 30px; }
	.jeugd img { border-radius: 15px; }

.reserveer { margin: 60px 0; background-image: linear-gradient(to right, #fce900, #f3cb03); border-radius: 20px; padding: 15px 30px; }
	.reserveer span { font-size: 26px; line-height: 1; font-weight: 700; }
	.reserveer a.archief { color: #181818; border-bottom: solid 1px #181818; transition: ease-in-out all 0.3s; }
		.reserveer a.archief:hover { border-bottom: solid 1px transparent; }

.modal { z-index: 9999; }
.modal-body { padding: 3px; background-color: #fff; }
	.modal-body .popuptekst { padding: 5px 15px 15px 15px; }
		.modal-body .popuptekst p a, .modal-body .popuptekst ul a { text-decoration: underline; }

.hero { width: 100%; position: relative; }
	.hero h1 { color: #fff; font-size: 110px; line-height: 1; font-weight: 400; text-shadow: #000 0 0 10px; font-family: 'Alex Brush'; margin-bottom: 0; }
	.hero p { color: #fff; font-size: 32px; margin-bottom: 40px; text-shadow: #000 0 0 10px; font-weight: 700; line-height: 1.2; }
	.hero .btn-white { background-color: #fff; color: #4b4b4d; font-size: 22px; text-transform: unset; line-height: 1; padding: 14px 60px 18px 60px; }
	.hero img.meer { position: absolute; bottom: 0; left: 50%; margin-left: -54px; }

body:before { content: ""; display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -10; background: var(--bgimage); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

.btn { display: inline-block; padding: 14px 34px; font-size: 22px; line-height: 1; font-weight: 700; border-radius: 32px; }
	.btn.btn-pink { background-color: #ec5598; color: #fff !important; }
	.btn.btn-purple { background-color: #662483; color: #fff !important; }

.promo { background-color: rgba(255,255,255,0.7); padding-top: 0px; }
	.promo .bg { background: #e1e2dd url(../images/liliane-bru-schoonheidsspecialiste.jpg) center right no-repeat; padding: 60px 40px; border-radius: 20px; box-shadow: #000 0 0 70px; margin-top: -60px; }
	.promo h3 { font-size: 60px; line-height: 1; font-weight: 400; font-family: 'Alex Brush'; margin-bottom: 20px; }


.contentcontainer { margin-top: 60px; }
.pagecontent { margin: 60px 0; }

.header-separator { height: 70px; }

.breadcrumbwrapper { padding: 120px 0 25px 0; }
.breadcrumb { font-size: 16px; line-height: 1.4; border-bottom: 0; padding: 0; border-radius: 0; text-transform: lowercase; margin: 0; padding: 15px 35px 15px 0; border-radius: 0 20px 20px 0; font-weight: 400; background-image: linear-gradient(to right, #fce900, #f3cb03); }
	.breadcrumb a, .breadcrumb { color: #231f20; }
		.breadcrumb a:hover { color: #231f20; border-bottom: solid 1px #231f20; }

.content { }
	.content ul { list-style: none; padding: 0; margin-left: 1em; }
		.content ul li { padding-left: 1.9em; }
			.content ul li:before { content: '\f178'; font-family: 'Font Awesome 6 Pro'; display: inline-block; margin-left: -1.9em; width: 1.9em; color: #f3cb03; }
	.content .fa-li { color: #f3cb03; }
	.content ul.fa-ul { margin-left: 25px; }
		.content ul.fa-ul li { padding-left: 0; margin-left: 25px; }
			.content ul.fa-ul li:before { content: none; }
			.content ul.fa-ul li .fa-li { color: #f3cb03; }
	.content h1 { margin-top: 0; }
	.content p, .content ul { margin-bottom: 20px; }
	.content a { transition: ease-in-out .30s; color: #231f20; border-bottom: solid 1px #231f20; text-decoration: none; }
		.content a:hover, .content a:focus, .content a:active { outline: none; text-decoration: none; color: #f3cb03; border-bottom: solid 1px #f3cb03; }

.cta { background-color: #662483; margin-top: 4px; padding: 10px; margin-top: 40px; }
	.cta h3 { color: #ec5598; }
	.cta ul a { color: #fff; }
		.cta ul a:hover { color: #fff; border-bottom: solid 1px #fff; }
	.cta ul .fa-li { color: #ec5598 !important; }

.doclist { margin-left: 25px; font-size: 18px; line-height: 1.8; margin-bottom: 30px; }
	.doclist td a { color: #000000; border-bottom: solid 1px #000000; }
		.doclist td a:hover { color: #f3cb03; border-bottom: solid 1px #f3cb03; }
	.doclist td.ico i { padding: 0 8px; color: #f3cb03; }
.opsomming { background-color: rgba(0,104,179,0.2); padding: 30px; margin: 60px 0; }
	.opsomming h3:nth-child(2n+3) { margin-top: 40px; }
	.opsomming ul { column-count: 2; column-gap: 60px; }
		.opsomming ul li { break-inside: avoid; }
		.opsomming ul .fa-li { color: #662483; }

.img-left, .img-right { margin-bottom: 25px; }
.img-below, .img-above { margin: 28px 0; }
.img-galery { margin-top: 35px; }



.introblok { margin: 50px 0 0 0; }
	.introblok .card { border: 0; border-radius: 0; }
		.introblok .card:before { }
	.introblok .card-img-wrapper { position: relative; }
		.introblok .card-img-wrapper:before { background-image: linear-gradient( to bottom, rgb(236, 85, 152), rgba(255, 255, 255, 0) 80%); position: absolute; content: ""; top: 0; left: 0; height: 70%; width: 100%; opacity: 1; pointer-events: none; }
		.introblok .card-img-wrapper h2 { position: absolute; top: 10px; left: 10px; }
			.introblok .card-img-wrapper h2 a { color: #fff; }
				.introblok .card-img-wrapper h2 a:hover { color: #662483; border-bottom: none; }
	.introblok .card-img-top { border-radius: 0; }
	.introblok .card-body { padding: 20px; }
		.introblok .card-body p { text-align: center; color: gray; }
			.introblok .card-body p b { font-weight: 700; color: #662483; }
	.introblok h6 { text-align: center; transition: ease-in-out 0.3s all; }
	.introblok a h6 { color: #181818; }
	.introblok a:hover h6 { color: #f3cb03; }
	.introblok a { border-bottom: 0; transition: ease-in-out 0.3s all; }
		.introblok a:focus { border-bottom: 0; transition: ease-in-out 0.3s all; }
	.introblok .card-footer { padding: 0 0 10px; background-color: transparent; border-top: 0; text-align: center; margin-bottom: 30px; }
		.introblok .card-footer a { color: #181818; transition: ease-in-out 0.2s all; }
			.introblok .card-footer a:after { font-family: "Font Awesome 5 Pro"; content: "\f178"; color: #fff; margin-left: 6px; margin-right: 6px; transition: ease-in-out 0.2s all; }
			.introblok .card-footer a:hover { border-bottom: 0 !important; }
				.introblok .card-footer a:hover:after { margin-left: 12px; margin-right: 0; }

.kalendermaand { padding-top: 20px; clear: both; }
.widget-content { background-color: #f6f4f2; padding: 0; list-style: none; margin: 0 !important; float: left; width: 100%; }
	.widget-content li { border-bottom: solid 4px #fff; float: left; width: 100%; padding-left: 0 !important; }
		.widget-content li:before { content: none !important; }
	.widget-content .widget-item { margin: 20px; }
	.widget-content .widget-calendar { width: 60px; float: left; text-align: center; }
		.widget-content .widget-calendar .widget-day { background-color: #575656; color: #fff; font-size: 38px; line-height: 38px; border-radius: 4px 4px 0 0; padding-bottom: 6px; border-bottom: solid 1px #fff; }
			.widget-content .widget-calendar .widget-day div { color: #fff; font-size: 14px; line-height: 14px; padding-top: 2px; }
		.widget-content .widget-calendar .widget-month { font-size: 14px; line-height: 14px; border-radius: 0 0 4px 4px; padding-bottom: 4px; padding-top: 6px; margin-bottom: 20px; }
	.widget-content .widget-text { float: left; margin-left: 20px; width: calc(100% - 80px); }
		.widget-content .widget-text b.red { color: #AA0000; }
		.widget-content .widget-text span.categorie { background-color: #fff; color: #ee7000; display: inline-block; min-width: 120px; text-align: center; text-transform: uppercase; font-size: 12px; margin-right: 10px; font-weight: 700; border: solid 0px #ee7000; }
		.widget-content .widget-text h5 { font-size: 16px; line-height: 16px; margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom: solid 1px silver; }
.widget-style-1 .widget-title, .widget-style-1 .widget-month { background-color: #f3cb03; color: #575656; }
.widget-style-1 h5 { color: #000; }
	.widget-style-1 h5 span { color: gray; text-transform: lowercase; }

.card-bestuur { background-color: #f3cb03; }
	.card-bestuur p { margin-bottom: 0; }
		.card-bestuur p span { color: #fff; font-weight: 700; }
	.card-bestuur a:hover { color: #181818 !important; border-bottom: solid 1px #181818 !important; }

.faqblok { }
	.faqblok .accordion-item { border: 0; border-bottom: solid 1px #ccc; }
	.faqblok .accordion-button { background-color: #fff; box-shadow: none; font-size: 22px; padding-left: 0; color: #181818; font-weight: 900; }
	.faqblok .accordion-body { padding-right: 0; }

.content a.lightbox { border-bottom: 0; }

/*@media(min-width:575px) {
	.thumbs:hover { box-shadow: 0 14px 28px rgba(0,0,0,.2); -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); }
}*/

.galerij { background-color: #fff; padding: 60px 0; }
.thumbs { width: 100%; float: left; overflow: hidden; position: relative; margin-bottom: 30px; text-align: center; text-transform: uppercase; font-size: 14px; font-weight: 700; background-color: #fff; border-radius: 0px; transition: transform .3s cubic-bezier(.34,2,.6,1),box-shadow .2s ease; transform: translateY(0px); }
	.thumbs span.title { color: #fff; }
	.thumbs a { background-color: rgba(252,233,0,0.40); bottom: -200px; color: #fff; left: 0; opacity: 0; position: absolute; right: 0; text-align: left; top: 0; z-index: 100; transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; text-decoration: none; }
		.thumbs a .title { display: table; width: 100%; height: 100%; }
			.thumbs a .title .title-text { font-style: normal; font-weight: 300; font-size: 12px; line-height: 14px; color: #fff; vertical-align: bottom; padding: 8px; display: table-cell; }
				.thumbs a .title .title-text h5, .thumbs a .title .title-text p { color: #fff; font-weight: 700; font-size: 14px; }
				.thumbs a .title .title-text h5 { font-weight: 700; }
			.thumbs a .title .enlarge { font-style: normal; color: #fff; vertical-align: middle; padding: 20px; display: table-cell; text-align: center; }
		.thumbs a:hover { bottom: 0; opacity: 1; transition: opacity 0.30s ease-in-out 0s, bottom 0.4s cubic-bezier(0.25, 0.500, 0, 1) 0s; -webkit-transition: opacity 0.30s ease-in-out 0s, bottom 0.4s cubic-bezier(0.25, 0.500, 0, 1) 0s; }

.embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; }
	.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }
.embed-responsive-16by9 { padding-bottom: 56.25%; }
.embed-responsive-4by3 { padding-bottom: 75%; }

label { font-weight: 400; color: #231f20; font-size: 18px; }
.form-check label { font-weight: 400; font-size: 18px; }
.form-floating > label { padding-left: 26px; font-size: 20px; line-height: 1.2; }
.form-control, .form-select { border-color: #ccc; border-radius: 0; }
	.form-control:focus, .form-check-input:focus, .form-select:focus { color: #181818; background-color: #fff; border-color: #888; outline: 0; box-shadow: 0 0 0 .25rem rgba(243,203,3,.25); }
textarea.form-control { min-height: 150px; }
/*.form-check { padding-left: 0; }
input[type=checkbox] { display: none; }
	input[type=checkbox] + label:before { font-family: "Font Awesome 5 Pro"; display: inline-block; font-size: 18px; font-style: normal; }
	input[type=checkbox] + label:before { content: "\f0c8"; letter-spacing: 10px; }
	input[type=checkbox]:checked + label:before { content: "\f14a"; font-weight: 700; color: #3c5f3c; }*/
.form-floating.required.error label:after, .form-check.required.error label:after { content: '*'; color: red; margin-left: 4px; }
.form-group .progress, .form-group .alert-success, .form-group .alert-danger { display: none; }
.form-check-input:focus, .form-check-input:checked { background-color: #181818 !important; }
.form-check-input.is-valid ~ .form-check-label, .was-validated .form-check-input:valid ~ .form-check-label { color: unset !important; }
.form-check-input.is-valid, .was-validated .form-check-input:valid { border-color: unset !important; }

.sponsor { background-color: #fff; padding: 10px 5px; }
	.sponsor a { margin: 0px 4px; }
		.sponsor a img { border: solid 3px #f3f3f3; border-radius: 15px; transition: ease-in-out all 0.3s; }
		.sponsor a:hover img { border: solid 3px #f3cb03; border-radius: 15px; }

footer { background-color: #f3f3f3; padding: 40px 0; }
	footer img.logo { width: 160px; margin-bottom: 20px; }
	footer p { color: #231f20; font-size: 20px; }
	footer a { color: #231f20; transition: ease-in-out all 0.3s; border-bottom: solid 1px silver; }
		footer a:hover { color: #f3cb03; border-color: #f3cb03; }
	footer .tennislogo a { border-bottom: none; }
.social { margin: 25px 0; }
	.social a { background-color: #231f20; color: #fff; display: inline-block; line-height: 1; padding: 10px; font-size: 16px; border-radius: 50%; width: 36px; text-align: center; transition: 0.3s ease-in-out all; margin-right: 6px; }
		.social a:hover { background-color: #f3cb03; color: #fff; }
.privacy { background-color: #231f20; }
	.privacy p { margin: 10px 0; }
		.privacy p a { color: #fff; }

.scrollup { padding: 5px 10px; background-color: #f3cb03; color: #fff; position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: none; box-shadow: #ccc 0 0 20px; }
.scrollshow { display: inline-block; }
.scrollup:hover { background-color: #fce900; color: #fff; }

.wow { visibility: hidden; }
/*
@media(min-width:1500px) {
	.containerxx { max-width: 1300px; }
		.container.container-nav { max-width: 85%; }
	.carouselcontainer .caption-wrapper { width: 45%; padding: 50px; }
	.carouselcontainerheight .carousel-item img { height: 320px; }
}

@media(min-width:1400px) and (max-width:1499px) {
	.containerxx { max-width: 1300px; }
		.container.container-nav { max-width: 85%; }
	.carouselcontainerheight .carousel-item img { height: 280px; }
	.carouselcontainer .caption-wrapper { width: 45%; }
}

@media(min-width:1300px) and (max-width:1399px) {
	.containerxx { max-width: 1200px; }
	.carouselcontainerheight .carousel-item img { height: 220px; }
	.carouselcontainer .caption-wrapper { width: 45%; }
	.carouselcontainer h3 { font-size: 22px; line-height: 28px; }
	.carouselcontainer .carousel-caption.caption-top { top: 30px; }
}

@media(min-width:1200px) and (max-width:1299px) {
	.carouselcontainerheight .carousel-item img { height: 200px; }
	.carouselcontainer .caption-wrapper { width: 45%; }
	.carouselcontainer h3 { font-size: 22px; line-height: 28px; }
}*/



@media(min-width:1400px) {
	.breadcrumbcontainer { background: url(/images/bg-yellow-1400.png) repeat-y center center; }
}

@media(min-width:1200px) and (max-width:1399px) {
	.breadcrumbcontainer { background: url(/images/bg-yellow-1300.png) repeat-y center center; }
}

@media(min-width:1200px) {
	.welkomwrapper { margin-top: -300px; }
}

@media(max-width:1199px) {
}

@media(min-width:992px) and (max-width:1199px) {
	.welkomwrapper { margin-top: -150px; }
	.breadcrumbcontainer { background: url(/images/bg-yellow-1200.png) repeat-y center center; }
}

@media (max-width:991px) {
	h1 { font-size: 34px; }
	h2 { font-size: 30px; }
	h3 { font-size: 26px; }
	h4 { font-size: 50px; }
	body, p, ul, ol, label { font-size: 16px; }
	.welkomwrapper { margin-top: -50px; }
	.welkom h1 { font-size: 24px; }
}

@media(min-width:768px) and (max-width:991px) {
	.hero { height: calc(60vh); }
		.hero h1 { font-size: 70px; }
		.hero p { font-size: 26px; }
	.breadcrumbcontainer { background: url(/images/bg-yellow-900.png) repeat-y center center; }
}

@media(max-width:767px) {
	.breadcrumbwrapper { padding: 70px 0 15px 0; }
	.breadcrumbcontainer .container-md { padding-left: 0; }
	footer p { font-size: 18px; }
}

@media(max-width:575px) {
	footer span { display: block; font-size: 1px; color: #f3f3f3; }
}

@media(max-width:380px) {
}
