.logo {
    width: 50px;
    height: 50px;
    position: fixed;
    top: 40px;
    left: 40px;
    z-index: 1000;
    opacity: 0;
    transition: 500ms ease-in-out 300ms;
    pointer-events: none;
}
.menu-icon {
    width: 20px;
    height: 16px;
    padding: 0;
    background: none;
    border: none;
    position: fixed;
    top: 40px;
    right: 40px;
    z-index: 1000;
    opacity: 0;
    transition: 500ms ease-in-out 300ms;
    pointer-events: none;
}
.menu-icon svg {
    display: block;
}
.loaded .logo,
.loaded .menu-icon {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
}
.xp-logo-svg,
.xp-menu-bar {
    fill: #fff;
}
.blue-logo .xp-logo-svg,
.blue-logo .xp-menu-bar,
.combo-logo .xp-menu-bar {
    fill: #049FDA;
}
.section-blue {
    background: #049FDA;
}
.section-blue .common-para {
    color: #fff;
}

.xp-menu-bar {
    transform: rotate(0);
    opacity: 1;
    transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
}
.xp-menu-bar:nth-child(1) {
    transform-origin: 60px 12px;
}
.xp-menu-bar:nth-child(3) {
    transform-origin: 60px 36px;
}
button.menu-icon.open .xp-menu-bar:nth-child(1) {
    transform: rotate(-40deg);
}
button.menu-icon.open .xp-menu-bar:nth-child(2) {
    opacity: 0;
}
button.menu-icon.open .xp-menu-bar:nth-child(3) {
    transform: rotate(40deg);
}
/*---- Header ----*/



/*---- intro-section ----*/

.logo-container {
    width: 688px;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 1;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform, top;
    transition: 500ms cubic-bezier(0.39, 0.575, 0.565, 1) 300ms;
}

.logo-container svg {
    display: block;
}

.loaded .logo-container {
    top: 25%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/*---- Animation ----*/
.fadeInUp,
.fadeInDown,
.fadeInDownSlow,
.fadeInUpSlow {
    transform: translateY(15px);
    opacity: 0;
    transition: transform 1000ms ease-out, opacity 1000ms ease-out;
    will-change: transform, opacity;
}
.fadeInDownSlow,
.fadeInUpSlow {
    transition-delay: 300ms;
}
.fadeIn,
.ingredientsSpecial .athelas {
    opacity: 0;
    transition: opacity 1000ms ease-out;
}
.fadeIn.fadeIn500 {
    transition: opacity 500ms ease-out;
}
.fadeInDown {
    transform: translateY(-15px);
}
.fadeInUp.isAnimated,
.fadeInDown.isAnimated,
.fadeInDownSlow.isAnimated,
.fadeInUpSlow.isAnimated {
    transform: translateY(0);
    opacity: 1;
}
.isAnimated.fadeIn,
.ingredientsSpecial.inView .athelas {
    opacity: 1;
}
.slideFromLeft,
.slideFromRight {
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 1000ms, opacity 1000ms;
    will-change: transform, opacity;
}
.slideFromRight {
    transform: translateX(100%);
}
.slideFromLeft.isAnimated,
.slideFromRight.isAnimated {
    transform: translateX(0);
    opacity: 1;
}


@media screen and (min-width: 768px) {
    .menu-icon {
        width: 24px;
        height: 19px;
    }
    .delay100 {
        transition-delay: 200ms !important;
    }
    .delay200 {
        transition-delay: 400ms !important;
    }
    .delay300 {
        transition-delay: 600ms !important;
    } 

}

@media screen and (max-width: 1339px) {
    .logo {
        width: 40px;
        height: 40px;
        top: 40px;
        left: 40px;
    }
    .menu-icon {
        top: 40px;
        right: 40px;
    }
    .logo-container {
        width: 574px;
    }
}

@media screen and (max-width: 999px) {
    .logo {
        width: 32px;
        height: 32px;
        top: 25px;
        left: 25px;
    }
    .menu-icon {
        top: 25px;
        right: 25px;
    }
    .logo-container {
        width: 430px;
    }
}

@media screen and (max-width: 767px) {
    .xp-header {
        height: 50px;
        background: rgba(0,153,204,.85);
        position: fixed;
        top: 0;
        width: 100%;
        left: 0;
        z-index: 2000;
    }
    .menu-active .xp-header {
        background: rgba(0,153,204,0);
    } 
    .xp-logo-svg, .xp-menu-bar {
        fill: #fff !important;
    }
    .logo {
        width: 28px;
        height: 28px;
        top: 11px;
        left: 20px;
    }
    .menu-icon {
        top: 17px;
        right: 20px;
    }
}

@media screen and (max-width: 767px) and (min-width: 540px) {
    .xp-header {
        height: 72px;
    }
    .logo {
        width: 41px;
        height: 41px;
        top: 16px;
        left: 29px;
    }
    .menu-icon {
        top: 25px;
        right: 29px;
    }
}