/* ==========================================================================
   swiper-custom.scss - custom fancybox style
   ========================================================================== */
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
  background-image: none;
}

#fancybox-loading div {
  background-image: url("/_assets/328332009003ebcdcb057b608a3f893a/Images/fancybox_loading.gif");
}

.fancybox-close {
  background: $white;
  border: 1px solid $brand-primary;
  cursor: pointer;
  height: 2.5rem;
  position: absolute;
  width: 2.5rem;
  transition: background .2s;
  &:hover {
    background: $brand-primary;
    &:before,
    &:after {
      background: $white;
    }
  }
  &:before,
  &:after {
    background: $brand-primary;
    content: "";
    height: 1px;
    margin-left: -.625rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transition: background .2s;
    width: 1.25rem;
  }
  &:before {
    transform: rotate(45deg);
  }
  &:after {
    transform: rotate(-45deg);
  }
}

.fancybox-nav {
  background: transparent;
  cursor: pointer;
  height: 2.375rem;
  margin-left: -1.1875rem;
  margin-top: -1.1875rem;
  position: absolute;
  top: 50%;
  width: 2.375rem;
  @include media-breakpoint-down(sm) {
    display: none;
  }
  &:hover {
    &:before,
    &:after {
      background: $brand-primary;
    }
  }
  &:before,
  &:after {
    background: $white;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    top: 50%;
    transition: background .2s;
    width: 1.625rem;
  }
  &:before {
    margin-top: -1px;
  }
  &.fancybox-next {
    right: -4rem;
    &:before,
    &:after {
      transform-origin: 100% 50%;
    }
    &:before {
      transform: rotate(-45deg);
    }
    &:after {
      transform: rotate(45deg);
    }
  }
  &.fancybox-prev {
    left: -2.75rem;
    &:before,
    &:after {
      transform-origin: 0 50%;
    }
    &:before {
      transform: rotate(45deg);
    }
    &:after {
      transform: rotate(-45deg);
    }
  }
  span {
    display: none;
  }
}

.fancybox-overlay {
  background: rgba($black, .85);
}

.fancybox-title {
  background: rgba($black,.9);
  bottom: auto;
  left: 0;
  font-family: $font-family-base;
  font-size: $font-size-base;
  margin-bottom: 0;
  padding: .125rem .25rem;
  right: 0;
  text-align: left;
  top: 100%;
  .child {
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    text-shadow: none;
    color: #999;
    font-weight: normal;
    line-height: $line-height-base;
    white-space: normal;
    letter-spacing: .025em;
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (min-device-pixel-ratio: 1.5) {

    #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
      background-image: none;
    }

    #fancybox-loading div {
      background-image: url("/_assets/328332009003ebcdcb057b608a3f893a/Images/fancybox_loading@2x.gif");
    }
}