@import url(../../template/css/style.css?v=2);

@import url('https://fonts.googleapis.com/css?family=Kanit:400,500,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

/*
font-family: 'Kanit', sans-serif;
font-family: 'Open Sans', sans-serif;
*/
h1{ margin-top: 0; }
.container-fluid.content{ margin: 50px 0 50px 0; }

/* BREADCRUMBS */
.container_breadcrumbs{ background: #f6f6f6; }
.container_breadcrumbs .row{ padding: 5px 0; }
.container_breadcrumbs .row .col-md-12{ padding: 0; }
.container_breadcrumbs .block.breadcrumb{ margin-bottom: -10px; padding: 0; background-color: transparent; font-size: 14px; color: #989898; }
.container_breadcrumbs .block.breadcrumb ul{ padding-left: 0; }
.container_breadcrumbs .block.breadcrumb ul:before{ content: 'U bent hier: '; margin-right: 20px; font-weight: 700; }
.container_breadcrumbs .block.breadcrumb ul li{ list-style: none; display: inline; }
.container_breadcrumbs .block.breadcrumb ul li a{ color: #989898; font-weight: 400; }
.container_breadcrumbs .block.breadcrumb ul li.breadcrumarrow:after{ content: '\f105'; font-family: 'Font Awesome 5 Pro'; display: inline-block; font-style: normal; font-variant: normal; margin: 0 3px; }
.container_breadcrumbs .block.breadcrumb ul li:last-child a{ font-weight: 400; }

/**/
.buttonbox{background: #58b032;font-size: 30px;color: #ffffff;text-align: center;line-height: 33px;width: 200px;height: 200px;margin-top: -40px;padding: 31px;border-radius: 100%;transform: rotate(10deg);float: right;}
.block.list.usp{ margin-top: 8px; }

/* BOX */
.leftbox,
.rightbox{ }
.leftbox h3,
.rightbox h3{ text-align: center; margin-top: 20px;	color: #3B3B3B; margin-bottom: 0;}

.leftbox text,
.rightbox text{ font-family: 'Kanit', sans-serif !important; }

.leftbox #left-boxes > g,
.rightbox #right-boxes > g{ cursor: pointer; }

.leftbox #left-boxes > g:hover g:first-child rect,
.rightbox #right-boxes > g:hover g:first-child rect{ fill: #ffcc42 !important; }

.block.form.contactbox{ position: absolute; z-index: 9999; left: 35px; background: #272725; padding: 30px; width: 510px; color: #fff !important; margin-top: 100px; display:none;}
.block.form.contactbox.left{left: 49px;right: unset;display:block;top: 171px; overflow: hidden;}
.block.form.contactbox.left:after{ width: 0; height: 0;	border-top: 40px solid transparent;	border-bottom: 40px solid transparent; border-left: 40px solid #272725;	content: ''; position: absolute; right: -40px; top: 40px; }

.block.form.contactbox.right{left: unset;right: -243px;display:block;top: 171px;}
.block.form.contactbox.right:after{ width: 0; height: 0; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-right: 40px solid #272725; content: ''; position: absolute; left: -40px; top: 40px; }

.block.form.contactbox-fixed.left,
.block.form.contactbox-fixed.right { position: fixed; left: 50%; transform: translateX(-50%); top: 50px; margin: 0; box-shadow: 0px 0px 0px 100vmax rgba(0,0,0,0.6); overflow: auto; }

.block.form.contactbox-fixed.left::after,
.block.form.contactbox-fixed.right::after { display: none; }

.close{ position: absolute; right: 20px; top: 20px; color: #fff; width: 20px; height: 20px; }
.close:after{ content: "X"; color:#fff; }
.form-horizontal .form-group { margin-left: 0; margin-right: 0; }
.form-horizontal .control-label{ padding-top: 0; margin-bottom: 0; text-align: left; }
.block.form.contactbox .col-sm-3{ width: 100%; }
.block.form.contactbox .col-sm-9{ width: 100%; }
.block.form.contactbox .col-sm-offset-3{ margin-left: 0; }
label{ font-weight: normal; }
.btn.btn-default{ background-color: #58b032; border-color: #58b032; color: #ffffff; }

/* ACCORDEON */
ul.acc{ margin: 10px 0 15px 0; overflow: hidden; padding: 0; }
.acc > li{ list-style-type: none; padding: 0; }
.acc_ctrl{ background: #FFFFFF; border: none; border-bottom: solid 1px #F2F2F2; cursor: pointer; display: block; outline: none; padding: 5px; position: relative; text-align: left; width: 100%; }
.acc_ctrl span{ color: #58b032; }
.acc_ctrl:before{ background: #434343; content: ''; height: 2px; margin-right: 37px; position: absolute; right: 0; top: 50%; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; width: 14px; }
.acc_ctrl:after{ background: #434343; content: ''; height: 2px; margin-right: 37px; position: absolute; right: 0; top: 50%; width: 14px; }
.acc_ctrl.active:before{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
.acc_ctrl.active h2, .acc_ctrl:focus h2{ position: relative; }
.acc_panel{ background: #F2F2F2; display: none; overflow: hidden; color: #333333; padding: 20px 25px; }

/* OVERIGE */
.block.content table tr td:nth-child(1){ min-width: 100px; }

.contactbox textarea.form-control {resize: vertical !important;} 

@media only screen and (max-height: 750px){
	.block.form.contactbox-fixed.left, .block.form.contactbox-fixed.right { top: 0; max-height: 100vh; }
}

/* #Tablet (Landscape)
================================================== */
@media only screen and (min-width: 959px) and (max-width: 1220px){
}

/* Tablet (Portrait)
================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.block.form.contactbox.right:after{ border: none; content: ''; }
	.block.form.contactbox.left:after{ border: none; content: ''; }
	.block.form.contactbox.right{  }
	.block.form.contactbox.left{ margin-top: 0; }
}

/* #Mobile (Landscape)
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.block.form.contactbox{ padding: 15px; max-width: 400px; width: 100%; }
	.block.form.contactbox.right:after{ border: none; content: ''; }
	.block.form.contactbox.left:after{ border: none; content: ''; }
}

/* Mobiel (Portrait)
================================================== */
@media only screen and (max-width: 479px) {
	.container_breadcrumbs .block.breadcrumb ul:before{ margin-right: 0px; }
	.container_breadcrumbs .block.breadcrumb ul{ line-height: 20px; }

	.block.form.contactbox{ padding: 15px; max-width: 510px; width: 100%; }
	.block.form.contactbox.right:after{ border: none; content: ''; }
	.block.form.contactbox.left:after{ border: none; content: ''; }
}