/* Desktop first approach */
/* Default styles for desktop */

/* Default vw is ≥ 1440px; max: 1680px */
@media (max-width: 1280px) { /* Small desktop */ }
@media (max-width: 1024px) { /* Tablet landscape */ }
@media (max-width: 768px)  { /* Tablet portrait */ }
@media (max-width: 576px)  { /* Smartphone */ }

[x-cloak] { display: none !important; }

@font-face {
    font-family: 'Roboto Condenced';
    font-weight: normal;
    src: local('Roboto Condensed'),
         url('fonts/RobotoCondensed-Regular.ttf') format("truetype");
}

@font-face {
    font-family: 'Roboto Condenced';
    font-weight: bold;
    src: local('Roboto Condensed Bold'),
         url('fonts/RobotoCondensed-Bold.ttf') format("truetype");
}

:root {
    --white:        white;  
    --almostwhite:  #f5f5f5;
    --gray:         #525252;
    --lightgray:    #e3e3e3;
    --gold:         #fae6bd;
    --orange:       #ff801a;
    --red:          #ff4400;
    --teal:         #4ec3b1;
    --blue:         #194176;
}

.white          { color: var(--white);       }
.gray           { color: var(--gray);        }
.orange         { color: var(--orange);      }
.gold           { color: var(--gold);        }
.lightgray      { color: var(--lightgray);   }
.blue           { color: var(--blue);        }
.red            { color: var(--red);         }
.teal           { color: var(--teal);        }
.almostwhite    { color: var(--almostwhite); }

.bg_white          { background-color: var(--white);       }
.bg_gray           { background-color: var(--gray);        }
.bg_orange         { background-color: var(--orange);      }
.bg_gold           { background-color: var(--gold);        }
.bg_lightgray      { background-color: var(--lightgray);   }
.bg_blue           { background-color: var(--blue);        }
.bg_red            { background-color: var(--red);         }
.bg_teal           { background-color: var(--teal);        }
.bg_almostwhite    { background-color: var(--almostwhite); }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
	/*border: 1px solid black;*/
}

html {
    font-size: clamp(12pt, 1.587vw, 20pt);
}

body {
    font-family: 'Roboto Condenced', sans-serif;
    font-weight: normal;
    color: var(--gray);
    background-color: white;
    line-height: 1.5;
}

/* scale things down */
html { 
	zoom: 0.9;
}

.small {
	font-size: 90%;
}

.smallest {
	font-size: 70%;
}

a {
	color: inherit;
}

.container {
    max-width: min(1440px, 85vw);
    margin: 0 auto;
	overflow: visible;
}

.block {
    padding: 0 min(120px, 7.14vw);
}

p {
    margin-top: clamp(1rem, 2.38vw, 16pt);
}

h1, h2 {
	font-weight: normal;
}

h2 {
	font-size: 140%;
}

h3 {
	font-size: 100%;
	font-weight: bold;
}

ul {
  list-style: none;
}


#bottom_spacer {
	margin-bottom: clamp(80px, 9.5vw, 160px);
}


/* -------------------------------------------------------------- article styles */

.container.article {
	margin-bottom: 6rem;
}

.container.article .header {
	margin-bottom: 3rem;
}

.container.article > h2 {
	margin-top: 2rem;
	margin-bottom: 1rem;
}


/* -------------------------------------------------------------- block hdr */

.block_w_header {
	margin-top: clamp(50px, 7.1vw, 120px);
}

.block_w_header2 {
	margin-top: clamp(50px, 5.9vw, 100px);
}

.block_w_header h1 {
	font-size: clamp(18px, 3.17vw, 40pt);
	margin-right: 1.2vw;
}

.block_w_header2 h2 {
	font-size: clamp(18px, 2.22vw, 28pt);
	margin-right: 1.2vw;
}

.header {
	display: flex;
}

.header > div {
	flex-grow: 1;
	height: clamp(10px, 1.78vw, 30px);
	margin-top: clamp(10px, 1.75vw, 28px);
}

