.header {
    height: 134vw;
}

.header-stars {
    top: 46%;
    width: 128vw;
    z-index: 2;
    position: absolute;
    left: 57%;
    transform: translate(-50%, -50%);
}

.header-stars-prize {
    top: 45.8%;
    width: 128vw;
    z-index: 2;
    position: absolute;
    left: 56.5%;
    transform: translate(-50%, -50%);
}



.header-stars span {
    background: url(/img/starHeaderMob.svg) no-repeat center;
    background-size: contain;
    padding-bottom: 99%;
    display: block;
}

/* too Late */
.header-stars.header-starsTL span {
    background: url(/img/starHeaderMobTooLate.svg) no-repeat center;
    background-size: contain;
    padding-bottom: 99%;
    display: block;
}

.header-stars.header-stars-prize span {
    background: url(/img/starHeaderMobPrize.svg) no-repeat center;
    background-size: contain;
    padding-bottom: 99%;
    display: block;
}


.header-content {
    padding-top: unset;
}

.header-content .star-container {
    width: 125vw;
    position: relative;
    left: -4.4%;
    top: 3.5vw;
}

.header-content .star-container span {
    padding-bottom: 100%;
    display: block;
    background: url(/img/starBG.svg) no-repeat center;
    background-size: contain;
    rotate: -52.85deg;
}

.header-content .header-text-container {
    position: absolute;
    max-width: unset;
}


.header-content .header-text-container {
    position: absolute;
    top: 35%;
    width: 100%;
}

.header-content .header-text-container.topSmallHeader {
    top: 28%;
}


/* tooSoon */
.header-content .header-text-container.tooSoonLeft {
    top: 30.8%;
}

.tooSoonMarginTop {
    margin-top: -2vw !important;
}

.tooSoonLeft>.starHeaderTextLarge {
    font-size: 9.2vw;
}


.header-content .header-text-container.header-text-container-prizes {
    top: 35%;
}

.starHeaderTextLarge {
    font-size: 9.2vw;
    max-width: 67%;
    margin: auto;
    margin-top: 0;
    line-height: 1;
    text-shadow: 1px 1px 20px rgb(0 0 0 / 70%)
}

/* about */
.starHeaderTextLargeAbout {
    font-size: 11.9vw;
    max-width: 95%;
}

.starHeaderTextSmallAbout:last-child {
    margin-top: -16px;
}

/* tooSoon Width */
.starHeaderTextLargeWidth {
    max-width: 73%;

}

.starHeaderText {
    font-size: 7.4vw;
    max-width: 80%;
    margin: auto;
    margin-bottom: 0;
    line-height: 1;
    text-shadow: 1px 1px 20px rgb(0 0 0 / 70%)
}

/* about */
.starHeaderTextAbout {
    font-size: 9.7vw;
    max-width: 90%;
}

/* tooSoon Width */
.starHeaderTextSmallWidth {
    max-width: 67%;
}

/* tooSoon Width */
.starHeaderTextLargeWidth {
    max-width: 90%;
}

.starHeaderTextSmall {
    font-size: 6.5vw;
    max-width: 78%;
    margin: auto;
    margin-bottom: 0;
    line-height: 1;
    text-shadow: 1px 1px 20px rgb(0 0 0 / 70%)
}

.starHeaderTextSmallAbout {
    font-size: 5.4vw;
    max-width: 66%;
}

sup {
    font-size: 0.5em;
}

.packshot {
    margin-top: -7vw;
    z-index: 4;
}

.packTimePosition {
    margin-top: -13vw;
}

/* stops the global svg*/
.header-content .header-text-container span {
    background: unset;
    display: inline;
}

@media only screen and (min-width: 700px) {

    /* smae as global */
    .logo {
        width: 19.9%;
    }

    /* diffrent to global */
    .header {
        height: 53.5vw;
    }

    .header-stars {
        width: 95%;
        left: 50%;
        top: 48.5%;
    }

    .header-stars span,
    .header-stars.header-starsTL span {
        background: url("/img/starHeaderStarsDesktop.svg") no-repeat center;
        background-size: contain;
        padding-bottom: 40%;
        display: block;
    }

    .header-stars-prize {
        width: 95%;
        left: 50.7%;
        top: 46%;
    }

    .header-stars.header-stars-prize span {
        background: url("/img/prizeDekstopstars.svg") no-repeat center;
        background-size: contain;
        padding-bottom: 63%;
        display: block;
    }

    .header-content {
        padding-top: 4.5vw;
    }

    .header-content .star-container {
        width: 32.7vw;
        left: -1.9%;
        top: 3.3vw;
    }

    .header-content .header-text-container,
    .header-content .header-text-container.tooSoonLeft,
    .header-content .header-text-container.topSmallHeader {
        top: 37%;
    }

    .header-content .header-text-container.header-text-container-prizes {
        top: 39%;
    }

    .starHeaderTextLarge,
    .tooSoonLeft>.starHeaderTextLarge {
        font-size: min(3.7vw, 48px);
    }

    /* about */

    .starHeaderTextLargeAbout {
        font-size: min(5.7vw, 78px);
    }

    .starHeaderTextLargePrize {

        font-size: min(5.3vw, 73px);
    }


    .starHeaderText {
        font-size: min(2.95vw, 38px);
    }

    /* about */
    .starHeaderTextAbout {
        font-size: min(4.65vw, 65px);
    }

    .starHeaderTextPrize {
        font-size: min(4.25vw, 59px);
    }

    .starHeaderTextSmall {
        font-size: min(2.25vw, 30px);

    }

    /* about */
    .starHeaderTextSmallAbout {
        font-size: min(2.4vw, 34px);
        max-width: 48%;
    }

    .starHeaderTextSmall:last-child {
        margin-top: -16px;

    }

    .aboutPackshot>.packshot,
    .packshot {
        margin-top: -8.7vw;
        right: -2.5%;
        pointer-events: none;
    }

    .desktopMainBG {
        margin-top: -11.2vw;
    }

    .desktopMainBGPrize {
        margin-top: -12.7vw;
    }

    /* tooSoon */
    .header-content .header-text-container.tooSoonLeft {
        left: 0;
    }

    .tooSoonMarginTop {
        margin-top: -1vw !important;
    }
}

