:root { 
   --primary: #17ABF8;
   --secondary: #8C07F7;
   --light: #fff;
   --bg: #fff;
   --dark: #000;
   --gray: #596466;
   --shadow: #ccc;
   --orange: #f27f21;
   --purple: #ea2868;
   --violet: #65308e;
   --line: 1px;
   --rp: 80%; 
   --size: 2.4em;
   --size-small: 1.6em; 
   --br: .3em; 
   --br-round: 50em; 
   --bs: 0 0.5em 1em 0px var(--shadow);
   --bs-hover: 0 0em 1em 0px var(--shadow);
}


@font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter Tight';
   font-style: normal;
   font-weight: 400;
   src: url('../site/fonts/inter-tight-v7-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('../site/fonts/inter-tight-v7-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
@font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter Tight';
   font-style: normal;
   font-weight: 700;
   src: url('../site/fonts/inter-tight-v7-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('../site/fonts/inter-tight-v7-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
@font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter Tight';
   font-style: normal;
   font-weight: 900;
   src: url('../site/fonts/inter-tight-v7-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('../site/fonts/inter-tight-v7-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin:0; padding:0; font-size: 100%; }
*, *::before, *::after { box-sizing: inherit; margin:0; padding:0 }
html, body { background-color: var(--bg); color: var(--dark); font-family: 'Inter', sans-serif; font-weight: normal; line-height: normal; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; position: relative; display: flex; flex-direction: column; height: 100%; justify-content: flex-start; }
img, svg { border: none; display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }

a:link, a:visited, a:active { display: inline-block; text-decoration: none; cursor: pointer; color:var(--dark); }
a:hover, a:focus { cursor: pointer;  text-decoration: underline; }
a:focus { outline-offset: 2px; outline: var(--line) dashed var(--secondary); }
a:link img, a:visited img, a:hover img, a:active img { border: none; }

button { background-color: var(--light); }

.skip-link { background: var(--light); color: var(--dark); left: 50%; padding: 1em 2em; font-size: 1.4  em; position: absolute; transform: translateY(-100%); transition: transform 0.3s; text-decoration: none; z-index: 5 }
.skip-link:focus { transform: translateY(0%); }

#i3m-up { bottom: 30%; right: 1.4em; position: fixed; text-decoration: none; z-index: 50; width: 3em; height: 3em; border-radius: 50%; overflow: hidden; box-shadow: var(--bs); background-color: var(--light); padding: .5em; }
#i3m-up svg { width: 100%; height: auto; stroke: var(--dark); }

.close, .c { border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: transform 0.3s ease-in-out 0.3s; height: 3em; width: 3em; border: 0; padding: .5em; }

h1, h2, h3, h4, h5, h6 { letter-spacing: -.05px; line-height: 1.2; padding: 0; margin: 0; position: relative; font-weight: 900; color: var(--dark); }
h1 { font-size: 3.1rem; } 
h2 { font-size: 2.6rem; }
h3 { font-size: 2.2rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.4rem; }
h6 { font-size: 1.2rem; }

.title11 { font-size: 9em; font-family: 'Intro', sans-serif;  background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 4px transparent; color: var(--light); line-height: 1; padding-bottom: 2rem; overflow: hidden; position: relative; }
.title11::before { content: attr(data-title); position: absolute; top: -1px; }

.title { font-size: 9em; text-shadow: 1px 1px var(--primary), -1px -1px var(--secondary); overflow: hidden; }
/* .title::after { content: attr(data-title); position: absolute; top: -2px; left: -3px; text-shadow: none; color: yellow; z-index: 0; } */

p { line-height: 180%; padding: 0 0 1em 0; }
p:last-of-type { padding-bottom: 0; }
mark, .mark { color: var(--light); background: var(--primary); background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); display: inline-block; padding: 0 .2em; line-height: 1;
 border-radius: var(--br); }

hr, .hr, .divider, hr.wp-block-separator { display: block; clear: both; margin: var(--size-small) 0; min-height: 1px; border: none; background-color: var(--dark); position: relative; }

ul, ol, dl { padding: 1em 0; line-height: 1.8; list-style-type: none; list-style-position:inherit; }
ul.no-padding-block, ol.no-padding-block, dl.no-padding-block, p.no-padding-block { padding: 0; }
ul:only-child, ul:last-child, ol:only-child, ol:last-child, dl:only-child, dl:last-child { padding-bottom: 0; margin-bottom: 0; }

.bold { font-weight: 700;}

header, main, footer, #app-nav, #overlay { font-size: 1rem; }
main { flex: 1 1 auto; }

footer, #footer { background-color: var(--dark); color: var(--light); text-align: center; border-top-left-radius: var(--br); border-top-right-radius: var(--br); }
footer a, #footer a { color: var(--light); margin: 0 1em; }
footer hr { background-color: var(--light); }

.gray { display: block; color: var(--gray); }
.large-text { font-size: 1.4em; }
.larger-text { font-size: 1.8em; }

.noscroll { overflow: hidden; }
.row { display: block; clear: both; padding: 0; margin: 0; }
.rp  { margin: 0 auto; padding: 0; position: relative; width: var(--rp, 90%); z-index: 2; }
.push, .ars-hr { position: relative; padding-bottom: var(--size); }
.ars-hr { opacity: .5; }
.sc-only { display: none !important; }
.hidden, .is-hidden, a.is-hidden, .link-discernible-name, .sc-show, .stobs, .i-ctrl { display: none !important; }

.fl, .fl-m-n { float: left; } .fr, .fr-m-n { float: right; }
.pbox { min-height: 40vh; padding-bottom: var(--size); }
.pb {padding-bottom: calc( var(--size) * 2 )} .pbs { padding-bottom: var(--size-small); }
.mb {margin-bottom: calc( var(--size) * 2 )} .mbs { margin-bottom: var(--size-small); }
.pt {padding-top: calc( var(--size) * 2 )} .pts { padding-top: var(--size-small); }
.mt {margin-top: calc( var(--size) * 2 )} .mts { margin-top: var(--size-small); }
.tc, .has-text-align-center, .aligncenter {text-align:center} .tl, .tl-m-c, .has-text-align-left, .alignleft {text-align:left} .tr, .tr-m-c, .has-text-align-right, .alignright {text-align:right}
.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.w100{width:100%}.w90{width:90%}.w80{width:80%}.w75{width:75%}.w70{width:70%}.w66{width:66%}.w60{width:60%}.w50{width:50%}.w40{width:40%}.w33{width:33.3%}.w30{width:30%}.w25{width:25%}.w20{width:20%}.w10{width:10%}
.w90m{width:90%}.w80m{width:80%}.w75m{width:75%}.w70m{width:70%}.w66m{width:66%}.w60m{width:60%}.w50m{width:50%}.w40m{width:40%}.w33m{width:33.3%}.w30m{width:30%}.w25m{width:25%}.w20m{width:20%}.w10m{width:10%}

.i-flex { display: flex; justify-content: space-between;  }
.i-flex.gap { gap: var(--size-small) }
.i-flex.center { align-items: center; }
.i-flex.jcenter { justify-content: center; }
.i-flex .if-item { position: relative; }
.i-flex .if-item.if-grow { flex-grow: 1; }
.i-flex .if-item.ac, .i-flex.ac { text-align: center; justify-content: center; }
.i-flex .if-item.al, .i-flex.al { text-align: left; justify-content: flex-start; }
.i-flex .if-item.ar, .i-flex.ar { text-align: right; justify-content: flex-end; }
.i-flex.s-v-c { align-items: stretch;}
.i-flex.s-v-c .if-item { display: flex; align-items: center; }
.i-flex.s-v-c .if-item > :first-child { align-items: center;}
.i-flex .if-item.half { flex-basis: 50%; flex-grow: 0; flex-shrink: 1; }
.i-flex .if-item.third { flex-basis: 33.333%; flex-grow: 0; flex-shrink: 1 }

/* Header */
header .i-flex { padding-bottom: calc( var(--size-small) / 2 );}
img.logo { max-width: 12rem; }
.invert { filter: grayscale(1) brightness(0) invert(1); }
.hero { height: 80vh; display: flex; flex-direction: column; justify-content: space-evenly; }

.product-list .product { border-bottom: var(--line) solid var(--gray); padding: var(--size-small) 0; }
.product-list .product:last-child { border-bottom: 0 }
.product-list .product .summary { font-weight: 700; font-size: 1.2em; cursor: pointer; background-image: url('site/plus.svg'); background-repeat: no-repeat; background-position: center right; }
.product-list .product.on .summary { background-image: url('site/minus.svg'); }
.product-list .product .desc { padding-top: var(--size-small); color: var(--gray); }
.product-list .product .desc .tags { background-image: url('site/tag.svg'); background-repeat: no-repeat; background-position: center left; padding-left: 1.4em; font-size: .86em; }

.box { padding: var(--size); box-shadow: var(--bs); border-radius: var(--br); color: var(--gray); flex: 1 1; display: flex; flex-direction: column; gap: 1em; position: relative; overflow: hidden; align-items: center; }
.box:hover { box-shadow: var(--bs-hover); }
.box .title { display: flex; gap: 1em; align-items: start; font-size: 1.2em; justify-content: space-between;  }
.box p { font-size: .86em; }

.location { background-image: url('site/map.svg'); background-repeat: no-repeat; background-position: center 5em; background-size: cover; }

/* cookies */
#i-cookies { position: fixed; z-index: 200; width: 100%; bottom: var(--size); }
.no-js #i-cookies { display: none; }
#i-cookies #ecl-holder { color: var(--gray); width: 100%; padding: 1em 2em; position: relative; background-color: var(--light); box-shadow: var(--bs); border-radius: var(--br); line-height: 1.8; border: var(--line) solid var(--primary-shade); }
#i-cookies #ecl-holder::before { content: "!"; position: absolute; left: 0em; font-size: 2rem; width: 1em; height: 1em; line-height: 1em; background-color: var(--dark); color: var(--light); }
#i-cookies #ecl-holder a.link + a { margin-left: 1.4em; }
#i-cookies #ecl-holder a#ecl-close, #i-cookies #ecl-holder a.privacy-cookies-link { color: var(--primary) }
#i-cookies #ecl-holder .short { margin: 0; padding: 0 1em; text-align: justify; }
#i-cookies #ecl-holder .cookies-options label { padding: .3em .5em; display: inline-block; margin-bottom: 0; }
#i-cookies #ecl-holder .actions { border-top: var(--line) solid var(--primary-light); padding-top: 1em; margin-top: 1em; margin-left: -2em; margin-right: -2em; }
#i-cookies #ecl-holder.accepted { display: none; }

/* side menu */
#side-menu { height: 100vh; width: 100%; position: fixed; top: 0; right: 0; z-index: 95; transform: translatex(100%); transition: transform 0.3s ease-in-out; }
#side-menu .holder { height: 100vh; width: 40%; background: var(--light); position: fixed; top: 0; right: 0; padding: var(--size); z-index: 2; display: flex; flex-direction: column; transition: transform 0.3s ease-in-out, box-shadow 0.3s; }
#side-menu.active { transform: translatex(0); }
#side-menu.active .holder { transform: translatex(0); box-shadow: var(--bs); }
#side-menu .wd3-backdrop { position: relative; z-index: 1; width: 100%; height: 100%; }
#side-menu #wd3-menu-close { position: absolute; left: -1.5em; top: var(--size); transform: translatex(100%) rotate(180deg); }
#side-menu.active #wd3-menu-close { transform: translatex(0) rotate(0deg); }
#side-menu .for-user ul li { border-bottom: var(--line) solid var(--dark); padding: 1em 0; }
#side-menu .for-user ul li:last-child { border-bottom: none; }
#side-menu .contacts { border: var(--line) solid var(--gray); padding: 1em; margin-bottom: 2em; }

body.debug::before { font-size: 10px; font-family: sans-serif; position: fixed; right: 0px; top: 0px; z-index: 545; margin: 0; padding: 3px; background-color: aquamarine; color: red; line-height: 1; }
body.debug .tmpl { background-color:rgba(0,0,0,.8);color:yellow;font-size:.66em;top:0;z-index:90;padding:.3em; word-break: break-word; display:inline-block; margin:.3em }
@media screen and (min-width:1080px) { body.debug::before { content: ">1280"; } }
@media screen and (min-width:960px) and (max-width:1080px) { body.debug::before { content: "#960"; } body.debug .rp { background-size: 92px 80px; }
   html { font-size: 94%; } .cards { flex-wrap: wrap; } .cards .card { flex: 1 1 40%; }
}
@media screen and (max-width:960px) { body.debug::before { content: "#300"; } body.debug .rp { background-size: 50px 80px; }
   html { font-size: 86%; }
   :root { --rp: 100%; }
   .push, .ars-hr { margin-left: 3%; margin-right: 3%; }
   .hero { height: auto;}
   .m-columns { flex-direction: column; }
   .tr-m-c { text-align: center; }
   .w90m,.w80m,.w75m,.w70m,.w66m,.w60m,.w50m,.w40m,.w33m,.w30m,.w25m,.w20m,.w10m{width:100%}
   #side-menu .holder { width: 90%; }
   .title { margin-left: -.2em; }
}