:root {
    --redo-white: #eeeeee;
    --redo-blue-dark: #2d4cf6;
    --redo-blue-light: #63d1ea;


    --white:        #FFFFFF;
    --white-10:     #FFFFFF70;
    --white-50:     #f5f5f7c9;
    --gray :        #6f6f6f;
    --gray-50:        #353535;
    --dark-gray:    #1E1E22;
    --black:        #000000;
    --dark:         #181818;
    --light-green:  #00FFCC;
    --green :       #05F29A;
    --primary:      #FCAD6D;
    --red :         #EF1F1F;
    --orange :      #F6501A;
    --purple:       #6633FF;
    --dark-50:      #2e2929;
    --dark-100:     #151313;
    --dark-50-transparent:  #000000b8;
    --yellow:       #FFD700;
    --gold:         #FFB546;

    --funcky-gradient: linear-gradient(96.94deg, #A050FE 8.08%, #01C2A0 95.69%);
    --funcky-redo-gradient: linear-gradient(96.94deg, var(--redo-blue-dark) 8.08%, var(--redo-blue-light) 95.69%);
    --black-gradient: linear-gradient(90deg, #1E1E22 0%, #1E1E22 40%, #000000 100%);
    /* --black-gradient: linear-gradient(96.94deg, #000000 0%, #000000 70%, #1E1E22 100%); */

    --white-t-0: rgba(255, 255, 255, 0);
    --white-t-10: rgba(255, 255, 255, 0.1);

    --black-t-0: rgba(0, 0, 0, 0);
    --black-t-10: rgba(0, 0, 0, 0.1);
    --black-t-20: rgba(0, 0, 0, 0.2);
    --black-t-50: rgba(0, 0, 0, 0.5);
    --black-t-70: rgba(0, 0, 0, 0.7);
    --black-t-80: rgba(0, 0, 0, 0.8);

    /* --f-primary: 'Alef', sans-serif; */
    --f-primary: 'Figtree', sans-serif;
    --f-secondary: 'Gotham-Light', sans-serif;
    --f-alef : 'Alef', sans-serif;
    --f-bebas: 'Bebas Neue', cursive;
    --f-bebas-pro: 'Bebas Neue Pro' , cursive;
    --f-figtree: 'Figtree', cursive;
    --f-gotham-medium: 'Gotham-Medium', sans-serif;
    --f-gotham-bold: 'Gotham-Bold', sans-serif;
    --f-gotham-book: 'Gotham-Book', sans-serif;
    --planet-kosmos: 'Planet Kosmos', cursive;
    --ghoust-solid: 'Ghoust-Solid', cursive;
    --rio-grande: 'RioGrande', cursive;

    --borrad-small: 4px;
    --borrad-normal: 8px;
    --borrad-big: 10px;
    --borrad-large: 25px;

    --transition-200: .2s ease;
    --transition-300: .3s ease;
    --transition-400: .4s ease;
    --transition-700: .7s ease;

    /* Will be changed in JavaScript */
    --progress-width: 0%;
}

* {
    scroll-behavior: smooth;
    color: var(--white);
    /* background: #6f6f6f7d; */
}

body {
    margin: 0; padding: 0;
    /* background: var(--black); */
    overflow: overlay;
    overflow-x: hidden;
}

body.stop-scrolling {
    height: 100vh;
    overflow: hidden;
}

:root {
    --vw: 0.7vw;
    --fontSizeMultiplier: 1;

    --marpadTiny:		calc(0.2 * var(--vw) * var(--marpadMultiplier));
    --marpadSmaller:	calc(0.5 * var(--vw) * var(--marpadMultiplier));
    --marpadSmall:	    calc(1.3 * var(--vw) * var(--marpadMultiplier));
    --marpadNormal:	    calc(2.0 * var(--vw) * var(--marpadMultiplier));
    --marpadBig:		calc(3.5 * var(--vw) * var(--marpadMultiplier));
    --marpadBigger:	    calc(6.5 * var(--vw) * var(--marpadMultiplier));

    --h1FontSize:		calc(8.5 * var(--vw) * var(--fontSizeMultiplier));
    --h2FontSize:		calc(5.8 * var(--vw) * var(--fontSizeMultiplier));
    --h3FontSize:		calc(4 * var(--vw) * var(--fontSizeMultiplier));
    --h4FontSize:		calc(2.5 * var(--vw) * var(--fontSizeMultiplier));
    --h5FontSize:		calc(1.75 * var(--vw) * var(--fontSizeMultiplier));
    --h6FontSize:		calc(1 * var(--vw) * var(--fontSizeMultiplier));
    --pFontSize:		20px;
    --pButtonSize:		22px;
}

h1, .h1 {
    font-size: var(--h1FontSize);
    line-height: calc(var(--h1FontSize) - 1vw);
}

h2, .h2 {
    font-size: var(--h2FontSize);
    line-height: 1;
}

h3, .h3 {
    font-size: var(--h3FontSize);
    line-height: 1;
}

h4, .h4 {
    font-size: var(--h4FontSize);
    line-height: 1;
}

h5, .h5 {
    font-size: var(--h5FontSize);
    line-height: 1;
}

h6, .h6 {
    font-size: var(--h6FontSize);
    line-height: 1;
}

h3.f-bebas, h4.f-bebas, h5.f-bebas, h6.f-bebas {
    letter-spacing: 1px;
}

.f-bebas.py-2 {
    padding-top: .7rem!important;
}

*::selection {
    /* background: var(--dark-50); */
    background: var(--redo-blue-light);
}

/* Progressbar */
::-webkit-scrollbar {
    width: 0;
}

#progressbar {
    width: 7.5px;
    background: transparent;
    position: fixed;
    top: 0; right: 0;
    transition: var(--transition-200);
}
/* End progressbar */

@font-face {
    font-family: 'Gotham-Bold';
    src: url(/assets/fonts/Gotham/Gotham-Bold.otf);
}

@font-face {
    font-family: 'Gotham-Light';
    src: url(/assets/fonts/Gotham/Gotham-Light.otf);
}

@font-face {
    font-family: 'Gotham-Black';
    src: url(/assets/fonts/Gotham/Gotham-Black.otf);
}

/* Global classes */
.border-none {
    border: 1px solid transparent;
}

.c-pointer {
    cursor: pointer;
}

section {
    padding-top: 10%;
    padding-bottom: 10%;
}

section.container {
    width: 75%!important;
}

section > h2, .section-h2 {
    color: var(--white);
    margin-bottom: 2.5rem;
    text-align: center;
    font-family: 'Gotham-Bold', sans-serif;
}

section .container {
    width: 75%;
}

.min-dvh-100 {
    min-height: 100vh;
}

.min-dvh-65 {
    min-height: 65vh;
}

.min-dvh-110 {
    min-height: 110vh;
}

.min-dvh-130 {
    min-height: 130vh;
}

.hidden-text {
    min-height: 10vh;
    position: absolute;
    z-index: 50;
}

.hidden-three {
    z-index: 50;
}

.container-fluid {
    --bs-gutter-x: 0rem;
}

.header {
    z-index: 100;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.40) 37.57%, rgba(0, 0, 0, 0.14) 73.25%, rgba(0, 0, 0, 0.00) 100%);
    transition-duration: 300ms;
}
.header.scrolled {
    top: -12vh!important;
}
.mobile-menu {
    margin-top: 7rem;
}
.mobile-menu.scrolled {
    transform: scaleY(0)!important;
}

.header svg#logo,
.header svg#logo path,
.footer svg#logo,
.footer svg#logo path {
    transition: var(--transition-400);
}

.header svg#logo:hover,
.footer svg#logo:hover {
    scale: 1.1;
}

.header svg#logo.transparent-stroke path,
.footer svg#logo.transparent-stroke path {
    stroke: transparent!important;
}

.header svg#logo.transparent-stroke:hover path,
.footer svg#logo.transparent-stroke:hover path {
    stroke: transparent!important;
}

.header svg#logo:hover path,
.footer svg#logo:hover path {
    fill: var(--purple); stroke: var(--purple);
}

.links-container > a {
    opacity: 0.4;
}

.footer-socials a:hover {
    transform: scale(1.1);
}

/* Width */
.mw-300px {
    max-width: 300px;
}

.mw-500px {
    max-width: 500px;
}

.mw-960px {
    max-width: 960px;
}

.mw-75 {
    max-width: 75%;
}

.mw-100 {
    max-width: 100%;
}

.w-fc {
    width: fit-content;
}

.w-5{
    width: 5%!important;
}

.w-7 {
    width: 7%!important;
}

.w-10 {
    width: 10%!important;
}

.w-15 {
    width: 15%!important;
}

.w-20 {
    width: 20%!important;
}

.w-25 {
    width: 25%!important;
}

.w-30 {
    width: 30%!important;
}

.w-35 {
    width: 35%!important;
}

.w-40 {
    width: 40%!important;
}

.w-45 {
    width: 45%!important;
}

.w-50 {
    width: 50%!important;
}

.w-55 {
    width: 55%!important;
}

.w-60 {
    width: 60%!important;
}

/* .w-64 {
    width: 77%!important;
} */

.w-65 {
    width: 65%!important;
}

.w-70 {
    width: 70%!important;
}

.w-75 {
    width: 75%!important;
}

.w-80 {
    width: 80%!important;
}

.w-85 {
    width: 85%!important;
}

.w-90 {
    width: 90%!important;
}

.w-95 {
    width: 95%!important;
}

.w-100 {
    width: 100%!important;
}

/* End width */

.aspect-square {
    aspect-ratio: 1/1;
}

/* Height */
.h-15px {
    height: 15px;
}

.mh-100 {
    max-height: 100%!important;
}

.h-8vh {
    height: 8vh;
}

.h-12vh {
    height: 12vh;
}

.h-17vh {
    height: 17vh;
}

.h-20vh {
    height: 20vh;
}

.h-30vh {
    height: 30vh;
}

.h-50vh {
    height: 50vh;
}

.h-fc {
    height: fit-content;
}

.mnh-150px {
    min-height: 150px;
}

.mnh-250px {
    min-height: 250px;
}

.mnh-75vh {
    min-height: 75vh;
}
/* End height */

