blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {margin:0;padding:0}
body,button,input,select,textarea {	font:12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif}
h1,h2,h3,h4,h5,h6 {font-size:100%}
address,cite,dfn,em,var {font-style:normal}
code,kbd,pre,samp {font-family:courier new,courier,monospace}
small {font-size:12px}
ol,ul {list-style:none}
a {text-decoration:none}
/*a:hover {text-decoration:underline}*/
sup {vertical-align:text-top}
sub {vertical-align:text-bottom}
legend {color:#000}
fieldset,img {border:0}
button,input,select,textarea {font-size:100%}
table {border-collapse:collapse;border-spacing:0}

/* 
  layer mobile
*/

.layui-m-layer{position:relative; z-index: 19891014;}
.layui-m-layer *{-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;}
.layui-m-layershade,
.layui-m-layermain{position:fixed; left:0; top:0; width:100%; height:100%;}
.layui-m-layershade{background-color:rgba(0,0,0, .7); pointer-events:auto;}
.layui-m-layermain{display:table; font-family: Helvetica, arial, sans-serif; pointer-events: none;}
.layui-m-layermain .layui-m-layersection{display:table-cell; vertical-align:middle; text-align:center;}
.layui-m-layerchild{position:relative; display:inline-block; text-align:left; background-color:#fff; font-size:14px; border-radius: 5px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);  pointer-events:auto;  -webkit-overflow-scrolling: touch;}
.layui-m-layerchild{-webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: .2s; animation-duration: .2s;}


/* 弹出动画 */
@-webkit-keyframes layui-m-anim-scale { /* 默认 */
    0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
    100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)}
}
@keyframes layui-m-anim-scale { /* 默认 */
    0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
    100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)}
}
.layui-m-anim-scale{animation-name:  layui-m-anim-scale; -webkit-animation-name:  layui-m-anim-scale;}

@-webkit-keyframes layui-m-anim-up{
  0%{opacity: 0; -webkit-transform: translateY(800px); transform: translateY(800px)}
  100%{opacity: 1; -webkit-transform: translateY(0); transform: translateY(0)}
}
@keyframes layui-m-anim-up{
  0%{opacity: 0; -webkit-transform: translateY(800px); transform: translateY(800px)}
  100%{opacity: 1; -webkit-transform: translateY(0); transform: translateY(0)}
}
.layui-m-anim-up{-webkit-animation-name: layui-m-anim-up;animation-name: layui-m-anim-up}


