.multi-item-carousel{
  .carousel-inner{
.item{
      transition: 500ms ease-in-out left;
    }
    .active{
      &.left{
        left:-33%;
      }
      &.right{
        left:33%;
      }
    }
    .next{
      left: 33%;
    }
    .prev{
      left: -33%;
    }
    @media all and (transform-3d), (-webkit-transform-3d) {
      > .item{
        // use your favourite prefixer here
        transition: 500ms ease-in-out left;
        transition: 500ms ease-in-out all;
        backface-visibility: visible;
        transform: none!important;
      }
    }
  }
  .carouse-control{
    &.left, &.right{
      background-image: none;
    }
  }
}

// non-related styling:
body{
  background: #333;
  color: #ddd;
}
.face:hover
{
  color: rgb(23, 76, 239);
}
.google:hover
{
  color: red;
}
.twitter:hover
{
  color:#3fb1f9;
}
.youtube:hover
{
  color: red;
}
.pro:hover{
  color: white;
  background-color: #2f7710;

}
.pro{
    background-color: #8cab91;
    padding: 20px;"
}
.but:hover
{
background-color: #1c4796;
}
.but
{
  background-color: #4183e6;
}
a.list-group-item:hover
  {
    color: white;
    background-color: #332020;
  }
a.list-group-item{
    color: white;