.user-select-none {
    user-select: none;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bg-lg-transparent-black {
    background: linear-gradient(180deg, var(--black-t-0) 0%, var(--black) 100%);
}

.bg-lg-transparent-transparent-black {
    background-image: linear-gradient(60deg, var(--black-t-0) 0%, var(--black-t-70) 100%);
}

.bg-lg-black-transparent {
    background: linear-gradient(0deg, var(--black-t-20), var(--black-t-20)),
                linear-gradient(70.12deg, var(--white-t-10) 24.42%, var(--white-t-0) 102.47%);
    box-shadow: 2px 4px 30px var(--black-t-10);
    backdrop-filter: blur(20px);
}

.purple-bg {
    background: var(--purple);
}

.glass-bg {
    background: linear-gradient(70.12deg, var(--white-t-10) 24.42%, var(--white-t-0) 102.47%);
    filter: drop-shadow(2px 4px 30px var(--black-t-10));
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    -moz-backdrop-filter: blur(35px);
    -ms-backdrop-filter: blur(35px);
}

.bg-gray-50 {
    background-color: var(--gray-50);
}

.bg-dark-gray {
    background-color: var(--dark-gray);
}

.dark-bg {
    background: var(--dark);
}

.dark-bg-50-transparent {
    background: var(--dark-50-transparent);
}

.dark-bg-50 {
    background: var(--dark-50);
}

.dark-bg-100 {
    background: var(--dark-100);
}

.c-primary {
    color: var(--primary);
}

.c-light-green {
    color: var(--light-green);
}

.c-green {
    color: var(--green);
}

.c-yellow {
    color: var(--yellow);
}

.c-orange {
    color: var(--orange);
}

.c-gold {
    color: var(--gold);
}

.c-white-50 {
    color: var(--white);
    opacity: .5;
}
.c-white-80 {
    color: var(--white);
    opacity: 0.8;
}

.f-primary {
    font-family: var(--f-primary);
}

.f-secondary {
    font-family: var(--f-secondary);
}

.f-alef {
    font-family: var(--f-alef);
}

.f-bebas {
    font-family: var(--f-bebas);
}

.f-bebas-pro {
    font-family: var(--f-bebas-pro);
}

.f-figtree {
    font-family: var(--f-figtree);
}

.f-gotham-medium {
    font-family: var(--f-gotham-medium);
}

.f-gotham-bold {
    font-family: var(--f-gotham-bold);
}

.f-gotham-book {
    font-family: var(--f-gotham-book);
}

.f-rio-grande {
    font-family: var(--f-rio-grande);
}

.f-ghoust-solid {
    font-family: var(--f-ghoust-solid);
}

.f-planet-kosmos {
    font-family: var(--f-planet-kosmos);
}

.fs-100 {
    font-size: calc(7.5 * var(--vw) * var(--fontSizeMultiplier));;
}

.lh-100 {
    line-height: calc(7.5 * var(--vw) * var(--fontSizeMultiplier));;
}

.lh-15 {
    line-height: 15px!important;
}

.lh-26 {
    line-height: 26px!important;
}

.md-lh-30 {
    line-height: 30px!important;
}

.pt-20 {
    padding-top: 20vh!important;
}
.pt-25 {
    padding-top: 25vh!important;
}
.pt-35 {
    padding-top: 35vh!important;
}


.fs-18px {
    font-size: 18px;
}

.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.fs-italic {
    font-style: italic;
}

.borrad-3px {
    border-radius: var(--borrad-small);
}

.borrad-10px {
    border-radius: var(--borrad-big);
}

.borrad-25px {
    border-radius: var(--borrad-large);
}

.zi-min1 {
    z-index: -1;
}

.zi-1 {
    z-index: 1;
}

.zi-2 {
    z-index: 2;
}

.zi-50 {
    z-index: 50;
}

.zi-99 {
    z-index: 99;
}

.zi-150 {
    z-index: 150;
}

.zi-200 {
    z-index: 200;
}


@keyframes slideRight {
    0% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes slideLeft {
    0% {
        transform: translateX(25%);
    }
    100% {
        transform: translateX(0);
    }
}




/* Margins */
.mx-marpad-normal {
    margin-left: var(--marpadNormal);
    margin-right: var(--marpadNormal);
}

.mt-min-3 {
    margin-top: -3rem!important;
}

.mt-min-5 {
    margin-top: -5rem!important;
}

.mt-min6 {
    margin-top: -6rem!important;
}

.mt-min20vh {
    margin-top: -20vh!important;
}

.mt-min-20-percent {
    margin-top: -20%!important;
}

.mt-min-50-percent {
    margin-top: -50%!important;
}

.mt-100-percent {
    margin-top: 100%!important;
}

.mt-12vh {
    margin-top: 12vh!important;
}

.mt-7 {
    margin-top: 7rem!important;
}

.mt-12\.5 {
    margin-top: 12.5rem!important;
}

.mt-5p {
    margin-top: 5%!important;
}

.ms-25-percent {
    margin-left: 25%!important;
}

.ms-min3 {
    margin-left: -3rem!important;
}

.ms-6 {
    margin-left: 6rem!important;
}

.ms-7 {
    margin-left: 7rem!important;
}

.ms-8 {
    margin-left: 8rem!important;
}

.ms-9 {
    margin-left: 9rem!important;
}

.ms-10 {
    margin-left: 10rem!important;
}

.ms-20 {
    margin-left: 20rem!important;
}

.ms-50 {
    margin-left: 34rem!important;
}

.ms-65-percent {
    margin-left: 65%!important;
}


.me-25-percent {
    margin-right: 25%!important;
}

.me-6 {
    margin-right: 6rem!important;
}

.me-7 {
    margin-right: 7rem!important;
}

.me-8 {
    margin-right: 8rem!important;
}

.me-9 {
    margin-right: 9rem!important;
}

.me-10 {
    margin-right: 10rem!important;
}

.mb-min2 {
    margin-bottom: -2rem!important;
}

.mb-min3 {
    margin-bottom: -3rem!important;
}

.mb-min6 {
    margin-bottom: -6rem!important;
}

.mb-min13 {
    margin-bottom: -13rem!important;
}

.mb-min15 {
    margin-bottom: -15rem!important;
}

.mb-7 {
    margin-bottom: 7rem!important;
}

.mb-10 {
    margin-bottom: 10rem!important;
}
/* End margins */

/* Paddings */
.px-50px {
    padding-left: 50px!important;
    padding-right: 50px!important;
}
.py-2\.5 {
    padding-top: .75rem!important;
    padding-bottom: .75rem!important;
}
.pt-\.5 {
    padding-top: .5rem!important;
}
.pb-2\.5 {
    padding-bottom: .75rem!important;
}

.pb-10px {
    padding-bottom: 10px!important;
}

.pt-7 {
    padding-top: 7rem!important;
}

.ps-5rem {
    padding-left: 5rem!important;
}

.ps-6 {
    padding-left: 6rem!important;
}

.pe-6 {
    padding-right: 6rem!important;
}

.pb-7 {
    padding-bottom: 7rem!important;
}

.pb-10 {
    padding-bottom: 10rem!important;
}
/* End paddings */

.gap-6 {
    gap: 6rem!important;
}

.t-min50 {
    transform: translate(-50%, -50%);
}

.tx-min50 {
    transform: translate(-50%, -50%);
}

.ty-50 {
    translate: 0 -50%;
}

.inset-0 {
    inset: 0;
}

.section-spacing {
    padding-top: 15vh;
}

.section-spacing-bottom {
    padding-bottom: 15vh;
}

.r-min5deg {
    rotate: -5deg;
}

.o-0 {
    opacity: 0;
}

.o-05 {
    opacity: 0.5!important;
}

.o-08 {
    opacity: 0.8!important;
}

.o-1 {
    opacity: 1!important;
}

.no-wrap {
    white-space: nowrap;
}

.let-space-1 {
    letter-spacing: 1px;
}

.let-space-2 {
    letter-spacing: 2px;
}

.let-space-3 {
    letter-spacing: 3px;
}

/* Responsiveness */
.lg-d-none {
    display: block!important;
}

.xxl-d-flex {
    display: flex!important;
}
/* End responsiveness */
/* End global classes */

/* Menu links */
.menu-link {
    font-weight: 100;
    padding-left: var(--marpadNormal);
    padding-right: var(--marpadNormal);
}
.menu-link-no-padding {
    font-weight: 100;
}
.menu-link, .button-transparent span,
.menu-link, .button-danger span,
.menu-link, .border-button-white span {
    font-size: var(--pButtonSize);
    line-height: 1.35;
}

.menu-link.active::after,
.menu-link:hover::after {
    width: 70%;
}

.menu-link:hover {
    color: var(--primary)!important;
}

.mobile-menu .menu-link {
    height: 30px;
}
/* End menu links */

/* Dropdown menu */
.dropdown-menu {
    width: 100%; height: fit-content;
    background: var(--white);
    position: fixed;
    top: 0; left: 0;
    transition: var(--transition-300);
    -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top;
    transform: scaleY(0);
}

.dropdown-menu .menu-link::after {
    width: 0%; height: 3px;
    left: 1.25rem; transform: translateX(0);
    bottom: -5px!important;
}

.dropdown-menu .menu-link.active::after,
.dropdown-menu .menu-link:hover::after {
    width: 80%;
}

.dropdown-menu.open {
    transform: scaleY(1);
}
/* End dropdown menu */

/* Menu icon */
.menu-icon {
    width: 20px; height: 14.3px;
    display: flex; flex-direction: column;
    justify-content: space-between; align-items: flex-end;
    position: relative;
    aspect-ratio: 1/1;
}
/* .menu-icon {
    width: 22px; height: 16px;
    display: flex; flex-direction: column;
    justify-content: space-between; align-items: flex-end;
    position: relative;
} */

.menu-icon-container:hover {
    cursor: pointer;
}

.bar {
    height: 3px;
    background: var(--white);
    border-radius: var(--borrad-small);
    position: absolute;
    transition: all .3s ease-in-out;
}

.bar.one {
    width: 75%;
    top: 0;
}

.bar.two {
    width: 65%;
    top: 50%; transform: translateY(-50%);
}

.bar.three {
    width: 100%;
    bottom: 0;
}

.menu-icon.open .bar.one {
    width: 100%;
    rotate: 45deg;
    transform: translateY(0%);
    top: 61%;
    left: -2px;
}

.menu-icon.open .bar.two {
    rotate: 180deg;
    background: transparent;
    box-shadow: none;
}

.menu-icon.open .bar.three {
    width: 100%;
    rotate: -45deg;
    transform: translateY(-100%);
}

.menu-icon-container:hover .menu-icon:not(.open) .bar,
.menu-icon-container:hover .menu-icon.open .bar:not(.two) {
    background: var(--yellow);
}
/* End menu icon */

/* Button */
button, a {
    font-family: var(--f-primary);
    font-weight: 700;
    border-radius: var(--borrad-normal);
    transition: var(--transition-400);
}

button.primary:not(.not-rounded),
a.primary:not(.not-rounded) {
    border-radius: 3px 3px 25px 3px;
}

.button-transparent {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--white);
}
.button-transparent:not(.no-height),
.button-danger:not(.no-height),
.border-button-white:not(.no-height) {
    height: 50px;
}
.button-transparent:hover {
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--black);
}

.button-danger {
    background: var(--red)!important;
    color: var(--white);
}

.border-button-white {
    background: transparent!important;
    color: var(--white-50);
    border: 1px solid var(--white-50);
}

.button-border-gray {
    border: 1px solid var(--dark-gray);
}

.button-hover-purple:hover {
    background: var(--purple);
    color: var(--white);
}

.button-white {
    background: var(--white);
    color: var(--black);
}

.button-black {
    background: var(--black);
    color: var(--white);
}

.button-purple {
    background: var(--purple);
    color: var(--white);
}

.button-purple:hover {
    background: transparent;
    color: var(--purple);
    box-shadow: 0 0 0 1px var(--purple);
}

.button-primary-border {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--primary);
}

.button-primary-border:hover {
    background: var(--primary);
    color: var(--black);
}

.text-no-wrap {
    white-space: nowrap;
}

.play-icon {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.play-icon svg {
    width: 15px; height: 15px;
    margin-right: 7.5px;
}

button.link-icon.end,
a.link-icon.end {
    display: flex;
    align-items: center;
}

button.link-icon.end svg,
a.link-icon.end svg {
    margin-left: 10px;
}

.download-btn {
    height: 55px;
    transition: var(--transition-400);
    object-fit: contain;
}

.download-btn:hover {
    scale: 1.1;
}

/* Change svg color on hover */
#linkIcon path {
    transition: stroke var(--transition-400);
}

.button-purple:hover #linkIcon path {
    stroke: var(--purple);
}

.button-transparent:hover #linkIcon path {
    stroke: var(--black);
}

.button-danger:not(:disabled):not(.loading):not(.no-hover):hover #linkIcon path {
    stroke: var(--red);
}

.border-button-white:hover #linkIcon path {
    stroke: var(--white);
}

#playIcon path {
    transition: stroke var(--transition-400);
}

.button-purple:hover #playIcon path {
    stroke: var(--purple);
}

.button-transparent:hover #playIcon path {
    stroke: var(--black);
}

.button-danger:not(:disabled):not(.loading):not(.no-hover):hover #playIcon path {
    stroke: var(--red);
}

.border-button-white:hover #playIcon path {
    stroke: var(--white);
}

