/* Custom CSS from the theme user */
/* <------ [keypad color variant] ------> */
.key-black .key {
  background-color: black !important;
}

/* <------ [subsite home] ------> */
.home-img img {
  border-radius: 8px !important;
}

.home-title {
   font-size: 28px !important;
   line-height: 110%;
   padding-top: 38px; 
}

.home-text {
   font-size: 16px !important;
   line-height: 150%;
}

.home-logo {
   padding-top: 14px;
   margin: auto;
}

.home-link {
     display: flex;
 justify-content: center;   /* horizontaal centreren */
 align-items: center;       /* verticaal centreren */
   height: 54px;
   width: 100%;
   background-color: var(--prode--color-primary);
   border-radius: 12px;
   font-size: 16px;
   font-weight: 600;
   line-height: 110%;
   color: var(--prode--color-button-text);
   margin-top: 38px;
}

.home-link a {
   text-decoration: none; /* no underline */
}

/* <------ [start] home new (geoptimaliseerd) ------> */

body.page-id-3106 {
   padding: 0 !important;
   background-color: #ffefe4;
   color: #1E1E1E;
   font-family: "Inter", sans-serif;
   font-weight: 400;
   font-size: 18px;
   line-height: 150%;
}

body.page-id-3106::before {
   content: '';
   position: fixed;
   inset: 0;
   pointer-events: none;
   border: none !important;
   display: block;
}

.page-id-3106 .blok1-titel {
 color: white;
 position: absolute;
 top: 134px;
 left: 124px;
 width: 600px;
}

.page-id-3106 h1,
.page-id-3106 h2,
.page-id-3106 h3 {
   font-family: "Platypi", serif;
   font-optical-sizing: auto;
   font-weight: 600;
   font-style: normal;
}

.page-id-3106 h1 { font-size: 74px; line-height: 105%; }
.page-id-3106 h2 { font-size: 44px; line-height: 110%; }
.page-id-3106 h3 { font-size: 28px; line-height: 140%; }

.page-id-3106 .wp-site-blocks {
   margin: 0 !important;
   padding: 0 !important;
   max-width: none !important;
}

.page-id-3106 .wp-block-group__inner-container {
   width: auto;
   max-width: none;
}

.page-id-3106 .home-header {
   max-height: 100vh !important;
}

.page-id-3106 .logo_golf {
   position: absolute;
   right: 0;
   bottom: 0;
   width: 30%;
}

.rij1,
.rij2 {
   padding-top: 120px;
}

.rij3 {
   margin-top: 180px;
   background: #1d1d21;
   color: white;
   width: 100%;
   overflow: visible;
}

.rij6, .rij7 {
   margin-top: 120px;
}

.rij7 {
   margin-bottom: 184px;
}

.rij0 .wp-block-group__inner-container {
    max-width: 100vw;
    padding: 0;
}

.home-header .wp-block-cover__inner-container {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
}

.rij1 .wp-block-group__inner-container,
.rij2 .wp-block-group__inner-container {
   max-width: 1000px;
   margin: 0 auto;
   width: 100%;
   padding: 0 1rem;
   box-sizing: border-box;
}

.rij3 .wp-block-group__inner-container,
.rij4 .wp-block-group__inner-container,
.rij5 .wp-block-group__inner-container,
.rij6 .wp-block-group__inner-container,
.rij7 .wp-block-group__inner-container {
   max-width: 1160px;
   margin: 0 auto;
   box-sizing: border-box;
}

.rij1 .wp-block-group__inner-container,
.rij2 .wp-block-group__inner-container {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   position: relative;
}

.rij2 .wp-block-group__inner-container {
   flex-direction: row-reverse;
   justify-content: flex-end;
}

.rij1 .text-wrapper,
.rij2 .text-wrapper {
   background: white;
   padding: 2rem;
   border-radius: 28px;
   flex: 2 1 500px;
   max-width: 700px;
   position: relative;
   z-index: 2;
}

.rij1 .text-wrapper h2,
.rij2 .text-wrapper h2 {
   margin-bottom: 10px;
}

.rij1 .text-wrapper p,
.rij2 .text-wrapper p {
   margin-top: 0;
}

