/* USER VARIABLES SECTION */

:root {
  --gutter: 20px;
	--accent: #F88500;
	--text: #333;
	--dark: #202328;
	--deep: #171A1A;
  --white: #FFFFFF;
	--dark-header: #6F7A8B;
	--dark-div: #2D3038;
	--light-bg: #FAFAFA;
	--light-disabled: #E4E6E8;
	--light-div: #E7E7E8;
	--middle-gray: rgba(111, 122, 139, 0.75);
	--text-light: #999999;
	--regular-text: 16px;
	--small-text: 14px;
	--lineheight: 1.75;
	--userfont: raleway-wt, sans-serif;
	--systemfont: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	--radius: 5px;
	--radius-style: 0 5px;
	--transition: .25s ease-out;
}

/* BOOTSTRAP SETTINGS SECTION */

/* gutter 20px (10px + 10px). Comment this code for default gutter start at 1.5rem (24px) wide. */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { --bs-gutter-x: .625rem; }
.row, .row > * { --bs-gutter-x: 1.25rem; }

/* FONTS LOAD SECTION */

@font-face { src: url("../fonts/raleway/raleway-v22-cyrillic-300.woff2") format("woff2"); font-family: "raleway-wt"; font-weight: 300; font-style: normal; }
@font-face { src: url("../fonts/raleway/raleway-v22-cyrillic-500.woff2") format("woff2"); font-family: "raleway-wt"; font-weight: 500; font-style: normal; }
/* @font-face { src: url("../fonts/raleway/raleway-v22-cyrillic-600.woff2") format("woff2"); font-family: "raleway-wt"; font-weight: 600; font-style: normal; } */
@font-face { src: url("../fonts/raleway/raleway-v22-cyrillic-700.woff2") format("woff2"); font-family: "raleway-wt"; font-weight: 700; font-style: normal; }
@font-face { src: url("../fonts/raleway/raleway-v22-cyrillic-800.woff2") format("woff2"); font-family: "raleway-wt"; font-weight: 800; font-style: normal; }
@font-face { src: url("../fonts/raleway/raleway-v22-cyrillic-900.woff2") format("woff2"); font-family: "raleway-wt"; font-weight: 900; font-style: normal; }
@font-face { src: url("../fonts/raleway/raleway-v22-cyrillic-regular.woff2") format("woff2"); font-family: "raleway-wt"; font-weight: 400; font-style: normal; }

@font-face { src: url("../fonts/roboto/roboto-v29-cyrillic-300.woff2") format("woff2"); font-family: "roboto-wt"; font-weight: 300; font-style: normal; }
/* @font-face { src: url("../fonts/roboto/roboto-v29-cyrillic-500.woff2") format("woff2"); font-family: "roboto-wt"; font-weight: 500; font-style: normal; } */
@font-face { src: url("../fonts/roboto/roboto-v29-cyrillic-700.woff2") format("woff2"); font-family: "roboto-wt"; font-weight: 700; font-style: normal; }

/* GENERAL CSS SETTINGS */

