/*
Theme Name: HZNG
Description: Webdesign & design systems
Version: 2.1
Author: P. Huizinga at HZNG - hzng.nl
*/

/* Reset */
/* Handled by reset.css from https://github.com/murtaugh/HTML5-Reset */

/* GENERAL */
.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.libre-caslon-text-regular {
  font-family: "Libre Caslon Text", serif;
  font-weight: 400;
  font-style: normal;
}

.libre-caslon-text-bold {
  font-family: "Libre Caslon Text", serif;
  font-weight: 700;
  font-style: normal;
}

.libre-caslon-text-regular-italic {
  font-family: "Libre Caslon Text", serif;
  font-weight: 400;
  font-style: italic;
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:focus {
    outline: none;
}
*,html,body {
    font-family: "Poppins", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    -moz-appearance: none;
    -webkit-appearance: none;
    font-size: 17px;
    line-height: 30px;
    color: #24272A;
    font-weight: 400;
}
input {
    font-family: inherit;
}
body {
    background:#FFF;
    overflow-x: hidden;
    padding-top: 105px;
}

hr {
    border-style: solid none none;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #999;
}
/* FONTS */

h1 span,
h1 em,
h1 {
    font-weight: 500;
    font-size: 56px;
    line-height: 70px;
    margin: 0 0 10px;
}

    h1#title .highlight {  
        font-family: "Libre Caslon Text", serif;
        font-weight: 500;
        font-style: italic;
    }
h2,
h2 * {
    font-weight: 600;
    font-size: 30px;
    line-height: 125%;
    margin: 0 0 15px;
}


h3{
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    margin: 0 0 5px;
}

h4{
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
}
h5 {
    font-weight: 600;
    font-size: 32px;
    line-height: 125%;
    margin: 20px 0 3px;
}
li a,
li,
p *,
p {
    font-size: inherit;
}
p {
    margin-bottom: 15px;
}
strong,
p strong{
    font-weight: 600;
}
i, em{
    font-style: italic;
}

.text-right {
    text-align: right;
}
.text-center {
    text-align: center;
}
.handwritten {
    font-family: "Oooh Baby", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    color: #666;
}
.text-center,
.text-center * {
    text-align: center;
}

.text-shadow,
.text-shadow *{
    text-shadow: 0px 0px 20px black;
}


/* GRID */

article,
section {
    display: flex;
    justify-content: center;
    position: relative;
    flex-direction: column;
    background: #FFF;
}
    article.no-background,
    section.no-background {
        background: none;
    }
.row {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    padding: 90px 0 ;
    flex-wrap: wrap;
    overflow: hidden;
}
    .usps .row {
        padding-top: 0;
    }
.container {
    width: 100%;
    max-width: 1350px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    position: relative;
}
    .container.all-posts,
    .container.chosen-posts,
    .container.more-pages {
        max-width: 1218px;
    }
    .container.padding-top {
        padding-top: 60px;
    }
    .pull-100{
        margin-top: -100px;
    }
    .pull-150{
        margin-top: -150px;
    }
    .pull-200 {
        margin-top: -200px;
    }
    .pull-300 {
        margin-top: -300px;
    }
    .pull-400 {
        margin-top: -400px;
    }
.relative {
    position: relative;
}
.visible {
    overflow: visible;
}
.vh-100  {
    height: 100vh;
}
.vh-75  {
    height: 75vh;
}
.vh-50  {
    height: 50vh;
}
.min-height  {
    min-height: 300px;
}
.vw-100  {
    width: 100vw;
}
.flex {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}
.center,
.flex-center {
    justify-content: center;
}
.flex-stretch{
    align-content: stretch;
}
.space-between,
.flex-space-between{
    justify-content: space-between;
}
.flex-end{
    justify-content: flex-end;
}
.flex-self-end{
    align-self: flex-end;
}
.flex-space-around{
    justify-content: space-around;
}
.flex-space-evenly{
    justify-content: space-evenly;
}
.flex-v-align-center{
    align-items: center;
}
.flex-v-align-bottom{
    align-items: flex-end;
}
.flex-stretch {
    align-items: stretch;
}
.flex-v-align-top{
    align-items: flex-start;
}
.flex-h-align-left{
    justify-content: left;
}
.flex-h-align-center{
    justify-content: center;
}

.flex-h-align-right {
    justify-content: right;
}
.flex-column-reverse {
    flex-direction: column-reverse;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-row {
    flex-direction: row;
}
.flex-column {
    flex-direction: column;
}
.flex-no-wrap  {
    flex-wrap: nowrap;
}
.flex-grow-1 {
    flex-grow: 1;
}
.flex-grow-2 {
    flex-grow: 2;
}
.flex-grow-3 {
    flex-grow: 3;
}
.flex-grow-4 {
    flex-grow: 4;
}
.flex-grow-5 {
    flex-grow: 5;
}
.flex-grow-6 {
    flex-grow: 6;
}

/* PADDING ON THE COLUMNS */

div[class*="col-"] {
    padding: 0px 30px;
    position: relative;
}
.no-padding > div[class*="col-"] {
    padding: 0;
}
.extra-padding,
.extra-padding div[class*="col-"] {
    padding: 20px 60px!important;
}
    .cats.extra-padding {
        padding-top: 0!important;
    }
.no-self-padding {
    padding: 0!important;
}
*.padding {
    padding: 30px!important;
}
.border-radius  {
    border-radius: 20px;
    overflow: hidden;
}
.no-padding-top {
    padding-top: 0;
}
/* COLUMNS */

.col-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
}
.col-2 {
    flex: 0 0 16.6666%;
    max-width: 16.6666%;
}
.col-3 {
    flex: 0 0 25%;
    max-width: 25%;
}
.col-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}
.col-45 {
    flex: 0 0 37.5%;
    max-width: 37.5%;
}
.col-5 {
    flex: 0 0 41.66666%;
    max-width: 41.66666%;
}
.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}
.col-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
}
.col-8 {
    flex: 0 0 66.6666%;
    max-width: 66.6666%;
}
.col-9 {
    flex: 0 0 75%;
    max-width: 75%;
}
.col-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
}
.col-11 {
    flex: 0 0 91.66666%;
    max-width: 91.66666%;
}
.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}
.small-screen-only {
    display: none;
}
.large-screen-only {
    display: block;
}
.pull-right {
    float: right;
}
.sticky {
    position: sticky!important;
    top: 90px;
}
.order-1 {
 order: -1;
}

