/*
     !! - Denk eraan dat de kleuren in de editor options en de css hetzelfde moeten zijn. - !!
*/
@font-face{
  font-family: 'YuGothicUI-Light';
  font-stretch: normal;
  font-display: swap;
  src: url('../fonts/subset-YuGothicUI-Light.woff2') format('woff2');
}

@font-face{
  font-family: 'YuGothicUI-Semibold';
  font-stretch: normal;
  font-display: swap;
  src: url('../fonts/subset-YuGothicUI-Semibold.woff2') format('woff2');
}

/* 
    Variabelen
*/
:root{
  /* Kleuren */
	/*--primaryColor:#e84e1b;*/
  --primaryColor:#f26c45;
  --primaryVariationColor:#e26641;
  --secondaryColor:#9fa099;
  --secondaryVariationColor:#c1ceb0;
  --blackCustomColor:#000000;
  --whiteCustomColor:#ffffff;
  --greyCustomColor:#d5d2cd85;

  /* Fonts */
  --primaryFont:'YuGothicUI-Light', sans-serif;
  --secondaryFont:'YuGothicUI-Semibold', sans-serif;

	--wp--preset--font-size--small: 0.8rem;
	--wp--preset--font-size--normal: 1rem;
	--wp--preset--font-size--medium: 1rem;
	--wp--preset--font-size--large: 1.2rem;
	--wp--preset--font-size--x-large: 1.5rem;
    --wp--preset--font-size--huge: 2rem;

	/* Breedte wrapper, inner blocks en zoekveld wrap */
  --siteWidth: 1200px;
  --defaultGap: 30px;
  --flex3basis: calc((100% - 2 * var(--defaultGap)) / 3);
  /* .site-main margin boven en onder. Mobiel vanaf 768 */
  --siteContentMarginDesktop: var(--defaultGap);
  --siteContentMarginMobile: var(--defaultGap);

  /* Buttons */
  --buttonFontSize: 16px;
  --buttonPadding: 13px 26px;
  --buttonBorderRadius: 25px;
  --buttonColor: var(--whiteCustomColor);
  --buttonBackgroundColor: var(--primaryColor);
  --buttonHoverBackgroundColor: var(--primaryVariationColor);

  /* Blocks */
  --mediaTextBlockMarginBottom: var(--defaultGap);
  --mediaTextBlockGap: var(--defaultGap);
  
  /* Header */
  --siteTitleIconMaxHeight: 100px;
  --menuTextColor: var(--secondaryColor);
  --menuFontSize: 14px;
  --menuLetterSpacing: 0;
  --menuCurrentItemColor: var(--primaryColor);
  --menuTextTransform: uppercase;
  --menuItemHoverColor: var(--primaryColor);
  --menuItemHoverBackground: inherit;
  --subMenuBackgroundColor: #eee;
  --subMenuBackgroundColorHover: #fefefe;
  --subMenuBackgroundColorOnScroll: #eee;
  --menuBackgroundColorMobile: #eee;
  --menuWidthOnScroll: 215px;
  --searchSubmitSVG: #000;
  --searchSubmitSVGHover: #000;

  /* Images */
  --siteMainFigureBorderRadius: 5px;

  /* Footer */
  --footerBackgroundColor: #626e52;
  --siteFooterIconMaxWidth: 40px;
  --siteFooterLinkColor: var(--primaryColor);
  --siteFooterMadeByColor: var(--blackCustomColor);
}

@media ( min-width:768px ) {
  :root body{
    /* Kleuren */
    --defaultGap: 50px;
    --wp--preset--font-size--large: 1.3rem;
    --wp--preset--font-size--x-large: 2rem;
    --wp--preset--font-size--huge: 3rem;
  }
}

h1, h2, h3 { font-family:var(--primaryFont); }
h1, h2 {font-size: 30px;}
h3 { font-size:var(--wp--preset--font-size--x-large); }
h4, h5, h6 { font-size:var(--wp--preset--font-size--normal); font-weight:bold; }

