/* ============================================================
Default
============================================================ */
body { /*Arken style*/
	--main-color: #dd0161; /*Pink*/
	--second-color: #004d90; /*Blue*/
	--third-color: #5cb85c; /*Main buttons*/
	--fourth-color: #d9edf7; /*secondary buttons*/
	--aanb-bg-color: #fff;
}
body.site-waterproof {
	--main-color: #ef7c32; /*Orange*/
	--second-color: #0c4367;  /*Blue*/
	--third-color: #0c4367; /*Main buttons*/
	--fourth-color: #dadada; /*secondary buttons*/
	--aanb-bg-color: #f7f7f7;
}

/* ============================================================
Arken Overview
============================================================ */
.arkenContainer .ark::after,
.arkenWrapper .arkenContainer::after,
.arkenWrapper::after {
  clear: both;
  content: " ";
  display: block;
}
.arkenWrapper .arkNavContainer,
.arkenWrapper .arkenContainer .ark .details,
.arkenWrapper .arkenContainer .ark > div,
.arkenWrapper .arkenContainer .ark,
.arkenWrapper .arkenContainer,
.arkenWrapper {
	display: block;
	width: 100%;	
}
.arkenWrapper {}

.arkenWrapper p.noResults{
	width: 100%;
	padding: 10px;
	border: 1px dashed;
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
}
.arkenWrapper .arkenContainer {}
.arkenWrapper .arkenContainer .ark {
	position: relative;
	float: left;
	margin: 0 0 20px 0;
	border-bottom: 1px solid var(--main-color);
	background-color: var(--aanb-bg-color);
}
.arkenWrapper .arkenContainer .ark > a {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
}
.arkenWrapper .arkenContainer .ark > div {
}
.arkenWrapper .arkenContainer .ark .verkocht {
	position: absolute;
	top: 10px;
	left: 0;
	z-index: 50;	
	display: block;
	width: auto;
	padding: 5px 10px;
	font-weight: 800;
	font-size: 13px;
	text-transform: uppercase;
	color: #fff;
	background-color: var(--main-color);
	border-bottom: 1px solid #fff;
}
.arkenWrapper .arkenContainer .ark .foto {
	background-image:url('../../assets/images/no-foto.jpg');
	position: relative;
	padding-top: 60%;
	background-size: cover;
	background-position: center;
}
.arkenWrapper .arkenContainer .ark .details {
	padding: 10px;
}
.arkenWrapper .arkenContainer .ark .details .prijs {
	font-size: 24px;
	font-weight: 700;
	color: var(--main-color);
	margin-bottom: 5px;
}
.arkenWrapper .arkenContainer .ark .details .adres {
	position: relative;
	padding-left: 20px;
	margin-bottom: 5px;
	font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--second-color);
}
.arkenWrapper .arkenContainer .ark .details .adres i{
	position: absolute;
	left: 0px;
	top: 3px;
	color: var(--main-color);
}
.arkenWrapper .arkenContainer .ark .details .contract_vorm { 
	font-size: 14px;
	font-weight: 700;
	color: var(--main-color) 
}
.arkenWrapper .arkNavContainer {
	margin-top: 10px;
	text-align: center;
} 
.arkenWrapper .arkNavContainer .page-numbers {
	display: inline-block;
	padding: 5px;
	border: 1px solid #dadada;
	color: var(--second-color);
	transition:  all .3s ease;
}
.arkenWrapper .arkNavContainer .page-numbers.current {
	border-color: var(--main-color);
	color: var(--main-color);
	font-weight: 600;
}
.arkenWrapper .arkNavContainer a.page-numbers:hover {
	border-color: var(--second-color);
}
	/* Media Queries - Divi: 
	================================================== */
	@media all and (min-width: 981px) {
		.arkenWrapper.column_2 .arkenContainer .ark,
		.arkenWrapper:not([class*="column_"]) .arkenContainer .ark {
			width: 49%;
		}
		.arkenWrapper.column_2 .arkenContainer .ark:nth-child(even),
		.arkenWrapper:not([class*="column_"]) .arkenContainer .ark:nth-child(even) {
			margin-left: 2%;
		}
		.arkenWrapper.column_3 .arkenContainer .ark {
			width: calc(100% / 3 - 10px);
			margin-left: 15px;
		}
		.arkenWrapper.column_4 .arkenContainer .ark {
			width: calc(100% / 4 - 10px);
			margin-left: calc(40px / 3);
		}
		.arkenWrapper.column_3 .arkenContainer .ark:nth-child(3n+1),
		.arkenWrapper.column_4 .arkenContainer .ark:nth-child(4n+1){
			margin-left: 0px;
		}
	}


