html, body{
    background: #F8F7F2;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Open Sans', sans-serif;
    height:100%;
    min-width: 320px;
    padding:0px;
    margin:0px;}

body{
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-font-smoothing: antialiased;
    min-height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-right: 0 !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;}

/*.tekstblokken .tekstblok:last-child {
  display:none !important;
}*/

  @media (max-width: 1185px) {
    #tekstblok_home .tekstblok {
      min-width:100% !important;
    }
    #tekstblok_home .tekstblokken {
      padding-top:60px;
    }
    #tekstblok_home .tekstblokken{
      margin: 0 auto !important;
      width:90% !important;
    }
  }
  @media (min-width: 1184px) {
    #tekstblok_home .tekstblokken {
        position: relative;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      margin:0 !important;
      padding-top:60px;
    }
 
	#tekstblok_home {
      margin:0 auto;
    }
    
    #tekstblok_home .tekstblok {
      background: #D2E8E6;
            position: relative;
            display: flex;
            margin:15px;
            border-radius: 10px;
            padding:30px;
    }
  }

* > *:last-child, ul:last-child{
    margin-bottom: 0;}

.none{
  display: none;}

.ccm-block-calendar-event-dialog-details .btn-primary {
  display:none;
}

.showmobile{display: none;}
.hidemobile{display: block;}

.sr-only{display:
  none;}

.anchor{
    display: block;
    position: relative;
    top: -150px;
    visibility: hidden;}

.wrapper{
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-flex-grow: 1;
    -webkit-flex-shrink: 0;
    -webkit-flex-basis: auto;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    position: relative;}

img{margin-bottom: 15px; max-width: 100%; height: auto;}
.material-icons{vertical-align: middle; font-size: 1em;}

.maxwidth{
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;}

.spacer{
    display: block;
    position: relative;}

.screen-reader-only {
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
   width: 1px;}

   .screen-reader-only:focus{
           background:rgba(0,0,0,0.8);
           box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.2);
           clip: auto !important;
           clip-path: none;
           color: #fff;
           display: flex;
           justify-content: center;
           align-items: center;
           font-size: 14px;
           font-size: 0.875rem;
           font-weight: bold;
           height: auto;
           left: 5px;
           line-height: normal;
           padding: 15px 23px 14px;
           text-decoration: none;
           top: 5px;
           width: auto;
           z-index: 100000;}

           .screen-reader-only.skip-link:focus{
               position: fixed;
               width: 100vw;
               top: 0;
               left:0;
               border-radius: 0;
               height: 90px;}

