.img_gallery {
  max-width: 643px;
  margin: 0 auto;

  .gallery_view_list,
  .gallery_thumbs_list {
    li {
      list-style-type: none;
      display: inline-block;
    }
  }

  .gallery_view {
    position: relative;
    margin: 0 auto;

    li {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      opacity: 0;
      z-index: 1;
      text-align: center;

      .img_container {
        max-width: 100%;
        padding: 0;
        margin: 0 auto;
        float: none;
        text-align: left;

        img {
          max-width: 100% !important;
          height: auto !important;
        }
      }
    }

    .active {
      z-index: 2;
      opacity: 1;
    }

    .img_wrapper {
      position: relative;

      .gallery_browse {
        z-index: 5;
        position: absolute;
        overflow: hidden;
        padding: 5px;
        text-indent: -400px;
        opacity: .65;

        &:before,
        &:after {
          font-weight: bold;
          font-size: 33px;
          line-height: 40px;
          position: absolute;
          left: 20px;
          text-indent: 0;
        }

        &:hover,
        &:focus,
        &:active {
          opacity: 1;
          outline: 0;
        }

        &.prev {
          @include svgpseudoelem('sprites-icon_previous');
          left: 0;
          border-top-right-radius: 3px;
          border-bottom-right-radius: 3px;
        }

        &.next {
          @include svgpseudoelem('sprites-icon_next');
          left: auto;
          right: 0;
        }

        transform: scale(.6);
        bottom: 0;

        @media screen and (min-width: 500px) {
          transform: scale(1);
          bottom: 20px;

          &.prev {
            left: 10px;
          }

          &.next {
            right: 10px;
          }
        }
      }
    }
  }

  .gallery_thumbs {
    text-align: center;
    padding: 30px;

    li {
      a {
        display: block;
        border: 3px solid transparent;
        padding: 1px;
        margin: 2px;

        &:hover,
        &:focus {
          border-color: $color-accent-contrast !important;
        }
      }

      &.active a {
        border: 4px solid $color-main;
        padding: 0;
      }
    }
  }

  // falls kein JS aktiviert
  .nothasjs & {
    .gallery_view li {
      position: static;
      margin-bottom: 20px;
      opacity: 1;
    }
  }
}