/*
 Theme Name:   Custom Child Theme
 Theme URI: https://rocklobster.nl/
 Description:  Café de Jaren custom child theme of WppaBase theme. This theme requires the Advanced Custom Fields Pro plugin.
 Author:       Rock Lobster Syndicate
 Author URI: https://rocklobster.nl/
 Template:     wppabase
 Version:      2.7.2
 Text Domain: custom-child-theme
 License:     GPL-2.0+
 License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 Tags: e-commerce, portfolio
*/

/**** Basics ****/

/* Fonts */
body {
  letter-spacing: 0.01rem;
}
.site-main, h1, h2, h3, h4, h5, h6 {
  text-align: center;
}
h2 {
  font-size: clamp(26px,2vw,34px);
}

input[type="submit"]:focus, input[type="button"]:focus, button:focus, .button:focus, input[type="submit"]:hover, input[type="button"]:hover, button:hover, .button:hover {
  opacity: 1 !important;
}
::-webkit-input-placeholder {
  color: #aaa395;
  opacity: 1;
}
::-moz-placeholder {
  color: #aaa395;
  opacity: 1;
}
:-ms-input-placeholder {
  color: #aaa395;
  opacity: 1;
}
::-ms-input-placeholder {
  color: #aaa395;
  opacity: 1;
}
::-webkit-input-placeholder, input[type="date"] {
  color: #aaa395;
  opacity: 1;
}
::-moz-placeholder, input[type="date"] {
  color: #aaa395;
  opacity: 1;
}
:-ms-input-placeholder, input[type="date"] {
  color: #aaa395;
  opacity: 1;
}
::-ms-input-placeholder, input[type="date"] {
  color: #aaa395;
  opacity: 1;
}
::-webkit-input-placeholder {
  color: #aaa395;
  opacity: 1;
}
::-moz-placeholder {
  color: #aaa395;
  opacity: 1;
}
:-ms-input-placeholder {
  color: #aaa395;
  opacity: 1;
}
::-ms-input-placeholder {
  color: #aaa395;
  opacity: 1;
}
::placeholder, input[type="date"] {
  color: #aaa395;
  opacity: 1;
}

.site-main {
  padding-bottom: 60px;
}
body:not(.home) .site-main-content {
  padding-top: 20px;
}

/* Contactformulieren */
.wpcf7-form label {
  text-align: left;
}
.wpcf7-form p {
  margin-bottom: 0;
}
.wpcf7-form span[class*="menu"] {
  display: block;
  width: 100%;
}
.wpcf7-form select {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
}
.wpcf7-form select:not(:focus) {
  color: #ffffff;
}
.wpcf7-textarea {
  max-height: 4rem;
}
.wpcf7-form .privacy {
  display: block;
  padding: 16px 0;
}
span.wpcf7-validation-errors, span.wpcf7-not-valid-tip, div.wpcf7-validation-errors {
  background-color: #ffffff;
}

/* Navigation menu */
.nav-mobile-toggle .stripe {
  background-color: #ffffff !important;
  border-right: 1px solid rgba(0,0,0,0.8);
  border-bottom: 1px solid rgba(0,0,0,0.8);
}
.nav-mobile-toggle.close-x .stripe {
  background-color: #000000 !important;
}
.site-nav-mobile > div, .site-nav-mobile .menu {
  height: 100%;
}
.site-nav-mobile .menu {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.site-nav-mobile .menu li.menu-item {
  margin: 5px 0;
}
.site-nav-mobile .menu li.menu-item:first-of-type, .site-nav-mobile .menu li.menu-item:last-of-type {
  margin-top: auto;
}
.site-nav-mobile .menu li.menu-item a {
  font-size: 1rem;
}
.nav-desktop-toggle, .topright-links {
  display: none;
}
header.site-header .menu-item a {
  font-size: 0.9rem;
  font-weight: 100;
  color: #000000;
}
header.site-header .menu-item a:hover, header.site-header .current-menu-item a {
  color: #aaa395;
}
.menu-item .wpml-ls, .menu-item .wpml-ls-link {
  padding: 0;
  text-transform: uppercase;
}
.menu-item .wpml-ls a:not(.wpml-ls-link) {
  display: none;
}
.menu-footer {
  font-size: 10px;
}

.topright-links .wpml-ls-item a, .topleft-links .wpml-ls-item a, .topright-links .lightbox {
  transition: background-color 0.4s ease, color 0.4s ease;
  text-transform: uppercase;
  color: #ffffff;
  padding: 8px 10px 8px 10px;
  text-decoration: none;
}
.topright-links .wpml-ls-item a:hover, .topleft-links .wpml-ls-item a:hover, .topright-links .lightbox:not(.has-image):hover {
  background-color: #ffffff;
  color: #000000;
}
.topright-links .lightbox {
  margin-top: 15px;
}
#home-slider-overlay .lightbox {
  position: absolute;
  bottom: 165px;
  right: 30px;
  background-color: transparent;
  color: #fff;
  padding: 8px 10px 8px 10px;
  border: 1px solid #fff;
  font-weight: 700;
  text-decoration: none;
}

.lightbox_block .wppa-lb-content {
  background-color: #aaa395;
}

/**** Content ****/

