@import url(variables.css);

@import url(fonts.css);

/* *,
*::before,
*::after {
  box-sizing: border-box;
} */

ul,
ol {
  list-style: none;
}

html {  
  font-size: 16px;
}

/* body {
  padding: 0;
  margin: 0;
} */

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.umniki-anchor {
  width: 1px;
  height: 1px;
  margin-top: -120px;
  position: absolute;
  z-index: 0;
  right: 0;
}

.bold {
  font-weight: var(--weight-bold);
}

.umniki-page {
  color: var(--base-color);
  font-family: var(--base-font-name);
  font-weight: var(--weight-normal);
  font-size: var(--base-font-size);
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  background-image: url(../../images/scenario/ng-umniki/umniki-bgr.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-attachment: fixed;
  background-size: cover;
}

@media (orientation: portrait) {

  .umniki-page {
    background-image: url(../../images/scenario/ng-umniki/page-background-mob.webp);
    background-repeat: repeat-y;
    background-attachment: scroll;
    background-size: 100%;
    background-position: top;
  }
}

.umniki-wrapper {
  max-width: 1144px;
  inline-size: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: clamp(0rem, 1.163vw - 0.233rem, 0.625rem);
  padding-block-start: 44px;
}

@media (max-width: 1360px) {	
	.umniki-wrapper {
		padding-block-start: 28px;
	}
}

.umniki-content__title {
	font-family: var(--font-title);	
	color: var(--accent-color);
	font-size: clamp(2.5rem, 3.488vw + 1.802rem, 4.375rem);
	line-height: 0.9;	
	margin: 0;
	padding-block-start: 30px;
	margin-block-end: 20px;	
}

.umniki-content__title_small {
	font-size: clamp(2rem, 2.093vw + 1.581rem, 3.125rem);
}

@media (max-width: 1120px) {
	.umniki-content__title {
		padding-block-start: 10px;	
	}
}

@media (max-width: 991px) {
	.umniki-content__title {
		padding-block-start: 20px;	
	}
}

@media (max-width: 600px) {
	.umniki-content__title {
		padding-block-start: 10px;	
	}
}

@media (max-width: 400px) {
	.umniki-content__title {
		padding-block-start: 15px;	
	}
}

.umniki-content { 
	opacity: 0.92;  
	filter: alpha(Opacity=92); 
	width: 100%;  
	position: relative; 
	margin-bottom: 20px; 
	padding: 0; 
	background-size: 100%; 
}
.umniki-content-top {  
	margin-bottom: -60px; 
	height: 95px;
	/*height: clamp(1.813rem, 7.674vw + 0.278rem, 5.938rem); */
	background-image: url('../../images/scenario/ng-umniki/umniki-content-block-bgr-top.png'); 
	background-repeat: no-repeat; 
	background-size: 100%; 
	background-position: 0 bottom; 
}
.umniki-content-bot { 
	margin-top: -60px; 
	height: 110px; 
	/*height: clamp(2.313rem, 8.488vw + 0.615rem, 6.875rem); */
	background-image: url('../../images/scenario/ng-umniki/umniki-content-block-bgr-bot.png'); 
	background-repeat: no-repeat; 
	background-size: 100%; 
	background-position: 0 top; }

.umniki-content-center { 
	background-image:  url('../../images/scenario/ng-umniki/umniki-content-block-bgr-left.png'), url('../../images/scenario/ng-umniki/umniki-content-block-bgr-right.png');  
    background-position: top left, top right;
    background-repeat: repeat-y, repeat-y; 
    background-size: 94px, 101px;
    /*padding-block-start: ;*/
    /*background-color: #f0f;    */
}

.umniki-content-wrapper { 
	/*padding: 20px 50px 20px 50px; */
	padding-inline: clamp(0.625rem, 4.651vw - 0.305rem, 3.125rem);
	/*padding-block-start: clamp(0.625rem, 1.163vw + 0.392rem, 1.25rem);*/
	background-color: #fff; 
	width: 94%; 
	/*margin: 0 auto 0;*/
	margin-inline: auto;
	margin-block-start: 0; 

	/*margin-block-start: 50px;*/
	/*margin-bottom: 0;*/
	/*margin-block-end: clamp(1.25rem, -2.326vw + 1.715rem, 0rem);*/
	/*padding-block-end: clamp(1.25rem, -2.326vw + 1.715rem, 0rem);*/
}

@media (max-width: 1180px) {	
	.umniki-content { width: 96%; margin: 0 auto 20px; }
	.umniki-content-top { margin-bottom: -60px; height: 92px; }
	.umniki-content-bot { margin-top: -40px; height: 102px; }
	/*.umniki-content-center { padding: 20px 70px 30px 70px;  }	*/
	.umniki-content-wrapper {  width: 94%; margin-block-start:10px;  }	
}

@media (max-width: 991px) {	
	.umniki-content-top { height: 79px }
	.umniki-content-bot { height: 92px; }
	.umniki-content-wrapper {  width: 94%; margin-block-start: 20px;  }
	.umniki-content-center { background-size: 60px, 70px; }	
}

@media (max-width: 860px) {
	.umniki-content-top { height: 69px }
	.umniki-content-bot { height: 80px; }
	.umniki-content-wrapper {  width: 93%;  }	
}

@media (max-width: 767px) {	
	.umniki-content-top { height: 63px }
	.umniki-content-bot { margin-top: -30px; height: 72px; }
	.umniki-content-wrapper {  width: 92%; margin-block-start: 30px;  }	
}

@media (max-width: 660px) {	
	.umniki-content-top { height: 53px }
	.umniki-content-bot { height: 62px; }
	.umniki-content-wrapper {  width: 91%;  }
}

@media (max-width: 600px) {	
	.umniki-content-top { height: 50px }
	.umniki-content-bot { height: 56px; }
	.umniki-content-wrapper {  width: 93%; margin-block-start: 40px;  }
	.umniki-content-center { background-size: 40px, 50px; }	
}

@media (max-width: 550px) {
	.umniki-content-top { height: 45px }
	.umniki-content-bot { height: 51px; margin-top: -25px; }
	.umniki-content-wrapper {  width: 92.4%; margin-block-start: 45px;  }	
}

@media (max-width: 500px) {	
	.umniki-content-top { height: 41px }
	.umniki-content-bot { height: 47px; }
	.umniki-content-wrapper {  width: 92%;  }	
}

@media (max-width: 450px) {
	.umniki-content-top { height: 38px }
	.umniki-content-bot { height: 43px; }
	.umniki-content-wrapper {  width: 91%; margin-block-end:20px; }	
}

@media (max-width: 400px) {	
	.umniki-content-top { height: 33px }
	.umniki-content-bot { height: 39px; margin-top: -30px; }
	.umniki-content-wrapper {  width: 89%;  }	
}


@media (max-width: 370px) {
	.umniki-content-top { height: 29px }
	.umniki-content-bot { height: 37px; }	
}


.umniki-content a {
  color: var(--accent-color);
  outline: none;
  text-decoration: underline;
}

.umniki-content a:hover,
.umniki-content a:focus {
  text-decoration: underline;
  color: var(--accent-hover-color);
}

.umniki-content p,
.umniki-content ul,
.umniki-content ol,
.umniki-content li {
	font-size: var(--base-font-size);
  	color: var(--base-color);
  	font-family: var(--base-font-name);
  	font-weight: var(--weight-normal);
  	margin-block: clamp(0.375rem, 0.465vw + 0.282rem, 0.625rem) clamp(0.5rem, 0.814vw + 0.337rem, 0.938rem);
  	line-height: 1.24;
  	margin-inline: 0;
  	padding-block: 0;
  	padding-inline: 0;
}

.umniki-text {
	overflow: auto;
}

.umniki-text ul,
.umniki-text ol {
  list-style-position: outside;
  margin-inline-start: 25px;
  list-style-type: disc;
}

.umniki-text li {
  padding-block-end: 5px;
}


.umniki-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	margin-block-end: 30px;
}

