.Gallery {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 2vh 96px;

  &Bottom {
    border-top: 1px solid #999;

    &List {
      &Wrap {
        min-height: 16vh;
      }

      &Item {

        &:after {

        }
      }
    }
  }

  &List {
    position: absolute;
    white-space: nowrap;
    left: 0
    padding: 0;
    margin: 0;
    transition: left .5s, right .5s;

    &Wrap {
      position: relative;
      width: 100%;
      min-height: 60vh;
      overflow: hidden;

      &Custom {
        min-height: 90vh;
      }
    }

    &Item {
      position: relative;
      display: inline-block;
      vertical-align: top;
    }
  }

  &Icon {

  }
}

.LeftButton, .RightButton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;

  opacity: .5;
  transition: opacity .4s;

  &Hidden {
    opacity: 0;
  }
}

.LeftButton {
  left: 8px;
}

.RightButton {
  right: 8px;
}

@media only screen  and (min-device-width : 320px)  and (max-device-width : 568px) and (orientation:portrait){
  .GalleryListWrap {
    min-height: 43vh;
  }
  .RightButton, .LeftButton {
    width: 60px;
    height: 60px;
    margin-top: 15px;
    opacity: 1;

    & .GalleryIcon {
      display: none;
    }

    &Hidden {
      opacity: 0;
    }

    &:after {
      content: " ";
      right: 100%;
      top: 50%;
      border: solid transparent;
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-color: rgba(255, 255, 255, 0);
      border-width: 25px;
      margin-top: -30px;
      transition: transform .5s;
      margin-right: -45px;
    }
  }

  .Row {
    text-align: center;
    margin: 36px 0;
  }

  .RightButton {
    &:after {
      border-left-color: #001CFE;
    }
  }

  .LeftButton {
    &:after {
      border-right-color: #001CFE;
    }
  }

}