/* global variables for the entire app */
/* never define selectors here or they will be included multiple times */
.error-page-container .error-page-content-container {
  margin-top: 50px;
  margin-bottom: 50px;
}

.error-page-container .image-container {
  margin-bottom: 20px;
}

.error-page-container .image-container .img-error {
  margin: 0 auto 50px;
}

.error-page-container .image-container .img-error:hover {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.error-page-container .title {
  font-size: 36px;
  font-weight: 500;
}

.error-page-container .description {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 500;
}

.error-page-container .action-container {
  margin-top: 20px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

@media (max-width: 767px) {
  .error-page-container {
    margin-bottom: 20px;
  }
  .error-page-container .error-page-content-container {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .error-page-container .image-container {
    margin-bottom: 15px;
  }
  .error-page-container .image-container .img-error {
    margin: 0 auto 20px;
  }
  .error-page-container .title {
    font-size: 24px;
  }
  .error-page-container .description {
    font-size: 14px;
  }
  .error-page-container .action-container {
    margin-top: 15px;
  }
}