/*------------------------------------*
  >>> 404 PAGE STYLES
*------------------------------------*/

.error-wrapper {
  color: var(--soriva-body-text-color);
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
}

.error-wrapper .error-anime,
.error-wrapper .error-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}

.error-wrapper .error-anime {
  padding: 0 150px;
  margin: 0 0 50px;
  position: relative;
}

.error-wrapper .error-title {
  font-size: var(--soriva-h4-font-size);
  margin: 0 0 20px;
  width: 100%;
  display: inline-flex;
  justify-content: center;
  line-height: 1;
}

.error-wrapper h2.error-title {
  font-size: calc(var(--soriva-h2-font-size) + 15px);
  text-shadow: 2px 2px var(--soriva-heading-color), -2px 2px var(--soriva-heading-color), 2px -2px var(--soriva-heading-color), -2px -2px var(--soriva-heading-color), 5px 5px 0px rgba(var(--soriva-heading-color-rgb), .2);
  color: var(--soriva-body-background-color);
}

.error-wrapper .error-text {
  font-size: calc(var(--soriva-body-font-size) - 2px);
  margin: 0 0 25px 0;
  width: 100%;
  justify-content: center;
  display: inline-flex;
}

.error-wrapper a {
  display: inline-block;
  padding: 15px 30px;
  font-size: var(--soriva-body-font-size);
  border: 1px solid var(--soriva-primary-color);
  border-radius: 50px;
  font-weight: 500;
  line-height: 1;
  background: var(--soriva-primary-color);
  color: var(--soriva-light-color);
  text-transform: capitalize;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.error-wrapper a:hover {
  background: var(--soriva-secondary-color);
  border: 1px solid var(--soriva-secondary-color);
}

.error_page .circle {
  animation: circle-anim ease infinite;
  transform-origin: center;
  transform-box: fill-box;
  perspective: 0;
}

.error_page .circle.c1 {
  animation-duration: 2s;
}

.error_page .circle.c2 {
  animation-duration: 3s;
}

.error_page .circle.c3 {
  animation-duration: 1s;
}

.error_page .circle.c4 {
  animation-duration: 1s;
}

.error_page .circle.c5 {
  animation-duration: 2s;
}

.error_page .circle.c6 {
  animation-duration: 3s;
}

.four.a {
  transform-origin: bottom left;
  animation-duration: 3s;
  transform-box: fill-box;
}

.four.b {
  transform-origin: bottom right;
  animation-duration: 3s;
  transform-box: fill-box;
}

#ou {
  animation-duration: 6s;
  transform-origin: center;
  transform-box: fill-box;
}

.bg_shapes .cls-1 {
  fill: rgba(var(--soriva-primary-color-rgb), 0.1);
}

.bg_shapes .circle.c1
{
  animation: circle-anim-1 50s linear infinite;
  fill: var(--soriva-custom-color-1);
}

.bg_shapes .circle.c3
{
  animation: circle-anim-1 50s linear infinite;
  fill: var(--soriva-custom-color-2);
}

.bg_shapes .circle.c5
{
  animation: circle-anim-1 50s linear infinite;
  fill: var(--soriva-custom-color-3);
}

.bg_shapes .circle.c2 {
  animation: circle-anim-2 50s linear infinite;
  fill: var(--soriva-secondary-color);
}

.bg_shapes .circle.c4 {
  animation: circle-anim-2 50s linear infinite;
  fill: var(--soriva-custom-color-4);
}

.bg_shapes .circle.c6 {
  animation: circle-anim-2 50s linear infinite;
  fill: var(--soriva-custom-color-5);
}

.cls-0 {
  animation: color-animation 5s linear infinite alternate both;
}

.cls-2 {
  opacity: 0.6;
}

.cls-2,
.cls-3 {
  fill: var(--soriva-primary-color);
}

/* Animations */

@keyframes circle-anim-1 {
  25% {
    transform: rotate(10deg) translateY(5px);
  }
  75% {
    transform: rotate(-10deg);
  }
}

@keyframes circle-anim-2 {
  25% {
    transform: translateY(10px) rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}

@keyframes circle-anim {
  50% {
    transform: scale(0.2) rotateX(360deg) rotateY(360deg);
  }
}

@keyframes color-animation {
  0% {
    fill: rgba(var(--soriva-primary-color-rgb), 0.4);
  }
  25% {
    fill: rgba(var(--soriva-primary-color-rgb), 0.6);
  }
  50% {
    fill: var(--soriva-primary-color);
  }
  75% {
    fill: rgba(var(--soriva-primary-color-rgb), 0.6);
  }
  100% {
    fill: rgba(var(--soriva-primary-color-rgb), 0.4);
  }
}

/* Responsive */

/* Laptop, 1281px and up */
@media (min-width: 1281px) and (max-width: 1400px) {

  .error-wrapper .error-anime {
    padding: 0 120px;
  }

}

/* Tablets - Landscape, 1025px and up */
@media (min-width: 1025px) and (max-width: 1280px) {

  .error-wrapper .error-anime {
    padding: 0 100px;
  }

}

/* Tablets - Portrait, 768px and up */
@media (min-width: 768px) and (max-width: 1024px) {

  .error-wrapper .error-anime {
    padding: 0 50px;
  }

}

/* Mobile - Landscape, less than 767px */
@media (min-width: 576px) and (max-width: 767px) {

  .error-wrapper .error-anime {
    padding: 0;
  }

}

/* Mobile - Portrait, less than 575px */
@media (max-width: 575px) {

  .error-wrapper .error-anime {
    padding: 0;
  }

  .error-wrapper h2.error-title {
    font-size: calc(var(--soriva-h2-font-size) + 10px);
  }

  .error-wrapper .error-title {
    font-size: var(--soriva-h4-font-size);
  }

}