/* GENERAL */

.whole-link {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: pointer;
    z-index: 200;
}

/* CSS FOR TOGGLE BUTTON */

.toggle-menu {
    display: none;
    width: 80px;
    height: 80px;
    cursor: pointer;
    padding: 0!important;
    right: -20px;
    top: 0;
    margin: 0!important;
    margin-left: 20px!important;
    position: absolute;
    transition: all .2s ease-in-out;
}

    .toggle-menu .bar{
        width: 25px;
        height: 2px;
        position: absolute;
        background: #202223;
        border-radius: 4px;
        transition: all .2s ease-in-out;

    }
        .toggle-menu .bar.top-bar{
            top: 32px;
            left: 27px;
        }
        .toggle-menu .bar.middle-bar{
            top: 50%;
            margin-top: -1px /*height of bar / 2*/ ;
            left: 27px;
            width: 14px;
        }
        .toggle-menu .bar.bottom-bar{
            bottom: 32px;
            left: 27px;
        }

        .menu-active .toggle-menu .bar.top-bar{
            transform: rotate(45deg);
            transform-origin: 0 0;
        }
        .menu-active .toggle-menu .bar.middle-bar{
            opacity: 0;
        }
        .menu-active .toggle-menu .bar.bottom-bar{
            transform: rotate(-45deg);
            transform-origin: 0 100%;
        }
        .menu-active .toggle-menu .bar.top-bar,
        .menu-active .toggle-menu .bar.bottom-bar {
            width: 21px;
            left: 32px;
        }

/* HEADER IMAGE */

.header {
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right top;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: -2;
    min-height: 800px;
}
    .single .header
    .archive .header,
    .page-template-blogs .header {
        top: -200px
    }
.flow {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 2500px;
    background-repeat: no-repeat;
    background-position: center bottom;
    z-index: -1;
    top: 1px;
}   
    .flow.white{
        background-image: url('images/background-header-white.svg');
    }
    .flow.yellow{
        background-image: url('images/background-header-yellow.svg');
    }


.first p.intro,
.first h1,
.first h1 i{
    color: #FFFFFF;
}
.first p.intro {
    margin-bottom: 120px;
}

/* MAIN MENU DESKTOP */

@media (min-width:1050px) {
    .single  .main-menu .logo svg path,
    .archive  .main-menu .logo svg path,
    .page-blogs .main-menu .logo svg path {
        fill: #24272A!important;    
    }
    .scrolls.single .main-menu .logo svg path,
    .scrolls.archive .main-menu .logo svg path,
    .scrolls.page-blogs .main-menu .logo svg path,
    .scrolls .main-menu .logo svg path{
        fill: #FFC600!important;
        transition: all 0.2s ease-in-out;
    }
    .zoomed {
        display: block;
    }
    .row.main-menu {
        padding: 0;
        margin: 0;
        z-index: 1000;
        overflow: visible;
        padding: 30px 0;
        position: fixed;
        top: 0;
        transition: all 0.2s ease-in-out;
    }   

        .row.main-menu .col-12 {
            padding: 0 45px;
        }
        .scrolls .row.main-menu {
            background: #FFFFFFE6;
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            transition: all 0.2s ease-in-out;
        }
    .main-menu .menu {
        display: flex;
    }
        .ctas a,
        .main-menu .menu a {
            text-decoration: none;
            line-height: 40px;
            padding: 0 15px;
            display: inline-block;
            font-size: 16px;
            font-weight: 500;
            border-radius: 5px;
            color: #24272A;
            transition: all 0.2s ease-in-out;
        }   
            .main-menu .menu > li > a {
                color: #FFF;
            }
            .single .main-menu .menu > li > a,
            .archive .main-menu .menu > li > a,
            .page-blogs .main-menu .menu > li > a {
                color: #24272A;
            }
            .scrolls .main-menu .menu a {
                color: #24272A;
                transition: all 0.2s ease-in-out;
            }
        .main-menu .menu > li > a {
            margin: 0 5px;
        }
        .main-menu .menu .cta a {
            background: #FFF;
            color: #24272A;
            border: 0;
            transition: all 0.2s ease-in-out;
        }   
            .scrolls .main-menu .menu .cta a {
                background: #FFC600;
                transition: all 0.2s ease-in-out;
            }
            .main-menu .menu .menu-item.cta:hover a {
                opacity: 0.75;
            }

            .main-menu .menu .menu-item {
                position: relative;
                list-style: none;
            }

                .main-menu .menu > .menu-item:hover > a {
                    opacity: 0.75;
                }

                .main-menu .menu .menu-item.menu-item-has-children a {
                    position: relative;
                    padding-right: 30px;
                }
                .main-menu .menu .menu-item.menu-item-has-children > a:after {
                    content: "";
                    display: block;
                    width:  8px;
                    height: 8px;
                    border-bottom: 2px solid;
                    border-left: 2px solid;
                    transform: rotate(-45deg);
                    position: absolute;
                    right: 12px;
                    top: 50%;
                    margin-top: -6px;
                }

        .main-menu .menu > li.menu-item {
            padding: 0 0 5px 0;
        }
        .main-menu .menu .menu-item.menu-item-has-children .sub-menu {
            position: absolute;
            left: -9999px;
            width: 260px;
            background: #FFF;
            z-index: 100;
            opacity: 0;
            top: 50px;
            border-radius: 10px;
            padding: 10px 0;
            box-shadow: 0px 3px 9px rgba(0,0,0,0.15);
            transition: opacity 0.2s ease-in-out 0s, top 0.2s ease-in-out;
        }
            .main-menu .menu .menu-item.menu-item-has-children:hover .sub-menu {
                left: -5px;
                opacity: 1;
                top: 45px;
            }

                .main-menu .menu .menu-item.menu-item-has-children .sub-menu .menu-item a {
                    width: 100%;
                    line-height: 24px;
                    padding: 7px 20px;
                    border-radius: 0;
                }
}

