/********************************************* RESET ************************************************/
/****************************************************************************************************/

* {
    position: relative;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html, body {height: 100%; width:100%; padding:0;  margin:0; scroll-behavior: smooth;} 
ul {margin:11px 0; padding:0 0 0 40px; list-style-type:square;}
ol {margin:11px 0; padding:0 0 0 40px; list-style-type:decimal;}
p {padding:0 0 16px 0; margin:0;}

/************************************** START STANDAARD CSS *****************************************/
/****************************************************************************************************/


body {
	height: 100%;
	
	overflow-y: scroll !important;
	overflow-x: hidden;
	background-color: #fff;

	/* default font */
	font-family: "DM Sans", sans-serif;
	font-weight: 300;
	font-size: 17px;
	color: rgba(25, 31, 29, 0.8);
	line-height: 1.7;
	font-display: auto;
	/*
	 min-height: 100%;
  	 display: flex;
  	 flex-direction: column;
    */
}


h1, .h1 {
	font-family: "Libre Baskerville", serif;
	font-weight: 400;
	font-size: 36px;
	font-display: auto;
	line-height: 1.5;
	color: #365347;
	padding-bottom: 30px;
    margin-bottom: 40px;
}


h2, .h2 {
	font-family: "Libre Baskerville", serif;
	font-weight: 400;
	font-size: 28px;
	font-display: auto;
	line-height: 1.5;
	color: #365347;
	padding-bottom: 20px;
	margin-bottom: 40px;
}


h3, .h3 {
	font-family: "Libre Baskerville", serif;
	font-weight: 400;
	font-size: 22px;
	font-display: auto;
	line-height: 1.5;
	color: #365347;
	padding-bottom: 20px;
	margin-bottom: 36px;
}


h4, .h4 {
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
    font-weight: 600;
	font-display: auto;
	line-height: 1.5;
    text-transform: uppercase;
    color: rgba(25, 31, 29, 1);
	margin-bottom: 8px;
    padding-bottom: 0;
    letter-spacing: 0.02rem;
}

.uppercase {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}



h1::after, .h1::after,
h2::after, .h2::after,
h3::after, .h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 33%;
    min-width: 200px;
    max-width: 300px;
    border-radius: 10px;
    
    background: linear-gradient(
        to right,
        rgba(186, 137, 92, 1),
        rgba(186, 137, 92, 0.1)
    );
}

h1::after, .h1::after {
    height: 0.3rem;
    clip-path: polygon(
        0 0,
        100% 0.1rem,
        100% 0.2rem,
        0 100%
    );
}

h2::after, .h2::after {
    height: 0.2rem;
    clip-path: polygon(
        0 0,
        100% 0.066rem,
        100% 0.132rem,
        0 100%
    );
}

h3::after, .h3::after {
    height: 0.2rem;
    width: 160px;
    min-width: unset;
    clip-path: polygon(
        0 0,
        100% 0.066rem,
        100% 0.132rem,
        0 100%
    );
}

h4::after, .h4::after {
    display: none;
}



.lijn {
    display: block;
    position: relative;
    margin: 20px 0 40px;
}

.lijn::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 33%;
    min-width: 200px;
    max-width: 300px;
    border-radius: 10px;
    
    background: linear-gradient(
        to right,
        rgba(186, 137, 92, 1),
        rgba(186, 137, 92, 0.1)
    );
    
    height: 0.2rem;
    clip-path: polygon(
        0 0,
        100% 0.066rem,
        100% 0.132rem,
        0 100%
    );
    
}



.txt--center h1::after, .txt--center .h1::after,
.txt--center h2::after, .txt--center .h2::after {
    left: 50%;
    transform: translateX(-50%);
}



/***** NORMALE LINK *****/
a, a:link, a:visited, a:active{
	color: #ba895c;
	text-decoration: underline;
    outline: hidden !important;
    overflow: hidden !important;
    transition: 0.1s;
}
a:hover {text-decoration: none;}


/***** MENULINK *****/
a.menulink, a.menulink:link, a.menulink:visited, a.menulink:active {
	outline: none;
	overflow: hidden;
	
	font-family: "DM Sans", sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: rgba(25, 31, 29, 0.8);
	text-decoration: none;
	
	padding: 16px;
	display: block;

	/* Standaard fade rollover CSS3 */
	-webkit-transition-property: color;
    -webkit-transition-duration: 0.2s, 0.2s;
    -webkit-transition-timing-function: linear, ease-in;
	
	transition-property: color;
	transition-duration: 0.2s, 0.2s;
	transition-timing-function:  linear, ease-in;
}

