html, body{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Montserrat', sans-serif;
    background: #F5F5F5;
    height:100%;
    padding:0px;
    margin:0px;}

body{
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-font-smoothing: antialiased;
    min-height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-size: cover;                                                                                     
    -o-background-size: cover;}

.wrapper{   
    -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;}

    .flex{
        display: -webkit-box;   
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;}

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

.leesmeer{
    display: flex;
    color: #00549a;
    font-weight: 500;
    font-size: 0.9em;
    align-self: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    text-transform: uppercase;
    padding: 10px 20px;
    border:2px solid #00549A;}

.leesmeer i{
    align-self: center;
    font-size: 1.4em;
    margin-left: 10px;}

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

    .leesmeer:hover{
        text-decoration: none;
        color: #FFF;
        background: #00549a;}


/* -------------------- NAVIGATIE -------------------- */
nav.navbarolw{
    position: relative;
    padding: 30px 5vw calc(30px + 10vw);
    background: #FFF;
    height: auto;
    justify-content: space-between;
    display: flex;
    align-items: center;}

    .vvp nav.navbarolw{
        padding: 30px 5vw;}

nav.navbarolw ul{
    height: auto;}

    nav.navbarolw a{
        font-weight:400;
        text-transform: uppercase;
        padding:10px 15px;
        letter-spacing: 0.04em;
        color:#000;}

    nav.navbarolw .navbar-nav{
        float: right;
        display: inline-block;
        vertical-align: top;
        width: auto;
        margin: 0px auto;}

    nav.navbarolw .navbar-collapse {
        padding-left: 0px;
        padding-right: 0px;
        width: 100%;
        text-align: center;}

    nav.navbarolw .navbar-brand{
        padding: 0px;
        position: relative;}

        nav.navbarolw .navbar-brand img{
            width: auto;
            padding: 0px;
            margin: 0px;
            height: 60px;}

nav.navbarolw .navbar-header{}

.navbarolw li a:focus, .navbarolw li a:hover {
    text-decoration: none;
    color:#00a6c3;
    background-color: rgba(0,0,0,0)!important;}

.navbar-right .dropdown-menu{
    right: 50%;
    left: auto;
    -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
            transform: translateX(50%);}

.navbarolw .dropdown-menu{
    text-align: center;}

    .navbarolw ul.dropdown-menu {
        height: auto;}

    .navbarolw .open .dropdown-menu > li > a{
        font-size:1em;
        padding: 10px;}

        .navbarolw .open .dropdown-menu > li > a:hover{
            color:#000;}

        .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover{
            background: none;}

.navbar-nav>li>.dropdown-menu{
    margin-top:0px;
    border-radius: 0px 0px 5px 5px;}

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    background-color: #eee;
    border-color: #337ab7;}

nav.navbarolw .navbar-nav .dropdown > a:after {
    display: block;
    position: absolute;
    font-family: 'Material Icons';
    text-transform: none;
    top: 50%;
    transform: translateY(-50%);
    right:0px;
    font-size: 1.2em;
    content: 'keyboard_arrow_down';}

nav.navbarolw a.dropdown-toggle{
    margin-right: 10px;
    padding-right: 20px!important;}

ul.dropdown-menu li.open ul.dropdown-menu{
    position: relative;
    width: 100%;
    display: block;}

    ul.dropdown-menu li.open ul.dropdown-menu li{
        width: 100%;}

        ul.dropdown-menu li.open ul.dropdown-menu li a{
            background: #4b5c68;
            color: #FFF;
            width: 100%;}

.dropdown-menu{
    background: none;
    -webkit-box-shadow: 0px 0px rgba(0,0,0,0);
            box-shadow: 0px 0px rgba(0,0,0,0);
    padding:0px 0px;
    margin:0px 0px;
    border-radius: 0px;    
    font-size: 1em;
    min-width:100px!important;
    border:0px;}

    .navbar-nav .open .dropdown-menu{
        background: #f8f8f8;}
    
        .navbar-nav .open .dropdown-menu > li > a{
            text-align: center;
            padding:10px 15px;
            color:#000;}

        li.nav-selected > a{
            font-weight: 600;
            color:#00a6c3;}

            .navbar-nav .open .dropdown-menu > li > a:hover{
                color:#00a6c3;}

ul > li > ul > li.dropdown-menu{
    position: relative;
    display: block;}


/* -------------------- NAV HAMBURGER ICON ANIMATION -------------------- */
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover{
    background-color: transparent;}

    .navbar-default .navbar-toggle {
        border: none;}

        .navbar-toggle div.hamburger span.icon-bar {
            background: #000;
            -webkit-transition: all 0.15s;
            -o-transition: all 0.15s;
            transition: all 0.15s;}

        .navbar-toggle span:nth-child(1) {
            -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                    transform: rotate(45deg);
            -webkit-transform-origin: 10% 10%;
                -ms-transform-origin: 10% 10%;
                    transform-origin: 10% 10%;}

        .navbar-toggle span:nth-child(2) {
            opacity: 0;}

        .navbar-toggle span:nth-child(3) {
            -webkit-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                    transform: rotate(-45deg);
            -webkit-transform-origin: 10% 90%;
                -ms-transform-origin: 10% 90%;
                    transform-origin: 10% 90%;}

        .navbar-toggle.collapsed span:nth-child(1),
        .navbar-toggle.collapsed span:nth-child(3) {
            -webkit-transform: rotate(0);
                -ms-transform: rotate(0);
                    transform: rotate(0);}

        .navbar-toggle.collapsed span:nth-child(2) {
            opacity: 1;}


/* -------------------- HEADER -------------------- */
.wrapper header{
    border-radius: 5px;
    position: relative;
    display: flex;
    margin:-10vw 10vw 0 5vw;
    width:calc(100% - 15vw);
    background: rgba(0,84,154,1);
    background: linear-gradient(180deg, rgba(0,84,154,1) 0%, rgba(0,166,195,1) 100%);}

.vvp .wrapper header{
    margin:0;
    background: #FFF;}


/* -------------------- INTRO -------------------- */
.intro{
    display: flex;
    position:relative;
    width:calc(40% + 5vw);}

    .intro article{
        display: flex;
        flex-direction: column;
        color:#FFF;
        padding: 5vw;}
    
.vvp .intro{
    padding: 5vw 0 5vw 5vw;
    flex-direction: column;
    width:50%;}

.vvp .intro h1{
    font-weight: 600;
    color: #00a6c3;}


/* -------------------- SLIDER -------------------- */
#slider{
    margin: 5vw -5vw -5vw 0;
    background: #000;
    position: relative;
    width: 60%;
    z-index: 0;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    box-shadow: 0px 0 60px rgba(0,0,0,0.2);
    display: flex;}

        .vvp #slider{
            border-radius: 5px;}

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

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

        .ccm-image-slider, .ccm-image-slider-inner, .rslides, .rslides > li{
            position: relative;
            width: 100.2%;
            height: 100.2%;
            margin: -0.1%;}

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

        ul.rslides li{
            display: flex!important;
            align-items: flex-end;}
        
        ul.rslides > li > img{
            left: 0;
            top: 0;
            width: 100%;
            opacity: 0.85;
            height: 100%;
            z-index: 0;
            position: absolute;
            object-fit: cover;}

    .slidercontent{
        position: relative;
/*        transform: translateY(-100%);*/
        padding: 45px;
        display: flex;
        flex-direction: column;
        width: 80%;}

        .slidercontent span.title{
            position: relative;
            font-size: 1.2em;
            text-transform: uppercase;
            font-weight: 500;
            letter-spacing: 0.2em;
            line-height: 1.1em;
            color:#FFF;
            display: inline-block;
            text-shadow: none;
            padding: 0 0 20px 0;
            margin: 0 0 20px 0;
            z-index: 5;}

            .slidercontent span.title:after{
                background: #FFF;
                position: absolute;
                bottom: 0;
                width:calc((100% / 3) * 2);
                left: 0;
                content: '';
                height: 2px;
                border-radius: 2px;}

        .slidercontent p{
            position: relative;
            font-size: 1.8em;
            color: #FFF;
            line-height: 1.6em;
            font-weight: 400;}       

        .slidercontent span{
            position: relative;
            font-size: calc(11px - 1.65vw);
            text-shadow: 1px 1px rgba(0,0,0,0.75);
            font-weight: 400;
            padding: 12px 25px;
            border-radius:5px;
            color: #FFF;
            z-index:-1;}

            .slider-text p, a.slider-button{
                margin:0;    
                color: #FFF;
                font-weight:300;
                padding:0px 0px;}

                    .slider-text p{
                        color: #FFF;}                    

                    .slider-text h1, .slider-text h2{
                        font-size: 2.5em;
                        line-height: 1.2em;
                        font-weight: 600;
                        letter-spacing: 0.02em;
                        color: #FFF;}

                        a.slider-button{
                            font-size: 1.2em;
                            padding: 10px 50px 10px 20px;
                            color:#FFF;
                            position: relative;
                            display: inline-block;
                            border: 2px solid #FFF;
                            margin-top: 20px;
                            background:none;}

                            a.slider-button:hover{
                                background: #00549a;
                                border: 2px solid #00549a;
                                color: #FFF;
                                text-decoration: none;}

                            a.slider-button:before{
                                position: absolute;
                                right: 15px;
                                font-size: 16px;
                                font-family: 'Material Icons';
                                content: 'arrow_forward';}

                        .slider-button .material-icons{
                            vertical-align: middle; font-size: 1em;}

        .slidercontrol{}

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

.home .rslides_tabs {
    position: absolute;
    z-index: 100;
    bottom: 10px;
    left: 45px;
    padding-top: 15px;
    padding-bottom: 10px;}

    .home .rslides_tabs li{
        margin-right: 0;}

        .home .rslides_tabs li a {
            text-indent: -9999px;
            overflow: hidden;
            background: none;
            width: 8px;
            border:1px solid #FFF;
            height: 8px;
            display: inline-block;
            margin-right: 10px;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;}

            .home .rslides_tabs li.rslides_here a {
                background: #00a6c3;
                border:1px solid #00a6c3;}


/* -------------------- MAIN -------------------- */
main img{
    max-width: 100%;
    height: auto;}

.mainhome{
    justify-content: space-between;
    display: flex;
    position: relative;
    align-items: flex-start;
    background: #C2CE00;
    width: calc(100% - 20vw);
    margin: 10vw auto 0;}

.mainvvp{
    width: 90vw;
    margin:10vw auto 0;}

.mainvvp article + article{
    margin-top:45px!important;}


.tweekoloms{
    justify-content: space-between;
    flex-wrap: wrap;
    display: flex;}

    .tweekoloms .kol1{
        width: 45%;}
    
    .tweekoloms .kol2{
        width: 45%;}

.kleurblok{
    color: #FFF;
    background: linear-gradient(180deg, rgba(0,84,154,1) 0%, rgba(0,166,195,1) 100%);}

    .kleurblok a{
        text-decoration: underline;
        color: #FFF;}

    .kbtxt{
        padding: 30px;}
    
        .kleurblok h1, .kleurblok h2, .kleurblok h3, .kleurblok h4, .kleurblok h5{
            color: #FFF;} 

.standpunt{
    position: relative;
}

    .standpunt h3{
        line-height: 1.2em;
        color: #000;}

    .standpunt p{
        color: #00a6c3;}

.standpunt + .standpunt{
    margin-top: 30px;
    padding-top: 30px;}

    .standpunt + .standpunt:after{
        background: #00a6c3;
        content: '';
        height: 2px;
        border-radius: 2px;
        width: 25%;
        position: absolute;
        top:0;
        left: 0;}


/* -------------------- TWITTER -------------------- */
.twitterfeed{
    margin: -5vw 0 0 -5vw;
    background: #FFF;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 5vw;
    width: calc(40% + 2.5vw);
    position: relative;}

    .twitterfeed img{
        width: 100%;
        object-fit: cover;
        height:200px;
        position:relative;}

    .twitterwidget{
        width: 100%;
        position: relative;
        height: 50vh;
        overflow: scroll;
        padding: 30px;}

        .twitterfeed:after{
            content: '';
            height: 150px;
            width: 100%;
            position:absolute;
            bottom: 0px;
            left: 0px;
            z-index: 100;
            pointer-events: none;
            background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);}


/* -------------------- NIEUWS -------------------- */
.nieuws{
    box-shadow: 0px 0 60px rgba(0,0,0,0.2);
    padding: 5vw;
    margin: -5vw -5vw 0 0;
    border-radius: 0 0 5px 5px;
    background: #FFF;
    width: 50vw;}

.nieuws article + article{
    margin-top: 60px;}

.nieuwsitem{
    display: flex;
    text-decoration: none;
    color: #000;
    justify-content: space-between;}

        .nieuwsitem:hover{
            text-decoration: none;}

    .nieuwsimg{
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        width: 25%;}

        .nieuwsimg img{
            position: absolute;
            object-fit: cover;
            width: 100%;
            height: 100%;}

    .nieuwstxt{
        width: 70%;}

        .nieuwstxt h1{
            position: relative;
            font-weight: 500;
            margin-bottom: 15px;
            padding-bottom: 15px;
            font-size: 1.4em;}

            .nieuwstxt h1:after{
                height: 2px;
                border-radius: 5px;
                width: 25%;
                background: #00a6c3;
                position: absolute;
                bottom: 0;
                left: 0;
                content: '';}

        .nieuwstxt p{
            margin-bottom: 5px;}

        .nieuwstxt span.leesmeer{
            border:0;
            background: none;
            padding: 0;
            margin-top: 10px;
            text-transform:none;
            font-weight: 600;
            color: #000;}

.vlinder{
    position: absolute;
    right: -6.5vw;
    bottom: -2.5vw;
    width: 10vw;
    height: auto;
    max-width: 150px;}

.vvp .vlinder{
    position: absolute;
    right: 6.5vw;
    top: -2.5vw;
    width: 10vw;
    height: auto;
    max-width: 90px;}

/* -------------------- FOOTER -------------------- */
.home footer{
    width: calc(100% - 20vw);
    margin: 0 auto 5vw;
    padding: 0 45px 45px;
    display: flex;
    background: #C2CE00;}

    footer a{
        color: #fff;
        text-decoration: underline;}

    footer ul{
        display: flex;
        list-style: none;
        padding:0;
        margin:0;}

        footer ul li{
            padding:0;
            margin:0;}        

        footer ul li img{
            height: 20px;
            filter: saturate(0) brightness(0);
            width: auto;}        

        footer ul li + li{
            padding:0;
            margin-left:10px;}

.vvp footer{
    margin-top: calc(5vw + 15px);
    position: relative;
    display: flex;
    color: #00a6c3;
    justify-content: center;
    padding: 5vw;
    background: #FFF;}

    .vvp footer a{
        color: #00a6c3;}

    .vvp footer ul li img{
        filter: saturate(1) brightness(1);}


/* -------------------- 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;
    color:#4b5c68;}

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

.row-eq-height {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;}

.groen, ul.groen li a{color:#C2CE00;}
.lichtblauw, ul.lichtblauw li a{color:#00A6C3;}
.donkerblauw, ul.donkerblauw li a{color:#00549A;}
.bggroen{background:#C2CE00;}
.bglichtblauw{background:#00A6C3;}
.bgdonkerblauw{background:#00549A;}


/* -------------------- ANIMATIE -------------------- */
.leesmeer, .specialisatieblok, .specialisatieblok span{
    -webkit-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition:all 0.25s ease-in-out;}

.ccm-ui div.dropdown-menu.ccm-inline-design-dropdown-menu .ccm-inline-style-slider-display-value {
    min-width: 50%!important;}
.ccm-ui div.dropdown-menu.ccm-inline-design-dropdown-menu {
    min-width: 265px!important;}


/* -------------------- 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;}