html:not(.reveal-out) body.transparent-header-lg header#site-header {
    /*pointer-events: all;*/
}

body {
    margin: 0;
    padding: 0;
}

img:not([src]):not([srcset]) {
    visibility: hidden;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-flow: dense;
}

.grid-col-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-transform-left {
    transform: translateX(25vw)
}

/* .row-grid .grid-item:last-child .title-wrap h2{
     color: red;
}
 .row-grid .grid-item:first-child .title-wrap h2{
     color: lightgreen;
}
 */
.grid-item.remove-space {
    margin-bottom: 10px;
    margin-left: -10px;
    margin-right: -10px;
}

.grid-item-cta .image-wrap {
    background-color: #0130ff;
    color: #fff;
}

.grid-item-cta-bg {
    height: 50px;
    width: 50px;
    background-color: #5affb1;
    z-index: 1;
    position: absolute;
    top: -75px;
    right: -75px;
    border-radius: 50%;
    transition: all 1s ease;
}

.grid-item-cta:hover .grid-item-cta-bg {
    transform: scale(30);
}

.grid-item-cta .image-wrap::before {
    display: none;
}

.grid-item-cta:hover .grid-wrapper-container::before {
    display: none;
}

.grid-item-cta .post-container .title-wrap .sub-title {
    color: #fff;
}

.grid-item-cta .post-container .title-wrap h3 {
    color: #fff;
    text-shadow: none;
}

.grid-item-cta:hover .post-container .title-wrap .sub-title,
.grid-item-cta:hover .post-container .title-wrap h3 {
    color: #0130ff !important;
}

.grid-item-cta .grid-wrapper-container::before {
    display: none;
}

.grid-item {
    translate: none;
    z-index: 56;
    transition: 1s;
    transform-style: preserve-3d;
    padding: 0;
}

.grid-item-1 {
    grid-column: span 1;
    grid-row: span 2;
    height: calc(50vh - 40px);
    translate: none;
    z-index: 56;
    transition: .8s ease-in-out;
    transform-style: preserve-3d;
}

    .grid-item-1:hover {
        z-index: 57;
        transform: scale(1.15);
    }

@media(max-width:992px) {
    .grid-item-1:hover {
        translate: none;
    }
}

.grid-item-2 {
    grid-column: span 2;
    grid-row: span 2;
    height: calc(50vh - 40px);
}

    .grid-item-2:hover {
        z-index: 57;
    }


.grid-item-4 {
    grid-column: span 2;
    grid-row: span 2;
    height: calc(100vh - 80px)
}

.grid-item-6 {
    grid-column: span 4;
    grid-row: span 2;
    height: calc(50vh - 40px)
}

.grid-item-8,
.grid-item-8-module {
    grid-column: span 4;
    grid-row: span 4;
}

.grid-item-8-module {
    height: calc(100vh - 70px)
}

.grid-item-cta {
    grid-column: span 1;
    grid-row: span 2;
}

.grid-wrapper-container {
    width: 100%;
    height: 100%;
}

.grid-wrapper-container,
.image-container {
    position: relative;
    object-fit: cover;
    overflow: hidden;
    background-position: 50% !important;
    background-repeat: no-repeat !important;
    width: 100%;
    height: 100%;
    border: 10px solid transparent;
}

.h-50-grid {
    height: calc(50vh - 40px);
}

.h-100-grid {
    height: calc(50vh - 40px);
}

.image-container {
    background-size: cover
}

.image-wrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: block;
    position: relative !important;
    top: initial;
    border-radius: 20px;
}

.banner-media {
    position: relative;
    z-index: 2;
    opacity: 1;
    visibility: visible;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
}

.image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 20px;
    overflow: hidden;
}

    .image-wrap .title-wrap {
        display: block;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
    }

    .image-wrap:hover .title-wrap {
        /*display: none;*/
        display: block;
    }

.grid-item-cta .image-wrap:hover .title-wrap {
    display: block;
}

.grid-wrapper-container::before {
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 75%);
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 11;
    transition: all 1s ease-in-out;
    pointer-events: none;
    border-radius: 20px;
    opacity: 1;
}

.grid-wrapper-container:hover::before {
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 25%);
    border-radius: 20px;
    opacity: 0;
}

