/*******************************************
 *** Файл стилей STYLE.CSS
 *** Собственность компании WEBBERRIES
 *** https://webberries.ru (C) 2005-2022
 *** Для вопросов: webberries@yandex.ru
 *** Дата обновления: 11.05.2022
 *** Версия файла: V4.00 
 *******************************************/

/*------------------------------------------------------------------------------
 ******************* ВСПОМОГАТЕЛЬНЫЕ СТИЛИ *************************************
-------------------------------------------------------------------------------*/

/*
Для изменения свойств элементов - раскомментировать и поменять со стандартных на нужные:
*/
/*------------------------------------------------------------------------------
		a.blue:link {color: #006699; text-decoration: underline; }
		a.blue:visited {color: #006699; text-decoration: underline; }
		a.blue:active {color: #006699; text-decoration: underline; }
		a.blue:hover {color: #009999; text-decoration: none; }

		body {
			background: #f5f5f5;
		}

		
		html, body, h1, h2, h3, h4, h5, h6, div, span, input, textarea, table, td, th, nav, section, nav, header, select, footer, button {
		  font-family: 'Montserrat', sans-serif;
		}




		///////////// Checkbox & Radio

		.checkbox:after {
			border-left: 4px solid #535353 !important;
			border-bottom: 4px solid #535353 !important;
		}

		.radio:after {
			background-color: #535353 !important;
		}

		.radio:before, .checkbox:before {
			border: 1px solid #dddddd !important;
			background-color: #dddddd !important;
		}

		<input type="checkbox" id="cb1" checked> <label class="checkbox" for="cb1">Флажок 1</label>
		<input type="radio" name="rb" id="rb1" checked> <label class="radio" for="rb1">Переключатель 1</label>




		///////////// Кнопки

		input[type=submit], button, .btn {
			background: #232323 !important;
		}

		input[type=submit]:hover, button:hover, .btn:hover {
			background: #363636 !important;
		}
		
-------------------------------------------------------------------------------*/

/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

html, body, h1, h2, h3, h4, h5, h6, div, span, input, textarea, table, td, th, nav, section, nav, header, select, footer, button {
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 0px;
  color: #283238;
}

body {
	background: #efefef;
}

header, section, nav, footer {
	padding: 0;
}

@font-face{
	font-family:"Micradi";
	src:	local("0"),
				url("/sys/fonts/micradi_regular.woff2") format("woff2"),
				url("/sys/fonts/micradi_regular.woff") format("woff"),
				url("/sys/fonts/micradi_regular.ttf") format("ttf");
	font-style:normal;
	font-display:swap;
}

/*------------------------------------------------------------------------------
 ******************* SETTINGS **************************************************
-------------------------------------------------------------------------------*/

/*
div.con {
	width: calc(100% - 40px);
}
*/

:root {
	--color-main: #283238;
	--blue: #4169E1;
	/*--blue: #2f38e5;*/
}

.root {
	color: var(--color-main);
}

.def-btn {
	display: inline-block;
	background: #e53935;
	color:#fff;
	padding: 0 50px;
	height: 50px;
	line-height: 50px;
	font-size: 1em;
	font-weight: 300;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	transition: 0.1s;
	text-align: center;
	&:hover {
		background: #a00a00;
		transition: 0.2s;
	}
}



header .con {
	background: var(--color-main);
	border-bottom-left-radius: 32px;
	border-bottom-right-radius: 32px;
}

header .con .white-con {
	margin: 16px;
	background: #fefefe;
	border-radius: 16px;
	overflow: hidden;
}

header .con .white-con img {
	display: block;
	width: 64%;
	margin: 128px auto 16px auto;
}

header .con .transparent-con {
	position: relative;
	margin-top: 128px;
	padding: 0 64px 32px 64px;
}

header .con .transparent-con h1 {
	/*width: calc(100% - 350px);*/
	width: 74%;
	color: #fefefe;
	text-transform: uppercase;
	font-weight: 300;
	font-size: 4em;
	line-height: 1.2;
}

header .con .transparent-con h1 span:first-child {
	display: inline-block;
	width: 148px;
	height: 84px;
	position: relative;
	top: 16px;
	background: #fefefe;
	border-radius: 256px;
	background: url(/sys/images/main/mebel-animation-h1.jpg) right center / cover repeat;
	transition: background 5s ease;
	animation: movement1 32s infinite linear;
	border: 2px solid #fefefe;
}

header .con .transparent-con h1 span:last-child {
	font-weight: 600;
	color: #fefefe;
	font-size: 1em;
}

@keyframes movement1 {
	0% {
		background-position: 100% 0;
	}
	50% {
		background-position: 0 0;
	}
	100% {
		background-position: 100% 0;
	}
}


header .con .transparent-con .slogan {
	position: absolute;
	right: 64px;
	bottom: 32px;
	color: #fefefe;
	width: 250px;
}

header .con .transparent-con .slogan h2 {
	font-size: 1.0em;
	color: #fefefe;
	font-weight: 300;
}

header .con .transparent-con .slogan .btn-go {
	font-size: 1em;
	color: #fefefe;
	margin-top: 32px;
	font-weight: 300;
	display: flex;
	align-items: center;
	display: inline-block;
	cursor: pointer;
}

header .con .transparent-con .slogan .btn-go:hover span {
	color: var(--blue);
}

header .con .transparent-con .slogan .btn-go span {
	color: #fefefe;
	border-bottom: 1px dotted #fefefe;
	transition: 0.2s;
	text-transform: uppercase;
}

