.errer_404_wrapper {
    position: fixed;
    left:0;top:0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: #f0f2f5;
    h2 {
        font-size: 60px;
        font-weight: 700;
        color: #8d8e8f;
        text-align: center;
        margin-top: 50px;
    }
    img {
        display: block;
        margin: 0 auto;
        margin-top: 20px;
        width: 380px;
    }

    .animated.hinge {
        animation-duration: 2s;
    }
    .hinge {
        animation-name: hinge;
    }
    .swing {
        transform-origin: top center;
        animation-name: swing;
    }
    .animated {
        animation-duration: 1s;
        animation-fill-mode: both;
    }
}



@keyframes hinge {
  0% {
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    transform: rotate3d(0, 0, 1, 60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

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

@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}