/***** MENULINK ROLLOVER *****/
.actief, a.menulink:hover {
	color: #ba895c !important;
}

*:focus {outline:none !important}

/***** VET *****/
.vet, strong{font-weight: 500 !important;}
/***** SUB *****/
.klein{font-size:14px;}
.grijs{color:#CCC;}
/***** STROKES *****/
.stroke{border:2px solid #333 !important;}
.stroke_met_schaduw{border:4px solid #FFF !important; box-shadow:0px 0px 15px rgba(0,0,0,0.25); margin: 0 25px 25px 0;}
.thmb{margin-right:10px; margin-bottom: 6px; outline: none; width: 150px !important; display: inline-block !important;}
/***** RESET UL + LI MENU *****/
#menu ul {list-style: none; margin:0 !important; padding:0 !important;}
#menu li {display: inline-block; margin:0 !important; padding:0 !important;}
#menu select { display: none;}
/***** CLEAR *****/
.clear{clear: both; width:100%;}
.nomargin{margin:0 !important;}
/* RESPONSIVE IMAGES */
.resp_img{ width:auto;height:auto;max-width:100%;}
.editable img{ width:auto; height:auto; max-width:100%;}
/* COLUMS */
.section100{float:left; width:100%; height:auto;}
.section75{float:left; width:75%; height:auto;}
.section70{float:left; width:70%; height:auto;}
.section60{float:left; width:60%; height:auto;}
.section55{float:left; width:55%; height:auto;}
.section50{float:left; width:50%; height:auto;}
.section48{float:left; width:48%; height:auto;}
.section45{float:left; width:45%; height:auto;}
.section40{float:left; width:40%; height:auto;}
.section35{float:left; width:35%; height:auto;}
.section33{float:left; width:33%; height:auto;}
.section31{float:left; width:31%; height:auto;}
.section30{float:left; width:30%; height:auto;}
.section25{float:left; width:25%; height:auto;}
.section23{float:left; width:23%; height:auto;}
.section20{float:left; width:20%; height:auto;}
.section19{float:left; width:19%; height:auto;}
.section100 img, .section75 img, .section70 img, .section60 img, .section55 img, .section50 img, .section48 img, .section45 img, .section40 img, .section35 img, .section33 img, .section31 img, .section30 img, .section25 img, .section23 img, .section20 img , .section19 img {width:100%; height:auto; max-width:100%; display: block;}

.fright{float: right;}
.fleft{float: left;}
.tt{opacity: 0.15;margin-top: 50px;margin-bottom: 55px;display: block;}

#menu-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
	height: 100%;
    background-color: #fff;
    z-index:95;
	display:none;
}

.twee_links{margin-right:2%;}
.twee_rechts{margin-left:2%;}

.drie_links{margin-right:1.75%;}
.drie_mid{margin-right:1.75%; margin-left:1.75%;}
.drie_rechts{margin-left:1.75%;}

.vier_links{margin-right:2.7%;}
.vier_mid_links{margin-right:1.3%;}
.vier_mid_rechts{margin-left:1.3%;}
.vier_rechts{margin-left:2.7%;}


.vijf_links{margin-right:1.25%;}
.vijf_mid_links{margin-right:1.25%;}
.vijf_mid{margin:0;}
.vijf_mid_rechts{margin-left:1.25%;}
.vijf_rechts{margin-left:1.25%;}

/* VB BOX TEST */
.il {
	border:1px solid #FF0004;
	padding: 10px;
}


/**************************************** START EIGEN CSS *******************************************/
/****************************************************************************************************/

#header {
	width: 100%;
	height: 125px;
	background-color: #fff;
	z-index: 99;
	margin: 0 auto;
}

#navigatie {
	width: 100%;
    height: 100%;
	margin: 0 auto;
    padding: 0 25px;
}

.logo {
    
    width: 200px;
    height: auto;
    aspect-ratio: 16 / 10;
    
    position: absolute;
    
    z-index: 98;
}


.nav__cta {
    position: absolute;
    top: 38px;
    right: 25px;
}

