/* 1366x768 - laptop */
@media (max-width: 1360px){
	.xxxl-hide {display:none;}
	.presentation .button.large { padding: 15px 25px; }
	.presentation h2 { font-size: 28px; }
	.presentation .feature-item .mark { padding: 5px; }
	.presentation .container,
	.main-menu .container,
	.header .container { padding: 15px 20px; }
}

/* xxl - extra extra large */
@media (max-width: 1200px){
	.xxl-hide {display:none;}
	
	.category-picture .cat-text h2 {font-size: 2.2rem;}
}

/* xl - extra large */
@media (max-width: 1080px){

	.xl-text-center {text-align:center;}
	.xl-hide {display:none;}
	.xl-show {display:block;}
	
	.xl-flex {display:flex;}
	
	.xl-flex-column {flex-direction:column;}
	.xl-fw, .xl-flex-fw > * {width:100%;}

	.grid.xl-1-row { grid-template-columns: repeat(1,1fr); }
	.grid.xl-2-row { grid-template-columns: repeat(2,1fr); }
	.grid.xl-3-row { grid-template-columns: repeat(3,1fr); }
	.grid.xl-4-row { grid-template-columns: repeat(4,1fr); }
	
	.category-picture .cat-text h2 {font-size: 2.2rem;}
}

