﻿.carousel-inner.vertical
{
	height: 100%; /*Note: set specific height here if not, there will be some issues with IE browser*/
}
.carousel-inner.vertical > .item
{
	-webkit-transition: .6s ease-in-out top;
	-o-transition: .6s ease-in-out top;
	transition: .6s ease-in-out top;
}

@media all and (transform-3d), (-webkit-transform-3d)
{
	.carousel-inner.vertical > .item
	{
		-webkit-transition: -webkit-transform .6s ease-in-out;
		-o-transition: -o-transform .6s ease-in-out;
		transition: transform .6s ease-in-out;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-perspective: 1000;
		perspective: 1000;
	}
	.carousel-inner.vertical > .item.next, .carousel-inner.vertical > .item.active.right
	{
		-webkit-transform: translate3d(0, 33.33%, 0);
		transform: translate3d(0, 33.33%, 0);
		top: 0;
	}
	.carousel-inner.vertical > .item.prev, .carousel-inner.vertical > .item.active.left
	{
		-webkit-transform: translate3d(0, -33.33%, 0);
		transform: translate3d(0, -33.33%, 0);
		top: 0;
	}
	.carousel-inner.vertical > .item.next.left, .carousel-inner.vertical > .item.prev.right, .carousel-inner.vertical > .item.active
	{
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		top: 0;
	}
}

.carousel-inner.vertical > .active
{
	top: 0;
}
.carousel-inner.vertical > .next, .carousel-inner.vertical > .prev
{
	top: 0;
	height: 100%;
	width: auto;
}
.carousel-inner.vertical > .next
{
	left: 0;
	top: 33.33%;
	right: 0;
}
.carousel-inner.vertical > .prev
{
	left: 0;
	top: -33.33%;
	right: 0;
}
.carousel-inner.vertical > .next.left, .carousel-inner.vertical > .prev.right
{
	top: 0;
}
.carousel-inner.vertical > .active.left
{
	left: 0;
	top: -33.33%;
	right: 0;
}
.carousel-inner.vertical > .active.right
{
	left: 0;
	top: 33.33%;
	right: 0;
}

#carousel-pager .carousel-control.left
{
	bottom: initial;
	width: 100%;
}
#carousel-pager .carousel-control.right
{
	top: initial;
	width: 100%;
}

.carousel
{
	position: static !important;
}