header .con .transparent-con .slogan .btn-go i {
	display: inline-block;
	width: 32px;
	height: 32px;
	text-align: center;
	font-size: 1em;
	line-height: 32px;
	border-radius: 1000px;
	background: var(--blue);
	margin-left: 16px;
	transition: 0.2s;
}

header .con .transparent-con .slogan .btn-go:hover i {
	transform: scale(1.1);
}





nav {
	position: fixed;
	top: 16px;
	min-width: calc(1200px - 32px);
	width: calc(1200px - 32px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 10000;
	/*background: rgba(255, 255, 255, 0.5);*/
	/*backdrop-filter: blur(5px);*/
	height: 96px;
	border-radius: 16px;
	/*border: 2px solid rgba(255, 255, 255, .5);*/
}
/*
nav:before {
	content: "";
	position: absolute;
	inset: 14px 18px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .90);
	filter: blur(0px);
	z-index: -1;
}
*/
.liquidGlass-wrapper {
  position: relative;
  position: absolute;
  inset: 0;
  display: flex;
  font-weight: 600;
  overflow: hidden;
  color: black;
  cursor: pointer;
  /*box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);*/
  background: rgba(255, 255, 255, .0);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}
.liquidGlass-effect {
  position: absolute;
  z-index: 0;
  inset: 0;
  backdrop-filter: blur(3px);
  filter: url(#glass-distortion);
  overflow: hidden;
  isolation: isolate;
}
.liquidGlass-tint {
  z-index: 1;
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.25);
}
.liquidGlass-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  box-shadow: inset 3px 3px 1px 0 rgba(255, 255, 255, 0.5),
  inset -2px -2px 1px 1px rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  filter: blur(1px);
}
.liquidGlass-text {
	width: 100%;
  z-index: 3;
  font-size: 2rem;
  color: black;
}

nav .con {
	width: 100%;
	min-width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 2;
}

nav .back-con {
	z-index: 1;
	position: absolute;
	inset: 10px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.95);
	filter: blur(12px);
	overflow: hidden;
	border: 8px solid #fff;
	transition: 0.5s;
}

nav .back-blick {
	height: 102px;
	position: absolute;
	z-index: 0;
	left: -100%;
	top: 0;
	right: -100%;
	background: linear-gradient(180deg, transparent 70%, rgba(0, 0, 75, 0.25));
	border-bottom-left-radius: 100%;
	border-bottom-right-radius: 100%;
	filter: blur(3px);
	transition: 0.5s;
	opacity: 0;
}

nav .back-blick-2 {
	height: 102px;
	position: absolute;
	z-index: 0;
	left: -100%;
	bottom: 0;
	right: -100%;
	background: linear-gradient(180deg, rgba(0, 0, 75, 0.25), transparent 30%);
	border-top-left-radius: 100%;
	border-top-right-radius: 100%;
	filter: blur(3px);
	transition: 0.5s;
	opacity: 0;
}

nav .back-blick-on,
nav .back-blick-2-on {
	opacity: 1;
	transition: 1s;
}


nav .logo {
	position: relative;
	margin-left: 32px;
	height: 64px;
	width: 196px;
	background: url(/sys/images/main/logo.png) left center / contain no-repeat;
}

nav .logo a {
	display: block;
	position: absolute;
	inset: 0;
}

nav .menu {
	height: 32px;
	display: flex;
	align-items: center;
}

nav .menu-btn {
	text-transform: lowercase;
	font-size: 1em;
	color: var(--color-main);
	margin: 0 16px;
	font-weight: 300;
	height: 32px;
	line-height: 32px;
	position: relative;
	cursor: pointer;
	transition: 0.1s;
}

nav .menu-btn a {
	display: block;
	position: absolute;
	inset: 0;
}

nav .menu-btn:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--blue);
	transition: 0.1s;
}

nav .menu-btn:hover {
	color: var(--blue);
	transition: 0.2s;
}

nav .menu-btn:hover:before {
	width: 100%;
	transition: 0.2s;
}


nav .likes {
	margin-right: 32px;
	cursor: pointer;
}


nav .likes span {
	transition: 0.2s;
	text-transform: lowercase;
	color: var(--blue);
	font-weight: 600;
}

nav .likes i {
	display: inline-block;
	width: 32px;
	height: 32px;
	text-align: center;
	font-size: 1em;
	line-height: 32px;
	border-radius: 1000px;
	background: var(--blue);
	margin-right: 8px;
	transition: 0.2s;
	color: #fefefe;
}

nav .likes:hover i {
	transform: scale(1.1);
}



section.main {
	padding: 128px 0 64px 0;
}

section.main .con {
	padding: 0 64px;
	overflow: visible;
}