.over-mij {
    height: 700px;
}
.arrow-left,
.arrow-right {
    padding-right: 60px;
    height: 50px;
    display: inline-block;
    line-height: 50px;
    text-decoration: none;
    background-image: url('images/arrow-next-yellow.svg');
    background-size: 40px;
    background-repeat: no-repeat;
    font-weight: 500;
    background-position: right center;
}
.arrow-left {
    padding-left: 60px;
    text-decoration: none;
    background-image: url('images/arrow-prev-black.svg');
    background-position: left center;
}
.over-mij .header{
    top: 0;
    height: 900px;
    background-position: right top;
}
    .over-mij .hero {
        position: absolute;
        right: 50%;
        margin-right: -750px;
        bottom: -211px;
    }

/* BLOGS */

.post-categories {
    list-style: none;
    margin-bottom: 10px;
}

.post-categories li a{
    line-height: 25px;
    display: inline-block;
    padding: 0 10px;
    margin-right: 10px;
    border-radius: 4px;
    text-decoration: none;
    background: #FFC600;
}

.single .featured-image {
    max-width: 100%;
    margin: 0 0 20px;
}

/* INLINE FORM */

.inline-form {
    display: inline-block;
    margin-top: 60px;
}

/* MAIN MENU MOBILE */

@media (max-width:1049px) {
    .toggle-menu {
        display: block;
        z-index: 990;
    }
    .row.main-menu {
        height: 80px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        padding: 0;
        margin:0;
        z-index: 990;
        overflow: visible;
        transition: background 0.2s ease-in-out;
    }
        .row.main-menu .container {
            height: 100%;
            width: 100%!important;
            padding: 0 20px;
        }
        .row.main-menu .col-12 {
            height: 100%;
            width: 100%!important;
            padding: 0;
        }
        .row.main-menu #menu-hoofdmenu.menu {
            overflow-y: scroll;
            position: fixed;
            left: -9999px;
            top: 0px;
            opacity: 0;
            width: 100vw;
            height: calc(100vh);
            background: #FFF;
            transition: opacity .2s ease-in-out;
            padding-top: 100px;
        }
            .menu-active .row.main-menu  #menu-hoofdmenu.menu {
                left: 0;
                opacity: 1;
                transition: opacity .2s ease-in-out;
            }
                .main-menu .menu a {
                    text-decoration: none;
                    line-height: 70px;
                    padding: 0 25px 0 15px;
                    font-size: 125%;
                    color: #24272A;
                    width: 100%;
                    display: inline-block;
                    transition: padding .4s ease-in-out;
                }
                .main-menu .menu .menu-item.menu-item-has-children > a:after {
                    content: "";
                    display: block;
                    width:  10px;
                    height: 10px;
                    border-bottom: 2px solid;
                    border-left:2px solid;
                    transform: rotate(-45deg);
                    position: absolute;
                    right: 35px;
                    top: 37px;
                    margin-top: -7px;
                    transition: all 0.4s ease-in-out;
                    opacity: 0;
                }

                .menu-active .main-menu .menu .menu-item.menu-item-has-children > a:after {
                    opacity: 1;
                }


                .main-menu .menu .menu-item {
                    position: relative;
                }

                    .main-menu .menu .menu-item.current-menu-item > a {
                        color: #FFC600;
                    }

                .main-menu .menu .menu-item.menu-item-has-children .sub-menu {
                    display: none;
                }
                    .main-menu .menu .menu-item.menu-item-has-children:hover .sub-menu {
                        display: block;
                    }

                    .main-menu .menu .menu-item.menu-item-has-children .sub-menu .menu-item a {
                        width: 100%;
                        padding-left: 40px;
                        line-height: 50px;
                        font-size: 95%;
                    }
                    .main-menu .menu .menu-item.cta a {
                        background: none;
                        border-radius: 50px;
                        margin: 10px;
                        padding: 0 12px;
                        color: #24272A;
                        text-align: center;
                        width: calc(100% - 20px);
                        transition: all 0.4s ease-in-out;
                    }
                    .menu-active .main-menu .menu .menu-item.cta a {
                        background: #FFC600;
                        transition: all 0.4s ease-in-out;

                    }


    .menu-active .row.main-menu #menu-hoofdmenu.menu{
        background: #24272A;
        border:0;
    }

    .menu-active .toggle-menu .bar{
        background: #FFF;
    }
    .menu-active .logo svg *,
    .menu-active .logo svg{
        fill: #FFF;
    }
    .menu-active  .main-menu .menu a {
        color: #FFF;
        padding-left:25px;
    }

        .menu-active  .main-menu .menu a {
            color: #FFF;
        }
}

