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

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

/* GENERAL */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:focus {
    outline: none;
}
*,html,body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    -moz-appearance: none;
    -webkit-appearance: none;
    font-size: 19px;
    line-height: 1.55em;
    color: #1c1c1c;
    font-weight: 400;
    letter-spacing: 0.5px;
}
input {
    font-family: inherit;
}
body {
    background:#FFF;
    overflow-x: hidden;
    padding-top: 140px;
}
    body.dark-mode {
        background:#222;
        color: #FFF;
    }

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: 600;
    font-size: 42px;
    line-height: 110%;
    margin: 20px 0 10px;
}

h2{
    font-weight: 600;
    font-size: 24px;
    line-height: 125%;
    margin: 30px 0 5px;
}
    h1 + h2 {
        margin: -5px 0 30px;
        opacity: 0.65;
    }

h3,
h3 p{
    font-weight: 600;
    font-size: 26px;
    line-height: 125%;
    margin: 15px 0 5px;
}

h4{
    font-weight: 600;
    font-size: 22px;
    line-height: 125%;
    margin: 12px 0 4px;
}
h5 {
    font-weight: 600;
    font-size: 24px;
    line-height: 125%;
    margin: 10px 0 3px;
}
li a,
li,
p *,
p {
    font-size: inherit;
}
p {
    margin-bottom: 15px;
}
p strong{
    font-weight: 600;
    position: relative;
    border-radius: 2px;
}
img {
    max-width: 100%;
}
.text-center,
.text-center * {
    text-align: center;
}

.bg-001 {
    background: #F7F7F7;
}

.content ul {
    margin: 0 0 10px 25px;
    padding: 0;
    list-style: disc;
}
    .content ul li {

    }

/* GRID */

article,
section {
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-direction: column;
}
.row {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    padding: 60px 0 60px;
    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;
    }
    .vh-100  {
    height: 100vh;
}
.vh-75  {
    height: 75vh;
}
.vh-50  {
    height: 50vh;
}
.min-height  {
    min-height: 400px;
}
.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 25px;
    position: relative;
}
.no-padding > div[class*="col-"] {
    padding: 0;
}
.extra-padding div[class*="col-"] {
    padding: 0 40px;
}
.no-self-padding {
    padding: 0!important;
}
*.padding {
    padding: 25px;
}
.border-radius  {
    border-radius: 20px;
    overflow: hidden;
}

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

/* MAIN MENU DESKTOP */

@media (min-width:1024px) {
    .zoomed {
        display: block;
    }
    .row.main-menu {
        padding: 0;
        margin: 0;
        z-index: 1000;
        overflow: visible;
        padding: 15px 0 10px;
        top: 0;
        position: fixed;
        background: #FFFFFFEF;
    }
    .main-menu .menu {
        display: flex;
    }
        .ctas a,
        .main-menu .menu a {
            text-decoration: none;
            line-height: 40px;
            padding: 0 10px;
            display: inline-block;
            font-size: 18px;
            font-weight: 500;
            position: relative;
            transition: opacity 0.2s ease-in-out;
        }   
        .main-menu .menu > li > a {
            margin: 0 5px;
        }
        .main-menu .menu .cta-ghost a {
            border: 0;
        }

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

                .main-menu .menu .menu-item > a:hover,
                .main-menu .menu .menu-item.menu-item-has-children:hover > a {
                    opacity: 0.75;
                }
                .main-menu .menu .menu-item.current-menu-parent > a,
                .main-menu .menu .menu-item.current-menu-item > a {
                  color: #FF8800;
                }

                .main-menu .menu > .menu-item:hover > a {
                }

                .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:  7px;
                    height: 7px;
                    border-bottom: 2px solid;
                    border-left: 2px solid;
                    transform: rotate(-45deg);
                    position: absolute;
                    right: 12px;
                    top: 50%;
                    margin-top: -3px;
                    transition: all 0.2s ease-in-out;
                }
                .main-menu .menu .menu-item.cta:hover a {
                    background: #F5F5F5;
                    color: #1c1c1c;
                }
        .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: #FFFFFF;
            box-shadow: 0 5px 10px 0 rgba(0,0,0,0.15);
            z-index: 100;
            opacity: 0;
            top:  50px;
            border-radius: 10px;
            padding: 10px 0;
            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: 26px;
                    padding: 5px 20px;
                    font-size: 17px;
                }
                .child-pages,
                .cta-menu {
                    margin:0 0 15px 0;
                    padding: 0;
                    list-style: none;
                }
                    .cta-menu a {
                        padding: 0px 30px 0 20px;
                        border-radius: 20px;
                        display: inline-block;
                        line-height: 35px;
                        text-decoration: none;
                        background: #222;
                        display: inline-block;
                        font-weight: 500;
                        color: #FFF;
                        font-size: 17px;
                        margin-left: 10px;
                        position: relative;
                    }
                        .cta-menu a:after {
                            content: "";
                            display: block;
                            width:  7px;
                            height: 7px;
                            border-bottom: 1.5px solid #222;
                            border-left: 1.5px solid #222;;
                            transform: rotate(-135deg);
                            position: absolute;
                            right: 15px;
                            top: 50%;
                            margin-top: -3px;
                        }
                    .cta-menu a.ghost {
                        background: none;
                        border: 1.5px solid #222;
                        color: #222;
                    }
                    .cta-menu a.orange {
                        border: 2px solid #FF8800;
                        background: #FF8800;
                        color: #222;
                    }
        .parent-title {
            margin-top: 30px;
        }
          .child-pages li a {
                    text-decoration: none;
                    font-size: 18px;
                    line-height: 30px;
                    padding: 3px 0;
                    position: relative;
                    display: block;
                    margin-right: 30px;
                }
                .child-pages li a:after{
                    content: "";
                    display: block;
                    width:  7px;
                    height: 7px;
                    border-bottom: 1.5px solid #222;
                    border-left: 1.5px solid #222;;
                    transform: rotate(-135deg);
                    position: absolute;
                    right: -10px;
                    top: 50%;
                    margin-top: -3px;
                }
}

