/* IMPORTANT: Use only for webpack build conversion issues. */
/* Keyframes: - Avoid webpack build conversion "from" -> "0%". - Percentage missing when the value is 0 issue fixed. Colors with opacity(alpha): - Avoid webpack build conversion form rgba and hex to hsla */
@keyframes tabs-reduce-width-animation {
	 from {
		 width: 100%;
	}
	 33% {
		 width: 100%;
	}
	 66% {
		 width: 0;
	}
	 to {
		 width: 0;
	}
}

@keyframes zoomin {
	 from {
		 transform: translate(-50%, -50%) scaleX(0) scaleY(0);
	}
	 to {
		 transform: translate(-50%, -50%) scaleX(1) scaleY(1);
	}
}

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

@keyframes slide-from-bottom-anim {
	 from {
		 transform: translate3d(0, 100%, 0);
	}
	 to {
		 transform: translate3d(0, 0, 0);
	}
}

@keyframes hide-to-bottom-anim {
	from {
	  transform: translate3d(0, 0, 0);
	}
	to {
	  transform: translate3d(0, 100%, 0);
	}
}

/** HomePage Hero Animations Start */
@keyframes slide-from-bottom-homepage-hero-anim {
	 from {
		 animation-timing-function: cubic-bezier(0.17, 0, 0.3, 1);
		 transform: translate3d(0, 100%, 0);
	}
	 to {
		 animation-timing-function: cubic-bezier(0.4, 0.11, 0.83, 1);
		 transform: translate3d(0, 0, 0);
	}
}

@keyframes fade-color-anim {
	 0% {
		 opacity: 1;
	}
	 20% {
		 opacity: 0.9;
	}
	 50% {
		 opacity: 0.8;
	}
	 90% {
		 opacity: 0.2;
	}
	 100% {
		 opacity: 0;
	}
}

@keyframes slide-in-left {
	 0% {
		 transform: translateX(-100%);
	}
	 100% {
		 transform: translateX(0);
	}
}

@keyframes background-grow-anim {
	 0% {
		 transform: scale(1) translate3d(0, 0, 0);
	}
	 50% {
		 transform: scale(1.1) translate3d(0, 0, 0);
	}
	 100% {
		 transform: scale(1.12) translate3d(0, 0, 0);
	}
}

@keyframes background-grow-homepage-hero-mobile-anim {
	 0% {
		 transform: scale(1) translate3d(0, 0, 0);
	}
	 50% {
		 transform: scale(1.1) translate3d(0, 0, 0);
	}
	 100% {
		 transform: scale(1.12) translate3d(0, 0, 0);
	}
}

@keyframes background-grow-homepage-hero-anim {
	 0% {
		 transform: scale(1) translate3d(0, 0, 0);
	}
	 50% {
		 transform: scale(1.1) translate3d(0, 0, 0);
	}
	 100% {
		 transform: scale(1.12) translate3d(0, 0, 0);
	}
}

@keyframes slide-bg-from-bottom-anim {
	 from {
		 animation-timing-function: cubic-bezier(0.4, 0.11, 0.83, 1);
		 background-position: center 4rem;
		 transform: scale(1.2);
	}
	 to {
		 animation-timing-function: cubic-bezier(0.17, 0, 0.3, 1);
		 background-position: center -4rem;
		 transform: scale(1.2);
	}
}

@keyframes eyebrow-mobile-grow-anim {
	 0% {
		 width: 0;
	}
	 100% {
		 width: 100vw;
	}
}

@keyframes eyebrow-grow-anim {
	 0% {
		 transform: translateX(-100%);
	}
	 100% {
		 transform: translateX(0);
	}
}

@keyframes width-grow-anim {
	 0% {
		 width: 0;
	}
	 100% {
		 width: 100%;
	}
}

@keyframes hide-active-indicator-anim {
	 0% {
		 transform: translateX(0);
		 width: 100%;
	}
	 100% {
		 transform: translateX(101%);
		 width: 100%;
	}
}

@keyframes eyebrow-shrink-anim {
	 0% {
		 transform: translate3d(0, -50%, 0);
	}
	 100% {
		 transform: translate3d(-100%, -50%, 0);
	}
}

@keyframes eyebrow-hide-anim {
	 0% {
		 transform: translateX(0);
	}
	 100% {
		 transform: translateX(100%);
	}
}

@keyframes text-reveal-anim {
	 0% {
		 transform: translateY(100%);
	}
	 100% {
		 transform: translateY(0);
	}
}

@keyframes text-reveal-anim-w-fade {
	 0% {
		 transform: translateY(2rem);
		 opacity: 0;
	}
	 50% {
		 transform: translateY(1rem);
		 opacity: 0.3;
	}
	 100% {
		 transform: translateY(0);
		 opacity: 1;
	}
}