/* Popup */
div#lightboxbg {
  background-color: rgba(0,0,0,.65);
}
div.wppa-lb-topbar, div.wppa-lb-caption {
  background: none;
}
a.wppa-lb-close-x {
  width: auto;
  height: auto;
  margin-right: 20px;
}
a.wppa-lb-close-x::after {
  font-size: clamp(30px,4vw,70px)
}

/* Home */
.home-notification {
  position: relative; /* for .j-link */
  max-width: 900px;
  margin: 80px auto;
  background-image: url(/wp-content/uploads/letter-j.png);
  background-size: auto 80%;
  background-position: center center;
  background-repeat: no-repeat;
  color: #000000;
  min-height: 50vh;
  max-height: 50vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.home-notification > *:last-child {
  padding-bottom: 40px;
}
.j-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  width: 100%;
  height: 100%;
}
.home-notification * {
  color: inherit;
}
.home-notification.got-txt {
  background-color: rgba(255,255,255,0.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#infobanner {
  position: absolute;
  z-index: 1;
  top: 75px;
  padding: 7px 20px 8px 20px;
  width: 100%;
  font-size: 18px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
#infobanner, #infobanner p {
  color: #ffffff;
  margin-bottom: 0;
  font-weight: 600;
}
section#home-slider .weppa-slide {
  min-height: 100vh;
}
section#home-slider-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  text-align: center;
}
section#home-slider-overlay img {
  height: 50vh;
  width: auto;
}
section#home-slider-overlay .arrow-link {
  position: absolute;
  top: auto;
  bottom: 100px;
  transform: translateX(-50%);
  padding: 20px 30px;
}
section#home-slider-overlay .arrow-down {
  border-color: #ffffff;
  border-width: 3px;
  width: 30px;
  height: 30px;
}
section#home-slider-overlay .button { /* reserveren */
  position: absolute;
  bottom: 112px;
  right: 30px;
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  font-weight: bold;
}

/* Reserveren knop rechtsboven */
a[href="#ft-toggle"] {
  margin-bottom: 15px;
  display: none !important;
}

/* Menukaarten & Ruimtes */
.weppa-faq-qa.site-padding {
  padding-top: 0;
}
.weppa-faq-qa .weppa-faq-q, .weppa-faq-qa .weppa-faq-a {
  padding: 8px 16px;
}
.weppa-faq-qa .weppa-faq-a {
  padding-top: 16px;
}
.faq-arrow .weppa-faq-qa .weppa-faq-q, .faq-plus .weppa-faq-qa .weppa-faq-q {
  padding-right: 40px;
}
.faq-arrow .weppa-faq-qa .weppa-faq-q::after, .faq-plus .weppa-faq-qa .weppa-faq-q::after {
  right: 18px;
}
.weppa-faq-q p {
  margin-bottom: 5px;
  text-align: center;
}
.faq_block table {
  width: 100%;
}
.faq_block th {
  padding: 30px 0 5px 0;
}
.faq_block td {
  padding: 14px 0 2px 0;
}
.faq_block th + th, .faq_block td + td {
  padding-left: 20px;
  text-align: right;
}
#menu td {
  border-bottom: 1px dotted rgba(255,255,255,0.2);
}
#menu td:first-of-type {
  text-align: left;
}
#menu .special {
  background-image: linear-gradient(to bottom, transparent 11px, rgba(255,255,255,0.2) 11px, rgba(255,255,255,0.2) 13px, transparent 13px);
  border-bottom: 2px solid rgba(255,255,255,0.2);
}
.specialmenu {
  padding: 20px 10px;
  margin: 40px 0;
  border: 5px double rgba(255,255,255,0.2);
}
.specialmenugang {
  margin: 30px 0 10px 0;
  padding-bottom: 8px;
  border-bottom: 1px dotted rgba(255,255,255,0.2);
}


/* Groepen */
#groepen table {
  width: 100% !important;
  max-width: 500px;
  margin: 30px auto 15px auto;
}
#groepen table th, #groepen table td {
  text-align: left;
  padding: 5px 8px;
  width: auto !important;
}
#groepen table th {
  border-bottom: 1px solid currentColor;
  padding-bottom: 12px;
}
#groepen table tr:nth-of-type(2) td {
  padding-top: 16px;
}

/* Contact */
#contact .weppa-block-content {
  padding-bottom: 0;
}
#contact a {
  text-decoration: none;
}
#openinghours .weppa-columns-wrapper {
  padding-top: 0;
}
#openinghours h3 {
  margin-top: 0;
}

/* Other pages */
.breadcrumbs-content, .breadcrumbs-content a {
  color: #ffffff;
}
.privacy-policy ul {
  text-align: left;
}

/* Footer */
.site-footer {
  border-top: 1px solid #ffffff;
  text-align: center;
}
.site-footer a {
  text-decoration: none;
}
a.scrolltop-link {
  background-color: transparent;
	bottom: 50px;
}
a.scrolltop-link .arrow-up {
  width: 30px;
  height: 30px;
  border-width: 3px;
}

/* Cookie notice */
#cookie-notice {
	z-index: 100000000;
}



/**** Media queries ****/

