/* ==========================================================================
   EXTENSIONS / CAROUSEL / ROUNDABOUT
   ========================================================================== */

/**
 * The Roundabout extension gives you the ability to create a hero image
 * carousel or convert a product list into a carousel of products.
 */
.x-carousel {
	display: flex;
	flex: 1;
	position: relative;
	overflow: hidden;
	transition: visibility ease-in-out 0.1s;
	visibility: hidden;
padding-bottom: 25px;
}

	.x-carousel--is-loaded {
		visibility: visible;
	}
	
	.x-carousel__button {
		display: none;
	}
	
	@media (min-width: 48em) {
		.x-carousel__button {
			display: inline-block;
			padding: 0;
			position: absolute;
			top: 50%;
			font-size: 3rem;
			background-color: rgba(255, 255, 255, 0);
			border: 0 none;
			opacity: 0.25;
			-webkit-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
			transform: translateY(-50%);
			transition: ease-in-out 0.3s;
			z-index: 50;
		}
		
		.x-carousel__button-right {
			right: 0;
		}
		
		.x-carousel__button:hover {
			background-color: rgba(255, 255, 255, 0.25);
			opacity: 1;
		}
	}
	
	.x-carousel__container {
		display: flex;
		width: 100%;
		flex: 1;
		position: relative;
		left: -100%;
		transform: translate3d(100%, 0, 0);
	}
	
		.x-carousel--reverse {
			transform: translate3d(-100%, 0, 0);
		}
		
		.x-carousel--animate {
			transform: none;
			transition: all 250ms ease-in-out;
		}
		
		.x-carousel__item {
			display: flex;
			flex: 1 0 100%;
			min-width: 100%;
			margin: 0;
			align-items: flex-start;
		}
		
			.x-carousel__item img {
				opacity: 1;
				transition: opacity 250ms;
			}
			
			.x-carousel__item img[data-src] {
				opacity: 0;
			}