.wave-block {
	width: 100%;
	height: calc(100vh - 100px);
	overflow: hidden;
	position: relative;
	
	min-height: 550px;
}

.wave-canvas {
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
}

.wave-canvas svg {
	width: 100%;
	height: 100%;
	display: block
}

.wave-canvas stop:first-child {
	stop-color: #4d80e9
}

.wave-canvas stop:last-child {
	stop-color: #39bad1
}

.wave-canvas canvas {
	display: none
}

.wave-block-inner {
	width: 100%;
	height: 100%;
	transition: none;
	transform: translateZ(0)
}

.wave-block-inner.hidden {
	opacity: 0;
	transition: opacity 0.3s ease
}

.scroll-jar {
	background: #FFF;
	position: relative;
}

.wave-jar {
	width: 100%;
	height: 100%;
	max-width: 1210px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: end;
	justify-content: center;
	z-index: 2;
	font-size: 0;
	margin: 0 auto;
	text-align: right;
	transition: all 1s ease;
	transform: translateZ(0);
}

.wave-jar.active {
	justify-content: flex-end;
}


.wave-jar:before {
	content: '';
	width: 0;
	height: 100%;
	display: inline-block;
	vertical-align: bottom
}

.slide-toggle{
	right: 0;
	display: inline-block;
	width: 100%;
	max-width: 500px;
	z-index: 2;
	transition: right 1s ease;
	cursor: pointer;
}

.slide-active{
	position: absolute;
	left: 0;
	right: 100%;
}

.slide-toggle.kuldurskaya{
	max-width: 300px;
}

.slide-toggle img{
	position: relative;
	z-index: 2;
	width: 100%
}

.open-page{
	max-width: 1250px;
	width: 100%;
	height: 100%;
	max-height: 570px;
	background: #fff;
	transition: opacity 0.6s ease;
	display: none;
	margin: 0;
}

.open-page.kuldurskaya .product-attributes,
.open-page.kuldurskaya #kuldurskaya,
.open-page.kuldurskaya .day-in-day,
.open-page.kuldurskaya .price-shukhi {
	display: none;
}

.open-page:not(.kuldurskaya) .price-kuldurskaya {
	display: none;
}

.slide-toggle:hover .wave-pulse{
	animation: pulse-color 0.8s infinite;
}

.wave-pulse {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 100px;
	width: 300px;
	height: 400px;
	border-radius: 50%;
	animation: pulse 1s infinite;
	animation-duration: 1.5s;
	z-index: 1;
	animation-delay: 1s;
}
.wave-pulse.wave-pulse-stop{
	animation-iteration-count: 0;
	animation-duration: 0s;
	animation: 0;
	display: none;
}


@-webkit-keyframes pulse {
	0% {
		-webkit-box-shadow: 0 0 0 0 rgba(121, 121, 121, 0.6);
	}
	70% {
		-webkit-box-shadow: 0 0 0 100px rgba(121, 121, 121, 0);
	}
	100% {
		-webkit-box-shadow: 0 0 0 0 rgba(121, 121, 121, 0);
	}
}
@keyframes pulse {
	0% {
		-moz-box-shadow: 0 0 0 0 rgba(121, 121, 121, 0.6);
		box-shadow: 0 0 0 0 rgba(121, 121, 121, 0.5);
	}
	70% {
		-moz-box-shadow: 0 0 0 100px rgba(121, 121, 121, 0);
		box-shadow: 0 0 0 100px rgba(121, 121, 121, 0);
	}
	100% {
		-moz-box-shadow: 0 0 0 0 rgba(121, 121, 121, 0);
		box-shadow: 0 0 0 0 rgba(121, 121, 121, 0);
	}
}

@-webkit-keyframes pulse-color {
	0% {
		-webkit-box-shadow: 0 0 0 0 rgba(152, 29, 240, 1);
	}
	70% {
		-webkit-box-shadow: 0 0 0 100px rgba(152, 29, 240, 0);
	}
	100% {
		-webkit-box-shadow: 0 0 0 0 rgba(152, 29, 240, 0);
	}
}
@keyframes pulse-color {
	0% {
		-moz-box-shadow: 0 0 0 0 rgba(152, 29, 240, 1);
		box-shadow: 0 0 0 0 rgba(152, 29, 240, 1);
	}
	70% {
		-moz-box-shadow: 0 0 0 100px rgba(152, 29, 240, 0);
		box-shadow: 0 0 0 100px rgba(152, 29, 240, 0);
	}
	100% {
		-moz-box-shadow: 0 0 0 0 rgba(152, 29, 240, 0);
		box-shadow: 0 0 0 0 rgba(152, 29, 240, 0);
	}
}


