.bottom-to-top {
    transform-origin: center top;
    -webkit-transform-origin: center top;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    opacity: 1;
    -webkit-opacity: 1;
    transition: all 0.9s cubic-bezier(0.1, 0.9, 0.6, 1);
    -webkit-transition: all 0.9s cubic-bezier(0.1, 0.9, 0.6, 1);
}

.bottom-to-top.off {
    transform: translateY(100px);
    -webkit-transform: translateY(100px);
    opacity: 0;
    -webkit-opacity: 0;
    transition: none !important;
    -webkit-transition: none !important;
}

.top-to-bottom {
    transform-origin: center top;
    -webkit-transform-origin: center top;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    opacity: 1;
    -webkit-opacity: 1;
    transition: all 0.9s cubic-bezier(0.1, 0.9, 0.6, 1);
    -webkit-transition: all 0.9s cubic-bezier(0.1, 0.9, 0.6, 1);
}

.top-to-bottom.off {
    transform: translateY(-300px);
    -webkit-transform: translateY(-300px);
    opacity: 0;
    -webkit-opacity: 0;
    transition: none !important;
    -webkit-transition: none !important;
}

.left-to-right {
    transform-origin: center center;
    -webkit-transform-origin: center center;
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    opacity: 1;
    -webkit-opacity: 1;
    transition: all 0.9s cubic-bezier(0.1, 0.9, 0.6, 1);
    -webkit-transition: all 0.9s cubic-bezier(0.1, 0.9, 0.6, 1);
}

.left-to-right.off {
    transform: translateX(-200px);
    -webkit-transform: translateX(-200px);
    opacity: 0;
    -webkit-opacity: 0;
    transition: none !important;
    -webkit-transition: none !important;
}

.right-to-left {
    transform-origin: center center;
    -webkit-transform-origin: center center;
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    opacity: 1;
    -webkit-opacity: 1;
    transition: all 0.9s cubic-bezier(0.1, 0.9, 0.6, 1);
    -webkit-transition: all 0.9s cubic-bezier(0.1, 0.9, 0.6, 1);
}

.right-to-left.off {
    transform: translateX(200px);
    -webkit-transform: translateX(200px);
    opacity: 0;
    -webkit-opacity: 0;
    transition: none !important;
    -webkit-transition: none !important;
}

.scale-up {
    transform-origin: center center;
    -webkit-transform-origin: center center;
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    opacity: 1;
    -webkit-opacity: 1;
    transition: all 0.9s cubic-bezier(0.1, 0.9, 0.6, 1);
    -webkit-transition: all 0.9s cubic-bezier(0.1, 0.9, 0.6, 1);
}

.scale-up.off {
    transform: scale(0.3, 0.3);
    -webkit-transform: scale(0.3, 0.3);
    opacity: 0;
    -webkit-opacity: 0;
    transition: none !important;
    -webkit-transition: none !important;
}

.scale-down {
    transform-origin: center center;
    -webkit-transform-origin: center center;
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    opacity: 1;
    -webkit-opacity: 1;
    transition: all 0.9s cubic-bezier(0.1, 0.9, 0.6, 1);
    -webkit-transition: all 0.9s cubic-bezier(0.1, 0.9, 0.6, 1);
}

.scale-down.off {
    transform: scale(1.5, 1.5);
    -webkit-transform: scale(1.5, 1.5);
    opacity: 0;
    -webkit-opacity: 0;
    transition: none !important;
    -webkit-transition: none !important;
}

.rotate-cw {
    transform-origin: center center;
    -webkit-transform-origin: center center;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    opacity: 1;
    -webkit-opacity: 1;
    transition: all 0.9s cubic-bezier(0.1, 0.9, 0.6, 1);
    -webkit-transition: all 0.9s cubic-bezier(0.1, 0.9, 0.6, 1);
}

.rotate-cw.off {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    opacity: 0;
    -webkit-opacity: 0;
    transition: none !important;
    -webkit-transition: none !important;
}

.rotate-ccw {
    transform-origin: center center;
    -webkit-transform-origin: center center;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    opacity: 1;
    -webkit-opacity: 1;
    transition: all 0.9s cubic-bezier(0.1, 0.9, 0.6, 1);
    -webkit-transition: all 0.9s cubic-bezier(0.1, 0.9, 0.6, 1);
}

.rotate-ccw.off {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    opacity: 0;
    -webkit-opacity: 0;
    transition: none !important;
    -webkit-transition: none !important;
}

.fade-in {
    opacity: 1;
    -webkit-opacity: 1;
    transition: all 1s ease-in-out !important;
    -webkit-transition: all 1s ease-in-out !important;
}

.fade-in.off {
    opacity: 0;
    -webkit-opacity: 0;
    transition: none !important;
    -webkit-transition: none !important;
}