/*!
 * inzetbaarheids-expert v1.0.2 (https://inzetbaarheids-expert.nl)
 * Copyright 2013-2018
 * Licensed redhot1
 */

 .video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
	margin-bottom: 20px;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.powered { color: #a6a6a9; display: block; margin-top: 140px; }

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; }

.question { width: 90%; padding: 20px; background: #efefef;}
.uitleg { font-size: 80%; }

.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; }

.btn-info { padding: 10px 40px; font-size: 30px; margin-top: 40px; }

.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; }
.small-tekst { font-size: 14px; }
.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%; }
.dashboard { padding: 20px; width: 100%; max-width: 1560px; }

.foto img { width: 100%; }

.overlay { position: absolute; top: 0; left: 0; height: 100%; 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; }

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: #337539; border-color: #337539; }
.btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover { background-color: #ba7c37 !important; border-color: #ba7c37 !important; }
.input { font-weight: 300 !important; }
#aanmelden { font-size: 28px; }

.logo { margin-left: 140px; margin-top: 30px; display: block; width: 280px; }
.p { margin-top: 20px; background-image: url(/img/p.jpg); background-repeat: no-repeat; padding-left: 60px; min-height: 40px; width: 100%; color: #333; padding-top: 4px; }
.text-paragraphs p { margin-top: 20px; background-image: url(/img/p.jpg); background-repeat: no-repeat; padding-left: 60px; min-height: 40px; width: 100%; color: #fff; padding-top: 4px; }
.contact-margin p { margin: 0; font-size: 70%; white-space: nowrap; }

#return-to-top {
    z-index: 99999;
	position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    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;
}

.rapport_button { float: right; color: white; background-color: #417e23; width: 100%; cursor: pointer; }
.dashboard-right { margin-bottom: 20px; }
.sub { margin-left: 10px; font-size: 12px;  }
.uitloggen { font-size: 14px; float: right; margin-right: 200px; }
.uitloggen a { color: white; }
.black-balk a { color: white; }
.black-balk a:hover { text-decoration: none; color: #417e23; }
.meest-gesteld { font-size: 20px; }

iframe { width:100%; height: 200px; }


.carousel-indicators li { background-color: #111; }
.carousel-item img { width: 100%; max-width: 300px;}
#carouselExampleIndicators { height: 500px; }
.slideimg { width: 100%; float: left; margin-bottom: 20px; text-align: center;}
.slidetekst { width: 100%;  float: left;}

.logo-small { max-width:360px; margin-top: 20px; }

@media (min-width: 520px) {
	#carouselExampleIndicators { height: 440px; }
}
@media (min-width: 640px) {
	#carouselExampleIndicators { height: 400px; }
}



@media (min-width: 568px) {
	iframe { width:100%; height: 300px; }
}

@media (min-width: 768px) {
	.extra-margin { margin-top: 80px; margin-bottom: 80px; }
	#carouselExampleIndicators { height: 500px; }
	iframe { width:100%; height: 400px; }
	.meest-gesteld { font-size: 40px; }
	.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; }
	.small-tekst { font-size: 18px; }
	.foto img { width: 98%; }
	.masthead { height: 100%; 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: 30px; }
	.masthead .masthead-content h1 { font-size: 3.5rem; }
	.masthead .masthead-content a { margin-left: 12px; }
	.masthead img { width: 80%; }
	.menu-icons { display: block; }
	.col1 { padding: 30px; padding-right: 170px; }
	.col2 { padding: 30px; padding-right: 170px; }
	.dashboard { padding: 30px; padding-right: 170px; }
    .groene-balk { height: 130px; }
	.groene-balk h2 { font-size: 32px; width: calc(100% - 150px); }
	.modal-dialog { max-width: 740px; }
	.powered { float: left; width: 260px;color: #a6a6a9; display: block; margin-top: 140px; letter-spacing: 2px;}
}


@media (min-width: 992px) {
	.powered img { width: 100%; max-width: 260px; }
	#carouselExampleIndicators { height: 380px; }
	.slideimg { width: 100%; float: left; text-align: center; }
	.slidetekst { width: 60%;  float: left; margin-left:20%; text-align: center;  }
	.tekst { line-height: 32px; }
	iframe { width:97%; height: 400px; }
	.groene-balk { height: 210px; }
	.groene-balk h2 { font-size: 46px; margin-top: 20px; }
	.col1 { padding-right: 0px; }
	.dashboard { padding-right: 0px; }
	.joined { padding-right: 170px; }
	.menu-vragenlijst {	width: 100%; height: 120px; }
	.masthead .masthead-content { font-size: 42px; line-height: 1.3; }
	.masthead .masthead-content a { margin-left: 12px; }
	/*.masthead .masthead-content a {	margin-left: 98px;	}*/
	.masthead img { width: 70%; margin-bottom: 60px; }
	.flip-holder { width: 800px; height: 1170px; margin-left: 50px; margin-right: 0;  padding: 0; }
	.flip { margin-right: 5%; width: 350px; height: 350px; }
	.modal-dialog { max-width: 860px; }
	.powered { width: 360px; letter-spacing: 1px; margin-top: 110px; }
}


@media (min-width: 1200px) {
	.video-container iframe, .video-container object, .video-container embed { top:0; left:10%; width:80%; }

	#carouselExampleIndicators { height: 220px; }
	iframe { width:96%; height: 500px; }
	.groene-balk { height: 240px; padding-left: 100px; }
	.groene-balk h2 { font-size: 50px; }
	.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: 70%; }
	.col1 { padding-left: 100px; }
	.dashboard { padding-left: 100px; min-height: 400px; }
	.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; }
}


@media (min-width: 1420px) {
	.masthead .masthead-content { margin-top: 30px; font-size: 46px; }
	.masthead img { width: 60%; max-width: 720px;}
	.col1 { padding-left: 160px; padding-top: 60px; }
	.col2 { padding-top: 60px; }
	.dashboard { padding-left: 160px; 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; }
}

@media (min-width: 1600px) {
	#carouselExampleIndicators { height: 300px; }
	.col1 { padding-top: 80px; padding-left: 160px;}
	.col2 { padding-top: 80px; padding-left: 60px; }
	.dashboard { padding-top: 80px; padding-left: 0px; margin-left:auto; margin-right:auto; }
	.flip-holder { width: 1400px; height: 950px; }
	.flip { margin-right: 5%; width: 380px; height: 380px; }
	.col2 { padding-right: 210px; }
	.inner{ font-size: 16px; }
	.powered { width: 360px; letter-spacing: 1px; margin-top: 140px; }
}

@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) {
	.masthead .masthead-content {font-size: 22px; }
	.uitloggen { font-size: 12px; float: right; margin-right: 20px; }
	.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;}
	.question { width: 100%; }
}

@media only screen and (max-width: 767px) {
	.logoos { padding: 0px 60px; }
	.logo-small { max-width:320px; }
	.powered { float: right; width: 160px;color: #a6a6a9; display: block; margin-top: 140px; margin-right: 10px; letter-spacing: 2px;}
	.powered img { margin-top: 10px; margin-left: 0px; width: 100%; }
}