Удивительный ротатор текста для Блоггер, Блогспот


Давненько "лежал" у меня в блокноте удивительный скрипт - ротатор текста. И вот появилась свободная минута и я публикую его для вас!


Полюбуйтесь работой скрипта!
Демо по ссылке
▼ ▼ ▼
http://blogodeltest2.blogspot.ru/2014/03/blog-post.html

Устанавливается скрипт, как всегда очень просто: В Дизайн - Добавить гаджет - HTML/JavaScript или в HTML редактор сообщения


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script><link href="https://googledrive.com/host/0B0WJjcJEFNziaGlLbi04Uk00b3c" rel="stylesheet"></link> <script src="https://googledrive.com/host/0B0WJjcJEFNzid180dVRuai1WQ1U" type="text/javascript"></script> <script>
 jQuery(document).ready(function($) {
  $('#words').quoteRotator();
 });
 </script> <!-- Quote Rotator -->   <div id="words"> <ul class="word-container"> <li data-author="---  Не известный автор" data-easeout="lightSpeedOut">Однaжды мужчинa спросил у Богa:«Почeму всe дeвушки милыe, лaсковыe, нeжныe, a жeнщины грубые?». И получил в отвeт:«Дeвушeк создaю я, a жeнщин из них дeлaeтe вы!....</li> <li data-author="---  Ф. Достоевский">Никто не сделает первый шаг, потому что каждый думает, что это не взаимно.</li> <li data-author="---  Народная" data-easeout="fadeOutDown">Мир настолько испортился, что когда перед тобой чистый искренний человек, который хочет быть рядом, ты ищешь в этом подвох.</li> <li data-author="---  Тоже народная" data-easein="fadeInDown">Муж назвал жену курицей... Она не стала огорчаться, просто снесла ему два яйца...с разбегу.</li> <li data-author="---  Bill Gates (Microsoft)" data-easeout="bounceOut">Это прекрасно, чтобы отпраздновать успех, но это более важно прислушаться к урокам недостаточности.</li> <li data-author="---  Ченнинг Татум" data-easein="bounceIn">Главное в жизни — это семья. Карьера — не ждет тебя дома, деньги — не вытрут слезы, а слава — не обнимет ночью. </li> <li data-author="---  Народная" data-easein="lightSpeedIn">Я прошу, я Господа молю... Мне подарков, почестей не надо. Только пусть живут, кого люблю... И всегда со мною будут рядом!.</li> </ul> <div class="quote"> <div class="quote-content"> </div> <cite class="quote-author"></cite> </div> </div> </div>

Красная маркировка это текст цитаты, желтый фон - автор.


.quote {
padding-right: 0;
font-size: 1.8em;
}

.quote-author {
margin-top: 0px!important;
}

 cite,
 li {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}


.word-container{
 display: none;
}
/*.text-block{
 display: inline-block;
 padding: 2px;
 font-size: 24px;
}
*/
.quote{
 display: block;
 width: 100%;
 margin: 0;
 margin-top: 120px;
 font-size: 23px!important;
 text-align: center;
 line-height: 35px;
 font-family: "Lucida Grande", "Lucida Sans Unicode", helvetica, verdana, arial, sans-serif;
}

cite {
 margin-top: 14px;
 margin-right: 48px;
 font-size: 15px;
  float: right;
}

.quote-content span, .quote-author span{
 display: inline-block;
}


.animate0{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 0s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 0s;
 -moz-animation-timing-function: ease;
 -moz-animation-fill-mode: both;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 0s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 0s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}

.animate1{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: .2s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: .2s;
 -moz-animation-timing-function: ease;
 -moz-animation-fill-mode: both;
 -ms-animation-duration: .5s;
 -ms-animation-delay: .2s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: .2s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}

.animate2{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: .4s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: .4s;
 -moz-animation-timing-function: ease;
 -moz-animation-fill-mode: both;
 -ms-animation-duration: .5s;
 -ms-animation-delay: .4s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: .4s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}

.animate3{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: .6s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: .6s;
 -moz-animation-timing-function: ease;
 -moz-animation-fill-mode: both;
 -ms-animation-duration: .5s;
 -ms-animation-delay: .6s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: .6s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}

.animate4{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: .8s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: .8s;
 -moz-animation-timing-function: ease;
 -moz-animation-fill-mode: both;
 -ms-animation-duration: .5s;
 -ms-animation-delay: .8s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: .8s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}