.nav__cta a {
    margin-top: 0;
    white-space: nowrap;
}

#menu {
    position: absolute;
    right: 300px;
	z-index: 97;
    height: 100%;
}

#menu ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    
    height: 100%;
    column-gap: 4px;
}


#menu .btn {
    margin-left: 5vw;
    margin-top: 0;
}

#container {
	max-width: 100%;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 150px 0;
	overflow-x: hidden;
	
	display: flex;
	flex-flow: row wrap;
	
	/* voor sticky footer -> flex: 1 0 auto; + op body activeren */
 	flex: 1 0 auto; 
}

.pgdetail #container {
/*    padding-top: 140px;*/
}

.pgsub #container {
    padding-top: 120px;
}


.content_md {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
}

.content_small {
	max-width: 1500px;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0 25px;
}

.content_xs {
	max-width: 1300px;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0 50px;
}

.content_xxs {
	max-width: 1100px;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0 50px;
}

.content_wide {
	width: 100%;
	height: auto;
	margin: 0 auto;
}



/* --- BUTTONS --- */


.btn {
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08rem;
    line-height: 1.1;
    text-transform: uppercase;
    
    margin-top: 40px;
    
    color: rgba(25, 31, 29, 0.8) !important;
    text-decoration: none !important;
    transition: 0.2s
}

.btn--outline {
    padding: 16px 28px;
    border: 1px solid #ba895c;
}

.btn--outline:hover, #menu .btn:hover {
    color: #ba895c !important;
}


.btn--icon {
    align-items: flex-end;
    line-height: 1.4;
}

.btn--icon:hover {
    color: #ba895c !important;   
}

.btn--icon::before {
    content: "";
    display: inline-block;
    width: 24px;
    aspect-ratio: 1 / 1;
    
    margin-right: 12px;
    
    background-image: url("../images/logo-icon.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    
    transition: 0.2s;
}



.btn--icon.mail,
.btn--icon.phone,
.btn--icon.calendar
.btn--icon.question {
    font-size: 15px;
    font-weight: 500;
    text-transform: inherit;
}


.btn--icon.mail::before,
.btn--icon.phone::before,
.btn--icon.calendar::before,
.btn--icon.question::before {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    margin-right: 12px;
}

.btn--icon.mail::before {
    background-image: url("../images/ico-envelope-wit.svg");
}
.btn--icon.phone::before {
    background-image: url("../images/ico-phone-wit.svg");
}
.btn--icon.calendar::before {    
    background-image: url("../images/ico-calendar-wit.svg");
}
.btn--icon.question::before {    
    background-image: url("../images/ico-question-wit.svg");
}




.btn--full {
    padding: 16px 28px;
    color: #fff !important;
    background-color: #ba895c;
    border: 1px solid #ba895c;
}

.btn--full:hover {
    background-color: transparent;
}



.btn--back {
    text-transform: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    margin-bottom: 32px;
    margin-top: 0;
    opacity: 0.6;
}

.btn--back::before {
    display: inline-block;
    content: "\f060";
    content: "\f177";
    font-family: "Font Awesome 5 Pro";
    font-size: 14px;
    font-weight: 400;
    margin-right: 12px;
}

.btn--back:hover {
    opacity: 1;
}




.btn__group {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    
    margin-top: 16px;
}

.btn__group.horizontal {
    flex-flow: row wrap;
    column-gap: 30px;
    row-gap: 16px;
}

.btn__group .btn {
    margin-top: 0;
    
}


.btn__group .btn + .btn {
    margin-top: 12px;
}



/* --- EINDE BUTTONS --- */



#footer {
	padding-top: 150px;
    color: rgba(255, 255, 255, 0.8);
	background: linear-gradient(
        to bottom,
        #445d47,
        #365347
    );
	flex: none;
}

.footer__title {
    text-transform: uppercase;
    color: #fff;
    font-weight: 500;
    margin-bottom: 20px;
}

#footer a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
}

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



.footer__top {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.footer__logo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}


.footer__logo img {
    width: 300px;
    max-width: 300px;
    min-width: 250px;
    margin: 0 auto;
}

.footer__section .btn {
    margin-top: 0;
}



.content_small .footer__ql {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
    margin: 90px 0 40px;
}

.footer__ql li {
    padding: 0 !important;
}
.footer__ql li::before {
    display: none !important;
}

