body {
	font-family: Rubik;
	color: #555;
	background: url(bg.svg) fixed;
	background-size: cover;
}

header {
	width: 1080px;
	margin: 0 auto;
}

.topHeader {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 2rem;
	padding: 1rem;
}
.logo {
	align-self: center;
}
.logo img {
	width: 70%;
}

.nav {
	display: grid;
	grid-template-columns: repeat(2, auto);
	justify-content: end;
	align-items: center;
	grid-gap: 2rem;
}
.button {
	--width: 210px;
	--height: 50px;
	position: relative;
	display: inline-block;
	width: var(--width);
	height: var(--height);
	text-align: center;
	line-height: var(--height);
	transition: 2s;
}
.button:hover {
	outline: none;
	color: #e5170e;
}
.button:hover .gray {
//	stroke: #e5170e;
	stroke-dashoffset: calc(2 * var(--width) + 2 * var(--height) + var(--height) / 2);
}
.button:hover .orange {
//	stroke: #555;
	stroke-dashoffset: calc(var(--height) + var(--height) / 2);
}
.button__svg, .button__rect {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	fill: none;
}
.button__rect {
	stroke-width: 5px;
	transition: 2s;
}
.gray {
	stroke: #555;
	stroke-dasharray: var(--height) var(--width);
	stroke-dashoffset: calc(var(--height) + var(--height) / 2);
}
.orange {
	stroke: #e5170e;
	stroke-dasharray: var(--height) var(--width);
	stroke-dashoffset: calc(2 * var(--width) + 2 * var(--height) + var(--height) / 2);
}

.nav a {
	text-transform: uppercase;
	text-decoration: none;
	color: #555;
	z-index: 10;
}
.contacts-nav p {
	margin: 0.2rem 0;
}
.contacts-email a {
	text-transform: none;
	border-bottom: 1px solid transparent;
}
.contacts-email a:hover {
	border-bottom: 1px solid #e5170e;
}
.contacts-header a {
	font-weight: 700;
	color: #e5170e;
}
.contacts-header a:hover {
	color: #555;
}
.contacts-social a {
	display: inline-block;
	text-decoration: none;
	padding: 0;
	margin-right: 0.3rem;
}
.contacts-social a img {
	width: 1.5rem;
}
.contacts-social a:hover {
	transform: scale(1.3);
}

.bottomHeader {
	height: 440px;
	background: url(menu-bg.svg) rgba(255, 255, 255, 0.5);
	background-position: 62px 9px;
	box-shadow: 0 0 10px rgba(100, 100, 100, 0.3);
}

#slider { position: relative; }
#slider svg { display: block; position: absolute; }

#menu {
	width: 308px;
	display: grid;
	grid-template-areas:
	"triangle . box1"
	". . box2"
	"box5 box4 box3";
	grid-template-columns: 100px 100px 100px;
	grid-template-rows: 100px 100px 100px;
	grid-gap: 4px;
	transform: translate(536px, 66px) rotate(-45deg);
}
#menu a {
	display: block;
	text-decoration: none;
}
#menu a:hover span.label { color: #f0601e; }
#menu a:hover .box { background-color: #555; }
#menu a:hover .box img { transform: scale(1.3) rotate(45deg); }

.triangle { grid-area: triangle; }
.item1 { grid-area: box1; }
.item2 { grid-area: box2; }
.item3 { grid-area: box3; }
.item4 { grid-area: box4; }
.item5 { grid-area: box5; }