@keyframes fade-in-anim {
	 0% {
		 opacity: 0;
	}
	 100% {
		 opacity: 1;
	}
}

@keyframes fade-out-anim {
	 0% {
		 opacity: 1;
	}
	 100% {
		 opacity: 0;
	}
}

@keyframes slide-1 {
	 0% {
		 animation-timing-function: cubic-bezier(0.17, 0, 0.3, 1);
		 clip-path: polygon(-100vh 0, -100vh 100vh, calc(100vh - 100vh) 0);
	}
	 100% {
		 animation-timing-function: cubic-bezier(0.4, 0.11, 0.83, 1);
		 clip-path: polygon(0vh 0, 0vh 300vh, 300vh 0);
	}
}

@keyframes slide-2 {
	 from {
		 animation-timing-function: cubic-bezier(0.17, 0, 0.3, 1);
		 clip-path: polygon(-150vh 0, -150vh 100%, calc(100vh - 150vh) 100%);
	}
	 to {
		 animation-timing-function: cubic-bezier(0.4, 0.11, 0.83, 1);
		 clip-path: polygon(0px -200vh, 0 100%, 300vh 100%);
	}
}

/** HomePage Hero Animations End */
/** Sector Landing Hero Animation */
@keyframes vertical-text-rotate-anim {
	 0% {
		 opacity: 0;
		 transform: rotateX(90deg);
	}
	 100% {
		 opacity: 1;
		 transform: rotateX(0deg);
	}
}

/** This was moved to this file to avoid webpack changing rgba and 0% */
 .tab-white-fade, .pcl-tabbing-containers-cmp__white-fade, .pcl-project-showcase-tabs__white-fade {
	 background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.5) 15%, rgba(255, 255, 255, 1) 70%);
}
 .tab-green-fade {
	 background: linear-gradient(90deg, rgba(0, 80, 47, 0.2) 0%, rgba(0, 80, 47, 0.5) 15%, rgba(0, 80, 47, 1) 70%);
}
 .tab-light-gray-fade {
	 background: linear-gradient(90deg, rgba(249, 249, 249, 0.2) 0%, rgba(249, 249, 249, 0.5) 15%, rgba(249, 249, 249, 1) 70%);
}
 .pcl-sticky-two-column--mobile-left.mobile-collapsed::before {
	 background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
}

/** For the jumpbar component */
@keyframes pcl-jump-bar-in {
	 from {
		 transform: translateY(100%);
		 max-height: 0;
	}
	 to {
		 transform: translateY(0);
		 max-height: 100%;
	}
}

@keyframes slideFromRight {
	 from {
		 transform: translateX(50%);
	}
	 to {
		 transform: translateX(0);
	}
}

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

/** Spotlight animations start */
@keyframes spotlight-big-image {
	 0% {
		 max-height: 0;
		 transform: perspective(31.25rem) translate3d(0, 0, 0.9rem);
		 opacity: 0;
	}
	 60% {
		 max-height: 100%;
		 transform: perspective(31.25rem) translate3d(0, 0, 0.8rem);
		 opacity: 1;
	}
	 100% {
		 max-height: 100%;
		 transform: perspective(31.25rem) translate3d(0, 0, 0);
		 opacity: 1;
	}
}

@keyframes spotlight-text-cero {
	 0% {
		 transform: translateY(2rem);
		 opacity: 0;
	}
	 80% {
		 transform: translateY(0);
		 opacity: 1;
	}
	 100% {
		 transform: translateY(0);
		 opacity: 1;
	}
}

@keyframes spotlight-text-one {
	 0% {
		 transform: translateY(2rem);
		 opacity: 0;
	}
	 30% {
		 transform: translateY(2rem);
		 opacity: 0;
	}
	 90% {
		 transform: translateY(0);
		 opacity: 1;
	}
	 100% {
		 transform: translateY(0);
		 opacity: 1;
	}
}

@keyframes spotlight-img-left-out {
	 0% {
		 transform: translateX(-100%);
		 opacity: 1;
	}
	 30% {
		 opacity: 0;
	}
	 60% {
		 transform: translateX(-120%);
		 opacity: 0;
	}
	 100% {
		 transform: translateX(-120%);
		 opacity: 0;
	}
}

@keyframes spotlight-img-right-out {
	 0% {
		 transform: translateX(-100%);
		 opacity: 1;
	}
	 30% {
		 opacity: 0;
	}
	 60% {
		 transform: translateX(-80%);
		 opacity: 0;
	}
	 100% {
		 transform: translateX(-80%);
		 opacity: 0;
	}
}