.umniki-title-text-sub-title1 {
	font-family: var(--font-title);
	display: block;
	line-height: 1;
	text-align: center;
	color: var(--accent-color-dark);
	font-size: clamp(1.625rem, 2.791vw + 1.067rem, 3.125rem);
	margin-block-start: 50px;
}

.umniki-title-text-main-title {
	font-family: var(--font-title);
	display: block;
	color: var(--accent-color);
	font-size: clamp(3.875rem, 9.706vw + 0.842rem, 8rem);
	line-height: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	margin-block-start: -17px;
}

.umniki-title-text-sub-title2 {
	font-family: var(--base-font-name);
	font-size: clamp(1.375rem, 1.86vw + 1.003rem, 2.375rem);
	font-weight: var(--weight-bold);
	text-align: center;
	color: var(--base-color);
	display: block;
	margin-block-start: 7px;
	line-height: 1;
}

.umniki-title-text-sub-title3 {
	font-family: var(--base-font-name);
	font-size: clamp(1.063rem, 0.814vw + 0.9rem, 1.5rem);
	color: #fff;
	text-transform: uppercase;
	background-color: var(--accent-color);
	font-weight: var(--weight-bold);
	border-radius: var(--border-radius);
	margin-block-start: 20px;
	padding-inline: clamp(0.75rem, 0.93vw + 0.564rem, 1.25rem);
	padding-block: clamp(0.438rem, 0.349vw + 0.368rem, 0.625rem);
	display: flex;
	justify-content: center;
	align-content: center;
	line-height: 1;
}