.layui-m-layer0 .layui-m-layerchild{width: 90%; max-width: 640px;}
.layui-m-layer1 .layui-m-layerchild{border:none; border-radius:0;}
.layui-m-layer2 .layui-m-layerchild{width:auto; max-width:260px; min-width:40px; border:none; background: none; box-shadow: none; color:#fff;}
.layui-m-layerchild h3{padding: 0 10px; height: 60px; line-height: 60px; font-size:16px; font-weight: 400;  border-radius: 5px 5px 0 0; text-align: center;}
.layui-m-layerchild h3,
.layui-m-layerbtn span{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.layui-m-layercont{padding: 50px 30px; line-height: 0.5rem; text-align:center;}
.layui-m-layer1 .layui-m-layercont{padding:0; text-align:left;}
.layui-m-layer2 .layui-m-layercont{text-align:center; padding: 0; line-height: 0;}
.layui-m-layer2 .layui-m-layercont i{width:25px; height:25px; margin-left:8px; display:inline-block; background-color:#fff; border-radius:100%;}
.layui-m-layer2 .layui-m-layercont p{margin-top: 20px;}

/* loading */
@-webkit-keyframes layui-m-anim-loading{
    0%,80%,100%{transform:scale(0); -webkit-transform:scale(0)}
    40%{transform:scale(1); -webkit-transform:scale(1)}
}
@keyframes layui-m-anim-loading{
    0%,80%,100%{transform:scale(0); -webkit-transform:scale(0)}
    40%{transform:scale(1); -webkit-transform:scale(1)}
}
.layui-m-layer2 .layui-m-layercont i{-webkit-animation: layui-m-anim-loading 1.4s infinite ease-in-out; animation: layui-m-anim-loading 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both;}

.layui-m-layer2 .layui-m-layercont i:first-child{margin-left:0; -webkit-animation-delay: -.32s; animation-delay: -.32s;}
.layui-m-layer2 .layui-m-layercont i.layui-m-layerload{-webkit-animation-delay: -.16s; animation-delay: -.16s;}
.layui-m-layer2 .layui-m-layercont>div{line-height:22px; padding-top:7px; margin-bottom:20px; font-size: 14px;}
.layui-m-layerbtn{display: box; display: -moz-box; display: -webkit-box; width: 100%; position:relative; height: 50px; line-height: 50px; font-size: 0; text-align:center;  border-top:1px solid #D0D0D0; background-color: #F2F2F2; border-radius: 0 0 5px 5px;}
.layui-m-layerbtn span{position:relative; display: block; -moz-box-flex: 1; box-flex: 1; -webkit-box-flex: 1;  text-align:center; font-size:14px; border-radius: 0 0 5px 5px; cursor:pointer;}
.layui-m-layerbtn span[yes]{color: #40AFFE;}
.layui-m-layerbtn span[no]{border-right: 1px solid #D0D0D0; border-radius: 0 0 0 5px;}
.layui-m-layerbtn span:active{background-color: #F6F6F6;}
.layui-m-layerend{position:absolute; right:7px; top:10px; width:30px; height:30px; border: 0; font-weight:400; background: transparent; cursor: pointer; -webkit-appearance: none; font-size:30px;}
.layui-m-layerend::before, .layui-m-layerend::after{position:absolute; left:5px; top:15px; content:''; width:18px; height:1px; background-color:#999; transform:rotate(45deg); -webkit-transform:rotate(45deg); border-radius: 3px;}
.layui-m-layerend::after{transform:rotate(-45deg);  -webkit-transform:rotate(-45deg);}

/* 底部对话框风格 */
body .layui-m-layer .layui-m-layer-footer{position: fixed; width: 95%; max-width: 100%; margin: 0 auto; left:0; right: 0; bottom: 10px; background: none;}
.layui-m-layer-footer .layui-m-layercont{padding: 20px; border-radius: 5px 5px 0 0; background-color: rgba(255,255,255,.8);}
.layui-m-layer-footer .layui-m-layerbtn{display: block; height: auto; background: none; border-top: none;}
.layui-m-layer-footer .layui-m-layerbtn span{background-color: rgba(255,255,255,.8);}
.layui-m-layer-footer .layui-m-layerbtn span[no]{color: #FD482C; border-top: 1px solid #c2c2c2; border-radius: 0 0 5px 5px;}
.layui-m-layer-footer .layui-m-layerbtn span[yes]{margin-top: 10px; border-radius: 5px;}

/* 通用提示 */
body .layui-m-layer .layui-m-layer-msg{width: auto; max-width: 78%; margin: 0 auto; bottom: -150px; background-color: rgba(0,0,0,.7); color: #fff;}
.layui-m-layer-msg .layui-m-layercont{padding: 0.2rem;}
.layui-m-layercont {
    font-size: 0.3rem;
}
@keyframes boingInUp {
    0% {
        opacity: 0;
        transform-origin: 50% 0;
        transform: perspective(800px) rotateX(-90deg)
    }

    50% {
        opacity: 1;
        transform-origin: 50% 0;
        transform: perspective(800px) rotateX(50deg)
    }

    100% {
        opacity: 1;
        transform-origin: 50% 0;
        transform: perspective(800px) rotateX(0deg)
    }
}

.boingInUp {
    animation-name: boingInUp
}

@keyframes buzz-out {
    10% {
        transform: translateX(3px) rotate(2deg)
    }

    20% {
        transform: translateX(-3px) rotate(-2deg)
    }

    30% {
        transform: translateX(3px) rotate(2deg)
    }

    40% {
        transform: translateX(-3px) rotate(-2deg)
    }

    50% {
        transform: translateX(2px) rotate(1deg)
    }

    60% {
        transform: translateX(-2px) rotate(-1deg)
    }

    70% {
        transform: translateX(2px) rotate(1deg)
    }

    80% {
        transform: translateX(-2px) rotate(-1deg)
    }

    90% {
        transform: translateX(1px) rotate(0)
    }

    100% {
        transform: translateX(-1px) rotate(0)
    }
}

.buzz-out {
    animation-name: buzz-out
}

@keyframes buzz {
    50% {
        transform: translateX(3px) rotate(2deg)
    }

    100% {
        transform: translateX(-3px) rotate(-2deg)
    }
}

.buzz {
    animation-name: buzz
}

@keyframes exAnticlockwise {
    from {
        transform: rotate(360deg)
    }

    to {
        transform: rotate(0deg)
    }
}

.exAnticlockwise {
    animation-name: exAnticlockwise;
    animation-timing-function: linear
}

@keyframes exBounce {
    0% {
        transform: scale(0,0)
    }

    3.333333% {
        transform: scale(0.64545,.686015)
    }

    6.666667% {
        transform: scale(0.798425,.90691)
    }

    10% {
        transform: scale(0.92774,1.07226)
    }

    13.333333% {
        transform: scale(1.01897,1.14684)
    }

    16.666667% {
        transform: scale(1.07044,1.140885)
    }

    20% {
        transform: scale(1.08847,1.08847)
    }

    23.333333% {
        transform: scale(1.08303,1.02623)
    }

    26.666667% {
        transform: scale(1.064445,.97964)
    }

    30% {
        transform: scale(1.041375,.958625)
    }

    33.333333% {
        transform: scale(1.01985,.960305)
    }

    36.666667% {
        transform: scale(1.00322,.97507)
    }

    40% {
        transform: scale(0.99261,.99261)
    }

    43.333333% {
        transform: scale(0.98758,1.005735)
    }

    46.666667% {
        transform: scale(0.986835,1.01166)
    }

    50% {
        transform: scale(0.988815,1.011185)
    }

    53.333333% {
        transform: scale(0.99207,1.007025)
    }

    56.666667% {
        transform: scale(0.99549,1.002085)
    }

    60% {
        transform: scale(0.998385,.998385)
    }

    63.333333% {
        transform: scale(1.000425,.996715)
    }

    66.666667% {
        transform: scale(1.001575,.99685)
    }

    70% {
        transform: scale(1.00198,.99802)
    }

    73.333333% {
        transform: scale(1.001855,.999415)
    }

    76.666667% {
        transform: scale(1.00144,1.000455)
    }

    80% {
        transform: scale(1.000925,1.000925)
    }

    83.333333% {
        transform: scale(1.000445,1.00089)
    }

    86.666667% {
        transform: scale(1.00007,1.00056)
    }

    90% {
        transform: scale(0.999835,1.000165)
    }

    93.333333% {
        transform: scale(0.99972,.99987)
    }

    96.666667% {
        transform: scale(0.999705,.99974)
    }

    100% {
        transform: scale(1,1)
    }
}

.exBounce {
    animation-name: exBounce
}

@keyframes exClockwise {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.exClockwise {
    animation-name: exClockwise;
    animation-timing-function: linear
}

@keyframes exDownLeftIn {
    from {
        opacity: 0;
        transform: translate3d(150px,-150px,0)
    }

    to {
        opacity: 1;
        transform: translate3d(0,0,0)
    }
}

.exDownLeftIn {
    animation-name: exDownLeftIn
}

@keyframes exDownRightIn {
    from {
        opacity: 0;
        transform: translate3d(-150px,-150px,0)
    }

    to {
        opacity: 1;
        transform: translate3d(0,0,0)
    }
}

.exDownRightIn {
    animation-name: exDownRightIn
}

@keyframes exMicroDown {
    from {
        opacity: 1;
        transform: translate3d(0,0,0)
    }

    to {
        opacity: .5;
        transform: translate3d(0,15px,0)
    }
}

.exMicroDown {
    animation-name: exMicroDown;
    animation-direction: alternate
}

@keyframes exMicroLeft {
    from {
        opacity: 1;
        transform: translate3d(0,0,0)
    }

    to {
        opacity: .5;
        transform: translate3d(-15px,0,0)
    }
}

.exMicroLeft {
    animation-direction: alternate;
    animation-name: exMicroLeft
}

@keyframes exMicroRight {
    from {
        opacity: 1;
        transform: translate3d(0,0,0)
    }

    to {
        opacity: .5;
        transform: translate3d(15px,0,0)
    }
}

.exMicroRight {
    animation-direction: alternate;
    animation-name: exMicroRight
}

@keyframes exMicroUp {
    from {
        opacity: 1;
        transform: translate3d(0,0,0)
    }

    to {
        opacity: .5;
        transform: translate3d(0,-15px,0)
    }
}

.exMicroUp {
    animation-name: exMicroUp;
    animation-direction: alternate
}

@keyframes exUpLeftIn {
    from {
        opacity: 0;
        transform: translate3d(150px,150px,0)
    }

    to {
        opacity: 1;
        transform: translate3d(0,0,0)
    }
}

.exUpLeftIn {
    animation-name: exUpLeftIn
}

@keyframes exUpRightIn {
    from {
        opacity: 0;
        transform: translate3d(-150px,150px,0)
    }

    to {
        opacity: 1;
        transform: translate3d(0,0,0)
    }
}

.exUpRightIn {
    animation-name: exUpRightIn
}

@keyframes exZoomSmallIn {
    0% {
        opacity: 0;
        transform: scale3d(3,3,3)
    }

    100% {
        opacity: 1;
        transform: scale3d(1,1,1)
    }
}

.exZoomSmallIn {
    animation-name: exZoomSmallIn
}

@keyframes heartbeat {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.5)
    }

    100% {
        transform: scale(1)
    }
}

.heartbeat {
    animation-name: heartbeat
}

@keyframes holeOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1,1) rotateY(0deg)
    }

    100% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(0,0) rotateY(180deg)
    }
}

.holeOut {
    animation-name: holeOut
}

@keyframes openDownLeftOut {
    0% {
        opacity: 1;
        transform-origin: bottom left;
        transform: rotate(0deg);
        animation-timing-function: ease-out
    }

    100% {
        opacity: 0;
        transform-origin: bottom left;
        transform: rotate(-110deg);
        animation-timing-function: ease-in-out
    }
}

.openDownLeftOut {
    animation-name: openDownLeftOut
}

@keyframes openDownRightOut {
    0% {
        opacity: 1;
        transform-origin: bottom right;
        transform: rotate(0deg);
        animation-timing-function: ease-out
    }

    100% {
        opacity: 0;
        transform-origin: bottom right;
        transform: rotate(110deg);
        animation-timing-function: ease-in-out
    }
}

.openDownRightOut {
    animation-name: openDownRightOut
}

@keyframes puffIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(2,2);
        filter: blur(2px)
    }

    100% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1,1);
        filter: blur(0px)
    }
}

.puffIn {
    animation-name: puffIn
}

@keyframes puffOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1,1);
        filter: blur(0px)
    }

    100% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(2,2);
        filter: blur(2px)
    }
}

