.thuiswerken { color: #337539; font-size: 14px; background-color: rgba(255,255,255,0.5); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 3px; font-weight: 600; }
.carousel-indicators li { background-color: #111; }
.carousel-item img { width: 100%; max-width: 300px; }

html { height: 100%; margin: 0; padding: 0; }
body { height: 100%; min-height: 35rem; position: relative;	font-family:'Open Sans',sans-serif;	font-weight: 400; font-size: 40px; }
h1 { font-weight: 400; color: #ffffff; font-size: 60px; }
h2,h3,h4,h5,h6 { font-weight: 600; color: #337539; }

.black-balk { background-color: #201B1B; width: 100%; height: 80px; border-top: 4px solid #007732; padding-top: 12px; padding-left: 20px; color: white; font-size: 30px; }
.black-balk img { width: 50px; height: 50px; margin-right: 20px; }

.groene-balk { padding: 20px; width: 100%; height: 90px; background-image: url(/img/groene-balk.jpg);	background-size: auto 100%;	background-position: right bottom; }
.groene-balk h2 { color: white; font-size: 20px; }
.contact-balk { background-color: #201B1B; /*width: 100%;*/ min-height: 200px; padding-top: 12px; color: white; font-size: 20px; }

.form-holder { width: 100%; margin-bottom: 20px; max-width: 700px; }
.form-holder .form-input { background-image: url(/img/form-input-white.jpg); background-color: #201B1B; color: white; }
.form-holder .form-input-submit { background-image: url(/img/submit-white.jpg); background-color: #ffffff; color: white; }
.form-input { margin-top: 20px; background-image: url(/img/form-input.jpg); background-repeat: no-repeat; padding-left: 60px; height: 40px; border: 0; font-size: 20px; width: 94%; }
.form-input-submit { background-image: url(/img/submit.jpg); background-size: 100% 40px; background-color: #201B1B; color: white; text-align: right; padding-right: 20px; }
.form-group { width: 94%; margin-left: 14px; }

.tekst { font-size: 16px; }
.informatie { font-size: 24px; cursor: pointer; margin-left: 6px; color: #337539;}

.left-padding { padding-left: 40px; }
.top-padding { padding-top: 50px; }
.bottom-padding { padding-bottom: 50px; }
.right-padding { padding-right: 40px; }
.right-small-padding { padding-right: 60px; }

.col2 { padding: 20px; width: 100%; }
.col1 { padding: 20px; width: 100%; }

.foto img { width: 100%; }


.deelnemerknop { float: left; width: 440px; text-align: center; margin-top: 10px; margin-left: 100px; }
.startknop { text-align: center; width: 240px; font-size: 14px; float: left; margin-left: 80px;}
.deelnemerknop a { color: white; }
.topmenu { width: 100%; height: 100px; background-color: #201B1B; z-index: 3; }
.aanmeld-tekst { display: block; margin-top: 22px; }
.aanmeld-intro { display: none; margin-top: 22px; margin-right: 20px; float: left; color: white; font-size: 30px; }

.overlay { position: absolute; top: 100px; left: 0; height: calc(100% - 100px); width: 100%; background-image: url(/img/bg.jpg); background-size: auto 100%; background-position: right bottom; opacity: 0.7; z-index: 1; }

.masthead {	position: relative;	overflow: hidden; padding-bottom: 3rem;	z-index: 2; height: 100%; }
.masthead .masthead-bg { position: absolute;	top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; }
.masthead .masthead-content { font-family:'Open Sans',sans-serif; font-weight:800; margin-left: 20px; }
.masthead .masthead-content a {	display: inline-block; opacity: 0.3; color: #111; transition: 0.5s; }
.masthead .masthead-content a:hover { opacity: 0.6;	text-decoration: none; }
.masthead .masthead-content .input-group-newsletter input {	height: auto; font-size: 1rem; padding: 1rem; }
.masthead .masthead-content .input-group-newsletter button { font-size: 0.8rem;	font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 1rem; }
.masthead img { width: 60%; margin-bottom: 20px; }

.menu-icons { z-index: 2; margin: 0; /*position: absolute;*/ position: fixed; right: 0; top: 0; width: 150px;	height: 100%; background-color: #201B1B; display: none; }
.menu-icons ul { text-align: center; width: auto; }
.menu-icons ul > li { line-height: 0.3;	margin-bottom: 40px; display: block; width: 100%; height: 16%; }
.menu-icons ul > li:last-child { margin-bottom: 0; }
.menu-icons ul > li > a { color: white; font-size: 14px; opacity: 0.85; transition: 0.5s; }
.menu-icons ul > li > a:hover { opacity: 1;	text-decoration: none; }
.menu-icons img { width: 80px; height: 80px; }

.flip-holder { position: relative; width: 320px; overflow: auto; margin-left: auto; margin-right: auto; margin-top: 20px; padding: 0; }
.flip {	 margin-right: 5%; margin-bottom: 30px; width: 320px; height: 320px; float: left; -webkit-perspective: 800; perspective: 800; position: relative; text-align: center; }
.flip .card.flipped { -webkit-transform: rotatey(-180deg); transform: rotatey(-180deg); }
.flip .card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; transform-style: preserve-3d; transition: 0.5s; /*background-color: #fff; */ }
.flip .card .face { -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 2; }
.flip .card .front { position: absolute; width: 100%; z-index: 1; }
.flip .card .front img{ width: 100%; height: 100%; }
.flip .card .img { position: relaitve; width: 100%; height: 100%; z-index: 1; border: 2px solid #000; }
.flip .card .back { padding-top: 10%; -webkit-transform: rotatey(-180deg); transform: rotatey(-180deg); position: absolute; }
.inner{ margin:0px !important; width: 100%; font-size: 14px; }
.inner p { padding: 0 10px; }

.hidesmall { display: none;}


video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); z-index: 0; }


.btn-secondary {
	background-color: #cd9557;
	border-color: #cd9557;
}

.btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover {
	background-color: #ba7c37 !important;
	border-color: #ba7c37 !important;
}
.logo { margin-left: 140px; margin-top: 30px; display: block; width: 280px; }
.input { font-weight: 300 !important; }

/*
@media (pointer: coarse) and (hover: none) {
	body { background: url("../img/bg-mobile-fallback.jpg") #002E66 no-repeat center center scroll;	background-position: cover;	}
	body video { display: none;	}
}
*/

#aanmelden { font-size: 28px; }
.text-paragraphs { padding-top: 0; }
.text-paragraphs p { font-size: 28px; margin-top: 20px; background-image: url(/img/p.jpg); background-repeat: no-repeat; padding-left: 60px; min-height: 40px; width: 100%; padding-top: 4px; }
.contact-margin p { margin: 0; font-size: 70%; }
#return-to-top { z-index: 999;position: fixed; bottom: 20px; right: 20px; background: rgba(0, 0, 0, 0.7); width: 50px; height: 50px;display: block;text-decoration: none;-webkit-border-radius: 35px;-moz-border-radius: 35px;border-radius: 35px;display: none;-webkit-transition: all 0.3s linear;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease; }
#return-to-top i {color: #fff;margin: 0;position: relative;left: 16px;top: -13px; font-size: 19px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
}

.filmpje { height: 365px; }
.aanmeld-intro { display: none;}

.actueel { width: 140px; position: absolute; top:142px; right: 0px; z-index: 999; }
.actueel img { width: 90%; }

@media (min-width: 768px) {
	.thuiswerken { float: right; margin-right: 13%; width: 80%; font-size: 14px; }
	.flip-holder { width: 420px; margin-top: 30px; padding: 0; }
	.black-balk { height: 110px; border-top: 4px solid #007732; padding-top: 12px; font-size: 44px;}
	.black-balk img { width: 80px; height: 80px; margin-right: 24px; }
	.form-holder { padding: 0 0 20px 20px; }
	.form-input { width: 84%; }
	.form-input-submit { margin-left: 30px; }
	.form-group { width: 84%; margin-left: 38px; }
	#aanmelden { font-size: 40px; }
	.tekst { font-size: 20px; }
	.foto img { width: 98%; }
	.masthead { height: calc(100% - 100px); min-height: 0; width: 90%; }
	.masthead .masthead-bg { min-height: 0; }
	.masthead .masthead-content { margin-top: 60px;	padding-right: 20px; padding-left: 10px; font-size: 40px; 	}
	.masthead .masthead-content h1 { font-size: 3.5rem; }
	.masthead .masthead-content a { margin-left: 12px; }
	.masthead img { width: 80%; }
	
	.actueel { width: 200px; position: absolute; top:210px; right: 50px; z-index: 999; }
	.actueel img { width: 90%; }


	.menu-icons { display: block; }
	.col1 { padding: 30px; padding-right: 170px; }
	.col2 { padding: 30px; padding-right: 170px; }
    .groene-balk { height: 130px; }
	.groene-balk h2 { font-size: 32px; width: calc(100% - 150px); }
	.kreten { font-size: 17px; color: white; line-height: 1.7em; }
	.kreet1 { float: left; margin-left: 20px; }
	.kreet2 { float: right; margin-right: 160px; }
	.kreet3 { width: 85%; float: left; text-align: center; }
	.kreet4 { float: left; }
	.kreet5 { float: right; margin-right: 140px; }
	.deelnemerknop { width: 650px; margin-left: 20px;}
	.startknop { margin-left: 10px; }
	.aanmeld-intro { margin-right: 10px; font-size: 20px; }
}

@media (min-width: 872px) {
	.actueel { position: absolute; top:210px; right: 50px; z-index: 999; }
	.kreten { font-size: 20px; color: white; line-height: 1.7em; }
	.kreet1 { float: left; margin-left: 20px; }
	.kreet2 { float: right; margin-right: 160px; }
	.kreet3 { width: 85%; float: left; text-align: center; }
	.kreet4 { float: left; }
	.kreet5 { float: right; margin-right: 150px; }
}


@media (min-width: 992px) {
	.thuiswerken { margin-right: 23%; width: 60%; font-size: 14px; margin-top: 20px; }
	.hidesmall { display: block;}
	.filmpje { height: 420px; }
	.groene-balk { height: 210px; }
	.groene-balk h2 { font-size: 46px; margin-top: 20px; }
	.kreten { font-size: 22px; color: white; line-height: 2.5em; }
	.kreet1 { float: left; margin-left: 20px; }
	.kreet2 { float: right; margin-right: 160px; }
	.kreet3 { width: 85%; float: left; text-align: center; }
	.kreet4 { float: left; }
	.kreet5 { float: right; margin-right: 200px; }
	.col1 { padding-right: 0px; }
	.joined { padding-right: 170px; }
	.menu-vragenlijst {	width: 100%; height: 120px; }
	.masthead .masthead-content { font-size: 42px; line-height: 1.3; margin-top: 20px;	}
	.masthead .masthead-content a { margin-left: 12px; }
	/*.masthead .masthead-content a {	margin-left: 98px;	}*/
	.masthead img { width: 55%; margin-bottom: 10px; }
	.actueel { position: absolute; top:150px; right: 120px; z-index: 999; }
	.actueel img { width: 90%; }
	.flip-holder { width: 800px; height: 1170px; margin-left: 50px; margin-right: 0;  padding: 0; }
	.flip { margin-right: 5%; width: 350px; height: 350px; }
	.deelnemerknop { width: 646px; margin-right: 130px; }
	.slidetekst { width: 60%; float: left;}
	.slideimg { width: 40%; float: left;}
	.startknop { margin-left: 20px; }
	.aanmeld-intro { margin-right: 10px; font-size: 20px; }
	.startknop { margin-left: 50px; }
	.deelnemerknop { width: 900px; margin-left: 20px;}
}


@media (min-width: 1200px) {
	.thuiswerken { margin-right: 23%; width: 400px; font-size: 14px; margin-top: 20px; }
	.aanmeld-intro { display: block;}
	.filmpje { height: 470px; }
	.deelnemerknop { width: 1100px; margin-left: 50px; }
	.groene-balk { height: 240px; padding-left: 100px; }
	.groene-balk h2 { font-size: 50px; }
	.kreten { font-size: 25px; color: white; line-height: 2.2em; }
	.kreet1 { float: left; margin-left: 20px; }
	.kreet2 { float: right; margin-right: 160px; }
	.kreet3 { width: 85%; float: left; text-align: center; }
	.kreet4 { float: left; }
	.kreet5 { float: right; margin-right: 200px; }
	.left-padding { padding-left: 160px; }
	.top-padding { padding-top: 50px; }
	.bottom-padding { padding-bottom: 50px; }
	.right-padding { padding-right: 160px; }
	.right-small-padding { padding-right: 60px; }
	.masthead {	width: 80%;	} /* width: 74%;	 */
	.masthead .masthead-content { margin-top: 20px;	padding-right: 20px; padding-left: 60px; font-size: 44px;}
	.masthead img { width: 60%; }
	.actueel { position: absolute; top:160px; right: 140px; z-index: 999; }
	.actueel img { width: 100%; }
	.col1 { padding-left: 100px; }
	.black-balk {  padding-left: 100px; }
	.flip-holder { width: 1100px; height: 810px; margin-left: 70px; margin-right: 0; padding: 0; }
	.flip { margin-right: 2%; margin-top: 50px; width: 310px; height: 310px; }
	#carouselExampleIndicators { height: 320px;}
}

@media (min-width: 1320px) {
	.kreten { font-size: 30px; color: white; line-height: 2.1em; }
	.kreet1 { float: left; margin-left: 20px; }
	.kreet2 { float: right; margin-right: 160px; }
	.kreet3 { width: 90%; float: left; text-align: center; }
	.kreet4 { float: left; }
	.kreet5 { float: right; margin-right: 200px; }
}

@media (min-width: 1420px) {
	.masthead .masthead-content { margin-top: 30px; font-size: 44px; }
	.masthead img { width: 60%; max-width: 720px;}
	.actueel { position: absolute; top:160px; right: 80px; z-index: 999; }
	.actueel img { width: 105%; }
	.filmpje { height: 520px; }
	.col1 { padding-left: 160px; padding-top: 60px; }
	.col2 { padding-top: 60px; }
	.groene-balk { padding-left: 160px; }
	.black-balk {  padding-left: 160px; }
	.flip-holder { width: 1200px; margin-left: 150px; margin-right: 0;  padding: 0; }
	.flip { margin-right: 4%; margin-top: 50px; }
	.joined { padding-right: 210px; }
}

@media (min-width: 1500px) {
	.masthead .masthead-content { margin-top: 40px; padding-right: 20px; padding-left: 100px; }
	.masthead img { margin-bottom: 60px; }
}

@media (min-width: 1600px) {
	.col1 { padding-top: 80px; padding-left: 160px;}
	.col2 { padding-top: 80px; padding-left: 60px; }
	.flip-holder { width: 1400px; height: 950px; }
	.flip { margin-right: 5%; width: 380px; height: 380px; }
	.col2 { padding-right: 210px; }
	.inner { font-size: 16px;}
}

@media (min-width: 1800px) {
	.flip-holder { width: 1600px; height: 1010px; }
	.flip { margin-right: 6%; width: 400px; height: 400px; }
	.joined { padding-right: 250px; }
}

@media (min-width: 2000px) {
	.flip-holder { width: 1700px; height: 1130px; margin-left: auto; margin-right: auto; }
	.flip { margin-right: 6%; width: 440px; height: 440px; }
}

@media only screen and (max-width: 768px) {
	.text-paragraphs p { font-size: 22px; }
	.responsive td:before {content: attr(data-label); float: left; text-transform: uppercase; font-weight: bold;}
	.responsive td { display: block; }
	.responsive td { border: 0px; border: 0px; padding: 10px 15px;}
	.responsive th, .responsive td { padding: 10px; text-align: center;}
}

@media only screen and (max-width: 767px) {
	.thuiswerken { float: right; width: 50%; font-size: 14px; min-width: 202px;}
	.overlay { height: 100%; }
	.startknop { margin-left: 10px; }
	.deelnemerknop { width: 100%; margin-right: 0px; margin-left: 0px; }
	.kreten { font-size: 14px; color: white; line-height: 1.7em; }
	.kreet1 { float: left; margin-left: 20px; }
	.kreet2 { float: right; margin-right: 120px; }
	.kreet3 { width: 85%; float: left; text-align: center; }
	.kreet4 { float: left; }
	.kreet5 { float: right; margin-right: 4px; }
	.topper { padding-bottom: 1rem!important; }
}

.startknop img { width: 80px; height: 80px; float: left;}

@media only screen and (max-width: 520px) {
	.thuiswerken {  margin-top: 10px; }
	#return-to-top i { top: -1px; }
	.startknop { margin-left: 0px; width: 50%; }
	.startknop img { width: 60px; height: 60px; }
	.aanmeld-tekst { margin-top: 8px; font-size: 12px; }
	.overlay { top: 80px;  height: 100%; /*height: calc(100% - 80px);  */ }
	.topmenu { height: 80px; }
	.filmpje { height: 300px; }
	body { font-size: 26px; }
	#werkwijze { font-size: 18px; }
	#preventie { font-size: 16px; }
	.captcha { margin-left: -10px; width: 100%; }
	.pb-5, .py-5 {  padding-bottom: 0.6rem!important; }
	.kreten { font-size: 10px; color: white; line-height: 1.7em; }
	.kreet1 { float: left; margin-left: 10px; }
	.kreet2 { float: right; margin-right: 10px; }
	.kreet3 { width: 85%; float: left; text-align: center; }
	.kreet4 { float: left; }
	.kreet5 { float: right; margin-right: 4px; }
}