/*
cdj dev from 2.4.23
new ruimtes structure

*/


/**************8 NEW RUIMTES / GROUPS **********/
/*****  Version:      2.4.23 ******/


body:not(.devmode) .menu-item.dev-item{ display:none !important;}
body.devmode .menu-item.no-dev-item{ display:none !important;}

.page-groups{}
body.page-groups .site-main{ padding:0;}
body.page-groups #main{ padding-top:0; }
body.page-groups .breadcrumbs{ display:none; }
body.page-groups .site-main{ text-align:left;}

body.page-groups #main{/*height:200vh;*/}

body.page-groups .topright-links a.lightbox/*:not(.btn-extra)*/{ display:none;}


/** MAIN PAGE **/
#groups-main{ overflow:hidden;}

#events-bg{ /*position: sticky;top:0;*/pointer-events:none;}
#events-bg .rls-slider{width:100%;height:100%;}
/*#events-bg .rls-slide-con:not(.loaded){height:100%;}  prevents weird contained image at first (before load ) */
.rls-slide.subtype-vimeo.fill-cover .rls-slide-con:not(.loaded){height:100%;}
/*.rls-slide.subtype-vimeo .rls-slide-con:not(.loaded){height:100%;}*/

#events-nav{padding:50px;padding-bottom:150px;overflow:hidden;}
#events-nav > .inr{position: relative;height:100%;max-height: 90%;}
#events-nav > .inr .events-j{height:100%;width:auto;display:block;margin:0 auto;}
.nav-link-e{ position: absolute;text-decoration: none;}
#link-e-vergaderen{ top:0;right:75%;}
#link-e-yourevent{ top:50%;left:10%;transform:translate(0%, -50%);}
#link-e-borrelen{ bottom: 0;left: 64%;}

.events-nav-title{ font-size:3rem;line-height:1;text-decoration: none;text-shadow: 0.06em 0.06em 0.06em rgba(0, 0, 0, 0.5);white-space: nowrap;margin-bottom:0.5rem;
    font-family: bodoni-urw, serif;
    font-weight: 400;
    /*text-transform:uppercase;*/
}
    
.events-nav-subtext{white-space: nowrap;font-size: 1.2rem; line-height: 1.2;}
.events-nav-subtext p{margin:0;}

#reviews-open .events-nav-title { font-size:2rem;margin-bottom:0;}
#reviews-open .events-nav-subtext { font-size: 1rem;}

/** link met sub **/
.flx-con{display: flex;}
.flx-rows{display: flex;flex-direction:row;}
.flx-cols{display: flex;flex-direction:column;}

.flx-col{}
.flx-row{}
    
/* specific */
.nav-link-e.sub{ position: relative;}
.nav-link-e.flx-con{gap:1rem;}

.nav-link-e.flx-con .events-nav-title{}
.row-title-single{text-align: center;display: none;}
.row-title-double{}

.nav-link-e .row-columns{gap:1rem;}
.nav-link-e .row-columns .events-nav-subtext{ text-align: right;}

.nav-link-e .row-columns .col-right{transition: opacity 250ms ease-in-out;opacity:0;}
.nav-link-e:hover .row-columns .col-right{opacity:1;}
.nav-link-e .flx-cols.col-subs{ gap:0.5rem;}

.nav-link-e .brdr{background-color: white;height: 100%;width: 1px;margin-right:1rem;}
.nav-link-e.sub{ font-size:1.5rem;line-height:1;text-decoration: none;text-shadow: 0.06em 0.06em 0.06em rgba(0, 0, 0, 0.5);white-space: nowrap;
    font-family: bodoni-urw, serif;
    font-weight: 400;
    /*margin-bottom:0.5rem
    text-transform:uppercase;*/
}

.page-groups #contentwrapper.loading-content,
.page-groups #contentwrapper.loaded-content{ min-height:100vh;border-top:1px solid #fff;}

.page-groups #contentwrapper > .weppa-block-content {align-self: unset;}
.page-groups #contentwrapper #content{  position: relative;min-height:100%;display:flex;/*justify-content: center;align-items: center;*/ }