.puffOut {
    animation-name: puffOut
}

@keyframes rotateDown {
    0% {
        opacity: 1;
        transform-origin: 0 0;
        transform: perspective(800px) rotateX(0deg) translateZ(0px)
    }

    100% {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: perspective(800px) rotateX(-180deg) translateZ(300px)
    }
}

.rotateDown {
    animation-name: rotateDown
}

@keyframes rotateLeft {
    0% {
        opacity: 1;
        transform-origin: 0 0;
        transform: perspective(800px) rotateY(0deg) translateZ(0px)
    }

    100% {
        opacity: 0;
        transform-origin: 50% 0;
        transform: perspective(800px) rotateY(180deg) translateZ(300px)
    }
}

.rotateLeft {
    animation-name: rotateLeft
}

@keyframes rotateRight {
    0% {
        opacity: 1;
        transform-origin: 0 0;
        transform: perspective(800px) rotateY(0deg) translate3d(0px)
    }

    100% {
        opacity: 0;
        transform-origin: 50% 0;
        transform: perspective(800px) rotateY(-180deg) translateZ(150px)
    }
}

.rotateRight {
    animation-name: rotateRight
}

@keyframes rotateUp {
    0% {
        opacity: 1;
        transform-origin: 0 0;
        transform: perspective(800px) rotateX(0deg) translateZ(0px)
    }

    100% {
        opacity: 0;
        transform-origin: 50% 0;
        transform: perspective(800px) rotateX(180deg) translateZ(100px)
    }
}