.footer__ql a:hover {
    color: #fff;
    text-decoration: none !important;
}

#subfooter {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.8);
	padding: 24px 0;
    
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#subfooter a:hover {
    text-decoration: none;
}


#sig img {
    display: block;
}

/*--- LISTICO ---*/

.content_small ul {
	display: block;
	padding: 0 !important;
/*	margin: 20px 0;*/
/*    margin-bottom: 20px;*/
}

.content_small ul li {
	list-style: none;
	padding-left: 25px;
	padding-bottom: 7px;
}

.content_small ul li::before {
	content: "";
	position: absolute;
	display: block;
	width: 13px;
	height: 13px;
	top: 8px;
	left: 0;
	background-image: url("../images/ico-arrow.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50%;
}


.content_small ul.plus li::before {
	width: 16px;
	height: 16px;
	top: 6px;
	background-image: url("../images/ico-plus-bold.svg");
}

.content_small ul.check li::before {
	width: 13px;
	height: 13px;
	top: 8px;
	background-image: url("../images/ico-check.svg");
}

.content_small ul.arrow li::before {
	width: 13px;
	height: 13px;
	top: 8px;
	background-image: url("../images/ico-arrow.svg");
}

.content_small ul.comment li::before {
	width: 17px;
	height: 17px;
	top: 5px;
	background-image: url("../images/ico-comment.svg");
}

.content_small p + ul {
    margin-top: -8px;
}


.content_small ul ul {
    margin-left: 24px;
    margin-bottom: 12px;
}

/*--- EINDE LISTICO ---*/



.flex__container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}
.flex--reverse {flex-direction: row-reverse;}




.hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    
    height: calc(100vh - 125px);
    min-height: 500px;
    max-height: 900px;
    padding-bottom: 40px;
}

.pgdetail .hero {
    height: 20vh;
    min-height: 300px;
    padding-bottom: 0;
}


.hero__media {
    position: absolute;
    right: 0;
    top: 0;
    width: 50vw;
    height: 100%;
    z-index: -1;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(255, 255, 255, 0.30) 60%
    );
}

.hero .h1 {    
    font-size: clamp(2rem, 6vw, 3rem);
    padding-bottom: 40px;
    margin-bottom: 50px;
}


.hero .h1,
.pgdetail .hero h1 {
    width: 70%;
}

.hero h1::after,
.hero .h1::after {
    height: 0.4rem;
    clip-path: polygon(
        0 0,
        100% 0.133rem,
        100% 0.267rem,
        0 100%
    );
}

.hero p {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
}

.pgdetail .hero p {
    font-size: 18px;
}

.hero span {display: inline-block;}


.tagline {
    color: #ba895c;
    font-size: 14px;
    margin-bottom: 24px;
    font-weight: 600;
    text-transform: uppercase;
}





/* --- DARK --- */

.dark {    
    background: linear-gradient(
        to bottom,
        #445d47,
        #365347
    );
}


.dark h2, .dark .h2,
.dark h3, .dark .h3,
.dark h4, .dark .h4,
.dark p,
.dark .btn {
    color: #fff !important;
}

.dark h2::after, .dark .h2::after {
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 0.1)
    );
}

.dark a {
    color: #fff;
}


/* --- EINDE DARK --- */




.list--xl {
    padding: 0;
    margin: 40px 0 0 0 !important;
}

