@import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);

.movie{
  position: absolute;
  width: 576px;
  height: 352px;
  /* top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); */
  top: 64px;
  left: 181px;
  background: #333;
  z-index: 10;
  overflow: hidden;
}

#player{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: 1.0s 2.8s;
  -o-transition: 1.0s 2.8s;
  -moz-transition: 1.0s 2.8s;
  transition: 1.0s 2.8s;
  z-index: 30;
}

.inview #player.active{
  opacity: 1;
}

.loading{
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.inview .loading.leave{
  -webkit-animation: leaveRight 1.0s 2.0s linear forwards;
     -moz-animation: leaveRight 1.0s 2.0s linear forwards;
       -o-animation: leaveRight 1.0s 2.0s linear forwards;
          animation: leaveRight 1.0s 2.0s linear forwards;
}

.fabby{
  width: 80px;
  position: relative;
  text-align: right;
  margin: 0 0 0 auto;
}

.fabby img{
  width: 100%;
  height: auto;
  -webkit-transform-origin: bottom;
     -moz-transform-origin: bottom;
      -ms-transform-origin: bottom;
       -o-transform-origin: bottom;
          transform-origin: bottom;
  -webkit-animation: fabbyAni 2.0s infinite linear;
     -moz-animation: fabbyAni 2.0s infinite linear;
       -o-animation: fabbyAni 2.0s infinite linear;
          animation: fabbyAni 2.0s infinite linear;
}

.loading p{
  position: relative;
  margin-top: 10px;
  font-size: 12px;
  color: #fff;
  font-family: 'Mplus 1p';
}

.loading p span{
  display: inline-block;
  position: relative;
  padding: 0 .25em;
  -webkit-transform-origin: bottom;
     -moz-transform-origin: bottom;
      -ms-transform-origin: bottom;
       -o-transform-origin: bottom;
          transform-origin: bottom;
  -webkit-animation: scaleUp 1.0s infinite;
     -moz-animation: scaleUp 1.0s infinite;
       -o-animation: scaleUp 1.0s infinite;
          animation: scaleUp 1.0s infinite;
}

@-webkit-keyframes fabbyAni {
  from{
    -webkit-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1)
  }
  50%{
    -webkit-transform: scale3d(1.05,.95,1);
            transform: scale3d(1.05,.95,1)
  }
  to{
    -webkit-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1)
  }
}

@-moz-keyframes fabbyAni {
  from{
    -moz-transform: scale3d(1,1,1);
         transform: scale3d(1,1,1)
  }
  50%{
    -moz-transform: scale3d(1.05,.95,1);
         transform: scale3d(1.05,.95,1)
  }
  to{
    -moz-transform: scale3d(1,1,1);
         transform: scale3d(1,1,1)
  }
}

@-o-keyframes fabbyAni {
  from{
    transform: scale3d(1,1,1)
  }
  50%{
    transform: scale3d(1.05,.95,1)
  }
  to{
    transform: scale3d(1,1,1)
  }
}

@keyframes fabbyAni {
  from{
    -webkit-transform: scale3d(1,1,1);
       -moz-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1)
  }
  50%{
    -webkit-transform: scale3d(1.05,.95,1);
       -moz-transform: scale3d(1.05,.95,1);
            transform: scale3d(1.05,.95,1)
  }
  to{
    -webkit-transform: scale3d(1,1,1);
       -moz-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1)
  }
}

@-webkit-keyframes bund {
  0% {
       -webkit-transform: scaleX(1);
               transform: scaleX(1);
   }
   30% {
       -webkit-transform: scale3d(1.25,.75,1);
               transform: scale3d(1.25,.75,1);
   }
   40% {
       -webkit-transform: scale3d(.75,1.25,1);
               transform: scale3d(.75,1.25,1);
   }
   50% {
       -webkit-transform: scale3d(1.15,.85,1);
               transform: scale3d(1.15,.85,1);
   }
   65% {
       -webkit-transform: scale3d(.95,1.05,1);
               transform: scale3d(.95,1.05,1);
   }
   75% {
       -webkit-transform: scale3d(1.05,.95,1);
               transform: scale3d(1.05,.95,1);
   }
   to {
       -webkit-transform: scaleX(1);
               transform: scaleX(1);
   }
}

