div.carousel {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden; }
  div.carousel div.control {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 64px; }
    div.carousel div.control button {
      width: 100%;
      height: 100%;
      border: none;
      background: none; }
  div.carousel div.control.prev {
    left: 0; }
    div.carousel div.control.prev:hover {
      background: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent); }
      div.carousel div.control.prev:hover button {
        background: url("images/arrow-prev.png") no-repeat center left; }
  div.carousel div.control.next {
    right: 0; }
    div.carousel div.control.next:hover {
      background: linear-gradient(to left, rgba(0, 0, 0, 0.25), transparent); }
      div.carousel div.control.next:hover button {
        background: url("images/arrow-next.png") no-repeat center right; }
  div.carousel:hover div.skip-links {
    opacity: 1; }
  div.carousel div.skip-links {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    text-align: center;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out; }
    @media screen and (max-width: 960px) {
      div.carousel div.skip-links {
        opacity: 1; } }
    div.carousel div.skip-links button.skip {
      background-color: rgba(0, 0, 0, 0.5);
      border: none;
      width: 8px;
      height: 8px;
      padding: 0;
      border-radius: 100%;
      margin: 0 6px;
      transition: all 0.3s ease-in-out; }
      div.carousel div.skip-links button.skip:hover, div.carousel div.skip-links button.skip.active {
        background-color: #FFF;
        transform: scale(1.5); }
  div.carousel div.slides {
    display: block;
    z-index: 2; }
    div.carousel div.slides a {
      display: none;
      position: absolute;
      top: 0;
      text-align: center;
      visibility: hidden;
      width: 100%;
      height: auto;
      text-decoration: none;
      border: none;
      margin: 0;
      transition: all 0.5s ease-in-out; }
      div.carousel div.slides a.active {
        visibility: visible;
        position: relative;
        display: block; }
      div.carousel div.slides a.move-in, div.carousel div.slides a.move-out {
        display: inline-block; }
    div.carousel div.slides img {
      margin: 0; }
    div.carousel div.slides a.move-in,
    div.carousel div.slides a.move-out {
      visibility: visible;
      animation-duration: 0.6s;
      animation-timing-function: ease-out; }
    div.carousel div.slides a.reverse {
      animation-direction: reverse;
      animation-timing-function: ease-in; }
    div.carousel div.slides a.move-in {
      animation-name: move-in; }
    div.carousel div.slides a.move-out {
      /* mmove right */
      animation-name: move-out; }

@keyframes move-in {
  from {
    left: 100%; }
  to {
    left: 0%; } }

@keyframes move-out {
  from {
    left: 0%; }
  to {
    left: -100%; } }