@import "../../../basic_imports";

/* Old error pages */
.bg_page_not_found {
  background: url('/headers/ilusion/img/cabeceras/cabecera_404_pro.jpg') no-repeat 50% 0;
  width: 100%;
  left: 0;
  margin-left: 0;
  z-index: -1;
  height: 436px;
  position: absolute;
}

.home_search_box {
  margin: 40px auto;
}
/* New Page 404 */
.bg_page_404 {
  background: rgb(255,255,255);
  position: relative;
  padding-top: 30px;
  @media (min-width: $grid-float-breakpoint) {
    padding-top: 50px;
  }
  > .container-limited {
    position: relative;
    z-index: 2;
  }
  .background-decor {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    height: 210px;
    background: linear-gradient(180deg, rgba(250, 234, 177, 1) 0%, rgba(250, 234, 177, 1) 50%, rgba(255, 251, 204, 1) 50%, rgba(255, 251, 204, 1) 80%, rgba(255, 255, 255, 1) 100%);
    @media (min-width: $grid-float-breakpoint) {
      height: 350px;
    }
    .sea {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      z-index: 1;
      overflow: hidden;
      background: #6f87b9;
      background: linear-gradient(180deg, #6f87b9 50%, rgba(255, 255, 255, 0)  50%, rgba(255, 255, 255, 0) 100%);
      height: 90px;
      @media (min-width: $grid-float-breakpoint) {
        height: 150px;
      }
      &:before, &:after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
      }
      &:before {
        background: #8ca8e0;
        animation: wave1 7s ease infinite;
        height: 50px;
        top: 15px;
        z-index: 2;
        @media (min-width: $grid-float-breakpoint) {
          height: 60px;
          top: 20px;
        }
      }
      &:after {
        background: linear-gradient(180deg, #b1d9f6 75%, white 75%, white 90%, rgba(255, 255, 255, 0) 98%);
        animation: wave2 7s ease infinite;
        height: 62px;
        top: 28px;
        z-index: 3;
        @media (min-width: $grid-float-breakpoint) {
          height: 100px;
          top: 50px;
        }
      }
    }
  }
  .messages {
    position: relative;
    z-index: 3;
    padding: 0 15px 230px;
    text-align: center;
    @media (min-width: $grid-float-breakpoint) {
      padding: 0 210px 380px 45px;
      text-align: left;
    }
    @media (min-width: $screen-lg-min) {
      padding: 0 330px 400px 80px;
    }
    h1.main-title {
      color: $brand-grey-dark;
      font-size: 26px;
      margin-top: 0;
      @media (min-width: $grid-float-breakpoint) {
        font-size: 36px;
      }
      @media (min-width: $screen-lg-min) {
        font-size: 44px;
      }
    }
    .copy {
      font-size: 18px;
      color: $brand-grey-dark;
      max-width: 360px;
      margin: 0 auto 10px;
      @media (min-width: $grid-float-breakpoint) {
        max-width: 380px;
        font-size: 20px;
        margin: 0 0 10px;
      }
      @media (min-width: $screen-lg-min) {
        max-width: 650px;
        font-size: 24px;
        margin-bottom: 15px;
      }
    }
    .errortext {
      font-size: 14px;
      margin-bottom: 15px;
      @media (min-width: $grid-float-breakpoint) {
        margin-bottom: 30px;
      }
      @media (min-width: $screen-lg-min) {
        font-size: 18px;
      }
    }
    .page-not-found__links-container {
      ul {
        @media (min-width: $grid-float-breakpoint) {
          display: flex;
          flex-wrap: nowrap;
          gap: 20px;
        }
        @media (min-width: $screen-lg-min) {
          gap: 45px;
        }
        li {
          margin-bottom: 10px;
          a {
            font-size: 16px;
            color: $brand-grey-dark;
            text-decoration: underline;
            @media (min-width: $screen-lg-min) {
              font-size: 20px;
            }
          }
        }
      }
    }
  }
  .decoration {
    &:before {
      content: "";
      display: none;
      background: url("/headers/ilusion/img/error/palm.svg") bottom center no-repeat;
      position: absolute;
      right: 30px;
      bottom: 0;
      z-index: 3;
      background-size: contain;
      @media (min-width: $grid-float-breakpoint) {
        display: block;
        width: 225px;
        height: 255px;
        bottom: 340px;
      }
      @media (min-width: $screen-lg-min) {
        display: block;
        width: 300px;
        height: 312px;
        bottom: 340px;
      }
    }
    &:after {
      content: "";
      display: block;
      background: url("/headers/ilusion/img/error/ordenador.svg") bottom center no-repeat;
      position: absolute;
      z-index: 2;
      bottom: 45px;
      max-width: 100%;
      height: 126px;
      background-size: contain;
      left: 0;
      right: 0;
      @media (min-width: $grid-float-breakpoint) {
        left: 45px;
        right: 45px;
        height: 224px;
        bottom: 70px;
      }
      @media (min-width: $screen-lg-min) {
        width: 858px;
        height: 283px;
        left: 0;
        right: auto;
        bottom: 45px;
      }
    }
  }
}
@keyframes wave1 {
  0% {
    transform: translateY(2%);
  }
  50%{
    transform: translateY(-5%);
  }
  100%{
    transform: translateY(2%);
  }
}
@keyframes wave2 {
  0% {
    transform: translateY(7%);
  }
  50%{
    transform: translateY(-7%);
  }
  100%{
    transform: translateY(7%);
  }
}