/*IMPORTS
============================================================================================*/
/*fonts*/
@import (inline) url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');
@import (inline) url('https://use.typekit.net/zct1vww.css');

@import (inline) '../css/icons.min.css';

/*owl-carousel*/
@import (inline) url('../css/owl.carousel.min.css');
@import (inline) url('../css/owl.theme.min.css');

/*magnific popup*/
@import (inline) url('../css/magnific-popup.min.css');
 
/*slick*/
@import (inline) url('../css/slick.css');
@import (inline) url('../css/slick-theme.css');
@import (inline) url('../css/slick-lightbox.css');

@import (inline) url('../css/modals.min.css');

/*Remodal*/
@import (inline) url('../css/remodal.css');
@import (inline) url('../css/remodal-default-theme.css');

@import 'grid.less';

@import (inline) url('../css/debugged-cookiebar.min.css');

/*
6.  Site styles 
============================================================================================*/
@max-width-wrapper: 1600px;
@max-width-content: 1300px;
@map-height: 600px;

/*COLORS
============================================================================================*/
@background-body:#fff;
@background-white:#fff;
@primary-color:#223a50;
@secondary-color:#55617b;

@black:#000;
@grey:#cfd7d6;
@red:#ca1818;
@light-grey:#ebebeb;
@bg-spotlight:#f2b910;
@border-color: #4f4d65;
@green:#328b24;

@font-color:#010101;
@font-white:#fff;
@font-grey:#85888a;
@font-spotlight:#223a50;

@zenith:#877662;
@dune:#e8c773;
@regatta:#5dad40;
@hemixveer:#677dbd;
@lagoo:#223a50;
@kadet:#2c4891;
@vega:#808080;
@eksterlaer:#3b873a;
@Heizijde: #34ae7b;
@regatta-appartementen: #294a8a;
@regatta-appartementen-highlight: #d19b20;
@regatta-appartementen-grey: #e4e4e4;



@fly-out-color: #2c4e5f;

@klavergroen:#00a96b;
@saliegroen:#217e6d;
@salamandergroen:#132f31;

/*FONT
============================================================================================*/
@font-face {
    font-family: 'ZapfHumnst BT';
    src: url('../font/ZapfHumanist601BT-Roman.eot');
    src: url('../font/ZapfHumanist601BT-Roman.eot?#iefix') format('embedded-opentype'),
        url('../font/ZapfHumanist601BT-Roman.woff2') format('woff2'),
        url('../font/ZapfHumanist601BT-Roman.woff') format('woff'),
        url('ZapfHumanist601BT-Roman.svg#ZapfHumanist601BT-Roman') format('svg');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'ZapfHumnst BT';
    src: url('../font/ZapfHumanist601BT-Bold.eot');
    src: url('../font/ZapfHumanist601BT-Bold.eot?#iefix') format('embedded-opentype'), 
        url('../font/ZapfHumanist601BT-Bold.woff2') format('woff2'), 
        url('../font/ZapfHumanist601BT-Bold.woff') format('woff'), 
        url('ZapfHumanist601BT-Bold.svg#ZapfHumanist601BT-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
}

@font:'Roboto', sans-serif;

@font2: 'Campton W05 Light';
@font2Bold: 'Campton W05 Bold';
@font2Regular:'Campton W05 Book';
@font2Medium:'Campton W05 Medium';

@title-font:'Roboto', sans-serif;
@title-font2:'ZapfHumnst BT';
@icon-font:'vooruitzicht';
@thin:100;
@light:300;
@regular:400;
@medium:500;
@bold:700;
@font-size:16px;
@line-height:22px;

/*URL
============================================================================================*/
@images:'/images';

/*MIXINS
============================================================================================*/
.opacity (@opacity: 0.5) {
    -webkit-opacity:@opacity;
    -moz-opacity:@opacity;
    opacity:@opacity;
}
.transform(@string){
    -webkit-transform:@string;
    -moz-transform:@string;
    -ms-transform:@string;
    -o-transform:@string;
    transform:@string;
}
.background-size-cover() {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.box-sizing(@box-sizing) {
    -webkit-box-sizing: @box-sizing;
    -moz-box-sizing: @box-sizing;
    box-sizing: @box-sizing;
}
.box-decoration-break(@box-decoration-break) {
    -webkit-box-decoration-break: @box-decoration-break;
    -o-box-decoration-break: @box-decoration-break;
    box-decoration-break: @box-decoration-break;
}

/*GENERAL
============================================================================================*/
html,body,.wrapper{
    //overflow:visible; //slidebars scroll fix
}
body{
    background:@background-body;
    font-family:@font;
    font-size:@font-size;
    line-height:@line-height;
    color:@font-color;
    font-weight:@light;
    > .wrapper{
        background:@background-white;
        border-style:solid;
        border-color:darken(@grey,5%);
        border-width:0 1px;
        .box-sizing(border-box);
    }
}

.hpf {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

h1,h2,h3,h4{
    .sup,.sub{
        > span{
            color:@primary-color;
        }
    }
}
h1{
    font-family:@title-font;
    font-size:@font-size + 35px;
    line-height:@line-height + 35px;
    font-weight:@regular;
    text-transform:uppercase;
    .sub,.sup{
        display:block;
        font-weight:@thin;
        font-size:@font-size + 25px;
        line-height:@line-height + 25px;
    }
    &.underline{
        margin-bottom:25px;
        padding-bottom:20px;
        position:relative;
        &:after{
            content:'';
            display:block;
            width:35px;
            height:1px;
            background:@primary-color;
            position:absolute;
            bottom:0;
            left:0;            
        }
        &.center{
            text-align:center;
            &:after{
                left:50%;
                .transform(translateX(-50%));
            }
        }
        &.align-right{
            text-align:right;
            &:after{
                left:auto;
                right:0;
                .transform(none);
            }
        }
    }
    &.xs{
        font-size:@font-size + 15px;
        line-height:@line-height + 15px;
    }
}
h2{
    font-family:@title-font;
    font-size:@font-size + 15px;
    line-height:@line-height + 15px;
    font-weight:@regular;
    text-transform:uppercase;
    .sub,.sup{
        display:block;
        font-weight:@light;
        font-size:@font-size + 10px;
        line-height:@line-height + 10px;
        text-transform:none;
    }
    &.underline{
        margin-bottom:15px;
        padding-bottom:10px;
        position:relative;
        &:after{
            content:'';
            display:block;
            width:35px;
            height:1px;
            background:@primary-color;
            position:absolute;
            bottom:0;
            left:0;            
        }
        &.center{
            text-align:center;
            &:after{
                left:50%;
                .transform(translateX(-50%));
            }
        }
        &.align-right{
            text-align:right;
            &:after{
                left:auto;
                right:0;
                .transform(none);
            }
        }
    }
    &.xs{
        font-size:@font-size + 8px;
        line-height:@line-height + 8px;
    }
}
h3 {
    font-family: @title-font;
    font-size: @font-size + 8px;
    line-height: @line-height + 8px;
    font-weight: @regular;
    text-transform: uppercase;

    &.underline {
        margin-bottom: 15px;
        padding-bottom: 10px;
        position: relative;

        &:after {
            content: '';
            display: block;
            width: 35px;
            height: 1px;
            background: @primary-color;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        &.center {
            text-align: center;

            &:after {
                left: 50%;
                .transform(translateX(-50%));
            }
        }

        &.align-right {
            text-align: right;

            &:after {
                left: auto;
                right: 0;
                .transform(none);
            }
        }
    }

    &.margin {
        margin-bottom: 20px;
    }
}
h4{
    font-size:@font-size;
    line-height:@line-height;
    font-weight:@medium;
    text-transform:uppercase;
}
p{
    margin-bottom:25px;
    &:last-of-type{
        margin-bottom:0;
    }
}
a{
    outline:none;
    border:0;
    text-decoration:underline;
    color:@primary-color;
    &:hover{
        text-decoration:none;
    }
}
img{
    outline:none;
    border:0;
    max-width:100%;
}
strong, b{
    font-weight:@bold;
}
em, i{
    font-style:italic;
}
ul{
    list-style-type:disc;
    list-style-position:outside;
    margin:25px 0 25px 17px;
    li{
        padding-left:10px;
    }
}
ol{
    list-style-type:decimal;
    list-style-position:outside;
    margin:10px 0 25px 17px;
    li{
        padding-left:15px;
    }
}
.to-upper{
    text-transform:uppercase;
}
.color-primary{
    color:@primary-color;
}
.color-secondary{
    color:@secondary-color;
}
.color-default{
    color:@font-color;
}
.back-wrapper{
    text-align:center;
}
.buttons{
    margin-top:25px;
}
.button{
    display:inline-block;
    .transition();
    cursor:pointer;
    background:fade(@primary-color,50%);
    border-style:solid;
    border-color:@primary-color;
    border-width:0 0 3px 0;
    font-weight:@bold;
    text-transform:uppercase;
    font-size:@font-size;
    line-height:@line-height;
    font-family:@font;
    color:@font-white;
    text-decoration:none;
    outline:none;
    padding:10px 15px;
    i{
        &:first-child{
            margin-right:8px;
            margin-top:1px;
        }
    }
    &:hover{
        background:@primary-color;
    }
    &.icon-only{
        i{
            font-size:@font-size + 4px;
            margin:0;
            &:first-child{
                margin:0;
            }
        }
    }
    &.ghost{
        background:none;
        border-width:1px 1px 3px 1px;
        color:@primary-color;
        &:hover{
            background:@primary-color;
            color:@font-white;
        }
    } 
    &.secondary{
        background:@secondary-color;
        border-color:@secondary-color;
        &:hover{
            background:@primary-color;
            border-color:@primary-color;
        }
        &.ghost{
            border-color:@secondary-color;
            background:none;
            color:@secondary-color;
            &:hover{
                color:@font-white;
                background:@secondary-color;
            }
        }
    }
    &.back{
        margin-bottom:15px;
    }
    &.btn-back{
        color:@font-color;
        background:@grey;
        border:0 !important;
        padding:6px 15px 8px 10px;
        text-transform:uppercase;
        font-weight:@light;
        margin:0 5px 5px 0;
        &:hover{
            background:@primary-color;
            color:@font-white;
        }
    }
    &.xs{
        padding:5px 10px 7px 10px;
        font-size:@font-size - 2px;
        line-height:@line-height - 2px;
    }
}
.back{
    text-decoration:none;
    position:relative;
    &:after{
        content:'';
        display:block;
        width:0;
        height:1px;
        background:@primary-color;
        position:absolute;
        bottom:-2px;
        left:0;
        right:100%;
        .transition();
    }
    &:hover{
        &:after{
            right:0;
            width:100%;
        }
    }
}
input[type="text"],input[type="email"],input[type="number"],input[type="password"],input[type="tel"],textarea,select{
    outline:none;
    border:solid 1px @primary-color;
    .box-sizing(border-box);
    padding:7px 10px;
    width:100%;
    font-family:@font;
    font-weight:@light;
    font-size:@font-size;
    margin:3px 0;
    background:none;
    &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color: @font-grey;
    }
    &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color:@font-grey;
        opacity: 1;
    }
    &::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: @font-grey;
        opacity:  1;
    }
    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: @font-grey;
    }
}
input[type=number]{
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
}
select{
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+');
    background-position: 100% center;
    background-repeat: no-repeat;
    cursor:pointer;
    padding:7px 25px 7px 10px;
    option{
        &:first-of-type{
            padding:0;
        }
    }
    &::-ms-expand{
        display:none;
        /* IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        /* IE 5-7 */
        filter: alpha(opacity=0);
        /* Good browsers :) */
        .opacity(0);
    }
}
textarea{
    resize:vertical;
    min-height:150px;
}
.checkbox {
    position: relative;
    display: inline-block;
    margin: 5px 25px 0 0;
    padding: 0;

    input[type="checkbox"]:not(:checked),
    input[type="checkbox"]:checked {
        position: absolute;
        left: -9999px;
    }

    input[type="checkbox"]:not(:checked) + label,
    input[type="checkbox"]:checked + label {
        cursor: pointer;
        overflow: hidden;
        display: block;
        font-family: @font;
        color: @font-color;
        font-size: @font-size;
        line-height: @font-size;
        font-weight: @light;
        position: relative;
        text-transform: none;
        margin: 0;

        span {
            display: block;
            .left();
            overflow: hidden;
            //width:~'calc(100% - 22px)';
            min-width: 75%;
            padding: 3px 5px 5px 8px;
            .box-sizing(border-box);
            line-height: @font-size;
        }
    }
    /* checkbox */
    input[type="checkbox"]:not(:checked) + label:before,
    input[type="checkbox"]:checked + label:before {
        content: '';
        display: block;
        .left();
        width: 20px;
        height: 20px;
        background: none;
        border: solid 1px @grey;
    }
    /* checkbox of checked or not-checked */
    input[type="checkbox"]:checked + label:after {
        content: '\e80d';
        font-family: @icon-font;
        position: absolute;
        font-size: 19px;
        top: 2px;
        left: 2px;
        color: @primary-color;
    }

    input[type="checkbox"]:not(:checked) + label:after {
        display: none;
    }

    &:after {
        content: '';
        display: block;
        clear: both;
        height: 0;
        width: 0;
        visibility: hidden;
        overflow: hidden;
    }

    @media only screen and (max-width: 719px) {
        input[type="checkbox"]:not(:checked) + label,
        input[type="checkbox"]:checked + label {
            span {
                width: ~'calc(100% - 22px)';
            }
        }
    }
}
.radiobutton {
    position: relative;
    display: inline-block;
    margin: 5px 25px 0 0;
    padding: 0;

    input[type="radio"]:not(:checked),
    input[type="radio"]:checked {
        position: absolute;
        left: -9999px;
    }

    input[type="radio"]:not(:checked) + label,
    input[type="radio"]:checked + label {
        cursor: pointer;
        overflow: hidden;
        display: inline-block;
        font-family: @font;
        color: @font-color;
        font-size: @font-size;
        line-height: @font-size;
        font-weight: @light;
        position: relative;
        text-transform: none;
        margin: 0;

        span {
            display: block;
            .left();
            overflow: hidden;
            //width:~'calc(100% - 17px)';
            padding: 3px 5px 5px 8px;
            .box-sizing(border-box);
            line-height: @font-size;
        }
    }
    /* radiobutton */
    input[type="radio"]:not(:checked) + label:before,
    input[type="radio"]:checked + label:before {
        content: '';
        display: block;
        .left();
        width: 15px;
        height: 15px;
        background: none;
        border: solid 1px @grey;
        .border-radius(50%,50%,50%,50%);
        margin-top: 2px;
    }
    /* radiobutton of checked or not-checked */
    input[type="radio"]:checked + label:after {
        content: '';
        display: block;
        width: 11px;
        height: 11px;
        background: @primary-color;
        .border-radius(50%,50%,50%,50%);
        position: absolute;
        top: 5px;
        left: 3px;
    }

    input[type="radio"]:not(:checked) + label:after {
        display: none;
    }

    &:after {
        content: '';
        display: block;
        clear: both;
        height: 0;
        width: 0;
        visibility: hidden;
        overflow: hidden;
    }

    /*@media only screen and (max-width: 719px) {
        input[type="radio"]:not(:checked) + label,
        input[type="radio"]:checked + label {
            span {
                width: ~'calc(100% - 19px)';
            }
        }
    }*/
}
.form{
    margin-top:25px;
    .container{
        width:100% !important;
    }
}
.form-page{
    .row{
        &:after{
            content:'';
            display:block;
            clear:both;
            height:0;
            width:0;
            overflow:hidden;
            visibility:hidden;
        }
    }
    .one-column-align-center{
        text-align:center;
        .form-group{
            text-align:center;
        }
    }
    .one-column-align-right{
        text-align:right;
        .form-group{
            text-align:right;
        }
    }
    .col-md-12{
        width:98%;
        margin:0 1%;
        display:block;
    }
    .col-md-6{
        width:48%;
        margin:0 1%;
        display:block;
        .left();
    }
    .col-md-4{
        width:31.333333%;
        margin:0 1%;
        display:block;
        .left();
    }
    .form-group{
        padding:5px 0;
        text-align:left;
        vertical-align:top;
        label{
            display:block;
            color:@primary-color;
            margin-bottom:3px;
            font-size:@font-size;
            line-height:@line-height;
            font-weight:@bold;
            width:270px;
            padding-top:5px;
            .left();
        }
        input[type="text"],input[type="email"],input[type="number"],input[type="password"],input[type="tel"],textarea,select,.radiobutton-group,.checkbox-group{
            width:~'calc(100% - 270px)';
            .right();
        }
        .checkbox{
            input[type="checkbox"]:not(:checked) + label,
            input[type="checkbox"]:checked + label {
                width:auto;      
                padding:0;
                span{
                    padding: 2px 5px 5px 8px;
                }
            }
        }
        .radiobutton{
            input[type="radio"]:not(:checked) + label,
            input[type="radio"]:checked + label {
                width:auto; 
                padding:0;
                span{
                    padding: 2px 5px 5px 8px;
                }      
            }
        }
        .button{
            margin-top:15px;
        }
        &:after{
            content:'';
            display:block;
            clear:both;
            height:0;
            width:0;
            overflow:hidden;
            visibility:hidden;
        }
    }
}
.error, .validation-error,#validationErrors{
    display:block;
    width:100%;
    margin:15px 0 0 0;
    .box-sizing(border-box);
    padding:8px 10px 10px 10px;
    background:@red;
    color:@font-white;
    font-size:@font-size - 3px;
    line-height:@line-height - 3px;
    text-align:left;
    clear:both;
    h1,h2,h3,h4,h5,h6{
        font-size:@font-size - 1px;
        line-height:@line-height - 1px;
        margin:0 0 5px 0;
        color:@font-white;
    }
    ul{
        margin:10px 0 0 17px;        
        li{
            margin:3px 0;
            &:before{
                top:4px;
                color:@font-white;
                border-color:@font-white;
            }
        }
    }
    &.hide{
        display:none;
    }
    &.show{
        display:block;
    }
    &.ng-hide{
        display:none;
    }
    &.ng-show{
        display:block;
    }
}
.ng-scope{
    .form-receipt{
        h2{
            display:none;
        }
    }
    .ng-hide{
        display:none;
    }
    .ng-show{
        display:block;
    }
}
.border-top{
    border-top:solid 1px @grey;
}
.border-bottom{
    border-top:solid 1px @grey;
}
.align-center{
    text-align:center;
}
.align-left{
    text-align:left;
}
.align-right{
    text-align:right;
}
.bg-image{
    .background-size-cover();
}
.bg-light-grey{
    background:@light-grey;
}

/*data-table*/
.data-table {
    width: 100%;
    border-collapse: collapse;
    caption {
        text-align: left;
        padding: 0 0 5px 0;
        border-bottom: solid 1px @primary-color;
        margin-bottom: 15px;
    }

    thead {
        font-family:@font2Medium;
        tr {
            background: @secondary-color;
            td, th {
                color: @font-color;
                border:solid 1px darken(@secondary-color,7%);
                &:last-of-type{
                    text-align:center;
                }
            }
        }
    }

    tbody {
        tr {
            /*&:nth-child(even) {
                background: fade(@primary-color,10%);
                td,th{
                    border-color:fade(@primary-color,20%);
                }
            }*/
            background:@background-white;
            td,th{
                border:solid 1px @grey;
            }
            td {                
                &:last-of-type {
                    text-align: center;
                    font-family:@font2Medium;                    
                }
            }
            &.soldout{
                background:@grey; 
                color:fade(@font-color,40%);
                td,th{
                    border-color:darken(@grey,5%);
                }
                td{
                    &:last-of-type{
                        text-align:left;
                        font-size:@font-size + 4px;
                        line-height:@line-height + 25px;
                        color:@font-color;
                    }
                }
                /*&:nth-child(even) {
                    background:darken(@grey,20%);
                    td,th{
                        border-color:darken(@grey,20%);
                    }
                }*/
            }
        }
    }

    tr {
        .box-sizing(border-box);
        td, th {
            padding: 10px;
            text-align: left;
            .box-sizing(border-box);
            vertical-align: middle;
        }
    }
}

/* Move reCAPTCHA v3 badge to the left */
.grecaptcha-badge {
    width: 70px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    left: 4px !important;
}

.grecaptcha-badge:hover {
    width: 256px !important;
}

//CONTACT-FLY-OUT
.fixed-wrapper {
    position: fixed;
    bottom: 20px;
    //left: 0;
    right: 20px;
    z-index: 9999;


}
.contact-fly-out-container {
    max-width: 1600px;
    position: relative;
    margin: auto;

    &.close-window {
        display: none;
    }

    .contact-fly-out {
        background-color: darken(@fly-out-color, 0.5%);
        max-width: 360px;
        width: 100%;
        //position: absolute;
        //right: 20px;
        //bottom: 0;
        border-radius: 20px;
        color: @font-white;
        padding: 20px 18px;
        .box-sizing(border-box);
        .transition();

        .pop-up-header {
            cursor: pointer;
            position:relative;
            z-index:9999;

            .pop-up-title {
                display: inline-block;
                font-size: @font-size + 3px;
                text-transform: uppercase;
                font-weight: @regular;
                width: 85%;
                float: left;
            }

            i {
                .transition();
                float: right;

                &:before {
                    font-weight: @bold;
                }
                &.fa-envelope{
                    margin-left:-2px;
                }
                &.fa-question, &.fa-envelope {
                    display: none;
                    .transform(rotate(0deg));
                }
            }
        }

        .form.flyout {
            margin-top: 15px;
        }

        .form-page {
            .form-group {
                padding: 3px 0;

                label {
                    display: none;
                }

                .checkbox {
                    position: relative;
                    display: inline-block;
                    margin: 5px 25px 0 0;
                    padding: 0;

                    input[type="checkbox"]:not(:checked),
                    input[type="checkbox"]:checked {
                        position: absolute;
                        left: 0;
                    }

                    input[type="checkbox"]:not(:checked) + label,
                    input[type="checkbox"]:checked + label {
                        cursor: pointer;
                        overflow: hidden;
                        display: block;
                        font-family: @font;
                        color: @font-color;
                        font-size: @font-size;
                        line-height: @font-size;
                        font-weight: @light;
                        position: relative;
                        text-transform: none;
                        margin: 0;

                        span {
                            display: block;
                            .left();
                            overflow: hidden;
                            width: ~'calc(100% - 22px)';
                            min-width: 75%;
                            padding: 3px 5px 5px 8px;
                            .box-sizing(border-box);
                            line-height: @font-size;
                        }
                    }
                    /* checkbox */
                    input[type="checkbox"]:not(:checked) + label:before,
                    input[type="checkbox"]:checked + label:before {
                        content: '';
                        display: block;
                        .left();
                        width: 20px;
                        height: 20px;
                        background: none;
                        border: solid 1px @grey;
                    }
                    /* checkbox of checked or not-checked */
                    input[type="checkbox"]:checked + label:after {
                        content: '\e80d';
                        font-family: @icon-font;
                        position: absolute;
                        font-size: 19px;
                        top: 2px;
                        left: 2px;
                        color: @primary-color;
                    }

                    input[type="checkbox"]:not(:checked) + label:after {
                        display: none;
                    }

                    &:after {
                        content: '';
                        display: block;
                        clear: both;
                        height: 0;
                        width: 0;
                        visibility: hidden;
                        overflow: hidden;
                    }
                }

                textarea {
                    min-height: 80px;
                }

                input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], textarea, select {
                    width: 100%;
                    background-color: @background-white;
                    border-radius: 5px;
                    padding: 8px;
                    .box-sizing(border-box);
                }

                .radiobutton-group, .checkbox-group {
                    width: 100%;
                }
            }

            .row:first-child {
                label {
                    display: block;
                    color: @font-white;

                    &:after {
                        background-color: @font-white;
                    }
                }

                .radiobutton {
                    margin-right: 18px;
                }
            }

            .row:last-child {
                margin-top: 10px;

                .form-group {
                    width: 100%;
                    .checkbox {
                        width: 100%;

                    }
                }

                label {
                    display: block;
                    font-size: @font-size - 5px;
                    color: lighten(@fly-out-color, 40%);

                    a {
                        color: lighten(@fly-out-color, 40%);
                    }

                    &:before, &:after {
                        display: none;
                    }
                }

                .cell {
                    .form-group {
                        display: inline-block;

                        &:first-child {
                            .checkbox {
                                margin: 0;

                                label {
                                    &:before {
                                        width: 18px;
                                        height: 18px;
                                        background-color: @fly-out-color;
                                    }

                                    &:after {
                                        display: block;
                                        color: @font-white;
                                    }

                                    span {
                                        color: @font-white;
                                        padding-top: 0;
                                        font-size: @font-size - 1px;
                                        line-height: @line-height - 1px;

                                        a {
                                            color: @font-white;
                                        }
                                    }
                                }
                            }
                        }

                        &:last-child {
                            width: auto;
                            float: right;
                            margin-top: 5px;
                        }
                    }
                }
            }
        }
        /* .btn .flyout .button*/
        .btn {
            background-color: transparent;
            color: @font-white;
            border: 1px solid @font-white;
            padding: 10px 15px;
            .box-sizing(border-box);
            text-decoration: none;
            font-size: @font-size;
            font-weight: @light;
            cursor: pointer;
            display: inline-block;
            /*new*/
            /*margin: auto;
            text-transform: none;*/
            .transition();


            &:after {
                content: '\e802';
                display: inline-block;
                font-family: @icon-font;
                font-weight: @light;
                margin-left: 5px;
            }

            &:hover {
                background-color: @background-white;
                color: @fly-out-color;
            }
        }

        &.window-closed {
            .pop-up-header{
                position:unset;
            }
            i {
                .transform(rotate(180deg));
            }
        }

        .thx-content {
            margin: 30px 0 10px;

            a {
                color: @font-white;
                text-decoration: underline;
            }
            /* .btn*/
            .btn {
                margin-top: 25px;
                text-decoration: none;
            }
        }
    }
}


