/*
Theme Name: VCPOZ Scholen
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 {
	--gap: 			40px;
	
	--oranje: 		#E18E6A;
	--rood:			#964C64;
	--geel:			#F5D699;
	--groen:		#B6C2B2;
	--paars:		#C693C2;
	--lichtgroen:	#A3CA68;
	--donker:		#534E4E;
	--licht:		rgba(245, 214, 153, 0.4);	
}

/* 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 .knop a,
#wrapper .knop a:active,
#wrapper .knop a: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{postion:relative; display:inline-block; margin-right:15px; font-size:14px; height:36px; line-height:36px; padding:0 24px; border-radius:18px; transition:all 0.3s ease; text-align:center; color:#fff; text-decoration:none; background-color:var(--rood); border:1px solid var(--rood); text-decoration:none;}
.knop a:hover,
a.knop:hover,
#wrapper .knop a: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 {color:var(--rood); background-color:#fff; text-decoration:none;}


/* flickity */
#wrapper .flickity-page-dots{padding-left:0;}
#wrapper .flickity-page-dots .dot{}
#wrapper .flickity-page-dots .dot.is-selected{ }


/* zoeken */
.search-toggle-open-container{}
.search-toggle-open-container .search-toggle-open{height;36px; line-height:36px; border-radius:18px; padding:0 20px; border:1px solid #e7eff3;}
.search-toggle-open-container .search-toggle-label{ margin-right:20px;}

#search-drawer .drawer-inner input.search-field{border-radius:33px; 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;
}


/* header */
.site-top-header-wrap{transform:translateY(20px); position:relative; z-index:200;}
.site-main-header-wrap{position:relative; z-index:100;}
.site-header-main-section-right{transform:translateY(-20px);}
.site-container .site-header-main-section-right .site-header-item{align-items:end;}
.site-header-inner-wrap{position:relative;}
.site-header-inner-wrap:before{content:""; display:block; position:absolute; max-width:1290px; width:95%; height:140%; top:0; left:calc(50% - 300px); background-image:url("images/scholen/ehsoostkapelle/header_bg.svg");}
.site-header-inner-wrap > div {position:relative; z-index:200;}


/* menu */
#primary-menu li.current-menu-item > a{font-weight:bold;}
#primary-menu ul.sub-menu {border-radius:10px; overflow:hidden; padding-top:10px; padding-bottom:10px;}

#secondary-menu li.knop{}
#secondary-menu li.knop a{color:#fff; padding:0 30px; height:36px; line-height:36px; border-radius:18px;}
#secondary-menu li.knop a:hover{color:var(--paars);}

#mobile-toggle{border-radius:50%;}


/* oude size classes */
.one-half, .one-third, .two-third, .one-fourth, .three-fourth, .fullpane { box-sizing:border-box; }

.fullpane	  { width:100%; }
.one-half     { width:calc((100% - var(--gap)) / 2); }
.one-third    { width:calc((100% - ( var(--gap) * 2)) / 3);} 
.two-third    { width:calc((((100% - ( var(--gap) * 2)) / 3) * 2 ) + var(--gap)); }
.one-fourth   { width:calc((100% - ( var(--gap) * 3)) / 4); } 
.three-fourth { width:calc((((100% - ( var(--gap) * 3)) / 4) * 3 ) + (var(--gap) * 2)); }


/* banner */
.banner{position:relative; margin-top:-180px;}
.banner .wp-block-lazyblock-banner{position:relative; z-index:100;}
.banner .wp-block-lazyblock-cta{position:absolute; z-index:200; left:0; top:220px;}
.banner-home{}


/* home panes */
.intro-home{position:relative; z-index:400;}
.intro-home .wp-block-lazyblock-cta{margin-top:-130px;}
.intro-home .telefoon > img{margin:0 50%;}

