/* =========================================================
   KERKDIENSTGEMIST PLAYER
   ========================================================= */

.kdgm-responsive-player {
    position: relative;
    width: 98%;
    padding-bottom: 415px;
    height: 400;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

.kdgm-responsive-player iframe {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 400;

    border: 2px solid black;
    border-radius: 20px;
    box-shadow: 10px 10px 10px 5px #6b6b6b;

    box-sizing: border-box;
}

.site-layout {
    display: flex;
    width: 100%;
    align-items: flex-start;
}

.main-content {
    width: 70%;
    margin-top: 15px;
    box-sizing: border-box;
    border: 2px solid black;
     border-radius: 10px;
   box-shadow: 10px 10px 10px 5px #6b6b6b;
    margin-right: 10px;
}

.site-sidebar {
    width: 30%;
    margin-top: 15px;
    box-sizing: border-box;
     border: 2px solid black;
     border-radius: 10px;
    box-shadow: 10px 10px 10px 5px #6b6b6b;
    min-height: 400px;
}



/* =========================================================
   JOOMLA 6 - RESPONSIVE NAVBAR / MENU
   Plaats dit in:
   /templates/jouwtemplate/css/custom.css
   ========================================================= */


/* =========================================================
   INSTELLINGEN - HIER KUN JE ALLES AANPASSEN
   ========================================================= */

:root {

    /* Navbar */
    --nav-bg: #111111;
    --nav-text: #ffffff;
    --nav-hover: #00ffc8;
    --nav-active: #00ffc8;
    box-shadow: 10px 10px 10px 5px #6b6b6b;

    /* Dropdown */
    --dropdown-bg: #1b1b1b;
    --dropdown-hover-bg: #292929;
    --dropdown-text: #ffffff;

    /* Navbar hoogte / ruimte */
    --nav-padding-top: 12px;
    --nav-padding-bottom: 12px;

    /* Menu afstand */
    --menu-gap: 10px;

    /* Hamburger */
    --burger-color: #00ffc8;
    --burger-width: 32px;
    --burger-height: 3px;
    --burger-gap: 6px;

    /* Hamburger afstand rechts */
    --burger-margin-right: 5px;

    /* Mobiel menu */
    --mobile-menu-bg: #111111;

    /* Breakpoint */
    --mobile-breakpoint: 900px;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.main-navbar {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--nav-bg);
    z-index: 9999;
    box-shadow: 10px 10px 10px 5px #6b6b6b;
    border-radius: 10px;
}


/* Container */

.nav-container {
    max-width: 1300px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-top: var(--nav-padding-top);
    padding-bottom: var(--nav-padding-bottom);
    padding-left: 25px;
    padding-right: 25px;

    position: relative;
}


/* =========================================================
   LOGO
   ========================================================= */

.main-navbar .logo {
    color: var(--nav-text);
    text-decoration: none;

    font-size: 22px;
    font-weight: bold;

    white-space: nowrap;

    transition: color 0.25s ease;
}

.main-navbar .logo:hover {
    color: var(--nav-hover);
}


/* =========================================================
   HOOFDMENU
   ========================================================= */

.main-navbar .main-menu {
    display: flex;
    align-items: center;

    list-style: none;
    margin: 0;
    padding: 0;

    gap: var(--menu-gap);
}


/* Menu items */

.main-navbar .main-menu > li {
    position: relative;
    list-style: none;
     align-items: left;
}


/* Links */

.main-navbar .main-menu > li > a {
    display: block;

    color: var(--nav-text);
    text-decoration: none;

    padding: 10px 15px;

    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.main-navbar .main-menu > li:hover > a {
    color: var(--nav-hover);
}


/* =========================================================
   ACTIVE / CURRENT MENU ITEM
   ========================================================= */

/* Joomla active/current */

.main-navbar .main-menu > li.active > a,
.main-navbar .main-menu > li.current > a,
.main-navbar .main-menu > li.current-menu-item > a {
    color: var(--nav-active);
}


/* Active underline */

.main-navbar .main-menu > li.active > a::after,
.main-navbar .main-menu > li.current > a::after,
.main-navbar .main-menu > li.current-menu-item > a::after {

    content: "";

    position: absolute;

    left: 15px;
    right: 15px;
    bottom: 0;

    height: 2px;

    background: var(--nav-active);
}


/* =========================================================
   DROPDOWN
   ========================================================= */

.main-navbar .dropdown {

    position: absolute;

    top: 100%;
    left: 0;

    min-width: 210px;

    margin: 0;
    padding: 8px 0;

    list-style: none;

    background: var(--dropdown-bg);

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}


/* Dropdown zichtbaar bij hover */

.main-navbar .has-dropdown:hover > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* Dropdown items */

.main-navbar .dropdown li {
    position: relative;
    list-style: none;
}


/* Dropdown links */

.main-navbar .dropdown li a {

    display: block;

    color: var(--dropdown-text);

    text-decoration: none;

    padding: 11px 18px;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}


/* Dropdown hover */

.main-navbar .dropdown li:hover > a {

    color: var(--nav-hover);

    background: var(--dropdown-hover-bg);
}


/* Dropdown active */

.main-navbar .dropdown li.active > a,
.main-navbar .dropdown li.current > a {

    color: var(--nav-active);
}


/* =========================================================
   EVENTUEEL TWEEDE NIVEAU DROPDOWN
   ========================================================= */

.main-navbar .dropdown .dropdown {

    top: 0;
    left: 100%;

    margin-left: 1px;

}


/* =========================================================
   HAMBURGER
   ========================================================= */

.main-navbar .hamburger {

    display: none;

    flex-direction: column;
    justify-content: center;

    gap: var(--burger-gap);

    width: calc(var(--burger-width) + 10px);
    height: calc(
        (var(--burger-height) * 3)
        + (var(--burger-gap) * 2)
        + 10px
    );

    padding: 5px;

    margin-right: var(--burger-margin-right);

    cursor: pointer;

    box-sizing: border-box;
}


/* Hamburger lijnen */

.main-navbar .hamburger span {

    display: block;

    width: var(--burger-width);
    height: var(--burger-height);

    background: var(--burger-color);

    border-radius: 3px;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease,
        background-color 0.3s ease;
}


/* =========================================================
   HAMBURGER -> X
   ========================================================= */

.main-navbar .hamburger.active span:nth-child(1) {

    transform:
        translateY(calc(
            (var(--burger-height) + var(--burger-gap))
        ))
        rotate(45deg);
}


.main-navbar .hamburger.active span:nth-child(2) {
    opacity: 0;
}


.main-navbar .hamburger.active span:nth-child(3) {

    transform:
        translateY(calc(
            -1 * (var(--burger-height) + var(--burger-gap))
        ))
        rotate(-45deg);
}


/* =========================================================
   MOBILE / PORTRAIT
   ========================================================= */

@media (max-width: 900px) {

    /* Hamburger zichtbaar */

    .main-navbar .hamburger {
        display: flex;
    }


    /* Desktop menu verbergen */

    .main-navbar .main-menu {

        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;

        background: var(--mobile-menu-bg);

        margin: 0;
        padding: 0;

        gap: 0;

        max-height: 0;

        overflow: hidden;

        opacity: 0;
        visibility: hidden;

        transition:
            max-height 0.4s ease,
            opacity 0.25s ease,
            visibility 0.25s ease;

        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    }


    /* Menu geopend */

    .main-navbar .main-menu.open {

        max-height: 80vh;

        opacity: 1;
        visibility: visible;

        overflow-y: auto;
    }


    /* Hoofdmenu items */

    .main-navbar .main-menu > li {

        width: 100%;

        border-bottom: 1px solid rgba(255,255,255,0.08);
    }


    /* Hoofdmenu links */

    .main-navbar .main-menu > li > a {

        padding: 14px 20px;

        text-align: left;
    }


    /* Active underline verwijderen op mobiel */

    .main-navbar .main-menu > li.active > a::after,
    .main-navbar .main-menu > li.current > a::after,
    .main-navbar .main-menu > li.current-menu-item > a::after {

        display: none;
    }


    /* =====================================================
       MOBILE DROPDOWN
       ===================================================== */

    .main-navbar .dropdown {

        position: static;

        width: 100%;

        min-width: 0;

        display: none;

        opacity: 1;
        visibility: visible;

        transform: none;

        box-shadow: none;

        padding: 0;

        background: rgba(255,255,255,0.04);

        transition: none;
    }


    /* Dropdown openen */

    .main-navbar .has-dropdown.open > .dropdown {

        display: block;
    }


    /* Dropdown links */

    .main-navbar .dropdown li a {

        padding: 12px 35px;

        white-space: normal;
    }


    /* Tweede niveau */

    .main-navbar .dropdown .dropdown {

        position: static;

        margin: 0;
    }

}


/* =========================================================
   KLEINERE TELEFOONS
   ========================================================= */

@media (max-width: 500px) {

    .nav-container {

        padding-left: 15px;
        padding-right: 15px;
    }


    .main-navbar .logo {

        font-size: 19px;
    }


    .main-navbar .hamburger {

        margin-right: 0;
    }

}


/* =========================================================
   ALLEEN PORTRAIT MODE
   ========================================================= */

/*
   Wil je dat de hamburger uitsluitend bij een telefoon
   in PORTRAIT verschijnt, dan kun je onderstaande regel
   gebruiken.

   De normale @media hierboven werkt ook in landscape.
*/

@media (max-width: 900px) and (orientation: portrait) {

    .main-navbar .hamburger {
        display: flex;
    }

}


/* =========================================================
   ACCESSIBILITY / KEYBOARD
   ========================================================= */

.main-navbar a:focus-visible,
.main-navbar .hamburger:focus-visible {

    outline: 2px solid var(--nav-hover);
    outline-offset: 3px;
}


/* =========================================================
   ANIMATIE UITZETTEN ALS GEBRUIKER DAT INSTELT
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .main-navbar *,
    .main-navbar *::before,
    .main-navbar *::after {

        transition: none !important;
        animation: none !important;
    }

}



.colomnaccordion1{
width: 80% !important;
  
}




#colacc{
  width: 100%;
}

#divblock2{
  background-color: #444444;
  width: fit-content;
  color: silver;
  border-radius: 10px;
  padding-top: 1px;
  padding-bottom: 15px;
  
  margin-top: 15px;
}

#textblock2{
 text-align: center; 
  width: fit-content; 
  margin-left:auto; 
  margin-right: auto;
  margin-top: 5px;
  padding-left: 15px;
  padding-right: 15px;
}


#blockdownload6{
  
  border: 0px solid black; 
  border-radius: 10px; 
  margin-bottom: 5px; 
  margin-left: px; 
  margin-top: 15px; 
  padding-left: 0px;
  /*background-color: #444444;*/
  width: fit-content;
}


.jpagebuilder-section jpb-section
{
    padding: 72px 0px 75px 0px;
}

.builder-addon-settings-panel .builder-card>:last-child {
    border-bottom-left-radius: calc(5px - 1px);
    border-bottom-right-radius: calc(5px - 1px);
    border: 1px solid #d3d7eb;
    border-top: none;
    resize: both;
    
}



#textdownload{
  width: auto;
  text-align:center;
  
}
.rowkerk{
  border:2px solid black;
  border-radius: 10px;
  background-color:white;
}
.textblock1{
  border: 2px solid black;
  border-radius: 10px;
  padding-left: 10px;
  background-color: #f5f5f5;
  font-size: 16px;
  font-weight:500;
  
  
}
.divblock1{
  border: 2px solid black;
  border-radius: 10px;
  background-color: #ffffff;
  width: 80%;
  padding-left:15px;
  padding-right: 15px;
  margin-top: -70px;
  margin-bottom: -70px;
}
.divblock2{
  border: 2px solid black;
  border-radius: 10px;
  background-color: #ffffff;
  width: 80%;
  padding-left:15px;
  padding-right: 15px;
  /*margin-top: -70px;*/
  margin-bottom: 10px;
  margin-left: 15px;
}
.white-popup-block{ 
  color: black;
  display: inherit;
  background-image:url("https://hhghollandscheveldeo.nl/images/scroll-1033117_1280.webp");
  background-size: cover;
    border: 3px solid black;
  padding:20px 30px;
  text-align:left;
  width:80%;
  margin:40px auto;
  position:relative;
  border-radius:20px;
  margin-bottom:10px;
  box-shadow: 5px 5px 5px 5px grey;
}