.block_w_header2 .header > div {
	height: clamp(11px, 1.6vw, 24px);
	margin-top: clamp(9px, 1vw, 17px);
}

.header > div:last-child {
	background: linear-gradient(to right, var(--almostwhite), var(--white));
}

.header > div:first-child {
	background: linear-gradient(to left, var(--almostwhite), var(--white));
	left: -20px;
}

/* -------------------------------------------------------------- header */

#header {
	height: min(600px, 35vw);
	background-image: url('images/hdr_bg.svg');
	background-position: calc(50% + 2100px) bottom;
	background-repeat: no-repeat;
}

#header .container {
	height: 100%;
}

.dark-stripe {
    position: absolute;
	left: 0;
    width: min(120px, 7.14vw);
    height: 100%;
    background-color: #00000012;
	z-index: 10;
}

#logo {
	width: 50%;
	padding-top: 14.58%;
}

/* -------------------------------------------------------------- menu */

.feedback {
	text-align: right;
	/*position: absolute;*/
	float: right;
	right: 0;
	padding-top: 16.66%;
	line-height: 2.43;
}

.desktoponly { display: block; }
.mobileonly { display: none; }

#dmenu {
	width: 100%;
	position: absolute;
	bottom: 0px;
}

#dmenu ul {
	display: flex;
	justify-content: space-between;
	gap: 0 20px;
	flex-wrap: nowrap;
}

#dmenu ul li {
	line-height: min(120px, 7.14vw);
}

.submenu {
	margin-top: clamp(40px, 5.9vw, 100px);
}

.submenu ul li {
	display: inline;
	margin-right: clamp(16px, 3vw, 51px);
}


/* -------------------------------------------------------------- banner */

#banner {
	height: 840px;
	background-image: url('images/hdr_bg.svg');
	background-position: calc(50% + 2100px - 489px) top;
	background-repeat: no-repeat;
	line-height: 1.7;
	overflow: hidden;
}

#banner h1 {
	margin: min(120px, 7vw) 0;
	font-size: min(4.34vw, 55pt);
	line-height: 1.3;
}

.banner_cont {
	overflow: visible;
}

#banner img {
	position: absolute;
	right: -770px;
}

@media (max-width: 1680px) {
	#header { height: 27.7vw;	}
	#logo { padding-top: 9.5%; width: 39%; }
	.feedback { padding-top: 9vw; line-height: 3.5vw; }
	#banner { height: max(40vw, 400px); }
	#banner h1 { margin: max(4vw, 40px) 0; font-size: max(3.5vw, 35px); }
	#banner img { right: -41.5vw; width: 120vw; top: max(-4vw, 400px - 44vw); }
}

/* -------------------------------------------------------------- IO20 front page */

#io20_fp .container {
	margin-top: 200px;
	display: flex;
	gap: 0;
}

#io20_fp .container > div {	flex: 1; }

#io20_fp img {
	width: 100%;
}

#io20_fp h1 {
	line-height: 1.4;
	font-size: 46pt;
	margin-top: 86px;
}

#io20_fp .container > div > p:first-child {
	margin-top: 0;
}

#io20_fp .button {
	margin-top: 80px;
	font-size: 125%;
	line-height: clamp(40px, 5vw, 80px);
	width: 240px;
}

#io20_fp .shadow {
	width: 220px;
	height: 10px;
	left: 10px;
}

@media (max-width: 1680px) {
	#io20_fp .container { margin-top: 9.9vw; }
	#io20_fp h1 { font-size: 3.65vw; margin-top: calc(30px + 3.2vw); }
	#io20_fp .button { margin-top: 4.76vw; }
}


/* -------------------------------------------------------------- product small */

#nektarinki .products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 0 40px;
	margin-top: clamp(20px, 2.38vw, 40px);
}

#nektarinki .products a {
	display: block;
	text-decoration: none;
}

.prod_small {
	display: flex;
	align-items: flex-start;
	width: 100%;
}