.kernwaarden-home{position:relative; z-index:200; margin-bottom:80px; background-color:transparent !important;}
.kernwaarden-home > .kt-row-column-wrap:before{content:""; height:calc(100% + 260px); aspect-ratio:2183 / 1306; background-image:url("images/scholen/ehsoostkapelle/nieuws_vorm.svg"); background-size:contain; background-repeat:no-repeat; background-position:center center; display:block; position:absolute; left:50%; top:-150px; transform: translateX(-50%); z-index:100;}
.kernwaarden-home > .kt-row-column-wrap:after{content:""; height:140%; aspect-ratio:2491 / 1491; background-image:url("images/scholen/ehsoostkapelle/nieuws_lijnen.svg"); background-size:contain; background-repeat:no-repeat; background-position:center center; display:block; position:absolute; left:50%; top:-50%; transform: translateX(-90%); opacity:0.2; z-index:200;}
.kernwaarden-home > .kt-row-column-wrap > div {position:relative; z-index:300;}
.kernwaarden-home h1,
.kernwaarden-home h2,
.kernwaarden-home h3,
.kernwaarden-home h4,
.kernwaarden-home h5,
.kernwaarden-home h6{color:#fff;}

.snelnaar-home{position:relative; z-index:300; color:#fff; margin-bottom:10%; background-color:transparent !important;}
.snelnaar-home > .kt-row-column-wrap:before{content:""; height:120%; aspect-ratio:916 / 558; background-image:url("images/scholen/ehsoostkapelle/agenda_vorm.svg"); background-size:contain; background-repeat:no-repeat; background-position:center center; display:block; position:absolute; top:-5%; left:-5%; z-index:100;}
.snelnaar-home > .kt-row-column-wrap:after{content:""; height:120%; aspect-ratio:759 / 463; background-image:url("images/scholen/ehsoostkapelle/agenda_lijnen.svg"); background-size:contain; background-repeat:no-repeat; background-position:center center; display:block; position:absolute; top:15%; right:-15%; z-index:200;}
.snelnaar-home > .kt-row-column-wrap > div {position:relative; z-index:300;}
.snelnaar-home > .kt-row-column-wrap h1,
.snelnaar-home > .kt-row-column-wrap h2,
.snelnaar-home > .kt-row-column-wrap h3,
.snelnaar-home > .kt-row-column-wrap h4,
.snelnaar-home > .kt-row-column-wrap h5,
.snelnaar-home > .kt-row-column-wrap h6{color:#fff;}



/* footer */
.site-footer-wrap{}
.site-footer-wrap .site-middle-footer-wrap{position:relative;}
.site-footer-wrap .site-middle-footer-wrap:before{content:""; display:block; position:absolute; z-index:100; width:180%; height:100%; top:0px; left:-40%; background-image:url("images/scholen/ehsoostkapelle/footer_bg.svg"); background-size:contain; background-repeat:no-repeat; z-index:100;}
.site-footer-wrap .site-middle-footer-wrap > div { position:relative; z-index:200;}
.site-footer-wrap .footer-widget1,
.site-footer-wrap .footer-widget2{max-width:430px;}
.site-footer-wrap .footer-widget3{transform:translateX(-90px);}
.site-footer-wrap .footer-widget4{position:absolute; margin-top:-220px;}

.site-footer-wrap .footer-widget4:before{content:"";position:absolute; left:-52%; top:-6px; width:175%; aspect-ratio: 735 / 442; transform:rotate(20deg); background-image:url("images/scholen/ehsoostkapelle/footer_lijnen.svg"); background-size:contain; background-repeat:no-repeat; background-position:center center; opacity:0.8;}



/* LB banner */
.BannerWrapper{position:relative; display:flex; justify-content:right;}   
.BannerWrapper .BannerImg{position:relative; display:block; width:90%;  aspect-ratio:822 / 410; background-color:transparent; background-size:cover; background-position:center center; background-repeat:no-repeat; z-index:10; margin-bottom:18%;
-webkit-mask-image: url("images/scholen/ehsoostkapelle/banner_vorm.svg"); mask-image: url("images/scholen/ehsoostkapelle/banner_vorm.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }   
.BannerWrapper .BannerLijnen{position:absolute; display:block; width:95%; aspect-ratio:856 / 429; background-image:url("images/scholen/ehsoostkapelle/banner_lijnen.svg"); top:28%; right:-5%; z-index:20;}   

.banner-home .BannerWrapper{justify-content:center;}  
.banner-home .BannerWrapper .BannerImg{margin-bottom:0; width:calc(100% - 200px); aspect-ratio:956 / 580;
-webkit-mask-image: url("images/scholen/ehsoostkapelle/banner_home_vorm.svg"); mask-image: url("images/scholen/ehsoostkapelle/banner_home_vorm.svg");}
.banner-home .BannerWrapper .BannerLijnen{display:none;}

  
  

/* LB CTA */
.CTAWrapper{position:relative;  width:300px; aspect-ratio:1/1; display:flex; align-items: center; justify-content: center; text-align:center; line-height:1.6;}
.CTAWrapper .CTABg{position:absolute; width:100%; height:100%; top:0; left:0;  background-color:var(--geel); z-index:10;
-webkit-mask-image: url("images/scholen/ehsoostkapelle/rond_vorm.svg"); mask-image: url("images/scholen/ehsoostkapelle/rond_vorm.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;	}
.CTAWrapper .CTAContent{position:relative; top:0; left:0; z-index:30; padding:50px; box-sizing:border-box; color:var(--donker);}
.CTAWrapper .CTAContent .CTATitel{font-size:24px; font-weight:600; }
.CTAWrapper .CTAContent .CTATekst{font-size:20px; font-weight:400; margin-top: 10px; margin-bottom:10px;}
.CTAWrapper .CTAContent .CTAKnop{margin-bottom:0;}

.CTAWrapper.kleur2 .CTABg{background-color:var(--rood); }
.CTAWrapper.kleur2 .CTAContent{color:#fff;}
.CTAWrapper.kleur2 .CTAContent .CTAKnop{background-color:#fff; color:var(--rood);}
.CTAWrapper.kleur2 .CTAContent .CTAKnop:hover{background-color:var(--geel); color:var(--donker);}

.intro-home .CTAWrapper .CTAExtra{display:block; width:415px; aspect-ratio:415/403; position:absolute; left:50px; bottom:50px; background-image:url("images/scholen/ehsoostkapelle/rond_lijnen.svg"); background-size:cover; background-repeat:no-repeat; background-position:center center; opacity:0.2; z-index:20;}



/* LB Documenten */
.DocsLijstWrapper{width:100%;}
.DocsLijstWrapper .DocsItem{width:100%; display:flex; justify-content: space-between; align-items: center; padding:10px 10px; box-sizing:border-box;}
.DocsLijstWrapper .DocsItem:nth-of-type(2n){background-color:var(--licht);}
.DocsLijstWrapper .DocsItem .DocTitel{}
.DocsLijstWrapper .DocsItem .DocsBtn{margin-right:0; margin:0; min-width:100px;}



/* LB Kernwaarden */
.KernwaardenWrapper{}
.KernwaardenItem{display:flex; align-items: center; justify-content: space-between; margin-bottom:30px;}
.KernwaardenItem .KernwaardenImgWrapper{background-color:#fff; width:240px; aspect-ratio:1/1; padding:5px;
-webkit-mask-image: url("images/scholen/ehsoostkapelle/rond_vorm.svg"); mask-image: url("images/scholen/ehsoostkapelle/rond_vorm.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;}
.KernwaardenItem .KernwaardenImgWrapper .KernwaardenImg{position:relative; display:block; width:100%; aspect-ratio:1 / 1; background-color:#fff; background-size:cover; background-position:center center; background-repeat:no-repeat;
-webkit-mask-image: url("images/scholen/ehsoostkapelle/rond_vorm.svg"); mask-image: url("images/scholen/ehsoostkapelle/rond_vorm.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;}
.KernwaardenItem .KernwaardenContent{width:calc(100% - 300px);}
.KernwaardenItem .KernwaardenContent .KernwaardenTitel{font-size:24px; font-weight:bold; color:var(--rood); margin-bottom:8px;}
.KernwaardenItem .KernwaardenContent .KernwaardenTekst{}

.kernwaarden-home .KernwaardenItem .KernwaardenContent a{color:var(--rood);}
.kernwaarden-home .KernwaardenItem .KernwaardenContent .KernwaardenTitel{color:#fff;}



/* LB Afbeelding */
.AfbeeldingWrapper{background-color:transparent; width:100%; max-width:300px; aspect-ratio:1/1; padding:0px;
-webkit-mask-image: url("images/scholen/ehsoostkapelle/rond_vorm.svg"); mask-image: url("images/scholen/ehsoostkapelle/rond_vorm.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;}   
.AfbeeldingWrapper .AfbeeldingImg{position:relative; display:block; width:100%; aspect-ratio:1 / 1; background-color:#fff; background-size:cover; background-position:center center; background-repeat:no-repeat;
-webkit-mask-image: url("images/scholen/ehsoostkapelle/rond_vorm.svg"); mask-image: url("images/scholen/ehsoostkapelle/rond_vorm.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;}   

.snelnaar-home .AfbeeldingWrapper{background-color:#fff; padding:5px; max-width:435px;}


/* LB Team */
.TeamMainWrapper{} 
.TeamItems{padding-bottom:30px; display:flex; flex-wrap:wrap; }
.TeamItems .TeamItem{width:calc((100% - var(--gap)) / 3); margin-bottom:30px; box-sizing:border-box;}
.TeamItems .TeamItem .TeamImg{width:80%; max-width:250px; aspect-ratio: 1/1; background-size:cover; background-repeat:no-repeat; background-position:center center; margin:auto; margin-bottom:10px; background-color:var(--rood);
-webkit-mask-image: url("images/ebenhaezer/rond_vorm.svg"); mask-image: url("images/scholen/ehsoostkapelle/rond_vorm.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;}
.TeamItems .TeamItem .TeamContent{text-align:center;}
.TeamItems .TeamItem .TeamNaam{font-weight:500; font-size:18px; color:var(--oranje);}
.TeamItems .TeamItem .TeamFunctie{}
.TeamItems .TeamItem .TeamTekst{font-style:italic;}



/* LB vacatures */
.vacature-lijst-wrapper{display:flex; flex-wrap:wrap; column-gap:var(--gap); margin-bottom:20px;} 
.vacature-lijst-item{position:relative; width:calc((100% - var(--gap)) / 2); background-color:var(--licht); margin-bottom:30px;
-webkit-mask-image: url("images/scholen/algemeen/blok_vierkant.svg"); mask-image: url("images/scholen/algemeen/blok_vierkant.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;} 
.vacature-lijst-item .vacature-lijst-img{width:100%; aspect-ratio:16/9; background-repeat:no-repeat; background-size:cover; background-position:center center;} 
.vacature-lijst-item .vacature-lijst-fte{ background-color:var(--oranje); color:#fff; border-radius:5px; padding:5px 10px; position:absolute; right:20px; top:30px;}
.vacature-lijst-item .vacature-lijst-content{ padding:30px 50px; text-align:center;} 
.vacature-lijst-item .vacature-lijst-title{color:var(--rood); font-size:24px; font-weight:700;} 
.vacature-lijst-item .vacature-lijst-cat{color:var(--oranje); font-size:20px; font-weight:700;}
.vacature-lijst-item .vacature-lijst-short{padding:20px 0 10px 0;} 
.vacature-lijst-item .vacature-lijst-btn {margin-top:20px;} 



/* media queries */
@media only screen and (max-width: 1500px) {

}

@media only screen and (max-width: 1290px) {

}

@media only screen and (max-width: 1024px) {
	
	.site-header-inner-wrap:before{display:none;}
	
	.site-container .site-header-main-section-right .site-header-item{align-items: center;}
	
	.banner{margin-top:0;}
	.banner .CTAWrapper{display:none;}
	.BannerWrapper .BannerImg{width:100%}
	
	.site-footer-wrap .site-middle-footer-wrap{background-color:var(--rood);}
	.site-footer-wrap .site-middle-footer-wrap:before{display:none;}
	.site-footer-wrap .footer-widget3{transform:none;}
	.site-footer-wrap .footer-widget4{position:relative; margin-top:0;}
	.site-footer-wrap .footer-widget4:before{display:none;}

}

@media only screen and (max-width: 767px) {
	.one-half, .one-third, .two-third, .one-fourth, .three-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth, .one-sixth, .five-sixth {float:none; margin-right:0; width:100%;}	
	
	.BannerWrapper .BannerImg{width:100%;}
	.BannerWrapper .BannerLijnen{width:105%;}
	.banner-home .BannerWrapper .BannerImg{width:100%}
	.banner-home .BannerWrapper .BannerLijnen{}
	
	.intro-home .CTAWrapper{position:relative; display:none;}
	.intro-home .wp-block-lazyblock-cta{margin-top:0;}
	
	.kernwaarden-home{background-color:var(--groen) !important}
	.kernwaarden-home > .kt-row-column-wrap:before{display:none;}
	.kernwaarden-home > .kt-row-column-wrap:after{height:100%; top:-10%;}
	
	.snelnaar-home{background-color:var(--paars) !important;}
	.snelnaar-home > .kt-row-column-wrap:before{display:none;}
	.snelnaar-home > .kt-row-column-wrap:after{display:none;}
	
	.KernwaardenItem .KernwaardenImgWrapper{width:150px;}
	.KernwaardenItem .KernwaardenContent{width:calc(100% - 180px);}
	
	.TeamItems .TeamItem{width:calc((100% - var(--gap)) / 2);}
	
	.vacature-lijst-item{width:100%;}
	
}

@media only screen and (max-width: 479px) {	
	.KernwaardenItem{flex-direction:column;}
	.KernwaardenItem .KernwaardenImgWrapper{width:150px; margin-bottom:10px;}
	.KernwaardenItem .KernwaardenContent{width:100%;}
	
	.TeamItems .TeamItem{width:100%;}
}