.rij1 figure,
.rij2 figure {
   flex: 1 1 300px;
   max-width: 400px;
   margin: 0;
   position: relative;
   z-index: 1;
}

.rij1 figure img,
.rij2 figure img {
   max-width: 100%;
   height: auto;
   border-radius: 28px;
   display: block;
}

.rij1 figure { margin-left: -60px; }
.rij2 figure { margin-right: -60px; }

.rij1 figure,
.rij2 figure {
   position: relative;
}

.rij1 figure::after,
.rij2 figure::after {
   content: "";
   position: absolute;
   width: 60px;
   height: 60px;
   background-color: #ff6800;
   border-radius: 8px;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 32px 32px;
   z-index: 3;
}

.rij1 figure::after {
   top: 29px;
   right: 29px;
   background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29.5522 24.313V17.0698C29.5522 13.7596 28.2373 10.585 25.8966 8.24428C23.5559 5.9036 20.3813 4.58862 17.071 4.58862C13.7608 4.58862 10.5862 5.9036 8.2455 8.24428C5.90482 10.585 4.58984 13.7596 4.58984 17.0698V24.313' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.58984 18.8513H9.98712C10.5239 18.8513 11.0387 19.0646 11.4183 19.4441C11.7979 19.8237 12.0111 20.3385 12.0111 20.8753V26.8514C12.0111 27.5672 11.7268 28.2536 11.2207 28.7597C10.7146 29.2657 10.0282 29.5501 9.31246 29.5501H7.28848C6.57276 29.5501 5.88635 29.2657 5.38026 28.7597C4.87416 28.2536 4.58984 27.5672 4.58984 26.8514V18.8513ZM22.131 20.8753C22.131 20.3385 22.3442 19.8237 22.7238 19.4441C23.1034 19.0646 23.6182 18.8513 24.155 18.8513H29.5522V26.8514C29.5522 27.5672 29.2679 28.2536 28.7618 28.7597C28.2557 29.2657 27.5693 29.5501 26.8536 29.5501H24.8296C24.1139 29.5501 23.4275 29.2657 22.9214 28.7597C22.4153 28.2536 22.131 27.5672 22.131 26.8514V20.8753Z' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.rij2 figure::after {
   bottom: 29px;
   left: 29px;
   background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.2998 17.0705V8.46727C8.2998 5.80372 11.2413 4.18993 13.4866 5.62291L26.9798 14.2262C29.0591 15.5525 29.0591 18.5885 26.9798 19.9149L13.4866 28.5182C11.2413 29.9498 8.2998 28.3373 8.2998 25.6738V17.0705Z' stroke='white' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* === Rij 3 basis: zwarte achtergrond, twee kolommen === */
.rij3 {
 background: #1d1d21;
 color: white;
 width: 100%;
 overflow: visible;
}

/* Flexcontainer van rij3 */
.rij3 .wp-block-group__inner-container {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: stretch;
}

/* Linker kolom: afbeelding */
.rij3 .image-col {
 flex: 1 1 50%;
 position: relative;
 display: flex;
 align-items: flex-end;   /* uitlijnen naar onderen */
 justify-content: flex-end; /* uitlijnen naar rechts */
 margin: -150px -50px;
 overflow: visible;
}

.rij3 .image-col img {
 width: auto;
 max-width: 100%;
 height: auto;
 display: block;
 margin-right: 0; /* optioneel, afhankelijk van layout */
}

/* Rechter kolom: tekst met padding */
.rij3 .text-col {
 flex: 1 1 50%;
 padding: 100px 0px;
 box-sizing: border-box;
 display: flex;
 flex-direction: column;
 justify-content: center;
}

.rij3 .text-col h2 {
 margin-bottom: 59px;
}

/* === Rij 4  === */

.rij4 {
  padding: 60px 0;
}

.logo-wolk {
    display: none;
}
    
.et_kaart {
    display: block;
 }

/* Binnencontainer: flex-wrap voor logo's*/
.rij4 .logo-wolk .wp-block-group__inner-container {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 gap: 40px 60px;
 max-width: 1160px;
 margin: 0 auto;
} 

/* Elk logo in een <figure> */
.rij4 .logo-wolk figure {
 margin: 0;
 padding: 0;
 flex: 0 0 auto;
}

/* De logo-afbeeldingen */
.rij4 .logo-wolk figure img {
 height: auto;
 max-height: 75px;
 width: auto;
 max-width: 100%;
 object-fit: contain;
 display: block;
}

.rij4 .logo-wolk figure:nth-child(1) img {
 margin-left: 120px;
}

.rij4 .logo-wolk figure:nth-child(2) img {
 margin-right: 120px;
}

/* === Rij 5  === */

.rij5 {

}

.rij5 .wp-block-group__inner-container {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 max-width: 1160px;
 margin: 0 auto;
 border-radius: 16px;
 background-color: white;
 overflow: hidden; /* voorkomt dat afgeronde hoeken door inhoud worden overschreden */
} 

.rij5 .is-layout-flex{
  align-items: start;
}

/* De drie tekstvakken marges geven */
.rij5 .wp-block-group.is-vertical {
 margin: 36px;
}

/* === Rij 6  === */

.rij6 {
   background-color: #1d1d21;
   color: white;
   padding: 120px 60px;
}

.rij6 .wp-block-group__inner-container {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 max-width: 1160px;
} 

.rij6 figure {
 width: 221px;
 margin: 24px;
 margin-left: auto;
}

.rij6 .is-layout-grid {
   gap: 60px;
}

/* === Rij 7: container met witte achtergrond en padding === */
.rij7 .wp-block-group__inner-container {
 background-color: white;
 padding: 36px;
 border-radius: 16px;
 box-sizing: border-box;
 max-width: 1160px;
 margin: 0 auto;
}

/* Flexcontainer met twee kolommen */
.rij7 .wp-block-group.is-layout-flex {
 display: flex;
 flex-wrap: nowrap;
 justify-content: space-between;
 align-items: flex-start;
 width: 100%;
 gap: 0;
}

/* Beide kolommen */
.rij7 .wp-block-group.is-layout-flex > .wp-block-group.is-vertical {
 flex: 1 1 0;
 max-width: 50%;
 padding: 0 36px;
 box-sizing: border-box;
}

/* Verticale lijn bij tweede kolom */
.rij7 .wp-block-group.is-layout-flex > .wp-block-group.is-vertical:nth-child(2) {
 border-left: 1px solid #ddd;
 padding-left: 36px;
}

.rij7 h3 {
 font-size: 38px;
   line-height: 120%;
   margin-bottom: 24px;
}



/* <------ [end] home new ------> */


/* <------ [start] home new: responsive tablet & mobiel ------> */

/* Mobiel: tot 768px */
@media (max-width: 768px) {
 body.page-id-3106 {
   font-size: 16px;
   overflow-x: hidden;
 }
   
   .page-id-3106 h1 { font-size: 60px; line-height: 105%; }
   .page-id-3106 h2 { font-size: 34px; line-height: 110%; }
   .page-id-3106 h3 { font-size: 26px; line-height: 140%; }

 .logo-wolk {
         display: block;
 }
    
 .et_kaart {
     display: none;
    }
    
 
 .home-header.alignfull {
   margin-left: 0 !important;
   margin-right: 0 !important;
   padding-left: 0 !important;
   padding-right: 0 !important;
   width: 100vw;
   max-width: 100vw;
   box-sizing: border-box;
 }

 .page-id-3106 .blok1-titel {
   top: 60px;
   left: 20px;
   right: 20px;
   width: auto;
   font-size: 45px;
 }

 .page-id-3106 .logo_golf {
   width: 100%;
   max-width: 300px;
 }

 .rij1, .rij5 {
   padding: 60px 10px 0 10px;
   max-width: 100vw !important;
 }
   
 .rij6 {
   padding: 60px 20px;
   max-width: 100vw !important;
   margin-top: 60px;
 }
   
  .rij7 {
   padding: 60px 20px;
   max-width: 100vw !important;
   margin-top: 0px;
      margin-bottom: 50px;
 }
   
 .rij2  {
   padding: 30px 10px 0 10px;
   max-width: 100vw !important;
 }
   
 .rij3 {
    padding: 30px 10px 0 10px;
   max-width: 100vw !important;
      margin-top: 30px;
 } 
   
 .rij4 {
     padding: 60px 10px 0 10px;
      max-width: 100vw !important;
   }
  

 .rij1 .wp-block-group__inner-container{
   flex-direction: row;
   align-items: stretch;
 }
   
 .rij2 .wp-block-group__inner-container {
   flex-direction: row-reverse;
   align-items: stretch;
 }
   
   
   
 .rij1 .text-wrapper,
 .rij2 .text-wrapper {
   flex: 1 1 100% !important;
   max-width: 100% !important;
   width: 100%;
   box-sizing: border-box;
 }

    .rij1 figure,
 .rij2 figure {
     margin: auto !important;
     max-width: 50%;
     padding: 20px !important;
     flex: 1 1 100% !important;
     min-width: 200px;
     min-height: 200px;
 }

 .rij1 figure img,
 .rij2 figure img {

 }

   .rij1 figure::after {
       top: 10vw;
         right: -2vw;
       min-width: 50px;
 min-height: 50px;
   }
   
    .rij2 figure::after {
       bottom: 10vw;
         left: -2vw;
       min-width: 50px;
 min-height: 50px;
   }
   
   .rij3 .image-col {
       flex: 1 1 100%;
       margin: 0;
       margin: 20px 0 0 0;
   }
   
   .rij3 .text-col {
   padding: 10px 10px;
   }
   
   .rij3 .text-col h2 {
     margin: 20px 0 30px 0;
   }
   
   
 .rij4  .logo-wolk .wp-block-group__inner-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     gap: 20px;
 }
   
   .rij4 .logo-wolk figure img {
       max-height: 40px;
       width: auto;
       margin: 0 !important;
   }
   
   .rij5 .is-layout-flex {
       display: block;
   }
   
.rij6 .wp-container-core-group-is-layout-13 {
   display: grid !important;
   grid-template-columns: 1fr !important;
 }

 .rij6 .wp-container-core-group-is-layout-13 > * {
   order: 0;
 }

 /* Zet het logo bijvoorbeeld onderaan */
 .rij6 .wp-container-core-group-is-layout-13 .wp-block-image {
   order: 3;
 }
   
   .rij6 .is-layout-grid {
       gap: 20px;
   }
   
   .rij6 figure {
       margin: 0 !important;
   }
   
   .rij7 .wp-block-group.is-layout-flex {
       flex-wrap: wrap;
   }
   
   .rij7 .wp-block-group.is-layout-flex > .wp-block-group.is-vertical {
       max-width: 100%;
   }
   
   .rij7 .wp-block-group.is-layout-flex > .wp-block-group.is-vertical:nth-child(2) {
       padding-top: 30px;
       border-left: none;
   }
   
   .rij7 h3 {
       margin-bottom: 12px;
   }
}


/* Tablet: 769px - 1210px */
@media (min-width: 769px) and (max-width: 1210px) {
     body.page-id-3106 {
   font-size: 17px;
   }
   .page-id-3106 h1 { font-size: 65px; line-height: 105%; }
   .page-id-3106 h2 { font-size: 38px; line-height: 110%; }
   .page-id-3106 h3 { font-size: 26px; line-height: 140%; }
   
    .logo-wolk {
        display: none;
    }
    
    .et_kaart {
        display: block;
    }
    
  .rij1, .rij2, .rij3 {
     padding-left: 15px;
     padding-right: 15px;
  }
   
   .rij3 {
     padding-left: 20px;
     padding-right: 20px;
  } 
   
  .rij3 .text-col {
     padding:75px 0px;
   }
   
   .rij3 .image-col {
       margin-right: -150px !important;
       margin-top: -50px !important;
   }
   
  .rij4 .logo-wolk figure img {
   max-height: 60px;
  }
   
   
 .rij5 .wp-block-group__inner-container,
 .rij7 .wp-block-group__inner-container {
   margin-left: 20px !important;
   margin-right: 20px !important;
 }
   
   
   
   
}

/* <------ [end] home new: responsive tablet & mobiel ------> */

/*questions*/
.btn.btn-info.show-answer {
border-radius: 5px;
 background-color: #DEDEDD;
 border-color: #DEDEDD;
   padding: 0.4rem 1.2rem;
   font-size:0.9rem;
   font-family: "Nunito", sans-serif;
   color:black;
   margin-top: 0.5rem;
}

.quiz-question {
padding: 1.5rem;
background: #8E9B90;
border-radius: 5px;
   color: black;
   font-family: "Nunito", sans-serif;
}

.quiz-question p{
   font-weight:bold;
   font-family: "Alegreya", serif;
   font-size:1.2rem;
   margin-bottom:0.8rem;    
}

.quiz-question .btn.btn-primary {
border-radius:5px;
   background-color: #042A2B;
       border-color: #042A2B;
padding: 0.4rem 1.2rem;
       font-size:0.9rem;
font-family: "Nunito", sans-serif;
  margin-top: 0.5rem;
}

.quiz-question .try-again {
background-color: #042A2B;
   border-color:  #042A2B;
   border-radius:5px;
   padding: 0.4rem 1.2rem;
       font-size:0.9rem
}
.quiz-attempts {
font-size:0.8rem;}

/* new - do not add yett */

.flex-blocks .accordion-header hr {
 border: 0px solid var(--prode--color-primary);
}

.wp-site-blocks {
   padding: 1em !important;
}

.flex-blocks .accordion-body {
 margin: 10px 0px;
 border: 1px solid var(--prode--color-primary);
 border-radius: 10px;
 padding: .5em;
}

.flex-blocks .accordion-button {
 background: transparent !important;
 line-height: 1.5em;
 margin: 0 auto;
 position: relative;
 width: 100%;
 font-size: 22px;
 border-radius: 30px !important;
 padding: 0;
 &:before {
   content: " ";
   background-color: var(--prode--color-primary);

   /* Gebruik de SVG als een masker */
   -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 96c0-35.3-28.7-64-64-64L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320zM320 256c0 6.7-2.8 13-7.7 17.6l-112 104c-7 6.5-17.2 8.2-25.9 4.4s-14.4-12.5-14.4-22l0-208c0-9.5 5.7-18.2 14.4-22s18.9-2.1 25.9 4.4l112 104c4.9 4.5 7.7 10.9 7.7 17.6z"/></svg>') no-repeat center;
   -webkit-mask-size: cover;
   mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 96c0-35.3-28.7-64-64-64L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320zM320 256c0 6.7-2.8 13-7.7 17.6l-112 104c-7 6.5-17.2 8.2-25.9 4.4s-14.4-12.5-14.4-22l0-208c0-9.5 5.7-18.2 14.4-22s18.9-2.1 25.9 4.4l112 104c4.9 4.5 7.7 10.9 7.7 17.6z"/></svg>') no-repeat center;
   mask-size: cover;
 background-size: 30px 30px;
 background-position: center;
 background-repeat: no-repeat;
 height: 30px;
 width: 30px;
 margin-right: .5em;
 }
}

.flex-blocks > * {
    margin: 30px 0 !important;
}

.flex-blocks > *:first-child {
   margin-top: 0 !important;
}

.flex-blocks > *:last-child {
   margin-bottom: 0px !important;
}

.accordion-body > * {
  margin: 30px 0 !important;
}

.accordion-body > *:first-child {
   margin-top: 0 !important;
}

.accordion-body > *:last-child {
   margin-bottom: 0px !important;
}

.flex-blocks .button-block {
   margin: 15px !important;
}

.flex-blocks .audio-block .audio-controls {
   font-size: 46px;
}

#progress-container > div {
   border-radius: 5px;
   min-width: 5px;
}

#toggle-footer-menu, #backButton {
   background: var(--prode--color-primary) !important;
   opacity: .5 !important;
}

.flex-blocks .audio-block button { /* vooruit/achteruit-knop */
   background-color: #F1F1F1;
}

.flex-blocks .audio-block button i { /* play-knop */
   color: #000000;
}

.container-fluid .p-0 {
  padding: 0px 5px !important;
}

.container {
   padding: 0px 10px !important;
}