.prod_small_stripe {
	position: absolute;
	top: 50px;
	border-left: 8px solid var(--orange);
	background: var(--almostwhite);
	height: 64px;
	width: 100%;
}

.prod_small > img {
	/*height: clamp(150px, 16.66vw, 280px);*/
	flex: 0;
	margin-left: 30px;
	max-width: 5rem;
}

.products h2 {
	font-size: 140%;
	line-height: 64px;
	margin-top: 51px;
}

.products p {
	font-weight: bold;
	margin-top: 15px;
}

.prod_small .prod_descr {
	margin-left: 30px;
}

.prod_descr img {
	margin-top: 15px;
}


@media (max-width: 1680px) {
	.prod_small > img {
		margin-top: calc(100px - 5.95vw);
	}
}

/* -------------------------------------------------------------- we produce */

.prod_types {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(481px, 1fr));
	gap: 2rem 0;
	margin-top: 40px;
}

.prod_type { display: flex; }
.prod_type .spacer { flex: 0 0 80px; }
.prod_type > div:first-child { flex: 0; }

.prod_type > div:first-child > div:first-child {
	left: -24px;
	top: 26px;
	width: 200px;
	margin-bottom: 40px;
}

.prod_type > div:first-child > img {
	margin-right: 5px;
}

.prod_type > div:nth-child(2) {
	padding-right: 80px;
}

/* -------------------------------------------------------------- btn */

.button {
	display: block;
	color: var(--white);
	text-align: center;
	background: linear-gradient(var(--orange) 40px, var(--red) 150%);
	z-index: 1;
}

.button:active {
	top: 5px;
}

.shadow {
	background: #00000019;
	z-index: 0;
}

#goto .button {
	margin: 0 auto;
	margin-top: 160px;
	font-size: 165%;
	line-height: clamp(60px, 7.14vw, 120px);
	width: 660px;
}

#goto .shadow {
	margin: 0 auto;
	margin-bottom: 260px;
	width: 630px;
	height: 15px;
}

@media (max-width: 1680px) {
	#goto .button { margin-top: 9.52vw; }
}
@media (max-width: 1280px) {
	#goto .button { width: 480px; }
	#goto .shadow { width: 450px; }
}


/* -------------------------------------------------------------- footer */

#footer {
	height: 680px;
}

#fmenu {
	padding-top: 160px;
	width: 100%;
	z-index: 10;
}

#fmenu ul {
	display: flex;
	justify-content: space-between;
	gap: 0 20px;
	flex-wrap: nowrap;
}

.orange-stripe {
	width: 100%;
	height: 144px;
	position: absolute;
	bottom: 144px;
	left: 0;
	background: var(--orange);
}

.orange-stripe img {
	width: 367px;
	max-width: 33.3%;
	top: -5px;
	flex: 0;
}

.orange-stripe .container {
	display: flex;
	align-items: center;
	height: 100%;
	z-index: 2;
}

.orange-stripe .container div {
	text-align: right;
	line-height: 1.4;
	flex: 1;
}

.footer_bg {
	background: url('images/footer_bg.png');
	background-position: center;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	z-index:1;
}

@media (max-width: 1680px) {
	#fmenu { padding-top: calc(40px + 7.14vw); }
	#footer { height: calc(340px + 20.2vw); }
}

/* ============================================================ about page */

#about_intro .header {
	margin-top: min(8.3vw, 140px);
	margin-bottom: min(5.9vw, 100px);
}

#about_intro img {
	width: 100%;
}

#areas #img1 {
	overflow: visible;
	width: min(38.1vw, 640px);
	height: clamp(230px, 26.2vw, 440px);
	float: right;
	margin-left: min(4.76vw, 80px);
	top: 35px;
}

#areas #img1 img {
	width: min(38.1vw, 640px);
}

#areas #img2 {
	width: 100%;
	margin-top: 10px;
	margin-bottom: -5.5%;
}

