@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueUltLt.otf') format('opentype'),
    url('../fonts/HelveticaNeueUltLt.woff') format('woff');
    font-weight: 100;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueTh.otf') format('opentype'),
    url('../fonts/HelveticaNeueTh.woff') format('woff');
    font-weight: 200;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueLt.otf') format('opentype'),
    url('../fonts/HelveticaNeueLt.woff') format('woff');
    font-weight: 300;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueBd.otf') format('opentype'),
    url('../fonts/HelveticaNeueBd.woff') format('woff');
    font-weight: 600;
}

html::-webkit-scrollbar {
    display: none;
}

html {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 1.8rem;
    line-height: 2.3rem;
    font-weight: 200;
    letter-spacing: 0.1rem;
    width: 100%;
    height: 100%;
}

.preload-images {
    display: none;
    position: absolute;
    overflow: hidden;
    left: -50000px;
}

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

.wrapper {
    height: 0vh;
}

.sequence-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    overflow: hidden;
}

.images-container {
    height: 100vh;
}

.wrapper-canvas-sequence {
    z-index: 1;
    opacity: 1;
}

.hidden {
    opacity: 0;
}

/* Preloading */

.loading {
    overflow: hidden;
    height: 100vh;
}

.preloader {
    background: rgba(255, 255, 255, 0.8);
    position: fixed;
    text-align: center;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    z-index:99999;
}