/*.umniki-title-kids {
	display: flex;
	justify-content: space-between;
	position: absolute;
}*/

.umniki-title-boy {
	/*background-color: #ff0;*/
	display: block;
	width: 100%;
	max-width: 214px;
	left: -90px;
	position: absolute;
	margin-block-start: -50px;
}

.umniki-title-girl {
	display: block;
	/*background-color: #0ff;*/
	width: 100%;
	max-width: 214px;
	right: -90px;
	position: absolute;
	margin-block-start: -50px;
}


.umniki-title-gift {
	/*background-color: #ff0;*/
	max-width: 209px;
	position: absolute;
	left: 38%;
	margin-top: -80px;		
}

.umniki-title-garland {
	width: 100%;
	max-width: 980px;
	margin-block-end: 20px;
}

.umniki-title-garland--mob {
	display: none;
	width: 100%;
	max-width: 665px;
	margin-block-end: 20px;
}


@media (max-width: 1360px) {
	
	.umniki-title-boy {
		width: 17%;
		left: -40px;
		margin-block-start: -40px;
	}
	
	.umniki-title-girl {
		width: 17%;
		right: -40px;
		margin-block-start: -40px;
	}

	.umniki-title-gift {
		width: 190px;
		margin-top: -60px;		
	}

	.umniki-title-text-sub-title1 {
		margin-block-start: 60px;
	}

}


@media (max-width: 1250px) {
	
	.umniki-title-boy {
		width: 15%;
		left: -20px;
		margin-block-start: -45px;
	}
	
	.umniki-title-girl {
		width: 15%;
		right: -20px;
		margin-block-start: -45px;
	}

	

}


@media (max-width: 991px) {
	.umniki-title-boy {
		left: -10px;
		margin-block-start: -40px;
	}
	
	.umniki-title-girl {
		right: -10px;
		margin-block-start: -40px;
	}

	.umniki-title-gift {
		left: 36%;
		width: 160px;
	}

	.umniki-title-text-sub-title1 {
		margin-block-start: 45px;
	}

	.umniki-title-text-main-title {		
		margin-block-start: -8px;
	}

}

@media (max-width: 767px) {
	.umniki-title-gift {
		left: 34%;
		width: 150px;
		margin-top: -50px;		
	}

	.umniki-title-text-sub-title1 {
		margin-block-start: 45px;
	}

	.umniki-title-text-main-title {		
		margin-block-start: -2px;
	}

}


@media (max-width: 600px) {
	.umniki-title-boy {
		left: 30px;
		margin-block-start: -40px;
	}
	
	.umniki-title-girl {
		right: 30px;
		margin-block-start: -40px;
	}

	.umniki-title-gift {
		left: 32%;
		width: 140px;
		margin-top: -50px;		
	}
	
	.umniki-title-text-sub-title1 {
		margin-block-start: 40px;
	}

	.umniki-title-garland {
		display: none;
	}

	.umniki-title-garland--mob {
		display: block;		
	}

	.umniki-title {
		margin-block-end: 20px;
	}
}

@media (max-width: 500px) {
	.umniki-title-boy {
		width: 20%;
		left: 0;
		margin-block-start: -35px;
	}
	
	.umniki-title-girl {
		width: 20%;
		right: 0;
		margin-block-start: -35px;
	}

	.umniki-title-gift {
		left: 30%;
		width: 130px;
		margin-top: -40px;		
	}

	.umniki-title-text-sub-title1 {
		margin-block-start: 34px;
	}

	.umniki-title-text-main-title {
		font-size: clamp(4rem, 7.778vw + 2.444rem, 4.875rem);
		line-height: 0.8;
		margin-block-start: 10px;
	}

	.umniki-title-text-sub-title2 {
		margin-block-start: 20px;
	}
}

@media (max-width: 400px) {
	.umniki-title-gift {
		left: 28%;
		width: 120px;
		margin-top: -40px;		
	}

	.umniki-title-text-sub-title1 {
		margin-block-start: 34px;
	}
	
}