.border-btn-wrapper {
    width: fit-content; height: fit-content;
    background: linear-gradient(90deg, #A050FE 0%, #01C2A0 100%);
    padding: 1px;
    border-radius: var(--borrad-normal);
}

.border-btn-wrapper button,
.border-btn-wrapper a {
    background: var(--black);
    border: none!important;
}

.border-btn-wrapper:has(button:disabled) {
    filter: brightness(.6);
}

.border-btn-wrapper button span,
.border-btn-wrapper a span {
    transition: .4s ease-in-out;
    background: transparent;
}
.border-btn-wrapper.danger {
    background: var(--red);
}
.border-btn-wrapper.transparent {
    background: transparent;
    border: 1px solid var(--white-50);
    transition: .4s ease-in-out;
}
.border-btn-wrapper.transparent:has(.border-button-white:hover) {
    border: 1px solid var(--white);
}
.border-btn-wrapper .button-transparent:hover {
    background: var(--black);
    color: var(--white);
}
.border-btn-wrapper .button-danger:not(:disabled):not(.loading):not(.no-hover):hover {
    background: var(--black)!important;
    color: var(--white);
}
.border-btn-wrapper .border-button-white:hover {
    /* background: var(--white)!important; */
    /* color: var(--black)!important; */
    border: 1px solid var(--white);
}

.border-btn-wrapper .button-transparent:hover span {
    background: -webkit-linear-gradient(0deg, #A050FE 0%, #01C2A0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.border-btn-wrapper .button-danger:not(:disabled):not(.loading):not(.no-hover):hover span {
    color: var(--red);
}
.border-btn-wrapper .border-button-white span {
    color: var(--white-50);
}
.border-btn-wrapper .border-button-white:hover span {
    color: var(--white);
}
/* End change svg color on hover */
/* End button */

/* Content block */
.content-block h5 {
    color: var(--white);
    font-family: var(--f-bebas);
    font-size: 30px;
}

.content-block h6 {
    color: var(--white);
    opacity: .5;
    font-family: var(--f-figtree);
    font-size: 16px;
}
/* End content block */

.clothing-banner h5 {
    color: var(--white);
    font-family: var(--f-figtree);
    font-size: 18px;
}

.clothing-banner h6 {
    color: var(--gray);
    font-family: var(--f-figtree);
    font-size: 14px;
    margin-bottom: 2px;
}
/* Banner */
.banner-container .banner {
    width: fit-content;
    background: linear-gradient(
            70.12deg, var(--white-t-10)
            24.42%, var(--white-t-0) 102.47%);
    margin-top: 10px; padding: 3% 5%;
    display: flex;
    align-items: center;
    filter: drop-shadow(2px 4px 30px var(--black-t-10));
    backdrop-filter: blur(35px);
    border-radius: var(--borrad-big);
    opacity: .3;
}

.banner-container .banner h2 {
    font-family: var(--f-primary);
    font-size: 20px; 
    font-weight: 700;
}

.banner-container .banner p {
    font-family: var(--f-primary);
    opacity: .8;
}

.banner-container .banner img {
    height: 30px;
}

.banner-container .banner.active {
    opacity: 1;
}
/* End banner */

/* Blur balls */
#blueBlur {
    width: 5%; aspect-ratio: 5/20;
    background: var(--purple);
    position: absolute;
    bottom: -20%;
    filter: blur(100px); transform: matrix(-0.14, -0.99, -0.99, 0.14, 0, 0);
    z-index: -1;
    opacity: .7;
}

#orangeBlur {
    position: absolute;
    right: -30%;
    z-index: -1;
}
/* End blur balls */

/* Video overlay */
.video-overlay {
    background: var(--black-t-80);
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    z-index: 100;
}

.scaleUp {
    animation: scaleUp 200ms ease-in-out forwards;
}

@keyframes scaleUp {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

.scaleDown {
    animation: scaleDown 300ms ease-in-out forwards;
}

@keyframes scaleDown {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

.fadeIn {
    animation: fadeIn 2.5s ease-in-out forwards;
}

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

.fadeOut {
    animation: fadeOut .5s ease-in-out forwards;
    opacity: 0;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.fromBottom {
    animation: fromBottom .75s ease-in-out forwards;
}

@keyframes fromBottom {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

#video-overlay {
    min-width: 100%!important; min-height: 100vh!important;
    position: fixed;
    top: 0; left: 100%;
    z-index: 10000;
    transition: var(--transition-700);
    opacity: 0;
}

#video-overlay video {
    z-index: 1000000;
}

#video-overlay.show {
    left: 0;
    opacity: 1;
}
/* End video overlay */

/* Image animations */
.pumpkin {
    width: 150px;
}

.pumpkin-toggle {
    position: fixed; 
    bottom:0; 
    z-index: 999; 
    padding: 10px 20px; 
    left: 90%;
}

#content .image {
    max-width: 100%; height: auto;
    background-repeat: no-repeat!important; background-size: contain!important; background-position: center!important;
}

#marketplace .image {
    max-width: 100%;
    height: auto;
    background-repeat: no-repeat!important; background-size: contain!important; background-position: center!important;
}

/* image 59 */
#content .image.i59 {
    width: 45%; height: 80%;
    background: url(/assets/shirt.png);
    position: absolute;
    top: 30%; left: 0;
    transform: rotate(-8.92deg);
    z-index: -1;
}

#marketplace .image.i59 {
    width: 31%; height: 80%;
    background: url(/assets/shirt.png);
    position: absolute;
    top: -25%; left: 5%;
    transform: rotate(-8.92deg);
    z-index: -1;
}

/* image 66 */
#content .image.i66 {
    width: 11%; height: 21%;
    background-image: url(/assets/shoes.png);
    position: absolute;
    top: 95%; right: 25%;
    filter: drop-shadow(0px 4px 30px var(--black-t-50));
    transform: rotate(11deg);
    z-index: -1;
}

#marketplace .image.i66 {
    width: 11%; height: 21%;
    background-image: url(/assets/shoes.png);
    position: absolute;
    top: 55%; right: 25%;
    filter: drop-shadow(0px 4px 30px var(--black-t-50));
    transform: rotate(11deg);
    z-index: -1;
}

/* image 65 */
#content .image.i65 {
    width: 20%; height: 40%;
    background-image: url(/assets/skirt.svg);
    position: absolute;
    top: 50%; right: 35%;
    filter: blur(5px);
    transform: rotate(9deg);
    z-index: -1;
}

#marketplace .image.i65 {
    width: 20%; height: 40%;
    background-image: url(/assets/skirt.svg);
    position: absolute;
    top: 50%; right: 35%;
    filter: blur(5px);
    transform: rotate(9deg);
    z-index: -1;
}

#content .image.i63 {
    width: 25%; height: 55%;
    background-image: url(/assets/pants.svg);
    position: absolute;
    top: 77%; right: 10%;
    transform: rotate(10deg);
    z-index: -1;
}

#marketplace .image.i63 {
    width: 25%; height: 55%;
    background-image: url(/assets/pants.svg);
    position: absolute;
    top: 77%; right: 10%;
    transform: rotate(10deg);
    z-index: -1;
}

/* image 58 */
#content .image.i58 {
    width: 15%; height: 30%;
    background: url(/assets/cool-glasses.png);
    position: absolute;
    top: 20%; right: 18%;
    transform: rotate(-15deg);
    z-index: -1;
}

/* image 58 */
#build .image.i58 {
    width: 25%; height: 25%;
    background: url(/assets/cool-glasses.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0%; left: 70%;
    transform: rotate(-20deg)!important;
    z-index: -1;
}

#marketplace .image.i58 {
    width: 15%; height: 30%;
    background: url(/assets/cool-glasses.png);
    position: absolute;
    top: 19%; right: 18%;
    transform: rotate(-15deg);
    z-index: 1;
}

/* image 43 */
#content .image.i43 {
    width: 15%; height: 25%;
    background-image: url(/assets/beanie.png);
    position: absolute;
    top: 95%; left: 5%;
    filter: blur(10px);
    transform: rotate(-12deg);
    z-index: -1;
}

#build .image.i43 {
    width: 35%; height: 35%;
    background-image: url(/assets/beanie.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 65%; left: 5%;
    filter: blur(10px);
    transform: rotate(-12.1deg);
    z-index: -1;
}

#marketplace .image.i43 {
    width: 15%; height: 25%;
    background-image: url(/assets/beanie.png);
    position: absolute;
    top: 65%; left: 5%;
    filter: blur(10px);
    transform: rotate(-12.1deg);
    z-index: -1;
}

.beanie {
    width: 20%;
    margin-left: -10%;
    margin-top: -10%;
    filter: blur(7px);
    transform: rotate(-12.1deg);
}
/* End image animations */

/* Face capture */
.text-gradient {
    background: linear-gradient(148.91deg, var(--white) 27.58%, var(--white-t-10) 81.19%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* End face capture */

/* Image preview */
.image-preview img.one {
    max-width: 20.5%;
}

.image-preview img.two {
    max-width: 50%;
    aspect-ratio: 16/9;
}

.image-preview img.three {
    max-width: 29.5%;
    aspect-ratio: 1/1;
}
/* End image preview */

/* Video */
.video-container {
    margin-top: 0%;
    margin-left: auto; 
    margin-right: auto;
    position: relative;
    display: flex;
    align-items: flex-end;
    border-radius: var(--borrad-big);
    overflow: hidden;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    transition-duration: 500ms; 
}

.video-container video {
    transition-duration: 500ms;
    border-radius: var(--borrad-big);
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    height: auto;
    border-radius: var(--borrad-big);
    transform: scale(1);
    transition-duration: 500ms;
}

.video-container:hover video {
    width: 100%;
}

#playBtn circle {
    transition: .2s ease-in-out;
}

#playBtn:hover circle {
    stroke: transparent; fill: var(--purple);
    opacity: 1;
}

.video-container:hover #playBtn circle {
    stroke: transparent; fill: var(--purple);
    opacity: 1;
}

.hl {
    width: 95%; height: 1px;
    border-top: 1px solid var(--white-10);
    opacity: .5;
}

/* Characters section */
.bg-image {
    width: 100vw; 
    height: auto;
    aspect-ratio: 16/9;
    background-image: url('/assets/whats-your-story.jpg');
    background-repeat: no-repeat; background-size: contain; background-position: bottom;
    display: flex; flex-direction: column;
    justify-content: end;
    position: relative;
    z-index: -1;
}

.bg-image .avatars {
    transform: translateX(-50%);
    z-index: -2;
    min-width: 370px;
}

.overlay-one, .overlay-two, .overlay-three {
    width: 100%;
    position: absolute;
    z-index: -1;
}

.overlay-two, .overlay-three {
    height: 30vh;
    background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
    transform: matrix(1, 0, 0, -1, 0, 0);
}

.overlay-one {
    height: 40vh;
    background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.9375) 13.02%, rgba(0, 0, 0, 0) 100%);
    top: 0;
}

.overlay-two {
    bottom: 0;
}

.overlay-three {
    bottom: -15vh;
}
/* End characters section */

/* Footer */
.footer {
    position: relative;
}

.footer a span {
    transition: var(--transition-400);
}

.footer a span:hover {
    opacity: 1;
}

.footer .hl {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
}
/* End footer */

.scrolling-text {
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.23, 0.36, 0.28, 0.83);
    will-change: transform;
    backface-visibility: hidden;
}

.scrolling-text .scrolling-text-content {
    color: var(--white);
    white-space: nowrap;
    transition: transform 0.5s cubic-bezier(0.23, 0.36, 0.28, 0.83);
    line-height: 1em;
    margin: 50px 0;
}

/* AI powered tools at your fingertips section */
.accordeon-no-animation{
    height: 1px;
    width: 50%;
    background: var(--gray);
    margin: 2rem 0;
    border-radius: 5px;
    display: flex;
    align-items: center;
    transition-duration: 300ms;
    opacity: 1;
}
.accordeon-no-progress{
    transition-duration: 300ms;
    height: 2px;
    /* background: var(--light-green); */
    background: var(--redo-blue-dark);
    border-radius: 1px;
    width: 12%;
}

/* End AI powered tools at your fingertips section */
.socialsIcon img {
    width: 90%;
}

.start-2 {
    left: 2%;
}

.start-10 {
    left: 10%;
}

.start-50 {
    left: 50%;
}

.translateX-min-50 {
    transform: translateX(-50%);
}

.end-2 {
    right: 2%;
}

.end-5 {
    right: 5%;
}

.end-10-percent {
    right: 10%;
}

.bottom-min-30 {
    bottom: -30%!important;
}

.translateY-min-50 {
    transform: translateY(-50%);
}

.of-contain {
    object-fit: contain;
}

.of-cover {
    object-fit: cover;
}

.op-left {
    object-position: left;
}

.op-right {
    object-position: right;
}

h1#my-text  {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.char {
    transform: translateY(255px);
    transition: transform .5s;
}
#primary .char {
    color: var(--primary);
}

.sticky-heading{
    position: sticky;
    top: 20%;
    margin-bottom: 40%;
}
.sticky-section-one{
    margin-bottom: 5%;
    position: sticky;
    top: 30%;
}

h1#hidden-two  {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.charTwo {
    transform: translateY(150px);
    transition: transform .5s;
}
#primary .charTwo {
    color: var(--primary);
}

#content .image.i67 {
    width: 100%; height: 50%;
    background: url(/assets/swoovemarket.svg);
    position: absolute;
    top: 40%; right: 5%;
    z-index: -1;
}

#content .image.i68 {
    width: 20%; height: 35%;
    background: url(/assets/swooveasset.svg);
    position: absolute;
    top: 60%; right: 30%;
    z-index: -1;
}