@media only screen and (max-width: 767px) {

  .home header.site-header.logo-center {
    position: absolute;
    z-index: 10;
  }
  header.site-header.logo-center {
    background-color: transparent;
  }
  .site-logo {
    -webkit-filter: brightness(10) drop-shadow(1px 1px 0 rgba(0,0,0,0.8));
            filter: brightness(10) drop-shadow(1px 1px 0 rgba(0,0,0,0.8));
    margin-top: 26px;
  }

  .faq_block th:first-of-type, .faq_block td:first-of-type, #groepen table th:first-of-type, #groepen table td:first-of-type {
    padding-left: 0;
  }
  .faq_block th:last-of-type, .faq_block td:last-of-type, #groepen table th:last-of-type, #groepen table td:last-of-type {
    padding-right: 0;
  }

  .ft-w-small .cookie-notice-container {
    padding-right: 175px;
  }

}

@media only screen and (min-width: 768px) {

  .wpcf7-form .datelabel {
    padding-top: 20px;
  }

  /* Navigation menu */
  .site-logo-nav-wrapper {
    display: flex;
    flex-flow: column;
    padding: 0 !important;
  }
  .site-logo-nav-wrapper, header.site-header.logo-center .nav-full > div, header.site-header.logo-center .nav-full .menu {
    height: 100%;
  }
  header.site-header.logo-center .nav-full .menu {
    flex-direction: column;
    justify-content: flex-start;
  }
  .nav-full {
    margin-right: auto;
  }
  header.site-header.logo-center {
    transition: transform 0.5s ease;
    position: fixed;
    width: auto;
    height: 100%;
    padding: 30px;
    align-items: flex-start;
    transform: translateX(-110%);
  }
  .opendesktopnav header.site-header.logo-center {
    transform: translateX(0);
  }
  .nav-desktop-toggle {
    display: block;
    position: fixed;
    z-index: 1000;
    top: 20px;
    margin-left: 20px;
    text-decoration: none;
    font-weight: 600 !important;
    font-size: 14px;
    cursor: pointer;
  }
  .nav-desktop-toggle > div {
    transition: opacity 0.4s ease, color 0.4s ease;
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    padding: 10px;
  }
  .nav-desktop-toggle.opened {
    color: inherit;
  }
  .nav-desktop-open {
    color: #ffffff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    font-size: 16px;
  }
  .nav-desktop-toggle.opened .nav-desktop-open, .nav-desktop-close {
    opacity: 0;
    font-size: 16px;
  }
  .nav-desktop-toggle.opened .nav-desktop-close {
    opacity: 1;
    color: #000000;
  }
  .nav-desktop-toggle .stripe-wrapper {
    display: inline-block;
  }
  .nav-desktop-toggle .stripe {
    display: block;
    width: 10px;
    height: 2px;
    margin-top: 3px;
    margin-right: 2px;
    background-color: currentColor;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
  }
  a.site-logolink {
    margin: 50px 0 30px 0;
  }
  header.site-header .menu-item a {
    margin: 0 0 10px 0;
  }
  .languageswitcher {
    margin: 40px 0 10px 0;
  }
  .menu-fb-icon {
    margin-left: -8px !important;
  }
  .menu-footer {
    margin-top: auto;
    line-height: 1.2;
  }
  .topright-links {
    display: block;
    min-width: 200px;
    position: fixed;
    z-index: 1000;
    top: 30px;
    left: auto;
    right: 0;
  }
  .topright-links a,
  .topleft-links a{
    display: block;
    font-weight: 600 !important;
    margin-right: 30px;
    text-align: center;
    font-size: 14px;
    color: #aaa395;
    border: 1px solid #ffffff !important;
  }
  .topright-links a:hover,
    .topleft-links a:hover,{
    color: #000000;
  }
  .topright-links .wpml-ls,
  .toprleft-links .wpml-ls{
    border: 0;
    padding: 0;
  }
  .topright-links .wpml-ls-item,
  .topleft-links .wpml-ls-item {
    display: block;
  }

  #infobanner {
    transition: margin 0.6s ease;
    margin-left: 0;
    background-color: #ffffff;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    font-size: inherit;
    text-shadow: none;
  }
  #infobanner, #infobanner p {
    color: #aaa395;
  }
  section#home-slider-overlay img {
    height: 60vh;
  }
  .home-notification {
    min-height: 60vh;
    max-height: 80vh;
  }
  section#home-slider-overlay .arrow-link {
    bottom: 0;
  }

  #groepen table {
    table-layout: fixed;
  }

  .site-footer, .site-footer h4 {
    text-align: left;
  }
  
  /* prevent flicker */
  .nav-full .menu-item-has-children:not(.no-dropdown) > .sub-menu{ overflow:hidden;}
	
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {

  #infobanner {
    max-width: 340px;
  }

}

@media only screen and (min-width: 1200px) {

  #home-slider-overlay, #homecontent, #contentwrapper, .site-footer-columns {
    transition: padding 0.6s ease;
    padding-left: 0;
  }
  .opendesktopnav #home-slider-overlay, .opendesktopnav #homecontent, .opendesktopnav #contentwrapper {
    padding-left: 280px;
  }
  .opendesktopnav #infobanner {
    margin-left: 140px;
  }
  .site-main-content {
    position: relative; /* for #home-slider-overlay */
  }

  .weppa-faq-qa .weppa-faq-q, .weppa-faq-qa .weppa-faq-a {
    padding-left: 30px;
    padding-right: 30px;
  }

  .site-footer-columns {
    max-width: 750px;
    margin: 0 auto;
    padding-left: 140px;
    padding-right: 140px;
  }
  .opendesktopnav .site-footer-columns {
    padding-left: 280px;
    padding-right: 0;
  }

}