::placeholder { color: #666; }
::selection { background-color: var(--accent); color: #fff; }
input, textarea { outline: none; }
input:focus:required:invalid, textarea:focus:required:invalid { border-color: red; }
input:required:valid, textarea:required:valid { border-color: green; }

body {
	font-family: var(--userfont);
	font-size: var(--regular-text);
	line-height: var(--lineheight);
	color: var(--text);
	min-width: 320px;
	position: relative;
	overflow-x: hidden;
}

/* NAVBAR */

.navbar {
	position: absolute;
	top: 0;
	z-index: 1000;
	padding: 43px 0 20px;
	left: 50px;
	right: 50px;
}
.navbar__black {
	position: absolute;
	top: 0;
	z-index: 1000;
	padding: 43px 0 20px;
	left: 50px;
	right: 50px;
}
.logo {
	top: -8px;
  position: relative;
}
.logo__link {
  height: auto;
  width: auto;
  padding-left: 6px;
  margin-left: auto;
}
.logo_images_menu {
  height: auto;
  width: 220px;
  position: relative;
}
.logo_link {
  padding-right: 50px;
  list-style-type: none;
	display: inline-block;
}
.logo__link span {
	display: block;
	font-size: 10px;
	text-transform: none;
	font-weight: 500;
	letter-spacing: 3.1px;
	opacity: 0.45;
	margin-left: 52px;
}
/* menu white*/
.top-menu {
	margin: 0;
	padding: 0;
	text-align: center;
	transition: opacity var(--transition), visibility var(--transition);
}
.top-menu__item {
	padding: 0;
	list-style-type: none;
	display: inline-block;
}
.top-menu__link {
	color: var(--white);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	padding: 7.5px 15px;
	transition: opacity var(--transition);
}
.top-menu__link:hover,
.top-menu__link:focus,
span.top-menu__link {
	opacity: 0.5;
  transition: opacity var(--transition);
  color: var(--white);
}
.menu-container {
	position: relative;
}
.menu-toggle {
	width: 22px;
	height: 22px;
	background-image: url(../images/interface/menu-white.svg);
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	top: 3px;
	display: none;
	right: 0;
}
.menu-toggle_active {
	background-image: url(../images/interface/x.svg);
}
.top-menu.top-menu_active {
	visibility: visible;
	opacity: 1;
}

/* menu black*/
.top-menu__black {
	margin: 0;
	padding: 0;
	text-align: center;
	transition: opacity var(--transition), visibility var(--transition);
}
.top-menu__item__black {
  padding: 0;
	list-style-type: none;
	display: inline-block;
}
.top-menu__link__black {
	color: var(--deep);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	padding: 7.5px 15px;
	transition: opacity var(--transition);
}
.top-menu__link__black:hover,
.top-menu__link__black:focus {
	color: var(--text-light);
  transition: .5s ease-out;
}
.menu-toggle__black {
	width: 22px;
	height: 22px;
	background-image: url(../images/interface/menu-dark.svg);
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	top: 3px;
	display: none;
	right: 0;
}
.menu-toggle_active__black {
	background-image: url(../images/interface/x_black.svg);
}
.top-menu__black.top-menu_active__black {
	visibility: visible;
	opacity: 1;
}
.menu-container__black {
  position: relative;
}


.nav-social-wrap {
	text-align: right;
}
.nav-social {
  position: relative;
	display: inline-block;
  padding-left: 90px;
  top: -1px;
}
.nav-social__item {
	display: inline-block;
	margin: 0 4.5px;
}
.nav-social__item img {
	width: 100%;
	max-height: 16.5px;
	max-width: 20px;
	opacity: 0.75;
	transition: opacity var(--transition);
}
.nav-social__item:hover img {
	opacity: 1;
  transition: opacity var(--transition);
}

.nav-social__black {
  position: relative;
	display: inline-block;
  padding-left: 90px;
  top: -1px;
}
.nav-social__item__black {
	display: inline-block;
	margin: 0 4.5px;
}
.nav-social__item__black img {
	width: 100%;
	max-height: 16.5px;
	max-width: 20px;
	opacity: 0.75;
	transition: opacity var(--transition);
}
.nav-social__item__black:hover img {
	opacity: 1;
  transition: opacity var(--transition);
}

/* SLIDER */

.home-slider {
	position: relative;
	height: 100vh;
	min-height: 580px;
	max-height: 720px;
	color: #fff;
	background-color: var(--dark);
}
.home-slider__slide {
	background-size: cover;
	display: flex;
	align-items: center;
	padding: 0 10px;
}
.filter::after{
  background-color: rgba(0, 0, 0, 0.2);
}
.home-slider__slide::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--dark);
	opacity: .15;
}
.home-slider__slide::after {
	content: '';
	position: absolute;
	top: 10px;
	right: 10px;
	left: 10px;
	bottom: 10px;
	z-index: 1;
	box-shadow: 0 0 0 16px var(--dark);
	border-radius: var(--radius);
}
.home-slider__slide .container {
	z-index: 2;
	position: relative;
}
[data-animate] {
	opacity: 0;
	transition: all .8s ease-out;
}
[data-animate="bottom"] {
	transform: translate3d(0, 15px, 0);
}
.home-slider__slide.swiper-slide-active [data-animate] {
	opacity: 0.9;
	transform: none;
}
.home-slider__slide.swiper-slide-active .home-slider__heading {
	transition-delay: .6s;
}
.home-slider__slide.swiper-slide-active .home-slider__text {
	transition-delay: 1s;
}
.home-slider__heading {
	font-size: 58px;
	line-height: .8;
	font-weight: 300;
	margin-bottom: 35px;
	transition-delay: .3s;
}
.home-slider__heading span {
	font-size: 16px;
	background-color: #419dbc;
  /* border: 1px solid #419dbc; */
	/* border-radius: var(--radius-style); */
	padding: 6px 16px 7px;
	font-weight: 500;
}
.home-slider__text {
	max-width: 440px;
	font-size: var(--small-text);
	background-color: rgba(32, 35, 40, 0.9);
	padding: 15px 22px;
  /* border: 1px solid var(--accent); */
	/* border-radius: 0 calc(var(--radius) * 2); */
}
.home-slider__bottom {
	position: absolute;
	bottom: 0;
	width: 100%;
	max-width: 440px;
	background-color: var(--dark);
  opacity: 0.9;
	z-index: 1;
	right: 35%;
	border-radius: 0.25rem;
	padding: 20px 20px 25px 10px;
	font-size: 12px;
	color: #FFFFFF;
}
.home-slider__pagination-wrapper {
	position: relative;
}
.home-slider__pagination {
	font-family: roboto-wt, sans-serif;
	font-weight: 300;
	bottom: inherit;
	margin-top: -10px;
}
.home-slider__pagination span {
	width: 1px;
	height: 28px;
	background-color: #FFFFFF;
	display: inline-block;
	vertical-align: middle;
	margin: -3px 8px 0;
}
.home-slider__pagination b {
	position: relative;
	font-size: 15px;
	color: #FFFFFF;
	font-weight: 300;
}
.swiper-scrollbar{
  background: #FFFFFF;
}
.home-slider__bottom .swiper-scrollbar-drag {
	height: 5px;
  background: var(--accent);
}
.home-slider__nav {
	position: relative;
}
.home-slider__prev, .home-slider__next {
	outline: none;
  color: #FFFFFF;
}
.home-slider__prev::after, .home-slider__next::after {
	font-size: 14px;
	
}
.home-slider__prev:hover, .home-slider__next:hover {
	color: var(--accent);
}