.jpb-magnific-popup jpb-modal-selector{
  background-image: linear-gradient(#bfbfbf, #ffffff, #bfbfbf);
  color: black;
  font-size: 16px;
  font-style: bold;
  border: 2px solid black;
 border-radius: 10px;
  margin-top: 10px;
  line-height: 1;
  padding: 5px;
  height:auto;
  width:auto;
  margin-bottom: 10px;
  word-wrap: normal;
}

.jpb-btn-custom{
  background-image: linear-gradient(#bfbfbf, #ffffff, #bfbfbf);
  color: black;
  text-align: left;
  font-size: 14px;
  font-weight: 550;
  border: 2px solid black;
 border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1;
  padding: 5px;
  height: auto;
  white-space: normal;
}

.columnvoorganger{ 
  font-weight:bold;
  font-size: 18px;
  background-color: #f9f9f9;
  width:fit-content;
  border:1px solid black;
  border-radius:5px;
  line-height:2;
  padding-left: 5px;
  padding-right:10px;
  margin-top: 10px;
}


#containerdownload {
    display: inline-block;
     /*justify-content: space-around;
 #containerdownload {
    display: inline-block;  align-items: stretch;*/
    border: 0px solid black;
   margin-top:5px;
  width: calc(auto - 20%);
}
#columndownload{
  text-align: center; padding-bottom: 15px;
 /* margin-right:30%;*/
   display: flex;
    line-heigth: 1;
  color:silver;
  text-align: center;
   padding-left: 10px;
  padding-top:8px;
  padding-bottom: 15px;
  padding-right: 20px;
    border: 2px solid #000;
    border-radius: 10px;
  /*margin-top: 5px;
  margin-right:5px;*/
  font-size: 16px;
    background-color: #444444;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  /*width: calc(auto - 20%);*/
  width:fit-content;
}

.columndownload{
 /* margin-right:30%;*/
   display: flex;
    line-heigth: 1.1;
  color:silver;
  text-align: center;
    padding: px;
  padding-top:8px;
  padding-right: 20px;
    border: 2px solid #000;
    border-radius: 10px;
  /*margin-top: 5px;
  margin-right:5px;*/
  font-size: 16px;
    background-color: #444444;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  /*width: calc(auto - 20%);*/
  width: auto;
}
#myBtndown{
   -webkit-border-radius: 5;
  -moz-border-radius: 5;
   background-image:linear-gradient( #999, #000063, #999);
  border-radius: 5px;
  font-size: 16px;
  color: silver;
  padding-left: 12px;
  padding-top: 6px;
  padding-right: 12px;
  padding-bottom: 6px;
  border:2px;
  border-style: solid;
  border-color: black;
  width: fit-content;
  white-space: normal;
}

.sppb-addon-accordion .sppb-addon-content .sppb-panel-group .sppb-panel-heading {
    background: linear-gradient( #969696, #262626);
  color:silver;
  width:100%;
  text-align:left;
}

/* styling van de heading van accordion*/
.jpb-reset-button-styles{
 background-image: linear-gradient(#969696, #262626);
  color:silver;
  border: 2px solid black;
  border-radius: 10px;
  width: 100%;
  
}

.accordion1{
  /*background-image:linear-gradient( #969696, #262626);
  /*background-color: rgba(255, 0, 0, 0.3);*/
  cursor: pointer;
  padding-top: -30px;
  width: 100%;
  border: 0px;
  border-style:solid;
  border-color:black;
  border-radius:10px;
  text-align: left;
  /*outline: block;*/
  font-size: 15px;
  transition: 0.4s;
  margin-left:-0px;
  height:auto;
  line-height: 1.1;
  
}
.accordion5{
   background-image:linear-gradient( #969696, #262626;)

  cursor: pointer;
  padding: 0px;
  width: 80%;
  border: 10px;
  border-style:solid;
  border-color:black;
  border-radius:10px;
  text-align: left;
  outline: block;
  font-size: 25px;
  transition: 0.4s;
  margin-left:-15px;
}



/*.accordion1{
   background-image:linear-gradient( #969696, #262626;)
   color: red;
  cursor: pointer;
  padding: 25px;
  width: 80%;
  border: none;
  }
  
  .accordion2{
   background-image:linear-gradient( #969696, #262626;)
   color: red;
  cursor: pointer;
  padding: 25px;
  width: 80%;
  border: none;
  text-align: left;
  outline: block;
  font-size: 15px;
  transition: 0.4s;
  margin-left:-35px;

  text-align: left;
  outline: block;
  font-size: 15px;
  transition: 0.4s;
  margin-left:-35px;
}*/

.coldownload1{
height:auto;
width:100%;

}
.modalknop{ 
   position: static;
   /*position: -webkit-sticky; /* Safari */
  top:-200px;
   z-index:20000;
  /*float: centre;*/
  font-family: georgia;
  font-size: 16px;
  line-height:1;
  padding-left: 10%;
  padding-right: 2%;
  padding-top:1%;
  padding-bottom:2%;
  /* box-shadow: 0px 0px 25px 50px lightyellow;*/
 background-color:rgba(0, 0, 0, 0.3);
  width: 95%;
  height:auto;
  overflow: auto;
  
}

.modalknop2{ 
   position: relative;
   /*position: -webkit-sticky; /* Safari */
  top:-700px;
   z-index:20000;
  /*float: centre;*/
  font-family: georgia;
  font-size: 16px;
  line-height:1;
  padding-left: 10%;
  padding-right: 2%;
  padding-top:2%;
  padding-bottom:2%;
  /* box-shadow: 0px 0px 25px 50px lightyellow;*/
 background-color:rgba(0, 0, 0, 0.3);
  width: 95%;
  height:auto;
  overflow: auto;
  
}

.modal-contentknop {
  position:relative;
   top:0px;/*background-/*image:url("https://hhghollandscheveldeo.nl/images/scroll-1033117_1280.webp");*/
 /*background-color:rgba(0, 0, 0, 0.3);*/
  border: 3px solid #000;
  border-radius:10px;
  /*box-shadow: 0px 0px 10px 25px #fff;*/
 /*margin-top:-140px; */
  /*margin-bottom:40px;*/
  padding: 10px;
  margin-left:-100px;
  /*float: centre;*/
  /*border: 5px solid #888;*/
 width: 100%; /* Could be more or less, depending on screen size */
  color:#000;
  line-height: 1.3;
  z-index:20000;
  height:100%;
  align:left;
  overflow: auto;
}

.modal-contentknop2 {
  position:relative;
   top:100px;
  background-image:url("https://hhghollandscheveldeo.nl/images/scroll-1033117_1280.webp");
 /*background-color:rgba(0, 0, 0, 0.3);*/
  border: 10px solid #000;
  /*box-shadow: 0px 0px 10px 25px #fff;*/
 /*margin-top:-140px; */
  /*margin-bottom:40px;*/
  padding: 10px;
  margin-left:-100px;
  /*float: centre;*/
  /*border: 5px solid #888;*/
 width: 100%; /* Could be more or less, depending on screen size */
  color:#000;
  line-height: 1.3;
  z-index:20000;
  height:100%;
  align:left;
  overflow: auto;
}

#myBtnmodal{
   -webkit-border-radius: 5;
  -moz-border-radius: 5;
  background-image:linear-gradient( #969696, #262626 );
  border-radius: 5px;
  font-size: 16px;
  color: silver;
  text-align:left;
  padding-left: 12px;
  padding-top: 6px;
  padding-right: 12px;
  padding-bottom: 6px;
  border:2px;
  border-style: solid;
  border-color: black;
  margin-right: 10px;
  width:60%;
 white-space: normal;
}

/*.accordion{
   background-image:linear-gradient( #969696, #262626;)
   color: silver;
  cursor: pointer;
  padding: 25px;
  width: 80%;
  border: none;
  text-align: left;
  outline: block;
  font-size: 15px;
  transition: 0.4s;
  margin-left:-35px;
}*/

.morgen{
  line-height:1,1;
 
}
#morgendienst{
 
}


#myBtnsec1{
  display:block;
    -webkit-border-radius: 5;
  -moz-border-radius: 5;
  background-image:linear-gradient( #bfbfbf, #ffffff, #bfbfbf);
  border-radius: 5px;
  font-size: 16px;
  color: #000000;
  padding-left: 12px;
  padding-top: 6px;
  padding-right: 12px;
  padding-bottom: 6px;
  border:2px;
  border-style: solid;
  border-color: black;
white-space: normal;
}

.container2 {
    display: flex;
  /*  align-items: stretch;*/
    border: 1px solid #ccc;
  margin-top:5px;
  Width: auto;
}
.container3 {
    display: flex;
  /*  align-items: stretch;*/
    border: 0px solid #black;
   margin-top:5px;
  Width: 100%;
}

.container4 {
    display: flex;
  /*  align-items: stretch;*/
    border: 0px solid #black;
   margin-top:5px;
  Width: auto;
}

#container5 {
    display: flex;
  /*  align-items: stretch;*/
    border: 0px solid #black;
   margin-top:5px;
  Width: 100%;
}

#container6 {
    display: flex;
     justify-content: space-around;
   align-items: stretch;
    border: 0px solid #black;
   margin-top:5px;
  Width: 100%;
}

