html {
	height: 100%; 
}
input, textarea, select {
    -webkit-appearance: none;
	-moz-appearance: none;
}
.catlistmobileel {
	a {
    color: white!important;
	}
}
body {
	margin: 0;
	padding: 0;
	font: 15px/1.5 Arial,'Helvetica Neue',Helvetica,sans-serif;
	color: #212529;
	display: flex;
	flex-direction: column;
	min-height: 100%;
		
} 
section {
	display: block;  
}
input,
button,
select {
  &:focus {
    outline: 0; 
    outline-offset: 0;
  }
&:active {
	outline: 0;
    outline-offset: 0; 
  }
&:hover {
    outline: 0;
    outline-offset: 0; 
  }
}

.container-b {
	max-width: 540px;
	margin: 0 auto;
	padding: 0 15px;
} 
.container-c {
	max-width: 720px; 
	margin: 0 auto;
	padding: 0 15px;
}
header {
	background:  var(--bg-color);
	min-height: 43px;
	.txthead {
		font-size: 95%;
		color: var(--white);
	}
	a { 
		margin-left: 10px;
		color: var(--main);
		font-size: 95%;
		&:hover {
			color: var(--main);
			text-decoration: underline;
		}
	}
	button {
		display: flex;
		width: auto;
		background: var(--main);
		color: var(--font-color);
		padding: 4px 14px;
		border: none;
		transition: .2s;
		cursor: pointer;
		font-size: 95%;
		font-weight: bold;
		right: 0;
		margin-left: 10px;
		&:hover {
			background: var(--hover-main)!important;
			text-decoration: none;
		}
		a {
			color: var(--font-color);
			font-size: 95%;
			margin: 0;
			&:hover {
				color: var(--main);
				text-decoration: none;
			} 
		}
	}
}
#top {
	height: 68px;
	display: flex;
	position: sticky;
	background: var(--bg-items);
	z-index: 10;
	top:0;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
	a {
		text-align: center;
		text-decoration: none;
		color: var(--font-color);
		img {
			width: 48px;
    		height: 49px;
			margin-top: 14px;
		}
		.logo {
				background: var(--main);
				padding: 3px 15px 2px;
				font-size: 80%;
				position: relative;
				top: 2px;
			}
	}
	.main-menu {
		display: flex;
		flex-direction: row;
		position: relative;
		list-style: none;
		margin: 0;
		.submenu {
			display: none;
			background: var(--bg-items);
			box-shadow: 0 2px 10px 0 rgba(0,0,0,.1);
			padding: 20px;
			position: absolute;
			left: 10px;
			margin-top: 17px;
			border-top: 1px solid var(--main);
			.submenu-list {
				columns: 4;
				list-style: none;
				li {
					font-size: 80%;
					margin: 0;
					padding: 4px 10px;
					border: none;
					cursor: pointer;
					&:hover {
						background: var(--bg-details);
					}
				}
			}
		}
		li {
			font-size: 120%;
			justify-content: space-between;
			margin: 0 20px;
			padding: 20px 0 11px;
			border-bottom: 6px solid transparent;
			cursor: pointer;
			&:hover {
				border-bottom-color: var(--main);
			}
			&:hover .submenu {
				display: block;
			}
			&:last-child {
				margin-right: 0;
			}
		}
	}
}
#form {
	background-image: linear-gradient(180deg, rgba(0,0,0,.8) 0%,rgba(0,0,0,.8) 8.33%,rgba(0,0,0,.36) 100%),url(../images/bg3.jpg);
	padding-bottom: 20px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #3b3b3b;
	max-height: 410px;
	transition: max-height 1s;
	h1 {
		color: var(--white);
		padding-top: 40px;
		font-size: 32px;
    	font-weight: bold;
	}
	.show-hide-form {
		position: relative;
    /* right: 410px; */
    float: right;
    top: 25px;
    border-bottom: 1px dashed var(--bg-details);
    color: var(--bg-details);
    text-decoration: none;
	}
	
	
	.order-form {
		background: rgba(255,255,255,.3);
		padding: 30px 10px;
		margin-top: 15px;
		.slogan {
			font-size: 150%;
			width: 400px;
			display: block;
			color: var(--white);
			line-height: 1.3;
		}
		.owners {
			display: block;
			margin-top: 20px;
			font-size: 110%;
			color: var(--white);
		}
		.btn-block {
			text-align: center;
    		margin-right: 40px;
			
			button {
				display: flex;
				width: auto;
				background: var(--main);
				color: var(--font-color);
				height: 50px;
				width: 100%;
				line-height: 50px;
				border: none;
				transition: .2s;
				cursor: pointer;
				font-size: 120%;
				border-radius: 4px;
				padding: 0 52px;
				margin: 0;
				margin-bottom: 10px;
				&:hover {
					background: var(--hover-main)!important;
				}
			}
			a {
				font-size: 90%;
				color: var(--white);
			}
		}
	}
	.features {
		list-style: none;
		margin-top: 20px;
		padding-left: 0;
		li {
			text-align: center;
   			width: 30%;
			img {
				height: 50px;
				margin-bottom: 5px;
			}
			span {
				font-size: 85%;
				display: block;
				color: var(--white);
				b {
					font-size: 130%;
    				display: block;
				}
			}
		}
	}
} 
#reg {
	max-width: 540px;
	margin: 10px auto;
	padding: 30px 10px;
	background: var(--bg-items);
	position: fixed;
	top: 0; 
	left: 0;
	right: 0;
	z-index: 10;
	.title {
		font-size: 140%;
    	font-weight: bold;
		text-align: center;
	}
	form {
		max-width: 80%;
		margin: 0 auto; 
		label {
			margin: 20px auto;
			position: relative;
			width: 100%;
			.placeholder {
				margin-left: 20px; 
				position: absolute;
				left: 0;
				top: 17px;
				transition: .2s;
				transition-timing-function: ease;
				transition-timing-function: cubic-bezier(.25,.1,.25,1);
				opacity: .4;
				color: var(--font-color);
				cursor: pointer;
			}
			.input-panel {
				padding: 20px 50px 10px 20px;
				width: 100%;
				border-radius: 4px;
				border: 1px solid var(--under);
				font-size: 110%;
				margin: 0 auto;
				&:focus + span.placeholder, &:not(:placeholder-shown) + span.placeholder { 
					opacity: 1;
					color: var(--extra);
					transform: translateY(-10px) translateX(0);
					font-size: 80%;
				}
			} 
			.hint {
				display: block;
				font-size: 85%;
				margin-top: 5px;
				text-align: left;
				margin-left: 20px;
				position: absolute;
				color: var(--more-font);
			}
		}
		.remember { 
			width: 40%;
		}
		a {
			color: var(--title);
			position: relative;
			left: 115px;
		}
		.button {
			width: 100%;
			text-align: center;
			.btn {
				background: var(--main);
				color: var(--font-color);
				border-radius: 4px;
				padding: 15px;
				border: none;
				transition: .2s;
				cursor: pointer;
				font-size: 120%;
				width: 200px;
				margin: 10px auto 0;
			}
		} 
	}
	.notice {
		border-top: 1px solid var(--under);
		padding-top: 20px;
		margin-top: 30px;
		text-align: center;
		a {
			color: var(--title);
		}
		span {
			font-size: 110%;
		}
		p {
			margin-top: 20px;
			font-size: 90%;
			color: var(--font-other);
			a {
				color: var(--font-other);
    			text-decoration: underline;
				&:hover {
					color: var(--font-color);
				}
			}
		}
	}
}
#order {
	max-width: 540px;
	margin: 10px auto;
	padding: 30px 10px;
	background: var(--bg-items);
	position: fixed;
	top: 0; 
	left: 0;
	right: 0;
	z-index: 10;
	.title {
		font-size: 140%;
    	font-weight: bold;
		text-align: center;
	}
	form {
		max-width: 80%;
		margin: 0 auto; 
		label {
			margin: 20px auto;
			position: relative;
			width: 100%;
			.placeholder {
				margin-left: 20px; 
				position: absolute;
				left: 0;
				top: 17px;
				transition: .2s;
				transition-timing-function: ease;
				transition-timing-function: cubic-bezier(.25,.1,.25,1);
				opacity: .4;
				color: var(--font-color);
				cursor: pointer;
			}
			.input-panel {
				padding: 20px 50px 10px 20px;
				width: 100%;
				border-radius: 4px;
				border: 1px solid var(--under);
				font-size: 110%;
				margin: 0 auto;
				&:focus + span.placeholder, &:not(:placeholder-shown) + span.placeholder { 
					opacity: 1;
					color: var(--extra);
					transform: translateY(-10px) translateX(0);
					font-size: 80%;
				}
			}
			.hint {
				display: block;
				font-size: 85%;
				margin-top: 5px;
				text-align: left;
				margin-left: 20px;
				position: absolute;
				color: var(--more-font);
			}
		}
		.remember { 
			width: 40%;
		}
		a {
			color: var(--title);
			position: relative;
			left: 115px;
		}
		.button {
			width: 100%;
			text-align: center;
			.btn {
				background: var(--main);
				color: var(--font-color);
				border-radius: 4px;
				padding: 15px;
				border: none;
				transition: .2s;
				cursor: pointer;
				font-size: 120%;
				width: 200px;
				margin: 10px auto 0;
			}
		} 
	}
	.notice {
		border-top: 1px solid var(--under);
		padding-top: 20px;
		margin-top: 30px;
		text-align: center;
		a {
			color: var(--title);
		}
		span {
			font-size: 110%;
		}
		p {
			margin-top: 20px;
			font-size: 90%;
			color: var(--font-other);
			a {
				color: var(--font-other);
    			text-decoration: underline;
				&:hover {
					color: var(--font-color);
				}
			}
		}
	}
}
#req {
	max-width: 720px;
	margin: 10px auto; 
	padding: 30px 10px;
	background: var(--bg-items);
	position: fixed;
	height: auto;
	top: 0; 
	left: 0;
	right: 0;
	z-index: 10;
	overflow: scroll; 
	.title {
		font-size: 140%;
    	font-weight: bold; 
		text-align: center;
	}
	p {
		text-align: center;
    	margin: 6px 0;
	}
	form {
		max-height: calc(100vh - 200px);
		overflow: auto;
		text-align: center;
		label {
			margin: 20px 0;
    		position: relative;
			width: 100%;
			.down {
				position: absolute;
				right: 20px;
				top: 25px;
			}
			.placeholder {
				margin-left: 20px;
				position: absolute;
				left: 0px;
				top: 5px;
				transition: .2s;
				transition-timing-function: ease;
				transition-timing-function: cubic-bezier(.25,.1,.25,1);
				opacity: .4;
				color: var(--font-color);
				cursor: pointer;
			}
			.input-panel {
				padding: 30px 50px 10px 20px;
				width: 100%;
				border-radius: 4px;
				border: 1px solid var(--under);
				font-size: 110%;
			}
			input[type=date] {
				padding-top: 24px;
			}
			textarea {
				height: 100px;
				overflow: hidden;
				resize: none;
			}
		}
		.btn {
			background: var(--main);
			color: var(--font-color);
			border-radius: 4px;
			padding: 15px;
			border: none;
			transition: .2s;
			cursor: pointer;
			font-size: 120%;
			width: 200px;
			margin: 10px auto 0;
		}
	}
	.notice {
		border-top: 1px solid var(--under);
		padding-top: 20px;
		margin-top: 30px;
		text-align: center;
		span {
			font-size: 110%;
		}
		p {
			margin-top: 20px;
			font-size: 90%;
			color: var(--font-other);
			a {
				color: var(--font-other);
				text-decoration: underline;
				&:hover {
					color: var(--font-color);
				}
			}
		}
	}
}
#city {
	max-width: 540px;
	margin: 10px auto; 
	padding: 30px 10px;
	background: var(--bg-items);
	position: fixed;
	top: 0;
	
	left: 0;
	right: 0;
	z-index: 10;
	.close {
		position: absolute;
		margin: -45px 0px 0px 480px;
		font-size: 24px;
		cursor: pointer;
		color: var(--font-color);
	}
	.title {
		font-size: 120%;
		
	}
	ul {
		margin-top: 20px;
		padding: 0;
		columns: 3;
		list-style-type: none;
		li {
			label {
				input {
					padding-right: 10px;
				}
			}
		}
	}
	.other {
		input {
			padding: 10px;
			width: 100%;
			margin-top: 10px;
			font-size: 110%;
		}
		.suggest {
			max-height: 200px;
			overflow-y: scroll;
			position: absolute;
			left: 20px;
			right: 20px;
			background: var(--white);
			z-index: 10;
		}
	}
}
#popular {
	background: var(--white);
    margin: 30px 0 50px;
	.section-title {
		font-size: 32px;
   		font-weight: bold;
		&:after {
			content: ' ';
			display: block;
			background: var(--main); 
			width: 120px;
			height: 6px;
		}
		span {
			display: inline-block;
			float: right;
			right: 20px;
			top: 12px;
			font-size: 14px;
			font-weight: normal;
			background: var(--bg-color);
			padding: 2px 6px;
			transition: 1s;
			cursor: pointer;
			&:hover {
				background: rgba(0,0,0,.5);
			}
			a {
				text-decoration: none;
				color: var(--white);
			}
		}
	}
	.categories-list {
		display: flex;
		flex-direction: row;
		margin: 20px 0;
		flex-wrap: wrap;
		justify-content: space-between;
		list-style: none;
		padding: 0;
		li {
			border: 1px solid var(--mini); 
			border-radius: 8px;
			padding: 5px 0;
			text-align: center;
			margin: 5px 0;
			width: 140px; 
			box-shadow: 0 2px 2px 0 rgba(0,0,0,.02);
			cursor: pointer;
			transition: .2s;
			&:hover {
    			box-shadow: 0 2px 16px 0 rgba(0,0,0,.08);
			}
			a {
				text-decoration: none;
				img {
					width: 100px;
				}
				span {
					display: block;
					color: var(--font-color);
					font-size: 90%;
					color: var(--font-other);
				}
			}
		}
	}
}
#items {
	margin-bottom: 20px;  
	.block-categories {
		width: 29%; 
		.sticky-fix {
			position: sticky;
    		top: 100px;
			.block-categories-fix {
			.cat {
				.title {
					background: var(--main-dim) url(../images/icons/dropdown-down.svg) 96% 14px no-repeat;
					color: var(--bg-color);
					font-weight: bold;
					padding: 6px 12px;
					cursor: pointer;
					margin: 4px 0;
					display: block;
					text-decoration: none;
				}
				.selected {
					background: var(--under);
					display:block!important;
				}
				.catlist {
					background: var(--bg-items);
					margin-bottom: 4px;
					list-style: none;
					padding-left: 0;
					li {
						padding: 4px 12px 4px;
						cursor: pointer;
						display:none; 
						&:hover {
							background: var(--more-font);
						}
						a {
							color: var(--font-color);
							text-decoration: none;
						}
					}
				}
				
			}
		}
		}
		.filter {
			.title {
				background: var(--bg-color);
				color: var(--white);
				font-weight: bold;
				padding: 6px 12px;
				margin: 10px 0 4px;
				display: block;
				text-decoration: none;
			}
			.prop-block {
				padding: 6px 2px;
				text-align: left;
				border-bottom: 1px solid var(--bg-details);
				label {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin: 2px 0;
					input {
						padding: 6px 8px;
						width: 50px;
						margin-left: 5px;
						height: 32px;
					}
					select {
						width: auto;
    					padding: 6px 8px;
						height: 32px;
					}
				}
			}
			.is {
				display: block !important;
				.btn-filter-show {
					width: 100%;
					background: var(--main);
					color: var(--font-color);
					border-radius: 4px;
					padding: 8px 20px;
					border: none;
					transition: .2s;
					cursor: pointer;
					font-size: 100%;
					margin: 20px 0 5px;
					&:hover {
						color: var(--white);
						background: var(--bg-color);
						text-decoration: none;
					}
				}
				.filter-reset {
					text-align: center;
					color: var(--extra);
					font-size: 85%;
					display: block;
				}
			}
		}
		.apps-block {
			margin: 20px 0;
			padding-bottom: 10px;
			border-bottom: 1px solid var(--under);
			p {
				font-size: 90%;
				margin: 6px 0;
			}
			img {
				margin-right: 10px;
				margin-top: 5px;
				opacity: .7;
				transition: .5s;
				width: 104px;
				&:hover {
					opacity: 1;
				}
			}
		}
		.html-block {
			margin: 10px 0;
		}
		.requests-list-block {
			margin: 20px 0;
			.fix {
				margin: 0; 
				.orders-all {
					font-size: 80%;
					color: var(--white);
					background: var(--bg-color);
					padding: 2px 6px;
					transition: 1s;
					cursor: pointer;
					text-decoration: none;
					&:hover {
						background: rgba(0,0,0,.5);
					}
				}
			}
			.requests-list {
				background: var(--bg-items);
   				margin-top: 10px;
				.item {
					padding: 10px 0;
					margin: 0 10px;
					border-bottom: 1px solid var(--bg-details);
					.date {
						font-size: 70%;
						color: var(--extra);
						margin-bottom: 4px;
					}
					.info {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 260px;
						font-size: 90%;
					}
				}
			}
		}
	}
	.block-items {
		width: 71%;
		.map {
			width: 100%;
			height: 700px;
			background: var(--bg-details);
			margin-bottom: 10px;
		}
		.show-more {
			display: none;
			width: 100%;
			background: var(--white);
			font-size: 110%;
			padding: 10px 0;
			border: 1px solid var(--under);
			cursor: pointer;
			border-radius: 3px;
			margin-bottom: 20px;
			transition: .2s;
			&:hover {
				background: var(--bg-items);
			}
		}
		.show-more-list {
			display: block;
			width: 100%;
			background: var(--white);
			font-size: 110%;
			padding: 10px 0;
			border: 1px solid var(--under);
			cursor: pointer;
			border-radius: 3px;
			margin-bottom: 20px;
			transition: .2s;
		}
		.tech-card {
			display: flex;
			flex-direction: row;
			margin-bottom: 20px;
			transition: .8s;
			padding: 10px 10px 0;
			background: var(--bg-items);
			&:hover {
				box-shadow: 0 2px 16px 0 rgba(0,0,0,.2);
			}
			a {
				color: var(--bg-color);
    			text-decoration: none;
			}
			.techimg {
				margin-right: 20px;
				background-image: url(/images/no-photo.svg);
				background-size: 100%;
				width: 146px;
    			height: 101px;
					img {
						width: 146px;
    					height: 101px;
					}
			}
			.techinfo {
				.title {
					font-size: 130%;
    				font-weight: bold;
				}
				.category {
					font-size: 90%;
				}
				.props {
					margin: 10px 0;
					color: var(--extra);
					font-size: 80%;
				}
			}
			.techorder {
				width: 250px;
				margin-left: auto;
				padding-left: 10px;
				white-space: nowrap;
				text-align: right;
				margin-bottom: 10px;
				span {
					display: block;
				}
				.price-hour {
					b {
						font-size: 130%;
					}
				}
				.phone {
					top: 3px;
    				position: relative;
				}
				.btn-request {
					background: var(--main);
					color: var(--font-color);
					border-radius: 4px;
					padding: 8px 10px;
					border: none;
					transition: .5s;
					cursor: pointer;
					font-size: 90%;
					margin: 5px 0 0 auto;
					&:hover {
						background: var(--hover-main)!important;
					}
				}
				.btn-show-phone {
					background: var(--bg-details);
    				color: var(--bg-color);
					&:hover {
						background: var(--hover-extra)!important;
					}
					.hiddenspan {
						display:none; 
					}
				}
				.min-time {
					margin: 2px 0 4px;
					font-size: 70%;
					color: var(--extra);
				}
				.date {
					margin: 2px 0 4px;
					font-size: 90%;
					color: var(--extra);
				}
			}
		}
	}
}
#ads {
	padding: 1rem 0;
	background: var(--bg-items);
	h2 {		
   		font-size: 24px;
	}
	p {
		margin: 0;
	}
}

