.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;
}
h1{
  color: white;
  font-size: 2.25em;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 2em;
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 1);
}


// new code here 
@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
	
body {
	display: flex;
	justify-content: center;
}
.slick-wrapper {
	width: 80%;
	background-color: aqua;
}
.slide-item {
	background-color: rebeccapurple;
	color: aqua;
	display: flex !important;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 200px;
	border: 1px solid white;
	h3 {
		font-family: Lato, sans-serif;
		font-size: 40px;	
	}
}


// laste code slider 
@import "compass"
@import "bourbon"
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css)
@import url(https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,100,300,700,900|RobotoDraft:400,100,300,700,900|Old+Standard+TT|Raleway|Lobster)

// Units
// ================================================================================
$width__common             : 728px
$height__card              : 252px
$base__padding--size       : 20
$base__margin--size        : 20

// Colors
// ================================================================================
$color__primary            : #333333
$color__secondary          : #ABABAB
$color__accent             : #F6B94E
$color__foreground         : #F5F5F5
$color__background         : #FFFFFF

$color__border             : shade($color__foreground, 10%)

// Typography
// ================================================================================
$font__default             : 'Lobster', Helvetica, Arial, sans-serif !default
$font__weight--thin        : 100
$font__weight--light       : 300
$font__weight--normal      : 400
$font__weight--semibold    : 700
$font__weight--bold        : 900

// Helpers
// ================================================================================
%box-sizing
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  box-sizing: border-box
  
// Mixins
// ================================================================================
=prefixer($property, $value, $prefixes: webkit moz ms o)

  @each $prefix in $prefixes
    #{'-' + $prefix + '-' + $property}: $value

  #{$property}: $value

=radius($size)
  +prefixer(border-radius, $size)

=circle($size)
  +radius($size / 2)