@media (max-width: 350px) {
	.umniki-title-gift {
		left: 26%;
		width: 110px;
		margin-top: -36px;		
	}

	.umniki-title-text-sub-title1 {
		margin-block-start: 34px;
	}
	
}


.umniki-cards {
	width: 100%;	
	max-width: 980px;
	margin-block-start: clamp(0.438rem, 1.912vw - 0.16rem, 1.25rem);
	margin-block-end: clamp(0.438rem, 1.912vw - 0.16rem, 1.25rem);
}

.umniki-cards-mob {
	width: 100%;	
	max-width: 500px;
	margin-block: 6px 6px;
	display: none;
}

@media (max-width: 500px) {
	.umniki-cards {
		display: none;
	}

	.umniki-cards-mob {
		display: block;
	}
}

.umniki-putevoditel {
	width: clamp(12.5rem, 34.483vw - 0.431rem, 25rem);
	margin-block-end: 10px;
	float: right;
}


@media (max-width: 500px) {
	.umniki-putevoditel {
		width: 84%;
		display: block;
		margin-inline: auto;
		float: none;
	}
}

@media (max-width: 400px) {
	.umniki-putevoditel {
		width: 90%;
	}
}


.umniki-content .umniki-advantages {
	display: flex;	
	flex-direction: column;
	gap: clamp(0.313rem, 1.163vw + 0.08rem, 0.938rem); /* 5 - 15*/
  padding: 0;
	margin-block-start: clamp(1.25rem, 2.427vw + 0.765rem, 2.5rem);
	margin-inline: 0;
}

.umniki-advantages__item {
	display: flex;
	gap: 2%;
	align-items: start;
	width: 100%;
}

.umniki-advantages__pic {
	height: auto;
	margin-block-start: 10px;
	max-width: clamp(2.5rem, 6.977vw + 1.105rem, 6.25rem);
}

.umniki-advantages__title {
  text-align: left;
  color: var(--accent-color);
  font-family: var(--base-font-name);
	font-size: clamp(1.29rem, 0.93vw + 1.064rem, 1.75rem);
	font-weight: var(--weight-bold);
	margin: 0;
	padding: 0;
}

.umniki-cards-description {
	margin-block-start: 15px;
	margin-block-end: 15px;
	width: 50%;
	margin-left: 4%;
	max-width: 400px;
	float: right;
}


@media (max-width: 500px) {
	.umniki-cards-description {		
		width: 100%;
		margin: 0;
		margin-block-start: 10px;
		margin-block-end: 15px;
		float: none;
	}
}


.umniki-gallery {
	display: grid;	
  grid-template-columns: repeat(auto-fit, minmax(clamp(6.25rem, 12.136vw + 3.823rem, 12.5rem),1fr));

	gap: clamp(0.5rem, 1.456vw + 0.209rem, 1.25rem);
  padding: 0;
	margin-block: 10px 20px;
	margin-inline: 0;
}

.umniki-gallery__item {
  padding-block: 0;
  padding-inline: 0;
}

.umniki-gallery__link {
  display: block;
  position: relative;
}