.list--xl li {
    list-style-type: none;
    font-family: "Libre Baskerville", serif;
    font-size: 24px;
    
    padding: 24px 0 24px 40px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


.list--xl li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 33px !important;
    width: 20px !important;
    height: 20px !important;
    
    background-image: url("../images/ico-arrow.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
}

.list--xl li a {
    text-decoration: none;
    transition: 0.2s;
}
.list--xl li a:hover {color: #ba895c;}

.col-count-2 {
    column-count: 2;
    column-gap: 80px;
}



/* --- GROENE SECTIE --- */



.section--framed {
    padding: 120px 0 220px;
    margin-right: 5vw;
    margin-left: 5vw;
    margin-bottom: 100px;
}

.pgdetail .section--framed {
    padding: 120px 0;
}

.section--framed .list--xl {
    margin-top: 80px;
}


.section__media {
    width: 40vw;
    max-width: 600px;
    max-height: 600px;
    
    overflow: hidden;
    
    position: absolute;
    left: 0;    
    bottom: 0;
    transform: translate(-100px, 100px);
}

.section__media img {
    display: block;
    width: 100%;
    height: 100%;
}



/* --- EINDE GROEN SECTIE --- */






.quote {
    max-width: 1100px;
    margin: 0 auto;
    
    font-family: "Libre Baskerville", serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
}

.quote-sm {
    font-family: "Libre Baskerville", serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
}

.quote p {
    padding: 0;
}


#container > .content_small > .quote {
/*    padding-bottom: 120px;*/
}








.process-steps {    
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    row-gap: 44px;
    
    counter-reset: step;

    margin: 60px 0 0 0;
    padding: 0;
    list-style-type: none;
}

.process-steps__item {
    counter-increment: step;
    
    width: 47%;
    padding-bottom: 32px;
    padding-left: 60px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.process-steps__item::before {
    content: counter(step, decimal-leading-zero) ".";
    
    position: absolute;
    left: 0;
    top: -4px;

    color: #996146;
    font-weight: 700;
}








.cards {
    display: flex;
    flex-flow: row wrap;
    gap: 40px;
}



.card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    
    width: calc((100% - 2 * 40px) / 3);
    padding: 50px 32px 40px;
    
    text-decoration: none !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    
    overflow: hidden;
    transition: 0.2s;
}

.card:hover {
    box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.05);
}


.card::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 150px;
    aspect-ratio: 1 / 1;
    
    transform: translate(-80px, 30px);
    
    background-image: url("../images/logo-icon.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    
    opacity: 0.04;
}



.card h2 {
    padding-bottom: 0;
}





.card h2 {
    margin-bottom: 0;
    font-size: 20px;
}
.card h2::after {display: none;}

.card p:last-of-type {
    padding-bottom: 0;
}








.team h2 {
    margin-bottom: 30px;
    margin-bottom: 0;
    padding-bottom: 10px;
}

.team h2::after{
    display: none;
}


.team__subtitle {
    font-size: 16px;
    font-weight: 400;
    margin-top: -4px;
}



.team__member {
    display: flex;
    flex-flow: row-reverse nowrap;
    justify-content: flex-end;
    column-gap: 100px;
    margin-top: 140px;
}

.team .team__member:first-of-type {
    margin-top: 0;
}

.team .team__member:nth-child(even){
    flex-flow: row nowrap;
}


.team__content {
    width: 65%;
    padding-top: 80px;
}

.team__media {
    width: 320px;
    min-width: 320px;
}

.team__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}



.team .accordion {
    margin-top: 50px;
}

.team .accordion__header {
    font-size: 18px;
}



.accordion__header {
    font-family: "Libre Baskerville", serif;
    font-size: 20px;
	cursor: pointer;
	font-weight: 400;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: 0.2s;
    
    display: flex;
    justify-content: space-between;
    column-gap: 40px;
}

.accordion .accordion__header:not(:first-of-type) {
    margin-top: 4px;
}

.accordion__header:hover {
	color: #ba895c;
}

.accordion__content {
	display: none;
	padding: 25px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}


.accordion ul {
    margin: 0;
}

.accordion__header::after {
    content: "\f107";
    font-family: "Font Awesome 5 Pro";
    color: #ba895c;
}

.active.accordion__header::after {
    content: "\f106";
}


.cta {
    max-width: 1350px;
    margin: 0 auto;
    padding: 80px;
}
.cta__body {width: 70%;}



/* --- CTA XS --- */

.cta--xs {
    padding: 50px 40px;
    font-size: 17px;
    line-height: 1.6;
}


.cta--xs h4 {margin-bottom: 20px;}

.cta--xs p + p {
    margin-top: 16px;
    padding-bottom: 0;
}

.cta--xs span {
    display: block;
    font-size: 14px;
    letter-spacing: 1px;
    opacity: 0.7;
}

/* cta--xs btn's */

.cta--xs .btn--icon {
    width: 100%;
    margin-top: 16px;
}

.cta--xs span + .btn--icon {
    margin-top: 4px;
}

.cta--xs .btn--icon + .btn--icon {
    margin-top: 12px;
}

