.slider {
 width:100%;
 margin:0; 	
 position:relative;
 margin-top:100px;
}

.slider img{
width:100%;	
 position:relative;
	
}

/*.slider img:hover{
 -moz-transform: scale(1.1) rotate(10deg);
  -webkit-transform: scale(1.1) rotate(10deg);
  transform: scale(1.1) rotate(10deg);
	
}*/

.carousel-caption{
top:70%;
bottom:auto;
margin:auto;
left:-30%;
right:0;
}

.carousel-caption H3{
font-size:3.5vw ; 
}
.carousel-caption p{
font-size:2vw ; 
} 
 
.main-title{
 text-shadow:       
     -1px -1px 0 #000000,
      1px -1px 0 #000000,
      -1px 1px 0 #000000,
       1px 1px 0 #000000 
	   ;
	   font-family:Pacifico; 
	
	
}
.carousel-indicators {bottom:0 ;   } 
@media screen and (max-width: 768px) {
.carousel-caption h3,.carousel-caption p{ margin:0 ; padding:0 } 
.carousel-caption{
padding:5px;top:75%;
bottom:auto;
margin:0 ;
left:0;
right:0;
}


  
.carousel-indicators { display:none ;   } 
body{margin-top:50px;} 

.carousel-caption H3{
font-size:3.5vw ; 
}
.carousel-caption p{
font-size:3vw ; 
} 
}


#myClientsay .carousel-control.right, #myClientsay .carousel-control.left {
      background-image: none;
      color: #1D7FF4;
  }
#myClientsay .carousel-indicators li {
      border-color: #1D7FF4;
  }
#myClientsay  .carousel-indicators li.active {
      background-color: #1D7FF4;
  }
#myClientsay .item h4 {
      font-size: 19px;
      line-height: 1.375em;
      font-weight: 400;
      font-style: italic;
      margin: 70px 0;
  }
#myClientsay  .item span {
      font-style: normal;
  }



.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

 

 

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}


 @keyframes  carouselAnimationIn {
  0%   {transform: scale(1) ; }
  100% { transform: scale(1.1) ; }
}
@-o-keyframes carouselAnimationIn{
  0%   {transform: scale(1) ; }
  100% { transform: scale(1.1) ; }
}
@-moz-keyframes carouselAnimationIn{
  0%   {transform: scale(1) ; }
  100% { transform: scale(1.1) ; }
}
@-webkit-keyframes carouselAnimationIn{
  0%   {transform: scale(1.1) ; }
  100% { transform: scale(1) ; }
}
 @keyframes  carouselAnimationOut {
  0%   {transform: scale(1.1) ; }
  100% { transform: scale(1) ; }
}
@-o-keyframes carouselAnimationOut{
  0%   {transform: scale(1.1) ; }
  100% { transform: scale(1) ; }
}
@-moz-keyframes carouselAnimationOut{
    0%   {transform: scale(1.1) ; }
  100% { transform: scale(1) ; }
}
@-webkit-keyframes carouselAnimationOut{
  0%   {transform: scale(1.1) ; }
  100% { transform: scale(1) ; }
}

 .carousel-fade .carousel-inner > .item.active:nth-child(odd) img {

      animation-name: carouselAnimationIn;
      -webkit-animation-name: carouselAnimationIn;
      animation-duration: 20s;
      -webkit-animation-duration: 20s;
      visibility: visible;
	  animation-fill-mode: forwards;
 }
 .carousel-fade .carousel-inner > .item.active:nth-child(even) img {

	  animation-name: carouselAnimationOut;
      -webkit-animation-name: carouselAnimationOut;
      animation-duration: 20s;
      -webkit-animation-duration: 20s;
      visibility: visible;
	  animation-fill-mode: forwards;
 }  
 
/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
     
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right {
        
      opacity: 1;
      
    }
	.carousel-fade .carousel-inner > .item:nth-child(odd) img {
		opacity: 1;
         
      
      
    }
	.carousel-fade .carousel-inner > .item:nth-child(even) img  {
		opacity: 1;
         transform: scale(1.1) ; 
      -webkit-transform: scale(1.1) ; 
      
    }

}


.multi-item-carousel{
  .carousel-inner{
    > .item{
      transition: 2s 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: 2s ease-in-out left;
        transition: 2s ease-in-out all;
        backface-visibility: visible;
        transform: none!important;
      }
    }
  }
  .carouse-control{
    &.left, &.right{
      background-image: none;
    }
  }
}