Team:UST Beijing/css/akm

<style type="text/css"> @charset "utf-8"; @import url(http://fonts.googleapis.com/css?family=Raleway:800,700,400); @import url(http://fonts.googleapis.com/css?family=Signika:400,600); @charset "UTF-8";

       @font-face {
   font-family: 'Glyphicons Halflings';

   src: url('../fonts/glyphicons-halflings-regular.eot');
   src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');

}

.danmu-player{

   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 1.42857143;
   color: #333;
   background-color: #fff;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;

}

.danmu-player:before, .danmu-player:after {

   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

}

.danmu-player input:focus {

   outline: 0;

} .danmu-player input[type="textarea"] {

   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   width: 35%;

}

.danmu-player input {

   font-family: "Microsoft YaHei" !important;

}

.danmu-player input[type="radio"] {

   -webkit-appearance: none;
   appearance: none;
   padding: 2px;
   border: 2px solid dodgerblue;
   border-radius: 50%;
   display: inline-block;
   width: 12px;
   height: 12px;
   position: relative;
   cursor: pointer;

}

.danmu-player input[type="radio"]:checked {

   border-color: dodgerblue;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
   -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 4px rgba(102, 175, 233, .6);
   -o-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 4px rgba(102, 175, 233, .6);
   -ms-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 4px rgba(102, 175, 233, .6);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);

}

.danmu-player input[type="radio"]:checked::before {

   content: "\0020";
   display: block;
   position: absolute;
   width: 6px;
   height: 6px;
   left: 50%;
   top: 50%;
   margin-left: -3px;
   margin-top: -3px;
   border-radius: 50%;
   background-color: dodgerblue;

}

.danmu-player input[type="range"] {

   /*-webkit-box-shadow: 0 1px 0 0#424242, 0 1px 0 #060607 inset, 0 2px 10px 0 black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;*/
   /*margin-top: 2px;*/
   background-color: slategrey;
   /*border-radius: 1px;*/
   /*width: 400px;*/
   /*border:  white solid 5px;*/
   top: 17px;
   -webkit-appearance: none;
   height:2px !important;
   cursor: pointer;

}

.danmu-player input[type="range"]::-webkit-slider-thumb {

   -webkit-appearance: none;
   cursor: default;
   top: -5px;
   height: 10px;
   width: 10px;
   /*transform: translateY(-4px);*/
   background-color: dodgerblue;
   border-radius: 5px;
   /*-webkit-box-shadow: 0 -1px 1px black inset;*/

}

.danmu-player input[type=range]::-moz-range-thumb {

   -webkit-appearance: none;
   cursor: default;
   top: -5px;
   height: 10px;
   width: 10px;
   /*transform: translateY(-4px);*/
   background-color: dodgerblue;
   border-radius: 5px;
   border: none;
   /*-webkit-box-shadow: 0 -1px 1px black inset;*/

}

.danmu-player {

   position: relative;
   background-color: black;
   box-shadow: rgb(85, 85, 85) 0px 0px 3px;
   font-family: "Microsoft YaHei" !important;
   -moz-user-select:none;
   -webkit-user-select:none;
   -ms-user-select:none;

}

.danmu-player .danmu-div{

   left: 0 !important;
   top: 0 !important;
   width: 100% !important;
   height: calc(100% - 45px) !important;
   z-index: 998 !important;

}

.danmu-player .danmu-player-load{

   display: none;
   position: absolute;
   width: 50px;
   height: 50px;
   left: 50%;
   margin-left: -25px;
   background-color: white;
   opacity: 0.8;
   border-radius: 4px;
   z-index: 1002;
   top: 50%;
   margin-top: -50px;
   padding: 5px;

} .danmu-player .danmu-player-ctrl{

   position: absolute;
   left: 0;
   bottom: 0;
   height: 45px;
   width: 100%;
   background-color: white;

}

.danmu-player .danmu-video{

   width: 100%;
   height: calc(100% - 45px);

}

.danmu-player .ctrl-progress{

   position:relative ;
   width: 100%;
   height: 10px;
   background-color: #AAAAAA;
   cursor: pointer;
   z-index: 1000;

}

.danmu-player .ctrl-progress .current {

   position: absolute;
   top: 0;
   left: 0;
   /*width: 0;*/
   height: 100%;
   background-color: lightskyblue;
   /*transition: width .1s;*/
   border-bottom-right-radius: 5px; ;
   border-top-right-radius: 5px; ;
   z-index: 1003;

}