#content .image.i69 {
    width: 15%; height: 30%;
    background: url(/assets/swoovemessage.svg);
    position: absolute;
    top: 75%; right: 60%;
    z-index: -1;
}

.quote {
    color: var(--white);
    font-family: var(--f-gotham-book);
    font-size: 24px; font-weight: 300;
    line-height: 61px; font-style: normal;
    text-align: center;
}

.quoter {
    color: var(--white);
    font-family: var(--f-gotham-book);
    font-size: 20px; font-weight: 300;
    line-height: 61px; font-style: normal;
    text-align: center;
    opacity: 0.5;
}

.background-quote {
    background: linear-gradient(150deg, rgba(57, 63, 125, 0) 50%, #393F7D);
    width: 100%; height: 100%;
    position: absolute;
    bottom: 50%;
    z-index: -10;
}

.background-quote1 {
    background: linear-gradient(-150deg, #393F7D 0%, rgba(57, 63, 125, 0) 50%);
    width: 100%; height: 100%;
    position: absolute;
    top: 50%;
}

.linear-gradient-left-top {
    background: linear-gradient(147.58deg, #393F7D 0%, rgba(57, 63, 125, 0) 40%);
}

.linear-gradient-right-bottom {
    background: linear-gradient(320.58deg, #393F7D 0%, rgba(57, 63, 125, 0) 40%);
}

.blur-404 {
    background: linear-gradient(147.58deg, #393F7D 0%, rgba(57, 63, 125, 0) 40%);
}

.h-marketplace {
    top: 10%; left: 20%;
    width: fit-content;
    overflow: hidden;
}

.span-marketplace {
    position: unset;
}

.h-place {
    width: auto;
    top: 20%; left: 20%;
    overflow: hidden;
    line-height: 1;
}

.span-text {
    color: var(--white);
    font-family: 'Gotham-Bold', sans-serif;
    position: unset;
}

.h-shine {
    width: auto;
    top: 25%; left: 20%;
    overflow: hidden;
    line-height: 2;
}

.btn-market {
    position: absolute;
    top: 100%; left: 40%;
}

.quote-div {
    padding-top: 40vh;
}

.h-build {
    width: auto;
    top: 15%;
    left: 50%; transform: translateX(-50%);
    overflow: hidden;
    line-height: 1;
    --h1FontSize: calc(9.5 * var(--vw) * var(--fontSizeMultiplier));
}

.chimp-card {
    width: 28%;
    background: linear-gradient(70.12deg, rgba(255, 255, 255, 0.1) 24.42%, rgba(255, 255, 255, 0) 102.47%);
    display: flex;
    filter: drop-shadow(2px 4px 30px var(--black-t-10));
    backdrop-filter: blur(35px);
    border-radius: var(--borrad-big);
    position: absolute;
    left: 50%; transform: translateX(-50%);
    bottom: 0;
}

.mailchimp-btns-container-header {
    width: 100%;
}

.mailChimp-signUp {
    display: flex;
}

.mailChimp-signUp input, .ambassador-signUp input, .ambassador-signUp textarea,
.profile input {
    background: var(--black);
    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid var(--gray-50);
    border-radius: var(--borrad-normal);
    width: 100%;
}
.profile label {
    cursor: pointer;
}

.ambassador-signUp input[type="checkbox"],
.profile input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    padding: 3px;
    border-radius: 2px;
}

.mailChimp-signUp button {
    border-radius: var(--borrad-normal);
    width: 200px!important;
    height: auto;
    font-size: calc(var(--pButtonSize) * 1.1);
    letter-spacing: 1.2px;
    font-weight: 400;
    padding-top: .2rem!important;
}

.ambassador-signUp button {
    background: var(--purple);
    font-size: calc(var(--pButtonSize));
    padding: 8px 16px;
    border-radius: var(--borrad-normal);
    letter-spacing: 1.2px;
    font-weight: 400;
}

.chimp-p {
    font-size: 135%; font-style: normal;
}

.purple-gradient {
    position: absolute;
    width: 30%;
    height: 35%;
    left: 15%;
    top: 10%;
    background: #2C1179;
    filter: blur(121.476px);
    z-index: -20;
}

.green-gradient {
    position: absolute;
    width: 30%;
    height: 40%;
    left: 5%;
    top: 50%;

    background: #117966;
    filter: blur(121.476px);
    z-index: -20;
}

#purpleGradientOne.purple-gradient {
    position: absolute;
    width: 30%;
    height: 35%;
    left: 30%;
    top: 10%;

    background: #2C1179;
    opacity: 0.9;
    filter: blur(121.476px);
    z-index: -20;
}

#greenGradientOne.green-gradient {
    position: absolute;
    width: 30%;
    height: 40%;
    left: 30%;
    top: 50%;

    background: #117966;
    opacity: 0.7;
    filter: blur(121.476px);
    z-index: -20;
}

#purpleGradientTwo.purple-gradient {
    position: absolute;
    width: 30%;
    height: 35%;
    left: 50%;
    top: 40%;

    background: #2C1179;
    opacity: 1;
    filter: blur(121.476px);
    z-index: -20;
}

#greenGradientTwo.green-gradient {
    position: absolute;
    width: 30%;
    height: 40%;
    left: 25%;
    top: 40%;

    background: #117966;
    opacity: 1;
    filter: blur(121.476px);
    z-index: -20;
}

/* Sharing section on mobile app page and positions section of about us page */

#purpleGradientThree.purple-gradient {
    position: absolute;
    width: 30%;
    height: 35%;
    left: 20%;
    top: 30%;

    background: #2C1179;
    opacity: 0.9;
    filter: blur(121.476px);
    z-index: -20;
}

#greenGradientThree.green-gradient {
    position: absolute;
    width: 30%;
    height: 40%;
    left: 45%;
    top: 30%;

    background: #117966;
    opacity: 0.9;
    filter: blur(121.476px);
    z-index: -20;
}



/* End of sharing section on mobile app page and positions section of about us page */

.about-vision p {
    font-size: 32px;
    font-weight: 100;
    margin-bottom: 3rem;

}

.about-vision span {
    font-size: var(--pFontSize);
}

#purpleGradientFour.purple-gradient {
    position: absolute;
    width: 30%;
    height: 35%;
    left: 20%;
    top: 20%;

    background: #2C1179;
    opacity: 0.7;
    filter: blur(121.476px);
    z-index: -20;
}

#greenGradientFour.green-gradient {
    position: absolute;
    width: 30%;
    height: 40%;
    left: 40%;
    top: 20%;

    background: #117966;
    opacity: 0.7;
    filter: blur(121.476px);
    z-index: -20;
}

#purpleGradientFive.purple-gradient {
    position: absolute;
    width: 30%;
    height: 35%;
    left: 50%;
    top: 30%;

    background: #2C1179;
    opacity: 0.5;
    filter: blur(121.476px);
    z-index: -20;
}

#greenGradientFive.green-gradient {
    position: absolute;
    width: 30%;
    height: 40%;
    left: 65%;
    top: 30%;

    background: #117966;
    opacity: 0.5;
    filter: blur(121.476px);
    z-index: -20;
}

#purpleGradientSix.purple-gradient {
    position: absolute;
    width: 30%;
    height: 35%;
    left: 60%;
    top: -10%;

    background: #2C1179;
    opacity: 0.5;
    filter: blur(121.476px);
    z-index: -20;
}

#greenGradientSix.green-gradient {
    position: absolute;
    width: 30%;
    height: 40%;
    left: 60%;
    top: 60%;

    background: #117966;
    opacity: 0.5;
    filter: blur(121.476px);
    z-index: -20;
}

#iconsMovie .purple-gradient {
    position: absolute;
    width: 15%;
    height: 7%;
    left: 67%;
    top: 52%;

    background: #2C1179;
    opacity: 0.45;
    filter: blur(121.476px);
    z-index: -20;
}

#iconsMovie .green-gradient {
    position: absolute;
    width: 15%;
    height: 7%;
    left: 55%;
    top: 53%;

    background: #117966;
    opacity: 0.4;
    filter: blur(121.476px);
    z-index: -20;
}

.music-card {
    position: absolute;
    width: 15%;
    min-width: 80px;
    aspect-ratio: 9/14;
    left: 68%;
    top: 0%;

    background: linear-gradient(70.12deg, rgba(255, 255, 255, 0.1) 24.42%, rgba(255, 255, 255, 0) 102.47%);
    filter: drop-shadow(1.45917px 2.91834px 21.8876px rgba(0, 0, 0, 0.1));
    backdrop-filter: blur(25.5355px);

    border-radius: var(--borrad-big);
    transform: rotate(15.92deg);
    opacity: 0;
}

#iconsMovie .music-card {
    width: 125px;
    aspect-ratio: 9/14;
    left: 68%;
    top: 8%;
    z-index: -10;
}

.clothing-card {
    position: absolute;
    width: 20%;
    min-width: 80px;
    height: 50%;
    left: 25%;
    top: -13%;

    background: linear-gradient(70.12deg, rgba(255, 255, 255, 0.1) 24.42%, rgba(255, 255, 255, 0) 102.47%);
    filter: drop-shadow(1.45917px 2.91834px 21.8876px rgba(0, 0, 0, 0.1));
    backdrop-filter: blur(25.5355px);

    border-radius: var(--borrad-big);
    opacity: 0;
}

.sound-card {
    position: absolute;
    width: 15%;
    min-width: 80px;
    aspect-ratio: 9/14;
    top: 10%;

    background: linear-gradient(70.12deg, rgba(255, 255, 255, 0.1) 24.42%, rgba(255, 255, 255, 0) 102.47%);
    filter: drop-shadow(1.45917px 2.91834px 21.8876px rgba(0, 0, 0, 0.1));
    backdrop-filter: blur(25.5355px);

    border-radius: var(--borrad-big);
    transform: rotate(15.92deg);
    opacity: 0;
}

#iconsMovie .sound-card {
    width: 125px;
    aspect-ratio: 9/14;
    left: 58%;
    top: 8%;
    z-index: -10;
}
.explosion-card {
    position: absolute;
    width: 15%;
    min-width: 90px;
    aspect-ratio: 9/14;
    left: 8%;
    top: 75%;

    background: linear-gradient(70.12deg, rgba(255, 255, 255, 0.1) 24.42%, rgba(255, 255, 255, 0) 102.47%);
    filter: drop-shadow(1.45917px 2.91834px 21.8876px rgba(0, 0, 0, 0.1));
    backdrop-filter: blur(25.5355px);
    /* Note: backdrop-filter has minimal browser support */

    border-radius: var(--borrad-big);
    transform: rotate(-2.24deg);
    z-index: -1;
    opacity: 0;
}

#iconsMovie .explosion-card {
    width: 125px;
    aspect-ratio: 9/14;
    left: 63%;
    top: 8%;
}


.head-card {
    position: absolute;
    width: 15%;
    min-width: 80px;
    height: 40%;
    left: 50%;
    top: 70%;

    background: linear-gradient(70.12deg, rgba(255, 255, 255, 0.1) 24.42%, rgba(255, 255, 255, 0) 102.47%);
    filter: drop-shadow(1.45917px 2.91834px 21.8876px rgba(0, 0, 0, 0.1));
    backdrop-filter: blur(25.5355px);

    border-radius: var(--borrad-big);
    transform: rotate(4.38deg);
    z-index: -1;
    opacity: 0;
}

.dude-static {
    background: url(/assets/dudestatic.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.about-card {
    width: 80%;
    background: linear-gradient(70.12deg, rgba(255, 255, 255, 0.1) 24.42%, rgba(255, 255, 255, 0) 102.47%);
    padding: 1rem .75rem;
    filter: drop-shadow(2px 4px 30px rgba(0, 0, 0, 0.1));
    backdrop-filter: blur(35px);
    border-radius: var(--borrad-big);
}

#meet .cards {
    gap: 500px;
    height: 33vw;
    justify-content: space-between;
}

#meet .meet-image {
    width: 42%!important;
    top: 11vw;
}

#imageToChange {
    border-radius: var(--borrad-big);
}

.position-btn {
    padding: 8px 20px;
    background: var(--purple);
    color: var(--white);
    width: fit-content;
    border-radius: 3rem;
    font-size: 18px;
    font-weight: bold;
}

.position-btn:hover {
    background: var(--white);
    color: black;
}

.min-ms {
    margin-left: -10rem;
}

.swoove-link:hover {
    opacity: 0.5;
}

.ob-fit {
    object-fit: contain;
}