.post-container .title-wrap {
    position: absolute;
    top: calc(20% - 20px);
    left: 45px;
    width: auto;
    height: auto;
    display: inline-block;
    transform: translateY(-50%);
    z-index: 13;
    padding-right: 50px;
}

    .post-container .title-wrap a {
        text-decoration: none;
    }

    .post-container .title-wrap h3,
    .post-container .title-wrap .sub-title {
        color: #fff !important;
        font-family: 'Exo 2', sans-serif !important;
        font-weight: 700 !important;
    }

    .post-container .title-wrap h3 {
        font-size: 28px;
        margin-bottom: 5px;
        margin-top: 0;
        text-shadow: 5px 5px 25px rgba(0, 0, 0, 0.25);
    }

    .post-container .title-wrap .sub-title {
        font-size: 20px;
        /* color: #3300f4;
     */
        margin-bottom: 5px;
        opacity: .8;
        font-weight: 400 !important;
    }

.grid-item-cta .post-container .title-wrap {
    position: absolute;
    top: calc(50% - 10px);
    left: 45px;
    width: auto;
    height: auto;
    display: inline-block;
    transform: translateY(-50%);
    z-index: 13;
    padding-right: 50px;
}

.grid-wrapper-container.clicked .view-button {
    display: flex;
    opacity: 1;
}

.grid-item:hover .view-button {
    display: flex;
    opacity: 1;
}

.view-button {
    display: flex;
    opacity: 1;
    /*display: none;*/
    /*opacity: 0;*/
    transition: opacity 1s;
    position: absolute;
    left: 45px;
    bottom: 40px;
    z-index: 13;
    color: #fff;
    font-family: 'Exo 2', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px;
    cursor: pointer;
}

.video-link {
    text-decoration: none;
    margin-right: 10px;
    color: #fff !important;
}

.case-link {
    text-decoration: none;
    margin-left: 10px;
    color: #fff !important;
}

    .video-link:hover,
    .case-link:hover {
        text-decoration: underline !important;
    }

    .video-link i,
    .case-link i {
        padding-right: 5px;
    }

.grid-wrapper-container.clicked .label-wrap {
    display: flex;
    opacity: 1;
}

.image-wrapper:hover .label-wrap {
    display: flex;
    opacity: 1;
}

.label-wrap {
    position: absolute;
    right: 20px;
    top: 20px;
    display: none;
    opacity: 0;
    transition: opacity 1s;
    z-index: 16;
}

    .label-wrap .labels {
        display: flex;
        font-size: 16px;
        height: 28px;
        line-height: 1.4;
        padding: 0 10px;
        background: transparent !important;
        border: 2px solid #fff;
        color: #fff;
        border-radius: 15px;
        margin: 0 3px;
    }

.grid-item-cta-candy-white .image-wrap {
    background-color: #F08DFA;
    color: #fff;
}

.grid-item-cta-ruby-white .image-wrap {
    background-color: #F64C64;
    color: #fff;
}

.grid-item-cta-seafoam-sapphire .image-wrap {
    background-color: #5AFFB1;
}

.grid-item-cta.grid-item-cta-seafoam-sapphire .post-container .title-wrap h3,
.grid-item-cta.grid-item-cta-seafoam-sapphire .post-container .title-wrap .sub-title {
    color: #0C4129;
}

a.button-cta {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 10px 40px 10px 30px;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Exo 2', sans-serif;
    line-height: 20px;
    letter-spacing: 0;
    text-decoration: none;
    border: 1px solid #0130ff;
    color: #0130ff;
    background: transparent;
}

    a.button-cta::before {
        content: '\f178';
        font-family: 'Font Awesome 6 Pro';
        font-weight: 300 !important;
        border: none;
        width: auto !important;
        height: auto !important;
        position: absolute;
        right: 20px;
        top: 12px;
        margin-left: 10px;
        font-size: 18px;
    }

.grid-item-cta a.button-cta {
    border: 1px solid #fff !important;
    color: #fff !important;
    background: transparent;
}

.grid-item-cta:hover a.button-cta {
    border: 1px solid #0130ff !important;
    color: #0130ff !important;
    background: transparent;
}

.grid-item-cta a.button-cta::before {
    color: #fff !important;
}

