/*********************************************************************
	General
	**********************************************************************/
	@import url('https://fonts.googleapis.com/css?family=Oswald');
	
	:root {
		--bs-mellow-main-color:	#b38b1a;   
		--bs-mellow-second-color: #bebd6b; /*  #949963; */
		--bs-mellow-third-color: #483603;	
		--bs-mellow-border-color: #bcc0c3;
		--bs-mellow-background1-color: #dfe0df;
		--bs-mellow-background2-color: #fcf9f4; 
		--bs-mellow-background3-color: #c4c5c4;
		--bs-text-color: #3b3b3b;

	}

	
	body {
		font-family: 'Open Sans', sans-serif, verdana, geneva;
		color:var(--bs-text-color);
		font-size: 16px;
		line-height: 26px;
		margin-top: 120px; /* ~ NAVBAR */
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-weight: 600; 
		color:var(--bs-text-color);
	}
	
	h1 {
		font-size: 36px;
		margin-bottom: 50px;
	}
	
	h2 {
		font-size: 26px;
		margin-bottom: 45px;
	}
	
	h3{
		font-size: 16px;
		color: #787878;
		font-weight: 400;
		line-height: 24px;
	}
	
	h4{
		font-size: 16px;
	}

	footer a {
		color: #999;
		text-decoration: none;
	}

	footer a:hover {
		color: #fff;
		text-decoration: none;
	}


	a.white-link {
		color: var(--bs-mellow-background2-color);
		text-decoration: none;
	}

	a.white-link:hover, a:hover, a:focus {
		color: var(--bs-mellow-second-color);
		text-decoration: none;
	}

	a.carmen_background {
		color: var(--bs-text-color);
		text-decoration: none;
	}

	a.light_background {
		color: #666;
		text-decoration: none;
	}
	
	a.light_background:hover, a.light_background:focus, a.carmen_background:hover, a.carmen_background:focus {
		color: var(--bs-text-color);
		text-decoration: none;
	}

	ul.checklist {list-style: none}
	ul.checklist li::before {
		content: '✔';
		display: inline-block; 
		width: 1.2em;
		font-size: 1.2em;
		line-height:1.5em;
	}

	ul.dash {list-style: none; margin-left: 0.65em;}
	ul.dash li::before {
		content: '-';
		display: inline-block; 
		width: 1em;
		font-size: 1.1em;
		margin-left: -1em;
	}


	/*********************************************************************
	SECTIONS
	**********************************************************************/

	#features {
	  background: var(--bs-mellow-background1-color);
	  padding: 80px 0;
	}

	#diensten {
		background: var(--bs-mellow-background2-color);
		padding: 80px 0;
	}

	#anker-contact {
		background: var(--bs-mellow-background1-color);
		padding: 60px 0 0 0;
	}



	#ad_intro {
		background: var(--bs-mellow-background1-color);
		padding:90px 0 80px 0;
	}

	#ad_aankoop {
		background: var(--bs-mellow-background2-color);
		padding:80px 0 ;
	}

	#ad_verkoop {
		background: var(--bs-mellow-background1-color);
		padding:80px 0 ;
	}

	#ad_privaat-beheer {
		background: var(--bs-mellow-background2-color);
		padding:80px 0 ;
	}

	#ad_verhuur {
		background: var(--bs-mellow-background1-color);
		padding:80px 0 ;
	}

	#ad_webform {
		background: var(--bs-mellow-background3-color);
		padding:80px 0 ;
	}

	
	/** GOOGLE MAP ***/
	/*
	#map-canvas {
		width: 100%;
		height: 400px;
		background-color: #322F31;
		margin: 0 auto;
	}
	*/
	

	

	/*********************************************************************
	Navigation bar
	**********************************************************************/	

	.navbar {
		padding:0; /* override */
	}

	.navbar .btn-decoration > li {
		text-transform:uppercase;
		line-height: auto;
		vertical-align: middle;
		padding:30px 14px 40px 30px;
		font-size:15px;
		font-weight:bold;
		color:#000;
		border-top: transparent 8px solid;
	}


		
	
	
	@media (max-width: 767px) {		
		  .navbar .btn-decoration > li > a {
			text-transform:uppercase;
			line-height: auto;
			vertical-align: middle;
			margin:0;
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			font-size:16px;
			font-weight:bold;
			color:#000;
			text-shadow: none;
			box-shadow: none;
		}
		
		.btn-decoration >li >a {
			padding:5px 0 0 20px;
		}
	}

	@media (max-width: 991px) {		
		.navbar .btn-decoration > li {
			padding: 10px 40px;
		}

		.navbar .btn-decoration > li:last-child {
			padding: 10px 40px 50px 40px;
		}
	}
	
	.navbar .btn-decoration > li .active {
		background-color: var(--bs-mellow-third-color);
		color: #fff;
		padding:10px 20px;
		border-radius:5px;
	}
	
	
	.navbar .btn-decoration > .active > a:hover, 
	.navbar .btn-decoration > .active > a:focus {
		border: none;
		color :var(--bs-mellow-second-color);
		font-weight:bold;
	}
	
	.navbar .btn-decoration > li:hover > a {
		color: var(--bs-mellow-second-color);
	}

	.navbar .btn-decoration > li:nth-last-child(2) > a { 
		padding:10px 20px;
		border: 2px solid var(--bs-mellow-main-color);
		color: var(--bs-mellow-main-color);
		background-color: transparent;
		border-radius:5px;
	}

	.navbar .btn-decoration > li:nth-last-child(2) > a:hover { 
		padding:10px 20px;
		border: 2px solid var(--bs-mellow-third-color);
		color: #fff;
		background-color: var(--bs-mellow-third-color);
		border-radius:5px;
	}





	
	.navbar-toggler {
		border-radius: 0;
		border-color: #999;
		margin-left:10px;
	}

	/* override */
	.navbar-toggler:focus {
		box-shadow: none;
	}



	.language-icon {
		width: 23px;
		height: 20px;
		position: relative;
		display: inline-block;
	}
	
	.language-icon .img-top {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
	}
	
	.language-icon:hover .img-top {
		padding-top:4px;
		display: inline;
	}


	.dropdown-menu {
	  	background-color: #FFF;
		border-radius:0;
	}


	.dropdown-menu > li > a {
		color:#666;
		font-weight:bold;
		font-size:12px;
		line-height:26px;
		text-transform: uppercase;
	}
	
	.dropdown-menu > .active > a {
		color: #FFF;
		background: #333;
		font-weight:bold;
		font-size:12px;
		line-height:26px;
	}

	.dropdown-menu > .active > a:hover,
	.dropdown-menu > .active > a:focus {
	  color: #000;
	  background: #eee;
	}

	.dropdown-item.active {
		border-radius:0 !important;
	}



	


	/*********************************************************************
	SERVICES
	**********************************************************************/
	
	.imagecontainer {
		position: relative;
	}

	.resimage {
		opacity: 1;
		display: block;
		transition: .5s ease;
		backface-visibility: hidden;
	}

	.textinmiddle {
		transition: .5s ease;
		opacity: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%)
	}
		
	.imagecontainer:hover .resimage {
		opacity: 0.6;
	}
	
	.imagecontainer:hover .textinmiddle {
		opacity: 1;
	}



	.animate__animated {
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-duration: var(--animate-duration);
		animation-duration: var(--animate-duration);
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}

	.animate__animated.animate__slow {
		-webkit-animation-duration: calc(1s * 2);
		animation-duration: calc(1s * 2);
		-webkit-animation-duration: calc(var(--animate-duration) * 2);
		animation-duration: calc(var(--animate-duration) * 2);
	}

	.animate__pulse {
		-webkit-animation-name: pulse;
		animation-name: pulse;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
	}

	.animate_left2right {
		animation: bounceInLeft;    /* Referring directly to the animation's @keyframe declaration */
		animation-duration: 1.2s;   /* Required: don't forget to set a duration! */
	}
	

	/*********************************************************************
	INDEX
	**********************************************************************/

	
	.feature-wrap h2 {
		margin-top:0;
	}

	
	a.service-icon-1 {
		height: 110px;
		width: 110px;
		background-image: url('../decor/immobilien.png');
		background-repeat: no-repeat;
		background-position: center bottom;
		display: inline-block;
	}
	
	a.service-icon-1:hover {
		height: 110px;
		width: 110px;
		background-image: url('../decor/immobilien-selected.png');
		background-repeat: no-repeat;
		background-position: center bottom;
		display: inline-block;
	}
	
	a.service-icon-2 {
		height: 110px;
		width: 110px;
		background-image: url('../decor/syndicus.png');
		background-repeat: no-repeat;
		background-position: center bottom;
		display: inline-block;
	}
	
	a.service-icon-2:hover {
		height: 110px;
		width: 110px;
		background-image: url('../decor/syndicus-selected.png');
		background-repeat: no-repeat;
		background-position: center bottom;
		display: inline-block;
	}
	
	a.service-icon-3 {
		height: 110px;
		width: 110px;
		background-image: url('../decor/maintenance.png');
		background-repeat: no-repeat;
		background-position: center bottom;
		display: inline-block;
	}
	
	a.service-icon-3:hover {
		height: 110px;
		width: 110px;
		background-image: url('../decor/maintenance-selected.png');
		background-repeat: no-repeat;
		background-position: center bottom;
		display: inline-block;
	}

	

	

	
	
	/*********************************************************************
	INDEX - MOVIE
	**********************************************************************/
	
	.movie-container {
		width: 100vw;
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
		height: 500px;
		max-height: 500px;
		overflow: hidden;
		background: rgba(72, 54, 3, 0.5);
	}

	.movie-container::after {
		width:100%;
		height:100vh;
		content: '';
		position:absolute;
		top:0;
		left:0;
		background: rgba(72, 54, 3, 0.5);
	}


	#video-background {
		width: 100%; 
		position:relative; 
		top: -200px;
	}


	
	article h1 {
		position: absolute;
		margin-top:-100px;
		width: 100%;
		font-size: 36px;
		letter-spacing: 5px;
		color: #fff;
		font-family: Oswald, sans-serif;
		text-align: center;
	}

	
	@media (max-width: 1242px) {
		
		.movie-container {
			margin-top:120px;
			margin-bottom:0;
			min-width:100%;
			height:100%;
		}

		#video-background {
			top: 0px;
		}
		
		article h1 {
			margin-top:-50px;
			font-size: 16px;
			letter-spacing: 2px;
			font-weight: normal; 
		}
	}


	
	

		
	/*********************************************************************
	TE HUUR
	**********************************************************************/
	
	a.nodecoration {
		text-decoration:none;
		color: var(--bs-text-color);
	}
	
	.panel {
		  border-radius: 2px;
	}
	.panel-body {
		padding: 15px;
	}
	
	.panel-body .iconsection {
			margin: 0;
			padding:10px 0;
			border-bottom: 1px solid #CCC;
	}
	
	.panel-heading {
	  padding: 10px 15px;
	  border-bottom: 1px solid transparent;
	  border-top-left-radius: 2px;
	  border-top-right-radius: 2px;
	}

	.panel-immo {
	  border-color: #ddd;
	  min-height: 580px;
	}
	.panel-immo > .panel-heading {
	  color: var(--bs-text-color);
	  border-color: #ddd;
	  font-size:22px;
	  font-weight: bold;
	  text-align:center;
	  text-transform: uppercase;
	}
	
	.verhuurd {
		position:relative;
	}
	.overlayimage {
		position:absolute;
		top:0px;
		left:0px;
	}
	
	.header-verhuurd {
		font-weight:bold;
		color:var(--bs-mellow-main-color);
		font-size:26px;
		padding:10px 0;
	}

	/*********************************************************************
	IMMOBILIEN
	**********************************************************************/
	
	#tekoop-intro {
		background: #f2f2f2;
		padding: 160px 0 250px 0;
	}
	
	#tekoop-lijst {
		background: #fff;
		padding: 50px 0 70px 0;
	}
	
	#tehuur-intro {
		background: #f2f2f2;
		padding: 160px 0 50px 0;
	}
	
	#tehuur-lijst {
		background: #fff;
		padding: 50px 0 70px 0;
	}
	
	#verkoop-intro {
		background: #f2f2f2;
		padding: 160px 0 100px 0;
	}
	
	#verkoop-lijst {
		background: #fff;
		padding: 50px 0 70px 0;
	}
	
	
	
	/*********************************************************************
	Disclaimer - Verkoopsvoorwaarden
	**********************************************************************/
	#full-text {
		background: #f2f2f2;
		padding: 50px 20px 350px 20px;
		margin:100px 0 0 0;
	}


	/*********************************************************************
	FOOTER
	**********************************************************************/	
	footer {
	  background-color:#212529;
	  color:#fff;
	}

	footer span.copyright {
	  line-height: 40px;
	  font-family: Helvetica, Arial, sans-serif;
	  text-transform: uppercase;
	  text-transform: none;
	}
	
	/*
	#bottom {
		background: #222222;
		border-bottom: 2px solid var(--bs-mellow-second-color);
		font-size: 14px;
		line-height: 30px;
		color:#FFF;
		padding: 20px 0;
	}
	
	#bottom h2 {
		margin: 5px 0 15px 0;
		font-size:18px;
		letter-spacing:2px;
		text-transform: uppercase;
		color:#fff;
	}
	*/

	.hr-lines-nl{
		position: relative;
		max-width: 302px;
		text-align: center;
	}
	
	.hr-lines-nl:before{
		content:" ";
		height: 1px;
		width: 50px;
		background: #fff;
		display: block;
		position: absolute;
		top: 50%;
		left: 0;
	}
	
	.hr-lines-nl:after{
		content:" ";
		height: 1px;
		width: 60px;
		background: #fff;
		display: block;
		position: absolute;
		top: 50%;
		right: 0;
	}

	/*********************************************************************
	CONTACT
	**********************************************************************/

	.contact-area-left-border {
		border-left:#ddd 1px solid;
		padding-left:30px;
	}
	
	@media (max-width: 990px) {
		.contact-area-left-border {
			border-left:none;
			padding-left: 15px;
		}
	}
	
	.from-group {
		position:absolute;width:0;height:0;margin:0;padding:0;display:none;border:none;font-size:0;visibility:hidden;line-height:0;
	}
	
	.form-error {
		font-style: italic;
		color:#F99;
		font-size:13px;
	}

	.form-control {
		border-radius: 0;
	}
	
	.has-error .form-control  {
	  border-color: #a94442;
	  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
			  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	  background-color: #f2dede;
	}

	.btn {
		border-radius: 0;
	}

	.button-id,
	.button-id:focus,
	.button-id.focus {
		border: 2px solid var(--bs-mellow-main-color);
		color: var(--bs-mellow-main-color);
		background-color: transparent;
		font-size: 20px;
		font-family: sans-serif;
		font-weight: bold;
		text-decoration: none;
		letter-spacing: 2px;
		border-radius: 5px;
	}
	.button-id:hover {
		color: #fff;
		background-color: var(--bs-mellow-third-color);
		border-color: var(--bs-mellow-third-color);
		background-image: none;
		text-decoration: none;
	}

	@media (max-width: 530px) {
		.button-id {
			display: inline-block;
			margin: 0 0 13px 0;
			text-align: center;
			width: 100%;
		}
	}


	/*********************************************************************
	TE HUUR - DETAILS
	**********************************************************************/
	.header-reference {
		margin-top:-25px;
		font-size:12px;
		font-style:italic;
	}

	#tehuur-detail-intro {
		background: #f2f2f2;
		padding: 160px 0 10px 0;
	}

	#tehuur-detail-desc {
		background: #fff;
		padding: 50px 0 50px 0;
	}
	
	#tehuur-detail-desc h2 {
		color: var(--bs-text-color);
		font-weight:bold;
		text-transform: uppercase;
		font-size:18px;
	}
	
	.footnote {
		font-style:italic;
		font-size:12px;
		margin-top: 80px;
		line-height: 16px;
	}
	
	.hidden-images {
	  overflow: hidden;
	  display: none;
	  visibility: hidden;
	}

	
	.resimage {
		opacity: 1;
		display: block;
		transition: .5s ease;
		backface-visibility: hidden;
	}
	
	.textinmiddle {
		transition: .5s ease;
		opacity: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%)
	}

	
	.thetext {
		color: var(--bs-text-color);
		font-size: 20px;
		font-weight:bold;
		padding: 16px 32px;
	}