.cta--xs .btn--icon:hover {color: #ba895c !important;}
.cta--xs .btn--icon.mail:hover::before {background-image: url("../images/ico-envelope-bruin.svg");}
.cta--xs .btn--icon.phone:hover::before {background-image: url("../images/ico-phone-bruin.svg");}
.cta--xs .btn--icon.calendar:hover::before {background-image: url("../images/ico-calendar-bruin.svg");}
.cta--xs .btn--icon.question:hover::before {background-image: url("../images/ico-question-bruin.svg");}


.cta--xs .btn--full {
    display: block !important;
    text-align: center;
    background-color: #fff;
    border-color: #fff;
    color: #365347 !important;
}

.cta--xs .btn--full:hover {    
    background-color: #ba895c;
    border-color: #ba895c;
    color: #fff !important;
}


.cta--xs .notice {
    margin-top: 20px;
    font-size: 14px;
    letter-spacing: 1%;
    opacity: 0.8;
}

.cta--xs .notice p {
    margin-top: 0;
}


.collab .cta--xs {
    margin-top: 50px;
}




/* --- PAGINA MET FORM --- */


.form {
    padding: 40px 0;
    background-color: rgba(54, 83, 71, 0.1);
}


.form__details .h4 {margin-bottom: 0;}
.form__details p {padding-bottom: 18px;}


.form__details i {
    width: 24px;
}

.form__details a {
    text-decoration: none;
    color: inherit;
}
.form__details a:hover {text-decoration: underline;}

.form__details .btn--icon {
    margin-top: 0;
}

.form__details ul {margin: 0;}


.form h2 {
    margin: 0 40px;
    padding: 0;
    font-size: 22px;
}
.form h2::after {display: none;}

.fsBody form {
    margin-top: 0 !important;
}


/* --- EINDE PAGINA MET FORM --- */




/* --- DETAIL --- */


.detail h2 {
	font-size: 22px;
    line-height: 1.5;
	
	padding-bottom: 20px;
	margin-bottom: 0;
}

.detail h3 {
    font-family: "DM Sans", sans-serif;
	font-size: 16px;
    font-weight: 600;
	line-height: 1.5;
    text-transform: uppercase;
    color: #191f1d;
    padding-bottom: 0;
	margin-bottom: 5px;
    letter-spacing: 0.02rem;
}

.detail h2::after,
.detail h3::after {
    display: none;
}





/* --- EINDE DETAIL --- */




.gallery {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    gap: 20px;
    
    margin-top: 40px;
}

.gallery a {
    width: calc(50% - 10px);
}

.zoom {
    font-size: 14px;
    margin-top: 20px;
    color: #ccc;
}

.zoom::before {
    content: "\f00e";
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    margin-right: 8px;
}





.sitemap a {
    text-decoration: none;
    color: rgba(25, 31, 29, 0.8);
}
.sitemap a:hover {color: #ba895c;}




.inv {opacity: 0;}




.fs--sm {
    font-size: 16px;
    line-height: 1.6;
}




.portrait,
.landscape,
.square {
    display: block;
    width: 100%;
    object-fit: cover;
}

.portrait {aspect-ratio: 9 / 10;}
.landscape {aspect-ratio: 4 / 3;}
.square {aspect-ratio: 1 / 1;}





.txt--center {text-align: center;}

.uppercase {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.groen {
    color: #365347;
}

hr {
    margin: 60px 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    opacity: 0.15;
}


.mt20 {margin-top: 20px;}


.spacer--sm {padding: 30px 0;}
.spacer--md {padding: 50px 0;}
.spacer--lg {padding: 75px 0;}


/************************************** RESPONSIVE CSS *****************************************/
/****************************************************************************************************/



@media only screen and (max-width: 1200px) {
    
}

@media only screen and (max-width: 960px) {
    
    .section100, .section75, .section70, .section60, .section55, .section50, .section48, .section45, .section40, .section35, .section33, .section31, .section30, .section25, .section23, .section20, .section19 {
        width: 100%;
        margin-top: 0px; 
    }
    
    .twee_links, .twee_rechts {margin-right:0; margin-left:0; margin-bottom: 10px;}
    .drie_links, .drie_mid, .drie_rechts {margin-right:0;margin-left:0; margin-bottom: 10px;}
    .vier_links, .vier_mid_links, .vier_mid_rechts, .vier_rechts {margin-right:0; margin-left:0; margin-bottom: 10px;}
    .vijf_links, .vijf_mid_links, .vijf_mid_rechts, .vijf_rechts, .vijf_mid {margin-right:0; margin-left:0; margin-bottom: 10px;}
    
    .section100 img, .section75 img, .section70 img, .section60 img, .section55 img, .section50 img, .section48 img, .section45 img, .section40 img, .section35 img, .section33 img, .section31 img, .section30 img, .section25 img, .section23 img, .section20 img , .section19 img,
    .cta--xs {
        margin-top: 50px;
    }
    
    
    .flex__container {
        flex-direction: column;
        row-gap: 50px;
    }
    .flex__container img {margin-top: 0;}
    
    
    
    #container {padding: 120px 0 !important;}
    .pgdetail #container {padding-top: 60px !important;}
    
    
    .content_xs {
        padding: 0;
    }
    
    
    .hero h1,
    .hero .h1 {
        width: 100% !important;
    }
    .hero p {
        font-size: 17px;
        line-height: 1.8;
    }
    
    
    
    
    .hero__media {width: 75vw;}
    .hero__media::after {
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.99),
            rgba(255, 255, 255, 0.85)
        );
    }
    
    .pgdetail .hero__media {
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.99),
            rgba(255, 255, 255, 0.95)
        );
    }
    
    
    
    
    
    
    
    
    
    
    
    .section--framed {
        padding: 120px 40px !important;
    }
    
    
    .section--framed .list--xl {
        margin-top: 50px;
    }
    
    
    
    .list--xl li {
        font-size: 20px;
        padding-left: 32px;
    }
    
    .list--xl li::before {
        top: 32px;
        width: 18px;
    }
    
    .col-count-2 {column-count: 1;}
    
    
    
    
    
    .process-steps__item {
        width: 100%;
        padding-left: 0;
        border-color: rgba(0, 0, 0, 0.03);
    }
    
    .process-steps__item::before {
        position: relative;
        display: block;
        margin-bottom: 10px;
    }
    
    
    
    .quote {
        padding-left: 5vw;
        padding-right: 5vw;
        font-size: 22px;
        line-height: 1.6;
    }
    
    
    
    
    .team__member {
        flex-direction: column-reverse !important;
        row-gap: 50px;
    }
    
    .team__content {
        width: 100%;
        padding: 0;
    }
    
    .team__media {
        width: 100%;
    }
    
    .team__media img {
        max-width: 320px;
        margin: 0 auto;
    }
    
    
    
    
    
    
    .cta {
        padding: 80px 60px;
    }
    .cta__body {width: 100%;}
    
    
    
    
    .card {
        width: calc((100% - 1 * 40px) / 2);
        padding: 40px 25px 30px;
    }
    .card span {
        display: inline-block;
        white-space: inherit;
    }
    
    .card h2 {
        font-size: 18px;
        line-height: 1.5;
    }

    
    
    .gallery {
        margin-top: 20px;
    }
    .gallery img {
        margin-top: 0;
    }
    
    
    
    
    .footer__top {
        flex-direction: column;
        row-gap: 60px;
        text-align: center;
    }
    
    
    
    .footer__logo {
        position: relative;
    }
    
    .footer__title {
        font-size: 17px;
        font-weight: 600;
    }
    

    
    .footer__ql {
        flex-direction: column !important;
        margin: 60px 0 !important;
        text-align: center;
    }
    
    .footer__ql li {
        margin-bottom: 4px;
    }
    
    
    
    .form {margin-top: 80px;}    
    .form--afspraak {
        margin-top: 0;
        margin-bottom: 80px;
    }
    
    
    
    
    .mb__hidden {display: none;}
    
    
    
    
    
    .spacer--lg {padding: 75px 0;}
    
    
    
    h1, .h1 {
        font-size: 28px;
        padding-bottom: 24px;
        margin-bottom: 36px;
    }
    
    h1::after, .h1::after {
        height: 0.2rem;
        clip-path: polygon(
            0 0,
            100% 0.066rem,
            100% 0.132rem,
            0 100%
        );
    }
    
    h2, .h2 {
        font-size: 24px;
        line-height: 1.8;
    }
    
    h3, .h3 {
        
    }
    
    h4, .h4 {
        
    }
    
}


