html {
    scroll-behavior: smooth;
   
}



.logozoom {
    animation: zoom-in-zoom-out 0.5s ease-in 1;
    width: 100%;
    text-align: center;
}

h1 {
    
    font-size: calc(12px + 1.2vw);
    font: basis_bold;
    text-transform: uppercase;
  
    overflow: hidden;
    text-overflow: inherit;
    width: 100%;
}
h2 {
    font-family: basis_bold;
    font-size: 1.1vw;
    font-display: block;
    text-transform: uppercase;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: inherit;
    line-height:1.1vw;
   
}
h3 {
    font-family: basis_bold;
    font-size: 0.9vw;
    font-display: block;
    text-transform: uppercase;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: inherit;
    
}
.TweedeRegel {
    text-align:right;
    background-color:white;
    border-bottom:solid 1px gray;
}
.msg {
    width: 100%;
    text-align: center;
    color: red;
    background-color:lightgrey;
}
/* Popup container */
.popup {
    position: sticky;
    top: 30%;
    left: 50%;
    margin-top: -50px;
    text-align:center;
    z-index:1;
    padding:10px;
    border:1px solid black;
    background-color:white;
    border-radius:10px;
    box-shadow:10px 10px gray;

}
.footermenu {
background-color:cornflowerblue;
border-bottom-color:white;
border-width:1px;
height:45px;
}