/* MAIN MENU MOBILE */

@media (max-width:1023px) {
    .toggle-menu {
        display: block;
        z-index: 990;
    }
    .row.main-menu {
        height: 80px;
        position: fixed;
        top: 0;
        left: 0;
        background: #FFF;
        width: 100vw;
        padding: 0;
        margin:0;
        z-index: 990;
        overflow: visible;
        transition: background 0.2s ease-in-out;
        z-index: 1010;
    }
        .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: 100vh;
            transition: opacity .2s ease-in-out;
            padding-top: 100px;
            z-index: -1;
        }
            .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%;
                    width: 100%;
                    color: #;
                    display: inline-block;
                }
                .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: #FF8800;
                    }

                .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%;
                    }


    .menu-active .row.main-menu {
        background: transparent;
        border:0;
    }
    .menu-active .row.main-menu #menu-hoofdmenu.menu {
        background: #EFEFEF;
        border:0;
    }
    .menu-active .logo svg *,
    .menu-active .logo svg{
        fill: #fffef8;
    }
    .menu-active  .main-menu .menu a {
        padding-left:25px;
    }

        .cta-menu {
            margin-right: 60px;
        }
        .cta-menu li {
            list-style: none;
        }
        .cta-menu a {
        padding: 0px 30px 0 20px;
        border-radius: 20px;
        display: inline-block;
        line-height: 35px;
        text-decoration: none;
        background: #222;
        display: inline-block;
        font-weight: 500;
        color: #FFF;
        font-size: 17px;
        margin-left: 10px;
        position: relative;
    }
        .cta-menu a:after {
            content: "";
            display: block;
            width:  7px;
            height: 7px;
            border-bottom: 1.5px solid #222;
            border-left: 1.5px solid #222;;
            transform: rotate(-135deg);
            position: absolute;
            right: 15px;
            top: 50%;
            margin-top: -3px;
        }
    .cta-menu a.ghost {
        background: none;
        border: 1.5px solid #222;
        color: #222;
    }
    .cta-menu a.orange {
        border: 2px solid #FF8800;
        background: #FF8800;
        color: #222;
    }
}

/* LANG MENU DESKTOP */

@media (min-width:1024px) {
    .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: gold;
    }
    .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";
        }

}
@media (max-width:1023px) {
    .menu-language-container {
        width: 65px;
        height: 50px;
        position: absolute;
        right: 60px;
        background: #F8F8F7;
        border-radius: 5px;
        padding-bottom: 10px;
        top: 15px;
        list-style: none;
        line-height: 50px!important;
        overflow: hidden;
    }
    .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: gold;
    }
    .main-menu #menu-language {
        flex-direction: column;
        display: flex;
        list-style: none;
        overflow-x: hidden;
    }
    .main-menu #menu-language .current-lang {
        order: -1;
    }
    .main-menu #menu-language .lang-item a{
        text-indent: -9999px;
        height: 50px;
        padding: 0 10px;
        line-height: 50px!important;
    }
        .menu-active .main-menu #menu-language .lang-item a {
            color: #1c1c1c;
        }
    .main-menu #menu-language a:before {
        display: block;
        position: absolute;
        width: 100%;
        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;
    }
    footer .row *{
        color: #FFF;
    }