/* ============================================================
Arken Search Form
============================================================ */
.arkenSearchFormContainer.collapseWrap .searchForm .mainField::after,
.arkenSearchFormContainer .searchForm .row::after,
.arkenSearchFormContainer .searchForm::after,
.arkenSearchFormContainer::after {
  clear: both;
  content: " ";
  display: block;
}
.arkenSearchFormContainer {}

.arkenSearchFormContainer .title {	
	display: block;
	width: 100%;
	margin-bottom: 10px;
	font-size: 36px;
	font-weight: 800;
	text-transform: uppercase;
	text-align: center;
}
.arkenSearchFormContainer .title span {
	color: var(--main-color);
}
.arkenSearchFormContainer .searchForm {
	padding: 10px 15px;
}
.arkenSearchFormContainer .searchForm > div {
	display: block;
	margin-bottom: 5px;
	width: 100%;
}
.arkenSearchFormContainer .searchForm label{
	font-weight: 800;
	text-transform: uppercase;	
}
.arkenSearchFormContainer .searchForm input[type=text],
.arkenSearchFormContainer .searchForm select {
	width: 100%;
	background: #fff;
	border: 1px solid #337ab7;
	border-radius: 3px;
	color: #2f2f2f;
	padding: 10px;
}
.arkenSearchFormContainer .searchForm ::-ms-input-placeholder { color: var(--second-color); } /* Microsoft Edge */
.arkenSearchFormContainer .searchForm :-ms-input-placeholder { color: var(--second-color); } /* Internet Explorer 10-11 */
.arkenSearchFormContainer .searchForm ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: var(--second-color);
	opacity: 0.8; /* Firefox */
}

.arkenSearchFormContainer .searchForm .button {
	padding: 8px 15px;	
	width: 100%;
	font-size: 22px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #fff;
	background-color: var(--third-color);
	border-radius: 0px;
	border: 1px solid var(--third-color);
	cursor: pointer;
	transition: all 0.3s ease;
}
.arkenSearchFormContainer .searchForm .button:hover {
	color: var(--third-color);
	background-image: initial;
	background-color: #fff;
	border: 1px solid var(--third-color);	
}
.arkenSearchFormContainer .searchForm .button.reset {
	background-color: var(--fourth-color);
	border-color: var(--fourth-color);
	color: var(--second-color);
}
.arkenSearchFormContainer .searchForm .button.reset:hover {
	background-color: var(--second-color);
	color: var(--fourth-color);
}
.arkenSearchFormContainer .searchForm .button + .button {
	margin-top: 5px;
}

.arkenSearchFormContainer .searchForm .row {
	display: block;
	width: 100%;
}
/* Collapse style */
.arkenSearchFormContainer.collapseWrap .searchForm .row label{
	display: block;
	float: left;
	width: 225px;
	line-height: 40px;
	font-size: 18px;
}
.arkenSearchFormContainer.collapseWrap .searchForm .row .inputContainer{
	display: block;
	float: left;
	width: calc(100% - 225px);
}
.arkenSearchFormContainer.collapseWrap .searchForm .priceFields select {
	width: 49%;
}
.arkenSearchFormContainer.collapseWrap .searchForm .priceFields select + select {
	margin-left: 2%; 
}

.arkenSearchFormContainer.collapseWrap .searchForm .mainField input {
	width: calc(100% - 45px);
}
.arkenSearchFormContainer.collapseWrap .searchForm .mainField .collapseButton {
	display: block;
	float: right;
	height: 40px;
	width: 40px;	
	line-height: 40px;
	text-align: center;
	color: #fff;
	background-color: var(--main-color);
	border-radius: 3px;
	cursor: pointer;
}
.arkenSearchFormContainer.collapseWrap.open .searchForm .mainField .collapseButton i.fa-caret-down,
.arkenSearchFormContainer.collapseWrap.closed .searchForm .mainField .collapseButton i.fa-caret-up {
	display: none;
}
.arkenSearchFormContainer.collapseWrap .searchForm .optionsFields .row + .row {
	margin-top: 5px;
}

