* {
  margin: 0;
  padding: 0;
}



section {
  text-align: left;
  padding-bottom: 60px;
}
section ul {
  list-style: inside;
}


.photo-slider {
  margin-bottom: 20px;
  display: inline-block;
  max-width: 612px;
}

.wallop-slider {
  position: relative;
}

.small-slider {
  max-width: 320px;
  display: inline-block;
  vertical-align: top;
  margin: 10px;
}


@media only screen and (min-width: 480px) {
  .btn {
    position: fixed;
    z-index: 3;
    top: 100%;
    opacity: 1;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    color: black;
    border: none;
    text-transform: uppercase;
    background-color: white;
    font-size: 14px;
    font-family: Helvetica;
    text-align: left;
    font-weight: 600;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 10px;
    cursor: pointer;
    text-decoration: none;
    margin-top: -25px;
    padding-top: 1px;
  }
  .btn:hover {
    color: white;
    background-color: black;
    text-decoration: none;
  }

  .btn--previous {
    margin-left: 15px;
  }
  .btn--next {
    margin-right: 15px;
  }
}


.btn:hover {
  cursor: pointer;
}
.btn[disabled] {
  opacity: .4;
}
.btn[disabled], .btn[disabled]:hover {
  cursor: default;
}
@media only screen and (min-width: 480px) {
  .btn[disabled] {
    visibility: hidden;
  }
}

@media only screen and (min-width: 480px) {
  .btn--previous {
    left: 10px;
  }
}

@media only screen and (min-width: 480px) {
  .btn--next {
    right: 10px;
  }
}

.goto {
  padding: 5px;
}

footer {
  padding-bottom: 30px;
}

.wallop-slider {
  width: 100%;
}

.wallop-slider__list {
  list-style: none;
  position: relative;
  overflow: hidden;
}

.wallop-slider__item {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}


.wallop-slider__item--current {
  display: block;
  position: static;
}

/*==========  SLIDE CONFIG  ==========*/
/* the 10ms animation-delay fixed some weird rendering issues with iPhone */
.wallop-slider--slide .wallop-slider__item--show-previous {
  -webkit-animation: slideFromLeft 350ms 10ms linear both;
  -moz-animation: slideFromLeft 350ms 10ms linear both;
  -ms-animation: slideFromLeft 350ms 10ms linear both;
  animation: slideFromLeft 350ms 10ms linear both;
}
.wallop-slider--slide .wallop-slider__item--show-next {
  -webkit-animation: slideFromRight 350ms 10ms linear both;
  -moz-animation: slideFromRight 350ms 10ms linear both;
  -ms-animation: slideFromRight 350ms 10ms linear both;
  animation: slideFromRight 350ms 10ms linear both;
}
.wallop-slider--slide .wallop-slider__item--hide-previous, .wallop-slider--slide .wallop-slider__item--hide-next {
  display: block;
}
.wallop-slider--slide .wallop-slider__item--hide-previous {
  -webkit-animation: slideToLeft 350ms 10ms linear both;
  -moz-animation: slideToLeft 350ms 10ms linear both;
  -ms-animation: slideToLeft 350ms 10ms linear both;
  animation: slideToLeft 350ms 10ms linear both;
}
.wallop-slider--slide .wallop-slider__item--hide-next {
  -webkit-animation: slideToRight 350ms 10ms linear both;
  -moz-animation: slideToRight 350ms 10ms linear both;
  -ms-animation: slideToRight 350ms 10ms linear both;
  animation: slideToRight 350ms 10ms linear both;
}