.rotateUp {
    animation-name: rotateUp
}

@keyframes scaleDown {
    0% {
        transform: scale(1.5)
    }

    100% {
        transform: scale(1)
    }
}

.scaleDown {
    animation-name: scaleDown
}

@keyframes scaleUp {
    0% {
        transform: scale(1)
    }

    100% {
        transform: scale(1.5)
    }
}

.scaleUp {
    animation-name: scaleUp
}

@keyframes shake-slow {
    2% {
        transform: translate(0px,-1.5px) rotate(1.8deg)
    }
    4% {
        transform: translate(-4.5px,-1.5px) rotate(0.25deg)
    }
    6% {
        transform: translate(-3.5px,2px) rotate(-.2.5deg)
    }
    8% {
        transform: translate(3.5px,2.5px) rotate(1.25deg)
    }
    10% {
        transform: translate(-0.5px,-1.5px) rotate(-0.75deg)
    }
    12% {
        transform: translate(-1.5px,4px) rotate(0.75deg)
    }
    14% {
        transform: translate(4.5px,-3.5px) rotate(1.25deg)
    }
    16% {
        transform: translate(0.5px,-4.5px) rotate(1.75deg)
    }
    18% {
        transform: translate(-2px,3.5px) rotate(-0.75deg)
    }
    20% {
        transform: translate(3px,1.5px) rotate(0.25deg)
    }
    22% {
        transform: translate(2px,-1px) rotate(-0.75deg)
    }
    24% {
        transform: translate(-3.5px,-4px) rotate(1.75deg)
    }
    26% {
        transform: translate(-2.5px,4.5px) rotate(1.25deg)
    }
    28% {
        transform: translate(0px,-1px) rotate(-0.75deg)
    }
    30% {
        transform: translate(2.5px,4.5px) rotate(0.75deg)
    }
    32% {
        transform: translate(3px,1px) rotate(-0.75deg)
    }
    34% {
        transform: translate(-4.5px,4.5px) rotate(1.25deg)
    }
    36% {
        transform: translate(-4px,5px) rotate(1.25deg)
    }
    38% {
        transform: translate(1px,-2px) rotate(-1.25deg)
    }
    40% {
        transform: translate(1px,3.5px) rotate(-1.25deg)
    }
    42% {
        transform: translate(1px,2px) rotate(1.75deg)
    }
    44% {
        transform: translate(-4px,-1.5px) rotate(1.75deg)
    }
    46% {
        transform: translate(2.5px,-1.5px) rotate(0.75deg)
    }
    48% {
        transform: translate(4.5px,2px) rotate(1.75deg)
    }
    50% {
        transform: translate(-0.5px,1px) rotate(-0.75deg)
    }
    52% {
        transform: translate(-4.5px,2px) rotate(-0.75deg)
    }
    54% {
        transform: translate(-0.5px,-3px) rotate(-1.75deg)
    }
    56% {
        transform: translate(2px,-3px) rotate(0.25deg)
    }
    58% {
        transform: translate(-4px,1px) rotate(1.25deg)
    }
    60% {
        transform: translate(1px,5px) rotate(1.75deg)
    }
    62% {
        transform: translate(2.5px,2.5px) rotate(0.75deg)
    }
    64% {
        transform: translate(2.5px,3.5px) rotate(-.25deg)
    }
    66% {
        transform: translate(-3px,4.5px) rotate(-.25deg)
    }
    68% {
        transform: translate(2px,-1px) rotate(0.25deg)
    }
    70% {
        transform: translate(-2.5px,-1.5px) rotate(1.75deg)
    }
    72% {
        transform: translate(1px,2.5px) rotate(-.25deg)
    }
    74% {
        transform: translate(-4.5px,2px) rotate(1.75deg)
    }
    76% {
        transform: translate(1.5px,-3.5px) rotate(0.75deg)
    }
    78% {
        transform: translate(0px,2px) rotate(1.75deg)
    }
    80% {
        transform: translate(-0.5px,2px) rotate(0.75deg)
    }
    82% {
        transform: translate(4px,1px) rotate(0.75deg)
    }
    84% {
        transform: translate(3.5px,-3px) rotate(-.25deg)
    }
    86% {
        transform: translate(1.5px,0) rotate(0.25deg)
    }
    88% {
        transform: translate(3.5px,-3px) rotate(-0.75deg)
    }
    90% {
        transform: translate(0.5px,1.5px) rotate(0.05deg)
    }
    92% {
        transform: translate(5px,1.5px) rotate(-.05deg)
    }
    94% {
        transform: translate(2px,0.5px) rotate(0.75deg)
    }
    96% {
        transform: translate(1.5px,4.5px) rotate(1.75deg)
    }
    98% {
        transform: translate(2px,-3.5px) rotate(0.25deg)
    }
    0%,100% {
        transform: translate(0,0) rotate(0)
    }
}
.shake-slow {
    animation-name: shake-slow;
}