.grid-item-cta:hover a.button-cta::before {
    color: #0130ff !important;
}

.grid-item-cta-candy-white a.button-cta {
    border-color: #fff !important;
    color: #fff !important;
}

    .grid-item-cta-candy-white a.button-cta::before {
        color: #fff !important;
    }

.grid-item-cta-candy-white:hover a.button-cta::before {
    color: rgba(var(--base-link),1) !important;
}

.grid-item-cta-candy-white:hover a.button-cta {
    border: 1px solid rgba(var(--base-link),1) !important;
    color: rgba(var(--base-link),1) !important;
    background: transparent;
}

.grid-item-cta-ruby-white a.button-cta {
    border-color: #fff !important;
    color: #fff !important;
}

.grid-item-cta-ruby-white:hover a.button-cta::before {
    color: #fff !important;
}

.grid-item-cta-ruby-white:hover a.button-cta::before {
    color: rgba(var(--base-link),1) !important;
}

.grid-item-cta-ruby-white:hover a.button-cta {
    border: 1px solid rgba(var(--base-link),1) !important;
    color: rgba(var(--base-link),1) !important;
    background: transparent;
}

.grid-item-first {
    transform-origin: 0% 50%;
}

.grid-item-last {
    transform-origin: 100% 50%;
}

.filter-wrap {
    max-width: 940px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: auto;
    margin-bottom: 0;
}

.reset-wrap {
    max-width: 940px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: auto;
    margin-bottom: 30px;
}

.no-results {
    display: none;
    margin: auto;
    margin-bottom: 80px;
    width: 300px;
}

.button-filter {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 10px 30px 10px 30px;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Exo 2', sans-serif;
    line-height: 24px;
    letter-spacing: 0;
    text-decoration: none;
    border: 1px solid #000;
    color: #000;
    background: transparent;
        outline: none;
}
.button-filter:focus {
    outline: none;
}
.button-filter:hover {
      border: 1px solid #3300f4 !important;
            
    color: #3300f4 !important;
    outline: none;
}
.button-group-sm .button-filter {
    padding: 5px 25px 5px 25px;
}

.button-filter.is-checked {
    border: 1px solid #3300f4;
    color: #3300f4;
    font-weight: 700;
}

.filters-button-group {
    margin-bottom: 20px;
}

    .filters-button-group .button {
        margin: 5px;
    }
    
    [data-filter-group="tags"] .button.is-checked {
        border: 1px solid #5affb1 !important;
            background: #5affb1 !important;
    color: #3300f4 !important;
}
    [data-filter-group="tags"] .button:first-child.is-checked {
border: 1px solid #3300f4!important;
    color: #3300f4!important;
    background:transparent!important;
    }

.button--reset {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 10px 30px 10px 30px;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Exo 2', sans-serif;
    line-height: 24px;
    letter-spacing: 0;
    text-decoration: none;
    border: 1px solid #0033FF;
    color: #fff;
    background: #0033FF;
}

/* PART 0 - Setting Up */
img[data-opt-src] {
    background-color: #f7f7f7;
    /*placeholder opacity needs to be set to 0 in the optimole's settings for this to be visible*/
    will-change: opacity;
}

    /* PART 1 - Before Lazy Load */
    img[data-opt-src]:not([data-opt-lazy-loaded]) {
        filter: none !important;
        opacity: 1 !important;
    }