#eencontainer1 {
    display: flex;
     /*justify-content: space-around;*/
   align-items: stretch;
    border: 0px solid #black;
   margin-top:3px;
  margin-bottom: 3px;
  Width: 100%;
}

#column10{
 /* margin-right:30%;*/
    line-heigth: 1.1;
    padding: 5px;
  padding-top:8px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  /*margin-top: 5px;
  margin-right:5px;*/
  font-size: 16px;
    background-color: #fff8e8;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  width:240px;
}

#eencolumn{
  /* margin-right:30%;*/
    line-heigth: 1.1;
    padding-bottom: 3px;
  padding-top:3px;
  padding-right: 20px;
  padding-left:5px;
    border: 1px solid #000;
    border-radius: 5px;
  /*margin-top: 5px;
  margin-right:5px;*/
  font-size: 16px;
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  width:auto;
}

.eencolumn{
  /* margin-right:30%;*/
    line-heigth: 1.1;
    padding-bottom: 3px;
  padding-top:3px;
  padding-right: 20px;
  padding-left:5px;
    border: 1px solid #000;
    border-radius: 5px;
  /*margin-top: 5px;
  margin-right:5px;*/
  font-size: 16px;
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  width:fit-content;
}

#column11{
  margin-right:30%;
    line-heigth: 1.1;
    padding: 5px;
  padding-top:8px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  /*margin-top: 5px;
  margin-right:5px;*/
  font-size: 16px;
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  width:20%;
}

#column4 {
  
    line-heigth: 1.1;
    padding: 5px;
  padding-top:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: auto;
  margin-bottom: auto;
  margin-right:5px;
  font-size: 16px;
  font-weight: ;
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  width:150px;
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable 
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is 
    cursor: move; /* Cursor verandert in een move cursor */
}
.column4 {
  
    line-heigth: 1.1;
    padding: 5px;
  padding-top:8px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: auto;
  margin-bottom: auto;
  margin-right:5px;
  font-size: 16px;
  font-weight: ;
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  width:150px;
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable 
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is 
    cursor: move; /* Cursor verandert in een move cursor */
}
#column3 {
   
   /*width: 350px;*/
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
font-size: 16px;
  font-weight:500;
    background-color: #f9f9f9;
  width: fit-content;
    min-width: 350px; /* Minimale breedte voor de kolommen */
  /*width: 150px;*/
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
.column3 {
   
   /*width: 350px;*/
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
font-size: 16px;
  font-weight:500;
    background-color: #f9f9f9;
  width: fit-content;
    min-width: 350px; /* Minimale breedte voor de kolommen */
  /*width: 150px;*/
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
#column5 {
 width:350px;
   /*height: auto;*/
  min-height: 18px;
 line-heigth: 1.1;
    padding: 5px;
  padding-top:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  /*margin-top: 5px;
  margin-right:5px;*/
  margin-top: auto;
  margin-bottom: auto;
  font-size: 16px;
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  /*width: 150px;*/
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
.column5 {
 width:350px;
   min-height: 18px;
 line-heigth: 1.1;
    padding: 5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
  font-size: 16px;
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  /*width: 150px;*/
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
.resizer {
    width: 10px;
    cursor: ew-resize; /* Cursor verandert in een resize cursor */
    background-color: #ccc;
}

#column6 {

  font-size:16px;
   width: 150px;
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
 /* font-size: 16px;*/
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  /*width: 150px;*/
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
.column6 {

  font-size:16px;
   width: 150px;
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
 /* font-size: 16px;*/
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  /*width: 150px;*/
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}

#column16 {

  font-size:16px;
   width: 150px;
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
 /* font-size: 16px;*/
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  /*width: 150px;*/
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
#column26 {

  font-size:16px;
   width: 150px;
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
 /* font-size: 16px;*/
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  /*width: 150px;*/
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
#column36 {

  font-size:16px;
   width: 150px;
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
 /* font-size: 16px;*/
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  /*width: 150px;*/
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
#column46 {

  font-size:16px;
   width: 150px;
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
 /* font-size: 16px;*/
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  /*width: 150px;*/
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
#column7 {
   
   width: 350px;
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
  font-size: 16px;
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  /*width: 150px;*/
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
.column7 {
   
   width: 350px;
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
  font-size: 16px;
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  /*width: 150px;*/
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
#column17 {
   
   width: 350px;
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
 /* font-size: 16px;*/
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  /*width: 150px;*/
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
#column27 {
   
   width: 350px;
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
 /* font-size: 16px;*/
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  /*width: 150px;*/
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
#column37 {
   
   width: 350px;
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
 /* font-size: 16px;*/
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  /*width: 150px;*/
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
#column47 {
   
   width: 350px;
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
 /* font-size: 16px;*/
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  /*width: 150px;*/
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}

#column8 {
    font-style:italic;
  font-size:14px;
   /*width: auto;*/
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
 
  min-height: 33px;
    background-color: #f9f9f9;
   width: fit-content;
    min-width: 100px; /* Minimale breedte voor de kolommen */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
.column8 {
    font-style:italic;
  font-size:14px;
   /*width: auto;*/
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
 
  min-height: 33px;
    background-color: #f9f9f9;
   width: fit-content;
    min-width: 100px; /* Minimale breedte voor de kolommen */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}

#column18 {
    font-style:italic;
  font-size:14px;
   width: auto;
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
 /* font-size: 16px;*/
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  /*width: 150px;*/
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
#column28 {
    font-style:italic;
  font-size:14px;
   width: auto;
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
 /* font-size: 16px;*/
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  /*width: 150px;*/
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
#column38 {
    font-style:italic;
  font-size:14px;
   width: auto;
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
 /* font-size: 16px;*/
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  /*width: 150px;*/
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
#column48 {
    font-style:italic;
  font-size:14px;
   width: auto;
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
 /* font-size: 16px;*/
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  /*width: 150px;*/
 /* heigth: auto;
    resize: horizontal; /* Maakt de kolommen resizeable */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}







.rowkop{
  font-size:18px;
  font-style:bold;
  font-family:Georgia;
  color:red:
}
.backend-only {
    display: none;
}
.sectionhide {display:none;}

hr {border: 2px solid #000;
margin-right: 10px;
margin-left:10px;
  width: 95%;
}
.td1{
  font-size:16px;
  line-height:1;
  padding-top:5px;
  padding-bottom:5px;
}


.row10{
  z-index: 1000;
  
}


body{
  background-image:linear-gradient( #bfbfbf, #ffffff, #bfbfbf);
}

.flexiblecolumn1{
  border: 1px;
  border-style: solid;
  border-color:lightgray;
  }
.hr2{
  border:2px;
  border-style:solid;
  border-color: black;
  margin-top:15px;
}
.img1{
  
  width:auto%;
  height:auto%;
  float:right;
  margin-right: 65px;
  border-radius: 10px;
  
}

  .img2{  
 transform: scale(1,1);
  float:right;
  margin-right: 0px;
  border-radius: 10px;
    margin-left:-5px;
  
}

audio {
  height: 50px;
  width: 60%;
  
 /*background: #dee2e6;*/
  /*box-shadow: 0 0 20px 0 #000a;*/
  font-family: arial;
  color: black;
  font-size: 0.75em;
  overflow: hidden;
  display: grid;
  grid-template-rows: 6px auto;
}


audio::-webkit-media-controls-play-button{
background-color:lightblue;
border-radius:10px;
}
 
.section1{
  display:none;
}

.sectionnone{
  display:none;
}

.sectionblock{
  display:block;
}

.grid-container {
  display: grid;
  grid-template-columns: 120px auto auto ;
  gap: 2px;
  /*background-color: red;*/
  padding: 0px;
  width:100%;
  height:auto;
}

.grid-container > div {
  /*background-color: rgba(255, 255, 255, 0.8);*/
  /*text-align: center;*/
  padding: 3px 0;
  /*font-size: 16px;*/
  text-align: left;
  line-height:1.1;
  border:0px;
  border-style:solid;
  border-color:white;
}

#item1 {
  grid-column:1 / span 3;
  grid-row:1;
 font-size: 16px;
}
#item2 {
  grid-column:  1;
  grid-row:2;
  font-size: 16px;
  
}
#item3 {
  grid-column:2 ;
   grid-row:2;
  font-size: 16px;
}

