.home-gallery {
  background-image: url('../../img/spinner.gif');
  background-repeat: no-repeat;
  background-position: center center;
}

.home-gallery,
.home-gallery__image {
  bottom: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}

.home-gallery__image {
  background-position: center center;
  background-size: cover;
  opacity: 0;
  transition: opacity 2s ease-in-out, bottom .5s ease-in-out;
}

.home-gallery__image--active {
  opacity: 1;
  z-index: 1;
}

.home-gallery__navigation {
  bottom: -58px;
  left: 0;
  /* padding-top: 58px; */
  position: absolute;
  width: 100%;
  transform: translateY(calc(100% - 58px));
  transition: all .5s ease-in-out;
  z-index: 10;
}

.home-gallery--navigation-visible .home-gallery__navigation {
  transform: translateY(calc(100% - 162px));
}

.home-gallery--navigation-visible .home-gallery__navigation-toggle-icon {
  transform: rotate(90deg);
}

.home-gallery--navigation-visible .home-gallery__image {
  bottom: 104px;
}

.home-gallery__navigation-toggle {
  color: rgba(0, 0, 0, .7);
  left: calc(50% - 24px);
  position: absolute;
  top: -58px;
  transition: bottom .6s ease-in-out;
}

.home-gallery__navigation-toggle:hover {
  color: rgba(0, 0, 0, 1);
}

.ma--arrow-inverted-context .home-gallery__navigation-toggle {
  color: rgba(255, 255, 255, .7);
}

.ma--arrow-inverted-context .home-gallery__navigation-toggle:hover {
  color: rgba(255, 255, 255, 1);
}

.home-gallery__navigation-toggle-icon {
  height: 48px;
  transform: rotate(-90deg);
  transition: transform .4s ease-in-out .3s;
  width: 48px;
}

.home-gallery__thumbs-wrapper {
  background-color: #000;
  width: 100%;
  overflow-x: auto;
}

.home-gallery__thumbs {
  display: flex;
  flex-flow: row nowrap;
}

.home-gallery__thumb {
  border-bottom: 4px solid #000;
  border-right: 4px solid #000;
  border-top: 4px solid #000;
  cursor: pointer;
  font-size: 0;
  width: 148px;
  height: 96px;
  background-size: cover;
  background-position: center center;
  flex-shrink: 0;
}

.home-gallery__thumb:first-of-type {
  border-left: 4px solid #000;
}

.home-gallery__navigation-button {
  bottom: 28px;
  position: absolute;
}

.home-gallery__navigation-button--next {
  right: 0px;
}

.home-gallery__navigation-button--prev {
  left: 0px;
}

.home-gallery__navigation-button-icon {
  color: rgba(0, 0, 0, .7);
  height: 48px;
  width: 48px;
  transition: color 250ms ease-in-out;
}

.home-gallery__navigation-button-icon:hover {
  color: rgba(0, 0, 0, 1);
}

.ma--arrow-inverted-context .home-gallery__navigation-button-icon {
  color: rgba(255, 255, 255, .7);
}

.ma--arrow-inverted-context .home-gallery__navigation-button-icon:hover {
  color: rgba(255, 255, 255, 1);
}

.home-gallery__navigation-button--prev  .home-gallery__navigation-button-icon {
  transform: scaleX(-1);
}


@media screen and (min-width: 1024px) {
  .home-gallery__navigation {
    width: 764px; /* 5 thumbs */
    left: calc(50% - 764px / 2);
  }

  .home-gallery__navigation-button--next {
    right: -50px;
  }

  .home-gallery__navigation-button--prev {
    left: -50px;
  }

  .home-gallery--navigation-visible .home-gallery__navigation {
    transform: translateY(-120px);
  }

  .home-gallery--navigation-visible .home-gallery__image {
    bottom: 0;
  }
}