@-webkit-keyframes fadeInLeft {
    from {
      opacity: 0;
      -webkit-transform: translate3d(-20%, 0, 0);
      transform: translate3d(-20%, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes fadeInLeft {
    from {
      opacity: 0;
      -webkit-transform: translate3d(-20%, 0, 0);
      transform: translate3d(-20%, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }


@-webkit-keyframes fadeInRight {
    from {
      opacity: 0;
      -webkit-transform: translate3d(20%, 0, 0);
      transform: translate3d(20%, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes fadeInRight {
    from {
      opacity: 0;
      -webkit-transform: translate3d(20%, 0, 0);
      transform: translate3d(20%, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  @-webkit-keyframes fadeInDown {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -20%, 0);
      transform: translate3d(0, -20%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes fadeInDown {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -20%, 0);
      transform: translate3d(0, -20%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }


  @-webkit-keyframes fadeInUp {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, 20%, 0);
      transform: translate3d(0, 20%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, 20%, 0);
      transform: translate3d(0, 20%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  @-webkit-keyframes openRight {
    from {
      width: 0;
    }
  
    to {
      width: 100%;
    }
  }
  
  @keyframes openRight {
    from {
      width: 0;
    }
  
    to {
      width: 100%;
    }
  }

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

  @-webkit-keyframes closeRight {
    from {
      width: 100%;
    }
  
    to {
      width: 0;
    }
  }
  
  @keyframes closeRight {
    from {
      width: 100%;
    }
  
    to {
      width: 0;
    }
  }

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

  @-webkit-keyframes popUp {
    from {
      opacity: 0;
      -webkit-transform: scale(0.1);
      transform: scale(0.1);
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
    }
  
    70% {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
  
    to {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

  @keyframes popUp {
    from {
      opacity: 0;
      -webkit-transform: scale(0.1);
      transform: scale(0.1);
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
    }
  
    70% {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
  
    to {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

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

  @-webkit-keyframes loading {
    from {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  
    to {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  
  @keyframes loading {
    from {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  
    to {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  
  .loading {
    -webkit-animation-name: loading;
    animation-name: loading;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  @-webkit-keyframes loadingReverse {
    from {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  
    to {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  }
  
  @keyframes loadingReverse {
    from {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  
    to {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  }
  
  .loadingReverse {
    -webkit-animation-name: loadingReverse;
    animation-name: loadingReverse;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  @-webkit-keyframes float {
    from {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }

    25% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, -30px);
      transform: translate(0, -30px);
    }

    75% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, 30px);
      transform: translate(0, 30px);
    }
  
    to {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }

  @keyframes float {
    from {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }

    25% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, -30px);
      transform: translate(0, -30px);
    }

    75% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, 30px);
      transform: translate(0, 30px);
    }
  
    to {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }
  
  .float {
    -webkit-animation-name: float;
    animation-name: float;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  @-webkit-keyframes floatReverse {
    from {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }

    25% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, 30px);
      transform: translate(0, 30px);
    }

    75% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, -30px);
      transform: translate(0, -30px);
    }
  
    to {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }

  @keyframes floatReverse {
    from {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }

    25% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, 30px);
      transform: translate(0, 30px);
    }

    75% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, -30px);
      transform: translate(0, -30px);
    }
  
    to {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }
  
  .floatReverse {
    -webkit-animation-name: floatReverse;
    animation-name: floatReverse;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  @-webkit-keyframes swing {
    from {
      -webkit-transform-origin: top;
      transform-origin: top;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    25% {
      -webkit-transform-origin: top;
      transform-origin: top;
      -webkit-transform: rotate(10deg);
      transform: rotate(10deg);
    }

    75% {
      -webkit-transform-origin: top;
      transform-origin: top;
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }
  
    to {
      -webkit-transform-origin: top;
      transform-origin: top;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  }

  @keyframes swing {
    from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

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

    75% {
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }
  
    to {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  }
  
  .swing {
    -webkit-animation-name: swing;
    animation-name: swing;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-transform-origin: top;
    transform-origin: top;
  }

  .swingLeft {
    -webkit-animation-name: swing;
    animation-name: swing;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-transform-origin: left;
    transform-origin: left;
  }

  .swingBottom {
    -webkit-animation-name: swing;
    animation-name: swing;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }

  @-webkit-keyframes swingReverse {
    from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

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

    75% {
      -webkit-transform: rotate(10deg);
      transform: rotate(10deg);
    }
  
    to {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  }

  @keyframes swingReverse {
    from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

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

    75% {
      -webkit-transform: rotate(10deg);
      transform: rotate(10deg);
    }
  
    to {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  }
  
  .swingReverse {
    -webkit-animation-name: swingReverse;
    animation-name: swingReverse;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-transform-origin: top;
    transform-origin: top;
  }

  @-webkit-keyframes inWater {
    from {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(0deg)translate(0, 0);
      transform: rotate(0deg)translate(0, 0);
    }

    25% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(-2deg)translate(5px, -5px);
      transform: rotate(-2deg)translate(5px, -5px);
    }

    50% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(0deg)translate(-5px, 5px);
      transform: rotate(0deg)translate(-5px, 5px);
    }

    75% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(2deg)translate(5px, 5px);
      transform: rotate(2deg)translate(5px, 5px);
    }
  
    to {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(0deg)translate(0, 0);
      transform: rotate(0deg)translate(0, 0);
    }
  }

  @keyframes inWater {
    from {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(0deg)translate(0, 0);
      transform: rotate(0deg)translate(0, 0);
    }

    25% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(-2deg)translate(5px, -5px);
      transform: rotate(-2deg)translate(5px, -5px);
    }

    50% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(0deg)translate(-5px, 5px);
      transform: rotate(0deg)translate(-5px, 5px);
    }

    75% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(2deg)translate(5px, 5px);
      transform: rotate(2deg)translate(5px, 5px);
    }
  
    to {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(0deg)translate(0, 0);
      transform: rotate(0deg)translate(0, 0);
    }
  }
  
  .inWater {
    -webkit-animation-name: inWater;
    animation-name: inWater;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  @-webkit-keyframes inWaterReverse {
    from {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(0deg)translate(0, 0);
      transform: rotate(0deg)translate(0, 0);
    }

    25% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(2deg)translate(-5px, 5px);
      transform: rotate(2deg)translate(-5px, 5px);
    }

    50% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(0deg)translate(5px, -5px);
      transform: rotate(0deg)translate(5px, -5px);
    }

    75% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(2deg)translate(-5px, -5px);
      transform: rotate(2deg)translate(-5px, -5px);
    }
  
    to {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(0deg)translate(0, 0);
      transform: rotate(0deg)translate(0, 0);
    }
  }

  @keyframes inWaterReverse {
    from {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(0deg)translate(0, 0);
      transform: rotate(0deg)translate(0, 0);
    }

    25% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(2deg)translate(-5px, 5px);
      transform: rotate(2deg)translate(-5px, 5px);
    }

    50% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(0deg)translate(5px, -5px);
      transform: rotate(0deg)translate(5px, -5px);
    }

    75% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(2deg)translate(-5px, -5px);
      transform: rotate(2deg)translate(-5px, -5px);
    }
  
    to {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(0deg)translate(0, 0);
      transform: rotate(0deg)translate(0, 0);
    }
  }
  
  .inWaterReverse {
    -webkit-animation-name: inWaterReverse;
    animation-name: inWaterReverse;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }




  @-webkit-keyframes cloudFloat {
    from {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }

    25% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(-18px, 0);
      transform: translate(-18px, 0);
    }

    75% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(18px, 0);
      transform: translate(18px, 0);
    }

    to {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }

  @keyframes cloudFloat {
    from {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }

    25% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(-18px, 0);
      transform: translate(-18px, 0);
    }

    75% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(18px, 0);
      transform: translate(18px, 0);
    }

    to {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }
  
  .cloudFloat {
    -webkit-animation-name: cloudFloat;
    animation-name: cloudFloat;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }

  @-webkit-keyframes cloudFloatReverse {
    from {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }

    25% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(18px, 0);
      transform: translate(18px, 0);
    }

    75% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(-18px, 0);
      transform: translate(-18px, 0);
    }

    to {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }

  @keyframes cloudFloatReverse {
    from {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }

    25% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(18px, 0);
      transform: translate(18px, 0);
    }

    75% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(-18px, 0);
      transform: translate(-18px, 0);
    }

    to {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }
  
  .cloudFloatReverse {
    -webkit-animation-name: cloudFloatReverse;
    animation-name: cloudFloatReverse;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }

  @-webkit-keyframes imgLight {
    0% {
      opacity:1;
    }
    30% {
      opacity:1;
    }
    50% {
      opacity:0.5;
    }
    70% {
      opacity:0;
    }
    100% {
      opacity:0;
    }
  }

  @keyframes imgLight {
    0% {
      opacity:1;
    }
    30% {
      opacity:1;
    }
    50% {
      opacity:0.5;
    }
    70% {
      opacity:0;
    }
    100% {
      opacity:0;
    }
  }
  
  .imgLight {
    -webkit-animation-name: imgLight;
    animation-name: imgLight;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  @-webkit-keyframes imgLightReverse {
    0% {
      opacity:0;
    }
    30% {
      opacity:0;
    }
    50% {
      opacity:0.5;
    }
    70% {
      opacity:1;
    }
    100% {
      opacity:1;
    }
  }

  @keyframes imgLightReverse {
    0% {
      opacity:0;
    }
    30% {
      opacity:0;
    }
    50% {
      opacity:0.5;
    }
    70% {
      opacity:1;
    }
    100% {
      opacity:1;
    }
  }
  
  .imgLightReverse {
    -webkit-animation-name: imgLightReverse;
    animation-name: imgLightReverse;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  @-webkit-keyframes anime-opacity {
    0% {
      opacity:0;
    }
    1% {
      opacity:1;
    }
    26% {
      opacity:1;
    }
    27% {
      opacity:0;
    }
    100% {
      opacity:0;
    }
  }

  @keyframes anime-opacity {
    0% {
      opacity:0;
    }
    1% {
      opacity:1;
    }
    26% {
      opacity:1;
    }
    27% {
      opacity:0;
    }
    100% {
      opacity:0;
    }
  }
  
  .anime-opacity {
    -webkit-animation-name: anime-opacity;
    animation-name: anime-opacity;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }

  @-webkit-keyframes anime-opacity2 {
    0% {
      opacity:0;
    }
    1% {
      opacity:1;
    }
    13.5% {
      opacity:1;
    }
    14% {
      opacity:0;
    }
    100% {
      opacity:0;
    }
  }

  @keyframes anime-opacity2 {
    0% {
      opacity:0;
    }
    1% {
      opacity:1;
    }
    13.5% {
      opacity:1;
    }
    14% {
      opacity:0;
    }
    100% {
      opacity:0;
    }
  }
  
  .anime-opacity2 {
    -webkit-animation-name: anime-opacity2;
    animation-name: anime-opacity2;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }

  @-webkit-keyframes anime-opacity3 {
    0% {
      opacity:0;
    }
    1% {
      opacity:1;
    }
    17% {
      opacity:1;
    }
    18% {
      opacity:0;
    }
    100% {
      opacity:0;
    }
  }

  @keyframes anime-opacity3 {
    0% {
      opacity:0;
    }
    1% {
      opacity:1;
    }
    17% {
      opacity:1;
    }
    18% {
      opacity:0;
    }
    100% {
      opacity:0;
    }
  }
  
  .anime-opacity3 {
    -webkit-animation-name: anime-opacity3;
    animation-name: anime-opacity3;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }

  @-webkit-keyframes pack {

    20% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      transform: rotate(0deg);
    }

    21% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      transform: rotate(-3deg);
    }

    22% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      transform: rotate(0deg);
    }

    25% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      transform: rotate(0deg);
    }

    26% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      transform: rotate(-3deg);
    }

    27% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      transform: rotate(0deg);
    }

  }

  @keyframes pack {

    20% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      transform: rotate(0deg);
    }

    21% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      transform: rotate(-3deg);
    }

    22% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      transform: rotate(0deg);
    }

    25% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      transform: rotate(0deg);
    }

    26% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      transform: rotate(-3deg);
    }

    27% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      transform: rotate(0deg);
    }
  
  }
  
  .pack {
    -webkit-animation-name: pack;
    animation-name: pack;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }

  @keyframes anime-run {
    0% { left: calc(70%); bottom: 20px; transform: scaleX(1); }
    25% { bottom: 5px; transform: scaleX(1); }
    49.9% { left: 20%; bottom: 30px; transform: scaleX(1); }
    50% { left: 20%; bottom: 30px; transform: scaleX(-1);}
    75% { bottom: 5px; transform: scaleX(-1); }
    100% { left: calc(70%); bottom: 20px; transform: scaleX(-1); }
  }

  @media only screen and (max-width: 1024px){
    @keyframes anime-run {
      0% { left: calc(100% + 50px); bottom: 10px; transform: scaleX(1); }
      20% { bottom: 0; transform: scaleX(1); }
      49.9% { left: 50px; bottom: 45px; transform: scaleX(1); }
      50% { left: 50px; bottom: 45px; transform: scaleX(-1); }
      80% { bottom: 0; transform: scaleX(-1); }
      100% { left: calc(100% + 50px); bottom: 10px; transform: scaleX(-1); }
    }
  }

  @media only screen and (max-width: 520px){
    @keyframes anime-run {
      0% { left: calc(100% + 50px); bottom: 0px; transform: scaleX(1); }
      49.9% { left: 50px; bottom: 45px; transform: scaleX(1); }
      50% { left: 50px; bottom: 45px; transform: scaleX(-1); }
      100% { left: calc(100% + 50px); bottom: 0px; transform: scaleX(-1); }
    }
  }
  
  .anime-run {
    -webkit-animation-name: anime-run;
    animation-name: anime-run;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }


  @keyframes snow-down {
    0% { 
      opacity: 0;
    }

    21% { 
      transform: translateX(-9.5px)translateY(10.5px);
    }
    23% { 
      transform: translateX(-10px)translateY(11.5px);
    }
    25% { 
      opacity: 1; 
      transform: translateX(-10px)translateY(12.5px);
    }
    27% { 
      transform: translateX(-10px)translateY(13.5px);
    }
    29% { 
      transform: translateX(-9.5px)translateY(14.5px);
    }

    71% { 
      transform: translateX(9.5px)translateY(35.5px);
    }
    73% { 
      transform: translateX(10px)translateY(36.5px);
    }
    75% { 
      opacity: 1; 
      transform: translateX(10px)translateY(37.5px);
    }
    77% { 
      transform: translateX(10px)translateY(38.5px);
    }
    79% { 
      transform: translateX(9.5px)translateY(39.5px);
    }

    100% { 
      opacity: 0;
      transform: translateX(0px)translateY(50px);
     }
  }
  
  .snow-down {
    -webkit-animation-name: snow-down;
    animation-name: snow-down;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  @keyframes snow-downReverse {
    0% { 
      opacity: 0;
    }

    21% { 
      transform: translateX(9.5px)translateY(4px);
    }
    23% { 
      transform: translateX(10px)translateY(4.5px);
    }
    25% { 
      opacity: 1; 
      transform: translateX(10px)translateY(5px);
    }
    27% { 
      transform: translateX(10px)translateY(5.5px);
    }
    29% { 
      transform: translateX(9.5px)translateY(6px);
    }

    71% { 
      transform: translateX(-9.5px)translateY(14px);
    }
    73% { 
      transform: translateX(-10px)translateY(14.5px);
    }
    75% { 
      opacity: 1; 
      transform: translateX(-10px)translateY(15px);
    }
    77% { 
      transform: translateX(-10px)translateY(15.5px);
    }
    79% { 
      transform: translateX(-9.5px)translateY(16px);
    }

    100% { 
      opacity: 0;
      transform: translateX(0px)translateY(20px);
     }
  }
  
  .snow-downReverse {
    -webkit-animation-name: snow-downReverse;
    animation-name: snow-downReverse;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  @keyframes shake {

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

    21% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      transform: translateY(10px);
    }

    22% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      transform: translateY(-10px);
    }

    23% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      transform: translateY(10px);
    }

    24% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      transform: translateY(-10px);
    }

    25% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      transform: translateY(10px);
    }
  
    26% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      transform: translateY(-10px);
    }

    27% {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
      transform: translateY(10px);
    }

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

  }
  
  .shake {
    -webkit-animation-name: shake;
    animation-name: shake;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }






  .animated.delay-0_5s {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
  }

  .animated.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }

  .animated.delay-1_5s {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
  }
  
  .animated.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
  }

  .animated.delay-2_5s {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
  }

  .animated.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
  }

  .animated.delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
  }

  .animated.delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
  }

  .animated.delay-10s {
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
  }


  /*  */
  .animated.slow-2s {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
  }
  
  .animated.slow-3s {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
  }

  .animated.slow-4s {
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
  }

  .animated.slow-5s {
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
  }
  
  .animated.slow-6s {
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
  }

  .animated.slow-7s {
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
  }

  .animated.slow-8s {
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
  }
  
  .animated.slow-9s {
    -webkit-animation-duration: 9s;
    animation-duration: 9s;
  }
  .animated.slow-10s {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
  }

  .animated.slow-11s {
    -webkit-animation-duration: 11s;
    animation-duration: 11s;
  }
  
  .animated.slow-12s {
    -webkit-animation-duration: 12s;
    animation-duration: 12s;
  }

  .animated.slow-15s {
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
  }

  .animated.slow-20s {
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
  }

  .animated.slow-30s {
    -webkit-animation-duration: 30s;
    animation-duration: 30s;
  }
  
  .animated.slow-40s {
    -webkit-animation-duration: 40s;
    animation-duration: 40s;
  }
  
  .animated.slow-50s {
    -webkit-animation-duration: 50s;
    animation-duration: 50s;
  }

  .animated.slow-80s {
    -webkit-animation-duration: 80s;
    animation-duration: 80s;
  }

  .animated.slow-100s {
    -webkit-animation-duration: 100s;
    animation-duration: 100s;
  }

  .animated.slow-130s {
    -webkit-animation-duration: 130s;
    animation-duration: 130s;
  }

  .animated.slow-150s {
    -webkit-animation-duration: 150s;
    animation-duration: 150s;
  }

  .animated.slow-200s {
    -webkit-animation-duration: 200s;
    animation-duration: 200s;
  }

  .animated.infinite {
    animation-iteration-count: infinite;
  }