@media only screen and (max-width: 640px) {
    
    .nav__cta {
        display: none;
    }
    
    .hamx.is-active + #header .nav__cta {
        display: block;
        top: 540px;
        right: 50%;
        transform: translateX(50%);
    }
    
    
    .cards {gap: 32px;}
    .card {
        width: 100%;
        padding: 36px 24px;
    }
    
    
    .form {padding: 40px 20px 20px;}    
    .form h2 {margin: 0 20px 20px;}
    
}



@media only screen and (max-width: 480px) {
    
    
    #container {padding: 100px 0 !important;}
    
    
    
    
    .hero__media {width: 100vw;}    
    .hero__media::after {
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.99),
            rgba(255, 255, 255, 0.92)
        );
    }
    
    
    
    
    
    .list--xl li {
        font-size: 18px;
        padding-left: 30px !important;
    }
    .list--xl li::before {
        width: 16px !important;
        top: 29px !important;
    }
    
    
    
    
    
    .team__media img {
        max-width: unset;
    }
    
    
    
    
    
    
    .section--framed,
    .cta,
    .cta--xs{
        padding: 64px 40px !important;
    }
    
    
    
    .footer__logo img {
        width: 75vw;
    }
    
    
    
    
    .btn--outline {
        padding: 14px 24px;
        border: 1px solid #ba895c;
    }
    
    
    
    .quote {
        font-size: 18px;
        line-height: 1.8;
    }
    
    
    
    
    
    
    
    
    

    
    .spacer--lg {padding: 60px 0;}
    
    
    
    h1, .h1 {font-size: 24px;}
    h1::after, .h1::after {
        min-width: 175px;
    }
    
    
    h2, .h2 {font-size: 22px;}
    h2::after, .h2::after {
        min-width: 175px;
        height: 0.2rem;

        clip-path: polygon(
            0 0,
            100% 0.066rem,
            100% 0.132rem,
            0 100%
        );
    }
    
    
    h3, .h3 {
        
    }
    
    h4, .h4 {
        
    }
}