#mainitem {
	.mainblock {
		margin: 30px 0 50px;
		h1 {
			font-size: 32px;
			font-weight: bold;
		}
		.gallery {
			margin-top: 20px;
			.navigation {
				margin: 20px 10px 0;
			}
			.images {
				width: 155px;
				height: 110px;
				margin: 0 14px 0 0;
				img {
					margin: 0 5px;
					width: 155px;
					height: 110px;
				}
			}
		}
		.swiper-pagination {
			position: relative;
			display: inline-block;
			width: 90%;
			margin-left: 15px;
			margin-top: 32px; 
				.swiper-pagination-img {
					.pag {   
						width: 120px;
						float: left;
						margin-right: 16px;
						aspect-ratio: 1.5; 
					}
				}
			}
		.category {
			a {
				color: var(--extra);
			}
		}
		.date {
			margin: 5px 0 15px;
			color: var(--more-font);
			font-size: 90%;
		}
		.imagesblock {
			width: 100%;
			background: url(/images/no-photo.svg);
			height: 512px;
			background-size: contain;
			img { 
				width: 100%;
				object-fit: cover;
				aspect-ratio: 1.4;
			}
		}
		.photo_prev_b {
			float: left;
    		margin: 32px 0;
		}
		.photo_next_b {
			float: right;
    		margin: 32px 0;
		}
		.props {
			margin-bottom: 10px;
    		border-bottom: 1px solid var(--under);
			border-top: 1px solid var(--under);
			padding-top: 10px; 
			margin-top: 20px;
			ul {
				columns: 2;
				li {
					color: var(--more-font);
					span {
						color: var(--font-color);
					}
				}
			}
		}
		.adress {
			margin-bottom: 30px;
    		border-bottom: 1px solid var(--under);
			padding-bottom: 10px;
			a {
				font-size: 90%;
				color: var(--bg-color);
				padding-right: 15px;
				position: relative;
				text-decoration: none;
				float:right;
				padding: 0;
			}
		}
	}
	.sideblock {
		width: 100%;
		.sideblockcontent {
			position: sticky;
			top: 80px;
			.priceblock {
				margin-bottom: 17px;
				margin-top: 25px;
				.price {
					display: block;
					text-align: right;
					span {
						font-weight: normal;
						font-size: 15px;
						color: var(--extra);
					}
				}
				.pricehour {
					font-size: 34px;
					font-weight: bold;
					margin: 0;
				}
				.priceother {
					color: var(--bg-color);
				}
			}
			.buttonsblock {
				.btn {
					display: block;
					width: 100%;
					background: var(--main);
					color: var(--font-color);
					border-radius: 4px;
					padding: 14px 0;
					border: none;
					transition: .5s;
					cursor: pointer;
					font-size: 130%;
					margin: 10px 0;
					&:hover {
						background: var(--hover-main)
					}
				}
				.showphone {
					background: var(--bg-details);
					color: var(--bg-color);
					padding: 10px 0;
					font-size: 120%;
					&:hover {
						background: var(--hover-extra);
					}
				}
				.hiddenspan {
					display:none;
				}
				.hiddenphone .showspan  { 
					display:none!important;
				} 
				.hiddenphone .hiddenspan  {
					display:block!important;
				}
			}
			.clientblock {
				margin-top: 30px;
				.author {
					width: 70%;
    				color: var(--extra);
					float: left;
					.name {
						font-size: 120%; 
    					color: var(--font-color);
						a {
							color: var(--title);
						}
					}
					.type {
						margin-bottom: 5px;
					}
					.info {
						color: var(--extra);
    					font-size: 90%;
					}
				}
				img {
					width: 30%;
					height: 70px;
					border-radius: 35px;
				}
			}
			.share {
				margin-top: 60px;
    			padding-bottom: 20px;
				ul {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					list-style-type: none;
					padding: 0;
					li {
						display: inline-block;
						vertical-align: top;
						margin-top: 0;
						margin-bottom: 0;
						a {
							font-size: 150%;
							color: var(--font-color);
							&:hover {
								color: var(--extra);
							}
						}
					}
				}
			}
		}
	}
}
#similar {
	background: var(--bg-items);
    margin: 0;
	.techsimilar {
		padding: 20px 0;
		h3 {
			color: var(--extra);
			margin-bottom: 15px;
			position: relative;
		}
		.techcard {
			width: 200px;
			margin-right: 10px;
			margin-left: 15px;
			box-sizing: border-box;
			transition: .5s;
			border: 1px solid var(--white);
			img { 
				width: 100%;
			}
			a {
				color: var(--title);
			}
			.info { 
				padding: 10px;
				.title {
					font-size: 110%;
    				font-weight: bold;
				}
				.price {
					font-size: 90%;
    				font-weight: bold;
				}
				.date {
					font-size: 85%;
					margin-top: 10px;
					color: var(--more-font);
				}
			}
		}
	}
}
footer {
	background: var(--bg-color);
    padding: 50px 0 20px; 
    font-size: 90%;
	flex: 0 0 auto;
	.links {
		width: 70%;
		ul {
			columns: 3;
   			margin-bottom: 10px;
			list-style: none;
			padding: 0;
			li {
				margin-bottom: 8px;
				a {
					color: var(--links);
    				text-decoration: underline;
					&:hover {
						color: var(--white);
					}
				}
			} 
		}
	}
	.sn {
		margin-top: 20px;
		a {
			color: white;
			margin-right: 15px; 
			&:hover { 
				color:var(--font-other);
			} 
		}
	}
	.copyright {
		color: var(--links);
		a {
			color: var(--links);
    		text-decoration: underline;
		}
		img {
			transition: .2s;
    		opacity: .5;
		}
	}
	.disclaimer {
		margin-top: 30px;
		font-size: 80%;
		color: var(--extra);
	}
}
#orderformcon {
	margin: 30px 0 50px;
	h1 {
		font-size: 32px;
    	font-weight: bold;
	}
	.orderform {
		background: url(/images/bg.png);
    	padding: 30px 25px;
    	margin-top: 15px;
		.slogan {
			font-size: 125%;
			width: 350px;
			font-weight: bold;
			display: block;
		}
		.techowners {
			display: block;
			margin-top: 20px;
			font-size: 110%;
		}
		.btn-block {
			text-align: center;
    		margin-right: 40px;
			.btnrequest { 
				display: flex;
				width: auto;
				background: var(--main);
				color: var(--font-color);
				height: 50px;
				width: 100%;
				line-height: 50px;
				border: none;
				transition: 0.2s;
				cursor: pointer;
				font-size: 120%;
				border-radius: 4px;
				padding: 0 48px;
				margin: 0; 
				margin-bottom: 10px;
			}
			a {
				color: var(--bg-color); 
			}
		}
	}
}
#breadcrumbs {
	background: var(--mini);
	margin-top: 30px;
	ul {
		display: flex;
		flex-direction: row;
		padding: 5px 0;
		list-style-type: none;
		margin: 0;
		li {
			margin-right: 5px;
   			color: var(--font-color);
			&:after {
				content: '/';
    			padding-left: 5px;
			}
			&:last-child:after {
				content: '';
    			padding-left: 0;
			}
			a {
				color: var(--font-other);
			}
		}
	}
}
#info {
	margin: 40px 0;
    position: relative;
	flex: 1 0 auto;
	.main {
		h1 {
			font-size: 32px;
    		font-weight: bold;
			&:after {
				content: ' '; 
				display: block;
				background: var(--main);
				width: 120px;
				height: 6px;
			}
		}
		.content {
			margin-top: 30px;
			.item {
				padding: 20px 0;
    			border-bottom: 1px solid var(--bg-details);
				b {
					font-size: 120%;
				}
				.date {
					font-size: 70%;
					color: var(--extra);
					margin-bottom: 4px;
				}
				.info {
					font-size: 100%;
				}
			}
		}
		.categories-all-container {
			margin: 30px 0 50px;
			list-style: none;
			padding: 0;
			span {
				display: block;
				a {
					text-decoration: none;
					font-size: 160%;
					color: var(--bg-color);
					font-weight: bold;
				}
			} 
			ul {
				padding: 0;
				columns: 3;
    			margin: 20px 0;
				list-style-type: none; 
				li {
					margin: 10px 0;
					a {
						color: var(--extra);
    					text-decoration: none;
					}
				}
			}
		} 
		.form-block {
			width: 550px;
			.form {
				margin-bottom: 20px;
				margin-right: 30px;
				margin-top: 30px;
				float: left;
				label {
					display: block;
					flex-direction: row;
					margin: 0;
					align-items: center;
					flex-wrap: wrap;
					span {
						font-size: 120%;
						font-weight: bold;
						display: block;
						margin-bottom: 5px;
					}
					select {
						display: block;
						padding: 8px 10px;
						font-size: 110%;
					}
					input {
						width: 240px;
						padding-right: 40px;
					}
				}
			}
			.step-category {
				margin-bottom: 20px;
				.form-title {
					font-size: 120%;
					font-weight: bold;
					display: block;
					margin-bottom: 20px;
				}
				.descr {
					width: 200px;
					float: left;
				}
				input {
					width: 200px;
					height: 30px;
				}
				select {
					width: 200px;
					height: 30px;
    				padding: 2px 10px;
				}
				.imgadd { 
					width: 150px;
					height: 150px;
					border: 1px solid var(--bg-color);
					&:hover {
						border: 3px solid var(--extra);
					}
				}
			}
			.technic-add-save {
				margin: 30px 0 20px;
				padding-top: 30px;
				border-top: 1px solid var(--under);
				.btn-save {
					background: #ffcd11;
					color: #000;
					border-radius: 4px;
					padding: 15px;
					border: none;
					transition: .2s;
					cursor: pointer;
					font-size: 120%;
					width: 200px;
				}
				p {
					margin: 20px 0 0;
					color: var(--extra);
				}
				a {
					color: var(--bg-color);
				}
			}
		}
	}
}
#user {
	.userinfo {
		text-align: center !important;
		width: auto;
		justify-content: center;
		margin: 40px;
		h1 {
			font-size: 32px;
    		font-weight: bold;	
		}
		.usertype {
			color: var(--font-other);
    		
		}
		img {
			width: 120px;
			height: 120px;
			border-radius: 60px;
			margin: 30px;
		}
		.info-block {
			.info {
				color: var(--font-other);
				font-size: 90%; 
			}
		}
		.contacts-block {
			margin: 20px;
			a {
				color: var(--font-color);
			}
		}
	}
}
	.opened {  
	  display: block !important; 
	  transform: translate(0, 0);
	  top: 20%;
		
	}