@keyframes slideDown {
    0% {
        transform-origin: 0 0;
        transform: translateY(0%)
    }

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

.slideDown {
    animation-name: slideDown
}

@keyframes slideUp {
    0% {
        transform-origin: 0 0;
        transform: translateY(0%)
    }

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

.slideUp {
    animation-name: slideUp
}

@keyframes spaceInDown {
    0% {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: scale(0.2) translate(0%,200%)
    }

    100% {
        opacity: 1;
        transform-origin: 50% 100%;
        transform: scale(1) translate(0%,0)
    }
}

.spaceInDown {
    animation-name: spaceInDown
}

@keyframes spaceInUp {
    0% {
        opacity: 0;
        transform-origin: 50% 0;
        transform: scale(0.2) translate(0%,-200%)
    }

    100% {
        opacity: 1;
        transform-origin: 50% 0;
        transform: scale(1) translate(0%,0)
    }
}

.spaceInUp {
    animation-name: spaceInUp
}

@keyframes spaceOutDown {
    0% {
        opacity: 1;
        transform-origin: 50% 100%;
        transform: scale(1) translate(0%,0)
    }

    100% {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: scale(0.2) translate(0%,200%)
    }
}

.spaceOutDown {
    animation-name: spaceOutDown
}

@keyframes spaceOutUp {
    0% {
        opacity: 1;
        transform-origin: 50% 0;
        transform: scale(1) translate(0%,0)
    }

    100% {
        opacity: 0;
        transform-origin: 50% 0;
        transform: scale(0.2) translate(0%,-200%)
    }
}

.spaceOutUp {
    animation-name: spaceOutUp
}

@keyframes swap {
    0% {
        opacity: 0;
        transform-origin: 0 100%;
        transform: scale(0,0) translate(-700px,0)
    }

    100% {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: scale(1,1) translate(0px,0)
    }
}

.swap {
    animation-name: swap
}

@keyframes swashIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(0,0)
    }

    90% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(0.9,.9)
    }

    100% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1,1)
    }
}