.preloader-inner {
    position: absolute;
    margin: -17px 0 0 -17px;
    left: 50%;
    top: 50%;
    width:35px;
    height:35px;
    padding: 0px;
    border-radius: 100%;
    border: 2px solid;
    border-top-color: rgba(0, 0, 0, 0.65);
    border-bottom-color: rgba(0, 0, 0, 0.15);
    border-left-color: rgba(0, 0, 0, 0.65);
    border-right-color: rgba(0, 0, 0, 0.15);
    -webkit-animation: preloader-inner 0.8s linear infinite;
    animation: preloader-inner 0.8s linear infinite;
}
@keyframes preloader-inner {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-webkit-keyframes preloader-inner {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

.content-container {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
}

.blur-box-right {
    width: 100%;
    position: relative;
    right: 5%;
    height: 100%;
    margin: 0 auto;
}

.text-box-right {
    position: relative;
    float: right;
    right: 1rem;
}

.blur-box-left {
    width: 100%;
    position: relative;
    left: 5%;
    height: 100%;
    margin: 0 auto;
}

.text-box-left {
    position: relative;
    float: left;
    left: 10vw;
}

.wrapper-text-box-blurred {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 2px solid #fff;
}

.wrapper-text-box-blurred-more {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 2px solid #fff;
}

.text-box-blurred {
    color: #3a3746;
    text-align: center;
}

.text-highlighted {
    font-size: 3.5rem;
    line-height: 2.3rem;
    font-weight: 300;
    text-transform: uppercase;
    background: -webkit-linear-gradient(60deg, #9e82bc, #799abc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-top: 0.8rem;
}

.pointer-text .text-highlighted {
    display: inline-block;
}

.pointer-text-wrapper {
    position: relative;
    margin: 0 auto;
    max-width: 58%;
    top: calc(50% - 300px);
}

.pointer-text-wrapper-mod {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 58%;
}

.pointer-text-wide {
    width: 68%;
}

.pointer-text {
    margin: 0 auto;
    color: #fff;
    text-align: center;
}

.dark-text {
    color: #2f2063;
}

.pointer-text div span {
    font-size: 1.8rem;
    background: -webkit-linear-gradient(0deg, #fff, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dark-text {
    color: #2f2063;
}

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

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

.text-only .text-highlighted {
    font-size: calc(38px + (72 - 38) * (100vw - 400px) / (1025 - 400));
    line-height: calc(38px + (82 - 38) * (100vw - 400px) / (1025 - 400));
    background: -webkit-linear-gradient(0deg, #412aad, #8c7cc8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-only .pointer-text div span {
    font-size: calc(38px + (72 - 38) * (100vw - 400px) / (1025 - 400));
    background: -webkit-linear-gradient(0deg, #2f2063, #2f2063);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-only .pointer-text, .summary {
    color: #2f2063;
}

.scrollIcon {
    position: fixed;
    z-index: 9999;
    text-align: center;
    color: #7575ab;
    left: 50%;
    /*top: 50%;*/
    /*bottom: 5%;*/
    transform: translateX(-50%) translateY(-50%);
    font-size: calc(18px + (30 - 18) * (100vh - 400px) / (1025 - 400));
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.1s, opacity .3s;
}

.scrollIcon-blur-bg {
    position: fixed;
    width: 80%;
    height: 80%;
    /*backdrop-filter: blur(3px);*/
    -webkit-backdrop-filter: blur(3px);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.scrollIcon-gradient {
    position: absolute;
    width: 35vh;
    height: 35vh;
    background: radial-gradient(ellipse 100% 80%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 50%);
    left: 50%;
    bottom: -14vh;
    transform: translateX(-50%);
}

.scrollIcon-gradient-2 {
    position: absolute;
    width: 25vh;
    height: 25vh;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 40%);
    left: 50%;
    bottom: -3vh;
    transform: translateX(-50%);
}

.scrollIcon-content {
    position: relative;
}

.scrollIcon img {
    width: 7vh;
    height: 7vh;
}

/* Title (first) section */

.wrapper-title {
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
    top: 46%;
    transform: translateY(-46%);
    /*mix-blend-mode: color-burn;*/
}

.mobile-gradient {
    display: none;
    position: absolute;
    width: 180%;
    height: 200%;
    transform: translateY(-20%) translateX(-35%);
    background: radial-gradient(ellipse at center, rgba(195, 194, 204, 1) 30%, rgba(195, 194, 204, 0) 70%);
}

.title {
    display: flex;
    justify-content: flex-start;
    font-size: 4.5rem;
    line-height: 4.9rem;
    /*color: #a7acdc;*/ /* for color-burn */
    color: #7b7cb6;
    text-transform: uppercase;
}

@media screen and (min-width:37.5em) and (max-width: 1500px) {
    .title {
        font-size: 4.0rem;
        line-height: 4.3rem;
    }
    
    .wrapper-title {
        padding-left: 2rem;
    }
}

@media screen and (max-width:64.0625em) {
    .mobile-gradient {
        display: block;
    }
    
    .wrapper-title {
        top: 12%;
        transform: translateY(-12%);
    }
}

@media screen and (max-width:37.5em) {
    .title {
        font-size: 3.3rem;
        line-height: 3.9rem;
    }
}

@media screen and (max-width: 30em) {
    .title {
        font-size: 2.8rem;
        line-height: 3.5rem;
    }
}

.title span {
    display: block;
}

.dim-wrapper {
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
    top: 44%;
}

@media screen and (min-width:37.5em) and (max-width: 1500px) {
    .dim-wrapper {
        padding-left: 2rem;
    }
}

.dim-title {
    position: relative;
    top: -1.8rem;
    display: inline-block;
    font-size: 2.0rem;
    font-weight: 100;
    color: #3a3746;
    padding: 0.4rem 5rem 0 1rem;
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    background: -webkit-linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    border-radius: 10px;
}

@media screen and (max-width:64.0625em) {
    .dim-wrapper {
        top: 12%;
        transform: translateY(-12%);
    }

    .dim-title {
        top: -0.4rem;
    }
}

@media screen and (max-width:37.5em) {
    .dim-title {
        /*top: -0.4rem;*/
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 30em) {
    .dim-title {
        font-size: 1.5rem;
    }
}

/* 1.5 Million people section */

@media screen and (max-width:64.0625em) {
    .text-people {
        right: 6vw;
    }
}

@media screen and (max-width:37.5em) {
    .text-people {
        position: static;
        float: none;
    }
}

.million-text-box-blurred {
    max-width: 24vw;
    padding: 9rem 1.4rem;
}

.targetsText {
    padding: 4rem 1.4rem;
}

.targetsText .text-highlighted {
    background: -webkit-linear-gradient(60deg, #9a7bc7, #c6bed0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Joints text section */

.joints-text-box-blurred {
    max-width: 24vw;
    padding: 6rem 1.4rem;
}

.joints-text-box-blurred .text-highlighted {
    background: -webkit-linear-gradient(60deg, #412aad, #8c7cc8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Synovial joints section */

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

.bones-text .text-highlighted {
    background: -webkit-linear-gradient(60deg, #e78c2f, #fadb1f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cartilage-text {
    top: 14%;
}

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

.immune-text .text-highlighted {
    background: -webkit-linear-gradient(60deg, #923536, #b77095);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* RA Stages */

.stage-text-box {
    position: relative;
    width: 100%;
    color: #fff;
    text-align: center;
    transform: translateY(83vh);
}

.stage-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.stage .text-highlighted {
    background: -webkit-linear-gradient(60deg, #e78c2f, #fadb1f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.synovial-text {
    top: 20%;
}

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

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

/* RA Deformities Hotspots */

.deformities .text-highlighted {
    background: -webkit-linear-gradient(60deg, #7258d6, #9c7acc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.thumb-text {
    bottom: 10%;
}

.nodules-text {
    top: 10%;
}

.boutonniere-text {
    top: 8%;
}

.swan-text {
    top: 16%;
}

/* Whole Body Complications Hotspots */

.heart-text {
    top: 34%;
}

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

/* Treatments */

.treatments-wrapper {
    position: relative;
    transform: translateY(20vh);
    top: calc(10% - 10vh);
}

.white-border-box {
    position: relative;
    margin: 0 auto;
    width: calc(100vw - 77vh);
    height: 20vh;
    border: 2px solid #fff;
    transform: translateX(0.8vw);
}

.treatment-title {
    position: absolute;
    font-size: calc(12px + (28 - 12) * (100vh - 400px) / (1025 - 400));
    line-height: calc(20px + (28 - 20) * (100vh - 400px) / (1025 - 400));
    top: 30%;
    left: 2.2em;
}

.treatment-title .text-highlighted {
    font-size: calc(18px + (58 - 18) * (100vh - 400px) / (1025 - 400));
    line-height: calc(38px + (70 - 38) * (100vh - 400px) / (1025 - 400));
    background: -webkit-linear-gradient(60deg, #744bb5, #739bd0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0;
}

.treatments-content {
    position: relative;
    width: calc((100vw * 2.5) - 100vh);
    height: 100vh;
    left: 50%;
    transform: translateY(-19vh) translateX(-50%);
    overflow: hidden;
}

.treatments-bg {
    position: absolute;
    width: calc(100vw - 77vh);
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.4);
}

.treatments {
    display: flex;
    justify-content: space-between;
    position: relative;
    transform: translateY(20vh);
}

.treatments .treatment {
    position: relative;
    width: 94%;
    margin: 0 auto;
    text-align: center;
}

.treatments .treatment img {
    max-width: 310px;
    width: 90%;
    height: auto;
}

.treatments .title-active {
    font-weight: 600;
    letter-spacing: -0.04rem;
    background: -webkit-linear-gradient(0deg, #7c6cd1 20%, #8ba8da 50%, #9c7fd6 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.treatments .title-not-active {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.treatments .treatments-text {
    position: relative;
    transform: translateY(4.4vh);
    font-size: calc(12px + (20 - 12) * (100vh - 400px) / (1025 - 400));
    line-height: calc(20px + (32 - 20) * (100vh - 400px) / (1025 - 400));
}

/* Lifestyle Adjustments */

.lifestyle-items {
    position: relative;
}

.lifestyle-item {
    position: absolute;
    width: 36rem;
    height: 36rem;
    margin: 0 auto;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    font-size: 1.5rem;
    line-height: 2.4rem;
    padding: 0.4rem;
    left: 50%;
    transform: translateX(-50%) translateY(100vh);
}

.lifestyle-title {
    position: absolute;
    font-size: calc(12px + (28 - 12) * (100vh - 400px) / (1025 - 400));
    line-height: calc(20px + (28 - 20) * (100vh - 400px) / (1025 - 400));
    top: 2.2em;
    left: 1.6em;
    opacity: 0;
}

.lifestyle-title .text-highlighted {
    background: -webkit-linear-gradient(60deg, #744bb5, #739bd0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lifestyle-item-content {
    position: absolute;
    width: 64%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.lifestyle-item-title {
    font-weight: 600;
    letter-spacing: -0.04rem;
    background: -webkit-linear-gradient(60deg, #7657b2, #5c8eb0);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2rem;
}

/* Video */

.video video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    overflow: hidden;
}

.video-mask {
    position: absolute;
    width: 100%;
    height: 100vh;
    background: url("../images/video-mask.png") no-repeat center center;
    background-size: cover;
}

.video-title {
    position: absolute;
    width: 44%;
    height: 6vh;
    top: 4vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
}

.video-title-content {
    position: relative;
    width: 100%;
    height: fit-content;
    white-space: nowrap;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    /*line-height: calc(24px + (48 - 24) * (100vh - 320px) / (1025 - 320));*/
    line-height: 0;
    text-align: center;
}

.video-title-content div {
    display: inline-block;
    font-size: calc(20px + (40 - 20) * (100vh - 320px) / (1025 - 320));
    line-height: calc(24px + (48 - 24) * (100vh - 320px) / (1025 - 320));
    font-weight: 300;
    text-transform: uppercase;
    background: -webkit-linear-gradient(60deg, #7657b2, #5c8eb0);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-top: 1vh;
}

.play-button {
    width: 128px;
    height: 156px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    background: url("../images/icons/play-button.png") no-repeat center center;
    background-size: contain;
    z-index: 9999;
    display: none;
    transition: background-image .3s;
    filter: drop-shadow(0 0 0.4rem rgba(0, 0, 0, 0.4));
    opacity: 0.9;
}

.play-button:hover {
    background: url("../images/icons/play-button-hover.png") no-repeat center center;
}

/* Testimonials */

.testimonials-title {
    position: absolute;
    top: 7%;
    left: 4%;
    z-index: 10;
    font-size: calc(16px + (32 - 16) * (100vh - 400px) / (1025 - 400));
    line-height: calc(16px + (40 - 16) * (100vh - 400px) / (1025 - 400));
}

.testimonials-title div {
    font-size: calc(22px + (56 - 22) * (100vh - 400px) / (1025 - 400));
    line-height: calc(32px + (70 - 32) * (100vh - 400px) / (1025 - 400));
    font-weight: 300;
    text-transform: uppercase;
    background: -webkit-linear-gradient(60deg, #8a41c8, #7463c6);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.testimonials {
    width: 90%;
    height: 84%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.testimonials-border {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #fff;
}

.testimonial-items {
    position: relative;
    width: 98%;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}

.testimonial {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(18px + (40 - 18) * (100vh - 400px) / (1025 - 400));
    line-height: calc(22px + (50 - 22) * (100vh - 400px) / (1025 - 400));
    color: #2f2063;
    text-align: center;
}

.testimonial1 {
    width: 50%;
}

.testimonial2, .testimonial3 {
    width: 66%;
}

.testimonial-queue {
    transform: translate(-200%, -50%);
}

/* Summary */

.summary .text-highlighted {
    display: inline-block;
    background: -webkit-linear-gradient(0deg, #412aad, #8c7cc8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.summary-text, .summary {
    width: 98%;
}

.summary {
    /*transform: translateY(-20%);*/
    font-size: calc(24px + (50 - 24) * (100vw - 400px) / (1025 - 400));
    line-height: calc(24px + (50 - 24) * (100vw - 400px) / (1025 - 400));
}
    
/* Advertisement */

.advertisement {
    position: fixed;
    visibility: hidden;
    min-width: 320px;
    max-width: 100%;
    min-height: 50px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 9999;
    opacity: 0;
    transition: opacity .3s;
}

.advertisement-content {
    position: relative;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: #f4f6f8;
    padding: 0.1em;
}

.advertisement-title {
    font-family: Arial, sans-serif;
    width: 100%;
    font-size: 12px;
    line-height: 1em;
    letter-spacing: 0;
    color: #5d6a74;
    text-transform: uppercase;
    text-align: center;
}

.advertisement-close {
    display: flex;
    font-size: 16px;
    line-height: 1em;
    color: #5d6a74;
    -webkit-box-pack: end;
    justify-content: flex-end;
    padding: 8px 8px 0 0;
}

.advertisement-close:before{ content: "\2716"; }

/* Navigation menu */

.navigationMenuSection {
    visibility: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 9999;
    opacity: 0;
    transition: visibility .5s, opacity .3s;
}

.navigationMenuWrapper {
    position: relative;
    max-width: 50%;
    max-height: 96%;
    width: fit-content;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: #fff;
    padding: 20px 30px 0 30px;
    border-radius: 25px;
}

.navigationMenuWindow {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #b9b4ce #fff;
}

.navigationMenuItemWrapper {
    display: flex;
    flex-wrap: wrap;
    min-width: 200px;
}

.line-break {
    width: 100%;
}

.navigationMenuItemWrapper .grElements {
    position: relative;
    width: 48px;
}

.navigationMenuItemWrapper .circle {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #352768;
    background: #fff;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.navigationMenuItemWrapper .line, .navigationMenuItemWrapper .lineTop, .navigationMenuItemWrapper .lineBottom {
    position: absolute;
    width: 1px;
    background: #352768;
    height: 102%;
    left: 50%;
    transform: translateX(-50%);
}

.navigationMenuItemWrapper .lineTop {
    height: 52%;
    bottom: 0;
}

.navigationMenuItemWrapper .lineBottom {
    height: 52%;
    top: 0;
}

.navigationMenuTitle {
    position: sticky;
    top: 0;
    font-size: calc(14px + (28 - 14) * (100vh - 400px) / (1025 - 400));
    line-height: calc(20px + (36 - 20) * (100vh - 400px) / (1025 - 400));
    color: #352768;
    text-align: center;
    font-weight: 400;
    width: 96%;
    margin: 0 auto;
    background: #fff;
    z-index: 9999999;
    padding-bottom: 10px;
}

.navigationMenuItem {
    width: fit-content;
    font-size: calc(10px + (14 - 10) * (100vh - 400px) / (1025 - 400));
    line-height: calc(14px + (30 - 14) * (100vh - 400px) / (1025 - 400));
    font-weight: 400;
    background: #fff;
    color: #2f2063;
    box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.08);
    border-radius: 25px;
    padding: 13px 18px 8px 18px;
    cursor: pointer;
    text-transform: uppercase;
}

@media(hover: hover) {
    .navigationMenuItem:hover {
        background: url("../images/nav-item-active-bg.jpg");
        background-size: contain;
    }
}

.circle-active {
    background: #352768 url("../images/check-mark.png") no-repeat center center !important;
    background-size: contain !important;
}

.navigationMenuEmpty {
    height: 2vh;
}

.navigationMenuWindow .space {
    height: 20px;
}

.navigationMenuWindow::-webkit-scrollbar {
    position: relative;
    width: 16px;
}

.navigationMenuWindow::-webkit-scrollbar-thumb {
    background: #b9b4ce;
    border-radius: 10px;

    border: 4px solid transparent;
    background-clip: content-box;
}

.navigationMenuWindow::-webkit-scrollbar-track {
    background: #fff;
    border: 1px solid #b9b4ce;
    border-radius: 10px;
}

/* Auto scroll panel */

.auto-scroll-wrapper {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    bottom: 5vh;
    right: 2vw;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4rem;
    z-index: 9998;
    transition: visibility .5s, opacity .3s;
}

.auto-scroll-panel {
    width: 213px;
    height: 179px;
    background: #f4f6fa;
    border-radius: 26% 5% 26% 26%;
    color: #9198a3;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
}

.auto-scroll-panel-close {
    position: absolute;
    width: 25px;
    height: 25px;
    top: 5%;
    right: 3%;
    font-size: 12px;
    line-height: 28px;
    text-align: center;
    color: #aaa;
    cursor: pointer;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}

.auto-scroll-panel-close:hover {
    box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.25);
}

.auto-scroll-panel-content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 16px;
    font-weight: 400;
    text-align: center;
}

.switch-label-on, .switch-label-off {
    position: absolute;
    color: #fff;
    top: 52px;
    left: 114px;
    font-size: 20px;
    pointer-events: none;
    transition: visibility .5s, opacity .3s;
}

.switch-label-off {
    left: 60px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 130px;
    height: 60px;
    top: 8px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ced7e6;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 50px;
    width: 50px;
    right: 5px;
    bottom: 5px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background: #ced7e6 url("../images/as-switch-bg.png") no-repeat center center;
}

input:focus + .slider {
    box-shadow: 0 0 1px #ced7e6;
}

input:checked + .slider:before {
    transform: translateX(-70px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 30px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Stop/resume experience */

.stop-experience {
    position: fixed;
    width: 4vh;
    height: 4vh;
    top: 5vh;
    right: 5vh;
    z-index: 9998;
    cursor: pointer;
    filter: drop-shadow(0 0 0.4rem rgba(0, 0, 0, 0.4));
    background: url("../images/icons/stop-exp.png") no-repeat;
    background-size: cover;
    transition: background-image .3s;
}

.stop-experience:hover {
    background: url("../images/icons/stop-exp-hover.png") no-repeat;
    background-size: cover;
}

.resume-experience {
    visibility: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(81, 84, 104, 0.8);
    z-index: 99999;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: visibility .1s, opacity .3s;
}

.resume-experience-content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #fff;
    text-align: center;
    font-size: calc(16px + (22 - 16) * (100vw - 400px) / (1025 - 400));
    line-height: calc(20px + (30 - 20) * (100vw - 400px) / (1025 - 400));
}

.resume-experience-button {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    margin-top: 6vh;
    font-size: calc(10px + (12 - 10) * (100vw - 400px) / (1025 - 400));
    line-height: calc(12px + (18 - 12) * (100vw - 400px) / (1025 - 400));
    font-weight: 400;
    background: rgb(154, 144, 197);
    background: linear-gradient(0deg, rgba(154, 144, 197, 1) 0%, rgba(185, 197, 229, 1) 100%);
    color: #fff;
    border-radius: 25px;
    padding: 13px 22px 8px 22px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s;
    filter: drop-shadow(0 0 0.3rem rgba(0, 0, 0, 0.2));
}

.resume-experience-button::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    color: #2f2662;
    border-radius: 25px;
    background: #fff;
    transition: all 0.3s linear;
    opacity: 0;
    z-index: -1;
}

.resume-experience-button:hover::before {
    opacity: 1;
}

.resume-experience-button:hover {
    color: #2f2662;
}

/* hamburger menu */

.hamburger-menu {
    position: fixed;
    width: 4.4vh;
    height: 4vh;
    top: 5vh;
    left: 5vh;
    z-index: 10000;
    cursor: pointer;
    filter: drop-shadow(0 0 0.4rem rgba(0, 0, 0, 0.4));
    background: url("../images/icons/hamb-menu.png") no-repeat top center;
    background-size: contain;
    transition: background-image .3s;
}

.hamburger-menu-active {
    background: url("../images/icons/hamb-menu-hover.png") no-repeat top center;
    background-size: contain;
}

@media (hover: hover) {
    .hamburger-menu:hover {
        background: url("../images/icons/hamb-menu-hover.png") no-repeat top center;
        background-size: contain;
    }
}