.jacket {
    position: absolute;
    margin-left: -25%;
    z-index: 1;
}
.jacket-two {
    position: absolute;
    margin-left: 25%;
    z-index: 1;
}

.privacy-policy-container {
    min-height: 100vh;
    max-width: 1000px;
    margin: 0 auto;
    padding: 10% 3% 5% 3%;
    color: white;
    position: relative;
    z-index: 1;
}

.privacy-policy-container .title {
    margin: 0 0 20px 0;
}

.date {
    font-weight: 300!important;
    font-size: 17px;
    font-style: italic;
    margin: 20px 0;
}

.subtitle {
    font-size: 17px;
    font-weight: bolder;
    margin: 20px 0 10px 0;
}

.privacy-policy-text .subtitle {
    font-size: 24px;
}

.privacy-policy-container .paragraph {
    margin: 10px 0;
}

.privacy-policy-container .paragraph, .privacy-policy-container ul li {
    font-size: 17px;
    line-height: 1.8em;
}

.privacy-policy-container span {
    font-weight: bolder;
}

.btn-purple {
    padding: 1rem;
    font-size: 1.3rem;
    font-weight: 700;
}

.btn-purple-share {
    padding: 1.5% 2%;
    font-size: 1.3rem;
    font-weight: 700;
}



/* Homepage styles */

.home-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin: auto 0;
}

.download-btns-container-header {
    margin-top: 2%;
}
.download-btns-container-footer {
    margin-top: 0%;
}


.character-cards{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}
.character-cards-content {
    position: relative;
    width: 60%;
    transform:translateX(-10px);
}
.card-options{
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    /* border: 1px solid white; */
}
.left-card-options {
    left: -30%;
}
.right-card-options{
    right: -30%;
}
.options-inner{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5%;
}
.card-option{
    transition-duration: 300ms;
    width: 65%;
    position: relative;
    padding: 2px;
}

.card-option-border {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: var(--borrad-normal);
}

.card-option-border .border, .card-option-border .blur {
    transition-duration: 300ms;
    border: none!important;
    opacity: 0;
}

.card-option.active-card .card-option-border .border {
    opacity: 1;
    position: absolute;
    width: 100%;
    height: 100%;

    border-radius: var(--borrad-normal);
    border: none!important;
    background: var(--funcky-gradient);
}
.card-option.active-card .card-option-border .blur {
    opacity: 1;
    position: absolute;
    width: 100%;
    height: 100%;

    border-radius: var(--borrad-normal);
    border: none!important;
    background: var(--funcky-gradient);
    filter: blur(18px);
}
.card-option-image {
    width: 100%;
    position: relative;
    cursor: pointer;
}
.card-option-image img {
    border-radius: var(--borrad-normal);
    transition: var(--transition-400);
}
.card-option-image img:hover {
    transform: scale(1.1);
}
.accordeon-item:hover, .accordeon-item:hover * {
    opacity: 1!important;
}

.character-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.character-text-heading h2{
    /* line-height: 6.5vw; */
    margin-bottom: initial;
    max-width: 100%;
}
.character-text-paragraph p{
    max-width: 100%;
}

    
.skew-box {
    transform: skew(-15deg);
    width: fit-content;
    padding: 0.50rem 0.75rem;
    background: var(--green);
}

.skew-box p,
.skew-box a {
    display: block;
    padding: 4px 4px;
    font: 20px/1 sans-serif;
    font-weight: 700;
    transform: skew(15deg);
    color: var(--black);
    text-transform: uppercase;
}


.skew-box.green {
    background: var(--green);
}
.skew-box.green p,
.skew-box.green a {
    color: var(--black);
}

.skew-box.purple {
    background: var(--purple);
}
.skew-box.purple p,
.skew-box.purple a {
    color: var(--white);
}

.skew-box.black {
    background: var(--black);
}
.skew-box.black p,
.skew-box.black a {
    color: var(--white);
}

@media(min-width: 768px) {
    .character-text {
        align-items: start;
    }
    /* .character-text-paragraph p{
        max-width: 50%;
    } */


    .home-redo-inner h1, .home-redo-inner h2, h1 > .line, h2 > .line {
        text-align: left!important;
    }
}


/* Image animations */
.fadeInImage {
    opacity: 0;
    animation: fadeInImage 0.3s ease-in-out forwards;
}

@keyframes fadeInImage {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.fadeOutImage {
    opacity: 1;
    animation: fadeOutImage 0.3s ease-in-out forwards;
}

@keyframes fadeOutImage {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Video animations */
.fadeInVideo {
    opacity: 0;
    animation: fadeInVideo 0.5s ease-in-out forwards;
}

@keyframes fadeInVideo {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.fadeOutVideo {
    opacity: 1;
    animation: fadeOutVideo 0.5s ease-in-out forwards;
}

@keyframes fadeOutVideo {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.top-block {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.accordeon-item {
    width: 100%;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
}

.accordeon-heading{
    transition-duration: 600ms;
}
.accordeon-text{
    transition-duration: 600ms;
}

.accordeon-progress-wrapper{
    height: 3px;
    width: 100%;
    background: var(--gray);
    margin: 2rem 0;
    border-radius: 5px;
    display: flex;
    align-items: center;
    transition-duration: 300ms;
}
.accordeon-progress{
    transition-duration: 450ms;
    height: 3px;
    background: var(--green);
    border-radius: 1px;
    width: 0%;
}

.accordeon-item:not(.active) .accordeon-progress-wrapper{
    opacity: 0.5;
}
.accordeon-item.active .accordeon-progress-wrapper{
    opacity: 1;
}
.accordeon-item:not(.active) .accordeon-heading{
    opacity: 0.5;
}
.accordeon-item.active .accordeon-heading{
    opacity: 1;
}
.accordeon-item:not(.active) .accordeon-text{
    height: 0;
    margin: 0;
    overflow: hidden;
}
.accordeon-item.active .accordeon-text{
    height: fit-content;
    margin: 1rem 0;
    overflow: hidden;
}

.accordeon-heading h2 {
    color: white;
    /* font-weight: bold; */
}
.accordeon-text p {
    color: white;

}

.home-section .download-btns-container-header {
    margin-top: 1%;
    margin-left: 5.2%!important;
    position: absolute;
    z-index: 9;
}

.home-title {
    margin-bottom: -13.8vw;
}
.home-title h1 {
    line-height: 1;
}
.svg-animate-img {
    margin-left: 1rem;
}



@media (min-width: 1201px) {
}

@media (max-width: 1279px) {
    .links-container {
        flex-direction: column-reverse;
    }
    .links-container .footer-socials {
        margin-bottom: 16px;
    }
    .links-container a span {
        margin-left: 0!important;
        margin-right: 0!important;
    }
}

@media (max-width: 1200px) {
    .accordeon-heading h2 {
        font-size: 2.8vw;
        line-height: 2.4vw;
    }

}



@media (max-width: 1023px) {
    .lg-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .accordeon-heading h2 {
        font-size: 3.2vw;
        line-height: 3vw;
    }
    .characters-content {
        margin-bottom: -3rem;
    }
    .home-title {
        margin-bottom: -11.5%;
    }
    .mobile-socials {
        margin-top:-8.5%;
        margin-left: auto!important;
        margin-right: auto;
    }
    .accordeon-item, .accordeon-heading {
        width: 80%;
        margin-left: 0;
        margin-right: auto;
    }
    section .container {
        width: 90%;
    }
    .header .container, .footer-container {
        max-width: 90%;
        width: 90%;
    }
    .footer-container a.menu-link {
        text-align: center;
        margin: auto;
        padding-bottom: 8px;
        justify-content: center;
        align-items: center;
    }
    .menu-link {
        padding-left: var(--marpadSmall);
        padding-right: var(--marpadSmall);
    }
    .svg-animate-img {
        margin-left: 0;
    }
} 

@media (max-width: 768px) {
    :root {
        --h1FontSize: 10vw;
        --h5FontSize: 3vw;
    }

    .md-mnh-50vh {
        min-height: 50vh;
    }

    .md-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    .md-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md-text-center {
        text-align: center;
    }
    .md-text-start {
        text-align: start!important;
    }
    .md-text-end {
        text-align: end;
    }
    .characters-section .bg-image {
        background-size: 130%;
    }
    .about-vision p {
        font-size: 20px;
    }
    .home-title {
        margin-bottom: -18.2vw;
    }
    .mobile-socials {
        margin-top:-10%;
        margin-left: auto!important;
        margin-right: auto;
    }
    section .container {
        width: 100%;
    }

    .home-title {
        margin-bottom: -14%;
    }
    .video-container {
        height: 30vh;
    }
    .video-container video {
        height: 100%;
        object-fit: cover;
    }
    .accordeon-item, .accordeon-heading {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .footer .footer-socials {
        margin-left: auto;
        margin-right: auto;
    }
    .footer img {
        width: 20px!important;
    }
    

}



@media (max-width: 576px) {
    :root {
        --h5FontSize: 4vw;
    }

    /* .accordeon-heading h2 {
        font-size: 3.5vw;
        line-height: 3vw;
    }     */
    .characters-section .bg-image {
        background-size: 160%;
    }
    .characters-content {
        /* margin-bottom: calc(10vw - 15vh);
         */
         margin-bottom: -100px;
    }
    .home-title {
        margin-bottom: -6.9em;
    }
    .header .container, .footer-container {
        max-width: 100%;
        width: 100%;
    }
    .video-container {
        height: 30vh;
    }
    .characters-content {
        padding-left: 8px;
        padding-right: 8px;
    }
    .video-container video {
        height: 100%;
        object-fit: cover;
    }
    h2 {
        font-size: 40px;
    }
    h3 {
        font-size: 50px;
    }

    .pumpkin{
        width: 100px;
    }
    .pumpkin-marge{
        left: 65%!important;
    }
}

.top-block.enabled-margin {
    margin-bottom: 60vh;
}

.block-wrapper {
    width: 100%;
    position: sticky;
    top: 40vh;
    height: auto;
}

.block-wrapper.wrapper-1 {
    margin-top: -5vh;
    top: 100vh;
    transition-duration: 500ms;
}
@media(min-width: 768px) {
    .block-wrapper.wrapper-1 {
        margin-top: -10vh;
    }
}
.block-wrapper.wrapper-1.active {
    top: 40vh;
}
.block-wrapper.wrapper-1.done {
    top: -60vh;
}

.iphone-block {
    transition-duration: 300ms;
}

.wrapper-1 .iphone-block {
    transform: translateY(60dvh);
    opacity: 0;
}
.wrapper-1 .iphone-block.active {
    transform: translateY(-50dvh);
    opacity: 1;
}
.wrapper-1 .iphone-block.done {
    transform: translateY(-60dvh);
    opacity: 0;
}

#features .right-block-inner video {
    border-radius: var(--borrad-normal);
}

.block-wrapper-inner{
    width: 100%;
    display: flex;
    position: relative;
    height: 60vh;
}

.left-block {
    width: 50%;
    position: relative;
    display: flex;
}
.left-block-inner {
    transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 50%;
    height: fit-content;
    margin: auto;
    transform: translate(0%, -50%);
}
.left-block-inner.active{
    top: -100%;
}
.wrapper-1 .left-block-inner.active .card-1 {
    opacity: 0;
}
.wrapper-1 .left-block-inner.done .card-2 {
    opacity: 0;
}
.right-block {
    width: 50%;
    position: relative;
}
.right-block-inner {
    height: 100%;
    width: 100%;
    min-height: 450px;
    display: flex;
}

.canvas-wrapper {
    height: 580px;
    aspect-ratio: 9/10;
    background: transparent;
    z-index: 9999;
    margin-right: auto;
    margin-top: -4vh;
    max-width: 100%;
}
.canvas {
    width: 450px;
    aspect-ratio: 9/10;
    touch-action: none;
    pointer-events: none;
    user-select: none;
    max-width: 100%;
}

.card-container {
    background: url('/assets/background-blur-cards-home.png');
    background-repeat: no-repeat;
    background-size: 70%;
}

.card-container-inner {
    max-width: 600px;
    margin: auto;
    transition-duration: var(--transition-400);
}
.card {
    --_card-witdh: 30%;
    aspect-ratio: 17/20;
    padding: 20px;
    align-items: center;
    width: var(--_card-witdh);
    border-radius: var(--borrad-big);
}
.card .image {
    height: 80%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 100%;
}
.card .card-text {
    width: 100%;
    text-align: center;
    padding-top: 3%;
    font-weight: 600;
}

.card#clothing .card-text {
    transform: scale(1.2);
    padding-bottom: 2%;
}

.card#clothing{
    width: calc(var(--_card-witdh) * 1.5);
    z-index: 2;
}

.card#clothing .image {
    background-image: url(/assets/dress.png);
}

.card#music, .card#sound {
    width: calc(var(--_card-witdh) * 0.8);
    transform: rotate(16deg);
}

.card#music {
    --_left-margin: 5%;
    margin-top: -20%;
    margin-left: calc(var(--_left-margin) * -1);
    margin-right: var(--_left-margin);
}