.site-header .wrap .header-search {right: -31px;	}
.site-header.active .wrap .header-search.active {top: 34px;	}
.site-header .wrap {display: block;padding: 0;position: relative;}
.phone {position: absolute; margin-left: auto; height: fit-content;right:11px;top:88px; }


.phone svg{width: 18px;}
.nav-menu .nav-primary .menu-item.search button {transform:scale(0.8);background: transparent;}
.nav-menu .nav-primary .menu-item.search path { fill:var(--secondaryColor); }
.nav-menu .nav-primary .menu-item.search:hover path { fill:var(--primaryColor); }


.banner-wrap { text-align:center; }
.banner {max-height: 300px; /* border-left:16px solid transparent;border-right: 16px solid transparent;background-repeat: no-repeat; */ }
.home .banner { max-height:300px; background-position:50% center; } 
.banner::after { opacity:0.3; height:50%; }
.nav-menu {align-self: center;margin-top: 22px;justify-self: flex-end;}

.entry-content .wp-block-query ul{padding-left:0;}

.child-pages {display: grid;grid-template-columns: 1fr 1fr;gap: 60px;}
.child-pages .wp-block-media-text{gap: 30px;margin-bottom: 0;}
.child-pages .wp-block-buttons.is-content-justification-right{display:flex;}
.child-page{display:grid;grid-template-columns: 40% 1fr;}

ul.plaatsen {
    column-count: 2;
    width: 100%;
    list-style: none;
    padding: 0;
}


.reviews .wp-block-group__inner-container{
	padding: 0;
}

/* fix voor object fill, bug(?) in 5.9 ivm inline-block op a */
.wp-block-query figure{margin-top: 0}
.wp-block-post-featured-image a {display:block;}
.wp-block-latest-posts__featured-image a {display: block;margin-bottom:1.2em}
.wp-block-latest-posts__featured-image img {height: 200px;width:100%;border-radius: var(--siteMainFigureBorderRadius)}
.wp-block-latest-posts.is-grid { gap: var(--defaultGap); }
.wp-block-latest-posts.is-grid li {margin: 0; width: 100%;}
.wp-block-latest-posts__list a {font-size: 18px; font-weight: 700}
.wp-block-post-title a { display: inline-block; font-size: 18px; font-weight: 700; }

.reviews .wp-block-group__inner-container {gap: var(--defaultGap); column-count: 1;}