@keyframes spotlight-img-cero-left-in {
	 0% {
		 transform: translateX(-180%);
		 opacity: 0;
	}
	 30% {
		 opacity: 0;
	}
	 70% {
		 opacity: 1;
	}
	 100% {
		 transform: translateX(-200%);
		 opacity: 1;
	}
}

@keyframes spotlight-img-one-left-in {
	 0% {
		 transform: translateX(-180%);
		 opacity: 0;
	}
	 40% {
		 opacity: 0;
	}
	 70% {
		 opacity: 1;
	}
	 100% {
		 transform: translateX(-200%);
		 opacity: 1;
	}
}

@keyframes spotlight-img-two-left-in {
	 0% {
		 transform: translateX(-180%);
		 opacity: 0;
	}
	 50% {
		 opacity: 0;
	}
	 70% {
		 opacity: 1;
	}
	 100% {
		 transform: translateX(-200%);
		 opacity: 1;
	}
}

@keyframes spotlight-img-cero-main-in {
	 0% {
		 transform: translateX(-80%);
		 opacity: 0;
	}
	 30% {
		 opacity: 0;
	}
	 70% {
		 opacity: 1;
	}
	 100% {
		 transform: translateX(-100%);
		 opacity: 1;
	}
}

@keyframes spotlight-img-one-main-in {
	 0% {
		 transform: translateX(-80%);
		 opacity: 0;
	}
	 40% {
		 opacity: 0;
	}
	 70% {
		 opacity: 1;
	}
	 100% {
		 transform: translateX(-100%);
		 opacity: 1;
	}
}

@keyframes spotlight-img-two-main-in {
	 0% {
		 transform: translateX(-80%);
		 opacity: 0;
	}
	 50% {
		 opacity: 0;
	}
	 70% {
		 opacity: 1;
	}
	 100% {
		 transform: translateX(-100%);
		 opacity: 1;
	}
}

@keyframes spotlight-img-cero-right-in {
	 0% {
		 transform: translateX(-20%);
		 opacity: 0;
	}
	 30% {
		 opacity: 0;
	}
	 70% {
		 opacity: 1;
	}
	 100% {
		 transform: translateX(0);
		 opacity: 1;
	}
}

@keyframes spotlight-img-one-right-in {
	 0% {
		 transform: translateX(-20%);
		 opacity: 0;
	}
	 40% {
		 opacity: 0;
	}
	 70% {
		 opacity: 1;
	}
	 100% {
		 transform: translateX(0);
		 opacity: 1;
	}
}

@keyframes spotlight-img-two-right-in {
	 0% {
		 transform: translateX(-20%);
		 opacity: 0;
	}
	 50% {
		 opacity: 0;
	}
	 70% {
		 opacity: 1;
	}
	 100% {
		 transform: translateX(0);
		 opacity: 1;
	}
}

/** Spotlight animations end */
/** For Secondary nav */
@keyframes pcl-secondary-nav-in {
	 from {
		 transform: translateY(100%);
		 max-height: 0;
	}
	 to {
		 transform: translateY(0);
		 max-height: 100%;
	}
}

/** Scroll Jack animations */
@keyframes scroll-jack-img-up {
	 0% {
		 max-height: 0;
		 opacity: 0;
	}
	 100% {
		 max-height: 100%;
		 opacity: 1;
	}
}

@keyframes scroll-jack-text-up {
	 0% {
		 opacity: 0;
		 transform: translateY(2rem);
	}
	 100% {
		 opacity: 1;
		 transform: translateY(0);
	}
}

/** Scroll Jack animations end */
@keyframes fade-in-slide-r {
	 from {
		 opacity: 0;
		 transform: translateX(-80px);
	}
	 to {
		 opacity: 1;
		 transform: translateX(0);
	}
}

@keyframes fade-in-slide-l {
	 from {
		 opacity: 0;
		 transform: translateX(80px);
	}
	 to {
		 opacity: 1;
		 transform: translateX(0);
	}
}

@keyframes curtain-up {
	 0% {
		 transform: translateY(0);
	}
	 100% {
		 transform: translateY(-100%);
	}
}

@keyframes project-hero-img-in {
	 0% {
		 transform: translateY(20%);
		 height: 80%;
		 opacity: 0.8;
	}
	 100% {
		 transform: translateY(0);
		 height: 100%;
		 opacity: 1;
	}
}
 .gradient-transparent-to-darkgray {
	 background: linear-gradient(to right, rgba(59, 59, 59, 0), #36383d);
}

 .pcl-case-study-tabs--content-animation .pcl-title--eyebrow {
	 transform: rotateX(0deg);
}

 .pcl-case-study-tabs--content-animation .pcl-title--eyebrow:before {
	 width: 3rem;
}