.danmu-player .danmaku {

   -moz-user-select:none;
   -webkit-user-select:none;
   -ms-user-select:none;
   cursor: default;

}

.danmu-player .ctrl-progress .buffered{

   position: absolute;
   top: 0;
   left: 0;
   /*width: 0;*/
   height: 100%;
   background-color: slategrey;
   z-index: 1002;

}

.danmu-player .ctrl-progress .progress-handle {

   position: absolute;
   top: -1px;
   right:-7px;
   width: 14px;
   height: 14px;
   line-height: 5px;
   background-color: dodgerblue;
   color: dodgerblue;
   /*box-shadow: -1px -1px white;*/

border-radius: 50%;

   border-color: dodgerblue;
   z-index: 1004;
   overflow: visible;
   box-shadow: 0 0 2px #fff;

}

.danmu-player .progress-handle span {

   vertical-align: middle;
   font-size: 12px;
   position: relative;
   top: -1px;
   left: 2px;

} .danmu-player .ctrl-main {

   width: 100%;
   height: 35px;
   line-height: 35px;
   color: slategrey;
   vertical-align: middle;

}

.danmu-player .ctrl-btn {

   display: inline-block;
   height: 100%;
   float: left;
   width: auto;

}

.danmu-player .play-btn {

   width: 50px;
   height: 100%;
   background-color: dodgerblue;
   color: white;
   text-align: center;
   cursor: pointer;

}

.danmu-player .play-btn:hover {

   background-color:#222;

}

.danmu-player .time-text{

   font-size: 14px;
   height: 100%;
   cursor: default;

}

.danmu-player .current-time{

   color: dodgerblue;
   width: auto;
   padding-left: 4%;

}

.danmu-player .slash{

   width: auto;

}

.danmu-player .duration{

   padding-right: 4%;

}

.danmu-player .opt-btn {

   color: dodgerblue;
   padding-right: 2px;
   cursor: pointer;

}

.danmu-player .opt-btn:hover {

   color: #222222;

}

.danmu-player .danmu-input{

   margin-top: 5px;
   height: 25px;
   line-height: 25px;
   width: 40%;
   border: 1px slategrey solid;
   border-right: none;

}

.danmu-player .danmu-input:focus{

   border: 1px dodgerblue solid;
   border-right: none;

}

.danmu-player .send-btn {

   margin-top: 5px;
   padding: 0 5px;
   height: 25px;
   color: white;
   background-color: dodgerblue;
   line-height: 25px;
   cursor: pointer;

}

.danmu-player .send-btn:hover {

   background-color:#222;

}

.danmu-player .ctrl-btn-right {

   width: 8%;
   margin: auto;
   padding-right: 5px;
   padding-left: 5px;
   display: inline-block;
   height: 100%;
   float: right;
   text-align: center;
   cursor: pointer;
   color: slategrey;

}

.danmu-player .opacity {

   position: relative;
   right: 10px;
   padding-right: 0 !important;
   padding-left: 0 !important;
   width: 12% !important;
   max-width: 150px;

} .danmu-player .danmu-op {

   width: 100% ;
   position: relative;
   padding: 0 !important;

}

.danmu-player .ctrl-btn-right:hover {

   color: #111;

}

.danmu-player .ctrl-btn-right-active {

   color: #222;

}

.danmu-player .full-screen {

   margin-right: 5px;

}

.danmu-player-full-screen{

   position:fixed  ! important ;
   z-index:997  ! important ;
   top:0 ! important;
   left:0 ! important ;
   margin:0 !important;
   height:100vh  ! important ;
   width:100vw  ! important ;

}

.danmu-player-tip {

   /*display:none;*/

}

.iplay{width:20px;height:24px;margin:4px auto;display:block;background:url(icon.png) no-repeat 0 0} .ipause{width:20px;height:24px;margin:4px auto;display:block;background:url(icon.png) no-repeat 0 -34px}