#item4 {
    
  font-size: 16px;
  grid-row: 3 ;
  grid-column: 1 ;
  width:auto;
  margin-top:auto;
  margin-bottom:auto;
  }
  #item5 {
  grid-column: 2 ;
    grid-row: 3;
    font-size: 16px;
}

#item6 {
  grid-column: 1;
  grid-row: 4;
  width:auto;
  margin-top:auto;
  margin-bottom:auto;
  font-size: 16px;
}
#item7 {
  grid-column: 2;
  grid-row: 4;
  font-size: 16px;
}
#item8 {
  grid-column:1;
  grid-row: 5;
  width:auto;
  margin-top:auto;
  margin-bottom:auto;
  font-size: 16px;
  
}
#item9 {
  grid-column: 2;
  grid-row: 5;
  font-size: 16px;
}

#item18 {
  grid-column:1;
  grid-row: 5;
  width:auto;
  margin-top:auto;
  margin-bottom:auto;
  font-size: 16px;
  
}
#item19 {
  grid-column: 2;
  grid-row: 5;
  font-size: 16px;
}

#item28 {
  grid-column:1;
  grid-row: 5;
  width:auto;
  margin-top:auto;
  margin-bottom:auto;
  font-size: 16px;
  
}
#item29 {
  grid-column: 2;
  grid-row: 5;
  font-size: 16px;
}

#item38 {
  grid-column:1;
  grid-row: 5;
  width:auto;
  margin-top:auto;
  margin-bottom:auto;
  font-size: 16px;
  
}
#item39 {
  grid-column: 2;
  grid-row: 5;
  font-size: 16px;
}

#item48 {
  grid-column:1;
  grid-row: 5;
  width:auto;
  margin-top:auto;
  margin-bottom:auto;
  font-size: 16px;
  
}
#item49 {
  grid-column: 2;
  grid-row: 5;
  font-size: 16px;
}

#item10 {
 
  grid-column: 1;
  grid-row: 6;
  margin-top:auto;
  margin-bottom:auto;
 
}


#item11 {
  
  grid-column: 2;
  grid-row:6;
  font-size: 16px;
  
}

#item12 {
  
  grid-column: 1;
  grid-row:8;
  height:5px;
}

#item13 {
  grid-column: 1 / span 3;
  grid-row: 9;
  width:auto;
  font-size: 14px;
  line-height: 1.2;
    font-style: italic;
    font-family:Georgia;
}

#item22 {
  
  grid-column: 1;
  grid-row:8;
  height:5px;
}

#item23 {
  grid-column: 1 / span 3;
  grid-row: 9;
 height: auto;
  width: auto;
  font-size: 14px;
  line-height: 1.2;
    font-style: italic;
    font-family:Georgia;
}

}



/*test grid*/





.modal1 {  
  display: block; /* Hidden by default */
  position: relative; /* Stay in place */
  z-index: 9; /* Sit on top */
  left: 10;
  float: centre;
 top: -100;
  /text-align: centre;
  width: auto; /* Full width */
  /*max-width:90%;*/
  height: auto; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  /*background-color: rgb(0,0,0); /* Fallback color */
   background-color:rgba(0, 0, 0, 0.3);
  width: 80%;
}

.modal{ 
   position: relative;
   /*position: -webkit-sticky; /* Safari */
  top:-500px;
  height:auto;
   z-index:20000;
  /*float: centre;*/
  font-family: georgia;
  font-size: 16px;
  line-height:1;
  padding-left: 5%;
  padding-right: 5%;
  padding-top:5%;
  padding-bottom:5%;
  /* box-shadow: 0px 0px 25px 50px lightyellow;*/
  background-color:rgba(0, 0, 0, 0.3);
  width: 90%;
  
  overflow: auto;
  
}

/* Modal Content Box */
.modal-content {
  position: sticky;
  height:auto;
  background-image:url("https://hhghollandscheveldeo.nl/images/scroll-1033117_1280.webp");
  background-0pacity: 0.5;
  border: 3px solid #000;
  /*box-shadow: 0px 0px 10px 25px #fff;*/
 /* margin-top:40px; /* 15% from the top and centered */
  /*margin-bottom:40px;*/
  padding: 25px;
  z-index:21000;
  /*float: centre;*/
  /*border: 5px solid #888;*/
 width: 90%; /* Could be more or less, depending on screen size */
  color:#000;
  line-height: 1.3;
 
  /*height:60%;*/
}

.modal-content1{
  background-color:yellow;
}
.modal-header{
  background-image:linear-gradient(#bfbfbf, white, #bfbfbf);
  height:auto;
  /*font-size:18px;*/
 margin-top:auto;
  margin-bottom:auto;
  display:inline;
 text-align:center;
  
}

.modal-header2{
  background-image:linear-gradient(#bfbfbf, #ffffff, #bfbfbf);
 /* height:auto;*/
  /*font-size:16px;*/
    font-style:normal;
    border:0px;
    border-style:solid;
    border-color: green;
    margin-top:auto;
  margin-bottom:auto;
     line-heigth: 2;
  
    
}

#myBtn{
   -webkit-border-radius: 5;
  -moz-border-radius: 5;
  background-image:linear-gradient( #bfbfbf, #ffffff, #bfbfbf);
  border-radius: 5px;
  font-size: 16px;
  color: #000000;
  padding-left: 12px;
  padding-top: 6px;
  padding-right: 12px;
  padding-bottom: 6px;
  border:2px;
  border-style: solid;
  border-color: black;
  white-space: normal;
}

.myBtn{
   -webkit-border-radius: 5;
  -moz-border-radius: 5;
  background-image:linear-gradient( #bfbfbf, #ffffff, #bfbfbf);
  border-radius: 5px;
  font-size: 16px;
  color: #000000;
  padding-left: 12px;
  padding-top: 6px;
  padding-right: 12px;
  padding-bottom: 6px;
  border:2px;
  border-style: solid;
  border-color: black;
  white-space: normal;
}

.btnlui{
  
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 10px;
  font-size: 13px;
  width:90%;
  color: #ffffff;
  background:#5a5252;
  padding-left: 12px;
  padding-top: 5px;
  
  padding-bottom: 5px;
  margin-bottom:5px;
  border-width: 2px;
  border-radius: 10px;
  border-color: #fff;
  text-hover: #ffffff;
  box-shadow-color-hover: #bababa;
  box-shadow-vert-hover: 3;
  box-shadow-horz-hover: 3;
  box-shadow-blur-hover: 0;
  box-shadow-spread-hover: 0;
 
  padding: 6px 12px 6px 12px;
  border-style: solid;
  undefined: ;
  white-space: normal;
}


.hr1 {border: 2px solid #000;
margin-right: 10px;
margin-left:10px;
  width: 95%;
}
.box1{
  border-bottom: 2px solid;
  border-width: 95%;
  
}
.popup1{
  width: auto;
  height: auto;
  background-image: linear-gradient(to bottom left, #bac1cf 0%, #5679c4 100%)!important;
  padding-right: -20px;
  
}


.t01{ 
  
 border:px;
 border-color: black;
  border-style:solid;
  font-size:16px !important;
  font-style: normal;
   width: auto;
  padding-top: -20px;
  background-color: #dee2e6 !important;
  border-collapse: collapse;
  font-family: Bahnschrift kleinlightbold !important;
  line-height:1!important;  
}

.button1{
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  font-size: 11px;
  color: #ffffff;
  background: #6caad4;
  padding-left: 12px;
  padding-top: 6px;
  padding-right: 12px;
  padding-bottom: 6px;
  border-width: 2px;
  border-radius: 5px;
  border-color: #31404d;
  text-hover: #ffffff;
  box-shadow-color-hover: #bababa;
  box-shadow-vert-hover: 3;
  box-shadow-horz-hover: 3;
  box-shadow-blur-hover: 0;
  box-shadow-spread-hover: 0;

  padding: 6px 12px 6px 12px;
  border-style: solid;
  undefined: ;
}
.pmodal{
 background-image: linear-gradient(to bottom left, #bac1cf 0%, #5679c4 100%);
  font-family: georgia;
  font-size:16px;
 // padding-left: -50px;
  padding-right: 10px;
  word-break: normal;
  width: 100%;
 // max-width: 60%;
  height: auto;

}
.menu1{
  background-color:black;
  color: white;
}
.tbody1{
   background-image: linear-gradient(to bottom left, #bac1cf 0%, #5679c4 100%);
  font-family: georgia;
  font-size:16px;

  word-break: normal;
  width: 60%;
  //max-width: 60%;
  height: auto;

}

.modal1{ 
  font-family: georgia;
  font-size: 16px;
  line-height:1;
  padding-left: 10px;
  padding-right: 10px;
   box-shadow: 0px 0px 25px 50px lightyellow;
    background-color: lightyellow;
  width: auto;
  max-width:30%;
 
  
}

#t05{
 
  font-size:16px;
  width: 100%;
  height:100%;
  
  border-collapse: collapse;
   font-family: Bahnschrift kleinlightbold;
 font-style: normal;

  line-height:1.1;
  
  
}

#t04{
 
  font-size:16px;
  width: 95%;
  height:100%;
  border: 2px solid;
  border-color: #000;
  padding-left:20px;
  border-radius: 10px;
  border-collapse: collapse;
   font-family: Bahnschrift kleinlightbold;
 font-style: normal;

  line-height 0.9;
  
  
}

.t10{
 
  font-size:16px;
  width: auto;
  height:100%;
  border:0px solid;
  border-color: #000;
  padding-left:20px;
  border-radius: 10px;
  border-collapse: collapse;
   font-family: Bahnschrift kleinlightbold;
 font-style: normal;

  line-height: 1.1;
  
  
}

.t11{
 
  font-size:18px;
  font-style:bold;
  width: auto;
  height:auto;
  border:0px solid;
  border-color: #000;
  padding-left:20px;
  border-radius: 10px;
  border-collapse: collapse;
   font-family: Bahnschrift kleinlightbold;
 font-style: normal;

  line-height: 1.1;
  
  
}

#t01{

 
 border:1px;
 border-color: black;
  font-size:14px !important;
   width: fit-content;
  
  background-color: #dee2e6 !important;
  border-collapse: collapse;
  font-family: Bahnschrift kleinlightbold !important;
 

  line-height:0.9;
  
  
}


#p1{
  
   border-color: black;
  font-size:14px !important;
   width: fit-content;
  
  background-color: #dee2e6 !important;
  border-collapse: collapse;
  font-family: Bahnschrift kleinlightbold !important;
 

  line-height:0.9;
}
#p2{
  font-family: georgia;
  font-size: 16px;
  line-height:1;
  padding-left: 10px;
  padding-right: 10px;
  background-color:#ffffe4;
  border-radius: 10px;
  
}



#t02{
       border-bottom: 1px solid black;
    font-size: 12px;
    font-style: italic;
    font-family: Bahnschrift kleinlightbold !important;
    padding-left:45px;
  margin-top:10px;
    line-height:0.9;
    background-color: #dee2e6 100;
    border:5px;
border-color:#000000;
  }

