/* -------------------------------------------- */
/* Reset */

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

* {
    margin: 0;
}

html {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

body {
    max-width:100%;
    width: 100%;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizelegibility;
    font-family: var(--alias-main);
    background: #000;
    overflow-x: clip;
}

input, button, textarea, select {
    font: inherit;
}

button, input, a {
    outline: none;
    cursor: pointer;
    font:inherit
}

h1,h2,h3,h4,h4,h5,h6 {
    font-weight: normal;
    color: inherit;
    margin: 0;
}

fieldset, button, input, select, textarea, hr {
    -webkit-appearance: none;
}

img, picture, video, canvas, svg {
    max-width: 100%;
}

video, canvas {
    display: block;
    width: 100%;
}

a, button {
    color: inherit; 
    -webkit-tap-highlight-color: transparent;
}

a { 
    text-decoration: none;
}


ul {
    list-style: none;
    padding: 0;
}


@media screen and (max-width: 896px) and (orientation: landscape), screen and (max-width: 500px) and (orientation: portrait) {
    html, body {
        overflow-x: clip;
    }
}


.link,
.wysiwyg a {
    position: relative ;
    z-index: 1 ;
    text-decoration: underline;
}


.link--title {
    position: relative ;
    z-index: 1 ;
}

.link:hover,
.wysiwyg a:hover,
.link--title:hover {
    color: #472AFC!important;
}


.wysiwyg .is-dark a:hover {
    color: #fff!important;
}


.link--full {
    position: relative ;
    z-index: 1 ;
}
.link--full:hover {
    color: #fff!important;
    text-decoration: underline;
}

.review__star {
    -webkit-mask:url('assets/svg/star.svg') 50% 50% / 32px 32px;
}
@media screen and (max-width: 896px) and (orientation: landscape), screen and (max-width: 500px) and (orientation: portrait)  {
    .review__star {
        -webkit-mask:url('assets/svg/star.svg') 50% 50% / 22px 22px;
    }
}

.backdrop-blur {
    background-color: #000;
}
.theme-light.backdrop-blur {
    background-color: #fff;
}
.backdrop-blur-gradient {
    display:none;
}

@supports ((-webkit-backdrop-filter: blur(40px)) or (backdrop-filter: blur(40px))) {
    .backdrop-blur,
    .theme-light.backdrop-blur {
        background-color: rgba(0,0,0,0.01);/* hack to force android rendering the blur */
        backdrop-filter: blur(40px);
        -webkit-backdrop-filter: blur(40px);
    }
    .backdrop-blur-gradient {
        display: block;
    }
}



video::-webkit-media-controls {
    display:none !important;
}
*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}@keyframes slideUpFade {
    0% {
        /* opacity: 0;
        transform: translateY(20vh); */
        opacity: 1;
        transform: translateY(0%) ;
    }
    100% {
        opacity: 1;
        transform: translateY(0%) ;
    }
}

@keyframes slideUpFadePhones {
    0% {
        opacity: 0 ;
        transform: scale(1.1) translateY(20vh) ;
    }
    100% {
        opacity: 1 ;
        transform: scale(1) translateY(0%) ;
    }
}

@keyframes slideUpFadeHalf {
    0% {
        /* opacity: 0;
        transform: translateY(50%); */
        opacity: 1;
        transform: translateY(0%) ;
    }
    100% {
        opacity: 1;
        transform: translateY(0%) ;
    }
}


