/** Shopify CDN: Minification failed

Line 70:12 Expected ":"
Line 70:22 Expected ":"

**/

@font-face {
    font-family: 'MovieStar';
    src: url('MovieStar.eot');
    src: url('MovieStar.eot?#iefix') format('embedded-opentype'),
        url('MovieStar.woff2') format('woff2'),
        url('MovieStar.woff') format('woff'),
        url('MovieStar.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Merak Free';
    src: url('MerakFreeRegular.eot');
    src: url('MerakFreeRegular.eot?#iefix') format('embedded-opentype'),
        url('MerakFreeRegular.woff2') format('woff2'),
        url('MerakFreeRegular.woff') format('woff'),
        url('MerakFreeRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Blacktroops Rough';
    src: url('BlacktroopsRough.eot');
    src: url('BlacktroopsRough.eot?#iefix') format('embedded-opentype'),
        url('BlacktroopsRough.woff2') format('woff2'),
        url('BlacktroopsRough.woff') format('woff'),
        url('BlacktroopsRough.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.section {
    overflow: hidden;
}

.section, .cs {
    min-height: 100% !important;
}

.cs {
    background: #0F060F;
    background: linear-gradient(180deg, #0F060F 0%, #0F060F 24%, #200712 46%);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: relative;
}

.cs-character-bg {
    height: 100%;
    width: 100%;
    display: flex;
    position: absolute;
    z-index: 1;
}

.logo-top {
    width: 42%;
    display: flex;
    align-self: start;
    position; relative;
    margin: 0 auto;
    padding-top: 2rem;
}

.cs-body-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.cs-body {
    flex-direction: column;
    display: flex;
    align-self: start;
    width: 80%;
    margin-left: auto;
    min-height: 60cqh;
}

.cs-body .star-text {
    font-family: 'MovieStar';
    font-size: 10rem;
    line-height: 1;
    display: flex;
    justify-content: end;
    width: 100%;
    padding-right: 7vw;
    background: #DB250A;
    background: -webkit-linear-gradient(to bottom, #DB250A 0%, #F33E88 80%);
    background: -moz-linear-gradient(to bottom, #DB250A 0%, #F33E88 80%);
    background: linear-gradient(to bottom, #DB250A 0%, #F33E88 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: #A92851 14px 8px 26px;
}

.cs-body .tagline {
    display: flex;
    align-self: flex-end;
    font-size: 1.9rem;
    line-height: 1.4em;
    color: #fff;
    width: 100%;
    font-family: 'Merak Free';
    -webkit-text-stroke: 20px black;
    paint-order: stroke;
    margin-top: -4rem;
}

.tagline-inner-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-right: 2rem;
    margin-top: 3rem;
}

.tagline span {
    z-index: 1;
    display: flex;
}

.tagline .tagline-top {
    align-self: end;
    margin-right: 1em;
}

.tagline .tagline-bottom {
    align-self: end;
    margin-right: 1.5em;
}

.cs-cta-email {
    z-index: 2;
    background-size: contain;
    background-repeat: no-repeat;
    height: 28vh;
    width: 79%;
    margin-left: auto;
    margin-top: 6em;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: auto;
    left: 0;
    right: 0;
    margin-left: 19vw;
}

.cs-cta-span-group {
    display: flex;
    align-items: end;
    flex-direction: column;
    margin-left: 4vw;
    margin-top: 4vh;
}

.cs-cta-span-group span {
    display: block;
    z-index: 1;
    font-family: "Blacktroops Rough";
    line-height: 2.2rem;
    color: #000;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.cs-cta-span-group span:first-of-type {
    font-size: 2.2vw;
    align-self: start;
}

.cs-cta-span-group span:last-of-type {
    margin-right: 1em;
    font-size: 1.9vw;
}

.halftone-left {
    background-size: clamp(200px, 29vw, 452px) auto;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: flex;
    position: absolute;
    background-repeat: no-repeat;
    bottom: 0;
    left: 0;
    background-position: 10% bottom;
}

.halftone-right {
    background-size: clamp(200px, 29vw, 452px) auto;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: flex;
    position: absolute;
    background-repeat: no-repeat;
    bottom: 0;
    left: 0;
    background-position: 100% bottom;
}

.waves-container {
    position: absolute;
    opacity: 1;
    display: block;
    z-index: 9;
    width: var(--page-content-width);
    height: 100%;
    animation: reveal 3s ease-out 3s forwards;
}

.waves {
    position: relative;
    width: 100%; /* Full width */
    height: 15vh; /* The height is 15% of the viewport */
    margin-bottom: -7px; /* Fixes a gap issue for Safari */
    min-height: 100px; /* Minimum height */
    max-height: 150px; /* Maximum height */
}

.waves-bottom {
    width: 100%;
    height: 100%;
    background-color: #C62E57;
}

/* Animation for wave parallax */
.wave-parallax > use {
    /* Infinite animation to move the waves */
    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

/* Animating different wave layers at varying speeds */
.wave-parallax > use:nth-child(1) {
    animation-delay: -2s; /* Delayed by 2 seconds */
    animation-duration: 5s; /* Animation duration is 7 seconds */
}
.wave-parallax > use:nth-child(2) {
    animation-delay: -3s; /* Delayed by 3 seconds */
    animation-duration: 8s; /* Animation duration is 10 seconds */
}
.wave-parallax > use:nth-child(3) {
    animation-delay: -4s; /* Delayed by 4 seconds */
    animation-duration: 11s; /* Animation duration is 13 seconds */
}
.wave-parallax > use:nth-child(4) {
    animation-delay: -5s; /* Delayed by 5 seconds */
    animation-duration: 10s; /* Animation duration is 20 seconds */
}

/* Animation for the wave movement */
@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0); /* Starting position */
  }
  100% {
    transform: translate3d(85px, 0, 0); /* Ending position */
  }
}

/* Animation for the background gradient */
@keyframes gradient {
  0% {
    background-position: 0% 50%; /* Starting position of the gradient */
  }
  50% {
    background-position: 100% 50%; /* Midway position of the gradient */
  }
  100% {
    background-position: 0% 50%; /* Ending position of the gradient */
  }
}

@keyframes reveal {
  0% {
    transform: translateY(0%);
    opacity: 1;
  }
  99% {
    transform: translateY(99%);
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
    display: none;
  }
}

@media screen and (max-width: 749px) {
    .star-text {
        text-align: center;
        font-size: 8em !important;
        padding-right: 0 !important;
    }
    .tagline {
        text-align: center;
        margin-top: -2rem !important;
    }
    .tagline-top {
        margin-right: 0 !important;
        font-size: 1rem;
        width: 60%;
        line-height: 1.6;
    }
    .tagline-inner-wrapper {
        padding-right: 0 !important;
    }
}

@media screen and (min-width: 750px) {
    .section, .cs {
        height: 100% !important;
        min-height: 100% !important;
    }
}

@media screen and (max-width: 1920px) {
    .logo-top {
        width: 50% !important;
    }
    .cs-cta-span-group {
        margin-left: 6vw !important;
    }
    .cs-cta-span-group span {
        font-size: 2vw;
        line-height: 1.6rem;
    }
    .cs-cta-email {
        height: 19svh !important;
        /* margin-left: 24vw !important; */
    }
}

@media screen and (max-height: 1079px) {
    .star-text {
        font-size: 9em;
    }
    .cs-character-bg {
        background-size: clamp(200px, 35vw, 900px) auto !important;
    }
    .cs-cta-email {
        height: 29vh !important;
        margin-left: 20vw !important;
        bottom: -2em;
    }
}

@media screen and (max-width: 1310px) {
    .star-text {
        /* font-size: 10em !important; */
    }
    .cs-body {
        width: 100%;
        margin-left: initial;
    }
}

@media screen and (max-width: 1637px) {
    .logo-top {
        width: 42% !important;
    }
    .cs-body {
        /* margin-left: 22vw !important;
        margin-top: 5vh !important; */
    }
    .cs-cta-email {
        height: 28vh !important;
        margin-left: 22vw !important;
    }
    .cs-cta-span-group {
        margin-left: 5vw !important;
    }
    .cs-cta-span-group span {
        line-height: 1.5rem;
    }
}

@media screen and (max-height: 900px) {
    .cs-character-bg {
        background-size: clamp(200px, 43vw, 600px) auto !important;
    }
    .logo-top {
        width: 42%;
    }
}

@media screen and (min-width: 1280px) and (max-width: 1636px) {
    .cs-cta-email {
        height: 23vh !important;
        bottom: 0 !important;
    }
    .cs-cta-span-group {
        margin-top: 5vh !important;
    }
}