.box, .triangle {
	position: relative;
	width: 100px;
	height: 100px;
	transition: all 0.3s ease-in-out;
}
.triangle::before {
	content: ''; 
	position: absolute;
	left: 208px; top: -104px;
	border: 50px solid transparent;
	border-bottom: 50px solid #f4c331;
	border-left: 50px solid #f4c331;
	z-index: 5;
}
.triangle::after {
	content: ''; 
	position: absolute;
	left: -104px; top: 208px;
	border: 50px solid transparent;
	border-top: 50px solid #e5170e;
	border-right: 50px solid #e5170e;
	z-index: 5;
}
.box img {
	transform: rotate(45deg);
	transition: transform ease-in-out 0.2s;
}
.box1 { background-color: #f4ab2c; }
.box2 { background-color: #f49227; }
.box3 { background-color: #f0601e; }
.box4 { background-color: #eb4617; }
.box5 { background-color: #eb2f13; }
.label {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #555;
}
a.item1 span.label { transform: translateX(7.5rem) rotate(45deg); }
a.item2 span.label { transform: translateX(8rem) rotate(45deg); }
a.item3 span.label { transform: translate(6.5rem, 1.5rem) rotate(45deg); }
a.item4 span.label { transform: translate(4rem, 3rem) rotate(45deg); }
a.item5 span.label { transform: translate(4rem, 3rem) rotate(45deg); }

#main {
	width: 1080px;
	margin: 1rem auto;
}
.content {
	padding: 2rem;
	background: rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 10px rgba(100,100,100,0.3);
}
.content h1:first-child { margin-top: 0; }
.content p:last-child, .content ul:last-child { margin-bottom: 0; }
.content p {
	text-align: justify;
}
i.fa { margin-right: 10px; }
.content p a {
	color: #555;
}
.content p a:hover {
	color: #eb2f13;
}
.content table {
	border-radius: 10px;
	border-spacing: 0;
	text-align: center;
	background: rgb(244,195,49);
background: linear-gradient(133deg, rgba(244,195,49,1) 0%, rgba(229,23,14,1) 100%);
}
.content td {
	border-style: solid;
	border-width: 0 1px 1px 0;
	border-color: #fff;
	padding: 10px;
//	background: #cef;
	color: #fff;
}
.content td:first-child {
//	text-align: left;
}
.content tr:first-child td:first-child {
	border-top-left-radius: 10px;
}
.content tr:first-child td:last-child {
	border-top-right-radius: 10px;
}
.content tr:last-child td:first-child {
	border-radius: 0 0 0 10px;
}
.content tr:last-child td:last-child {
	border-radius: 0 0 10px 0;
}
.content td p {
	margin: 0;
}

.map {
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 60%;
	vertical-align: middle;
	overflow: visible;
}
.map svg {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}
.map path {
	fill: #d1d8e0;
	stroke: #fff;
	stroke-width: 0.3;
	transition: 0.5s;
}
.map path:hover, #hover {
	fill: #4b6584;
//	stroke: #3498db;
}
.map path.active {
	fill: #f0601e !important;
}
.map path.selected {
	fill: #f4c331;
}
.map path.delivery {
	fill: #a5b1c2;
}
.legend {
	position: absolute;
	left: 2rem;
	bottom: 2rem;
}
i.selected {
	color: #f4c331;
}
i.delivery {
	color: #a5b1c2;
}
#hint {
	display:none;
	position: absolute;
	border: 1px solid #555;
	background-color: #fff;
	padding: 0.2rem;
	color: #555;
	transition: 0.5s;
	z-index: 9999;
}
.region {
	position: relative;
	width: 100%;
}
.region-popup {
	display: none;
	padding: 10px;
	min-width: 240px;
	position: absolute;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	z-index: 9999;
}
.region-popup h3 {
	margin: 0;
	color: #e5170e;
}
.distributor p{
	margin: 0.3rem 0;
}


.footer {
	width: 1040px;
	margin: 1rem auto;
	display: grid;
	grid-template-areas:
	"address phone email"
	"disclaimer disclaimer disclaimer";
	grid-template-columns: repeat(3, auto);
	grid-template-rows: auto auto;
	grid-gap: 1rem;
	align-items: center;
}
.footer a {
	font-weight: 400;
	text-decoration: none;
	color: #555;
}
.footer a:hover {
	color: #eb2f13;
}
.footer p {
	margin: 0;
	display: inline-block;
}
.address {
	grid-area: address;
}
.phone {
	grid-area: phone;
	justify-self: end;
}
.email {
	grid-area: email;
	justify-self: end;
}
.disclaimer {
	grid-area: disclaimer;
	border-top: 1px solid #555;
	padding: 1rem 1rem 0;
}

.contacts {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-gap: 2rem;
}

.contacts h4 {
	margin: 0;
	padding: 0.5rem;
	background-color: rgb(128, 128, 128, 0.1);
	border-bottom: 1px solid #555;
}
.contacts p {
	padding: 0 0.5rem;
	font-weight: 400;
}
.contacts a {
	color: #555;
}
.contacts a:hover {
	color: #eb2f13;
}

.productsList {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	grid-gap: 2rem;
	margin-top: 3rem;
	justify-items: center;
}

.product {
	display: block;
	width: 200px;
	position: relative;
	background-color: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1);
}
.product:hover {
	box-shadow: 0 6px 9px rgba(0, 0, 0, 0.3);
	transform: scale(1.1, 1.1);
	color: #fff;
}
.product:hover figure img {
	opacity: 0.7;
}
.product figure {
	margin: 0;
}
.product figure img {
	transition: 0.2s all ease-out;
}
a.product {
	text-decoration: none;
	color: #555;
	font-size: 1.2rem;
	font-weight: 500;
}
.product figcaption {
	background-color: #f4ab2c;
	padding: 1rem;
	text-align: center;
}

.materialsList {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	grid-gap: 0.5rem;
//	align-items: baseline;
	justify-items: center;
}

.material {
	display: grid;
	grid-template-rows: auto 1fr;
	width: 168px;
	padding: 0.5rem;
	background: rgb(28,181,224);
background: linear-gradient(135deg, #1CB5E0 0%, #000851 100%);
	border-radius: 12px;
}
.material figure {
	position: relative;
	margin: 0;
	margin-bottom: -4px;
}
.material figure img {
	width: 168px;
	border-radius: 4px 4px 0 0;
}
.material figcaption {
	position: absolute;
	bottom: -0.5rem;
	right: 1rem;
	text-transform: uppercase;
	padding: 0.3rem;
	background-color: #555;
	color: #fff;
	font-weight: 500;
	font-size: 0.8rem;
}

.additions {
	padding: 1rem;
	padding-top: 1.5rem;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 0 0 4px 4px;
	font-size: 0.8rem;
	color: #333;
}
.additions p {
	text-align: right;
}
.additions p a {
	float: left;
	color: #333;
	text-decoration: none;
	border-bottom: 1px solid #333;
}
.additions p a:hover {
	color: #eb2f13;
	border-bottom: 1px solid #eb2f13;
}

.calc-wrap {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-gap: 2rem;
}
.calc-wrap img {
	width: 256px;
	justify-self: center;
}
.calc-table {
	display: grid;
	grid-template-columns: 1fr auto 0.5fr;
	align-items: center;
	grid-gap: 0.5rem 1rem;
}
.calc-label, .calc-metrics {
	margin: 0;
}
.calculator input[type="text"], select {
	padding: 5px 10px;
	border: 1px solid #ccc;
}
span.total {
	color: #ed1d25;
}

.feedback, .gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	grid-gap: 1rem;
}
.report {
	display: block;
	padding: 1rem;
	width: 300px;
	position: relative;
	background-color: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
a.report {
	text-decoration: none;
	color: #555;
}
a.report:hover {
	background-color: #ddd;
}
div.report-image {
	min-height: 200px;
	background-size: cover;
	background-position: center;
}
.report p {
	text-align: left;
}
.gallery {
	padding: 1rem;
}
.certificates {
	width: 200px;
	float: right;
	margin-left: 2rem;
	margin-bottom: 2rem;
	padding: 1rem;
	background-color: #eee;
	text-decoration: none;
	color: #555;
}
.certificates img {
	display: block;
}
.certificates p {
	text-align: center;
}
.slider {
	width: 90%;
	margin: 0 auto;
}
.slider-item img {
	margin: 0 auto;
}
.slider-item p {
	width: 80%;
	margin: 1rem auto;
	text-align: center;
}




@media only screen and (max-width:420px) {
	header { width: 100%; margin: 0; }
	.topHeader {display: block; text-align: center; }
	.logo img { width: 90%; }
	.nav {display: block; }
	.button {margin: 0.5rem 0;}
	.bottomHeader { height: auto; background: none; box-shadow: none; }
	#slider { display: none; }
	#menu { width: 100%; display: block; transform: none; }
	#menu a { display: grid; grid-template-columns: auto auto; justify-content: start; grid-gap: 1rem; align-items: center; margin-bottom: 0.2rem; }
	#menu a:hover .box img { transform: scale(1.3); }
	.triangle { display: none; }
	.box { width: 50px; height: 50px; }
	.box img { width: 100%; transform: none; }
	span.label { transform: none !important; }
	#main { width: 100%; }
	.content { padding: 1.3rem; }
	.content h1 { font-size: 1.5rem; }
	.content h3 { font-size: 1rem; }
	.map { background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 10px rgba(100,100,100,0.3); padding-bottom: 0;}
	.region-popup {	display: block; position: static; background: none; border-radius: none; box-shadow: none; }
	.certificates { display: block; float: none; margin: 0 auto 1rem; }
	table p { font-size: 0.8rem; }
	.calc-wrap { display: block; font-size: 0.8rem;}
	.calc-wrap img { display: none; }
	.calc-table { grid-template-columns: auto 150px auto; }
	.report { width: auto; }
	.contacts { display: block; }
	.geo { margin-top: 1rem; }
	.footer { margin: 1rem; width: 100%; grid-template-areas: "address" "phone" "email" "disclaimer"; }
	.phone, .email { justify-self: start; }
	#zcwMiniButton { display: none; }
}