/** child pages **/
body.page-groups-sub #main{ background-color:var(--clr-brown);/*display: flex;justify-content: center;align-items: center;*/}
body.page-groups-sub #main .groups-wrap{ display: flex;justify-content: center;align-items: center;min-height: 100vh;}
body.page-groups #scrolltop-wrapper{display:none;}


.groups-wrap.groups-sub{ position: relative; display: flex;justify-content: center;align-items: center;}
.page-groups #contentwrapper #content .groups-wrap.groups-sub{ min-height:100%;}

.groups-sub{    
    --clr-btn:  #fff;
    --clr-btn-bg:var(--clr-brown);
    --clr-btn-brd: var(--clr-brown);
    
    --clr-btn-h:  var(--clr-brown);    
    --clr-btn-bg-h:  #fff;
    --clr-btn-brd-h: var(--clr-brown);
}

#groups-sub-inr{position:relative;width:60%;display:flex;flex-direction: column; padding:150px 0;z-index:1;}

/* left */

/* right */
.r-col.right h3{text-align: left;margin:0;}
.r-col.right h1{text-align: left;margin:0;line-height: 1;}
    /* title img */
h1.has-image{font-size:2rem;padding-bottom:0.5rem;}
h1 .title-img{display: block; max-width: none; height: 5rem;width: auto;color:var(--clr-brown);}

/* body */
.r-col.right .body{text-align: left;}
/* buttons */
.r-row.row-buttons{margin-left:var( --j-con-wdth);}
.r-row.row-buttons .button-con{display:flex;flex-flow:row wrap;justify-content: center; gap:2rem;padding: 20px;}            
.groups-sub .btn{
    color:var(--clr-btn);
    border-color:var(--clr-btn-brd) !important;
    background-color:var(--clr-btn-bg);
    font-size:1.2rem;
    margin: 0;
}
.groups-sub .btn:hover, #groups-sub-inr .btn:focus{
    color:var(--clr-btn-h);
    border-color:var(--clr-btn-brd-h) !important;
    background-color:var(--clr-btn-bg-h);   
}
    /* icon */
.groups-sub .btn.has-icon{display: flex;align-items: center;gap:0.5rem;}
.groups-sub .btn.has-icon span{ display: block;}
.groups-sub .btn.has-icon svg{ display:block;width:auto !important;height:1.4em !important;}


/* arrows */
body.page-groups{
    --arrow-size: 2rem;
}

.groups-arrow-link:not(.in-nav){
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    padding: 20px;
    padding-bottom:0;
    z-index: 1;
}
.groups-arrow-link .arrow-up{ /* arrow */
    border-width:4px;
}

    /* common arrows */
.groups-arrow-link .arrow-up,
#reviews-inr .slick-arrow > span,
#reviews-open i{
    width: var(--arrow-size);
    height: var(--arrow-size);
}
  
/** reviews **/
#reviews-con{ 
    position: fixed;width:100%;left:0;bottom:0;
    padding:5rem;
    background-color:#fff;
    min-height:50vh; 
    max-height:100%;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
    display: flex;flex-flow: column wrap;justify-content: center;
    opacity: 0;
    transform: translateY(100%);
    overflow: hidden;
    z-index: 5;
}
#reviews-con.loaded{ opacity: 1;}
body.page-reviews:not(.page-loaded) #reviews-con{ transform: translateY(0);}
body.reviews-open #reviews-con{ transform: translateY(0);}


#reviews-inr{width:100%;display: block;position: relative;}
#reviews-inr .review{padding:0 200px;}
#reviews-inr .review *{color:#000;text-align: center;}

#reviews-inr .slick-arrow{ opacity: 0.7;}
#reviews-inr .slick-arrow > span{ border-color:#000;}/* arrow */

#reviews-close{ position:absolute;left:50%;transform:translateX(-50%);bottom:1rem;cursor:pointer;}
#reviews-close span{ width:2rem;height:2rem;border-color:#000;}/* arrow */

#reviews-open{ position:absolute;left:50%;transform:translateX(-50%);bottom:2rem;cursor:pointer;display: flex;flex-direction: column;align-items: center;--arrow-size:1.5rem;}
#reviews-open i{ border-color:#fff;}/* arrow */

