/*

Theme Name: Essentius Bestuur
Template: kadence
Author: Cloudwise
Version: 1.0.1
Text Domain: cloudwise-basis-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

:root {
	--lichtgroen: #DEDC00;
	--groen: #94C01F;
	--donkergroen: #3AA935;
	--lichtblauw: #36A9E1;
	--blauw: #0069B4;
	--donkerblauw: #312783;
	--donkerderblauw: #252456;
	--roze: #E5007D;
	--oranje: #F29100;
	--donkeroranje: #E94E1B;
	--zwart: #1D1D1B;
	
	--hexagonratio: 230 / 267; 
	--triangleratio: 12 / 14; 
	--gap: 40px;
}

/* knoppen */
.kb-button:not(.kb-btn-global-inherit),
.kb-form .kadence-blocks-form-field .kb-forms-submit{ }
.kb-button:not(.kb-btn-global-inherit).knop{}
.kb-button:not(.kb-btn-global-inherit).knop:hover{}

.kb-button.knop-terug:after{display:none}
.kb-button.knop-terug:before{content: "\f104"; font-family: 'Font Awesome 5 Free'; font-weight: 700; padding-right:10px; position:relative; opacity:1;}

.knop a,
.knop a:active,
.knop a:visited,
a.knop,
a.knop:active,
a.knop:visited,
#wrapper .wp-block-kadence-posts a.post-more-link,
#wpwrap .wp-block-kadence-posts a.post-more-link,
#wrapper #archive-container a.post-more-link,
#wpwrap #archive-container a.post-more-link{display:inline-block; }
.knop a:hover,
a.knop:hover,
#wrapper .wp-block-kadence-posts a.post-more-link:hover,
#wpwrap .wp-block-kadence-posts a.post-more-link:hover,
#wrapper #archive-containers a.post-more-link:hover,
#wpwrap #archive-container a.post-more-link:hover {}


/* flickity */
#wrapper .flickity-page-dots{padding-left:0;}
#wrapper .flickity-page-dots .dot{}
#wrapper .flickity-page-dots .dot.is-selected{}


/* header */


/* pagina top (menu + banner) */
.pagina-top{}
.pagina-top .pagina-menu{position:relative; z-index: 200;}
.pagina-top .pagina-banner{ position:relative; z-index:100;}


/* zoeken */
.search-toggle-open-container{ margin-right:20px;}
.search-toggle-open-container .search-toggle-open{border-radius:0 !important; padding:5px 30px; transform:skew(-30deg);}
.search-toggle-open-container .search-toggle-label,
.search-toggle-open-container .search-toggle-icon{transform:skew(30deg);}

#search-drawer .drawer-inner input.search-field{border-radius:5px; padding:12px 30px !important;}
#search-drawer .drawer-inner input.search-field:focus{box-shadow:none !important;}

.search-items .wp-block-post-excerpt__more-text{display:none;} 


/* zoeken x  (browser default overschrijven) */
#search-drawer input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none; appearance: none;
	width: 20px; height: 20px; background-color: #fff; border-radius: 50%; cursor: pointer;
    -webkit-mask-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path fill='black' d='M18.3 5.7a1 1 0 0 0-1.4 0L12 10.6 7.1 5.7a1 1 0 1 0-1.4 1.4L10.6 12l-4.9 4.9a1 1 0 1 0 1.4 1.4L12 13.4l4.9 4.9a1 1 0 0 0 1.4-1.4L13.4 12l4.9-4.9a1 1 0 0 0 0-1.4z'/>\
    </svg>");-webkit-mask-repeat: no-repeat;-webkit-mask-position: center; -webkit-mask-size: contain;
}