.wp-block-media-text.round figure { position:relative; height:0; padding-bottom:100%; }
.wp-block-media-text.round figure img {position:absolute;top: 50%;border-radius: 50%;width: 90%;margin: 0 auto;height: 90%;object-fit: cover;transform: translate(-50%, -50%);left: 50%;}
.wp-block-media-text.round figure::before,
.wp-block-media-text.round figure::after { content:''; width:100px; height:100px; position:absolute; background:#f26c45; border-radius:50%; }
.wp-block-media-text.round figure::before {top: 7%;left: 3%;transform:scale(0.8);opacity: 0.3;}
.wp-block-media-text.round figure::after {top: 70%;left: 71%;z-index:-1;opacity: 0.1;}

.home .wp-block-buttons:first-child {transform: translateY(calc(-32px - 50%));gap: 2rem;}
.home .wp-block-buttons:first-child .wp-block-button a {
    border: 2px solid #FFF;
    line-height: 72px;
    border-radius: 50px;
    font-size: 25px;
    font-weight: 100;
    padding: 0 30px;
}

/* Buttons */
.wp-block-button__link, button[type="submit"]{background-color: --primaryColor;color:var(--buttonColor);border-radius:var(--buttonBorderRadius);font-size:var(--buttonFontSize);font-weight:700;line-height:24px;padding:var(--buttonPadding);text-decoration:none;text-transform: uppercase;}

.wp-block-button__link:active, .wp-block-button__link:focus, .wp-block-button__link:hover, .wp-block-button__link:visited, button[type="submit"]:active, button[type="submit"]:focus, button[type="submit"]:hover, button[type="submit"]:visited{background-color: --primaryColor;color: #fff;}

/* Over Sustain Buttons */
.wp-block-group.over-mij-button {
	display: flex;
}
.wp-block-group__inner-container {
	/* display: flex; */
	align-content: flex-end;
}
html .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-facebook {
	background-color: #f26c45;
}
html .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-linkedin  {
	background-color: #f26c45;
}
html .entry-content ul li, .entry-content ol li {
	padding: 0;
}

.wp-block-button.icon a { font-size: 0; text-indent: -99999em; overflow: hidden; }
.wp-block-button.icon.facebook a {background: #f26c45 url(../svg/facebook.svg) 45% 100% no-repeat;background-size: 44%;}
.wp-block-button.icon.linkedin a { background: #f26c45 url(../svg/linkedin-in-brands.svg) 50% no-repeat; background-size:40%; }


/* column break fix voor chrome */
.reviews .wp-block-quote {background-color:var(--greyCustomColor);padding: 40px;border-radius: 5px;margin: 0;height: max-content;-webkit-column-break-inside: avoid;-moz-column-break-inside:avoid;-moz-page-break-inside:avoid;page-break-inside: avoid;break-inside: avoid-column;margin-bottom: 40px;}
.reviews .wp-block-quote p {font-size: 16px}
.reviews .wp-block-quote{background: transparent url(../svg/quote-oranje.svg) no-repeat top 10px left 10px;background-size:36px auto;padding-top:47px;text-align:left;background-color: var(--greyCustomColor);}
.reviews.wp-block-group{padding: 0}

.blogs h3{height: 1.2em;margin-bottom: calc(var(--defaultGap) / 2);overflow: hidden;}
.blogs .wp-block-post-template.is-flex-container {gap: 30px;}

.overmij-usp .wp-block-column {background-color: var(--greyCustomColor);  border-radius: 5px;  padding: 15px 30px;margin-bottom:32px}
.overmij-usp .wp-block-column:last-child{margin-bottom: 0}

/*3d hover effecten*/
.wp-block-post-template .hentry figure, .overmij-usp .wp-block-column, .reviews .wp-block-quote{transition: all .4s;}
.wp-block-post-template .hentry:hover figure, .overmij-usp .wp-block-column:hover, .reviews .wp-block-quote:hover { box-shadow: 0 6px 20px rgb(41 37 91 / 15%), inset 0 1px 1px rgb(0 0 0 / 10%);transition: all .4s; }



.af-label{display:none;}
.acf-fields > .acf-field, .af-submit{padding: 15px 0;}
html .acf-fields > .acf-field { border:none; padding:8px 0; }
html .acf-fields > .acf-field input,
html .acf-fields > .acf-field textarea { padding:12px 16px; }
.af-input.acf-input input::placeholder {color: #000;opacity: 0.77;}
p.icon {color: var(--buttonBackgroundColor);}

.site-footer { padding-top: 0;background-color: var(--primaryColor);}
.site-footer .wrap { padding: 32px 16px 0; }
.site-footer .wp-block-group{ margin: 0 auto;}
.site-footer .footer-menu {grid-template-columns: 1fr;grid-template-rows:1fr;gap: var(--defaultGap);}
.site-footer .footer-menu .widget:last-child{text-align: right;}
.site-footer .footer-menu .icon.icon-sustain-logo {max-width: 300px;max-height: 100px;}
.site-footer .socials-bar {padding: 0; background: #e9e7e5; position: relative; transition: all 0.8s ease;}
.site-footer .socials-bar.active {padding-bottom: 32px;}
.site-footer .socials-bar .widget { transition: all 0.8s ease;  max-height:0; overflow:hidden; }
.site-footer .socials-bar.active .widget {max-height: 300px; opacity: 1;}
.site-footer .icon {width: 40px;height: 40px;padding:8px;border-radius: 50%;}
.site-footer .icon.icon-facebook-brands {background-color:#FFF;color:var(--primaryColor);padding: 2px;}
.site-footer .icon.icon-linkedin-in-brands {border: 2px solid #FFF;overflow:visible;width: 40px;height: 40px;margin-left: 10px;}
.site-footer .socials-bar .widget{margin: 0;}
.site-footer .socials-bar .widget p{margin:0;height: 40px;width: 40px; background-color:var(--primaryColor); color: #FFF;border-radius: 50%;display: flex;justify-content: center;align-items: center;border: 3px solid #FFF;overflow: hidden;}
.site-footer .socials-bar .widget p a{line-height: 0; opacity:1; }
.site-footer p:last-child { margin-bottom:0;}
.site-footer h5, .site-footer p{ color: var(--whiteCustomColor); }
.site-footer .cls-1 {fill: var(--whiteCustomColor);}

.site-footer .wp-block-group .wp-block-group__inner-container { padding:0;}
.site-footer .footer-menu .wp-block-group { padding:0; }

.over-sustain-foto figure{border-radius:50%}
.logo-group .wp-block-group__inner-container {display: flex;gap: 30px;}
/*dit gaat kapot haha */
.home .entry-content>div:last-child { transform:translateY(50px); }


@media (min-width:600px) {
  .blogs .wp-block-post-template.is-flex-container.is-flex-container.columns-3>li, .wp-block-query-loop.is-flex-container.is-flex-container.columns-3>li {width: calc(50% - 15px );}
  .wp-block-latest-posts.columns-3 li {flex-basis: var(--flex3basis); }
  .wp-block-latest-posts.is-grid li {margin: 0;flex-basis: calc((100% - 2 * var(--defaultGap)) / 3);}
  ul.plaatsen { column-count:3; }
}

@media (min-width: 769px) {
  .site-header .wrap {display: flex;justify-content: stretch;}
  .site-header .wrap .header-search {top: 100px;right:unset; }
  .site-main {margin: var(--siteContentMarginDesktop) 0;}
  .reviews .wp-block-group__inner-container {gap: var(--defaultGap); column-count:2; }
  .blogs .wp-block-post-template.is-flex-container.is-flex-container.columns-3>li, .wp-block-query-loop.is-flex-container.is-flex-container.columns-3>li {flex-basis: calc((100% - 2 * var(--defaultGap)) / 3);padding: 0;width: calc((100% - 2 * var(--defaultGap)) / 3);}
  .blogs .wp-block-post-template.is-flex-container { gap: var(--defaultGap); }
  .blogs .wp-block-post-template.is-flex-container .wp-block-post-excerpt__excerpt {height: 7.8em;overflow:hidden;}
  .blogs .wp-block-post-template.is-flex-container .wp-block-separator {height:1px;margin: calc(var(--defaultGap) /2) 0 calc(var(--defaultGap) / -2);}

  .site-footer .footer-menu {grid-template-columns: 1fr 1fr; }
  ul.plaatsen { column-count:4; }
}

@media (min-width: 782px) {
  .overmij-usp .wp-block-column{margin-bottom: 0; }
}

@media(min-width: 1001px) {
  .phone{right: 16px; top: 21px;}
  ul.plaatsen { column-count:5; }
}


/* Contact */
.icon a:hover {
	font-weight: 600;
}
.icon::before {
	font-family: 'Font Awesome 5 Free';
	display: inline-block;
    font-weight: 700;
    margin-right: 0.5rem;
}
.fa-blockthis::before {
	font-family: 'Font Awesome 5 Free';
	display: inline-block;
    font-weight: 700;
    margin-right: 0.5rem;
}

.contact-mail::before {
	content: "\f0e0";
}
.contact-tel::before {
	content: "\f879";
}
.culemborg::before{
	content: "\f0ac";
}
.fa-blockthis::before {
	content: "\f0e1";
	
}

.handle {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px 15px 3px;
    background: #e9e7e5;
    border-radius: 15px 0 0 0;
    cursor: pointer;
    border-bottom: 5px solid transparent;
    border-right: none;
    color: #f26c45;
    font-weight: 700;
    transform: translateY(-100%);
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
}
html .site-footer .socials-bar .wp-block-group {
	padding-bottom: 0;
}