.colpreek {
  width: 120%;
  box-shadow: 10px 10px 10px 10px #000;
  padding-right: 10px;
  
  
}

.colcontent {
  z-index: 1;
  
  
}
body1{
  font-family:Bahnschrift regular;
  font-size: 11px;
  background-color: #dee2e6 !important;
  line-height: 1.1;
  
}

Body{
  font-family:Bahnschrift regular;
  font-size: 14px;
  background-color: #dee2e6 !important;
  
  
}

.nieuws{
  /border: 2px solid;
 / border-color: black;
  box-shadow: 5px 5px 5px 5px #676c78 !important;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 20px;
  padding-top:10px;
  padding-bottom:10px;
  margin-left:10px;
  width: 95% !important;
  height: auto;
  background-color: #dee2e6 !important;
}
 

p.pm0 {
  
  margin-top: 0px ;
  margin-bottom: 0px ;
}

p.pm1 {
  font-family: Bahnscrift regular;
  font-style: normal;
  line-height: 1.1;
  font-size: 14px;
  margin-top: 0px ;
  margin-bottom: 0px ;
}

.iframe1{
  width:99%;
  border-radius:20px;
  border: 2px solid black;
  box-shadow: 10px 10px 10px 5px #6b6b6b;
  margin-top: 2px;
  margin-left: 2px;
  margin-right: 6px;
  height: 400px;
  
  
}

 @media screen and (max-width:1000px)