section.main .text1 {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

section.main .text1 div:last-child {
	width: 200px;
	font-weight: 300;
}

section.main h2 {
	margin-left: 128px;
	font-size: 1em;
	text-transform: uppercase;
	line-height: 1.2;
}

section.main h2 span:first-child {
	display: block;
	font-size: 3em;
	font-weight: 300;
}

section.main h2 span:last-child {
	display: block;
	margin-left: 50px;
	font-size: 3em;
	font-weight: 600;
}


section.main .catalog {
	margin-top: 64px;
	display: flex;
	justify-content: space-between;
}

section.main .catalog .header {
	width: 128px;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}

section.main .catalog .header div:first-child {
	text-transform: uppercase;
	font-weight: 300;
}

section.main .catalog .header div:last-child {
	margin-left: 16px;
}

section.main .catalog .header div:last-child i {
	display: inline-block;
	width: 32px;
	height: 32px;
	text-align: center;
	font-size: 1em;
	line-height: 32px;
	border-radius: 1000px;
	background: var(--blue);
	color: #fefefe;
}

section.main .catalog .items {
	width: calc(100% - 128px - 64px);
	margin-left: 64px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: stretch;
	overflow: visible;
}

section.main .catalog .items > div {
	width: calc(16.666666% - 16px);
	margin-left: 16px;
	margin-bottom: 16px;
	background: #fefefe;
	border-radius: 16px;
	padding: 32px 0;
	transition: 0.2s;
	position: relative;
	z-index: 1;
}

section.main .catalog .items > div:hover {
	cursor: pointer;
	transform: scale(1.05);
	z-index: 2;
	box-shadow:0 10px 20px rgba(0,0,0,0.05), 0 6px 6px rgba(0,0,0,0.07);
}

section.main .catalog .items > div > div {
	width: 72%;
	border-radius: 1000px;
	background: #ccc;
	margin: 0 auto 48px auto;
	overflow: hidden;
}

section.main .catalog .items > div > div:before {
	content: "";
	float: left;
	padding-top: 100%;
}

section.main .catalog .items > div > span {
	display: block;
	text-align: center;
	font-weight: 300;
	padding: 0 32px;
}

section.main .catalog .items > div:nth-child(1) > div:nth-child(1) {
	background: url(/sys/images/catalog/1.jpg) center center / cover;
}

section.main .catalog .items > div:nth-child(2) > div:nth-child(1) {
	background: url(/sys/images/catalog/2.jpg) center center / cover;
}

section.main .catalog .items > div:nth-child(3) > div:nth-child(1) {
	background: url(/sys/images/catalog/3.jpg) center center / cover;
}

section.main .catalog .items > div:nth-child(4) > div:nth-child(1) {
	background: url(/sys/images/catalog/4.jpg) center center / cover;
}

section.main .catalog .items > div:nth-child(5) > div:nth-child(1) {
	background: url(/sys/images/catalog/5.jpg) center center / cover;
}





section.about {
	padding: 128px 0 64px 0;
}

section.about .con {
	padding: 0 64px;
}

section.about .h2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}

section.about .h2 div:nth-child(1),
section.about .h2 div:nth-child(3) {
	font-size: 3em;
	font-weight: 300;
	text-transform: uppercase;
	width: 32%;
	line-height: 1.2;
}

section.about .h2 div:nth-child(3) {
	width: 46%;
}

section.about .h2 div:nth-child(2) {
	background: url(/sys/images/main/divan-h2.jpg) center center / cover;
	border-radius: 1000px;
	width: 16%;
}

section.about .h2 div:nth-child(3) span {
	font-size: 1em;
	font-weight: 600;
	color: var(--blue);
}

section.about .h2 div:nth-child(1) span {
	margin-left: 32px;
	display: inline-block;
	font-size: 1em;
}


section.about .textabout {
	margin-top: 64px;
	display: flex;
	flex-wrap: wrap;
}

section.about .textabout .left {
	width: 128px;
	margin-right: 64px;
	font-weight: 300;
}

section.about .textabout .right {
	width: calc(100% - 128px - 64px);
}

section.about .textabout .right > div {
	display: flex;
	justify-content: space-between;
	padding: 16px;
	position: relative;
	margin-top: 16px;
}

section.about .textabout .right > div:first-child {
	margin-top: 0;
}

section.about .textabout .right > div:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	height: 32px;
	border-top: 1px solid var(--color-main);
	border-left: 1px solid var(--color-main);
	border-right: 1px solid var(--color-main);
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}

section.about .textabout .right > div .icon {
	width: 96px;
	height: 96px;
	background: #ccc;
	border-radius: 8px;
}

section.about .textabout .right > div .text {
	width: 400px;
}

section.about .textabout .right > div .digit {
	color: var(--blue);
}

section.about .textabout .right > div:nth-child(1) .icon {
	background: url(/sys/images/about/1.jpg) center center / cover;
}

section.about .textabout .right > div:nth-child(2) .icon {
	background: url(/sys/images/about/2.jpg) center center / cover;
}

section.about .textabout .right > div:nth-child(3) .icon {
	background: url(/sys/images/about/3.jpg) center center / cover;
}





section.presentation {
	padding: 128px 0 64px 0;
}

section.presentation .con {
	padding: 0 64px;
	display: flex;
	justify-content: space-between;
}

section.presentation .con > div {
}

section.presentation .con > div:first-child {
	overflow: hidden;
	position: relative;
	background: url(/sys/images/main/video-bg.jpg) center center / cover;
	border-radius: 16px;
	width: calc(35% - 16px);
	display: flex;
	justify-content: center;
	align-items: center;
}

section.presentation .con > div:first-child:before {
	content: "";
	float: left;
	padding-top: 100%;
}

section.presentation .con > div:first-child:after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .0);
	transition: 0.2s;
}

section.presentation .con > div:first-child:hover:after {
	background: rgba(0, 0, 0, .50);
}

section.presentation .con > div:first-child .play {
	width: 64px;
	height: 64px;
	border-radius: 1000px;
	background: rgba(255, 255, 255, .90);
	text-align: center;
	line-height: 64px;
	font-size: 3em;
	cursor: pointer;
	color: var(--blue);
	transition: 0.2s;
	z-index: 1;
	position: relative;
}

section.presentation .con > div:first-child:hover .play {
	transform: scale(1.2);
}

