/**
 * Stylesheet for Pull Quote content type
 */
/* IMPORTS */
/**
 * IMPORTS styles
 * import adds all the default scss files for theming
 * You will need to import it at the beginning of a scss file.
 * Example @import "scss/import";
 */
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}
.pull-quotes {
  position: relative;
  margin-bottom: 2.5rem;
  margin-top: 5rem;
}
@media (min-width: 768px) {
  .pull-quotes {
    margin-bottom: 5rem;
  }
}
@media (min-width: 992px) {
  .pull-quotes {
    margin-bottom: 7rem;
  }
}
.sidebar .pull-quotes {
  margin: 0;
}
.pull-quotes .slick__arrow {
  top: 11rem;
}
@media (max-width: 767.98px) {
  .pull-quotes .slick__arrow .slick-prev {
    left: -2rem;
  }
  .pull-quotes .slick__arrow .slick-next {
    right: -2rem;
  }
}
.pull-quotes .slick-slide {
  max-width: 70%;
  inset: 0;
}
.pull-quotes .icon {
  margin-bottom: 1.5rem;
  text-align: center;
}
@media (min-width: 768px) {
  .pull-quotes .icon {
    margin-bottom: 2.5rem;
    margin-top: 5rem;
  }
  .sidebar .pull-quotes .icon {
    margin-top: 0;
  }
}
.pull-quotes .icon svg {
  fill: #491e88;
  width: clamp(3rem, 8vw, 4rem);
  /*@media (prefers-color-scheme: dark) {
    @content;
  }*/
}
[data-darkreader-scheme=dark] .pull-quotes .icon svg, html[native-dark-active] .pull-quotes .icon svg {
  fill: #c6c6c6;
}
.pull-quotes .copy {
  text-align: center;
}
@media (min-width: 768px) {
  .pull-quotes .copy {
    margin: 0 auto;
    max-width: calc(100% - 14rem);
  }
  .sidebar .pull-quotes .copy {
    max-width: 100%;
  }
}
.pull-quotes .copy .summary::after {
  background-color: #00a9e0;
  content: "";
  display: block;
  height: 0.25rem;
  margin: 2rem auto;
  max-width: 18.75rem;
  width: 100%;
}
.pull-quotes .copy p {
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  font-weight: 300;
  line-height: 1.3;
}
.pull-quotes .copy .name {
  display: inline-block;
  font-size: 0;
}
.pull-quotes .copy span {
  font-size: clamp(1rem, 3vw, 1.3125rem);
  font-weight: 500;
}
.pull-quotes .copy .company {
  font-size: clamp(1rem, 3vw, 1.625rem);
  font-weight: 300;
}
.pull-quotes .slick__slide .no-image {
  padding: 0 2.5rem;
}
@media (min-width: 768px) {
  .pull-quotes .slick__slide .no-image {
    padding: 0;
  }
}
.pull-quotes .body {
  padding: 0 2rem;
}
@media (min-width: 1200px) {
  .pull-quotes .body {
    padding: 0;
  }
}
@media (min-width: 1200px) {
  .pull-quotes .body {
    align-items: center;
    display: grid;
    gap: 4rem;
    grid-template-columns: 16rem 1fr;
    margin: 0 auto;
    max-width: calc(100% - 10rem);
  }
}
.pull-quotes .body .image {
  display: grid;
  justify-content: center;
  padding-bottom: 1.5rem;
}
@media (min-width: 1200px) {
  .pull-quotes .body .image {
    padding-bottom: 0;
  }
}
.pull-quotes .body .image img {
  max-width: 25rem;
}
.pull-quotes .body .copy {
  max-width: 100%;
}
@media (min-width: 1200px) {
  .pull-quotes .body .copy {
    text-align: left;
  }
}
@media (min-width: 1200px) {
  .pull-quotes .body .copy .summary::after {
    margin: 2rem 0;
  }
}
.pull-quotes .slick-dots {
  margin-top: 1rem;
}

.pull-quotes {
  /*
  //css for gray background only
  &.gray-background {
    background: $viavi-gray-lightest;

    .summary {
      text-align: center;
    }

    .slick__slide {
      &:before {
        content: '';
        opacity: 0.3;
        transition: all 0.9s ease;
        z-index: 1;
      }

      &:hover {
        .image .media img {
          transform: scale3d(1.05, 1.05, 1);
        }

        &:before {
          opacity: 0.6;
        }
      }
    }

    .slick-arrow:before {
      color: $viavi-gray-darker;
    }

    .slick-dots {
      li button {
        background-color: $viavi-gray-darker;
        border: 1px solid $viavi-gray-darker;
      }
    }
  }

  //css for customer-image only
  &.customer-image {
    .summary {
      display: grid;
      grid-template-columns: 1fr;

      blockquote {
        border-left: 0.25rem solid $viavi-purple;
        padding: 1rem;
      }

      .image {
        margin: auto;
      }

      .body {
        line-height: 2.5rem;
        font-style: italic;
        font-weight: 300;
      }

      @include media-breakpoint-down(md) {
        blockquote {
          padding: 0 1rem;
          margin-top: 1rem;
          grid-column: 1 / span 2;
        }

        .image {
          grid-column: 1 / span 2;
        }
      }
    }

    .image {
      grid-area: 1 / col4-start / last-line / 2;
    }

    .slick-arrow:before {
      color: $viavi-gray-darker;
    }

    .slick-dots {
      li button {
        background-color: $viavi-gray-darker;
        border: 1px solid $viavi-gray-darker;
      }
    }
  }

  //css for hero-slide only
  &.hero-slider {
    .slick__slide {
      overflow: hidden;
      position: relative;
      @include gradient-darker-blue-to-deep-blue;

      &:before {
        content: '';
        height: 100%;
        left: 0;
        opacity: 0.3;
        position: absolute;
        top: 0;
        transition: all 0.9s ease;
        width: 100%;
        z-index: 1;
        @include gradient-darker-blue-to-deep-blue;
      }

      &:hover {
        .image .media img {
          transform: scale3d(1.05, 1.05, 1);
        }

        &:before {
          opacity: 0.6;
        }
      }
    }

    .summary {
      align-items: center;
      color: white;
      display: flex;
      padding: 3rem;
      position: relative;
      z-index: 2;
      min-height: 28.125rem;
    }

    .image {
      height: 100%;
      left: 0;
      margin: 0;
      position: absolute;
      top: 0;
      width: 100%;

      .contextual-region,
      .media {
        z-index: -1;
        position: unset;
      }

      .media {
        img {
          left: 0;
          object-fit: cover;
          position: absolute;
          top: 0;
          transition: all 5s ease;
          transform: scale3d(1, 1, 1);
        }
      }
    }

    .slick-prev,
    .slick-next {
      top: 50%;
    }
  }


  .slick-slider {
    min-height: 15.625rem;
  }

  .summary {
    padding: 3rem;

    @include media-breakpoint-up(md) {
      padding: 3.5rem 0.973rem;
    }

    .body {

      p:before,
      p:after {
        content: '"';
      }
    }
  }
  */
}
/*# sourceMappingURL=field--field-pull-quotes.css.map */