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

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

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

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

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

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

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

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

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: calc(1.125rem + ((1vw - 2.4px) * 1.2));
    line-height: calc(1.5rem + ((1vw - 2.4px) * 1.38));
    letter-spacing: 0.1rem;
    font-weight: 300;
    width: 100%;
    height: 100%;
}

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

.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 {
    display: none;
    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);}
}

.touch-screen {
    display: none;
}

.white {
    color: #fff;
}

.green {
    color: #1ab99a;
}

.dark-green {
    color: #017364;
}

.title-size-1 {
     font-size: calc(1.25rem + ((1vw - 2.4px) * 1.72));
     line-height: calc(1.2rem + ((1vw - 2.4px) * 2.6));
}

.title-size-2 {
    font-size: calc(1.0rem + ((1vw - 2.4px) * 0.5));
    font-weight: 300;
    text-transform: uppercase;
}

.title-size-3 {
    font-size: calc(1.25rem + ((1vw - 2.4px) * 0.75));
    font-weight: 200;
    text-transform: uppercase;
}

.subtitle-size-3 {
    font-size: calc(1.25rem + ((1vw - 2.4px) * 1.0));
    font-weight: 400;
}

.highlight {
    font-weight: 500 !important;
}

.blur-bg {
    backdrop-filter: blur(0.25rem);
    -webkit-backdrop-filter: blur(0.25rem);
}

.content-container {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}

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

.underline {
    height: 1px;
    width: 0;
    border-bottom: 1px solid #1ab99a;
}

.lifestyle .underline {
    border-bottom: 1px solid #fff;
}

.quote .underline {
    width: 100%;
    border-bottom: 2px solid #1ab99a;
}