/*MODAL*/
.modal-bg {
    z-index: 9999;

}
.modal {
    top: 10vh !important;
    max-width: 1200px !important;
    video {
        display: block;
        width: 100%;
        max-height: 100%;
    }
    .close-popup {
        position: absolute;
        top: -15px;
        right: -15px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 100%;
        background-color: fade(@background-white, 75%);
        text-decoration: none;
        .transition();
        cursor: pointer;
        z-index:9999;
        &:hover {
            background-color: @background-white;
        }
    }
}
.modal.active {
    z-index: 99999 !important;
 
    padding: 0;
    overflow: visible;
    border-radius: 0;
    border: none;
    left: 0;
    right: 0;
}

.responsive-iframe{
    display:block;
    position: relative;
    padding-top: 56.25%;
    height: 0;
    overflow: hidden;
    width:100%;
    max-width: 100%;
    z-index: 3;

    //margin-bottom:25px;
    margin-top:25px;
    &:first-child{
        margin-top:0;
    }
    &:last-child{
        margin-bottom:0;
    }
    iframe, object, embed, video.video-file {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}


/*DEBUGGED COOKIE OPTIONS (overlay) - COLORS & FONTS
============================================================================================*/
.cookieConsentAllowMessage{
    .box-sizing(border-box);
    padding:15px;
    border:solid 1px @primary-color;
    margin-top:25px;
    margin-bottom:25px;
    &:first-child{
        margin-top:0;
    }
    &:last-child{
        margin-bottom:0;
    }
    .debugged-cookieoptions-buttons{
        .debugged-cookieoptions-button {
            border-color: @primary-color;
            background: @primary-color;
            color: @font-white;
            font-family: @font;
            border-radius: 4px;
            &:hover {
                background: darken(@primary-color,10%);
                border-color: darken(@primary-color,10%);
            }
        }
    }
    
}
#debugged-cookieoptions-container {
    z-index: 9999999999999999999;

    .debugged-cookieoptions-popup-wrapper {
        .debugged-cookieoptions-popup-title {
            font-size: @font-size + 4px;
            line-height: @line-height + 4px;
            color: @font-white;
            background: @primary-color;
        }

        .debugged-cookieoptions-popup-tabs {
            background: @background-white;
            color: @font-color;
            overflow: auto;
            max-height: 40vh;

            .debugged-cookieoptions-popup-tabs-content {
                .debugged-cookieoptions-popup-tab-content {
                    .debugged-cookieoptions-popup-tab-content-title {
                        //font-size:@font-size;
                        //line-height:@line-height;
                    }
                    //mobile info icon color
                    .info-icon {
                        svg {
                            fill: @font-color;
                        }
                    }
                }
            }
        }

        .debugged-cookieoptions-popup-footer {
            color: @font-color;
            background: @background-white;
            font-size: @font-size - 2px;
            line-height: @line-height - 2px;
            font-family: @font;

            .debugged-cookieoptions-buttons {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;

                button {
                    margin: 10px 5px !important;

                    &:last-child {
                        margin-right: 0;
                    }
                }

                .change-settings, .link-button {
                    padding: 10px 23px;
                    border: solid 2px @primary-color;
                    background: none;
                    color: @font-color;
                    text-decoration: none;
                    font-size: @font-size - 2px;
                    line-height: @line-height - 2px;
                    font-family: @font;
                    .border-radius(4px,4px,4px,4px);
                    .transition();

                    &:hover {
                        background: @primary-color;
                        border-color: @primary-color;
                        color: @font-white;
                    }
                }
            }

            .debugged-cookieoptions-button {
                font-size: @font-size - 2px;
                line-height: @line-height - 2px;
                font-family: @font;

                &.save-all {
                    flex: 1;
                }

                &.save, &.save-all {
                    background: @green;
                    color: @font-white;
                    border-color: @green;

                    &:hover {
                        background: darken(@green,15%);
                        border-color: darken(@green,15%);
                    }
                }
            }
        }
    }
}

/*REMODAL*/
.remodal {
    max-width: 800px;
    padding: 70px 50px;
    text-align: left;

    &.remodal-letter {
        .vooruitzicht-logo {
            margin-bottom: 35px;
        }

        h1 {
            font-size: @font-size + 2px;
            line-height: @line-height + 2px;
            font-weight: @regular;
            text-transform: uppercase;
            margin-bottom: 35px;
        }

        ul li {
            margin-bottom: 9px;
            padding-left: 20px;
            position: relative;

            &:before {
                content: '';
                display: block;
                width: 7px;
                height: 7px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                border: solid 2px #fbba1a;
                position: absolute;
                top: 9px;
                left: 0;
            }
        }

        .sidenote {
            margin-top: 20px;
            display: block;
            font-size: @font-size - 3px;
            line-height: @line-height - 3px;
        }

        .remodal-close {
            left: auto;
            right: 0;
            width: 75px;
            height: 75px;

            &:before {
                width: 80px;
                font-size: @font-size + 29px;
                line-height: @line-height + 29px;
            }
        }
    }
    //remodal brochure
    &.remodal-brochure {
        background-color: @Heizijde;
        color: @font-white;
        //text-align: center;
        &:before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            z-index: 0;
            width: 62%;
            height: 100%;
            background-image: url(../../images/header-bg-pattern.png);
            background-repeat: repeat;
            background-position: bottom right;
        }

        .remodal-close {
            color: @font-white;
        }

        h2, .remodal-text {
            position: relative;
            z-index: 5;
        }

        .form-page {
            .row:nth-child(2) {
                margin-bottom: 5px;

                .col-md-12 {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .form-group:first-child {
                        width: 100%;
                        margin-right: 30px;

                        input {
                            width: 100%;
                            height: 44px;

                            &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
                                color: @font-white;
                            }

                            &::-moz-placeholder { /* Firefox 19+ */
                                color: @font-white;
                            }

                            &:-ms-input-placeholder { /* IE 10+ */
                                color: @font-white;
                            }

                            &:-moz-placeholder { /* Firefox 18- */
                                color: @font-white;
                            }
                        }
                    }
                }
            }
        }

        .form-page .form-group {
            label, label a {
                color: @font-white;
            }

            .button {
                margin-top: 0;
            }

            input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], textarea, select {
                border-color: @font-white;
            }
        }

        .checkbox input[type="checkbox"]:checked + label:after {
            color: @font-white;
        }
    }
}

/*Cookie popup anno 2022*/
.custom-consent {
    position: fixed;
    bottom: 0px;
    right: 0px;
    background-color: @primary-color;
    border: 1px solid lighten(@primary-color, 25%);
    margin: 5px;
    padding: 15px 20px 30px 20px;
    width: 450px;
    max-width: calc(100% - 30px);
    z-index: 999999;

    &.hide {
        display: none;
    }

    .consent-head {
        margin-bottom: 15px;
        color: @font-white;

        i {
            .right();
            font-size: 24px;

            &:hover {
                cursor: pointer;
            }
        }
    }

    .consent-text {
        padding: 20px;
        color: @font-white;

        a {
            color: @font-white;
        }
    }

    button {
        margin-left: 20px;
        background-color: darken(@primary-color, 10%);
        border: 1px solid darken(@primary-color, 10%);

        &:hover {
            background-color: @primary-color;
            color: @font-white;
            border: 1px solid @font-white;
        }
    }
}

.content {
    &.cookie-consent {
        table {
            margin-bottom: 20px;

            tr {
                td {
                    border: 1px solid #eee;
                    padding: 5px 10px;
                }
            }
        }
    }
}

/*HEADER
============================================================================================*/
header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    z-index:998;

    &.small{
        .main-header{
            padding:8px 0;
        }
        .logo{
            img{
                height:50px;
            }
        }
        .hamburger{
            margin-top:17px;
            &:hover{
                margin-top:14px;
            }
        }
        .main-nav{
            margin-top:13px;
        }
    }

    .inner-header{
        .box-sizing(border-box);
        border-bottom:solid 1px  @grey;
        &.wrapper{
            border-right:solid 1px darken(@grey,5%);
            border-left:solid 1px darken(@grey,5%);
        }
    }

    nav{
        ul{
            margin:0;
            padding:0;
            list-style:none;
            li{
                margin:0;
                padding:0;
                display:block;
                a{
                    display:block;
                    text-decoration:none;
                }
            }
        }
    }
    
    /*top header*/
    .top-header{
        background:@primary-color;
        color:@font-white;
    }
    /*top-nav*/
    .top-nav{
        display:block;
        .left();
        ul{
            li{
                .left();
                &.hide{
                    display:none !important;
                }
                a{
                    color:@font-white;
                    font-size:@font-size - 1px;
                    line-height:@line-height - 1px;
                    padding:8px 15px 9px 15px;
                    border-right:solid 1px fade(@font-white,25%);
                    .icon{
                        color:fade(@font-white,50%);
                        font-size:@font-size - 2px;
                        margin-right:5px;
                        position:relative;
                        display:inline-block;    
                        top:-1px;                   
                        &:before{
                            width:auto;
                        }
                        &.icon-envelope{
                            font-size:@font-size - 4px;
                        }
                    }
                    &:hover{
                        background:fade(@font-white,10%);
                    }
                }
            }
            &:after{
                content:'';
                .clear();
            }
        }
    }

    /*social*/
    .social{
        display:block;
        .right();
        margin-right:2%;
        a{
            .left();
            color:fade(@font-white,50%);
            display:block;
            text-decoration:none;
            font-size:@font-size + 4px;
            line-height:@font-size + 4px;
            padding:8px 0 10px 0;
            margin-left:15px;
            &:first-of-type{
                margin-left:0;
            }
            &:hover{
                color:@font-white;
            }
        }
        &:after{
            content:'';
            display:block;
            clear:both;
            height:0;
            width:0;
            visibility:hidden;
            overflow:hidden;
        }
    }


    /*main-header*/
    .main-header{
        position:relative;
        background:@background-white;
        color:@font-color;
        .box-sizing(border-box);
        padding:20px 0;        
        .transition();
    }
    /*logo*/
    .logo{
        display:block;
        text-decoration:none;
        .left();
        img{
            display:block;
            height:60px;
            .transition();
        }
    }

    /*hamburger*/
    .hamburger{
        display:block;
        .right();
        margin-top:22px;
        .transition();
        cursor:pointer;
        span{
            display:block;
            width:25px;
            height:1px;
            background:@font-color;
            margin:7px 0;
            .transition();
            position:relative;
            &:after,&:before{
                content:'';
                display:block;
                width:100%;
                height:1px;
                background:@font-color;
                position:absolute;
                left:0;
                .transition();
            }
            &:before{
                top:-6px;
            }
            &:after{
                bottom:-6px;
            }
        }
        &:hover{   
            margin-top:19px;         
            span{
                margin:10px 0;
                &:before{
                    top:-9px;
                }
                &:after{
                    bottom:-9px;
                }
            }
        }
        &.desktop{
            display:none;
        }
        &.mobile{
            display:none;
        }
    }

    /*main-nav*/
    .main-nav{
        display:block;
        .right();
        margin-top:18px;
        .transition();
        ul{
            li{
                .left();
                margin:0 45px 0 0;
                a{
                    font-size:@font-size + 2px;
                    line-height:@line-height + 2px;
                    text-transform:uppercase;
                    position:relative;
                    color:@font-color;
                    &:after{
                        content:'';
                        display:block;
                        width:100%;
                        height:1px;
                        background:@font-color;
                        position:absolute;
                        bottom:-7px;
                        left:0;
                        right:100%;
                        width:0;
                        .transition();
                    }
                    &:hover,&.active{
                        &:after{
                            width:100%;
                            right:0;
                        }
                    }
                }
            }
            &:after{
                content:'';
                display:block;
                clear:both;
                height:0;
                width:0;
                visibility:hidden;
                overflow:hidden;
            }
        }
    }

    /*sub-nav*/
    .sub-nav{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        width:100%;
        background:fade(@background-white,95%);
        border-top:solid 1px @grey;
        border-bottom:solid 5px @primary-color;

        .main-nav-mobile{
            display:none;
        }
        .sub-nav-block{
            display:block;
            .left();
            width:25%;
            .box-sizing(border-box);
            border-right:solid 1px @grey;
            position:relative;
            &:last-of-type{
                border-right:0;
            }
            .title{
                text-transform:uppercase;
                font-weight:@light;
                font-size:@font-size + 4px;
                line-height:@line-height + 4px;
                margin:25px 36px 0 36px;
            }
            ul{
                margin:25px 36px;
                li{                    
                    margin:0 0 10px 0;
                    a{
                        color:@font-grey;
                        position:relative;
                        padding:0 0 0 15px;
                        &:before{
                            content:'\e802';
                            display:inline-block;
                            font-family:@icon-font;
                            position:absolute;
                            top:1px;
                            left:0;
                            color:@primary-color;
                            .transition();
                        }
                        &:hover{
                            color:@primary-color;
                            padding:0 0 0 18px;
                            &:before{
                                left:3px;
                            }
                        }
                    }
                    &:last-of-type{
                        margin:0;
                    }                    
                }
                &.big-links{
                    padding-bottom:77px;
                    li{                        
                        margin:0 0 15px 0;
                        a{
                            padding:0;
                            color:@font-color;
                            font-size:@font-size + 4px;
                            line-height:@line-height + 4px;
                            text-transform:uppercase;
                            font-weight:@light;
                            &:before{
                                content:'';
                                display:none;
                            }
                            .icon{
                                position:relative;
                                top:-1px;
                                .transition();
                            }
                            &:hover{
                                color:@primary-color;
                                .icon{
                                    margin-left:3px;
                                }
                            }
                        }
                        &:last-of-type{
                            margin:0;
                        }                        
                    }
                }
            }
            .show-other-projects{
                display:block;
                text-transform:uppercase;
                font-weight:@light;
                font-size:@font-size + 4px;
                line-height:@line-height + 4px;
                text-decoration:none;
                padding:25px 36px;
                border-top:solid 1px @grey;
                position:absolute;
                bottom:0;
                left:0;
                right:0;
                width:100%;
                .box-sizing(border-box);
                color:@font-color;
                img{
                    display:inline-block;
                    vertical-align:middle;
                    margin-right:5px;
                    position:relative;
                    top:-2px;
                }
                &:hover{
                    color:@font-white;
                    background:@primary-color;
                }
            }
        }
        &:after{
            content:'';
            display:block;
            clear:both;
            height:0;
            width:0;
            visibility:hidden;
            overflow:hidden;
        }
    }
}


/*Pop up modal*/
#video-popup {
    max-width: 1400px;
    width: 95%;
    padding: 0;
    video {
        display: block;
        width: 100%;
        max-height: 100%;
    }
}
.jquery-modal {
    z-index: 9999 !important;
}


