.bdt-elastic-slider {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;

	.bdt-elastic-slideshow {
		position: relative;
		width: 100vw;
	}

	.bdt-elastic-slide-item {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		right: 0;
		visibility: hidden;
		pointer-events: none;

		display: -webkit-flex;
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		text-align: center;
		&.slide--current {
			position: relative;
			visibility: visible;
			&.slide--open {
				z-index: 100;
			}
		}
	}


	.deco--circle {
		position: absolute;
		top: 0;
		border-radius: 50%;
		background: #f2f8ff;
	}

	.deco--circle-left {
		right: ~'calc(100% - 140px)';
	}

	.deco--circle-right {
		left: ~'calc(100% - 140px)';
	}

	.deco--circle,
	.bdt-elastic-image-action__inner {
		width: 450px;
		height: 450px;
	}

	.bdt-elastic-image-action-btn {
		position: relative;
		width: 100%;
	}

	.no-js .bdt-elastic-image-action-btn {
		display: none;
	}

	.bdt-elastic-image-action__inner {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		pointer-events: auto;
	}

	.deco--expander {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -225px 0 0 -225px;
		border-radius: 50%;
		background: #f2f8ff;
	}

	.bdt-elastic-slide-content {
		padding: 30px;
	}

	.bdt-elastic-title-preview {
		font-size: 40px;
		margin-top: 0;
		margin-bottom: 20px;
		text-transform: capitalize;
	}

	.bdt-elastic-title--main {
		font-size: 50px;
		margin-top: 0;
		margin-bottom: 15px;
		color: #464653;
	}


	.slide--open {
		.bdt-elastic-title--main {
			opacity: 1;
		}
	}

	.bdt-elastic-price {
		color: #38383e;
		font-size: 17px;
		font-weight: 700;
		.price {
			display: inline-flex;
			align-items: center;
			grid-column-gap: 15px;

			del {
				span {
					display: inline-block;
				}
			}

			ins {
				background: #f2f8ff;
				color: #2ab603;
				padding: 5px 14px;
				text-decoration: none;
				border-radius: 30px;
			}
		}
	} 

	.bdt-elastic-price--large {
		font-size: 15px;
		vertical-align: middle;
		.price ins {
			background: #deebfb;
		}
	}

	.bdt-elastic-img {
		position: relative;
		display: block;
		margin: 0 auto;
		object-fit: contain;
	}

	.bdt-elastic-img-small {
		max-height: 80%;
	}

	.bdt-elastic-img-large {
		height: 30vh;
		max-height: 400px;
	}

	.bdt-elastic-action {
		font-size: 1.5em;
		margin: 0;
		text-align: center;
		border: none;
		background: none;
	}

	.bdt-elastic-action:focus {
		outline: none;
	}

	.bdt-elastic-action--open {
		position: absolute;
		right: 0;
		bottom: 0;
		margin: 0 40px 40px 0;
		padding: 17px 22px;
		font-size: 18px;
		color: #ffffff;
		border-radius: 30px;
		background: #6cd84e;
		transition: transform .3s ease;
		transition-delay: .1s;
		cursor: pointer;
		box-shadow: 0 0px 0 6px #fff;
		i {
			transform: rotate(-90deg);
			transition: transform .3s ease;
		}
		&:hover {
			background: #fd6a2c;
			transform: scale(1.3);
			i {
				transform: rotate(0);
			}
		}
	
	}

	.slide--open {
		.bdt-elastic-action--open {
			opacity: 0;
			transition-delay: 0s;
			transform: scale3d(0.3, 0.3, 1);
			// visibility: hidden;
		}
	} 

	.bdt-elastic-action--close {
		position: fixed;
		z-index: 100;
		top: 0;
		right: 0;
		margin: 40px;
		color: #262627;
		cursor: pointer;
		transition: transform .1s,opacity .1s,all .3s;
		border: 0;
		background: #fff;
		font-size: 16px;
		padding: 12px 16px;
		border-radius: 30px;
		i {
			transform: rotate(-90deg);
			transition: transform .2s ease;
		}
		&:focus,
		&:hover {
			color: #fff;
			background: #fd6a2c;
			i {
				transform: rotate(0);
			}
		}
	}

	.slide--open~.bdt-elastic-action--close {
		opacity: 1;
		transform: scale3d(1, 1, 1);
		transition-delay: 0.5s, 0.5s, 0s;
		visibility: visible;
	}

	.bdt-elastic-action--close,
	.slide--close~.bdt-elastic-action--close {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 1);
		transition-delay: 0s;
		visibility: hidden;
	}

	.bdt-elastic-modal-wrap {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		pointer-events: none;
		opacity: 0;
		background-color: #f2f8ff;
	    transition: opacity .4s cubic-bezier(0.17, 0.54, 0.69, 1.03);
		overflow-y: auto;
	}

	.bdt-elastic-modal-details {
		padding: 20px;
		max-width: 700px;
		margin: 0;
	}

	.slide--open {
		.bdt-elastic-modal-wrap {
			pointer-events: auto;
			opacity: 1;
		}
	}

	.bdt-elastic-content-scroller {
		// position: fixed;
		// height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0;
		position: relative;
		img {
			object-fit: contain;
		}
	}

	.bdt-elastic-description {
		font-size: 14px;
		margin-top: 0;
		margin-bottom: 20px;
		text-transform: capitalize;
		color: #535360;
		line-height: 1.8;
	}
	.bdt-elastic-price-buy-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		.price {
			margin: 0;
		}
	}

	.bdt-elastic-button--buy {
		margin-top: 25px;

		.cart {
			display: flex;
			flex-direction: row-reverse;
			align-items: stretch;
		}

		.quantity {
			display: flex;
			align-items: stretch;
		}

		.quantity input {
			height: 100%;
			box-sizing: border-box;
			color: #2B2D42;
			font-size: 14px;
			width: 60px;
			padding: 13px 8px 10px 4px;
			font-weight: 600;
			margin-left: 20px;
			text-align: center;
			outline: none;
			border: 0;
			transition: all .3s ease;
			background: #deebfb;
			border-radius: 30px;
		}

		.button {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			margin: 0;
			font-size: 12px;
			padding: 16px 35px;
			color: #f2f8ff;
			border: none;
			border-radius: 30px;
			background: #6cd84e;
			margin-left: 20px;
			cursor: pointer;
			transition: all .3s ease;
			text-transform: uppercase;
			position: relative;
			letter-spacing: 1px;
			overflow: hidden;
			z-index: 1;
			&::before {
				content: '';
				position: absolute;
				transition: all 300ms ease;
				background-color: #fd6a2c;
				left: 0;
				top: 0;
				width: 0px;
				height: 100%;
				z-index: -1;
			}
			&:hover {
				&::before {
					width: 100%;
				}
			}
		}
	}

	.navbutton {
		position: absolute;
		z-index: 1;
		top: 50%;
		left: 50%;
		width: 100px;
		padding: 0;
		border: none;
		background: none;
		cursor: pointer;
	}

	.navbutton__line {
		transition: stroke 0.3s;
	}

	.navbutton:focus {
		outline: none;
	}

	.navbutton:hover .navbutton__line {
		stroke: #fd6a2c;
	}

	.navbutton--next {
		transform: translate3d(230px, -220px, 0);
	}

	.navbutton--prev {
		transform: translate3d(-100%, 0, 0) translate3d(-210px, 60px, 0);
	}

	/* Helper classes */

	.lockscroll {
		height: 100vh;
	}

	.noscroll {
		overflow: hidden;
		height: 100vh;
		position: fixed;
	}

	.noscroll {
		.deco--expander {
			display: none;
		}
	}

	// .scrollable {
	// 	background: #f2f8ff;
	// }

	.scrollable {
		.bdt-elastic-content-scroller {
			position: relative;
		}
	}
}