@keyframes scaleOut {
    0% {
        /* opacity: 0;
        transform: scale(0.8) translateZ(0); */
        opacity: 1;
        transform: scale(1) translateZ(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateZ(0);
    }
}


@keyframes star {
    0% {
        opacity: 0;
        transform: scale(1.3) translateZ(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateZ(0);
    }
}


@keyframes scaleIn {
    0% {
        /* opacity: 1;
        transform: scale(1) translateZ(0); */
        opacity: 0;
        transform: scale(1.2) translateZ(0);
    }
    100% {
        opacity: 0;
        transform: scale(1.2) translateZ(0);
    }
}


@keyframes scaleFadeIn {
    0% {
        /* opacity: 0;
        transform: scale(1.2) translateZ(0); */
        opacity: 1;
        transform: scale(1) translateZ(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateZ(0);
    }
}


@keyframes slideUp {
    0% {
        /* transform: translateY(103%); */
        transform: translateY(0%) ;
    }
    100% {
        transform: translateY(0%) ;
    }
}



@keyframes slideUpSmall {
    0% {
        /* opacity: 0;
        transform: translateY(50%); */
        opacity: 1;
        transform: translateY(0%) ;
    }
    100% {
        opacity: 1;
        transform: translateY(0%) ;
    }
}



@keyframes swipeRight {
    0% {
        opacity: 0;
        transform: translateX(0%) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translateX(80%) rotate(20deg);
    }
}
@keyframes swipeLeft {
    0% {
        opacity: 0;
        transform: translateX(0%) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) rotate(-20deg);
    }
}

@keyframes swipeCenter {
    0% {
        opacity: 0;
        transform: translateY(80%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}



@keyframes swipeCardRight {
    0% {
        opacity: 0;
        transform: translateX(0%) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translateX(60%) rotate(10deg);
    }
}
@keyframes swipeCardLeft {
    0% {
        opacity: 0;
        transform: translateX(0%) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translateX(-100%) rotate(-10deg);
    }
}
@keyframes swipeCardUp {
    0% {
        opacity: 0;
        transform: translateY(50%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 896px) and (orientation: landscape), screen and (max-width: 500px) and (orientation: portrait) {
    @keyframes swipeCardRight {
        0% {
            opacity: 0;
            transform: translateX(0%) rotate(0deg);
        }
        100% {
            opacity: 1;
            transform: translateX(100%) rotate(10deg);
        }
    }
    @keyframes swipeCardLeft {
        0% {
            opacity: 0;
            transform: translateX(0%) rotate(0deg);
        }
        100% {
            opacity: 1;
            transform: translateX(-80%) rotate(-10deg);
        }
    }
}




@keyframes swipeCardUnStack1 {
    0% {
        transform: translate(-50%,0%);
    }
    100% {
        transform: translate(-50%,45%);
    }
}

@keyframes swipeCardUnStack2 {
    0% {
        transform: translate(-50%,0%);
    }
    100% {
        transform: translate(-50%,95%);
    }
}





@keyframes fadeIn {
    0% {
        /* opacity: 0; */
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}



@keyframes fadeInText {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeOutText {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}



@keyframes roll {
    0% {
        transform: translateY(0) translateZ(0);
    }
    100% {
        transform: translateY(calc(-100% + 1.12em)) translateZ(0);
    }
}


@keyframes pan {
    0% {
        transform: translateX(0) translateZ(0);
    }
    100% {
        transform: translateX(-100%) translateZ(0);
    }
}


@keyframes ipan {
    0% {
        transform: translateX(calc( -100% + 100vw )) translateZ(0);
    }
    100% {
        transform: translateX(0%) translateZ(0);
    }
}





@keyframes beforeAfterOuter {
    0% {
        transform: translateX(var(--alias-beforeAfterW)) translateZ(0);
    }
    20% {
        transform: translateX( calc(25 * var(--unit-fx)) ) translateZ(0);
    }
    40% {
        transform: translateX(50%) translateZ(0);
    }
    80% {
        transform: translateX(50%) translateZ(0);
    }
    100% {
        transform: translateX(var(--alias-beforeAfterW)) translateZ(0);
    }
}
@keyframes beforeAfterInner {
    0% {
        transform: translateX(var(--alias-iBeforeAfterW)) translateZ(0);
    }
    20% {
        transform: translateX(calc(-25 * var(--unit-fx))) translateZ(0);
    }
    40% {
        transform: translateX(-50%) translateZ(0);
    }
    80% {
        transform: translateX(-50%) translateZ(0);
    }
    100% {
        transform: translateX(var(--alias-iBeforeAfterW)) translateZ(0);
    }
}
@keyframes beforeAfterBar {
    0% {
        transform: translateX(var(--alias-beforeAfterW)) translateZ(0);
    }
    20% {
        transform: translateX(calc(25 * var(--unit-fx))) translateZ(0);
    }
    40% {
        transform: translateX(50%) translateZ(0);
    }
    80% {
        transform: translateX(50%) translateZ(0);
    }
    100% {
        transform: translateX(var(--alias-beforeAfterW)) translateZ(0);
    }
}

/* -------------------------------------------- */
/* FONTS */

@font-face {
    font-family: "SequelSansHeadline";
    src: url("./assets/fonts/SequelSansHeadlineRegular.woff2") format("woff2");
    font-weight: 400;
}
@font-face {
    font-family: "SequelSansHeadline";
    src: url("./assets/fonts/SequelSansHeadlineRegularItalic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: "SequelSansHeadline";
    src: url("./assets/fonts/SequelSansHeadlineMedium.woff2") format("woff2");
    font-weight: 500;
}
@font-face {
    font-family: "SequelSansHeadline";
    src: url("./assets/fonts/SequelSansHeadlineSemi.woff2") format("woff2");
    font-weight: bold;
}
@font-face {
    font-family: "SharpGroteskBook20";
    src: url("./assets/fonts/SharpGroteskBook20.woff2") format("woff2");
    font-weight: 400;
}

@font-face {
    font-family: "SharpGroteskBook20";
    src: url("./assets/fonts/SharpGroteskMedium20.woff2") format("woff2");
    font-weight: 500;
}:root {
    
    --minSize:    320;
    --maxSize:    1440;

    /* Media Queries*/
    --media-m:     screen and (max-width: 500px) and (orientation: portrait); /*screen and (max-width: 896px) and (orientation: landscape);*/
    --media-tp:    screen and (min-width: 429px) and (max-width: 1024px) and (orientation: portrait);
    --media-mtp:   screen and (max-width: 1024px) and (orientation: portrait);
    --media-mt:    screen and (max-width: 1180px) and (orientation: landscape), screen and (max-width: 1024px) and (orientation: portrait);
    --media-ml:    screen and (max-width: 896px) and (orientation: landscape);
    --media-mp:    screen and (max-width: 428px) and (orientation: portrait);
   
    /* --media-m:    screen and (orientation: portrait); */
    --media-touch: (hover: none) ;

    /* FontFamily */
    --alias-main:   'SequelSansHeadline', sans-serif;
    --alias-alt:   'SharpGroteskBook20', sans-serif;

    /* Colors */
    --alias-theme: #000;
    --alias-dark-theme: #000;
    
    --alias-dark: #000;
    --alias-light: #fff;
    --alias-lightGrad: linear-gradient(0deg, white, transparent);
    --alias-gradPurple: linear-gradient(129deg,#dc79ff,#256bfa);
    --alias-gradBlackRed: radial-gradient(199.03% 275.89% at 68.16% 190.4%, #FF5757 36.19%, #A51F24 46.6%, #272727 61.65%);
    --alias-gradWhiteTrans: linear-gradient(180deg, #EFF8FF 0%, rgba(239, 245, 255, 0.76) 18.75%, rgba(239, 248, 255, 0) 50%);
    
    
    --alias-grey75: rgba(38,38,38,0.75);
    --alias-white10: rgba(255,255,255,0.1);
    --alias-white20: rgba(255,255,255,0.2);
    --alias-white30: rgba(255,255,255,0.3);
    --alias-white40: rgba(255,255,255,0.4);
    --alias-white50: rgba(255,255,255,0.5);
    --alias-white60: rgba(255,255,255,0.6);
    --alias-white70: rgba(255,255,255,0.6);
    --alias-white80: rgba(255,255,255,0.6);
    --alias-white90: rgba(255,255,255,0.6);
    --alias-black10: rgba(0,0,0,0.1);
    --alias-black20: rgba(0,0,0,0.2);
    --alias-black30: rgba(0,0,0,0.3);
    --alias-black40: rgba(0,0,0,0.4);
    --alias-black50: rgba(0,0,0,0.5);
    --alias-black60: rgba(0,0,0,0.6);
    --alias-black70: rgba(0,0,0,0.6);
    --alias-black80: rgba(0,0,0,0.6);
    --alias-black90: rgba(0,0,0,0.6);

    /* Easings */
    --alias-easeOut: cubic-bezier(0.430, 0.195, 0.020, 1.000);
    --alias-easeIn: cubic-bezier(0.98, 0.0, 0.57, 0);
    --alias-easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    --alias-easeOut2: cubic-bezier(0.9, 0.1, 0.15, 1.05);
    --alias-easeOut3: cubic-bezier(0.630, 0.195, 0.010, 1.000);
    --alias-easeOutSlow: cubic-bezier(.43,.195,.02,1);
    --alias-easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    --alias-easeInOutQuart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
    --alias-easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
    --alias-easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    
    

    /* Units*/
    --unit-fx:  calc( var(--vw) / 1440 );
    --unit-fy:  calc( var(--vh) / 900 );
    
    --vhfix: 100vh;
    --vhfixonce: 100vh;
    --vw: 100vw;
    --vh: 100vh;
    --unit-vw:  calc( var( --vw ) / 100 );
    --unit-vhfix:  calc( var( --vhfix ) / 100 );
    --unit-vhfixonce:  calc( var( --vhfixonce ) / 100 );

    --alias-beforeAfterW: calc(  100% - 75 * var(--unit-fx));
    --alias-iBeforeAfterW: calc(-100% + 75 * var(--unit-fx));

    --alias-blur20: blur(20px)

}

@media screen and (min-width: 1440px) {
    :root {
        --unit-fx:  calc( 1px );
        --unit-fy:  calc( 1px );
    }
}

/*
@media screen and (max-width: 1366px) and (orientation: landscape), screen and (max-width: 1024px) and (orientation: portrait) {
    :root {
        --unit-fx:  calc( var(--vw) / 1024 );
        --unit-fy:  calc( var(--vh) / 768 );
    }
}
*/
/* @media screen and (max-width:768px)  {
    :root {
        --unit-fx:  calc( var(--vw) / 768 );
        --unit-fy:  calc( var(--vh) / 1024 );
    }
}  */
/* @media screen and (max-width: 896px) and (orientation: landscape) {
    :root {
        --unit-fx:  calc( var(--vw) / 667 );
        --unit-fy:  calc( var(--vh) / 375 );
    }
}  */
/* @media screen and (max-width: 896px) and (orientation: landscape) {
    :root {
        --unit-fx:  calc( var(--vh) / 667 );
        --unit-fy:  calc( var(--vw) / 375 );
    }
} */

/* 
@media screen and (max-width: 896px) and (orientation: portrait) {
    :root {
        --unit-fx:  calc( var(--vw) / 768 );
        --unit-fy:  calc( var(--vh) / 1024 );
    }
}
 */

 
/* @media screen and (max-width: 896px) and (orientation: landscape) {
    :root {
        --unit-fx:  calc( var(--vw) / 896 );
        --unit-fy:  calc( var(--vh) / 375 );
    }
} */
@media screen and (max-width: 500px) and (orientation: portrait) {
    :root {
        --unit-fx:  calc( var(--vw) / 375 );
        --unit-fy:  calc( var(--vh) / 726 );
        --alias-beforeAfterW: calc(  100% - 30 * var(--unit-fx));
        --alias-iBeforeAfterW: calc(-100% + 30 * var(--unit-fx));
    }
}