/* LANDSCAPE */

@media (orientation: landscape) {
    .quote-subtitle {
        max-width: 65%;
    }

    .blood-vessels-wrapper {
        top: 16%;
    }
}

@media (max-height: 1024px) and (orientation: landscape) {
    .subtitle-size-3 {
        margin-top: 2%;
    }
    
    .preventative-medications {
        width: 80%;
    }

    .lifestyle {
        width: 56vw;
    }

    .nerves-wrapper {
        width: 64%;
    }

    .migraine-overview {
        width: 80%;
    }

    .prodrome-wrapper {
        width: 84%;
        top: 16%;
    }

    .aura-wrapper {
        width: 80%;
        top: 20%;
    }

    .migraines-stage {
        width: 78vh;
    }

    .heart-attack-wrapper {
        top: 26%;
    }

    .quote {
        width: 48vw;
    }

    .quote-text {
        padding: 6% 12%;
    }

    .quote-arrow {
        transform: translateX(-50%) translateY(-54%) rotate(45deg);
    }
}

@media (max-height: 820px) and (orientation: landscape) {
    .control-your-life-wrapper {
        width: 44%;
    }

    .treatment-icon-wrapper {
        top: 55%;
    }

    .treatments-title {
        top: 48%;
    }

    .encouragement-title .subtitle-size-3 {
        font-size: calc(0.9rem + ((1vw - 2.4px) * 1.0));
        line-height: calc(1.25rem + ((1vw - 2.4px) * 1.3));
        font-weight: 300;
    }

    .quote {
        width: 56vw;
    }
}

@media (max-height: 768px) and (orientation: landscape) {
    .control-your-life-wrapper {
        width: 50%;
    }
}