/* LANG MENU DESKTOP */

@media (min-width:1050px) {
    .menu-language-container {
        width: 50px;
        height: 50px;
        overflow: hidden;
        position: absolute;
        right: 20px;
        background: #F8F8F7;
        border-radius: 5px;
        padding-bottom: 10px;
    }
    .menu-language-container:hover {
        height: auto;
    }
    .menu-language-container .current-lang a:after {
        content: "";
        display: block;
        width:  6px;
        height: 6px;
        border-bottom: 1px solid;
        border-left: 1px solid;
        transform: rotate(-45deg);
        position: absolute;
        right: 10px;
        top: 20px;
        transition: all 0.2s ease-in-out;
    }
    .menu-language-container .current-lang a:hover:after {
        border-color: #FFC600;
    }
    .main-menu #menu-language {
        flex-direction: column;
    }
        .main-menu #menu-language .current-lang {
            order: -1;
        }
    .main-menu #menu-language .lang-item a{
        text-indent: -9999px;
        height: 40px;
        padding: 0 7px;
    }
    .main-menu #menu-language a:before {
        display: block;
        position: absolute;
        width: 40px;
        text-indent: 0px;
        font-size: 14px;
    }
        .main-menu #menu-language .lang-item-en a:before {
            content: "en";
        }
        .main-menu #menu-language .lang-item-nl a:before {
            content: "nl";
        }
        .main-menu #menu-language .lang-item-es a:before {
            content: "es";
        }
        .main-menu #menu-language .lang-item-de a:before {
            content: "de";
        }

}
/* FOOTER MENU DESKTOP */
 
footer {
    
    background-image: url('images/background-footer.svg');
    background-size: 2500px;
    background-position: center 100px;
    position: relative;
    background-repeat: no-repeat;
    padding-top: 30px;
}
    footer .row {
        padding: 45px 0;
    }

.row.footer-menu {
}
    footer .flex-row ul {
        flex-direction: row;
    }
    footer .flex-column ul {
        flex-direction: column;
    }
    footer ul.menu a {
        padding: 0 20px 10px 0!important;
        color: #FFF;
        font-size: 95%;
        line-height: 150%;
    }
    .footer-menu ul.menu > li > a,
    span.strong {
        font-weight: 600;
    }
    .sub-footer ul,
    .sub-footer ul li,
    .footer-menu ul,
    .footer-menu ul li {
        margin: 0;
        list-style: none;
    }
    footer strong,
    footer,
    footer table td,
    footer a {
        color: #FFF;
        font-size: 16px;
        line-height: 28px;
        text-decoration: none;
        transition: opacity 0.15s ease-in-out;
    }   

        footer a:hover {
            opacity: 0.75;
        }

        footer .hero {
            position: absolute;
            right: 30px;
            bottom: -15px;
        }
    .row.sub-footer {
        padding: 20px 0 10px 0;
    }
    subfooter a,
    subfooter p{
        font-size: 14px;
        opacity: 0.75;
        text-decoration: none;
    }
    subfooter ul {
        flex-direction: column;
        margin: 0 auto;
    }
    subfooter ul li{
        float: left;
        padding-right: 20px;
        display: inline-block;
    }
}

@media (min-width:1050px) {
    .sub-footer .menu,
    .footer-menu .menu {
        display: flex;
    }
    .sub-footer .menu a,
    .footer-menu .menu a {
        text-decoration: none;
        padding: 0 20px 0 0;
        display: inline-block;
    }

    .footer-menu .menu .menu-item {
        position: relative;
    }

    .footer-menu .menu .menu-item > a:hover,
    .footer-menu .menu .menu-item.current-menu-item > a {
        opacity: 0.75;
    }
}

/* FOOTER MOBILE */

@media (max-width:1049px) {
    .footer-menu .col-12{
        flex-direction: column;
    }
    footer .copyright {
        margin-top: 30px;
    }
        .footer-menu .menu a {
            text-decoration: none;
            padding: 0;
            display: inline-block;
        }
        .footer-menu .menu > li > a {
            margin-top: 40px;
        }
}

/* HEADER IMAGE */

a.cta {
    background: #FFC600;
    padding: 0 30px;
    border-radius: 30px;
    display: inline-block;
    line-height: 50px;
    text-decoration: none;
}
.cta-ghost a,
a.cta-ghost {
    padding: 0 20px;
    border-radius: 30px;
    display: inline-block;
    text-decoration: none;
    border: 1px solid #24272A;
}
    .inline-cta a.cta-ghost {
        line-height: 50px;
        font-size: 18px;
    }

.pattern {
    position: absolute;
    right: -200px;
    bottom: 50px;
    width: 400px;
    height: 400px;
    background-image: url('images/pattern.png');
    background-size: 40px;
    z-index: 1;
    opacity: 0.05;
}
.inline-cta {
    background: #FFC600;
}

