How to remove the white background from Bootstrap carousal?

I am using Bootstrap v3.0. I changed the transition of carousal slides from horizontal to vertical. But whenever the slide changes there is white background which appears during transition. How to remove it? Here is the Fiddle: https://jsfiddle.net/amanturate/a9gcmg1r/

I want the height of my carousal to be 520px, if I use 100% then it does not fit and i have to scroll to see the whole carousel.

CSS code:

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
 height: 520px;
 }

.carousel h1{
 color: white;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
 z-index: 10;
 background-image: linear-gradient(90deg,rgba(57,55,67,0.5),rgba(12,11,17,0.5));
 width: 100%;
 left: 0;
 padding-right: 90px;
}

/* Declare heights because of positioning of img element */
.carousel.vertical .item {
 height: 520px;
 background-color: #777;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}
.carousel-inner > .item > img {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 min-width: 100%;
 height: 520px;
}

.carousel-caption h1{font-size: 4em;}
.carousel-caption p{font-size: 2em;}

.carousel-control{
 z-index: 15;
}

.carousel-indicators{
 top: 40%;
 left: 100%;
 margin-left: -5%;
 z-index: 20;
 width: auto;
 padding-right: 10px;
}

.carousel-indicators li {
 display: block;
 margin-bottom: 5px;
}

.carousel-indicators .active {
 margin-bottom: 5px;
}


/* vertical carousel*/
.vertical .carousel-inner {
 height: 100%;
}

.carousel.vertical .item {
 -webkit-transition: 0.6s ease-in-out top;
 -moz-transition: 0.6s ease-in-out top;
 -ms-transition: 0.6s ease-in-out top;
 -o-transition: 0.6s ease-in-out top;
 transition: 0.6s ease-in-out top;
}

.carousel.vertical .active {
 top: 0;
}

.carousel.vertical .next {
 top: 100%;
}

.carousel.vertical .prev {
 top: -100%;
}

.carousel.vertical .next.left,
.carousel.vertical .prev.right {
 top: 0%;
}

.carousel.vertical .active.left {
 top: -100%;
}

.carousel.vertical .active.right {
 top: 100%;
}
/*vertical carousel setting ends*/
/* carousel customization ends */