.swashIn {
    animation-name: swashIn
}

@keyframes swashOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1,1)
    }

    80% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(0.9,.9)
    }

    100% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(0,0)
    }
}

.swashOut {
    animation-name: swashOut
}

@keyframes tinDownIn {
    0% {
        opacity: 0;
        transform: scale(1,1) translateY(900%)
    }

    50%,70%,90% {
        opacity: 1;
        transform: scale(1.1,1.1) translateY(0)
    }

    100%,60%,80% {
        opacity: 1;
        transform: scale(1,1) translateY(0)
    }
}

.tinDownIn {
    animation-name: tinDownIn
}

@keyframes tinDownOut {
    0%,20%,40%,50% {
        opacity: 1;
        transform: scale(1,1) translateY(0)
    }

    10%,30% {
        opacity: 1;
        transform: scale(1.1,1.1) translateY(0)
    }

    100% {
        opacity: 0;
        transform: scale(1,1) translateY(900%)
    }
}

.tinDownOut {
    animation-name: tinDownOut
}

@keyframes tinUpIn {
    0% {
        opacity: 0;
        transform: scale(1,1) translateY(-900%)
    }

    50%,70%,90% {
        opacity: 1;
        transform: scale(1.1,1.1) translateY(0)
    }

    100%,60%,80% {
        opacity: 1;
        transform: scale(1,1) translateY(0)
    }
}