.animate5{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 1s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 1s;
 -moz-animation-timing-function: ease;
 -moz-animation-fill-mode: both;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 1s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 1s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate6{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 1.2s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 1.2s;
 -moz-animation-timing-function: ease;
 -moz-animation-fill-mode: both;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 1.2s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 1.2s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate7{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 1.4s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 1.4s;
 -moz-animation-timing-function: ease;
 -moz-animation-fill-mode: both;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 1.4s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 1.4s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate8{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 1.6s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 1.6s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 1.6s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 1.6s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate9{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 1.8s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 1.8s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 1.8s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 1.8s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}

.animate10{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 2s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 2s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 2s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 2s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate11{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 2.2s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 2.2s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 2.2s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 2.2s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate12{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 2.4s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 2.4s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 2.4s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 2.4s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}

.animate13{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 2.6s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 2.6s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 2.6s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 2.6s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}

.animate14{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 2.8s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 2.8s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 2.8s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 2.8s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}


.animate15{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 3s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 3s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 3s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 3s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate16{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 3.2s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 3.2s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 3.2s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 3.2s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate17{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 3.4s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 3.4s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 3.4s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 3.4s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate18{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 3.6s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 3.6s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 3.6s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 3.6s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate19{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 3.8s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 3.8s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 3.8s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 3.8s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate20{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 4s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 4s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 4s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 4s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate21{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 4.2s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 4.2s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 4.2s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 4.2s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate22{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 4.4s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 4.4s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 4.4s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 4.4s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate23{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 4.6s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 4.6s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 4.6s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 4.6s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate24{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 4.8s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 4.8s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 4.8s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 4.8s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate25{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 5s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 5s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 5s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 5s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate26{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 5.2s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 5.2s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 5.2s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 5.2s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate27{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 5.4s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 5.4s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 5.4s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 5.4s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate28{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 5.6s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 5.6s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 5.6s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 5.6s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate29{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 5.8s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 5.8s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 5.8s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 5.8s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate30{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 6s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 6s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 6s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 6s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate31{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 6.2s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 6.2s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 6.2s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 6.2s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate32{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 6.4s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 6.4s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 6.4s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 6.4s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate33{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 6.6s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 6.6s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 6.6s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 6.6s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate34{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 6.8s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 6.8s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 6.8s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 6.8s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}

.animate35{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 7s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 7s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 7s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 7s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate36{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 7.2s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 7.2s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 7.2s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 7.2s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate37{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 7.4s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 7.4s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 7.4s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 7.4s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate38{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 7.6s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 7.6s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 7.6s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 7.6s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate39{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 7.8s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 7.8s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 7.8s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 7.8s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate40{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 8s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 8s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 8s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 8s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate41{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 8.2s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 8.2s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 8.2s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 8.2s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate42{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 8.4s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 8.4s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 8.4s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 8.4s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate43{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 8.6s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 8.6s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 8.6s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 8.6s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate44{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 8.8s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 8.8s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 8.8s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 8.8s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
.animate45{
    -webkit-animation-duration: .5s;
 -webkit-animation-delay: 9s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
 -moz-animation-duration: .5s;
 -moz-animation-delay: 9s;
 -moz-animation-timing-function: ease;
 -ms-animation-duration: .5s;
 -ms-animation-delay: 9s;
 -ms-animation-timing-function: ease;
 -ms-animation-fill-mode: both;
 animation-duration: .5s;
 animation-delay: 9s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}



@charset "UTF-8";
/*
Animate.css - http://daneden.me/animate
Licensed under the ? license (http://licence.visualidiot.com/)

Copyright (c) 2012 Dan 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;
    -moz-animation-duration: 1s;
      -o-animation-duration: 1s;
         animation-duration: 1s;
 -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
      -o-animation-fill-mode: both;
         animation-fill-mode: both;
}

.animated.hinge {
 -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
      -o-animation-duration: 2s;
         animation-duration: 2s;
}

.quick {
 -webkit-animation-duration: 0.4s;
    -moz-animation-duration: 0.4s;
      -o-animation-duration: 0.4s;
         animation-duration: 0.4s;
 /*-webkit-animation-delay: .3s;
 -moz-animation-delay: .3s;
 -o-animation-delay: .3s;
 animation-delay: .3s;*/
}


@-webkit-keyframes flash {
 0%, 50%, 100% {opacity: 1;}
 25%, 75% {opacity: 0;}
}

@-moz-keyframes flash {
 0%, 50%, 100% {opacity: 1;}
 25%, 75% {opacity: 0;}
}

@-o-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;
 -moz-animation-name: flash;
 -o-animation-name: flash;
 animation-name: flash;
}
@-webkit-keyframes shake {
 0% {-webkit-transform: translateX(0);}
 100% {-webkit-transform: translateX(0); opacity: 1;}
 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}

@-moz-keyframes shake {
 0% {-moz-transform: translateX(0);}
 100% {-moz-transform: translateX(0); opacity: 1;}
 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

@-o-keyframes shake {
 0% {-o-transform: translateX(0);}
 100% {-o-transform: translateX(0); opacity: 1;}
 10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
 20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}

@keyframes shake {
 0% {transform: translateX(0);}
 100% {transform: translateX(0); opacity: 1;}
 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
 20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.shake {
 -webkit-animation-name: shake;
 -moz-animation-name: shake;
 -o-animation-name: shake;
 animation-name: shake;
}
@-webkit-keyframes bounce {
 0%, 20%, 50%, 80% {-webkit-transform: translateY(0);}
 100% {-webkit-transform: translateY(0); opacity: 1;}
 40% {-webkit-transform: translateY(-30px);}
 60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounce {
 0%, 20%, 50%, 80% {-moz-transform: translateY(0);}
 100% {-moz-transform: translateY(0); opacity: 1;}
 40% {-moz-transform: translateY(-30px);}
 60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes bounce {
 0%, 20%, 50%, 80% {-o-transform: translateY(0);}
 100% {-o-transform: translateY(0); opacity: 1;}
 40% {-o-transform: translateY(-30px);}
 60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
 0%, 20%, 50%, 80% {transform: translateY(0);}
 100% {transform: translateY(0); opacity: 1;}
 40% {transform: translateY(-30px);}
 60% {transform: translateY(-15px);}
}

.bounce {
 -webkit-animation-name: bounce;
 -moz-animation-name: bounce;
 -o-animation-name: bounce;
 animation-name: bounce;
}
@-webkit-keyframes tada {
 0% {-webkit-transform: scale(1);}
 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
 100% {-webkit-transform: scale(1) rotate(0); opacity: 1;}
}

@-moz-keyframes tada {
 0% {-moz-transform: scale(1);}
 10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
 30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
 40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
 100% {-moz-transform: scale(1) rotate(0); opacity: 1;}
}

@-o-keyframes tada {
 0% {-o-transform: scale(1);}
 10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
 30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
 40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
 100% {-o-transform: scale(1) rotate(0); opacity: 1;}
}

@keyframes tada {
 0% {transform: scale(1);}
 10%, 20% {transform: scale(0.9) rotate(-3deg);}
 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
 100% {transform: scale(1) rotate(0); opacity: 1;}
}

.tada {
 -webkit-animation-name: tada;
 -moz-animation-name: tada;
 -o-animation-name: tada;
 animation-name: tada;
}
@-webkit-keyframes swing {
 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
 20% { -webkit-transform: rotate(15deg); }
 40% { -webkit-transform: rotate(-10deg); }
 60% { -webkit-transform: rotate(5deg); }
 80% { -webkit-transform: rotate(-5deg); }
 100% { -webkit-transform: rotate(0deg); opacity: 1;}
}

@-moz-keyframes swing {
 20% { -moz-transform: rotate(15deg); }
 40% { -moz-transform: rotate(-10deg); }
 60% { -moz-transform: rotate(5deg); }
 80% { -moz-transform: rotate(-5deg); }
 100% { -moz-transform: rotate(0deg); opacity: 1;}
}

@-o-keyframes swing {
 20% { -o-transform: rotate(15deg); }
 40% { -o-transform: rotate(-10deg); }
 60% { -o-transform: rotate(5deg); }
 80% { -o-transform: rotate(-5deg); }
 100% { -o-transform: rotate(0deg); opacity: 1;}
}

@keyframes swing {
 20% { transform: rotate(15deg); }
 40% { transform: rotate(-10deg); }
 60% { transform: rotate(5deg); }
 80% { transform: rotate(-5deg); }
 100% { transform: rotate(0deg); opacity: 1;}
}

.swing {
 -webkit-transform-origin: top center;
 -moz-transform-origin: top center;
 -o-transform-origin: top center;
 transform-origin: top center;
 -webkit-animation-name: swing;
 -moz-animation-name: swing;
 -o-animation-name: swing;
 animation-name: swing;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  0% { -webkit-transform: translateX(0%); }
  15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
  30% { -webkit-transform: translateX(20%) rotate(3deg); }
  45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
  60% { -webkit-transform: translateX(10%) rotate(2deg); }
  75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
  100% { -webkit-transform: translateX(0%); opacity: 1;}
}

@-moz-keyframes wobble {
  0% { -moz-transform: translateX(0%); }
  15% { -moz-transform: translateX(-25%) rotate(-5deg); }
  30% { -moz-transform: translateX(20%) rotate(3deg); }
  45% { -moz-transform: translateX(-15%) rotate(-3deg); }
  60% { -moz-transform: translateX(10%) rotate(2deg); }
  75% { -moz-transform: translateX(-5%) rotate(-1deg); }
  100% { -moz-transform: translateX(0%); opacity: 1;}
}

@-o-keyframes wobble {
  0% { -o-transform: translateX(0%); }
  15% { -o-transform: translateX(-25%) rotate(-5deg); }
  30% { -o-transform: translateX(20%) rotate(3deg); }
  45% { -o-transform: translateX(-15%) rotate(-3deg); }
  60% { -o-transform: translateX(10%) rotate(2deg); }
  75% { -o-transform: translateX(-5%) rotate(-1deg); }
  100% { -o-transform: translateX(0%); opacity: 1;}
}

@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); opacity: 1;}
}

.wobble {
 -webkit-animation-name: wobble;
 -moz-animation-name: wobble;
 -o-animation-name: wobble;
 animation-name: wobble;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
    0% { -webkit-transform: scale(1); }
 50% { -webkit-transform: scale(1.1); }
    100% { -webkit-transform: scale(1); opacity: 1;}
}
@-moz-keyframes pulse {
    0% { -moz-transform: scale(1); }
 50% { -moz-transform: scale(1.1); }
    100% { -moz-transform: scale(1); opacity: 1;}
}
@-o-keyframes pulse {
    0% { -o-transform: scale(1); }
 50% { -o-transform: scale(1.1); }
    100% { -o-transform: scale(1); opacity: 1;}
}
@keyframes pulse {
    0% { transform: scale(1); }
 50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1;}
}

.pulse {
 -webkit-animation-name: pulse;
 -moz-animation-name: pulse;
 -o-animation-name: pulse;
 animation-name: pulse;
}
@-webkit-keyframes flip {
 0% {
  -webkit-transform: perspective(400px) rotateY(0);
  -webkit-animation-timing-function: ease-out;
 }
 40% {
  -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
  -webkit-animation-timing-function: ease-out;
 }
 50% {
  -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
  -webkit-animation-timing-function: ease-in;
 }
 80% {
  -webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
  -webkit-animation-timing-function: ease-in;
 }
 100% {
  -webkit-transform: perspective(400px) scale(1);
  -webkit-animation-timing-function: ease-in;
  opacity: 1;
 }
}
@-moz-keyframes flip {
 0% {
  -moz-transform: perspective(400px) rotateY(0);
  -moz-animation-timing-function: ease-out;
 }
 40% {
  -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);
  -moz-animation-timing-function: ease-out;
 }
 50% {
  -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
  -moz-animation-timing-function: ease-in;
 }
 80% {
  -moz-transform: perspective(400px) rotateY(360deg) scale(.95);
  -moz-animation-timing-function: ease-in;
 }
 100% {
  -moz-transform: perspective(400px) scale(1);
  -moz-animation-timing-function: ease-in;
  opacity: 1;
 }
}
@-o-keyframes flip {
 0% {
  -o-transform: perspective(400px) rotateY(0);
  -o-animation-timing-function: ease-out;
 }
 40% {
  -o-transform: perspective(400px) translateZ(150px) rotateY(170deg);
  -o-animation-timing-function: ease-out;
 }
 50% {
  -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
  -o-animation-timing-function: ease-in;
 }
 80% {
  -o-transform: perspective(400px) rotateY(360deg) scale(.95);
  -o-animation-timing-function: ease-in;
 }
 100% {
  -o-transform: perspective(400px) scale(1);
  -o-animation-timing-function: ease-in;
  opacity: 1;
 }
}
@keyframes flip {
 0% {
  transform: perspective(400px) rotateY(0);
  animation-timing-function: ease-out;
 }
 40% {
  transform: perspective(400px) translateZ(150px) rotateY(170deg);
  animation-timing-function: ease-out;
 }
 50% {
  transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
  animation-timing-function: ease-in;
 }
 80% {
  transform: perspective(400px) rotateY(360deg) scale(.95);
  animation-timing-function: ease-in;
 }
 100% {
  transform: perspective(400px) scale(1);
  animation-timing-function: ease-in;
  opacity: 1;
 }
}

.flip {
 -webkit-backface-visibility: visible !important;
 -webkit-animation-name: flip;
 -moz-backface-visibility: visible !important;
 -moz-animation-name: flip;
 -o-backface-visibility: visible !important;
 -o-animation-name: flip;
 backface-visibility: visible !important;
 animation-name: flip;
}
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
 -webkit-backface-visibility: visible !important;
 -webkit-animation-name: flipInX;
 -moz-backface-visibility: visible !important;
 -moz-animation-name: flipInX;
 -o-backface-visibility: visible !important;
 -o-animation-name: flipInX;
 backface-visibility: visible !important;
 animation-name: flipInX;
}
@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
 100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@-moz-keyframes flipOutX {
    0% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
 100% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@-o-keyframes flipOutX {
    0% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
 100% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@keyframes flipOutX {
    0% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
 100% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

.flipOutX {
 -webkit-animation-name: flipOutX;
 -webkit-backface-visibility: visible !important;
 -moz-animation-name: flipOutX;
 -moz-backface-visibility: visible !important;
 -o-animation-name: flipOutX;
 -o-backface-visibility: visible !important;
 animation-name: flipOutX;
 backface-visibility: visible !important;
}
@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInY {
    0% {
        -moz-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        -moz-transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        -moz-transform: perspective(400px) rotateY(10deg);
    }

    100% {
        -moz-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInY {
    0% {
        -o-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        -o-transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        -o-transform: perspective(400px) rotateY(10deg);
    }

    100% {
        -o-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        transform: perspective(400px) rotateY(10deg);
    }

    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

.flipInY {
 -webkit-backface-visibility: visible !important;
 -webkit-animation-name: flipInY;
 -moz-backface-visibility: visible !important;
 -moz-animation-name: flipInY;
 -o-backface-visibility: visible !important;
 -o-animation-name: flipInY;
 backface-visibility: visible !important;
 animation-name: flipInY;
}
@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
 100% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}
@-moz-keyframes flipOutY {
    0% {
        -moz-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
 100% {
        -moz-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}
@-o-keyframes flipOutY {
    0% {
        -o-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
 100% {
        -o-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}
@keyframes flipOutY {
    0% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
 100% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}

.flipOutY {
 -webkit-backface-visibility: visible !important;
 -webkit-animation-name: flipOutY;
 -moz-backface-visibility: visible !important;
 -moz-animation-name: flipOutY;
 -o-backface-visibility: visible !important;
 -o-animation-name: flipOutY;
 backface-visibility: visible !important;
 animation-name: flipOutY;
}
@-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 bounceIn {
 0% {
  opacity: 0;
  -webkit-transform: scale(.3);
 }

 50% {
  opacity: 1;
  -webkit-transform: scale(1.05);
 }

 70% {
  -webkit-transform: scale(.9);
 }

 100% {
  opacity: 1;
  -webkit-transform: scale(1);
 }
}

@-moz-keyframes bounceIn {
 0% {
  opacity: 0;
  -moz-transform: scale(.3);
 }

 50% {
  opacity: 1;
  -moz-transform: scale(1.05);
 }

 70% {
  -moz-transform: scale(.9);
 }

 100% {
  opacity: 1;
  -moz-transform: scale(1);
 }
}

@-o-keyframes bounceIn {
 0% {
  opacity: 0;
  -o-transform: scale(.3);
 }

 50% {
  opacity: 1;
  -o-transform: scale(1.05);
 }

 70% {
  -o-transform: scale(.9);
 }

 100% {
  opacity: 1;
  -o-transform: scale(1);
 }
}

@keyframes bounceIn {
 0% {
  opacity: 0;
  transform: scale(.3);
 }

 50% {
  opacity: 1;
  transform: scale(1.05);
 }

 70% {
  transform: scale(.9);
 }

 100% {
  opacity: 1;
  transform: scale(1);
 }
}

.bounceIn {
 -webkit-animation-name: bounceIn;
 -moz-animation-name: bounceIn;
 -o-animation-name: bounceIn;
 animation-name: bounceIn;
}
@-webkit-keyframes bounceInUp {
 0% {
  opacity: 0;
  -webkit-transform: translateY(2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateY(-30px);
 }

 80% {
  -webkit-transform: translateY(10px);
 }

 100% {
  -webkit-transform: translateY(0);
 }
}
@-moz-keyframes bounceInUp {
 0% {
  opacity: 0;
  -moz-transform: translateY(2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateY(-30px);
 }

 80% {
  -moz-transform: translateY(10px);
 }

 100% {
  -moz-transform: translateY(0);
 }
}

@-o-keyframes bounceInUp {
 0% {
  opacity: 0;
  -o-transform: translateY(2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateY(-30px);
 }

 80% {
  -o-transform: translateY(10px);
 }

 100% {
  -o-transform: translateY(0);
 }
}

@keyframes bounceInUp {
 0% {
  opacity: 0;
  transform: translateY(2000px);
 }

 60% {
  opacity: 1;
  transform: translateY(-30px);
 }

 80% {
  transform: translateY(10px);
 }

 100% {
  transform: translateY(0);
 }
}

.bounceInUp {
 -webkit-animation-name: bounceInUp;
 -moz-animation-name: bounceInUp;
 -o-animation-name: bounceInUp;
 animation-name: bounceInUp;
}
@-webkit-keyframes bounceInDown {
 0% {
  opacity: 0;
  -webkit-transform: translateY(-2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateY(30px);
 }

 80% {
  -webkit-transform: translateY(-10px);
 }

 100% {
  -webkit-transform: translateY(0);
 }
}

@-moz-keyframes bounceInDown {
 0% {
  opacity: 0;
  -moz-transform: translateY(-2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateY(30px);
 }

 80% {
  -moz-transform: translateY(-10px);
 }

 100% {
  -moz-transform: translateY(0);
 }
}

@-o-keyframes bounceInDown {
 0% {
  opacity: 0;
  -o-transform: translateY(-2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateY(30px);
 }

 80% {
  -o-transform: translateY(-10px);
 }

 100% {
  -o-transform: translateY(0);
 }
}

@keyframes bounceInDown {
 0% {
  opacity: 0;
  transform: translateY(-2000px);
 }

 60% {
  opacity: 1;
  transform: translateY(30px);
 }

 80% {
  transform: translateY(-10px);
 }

 100% {
  transform: translateY(0);
 }
}

.bounceInDown {
 -webkit-animation-name: bounceInDown;
 -moz-animation-name: bounceInDown;
 -o-animation-name: bounceInDown;
 animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
 0% {
  opacity: 0;
  -webkit-transform: translateX(-2000px);
 }

 60% {
  -webkit-transform: translateX(30px);
 }

 80% {
  -webkit-transform: translateX(-10px);
 }

 100% {
  opacity: 1;
  -webkit-transform: translateX(0);
 }
}

@-moz-keyframes bounceInLeft {
 0% {
  opacity: 0;
  -moz-transform: translateX(-2000px);
 }

 60% {
  -moz-transform: translateX(30px);
 }

 80% {
  -moz-transform: translateX(-10px);
 }

 100% {
  opacity: 1;
  -moz-transform: translateX(0);
 }
}

@-o-keyframes bounceInLeft {
 0% {
  opacity: 0;
  -o-transform: translateX(-2000px);
 }

 60% {
  -o-transform: translateX(30px);
 }

 80% {
  -o-transform: translateX(-10px);
 }

 100% {
  opacity: 1;
  -o-transform: translateX(0);
 }
}

@keyframes bounceInLeft {
 0% {
  opacity: 0;
  transform: translateX(-2000px);
 }

 60% {
  transform: translateX(30px);
 }

 80% {
  transform: translateX(-10px);
 }

 100% {
  opacity: 1;
  transform: translateX(0);
 }
}

.bounceInLeft {
 -webkit-animation-name: bounceInLeft;
 -moz-animation-name: bounceInLeft;
 -o-animation-name: bounceInLeft;
 animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
 0% {
  opacity: 0;
  -webkit-transform: translateX(2000px);
 }

 60% {
  -webkit-transform: translateX(-30px);
 }

 80% {
  -webkit-transform: translateX(10px);
 }

 100% {
  opacity: 1;
  -webkit-transform: translateX(0);
 }
}

@-moz-keyframes bounceInRight {
 0% {
  opacity: 0;
  -moz-transform: translateX(2000px);
 }

 60% {
  -moz-transform: translateX(-30px);
 }

 80% {
  -moz-transform: translateX(10px);
 }

 100% {
  opacity: 1;
  -moz-transform: translateX(0);
 }
}

@-o-keyframes bounceInRight {
 0% {
  opacity: 0;
  -o-transform: translateX(2000px);
 }

 60% {
  -o-transform: translateX(-30px);
 }

 80% {
  -o-transform: translateX(10px);
 }

 100% {
  opacity: 1;
  -o-transform: translateX(0);
 }
}

@keyframes bounceInRight {
 0% {
  opacity: 0;
  transform: translateX(2000px);
 }

 60% {
  transform: translateX(-30px);
 }

 80% {
  transform: translateX(10px);
 }

 100% {
  opacity: 1;
  transform: translateX(0);
 }
}

.bounceInRight {
 -webkit-animation-name: bounceInRight;
 -moz-animation-name: bounceInRight;
 -o-animation-name: bounceInRight;
 animation-name: bounceInRight;
}
@-webkit-keyframes bounceOut {
 0% {
  opacity: 1;
  -webkit-transform: scale(1);
 }

 25% {
  -webkit-transform: scale(.95);
 }

 50% {
  -webkit-transform: scale(1.1);
 }

 100% {
  opacity: 0;
  -webkit-transform: scale(.3);
 }
}

@-moz-keyframes bounceOut {
 0% {
  opacity: 1;
  -moz-transform: scale(1);
 }

 25% {
  -moz-transform: scale(.95);
 }

 50% {
  -moz-transform: scale(1.1);
 }

 100% {
  opacity: 0;
  -moz-transform: scale(.3);
 }
}

@-o-keyframes bounceOut {
 0% {
  opacity: 1;
  -o-transform: scale(1);
 }

 25% {
  -o-transform: scale(.95);
 }

 50% {
  -o-transform: scale(1.1);
 }

 100% {
  opacity: 0;
  -o-transform: scale(.3);
 }
}

@keyframes bounceOut {
 0% {
  opacity: 1;
  transform: scale(1);
 }

 25% {
  transform: scale(.95);
 }

 50% {
  transform: scale(1.1);
 }

 100% {
  opacity: 0;
  transform: scale(.3);
 }
}

.bounceOut {
 -webkit-animation-name: bounceOut;
 -moz-animation-name: bounceOut;
 -o-animation-name: bounceOut;
 animation-name: bounceOut;
}
@-webkit-keyframes bounceOutUp {
 0% {
  -webkit-transform: translateY(0);
 }

 20% {
  opacity: 1;
  -webkit-transform: translateY(20px);
 }

 100% {
  opacity: 0;
  -webkit-transform: translateY(-2000px);
 }
}

@-moz-keyframes bounceOutUp {
 0% {
  -moz-transform: translateY(0);
 }

 20% {
  opacity: 1;
  -moz-transform: translateY(20px);
 }

 100% {
  opacity: 0;
  -moz-transform: translateY(-2000px);
 }
}

@-o-keyframes bounceOutUp {
 0% {
  -o-transform: translateY(0);
 }

 20% {
  opacity: 1;
  -o-transform: translateY(20px);
 }

 100% {
  opacity: 0;
  -o-transform: translateY(-2000px);
 }
}

@keyframes bounceOutUp {
 0% {
  transform: translateY(0);
 }

 20% {
  opacity: 1;
  transform: translateY(20px);
 }

 100% {
  opacity: 0;
  transform: translateY(-2000px);
 }
}

.bounceOutUp {
 -webkit-animation-name: bounceOutUp;
 -moz-animation-name: bounceOutUp;
 -o-animation-name: bounceOutUp;
 animation-name: bounceOutUp;
}
@-webkit-keyframes bounceOutDown {
 0% {
  -webkit-transform: translateY(0);
 }

 20% {
  opacity: 1;
  -webkit-transform: translateY(-20px);
 }

 100% {
  opacity: 0;
  -webkit-transform: translateY(2000px);
 }
}

@-moz-keyframes bounceOutDown {
 0% {
  -moz-transform: translateY(0);
 }

 20% {
  opacity: 1;
  -moz-transform: translateY(-20px);
 }

 100% {
  opacity: 0;
  -moz-transform: translateY(2000px);
 }
}

@-o-keyframes bounceOutDown {
 0% {
  -o-transform: translateY(0);
 }

 20% {
  opacity: 1;
  -o-transform: translateY(-20px);
 }

 100% {
  opacity: 0;
  -o-transform: translateY(2000px);
 }
}

@keyframes bounceOutDown {
 0% {
  transform: translateY(0);
 }

 20% {
  opacity: 1;
  transform: translateY(-20px);
 }

 100% {
  opacity: 0;
  transform: translateY(2000px);
 }
}

.bounceOutDown {
 -webkit-animation-name: bounceOutDown;
 -moz-animation-name: bounceOutDown;
 -o-animation-name: bounceOutDown;
 animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
 0% {
  -webkit-transform: translateX(0);
 }

 20% {
  opacity: 1;
  -webkit-transform: translateX(20px);
 }

 100% {
  opacity: 0;
  -webkit-transform: translateX(-2000px);
 }
}

@-moz-keyframes bounceOutLeft {
 0% {
  -moz-transform: translateX(0);
 }

 20% {
  opacity: 1;
  -moz-transform: translateX(20px);
 }

 100% {
  opacity: 0;
  -moz-transform: translateX(-2000px);
 }
}

@-o-keyframes bounceOutLeft {
 0% {
  -o-transform: translateX(0);
 }

 20% {
  opacity: 1;
  -o-transform: translateX(20px);
 }

 100% {
  opacity: 0;
  -o-transform: translateX(-2000px);
 }
}

@keyframes bounceOutLeft {
 0% {
  transform: translateX(0);
 }

 20% {
  opacity: 1;
  transform: translateX(20px);
 }

 100% {
  opacity: 0;
  transform: translateX(-2000px);
 }
}

.bounceOutLeft {
 -webkit-animation-name: bounceOutLeft;
 -moz-animation-name: bounceOutLeft;
 -o-animation-name: bounceOutLeft;
 animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
 0% {
  opacity: 1;
  -webkit-transform: translateX(0);
 }

 20% {
  -webkit-transform: translateX(-20px);
 }

 100% {
  opacity: 0;
  -webkit-transform: translateX(2000px);
 }
}

@-moz-keyframes bounceOutRight {
 0% {
  opacity: 1;
  -moz-transform: translateX(0);
 }

 20% {
  -moz-transform: translateX(-20px);
 }

 100% {
  opacity: 0;
  -moz-transform: translateX(2000px);
 }
}

@-o-keyframes bounceOutRight {
 0% {
  opacity: 1;
  -o-transform: translateX(0);
 }

 20% {
  -o-transform: translateX(-20px);
 }

 100% {
  opacity: 0;
  -o-transform: translateX(2000px);
 }
}

@keyframes bounceOutRight {
 0% {
  opacity: 1;
  transform: translateX(0);
 }

 20% {
  transform: translateX(-20px);
 }

 100% {
  opacity: 0;
  transform: translateX(2000px);
 }
}

.bounceOutRight {
 -webkit-animation-name: bounceOutRight;
 -moz-animation-name: bounceOutRight;
 -o-animation-name: bounceOutRight;
 animation-name: bounceOutRight;
}
@-webkit-keyframes rotateIn {
 0% {
  -webkit-transform-origin: center center;
  -webkit-transform: rotate(-200deg);
  opacity: 0;
 }

 100% {
  -webkit-transform-origin: center center;
  -webkit-transform: rotate(0);
  opacity: 1;
 }
}
@-moz-keyframes rotateIn {
 0% {
  -moz-transform-origin: center center;
  -moz-transform: rotate(-200deg);
  opacity: 0;
 }

 100% {
  -moz-transform-origin: center center;
  -moz-transform: rotate(0);
  opacity: 1;
 }
}
@-o-keyframes rotateIn {
 0% {
  -o-transform-origin: center center;
  -o-transform: rotate(-200deg);
  opacity: 0;
 }

 100% {
  -o-transform-origin: center center;
  -o-transform: rotate(0);
  opacity: 1;
 }
}
@keyframes rotateIn {
 0% {
  transform-origin: center center;
  transform: rotate(-200deg);
  opacity: 0;
 }

 100% {
  transform-origin: center center;
  transform: rotate(0);
  opacity: 1;
 }
}

.rotateIn {
 -webkit-animation-name: rotateIn;
 -moz-animation-name: rotateIn;
 -o-animation-name: rotateIn;
 animation-name: rotateIn;
}
@-webkit-keyframes rotateInUpLeft {
 0% {
  -webkit-transform-origin: left bottom;
  -webkit-transform: rotate(90deg);
  opacity: 0;
 }

 100% {
  -webkit-transform-origin: left bottom;
  -webkit-transform: rotate(0);
  opacity: 1;
 }
}

@-moz-keyframes rotateInUpLeft {
 0% {
  -moz-transform-origin: left bottom;
  -moz-transform: rotate(90deg);
  opacity: 0;
 }

 100% {
  -moz-transform-origin: left bottom;
  -moz-transform: rotate(0);
  opacity: 1;
 }
}

@-o-keyframes rotateInUpLeft {
 0% {
  -o-transform-origin: left bottom;
  -o-transform: rotate(90deg);
  opacity: 0;
 }

 100% {
  -o-transform-origin: left bottom;
  -o-transform: rotate(0);
  opacity: 1;
 }
}

@keyframes rotateInUpLeft {
 0% {
  transform-origin: left bottom;
  transform: rotate(90deg);
  opacity: 0;
 }

 100% {
  transform-origin: left bottom;
  transform: rotate(0);
  opacity: 1;
 }
}

.rotateInUpLeft {
 -webkit-animation-name: rotateInUpLeft;
 -moz-animation-name: rotateInUpLeft;
 -o-animation-name: rotateInUpLeft;
 animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInDownLeft {
 0% {
  -webkit-transform-origin: left bottom;
  -webkit-transform: rotate(-90deg);
  opacity: 0;
 }

 100% {
  -webkit-transform-origin: left bottom;
  -webkit-transform: rotate(0);
  opacity: 1;
 }
}

@-moz-keyframes rotateInDownLeft {
 0% {
  -moz-transform-origin: left bottom;
  -moz-transform: rotate(-90deg);
  opacity: 0;
 }

 100% {
  -moz-transform-origin: left bottom;
  -moz-transform: rotate(0);
  opacity: 1;
 }
}

@-o-keyframes rotateInDownLeft {
 0% {
  -o-transform-origin: left bottom;
  -o-transform: rotate(-90deg);
  opacity: 0;
 }

 100% {
  -o-transform-origin: left bottom;
  -o-transform: rotate(0);
  opacity: 1;
 }
}

@keyframes rotateInDownLeft {
 0% {
  transform-origin: left bottom;
  transform: rotate(-90deg);
  opacity: 0;
 }

 100% {
  transform-origin: left bottom;
  transform: rotate(0);
  opacity: 1;
 }
}

.rotateInDownLeft {
 -webkit-animation-name: rotateInDownLeft;
 -moz-animation-name: rotateInDownLeft;
 -o-animation-name: rotateInDownLeft;
 animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInUpRight {
 0% {
  -webkit-transform-origin: right bottom;
  -webkit-transform: rotate(-90deg);
  opacity: 0;
 }

 100% {
  -webkit-transform-origin: right bottom;
  -webkit-transform: rotate(0);
  opacity: 1;
 }
}

@-moz-keyframes rotateInUpRight {
 0% {
  -moz-transform-origin: right bottom;
  -moz-transform: rotate(-90deg);
  opacity: 0;
 }

 100% {
  -moz-transform-origin: right bottom;
  -moz-transform: rotate(0);
  opacity: 1;
 }
}

@-o-keyframes rotateInUpRight {
 0% {
  -o-transform-origin: right bottom;
  -o-transform: rotate(-90deg);
  opacity: 0;
 }

 100% {
  -o-transform-origin: right bottom;
  -o-transform: rotate(0);
  opacity: 1;
 }
}

@keyframes rotateInUpRight {
 0% {
  transform-origin: right bottom;
  transform: rotate(-90deg);
  opacity: 0;
 }

 100% {
  transform-origin: right bottom;
  transform: rotate(0);
  opacity: 1;
 }
}

.rotateInUpRight {
 -webkit-animation-name: rotateInUpRight;
 -moz-animation-name: rotateInUpRight;
 -o-animation-name: rotateInUpRight;
 animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateInDownRight {
 0% {
  -webkit-transform-origin: right bottom;
  -webkit-transform: rotate(90deg);
  opacity: 0;
 }

 100% {
  -webkit-transform-origin: right bottom;
  -webkit-transform: rotate(0);
  opacity: 1;
 }
}

@-moz-keyframes rotateInDownRight {
 0% {
  -moz-transform-origin: right bottom;
  -moz-transform: rotate(90deg);
  opacity: 0;
 }

 100% {
  -moz-transform-origin: right bottom;
  -moz-transform: rotate(0);
  opacity: 1;
 }
}

@-o-keyframes rotateInDownRight {
 0% {
  -o-transform-origin: right bottom;
  -o-transform: rotate(90deg);
  opacity: 0;
 }

 100% {
  -o-transform-origin: right bottom;
  -o-transform: rotate(0);
  opacity: 1;
 }
}

@keyframes rotateInDownRight {
 0% {
  transform-origin: right bottom;
  transform: rotate(90deg);
  opacity: 0;
 }

 100% {
  transform-origin: right bottom;
  transform: rotate(0);
  opacity: 1;
 }
}

.rotateInDownRight {
 -webkit-animation-name: rotateInDownRight;
 -moz-animation-name: rotateInDownRight;
 -o-animation-name: rotateInDownRight;
 animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateOut {
 0% {
  -webkit-transform-origin: center center;
  -webkit-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -webkit-transform-origin: center center;
  -webkit-transform: rotate(200deg);
  opacity: 0;
 }
}

@-moz-keyframes rotateOut {
 0% {
  -moz-transform-origin: center center;
  -moz-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -moz-transform-origin: center center;
  -moz-transform: rotate(200deg);
  opacity: 0;
 }
}

@-o-keyframes rotateOut {
 0% {
  -o-transform-origin: center center;
  -o-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -o-transform-origin: center center;
  -o-transform: rotate(200deg);
  opacity: 0;
 }
}

@keyframes rotateOut {
 0% {
  transform-origin: center center;
  transform: rotate(0);
  opacity: 1;
 }

 100% {
  transform-origin: center center;
  transform: rotate(200deg);
  opacity: 0;
 }
}

.rotateOut {
 -webkit-animation-name: rotateOut;
 -moz-animation-name: rotateOut;
 -o-animation-name: rotateOut;
 animation-name: rotateOut;
}
@-webkit-keyframes rotateOutUpLeft {
 0% {
  -webkit-transform-origin: left bottom;
  -webkit-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -webkit-transform-origin: left bottom;
  -webkit-transform: rotate(-90deg);
  opacity: 0;
 }
}

@-moz-keyframes rotateOutUpLeft {
 0% {
  -moz-transform-origin: left bottom;
  -moz-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -moz-transform-origin: left bottom;
  -moz-transform: rotate(-90deg);
  opacity: 0;
 }
}

@-o-keyframes rotateOutUpLeft {
 0% {
  -o-transform-origin: left bottom;
  -o-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -o-transform-origin: left bottom;
  -o-transform: rotate(-90deg);
  opacity: 0;
 }
}

@keyframes rotateOutUpLeft {
 0% {
  transform-origin: left bottom;
  transform: rotate(0);
  opacity: 1;
 }

 100% {
  -transform-origin: left bottom;
  -transform: rotate(-90deg);
  opacity: 0;
 }
}

.rotateOutUpLeft {
 -webkit-animation-name: rotateOutUpLeft;
 -moz-animation-name: rotateOutUpLeft;
 -o-animation-name: rotateOutUpLeft;
 animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutDownLeft {
 0% {
  -webkit-transform-origin: left bottom;
  -webkit-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -webkit-transform-origin: left bottom;
  -webkit-transform: rotate(90deg);
  opacity: 0;
 }
}

@-moz-keyframes rotateOutDownLeft {
 0% {
  -moz-transform-origin: left bottom;
  -moz-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -moz-transform-origin: left bottom;
  -moz-transform: rotate(90deg);
  opacity: 0;
 }
}

@-o-keyframes rotateOutDownLeft {
 0% {
  -o-transform-origin: left bottom;
  -o-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -o-transform-origin: left bottom;
  -o-transform: rotate(90deg);
  opacity: 0;
 }
}

@keyframes rotateOutDownLeft {
 0% {
  transform-origin: left bottom;
  transform: rotate(0);
  opacity: 1;
 }

 100% {
  transform-origin: left bottom;
  transform: rotate(90deg);
  opacity: 0;
 }
}

.rotateOutDownLeft {
 -webkit-animation-name: rotateOutDownLeft;
 -moz-animation-name: rotateOutDownLeft;
 -o-animation-name: rotateOutDownLeft;
 animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutUpRight {
 0% {
  -webkit-transform-origin: right bottom;
  -webkit-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -webkit-transform-origin: right bottom;
  -webkit-transform: rotate(90deg);
  opacity: 0;
 }
}

@-moz-keyframes rotateOutUpRight {
 0% {
  -moz-transform-origin: right bottom;
  -moz-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -moz-transform-origin: right bottom;
  -moz-transform: rotate(90deg);
  opacity: 0;
 }
}

@-o-keyframes rotateOutUpRight {
 0% {
  -o-transform-origin: right bottom;
  -o-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -o-transform-origin: right bottom;
  -o-transform: rotate(90deg);
  opacity: 0;
 }
}

@keyframes rotateOutUpRight {
 0% {
  transform-origin: right bottom;
  transform: rotate(0);
  opacity: 1;
 }

 100% {
  transform-origin: right bottom;
  transform: rotate(90deg);
  opacity: 0;
 }
}

.rotateOutUpRight {
 -webkit-animation-name: rotateOutUpRight;
 -moz-animation-name: rotateOutUpRight;
 -o-animation-name: rotateOutUpRight;
 animation-name: rotateOutUpRight;
}
@-webkit-keyframes rotateOutDownRight {
 0% {
  -webkit-transform-origin: right bottom;
  -webkit-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -webkit-transform-origin: right bottom;
  -webkit-transform: rotate(-90deg);
  opacity: 0;
 }
}

@-moz-keyframes rotateOutDownRight {
 0% {
  -moz-transform-origin: right bottom;
  -moz-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -moz-transform-origin: right bottom;
  -moz-transform: rotate(-90deg);
  opacity: 0;
 }
}

@-o-keyframes rotateOutDownRight {
 0% {
  -o-transform-origin: right bottom;
  -o-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -o-transform-origin: right bottom;
  -o-transform: rotate(-90deg);
  opacity: 0;
 }
}

@keyframes rotateOutDownRight {
 0% {
  transform-origin: right bottom;
  transform: rotate(0);
  opacity: 1;
 }

 100% {
  transform-origin: right bottom;
  transform: rotate(-90deg);
  opacity: 0;
 }
}

.rotateOutDownRight {
 -webkit-animation-name: rotateOutDownRight;
 -moz-animation-name: rotateOutDownRight;
 -o-animation-name: rotateOutDownRight;
 animation-name: rotateOutDownRight;
}
@-webkit-keyframes hinge {
 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
 100% { -webkit-transform: translateY(700px); opacity: 0; }
}

@-moz-keyframes hinge {
 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
 100% { -moz-transform: translateY(700px); opacity: 0; }
}

@-o-keyframes hinge {
 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
 100% { -o-transform: translateY(700px); opacity: 0; }
}

@keyframes hinge {
 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }
 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }
 100% { transform: translateY(700px); opacity: 0; }
}

.hinge {
 -webkit-animation-name: hinge;
 -moz-animation-name: hinge;
 -o-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); }
 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
}

@-moz-keyframes rollIn {
 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
}

@-o-keyframes rollIn {
 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }
 100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }
}

@keyframes rollIn {
 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
 100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}

.rollIn {
 -webkit-animation-name: rollIn;
 -moz-animation-name: rollIn;
 -o-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);
 }

    100% {
  opacity: 0;
  -webkit-transform: translateX(100%) rotate(120deg);
 }
}

@-moz-keyframes rollOut {
    0% {
  opacity: 1;
  -moz-transform: translateX(0px) rotate(0deg);
 }

    100% {
  opacity: 0;
  -moz-transform: translateX(100%) rotate(120deg);
 }
}

@-o-keyframes rollOut {
    0% {
  opacity: 1;
  -o-transform: translateX(0px) rotate(0deg);
 }

    100% {
  opacity: 0;
  -o-transform: translateX(100%) rotate(120deg);
 }
}

@keyframes rollOut {
    0% {
  opacity: 1;
  transform: translateX(0px) rotate(0deg);
 }

    100% {
  opacity: 0;
  transform: translateX(100%) rotate(120deg);
 }
}

.rollOut {
 -webkit-animation-name: rollOut;
 -moz-animation-name: rollOut;
 -o-animation-name: rollOut;
 animation-name: rollOut;
}

/* originally authored by Angelo Rohit - https://github.com/angelorohit */

@-webkit-keyframes lightSpeedIn {
 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
}

@-moz-keyframes lightSpeedIn {
 0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
 60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; }
 80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; }
 100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
}

@-o-keyframes lightSpeedIn {
 0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
 60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; }
 80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; }
 100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
}

@keyframes lightSpeedIn {
 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
 100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    -moz-animation-name: lightSpeedIn;
    -o-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;

    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

.animated.lightSpeedIn {
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    animation-duration: 0.5s;
}

/* originally authored by Angelo Rohit - https://github.com/angelorohit */

@-webkit-keyframes lightSpeedOut {
    0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
 100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
}

@-moz-keyframes lightSpeedOut {
 0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
 100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
}

@-o-keyframes lightSpeedOut {
 0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
 100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
}

@keyframes lightSpeedOut {
 0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
}

.lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    -moz-animation-name: lightSpeedOut;
    -o-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;

    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

.animated.lightSpeedOut {
    -webkit-animation-duration: 0.25s;
    -moz-animation-duration: 0.25s;
    -o-animation-duration: 0.25s;
    animation-duration: 0.25s;
}

/* originally authored by Angelo Rohit - https://github.com/angelorohit */

@-webkit-keyframes wiggle {
    0% { -webkit-transform: skewX(9deg); }
    10% { -webkit-transform: skewX(-8deg); }
    20% { -webkit-transform: skewX(7deg); }
    30% { -webkit-transform: skewX(-6deg); }
    40% { -webkit-transform: skewX(5deg); }
    50% { -webkit-transform: skewX(-4deg); }
    60% { -webkit-transform: skewX(3deg); }
    70% { -webkit-transform: skewX(-2deg); }
    80% { -webkit-transform: skewX(1deg); }
    90% { -webkit-transform: skewX(0deg); }
 100% { -webkit-transform: skewX(0deg); }
}

@-moz-keyframes wiggle {
    0% { -moz-transform: skewX(9deg); }
    10% { -moz-transform: skewX(-8deg); }
    20% { -moz-transform: skewX(7deg); }
    30% { -moz-transform: skewX(-6deg); }
    40% { -moz-transform: skewX(5deg); }
    50% { -moz-transform: skewX(-4deg); }
    60% { -moz-transform: skewX(3deg); }
    70% { -moz-transform: skewX(-2deg); }
    80% { -moz-transform: skewX(1deg); }
    90% { -moz-transform: skewX(0deg); }
 100% { -moz-transform: skewX(0deg); }
}

@-o-keyframes wiggle {
    0% { -o-transform: skewX(9deg); }
    10% { -o-transform: skewX(-8deg); }
    20% { -o-transform: skewX(7deg); }
    30% { -o-transform: skewX(-6deg); }
    40% { -o-transform: skewX(5deg); }
    50% { -o-transform: skewX(-4deg); }
    60% { -o-transform: skewX(3deg); }
    70% { -o-transform: skewX(-2deg); }
    80% { -o-transform: skewX(1deg); }
    90% { -o-transform: skewX(0deg); }
 100% { -o-transform: skewX(0deg); }
}

@keyframes wiggle {
    0% { transform: skewX(9deg); }
    10% { transform: skewX(-8deg); }
    20% { transform: skewX(7deg); }
    30% { transform: skewX(-6deg); }
    40% { transform: skewX(5deg); }
    50% { transform: skewX(-4deg); }
    60% { transform: skewX(3deg); }
    70% { transform: skewX(-2deg); }
    80% { transform: skewX(1deg); }
    90% { transform: skewX(0deg); }
 100% { transform: skewX(0deg); }
}

.wiggle {
    -webkit-animation-name: wiggle;
    -moz-animation-name: wiggle;
    -o-animation-name: wiggle;
    animation-name: wiggle;

    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

.animated.wiggle {
    -webkit-animation-duration: 0.75s;
    -moz-animation-duration: 0.75s;
    -o-animation-duration: 0.75s;
    animation-duration: 0.75s;
}




---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------





 var easeInTypeArr = ['rollIn', 'fadeIn', 'fadeInUp', 'fadeInDown', 'fadeInLeft', 'fadeInRight', 'bounceIn', 'bounceInDown', 'bounceInUp', 'bounceInLeft', 'bounceInRight', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight', 'fadeInLeftBig', 'fadeInRightBig', 'fadeInUpBig', 'fadeInDownBig', 'flipInX', 'flipInY', 'lightSpeedIn', 'tada', 'swing', 'shake', 'wobble', 'wiggle', 'pulse'];
var easeOutTypeArr = ['rollOut', 'fadeOut', 'fadeOutUp', 'fadeOutDown', 'fadeOutLeft', 'fadeOutRight', 'bounceOut', 'bounceOutDown', 'bounceOutUp', 'bounceOutLeft', 'bounceOutRight', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight', 'fadeOutLeftBig', 'fadeOutRightBig', 'fadeOutUpBig', 'fadeOutDownBig', 'flipOutX', 'flipOutY', 'lightSpeedOut'];
(function (_0x30b5x3) {
    _0x30b5x3['fn']['quoteRotator'] = function (_0x30b5x4) {
        var _0x30b5x5 = {
            container: '.word-container',
            easeIn: 'fadeInLeft',
            easeOut: 'fadeOutLeft',
            easeInTypeArr: ['fadeIn', 'fadeInDown', 'fadeInUp', 'fadeInLeft', 'fadeInRight', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight'],
            easeOutTypeArr: ['fadeOutLeft', 'fadeOutRight', 'fadeOutUp', 'fadeOutDown', 'rollOut', 'bounceOut', 'lightSpeedOut'],
            slideshow: true,
            slideshowDelay: 3000,
            hoverToPause: false,
            clickToNext: true
        };
        if (_0x30b5x4) {
            _0x30b5x3['extend'](_0x30b5x5, _0x30b5x4);
        };
        var _0x30b5x6 = this;
        var _0x30b5x7 = [];
        var _0x30b5x8 = [];
        var _0x30b5x9 = [];
        var _0x30b5xa = [];
        _0x30b5x3(_0x30b5x5['container'], _0x30b5x6)['find']('li')['each'](function (_0x30b5xb) {
            _0x30b5x7[_0x30b5xb] = _0x30b5x3(this)['text']();
            _0x30b5x8[_0x30b5xb] = _0x30b5x3(this)['data']('author');
            _0x30b5x9[_0x30b5xb] = _0x30b5x3(this)['data']('easein');
            _0x30b5xa[_0x30b5xb] = _0x30b5x3(this)['data']('easeout');
        });
        var _0x30b5xc = _0x30b5x3('.quote', _0x30b5x6);
        var _0x30b5xd = _0x30b5x3('.quote-content', _0x30b5x6);
        var _0x30b5xe = _0x30b5x3('.quote-author', _0x30b5x6);
        var _0x30b5xf = 0;
        _0x30b5x6['data']('_currentIndex', _0x30b5xf);
        var _0x30b5x10 = _0x30b5x5['easeInTypeArr'] || easeInTypeArr;
        var _0x30b5x11 = _0x30b5x5['easeOutTypeArr'] || easeOutTypeArr;
        var _0x30b5x12 = _0x30b5x10['length'];
        var _0x30b5x13 = _0x30b5x11['length'];
        if (_0x30b5x5['clickToNext']) {
            _0x30b5x6['on']('click', _0x30b5x16);
        };
        if (_0x30b5x5['hoverToPause']) {
            if (_0x30b5x5['slideshow']) {
                _0x30b5x6['on']('mouseover', function (_0x30b5xb) {
                    clearTimeout(_0x30b5x6['data']('_timerID'));
                })['on']('mouseleave', function (_0x30b5xb) {
                    clearTimeout(_0x30b5x14);
                    _0x30b5x14 = setTimeout(function () {
                        _0x30b5x16(null);
                    }, _0x30b5x5['slideshowDelay']);
                    _0x30b5x6['data']('_timerID', _0x30b5x14);
                });
            };
        };
        var _0x30b5x14 = 0;
        var _0x30b5x15 = 0;

        function _0x30b5x16(_0x30b5x17) {
            clearTimeout(_0x30b5x6['data']('_timerID'));
            var _0x30b5x18 = _0x30b5x7[_0x30b5xf]['split'](' ')['length'];
            var _0x30b5xb = _0x30b5xa[_0x30b5xf] || _0x30b5x5['easeOut'];
            _0x30b5xd['find']('span')['each'](function (_0x30b5x19) {
                if (_0x30b5xa[_0x30b5xf]) {
                    _0x30b5x3(this)['removeClass']()['addClass']('quick animate' + Math['floor'](Math['random']() * _0x30b5x13 / 2) + ' ' + _0x30b5xb);
                } else {
                    var _0x30b5x1a = _0x30b5x11[Math['floor'](Math['random']() * _0x30b5x13)];
                    _0x30b5x3(this)['removeClass']()['addClass']('quick animate' + Math['floor'](Math['random']() * _0x30b5x13 / 2) + ' ' + _0x30b5x1a);
                };
            });
            _0x30b5xe['find']('span')['each'](function (_0x30b5x19) {
                if (_0x30b5xa[_0x30b5xf]) {
                    _0x30b5x3(this)['removeClass']()['addClass']('quick animate' + Math['floor'](Math['random']() * _0x30b5x13 / 2) + ' ' + _0x30b5xb);
                } else {
                    var _0x30b5x1a = _0x30b5x11[Math['floor'](Math['random']() * _0x30b5x13)];
                    _0x30b5x3(this)['removeClass']()['addClass']('quick animate' + Math['floor'](Math['random']() * _0x30b5x13 / 2) + ' ' + _0x30b5x1a);
                };
            });
            clearTimeout(_0x30b5x15);
            _0x30b5x15 = setTimeout(function () {
                _0x30b5xf++;
                if (_0x30b5xf > _0x30b5x7['length'] - 1) {
                    _0x30b5xf = 0;
                };
                _0x30b5x6['data']('_currentIndex', _0x30b5xf);
                _0x30b5x1d();
            }, _0x30b5x18 * 0.5 * 100);
        };
        _0x30b5x1d();
        var _0x30b5x1b = [];
        var _0x30b5x1c = [];

        function _0x30b5x1d() {
            _0x30b5xd['empty']();
            _0x30b5xe['empty']();
            var _0x30b5x17 = _0x30b5x7[_0x30b5xf]['split'](' ')['length'];
            var _0x30b5x18 = _0x30b5x9[_0x30b5xf] || _0x30b5x5['easeIn'];
            var _0x30b5xb = 0;
            _0x30b5x3['each'](_0x30b5x7[_0x30b5xf]['split'](' '), function (_0x30b5x19, _0x30b5x1a) {
                if (_0x30b5x9[_0x30b5xf]) {
                    _0x30b5xd['append']('<span class="animate' + _0x30b5x19 + ' ' + _0x30b5x18 + '" data-easein="' + _0x30b5x18 + '">' + _0x30b5x1a + '</span> ');
                } else {
                    var _0x30b5x1e = _0x30b5x10[Math['floor'](Math['random']() * _0x30b5x12)];
                    _0x30b5xd['append']('<span class="animate' + _0x30b5x19 + ' ' + _0x30b5x1e + '" data-easein="' + _0x30b5x1e + '">' + _0x30b5x1a + '</span> ');
                };
            });
            _0x30b5x3['each'](_0x30b5x8[_0x30b5xf]['split'](' '), function (_0x30b5x19, _0x30b5x1a) {
                _0x30b5xb++;
                if (_0x30b5x9[_0x30b5xf]) {
                    _0x30b5xe['append']('<span class="animate' + (_0x30b5x17 + _0x30b5x19) + ' ' + _0x30b5x18 + '" data-easein="' + _0x30b5x18 + '">' + _0x30b5x1a + '</span> ');
                } else {
                    var _0x30b5x1e = _0x30b5x10[Math['floor'](Math['random']() * _0x30b5x12)];
                    _0x30b5xe['append']('<span class="animate' + (_0x30b5x17 + _0x30b5x19) + ' ' + _0x30b5x1e + '" data-easein="' + _0x30b5x1e + '">' + _0x30b5x1a + '</span> ');
                };
            });
            if (_0x30b5x5['slideshow']) {
                clearTimeout(_0x30b5x14);
                _0x30b5x14 = setTimeout(function () {
                    _0x30b5x16(null);
                }, (_0x30b5x17 + _0x30b5xb + 1) * 200 + _0x30b5x5['slideshowDelay']);
                _0x30b5x6['data']('_timerID', _0x30b5x14);
            };
        };
        return this;
    };
})(jQuery);

26 коммент.:

вика
Alexandr Sidorovnin
Ефимия Бабурина
Иван
Татьяна Леванова
ДОУ Информатизация
Justus
ДОУ Информатизация
ДОУ Информатизация
Justus
Alex Oos
Justus
Alex Oos
Justus
Alex Oos
Виктор
Марина Кабанова
Дима Высоцкий
Дима Высоцкий
Vladimir Shubin
Шемякина Эльвира Ульфатовна
Justus
Шемякина Эльвира Ульфатовна
Алексей Таборовец
Айтеке би Китапхана
Sergey Kikot

Отправить комментарий

Можно применять теги: <b></b><i></i><br />
<br />


Доска почета

Плюсани блог!