.arkenSearchFormContainer.collapseWrap .searchForm .optionsFields.collapse {
	max-height: 0;
	overflow: hidden;
	transition: all 0.4s ease;
}
.arkenSearchFormContainer.collapseWrap.closed .searchForm .optionsFields.collapse {
	margin-bottom: 0px;
}
.arkenSearchFormContainer.collapseWrap.open .searchForm .optionsFields.collapse {
	max-height: 400px;
}
.arkenSearchFormContainer.collapseWrap.filtered  .searchForm .button.search {
	width: calc(100% - 255px);
	min-width: 250px;
}
.arkenSearchFormContainer.collapseWrap.filtered .searchForm .button.reset {
	display: block;
	float: right;
	width: 100%;
	max-width: 250px;
	margin-top: 0;
}

/* ============================================================
Ark Single / Detail pagina
============================================================ */

/* Feat img/ gallery - START */
.aanbodFotos .et_pb_gallery_items {
	--foto-gap: 15px;
	--foto-columns: 5;
	--foto-gap-calc: calc(var(--foto-gap) * calc(var(--foto-columns) - 1) / var(--foto-columns));
	--foto-columns-width: calc(100% / var(--foto-columns));

	display: flex;
    gap: var(--foto-gap);
    flex-wrap: wrap;
}
.aanbodFotos .et_pb_gallery_item {
	flex: 0 0 calc(var(--foto-columns-width) - var(--foto-gap-calc));
}
/*.aanbodFotos .et_pb_gallery_item.featImg {*/
.aanbodFotos .et_pb_gallery_item:first-child {
    flex: 0 0 100%;
}
.aanbodFotos a.fotoLink {
	display: block;
	width: 100%;
	padding: 4px;
	line-height: 1.42857143;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	transition: all .2s ease-in-out;
	cursor: zoom-in;
}
.aanbodFotos a.fotoLink:hover {
	border-color: #337ab7;
}
.aanbodFotos a.fotoLink img{
	display: block;
	width: 100%;
	max-width: 100%;
}
/* Feat img/ gallery - END */
.single-aanbod .et_pb_section .addbuttonContainer{}
.single-aanbod .et_pb_section .addbuttonContainer .et_pb_button {
	display: block;
	width: 100%;
	padding: 15px 10px !important;
	text-align: center;
	text-transform: initial;
	font-weight: 800;
	background-color: #004d90;
	border: 1px solid #004d90;
	transition: all .3s ease;
}
.single-aanbod .et_pb_section .addbuttonContainer .et_pb_button:hover {
	background-color: #DD0161;
	color: #fff !important;
}
	/* Media Queries - Divi: 
	================================================== */
	@media all and (max-width: 768px) {
		.aanbodFotos .et_pb_gallery_items {
			--foto-columns: 3;
		}
	}

/* Details tabs module */
.single-aanbod .et_pb_module.et_pb_tabs {}
.single-aanbod .et_pb_module.et_pb_tabs ul.et_pb_tabs_controls {}
.single-aanbod .et_pb_module.et_pb_tabs ul.et_pb_tabs_controls li {}
.single-aanbod .et_pb_module.et_pb_tabs ul.et_pb_tabs_controls li.hide {
	display: none !important;
}
.single-aanbod .et_pb_module.et_pb_tabs ul.et_pb_tabs_controls li a {
	padding: 10px 30px;
	color: var(--second-color) !important;
	transition: all .3s ease;
}
.single-aanbod .et_pb_module.et_pb_tabs ul.et_pb_tabs_controls li:hover a {
	color: #fff !important;
	background-color: var(--main-color);
}
.single-aanbod .et_pb_module.et_pb_tabs ul.et_pb_tabs_controls li.et_pb_tab_active a {
	color: #fff !important;
	background-color: var(--second-color);
}


/* Details table */
.aanbodDetail table {
	width: 100%;
}
.aanbodDetail table tr.info {
	background-color: #d9edf7
}
.aanbodDetail table tr + tr {
	border-top: 1px solid #dadada;
}
.aanbodDetail table tr td {
	padding: 5px;
	color: #333;
	vertical-align: top;
}
.aanbodDetail table tr td.label {
	width: 200px;
	font-weight: 600;
}
/* ============================================================
Gravity Forms
============================================================ */
.gform_wrapper .gfield select[disabled="disabled"],
.gform_wrapper .gfield input:not([type="radio"],[type="checkbox"]):read-only {
	background-color: rgba(0,0,0,0.06);
	border-color: #a4a4a4;
	opacity: 0.4;
	cursor: default;
}