@media only screen and (min-width: 1400px) {

    /* smae as global */
    .logo {
        width: 279px;
    }

    /* diffrent to global */
    .header-stars {
        width: 95%;
        left: 50%;
        top: 49%;
    }

    .header {
        margin-top: -211px;
        height: 757px;

        margin-bottom: -54px;
    }

    .header-content {
        padding-top: 56px;
    }

    .header-content .header-text-container {
        top: 40%;
    }

    .starHeaderTextLarge {
        font-size: min(3.4vw, 48px);
        max-width: 70%;
    }

    .header-content .star-container {
        top: 62px;
        width: 430px;
        left: 0%;
    }

    .starHeaderTextAbout {
        font-size: min(4.25vw, 58px);
    }



    .starHeaderText {
        font-size: min(2.7vw, 38px);
    }

    .starHeaderTextSmall {
        font-size: min(2.05vw, 28px);

    }

    .aboutPackshot>.packshot,
    .packshot {
        margin-top: -122px;
        left: 35px;
    }

    .packTimePosition {
        left: 47px;
    }

    .packshot i {
        max-width: 434px;
        padding-bottom: 195px;
    }

    .desktopMainBG {
        margin-top: -157px;
    }

    /* tooSoon Width */
    .starHeaderTextLargeWidth {
        max-width: 90%;
    }

    .tooSoonMarginTop {
        margin-top: -14px !important;
    }

    /* basically the same just change of width */
    /* about */
    .starHeaderTextSmallAbout {
        font-size: min(2.7vw, 37px);
        max-width: 74%;
    }


    /* about */
    .starHeaderTextAbout {
        font-size: min(4.65vw, 65px);
    }

    .starHeaderTextLargeAbout {
        font-size: min(5.7vw, 78px);
        max-width: 90%;
    }

    /* prize */

    .header-stars-prize {
        width: 108.5%;
        top: 77.5%;
    }

    .prizeBGContainer i {
        padding-bottom: 104%;
        margin: -1.5vw auto;
    }

    .header-stars-prize {
        top: 400px !important;
    }

    .header-stars.header-stars-prize span {

        padding-bottom: 837px;
        display: block;
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        width: 1329px;
        top: -475.4px;
    }

    .desktopMainBGPrize {
        margin-top: -200px;
    }

    .prizeBGContainer {
        margin-top: unset;
        width: 1200px;
        height: 100%;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        z-index: 4;
    }

    .prizeBGContainer i {
        margin: -21px auto;
    }

    .prizeText {
        top: 110px;
        width: 575px;
    }

    .prizeSmallFont {
        font-size: 18px;
    }

    .formHeaderTextLargePrize {
        max-width: 81%;
        font-size: min(2.8vw, 38px) !important;
    }

    .prizePackshot {
        margin-top: 120px;
    }

    .prizePackshot>.packshot {
        left: 0;
    }

    .header-content .header-text-container.header-text-container-prizes {
        top: 42%;
        left: 20px;
    }

    .starHeaderTextPrize {
        font-size: min(4.25vw, 56px);
    }

    .formHeaderTextLargePrize {
        padding-top: 70px;
    }

    .starHeaderTextLargeAbout {
        /* font-size: min(5.7vw, 78px); */
        font-size: min(5.8vw, 81px);

    }

    /* prize */
    .starHeaderTextLargePrize {
        font-size: min(5.3vw, 71px);
    }

    /* tooSoon */
    .header-content .header-text-container.tooSoonLeft {
        left: 22px;
        top: 192px;
    }

    /* tooLate */
    .header-content .header-text-container.topSmallHeader {
        left: 30px;
        top: 192px;
    }

}