.fxSlideForward .navOutNext {
-webkit-transform-origin: -50% 50%;
transform-origin: -50% 50%;
-webkit-animation: scaleDown 0.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
animation: scaleDown 0.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
}
.fxSlideForward .navInNext {
-webkit-transform-origin: 150% 50%;
transform-origin: 150% 50%;
-webkit-animation: scaleUp 0.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
animation: scaleUp 0.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
}
.fxSlideForward .navOutPrev {
-webkit-transform-origin: 150% 50%;
transform-origin: 150% 50%;
-webkit-animation: scaleDown 0.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
animation: scaleDown 0.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
}
.fxSlideForward .navInPrev {
-webkit-transform-origin: -50% 50%;
transform-origin: -50% 50%;
-webkit-animation: scaleUp 0.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
animation: scaleUp 0.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
}
@-webkit-keyframes scaleUp {
from {
-webkit-transform: scale(0);
}
to {
-webkit-transform: scale(1);
opacity: 1;
}
}
@keyframes scaleUp {
from {
transform: scale(0);
}
to {
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes scaleDown {
to {
-webkit-transform: scale(0);
opacity: 0;
}
}
@keyframes scaleDown {
to {
transform: scale(0);
opacity: 0;
}
}   .fxTableDrop .navOutNext {
-webkit-animation: slideOutDown 0.4s forwards cubic-bezier(0.7, 0, 0.3, 1);
animation: slideOutDown 0.4s forwards cubic-bezier(0.7, 0, 0.3, 1);
}
.fxTableDrop .navInNext {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: slideInDown 0.4s 0.2s forwards ease-in;
animation: slideInDown 0.4s 0.2s forwards ease-in;
}
.fxTableDrop .navOutPrev {
-webkit-animation: slideOutUp 0.4s forwards cubic-bezier(0.7, 0, 0.3, 1);
animation: slideOutUp 0.4s forwards cubic-bezier(0.7, 0, 0.3, 1);
}
.fxTableDrop .navInPrev {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: slideInUp 0.4s 0.2s forwards ease-in;
animation: slideInUp 0.4s 0.2s forwards ease-in;
}
@-webkit-keyframes slideOutDown {
100% {
-webkit-transform: translateY(150%);
opacity: 0;
}
}
@keyframes slideOutDown {
100% {
transform: translateY(150%);
opacity: 0;
}
}
@-webkit-keyframes slideInDown {
0% {
-webkit-animation-timing-function: ease-in-out;
-webkit-transform: translateY(-150%);
}
50% {
-webkit-transform: translateY(0) rotate(1deg);
opacity: 1;
}
70% {
-webkit-transform: translateY(0) rotate(-1deg);
}
85% {
-webkit-transform: translateY(0) rotate(1deg);
}
95% {
-webkit-transform: translateY(0) rotate(-1deg);
}
100% {
-webkit-transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInDown {
0% {
animation-timing-function: ease-in-out;
transform: translateY(-150%);
}
50% {
transform: translateY(0) rotate(1deg);
opacity: 1;
}
70% {
transform: translateY(0) rotate(-1deg);
}
85% {
transform: translateY(0) rotate(1deg);
}
95% {
transform: translateY(0) rotate(-1deg);
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@-webkit-keyframes slideOutUp {
100% {
-webkit-transform: translateY(-150%);
opacity: 0;
}
}
@keyframes slideOutUp {
100% {
transform: translateY(-150%);
opacity: 0;
}
}
@-webkit-keyframes slideInUp {
0% {
-webkit-animation-timing-function: ease-in-out;
-webkit-transform: translateY(150%);
}
50% {
-webkit-transform: translateY(0) rotate(-1deg);
opacity: 1;
}
70% {
-webkit-transform: translateY(0) rotate(1deg);
}
85% {
-webkit-transform: translateY(0) rotate(-1deg);
}
95% {
-webkit-transform: translateY(0) rotate(1deg);
}
100% {
-webkit-transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInUp {
0% {
animation-timing-function: ease-in-out;
transform: translateY(150%);
}
50% {
transform: translateY(0) rotate(-1deg);
opacity: 1;
}
70% {
transform: translateY(0) rotate(1deg);
}
85% {
transform: translateY(0) rotate(-1deg);
}
95% {
transform: translateY(0) rotate(1deg);
}
100% {
transform: translateY(0);
opacity: 1;
}
}   .fxSlideIt li {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.fxSlideIt .navOutNext {
-webkit-animation: slideOutLeft 0.5s forwards;
animation: slideOutLeft 0.5s forwards;
}
.fxSlideIt .navInNext {
-webkit-animation: rotateSlideInRight 0.6s 0.1s forwards ease-in-out;
animation: rotateSlideInRight 0.6s 0.1s forwards ease-in-out;
}
.fxSlideIt .navOutPrev {
-webkit-animation: slideOutRight 0.5s forwards;
animation: slideOutRight 0.5s forwards;
}
.fxSlideIt .navInPrev {
-webkit-animation: rotateSlideInLeft 0.6s 0.1s forwards ease-in-out;
animation: rotateSlideInLeft 0.6s 0.1s forwards ease-in-out;
}
@-webkit-keyframes slideOutLeft {
100% {
-webkit-transform: translateX(-400%);
opacity: 0;
}
}
@keyframes slideOutLeft {
100% {
transform: translateX(-400%);
opacity: 0;
}
}
@-webkit-keyframes rotateSlideInRight {
0% {
-webkit-transform: translateX(100%) rotate(20deg);
}
35% {
-webkit-transform: rotate(-8deg);
}
55% {
-webkit-transform: rotate(6deg);
}
70% {
-webkit-transform: rotate(-4deg);
}
85% {
-webkit-transform: rotate(2deg);
}
95% {
-webkit-transform: rotate(-1deg);
}
100% {
-webkit-transform: translateX(0) rotate(0deg);
opacity: 1;
}
}
@keyframes rotateSlideInRight {
0% {
transform: translateX(100%) rotate(20deg);
}
35% {
transform: rotate(-8deg);
}
55% {
transform: rotate(6deg);
}
70% {
transform: rotate(-4deg);
}
85% {
transform: rotate(2deg);
}
95% {
transform: rotate(-1deg);
}
100% {
transform: translateX(0) rotate(0deg);
opacity: 1;
}
}
@-webkit-keyframes slideOutRight {
100% {
-webkit-transform: translateX(400%);
opacity: 0;
}
}
@keyframes slideOutRight {
100% {
transform: translateX(400%);
opacity: 0;
}
}
@-webkit-keyframes rotateSlideInLeft {
0% {
-webkit-transform: translateX(-100%) rotate(-20deg);
}
35% {
-webkit-transform: rotate(8deg);
}
55% {
-webkit-transform: rotate(-6deg);
}
70% {
-webkit-transform: rotate(4deg);
}
85% {
-webkit-transform: rotate(-2deg);
}
95% {
-webkit-transform: rotate(1deg);
}
100% {
-webkit-transform: translateX(0) rotate(0deg);
opacity: 1;
}
}
@keyframes rotateSlideInLeft {
0% {
transform: translateX(-100%) rotate(-20deg);
}
35% {
transform: rotate(8deg);
}
55% {
transform: rotate(-6deg);
}
70% {
transform: rotate(4deg);
}
85% {
transform: rotate(-2deg);
}
95% {
transform: rotate(1deg);
}
100% {
transform: translateX(0) rotate(0deg);
opacity: 1;
}
}   .fxBottleKick li {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.fxBottleKick .navOutNext {
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-animation: rotateBounceOutLeft 1s forwards ease-in-out;
animation: rotateBounceOutLeft 1s forwards ease-in-out;
}
.fxBottleKick .navInNext {
-webkit-animation: rotateBounceInRight 1s 0.1s forwards ease-in-out;
animation: rotateBounceInRight 1s 0.1s forwards ease-in-out;
}
.fxBottleKick .navOutPrev {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-animation: rotateBounceOutRight 1s forwards ease-in-out;
animation: rotateBounceOutRight 1s forwards ease-in-out;
}
.fxBottleKick .navInPrev {
-webkit-animation: rotateBounceInLeft 1s 0.1s forwards ease-in-out;
animation: rotateBounceInLeft 1s 0.1s forwards ease-in-out;
}
@-webkit-keyframes rotateBounceOutLeft {
25% {
-webkit-transform: translateX(-100%) rotate(0deg);
opacity: 0.9;
}
58% {
-webkit-transform: translateX(-150%) rotate(-92deg);
opacity: 0.9;
}
70% {
-webkit-transform: translateX(-150%) rotate(-75deg);
}
86% {
-webkit-transform: translateX(-150%) rotate(-92deg);
}
95% {
-webkit-transform: translateX(-150%) rotate(-87deg);
}
100% {
-webkit-transform: translateX(-150%) rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateBounceOutLeft {
25% {
transform: translateX(-100%) rotate(0deg);
opacity: 0.9;
}
58% {
transform: translateX(-150%) rotate(-92deg);
opacity: 0.9;
}
70% {
transform: translateX(-150%) rotate(-75deg);
}
86% {
transform: translateX(-150%) rotate(-92deg);
}
95% {
transform: translateX(-150%) rotate(-87deg);
}
100% {
transform: translateX(-150%) rotate(-90deg);
opacity: 0;
}
}
@-webkit-keyframes rotateBounceInRight {
0% {
-webkit-transform: translateX(200%) rotate(20deg);
}
25% {
-webkit-transform: rotate(-5deg);
}
55% {
-webkit-transform: translateX(-5%) rotate(3deg);
opacity: 1;
}
80% {
-webkit-transform: rotate(-2deg);
}
100% {
-webkit-transform: translateX(0) rotate(0deg);
opacity: 1;
}
}
@keyframes rotateBounceInRight {
0% {
transform: translateX(200%) rotate(20deg);
}
25% {
transform: rotate(-5deg);
}
55% {
transform: translateX(-5%) rotate(3deg);
opacity: 1;
}
80% {
transform: rotate(-2deg);
}
100% {
transform: translateX(0) rotate(0deg);
opacity: 1;
}
}
@-webkit-keyframes rotateBounceOutRight {
25% {
-webkit-transform: translateX(100%) rotate(0deg);
opacity: 0.9;
}
58% {
-webkit-transform: translateX(150%) rotate(92deg);
opacity: 0.9;
}
70% {
-webkit-transform: translateX(150%) rotate(75deg);
}
86% {
-webkit-transform: translateX(150%) rotate(92deg);
}
95% {
-webkit-transform: translateX(150%) rotate(87deg);
}
100% {
-webkit-transform: translateX(150%) rotate(90deg);
opacity: 0;
}
}
@keyframes rotateBounceOutRight {
25% {
transform: translateX(100%) rotate(0deg);
opacity: 0.9;
}
58% {
transform: translateX(150%) rotate(92deg);
opacity: 0.9;
}
70% {
transform: translateX(150%) rotate(75deg);
}
86% {
transform: translateX(150%) rotate(92deg);
}
95% {
transform: translateX(150%) rotate(87deg);
}
100% {
transform: translateX(150%) rotate(90deg);
opacity: 0;
}
}
@-webkit-keyframes rotateBounceInLeft {
0% {
-webkit-transform: translateX(-200%) rotate(-20deg);
}
25% {
-webkit-transform: rotate(5deg);
}
55% {
-webkit-transform: translateX(5%) rotate(-3deg);
opacity: 1;
}
80% {
-webkit-transform: rotate(2deg);
}
100% {
-webkit-transform: translateX(0) rotate(0deg);
opacity: 1;
}
}
@keyframes rotateBounceInLeft {
0% {
transform: translateX(-200%) rotate(-20deg);
}
25% {
transform: rotate(5deg);
}
55% {
transform: translateX(5%) rotate(-3deg);
opacity: 1;
}
80% {
transform: rotate(2deg);
}
100% {
transform: translateX(0) rotate(0deg);
opacity: 1;
}
}   .fxShelf li {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.fxShelf .navOutNext {
-webkit-animation: addToShelfLeft 0.3s forwards ease-in-out;
animation: addToShelfLeft 0.3s forwards ease-in-out;
}
.fxShelf .navInNext {
-webkit-animation: removeFromShelfRight 0.5s forwards ease-in-out;
animation: removeFromShelfRight 0.5s forwards ease-in-out;
}
.fxShelf .navOutPrev {
-webkit-animation: addToShelfRight 0.3s forwards ease-in-out;
animation: addToShelfRight 0.3s forwards ease-in-out;
}
.fxShelf .navInPrev {
-webkit-animation: removeFromShelfLeft 0.5s forwards ease-in-out;
animation: removeFromShelfLeft 0.5s forwards ease-in-out;
}
@-webkit-keyframes addToShelfLeft {
to {
-webkit-transform: translateY(-120%) translateX(-300%) rotate(-90deg);
opacity: 0;
}
}
@keyframes addToShelfLeft {
to {
transform: translateY(-120%) translateX(-300%) rotate(-90deg);
opacity: 0;
}
}
@-webkit-keyframes removeFromShelfRight {
0% {
-webkit-transform: translateY(-120%) translateX(300%) rotate(90deg);
}
45% {
-webkit-transform: translateY(0) translateX(0) rotate(-3deg);
opacity: 1;
}
65% {
-webkit-transform: translateY(0) translateX(0) rotate(2deg);
opacity: 1;
}
80% {
-webkit-transform: translateY(0) translateX(0) rotate(-1deg);
opacity: 1;
}
95% {
-webkit-transform: translateY(0) translateX(0) rotate(1deg);
opacity: 1;
}
100% {
-webkit-transform: translateY(0) translateX(0) rotate(0deg);
opacity: 1;
}
}
@keyframes removeFromShelfRight {
0% {
transform: translateY(-120%) translateX(300%) rotate(90deg);
}
45% {
transform: translateY(0) translateX(0) rotate(-3deg);
opacity: 1;
}
65% {
transform: translateY(0) translateX(0) rotate(2deg);
opacity: 1;
}
80% {
transform: translateY(0) translateX(0) rotate(-1deg);
opacity: 1;
}
95% {
transform: translateY(0) translateX(0) rotate(1deg);
opacity: 1;
}
100% {
transform: translateY(0) translateX(0) rotate(0deg);
opacity: 1;
}
}
@-webkit-keyframes addToShelfRight {
to {
-webkit-transform: translateY(-120%) translateX(300%) rotate(90deg);
opacity: 0;
}
}
@keyframes addToShelfRight {
to {
transform: translateY(-120%) translateX(300%) rotate(90deg);
opacity: 0;
}
}
@-webkit-keyframes removeFromShelfLeft {
0% {
-webkit-transform: translateY(-120%) translateX(-300%) rotate(-90deg);
}
45% {
-webkit-transform: translateY(0) translateX(0) rotate(3deg);
opacity: 1;
}
65% {
-webkit-transform: translateY(0) translateX(0) rotate(-2deg);
opacity: 1;
}
80% {
-webkit-transform: translateY(0) translateX(0) rotate(1deg);
opacity: 1;
}
95% {
-webkit-transform: translateY(0) translateX(0) rotate(-1deg);
opacity: 1;
}
100% {
-webkit-transform: translateY(0) translateX(0) rotate(0deg);
opacity: 1;
}
}
@keyframes removeFromShelfLeft {
0% {
transform: translateY(-120%) translateX(-300%) rotate(-90deg);
}
45% {
transform: translateY(0) translateX(0) rotate(3deg);
opacity: 1;
}
65% {
transform: translateY(0) translateX(0) rotate(-2deg);
opacity: 1;
}
80% {
transform: translateY(0) translateX(0) rotate(1deg);
opacity: 1;
}
95% {
transform: translateY(0) translateX(0) rotate(-1deg);
opacity: 1;
}
100% {
transform: translateY(0) translateX(0) rotate(0deg);
opacity: 1;
}
}