=opacity($opacity)
  filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})")
  opacity: $opacity

  //Hack IE6
  &.lt-ie7
    filter : alpha(opacity=#{round($opacity * 100)})
    zoom: 1

=position($position: 'rel')

  @if $position == 'abs'
    position: absolute

  @else if $position == 'rel'
    position: relative

  @else if $position == 'fix'
    position: fixed

=middle-center($position: 'abs')
  +position($position)
  top: 50%
  left: 50%
  -webkit-transform: translate(-50%, -50%)
  -moz-transform: translate(-50%, -50%)
  -ms-transform: translate(-50%, -50%)
  -o-transform: translate(-50%, -50%)
  transform: translate(-50%, -50%)

// Resets
// ================================================================================
button
  color: inherit
  font: inherit
  margin: 0
  verflow: visible
  text-transform: none
  -webkit-appearance: button
  cursor: pointer
  border: none
  
  &::-moz-focus-inner
    border: 0
    padding: 0
  
// Base Styles
// ================================================================================
html,
body,
h1,h2,h3,h4,h5,h6,p
  font-family: $font__default
  font-weight: $font__weight--thin
  color: $color__primary
  
.container
  @extend %box-sizing
  max-width: $width__common
  padding: 0
  margin: 0 auto
  
// Cards
// ================================================================================
.card
  width: auto
  height: auto
  padding: $base__padding--size + px
  background-color: $color__foreground
  
  &__header
    padding-bottom: $base__padding--size + 10 + px
    border-bottom: solid 1px $color__border
    
  &__heading
    font-size: 18px
    font-weight: $font__weight--normal
    line-height: 36px
    
  &__heading--secondary
    font-family: 'Raleway'
    font-size: 12px
    font-weight: $font__weight--light
    color: $color__secondary
    
  &__content
    padding: 30px 20px
    
// Slider Defaults
// ================================================================================

.slick-slider
  position: relative
  display: block
  box-sizing: border-box
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none
  -ms-touch-action: pan-y
  touch-action: pan-y
  -webkit-tap-highlight-color: transparent

.slick-list
  position: relative
  overflow: hidden
  display: block
  margin: 0
  padding: 0

  &:focus
    outline: none
    
  &.dragging
    cursor: pointer
    cursor: hand
    
.slick-slider .slick-track,
.slick-slider .slick-list
  -webkit-transform: translate3d(0, 0, 0)
  -moz-transform: translate3d(0, 0, 0)
  -ms-transform: translate3d(0, 0, 0)
  -o-transform: translate3d(0, 0, 0)
  transform: translate3d(0, 0, 0)

.slick-track
  position: relative
  left: 0
  top: 0
  display: block

  &:before,
  &:after
    content: ""
    display: table

  &:after
    clear: both

  .slick-loading &
    visibility: hidden
    
.slick-slide
  position: relative
  float: left
  height: 100%
  min-height: 1px
  
  [dir="rtl"] &
    float: right

  img
    display: block

  &.slick-loading img
    display: none

  display: none

  &.dragging img
    pointer-events: none
    
  .slick-initialized &
    display: block

  .slick-loading &
    visibility: hidden

  .slick-vertical &
    display: block
    height: auto
    border: 1px solid transparent
    
.slick-arrow.slick-hidden
  display: none

.slick-slide .badge
  +circle(80px)
  width: 80px
  height: 80px
  display: block
  position: relative
  margin: 0 auto
  text-align: center
  background-color: tint($color__accent, 30%)
  
.slick-slide .badge:before
  +middle-center
  font-size: 2em
  color: $color__foreground
  
// Slider Theme
// ================================================================================

$slider__arrow--prev            : "\f053" !default
$slider__arrow--next            : "\f054" !default

$slider__dot                    : "\f10c" !default
$slider__dot--active            : "\f111" !default
$slider__dot--size              : 10px !default

$state__opacity--default        : 0.5 !default
$state__opacity--hover          : 1 !default
$state__opacity--inactive       : 0.25 !default

.slick-prev,
.slick-next 
  position: absolute
  display: block
  height: 20px
  width: 20px
  line-height: 0px
  font-size: 0px
  cursor: pointer
  background: transparent
  color: transparent
  top: 50%
  -webkit-transform: translate(0, -50%)
  -ms-transform: translate(0, -50%)
  transform: translate(0, -50%)
  padding: 0
  border: none
  outline: none

  &:hover, &:focus 
    outline: none
    background: transparent
    color: transparent

    &:before 
      opacity: $state__opacity--default

  &.slick-disabled:before 
    color: $color__secondary
    
  &:before 
    font-family: 'FontAwesome'
    font-size: 20px
    line-height: 1
    color: $color__accent
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale
    
.slick-prev 
  left: -25px
  [dir="rtl"] & 
    left: auto
    right: -25px

  &:before 
    content: $slider__arrow--prev
    [dir="rtl"] & 
      content: $slider__arrow--next
        
.slick-next 
  right: -25px
  [dir="rtl"] & 
    left: -25px
    right: auto

  &:before 
    content: $slider__arrow--next
    [dir="rtl"] & 
      content: $slider__arrow--prev
        
/* Dots */
.slick-dotted.slick-slider 
  margin-bottom: 30px

.slick-dots 
  position: absolute
  bottom: -25px
  list-style: none
  display: block
  text-align: center
  padding: 0
  margin: 0
  width: 100%
  
  li 
    position: relative
    display: inline-block
    height: 20px
    width: 20px
    margin: 0 5px
    padding: 0
    cursor: pointer
    
    button 
      border: 0
      background: transparent
      display: block
      height: 20px
      width: 20px
      outline: none
      line-height: 0px
      font-size: 0px
      color: transparent
      padding: 5px
      cursor: pointer
      
      &:hover, 
      &:focus 
        outline: none
        &:before 
          opacity: $state__opacity--hover

      &:before 
        position: absolute
        top: 0
        left: 0
        content: $slider__dot
        width: 20px
        height: 20px
        font-family: 'FontAwesome'
        font-size: $slider__dot--size
        line-height: 20px
        text-align: center
        color: #000000
        opacity: $state__opacity--inactive
        -webkit-font-smoothing: antialiased
        -moz-osx-font-smoothing: grayscale
            
        
    &.slick-active button:before
      content: $slider__dot--active
      color: #000000
      opacity: $state__opacity--default


      // 3d  div sldier 

      *
  box-sizing: border-box
  -webkit-box-sizing: border-box

html, body, .wrapper
  width: 100%
  height: 100%
  margin: 0
  font-family: sans-serif
  color: #4d4d4d
  background: #eee

.top-title
  margin-bottom: 15px
  color: #D72A5E

.text-wrapper
  text-align: center

.button
  top: 50%
  transform: translateY(-50%)
  -webkit-transform: translateY(-50%)
  position: absolute
  cursor: pointer
  z-index: 100
  border: 2px solid #D72A5E
  border-radius: 50px
  padding: 10px
  display: flex
  display: -webkit-flex
  justify-content: center
  -webkit-justify-content: center
  align-items: center
  -webkit-align-items: center
  transition: 180ms ease-in-out
  &:hover
    background: rgba(255, 255, 255, 0.8)
  .material-icons
    color: #D72A5E
  &#button-right
    right: 0
  &#button-left
    left: 0

.no-select
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

.wrapper
  padding: 30px

.slider-wrapper
  position: relative
  width: 90%
  margin: 0 auto
  max-width: calc(3 * 320px)

.slider
  position: relative
  width: 100%
  display: flex
  display: -webkit-flex
  flex-direction: row
  -webkit-flex-direction: row
  padding: 30px 0
  img
    display: none
    height: auto
    transition: all 400ms ease-in-out
    -webkit-transition: all 400ms ease-in-out
    position: relative
    max-width: calc(100% / 3)
    min-width: 30px
    align-self: center
    -webkit-align-self: center
    -webkit-touch-callout: none
    -webkit-user-select: none
    -khtml-user-select: none
    -moz-user-select: none
    -ms-user-select: none
    user-select: none
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2)
    &:nth-child(1)
      -webkit-transform: perspective(900px) rotateY(-90deg) scale(0.6)
      transform: perspective(900px) rotateY(-90deg) scale(0.6)
      display: block
      position: absolute
      left: 0
      z-index: 10
    &:nth-child(2)
      -webkit-transform: perspective(900px) rotateY(-60deg) scale(0.8)
      transform: perspective(900px) rotateY(-60deg) scale(0.8)
      display: block
      left: 0
      z-index: 20
    &:nth-child(3)
      display: block
      z-index: 30
    &:nth-child(4)
      -webkit-transform: perspective(900px) rotateY(60deg) scale(0.8)
      transform: perspective(900px) rotateY(60deg) scale(0.8)
      display: block
      right: 0
      z-index: 20
    &:nth-child(5)
      -webkit-transform: perspective(900px) rotateY(90deg) scale(0.6)
      transform: perspective(900px) rotateY(90deg) scale(0.6)
      display: block
      position: absolute
      right: 0
      z-index: 10
    &.left
      &:nth-child(1)
        -webkit-animation: leftNone 400ms ease-in-out
        animation: leftNone 400ms ease-in-out
      &:nth-child(2)
        -webkit-animation: middleLeft 400ms ease-in-out
        animation: middleLeft 400ms ease-in-out
      &:nth-child(3)
        -webkit-animation: rightMiddle 400ms ease-in-out
        animation: rightMiddle 400ms ease-in-out
    &.right
      &:nth-child(3)
        -webkit-animation: leftMiddle 400ms ease-in-out
        animation: leftMiddle 400ms ease-in-out
      &:nth-child(4)
        -webkit-animation: middleRight 400ms ease-in-out
        animation: middleRight 400ms ease-in-out
      &:nth-child(5)
        -webkit-animation: rightNone 400ms ease-in-out
        animation: rightNone 400ms ease-in-out

