/* Author: XpeedStudio Author URI: http://themeforest.net/user/XpeedStudio/portfolio */ // Animate CSS @charset "UTF-8"; .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s } @ -webkit-keyframes bounce { 0%,20%,50%,80%,100%{ -webkit-transform: translateY(0); transform: translateY(0) } 40%{ -webkit-transform :translateY(-30px) ; transform :translateY(-30px) } 60%{ -webkit-transform :translateY(-15px) ; transform :translateY(-15px) } } @ keyframes bounce { 0%,20%,50%,80%,100%{ -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 40%{ -webkit-transform :translateY(-30px) ; -ms-transform :translateY(-30px) ; transform :translateY(-30px) } 60%{ -webkit-transform :translateY(-15px) ; -ms-transform :translateY(-15px) ; transform :translateY(-15px) } } .bounce { -webkit-animation-name: bounce; animation-name: bounce } @ -webkit-keyframes flash { 0%,50%,100%{ opacity: 1 } 25%,75%{ opacity : 0 } } @ keyframes flash { 0%,50%,100%{ opacity: 1 } 25%,75%{ opacity : 0 } } .flash { -webkit-animation-name: flash; animation-name: flash } @ -webkit-keyframes pulse { 0%{ -webkit-transform: scale(1); transform: scale(1) } 50%{ -webkit-transform :scale (1 .1 ); transform :scale (1 .1 ) } 100%{ -webkit-transform :scale(1) ; transform :scale(1) } } @ keyframes pulse { 0%{ -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } 50%{ -webkit-transform :scale (1 .1 ); -ms-transform :scale (1 .1 ); transform :scale (1 .1 ) } 100%{ -webkit-transform :scale(1) ; -ms-transform :scale(1) ; transform :scale(1) } } .pulse { -webkit-animation-name: pulse; animation-name: pulse } @ -webkit-keyframes shake { 0%,100%{ -webkit-transform: translateX(0); transform: translateX(0) } 10%,30%,50%,70%,90%{ -webkit-transform :translateX(-10px) ; transform :translateX(-10px) } 20%,40%,60%,80%{ -webkit-transform :translateX(10px) ; transform :translateX(10px) } } @ keyframes shake { 0%,100%{ -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 10%,30%,50%,70%,90%{ -webkit-transform :translateX(-10px) ; -ms-transform :translateX(-10px) ; transform :translateX(-10px) } 20%,40%,60%,80%{ -webkit-transform :translateX(10px) ; -ms-transform :translateX(10px) ; transform :translateX(10px) } } .shake { -webkit-animation-name: shake; animation-name: shake } @ -webkit-keyframes swing { 20%{ -webkit-transform: rotate(15deg); transform: rotate(15deg) } 40%{ -webkit-transform :rotate(-10deg) ; transform :rotate(-10deg) } 60%{ -webkit-transform :rotate(5deg) ; transform :rotate(5deg) } 80%{ -webkit-transform :rotate(-5deg) ; transform :rotate(-5deg) } 100%{ -webkit-transform :rotate(0) ; transform :rotate(0) } } @ keyframes swing { 20%{ -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg) } 40%{ -webkit-transform :rotate(-10deg) ; -ms-transform :rotate(-10deg) ; transform :rotate(-10deg) } 60%{ -webkit-transform :rotate(5deg) ; -ms-transform :rotate(5deg) ; transform :rotate(5deg) } 80%{ -webkit-transform :rotate(-5deg) ; -ms-transform :rotate(-5deg) ; transform :rotate(-5deg) } 100%{ -webkit-transform :rotate(0) ; -ms-transform :rotate(0) ; transform :rotate(0) } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing } @ -webkit-keyframes tada { 0%{ -webkit-transform: scale(1); transform: scale(1) } 10%,20%{ -webkit-transform :scale ( .9 ) rotate (-3deg);transform :scale ( .9 ) rotate (-3deg) } 30%,50%,70%,90%{ -webkit-transform :scale (1 .1 ) rotate (3deg);transform :scale (1 .1 ) rotate (3deg) } 40%,60%,80%{ -webkit-transform :scale (1 .1 ) rotate (-3deg);transform :scale (1 .1 ) rotate (-3deg) } 100%{ -webkit-transform :scale(1) rotate (0);transform :scale(1) rotate (0) } } @ keyframes tada { 0%{ -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } 10%,20%{ -webkit-transform :scale ( .9 ) rotate (-3deg);-ms-transform :scale ( .9 ) rotate (-3deg);transform :scale ( .9 ) rotate (-3deg) } 30%,50%,70%,90%{ -webkit-transform :scale (1 .1 ) rotate (3deg);-ms-transform :scale (1 .1 ) rotate (3deg);transform :scale (1 .1 ) rotate (3deg) } 40%,60%,80%{ -webkit-transform :scale (1 .1 ) rotate (-3deg);-ms-transform :scale (1 .1 ) rotate (-3deg);transform :scale (1 .1 ) rotate (-3deg) } 100%{ -webkit-transform :scale(1) rotate (0);-ms-transform :scale(1) rotate (0);transform :scale(1) rotate (0) } } .tada { -webkit-animation-name: tada; animation-name: tada } @ -webkit-keyframes wobble { 0%{ -webkit-transform: translateX(0%); transform: translateX(0%) } 15%{ -webkit-transform :translateX (-25%) rotate (-5deg);transform :translateX (-25%) rotate (-5deg) } 30%{ -webkit-transform :translateX (20%) rotate (3deg);transform :translateX (20%) rotate (3deg) } 45%{ -webkit-transform :translateX (-15%) rotate (-3deg);transform :translateX (-15%) rotate (-3deg) } 60%{ -webkit-transform :translateX (10%) rotate (2deg);transform :translateX (10%) rotate (2deg) } 75%{ -webkit-transform :translateX (-5%) rotate (-1deg);transform :translateX (-5%) rotate (-1deg) } 100%{ -webkit-transform :translateX (0%); transform :translateX (0%) } } @ keyframes wobble { 0%{ -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%) } 15%{ -webkit-transform :translateX (-25%) rotate (-5deg);-ms-transform :translateX (-25%) rotate (-5deg);transform :translateX (-25%) rotate (-5deg) } 30%{ -webkit-transform :translateX (20%) rotate (3deg);-ms-transform :translateX (20%) rotate (3deg);transform :translateX (20%) rotate (3deg) } 45%{ -webkit-transform :translateX (-15%) rotate (-3deg);-ms-transform :translateX (-15%) rotate (-3deg);transform :translateX (-15%) rotate (-3deg) } 60%{ -webkit-transform :translateX (10%) rotate (2deg);-ms-transform :translateX (10%) rotate (2deg);transform :translateX (10%) rotate (2deg) } 75%{ -webkit-transform :translateX (-5%) rotate (-1deg);-ms-transform :translateX (-5%) rotate (-1deg);transform :translateX (-5%) rotate (-1deg) } 100%{ -webkit-transform :translateX (0%); -ms-transform :translateX (0%); transform :translateX (0%) } } .wobble { -webkit-animation-name: wobble; animation-name: wobble } @ -webkit-keyframes bounceIn { 0%{ opacity: 0; -webkit-transform: scale(.3); transform: scale(.3) } 50%{ opacity : 1; -webkit-transform :scale (1 .05 ); transform :scale (1 .05 ) } 70%{ -webkit-transform :scale ( .9 ); transform :scale ( .9 ) } 100%{ -webkit-transform :scale(1) ; transform :scale(1) } } @ keyframes bounceIn { 0%{ opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3) } 50%{ opacity : 1; -webkit-transform :scale (1 .05 ); -ms-transform :scale (1 .05 ); transform :scale (1 .05 ) } 70%{ -webkit-transform :scale ( .9 ); -ms-transform :scale ( .9 ); transform :scale ( .9 ) } 100%{ -webkit-transform :scale(1) ; -ms-transform :scale(1) ; transform :scale(1) } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn } @ -webkit-keyframes bounceInDown { 0%{ opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px) } 60%{ opacity : 1; -webkit-transform :translateY(30px) ; transform :translateY(30px) } 80%{ -webkit-transform :translateY(-10px) ; transform :translateY(-10px) } 100%{ -webkit-transform :translateY(0) ; transform :translateY(0) } } @ keyframes bounceInDown { 0%{ opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px) } 60%{ opacity : 1; -webkit-transform :translateY(30px) ; -ms-transform :translateY(30px) ; transform :translateY(30px) } 80%{ -webkit-transform :translateY(-10px) ; -ms-transform :translateY(-10px) ; transform :translateY(-10px) } 100%{ -webkit-transform :translateY(0) ; -ms-transform :translateY(0) ; transform :translateY(0) } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown } @ -webkit-keyframes bounceInLeft { 0%{ opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px) } 60%{ opacity : 1; -webkit-transform :translateX(30px) ; transform :translateX(30px) } 80%{ -webkit-transform :translateX(-10px) ; transform :translateX(-10px) } 100%{ -webkit-transform :translateX(0) ; transform :translateX(0) } } @ keyframes bounceInLeft { 0%{ opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px) } 60%{ opacity : 1; -webkit-transform :translateX(30px) ; -ms-transform :translateX(30px) ; transform :translateX(30px) } 80%{ -webkit-transform :translateX(-10px) ; -ms-transform :translateX(-10px) ; transform :translateX(-10px) } 100%{ -webkit-transform :translateX(0) ; -ms-transform :translateX(0) ; transform :translateX(0) } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft } @ -webkit-keyframes bounceInRight { 0%{ opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px) } 60%{ opacity : 1; -webkit-transform :translateX(-30px) ; transform :translateX(-30px) } 80%{ -webkit-transform :translateX(10px) ; transform :translateX(10px) } 100%{ -webkit-transform :translateX(0) ; transform :translateX(0) } } @ keyframes bounceInRight { 0%{ opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px) } 60%{ opacity : 1; -webkit-transform :translateX(-30px) ; -ms-transform :translateX(-30px) ; transform :translateX(-30px) } 80%{ -webkit-transform :translateX(10px) ; -ms-transform :translateX(10px) ; transform :translateX(10px) } 100%{ -webkit-transform :translateX(0) ; -ms-transform :translateX(0) ; transform :translateX(0) } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight } @ -webkit-keyframes bounceInUp { 0%{ opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px) } 60%{ opacity : 1; -webkit-transform :translateY(-30px) ; transform :translateY(-30px) } 80%{ -webkit-transform :translateY(10px) ; transform :translateY(10px) } 100%{ -webkit-transform :translateY(0) ; transform :translateY(0) } } @ keyframes bounceInUp { 0%{ opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px) } 60%{ opacity : 1; -webkit-transform :translateY(-30px) ; -ms-transform :translateY(-30px) ; transform :translateY(-30px) } 80%{ -webkit-transform :translateY(10px) ; -ms-transform :translateY(10px) ; transform :translateY(10px) } 100%{ -webkit-transform :translateY(0) ; -ms-transform :translateY(0) ; transform :translateY(0) } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp } @ -webkit-keyframes bounceOut { 0%{ -webkit-transform: scale(1); transform: scale(1) } 25%{ -webkit-transform :scale ( .95 ); transform :scale ( .95 ) } 50%{ opacity : 1; -webkit-transform :scale (1 .1 ); transform :scale (1 .1 ) } 100%{ opacity : 0; -webkit-transform :scale ( .3 ); transform :scale ( .3 ) } } @ keyframes bounceOut { 0%{ -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } 25%{ -webkit-transform :scale ( .95 ); -ms-transform :scale ( .95 ); transform :scale ( .95 ) } 50%{ opacity : 1; -webkit-transform :scale (1 .1 ); -ms-transform :scale (1 .1 ); transform :scale (1 .1 ) } 100%{ opacity : 0; -webkit-transform :scale ( .3 ); -ms-transform :scale ( .3 ); transform :scale ( .3 ) } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut } @ -webkit-keyframes bounceOutDown { 0%{ -webkit-transform: translateY(0); transform: translateY(0) } 20%{ opacity : 1; -webkit-transform :translateY(-20px) ; transform :translateY(-20px) } 100%{ opacity : 0; -webkit-transform :translateY(2000px) ; transform :translateY(2000px) } } @ keyframes bounceOutDown { 0%{ -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 20%{ opacity : 1; -webkit-transform :translateY(-20px) ; -ms-transform :translateY(-20px) ; transform :translateY(-20px) } 100%{ opacity : 0; -webkit-transform :translateY(2000px) ; -ms-transform :translateY(2000px) ; transform :translateY(2000px) } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown } @ -webkit-keyframes bounceOutLeft { 0%{ -webkit-transform: translateX(0); transform: translateX(0) } 20%{ opacity : 1; -webkit-transform :translateX(20px) ; transform :translateX(20px) } 100%{ opacity : 0; -webkit-transform :translateX(-2000px) ; transform :translateX(-2000px) } } @ keyframes bounceOutLeft { 0%{ -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 20%{ opacity : 1; -webkit-transform :translateX(20px) ; -ms-transform :translateX(20px) ; transform :translateX(20px) } 100%{ opacity : 0; -webkit-transform :translateX(-2000px) ; -ms-transform :translateX(-2000px) ; transform :translateX(-2000px) } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft } @ -webkit-keyframes bounceOutRight { 0%{ -webkit-transform: translateX(0); transform: translateX(0) } 20%{ opacity : 1; -webkit-transform :translateX(-20px) ; transform :translateX(-20px) } 100%{ opacity : 0; -webkit-transform :translateX(2000px) ; transform :translateX(2000px) } } @ keyframes bounceOutRight { 0%{ -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 20%{ opacity : 1; -webkit-transform :translateX(-20px) ; -ms-transform :translateX(-20px) ; transform :translateX(-20px) } 100%{ opacity : 0; -webkit-transform :translateX(2000px) ; -ms-transform :translateX(2000px) ; transform :translateX(2000px) } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight } @ -webkit-keyframes bounceOutUp { 0%{ -webkit-transform: translateY(0); transform: translateY(0) } 20%{ opacity : 1; -webkit-transform :translateY(20px) ; transform :translateY(20px) } 100%{ opacity : 0; -webkit-transform :translateY(-2000px) ; transform :translateY(-2000px) } } @ keyframes bounceOutUp { 0%{ -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 20%{ opacity : 1; -webkit-transform :translateY(20px) ; -ms-transform :translateY(20px) ; transform :translateY(20px) } 100%{ opacity : 0; -webkit-transform :translateY(-2000px) ; -ms-transform :translateY(-2000px) ; transform :translateY(-2000px) } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp } @ -webkit-keyframes fadeIn { 0%{ opacity: 0 } 100%{ opacity : 1 } } @ keyframes fadeIn { 0%{ opacity: 0 } 100%{ opacity : 1 } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn } @ -webkit-keyframes fadeInDown { 0%{ opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px) } 100%{ opacity : 1; -webkit-transform :translateY(0) ; transform :translateY(0) } } @ keyframes fadeInDown { 0%{ opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px) } 100%{ opacity : 1; -webkit-transform :translateY(0) ; -ms-transform :translateY(0) ; transform :translateY(0) } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown } @ -webkit-keyframes fadeInDownBig { 0%{ opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px) } 100%{ opacity : 1; -webkit-transform :translateY(0) ; transform :translateY(0) } } @ keyframes fadeInDownBig { 0%{ opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px) } 100%{ opacity : 1; -webkit-transform :translateY(0) ; -ms-transform :translateY(0) ; transform :translateY(0) } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig } @ -webkit-keyframes fadeInLeft { 0%{ opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px) } 100%{ opacity : 1; -webkit-transform :translateX(0) ; transform :translateX(0) } } @ keyframes fadeInLeft { 0%{ opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px) } 100%{ opacity : 1; -webkit-transform :translateX(0) ; -ms-transform :translateX(0) ; transform :translateX(0) } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft } @ -webkit-keyframes fadeInLeftBig { 0%{ opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px) } 100%{ opacity : 1; -webkit-transform :translateX(0) ; transform :translateX(0) } } @ keyframes fadeInLeftBig { 0%{ opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px) } 100%{ opacity : 1; -webkit-transform :translateX(0) ; -ms-transform :translateX(0) ; transform :translateX(0) } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig } @ -webkit-keyframes fadeInRight { 0%{ opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px) } 100%{ opacity : 1; -webkit-transform :translateX(0) ; transform :translateX(0) } } @ keyframes fadeInRight { 0%{ opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px) } 100%{ opacity : 1; -webkit-transform :translateX(0) ; -ms-transform :translateX(0) ; transform :translateX(0) } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight } @ -webkit-keyframes fadeInRightBig { 0%{ opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px) } 100%{ opacity : 1; -webkit-transform :translateX(0) ; transform :translateX(0) } } @ keyframes fadeInRightBig { 0%{ opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px) } 100%{ opacity : 1; -webkit-transform :translateX(0) ; -ms-transform :translateX(0) ; transform :translateX(0) } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig } @ -webkit-keyframes fadeInUp { 0%{ opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px) } 100%{ opacity : 1; -webkit-transform :translateY(0) ; transform :translateY(0) } } @ keyframes fadeInUp { 0%{ opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px) } 100%{ opacity : 1; -webkit-transform :translateY(0) ; -ms-transform :translateY(0) ; transform :translateY(0) } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp } @ -webkit-keyframes fadeInUpBig { 0%{ opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px) } 100%{ opacity : 1; -webkit-transform :translateY(0) ; transform :translateY(0) } } @ keyframes fadeInUpBig { 0%{ opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px) } 100%{ opacity : 1; -webkit-transform :translateY(0) ; -ms-transform :translateY(0) ; transform :translateY(0) } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig } @ -webkit-keyframes fadeOut { 0%{ opacity: 1 } 100%{ opacity : 0 } } @ keyframes fadeOut { 0%{ opacity: 1 } 100%{ opacity : 0 } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut } @ -webkit-keyframes fadeOutDown { 0%{ opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } 100%{ opacity : 0; -webkit-transform :translateY(20px) ; transform :translateY(20px) } } @ keyframes fadeOutDown { 0%{ opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 100%{ opacity : 0; -webkit-transform :translateY(20px) ; -ms-transform :translateY(20px) ; transform :translateY(20px) } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown } @ -webkit-keyframes fadeOutDownBig { 0%{ opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } 100%{ opacity : 0; -webkit-transform :translateY(2000px) ; transform :translateY(2000px) } } @ keyframes fadeOutDownBig { 0%{ opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 100%{ opacity : 0; -webkit-transform :translateY(2000px) ; -ms-transform :translateY(2000px) ; transform :translateY(2000px) } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig } @ -webkit-keyframes fadeOutLeft { 0%{ opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } 100%{ opacity : 0; -webkit-transform :translateX(-20px) ; transform :translateX(-20px) } } @ keyframes fadeOutLeft { 0%{ opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 100%{ opacity : 0; -webkit-transform :translateX(-20px) ; -ms-transform :translateX(-20px) ; transform :translateX(-20px) } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft } @ -webkit-keyframes fadeOutLeftBig { 0%{ opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } 100%{ opacity : 0; -webkit-transform :translateX(-2000px) ; transform :translateX(-2000px) } } @ keyframes fadeOutLeftBig { 0%{ opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 100%{ opacity : 0; -webkit-transform :translateX(-2000px) ; -ms-transform :translateX(-2000px) ; transform :translateX(-2000px) } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig } @ -webkit-keyframes fadeOutRight { 0%{ opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } 100%{ opacity : 0; -webkit-transform :translateX(20px) ; transform :translateX(20px) } } @ keyframes fadeOutRight { 0%{ opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 100%{ opacity : 0; -webkit-transform :translateX(20px) ; -ms-transform :translateX(20px) ; transform :translateX(20px) } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight } @ -webkit-keyframes fadeOutRightBig { 0%{ opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } 100%{ opacity : 0; -webkit-transform :translateX(2000px) ; transform :translateX(2000px) } } @ keyframes fadeOutRightBig { 0%{ opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 100%{ opacity : 0; -webkit-transform :translateX(2000px) ; -ms-transform :translateX(2000px) ; transform :translateX(2000px) } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig } @ -webkit-keyframes fadeOutUp { 0%{ opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } 100%{ opacity : 0; -webkit-transform :translateY(-20px) ; transform :translateY(-20px) } } @ keyframes fadeOutUp { 0%{ opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 100%{ opacity : 0; -webkit-transform :translateY(-20px) ; -ms-transform :translateY(-20px) ; transform :translateY(-20px) } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp } @ -webkit-keyframes fadeOutUpBig { 0%{ opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } 100%{ opacity : 0; -webkit-transform :translateY(-2000px) ; transform :translateY(-2000px) } } @ keyframes fadeOutUpBig { 0%{ opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 100%{ opacity : 0; -webkit-transform :translateY(-2000px) ; -ms-transform :translateY(-2000px) ; transform :translateY(-2000px) } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig } @ -webkit-keyframes flip { 0%{ -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1) } 0%,40%{ -webkit-animation-timing-function :ease-out ; animation-timing-function :ease-out } 40%{ -webkit-transform :perspective(400px) translateZ (150px)rotateY(170deg)scale(1);transform :perspective(400px) translateZ (150px)rotateY(170deg)scale(1) } 50%{ -webkit-transform :perspective(400px) translateZ (150px)rotateY(190deg)scale(1);transform :perspective(400px) translateZ (150px)rotateY(190deg)scale(1);-webkit-animation-timing-function :ease-in ; animation-timing-function :ease-in } 80%{ -webkit-transform :perspective(400px) translateZ (0)rotateY(360deg)scale( .95 ); transform :perspective(400px) translateZ (0)rotateY(360deg)scale( .95 ) } 80%,100%{ -webkit-animation-timing-function :ease-in ; animation-timing-function :ease-in } 100%{ -webkit-transform :perspective(400px) translateZ (0)rotateY(360deg)scale(1);transform :perspective(400px) translateZ (0)rotateY(360deg)scale(1) } } @ keyframes flip { 0%{ -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1) } 0%,40%{ -webkit-animation-timing-function :ease-out ; animation-timing-function :ease-out } 40%{ -webkit-transform :perspective(400px) translateZ (150px)rotateY(170deg)scale(1);-ms-transform :perspective(400px) translateZ (150px)rotateY(170deg)scale(1);transform :perspective(400px) translateZ (150px)rotateY(170deg)scale(1) } 50%{ -webkit-transform :perspective(400px) translateZ (150px)rotateY(190deg)scale(1);-ms-transform :perspective(400px) translateZ (150px)rotateY(190deg)scale(1);transform :perspective(400px) translateZ (150px)rotateY(190deg)scale(1);-webkit-animation-timing-function :ease-in ; animation-timing-function :ease-in } 80%{ -webkit-transform :perspective(400px) translateZ (0)rotateY(360deg)scale( .95 ); -ms-transform :perspective(400px) translateZ (0)rotateY(360deg)scale( .95 ); transform :perspective(400px) translateZ (0)rotateY(360deg)scale( .95 ) } 80%,100%{ -webkit-animation-timing-function :ease-in ; animation-timing-function :ease-in } 100%{ -webkit-transform :perspective(400px) translateZ (0)rotateY(360deg)scale(1);-ms-transform :perspective(400px) translateZ (0)rotateY(360deg)scale(1);transform :perspective(400px) translateZ (0)rotateY(360deg)scale(1) } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip } @ -webkit-keyframes flipInX { 0%{ -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } 40%{ -webkit-transform :perspective(400px) rotateX (-10deg);transform :perspective(400px) rotateX (-10deg) } 70%{ -webkit-transform :perspective(400px) rotateX (10deg);transform :perspective(400px) rotateX (10deg) } 100%{ -webkit-transform :perspective(400px) rotateX (0);transform :perspective(400px) rotateX (0);opacity : 1 } } @ keyframes flipInX { 0%{ -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } 40%{ -webkit-transform :perspective(400px) rotateX (-10deg);-ms-transform :perspective(400px) rotateX (-10deg);transform :perspective(400px) rotateX (-10deg) } 70%{ -webkit-transform :perspective(400px) rotateX (10deg);-ms-transform :perspective(400px) rotateX (10deg);transform :perspective(400px) rotateX (10deg) } 100%{ -webkit-transform :perspective(400px) rotateX (0);-ms-transform :perspective(400px) rotateX (0);transform :perspective(400px) rotateX (0);opacity : 1 } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX } @ -webkit-keyframes flipInY { 0%{ -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } 40%{ -webkit-transform :perspective(400px) rotateY (-10deg);transform :perspective(400px) rotateY (-10deg) } 70%{ -webkit-transform :perspective(400px) rotateY (10deg);transform :perspective(400px) rotateY (10deg) } 100%{ -webkit-transform :perspective(400px) rotateY (0);transform :perspective(400px) rotateY (0);opacity : 1 } } @ keyframes flipInY { 0%{ -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } 40%{ -webkit-transform :perspective(400px) rotateY (-10deg);-ms-transform :perspective(400px) rotateY (-10deg);transform :perspective(400px) rotateY (-10deg) } 70%{ -webkit-transform :perspective(400px) rotateY (10deg);-ms-transform :perspective(400px) rotateY (10deg);transform :perspective(400px) rotateY (10deg) } 100%{ -webkit-transform :perspective(400px) rotateY (0);-ms-transform :perspective(400px) rotateY (0);transform :perspective(400px) rotateY (0);opacity : 1 } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY } @ -webkit-keyframes flipOutX { 0%{ -webkit-transform: perspective(400px) rotateX(0); transform: perspective(400px) rotateX(0); opacity: 1 } 100%{ -webkit-transform :perspective(400px) rotateX (90deg);transform :perspective(400px) rotateX (90deg);opacity : 0 } } @ keyframes flipOutX { 0%{ -webkit-transform: perspective(400px) rotateX(0); -ms-transform: perspective(400px) rotateX(0); transform: perspective(400px) rotateX(0); opacity: 1 } 100%{ -webkit-transform :perspective(400px) rotateX (90deg);-ms-transform :perspective(400px) rotateX (90deg);transform :perspective(400px) rotateX (90deg);opacity : 0 } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important } @ -webkit-keyframes flipOutY { 0%{ -webkit-transform: perspective(400px) rotateY(0); transform: perspective(400px) rotateY(0); opacity: 1 } 100%{ -webkit-transform :perspective(400px) rotateY (90deg);transform :perspective(400px) rotateY (90deg);opacity : 0 } } @ keyframes flipOutY { 0%{ -webkit-transform: perspective(400px) rotateY(0); -ms-transform: perspective(400px) rotateY(0); transform: perspective(400px) rotateY(0); opacity: 1 } 100%{ -webkit-transform :perspective(400px) rotateY (90deg);-ms-transform :perspective(400px) rotateY (90deg);transform :perspective(400px) rotateY (90deg);opacity : 0 } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY } @ -webkit-keyframes lightSpeedIn { 0%{ -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0 } 60%{ -webkit-transform :translateX (-20%) skewX (30deg);transform :translateX (-20%) skewX (30deg);opacity : 1 } 80%{ -webkit-transform :translateX (0%) skewX (-15deg);transform :translateX (0%) skewX (-15deg);opacity : 1 } 100%{ -webkit-transform :translateX (0%) skewX (0);transform :translateX (0%) skewX (0);opacity : 1 } } @ keyframes lightSpeedIn { 0%{ -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0 } 60%{ -webkit-transform :translateX (-20%) skewX (30deg);-ms-transform :translateX (-20%) skewX (30deg);transform :translateX (-20%) skewX (30deg);opacity : 1 } 80%{ -webkit-transform :translateX (0%) skewX (-15deg);-ms-transform :translateX (0%) skewX (-15deg);transform :translateX (0%) skewX (-15deg);opacity : 1 } 100%{ -webkit-transform :translateX (0%) skewX (0);-ms-transform :translateX (0%) skewX (0);transform :translateX (0%) skewX (0);opacity : 1 } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } @ -webkit-keyframes lightSpeedOut { 0%{ -webkit-transform: translateX(0%) skewX(0); transform: translateX(0%) skewX(0); opacity: 1 } 100%{ -webkit-transform :translateX (100%) skewX (-30deg);transform :translateX (100%) skewX (-30deg);opacity : 0 } } @ keyframes lightSpeedOut { 0%{ -webkit-transform: translateX(0%) skewX(0); -ms-transform: translateX(0%) skewX(0); transform: translateX(0%) skewX(0); opacity: 1 } 100%{ -webkit-transform :translateX (100%) skewX (-30deg);-ms-transform :translateX (100%) skewX (-30deg);transform :translateX (100%) skewX (-30deg);opacity : 0 } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } @ -webkit-keyframes rotateIn { 0%{ -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0 } 0%,100%{ -webkit-transform-origin :center center ; transform-origin :center center } 100%{ -webkit-transform :rotate(0) ; transform :rotate(0) ; opacity : 1 } } @ keyframes rotateIn { 0%{ -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0 } 0%,100%{ -webkit-transform-origin :center center ; -ms-transform-origin :center center ; transform-origin :center center } 100%{ -webkit-transform :rotate(0) ; -ms-transform :rotate(0) ; transform :rotate(0) ; opacity : 1 } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn } @ -webkit-keyframes rotateInDownLeft { 0%{ -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } 0%,100%{ -webkit-transform-origin :left bottom ; transform-origin :left bottom } 100%{ -webkit-transform :rotate(0) ; transform :rotate(0) ; opacity : 1 } } @ keyframes rotateInDownLeft { 0%{ -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } 0%,100%{ -webkit-transform-origin :left bottom ; -ms-transform-origin :left bottom ; transform-origin :left bottom } 100%{ -webkit-transform :rotate(0) ; -ms-transform :rotate(0) ; transform :rotate(0) ; opacity : 1 } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft } @ -webkit-keyframes rotateInDownRight { 0%{ -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } 0%,100%{ -webkit-transform-origin :right bottom ; transform-origin :right bottom } 100%{ -webkit-transform :rotate(0) ; transform :rotate(0) ; opacity : 1 } } @ keyframes rotateInDownRight { 0%{ -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } 0%,100%{ -webkit-transform-origin :right bottom ; -ms-transform-origin :right bottom ; transform-origin :right bottom } 100%{ -webkit-transform :rotate(0) ; -ms-transform :rotate(0) ; transform :rotate(0) ; opacity : 1 } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight } @ -webkit-keyframes rotateInUpLeft { 0%{ -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } 0%,100%{ -webkit-transform-origin :left bottom ; transform-origin :left bottom } 100%{ -webkit-transform :rotate(0) ; transform :rotate(0) ; opacity : 1 } } @ keyframes rotateInUpLeft { 0%{ -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } 0%,100%{ -webkit-transform-origin :left bottom ; -ms-transform-origin :left bottom ; transform-origin :left bottom } 100%{ -webkit-transform :rotate(0) ; -ms-transform :rotate(0) ; transform :rotate(0) ; opacity : 1 } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft } @ -webkit-keyframes rotateInUpRight { 0%{ -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } 0%,100%{ -webkit-transform-origin :right bottom ; transform-origin :right bottom } 100%{ -webkit-transform :rotate(0) ; transform :rotate(0) ; opacity : 1 } } @ keyframes rotateInUpRight { 0%{ -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } 0%,100%{ -webkit-transform-origin :right bottom ; -ms-transform-origin :right bottom ; transform-origin :right bottom } 100%{ -webkit-transform :rotate(0) ; -ms-transform :rotate(0) ; transform :rotate(0) ; opacity : 1 } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight } @ -webkit-keyframes rotateOut { 0%{ -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } 0%,100%{ -webkit-transform-origin :center center ; transform-origin :center center } 100%{ -webkit-transform :rotate(200deg) ; transform :rotate(200deg) ; opacity : 0 } } @ keyframes rotateOut { 0%{ -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } 0%,100%{ -webkit-transform-origin :center center ; -ms-transform-origin :center center ; transform-origin :center center } 100%{ -webkit-transform :rotate(200deg) ; -ms-transform :rotate(200deg) ; transform :rotate(200deg) ; opacity : 0 } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut } @ -webkit-keyframes rotateOutDownLeft { 0%{ -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } 0%,100%{ -webkit-transform-origin :left bottom ; transform-origin :left bottom } 100%{ -webkit-transform :rotate(90deg) ; transform :rotate(90deg) ; opacity : 0 } } @ keyframes rotateOutDownLeft { 0%{ -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } 0%,100%{ -webkit-transform-origin :left bottom ; -ms-transform-origin :left bottom ; transform-origin :left bottom } 100%{ -webkit-transform :rotate(90deg) ; -ms-transform :rotate(90deg) ; transform :rotate(90deg) ; opacity : 0 } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft } @ -webkit-keyframes rotateOutDownRight { 0%{ -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } 0%,100%{ -webkit-transform-origin :right bottom ; transform-origin :right bottom } 100%{ -webkit-transform :rotate(-90deg) ; transform :rotate(-90deg) ; opacity : 0 } } @ keyframes rotateOutDownRight { 0%{ -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } 0%,100%{ -webkit-transform-origin :right bottom ; -ms-transform-origin :right bottom ; transform-origin :right bottom } 100%{ -webkit-transform :rotate(-90deg) ; -ms-transform :rotate(-90deg) ; transform :rotate(-90deg) ; opacity : 0 } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight } @ -webkit-keyframes rotateOutUpLeft { 0%{ -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } 0%,100%{ -webkit-transform-origin :left bottom ; transform-origin :left bottom } 100%{ -webkit-transform :rotate(-90deg) ; transform :rotate(-90deg) ; opacity : 0 } } @ keyframes rotateOutUpLeft { 0%{ -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } 0%,100%{ -webkit-transform-origin :left bottom ; -ms-transform-origin :left bottom ; transform-origin :left bottom } 100%{ -webkit-transform :rotate(-90deg) ; -ms-transform :rotate(-90deg) ; transform :rotate(-90deg) ; opacity : 0 } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft } @ -webkit-keyframes rotateOutUpRight { 0%{ -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } 0%,100%{ -webkit-transform-origin :right bottom ; transform-origin :right bottom } 100%{ -webkit-transform :rotate(90deg) ; transform :rotate(90deg) ; opacity : 0 } } @ keyframes rotateOutUpRight { 0%{ -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } 0%,100%{ -webkit-transform-origin :right bottom ; -ms-transform-origin :right bottom ; transform-origin :right bottom } 100%{ -webkit-transform :rotate(90deg) ; -ms-transform :rotate(90deg) ; transform :rotate(90deg) ; opacity : 0 } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight } @ -webkit-keyframes slideInDown { 0%{ opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px) } 100%{ -webkit-transform :translateY(0) ; transform :translateY(0) } } @ keyframes slideInDown { 0%{ opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px) } 100%{ -webkit-transform :translateY(0) ; -ms-transform :translateY(0) ; transform :translateY(0) } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown } @ -webkit-keyframes slideInLeft { 0%{ opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px) } 100%{ -webkit-transform :translateX(0) ; transform :translateX(0) } } @ keyframes slideInLeft { 0%{ opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px) } 100%{ -webkit-transform :translateX(0) ; -ms-transform :translateX(0) ; transform :translateX(0) } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft } @ -webkit-keyframes slideInRight { 0%{ opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px) } 100%{ -webkit-transform :translateX(0) ; transform :translateX(0) } } @ keyframes slideInRight { 0%{ opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px) } 100%{ -webkit-transform :translateX(0) ; -ms-transform :translateX(0) ; transform :translateX(0) } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight } @ -webkit-keyframes slideOutLeft { 0%{ -webkit-transform: translateX(0); transform: translateX(0) } 100%{ opacity : 0; -webkit-transform :translateX(-2000px) ; transform :translateX(-2000px) } } @ keyframes slideOutLeft { 0%{ -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 100%{ opacity : 0; -webkit-transform :translateX(-2000px) ; -ms-transform :translateX(-2000px) ; transform :translateX(-2000px) } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft } @ -webkit-keyframes slideOutRight { 0%{ -webkit-transform: translateX(0); transform: translateX(0) } 100%{ opacity : 0; -webkit-transform :translateX(2000px) ; transform :translateX(2000px) } } @ keyframes slideOutRight { 0%{ -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 100%{ opacity : 0; -webkit-transform :translateX(2000px) ; -ms-transform :translateX(2000px) ; transform :translateX(2000px) } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight } @ -webkit-keyframes slideOutUp { 0%{ -webkit-transform: translateY(0); transform: translateY(0) } 100%{ opacity : 0; -webkit-transform :translateY(-2000px) ; transform :translateY(-2000px) } } @ keyframes slideOutUp { 0%{ -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 100%{ opacity : 0; -webkit-transform :translateY(-2000px) ; -ms-transform :translateY(-2000px) ; transform :translateY(-2000px) } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp } @ -webkit-keyframes hinge { 0%{ -webkit-transform: rotate(0); transform: rotate(0) } 0%,20%,60%{ -webkit-transform-origin :top left ; transform-origin :top left ; -webkit-animation-timing-function :ease-in-out ; animation-timing-function :ease-in-out } 20%,60%{ -webkit-transform :rotate(80deg) ; transform :rotate(80deg) } 40%{ -webkit-transform :rotate(60deg) ; transform :rotate(60deg) } 40%,80%{ -webkit-transform-origin :top left ; transform-origin :top left ; -webkit-animation-timing-function :ease-in-out ; animation-timing-function :ease-in-out } 80%{ -webkit-transform :rotate(60deg) translateY (0);transform :rotate(60deg) translateY (0);opacity : 1 } 100%{ -webkit-transform :translateY(700px) ; transform :translateY(700px) ; opacity : 0 } } @ keyframes hinge { 0%{ -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0) } 0%,20%,60%{ -webkit-transform-origin :top left ; -ms-transform-origin :top left ; transform-origin :top left ; -webkit-animation-timing-function :ease-in-out ; animation-timing-function :ease-in-out } 20%,60%{ -webkit-transform :rotate(80deg) ; -ms-transform :rotate(80deg) ; transform :rotate(80deg) } 40%{ -webkit-transform :rotate(60deg) ; -ms-transform :rotate(60deg) ; transform :rotate(60deg) } 40%,80%{ -webkit-transform-origin :top left ; -ms-transform-origin :top left ; transform-origin :top left ; -webkit-animation-timing-function :ease-in-out ; animation-timing-function :ease-in-out } 80%{ -webkit-transform :rotate(60deg) translateY (0);-ms-transform :rotate(60deg) translateY (0);transform :rotate(60deg) translateY (0);opacity : 1 } 100%{ -webkit-transform :translateY(700px) ; -ms-transform :translateY(700px) ; transform :translateY(700px) ; opacity : 0 } } .hinge { -webkit-animation-name: hinge; animation-name: hinge } @ -webkit-keyframes rollIn { 0%{ opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg) } 100%{ opacity : 1; -webkit-transform :translateX(0) rotate (0);transform :translateX(0) rotate (0) } } @ keyframes rollIn { 0%{ opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg) } 100%{ opacity : 1; -webkit-transform :translateX(0) rotate (0);-ms-transform :translateX(0) rotate (0);transform :translateX(0) rotate (0) } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn } @ -webkit-keyframes rollOut { 0%{ opacity: 1; -webkit-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } 100%{ opacity : 0; -webkit-transform :translateX (100%) rotate (120deg);transform :translateX (100%) rotate (120deg) } } @ keyframes rollOut { 0%{ opacity: 1; -webkit-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } 100%{ opacity : 0; -webkit-transform :translateX (100%) rotate (120deg);-ms-transform :translateX (100%) rotate (120deg);transform :translateX (100%) rotate (120deg) } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut } /*! * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.3.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0) } .fa-lg { font-size: 1.33333333em; line-height: .75em; vertical-align: -15% } .fa-2x { font-size: 2em } .fa-3x { font-size: 3em } .fa-4x { font-size: 4em } .fa-5x { font-size: 5em } .fa-fw { width: 1.28571429em; text-align: center } .fa-ul { padding-left: 0; margin-left: 2.14285714em; list-style-type: none } .fa-ul>li { position: relative } .fa-li { position: absolute; left: -2.14285714em; width: 2.14285714em; top: .14285714em; text-align: center } .fa-li.fa-lg { left: -1.85714286em } .fa-border { padding: .2em .25em .15em; border: solid .08em #eee; border-radius: .1em } .pull-right { float: right } .pull-left { float: left } .fa.pull-left { margin-right: .3em } .fa.pull-right { margin-left: .3em } .fa-spin { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear } .fa-pulse { -webkit-animation: fa-spin 1s infinite steps(8); animation: fa-spin 1s infinite steps(8) } @ -webkit-keyframes fa-spin { 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100%{ -webkit-transform :rotate(359deg) ; transform :rotate(359deg) } } @ keyframes fa-spin { 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100%{ -webkit-transform :rotate(359deg) ; transform :rotate(359deg) } } .fa-rotate-90 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg) } .fa-rotate-180 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg) } .fa-rotate-270 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg) } .fa-flip-horizontal { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1) } .fa-flip-vertical { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); -webkit-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1) } :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical { filter: none } .fa-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle } .fa-stack-1x, .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center } .fa-stack-1x { line-height: inherit } .fa-stack-2x { font-size: 2em } .fa-inverse { color: #fff } .fa-glass:before { content: "\f000" } .fa-music:before { content: "\f001" } .fa-search:before { content: "\f002" } .fa-envelope-o:before { content: "\f003" } .fa-heart:before { content: "\f004" } .fa-star:before { content: "\f005" } .fa-star-o:before { content: "\f006" } .fa-user:before { content: "\f007" } .fa-film:before { content: "\f008" } .fa-th-large:before { content: "\f009" } .fa-th:before { content: "\f00a" } .fa-th-list:before { content: "\f00b" } .fa-check:before { content: "\f00c" } .fa-remove:before, .fa-close:before, .fa-times:before { content: "\f00d" } .fa-search-plus:before { content: "\f00e" } .fa-search-minus:before { content: "\f010" } .fa-power-off:before { content: "\f011" } .fa-signal:before { content: "\f012" } .fa-gear:before, .fa-cog:before { content: "\f013" } .fa-trash-o:before { content: "\f014" } .fa-home:before { content: "\f015" } .fa-file-o:before { content: "\f016" } .fa-clock-o:before { content: "\f017" } .fa-road:before { content: "\f018" } .fa-download:before { content: "\f019" } .fa-arrow-circle-o-down:before { content: "\f01a" } .fa-arrow-circle-o-up:before { content: "\f01b" } .fa-inbox:before { content: "\f01c" } .fa-play-circle-o:before { content: "\f01d" } .fa-rotate-right:before, .fa-repeat:before { content: "\f01e" } .fa-refresh:before { content: "\f021" } .fa-list-alt:before { content: "\f022" } .fa-lock:before { content: "\f023" } .fa-flag:before { content: "\f024" } .fa-headphones:before { content: "\f025" } .fa-volume-off:before { content: "\f026" } .fa-volume-down:before { content: "\f027" } .fa-volume-up:before { content: "\f028" } .fa-qrcode:before { content: "\f029" } .fa-barcode:before { content: "\f02a" } .fa-tag:before { content: "\f02b" } .fa-tags:before { content: "\f02c" } .fa-book:before { content: "\f02d" } .fa-bookmark:before { content: "\f02e" } .fa-print:before { content: "\f02f" } .fa-camera:before { content: "\f030" } .fa-font:before { content: "\f031" } .fa-bold:before { content: "\f032" } .fa-italic:before { content: "\f033" } .fa-text-height:before { content: "\f034" } .fa-text-width:before { content: "\f035" } .fa-align-left:before { content: "\f036" } .fa-align-center:before { content: "\f037" } .fa-align-right:before { content: "\f038" } .fa-align-justify:before { content: "\f039" } .fa-list:before { content: "\f03a" } .fa-dedent:before, .fa-outdent:before { content: "\f03b" } .fa-indent:before { content: "\f03c" } .fa-video-camera:before { content: "\f03d" } .fa-photo:before, .fa-image:before, .fa-picture-o:before { content: "\f03e" } .fa-pencil:before { content: "\f040" } .fa-map-marker:before { content: "\f041" } .fa-adjust:before { content: "\f042" } .fa-tint:before { content: "\f043" } .fa-edit:before, .fa-pencil-square-o:before { content: "\f044" } .fa-share-square-o:before { content: "\f045" } .fa-check-square-o:before { content: "\f046" } .fa-arrows:before { content: "\f047" } .fa-step-backward:before { content: "\f048" } .fa-fast-backward:before { content: "\f049" } .fa-backward:before { content: "\f04a" } .fa-play:before { content: "\f04b" } .fa-pause:before { content: "\f04c" } .fa-stop:before { content: "\f04d" } .fa-forward:before { content: "\f04e" } .fa-fast-forward:before { content: "\f050" } .fa-step-forward:before { content: "\f051" } .fa-eject:before { content: "\f052" } .fa-chevron-left:before { content: "\f053" } .fa-chevron-right:before { content: "\f054" } .fa-plus-circle:before { content: "\f055" } .fa-minus-circle:before { content: "\f056" } .fa-times-circle:before { content: "\f057" } .fa-check-circle:before { content: "\f058" } .fa-question-circle:before { content: "\f059" } .fa-info-circle:before { content: "\f05a" } .fa-crosshairs:before { content: "\f05b" } .fa-times-circle-o:before { content: "\f05c" } .fa-check-circle-o:before { content: "\f05d" } .fa-ban:before { content: "\f05e" } .fa-arrow-left:before { content: "\f060" } .fa-arrow-right:before { content: "\f061" } .fa-arrow-up:before { content: "\f062" } .fa-arrow-down:before { content: "\f063" } .fa-mail-forward:before, .fa-share:before { content: "\f064" } .fa-expand:before { content: "\f065" } .fa-compress:before { content: "\f066" } .fa-plus:before { content: "\f067" } .fa-minus:before { content: "\f068" } .fa-asterisk:before { content: "\f069" } .fa-exclamation-circle:before { content: "\f06a" } .fa-gift:before { content: "\f06b" } .fa-leaf:before { content: "\f06c" } .fa-fire:before { content: "\f06d" } .fa-eye:before { content: "\f06e" } .fa-eye-slash:before { content: "\f070" } .fa-warning:before, .fa-exclamation-triangle:before { content: "\f071" } .fa-plane:before { content: "\f072" } .fa-calendar:before { content: "\f073" } .fa-random:before { content: "\f074" } .fa-comment:before { content: "\f075" } .fa-magnet:before { content: "\f076" } .fa-chevron-up:before { content: "\f077" } .fa-chevron-down:before { content: "\f078" } .fa-retweet:before { content: "\f079" } .fa-shopping-cart:before { content: "\f07a" } .fa-folder:before { content: "\f07b" } .fa-folder-open:before { content: "\f07c" } .fa-arrows-v:before { content: "\f07d" } .fa-arrows-h:before { content: "\f07e" } .fa-bar-chart-o:before, .fa-bar-chart:before { content: "\f080" } .fa-twitter-square:before { content: "\f081" } .fa-facebook-square:before { content: "\f082" } .fa-camera-retro:before { content: "\f083" } .fa-key:before { content: "\f084" } .fa-gears:before, .fa-cogs:before { content: "\f085" } .fa-comments:before { content: "\f086" } .fa-thumbs-o-up:before { content: "\f087" } .fa-thumbs-o-down:before { content: "\f088" } .fa-star-half:before { content: "\f089" } .fa-heart-o:before { content: "\f08a" } .fa-sign-out:before { content: "\f08b" } .fa-linkedin-square:before { content: "\f08c" } .fa-thumb-tack:before { content: "\f08d" } .fa-external-link:before { content: "\f08e" } .fa-sign-in:before { content: "\f090" } .fa-trophy:before { content: "\f091" } .fa-github-square:before { content: "\f092" } .fa-upload:before { content: "\f093" } .fa-lemon-o:before { content: "\f094" } .fa-phone:before { content: "\f095" } .fa-square-o:before { content: "\f096" } .fa-bookmark-o:before { content: "\f097" } .fa-phone-square:before { content: "\f098" } .fa-twitter:before { content: "\f099" } .fa-facebook-f:before, .fa-facebook:before { content: "\f09a" } .fa-github:before { content: "\f09b" } .fa-unlock:before { content: "\f09c" } .fa-credit-card:before { content: "\f09d" } .fa-rss:before { content: "\f09e" } .fa-hdd-o:before { content: "\f0a0" } .fa-bullhorn:before { content: "\f0a1" } .fa-bell:before { content: "\f0f3" } .fa-certificate:before { content: "\f0a3" } .fa-hand-o-right:before { content: "\f0a4" } .fa-hand-o-left:before { content: "\f0a5" } .fa-hand-o-up:before { content: "\f0a6" } .fa-hand-o-down:before { content: "\f0a7" } .fa-arrow-circle-left:before { content: "\f0a8" } .fa-arrow-circle-right:before { content: "\f0a9" } .fa-arrow-circle-up:before { content: "\f0aa" } .fa-arrow-circle-down:before { content: "\f0ab" } .fa-globe:before { content: "\f0ac" } .fa-wrench:before { content: "\f0ad" } .fa-tasks:before { content: "\f0ae" } .fa-filter:before { content: "\f0b0" } .fa-briefcase:before { content: "\f0b1" } .fa-arrows-alt:before { content: "\f0b2" } .fa-group:before, .fa-users:before { content: "\f0c0" } .fa-chain:before, .fa-link:before { content: "\f0c1" } .fa-cloud:before { content: "\f0c2" } .fa-flask:before { content: "\f0c3" } .fa-cut:before, .fa-scissors:before { content: "\f0c4" } .fa-copy:before, .fa-files-o:before { content: "\f0c5" } .fa-paperclip:before { content: "\f0c6" } .fa-save:before, .fa-floppy-o:before { content: "\f0c7" } .fa-square:before { content: "\f0c8" } .fa-navicon:before, .fa-reorder:before, .fa-bars:before { content: "\f0c9" } .fa-list-ul:before { content: "\f0ca" } .fa-list-ol:before { content: "\f0cb" } .fa-strikethrough:before { content: "\f0cc" } .fa-underline:before { content: "\f0cd" } .fa-table:before { content: "\f0ce" } .fa-magic:before { content: "\f0d0" } .fa-truck:before { content: "\f0d1" } .fa-pinterest:before { content: "\f0d2" } .fa-pinterest-square:before { content: "\f0d3" } .fa-google-plus-square:before { content: "\f0d4" } .fa-google-plus:before { content: "\f0d5" } .fa-money:before { content: "\f0d6" } .fa-caret-down:before { content: "\f0d7" } .fa-caret-up:before { content: "\f0d8" } .fa-caret-left:before { content: "\f0d9" } .fa-caret-right:before { content: "\f0da" } .fa-columns:before { content: "\f0db" } .fa-unsorted:before, .fa-sort:before { content: "\f0dc" } .fa-sort-down:before, .fa-sort-desc:before { content: "\f0dd" } .fa-sort-up:before, .fa-sort-asc:before { content: "\f0de" } .fa-envelope:before { content: "\f0e0" } .fa-linkedin:before { content: "\f0e1" } .fa-rotate-left:before, .fa-undo:before { content: "\f0e2" } .fa-legal:before, .fa-gavel:before { content: "\f0e3" } .fa-dashboard:before, .fa-tachometer:before { content: "\f0e4" } .fa-comment-o:before { content: "\f0e5" } .fa-comments-o:before { content: "\f0e6" } .fa-flash:before, .fa-bolt:before { content: "\f0e7" } .fa-sitemap:before { content: "\f0e8" } .fa-umbrella:before { content: "\f0e9" } .fa-paste:before, .fa-clipboard:before { content: "\f0ea" } .fa-lightbulb-o:before { content: "\f0eb" } .fa-exchange:before { content: "\f0ec" } .fa-cloud-download:before { content: "\f0ed" } .fa-cloud-upload:before { content: "\f0ee" } .fa-user-md:before { content: "\f0f0" } .fa-stethoscope:before { content: "\f0f1" } .fa-suitcase:before { content: "\f0f2" } .fa-bell-o:before { content: "\f0a2" } .fa-coffee:before { content: "\f0f4" } .fa-cutlery:before { content: "\f0f5" } .fa-file-text-o:before { content: "\f0f6" } .fa-building-o:before { content: "\f0f7" } .fa-hospital-o:before { content: "\f0f8" } .fa-ambulance:before { content: "\f0f9" } .fa-medkit:before { content: "\f0fa" } .fa-fighter-jet:before { content: "\f0fb" } .fa-beer:before { content: "\f0fc" } .fa-h-square:before { content: "\f0fd" } .fa-plus-square:before { content: "\f0fe" } .fa-angle-double-left:before { content: "\f100" } .fa-angle-double-right:before { content: "\f101" } .fa-angle-double-up:before { content: "\f102" } .fa-angle-double-down:before { content: "\f103" } .fa-angle-left:before { content: "\f104" } .fa-angle-right:before { content: "\f105" } .fa-angle-up:before { content: "\f106" } .fa-angle-down:before { content: "\f107" } .fa-desktop:before { content: "\f108" } .fa-laptop:before { content: "\f109" } .fa-tablet:before { content: "\f10a" } .fa-mobile-phone:before, .fa-mobile:before { content: "\f10b" margin-left: 64px; margin-left:64px; } .fa-circle-o:before { content: "\f10c" } .fa-quote-left:before { content: "\f10d" } .fa-quote-right:before { content: "\f10e" } .fa-spinner:before { content: "\f110" } .fa-circle:before { content: "\f111" } .fa-mail-reply:before, .fa-reply:before { content: "\f112" } .fa-github-alt:before { content: "\f113" } .fa-folder-o:before { content: "\f114" } .fa-folder-open-o:before { content: "\f115" } .fa-smile-o:before { content: "\f118" } .fa-frown-o:before { content: "\f119" } .fa-meh-o:before { content: "\f11a" } .fa-gamepad:before { content: "\f11b" } .fa-keyboard-o:before { content: "\f11c" } .fa-flag-o:before { content: "\f11d" } .fa-flag-checkered:before { content: "\f11e" } .fa-terminal:before { content: "\f120" } .fa-code:before { content: "\f121" } .fa-mail-reply-all:before, .fa-reply-all:before { content: "\f122" } .fa-star-half-empty:before, .fa-star-half-full:before, .fa-star-half-o:before { content: "\f123" } .fa-location-arrow:before { content: "\f124" } .fa-crop:before { content: "\f125" } .fa-code-fork:before { content: "\f126" } .fa-unlink:before, .fa-chain-broken:before { content: "\f127" } .fa-question:before { content: "\f128" } .fa-info:before { content: "\f129" } .fa-exclamation:before { content: "\f12a" } .fa-superscript:before { content: "\f12b" } .fa-subscript:before { content: "\f12c" } .fa-eraser:before { content: "\f12d" } .fa-puzzle-piece:before { content: "\f12e" } .fa-microphone:before { content: "\f130" } .fa-microphone-slash:before { content: "\f131" } .fa-shield:before { content: "\f132" } .fa-calendar-o:before { content: "\f133" } .fa-fire-extinguisher:before { content: "\f134" } .fa-rocket:before { content: "\f135" } .fa-maxcdn:before { content: "\f136" } .fa-chevron-circle-left:before { content: "\f137" } .fa-chevron-circle-right:before { content: "\f138" } .fa-chevron-circle-up:before { content: "\f139" } .fa-chevron-circle-down:before { content: "\f13a" } .fa-html5:before { content: "\f13b" } .fa-css3:before { content: "\f13c" } .fa-anchor:before { content: "\f13d" } .fa-unlock-alt:before { content: "\f13e" } .fa-bullseye:before { content: "\f140" } .fa-ellipsis-h:before { content: "\f141" } .fa-ellipsis-v:before { content: "\f142" } .fa-rss-square:before { content: "\f143" } .fa-play-circle:before { content: "\f144" } .fa-ticket:before { content: "\f145" } .fa-minus-square:before { content: "\f146" } .fa-minus-square-o:before { content: "\f147" } .fa-level-up:before { content: "\f148" } .fa-level-down:before { content: "\f149" } .fa-check-square:before { content: "\f14a" } .fa-pencil-square:before { content: "\f14b" } .fa-external-link-square:before { content: "\f14c" } .fa-share-square:before { content: "\f14d" } .fa-compass:before { content: "\f14e" } .fa-toggle-down:before, .fa-caret-square-o-down:before { content: "\f150" } .fa-toggle-up:before, .fa-caret-square-o-up:before { content: "\f151" } .fa-toggle-right:before, .fa-caret-square-o-right:before { content: "\f152" } .fa-euro:before, .fa-eur:before { content: "\f153" } .fa-gbp:before { content: "\f154" } .fa-dollar:before, .fa-usd:before { content: "\f155" } .fa-rupee:before, .fa-inr:before { content: "\f156" } .fa-cny:before, .fa-rmb:before, .fa-yen:before, .fa-jpy:before { content: "\f157" } .fa-ruble:before, .fa-rouble:before, .fa-rub:before { content: "\f158" } .fa-won:before, .fa-krw:before { content: "\f159" } .fa-bitcoin:before, .fa-btc:before { content: "\f15a" } .fa-file:before { content: "\f15b" } .fa-file-text:before { content: "\f15c" } .fa-sort-alpha-asc:before { content: "\f15d" } .fa-sort-alpha-desc:before { content: "\f15e" } .fa-sort-amount-asc:before { content: "\f160" } .fa-sort-amount-desc:before { content: "\f161" } .fa-sort-numeric-asc:before { content: "\f162" } .fa-sort-numeric-desc:before { content: "\f163" } .fa-thumbs-up:before { content: "\f164" } .fa-thumbs-down:before { content: "\f165" } .fa-youtube-square:before { content: "\f166" } .fa-youtube:before { content: "\f167" } .fa-xing:before { content: "\f168" } .fa-xing-square:before { content: "\f169" } .fa-youtube-play:before { content: "\f16a" } .fa-dropbox:before { content: "\f16b" } .fa-stack-overflow:before { content: "\f16c" } .fa-instagram:before { content: "\f16d" } .fa-flickr:before { content: "\f16e" } .fa-adn:before { content: "\f170" } .fa-bitbucket:before { content: "\f171" } .fa-bitbucket-square:before { content: "\f172" } .fa-tumblr:before { content: "\f173" } .fa-tumblr-square:before { content: "\f174" } .fa-long-arrow-down:before { content: "\f175" } .fa-long-arrow-up:before { content: "\f176" } .fa-long-arrow-left:before { content: "\f177" } .fa-long-arrow-right:before { content: "\f178" } .fa-apple:before { content: "\f179" } .fa-windows:before { content: "\f17a" } .fa-android:before { content: "\f17b" } .fa-linux:before { content: "\f17c" } .fa-dribbble:before { content: "\f17d" } .fa-skype:before { content: "\f17e" } .fa-foursquare:before { content: "\f180" } .fa-trello:before { content: "\f181" } .fa-female:before { content: "\f182" } .fa-male:before { content: "\f183" } .fa-gittip:before, .fa-gratipay:before { content: "\f184" } .fa-sun-o:before { content: "\f185" } .fa-moon-o:before { content: "\f186" } .fa-archive:before { content: "\f187" } .fa-bug:before { content: "\f188" } .fa-vk:before { content: "\f189" } .fa-weibo:before { content: "\f18a" } .fa-renren:before { content: "\f18b" } .fa-pagelines:before { content: "\f18c" } .fa-stack-exchange:before { content: "\f18d" } .fa-arrow-circle-o-right:before { content: "\f18e" } .fa-arrow-circle-o-left:before { content: "\f190" } .fa-toggle-left:before, .fa-caret-square-o-left:before { content: "\f191" } .fa-dot-circle-o:before { content: "\f192" } .fa-wheelchair:before { content: "\f193" } .fa-vimeo-square:before { content: "\f194" } .fa-turkish-lira:before, .fa-try:before { content: "\f195" } .fa-plus-square-o:before { content: "\f196" } .fa-space-shuttle:before { content: "\f197" } .fa-slack:before { content: "\f198" } .fa-envelope-square:before { content: "\f199" } .fa-wordpress:before { content: "\f19a" } .fa-openid:before { content: "\f19b" } .fa-institution:before, .fa-bank:before, .fa-university:before { content: "\f19c" } .fa-mortar-board:before, .fa-graduation-cap:before { content: "\f19d" } .fa-yahoo:before { content: "\f19e" } .fa-google:before { content: "\f1a0" } .fa-reddit:before { content: "\f1a1" } .fa-reddit-square:before { content: "\f1a2" } .fa-stumbleupon-circle:before { content: "\f1a3" } .fa-stumbleupon:before { content: "\f1a4" } .fa-delicious:before { content: "\f1a5" } .fa-digg:before { content: "\f1a6" } .fa-pied-piper:before { content: "\f1a7" } .fa-pied-piper-alt:before { content: "\f1a8" } .fa-drupal:before { content: "\f1a9" } .fa-joomla:before { content: "\f1aa" } .fa-language:before { content: "\f1ab" } .fa-fax:before { content: "\f1ac" } .fa-building:before { content: "\f1ad" } .fa-child:before { content: "\f1ae" } .fa-paw:before { content: "\f1b0" } .fa-spoon:before { content: "\f1b1" } .fa-cube:before { content: "\f1b2" } .fa-cubes:before { content: "\f1b3" } .fa-behance:before { content: "\f1b4" } .fa-behance-square:before { content: "\f1b5" } .fa-steam:before { content: "\f1b6" } .fa-steam-square:before { content: "\f1b7" } .fa-recycle:before { content: "\f1b8" } .fa-automobile:before, .fa-car:before { content: "\f1b9" } .fa-cab:before, .fa-taxi:before { content: "\f1ba" } .fa-tree:before { content: "\f1bb" } .fa-spotify:before { content: "\f1bc" } .fa-deviantart:before { content: "\f1bd" } .fa-soundcloud:before { content: "\f1be" } .fa-database:before { content: "\f1c0" } .fa-file-pdf-o:before { content: "\f1c1" } .fa-file-word-o:before { content: "\f1c2" } .fa-file-excel-o:before { content: "\f1c3" } .fa-file-powerpoint-o:before { content: "\f1c4" } .fa-file-photo-o:before, .fa-file-picture-o:before, .fa-file-image-o:before { content: "\f1c5" } .fa-file-zip-o:before, .fa-file-archive-o:before { content: "\f1c6" } .fa-file-sound-o:before, .fa-file-audio-o:before { content: "\f1c7" } .fa-file-movie-o:before, .fa-file-video-o:before { content: "\f1c8" } .fa-file-code-o:before { content: "\f1c9" } .fa-vine:before { content: "\f1ca" } .fa-codepen:before { content: "\f1cb" } .fa-jsfiddle:before { content: "\f1cc" } .fa-life-bouy:before, .fa-life-buoy:before, .fa-life-saver:before, .fa-support:before, .fa-life-ring:before { content: "\f1cd" } .fa-circle-o-notch:before { content: "\f1ce" } .fa-ra:before, .fa-rebel:before { content: "\f1d0" } .fa-ge:before, .fa-empire:before { content: "\f1d1" } .fa-git-square:before { content: "\f1d2" } .fa-git:before { content: "\f1d3" } .fa-hacker-news:before { content: "\f1d4" } .fa-tencent-weibo:before { content: "\f1d5" } .fa-qq:before { content: "\f1d6" } .fa-wechat:before, .fa-weixin:before { content: "\f1d7" } .fa-send:before, .fa-paper-plane:before { content: "\f1d8" } .fa-send-o:before, .fa-paper-plane-o:before { content: "\f1d9" } .fa-history:before { content: "\f1da" } .fa-genderless:before, .fa-circle-thin:before { content: "\f1db" } .fa-header:before { content: "\f1dc" } .fa-paragraph:before { content: "\f1dd" } .fa-sliders:before { content: "\f1de" } .fa-share-alt:before { content: "\f1e0" } .fa-share-alt-square:before { content: "\f1e1" } .fa-bomb:before { content: "\f1e2" } .fa-soccer-ball-o:before, .fa-futbol-o:before { content: "\f1e3" } .fa-tty:before { content: "\f1e4" } .fa-binoculars:before { content: "\f1e5" } .fa-plug:before { content: "\f1e6" } .fa-slideshare:before { content: "\f1e7" } .fa-twitch:before { content: "\f1e8" } .fa-yelp:before { content: "\f1e9" } .fa-newspaper-o:before { content: "\f1ea" } .fa-wifi:before { content: "\f1eb" } .fa-calculator:before { content: "\f1ec" } .fa-paypal:before { content: "\f1ed" } .fa-google-wallet:before { content: "\f1ee" } .fa-cc-visa:before { content: "\f1f0" } .fa-cc-mastercard:before { content: "\f1f1" } .fa-cc-discover:before { content: "\f1f2" } .fa-cc-amex:before { content: "\f1f3" } .fa-cc-paypal:before { content: "\f1f4" } .fa-cc-stripe:before { content: "\f1f5" } .fa-bell-slash:before { content: "\f1f6" } .fa-bell-slash-o:before { content: "\f1f7" } .fa-trash:before { content: "\f1f8" } .fa-copyright:before { content: "\f1f9" } .fa-at:before { content: "\f1fa" } .fa-eyedropper:before { content: "\f1fb" } .fa-paint-brush:before { content: "\f1fc" } .fa-birthday-cake:before { content: "\f1fd" } .fa-area-chart:before { content: "\f1fe" } .fa-pie-chart:before { content: "\f200" } .fa-line-chart:before { content: "\f201" } .fa-lastfm:before { content: "\f202" } .fa-lastfm-square:before { content: "\f203" } .fa-toggle-off:before { content: "\f204" } .fa-toggle-on:before { content: "\f205" } .fa-bicycle:before { content: "\f206" } .fa-bus:before { content: "\f207" } .fa-ioxhost:before { content: "\f208" } .fa-angellist:before { content: "\f209" } .fa-cc:before { content: "\f20a" } .fa-shekel:before, .fa-sheqel:before, .fa-ils:before { content: "\f20b" } .fa-meanpath:before { content: "\f20c" } .fa-buysellads:before { content: "\f20d" } .fa-connectdevelop:before { content: "\f20e" } .fa-dashcube:before { content: "\f210" } .fa-forumbee:before { content: "\f211" } .fa-leanpub:before { content: "\f212" } .fa-sellsy:before { content: "\f213" } .fa-shirtsinbulk:before { content: "\f214" } .fa-simplybuilt:before { content: "\f215" } .fa-skyatlas:before { content: "\f216" } .fa-cart-plus:before { content: "\f217" } .fa-cart-arrow-down:before { content: "\f218" } .fa-diamond:before { content: "\f219" } .fa-ship:before { content: "\f21a" } .fa-user-secret:before { content: "\f21b" } .fa-motorcycle:before { content: "\f21c" } .fa-street-view:before { content: "\f21d" } .fa-heartbeat:before { content: "\f21e" } .fa-venus:before { content: "\f221" } .fa-mars:before { content: "\f222" } .fa-mercury:before { content: "\f223" } .fa-transgender:before { content: "\f224" } .fa-transgender-alt:before { content: "\f225" } .fa-venus-double:before { content: "\f226" } .fa-mars-double:before { content: "\f227" } .fa-venus-mars:before { content: "\f228" } .fa-mars-stroke:before { content: "\f229" } .fa-mars-stroke-v:before { content: "\f22a" } .fa-mars-stroke-h:before { content: "\f22b" } .fa-neuter:before { content: "\f22c" } .fa-facebook-official:before { content: "\f230" } .fa-pinterest-p:before { content: "\f231" } .fa-whatsapp:before { content: "\f232" } .fa-server:before { content: "\f233" } .fa-user-plus:before { content: "\f234" } .fa-user-times:before { content: "\f235" } .fa-hotel:before, .fa-bed:before { content: "\f236" } .fa-viacoin:before { content: "\f237" } .fa-train:before { content: "\f238" } .fa-subway:before { content: "\f239" } .fa-medium:before { content: "\f23a" } // OWL Carousel /* * Owl Carousel - Animate Plugin */ .owl-carousel .animated { -webkit-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @ -webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity : 0; } } @ keyframes fadeOut { 0% { opacity: 1; } 100% { opacity : 0; } } /* * Owl Carousel - Auto Height Plugin */ .owl-height { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } /* * Core Owl Carousel CSS File */ .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-controls .owl-nav .owl-prev, .owl-carousel .owl-controls .owl-nav .owl-next, .owl-carousel .owl-controls .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel .owl-refresh .owl-item { display: none; } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel .owl-item img { display: block; width: 100%; -webkit-transform-style: preserve-3d; } .owl-carousel.owl-text-select-on .owl-item { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; } .owl-carousel .owl-grab { cursor: move; cursor: -webkit-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } /* No Js */ .no-js .owl-carousel { display: block; } /* * Owl Carousel - Lazy Load Plugin */ .owl-carousel .owl-item .owl-lazy { opacity: 0; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -ms-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-carousel .owl-item img { transform-style: preserve-3d; } /* * Owl Carousel - Video Plugin */ .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; -webkit-transition: scale 100ms ease; -moz-transition: scale 100ms ease; -ms-transition: scale 100ms ease; -o-transition: scale 100ms ease; transition: scale 100ms ease; } .owl-carousel .owl-video-play-icon:hover { -webkit-transition: scale(1.3, 1.3); -moz-transition: scale(1.3, 1.3); -ms-transition: scale(1.3, 1.3); -o-transition: scale(1.3, 1.3); transition: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -ms-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; } /* * Default theme - Owl Carousel CSS File */ .owl-theme .owl-nav { margin-top: 10px; text-align: center; -webkit-tap-highlight-color: transparent; } .owl-theme .owl-nav [class*='owl-'] { color: white; font-size: 14px; margin: 5px; padding: 4px 7px; background: #d6d6d6; display: inline-block; cursor: pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .owl-theme .owl-nav [class*='owl-']:hover { background: #869791; color: white; text-decoration: none; } .owl-theme .owl-nav .disabled { opacity: 0.5; cursor: default; } .owl-theme .owl-nav.disabled+.owl-dots { margin-top: 10px; } .owl-theme .owl-dots { text-align: center; -webkit-tap-highlight-color: transparent; } .owl-theme .owl-dots .owl-dot { display: inline-block; zoom: 1; *display: inline; } .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 7px; background: #d6d6d6; display: block; -webkit-backface-visibility: visible; -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; -ms-transition: opacity 200ms ease; -o-transition: opacity 200ms ease; transition: opacity 200ms ease; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #869791; } // END OWL Carousel /* Animate.css */ @charset "UTF-8"; /*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @ -webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform : translateY (-30 px ); transform : translateY (-30 px ); } 60% { -webkit-transform : translateY (-15 px ); transform : translateY (-15 px ); } } @ keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform : translateY (-30 px ); -ms-transform : translateY (-30 px ); transform : translateY (-30 px ); } 60% { -webkit-transform : translateY (-15 px ); -ms-transform : translateY (-15 px ); transform : translateY (-15 px ); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } @ -webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity : 0; } } @ keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity : 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @ -webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform : scale (1 .1 ); transform : scale (1 .1 ); } 100% { -webkit-transform : scale (1); transform : scale (1); } } @ keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform : scale (1 .1 ); -ms-transform : scale (1 .1 ); transform : scale (1 .1 ); } 100% { -webkit-transform : scale (1); -ms-transform : scale (1); transform : scale (1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @ -webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform : translateX (-10 px ); transform : translateX (-10 px ); } 20%, 40%, 60%, 80% { -webkit-transform : translateX (10 px ); transform : translateX (10 px ); } } @ keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform : translateX (-10 px ); -ms-transform : translateX (-10 px ); transform : translateX (-10 px ); } 20%, 40%, 60%, 80% { -webkit-transform : translateX (10 px ); -ms-transform : translateX (10 px ); transform : translateX (10 px ); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @ -webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform : rotate (-10 deg ); transform : rotate (-10 deg ); } 60% { -webkit-transform : rotate (5 deg ); transform : rotate (5 deg ); } 80% { -webkit-transform : rotate (-5 deg ); transform : rotate (-5 deg ); } 100% { -webkit-transform : rotate (0 deg ); transform : rotate (0 deg ); } } @ keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform : rotate (-10 deg ); -ms-transform : rotate (-10 deg ); transform : rotate (-10 deg ); } 60% { -webkit-transform : rotate (5 deg ); -ms-transform : rotate (5 deg ); transform : rotate (5 deg ); } 80% { -webkit-transform : rotate (-5 deg ); -ms-transform : rotate (-5 deg ); transform : rotate (-5 deg ); } 100% { -webkit-transform : rotate (0 deg ); -ms-transform : rotate (0 deg ); transform : rotate (0 deg ); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @ -webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform : scale (0 .9 ) rotate (-3 deg ); transform : scale (0 .9 ) rotate (-3 deg ); } 30%, 50%, 70%, 90% { -webkit-transform : scale (1 .1 ) rotate (3 deg ); transform : scale (1 .1 ) rotate (3 deg ); } 40%, 60%, 80% { -webkit-transform : scale (1 .1 ) rotate (-3 deg ); transform : scale (1 .1 ) rotate (-3 deg ); } 100% { -webkit-transform : scale (1) rotate (0); transform : scale (1) rotate (0); } } @ keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform : scale (0 .9 ) rotate (-3 deg ); -ms-transform : scale (0 .9 ) rotate (-3 deg ); transform : scale (0 .9 ) rotate (-3 deg ); } 30%, 50%, 70%, 90% { -webkit-transform : scale (1 .1 ) rotate (3 deg ); -ms-transform : scale (1 .1 ) rotate (3 deg ); transform : scale (1 .1 ) rotate (3 deg ); } 40%, 60%, 80% { -webkit-transform : scale (1 .1 ) rotate (-3 deg ); -ms-transform : scale (1 .1 ) rotate (-3 deg ); transform : scale (1 .1 ) rotate (-3 deg ); } 100% { -webkit-transform : scale (1) rotate (0); -ms-transform : scale (1) rotate (0); transform : scale (1) rotate (0); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @ -webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform : translateX (-25%) rotate (-5 deg ); transform : translateX (-25%) rotate (-5 deg ); } 30% { -webkit-transform : translateX (20%) rotate (3 deg ); transform : translateX (20%) rotate (3 deg ); } 45% { -webkit-transform : translateX (-15%) rotate (-3 deg ); transform : translateX (-15%) rotate (-3 deg ); } 60% { -webkit-transform : translateX (10%) rotate (2 deg ); transform : translateX (10%) rotate (2 deg ); } 75% { -webkit-transform : translateX (-5%) rotate (-1 deg ); transform : translateX (-5%) rotate (-1 deg ); } 100% { -webkit-transform : translateX (0%); transform : translateX (0%); } } @ keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform : translateX (-25%) rotate (-5 deg ); -ms-transform : translateX (-25%) rotate (-5 deg ); transform : translateX (-25%) rotate (-5 deg ); } 30% { -webkit-transform : translateX (20%) rotate (3 deg ); -ms-transform : translateX (20%) rotate (3 deg ); transform : translateX (20%) rotate (3 deg ); } 45% { -webkit-transform : translateX (-15%) rotate (-3 deg ); -ms-transform : translateX (-15%) rotate (-3 deg ); transform : translateX (-15%) rotate (-3 deg ); } 60% { -webkit-transform : translateX (10%) rotate (2 deg ); -ms-transform : translateX (10%) rotate (2 deg ); transform : translateX (10%) rotate (2 deg ); } 75% { -webkit-transform : translateX (-5%) rotate (-1 deg ); -ms-transform : translateX (-5%) rotate (-1 deg ); transform : translateX (-5%) rotate (-1 deg ); } 100% { -webkit-transform : translateX (0%); -ms-transform : translateX (0%); transform : translateX (0%); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @ -webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } 50% { opacity : 1; -webkit-transform : scale (1 .05 ); transform : scale (1 .05 ); } 70% { -webkit-transform : scale ( .9 ); transform : scale ( .9 ); } 100% { -webkit-transform : scale (1); transform : scale (1); } } @ keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } 50% { opacity : 1; -webkit-transform : scale (1 .05 ); -ms-transform : scale (1 .05 ); transform : scale (1 .05 ); } 70% { -webkit-transform : scale ( .9 ); -ms-transform : scale ( .9 ); transform : scale ( .9 ); } 100% { -webkit-transform : scale (1); -ms-transform : scale (1); transform : scale (1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @ -webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity : 1; -webkit-transform : translateY (30 px ); transform : translateY (30 px ); } 80% { -webkit-transform : translateY (-10 px ); transform : translateY (-10 px ); } 100% { -webkit-transform : translateY (0); transform : translateY (0); } } @ keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity : 1; -webkit-transform : translateY (30 px ); -ms-transform : translateY (30 px ); transform : translateY (30 px ); } 80% { -webkit-transform : translateY (-10 px ); -ms-transform : translateY (-10 px ); transform : translateY (-10 px ); } 100% { -webkit-transform : translateY (0); -ms-transform : translateY (0); transform : translateY (0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @ -webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity : 1; -webkit-transform : translateX (30 px ); transform : translateX (30 px ); } 80% { -webkit-transform : translateX (-10 px ); transform : translateX (-10 px ); } 100% { -webkit-transform : translateX (0); transform : translateX (0); } } @ keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity : 1; -webkit-transform : translateX (30 px ); -ms-transform : translateX (30 px ); transform : translateX (30 px ); } 80% { -webkit-transform : translateX (-10 px ); -ms-transform : translateX (-10 px ); transform : translateX (-10 px ); } 100% { -webkit-transform : translateX (0); -ms-transform : translateX (0); transform : translateX (0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @ -webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity : 1; -webkit-transform : translateX (-30 px ); transform : translateX (-30 px ); } 80% { -webkit-transform : translateX (10 px ); transform : translateX (10 px ); } 100% { -webkit-transform : translateX (0); transform : translateX (0); } } @ keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity : 1; -webkit-transform : translateX (-30 px ); -ms-transform : translateX (-30 px ); transform : translateX (-30 px ); } 80% { -webkit-transform : translateX (10 px ); -ms-transform : translateX (10 px ); transform : translateX (10 px ); } 100% { -webkit-transform : translateX (0); -ms-transform : translateX (0); transform : translateX (0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @ -webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity : 1; -webkit-transform : translateY (-30 px ); transform : translateY (-30 px ); } 80% { -webkit-transform : translateY (10 px ); transform : translateY (10 px ); } 100% { -webkit-transform : translateY (0); transform : translateY (0); } } @ keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity : 1; -webkit-transform : translateY (-30 px ); -ms-transform : translateY (-30 px ); transform : translateY (-30 px ); } 80% { -webkit-transform : translateY (10 px ); -ms-transform : translateY (10 px ); transform : translateY (10 px ); } 100% { -webkit-transform : translateY (0); -ms-transform : translateY (0); transform : translateY (0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @ -webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform : scale ( .95 ); transform : scale ( .95 ); } 50% { opacity : 1; -webkit-transform : scale (1 .1 ); transform : scale (1 .1 ); } 100% { opacity : 0; -webkit-transform : scale ( .3 ); transform : scale ( .3 ); } } @ keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform : scale ( .95 ); -ms-transform : scale ( .95 ); transform : scale ( .95 ); } 50% { opacity : 1; -webkit-transform : scale (1 .1 ); -ms-transform : scale (1 .1 ); transform : scale (1 .1 ); } 100% { opacity : 0; -webkit-transform : scale ( .3 ); -ms-transform : scale ( .3 ); transform : scale ( .3 ); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @ -webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity : 1; -webkit-transform : translateY (-20 px ); transform : translateY (-20 px ); } 100% { opacity : 0; -webkit-transform : translateY (2000 px ); transform : translateY (2000 px ); } } @ keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity : 1; -webkit-transform : translateY (-20 px ); -ms-transform : translateY (-20 px ); transform : translateY (-20 px ); } 100% { opacity : 0; -webkit-transform : translateY (2000 px ); -ms-transform : translateY (2000 px ); transform : translateY (2000 px ); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @ -webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity : 1; -webkit-transform : translateX (20 px ); transform : translateX (20 px ); } 100% { opacity : 0; -webkit-transform : translateX (-2000 px ); transform : translateX (-2000 px ); } } @ keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity : 1; -webkit-transform : translateX (20 px ); -ms-transform : translateX (20 px ); transform : translateX (20 px ); } 100% { opacity : 0; -webkit-transform : translateX (-2000 px ); -ms-transform : translateX (-2000 px ); transform : translateX (-2000 px ); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @ -webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity : 1; -webkit-transform : translateX (-20 px ); transform : translateX (-20 px ); } 100% { opacity : 0; -webkit-transform : translateX (2000 px ); transform : translateX (2000 px ); } } @ keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity : 1; -webkit-transform : translateX (-20 px ); -ms-transform : translateX (-20 px ); transform : translateX (-20 px ); } 100% { opacity : 0; -webkit-transform : translateX (2000 px ); -ms-transform : translateX (2000 px ); transform : translateX (2000 px ); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @ -webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity : 1; -webkit-transform : translateY (20 px ); transform : translateY (20 px ); } 100% { opacity : 0; -webkit-transform : translateY (-2000 px ); transform : translateY (-2000 px ); } } @ keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity : 1; -webkit-transform : translateY (20 px ); -ms-transform : translateY (20 px ); transform : translateY (20 px ); } 100% { opacity : 0; -webkit-transform : translateY (-2000 px ); -ms-transform : translateY (-2000 px ); transform : translateY (-2000 px ); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @ -webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity : 1; } } @ keyframes fadeIn { 0% { opacity: 0; } 100% { opacity : 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @ -webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity : 1; -webkit-transform : translateY (0); transform : translateY (0); } } @ keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity : 1; -webkit-transform : translateY (0); -ms-transform : translateY (0); transform : translateY (0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @ -webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity : 1; -webkit-transform : translateY (0); transform : translateY (0); } } @ keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity : 1; -webkit-transform : translateY (0); -ms-transform : translateY (0); transform : translateY (0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @ -webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity : 1; -webkit-transform : translateX (0); transform : translateX (0); } } @ keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity : 1; -webkit-transform : translateX (0); -ms-transform : translateX (0); transform : translateX (0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @ -webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity : 1; -webkit-transform : translateX (0); transform : translateX (0); } } @ keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity : 1; -webkit-transform : translateX (0); -ms-transform : translateX (0); transform : translateX (0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @ -webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity : 1; -webkit-transform : translateX (0); transform : translateX (0); } } @ keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity : 1; -webkit-transform : translateX (0); -ms-transform : translateX (0); transform : translateX (0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @ -webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity : 1; -webkit-transform : translateX (0); transform : translateX (0); } } @ keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity : 1; -webkit-transform : translateX (0); -ms-transform : translateX (0); transform : translateX (0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @ -webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity : 1; -webkit-transform : translateY (0); transform : translateY (0); } } @ keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity : 1; -webkit-transform : translateY (0); -ms-transform : translateY (0); transform : translateY (0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @ -webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity : 1; -webkit-transform : translateY (0); transform : translateY (0); } } @ keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity : 1; -webkit-transform : translateY (0); -ms-transform : translateY (0); transform : translateY (0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @ -webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity : 0; } } @ keyframes fadeOut { 0% { opacity: 1; } 100% { opacity : 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @ -webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity : 0; -webkit-transform : translateY (20 px ); transform : translateY (20 px ); } } @ keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity : 0; -webkit-transform : translateY (20 px ); -ms-transform : translateY (20 px ); transform : translateY (20 px ); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @ -webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity : 0; -webkit-transform : translateY (2000 px ); transform : translateY (2000 px ); } } @ keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity : 0; -webkit-transform : translateY (2000 px ); -ms-transform : translateY (2000 px ); transform : translateY (2000 px ); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @ -webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity : 0; -webkit-transform : translateX (-20 px ); transform : translateX (-20 px ); } } @ keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity : 0; -webkit-transform : translateX (-20 px ); -ms-transform : translateX (-20 px ); transform : translateX (-20 px ); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @ -webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity : 0; -webkit-transform : translateX (-2000 px ); transform : translateX (-2000 px ); } } @ keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity : 0; -webkit-transform : translateX (-2000 px ); -ms-transform : translateX (-2000 px ); transform : translateX (-2000 px ); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @ -webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity : 0; -webkit-transform : translateX (20 px ); transform : translateX (20 px ); } } @ keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity : 0; -webkit-transform : translateX (20 px ); -ms-transform : translateX (20 px ); transform : translateX (20 px ); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @ -webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity : 0; -webkit-transform : translateX (2000 px ); transform : translateX (2000 px ); } } @ keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity : 0; -webkit-transform : translateX (2000 px ); -ms-transform : translateX (2000 px ); transform : translateX (2000 px ); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @ -webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity : 0; -webkit-transform : translateY (-20 px ); transform : translateY (-20 px ); } } @ keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity : 0; -webkit-transform : translateY (-20 px ); -ms-transform : translateY (-20 px ); transform : translateY (-20 px ); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @ -webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity : 0; -webkit-transform : translateY (-2000 px ); transform : translateY (-2000 px ); } } @ keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity : 0; -webkit-transform : translateY (-2000 px ); -ms-transform : translateY (-2000 px ); transform : translateY (-2000 px ); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @ -webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform : perspective (400 px ) translateZ (150 px ) rotateY (170 deg ) scale (1); transform : perspective (400 px ) translateZ (150 px ) rotateY (170 deg ) scale (1); -webkit-animation-timing-function : ease-out ; animation-timing-function : ease-out ; } 50% { -webkit-transform : perspective (400 px ) translateZ (150 px ) rotateY (190 deg ) scale (1); transform : perspective (400 px ) translateZ (150 px ) rotateY (190 deg ) scale (1); -webkit-animation-timing-function : ease-in ; animation-timing-function : ease-in ; } 80% { -webkit-transform : perspective (400 px ) translateZ (0) rotateY (360 deg ) scale ( .95 ); transform : perspective (400 px ) translateZ (0) rotateY (360 deg ) scale ( .95 ); -webkit-animation-timing-function : ease-in ; animation-timing-function : ease-in ; } 100% { -webkit-transform : perspective (400 px ) translateZ (0) rotateY (360 deg ) scale (1); transform : perspective (400 px ) translateZ (0) rotateY (360 deg ) scale (1); -webkit-animation-timing-function : ease-in ; animation-timing-function : ease-in ; } } @ keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform : perspective (400 px ) translateZ (150 px ) rotateY (170 deg ) scale (1); -ms-transform : perspective (400 px ) translateZ (150 px ) rotateY (170 deg ) scale (1); transform : perspective (400 px ) translateZ (150 px ) rotateY (170 deg ) scale (1); -webkit-animation-timing-function : ease-out ; animation-timing-function : ease-out ; } 50% { -webkit-transform : perspective (400 px ) translateZ (150 px ) rotateY (190 deg ) scale (1); -ms-transform : perspective (400 px ) translateZ (150 px ) rotateY (190 deg ) scale (1); transform : perspective (400 px ) translateZ (150 px ) rotateY (190 deg ) scale (1); -webkit-animation-timing-function : ease-in ; animation-timing-function : ease-in ; } 80% { -webkit-transform : perspective (400 px ) translateZ (0) rotateY (360 deg ) scale ( .95 ); -ms-transform : perspective (400 px ) translateZ (0) rotateY (360 deg ) scale ( .95 ); transform : perspective (400 px ) translateZ (0) rotateY (360 deg ) scale ( .95 ); -webkit-animation-timing-function : ease-in ; animation-timing-function : ease-in ; } 100% { -webkit-transform : perspective (400 px ) translateZ (0) rotateY (360 deg ) scale (1); -ms-transform : perspective (400 px ) translateZ (0) rotateY (360 deg ) scale (1); transform : perspective (400 px ) translateZ (0) rotateY (360 deg ) scale (1); -webkit-animation-timing-function : ease-in ; animation-timing-function : ease-in ; } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @ -webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform : perspective (400 px ) rotateX (-10 deg ); transform : perspective (400 px ) rotateX (-10 deg ); } 70% { -webkit-transform : perspective (400 px ) rotateX (10 deg ); transform : perspective (400 px ) rotateX (10 deg ); } 100% { -webkit-transform : perspective (400 px ) rotateX (0 deg ); transform : perspective (400 px ) rotateX (0 deg ); opacity : 1; } } @ keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform : perspective (400 px ) rotateX (-10 deg ); -ms-transform : perspective (400 px ) rotateX (-10 deg ); transform : perspective (400 px ) rotateX (-10 deg ); } 70% { -webkit-transform : perspective (400 px ) rotateX (10 deg ); -ms-transform : perspective (400 px ) rotateX (10 deg ); transform : perspective (400 px ) rotateX (10 deg ); } 100% { -webkit-transform : perspective (400 px ) rotateX (0 deg ); -ms-transform : perspective (400 px ) rotateX (0 deg ); transform : perspective (400 px ) rotateX (0 deg ); opacity : 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @ -webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform : perspective (400 px ) rotateY (-10 deg ); transform : perspective (400 px ) rotateY (-10 deg ); } 70% { -webkit-transform : perspective (400 px ) rotateY (10 deg ); transform : perspective (400 px ) rotateY (10 deg ); } 100% { -webkit-transform : perspective (400 px ) rotateY (0 deg ); transform : perspective (400 px ) rotateY (0 deg ); opacity : 1; } } @ keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform : perspective (400 px ) rotateY (-10 deg ); -ms-transform : perspective (400 px ) rotateY (-10 deg ); transform : perspective (400 px ) rotateY (-10 deg ); } 70% { -webkit-transform : perspective (400 px ) rotateY (10 deg ); -ms-transform : perspective (400 px ) rotateY (10 deg ); transform : perspective (400 px ) rotateY (10 deg ); } 100% { -webkit-transform : perspective (400 px ) rotateY (0 deg ); -ms-transform : perspective (400 px ) rotateY (0 deg ); transform : perspective (400 px ) rotateY (0 deg ); opacity : 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @ -webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform : perspective (400 px ) rotateX (90 deg ); transform : perspective (400 px ) rotateX (90 deg ); opacity : 0; } } @ keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform : perspective (400 px ) rotateX (90 deg ); -ms-transform : perspective (400 px ) rotateX (90 deg ); transform : perspective (400 px ) rotateX (90 deg ); opacity : 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @ -webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform : perspective (400 px ) rotateY (90 deg ); transform : perspective (400 px ) rotateY (90 deg ); opacity : 0; } } @ keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform : perspective (400 px ) rotateY (90 deg ); -ms-transform : perspective (400 px ) rotateY (90 deg ); transform : perspective (400 px ) rotateY (90 deg ); opacity : 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @ -webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform : translateX (-20%) skewX (30 deg ); transform : translateX (-20%) skewX (30 deg ); opacity : 1; } 80% { -webkit-transform : translateX (0%) skewX (-15 deg ); transform : translateX (0%) skewX (-15 deg ); opacity : 1; } 100% { -webkit-transform : translateX (0%) skewX (0 deg ); transform : translateX (0%) skewX (0 deg ); opacity : 1; } } @ keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform : translateX (-20%) skewX (30 deg ); -ms-transform : translateX (-20%) skewX (30 deg ); transform : translateX (-20%) skewX (30 deg ); opacity : 1; } 80% { -webkit-transform : translateX (0%) skewX (-15 deg ); -ms-transform : translateX (0%) skewX (-15 deg ); transform : translateX (0%) skewX (-15 deg ); opacity : 1; } 100% { -webkit-transform : translateX (0%) skewX (0 deg ); -ms-transform : translateX (0%) skewX (0 deg ); transform : translateX (0%) skewX (0 deg ); opacity : 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @ -webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform : translateX (100%) skewX (-30 deg ); transform : translateX (100%) skewX (-30 deg ); opacity : 0; } } @ keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform : translateX (100%) skewX (-30 deg ); -ms-transform : translateX (100%) skewX (-30 deg ); transform : translateX (100%) skewX (-30 deg ); opacity : 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @ -webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin : center center ; transform-origin : center center ; -webkit-transform : rotate (0); transform : rotate (0); opacity : 1; } } @ keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin : center center ; -ms-transform-origin : center center ; transform-origin : center center ; -webkit-transform : rotate (0); -ms-transform : rotate (0); transform : rotate (0); opacity : 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @ -webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin : left bottom ; transform-origin : left bottom ; -webkit-transform : rotate (0); transform : rotate (0); opacity : 1; } } @ keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin : left bottom ; -ms-transform-origin : left bottom ; transform-origin : left bottom ; -webkit-transform : rotate (0); -ms-transform : rotate (0); transform : rotate (0); opacity : 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @ -webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin : right bottom ; transform-origin : right bottom ; -webkit-transform : rotate (0); transform : rotate (0); opacity : 1; } } @ keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin : right bottom ; -ms-transform-origin : right bottom ; transform-origin : right bottom ; -webkit-transform : rotate (0); -ms-transform : rotate (0); transform : rotate (0); opacity : 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @ -webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin : left bottom ; transform-origin : left bottom ; -webkit-transform : rotate (0); transform : rotate (0); opacity : 1; } } @ keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin : left bottom ; -ms-transform-origin : left bottom ; transform-origin : left bottom ; -webkit-transform : rotate (0); -ms-transform : rotate (0); transform : rotate (0); opacity : 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @ -webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin : right bottom ; transform-origin : right bottom ; -webkit-transform : rotate (0); transform : rotate (0); opacity : 1; } } @ keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin : right bottom ; -ms-transform-origin : right bottom ; transform-origin : right bottom ; -webkit-transform : rotate (0); -ms-transform : rotate (0); transform : rotate (0); opacity : 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @ -webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin : center center ; transform-origin : center center ; -webkit-transform : rotate (200 deg ); transform : rotate (200 deg ); opacity : 0; } } @ keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin : center center ; -ms-transform-origin : center center ; transform-origin : center center ; -webkit-transform : rotate (200 deg ); -ms-transform : rotate (200 deg ); transform : rotate (200 deg ); opacity : 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @ -webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin : left bottom ; transform-origin : left bottom ; -webkit-transform : rotate (90 deg ); transform : rotate (90 deg ); opacity : 0; } } @ keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin : left bottom ; -ms-transform-origin : left bottom ; transform-origin : left bottom ; -webkit-transform : rotate (90 deg ); -ms-transform : rotate (90 deg ); transform : rotate (90 deg ); opacity : 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @ -webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin : right bottom ; transform-origin : right bottom ; -webkit-transform : rotate (-90 deg ); transform : rotate (-90 deg ); opacity : 0; } } @ keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin : right bottom ; -ms-transform-origin : right bottom ; transform-origin : right bottom ; -webkit-transform : rotate (-90 deg ); -ms-transform : rotate (-90 deg ); transform : rotate (-90 deg ); opacity : 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @ -webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin : left bottom ; transform-origin : left bottom ; -webkit-transform : rotate (-90 deg ); transform : rotate (-90 deg ); opacity : 0; } } @ keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin : left bottom ; -ms-transform-origin : left bottom ; transform-origin : left bottom ; -webkit-transform : rotate (-90 deg ); -ms-transform : rotate (-90 deg ); transform : rotate (-90 deg ); opacity : 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @ -webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin : right bottom ; transform-origin : right bottom ; -webkit-transform : rotate (90 deg ); transform : rotate (90 deg ); opacity : 0; } } @ keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin : right bottom ; -ms-transform-origin : right bottom ; transform-origin : right bottom ; -webkit-transform : rotate (90 deg ); -ms-transform : rotate (90 deg ); transform : rotate (90 deg ); opacity : 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @ -webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform : translateY (0); transform : translateY (0); } } @ keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform : translateY (0); -ms-transform : translateY (0); transform : translateY (0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @ -webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform : translateX (0); transform : translateX (0); } } @ keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform : translateX (0); -ms-transform : translateX (0); transform : translateX (0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @ -webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform : translateX (0); transform : translateX (0); } } @ keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform : translateX (0); -ms-transform : translateX (0); transform : translateX (0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @ -webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity : 0; -webkit-transform : translateX (-2000 px ); transform : translateX (-2000 px ); } } @ keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity : 0; -webkit-transform : translateX (-2000 px ); -ms-transform : translateX (-2000 px ); transform : translateX (-2000 px ); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @ -webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity : 0; -webkit-transform : translateX (2000 px ); transform : translateX (2000 px ); } } @ keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity : 0; -webkit-transform : translateX (2000 px ); -ms-transform : translateX (2000 px ); transform : translateX (2000 px ); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @ -webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity : 0; -webkit-transform : translateY (-2000 px ); transform : translateY (-2000 px ); } } @ keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity : 0; -webkit-transform : translateY (-2000 px ); -ms-transform : translateY (-2000 px ); transform : translateY (-2000 px ); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @ -webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform : rotate (80 deg ); transform : rotate (80 deg ); -webkit-transform-origin : top left ; transform-origin : top left ; -webkit-animation-timing-function : ease-in-out ; animation-timing-function : ease-in-out ; } 40% { -webkit-transform : rotate (60 deg ); transform : rotate (60 deg ); -webkit-transform-origin : top left ; transform-origin : top left ; -webkit-animation-timing-function : ease-in-out ; animation-timing-function : ease-in-out ; } 80% { -webkit-transform : rotate (60 deg ) translateY (0); transform : rotate (60 deg ) translateY (0); opacity : 1; -webkit-transform-origin : top left ; transform-origin : top left ; -webkit-animation-timing-function : ease-in-out ; animation-timing-function : ease-in-out ; } 100% { -webkit-transform : translateY (700 px ); transform : translateY (700 px ); opacity : 0; } } @ keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform : rotate (80 deg ); -ms-transform : rotate (80 deg ); transform : rotate (80 deg ); -webkit-transform-origin : top left ; -ms-transform-origin : top left ; transform-origin : top left ; -webkit-animation-timing-function : ease-in-out ; animation-timing-function : ease-in-out ; } 40% { -webkit-transform : rotate (60 deg ); -ms-transform : rotate (60 deg ); transform : rotate (60 deg ); -webkit-transform-origin : top left ; -ms-transform-origin : top left ; transform-origin : top left ; -webkit-animation-timing-function : ease-in-out ; animation-timing-function : ease-in-out ; } 80% { -webkit-transform : rotate (60 deg ) translateY (0); -ms-transform : rotate (60 deg ) translateY (0); transform : rotate (60 deg ) translateY (0); opacity : 1; -webkit-transform-origin : top left ; -ms-transform-origin : top left ; transform-origin : top left ; -webkit-animation-timing-function : ease-in-out ; animation-timing-function : ease-in-out ; } 100% { -webkit-transform : translateY (700 px ); -ms-transform : translateY (700 px ); transform : translateY (700 px ); opacity : 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @ -webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity : 1; -webkit-transform : translateX (0 px ) rotate (0 deg ); transform : translateX (0 px ) rotate (0 deg ); } } @ keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity : 1; -webkit-transform : translateX (0 px ) rotate (0 deg ); -ms-transform : translateX (0 px ) rotate (0 deg ); transform : translateX (0 px ) rotate (0 deg ); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @ -webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity : 0; -webkit-transform : translateX (100%) rotate (120 deg ); transform : translateX (100%) rotate (120 deg ); } } @ keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity : 0; -webkit-transform : translateX (100%) rotate (120 deg ); -ms-transform : translateX (100%) rotate (120 deg ); transform : translateX (100%) rotate (120 deg ); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; }