/*==========  SLIDE ANIMATIONS  ==========*/
@-webkit-keyframes slideFromLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@-moz-keyframes slideFromLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@-ms-keyframes slideFromLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideFromLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@-webkit-keyframes slideFromRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@-moz-keyframes slideFromRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@-ms-keyframes slideFromRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideFromRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@-webkit-keyframes slideToLeft {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@-moz-keyframes slideToLeft {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@-ms-keyframes slideToLeft {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideToLeft {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@-webkit-keyframes slideToRight {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@-moz-keyframes slideToRight {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@-ms-keyframes slideToRight {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideToRight {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

/*==========  VERTICAL SLIDE CONFIG  ==========*/
.wallop-slider--vertical-slide {
  /* the 10ms animation-delay fixed some weird rendering issues with iPhone */
}
.wallop-slider--vertical-slide .wallop-slider__list {
  position: relative;
  overflow: hidden;
}
.wallop-slider--vertical-slide .wallop-slider__item--show-next {
  -webkit-animation: slideFromTop 350ms 10ms linear both;
  -moz-animation: slideFromTop 350ms 10ms linear both;
  -ms-animation: slideFromTop 350ms 10ms linear both;
  animation: slideFromTop 350ms 10ms linear both;
}
.wallop-slider--vertical-slide .wallop-slider__item--show-previous {
  -webkit-animation: slideFromBottom 350ms 10ms linear both;
  -moz-animation: slideFromBottom 350ms 10ms linear both;
  -ms-animation: slideFromBottom 350ms 10ms linear both;
  animation: slideFromBottom 350ms 10ms linear both;
}
.wallop-slider--vertical-slide .wallop-slider__item--hide-previous,
.wallop-slider--vertical-slide .wallop-slider__item--hide-next {
  display: block;
}
.wallop-slider--vertical-slide .wallop-slider__item--hide-previous {
  -webkit-animation: slideToBottom 350ms 10ms linear both;
  -moz-animation: slideToBottom 350ms 10ms linear both;
  -ms-animation: slideToBottom 350ms 10ms linear both;
  animation: slideToBottom 350ms 10ms linear both;
}
.wallop-slider--vertical-slide .wallop-slider__item--hide-next {
  -webkit-animation: slideToTop 350ms 10ms linear both;
  -moz-animation: slideToTop 350ms 10ms linear both;
  -ms-animation: slideToTop 350ms 10ms linear both;
  animation: slideToTop 350ms 10ms linear both;
}

/*==========  VERTICAL SLIDE ANIMATIONS  ==========*/
@-webkit-keyframes slideFromTop {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@-moz-keyframes slideFromTop {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@-ms-keyframes slideFromTop {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideFromTop {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@-webkit-keyframes slideFromBottom {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@-moz-keyframes slideFromBottom {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@-ms-keyframes slideFromBottom {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideFromBottom {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@-webkit-keyframes slideToTop {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}

@-moz-keyframes slideToTop {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}

@-ms-keyframes slideToTop {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}

@keyframes slideToTop {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}

@-webkit-keyframes slideToBottom {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
}

@-moz-keyframes slideToBottom {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
}

@-ms-keyframes slideToBottom {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
}

@keyframes slideToBottom {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
}

/*==========  FADE CONFIG  ==========*/
.wallop-slider--fade .wallop-slider__item--hide-previous,
.wallop-slider--fade .wallop-slider__item--hide-next {
  display: block;
  -webkit-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -moz-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -ms-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

/*==========  FADE ANIMATIONS  ==========*/
@-webkit-keyframes fadeOut {
  100% {
    opacity: 0;
  }
}

@-moz-keyframes fadeOut {
  100% {
    opacity: 0;
  }
}

@-ms-keyframes fadeOut {
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  100% {
    opacity: 0;
  }
}

/*==========  FOLD CONFIG  ==========*/
.wallop-slider--fold .wallop-slider__list {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}
.wallop-slider--fold .wallop-slider__item--current {
  position: relative;
}
.wallop-slider--fold .wallop-slider__item--show-previous {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform-origin: center left;
  -moz-transform-origin: center left;
  -ms-transform-origin: center left;
  transform-origin: center left;
  -webkit-animation: foldFromLeft 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -moz-animation: foldFromLeft 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -ms-animation: foldFromLeft 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation: foldFromLeft 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  z-index: 2;
}
.wallop-slider--fold .wallop-slider__item--show-next {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform-origin: center right;
  -moz-transform-origin: center right;
  -ms-transform-origin: center right;
  transform-origin: center right;
  -webkit-animation: foldFromRight 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -moz-animation: foldFromRight 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -ms-animation: foldFromRight 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation: foldFromRight 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  z-index: 1;
}
.wallop-slider--fold .wallop-slider__item--hide-previous,
.wallop-slider--fold .wallop-slider__item--hide-next {
  display: block;
}

/*==========  FOLD ANIMATIONS  ==========*/
@-webkit-keyframes foldFromLeft {
  0% {
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
  }
}

@-moz-keyframes foldFromLeft {
  0% {
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
  }
}

@-ms-keyframes foldFromLeft {
  0% {
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
  }
}

@keyframes foldFromLeft {
  0% {
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
  }
}

@-webkit-keyframes foldFromRight {
  0% {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
}

@-moz-keyframes foldFromRight {
  0% {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
}

@-ms-keyframes foldFromRight {
  0% {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
}

@keyframes foldFromRight {
  0% {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
}

/*==========  SCALE CONFIG  ==========*/
.wallop-slider--scale .wallop-slider__item--hide-previous,
.wallop-slider--scale .wallop-slider__item--hide-next {
  display: block;
  -webkit-animation: scaleOut 350ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
  -moz-animation: scaleOut 350ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
  -ms-animation: scaleOut 350ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
  animation: scaleOut 350ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
}

/*==========  SCALE ANIMATIONS  ==========*/
@-webkit-keyframes scaleOut {
  100% {
    -webkit-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -ms-transform: scale(1.6);
    transform: scale(1.6);
    opacity: 0;
  }
}

@-moz-keyframes scaleOut {
  100% {
    -webkit-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -ms-transform: scale(1.6);
    transform: scale(1.6);
    opacity: 0;
  }
}

@-ms-keyframes scaleOut {
  100% {
    -webkit-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -ms-transform: scale(1.6);
    transform: scale(1.6);
    opacity: 0;
  }
}

@keyframes scaleOut {
  100% {
    -webkit-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -ms-transform: scale(1.6);
    transform: scale(1.6);
    opacity: 0;
  }
}

/*==========  SPECIAL CONFIG  ==========*/
.wallop-slider--rotate .wallop-slider__item--hide-previous,
.wallop-slider--rotate .wallop-slider__item--hide-next {
  display: block;
}
.wallop-slider--rotate .wallop-slider__item--hide-previous {
  -webkit-animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -moz-animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -ms-animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}
.wallop-slider--rotate .wallop-slider__item--hide-next {
  -webkit-animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -moz-animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -ms-animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

/*==========  SPCECIAL ANIMATIONS  ==========*/
@-webkit-keyframes rotateToLeft {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate(90deg);
    -moz-transform: translate3d(-100%, 0, 0) rotate(90deg);
    -ms-transform: translate3d(-100%, 0, 0) rotate(90deg);
    transform: translate3d(-100%, 0, 0) rotate(90deg);
  }
}

@-moz-keyframes rotateToLeft {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate(90deg);
    -moz-transform: translate3d(-100%, 0, 0) rotate(90deg);
    -ms-transform: translate3d(-100%, 0, 0) rotate(90deg);
    transform: translate3d(-100%, 0, 0) rotate(90deg);
  }
}

@-ms-keyframes rotateToLeft {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate(90deg);
    -moz-transform: translate3d(-100%, 0, 0) rotate(90deg);
    -ms-transform: translate3d(-100%, 0, 0) rotate(90deg);
    transform: translate3d(-100%, 0, 0) rotate(90deg);
  }
}

@keyframes rotateToLeft {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate(90deg);
    -moz-transform: translate3d(-100%, 0, 0) rotate(90deg);
    -ms-transform: translate3d(-100%, 0, 0) rotate(90deg);
    transform: translate3d(-100%, 0, 0) rotate(90deg);
  }
}

@-webkit-keyframes rotateToRight {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(-90deg);
    -moz-transform: translate3d(100%, 0, 0) rotate(-90deg);
    -ms-transform: translate3d(100%, 0, 0) rotate(-90deg);
    transform: translate3d(100%, 0, 0) rotate(-90deg);
  }
}

@-moz-keyframes rotateToRight {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(-90deg);
    -moz-transform: translate3d(100%, 0, 0) rotate(-90deg);
    -ms-transform: translate3d(100%, 0, 0) rotate(-90deg);
    transform: translate3d(100%, 0, 0) rotate(-90deg);
  }
}

@-ms-keyframes rotateToRight {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(-90deg);
    -moz-transform: translate3d(100%, 0, 0) rotate(-90deg);
    -ms-transform: translate3d(100%, 0, 0) rotate(-90deg);
    transform: translate3d(100%, 0, 0) rotate(-90deg);
  }
}

@keyframes rotateToRight {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(-90deg);
    -moz-transform: translate3d(100%, 0, 0) rotate(-90deg);
    -ms-transform: translate3d(100%, 0, 0) rotate(-90deg);
    transform: translate3d(100%, 0, 0) rotate(-90deg);
  }
}

@media only screen and (min-width: 480px) {
  .wallop-slider--targeted .wallop-slider__item--hide-previous,
  .wallop-slider--targeted .wallop-slider__item--hide-next {
    display: block;
    -webkit-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
    -moz-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
    -ms-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
    animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  }
}

/*==========  FADE ANIMATIONS  ==========*/
@-webkit-keyframes fadeOut {
  100% {
    opacity: 0;
  }
}

@-moz-keyframes fadeOut {
  100% {
    opacity: 0;
  }
}

@-ms-keyframes fadeOut {
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  100% {
    opacity: 0;
  }
}

/*==========  EXPERIMENTAL CONFIG  ==========*/
.wallop-slider--experimental .wallop-slider__list {
  overflow: visible;
  -webkit-perspective: 1000;
}
.wallop-slider--experimental .wallop-slider__item {
  -webkit-transition: all 650ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-transform: translateZ(0);
}
.wallop-slider--experimental .wallop-slider__item--current {
  position: relative;
}
.wallop-slider--experimental .wallop-slider__item--current + .wallop-slider__item,
.wallop-slider--experimental .wallop-slider__item--hide-next {
  display: block;
  -webkit-transform: translate3d(100%, 0, 0) rotateY(-18deg);
  -webkit-transform-origin: left center;
}
.wallop-slider--experimental .wallop-slider__item--before-current {
  display: block;
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(18deg);
  -webkit-transform-origin: right center;
}
.wallop-slider--experimental .wallop-slider__item--before-before {
  display: block;
  -webkit-transform: translate3d(-200%, 0, 0) rotateY(18deg);
  -webkit-transform-origin: right center;
}
.wallop-slider--experimental .wallop-slider__item--hide-next + .wallop-slider__item {
  display: block;
  -webkit-transform-origin: left center;
}
.wallop-slider--experimental .wallop-slider__item--show-next + .wallop-slider__item {
  display: block;
  -webkit-animation: showNext 650ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -webkit-transform-origin: left center;
}
.wallop-slider--experimental .wallop-slider__item--hide-next + .wallop-slider__item {
  display: block;
  -webkit-animation: hideNext 650ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -webkit-transform-origin: left center;
}
.wallop-slider--experimental .wallop-slider__item--hide-previous {
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(18deg);
  -webkit-transform-origin: right center;
}

/*==========  EXPERIMENTAL ANIMATIONS  ==========*/
@-webkit-keyframes showNext {
  0% {
    -webkit-transform: translate3d(200%, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(100%, 0, 0) rotateY(-18deg);
  }
}

@-webkit-keyframes hideNext {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) rotateY(-18deg);
  }

  100% {
    -webkit-transform: translate3d(200%, 0, 0) rotateY(-18deg);
  }
}

/**
 * prism.js Twilight theme
 * Based (more or less) on the Twilight theme originally of Textmate fame.
 * @author Remy Bach
 */
code[class*="language-"],
pre[class*="language-"] {
  color: white;
  direction: ltr;
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-size: 18px;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre[class*="language-"],
:not(pre) > code[class*="language-"] {
  background: #141414;
  /* #141414 */
}

/* Code blocks */
pre[class*="language-"] {
  margin: .5em 0;
  overflow: auto;
  padding: 1em;
}

pre[class*="language-"]::selection {
  /* Safari */
  background: #27292a;
  /* #282A2B */
}

pre[class*="language-"]::selection {
  /* Firefox */
  background: #27292a;
  /* #282A2B */
}

/* Text Selection colour */
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
  text-shadow: none;
  background: rgba(237, 237, 237, 0.15);
  /* #EDEDED */
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
  text-shadow: none;
  background: rgba(237, 237, 237, 0.15);
  /* #EDEDED */
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  border-radius: .3em;
  border: 0.13em solid #545454;
  /* #545454 */
  box-shadow: 1px 1px 0.3em -0.1em black inset;
  padding: .15em .2em .05em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #787878;
  /* #777777 */
}

.token.punctuation {
  opacity: .7;
}

.namespace {
  opacity: .7;
}

.token.tag,
.token.boolean,
.token.number {
  color: #cf694a;
  /* #CF6A4C */
}

.token.keyword,
.token.property,
.token.selector,
.token.constant,
.token.symbol,
.token.builtin {
  color: #f9ee9a;
  /* #F9EE98 */
}

.token.attr-name,
.token.attr-value,
.token.string,
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: #919e6b;
  /* #8F9D6A */
}

.token.atrule {
  color: #7386a5;
  /* #7587A6 */
}

.token.regex,
.token.important {
  color: #e9c163;
  /* #E9C062 */
}

.token.important {
  font-weight: bold;
}

.token.entity {
  cursor: help;
}

pre[data-line] {
  padding: 1em 0 1em 3em;
  position: relative;
}

/* Markup */
.language-markup .token.tag,
.language-markup .token.attr-name,
.language-markup .token.punctuation {
  color: #ad895c;
  /* #AC885B */
}

/* Make the tokens sit above the line highlight so the colours don't look faded. */
.token {
  position: relative;
  z-index: 1;
}

.line-highlight {
  background: -moz-linear-gradient(left, rgba(84, 84, 84, 0.1) 70%, rgba(84, 84, 84, 0));
  /* #545454 */
  background: -o-linear-gradient(left, rgba(84, 84, 84, 0.1) 70%, rgba(84, 84, 84, 0));
  /* #545454 */
  background: -webkit-linear-gradient(left, rgba(84, 84, 84, 0.1) 70%, rgba(84, 84, 84, 0));
  /* #545454 */
  background: rgba(84, 84, 84, 0.25);
  /* #545454 */
  background: linear-gradient(left, rgba(84, 84, 84, 0.1) 70%, rgba(84, 84, 84, 0));
  /* #545454 */
  border-bottom: 1px dashed #545454;
  /* #545454 */
  border-top: 1px dashed #545454;
  /* #545454 */
  left: 0;
  line-height: inherit;
  margin-top: 0.75em;
  /* Same as .prism’s padding-top */
  padding: inherit 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  white-space: pre;
  z-index: 0;
}

.line-highlight:before,
.line-highlight[data-end]:after {
  background-color: #8794a6;
  /* #8794A6 */
  border-radius: 999px;
  box-shadow: 0 1px white;
  color: #f5f2f0;
  /* #F5F2F0 */
  content: attr(data-start);
  font: bold 65%/1.5 sans-serif;
  left: .6em;
  min-width: 1em;
  padding: 0 .5em;
  position: absolute;
  text-align: center;
  text-shadow: none;
  top: .4em;
  vertical-align: .3em;
}

.line-highlight[data-end]:after {
  bottom: .4em;
  content: attr(data-end);
  top: auto;
}