@media only screen and (max-width: 1440px) {
    #groups-sub-inr { width: 70%;}
    .j-con svg path { stroke-width: 2;}
    h1 .title-img { height: 4rem;}
}

@media only screen and (max-width: 1280px) {	
    
    /** sub **/
    #groups-sub-inr { width: 80%;}
    .j-con svg path { stroke-width: 2;}
    h1 .title-img { height: 3.5rem;}
    
    
    .groups-arrow-link .arrow-up { border-width: 3px;}
    
}




@media only screen and (max-width: 889px) {	
    #groups-sub-inr {
        --j-img-wdt: 8vw;
        --j-brd-wdt: 1px;
        --j-brd-pad: 10px;
        
        --panel-pad: 20px;
    }
    
    body.page-groups{--arrow-size: 1.5rem;}
    
    /* general */
    body.page-groups #header{position: absolute;z-index: 10;}
    .menu-item .menu-item-img {max-width: 170px;}
    
    /** main page **/
    #events-nav { padding: 6rem 3rem 9rem 3rem;}  
    .events-nav-title {font-size: 2rem;margin-bottom: 0.25rem;}
    #reviews-open .events-nav-title { font-size: 1.5rem;}
    
    #link-e-vergaderen {top: 0;right: 70%;}
    #link-e-yourevent {top: 50%;left: 50%;transform: translate(-50%, -50%);}
    .nav-link-e .row-columns .col-right{opacity:1;}
    #link-e-borrelen {bottom: 0;left: 45%;}
    #reviews-open { bottom: 1.5rem;} 
        /* jouw event gecentreerd */
/*    .nav-link-e .row-columns{ flex-direction: column;}
    .nav-link-e.flx-con .events-nav-title,
    .nav-link-e.flx-con .events-nav-subtext{text-align: center;}
    .nav-link-e.flx-con  .col-right > .row-title-double,
    .nav-link-e.flx-con  .col-right .col-brdr{ display: none;}
    .nav-link-e .flx-cols.col-subs{ flex-direction: row; gap:2rem;}*/
    
    /* reviews */
    #reviews-con{ padding: 30px 5px;}
    #reviews-inr .review{padding:0 45px;}
    #reviews-inr .slick-arrow > span{}/* arrow */
    
    #reviews-inr .slick-track{ display:flex;}
    #reviews-inr .slick-track .review{ height:auto;display:flex;flex-direction: column;justify-content: center;font-size: 0.85rem;}
    #reviews-close span {}/* arrow */
    
    
    /* single */
    #groups-sub-inr{ 
        padding:100px 0;
        width:85%;    
    }


        /* inr */
    .r-col.left {display: none;}
        /* title */
    h1 .title-img { height: 3rem;}
    .groups-sub .title-brd {margin: 0.75rem 0;}
        /* buttons */
    .r-row.row-buttons{margin-left: 0;}
    .r-row.row-buttons .button-con{ padding:10px 0;gap:0.5rem;}
    .r-row.row-buttons .button-con .btn{font-size:1rem;padding: 0.3em 0.75em;}
    
        /* arrow up */
    .groups-arrow-link .arrow-up{ border-width: 2px; }/* arrow */
    
}




/*.nav-link-e:not(.sub),*/
/*#reviews-open,*/
/*#events-nav,*/
/*#link-e-yourevent,*/
.blended{
    color: #fff;
    mix-blend-mode: exclusion; 
}


     
/*** SLIDER NAV new v2.5.9 ***/
#slider-nav-con{position: absolute;bottom: 0;z-index:2;width:100%;pointer-events: none;overflow:hidden;}
#slider-nav-con > .inr{gap:1rem;transform: translateY(100%);padding:20px;}
#slider-nav-con > .inr > .row{display: flex;justify-content: center;align-items: center;}
#slider-nav-con > .inr > .row > .col{}
#slider-nav-con > .inr > .row:first-child{gap: 1rem;}
#slider-nav-con > .inr > .row:first-child > .col.left{}
#slider-nav-con > .inr > .row:first-child > .col.middle{}
#slider-nav-con > .inr > .row:first-child > .col.middle svg{ display:block;width:4rem;height:auto;}
#slider-nav-con > .inr > .row:first-child > .col.middle svg path{ stroke-width: 5;}
#slider-nav-con > .inr > .row:first-child > .col.right{}
#slider-nav-con > .inr > .row:first-child button{ background:none;opacity:0.8;padding: 20px;}
#slider-nav-con > .inr > .row:first-child button:focus{ outline:none;}
#slider-nav-con > .inr > .row:first-child button.slick-arrow{ position: relative;top:auto;transform:none;}
#slider-nav-con > .inr > .row:first-child button > span{width: var(--arrow-size);height: var(--arrow-size);color:#FFF;border-width:3px;}