.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:1023px) {
    .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 MENU DESKTOP */
 
footer {
    position: relative;
    padding-top: 30px;
    background: #222;
}
.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;
    }
.sub-footer {
    font-size: 80%;
}
.sub-footer .copyright {
    text-align: right;
}
@media (min-width:1024px) {
    .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:1023px) {
    .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 */

.featured-image{
    overflow: hidden;
    height: 250px;
    width: 100%;
    background-size: cover;
    margin: 30px 0;
}
    .home .featured-image {
        padding: 170px 20px;
        height: auto;
        background-position: center top;
    }
    .featured-image h1{
        font-size: 2.75em;
    }
    .featured-image p.intro{
        font-size: 1.65em;
        line-height: 1.25em;
        font-weight: 500;
    }

a.cta {
    background: gold;
    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: 2px solid #1c1c1c;
}
    .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: gold;
}
.about-me .background-wrapper {
    background: #F4F4F4;
    padding: 60px 0;
}
.related.themes .background-wrapper {
    background-image: url('images/background.jpg');
    background-size: cover;
    padding: 90px 0;
    background-position: center center;
}   
    .related.themes .btn {
        margin-bottom: 10px;
    }
    .related.themes .col-4 {
        margin-left: calc(8.33333% - 20px);
    }

.book img {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0,0.25);
    transform: rotate(-2deg);
    max-width: 250px;

}
.theme-list {
    display: flex;
    flex-direction: column;
}
.theme-list .btn{
    margin-right: 10px;
}
.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; 
    }


/* AGENDA */

.agenda-item {
    margin-bottom: 30px;
    background: #F4F4F4;
}
.agenda-item label {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    margin-bottom: 5px;
}
.agenda-item label.margin {
    margin-top: 15px;
}

.agenda-item h4 {
    margin: 0;
}
.agenda-listing {
    border: 1px solid #DDD;
}
.agenda-list {
    background: none;
    border-bottom: 1px solid #DDD;
}
.agenda-list:last-child {
    border-bottom: 0;
}
.agenda-list label {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    margin-bottom: 0px;
}
.agenda-list label.margin {
    margin-top: 10px;
}

.agenda-list h4 {
    margin: 0;
}

/* RELATED */

.bg-001 {
    background: #f6f8f5;
}
.bg-002 {
    background: #f2f4f1;
}

/* CONTACT */

.reviews .row {
    padding: 0;
}
.grid-item.review .title:before {
        content: '“';
        display: block;
        font-size: 100px;
        font-family: 'Georgia', serif;
        margin: 0 0 -10px;
    }
.grid-item.review .name {
        font-size: 0.9em;
        font-weight: 600;
        margin-top: 0.25em;
    }
    .col-6 .grid-item.review {
        margin-bottom: 45px;
    }

/* 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: gold;
            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;
}
.post-password-form input[type=submit],
.form input[type="submit"],
.btn {
        padding: 4px 20px;
        border-radius: 30px;
        display: inline-block;
        line-height: 40px;
        text-decoration: none;
        background: #222;
        display: inline-block;
        font-weight: 500;
        color: #FFF;
        width: auto;
        border: 0;
    }
        .btn.inverted {
            background: #FFF;
            color: #222;
        }
    .form input[type="submit"],
    .btn.large {
        padding: 0 25px;
        line-height: 50px;
        font-size: 20px;
    }
    .btn.small {
        padding: 4px 15px;
        line-height: 30px;
        font-size: 16px;
    }
    .btn.ghost {
        border: 1.5px solid #1c1c1c;
        background: none;
        color: #1c1c1c;
    }
    .btn.margin-top {
        margin-top: 1em;
    }

.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 #1c1c1c;
    cursor: pointer;
    border-radius: 5px;
    line-height: 33px;
}
span.intro {
    padding-top: 40px;
    display: inline-block;
}
p.intro {
    font-size: 110%;
}

/* LOGO */

.logo img {
    width: 160px;
    line-height: 20px;
    margin-left: -5px;
}

/* 

/* DARK/LIGHT MODE */

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

/*  GRID ITEMS */

