.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;}