.pros_grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-top: min(4.76vw, 80px);
}

.pros_grid > div {
	background: linear-gradient(var(--almostwhite) 80px, var(--white));
	border-left: 20px solid var(--orange);
}

.pros_grid > div > h3 {
	display: block;
	text-align: center;
	line-height: 3;
	text-shadow: 5px 5px 0 white;
}

.pros_grid > div > p {
	font-size: 80%;
	margin: 0 40px;
	margin-bottom: 20px;
}
	
	
#certs .container > div:last-child {
	margin-top: min(5.9vw, 100px);
	text-align: center;
}

#certs img {
	margin: 0 min(3vw, 50px);
}

#about_sbm img {
	float: right;
	margin-left: min(4.76vw, 80px);
	top: 1.78vw;
	width: 50%;
	margin-bottom: min(4.76vw, 80px);
}

#about_sbm {
	margin-bottom: min(9.52vw, 160px);
}

/* ============================================================ contacts */

#contacts h3 {
	margin-top: clamp(50px, 5.9vw, 100px);
}

#contacts #map {
	margin: min(4.76vw, 80px) 0;
	width: 100%;
	height: 25rem;
	border: 1px solid #aaa;
}

.contact_grid {
	display: grid;
	grid-template-columns: 1fr 3fr;
	margin-bottom: clamp(80px, 9.5vw, 160px);
}

.contact_grid p {
	margin: 0;
	line-height: 1.5;
}

.contact_grid p:nth-child(odd) {
	font-weight: bold;
	white-space: nowrap;
	margin-right: 20px;
}

.contact_grid img {
	width: clamp(16px, 3vw, 51px);
	vertical-align: middle;
	margin-right: 1vw;
}

.contact_grid div {
	margin-top: min(4.76vw, 80px);
	margin-right: 20px;
}


/* ============================================================ catalogue */

#catalogue .container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px min(80px, calc(20px + 2.4vw));
	margin-top: clamp(60px, 7.14vw, 120px);
}

#catalogue .container > a {
	display: block;
	text-decoration: none;
}

.product {
	display: flex;
	align-items: flex-start;
}

#catalogue .product .prod_descr {
	flex-grow: 1;
	margin: 0 0 0 5%;
}

.product > img.prod {					/* image */
	/*height: clamp(150px, 19.6vw, 330px);*/
	margin-left: 5%;
	max-width: 6rem;
}

.prod_stripe {
	height: 3rem;
	position: absolute;
	top: 0;
	border-left: 10px solid var(--orange);
	background: var(--almostwhite);
	width: 100%;
}

.prod_descr > img.prod_cat {		/* type */
	margin: 0;
	position: absolute;
	right: calc(10px + 5%);
	top: calc(2.8rem / 4);
	width: clamp(35px, 3.1vw, 52px);
}

.product > img.new {				/* new */
	margin: 0;
	position: absolute;
	left: 1.5rem;
	bottom: 1.5rem;
	width: clamp(90px, 8.39vw, 141px);
}

#catalogue .prod_descr > h2 {
	line-height: 3rem;
}

.prod_descr > h3 {
	/* line-height: 2.62rem; */
	margin: 0.5rem 0;
}

.prod_descr > div {
	display: grid;
	grid-template-columns: auto 1fr;
}

.prod_descr > div p {
	margin: 0;
	line-height: 1.5;
	margin-right: 30px;
	font-size: 0.8rem;
}

.prod_descr > div p:nth-child(even) {
	font-weight: bold;
}

#catalogue {
	margin-bottom: min(320px, calc(150px + 8vw));
}

@media (max-width: 767px) {
	#catalogue .container {
		grid-template-columns: 1fr;
	}
}

/* ============================================================ product item */

#prod_details {
	margin-top: clamp(60px, 7.14vw, 120px);
}

#prod_details .prod_stripe {
	height: 4.5rem;
	border-left: 16px solid var(--orange);
}

#prod_details h2 {
	line-height: 4.5rem;
	font-size: 2rem;
	text-wrap: nowrap;
}

