@charset "UTF-8";
.photostack {
  background: transparent;
  position: relative;
  text-align: center;
  overflow: hidden; }
  .photostack > div {
    width: 100%;
    height: 100%;
    margin: 0 auto; }
  .photostack figure {
    position: relative;
    display: inline-block;
    background: #fff;
    text-align: center;
    margin: 5px;
    opacity: 1; }
    .photostack figure a {
      font-size: 0; }
    .photostack figure img.single {
      margin: 6px;
      width: 200px;
      display: block; }
    .photostack figure img.pair {
      margin: 5px;
      width: 400px;
      display: none; }
    .photostack figure.photostack-current {
      z-index: 100;
      box-shadow: 3px 3px 30px -6px rgba(0, 0, 0, 0.75); }
      .photostack figure.photostack-current img.single {
        display: none; }
      .photostack figure.photostack-current img.pair {
        display: block; }
    .js .photostack figure {
      position: absolute;
      display: block;
      margin: 0; }
    .photostack figure::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      visibility: visible;
      opacity: 1;
      background: rgba(0, 0, 0, 0.05);
      -webkit-transition: opacity 0.6s;
      transition: opacity 0.6s; }
  .js .photostack {
    height: 400px; }
    .js .photostack::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      top: 0;
      left: 0;
      z-index: 100;
      -webkit-transition: opacity 0.3s, visibility 0s 0.3s;
      transition: opacity 0.3s, visibility 0s 0.3s; }
    .js .photostack::before, .js .photostack::after {
      opacity: 0;
      visibility: hidden; }
  .photostack figcaption h2 {
    display: none; }
  .photostack nav {
    position: absolute;
    width: 100%;
    bottom: 30px;
    z-index: 90;
    text-align: center;
    left: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s; }
    .photostack nav span {
      position: relative;
      display: inline-block;
      margin: 0 5px;
      width: 30px;
      height: 30px;
      cursor: pointer;
      background: #aaa;
      border-radius: 50%;
      text-align: center;
      -webkit-transition: -webkit-transform 0.6s ease-in-out, background 0.3s;
      transition: transform 0.6s ease-in-out, background 0.3s;
      -webkit-transform: scale(0.48);
      transform: scale(0.48); }
      .photostack nav span:last-child {
        margin-right: 0; }
      .photostack nav span::after {
        content: "";
        font-family: "icons";
        font-size: 80%;
        speak: none;
        display: inline-block;
        vertical-align: top;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 30px;
        color: #fff;
        opacity: 0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden; }
      .photostack nav span.current {
        background: #888;
        -webkit-transform: scale(1);
        transform: scale(1); }
        .photostack nav span.current.flip {
          -webkit-transform: scale(1) rotateY(-180deg) translateZ(-1px);
          transform: scale(1) rotateY(-180deg) translateZ(-1px);
          background: #555; }
      .photostack nav span.flippable::after {
        opacity: 1;
        -webkit-transition-delay: 0.4s;
        transition-delay: 0.4s; }

.photostack-start {
  cursor: pointer; }
  .photostack-start figure {
    opacity: 0;
    transition: opacity 0.1s; }
  .photostack-start nav {
    opacity: 0; }
  .js .photostack-start::before {
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s; }
  .js .photostack-start::before, .js .photostack-start:hover::after, .touch .photostack-start::after {
    opacity: 1;
    visibility: visible; }

.photostack-img {
  outline: none;
  display: block;
  width: auto;
  height: auto; }

.photostack-back {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fff;
  color: #a7a0a2;
  padding: 50px 40px;
  text-align: left;
  font-size: 22px;
  line-height: 1.25;
  z-index: 1; }
  .photostack-back p {
    margin: 0; }
    .photostack-back p span {
      text-decoration: line-through; }

figure.photostack-current::after {
  -webkit-transition: opacity 0.6s, visibility 0s 0.6s;
  transition: opacity 0.6s, visibility 0s 0.6s;
  opacity: 0;
  visibility: hidden; }

.photostack-transition figure {
  -webkit-transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out; }

.photostack-perspective {
  -webkit-perspective: 1800px;
  perspective: 1800px; }
  .photostack-perspective > div,
  .photostack-perspective figure {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d; }
  .photostack-perspective figure,
  .photostack-perspective figure div {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; }
  .photostack-perspective figure.photostack-flip {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%; }

.csstransformspreserve3d figure.photostack-flip .photostack-back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  display: block; }

.no-csstransformspreserve3d figure.photostack-showback .photostack-back {
  display: block; }

.no-js .photostack figure {
  box-shadow: -2px 2px 0 rgba(0, 0, 0, 0.05); }
  .no-js .photostack figure::after {
    display: none; }
  .no-js .photostack figure:nth-child(3n) {
    -webkit-transform: translateX(-10%) rotate(5deg);
    transform: translateX(-10%) rotate(5deg); }
  .no-js .photostack figure:nth-child(3n-2) {
    -webkit-transform: translateY(10%) rotate(-3deg);
    transform: translateY(10%) rotate(-3deg); }

.photostack-control-prev, .photostack-control-next {
  position: absolute;
  top: 50%;
  font-size: 0;
  width: 30px;
  height: 90px; }

.photostack-control-prev {
  left: 0;
  margin-left: 20px; }

.photostack-control-next {
  right: 0;
  margin-right: 20px; }

.photostack-control-prev::before, .photostack-control-next::before {
  border-color: #fff;
  border-style: solid;
  border-width: 2px 2px 0 0;
  content: "";
  display: block;
  height: 30px;
  margin-top: -15px;
  position: absolute;
  vertical-align: top;
  width: 30px;
  left: 0;
  opacity: 1;
  z-index: 99;
  transform-origin: 50% 50%;
  transition: all 0.2s; }

.photostack-control-prev::before {
  transform: rotate(-135deg) skew(20deg, 20deg); }

.photostack-control-next::before {
  transform: rotate(45deg) skew(20deg, 20deg); }

@media (min-width: 550px) {
  .photostack figure img.pair {
    margin: 8px;
    width: 500px; }
  .js .photostack {
    height: 500px;
    max-height: 65vh; } }
@media (min-width: 750px) {
  .photostack figure img.pair {
    margin: 11px;
    width: 600px; }

  .photostack-control-prev::before, .photostack-control-next::before {
    left: 50%; }

  .photostack-control-prev {
    left: auto;
    right: auto;
    margin-left: -355px;
    margin-right: 0; }

  .photostack-control-next {
    left: auto;
    right: auto;
    margin-left: 295px;
    margin-right: 0; } }