/*! Animate.css - http://daneden.me/animate Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

• /

.animated {

 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;

}

.animated.infinite {

 -webkit-animation-iteration-count: infinite;
 animation-iteration-count: infinite;

}

.animated.hinge {

 -webkit-animation-duration: 2s;
 animation-duration: 2s;

}

@-webkit-keyframes bounce {

 0%, 20%, 50%, 80%, 100% {
   -webkit-transform: translateY(0);
   transform: translateY(0);
 }

 40% {
   -webkit-transform: translateY(-30px);
   transform: translateY(-30px);
 }

 60% {
   -webkit-transform: translateY(-15px);
   transform: translateY(-15px);
 }

}

@keyframes bounce {

 0%, 20%, 50%, 80%, 100% {
   -webkit-transform: translateY(0);
   -ms-transform: translateY(0);
   transform: translateY(0);
 }

 40% {
   -webkit-transform: translateY(-30px);
   -ms-transform: translateY(-30px);
   transform: translateY(-30px);
 }

 60% {
   -webkit-transform: translateY(-15px);
   -ms-transform: translateY(-15px);
   transform: translateY(-15px);
 }

}

.bounce {

 -webkit-animation-name: bounce;
 animation-name: bounce;

}

@-webkit-keyframes flash {

 0%, 50%, 100% {
   opacity: 1;
 }

 25%, 75% {
   opacity: 0;
 }

}

@keyframes flash {

 0%, 50%, 100% {
   opacity: 1;
 }

 25%, 75% {
   opacity: 0;
 }

}

.flash {

 -webkit-animation-name: flash;
 animation-name: flash;

}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {

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

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

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

}

@keyframes pulse {

 0% {
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
 }

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

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

}

.pulse {

 -webkit-animation-name: pulse;
 animation-name: pulse;

}

@-webkit-keyframes rubberBand {

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

 30% {
   -webkit-transform: scaleX(1.25) scaleY(0.75);
   transform: scaleX(1.25) scaleY(0.75);
 }

 40% {
   -webkit-transform: scaleX(0.75) scaleY(1.25);
   transform: scaleX(0.75) scaleY(1.25);
 }

 60% {
   -webkit-transform: scaleX(1.15) scaleY(0.85);
   transform: scaleX(1.15) scaleY(0.85);
 }

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

}

@keyframes rubberBand {

 0% {
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
 }

 30% {
   -webkit-transform: scaleX(1.25) scaleY(0.75);
   -ms-transform: scaleX(1.25) scaleY(0.75);
   transform: scaleX(1.25) scaleY(0.75);
 }

 40% {
   -webkit-transform: scaleX(0.75) scaleY(1.25);
   -ms-transform: scaleX(0.75) scaleY(1.25);
   transform: scaleX(0.75) scaleY(1.25);
 }

 60% {
   -webkit-transform: scaleX(1.15) scaleY(0.85);
   -ms-transform: scaleX(1.15) scaleY(0.85);
   transform: scaleX(1.15) scaleY(0.85);
 }

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

}

.rubberBand {

 -webkit-animation-name: rubberBand;
 animation-name: rubberBand;

}

@-webkit-keyframes shake {

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

 10%, 30%, 50%, 70%, 90% {
   -webkit-transform: translateX(-10px);
   transform: translateX(-10px);
 }

 20%, 40%, 60%, 80% {
   -webkit-transform: translateX(10px);
   transform: translateX(10px);
 }

}

@keyframes shake {

 0%, 100% {
   -webkit-transform: translateX(0);
   -ms-transform: translateX(0);
   transform: translateX(0);
 }

 10%, 30%, 50%, 70%, 90% {
   -webkit-transform: translateX(-10px);
   -ms-transform: translateX(-10px);
   transform: translateX(-10px);
 }

 20%, 40%, 60%, 80% {
   -webkit-transform: translateX(10px);
   -ms-transform: translateX(10px);
   transform: translateX(10px);
 }

}

.shake {

 -webkit-animation-name: shake;
 animation-name: shake;

}

@-webkit-keyframes swing {

 20% {
   -webkit-transform: rotate(15deg);
   transform: rotate(15deg);
 }

 40% {
   -webkit-transform: rotate(-10deg);
   transform: rotate(-10deg);
 }

 60% {
   -webkit-transform: rotate(5deg);
   transform: rotate(5deg);
 }

 80% {
   -webkit-transform: rotate(-5deg);
   transform: rotate(-5deg);
 }

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

}

@keyframes swing {

 20% {
   -webkit-transform: rotate(15deg);
   -ms-transform: rotate(15deg);
   transform: rotate(15deg);
 }

 40% {
   -webkit-transform: rotate(-10deg);
   -ms-transform: rotate(-10deg);
   transform: rotate(-10deg);
 }

 60% {
   -webkit-transform: rotate(5deg);
   -ms-transform: rotate(5deg);
   transform: rotate(5deg);
 }

 80% {
   -webkit-transform: rotate(-5deg);
   -ms-transform: rotate(-5deg);
   transform: rotate(-5deg);
 }

 100% {
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }

}

.swing {

 -webkit-transform-origin: top center;
 -ms-transform-origin: top center;
 transform-origin: top center;
 -webkit-animation-name: swing;
 animation-name: swing;

}

@-webkit-keyframes tada {

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

 10%, 20% {
   -webkit-transform: scale(0.9) rotate(-3deg);
   transform: scale(0.9) rotate(-3deg);
 }

 30%, 50%, 70%, 90% {
   -webkit-transform: scale(1.1) rotate(3deg);
   transform: scale(1.1) rotate(3deg);
 }

 40%, 60%, 80% {
   -webkit-transform: scale(1.1) rotate(-3deg);
   transform: scale(1.1) rotate(-3deg);
 }

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

}

@keyframes tada {

 0% {
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
 }

 10%, 20% {
   -webkit-transform: scale(0.9) rotate(-3deg);
   -ms-transform: scale(0.9) rotate(-3deg);
   transform: scale(0.9) rotate(-3deg);
 }

 30%, 50%, 70%, 90% {
   -webkit-transform: scale(1.1) rotate(3deg);
   -ms-transform: scale(1.1) rotate(3deg);
   transform: scale(1.1) rotate(3deg);
 }

 40%, 60%, 80% {
   -webkit-transform: scale(1.1) rotate(-3deg);
   -ms-transform: scale(1.1) rotate(-3deg);
   transform: scale(1.1) rotate(-3deg);
 }

 100% {
   -webkit-transform: scale(1) rotate(0);
   -ms-transform: scale(1) rotate(0);
   transform: scale(1) rotate(0);
 }

}

.tada {

 -webkit-animation-name: tada;
 animation-name: tada;

}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {

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

 15% {
   -webkit-transform: translateX(-25%) rotate(-5deg);
   transform: translateX(-25%) rotate(-5deg);
 }

 30% {
   -webkit-transform: translateX(20%) rotate(3deg);
   transform: translateX(20%) rotate(3deg);
 }

 45% {
   -webkit-transform: translateX(-15%) rotate(-3deg);
   transform: translateX(-15%) rotate(-3deg);
 }

 60% {
   -webkit-transform: translateX(10%) rotate(2deg);
   transform: translateX(10%) rotate(2deg);
 }

 75% {
   -webkit-transform: translateX(-5%) rotate(-1deg);
   transform: translateX(-5%) rotate(-1deg);
 }

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

}

@keyframes wobble {

 0% {
   -webkit-transform: translateX(0%);
   -ms-transform: translateX(0%);
   transform: translateX(0%);
 }

 15% {
   -webkit-transform: translateX(-25%) rotate(-5deg);
   -ms-transform: translateX(-25%) rotate(-5deg);
   transform: translateX(-25%) rotate(-5deg);
 }

 30% {
   -webkit-transform: translateX(20%) rotate(3deg);
   -ms-transform: translateX(20%) rotate(3deg);
   transform: translateX(20%) rotate(3deg);
 }

 45% {
   -webkit-transform: translateX(-15%) rotate(-3deg);
   -ms-transform: translateX(-15%) rotate(-3deg);
   transform: translateX(-15%) rotate(-3deg);
 }

 60% {
   -webkit-transform: translateX(10%) rotate(2deg);
   -ms-transform: translateX(10%) rotate(2deg);
   transform: translateX(10%) rotate(2deg);
 }

 75% {
   -webkit-transform: translateX(-5%) rotate(-1deg);
   -ms-transform: translateX(-5%) rotate(-1deg);
   transform: translateX(-5%) rotate(-1deg);
 }

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

}

.wobble {

 -webkit-animation-name: wobble;
 animation-name: wobble;

}

@-webkit-keyframes bounceIn {

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

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

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

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

}

@keyframes bounceIn {

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

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

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

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

}

.bounceIn {

 -webkit-animation-name: bounceIn;
 animation-name: bounceIn;

}

@-webkit-keyframes bounceInDown {

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

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

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

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

}

@keyframes bounceInDown {

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

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

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

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

}

.bounceInDown {

 -webkit-animation-name: bounceInDown;
 animation-name: bounceInDown;

}

@-webkit-keyframes bounceInLeft {

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

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

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

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

}

@keyframes bounceInLeft {

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

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

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

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

}

.bounceInLeft {

 -webkit-animation-name: bounceInLeft;
 animation-name: bounceInLeft;

}

@-webkit-keyframes bounceInRight {

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

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

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

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

}

@keyframes bounceInRight {

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

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

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

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

}

.bounceInRight {

 -webkit-animation-name: bounceInRight;
 animation-name: bounceInRight;

}

@-webkit-keyframes bounceInUp {

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

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

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

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

}

@keyframes bounceInUp {

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

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

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

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

}

.bounceInUp {

 -webkit-animation-name: bounceInUp;
 animation-name: bounceInUp;

}

@-webkit-keyframes bounceOut {

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

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

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

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

}

@keyframes bounceOut {

 0% {
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
 }

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

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

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

}

.bounceOut {

 -webkit-animation-name: bounceOut;
 animation-name: bounceOut;

}

@-webkit-keyframes bounceOutDown {

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

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

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

}

@keyframes bounceOutDown {

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

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

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

}

.bounceOutDown {

 -webkit-animation-name: bounceOutDown;
 animation-name: bounceOutDown;

}

@-webkit-keyframes bounceOutLeft {

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

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

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

}

@keyframes bounceOutLeft {

 0% {
   -webkit-transform: translateX(0);
   -ms-transform: translateX(0);
   transform: translateX(0);
 }

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

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

}

.bounceOutLeft {

 -webkit-animation-name: bounceOutLeft;
 animation-name: bounceOutLeft;

}

@-webkit-keyframes bounceOutRight {

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

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

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

}

@keyframes bounceOutRight {

 0% {
   -webkit-transform: translateX(0);
   -ms-transform: translateX(0);
   transform: translateX(0);
 }

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

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

}

.bounceOutRight {

 -webkit-animation-name: bounceOutRight;
 animation-name: bounceOutRight;

}

@-webkit-keyframes bounceOutUp {

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

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

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

}

@keyframes bounceOutUp {

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

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

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

}

.bounceOutUp {

 -webkit-animation-name: bounceOutUp;
 animation-name: bounceOutUp;

}

@-webkit-keyframes fadeIn {

 0% {
   opacity: 0;
 }

 100% {
   opacity: 1;
 }

}

@keyframes fadeIn {

 0% {
   opacity: 0;
 }

 100% {
   opacity: 1;
 }

}

.fadeIn {

 -webkit-animation-name: fadeIn;
 animation-name: fadeIn;

}

@-webkit-keyframes fadeInDown {

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

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

}

@keyframes fadeInDown {

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

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

}

.fadeInDown {

 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;

}

@-webkit-keyframes fadeInDownBig {

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

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

}

@keyframes fadeInDownBig {

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

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

}

.fadeInDownBig {

 -webkit-animation-name: fadeInDownBig;
 animation-name: fadeInDownBig;

}

@-webkit-keyframes fadeInLeft {

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

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

}

@keyframes fadeInLeft {

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

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

}

.fadeInLeft {

 -webkit-animation-name: fadeInLeft;
 animation-name: fadeInLeft;

}

@-webkit-keyframes fadeInLeftBig {

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

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

}

@keyframes fadeInLeftBig {

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

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

}

.fadeInLeftBig {

 -webkit-animation-name: fadeInLeftBig;
 animation-name: fadeInLeftBig;

}

@-webkit-keyframes fadeInRight {

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

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

}

@keyframes fadeInRight {

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

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

}

.fadeInRight {

 -webkit-animation-name: fadeInRight;
 animation-name: fadeInRight;

}

@-webkit-keyframes fadeInRightBig {

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

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

}

@keyframes fadeInRightBig {

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

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

}

.fadeInRightBig {

 -webkit-animation-name: fadeInRightBig;
 animation-name: fadeInRightBig;

}

@-webkit-keyframes fadeInUp {

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

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

}

@keyframes fadeInUp {

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

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

}

.fadeInUp {

 -webkit-animation-name: fadeInUp;
 animation-name: fadeInUp;

}

@-webkit-keyframes fadeInUpBig {

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

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

}

@keyframes fadeInUpBig {

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

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

}