.leesmeer{
    background: #4fc9bf;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 700;
    align-self: flex-start;
    display: table;
    color: #000;
    margin-bottom: 30px;
    border:2px solid #4fc9bf;
    padding: 15px 20px;}

        .leesmeer:hover, .leesmeer:focus{
            box-shadow: 0 0 0 0 rgba(0,0,0,0)!important;
            color: #000;
            border-color: #ffc033;
            background: #ffc033;}

.leesmeer a{
    font-size: 1em;}

    .leesmeer .material-icons{
        font-size:1em;}

        .leesmeer span.material-icons + span,
        .leesmeer span.material-icons-outlined + span{
            margin-right: 15px;}

        .leesmeer span + span.material-icons,
        .leesmeer span + span.material-icons-outlined{
            margin-left: 15px;}

    .leesmeer span.material-icons:first-child,
    .leesmeer span.material-icons-outlined:first-child{
        margin-left: 0;
        margin-right: 15px;}

    .leesmeer span.material-icons:last-child,
    .leesmeer span.material-icons-outlined:last-child{
        margin-right: 0;
        margin-left: 15px;}

.leesmeer + .leesmeer{
    margin-top: -20px;}

.leesmeer.lminvert{
    background: rgba(0,0,0,0);}

.leesmeer .fileinfo{
    font-weight: 400;
    font-size: 0.9em;
    margin-left: 10px;}

a[href$=".pdf"]:before {
    width:24px;
    height:24px;
    margin-right: 10px; background:url('../images/bestandstype/pdf.png');
    background-size: contain;
    display:inline-block;
    vertical-align: middle;
    content:' ';}

    a[href$=".pdf"]:after {font-weight: 400; margin-left: 5px;  content: " (PDF)"; }
    a[href$=".pdf"][data-size]:after {font-weight: 400; margin-left: 5px;  content: " (PDF, " attr(data-size) ")"; }


.groen{color: #008378;}
.geel{color: #ffc033;}
.grijs{color: #636361;}
.roze{color: #e52f57;}

/* -------------------- ALERT MESSAGE -------------------- */
.msgwrap{
    position: relative;}


/* -------------------- Kolommen -------------------- */
.kolommen{
	position: relative;
    width: calc(100% + 60px);
    margin: 0 -30px 30px;
    flex-wrap: wrap;
    display: flex;}

    .kolommen > div{
		position: relative;
        display: flex;
        margin: 30px!important;
        flex-direction: column;
        min-width: 320px;
        flex:1 1 0;}

    .kolommen > article{
		position: relative;
        display: flex;
        margin: 30px;
        flex-direction: column;
        min-width: 315px;
        flex:1 1 0;}

        .kolommen > article + article{
            margin-top: 30px;}

            .blokken3 > article + article{
                margin-top: 30px;}

    .kolommen .slider{
        height: auto;}

    .kolommen .leesmeer{
        align-self: flex-start;}

	.kolommen video{
		object-fit:cover;}


/* -------------------- ALERT -------------------- */
    .alert{
        display: flex;
        justify-content: center;
        max-width: 1280px;
        width: calc(100% - 30px);
        margin: 15px;
        text-align: center;}

        .alert > span{
            padding: 5px;
            margin-right: 15px;}

        .alert > p{
            margin: 0;}

.alert > button {
}

    .alert-dismissible .btn-close{
        color: #055160;
        padding: 26px;}


/* -------------------- HEADER -------------------- */
header.navheader{
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: #FFC033;}

    header.navheader:before, header.navheader:after{
        position: absolute;
        content: '';
        bottom: 0;
        background-position: bottom;
        background-size: contain;
        background-repeat: no-repeat;
        filter: grayscale(1);
        mix-blend-mode:color-burn;
        width: 100%;
        height: 100%;}

        header.navheader:before{
            left: 0;
            background-position: bottom left;
            background-image: url(../images/bg-links.svg);}

        header.navheader:after{
            right: 0;
            background-position: bottom right;
            background-image: url(../images/bg-rechts.svg);}

        header.navheader .btn-primary, header.navheader .btn-primary:hover, header.navheader .btn-primary:focus{
            border-color: rgba(0,0,0,0);
            background: rgba(0,0,0,0);}


/* -------------------- NAV -------------------- */
.navbar{
    position: relative;
    z-index: 100;
    padding: 30px;
    width: 100%;}

    .vvp .navbar{
        padding: 15px 30px;}

    .navheader{
        display: flex;}

        .navbar-brand{
            white-space: normal;}

            .logo{
                background: #ffc033;
                width: 200px;
                font-weight: 900;
                word-spacing: 100vw;
                line-height: 1em;
                font-size: 1.1em;
                padding: 15px;
                color: #000;
                border:5px solid #000;
                text-transform: uppercase;
                display: block;}

                .vvp .logo {
                    width: 150px;
                    font-size: 0.7em;
                    padding: 10px;
                    border: 3px solid #000;}


    ul.navbar-nav li{
        list-style: none;}

.nav-link{
    font-weight:600;
    color: #000;}

    .nav-link:focus, .nav-link:hover{
        color: #000;}

        .nav-selected a, .nav-path-selected a{
            font-weight: 900;}

    .dropdown-menu[data-bs-popper]{
        margin: 0;
        padding:15px;
        top: 100%;
        left: auto;
        right: 0;}

    * .navbar-nav .nav-link{
        margin: 0 10px;}

    .navbar-nav .nav-link.dropdown-toggle {
        padding-right: 30px;}

        .dropdown-toggle::after{
            content: '\e5cf';
            border:0;
            position: absolute;
            font-family: 'Material Icons';
            height: 100%;}

.navbar-toggler span.material-icons{
    font-size: 1.3em;}

    .nt-txt{
        font-size: 0.7em;
        text-transform: uppercase;}

    .navbar-toggler:focus{
        outline: 1px dotted #000;
        box-shadow: none;}



/* -------------------- NAVSCROLLED -------------------- */
.navscrolled{}


/* -------------------- NAV FIGUREN -------------------- */
.navfig{
    pointer-events: none;
    position: relative;
    display: flex;
    justify-content:space-around;
    width: 100%;
    z-index: 10;
    max-width: 1280px;
    margin: -50px auto 0;
    height: 100px;}

    .navfig img{
        height: 100%;
        position: relative;
        max-height: 100px;}

/*
        .navfig img:nth-child(1){left: calc(28% - 6vw); height: calc(50% + 3vw); z-index: 10;}
        .navfig img:nth-child(2){left: calc(38% - 4vw); height: calc(80% + 2vw); z-index: 20;}
        .navfig img:nth-child(3){left: calc(45% - 2vw); height: calc(100% + 1vw); z-index: 30;}
        .navfig img:nth-child(4){left: calc(50%); height: calc(100% + 3vw); z-index: 40;}
        .navfig img:nth-child(5){left: calc(55% + 2vw); height: calc(100% + 1vw); z-index: 30;}
        .navfig img:nth-child(6){left: calc(62% + 4vw); height: calc(80% + 2vw); z-index: 20;}
        .navfig img:nth-child(7){left: calc(72% + 6vw); height: calc(50% + 3vw); z-index: 10;}
*/



/* -------------------- SLIDER -------------------- */
#slider{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 0;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    display: block;}

        .home #slider{
            background: #3e3d40;}


    .ccm-image-slider-container{
        overflow: hidden;
        height: 100%;
        display: block;
        position: relative;}

        .ccm-image-slider-inner{
            position: relative;
            min-height: 250px;}

        .ccm-image-slider, .ccm-image-slider-inner, .rslides, .rslides > li{
            position: relative;
            width: 100%;
            height: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;}

    ul.rslides{
        overflow: hidden;
        margin:0px;
        padding: 0px;
        list-style: none;}

        ul.rslides > li > img{
            top:0;
            left: 0;
            position: absolute;
            width: 100%;
            opacity: 1;
            height: 100%;
            z-index: 0;
            -o-object-fit: cover;
               object-fit: cover;}

                .home ul.rslides > li > img{
                    opacity: 0.85;}

            ul.rslides > li > .gradient{
                position: absolute;
                bottom: 0;
                left: 0;
                content: '';
                width: 100%;
                height: 250px;
                background: -moz-linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
                background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
                background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);}

    .slidercontent{
        background: -moz-linear-gradient(145deg, rgba(130,18,71,1) 0%, rgba(229,47,87,0.8) 100%);
        background: -webkit-linear-gradient(145deg, rgba(130,18,71,1) 0%, rgba(229,47,87,0.8) 100%);
        background: linear-gradient(145deg, rgba(130,18,71,1) 0%, rgba(229,47,87,0.8) 100%);
        border-radius: 10px;
        display: -webkit-box;
        display: -ms-flexbox;
        position: relative;
        display: flex;
        align-self: center;
        text-align: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: 60%;
        max-width: 640px;
        padding: 45px;
        z-index: 20;}

        .slidercontent span.title{
            position: relative;
            font-size: 1.7em;
            font-weight: 700;
            line-height: 1.1em;
            color:#FFF;
            margin-bottom: 15px;
            text-shadow: none;
            padding: 0px;
            z-index: 5;}

        .slidercontent p{
            position: relative;
            color: #FFF;
            font-weight: 300;}

            .slider-text{
                margin: 0 auto 30px;}

        .slidercontent .leesmeer{
            background: rgba(0,0,0,0);
            border-color: #FFF;
            color: #FFF;}

        #hideBtn{
            position: absolute;
            padding: 15px;
            cursor: pointer;
            color: #FFF;
            top:0;
            right:0;
            font-size: 1.4em;}

        .slidercontrol{}

            .slidercontrol a{
                color:#000;
                text-shadow: none;}


/* -------------------- SLIDERNAV -------------------- */
.ccm-image-slider-inner .prev, .ccm-image-slider-inner .next, .rslides_nav{
        background: none;}

    .rslides_nav{
        top:50%!important;
        margin-top: 0px!important;
        transform: translateY(-50%);
        opacity: 1!important;}

    .ccm-image-slider-inner .next:after, .ccm-image-slider-inner .prev:after{
        font-family: 'Material Icons';
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        display: block;
        font-size: 3em;
        opacity: 1;
        background: none;
        color: #FFF;
        text-decoration: none;}

        .ccm-image-slider-inner .next:after{
            right:10px;
            opacity: 1;
            content:'\e315';}

        .ccm-image-slider-inner .prev:after{
            left:10px;
            opacity: 1;
            content:'\e314';}

            .ccm-image-slider-inner .next:hover:after{
                opacity: 1;
                color: #e52f57;}

            .ccm-image-slider-inner .prev:hover:after{
                opacity: 1;
                color: #e52f57;}

.wrapper .rslides_tabs {
    position: absolute;
    z-index: 1000;
    bottom: 0;}

    .wrapper .rslides_tabs li a {
        background:rgba(0,0,0,0);
        border: 2px solid #FFF;
        width: 10px;
        height: 10px;}

    .wrapper .rslides_tabs li.rslides_here a{
        border:none;
        background: #FFF;}


/* -------------------- MAIN -------------------- */
main{
    width: 100%;}

    .vvp main{
        position: relative;
        padding: 30px 30px 120px 30px;
        width: 100%;}

.zoekveld{
    padding: 45px 0;}

    .zoekveld form{
        width: 80%;
        margin: 0 auto;
        display: flex;}

        .zoekveld input{
            border: 1px solid rgba(0,0,0,0.1);
            border-radius: 100px 0 0 100px;
            padding: 15px 20px;
            -webkit-appearance:none;
            -moz-appearance:none;
            appearance:none;
            flex:1;}

            .zoekveld input:focus-within{
                border-color: #ffc033;}

            .zoekveld input:focus::placeholder {
              color: transparent;}

        .zoekveld button{
            color: #000;
            padding: 0 60px 0 40px;
            border-radius: 0 100px 100px 0;
            border: 1px solid #4FC9BF;
            background: #4FC9BF;
            display: flex;
            align-self: center;
            height: 100%;
            align-items: center;}

            .zoekveld button .material-icons {
                font-size: 1.4em;
                margin-right: 10px;}


/* -------------------- THEMA GEBIED -------------------- */
.themagebied{
    display: flex;
    align-items: center;
    flex-direction: column;}

    .themaintro{
        text-align: center;
        width:60%;
        margin: 60px auto 45px;}

    .themaintro h1{
        font-size: 2.2em;
        font-weight: 900;
        margin-bottom: 30px;
        color: #237B73;}

    .themablokken{
        position: relative;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin: 0 -60px;}

        .themablok{
/*            overflow: hidden;*/
            border: 1px solid rgba(0,0,0,0.1);
            position: relative;
            display: flex;
            /* flex:1 1 0; */
            /* min-width: 320px; */
/*            width:calc(100% / 3 - 60px);*/
            background: #FFF;
            border-radius: 10px;
            padding:30px;
            margin: 30px;}

                .themablok:last-child{
                    margin: 30px;}

            .themaimg{
                position: relative;
                display: flex;
                align-items: flex-end;
                margin:0 30px -30px 0;
                width: calc(30% - 30px);}

                .themaimg img{
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    width: auto;
                    height: 140px;
                    bottom: 0px;
                    max-width: none;}

            .themacont{
                display: flex;
                flex-direction: column;
/*                height: 100%;*/
/*                align-self: flex-start;*/
                align-self: center;
                width: calc(70% - 30px);}

                .themacont h2{
                    display: flex;
                    align-items: center;
                    font-weight: 700;
                    margin-bottom: 30px;
                    font-size: 1.1em;}

                .themacont p{
                    flex:1;
                    line-height: 1.7em;
                    margin-bottom: 10px;}

                .themacont a{
                    color: #000;
                    position: relative;
                    padding: 0 30px 0 0;}

                    .themacont a span{
                        position: absolute;
                        left: 0;
                        top: 3px;
                        font-size: 1.4em;}

                .themacont a span{
                    position: absolute;
                    left: 0;
                    top: 3px;
                    font-size: 1.3em;}

                        .themacont a span:last-child{
                            left: auto;
                            right: 0;}

                        .themacont a + a{
                            margin-top: 20px;}

                            .themacont a + a:after{
                                position: absolute;
                                left: 0;
                                top: -9px;
                                content: '';
                                width: 100%;
                                border-top:1px dotted rgba(0,0,0,0.4);}

                        .themacont a:hover, .themacont a:focus{
                            color: #008378;}



/* -------------------- NIEUWSBLOKKEN -------------------- */
.nieuwsblokken{
    padding: 0 0 30px 0;
    margin: 0 -60px;}

    .nieuwsblok{
        position: relative;
        background: #FFFFFF;
        display: flex;
        flex:1 1 0;
        border-radius: 10px;
        overflow: hidden;
        min-width: 320px;
        /* width:calc(100% / 2 - 60px); */
        margin: 30px!important;}


        .nieuwswrap{
            width: calc(100% / 3 * 2);
            flex-wrap: wrap;
            display: flex;}

            .nb-img{
                position: relative;
                overflow: hidden;
                margin: 0;
                z-index: 0;
                display: flex;
                overflow: hidden;
                flex-direction: column;
                height: 100%;
                width: 40%;}

                .nb-img img{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top:0;
                    left: 0;
                    object-fit: cover;}

            .nb-cont{
                background: #D2E8E6;
                width: 60%;
                z-index: 10;
                border-radius: 0 10px 10px 0;
                display: flex;
                flex-direction: column;
                padding: 30px 30px;
                color: #000;}

                .nb-cont h3{
                    font-weight: 700;
                    font-size: 1.1em;}

                .nb-cont p{
                    flex:1;
                    font-size: 1em;
                    line-height: 1.8em;
                    font-weight: 500;}


                .nb-cont > a{
                    width: 100%;
                    padding: 0;
                    text-decoration: none;
                    display: flex;}

                    .nb-cont > a span{
                        flex:1;
                        text-decoration: underline;}

                        .nb-cont > a span[class^='material']{
                            flex: none;
                            text-decoration: none;}

                .nb-cont .leesmeer.lminvert{
                    display: flex;
                    border-color: #FFF;
                    background: #FFF;
                    margin: 0 auto;
                    color: #000;}

        .agendawrap{
            padding: 30px;
            display: flex;
            width: calc(100% / 3);}

            .agenda{
                display: flex;
                flex-direction: column;
                padding: 30px;
                border-radius: 10px;
                background: #d2e8e6;
                width: 100%;}

                .agenda h2{
                    font-weight: 700;
                    font-size: 1.1em;}

                .agenda .fc h2{
                    display: block;
                    margin:10px 0 5px!important;
                    font-weight: 700;
                    font-size: 1.1em;}

                .agenda .fc-toolbar.fc-header-toolbar{
                    margin: 0;}

            .agenda .ccm-block-calendar-wrapper{
                display: flex;
                flex: 1;
                flex-direction: column;}

                 .agenda .fc-view-container{
                     border-radius: 6px;
                     overflow: hidden;}

                .agenda .fc-list-heading-main{
                    font-family: monospace;
                    width: 2ch;
                    text-transform: uppercase;
                    overflow: hidden;
                    white-space: nowrap;}

            .agenda .fc-list-table{
                background: #fff;}

.maincontent .ccm-block-calendar-event-date-time{
    background: #ffc033;
    color: #000;
    padding: 15px 30px;
    border-radius: 100px;
    font-size: 1.3em;
    margin: 20px 0px 10px;
    display: table;
    font-weight: 700;}

/* -------------------- HOME MAIN -------------------- */
.hmcwrapper{
    background: #FFF;}

    .hmc{
        padding: 90px 0 120px;
        width:60%;}

        .hmc h3{
            font-size: 2.2em;
            font-weight: 900;
            margin-bottom: 30px;
            color: #237B73;}


/* -------------------- SIDEBAR -------------------- */
.sidebar{
    min-width: 320px;
    will-change: min-height;}

    #sidebar{
        width: 100%;}

        .sidebar__inner{
            transform: translate(0, 0);
            transform: translate3d(0, 0, 0);
            will-change: position, transform;
            overflow:auto;
            border-radius: 15px;
            padding: 30px;
            max-width: 320px!important;
            background: #FFF;}

    .sidebar__inner > ul + ul {
        margin-top: 10px;}

    .imgcloud{
        background: #F4F2EA;
        display: flex;
        border-radius: 100%;
        margin-bottom: 30px;
        align-items: flex-end;
        justify-content: center;
        position:relative;
        width: 100%;}

            .imgcloud:before {
                content: '';
                position: absolute;
                right: 0;
                top: 15%;
                width: 0;
                height: 0;
                border-left: 20px solid transparent;
                border-right: 20px solid transparent;
                border-top: 50px solid #F4F2EA;}

            .imgcloud:after {
                content: '';
                display: block;
                padding-bottom: 100%;}

        .imgcloud img{
            clip-path: circle(50.0% at 50% 50%);
            position: absolute;
            object-fit: contain;
            width: 100%;
            height: 100%;
            padding: 30px 30px 0 30px;
            object-position: bottom;}

    .sidebar ul{
        margin: 0;
        padding: 0;}

        .sidebar ul li{
            display: block;
            list-style: none;
            margin: 0;
            padding: 0;}

        .sidebar ul li + li{
            margin: 10px 0 0 0;}

            .sidebar ul li a{
                padding: 12px 20px;
                display: flex;
                align-items: center;
                background: #F4F2EA;
                color: #000;
                font-weight: 600;
                text-decoration: none;
                border-radius: 100px;}

                .sidebar ul li a:hover, .sidebar ul li a:focus{
                    color: #000;
                    background: #ffc033;}

                .sidebar a span.material-icons-outlined{
                    display: block;
                    margin: 0 10px 0 0;
                    font-size: 1.1em;}

        .sidebar .nav-selected a, .sidebar .nav-path-selected a{
            font-weight: 700;
            background: #ffc033;}

.breadcrumbs{
    display: block;
    margin-bottom: 30px;}

    .breadcrumb{
        padding: 0px;
        margin: 0px;}

        .breadcrumb-item a{
            font-size: 0.9em;
            text-decoration: none;
            color: #636361;}

            .breadcrumb-item.active{
                font-weight: 700;}

                .breadcrumb-item.active a{
                    color: #636361;
                    text-decoration: none;}

.maincontent{
    padding: 60px 30px;
    margin-left: 45px;
    flex: 1;}

.sim .maincontent{
    margin-left: 0;}


    .maincontent header{
        display: block;
        margin-bottom: 30px;}

        .pretitle{
            font-size: 1em;
            font-weight: 700;
            margin-bottom: 10px;
            display: block;
            text-transform: uppercase;
            color: #1c645d;}

        .maincontent h1,
        .maincontent h2.currentpage{
            font-weight: 700;
            color: #008378;
            display: block;
            margin-bottom: 5px;
            text-transform:none;
            font-size: 2em;}

.onderwerpen{
    display: block;
    margin-bottom: 45px;
    position: relative;}

    .onderwerpen .btn{
        position: relative;
        width: 100%;
        border-radius: 100px;
        display: flex;
        justify-content: space-between;
        padding:15px 30px;
        white-space: normal;
        border: 1px solid rgba(0,0,0,0.1);
        background: #FFF;}

        .onderwerpen .btn:after{
            vertical-align: middle;
            position: relative;}

        .onderwerpen .dropdown-menu.show{
            padding: 15px;
            inset:auto!important;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            border: 1px solid rgba(0,0,0,0.1);
            display: table-column-group;
            position: absolute!important;
            top: 65px!important;
            left: 0px!important;
            transform: none!important;
            width: 100%;}

            .onderwerpen .dropdown-menu.show li + li {
                padding-top: 5px;
                margin-top: 5px;
                border-top: 1px solid rgba(0,0,0,0.1);}

.mobilesubmenu .btn{
    background: #ffc033;}

.maincontent article{
    display: flex;
    flex-direction: column;}

    .maincontent article h3{
        font-size: 1.2em;
        line-height: 1.5em;
        margin-bottom: 30px;
        position: relative;}

        .maincontent article h3 a{
            padding-left: 30px;
            position: relative;}

    .maincontent article h4{
        font-size: 1.1em;
        margin-bottom: 10px;
        position: relative;}

    .maincontent article ul{
        padding:0 0 0 5px;
        margin: 0 0 20px 15px;}

        .maincontent article li{
            line-height: 1.7em;}

            .maincontent article ul li + li{
                margin: 5px 0 0 0;}

.maincontent > article + article, .maincontent > article + .kolommen, .maincontent > .kolommen + article{
    margin-top: 45px;}

    .anchortitel{
        font-size: 1.2em;
        padding-left: 34px;
        margin-bottom: 30px;
        position: relative;}

    .anchorlink{
        position: absolute;
        left: 0;
        display: inline-block;
        margin-right: 15px;
        width: 20px;
        height: 20px;}

        .anchorlink:after{
            opacity: 0.3;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%, -50%);
            content: '';
            height: 20px;
            width: 20px;
            display: block;
            background: url(../images/anchorlink.svg) no-repeat;}

    .blok-wit{
        border-radius: 10px;
        background: #FFF;
        padding: 45px;
        border: 1px solid rgba(0,0,0,0.1);}

    .blok-geel{
        border-radius: 10px;
        background: #ffc033;
        padding: 45px;}

    .blok-groen{
        border-radius: 10px;
        color: #FFF;
        background: #237b73;
        padding: 45px;}

    [class*="blok-"]+[class*="blok-"] {
         margin-top: 15px;}

/*
        .ccm-custom-style-container.blok-geel,
        .ccm-custom-style-container.blok-wit,
        .ccm-custom-style-container.blok-groen{
            padding: 0 30px;}
*/


.activiteiten{
    margin: 15px 0;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;}

    .activiteiten > h3{
        font-size: 1.7em;
        margin-bottom: 0!important;
        width: 100%;}

    .activiteitenwrapper{
        position: relative;
        width: calc(100% + 60px);
        display: flex;
        flex-wrap: wrap;
        margin: 0 -30px;}

        .activiteit{
            border: 1px solid rgba(0,0,0,0.1);
            position: relative;
            display: flex;
            flex-direction:row!important;
            flex:1 1 0;
            min-width: 320px;
            background: #FFF;
            border-radius: 10px;
            padding:30px;
            margin: 30px;}

                @media (max-width: 1185px) {
                    .activiteit:last-child{
                        max-width: calc(100%);}
                }
                @media (min-width: 1184px) {
                    .activiteit:last-child{
                        max-width: calc(50% - 60px);}
                }

                .activiteit:last-child{
                    margin-bottom: 30px;}



            .act-img{
                position: relative;
                display: flex;
                align-items: flex-end;
                margin:0 30px -30px 0;
                width: calc(30% - 30px);}

                .act-img img{
                    position: absolute;
                    left:50%;
                    transform: translateX(-50%);
                    width: auto;
                    max-width: none;
                    height: 130px;}

            .act-cont{
                display: flex;
                flex-direction: column;
                height: 100%;
                align-self: flex-start;
                margin-right: 45px;
                flex: 1;
                width: calc(70% - 30px);}

                .act-cont h2{
                    font-weight: 700;
                    font-size: 1.2em;}

                .act-cont p{
                    flex:1;
                    line-height: 1.7em;
                    margin-bottom: 10px;}

                    .act-cont a.act-link{
                        display: flex;
                        text-decoration: none;
                        align-self: flex-start;
                        border-radius: 30px;
                        padding: 12px 20px;
                        color: #000;
                        border: 1px solid rgba(0,0,0,0.1);
                        background: #F4F2E9;}

                    .act-cont a.act-link:hover, .act-cont a.act-link:focus{
                        text-decoration: none;
                        align-self: flex-start;
                        border-radius: 30px;
                        padding: 12px 20px;
                        color: #000;
                        background: #F4F2E9;}

                .act-cont a span[class*="material-icons"]:first-child{
                    vertical-align: middle;
                    margin-right: 5px;}

                .act-cont a span[class*="material-icons"]:last-child{
                    position: absolute;
                    padding: 10px;
                    transform: translateY(-50%);
                    right: 15px;
                    font-size: 1.6em;
                    border-radius: 100px;
                    top:50%;}

                    .act-cont a:hover, .act-cont a:focus{
                        color: #000000;}

                .maincontent article .act-cont ul{
                    margin-bottom: 15px;}

.tekstblokken{
    width:calc(100% + 60px);
    margin: 0 -30px;
    max-width:1280px;
    display: flex;
    flex-wrap: wrap;}

    .tekstblok{
        border-radius: 10px;
        display: flex;
        min-width: 320px;
        flex-direction: column;
        width: 100%;
        background: #FFF;
        padding: 45px;
        overflow:hidden;
        text-overflow:ellipsis;
        overflow-wrap: break-word;
        border: 1px solid rgba(0,0,0,0.1);
        margin: 30px!important;
        flex:1 1 0;}

        .tekstblok .leesmeer{
            align-self: flex-start;}

    .tekstblok h4{
        margin: 0 0 15px 0;
        font-size: 1.1em;}


.linkblok{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0 -15px;}

    .linkdescription{
        position: relative;
        background: #FFF;
        min-width: 320px;
        border-radius: 10px;
        margin: 15px;
        box-shadow: 0 0 10px rgba(0,0,0,0.05);
        border: 1px solid rgba(0,0,0,0.1);
        padding: 20px 20px 20px 75px;
        flex: 1 1 0;}

        .linkdescription a.leesmeer{
            color: #008378;
            background: none;
            width: 100%;
            border: 0;
            padding: 0 0 10px 0;
            margin: 0 0 10px 0;
            border-bottom: 1px solid rgba(0,0,0,0.1);
            border-radius: 0;}

        .linkdescription a span.material-icons{
            position: absolute;
            top:22px;
            left: 30px;
            font-size: 1.4em;}

            .linkdescription a.externallink{
                }

            .linkdescription p{
                font-style: italic;
                font-size: 0.9em;
                line-height: 1.6em;}


.mobilesubmenu{
    margin: 0 0 10px 0;
    display: none;}

.dropdown-item{
    white-space: normal;}


.dropdown-item.active, .dropdown-item:active {
    color: #000000;
    border-radius: 3px;
    text-decoration: none;
    background-color: #ffc033;}


/* -------------------- DATUM TRAININGS BLOKKEN -------------------- */
.dateblock{
    position: relative;
    display: flex;
    border-radius: 5px;
    flex-direction:column;}

        .dateblock + .dateblock{
            margin-top: 30px;}

    .maincontent .dateblock ul{
        padding: 0;
        margin: 0;
        list-style: none;}

        .dateblock ul li + li{
            margin-top: 6px;}

            .dateblock ul li p{
                line-height: 1.6em;
                display: inline;}

                .dateblock ul li a{
                    color: #FFF;}

            .dateblock ul li:hover{
                filter: contrast(0.9);
            }

    .dateblock h4{
        width: 100%;
        font-size:1.1em;
        border-bottom: 1px solid #0E7B70;
        margin: 0 0 15px 0;
        padding: 0 0 15px 0;}

        .db-alg{
            color: #FFF;
            background:#0F8378;
            padding: 30px 30px 30px 90px;
            border:1px solid #0E7B70;}

            .db-alg:after{
                content: 'info';
                font-family: 'Material Icons Outlined';
                background:#0E7B70;
                color: #4FADA5;
                width: 60px;
                display: flex;
                justify-content: center;
                height: 100%;
                padding-top: 20px;
                font-size: 30px;
                position: absolute;
                left: 0;
                top: 0;}

        .db-dates{
            color: #000;
            background:#FFF;
            padding: 30px 30px 30px 90px;
            border:1px solid #F2F1EF;}

            .db-dates:after{
                content: 'event';
                border-right: 1px solid #F2F1EF;
                font-family: 'Material Icons Outlined';
                background:#FDFDFC;
                color: #ACA69E;
                width: 60px;
                display: flex;
                justify-content: center;
                height: 100%;
                padding-top: 20px;
                font-size: 30px;
                position: absolute;
                left: 0;
                top: 0;}

                .db-dates h4{
                    color: #0F8378;
                    border-color: #DDDBD8;}

                .db-dates h5{
                    display: flex;
                    align-items: center;
                    color: #000;
                    letter-spacing: 0.04em;
                    font-size: 0.9em;
                    margin-bottom: 15px;
                    text-transform: uppercase;}

                    .db-dates h5 span{
                        font-size: 1.2em;
                        margin-right: 15px;}

                .maincontent .db-table{
                    display: flex;}

                    .maincontent .db-table > div:first-child{
                        margin-right: 30px;}

                    .maincontent .db-table > div:last-child{
                        flex:1;}

                        .maincontent .db-table ul{
                            margin: -5px -5px 20px;
                            display: flex;
                            flex-wrap: wrap;}

                        .maincontent .db-table li{
                            margin: 5px;
                            padding: 4px 15px;
                            border-radius: 30px;
                            border:1px solid #D0CDC9;
                            background:#FFF;}

                            .maincontent .startdatum li{
                                color: #FFF;
                                padding: 4px 15px;
                                border-radius: 30px;
                                border-color: #0F8378;
                                background:#0F8378;}

                    .db-info{
                        width: 100%;
                        flex: 1;}

                        .dateblock .db-info li a{
                            color: #0F8378;}


                        .db-info .bold{
                            display:block;
                        }

                        .maincontent .db-info ul{
                            display: flex;
                            margin: -5px;
                            flex-wrap: wrap;}

                            .maincontent .db-info ul li{
                                margin: 5px;
                                flex:0 0 calc(50% - 10px);
                                position: relative;
                                padding: 10px 10px 10px 40px;
                                background: #FDFDFC;
                                border:1px solid #F2F1EF;}

                                .maincontent .db-info ul li span.material-icons{
                                    position: absolute;
                                    top: 12px;
                                    left: 12px;
                                    font-size: 1.2em;}

/* -------------------- FOOTER -------------------- */
footer{
    position: relative;
    font-size: 1em;
    background: #D2E8E6;}

    footer ul {
        display: flex;
        justify-content: center;
        align-items: center;
        list-style: none;
        margin: 0;
        font-size: 0.9em;
        padding: 0;}

    footer ul li{
        margin: 10px!important}

    footer a {
        color: #000;}

        footer .ini a{
            color: #FFF;}

    footer h5 {
        margin-bottom: 15px;
        font-size: 1.1em;}

    .ini{
        color: #FFF;
        background: #237b73;}

        .initxt{
            width: 100%;
            text-align: center;
            padding: 30px;
            font-size: 0.85em;
            margin: 0 auto;}

        .initxt > section{
            margin: 0 auto;}

.figrow{
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    width: calc(100% - 60px);
    max-width: 1280px;
    display: flex;
    justify-content: space-around;}

    .figrow img{
        margin: 0;
        align-items: flex-end;
        max-width: 80px;
        max-height: 80px;}

.ftr-cols{
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;}

    .ftr-col{
        min-width: 320px;
        padding: 30px;
        flex:1 1 0;}

    .social{
        }

    .social img{
        margin-right: 8px;
        vertical-align: middle;
        height: 20px;
        width: auto;}


#zoekveldpop .modal-content {
    background-color: rgba(0,0,0,0)!important;
    border: 0px solid rgba(0,0,0,0)!important;}


    .fc-list-table td {
        font-size: 0.8em;}

    .fc-list-item-title a {
        word-break: break-all;}



        /* -------------------- CALENDAR -------------------- */
        .agendawrap .fc-list-item{
            flex-wrap:wrap;
            display: flex!important;}

            .agendawrap .fc-list-heading{
                display: flex;
                width: 100%;
                position: relative;
                flex: 1;}

                .agendawrap .fc-widget-header{
                    display: flex;
                    width: 100%;}

                    .agendawrap .fc-list-heading-main{
                        font-family:inherit;
                        width: auto;
                        text-transform:lowercase;
                        order: 2;
                        padding: 0 0 0 5px;}

                        .agendawrap .fc-list-heading-alt{
                            text-transform: capitalize;
                            order: 1;}

                            .agendawrap .fc-list-item-title a {
                                word-break: normal;}

            .agendawrap .fc-list-table td.fc-list-item-time{
                border-top: 0;
                padding-top: 0;
                order: 2;
                width: calc(80% - 28px)!important;}

            .agendawrap .fc-list-table td.fc-list-item-marker{
                padding-top: 0;
                display: flex;
                border-top: 0;
                order: 3;
                width: calc(20% - 14px)!important;}

                .agendawrap .fc-event-dot {
                    margin: auto 10px auto auto;}

        .agendawrap .fc-list-item-title{
            order:1;
            border-bottom: 0;
            font-weight: 700;
            width: 100%!important;}

        .agendawrap .fc-widget-content{
            border-bottom: 0;}


/* -------------------- BACK TO TOP -------------------- */
#back-top{
    background:rgba(255,255,255,0.9);
    display: block;
    position: fixed;
    right:15px;
    padding: 5px;
    bottom: 15px;
    border-radius: 4px;
    z-index: 50;}

#back-top a, #back-top button{
    display:block;
    padding:6px;
    border: 0px;
    border-radius: 4px;
    text-align: center;}

    #back-top a{}

    #back-top button{
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;}

    #back-top button .material-icons{
        border-radius: 4px;
        padding:6px;
        vertical-align: middle;}

#back-top i.material-icons{
    font-size:20px;}

#back-top img{
    width: 15px;
    height: auto;}

.btn-primary{
    color: #000;
    border-color: #ffc033;
    background: #ffc033;}

.popover img{
    pointer-events: none;}


/* -------------------- ANIMATIE -------------------- */
a{
    -webkit-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition:all 0.25s ease-in-out;}

* > *:last-child{margin-bottom: 0;}

/* -------------------- VORMFACTOR -------------------- */
.vf{ position: absolute; bottom:-40px; left: 0px; right: 0px; margin:0px auto; text-align: center;}
.vf a{height:20px; width:100%; text-align:left; font-size:10px; color:#000000!important; text-decoration:none; text-align: center; display:inline-block; zoom: 1; filter: alpha(opacity=2); opacity: 0.1;}
.vf a:hover {filter: alpha(opacity=100); opacity: 1;}
.vf img{height:8px; width:80px;}


/* -------------------- OVERIG -------------------- */
.clearfix:after{content:""; visibility:hidden; display:block; height:0; clear:both;}
.vcenter{display: -webkit-box; display: flex; display: -ms-flexbox; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}