html, body{
  	font-family:'Open Sans', sans-serif; 
    height: 100%;
    min-height: 100%;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-font-smoothing: antialiased;
}

body{
      background:#e3e3e3;
	/*-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;*/
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-font-smoothing: antialiased;
}

.wrapper{
    width: 90%;
    margin: 0 auto;
    box-shadow: 0px 0px 100px rgba(0,0,0,0.5);
}

.container-fluid{padding-left:0px; padding-right:0px;}

/* -------------------- NAV -------------------- */
.wrapper nav{
    background:#fff;
    width:100%;
    padding:0px 30px;
}

.navbar-header{
    display:block; 
    text-align:center;
    height:80px;
}

	.navbar-header img{
        margin:0px auto;
        height:45px;
    }

	a.navbar-brand{
        padding:20px 30px; 
        position: absolute; 
        width:auto; 
        left:0; 
        top:0; 
        text-align:center; 
        margin:auto;
    }

    .navbar-collapse.collapse{
        padding:0px; 
        white-space: nowrap;
    }

    .navbar{
        background:#fff;
        width:100%; 
        margin:0px;
        padding-left: 0px;
        padding-right: 15px;
        z-index:10; 
        border: 0px solid transparent;
        border-radius:0px
    }

    .navbar > div{
        margin-left: 0px;
        margin-right: 0px;
    }

    .collapse, .nabar-right{
        margin-right: 0px!important;
    }

        .navbar ul li a{
            background:none; 
            text-transform:uppercase; 
            font-family: 'Open Sans', sans-serif; 
            font-weight:400; 
            font-size:14px; 
            color:#000000; 
            letter-spacing: 0.1em;
            text-decoration: none;
        }

            .navbar ul li a:focus{background: none}
            .navbar ul li a.dropdown-toggle:focus{background: none}


    ul.nav li.open ul.dropdown-menu li{
        padding:0px 0px;
    }

    .navbar ul li a:hover{
        background:#ffffff; 
        color:#01aae3;
    }

    .navbar ul li a:active{
        background:none;
    }