.specs {
    border: 1px solid #DDD;
    border-radius: 5px;
    font-size: 13px;
    line-height: 15px;
    border-collapse: collapse; 
    overflow: unset!important;
    background: #FFF;
}

    .specs strong{
        font-weight: 500;
    }

    .specs tr{
    }   
        .specs tr:last-child{
            border-bottom: 0;
        }

    .specs td{
        width: 40%;
        border-bottom: 1px solid #DDD;
        padding: 3px 10px;
    }
    .specs td + td{
        width: 60%;
    }
    .specs p{
        font-size: 13px;
        line-height: 18px;
        margin: 0;
    }

.usps .check {
    fill: #999;
    width: 30px;
    height: 30px;
}
    .usps h3 {
        margin-top: 0;
    }

ul.short-links {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    list-style: none;
    flex-wrap: wrap;
}
    ul.short-links li {
        margin: 0;
        padding: 0 10px 10px 0;
    }
    ul.short-links li a{
       flex-wrap: nowrap;
    }

/* RELATED */

.bg-001 {
    background-color: #FFC600;
}
.bg-002 {
    background-color: #EFF0EF;
}
.bg-003 {
    background-color: #24272A;
}
.bg-white {
    background-color: #FFF;
}
.bg-yellow-svg {
    background-image: url('images/background-yellow-short.svg');
    background-size: 2500px;
    background-position: center top;
}

.color-001 *::placeholder,
.color-001 *,
.color-001 {
    color: #FFF;
}
.color-002 *,
.color-002 {
    color: #24272A;
}

/* POSTS */

.posts .grid-item.post > div{
    min-height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right top;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}
    .post .title {
        padding-right: 60px;
        background-image: url('images/arrow-next-ghost.svg');
        background-repeat: no-repeat;
        background-size: 40px;
        background-position: right bottom;
        position: relative;
        z-index: 1;
        overflow: visible;
        width: 100%;
        padding-top: 20px;
        color: #FFC600;

    }
    .posts .grid-item.post > div::after {
        position: absolute;
        width: 100%;
        bottom: 0px;
        left: 0;
        height: 200px;
        content: "";
        border-radius: 20px;
        background: #000;
        background: linear-gradient(0deg,rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 0;
    }
    .posts .list-item .featured-image{
        width: 200px;
        height: 150px;
        background-size: cover;
        background-position: center center;
        margin-right: 30px;
    }
    .posts .list-item {
        margin-bottom: 30px;
    }


/* ALLE CATEGORIEEN */

.all-categories,
.all-categories li{
    list-style: none;
    margin: 0;
}

/* GROUPS */

.groups .grid-item.group > div{
    min-height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right top;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}
    .group .title {
        padding-right: 60px;
        background-image: url('images/arrow-next-ghost.svg');
        background-repeat: no-repeat;
        background-size: 40px;
        background-position: right bottom;
        position: relative;
        z-index: 1;
        overflow: visible;
        width: 100%;
        padding-top: 20px;
        color: #FFC600;

    }
    .groups .grid-item.group > div::after {
        position: absolute;
        width: 100%;
        bottom: 0px;
        left: 0;
        height: 200px;
        content: "";
        border-radius: 20px;
        background: #000;
        background: linear-gradient(0deg,rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 0;
    }


        .themes .hero {
            position: absolute;
            left: 50%;
            margin-left: -750px;
            top: -240px;
        }
        .themes .hero svg path{
            fill: #FFC600;
        }
        .themes {
            overflow: visible;
        }

.themes.short .list-item {
    background-color: #24272A;
    padding-right: 60px;
    background-image: url('images/arrow-next-yellow.svg');
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: right 20px center;
    margin-bottom: 30px;
    padding: 30px 30px!important;
    transition: all 0.15s ease-in-out;
}
.themes.short .list-item:hover {
    opacity: 0.9;
    background-position: right 15px center;
    transition: all 0.15s ease-in-out;
}
.themes.short .list-item * {
    color: #FFF;
}

/* REVIEW */

.review > div{
    min-height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
    .review .name {
        font-size: 17px;
        font-weight: 600;
        line-height: 24px;
    }
    .review .company {
        font-size: 14px;
        line-height: 24px;
    }

    .grid-item.review > div {
        background-image: url('images/quote.svg');
        background-repeat: no-repeat;
        background-size: 60px;
        background-position: 30px 20px;
        padding-top: 90px!important;
    }

/* THEMES */

.themes .grid-item > div{
    min-height: 350px;
    display: flex;
    flex-direction: column; 
    background-image: url('images/arrow-next-yellow.svg');
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: right bottom;
}

 .review-slider .col-4,
.themes .col-4 {
    margin-bottom: 60px;
}    
 .review-slider .col-4 .grid-item > div {
    min-height: 485px;
 }

 .page-template-reviews .col-4 .grid-item > div  {
    min-height: 485px;
    margin-bottom: 60px;
 }

/* CONTACT */

.quote-image {
    position: relative;
}




/* BLOCKS */

blockquote {
    margin: 25px 0;
}
    .wp-block-pullquote p,
    blockquote p {
        font-size: 115%;
        margin: 0 0 5px 10px;
    }
        .wp-block-pullquote p{
            font-size: 48px;
            line-height: 56px;
            color: #FFC600;
            font-weight: 500;
        }
    blockquote p:before {
        content: "“";
        margin-left: -10px;
    }
    blockquote p:after {
        content: "“";
    }
    blockquote cite {
        font-size: 75%;
        font-style: normal;
        margin-left: 10px;
    }

figure {
    border-radius: 8px;
}
    figure.aligncenter {
        margin: 30px 0 !important;
    }
    figcaption {
        font-size: 75%;
        font-style: normal;
        text-align: left;
        margin-top: 10px
    }

    .wp-block-pullquote {
        padding: 0;
        text-align: center;
        overflow-wrap: break-word;
        box-sizing: border-box;
    }

.wp-block-table {
    overflow: unset!important;
}
    .wp-block-table table{
        border: 1px solid #EFEFEF;
        font-size: 18px;
    }
        .wp-block-table table tr{
            border-bottom: 1px solid #EFEFEF;
        }
        .wp-block-table table tr:last-child{
            border-bottom: 0;
        }
        .wp-block-table table td {
            padding: 10px 10px;
            border-right: 1px solid #EFEFEF;
        }
        .wp-block-table table td:last-child{
            border-right: 0;
        }

pre.wp-block-verse {
    padding: 40px 0;
    font-size: 115%;
}
pre.wp-block-verse:before{
    content: "—";
    margin-right: 10px;
}
.wp-block-columns,
.wp-block-gallery {
    margin: 30px 0;
}
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    background: none;
}
form input[type="submit"],
.form input[type="submit"],
.btn {
        padding: 0 20px;
        border-radius: 30px;
        display: inline-block;
        line-height: 40px;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        font-weight: 500;
        width: auto;
        background: none;
        cursor: pointer;
    }
    input::placeholder {
        color: #24272ABF;
    }
    form input[type="submit"],
    .form input[type="submit"],
    .btn.large {
        line-height: 40px;
        font-size: 17px;
        padding-right: 60px;
        background-image: url('images/arrow.svg');
        background-repeat: no-repeat;
        background-position: right center;
    }
    form input[type="submit"] {
        float: right;
        display: inline-block;
    }
        .bg-003 form input[type="submit"] {
            background-image: url('images/arrow-next-yellow.svg');
        }
    .btn.small {
        padding: 0 15px;
        line-height: 30px;
        font-size: 15px;
    }
    .btn.ghost {
        border: 1px solid #24272A;
        background: none;
        color: #24272A;
    }

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background),
.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background) {
    color: inherit;
    border:2px solid #24272A;
    cursor: pointer;
    border-radius: 5px;
    line-height: 33px;
}
span.intro {
    padding-top: 40px;
    display: inline-block;
}
p.intro {
    font-size: 110%;
}
..wpcf7-spinner {
    display: none;
}