/* lg - large */
@media (max-width: 960px){

	.lg-text-center {text-align:center;}
	.lg-hide {display:none;}
	.lg-show {display:block;}
	
	.articles-list {order: 1;}
	.articles-sidebar {order: 0;}
	
	.lg-flex {display:flex;}
	
	.lg-flex-column {flex-direction:column;}
	.lg-fw, .lg-flex-fw > * {width:100%;}

	.grid.lg-1-row { grid-template-columns: repeat(1,1fr); }
	.grid.lg-2-row { grid-template-columns: repeat(2,1fr); }
	.grid.lg-3-row { grid-template-columns: repeat(3,1fr); }
	.grid.lg-4-row { grid-template-columns: repeat(4,1fr); }
	
	/* PRESENTATION */
	.presentation .bochka .bg.bg-tree.bg-banya-big { background:url(../img/bg-main-banya.webp) no-repeat center bottom / 50%, url(../img/bg-tree.webp) no-repeat 100px 10% / 50%;}
	.presentation .buttons, .presentation .subtitle {justify-content:center; width: 90%; margin: 0 auto;}
	.presentation .banya-area { width:100%; height:60%; top:40%; }
	
	
	/* CONSTRUCTION */
	
	.construction .schema .schema-mark .desc { transform:none!important; top:unset!important; bottom:0!important; left:0!important; right:unset!important; width: calc(100% - 40px); }
	.construction .schema .schema-mark:hover .desc { display: none; }
	.construction .schema .schema-mark.active .desc { display: block; }
	
	.category-picture .cat-text h2 {font-size: 1.8rem;}
	
	.reel-reviews-slider {padding: 0;}
	.reel-reviews .reel-review.active {flex-direction: column; align-items: stretch;}
	.reel-reviews .reel-review-video {flex: none; width: 100%; margin: 0 auto;}
	.reel-reviews .slide-ctrl {top: 270px; margin-top: -25px;}
}
/* md - medium */
@media (max-width: 768px){
	
	.md-text-center {text-align:center;}
	.md-hide {display:none;}
	.md-show {display:block;}
	
	.md-flex {display:flex;}
	
	.md-flex-column {flex-direction:column; flex-wrap:wrap;}
	.md-fw, .md-flex-fw > * {width:100%;}
	.md-flex-hw > * {width:50%;}
	
	.grid.md-1-row { grid-template-columns: repeat(1,1fr); }
	.grid.md-2-row { grid-template-columns: repeat(2,1fr); }
	.grid.md-3-row { grid-template-columns: repeat(3,1fr); }
	.grid.md-4-row { grid-template-columns: repeat(4,1fr); }
	
	/* PRESENTATION */
	.presentation .bochka .bg.bg-tree.bg-banya-big { background:url(../img/bg-main-banya.webp) no-repeat 20% bottom / 50%, url(../img/bg-tree.webp) no-repeat 0% 30% / 50%;}
	
	/* cat banner */
	
	.category-picture { position:relative; aspect-ratio: unset; }
	.category-picture .cat-text { padding-left: 0; width:100%; background:linear-gradient(0deg, #ebebeb, transparent);}
	.category-picture .cat-text .line-break:before {display:none;}
	.category-picture .cat-text .button {display:block;}
	.category-picture .cat-image {position:relative; aspect-ratio:1.8; }
	.category-picture .cat-image:after {content:''; position:absolute; background: url(../img/bg-clouds.webp) repeat-x bottom center / contain; height:15%; bottom:0; width:100%; display:block;}

	/* SNAP SLIDER */
	
	.product-list .product .product-images .handle {display:none;}
	.product-list .product .product-images {
		--num-slides:1;
		display: flex;
		gap:5px;
		align-items: stretch;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
	}
	.product-list .product .product-images > *,
	.product-list .product .product-images .img-item {
		position: relative;
		height:100%;
		scroll-snap-align: start;
		flex: 0 0 calc(100% / var(--num-slides));
		width: calc(100% / var(--num-slides));
		position: relative;
	}
	.product-list .product .product-images::-webkit-scrollbar {width: 5px; height: 5px;}
	.product-list .product .product-images::-webkit-scrollbar-thumb { background: var(--clr-num2); }
	.product-list .product .product-images::-webkit-scrollbar-track { background: #ddd; }

	.product-list .product .product-images::-webkit-scrollbar { display:block; }

}
/* sm - small */
@media only screen and (max-width:500px){
	
	.sm-text-center {text-align:center;}
	.sm-hide {display:none;}
	.sm-show {display:block;}
	
	.sm-flex {display:flex;}
	
	.sm-flex-column {flex-direction:column;}
	.sm-flex-fw > * {width:100%;}
	
	.grid.sm-1-row { grid-template-columns: repeat(1,1fr); }
	.grid.sm-2-row { grid-template-columns: repeat(2,1fr); }
	.grid.sm-3-row { grid-template-columns: repeat(3,1fr); }
	.grid.sm-4-row { grid-template-columns: repeat(4,1fr); }
	
	/* Custom */
	.caption h2 { font-size: 28px; }
	
	.video-wrapper .video-item .title {font-size: 12px; line-height: 15px;}
	
	.feedback .container { padding: 10px 20px; }
	.feedback .contacts {display:block;}
	.feedback .contacts > * {width:100%; display:block;}
	
	.presentation .feature-item .text { font-size: 14px; }
	.presentation .buttons a { font-size: 14px; }
	.presentation .button.outline {}

	.presentation  .iconized .icon {left:unset;right: -35px;}
	.presentation .info {margin:0;}
	
	.presentation h2 { font-size: 27px; line-height: 40px; margin: 0;}
	.presentation h2 span:nth-child(2):before { content: ' '; display: block; }
	
	.presentation .top-birds { height: 30px; }
	.presentation .feature-item .mark { padding: 5px; }
	.presentation .feature-item .mark i {height: 10px; width: 10px; font-size: 10px; line-height: 10px;}
	.presentation .button.large { padding: 10px; }
	
	.presentation .subtitle { align-items:center; margin:10px 0 0;}
	.presentation .subtitle .dsp-flex {gap:5px!important;}
	.presentation .subtitle .icon {display:none;}
	.presentation .subtitle p {font-size: 12px;}
	.presentation .subtitle .icon-arrow-arc {background-image: url(../img/icon-gift.webp); display:block; width: 25px; animation:shake 2s ease infinite;}
	
	.presentation .features-list {margin:20px 0;}
	
	.presentation .feature-item {display:none;}
	.presentation .feature-item:nth-child(1),
	.presentation .feature-item:nth-child(2),
	.presentation .feature-item:nth-child(3) {display:flex;}
	
	.presentation .bochka { min-height: 50vw; }
	.presentation .bochka .bg.bg-tree.bg-banya-big {
    	background: url(../img/bg-main-banya.webp) no-repeat 35% bottom / 80%, url(../img/bg-tree.webp) no-repeat 80% 0% / 50%;
	}
	.bg-sky.bg-grass {
    	background: url(../img/bg-bushes.webp) 0% 100% / 15% no-repeat, url(../img/bg-grass.webp) center bottom / 600px 30vw repeat-x, linear-gradient(rgba(255, 255, 255, 0.667), rgba(255, 255, 255, 0.467)), url(../img/bg-sky.webp) center center / cover no-repeat;
	}
	
	#quiz-frame:not(.modal-window) { position: relative; background: var(--clr-plate); }
	
	.quiz h2 { font-size: 18px; }
	.quiz h2 .small { font-size: 16px; }
	.quiz .quiz-features .feature { font-size:13px; }
	.quiz .quiz-content.embed { height:100vh; }
	.quiz-footer {flex-direction:column-reverse;}
	.quiz-footer > * {width:100%;}
	.quiz .quiz-panel.final form { width:100%;}
	.quiz-items .quiz-item .photo { padding: 80% 0px 0px; }
	
	.quiz .quiz-content.embed > * { padding: 10px 0; }
	.quiz .quiz-content {box-shadow: none;}
	.quiz .quiz-header { font-size: 1.2rem; }
	
	.quiz-footer .quiz-progress .text { margin:0; }
	.quiz-footer .quiz-progress {display:flex; gap:10px; align-items:center;}
	.quiz-footer .quiz-progress .bar {flex-grow:1;}
	
	.catalog-category h2 { font-size: 24px; }
	.catalog-category .see-all .button {font-size:14px;}
	
	.product-list .product .title { font-size: 20px; }
	.product-list .product .params {font-size: 13px;}
	.product-list .product .prices span {font-size: 16px;}
	.product-list .product .buttons {font-size: 14px;}
	
	.price-constructor .prices .total-text { font-size: 16px; }
	
	.gallery-cap {flex-direction:row;}
	.gallery-cap > * {width:fit-content;}
	.gallery-cap .number {font-size:40px;}
	.gallery-cap .text { font-size: 16px; }
	
	.founder h2 { font-size: 28px; }
	.founder .our-feature .cap { font-size: 16px; }
	.founder .our-feature p {font-size: 13px;}
	.founder .idea {font-size: 14px;}
	.founder .buttons {display:block;}
	.founder .buttons .button {display:block;}
	.founder .discuss {display:none;}
	.founder-photo .info .name { font-size: 16px; }
	.founder-photo .info .cap { font-size: 12px; }
	
	.factory h2 { font-size: 20px; }
	
	.place-blocks { gap: 20px; }
	.place-blocks .info h2 { font-size: 20px; }
	
	.construction h2 { font-size: 18px; }
	.construction .text p { font-size: 13px; }
	
	.reel-reviews h2 {font-size: 22px; margin: 0 0 20px;}
	.reel-reviews .reel-review {padding: 15px; gap: 20px;}
	.reel-reviews .reel-review-title {font-size: 18px; line-height: 24px; margin: 0 0 12px;}
	.reel-reviews .reel-review-text {font-size: 16px; line-height: 24px;}
	.reel-reviews .slide-ctrl {width: 40px; height: 40px; top: 250px; margin-top: -20px; font-size: 14px; background: rgb(255 255 255 / 90%);}
	.reel-reviews .slide-ctrl.prev {left: -10px;}
	.reel-reviews .slide-ctrl.next {right: -10px;}
	
	.reviews h1 {font-size: 18px;}
	.reviews-blocks .text h2 { font-size: 22px; }
	.review-cap {display:flex; align-items:center; text-align:left; gap:20px;}
	.reviews-blocks .text .review-cap b {font-size: 28px;}
	.reviews-blocks .text .review-cap span { font-size:16px; line-height:25px;}
	.video-wrapper {background:none; box-shadow:none; padding:0; margin:0 0 40px;}
	.reviews-blocks { gap: 15px; }
	
	.buy-process h2 {font-size: 24px; text-align: center;}
	.buy-process-list .buy-item .cap {font-size: 16px;}
	.buy-process-list .buy-item .text p {font-size: 14px;}
	.buy-process-list { margin: 20px 0 0; gap: 20px; }
	
	.feedback .h2 { font-size: 24px; margin: 0 0 20px; }
	.feedback .contacts .phone a {font-size: 22px;}
	.feedback .contacts a {font-size: 16px;}
	
	.cookie-bar {left:12px; right:12px; max-width:none; bottom:12px;}
	.clients-tabs {flex-direction:column;}
	.clients-tabs .button {text-align:center;}
	
	#region-choose {height: 80vh;}
	
	.article-item .anonce {display:block;}
	.article-item .desc {overflow:visible; max-height:unset; height:auto;}
	.article-item .img-holder {margin:0 0 20px; height: unset; aspect-ratio: 1.6;}
	
}

/* ssm - super small */
@media only screen and (max-width:400px){
	
	.presentation h2 {font-size: 18px; line-height: 20px;}
	.presentation .top-birds { height: 0; }
	.presentation .features-list {margin:20px 0;}
	
	.presentation .feature-item .mark { padding: 5px; }
	.presentation .feature-item .mark i {height: 10px; width: 10px; font-size: 10px; line-height: 10px;}
	.presentation .button.large { padding: 10px; }
	.presentation .subtitle p { font-size: 10px;}
	.mobile-menu .container { padding: 10px; }
	
	.quiz .quiz-header { font-size: 1rem; }
	
	.product-info.card-info { background: url(../img/bg-bath-stones.webp) no-repeat right 35px / 50px; }
	.product-card .buttons .alt .link { font-size: 16px; }
	
	.price-constructor .prices .total-text { font-size: 14px; }
	
	.extra-cat .extra-item .title { font-size: 14px; word-break: break-all; }
}

@keyframes shake {
  0% { transform:rotate(0) }
  5% { transform:rotate(-15deg) }
  10% { transform:rotate(15deg) }
  15% { transform:rotate(-15deg) }
  20% { transform:rotate(15deg) }
  25% { transform:rotate(-15deg) }
  30% { transform:rotate(15deg) }
  35% { transform:rotate(0) }
  100% { transform:rotate(0) }
}