/*
    IMPORTANT: Use only for webpack build conversion issues.
*/

/*
    Keyframes:
      - Avoid webpack build conversion "from" -> "0%".
      - Percentage missing when the value is 0 issue fixed.
*/
@keyframes zoomin {
    from {
        transform: translate(-50%, -50%) scaleX(0.00) scaleY(0.00);
    }
    to {
        transform: translate(-50%, -50%) scaleX(1.00) scaleY(1.00);
    }
}

@keyframes progress-bar-fill {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}



@keyframes open-nav {
    from {
        opacity: 0.9;
        padding-top: 40px;
    }

    to {
        opacity: 1;
        padding-top: 0;
    }
}

@keyframes open-header {
    from {
        top: -81rem;
    }

    to {
        top: 0;
    }
}

@keyframes slide-right {

    from {
        opacity: 0;
        margin-left: 100%;
    }

    to {
        opacity: 1;
        margin-left: 0;
    }
}

@keyframes underline-grow {

    from { width: 0; }

    to { width: 100%; }

}

@keyframes open-related-pages {

    from { transform: translateY(0); }

    to { transform: translateY(24px); }

}

@keyframes close-related-pages {

    from { transform: translateY(24px); }

    to { transform: translateY(0); }

}

@keyframes fade-in-slide-ltr {

    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.gradient-box::before {
        left: 0;
        right: 0;
        z-index: 1;
        width: 100%;
        top: -93px;
        height: 92px;
        content: " ";
        display: block;
        position: absolute;
        box-shadow: 0 -40px 40px 0 rgba(255,255,255,0.5);
        background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, white 100%);
}

.gradient-box-large::before {
    left: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    top: -410px;
    height: 500px;
    content: " ";
    display: block;
    position: absolute;
    box-shadow: 0 -40px 40px 0 rgb(255 255 255 / 50%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, white 100%);
}

.zs-secondary-navigation-bar__link-container--scrolled-all-left::before {
  left: 0;
  width: 42px;
  background: linear-gradient(to right, white 45%, rgba(255,255,255,0.001));
}

.zs-secondary-navigation-bar__link-container--scrolled-all-right::after {
  right: 0;
  width: 42px;
  background: linear-gradient(to left, white 45%, rgba(255,255,255,0.001));
}