/* SVG LOGO */

.logo {
    line-height: 20px;
}
.logo svg {
    line-height: 20px;
    position: absolute;
    left: 50%;
    top: -10px;
    margin-left: -28px;
}
    .main-menu .logo svg path{
        fill: #FFFFFF!important;
        transition: all 0.2s ease-in-out;
    }

/* 

/* DARK/LIGHT MODE */

.mode-select {
    display: flex;
    align-item: center;
    justify-content: center;
    margin: 5px 10px;
    cursor: pointer;
}
    .mode-select svg {
        fill: #24272A;
        width: 16px;
        height: 16px;
    }
    .dark-mode .mode-select svg {
        fill: #FFF;
    }

/*  GRID ITEMS */

.grid-item{ 
    position: relative;
}
    .grid-item a{
        text-decoration: none;
        color: inherit;
     }
    .grid-item .details{
        padding: 20px 30px;
        min-height: 400px;
        background: #FFF;
        border-top: 10px solid #FBB13C;
        position: relative;
        box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
        border-radius: 5px;
    }
        .page-grid .details {
            border-top: 0px solid #24272A;
            padding: 20px 30px 80px;
        }
        .grid-item .arrow{
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 0px;
            top: 25px;
            background: red;
            text-indent: -9999px;
        }
            .grid-item .arrow svg{
                width: 25px;
                height: 25px;
            }
    .grid-item.port img {
        width: 100%;
        border-radius: 20px;
    }
    .grid-item.port {
        position: relative;
        padding: 0;
        overflow: hidden;
    }
        .grid-item.port h4 {
            position: absolute;
            bottom: 10px;
            z-index: 1;
            color: #FFF;
            width: 100%;
            padding: 20px;
            font-size: 20px;
            margin: 0;
            font-weight: 400;
        }

        .grid-item.port:after {
            position: absolute;
            bottom: 9px;
            left: 0;
            width: 100%;
            height: 150px;
            content: "";
            z-index: 0;
            display: block;
            border-bottom-right-radius: 20px;
            border-bottom-left-radius: 20px;
            background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5));
        }
        
.post-list {
    margin-top: 40px;
    padding: 0;
    width: 100%;
    position: relative;
}

.left_cats {
    margin-top: 30px;
}
.tags {
        margin: 10px 0;
    }
        .categories,
        .tags .tag {
            margin: 0 10px 0 0;
            font-size: 75%;
            font-weight: 500;
            z-index: 1;
        }
            .tags .tag {
                opacity: 0.5;
            }

/* CONTENT */

.content ul {
    margin-left: 25px;
}
    .content h2 {
        margin: 20px 0 5px ;
    }

/* BREADCRUMBS */

.breadcrumbs .row {
   padding: 30px 0 20px;
}

.breadcrumbs .offset-crumbs {
    margin-left: -20px;
}
.breadcrumbs * {
   font-size: 14px;
   margin: 0 5px;
}

.breadcrumbs span span {
   font-size: 14px;
   margin: 0 5px;
}
    .breadcrumbs span span {
       opacity: 0.75;
    }
    .breadcrumbs span span:hover {
       opacity: 1;
    }
     .first .row {
       padding-top: 60px;
    }

