@import (css) url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@white-color: #fff;
@text-color: #1F1D31;

@neutral-20: #111310;
@neutral-40: #414042;
@neutral-60: #58595B;
@neutral-80: #EAEBEB;
@neutral-90: #F8FAFC;
@neutral-100: #FFFFFF;

@primary-20: #0D183F;
@primary-40: #082567;
@primary-60: #1B449C;
@primary-80: #0095DB;
@primary-100: #E7F6FD;

@secondary-20: #FF3800;
@secondary-40: #FF6033;
@secondary-60: #FFD7CC;

@success-20: #08450D;
@success-40: #0F8A1A;
@success-60: #75F080;
@success-80: #BAF7BF;
@success-100: #E8FCEA;

@alert-20: #4D1A00;
@alert-40: #CC4400;
@alert-60: #FF9966;
@alert-80: #FFCCB2;
@alert-100: #FFEEE5;

@error-20: #450812;
@error-40: #8A0F24;
@error-60: #F42547;
@error-80: #F7BAC4;
@error-100: #FCE8EB;
body {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    font-style: normal;
    color:@text-color;
    background-color: @neutral-90;
}
.grecaptcha-badge { 
    visibility: hidden; 
}
/* PART 1 - Before Lazy Load */
img[data-lazyloaded]{
    opacity: 0;
}
/* PART 2 - Upon Lazy Load */
img.litespeed-loaded{
    -webkit-transition: opacity .5s linear 0.2s;
    -moz-transition: opacity .5s linear 0.2s;
    transition: opacity .5s linear 0.2s;
    opacity: 1;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 8px 0;
}
h1 {

}
h2 {

}
h3 {

}
h4 {

}
h5 {

}
h6 {

}
a, a:visited {
    color:@neutral-20;
    transition: all 0.3s;
    text-decoration: none;
    &:hover {
        color:@secondary-20;
    }
}
button {
    cursor: pointer;
}
p {
    margin: 0 0 16px 0;
}
table {
    border-collapse: collapse;
    thead {
        tr {
            th {

            }
        }
    }
    tbody {
        tr {
            td {

            }
        }
    }
    tbody {
        tr {
            td {

            }
        }
    }
}
blockquote {

}
ul {
    li {

    }
}
ol {
    li {

    }
}
/* main */
.cursor-pointer {
    cursor: pointer;
}
.social-list {
    display: flex;
    flex-wrap: wrap;
    a.item {
        width: 48px;
        height: 48px;
        background-color: @primary-40;
        margin-right: 4px;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon {
            background-position: center;
            background-repeat: no-repeat;
            background-size: 24px 24px;
            width: 24px;
            height: 24px;
            filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(107deg) brightness(98%) contrast(113%);
        }
        &:first-child {
            border-radius: 12px 0 0 12px;
        }
        &:last-child {
            border-radius: 0 12px 12px 0;
            margin-right: 0;
        }
    }
    &.primary-100 { 
        a.item {
            background-color: @primary-100;
            .icon {
                filter: invert(17%) sepia(100%) saturate(2082%) hue-rotate(215deg) brightness(87%) contrast(89%);
            }
        }
    }
    a.item {
        &:hover {
            background-color: @secondary-20;
            .icon {
                filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(107deg) brightness(98%) contrast(113%);
            }
        }
    }
}
/* text colors */
.text-white {
    color:@white-color;
}
.text-primary-20 {
    color:@primary-20;
}
.text-primary-60 {
    color: @primary-60;
}
.text-neutral-40 {
    color:@neutral-40;
}
/* text transform */
.text-transform-capitalize {
    text-transform: capitalize;
}
/* text align */
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
/* headings */
.h-900 {
    font-size: 56px;
    line-height: 64px;
}
.h-800 {
    font-size: 48px;
    line-height: 56px;
}
.h-700 {
    font-size: 40px;
    line-height: 48px;
}
.h-600 {
    font-size: 32px;
    line-height: 40px;
}
.h-500 {
    font-size: 24px;
    line-height: 32px;
}
.body-heading {
    font-size: 22px;
    line-height: 28px;
}
.subtitle-1 {
    font-size: 24px;
    line-height: 30px;
}
.subtitle-2 {
    font-size: 18px;
    line-height: 28px;
}
.subtitle-2-slim {
    font-size: 18px;
    line-height: 26px;
}
.body-xl {
    font-size: 20px;
    line-height: 30px;
}
.body-heading {
    font-size: 20px;
    line-height: 28px;
}
.body-l {
    font-size: 18px;
    line-height: 30px;
}
.body-l-slim {
    font-size: 18px;
    line-height: 26px;
}
.body-medium {
    font-size: 16px;
    line-height: 24px;
}
.body-s {
    font-size: 14px;
    line-height: 22px;
}
.input-label {
    font-size: 10px;
    line-height: 10px;
}
/* font weight */
.fw-400 {
    font-weight: 400;
}
.fw-500 {
    font-weight: 500;
}
.fw-600 {
    font-weight: 600;
}
.fw-700 {
    font-weight: 700;
}
/* height */
.h-100 {
    height: 100%;
}
/* bg */
.bg-white {
    background-color: @white-color;
}
.bg-primary-20 {
    background-color: @primary-20;
}
.bg-primary-40 {
    background-color: @primary-40;
}
.bg-primary-60 {
    background-color: @primary-60;
}
.bg-primary-100 {
    background-color: @primary-100;
}
.bg-neutral-90 {
    background-color: @neutral-90;
}
.radius-12 {
    border-radius: 12px;
}
.radius-circle {
    border-radius: 50%;
}
/* buttons */
.button-group {
    display: flex;
    flex-wrap: wrap;
    a, button {
        &:nth-child(1) {
            margin-right: 16px;
        }
    }
}
a, button {
    text-decoration: none;
    display: inline-block;
    &:focus, &:active {
        outline: none;
    }
    &.button {   
        transition: all 0.3s;
        text-decoration: none;
        display: inline-block;
        &.button-primary {
            background-color: @primary-60;
            color:@white-color;
            padding: 7px 40px 7px;
            height: 48px;
            font-size: 16px;
            font-weight: 600;
            line-height: 16px;
            border:2px solid @primary-60;
            border-radius: 25px;
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
        }
        &.button-secondary {
            background-color: @white-color;
            color:@text-color;
            padding: 8px 40px 7px;
            height: 48px;
            font-size: 16px;
            font-weight: 600;
            line-height: 16px;
            border:2px solid @white-color;
            border-radius: 25px;
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
        }
        &.slim-button {
            background-color: @neutral-90;
            height: 24px;
            display: inline-block;
            border-radius: 12px;
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 14px;
            padding: 5px 16px;
        }
        &.icon {
            padding: 8px 64px 7px 40px;
            position: relative;
            &:before {
                content: '';
                position: absolute;
                right: 40px;
                top: calc(~'50% - 6px');
                background-size: 16px 16px;
                background-position: center;
                background-repeat: no-repeat;
                width: 16px;
                height: 16px;
            }
            &.icon-arrow {
                &:before {
                    background-image: url('../img/icons/arrow-right.svg');
                }
            }
            &.icon-website {
                &:before {
                    background-image: url('../img/icons/arrow-up-right.svg');
                }
            }
        }
        &.xs {
            height: 32px;
            padding: 0 40px;
        }
        &.small {
            height: 40px;
            padding: 3px 40px;
        }
        &.narrow {
            padding-left: 16px;
            padding-right: 16px;
        }
        &.light {
            background-color: @neutral-90;
            border-color:@neutral-90;
            color:@neutral-20;
            &:hover {
                background-color: @secondary-20;
                border-color:@secondary-20;
                color:@white-color;
            }
        }
        &.white {
            background-color: @white-color;
            border-color:@white-color;
            color:@primary-20;
            &:hover {
                background-color: @secondary-20;
                border-color:@secondary-20;
                color:@white-color;
            }
        }
        &.outline {
            background-color: @white-color;
            color:@neutral-40;
        }
        &:hover {
            background-color: @secondary-20;
            border-color:@secondary-20;
            color:@white-color;
            &.icon {
                &:before {
                    filter: invert(99%) sepia(94%) saturate(2%) hue-rotate(185deg) brightness(108%) contrast(100%);
                }
            }
        }
        &:disabled {
            color:@neutral-60;
            background-color: @white-color;
            border-color:@neutral-60;
            cursor: not-allowed;
            &.icon {
                &.icon-arrow {
                    &:before {
                        filter: invert(36%) sepia(8%) saturate(124%) hue-rotate(181deg) brightness(91%) contrast(92%);
                    }
                }
            }
        }
    }
}
/* swiper */
.swiper-arrows {
    .prev, .next {
        position: relative;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: @primary-60;
        padding: 0;
        border:none;
        cursor: pointer;
        &:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 18px;
            height: 18px;
            background-image: url('../img/icons/chevron-right-white.svg');
            background-position: center;
            background-size: 18px;
            background-repeat: no-repeat;
        }
        &:hover {
            background-color: @secondary-20;
        }
    }
    .prev {
        &:before {
            transform-origin: left;
            transform: rotate(180deg) translate(-50%, -50%);
            top: 11%;
        }
        margin-right: 10px;
    }
}
.swiper-custom-line-pagination-wrapper {
    position: absolute;
    bottom: 32px;
    left: 0;
    right: 0;
    z-index: 4;
    .swiper-pagination {
        display: flex;
        justify-content: space-between;
        position: relative;
        &:before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 7px;
            width: 100%;
            height: 1px;
            background-color: @primary-80;
            z-index: 2;
        }
        span.swiper-pagination-bullet {
            width: 16px;
            height: 16px;
            border:1px solid @primary-80;
            border-radius: 50%;
            opacity: 1;
            margin: 0;
            position: relative;
            z-index: 3;
            background-color: @primary-20;
            &.swiper-pagination-bullet-active {
                background-color: @primary-80;
            }
        }
    }
}
/* post-card */
article.post-card {
    display: flex;
    flex-direction: column;
    background-color: @white-color;
    border-radius: 12px;
    margin-bottom: 32px;
    position: relative;
    box-shadow: 4px 4px 24px 0px rgba(43, 43, 63, 0.08);
    height: calc(~'100% - 32px');
    .image {
        position: relative;
        a {
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            height: 180px;
            width: 100%;
            display: block;
            line-height: 1;
            border-radius: 12px 12px 0 0;
            &:hover {
                opacity: 0.7;
            }
        }
        .post-date {
            position: absolute;
            right: 0;
            top: 0;
            color:@white-color;
            background-color: @primary-80;
            display: inline-block;
            font-size: 12px;
            line-height: 1;
            padding: 5px 10px;
            border-radius: 0 12px 0 8px;
        }
        .upcomming-event {
            position: absolute;
            bottom: 20px;
            left: 12px;
            border-radius: 20px;
            background-color: @primary-100;
            padding: 4px 12px; 
        }
    }
    .content {
        padding: 0 24px;
        border-radius: 12px 12px 0 0;
        margin-top: -8px;
        z-index: 2;
        background: #fff;
        .meta {
            min-height: 56px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            margin: 8px 0;
            border-bottom: 1px solid @neutral-80;
            padding-bottom: 8px;
            .webinar-date {
                display: flex;
                align-items: center;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 12px;
                span {
                    width: 40px;
                    height: 40px;
                    background-color: @primary-100;
                    border-radius: 12px;
                    padding: 6px;
                    font-size: 24px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 32px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                    margin-right: 8px;
                    color:@primary-60;
                }
            }
            .estimate-reading-time {
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 12px;
            }
            .card-post-author {
                display: flex;
                align-items: center;
                a.user-image {
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    height: 40px;
                    width: 40px;
                    display: block;
                    border-radius: 50%;
                    &:hover {
                        opacity: 0.8;
                    }
                }
                a.user-name {
                    padding-left: 8px;
                    font-weight: 500;
                }
            }
        }
        .heading {
            margin: 8px 0 0 0;
            span {
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 22px;
                a {
                    color:@primary-80;
                    &:hover {
                        color:@secondary-20;
                    }
                }
            }
            h3 {
                margin: 0 0 16px;
                a {
                    color:@neutral-20;
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 26px;
                    &:hover {
                        color:@secondary-20;
                    }
                }
            }
        }
    }
    .read-more {
        margin-top: auto;
        margin-top: auto;
        text-align: right;
        margin: auto 24px 24px;
        a {
            font-weight: 600; 
            display: inline-block;
        }
    }
}
/* countdown timer */
.countdown {
    display: flex;
    flex-wrap: wrap;
    margin: 32px 0;
    .item {
        color:@neutral-20;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: @primary-100;
        padding: 8px 16px;
        border-radius: 12px;
        margin-right: 16px;
        text-transform: capitalize;
        width: 73px;
        &:last-child {
            margin-right: 0;
        }
        span {
            font-size: 32px;
            font-style: normal;
            font-weight: 700;
            line-height: 40px;
        }
    }
    &.full {
        justify-content: space-between;
    }
    &.inline-item {
        margin: 0;
        .item {
            flex-direction: row;
            width: auto;
            padding-left: 16px;
            padding-right: 16px;
            span {
                font-size: 24px;
                font-style: normal;
                font-weight: 700;
                line-height: 32px;
                padding-right: 6px;
                display: block;
            }
        }
    }
    &.primary-40 {
        .item {
            background-color: @primary-60;
            color:@white-color;
        }
    }
}
.module-big-video {
    .image-tablet {
        position: relative;
        .play {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }
}
/* icons */
.icon-square {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 32px;
    background-color: @primary-100;
    width: 56px;
    height: 56px;
    display: block;
}
.icon-linkedin {
    background-image: url('../img/icons/linkedin.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
    background-color: @primary-60;
    width: 32px;
    height: 32px;
    display: block;
    &:hover {
        background-color: @secondary-20;
    }
}
.icon-play {
    background-color: @primary-100;
    width: 72px;
    height: 72px;
    display: block;
    border-radius: 50%;
    position: relative;
    transition: all 0.3s;
    &::before {
        content: '';
        position: absolute;
        left: 55%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-image: url('../img/icons/play.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 32px;
        width: 32px;
        height: 32px;
        filter: invert(26%) sepia(15%) saturate(6175%) hue-rotate(201deg) brightness(91%) contrast(104%);
    }
    &:hover {
        background-color: @secondary-20;
        &:before {
            filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(77deg) brightness(104%) contrast(101%);
        }
    }
}
/* iamge tablet */
.image-tablet {
    width: 100%;
    max-width: 624px;
    height: 480px;
    border: 19px solid @neutral-90;
    border-radius: 26px;
    box-shadow: 5.76px 5.76px 17.28px 0px rgba(31, 29, 49, 0.25), 17.28px 17.28px 46.08px -2.88px rgba(31, 29, 49, 0.25), 34.56px 34.56px 57.6px 0px rgba(31, 29, 49, 0.10), 2.88px 2.88px 11.52px 0px rgba(31, 29, 49, 0.10), 2.88px 2.88px 20.16px 0px rgba(31, 29, 49, 0.10), 23.04px 17.28px 25.92px 0px rgba(31, 29, 49, 0.10);
    position: relative;
    &.with-play {
        .play {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }
}
/* modern image */
.modern-image {
    position: relative;
    &:before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: @primary-100;
        border-radius: 12px;
        transform: rotate(4deg); 
        z-index: -1;
    }
    &:after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: transparent;
        border: 2px solid @primary-80;
        border-radius: 12px;
        transform: rotate(8deg); 
        z-index: 2;
    }
}
/* modern icon */
.modern-icon {
    position: relative;
    margin-bottom: 16px;
    border-radius: 12px;
    background-color: #CCEAF8;
    border-radius: 12px;
    transform: rotate(24deg); 
    .icon {
        position: relative;
        background-color: @primary-100;
        transform: rotate(-24deg); 
    }
    &.dark {
        background-color: @primary-60;
        .icon {
            background-color: @primary-40;
            border: 2px solid @primary-80;
        }
        &:before {
            background-color: @primary-60;
        }
    }
}
/* inputs */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    border: 1px solid @neutral-80;
    height: 48px;
    border-radius: 20px;
    background-color: transparent;
    padding: 18px 25px;
    margin-bottom: 8px;
    width: 100%;
    &::-webkit-input-placeholder {
        color: @neutral-20;
    }

    &:-moz-placeholder {
        color: @neutral-20;
    }

    &::-moz-placeholder {
        color: @neutral-20;
    }
}
.white-form {
    color:#fff;
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    input[type="range"],
    input[type="date"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="color"],
    textarea {
        border: 1px solid @primary-80;
        height: 48px;
        border-radius: 20px;
        background-color: transparent;
        padding: 18px 25px;
        margin-bottom: 8px;
        width: 100%;
        color:@white-color;
        &::-webkit-input-placeholder {
            color: @white-color;
        }

        &:-moz-placeholder {
            color: @white-color;
        }

        &::-moz-placeholder {
            color: @white-color;
        }
    }
    .consent .item .wpcf7-list-item-label {
        color:@white-color!important;
    }
    .flag-container {
        background-color: @primary-20;
    }
}
textarea {
    height: 120px;
    min-height: 120px;
    max-height: 150px;
    max-width: 100%;
    min-width: 100%;
}
/* phone */
.flag-container {
    background-color: @neutral-80;
    border-radius: 20px 0 0 20px;
    .country-list .country-name {
        color:@neutral-20;
        font-size: 12px;
    }
}
/* cf7 */
span.wpcf7-not-valid-tip {
    font-size: 12px;
}
.wpcf7 {
    .main-fields {
        margin-bottom: 16px;
    }
    .cf7-white-shadow {
        padding: 40px;
    }
    .cf7-white-form {

    }
    .radio-question {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
        font-size: 14px;
        > label {
            font-weight: 500;
        }
        .wpcf7-form-control {
            .wpcf7-list-item {
                &.first {
                    margin: 0;
                }
            }
        }
    }
    .consent {
        .item {
            margin-bottom: 16px;
            &:last-child {
                margin-bottom: 0;
            }
            span.wpcf7-list-item {
                display: inline-block;
                margin: 0;
                position: relative;
            }
            .wpcf7 {
                .wpcf7-list-item {
                    display: block;
                    margin-bottom: 10px;
                }
            }
            label {
                cursor: pointer;
            }
            input[type=checkbox] {
                position: absolute;
                visibility: hidden;
                width: 24px;
                height: 24px;
                top: 0;
                left: 0;
                &+span {
                    &:before {
                        display: block;
                        position: absolute;
                        content: '';
                        border-radius: 0;
                        height: 24px;
                        width: 24px;
                        top: 0px;
                        left: 0px;
                        border: 1px solid @neutral-80;
                        border-radius: 4px;
                    }
                    &:after {
                        display: block;
                        position: absolute;
                        content: "\2713";
                        height: 24px;
                        width: 24px;
                        top: 0;
                        left: 0;
                        visibility: hidden;
                        font-size: 14px;
                        text-align: center;
                        line-height: 24px;
                        background-color: @secondary-20;
                        color:@white-color;
                        border-radius: 4px;
                    }
                }
                &:checked {
                    &+span {
                        &:before {
                            background: transparent;
                        }
                        &:after {
                            visibility: visible;
                        }
                    }
                }
            }
            .wpcf7-list-item-label {
                margin-left: 40px;
                display: inline-block;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 12px;
                color:@neutral-40;
                a {
                    color:@primary-80;
                    &:hover {
                        color:@secondary-20;
                    }
                }
            }
        }
    }
    .send-button-wrapper {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        height: 100%;
        .cf7-button-loader {
            line-height: 0;
            margin-right: 8px;
            animation: spin 1s infinite;
            display: none;
        }
    }
    form {
        .wpcf7-response-output {
            border-radius: 8px; 
            border:none;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
            padding: 12px;
            margin: 16px 0 0 0;
        }
        &.sent {
            .wpcf7-response-output {
                background-color: @success-100;
                color:@success-40;
            }
        }
        &.failed, &.aborted {
            .wpcf7-response-output {
                background-color: @error-100;
                color:@error-40;
            }
        }
        &.invalid, &.unaccepted {
            .wpcf7-response-output {
                background-color: @alert-100;
                color:@alert-40;
            }
        }
        &.submitting {
            .send-button-wrapper {
                .cf7-button-loader {
                    display: inline-block;
                }
            }
        }
    }
}
.cf7-narrow-form {
    .wpcf7 {
        .actions {
            .consent {
                padding: 32px 0;
            }
            .send-button-wrapper {
                &.wide {
                    align-items: center;
                    justify-content: center;
                    button {
                        width: 100%;
                        text-align: center;
                        display: inline;
                    }
                }
            }
        }
    }
}
/* header */
header#masthead {
    background-color: @white-color;
    .headline {
        background-color: @neutral-90;
        .wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .announcement {
                .announcement-wrapper {
                    background-image: url('../img/icons/alert-circle.svg');
                    background-size: 24px;
                    background-position: left center;
                    background-repeat: no-repeat;
                    padding-left: 32px;
                    p {
                        margin: 0;
                        a {
                            color:@text-color;
                            font-weight: 600;
                            &:hover {
                                color:@secondary-20;
                            }
                        }
                    }
                }
            }
            .action {
                padding: 12px 12px 12px 0;
            }
        }
    }
    .main-header {
        padding: 24px 0;
        border-bottom: 1px solid @neutral-80;
        .wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .logo {
                line-height: 1;
            }
            .right {
                display: flex;
                align-items: center;
                .menu-header {

                }
                .action {
                    display: flex;
                    align-items: center;
                    .toggle-menu-mobile {
                        display: none;
                    }
                }
            }
        }
    }   
    &.header-landing {
        padding: 24px 0;
        .wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }
        &.light {
            border-bottom: 1px solid @primary-80;
            background-color: @white-color;
        }
        &.dark {
            border-bottom: 1px solid @primary-60;
            background-color: @primary-20;
        }
    }
}
/* Announcement System */
.announcement-system {
    .item {
        &.announcement-webinar {
            background-color: @primary-40;
            padding: 12px 0;
            color:@white-color;
            .wrapper {
                position: relative;
                padding-left: 48px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                &:before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: calc(~'50% - 20px');
                    width: 40px;
                    height: 40px;
                    background-image: url('../img/icons/play-orange.svg');
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: cover;
                }
                .info {
                    display: flex;
                    align-items: center;
                    .heading {
                        text-transform: uppercase;
                    }
                    .meta {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        .meta-item {
                            display: flex;
                            align-items: center;
                            margin-left: 32px;
                            padding-left: 32px;
                            border-left: 1px solid @white-color;
                            height: 32px;
                            span.icon {
                                padding-right: 8px;
                                line-height: 0;
                                display: block;
                            }
                        }
                    }
                }
                .actions {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    .hide-close-button {
                        a {
                            margin-right: 0;
                        }
                    }
                }
            }
        }
        &.hide-on-desktop {
            display: none;
        }
    }
    button.close-announcement {
        width: 40px;
        height: 40px;
        background-color: @primary-40;
        border:2px solid @primary-80;
        border-radius: 50%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        margin-left: 16px;
        &:hover {
            background-color: @secondary-20;
            border-color: @secondary-20;
        }
    }
}
/* menus */
ul.headline-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    li {
        margin-right: 24px;
        &:last-child {
            margin-right: 0;
        }
        a {
            color:@text-color;
            &:hover {
                color:@secondary-20;
            }
        }
    }
}
/* megamenu */
#mega-menu-wrap-menu-header {
    #mega-menu-menu-header {
        li.mega-menu-tagline {
            a.mega-menu-link {
                position: relative;
                padding-left: 34px!important;
                &:before {
                    content: '';
                    width: 4px;
                    height: 24px;
                    position: absolute;
                    left: 20px;
                    top: calc(~'50% - 12px');
                    background-color: @primary-100;
                }
                &:hover {
                    &:before {
                        background-color: @secondary-20;
                    }
                }
            }
        }
    }
} 
#mega-menu-wrap-menu-header #mega-menu-menu-header li#mega-menu-item-4848 .mega-search input[type=text] {
    padding: 0 50px 0 25px;
}
/* tagline */
.tagline {
    position: relative;
    padding-left: 20px;
    &::before {
        content: '';
        width: 6px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: @primary-60;
        border-radius: 4px;
    }
    &.tagline-white {
        &:before {
            background-color: @white-color;
        }
    }
    &.tagline-primary-80 {
        &:before {
            background-color: @primary-80;
        }
    }
    &.tagline-hover {
        &:hover {
            &:before {
                background-color: @secondary-20;
            }
        }
    }
}
/* user card */
.user-card {
    height: 100%;
    .card {
        box-shadow: 4px 4px 24px 0px rgba(43, 43, 63, 0.08); 
        border-radius: 12px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: calc(~'100% - 32px');
        margin-bottom: 32px;
        .user-avatar {
            position: relative;
            width: 96px;
            margin: 0 auto 16px;
            a {
                position: absolute;
                bottom: 0;
                right: 0;
            }
        }
        h5 {
            margin: 0;
        }
        span.job-title {
            text-align: center;
        }
        &.left {
            align-items: flex-start;
            .user-avatar {
                margin: 0 0 16px;
            }
        }
    }
    &.multiple {
        .card {
            align-items: flex-start;
            .user-avatar-wrapper {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                margin-bottom: 16px;
                .user-avatar {
                    margin: 0;
                }
                .user-meta {
                    width: calc(~'100% - 96px');
                    display: flex;
                    flex-direction: column;
                    padding-left: 16px;
                    span.job-title {
                        text-align: left;
                    }
                }
            }
            .bio {
                color:@neutral-40;
            }
        }
    }
}
/* entry content */
.entry-content {
    margin: 0;
    p {
        margin: 0 0 32px;
    }
    ol {
        margin: 40px 0;
        padding: 0 0 0 16px;
        li {
            margin-bottom: 8px;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    ul {
        margin: 40px 0;
        padding: 0 0 0 16px;
        list-style: none;
        li {
            margin-bottom: 8px;
            position: relative;
            &:before {
                content: '';
                background-color: @secondary-20;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                position: absolute;
                left: -16px;
                top: 9px;
            }
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    h1, h2, h3, h4, h5, h6 {
        padding-left: 20px;
        position: relative;
        margin: 0 0 16px;
        &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 6px;
            height: 100%;
            background-color: @primary-80;
            border-radius: 3px;
        }
    }
    h1 {
        font-size: 22px;
        font-style: normal;
        line-height: 30px;
    }
    h2 {
        font-size: 20px;
        font-style: normal;
        line-height: 28px;
    }
    h3 {
        font-size: 18px;
        font-style: normal;
        line-height: 26px;
    }
    h4 {
        font-size: 18px;
        font-style: normal;
        line-height: 26px;
    }
    h5 {
        font-size: 16px;
        font-style: normal;
        line-height: 24px;
    }
    h6 {
        font-size: 16px;
        font-style: normal;
        line-height: 24px;
    }
}

/* modules */
section.module {
    padding: 80px 0;
    &.bg-primary-20 {
        color:@white-color;
    }
    .heading-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 56px;
        .heading {
            display: flex;
            flex-direction: column;
            h2 {
                margin-bottom: 16px;
            }
            p {

            }
        }
    }
    &.bg-primary-40 {
        color: @white-color;
    }
    &.bg-primary-20 {
        color: @white-color;
    }
}
.module-two-column-image-text {
    .image {
        padding: 0 30px;
    }
}
.module-cta {
    .content-wrapper {
        padding: 80px;
        color:#fff;
        position: relative;
        z-index: 1;
        &:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
            background-image: url('../img/bg/bg-footer.svg');
            background-position: right;
            background-repeat: no-repeat;
            background-size: cover;
        }
    }
}
.module-agenda {
    .agenda-wrapper {
        position: relative;
        .item {
            margin-left: 56px;
            margin-bottom: 80px;
            padding-bottom: 80px;
            border-bottom: 1px solid @primary-80;
            position: relative;
            .counter {
                position: absolute;
                left: -56px;
                top: 0;
                width: 40px;
                height: 40px;
                background-color: @white-color;
                border: 1px dashed @primary-80;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color:@neutral-20;
            }
            &:before {
                content: '';
                position: absolute;
                left: -36px;
                top: 0;
                bottom: 0;
                height: calc(~'100% + 80px');
                width: 1px;
                border-left: 1px dashed @primary-80;
            }
            .headline {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-top: 6px;
                .date {
                    display: flex;
                    align-items: center;
                    span {
                        &.icon {
                            line-height: 1;
                            margin-right: 8px;
                        }
                    }
                }
            }
            &:hover {
                .counter {
                    background-color: @secondary-20;
                    border: 1px solid @secondary-20;
                    color:@white-color;
                }
            }
            &:last-child {
                border-bottom: unset;
                &:before {
                    display: none;
                }
            }
        }
        .people {
            .user-item {
                display: flex;
                align-items: center;
                .image {
                    line-height: 1;
                    width: 72px;
                    flex-shrink: 0;
                    img {
                        border-radius: 50%;
                    }
                }
                .content {
                    padding-left: 16px;
                    display: flex;
                    flex-direction: column;
                    h6 {
                        margin: 0;
                    }
                    span {
                        display: inline-block;
                    }
                }
            }
        }
    }   
    &.bg-primary-20 {
        .agenda-wrapper {
            .item {
                .counter {
                    background-color: @primary-20;
                    color:@primary-80;
                }
                &:hover {
                    .counter {
                        background-color: @secondary-20;
                        border: 1px solid @secondary-20;
                        color:@white-color;
                    }
                }
            }
        }
    }
}
.module-countdown-slim {
    background-image: url('../img/mesh/mesh-cta-slim.svg');
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 32px 0;
    .wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .content {
            display: flex;
            align-items: center;
            .countdown {
                margin-right: 16px;
            }
            h2 {
                margin: 0;
            }
        }
    }
    &.bg-primary-40 {
        color: @white-color;
        .countdown {
            .item {
                background-color: @primary-60;
                color:@white-color;
            }
        }
    }
}
.module-insights {
    &.bg-primary-20 {
        article.post-card {
            background-color: @primary-40;
            .content {
                background-color: @primary-40;
                .heading {
                    h3 {
                        a {
                            color:@white-color;
                            &:hover {
                                color:@secondary-20;
                            }
                        }
                    }
                }
                .meta {
                    .card-post-author {
                        a.user-name {
                            color:@white-color;
                            &:hover {
                                color:@secondary-20;
                            }
                        }
                    }
                }
            }
            .read-more {
                a {
                    color:@white-color;
                    &:hover {
                        color:@secondary-20;
                    }
                }
            }
        }
    }
}
.module-faq {
    .heading-wrapper {
        margin-bottom: 56px;
    }
    .faq-category-list {
        h3 {
            transition: all 0.3s;
            &.active {
                color:@primary-60;
                font-weight: 600;
                &:before {
                    background-color: @secondary-20;
                }
            }
            &:hover {
                color:@primary-60;
                font-weight: 600;
            }
        }
    }
    .faq-tab-item {
        display: none;
        &.active {
            display: block;
        }
        .faq-questions {
            &:first-child {
                .answer {
                    display: block;
                }
            }
        }
    }
    .faq-questions {
        .item {
            h2 {
                margin: 0;
                position: relative;
                cursor: pointer;
                transition: all 0.3s;
                &:after {
                    content: '';
                    position: absolute;
                    right: 0;
                    top: 5px;
                    width: 16px;
                    height: 16px;
                    background-image: url('../img/icons/chevron-up-primary-60.svg');
                    background-position: center;
                    background-size: cover;
                    background-repeat: no-repeat;
                    transform: rotate(180deg);
                    transition: all 0.3s;
                }
                &.active {
                    color:@primary-60;
                    &:after {
                        transform: rotate(0);
                    }
                }
                &:hover {
                    color:@secondary-20;
                }
            }
            .answer {
                display: none;
                margin-top: 8px;
            }
        }
        &:first-child {
            .answer {
                display: block;
            }
        }
    }
    &.bg-primary-40 {
        .faq-category-list {
            h3 {
                &.active {
                    color:@primary-80;
                }
            }
        }
        .faq-questions {
            .item {
                background-color: @primary-20;
                h2 {
                    &.active {
                        color:@primary-80;
                    }
                }
            }
        }
    }
}
section.module-form-shortcode {
    .content {
        background-color: @neutral-90;
        padding: 80px;
        h2 {
            margin-bottom: 16;
        }
        p {
            margin-bottom: 32px;
            color:@neutral-40;
            font-size: 14px;
            line-height: 22px;
        }
    }
}
section.module-columns-with-icons {
    background-image: url('../img/bg/bg-lp-columns-with-icon-light.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    &.bg-primary-40, &.bg-primary-20 {
        color:#fff;
        background-image: url('../img/bg/bg-lp-columns-with-icon-dark.svg');
    }
    .columns {
        .item {
            display: flex;
            flex-direction: column;
            height: calc(~'100% - 56px');
            &.item-align-left {
                align-items: flex-start;
                span {
                    text-align: left;
                }
            }
            &.item-align-center {
                align-items: center;
                span, h3 {
                    text-align: center;
                }
            }
            &.item-align-right {
                align-items: flex-end;
                span {
                    text-align: right;
                }
            }
            .icon {
                width: 88px;
                height: 88px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 12px;
                flex-shrink: 0;
                img {
                    height: 40px;
                }
                &.icon-blue {
                    background-color: @primary-100;
                }
                &.icon-white {
                    background-color: @white-color;
                }
            }
            h3 {
                font-size: 20px;
                font-style: normal;
                font-weight: 700;
                line-height: 28px;
                margin: 0 0 8px 0;
            }
            > a {
                margin-top: auto;
            }
            > span {
                margin-top: 16px;
            }
        }
    }
}
.module-quote-slider {
    .quote {
        position: relative;
        padding-top: 40px;
        &:before {
            content: '';
            width: 40px;
            height: 32px;
            position: absolute;
            left: 0;
            top: 0;
            background-image: url('../img/icons/quote.svg');
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
    }
    .social {
        padding-right: 16px;
    }
}
.module-kpi {
    .content {
        p {
            margin-bottom: 64px;
            max-width: 550px;
        }
        .button-group {
            
        }
    }
    .kpis {
        .item {
            margin-bottom: 84px;
            .icon, .modern-icon {
                width: 88px;
                height: 88px;
                border-radius: 12px;
            }
            .modern-icon {
                margin-bottom: 24px;
            }
            .icon {
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                    max-width: 40px;
                }
            }
            span.heading {
                margin-bottom: 8px;
            }
        }
    }
}
.module-intro {
    .meta {
        margin: 32px 0;
        background-color: @primary-100;
        padding: 16px 40px;
        border-radius: 30px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .item {
            display: flex;
            align-items: center;
            padding-right: 24px;
            border-right: 1px solid @neutral-80;
            margin-right: 24px;
            &:last-child {
                margin-right: 0;
                border-right: unset;
                padding-right: 0;
            }
            .icon {
                margin-right: 8px;
                display: block;
                line-height: 0;
            }
            span.value {
                font-weight: 600;
                color:@primary-60;
            }
        }
    }
    .form-title {
        margin-bottom: 16px;
        display: inline-block;
    }
    .form-shortcode {
        background-color: @neutral-90;
        padding: 32px;
    }   
    &.vertical {
        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            margin-bottom: 32px;
            .meta {
                background-color: @primary-40;
                .item {
                    span.value {
                        color: @white-color;
                    }
                }
            }
        }
        .image-wrapper {
            margin-top: 32px;
        }
    }
}
/* margins */
.mb-8 {
    margin-bottom: 8px;
}
.mb-16 {
    margin-bottom: 16px;
}
.mb-24 {
    margin-bottom: 24px;
}
.mb-32 {
    margin-bottom: 32px;
}
.mb-56 {
    margin-bottom: 56px;
}
/* padding */
.p-16 {
    padding: 16px;
}
.py {
    padding-top: 8px;
    padding-bottom: 8px;
}
.pl {
    padding-left: 16px;
}
/* popups */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.8);
    z-index: 999;
    display: none;
    .popup-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        .popup-content {
            max-width: 800px;
            width: 100%;
            margin: 30px 15px;
            border-radius: 12px;
            background-color: @white-color;
            padding: 40px;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .button-close-popup {
                width: 48px;
                height: 48px;
                display: block;
                background-color: @primary-60;
                border-radius: 50%;
                border: unset;
                background-image: url('../img/icons/close-icon-white.svg');
                background-position: center;
                background-repeat: no-repeat;
                background-size: 16px 16px;
                position: absolute;
                right: 40px;
                top: 40px;
                &:hover {
                    background-color: @secondary-20;
                }
            }
            .heading {
                display: flex;
                flex-direction: column;
                text-align: center;
                align-items: center;
                .subtitle {
                    height: 48px;
                    display: flex;
                    align-items: center;
                    margin-bottom: 8px;
                }
                span.heading {
                    margin-bottom: 16px;
                }
            }
            .description {
                text-align: center;
            }
            .popup-form {
                margin: 40px 0 8px;
            }
            .popup-footer {
                .later {
                    display: flex;
                    justify-content: center;
                    button {
                        padding: 0;
                        border: unset;
                        background-color: transparent;
                        border-radius: unset;
                    }
                }
            }
        }
    }
    &.popup-type-dark {
        .popup-content {
            background-color: @primary-20;
            color:@white-color;
            .button-close-popup {
                background-color: @primary-40;
            }
            .popup-footer {
                .later {
                    button {
                        color:@white-color;
                    }
                }
            }
        }
    }
}
/* footer */
footer#colophon {
    background-color: @primary-20;
    padding: 80px 0 16px 0; 
    position: relative;
    background-image: url('../img/mesh/mesh-footer-lp.svg');
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: contain;
    .footer-info {
        padding: 0 0 32px 0;
        .left {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            .logo {
                margin-right: 24px;
                line-height: 1;
            }
            .contact-info {
                margin-right: 24px;
                margin-bottom: auto;
                &:last-child {
                    margin-right: 0;
                }
                .items {
                    display: flex;
                    flex-direction: column;
                    .item {
                        display: flex;
                        align-items: center;
                        margin-bottom: 4px;
                        &:last-child {
                            margin-bottom: 0;
                        }
                        span {
                            &.icon {
                                width: 32px;
                                height: 32px;
                                display: inline-block;;
                                background-color: @primary-40;
                                border-radius: 12px;
                                position: relative;
                                margin-right: 8px;
                                &:before {
                                    content: '';
                                    background-size: 16px 16px;
                                    background-repeat: no-repeat;
                                    filter: invert(47%) sepia(96%) saturate(2913%) hue-rotate(171deg) brightness(92%) contrast(102%);
                                    position: absolute;
                                    top: calc(~'50% - 8px');
                                    left: calc(~'50% - 8px');
                                    width: 16px;
                                    height: 16px;
                                }
                                &.icon-phone {
                                    &:before {
                                        background-image: url('../img/icons/phone-call.svg');
                                    }                              
                                }
                                &.icon-email {
                                    &:before {
                                        background-image: url('../img/icons/mail.svg');
                                    }
                                }
                            }
                            &.name {
                                color:@white-color;
                                a {
                                    color:@white-color;
                                    &:hover {
                                        color:@secondary-20;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .social-list {
            justify-content: flex-end;
            height: 100%;
            align-items: center;
        }
    }
    .extra-info {
        padding: 32px 0;
        border-top: 1px solid @primary-60;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        color:@white-color;
        .copy {

        }
        .terms {
            a {
                margin-right: 32px;
                &:last-child {
                    margin-right: 0;
                }
                color:@white-color;
                &:hover {
                    color:@secondary-20;
                }
            }
        }
    }
    .google-recaptcha-info {
        border-top: 1px solid @primary-60;
        padding: 16px 0 0 0;
        color:@white-color; 
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: -0.24px; 
        display: flex;
        justify-content: space-between;
        a {
            color: @white-color;
            &:hover {
                color:@secondary-20;
            }
        }
    }
}
/// Medium devices such as tablets (768px and up)
@media only screen and (max-width: 992px) {
    /* headings */
    .h-900 {
        font-size: 56px;
        line-height: 56px;
    }
    .h-800 {
        font-size: 40px;
        line-height: 48px;
    }
    .h-700 {
        font-size: 32px;
        line-height: 40px;
    }
    .h-600 {
        font-size: 28px;
        line-height: 36px;
    }
    .h-500 {
        font-size: 24px;
        line-height: 32px;
    }
    .body-heading {
        font-size: 20px;
        line-height: 28px;
    }
    .subtitle-1 {
        font-size: 22px;
        line-height: 28px;
    }
    .subtitle-2 {
        font-size: 18px;
        line-height: 28px;
    }
    .subtitle-2-slim {
        font-size: 18px;
        line-height: 26px;
    }
    .body-xl {
        font-size: 20px;
        line-height: 30px;
    }
    .body-heading {
        font-size: 20px;
        line-height: 28px;
    }
    .body-l {
        font-size: 18px;
        line-height: 30px;
    }
    .body-l-slim {
        font-size: 18px;
        line-height: 26px;
    }
    .body-medium {
        font-size: 16px;
        line-height: 24px;
    }
    .body-s {
        font-size: 14px;
        line-height: 22px;
    }
    .input-label {
        font-size: 10px;
        line-height: 10px;
    }
}
// Small devices such as large phones (640px and up)
@media all and (max-width: 767px) {
    /* headings */
    .h-900 {
        font-size: 32px;
        line-height: 40px;
    }
    .h-800 {
        font-size: 28px;
        line-height: 36px;
    }
    .h-700 {
        font-size: 26px;
        line-height: 34px;
    }
    .h-600 {
        font-size: 24px;
        line-height: 32px;
    }
    .h-500 {
        font-size: 22px;
        line-height: 30px;
    }
    .body-heading {
        font-size: 20px;
        line-height: 26px;
    }
    .subtitle-1 {
        font-size: 20px;
        line-height: 28px;
    }
    .subtitle-2 {
        font-size: 18px;
        line-height: 28px;
    }
    .subtitle-2-slim {
        font-size: 18px;
        line-height: 26px;
    }
    .body-xl {
        font-size: 20px;
        line-height: 30px;
    }
    .body-heading {
        font-size: 20px;
        line-height: 28px;
    }
    .body-l {
        font-size: 18px;
        line-height: 30px;
    }
    .body-l-slim {
        font-size: 18px;
        line-height: 26px;
    }
    .body-medium {
        font-size: 16px;
        line-height: 24px;
    }
    .body-s {
        font-size: 14px;
        line-height: 22px;
    }
    .input-label {
        font-size: 10px;
        line-height: 10px;
    }
    header#masthead  {
        .headline {
            .wrapper {
                .action {
                    display: none;
                }
            }
        }
        .main-header {
            .wrapper {
                .right {
                    .action {
                        .toggle-menu-mobile {
                            display: flex;
                            
                        }
                        > a {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    /* main */
    .w-mobile-100 {
        width: 100%;
    }
    /* buttons */
    .button-group {
        display: flex;
        flex-wrap: wrap;
        a, button {
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}
@media all and (max-width: 767px) {
    a, button {
        &.button {   
            &.button-primary {
                padding: 7px 20px 7px;
            }
            &.button-secondary {
                padding: 8px 20px 7px;
            }
            &.slim-button {
                padding: 5px 12px;
            }
            &.icon {
                padding: 8px 64px 7px 40px;
                position: relative;
            }
            &.xs {
                padding: 0 20px;
            }
            &.small {
                padding: 3px 20px;
            }
            &.narrow {
                padding-left: 12px;
                padding-right: 12px;
            }
        }
    }
    /* modules */
    .section {
        padding: 32px 0;
    }
    section.module {
        padding: 32px 0;
        .heading-wrapper {
            margin-bottom: 30px;
        }
    }
    /* Module quote slider */
    .module-quote-slider {
        .image {
            margin-bottom: 56px;
        }
        .meta {
            .swiper-arrows {
                margin-left: auto;
                margin-top: 24px;
            }
        }
    }
    .module-intro {
        .content {
            margin-bottom: 52px;
            height: auto;
        }
    }
    .module-two-column-image-text {
        .content {
            margin-bottom: 52px;
            height: auto;
        }
    }
    .module-kpi {
        .content {
            margin-bottom: 52px;
        }
        .kpis {
            .item {
                .modern-icon {
                    margin-left: 11px;
                }
            }
        }
    }
    .module-columns-with-icons {
        .modern-icon {
            margin-left: 11px;
        }
    }
    .popup-overlay  {
        .popup-wrapper {
            .popup-content {
                padding: 20px;
                .button-close-popup {
                    right: 20px;
                    top: 20px;
                }
                .heading {
                    span.heading {
                        font-size: 20px;
                        line-height: 1.5;
                    }
                }
                .popup-form {
                    margin: 10px 0 8px;
                }
            }
        }
    }
    section.module-form-shortcode {
        .content {
            padding: 24px;
        }
    }
    footer#colophon {
        padding-top: 40px;
        .footer-info {
            .left {
                .logo {
                    margin-bottom: 24px;
                }
                .contact-info {
                    .items {
                        .item {
                            margin-bottom: 8px;
                            &:last-child {
                                margin-bottom: 8px;
                            }
                        }
                    }
                }
            }
            .social-list {
                justify-content: flex-start;
                margin-top: 16px;
                height: auto;
            }
        }
        .offer-list {
            h3 {
            }
            ul.footer-menu {
                &.footer-menu-4-columns {
                    li {
                        width: 100%;
                    }
                }
            }
        }
        .extra-info {
            .copy {
                margin-bottom: 16px;
            }
        }
        .google-recaptcha-info {
            flex-direction: column;
            align-items: flex-start;
            > span {
                margin-bottom: 8px;
            }
        }
    }
}