.card#sound .image{
    transform: scale(1.1);
    background-image: url(/assets/sound.png);
    transform: rotate(-15deg);
}

.card#music .image {
    background-image: url(/assets/music.png);
    transform: rotate(-15deg);
}

.card#explosion {
    transform: rotate(-2deg);
    margin-top: -3%; 
}

.card#explosion .image {
    transform: scale(0.8);
    background-image: url(/assets/magic-wand.png);
}

.card#head {
    transform: rotate(4deg);
    margin-top: -17%; 
}
.card#head .image {
    background-image: url(/assets/head.png);
}

.first-row {
    position: relative;
    z-index: 2;
}
.header-section {
    margin-top: 0px;
    padding-top: 143px;
}

@media (max-width: 1200px) {
    section > .row > div, section > .container > .row > div:not(.clothing-cards) {
        padding-bottom: 2rem;
    }
}

@media (min-width: 1201px) {
    section > .row > div, section > .container > .row > div:not(.clothing-cards) {
        padding-bottom: 6rem;
    }
}

.bg-skirt {
    background-image: url('/assets/bg-skirt.png');
    background-repeat: no-repeat;
    width: auto; 
    height: 100%;
    position: absolute;
    top: 65%; left: 5%;
    filter: blur(10px);
    transform: rotate(-18.1deg);
    z-index: -1; 
}

.newsletter-card-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.newsletter-card{
    flex: 1;
    border-radius: var(--borrad-big);
}

.newsletter-card-mobile {
    margin-bottom: -18%;
}

.newsletter-inner-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    border-radius: var(--borrad-big);
    padding: 3px;
    background: var(--funcky-gradient);
}
.newsletter-inner{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    border-radius: var(--borrad-big);
    padding: 0px var(--marpadBig);
    background: var(--black-gradient);
    align-items: end;
    flex-direction: column;
}

.newsletter-inner-border .border {
    position: absolute;
    width: 100%;
    height: 100%;

    border-radius: var(--borrad-normal);
    border: none!important;
    background: var(--funcky-gradient);
}
.newsletter-left{
    display: flex;
    flex-direction: column;
    gap: var(--marpadSmall);
    margin: var(--marpadBig) 0px;
    flex: 1;
}
.newsletter-left > p{
    max-width: 330px;
}
.newsletter-form{
    display: flex;
}
.newsletter-right{
    min-height: fit-content;
    display: flex;
    justify-content: center;
    align-items: end;
}

#purpleGradientTen {
    width: 31%; height: 62%;
    top: 0%; left: 50%;
}

#greenGradientTen {
    height: 64%;
    top: 36%; left: 20%;
}

#purpleGradientEleven {
    width: 31%; height: 50%;
    top: 0%; left: 45%;
}

#greenGradientEleven {
    width: 20%; height: 40%;
    bottom: 0%; left: 25%;
}

#purpleGradientTwelve {
    width: 31%; height: 50%;
    top: unset;
    bottom: 0%; left: 35%;
}

#greenGradientTwelve {
    width: 20%; height: 40%;
    top: 30%; left: 10%;
}

@media(min-width: 768px) {
    .newsletter-inner{
        flex-direction: row;
    }
    .newsletter-left {
        margin: auto;
    }
    .newsletter-right {
        max-height: 350px;
    }

    
}





/* Mediaqueries */
@media (min-width: 1999px) {
    .about-header h1 {
        font-size: 130pt;
        line-height: 1;
    }
}

@media (max-width: 1200px) {
    /* Global classes */
    /* Responsiveness */
    .xl-d-none {
        display: none!important;
    }
    .xl-d-block {
        display: block!important;
    }

    #meet .cards {
        gap: 20px;
        height: fit-content;
        justify-content: space-between;
    }

    #meet .meet-image {
        width: 50vw;
    }

    #meet .about-card {
        width: 100%;
    }
    
    .mailchimp-btns-container-header {
        width: 60%;
    }
    
    /* End responsiveness */
    /* End global classes */

    /* Footer */
    .footer a span {
        font-size: 14px;
    }
    /* End footer */


    section > .row > div {
        padding-bottom: 3rem;
    }

    :root {
        --fontSizeMultiplier: 1;
        --marpadMultiplier: 1;
    }
}

@media (max-width: 992px) {

    :root {
        --fontSizeMultiplier: 1.25;
        --marpadMultiplier: 1.5;
    }

    /* Global classes */
    h4, .h4 {
        font-size: 18pt;
    }

    /* Responsiveness */
    .lg-mt-min10vh {
        margin-top: -10vh!important;
    }
    .lg-mt-20 {
        margin-top: 20rem!important;
    }
    .lg-d-none {
        display: none!important;
    }
    .lg-w-60 {
        width: 60%!important;
    }
    .lg-top-30 {
        top: 30%!important;
    }
    .lg-mb-10 {
        margin-bottom: 10rem!important;
    }
    .lg-pb-5 {
        padding-bottom: 3rem!important;
    }
    /* End responsiveness */

    #meet .meet-image {
        top: 13vw;
    }

    .mailchimp-btns-container-header {
        width: 70%;
    }

    #greenGradientTen {
        width: 50%;
        left: 0%;
        filter: blur(81.476px);
    }
    #purpleGradientTen {
        width: 50%;
        left: 50%;
        filter: blur(81.476px);
    }

  



    /* End global classes */


    
    
    /* Header */
    .header svg#logo {
        width: 100px;
    }
    
    .header .h5 {
        font-size: .85rem;
    }
    
    .header a.mx-4 {
        margin-left: 1rem!important; margin-right: 1rem!important;
    }

    /* .header-section {
        height: 63vh;
    } */
    /* End header */

    /* Banners */
    .banner-container .banner h2 {
        font-size: 16px;
    }

    .banner-container .banner p {
        font-size: .8rem;
    }
    /* End banners */


    /* Footer */
    .footer > div {
        align-items: center!important;
    }

    .links-container {
        flex-direction: column-reverse;
        margin-top: auto;
        margin-bottom: auto;
    }
    /* End footer */
}