.grid-item{
    margin-top: 20px;
    position: relative;
    padding-bottom: 20px;
}
    .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 #1c1c1c;
            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;
}
    .post-list a{
        text-decoration: none;
        color: inherit;
    }
    .post-list .details {
        padding: 20px 100px 20px 30px;
        background: #FFF;
        border-top: 10px solid #FBB13C;
        position: relative;
        box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
        border-radius: 5px;
    }
    .dark-mode .details {
        background: #222;
    }
    .post-list .arrow {
        background: gold;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 30px;
        bottom: 25px;
    }
    .post-list .arrow svg{
        width: 25px;
        height: 25px;
    }

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

/* SECTIONS */

.bg-grey {
    background: #f6f6f5;
}
    .dark-mode .bg-grey{
        background: #333;
    }

/* OFFSET & BACKGROUND */

.with-white-offset-bg,
.with-light-grey-offset-bg {
    padding-bottom: 120px;
}
.with-white-offset-bg::before,
.with-light-grey-offset-bg::before {
    display: block;
    position: absolute;
    left: 0;
    bottom: 400px;
    width: 100%;
    height: 100%;
    background: #f6f6f5;
    content: "";
}
    .dark-mode .with-light-grey-offset-bg::before {
        background: #222;
    }
    .with-white-offset-bg::before {
        background: #FFF;
    }
    .dark-mode .with-offset-bg::before {
        background: #222;
    }

.board:after {
    display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    background: url('assets/board.svg');
    background-size: contain;
    background-repeat: no-repeat;
    content: "";
    z-index: 0;
}
    .board.board-bottom-left:after {
        bottom: 30px;
        left: 30px;
    }
    .board.board-bottom-right:after {
        bottom: 30px;
        right: 30px;
    }
    .board.board-top-left:after {
        top: 30px;
        left: 30px;
    }
    .board.board-top-right:after {
        top: 30px;
        right: 30px;
    }

/* BREADCRUMBS */

.breadcrumbs{
   padding: 0 0 10px;
}

.breadcrumbs * {
   font-size: 14px;
}

.breadcrumbs span span {
   font-size: 14px;
   font-weight: 500;
}
    .breadcrumbs span span {
       opacity: 0.75;
    }
    .breadcrumbs span span:hover {
       opacity: 1;
    }
    .breadcrumbs span.arrow {
        position: relative;
        width: 25px;
        display: inline-block;
    }
    .breadcrumbs span.arrow:after{
        content: "";
        display: inline-block;
        width:  7px;
        height: 7px;
        border-bottom: 1.5px solid;
        border-left: 1.5px solid;
        transform: rotate(-135deg);
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -4px 0 0 -4px;
        transition: all 0.2s ease-in-out;
    }


.first .row {
   padding: 0 0 60px;
}
    .first .row .intro + a{
       margin-bottom: 30px;
    }
.first + .related .row {
    padding-top: 0;
}
.short + .short .row {
    padding-top: 0;
}
.hero {
    background-size: cover;
    width: 100%;
    height: 200px;
}
/* SLIDER */

.container.slick-slider {
    position: relative;
    z-index: 10;
}
.slick-list {
    width: 100%;
}
    .slick-slide {
        float: left;
    }

    .slick-arrow {
        position: absolute;
        right: 25px;
        bottom: -70px;
        border: 0;
        background: #EFEFEF;
        text-indent: -9999px;
        width: 50px;
        height: 50px;
        cursor: pointer;
    }
        .slick-arrow.slick-disabled {
            opacity: 0.5;
            cursor: default;
        }
        .slick-arrow.slick-prev {
             right: 100px;
         }
        .slick-arrow.slick-prev,
        .slick-arrow.slick-next {
            background: url('assets/large-arrow.svg');
            background-size: contain;
            background-repeat: no-repeat;

        }
        .slick-arrow.slick-prev {
            background: url('assets/large-arrow-back.svg');
        }

/* PAGES */

.related h3 {
    margin-bottom: 30px;
}

.related .grid-item h3 {
    margin-bottom: 10px;
}


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

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

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

