/* Сетки */

@supports not (grid-area: auto) {
	body, footer {
		max-width: 100%;
		margin: 0 auto;
	}
}

body {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	align-content: flex-start;
}

body > svg {
	display: none;
}

header {
	width: 100%;
	display:flex;
	align-items: center;
	justify-content: center;
}

header .wrapper {
	width: 1600px;
	height: 120px;
	display:flex;
	align-items: center;
	justify-content: space-between;
}

header .wrapper .logo, 
header .wrapper .logo svg {
	width: 210px;
	height: 42px;
}

header .wrapper ul.menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	margin: 0;
	height: 120px;
}

header .wrapper ul.menu li {
	display: flex;
	justify-content: center;
	align-items: center;
}

header .wrapper ul.menu li a {
	padding: 47px 30px;
}

header .wrapper .connect {
	white-space: nowrap;
	display:flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
}

header .wrapper .connect a {
	display: block;
	padding: 12px 28px;
}

header .wrapper .ham {
	display: none;
}

section.promo {
	width: 100%;
	height: 960px;
	display:flex;
	align-items: center;
	justify-content: flex-start;
	background: url(/img/promo_bg.jpg) no-repeat 0 0;
	background-size: cover;
}

section.promo .wrapper {
	margin: -140px 0 0 140px;
	width: 34%;
}


main {
	width: 100%;
	min-height: 66vh;
	display: flex;
	justify-content: center;
}

main .wrapper {
	width: 1300px;
}

section.products {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: auto;
	padding: 20px;
	gap: 13px;
}

section.products .card {
	display: flex;
	flex-direction: column;
	position: relative;
	justify-content: space-between;
}

section.products .card .card_title h2 a::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

section.products .card .card_img {
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	/* position: relative; */
}

section.products .card .card_img img {
	width: 100%;
	padding: 8px;
}

section.products .card .card_img_features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto;
	align-items: start;
	padding: 20px;
	/* gap: 20px; */
	z-index: 2;
	opacity: 0;
}

section.products .card:hover .card_img_features {
	opacity: 1;
	transition: all 0.2s ease-in allow-discrete;
}

section.products .card .card_img_features img {
	width: 64px;
	/* opacity: 0; */
}


section.products .card .card_title h2, 
section.products .card .card_title p  {
	text-align: center;
	padding: 0 20px;
}

section.products .card .card_title h2 {
	font-size: 16px;
	font-weight: 700;
}

section.products .card .card_title p {
	font-size: 14px;
	font-weight: 400;
}

section.products .card ul.card_features {
	font-size: 12px;
	font-weight: 400;
	font-style: italic;
	padding: 0 18px;
}

.box5050 { 
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	align-items: start;
	padding: 0 20px;
	gap: 80px;
}

.box5050 figure {
	width: 100%;
	text-align: center;
	    position: relative;
		margin: 0;
}


p.col2 {
	text-align: justify;
	/* column-count: 2; */
	/* gap: 48px; */
}


ol.breadcrumbs {
	padding: 0 0 16px 0;
	margin: 0;
}

ol.breadcrumbs li {
	list-style: none;
	padding-left: 0;
	display: inline;
	position: relative;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 27px;
}

ol.breadcrumbs li:not(:first-child) {
	padding-left: 24px;

}

ol.breadcrumbs li a {
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
	margin-right: 4px;
	text-decoration: none;
}

ol.breadcrumbs li span {
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
	color: unset;
	display: unset;
	white-space: nowrap;
}

.breadcrumbs a:after {
	content: '';
	width: 18px;
	height: 18px;
	right: -17px;
	top: 1px;
	position: absolute;
	background: url(/img/chevron_right.svg) no-repeat center center;
}

.footnote {
	text-align: right;
	padding: 1em 0 0 0;
	margin: 1em 0;
	font-style: italic;
}

figure {
	margin: 0 auto 1.5em auto;
	position: relative;
	width: 100%;
	text-align: center;
}

figure img {
	max-width: 100%;
	height: auto;
}

/* .info_box, */
.table-responsive {
	display: block;
	max-width: 100%;
	overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
}

table {
	border: none;
	border-spacing: 0 0;
	margin: 0 auto 1.5em auto;
	min-width: 100%;
}

table thead th {
	padding: .3em .5em;
	font-weight: normal;
	font-style: italic;
	text-align: center;
}

table td {
	padding: .3em .5em;
}

table tr.header td {
	font-weight: 700;
	text-align: center;
}

table tr td.nowrap, 
table tr th.nowrap {
	white-space: nowrap !important;
}

.docs table td:nth-child(1) { width: 60%; }
.docs table td:nth-child(2) { width: 20%; }
.docs table td:nth-child(3) { width: 10%; }
.docs table td:nth-child(4) { width: 10%; text-align:center; }

.contact {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto;
	gap: 13px;
	margin: 32px 0;
}

.contact .card {
	padding: 24px;
}

.contact .card p {
	margin-bottom: 0;
}

footer .wrapper .logo, 
footer .wrapper .logo svg {
	width: 195px;
	height: 39px;
	fill: var(--white);
}


/* header .wrapper ul.menu .dropbtn { 
	display: inline-block;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

header .wrapper ul.menu li.dropdown {
	display: inline-block;
}

header .wrapper ul.menu .dropdown-content {
	display: none;
	position: absolute;
	min-width: 160px;
	z-index: 1;
}

header .wrapper ul.menu .dropdown-content a {
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

header .wrapper ul.menu .dropdown:hover .dropdown-content {
	display: block;
}
*/


section.form {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 128px 0;
}

section.form .wrapper {
	width: 900px;
	background: var(--white);
	padding: 32px 64px;
}


section.form input[type=text],
section.form input[type=email],
section.form textarea {
	width: 100%;
	display: block;
	margin: 12px 0;
	padding: 8px 16px;
}


button {
	outline: none;
	padding: 12px 16px;
	margin: 8px 0;
}

section.graybox {
	width: 100%;
	display:flex;
	align-items: center;
	justify-content: center;
	padding: 64px 0 20px 0;
}

section.graybox .wrapper {
	width: 1300px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	gap: 13px;
}


section.graybox .wrapper .foto {
	position: relative;
	width: 643px;
}

section.graybox .wrapper .card_img_features {
	position: absolute;
	z-index: 2;
	right: 22px;
	display: flex;
	flex-direction: column;
}

section.graybox .wrapper .card_img_features img {
	padding-bottom: 12px;
}

section.graybox .wrapper .foto {
	padding: 0 120px 20px 20px;
}

section.graybox .wrapper .foto .fotorama {
	max-width: 485px;
	width: 485px;
	min-width: 485px;
}

section.graybox .fotorama {
	/* background: green; */
}

section.graybox .desc {
	padding: 0 20px 20px 0;
	/* background: red; */
}

section.graybox .desc ul {
	margin-left: 18px;
}

section.graybox .desc a {
	display: inline-block;
	padding: 12px 28px;
}



footer {
	width: 100%;
	display:flex;
	align-items: center;
	justify-content: center;
	padding: 32px 0;
}


footer .wrapper {
	width: 1100px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

footer .wrapper figure img {
	width: 195px;
}

footer .wrapper ul {
	margin: 0;
	display: flex;
	gap: 64px;
}

footer .wrapper .connect > a {
	display: block;
}