#slider-nav-con > .inr > .row:last-child{ gap:1rem;}
#slider-nav-con > .inr > .row:last-child > .col.left{flex:1;text-align: right;}
#slider-nav-con > .inr > .row:last-child > .col.middle{}
#slider-nav-con > .inr > .row:last-child > .col.middle .groups-arrow-link{display:block;padding: 10px 20px; }
#slider-nav-con > .inr > .row:last-child > .col.middle .groups-arrow-link .arrow-up{transform: translateY(50%) rotate(-45deg);border-width:3px;}
#slider-nav-con > .inr > .row:last-child > .col.right{flex:1;}

#slider-nav-con .btn{ display:inline-flex;}
#slider-nav-con .j-con-nav{cursor:pointer;}

#slider-nav-con > .inr > .row:first-child > .col,
#slider-nav-con > .inr > .row:last-child > .col.middle,
#slider-nav-con > .inr > .row:last-child .btn{
    pointer-events: auto;
}


/* show / hide button */
#hide-sub-inr{
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    pointer-events: all;
    text-decoration: none;
}


#hide-sub-inr > span{
    display: block;
  padding-left: 1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-align: center;
  font-size: 21px;
  line-height: 30px;
  color: var(--clr-brown);
  background-color: white;
  box-shadow: 0 1px 5px rgba(0,0,0,0.1);
  transition: all .2s;
}

#hide-sub-inr:hover{
    text-decoration: none;
    color: #000;
}

#hide-sub-inr:hover > span{
    background-color: var(--clr-brown);
    color: white;
    box-shadow: 0 1px 5px rgba(255,255,255,0.8);
}


/** START NEW (since v2.7.0)*/
    /** EVENTS MAIN (style-groups.css) **/
@media only screen and (min-width: 890px){
    #link-e-yourevent {top: 60%;left: auto; transform: translate(0%, -50%); right: 75%;}
}
#link-e-borrelen_boven {  top: 30%; transform: translateY(-50%); left: 80%; }
#link-e-borrelen { left: 80%;}
/** END NEW **/

/** show / hide **/
#groups-sub-inr{ transition: opacity 300ms ease-in-out;}
#slider-nav-con .inr{ transition: transform 400ms ease-in-out;}

body.show-impression #groups-sub-bg{ pointer-events:auto;}
body.show-impression #groups-sub-inr{opacity: 0;pointer-events:none;}
body.show-impression #slider-nav-con .inr{transform: translateY(0);}
body.show-impression .groups-arrow-link:not(.in-nav){ display:none;}
body:not(.show-impression) #groups-sub-inr{ animation-delay: 200ms;}

    /* media */
@media only screen and (min-width: 890px) {	
    .groups-sub .title-wrap .j-con-mob{display: none;}
}

@media only screen and (max-width: 889px) {	
    
    #slider-nav-con > .inr{ padding:25px;}
    #slider-nav-con .btn{ font-size: 1rem; padding: 0.3em 0.75em; }
}

@media only screen and (max-width: 449px) {	
    
    #hide-sub-inr > span {
        width: 20px;
        height: 20px;
        font-size: 16px;
        line-height: 20px;
    }
    
    #slider-nav-con > .inr{ padding:15px;}
    
    #slider-nav-con > .inr > .row:last-child > .col.left{ text-align: left;}
    #slider-nav-con > .inr > .row:last-child > .col.right{ text-align: right;}
    
    
    
}