.tinUpIn {
    animation-name: tinUpIn
}

@keyframes tinUpOut {
    0%,20%,40%,50% {
        opacity: 1;
        transform: scale(1,1) translateY(0)
    }

    10%,30% {
        opacity: 1;
        transform: scale(1.1,1.1) translateY(0)
    }

    100% {
        opacity: 0;
        transform: scale(1,1) translateY(-900%)
    }
}

.tinUpOut {
    animation-name: tinUpOut
}

@keyframes twisterInDown {
    0% {
        opacity: 0;
        transform-origin: 0 100%;
        transform: scale(0,0) rotate(360deg) translateY(-100%)
    }

    30% {
        transform-origin: 0 100%;
        transform: scale(0,0) rotate(360deg) translateY(-100%)
    }

    100% {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: scale(1,1) rotate(0deg) translateY(0%)
    }
}

.twisterInDown {
    animation-name: twisterInDown
}

@keyframes twisterInUp {
    0% {
        opacity: 0;
        transform-origin: 100% 0;
        transform: scale(0,0) rotate(360deg) translateY(100%)
    }

    30% {
        transform-origin: 100% 0;
        transform: scale(0,0) rotate(360deg) translateY(100%)
    }

    100% {
        opacity: 1;
        transform-origin: 0 0;
        transform: scale(1,1) rotate(0deg) translateY(0)
    }
}

.twisterInUp {
    animation-name: twisterInUp
}

@keyframes vanishIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(2,2);
        filter: blur(90px)
    }

    100% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1,1);
        filter: blur(0px)
    }
}

.vanishIn {
    animation-name: vanishIn
}

@keyframes vanishOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1,1);
        filter: blur(0px)
    }

    100% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(2,2);
        filter: blur(20px)
    }
}

.vanishOut {
    animation-name: vanishOut
}

@keyframes wobble-bottom {
    16.65% {
        transform: skew(-12deg)
    }

    33.3% {
        transform: skew(10deg)
    }

    49.95% {
        transform: skew(-6deg)
    }

    66.6% {
        transform: skew(4deg)
    }

    83.25% {
        transform: skew(-2deg)
    }

    100% {
        transform: skew(0)
    }
}

