/*

CC 2.0 License Iatek LLC 2018
Attribution required

*/

#main-carousel .carousel-item > img {
	width: 100%;
	border-radius: 16px;
	max-height: 215px;
}
.carousel-control-prev,
.carousel-control-next {
	width: 32px;
	height: 32px;
	padding: 4px;
	top: 45%;
	border-radius: 8px;
	border: 1px solid #e9e9eb;
	background-color: #00870e;
	opacity: 1;
}

.carousel-control-prev-icon, .all-games-prev-icon {
	width: 14px;
	height: 14px;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNyAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNzAxMTcgN0wxNS43MDEyIDciIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik03LjcwMTE3IDEzTDEuNzAxMTcgNyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTcuNzAxMTcgMUwxLjcwMTE3IDciIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
}

.carousel-control-next-icon {
	width: 14px;
	height: 14px;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNyAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1LjcwMTIgN0wxLjcwMTE3IDciIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik05LjcwMTE3IDEzTDE1LjcwMTIgNyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTkuNzAxMTcgMUwxNS43MDEyIDciIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==");
}

@media (min-width: 576px) and (max-width: 768px) {
	/* Show 3rd slide on sm  if col-sm-6*/
	#main-carousel .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
		position: absolute;
		top: 0;
		right: -50%; /*change this with javascript in the future*/
		z-index: -1;
		display: block;
		visibility: visible;
	}
	#main-carousel .carousel-item > img {
		max-height: 180px;
	}
}

@media (min-width: 576px) {
	#main-carousel .carousel-item {
		margin-right: 0;
	}

	/* show 2 items */
	#main-carousel .carousel-inner .active + .carousel-item {
		display: block;
	}

	 .main-carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
	 .main-carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
		transition: none;
	}

	 .main-carousel-inner .carousel-item-next {
		position: relative;
		transform: translate3d(0, 0, 0);
	}

	/* left or forward direction */
	#main-carousel .active.carousel-item-left + .carousel-item-next.carousel-item-left,
	 .carousel-item-next.carousel-item-left + .main-carousel-item,
	 .carousel-item-next.carousel-item-left + .main-carousel-item + .carousel-item {
		position: relative;
		transform: translate3d(-100%, 0, 0);
		visibility: visible;
	}

	/* farthest right hidden item must be abso position for animations */
	.main-carousel-inner .carousel-item-prev.carousel-item-right {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		display: block;
		visibility: visible;
	}

	/* right or prev direction */
	#main-carousel .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
	.carousel-item-prev.carousel-item-right + .main-carousel-item,
	.carousel-item-prev.carousel-item-right + .main-carousel-item + .carousel-item {
		position: relative;
		transform: translate3d(100%, 0, 0);
		visibility: visible;
		display: block;
		visibility: visible;
	}
}

/*MD*/
@media (min-width: 768px) {
	/* Show 4th slide on md  if col-md-4*/
	.main-carousel-inner .active.col-md-4.carousel-item:not(.col-lg-3) + .carousel-item + .carousel-item + .carousel-item {
		position: absolute;
		top: 0;
		right: -0.3333%; /*change this with javascript in the future*/
		z-index: -1;
		display: block;
		visibility: visible;
	}

	/* show 3rd of 3 item slide */
	.main-carousel-inner .active + .carousel-item + .carousel-item {
		display: block;
	}

	.main-carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
		transition: none;
	}

	.main-carousel-inner .carousel-item-next {
		position: relative;
		transform: translate3d(0, 0, 0);
	}

	/* left or forward direction */
	.carousel-item-next.carousel-item-left + .main-carousel-item + .main-carousel-item + .main-carousel-item {
		position: relative;
		transform: translate3d(-100%, 0, 0);
		visibility: visible;
	}

	/* right or prev direction */
	.carousel-item-prev.carousel-item-right + .main-carousel-item + .main-carousel-item + .main-carousel-item {
		position: relative;
		transform: translate3d(100%, 0, 0);
		visibility: visible;
		display: block;
		visibility: visible;
	}
}

/*LG */
@media (min-width: 991px) {
	/* show 4th item */
	.main-carousel-inner .active + .main-carousel-item + .main-carousel-item + .main-carousel-item {
		display: block;
	}

	.main-carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .main-carousel-item + .main-carousel-item + .main-carousel-item {
		transition: none;
	}

	/* Show 5th slide on lg if col-lg-3 */
	.main-carousel-inner .active.col-lg-3.main-carousel-item + .main-carousel-item + .main-carousel-item + .main-carousel-item + .main-carousel-item {
		position: absolute;
		top: 0;
		right: -25%; /*change this with javascript in the future*/
		z-index: -1;
		display: block;
		visibility: visible;
	}

	/* left or forward direction */
	.carousel-item-next.carousel-item-left + .main-carousel-item + .main-carousel-item + .main-carousel-item + .main-carousel-item {
		position: relative;
		transform: translate3d(-100%, 0, 0);
		visibility: visible;
	}

	/* right or prev direction //t - previous slide direction last item animation fix */
	.carousel-item-prev.carousel-item-right + .main-carousel-item + .main-carousel-item + .main-carousel-item + .main-carousel-item {
		position: relative;
		transform: translate3d(100%, 0, 0);
		visibility: visible;
		display: block;
		visibility: visible;
	}
}

/*LG 6th  -  if you want a carousel with 6 slides */
@media (min-width: 991px) {
	/* show 5th and 6th item */
	/*   .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
	.carousel-inner .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
		  display: block;
	  }
  
	  
	
	  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
	.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
		transition: none;
	  }
  */

	/*show 7th slide for animation when its a 6 slides carousel */
	/*      .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item  + .carousel-item {
		  position: absolute;
		  top: 0;
		  right: -16.666666666%;
		  z-index: -1;
		  display: block;
		  visibility: visible;
	}
	*/

	/* forward direction > */
	/*   .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
	.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
		  position: relative;
		  transform: translate3d(-100%, 0, 0);
		  visibility: visible;
	  }
	*/
	/* prev direction < last item animation fix */
	/*   .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
	  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
		  position: relative;
		  transform: translate3d(100%, 0, 0);
		  visibility: visible;
		  display: block;
		  visibility: visible;
	  }
  */
}