.umniki-gallery__link:before { 
  content: ''; 
  display: block; 
  opacity: 0; 
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(../../images/photo-size.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: clamp(1.25rem, 7.282vw - 0.206rem, 5rem);
  transition: opacity 0.5s ease;
}

.umniki-gallery__link:hover:before { 
  opacity: 0.7; 
}

@media (hover: none) {

  .umniki-gallery__link:before { 
    display: none;
  }
}

.umniki-gallery__photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.umniki-content .reviews .review {
	width: 100%;
	background-color: rgb(251 83 9 / 0.1);
	border-radius: var(--border-radius);
}

.umniki-content .reviews .review__answer-author {
	color: var(--accent-color);
  font-weight: var(--weight-medium);
}

.umniki-content .reviews .review__author {
  color: var(--accent-color);
  font-weight: var(--weight-bold);
}

.umniki-content .reviews .review__rate-star {
	fill: #de7402;
}

.umniki-content .reviews .review__rate-star_empty {
	fill: #f9cea0;
}

.umniki-content .reviews .review__show-more-button, .umniki-content .reviews .review__show-more-button:focus {
	border-radius: var(--border-radius);
}

.umniki-content .reviews .review__send-review, .umniki-content .reviews .review__send-review:focus {
	border-radius: var(--border-radius);
}


.umniki-content .umniki-info-about-download {
  font-weight: var(--weight-bold);
  text-align: center;
}

.umniki-info-about-feedback {
  text-align: center;
}

.umniki-discount-banner {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-block-start: 20px;
  margin-block-end: clamp(1.875rem, 2.427vw + 1.39rem, 3.125rem);
  /* background-color: #ff0; */
}

.umniki-discount-banner .offer-but-buy {
  margin: 0;
}

.umniki-buy {
  display: flex;
  justify-content: center;
  gap: clamp(1.125rem, 3.526vw - 0.021rem, 2.5rem);
  margin-block-start: clamp(0.25rem, 1.942vw - 0.138rem, 1.25rem);
  margin-block-end: 20px;
  /* background-color: #333; */
}

.umniki-price {
  display: flex;
  gap: clamp(0.188rem, 1.122vw - 0.177rem, 0.625rem);
  justify-content: center;
  align-items: end;
  /* background-color: #ff0; */
  /* text-align: center; */  
  color: var(--accent-color);
  margin-block-start: 5px;
}

.umniki-price__base {
  display: flex;
  align-items: end;
  font-family: var(--font-title);
  color: var(--accent-color);
  gap: 5px;
  /* background-color: #f0f; */
  
}

.umniki-price__value {
  font-size: clamp(4.125rem, 1.603vw + 3.604rem, 4.75rem);
  line-height: 1;
}

.umniki-price__currency {
  font-size: 45px;
}

.umniki-price__old {
  /* background-color: #0ff; */
  font-family: var(--font-title);
  color: var(--accent-color);
  font-size: clamp(2.625rem, 0.621vw + 2.431rem, 2.875rem);
  text-decoration: line-through;
  opacity: 0.5;
  line-height: 1.2;
}

.umniki-button-container {
  display: flex;
  justify-content: center;
  /* background-color: #f8f; */
}

.umniki-button-container form { /* для кнопки оплаты через яндекс*/
  width: 100%;
  display: flex;
  justify-content: center;
}

.umniki-content .umniki-button-buy, .umniki-content .yandex-button-pay {
  display: inline-flex;
  font-size: 36px;
  color: #fff;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  background-color: var(--accent-color);
  border-radius: var(--border-radius);
  outline: none;
  border: none;
  font-weight: var(--weight-bold);  
  text-decoration: none;
  padding-block: 15px;
  padding-inline: clamp(0.875rem, 1.092vw + 0.657rem, 1.438rem);
  transition: all 0.3s ease;
}

.umniki-content .umniki-button-buy:hover, .umniki-content .umniki-button-buy:focus, .umniki-content .yandex-button-pay:hover, .umniki-content .yandex-button-pay:focus {
  color: #fff;
  background-color: var(--accent-hover-color);
  text-decoration: none;
  box-shadow: var(--shadow);
}

.umniki-content .umniki-info-agreement {
  font-size: clamp(0.75rem, 0.364vw + 0.677rem, 0.938rem);
  text-align: center;
  margin-block-end: 24px;
}

@media (width <= 520px) {

  .umniki-buy {
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: center;
  }

  .umniki-content .umniki-button-buy, .umniki-content .yandex-button-pay {
    width: clamp(12.5rem, 35vw + 5.5rem, 16.875rem);
  }
}

@media (width <= 400px) {

  .umniki-content .umniki-button-buy, .umniki-content .yandex-button-pay {
    width: 90%;
  }
}

.footer--umniki { 
  
  background-color: var(--accent-color); 
}

.footer--umniki .social-icon { 
  
  fill: var(--accent-color); 
}

.footer--umniki .social-icon:focus, .footer--umniki .social-icon:hover { 
  
  fill: var(--accent-hover-color); 
}


.umniki-content .umniki-order-but {
  display: inline-flex;
  gap: 8px;
  /* width: auto; */
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  background-color: var(--accent-color);
  border-radius: var(--border-radius);
  color: #fff;
  margin-block-start: clamp(1.25rem, -0.581vw + 1.366rem, 0.938rem);
  margin-block-end: 15px;
  text-decoration: none;
  padding-block: 11px;
  padding-inline: clamp(0.875rem, 1.092vw + 0.657rem, 1.438rem);
  transition: all 0.3s ease;
}

.umniki-content .umniki-order-but:hover, .umniki-content .umniki-order-but:focus {	
  color: #fff;
  background-color: var(--accent-hover-color);
  text-decoration: none;
  box-shadow: var(--shadow);
}

.umniki-order-but__text {
  font-size: var(--base-font-size); 
  line-height:normal;
  font-weight: 600;
}

.umniki-order-but__icon {
  width: clamp(1.25rem, 0.243vw + 1.201rem, 1.375rem);
  fill: #fff;
}

@media (width <= 450px) {

  .umniki-page .umniki-order-but {
    width: 100%;
  }
}