.off-canvas {
	-webkit-transition: all .45s cubic-bezier(.3, 0, .15, 1);
	transition: all .45s cubic-bezier(.3, 0, .15, 1);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	width: 17.5rem;
	background: #fff;
	position: fixed;
	top: 0;
	bottom: 0;
	display: none;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.container--ajax-cart.off-canvas {
	width: 450px;
	max-width: 100%;
	-webkit-transition: all .45s cubic-bezier(.3, 0, .15, 1);
	transition: all .45s cubic-bezier(.3, 0, .15, 1);
	margin-right: 0;
	height: 100%;
	left: auto;
	position: fixed;
	top: 0;
	padding: 0;
	background: #fff;
	z-index: 101000;
}

.container--ajax-cart.inner.off-canvas {
	z-index: 102000;
}

.off-canvas.is--active {
	display: block;
}

.off-canvas.no--transitions {
	-webkit-transition: none;
	transition: none;
}

.off-canvas.is--right {
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	right: 0;
}

.off-canvas.is--open {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.container--ajax-cart.off-canvas .ajax--cart {
	overflow: hidden;
	
	color: #000000;
	font-family: Abel;
	font-size: 16px;
	height: 100%;
}

.container--ajax-cart.off-canvas .close-cart-wrapper::after {
	clear: both;
	display: table;
	content: "";
}
		
.container--ajax-cart.off-canvas .close-cart-link {
	background: transparent;
	float: right;
	font-size: 2rem;
	padding: 0.5rem 1rem;
	color: #000;
}

.ajax--cart .item--container {
	overflow-y: scroll;
	max-height: 60vh;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.ajax--cart .item--container::-webkit-scrollbar {
  display: none;
}

.ajax--cart .cart--item {
	margin-left: 10px;
	margin-bottom: 10px;
}

.ajax--cart .cart--item > div {
	display: inline-block;
}

.ajax--cart .thumbnail--container,
.ajax--cart .qty--container,
.ajax--cart .data--container {
	width: 33%;
	padding-bottom: 33%;
	text-align: center;
	position: relative;
}

.ajax--cart .thumbnail--container-inner,
.ajax--cart .qty--container-inner,
.ajax--cart .data--container-inner {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}

/* QUANTITY */

.ajax--cart .qty--container-inner div {
	display: inline-block;
}

.ajax--cart .qty--container-inner .qty-dec,
.ajax--cart .qty--container-inner .qty-inc {
	width: 25%;
	height: 25%;
	vertical-align: middle;
}

.ajax--cart .qty--container-inner .qty-txt {
	width: 50%;
	height: 50%;
	top: 25%;
}

.ajax--cart .qty--container .qty-dec span,
.ajax--cart .qty--container .qty-inc span {
	font-size: 30px;
	font-weight: 700;
}

.ajax--cart .qty--container .qty-dec button,
.ajax--cart .qty--container .qty-inc button {
	background: none;
	border: none;
	cursor: pointer;
}

.ajax--cart .qty--container .qty-txt {
	color: #FFFFFF;
	background: #000000;
	border-radius: 50%;
	position: relative;
}

.ajax--cart .qty--container .qty-txt span {
	width: 100%;
	font-size: 30px;
	font-weight: 700;
	position: absolute;
	top: 30%;
	left: 0;
}

.ajax--cart .thumbnail--container img {
	max-height: 100%;
}

.ajax--cart .data--container span {
	display: block;
}

/* CHECKOUT & MORE BUTTONS */ 

.ajax--cart .button--container {
	bottom: 0px;
	position: absolute;
	width: 100%;
	overflow: hidden;
}

.button--container a {
	color: #FFFFFF;
	cursor: pointer;
}

.checkout-btn, .more-btn {
	width: 80%;
	padding-bottom: 80%;
	border-radius: 50%;
	background: #000;
	position: relative;
}

.checkout-btn-inner, .more-btn-inner {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	text-align: center;
}

.checkout-btn {
	width: 80%;
	padding-bottom: 80%;
	margin-left: 30%;
	margin-bottom: -30%;
}

.checkout-btn .prices--articles {
	position: relative;
	top: 20%;
	font-size: 20px;
	color: #FFF;
}

.checkout-btn .prices--articles a {
	font-size: 24px;
}

.checkout-btn .prices--tax {
	position: relative;
	top: 35%;
	font-size: 14px;
	color: #FFF;
}

.more-btn {
	width: 50%;
	padding-bottom: 50%;
	margin-left: 20%;
	margin-bottom: -15%;
}

.more-btn a {
	position: relative;
	font-size: 20px;
	top: 40%;
}

/* LoadingIndicator */

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

@keyframes fadetoblack {
    from {
        background: #FFF;
    }
    to {
        background: #000;
    }
}

@keyframes fadetowhite {
    from {
        background: #000;
    }
    to {
        background: #FFF;
    }
}

.spinning {

	display: block;

	animation-name: spin;
	animation-duration: 1000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear; 
}

.ajax--cart.preview.fade .checkout-btn,
.ajax--cart.preview.fade .more-btn {
	
	animation-name: fadetoblack;
	animation-duration: 1000ms;
	animation-iteration-count: 1;
	animation-timing-function: linear; 
}

.ajax--cart.preview.inner.fade .cart-info,
.ajax--cart.preview.inner.fade .article-inner {
	
	animation-name: fadetowhite;
	animation-duration: 1000ms;
	animation-iteration-count: 1;
	animation-timing-function: linear; 
}