// ATTRACTION SLIDER AND ATTRACTION DETAILS HAS SAME CSS - MUST BE SPLITTED

.filter-elements .box.filter-red .figure:before {
  background: transparent linear-gradient(
                  180deg, #1dabeb00 0%, #1dabeb 100%) !important;
}

.filter-options.show {
  display: block;
}

.filter-options {
  display: none;
}

.filter-elements .box.filter-red {
  background: #1dabeb !important;
}

.slider-out .item {
  width: 100%;
  float: left;
}

.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot {
  background: none;
  color: inherit;
  border: none;
  padding: 0 !important;
  font: inherit;
}

@media (min-width: 992px) {
  .slider-out .owl-carousel {
    padding: 0;
  }
}

.slider-out .owl-carousel .owl-stage-outer {
  border-radius: 10px;
}

.slider-out {
  width: 43.62%;
  float: none;
  display: inline-block;
  vertical-align: top;
  margin: 0 0 0 -4px;
}

.slider-out .owl-carousel .owl-nav button.owl-prev {
  left: -30px;
}

.slider-out .owl-carousel .owl-nav button.owl-next {
  right: -30px;
}

.slider-out .owl-carousel .owl-nav button.owl-prev, .slider-out .owl-carousel .owl-nav button.owl-next {
  width: 60px;
  height: 60px;
  margin: 0;
}

.owl-carousel .owl-nav button.owl-prev:before, .owl-carousel .owl-nav button.owl-next:before {
  width: 100%;
  height: 100%;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  font-size: 2.5rem;
  color: #1a4e9a;
  line-height: 5rem;
  text-align: center;
  text-indent: 0;
  background: #ffffff;
  border: none;
  box-shadow: inset #1a4e9a 0 0 0 3px;
  border-radius: 360px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.slider-out .owl-carousel .owl-nav button.owl-prev:before, .slider-out .owl-carousel .owl-nav button.owl-next:before {
  font-size: 1.5rem;
  line-height: 3.75rem;
  box-shadow: none;
}

.hero-inner {
  width: 100%;
  min-height: 600px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  position: relative;
  overflow: inherit;
}

.hero-inner .hero-cont {
  width: 100%;
  float: left;
  font-size: 1.25rem;
  color: #ffffff;
  line-height: 1.5rem;
  text-transform: uppercase;
  position: relative;
  z-index: 3;
  padding: 250px 0 0 0;
  font-weight: 300;
}

.hero-inner .hero-cont .aside {
  width: 100%;
  float: left;
  position: relative;
}

.hero-inner .hero-cont .icon {
  width: 87px;
  height: 87px;
  float: left;
  line-height: 87px;
  text-align: center;
  background: #1dabeb;
  border-radius: 100%;
  position: absolute;
  bottom: -44px;
  left: 0;
  padding: 0;
  margin: 0;
}

@media (max-width: 575px) {
  .tx-wabs-attractions .iconbox {
    padding: 15px 20px 25px 20px;
  }
}

.hero-inner:before {
  content: "";
  width: 100%;
  height: 100%;
  float: left;
  background: transparent linear-gradient(
                  180deg, #00000000 0%, #000000A0 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.hero-inner .figure:before {
  display: none;
}

.hero-inner .hero-cont h1 {
  font-weight: 700;
  font-size: 3.125rem;
  line-height: 1.1em;
  padding-bottom: 15px;
}

.aside {
  width: 56.38%;
  float: none;
  display: inline-block;
  vertical-align: bottom;
  @include media-breakpoint-down(md) {
    padding: 0;
  }
  margin: 0 -4px 0 0;
}

@media (max-width: 992px) {
  .aside {
    width: 100%;
  }

  .slider-out {
    width: 100%;
  }
}

/* SliderButton to next related attraction */
.tx-wabs-attractions {

  .hero-inner {
    min-height: 65vh;
    @include media-breakpoint-down(md) {
      min-height: 50vh;
    }
    &.attraction-details {
      @include media-breakpoint-down(md) {
        margin-top: 148px;
      }
    }
    .hero-cont .aside h1 {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      padding: 0;
      margin-bottom: 10px;
    }
  }

  /* Attractions Slider Nav Style */
  .hero-inner.owl-carousel .owl-nav {

    button {
      width: 60px;
      @include media-breakpoint-down(xxl) {
        width: 40px;
      }
      @include media-breakpoint-down(md) {
        width: 30px;
      }

      &.owl-prev, &.owl-next {
        &:before {
          color: rgba(255, 255, 255, 0.85);
          border: 3px solid;
          height: 270px;
          line-height: 270px;
          width: 60px;
          background: none;
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
          transition: all 0.25s;
          @include media-breakpoint-down(xxl) {
            height: 180px;
            line-height: 180px;
            width: 40px;
          }
          @include media-breakpoint-down(md) {
            width: 30px;
            font-size: $font-size-24;
          }
        }

        &:hover:before {
          background: #ffffff33;
        }
      }

      &.owl-prev {
        left: 50px;
        @include media-breakpoint-down(xxl) {
          left: 25px
        }
        @include media-breakpoint-down(md) {
          left: 10px;
        }
      }

      &.owl-next {
        right: 50px;
        @include media-breakpoint-down(xxl) {
          right: 25px
        }
        @include media-breakpoint-down(md) {
          right: 10px;
        }
      }
    }
  }

  /* Layout 8 Style */
  .layout8-header {
    .figure:before {
      background: transparent linear-gradient(180deg, #000E1D00 0%, $primary-bg 100%) 0% 0% no-repeat padding-box;
      content: '';
      height: 30%;
      width: 100%;
      float: left;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 2;
      opacity: 1;
      display: block !important;
    }
  }

  .layout8 {
    padding-top: 2em;
    h3 {
      font-weight: 500;
    }

    .btn-wrapper,
    .button-desc {
      text-align: center;
    }

    .btn-wrapper .btn a:hover {
      color: white;
    }

    .button-desc {
      padding-bottom: 30px;
    }

    .iconrow {
      margin-top: 50px;

      .iconbox {
        border-radius: 50%;
        border-width: 2px;
        width: 200px;
        height: 200px;
        padding: 25px 20px 35px 20px;

        .icon {
          margin-bottom: 0;
        }

        p {
          padding-bottom: 10px;
          font-size: 1.125rem;
          font-weight: 700;
        }

        .value {
          font-weight: normal;
          font-size: 1.125rem;
        }
      }
    }

    .owl-nav {
      .owl-prev,
      .owl-next {
        &:before {
          background-color: transparent;
          color: white;
          font-weight: 200;
        }
        &:hover,
        &:active,
        &:focus {
          &:before {
            color: white;
          }
        }
      }
    }

    .map-title,
    .gallery-title,
    .related-title {
      text-align: center;
    }

    .map-image {
      justify-content: center;
      display: flex;
      align-items: center;
    }

    .aside.left {
      margin: 0 0 0 60px;
      padding-top: 4em;
      vertical-align: baseline;
    }

    &.colored {
      background-color: $secondary-bg;
      padding-bottom: 2em;
      padding-left: 2.5em;

      .aside {
        padding-top: 2em;
        vertical-align: baseline;
      }

      .slider-out {
        padding-top: 2em;
      }
    }

    .owl-carousel .owl-nav button.owl-prev,
    .owl-carousel .owl-nav button.owl-next {
      margin: 0;
    }


    @media (max-width: 1199.98px) and (min-width: 768px) {
      .feature-items {
        padding-bottom: 0;
      }
    }

    @media (max-width: 1047px) {
      .aside {
        margin: 0 30px 0 0;
      }

      .aside.left {
        margin: 0 0 0 30px;
      }
    }
    @media (max-width: 993px) {
      .slider-out {
        width: 43.62%;
      }
      .aside {
        margin: 0 30px 0 0;
      }

      .aside.left {
        margin: 0 0 0 30px;
      }
    }
    @media (max-width: 768px) {
      .slider-out {
        width: 100%;
        padding-top: 0;

        &.space-before-mobile {
          padding-top: 2em;
        }
      }
      .aside {
        width: 100%;

        &.left {
          padding-top: 0;
          margin: 0;
        }
      }
    }

    &:last-child {
      padding-bottom: 2em!important;
    }
  }
}

.attraction-details-social-icon {
  display: inline-block;
  border-radius: 360px;
  padding: 8px;
  float: right;
  width: 46px;
  height: 46px;
  margin-left: 10px;

  i::before {
    font-size: 30px;
    vertical-align: middle;
  }
  .fab.fa-facebook-f {
    padding-left: 5px;
  }
}

.toggle-icon-filter {
  img {
    rotate: 180deg;
  }
}

.aside.attraction-details-11 {
  vertical-align: middle;
  padding-top: 2em;
}
.slider-out.attraction-details-11 {
  padding-top: 2em;
}

.headline-details-11 {
  padding-top: 2em;
  h1 {
    padding-bottom: 0;
  }
}