.short + .short .row {
    padding-top: 0;
}

/* PAGINATION */

.pagination {

}
    .pagination .page-numbers{
        width: 40px;
        height: 40px;
        display: inline-block;
        border-radius: 100%;
        border: 3px solid #24272A;
        line-height: 34px;
        text-align: center;
        margin-right: 10px;
        text-decoration: none;
        font-weight: 500;
    }

    .pagination .page-numbers.prev,
    .pagination .page-numbers.next {
        text-indent: -9999px;
        background-image: url('images/arrow-next-black.svg');
        background-size: 40px;
        background-position: center center;
    }
    .pagination .page-numbers.prev{
        background-image: url('images/arrow-prev-black.svg');
    }
    .pagination .page-numbers.dots {
        border: 0;
    }

    .pagination .page-numbers.current {
        border: 3px solid #FFC600;
        background: #FFC600;
        color: #24272A;
    }


/* Slider */

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.quote-slider.slick-slider {
    padding-bottom: 50px;
    margin-bottom: 50px;
}
.slick-list {
    position: relative;
    overflow: visible;
    display: block;
    margin: 0;
    padding-top: 50px;

    &:focus {
        outline: none;
    }

    &.dragging {
        cursor: pointer;
        cursor: hand;
    }
}
.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.productslide .slick-track .col-4 {
    margin-top: 40px;
}
.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;

    &:before,
    &:after {
        content: "";
        display: table;
    }

    &:after {
        clear: both;
    }

    .slick-loading & {
        visibility: hidden;
    }
        }
        .slick-slide {
            float: left;
            height: 100%;
            min-height: 1px;
            [dir="rtl"] & {
                float: right;
            }
            img {
                display: block;
            }
            &.slick-loading img {
                display: none;
            }

            display: none;

            &.dragging img {
                pointer-events: none;
            }

            .slick-initialized & {
                display: block;
            }

            .slick-loading & {
                visibility: hidden;
            }

            .slick-vertical & {
                display: block;
                height: auto;
                border: 1px solid transparent;
            }
        }
        .slick-arrow.slick-hidden {
            display: none;
        }
        .slick-arrow {
            position: absolute;
            left: 25px;
            border: 0;
            text-indent: -9999px;
            width: 50px;
            height: 50px;
            cursor: pointer;
            z-index: 500;
            bottom: -30px;
        }
            .slick-arrow.slick-disabled {
                opacity: 0.75;
                cursor: default;
            }
            .slick-arrow.slick-prev {
                 left: 60px;
             }
            .slick-arrow.slick-next {
                 left: 125px;
             }
            .slick-arrow.slick-prev,
            .slick-arrow.slick-next {
                background: url('images/arrow-next-black.svg');
                background-size: contain;
                background-repeat: no-repeat;

            }
            .slick-arrow.slick-prev {
                background-image: url('images/arrow-prev-black.svg');
            }
                .quote-slider .slick-arrow {
                    bottom: -25px;
                    left: 50%;
                    margin-left: 0px;
                }
                .quote-slider .slick-arrow.slick-prev {
                    margin-left: -65px;
                }
.slick-dots
{
    position: absolute;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.slick-dots li
{
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-size: 40px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .5;
    color: black;
}

.quote-slider .excerpt {
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    font-weight: 500;
    margin-top: 90px;
}

/* PAGES */

section.padding,
article > .row.first {
    padding: 60px 0;
}

    .heading h1{
        font-size: 64px;
        line-height: 72px;
        margin-bottom: 30px;
    }

/* HOMEPAGE */

.jumbotron .row{
    min-height: 500px;
    padding: 60px 0 120px;
}

.jumbotron h1{
    font-size: 64px;
    line-height: 72px;
    margin-bottom: 30px;
}
.jumbotron p strong,
.jumbotron p{
    font-size: 22px;
    line-height: 36px;
    margin-bottom: 30px;
}


p.title-download {
    margin-top: 30px;
}

    form label {
        width: 100%;
        font-size: 14px;
        font-weight: 500;
    }

    form input {
        width: 100%;
        line-height: 24px;
        padding: 10px;
        font-size: 16px;
        border: 0;
        border-radius: 4px;
        margin: 20px 0 0;
        background: #FFFFFF80;
    }

    form p.disclaimer {
        width: 100%;
        margin: 10px 0 20px;
        font-size: 14px;
        line-height: 22px;
        color: #666;
    }


/* GLOBALS RESPONSIVE */

.mobile-overflow {
    min-width: 100%;
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    margin: 0 auto;
    flex-wrap: wrap;
}
.mobile-only {
    display: none!important;
}
.desktop-only {
    display: flex!important;
}
.text-in-columns {
    column-count: 2;
    column-gap: 60px;
}
@media (max-width: 1220px) {
    .row.main-menu {
        display: inline-block;
    }
    .slick-list {
        margin-left: -25px;
    }
}

@media (max-width: 1049px) {
    body {
        padding: 80px 0 0;
    }
    .row {
        padding: 45px 0;
    }
    .logo svg {
        top: 10px;
        margin-left: -25px;
    }
    .row.main-menu .container {
        padding: 0 20px 0 0;
    }
    .mask-mark {
        width: 100vw;
        left:0;
    }
    .text-center *,
    .text-center {
        text-align: left;
    }
    .usps .text-center *,
    .usps .text-center {
        text-align: center;
    }

    .desktop-only {
        display: none!important;
    }
    .mobile-only {
        display: flex!important;
    }
    .mobile-scroll {
        overflow-x: scroll;
        overflow-y: visible;
    }
    .mobile-overflow {
        width: 1023px!important;
        min-width:  1023px;
        display: flex;
        flex-wrap: initial;
        padding-bottom: 30px;
    }
    .mobile-overflow > div {
        flex: 0 0 30%!important;
        max-width: 30%!important;
    }
    .logo svg {
        left: 20px;
        margin: 0;
    }
    .quote-slider.slick-slider,
    .mobile-padding {
        padding: 15px !important;
    }

    .container {
        max-width: 860px;
        padding: 0 20px;
    }
    .row.main-menu .container {
        max-width: 100%;
    }

    .mobile-order-1 {
        order: -1;
    }
    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 0px!important;
    }
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0px!important;
    }

    .min-height {
        padding-top: 200px!important;
    }
    .container.all-posts,
    .container.chosen-posts,
    .container.more-pages {
        padding-right: 30px;
    }
    .mask-mark {
        background-image: none!important;
    }
    .wp-block-pullquote p {

        font-size: 8vw;
        line-height: 125%;
    }
    .whitepaper-cover {
        transform: scale(0.75);
    }
    .header {
        min-height: 625px;
    }
    .home .header {
        background-position: right -120px top;
    }
    .header .flow {
        background-size: 100%;
    }
    .bg-yellow-svg {
        background-image: url('images/background-yellow.svg');
    }
}