@media (max-height: 640px) and (orientation: landscape) {
    .navigationMenuWrapper {
        max-width: 80%;
        min-width: 60%;
    }
    
    .navigationMenuTitle {
        white-space: nowrap;
    }
    
    .text-title {
        top: 12%;
    }
    
    .migraine-overview, .living-with-migraines {
        top: 63%;
    }

    .prodrome-wrapper {
        top: 11%;
    }

    .aura-wrapper {
        top: 15%;
    }

    .migraines-stage {
        width: 78vh;
    }

    .migraines-stage-1, .migraines-stage-2 {
        font-size: calc(1.2rem + ((1vh - 2.4px) * 1.5));
        line-height: calc(1.25rem + ((1vh - 2.4px) * 2.95));
    }

    .heart-attack-wrapper {
        top: 22%;
    }

    .predispose-wrapper {
        width: 78%;
    }

    .disorders-wrapper {
        width: 80%;
    }

    .treatment-icon-wrapper {
        top: 58%;
    }

    .treatments-title {
        top: 53%;
    }

    .lifestyle {
        width: 64vw;
    }

    .lifestyle-item {
        position: relative;
        top: -6%;
    }
    
    .quote {
        width: 70vw;
        top: 32%;
        font-size: calc(0.9rem + ((1vw - 2.4px) * 0.5));
        line-height: calc(1.25rem + ((1vw - 2.4px) * 0.75));
    }

    .quote-text {
        padding: 4% 12%;
    }

    .quote-icon {
        top: 32%;
    }

    .summary-wrapper {
        width: 80%;
    }

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

@media (max-height: 414px) and (orientation: landscape) {
    .navigationMenuTitle {
        padding: 0;
    }
    
    .navigationMenuWindow .space {
        height: 10px;
    }
    
    .navigationMenuItem {
        font-size: calc(0.5rem + ((1vh - 2.4px) * 0.75));
        line-height: calc(0.5rem + ((1vh - 2.4px) * 1.0));
        padding: 8px 16px 2px 16px;
    }

    .navigationMenuEmpty {
        height: 1.5vh;
    }
    
    .underline-title-text {
        margin-top: 2%;
    }
    
    .healthy-anatomy, .migraine-overview {
        top: 63%;
        font-size: calc(0.95rem + ((1vw - 2.4px) * 0.75));
        line-height: calc(1.25rem + ((1vw - 2.4px) * 1.1));
    }

    .migraine-overview {
        width: 90%;
    }
    
    .blood-vessels-wrapper {
        width: 70%;
        top: 9%;
    }

    .tracts-wrapper {
        width: 70%;
        top: 16%;
    }

    .nerves-wrapper {
       top: 18%;
    }

    .prodrome-wrapper {
        top: 6%;
    }

    .aura-wrapper {
        top: 10%;
    }

    .attack-wrapper, .postdrome-wrapper {
        top: 8%;
    }

    .migraines-stage {
        width: 82vh;
    }

    .migraines-stage-1-wrapper, .migraines-stage-2-wrapper {
        width: 74vh;
        height: 74vh;
        border-width: 3px;
    }

    .migraines-stage-1, .migraines-stage-2 {
        font-size: calc(1.0rem + ((1vh - 2.4px) * 1.5));
        line-height: calc(1.1rem + ((1vh - 2.4px) * 2.5));
    }

    .infographic-circle-inner, .infographic-circle-outer {
        width: 70vh;
        height: 70vh;
        border-width: 2px;
    }

    .infographic-circle-outer {
        width: 79vh;
        height: 79vh;
    }

    .heart-attack-wrapper {
        width: 80%;
        top: 16%;
    }

    .predispose-wrapper {
        width: 90%;
    }

    .predispose-wrapper {
        top: 64%;
    }

    .predispose-wrapper {
        width: 70%;
    }

    .control-your-life-wrapper {
        width: 60%;
        top: -2%;
    }

    .control-your-life .highlight {
        font-size: calc(2.25rem + ((1vw - 2.4px) * 1.9));
    }

    .preventative-medications-title {
        margin-bottom: 1%;
    }

    .preventative-medications {
        top: 8%;
        line-height: calc(1.2rem + ((1vw - 2.4px) * 1.28));
    }

    .preventative-medications .blue-section-top-text {
        font-size: calc(1.0rem + ((1vw - 2.4px) * 1.25));
    }

    .treatments-title {
        top: 58%;
    }

    .treatment-icon-wrapper {
        top: 62%;
    }

    .treatment-icon {
        width: 30vh;
        height: 30vh;
    }

    .treatments-title {
        padding: 0 2%;
    }
    
    .treatments-title-text {
        font-size: calc(1.0rem + ((1vw - 2.4px) * 1.2));
    }
    
    .lifestyle {
        width: 65vw;
        font-size: calc(1.0rem + ((1vw - 2.4px) * 0.75));
        line-height: calc(1.25rem + ((1vw - 2.4px) * 1.38));
    }

    .lifestyle-icon-wrapper {
        width: 18vh;
        height: 18vh;
    }

    .encouragement-title {
        width: 90%;
        top: 5vh;
        left: 0;
        margin: 0 auto;
        text-align: center;
    }

    .encouragement-title .quote-subtitle {
       max-width: 100%;
    }

    .quote {
        width: 90vw;
        top: 26%;
    }

    .quote-text {
        padding: 3% 8%;
    }

    .quote .underline {
        border-width: 1px;
    }

    .quote-icon {
        top: 26%;
    }

    .summary-text {
        font-size: calc(1.15rem + ((1vw - 2.4px) * 1.5));
        line-height: calc(1.2rem + ((1vw - 2.4px) * 2.5));
    }

    .summary-text .highlight {
        font-size: calc(2.0rem + ((1vw - 2.4px) * 1.75));
        font-weight: 600;
    }
}

@media (max-height: 414px) and (min-aspect-ratio: 2/1) and (orientation: landscape) {
    .prodrome-wrapper {
        top: 3%;
    }

    .heart-attack-wrapper {
        top: 18%;
    }

    .predispose-wrapper {
        width: 86%;
        top: 66%;
    }

    .disorders-wrapper {
        top: 19%;
    }

    .control-your-life-wrapper {
        width: 52%;
        top: -7% !important;
    }

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

@media (max-height: 380px) and (orientation: landscape) {
    body {
        line-height: calc(1.35rem + ((1vw - 2.4px) * 1.3));
    }

    .navigationMenuWrapper {
        min-width: 64%;
    }
    
    .title-size-3 {
        font-size: calc(1.0rem + ((1vw - 2.4px) * 0.75));
    }
    
    .subtitle-size-3 {
         font-size: calc(1.0rem + ((1vw - 2.4px) * 0.75));
     }
    
    .healthy-anatomy .underline-title-text {
        margin-top: 1%;
    }

    .blood-vessels-wrapper, .tracts-wrapper {
        width: 80%;
    }

    .migraine-overview {
        width: 96%;
        line-height: calc(1.1rem + ((1vw - 2.4px) * 1.0));
    }

    .aura-wrapper {
        top: 6%;
    }

    .attack-wrapper {
        top: 5%;
    }

    .postdrome-wrapper {
        top: 8%;
    }

    .heart-attack-wrapper {
        top: 14%;
    }

    .predispose-wrapper {
        top: 64%;
    }

    .disorders-wrapper {
        width: 90%;
        top: 20%;
    }

    .control-your-life-wrapper {
        width: 66%;
        top: -4%;
    }

    .preventative-medications {
        line-height: calc(1.1rem + ((1vw - 2.4px) * 1.28));
    }

    .lifestyle {
        font-size: calc(0.9rem + ((1vw - 2.4px) * 0.75));
        line-height: calc(1.0rem + ((1vw - 2.4px) * 1.38));
    }

    .quote {
        top: 27%;
    }

    .quote-text {
        padding: 2% 8%;
    }
    
    .quote-icon {
        top: 27%;
    }

    .quote-arrow {
        transform: translateX(-50%) translateY(-74%) rotate(45deg);
    }

    .summary-text {
        font-size: calc(1.05rem + ((1vw - 2.4px) * 1.5));
        line-height: calc(1.1rem + ((1vw - 2.4px) * 2.5));
    }

    .summary-text .highlight {
        font-size: calc(1.8rem + ((1vw - 2.4px) * 1.75));
        font-weight: 600;
    }
}

@media (max-height: 320px) and (orientation: landscape) {
    .navigationMenuWindow .space {
        height: 10px;
    }

    .navigationMenuWrapper {
        max-width: 90%;
        min-width: 80%;
    }

    .navigationMenuItem {
        font-size: calc(0.5rem + ((1vh - 2.4px) * 0.5));
        line-height: calc(0.5rem + ((1vh - 2.4px) * 1.0));
        padding: 6px 12px 2px 12px;
    }
     
    .healthy-anatomy, .migraine-overview {
        font-size: calc(0.85rem + ((1vw - 2.4px) * 0.75));
    }

    .nerves-wrapper {
        width: 80%;
    }

    .prodrome-wrapper {
        top: 3%;
    }

    .migraines-stage-1, .migraines-stage-2 {
        font-size: calc(0.9rem + ((1vh - 2.4px) * 1.5));
    }

    .heart-attack-wrapper {
        top: 12%;
    }

    .predispose-wrapper {
        width: 90%;
        top: 62%;
    }

    .control-your-life-wrapper {
        width: 62%;
        top: -6%;
    }

    .control-your-life .highlight {
        font-size: calc(2.15rem + ((1vw - 2.4px) * 1.9));
        line-height: calc(1.4rem + ((1vw - 2.4px) * 2.6));
    }
    
    .preventative-medications .blue-section-top-text {
        font-weight: 400 !important;
        font-size: calc(0.9rem + ((1vw - 2.4px) * 1.25));
    }

    .preventative-medications {
        top: 7%;
        font-size: calc(0.9rem + ((1vw - 2.4px) * 0.65));
        line-height: calc(1.0rem + ((1vw - 2.4px) * 1.28));
    }

    .treatment-icon {
        width: 26vh;
        height: 26vh;
    }
    
    .quote {
        width: 98vw;
        font-size: calc(0.85rem + ((1vw - 2.4px) * 0.5));
        line-height: calc(1.05rem + ((1vw - 2.4px) * 0.75));
    }

    .encouragement-title .subtitle-size-3 {
        margin-top: 1%;
        font-size: calc(0.75rem + ((1vw - 2.4px) * 1.0));
    }

    .quote-text .title-size-3 {
        font-size: calc(0.8rem + ((1vw - 2.4px) * 0.75));
        line-height: 1.0rem;
    }

    .summary-text {
        font-size: calc(0.9rem + ((1vw - 2.4px) * 1.5));
        line-height: calc(1.0rem + ((1vw - 2.4px) * 2.25));
    }

    .summary-text .highlight {
        font-size: calc(1.5rem + ((1vw - 2.4px) * 1.75));
        font-weight: 600;
    }

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

@media (max-width: 1280px) and (orientation: landscape) {
    .healthy-anatomy {
        width: 94%;
    }
}

/* PORTRAIT */

@media (orientation: portrait) {

    body {
        font-size: calc(1.125rem + ((1vw - 2.4px) * 3.05));
        line-height: calc(1.45rem + ((1vw - 2.4px) * 3.05));
    }

    .content-container {
        width: 90%;
    }
    
    .title-size-1 {
        font-size: calc(1.5rem + ((1vw - 2.4px) * 4.6));
        line-height: calc(2.1rem + ((1vw - 2.4px) * 5.2));
    }

    .title-size-3 {
        font-size: calc(1.25rem + ((1vh - 2.4px) * 0.75));
    }

    .subtitle-size-3 {
        font-size: calc(1.25rem + ((1vh - 2.4px) * 1.0));
        line-height: calc(1.5rem + ((1vh - 2.4px) * 1.5));
        margin-top: 4px;
    }

    .text-title-wrapper, .summary-wrapper {
        width: 100%;
    }
    
    .text-title {
        white-space: normal;
        top: 14%;
    }

    .text-title .highlight {
        font-size: calc(2.75rem + ((1vw - 2.4px) * 4.6));
        display: inline-block;
        padding-top: 3%;
    }

    .what-is-migraine-wrapper {
        text-align: center;
        left: 0;
    }

    .underline-title-text {
        margin-top: 6%;
    }

    .blue-section {
        width: 98%;
        top: 64%;
    }

    .blood-vessels-wrapper {
        width: 98%;
        top: 12%;
    }

    .tracts-wrapper {
        width: 98%;
        top: 16%;
    }

    .nerves-wrapper {
        width: 98%;
        top: 16%;
    }

    .prodrome-wrapper {
        width: 98%;
        top: 16%;
    }

    .aura-wrapper {
        width: 98%;
        top: 20%;
    }

    .attack-wrapper, .postdrome-wrapper, .heart-attack-wrapper, .predispose-wrapper, .disorders-wrapper {
        width: 98%;
    }

    .migraines-stage-1-wrapper, .migraines-stage-2-wrapper {
        width: 98vw;
        height: 98vw;
        margin: 0 auto;
        float: none;
    }
    
    .migraines-stage {
        width: 100%;
    }
    
    .infographic-circle-inner {
        width: 94vw;
        height: 94vw;
    }

    .infographic-circle-outer {
        width: 102vw;
        height: 102vw;
    }

    .living-with-migraines-shift {
        position: relative;
        transform: translateY(25%);
    }

    .preventative-medications {
        width: 100%;
        top: 12%;
        left: 2%;
    }
    
    .main-title {
        border-width: 2px;
        font-size: calc(1.5rem + ((1vw - 2.4px) * 2.5));
        line-height: calc(2.5rem + ((1vw - 2.4px) * 2.75));
        padding-top: 5%;
    }

    .text-main-title {
        font-size: calc(4.0rem + ((1vw - 2.4px) * 3.8));
        line-height: calc(2.0rem + ((1vw - 2.4px) * 2.75));
        white-space: normal;
    }

    .treatments-title {
        padding: 0.3% 2%;
        top: 53%;
    }

    .treatment-icon-wrapper {
        top: 57%;
        width: 180%;
    }

    .treatment-icon {
        width: 24vh;
        height: 24vh;
    }
    
    .lifestyle {
        width: 96vw;
        border-radius: 200px;
    }

    .lifestyle-text {
        padding: 2% 14%;
    }
    
    .lifestyle-item {
        position: relative;
        top: -5%;
    }

    .lifestyle-line {
        position: relative;
    }

    .encouragement-title {
        max-width: 90%;
    }

    .quote {
        width: 96vw;
        border-radius: 200px;
    }

    .quote-text {
        padding: 8% 14%;
    }

    .quote-arrow {
        width: 16vh;
        height: 16vh;
    }

    .quote-icon {
        margin-top: 8vh;
    }

    .video video {
        height: 100%;
    }

    .summary-wrapper {
        width: 100%;
    }

    .summary-text {
        line-height: calc(1.75rem + ((1vw - 2.4px) * 2.6));
        top: 16%;
    }

    .summary-text .highlight {
        font-size: calc(2.1rem + ((1vw - 2.4px) * 1.25));
    }
    
    .migraine-types-wrapper, .lifestyle-title-wrapper, .encouragement-title {
        top: 5vh;
    }
}

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

    .tracts-wrapper {
        top: 20%;
    }

    .nerves-wrapper {
        top: 20%;
    }

    .prodrome-wrapper {
        top: 10%;
    }

    .aura-wrapper {
        top: 14%;
    }

    .attack-wrapper {
        top: 12%;
    }

    .postdrome-wrapper {
        top: 14%;
    }

    .migraines-stage-1-wrapper, .migraines-stage-2-wrapper {
        width: 78vw;
        height: 78vw;
    }

    .infographic-circle-inner {
        width: 74vw;
        height: 74vw;
    }

    .infographic-circle-outer {
        width: 82vw;
        height: 82vw;
    }

    .migraines-stage-1, .migraines-stage-2 {
        font-size: calc(1.5rem + ((1vh - 2.4px) * 0.9));
        line-height: calc(1.7rem + ((1vh - 2.4px) * 1.8));
    }

    .heart-attack-wrapper {
        top: 22%;
    }

    .predispose-wrapper {
        top: 70%;
    }

    .disorders-wrapper {
        top: 20%;
    }

    .control-your-life-wrapper {
        width: 90%;
    }

    .lifestyle-line {
        top: 5vh;
    }
}

@media (min-height: 960px) and (orientation: portrait) {
    .title-size-2 {
        font-size: calc(1.25rem + ((1vw - 2.4px) * 1.75));
    }
}

@media (max-height: 960px) and (orientation: portrait) {
    .prodrome-wrapper {
        top: 12%;
    }

    .aura-wrapper {
        top: 16%;
    }

    .attack-wrapper {
        top: 14%;
    }

    .postdrome-wrapper {
        top: 16%;
    }

    .migraines-stage-1-wrapper, .migraines-stage-2-wrapper {
        width: 88vw;
        height: 88vw;
        border-width: 3px;
    }

    .infographic-circle-inner {
        width: 84vw;
        height: 84vw;
        border-width: 2px;
    }

    .infographic-circle-outer {
        width: 94vw;
        height: 94vw;
        border-width: 2px;
    }

    .migraines-stage-1, .migraines-stage-2 {
        font-size: calc(1.1rem + ((1vh - 2.4px) * 0.9));
        line-height: calc(1.5rem + ((1vh - 2.4px) * 1.8));
    }

    .heart-attack-wrapper {
        top: 22%;
    }

    .predispose-wrapper {
        top: 68%;
    }

    .disorders-wrapper {
        top: 20%;
    }

    .control-your-life-wrapper {
        width: 98%;
    }

    .control-your-life {
        top: 10%;
    }
}

@media (max-height: 740px) and (orientation: portrait) {
    .text-title {
        top: 12%;
    }

    .blood-vessels-wrapper {
        top: 14%;
    }

    .tracts-wrapper {
        top: 18%;
    }

    .nerves-wrapper {
        top: 18%;
    }

    .prodrome-wrapper {
        top: 8%;
    }

    .aura-wrapper {
        top: 12%;
    }

    .attack-wrapper {
        top: 10%;
    }

    .postdrome-wrapper {
        top: 12%;
    }

    .heart-attack-wrapper {
        top: 18%;
    }

    .disorders-wrapper {
        top: 16%;
    }

    .summary-text {
        top: 12%;
    }

    .lifestyle-line {
        top: 1vh;
    }
}

@media (max-height: 667px) and (orientation: portrait) {
    .blood-vessels-wrapper {
        top: 12%;
    }

    .tracts-wrapper {
        top: 16%;
    }

    .nerves-wrapper {
        top: 16%;
    }
    
    .aura-wrapper {
        top: 10%;
    }

    .attack-wrapper {
        top: 8%;
    }

    .postdrome-wrapper {
        top: 12%;
    }

    .heart-attack-wrapper {
        top: 16%;
    }
}

@media (max-height: 640px) and (orientation: portrait) {
    .control-your-life {
        top: 6%;
    }

    .summary-text {
        top: 10%;
    }

    .lifestyle-line {
        top: -1vh;
    }
}

@media (max-height: 568px) and (orientation: portrait) {
    .prodrome-wrapper {
        top: 6%;
    }
}

@media (min-width: 768px) and (orientation: portrait) {
    body {
        font-size: calc(1.3rem + ((1vw - 2.4px) * 3.05));
        line-height: calc(1.85rem + ((1vw - 2.4px) * 3.05));
    }

    .migraine-types-wrapper, .lifestyle-title-wrapper, .encouragement-title {
        top: 10vh;
    }
    
    .blue-section {
        font-size: calc(1.3rem + ((1vw - 2.4px) * 0.95));
        line-height: calc(1.7rem + ((1vw - 2.4px) * 1.58));
        top: 72%;
    }

    .blue-section-top-text {
        font-size: calc(1.425rem + ((1vw - 2.4px) * 1.68));
        font-weight: 300;
    }
    
    .lifestyle {
        font-size: calc(1.3rem + ((1vw - 2.4px) * 0.95));
        line-height: calc(1.7rem + ((1vw - 2.4px) * 1.58));
    }
}

@media (min-width: 600px) and (orientation: portrait) {
    .treatments-title {
        top: 40%;
    }
    
    .treatment-icon-wrapper {
        top: 50%;
        width: 156%;
    }

    .treatment-icon {
        width: 26vh;
        height: 26vh;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    .what-is-migraine-wrapper {
        max-width: 100%;
        right: 0;
    }
}

@media (max-width: 760px) and (orientation: portrait) {
    .migraine-types-wrapper, .lifestyle-title-wrapper, .encouragement-title {
        left: 0;
        margin: 0 auto;
        text-align: center;
    }
}

@media (max-width: 500px) and (orientation: portrait) {
    .lifestyle, .quote {
        width: 120%;
    }
}

@media (max-width: 400px) and (orientation: portrait) {
    .migraines-stage-1-wrapper, .migraines-stage-2-wrapper {
        width: 96vw;
        height: 96vw;
    }

    .infographic-circle-inner {
        width: 92vw;
        height: 92vw;
    }

    .infographic-circle-outer {
        width: 102vw;
        height: 102vw;
    }
}

@media (max-width: 375px) and (orientation: portrait) {
    .treatments-title {
        top: 55%;
    }

    .treatment-icon-wrapper {
        top: 60%;
    }
}

@media (max-width: 360px) and (orientation: portrait) {
    .treatments-title {
        top: 60%;
    }

    .treatment-icon-wrapper {
        top: 65%;
    }
}

@media (max-width: 320px) and (orientation: portrait) {
    .migraines-stage-1, .migraines-stage-2 {
        font-size: calc(1.0rem + ((1vh - 2.4px) * 0.9));
        line-height: calc(1.4rem + ((1vh - 2.4px) * 1.8));
    }
    
    .blue-section-small-text {
        font-size: 1rem;
        line-height: calc(1.25rem + ((1vw - 2.4px) * 1.3));
    }
    
    .encouragement-title .subtitle-size-3 {
        font-size: calc(1.0rem + ((1vh - 2.4px) * 1.0));
        line-height: calc(1.25rem + ((1vh - 2.4px) * 1.5));
        font-weight: 300;
        margin-top: 6px;
    }
}


/* Touch screens */
@media only screen and (hover: none) and (pointer: coarse) {
    .non-touch-screen {
        display: none;
    }

    .touch-screen {
        display: block;
    }
}

/**********************************************************************************/


@media (max-height: 700px) and (orientation: landscape) {
    .stop-experience {
        width: 7vh;
        height: 7vh;
        top: 4vh;
        right: 4vh;
    }

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

/* PORTRAIT */

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

    .navigationMenuWrapper {
        max-width: 90%;
        padding: 4% 2% 2% 2%;
    }
    
    .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));
    }
}

@media (max-height: 1024px) and (orientation: portrait) {
    .stop-experience {
        width: 6vw;
        height: 6vw;
        top: 3vw;
        right: 3vw;
    }

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

@media (max-height: 900px) and (orientation: portrait) {
    .stop-experience {
        width: 7vw;
        height: 7vw;
        top: 2vw;
        right: 2vw;
    }

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

@media (max-height: 600px) and (orientation: portrait) {
    .navigationMenuItem {
        padding: 10px 16px 4px 16px;
    }
}


@media (min-width: 700px) and (min-height: 1024px) and (orientation: portrait) {
    .navigationMenuWrapper {
        max-width: 70%;
    }
}


@media (max-width: 320px) and (orientation: portrait) {
    .navigationMenuItemWrapper .grElements {
        width: 28px;
    }

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