@keyframes pni-anim-fade-in {
from {
	opacity: 0;
}

to {
	opacity: 1;
}
}

@keyframes pni-anim-fade-out {
from {
	opacity: 1;
}

to {
	opacity: 0;
}
}

@keyframes pni-anim-slide-in {
from {
	opacity: 0;
	transform: translate(-999px, 0);
}

to {
	opacity: 1;
	transform: translate(0, 0);
}
}

@keyframes pni-anim-slide-out {
from {
	opacity: 1;
	transform: translate(0, 0);
}

to {
	opacity: 0;
	transform: translate(999px, 0);
}
}

@keyframes pni-anim-zoom-in {
from {
	opacity: 0;
	transform: scale(0);
}

to {
	opacity: 1;
	transform: scale(1);
}
}

@keyframes pni-anim-zoom-out {
from {
	opacity: 1;
	transform: scale(1);
}

to {
	opacity: 0;
	transform: scale(0);
}
}


@keyframes pni-anim-bounce {
0% {
	transform: translateY(0);
}

10% {
	transform: translateY(-40px);
}

20% {
	transform: translateY(40px);
}

30% {
	transform: translateY(-30px);
}

40% {
	transform: translateY(30px);
}

50% {
	transform: translateY(0);
}

60% {
	transform: translateY(-5px)
}

70% {
	transform: translateY(5px)
}

80%
90%

100% {
	transform: translateY(0)
}
}


@keyframes pni-anim-pop {
0% {
	transform: scale(1, 0)
}


25% {
	transform: scale(1.15, 1.05)
}


50% {
	transform: scale(1, 1)
}

75% {
	transform: scale(1.05, 1.01)
}

100% {
	transform: scale(1,1)
}
}

@keyframes pni-anim-flip {
from {
	transform: scale(1, -0.25)
}
to {
	transform: scale(1, 1)
}
}

/* Set default animation properties for all. */
.is-style-pni-anim-fade-in, .is-style-pni-anim-fade-out, .is-style-pni-anim-slide-in, .is-style-pni-anim-slide-out, .is-style-pni-anim-zoom-in, .is-style-pni-anim-zoom-out, .is-style-pni-anim-bounce, .is-style-pni-anim-pop, .is-style-pni-anim-flip {
	animation: 2s 1 none;
}

/* Starting styles for animations. */
.is-style-pni-anim-fade-in {
	opacity: 0;
}

/* Set visible opacities for animations that use them. */

.was-visible.is-style-pni-anim-fade-in, .was-visible.is-style-pni-anim-slide-in, .was-visible.is-style-pni-anim-zoom-in {
	opacity: 1;
}

/* Set invisible opacities for animations that use them. */

.was-invisible.is-style-pni-anim-fade-out, .was-invisible.is-style-pni-anim-slide-out, .was-invisible.is-style-pni-anim-zoom-out {
	opacity: 0;
}

/* Apply animations based on visibility */

.was-visible.is-style-pni-anim-fade-in {
	animation-name: pni-anim-fade-in;
}

.was-invisible.is-style-pni-anim-fade-out {
	animation-name: pni-anim-fade-out;
}

.was-visible.is-style-pni-anim-slide-in {
	animation-name: pni-anim-slide-in;
}

.was-invisible.is-style-pni-anim-slide-out {
	animation-name: pni-anim-slide-out;
}

.was-visible.is-style-pni-anim-zoom-in {
	animation-name: pni-anim-zoom-in;

}

.was-invisible.is-style-pni-anim-zoom-out {
	animation-name: pni-anim-zoom-out;
}

/* Apply animations based on element having been encountered */

.was-intersected.is-style-pni-anim-bounce {
	animation: 1s 1 pni-anim-bounce cubic-bezier(0.3, 1, 0.2, 0.1);
}

.was-intersected.is-style-pni-anim-pop {
	animation: 0.75s 1 pni-anim-pop cubic-bezier(0.2,0.1,0.3,1); 
}

.was-intersected.is-style-pni-anim-flip {
	animation: 1s 1 pni-anim-flip ease-in-out; 
}