@media(max-width: 768px) {
    :root {
        --fontSizeMultiplier: 1.5;
        --marpadMultiplier: 2;
    }

    #content .image.i67 {
        top: 40%!important; right: 0!important;
    }

    #content .image.i68 {
        top: 65%!important; right: 7%!important;
    }
    
    #iconsMovie .sound-card{
        width: 12%!important;
        top: -35%!important;
        left: 56%!important;
    }

    #iconsMovie .explosion-card {
        width: 12%!important;
        top: -35%!important;
        left: 68%!important;
    }

    #iconsMovie .music-card{
        width: 12%!important;
        top: -35%!important;
        left: 80%!important;
    }

    #socialsIcon img {
        width: 50px!important;
        height: 50px!important;
    }

    /* Global classes */
    button {
        font-size: var(--pButtonSize);
    }
    p:not(.no-p-style), a:not(.menu-link):not(.no-a-style) {
        font-size: var(--pFontSize);
    }

    .video-section h1 {
        font-size: 40px;
        line-height: 40px;
    }

    .newsletter-left h3, .newsletter-left h2 {
        text-align: center;
    }

    .mailchimp-btns-container-header {
        width: 100%;
        font-size: var(--h1FontSize);
    }

    .download-btn {
        height: 40px;
    }

    /* .video-container {
        margin-top: -7.5vh;
    } */

    /* Responsiveness */
    .socialsIcon {
        width: 40px;
        height: 40px;
    }

    p {
        text-align: center;
    }

    .toggle-download-popup,
    .border-btn-wrapper {
        margin-left: auto;
        margin-right: auto;
    }

    .animate-your-story .left p{
        margin: 0px auto!important;
    }

    .home-redo-inner h1, .home-redo-inner h2, h1 > .line, h2 > .line {
        text-align: center!important;
    }

    .team-image-wrapper {
        display: flex;
        gap: 4%;
        width: 100%;
    }

    .team-image-wrapper img {
        margin: 0%!important;
        padding: 0px;
        width: 48%!important;
    }


    /* Margins */
    .md-m-0 {
        margin: 0!important;
    }
    .md-ms-0 {
        margin-left: 0!important;
    }
    .md-ms-1 {
        margin-left: 1rem!important;
    }
    .md-ms-2 {
        margin-left: 2rem!important;
    }
    .md-ms-3 {
        margin-left: 3rem!important;
    }
    .md-ms-4 {
        margin-left: 4rem!important;
    }
    .md-ms-5 {
        margin-left: 3rem!important;
    }
    .md-ms-6 {
        margin-left: 6rem!important;
    }
    .md-ms-7 {
        margin-left: 7rem!important;
    }
    .md-ms-5rem {
        margin-left: 5rem!important;
    }
    .md-ms-auto {
        margin-left: auto!important;
    }
    .md-me-auto {
        margin-right: auto!important;
    }
    .md-mt-100-percent {
        margin-top: 100%!important;
    }
    .md-mt-min5vh {
        margin-top: -5vh!important;
    }
    .md-mt-min10vh {
        margin-top: -10vh!important;
    }
    .md-mt-0 {
        margin-top: 0!important;
    }
    .md-mt-30 {
        margin-top: 30rem!important;
    }
    .md-mb-3 {
        margin-bottom: 1rem!important;
    }
    .md-mb-4 {
        margin-bottom: 2rem!important;
    }
    .md-mb-5 {
        margin-bottom: 3rem!important;
    }
    .md-mb-7 {
        margin-bottom: 7rem!important;
    }
    /* End margins */
    .md-d-none {
        display: none!important;
    }
    .md-d-flex {
        display: flex!important;
    }
    .md-d-block {
        display: block!important;
    }
    .md-align-items-center {
        align-items: center!important;
    }
    .md-justify-content-center {
        justify-content: center!important;
    }
    .md-justify-content-between {
        justify-content: space-between!important;
    }
    .md-flex-column {
        flex-direction: column!important;
    }
    .md-flex-column-reverse {
        flex-direction: column-reverse!important;
    }
    .md-gap-0 {
        gap: 0!important;
    }
    .md-gap-2 {
        gap: .5rem!important;
    }
    .md-gap-3 {
        gap: 1rem!important;
    }
    .md-text-center {
        text-align: center!important;
    }
    .md-w-fc {
        width: fit-content!important;
    }
    .md-mnw-100 {
        min-width: 100%!important;
    }
    .md-w-40 {
        width: 40%!important;
    }

    .md-w-45 {
        width: 45%!important;
    }

    .md-w-50 {
        width: 50%!important;
    }
    .md-w-55 {
        width: 55%!important;
    }

    .md-w-60 {
        width: 60%!important;
    }
    .md-w-70 {
        width: 70%!important;
    }
    .md-w-75 {
        width: 75%!important;
    }
    .md-w-80 {
        width: 80%!important;
    }
    .md-w-90 {
        width: 90%!important;
    }
    .md-w-100 {
        width: 100%!important;
    }
    .md-h-50vh {
        height: 50vh!important;
    }
    .md-h-100 {
        height: 100%!important;
    }

    .md-pt-15 {
        padding-top: 15vh!important;
    }

    .md-fs-20 {
        font-size: 20px!important;
    }

    .md-pb-0 {
        padding-bottom: 0!important;
    }

    .md-pb-1 {
        padding-bottom: 1rem!important;
    }

    .md-pb-2 {
        padding-bottom: 2rem!important;
    }

    .md-pb-3 {
        padding-bottom: 3rem!important;
    }

    .md-pb-4 {
        padding-bottom: 4rem!important;
    }

    .md-pb-5 {
        padding-bottom: 5rem!important;
    }

    .md-b-min30 {
        bottom: -30%!important;
    }

    .md-px-1 {
        padding-left: 1rem!important;
        padding-right: 1rem!important;
    }

    .md-px-2 {
        padding-left: 2rem!important;
        padding-right: 2rem!important;
    }

    .md-px-3 {
        padding-left: 3rem!important;
        padding-right: 3rem!important;
    }

    .md-px-4 {
        padding-left: 4rem!important;
        padding-right: 4rem!important;
    }

    .md-px-5 {
        padding-left: 5rem!important;
        padding-right: 5rem!important;
    }

    .md-py-1 {
        padding-top: 1rem!important;
        padding-bottom: 1rem!important;
    }

    .md-py-2 {
        padding-top: 2rem!important;
        padding-bottom: 2rem!important;
    }

    .md-py-3 {
        padding-top: 3rem!important;
        padding-bottom: 3rem!important;
    }

    .md-py-4 {
        padding-top: 4rem!important;
        padding-bottom: 4rem!important;
    }

    .md-pb-10px {
        padding-bottom: 10px!important;
    }

    .md-top-0 {
        top: 0!important;
    }

    .md-me-25-percent {
        margin-right: 25%!important;
    }

    .md-ms-20-percent {
        margin-left: 20%!important;
    }

    /* .md-min-20-percent {
        margin-top: -20%!important;
    } */

    /* End responsiveness */
    .section-spacing {
        padding-top: 5vh;
    }
    .section-spacing-bottom {
        padding-bottom: 5vh;
    }
    /* End global classes */

    /* Header */
    .header svg#logo {
        width: 125px;
    }
    /* .header-section {
        height: 50vh;
    } */

    /* End header */

    .content-block .mnh-250px {
        min-height: 250px;
    }

    .clothing-banner .mnh-250px {
        min-height: 250px;
    }

    /* Video */
    .video-container button {
        margin-bottom: 30px!important;
    }
    /* End video */

    /* Download btns */
    .download-btns-container img {
        scale: .9;
        object-fit: contain;
    }
    /* End download btns */

    /* Footer */
    .footer > div {
        flex-direction: column;
        text-align: center;
    }
    
    .mobile-nav-links {
        margin-bottom: 8px;
    }

    .footer-logo-container {
        margin-bottom: 1rem!important;
    }

    .footer img {
        margin-bottom: 1.5rem;
    }

    .links-container {
        flex-direction: column-reverse;
    }
    /* End footer */

    .privacy-policy-container {
        padding-top: 20%;
    }
    
    .skew-box p,
    .skew-box a {
        font-size: 16px;
    }

    .block-wrapper.wrapper-1 .block-wrapper-inner {
        margin-top: 0;
        flex-direction: column;
    }

    .left-block-inner {
        display: grid;
        grid-template-columns: 33% 33% 33%;
        grid-template-rows: 70% 30%;
        grid-auto-flow: row;
        margin-top: 3rem;
    }

    .top-block.mobile {
        width: 100%;
    }
    .top-block.mobile h2 {
        text-align: center!important;
    }

    .accordeon-item.text {
        grid-column: 1 / 4;
        grid-row: 1;
        pointer-events: none;
        margin-top: 8px;
    }

    .accordeon-item.loader {
        width: 95%;
    }

    .accordeon-item.text .accordeon-heading {
        text-align: center;
    }

    .block-wrapper-inner {
        height: auto;
    }

    .block-wrapper-inner .left-block {
        width: 100%;
        order: 1;
    }

    .block-wrapper-inner .left-block-inner {
        position: relative;
        top: 0;
        transform : translate(0%, 0%);
    }

    .block-wrapper-inner .right-block {
        width: 100%;
        height: 40vh;
        order: 0;
    }

    .right-block-inner {
        min-height: 100px;
    }

    .block-wrapper-inner .right-block video {
        width: auto;
        height:100%;
        min-height: 100%;
    }

    .accordeon-item .accordeon-heading {
        display: none;
    }

    .accordeon-item.active .accordeon-heading {
        display: block;
    }
    
    .newsletter-card-wrapper {
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    :root {
        /* --fontSizeMultiplier: 1.75; */
        --fontSizeMultiplier: 1;
        --marpadMultiplier: 3.2;
        --h2FontSize: calc(3 * var(--vw) * var(--fontSizeMultiplier));
    }

    .clothing-banner h6 {
        font-size: calc(var(--h6FontSize) + 1.5vw)!important;
    }

    h6, .h6 {
        font-size: calc(var(--h6FontSize) + 2.5vw)!important;
    }
    
    h4#h4Responsive {
        top: 15%!important; left: 15%!important;
    }

    h2#h2Responsive {
        top: 20%!important; left: 15%!important;
    }

    h2#h2Responsive1 {
        top: 25%!important; left: 15%!important;
        line-height: 1!important;
    }

    .min-dvh-100 {
        min-height: 70vh!important;
    }

    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .left-block-inner {
        grid-template-rows: 80% 30%;
    }

    .overlay-one {
        top: -1px;
    }

    .bg-image {
        /* height: 48vh!important; */
        height: 83vw!important;
    }

    #content .image.i67 {
        width: 90%;
        top: 25%; right: 5%;
        z-index: -1;
    }

    #content .image.i68 {
        width: 20%;
        top: 47%; right: 5%;
    }

    #content .image.i69 {
        width: 15%;
        top: 54%; right: 65%;
    }

    div#responsiveButton {
        top: 90%!important; left: 25%!important;
    }

    .min-dvh-130 {
        min-height: 85vh!important;
    }

    .quote {
        font-size: 0.7rem!important; line-height: 25px!important;
    }

    div#Responsivequote {
        top: 45%!important; left: 3%!important;
    }

    #card-text p {
        font-size: 0.7rem!important;
    }

    .socialsIcon {
        width: 50px;
        height: 50px;
    }
    .sm-top-40 {
        top: 40%!important;
    }
    .sm-w-10 {
        width: 10%!important;
    }

    .sm-w-20 {
        width: 20%!important;
    }

    .sm-w-30 {
        width: 30%!important;
    }

    .sm-w-40 {
        width: 40%!important;
    }

    .sm-w-50 {
        width: 50%!important;
    }

    .sm-w-60 {
        width: 60%!important;
    }
    .sm-w-75 {
        width: 75%!important;
    }
    .sm-w-80 {
        width: 80%!important;
    }
    .sm-w-90 {
        width: 90%!important;
    }
    .sm-w-100 {
        width: 100%!important;
    }
    .sm-flex-column-reverse {
        flex-direction: column-reverse!important;
    }
    .sm-flex-column {
        flex-direction: column!important;
    }
    .sm-d-none {
        display: none!important;
    }
    .sm-pt-1 {
        padding-top: 1vh!important;
    }

    .sm-pt-2 {
        padding-top: 2vh!important;
    }

    .sm-pt-3 {
        padding-top: 3vh!important;
    }

    .sm-pt-4 {
        padding-top: 4vh!important;
    }

    .sm-pt-5 {
        padding-top: 5vh!important;
    }
    .sm-pt-10 {
        padding-top: 10vh!important;
    }
    .sm-pt-15 {
        padding-top: 15vh!important;
    }
    .sm-pt-20 {
        padding-top: 20vh!important;
    }
    .sm-lh-20 {
        line-height: 20px!important;
    }
    .sm-mt-min-5 {
        margin-top: -5rem!important;
    }
    .sm-mt-15 {
        margin-top: 15rem!important;
    }
    .sm-mb-10 {
        margin-bottom: 10rem!important;
    }
    .sm-no-position {
        position: unset!important;
    }

    .sm-me-10-percent {
        margin-right: 10%!important;
    }

    .sm-ms-15-percent {
        margin-left: 15%!important;
    }
    
    #iconsMovie .sound-card{
        width: 26%!important;
        top: -20%!important;
        left: 12%!important;
    }

    #iconsMovie .explosion-card {
        width: 26%!important;
        top: -20%!important;
        left: 39%!important;
    }


    #iconsMovie .music-card{
        width: 26%!important;
        top: -20%!important;
        left: 68%!important;
    }

    .privacy-policy-container {
        padding-top: 25%;
    }

    .characters-content {
        position: absolute;
        bottom: -40px;
    }

}

@media (min-width: 1201px) {
    .xxl-w-30 {
        width: 30%!important;
    }

    :root {
        --fontSizeMultiplier: 1;
        --marpadMultiplier: 1;
    }

    .video-container {
        width: auto;
        margin-left: 3rem;
        margin-right: 3rem;
    }

    .video-container:hover {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .video-container video {
        width: 100%;
    }

    .home-section {
        /* height: 90vh; */
        justify-content: center;
    }

    #meet {
        height: 110vh;
    }

    .mailchimp-btns-container-header {
        width: 40%;
    }

    section > .row > div {
        padding-bottom: 4rem;
    }
}

/* End mediaqueries */


    /* Custom video controls container */
    .video-controls {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.7);
        color: #fff;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 1000;
      }
  
      /* Style for the play/pause button */
      .play-button {
        cursor: pointer;
        font-size: 24px;
        margin-right: 10px;
      }
  
      /* Style for the volume control */
      .volume-bar {
        flex: 1;
      }
  
      /* Style for the progress bar container */
      .progress-bar-container {
        flex: 4;
        height: 5px;
        background-color: #555;
        border-radius: 2px;
        margin: 0 10px;
        position: relative;
      }
  
      /* Style for the progress bar */
      .progress-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background-color: #f00;
        border-radius: 2px;
        width: 0;
      }

/* 

#video-overlay::before,
#video-overlay::after {
  content: "";
  position: absolute;
  bottom: 10px;
  width: 0;
  height: 0;
} */

/* #video-overlay::before {
  left: 10px;
  border: 6px solid transparent;
  border-right-color: #fff;
  z-index: 1000;
}

#video-overlay::after {
  right: 10px;
  border: 6px solid transparent;
  border-left-color: #fff;
  z-index: 1000;
} */

/* Styling for the play/pause button */
/* #video-overlay::before {
  pointer-events: none;
} */

.grecaptcha-badge {
    display: none!important;
}

/* Hide default video controls */
#video-overlay video::-webkit-media-controls {
  display: none;
}

#video-overlay video::-webkit-media-controls-enclosure {
  display: none !important;
}

.min-h-screen {
    min-height: unset;
}



/* Cookie styling (content in dialogContents.blade.php) */
.js-cookie-consent {
    width: fit-content;
    height: fit-content;
    position: fixed;
    right: 0;
    z-index: 999;
    background: #26262B;
    box-shadow: 4px 6px 39px 19px rgba(0,0,0,0.75);
    border-radius: 12px;
    text-align: center;
    display: flex;
    align-items: center;
    margin: 50px;
    padding: 0;
    pointer-events: initial;
    max-width: 360px;
}

.js-cookie-consent h1, h3 {
    color: var(--white);
}
.js-cookie-consent p {
    color: var(--white);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.cookie-overlay {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: 999;
}
.cookie-btn {
    width: 100%;
    border-radius: 0;
    background: #E2458D;
}

.js-cookie-consent h4 {
    color: var(--secondary-400)!important;
    font-weight: bold;
}

.js-cookie-consent .btn.dark:hover {
    color: var(--dark);
    border-color: var(--bs-btn-active-border-color);
}

.js-cookie-consent-agree,
.js-cookie-consent-agree:hover,
.js-cookie-consent-agree:active {
    border-color: var(--bs-btn-active-border-color);
}

.js-cookie-consent-agree.pointer.cookie-btn.cookie-text {
    color: var(--white);
    text-decoration: underline;
}


@media (max-width: 768px) {
    .js-cookie-consent {
        left: 50%;
        transform: translateX(-50%);
        right: unset;
        margin: 0 0 50px 0;
    }
}

@media (max-width: 1200px) {
    .js-cookie-consent .h3 {
        font-size: var(--h1FontSize);
        line-height: calc(var(--h1FontSize) - 1vw);
    }
}

@media (max-width: 991px) {

    .js-cookie-consent {
        position: fixed;
        bottom: 0;
        left: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 0px;
        transform: none;
    }
}





.custom-table {
    display: flex;
    flex-direction: column;
    /* background: red; */
}

.custom-table .table-row {
    display: flex;
    height: 100%;
    position: relative;
    gap: .5rem 1.5rem;
    /* padding: .5rem 0; */
}


.custom-table .table-cell:not(.line) {
    padding: .5rem 0;
}
.custom-table .table-row:first-child .table-cell {
    padding-top: 0;
}

.custom-table .table-cell.number {
    width: fit-content;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    position: relative;
    z-index: 1;
}

.custom-table .table-cell.line {
    width: 30px;
    position: absolute;
    left: 0;
    height: 100%;
    z-index: 0;
}

.custom-table .table-cell.line::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #FFFFFF;
    opacity: .15;
    width: 2px;
    height: 100%;
}