.wpcf7-form {
    background: #FFF;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.15);
    padding: 20px 30px;
    margin-top: 40px;
}
    .wpcf7-form label {
        width: 100%;
        font-size: 14px;
        font-weight: 500;
    }
    .wpcf7-form :place {
        width: 100%;
        font-size: 14px;
        font-weight: 500;
    }
    .post-password-form input[type=password],
    .wpcf7-form textarea,
    .wpcf7-form input[type=text],
    .wpcf7-form input[type=email]{
        width: 100%;
        line-height: 32px;
        padding: 10px;
        font-size: 18px;
        border: 1px solid #DDD;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .post-password-form input[type=password] {
        max-width: 300px;
    }
    .wpcf7-form textarea::placeholder,
    .wpcf7-form input[type=text]::placeholder,
    .wpcf7-form input[type=email]::placeholder{
        color: #222;
    }
    .wpcf7-form input[type=radio] {
        width: 20px;
        box-sizing: border-box;
        padding: 0;
    }
    .wpcf7-form textarea {
        height: 130px;
    }

    .wpcf7-form .wpcf7-submit {
        padding: 4px 20px;
        border-radius: 30px;
        display: inline-block;
        line-height: 40px;
        text-decoration: none;
        background: #222;
        display: inline-block;
        font-weight: 500;
        color: #FFF;
        width: auto;
        border: 0;
    }

    .wpcf7-form p.disclaimer {
        width: 100%;
        margin: 10px 0 20px;
        font-size: 14px;
        line-height: 22px;
        color: #666;
    }
    .wpcf7-radio .wpcf7-list-item, .wpcf7-checkbox .wpcf7-list-item {
        display: block;
        margin-left: 0px;
    }

    .wpcf7-radio:after, 
    .wpcf7-checkbox:after {
        content: "";
        display: block;
        height: 15px;
    }

    .wpcf7 .wpcf7-list-item {
        display: block;
        margin-bottom: 5px;
    }

    .wpcf7-form .wpcf7-radio label {
        position: relative;
        cursor: pointer;
        line-height: 35px;
    }
    .wpcf7-form .wpcf7-radio label span {
        line-height: 35px;
        font-size: 1.15em;
        padding-top: 10px;
    }

    .wpcf7-form .wpcf7-radio input[type=radio] {
        position: relative;
        visibility: hidden;
    }

    .wpcf7-form .wpcf7-radio input[type=radio] + span:before {
        display: block;
        position: absolute;
        content: '';
        border-radius: 100%;
        height: 24px;
        width: 24px;
        top: -3px;
        border: 1px solid #CCC;
    }

    .wpcf7-form .wpcf7-radio input[type=radio] + span:after {
        display: block;
        position: absolute;
        content: '';
        border-radius: 100%;
        height: 18px;
        width: 18px;
        top: 0px;
        left: 3px;
        visibility: hidden;
    }

    .wpcf7-form .wpcf7-radio input[type=radio]:checked + span:before {
        background: transparent;
    }


    .wpcf7-form .wpcf7-radio input[type=radio], .wpcf7-form .wpcf7-checkbox input[type=checkbox] {
        margin-right: 10px;
    }

    .wpcf7-form .wpcf7-radio .wpcf7-list-item input[type=radio]:checked + span:after {
        background: #FF8800;
        visibility: visible;
    }


/* 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: block!important;
}
.text-in-columns {
    column-count: 2;
    column-gap: 50px;
}
@media (max-width: 1220px) {
    .row.main-menu {
        display: inline-block;
    }
    .slick-list {
        margin-left: -25px;
    }

}
@media (min-width: 1023px) and (max-width: 1250px) {
    .hide-item {
        display: none;
    }
}
@media (max-width: 1260px) {
    .main-menu .menu > li > a{
        margin: 0;
        padding: 0 8px 0 7px;
    }
    .main-menu .menu .menu-item.menu-item-has-children a {
        padding-right: 25px;
    }
}
@media (max-width: 1023px) {

    body {
        padding: 80px 0 0;
    }

    .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 {
        width: 140px;
        margin-left: 25px;
    }
    .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: 0 10px!important;
    }
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 10px!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);
    }
.logo img {
    width: 110px;
    margin-left: 5px;
}
.footer-menu .menu > li > a {
    margin: 0;
}
    .row.footer-menu .col-6{

        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }
}

@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%; 
    }
    .about-me .background-wrapper {
        background: none;
    }
    .about-me .col-12 {
        padding: 0!important;
    }
    .home .featured-image {
        padding: 150px 10px;
    }
    .related.themes .background-wrapper {
        padding: 60px 10px!important;
    }
    .breadcrumbs {
        display: none;
    }
    .container {
        padding: 0 15px;
    }
    .text-in-columns {
        column-count: 1;
        column-gap: 0;
    }
    .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,
    h3  p{
        font-weight: 600;
        font-size: 26px;
        line-height: 125%;
        margin: 15px 0 5px;
    }

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

        width: 100%;

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

    .logo svg {
        margin-left: 15px;
    }
    .about-me.image img {
        margin-top: 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;
    }
    .cta-menu {
        display: none;
    }
}
.wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}
.wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%!important;
    border: 0;
}