/*==============================================CSS3 ANIMATION CHEAT SHEET==============================================Made by Justin Aguilarwww.justinaguilar.com/animations/Questions, comments, concerns, love letters:justin@justinaguilar.com==============================================*//*==============================================slideDown==============================================*/.slideDown{animation-name: slideDown;-webkit-animation-name: slideDown;animation-duration: 1s;-webkit-animation-duration: 1s;animation-timing-function: ease;-webkit-animation-timing-function: ease;visibility: visible;}@keyframes slideDown{0%{transform: translateY(-100%);}50%{transform: translateY(8%);}65%{transform: translateY(-4%);}80%{transform: translateY(4%);}95%{transform: translateY(-2%);}100%{transform: translateY(0%);}}@-webkit-keyframes slideDown{0%{-webkit-transform: translateY(-100%);}50%{-webkit-transform: translateY(8%);}65%{-webkit-transform: translateY(-4%);}80%{-webkit-transform: translateY(4%);}95%{-webkit-transform: translateY(-2%);}100%{-webkit-transform: translateY(0%);}}/*==============================================slideUp==============================================*/.slideUp{animation-name: slideUp;-webkit-animation-name: slideUp;animation-duration: 1s;-webkit-animation-duration: 1s;animation-timing-function: ease;-webkit-animation-timing-function: ease;visibility: visible;}@keyframes slideUp{0%{transform: translateY(100%);}50%{transform: translateY(-8%);}65%{transform: translateY(4%);}80%{transform: translateY(-4%);}95%{transform: translateY(2%);}100%{transform: translateY(0%);}}@-webkit-keyframes slideUp{0%{-webkit-transform: translateY(100%);}50%{-webkit-transform: translateY(-8%);}65%{-webkit-transform: translateY(4%);}80%{-webkit-transform: translateY(-4%);}95%{-webkit-transform: translateY(2%);}100%{-webkit-transform: translateY(0%);}}/*==============================================slideLeft==============================================*/.slideLeft{animation-name: slideLeft;-webkit-animation-name: slideLeft;animation-duration: 1s;-webkit-animation-duration: 1s;animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;visibility: visible;}@keyframes slideLeft{0%{transform: translateX(150%);}50%{transform: translateX(-8%);}65%{transform: translateX(4%);}80%{transform: translateX(-4%);}95%{transform: translateX(2%);}100%{transform: translateX(0%);}}@-webkit-keyframes slideLeft{0%{-webkit-transform: translateX(150%);}50%{-webkit-transform: translateX(-8%);}65%{-webkit-transform: translateX(4%);}80%{-webkit-transform: translateX(-4%);}95%{-webkit-transform: translateX(2%);}100%{-webkit-transform: translateX(0%);}}/*==============================================slideRight==============================================*/.slideRight{animation-name: slideRight;-webkit-animation-name: slideRight;animation-duration: 1s;-webkit-animation-duration: 1s;animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;visibility: visible;}@keyframes slideRight{0%{transform: translateX(-150%);}50%{transform: translateX(8%);}65%{transform: translateX(-4%);}80%{transform: translateX(4%);}95%{transform: translateX(-2%);}100%{transform: translateX(0%);}}@-webkit-keyframes slideRight{0%{-webkit-transform: translateX(-150%);}50%{-webkit-transform: translateX(8%);}65%{-webkit-transform: translateX(-4%);}80%{-webkit-transform: translateX(4%);}95%{-webkit-transform: translateX(-2%);}100%{-webkit-transform: translateX(0%);}}/*==============================================slideExpandUp==============================================*/.slideExpandUp{animation-name: slideExpandUp;-webkit-animation-name: slideExpandUp;animation-duration: 1.6s;-webkit-animation-duration: 1.6s;animation-timing-function: ease-out;-webkit-animation-timing-function: ease -out;visibility: visible;}@keyframes slideExpandUp{0%{transform: translateY(100%) scaleX(0.5);}30%{transform: translateY(-8%) scaleX(0.5);}40%{transform: translateY(2%) scaleX(0.5);}50%{transform: translateY(0%) scaleX(1.1);}60%{transform: translateY(0%) scaleX(0.9);}70%{transform: translateY(0%) scaleX(1.05);}80%{transform: translateY(0%) scaleX(0.95);}90%{transform: translateY(0%) scaleX(1.02);}100%{transform: translateY(0%) scaleX(1);}}@-webkit-keyframes slideExpandUp{0%{-webkit-transform: translateY(100%) scaleX(0.5);}30%{-webkit-transform: translateY(-8%) scaleX(0.5);}40%{-webkit-transform: translateY(2%) scaleX(0.5);}50%{-webkit-transform: translateY(0%) scaleX(1.1);}60%{-webkit-transform: translateY(0%) scaleX(0.9);}70%{-webkit-transform: translateY(0%) scaleX(1.05);}80%{-webkit-transform: translateY(0%) scaleX(0.95);}90%{-webkit-transform: translateY(0%) scaleX(1.02);}100%{-webkit-transform: translateY(0%) scaleX(1);}}/*==============================================expandUp==============================================*/.expandUp{animation-name: expandUp;-webkit-animation-name: expandUp;animation-duration: 0.7s;-webkit-animation-duration: 0.7s;animation-timing-function: ease;-webkit-animation-timing-function: ease;visibility: visible;}@keyframes expandUp{0%{transform: translateY(100%) scale(0.6) scaleY(0.5);}60%{transform: translateY(-7%) scaleY(1.12);}75%{transform: translateY(3%);}100%{transform: translateY(0%) scale(1) scaleY(1);}}@-webkit-keyframes expandUp{0%{-webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);}60%{-webkit-transform: translateY(-7%) scaleY(1.12);}75%{-webkit-transform: translateY(3%);}100%{-webkit-transform: translateY(0%) scale(1) scaleY(1);}}/*==============================================fadeIn==============================================*/.fadeIn{animation-name: fadeIn;-webkit-animation-name: fadeIn;animation-duration: 1.5s;-webkit-animation-duration: 1.5s;animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;visibility: visible;}@keyframes fadeIn{0%{transform: scale(0);opacity: 0.0;}60%{transform: scale(1.1);}80%{transform: scale(0.9);opacity: 1;}100%{transform: scale(1);opacity: 1;}}@-webkit-keyframes fadeIn{0%{-webkit-transform: scale(0);opacity: 0.0;}60%{-webkit-transform: scale(1.1);}80%{-webkit-transform: scale(0.9);opacity: 1;}100%{-webkit-transform: scale(1);opacity: 1;}}/*==============================================expandOpen==============================================*/.expandOpen{animation-name: expandOpen;-webkit-animation-name: expandOpen;animation-duration: 1.2s;-webkit-animation-duration: 1.2s;animation-timing-function: ease-out;-webkit-animation-timing-function: ease-out;visibility: visible;}@keyframes expandOpen{0%{transform: scale(1.8);}50%{transform: scale(0.95);}80%{transform: scale(1.05);}90%{transform: scale(0.98);}100%{transform: scale(1);}}@-webkit-keyframes expandOpen{0%{-webkit-transform: scale(1.8);}50%{-webkit-transform: scale(0.95);}80%{-webkit-transform: scale(1.05);}90%{-webkit-transform: scale(0.98);}100%{-webkit-transform: scale(1);}}/*==============================================bigEntrance==============================================*/.bigEntrance{animation-name: bigEntrance;-webkit-animation-name: bigEntrance;animation-duration: 1.6s;-webkit-animation-duration: 1.6s;animation-timing-function: ease-out;-webkit-animation-timing-function: ease-out;visibility: visible;}@keyframes bigEntrance{0%{transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);opacity: 0.2;}30%{transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);opacity: 1;}45%{transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);opacity: 1;}60%{transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);opacity: 1;}75%{transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);opacity: 1;}90%{transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);opacity: 1;}100%{transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);opacity: 1;}}@-webkit-keyframes bigEntrance{0%{-webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);opacity: 0.2;}30%{-webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);opacity: 1;}45%{-webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);opacity: 1;}60%{-webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);opacity: 1;}75%{-webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);opacity: 1;}90%{-webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);opacity: 1;}100%{-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);opacity: 1;}}/*==============================================hatch==============================================*/.hatch{animation-name: hatch;-webkit-animation-name: hatch;animation-duration: 2s;-webkit-animation-duration: 2s;animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;transform-origin: 50% 100%;-ms-transform-origin: 50% 100%;-webkit-transform-origin: 50% 100%; visibility: visible;}@keyframes hatch{0%{transform: rotate(0deg) scaleY(0.6);}20%{transform: rotate(-2deg) scaleY(1.05);}35%{transform: rotate(2deg) scaleY(1);}50%{transform: rotate(-2deg);}65%{transform: rotate(1deg);}80%{transform: rotate(-1deg);}100%{transform: rotate(0deg);}}@-webkit-keyframes hatch{0%{-webkit-transform: rotate(0deg) scaleY(0.6);}20%{-webkit-transform: rotate(-2deg) scaleY(1.05);}35%{-webkit-transform: rotate(2deg) scaleY(1);}50%{-webkit-transform: rotate(-2deg);}65%{-webkit-transform: rotate(1deg);}80%{-webkit-transform: rotate(-1deg);}100%{-webkit-transform: rotate(0deg);}}/*==============================================bounce==============================================*/.bounce{animation-name: bounce;-webkit-animation-name: bounce;animation-duration: 1.6s;-webkit-animation-duration: 1.6s;animation-timing-function: ease;-webkit-animation-timing-function: ease;transform-origin: 50% 100%;-ms-transform-origin: 50% 100%;-webkit-transform-origin: 50% 100%;}@keyframes bounce{0%{transform: translateY(0%) scaleY(0.6);}60%{transform: translateY(-100%) scaleY(1.1);}70%{transform: translateY(0%) scaleY(0.95) scaleX(1.05);}80%{transform: translateY(0%) scaleY(1.05) scaleX(1);}90%{transform: translateY(0%) scaleY(0.95) scaleX(1);}100%{transform: translateY(0%) scaleY(1) scaleX(1);}}@-webkit-keyframes bounce{0%{-webkit-transform: translateY(0%) scaleY(0.6);}60%{-webkit-transform: translateY(-100%) scaleY(1.1);}70%{-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);}80%{-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);}90%{-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);}100%{-webkit-transform: translateY(0%) scaleY(1) scaleX(1);}}/*==============================================pulse==============================================*/.pulse{animation-name: pulse;-webkit-animation-name: pulse;animation-duration: 1.5s;-webkit-animation-duration: 1.5s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;}@keyframes pulse{0%{transform: scale(0.95);opacity: 0.7;}50%{transform: scale(1);opacity: 1;}100%{transform: scale(0.95);opacity: 0.7;}}@-webkit-keyframes pulse{0%{-webkit-transform: scale(0.95);opacity: 0.7;}50%{-webkit-transform: scale(1);opacity: 1;}100%{-webkit-transform: scale(0.95);opacity: 0.7;}}/*==============================================floating==============================================*/.floating{animation-name: floating;-webkit-animation-name: floating;animation-duration: 1.5s;-webkit-animation-duration: 1.5s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;}@keyframes floating{0%{transform: translateY(0%);}50%{transform: translateY(8%);}100%{transform: translateY(0%);}}@-webkit-keyframes floating{0%{-webkit-transform: translateY(0%);}50%{-webkit-transform: translateY(8%);}100%{-webkit-transform: translateY(0%);}}/*==============================================tossing==============================================*/.tossing{animation-name: tossing;-webkit-animation-name: tossing;animation-duration: 2.5s;-webkit-animation-duration: 2.5s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;}@keyframes tossing{0%{transform: rotate(-4deg);}50%{transform: rotate(4deg);}100%{transform: rotate(-4deg);}}@-webkit-keyframes tossing{0%{-webkit-transform: rotate(-4deg);}50%{-webkit-transform: rotate(4deg);}100%{-webkit-transform: rotate(-4deg);}}/*==============================================pullUp==============================================*/.pullUp{animation-name: pullUp;-webkit-animation-name: pullUp;animation-duration: 1.1s;-webkit-animation-duration: 1.1s;animation-timing-function: ease-out;-webkit-animation-timing-function: ease-out;transform-origin: 50% 100%;-ms-transform-origin: 50% 100%;-webkit-transform-origin: 50% 100%;}@keyframes pullUp{0%{transform: scaleY(0.1);}40%{transform: scaleY(1.02);}60%{transform: scaleY(0.98);}80%{transform: scaleY(1.01);}100%{transform: scaleY(0.98);}80%{transform: scaleY(1.01);}100%{transform: scaleY(1);}}@-webkit-keyframes pullUp{0%{-webkit-transform: scaleY(0.1);}40%{-webkit-transform: scaleY(1.02);}60%{-webkit-transform: scaleY(0.98);}80%{-webkit-transform: scaleY(1.01);}100%{-webkit-transform: scaleY(0.98);}80%{-webkit-transform: scaleY(1.01);}100%{-webkit-transform: scaleY(1);}}/*==============================================pullDown==============================================*/.pullDown{animation-name: pullDown;-webkit-animation-name: pullDown;animation-duration: 1.1s;-webkit-animation-duration: 1.1s;animation-timing-function: ease-out;-webkit-animation-timing-function: ease-out;transform-origin: 50% 0%;-ms-transform-origin: 50% 0%;-webkit-transform-origin: 50% 0%;}@keyframes pullDown{0%{transform: scaleY(0.1);}40%{transform: scaleY(1.02);}60%{transform: scaleY(0.98);}80%{transform: scaleY(1.01);}100%{transform: scaleY(0.98);}80%{transform: scaleY(1.01);}100%{transform: scaleY(1);}}@-webkit-keyframes pullDown{0%{-webkit-transform: scaleY(0.1);}40%{-webkit-transform: scaleY(1.02);}60%{-webkit-transform: scaleY(0.98);}80%{-webkit-transform: scaleY(1.01);}100%{-webkit-transform: scaleY(0.98);}80%{-webkit-transform: scaleY(1.01);}100%{-webkit-transform: scaleY(1);}}/*==============================================stretchLeft==============================================*/.stretchLeft{animation-name: stretchLeft;-webkit-animation-name: stretchLeft;animation-duration: 1.5s;-webkit-animation-duration: 1.5s;animation-timing-function: ease-out;-webkit-animation-timing-function: ease-out;transform-origin: 100% 0%;-ms-transform-origin: 100% 0%;-webkit-transform-origin: 100% 0%;}@keyframes stretchLeft{0%{transform: scaleX(0.3);}40%{transform: scaleX(1.02);}60%{transform: scaleX(0.98);}80%{transform: scaleX(1.01);}100%{transform: scaleX(0.98);}80%{transform: scaleX(1.01);}100%{transform: scaleX(1);}}@-webkit-keyframes stretchLeft{0%{-webkit-transform: scaleX(0.3);}40%{-webkit-transform: scaleX(1.02);}60%{-webkit-transform: scaleX(0.98);}80%{-webkit-transform: scaleX(1.01);}100%{-webkit-transform: scaleX(0.98);}80%{-webkit-transform: scaleX(1.01);}100%{-webkit-transform: scaleX(1);}}/*==============================================stretchRight==============================================*/.stretchRight{animation-name: stretchRight;-webkit-animation-name: stretchRight;animation-duration: 1.5s;-webkit-animation-duration: 1.5s;animation-timing-function: ease-out;-webkit-animation-timing-function: ease-out;transform-origin: 0% 0%;-ms-transform-origin: 0% 0%;-webkit-transform-origin: 0% 0%;}@keyframes stretchRight{0%{transform: scaleX(0.3);}40%{transform: scaleX(1.02);}60%{transform: scaleX(0.98);}80%{transform: scaleX(1.01);}100%{transform: scaleX(0.98);}80%{transform: scaleX(1.01);}100%{transform: scaleX(1);}}@-webkit-keyframes stretchRight{0%{-webkit-transform: scaleX(0.3);}40%{-webkit-transform: scaleX(1.02);}60%{-webkit-transform: scaleX(0.98);}80%{-webkit-transform: scaleX(1.01);}100%{-webkit-transform: scaleX(0.98);}80%{-webkit-transform: scaleX(1.01);}100%{-webkit-transform: scaleX(1);}}.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}@-webkit-keyframes fadeIn{0%{opacity: 0;}100%{opacity: 1;}}/*@-moz-keyframes fadeIn{0%{opacity: 0;}100%{opacity: 1;}}@-o-keyframes fadeIn{0%{opacity: 0;}100%{opacity: 1;}}@keyframes fadeIn{0%{opacity: 0;}100%{opacity: 1;}}.fadeIn{-webkit-animation-name: fadeIn;-moz-animation-name: fadeIn;-o-animation-name: fadeIn;animation-name: fadeIn;}*/@-webkit-keyframes fadeInUp{0%{opacity: 0;-webkit-transform: translateY(20px);}100%{opacity: 1;-webkit-transform: translateY(0);}}@-moz-keyframes fadeInUp{0%{opacity: 0;-moz-transform: translateY(20px);}100%{opacity: 1;-moz-transform: translateY(0);}}@-o-keyframes fadeInUp{0%{opacity: 0;-o-transform: translateY(20px);}100%{opacity: 1;-o-transform: translateY(0);}}@keyframes fadeInUp{0%{opacity: 0;transform: translateY(20px);}100%{opacity: 1;transform: translateY(0);}}.fadeInUp{-webkit-animation-name: fadeInUp;-moz-animation-name: fadeInUp;-o-animation-name: fadeInUp;animation-name: fadeInUp;}@-webkit-keyframes fadeInDown{0%{opacity: 0;-webkit-transform: translateY(-20px);}100%{opacity: 1;-webkit-transform: translateY(0);}}@-moz-keyframes fadeInDown{0%{opacity: 0;-moz-transform: translateY(-20px);}100%{opacity: 1;-moz-transform: translateY(0);}}@-o-keyframes fadeInDown{0%{opacity: 0;-o-transform: translateY(-20px);}100%{opacity: 1;-o-transform: translateY(0);}}@keyframes fadeInDown{0%{opacity: 0;transform: translateY(-20px);}100%{opacity: 1;transform: translateY(0);}}.fadeInDown{-webkit-animation-name: fadeInDown;-moz-animation-name: fadeInDown;-o-animation-name: fadeInDown;animation-name: fadeInDown;}@-webkit-keyframes fadeInLeft{0%{opacity: 0;-webkit-transform: translateX(-20px);}100%{opacity: 1;-webkit-transform: translateX(0);}}@-moz-keyframes fadeInLeft{0%{opacity: 0;-moz-transform: translateX(-20px);}100%{opacity: 1;-moz-transform: translateX(0);}}@-o-keyframes fadeInLeft{0%{opacity: 0;-o-transform: translateX(-20px);}100%{opacity: 1;-o-transform: translateX(0);}}@keyframes fadeInLeft{0%{opacity: 0;transform: translateX(-20px);}100%{opacity: 1;transform: translateX(0);}}.fadeInLeft{-webkit-animation-name: fadeInLeft;-moz-animation-name: fadeInLeft;-o-animation-name: fadeInLeft;animation-name: fadeInLeft;}@-webkit-keyframes fadeInRight{0%{opacity: 0;-webkit-transform: translateX(20px);}100%{opacity: 1;-webkit-transform: translateX(0);}}@-moz-keyframes fadeInRight{0%{opacity: 0;-moz-transform: translateX(20px);}100%{opacity: 1;-moz-transform: translateX(0);}}@-o-keyframes fadeInRight{0%{opacity: 0;-o-transform: translateX(20px);}100%{opacity: 1;-o-transform: translateX(0);}}@keyframes fadeInRight{0%{opacity: 0;transform: translateX(20px);}100%{opacity: 1;transform: translateX(0);}}.fadeInRight{-webkit-animation-name: fadeInRight;-moz-animation-name: fadeInRight;-o-animation-name: fadeInRight;animation-name: fadeInRight;}@-webkit-keyframes fadeInUpBig{0%{opacity: 0;-webkit-transform: translateY(2000px);}100%{opacity: 1;-webkit-transform: translateY(0);}}@-moz-keyframes fadeInUpBig{0%{opacity: 0;-moz-transform: translateY(2000px);}100%{opacity: 1;-moz-transform: translateY(0);}}@-o-keyframes fadeInUpBig{0%{opacity: 0;-o-transform: translateY(2000px);}100%{opacity: 1;-o-transform: translateY(0);}}@keyframes fadeInUpBig{0%{opacity: 0;transform: translateY(2000px);}100%{opacity: 1;transform: translateY(0);}}.fadeInUpBig{-webkit-animation-name: fadeInUpBig;-moz-animation-name: fadeInUpBig;-o-animation-name: fadeInUpBig;animation-name: fadeInUpBig;}@-webkit-keyframes fadeInDownBig{0%{opacity: 0;-webkit-transform: translateY(-2000px);}100%{opacity: 1;-webkit-transform: translateY(0);}}@-moz-keyframes fadeInDownBig{0%{opacity: 0;-moz-transform: translateY(-2000px);}100%{opacity: 1;-moz-transform: translateY(0);}}@-o-keyframes fadeInDownBig{0%{opacity: 0;-o-transform: translateY(-2000px);}100%{opacity: 1;-o-transform: translateY(0);}}@keyframes fadeInDownBig{0%{opacity: 0;transform: translateY(-2000px);}100%{opacity: 1;transform: translateY(0);}}.fadeInDownBig{-webkit-animation-name: fadeInDownBig;-moz-animation-name: fadeInDownBig;-o-animation-name: fadeInDownBig;animation-name: fadeInDownBig;}@-webkit-keyframes fadeInLeftBig{0%{opacity: 0;-webkit-transform: translateX(-2000px);}100%{opacity: 1;-webkit-transform: translateX(0);}}@-moz-keyframes fadeInLeftBig{0%{opacity: 0;-moz-transform: translateX(-2000px);}100%{opacity: 1;-moz-transform: translateX(0);}}@-o-keyframes fadeInLeftBig{0%{opacity: 0;-o-transform: translateX(-2000px);}100%{opacity: 1;-o-transform: translateX(0);}}@keyframes fadeInLeftBig{0%{opacity: 0;transform: translateX(-2000px);}100%{opacity: 1;transform: translateX(0);}}.fadeInLeftBig{-webkit-animation-name: fadeInLeftBig;-moz-animation-name: fadeInLeftBig;-o-animation-name: fadeInLeftBig;animation-name: fadeInLeftBig;}@-webkit-keyframes fadeInRightBig{0%{opacity: 0;-webkit-transform: translateX(2000px);}100%{opacity: 1;-webkit-transform: translateX(0);}}@-moz-keyframes fadeInRightBig{0%{opacity: 0;-moz-transform: translateX(2000px);}100%{opacity: 1;-moz-transform: translateX(0);}}@-o-keyframes fadeInRightBig{0%{opacity: 0;-o-transform: translateX(2000px);}100%{opacity: 1;-o-transform: translateX(0);}}@keyframes fadeInRightBig{0%{opacity: 0;transform: translateX(2000px);}100%{opacity: 1;transform: translateX(0);}}.fadeInRightBig{-webkit-animation-name: fadeInRightBig;-moz-animation-name: fadeInRightBig;-o-animation-name: fadeInRightBig;animation-name: fadeInRightBig;}@-webkit-keyframes fadeOut{0%{opacity: 1;}100%{opacity: 0;}}@-moz-keyframes fadeOut{0%{opacity: 1;}100%{opacity: 0;}}@-o-keyframes fadeOut{0%{opacity: 1;}100%{opacity: 0;}}@keyframes fadeOut{0%{opacity: 1;}100%{opacity: 0;}}.fadeOut{-webkit-animation-name: fadeOut;-moz-animation-name: fadeOut;-o-animation-name: fadeOut;animation-name: fadeOut;}@-webkit-keyframes fadeOutUp{0%{opacity: 1;-webkit-transform: translateY(0);}100%{opacity: 0;-webkit-transform: translateY(-20px);}}@-moz-keyframes fadeOutUp{0%{opacity: 1;-moz-transform: translateY(0);}100%{opacity: 0;-moz-transform: translateY(-20px);}}@-o-keyframes fadeOutUp{0%{opacity: 1;-o-transform: translateY(0);}100%{opacity: 0;-o-transform: translateY(-20px);}}@keyframes fadeOutUp{0%{opacity: 1;transform: translateY(0);}100%{opacity: 0;transform: translateY(-20px);}}.fadeOutUp{-webkit-animation-name: fadeOutUp;-moz-animation-name: fadeOutUp;-o-animation-name: fadeOutUp;animation-name: fadeOutUp;}@-webkit-keyframes fadeOutDown{0%{opacity: 1;-webkit-transform: translateY(0);}100%{opacity: 0;-webkit-transform: translateY(20px);}}@-moz-keyframes fadeOutDown{0%{opacity: 1;-moz-transform: translateY(0);}100%{opacity: 0;-moz-transform: translateY(20px);}}@-o-keyframes fadeOutDown{0%{opacity: 1;-o-transform: translateY(0);}100%{opacity: 0;-o-transform: translateY(20px);}}@keyframes fadeOutDown{0%{opacity: 1;transform: translateY(0);}100%{opacity: 0;transform: translateY(20px);}}.fadeOutDown{-webkit-animation-name: fadeOutDown;-moz-animation-name: fadeOutDown;-o-animation-name: fadeOutDown;animation-name: fadeOutDown;}@-webkit-keyframes fadeOutLeft{0%{opacity: 1;-webkit-transform: translateX(0);}100%{opacity: 0;-webkit-transform: translateX(-20px);}}@-moz-keyframes fadeOutLeft{0%{opacity: 1;-moz-transform: translateX(0);}100%{opacity: 0;-moz-transform: translateX(-20px);}}@-o-keyframes fadeOutLeft{0%{opacity: 1;-o-transform: translateX(0);}100%{opacity: 0;-o-transform: translateX(-20px);}}@keyframes fadeOutLeft{0%{opacity: 1;transform: translateX(0);}100%{opacity: 0;transform: translateX(-20px);}}.fadeOutLeft{-webkit-animation-name: fadeOutLeft;-moz-animation-name: fadeOutLeft;-o-animation-name: fadeOutLeft;animation-name: fadeOutLeft;}@-webkit-keyframes fadeOutRight{0%{opacity: 1;-webkit-transform: translateX(0);}100%{opacity: 0;-webkit-transform: translateX(20px);}}@-moz-keyframes fadeOutRight{0%{opacity: 1;-moz-transform: translateX(0);}100%{opacity: 0;-moz-transform: translateX(20px);}}@-o-keyframes fadeOutRight{0%{opacity: 1;-o-transform: translateX(0);}100%{opacity: 0;-o-transform: translateX(20px);}}@keyframes fadeOutRight{0%{opacity: 1;transform: translateX(0);}100%{opacity: 0;transform: translateX(20px);}}.fadeOutRight{-webkit-animation-name: fadeOutRight;-moz-animation-name: fadeOutRight;-o-animation-name: fadeOutRight;animation-name: fadeOutRight;}@-webkit-keyframes fadeOutUpBig{0%{opacity: 1;-webkit-transform: translateY(0);}100%{opacity: 0;-webkit-transform: translateY(-2000px);}}@-moz-keyframes fadeOutUpBig{0%{opacity: 1;-moz-transform: translateY(0);}100%{opacity: 0;-moz-transform: translateY(-2000px);}}@-o-keyframes fadeOutUpBig{0%{opacity: 1;-o-transform: translateY(0);}100%{opacity: 0;-o-transform: translateY(-2000px);}}@keyframes fadeOutUpBig{0%{opacity: 1;transform: translateY(0);}100%{opacity: 0;transform: translateY(-2000px);}}.fadeOutUpBig{-webkit-animation-name: fadeOutUpBig;-moz-animation-name: fadeOutUpBig;-o-animation-name: fadeOutUpBig;animation-name: fadeOutUpBig;}@-webkit-keyframes fadeOutDownBig{0%{opacity: 1;-webkit-transform: translateY(0);}100%{opacity: 0;-webkit-transform: translateY(2000px);}}@-moz-keyframes fadeOutDownBig{0%{opacity: 1;-moz-transform: translateY(0);}100%{opacity: 0;-moz-transform: translateY(2000px);}}@-o-keyframes fadeOutDownBig{0%{opacity: 1;-o-transform: translateY(0);}100%{opacity: 0;-o-transform: translateY(2000px);}}@keyframes fadeOutDownBig{0%{opacity: 1;transform: translateY(0);}100%{opacity: 0;transform: translateY(2000px);}}.fadeOutDownBig{-webkit-animation-name: fadeOutDownBig;-moz-animation-name: fadeOutDownBig;-o-animation-name: fadeOutDownBig;animation-name: fadeOutDownBig;}@-webkit-keyframes fadeOutLeftBig{0%{opacity: 1;-webkit-transform: translateX(0);}100%{opacity: 0;-webkit-transform: translateX(-2000px);}}@-moz-keyframes fadeOutLeftBig{0%{opacity: 1;-moz-transform: translateX(0);}100%{opacity: 0;-moz-transform: translateX(-2000px);}}@-o-keyframes fadeOutLeftBig{0%{opacity: 1;-o-transform: translateX(0);}100%{opacity: 0;-o-transform: translateX(-2000px);}}@keyframes fadeOutLeftBig{0%{opacity: 1;transform: translateX(0);}100%{opacity: 0;transform: translateX(-2000px);}}.fadeOutLeftBig{-webkit-animation-name: fadeOutLeftBig;-moz-animation-name: fadeOutLeftBig;-o-animation-name: fadeOutLeftBig;animation-name: fadeOutLeftBig;}@-webkit-keyframes fadeOutRightBig{0%{opacity: 1;-webkit-transform: translateX(0);}100%{opacity: 0;-webkit-transform: translateX(2000px);}}@-moz-keyframes fadeOutRightBig{0%{opacity: 1;-moz-transform: translateX(0);}100%{opacity: 0;-moz-transform: translateX(2000px);}}@-o-keyframes fadeOutRightBig{0%{opacity: 1;-o-transform: translateX(0);}100%{opacity: 0;-o-transform: translateX(2000px);}}@keyframes fadeOutRightBig{0%{opacity: 1;transform: translateX(0);}100%{opacity: 0;transform: translateX(2000px);}}.fadeOutRightBig{-webkit-animation-name: fadeOutRightBig;-moz-animation-name: fadeOutRightBig;-o-animation-name: fadeOutRightBig;animation-name: fadeOutRightBig;}@-webkit-keyframes slideInDown{0%{opacity: 0;-webkit-transform: translateY(-2000px);}100%{-webkit-transform: translateY(0);}}@-moz-keyframes slideInDown{0%{opacity: 0;-moz-transform: translateY(-2000px);}100%{-moz-transform: translateY(0);}}@-o-keyframes slideInDown{0%{opacity: 0;-o-transform: translateY(-2000px);}100%{-o-transform: translateY(0);}}@keyframes slideInDown{0%{opacity: 0;transform: translateY(-2000px);}100%{transform: translateY(0);}}.slideInDown{-webkit-animation-name: slideInDown;-moz-animation-name: slideInDown;-o-animation-name: slideInDown;animation-name: slideInDown;}@-webkit-keyframes slideInLeft{0%{opacity: 0;-webkit-transform: translateX(-100%);}100%{-webkit-transform: translateX(0);}}@-moz-keyframes slideInLeft{0%{opacity: 0;-moz-transform: translateX(-100%);}100%{-moz-transform: translateX(0);}}@-o-keyframes slideInLeft{0%{opacity: 0;-o-transform: translateX(-100%);}100%{-o-transform: translateX(0);}}@keyframes slideInLeft{0%{opacity: 0;transform: translateX(-100%);}100%{transform: translateX(0);}}.slideInLeft{-webkit-animation-name: slideInLeft;-moz-animation-name: slideInLeft;-o-animation-name: slideInLeft;animation-name: slideInLeft;}@-webkit-keyframes slideInRight{0%{opacity: 0;-webkit-transform: translateX(100%);}100%{-webkit-transform: translateX(0);}}@-moz-keyframes slideInRight{0%{opacity: 0;-moz-transform: translateX(100%);}100%{-moz-transform: translateX(0);}}@-o-keyframes slideInRight{0%{opacity: 0;-o-transform: translateX(100%);}100%{-o-transform: translateX(0);}}@keyframes slideInRight{0%{opacity: 0;transform: translateX(100%);}100%{transform: translateX(0);}}.slideInRight{-webkit-animation-name: slideInRight;-moz-animation-name: slideInRight;-o-animation-name: slideInRight;animation-name: slideInRight;}@-webkit-keyframes slideOutUp{0%{-webkit-transform: translateY(0);}100%{opacity: 0;-webkit-transform: translateY(-2000px);}}@-moz-keyframes slideOutUp{0%{-moz-transform: translateY(0);}100%{opacity: 0;-moz-transform: translateY(-2000px);}}@-o-keyframes slideOutUp{0%{-o-transform: translateY(0);}100%{opacity: 0;-o-transform: translateY(-2000px);}}@keyframes slideOutUp{0%{transform: translateY(0);}100%{opacity: 0;transform: translateY(-2000px);}}.slideOutUp{-webkit-animation-name: slideOutUp;-moz-animation-name: slideOutUp;-o-animation-name: slideOutUp;animation-name: slideOutUp;}@-webkit-keyframes slideOutLeft{0%{-webkit-transform: translateX(0);}100%{opacity: 0;-webkit-transform: translateX(-2000px);}}@-moz-keyframes slideOutLeft{0%{-moz-transform: translateX(0);}100%{opacity: 0;-moz-transform: translateX(-2000px);}}@-o-keyframes slideOutLeft{0%{-o-transform: translateX(0);}100%{opacity: 0;-o-transform: translateX(-2000px);}}@keyframes slideOutLeft{0%{transform: translateX(0);}100%{opacity: 0;transform: translateX(-2000px);}}.slideOutLeft{-webkit-animation-name: slideOutLeft;-moz-animation-name: slideOutLeft;-o-animation-name: slideOutLeft;animation-name: slideOutLeft;}@-webkit-keyframes slideOutRight{0%{-webkit-transform: translateX(0);}100%{opacity: 0;-webkit-transform: translateX(2000px);}}@-moz-keyframes slideOutRight{0%{-moz-transform: translateX(0);}100%{opacity: 0;-moz-transform: translateX(2000px);}}@-o-keyframes slideOutRight{0%{-o-transform: translateX(0);}100%{opacity: 0;-o-transform: translateX(2000px);}}@keyframes slideOutRight{0%{transform: translateX(0);}100%{opacity: 0;transform: translateX(2000px);}}.slideOutRight{-webkit-animation-name: slideOutRight;-moz-animation-name: slideOutRight;-o-animation-name: slideOutRight;animation-name: slideOutRight;}@-webkit-keyframes moveFromLeft{from{-webkit-transform: translateX(-100%);}to{-webkit-transform: translateX(0%);}}@-moz-keyframes moveFromLeft{from{-moz-transform: translateX(-100%);}to{-moz-transform: translateX(0%);}}@-ms-keyframes moveFromLeft{from{-ms-transform: translateX(-100%);}to{-ms-transform: translateX(0%);}}@-o-keyframes moveFromLeft{from{-o-transform: translateX(-100%);}to{-o-transform: translateX(0%);}}@keyframes moveFromLeft{from{transform: translateX(-100%);}to{transform: translateX(0%);}}.moveFromLeft{-webkit-animation: moveFromLeft 400ms ease;-moz-animation: moveFromLeft 400ms ease;-ms-animation: moveFromLeft 400ms ease;-o-animation: moveFromLeft 400ms ease;animation: moveFromLeft 400ms ease;}@-webkit-keyframes moveFromRight{from{-webkit-transform: translateX(100%);}to{-webkit-transform: translateX(0%);}}@-moz-keyframes moveFromRight{from{-moz-transform: translateX(100%);}to{-moz-transform: translateX(0%);}}@-ms-keyframes moveFromRight{from{-ms-transform: translateX(100%);}to{-ms-transform: translateX(0%);}}@-o-keyframes moveFromRight{from{-o-transform: translateX(100%);}to{-o-transform: translateX(0%);}}@keyframes moveFromRight{from{transform: translateX(100%);}to{transform: translateX(0%);}}.moveFromRight{-webkit-animation: moveFromRight 400ms ease;-moz-animation: moveFromRight 400ms ease;-ms-animation: moveFromRight 400ms ease;-o-animation: moveFromRight 400ms ease;animation: moveFromRight 400ms ease;}@-webkit-keyframes moveFromBottom{from{-webkit-transform: translateY(100%);}to{-webkit-transform: translateY(0%);}}@-moz-keyframes moveFromBottom{from{-moz-transform: translateY(100%);}to{-moz-transform: translateY(0%);}}@-ms-keyframes moveFromBottom{from{-ms-transform: translateY(100%);}to{-ms-transform: translateY(0%);}}@-o-keyframes moveFromBottom{from{-o-transform: translateY(100%);}to{-o-transform: translateY(0%);}}@keyframes moveFromBottom{from{transform: translateY(100%);}to{transform: translateY(0%);}}.moveFromBottom{-webkit-animation: moveFromBottom 400ms ease;-moz-animation: moveFromBottom 400ms ease;-ms-animation: moveFromBottom 400ms ease;-o-animation: moveFromBottom 400ms ease;animation: moveFromBottom 400ms ease;}@-webkit-keyframes scaleDisappear{0%{opacity: 1;-webkit-transform: scale(1);}60%{opacity: 0;-webkit-transform: scale(1.3);}100%{opacity: 1;-webkit-transform: scale(1);}}@-moz-keyframes scaleDisappear{0%{opacity: 1;-moz-transform: scale(1);}60%{opacity: 0;-moz-transform: scale(1.3);}100%{opacity: 1;-moz-transform: scale(1);}}@-ms-keyframes scaleDisappear{0%{opacity: 1;-ms-transform: scale(1);}60%{opacity: 0;-ms-transform: scale(1.3);}100%{opacity: 1;-ms-transform: scale(1);}}@-o-keyframes scaleDisappear{0%{opacity: 1;-o-transform: scale(1);}60%{opacity: 0;-o-transform: scale(1.3);}100%{opacity: 1;-o-transform: scale(1);}}@keyframes scaleDisappear{0%{opacity: 1;transform: scale(1);}60%{opacity: 0;transform: scale(1.3);}100%{opacity: 1;transform: scale(1);}}.scaleDisappear{-webkit-animation: scaleDisappear 350ms ease-in-out;-moz-animation: scaleDisappear 350ms ease-in-out;-ms-animation: scaleDisappear 350ms ease-in-out;-o-animation: scaleDisappear 350ms ease-in-out;animation: scaleDisappear 350ms ease-in-out;}@-webkit-keyframes scaleAppear{0%{opacity: 0;-webkit-transform: scale(0);}100%{opacity: 1;-webkit-transform: scale(1);}}@-moz-keyframes scaleAppear{0%{opacity: 0;-moz-transform: scale(0);}100%{opacity: 1;-moz-transform: scale(1);}}@-ms-keyframes scaleAppear{0%{opacity: 0;-ms-transform: scale(0);}100%{opacity: 1;-ms-transform: scale(1);}}@-o-keyframes scaleAppear{0%{opacity: 0;-o-transform: scale(0);}100%{opacity: 1;-o-transform: scale(1);}}@keyframes scaleAppear{0%{opacity: 0;transform: scale(0);}100%{opacity: 1;transform: scale(1);}}.scaleAppear{-webkit-animation: scaleAppear 750ms ease;-moz-animation: scaleAppear 750ms ease;-ms-animation: scaleAppear 750ms ease;-o-animation: scaleAppear 750ms ease;animation: scaleAppear 750ms ease;}/*Animation example, for spinners*/.animate-spin{-moz-animation: spin 2s infinite linear;-o-animation: spin 2s infinite linear;-webkit-animation: spin 2s infinite linear;animation: spin 2s infinite linear;display: inline-block;}@-moz-keyframes spin{0%{-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-moz-transform: rotate(359deg);-o-transform: rotate(359deg);-webkit-transform: rotate(359deg);transform: rotate(359deg);}}@-webkit-keyframes spin{0%{-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-moz-transform: rotate(359deg);-o-transform: rotate(359deg);-webkit-transform: rotate(359deg);transform: rotate(359deg);}}@-o-keyframes spin{0%{-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-moz-transform: rotate(359deg);-o-transform: rotate(359deg);-webkit-transform: rotate(359deg);transform: rotate(359deg);}}@-ms-keyframes spin{0%{-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-moz-transform: rotate(359deg);-o-transform: rotate(359deg);-webkit-transform: rotate(359deg);transform: rotate(359deg);}}@keyframes spin{0%{-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-moz-transform: rotate(359deg);-o-transform: rotate(359deg);-webkit-transform: rotate(359deg);transform: rotate(359deg);}}