/**
 * --------------------------------------------------------------------------------------------
 * FONT
 *
 * Apply font-size, line-height, and letter-spacing in one go.
 *
 * @usage
 *    @include font($font-size $line-height $letter-spacing);
 *    // All arguments are optional
 * --------------------------------------------------------------------------------------------
 */

.photo-credits {
  overflow: hidden;
}

.photo-credits__open {
  opacity: .7;
  -webkit-transition: opacity .35s cubic-bezier(.455, .03, .515, .955) .35s;
  transition: opacity .35s cubic-bezier(.455, .03, .515, .955) .35s;
}

.no-touch .photo-credits__open:hover {
  opacity: 1;
}

html[dir=rtl] .photo-credits__open {
  right: auto;
  left: 0;
  margin-right: 0;
  margin-left: 10%;
}

@media (min-width: 750px) {
  html[dir=rtl] .photo-credits__open {
    margin-left: 5%;
  }
}

@media (min-width: 1200px) {
  html[dir=rtl] .photo-credits__open {
    margin-left: 10%;
  }
}

.photo-credits__content {
  background-color: rgba(0, 0, 0, .8);
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: -webkit-transform .35s cubic-bezier(.455, .03, .515, .955) 0s;
  transition: -webkit-transform .35s cubic-bezier(.455, .03, .515, .955) 0s;
  transition: transform .35s cubic-bezier(.455, .03, .515, .955) 0s;
  transition: transform .35s cubic-bezier(.455, .03, .515, .955) 0s, -webkit-transform .35s cubic-bezier(.455, .03, .515, .955) 0s;
}

@media (min-width: 750px) {
  .photo-credits__content {
    width: 25%;
  }
}

.photo-credits__close {
  margin-right: calc(10% - .875rem);
}

@media (min-width: 750px) {
  .photo-credits__close {
    margin-right: calc(20% - .875rem);
  }

  html[dir=rtl] .photo-credits__close {
    margin-right: 0;
    margin-left: calc(20% - .875rem);
  }
}

@media (min-width: 1200px) {
  .photo-credits__close {
    margin-right: calc(10% + .5625rem);
  }

  html[dir=rtl] .photo-credits__close {
    margin-right: 0;
    margin-left: calc(10% + .5625rem);
  }
}

.no-touch .photo-credits__close:hover .icon {
  fill: #e00;
}

.photo-credits__close:focus .icon {
  fill: #8e8e8e;
}

html[dir=rtl] .photo-credits__close {
  right: auto;
  left: 0;
  margin-right: 0;
  margin-left: calc(10% - .875rem);
}

.photo-credits .caption {
  line-height: 1.125rem;
}

@media (min-width: 1200px) {
  .photo-credits .caption {
    font-size: .8125rem;
    line-height: 1.375rem;
  }
}

.photo-credits .caption p {
  font-size: inherit;
  line-height: inherit;
}

.photo-credits.is-open .photo-credits__open {
  opacity: 0;
  pointer-events: none;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.photo-credits.is-open .photo-credits__content {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition-delay: .35s;
  transition-delay: .35s;
}

/*# sourceMappingURL=photo-credits.css.map */