.nav-selected{color:#01aae3!important; font-weight:700;}
.navbar a.nav-selected{color:#01aae3!important; font-weight:700;}
.navbar ul li.nav-path-selected .dropdown-toggle{color:#01aae3;  font-weight:700;}
/*-------------------------------------------------*/

.caret {
    color: #000000;
    -webkit-transition: color 0.2s; /* Safari */
    transition: color 0.2s;
}

.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    background-color: transparent;
    color: #000000 !important;
}

.dropdown-menu {
    border:1px solid #f1f1f1;
    border-radius: 0;
    box-shadow: none;
    margin-top: -15px;
    padding:0px 0px;
}

.dropdown-menu li {
    padding: 2px 16px 2px 16px;
}

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

.dropdown-menu a {
    color: #777777 !important;
}

.dropdown-menu > li > a {
    padding: 8px 14px;
}


/* -------------------- 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 -------------------- */
.mainheader{
    background: rgb(2,168,226);
    background: -moz-linear-gradient(left,  rgba(2,168,226,1) 75%, rgba(0,114,187,1) 75%);
    background: -webkit-linear-gradient(left,  rgba(2,168,226,1) 75%,rgba(0,114,187,1) 75%);
    background: linear-gradient(to right,  rgba(2,168,226,1) 75%,rgba(0,114,187,1) 75%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#01aae3', endColorstr='#0072bb',GradientType=1 );
    display: block;
    color:#fff;
}
.pageheader{
    background:#0072bb;
    display: flex;
    color:#fff;
    min-height: 20vh;
    width: calc(100% + 30px);
    margin: 0 -15px;
    justify-content: center;
    align-content: center;
    position: relative;
}

.vcenter{
    display: -webkit-box!important;
    display: -moz-box!important;
    display: -webkit-flexbox!important;
    display: -ms-flexbox!important;
    display: -webkit-flex!important;
    display: flex!important;
    align-items: center!important;
    flex:1 1 auto!important;
}

.mheaderlogo{margin:30px 15px; justify-content: center; text-align:center; display: flex; flex-direction: column; width: calc(100% / 3);}
.vvp .mheaderlogo{width: calc(100% / 2);}
.mheaderlogo h2{font-size:80px; line-height:80px; text-transform: uppercase;font-weight: 700; display: inline-block; letter-spacing: -0.08em; margin:0px 5px 0px 0px; padding: 0px 0px 0px 0px;}
.mheaderlogo ul{display: inline-block; padding:0px; margin:0px;}
.mheaderlogo ul li{font-size: 11px; list-style: none; text-align: left; line-height: 12px; display: inline; margin: 0px 5px;}
.mheaderlogo ul li span{font-weight:700;}

.mheadertekst{padding: 40px 40px; margin:20px 0px; text-align: center; border-left:1px dotted rgba(255,255,255,0.25);}
    .mheadertekst p{font-size: 16px; line-height: 20px; font-style: italic; letter-spacing: 0.15em;}
        .mheadertekst > *:last-child{margin-bottom:0px; padding-bottom:0px;}

.mheaderbuttons{margin:15px!important; text-align: right;}

.button a{
    background:#FFF;
    padding:8px 12px;
    text-decoration:none;
    color:#282828;
    margin:5px;
    clear:both;
    display: flex;
    width: min-content;
    justify-content: space-between;
    font-size: 16px;
    font-style: italic;
    letter-spacing: 0.08em;
}

.button span{color:#0072bb; margin-right:5px;}

.button a:hover{
    background:#01aae3;
    color:#fff;
}

.button a:hover span{color:#fff; margin-right:5px;} 

/* -------------------- INTRO -------------------- */
/*INTRO*/
.intro{
    position: relative;
    background:#FFF;
    display: table;
    padding: 0px;
    margin:0px -15px;  
    height: 100%;
    
}

/*INTRO IMG*/
.introimg{
    position: relative;
    text-align: center;
    background:#0072bb;
    height: 100%;
    width: 50%;
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}

     .introimg h3{
         font-size:55px;
         letter-spacing: -0.05em;
         z-index: 100;
         position: relative;
         color:#FFF;
    }

    .introimg img{
        left:0;
        top:0;
        filter: grayscale(1);
        mix-blend-mode: multiply;
        margin-right: 0%;
        position: absolute;
        width: 100%;
        opacity: 0.9;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

/*INTRO TEXT*/
.introtext{
    padding: 60px;
    display: table-cell;
    height: 100%;
    width: 50%;
}

    .introtext h1{
        font-size: 1.8em; 
        line-height: 1.4em;
        color:#000000;
        font-weight: 600;
        letter-spacing: 0;
        margin-bottom: 5px;
    }

    .introtext > *:last-child{
        padding-bottom: 0px;
        margin-bottom:0px;
    }

/* -------------------- Actualiteiten / Projecten -------------------- */

.newswrapper{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 15px;
    text-decoration: none;
}

.newswrapper a{
    text-decoration: none;}

.actpro{
    background:url(../images/bg-schaduw-x.jpg) top center repeat-x #FFF;
    padding: 18px;
}

    .actpro h2{
        font-size: 30px;
        font-weight: 300;
        font-style:italic;
        padding: 15px 20px;
    }

.newsitem{padding:0px; margin:0px; padding: 18px; display: flex; flex-direction: column; height:100%;}
    
    .newsitem h4{font-size: 15px; margin: 0px 0px 5px 0px; color:#FFF; font-style: italic; font-weight: 700; line-height: 20px; letter-spacing: 0.02em;}
        a .newsitem h4{padding: 8px 14px;}
    
    .newsitem p{flex:1; text-decoration: none; font-size: 1.2em; font-style: italic; line-height: 1.5em; letter-spacing: 0.02em; padding:0px; margin:0px 0px 10px 0px;}
        a .newsitem:hover p{color:#000;}
    
    .newsitem  span.leesmeer{font-size: 1.2em; font-style: italic;}
    a .newsitem:hover span.leesmeer{color: #000; text-decoration: underline;}

    .newsitemimg{height:180px; position: relative; overflow: hidden; margin-bottom: 10px;}
        .newsitemimg img{
            left:0;
            position: absolute;
            top:0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }

    a .actualiteit h4{background:#01aae3;  display: inline-block;}
    a .project h4{background:#0072bb;  display: inline-block;}
    a .actualiteit span.leesmeer{color: #01aae3;}
    a .project span.leesmeer{color: #0072bb;}

    a .actualiteit h4, a .project h4{margin-bottom: 10px;}

/* -------------------- MAIN -------------------- */
.paginaheaderimg{overflow: hidden; width: 50%; position: relative}
.paginaheaderimg:after{
    content: '';
    position: absolute;
    left: 0px;
    object-fit: cover;
    top:0px;
    height: 400px;
    width: 150px;
    background: rgb(83,62,114);
    background: -moz-linear-gradient(left,  rgba(0,114,187,1) 0%, rgba(0,114,187,0) 100%);
    background: -webkit-linear-gradient(left,  rgba(0,114,187,1) 0%,rgba(0,114,187,0) 100%);
    background: linear-gradient(to right,  rgba(0,114,187,1) 0%,rgba(0,114,187,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0072bb', endColorstr='#0072bb',GradientType=1 );
    z-index: 1;
}

.paginaheaderimg img{
    position: absolute;
    top: 0;
    right: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: 0;}

main{background:#FFF;}
.maincontent{background:#FFF; padding: 80px;}
.maincontent h1{color:#0072bb; font-size:30px; line-height: 34px; font-weight: 300; font-style: italic;}
.maincontent h2{color:#0072bb; font-size:20px; line-height: 24px; font-weight: 300;}
.maincontent h3{color:#0072bb; font-size:15px; line-height: 20px; font-weight: 700;}
.maincontent ul{ margin: 0px 0px 30px 0px; padding-left: 20px;}
.maincontent ul li{ margin: 0px 0px 5px 0px; font-size: 1.2em;}
.maincontent ol{ margin: 0px 0px 15px 0px; padding-left: 15px;}
.maincontent ol li{ margin: 0px 0px 5px 0px;}
.maincontent img{ max-width: 100%; height: auto; margin-bottom: 15px;}
.maincontent p:last-child{padding:0px; margin:0px;}

/* SIDEBAR */
aside{padding-left:0px!important; padding-right:0px!important;}
.siz{ background: #0072bb; justify-content: center; text-align: center; height: 200px; width:100%; overflow:hidden; display: block; position: relative;}
.siz img{
    filter: grayscale(1);
    mix-blend-mode: multiply;
    left: 50%;
    margin-right: -50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    z-index: 0;
}

.siz h3{
    padding: 10px;
     font-size:45px;
     letter-spacing: -0.05em;
     z-index: 100;
     position: relative;
     color:#FFF;
}

.sidebarcontent{padding: 30px;}
.sidebarcontent p{ 
    font-size: 1.2em!important;
    line-height: 1.5em!important;
    font-style: italic;
    color:#000!important;
}

.sidebarcontent p a{color:#0072bb!important; text-decoration: underline;}
.sidebarcontent .button a{background:#01aae3; color:#FFF; border:1px solid #01aae3; margin-left: 0;}
.sidebarcontent .button a span{color:#FFF;}
.sidebarcontent .button a:hover{background:#fff; color:#01aae3; border:1px solid #0072bb;}
.sidebarcontent .button a:hover span{color:#01aae3;}
.sidebarcontent img{max-width:100%; height: auto; margin:5px 0px 10px 0px; display: block;}

/* -------------------- FOOTER -------------------- */

footer{text-align:center; padding: 50px 0px;}
footer ul{padding:0px; margin: 0px; list-style: none;}
footer ul li{font-size: 14px; line-height: 22px; font-style: italic; padding:0px; display: inline-block; color:#888; margin: 0px 15px; position: relative;}
footer ul li+li:after{display: block; position: absolute;  top:5px; left:-15px; content: ''; width: 1px; height: 12px; border-left:1px solid #888;}
footer ul li a{color:#888;}
footer ul li a:hover{color:#533e72;}

/* -------------------- CMS -------------------- */

.youtubeBlock {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;
}

.youtubeBlock iframe, .youtubeBlock object, .youtubeBlock embed {
    height: 100% !important;
    left: 0;
    position: absolute;
    top: 0;
    width: 100% !important;
}

.ccm-block-edit[data-block-type-handle="youtube"] .ccm-edit-mode-disabled-item {
    height: 0 !important;
    padding-bottom: 56.25%;
    width: 100% !important;
}

.theme-default .nivoSlider {
    margin-bottom: 0!important;
}

.miniSurveyView textarea {
    width: 100%;
}

.miniSurveyView .question {
    color:#8d8178;
}

.miniSurveyView {
    color:black;
}

div#ccm-highlighter{z-index:1000; min-height:30px;}
/*div.ccm-menu{z-index:9999; min-height:30px;}*/

.clearfix:before,.clearfix:after content: " "; display: table;}
.clearfix:after {clear: both;}

.lichtblauw{color:#01aae3;}
.donkerblauw{color:#0072bb;}
.design{margin-top: 5px;}
.design img{height: 15px; width: auto; opacity: 0.2;    }

/* -------------------- ANIMATIE-EFFECTS -------------------- */
.hm-modelimg img, .navbar ul li a, .vf a, .nieuwsitem a, .nieuwsitem h3, .nieuwsitem span, .button a, .button a span{-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition:all 0.25s ease-in-out;}
.dropdown-menu, .reserveer span, .reserveer a, .adres a{border-top-left-radius: 5px!important; border-top-right-radius: 5px!important; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
.dropdown-menu, .nav > li > a:focus, .nav > li > a:hover, .nieuwsitem span, .button, a.button, .button a {-moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px;}
::selection{background: #0072bb; color:#fff;}
::-moz-selection{background: #0072bb; color:#fff;}

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