#prod_details h2 img {
	margin: 0 40px 0 0;
	position: inline;
	vertical-align: text-top;
	top: 0.2rem;
	height: 2rem;
}

#prod_details .prod_descr > p {
	margin-top: 1.5rem;
}

#prod_details .prod_descr > p:nth-child(3) {
	margin-top: 2.3rem;
}

#prod_details img {
	cursor: pointer;
}

#prod_details p img {
	cursor: default;
	max-width: 100%;
}

#prod_details img#photo {
	/*height: 23.6rem;*/
	margin-left: 7%;
	/*top: -1.125rem;*/
	display: block;
	max-width: 12rem;
	width: 100%;
}

#prod_details .gallery {
	top: -0.6rem;
	padding-right: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

#prod_details .gallery img {
	display: block;
	width: 4rem;
	height: 4rem;
	object-fit: contain;
	object-position: top center;
	border: 1px solid #eee;
}
	
#prod_details .prod_descr > img.new {	/* new */
	width: 5.5rem;
	top: 1.6rem;
	right: 1rem;
	position: absolute;
	width: clamp(90px, 8.39vw, 141px);
	margin: 0;
}

#prod_details .container,
#prod_specs .container {
	display: flex;
}

#prod_details .container > div:nth-child(2),
#prod_specs .container > div:first-child {
	flex: 333;
	overflow: visible;
	/*text-align: center;*/
}

#prod_details .container > div:last-child,
#prod_specs .container > div:last-child {
	flex: 666;
}

#prod_specs {
	margin-top: 2.5rem;
}

.schematics {
	margin-top: 4.2rem;
}

.schematics > div:first-child {
	text-align: left;
}

.schematics > div:first-child > * {
	width: 13.57rem;
}

.schematics > div:first-child > div {
	text-align: center;
}

#prod_specs .header {
	margin: 5rem 4rem 1.2rem 0;
}

	

#prod_specs ul {
	text-align: left;
	line-height: 4rem;
	margin-left: 1rem;
}

.specs h2 {
	color: var(--teal);
	margin-left: 0.75rem;
	margin-bottom: 2rem;
}
	
.specs table {
	width: 100%;
	font-size: 90%;
	line-height: 200%;
	margin-top: 1.57rem;
	border-spacing: 0;
}

.specs table tr:nth-child(odd) {
	background: #fafafa;
}

.specs table tr:last-child td {
	border-bottom: 1px solid var(--almostwhite);
}

.specs table tr td:first-child {
	border-right: 1px solid var(--almostwhite);
	padding-left: 0.75rem;
	width: 50%;
}

.specs table tr td:last-child {
	padding-left: 1.5rem;
}

img.icon {
	margin: 0 1em 0 0;
	vertical-align: middle;
	height: 2.5em;
}

/* ============================================================ io20 */

#io20_banner {
	margin-top: clamp(50px, 9.52vw, 160px);
}

#io20_banner .container {
	text-align: center;
}

#io20_banner .container > div {
	display: flex;
	width: 100%;
}

#io20_banner .container > div > img {
	display: block;
	flex: 0;
	width: 16.76rem;
}

#io20_banner .container > div > h1 {
	display: block;
	font-weight: bold;
	text-align: right;
	line-height: 1.3;
	font-size: 180%;
	flex: 1;
}

#io20_banner .container > img {
	margin-top: 4.5rem;
	width: min(1600px, 95.24vw);
	left: max(-78px, -4.64vw);
	display: block;
}


#io20_about p {
	padding: 3rem 0;
	margin: 0;
}

#io20_about {
	background-image: url('images/hdr_bg.svg');
	background-position: calc(50% + 2100px) bottom;
	background-repeat: no-repeat;
}


#spheres .container > p {
	margin-top: 2.4rem;
}

.imggrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 60px 5px;
	margin-top: 3rem;
}
@media (max-width: 1300px) {
	.imggrid {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}
}