section.presentation .con > div:last-child {
	width: calc(65% - 16px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

section.presentation .con > div:last-child > div:first-child h2 {
	font-size: 3em;
	font-weight: 300;
	text-transform: uppercase;
	line-height: 1.2;
}

section.presentation .con > div:last-child > div:first-child h2 span {
	font-size: 1em;
	color: var(--blue);
	font-weight: 600;
}


section.presentation .con > div:last-child > div:last-child div {
	font-size: 4em;
	line-height: .8;
}

section.presentation .con > div:last-child > div:last-child div span {
	display: block;
	font-size: 1em;
	color: #ccc;
	text-transform: uppercase;
	font-weight: 600;
}

section.presentation .con > div:last-child > div:last-child div span:last-child {
	text-align: right;
	font-size: 1.5em;
}





section.team {
	padding: 128px 0 64px 0;
}

section.team .con {
	padding: 0 64px;
}

section.team .con .people {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}

section.team .con .people > div:nth-child(1) {
	width: calc(50% - 16px);
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

section.team .con .people > div:nth-child(1) h2 {
	font-size: 1em;
	font-weight: 300;
	margin-bottom: 32px;
}

section.team .con .people > div:nth-child(1) h3 {
	font-size: 2.5em;
	font-weight: 300;
	line-height: 1;
	text-transform: uppercase;
}

section.team .con .people > div:nth-child(1) h3 span {
	font-size: 1em;
	font-weight: 600;
	color: var(--blue);
}

section.team .con .people > div:nth-child(1) > div:last-child p {
	color: #aaa;
	line-height: 1.2;
	width: 60%;
	font-weight: 300;
}


section.team .con .people > div:nth-child(2) {
	width: calc(50% - 16px);
	display: flex;
	justify-content: space-between;
}
section.team .con .people > div:nth-child(3) {
	width: 100%;
	margin-top: 64px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

section.team .con .people > div:nth-child(2) > div {
	width: calc(50% - 16px);
}

section.team .con .people > div:nth-child(3) > div {
	width: calc(25% - 32px);
}

section.team .con .people > div:nth-child(2) > div .img,
section.team .con .people > div:nth-child(3) > div .img {
	background: url(/sys/images/main/user-default.jpg) top center / cover;
	overflow: hidden;
	border-radius: 8px;
	position: relative;
}

section.team .con .people > div:nth-child(2) > div .img:before,
section.team .con .people > div:nth-child(3) > div .img:before {
	content: "";
	float: left;
	padding-top: 120%;
}

section.team .con .people > div:nth-child(3) > div {
	margin-bottom: 64px;
}

section.team .con .people > div:nth-child(3) > div .img:before {
	padding-top: 120%;
}

section.team .con .people > div:nth-child(2) > div .img:after,
section.team .con .people > div:nth-child(3) > div .img:after {
	content: "";
	inset: 0;
	position: absolute;
	background: linear-gradient(180deg, transparent 70%, var(--blue));
	opacity: 0.5;
}

section.team .con .people > div:nth-child(2) > div h3,
section.team .con .people > div:nth-child(3) > div h3 {
	font-size: 1.0em;
	font-weight: 600;
	text-transform: none;
	margin-top: 8px;
}

section.team .con .people > div:nth-child(2) > div p,
section.team .con .people > div:nth-child(3) > div p {
	font-size: 0.8em;
	font-weight: 300;
	color: #aaa;
	line-height: 1.2;
	margin-top: 8px;
}



section.whywe {
	padding: 128px 0 64px 0;
}

section.whywe .con {
	padding: 0 64px;
}

section.whywe .con h2 {
	text-align: center;
	font-size: 1em;
	font-weight: 300;
	text-transform: none;
	margin-bottom: 64px;
}

section.whywe .con h3 {
	text-align: center;
	font-size: 4em;
	font-weight: 300;
	text-transform: uppercase;
	line-height: 1.2;
}

section.whywe .con h3 span {
	font-size: 1em;
	color: var(--blue);
	font-weight: 600;
}

section.whywe .con .items {
	display: flex;
	margin-top: 64px;
	justify-content: space-between;
}

section.whywe .con .items > div {
	width: calc(33.333% - 128px);
	height: 300px;
	padding: 32px;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

section.whywe .con .items > div:before {
	content: "";
	float: left;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 32px;
	border-top: 1px solid var(--color-main);
	border-left: 1px solid var(--color-main);
	border-bottom: 1px solid var(--color-main);
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
}

section.whywe .con .items > div .text {
	font-weight: 600;
}

section.whywe .con .items > div .icon {
	font-size: 1.5em;
}

section.whywe .con .items > div .text span:first-child strong {
	font-size: 1em;
	font-weight: 600;
	color: var(--blue);
}

section.whywe .con .items > div .text span:last-child {
	display: block;
	margin-top: 32px;
	font-size: 0.8em;
	line-height: 1.2;
	color: #aaa;
	font-weight: 300;
}




section.banner {
	padding: 64px 0 64px 0;
}

section.banner .con {
	padding: 0 64px;
}

section.banner .con .banner-content {
	overflow: hidden;
	position: relative;
	border-radius: 16px;
	background: url(/sys/images/main/man-vr-1.jpg) center center / cover;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 16px 32px;
}

section.banner .con .banner-content:before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .25);
}

section.banner .con .banner-content > div {
	width: 100%;
	position: relative;
	z-index: 1;
}

section.banner .con .banner-content > div:last-child {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
}

section.banner .con .banner-content > div:last-child > div:first-child {
	font-size: 1em;
	font-weight: 600;
	color: #fff;
	width: 30%;
}

section.banner .con .banner-content > div:last-child > div:last-child  {
	width: 70%;
	font-size: 6em;
	font-weight: 600;
	color: rgba(255, 255, 255, .50);
	text-align: right;
	text-transform: uppercase;
	line-height: 1;
}

section.banner .con .banner-content > div:first-child  {
	width: 100%;
	font-size: 6em;
	font-weight: 600;
	color: rgba(255, 255, 255, .50);
	text-transform: uppercase;
	line-height: 1;
	margin-bottom: 196px;
}



section.welcome {
	padding: 128px 0 64px 0;
}

section.welcome .con {
	padding: 0 64px;
	overflow: visible;
}

section.welcome .con h2 {
	text-align: center;
	font-size: 1em;
	font-weight: 300;
	text-transform: none;
	margin-bottom: 64px;
}

section.welcome .con h3 {
	text-align: center;
	font-size: 4em;
	font-weight: 300;
	text-transform: uppercase;
	line-height: 1.2;
}

section.welcome .con h3 span {
	font-size: 1em;
	color: var(--blue);
	font-weight: 600;
}

section.welcome .con .worktime {
	text-align: center;
	margin-top: 32px;
}

section.welcome .con .worktime div:nth-child(1),
section.welcome .con .worktime div:nth-child(2) {
	text-align: center;
}

section.welcome .con .worktime div:nth-child(3) {
	overflow: visible;
	display: inline-block;
	margin-top: 64px;
}

section.welcome .con .worktime div:nth-child(3) span {
	transition: 0.2s;
	text-transform: uppercase;
	color: var(--color-main);
	font-weight: 300;
	cursor: pointer;
}

section.welcome .con .worktime div:nth-child(3) i {
	display: inline-block;
	width: 32px;
	height: 32px;
	text-align: center;
	font-size: 1em;
	line-height: 32px;
	border-radius: 1000px;
	background: var(--blue);
	margin-right: 8px;
	transition: 0.2s;
	color: #fefefe;
}

section.welcome .con .worktime div:nth-child(3):hover i {
	transform: scale(1.1);
}

section.welcome .con .worktime div:nth-child(3):hover span {
	color: var(--blue);
}





section.slideshow {
	padding: 32px 0 64px 0;
}

section.slideshow .con {
	padding: 0 64px;
}

section.slideshow .slides {
	overflow: hidden;
  position: relative;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

section.slideshow .slides:before {
	content: "";
	float: left;
	padding-top: 50%;
}

section.slideshow .slides .slide {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}
section.slideshow .slides .showing {
  opacity: 1;
  z-index: 2;
}

section.slideshow .slides .slide {
  box-sizing: border-box;
  background: var(--color-main);
  color: #fefefe;
  border-radius: 16px;
  padding: 32px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

section.slideshow .slides .slide > div:first-child,
section.slideshow .slides .slide > div:last-child {
	width: calc(50% - 12px);
	padding-bottom: 32px;
	margin-top: 32px;
	border-bottom: 2px solid rgba(255, 255, 255, .1);
}

section.slideshow .slides .slide > div:nth-child(2) {
	width: 2px;
	height: calc(100% - 16px);
	background: rgba(255, 255, 255, .1);
}

section.slideshow .slides .slide > div:first-child {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

section.slideshow .slides .slide > div:first-child > div:first-child {
	display: flex;
	justify-content: space-between;
	padding-right: 32px;
}

section.slideshow .slides .slide > div:first-child > div:first-child > div:first-child {
	font-size: 3em;
	font-weight: 300;
	color: #fefefe;
	text-transform: uppercase;
	width: calc(100% - 150px);
	line-height: 1.2;
}

section.slideshow .slides .slide > div:first-child > div:first-child > div:last-child {
	color: #aaa;
	font-size: 1em;
	font-weight: 300;
}

section.slideshow .slides .slide > div:first-child > div:last-child {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

section.slideshow .slides .slide > div:first-child > div:last-child > div:first-child {
	width: 300px;
}

section.slideshow .slides .slide > div:first-child > div:last-child > div:first-child span:first-child {
	font-size: 1.2em;
	font-weight: 300;
	display: block;
	color: #fefefe;
	text-transform: uppercase;
	line-height: 1.2;
}

section.slideshow .slides .slide > div:first-child > div:last-child > div:first-child span:last-child {
	font-weight: 300;
	color: #aaa;
	line-height: 1.2;
	font-size: 1em;
	margin-top: 16px;
	display: block;
}


section.slideshow .slides .slide > div:first-child > div:last-child > div:last-child {
	text-align: right;
	margin-right: 32px;
	font-size: 3em;
	color: #aaa;
	font-weight: 300;
}


section.slideshow .slides .slide > div:last-child {
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
}

section.slideshow .slides .slide > div:last-child > div {
	border-radius: 16px;
	width: calc(100% - 32px);
}

section.slideshow .slides .slide:nth-of-type(1) > div:last-child > div {
	background: url(/sys/images/main/slide1.jpg) center center / cover;
}

section.slideshow .slides .slide:nth-of-type(2) > div:last-child > div {
	background: url(/sys/images/main/slide2.jpg) center center / cover;
}

section.slideshow .slides .slide:nth-of-type(3) > div:last-child > div {
	background: url(/sys/images/main/slide3.jpg) center center / cover;
}





section.yourdesign {
	padding: 64px 0 64px 0;
}

section.yourdesign .con {
	padding: 0 64px;
}

section.yourdesign .con .form {
	border-radius: 16px;
	padding: 32px;
	background: #fff url(/sys/images/main/design-project.jpg) right center / contain no-repeat;
}

section.yourdesign .con .form h3 {
	text-align: center;
	font-size: 1em;
	font-weight: 300;
	color: var(--blue);
}

section.yourdesign .con .form > div {
	margin-top: 32px;
}

section.yourdesign .con .form > div h2 {
	font-size: 3em;
	font-weight: 300;
	line-height: 1.2;
	text-transform: uppercase;
	margin-bottom: 32px;
}

section.yourdesign .con .form > div h2 span {
	font-size: 1em;
	color: var(--blue);
	font-weight: 600;
	display: block;
	margin-left: 32px;
}

section.yourdesign .con .form > div p {
	font-size: 1em;
	width: 30%;
	color: #aaa;
	line-height: 1.2;
	font-weight: 300;
	margin-left: 32px;
}

section.yourdesign .con .form > div > div {
	margin-top: 64px;
	margin-left: 32px;
	cursor: pointer;
	margin-bottom: 64px;
}


section.yourdesign .con .form > div > div span {
	transition: 0.2s;
	text-transform: uppercase;
	color: var(--color-main);
	border-bottom: 1px var(--color-main) dotted;
	font-weight: 300;
}

section.yourdesign .con .form > div > div i {
	display: inline-block;
	width: 32px;
	height: 32px;
	text-align: center;
	font-size: 1em;
	line-height: 32px;
	border-radius: 1000px;
	background: var(--blue);
	margin-right: 8px;
	transition: 0.2s;
	color: #fefefe;
}

section.yourdesign .con .form > div > div:hover i {
	transform: scale(1.1);
}

section.yourdesign .con .form > div > div:hover span {
	color: var(--blue);
}





section.social {
	padding: 64px 0;
}

section.social .con {
	padding: 0 64px;
}

section.social .con > div:first-child {
	display: flex;
	justify-content: space-between;
}

section.social .con > div:first-child > div:first-child {
	width: calc(100% - 364px);
}

section.social .con > div:first-child > div:last-child {
	width: 300px;
}

section.social .con > div:first-child > div:first-child h2 {
	font-size: 3em;
	font-weight: 300;
	text-transform: uppercase;
	line-height: 1.2;
}

section.social .con > div:first-child > div:first-child h2 span {
	font-size: 1em;
	font-weight: 600;
	color: var(--blue);
	display: block;
	display: inline-block;
	margin-left: 32px;
}

section.social .con > div:first-child > div:last-child p {
	font-size: 1em;
	font-weight: 300;
	line-height: 1.2;
	margin-bottom: 32px;
	text-align: right;
}

section.social .con > div:first-child > div:last-child > div {
	cursor: pointer;
	text-align: right;
}


section.social .con > div:first-child > div:last-child > div span {
	transition: 0.2s;
	text-transform: uppercase;
	color: var(--color-main);
	border-bottom: 1px var(--color-main) dotted;
	font-weight: 300;
}

section.social .con > div:first-child > div:last-child > div i {
	display: inline-block;
	width: 32px;
	height: 32px;
	text-align: center;
	font-size: 1em;
	line-height: 32px;
	border-radius: 1000px;
	background: var(--blue);
	margin-right: 8px;
	transition: 0.2s;
	color: #fefefe;
}

section.social .con > div:first-child > div:last-child > div:hover i {
	transform: scale(1.1);
}

section.social .con > div:first-child > div:last-child > div:hover span {
	color: var(--blue);
}

section.social .con > div:last-child {
	display: flex;
	justify-content: space-between;
	margin-top: 32px;
}

section.social .con > div:last-child > div {
	overflow: hidden;
	width: calc(25% - 16px);
	background: url(/sys/images/main/tg-demo.jpg) center center / cover;
	border-radius: 16px;
}

section.social .con > div:last-child > div:before {
	content: "";
	float: left;
	padding-top: 100%;
}



footer {
	padding-top: 64px;
}

footer .con {
	border-top-left-radius: 32px;
	border-top-right-radius: 32px;
	overflow: hidden;
	background: var(--blue);
	background: linear-gradient(180deg, var(--blue), #151a83);
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: wrap;
}

footer .con > div:first-child,
footer .con > div:nth-child(2) {
	width: 50%;
}

footer .con > div:nth-child(2) {
	position: absolute;
	left: 50%;
	right: 0;
	top:0;
	bottom: 0;
}

footer .con > div:nth-child(2) > .overlay {
	background: url(/sys/images/main/footer.jpg) center center / cover;
	background-attachment: fixed;
	position: absolute;
	inset: 0;
	opacity: 0.5;
	z-index: 9;
}

footer .con > div:nth-child(2) > .form-overlay {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: block;
}

footer .con > div:nth-child(2) > .form-overlay .form {
	max-width: 500px;
	width: 500px;
	padding: 16px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
} 

footer .con > div:nth-child(2) > .form-overlay .form .angle {
	position: absolute;
	width: 32px;
	height: 32px;
}

footer .con > div:nth-child(2) > .form-overlay .form .angle.angle-1 {
	top:0;
	left: 0;
	border-top-left-radius: 256px;
	border-top: 2px solid rgba(255, 255, 255, .50);
	border-left: 2px solid rgba(255, 255, 255, .50);
}
footer .con > div:nth-child(2) > .form-overlay .form .angle.angle-2 {
	top:0;
	right: 0;
	border-top-right-radius: 256px;
	border-top: 2px solid rgba(255, 255, 255, .50);
	border-right: 2px solid rgba(255, 255, 255, .50);
}
footer .con > div:nth-child(2) > .form-overlay .form .angle.angle-3 {
	bottom:0;
	right: 0;
	border-bottom-right-radius: 256px;
	border-right: 2px solid rgba(255, 255, 255, .50);
	border-bottom: 2px solid rgba(255, 255, 255, .50);
}
footer .con > div:nth-child(2) > .form-overlay .form .angle.angle-4 {
	bottom:0;
	left: 0;
	border-bottom-left-radius: 256px;
	border-bottom: 2px solid rgba(255, 255, 255, .50);
	border-left: 2px solid rgba(255, 255, 255, .50);
}

footer .con > div:nth-child(2) > .form-overlay .form .form-container {
	border-radius: 16px;
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(2px);
	padding: 32px;
	position: relative;
}

footer .con > div:nth-child(2) > .form-overlay .form .form-container h2 {
	font-size: 2em;
	font-weight: 300;
	text-transform:uppercase;
	line-height: 1.0;
	text-align: center;
	margin-bottom: 16px;
}

footer .con > div:nth-child(2) > .form-overlay .form .form-container h2 span {
	font-size: 1em;
	color: var(--blue);
	display: block;
	font-weight: 600;
}

footer .con > div:nth-child(2) > .form-overlay .form .form-container input {
	padding: 8px 0;
	height: unset;
	line-height: unset;
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, .20);
	border-radius: 0;
	background: transparent;
	display: block;
	width: 70%;
	margin: 0 auto;
	margin-top: 16px;
}


footer .con > div:nth-child(2) > .form-overlay .form .form-container .form-row form div button {
	transition: 0.2s;
	text-transform: uppercase;
	color: var(--color-main);
	border-bottom: 1px var(--color-main) dotted;
	font-weight: 300;
	border-radius: 0;
	border: 0;
	display: inline;
	background: transparent;
	padding: 0;
}

footer .con > div:nth-child(2) > .form-overlay .form .form-container .form-row form div {
	text-align: center;
	margin-top: 32px;
}

footer .con > div:nth-child(2) > .form-overlay .form .form-container .form-row form div i {
	display: inline-block;
	width: 32px;
	height: 32px;
	text-align: center;
	font-size: 1em;
	line-height: 32px;
	border-radius: 1000px;
	background: var(--blue);
	margin-right: 8px;
	transition: 0.2s;
	color: #fefefe;
}

footer .con > div:nth-child(2) > .form-overlay .form .form-container .form-row form div button:hover {
	color: var(--blue);
	cursor: pointer;
}

footer .con > div:nth-child(2) > .form-overlay .form .form-container .form-row form p {
	font-size: 0.8em;
	color: #aaa;
	text-align: center;
	display: block;
	line-height: 1;
	padding: 0;
	font-weight: 300;
	margin-top: 16px;
}

footer .con > div:nth-child(2) > .form-overlay .form .form-container .form-row form p span {
	font-size: 1em;
	color: #aaa;
	display: block;
	font-weight: 300;
}





footer .con > div:first-child {
	display: flex;
	justify-content: space-between;
	padding-bottom: 64px;
}

footer .con > div:first-child > div:first-child {
	width: 50%;
	padding: 64px 32px 0 64px;
}

footer .con > div:first-child > div:last-child {
	width: 50%;
	padding: 64px 64px 0 32px;
}

footer .con > div:first-child > div:first-child > .logo {
	width: 64%;
	overflow: hidden;
	background: url(/sys/images/main/logo.png) center center / contain no-repeat;
	filter: invert(100%);
}

footer .con > div:first-child > div:first-child > .logo:before {
	content: "";
	float: left;
	padding-top: 25%;
}

footer .con > div:first-child > div:first-child > .menu {
	margin-top: 32px;
	margin-bottom: 32px;
}

footer .con > div:first-child > div:first-child > .menu span {
	display: block;
	padding: 2px 0;
	font-weight: 300;
}

footer .con > div:first-child > div:first-child > .menu span a {
	color: #fefefe;
}

footer .con > div:first-child > div:first-child > .menu span a:hover {
	text-decoration: underline;
}

footer .con > div:first-child > div:first-child > .rights {
	line-height: 2;
}

footer .con > div:first-child > div:first-child > .rights span {
	color: rgba(255, 255, 255, 0.3);
	font-weight: 300;
	display: inline-block;
	line-height: 1.2;
	margin: 8px 0;
}

footer .con > div:last-child {
	margin-top: 32px;
	width: 100%;
	overflow: hidden;
	background: url(/sys/images/main/logo.png) top center / cover;
	filter: invert(100%);
	opacity: 0.1;
}

footer .con > div:last-child:before {
	content: "";
	float: left;
	padding-top: 12.0%;
}

footer .con > div:first-child > div:last-child .req {
	margin-bottom: 32px;
}

footer .con > div:first-child > div:last-child .req span {
	color: rgba(255, 255, 255, .3);
	font-weight: 600;
	display: block;
}

footer .con > div:first-child > div:last-child .phone {
	color: #fefefe;
	font-weight: 300;
	margin-bottom: 8px;
}

footer .con > div:first-child > div:last-child .email {
	color: #fefefe;
	font-weight: 300;
}

footer .con > div:first-child > div:last-child .socials {
	margin-top: 32px;
	margin-bottom: 64px;
	display: flex;
	justify-content: flex-start;
}

footer .con > div:first-child > div:last-child .socials > div {
	background: #fefefe;
	width: 48px;
	height: 48px;
	border-radius: 1000px;
	line-height: 48px;
	text-align: center;
	color: var(--blue);
	font-size: 1.5em;
	margin-right: 16px;
}


footer .con > div:first-child > div:last-child .address {
	margin-top: 16px;
	color: #fefefe;
	font-size: 1em;
	font-weight: 300;
}
















nav.inside .back-con,
nav.inside .back-blick,
nav.inside .back-blick-2 {
	opacity: 0;
	transition: 0.5s;
}

nav.inside .logo {
	filter: invert(100%);
}

nav.inside .menu .menu-btn {
	color: #fefefe;
}

nav.inside .likes span {
	color: #fefefe;
}



section.page-header .con {
	background: var(--color-main);
	border-bottom-left-radius: 32px;
	border-bottom-right-radius: 32px;
	padding-top: 256px;
	padding-bottom: 32px;
}



section.page-header .con > div {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}

section.page-header .con > div > div {
	width: calc(50% - 32px);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

section.page-header .con > div > div:last-child {
	width: 300px;
	margin-right: 32px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}


section.page-header .con > div > div:first-child > div:first-child {
	color: #aaa;
	font-size: 1em;
	font-weight: 300;
	text-align: left;
	width: 100%;
	padding-left: 32px;
}

section.page-header .con > div > div:first-child > div:last-child {
	font-size: 4em;
	color: #fefefe;
	font-weight: 300;
	text-transform: uppercase;
	text-align: left;
	width: 100%;
	padding-left: 32px;
}


section.page-header .con > div > div:last-child > div:first-child {
	color: #fefefe;
	font-size: 1em;
	font-weight: 300;
	text-align: left;
	width: 100%;
}

section.page-header .con > div > div:last-child > div:last-child {
	cursor: pointer;
	text-align: right;
}


section.page-header .con > div > div:last-child > div:last-child span {
	transition: 0.2s;
	text-transform: uppercase;
	color: #fefefe;
	border-bottom: 1px #fefefe dotted;
	font-weight: 300;
}

section.page-header .con > div > div:last-child > div:last-child i {
	display: inline-block;
	width: 32px;
	height: 32px;
	text-align: center;
	font-size: 1em;
	line-height: 32px;
	border-radius: 1000px;
	background: var(--blue);
	margin-right: 8px;
	transition: 0.2s;
	color: #fefefe;
}

section.page-header .con > div > div:last-child > div:last-child:hover i {
	transform: scale(1.1);
}

section.page-header .con > div > div:last-child > div:last-child:hover span {
	color: var(--blue);
}





section.page-catalog {
	padding: 128px 0 64px 0;
}

section.page-catalog .con {
	padding: 0 64px;
}

section.page-catalog .con > div {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

section.page-catalog .con > div > div:nth-child(1),
section.page-catalog .con > div > div:nth-child(3) {
	width: 256px;
	margin-right: 64px;
}

section.page-catalog .con > div > div:nth-child(2),
section.page-catalog .con > div > div:nth-child(4) {
	width: calc(100% - 256px - 64px);
}

section.page-catalog .con > div > div:nth-child(2) {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

section.page-catalog .con > div > div:nth-child(2) > div:first-child {
	width: calc(100% - 128px - 64px);
	font-size: 3em;
	font-weight: 300;
	text-transform: uppercase;
	line-height: 1.2;
}

section.page-catalog .con > div > div:nth-child(2) > div:first-child span {
	display: block;
	margin-left: 32px;
	font-weight: 600;
	font-size: 1em;
}

section.page-catalog .con > div > div:nth-child(2) > div:last-child {
	width: 128px;
	text-align: right;
	color: #aaa;
	font-weight: 300;
	text-transform: lowercase;
}

section.page-catalog .con > div > div:nth-child(3),
section.page-catalog .con > div > div:nth-child(4) {
	margin-top: 32px;
}


section.page-catalog .con > div > div:nth-child(3) .menu .menu-btn {
	font-size: 1em;
	font-weight: 300;
	margin-bottom: 8px;
	transition: 0.2s;
}

section.page-catalog .con > div > div:nth-child(3) .menu .menu-btn:hover {
	color: var(--blue);
	cursor: pointer;
}

section.page-catalog .con > div > div:nth-child(3) .menu .menu-btn.active {
	color: var(--blue);
	font-weight: 600;
}

section.page-catalog .con > div > div:nth-child(4) .items {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
} 

section.page-catalog .con > div > div:nth-child(4) .items > div {
	width: calc(33.3333% - 32px);
	margin-bottom: 32px;
}

section.page-catalog .con > div > div:nth-child(4) .items > div .img {
	background: #aaa;
	border-radius: 8px;
	overflow: hidden;
}

section.page-catalog .con > div > div:nth-child(4) .items > div .img:before {
	content: "";
	float: left;
	padding-top: 100%;
}

section.page-catalog .con > div > div:nth-child(4) .items > div .info {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
}

section.page-catalog .con > div > div:nth-child(4) .items > div .info > div:first-child {
	width: 60%;
	font-weight: 300;
}

section.page-catalog .con > div > div:nth-child(4) .items > div .info > div:last-child {
	width: calc(40% - 16px);
	font-weight: 300;
	color: #aaa;
	text-align: right;
}




section.page-single {
	padding: 128px 0 64px 0;
}

section.page-single .con {
	padding: 0 64px;
}

section.page-single .con h2 {
	font-size: 3em;
	font-weight: 300;
	text-transform: uppercase;
	margin-bottom: 32px;
}