.home-clients {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  background: #EFEFF0; box-sizing:border-box; padding:0 5px; }
  @media (max-width: 800px) {
    .home-clients {
      overflow: hidden; } }
  .home-clients ul {
    padding: 0;
    margin: 0;
    display: flex;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    overflow: hidden; }
    @media (max-width: 800px) {
      .home-clients ul {
        width: 150%; } }
    @media (max-width: 650px) {
      .home-clients ul {
        width: 200%; } }
    @media (max-width: 480px) {
      .home-clients ul {
        width: 300%; } }
  .home-clients .rarr, .home-clients .larr {
    display: none;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -48px;
    width: 50px;
    height: 96px;
    border-bottom-left-radius: 96px;
    border-top-left-radius: 96px;
    background: rgba(0, 0, 0, 0.5) url(../image/slider-rarr.png) 25px center no-repeat;
    z-index: 5; }
    @media (max-width: 800px) {
      .home-clients .rarr, .home-clients .larr {
        display: block; } }
  .home-clients .larr {
    left: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 96px;
    border-top-right-radius: 96px;
    background-image: url(../image/slider-larr.png);
    background-position: 14px center; }
  .home-clients li {
    position: relative;
    display: block;
    width: 9.09%;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px; }
    .home-clients li .blank {
      max-width: 100%;
      width: 100%; }
    .home-clients li.inverted {
      background: #EFEFF0; }
    .home-clients li img { width:auto; max-width:100%;}
    .home-clients li .cube {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transform: translateZ(-100px);
      -moz-transform: translateZ(-100px);
      -ms-transform: translateZ(-100px);
      -o-transform: translateZ(-100px);
      transform: translateZ(-100px); }
      .home-clients li .cube.notransition {
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none; }
      .home-clients li .cube.noTranslateZ {
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0); }
        .home-clients li .cube.noTranslateZ .down-side {
          display: none; }
    .home-clients li.hover {
      z-index: 1; }
    .home-clients li span {
      display: flex;
      display: -webkit-flexbox;
      display: -ms-flexbox;
      display: -webkit-flex;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #EFEFF0;
      -webkit-transform: translateZ(100px);
      -moz-transform: translateZ(100px);
      -ms-transform: translateZ(100px);
      -o-transform: translateZ(100px);
      transform: translateZ(100px);
      border-right: 1px solid rgba(0, 0, 0, 0.12);
      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-flex-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center; }
      .home-clients li span.down-side {
        display: none;
        background: #EFEFF0; }
    .home-clients li span.down-side {
      display: flex;
      display: -webkit-flexbox;
      display: -ms-flexbox;
      display: -webkit-flex;
      -webkit-transform: rotateY(90deg) translateZ(100px);
      -moz-transform: rotateY(90deg) translateZ(100px);
      -ms-transform: rotateY(90deg) translateZ(100px);
      -o-transform: rotateY(90deg) translateZ(100px);
      transform: rotateY(90deg) translateZ(100px); }
      .home-clients li span.down-side + .down-side {
        -webkit-transform: rotateY(-90deg) translateZ(100px);
        -moz-transform: rotateY(-90deg) translateZ(100px);
        -ms-transform: rotateY(-90deg) translateZ(100px);
        -o-transform: rotateY(-90deg) translateZ(100px);
        transform: rotateY(-90deg) translateZ(100px); }
        .home-clients li span.down-side + .down-side + .down-side {
          -webkit-transform: rotateX(90deg) translateZ(100px);
          -moz-transform: rotateX(90deg) translateZ(100px);
          -ms-transform: rotateX(90deg) translateZ(100px);
          -o-transform: rotateX(90deg) translateZ(100px);
          transform: rotateX(90deg) translateZ(100px); }
          .home-clients li span.down-side + .down-side + .down-side + .down-side {
            -webkit-transform: rotateX(-90deg) translateZ(100px);
            -moz-transform: rotateX(-90deg) translateZ(100px);
            -ms-transform: rotateX(-90deg) translateZ(100px);
            -o-transform: rotateX(-90deg) translateZ(100px);
            transform: rotateX(-90deg) translateZ(100px); }
            .home-clients li span.down-side + .down-side + .down-side + .down-side + .down-side {
              -webkit-transform: rotateX(-180deg) translateZ(100px);
              -moz-transform: rotateX(-180deg) translateZ(100px);
              -ms-transform: rotateX(-180deg) translateZ(100px);
              -o-transform: rotateX(-180deg) translateZ(100px);
              transform: rotateX(-180deg) translateZ(100px); }
    .home-clients li.from-e span.down-side {
      -webkit-transform-origin: 0 center;
      -moz-transform-origin: 0 center;
      -ms-transform-origin: 0 center;
      -o-transform-origin: 0 center;
      transform-origin: 0 center;
      -webkit-transform: translateX(100%) rotateY(90deg);
      -moz-transform: translateX(100%) rotateY(90deg);
      -ms-transform: translateX(100%) rotateY(90deg);
      -o-transform: translateX(100%) rotateY(90deg);
      transform: translateX(100%) rotateY(90deg); }
    .home-clients li.hover-from-n .cube {
      -webkit-transform-origin: center 0;
      -moz-transform-origin: center 0;
      -ms-transform-origin: center 0;
      -o-transform-origin: center 0;
      transform-origin: center 0;
      -webkit-transform: translateY(100%) rotateX(-90.0deg);
      -moz-transform: translateY(100%) rotateX(-90.0deg);
      -ms-transform: translateY(100%) rotateX(-90.0deg);
      -o-transform: translateY(100%) rotateX(-90.0deg);
      transform: translateY(100%) rotateX(-90.0deg); }
    .home-clients li.from-n span.down-side {
      -webkit-transform-origin: center 0;
      -moz-transform-origin: center 0;
      -ms-transform-origin: center 0;
      -o-transform-origin: center 0;
      transform-origin: center 0;
      -webkit-transform: rotateX(-90deg);
      -moz-transform: rotateX(-90deg);
      -ms-transform: rotateX(-90deg);
      -o-transform: rotateX(-90deg);
      transform: rotateX(-90deg); }
    .home-clients li.hover-from-s .cube {
      -webkit-transform-origin: center bottom;
      -moz-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
      -o-transform-origin: center bottom;
      transform-origin: center bottom;
      -webkit-transform: translateY(-100%) rotateX(90.0deg);
      -moz-transform: translateY(-100%) rotateX(90.0deg);
      -ms-transform: translateY(-100%) rotateX(90.0deg);
      -o-transform: translateY(-100%) rotateX(90.0deg);
      transform: translateY(-100%) rotateX(90.0deg); }
    .home-clients li.hover-from-e .cube {
      -webkit-transform-origin: right center;
      -moz-transform-origin: right center;
      -ms-transform-origin: right center;
      -o-transform-origin: right center;
      transform-origin: right center;
      -webkit-transform: translateX(-100%) rotateY(-90.0deg);
      -moz-transform: translateX(-100%) rotateY(-90.0deg);
      -ms-transform: translateX(-100%) rotateY(-90.0deg);
      -o-transform: translateX(-100%) rotateY(-90.0deg);
      transform: translateX(-100%) rotateY(-90.0deg); }
    .home-clients li.hover-from-w .cube {
      -webkit-transform-origin: 0 center;
      -moz-transform-origin: 0 center;
      -ms-transform-origin: 0 center;
      -o-transform-origin: 0 center;
      transform-origin: 0 center;
      -webkit-transform: translateX(100%) rotateY(90.0deg);
      -moz-transform: translateX(100%) rotateY(90.0deg);
      -ms-transform: translateX(100%) rotateY(90.0deg);
      -o-transform: translateX(100%) rotateY(90.0deg);
      transform: translateX(100%) rotateY(90.0deg); }
    .home-clients li.from-s span.down-side {
      -webkit-transform-origin: center 0;
      -moz-transform-origin: center 0;
      -ms-transform-origin: center 0;
      -o-transform-origin: center 0;
      transform-origin: center 0;
      -webkit-transform: translateY(100%) rotateX(-90deg);
      -moz-transform: translateY(100%) rotateX(-90deg);
      -ms-transform: translateY(100%) rotateX(-90deg);
      -o-transform: translateY(100%) rotateX(-90deg);
      transform: translateY(100%) rotateX(-90deg); }