.carousel-container {
	width: 715px;
	height: 80vh;
	margin: 0 auto;
	position: relative;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.current-image {
	width: auto;
	height: 100%;
}

.next-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100px;
	position: absolute;
	bottom: 10px;
	left: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
	transition: all .5s;
}

.next-list li {
	display: inline-block;
	padding: 0;
	margin: 0;
	width: 100px;
	min-width: 100px;
	height: 51px;
	margin: 0 5px;
	text-align: center;
	line-height: 50px;
	cursor: pointer;
	transition: all .5s;
}
.next-list li:first-of-type {
	padding-left: 15px;
}
.next-list li:last-of-type {
	padding-right: 15px;
}

.image-of-list {
	width: 100%;
	height: 100%;
	opacity: 0.5;
	box-shadow: 0 0 20px #000;
	transition: all .5s;
}

.current-image-list {
	opacity: 1;
	transition: all .5s;
}

.arrow {
	display: flex;
	position: absolute;
	width: 50px;
	height: 100px;
	bottom: 10px;
	flex: 1;
	text-align: center;
	line-height: 50px;
    color: #FFFFFF;
    text-shadow: 2px 2px 4px Black;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}


.arrow-left {
	left: 10px;
}
.arrow-right {
	right: 10px;
}

 /*
 * Animations
 */

 @keyframes fadeIn {
     0% {opacity: 0}
     100% {opacity: 1}
 }

 @keyframes slideInFromLeft {
     0% {
     	opacity: 0;
     	transform: translateX(-100%);
    	}
     100% {
     	opacity: 1;
     	transform: translateX(0px);
     }
 }

 @keyframes slideInFromRight {
     0% {
     	opacity: 0;
     	transform: translateX(100%);
    	}
     100% {
     	opacity: 1;
     	transform: translateX(0px);
     }
 }

 .slideInFromLeft {
 	animation: slideInFromLeft .5s ease-in-out;
 }

 .slideInFromRight {
 	animation: slideInFromRight .5s ease-in-out;
 }

 .fadeIn {
 	animation: fadeIn .5s ease-in-out;
 }