.text-centered {
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.text-main-title-wrapper {
    position: absolute;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-left: -1%;
}

.main-title {
    position: relative;
    top: 16%;
    border-left: 3px solid #1ab99a;
    padding-left: 5%;
    white-space: nowrap;
    font-size: calc(1.8rem + ((1vw - 2.4px) * 2.5));
    line-height: calc(2.0rem + ((1vw - 2.4px) * 2.75));
}

.text-title-wrapper {
    position: absolute;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.text-main-title {
    font-family: 'Times New Roman', sans-serif;
    font-size: calc(2.5rem + ((1vw - 2.4px) * 3.8));
    font-weight: 400;
    letter-spacing: 0;
}

.text-title {
    position: relative;
    width: 100%;
    text-align: center;
    font-weight: 400;
    top: 16%;
    white-space: nowrap;
}

.text-title .highlight {
    font-size: calc(2.5rem + ((1vw - 2.4px) * 1.9));
    font-weight: 600;
}

.scroll-down-text {
    top: 26%;
}

.what-is-migraine-wrapper {
    position: absolute;
    max-width: 48%;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 300;
}

.what-is-migraine-bg {
    background: rgba(22, 40, 64, 0.4);
}

.underline-title {
    display: inline-block;
    line-height: 1.5rem;
}

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

.blue-section {
    font-size: calc(1.1rem + ((1vw - 2.4px) * 0.75));
    line-height: calc(1.5rem + ((1vw - 2.4px) * 1.38));
}

.blue-section-top-text {
    font-size: calc(1.125rem + ((1vw - 2.4px) * 1.38));
    font-weight: 300;
}

.healthy-anatomy {
    width: 70%;
    top: 68%;
}

.blood-vessels-wrapper {
    width: 60%;
    top: 18%;
}

.tracts-wrapper {
    width: 60%;
    top: 22%;
}

.nerves-wrapper {
    width: 42%;
    top: 20%;
}

.migraine-overview {
    width: 60%;
    top: 68%;
}

.prodrome-wrapper {
    width: 60%;
    top: 20%;
}

.aura-wrapper {
    width: 60%;
    top: 18%;
}

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

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

.migraine-types-wrapper, .lifestyle-title-wrapper {
    position: relative;
    width: fit-content;
    top: 14%;
    left: 5%;
    text-align: center;
}

.lifestyle-title-wrapper {
    text-align: left;
}

.migraines-stage {
    width: 50%;
    height: 100%;
    margin: 0 auto;
}

.migraines-stage-1-wrapper, .migraines-stage-2-wrapper {
    position: relative;
    width: 64vh;
    height: 64vh;
    background: rgba(124, 192, 227, 0.8);
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    top: 20%;
    /*left: 0;*/
    box-shadow: rgba(255, 255, 255, 0.8) 0 0 5rem;
}

.migraines-stage-1, .migraines-stage-2 {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    padding: 7vh;
    font-size: calc(1.4rem + ((1vh - 2.4px) * 1.87));
    line-height: calc(1.55rem + ((1vh - 2.4px) * 2.95));
    font-weight: 200;
}

.migraines-stage-2-wrapper {
    float: right;
    background: rgba(130, 195, 182, 0.8);
    
}

.infographic-circle-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 60vh;
    height: 60vh;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}

.infographic-circle-outer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 69vh;
    height: 69vh;
    border: 3px dashed rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

.living-with-migraines {
    width: 70%;
    top: 68%;
}

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

.predispose-wrapper {
    width: 70%;
    top: 68%;
}

.disorders-wrapper {
    width: 50%;
    top: 22%;
}

.control-your-life-wrapper {
    position: absolute;
    width: 38%;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.control-your-life {
    position: relative;
    width: 100%;
    font-weight: 400;
    top: 12%;
}

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

.preventative-medications {
    position: relative;
    width: 70%;
    top: 12%;
    left: 10%;
    font-size: calc(1.0rem + ((1vw - 2.4px) * 0.65));
    line-height: calc(1.4rem + ((1vw - 2.4px) * 1.28));
    font-weight: 200;
}

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

.treatments-title {
    position: absolute;
    width: fit-content;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid #fff;
    border-radius: 100px;
    padding: 0.3% 2%;
    top: 45%;
    font-weight: 200;
    left: 50%;
    transform: translateX(-50%);
}

.treatments-title-text {
    padding-top: 7px;
    text-align: center;
}

.treatment-text {
    position: absolute;
}

.treatment-icon-wrapper {
    position: relative;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.treatment-icon {
    position: absolute;
    width: 20vw;
    height: 20vw;
}

.preventive-treatment {
    background: url("../images/icons/preventive-treatment.png") center center no-repeat;
    background-size: contain;
    left: 50%;
    transform: translateX(-50%);
}

.abortive-treatment {
    background: url("../images/icons/abortive-treatment.png") center center no-repeat;
    background-size: contain;
    left: 50%;
}

.rescue-treatment {
    background: url("../images/icons/rescue-treatment.png") center center no-repeat;
    background-size: contain;
    left: 50%;
}

.rescue-treatment-2 {
    background: url("../images/icons/rescue-treatment.png") center center no-repeat;
    background-size: contain;
    left: 50%;
}

.lifestyle {
    position: relative;
    width: 46vw;
    /*top: 16%;*/
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: calc(1.1rem + ((1vw - 2.4px) * 0.75));
    line-height: calc(1.5rem + ((1vw - 2.4px) * 1.38));
    font-weight: 200;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid #fff;
    border-radius: 300px;
    text-align: center;
    margin-top: 2vh;
    margin-bottom: 5vh;
}

.lifestyle-text {
    padding: 4% 8%;
}

.lifestyle-icon-wrapper {
    width: 14vh;
    height: 14vh;
    margin: 0 auto;
}

.lifestyle-line {
    margin: 0 auto;
    width: 2px;
    height: 6vh;
    background: #fff;
}

.lifestyle-icon {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 1.2rem rgba(255, 255, 255, 0.8));
}

.diet-icon {
    background: url("../images/icons/diet-lifestyle.png") center center no-repeat;
    background-size: contain;
}

.avoidance-icon {
    background: url("../images/icons/avoidance-lifestyle.png") center center no-repeat;
    background-size: contain;
}

.relaxation-icon {
    background: url("../images/icons/relaxation-lifestyle.png") center center no-repeat;
    background-size: contain;
}

.encouragement-title {
    position: relative;
    width: fit-content;
    top: 14%;
    left: 5%;
}

.quote {
    position: relative;
    width: 46vw;
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    color: #000;
    font-size: calc(1.0rem + ((1vw - 2.4px) * 0.5));
    line-height: calc(1.25rem + ((1vw - 2.4px) * 1.0));
    font-weight: 300;
    background: #fff;
    border-radius: 300px;
    text-align: center;
}

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

.quote-text .underline-title-text {
    text-align: justify;
}

.quote-text .underline-title {
    text-align: center;
}

.quote-arrow {
    position: absolute;
    width: 10vw;
    height: 10vw;
    left: 50%;
    transform: translateX(-50%) translateY(-60%) rotate(45deg);
    background: #fff;
    z-index: -1;
}

.quote-icon {
    position: relative;
    top: 28%;
    width: 14vh;
    height: 14vh;
    margin: 5% auto 0;
    filter: drop-shadow(0 0 0.6rem rgba(0, 0, 0, 0.3));
}

.quote-icon-1 {
    background: url("../images/icons/quote_1.png") center center no-repeat;
    background-size: contain;
}

.quote-icon-2 {
    background: url("../images/icons/quote_2.png") center center no-repeat;
    background-size: contain;
}

.quote-icon-3 {
    background: url("../images/icons/quote_3.png") center center no-repeat;
    background-size: contain;
}

.video video {
    position: absolute;
    z-index: 0;
    object-fit: cover;
    width:100%;
    height:100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.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;
}

.summary-wrapper {
    position: absolute;
    width: 70%;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.summary-text {
    font-size: calc(1.25rem + ((1vw - 2.4px) * 1.72));
    line-height: calc(1.2rem + ((1vw - 2.4px) * 2.6));
    position: relative;
    width: 100%;
    text-align: center;
    font-weight: 400;
    top: 16%;
}

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

/* Advertisement */


#advertisement {
    z-index: 1;
}

.advertisement {
    position: relative;
    /*min-width: 320px;*/
    width: 320px;
    max-width: 100%;
    min-height: 50px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.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"; }

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

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

.scrollIcon-content {
    position: relative;
    background: linear-gradient(90deg, rgba(186, 210, 202, 1) 0%, rgba(123, 185, 206, 1) 100%);
    filter: drop-shadow(0 0 0.6rem rgba(0, 0, 0, 0.3));
    border-radius: 50%;
    padding: 3vh;
}

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


/* 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: 10px 18px 5px 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: 1.5vh;
}

.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;
    }
}