@keyframes middleLeft
  0%
    transform: perspective(0) rotateY(0) scale(1)
    left: calc(100% / 3)

  100%
    transform: perspective(900px) rotateY(-60deg) scale(0.8)
    left: 0


@keyframes rightMiddle
  0%
    transform: perspective(900px) rotateY(60deg) scale(0.8)
    left: calc(100% / 3)

  100%
    transform: perspective(0) rotateY(0) scale(1)
    left: 0


@keyframes leftNone
  0%
    transform: perspective(900px) rotateY(-60deg) scale(0.8)

  100%
    transform: perspective(900px) rotateY(-90deg) scale(0.6)


@-webkit-keyframes middleLeft
  0%
    -webkit-transform: perspective(0) rotateY(0) scale(1)
    left: calc(100% / 3)

  100%
    -webkit-transform: perspective(900px) rotateY(-60deg) scale(0.8)
    left: 0


@-webkit-keyframes rightMiddle
  0%
    -webkit-transform: perspective(900px) rotateY(60deg) scale(0.8)
    left: calc(100% / 3)

  100%
    -webkit-transform: perspective(0) rotateY(0) scale(1)
    left: 0


@-webkit-keyframes leftNone
  0%
    -webkit-transform: perspective(900px) rotateY(-60deg) scale(0.8)

  100%
    -webkit-transform: perspective(900px) rotateY(-90deg) scale(0.6)


@keyframes middleRight
  0%
    transform: perspective(0) rotateY(0) scale(1)
    right: calc(100% / 3)

  100%
    transform: perspective(900px) rotateY(60deg) scale(0.8)
    right: 0


@keyframes leftMiddle
  0%
    transform: perspective(900px) rotateY(-60deg) scale(0.8)
    right: calc(100% / 3)

  100%
    transform: perspective(0) rotateY(0) scale(1)
    right: 0


@keyframes rightNone
  0%
    transform: perspective(900px) rotateY(60deg) scale(0.8)

  100%
    transform: perspective(900px) rotateY(90deg) scale(0.6)


@keyframes noneRight
  0%
    transform: perspective(900px) rotateY(90deg) scale(0.6)

  100%
    transform: perspective(900px) rotateY(60deg) scale(0.8)


@-webkit-keyframes middleRight
  0%
    -webkit-transform: perspective(0) rotateY(0) scale(1)
    right: calc(100% / 3)

  100%
    -webkit-transform: perspective(900px) rotateY(60deg) scale(0.8)
    right: 0


@-webkit-keyframes leftMiddle
  0%
    -webkit-transform: perspective(900px) rotateY(-60deg) scale(0.8)
    right: calc(100% / 3)

  100%
    -webkit-transform: perspective(0) rotateY(0) scale(1)
    right: 0


@-webkit-keyframes rightNone
  0%
    -webkit-transform: perspective(900px) rotateY(60deg) scale(0.8)

  100%
    -webkit-transform: perspective(900px) rotateY(90deg) scale(0.6)


@-webkit-keyframes noneRight
  0%
    -webkit-transform: perspective(900px) rotateY(90deg) scale(0.6)

  100%
    -webkit-transform: perspective(900px) rotateY(60deg) scale(0.8)