/** RESPOSIVE MENU **/

@media only screen and (min-width: 1401px) {
    #menu {
/*        display: block !important;*/
    }
    .hamx {
        display: none;
    }
}

@media only screen and (max-width: 1400px) {
    .hamx {
        top: 45px;
        right: 25px;
        position: absolute;
        z-index: 101;
        display: block;
        cursor: pointer;
    }
    
    
    #menu {     
        display: none;
        
        position: absolute;
        top: 160px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: auto;
        min-height: 540px;
    }
    
    #menu ul {
        flex-direction: column;
        justify-content: center;
    }
    
    #menu li, #menu li a:not(.btn) {
        display: block;
        text-align: left;
        background-color: #fff;
        
        font-size: 20px;
        padding: 10px 16px;
    }
    
    .nav__cta {
        right: 110px;
    }
    
    
}





.hamx .line {
    width: 36px;
    height: 4px;
    background-color: rgba(25, 31, 29, 0.8);
    display: block;
    margin: 6px auto;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.hamx:hover {
    cursor: pointer;
}
#x-1.is-active .line:nth-child(2) {
    opacity: 0;
}
#x-1.is-active .line:nth-child(1) {
    -webkit-transform: translateY(10px) rotate(45deg);
    -ms-transform: translateY(10px) rotate(45deg);
    -o-transform: translateY(10px) rotate(45deg);
    transform: translateY(10px) rotate(45deg);
}
#x-1.is-active .line:nth-child(3) {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    -ms-transform: translateY(-10px) rotate(-45deg);
    -o-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
}


.fancybox-navigation {
    height: 100%;
}


/* THUMBS FANCYBOX ONDERAAN DE PAGINA - STYLE.CSS LADEN NA FB CSS */
/*
.fancybox-caption:before{
    background-image: none;
}
        
@media all and (min-width: 800px) {
  .fancybox-thumbs {
    top: auto;
    width: auto;
    bottom: 0 !important;
    left: 0;
    right : 0;
    height: 95px;
    padding: 10px 10px 5px 10px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.0);
  }
  
  .fancybox-show-thumbs .fancybox-inner {
    right: 0;
    bottom: 95px;
  }
}

 @media all and (max-width: 800px) {
  .fancybox-thumbs {
    display: none !important;
  }
  .fancybox-show-thumbs .fancybox-inner {
    right: 0;
  }
}
*/

/* Copyright (C) - IMAXX Smart Web Solutions - All Rights Reserved */