/* ============================================
		TOP
=============================================*/



/* ============================================
		NAVIGATIE
=============================================*/



/* ============================================
		SLIDER/BANNER
=============================================*/
.container-fluid.banner { margin-bottom: 7rem; }
.container-fluid.banner .item { padding-left: calc(var(--half-space) / 2); position: relative; }
.container-fluid.banner .item .image { position: relative; border-radius: 0px 0px 0px var(--border-radius); overflow: hidden; }
.container-fluid.banner .item .image::before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; right: 0; background-color: rgba(59, 59, 59, 0.4);}
.container-fluid.banner .item h1 { color: var(--white); position: absolute; top: 0; bottom: 0; margin: auto; left:calc(var(--half-space) + 12px); height: fit-content; }



/* ============================================
		CONTENT
=============================================*/
.row.waves { position: relative; }
.row.waves::before { content: ''; background: url('/media/2024-08/3-golfjes-onder-elkaar(1).svg') no-repeat; width: 270px; height: 171px; display: block; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; }

.block.content.question { color: #99BD00; font-size: 30px; font-weight: 500; padding-left: 13rem; }
.block.content.question.primary { color: #4FADE6; font-size: 25px; }

/* ======== NIEUWS ======== */
.block.list.news { margin-top: 0; }
.block.list.news .listitem h2 { margin-top: 0; }
.block.list.news .listitem img { border-top-left-radius: var(--border-radius); }
.block.list.news .listitem a{ color: #469FD4; }
.block.list.news .listitem a:hover{ color: #8BA222; }

/* ======== HISTORIE ======== */
.block.list.history > div { padding-bottom: 45px; position: relative; }
.block.list.history > div .item { background-color: var(--grey-bg); border-left: 20px solid var(--secondary-color); border-top-right-radius: var(--border-radius); margin: 0; }
.block.list.history > div .content { align-self: center; }
.block.list.history > div::after { content: ''; width: 2px; height: 45px; background-color: var(--secondary-color); position: absolute; bottom: 0; left: 0; right: 0; margin: auto; }
.block.list.history > div:nth-child(odd) .image { padding-right: 0; padding-left: 8rem; order: 2; }
.block.list.history > div:nth-child(odd) .image img { border-top-right-radius: var(--border-radius); }
.block.list.history > div:nth-child(odd) .content { padding-left: calc(8rem - 20px); order: 1; }
.block.list.history > div:nth-child(even) .image { padding-left: 0; padding-right: 8rem; }
.block.list.history > div:nth-child(even) .image img { border-top-right-radius: var(--border-radius); }
.block.list.history > div:nth-child(even) .content { padding-right: 8rem; }

/* ======== FASES ======== */
.container-fluid.content > .row:has(.block.list.fases-nav) { padding-left: var(--half-space); padding-right: 70px; }
.block.list.fases-nav .btn-wrapper { position: relative; width: fit-content; padding: 0; display: flex; flex-direction: row; align-items: center; margin-bottom: 25px; }
.block.list.fases-nav .btn-wrapper img { width: 45px; object-fit: contain; }
.block.list.fases-nav .btn-wrapper:nth-child(1) img,
.block.list.fases-nav .btn-wrapper:nth-child(2) img { filter: var(--primary-filter); }
.block.list.fases-nav .btn-wrapper:nth-child(1) .btn:hover,
.block.list.fases-nav .btn-wrapper:nth-child(2) .btn:hover { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--black) !important; }
.block.list.fases-nav .btn-wrapper:nth-child(3) img,
.block.list.fases-nav .btn-wrapper:nth-child(4) img { filter: var(--secondary-filter); }
.block.list.fases-nav .btn-wrapper:nth-child(3) .btn:hover,
.block.list.fases-nav .btn-wrapper:nth-child(4) .btn:hover { background-color: var(--secondary-color); border-color: var(--secondary-color); color: var(--black) !important; }
.block.list.fases-nav .btn-wrapper:nth-child(5) img,
.block.list.fases-nav .btn-wrapper:nth-child(6) img { filter: var(--tertiary-filter); }
.block.list.fases-nav .btn-wrapper:nth-child(5) .btn:hover,
.block.list.fases-nav .btn-wrapper:nth-child(6) .btn:hover,
.block.list.fases-nav .btn-wrapper:nth-child(7) .btn:hover { background-color: var(--tertiary-color); border-color: var(--tertiary-color); color: var(--black) !important; }
.block.list.fases-nav .btn-wrapper:nth-child(5)::before { content: url('/media/2024-08/zwart-golf-projectfases-button2.svg'); width: 45px; height: auto; display: block; filter: var(--secondary-filter); }
.block.list.fases-nav .btn-wrapper:nth-child(7) img { display: none;  }
.block.list.fases-nav .btn-wrapper .btn { width: fit-content; }
.block.list.fases-nav .btn-wrapper .btn::before { display: none; }

.block.list.fases { margin: 0; }
.block.list.fases .fase { opacity: 100%; margin-bottom: 5rem; gap: 0; }
.block.list.fases .wrapper:last-child .fase { margin-bottom: 0; }
.block.list.fases .fase .block-left { display: flex; flex-direction: row; justify-content: flex-end; }
.block.list.fases .fase .block-left .content { max-width: unset; width: unset; text-align: end; font-size: 1.8rem; }
.block.list.fases .fase .block-left .wave { transform: unset; opacity: unset; position: unset; display: block; width: unset; padding: 50px 0 0 15px; margin-right: -10px; }
.block.list.fases .fase .block-left .wave img { width: 135px; }
.block.list.fases .wrapper:nth-child(3) .fase .block-left .content .complete,
.block.list.fases .wrapper:nth-child(3) .fase .block-left .content .activefase,
.block.list.fases .wrapper:nth-child(4) .fase .block-left .content .complete,
.block.list.fases .wrapper:nth-child(4) .fase .block-left .content .activefase { color: #99BD00; }
.block.list.fases .wrapper:nth-child(3) .fase .block-left .wave img,
.block.list.fases .wrapper:nth-child(4) .fase .block-left .wave img { filter: var(--secondary-filter); }
.block.list.fases .wrapper:nth-child(5) .fase .block-left .content .complete,
.block.list.fases .wrapper:nth-child(5) .fase .block-left .content .activefase,
.block.list.fases .wrapper:nth-child(6) .fase .block-left .content .complete,
.block.list.fases .wrapper:nth-child(6) .fase .block-left .content .activefase,
.block.list.fases .wrapper:nth-child(7) .fase .block-left .content .complete,
.block.list.fases .wrapper:nth-child(7) .fase .block-left .content .activefase { color: #CBB80B; }
.block.list.fases .wrapper:nth-child(5) .fase .block-left .wave img,
.block.list.fases .wrapper:nth-child(6) .fase .block-left .wave img,
.block.list.fases .wrapper:nth-child(7) .fase .block-left .wave img { filter: var(--tertiary-filter); }
.block.list.fases .fase a { display: block; text-align: left; color: var(--text-color); opacity: unset; }
.block.list.fases .fase .block-right { background-color: var(--grey-bg); border-left: 20px solid var(--primary-color); border-top-right-radius: var(--border-radius); }
.block.list.fases .fase .block-right .image { padding-left: 1rem; height: 100%; }
.block.list.fases .fase .block-right .image img { border-top-right-radius: var(--border-radius); height: 100%; }
.block.list.fases .fase .block-right .text { padding: 30px; }
.block.list.fases .wrapper:nth-child(3) .fase .block-right,
.block.list.fases .wrapper:nth-child(4) .fase .block-right { border-left: 20px solid var(--secondary-color); }
.block.list.fases .wrapper:nth-child(5) .fase .block-right,
.block.list.fases .wrapper:nth-child(6) .fase .block-right,
.block.list.fases .wrapper:nth-child(7) .fase .block-right { border-left: 20px solid var(--tertiary-color); }
.block.list.fases .wrapper:nth-child(3) .fase .block-right .text .btn.btn-primary,
.block.list.fases .wrapper:nth-child(4) .fase .block-right .text .btn.btn-primary { background-color: var(--secondary-color); border-color: var(--secondary-color); }
.block.list.fases .wrapper:nth-child(5) .fase .block-right .text .btn.btn-primary,
.block.list.fases .wrapper:nth-child(6) .fase .block-right .text .btn.btn-primary,
.block.list.fases .wrapper:nth-child(7) .fase .block-right .text .btn.btn-primary { background-color: var(--tertiary-color); border-color: var(--tertiary-color); }

/* ======== FAQ ======== */
.block.list.faq-btns { justify-content: center; }
.block.list.faq-btns .btn { width: fit-content; margin: 10px; padding: 10px 20px; font-size: 1.1rem; }
.block.list.faq-btns .btn:nth-child(3n+1):hover { background-color: var(--primary-color); border-color: var(--primary-color); }
.block.list.faq-btns .btn:nth-child(3n+2):hover { background-color: var(--secondary-color); border-color: var(--secondary-color); }
.block.list.faq-btns .btn:nth-child(3n+3):hover { background-color: var(--tertiary-color); border-color: var(--tertiary-color); }
.block.list.faq-btns .btn::before { display: none; }


.block.list.accordion .accordion-button { border-radius: 0 20px 0 0; background: var(--grey-bg) !important; transition: all 0.3s ease-in-out; font-size: 1.2rem; color: var(--title-color); }
.block.list.accordion .accordion-button:hover { background: #d7d6d6 !important; }
.block.list.accordion .accordion-body { background: var(--grey-bg); font-size: 1rem; color: var(--title-color); }
.block.list.accordion.primary .accordion-button { border-left: 20px solid var(--primary-color); }
.block.list.accordion.primary .accordion-body { border-left: 20px solid var(--primary-color); }
.block.list.accordion.secondary .accordion-button { border-left: 20px solid var(--secondary-color); }
.block.list.accordion.secondary .accordion-body { border-left: 20px solid var(--secondary-color); }
.block.list.accordion.tertiary .accordion-button { border-left: 20px solid var(--tertiary-color); }
.block.list.accordion.tertiary .accordion-body { border-left: 20px solid var(--tertiary-color); }

/* ======== CONTACT ======== */
.block.form .form-group { margin-bottom: 15px; }
.block.form .form-group .form-control { border-radius: 25px; padding: 10px 20px; }

/* ======== SITEMAP ======== */
.block.sitemap .sitemap_ul { padding-left: 1.5rem; }
.block.sitemap .sitemap_ul .sitemap_li:before { background: var(--primary-color); border-radius: 100%; width: 10px; left: -1.5rem; top: 7px; bottom: unset; }

/* ============================================
		FOOTER & ENDPAGE
=============================================*/



/* ============================================
		MOBIEL
=============================================*/
/* --------------------------------------- */
@media only screen and (max-width: 1915px) {

	.block.list.fases-nav .btn-wrapper { flex-grow: 1; }
	.block.list.fases-nav .btn-wrapper .btn { flex: 1; max-width: 450px; }
	.block.list.fases-nav .btn-wrapper:nth-child(4)::before { content: url('/media/2024-08/zwart-golf-projectfases-button2.svg'); width: 45px; height: auto; display: block; filter: var(--secondary-filter); }
	.block.list.fases-nav .btn-wrapper:nth-child(5)::before { display: none; }
	.block.list.fases-nav .btn-wrapper:nth-child(7)::before { content: url('/media/2024-08/zwart-golf-projectfases-button2.svg'); width: 45px; height: auto; display: block; filter: var(--tertiary-filter); }
	
	.block.list.fases-nav .btn-wrapper:first-child { margin-left: 45px; }
}

/* --------------------------------------- */
@media only screen and (max-width: 1399px) {
	.container-fluid.banner .item .image img { min-height: 300px; }

	.row.waves::before { background-size: contain; width: 200px; height: 130px; }

	.block.list.history .content { padding-top: 3rem; padding-bottom: 3rem; }
	.block.list.history .image img { height: 100%; }
	.block.list.history > div:nth-child(even) .content { padding-right: 5rem; }
	.block.list.history > div:nth-child(even) .image { padding-right: 5rem; }
	.block.list.history > div:nth-child(odd) .content { padding-left: 5rem; }
	.block.list.history > div:nth-child(odd) .image { padding-left: 5rem; }

	.block.list.fases .fase .block-left .content { font-size: 1.4rem; }
	.block.list.fases .fase .block-left .wave img { width: 80px; }

	.block.list.fases-nav .btn-wrapper:nth-child(3)::before { content: url('/media/2024-08/zwart-golf-projectfases-button2.svg'); width: 45px; height: auto; display: block; filter: var(--primary-filter); }
	.block.list.fases-nav .btn-wrapper:nth-child(4)::before { display: none; }
	.block.list.fases-nav .btn-wrapper:nth-child(5)::before { display: block; }
	.block.list.fases-nav .btn-wrapper:nth-child(7)::before { content: url('/media/2024-08/zwart-golf-projectfases-button2.svg'); width: 45px; height: auto; display: block; filter: var(--tertiary-filter); }
}

/* --------------------------------------- */
@media only screen and (max-width: 1199px) {
	.container-fluid.banner { margin-bottom: 3rem; }
	.block.list.fases .fase .block-left .wave img { width: 60px; }

	.block.list.history > div:nth-child(even) .content { padding-right: 3rem; }
	.block.list.history > div:nth-child(even) .image { padding-right: 3rem; }
	.block.list.history > div:nth-child(odd) .content { padding-left: 3rem; }
	.block.list.history > div:nth-child(odd) .image { padding-left: 3rem; }

	.block.list.fases .fase .block-right .text { padding-right: 30px; }
}

/* --------------------------------------- */
@media only screen and (max-width: 991px) {
	.block.list.fases-nav { padding: 0 30px; }
	.container-fluid.content > .row:has(.block.list.fases-nav) { padding-right: 0; padding-left: 0; }

	.block.list.history > div:nth-child(odd) .image { padding-left: 0; }
	.block.list.history > div:nth-child(odd) .content { padding-left: calc(var(--bs-gutter-x) * .5); }
	.block.list.history > div:nth-child(even) .image { padding-right: 0; order: 2; }
	.block.list.history > div:nth-child(even) .content { order: 1; }
	.block.list.history .image img { max-height: 450px; }

	.row.waves::before { bottom: unset; }

	.block.list.fases .fase .block-left { flex-direction: column; }
	.block.list.fases .fase .block-left .content { text-align: start; }
	.block.list.fases .fase .block-left .wave { padding: 0; }
	.block.list.fases .fase .block-left .wave img { width: 100px; }
	.block.list.fases .fase .block-right .image { padding-left: 0; }
	.block.list.fases .fase .block-right .image img { max-height: 350px; }

}

/* --------------------------------------- */
@media only screen and (max-width: 767px) {
	.block.list.fases-nav { flex-direction: column; padding: 50px; }
	.block.list.fases-nav .btn-wrapper { width: 100%; }
	.block.list.fases-nav .btn-wrapper img { display: none; }
	.block.list.fases-nav .btn-wrapper:nth-child(3)::before { display: none; }
	.block.list.fases-nav .btn-wrapper:nth-child(5)::before { display: none; }
	.block.list.fases-nav .btn-wrapper:nth-child(7)::before { display: none; }
	.block.list.fases-nav .btn-wrapper .btn { max-width: unset; }
	.block.list.fases-nav .btn-wrapper .btn:hover { border-color: var(--black) !important; }
	
	.block.list.fases-nav .btn-wrapper:nth-child(1) .btn,
	.block.list.fases-nav .btn-wrapper:nth-child(2) .btn { background-color: var(--primary-color); border-color: var(--primary-color); }
	.block.list.fases-nav .btn-wrapper:nth-child(3) .btn,
	.block.list.fases-nav .btn-wrapper:nth-child(4) .btn { background-color: var(--secondary-color); border-color: var(--secondary-color); }
	.block.list.fases-nav .btn-wrapper:nth-child(5) .btn,
	.block.list.fases-nav .btn-wrapper:nth-child(6) .btn,
	.block.list.fases-nav .btn-wrapper:nth-child(7) .btn { background-color: var(--tertiary-color); border-color: var(--tertiary-color); }

}

/* --------------------------------------- */
@media only screen and (max-width: 575px) {

	.row.waves::before { width: 150px; }
	.block.content.question { padding-left: 0; padding-top: 120px; }
}

/* --------------------------------------- */
@media only screen and (max-width: 479px) {
	.block.list.fases-nav { padding: 30px; }
}