@media (max-width: 1280px), (max-height: 500px) {
    .treatments .treatment img {
        max-width: 180px;
        width: 80%;
    }
}

/* LANDSCAPE */

@media (orientation: landscape) and (min-aspect-ratio: 9/4) {
    body {
        font-size: calc(20px + (28 - 20) * (100vh - 400px) / (1025 - 400));
        line-height: calc(26px + (36 - 26) * (100vh - 400px) / (1025 - 400));
    }

    .text-highlighted {
        font-size: calc(30px + (54 - 30) * (100vh - 400px) / (1025 - 400));
        line-height: calc(26px + (36 - 26) * (100vh - 400px) / (1025 - 400));
    }
}

@media (max-width: 1279px) and (orientation: landscape) {
    body {
        font-size: calc(20px + (28 - 20) * (100vh - 320px) / (1025 - 320));
        line-height: calc(26px + (36 - 26) * (100vh - 400px) / (1025 - 400));
    }

    .text-highlighted {
        font-size: calc(30px + (54 - 30) * (100vh - 400px) / (1025 - 400));
        line-height: calc(26px + (36 - 26) * (100vh - 400px) / (1025 - 400));
    }
    
    .lifestyle-title {
        line-height: calc(12px + (26 - 12) * (100vh - 400px) / (1025 - 400));
    }

    .lifestyle-title .text-highlighted {
        font-size: calc(20px + (54 - 20) * (100vh - 400px) / (1025 - 400));
        line-height: calc(20px + (36 - 20) * (100vh - 400px) / (1025 - 400));
    }
}

@media (max-width: 1280px) and (orientation: landscape) {
    .white-border-box, .treatments-bg {
        width: calc(100vw - 60vh);
    }

    .treatments .treatment {
        width: calc(100vw - 64vh);
    }

    .testimonial1, .testimonial2, .testimonial3  {
        width: 80%;
    }
}