.wobble-bottom {
    animation-name: wobble-bottom
}

@keyframes wobble-horizontal {
    16.65% {
        transform: translateX(8px)
    }

    33.3% {
        transform: translateX(-6px)
    }

    49.95% {
        transform: translateX(4px)
    }

    66.6% {
        transform: translateX(-2px)
    }

    83.25% {
        transform: translateX(1px)
    }

    100% {
        transform: translateX(0)
    }
}

.wobble-horizontal {
    animation-name: wobble-horizontal
}

@keyframes wobble-skew {
    16.65% {
        transform: skew(-12deg)
    }

    33.3% {
        transform: skew(10deg)
    }

    49.95% {
        transform: skew(-6deg)
    }

    66.6% {
        transform: skew(4deg)
    }

    83.25% {
        transform: skew(-2deg)
    }

    100% {
        transform: skew(0)
    }
}

.wobble-skew {
    animation-name: wobble-skew
}

@keyframes wobble-to-bottom-right {
    16.65% {
        transform: translate(8px,8px)
    }

    33.3% {
        transform: translate(-6px,-6px)
    }

    49.95% {
        transform: translate(4px,4px)
    }

    66.6% {
        transform: translate(-2px,-2px)
    }

    83.25% {
        transform: translate(1px,1px)
    }

    100% {
        transform: translate(0,0)
    }
}

.wobble-to-bottom-right {
    animation-name: wobble-to-bottom-right
}

@keyframes wobble-to-top-right {
    16.65% {
        transform: translate(8px,-8px)
    }

    33.3% {
        transform: translate(-6px,6px)
    }

    49.95% {
        transform: translate(4px,-4px)
    }

    66.6% {
        transform: translate(-2px,2px)
    }

    83.25% {
        transform: translate(1px,-1px)
    }

    100% {
        transform: translate(0,0)
    }
}

.wobble-to-top-right {
    animation-name: wobble-to-top-right
}

@keyframes wobble-vertical {
    16.65% {
        transform: translateY(8px)
    }

    33.3% {
        transform: translateY(-6px)
    }

    49.95% {
        transform: translateY(4px)
    }

    66.6% {
        transform: translateY(-2px)
    }

    83.25% {
        transform: translateY(1px)
    }

    100% {
        transform: translateY(0)
    }
}

.wobble-vertical {
    animation-name: wobble-vertical
}
@keyframes scaleDraw {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(1.1);
    }
    20% {
        transform: scale(1.2);
    }
    30% {
        transform: scale(1.3);
    }
    40% {
        transform: scale(1.4);
    }
    50% {
        transform: scale(1.5);
    }
    60% {
        transform: scale(1.6);
    }

    70% {
        transform: scale(1.7);
    }
    80% {
        transform: scale(1.8);
    }
    90% {
        transform: scale(1.9);
    }
    100% {
        transform: scale(2);
    }
}
@keyframes scaleBreak {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(0.9);
    }
    20% {
        transform: scale(0.8);
    }
    30% {
        transform: scale(0.7);
    }
    40% {
        transform: scale(0.6);
    }
    50% {
        transform: scale(0.5);
    }
    60% {
        transform: scale(0.6);
    }

    70% {
        transform: scale(0.7);
    }
    80% {
        transform: scale(0.8);
    }
    90% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes flightDraw {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }
    10% {
        transform: scale(.4);
        opacity: 0.1;
    }
    20% {
        transform: scale(.6);
        opacity: 0.2;
    }
    30% {
        transform: scale(.8);
        opacity: 0.3;
    }
    40% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.5;
    }
    60% {
        transform: scale(1);
        opacity: 0.5;
    }

    70% {
        transform: scale(.8);
        opacity: 0.3;
    }
    80% {
        transform: scale(.6);
        opacity: 0.2;
    }
    90% {
        transform: scale(.4);
        opacity: 0.1;
    }
    100% {
        transform: scale(.2);
        opacity: 0;
    }
}