.custom-table .table-row:last-child .table-cell.line::after {
    height: 30px;
}

.rondje {
    font-weight: bold;
    width: 30px; aspect-ratio: 1;
    background: black;
    border: 1px solid var(--gray-50);
    border-radius: 50%;
    display: grid; place-items: center;
}

.custom-table .table-row.active .rondje {
    background: #05F29A;
    border: 0px solid #05F29A;
    color: black;
}


#video {
    display: none;
}

.file-upload {
    background: var(--black);
    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid var(--gray-50);
    border-radius: var(--borrad-normal);
    width: 100%;   
}



#dennis {
    transform: translateX(-35%);
    transition: transform .5s;
}

#june {
    transform: translateX(35%);
    transition: transform .5s;
}

#dennis.active, #june.active {
    transform: translateX(0);
}

#ambassadorText {
    left: 50%;
    transition: all .4s ease;
    opacity: 1;
    transform: translateX(-50%) translateY(100%)!important;
}

.list-style-none {
    list-style: none;
    /* padding-left: 35px; */
}

.list-style-auto {
    list-style: auto;
    padding-left: 35px;
}

.list-style-auto li::marker {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    color: var(--bs-heading-color,inherit);

    /* font-size: var(--h4FontSize); */
    line-height: 1;
}

.list-style-auto.h5 li::marker {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 400;
    color: var(--bs-heading-color,inherit);

    font-size: var(--h5FontSize);
    line-height: 1;
}


.list-style-disc {
    list-style: disc;
    margin-left: 15px;
}
.list-style-disc li::marker {
    font-size: 15px;
}




.custom-table-with-header {
    background: #000000;

    display: flex;
    flex-direction: column;

}

.custom-table-with-header .header {
    display: flex;
    justify-content: space-between;

    border: 1px solid #222222;
    background: #222222;

    border-radius: 8px 8px 0 0;

    overflow: hidden;

}

.custom-table-with-header .header .cell {
    border: 1px solid #222222;
    padding: .5rem;
    flex: 1;

    display: flex;
    justify-content: center; align-items: center;
    gap: .75rem;
}

.custom-table-with-header .body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.custom-table-with-header .body .row {
    width: 100%;
    display: flex;
}

.custom-table-with-header .body .row:last-child {
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}
.custom-table-with-header .body .row:last-child .cell:first-child {
    border-radius: 0 0 0 8px;
}
.custom-table-with-header .body .row:last-child .cell:last-child {
    border-radius: 0 0 8px 0;
}

.custom-table-with-header .body .row .cell {
    min-height: 75px;

    border: 1px solid #222222;
    padding: .5rem;
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: center; align-items: center;
}

@media (max-width: 768px) {
    .custom-table-with-header {
        border-radius: 8px;
        overflow: auto;
        position: relative;
    }

    .custom-table-with-header .scroll-indicator {
        content: '';
        position: sticky;
        bottom: 0px;
        left: 0;
        background: #3a3a3a33;
        /* background: #222222; */
        width: 100%;
        height: 7.5px;
        border-radius: 8px;
        margin-top: 7.5px;
        z-index: 100;
    }

    .custom-table-with-header .scroll-indicator .progress {
        width: var(--progress-width);
        height: 100%;
        background: #222222;
        /* background: #000; */
    }

    .custom-table-with-header .header,
    .custom-table-with-header .body {
        width: 300%;
    }
}


@media (max-width: 768px) {
    #guidelinesWrapper:has(#fixedMobile.active) #sections {
        margin-top: 8vh;
    }

    #guidelinesWrapper:has(#fixedMobile.active) #sections > li {
        scroll-margin-top: 16.5vh;
    }
}

/* #fixedMobile {
    position: fixed;
    top: 12vh;
    left: 0;
} */

#fixedMobile.active {
    position: fixed;
    top: 12vh;
    left: 0;
    width: 100%;
    
    /* Glass background */
    /* background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); */
}

#fixed.active {
    position: fixed;
    top: 0;
}

[data-for].active {
    color: #05F29A;
    font-weight: 600;
}

/* input.error,
textarea.error,
label.file-upload:has(input.error) {
    border-bottom: 2px solid rgb(255, 94, 94);
} */

.error-message {
    color: rgb(255, 94, 94);
    font-size: 14px;
}

.file-upload:has(input:focus),
.file-upload:has(input:active),
.file-upload:has(input.active) {
    box-shadow: 0 0 0 0px #fff, 0 0 0 1px #2563eb, 0 0 #0000;

    border: 1px solid #2563eb;
}


.popup-backdrop {
    height: 100dvh;
    background: var(--black-t-50);
    display: none;
    position: absolute;
    inset: 0;
    z-index: 200;
    justify-content: center;
    align-items: center;
}

.popup-backdrop.show {
    display: flex;
}


/* Button spinner */
.border-btn-wrapper:has(.spinner) {
    position: relative;
}

.border-btn-wrapper .spinner {
    transition: .4s ease-in-out;
    width: 25px; aspect-ratio: 1;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.border-btn-wrapper .spinner img {
    width: 100%; height: 100%;
    animation: spin 1s linear infinite;
}

.border-btn-wrapper:has(button.loading) .spinner {
    opacity: 1;
}
.border-btn-wrapper:has(button.loading) span {
    opacity: 0;
}

@keyframes spin {
    100% {
        rotate: 360deg;
    }
}



button.pointer-events-none {
    pointer-events: none;
}




.footer-container-wrapper {
    background: linear-gradient(40deg, var(--redo-blue-dark) 0%, var(--redo-blue-dark) 80%, var(--redo-blue-light) 100%);
    color: var(--white-10);
}
.header-redo {
    z-index: 100;
    /* background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.40) 37.57%, rgba(0, 0, 0, 0.14) 73.25%, rgba(0, 0, 0, 0.00) 100%); */
    background: linear-gradient(40deg, var(--redo-blue-dark) 0%, var(--redo-blue-dark) 80%, var(--redo-blue-light) 100%);
    transition-duration: 300ms;
}
.header-redo.scrolled {
    top: -12vh!important;
}

.header-redo svg#logo,
.header-redo svg#logo path,
.footer-redo svg#logo,
.footer-redo svg#logo path {
    transition: var(--transition-400);
}

.header-redo svg#logo:hover,
.footer-redo svg#logo:hover {
    scale: 1.1;
}

.header-redo svg#logo.transparent-stroke path,
.footer-redo svg#logo.transparent-stroke path {
    stroke: transparent!important;
}

.header-redo svg#logo.transparent-stroke:hover path,
.footer-redo svg#logo.transparent-stroke:hover path {
    stroke: transparent!important;
}

.header-redo svg#logo:hover path,
.footer-redo svg#logo:hover path {
    fill: var(--redo-blue-light); stroke: var(--redo-blue-light);
}

/* Footer */
.footer-redo {
    position: relative;
}

.footer-redo a span {
    transition: var(--transition-400);
}

.footer-redo a span:hover {
    opacity: 1;
}

.footer-redo .hl {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
}
/* End footer */

@media (max-width: 768px) {
    .footer-redo .footer-socials {
        margin-left: auto;
        margin-right: auto;
    }
    .footer-redo img {
        width: 20px!important;
    }
}

.dark-glass-bg {
    background: linear-gradient(70.12deg, var(--black-t-70) 24.42%, var(--black-t-20) 102.47%);
    filter: drop-shadow(2px 4px 30px var(--black-t-70));
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    -moz-backdrop-filter: blur(35px);
    -ms-backdrop-filter: blur(35px);
}

.redo-text-dark, .redo-text-dark .char {
    color: var(--dark-100);
}
.home-redo {
    background: var(--redo-white);
    color: var(--dark-100)!important;
}
.home-redo-inner {
    min-height: 100dvh;
}

.home-redo-inner h1, .home-redo-inner h2, h1 > .line, h2 > .line {
    text-align: center;
}

.home-redo-inner section.fill-height {
    padding-top: unset;
    padding-bottom: unset;
    /* min-height: 100dvh; */
}

.home-redo-inner section.header-container {
    min-height: 100dvh;
}
.scroll-next-section {
    margin: 0 auto;
    position: absolute;
    bottom: 4rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scroll-next-section a > svg {
    width: 4rem!important;
    height: 4rem!important;
}


section#marketplace {
    padding-top: 5%;
    padding-bottom: 0px;
}

.home-redo-inner section .container.flex-vh-container {
    /* min-height: 100dvh;
    width: 100%; */
    display: flex;
    padding-top: 12vh;
}
.home-redo-inner section .container.flex-container {
    min-height: 70dvh;
    width: 100%;
    display: flex;
}

.animate-your-story {
    flex: 1;
    flex-direction: column;
    display: flex!important;
    /* display: block; */
    gap: 2rem 6rem;
    flex-wrap: wrap;
    margin: 2rem 0;
}

.animate-your-story > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.animate-your-story .left {
    width: 100%;
}
.animate-your-story .left p{
    margin: 0px;
    max-width: 100%;
}
.animate-your-story .right {
    align-items: center;
}

.animate-your-story .right .img-wrapper {
    flex: 1;
    max-height: 90%;
}

.animate-your-story .right img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}




.back-to-top-btn {
    width: 2rem; aspect-ratio: 1;
    position: fixed;
    bottom: 1rem; right: 1rem;
    padding: .25rem;
    display: none; place-items: center;
    border-radius: .5rem;
    border: 3px solid #151212;
    opacity: 0;
    translate: 0 15vh;
    transition: all .3s ease-in-out allow-discrete;
    cursor: pointer;
}

.back-to-top-btn.show {
    opacity: 1;
    display: grid;
    translate: 0 0;

    @starting-style {
        opacity: 0;
        translate: 0 -15vh;
    }
}

.back-to-top-btn svg {
    width: 90%; aspect-ratio: 1;
    fill: var(--redo-blue-dark);
}



/* Slider sections */
.slider-section {
    /* padding-top: 16dvh;
    padding-bottom: 5dvh; */
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem .5rem;
    flex-wrap: wrap;
    width: 100%;
}
.slider-section > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.slider-section.slider-left .left{
    order: 1;
    flex: 1;
    min-width: 50%;
    max-width: 100%;
}
.slider-section.slider-left .right {
    order: 0;
    flex: 1;
}
.slider-section.slider-right .left{
    order: 0;
    flex: 1;
}
.slider-section.slider-right .right {
    order: 1;
    flex: 1;
    min-width: 50%;
    max-width: 100%;
}


.home-redo #marketplace {
    background: var(--funcky-redo-gradient);
}

.download-buttons-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
}

.close-modal-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: fit-content;
    height: fit-content;
    padding: .5rem;
    cursor: pointer;
}

#download-modal .popup {
    min-width: 90vw;
}

body.modal-open {
    overflow: hidden;
}


video.intro-video {
    margin: auto 0;
    max-height: 60dvh;
}

/* @media (min-width: 576px) {

} */
/* @media (min-width: 768px) {

} */
@media (min-width: 992px) {
    .animate-your-story {
        /* display: flex; */
        display: block;
    }





    .home-redo-inner h1, .home-redo-inner h2, h1 > .line, h2 > .line {
        text-align: left!important;
        width: fit-content;
    }

    .animate-your-story .left p {
        margin: 0px;
    }

    .animate-your-story {
        flex-direction: row;
    }

    .animate-your-story .left p{
        margin: 0px
    }

    .slider-section {
        flex-direction: row;
    }
    .slider-section.slider-left .left{
        order: 0;
        max-width: 50%;
    }
    .slider-section.slider-left .right {
        order: 1;
        max-width: 50%;
    }
    
    #download-modal .popup {
        min-width: 30vw;
    }
}
@media (min-width: 1200px) {

}
@media (min-width: 1400px) {

}


.privacy-policy-container *, .halloween-terms-container * {
    color: var(--dark-100)!important;
}
.error-page * {
    color: var(--dark-100);
}
nav {
    z-index: 9999;
}



@media (max-width: 992px) {
    .animate-your-story .left p{
        max-width: 100%;
    }

    video.intro-video {
        max-width: 75%;
        margin: 0 auto;
    }

    .home-redo-inner section.header-container {
        min-height: auto;
        padding-bottom: 15%;
    }
}

@media (max-width: 768px) {
    .scroll-next-section {
        display: none;
    }
}