.imggrid > div {
	overflow: hidden;
}

.imggrid > div > img {
	width: 100%;
	height: 12rem;
	object-fit: cover;
	display: block;
}

.imggrid div.bg_gray {
	background-image: url('images/hdr_bg.svg');
	background-position: calc(50% + 1970px) bottom;
	background-repeat: no-repeat;
	height: 4.5rem;
	display: flex;
	align-items: center;
}

.imggrid p {
	margin: 0;
	padding-left: 1.5rem;
	line-height: 1.4;
	flex-grow: 1;
}

.imggrid .diamond {
	padding-right: 1.5rem;
}


#io20pros {
	margin-top: 5rem;
}

.io20prosgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem 0;
	margin-top: 4rem;
}

.io20prosgrid h2 {
	font-weight: bold;
	line-height: 1.3;
}

.io20prosgrid > div {
	margin-right: 3rem;
}

.io20prosgrid > div > div {
	display: flex;
	align-items: center;
	margin-bottom: 2rem;
}

.io20prosgrid img.icon {
	flex: 0;
	height: 4.125rem;
	margin-right: 2rem;
}

.io20prosgrid img.proto {
	margin: 0 1rem 0.5rem 0;
}


.modflex {
	display: flex;
}

.modflex img {
	flex: 0;
	width: min(760px, 45.23vw);
	left: 1.5rem;
	top: 3.5rem;
}

.modflex canvas {
	flex: 0;
	width: min(760px, 45.23vw);
	left: 1.5rem;
	top: 2.5rem;
}

.modflex > div:first-child {
	margin-right: 3rem;
}

.modflex > div:last-child {
	display: flex;
	align-items: center;
}

.modflex ul {
	margin-left: 1.7rem;
}

.modflex li::before {
    content: "•";
	color: var(--orange);
    position: absolute;
    margin-left: -1.4rem;
    top: -0.8rem;
	font-size: 220%;
}

.modflex p,
.modflex li {
	margin-top: 1.6rem;
}


.topogrid {
	display: grid;
	/*grid-template-columns: 1fr 1fr 1fr;*/
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem;
	text-align: center;
	margin-top: 2rem;
}

.topogrid > div > img {
	display: block;
	width: 100%;
}

.topogrid p {
	display: block;
	width: 100%;
	font-weight: bold;
	margin: 0 0.5rem;
	line-height: 1.1;
}

.topogrid .bg_gray {
	display: flex;
	align-items: center;
	height: 3rem;
	background-image: url('images/hdr_bg.svg');
	background-position: calc(50% + 1970px) bottom;
	background-repeat: no-repeat;
	margin-bottom: 2rem;
}

.topogrid img.diamond {
	position: absolute;
	top: -10px;
	left: calc(50% - 10px);
}


#modif img {
	top: 1.5rem;
	float: right;
	width: min(480px, 28.5vw);
	margin-bottom: 1rem;
}

#modif p {
	margin-top: 2.5rem;
}


#black_promo {
	background-image: url('images/hdr_bg.svg');
	background-position: calc(50% + 1970px) bottom;
	background-repeat: no-repeat;
}

#black_promo .container {
	display: flex;
	padding: 3rem 0;
	margin-top: 6rem;
}

#black_promo #img1 {
	width: min(12.3rem, 328px);
	overflow: visible;
}

#black_promo p {
	flex: 2;
	margin-left: 6rem;
}

#black_promo #img1 img:first-child {
	margin-left: 3.7rem;
	width: 100%;
	top: 0.8rem;
	z-index: 3;
}

#black_promo #img1 img:last-child {
	position: absolute;
	width: min(1330px, 49.875rem);
	bottom: -3rem;
	left: calc(50% - 43rem / 2);
}


#teal_text .container {
	font-size: 140%;
	text-align: center;
	margin-top: 3em;
}

#goto .button.short {
	width: 500px;
}

#goto .shadow.short {
	width: 470px;
}

/* ====================================================================== */