@font-face {
    font-family: 'Gordita';
    src: url('../fonts/Gordita Bold.woff2') format('woff2'),
    url('../fonts/Gordita Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Gordita';
    src: url('../fonts/Gordita Medium.woff2') format('woff2'),
    url('../fonts/Gordita Medium.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Gordita';
    src: url('../fonts/Gordita Regular.woff2') format('woff2'),
    url('../fonts/Gordita Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Gordita', sans-serif;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 {
    font-size: 59px;
    line-height: 70px;
    letter-spacing: -1px;
}

.home-header-inner h1{
    font-size: 69px;
    line-height: 94px;
    letter-spacing: -1px;
}

h2 {
    font-size: 34px;
    line-height: 48px;
    letter-spacing: -1px;
}

h3 {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -1px;
}

h4 {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -1px;
}

h5 {
    font-size: 18px;
    line-height: 32px;
    letter-spacing: -1px;
}


h6 {
    font-size: 11px;
    line-height: 12px;
    letter-spacing: 1.32px;
    text-transform: uppercase;
}

p, a, span, select, li, td, th, option, form input, b, ul, textarea, label, button, input, .radio {
    font-family: 'Gordita', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 30px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #F8F8F8;
    font-family: 'Gordita', sans-serif;
}

.bg-cover {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.bg-contain {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
}

.render-content {
    position: relative;
}

/*SMOOTH SCROLL STYLING*/

html, body {
    width: 100vw;
    height: 100vh;
}

::-webkit-scrollbar {
    display: none;
}

#js-scroll {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

html.has-scroll-smooth {
    overflow: hidden;
}

html.has-scroll-dragging {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.has-scroll-smooth body {
    overflow: hidden;
}

.c-scrollbar {
    position: absolute;
    right: 0;
    top: 0;
    width: 11px;
    height: 100vh;
    transform-origin: center right;
    transition: transform 0.3s, opacity 0.3s;
    opacity: 0;
}

.c-scrollbar:hover {
    transform: scaleX(1.45);
}

.c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar {
    opacity: 1;
}

.c-scrollbar_thumb {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #c1c1c1;
    opacity: 1;
    width: 5px;
    margin: 2px;
    cursor: -webkit-grab;
    cursor: grab;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
}

.has-scroll-dragging .c-scrollbar_thumb {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

:focus {
    outline: none;
}

.lockScroll {
    width: 100%;
    overflow: hidden;
    position: fixed;
}

.full-link-btn {
    position: absolute;
    height: 100%;
    width: 100%;
    display: block;
    z-index: 2;
    top: 0;
    left: 0;
}

.bg-absolute{
    position: absolute;
    height: 100%;
    width: 100%;
    display: block;
    z-index: 0;
    top: 0;
    left: 0;
}
.main-content-wrapper {
    width: 100%;
    position: relative;
    padding-top: 220px;
}

.homepage .main-content-wrapper,
.single-project .main-content-wrapper {
    padding-top: 62px;
}

.plate--container {
    width: 100%;
    max-width: unset;
    padding-left: 7.5%;
    padding-right: 7.5%;
}

.section-container {
    position: relative;
    width: 100%;
}

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

.fl-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.fl-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.fl-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.jc-left {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.jc-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.jc-right {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.jc-between{
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; 
 }
.ai-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/*COLOR*/

.black .button a {
    color: #222121;
}

.black {
    color: #222121;
}

.white {
    color: white;
}

/* 404 message */
.error-message {
    width: 100%;
    height: 500px;
    z-index: 3;
    position: relative;
}

/*SITE WIDE MELDING*/

.site-wide-notify {
    position: fixed;
    background: white;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    padding: 40px 80px 40px 40px;
    display: flex;
    justify-content: center;
    align-items: center;

    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;

    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

#close-notification {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 47%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 40px;
    cursor: pointer;
}

#close-notification svg {
    width: 100%;
    height: 100%;
}

#close-notification svg polygon {
    fill: #C99B63;
}

.open-notification .site-wide-notify {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.site-wide-notify p {
    padding: 0;
    margin: 0;
}

/*Navigation styling*/

.navigation {
    position: fixed;
    width: 100%;
    z-index: 99;

    -webkit-transition: background-color .3s ease, padding .3s ease;
    -moz-transition: background-color .3s ease, padding .3s ease;
    -ms-transition: background-color .3s ease, padding .3s ease;
    -o-transition: background-color .3s ease, padding .3s ease;
    transition: background-color .3s ease, padding .3s ease;
}

.cta-bar {
    position: relative;
    height: 62px;
    background-color: #222121;
    padding-left: 40px;
    padding-right: 40px;
}

.cta-bar-inner {
    position: relative;
    height: 100%;
    width: 100%;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

ul.cta-bar-menu {
    position: relative;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.cta-bar-menu .nav-item .nav-link {
    color: white!important;
}

nav.navbar {
    position: relative;
    height: 100%;
    padding: 40px 40px 20px 40px;
    background-color: #000000;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row;
    flex-flow: row;

    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

.fixed-header nav.navbar {
    background-color: white!important;
    padding: 40px 40px 28px 40px;
}

.menu-open ul.navbar-nav {
    padding-top: 20px!important;
    border-top: none!important;
}

.homepage nav.navbar,
.single-project nav.navbar {
    background-color: transparent;
}

.navbar-inner {
    position: relative;
    width: 100%;
}

.navbar-brand {
    height: 80px;
    width: auto;
    position: relative;
    z-index: 100;
    padding: 0;
    margin-right: 0;
    overflow: hidden;

    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}


.fixed-header .navbar-brand {
    height: 50px;
}

.navbar-logo {
    text-align: center;
    margin-top: -65px;
    padding-bottom: 26px;

    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

.fixed-header .navbar-logo {
    padding-bottom: 0;
}

.navbar-collapse {
    position: relative;
    width: 100%;
    padding: 0;

    display: flex;
}

#navbarResponsiveMobile {
    display: none;
    position: fixed;
    width: 100%;
    height: calc(100vh - 50px);
    padding-top: 0px;
    left: 0;
    right: 0;
    background: white;
    visibility: hidden;
    opacity: 0;

    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

.menu-open .nav-item .nav-link {
    color: #222212;
}

#navbarResponsiveMobile ul {
    position: relative;
    padding-left: 0;
    text-align: center;
    margin-bottom: 0;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#navbarResponsiveMobile ul .nav-item {
    padding-right: 0;
    list-style-type: none;
}

#navbarResponsiveMobile ul.navbar-nav .nav-item .nav-link {
    font-size: 30px;
    line-height: 50px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: #222212;
}

#navbarResponsiveMobile ul.menu-right-items {
    opacity: 0;
    margin-top: 20px;

    -webkit-transition: all .4s ease, margin-top .4s ease .7s, opacity .4s ease .7s;
    -moz-transition: all .4s ease, margin-top .4s ease .7s, opacity .4s ease .7s;
    -ms-transition: all .4s ease, margin-top .4s ease .7s, opacity .4s ease .7s;
    -o-transition: all .4s ease, margin-top .4s ease .7s, opacity .4s ease .7s;
    transition: all .4s ease, margin-top .4s ease .7s, opacity .4s ease .7s;
}

.menu-open #navbarResponsiveMobile ul.menu-right-items {
    margin-top: 40px;
    opacity: 1;
}

#navbarResponsiveMobile .navbar-outer{
    padding: 10px 0 80px;
    overflow: scroll;
    margin-top: 70px
}

.navbar-toggler {
    padding: 15px 0!important;
    display: none;
    z-index: 100;
}
.navbar-toggler:focus {
    outline: none;
}

.dropdown-menu.active {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: none;
    min-width: 100px;
    padding: 10px 0;
    margin: 0 0 0 0;
    background-color: #fff;
    border: 1px solid #007bff;
    border-radius: .25rem;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 5px 15px;
    clear: both;
    font-weight: 400;
    color: #007bff;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: rgba(0, 123, 255, 0.84);
    text-decoration: none;
    background-color: #ffffff;
}

.bars {
    position: relative;
    height: auto;
    width: 30px;
}

.bar {
    width: 100%;
    height: 1px;
    background: white;
    margin-bottom: 5px;

    -webkit-transition: all .15s linear, background .4s ease;
    -moz-transition: all .15s linear, background .4s ease;
    -o-transition: all .15s linear, background .4s ease;
    transition: all .15s linear, background .4s ease;
}

.bar.bar-3 {
    margin-bottom: 0;
}

.menu-open .bars {
    margin: 0;
}

.menu-open .bar-1 {
    transform: rotate(45deg);
}

.menu-open .bar-3 {
    transform: rotate(-45deg);
    margin-top: -12px;
}

.menu-open .bar-2 {
    opacity: 0;
}

ul.navbar-nav {
    position: relative;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, .2);
    padding-top: 20px;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row;
    flex-flow: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

.fixed-header ul.navbar-nav {
    border-top: 0;
    padding-top: 0;
}

img.logo {
    position: relative;
    height: 100%;
    width: 100%;

    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

.fixed-header img.logo {
    height: 170%;
}

.mobile-logo {
    display: none;
}

ul.navbar-nav li.last {
    padding-right: 0;
}

.nav-item {
    position: relative;
    padding-right: 30px;
}

.nav-item.last {
    padding-right: 0;
}

.cta-bar .nav-item .nav-link {
    font-size: 9px;
    letter-spacing: 1.08px;
}

.nav-item .nav-link {
    padding: 0;
    color: #FFFFFF;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1.32px;

    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}
.ma-link{
    color: #212121;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}
.ma-link:hover,
.nav-item:hover .nav-link,
.nav-item.active .nav-link {
    color: #C99B63!important;
}

.fixed-header .nav-item .nav-link {
    color: #222121;
}

.fixed-header .cta-bar .nav-item .nav-link {
    color: white;
}

/* BUTTONS */
.button {
    position: relative;
    min-width: 200px;
    height: 42px;
    display: inline-block;
    cursor: pointer;
    background-color: transparent;
    border-top: 1px solid #C99B63;
    border-bottom: 1px solid #C99B63;

    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.button a {
    position: relative;
    font-size: 11px;
    line-height: 12px;
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
    height: 100%;
    min-width: 200px;
    text-align: center;
    display: inline-block;
    color: #FFFFFF;
    text-decoration: none;
    padding: 14px 24px;
    letter-spacing: 2.2px;
}

.button input {
    -webkit-appearance: none;
    border: 0;
    background: none;
    color: white;
    height: 100%;
    width: 100%;
    cursor: pointer;
    outline: none;
    padding: 0;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2.2px;
}

.landingside:hover .button,
.button:hover {
    background-color: #C99B63;
}

/* CONTACTFORM STYLING */

.form-field {
    display: block;
    position: relative;
    z-index: 3;
    width: 100%;
}

.form-field--is-active .form-field__control::after {
    color: #222121;
    opacity: .8;
    -webkit-transform: scaleX(150);
    -ms-transform: scaleX(150);
    transform: scaleX(150);
}

.form-field--is-active .form-field__label,
.form-field--is-filled .form-field__label {
    color: #222121;
    opacity: 1;
    font-size: 10px;
    padding-left: 0px;
    -webkit-transform: translateY(-32px);
    -ms-transform: translateY(-32px);
    transform: translateY(-32px);
    z-index: 1;
}

.form-field-container .form-field--is-active .form-field__control::after {
    -webkit-transform: scaleX(150);
    -ms-transform: scaleX(150);
    transform: scaleX(150);
}

.form-field__label {
    display: block;
    font-size: unset;
    font-weight: unset;
    font-family: unset;
    left: 0;
    margin: 0;
    color: #222121;
    opacity: .5;
    position: absolute;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    width: 100%;
    z-index: -1;
    padding-left: 0px;
    top: 16px;
}

.form-field__radio_label {
    color: #222121;
    margin-bottom: 2px;
}

.radio {
    position: relative;
    margin-right: 20px;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.form-field_check_label {
    position: relative;
    margin-bottom: 5px !important;

    display: flex;
    align-items: center;
}

.form-field_check_label span {
    margin-left: 10px;
}

.form-field__control {
    background: #eee;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.form-field__control::after {
    border-bottom: 2px solid rgba(69, 87, 96, 0.48);
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    width: 1%;
}
.form-field{
    position: relative;
}

/* .form-field.text::before, .form-field.textarea::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    z-index: -1;

} */
.form-field__input,
.form-field__textarea,
.form-field__select {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: 1px solid rgba(34, 33, 33, 0.1);
    border-width: 0 0 1px 0;
    color: #222121;
    display: block;
    outline: 0;
    width: 100%;
    z-index: 5;
    height: 64px;
    padding: 8px 18px 8px 0px;
    border-radius: 0;
    -webkit-transition: border 1s cubic-bezier(.26,1.04,.54,1),color .5s cubic-bezier(.26,1.04,.54,1);
    -moz-transition: border 1s cubic-bezier(.26,1.04,.54,1),color .5s cubic-bezier(.26,1.04,.54,1);
    -ms-transition: border 1s cubic-bezier(.26,1.04,.54,1),color .5s cubic-bezier(.26,1.04,.54,1);
    -o-transition: border 1s cubic-bezier(.26,1.04,.54,1),color .5s cubic-bezier(.26,1.04,.54,1);
    transition: border 1s cubic-bezier(.26,1.04,.54,1),color .5s cubic-bezier(.26,1.04,.54,1);
}

::placeholder{
    transition: color .5s cubic-bezier(.26,1.04,.54,1);
    -webkit-transition: color .5s cubic-bezier(.26,1.04,.54,1);
    -moz-transition: color .5s cubic-bezier(.26,1.04,.54,1);
    -ms-transition: color .5s cubic-bezier(.26,1.04,.54,1);
    -o-transition: color .5s cubic-bezier(.26,1.04,.54,1);
}
.form-field--is-active ::placeholder{
    color: #222121;
    opacity: 1;
}
.form-field--is-active .form-field__input,
.form-field--is-active .form-field__textarea,
.form-field--is-active .form-field__select {
    border-bottom: 1px solid #222121;
}

.form-field__input.wrong-input {
    border: 1px solid red;
}

.form-field__select {
    padding: 6px 18px 6px 0;
}

.form-field__textarea {
    min-height: 120px;
}

.form-field-container {
    position: relative;
    display: inline-block;
    padding-top: 16px;
    width: 100%;
}
.form-field-container.halve {
    width: 48.5%;
    padding-top: 0;
}
.form-field-container.halve.last {
    float: right;
}

.form-field-container input {
    margin-top: 0;
}

.form-field.first label {
    display: block;
}

.form-field.select select {
    padding: 5px;
    border: 1px solid #333333;
}

.select-arrow {
    position: absolute;
    top: 20px;
    right: 18px;
    font-size: 13px;
    height: 20px;
}

textarea,
input[type="text"],
input[type="file"],
input[type="button"],
input[type="submit"] {
    -webkit-appearance: none;
    border-radius: 0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance:textfield;
    color: #222121!important;
    top: -1px;
}

.form-field input[type="file"] {
    padding-left: 0;
    -webkit-appearance: none;
}

.form-field input[type="file"]::-webkit-file-upload-button {
    visibility: hidden;
}

.form-field input[type="file"]:before {
    content: 'Bestand kiezen';
    display: inline-block;
    padding: 5px 15px;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
}

.form-field input[type="checkbox"] {
    position: relative;
    float: left;
    -webkit-appearance: none;
    padding: 9px;
    width: 18px;
    height: 18px;
    background: white;
    border: 1px solid #E6E6E6;
    margin-right: 10px;
}

.form-field input[type="checkbox"]:checked {
    color: #99a1a7;
}

.form-field input[type="checkbox"]:after {
    content: '';
    position: absolute;
    width: 18px !important;
    height: 18px !important;
    top: 0;
    left: 0;
    background-color: transparent;

    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.form-field input[type="checkbox"]:checked:after {
    background-color: #C99B63;
}

.form-field input[type="radio"] {
    position: relative;
    -webkit-appearance: none;
    padding: 9px;
    width: 18px;
    height: 18px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 1px solid #E6E6E6;
    margin-right: 10px;
}

.form-field.AVG {
    position: relative;
    margin-bottom: 20px;
}

.form-field.AVG label {
    line-height: 20px;
    font-size: 13px;
    cursor: pointer;
}

.form-field input[type="radio"]:checked {
    color: #99a1a7;
}

.form-field input[type="radio"]:after {
    content: '';
    position: absolute;
    width: 8px !important;
    height: 8px !important;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    top: 5px;
    left: 5px;
    background-color: transparent;

    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.form-field input[type="radio"]:checked:after {
    background-color: #C99B63;
}

textarea {
    height: 200px;
    min-height: 100px;
    max-height: 350px;
}

.quantity {
    font-size: 0;
    display: inline-block;
    border: 1px solid #DEDEDE;
    position: relative;
    height: 42px;
    top: 3px;
    margin-right: 20px;
}

.quantity input {
    position: relative;
    border: 0;
    text-align: center;
    width: 32px;
    height: 100%;
    padding: 0;
    background: transparent;
    color: rgba(34,33,33, .3);
}

.quantity .minus,
.quantity .plus {
    font-size: 17px;
    cursor: pointer;

    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.quantity .minus:hover,
.quantity .plus:hover {
    color: #222121;
}

.change {
    position: relative;
    overflow: hidden;
    margin-top: 25px;
    text-align: right;
}

.change a {
    margin-bottom: 0;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1.32px;
    color: #222121;
    font-weight: 600;

    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

.change:hover a {
    color: #C99B63;
}

.form-price {
    position: relative;
    margin-top: 55px;
    opacity: 0;
    visibility: hidden;

    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.form-price.show {
    opacity: 1;
    visibility: visible;
}

.form-price h5 {
    font-size: 21px;
}

.form-price h5 span {
    font-size: 21px;
    font-weight: 600;
}

.form-bottom {
    margin-top: 30px;
}

.submit-form-btn input {
    color: #222121;
}

.submit-cart {
    opacity: 0;
    visibility: hidden;
}

.submit-cart.show {
    opacity: 1;
    visibility: visible;
}

/*LANDINGSPAGE*/

.landingspage-container {
    position: relative;
    height: calc(100vh - 62px);
    margin-top: 62px;
}
.landingside{
    overflow: hidden;
}

.landingside .bg-absolute{
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.landingspage-container .button{
    z-index: 10;
}

.landingside:hover .bg-absolute{
    transform: scale(1.01);
    -webkit-transform: scale(1.01);
    -moz-transform: scale(1.01);
    -ms-transform: scale(1.01);
    -o-transform: scale(1.01);
}

.landingspage-container .westenwolf-trappen,
.landingspage-container .westenwolf-kozijnen {
    position: relative;
    width: 50%;
    height: 100%;
    z-index: 98;
}

.landings-page .navbar-collapse,
.landings-page .nav-icon.cart,
.landings-page .navbar-toggler {
    display: none;
}

.landings-page nav.navbar {
    background-color: transparent!important;
}
.landings-page .mobile-logo {
    display: none;
}

/*HOME HEADER*/

.home-header-wrapper {
    position: relative;
    height: 800px;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.achtergrond-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
}

.section .achtergrond-overlay {
    background-color: rgba(0, 0, 0, .7);
}

.home-header-inner {
    position: relative;
    width: 100%;
    padding-left: 7.5%;
    padding-right: 7.5%;
}

.home-header-wrapper .content-wrapper {
    position: relative;
    color: white;
}

.title-container {
    position: relative;
    margin-bottom: 40px;
}

.word-reveal .word {
    overflow: hidden;
    display: inline-block;
}

.word-reveal span {
    line-height: inherit;
    font-size: inherit;
    font-weight: inherit;
    vertical-align: bottom;
}

.word-reveal .word span,
.word-reveal .word a.nav-link {
    display: inline-block;
    -webkit-transform: translate3d(0, 110%, 0);
    -moz-transform: translate3d(0, 110%, 0);
    -ms-transform: translate3d(0, 110%, 0);
    -o-transform: translate3d(0, 110%, 0);
    transform: translate3d(0, 110%, 0);

    -webkit-transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
    -ms-transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.word-reveal .word:nth-child(1) >span,
.word-reveal .word:nth-child(1) >a.nav-link {
    -webkit-transition-delay: .1s;
    transition-delay: .1s
}

.word-reveal .word:nth-child(2)>span,
.word-reveal .word:nth-child(2)>a {
    -webkit-transition-delay: .2s;
    transition-delay: .2s
}

.word-reveal .word:nth-child(3)>span,
.word-reveal .word:nth-child(3)>a.nav-link {
    -webkit-transition-delay: .3s;
    transition-delay: .3s
}

.word-reveal .word:nth-child(4)>span,
.word-reveal .word:nth-child(4)>a.nav-link {
    -webkit-transition-delay: .4s;
    transition-delay: .4s
}

.word-reveal .word:nth-child(5)>span,
.word-reveal .word:nth-child(5)>a.nav-link {
    -webkit-transition-delay: .5s;
    transition-delay: .5s
}

.word-reveal .word:nth-child(6)>span,
.word-reveal .word:nth-child(6)>a.nav-link {
    -webkit-transition-delay: .6s;
    transition-delay: .6s
}

.word-reveal .word:nth-child(7)>span,
.word-reveal .word:nth-child(7)>a.nav-link {
    -webkit-transition-delay: .7s;
    transition-delay: .7s
}

.word-reveal .word:nth-child(8)>span,
.word-reveal .word:nth-child(8)>a.nav-link {
    -webkit-transition-delay: .8s;
    transition-delay: .8s
}

.word-reveal .word:nth-child(9)>span,
.word-reveal .word:nth-child(9)>a.nav-link {
    -webkit-transition-delay: .9s;
    transition-delay: .9s
}

.word-reveal .word:nth-child(10)>span,
.word-reveal .word:nth-child(10)>a.nav-link {
    -webkit-transition-delay: 1s;
    transition-delay: 1s
}

.word-reveal .word:nth-child(11)>span,
.word-reveal .word:nth-child(11)>a.nav-link {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s
}

.word-reveal .word:nth-child(12)>span,
.word-reveal .word:nth-child(12)>a.nav-link {
    -webkit-transition-delay: 1.2s;
    transition-delay: 1.2s
}

.word-reveal .word:nth-child(13)>span,
.word-reveal .word:nth-child(13)>a.nav-link {
    -webkit-transition-delay: 1.3s;
    transition-delay: 1.3s
}

.word-reveal .word:nth-child(14)>span,
.word-reveal .word:nth-child(14)>a.nav-link {
    -webkit-transition-delay: 1.4s;
    transition-delay: 1.4s
}

.word-reveal .word:nth-child(15)>span,
.word-reveal .word:nth-child(15)>a.nav-link {
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s
}

.word-reveal .word:nth-child(16)>span,
.word-reveal .word:nth-child(16)>a.nav-link {
    -webkit-transition-delay: 1.6s;
    transition-delay: 1.6s
}

.word-reveal .word:nth-child(17)>span,
.word-reveal .word:nth-child(17)>a.nav-link {
    -webkit-transition-delay: 1.7s;
    transition-delay: 1.7s
}

.word-reveal .word:nth-child(18)>span,
.word-reveal .word:nth-child(18)>a.nav-link {
    -webkit-transition-delay: 1.8s;
    transition-delay: 1.8s
}

.word-reveal .word:nth-child(19)>span,
.word-reveal .word:nth-child(19)>a.nav-link {
    -webkit-transition-delay: 1.9s;
    transition-delay: 1.9s
}

.word-reveal .word:nth-child(20)>span,
.word-reveal .word:nth-child(20)>a.nav-link {
    -webkit-transition-delay: 2s;
    transition-delay: 2s
}

.word-reveal.revealed .word span,
.word-reveal.revealed .word a.nav-link {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.home-header-intro {
    position: relative;
    padding-bottom: 100px;
}

.home-header-intro .intro-wrapper,
.home-header-intro .image-content {
    position: relative;
    width: 50%;
}

.home-header-intro .intro-wrapper {
    padding-right: 5%;
}

.home-header-intro .intro-wrapper .intro {
    position: relative;
    max-width: 500px;
}

.image-content .afbeelding {
    position: relative;
    height: 450px;
    overflow: hidden;
    margin-top: -100px;
}

.image-content .tekst {
    position: relative;
    margin-top: 100px;
}

.scroll-indicator{
    position: absolute;
    overflow: hidden;
    height: 30px;
    bottom: 60px;
    width: 100px;
    left: 7.5%;
}

.scroll-indicator__text {
    position: absolute;
    color: white;
    font-size: 11px;
    line-height: 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    -webkit-animation: scrolling 2.75s infinite 0s ease-in-out;
    animation: scrolling 2.75s infinite 0s ease-in-out;
}

@-webkit-keyframes scrolling {
    0%{
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
        opacity: .6;
    }
    25% {
        -webkit-transform: translateY(0) skewX(0deg);
        transform: translateY(0) skewX(0deg);
        opacity: 1;
    }
    50% {
        -webkit-transform: translateY(0) skewX(0deg);
        transform: translateY(0) skewX(0deg);
        opacity: 1;
    }
    75% {
        -webkit-transform: translateY(0) skewX(0deg);
        transform: translateY(0) skewX(0deg);
        opacity: 1;
    }
    100%{
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
        opacity: .6;
    }
}

/*PARALLAX*/

.parallax {
     position: relative;
     overflow: hidden;

     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
 }

.parallax img {
    width: 100%;
    height: 120%;
    object-fit: cover;
    -o-object-fit: cover;
}

.parallax.section-parallax {
    position: absolute;
    height: 100%;
    width: 100%;
}

/*CONTENT WRAPPER*/

.content-container {
    position: relative;
    width: 100%;
}

.content-container .content-wrapper {
    position: relative;
    max-width: 850px;
}

.content-container .content-wrapper .tekst {
    margin-bottom: 50px;
}

.content-container .content-wrapper .tekst.no-btn {
    margin-bottom: 0;
}

/*POST HEADER*/

.post-header-wrapper {
    position: relative;
    padding-top: 120px;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.post-header-inner {
    position: relative;
}

.post-header-inner .content-wrapper {
    position: relative;
    max-width: 850px;
}

/* .post-header-wrapper .title-container h1,
.contact-pagina .title-container h1 {
    font-size: 34px;
    line-height: 32px;
} */

.post-header-wrapper .intro-tekst {
    margin-bottom: 90px;
}

/* POST ITEM */

.items-container {
    position: relative;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}

.item-wrapper {
    position: relative;
    width: 32%;
    margin-right: 2%;
    margin-bottom: 80px;
    overflow: hidden;
    background: white;
    padding: 36px 40px 40px 40px;

    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.item-wrapper .tekst {
    margin-bottom: 30px;
}

.items-container .item-wrapper:nth-child(3n) {
    margin-right: 0;
}

/*KOZIJNEN INDEX*/

.items-container .kozijn-wrapper:nth-child(3n) {
    margin-right: 0;
}

.kozijnen-container {
    position: relative;
}

.kozijn-wrapper {
    position: relative;
    height: 100%;
    width: 32%;
    margin-right: 2%;
    margin-bottom: 2%;
    
}

.kozijn-wrapper .kozijn-wrapper-inner{
    background: white;
    padding: 50px 80px;
    text-align: center;
    height: 100%;
}

.kozijn-wrapper .titel h4 {
    font-size: 21px;
    line-height: 32px;
    margin-bottom: 0;
}

.kozijn-wrapper .kozijn-inner {
    position: relative;
}

.kozijn-wrapper .kozijn-inner .titel {
    position: relative;
    min-height: 64px;

    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);

    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.kozijn-image {
    position: relative;
    margin-bottom: 25px;
    height: 250px;
}

.kozijn-image .image-inner {
    position: relative;
    width: 100%;
    height: 100%;

    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.kozijn-wrapper .button {
    z-index: 2;
    position: absolute;
    opacity: 0;
    bottom: 50px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);

    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.kozijn-wrapper .button a {
    color: black;
}

.kozijn-wrapper:hover .kozijn-image .image-inner {
    height: 80%;
}

.kozijn-wrapper:hover .kozijn-inner .titel {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}

.kozijn-wrapper:hover .button {
    -webkit-transition-delay: .05s;
    -moz-transition-delay: .05s;
    -ms-transition-delay: .05s;
    -o-transition-delay: .05s;
    transition-delay: .05s;
    opacity: 1;
}
/*KOZIJNEN SHOW*/

.kozijnen-show-container {
    position: relative;
    padding-top: 120px;
}

.back-to-index {
    display: inline-block;
    margin-bottom: 50px;
}

.back-to-index a {
    color: #222121;
    text-decoration: none;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

.back-to-index a:before {
    content: '';
    position: relative;
    width: 80px;
    height: 1px;
    background-color: #C99B63;
    margin-right: 20px;
}

.back-to-index:hover a {
    color: #C99B63;
}

.post-header-wrapper .back-to-index {
    margin-bottom: 20px;
}

.kozijnen-show {
    position: relative;
    padding-bottom: 120px;
}
.kozijnen-show .afbeelding {
    position: relative;
    width: 50%;
    background: white;
    padding-top: 120px;
    padding-bottom: 120px;
}
.kozijnen-show .afbeelding img {
    height: 400px;
}
.kozijnen-show .kozijnen-info {
    position: relative;
    width: 50%;
    padding: 25px 3% 25px 5%;
}
/* .kozijnen-show .kozijnen-info .title-container h1 {
    font-size: 34px;
    line-height: 40px;
} */
.kozijnen-show .kozijnen-info .title-container span {
    font-weight: 600;
    font-size: 20px;
    margin-left: 6px;
}
.kozijnen-show .kozijnen-info .intro p {
    max-width: 450px;
    margin-bottom: 60px;
}
.kozijnen-show .kozijnen-opties {

}

.kozijnen-show-container .related {
    position: relative;
    padding-bottom: 30px;
}

/* SECTION */

.section {
    position: relative;
}

.section-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.section-content {
    position: relative;
    z-index: 3;
}

/*FULLWIDTH SECTION*/

.fullwidth-afbeelding {
    position: relative;
    height: 750px;
}

.fullwidth .plate--container {
    padding-left: 0;
    padding-right: 0;
}

/*CONTENT MET AFBEELDINGEN*/

.content-afbeeldingen-container {
    position: relative;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.content-afbeeldingen-container .titel-afbeelding,
.content-afbeeldingen-container .afbeelding-tekst {
    position: relative;
    width: 44.75%;
}
.project-wrapper
.titel-links {
    position: relative;
    max-width: 725px;
}

.titel-links:after,
.tussenruimte-divider:after {
    content: '';
    position: absolute;
    width: 180px;
    height: 1px;
    background-color: #C99B63;
    bottom: -60px;
}

.tussenruimte-divider {
    position: relative;
}

.tussenruimte-divider:after {
    bottom: 0!important;
}

.afbeelding-links {
    position: relative;
    max-height: 450px;
    margin-top: 140px;
}

.afbeelding-rechts {
    position: relative;
    max-height: 450px;
    margin-bottom: 60px;
}

.tekst-rechts {
    position: relative;
    max-width: 600px;
}

/*PROJECTEN INDEX*/

.items-container .project-wrapper:nth-child(2n) {
    margin-right: 0;
}

.projecten-container {
    position: relative;
}

.projecten-container .items-container,
.post-container .items-container {
    padding-bottom: 40px;
}

.project-wrapper {
    position: relative;
    width: 44.75%;
    overflow: hidden;
    margin-right: 2%;
    margin-bottom: 80px;

    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.project-wrapper .project-image {
    position: relative;
    height: 550px;
    margin-bottom: 30px;
    overflow: hidden;
}

.project-wrapper .project-image:before{
    content: '';
    position: absolute;
    bottom: -20%;
    height: 120%;
    width: 100%;
    left: 0;
    background-color: #f8f8f8;
    transition: all 1.3s cubic-bezier(.77,0,.175,1);
    -webkit-transition: all 1.3s cubic-bezier(.77,0,.175,1);
    -moz-transition: all 1.3s cubic-bezier(.77,0,.175,1);
    -ms-transition: all 1.3s cubic-bezier(.77,0,.175,1);
    -o-transition: all 1.3s cubic-bezier(.77,0,.175,1);
    z-index: 4;
}
.project-wrapper.is-inview .project-image:before{
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transition-delay: .4s;
    
}


.project-wrapper .project-image .image-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}
/* .project-wrapper:hover .project-image .image-inner {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
} */

.project-wrapper .project-inner .titel h4 {
    margin-bottom: 0;
    position: relative;
}

.project-wrapper .project-inner .titel h4 span, .project-wrapper .project-inner .plaats p span{
    position: relative;
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
}
/* .project-wrapper .project-inner .titel h4 span:after, .project-wrapper .project-inner .plaats p span:after{

}
.project-wrapper .project-inner .titel h4 span, .project-wrapper .project-inner .plaats p span{
   
} */

/* .project-wrapper:hover .project-inner .titel h4 span, .project-wrapper:hover .project-inner .plaats p span{
    text-decoration: underline;
} */

.underlined h4 span::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 2px;
    background-color: #212529;
    bottom: -2px;
    left: 0;
    transition: all .6s ease-in-out;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transition-delay: .2s;
}

.project-wrapper .underlined.hover h4 span::after{
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    left: unset;
    right: 0;
    width: 100%;
}
.project-wrapper .plaats {
    margin-top: 10px;
}
.project-wrapper .underlined.hovered h4 span::after, .project-wrapper .underlined.hovered h4 span::after , .project-wrapper .underlined.hovered.done h4 span::after{
    width: 0;
    left: unset;
    right: 0;
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
}
.project-wrapper .underlined.done h4 span::after{
    transition-delay: 0s;
    transition: all 0s ease-in-out;
    -webkit-transition: all 0s ease-in-out;
    -moz-transition: all 0s ease-in-out;
    -ms-transition: all 0s ease-in-out;
    -o-transition: all 0s ease-in-out;
}

/* .row--odd{
    padding-left: 10%;
}

.row--even {
    padding-right: 10%
} */

.row--odd .project-wrapper:nth-child(1) .project-image, .row--even .project-wrapper:nth-child(2) .project-image{
    height: 350px;
}

.row--odd .project-wrapper:nth-child(2) .project-image, .row--even .project-wrapper:nth-child(1) .project-image{
    height: 500px;
}
.row--even .project-wrapper:nth-child(1) .project-image, .row--odd .project-wrapper:nth-child(1){
    
}

.swiper-slide:before{
    content: '';
    position: absolute;
    height: 15%;
    top: 0;
    width: 100%;
    left: 0;
    background-color: #f8f8f8;
    transition: all 1.0s cubic-bezier(0.65, 0.02, 0.55, 0.83);
    -webkit-transition: all 1.0s cubic-bezier(0.65, 0.02, 0.55, 0.83);
    -moz-transition: all 1.0s cubic-bezier(0.65, 0.02, 0.55, 0.83);
    -ms-transition: all 1.0s cubic-bezier(0.65, 0.02, 0.55, 0.83);
    -o-transition: all 1.0s cubic-bezier(0.65, 0.02, 0.55, 0.83);
}
.swiper-slide:after{
    content: '';
    position: absolute;
    height: 15%;
    bottom: 0;
    width: 100%;
    left: 0;
    background-color: #f8f8f8;
    transition: all 1.0s cubic-bezier(0.65, 0.02, 0.55, 0.83);
    -webkit-transition: all 1.0s cubic-bezier(0.65, 0.02, 0.55, 0.83);
    -moz-transition: all 1.0s cubic-bezier(0.65, 0.02, 0.55, 0.83);
    -ms-transition: all 1.0s cubic-bezier(0.65, 0.02, 0.55, 0.83);
    -o-transition: all 1.0s cubic-bezier(0.65, 0.02, 0.55, 0.83);
}




.swiper-slide.swiper-slide-active:after, .swiper-slide.swiper-slide-active:before, .swiper-slide-duplicate-active:before, .swiper-slide-duplicate-active:after {
    height: 0;
}
/*PROJECT SHOW*/

.images-quote-container {
    position: relative;
    padding-top: 120px;
    padding-bottom: 140px;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.images-quote-container .staande-image,
.images-quote-container .image-quote {
    position: relative;
    width: 44.75%;
}

.images-quote-container .staande-image {
    height: 800px;
}

.images-quote-container .liggende-image {
    height: 400px;
    margin-bottom: 80px;
}

.quote {
    position: relative;
    margin-top: auto;
}
.quote-text {
    position: relative;
    max-width: 500px;
    margin-bottom: 50px;
}

.quote-name p {
    margin-bottom: 0;
}

.slider-container {
    position: relative;
    height: 600px;
    width: 100%;
    /* padding-left: 7.5%; */
    margin-bottom: 40px;
}

.swiper-element{
    padding-left: 0%;
    margin-bottom: 0px;
}

.slider-container .slide-btn {
    position: absolute;
    height: 62px;
    width: 62px;
    background: rgb(255, 255, 255);
    border-radius: 100%;
    z-index: 1;
    cursor: pointer;
    top: 50%;
    opacity: 1;
    visibility: visible;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);

    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}


.slider-container .slide-btn:hover{
    transform: translateY(-50%) scale(.93);
    -webkit-transform: translateY(-50%) scale(.93);
    -moz-transform: translateY(-50%) scale(.93);
    -ms-transform: translateY(-50%) scale(.93);
    -o-transform: translateY(-50%) scale(.93);
}


.slide-btn.prev-slide {
    left: 7.5%;
}
.slide-btn.next-slide {
    right: 7.5%;
}
.slide-btn.button-disabled {
    opacity: 0;
    visibility: hidden;
}
.slide-btn svg {
    width: 12px;
    height: 12px;
    fill: white;
    position: relative;
    opacity: .4;

    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.slider-container .slide-btn:hover svg {
    opacity: 1;
    transform: scale(1.07);
    -webkit-transform: scale(1.07);
    -moz-transform: scale(1.07);
    -ms-transform: scale(1.07);
    -o-transform: scale(1.07);
}

.slider-container .slide-btn.prev-slide:hover svg {
    -webkit-transform: rotate(180deg) scale(1.07);
    -moz-transform: rotate(180deg) scale(1.07);
    -ms-transform: rotate(180deg) scale(1.07);
    -o-transform: rotate(180deg) scale(1.07);
    transform: rotate(180deg) scale(1.07);
}
.slide-btn svg path {
    stroke: #222121;
    stroke-width: 6px;
}
.next-slide svg {
    right: -1px;
}
.prev-slide svg {
    left: -1px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

/*BRANCHE INDEX*/

.post-container {
    position: relative;
}

/*VACATURE SINGLE*/

.vacature-single-container {
    position: relative;
}
.vacature-afbeelding {
    width: 60%;
    height: 75%;
    position: absolute;
    right: 0;
    top: -50px;
}

.vacature-container {
    position: relative;
    width: 100%;
    max-width: 850px;
    background-color: white;
    padding: 40px 100px 40px 40px;
    margin-top: 100px;
}

.vacature-inner {
    position: relative;
}
.vacature-inner .vacature-info {
    position: relative;
}
.vacature-inner .vacature-info .info-item {
    position: relative;
    margin-right: 60px;
    margin-bottom: 35px;
}
.vacature-inner .vacature-info .info-item p {
    margin-bottom: 0;
}

.vacature-inner .vacature-info .info-item p.bold {
    font-weight: 600;
}

.vacature-inner .beschrijving,
.vacature-inner .interesse {
    margin-bottom: 30px;
}

.beschrijving ul {
    padding-left: 0;
    list-style: none;
}

.beschrijving ul li {
    padding-left: 25px;
}

.beschrijving ul li:before {
    content: " • ";
    position: absolute;
    left: 0;
    color: #C99B63;
}

.socials.vacature {
    padding-left: 40px;
    position: relative;
    margin-top: 60px;
}

.socials.vacature p {
    margin-right: 35px;
    margin-bottom: 0;
}

/*DOWNLOAD ITEM*/

.items-container .download-wrapper:nth-child(3n) {
    margin-right: 0;
}

.download-wrapper {
    position: relative;
    width: 32%;
    margin-right: 2%;
    margin-bottom: 80px;
    overflow: hidden;

    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.download-inner {
    position: relative;
    padding-right: 100px;
}

.download-image {
    position: relative;
    height: 250px;
    width: 100%;
    margin-bottom: 30px;
}

.download-image .image-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.download-file p {
    margin-bottom: 0;
}

.download-btn {
    position: absolute;
    width: 62px;
    height: 45%;
    background: white;
    bottom: 0;
    right: 20px;
}

.download-btn svg {
    position: absolute;
    bottom: 30px;
}

/*CONTACT PAGINA*/

.contact-pagina {
    position: relative;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.contact-form .intro {
    max-width: 900px;
    margin-bottom: 50px;
}

.contact-pagina .contact-form,
.contact-pagina .contact-info {
    position: relative;
    width: 44.75%;
}

.contact-pagina .contact-info .info {
    position: relative;
    background-color: white;
    padding: 30px 40px 40px 40px;
}

.contact-pagina .contact-info .map {
    position: relative;
    height: 350px;
}

.contact-pagina .form-field-container,
.winkelwagen-form .form-field-container {
    padding-top: 0;
    padding-bottom: 35px;
}

/*WINKELWAGEN*/

.winkelwagen-container {
    position: relative;
}
.winkelwagen-container .winkelwagen-form-winkelwagen {
    position: relative;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.winkelwagen-container .winkelwagen-form {
    position: relative;
    width: 44.75%;
}
.winkelwagen-container .winkelwagen {
    width: 44.75%;
    position: relative;
}

.winkelwagen-container .winkelwagen {
    background: white;
}
.winkelwagen-container .winkelwagen .winkelwagen-inner {
    padding: 10%;
}

.winkelwagen-form .title-container p {
    max-width: 415px;
}
.item-wrapper .button{
    z-index: 3;
}
.nav-icon.cart {
    position: absolute;
    right: 0;
    margin-top: 44px;
    list-style: none;
    z-index: 100;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

.no-cart {
    opacity: 0;
    visibility: hidden;
}

.fixed-header .nav-icon.cart {
    margin-top: -2px;
}

.nav-icon.cart svg path,
.nav-icon.cart svg circle {
    fill: #C99B63;
}

.cart .product-count {
    position: absolute;
    bottom: 15px;
    left: 15px;
    height: auto;
    width: auto;
    min-height: 18px;
    min-width: 18px;
    padding: 3px;
    background: white;
    border-radius: 100%;
    font-size: 10px;
    line-height: 0;
    color: #222121;

    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.fixed-header .cart .product-count,
.menu-open .cart .product-count {
    background: #222121;
    color: white;
}

/*CART ITEMS*/

.cart-item-wrapper {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #DEDEDE;
    padding: 25px 0;
}

.cart-item-wrapper:last-child {
    border-bottom: 0;
}

.cart-item-wrapper {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #DEDEDE;
    padding: 25px 0;
}

.cart-item-wrapper .afbeelding {
    position: relative;
    height: auto;
    width: 20%;
    padding: 20px 25px;
}

.cart-item-wrapper .afbeelding .image-inner {
    position: relative;
    width: 100%;
    height: 70px;
}

.cart-item-wrapper .titel h6 {
    font-size: 17px;
    line-height: 30px;
    letter-spacing: 0;
    text-transform: none;
}
.cart-item-wrapper .titel span {
    font-size: 10px;
    font-weight: 600;
    line-height: 26px;
    margin-left: 4px;
}
.cart-item-wrapper .spec {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.cart-item-wrapper .specs {
    margin-right: 30px;
}
.cart-item-wrapper .spec p {
    position: relative;
    font-size: 13px;
    line-height: 22px;
    margin-bottom: 0;
    min-width: 120px;
}
.cart-item-wrapper .spec span {
    font-size: 13px;
    line-height: 22px;
    margin-left: 10px;
}

.cart-item-wrapper .quantity-delete {
    position: relative;
    margin-left: auto;
    z-index: 4;
}
.cart-item-wrapper .quantity {
    margin-right: 0;
    margin-top: 25px;
}
.cart-item-wrapper .delete {
    position: relative;
    width: 30px;
    height: 30px;
    text-align: center;
    margin-left: auto;
    right: -8px;
}
.cart-item-wrapper .delete svg path,
.cart-item-wrapper .delete svg rect {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
.cart-item-wrapper .delete:hover svg path,
.cart-item-wrapper .delete:hover svg rect {
    fill: #C99B63;
}
.total-price-qty {
    position: relative;
    padding-top: 40px;
}

.total-price-qty .total-price {
    text-align: right;
}

.reload-register-forms {
    display: none;
}

.send-offerte {
    width: 100%;
}

/*REFERENTIES*/

.referenties-container {
    position: relative;
    padding-bottom: 120px;
}

.referenties-wrapper .referentie-wrapper:nth-child(2n) {
    margin-right: 0;
}

.referentie-wrapper {
    position: relative;
    width: 49%;
    
    margin-right: 2%;
    margin-bottom: 60px;
}

.referentie-wrapper .referentie-inner{
    background: white;
    padding: 50px;
    height: 100%;
}

.referentie-wrapper .referentie-titel,
.referentie-wrapper .referentie-tekst {
    position: relative;
    margin-bottom: 30px;
}
.referentie-wrapper .referentie-naam {
    position: relative;
}
.referentie-wrapper .referentie-naam p {
    margin-bottom: 0;
}
.referentie-wrapper .referentie-afbeelding {
    position: absolute;
    height: 90px;
    width: 90px;
    right: 40px;
    bottom: -45px;
    border-radius: 100%;
}
.referentie-wrapper .referentie-afbeelding .image-inner {
    width: 100%;
    height: 100%;
}

/* FOOTER */

.footer-container {
    position: relative;
}

.footer-kolommen {
    position: relative;
    padding-top: 120px;
    padding-bottom: 120px;
}

.kolom-titel {
    position: relative;
    margin-bottom: 30px;
}

.kolom-titel h6 {
    color: #C99B63;
}

.footer-kolom {
    position: relative;
    width: 23%;
    margin-right: 2.667%;
}

.footer-kolom p,
.footer-kolom a,
.contact-info .info p,
.contact-info .info a {
    color: #222121;
    margin-bottom: 0;
    text-decoration: none;

    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.footer-kolom a:hover,
.contact-info .info a:hover {
    color: #C99B63;
}

.footer-kolom.fourth {
    margin-right: 0;
}

.socials a {
    position: relative;
    height: 25px;
    width: auto;
    margin-right: 16px;
    text-decoration: none!important;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.socials a:last-child {
    margin-right: 0;
}

.socials a:before {
    content: '';
    background: transparent;
    height: auto;
    width: auto;
    font-size: 20px;
    display: inline-block;
    font-family: 'FontAwesome';
    text-align: center;
    z-index: 2;
    position: relative;
    color: #d8d5ce;
    vertical-align: baseline;

    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -ms-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.socials a.vimeo:before {
    content: '\f27d';
}
.socials a.twitter:before {
    content: '\f099';
}
.socials a.instagram:before {
    content: '\f16d';
}
.socials a.facebook:before {
    content: '\f230';
}
.socials a.linkedin:before {
    content: '\f0e1';
}
.socials a.pinterest:before {
    content: '\f0d2';
}

.socials a:hover:before {
    color: #C99B63;
}

.footer-bar {
    position: relative;
    height: 62px;
    background-color: #F2F0EA;
}

.schild {
    position: absolute;
    right: 7.5%;
    top: -26px;
}

.schild:before {
    content: '';
    background-image: url('/theme/assets/images/schild.svg');
    background-position: center center;
    -webkit-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    width: 40px;
    height: 50px;
}

/*AFBEELDING GALERIJ*/

.fbeeldingen-galerij {
    position: relative;
}

.galerij-afbeelding {
    position: relative;
    margin-bottom: 30px;
    height: auto;
    overflow: hidden;
}

.grid-item {
    width: calc(50% - 15px);
}

.galerij-afbeelding img {
    width: 100%;
    height: 120%;
    object-fit: cover;
}

/* COOKIE */


body .cc-floating.cc-type-info.cc-theme-classic .cc-btn{
    padding: 5px;
    border: none;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}
body .cc-floating.cc-type-info.cc-theme-classic .cc-btn:hover{
    background-color:#222121;
    text-decoration: none!important;
}
body .cc-floating.cc-theme-classic {
    display: flex!important;
    flex-flow: row!important;
    overflow: visible!important;
    border: none!important;
    bottom: 20px!important;
    width: fit-content!important;
    left: 20px!important;
    right: unset!important;
    padding: 0!important;
    border-radius: 0!important;
    box-shadow: 0px 1px 10px rgba(99, 99, 99, 0.05)!important;
    height: 40px!important;
}


body .cc-theme-classic .cc-btn:last-child {
    min-width: 50px;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    font-size: 11px;
    line-height: 30px;
}

body .cc-link{
    opacity: 1;
    display: inline-block;
    padding: 0;
    padding-left: 3px;
    


    /* position: relative;
    font-size: 11px;
    line-height: 12px;
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
    height: 100%;
    min-width: 200px;
    text-align: center;
    display: inline-block;
    color: #FFFFFF;
    text-decoration: none;
    padding: 14px 24px;
    letter-spacing: 2.2px; */
}
body .cc-floating .cc-message {
    display: flex;
    margin-bottom: 0;
    margin-right: 0px;
    position: relative;
    padding-left: 20px;
    padding: 6px 15px;
}

/*MEDIA QUERIES*/

@media screen and (max-width: 1500px) {
    .home-header-wrapper {
        height: 700px;
    }
    .image-content .afbeelding {
        height: 350px;
        margin-top: -80px;
    }
    .image-content .tekst {
        margin-top: 80px;
    }
    .project-wrapper .project-image {
        height: 420px;
    }
    .fullwidth-afbeelding {
        height: 650px;
    }
    .kozijn-wrapper .kozijn-wrapper-inner {
        padding: 40px;
    }
    .cart-item-wrapper .afbeelding {
        width: 100%;
        padding: 20px 0;
    }
    .cart-item-wrapper .afbeelding .image-inner {
        background-position: left center;
    }
}

@media screen and (max-width: 1300px) {
    .image-content .afbeelding {
        height: 300px;
        margin-top: -60px;
    }
    .image-content .tekst {
        margin-top: 70px;
    }

    h1, .home-header-inner h1{
        font-size: 54px;
        line-height: 63px;
    }
    h2 {
        font-size: 32px;
        line-height: 46px;
    }
    h3 {
        font-size: 30px;
        line-height: 38px;
    }
    h4 {
        font-size: 22px;
        line-height: 30px;
        letter-spacing: 0px;
    }

    .download-image {
        height: 200px;
        margin-bottom: 15px;
    }

    .download-btn {
        width: 50px;
        right: 15px;
    }

    .download-inner {
        padding-right: 75px;
    }

    /*KOZIJNEN SHOW*/

    .kozijnen-show {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .kozijnen-show .afbeelding {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .kozijnen-show .afbeelding img {
        height: 300px;
        max-width: 100%;
    }

    .kozijnen-show .kozijnen-info {
        position: relative;
        width: 100%;
        padding: 50px 0 50px 0;
    }
    .kozijnen-show .kozijnen-info .intro p {
        max-width: 100%;
        margin-bottom: 50px;
    }
    .winkelwagen-container .winkelwagen {
        width: 100%;
        order: 1;
        margin-bottom: 40px;
    }
    .winkelwagen-container .winkelwagen-form {
        width: 100%;
        order: 2;
    }
    .cart-item-wrapper .afbeelding {
        width: 20%;
        padding: 20px 0;
    }
    .cart-item-wrapper .afbeelding .image-inner {
        height: 100%;
    }
    .slider-container {
        height: 450px;
    }
    .images-quote-container .staande-image {
        height: 650px;
    }
    .images-quote-container .liggende-image {
        height: 300px;
    }
}
@media screen and (min-width: 1024px) {

    .kozijn-wrapper .kozijn-wrapper-inner, .referentie-wrapper .referentie-inner{
        opacity: 0;
        transform: translateY(150px);
        -webkit-transform: translateY(150px);
        -moz-transform: translateY(150px);
        -ms-transform: translateY(150px);
        -o-transform: translateY(150px);
        transition: all .6s ease;
        -webkit-transition: all .6s ease;
        -moz-transition: all .6s ease;
        -ms-transition: all .6s ease;
        -o-transition: all .6s ease;
}

    .kozijn-wrapper.is-inview .kozijn-wrapper-inner, .referentie-wrapper.is-inview .referentie-inner{
        opacity: 1;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
    }
   
}
@media screen and (max-width: 1024px) {

    #js-scroll,
    .parallax,
    .parallax img {
        -webkit-transform: none!important;
        -moz-transform: none!important;
        -ms-transform: none!important;
        -o-transform: none!important;
        transform: none!important;
    }

    .parallax img {
        height: 100%;
    }

    .home-header-intro {
        padding-top: 100px;

        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .home-header-intro .intro-wrapper,
    .home-header-intro .image-content {
        width: 100%;
        padding-right: 0;
    }
    .home-header-intro .intro-wrapper .intro {
        margin-bottom: 50px;
        max-width: none;

        -webkit-transform: none!important;
        -moz-transform: none!important;
        -ms-transform: none!important;
        -o-transform: none!important;
        transform: none!important;
    }
    .image-content .afbeelding {
        margin-top: 0;
    }
    .image-content .tekst {
        margin-top: 50px;
    }
    .cta-bar {
        height: 50px;
    }
    .homepage .main-content-wrapper,
    .single-project .main-content-wrapper {
        padding-top: 50px;
    }
    .navbar-logo {
        margin-top: 0;
        padding-bottom: 0;

        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .navbar-brand {
        height: 80px;
        top: -29px;
    }
    .fixed-header .navbar-brand {
        height: 80px;
    }
    .fixed-header img.logo {
        height: 100%;
    }
    .navbar-toggler {
        display: block;
    }
    #navbarResponsive {
        display: none;
    }
    nav.navbar {
        padding: 0 40px 0 40px!important;
    }
    .nav-icon.cart {
        position: relative;
        margin-top: 0!important;
    }
    .fixed-header .bar,
    .menu-open .bar {
        background: #222121;
    }
    ul.cta-bar-left {
        width: 100%;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    ul.cta-bar-right {
        display: none;
    }
    #navbarResponsiveMobile {
        display: block;
    }
    .menu-open #navbarResponsiveMobile {
        visibility: visible;
        opacity: 1;
        margin-top: -80px;
    }
    .main-content-wrapper {
        padding-top: 130px;
    }

    .footer-kolommen {
        padding-top: 100px;
        padding-bottom: 100px;

        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .footer-kolommen .footer-kolom {
        margin-right: 0;
        margin-bottom: 50px;
        width: 100%;
    }
    .footer-kolommen .footer-kolom:last-child {
        margin-bottom: 0;
    }
    .kolom-titel {
        margin-bottom: 20px;
    }

    /*ITEM CONTAINERS / WRAPPERS*/

    .download-wrapper,
    .kozijn-wrapper,
    .item-wrapper,
    .project-wrapper {
        width: 49%
    }

    .items-container .download-wrapper:nth-child(3n),
    .items-container .kozijn-wrapper:nth-child(3n),
    .items-container .item-wrapper:nth-child(3n),
    .items-container .project-wrapper:nth-child(3n) {
        margin-right: 2%;
    }

    .items-container .download-wrapper:nth-child(2n),
    .items-container .kozijn-wrapper:nth-child(2n),
    .items-container .item-wrapper:nth-child(2n),
    .items-container .project-wrapper:nth-child(2n) {
        margin-right: 0;
    }

    .kozijn-image {
        height: 210px;
    }

    .content-afbeeldingen-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .content-afbeeldingen-container .titel-afbeelding,
    .content-afbeeldingen-container .afbeelding-tekst {
        position: relative;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .titel-links {
        max-width: 100%;
    }
    .titel-links:after {
        bottom: -40px;
    }

    .afbeelding-rechts {
        max-height: 300px;
        margin-bottom: 40px;
        order: 2;
    }
    .afbeelding-links {
        margin-top: 100px;
        max-height: 300px;
    }

    .tekst-rechts {
        max-width: 100%;
        margin-top: 50px;
        margin-bottom: 50px;
        order: 1;
    }
    .post-header-wrapper {
        padding-top: 100px;
    }
    .mobile-logo {
        display: block;
        position: absolute;
        top: 0;
        height: 100%;
        opacity: 0;
    }
    .fixed-header .mobile-logo,
    .menu-open .mobile-logo {
        opacity: 1;
    }

    .images-quote-container .staande-image,
    .images-quote-container .image-quote {
        width: 100%;
    }

    .images-quote-container .staande-image {
        height: 800px;
    }

    .images-quote-container .liggende-image {
        order: 2;
        margin-bottom: 0;
        height: 400px;
    }

    .quote {
        order: 1;
        padding: 40px 0;
    }

    .vacature-container {
        padding: 40px;
    }

    .vacature-afbeelding {
        width: 100%;
        height: 550px;
    }

    .contact-pagina {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .contact-pagina .contact-form,
    .contact-pagina .contact-info {
        width: 100%;
    }

    .contact-form {
        margin-bottom: 60px;
    }

    .referentie-wrapper {
        width: 100%;
        margin-right: 0;
    }

    .referentie-wrapper .referentie-inner{
        padding: 40px;
    }

    .referentie-wrapper .referentie-afbeelding {
        right: 30px;
    }

    .landingspage-container {
        height: calc(100vh - 50px);
        margin-top: 50px;

        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .landings-page .navbar-logo {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .landingspage-container .westenwolf-trappen,
    .landingspage-container .westenwolf-kozijnen {
        width: 100%;
        height: 50%;
    }

    #close-notification {
        right: 7.5%;
    }

    .site-wide-notify {
        padding: 30px 16% 30px 7.5%;
    }

}

@media screen and (max-width: 767px) {

    h1, .home-header-inner h1{ 
        font-size: 42px;
        line-height: 48px;
    }
    h2 {
        font-size: 30px;
        line-height: 44px;
    }
    h3 {
        font-size: 26px;
        line-height: 34px;
    }
    /* h4 {
        font-size: 18px;
        line-height: 28px;
    } */

    /*ITEM CONTAINERS / WRAPPERS*/

    .download-wrapper,
    .kozijn-wrapper,
    .item-wrapper,
    .project-wrapper {
        width: 100%
    }

    .items-container .download-wrapper,
    .items-container .item-wrapper,
    .items-container .project-wrapper {
        margin-right: 0!important;
        margin-bottom: 50px;
    }

    .items-container .kozijn-wrapper {
        margin-right: 0!important;
        margin-bottom: 20px;
    }

    .project-wrapper .project-image, .row--odd .project-wrapper:nth-child(1) .project-image, .row--odd .project-wrapper:nth-child(2) .project-image, .row--even .project-wrapper:nth-child(1) .project-image, .row--even .project-wrapper:nth-child(2) .project-image  {
        height: 350px;
    }

    .project-wrapper .project-image:before{
        transition-delay: 0s;
        transition: all 1s cubic-bezier(.77,0,.175,1);
        -webkit-transition: all 1s cubic-bezier(.77,0,.175,1);
        -moz-transition: all 1s cubic-bezier(.77,0,.175,1);
        -ms-transition: all 1s cubic-bezier(.77,0,.175,1);
        -o-transition: all 1s cubic-bezier(.77,0,.175,1);
    }

    .kozijn-image .image-inner {
        height: 80%;
    }
    .kozijn-wrapper .kozijn-inner .titel {
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    .kozijn-wrapper .button {
        opacity: 1;
    }

    nav.navbar {
        padding: 0 7.5% 0 7.5%!important;
    }

    .cta-bar {
        padding-left: 7.5%;
        padding-right: 7.5%;
    }
    .form-field-container.halve {
        width: 100%;
        padding-top: 0;
    }
    .form-field-container.halve.last {
        padding-top: 30px;
        float: none;
    }
    .form-field-container {
        padding-top: 30px;
    }
    .kozijnen-show {
        padding-bottom: 60px;
    }
    .kozijnen-show-container .related {
        padding-bottom: 0;
    }
    .cart-item-wrapper .afbeelding {
        width: 100%;
    }
    .cart-item-wrapper .afbeelding .image-inner {
        height: 70px;
    }
    .cart-item-wrapper .quantity-delete {
        width: 100%;
        margin-top: 30px;

        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .cart-item-wrapper .quantity {
        margin-top: 0;
        order: 1;
        top: unset;
    }
    .cart-item-wrapper .delete {
        text-align: center;
        margin-left: unset;
        right: -8px;
        left: unset;
        order: 3;
    }
    .change {
        margin-top: 0;
        text-align: left;
        order: 2;
        margin-left: auto;
        margin-right: 10px;
    }
    .cart-item-wrapper .specs {
        margin-right: unset;
    }
    .cart-item-wrapper .spec {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .cart-item-info {
        position: relative;
        width: 100%;
    }
    .images-quote-container .staande-image {
        height: 500px;
    }
    .images-quote-container .liggende-image {
        height: 250px;
    }
    .slider-container {
        height: 250px;
    }

}