@media only screen and (min-width: 1920px) { /* site max-width */

  header.site-header.logo-center {
    transform: translateX(-100vw);
  }
  .topright-links {
    right: 50%;
    margin-right: -960px;
  }

}
/* popup close button */
.weppa-block-content.wppa-lb-content{ position:relative;}
.wppa-lb-close-x.inside{position:absolute;right:0;top:0;margin:0;padding:10px;}
a.wppa-lb-close-x.inside::after{font-size: clamp(30px,2vw,70px);line-height:0.6;}
.wppa-lb-topbar > .wppa-lb-close-x{ display:none;}
/* loaded content */
#content .breadcrumbs {
  display: none;
}
#contentwrapper > .weppa-block-content {
  transition: min-height 0.4s ease;
  min-height: 0;
  background-image: url(images/loading-dots-white.png);
  background-repeat: no-repeat;
  background-size: 1px 0px;
  background-position: center center;
}
#contentwrapper.loading-content > .weppa-block-content {
  min-height: 400px;
  background-size: 48px 16px;
}

/***  NEW SINCE 2.4.21 ***/
.bbox{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
	/* clearfix ( clear floats ) */
.clrfx:before,.clrfx:after { content: "";display: table;}
.clrfx:after { clear: both;}

.page-ruimtes{}
body.page-ruimtes #main{ padding-top:0; }
body.page-ruimtes .breadcrumbs{ display:none; }
.page-ruimtes .site-main{ text-align:left;}

.group-banner{ position:relative;overflow:hidden; display: flex;flex-flow: column nowrap;justify-content: center; min-height:70vh; }
.group-banner > .wp-block-group__inner-container{  display: flex;  align-items: center;  justify-content: center;}
.group-banner > div > figure:first-child{ position:absolute; width:100%;height:100%;top:0;left:0;}
.group-banner > div > figure:first-child img,
.group-banner > div > figure:first-child video{ position:absolute; width:100%;height:100%;top:0;left:0;object-fit:cover;}
.group-banner-overlay{ margin:10% 2rem 10% 2rem !important;position:relative;background-color:#aaa395;}
.group-banner-overlay h1{ margin-top:0;}

.group-banner .wp-block-cb-carousel .slick-slide{ padding:0;}
.group-banner .wp-block-cb-carousel .slick-slide img{ position:relative;height:auto;}
.group-banner .wp-block-cb-carousel{ pointer-events:none;}

.group-banner .wp-block-cb-carousel .slick-list,
.group-banner .wp-block-cb-carousel .slick-track,
.group-banner .wp-block-cb-carousel .wp-block-image,
.group-banner .wp-block-cb-carousel .wp-block-image img{ height:100%; }


		/* group banner with J */
.group-banner > .wp-block-group__inner-container { width: 100%;height: 100%;  position: absolute;}
.banner-j{margin:0;background-color:transparent;margin:0 !important; padding:0 !important;width:100%;height:80%;}
.banner-j > .wp-block-group__inner-container { width: 100%;height: 100%;  position: absolute;}
.overlay-j{
  position: relative;
  width: 100%;height: 100%;
  background-image: url(/wp-content/uploads/letter-j.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  color: #000000;
}


/** ruimte intro **/
.ruimtes-intro{ margin:2% auto 2% auto !important; }
.ruimtes-intro .wp-block-group__inner-container{ position:relative;}

/** ruimte blocks **/
.section-ruimtes{display:flex;flex-flow:column nowrap;align-items:center;}

.ruimte-block{position: relative;width:100%;max-width: 1300px;margin: 0 2rem 3rem 2rem;/*background-color:#960;*/box-shadow: 0px  0px 0.5rem 0px rgba(255,255,255,0.3);border:1px solid #fff;}
.ruimte-block:first-child{margin-top:3rem;}
.ruimte-block > .inr{position: relative;overflow: hidden;display: flex;min-height:60vh;}

.ruimte-block.ruimte-reviews > .inr{min-height:100vh;}
.ruimte-block.ruimte-reviews .ruimte-column.right .inr-col{ /*display: flex;  flex-direction: column; justify-content: center;*/}


.ruimte-column{position:relative;width:50%;}
.ruimte-column.left{}
.ruimte-column.right{padding:2rem;}
.ruimte-column .inr-col{overflow:hidden;position:relative;height:100%;width:100%;}
.links.links-menu{}
.links.links-other{}

    /* reviews onder elkaar */
.ruimte-block.ruimte-reviews > .inr{flex-flow: column nowrap;min-height:0;}
.ruimte-block.ruimte-reviews .ruimte-column{width:100%;}
.ruimte-block.ruimte-reviews .ruimte-column.right .inr-col{min-height: 0;margin-bottom: 3rem;}
.ruimte-block.ruimte-reviews .ruimte-column .inr-col{min-height: 50vh;}

.ruimte-block .title{}

.gallery-wrapper{ background-color:#999;overflow:hidden;position:absolute;height:100%;width:100%;}
.gallery-wrapper img{position:relative;width:100%;height:100%;object-fit:cover;}

.gallery-wrapper .slick-track,
.gallery-wrapper .slick-list{ height:100%;}
.gallery-wrapper .slick-dots{ bottom:0;}
.gallery-wrapper .slick-dots li{}
.gallery-wrapper .slick-dots li button::before { color:#fff;font-size:10px;}
.gallery-wrapper .slick-dots li,
.gallery-wrapper .slick-dots li button::before { width:20px;height:30px;line-height:30px;}

.gallery-wrapper .slick-dots{   background-color: rgba(0,0,0,0.2);transition:background 200ms ease;}
.gallery-wrapper:hover .slick-dots{   background-color: rgba(0,0,0,0.75);}

/* admin dev */
/*body.user-is-admin*/ .gallery-wrapper{ background-color: rgba(0,0,0,0.1); }
/*body.user-is-admin */.gallery-wrapper img{ object-fit:contain;}


ul.attributes{list-style-type: square; padding-left: 14px; }

/* anchors */
.ruimte-block .anchor{position:absolute;top:-50px;}
.anchor.sc{ position:absolute;top:-50px;}

/* btn */
.btn, .wp-element-button{
	text-transform: uppercase;
	display: inline-block;
	color: inherit;
	background-color:  #aaa395;
	padding: 0.2em 0.5em;
	margin: 0.5rem 0 0.5rem 0;
	cursor:pointer;
	font-weight:normal;
	text-decoration:none;
	transition:background 0.4s ease, color 0.4s ease, border 0.4s ease;
	border:1px solid white;
	font-weight:bold;
    border-radius: 0;
    font-size:1rem;
}
.btn, .wp-element-button{/* new MICE style */
    border-radius: 2em;
    text-transform: lowercase;
    padding: 0.5em 1em;
}
.btn.nolink{ cursor:default;}

.btn-m{  }
.btn-m:hover,
.btn-m:focus{ color:inherit;/*background-color:#fff;color:#000;*/}

.ruimte-column .links.clrfx .btn{float: left;clear: left;}
.slick-img{ cursor:pointer;}

.page-groups .btn,
.page-groups .wp-element-button{/* new MICE style */
    text-transform: unset;
}


/* btns yellow *
e #8f1900
o #cb7632
y #e79b2d
*/
.btn{background-color:#f1c286;border:1px solid #f1c286;color:#666;}
.btn-m:hover,
.btn-m:focus{ color:inherit;/*background-color:#eb9a48#aaa395;border-color:#fff;*/}

/* new buttons */
.btn, .wp-element-button{ background-color: #fff;border: 1px solid #ffffff !important;color: #aaa395; }
.btn-m:hover, .wp-element-button:hover,
.btn-m:focus, .wp-element-button:focus{ color:#000;/*background-color:#eb9a48#aaa395;border-color:#fff;*/}
/* inline */
.ruimte-column .links:not(.clrfx){ display:flex;gap:1rem;margin-top:2rem;flex-wrap: wrap;justify-content: center;}
.ruimte-column .links:not(.clrfx) .btn{margin:0;}


/* images left right */
.section-ruimtes .ruimte-block:nth-child(even) .ruimte-column.right{ order:-1;}


@media only screen and (max-width: 889px) {	
	.section-ruimtes .ruimte-block:nth-child(even) .ruimte-column.right{ order:1;}
	
	.ruimte-block > .inr { flex-flow:column nowrap;min-height:0;}
	
	.ruimte-block .ruimte-column{ width:100%;}
	
	.ruimte-column .inr-col {min-height: 50vw;}
	.ruimte-column .inr-col .title{margin-top:0rem;}
}


/*** MENU ***/
.menu-ruimtes-main > ul{ position:relative !important;/*display:block !important;*/margin-left:1rem;}
.menu-ruimtes-main > ul ul{ position:relative !important;display:block !important;margin-left:0.5rem;}
.menu-ruimtes-main > ul .sub-menu-down{ display:none;}
.menu-ruimtes-main ul{ border:none !important;}
.menu-ruimtes-main ul a{ margin-bottom:5px;text-transform:uppercase;cursor:pointer !important;}
.menu-ruimtes-main ul a:not(:hover){ color:#000 !important;}

.topright-links .wpml-ls-item a,
.topleft-links .wpml-ls-item a{ display: block;
font-weight: 600 !important;
margin-right: 30px;
text-align: center;
font-size: 14px;
color: #aaa395;
border: 1px solid #ffffff !important;
background-color:#fff;
}

/* new (since v2.7.0)*/
    /** top BUTTONS **/
.nav-desktop-toggle .nav-desktop-lang.topleft-links{top: calc(1rem + 30px);}
.topleft-links .wpml-ls-legacy-list-horizontal{ padding:0;}
.topleft-links .wpml-ls-item a{ margin-right:0;padding: 8px 1.3rem 8px 1.3rem;}
body.opendesktopnav .nav-desktop-toggle .nav-desktop-lang.topleft-links{opacity:0;pointer-events: none;}

.topright-links .lightbox:first-child{margin-top:0;}
.topright-links .lightbox.has-image{position: relative; border:none !important;line-height: 1;display: flex;align-items: center;gap:0.5rem;}
.topright-links .lightbox.has-image img{max-width:150px;}
.topright-links .lightbox.has-image:hover{/*background-color:var(--clr-brown);*/}
.topright-links .lightbox.has-image .arrow-right{width:1rem;height:1rem;}

.topright-links .text-fade {
    position: absolute;
    top: 100%;
    white-space: nowrap;
    text-align: right;
    right: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    opacity:0;
    padding:0.5rem auto;
}
.topright-links .lightbox:hover .text-fade{ opacity:1;}

    /** EVENTS MAIN (style-groups.css) **/

    /** MENU / SUBMENU **/
/*body:not(.rls-devmode) .menu-item.item-groups .sub-menu{ display:none;}*/
.menu-item.item-groups .arrow-down{ display:none;}

.menu-item.item-groups.is-clickable > a{ cursor:pointer;}
.menu-item.item-groups .sub-menu{ padding-left:5px;transform:translateX(-5px);}
    /* nav social */
header.site-header .menu-item .nav-social-link{ font-size: 2rem !important;line-height: 1;color: #aaa395; }
header.site-header .menu-item .nav-social-link:hover{ color: #000; }
header.site-header .menu-item .nav-social-link i{ } 
header.site-header .menu-item .nav-social-link i:before{margin:0;} 

    /** MEDIA **/
@media only screen and (max-width: 767px){
    
}

/*** ENDE NEW **/

.hide-element{ display: none;}
.anchor-only.ruimtes-intro{ margin:0 !important;padding:0;}
.section-ruimtes.type-evenement .ruimte-block:first-child{ margin-top:0 !important;}

#sb_instagram .sbi_photo img {
/*  position: absolute;*/
  height: auto;
}
div#sb_instagram div#sbi_images {
  /*display: block !important;*/
}

.page-allergies .default-content.content-max-width{
    max-width:1440px;
}
/** user restricted visibility classes **/
body:not(.user-is-rls) .rls-only,
body:not(.user-is-admin) .admin-only,
body:not(.rls-devmode) .devmode-only{ display:none;}
body.user-is-rls .hide-for-rls,
body.user-is-admin .hide-for-admin,
body.rls-devmode .hide-for-devmode{ display:none;}

/* image as menu item */
.menu-item.item-groups{ margin-top:2rem !important;}
.menu-item .menu-item-img{ max-width:200px;}

/** V2.6.1: VACATURES & GROUPS MERGER (from style-groups) **/

/* colors | vars */
:root{
    --clr-brown: #aaa395;
    --clr-brown_r: 170;
    --clr-brown_g: 163;
    --clr-brown_b: 149;
    --clr-white: #FFF;
    
    --panel-opc: 0.9;
    --panel-bgc: rgba(var(--clr-brown_r), var(--clr-brown_g), var(--clr-brown_b) , var(--panel-opc) );
    --panel-rad: 10px;
    --panel-pad: 40px;
    
    /* big j con */
    --j-img-wdt: 8vw;
    --j-brd-wdt: 2px;
    --j-brd-pad: 30px;
    --j-con-wdth: calc( var(--j-img-wdt) + (2 * var(--j-brd-pad)) + var(--j-brd-wdt));
}

    /* flex stuff */
.r-row.row-content{display: flex;}
    /* page wrap */
.page-wrap{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
    /* page background */
.page-bg.sticky-fixed{
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events:none;
    background-color:#fff;
}
.page-bg.sticky-fixed > .inr{
    position: sticky;
    width: 100%;
    height: 100%;
    top:0;
    max-height:100vh;
    background-attachment: scroll;
}
.page-bg.sticky-fixed > .inr > img{
    width:100%;
    height:100%;
    object-fit: cover;
}
    /* content */
.page-content{
    position: relative;
    width: 60%;
    display: flex;
    flex-direction: column;
    padding:150px 0;
    z-index: 1;
}
    /* page title */
.j-con{display:flex;position: sticky;top: 20px;}
.j-con img, .j-con svg{ width:var(--j-img-wdt);}
.j-con svg path{fill:none !important;stroke:#FFF !important;stroke-width:1.2;}
.j-con .j-brdr{position: relative;padding:0 var(--j-brd-pad);}
.j-con .j-brdr .inr{ width:var(--j-brd-wdt); height:100%;background:var(--clr-white);}

    /* text panels */
.text-panel{
    flex:1;
    background-color: var(--panel-bgc);
    padding: var(--panel-pad);
    border-radius: var(--panel-rad);
    position: relative;
}
    /* title wrap */
.text-panel .title-wrap{ display: block;/*margin-bottom:1rem;*/}
    /* title border */
.text-panel .title-brd{ height:1px;background:white;margin:1rem 0;}
.text-panel .title-wrap .title-brd{ margin-bottom:0;}
.text-panel .title-wrap + .title-brd{ /*margin-top:0;*/}
    /* title J */
.text-panel .title-wrap{display: flex;}
.text-panel .title-wrap .j-con-title{border-right: 1px solid white;padding-right: 0.7rem;margin-right: 0.7rem;}
.text-panel .title-wrap .j-con-title svg{display:block;width:auto;height:3rem;opacity: 0.7;}
.text-panel .title-wrap .j-con-title svg path{fill:#FFF !important;stroke:none !important;}
    /* no image */
.text-panel .title-wrap.no-image{ flex-direction: column;}



/** VACATURES **/
/* page */
body.page-vacatures .site-main,
body.page-vacatures #main { padding:0;}

    /* title | J*/
.wrap-vacatures{
    --j-img-wdt: 8vw;
    --j-brd-wdt: 2px;
    --j-brd-pad: 24px;
    --j-con-wdth: calc( var(--j-img-wdt) + (2 * var(--j-brd-pad)) + var(--j-brd-wdt));
    
    /* sizings */
    --vac-page-pad-lr: 6vw;/* used for calculating, not for setting actual padding (so we can use 100% ipv 100vw - scrollbar )*/
    --vac-page-pad-tb: 6rem;
    
    --vac-ptitle-maxwdth: 500px;
    
    --vac-col-count: 3;
    --vac-col-gap: 3vw;
    --vac-col-gap-sum: calc( (var(--vac-col-count) - 1) * var(--vac-col-gap));
    
    --vac-wrp-wdt: calc( 100% -  (2 * var(--vac-page-pad-lr) ) );
    --vac-col-wdt: calc(  ( var(--vac-wrp-wdt) - var(--vac-col-gap-sum) ) * (1/var(--vac-col-count) ) );  
    --vac-col-maxwdth: 700px;
}

/* page content */
.wrap-vacatures .page-content{
    width:100%;
    padding:var(--vac-page-pad-tb) 0px var(--vac-page-pad-tb) 0px;
}
    /* page title */
.wrap-vacatures .page-title-wrap{width: var(--vac-wrp-wdt);max-width: var(--vac-ptitle-maxwdth);margin:0 auto var(--vac-page-pad-tb) auto;justify-content: center;}/* bottom same as page-content */


.wrap-vacatures .page-title-wrap .col-j{display: flex;}
.wrap-vacatures .page-title-wrap .col-j .j-con{position: relative;top:auto;margin-right: var(--j-brd-pad);}
.wrap-vacatures .page-title-wrap .col-j .j-con svg,
.wrap-vacatures .page-title-wrap .col-j .j-con img{height:auto;width:2rem;display: block;}
.wrap-vacatures .page-title-wrap .col-j .j-con svg path{ stroke-width:0.25em;}
.wrap-vacatures .page-title-wrap .col-j .j-con .j-brdr { padding-left: var(--j-brd-pad);padding-right:0;}

.wrap-vacatures .page-title-wrap .col-title{ width:80%;}
.wrap-vacatures .page-title-wrap .page-title{margin:0;}
.wrap-vacatures .page-title-wrap .page-title img{display:flex;}

.wrap-vacatures .vacatures-wrap{display:flex;justify-content: center;align-items: flex-start;gap:var(--vac-col-gap);width: var(--vac-wrp-wdt);margin:0 auto;flex-wrap: wrap;}

/* panels (vacatures )*/
.vacature-panel{
    max-width: var(--vac-col-maxwdth); /* same as page title */
    flex-basis: var( --vac-col-wdt);
}
    /* bg and padding */
.vacature-panel.has-pushpins{
    background-image: url('images/pushpin_voor_100.svg'), url('images/pushpin_voor_100.svg') ;
    background-repeat: no-repeat;
    background-position:1.5rem 1rem, calc(100% - 1.5rem) 1rem ;
    background-size:3rem, 3rem;
    
    padding:3rem 2rem 2rem 2rem;
}
    /* panel elements */
        /* titles */
.vacature-panel .title-wrap{justify-content: center;align-items: center;flex-direction: column;padding: 0 3rem;}
.vacature-panel .title-wrap .title{ margin:0;/*line-height: 1;*/font-size: clamp(28px,4vw,34px);}
.vacature-panel .title-wrap .subtitle{ margin: 0.5rem 0 0.5rem 0;}
        /* links */
.vacature-panel .panel-links{display: flex;flex-direction: column;}
.panel-links a.vac-link{ display:block;line-height: 2;}
.panel-links a.vac-link{ display:block;line-height: 2;}
.panel-links a.vac-link svg{ display:inline-block;margin-right:0.5em;}




@media only screen and (max-width: 1440px) {
    
    .wrap-vacatures{
        --vac-col-count: 2;
        --vac-col-gap: 4vw;
    }

}

@media only screen and (max-width: 1280px) {	

}

@media only screen and (min-width: 890px) {	
    .wrap-vacatures[data-count="1"]{ --vac-col-count: 1;}
    .wrap-vacatures[data-count="2"]{ --vac-col-count: 2;}
}
    
@media only screen and (max-width: 889px) {	
    :root {
        --panel-pad: 20px;

    }
    
    .wrap-vacatures{
        --vac-page-pad-lr: 30px;
        --vac-page-pad-tb: 6rem;
        --vac-col-count: 1;
        --vac-col-gap: var(--vac-page-pad-tb);        
        --j-brd-wdt: 1px;
        --j-brd-pad: 15px;
    }
    
    .page-vacatures .page-title-wrap {
        width: var(--vac-wrp-wdt);
        /*max-width: 75vw;*/
    }
    .wrap-vacatures .page-title-wrap .col-j .j-con svg{width:1.5rem;;}
    .page-vacatures .page-title-wrap .col-j .j-con svg path { stroke-width: 0.5em;}
    
    .vacature-panel.has-pushpins{ background-size:2rem, 2rem;}
    .vacature-panel .title-wrap{padding: 0 2rem;}
    
}


@media only screen and (max-width: 449px) {	

}

/* popup */
.lightbox_block .wppa-lb-content{ border-radius: var(--panel-rad); }
/* button shortcode */
.btn.has-icon {display: inline-flex; align-items: center; gap:0.5rem;}
.btn.has-icon svg {  display: block;  width: auto !important;  height: 1.4em !important;}





/** FLUENT FORMS **/
/** CSS: PARENT **/

    /* editor (preview) - also select 'inherit theme style' */
    .ff_form_preview_wrapper { background: var(--ff-clr-bg-preview) !important;}

    #top, #ff_preview_top { /* use top to overwrite root */
        --fluentform-primary:#000;                /* border-color:focus , btn background, tooltip fill */
        --fluentform-secondary:#000;              /* text color (also focus) , help message */
        --fluentform-danger:#f56c6c;              /* asterix, toolttip, error label + border + text.danger  */
        --fluentform-border-color:#000;           /* input border:not(:focus) */
        --fluentform-border-radius:0px;           /* input border, btn radius */
        --fluentform-input-select-height:auto;    /* dropdown height */
        /* customs: */
        --ff-clr-bg-preview: #e4e1d2;
        --ff-clr-bg: transparent;                 /* input bg */
        --ff-clr-bg-f: transparent;               /* input bg:focus */
        --ff-clr-ph: var(--fluentform-secondary); /* palceholder color */
        --ff-clr-ph-a: 0.7;                         /* palceholder alpha */
        --ff-fnt-fam: inherit;
        --ff-fnt-fam-btn: inherit;
        /* colors: label, text, text hover, placeholder */
        --ff-mrg-grp-b: 1rem;                    /* spacing between input groups */
    }
    /* ff-default, ff-inherit-theme-style */

    /* from default */
        /* inputs */
    div.fluentform .ff-el-form-control {
        border:1px solid var(--fluentform-border-color);
        border-radius:var(--fluentform-border-radius);
        color:var(--fluentform-secondary);
        background-color:var(--ff-clr-bg);
        font-family: var(--ff-fnt-fam);
        margin-bottom: 0;
        margin-top:0;

        line-height: 1;
        padding:11px 15px;/*
        transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out*/
    }
    div.fluentform .ff-el-form-control:focus {
        background-color:var(--ff-clr-bg-f);
        border-color:var(--fluentform-primary);
        color:var(--fluentform-secondary);
        outline:none;
    }
        /* labels */
    div.fluentform .ff-el-input--label { margin-bottom: 0px; /* was 5px */}
        /* groups */
    div.fluentform .ff-el-group{margin-bottom: var(--ff-mrg-grp-b);}/* also var? */
        /* textarea */
    div.fluentform textarea {min-height: 90px;}
        /* terms checkbox */
    .fluentform .ff_t_c { font-size: 0.8em; line-height: 1.1;vertical-align: middle;}
    /*.fluentform .ff-el-group > .ff-el-tc label.ff_tc_label > span{ padding-top:0.2em !important;}*/
        /* submit button */
    .fluentform .ff-el-group.ff_submit_btn_wrapper{/* margin-bottom:0;*/}
    .fluentform .ff-el-group.ff_submit_btn_wrapper .ff-btn-submit.btn{margin-top:0;margin-bottom:0;}

    #main div.fluentform /* ff-default */ .ff-btn-submit{
        font-family:var(--ff-fnt-fam);
        /* font-weight:bold; line-height: 1.5; text-transform: uppercase;font-size:0.8rem;*/
        border-radius: var(--fluentform-border-radius);
        letter-spacing: var(--bdy-letterspacing, 'normal');
    }
        /* labels */
    div.fluentform .ff-el-group.ff-el-form-left .ff-el-input--label{padding-top:0;}/* label left */

        /* placeholders */
    div.fluentform /* ff-default */ .ff-el-form-control{ color: var(--fluentform-secondary)  }
    div.fluentform /* ff-default */ .ff-el-form-control:focus{ color: var(--fluentform-secondary) !important;}

    div.fluentform /* ff-default */ .ff-el-form-control::placeholder { color: var(--ff-clr-ph) !important; opacity: var(--ff-clr-ph-a); }
    div.fluentform /* ff-default */ .ff-el-form-control:focus::placeholder { color: var(--ff-clr-ph) !important;opacity: var(--ff-clr-ph-a); }

        /* errors / messages */
    div.fluentform .ff-el-is-error .ff-el-form-control{  border-color: var(--fluentform-danger); }

    div.ff-message-success { 
        border:1px solid #ced4da;
        box-shadow: 0 1px 5px rgba(0,0,0,.1);
        margin-top: 10px;
        padding:15px;
        position: relative;
    }

        /* custom classes */
    .ff-el-group.ff-con-hidden{display:none;}
    /* align-to-previous? margin(-1rem) */

    /* recaptcha text */
    div.fluentform .grecaptcha-text{ font-size: 0.8em;color:#666;}

/** CSS: CHILD **/

    #top, #ff_preview_top { /* use top to overwrite root */
        --fluentform-primary: #eeeeee;                /* border-color:focus , btn background, tooltip fill */
        --fluentform-danger:#f00; 
        --fluentform-border-color:#eeeeee;           /* input border:not(:focus) */
        /* customs: */
        --ff-clr-bg-preview: #aaa395;
        --ff-clr-bg: #FFF;                 /* input bg */
        --ff-clr-bg-f: #FFF;               /* input bg:focus */
        --ff-clr-ph: #aaa395;
        --ff-clr-ph-a: 1;
        --ff-mrg-grp-b: 2rem;    
    }

    div.fluentform{ max-width:500px;margin:0 auto;}
    .fluentform label{ color:#FFF;}
    div.fluentform .grecaptcha-text{ color:#fff;}

    .fluentform .ff_t_c { font-size: 1em;}
    .fluentform .ff-el-group > .ff-el-tc label.ff_tc_label > span{ padding-top:0.2em !important;}

    