@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-webkit-transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-30px);
	}
	60% {
		-webkit-transform: translateY(-15px);
	}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
	40% {
		-moz-transform: translateY(-30px);
		-ms-transform: translateY(-30px);
		transform: translateY(-30px);
	}
	60% {
		-moz-transform: translateY(-15px);
		-ms-transform: translateY(-15px);
		transform: translateY(-15px);
	}
}

.arrow-wave {
	position: relative;
	margin: 30px auto 0;
	width: 32px;
	height: 32px;
	z-index: 90;
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDI1NSAyNTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1NSAyNTU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iYXJyb3ctZHJvcC1kb3duIj4KCQk8cG9seWdvbiBwb2ludHM9IjAsNjMuNzUgMTI3LjUsMTkxLjI1IDI1NSw2My43NSAgICIgZmlsbD0iIzAwMDAwMCIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
	background-size: contain;
}

.bounce {
	-moz-animation: bounce 2s infinite;
	-webkit-animation: bounce 2s infinite;
	animation: bounce 2s infinite;
}


/*********** текст - закажи воду ***********/


.wave-title-block {
	text-align: center;
	transition: 0.2s ease;
	opacity: 1;
	z-index: 2;
	position: relative;
	-webkit-animation: blurIn 1s forwards;
	animation: blurIn 1s forwards;
}
.wave-title-block.wave-title-stop h1 {
	margin: 0 auto;
}

@keyframes blurIn {
	0% {
		opacity: 0;
		filter: blur(10px);
		transform: scale3d(0.85,0.85,0.85);
	}

	100% {
		opacity: 1;
		filter: blur(0);
		transform: scale3d(1,1,1);
	}
}


/*********** END текст - закажи воду ***********/

@media screen and (min-width: 1280px) {
	canvas {
		display: block
	}
	.wave-canvas svg {
		display: none
	}
	.wave-canvas canvas {
		width: 100%;
		height: 100%;
		display: block;
		transform: translateZ(0px)
	}
}

@media screen and (max-width: 1280px)  {
	.wave-jar {
		max-width: 1240px;
		text-align: center;
		width: auto;
		margin: 0 20px
	}
	.slide-active {
		right: 0!important;
		bottom: 25vh!important;
		z-index: 0!important;
		transition: bottom 0.3s ease-out!important; 
	}
	.wave-title-stop{
		display: none;
	}
	.opc_top_inner {
		margin-left: 0;
	}
	.open-page {
		max-height: 65vh;
	}
}

@media screen and (max-width: 900px)  {
	.wave-title {
		margin: 11% auto 0;
	}
}

@media screen and (max-height: 900px)  {
	.arrow-wave {
		margin: 20px auto 0;
	}
}

@media screen and (max-height: 820px)  {
	@-webkit-keyframes bounce {
		0%, 20%, 50%, 80%, 100% {
			-webkit-transform: translateY(0);
		}
		40% {
			-webkit-transform: translateY(-20px);
		}
		60% {
			-webkit-transform: translateY(-10px);
		}
	}
	@keyframes bounce {
		0%, 20%, 50%, 80%, 100% {
			-moz-transform: translateY(0);
			-ms-transform: translateY(0);
			transform: translateY(0);
		}
		40% {
			-moz-transform: translateY(-20px);
			-ms-transform: translateY(-20px);
			transform: translateY(-20px);
		}
		60% {
			-moz-transform: translateY(-10px);
			-ms-transform: translateY(-10px);
			transform: translateY(-10px);
		}
	}
	.wave-title-stop {
		display: none;
	}
	.slide-toggle {
		bottom: -50px;
	}

}
@media screen and (max-width: 767px)  {
	.wave-block-inner.fixed {
		top: 0;
	}
	.wave-jar {
		margin: 0;
	}
	html.mobile .wave-block {
		overflow: visible;
	}
}

@media screen and (max-height: 750px)  {
	.slide-toggle {
		bottom: -100px;
	}
}

@media screen and (max-width: 650px) {
	.slide-toggle {
		bottom: -50px;
	}
	.wave-pulse {
		width: 180px;
		height: 180px;
	}
	.wave-title {
		font-size: 14vw;
		margin: 8% auto 0;
	}
	.slide-active {
		display: none;
	}
	/*html.mobile .wave-title {
	font-size: 10vw;
	}*/
	.wave-title::before, .wave-title::after {
		display: none;
	}
	.arrow-wave {
		margin: 50px auto 0;
	}
}
@media screen and (max-width: 580px) {
	.arrow-wave {
		margin: 30px auto 0;
	}
	html.mobile .arrow-wave {
		margin: 10px auto 0;
	}
	.wave-title {
		margin: 0 auto;
	}
}