/* Socials */
.header-social-wrap{}
.header-social-wrap a{-webkit-mask-image: url("images/hexagon_mask.svg"); mask-image: url("images/hexagon_mask.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;  -webkit-mask-position:center center; mask-position:center center;}
.header-social-wrap a.social-link-facebook{background-color:var(--blauw) !important;}
.header-social-wrap a.social-link-instagram{background-color:var(--roze) !important;}
.header-social-wrap a.social-link-linkedin{background-color:var(--blauw) !important;}
.header-social-wrap a:hover{background-color:var(--zwart) !important;}


/* Menu */
.custom-menu {list-style: none; margin: 0 !important; padding: 0 !important; width: 100%; max-width: 250px; font-family: 'Signika Negative', sans-serif;}
.custom-menu .menu-item {position: relative;}
.custom-menu .menu-item a {display: block; line-height:45px; color: var(--zwart); text-decoration: none; font-size: 24px;  font-weight: 500; transition: all 0.2s ease;}
.custom-menu .menu-item:hover > a,
.custom-menu .current-menu-item > a { color: var(--lichtblauw);}
.custom-menu .sub-menu {position: absolute; left: 100%; top: 0px; width: 240px; background: var(--lichtblauw); list-style: none; margin: 0; padding: 0; z-index: 900; visibility: hidden; opacity: 0; pointer-events: none;}
 .custom-menu .menu-item:hover > .sub-menu {visibility: visible; opacity: 1; pointer-events: auto;}

.custom-menu .sub-menu li a { line-height:30px; color: #fff; background-color: var(--lichtblauw); font-size: 18px; padding:0 30px;}
.custom-menu .sub-menu li:first-child a{padding-top:15px;}
.custom-menu .sub-menu li:last-child a{padding-bottom:15px;}
.custom-menu .sub-menu li a:hover { color: var(--zwart);}

.custom-menu > .menu-item > a::before {content:""; display: inline-block; height: 12px; aspect-ratio:var(--triangleratio);  background-color: transparent;  overflow: hidden; position: relative; transition:all 0.3s ease; padding-right:20px !important;
-webkit-mask-image: url("images/triangle_mask.svg"); mask-image: url("images/triangle_mask.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;}
.custom-menu > .menu-item-has-children > a::before{background-color:var(--lichtblauw);}



/* Footer */
.footer-top{}
.footer-bottom{position:relative;}
.footer-bottom .footer-bottom-1,
.footer-bottom .footer-bottom-2,
.footer-bottom .footer-bottom-3,
.footer-bottom .footer-bottom-4{position:relative;}
.footer-bottom .footer-bottom-1:before,
.footer-bottom .footer-bottom-2:before,
.footer-bottom .footer-bottom-3:before,
.footer-bottom .footer-bottom-4:before{content:""; z-index:300; width:100%; height:210px; background-color:#fff; position:absolute; top:-109px; left:0; }

.footer-bottom .footer-bottom-2:before,
.footer-bottom .footer-bottom-4:before{transform: skew(0deg, 30deg);}
.footer-bottom .footer-bottom-1:before,
.footer-bottom .footer-bottom-3:before{transform: skew(0deg, -30deg);}



/* nieuws kadence */
/* kadence nieuws overzicht */
.wp-block-kadence-posts{}
.wp-block-kadence-posts .post-thumbnail{}
.wp-block-kadence-posts .content-bg{}
.wp-block-kadence-posts .entry-taxonomies{}
.wp-block-kadence-posts .entry-taxonomies .category-style-pill a{}
.wp-block-kadence-posts .entry-header{margin:0;}
.wp-block-kadence-posts .entry-header .entry-title{}
.wp-block-kadence-posts .entry-header .entry-title a{}
.wp-block-kadence-posts .entry-header .entry-title a:hover{}
.wp-block-kadence-posts .entry-header .entry-meta{}
.wp-block-kadence-posts .entry-summary{margin:0;}
.wp-block-kadence-posts .entry-summary p{margin:0;}
.wp-block-kadence-posts .entry-actions{}
.wp-block-kadence-posts .entry-content-wrap .entry-footer a.post-more-link{ text-transform:none; letter-spacing:0;}
.wp-block-kadence-posts .entry-content-wrap .entry-footer a.post-more-link:hover{}
.wp-block-kadence-posts .entry-content-wrap .entry-footer a.post-more-link .kadence-svg-iconset{display:none;}

/* kadence nieuws archief */
#archive-container .post-thumbnail{}
#archive-container .entry-taxonomies .category-style-pill a{}
#archive-container .entry-header .entry-title{}
#archive-container .entry-header .entry-title a{}
#archive-container .entry-header .entry-title a:hover{}
#archive-container .entry-header .entry-meta{}
#archive-container .entry-content-wrap .entry-footer a.post-more-link{ text-transform:none; letter-spacing:0;}
#archive-container .entry-content-wrap .entry-footer a.post-more-link:hover{}
#archive-container .entry-content-wrap .entry-footer a.post-more-link .kadence-svg-iconset{display:none;}



/* LB Banner */
.Banner { position:relative;  position:relative; background-color:var(--lichtblauw); max-width:800px; background-image:url("images/kleuren.png"); background-size:cover; background-repeat:no-repeat; 
-webkit-mask-image: url("images/banner_mask.svg"); mask-image: url("images/banner_mask.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.BannerImages {width:100%; aspect-ratio:160/107;}
.BannerImage {height:100%; width:100%; background-repeat:no-repeat; background-size:cover; background-position:center center; }
.Banner .BannerImages .flickity-page-dots {width:calc(100% - 33px); bottom:40px; }
.Banner .flickity-page-dots .dot{background:#fff; height:12px; width:12px; opacity:0.5;}
.Banner .flickity-page-dots .dot.is-selected{ opacity:1;}
.Banner .BannerImages .flickity-viewport {transition: 0.3s}

.block-editor-block-list__layout .Banner{max-height:530px; overflow:hidden;}



/* LB CTA */
.CTAWrapper{display:flex; right: 0; }     
.CTAWrapper .CTAItem{background-color:var(--donkerblauw); display:flex; align-items: center; justify-content: center; position:relative; color:#fff; width:277px; aspect-ratio:var(--hexagonratio); margin: 0; color: #ffffff;overflow: hidden; position: relative; transition:all 0.3s ease; padding:60px 30px; box-sizing:border-box; overflow:hidden; 
-webkit-mask-image: url("images/hexagon_mask.svg"); mask-image: url("images/hexagon_mask.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;}   
.CTAWrapper .CTAItem:hover{text-decoration:none;} 
.CTAWrapper .CTAItem .CTATitel{color:#fff; font-size:34px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; padding:0; text-align:center; line-height:36px;}   
.CTAWrapper a.CTAItem .CTATitel{transform:translateY(-10px);}

.CTAWrapper a.CTAItem:after{content:""; display:block; width:18px; aspect-ratio:var(--triangleratio); background-color:#fff; position:absolute; bottom:40px; left:calc(50% - 9px); transition:all 0.3s ease;
-webkit-mask-image: url("images/triangle_mask.svg"); mask-image: url("images/triangle_mask.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;}
.CTAWrapper a.CTAItem:hover:after{transform:rotate(90deg);}  

.CTAWrapper.lichtgroen .CTAItem{ background-color:var(--lichtgroen); }
.CTAWrapper.groen .CTAItem{ background-color:var(--groen); }
.CTAWrapper.donkergroen .CTAItem{ background-color:var(--donkergroen); }
.CTAWrapper.lichtblauw .CTAItem{ background-color:var(--lichtblauw); }
.CTAWrapper.blauw .CTAItem{ background-color:var(--blauw); }
.CTAWrapper.donkerblauw .CTAItem{ background-color:var(--donkerblauw); }
.CTAWrapper.roze .CTAItem{ background-color:var(--roze); }
.CTAWrapper.oranje .CTAItem{ background-color:var(--oranje); }
.CTAWrapper.donkeroranje .CTAItem{ background-color:var(--donkeroranje); }

.block-editor-block-list__layout .CTAWrapper { pointer-events: none; }
.block-editor-block-list__layout .CTAWrapper a{text-decoration:none !important;}




/* LB Home Lint */
.LintWrapper{display:flex; width:calc(100% - 50px); padding-bottom: 14%; padding-top:14%; position:relative;}  
.LintWrapper .LintBlock{width:50%; aspect-ratio:49/57; background-color:var(--donkeroranje); transform:skew(0deg, 30deg); position:absolute; left:-50%;}
.LintWrapper .LintImgWrapper{width:50%; aspect-ratio:49/57; transform:skew(0deg, -30deg); position:relative; overflow:hidden; background-color:var(--oranje);}  
.LintWrapper .LintImgWrapper .LintImg{ width:100%; aspect-ratio: 49/87; background-size:cover; background-position:center center; background-repeat:no-repeat; transform:skew(0deg, 30deg); position:absolute; left:0; top:-24%; }  
.LintWrapper .LintContentWrapper{width:50%; aspect-ratio:49/57; display:flex; align-items: center; background-color:var(--oranje); transform:skew(0deg, 30deg); text-decoration:none;}  
.LintWrapper .LintContentWrapper .LintContent{max-height:60%; width:100%; background-size:cover; background-position:center center; background-repeat:no-repeat; transform:skew(0deg, -30deg) translateY(-20px); color:#fff;font-size:26px; box-sizing:border-box; padding-bottom:0; padding:0px 35px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; text-decoration:none; position:relative;}
  
.LintWrapper a.LintContentWrapper:after{content:""; display:block; width:18px; aspect-ratio:var(--triangleratio); background-color:#fff; position:absolute; bottom:60px; right:35px; transition:all 0.3s ease; transform:skew(0deg, -30deg);
-webkit-mask-image: url("images/triangle_mask.svg"); mask-image: url("images/triangle_mask.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;}
.LintWrapper a.LintContentWrapper:hover:after{transform:skew(0deg, -30deg) rotate(90deg);} 

.block-editor-block-list__layout .LintWrapper { pointer-events: none; }
.block-editor-block-list__layout .LintWrapper a{text-decoration:none !important;}



/* LB Home Video */
.VideoWrapper{ display:flex; align-items:flex-end;  }
.VideoWrapper .VideoContentWrapper{ width:calc((((100% - ( var(--gap) * 2)) / 3) * 2 ) + var(--gap)); margin-right:50px; display: flex; align-items:flex-end; padding-bottom:9%; padding-top:30%; }

.VideoWrapper .VideoGrootContent{ background-color: var(--donkerderblauw);  padding:10px 35px; width:50%; background-color:var(--donkerderblauw); position:relative; transform:translateY(-34%);}
.VideoWrapper .VideoGrootContent .content{position:relative; z-index:20;}
.VideoWrapper .VideoGrootContent h2,
.VideoWrapper .VideoGrootContent h3,
.VideoWrapper .VideoGrootContent h4,
.VideoWrapper .VideoGrootContent h5{ color: var(--roze); }
.VideoWrapper .VideoGrootContent p { color: #fff; }
.VideoWrapper .VideoGrootContent:before,
.VideoWrapper .VideoGrootContent:after{content:""; width:100%; aspect-ratio:49/40; background-color:var(--donkerderblauw);  position:absolute; z-index:10;}
.VideoWrapper .VideoGrootContent:before{top:-34%; left:0; transform: skew(0deg, -30deg)}
.VideoWrapper .VideoGrootContent:after{bottom:-34%; left:0; transform: skew(0deg, 30deg) }


.VideoWrapper .VideoKleinContent{ width:50%; aspect-ratio:49/57; display:flex; align-items: center; background-color:var(--roze); padding:0 35px; transform:skew(0deg, -30deg); }
.VideoWrapper .VideoKleinContent .content{max-height:60%; width:100%; background-size:cover; background-position:center center; background-repeat:no-repeat; transform:skew(0deg, 30deg) translateY(35px); color:#fff;  position:relative;}
.VideoWrapper .VideoKleinContent p,
.VideoWrapper .VideoKleinContent ul,
.VideoWrapper .VideoKleinContent li { color: #fff; margin-bottom:8px }
.VideoWrapper .VideoKleinContent li:last-of-type { margin-bottom:0px }
.VideoWrapper .VideoKleinContent ul li:nth-of-type(1n + 6) {display:none}

.VideoWrapper .Video{ width:calc(((100% - ( var(--gap) * 2)) / 3) + 90px); aspect-ratio:433/430;  transform:translateX(-50px); background-color:var(--donkerderblauw); position:relative; margin-bottom:17.7%;}
.VideoWrapper #AfbeeldingWrapper { width:100%; height:100%; display:block; position:absolute; left:0; top:0;}
.VideoWrapper #AfbeeldingWrapper a{display:block; height:100%; width:100%;}
.VideoWrapper #AfbeeldingWrapper .VideoImg { background-repeat:no-repeat; background-position:center; background-size: cover; display:flex; align-items: center; justify-content:center;  box-shadow: 0px 0px 0px 3px var(--paars) inset; transition:0.3s; height:100%; width:100%;}

.VideoWrapper #AfbeeldingWrapper.hasvideo:before{content:""; background-color:var(--donkerderblauw); opacity:0.3; width:100%; height:100%; position: absolute; top: 0; left: 0; right:0; bottom:0; margin: auto; transition:all 0.2s ease;}
.VideoWrapper #AfbeeldingWrapper.hasvideo:hover:before{opacity:0.1;}
.VideoWrapper #AfbeeldingWrapper.hasvideo:after{content: ""; display:block; position:absolute; left:50%; top:50%; width:100px; height:100px; transform: translate(-50%, -50%); background-color:var(--roze); transition:all 0.2s ease;
-webkit-mask-image: url("images/triangle_mask.svg"); mask-image: url("images/triangle_mask.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;}
.VideoWrapper #AfbeeldingWrapper.hasvideo:hover:after{transform:translate(-50%, -50%) scale(1.2);}

.block-editor-block-list__layout .VideoWrapper{pointer-events: none;} 



/* LB Home Hexagon */
.Hexagon{ display:flex; align-items:flex-end; margin-top:44%; margin-bottom:15%; transform: translateY(-175px); padding:0 50px;}
.Hexagon { display: flex; align-items:flex-end  }
.Hexagon > div { width: 50%; position:relative;}

.Hexagon .HexagonLinks{ background-color: var(--donkeroranje); color:#fff;  overflow:hidden;}
.Hexagon .HexagonLinks p,
.Hexagon .HexagonLinks ul,
.Hexagon .HexagonLinks li,
.Hexagon .HexagonLinks h2,
.Hexagon .HexagonLinks h3,
.Hexagon .HexagonLinks h4 { color: #fff;}
.Hexagon .HexagonLinks h2,
.Hexagon .HexagonLinks h3,
.Hexagon .HexagonLinks h4 { font-size:34px; line-height:36px;}
.Hexagon .HexagonLinks ul li:nth-of-type(1n + 6) {display:none}
.Hexagon .HexagonLinks {transform:skew(0deg, 30deg);     padding: 30px 35px; height:333px; box-sizing:border-box; }
.Hexagon .HexagonLinks .content {transform:skew(0deg, -30deg); -webkit-line-clamp: 5;     display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;     text-overflow: ellipsis; margin-top:20px;}
.Hexagon .HexagonLinks a:hover{text-decoration:none;}
.Hexagon .HexagonLinks a:after{content:""; display:block; width:18px; aspect-ratio:var(--triangleratio); background-color:#fff; position:absolute; bottom:50px; right:30px; transition:all 0.3s ease; transform:skew(0deg, -30deg);
-webkit-mask-image: url("images/triangle_mask.svg"); mask-image: url("images/triangle_mask.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;}
.Hexagon .HexagonLinks a:hover:after{transform:skew(0deg, -30deg) rotate(90deg);}

.Hexagon .HexagonRechts{ width:50%; position:relative;}
.Hexagon .HexagonRechts .ImageContainer{ background-color:var(--groen); transform:skew(0deg, -30deg);  padding: 30px 35px; height:333px; position:relative; box-sizing:border-box; overflow:hidden;}
.Hexagon .HexagonRechts .Image{position:absolute; top:-35%; left:0; width:100%; height:180%; background-size:cover; background-repeat:no-repeat; background-position:center center; transform:skew(0deg, 30deg); overflow:hidden;}
.Hexagon .HexagonRechts .Background{height:218px; width:100%;  position:absolute; top:-60%; left:0; transform:skew(0deg, 30deg);}
.Hexagon .HexagonRechts .Background:before{content:"";  width:100%;  height:188px; position:absolute; left:0; top:53%; transform:skew(0deg, -30deg);}
.Hexagon .HexagonRechts .Background,
.Hexagon .HexagonRechts .Background:before{background-color:var(--groen);}

.block-editor-block-list__layout .Hexagon{pointer-events: none;} 


/* media queries */
@media only screen and (max-width: 1024px) {
}

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

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