@media (max-width: 767px) {
    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 {
        flex: 0 0 100%;
        max-width: 100%; 
    }
    .home .first .row,
    .first .row {
        padding-top: 30px;
    }
    .breadcrumbs {
        display: none;
    }
    .container {
        padding: 0 15px;
    }
    .text-in-columns {
        column-count: 1;
        column-gap: 0;
    }
    .quote-slider .excerpt {
        margin-top: 0;
    }
    .grid-item {
        margin-bottom: 45px;
    }
    .bg-yellow-svg {
        background-size: 100%;
    }
    .themes .grid-item > div {
        min-height: auto;
        padding-bottom: 30px;
    }
    .review-slider .col-4,
    .themes .col-4 {
        margin-bottom: 30px;
    }
    .themes .col-4 .grid-item {
        margin-bottom: 0px;
    }
    .jumbotron h1,
    h1 span,
    h1 em,
    h1 {
        font-size: 35px;
        line-height: 125%;

    }
    h2{
        font-size: 30px;
        line-height: 125%;
        margin: 15px 0 10px;
    }

    h3{
        font-weight: 600;
        font-size: 24px;
        line-height: 36px;
        margin: 15px 0 5px;
    }

    h4{
        font-weight: 600;
        font-size: 18px;
        line-height: 24px;
        margin: 0 0 4px;
    }
    h5 {
        font-weight: 600;
        font-size: 23px;
        line-height: 125%;
        margin: 10px 0 3px;
    }
    .footer-menu ul.menu > li {

        width: 100%;

    }
    .breadcrumbs .offset-crumbs {
        margin-left: -30px;
    }  
}

@media (max-width: 512px) {
    .container.all-posts,
    .container.chosen-posts,
    .container.more-pages {
        padding-right: 0px;
    }
    .page-grid, .post-grid {
        padding: 0 10px;
    }
    .slick-list {
        margin-left: -15px;
    }
}

/* MASONRY */

.masonry {
    width: 100%;
    max-width: 1350px;
    column-count: 3;
    column-gap: 50px;
    padding: 0 25px;
}

.masonry-item  {
    break-inside: avoid;
}
.masonry-item:first-child  {
    margin-top: -40px;
}

@media (max-width: 1049px) {
  .masonry {
    column-count: 2;
    padding: 20px;
  }
}

@media (max-width: 512px) {
  .masonry {
    column-count: 1;
  }
}

/* FAQ */

ul.faq-list,
ul.faq-list li {
    padding: 0;
    margin: 0;
    list-style: none;
}

ul.faq-list {
    border: 1px solid #DDD;
    border-radius: 10px;
}
ul.faq-list li {
    border-bottom: 1px solid #DDD;
    cursor: pointer;
}

    ul.faq-list li .question{
        padding: 15px 15px;
    }
    ul.faq-list li.active .question{
        padding: 15px 15px 0 15px;
        margin-bottom: 15px;
    }
    ul.faq-list li:last-child {
        border: 0;
    }
ul.faq-list .question {
    line-height: 20px;
    font-size: 20px;
    font-weight: 500;
    display: inline-block;
 }   
    ul.faq-list li .answer{
        display: none;
        padding: 0px 15px;
        width: 100%;
    }
    ul.faq-list li.active .answer{
        display: inline-block;
    }

.zoomed {
    position: fixed;
    left: 0;
    top:0;
    background: #000000BF;
    width: 100%;
    height: 100%;
    z-index: 10000;
    padding: 30px 30px 60px 30px;
    text-align: center;
    display: none;
}
.port.open .zoomed {
    display: block;
}
    .port.active .zoomed img{
        max-height: 100%;
        width: auto;

    }
    .zoomed .close {
        position: absolute;
        right: 0;
        top: 0;
        padding: 30px;
        color: #FFF;
    }
        .grid-item.port .zoomed h4 {
            bottom: 0;
            z-index: 1;
            color: #FFF;
            width: 100%;
            padding: 20px;
            font-size: 20px;
            margin: 0;
            font-weight: 400;
            left: 0;
        }