@media (max-width: 1024px) and (orientation: landscape) {
    .treatments-content {
        width: calc((100vw * 4) - 100vh);
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    .pointer-text-wrapper-mod {
        width: 80%;
    }
    
    .treatments-content {
        width: calc((100vw * 6) - 100vh);
    }

    .white-border-box, .treatments-bg {
        width: 96vw;
    }
    
    .treatments .treatment {
        width: 90%;
    }
}

@media (max-height: 900px) and (orientation: landscape) {
    .million-text-box-blurred, .joints-text-box-blurred {
        max-width: 28vw;
        padding: 14vh 2vh;
    }

    .targetsText {
        padding: 4rem 1.4rem;
    }

    .synovial-text {
        top: 16%;
    }

    .stage-bone-text {
        top: 10%;
    }

    .treatments-wrapper {
        top: calc(10% - 25vh);
    }

    .lifestyle-items {
        top: -5%;
    }

    .lifestyle-title {
        top: 2.7em;
        left: 3.5em;
    }

    .lifestyle-title .text-highlighted {
        font-size: calc(14px + (38 - 14) * (100vh - 400px) / (1025 - 400));
        line-height: calc(12px + (36 - 12) * (100vh - 400px) / (1025 - 400));
    }
}
@media (max-height: 800px) and (orientation: landscape) {
    .million-text-box-blurred, .joints-text-box-blurred {
        max-width: 36vw;
        padding: 12vh 2vh;
    }
    
    .pointer-text-wide {
        max-width: 96%;
    }

    .cartilage-text {
        top: 10%;
    }

    .synovial-text {
        top: 14%;
    }

    .stage-cartilage-text, .stage-bone-text, .stage-fuse-text {
        top: 8%;
    }
    
    .heart-text {
        top: 30%;
    }

    .blood-text, .lung-text {
        top: 24%;
    }

    .lifestyle-items {
        top: -14%;
    }
}
@media (max-height: 700px) and (orientation: landscape) {
    .stage-bone-text, .stage-fuse-text {
        top: 4%;
    }

    .lifestyle-items {
        top: -16%;
    }

    .lifestyle-title {
        top: 2.8em;
    }

    .lifestyle-title .text-highlighted {
        display: inline-block;
    }

    .lifestyle-item {
        font-size: 1.4rem;
        line-height: 2.3rem;
    }

    .lifestyle-item-content {
        width: 68%;
    }

    .stop-experience {
        width: 7vh;
        height: 7vh;
        top: 4vh;
        right: 4vh;
    }

    .hamburger-menu {
        width: 7.8vh;
        height: 7vh;
        top: 4vh;
        left: 4vh;
    }

    .video-title {
        width: 50%;
        height: 9vh;
        top: 3vh;
    }

    .video-title-content div {
        padding-top: 2vh;
    }
}
@media (max-height: 600px) and (orientation: landscape) {
    .pointer-text-wrapper-mod {
        width: 96%;
    }

    .bones-wrapper, .membrane-text {
        top: 10%;
    }
    
    .stage-bone-text .pointer-text {
        color: #2f2063;
    }

    .stage-bone-text .pointer-text div span {
        background: -webkit-linear-gradient(0deg, #2f2063, #2f2063);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .stage-cartilage-text {
        top: 4%;
    }

    .nodules-text {
        top: 6%;
    }

    .boutonniere-text {
        top: 5%;
    }

    .blood-text, .lung-text {
        top: 28%;
    }

    .lifestyle-item {
        font-size: 1.3rem;
        line-height: 2.2rem;
    }

    .lifestyle-item-content {
        width: 72%;
    }

    .lifestyle-item-content img {
        width: 170px;
        height: auto;
    }
}
@media (max-height: 500px) and (orientation: landscape) {
    .cartilage-text {
        top: 7%;
    }

    .synovial-text {
        top: 6%;
    }

    .stage-cartilage-text {
        top: 1%;
    }

    .stage-bone-text {
        top: 4%;
    }
    
    .thumb-text {
        bottom: 5%;
    }

    .boutonniere-text {
        top: 2%;
    }
    
    .text-only {
        top: -10%;
    }

    .treatments .treatments-text {
        padding-top: 2vh;
    }

    .lifestyle-items {
        top: -18%;
    }

    .lifestyle-item {
        font-size: 1.2rem;
        line-height: 1.8rem;
    }

    .lifestyle-item-title {
        font-size: 1.54rem;
    }

    .lifestyle-item-content {
        width: 78%;
    }

    .lifestyle-item-content img {
        width: 130px;
        height: auto;
    }

    .navigationMenuWrapper {
        max-width: 80%;
    }

    .navigationMenuTitle {
        padding: 0;
    }

    .navigationMenuItem {
        padding: 8px 16px 2px 16px;
    }

    .navigationMenuEmpty {
        height: 1.8vh;
    }

    .play-button {
        width: 100px;
        height: 122px;
    }
}
@media (max-height: 400px) and (orientation: landscape) {
    .immune-text-box {
        transform: translateY(-10vh);
    }
    
    .bones-wrapper .pointer-text {
        color: #2f2063;
    }

    .bones-wrapper, .membrane-text {
        top: 14%;
    }

    .synovial-text, .stage-fuse-text {
        top: 3%;
    }

    .stage-fuse-text {
        top: 3%;
        font-size: calc(16px + (24 - 16) * (100vh - 320px) / (1025 - 320));
        line-height: calc(20px + (32 - 20) * (100vh - 320px) / (1025 - 320));
    }

    .stage-fuse-text .text-highlighted {
        font-size: calc(26px + (48 - 26) * (100vh - 320px) / (1025 - 320));
        line-height: calc(20px + (32 - 20) * (100vh - 320px) / (1025 - 320));
    }
    
    .nodules-text {
        top: 4%;
    }

    .swan-text {
        top: 8%;
    }

    .heart-text {
        top: 26%;
    }

    .blood-text, .lung-text {
        top: 20%;
    }

    .text-only {
        top: -15%;
    }

    .summary-text {
        top: -10%;
    }

    .treatments {
        top: -10%;
    }

    .treatments .treatments-text {
        padding-top: 4vh;
    }
    
    .treatment-title .text-highlighted {
        line-height: calc(20px + (40 - 20) * (100vh - 400px) / (1025 - 400));
    }

    .lifestyle-item {
        font-size: 1.1rem;
    }

    .lifestyle-item-title {
        font-size: 1.5rem;
    }

    .lifestyle-item-content {
        width: 80%;
    }

    .lifestyle-item-content img {
        width: 100px;
        height: auto;
    }

    .video-title {
        width: 60%;
    }

    .play-button {
        width: 90px;
        height: 110px;
    }
}
@media (max-height: 320px) and (orientation: landscape) {
    .million-text-box, .targets-text-box, .joints-text-box, .immune-text-box {
        transform: translateY(-16vh);
    }

    .bones-wrapper, .membrane-text {
        top: 10%;
    }

    .synovial-text, .stage-bone-text, .stage-fuse-text {
        top: 1%;
    }
    
    .stage-cartilage-text .pointer-text {
        color: #2f2063;
    }

    .lifestyle-item {
        font-size: 1.0rem;
        line-height: 1.6rem;
    }

    .lifestyle-item-title {
        font-size: 1.4rem;
    }
}
@media (max-height: 300px) and (orientation: landscape) {
    .million-text-box-blurred, .joints-text-box-blurred, .immune-text-box {
        max-width: 60vw;
        padding: 12vh 2vh;
    }
    
    .immune-text {
        max-width: 100%;
        padding: 0;
    }
    
    .pointer-text, .stage-text {
        color: #2f2063;
    }

    .nodules-text {
        top: 1%;
    }

    .swan-text {
        top: 1%;
    }

    .heart-text {
        top: 20%;
    }

    .blood-text, .lung-text {
        top: 14%;
    }
    
    .treatments .treatment img {
        max-width: 60px;
    }
}

@media (max-height: 200px) and (orientation: landscape) {
    .million-text-box-blurred, .joints-text-box-blurred, .immune-text-box {
        max-width: 88vw;
        padding: 12vh 2vh;
    }

    .immune-text-box {
        max-width: 88vw;
        padding: 0.5rem;
    }
    
    .blur-box-left {
        left: 0;
    }
    
    .text-box-left {
        left: 1rem;
    }
    
    .heart-text {
        top: 5%;
    }

    .bones-wrapper, .membrane-text, .blood-text, .lung-text {
        top: 1%;
    }
}

@media (orientation: landscape) and (min-aspect-ratio: 1/1) {
    .stage-text {
        top: calc(100% - 8vh);
    }
}

@media (orientation: landscape) and (min-aspect-ratio: 4/3) {
    .stage-text {
        top: calc(100% - 6vh);
    }
}

@media (orientation: landscape) and (min-aspect-ratio: 3/2) {
    .stage-text {
        top: calc(100% - 8vh);
    }
}

@media (orientation: landscape) and (min-aspect-ratio: 9/5) {
    .stage-text {
        top: calc(100% - 5vh);
    }
}

@media (orientation: landscape) and (min-aspect-ratio: 11/5) {
    .stage-text {
        top: calc(100% + 3vh);
    }
}

@media (orientation: landscape) and (max-aspect-ratio: 3/2) {
    .treatments-content {
        width: calc((100vw * 6) - 100vh);
    }

    .white-border-box, .treatments-bg {
        width: calc(100vw - 10vh);
    }

    .video-title {
        width: 70%;
    }
}

@media (max-width: 900px) {
    .blur-box-right, .text-box-right {
        right: 0;
    }

    .blur-box-left, .text-box-left {
        left: 0;
    }

    .blur-box-left, .blur-box-right {
        width: 98%;
        margin: 0 auto;
    }
    
    .million-text-box-blurred, .joints-text-box-blurred {
        max-width: 100%;
        padding: 12vh 2vh;
    }

    .immune-text {
        max-width: 100%;
        padding: 3rem 1.4rem;
    }
}

@media (max-width: 900px) and (max-height: 320px) {
    .million-text-box, .targets-text-box, .joints-text-box {
        transform: translateY(-10vh);
    }

    .immune-text-box {
        transform: translateY(-6vh);
    }

    .immune-text {
        padding: 1rem;
    }
}

@media (max-width: 900px) and (max-height: 360px) {
    .testimonials-title {
        top: 5%;
        left: 2%;
    }
    
    .testimonial1, .testimonial2, .testimonial3 {
        width: 96%;
    }
}

@media (min-width: 1024px) and (min-height: 768px) and (orientation: landscape) {
    .summary {
        transform: translateY(10%);
    }
}

@media (min-width: 560px) {
    .video-title {
        width: 60%;
    }
}

/* PORTRAIT */

@media (orientation: portrait) {
    body {
        font-size: calc(22px + (30 - 22) * (100vw - 400px) / (1025 - 400));
        line-height: calc(30px + (40 - 30) * (100vw - 400px) / (1025 - 400));
    }

    .text-highlighted {
        font-size: calc(32px + (56 - 32) * (100vw - 400px) / (1025 - 400));
        line-height: calc(30px + (40 - 30) * (100vw - 400px) / (1025 - 400));
    }

    .pointer-text-wrapper-mod {
        width: 96%;
    }

    .text-only {
        font-size: calc(36px + (60 - 36) * (100vw - 400px) / (1025 - 400));
        line-height: calc(40px + (52 - 40) * (100vh - 400px) / (1025 - 400));
    }

    .text-only .text-highlighted {
        font-size: calc(48px + (72 - 48) * (100vw - 400px) / (1025 - 400));
        line-height: calc(48px + (72 - 48) * (100vw - 400px) / (1025 - 400));
    }

    .hope-text .text-highlighted {
        line-height: calc(38px + (72 - 38) * (100vw - 400px) / (1025 - 400));
    }

    .stage-text {
        top: -2em;
    }

    .treatments-wrapper {
        top: -10%;
    }

    .treatment-title {
        top: 30%;
        left: 1.6em;
    }

    .treatments-content {
        width: calc((100vw * 9) - 100vh);
    }
    
    .treatments .treatment {
        width: 80vw;
    }

    .white-border-box, .treatments-bg {
        width: 92vw;
    }

    .lifestyle-title {
        position: relative;
        width: fit-content;
        left: 50%;
        transform: translateX(-50%);
        top: 28%;
    }

    .lifestyle-title {
        font-size: calc(10px + (28 - 10) * (100vh - 400px) / (1025 - 400));
        line-height: calc(10px + (32 - 10) * (100vh - 400px) / (1025 - 400));
    }
    
    .lifestyle-title .text-highlighted {
        font-size: calc(12px + (36 - 12) * (100vh - 400px) / (1025 - 400));
        line-height: calc(12px + (36 - 12) * (100vh - 400px) / (1025 - 400));
    }

    .video-title {
        font-size: calc(18px + (30 - 18) * (100vw - 400px) / (1025 - 400));
    }

    .testimonials {
        width: 90%;
        height: 94%;
    }

    .testimonials-title {
        top: 4%;
        left: 4%;
    }

    .testimonial1, .testimonial2, .testimonial3 {
        width: 96%;
    }

    .testimonials-title {
        font-size: calc(18px + (34 - 18) * (100vw - 400px) / (1025 - 400));
        line-height: calc(20px + (40 - 20) * (100vw - 400px) / (1025 - 400));
    }

    .testimonials-title div {
        font-size: calc(24px + (58 - 24) * (100vw - 400px) / (1025 - 400));
        line-height: calc(34px + (68 - 34) * (100vw - 400px) / (1025 - 400));
    }

    .testimonial {
        font-size: calc(16px + (30 - 16) * (100vh - 400px) / (1025 - 400));
        line-height: calc(16px + (36 - 16) * (100vh - 400px) / (1025 - 400));
    }

    .testimonial-items {
        top: -6%;
    }

    .scrollIcon {
        font-size: calc(20px + (32 - 20) * (100vw - 400px) / (1025 - 400));
    }

    .navigationMenuWrapper {
        max-width: 90%;
        padding: 4% 2% 2% 2%;
    }

    .wrapper-title, .dim-wrapper {
        padding-left: 5vw;
    }

    .summary {
        font-size: calc(16px + (40 - 16) * (100vh - 400px) / (1025 - 400));
        line-height: calc(40px + (52 - 40) * (100vh - 400px) / (1025 - 400));
    }

    .stop-experience {
        width: 5vw;
        height: 5vw;
        top: 3vw;
        right: 3vw;
    }

    .hamburger-menu {
        width: 5.6vw;
        top: 3vw;
        left: 3vw;
    }

    .resume-experience-content {
        font-size: calc(12px + (30 - 12) * (100vh - 400px) / (1025 - 400));
        line-height: calc(24px + (38 - 24) * (100vh - 400px) / (1025 - 400));
    }

    .resume-experience-button {
        font-size: calc(10px + (14 - 10) * (100vh - 400px) / (1025 - 400));
        line-height: calc(14px + (28 - 14) * (100vh - 400px) / (1025 - 400));
    }
    
    .other-organs, .hope-text {
        transform: translateY(-10%);
    }

    .video-title {
        width: 100%;
        height: 7vw;
        top: 2vw;
        border-radius: 0;
    }
}

@media (max-height: 1400px) and (orientation: portrait) {
    .bones-wrapper {
        top: 24%;
    }

    .membrane-text {
        top: 20%;
    }

    .synovial-text {
        top: 18%;
    }

    .stage-cartilage-text, .stage-bone-text, .stage-fuse-text {
        top: 16%;
    }
    
    .thumb-text {
        bottom: 16%;
    }

    .nodules-text {
        top: 16%;
    }
    
    .boutonniere-text {
        top: 14%;
    }

    .swan-text {
        top: 20%;
    }
}

@media (max-height: 1024px) and (orientation: portrait) {
    .bones-wrapper {
        top: 20%;
    }

    .membrane-text {
        top: 16%;
    }

    .synovial-text {
        top: 14%;
    }

    .stage-cartilage-text, .stage-bone-text, .stage-fuse-text {
        top: 12%;
    }

    .stage-fuse-text .stage {
        font-size: calc(18px + (36 - 18) * (100vw - 400px) / (1025 - 400));
        line-height: calc(26px + (36 - 26) * (100vw - 400px) / (1025 - 400));
    }

    .stage-fuse-text .stage .text-highlighted {
        font-size: calc(28px + (52 - 28) * (100vw - 400px) / (1025 - 400));
        line-height: calc(26px + (36 - 26) * (100vw - 400px) / (1025 - 400));
    }

    .boutonniere-text {
        top: 10%;
    }

    .swan-text {
        top: 16%;
    }

    .blood-text, .lung-text {
        top: 26%;
    }

    .stop-experience {
        width: 6vw;
        height: 6vw;
        top: 3vw;
        right: 3vw;
    }

    .hamburger-menu {
        width: 6.7vw;
        height: 7vw;
        top: 3vw;
        left: 3vw;
    }

    .video-title {
        height: 8vw;
        top: 2vw;
    }

    .video-title-content div {
        font-size: calc(10px + (40 - 12) * (100vh - 320px) / (1025 - 320));
    }
}

@media (max-height: 900px) and (orientation: portrait) {
    .bones-wrapper {
        top: 16%;
    }

    .membrane-text {
        top: 12%;
    }

    .cartilage-text {
        top: 11%;
    }

    .synovial-text {
        top: 6%;
    }

    .stage-cartilage-text {
        top: 6%;
    }

    .stage-bone-text, .stage-fuse-text {
        top: 5%;
    }
    
    .thumb-text {
        bottom: 10%;
    }

    .nodules-text {
        top: 10%;
    }

    .boutonniere-text {
        top: 5%;
    }
    
    .heart-text {
        top: 26%;
    }

    .blood-text, .lung-text {
        top: 20%;
    }

    .lifestyle-items {
        top: -12%;
    }

    .lifestyle-item-content img {
        width: 160px;
        height: auto;
    }

    .stop-experience {
        width: 7vw;
        height: 7vw;
        top: 2vw;
        right: 2vw;
    }

    .hamburger-menu {
        width: 7.8vw;
        top: 2vw;
        left: 2vw;
    }

    .video-title {
        height: 9vw;
        top: 1vw;
        font-size: calc(14px + (20 - 14) * (100vh - 320px) / (1025 - 320));
    }

    .video-title-content div {
        font-size: calc(10px + (28 - 10) * (100vh - 320px) / (1025 - 320));
        /*line-height: calc(24px + (48 - 24) * (100vh - 320px) / (1025 - 320));*/
        padding-top: 1.2vh;
    }
}

@media (max-height: 700px) and (orientation: portrait) {
    .bones-wrapper {
        top: 14%;
    }

    .membrane-text {
        top: 6%;
    }

    .stage-cartilage-text {
        top: 5%;
    }

    .stage-fuse-text {
        top: 4%;
    }

    .stage {
        font-size: calc(20px + (38 - 20) * (100vw - 400px) / (1025 - 400));
        line-height: calc(28px + (38 - 28) * (100vw - 400px) / (1025 - 400));
    }

    .stage .text-highlighted {
        font-size: calc(30px + (54 - 30) * (100vw - 400px) / (1025 - 400));
        line-height: calc(28px + (38 - 28) * (100vw - 400px) / (1025 - 400));
    }

    .thumb-text {
        bottom: 6%;
    }

    .nodules-text {
        top: 4%;
    }

    .boutonniere-text {
        top: 3%;
    }

    .swan-text {
        top: 12%;
    }

    .heart-text {
        top: 22%;
    }

    .blood-text, .lung-text {
        top: 18%;
    }
    
    .lifestyle-items {
        top: -14%;
    }

    .lifestyle-item {
        font-size: 1.3rem;
        line-height: 1.9rem;
    }

    .lifestyle-item-title {
        font-size: 1.54rem;
    }

    .lifestyle-item-content {
        width: 50%;
    }

    .lifestyle-item-content img {
        width: 130px;
        height: auto;
    }
}

@media (max-height: 600px) and (orientation: portrait) {
    .cartilage-text {
        top: 8%;
    }
    
    .stage {
        font-size: calc(18px + (36 - 18) * (100vw - 400px) / (1025 - 400));
        line-height: calc(26px + (36 - 26) * (100vw - 400px) / (1025 - 400));
    }

    .stage .text-highlighted {
        font-size: calc(28px + (52 - 28) * (100vw - 400px) / (1025 - 400));
        line-height: calc(26px + (36 - 26) * (100vw - 400px) / (1025 - 400));
    }

    .stage-fuse-text .stage {
        font-size: calc(16px + (34 - 16) * (100vw - 400px) / (1025 - 400));
        line-height: calc(24px + (34 - 24) * (100vw - 400px) / (1025 - 400));
    }

    .stage-fuse-text .stage .text-highlighted {
        font-size: calc(26px + (50 - 26) * (100vw - 400px) / (1025 - 400));
        line-height: calc(24px + (34 - 24) * (100vw - 400px) / (1025 - 400));
    }

    .nodules-text {
        top: 3%;
    }

    .boutonniere-text {
        top: 1%;
    }

    .blood-text, .lung-text {
        top: 16%;
    }

    .treatments .treatments-text {
        line-height: calc(18px + (28 - 18) * (100vh - 400px) / (1025 - 400));
    }

    .lifestyle-item {
        font-size: 1.2rem;
        line-height: 1.8rem;
    }

    .lifestyle-item-title {
        font-size: 1.5rem;
    }

    .lifestyle-item-content img {
        width: 120px;
    }

    .navigationMenuItem {
        padding: 10px 16px 4px 16px;
    }
}

@media (max-height: 500px) and (orientation: portrait) {
    .treatments .treatments-text {
        padding-top: 2vh;
    }
}

@media (max-height: 300px) and (orientation: portrait) {
    .testimonial {
        font-size: calc(12px + (30 - 12) * (100vw - 400px) / (1025 - 400));
        line-height: calc(20px + (40 - 20) * (100vw - 400px) / (1025 - 400));
    }
}

@media (max-aspect-ratio: 99/100) {
    .blur-box-right, .text-box-right {
        float: none;
        right: 0;
    }

    .blur-box-left, .text-box-left {
        left: 0;
    }

    .blur-box-left, .blur-box-right {
        width: 98%;
        margin: 0 auto;
    }

    .million-text-box-blurred, .joints-text-box-blurred {
        max-width: 100%;
        padding: 10vh 2vh;
    }

    .immune-text {
        max-width: 100%;
        padding: 3rem 1.4rem;
    }
}

/* Very tall and narrow */
@media (max-aspect-ratio: 1/4) {
    .thumb-text {
        bottom: 1%;
    }
    
    .bones-wrapper, .membrane-text, .cartilage-text, .synovial-text, .stage-cartilage-text, .stage-bone-text, .stage-fuse-text, .nodules-text, .boutonniere-text, .heart-text, .blood-text, .lung-text {
        top: 1%;
    }

    .swan-text {
        top: 6%;
    }

    .stage {
        font-size: calc(18px + (36 - 18) * (100vw - 400px) / (1025 - 400));
        line-height: calc(26px + (36 - 26) * (100vw - 400px) / (1025 - 400));
    }

    .stage .text-highlighted {
        font-size: calc(28px + (52 - 28) * (100vw - 400px) / (1025 - 400));
        line-height: calc(26px + (36 - 26) * (100vw - 400px) / (1025 - 400));
    }
}

@media (max-aspect-ratio: 1/2) {
    .lifestyle-title {
        top: 32%;
        font-size: calc(8px + (24 - 8) * (100vh - 400px) / (1025 - 400));
    }

    .lifestyle-title .text-highlighted {
        font-size: calc(10px + (28 - 10) * (100vh - 400px) / (1025 - 400));
    }

    .lifestyle-item-content {
        width: 58%;
    }
}

@media (min-width: 500px) and (orientation: portrait) {
    .summary {
        transform: translateY(25%);
    }
}

@media (min-width: 700px) and (min-height: 1024px) and (orientation: portrait) {
    .summary {
        transform: translateY(55%);
    }

    .navigationMenuWrapper {
        max-width: 70%;
    }
}

@media (max-width: 500px) and (orientation: portrait) {
    .video-title-content {
        font-size: calc(12px + (20 - 14) * (100vh - 320px) / (1025 - 320));
    }
    
    .video-title-content div {
        font-size: calc(8px + (28 - 12) * (100vh - 320px) / (1025 - 320));
    }
}

@media (max-width: 400px) and (orientation: portrait) {
    .million-text-box, .targets-text-box, .joints-text-box, .immune-text-box {
        transform: translateY(-3vh);
    }

    .million-text-box-blurred {
        padding: 7.6vh 3vh;
    }

    .treatments-wrapper {
        top: -15%;
    }

    .treatment-title {
        top: 20%;
        left: 1.2em;
    }

    .lifestyle-title {
        top: 40%;
        font-size: calc(8px + (24 - 8) * (100vh - 400px) / (1025 - 400));
    }

    .lifestyle-title .text-highlighted {
        font-size: calc(10px + (28 - 10) * (100vh - 400px) / (1025 - 400));
    }

    .testimonial {
        font-size: calc(16px + (28 - 16) * (100vh - 400px) / (1025 - 400));
    }
}

@media (max-width: 360px) and (orientation: portrait) {
    .summary, .text-only {
        font-size: calc(16px + (38 - 16) * (100vh - 400px) / (1025 - 400));
        line-height: calc(40px + (40 - 40) * (100vh - 400px) / (1025 - 400));
    }
}

@media (max-width: 320px) and (orientation: portrait) {
    .million-text-box, .targets-text-box, .joints-text-box {
        transform: translateY(-4vh);
    }
    
    .immune-text-box {
        transform: translateY(-8vh);
    }
    
    .million-text-box-blurred {
        padding: 8vh 2vh;
    }

    .navigationMenuItemWrapper .grElements {
        width: 28px;
    }

    .navigationMenuItem {
        padding: 10px 14px 4px 14px;
    }
}