@charset "UTF-8";
/* CSS Document */
.overlay:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transition: all .6s;
    z-index: 1
}

.overlay-bottom:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: -1px;
    -webkit-mask-image: linear-gradient(to bottom, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.013) 9.7%, hsla(0, 0%, 0%, 0.049) 18.7%, hsla(0, 0%, 0%, 0.104) 27.2%, hsla(0, 0%, 0%, 0.175) 35.1%, hsla(0, 0%, 0%, 0.259) 42.6%, hsla(0, 0%, 0%, 0.352) 49.6%, hsla(0, 0%, 0%, 0.45) 56.2%, hsla(0, 0%, 0%, 0.55) 62.5%, hsla(0, 0%, 0%, 0.648) 68.4%, hsla(0, 0%, 0%, 0.741) 74.1%, hsla(0, 0%, 0%, 0.825) 79.5%, hsla(0, 0%, 0%, 0.896) 84.8%, hsla(0, 0%, 0%, 0.951) 89.9%, hsla(0, 0%, 0%, 0.987) 95%, hsl(0, 0%, 0%) 100%);
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transition: all .6s;
    z-index: 1
}

.overlay-top:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: -1px;
    -webkit-mask-image: linear-gradient(to top, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.013) 9.7%, hsla(0, 0%, 0%, 0.049) 18.7%, hsla(0, 0%, 0%, 0.104) 27.2%, hsla(0, 0%, 0%, 0.175) 35.1%, hsla(0, 0%, 0%, 0.259) 42.6%, hsla(0, 0%, 0%, 0.352) 49.6%, hsla(0, 0%, 0%, 0.45) 56.2%, hsla(0, 0%, 0%, 0.55) 62.5%, hsla(0, 0%, 0%, 0.648) 68.4%, hsla(0, 0%, 0%, 0.741) 74.1%, hsla(0, 0%, 0%, 0.825) 79.5%, hsla(0, 0%, 0%, 0.896) 84.8%, hsla(0, 0%, 0%, 0.951) 89.9%, hsla(0, 0%, 0%, 0.987) 95%, hsl(0, 0%, 0%) 100%);
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transition: all .6s;
    z-index: 1
}

.overlay-black:after, .overlay-black:before {
    background: #000
}

.overlay-black:after, .overlay-black:before {
    background: #000
}

.overlay-purple:after, .overlay-purple:before {
	background: #D5B4FF;
}

.overlay-beige:after, .overlay-beige:before {
	background: #F5F3EC;
}


.overlay-backdrop:after, .overlay-backdrop:before {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.overlay-multiply:after {
    mix-blend-mode: multiply
}

.overlay-opacity-10:after, .overlay-opacity-10:before {
    opacity: .1
}

.overlay-opacity-20:after, .overlay-opacity-20:before {
    opacity: .2
}

.overlay-opacity-30:after, .overlay-opacity-30:before {
    opacity: .3
}

.overlay-opacity-40:after, .overlay-opacity-40:before {
    opacity: .4
}

.overlay-opacity-50:after, .overlay-opacity-50:before {
    opacity: .5
}

.overlay-opacity-60:after, .overlay-opacity-60:before {
    opacity: .6
}

.overlay-opacity-70:after, .overlay-opacity-70:before {
    opacity: .7
}

.overlay-opacity-80:after, .overlay-opacity-80:before {
    opacity: .8
}

.overlay-opacity-90:after, .overlay-opacity-90:before {
    opacity: .9
}

.overlay-opacity-100:after, .overlay-opacity-100:before {
    opacity: 1
}

.overlay-height-10:after, .overlay-height-10:before {
    height: 10%
}

.overlay-height-20:after, .overlay-height-20:before {
    height: 20%
}

.overlay-height-30:after, .overlay-height-30:before {
    height: 30%
}

.overlay-height-40:after, .overlay-height-40:before {
    height: 40%
}

.overlay-height-50:after, .overlay-height-50:before {
    height: 50%
}

.overlay-height-60:after, .overlay-height-60:before {
    height: 60%
}

.overlay-height-70:after, .overlay-height-70:before {
    height: 70%
}

.overlay-height-80:after, .overlay-height-80:before {
    height: 80%
}

.overlay-height-90:after, .overlay-height-90:before {
    height: 90%
}

.overlay-height-100:after, .overlay-height-100:before {
    height: 100%
}

.overlay-height-120:after, .overlay-height-120:before {
    height: 120%
}

.video-holder {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-holder video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-holder.video-player .paused-layer {
    position: absolute;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity .4s;
    z-index: 5
}

.video-holder.video-player .paused-layer .bloc-row > * {
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.6s, opacity .6s;
    pointer-events: all;
    display: flex;
    flex-direction: column;
    grid-gap: min(1.5vw, 24px);
    align-items: flex-start
}

.video-holder.video-player .video-thumbnail {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    z-index: 1
}

.video-holder.video-player.video-is-playing .video-thumbnail {
    opacity: 0
}

.video-holder.video-player .paused-layer img.button-play {
    width: min(4vw, 64px) !important;
    height: min(4vw, 64px) !important;
    z-index: 10
}

.video-holder.video-player .video-preview {
    pointer-events: none;
    transition: opacity 1s
}

.video-holder.video-player .video-main {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}

.video-holder.video-player.hide-video-preview .video-preview {
    opacity: 0
}

.video-holder.video-player.hide-video-preview .video-main {
    opacity: 1
}

.video-holder.video-player.video-main-is-playing .paused-layer {
    opacity: 0;
    transition: opacity 1s
}

@media screen and (min-width: 767px) {
    .video-holder.video-player .video-thumbnail {
        display: none
    }
}

@media screen and (max-width: 767px) {
    .video-holder.video-player .paused-layer img.button-play {
        width: 12vw !important;
        height: 12vw !important
    }
}

.cta-button {
    letter-spacing: 0;
    height: 40px;
    width: 40px;
    border-radius: 4px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.2);
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    color: #FFF;
    transform: scale(0) translate3d(0, 0, 0);
    transition: transform .4s
}

.cta-button:hover {
    background-color: #FFF;
    color: #000;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0.1)
}

.video-holder.video-main-is-playing .cta-button {
    transform: scale(1) translate3d(0, 0, 0)
}

.cta-button.muted {
    position: absolute;
    right: 4%;
    bottom: 4%
}

.cta-button.muted svg {
    display: block;
    fill: #FFF;
    margin-bottom: 0;
    transform: scale(0.9)
}

.cta-button.muted:hover svg.icon-muted {
    fill: #000
}

.cta-button.muted svg.icon-unmuted {
    display: none
}

.cta-button.muted.unmuted svg.icon-muted {
    display: none
}

.cta-button.muted.unmuted svg.icon-unmuted {
    display: block;
    fill: #000
}

.cta-button.muted.unmuted {
    background-color: #FFF
}

@media screen and (max-width: 768px) {
    .cta-button.muted {
        width: 40px;
        height: 40px;
        bottom: 8vw;
        right: 4vw
    }

    .cta-button:hover {
        background-color: rgba(0, 0, 0, 0.1)
    }

    .cta-button.muted:hover svg.icon-muted {
        fill: #FFF
    }

    .cta-button.muted.unmuted {
        background-color: #FFF
    }

    .cta-button.muted svg {
        margin-bottom: 1px
    }

    .cta-button.muted {
        top: auto;
        bottom: 4vw
    }

    .section-cta {
        padding-bottom: 8vw
    }
}