.hidden-btn {
	display:none;
}
.hiddenphone .showspan  { 
	display:none!important;
} 
.hiddenphone .hiddenspan  {
	display:block!important;
}
.hidden-form {
		max-height: 100px!important;
	transition: max-height 2s;
	.order-form {
		visibility: hidden;
		transition: 0s;
		.btn-request {
			visibility: hidden;
			transition: 0s!important;
		}
	}
	ul {
		visibility: hidden;
		transition: 0.1s;
	}
	}
@media (max-width: 1140px) {
	#top {
		.main-menu {
			li {
				font-size: 100%;
			}
		}
	}
	#form {
		max-height: 440px;
		.order-form {
			.btn-block {
				button {
					padding: 0 29px;
				} 
			}
		}
	}
	#items {
		.block-categories {
			.requests-list-block {
				.requests-list {
					.item {
						.info {
							width: 230px;
							white-space: normal;
						}
					}
				}
			}
		}
	}
	#mainitem {
		.mainblock {
			.imagesblock {
				height: 425px;
			}
			.gallery {
				margin-top: 20px;
				.navigation {
					margin: 10px 10px 0;
				}
				.images {
					width: 125px;
					height: 85px;
					margin: 0 14px 0 0;
					img {
						margin: 0 5px;
						width: 125px;
						height: 85px;
					}
				}
			}
		}
	}
	#orderformcon {
		.orderform {
			.btn-block {
				.btnrequest {
					padding: 0 26px;
				}
			}
		}
	}
}
@media (max-width: 992px) {
	.container {
		width: 960px;
	}
}
@media (max-width: 801px) {
	.container {
		max-width: 720px!important;
	}
	#top {
		.main-menu {
			li {
				font-size: 95%;
			}
		}
	}
	#form {
		max-height: 520px;
		.order-form {
			.btn-block {
				padding: 0;
				button {
					padding: 0 14px;
				}
			}
		}
		.features {
			li {
				span {
					font-size: 80%;
				}
			}
		}
	}
	#items {
		.block-items {
			width: 100%;
		}
	}
	#mainitem {
		.mainblock {
			.imagesblock {
				height: 310px;
			}
			.props {
				ul {
					columns: 1;
				}
			}
			.gallery {
				margin: 20px auto 0;
				.navigation {
					margin: 10px 10px 0;
				}
				.images {
					width: 125px;
					height: 85px;
					margin: 0 14px 0 0;
					img {
						margin: 0 5px;
						width: 125px;
						height: 85px;
					}
				}
			}			
		}
		.sideblock {
			.sideblockcontent {
				.clientblock {
					height: 150px;
				}
				.share {
					margin-top: 0px;
				}
			}
		}
	}
	#orderformcon {
		.orderform {
			.btn-block {
				margin-right: 0;
				.btnrequest {
					padding: 0; 
					justify-content: center;
				}
			}
		}
	}
	.hiddenform {
		max-height: 130px!important;
	}
}
@media (max-width: 602px) {
	.container {
		max-width: 580px!important;
	}
	#top {
		.main-menu {
			li {
				font-size: 95%;
			}
		}
	}
	#form {
		max-height: 520px;
		.order-form {
			.btn-block {
				padding: 0;
				button {
					padding: 0 14px;
				}
			}
		}
		.features {
			li {
				span {
					font-size: 80%;
				}
			}
		}
	}
	#items {
		.block-items {
			width: 100%;
		}
	}
	#mainitem {
		.mainblock {
			.imagesblock {
				height: 310px;
			}
			.props {
				ul {
					columns: 1;
				}
			}
		}
		.sideblock {
			.sideblockcontent {
				.clientblock {
					height: 150px;
				}
				.share {
					margin-top: 0px;
				}
			}
		}
	}
	#orderformcon {
		.orderform {
			.btn-block {
				margin-right: 0;
				.btnrequest {
					padding: 0; 
					justify-content: center;
				}
			}
		}
	}
	.hiddenform {
		max-height: 130px!important;
	}
}
@media (max-width: 480px) {
	.container {
		width: 460px!important;
	}
	.container-b {
		max-width: 440px;
	}
	.dispnone {
		display:none!important;
	}
	#mainitem {
		.mainblock {
			margin: 30px 0 0px;
			.gallery {
				margin: 20px auto 0;
				.navigation {
					margin: 10px 10px 0;
				}
				.images {
					width: 110px;
					height: 80px;
					margin: 0 14px 0 0;
					img {
						margin: 0 5px;
						width: 110px;
						height: 80px;
					}
				}
			}
			.swiper-pagination {
				width: 85%;
				margin-left: 13px;
					.swiper-pagination-img {
						float: left;
							.pag {
								width: 100px;
							}
					}
			}
		}
	}
	#info {
		.main {
			.form-block {
				width: 360px;
			}
			.categories-all-container {
				ul {
					padding: 0;
					columns: 1;
					margin: 20px 0;
					list-style-type: none;
					li{
						margin: 10px 0 0 14px;
					}
				}
			}
		}
	}
	#reg {
		form {
			.remember {
				width: 80%;
			}
			a {
				left: 0;
			}
		}
	}
	#city {
		ul {
			columns: 2;
		}
	}
	header {
		position: sticky;
		top: 0;
		z-index: 9;
		background: var(--font-color);
		height: 50px;
		text-align: center;
		justify-content: center;
		width: 100%;
		.right1 {
			right: 5px!important;
			position: absolute;
		}
		.right2 {
			right: 25px!important;
			position: absolute;
		}
		.mobilelogo {
			margin: 0 auto;
		}
		a {
			text-align: center;
			&:hover {
				text-decoration: none;
			}
		}
	}
	#form {
		text-align: center;
		h1 {
			text-align: center;
		}
		.show-hide-form {
			float: none;
		}
		.order-form {
			.owners {
				text-align: center;
			}
			.slogan {
				text-align: center;
				width: 380px;
				margin: 0 13px;
			}
			.btn-block {
				button {
					margin: 30px auto 10px;
					width: auto;
				}
			}
		}
	}
	#popular {
		.categories-list {
			li {
				width: 210px;
			}
		}
	}
	#orderformcon {
		.orderform {
			text-align: center;
			.slogan {
				width: 100%;
			}
			.techowners {
				margin-bottom: 20px;
			}
			.btn-block {
				.btn-request {
					padding: 0; 
					justify-content: center;
				}
			}
		}
	}
	#items {
		.block-items {
			.tech-card {
				display: block!important; 
				.techimg {
					width: 100%;
					height: 200px;
					img {
						width: 100%;
						height: 200px;
					}
				}
				.techinfo {
					.title {
						text-align: center;
						margin-top: 15px;
					}
					.category {
						text-align: center;
					}
				}
				.techorder {
					text-align: center;
					margin: 0px auto;
    				padding-left: 0px;
					.min-time {
						font-size: 90%;
					}
					.date {
						padding-bottom: 10px;
					}
				}
			}
		}
	}
	footer {
		.links {
			ul {
				columns: 1;
			}
		}
		.aboutus {
			margin-left: 25px;
		}
	}
	.justcon {
		justify-content: center!important;
	}
	.hidden-form {
		max-height: 200px!important;
	}
}
@media (max-width: 415px) {
	.container {
		width: 373px!important;
	}
	.dispnone {
		display:none!important;
	}
	#similar {
		.techsimilar {
			.techcard {
				width: 160px;
			}
		}
	}
	#mainitem {
		.mainblock {
			.imagesblock {
				height: 270px;
			}
			.gallery {
				margin: 20px auto 0;
				.navigation {
					margin: 0px 5px 0;
				}
				.images {
					width: 75px;
					height: 65px;
					margin: 0 14px 0 0;
					img {
						margin: 0 5px;
						width: 75px;
						height: 65px;
					}
				}
			}
			
		}
	}

	header {
		position: sticky;
		top: 0;
		z-index: 9;
		background: var(--font-color);
		height: 50px;
		text-align: center;
		justify-content: center;
		width: 100%;
		.right1 {
			right: 5px!important;
			position: absolute;
		}
		.right2 {
			right: 25px!important;
			position: absolute;
		}
		.mobilelogo {
			margin: 0 auto;
		}
		a {
			text-align: center;
			&:hover {
				text-decoration: none;
			}
		}
	}
	#form {
		text-align: center;
		h1 {
			text-align: center;
		}
		.show-hide-form {
			float: none;
		}
		.order-form {
			.owners {
				text-align: center;
			}
			.slogan {
				text-align: center;
				width: 300px;
				margin: 0 13px;
			}
			.btn-block {
				button {
					margin: 30px auto 10px;
					width: auto;
				}
			}
		}
	}
	#popular {
		.categories-list {
			li {
				width: 170px;
			}
		}
	}
	#items {
		.block-items {
			.tech-card {
				display: block!important;
				.techimg {
					width: 100%;
					height: 200px;
					img {
						width: 100%;
						height: 200px;
					}
				}
				.techinfo {
					.title {
						text-align: center;
						margin-top: 15px;
					}
					.category {
						text-align: center;
					}
				}
				.techorder {
					text-align: center;
					margin: 0px auto;
    				padding-left: 0px;
					.min-time {
						font-size: 90%;
					}
				}
			}
		}
	}
	footer {
		.links {
			ul {
				columns: 1;
			}
		}
		.aboutus {
			margin-left: 25px;
		}
	}
	.justcon {
		justify-content: center!important;
	}
	.hidden-form {
		max-height: 200px!important;
	}
}
@media (max-width: 375px) {
	.container {
		width: 340px!important;
	}
	.dispnone {
		display:none!important;
	}
	#mainitem {
		.mainblock {
			.imagesblock {
				height: 240px;
			}
			.gallery {
				margin: 20px auto 0;
				.navigation {
					margin: 0px 5px 0;
				}
				.images {
					width: 75px;
					height: 65px;
					margin: 0 7px 0 0;
					img {
						margin: 0 5px;
						width: 75px;
						height: 65px; 
					}
				}
			}
		}
	}
	#similar {
		.techsimilar {
			.techcard {
				width: 140px;
			}
		}
	}
	header {
		position: sticky;
		top: 0;
		z-index: 9;
		background: var(--font-color);
		height: 50px;
		text-align: center;
		justify-content: center;
		width: 100%;
		.right1 {
			right: 5px!important;
			position: absolute;
		}
		.right2 {
			right: 25px!important;
			position: absolute;
		}
		.mobilelogo {
			margin: 0 auto;
		}
		a {
			text-align: center;
			&:hover {
				text-decoration: none;
			}
		}
	}
	#form {
		text-align: center;
		h1 {
			text-align: center;
		}
		.show-hide-form {
			float: none;
		}
		.order-form {
			.owners {
				text-align: center;
			}
			.slogan {
				text-align: center;
				width: 260px;
				margin: 0 13px;
			}
			.btn-block {
				button {
					margin: 30px auto 10px;
					width: auto;
				}
			}
		}
	}
	#popular {
		.categories-list {
			li {
				width: 150px;
			}
		}
	}
	#items {
		.block-items {
			.tech-card {
				display: block!important;
				.techimg {
					width: 100%;
					height: 200px;
					img {
						width: 100%;
						height: 200px;
					}
				}
				.techinfo {
					.title {
						text-align: center;
						margin-top: 15px;
					}
					.category {
						text-align: center;
					}
				}
				.techorder {
					text-align: center;
					margin: 0px auto;
    				padding-left: 0px;
					.min-time {
						font-size: 90%;
					}
				}
			}
		}
	}
	footer {
		.links {
			ul {
				columns: 1;
			}
		}
		.aboutus {
			margin-left: 25px;
		}
	}
	.justcon {
		justify-content: center!important;
	}
	.hidden-form {
		max-height: 200px!important;
	}
}
@media (max-width: 320px) {
	.container {
		width: 300px!important;
	}
	.dispnone {
		display:none!important;
	}
	#similar {
		.techsimilar {
			.techcard {
				width: 120px;
			}
		}
	}
	#info {
		.main {
			.form-block {
				width: 315px;
			}
		}
	}
	#mainitem {
		.mainblock {
			.imagesblock {
				height: 190px;
			}
			.gallery {
				margin: 20px auto 0;
				.navigation {
					margin: 0px 4px 0;
				}
				.images {
					width: 65px;
					height: 55px;
					margin: 0 5px 0 0;
					img {
						margin: 0 5px;
						width: 65px;
						height: 55px; 
					}
				}
			}
		}
	}
	header {
		position: sticky;
		top: 0;
		z-index: 9;
		background: var(--font-color);
		height: 50px;
		text-align: center;
		justify-content: center;
		width: 100%;
		.right1 {
			right: 5px!important;
			position: absolute;
		}
		.right2 {
			right: 25px!important;
			position: absolute;
		}
		.mobilelogo {
			margin: 0 auto;
		}
		a {
			text-align: center;
			&:hover {
				text-decoration: none;
			}
		}
	}
	#form {
		h1 {
			text-align: center;
		}
		.show-hide-form {
			float: none;
		}
		.order-form {
			.owners {
				text-align: center;
			}
			.slogan {
				text-align: center;
				width: 220px;
				margin: 0 13px;
			}
			.btn-block {
				button {
					margin: 30px auto 10px;
					width: auto;
				}
			}
		}
	}
	#popular {
		.categories-list {
			li {
				width: 130px;
			}
		}
	}
	#items {
		.block-items {
			.tech-card {
				display: block!important;
				.techimg {
					width: 250px;
					height: 174px;
					img {
						width: 250px;
						height: 174px;
					}
				}
				.techinfo {
					.title {
						text-align: center;
						margin-top: 15px;
					}
					.category {
						text-align: center;
					}
				}
				.techorder {
					text-align: center;
					.min-time {
						font-size: 90%;
					}
				}
			}
		}
	}
	footer {
		.links {
			ul {
				columns: 1;
			}
		}
		.aboutus {
			margin-left: 25px;
		}
	}
	.justcon {
		justify-content: center!important;
	}
	.hidden-form {
		max-height: 200px!important;
	}
}