/*------------------------------ vertical bootstrap slider----------------------------*/
.carousel-inner .carousel-item{
  padding: 4em 7em 4em 4em;
}
.carousel-inner> .carousel-item.carousel-item-next ,
.carousel-inner > .carousel-item.active.carousel-item-right{ 
    transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0);  top: 0;
    
}
.carousel-inner > .carousel-item.carousel-item-prev ,
.carousel-inner > .carousel-item.active.carousel-item-left{ 
    transform: translate3d(0,-100%, 0); -webkit-transform: translate3d(0,-100%, 0);  -moz-transform: translate3d(0,-100%, 0);-ms-transform: translate3d(0,-100%, 0); -o-transform: translate3d(0,-100%, 0); top: 0;
    
}
.carousel-inner > .carousel-item.next.carousel-item-left ,
.carousel-inner > .carousel-item.carousel-item-prev.carousel-item-right ,
.carousel-inner > .carousel-item.active{
    transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);; -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); top:0;
    
}

/*------------------------------- vertical carousel indicators ------------------------------*/
.carousel-indicators{
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    height:50px;
    right:0; left:auto;
    width:auto;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    padding: 3px;
}
.carousel-indicators li{
    background: rgba(255,255,255,.5);
    height: 10px;width: 10px;max-width: 30px;border-radius: 50%;
    
}
.carousel-indicators li.active{
    background: #fff;border:1px solid #fff;padding: 1px;
    
}


.carousel-control-prev{
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    height:50px;
    right:0; left:auto;
    width:30px;
    padding:0px;
  -webkit-transform: rotate(90deg);left: auto; right: 0;bottom: auto;top: 0;
  font-size: 0.8em;
}

.carousel-control-next{
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    height:50px;
    right:0; left:auto;
    width:30px;
    padding: 0px;
  -webkit-transform: rotate(90deg);left: auto; right: 0;bottom: 0; top: auto;
  font-size: 0.8em;
}



.carousel-fade .carousel-item {
 opacity: 0;
 transition-duration: .6s;
 transition-property: opacity;
}

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

.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-right {
 opacity: 0;
}

.carousel-fade  .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-prev {
 transform: translateX(0);
 transform: translate3d(0, 0, 0);
}