/* PART 2 - Upon Lazy Load */
img[data-opt-lazy-loaded] {
    animation-name: fade-in;
    animation-direction: normal;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.two-col-list {
    flex-flow: row;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-left: -.5vw;
    margin-right: -.5vw;
    display: flex
}

.two-col-item {
    color: #efefeb;
    flex: 0 auto;
    width: 50%;
    max-width: 100%;
    transition: width 1.1s cubic-bezier(.19, 1, .22, 1), flex 1.1s cubic-bezier(.19, 1, .22, 1);
    display: flex;
    position: relative;
}

    .two-col-item:hover {
        max-width: 75%
    }

    .two-col-item.is--active {
        width: 100%
    }

.three-col-list {
    flex-flow: row;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-left: -.5vw;
    margin-right: -.5vw;
    display: flex
}

.three-col-item {
    color: #efefeb;
    flex: 0 auto;
    width: 33.3333%;
    max-width: 100%;
    transition: width 1.1s cubic-bezier(.19, 1, .22, 1), flex 1.1s cubic-bezier(.19, 1, .22, 1);
    display: flex;
    position: relative
}

    .three-col-item:hover {
        max-width: 66.7%
    }

    .three-col-item.is--active {
        width: 100%
    }

.four-col-list {
    flex-flow: row;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-left: -.5vw;
    margin-right: -.5vw;
    display: flex
}

.four-col-item {
    color: #efefeb;
    flex: 0 auto;
    width: 25%;
    max-width: 100%;
    transition: width 1.1s cubic-bezier(.19, 1, .22, 1), flex 1.1s cubic-bezier(.19, 1, .22, 1);
    display: flex;
    position: relative;
    translate: none;
    z-index: 56;
    transition: 1s;
    transform-style: preserve-3d;
}

    .four-col-item:hover {
        /* max-width: 50% */
        z-index: 90;
        transform: scale(1.2);
    }

    .four-col-item:first-child {
        transform-origin: 0 50%;
    }

    .four-col-item:last-child {
        transform-origin: 100% 50%;
    }

    .four-col-item.is--active {
        /* width: 50% */
    }

/* MODAL STYLES -------------------------------*/
.jw-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 999;
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

    .jw-modal.open {
        display: block;
    }

.jw-modal-body {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

body.jw-modal-open {
    overflow: hidden;
}

@media screen and (orientation: landscape) and (min-width:769px) and (max-width:1024px) {

    .h-50-grid,
    .h-100-grid {
        height: calc(var(--vh, 1vh)* 50 - 16.5px);
    }

    .grid-item-1,
    .grid-item-2,
    .grid-item-4,
    .grid-item-6,
    .grid-item-8 {
        grid-column: span 2;
        grid-row: span 2;
        height: calc(var(--vh, 1vh) * 50 - 16.5px)
    }
}

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

    .h-50-grid,
    .h-100-grid {
        height: calc(var(--vh, 1vh)* 33 - 16.5px);
    }

    .post-container .title-wrap {
        width: 100%;
        top: calc(10% - 10px);
        left: 20px;
        transform: translateY(0);
    }

        .post-container .title-wrap h3 {
            font-size: 20px !important;
            margin-bottom: 0;
        }

        .post-container .title-wrap .sub-title {
            font-size: 18px;
            margin-bottom: 0;
        }
}

@media screen and (max-width: 767px) {
    .button-filter,
    .button-group-sm .button-filter {
        font-size: 15px;
        padding: 10px 12px 10px 12px;
    }

    .button--reset {
        font-size: 15px;
        padding: 10px 15px 10px 15px;
    }

    .grid-item-1,
    .grid-item-2,
    .grid-item-4,
    .grid-item-6,
    .grid-item-8 {
        grid-column: span 4;
        grid-row: span 2;
        height: calc(var(--vh, 1vh)* 33 - 16.5px);
    }

    .post-container .title-wrap {
        width: 100%;
        top: calc(10% - 10px);
        left: 20px;
        transform: translateY(0);
    }

        .post-container .title-wrap h3 {
            font-size: 20px !important;
            margin-bottom: 0;
        }

        .post-container .title-wrap .sub-title {
            font-size: 18px;
            margin-bottom: 0;
        }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
.toggle-filter-wrap {
    max-width: 940px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: auto;
    margin-bottom: 0;
}

.toggle-filter {
    padding-left: 5px;
    padding-bottom: 25px;
    padding-top: 25px;
    font-size: 24px !important;
    font-family: 'Exo 2',sans-serif;
    font-weight: 700;
    color: #4b00ff;
    width: 100%;
}

.filter-content {
    display: block;
}

@media (max-width: 992px) {
    .toggle-filter {
        border-bottom: 1px solid #000;
        margin-bottom: 30px;
        font-size:24px!important;
        cursor:pointer;
    }

        .toggle-filter:before {
            content: "\f078";
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            font-size: 24px;
            position: absolute;
            right: 0;
            top: 25px;
            height: 50px !important;
            background: transparent !important;
        }

        .toggle-filter.open:before {
            content: "\f077";            
        }

    .filter-content {
        display: none;        
    }
}