@-moz-keyframes bund {
  0% {
       -moz-transform: scaleX(1);
            transform: scaleX(1);
   }
   30% {
       -moz-transform: scale3d(1.25,.75,1);
            transform: scale3d(1.25,.75,1);
   }
   40% {
       -moz-transform: scale3d(.75,1.25,1);
            transform: scale3d(.75,1.25,1);
   }
   50% {
       -moz-transform: scale3d(1.15,.85,1);
            transform: scale3d(1.15,.85,1);
   }
   65% {
       -moz-transform: scale3d(.95,1.05,1);
            transform: scale3d(.95,1.05,1);
   }
   75% {
       -moz-transform: scale3d(1.05,.95,1);
            transform: scale3d(1.05,.95,1);
   }
   to {
       -moz-transform: scaleX(1);
            transform: scaleX(1);
   }
}

@-o-keyframes bund {
  0% {
       -o-transform: scaleX(1);
          transform: scaleX(1);
   }
   30% {
       transform: scale3d(1.25,.75,1);
   }
   40% {
       transform: scale3d(.75,1.25,1);
   }
   50% {
       transform: scale3d(1.15,.85,1);
   }
   65% {
       transform: scale3d(.95,1.05,1);
   }
   75% {
       transform: scale3d(1.05,.95,1);
   }
   to {
       -o-transform: scaleX(1);
          transform: scaleX(1);
   }
}

@keyframes bund {
  0% {
       -webkit-transform: scaleX(1);
          -moz-transform: scaleX(1);
            -o-transform: scaleX(1);
               transform: scaleX(1);
   }
   30% {
       -webkit-transform: scale3d(1.25,.75,1);
          -moz-transform: scale3d(1.25,.75,1);
               transform: scale3d(1.25,.75,1);
   }
   40% {
       -webkit-transform: scale3d(.75,1.25,1);
          -moz-transform: scale3d(.75,1.25,1);
               transform: scale3d(.75,1.25,1);
   }
   50% {
       -webkit-transform: scale3d(1.15,.85,1);
          -moz-transform: scale3d(1.15,.85,1);
               transform: scale3d(1.15,.85,1);
   }
   65% {
       -webkit-transform: scale3d(.95,1.05,1);
          -moz-transform: scale3d(.95,1.05,1);
               transform: scale3d(.95,1.05,1);
   }
   75% {
       -webkit-transform: scale3d(1.05,.95,1);
          -moz-transform: scale3d(1.05,.95,1);
               transform: scale3d(1.05,.95,1);
   }
   to {
       -webkit-transform: scaleX(1);
          -moz-transform: scaleX(1);
            -o-transform: scaleX(1);
               transform: scaleX(1);
   }
}

@-webkit-keyframes scaleUp{
  from{
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  20%{
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  40%{
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to{
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-moz-keyframes scaleUp{
  from{
    -moz-transform: scale(1);
         transform: scale(1);
  }
  20%{
    -moz-transform: scale(1.3);
         transform: scale(1.3);
  }
  40%{
    -moz-transform: scale(1);
         transform: scale(1);
  }
  to{
    -moz-transform: scale(1);
         transform: scale(1);
  }
}

@-o-keyframes scaleUp{
  from{
    -o-transform: scale(1);
       transform: scale(1);
  }
  20%{
    -o-transform: scale(1.3);
       transform: scale(1.3);
  }
  40%{
    -o-transform: scale(1);
       transform: scale(1);
  }
  to{
    -o-transform: scale(1);
       transform: scale(1);
  }
}

@keyframes scaleUp{
  from{
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
  20%{
    -webkit-transform: scale(1.3);
       -moz-transform: scale(1.3);
         -o-transform: scale(1.3);
            transform: scale(1.3);
  }
  40%{
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
  to{
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes leaveRight {
  from{
    right: 10px;
  }
  10%{
    right: 20px;
  }
  to{
    right: -80%;
  }
}

@-moz-keyframes leaveRight {
  from{
    right: 10px;
  }
  10%{
    right: 20px;
  }
  to{
    right: -80%;
  }
}

@-o-keyframes leaveRight {
  from{
    right: 10px;
  }
  10%{
    right: 20px;
  }
  to{
    right: -80%;
  }
}

@keyframes leaveRight {
  from{
    right: 10px;
  }
  10%{
    right: 20px;
  }
  to{
    right: -80%;
  }
}