/*@media screen and (min-width: 500px) and (max-width: 1000px)*/{

 .sppb-addon-accordion .sppb-addon-content .sppb-panel-group .sppb-panel-heading {
    background: linear-gradient( #969696, #262626);
  color:silver;
  width:100%;
  text-align:left;
}

  .loginclass{
    display:none;
  }

.jpb-reset-button-styles{
 background-image: linear-gradient(#969696, #262626);
  color:silver;
  border: 2px solid black;
  border-radius: 10px;
  width: 100%;
  
}

  .jpb-magnific-popup jpb-modal-selector{
  background-image: linear-gradient(#bfbfbf, #ffffff, #bfbfbf);
  color: black;
  font-size: 16px;
  font-style: bold;
  border: 2px solid black;
 border-radius: 10px;
  margin-top: 10px;
  line-height: 1;
  padding: 5px;
  height:auto;
  width:100%;
  margin-bottom: 10px;
   white-space: normal;
}
  
   #colacc{
  width: 100%;
}

.divblock1{
  border: 2px solid black;
  border-radius: 10px;
  background-color: #ffffff;
  width: 100%;
 padding-left: 5px;
  padding-right: 5px;
  margin-top: -0px;
  margin-bottom: -0px;
} 

  .divblock2{
  border: 2px solid black;
  border-radius: 10px;
  background-color: #ffffff;
  width: 100%;
  padding-left:15px;
  padding-right: 15px;
  /*margin-top: -70px;*/
  margin-bottom: 10px;
}

  
   .coldownload1{
height:auto;
width:100%;

}
   .jpb-panel-custom{
     overflow: auto;
     

   }

   .jpb-btn {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    white-space: normal;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 2px solid black;
    padding: 8px 12px;
    font-size: 16px;
    line-height: 1.25;
    border-radius: 10px;
    transition: all .15s 
ease-in-out;
    white-space: normal;
     width: fit-content;
}
/* styling van de heading van accordion*/
  .jpb-reset-button-styles{
 background-image: linear-gradient(#969696, #262626);
  color:silver;
  border: 2px solid black;
  border-radius: 10px;
  width: 100%;
  
}

   .accordion1{
   background-image:linear-gradient( #969696, #262626);
  
  cursor: pointer;
  padding: 0px;
  width: 130%;
  border: 1px;
  border-style:solid;
  border-color:black;
  border-radius:10px;
  text-align: left;
  outline: block;
  font-size: 12px;
  transition: 0.4s;
  margin-left:auto;
  margin-right: auto;
  height:auto;
}

  .colomnaccordion1{

     width:100%;
   /* background: yellow;*/
    margin-left: -30px;
    margin-right: 0px;
  }
  
   #column10{
  margin-right:2%;
    line-heigth: 1.1;
    padding: 5px;
  padding-top:8px;
  padding-right: 5px;
    border: 1px solid #000;
    border-radius: 5px;
  /*margin-top: 5px;
  margin-right:5px;*/
  font-size: 16px;
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  width:50%;
}
#column11{
  margin-right:0%;
    line-heigth: 1.1;
    padding: 5px;
  padding-top:8px;
  padding-right: 5px;
    border: 1px solid #000;
    border-radius: 5px;
  /*margin-top: 5px;
  margin-right:5px;*/
  font-size: 16px;
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  width:50%;
}
   #column8 {
    font-style:italic;
  font-size:14px;
   /*width: auto;*/
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
 
  min-height: 33px;
    background-color: #f9f9f9;
   width: fit-content;
    min-width: 100px; /* Minimale breedte voor de kolommen */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
.column8 {
    font-style:italic;
  font-size:14px;
   /*width: auto;*/
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
 
  min-height: 33px;
    background-color: #f9f9f9;
   width: fit-content;
    min-width: 100px; /* Minimale breedte voor de kolommen */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
  
  .img1{  
 transform: scale(0.8,0.8);
  float:right;
  margin-right: 0px;
  border-radius: 10px;
    margin-left:-5px;
  
}
  .img2{  
 transform: scale(0.5,0.5);
    display:none;
  float:right;
   
  margin-right: 0px;
  border-radius: 10px;
    margin-left:-5px;
  
}

 grid-container {
  display: grid;
  grid-template-columns: auto auto auto ;
  gap: 2px;
  /*background-color: #2196F3;*/
  padding: 2px;
   width:100%;
   
}

.grid-container > div {
  /*background-color: rgba(255, 255, 255, 0.8);*/
  
  padding: 1px 0;
  font-size: 16px;
   text-align:left;
  border:0px;
  border-style:solid;
  border-color:red;
  
}

.item1 {
  grid-column: 1 /3;
  width:auto;
}
.item2 {
  grid-column: 2 / 1;
  width:auto;
}
.item3 {
  grid-column: 2 /2;
  width:auto;
}
.item4 {
  width:auto;
  
  grid-row: 3 ;
  grid-column: 1 ;
  
  }
  .item5 {
  grid-column: 2 ;
    grid-row: 3;
   width:auto;
}.item6 {
  grid-column: 1;
  grid-row: 4;
 width:auto;
}
.item7 {
  grid-column: 2;
  grid-row: 4;
  width:auto;
}
.item8 {
  grid-column:1;
  grid-row: 5;
  width:auto;
}
.item9 {
  grid-column: 2;
  grid-row: 5;
  width:auto;
}
   
.item10 {
 
  grid-column: 1;
  grid-row: 6;
 
}


.item11 {
  
  grid-column: 2;
  grid-row:6;
  font-size: 16px;
}

.item12 {
  
  grid-column: 1;
  grid-row:8;
  height:5px;
}

.item13 {
  grid-column: 1 / span 3;
  grid-row: 9;
  width:auto;
  font-size: 14px;
  line-height: 1.2;
    font-style: italic;
    font-family:Georgia;
}

}

 @media screen and (max-width:750px)
/*@media screen and (min-width: 500px) and (max-width: 1000px)*/{

 .sppb-addon-accordion .sppb-addon-content .sppb-panel-group .sppb-panel-heading {
    background: linear-gradient( #969696, #262626);
  color:silver;
  width:100%;
  text-align:left;
}

  .loginclass{
    display:none;
  }

.jpb-reset-button-styles{
 background-image: linear-gradient(#969696, #262626);
  color:silver;
  border: 2px solid black;
  border-radius: 10px;
  width: 100%;
  
}

  .jpb-magnific-popup jpb-modal-selector{
  background-image: linear-gradient(#bfbfbf, #ffffff, #bfbfbf);
  color: black;
  font-size: 16px;
  font-style: bold;
  border: 2px solid black;
 border-radius: 10px;
  margin-top: 10px;
  line-height: 1;
  padding: 5px;
  height:auto;
  width:100%;
  margin-bottom: 10px;
   white-space: normal;
}
  
   #colacc{
  width: 100%;
}

.divblock1{
  border: 2px solid black;
  border-radius: 10px;
  background-color: #ffffff;
  width: 100%;
 padding-left: 5px;
  padding-right: 5px;
  margin-top: -0px;
  margin-bottom: -0px;
} 

  .divblock2{
  border: 2px solid black;
  border-radius: 10px;
  background-color: #ffffff;
  width: 100%;
  padding-left:15px;
  padding-right: 15px;
  /*margin-top: -70px;*/
  margin-bottom: 10px;
}

  
   .coldownload1{
height:auto;
width:100%;

}
   .jpb-panel-custom{
     overflow: auto;
     

   }

   .jpb-btn {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    white-space: normal;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 2px solid black;
    padding: 8px 12px;
    font-size: 16px;
    line-height: 1.25;
    border-radius: 10px;
    transition: all .15s 
ease-in-out;
    white-space: normal;
     width: fit-content;
}
/* styling van de heading van accordion*/
  .jpb-reset-button-styles{
 background-image: linear-gradient(#969696, #262626);
  color:silver;
  border: 2px solid black;
  border-radius: 10px;
  width: 100%;
  
}

   .accordion1{
   background-image:linear-gradient( #969696, #262626);
  
  cursor: pointer;
  padding: 0px;
  width: 150%;
  border: 1px;
  border-style:solid;
  border-color:black;
  border-radius:10px;
  text-align: left;
  outline: block;
  font-size: 12px;
  transition: 0.4s;
  margin-left:auto;
  margin-right: auto;
  height:auto;
}

  .colomnaccordion1{

    width:100%;
   /* background: yellow;*/
    margin-left: -30px;
    margin-right: 0px;
  }
  
   #column10{
  margin-right:2%;
    line-heigth: 1.1;
    padding: 5px;
  padding-top:8px;
  padding-right: 5px;
    border: 1px solid #000;
    border-radius: 5px;
  /*margin-top: 5px;
  margin-right:5px;*/
  font-size: 16px;
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  width:50%;
}
#column11{
  margin-right:0%;
    line-heigth: 1.1;
    padding: 5px;
  padding-top:8px;
  padding-right: 5px;
    border: 1px solid #000;
    border-radius: 5px;
  /*margin-top: 5px;
  margin-right:5px;*/
  font-size: 16px;
    background-color: #f9f9f9;
   /* min-width: 100px; /* Minimale breedte voor de kolommen */
  width:50%;
}
   #column8 {
    font-style:italic;
  font-size:14px;
   /*width: auto;*/
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
 
  min-height: 33px;
    background-color: #f9f9f9;
   width: fit-content;
    min-width: 100px; /* Minimale breedte voor de kolommen */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
.column8 {
    font-style:italic;
  font-size:14px;
   /*width: auto;*/
 line-heigth: 1.1;
    padding-top: 8px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
  margin-top: 5px;
  margin-right:5px;
 
  min-height: 33px;
    background-color: #f9f9f9;
   width: fit-content;
    min-width: 100px; /* Minimale breedte voor de kolommen */
    overflow: auto; /* Zorgt ervoor dat de inhoud scrollbaar is als deze te groot is */
   /* cursor: move; /* Cursor verandert in een move cursor */
}
  
  .img1{  
 transform: scale(0.8,0.8);
  float:right;
  margin-right: 0px;
  border-radius: 10px;
    margin-left:-5px;
  
}
  .img2{  
 transform: scale(0.5,0.5);
    display:none;
  float:right;
   
  margin-right: 0px;
  border-radius: 10px;
    margin-left:-5px;
  
}

 grid-container {
  display: grid;
  grid-template-columns: auto auto auto ;
  gap: 2px;
  /*background-color: #2196F3;*/
  padding: 2px;
   width:100%;
   
}

.grid-container > div {
  /*background-color: rgba(255, 255, 255, 0.8);*/
  
  padding: 1px 0;
  font-size: 16px;
   text-align:left;
  border:0px;
  border-style:solid;
  border-color:red;
  
}

.item1 {
  grid-column: 1 /3;
  width:auto;
}
.item2 {
  grid-column: 2 / 1;
  width:auto;
}
.item3 {
  grid-column: 2 /2;
  width:auto;
}
.item4 {
  width:auto;
  
  grid-row: 3 ;
  grid-column: 1 ;
  
  }
  .item5 {
  grid-column: 2 ;
    grid-row: 3;
   width:auto;
}.item6 {
  grid-column: 1;
  grid-row: 4;
 width:auto;
}
.item7 {
  grid-column: 2;
  grid-row: 4;
  width:auto;
}
.item8 {
  grid-column:1;
  grid-row: 5;
  width:auto;
}
.item9 {
  grid-column: 2;
  grid-row: 5;
  width:auto;
}
   
.item10 {
 
  grid-column: 1;
  grid-row: 6;
 
}


.item11 {
  
  grid-column: 2;
  grid-row:6;
  font-size: 16px;
}

.item12 {
  
  grid-column: 1;
  grid-row:8;
  height:5px;
}

.item13 {
  grid-column: 1 / span 3;
  grid-row: 9;
  width:auto;
  font-size: 14px;
  line-height: 1.2;
    font-style: italic;
    font-family:Georgia;
}

}
  @font-face {
font-family: 'Bahnschrift bold';
font-style: normal;
font-weight: bold;

src: local('Bahnschrift Regular'), url('../fonts/BAHNSCHRIFT 1.woff') format('woff');
}


@font-face {
font-family: 'Bahnschrift lightboldregular';
font-style: normal;
font-weight: 300;
src: local('Bahnschrift Regular'), url('../fonts/BAHNSCHRIFT 10.woff') format('woff');
}


@font-face {
font-family: 'Bahnschrift semibold';
font-style: normal;
font-weight: 500;
src: local('Bahnschrift Regular'), url('../fonts/BAHNSCHRIFT 11.woff') format('woff');
}


@font-face {
font-family: 'Bahnschrift schuin';
font-style: italic;
font-weight: normal;
src: local('Bahnschrift Regular'), url('../fonts/BAHNSCHRIFT 12.woff') format('woff');
}


@font-face {
font-family: 'Bahnschrift kleinlightbold';
font-style: normal;
font-weight: 500;
  font-size:14px;
src: local('Bahnschrift Regular'), url('../fonts/BAHNSCHRIFT 13.woff') format('woff');
}


@font-face {
font-family: 'Bahnschrift Regular';
font-style: normal;
font-weight: normal;
src: local('Bahnschrift Regular'), url('BAHNSCHRIFT 14.woff') format('woff');
}


@font-face {
font-family: 'Bahnschrift Regular';
font-style: normal;
font-weight: normal;
src: local('Bahnschrift Regular'), url('BAHNSCHRIFT 2.woff') format('woff');
}


@font-face {
font-family: 'Bahnschrift Regular';
font-style: normal;
font-weight: normal;
src: local('Bahnschrift Regular'), url('BAHNSCHRIFT 3.woff') format('woff');
}


@font-face {
font-family: 'Bahnschrift Regular';
font-style: normal;
font-weight: normal;
src: local('Bahnschrift Regular'), url('BAHNSCHRIFT 4.woff') format('woff');
}


@font-face {
font-family: 'Bahnschrift Regular';
font-style: normal;
font-weight: normal;
src: local('Bahnschrift Regular'), url('BAHNSCHRIFT 5.woff') format('woff');
}


@font-face {
font-family: 'Bahnschrift Regular';
font-style: normal;
font-weight: normal;
src: local('Bahnschrift Regular'), url('BAHNSCHRIFT 6.woff') format('woff');
}


@font-face {
font-family: 'Bahnschrift Regular';
font-style: normal;
font-weight: normal;
src: local('Bahnschrift Regular'), url('BAHNSCHRIFT 7.woff') format('woff');
}


@font-face {
font-family: 'Bahnschrift Regular';
font-style: normal;
font-weight: normal;
src: local('Bahnschrift Regular'), url('BAHNSCHRIFT 8.woff') format('woff');
}


@font-face {
font-family: 'Bahnschrift Regular';
font-style: normal;
font-weight: normal;
src: local('Bahnschrift Regular'), url('BAHNSCHRIFT 9.woff') format('woff');
}


@font-face {
font-family: 'Bahnschrift Regular';
font-style: normal;
font-weight: normal;
src: local('Bahnschrift Regular'), url('BAHNSCHRIFT.woff') format('woff');
}

/* =========================================================
   DIENST-MODAL
   ========================================================= */

.dienst-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    inset: 0;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.75);
    padding: 40px 20px;
    box-sizing: border-box;
}

.dienst-modal.open {
    display: block;
}

.dienst-modal-content {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
    box-sizing: border-box;
   background: #ffffff;
  
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.dienst-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #333;
    font-size: 32px;
    line-height: 32px;
    cursor: pointer;
}

.dienst-modal-close:hover {
    color: #d00000;
}

.dienst-modal-tekst {
    margin-top: 25px;
    font-size: 16px;
    line-height: 1.6;
    
    
}

.dienst-modal-tekst h2,
.dienst-modal-tekst h3 {
    margin-top: 25px;
}

.dienst-modal-tekst p {
    margin-bottom: 15px;
}


/* =========================================================
   DIENSTEN - MODERN DONKERBLAUW
   ========================================================= */

:root {
    --dienst-blauw: #123f78;
    --dienst-blauw-donker: #0b2e5b;
    --dienst-blauw-licht: #eaf2fb;
    --dienst-lijn: #d8e2ef;
    --dienst-tekst: #18304f;
    --dienst-wit: #ffffff;
}


/* =========================================================
   ALGEMENE DIENSTENPAGINA
   ========================================================= */

.diensten-pagina {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    box-sizing: border-box;
}

.dienst-accordion {
    width: 100%;
    margin: 20px auto;
    box-sizing: border-box;
}

.dienst-item {
    width: 100%;
    margin: 0 0 14px 0;
    box-sizing: border-box;
}


/* =========================================================
   ACCORDION HEADER
   ========================================================= */

.dienst-header {
    width: 100%;
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 22px;

    border: 1px solid var(--dienst-blauw-donker);
    border-radius: 12px;

    background: linear-gradient(
        135deg,
        var(--dienst-blauw),
        var(--dienst-blauw-donker)
    );

    color: #ffffff;

    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    text-align: left;

    cursor: pointer;
    box-sizing: border-box;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);

    transition:
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

.dienst-header:hover {
    background: linear-gradient(
        135deg,
        #174d8f,
        #0d3567
    );

    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.22);
}

.dienst-header-pijl {
    flex: 0 0 auto;

    margin-left: 20px;

    color: #ffffff;

    font-size: 27px;
    font-weight: 700;
    line-height: 1;
}


/* =========================================================
   ACCORDION PANEL
   ========================================================= */

.dienst-panel {
    display: none;

    width: 100%;

    margin: 0;
    padding: 18px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid var(--dienst-lijn);
    border-top: none;
    border-radius: 0 0 14px 14px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.dienst-item.open .dienst-panel {
    display: block;
}


/* =========================================================
   DIENST INHOUD
   ========================================================= */

.dienst-inhoud {
    width: 100%;
    box-sizing: border-box;
}

.dienst-blok {
    display: block;
    width: 100%;
    margin-bottom: 18px;
    box-sizing: border-box;
}

.dienst-blok.verborgen {
    display: none !important;
}


/* =========================================================
   AUDIO / DOWNLOAD
   Licht en rustig; geen donker audioblok
   ========================================================= */

.dienst-audio {
    width: 100%;

    margin: 0 0 24px 0;
    padding: 10px 14px 16px 14px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e2e9f2;
    border-radius: 12px;

    box-shadow: 0 2px 8px rgba(20, 55, 90, 0.08);

    font-family: inherit;
}


/* Audio player */

.dienst-audio audio {
    display: block;

    width: 100%;
    max-width: 1100px;

    height: 52px;

    border: 1px solid #b8cde5;
    border-radius: 9px;

    box-sizing: border-box;

    background: #ffffff;
}


/*
   De standaard browser-player blijft verantwoordelijk
   voor de bediening. Deze kleur ondersteunt vooral
   browsers die de native controls gedeeltelijk stylen.
*/

.dienst-audio audio::-webkit-media-controls-panel {
    background-color: #f7faff;
}

.dienst-audio audio::-webkit-media-controls-play-button {
    background-color: #b9ddf2;
    border-radius: 50%;
}


/* Download knop */

.dienst-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 250px;

    padding: 11px 24px;

    border: 1px solid #08264b;
    border-radius: 9px;

    background: linear-gradient(
        135deg,
        #2d6db4,
        #123f78
    );

    color: #ffffff;

    text-decoration: none;

    font-family: inherit;
    font-size: 16px;
    font-weight: 700;

    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);

    transition:
        background 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}

.dienst-download:hover {
    background: linear-gradient(
        135deg,
        #3a7fc9,
        #174d8f
    );

    color: #ffffff;

    transform: translateY(-1px);

    box-shadow: 0 5px 11px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   DIENST RIJEN
   ========================================================= */

.dienst-row {
    display: grid;

    grid-template-columns: 220px minmax(0, 1fr);

    width: 100%;

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    border-bottom: 1px solid var(--dienst-lijn);
}

.dienst-row:last-child {
    border-bottom: none;
}


/* Linker kolom */

.dienst-label {
    display: flex;
    align-items: flex-start;

    min-height: 48px;

    padding: 13px 14px;

    box-sizing: border-box;

    background: var(--dienst-blauw-licht);

    color: var(--dienst-blauw-donker);

    font-size: 17px;
    font-weight: 700;

    line-height: 1.35;
}


/* Rechter kolom */

.dienst-value {
    min-width: 0;
    min-height: 48px;

    padding: 13px 16px;

    box-sizing: border-box;

    background: #ffffff;

    color: var(--dienst-tekst);

    font-size: 16px;

    line-height: 1.45;
}


/* Meerdere regels in liturgie */

.dienst-value > div {
    line-height: 1.45;
}


/* =========================================================
   TEKST
   ========================================================= */

.cms-tekst {
    margin-top: 0;
    margin-bottom: 0;
}

.cms-tekst-vak {
    font-style: italic;
    line-height: 1.1;
    font-size: 12px;
}


/* =========================================================
   EXTRA / THEMA
   ========================================================= */

.cms-thema,
.cms-extra {
    margin-top: 0;
    margin-bottom: 0;
}

.dienst-extra {
    padding: 0;
}


/* =========================================================
   SCHRIFTLEZING KNOP
   ========================================================= */

.schriftlezing-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding: 8px 15px;

    border: 1px solid var(--dienst-blauw);
    border-radius: 8px;

    background: #ffffff;

    color: var(--dienst-blauw-donker);

    font-family: inherit;
    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    box-shadow: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.schriftlezing-button:hover {
    background: var(--dienst-blauw);
    color: #ffffff;
    border-color: var(--dienst-blauw);
}


/* =========================================================
   SCHRIFTLEZING MODAL
   ========================================================= */

.schriftlezing-modal {
    position: fixed;
    inset: 0;

    display: none;

    z-index: 99999;
}

.schriftlezing-modal.open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.schriftlezing-modal-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.75);
}

