/* ============================================================
Default
============================================================ */
body {	
	/*normal green maybe not correct*/
	--rail-green: 	#87bf92;
	--rail-green-l: #e8f2e9;
	--rail-green-d: #178739;
	--rail-black: 	#0a0c0b;
	--rail-brown: 	#f8c08d;
	--rail-brown-l: #fee8d3;
	--rail-blue-d:  #223351;
}

/* ============================================================
Header Social icons
============================================================ */
/*this is also used in footer*/
.contactIconContainer > * {
	display: grid;
	--column-count: 3;
	grid-template-columns: repeat(var(--column-count), 1fr);
	gap: 18px;	
	width: fit-content;
	max-width: 100%;
	margin-left: auto;	
	margin-right: 0px;

}
footer .contactIconContainer > * {
	--column-count: 5;
}
.contactIconContainer a {
	--icon-size: 75px;
	display: inline-block;
	width: var(--icon-size);
	height: var(--icon-size);		
	border: 1px solid var(--rail-blue-d);
	border-radius: 50%;
	text-align: center;
	color: var(--rail-blue-d);
	/*font-size: 34px;		*/
	font-size: calc(var(--icon-size) / 2);
	transition: all .3s ease;

}
	.contactIconContainer a:hover {
		transform: scale(1.15);		
	}

.contactIconContainer a.fb {
	border: 1px solid #316FF6;
	border-radius: 0;
	color: #fff;
	background-color: #316FF6;

}
.contactIconContainer a.li-in {
	border: 1px solid #0077B5;
	border-radius: 25%;
	color: #fff;	
	background-color: #0077B5;		
}
.contactIconContainer a i {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}
	/* Responsive Styles Smartphone Portrait */
	@media all and (max-width: 479px) {
		footer .contactIconContainer > * {
			--column-count: 3;
			margin-left: 0;
		}
	}


/* ============================================================
General
============================================================ */
.et_pb_image[class*=zoomImg] .et_pb_image_wrap {
	overflow: hidden;
}
.et_pb_image[class*=zoomImg] .et_pb_image_wrap img {
	transition: all .5s ease;
}
	.et_pb_section:hover .et_pb_image.zoomImg-section img,
	.et_pb_row:hover .et_pb_image.zoomImg-row img,
	.et_pb_column:hover .et_pb_image.zoomImg-column img,
	.et_pb_image.zoomImg:hover img {
		transform: scale(1.1);
	}

/* Watch out, set the divi row seting to equal height colums, 
This is to prevent having to do the media queries for all column sizes */
.flex-vertical {
	align-items: center;
}
/* ============================================================
Rail links (lichtbruine balk)
============================================================ */

.railLinkContainer {
	--gap: 30px;
	--columns: 5;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	justify-content: center;
}
.railLinkContainer .railLink {
	position: relative;
	width: calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
	padding: 6px 5px 3px;
	text-align: center;
	color: var(--rail-black);
	border-radius: 5px;
	transition: all .3s ease;
}
	.railLinkContainer .railLink:hover {
		background-color: rgba(0,0,0,0.1);
	}
.railLinkContainer .railLink > a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
}
.railLinkContainer .railLink .icon {
	--dimension: 1.7em;
	display: block;
	margin: auto;
	width: var(--dimension);
	height: var(--dimension);
	font-size: 3rem;
	line-height: 1.6em; /*.1 less than height*/
	color: var(--rail-blue-d);
	background-color: #fff;
	border-radius: 50%;
	border: 2px solid;
}
.railLinkContainer .railLink .info {
	width: 100%;
}
.railLinkContainer .railLink .info .title {
	margin: 10px 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--rail-green-d);
}
.railLinkContainer .railLink .info .text {}

	/* Media Queries - Divi: 
	================================================== */
	/* Responsive Styles Tablet Only */
	@media all and (max-width: 980px) {
		.railLinkContainer { --columns: 3; }
	}
	@media all and (max-width: 768px) {
		.railLinkContainer { --columns: 2; }
	}
	@media all and (max-width: 480px) {
		.railLinkContainer { --columns: 1; }
	}


/* ============================================================
Home
============================================================ */
/*this class is on text modules with picture to the side*/
.homeTxt h2, .homeTxt h3 {
	padding-bottom: 35px;
}
.homeTxt h3 {
	font-weight: bold;
}
	/* Media Queries - Divi: 
	================================================== */
	/* Responsive Styles Tablet Portrait */
	@media all and (max-width: 768px) {
		.homeTxt h2, .homeTxt h3 {
			padding-bottom: 20px;
		}
	}
.et_pb_module[class*=quote-txt] {
	display: flex;
	gap: 20px;
	align-items: center;	
	width: 100%;
	max-width: 1000px;
	margin: auto;
}

.et_pb_module[class*=quote-txt]::before {
	--quote-size: 200px;	
	content: '';
	display: block;
	flex: 0 0 var(--quote-size);
	width: var(--quote-size);
	height: var(--quote-size);
	background-image: url('../images/quote-green-s.png');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
	.et_pb_module.quote-txt-orange::before {
		background-image: url('../images/quote-orange-s.png');
	}
	/* Responsive Styles Tablet Portrait */
	@media all and (max-width: 768px) {
		.et_pb_module[class*=quote-txt]::before {
			--quote-size: 140px;
		}
	}
/* ============================================================
Footer 
============================================================ */

/* ============================================================
Footer menu
============================================================ */

footer #footer_menu_sidebar ul.menu::after {
  clear: both;
  content: " ";
  display: block;
}

footer #footer_menu_sidebar .fwidget {
	width: 100% !important;
	margin: 0px !important;
}

footer #footer_menu_sidebar {}
footer #footer_menu_sidebar ul.menu {
	display: block;
	width: 100%;
}
footer #footer_menu_sidebar ul.menu > li {
	font-weight: bold;
}
footer #footer_menu_sidebar ul.menu li a {
	color: var(--rail-black);
}
footer #footer_menu_sidebar ul.menu .sub-menu li {
	margin-left: 0px;
}


footer #footer_menu_sidebar ul.menu > li.hidden > a {
	display: none;
}
	/* Media Queries - Divi: 
	================================================== */
	@media all and (min-width: 768px) {
		footer #footer_menu_sidebar ul.menu > li {
			width: calc(100% / 3);
			display: block;
			float: left;
		}
	}
	@media all and (max-width: 768px) {
		footer #footer_menu_sidebar ul.menu > li + li {
			border-top: 1px solid rgba(255,255,255,0.1);
		}
	}