/*CONTENT
============================================================================================*/
.content {
    padding-top: 140px; //hoogte van de fixed header
    //form overlay
    .sending {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
        text-align: center;

        &.ng-hide {
            display: none;
        }

        .inner-sending {
            padding-top: 280px;
        }
    }

    .block {
        display: block;
        .box-sizing(border-box);
        padding: 40px 0;

        &.no-bottom-space {
            padding: 40px 0 0 0;
        }

        &.no-top-space {
            padding: 0 0 40px 0;
        }

        &.text-page {
            .text {
                margin-top: 25px;
            }
        }

        &.small-space {
            padding: 25px 0;

            &.no-bottom-space {
                padding: 25px 0 0 0;
            }

            &.no-top-space {
                padding: 0 0 25px 0;
            }
        }
    }

    .narrow-text {
        display: block;
        width: 68%;
        margin: 0 auto;

        .no-center {
            margin: 0;
        }

        .inner-text {
            margin: 3% 0;

            iframe {
                width: 100%;
                height: 100%;
                min-height: 480px;
            }
        }

        &.mb-large {
            margin-bottom: 50px;
        }
    }

    .breadcrumbs {
        padding: 5px 0;
        background: @light-grey;
        font-size: @font-size - 2px;
        line-height: @line-height - 2px;

        .sixteen {
            display: block;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

        .button {
            .left();
            margin: 5px 15px 5px 0;
            border-width: 1px;
            padding: 3px 10px 5px 5px;
            text-transform: none;
            .border-radius(3px,3px,3px,3px);

            i {
                margin: 0;
                right: auto;
                left: auto;
                top: auto;
            }

            &:after {
                display: none;
            }
        }

        ul {
            display: block;
            .left();
            margin: 0;
            padding: 0;
            list-style: none;

            li {
                display: block;
                .left();
                margin: 5px 10px 5px 0;
                padding: 0 17px 0 0;
                position: relative;

                &:before {
                    display: none;
                }

                &:after {
                    content: '>';
                    display: block;
                    position: absolute;
                    top: 50%;
                    right: 0;
                    .transform(translateY(-50%));
                }

                &:last-child {
                    margin-right: 0;
                    padding-right: 0;

                    &:after {
                        display: none;
                    }
                }

                a {
                    display: block;
                    text-decoration: none;
                    color: @font-color;

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }

            &:after {
                content: '';
                .clear();
            }
        }
    }
    /*split-screen-banner*/
    .split-screen-banner {
        display: block;
        display: flex;
        flex-wrap: wrap;
        background-color: @primary-color;
        position: relative;

        &:after {
            content: '';
            .clear();
        }

        &:before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            z-index: 0;
            width: 62%;
            height: 100%;
            background-image: url('@{images}/header-bg-pattern.png');
            background-repeat: repeat;
            background-position: top right;
        }

        .image {
            display: block;
            width: 50%;
            .left();
            .background-size-cover();
            position: relative;
            z-index: 1;
        }

        .baseline-text {
            display: block;
            width: 50%;
            .box-sizing(border-box);
            padding: 12% 8%;
            position: relative;
            z-index: 2;
        }
    }
    /*top image banner*/
    .top-image-banner {
        display: block;
        position: relative;
        overflow: hidden;

        img {
            display: block;
            width: 100%;
            position: relative;
            z-index: 0;
        }

        .banner-text {
            display: block;
            //width:~'calc(100% - 160px)';
            text-align: center;
            position: absolute;
            left: 80px;
            right: 80px;
            bottom: 100px;
            //.transform(translateX(-50%));
            z-index: 1;

            h1 {
                color: @font-white;

                span {
                    padding: 2px 10px;
                    background: fade(@black,60%);
                }

                .sub {
                    display: inline-block;
                }
            }
        }

        .sticker {
            display: block;
            width: 215px;
            height: 215px;
            background: @secondary-color;
            .border-radius(50%,50%,50%,0);
            position: absolute;
            top: 25px;
            right: 25px;
            z-index: 2;
            font-family: @font2Regular;
            font-size: @font-size + 5px;
            line-height: @line-height + 6px;
            font-weight: @bold;

            > span {
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                .transform(translate(-50%,-50%));
                text-align: center;
                //margin-left: -3px;
            }
        }

        .arrow-button {
            display: block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 26px;
            text-align: center;
            color: @black;
            background: @background-white;
            .border-radius(50%,50%,50%,50%);
            position: fixed;
            bottom: 25px;
            left: 50%;
            .transform(translateX(-50%));
            text-decoration: none;
            z-index: 800;
            .transition();

            &:hover {
                bottom: 20px;
                background: fade(@background-white,75%);
            }

            &.hide {
                display: none;
            }
        }
    }
    /*video banner*/
    .video-banner {
        display: block;
        position: relative;
        background: @black;

        .banner-still {
            display: block;
            .transition();
            .opacity(1);
            cursor: pointer;
            position: relative;
            z-index: 2;

            &:after {
                content: "\e812";
                font-family: @icon-font;
                text-align: center;
                width: 90px;
                height: 90px;
                line-height: 90px;
                font-size: 50px;
                color: @font-white;
                .border-radius(50%,50%,50%,50%);
                border: solid 5px @background-white;
                position: absolute;
                top: 35%;
                left: 50%;
                .transform(translateX(-50%));
                .box-shadow(0px,0px,10px,0px,fade(@black,30%));
                text-shadow: 0px 0px 10px fade(@black,30%);
                z-index: 1;
            }

            > img {
                display: block;
                width: 100%;
                position: relative;
                z-index: 0;
            }

            .banner-text {
                display: block;
                text-align: center;
                position: absolute;
                left: 80px;
                right: 80px;
                bottom: 100px;
                z-index: 2;

                .title {
                    color: @font-white;

                    span {
                        padding: 2px 10px;
                        background: fade(@black,60%);
                    }

                    .sub {
                        display: inline-block;
                    }
                }
            }

            &.hide {
                .opacity(0);
                z-index: 1;
            }
        }

        .video-wrapper {
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 2;
            .transition();
            .opacity(1);

            iframe, object, embed, video.video-file {
                position: absolute;
                top: 0;
                left: 50%;
                width: auto;
                height: 100%;
                .transform(translateX(-50%));

                &.fullscreen-mode {
                    left: 0;
                    .transform(none);
                }
            }

            &.hide {
                .opacity(0);
                z-index: 1;
            }
        }
    }
    /*event banner*/
    .event-banner {
        background: @primary-color;
        padding: 40px 0;
        display: inline-block;
        width: 100%;
        color: @font-white;

        .left {
            width: 66.666666%;
        }

        .right {
            width: 33.333333%;
            text-align: right;
        }

        p {
            margin: 10px 0 0 0;
            font-size: @font-size + 2px;
        }

        a {
            color: @font-white;
            border: solid 1px @font-white;
            padding: 20px 30px;
            text-decoration: none;
            font-weight: 500;
            font-size: @font-size + 2px;
            text-transform: uppercase;
            display: inline-block;
            position: relative;
            top: 2px;

            &:hover {
                background: @font-white;
                color: @primary-color;
            }
        }
    }
    //VR BANNER
    .vr-banner, .pop-up-video {
        background-color: @primary-color;
        padding: 40px 50px;
        .box-sizing(border-box);
        color: @font-white;
        display: block;
        cursor: pointer;

        &.hide {
            display: none !important;
        }

        &:hover .button {
            background-color: @font-white !important;
            color: @primary-color !important;

            &:before {
                background-color: transparent !important;
            }
        }

        .sixteen {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-flow: wrap;
        }

        .vr-info {
            display: inline-block;
            margin-right: 45px;
            float: left;

            .vr-logo {
                margin-right: 25px;
            }

            .text-info {
                display: inline-block;
            }

            .title {
                text-transform: uppercase;
                font-size: @font-size + 7px;
                font-weight: @bold;
                margin-bottom: 6px;
            }

            .text {
                font-size: @font-size + 4px;
                font-weight: @light;
            }
        }

        .button {
            border-color: @font-white;
            border-width: 1px;
            color: @font-white;
            font-size: @font-size + 4px;
            padding: 14px 20px;
            float: left;
            display: inline-block;
        }
    }
    //POPUP VIDEO
    .pop-up-video {
        border-top: 1px solid @background-white;
        border-bottom: 1px solid @background-white;
        position: relative;
        z-index: 0;

        .flex {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }
        /*&:hover {
            .ghost {
                background-color: @background-white !important;
                color: @primary-color !important;

                &:before {
                    background-color: @font-white !important;
                }
            }
        }*/

        .vr-info {
            width: 60%;
        }

        .ghost {
            .transition();

            &:before {
                border-color: @font-white !important;
                .transition();
            }
            /*&:hover {
                background-color: @font-white !important;
                color: @primary-color !important;

                &:before {
                    background-color: transparent !important;
                }
            }*/
        }

        a {
            color: @font-white;
            display: block;
        }

        &.upperleft {
            border: @primary-color;
        }
    }

    .aanbod-overview {
        .aanbod-block.vr-block {
            .vr-logo {
                width: 65px;
                height: 65px;
                line-height: 67px;
                font-size: @font-size + 24px;
            }

            .text {
                display: block;
                display: flex;
                align-content: center;
                flex-wrap: wrap;
                justify-content: center;
            }

            .title {
                text-transform: uppercase;
                margin-bottom: 5px;
                margin-top: 10px;
            }

            .description {
                font-size: @font-size - 1px;
            }

            .button {
                border-top: 1px solid @font-white;
                .box-sizing(border-box);
                background-color: transparent;
            }
        }
    }

    .offer-overview {
        display: block;
        width: 102%;
        margin: 0 -1%;

        &:after {
            content: '';
            .clear();
        }

        .offer {
            display: block;
            width: 31.333333%;
            .left();
            margin: 0 1% 25px 1%;
            color: @font-white;
            text-decoration: none;
            .transition();
            min-height: 450px;
            background: @primary-color;
            position: relative;
            overflow: hidden;

            .offer-inner {
                position: absolute;
                top: 50%;
                left: 50%;
                .transform(translate(-50%,-50%));
                .box-sizing(border-box);
                padding: 50px 25px;
                width: 100%;
            }

            h1, h2, h3, h4 {
                color: @font-color;
            }

            .icon {
                display: block;
                position: relative;
                width: 150px;
                height: 150px;
                background: @background-white;
                .border-radius(50%,50%,50%,50%);
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 10px;
                .transition();

                > img {
                    display: block;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    .transform(translate(-50%,-50%));
                    max-width: 65%;
                    max-height: 65%;
                    .transition();
                }
            }

            .text {
                .description {
                    .transition();
                    height: 0;
                    .opacity(0);
                    width: 100%;
                    overflow: hidden;
                    font-weight: @bold;
                }
            }

            &:hover {
                .icon {
                    width: 100px;
                    height: 100px;

                    > img {
                        max-height: 50%;
                        max-width: 50%;
                    }
                }

                .text {
                    .description {
                        height: 130px;
                        .opacity(1);
                    }

                    .buttons {
                        .button {
                            &.white {
                                background: @secondary-color !important;
                                color: @font-color !important;
                                border-color: @secondary-color !important;
                            }
                        }
                    }
                }
            }
        }
    }

    .offer-overview-2 {
        display: block;
        display: flex;
        flex-wrap: wrap;
        width: 102%;
        margin: 0 -1%;

        &:after {
            content: '';
            .clear();
        }

        .offer {
            display: block;
            width: 31.333333%;
            .left();
            margin: 0 1% 25px 1%;
            color: @font-white;
            text-decoration: none;
            .transition();
            background: @primary-color;
            position: relative;
            overflow: hidden;
            .box-sizing(border-box);
            padding-top: 10px;

            .image {
                display: block;
                width: 100%;
                overflow: hidden;

                > img {
                    display: block;
                    .transition();
                    .transform(scale(1));
                }
            }

            .text {
                .box-sizing(border-box);
                padding: 25px 5% 35px 5%;
            }

            &:hover {
                .image {
                    > img {
                        .transform(scale(1.1));
                    }
                }

                .text {
                    .buttons {
                        .button {
                            &.white {
                                background: @secondary-color !important;
                                color: @font-color !important;
                                border-color: @secondary-color !important;
                            }
                        }
                    }
                }
            }

            &.klavergroen {
                background: @klavergroen;
            }

            &.saliegroen {
                background: @saliegroen;
            }

            &.salamandergroen {
                background: @salamandergroen;
            }
        }

        &.onepager {
            .offer {
                width: 23%;
            }
        }
    }

    .vr-logo {
        display: inline-block;
        width: 80px;
        height: 80px;
        line-height: 80px;
        font-size: @font-size + 34px;
        text-align: center;
        color: @primary-color;
        .border-radius(50%,50%,50%,50%);
        .transition();
        background-color: @background-white;
    }

    .vr-block-details {
        display: block;
        text-decoration: none;
        .box-sizing(border-box);
        padding: 20px;
        background-color: @primary-color;
        color: @font-white;
        font-size: @font-size - 1px;
        line-height: @line-height - 1px;
        margin-bottom: 40px;

        &:hover {
            background: fade(@primary-color,50%);
        }

        .icon {
            display: block;
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: @font-size + 39px;
            text-align: center;
            background-color: @background-white;
            color: @primary-color;
            .border-radius(50%,50%,50%,50%);
            float: left;
        }

        .text {
            display: block;
            float: left;
            .box-sizing(border-box);
            padding-left: 35px;
            width: ~"calc(100% - 110px)";

            .title {
                display: block;
                text-transform: uppercase;
                font-size: @font-size + 3px;
                font-weight: @bold;
                margin: 5px 0 3px 0;
            }

            .more {
                display: block;
                font-weight: @bold;
                margin-top: 10px;
            }
        }
    }
    /*intro*/
    .intro {
        text-align: center;

        &.hide {
            display: none !important;
        }

        .buttons {
            display: block;
            margin-top: 25px;

            .button {
                border-width: 1px;
                background: @primary-color;
                margin: 7px;

                &:hover {
                    background: fade(@primary-color,75%);
                }

                &.ghost {
                    background: none;

                    &:hover {
                        background: @primary-color;
                        color: @font-white;
                    }
                }
            }
        }

        &.with-video {
            text-align: left;
        }

        .text {
            display: block;
            .left();
            width: 52%;
            .box-sizing(border-box);
            padding-right: 2%;
        }

        .video {
            display: block;
            .left();
            width: 48%;
            .box-sizing(border-box);

            .video-container {
                position: relative;
                padding-bottom: 56.25%;
                height: 0;
                overflow: hidden;
                max-width: 100%;

                iframe, object, embed, video, video.video-file {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    .intro-numbers {
        .intro-text-block {
            display: block;
            .left();
            width: 60%;
        }

        .intro-numbers-block {
            display: block;
            .right();
            width: 40%;
            .box-sizing(border-box);
            padding-left: 35px;
            display: flex;
            flex-wrap: wrap;

            .number-block {
                display: block;
                width: 46%;
                .left();
                margin: 0 2% 15px 2%;
                .box-sizing(border-box);
                padding: 20px 10px 25px 10px;
                border: solid 1px fade(@primary-color,30%);
                border: solid 1px fade(@primary-color,30%);
                text-align: center;

                .number {
                    color: @primary-color;
                    font-size: @font-size + 40px;
                    line-height: @line-height + 40px;
                    font-family: @font2Bold;
                }
            }
        }
    }

    .intro-numbers-banner {
        display: block;
        background: @secondary-color;
        padding: 10px 0;

        .intro-numbers-banner-wrapper {
            display: block;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            width: 102%;
            margin: 0 -1%;

            &:after {
                content: '';
                .clear();
            }

            .number-block {
                display: block;
                //display:flex;
                //align-items:center;
                //justify-content:center;
                width: 18%;
                .left();
                margin: 10px 1%;
                .box-sizing(border-box);
                padding: 15px 10px 20px 10px;
                border: solid 1px fade(@background-white,40%);
                text-align: center;
                color: @font-white;

                .inner {
                    display: block;
                }

                .number {
                    font-size: @font-size + 8px;
                    line-height: @line-height + 8px;

                    > span {
                        font-size: @font-size + 20px;
                        line-height: @line-height + 20px;
                    }

                    font-family: @font2Bold;
                }
            }
        }
    }
    /*about*/
    .about {
        padding: 75px 0;

        .title {
            display: block;
            .left();
            text-align: right;
            width: 28%;
            margin: 0 1%;
        }

        .text {
            display: block;
            .left();
            width: 68%;
            margin: 0 1%;
            .box-sizing(border-box);
            padding-left: 35px;
            font-size: @font-size;
            line-height: @line-height + 3px;

            .button {
                margin-top: 25px;
                padding: 6px 10px 8px 15px;
            }
        }
    }
    /*teasers*/
    .teasers {
        background: fade(@primary-color,40%);

        .teaser {
            display: block;
            .left();
            width: 31.333333%;
            margin: 0 1%;
            text-decoration: none;
            margin-bottom: 20px;

            figcaption {
                display: block;
                color: @font-white;
                background: @primary-color;
                padding: 8px 5px 10px 5px;
                text-align: center;
                font-weight: @light;
                font-size: @font-size + 2px;
                line-height: @line-height + 2px;
            }

            .figimage {
                display: block;
                background: @primary-color;
                .transition();
                position: relative;
                overflow: hidden;

                img {
                    display: block;
                    width: 100%;
                    .transition();
                    .opacity(1);
                    position: relative;
                    z-index: 0;
                }
            }

            &:hover {
                .figimage {
                    img {
                        .opacity(0.5);
                        .transform(scale(1.1));
                    }
                }
            }
        }
    }

    .usps {
        .usp {
            background: @light-grey;

            .image {
                .background-size-cover();
                display: block;
                width: 50%;
                .left();
                min-height: 500px;
                overflow: hidden;
            }

            .text {
                display: block;
                width: 50%;
                .right();
                .box-sizing(border-box);
                min-height: 500px;
                padding: 4% 5%;
                font-size: @font-size;
                line-height: @line-height + 3px;
            }

            &:nth-child(2n+2) {
                .image {
                    .right();
                }

                .text {
                    .left();
                }
            }
        }
    }
    /*image-slider*/
    .image-slider, .header-slider {
        display: block;
        width: 100%;
        position: relative;

        .slider-item {
            display: block;

            img {
                display: block;
                width: 100%;
            }
        }

        &.owl-carousel {
            .owl-nav {
                margin: 0;
                padding: 0;
                height: 0;

                .owl-prev, .owl-next {
                    position: absolute;
                    top: 50%;
                    .transform(translateY(-50%));
                    z-index: 499;
                    color: @font-white;
                    width: 80px;
                    height: 80px;
                    line-height: 78px;
                    text-align: center;
                    font-size: 60px;
                    text-shadow: 0px 0px 5px rgba(0,0,0,0.3);
                    cursor: pointer;
                }

                .owl-prev {
                    left: 0;
                }

                .owl-next {
                    right: 0;
                }
            }
        }
    }
    /*brochure*/
    .brochure {
        .brochure-wrapper {
            .box-sizing(border-box);
            padding: 50px 0;
            background: fade(@primary-color,40%);
            //background:@secondary-color;
            color: @font-white;
            text-align: center;
        }

        .brochure-inner {
            display: inline-block;
        }

        .image {
            display: block;
            .left();
            .box-sizing(border-box);
            padding: 25px 45px 25px 25px;
            max-width: 50%;

            img {
                display: block;
                max-width: 100%;
                .transform(rotate(-10deg));
                .box-shadow(0px,0px,5px,0px,rgba(0,0,0,0.3));
            }
        }

        .text {
            display: block;
            .left();
            text-align: left;
            max-width: 50%;
            .box-sizing(border-box);
            padding-top: 35px;

            h3 {
                margin-bottom: 15px;
            }

            p {
                margin-bottom: 15px;
            }
        }
    }
    /*cta-info*/
    .cta-info {
        background: @primary-color;

        .cta-info-wrapper {
            background: @primary-color;
        }

        .cta-block {
            display: block;
            .left();
            width: 33.333333%;
            background: @primary-color;
            color: @font-white;
            .box-sizing(border-box);
            padding: 32px 25px 30px 25px;
            font-weight: @regular;
            font-size: @font-size + 4px;
            line-height: @line-height + 4px;
            font-family: @title-font;
            text-align: center;

            a {
                color: @font-white;
                text-decoration: none;

                span {
                    position: relative;

                    &:after {
                        content: '';
                        display: block;
                        width: 0;
                        height: 1px;
                        background: @font-white;
                        position: absolute;
                        bottom: -2px;
                        left: 0;
                        right: 100%;
                        .transition();
                    }
                }

                &:hover {
                    span {
                        &:after {
                            right: 0;
                            width: 100%;
                        }
                    }
                }
            }

            &.cta-title {
                font-weight: @bold;
                text-transform: uppercase;
                font-size: @font-size + 6px;
                line-height: @line-height + 8px;
            }

            &.cta-phone {
                text-align: center;

                .icon {
                    display: inline-block;
                    vertical-align: middle;
                    width: 35px;
                    height: 35px;
                    line-height: 35px;
                    font-size: 22px;
                    text-align: center;
                    color: @primary-color;
                    background: @background-white;
                    .border-radius(50%,50%,50%,50%);
                    margin-right: 10px;
                    text-decoration: none;
                }
            }

            &.cta-email {
                text-align: center;
                padding: 34px 25px 30px 25px;

                .icon {
                    margin-right: 10px;
                    text-decoration: none;

                    &:before {
                        width: auto;
                    }
                }
            }
        }
    }

    .cta-info-extra {
        display: block;
        background: @light-grey;
        .box-sizing(border-box);
        padding: 10px 0;

        .cta-info-extra-wrapper {
            display: block;

            &:after {
                content: '';
                .clear();
            }

            .cta-block {
                display: inline-block;
                max-width: ~'calc(50% - 10px)';
                vertical-align: middle;
                .box-sizing(border-box);
                padding: 25px 20px;

                h1, h2, h3, h4 {
                    margin-bottom: 5px !important;
                }

                .cta-info-text {
                    display: inline-block;
                    vertical-align: middle;
                    margin: 5px 0px 5px 15px;

                    &:first-child {
                        margin-left: 0;
                    }

                    .link-icon {
                        color: @font-color;
                        text-decoration: none;

                        .icon {
                            display: inline-block;
                            width: 25px;
                            height: 25px;
                            line-height: 25px;
                            text-align: center;
                            color: @font-white;
                            background: @primary-color;
                            .border-radius(50%,50%,50%,50%);
                            vertical-align: middle;
                            margin-right: 5px;
                            font-size: 14px;

                            &:before {
                                width: auto;
                                height: auto;
                                margin: 0;
                                padding: 0;
                            }

                            &.icon-envelope {
                                font-size: 8px;
                            }
                        }
                    }

                    .button {
                        margin: 0 !important;
                    }
                }
            }
        }
    }
    /*image-teasers*/
    .image-teasers {
        .image-teaser {
            display: block;
            text-decoration: none;
            position: relative;
            background: @black;
            .left();
            width: 33.333333%;
            overflow: hidden;

            img {
                display: block;
                width: 100%;
                .transition();
                .opacity(1);
            }

            &:after {
                content: '\e810';
                font-family: @icon-font;
                display: block;
                width: 60px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                position: absolute;
                top: 50%;
                left: 50%;
                .transform(translate(-50%,-50%));
                background: @primary-color;
                .border-radius(50%,50%,50%,50%);
                color: @font-white;
                .transition();
                .opacity(0);
            }

            &:hover {
                img {
                    .opacity(0.8);
                    .transform(scale(1.1));
                }

                &:after {
                    .opacity(1);
                }
            }
        }
    }
    /*extra-info*/
    .extra-info {
        .extra-info-item {
            display: block;
            .left();
            width: 48%;
            margin: 0 1%;
            color: @font-white;
            text-decoration: none;
            .box-sizing(border-box);
            padding: 25px 25px 25px 105px;
            font-size: @font-size + 2px;
            line-height: @line-height + 2px;
            position: relative;
            background: @primary-color;
            min-height: 115px;

            .icon {
                display: block;
                position: absolute;
                top: 50%;
                .transform(translateY(-50%));
                left: 25px;
                text-align: center;
                width: 55px;

                img {
                    display: inline-block;
                    max-width: 55px;
                    max-height: 55px;
                }
            }

            .title {
                font-size: @font-size + 14px;
                line-height: @line-height + 14px;
                text-transform: uppercase;
                margin-bottom: 5px;
                position: relative;
                z-index: 1;
            }

            .description {
                position: relative;
                z-index: 2;
            }

            &:hover {
                background: fade(@primary-color,75%);
            }
        }
    }
    /*rendements-banner*/
    .rendements-banner {
        background: @secondary-color;
        //background:fade(@primary-color,40%);
        color: @font-white;

        .rendements-banner-wrapper {
            .box-sizing(border-box);
            padding: 35px 0 35px 350px;
            position: relative;
            overflow: hidden;

            &:before {
                content: '%';
                display: block;
                position: absolute;
                top: 50%;
                left: 0;
                .transform(translateY(-50%));
                font-family: @font;
                font-size: 420px;
                color: fade(@font-white,35%);
            }
        }

        h2 {
            font-weight: @light;
            text-transform: none;
            font-size: @font-size + 25px;
            line-height: @line-height + 25px;
            margin-bottom: 15px;
        }

        .buttons {
            display: block;
            margin-top: 20px;

            .button {
                background: none;
                border: solid 1px @font-white;
                margin: 5px 10px 0 0;

                &:hover {
                    background: @font-white;
                    color: @primary-color;
                }
            }
        }
    }
    /*contactform*/
    .contactform {
        background: @primary-color;
        color: @font-white;
        text-align: center;

        input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], textarea, select {
            border: none;
            background-color: fade(@background-white,10%);
            color: @font-white;
            height: 40px;
            margin: 0;

            &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
                color: fade(@font-white,75%);
            }

            &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                color: fade(@font-white,75%);
                opacity: 1;
            }

            &::-moz-placeholder { /* Mozilla Firefox 19+ */
                color: fade(@font-white,75%);
                opacity: 1;
            }

            &:-ms-input-placeholder { /* Internet Explorer 10-11 */
                color: fade(@font-white,75%);
            }
        }

        a {
            color: @font-white;
        }

        select {
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAADCAYAAABmpKSeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACNJREFUeNpi/A8EDJiAkYGKgAmLgVS1AGYJssFUtwAEAAIMALWLBAfy/SbFAAAAAElFTkSuQmCC');

            option {
                background: @primary-color;
                color: @font-white;

                &:first-of-type {
                    padding: 0;
                }
            }
        }

        .checkbox {
            input[type="checkbox"]:not(:checked) + label,
            input[type="checkbox"]:checked + label {
                cursor: pointer;
                overflow: hidden;
                display: block;
                font-family: @font;
                color: @font-white;
                text-transform: none;
                font-size: @font-size;
                line-height: @font-size;
                font-weight: @light;
                position: relative;
                margin: 0;
            }
            /* checkbox */
            input[type="checkbox"]:not(:checked) + label:before,
            input[type="checkbox"]:checked + label:before {
                border: solid 1px @font-white;
            }
            /* checkbox of checked or not-checked */
            input[type="checkbox"]:checked + label:after {
                color: @font-white;
            }
        }

        .radiobutton {
            input[type="radio"]:not(:checked) + label,
            input[type="radio"]:checked + label {
                cursor: pointer;
                overflow: hidden;
                display: inline-block;
                font-family: @font;
                color: @font-white;
                font-size: @font-size;
                line-height: @font-size;
                font-weight: @light;
                position: relative;
                text-transform: none;
                margin: 0;
            }
            /* radiobutton */
            input[type="radio"]:not(:checked) + label:before,
            input[type="radio"]:checked + label:before {
                border: solid 1px @font-white;
            }
            /* radiobutton of checked or not-checked */
            input[type="radio"]:checked + label:after {
                background: @font-white;
            }
        }

        .form-page {
            .form-group {
                label {
                    color: @font-white;
                }

                .button {
                    margin-top: 0;
                    background: fade(@background-white,5%);
                    border-color: darken(@primary-color,10%);

                    &:hover {
                        background: darken(@primary-color,10%);
                    }
                }
            }
        }
    }
    /*other projects*/
    .other-projects {
        background: @black;
        color: @font-white;
        text-align: center;
        overflow: hidden;

        .other-projects-wrapper {
            margin-top: 40px;
        }

        &:after {
            content: '';
            display: block;
            clear: both;
            height: 0;
            width: 0;
            visibility: hidden;
            overflow: hidden;
        }
    }
    /*news-item-overview*/
    .news-item-overview {
        background: @light-grey;

        .news-item-grid {
            .opacity(0);

            &.grid-loaded {
                .opacity(1);
            }

            .sizer, .grid-item {
                width: 32%;
            }

            .gutter {
                width: 2%;
            }

            .grid-item {
                margin: 12px 0;
                text-align: left;
                text-decoration: none;
                background: @background-white;

                .image {
                    display: block;
                    overflow: hidden;

                    img {
                        display: block;
                        width: 100%;
                        .transition();
                    }
                }

                .text {
                    display: block;
                    width: 100%;
                    .box-sizing(border-box);
                    padding: 25px;
                    text-align: center;

                    .title {
                        font-weight: @regular;
                        font-size: @font-size + 7px;
                        line-height: @line-height + 7px;
                        text-transform: uppercase;
                        color: @font-color;
                        margin-bottom: 10px;
                    }

                    .location {
                        margin-bottom: 5px;
                    }

                    .info {
                        display: inline-block;
                        clear: both;
                        margin-top: 10px;
                        font-size: @font-size - 2px;
                        line-height: @line-height + 3px;
                        text-align: center;

                        > span {
                            display: inline-block;
                            vertical-align: middle;
                            margin: 10px 12px 0 12px;
                            position: relative;

                            img {
                                display: inline;
                                vertical-align: middle;
                                max-width: 25px;
                                max-height: 25px;
                                margin-right: 5px;
                                position: relative;
                                top: -1px;
                            }
                        }
                    }

                    .intro-text {
                        color: @font-color;
                    }
                }

                .footer {
                    display: block;
                    width: 100%;
                    .box-sizing(border-box);
                    padding: 25px;
                    border-top: solid 1px darken(@grey,5%);

                    .price {
                        .left();
                        font-size: @font-size + 14px;
                        line-height: @line-height + 14px;
                        font-weight: @regular;
                        color: @font-color;
                        max-width: ~'calc(100% - 150px)';

                        span {
                            display: block;
                            font-size: @font-size - 4px;
                            line-height: @line-height - 4px;
                            color: @font-color;
                        }
                    }

                    .button {
                        .right();
                        text-transform: uppercase;
                    }
                }

                &:hover {
                    .image {
                        img {
                            .transform(scale(1.1));
                        }
                    }
                }
            }

            &:after {
                content: '';
                .clear();
            }
        }
    }
    /*projects-overview*/
    .projects-overview {
        background: @light-grey;

        .projects-overview-wrapper {
            display: block;

            &:after {
                content: '';
                display: block;
                clear: both;
                height: 0;
                width: 0;
                visibility: hidden;
                overflow: hidden;
            }
        }

        .project {
            display: block;
            .left();
            width: 48%;
            margin: 25px 1% 0 1%;
            text-align: left;
            background: @background-white;
            text-decoration: none;
            overflow: hidden;
            color: @font-color;

            &:nth-child(2n+1) {
                clear: both;
            }

            .image {
                .background-size-cover();
                display: block;
                width: 60%;
                .left();
                min-height: 230px;
                overflow: hidden;
                .transition();
                z-index: 0;
            }

            .text {
                display: block;
                width: 40%;
                .right();
                .box-sizing(border-box);
                min-height: 230px;
                padding: 20px;
                font-size: @font-size;
                line-height: @line-height + 3px;
                background: @background-white;
                position: relative;
                z-index: 1;

                .project-header {
                    display: block;
                    margin-bottom: 15px;

                    .logo {
                        display: block;
                        .left();

                        img {
                            display: block;
                            max-width: 50px;
                        }
                    }

                    .header-text {
                        display: block;
                        .left();
                        max-width: ~'calc(100% - 50px)';
                        .box-sizing(border-box);
                        padding-left: 10px;

                        .name {
                            text-transform: uppercase;
                            font-size: @font-size + 2px;
                            line-height: @line-height + 2px;
                            font-weight: @bold;
                            color: @font-color;
                        }

                        .location {
                            font-size: @font-size - 2px;
                            line-height: @line-height - 2px;
                            color: @font-color;
                            position: relative;

                            i {
                                font-size: @font-size - 4px;
                                position: relative;
                                top: -1px;
                            }
                        }
                    }

                    &:after {
                        content: '';
                        display: block;
                        clear: both;
                        height: 0;
                        width: 0;
                        visibility: hidden;
                        overflow: hidden;
                    }
                }

                .button {
                    margin-top: 25px;
                    text-transform: none;
                    font-weight: @light;
                    color: @font-color;
                    padding: 6px 10px 8px 15px;
                    background: none;
                    border: solid 1px @font-color;

                    &:hover {
                        color: @font-white;
                        background: @font-color;
                    }
                }
            }

            &:hover {
                .image {
                    .transform(scale(1.1));
                }
            }
        }
    }
    /*aanbod-overview*/
    .aanbod-overview {
        .aanbod-block {
            display: block;
            .left();
            width: 31.333333%;
            margin: 25px 1% 0 1%;
            color: @font-white;
            text-align: center;
            background: @primary-color;
            .box-sizing(border-box);
            /*padding:25px 15px;*/
            text-decoration: none;

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

            .text {
                //margin-bottom:15px;
                padding: 25px 15px;
                min-height: 150px;
            }

            .title {
                font-weight: @medium;
                font-size: @font-size + 2px;
                line-height: @line-height + 2px;
                margin-bottom: 10px;
            }

            .price {
                margin-top: 15px;
                font-weight: @medium;
                font-size: @font-size + 2px;
                line-height: @line-height + 2px;
            }

            .button {
                display: block;
                background: fade(@background-white,25%);
                border: 0;
                border-top: 1px solid transparent;
                padding: 15px 5px 18px 5px;

                &:hover {
                    background: darken(@primary-color,10%);
                }
            }

            &:hover {
                background: fade(@primary-color,85%);

                .button {
                    background: darken(@primary-color,10%);
                }
            }

            &.vr-block {
                background: fade(@primary-color,75%);
            }
        }
    }
    /*aanbod-detail*/
    .aanbod-detail {
        text-align: center;
    }

    .aanbod-detail-slider {
        display: block;
        width: 48%;
        margin: 40px 1% 25px 1%;
        .left();
        position: relative;

        .slider-item {
            display: block;
            text-align: center;

            img {
                display: block;
                width: auto;
                max-width: 100%;
                margin: auto;
            }
        }

        .slider-info {
            font-size: @font-size - 2px;
            line-height: @line-height - 2px;
            display: block;
            width: 100%;
            text-align: center;
            margin-top: 2px;
        }

        .owl-carousel {
            display: block;
            width: 100%;

            .owl-item {
                img {
                    width: auto;
                    max-width: 100%;
                    display: block;
                    margin: auto;
                }
            }

            .owl-nav {
                margin: 0;
                padding: 0;
                height: 0;

                .owl-prev, .owl-next {
                    position: absolute;
                    top: 50%;
                    .transform(translateY(-50%));
                    z-index: 459;
                    color: @grey;
                    width: 45px;
                    height: 45px;
                    line-height: 43px;
                    text-align: center;
                    font-size: 25px;
                    text-shadow: 0px 0px 5px rgba(255,255,255,0.3);
                    cursor: pointer;
                }

                .owl-prev {
                    left: 0;
                }

                .owl-next {
                    right: 0;
                }
            }

            .owl-dots {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                right: 0;
                margin-top: 25px;

                .owl-dot {
                    display: inline-block;
                    margin: 5px 2px;

                    span {
                        display: block;
                        width: 8px;
                        height: 8px;
                        background: none;
                        border: solid 1px @primary-color;
                        .box-sizing(border-box);
                    }

                    &.active {
                        span {
                            background: @primary-color;
                        }
                    }
                }
            }
        }
    }

    .aanbod-detail-info {
        display: block;
        width: 48%;
        margin: 40px 1% 0 1%;
        .left();
        text-align: left;
        .box-sizing(border-box);
        padding: 0 0 0 30px;

        .specs {
            .spec-block {
                display: block;
                .box-sizing(border-box);
                padding: 0 0 25px 0;
                margin: 0 0 25px 0;
                border-bottom: solid 1px @grey;

                &.features {
                    ul {
                        margin: 0 0 25px 0;
                        padding: 0;
                        list-style: none;

                        li {
                            display: block;
                            margin: 0 0 10px 0;
                            padding: 0 0 0 15px;
                            position: relative;

                            &:before {
                                content: '\e806';
                                font-family: @icon-font;
                                display: block;
                                position: absolute;
                                top: 0;
                                left: 0;
                                color: @primary-color;
                                font-size: @font-size - 4px;
                            }

                            &:last-of-type {
                                margin: 0;
                            }
                        }
                    }
                }

                &.downloads {
                    h4 {
                        margin-bottom: 10px;
                    }

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

                        li {
                            margin: 0;
                            padding: 0;
                            display: block;

                            a {
                                display: inline-block;
                                padding: 0 0 0 30px;
                                position: relative;

                                .icon {
                                    display: block;
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    max-width: 20px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    /*gallery*/
    .gallery {
        .back {
            text-align: center;
        }

        .grid {
            margin-top: 35px;
            .transition();
            .opacity(0);

            &.loaded {
                .opacity(1);
            }

            .sizer, .grid-item {
                width: 24.25%;
            }

            .gutter {
                width: 1%;
            }

            .grid-item {
                margin: 7px 0;
                text-align: left;
                text-decoration: none;
                overflow: hidden;

                &.image {
                    background: @black;

                    img {
                        display: block;
                        width: 100%;
                        .transition();
                    }

                    &:hover {
                        img {
                            .transform(scale(1.1));
                            .opacity(0.8);
                        }
                    }
                }

                &.fixed-block {
                    position: absolute;
                    top: 0;
                    right: 0;
                    background: @bg-spotlight;
                    color: @font-white;
                    font-size: @font-size + 10px;
                    line-height: @line-height + 13px;
                    text-align: center;
                    font-weight: @regular;
                    .box-sizing(border-box);
                    padding: 50px 25px;
                    text-transform: uppercase;
                }
            }

            &:after {
                content: '';
                display: block;
                clear: both;
                height: 0;
                width: 0;
                visibility: hidden;
                overflow: hidden;
            }
        }
    }
    /*gallery-overview*/
    .gallery-overview {
        background: @light-grey;

        .gallery-overview-wrapper {
            display: block;

            &:after {
                content: '';
                display: block;
                clear: both;
                height: 0;
                width: 0;
                visibility: hidden;
                overflow: hidden;
            }
        }

        .gallery-item {
            display: block;
            .left();
            width: 48%;
            margin: 25px 1%;
            text-align: left;
            background: @background-white;
            text-decoration: none;
            overflow: hidden;

            &:nth-child(2n+1) {
                clear: both;
            }

            .image {
                .background-size-cover();
                display: block;
                width: 60%;
                .left();
                min-height: 230px;
                overflow: hidden;
                .transition();
                z-index: 0;
            }

            .text {
                display: block;
                width: 40%;
                .right();
                .box-sizing(border-box);
                min-height: 230px;
                padding: 20px;
                font-size: @font-size;
                line-height: @line-height + 3px;
                background: @background-white;
                position: relative;
                z-index: 1;

                .project-header {
                    display: block;
                    margin-bottom: 15px;

                    .logo {
                        display: block;
                        .left();

                        img {
                            display: block;
                            max-width: 50px;
                        }
                    }

                    .header-text {
                        display: block;
                        .left();
                        max-width: ~'calc(100% - 50px)';
                        .box-sizing(border-box);
                        padding-left: 10px;

                        .name {
                            text-transform: uppercase;
                            font-size: @font-size + 2px;
                            line-height: @line-height + 2px;
                            font-weight: @bold;
                            color: @font-color;
                        }

                        .location {
                            font-size: @font-size - 2px;
                            line-height: @line-height - 2px;
                            color: @font-color;
                            position: relative;

                            i {
                                font-size: @font-size - 4px;
                                position: relative;
                                top: -1px;
                            }
                        }
                    }

                    &:after {
                        content: '';
                        display: block;
                        clear: both;
                        height: 0;
                        width: 0;
                        visibility: hidden;
                        overflow: hidden;
                    }
                }

                .button {
                    margin-top: 25px;
                    text-transform: none;
                    font-weight: @light;
                    color: @font-color;
                    padding: 6px 10px 8px 15px;
                    background: none;
                    border: solid 1px @font-color;

                    &:hover {
                        color: @font-white;
                        background: @font-color;
                    }
                }
            }

            &:hover {
                .image {
                    .transform(scale(1.1));
                }
            }
        }
    }
    /*google maps*/
    .map {
        display: block;
        width: 100%;
        height: 500px;
        background: @light-grey;
    }
    /*news*/
    .news {
        background: @light-grey;

        .news-slider {

            .owl-stage {
                margin: 0 auto;
            }

            .news-item {
                display: block;
                margin: 0 auto;
                background: @background-white;
                text-align: left;
                text-decoration: none;

                .image {
                    display: block;
                    overflow: hidden;
                }

                img {
                    display: block;
                    width: 100%;
                    .transition();
                }

                .text {
                    display: block;
                    width: 100%;
                    .box-sizing(border-box);
                    padding: 20px 25px 85px 25px;
                    position: relative;
                    font-weight: @regular;

                    .title {
                        font-weight: @regular;
                        font-size: @font-size + 3px;
                        line-height: @line-height + 7px;
                        text-transform: uppercase;
                        color: @font-color;
                    }

                    .date {
                        margin: 5px 0;
                        font-size: @font-size - 3px;
                        line-height: @line-height - 3px;
                        font-weight: @light;
                    }

                    .intro-text {
                        color: @font-color;
                    }

                    .button {
                        text-transform: uppercase;
                        position: absolute;
                        left: 20px;
                        bottom: 20px;
                    }
                }

                &:hover {
                    img {
                        .transform(scale(1.1));
                    }
                }
            }

            .owl-carousel {
                width: 100%;
                display: block;
                position: relative;
                z-index: 0;
                margin: 35px 0;

                .owl-nav {
                    margin: 0;
                    padding: 0;
                    height: 0;

                    .owl-prev, .owl-next {
                        position: absolute;
                        top: 50%;
                        .transform(translateY(-50%));
                        display: block;
                        width: 60px;
                        height: 60px;
                        line-height: 60px;
                        font-size: 28px;
                        text-align: center;
                        color: @font-color;
                        background: fade(@background-white,80%);
                        .transition();
                        z-index: 99;

                        &:hover {
                            background: @primary-color;
                            color: @font-white;
                        }
                    }

                    .owl-prev {
                        left: -75px;
                    }

                    .owl-next {
                        right: -75px;
                    }
                }
            }
        }

        .button {
            &.more {
                font-size: @font-size + 1px;
                line-height: @line-height + 1px;
                font-weight: @regular;
                text-transform: uppercase;
                border: 0;
                background: @primary-color;
                color: @font-white;
                padding: 10px 15px 10px 20px;

                &:hover {
                    background: @primary-color;
                }
            }
        }
    }
    /*sitemap*/
    .sitemap {
        ul {
            list-style: none;
            margin: 25px 0;

            li {
                padding-left: 20px;
                position: relative;

                &:before {
                    content: '';
                    display: block;
                    width: 7px;
                    height: 7px;
                    .box-sizing(border-box);
                    border: solid 2px @secondary-color;
                    position: absolute;
                    top: 9px;
                    left: 0;
                }

                margin: 3px 0;

                a {
                    text-decoration: none;
                    color: @font-grey;

                    &:hover {
                        text-decoration: underline;
                    }
                }

                > ul {
                    margin: 5px 0 10px 0;

                    li {
                        &:before {
                            width: 5px;
                            height: 5px;
                            border-color: @primary-color;
                            top: 10px;
                            border-width: 1px;
                        }
                    }
                }
            }
        }

        .ul-top {
            > li {
                > a {
                    color: @font-color;
                }
            }
        }
    }
    /*type-detail*/
    .type-detail {
        .type-detail-slider {
            display: block;
            .left();
            width: 48%;
            margin: 0 1%;

            .slider {
                display: block;
                position: relative;
                //border: solid 1px @light-grey;
                .box-sizing(border-box);

                .slider-item {
                    display: block;
                    width: 100%;
                    //height: 450px;
                    .box-sizing(border-box);
                    position: relative;
                    /*> img {
                        display: block;
                        max-width: 90%;
                        max-height: 90%;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        .transform(translate(-50%,-50%));
                    }*/
                }

                &.owl-carousel {
                    .owl-stage {
                        margin: 0 auto;
                    }

                    .owl-item {
                        .box-sizing(border-box);
                        //padding: 0 1px;
                        img {
                            display: block;
                            //width: auto;
                            //height: auto;
                        }
                    }

                    .owl-nav {
                        margin: 0;
                        padding: 0;
                        height: 0;

                        .owl-prev, .owl-next {
                            position: absolute;
                            top: 50%;
                            .transform(translateY(-50%));
                            z-index: 499;
                            color: @font-color;
                            width: 45px;
                            height: 45px;
                            line-height: 45px;
                            text-align: center;
                            font-size: 18px;
                            cursor: pointer;
                            background: none;
                            .transition();
                            display: block;

                            i {
                                position: relative;
                            }

                            &:hover {
                                background: @primary-color;
                                color: @font-white;
                            }

                            &.disabled {
                                cursor: default;
                                color: fade(@primary-color,40%);

                                &:hover {
                                    background: none;
                                    color: fade(@primary-color,40%);
                                }
                            }
                        }

                        .owl-prev {
                            left: -45px;
                            text-align: left;

                            i {
                                left: -2px;
                            }
                        }

                        .owl-next {
                            right: -45px;
                            text-align: right;

                            i {
                                right: -2px;
                            }
                        }
                    }
                }
            }

            .slider-img-nav {
                display: block;
                width: 102%;
                margin: 0 -1%;

                &:after {
                    content: '';
                    .clear();
                }

                > a {
                    display: block;
                    text-decoration: none;
                    .left();
                    width: 18%;
                    margin: 10px 1% 0 1%;
                    //height: 75px;
                    .box-sizing(border-box);
                    border: solid 1px @grey;
                    position: relative;

                    > img {
                        display: block;
                        width: 100%;
                        //max-width: 85%;
                        //max-height: 85%;
                        //position: absolute;
                        //top: 50%;
                        //left: 50%;
                        //.transform(translate(-50%,-50%));
                    }

                    &:hover {
                        border-color: @primary-color;
                    }
                }
            }
        }

        .type-detail-text {
            display: block;
            .right();
            width: 48%;
            margin: 0 1%;
        }
    }
    //Interactieve map
    .interactive-map {
        position: relative;
        height: @map-height;
        margin-top: 30px;

        .legenda {
            display: none;
        }

        #map-canvas {
            height: @map-height;
            width: ~"calc(100% - 300px)" !important;
            position: absolute;
            top: 0;
            left: 300px;
            z-index: 999996;
        }

        .map-legend {
            border-top: 1px solid #efefef;
            width: 300px;
            background: #ffffff;
            z-index: 999998;
            left: 0px;
            top: 0;
            bottom: 0px;
            transition: all 0.3s ease;
            overflow-x: hidden;
            overflow-y: auto;
            height: @map-height;
            position: absolute;
            .box-sizing(border-box);

            &::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
                border-radius: 10px;
                background-color: #F5F5F5;
            }

            &::-webkit-scrollbar {
                width: 5px;
                background-color: #F5F5F5;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
                background-color: #555;
            }
        }

        .map-legend.open {
            left: 300px;
        }

        .map-legend .item {
            display: block;
            float: left;
            width: 100%;
            border-bottom: 1px solid #efefef;
            padding: 15px 0;
            cursor: pointer;
            transition: all 0.3s ease;

            .twelve {
                text-align: left;
            }
        }

        .map-legend .item.active, .map-legend .item:hover {
            background: #efefef;
            border-left: 5px solid @primary-color;
        }

        .map-legend .item strong {
            display: block;
            text-transform: uppercase;
            font-weight: @bold;
        }

        .map-legend .item span {
            font-size: 12px;
            display: block;
            float: left;
        }

        .map-legend .item img {
            margin-left: 15px;
        }

        .map-legend .item-all {
            display: block;
            float: left;
            width: 100%;
            border-bottom: 1px solid #efefef;
            padding: 15px 0;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .map-legend .item-all:hover {
            background: #efefef;
        }

        .map-image {
            width: 50%;
            float: left;
            margin-right: 20px;
        }

        .map-text {
            float: left;
            width: 45%;
            padding: 20px 10px;
            .box-sizing(border-box);
            text-align: left;

            strong {
                font-size: @font-size + 5px;
                font-weight: @bold;
                text-transform: uppercase;
            }

            p {
                margin: 17px 0;
                font-size: @font-size - 1px;
                line-height: @line-height - 1px;
            }

            .button {
                font-size: @font-size - 1px;
                line-height: @line-height - 1px;
                text-align: center;
                padding: 10px;

                i:before {
                    width: auto;
                }
            }
        }

        .gm-ui-hover-effect {
            width: 50px !important;
            height: 50px !important;

            img {
                width: 25px !important;
                height: 25px !important;
            }
        }

        .scale {
            max-width: 100% !important;
        }

        .gm-style-iw {
            top: 0 !important;
            left: 0 !important;

            & > div {
                display: block !important;

                &::-webkit-scrollbar-track {
                    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
                    border-radius: 10px;
                    background-color: #F5F5F5;
                }

                &::-webkit-scrollbar {
                    width: 5px;
                    background-color: #F5F5F5;
                }

                &::-webkit-scrollbar-thumb {
                    border-radius: 10px;
                    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
                    background-color: #555;
                }
            }
        }
    }
}




/*FOOTER
============================================================================================*/
footer{
    background:@black;
    color:@font-white;
    font-weight:@light;
    font-size:@font-size;
    line-height:@line-height;
    .footer-upper{
        .box-sizing(border-box);
        padding:40px 0;
        a{
            color:@font-white;
            text-decoration:none;
            position:relative;
            &:after{
                content:'';
                display:block;
                width:0;
                height:1px;
                background:@font-white;
                position:absolute;
                bottom:-2px;
                left:0;
                right:100%;
                .transition();
            }
            &:hover{
                &:after{
                    right:0;
                    width:100%;
                }
            }
        }
        .contact-info{
            .logo{
                display:block;
                width:51px;
                margin-bottom:15px;
                img{
                    display:block;
                    width:100%;
                }
            }
            .info{
                display:block;
            }
        }
        .social{
            display:block;
            margin:15px 0 25px 0;
            a{
                display:inline-block;
                font-size:22px;
                color:@max-width-content;
                margin:5px 5px 0 0;
                &:hover{
                    color:fade(@font-white,50%);
                }
                &:after{
                    display:none;
                }
            }
            &:after{
                content:'';
                display:block;
                clear:both;
                height:0;
                width:0;
                visibility:hidden;
                overflow:hidden;
            }
        }
        .links{
            text-align:center;
            nav{
                -webkit-column-count: 2; /* Chrome, Safari, Opera */
                -moz-column-count: 2; /* Firefox */
                column-count: 2;

                -webkit-column-gap: 90px; /* Chrome, Safari, Opera */
                -moz-column-gap: 90px; /* Firefox */
                column-gap: 90px;

                -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
                page-break-inside: avoid; /* Firefox */
                break-inside: avoid-column; /* IE 10+ */

                display:inline-block;
                ul{
                    margin:0;
                    padding:0;
                    list-style:none;
                    text-align:left;
                    li{
                        margin:0 0 7px 0;
                        padding:0;
                        display:block;
                        width:100%;
                        a{
                            display:inline-block;
                        }
                        &:last-of-type{
                            margin:0;
                        }
                    }
                }           
            }
        }
        .ag{
            text-align:right;
            .box-sizing(border-box);
            padding-left:18%;
            img{
                display:inline-block;
                margin-top:10px;
            }
        } 
    }
    .footer-lower{
        .box-sizing(border-box);
        padding:10px 0;
        border-top:solid 1px fade(@background-white,20%);
        font-size:@font-size - 2px;
        line-height:@line-height - 2px;
        color:@font-grey;  
        a{
            color:@font-grey;
        }
        .copyright{
            display:block;
            .left();
            ul{
                margin:0;
                padding:0;
                list-style:none;
                li{
                    display:block;
                    margin:0 10px 0 0;
                    padding:0 10px 0 0;
                    .left();
                    position:relative;
                    &:after{
                        content:'';
                        display:block;
                        width:1px;
                        height:55%;
                        background:@font-grey;
                        position:absolute;
                        right:0;
                        top:50%;
                        .transform(translateY(-50%));
                    }
                    &:last-of-type{
                        margin:0;
                        padding:0;
                        &:after{
                            display:none;
                        }
                    }
                }
                &:after{
                    content:'';
                    display:block;
                    clear:both;
                    height:0;
                    width:0;
                    overflow:hidden;
                    visibility:hidden;
                }
            }
        }
        .website-by{
            display:block;
            .right();
        }
    }
}

/*maginific popup - VIDEO/IMAGE OVERLAY
============================================================================================*/
.mfp-wrap{
    z-index:9999997;
}
.mfp-bg{
    background-color:@black;
    z-index:9999997;
}
.mfp-content {
    width: auto;
    max-width: (@max-width-wrapper / 2);
    background: @background-white;

    .mfp-figure {
        &:after {
            background: @background-white;
            box-shadow:none;
        }
    }
}
button.mfp-arrow {
    display: none;
}
.mfp-move-vertical{
    /*start state*/
    &.mfp-with-anim{
        .opacity(0);
        .transition();
        .transform(translateY(-250px));
    }
    &.mfp-bg{
        .opacity(0);
        .transition();
    }
    
    /* animate in */
    &.mfp-ready {
        .mfp-with-anim {
            .opacity(1);
            .transform(translateY(0));
        }
        &.mfp-bg {
            .opacity(0.9);
        }
    }

    /* animate out */
    &.mfp-removing {
        .mfp-with-anim {
            .transform(translateY(250px));
            .opacity(0);
        }
        &.mfp-bg {
            .opacity(0);
        }

    }
}
.mfp-container{
    button.mfp-close, .mfp-close{
        color:@font-white;
        font-size:40px;
        line-height:50px;
        width:50px;
        height:50px;
        background:@primary-color;
        .transition();
        .opacity(1);
        .transform(translateY(-100%));
        &:hover{
            background:@font-white;
            color:@primary-color;
        }
    }
    &.mfp-image-holder{
        .mfp-close{
            padding:0;
            text-align:center;
            right:0;
        }
    }
    img.mfp-img{
        padding:0;
    }
    .video-overlay{
        text-align:center;        
        .closeVideo{
            text-decoration:none;
            display:inline-block;
            padding:10px;
            color:@font-white;
            background:@primary-color;
            text-transform:uppercase;
            &:hover{
                background:@font-white;
                color:@primary-color;
            }
        }
        .video{
            position:relative;
	        padding-bottom:56.25%;
	        height:0;
	        overflow:hidden;
            max-width:100%;
            .box-shadow(0px,0px,15px,0px,rgba(0,0,0,0.5));
            margin-bottom:15px;
            iframe,object,embed,video.video-file{
                position:absolute;
	            top:0;
	            left:0;
	            width:100%;
                height:100%;
                
            }
        }
        img{
            display:block;
            width:100%;
            margin-bottom:15px;
        }
        &.eindejaar{
            .video{
                padding-bottom:141.45%
            }
        }
    }
}

/*slick lightbox popup
============================================================================================*/
.slick-lightbox{
    .slick-lightbox-inner{
        .slick-lightbox-slick{
            .slick-lightbox-slick-item{
                .slick-lightbox-slick-item-inner{
                    position:relative;
                }
                .slick-lightbox-slick-caption{
                    //position:fixed;
                    //top:10px;
                    top:auto;
                    left:0;
                    right:0;
                    //.transform(translateX(-50%));
                    position:absolute;
                    bottom:100%;
                    margin-bottom:15px;
                    //width:100%;
                    font-weight:@bold;
                    font-size:@font-size + 4px;
                    line-height:@line-height + 4px;
                    .button{
                        margin:5px;
                        padding:10px 15px;
                        background:@bg-spotlight;
                        border-color:@primary-color;
                        border:0;
                        color:@font-spotlight;
                        &:hover{
                            background:@background-white;
                            color:@font-color;
                        }
                    }
                }
            }
            .slick-prev,.slick-next{
                width:40px;
                height:40px;
                margin-top:-20px;
                &:before{
                    font-family:@icon-font;
                    .transition();
                    .opacity(0.8);
                    font-size:30px;
                }  
                &:hover{
                    &:before{
                        .opacity(1);
                    }
                }              
            }
            .slick-prev{
                &:before{
                    content:'\e805';
                }                
            }
            .slick-next{
                &:before{
                    content:'\e806';
                }                
            }
        }
        .slick-lightbox-close{
            height:auto;
            width:auto;
            top:10px;
            right:15px;
            &:before{
                content:'\e80e';
                font-family:@icon-font;
                font-size:30px;
                color:@font-white;
                .opacity(0.8);
                .transition();

            }
            &:hover{
                &:before{
                    .opacity(1);
                }
            }
        }
    }
}

.infoWindow {
    width: 250px !important;
    background-color: #fff;
    box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
    border-radius: 2px 2px 0 0;
    text-align: left;
    padding: 15px;
    font-size: @font-size - 5px;
    line-height: @line-height - 5px;

    &:before {
        content:"";
        display: block;
        position: absolute;
        bottom: -15px;
        left: 32px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 15px 7.5px 0 7.5px;
        border-color: white transparent transparent transparent;
    }
}



/*##########################################################################################
FULL COLOR TEMPLATE
############################################################################################*/
#FullColorTemplate {
    background-color: @primary-color;

    > .wrapper {
        background-color: @background-white;
        border-color: @border-color;
    }

    h1, h2, h3, h4, h5 {
        font-family: @title-font2;
        font-weight: @bold;
    }

    font-family: @title-font2;

    .button {
        font-family: @title-font2;

        &.ghost {
            border-width: 1px;
            position: relative;
            text-align: center;
            padding: 11px 15px 16px 20px;
            background: fade(@black,20%);
            z-index: 0;

            &:before {
                content: '';
                display: block;
                width: 101%;
                height: 101%;
                .box-sizing(border-box);
                border: solid 1px @primary-color;
                position: absolute;
                top: -8px;
                left: 6px;
                z-index: -1;
                .transition();
            }

            &.no-frame {
                border-bottom-width: 3px;
                padding: 9px 15px 10px 15px;
                background: none;
                border-color: @primary-color;
                color: @primary-color;

                &:before {
                    display: none;
                }

                &:hover {
                    color: @font-white;
                    background: @primary-color;
                }
            }

            &:hover {
                &:before {
                    background: @primary-color;
                }
            }
        }
    }

    .bg-image {
        position: relative;
        background-color: @primary-color;
        color: @font-white;

        &:after {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            background: fade(@primary-color,90%);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 0;
        }

        > div {
            position: relative;
            z-index: 1;
        }
    }
    /*data-table*/
    .data-table {
        margin-top: 15px;

        &:first-child {
            margin-top: 0;
        }

        thead {
            font-family: @title-font2;

            tr {
                background: @primary-color;

                td, th {
                    color: @font-white;
                }
            }
        }
    }
    /*Cookie consent 2022*/
    .custom-consent {
        background-color: @secondary-color;
        border: 1px solid @primary-color;

        button {
            margin-left: 20px;
            background-color: @primary-color;
        }
    }

    .quote {
        font-style: italic;
        font-size: @font-size + 4px;
        line-height: @line-height + 4px;
        color: @font-white;
        border-left: 4px solid @background-white;
        margin: 1em 0;
        padding: 0.5em 1em;

        span {
            &:before {
                content: open-quote;
            }

            &:after {
                content: close-quote;
            }
        }
    }
    /*HEADER*/
    header {
        &.small {
            .inner-header {
                border-bottom-color: @grey;
            }
        }

        .inner-header {
            border-bottom-color: @primary-color;

            &.wrapper {
                border-color: @border-color;
                //background-color: @primary-color;
            }
        }
        /*top header*/
        .top-header {
            display: none;
        }
        /*main-header*/
        .main-header {
            background: @primary-color;
        }
        /*hamburger*/
        .hamburger {
            span {
                background: @font-white;

                &:after, &:before {
                    background: @font-white;
                }
            }
        }
        /*main-nav*/
        .main-nav {
            ul {
                li {
                    a {
                        color: @font-white;

                        &:after {
                            background: @font-white;
                        }
                    }
                }
            }
        }
        /*sub-nav*/
        .sub-nav {
            background: fade(@primary-color,95%);
            border-bottom: 0;

            .sub-nav-block {
                .title {
                    color: @font-white;
                }

                ul {
                    li {
                        a {
                            color: @font-white;

                            &:before {
                                color: @font-white;
                            }

                            &:hover {
                                color: fade(@font-white,75%);
                            }
                        }
                    }

                    &.big-links {
                        li {
                            a {
                                color: @font-white;

                                &:hover {
                                    color: fade(@font-white,75%);
                                }
                            }
                        }
                    }
                }

                .show-other-projects {
                    color: @font-white;

                    &:hover {
                        background: @secondary-color;
                    }
                }
            }

            .main-nav-mobile {
                li {
                    a {
                        color: @font-white;
                    }
                }
            }
        }
    }
    /*CONTENT*/
    .content {
        padding-top: 101px; //hoogte van de fixed header
        /*top image banner*/
        .top-image-banner {
            .quickLink {
                position: absolute;
                top: 20px;
                right: 20px;
                text-decoration: none;
                padding: 25px 35px 30px 40px;
                color: @font-white;
                background: @primary-color;
                border: solid 1px @background-white;
                z-index: 5;
                font-size: @font-size + 10px;
                line-height: @line-height + 15px;

                &:before {
                    content: '';
                    display: block;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: -10px;
                    right: -10px;
                    background: none;
                    border: solid 1px @background-white;
                }
            }

            .banner-text {
                bottom: 50%;
                .transform(translateY(50%));

                h1 {
                    color: @font-white;

                    .xl {
                        font-size: @font-size + 65px;
                        line-height: @line-height + 65px;
                        letter-spacing: 30px;
                        display: inline-block;
                        margin-bottom: 5px;
                    }

                    span {
                        padding: 0;
                        background: none;
                    }

                    .sub {
                        display: block;
                    }
                }

                .buttons {
                    margin-top: 50px;

                    .button {
                        margin: 15px 20px 0 20px;
                        min-width: 200px;

                        &.ghost {
                            border-color: @font-white;
                            color: @font-white;

                            &:before {
                                border-color: @font-white;
                            }

                            &:hover {
                                background: @font-white;
                                color: @primary-color;

                                &:before {
                                    background: none;
                                }
                            }
                        }
                    }

                    &.blue {
                        .button {
                            margin: 15px 20px 0 20px;
                            min-width: 200px;

                            &.ghost {
                                border-color: @font-white;
                                color: @font-white;
                                background: @primary-color;

                                &:before {
                                    border-color: @font-white;
                                    //background: @primary-color;
                                }

                                &:hover {
                                    background: @font-white;
                                    color: @primary-color;

                                    &:before {
                                        background: none;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            &.small {
                .banner-text {
                    h1 {
                        line-height: inherit;

                        .sub {
                            font-size: @font-size + 10px;
                            line-height: @line-height + 10px;
                        }
                    }
                }
            }
        }
        /*intro*/
        .intro {
            background: @primary-color;
            color: @font-white;
            position: relative;

            &:after {
                content: '';
                display: block;
                width: 80px;
                height: 2px;
                background: fade(@background-white,30%);
                position: absolute;
                bottom: 0;
                left: 50%;
                .transform(translateX(-50%));
            }

            &.with-video {
                .video {
                    margin-bottom: 25px;
                }
            }
        }
        /*event banner*/
        .event-banner {
            border-top: 1px solid #fff;
            border-bottom: 1px solid #fff;

            .left {
                .signature {
                    text-align: right;

                    img {
                        width: 250px;
                    }
                }
            }

            .right {
                width: 23.333333%;
                margin-left: 10%;

                .button {
                    color: @font-white;
                    border-color: @background-white;
                    background-color: @primary-color;
                    margin-top: 15px;

                    &.ghost {
                        background: @primary-color;

                        &:before {
                            border: solid 1px @background-white;
                        }

                        &:hover {
                            background-color: @background-white;
                            color: @font-color;

                            &:before {
                                background-color: transparent;
                            }
                        }
                    }
                }
            }
        }
        /*usps*/
        .usps {
            background: @primary-color;
            counter-reset: usp-counter;

            .usp {
                background: @primary-color;
                color: @font-white;
                margin: 25px 0;
                display: block;
                counter-increment: usp-counter;

                .image {
                    width: 45%;
                    margin: 30px 0;
                    .right();
                    overflow: visible;
                    .box-sizing(border-box);
                    border: solid 3px @background-white;
                    position: relative;

                    &:after {
                        content: '';
                        display: block;
                        width: 100%;
                        height: 100%;
                        background: none;
                        border: solid 3px @background-white;
                        position: absolute;
                        top: -30px;
                        right: -30px;
                    }
                }

                .text {
                    width: 55%;
                    margin: 30px 0;
                    .left();
                    padding: 5% 10% 5% 0;

                    .title {
                        padding-left: 55px;
                        position: relative;
                        .box-sizing(border-box);

                        &:before {
                            content: "0" counter(usp-counter);
                            position: absolute;
                            top: 0;
                            left: 0;
                            color: fade(@font-white,50%);
                            border-bottom: solid 1px @font-white;
                            padding: 0 0 10px 0;
                            font-size: @font-size + 20px;
                        }
                    }
                }

                .button {
                    color: @font-white;
                    border-color: @background-white;
                    background-color: @primary-color;

                    &.ghost {
                        background: @primary-color;

                        &:before {
                            border: solid 1px @background-white;
                        }

                        &:hover {
                            background-color: @background-white;
                            color: @font-color;

                            &:before {
                                background-color: transparent;
                            }
                        }
                    }
                }

                &:nth-child(2n+2) {
                    .image {
                        .left();

                        &:after {
                            top: 30px;
                            right: 30px;
                        }
                    }

                    .text {
                        .right();
                        padding: 5% 0 5% 10%;
                    }
                }
            }
        }
        /*extra-info*/
        .extra-info {
            background: @primary-color;
            border-top: solid 1px @background-white;
            border-bottom: solid 1px @background-white;
            display: block;
            display: flex;
            flex-wrap: wrap;

            &:after {
                content: '';
                .clear();
            }

            .extra-info-item {
                padding: 35px 25px;
                min-height: 0;
                width: 50%;
                .box-sizing(border-box);
                margin: 0;
                text-align: center;
                height: auto !important;

                .inner {
                    display: inline-block;
                    position: relative;
                    .box-sizing(border-box);
                    padding-left: 115px;
                    text-align: left;

                    &:after {
                        content: '';
                        .clear();
                    }
                }

                &:nth-child(2n + 2) {
                    border-left: solid 1px @background-white;
                }

                &:hover {
                    background: @secondary-color;
                }
            }
        }
        /*cta-info*/
        .cta-info {
            background: @secondary-color;

            .cta-info-wrapper {
                background: @secondary-color;
            }

            .cta-block {
                background: @secondary-color;
                font-family: @title-font2;
                padding: 50px 25px 48px 25px;
            }
        }
        /*about-wrapper*/
        .about-wrapper {
            display: block;
            display: flex;
            flex-wrap: wrap;
            width: 102%;
            margin: 0 -1%;

            &:after {
                content: '';
                .clear();
            }

            .text {
                display: block;
                width: 48%;
                margin: 25px 1%;
                .left();
                padding: 35px 35px 0 0;
                .box-sizing(border-box);

                .inner {
                    display: block;
                    .box-sizing(border-box);
                    position: relative;
                    min-height: 100%;
                    border: solid 3px @background-white;
                    padding: 60px;

                    .inner-text {
                        display: block;
                        vertical-align: middle;
                        z-index: 1;
                        position: relative;
                        width: 85%;
                        margin: 35px auto;
                        .box-sizing(border-box);
                        padding-left: 35px;
                    }

                    &:after {
                        content: '';
                        width: 100%;
                        height: 100%;
                        display: block;
                        border: solid 3px @background-white;
                        position: absolute;
                        top: -35px;
                        right: -35px;
                        z-index: 0;
                    }
                }

                .buttons {
                    margin-top: 35px;

                    .button {
                        &.ghost {
                            border-color: @font-white;
                            color: @font-white;

                            &:before {
                                border-color: @font-white;
                            }

                            &:hover {
                                background: @font-white;
                                color: @primary-color;

                                &:before {
                                    background: @font-white;
                                }
                            }
                        }
                    }
                }
            }

            .slider-wrapper {
                display: block;
                width: 48%;
                margin: 25px 1%;
                .left();
            }
        }
        /*contactform*/
        .contactform {
            .form-page {
                .form-group {

                    .button {
                        margin-top: 15px;
                        border-color: fade(@background-white,80%);
                        border-width: 1px;

                        &:hover {
                            background: darken(@primary-color,10%);
                        }
                    }
                }
            }

            &.event-form {
                background: #fff;
                color: @font-color;

                input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], textarea, select {
                    border: 1px solid @font-color;
                    background-color: fade(@background-white,10%);
                    color: @font-color;

                    &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
                        color: fade(@font-color,75%);
                    }

                    &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                        color: fade(@font-color,75%);
                        opacity: 1;
                    }

                    &::-moz-placeholder { /* Mozilla Firefox 19+ */
                        color: fade(@font-color,75%);
                        opacity: 1;
                    }

                    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
                        color: fade(@font-color,75%);
                    }
                }

                a {
                    color: @font-color;
                }

                select {
                    border: 1px solid @font-color;
                    background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+');


                    option {
                        background: @background-white;
                        color: @font-color;
                    }
                }

                .checkbox {
                    input[type="checkbox"]:not(:checked) + label,
                    input[type="checkbox"]:checked + label {
                        color: @font-color;
                    }
                    /* checkbox */
                    input[type="checkbox"]:not(:checked) + label:before,
                    input[type="checkbox"]:checked + label:before {
                        border: solid 1px @font-color;
                    }
                    /* checkbox of checked or not-checked */
                    input[type="checkbox"]:checked + label:after {
                        color: @font-color;
                    }
                }

                .radiobutton {
                    input[type="radio"]:not(:checked) + label,
                    input[type="radio"]:checked + label {
                        color: @font-color;
                    }
                    /* radiobutton */
                    input[type="radio"]:not(:checked) + label:before,
                    input[type="radio"]:checked + label:before {
                        border: solid 1px @font-color;
                    }
                    /* radiobutton of checked or not-checked */
                    input[type="radio"]:checked + label:after {
                        background: @font-color;
                    }
                }

                .form-page {
                    .form-group {
                        label {
                            color: @font-color;
                        }

                        .button {
                            background: @primary-color;
                            border-color: darken(@primary-color,10%);
                            color: @font-white;
                            float: right;

                            &:hover {
                                background: @secondary-color;
                            }
                        }
                    }
                }
            }
        }
        /*type-detail*/
        .type-detail {
            .button {
                margin: 10px 10px 0 0;
            }
        }
        /*aanbod-overview*/
        .aanbod-overview {
            .aanbod-block {
                &:hover {
                    background: @primary-color;

                    .button {
                        background: fade(@background-white,25%);
                    }
                }
            }
        }
        /*video banner 2023*/
        .video-banner {
            display: block;
            position: relative;
            background: @black;

            .banner-still {
                display: block;
                .transition();
                //.opacity(1);
                cursor: pointer;
                position: relative;
                z-index: 2;

                &:after {
                    content: "\e812";
                    font-family: @icon-font;
                    text-align: center;
                    width: 90px;
                    height: 90px;
                    line-height: 90px;
                    font-size: 50px;
                    color: @font-white;
                    .border-radius(50%,50%,50%,50%);
                    border: solid 5px @background-white;
                    position: absolute;
                    top: 35%;
                    left: 50%;
                    .transform(translateX(-50%));
                    .box-shadow(0px,0px,10px,0px,fade(@black,30%));
                    text-shadow: 0px 0px 10px fade(@black,30%);
                    z-index: 1;
                }

                > img {
                    display: block;
                    width: 100%;
                    position: relative;
                    z-index: 0;
                }
                /*.banner-text {
                    display: block;
                    text-align: center;
                    position: absolute;
                    left: 80px;
                    right: 80px;
                    bottom: 100px;
                    z-index: 2;

                    .title {
                        color: @font-white;

                        span {
                            padding: 2px 10px;
                            background: fade(@black,60%);
                        }

                        .sub {
                            display: inline-block;
                        }
                    }
                }*/

                .quickLink {
                    position: absolute;
                    top: 20px;
                    right: 20px;
                    text-decoration: none;
                    padding: 25px 35px 30px 40px;
                    color: @font-white;
                    background: @primary-color;
                    border: solid 1px @background-white;
                    z-index: 5;
                    font-size: @font-size + 10px;
                    line-height: @line-height + 15px;

                    &:before {
                        content: '';
                        display: block;
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: -10px;
                        right: -10px;
                        background: none;
                        border: solid 1px @background-white;
                    }
                }

                .banner-text {
                    bottom: 38%;
                    .transform(translateY(50%));

                    h1 {
                        color: @font-white;

                        .xl {
                            font-size: @font-size + 65px;
                            line-height: @line-height + 65px;
                            letter-spacing: 30px;
                            display: inline-block;
                            margin-bottom: 5px;
                        }

                        span {
                            padding: 0;
                            background: none;
                        }

                        .sub {
                            display: block;
                        }
                    }

                    .buttons {
                        margin-top: 50px;

                        .button {
                            margin: 15px 20px 0 20px;
                            min-width: 200px;

                            &.ghost {
                                border-color: @font-white;
                                color: @font-white;

                                &:before {
                                    border-color: @font-white;
                                }

                                &:hover {
                                    background: @font-white;
                                    color: @primary-color;

                                    &:before {
                                        background: none;
                                    }
                                }
                            }
                        }

                        &.blue {
                            .button {
                                margin: 15px 20px 0 20px;
                                min-width: 200px;

                                &.ghost {
                                    border-color: @font-white;
                                    color: @font-white;
                                    background: @primary-color;

                                    &:before {
                                        border-color: @font-white;
                                        //background: @primary-color;
                                    }

                                    &:hover {
                                        background: @font-white;
                                        color: @primary-color;

                                        &:before {
                                            background: none;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                &.hide {
                    //.opacity(0);
                    display: none;
                    z-index: 1;
                }
            }

            .video-wrapper {
                position: relative;
                height: 100%;
                width: 100%;
                top: 0;
                left: 0;
                z-index: 2;
                .transition();
                //.opacity(1);
                display: block;
                padding-top: 56.25%;

                iframe, object, embed, video.video-file {
                    position: absolute;
                    top: 0;
                    left: 50%;
                    width: 100%;
                    height: 100%;
                    .transform(translateX(-50%));

                    &.fullscreen-mode {
                        left: 0;
                        .transform(none);
                    }
                }

                &.hide {
                    //.opacity(0);
                    display: none;
                    z-index: 1;
                }
            }
        }
        /*aanbod detail 2023*/
        .aanbod-detail {
            background-color: #030022;
            color: @font-white;

            .center {
                text-align: left;
            }

            h1 {
                text-align: left;

                &.with-frame {
                    display: inline-block;
                    border: 1px solid @font-white;
                    position: relative;
                    padding: 11px 15px 16px 20px;
                    z-index: 0;

                    &:before {
                        content: '';
                        display: block;
                        width: 101%;
                        height: 101%;
                        .box-sizing(border-box);
                        border: solid 1px @font-white;
                        position: absolute;
                        top: -8px;
                        left: 6px;
                        z-index: -1;
                        .transition();
                    }
                }
            }

            .usp-list {
                width: 100%;
                float: right;
                text-align: left;
                margin-bottom: 40px;

                .usp-specs {
                    .usp-spec {
                        width: 46%;
                        float: left;
                        margin-right: 2%;
                        background: @primary-color;
                        color: @font-white;
                        font-size: @font-size + 65px;
                        line-height: @line-height + 65px;
                        padding: 0;
                        position: relative;

                        p {
                            margin-bottom: 0;
                        }

                        .small-info {
                            font-size: @font-size + 15px;
                            line-height: @line-height + 15px;
                        }

                        &:after {
                            content: "+";
                            font-size: 50px;
                            color: @font-white;
                            margin-left: 8px;
                            display: inline-block;
                            position: absolute;
                            right: -16%;
                            top: 0;
                            z-index:99;
                        }

                        &:last-of-type {
                            margin-right: 0;

                            p {
                                padding-left: 20%;
                            }

                            &:after {
                                display: none;
                            }
                        }
                    }
                }

                .long-text {
                    margin-top: 40px;

                    a {
                        color: @font-white !important;
                    }
                }
            }

            .aanbod-detail-slider {
                .slider-item {
                    img {
                        max-height: 500px;
                    }
                }

                .slider-info {
                    margin-top: 20px;
                }
            }

            .aanbod-detail-info {
                .specs {
                    .spec-block {
                        display: block;
                        .box-sizing(border-box);
                        padding: 0 0 25px 0;
                        margin: 0 0 25px 0;
                        border-bottom: none;

                        &.features {
                            h4 {
                                font-size: @font-size + 10px;
                                line-height: @line-height + 10px;
                            }
                        }

                        &.downloads {
                            margin-top: 40px;

                            h4 {
                                margin-bottom: 10px;
                            }

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

                                li {
                                    margin: 0;
                                    padding: 0;
                                    display: block;

                                    a {
                                        display: inline-block;
                                        padding: 0 0 0 30px;
                                        position: relative;
                                        color: @font-white;

                                        .icon {
                                            display: block;
                                            position: absolute;
                                            top: 0;
                                            left: 0;
                                            max-width: 20px;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .button {
                        &.ghost {
                            background: @primary-color;
                            color: @font-white;
                            border-color: @font-white;

                            &:before {
                                border-color: @font-white;
                            }
                        }
                    }
                }
            }
        }

        .text-with-images {
            background-color: #030022;
            color: @font-white;

            h1.underline {
                &:after {
                    background: @font-white;
                }
            }

            .slider {
                display: block;
                .right();
                width: 46%;
                margin: 0 2%;

                .slider {
                    display: block;
                    position: relative;
                    .box-sizing(border-box);

                    .slider-item {
                        display: block;
                        width: 100%;
                        .box-sizing(border-box);
                        position: relative;
                    }

                    &.owl-carousel {
                        .owl-stage {
                            margin: 0 auto;
                        }

                        .owl-item {
                            .box-sizing(border-box);

                            img {
                                display: block;
                            }
                        }

                        .owl-nav {
                            margin: 0;
                            padding: 0;
                            height: 0;

                            .owl-prev, .owl-next {
                                position: absolute;
                                top: 50%;
                                .transform(translateY(-50%));
                                z-index: 499;
                                color: @background-white;
                                width: 45px;
                                height: 45px;
                                line-height: 45px;
                                text-align: center;
                                font-size: 50px;
                                cursor: pointer;
                                background: none;
                                .transition();
                                display: block;

                                i {
                                    position: relative;
                                    color: @primary-color;
                                }

                                &:hover {
                                    /*background: @primary-color;
                                color: @font-white;*/
                                }

                                &.disabled {
                                    cursor: default;
                                    color: fade(@primary-color,40%);

                                    &:hover {
                                        background: none;
                                        color: fade(@primary-color,40%);
                                    }
                                }
                            }

                            .owl-prev {
                                left: 10px;
                                text-align: left;

                                i {
                                    left: -2px;
                                }
                            }

                            .owl-next {
                                right: 10px;
                                text-align: right;

                                i {
                                    right: -2px;
                                }
                            }
                        }
                    }
                }

                .slider-img-nav {
                    display: block;
                    width: 102%;
                    margin: 0 -1%;

                    &:after {
                        content: '';
                        .clear();
                    }

                    > a {
                        display: block;
                        text-decoration: none;
                        .left();
                        width: 18%;
                        margin: 10px 1% 0 1%;
                        //height: 75px;
                        .box-sizing(border-box);
                        border: solid 1px @grey;
                        position: relative;

                        > img {
                            display: block;
                            width: 100%;
                        }

                        &:hover {
                            border-color: @primary-color;
                        }
                    }
                }
            }

            .text {
                display: block;
                .left();
                width: 48%;
                margin: 0 1%;
            }

            &.image-left {
                .slider {
                    .left();
                }

                .text {
                    .right();
                }
            }
        }

        .video-block {
            background-color: @primary-color;
            color: @font-white;
            padding-top: 0;
            position: relative;

            .container > .sixteen {
                position: relative;
            }

            .video-wrapper {
                position: relative;
                padding-bottom: 56.25%;
                height: 0;
                overflow: hidden;
                max-width: 100%;
                z-index: 3;
                background-color: @primary-color;

                iframe, object, embed, video.video-file {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 4;
                }
            }

            .layer {
                position: absolute;
                z-index: 4;
                width: 100%;
                left: 50%;
                top: 50%;
                margin: -80px 0 0 -80px;
                border: 3px solid #fff;
                width: 100px;
                height: 100px;
                text-align: center;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 40px;
                padding: 30px;
                font-weight: 900;
            }

            .hidden-layer {
                z-index: 1000;
                position: absolute;
                height: 100%;
                width: 100%;
                top: 0;

                &:hover {
                    cursor: pointer;
                }
            }
        }
        /*360 iframe 2023*/
        .embed-360 {
            border-top: 1px solid @border-color;
            background-color: @primary-color;
            color: @font-white;
            text-align: center;
            position: relative;

            .plh360 {
                position: relative;
                display: block;
                background: rgba(0,0,0,0.6);
                width: 100%;
                min-height: 100%;
                z-index: 9999;
                cursor: pointer;

                i {
                    display: block;
                    font-size: 150px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-top: -75px;
                    margin-left: -105px;
                }
            }

            .iframe-wrapper {
                position: relative;
                height: 750px;
                width: 100%;
                top: 0;
                left: 0;
                z-index: 2;
                .transition();
                .opacity(1);
                //padding-top: 45%;

                iframe {
                    position: absolute;
                    top: 0;
                    left: 50%;
                    width: 100%;
                    height: 100%;
                    .transform(translateX(-50%));

                    &:before {
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }

        .extra-images {
            border-top: 1px solid @border-color;
            background-color: @primary-color;
            color: @font-white;

            .owl-carousel {
                display: block;
                width: 100%;

                .owl-item {
                    img {
                        width: auto;
                        max-width: 100%;
                        display: block;
                        margin: auto;
                    }
                }

                .owl-nav {
                    margin: 0;
                    padding: 0;
                    height: 0;

                    .owl-prev, .owl-next {
                        position: absolute;
                        top: 50%;
                        .transform(translateY(-50%));
                        z-index: 459;
                        color: @background-white;
                        width: 45px;
                        height: 45px;
                        line-height: 43px;
                        text-align: center;
                        font-size: 40px;
                        text-shadow: 0px 0px 5px rgba(255,255,255,0.3);
                        cursor: pointer;
                    }

                    .owl-prev {
                        left: -50px;
                    }

                    .owl-next {
                        right: -50px;
                    }
                }

                .owl-dots {
                    position: absolute;
                    top: 100%;
                    left: 0;
                    width: 100%;
                    right: 0;
                    margin-top: 25px;

                    .owl-dot {
                        display: inline-block;
                        margin: 5px 2px;

                        span {
                            display: block;
                            width: 8px;
                            height: 8px;
                            background: none;
                            border: solid 1px @primary-color;
                            .box-sizing(border-box);
                        }

                        &.active {
                            span {
                                background: @primary-color;
                            }
                        }
                    }
                }
            }
        }

        .header-video {
            max-height: 600px;

            video {
                margin-top: -150px;
                max-width: 100%;
            }
        }
    }
    /*FOOTER*/
    footer {
        font-family: @font;
    }
}

/*##########################################################################################
HEIZIJDE TEMPLATE
############################################################################################*/
#heizijde {
    h1, h2, h3, h4, h5 {
        font-family: @font2Bold;
        font-weight: 400;
        text-transform:none;
        margin-bottom:25px;
        .sub{
            margin-top:5px;
        }
        .sup{
            margin-bottom:5px;
        }
        .sub,.sup{
            font-size:@font-size;
            line-height:@line-height;
            font-family:@font2;
        }
    }

    font-family: @font2;

    strong,b{
        font-family:@font2Bold;
        font-weight:400;
    }

    .button{
        background:@secondary-color;
        border:solid 2px @secondary-color;
        text-transform:none;
        font-family:@font2Bold;
        font-weight:400;
        color:@font-color;
        .border-radius(10px,10px,10px,0);
        &:hover{
            background:@font-color;
            color:@secondary-color;
            border-color:@font-color;
        }
        &.ghost{
            background:none;
            color:@secondary-color;
            &:hover{
                background:@secondary-color;
                color:@font-color;
            }
        }  
        &.white{
            border-color:@secondary-color;
            background:@background-white;
            color:@font-color;
            &:hover{
                background:@secondary-color;
            }
        }
        &.secondary{
            background:@primary-color;
            border-color:@primary-color;
            color:@font-white;
            &:hover{
                background:@secondary-color;
                border-color:@secondary-color;
            }
            &.ghost{
                border-color:@primary-color;
                background:none;
                color:@primary-color;
                &:hover{
                    color:@font-white;
                    background:@primary-color;
                }
            }
        }
    }

    /*HEADER*/
    header {        
        &.small {
            .inner-header {
                border-bottom-color: @grey;
                border-bottom-width:1px;
            }
        }

        .inner-header {
            border-bottom-color: @primary-color;
            border-bottom-width:0;
            position:relative;
            z-index:1;
            background-color:@primary-color;
            &:before{
                content:'';
                display:block;
                position:absolute;
                top:0;
                left:0;
                bottom:0;
                z-index:0;
                width:62%;
                height:100%;
                background-image:url('@{images}/header-bg-pattern.png');
                background-repeat:repeat;
                background-position:bottom right;
            }
        }
        /*top header*/
        .top-header {
            display: none;
        }
        /*main-header*/
        .main-header {
            background:none;
        }
        /*hamburger*/
        .hamburger {
            span {
                background: @font-white;
                &:after, &:before {
                    background: @font-white;
                }
            }
        }
        /*main-nav*/
        .main-nav {
            ul {
                li {
                    a {
                        color: @font-white;

                        &:after {
                            background: @font-white;
                        }
                    }
                }
            }
        }
        /*sub-nav*/
        .sub-nav {
            background: fade(@primary-color,95%);
            border-bottom: 0;

            .sub-nav-block {
                .title {
                    color: @font-white;
                }

                ul {
                    li {
                        a {
                            color: @font-white;

                            &:before {
                                color: @font-white;
                            }

                            &:hover {
                                color: fade(@font-white,75%);
                            }
                        }
                    }

                    &.big-links {
                        li {
                            a {
                                color: @font-white;

                                &:hover {
                                    color: fade(@font-white,75%);
                                }
                            }
                        }
                    }
                }

                .show-other-projects {
                    color: @font-white;

                    &:hover {
                        background: @secondary-color;
                    }
                }
            }

            .main-nav-mobile {
                li {
                    a {
                        color: @font-white;
                    }
                }
            }
        }
    }

    /*CONTENT*/
    .content{
        padding-top:100px;

        /*top image banner*/
        .top-image-banner {
            .banner-text {
                bottom:30px;
                h1 {
                    //text-transform:uppercase;

                    .sub {
                        font-size:@font-size + 25px;
                        line-height:@line-height + 25px;
                    }
                }
            }
        }

        /*cta-info*/
        .cta-info {
            background: @light-grey;

            .cta-info-wrapper {
                background: @light-grey;
            }

            .cta-block {
                background: @light-grey;
                color: @font-color;
                font-family: @font2;

                a {
                    color: @font-color;
                    span {
                        &:after {
                            background: @font-color;
                        }
                    }
                }

                &.cta-title {
                    font-weight: @regular;
                    font-family:@font2Bold;
                }

                &.cta-phone,&.cta-email{
                    .icon {
                        display: inline-block;
                        vertical-align: middle;
                        width: 35px;
                        height: 35px;
                        line-height: 35px;
                        font-size: 22px;
                        text-align: center;
                        color: @primary-color;
                        background: @background-white;
                        .border-radius(50%,50%,50%,50%);
                        margin-right: 10px;
                        text-decoration: none;
                        &.icon-envelope{
                            font-size:12px;
                        }
                    }
                }
            }
        }

        .usps {
            position:relative;
            &:before{
                content:url('@{images}/bg-figure-1.png');
                display:block;
                width:166px;
                height:193px;
                position:absolute;
                top:40px;
                right:0;
                z-index:1;
            }
            &:after{
                content:url('@{images}/bg-figure-3.png');
                display:block;
                width:132px;
                height:145px;
                position:absolute;
                bottom:0;
                right:0;
                .transform(translateY(50%));
                z-index:2;
            }
            .usp {
                background: @primary-color;
                .box-sizing(border-box);
                padding:5%;
                color:@font-white;
                position:relative;
                z-index:0;
                &:before{
                    content:'';
                    display:block;
                    position:absolute;
                    top:0;
                    left:0;
                    bottom:0;
                    z-index:0;
                    width:35%;
                    height:100%;
                    background-image:url('@{images}/header-bg-pattern.png');
                    background-repeat:repeat;
                    background-position:top right;
                    z-index:0;
                }
                 &:after{
                    content:url('@{images}/bg-figure-2.png');
                    display:none;
                    width:121px;
                    height:128px;
                    position:absolute;
                    bottom:5%;
                    left:0;
                    z-index:1;
                    //.transform(translateX(-100%));
                }
                .image {
                    //.background-size-cover();
                   // display: block;
                    //width: 50%;
                    //.left();
                    min-height: 400px;
                    //overflow: hidden;
                    position:relative;
                    z-index:1;
                   
                }

                .text {
                    //display: block;
                    //width: 50%;
                    //.right();
                    //.box-sizing(border-box);
                    min-height: 400px;
                    padding: 3% 0 3% 5%;
                    //font-size: @font-size;
                    //line-height: @line-height + 3px;
                    position:relative;
                    z-index:2;
                }

                &:nth-child(2n+2) {
                    background:@background-white;
                    color:@font-color;
                    &:before{
                        display:none;
                    }
                    &:after{
                        display:block;
                    }
                    /*.image {
                        .right();
                    }*/

                    .text {
                        .left();
                        padding:3% 5% 3% 0;
                    }
                }
            }
        }

        /*news*/
        .news {
            background: @background-white;
            .news-slider {
                .news-item {
                    .text {
                        padding: 10px;

                        .title {
                            font-family:@font2Bold;
                            text-transform: none;
                        }

                        .date {
                            margin: 5px 0 10px 0;
                            padding:5px 10px;
                            .border-radius(10px,10px,10px,0px);
                            background:@secondary-color;
                            color:@font-white;
                            display:inline-block;
                            clear:both;
                        }

                        .link-button{
                            display:inline-block;
                            text-decoration:none;
                            padding-bottom:5px;
                            position:relative;
                            color:@primary-color;
                            margin-top:10px;
                            &:after{
                                content:'';
                                display:block;
                                width:100%;
                                height:2px;
                                background:@primary-color;
                                position:absolute;
                                bottom:0;
                                left:0;
                                right:0;
                                .transition();
                            }
                        }
                    }
                    &:hover{
                        .text{
                            .link-button{
                                &:after{
                                    right:100%;
                                    width:0;
                                }
                            }
                        }
                    }
                }
            }
        }
        .event-banner {
            background-color: @secondary-color;
            color: @font-color;
            a {
                color: @font-color;
                border-color: @font-color;
                &:hover {
                    background-color: @font-color;
                    color: @font-white;
                }
            }
        }
    }

    /*FOOTER*/
    footer {
        font-family: @font2;
    }
}
.content {
    .medium-text {
        width: 80%;
    }
    .upperleft-opendeur-form {
        .radiobutton {
            column-count: 2;

            label {
                -webkit-column-break-inside: avoid;
                page-break-inside: avoid;
                break-inside: avoid;
            }
        }
    }

    .title-seperate {
        display: block;
        background-color: @primary-color;
        color: @background-white;
        padding: 25px 0;
        margin-bottom: -15px;

        h1, h2 {
            margin-bottom: 0;
            padding-bottom: 0;
        }
        &.heizijde-teaser {
            background-color: @secondary-color;
            margin-bottom: 0;
            padding: 25px 20px 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 163px;
            .box-sizing(border-box);
            text-decoration: none;
            text-align: center;

            h1, h2 {
                margin-bottom: 12px !important;
            }
            .button {
                &:hover {
                    background-color: @background-white !important;
                    color: @black !important;
                }
            }
        }
    }
}
/*##########################################################################################
REGATTA APPARTEMENTEN TEMPLATE
############################################################################################*/
#regatta-appartementen {
    /*DEBUGGED COOKIE OPTIONS (overlay) - COLORS & FONTS*/
    .cookieConsentAllowMessage {
        border-color: @regatta-appartementen;

        .debugged-cookieoptions-buttons {
            .debugged-cookieoptions-button {
                border-color: @regatta-appartementen;
                background: @regatta-appartementen;

                &:hover {
                    background: darken(@regatta-appartementen,10%);
                    border-color: darken(@regatta-appartementen,10%);
                }
            }
        }
    }

    #debugged-cookieoptions-container {
        .debugged-cookieoptions-popup-wrapper {
            .debugged-cookieoptions-popup-title {
                color: @font-white;
                background: @regatta-appartementen;
            }

            .debugged-cookieoptions-popup-footer {
                .debugged-cookieoptions-button {
                    &.save {
                        background: @regatta-appartementen;
                        border-color: @regatta-appartementen;

                        &:hover {
                            background: darken(@regatta-appartementen,15%);
                            border-color: darken(@regatta-appartementen,15%);
                        }
                    }
                }
            }
        }
    }
    //algemeen
    .block {
        padding: 70px 0;

        &.no-top-space {
            padding-top: 0 !important;
        }

        &.no-bottom-space {
            padding-bottom: 0 !important;
        }
    }
    /*Cookie consent 2022*/
    .custom-consent {
        background-color: @regatta-appartementen;
        border: 1px solid @regatta-appartementen;

        button {
            margin-left: 20px;
            background-color: @background-white;
            color: @regatta-appartementen;
            border: 1px solid @regatta-appartementen;

            &:hover {
                background-color: @regatta-appartementen;
                color: @font-white;
                border: 1px solid @font-white;
            }
        }
    }
    /*selection color*/
    ::selection {
        background: @regatta-appartementen;
        color: #fff;
    }

    ::-moz-selection {
        background: @regatta-appartementen;
        color: #fff;
    }

    .medium-block {
        padding: 40px 0;
    }

    .small-block {
        padding: 30px 0;
    }

    .back:after {
        background: @regatta-appartementen;
    }

    h1, h2 {
        font-weight: @medium;
        color: @regatta-appartementen;

        &.underline {
            margin-bottom: 20px;
            padding-bottom: 15px;

            &:after {
                width: 77px;
                background-color: @regatta-appartementen-highlight;
            }
        }
    }
    //button
    .button {
        font-weight: @light;
        border-color: @regatta-appartementen;
        background: @regatta-appartementen;

        &:hover {
            background-color: darken(@regatta-appartementen, 10%);
        }
        //ghostt
        &.ghost {
            background: none;
            color: @regatta-appartementen;

            &:hover {
                background-color: @regatta-appartementen;
                color: @background-white;
            }
        }

        &.arrow-right {
            padding: 13px 13px 13px 30px;
        }

        &.arrow-left {
            padding: 13px 30px 13px 13px;
        }
    }
    //fly-out
    .contact-fly-out-container {
        .contact-fly-out {
            background: @regatta-appartementen;

            .form-page .row:last-child .cell .form-group:first-child .checkbox label:before {
                background-color: @regatta-appartementen;
            }
        }
    }

    .content .projects-overview .project .text .button {
        color: @font-white;
    }
    //header
    header {
        z-index: 999999;

        .top-header {
            background: @regatta-appartementen;
        }

        .sub-nav {
            border-bottom-color: @regatta-appartementen;

            .sub-nav-block {
                .show-other-projects:hover {
                    background: @regatta-appartementen;
                }

                ul li a {
                    &:before, &:hover {
                        color: @regatta-appartementen;
                    }
                }
            }
        }
    }
    //content
    .content {
        //top-image-banner
        .top-image-banner {
            .sticker {
                background-color: @regatta-appartementen;
                border-radius: 50%;
                font-family: @title-font;
                color: @font-white;
                text-decoration: none;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 200px;
                height: 200px;
                top: 50px;
                right: 50px;

                &:hover {
                    background-color: darken(@regatta-appartementen, 5%);
                }

                .inner-sticker {
                    text-align: center;

                    span {
                        text-align: center;
                        display: block;
                    }

                    .project {
                        font-size: @font-size + 19px;
                        line-height: @line-height + 19px;
                        text-transform: uppercase;
                        font-weight: @medium;
                    }

                    .sales {
                        text-transform: uppercase;
                        font-size: @font-size + 4px;
                        line-height: @line-height + 4px;
                        font-weight: @thin;
                    }

                    .link {
                        margin-top: 12px;
                        font-weight: @thin;
                        font-size: @font-size + 2px;
                        line-height: @line-height + 2px;
                    }
                }
            }

            .banner-text h1 {
                color: @background-white;
                font-weight: @regular;
            }
        }
        //intro usp
        .intro-usp {
            background-color: @regatta-appartementen-grey;
            padding: 20px 0;

            .four, .usp-wrapper {
                position: relative;

                &:before {
                    content: '';
                    position: absolute;
                    left: -16px;
                    top: 0;
                    width: 1px;
                    background-color: @regatta-appartementen-highlight;
                    height: 55px;
                    display: inline-block;
                }

                &:first-child:before {
                    content: none;
                }
            }

            .usp-wrapper {
                display: inline;
                .left();
                width: 18%;
                margin-left: 1%;
                margin-right: 1%;
            }

            .usp {
                //display: flex;
                //align-items: flex-start;
                //justify-content: space-between;
                //flex-flow: wrap;
                padding: 0 10px;
                .box-sizing(border-box);
                vertical-align: top;

                .usp-icon {
                    width: 50px;
                    display: inline-block;
                    text-align: center;
                    vertical-align: top;
                }

                .usp-text {
                    display: inline-block;
                    width: ~'calc(100% - 60px)';
                    padding-left: 15px;
                    .box-sizing(border-box);
                    vertical-align: top;
                }
            }
        }
        //aanbod appartementen
        .aanbod-appartementen {
            background-color: @regatta-appartementen-grey;

            &.no-bg {
                background: none;
            }

            .offer-overview-2 {
                margin-top: 45px;

                .offer {
                    background-color: @background-white;
                    padding-top: 0;
                    text-align: left;
                    color: @font-color;
                    .box-sizing(border-box);
                    border: solid 1px @light-grey;

                    .project-header {
                        display: block;
                        margin-bottom: 15px;

                        .logo {
                            display: block;
                            .left();

                            img {
                                display: block;
                                max-width: 50px;
                            }
                        }

                        .header-text {
                            display: block;
                            .left();
                            max-width: ~'calc(100% - 50px)';
                            .box-sizing(border-box);
                            padding-left: 10px;

                            .name {
                                text-transform: uppercase;
                                font-size: @font-size + 2px;
                                line-height: @line-height + 2px;
                                font-weight: @bold;
                                color: @font-color;
                            }

                            .location {
                                font-size: @font-size - 2px;
                                line-height: @line-height - 2px;
                                color: @font-color;
                                position: relative;

                                i {
                                    font-size: @font-size - 4px;
                                    position: relative;
                                    top: -1px;
                                }
                            }
                        }

                        &:after {
                            content: '';
                            display: block;
                            clear: both;
                            height: 0;
                            width: 0;
                            visibility: hidden;
                            overflow: hidden;
                        }
                    }

                    .button {
                        border-width: 1px;
                        text-transform: none;
                        padding: 8px 6px 8px 20px;
                    }

                    .icon-ok {
                        color: @regatta-appartementen;
                    }
                }
            }
        }
        //cta info
        .cta-info {
            background: @regatta-appartementen;

            .cta-info-wrapper, .cta-block {
                background: @regatta-appartementen;

                &.cta-phone .icon {
                    color: @regatta-appartementen;
                }
            }
        }
        //usps
        .usps {

            .usp {
                h3 {
                    color: @regatta-appartementen;
                    text-transform: none;
                }

                &:nth-child(even) {
                    background-color: transparent;
                }
            }
        }
        //interactive map
        .interactive-map {
            .item {
                .twelve {
                    p {
                        font-size: @font-size - 2px;
                        line-height: @line-height - 2px;
                    }
                }
            }

            .map-legend .item.active, .map-legend .item:hover {
                background: #efefef;
                border-left: 5px solid @regatta-appartementen;
            }
        }
        //contactform
        .contact-white {
            .contactform {
                background-color: @background-white;
            }
        }

        .contactform {
            background-color: @regatta-appartementen-grey;

            a {
                color: @font-color;
            }

            h2 {
                position: relative;
                margin-bottom: 20px;
                padding-bottom: 15px;

                &:after {
                    content: '';
                    display: block;
                    width: 77px;
                    height: 1px;
                    background: @regatta-appartementen-highlight;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    left: 50%;
                    .transform(translateX(-50%));
                }
            }
            //form group
            .form-group {
                label {
                    color: @font-color;

                    &:after {
                        color: @font-color;
                    }
                }

                button {
                    background-color: fade(@regatta-appartementen, 50%);
                    padding: 13px 20px;
                }
            }

            .radiobutton input[type="radio"]:not(:checked) + label, .radiobutton input[type="radio"]:checked + label, .checkbox input[type="checkbox"]:not(:checked) + label, .checkbox input[type="checkbox"]:checked + label {
                &:before {
                    border-color: @font-color;
                }
            }

            .radiobutton input[type="radio"]:not(:checked) + label, .radiobutton input[type="radio"]:checked + label {
                &:after {
                    background: @font-color;
                }
            }

            input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], textarea, select {
                background-color: fade(@black, 5%);
                color: @font-color;
            }

            select option {
                background-color: @regatta-appartementen;
            }
        }
        //type-details
        .type-detail .type-detail-slider .slider-img-nav > a:hover {
            border-color: @regatta-appartementen-highlight;
        }
        //data-table
        .data-table {
            thead {
                tr {
                    background-color: @regatta-appartementen;
                    color: @font-white;

                    th, td {
                        color: @font-white;
                        border-color: @regatta-appartementen;
                        padding: 15px 10px;
                    }
                }
            }

            tbody {
                border-left: 1px solid @regatta-appartementen-grey;
                border-right: 1px solid @regatta-appartementen-grey;
                border-bottom: 1px solid @regatta-appartementen-grey;

                tr {
                    &:nth-child(even) {
                        background-color: lighten(@regatta-appartementen, 60%);
                    }

                    &.soldout {
                        background-color: lighten(@regatta-appartementen-grey, 7%);

                        td:last-of-type {
                            font-size: @font-size + 1px;
                        }
                    }

                    td {
                        border: none;

                        a {
                            background-color: transparent;
                            border-radius: 100%;
                            border-width: 1px;
                            color: @regatta-appartementen;
                            padding: 6px 10px;

                            &:hover {
                                background-color: @regatta-appartementen;
                                color: @font-white;
                            }
                        }
                    }

                    th {
                        border: none;
                    }
                }
            }
        }
    }
}


@keyframes fly-out-close {
    0% {
        opacity: 1;
        display: block;
    }
    1% {
        opacity: 0;
        display: none;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fly-out-open {
    0% {
        opacity: 0;
        display: none;
    }

    50% {
        opacity: 0.5;
        display: none;
    }

    100% {
        opacity: 1;
        display: block;
    }
}

/*
7.  Media queries
============================================================================================*/
@media only screen and (max-width: 2300px){
    //CONTACT FLY-OUT
    .contact-fly-out-container {
        .contact-fly-out {
            width: 100%;

            &.window-closed {
                border-radius: 70px;
                width: 60px;
                height: 60px;
                //padding: 21px 24px;
                box-shadow: 0 0 10px rgba(0,0,0,0.5);


                .pop-up-header {
                    .pop-up-title {
                        display: none;
                    }

                    i {
                        &.icon-down-open-big {
                            display: none;
                        }

                        &.fa-question, &.fa-envelope {
                            display: block;
                            position: absolute;
                            top: 0;
                            left: 0;
                            padding: 22px 24px
                        }
                        &.fa-envelope{
                            font-size:24px;
                            padding:17px 20px;
                        }
                    }
                }

                .flyout {
                    animation: fly-out-close 0.3s forwards;
                }
            }

            &.window-open {
                width: 360px;
                max-height: 750px;
                overflow: hidden;

                i {
                    &.icon-down-open-big {
                        display: block;
                    }

                    &.fa-question, &.fa-envelope {
                        display: none;
                    }
                }

                .flyout {
                    animation: fly-out-open 0.3s forwards;
                }
            }
        }
    }
}
@media only screen and (max-width: (@max-width-wrapper - 1px)){
    body{
        > .wrapper{
            border:0;
        }
    }

    header{
        .inner-header{
            &.wrapper{
                border-right:0;
                border-left:0;
            }
        }
    }
}

@media only screen and (max-width: 1449px){
    /*CONTENT*/
    .content{
        /*news*/
        .news{
            .news-slider{
                .owl-carousel{
                    width:~'calc(100% - 150px)';
                    margin:35px auto;
                }
            }
        }
        
        /*video banner*/
        .video-banner {
            .banner-still{
                &:after{
                    width:75px;
                    height:75px;
                    line-height:75px;
                    font-size:40px;
                    border:solid 3px @background-white;
                    top:25%;
                }
                .banner-text {
                    bottom: 50px;
                }
            }      
        }
    }
}

/*Laptop*/	
@media only screen and (max-width: 1199px) {

    /*HEADER*/
    header{
        /*sub-nav*/
        .sub-nav{
            .sub-nav-block{
                .title{
                    margin:20px 20px 0 20px;
                }
                ul{
                    margin:20px;
                    &.big-links{
                        padding-bottom:95px;
                    }
                }
                .show-other-projects{
                    padding:20px;
                }
            }
        }
    }

    /*CONTENT*/
    .content{
        .narrow-text{
            width:75%;
        }
        /*event-banner*/
        .event-banner {
            a {
                padding: 20px;
            }
        }

        /*about*/
        .about{
            .title{
                width:32%;
            }
            .text{
                width:64%;
                padding-left:25px;
            }
        }

        /*projects-overview*/
        .projects-overview{
            .project{
                .image{
                    width:50%;
                }
                .text{
                    width:50%;
                }
            }
        }

        /*news-item-overview*/
        .news-item-overview{
            .news-item-grid{
                .sizer,.grid-item{
                    width:49%;
                }
            }
        }

        /*gallery-overview*/
        .gallery-overview{
            .gallery-item{
                .image{
                    width:50%;
                }
                .text{
                    width:50%;
                }
            }
        }

        /*google maps*/
        .map {
            height: 400px;
        }
    }
    /*##########################################################################################
    REGATTA APPARTEMENTEN
    ############################################################################################*/
    #regatta-appartementen {
        .content .top-image-banner .sticker {
            width: 180px;
            height: 180px;
            top: 25px;
            right: 25px;
        }
    }
}

/*Tablet*/	
@media only screen and (max-width: 959px) {
    /*data-table*/
    .data-table {
        display:block;
        caption {
            display:block;
        }
        thead {
            display:none;
        }

        tbody {
            display:block;
            width:100%;
            tr {
                display:block;
                width:100%;
                border:solid 1px @grey;
                margin-bottom:15px;
                &:last-child{
                    margin-bottom:0;
                }
                &:after{
                    content:'';
                    .clear();
                }
                td,th{
                    border:0;
                    width:25%;
                    .left();
                    &:before{
                        content:attr(data-title);
                        display:block;
                        font-family:@font2Medium;
                        font-size:@font-size;
                        line-height:@line-height;
                        margin-bottom:5px;
                    }
                }
                td {                
                    &:last-of-type {
                        text-align: left;              
                    }
                }
                &.soldout{
                    td{
                        &:last-of-type{
                            font-size:@font-size + 4px;
                            line-height:@line-height + 4;
                            &:before{
                                color:fade(@font-color,40%);
                                display:none;
                            }
                        }
                    }
                }
            }
        }

        tr {
            display:block;
            width:100%;
            td, th {
                display:block;
            }
        }
    }

    /*HEADER*/
    header{
        &.small{
            .main-nav{
                margin-top:12px;
            }
        }
        /*main-nav*/
        .main-nav{
            ul{
                li{
                    margin:0 25px 0 0;
                    a{
                        font-size:@font-size + 1px;
                        line-height:@line-height + 1px;
                    }
                }
            }
        }
        /*sub-nav*/
        .sub-nav{
            .sub-nav-block{
                .title{
                    font-size:@font-size + 1px;
                    line-height:@line-height + 1px;
                    margin:15px 15px 0 15px;
                }
                ul{
                    margin:15px;
                    li{                    
                        a{
                            &:hover{
                                padding:0 0 0 15px;
                                &:before{
                                    left:0;
                                }
                            }
                        }                   
                    }
                    &.big-links{
                        padding-bottom:80px;
                        li{                        
                            a{
                                font-size:@font-size + 1px;
                                line-height:@line-height + 1px;
                                &:hover{
                                    padding:0;
                                    .icon{
                                        margin-left:0;
                                    }
                                }
                            }                       
                        }
                    }
                }
                .show-other-projects{
                    font-size:@font-size;
                    line-height:@line-height;
                    padding:15px;
                }
            }
        }
    }
    
    /*CONTENT*/
    .content {

        .narrow-text {
            width: 85%;
        }

        .intro-numbers {
            .intro-numbers-block {
                .number-block {
                    width: 96%;
                    float: none;
                    margin: 0 2% 10px 2%;

                    .number {
                        font-size: @font-size + 20px;
                        line-height: @line-height + 20px;
                    }
                }
            }
        }

        .intro-numbers-banner {
            .intro-numbers-banner-wrapper {
                .number-block {
                    width: 31.333333%;

                    .number {
                        font-size: @font-size + 5px;
                        line-height: @line-height + 5px;

                        > span {
                            font-size: @font-size + 15px;
                            line-height: @line-height + 15px;
                        }
                    }
                }
            }
        }
        /*event-banner*/
        .event-banner {
            text-align: center;

            .left {
                width: 100%;
            }

            .right {
                width: 100%;
                margin-top: 20px;
                text-align: center;
            }
        }

        .pop-up-video {
            .flex {
                flex-flow: column;
            }

            .vr-info {
                width: 100%;
                max-width: none;
                text-align: center;
                margin-right: 0;
                margin-bottom: 20px;
            }
        }
        /*video banner*/
        .video-banner {
            .banner-still {
                &:after {
                    width: 65px;
                    height: 65px;
                    line-height: 65px;
                    top: 20%;
                }

                .banner-text {
                    bottom: 30px;
                }
            }
        }
        /*about*/
        .about {
            .title {
                width: 40%;
            }

            .text {
                width: 56%;
                padding-left: 20px;
            }
        }
        /*teasers*/
        .teasers {
            .teaser {
                figcaption {
                    padding: 8px 2px 10px 2px;
                    font-size: @font-size;
                    line-height: @line-height;
                }
            }
        }
        //VR
        .vr-banner {
            .vr-info {
                margin-right: 0;
                margin-bottom: 30px;
                text-align: center;

                .vr-logo {
                    display: block;
                    margin: auto;
                    margin-bottom: 15px;
                }

                .title {
                    line-height: 120%;
                }
            }
        }
        /*cta-info*/
        .cta-info {
            .cta-block {
                padding: 15px 15px 13px 15px;
                font-size: @font-size;
                line-height: @line-height;

                &.cta-title {
                    font-size: @font-size + 3px;
                    line-height: @line-height + 5px;
                }

                &.cta-phone {
                    .icon {
                        width: 25px;
                        height: 25px;
                        line-height: 27px;
                        font-size: 14px;
                    }
                }

                &.cta-email {
                    padding: 15px 15px 13px 15px;

                    .icon {
                        font-size: @font-size - 2px;
                        margin-right: 5px;
                    }
                }
            }
        }

        .cta-info-extra {
            .cta-info-extra-wrapper {
                .cta-block {
                    display: block;
                    max-width: 100%;

                    &:first-child {
                        padding-bottom: 10px;
                    }

                    &:nth-child(2) {
                        padding-top: 10px;
                    }
                }
            }
        }
        /*rendements-banner*/
        .rendements-banner {
            .rendements-banner-wrapper {
                padding: 30px 0 35px 275px;

                &:before {
                    font-size: 350px;
                }
            }

            h2 {
                font-size: @font-size + 18px;
                line-height: @line-height + 18px;
            }
        }
        /*aanbod-overview*/
        .aanbod-overview {
            .aanbod-block {
                width: 48%;
            }
        }

        .offer-overview {
            .offer {
                min-height: 550px;

                .offer-inner {
                    padding: 35px 15px;
                }

                .icon {
                    width: 100px;
                    height: 100px;

                    > img {
                        max-width: 50%;
                        max-height: 50%;
                    }
                }

                &:hover {
                    .icon {
                        width: 60px;
                        height: 60px;
                    }

                    .text {
                        .description {
                            height: 270px;
                        }
                    }
                }
            }
        }

        .offer-overview-2 {
            .offer {
                width: 48%;
            }
            &.onepager{
                .offer{
                    width:48%;
                }
            }
        }
        /*news*/
        .news {
            .news-slider {
                .owl-carousel {
                    width: ~'calc(100% - 100px)';

                    .owl-nav {
                        .owl-prev, .owl-next {
                            width: 40px;
                            height: 40px;
                            line-height: 40px;
                            font-size: 22px;
                        }

                        .owl-prev {
                            left: -50px;
                        }

                        .owl-next {
                            right: -50px;
                        }
                    }
                }
            }
        }
        /*gallery*/
        .gallery {
            .grid {
                .sizer, .grid-item {
                    width: 32%;
                }

                .gutter {
                    width: 2%;
                }

                .grid-item {
                    &.fixed-block {
                        font-size: @font-size + 8px;
                        line-height: @line-height + 11px;
                        padding: 40px 20px;
                    }
                }
            }
        }
        /*google maps*/
        .map {
            height: 300px;
        }
        /*projects-overview*/
        .projects-overview {
            .project {
                .image {
                    width: 100%;
                    float: none;
                    min-height: 175px;
                }

                .text {
                    width: 100%;
                    float: none;
                    min-height: 0;
                }
            }
        }
        /*gallery-overview*/
        .gallery-overview {
            .gallery-item {
                .image {
                    width: 100%;
                    float: none;
                    min-height: 175px;
                }

                .text {
                    width: 100%;
                    float: none;
                    min-height: 0;
                }
            }
        }
        /*news-item-overview*/
        .news-item-overview {
            .news-item-grid {
                .grid-item {
                    margin: 10px 0;

                    .text {
                        padding: 20px;

                        .title {
                            font-size: @font-size + 4px;
                            line-height: @line-height + 4px;
                        }

                        .info {
                            > span {
                                margin: 10px 10px 0 10px;

                                img {
                                    margin-right: 3px;
                                }
                            }
                        }
                    }

                    .footer {
                        padding: 20px;

                        .price {
                            .left();
                            font-size: @font-size + 10px;
                            line-height: @line-height + 10px;
                        }
                    }
                }
            }
        }
        //interactive map
        .interactive-map {
            height: 600px;

            .legenda {
                display: block;
                z-index: 999997;
                position: absolute;
                top: 70px;
                left: 15px;
                background-color: @background-white;
                padding: 10px;
                .box-sizing(border-box);
                cursor: pointer;

                .hamburger {
                    display: inline-block;


                    span {
                        display: block;
                        width: 25px;
                        height: 1px;
                        background: #010101;
                        margin: 7px 0;
                        transition: all .3s ease;
                        position: relative;

                        &:before, &:after {
                            content: '';
                            display: block;
                            width: 100%;
                            height: 1px;
                            background: #010101;
                            position: absolute;
                            left: 0;
                            transition: all .3s ease;
                        }

                        &:before {
                            top: -6px;
                        }

                        &:after {
                            bottom: -6px;
                        }
                    }
                }
            }



            .map-image, .map-text {
                width: 100%;
            }

            .map-image {
                padding: 0 10px;
                .box-sizing(border-box);
            }

            .gm-style-iw > div {
                display: inline-block !important;
            }
        }
    }

    /*FOOTER*/
    footer{
        .footer-upper{
            .links{
                nav{
                    -webkit-column-gap: 50px; /* Chrome, Safari, Opera */
                    -moz-column-gap: 50px; /* Firefox */
                    column-gap: 50px;
                    display:block;           
                }
            }
            .ag{
                padding-left:5%;
            } 
        }
    }

    /*##########################################################################################
    FULL COLOR TEMPLATE
    ############################################################################################*/
    #FullColorTemplate {
        /*CONTENT*/
        .content {
            /*top image banner*/
            .top-image-banner {
                .banner-text {
                    bottom:50%;
                    h1 {
                        .xl{
                            font-size:@font-size + 55px;
                            line-height:@line-height + 55px;
                            letter-spacing:25px;
                        }
                    }
                    .buttons{
                        margin-top:35px;
                        .button{
                            min-width:150px;  
                        }
                    }
                }
            }
                
            /*usps*/
            .usps {
                .usp {
                    .image {
                        width: 45%;
                        margin-right:5%;
                    }

                    .text {
                        width: 50%;                
                        padding:5% 5% 5% 0;
                    }

                    &:nth-child(2n+2) {
                        .image{
                            margin-right:0;
                            margin-left:5%;
                        }
                        .text {  
                            padding: 5% 0 5% 5%;
                        }
                    }
                }
            }

            /*extra-info*/
            .extra-info {
                .extra-info-item {
                    padding: 25px 15px;
                    .inner{
                        padding-left:100px;
                    }
                }
            }

            /*about-wrapper*/
            .about-wrapper{
                .text{
                    .inner{
                        .inner-text{
                            width:100%;
                            margin:0 auto 35px auto;
                        }
                    }
                }
            }
        }
    }

    #regatta-appartementen{
        .content{
            .intro-usp{
                .usp-wrapper{
                    width:31.333333%;
                    margin:15px 1%;
                    &:nth-child(3n + 1){
                        clear:both;
                    }
                }
            }
        }
    }
    
}
@media only screen and (max-width: 959px) and (min-width: 720px) {
    /*##########################################################################################
    REGATTA APPARTEMENTEN
    ############################################################################################*/
    #regatta-appartementen {
        .content .intro-usp {
            .usp{
                //flex-flow: column wrap;
                .usp-text {
                    //text-align: center;
                    //padding-left: 0;
                }
            }
        }
    }
}
/*Phone*/
@media only screen and (max-width: 719px) {
    h1 {
        font-size: @font-size + 25px;
        line-height: @line-height + 25px;
        .sub,.sup {
            font-size: @font-size + 15px;
            line-height: @line-height + 15px;
        }

        &.underline {
            margin-bottom: 20px;
            padding-bottom: 15px;
        }
    }
    .form-page {
        .col-md-4 {
            width: 98%;
            float:none;
        }
        .form-group {
            label {
                width:100%;
                float:none;
                margin-bottom:5px;
            }

            input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], textarea, select, .radiobutton-group, .checkbox-group {
                width:100%;
                float:none;
            }
        }
    }

    //remodal
    .remodal {
        padding: 50px 30px;
    }

    /*data-table*/
    .data-table {
        tbody {
            tr {
                td,th{
                    width:33.333333%;
                }
            }
        }
    }

    .custom-consent {
        margin: 0;
        width: 100%;
        max-width: calc(100% - 10px);
    }

    /*HEADER*/
    header {
        position: relative;
        top: auto;
        left: auto;
        right: auto;

        &.small {
            .main-header {
                padding: 8px 0 0 0;
            }
        }
        /*top-nav*/
        .top-nav {
            ul {
                li {
                    a {
                        span {
                            display: none;
                        }
                    }
                }
            }
        }
        /*main-header*/
        .main-header {
            padding: 20px 0 0 0;
        }
        /*logo*/
        .logo {
            margin-bottom: 20px;
        }
        /*hamburger*/
        .hamburger {
            margin-bottom: 20px;

            &.desktop {
                display: block;
            }
        }
        /*main-nav*/
        .main-nav {
            display: none;
        }
        /*sub-nav*/
        .sub-nav {
            position: relative;
            top: auto;
            left: auto;
            right: auto;
            overflow: auto;

            .main-nav-mobile {
                display: block;
                text-align: center;
                padding: 10px 0 17px 0;

                li {
                    display: inline-block;
                    margin: 0 10px;

                    a {
                        font-size: @font-size + 1px;
                        line-height: @line-height + 1px;
                        text-transform: uppercase;
                        position: relative;

                        &:after {
                            content: '';
                            display: block;
                            width: 100%;
                            height: 1px;
                            background: @font-color;
                            position: absolute;
                            bottom: -7px;
                            left: 0;
                            right: 100%;
                            width: 0;
                            .transition();
                        }

                        &.active {
                            &:after {
                                width: 100%;
                                right: 0;
                            }
                        }
                    }
                }

                &:after {
                    content: '';
                    display: block;
                    clear: both;
                    height: 0;
                    width: 0;
                    visibility: hidden;
                    overflow: hidden;
                }
            }

            .sub-nav-block {
                width: 50%;
                border-top: solid 1px @grey;
            }
        }
    }

    /*CONTENT*/
    .content {
        padding-top: 0; //hoogte van de fixed header
        .narrow-text {
            width: 90%;
        }
        /*split-screen-banner*/
        .split-screen-banner {
            display: block;

            .image {
                float: none;
                height: 280px;
                width: 100%;
            }

            .baseline-text {
                float: none;
                width: 100%;
                padding: 10% 8%;
            }
        }

        .intro {
            .text {
                float: none;
                width: 100%;
                padding-right: 0;
            }

            .video {
                float: none;
                width: 100%;
                margin: 25px auto 0 auto;
            }
        }

        .intro-numbers {
            .intro-numbers-block {
                .number-block {
                    width: 98%;
                    float: none;
                    margin: 0 1% 10px 1%;
                    padding: 15px 5px 20px 5px;

                    .number {
                        font-size: @font-size + 15px;
                        line-height: @line-height + 15px;
                    }
                }
            }
        }

        .intro-numbers-banner {
            padding: 5px 0;

            .intro-numbers-banner-wrapper {
                .number-block {
                    font-size: @font-size - 2px;
                    line-height: @line-height - 2px;
                    margin: 5px 1%;
                    padding: 5px 10px 10px 10px;

                    .number {
                        font-size: @font-size + 3px;
                        line-height: @line-height + 3px;

                        > span {
                            font-size: @font-size + 10px;
                            line-height: @line-height + 10px;
                        }
                    }
                }
            }
        }
        /*about*/
        .about {
            .title {
                text-align: center;
                width: 100%;
                margin: 0;
                float: none;

                h1, h2, h3 {
                    &.underline {
                        &.align-right {
                            text-align: center;

                            &:after {
                                right: auto;
                                left: 50%;
                                .transform(translateX(-50%));
                            }
                        }
                    }
                }
            }

            .text {
                width: 100%;
                margin: 0;
                float: none;
                text-align: center;
                padding-left: 0;
            }
        }
        /*top image banner*/
        .top-image-banner {
            .banner-text {
                bottom: 25px;
            }
        }
        /*video banner*/
        .video-banner {
            .banner-still {
                &:after {
                    width: 65px;
                    height: 65px;
                    line-height: 65px;
                    top: 5%;
                }

                .banner-text {
                    bottom: 10px;
                }
            }
        }
        /*teasers*/
        .teasers {
            .teaser {
                float: none;
                width: 100%;
                margin: 10px 0;
            }
        }

        .usps {
            .usp {
                .image {
                    width: 100%;
                    float: none;
                    min-height: 0;
                    height: 350px;
                }

                .text {
                    width: 100%;
                    float: none;
                    min-height: 0;
                    height: auto;
                    padding: 5%;
                }

                &:nth-child(2n+2) {
                    .image {
                        float: none;
                    }

                    .text {
                        float: none;
                    }
                }
            }
        }
        //VR
        .vr-block-details {
            .icon {
                width: 70px;
                height: 70px;
                line-height: 70px;
                font-size: @font-size + 14px;
            }

            .text {
                padding-left: 20px;
                width: ~'calc(100% - 70px)';
            }
        }
        /*brochure*/
        .brochure {
            .brochure-wrapper {
                padding: 35px 0;
            }

            .image {
                float: none;
                padding: 25px;
                max-width: 100%;

                img {
                    .transform(rotate(-5deg));
                }
            }

            .text {
                float: none;
                max-width: 100%;
                text-align: center;
            }
        }
        /*cta-info*/
        .cta-info {
            .cta-block {
                float: none;
                width: 100%;
                padding: 15px;
                text-align: center;

                &.cta-email {
                    text-align: center;
                    padding: 15px;
                }
            }
        }

        .cta-info-extra {
            .cta-info-extra-wrapper {
                .cta-block {
                    .cta-info-text {
                        margin: 5px 15px 5px 0;

                        &:first-child {
                            margin-left: 0;
                        }

                        .button {
                            margin-top: 10px !important;
                        }
                    }
                }
            }
        }
        /*extra-info*/
        .extra-info {
            .extra-info-item {
                float: none;
                width: 100%;
                margin: 0 0 20px 0;
                padding: 20px 20px 20px 100px;

                &:last-of-type {
                    margin: 0;
                }

                .icon {
                    left: 20px;
                }
            }
        }
        /*rendements-banner*/
        .rendements-banner {
            .rendements-banner-wrapper {
                padding: 35px 0;

                &:before {
                    position: relative;
                    top: auto;
                    left: auto;
                    .transform(none);
                    font-size: 250px;
                    line-height: 200px;
                    margin-bottom: 15px;
                }
            }

            h2 {
                font-size: @font-size + 18px;
                line-height: @line-height + 18px;
            }
        }
        /*projects-overview*/
        .projects-overview {
            .project {
                float: none;
                width: 100%;
                margin: 25px 0 0 0;

                .image {
                    width: 50%;
                    .left();
                    min-height: 200px;
                }

                .text {
                    width: 50%;
                    .right();
                    min-height: 200px;
                }
            }
        }
        /*gallery-overview*/
        .gallery-overview {
            .gallery-item {
                float: none;
                width: 100%;
                margin: 25px 0 0 0;

                .image {
                    width: 50%;
                    .left();
                    min-height: 200px;
                }

                .text {
                    width: 50%;
                    .right();
                    min-height: 200px;
                }
            }
        }
        /*news-item-overview*/
        .news-item-overview {
            .news-item-grid {
                .sizer, .grid-item {
                    width: 100%;
                }

                .gutter {
                    width: 0;
                }
            }
        }
        /*aanbod-overview*/
        .aanbod-overview {
            .aanbod-block {
                .text {
                    padding: 15px 10px;
                }

                .title {
                    font-size: @font-size;
                    line-height: @line-height;
                }

                .price {
                    font-size: @font-size;
                    line-height: @line-height;
                }
            }
        }

        .offer-overview {
            width: 100%;
            margin: 0;

            .offer {
                width: 70%;
                float: none;
                margin: 15px auto;
                min-height: 0;

                .offer-inner {
                    position: relative;
                    top: auto;
                    left: auto;
                    .transform(none);
                }

                .text {
                    .description {
                        height: auto;
                        .opacity(1);
                    }
                }

                &:hover {
                    .text {
                        .description {
                            height: auto;
                        }
                    }
                }
            }
        }

        .offer-overview-2 {
            display: block;
            width: 100%;
            margin: 0;

            .offer {
                width: 75%;
                float: none;
                margin: 15px auto;

                &:first-child {
                    margin-top: 0;
                }
            }

            &.onepager {
                .offer {
                    width: 75%;
                }
            }
        }
        /*aanbod-detail*/
        .aanbod-detail-slider {
            width: 100%;
            margin: 40px 0 0 0;
            float: none;
            position: relative;
        }

        .aanbod-detail-info {
            width: 100%;
            margin: 40px 0 0 0;
            float: none;
            padding: 0;
        }
        /*gallery*/
        .gallery {
            .grid {
                .sizer, .grid-item {
                    width: 49%;
                }

                .grid-item {
                    margin: 5px 0;

                    &.fixed-block {
                        font-size: @font-size + 6px;
                        line-height: @line-height + 9px;
                    }
                }
            }
        }
        /*type-detail*/
        .type-detail {
            .type-detail-slider {
                float: none;
                width: 100%;
                margin: 25px 0 0 0;

                .slider-img-nav {
                    > a {
                        width: 23%;
                    }
                }
            }

            .type-detail-text {
                float: none;
                width: 100%;
                margin: 0;
            }
        }
        //interactive map
        .interactive-map {
            height: 600px;

            #map-canvas {
                width: 100% !important;
                left: 0;
                height: 600px;
            }

            .map-legend {
                transform: translateX(-100%);
                height: 400px;
                width: 100%;

                &.active {
                    transform: translateX(0);
                }

                .four, .twelve {
                    width: auto !important;
                }
            }
        }        
    }

    /*slick lightbox popup*/
    .slick-lightbox{
        .slick-lightbox-inner{
            .slick-lightbox-slick{
                .slick-lightbox-slick-item{
                    .slick-lightbox-slick-caption{
                        //top:5px;
                        margin-bottom:5px;
                        font-size:@font-size;
                        line-height:@line-height;
                        .button{
                            //display:block;
                            margin:10px 5px 5px 5px;
                        }
                    }
                }
                .slick-prev,.slick-next{
                    width:20px;
                    height:20px;
                    margin-top:-10px;
                    &:before{
                        font-size:20px;
                    }               
                }
            }
            .slick-lightbox-close{
                &:before{
                    font-size:20px;

                }
            }
        }
    }

    /*FOOTER*/
    footer{
        .footer-upper{
            .ag{
                text-align:left;
                margin-top:50px;
                padding-left:0;
            } 
        }
    }

    //CONTACT FLY-OUT
    .fixed-wrapper {
        right: 5px;
    }
    .contact-fly-out-container {
        .contact-fly-out {
            width: auto;

            &.window-closed {
                border-radius: 70px;
                width: 60px;
                height: 60px;
                padding: 21px 24px;

                .pop-up-header {
                    .pop-up-title {
                        display: none;
                    }

                    i {
                        &.icon-down-open-big {
                            display: none;
                        }

                        &.fa-question, &.fa-envelope {
                            display: block;
                        }
                    }
                }
            }

            &.window-open {
                width: auto;
                max-height: inherit;
                overflow: auto;
                i {
                    &.icon-down-open-big {
                        display: block;
                    }

                    &.fa-question, &.fa-envelope {
                        display: none;
                    }
                }
            }

            .form {
                display: none;
            }
        }
    }

    /*##########################################################################################
    FULL COLOR TEMPLATE
    ############################################################################################*/
    #FullColorTemplate {
        /*CONTENT*/
        .content {
            padding-top: 0; //hoogte van de fixed header
            /*top image banner*/
            .top-image-banner {
                .quickLink {
                    padding: 20px 20px 25px 25px;
                    font-size: @font-size + 5px;
                    line-height: @line-height + 10px;
                }

                .banner-text {
                    position: relative;
                    bottom: auto;
                    .transform(none);
                    background: @secondary-color;
                    left: auto;
                    right: auto;
                    padding: 25px 0;
                    margin-top: -7px;

                    h1 {
                        .xl {
                            font-size: @font-size + 30px;
                            line-height: @line-height + 30px;
                            letter-spacing: 15px;
                        }

                        .sub {
                            font-size: @font-size + 8px;
                            line-height: @line-height + 8px;
                        }
                    }

                    .buttons {
                        margin-top: 15px;

                        .button {
                            margin: 10px 15px 0 15px;
                            min-width: 0;
                            background: none;
                        }
                    }
                }
            }
            /*header video*/
            .header-video {
                video {
                    margin-top: 0;
                }
            }
            /*usps*/
            .usps {
                .usp {
                    .image {
                        width: 94%;
                        float: none;
                        margin-right: 6%;
                        margin: 30px 0 15px 0;
                    }

                    .text {
                        width: 100%;
                        float: none;
                        margin: 30px 0;
                        padding: 0 6% 0 0;
                    }

                    &:nth-child(2n+2) {
                        .image {
                            float: none;
                            margin-right: 0;
                            margin-left: 6%;
                        }

                        .text {
                            padding: 0 0 0 6%;
                        }
                    }
                }
            }
            /*cta-info*/
            .cta-info {
                .cta-block {
                    padding: 32px 15px 30px 15px;
                }
            }
            /*extra-info*/
            .extra-info {
                .extra-info-item {
                    width: 100%;
                    float: none;

                    &:nth-child(2n + 2) {
                        border-top: solid 1px @background-white;
                        border-left: 0;
                    }
                }
            }
            /*about-wrapper*/
            .about-wrapper {
                display: block;
                width: 100%;
                margin: 0;

                .text {
                    width: 100%;
                    float: none;
                    margin: 25px 0;

                    .inner {
                        padding: 30px 50px;

                        .inner-text {
                            width: 100%;
                            margin: 0 auto 35px auto;
                        }
                    }
                }

                .slider-wrapper {
                    width: 100%;
                    margin: 25px 0;
                    float: none;
                }
            }

            .aanbod-detail {
                padding: 50px 0 30px 0 !important;

                .aanbod-detail-info {
                    margin-top: 0;

                    .specs {
                        .spec-block {
                            margin-bottom: 0;

                            &.downloads {
                                margin-top: 0;
                                text-align: center;
                            }
                        }
                    }
                }

                .center {
                    text-align: center;
                }

                h1 {
                    font-size: @font-size;
                    line-height: @line-height;
                }

                .usp-list {
                    width: 100%;
                    float: none;
                    text-align: center;

                    .usp-specs {
                        .usp-spec {
                            font-size: @font-size + 24px;
                            line-height: @line-height + 24px;

                            .small-info {
                                font-size: @font-size + 8px;
                                line-height: @line-height + 8px;
                            }

                            &:after{
                                right:-22%;
                                font-size:40px;
                            }
                        }
                    }
                }
            }

            .aanbod-detail-slider{
                margin-top:0;
            }

            /*type-detail*/
            .text-with-images {
                padding: 10px 0 30px 0 !important;

                .slider {
                    float: none;
                    width: 100%;
                    margin: 25px 0 0 0;

                    .slider-img-nav {
                        > a {
                            width: 23%;
                        }
                    }
                }

                .text {
                    float: none;
                    width: 100%;
                    margin: 0;
                }
            }
            /*event  banner*/
            .event-banner {
                border-top: none;
                border-bottom: none;
                position: relative;

                .left, .right {
                    float: none;
                    width: 97%;
                }

                .left {
                    .signature {
                        text-align: center;
                        margin: 15px 0;
                    }
                }

                .right {
                    margin: 0;

                    a {
                        font-size: 15px;
                        padding: 10px 7px 15px 20px;
                    }
                }

                &:after {
                    content: '';
                    display: block;
                    width: 80px;
                    height: 2px;
                    background: fade(@background-white,30%);
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    .transform(translateX(-50%));
                }
            }

            .video-block {
                .layer {
                    margin: -40px 0 0 -40px;
                    width: 40px;
                    height: 40px;
                    font-size: 20px;
                    padding: 20px;
                    font-weight: 900;
                }
            }
        }

        .modal {
            top: 35vh !important;
            max-width: 90% !important;
            margin: 0 auto;

            &.active {
                height: auto;
            }
        }
    }

    /*##########################################################################################
    HEIZIJDE TEMPLATE
    ############################################################################################*/
    #heizijde {
        /*CONTENT*/
        .content{
            padding-top:0;
            /*top image banner*/
            .top-image-banner {
                .banner-text {
                    bottom:25px;
                    h1 {
                        .sub {
                            font-size:@font-size + 15px;
                            line-height:@line-height + 15px;
                        }
                    }
                }
            }
        }
    }
    /*##########################################################################################
    REGATTA APPARTEMENTEN
    ############################################################################################*/
    #regatta-appartementen {
        .content .intro-usp {

            .usp-wrapper{
                width:48%;
                &:nth-child(3n + 1){
                    clear:none;
                }
                &:nth-child(2n + 1){
                    clear:both;
                    &:before{
                        display:none;
                    }
                }
            }
            .four {
                &:before {
                    content: none;
                }
            }
        }
    }
}

/*Small Phone*/
@media only screen and (max-width: 479px) {
    h1 {
        font-size: @font-size + 15px;
        line-height: @line-height + 15px;

        .sub,.sup {
            font-size: @font-size + 10px;
            line-height: @line-height + 10px;
        }

        &.underline {
            margin-bottom: 15px;
            padding-bottom: 10px;
        }
        &.xs{
            font-size:@font-size + 12px;
            line-height:@line-height + 12px;
        }
    }
    h2 {
        font-size: @font-size + 12px;
        line-height: @line-height + 12px;
        .sub,.sup {
            font-size: @font-size + 8px;
            line-height: @line-height + 8px;
        }
        &.underline {
            margin-bottom: 12px;
            padding-bottom: 7px;
        }
    }

    /*data-table*/
    .data-table {
        tbody {
            tr {
                td,th{
                    width:50%;
                }
            }
        }

        tr {
            display:block;
            width:100%;
            td, th {
                display:block;
            }
        }
    }

    //Contact fly out
    .fixed-wrapper {
        .contact-fly-out-container {
            .contact-fly-out .pop-up-header .pop-up-title {
                font-size: @font-size;
            }
        }
    }

    /*HEADER*/
    header {
        /*top-nav*/
        .top-nav {
            float:none;
            ul {
                li {
                    a {
                        border-right: 0;
                    }
                }
            }
        }
        /*social*/
        .social {
            display:none;
            //float:none;
            //margin-left:2%;
        }
        /*main-header*/
        .main-header {
            padding: 15px 0 0 0;
        }
        /*logo*/
        .logo {
            margin-bottom: 15px;
            img {
                height: 50px;
            }
        }
        /*hamburger*/
        .hamburger {
            margin-bottom: 15px;
            margin-top:17px;
            &:hover{
                margin-top:14px;
            }
        }
        /*sub-nav*/
        .sub-nav {
            .main-nav-mobile {
                text-align: left;
                padding: 10px 15px 17px 15px;

                li {
                    display: block;
                    margin: 0 0 12px 0;

                    a {
                        display:inline-block;
                    }
                }
            }
            .sub-nav-block {
                width: 100%;
                border-right: 0;
            }
        }
    }

    /*CONTENT*/
    .content {
        padding-top: 0; //hoogte van de fixed header
        .block {
            padding: 30px 0;

            &.no-bottom-space {
                padding: 30px 0 0 0;
            }

            &.no-top-space {
                padding: 0 0 30px 0;
            }
        }

        .narrow-text {
            width: 100%;
        }

        /*split-screen-banner*/
        .split-screen-banner{
            .image{
                height:200px;
            }
        }

        /*top image banner*/
        .top-image-banner {
            .banner-text {
                position: relative;
                left: auto;
                right: auto;
                bottom: auto;
                width: 100%;
                .transform(none);
                background: @black;
                .box-sizing(border-box);
                padding: 15px;

                h1 {
                    span {
                        padding: 0;
                        background: none;
                    }
                }
            }
            .sticker{
                width:145px;
                height:145px;
                top:5px;
                right:5px;
                font-size:@font-size - 2px;
                line-height:@line-height - 2px;
            }
        }
        /*video banner*/
        .video-banner {
            .banner-still {
                &:after {
                    width: 65px;
                    height: 65px;
                    line-height: 65px;
                    top: 30px;
                }

                .banner-text {
                    position: relative;
                    left: auto;
                    right: auto;
                    bottom: auto;
                    width: 100%;
                    .transform(none);
                    background: @black;
                    .box-sizing(border-box);
                    padding: 15px;
                    h1 {
                        span {
                            padding: 0;
                            background: none;
                        }
                    }
                }
            }
            .video-wrapper{
	            height:0;
                padding-bottom:56.25%;
                width:100%;
                top:50%;
                .transform(translateY(-50%));
                iframe,object,embed,video.video-file{
	                width:100%;
                    height:100%;
                }
            }
        }

        .intro-numbers{
            .intro-text-block{
                float:none;
                width:100%;
            }
            .intro-numbers-block{
                float:none;
                width:100%;
                padding-left:0;
                margin-top:15px;
                .number-block{
                    width:100%;
                    float:none;
                    margin:5px 0;
                    .number{
                        font-size:@font-size + 10px;
                        line-height:@line-height + 10px;
                    }
                }
            }
        }

        .intro-numbers-banner{
            padding:5px 0;
            .intro-numbers-banner-wrapper{
                .number-block{
                    width:48%;
                    font-size:@font-size - 4px;
                    line-height:@line-height - 4px;
                    padding:5px;
                    .number{   
                        font-size:@font-size;
                        line-height:@line-height;
                        > span{
                            font-size:@font-size + 5px;
                            line-height:@line-height + 5px;
                        }
                    }
                }
            }
        }

        /*teasers*/
        .usps {
            .usp {
                .image {
                    height: 250px;
                }
            }
        }
        /*image-slider*/
        .image-slider, .header-slider {
            &.owl-carousel {
                .owl-nav {
                    .owl-prev, .owl-next {
                        width: 45px;
                        height: 45px;
                        line-height: 43px;
                        font-size: 30px;
                    }
                }
            }
        }
        //VR
        .vr-banner {
            padding: 30px 15px;

            .vr-info {
                margin-bottom: 15px;
            }

            .text-info {
                .title {
                    font-size: @font-size + 4px;
                }

                .text {
                    font-size: @font-size;
                }
            }

            .button {
                font-size: @font-size;
                padding: 12px 17px;
            }
        }
        /*rendements-banner*/
        .rendements-banner {
            .rendements-banner-wrapper {
                padding: 25px 0;
                text-align: center;

                &:before {
                    font-size: 150px;
                    line-height: 100px;
                    margin-bottom: 25px;
                }
            }

            h2 {
                font-size: @font-size + 15px;
                line-height: @line-height + 15px;
            }
        }
        /*image-teasers*/
        .image-teasers {
            .image-teaser {
                float: none;
                width: 100%;
            }
        }
        /*extra-info*/
        .extra-info {
            .extra-info-item {
                padding: 95px 20px 20px 20px;
                text-align: center;

                .icon {
                    left: 50%;
                    top: 20px;
                    .transform(translateX(-50%));
                }
            }
        }
        /*projects-overview*/
        .projects-overview {
            .project {
                .image {
                    width: 100%;
                    float: none;
                    min-height: 150px;
                }

                .text {
                    width: 100%;
                    float: none;
                    min-height: 0;
                }
            }
        }
        /*news-item-overview*/
        .news-item-overview {
            .news-item-grid {
                .grid-item {
                    .text {
                        .title {
                            font-weight: @bold;
                            font-size: @font-size + 1px;
                            line-height: @line-height + 1px;
                        }
                    }

                    .footer {
                        text-align: center;

                        .price {
                            float: none;
                            display: block;
                            max-width: 100%;
                        }

                        .button {
                            float: none;
                            //margin-top:15px;
                        }
                    }
                }
            }
        }
        /*news*/
        .news {
            .news-slider {
                .owl-carousel {
                    width: 100%;
                    margin: 25px auto;
                    padding-bottom: 45px;

                    .owl-nav {
                        .owl-prev, .owl-next {
                            top: auto;
                            bottom: 0;
                            .transform(none);
                        }

                        .owl-prev {
                            left: auto;
                            right: 40px;
                        }

                        .owl-next {
                            right: 0;
                        }
                    }
                }
            }
        }
        /*gallery-overview*/
        .gallery-overview {
            .gallery-item {
                .image {
                    width: 100%;
                    float: none;
                    min-height: 150px;
                }

                .text {
                    width: 100%;
                    float: none;
                    min-height: 0;
                }
            }
        }

        .vr-block-details {
            .icon {
                float: none;
                margin: auto;
                margin-bottom: 20px;
            }

            .text {
                padding-left: 0;
                width: 100%;
                text-align: center;
            }
        }
        /*aanbod-overview*/
        .aanbod-overview {
            .aanbod-block {
                width: 100%;
                margin: 25px 0 0 0;

                .title {
                    font-size: @font-size + 2px;
                    line-height: @line-height + 2px;
                    min-height: 0;
                }

                .price {
                    font-size: @font-size + 2px;
                    line-height: @line-height + 2px;
                }
            }
        }
        .offer-overview{
            .offer{
                width:100%;           
            }
        }
        .offer-overview-2{
            .offer{
                width:100%;
                margin:15px auto;           
            }
            &.onepager{
                .offer{
                    width:100%;
                }
            }
        }
        /*gallery*/
        .gallery {
            .grid {
                .sizer, .grid-item {
                    width: 100%;
                }

                .gutter {
                    width: 0;
                }

                .grid-item {
                    margin: 5px 0;
                }
            }
        }
    }
    .remodal.remodal-brochure .form-page .row:first-child .col-md-12 {
        flex-flow: wrap;
        .form-group:first-child {
            margin-right: 0;
        }
    }
    .mfp-container {
        button.mfp-close, .mfp-close {
            .transform(none);
        }
    }

    /*FOOTER*/
    footer{
        .footer-upper{
            padding:30px 0;
            text-align:center;
            .contact-info{
                .logo{
                    display:inline-block;
                    clear:both;
                }
            }
            .links{
                nav{
                    -webkit-column-count: 1; /* Chrome, Safari, Opera */
                    -moz-column-count: 1; /* Firefox */
                    column-count: 1;

                    -webkit-column-gap: 0px; /* Chrome, Safari, Opera */
                    -moz-column-gap: 0px; /* Firefox */
                    column-gap: 0px;
                    ul{
                        text-align:center;
                    }           
                }
            }
            .ag{
                text-align:center;
            } 
        }
        .footer-lower{
            text-align:center;
            .copyright{
                float:none;
                margin-bottom:10px;
                ul{
                    li{
                        float:none;
                        display:inline-block;
                    }
                }
            }
            .website-by{
                float:none;
            }
        }
    }

    /*##########################################################################################
    FULL COLOR TEMPLATE
    ############################################################################################*/
    #FullColorTemplate {
        .button {
            &.ghost {
                padding: 10px 10px 15px 25px;
            }
        }
        /*CONTENT*/
        .content {
            /*top image banner*/
            .top-image-banner {
                .quickLink {
                    top: 7px;
                    right: 10px;
                    padding: 10px 15px 15px 15px;
                    font-size: @font-size + 2px;
                    line-height: @line-height + 5px;

                    &:before {
                        top: -5px;
                        right: -5px;
                    }
                }

                .banner-text {
                    h1 {
                        .xl {
                            font-size: @font-size + 15px;
                            line-height: @line-height + 15px;
                            letter-spacing: 10px;
                        }

                        .sub {
                            font-size: @font-size + 2px;
                            line-height: @line-height + 2px;
                        }
                    }

                    .buttons {
                        margin-top: 5px;

                        .button {
                            margin: 20px 15px 0 15px;
                            min-width: 0;
                        }
                    }
                }
            }
            /*usps*/
            .usps {
                .usp {
                    .image {
                        width: 95%;
                        float: none;
                        margin: 30px 5% 15px 0;
                        padding-right: 15px;

                        &:after {
                            top: -15px;
                            right: -15px;
                        }
                    }

                    .text {
                        padding: 0;
                    }

                    &:nth-child(2n+2) {
                        .image {
                            margin-left: 5%;

                            &:after {
                                top: 10px;
                                right: 10px;
                            }
                        }

                        .text {
                            padding: 0;
                        }
                    }
                }
            }
            /*extra-info*/
            .extra-info {
                .extra-info-item {
                    padding: 5px 15px 25px 15px;

                    .inner {
                        padding-left: 0;
                        text-align: center;
                        padding-top: 95px;
                    }

                    &:nth-child(2n + 2) {
                        border-top: solid 1px @background-white;
                        border-left: 0;
                    }
                }
            }
            /*about-wrapper*/
            .about-wrapper {
                display: block;
                width: 100%;
                margin: 0;

                .text {
                    width: 100%;
                    float: none;
                    margin: 25px 0;
                    padding: 15px 15px 0 0;

                    .inner {
                        padding: 20px;

                        .inner-text {
                            width: 100%;
                            margin: 0 auto 15px auto;
                            padding-left: 15px;
                        }

                        &:after {
                            top: -15px;
                            right: -15px;
                        }
                    }
                }

                .slider-wrapper {
                    width: 100%;
                    margin: 25px 0;
                    float: none;
                }
            }

            .extra-images {
                .owl-carousel {
                    .owl-nav {
                        .owl-prev, .owl-next {
                            line-height: 43px;
                            font-size: 30px;
                            color: @background-white;
                        }

                        .owl-prev {
                            left: 0;
                        }

                        .owl-next {
                            right: 0;
                        }
                    }

                    .owl-dots {
                        position: absolute;
                        top: 100%;
                        left: 0;
                        width: 100%;
                        right: 0;
                        margin-top: 25px;

                        .owl-dot {
                            display: inline-block;
                            margin: 5px 2px;

                            span {
                                display: block;
                                width: 8px;
                                height: 8px;
                                background: none;
                                border: solid 1px @primary-color;
                                .box-sizing(border-box);
                            }

                            &.active {
                                span {
                                    background: @primary-color;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    /*##########################################################################################
    HEIZIJDE TEMPLATE
    ############################################################################################*/
    #heizijde {

        /*CONTENT*/
        .content{
            padding-top:0;

            /*top image banner*/
            .top-image-banner {
                .banner-text {
                    bottom:auto;
                    h1 {
                        margin-bottom:0;
                        .sub {
                            font-size:@font-size + 8px;
                            line-height:@line-height + 8px;
                        }
                    }
                }
            }
            .usps {
                .usp {
                    .image {
                        min-height: 250px;
                        margin-bottom:10px;
                   
                    }
                    .text {
                        min-height: 250px;
                        height:auto !important;
                        padding:5%;
                    }
                    &:nth-child(2n + 2){
                        .text{
                            padding:5%;
                        }
                    }
                }
            }
        }
    }

    /*##########################################################################################
    REGATTA APPARTEMENTEN
    ############################################################################################*/
    #regatta-appartementen {
        .content{
            .top-image-banner{
                .sticker {
                    width: 105px;
                    height: 105px;
                    top: 2px;

                    .inner-sticker {

                        .project {
                            font-size: @font-size - 2px;
                            line-height: @line-height - 2px;
                        }

                        .sales {
                            font-size: @font-size - 3px;
                            line-height: @line-height - 3px;
                            text-transform:none;
                        }

                        .link {
                            margin-top: 3px;
                            font-size: @font-size - 4px;
                            line-height: @line-height - 4px;
                        }
                    }
                }
            }
        }
        .content .intro-usp {            
            .usp-wrapper{
                display:block;
                float:none;
                width:100%;
                &:before{
                    display:none;
                }
                &:nth-child(3n + 1){
                    clear:none;
                }
                &:nth-child(2n + 1){
                    clear:both;
                    &:before{
                        display:none;
                    }
                }
            }
        }
    }
}

@media only screen and (min-width: 960px) {
    .cta-info-extra {
        &.cta-info-heizijde {
            margin-bottom: 50px;
            .cta-info-extra-wrapper {
                display: flex;
                align-items: center;
                justify-content: center;
                .cta-block {
                    max-width: none;
                    
                }
            }
        }
    }
}

@media only screen and (max-height: 600px) {
    .fixed-wrapper {

        &.window-container-open {
            top: 0;
            bottom: 0;
            overflow: auto;
            right: 0;
            left: 0;
            background-color: @fly-out-color;

            .contact-fly-out {
                border-radius: 0;
                max-width: 100%;
                //height: 100%;
                .form-page .form-group {
                    padding: 1px 0;
                }
            }

            .contact-fly-out-container {
                //height: 100%;
            }
        }
    }
}