.schriftlezing-modal-box {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 900px;
    max-height: 85vh;

    overflow-y: auto;

    padding: 30px;

    box-sizing: border-box;

    /*background: #ffffff;*/
     background-image: url("/uploads/scroll-1033117_1280.webp");
    color: #222222;

    border: 1px solid var(--dienst-lijn);
    border-radius: 14px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.schriftlezing-modal-close {
    position: absolute;

    top: 10px;
    right: 15px;

    width: 40px;
    height: 40px;

    border: none;
    background: transparent;

    color: #333333;

    font-size: 32px;
    line-height: 32px;

    cursor: pointer;
}

.schriftlezing-modal-close:hover {
    color: #d00000;
}

.schriftlezing-modal-box h2 {
    margin-top: 0;
    margin-bottom: 10px;

    color: var(--dienst-blauw-donker);
}

.schriftlezing-modal-box h3 {
    margin-top: 0;
    margin-bottom: 25px;

    color: var(--dienst-blauw);
}

.schriftlezing-modal-text {
    white-space: pre-wrap;

    line-height: 1.6;
    font-size: 16px;
}

body.modal-open {
    overflow: hidden;
}


/* =========================================================
   LIVE MEELUISTEREN
   ========================================================= */

.live-meeluisteren {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;
    padding: 0;

    box-sizing: border-box;
}

.live-player {
    width: 98%;
    max-width: none;

    margin: 0 auto 25px auto;
    padding: 0;

    box-sizing: border-box;

    border: 2px solid #000000;
    border-radius: 12px;

    overflow: hidden;

    background: #000000;

    box-shadow: 5px 5px 10px #6b6b6b;
}

.live-player iframe {
    display: block;

    width: 100% !important;
    max-width: 100% !important;

    height: 400px;

    margin: 0;
    padding: 0;

    border: 0;

    box-sizing: border-box;
}

.live-diensten {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    text-align: left;
}


/* =========================================================
   DIENSTEN OP LIVE MEELUISTEREN
   ========================================================= */

.cms-dienst {
    position: relative;

    width: 98%;
    max-width: none;

    margin: 0 auto 20px auto;
    padding: 18px;

    box-sizing: border-box;

    border: 1px solid var(--dienst-lijn);
    border-radius: 14px;

    background: #ffffff;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);

    text-align: left;
}

.cms-dienst-titel {
    margin-bottom: 18px;
    padding-bottom: 10px;

    border-bottom: 1px solid var(--dienst-lijn);

    color: var(--dienst-blauw-donker);

    font-size: 20px;
    font-weight: 700;

    text-align: left;
}

.cms-dienst-inhoud {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    text-align: left;
}

.cms-dienst .dienst-row {
    grid-template-columns: 220px minmax(0, 1fr);
}

.cms-dienst .dienst-label {
    min-height: 48px;

    padding: 13px 14px;

    border: none;
    border-radius: 0;

    background: var(--dienst-blauw-licht);

    color: var(--dienst-blauw-donker);

    text-align: left;
}

.cms-dienst .dienst-value {
    min-height: 48px;

    padding: 13px 16px;

    border: none;
    border-radius: 0;

    background: #ffffff;

    color: var(--dienst-tekst);

    text-align: left;
}

.live-dienst-titel {
    width: 98%;
    max-width: none;

    margin: 0 auto 12px auto;
    padding: 10px 5px;

    box-sizing: border-box;

    color: var(--dienst-blauw-donker);

    font-size: 20px;
    font-weight: 700;

    text-align: left;

    border-bottom: 2px solid var(--dienst-lijn);
}

/* Titel van de oorspronkelijke dienst niet dubbel tonen */
.live-dienst-inhoud .cms-dienst-titel {
    display: none;
}


/* =========================================================
   RESPONSIVE DIENSTEN
   ========================================================= */

@media screen and (max-width: 900px) {

  
  /* ook aangepast door mij*/
  
    .site-layout {
        flex-direction: column;
    }
   .main-content {
        width: 100%;
        max-width: 100%;
    }
/*tot zover*/
    .site-sidebar {
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
    }
    .dienst-header {
        width: 100%;
    }

    .dienst-panel {
        width: 100%;
    }

    .dienst-row,
    .cms-dienst .dienst-row {
        grid-template-columns: 170px minmax(0, 1fr);
    }

    .dienst-label,
    .dienst-value {
        font-size: 15px;
    }

    .dienst-audio {
        width: 100%;
    }

    .live-player {
        width: 100%;
    }

    .cms-dienst {
        width: 100%;
    }
}


@media screen and (max-width: 700px) {

    .dienst-header {
        min-height: 52px;

        padding: 12px 15px;

        font-size: 16px;
    }

    .dienst-panel {
        padding: 12px;
    }

    .dienst-audio {
        padding: 14px;
        gap: 12px;
    }

    .dienst-audio audio {
        height: 48px;
    }

    .dienst-download {
        width: 100%;
        min-width: 0;
        max-width: 320px;
    }

    .dienst-row,
    .cms-dienst .dienst-row {
        grid-template-columns: 140px minmax(0, 1fr);
    }

    .dienst-label,
    .dienst-value {
        min-height: 44px;
        padding: 10px 11px;
        font-size: 14px;
    }

    .schriftlezing-modal-box {
        width: 94%;
        max-height: 90vh;
        padding: 20px;
    }

    .schriftlezing-modal-box h2 {
        font-size: 22px;
    }

    .schriftlezing-modal-box h3 {
        font-size: 18px;
    }

    .schriftlezing-modal-text {
        font-size: 15px;
    }

    .live-player {
        width: 100%;
    }

    .live-player iframe {
        width: 100% !important;
        height: 300px;
    }

    .cms-dienst {
        width: 100%;
        padding: 12px;
    }
}


@media screen and (max-width: 550px) {

    .dienst-header {
        min-height: 50px;

        padding: 11px 13px;

        font-size: 15px;
    }

    .dienst-header-pijl {
        font-size: 23px;
    }

    .dienst-panel {
        padding: 10px;
    }

    .dienst-row,
    .cms-dienst .dienst-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .dienst-label {
        min-height: auto;

        padding: 8px 10px;

        border-bottom: 1px solid var(--dienst-lijn);

        font-size: 15px;
    }

    .dienst-value {
        min-height: auto;

        padding: 9px 10px;

        font-size: 15px;
    }

    .dienst-audio {
        padding: 12px 10px;
        border-radius: 11px;
    }

    .dienst-audio audio {
        height: 46px;
    }

    .dienst-download {
        width: 100%;
        max-width: none;

        padding: 10px 14px;

        font-size: 14px;
    }

  /* =========================================================
   KNOP SCHRIFTLEZING OPENEN
   ========================================================= */

.schriftlezing-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 38px;

    padding: 8px 16px;

    border: 1px solid #123f78;
    border-radius: 7px;

    background: #ffffff;

    color: #123f78;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    white-space: nowrap;

    box-shadow: 0 1px 3px rgba(18, 63, 120, 0.15);

    transition:
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

.schriftlezing-button::before {
    content: "📖";
    font-size: 14px;
}

.schriftlezing-button:hover {
    background: #123f78;
    color: #ffffff;

    box-shadow: 0 3px 7px rgba(18, 63, 120, 0.25);

    transform: translateY(-1px);
}

.schriftlezing-button:active {
    transform: translateY(0);
}
}


@media (prefers-reduced-motion: reduce) {

    .dienst-header,
    .dienst-download,
    .schriftlezing-button {
        transition: none !important;
    }
}

/* =========================================================
   SIDEBAR
   ========================================================= */

/*.site-sidebar {
    width: 30%;
    box-sizing: border-box;
}
*/
@media screen and (max-width: 800px) {

   /* .site-sidebar {
        width: 100%;
    }*/

   /* Aangepast door mij*/
   
    .site-layout {
        flex-direction: column;
    }
   .main-content {
        width: 100%;
        max-width: 100%;
    }

    .site-sidebar {
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
    }
    /*tot zover*/
}

.sidebar-inner {
    width: 100%;
    box-sizing: border-box;
}
.bijbeltekst-afbeelding {
    text-align: center;
    margin: 0 0 12px 0;
}

.bijbeltekst-afbeelding img {
    width: 90%;
    height: auto;

    border: 2px solid #000000;
    border-radius: 10px;

    margin: 4px;
    box-sizing: border-box;
}

/* =========================================================
   SIDEBAR BLOKKEN
   ========================================================= */

.sidebar-blok {
    width: 95%;
    margin-left: 15px;
    margin-right: auto;
    margin-top: 18px;
    margin-bottom: 18px;

    /*margin: 0 0 20px 0;*/
    padding: 8px 14px 14px 14px;

    box-sizing: border-box;

    border: 2px solid #000000;
    border-radius: 10px;
    background: #ffffe4;*/

    font-size: 16px;
    line-height: 1.35;

    text-align: center;
}


/* =========================================================
   TITEL
   ========================================================= */

.sidebar-blok-titel {
    margin: 0;
    padding: 2px 0 4px 0;

    color: #000000;

    font-size: 18px;
    font-weight: 700;
    text-align: center;
}


/* Scheidingslijn */
.sidebar-hr {
    width: 100%;

    margin: 4px 0 14px 0;

    border: 0;
    border-top: 1px solid #777777;
}


/* =========================================================
   NIEUWS
   ========================================================= */

.sidebar-nieuws-kop {
    margin: 0 0 12px 0;
    

    color: #131483;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.25;
    text-align: center;
}


.sidebar-nieuws-inhoud {
    margin: 0;

    color: #000000;

    font-size: 16px;
    line-height: 1.35;
    background: #ffffe4;

    text-align: left;
}
.sidebar-blok sidebar-nieuws{
  width: 95%;
    margin-left:auto;
    margin-right: auto;
    
}

 
/* =========================================================
   MOBIEL
   ========================================================= */

@media screen and (max-width: 700px) {

    .sidebar-blok {
        font-size: 15px;
    }

    .sidebar-blok-titel {
        font-size: 18px;
    }

    .sidebar-nieuws-kop,
    .sidebar-nieuws-inhoud {
        font-size: 15px;
    }
}
/* =========================================================
   BIJBELVERS - ÉÉN GEHEEL
   ========================================================= */

.sidebar-bijbeltekst {
    overflow: hidden;
    text-align: center;
}


/* Afbeelding */

.bijbeltekst-afbeelding {
    text-align: center;
    margin: 0 0 20px 0;
}

.bijbeltekst-afbeelding img {
    display: block;

    width: 90%;
    height: auto;

    margin: 4px auto;

    border: 2px solid #000000;
    border-radius: 10px;

    box-sizing: border-box;
}


/* DagelijksWoord zelf krijgt GEEN eigen rand */

#dagelijkswoord {
    margin: 0;
    padding: 0 15px 15px 15px;

    border: 0;
    background: transparent;

    box-sizing: border-box;
}


/* Titel van het Bijbelgedeelte */

#dagelijkswoordtitel {
    margin: 0 0 15px 0;

    padding: 0;

    font-weight: 900;
    text-align: center;

    font-family: Arial, sans-serif;
    font-size: 24px;
}


/* Bijbeltekst */

#dagelijkswoordtekst {
    margin: 0;

    padding: 0 10px;

    font-size: 16px;
    line-height: 1;

    font-style: italic;

    text-align: left;

    background: transparent;
}

/* Rand alleen rond het volledige Bijbeltekst-blok */
.sidebar-bijbeltekst {
    border: 2px solid #000000;
    border-radius: 10px;
    box-sizing: border-box;
    background: transparent;
    width: 95%;
    margin-left:auto;
    margin-right: auto;
}

@media (max-width: 768px) {

    .site-layout {
        flex-direction: column;
    }

    .main-content {
        width: 100%;
        max-width: 100%;
    }

    .site-sidebar {
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
    }

}