body, h1, h2, h3, h4, h5, h6, hr, p, dl, dt, dd, ul, ol, li, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0;} body, button, input, select, textarea { font:12px/1.5 "Microsoft YaHei", tahoma, arial, '\5b8b\4f53', sans-serif } html,body{position: relative;} iframe{border:none;} h1, h2, h3, h4, h5, h6 { font-size:100% } body, td, th { font-family: tahoma, arial, \5b8b\4f53, sans-serif; } img { border:0; } table { border-collapse:collapse; } th { font-weight:normal; } h1, h2, h3 { font-size:100%; } a { color:#515665; text-decoration:none; outline:none; } a:hover { color:#515665; text-decoration:underline; } ul { margin:0; padding:0 } ul li { list-style:none } .clear { clear:both; } .hide { display:none } .clearfix:before, .container:after { content: ""; display: table; } .clearfix:after { clear: both; } html,body{overflow-x: hidden; width: 100%; height:100%}
.poa{position: absolute;}
.scene{height: 100%;}

.act_wrapper .act_bg,.act_wrapper .act_content{position:absolute;left:50%;top:0;z-index:1;width:320px;height:711px;margin-left:-160px}.act_wrapper .act_bg img{width:320px;display:block}.act_wrapper .act_content{z-index:2}.act-btn{width:265px;height:50px;display:block;position:absolute;left:27px;bottom:155px;text-indent:-999em}[class*="embed-btn"]{-webkit-user-select:none;-webkit-box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;overflow:hidden;position:relative;display:block;width:100%;text-align:center;vertical-align:top;text-decoration:none;font-weight:bold}.embed-btn-mod{border:0 none;margin:0;color:#0079FF;background:0;outline:0}.embed-btn-mod:active{background:#d9d9d9}.mod-game-dialog{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background-color:rgba(0,0,0,0.4)}.mod-game-dialog-content{box-sizing:border-box;position:absolute;text-align:left;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);width:270px;min-height:80px;background-color:white;border-radius:6px}.mod-game-dialog-content .mod-txt{padding:16px 14px;font-size:14px;color:#3a3a3a}.mod-game-dialog-content .mod-btn{display:box;display:-webkit-box}.mod-game-dialog-content .mod-btn button{box-sizing:border-box;font-size:16px;line-height:27px;padding:8px 10px;box-flex:1;-webkit-box-flex:1;border-right:#c8c7cc 1px solid;background-image:none}.mod-game-dialog-content .mod-btn button:last-child{border-right:0}.mod-game-dialog-content .mod-btn button:active{background:rgba(0,0,0,.1)}.mod-game-dialog-content .mod-txt{border-bottom:#c8c7cc 1px solid;background-image:none}@media screen and (-webkit-min-device-pixel-ratio:2.0){.mod-game-dialog-content .mod-txt{background:-webkit-gradient(linear,left top,left bottom,color-stop(.5,transparent),color-stop(.5,#c8c7cc),to(#c8c7cc)) left bottom repeat-x;border-bottom:0;background-size:100% 1px;-wekit-background-size:100% 1px}.mod-game-dialog-content .mod-btn button{background:-webkit-gradient(linear,left top,right top,color-stop(.5,transparent),color-stop(.5,#c8c7cc),to(#c8c7cc)) right top repeat-y;border-right:0;background-size:1px 100%;-wekit-background-size:1px 100%}.mod-game-dialog-content .mod-btn button:last-child{background-image:none}/*  |xGv00|2c9efdf3ecc89211e93404e2cd7be8ac */

.container{position: relative;width: 100%; height:100%}
.scene1{background-color: #12649b; width: 100%; height: 100%}
.outsideview{position: absolute;width: 100%;height: 100%; right:0;z-index: 10;}


.bgwrapper{position: absolute; height: 100%; width: 100%; margin: auto;text-align: center; }
.bg{ margin: auto;position: absolute;
width: 100%; height: 100%; background: url(http://3gimg.qq.com/qq_product_operations/mma/redesign/img/scene1/bg1.png) no-repeat center 0 ;background-size: auto 100%;}
.bgsea{
  height: 100%;
width: 100%;
top: 0;
position: absolute;
background-color: #12649b;
}
.bubbles{    height: 100%;    width: 100%;}
.bubble{ position: absolute; display: block; background: url(http://3gimg.qq.com/qq_product_operations/mma/redesign/img/scene1/bubble_00.png ) no-repeat 0 0 ; background-size: 100% 100%}
.bubble1{bottom: 30%;right: 12%;}
.bubble2{bottom: 23%;left: 25%;}
.bubble3{top: 20%;left: 55%;}
.bubble4{top: 20%;right: 15%;}

.bubble{background: url(http://3gimg.qq.com/qq_product_operations/mma/redesign/img/android/s1_bubble.png) no-repeat;width: 255px;height: 265px;background-size: 100%;}
.bubble2{background: url(http://3gimg.qq.com/qq_product_operations/mma/redesign/img/android/s1_bubble.png) no-repeat;width: 255px;height: 265px;background-size: 100%;}
.bubble{  
-webkit-animation: bubble 4s infinite ease-in-out;
}.bubble2{  
-webkit-animation: bubble 6s infinite ease-in-out;
}
@-webkit-keyframes bubble {
  0%{opacity: 0.2;-webkit-transform: translate(0,200px);}
  50% {opacity: 1;}
  100% {opacity: 0;-webkit-transform: translate(50px,-200px);}
}

.cimg {
-webkit-animation: rotating 5s linear infinite;
}
@-webkit-keyframes rotating {
    from{-webkit-transform: rotate(0deg); }
    to{-webkit-transform: rotate(180deg); }
}
.cimg {
width: 100%;
border-radius: 50%;
/*position: absolute;
top: 0;
margin: auto;
bottom: 0;*/
}

.whale{height: 46px;left: 75%;top: 36%;}
.jellyfish1{height: 11%;left: 5%;top: 37%;}

.jellyfish2{height: 9%;left: 81px;top: 45%;}
.flag{width: 60%;left: 20%;top: 10%;}
.leftfoot{height: 19%;left: 31px;bottom: 0%;}
.rightfoot{height: 18%;left: 185px;bottom: -1%;}

.qq50{width: 50%;left: 25%;top: 20%;}
 .tryslide{position: absolute;width: 100%;color: #fff;text-align: center;font-size: 20px;bottom: 25%;height: 5%;}
 .arrow{height: 80%;left: 47%;bottom: 90%;}

.scene1c{width: 100%;height: 100%; right: 0;}
.scene2{background-color: #12649b; width: 190%;height: 100%;left: 0px;overflow: hidden;}
.bg2{position: fixed;bottom: 0px; margin: auto; width: 190%; height: 241px; background: url(http://3gimg.qq.com/qq_product_operations/mma/redesign/img/scene2/whole.png) no-repeat center bottom;background-size: 100% auto; display: none;}
 .circle_group{ height: 100%;width: 70%;position: absolute;right: -9%;top: 6%;}
.bigcircle{ margin: auto;height: 80%;background: url(http://3gimg.qq.com/qq_product_operations/mma/redesign/img/scene2/circle2.png) no-repeat center 0;background-size: auto 100%;}
.submarine{left: 5%;top: 5%;width: 20%;}
.head1{left: 40%;top: 31%; width: 84px}
.head2{left: 65%;width: 13%}
.head3{left: 55%;top: 48%;width: 13%}
.circle{left: 18%;height: 25%;top: 35%;}
.criclebutton{ color: #fff;left: 65%;font-size: 18px;font-weight: bold; top: 45%;}
.head1_div{left: 40%;top: 31%; width: 84px;height: 84px; border-radius: 32px;overflow: hidden;display: none;}
.head1_bg{ width: 84px}
.head1_head{width: 65px;bottom: 1px;left: 10px;}
.head1_ice{width: 74px;bottom: 0px;left: 2px;}

.scene3{background-color: #37a9e0; width: 100%;height: 100%; overflow: hidden;display: none}
.scene3 > img, .phone, .radargroup{opacity: 0}

.sea{background-color: #12649b; width: 640px;height: 640px; border-radius: 640px; top:40%;left: -50%;border-radius: 320px;}
.ice{top: 33%; width:100%;}
/*.land{bottom: 0px;width: 100%;}*/
.icebg1{top: 43%;left: 10%; display: none;}
.icebg2{top: 43%;right: 10%; display: none;}
.land{
  /*bottom: -105%;*/
  bottom: -450px;
width: 200%;
left: -10px;}
.land1{
  /*bottom: -78%;*/
  bottom: -310px;
width: 200%;
left: 100px;}
.ship{top: 48%;left:120%;}
.cloud{top: 5%;left: 5%;}
.whale2{top: 30%;left: 60%;}
.phone{height: 100%}
.handphone{bottom: 0px;width: 80%;}
.thumb{bottom: 85px;
left: 35px;
width: 100px;}
.thumb_i5{bottom: 140px;
left: 30px;
width: 100px}
.slide{width: 36%;left: 33%;bottom: 100px;}
.slide_i5{width: 43%;left: 31%;bottom: 120px;}
.slidetips{ bottom:79%; width: 100%;font-size: 20px; color: #fff; text-align: center;opacity: 0 }
.slidearrow{background: url(http://3gimg.qq.com/qq_product_operations/mma/redesign/img/scene1/arrow1.png) no-repeat 25% 10px;
background-size: auto 55%;
display: inline-block;
height: 23px;
width: 25px;}
.radargroup{height: 100%}
.radar{bottom: 16%;width: 40%;right: 29%;}
.thumbradar{bottom: 100px;
right: 30px;width: 30%;}
.handradar{width: 75%;right: 0;bottom: 0;}
.radarbutton{top: 60%;left: 39%;width: 24%;}


.scene5{background-color: #37a9e0; width: 100%;height: 100%; overflow: hidden; display: none;}
.shine{height: 100%;width: 100%;display: none;}
.welcome{bottom: 0;width: 100%;height: 100%}
.lhand{bottom: 0;width: 48%;}
.rhand{right: 0;bottom: 0;width: 48%;}
.bling{top: 12%;width: 80%;left: 10%;}

.yuyuex{top: 9%;left: 48px; width: 232px;   display: none;}
.rules{color: #fff;font-size: 16px;text-align: center;width: 100%; top: 21%;}
.buttonarea{
    bottom: 200px;
width: 70%;
left: 15%;
text-align: center;

color: #fff;
background-color: #65bd57;

border-radius: 12px;
display: block;
font-size: 24px;
-webkit-box-shadow: 0 5px 0px 0px #56994d;
-moz-box-shadow: 0 5px 0px 0px #56994d;
box-shadow: 0 5px 0px 0px #56994d;
display: none;
}
.buttonarea a{color: #fff; text-decoration: none; width: 100%;display: inline-block;}

.rulesdetail{color: #000; bottom: 20px; }
.handpad{width: 100%;height: 167px;bottom:0;margin:auto;background: url(http://3gimg.qq.com/qq_product_operations/mma/redesign/img/scene5/handpad.png) no-repeat center bottom;background-size: 100% auto;
display: none;}
.handpad_wrapper{width: 60%;height: 142px;margin: 10px auto;background-color: #9addff; }
.handpad_wrapper .h3{
    background-color: #2d76a7;
color: #fff;
text-align: center;
line-height: 24px;
height: 24px;
}
.handpad_wrapper .cont{
    color: #2470a3;padding: 0 5px;
}
.handpad_wrapper .p2{font-size: 8px; text-align: center}
.star1{left: 42%;top: 6%;width: 20px; display: none;}
.star2{width: 20px;top: 28%;left: 15%; display: none;}
.star3{top: 27%;width: 20px;right: 15%; display: none;}
.star4{width: 30px;top: 4%;right: 12%; display: none;}

.handpad_wrapper2{width: 60%;height: 120px;margin: 10px auto;background-color: #2d76a7;color: #fff; padding-top: 20px;display: none}
.handpad_wrapper2 .h1{height: 36px;
padding-left: 20px;
font-size: 24px;
line-height: 36px;
}
.handpad_wrapper2 .h1 i{
display: inline-block;
height: 28px;
width: 28px;
background: url(http://3gimg.qq.com/qq_product_operations/mma/redesign/img/scene5/sign.png) no-repeat center bottom;
background-size: auto 80%;
}
.handpad_wrapper2 .cont{ font-size: 12px;padding: 10px 20px;}


.handpad_wrapper3{width: 60%;height: 120px;margin: 10px auto;background-color: #2d76a7;color: #fff; padding-top: 20px;display: none}
.handpad_wrapper3 .h1{height: 36px;
padding-left: 20px;
font-size: 20px;
line-height: 36px;
}
.handpad_wrapper3 .h1 i{
display: inline-block;
height: 28px;
width: 28px;
background: url(http://3gimg.qq.com/qq_product_operations/mma/redesign/img/scene5/sign.png) no-repeat center bottom;
background-size: auto 80%;
}
.handpad_wrapper3 .cont{ font-size: 12px;padding: 10px 20px;}


.target{width: 10px;
height: 10px;
box-shadow: 0 0 10px #fff;
position: absolute;
right: 50%;
bottom: 45%;
background: #fff;
border-radius: 5px;
-webkit-animation: starget 3s infinite ease-in-out;
}
@-webkit-keyframes starget {
  0%,10%{opacity: 0;}
  60% {opacity: 0.8;}
  100% {opacity: 0;}
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.animated_8s {
  -webkit-animation-duration: 8s;
  animation-duration: 8s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;

}

@-webkit-keyframes zoomFade {
  0% {
    opacity: 1;

  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(2, 2, 2);
    transform: scale3d(2, 2, 2);
  }
}

@keyframes zoomFade {
  0% {
    opacity: 1;

  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(2, 2, 2);
    -ms-transform: scale3d(2, 2, 2);
    transform: scale3d(2, 2, 2);
  }
}
.zoomFade {
  -webkit-animation-name: zoomFade;
  animation-name: zoomFade;
}

@-webkit-keyframes zoom {
  0% {
    opacity: 1;
  }

  90%{
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(8, 8, 8);
    transform: scale3d(8, 8, 8);
  }
}

@keyframes zoom {
  0% {
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(8, 8, 8);
    -ms-transform: scale3d(8, 8, 8);
    transform: scale3d(8, 8, 8);
  }
}

.zoom {
  -webkit-animation-name: zoom;
  animation-name: zoom;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    -ms-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
  }

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

@keyframes fadeOutDown {
  0% {
    opacity: 1;
  }

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

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}


@-webkit-keyframes rotate {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -360deg);
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -360deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes rotate {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -360deg);
    -ms-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -360deg);
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -360deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.rotate {
  -webkit-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;

}
@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-300%, 300%, 0) rotate3d(0, 0, 1, -90deg);
    transform: translate3d(-300%, 300%, 0) rotate3d(0, 0, 1, -90deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-300%, 300%, 0) rotate3d(0, 0, 1, -90deg);
    -ms-transform: translate3d(-300%, 300%, 0) rotate3d(0, 0, 1, -90deg);
    transform: translate3d(-300%, 300%, 0) rotate3d(0, 0, 1, -90deg);
  }
  100% {
    opacity: 1
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}
@-webkit-keyframes rollIn10 {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(-200%, 0, 0) rotate3d(0, 0, 1, -10deg);
    transform: translate3d(-200%, 0, 0) rotate3d(0, 0, 1, -10deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes rollIn10 {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(-200%, 0, 0) rotate3d(0, 0, 1, -10deg);
    -ms-transform: translate3d(-200%, 0, 0) rotate3d(0, 0, 1, -10deg);
    transform: translate3d(-200%, 0, 0) rotate3d(0, 0, 1, -10deg);
  }

  100% {
    opacity: 1
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.rollIn10 {
  -webkit-animation-name: rollIn10;
  animation-name: rollIn10;
}


@-webkit-keyframes rollIn90 {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(-500%, -500%, 0) rotate3d(0, 0, 1, -45deg);
    transform: translate3d(-500%, -500%, 0) rotate3d(0, 0, 1, -45deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes rollIn90 {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(-500%, -500%, 0) rotate3d(0, 0, 1, -45deg);
    -ms-transform: translate3d(-500%, -500%, 0) rotate3d(0, 0, 1, -45deg);
    transform: translate3d(-500%, -500%, 0) rotate3d(0, 0, 1, -45deg);
  }

  100% {
    opacity: 1
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.rollIn90 {
  -webkit-animation-name: rollIn90;
  animation-name: rollIn90;
}

@-webkit-keyframes rollOut90 {
  0% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;

  }

  100% {
    opacity: 1;

        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 0, -45deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 0, -45deg);
  }
}

@keyframes rollOut90 {
  0% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }

  100% {
    opacity: 1
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 0, -45deg);
    -ms-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 0, -45deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 0, -45deg);


  }
}

.rollOut90 {
  -webkit-animation-name: rollOut90;
  animation-name: rollOut90;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes rollIn901 {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(100%, 10%, 0) rotate3d(0, 0, 1, 45deg);
    transform: translate3d(100%, 10%, 0) rotate3d(0, 0, 1, 45deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes rollIn901 {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(100%, 10%, 0) rotate3d(0, 0, 1, 45deg);
    -ms-transform: translate3d(100%, 10%, 0) rotate3d(0, 0, 1, 45deg);
    transform: translate3d(100%, 10%, 0) rotate3d(0, 0, 1, 45deg);
  }

  100% {
    opacity: 1
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.rollIn901 {
  -webkit-animation-name: rollIn901;
  animation-name: rollIn901;
}

@-webkit-keyframes rollIn902 {
  0% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

  100% {
    opacity: 1;

        -webkit-transform: translate3d(-50%, 0, 0) rotate3d(0, 0, 1, -90deg);
    transform: translate3d(-50%, 0, 0) rotate3d(0, 0, 1, -90deg);
  }
}
@keyframes rollIn902 {
  0% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }

  100% {
    opacity: 1

        -webkit-transform: translate3d(-50%, 0, 0) rotate3d(0, 0, 1, -90deg);
    -ms-transform: translate3d(-50%, 0, 0) rotate3d(0, 0, 1, -90deg);
    transform: translate3d(-50%, 0, 0) rotate3d(0, 0, 1, -90deg);
  }
}

.rollIn902 {
  -webkit-animation-name: rollIn902;
  animation-name: rollIn902;
}


@-webkit-keyframes rollIn903 {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(500%, 500%, 0) ;
    transform: translate3d(500%, 500%, 0) ;
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes rollIn903 {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(500%, 500%, 0) ;
    -ms-transform: translate3d(500%, 500%, 0) ;
    transform: translate3d(500%, 500%, 0) ;
  }

  100% {
    opacity: 1
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.rollIn903 {
  -webkit-animation-name: rollIn903;
  animation-name: rollIn903;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}


@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px);
  }


  100% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
}


@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  0% {
    transform: perspective(400px);
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
  }


  100% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.5, 1.5, 1.5);
    transform: scale3d(1.5, 1.5, 1.5);
  }

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

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.5, 1.5, 1.5);
    -ms-transform: scale3d(1.5, 1.5, 1.5);
    transform: scale3d(1.5, 1.5, 1.5);
  }

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

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
    -webkit-animation-duration: .75s;
  animation-duration: .75s;
}