@media (min-width: 768px) {
	.bdt-elastic-slider {
		 .bdt-elastic-img-large {
			height: 50vh;
		}
		.bdt-elastic-img-large {
			margin: 0 auto 2em;
		}
		.bdt-elastic-modal-details {
			padding: 30px;
		}
		.bdt-elastic-title--main {
			margin-bottom: 30px;
		}	
		.bdt-elastic-description {
			margin-bottom: 45px;
		}	
		.bdt-elastic-button--buy {
			margin-top: 45px;
		}
		.bdt-elastic-price--large {
			font-size: 20px;
		}
		.bdt-elastic-button--buy {
			.button {
				font-size: 14px;
				letter-spacing: 2px;
			}
		}
		.bdt-elastic-button--buy {
			.quantity input {
				padding: 13px 8px 10px 21px;
			}
		} 
	}
}
@media (min-width: 1024px) {
}

@media screen and (max-width: 50em) {
	.bdt-elastic-slider {
		.deco--title {
			right: -50px;
			left: -50px;
		}
		
		.deco--circle,
		.bdt-elastic-image-action__inner {
			width: 260px;
			height: 260px;
		}

		.deco--expander {
			margin: -130px 0 0 -130px;
		}

		.deco--circle-left {
			right: ~'calc(100% - 50px)';
		}

		.deco--circle-right {
			left: ~'calc(100% - 50px)';
		}

		.bdt-elastic-slideshow {
			margin-top: 0;
		}

		.bdt-elastic-action--open {
			margin: 0 15px 15px 0;
		}

		.bdt-elastic-img-large {
			margin: 0 auto 1em;
		}

		.bdt-elastic-title--main {
			font-size: 24px;
		}

		.bdt-elastic-description {
			font-size: 14px;
		}

		.navbutton--next {
			transform: translate3d(70px, -140px, 0) scale3d(0.5, 0.5, 1);
			z-index: 2;
		}

		.navbutton--prev {
			transform: translate3d(-50%, 0, 0) translate3d(-114px, -14px, 0) scale3d(0.5, 0.5, 1);
			z-index: 2;
		}
	}
}