/* CONTENT */
.home-callback {
	background-color: var(--deep);
	padding: 50px 0;
	color: var(--white);
	position: relative;
	z-index: 1;
}
.home-callback__header {
	font-size: 2rem;
	font-weight: 400;
	/* text-transform: uppercase; */
	margin-bottom: 1.5rem;
	position: relative;
}
/* .home-callback__header::after {
	content: '';
	width: 30%;
	height: 1px;
	background-color: var(--dark-div);
	position: absolute;
	left: 0;
	bottom: -15px;
} */
.home-callback__list {
	list-style-type: none;
	padding: 0;
	margin: 0;
	font-size: var(--regular-text);
}
.home-callback__list > * {
	display: inline-block;
	width: 49%;
	margin-bottom: 7px;
}
.home-callback__list span {
	font-family: roboto-wt, sans-serif;
	font-weight: 700;
  color: var(--accent);
}
.info-title {
  font-size: var(--regular-text);
  font-weight: 400;
}
/* .our-production {
  background: var(--white);
  display: flex;
  padding: 50px 0;
} */
.section-white-text, .our-production-text {
  position: relative;
  flex: 0 0 100%;
  color: var(--text);
  margin-bottom: 1.5rem;
}
.callback-text {
  text-align: right;
  margin-top: 10px;
}
.phone-big {
  font-size: 28px;
  font-weight: 300;
  font-family: roboto-wt, sans-serif;
  text-decoration: none;
  color: var(--white);
}
.email-big {
  font-size: 28px;
  font-weight: 300;
  font-family: roboto-wt, sans-serif;
  text-decoration: none;
  color: var(--white);
}
.phone-big:hover {
  opacity: 0.5;
  transition: opacity var(--transition);
  color: var(--white);
}
.email-big:hover {
  opacity: 0.5;
  transition: opacity var(--transition);
  color: var(--white);
}
.button {
  outline: none;
  background-color: var(--accent);
  color: var(--white);
  position: relative;
  align-items: center;
  text-transform: uppercase;
  box-shadow: 
  0 4px 6px rgba(50,50,93,0.11),
  0 1px 3px rgba(0,0,0,0.08);
  border-color: var(--accent);
  display: inline-block;
  font-weight: 500;
  text-align: center;
  border: 1px solid transparent;
  padding: 0.625rem 1.25rem;
  border-radius: 0.25rem;
  letter-spacing: 0.025em;
  text-decoration: none;
  margin: 25px 0 20px 15px;
}
.button:hover {
  box-shadow: 0 7px 14px rgb(50 50 93 / 10%), 0 3px 6px rgb(0 0 0 / 8%);
  transform: translateY(-1px);
  color: var(--white);
}
/* a:hover {
  color: var(--white);
} */
.section-white-button {
  margin-top:20px;
}
/* .section-white-text h2 {
  text-align: center !important;
  margin-bottom: 1.5rem;
} */
.brands-list {
  margin-bottom: 1rem;
	padding: 0;
	text-align: center;
	transition: opacity var(--transition), visibility var(--transition);
}
.brands-logo {
  padding-right: 50px;
  list-style-type: none;
	display: inline-block;
}
.brands-logo-images {
  height: auto;
  width: 150px;
  position: relative;
}
.section-black {
  position: relative;
  flex: 0 0 100%;
  padding: 50px 0;
  background: linear-gradient(180deg,#171A1A,#646462c0);
  color: var(--white);
}
/* .section-black-text {
  position: relative;
  flex: 0 0 100%;
  max-width: 1040px;
  width: 100%;
  height: auto;
  margin-right: auto;
  margin-left: auto; 
  font-family: roboto-cs, sans-serif;
} */
.about-production {
  font-weight: 400;
  font-size: 2rem;
  /* text-align: center !important; */
  margin-bottom: 1.5rem;
}
.about-production__title {
  font-weight: 500;
  font-size: 1.5rem;
  /* text-align: center !important; */
}
.card-production, .card-how-work {
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
}
.fa {
  position: relative;
  display: flex;
  height: auto;
  width: 31px; 
  max-height: 25px;
  margin-right: auto;
  margin-left: auto;
  margin-top: .5rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.row-production {
  display: flex;
  flex-wrap: wrap;
  /* margin-right: -15px;
  margin-left: -15px; */
}
 .fa:hover {
  transition: 0.5s;
  transform: scale(1.2);
}
.card-production-description h4 {
  text-decoration: none;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  text-align: center !important;
}
.card-production-description p {
  text-align: center !important;
  font-size: var(--regular-text);
}
.card-how-work-description h4 {
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  text-align: center !important;
}
.card-how-work-description p {
  text-align: center !important;
} 
.card-image img {
  height: auto;
  width: 500px;
  position: relative;
  right: 10px;
  top: 50px;
}

/* SEPARATOR */
.separator-skew {
  height: 80px;
}
.separator-bottom {
  top: auto;
  bottom: 0;
}
.separator, .separator svg {
  position: absolute;
  pointer-events: none;
}
.separator {
  top: auto;
  left: 0;
  right: 0;
  width: 100%;
  height: 150px;
  z-index: 1;
  transform: translateZ(0);
  overflow: hidden;
}
.separator-bottom svg {
  bottom: 0;
}
svg {
  overflow: hidden;
}
img, svg {
  vertical-align: middle;
}
.fill-white {
  fill: #f2f2f2;
}

/* How work */

.section-white__how-work {
  background: linear-gradient(180deg,#f2f2f2,#fffdf4);
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 50px 0;
}
.how-work__title {
  font-weight: 500;
  font-size: 1.5rem;
  /* text-align: center !important; */
}
.how-work__title span {
	font-family: roboto-wt, sans-serif;
	font-weight: 700;
  color: var(--accent);
}
/* .section-white-text {
  padding-top: 80px;
  padding-bottom: 50px;
  color: #170d69;
  font-size: 38px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 50px;
  text-align: center;
} */
.container-hw .block {
  border-radius: 20px;
  position: relative;
}
.block {
  max-width: 1900px;
  width: calc(100% - 40px);
  margin-left: auto;
  margin-right: auto;
}
.flat-top {
  border-top-right-radius: 0!important;
  border-top-left-radius: 0!important;
}
.how-work-line {
  position: relative;
  width: 100%;
  max-width: 1140px;
  padding: 60px 0;
  margin: 0 auto 20px;
}
.how-work-line:after {
  content: "";
  position: absolute;
  width: 2px;
  background: linear-gradient(180deg,#F88500,rgba(254, 195, 0, 0.377) 99.5%,rgba(254,195,0,.370));
  top: 15px;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
}
.container-hw.left {
  left: 0;
}
.container-hw.right {
  left: 50%;
}
.in-viewport.left {
  animation: lightSpeedInLeft;
}
.in-viewport.right {
  animation: lightSpeedInRight-data-v-1e;
  animation-duration: 1s;
}
.container-hw {
  padding: 15px 30px;
  position: relative;
  background: inherit;
  width: 50%;
}
.content:hover {
box-shadow: 0 7px 14px rgb(50 50 93 / 10%), 0 3px 6px rgb(0 0 0 / 8%);
  transform: translateY(-1px);
}
.container-hw .cont-not-passed:after, .container-hw:not(.cont-not-passed):after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  top: calc(50% - 8px);
  right: -15px;
  z-index: 1;
}

.container-hw:not(.cont-not-passed):after {
  background: linear-gradient(180deg,#419dbc,#e6edf0);
  border-radius: 16px;
}
.container-hw .content {
  padding: 10px;
  background: linear-gradient(180deg,#fdfdfd,#fafafa);
  box-shadow: 0 10px 25px 0 rgb(0 0 0 / 10%);
  position: relative;
  min-height: 50px;
}
.container-hw.right:after {
  left: -15px;
}
/* .container-hw .content:hover:not(.has-not-passed) {
  color: #419dbc
} */
.how-work_content-description {
  font-size: 1.3rem;
  font-weight: 400;
}
.content p {
  font-size: var(--regular-text);
}

/* Our products */
.our-products {
  background-color: var(--light-bg);
}
.our-products__top {
  background: linear-gradient(180deg,#fffdf4, #2c2c2c);
	color: #fff;
	padding-top: 50px;
	padding-bottom: 170px;
}
.our-products__top-wrapper {
  display: flex;
	align-items: center;
}
.our-products__left {
	font-size: var(--regular-text);
	text-align: left;
	padding-left: 30px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.our-products__left__skew {
  content: "";
  position: relative;
  height: 90%; 
  width: 0;
  margin-top: 2px;
  border: 0.5px solid #fff;
  background-color: #fff;
	transform: skewx(-15.6deg);
}
.our-products__right {
	padding: 0 47px;
}
.our-products__bottom {
	margin-top: -130px;
	padding-bottom: 65px;
}
.our-products__section-title__name {
	color: var(--accent);
	font-weight: 500;
  font-size: 1rem;
	text-transform: uppercase;
}
/* .our-products__section-title__name::before {
	content: '//';
	margin-right: 5px;
} */
.our-products__section-title__desc {
	line-height: 1.2;
	font-size: 1.5rem;
	margin: 0;
	margin-top: 5px;
	font-weight: 500;
}
.our-products__section-title__paragraph {
	font-size: var(--small-text);
	margin: 0;
	margin-bottom: 40px;
}
.our-products__section-title--dotted .our-products__section-title__desc {
	margin-bottom: 25px;
}
.our-products__section-title--dotted .our-products__section-title__desc::after {
	content: '';
	display: block;
	height: 5px;
	width: 40px;
	background-image: url(../images/interface/ellipse-accent.svg);
	background-repeat: repeat-x;
	margin-top: 28px;
}
.our-products__best-item {
	background-color: #fff;
	display: block;
  margin: 0 50px;
	height: 100%;
	text-decoration: none;
	border-bottom: 3px solid var(--light-disabled);
	transition: border var(--transition);
	color: var(--text);
  max-width: 320px;
  box-shadow: 0 0 12px rgb(55 25 61 / 15%), 0 4px 10px rgb(20 10 15 / 35%) !important;
}
.our-products__best-item__img-wrapper {
	position: relative;
}
.our-products__best-item__img-wrapper img {
	width: 100%;
}
.our-products__best-item__content {
	padding: 25px 10px;
	color: var(--text);
}
.our-products__best-item__desc {
	font-size: var(--regular-text);
	font-weight: 500;
	line-height: 1.28;
	position: relative;
  text-align: center;
	/* padding-left: 20px;
	margin-top: 5px;
	margin-bottom: 5px; */
}
.products__item-wrapper {
  margin-bottom: 3rem;
}
/* .our-products__best-item__desc::before,
.our-products__best-item__desc::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 10px;
	background-image: url(../images/interface/ellipse-accent.svg);
	background-repeat: repeat-y;
	background-position: 3px 9.5px;
}
.our-products__best-item__desc::after {
	background-image: url(../images/interface/ellipse-gray.svg);
	transition: opacity .5s ease-out;
} */
.our-products__best-item:hover .our-products__best-item__desc::after {
	opacity: 0;
}
.our-products__best-item__img-wrapper::before,
.our-products__best-item__img-wrapper::after {
	content: '';
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	background-image: url(../images/interface/triangle-white.svg);
	background-position: 25px 25px;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity .5s ease-out, background-position .5s ease-out;
}
.our-products__best-item__img-wrapper::before {
	background-color: rgba(32, 35, 40, 0.25);
}
.our-products__best-item__img-wrapper::after {
	transform: rotate(180deg);
}
.our-products__best-item:hover {
	border-color: var(--accent);
	color: var(--text);
	text-decoration: none;
}
.our-products__best-item:hover .our-products__best-item__img-wrapper:before,
.our-products__best-item:hover .our-products__best-item__img-wrapper:after {
	opacity: 1;
	background-position: 20px 20px;
}
/* .our-products__best-works {
	background-color: var(--light-bg);
}
.our-products__best-works__top {
	background-color: var(--dark);
	color: #fff;
	padding-top: 65px;
	padding-bottom: 170px;
}
.our-products__best-works__top-wrapper {
	display: flex;
	align-items: center;
}
.our-products__best-works__left,
.our-products__best-works__right {
	flex: 0 0 50%;
	margin-bottom: var(--gutter);
}
.our-products__best-works__left {
	font-size: var(--small-text);
	text-align: right;
	padding-right: 40px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-right: var(--dark-div) 1px solid;
}
.our-products__best-works__right {
	padding-left: 40px;
}
.our-products__best-works__bottom {
	margin-top: -130px;
	padding-bottom: 65px;
}
.our-products__best-works__item-wrapper {
	overflow: hidden;
	margin-bottom: var(--gutter);
} */
.our-products__best-works__button-wrapper {
	text-align: center;
	margin-top: 25px;
}

/* About company*/
.about-company {
	padding: 80px 0 50px;
}
.about-company__item-wrapper {
	margin-bottom: var(--gutter);
}
.about-company__photo {
	text-align: center;
}
.about-company__img {
	width: 100%;
	position: relative;
	display: inline-block;
	max-width: 400px;
}
.about-company__img img {
	width: 100%;
  box-shadow: 0 0 12px rgb(55 25 61 / 15%), 0 4px 10px rgb(20 10 15 / 35%) !important;
}
.about-company__img::before {
	content: '';
	width: 50%;
	height: 50%;
	top: -15px;
	left: -15px;
	background-color: var(--dark);
	position: absolute;
	opacity: 0.9;
  z-index: -1;
}
.about-company__img::after {
	content: '';
	width: 50%;
	height: 50%;
	bottom: -15px;
	right: -15px;
	background-color: var(--dark);
	position: absolute;
	opacity: 0.9;
  z-index: -1;
}
.about-company__photo-title {
	position: absolute;
	top: 60px;
	z-index: 1;
	color: #fff;
	right: -15px;
	padding: 2px 50px 2px 25px;
	/* border-radius: var(--radius-style); */
	font-family: roboto-wt, sans-serif;
	font-weight: 700;
	font-size: 52px;
	overflow: hidden;
}
.about-company__photo-title::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
	opacity: 0.9;
	z-index: -1;
}
.about-company__photo-title span {
	font-size: 21px;
	font-family: raleway-wt, sans-serif;
	font-weight: 300;
	max-width: 100px;
	display: inline-block;
	line-height: 1.2;
	text-align: left;
	padding-left: 2px;
}
.about-company__section-title__name {
	color: var(--accent);
	font-weight: 500;
  font-size: 1rem;
	text-transform: uppercase;
}
.about-company__section-title__name::before {
	content: '\\\\';
	margin-right: 5px;
}
.about-company__section-title__desc {
	line-height: 1.2;
	font-size: 1.5rem;
	margin: 0;
	margin-top: 5px;
	font-weight: 500;
}
.about-company__section-title__paragraph {
	font-size: var(--regular-text);
	margin: 0;
	margin-bottom: 40px;
}
.about-company__section-title-dotted .about-company__section-title__desc {
	margin-bottom: 25px;
}
.about-company__section-title-dotted .about-company__section-title__desc::after {
	content: '';
	display: block;
	height: 5px;
	width: 40px;
	background-image: url(../images/interface/ellipse-accent.svg);
	background-repeat: repeat-x;
	margin-top: 28px;
}
.about-company__card-advantages {
	height: 100%;
	position: relative;
}
.about-company__card-advantages__heading {
	text-decoration: none;
	color: var(--text);
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1.2;
	border-bottom: 1px solid var(--light-div);
	display: flex;
	align-items: center;
	padding-bottom: var(--gutter);
}
.about-company__card-advantages__heading:hover,
.about-company__card-advantages__heading:active {
	color: var(--text);
	text-decoration: none;
}
.about-company__card-advantages__heading img {
  /* position: relative;
  display: flex;
  height: auto;
  width: 31px;
  max-height: 25px;
  margin-right: auto;
  margin-left: auto;
  margin-top: .5rem; */
  max-width: 75px;
	max-height: 50px;
	margin-right: 7px;
  width: 73px;
  height: auto;
}
.about-company__item-card {
  padding-top: 35px;
}
.about-company__card-advantages__desc {
	font-size: var(--regular-text);
	margin: 0;
	margin-top: 15px;
}
.about-company__card-advantages__more {
	position: absolute;
	bottom: 0;
}
.about-company__button-wrapper {
  text-align: center;
  margin-top: 25px;
}

/* Our blog*/
.our-blog {
  background: linear-gradient(180deg,#fff, #2c2c2c);
  padding: 50px 0;
  position: relative;
  flex: 0 0 100%
}
.our-blog__title {
  font-weight: 400;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
}
.our-blog__item-wrapper {
	margin-bottom: var(--gutter);
}
.our-blog__best-item {
	background-color: #fff;
	display: block;
  margin: 0 50px;
	height: 100%;
	text-decoration: none;
	border-bottom: 3px solid var(--light-disabled);
	transition: border var(--transition);
	color: var(--text);
  max-width: 320px;
  box-shadow: 0 0 12px rgb(55 25 61 / 15%), 0 4px 10px rgb(20 10 15 / 35%) !important;
}
.our-blog__best-item__img-wrapper {
	position: relative;
}
.our-blog__best-item__img-wrapper img {
	width: 100%;
}
.our-blog__best-item__content {
	padding: 15px 10px;
	color: var(--text);
}
.our-blog__best-item__desc {
	font-size: var(--regular-text);
	font-weight: 500;
	line-height: 1.28;
}
.our-blog__best-item:hover .our-products__best-item__desc::after {
	opacity: 0;
}
.our-blog__best-item__img-wrapper::before,
.our-blog__best-item__img-wrapper::after {
	content: '';
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	background-position: 25px 25px;
	opacity: 0;
	transition: opacity .5s ease-out, background-position .5s ease-out;
}
.our-blog__best-item__img-wrapper::before {
	background-color: rgba(32, 35, 40, 0.25);
}
.our-blog__best-item:hover {
	border-color: var(--accent);
	color: var(--text);
	text-decoration: none;
}
.our-blog__best-item:hover .our-blog__best-item__img-wrapper:before,
.our-blog__best-item:hover .our-blog__best-item__img-wrapper:after {
	opacity: 1;
	background-position: 20px 20px;
}
.our-blog__best-item__title {
  text-align: center;
  font-size: var(--regular-text);
  font-weight: 800;
}
.our-blog__best-works__button-wrapper {
	text-align: center;
	margin-top: 25px;
}
.our-blog__read-more {
	font-size: 15px;
	font-weight: 800;
	text-decoration: underline;
	color: var(--text);
}
.our-blog__read-more:hover {
	color: #555;
  transition: color var(--transition);
}
.our-blog__read-all {
  position: absolute;
  font-size: 15px;
	font-weight: 800;
	text-decoration: underline;
	color: var(--text);
  left: 30%;
  width: 45%;
  top: 45%;
  z-index: 1;
}
.our-blog__read-all:hover {
  color: #555;
}
.our-blog__separator-skew {
  height: 80px;
}
.our-blog__separator-bottom {
  top: auto;
  bottom: 0;
}
.our-blog__separator, .our-blog__separator svg {
  position: absolute;
  pointer-events: none;
}
.our-blog__separator {
  top: auto;
  left: 0;
  right: 0;
  width: 100%;
  height: 150px;
  z-index: 1;
  transform: translateZ(0);
  overflow: hidden;
}
.our-blog__separator-bottom svg {
  bottom: 0;
}
svg {
  overflow: hidden;
}
img, svg {
  vertical-align: middle;
}
.our-blog__separator__fill-white {
  fill: #f2f2f2;
}

/* Youtube-channel section*/
.youtube-channel {
  background-color: #f2f2f2;
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 50px 0;
}
.youtube-channel__title {
  text-align: center;
  color: var(--text);
  margin-bottom: 1.5rem;
}
.youtube-channel__youtube-player {
  position: relative;
  left: 2%;
}
.youtube-channel__youtube-player__item {
  width: 600px;
  height: 300px;
  border-bottom: 3px solid var(--light-disabled);
  box-shadow: 0 0 12px rgb(55 25 61 / 15%), 0 4px 10px rgb(20 10 15 / 35%) !important;
}
.youtube-channel__button-wrapper {
  text-align: center;
  margin-top: 25px;
}
.youtube-channel__youtube-player__item:hover {
	opacity: 0;
}
.youtube-channel__youtube-player__item:hover {
	border-color: var(--accent);
	color: var(--text);
	text-decoration: none;
}
.youtube-channel__youtube-player__item:hover {
	opacity: 1;
	background-position: 20px 20px;
}

/* Footer */
.footer {
  display: flex;
  background-color: #212121;
  padding: 40px 0 60px;
  justify-content: center;
  color: var(--white);
}
.footer-container {
  display: flex;
  margin: o auto;
  width: 1040px;
}
.column-wrapper {
  margin: 0 0 0 85px;
  width: 200px;
}
.column-wrapper-phone{
  margin: 0 0 0 14px;
  width: 190px;
}
.column-wrapper-first {
  margin: 0 30px 0 14px;
  width: 270px;
}
.column-wrapper-menu {
  margin: 0 0 0 85px;
  width: 130px;
}
.column-wrapper-production {
  margin: 0 0 0 14px;
  width: 210px;
}
.footer dt {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  line-height: 40px;
}
.footer .dt-first {
  line-height: 40px;
}
.footer dd {
  margin-left: 0;
  margin-right: 0;
  text-decoration: none;
}
.footer .column-item {
  color: #b0b0b0;
  display: inline-block;
  hyphens: auto;
  line-height: 1px;
  margin-top: 14px;
  transition: color .4s ease;
}
.logo_images {
  width: 230px;
  height: auto;
}
.footer .column-item-first {
  color: #b0b0b0;
  display: inline-block;
  hyphens: auto;
  padding-bottom: 10px;
}
.footer .column-item:hover {
  color: var(--white);
  transition: color var(--transition);
}
.footer .column-item-phone {
  color: #b0b0b0;
  display: inline-block;
  hyphens: auto;
  padding-bottom: 10px;
  font-size: 16px;
  font-family: roboto-wt, sans-serif;
}
.footer .column-item-phone:hover {
  color: var(--white);
  transition: color var(--transition);
}
.footer .column-item-email {
  color: #b0b0b0;
  display: inline-block;
  hyphens: auto;
  padding-bottom: 10px;
  font-size: 16px;
  font-family: roboto-wt, sans-serif;
}
.footer .column-item-email:hover {
  color: var(--white);
  transition: color var(--transition);
}
.footer .footer-soc-item {
  width: 40px;
  height: auto;
  margin-right: 15px;
}

.footer .footer-soc-item img {
  position: relative;
  height: auto;
  width: 17px; 
  max-height: 19px;
}

.footer .footer-soc-item img:hover {
  opacity: 0.5;
  transition: opacity .5s ease-out;
}

.footer a {
  font-size: 14px;
  text-decoration: none;
  background-color: initial;
}

.footer p {
  font-size: 14px;
  background-color: initial;
  color: #b0b0b0;
}


.our-production {
  display: flex;
  padding-top: 8rem;
  background-color: #FFFFFF;
}
.our-production-text {
  font-weight: 400;
  font-size: 2rem;
  text-align: center !important;
  margin-bottom: 1.5rem;
}  
.production {
  margin-bottom: 2rem;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  text-align: center !important;
}
.production-last {
  margin-bottom: 1rem;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  text-align: center !important;
}
.production-description {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  flex: 0 0 50%;
}
.production-description p img {
  height: auto;
  width: 17px;
}
.slider-container {
  /* padding-top: 10px; */
  margin: 1% 1% 0 1%;
  position: relative;
  width: 70%;
  /* min-height: 1px; */
  flex: 0 0 29%;
  height: 95%;
  overflow: hidden;
  left: 10%;
  /* transition: all 0.15s ease; */
}
.slider-container_slide {
  /* height: 97%; */
  overflow: hidden;
  border-radius: 0.25rem !important;
}
.slider-container_bg {
  height: 100%;
  background-position: center;
  background-size: cover;
}
.swiper-pagination {
  z-index: 1;
}
.swiper-pagination-bullet {
  width: 30px;
  height: 3px;
  border-radius: 0;
  opacity: 0.4;
  background-color: #FFF;
}
.swiper-pagination .swiper-pagination-bullet:hover {
  background-color: var(--accent);
  opacity: unset;
}
.swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent);
  opacity: unset;
}
.slider-navigation {
  flex: 0 0 140px;
}
.slider-navigation .swiper-button-next {
  position: absolute;
  width: 10px;
  height: 10px;
  color: var(--white);
  opacity: 0.4;
  right: 35px;
}
.slider-navigation .swiper-button-prev {
  position: absolute;
  width: 10px;
  height: 10px;
  color: var(--white);
  opacity: 0.4;
  left: 35px;
}
.slider-navigation .swiper-button-next:after {
  font-size: 30px;
}
.slider-navigation .swiper-button-prev:after {
  font-size: 30px;
}
.slider-navigation .swiper-button-next:hover {
  color: var(--accent);
  opacity: unset;
}
.slider-navigation .swiper-button-prev:hover {
  color: var(--accent);
  opacity: unset;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 2% 4px;
}

.btn {
  text-align: center;
}

.btn .btn-white {
  position: relative;
  align-items: center;
  text-transform: uppercase;
  color: var(--white);
  box-shadow: 
  0 4px 6px rgba(50,50,93,0.11),
  0 1px 3px rgba(0,0,0,0.08);
  background-color: var(--accent);
  border-color: var(--accent);
  display: inline-block;
  font-weight: 500;
  text-align: center;
  border: 1px solid transparent;
  padding: 0.625rem 1.25rem;
  border-radius: 0.25rem;
  margin-right: 0.5rem;
  letter-spacing: 0.025em;
  text-decoration: none;
}

.btn .btn-white:hover {
  text-decoration: none;
  color: #419dbc;
}

.btn-last {
  margin: auto;
  line-height: 1.5;
  font-size: .875rem;
  margin-bottom: 2rem;
  width: auto;
}

.btn-last .btn-white {
  position: relative;
  align-items: center;
  text-transform: uppercase;
  color: #333;
  box-shadow: 
  0 4px 6px rgba(50,50,93,0.11),
  0 1px 3px rgba(0,0,0,0.08);
  background-color: #fff;
  border-color: var(--accent);
  display: inline-block;
  font-weight: 600;
  text-align: center;
  border: 1px solid transparent;
  padding: 0.625rem 1.25rem;
  border-radius: 0.25rem;
  margin-right: 0.5rem;
  letter-spacing: 0.025em;
  text-decoration: none;
}

.btn-last .btn-white:hover {
  text-decoration: none;
  background-color: var(--accent);
  color: #fff;
}

/* MODAL */

.modal {
	position: relative;
	z-index: 10;
  font-family: var(--userfont);
}
.modal__container {
	padding: 20px;
	width: 100%;
	max-width: 80%;
	border-radius: var(--radius);
}
.modal__title {
	text-align: center;
	width: 100%;
	color: #454545;
	font-weight: 700;
	text-transform: uppercase;
	margin: 10px 0 20px;
}
.modal__close {
	opacity: 0.4;
	transition: opacity var(--transition);
  position: absolute;
  top: 1px;
  right: 8px;
}
.modal__close:hover {
	opacity: 1;
}
.modal__footer {
	padding: 10px 0;
	text-align: center;
}

form input, form textarea {
	width: 100%;
	font-size: 14px;
	margin: 5px 0;
	padding: 8px 14px;
	/* border-radius: var(--radius-style); */
	border: 1px solid var(--light-div);
}

/*Calculator page*/
.section-cost {
  display: flex;
  padding-top: 8rem;
  background-color: #FFFFFF;
}
.section-cost-text {
  font-weight: 300;
  font-size: 2rem;
  text-align: center !important;
  margin-bottom: 1.5rem;
}
.section-cost-title {
  margin-bottom: 2rem;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  text-align: center !important;
}
.row-calc {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.row-calc-last {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.section-cost-item {
  padding-right: 5px;
}
.section-cost-item__number {
  padding-right: 5px;
  text-align: center;
}
.section-cost-item__size {
  padding-right: 5px;
  width: 40%;
  position: relative;
  left: 30%;
}
.section-cost-item__selection {
  padding-right: 5px;
  width: 40%;
  position: relative;
  left: 10%;
}
.form_answer {
  text-align: center;
  font-size: var(--regular-text);
  height: 100%;
  display: block;
}
input[type=radio] {
  opacity: 0;
  width: 0;
  height: 0;
  box-sizing: border-box;
  padding: 0;
}
input[type="radio"]:active ~ label {
	opacity: 1;
}
input[type="radio"]:checked ~ label { 
	opacity: 1;
	border: 1px solid var(--accent);
  box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
}
input {
  overflow: visible;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.shadow {
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
  opacity: .5;
  transition: all .5s ease-in-out;
  display: inline-block;
  margin-bottom: 0.5rem;
}
.personalData {
  color: #419dbc;
}
/* label:hover {
  border: 1px solid rgba(36, 34, 34, 0.2);
} */
/* label:focus {
  border: 1px solid rgba(36, 34, 34, 0.2);
} */
/* label:active {
  border: 1px solid rgba(36, 34, 34, 0.2);
} */
.section-cost-img {
  vertical-align: middle;
  border-style: none;
  padding-bottom: 15px;
}
input[type=number] {
  border: 1px solid var(--accent);
  width: 80%;
  height: 50%;
  font-size: var(--regular-text);
  font-family: 'roboto-wt';
  padding: 0 13px;
}
#colorFurniture {
	display: none;
}
.section-cost__sum {
  font-weight: 300;
  font-size: 1.75rem;
  font-family: roboto-wt, sans-serif;
  line-height: 1.2;
}

/*Blog section*/
.our-blog__item {
  display: flex;
  padding-top: 8rem;
  background-color: var(--white);
}
.section__blog {
  display: flex;
  padding-top: 8rem;
  background-color: #FFFFFF;
}
.section__blog__title {
  font-weight: 400;
  font-size: 2rem;
  text-align: center !important;
  margin-bottom: 1.5rem;
}
.section__blog__text {
  position: relative;
  left: 18%;
  margin: 0 10px 10px 10px;
}
.section__blog__text__img {
  float:left;
  width: 350px;
  height: auto;
  margin: 7px 10px 1px 0;
}
.breadcrumbs {
  margin: 30px 10px;
  font-size: var(--small-text);
}
.breadcrumbs li {
  display: inline-block;
  margin-right: 16px;
  position: relative;
}
.breadcrumbs li::after {
  content: '>';
  color: var(--accent);
  position: absolute;
  right: -12px;
  top: 0;
}
.breadcrumbs li:last-child::after {
  content: '';
}
.breadcrumbs li a {
  text-decoration: none;
  color: var(--text);
}
.breadcrumbs li a:hover {
  color: var(--text-light);
  transition: .5s ease-out;
}

/* Форма заказа */
.form {
  margin-top: 20px !important;
  /* z-index: 5; */
  justify-content: center !important;
  position: relative;
  margin: auto;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  flex: 0 0 66%;
  max-width: 680px;
  background: linear-gradient(87deg, #f4f5f7 0, #f4f4f7 100%) !important;
  box-shadow: 
      0 15px 35px rgba(50,50,93,0.10),
      0 5px 15px rgba(0,0,0,0.1) !important;
  border: 0.0625rem solid rgba(0,0,0,0.05);
  border-radius: 0.25rem;
  margin-bottom: 2rem;
}
.form_body {
  position: relative;
}
/* .form_body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(51, 51, 51, 0.9) url("../images/Calc/Gif.gif") center / 50px no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease 0s;
} */
.form_body._sending::after {
  opacity: 1;
  visibility: visible;
}
.form_item {
  margin-bottom: 1rem;
  margin-top: 1rem;
}
.form_input {
  size: 0.875rem;
  display: block;
  width: 100%;
  height: calc(2.75rem + 2px);
  padding: 0.625rem 0.75rem;
  line-height: 1.5;
  color: #000;
  background-color: #fff;
  background-clip: padding-box;
  border-radius: 0.25rem;
  border: 0;
  font-family: 'roboto-wt';
}
.form_input:focus {
  box-shadow: 0 0 5px var(--accent);
}
.form_input._error {
  box-shadow: 0 0 5px red;
}
.checkbox_input {
  display: none;
}
.checkbox._error .checkbox_label::before {
  box-shadow: 0 0 5px red;
}
.checkbox_input:checked + .checkbox_label::after {
  transform: scale(1);
}
.checkbox_label {
  font-size: 16px;
  line-height: 140%;
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.checkbox_label::before {
  content: "";
  align-self: flex-start;
  flex: 0 0 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 4px;
  margin: 0px 10px 0px 0px;
  box-shadow:
  0 1px 3px rgba(50, 50, 93, 0.15),
  0 1px 0 rgba(0, 0, 0, 0.02);
}
.checkbox_label::after {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 4px;
  background-color: var(--accent);
  border-radius: 4px;
  transform: scale(0);
  transition: transform 0.5s ease 0s;
}

/* Callback form */
.form_callback {
  /* margin-top: 20px !important; */
  /* z-index: 5; */
  /* justify-content: center !important; */
  position: relative;
  /* margin: auto; */
  width: 100%;
  /* padding-right: 15px; */
  /* padding-left: 15px; */
  flex: 0 0 66%;
  max-width: 680px;
  /* background: linear-gradient(87deg, #f4f5f7 0, #f4f4f7 100%) !important; */
  /* box-shadow:  */
      /* 0 15px 35px rgba(50,50,93,0.10), */
      /* 0 5px 15px rgba(0,0,0,0.1) !important; */
  /* border: 0.0625rem solid rgba(0,0,0,0.05); */
  /* border-radius: 0.25rem; */
  /* margin-bottom: 2rem; */
}
.form_body {
  position: relative;
}
/* .form_body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(51, 51, 51, 0.9) url("../images/Calc/Gif.gif") center / 50px no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease 0s;
} */
.form_body._sending::after {
  opacity: 1;
  visibility: visible;
}
.form_callback_item {
  margin-bottom: 1rem;
  margin-top: 1rem;
}
.form_callback_input {
  size: 0.875rem;
  display: block;
  width: 100%;
  height: calc(2.75rem + 2px);
  padding: 0.625rem 0.75rem;
  line-height: 1.5;
  color: #000;
  background-color: #fff;
  background-clip: padding-box;
  border-radius: 0.25rem;
  border: 0;
  font-family: 'roboto-wt';
}
.form_callback_input:focus {
  box-shadow: 0 0 10px var(--accent);
}
.form_callback_input._error {
  box-shadow: 0 0 10px red;
}
.checkbox_callback_input {
  display: none;
}
.checkbox_callback._error .checkbox_callback_label::before {
  box-shadow: 0 0 10px red;
}
.checkbox_callback_input:checked + .checkbox_callback_label::after {
  transform: scale(1);
}
.checkbox_callback_label {
  font-size: 14px;
  line-height: 140%;
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.checkbox_callback_label::before {
  content: "";
  align-self: flex-start;
  flex: 0 0 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 4px;
  margin: 0px 10px 0px 0px;
  box-shadow:
  0 1px 3px rgba(50, 50, 93, 0.15),
  0 1px 0 rgba(0, 0, 0, 0.02);
}
.checkbox_callback_label::after {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 4px;
  background-color: var(--accent);
  border-radius: 4px;
  transform: scale(0);
  transition: transform 0.5s ease 0s;
}
.button_callback {
  outline: none;
  background-color: var(--accent);
  color: var(--white);
  position: relative;
  align-items: center;
  text-transform: uppercase;
  border-color: var(--accent);
  display: inline-block;
  font-weight: 500;
  text-align: center;
  border: 1px solid transparent;
  padding: 0.625rem 1.25rem;
  border-radius: 0.25rem;
  letter-spacing: 0.025em;
  text-decoration: none;
  margin: 25px 0 20px 15px;
}
.button_callback:hover {
  box-shadow: 0 7px 14px rgb(50 50 93 / 10%), 0 3px 6px rgb(0 0 0 / 8%);
  transform: translateY(-1px);
  color: var(--white);
}

/* Chat */
input, button {
  border: none;
}
.btm__close {
  cursor: pointer;
  position: absolute;
  top: 14px;
  right: 12px;
  width: 30px;
  height: 30px;
  font-size: 30px;
  display: flex;
  font-family: '2', sans-serif;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.btm__close:hover {
  opacity: 0.7;
  transition: .5s ease-out;
}
.btm__close i{
position: absolute;
top: 6px;
left: -80px;
font-size: 14px;
}
.chat__wrap {
  position: fixed;
  bottom: 0px;
  right: -300px;
  margin: auto;
  width: 300px;
  height: 400px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  z-index: 99999999;
  border-radius: 0.25rem 0.25rem 0 0;
  overflow: hidden;
  transition: .2s right ease-in-out;
  
}
/* .chat__wrap::before {
  content: "";
  backdrop-filter: blur(20px);
  height: 100%;
  width: 100%;
  position: absolute;
} */
.chat__wrap.open {
right:0
}
.chat__title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-weight: 400;
  font-family: var(--userfont);
  font-size: 1.5rem;
  padding-top: 5px;
  padding-left: 10px;
  padding-bottom: 5px;
  padding-right: 35px;
  color: #fff;
  margin: 0 auto;
  z-index: 9;
  background: #F88500;
}
.chat__body  {
  width: 100%;
  height: 85%;
  padding-top: 60px;
  padding-bottom: 70px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.chat__body__item {
  background: rgba(32, 35, 40, 0.9);
  color: #fff;
  border-radius: 0.25rem;
  padding: 5px 15px;
  padding-right: 40px;
  margin: 5px;
  font-family: var(--userfont);
  font-size: 15px;
  position: relative;
  display: flex;
  /* align-items: space-between; */
  flex-direction: column;
  justify-content: center;
  opacity: 0.9;
}
.chat__body__item:first-child {
  margin-top: auto;
} 
.chat__body__item__user {
  flex: auto;
  text-align: left;
  font-size: 10px;
}
.chat__body__item__client {
  background: #419dbc;
}
.chat__body__item__time {
  position: absolute;
  bottom: 2px;
  right: 6px;
  font-size: 9px;
}
.chat__input {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: #F88500;
  display: flex;
  align-items: center;
  padding: 7px;
}
.chat__input__message {
  flex: auto;
}
.chat__main__input {
  width: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
  position: relative;
  top: 4px;
  border-radius: 0.25rem;
  border: 0;
  font-size: 14px;
  padding-left: 10px;
}
.chat__input__submit {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  margin-left: 15px;
  margin-right: 10px;
  transform: rotate(-90deg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: transparent;
}
.chat__input__submit:hover {
  opacity: 0.7;
  transition: .5s ease-out;
}
.cImg {
  width: 35px;
  height: 35px;
  position: fixed;
  right: 3%;
  bottom: 5%;
  z-index: 1;
  cursor: pointer;
}
.cImg:hover {
  opacity: 0.7;
  transition: .5s ease-out;
}

/* Кнопка возврата наверх */
.top {
  width: 35px;
  height: 35px;
  position: fixed;
  bottom: 15%;
  right: -100px;
  z-index: 1;
  background-color: var(--accent);
  border-radius: 0.25rem;
  text-align: center;
  line-height: 35px;
  cursor: pointer;
}
.up {
  width: 25px;
  height: 25px;
}
.top:hover {
  opacity: 0.7;
  transition: .5s ease-out;
}
.top.active {
  right: 3%;
}