.cookie-banner {
    position: fixed;
    bottom: 40px;
    left: 10%;
    right: 10%;
    width: 80%;
    padding: 5px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #eee;
    border-radius: 5px;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
.RadioButton {
    font-family: system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: bold;
    line-height: 0.1;
}
hr.balk {
    border: 4px solid blue;
    border-radius: 5px;
    margin-top:-2px;
    margin-bottom:-1px;
}
.basistekst {
    font-family: basis_medium;
    font-size: 1.2vw;
    width: 60%;
    left: 20%;
    position: absolute;
    height: 100%;
}
.bodytekst {
 padding:0;
 margin:0;
 color:Black;
    background-color: white;
   max-width: 1440px;
   margin:0 auto;
}

.main {
    max-width: 1440px;
    margin: 0 auto;
}

* {
    box-sizing: border-box;
}




.Pager {
    text-align: center;
    background-color: cornflowerblue;
    color: White;
    font-weight: 600;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}


    .footer {
        font-family: basis_bold;
        vertical-align: bottom;
    
        text-align: center;
        position: fixed;
        bottom: 0px;
        width: 100%;
        height: 48px;
 
        font-family: basis_light_italic;
        font-size: 12px;
        padding-top: 5px;
     
    }

.spacerfooter {
    font-family: basis_bold;
    vertical-align: bottom;
    background-color: Highlight;
    text-align: center;
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 24px;
    border-top: 2px solid Blue;
    font-family: basis_light_italic;
    font-size: 10px;
    padding-top: 5px;
}
.spacer {
height:20px;
position:relative;
width:100%;


}
.button {
    width: 80px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid black;
    float: left;
    margin-left:10px;
    margin-right:10px;
    
}
.buttonflex {
 min-width:80px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid black;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    background-color:lightgray;
    color:black;
    text-decoration:none;
    padding-left:10px;
    padding-right:10px;
}


.buttoncontainer:after {

    content: "";
    display: table;
    clear: both;
}

.buttoncont {
width:100%;
text-align:center;
margin:0 auto;
}

.HomeButton {
    width: 90%;
    background-color:dodgerblue;
    height:75px;
    margin: 0 auto;
    margin-bottom:18px;
    border-radius:18px;
    font-size:28px;
    color:white;
}
.HomeButtonAdmin {
    width: 90%;
    background-color:orangered;
    height: 75px;
    margin: 0 auto;
    margin-bottom: 18px;
    border-radius: 18px;
    font-size: 28px;
    color: white;
}

.titel {
    width: 80%;
    position: relative;
    margin-bottom: 0.2vw;
    object-fit: cover;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto;
}
.titelmenu {
    width: 80%;
    position: relative;
    margin-bottom: 0.2vw;
    object-fit: cover;
    border-bottom:solid 1px gray;
    overflow: hidden;
    margin: 0 auto;
}

.gebcontainer {

    width: 80%;
    
    position: relative;
    margin-bottom: 12px;
  
    object-fit: cover;
    border-radius: 12px;
    overflow: hidden;
    margin:0 auto;
    border:1px solid black;
}

.adminmenu {
    width: 80%;
    position: relative;
    margin-bottom: 12px;
    object-fit: cover;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto;
    border: 1px solid black;
    padding-left:12px;
}
.adminmenusub {
    width: 70%;
    position: relative;
    margin-bottom: 12px;
    object-fit: cover;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto;
    border: 1px solid black;
    padding-left: 12px;
    background-color:lightpink;
}
.admincol {
    padding-left: 12px;
    padding-right: 12px;
    font-size: calc(12px + 0.4vw);
    border-right: solid 1px grey;
}
.basisrooster {
    font-size: calc(12px + 0.2vw);
    padding-right:6px;
}
.basisroosterdag {
    font-size: calc(12px + 0.9vw);
    margin-top:6px;
}
.evenementcontainer {
    width: 80%;
    position: relative;
    margin-bottom: 12px;
    object-fit: cover;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto;
    border: 1px solid black;
}
.gebcontainerkleur {
    width: 80%;
    position: relative;
    margin-bottom: 12px;
    object-fit: cover;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto;
    border: 1px solid black;
    background-color:lightyellow;
}
.gebnaam {
    font-size:17px;
    font-weight:700;
    width:100%;
    background-color:steelblue;
    color:Black;
        padding-left:10px;
       vertical-align:top;
}
.gebfoto {
    height: 80px;
    width:80px;
    vertical-align: top;
}
    .gebfoto img {
        height: 80px;
        width:80px;
        vertical-align: top;
    }
.gebtekst {
    width:100%;
text-align:left;
}

.radioButtonList {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .radioButtonList.horizontal li {
        display: inline;
    }

    .radioButtonList label {
        display: inline;
    }

.blockjecont {
    position: relative;
    object-fit: cover;
    display: table;
}

.blockje {
    position: relative;
    padding-left: 4px;
    padding-right: 4px;
    display: table-cell;
    margin-right:4px;
}

.dienstcont {
    width: 100%;
    display: table;
   position:relative;
}
.dienst {
    padding-left: 10px;
    display: table-cell;
    vertical-align: top;
    position: relative;
}
.dienst10 {
    padding-left: 10px;
    display: table-cell;
    vertical-align: top;
    position: relative;
    width: 10%;
}
.dienst20 {
    padding-left: 10px;
    display: table-cell;
    vertical-align: top;
    position: relative;
    width: 20%;
}
.dienst30 {
    padding-left: 10px;
    display: table-cell;
    vertical-align: top;
    position: relative;
    width: 30%;
}
.dienst40 {
    padding-left: 10px;
    display: table-cell;
    vertical-align: top;
    position: relative;
    width: 40%;
}
.dienst50 {
    padding-left: 10px;
    display: table-cell;
    vertical-align: top;
    position: relative;
    width: 50%;
}
.dienst60 {
    padding-left: 10px;
    display: table-cell;
    vertical-align: top;
    position: relative;
    width: 60%;
}
.dienst70 {
    padding-left: 10px;
    display: table-cell;
    vertical-align: top;
    position: relative;
    width: 70%;
}
.dienst80 {
    padding-left: 10px;
    display: table-cell;
    vertical-align: top;
    position: relative;
    width: 80%;
}
.dienst90 {
    padding-left: 10px;
    display: table-cell;
    vertical-align: top;
    position: relative;
    width: 90%;
}
.dienstkleur10 {
    display: table-cell;
    color: darkred;
    font-weight: 500;
    padding-left: 10px;
    vertical-align: top;
    width: 10%;
    position:relative;
}



.groenebalk {
    background-color: green;
    display: table-cell;
    position: absolute;
    overflow: hidden;
    height: 6px;
    margin-top: 10px;
}
.oranjebalk {
    background-color: orange;
    position: absolute; 
    display: table-cell;
    overflow: hidden;
    height: 6px;
    margin-top: 10px;
}
.dienstkleur {
    display: table-cell;
    color: darkred;
    font-weight: 500;
    padding-left: 10px;
    vertical-align: top;
    height: 6px;
    position: relative;
}

.fotoklein {
    height: 120px;
    width: 120px;
    background-size: 120px 120px;
}

/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
    .evenementcontainer {
        width: 98%;
        position: relative;
        margin-bottom: 12px;
        object-fit: cover;
        border-radius: 12px;
        overflow: hidden;
        margin: 0 auto;
        border: 1px solid black;
    }
    h1 {
        font-size: calc(12px + 1.2vw);
        font: basis_bold;
        text-transform: uppercase;
        overflow: hidden;
        text-overflow: inherit;

        padding-left: 4px;
    }

        h2 {
            font-family: basis_bold;
            font-size: 11px;
            font-display: block;
            text-transform: uppercase;
            white-space: pre-wrap;
            overflow: hidden;
            text-overflow: inherit;
            line-height: 12px;
        }
    .main {
        left: 0;
        width:100%;
        margin:0 auto;
    }
        .basistekst {
            font-family: basis_medium;
            font-size: 12px;
            width: 98%;
            left: 0%;
            margin-left: 4px;
            position: absolute;
            height: 100%;
        }

        .tekstbox {
            width: 100%;
        }

    

        .bodytekst {
            padding-left: 0.1;
            padding-right: 0.1vw;
        }

    .titel {
        width: 85%;
        position: relative;
        margin-bottom: 0.2vw;
        object-fit: cover;
        border-radius: 12px;
        overflow: hidden;
        margin: 0 auto;
    }

    .titelmenu {
        width: 95%;
        position: relative;
        margin-bottom: 0.2vw;
        object-fit: cover;
        border-bottom: solid 1px gray;
        overflow: hidden;
        margin: 0 auto;
    }

    .gebcontainer {
        width: 95%;
        position: relative;
        margin-bottom: 12px;
        object-fit: cover;
        border-radius: 12px;
        overflow: hidden;
        margin: 0 auto;
        border: 1px solid black;
    }

    .gebcontainerkleur {
        width: 95%;
        position: relative;
        margin-bottom: 12px;
        object-fit: cover;
        border-radius: 12px;
        overflow: hidden;
        margin: 0 auto;
        border: 1px solid black;
        background-color: lightyellow;
    }
    .dienst {
        padding-left: 10px;
        display: table-cell;
        vertical-align: top;
        position: relative;
        font-size: 0.80em;
    }
    .dienst10 {
        padding-left: 10px;
        display: table-cell;
        vertical-align: top;
        position: static;
        width: 40%;
        font-size: 0.80em;
    }

    .dienst20 {
        padding-left: 10px;
        display: table-cell;
        vertical-align: top;
        position: static;
        width: 45%;
        font-size: 0.80em;
    }

    .dienst30 {
        padding-left: 10px;
        display: table-cell;
        vertical-align: top;
        position: static;
        width: 30%;
        font-size: 0.80em;
    }

    .dienst40 {
        padding-left: 10px;
        display: table-cell;
        vertical-align: top;
        position: static;
        width: 40%;
        font-size: 0.80em;
    }

    .dienst50 {
        padding-left: 10px;
        display: table-cell;
        vertical-align: top;
        position: static;
        width: 50%;
    }

    .dienst60 {
        padding-left: 10px;
        display: table-cell;
        vertical-align: top;
        position: static;
        width: 60%;
    }

    .dienst70 {
        padding-left: 10px;
        display: table-cell;
        vertical-align: top;
        position: static;
        width: 70%;
    }

    .dienst80 {
        padding-left: 10px;
        display: table-cell;
        vertical-align: top;
        position: static;
        width: 20%;
    }

    .dienst90 {
        padding-left: 10px;
        display: table-cell;
        vertical-align: top;
        position: static;
        width: 90%;
    }

    .dienstkleur10 {
        display: table-cell;
        color: darkred;
        font-weight: 500;
        padding-left: 10px;
        vertical-align: top;
        height: 6px;
        width: 10%;
    }



@font-face {
    font-family: 'basis_bold';
    src: url('fonts/poppins-bold-webfont.woff2') format('woff2'), url('fonts/poppins-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




    @font-face {
        font-family: 'basis_bold_italic';
        src: url('fonts/poppins-bolditalic-webfont.woff2') format('woff2'), url('fonts/poppins-bolditalic-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }




    @font-face {
        font-family: 'basis_extrabold';
        src: url('fonts/poppins-extrabold-webfont.woff2') format('woff2'), url('fonts/poppins-extrabold-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }




    @font-face {
        font-family: 'basis_extrabold_italic';
        src: url('fonts/poppins-extrabolditalic-webfont.woff2') format('woff2'), url('fonts/poppins-extrabolditalic-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }




    @font-face {
        font-family: 'basis_italic';
        src: url('fonts/poppins-italic-webfont.woff2') format('woff2'), url('fonts/poppins-italic-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }




    @font-face {
        font-family: 'basis_light';
        src: url('fonts/poppins-light-webfont.woff2') format('woff2'), url('fonts/poppins-light-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }




    @font-face {
        font-family: 'basis_light_italic';
        src: url('fonts/poppins-lightitalic-webfont.woff2') format('woff2'), url('fonts/poppins-lightitalic-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }




    @font-face {
        font-family: 'basis_medium';
        src: url('fonts/poppins-medium-webfont.woff2') format('woff2'), url('fonts/poppins-medium-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }




    @font-face {
        font-family: 'basis_medium_italic';
        src: url('fonts/poppins-mediumitalic-webfont.woff2') format('woff2'), url('fonts/poppins-mediumitalic-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }




    @font-face {
        font-family: 'basis_regular';
        src: url('fonts/poppins-regular-webfont.woff2') format('woff2'), url('fonts/poppins-regular-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }




    @font-face {
        font-family: 'basis_semibold';
        src: url('fonts/poppins-semibold-webfont.woff2') format('woff2'), url('fonts/poppins-semibold-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }




    @font-face {
        font-family: 'basis_semibold_italic';
        src: url('fonts/poppins-semibolditalic-webfont.woff2') format('woff2'), url('fonts/poppins-semibolditalic-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }