/* rullan.in.ua  08.02.2022 - made in Ukraine  */
:root {
  --blue: #0d6efd;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #d63384;
  --red: #dc3545;
  --roz: #f64e60;
  --orange: #fd7e14;
  --yellow: #d18c12;
  --brown: #ac2c12;
  --green: #198754;
  --teal: #20c997;
  --cyan: #0dcaf0;
  --white: #fff;
  --light: #989ea6;
  --light2: #56565d;
  --gray: #232730;
  --gray2: #191c22;
  --dark: #1e1d1c;
  --black: #000;
  --fon: #1F2025;
  --font: 'Roboto Condensed', sans-serif;
}
body {padding:0; margin:0;font-size:14px;color:#191817; background:var(--fon); font-family: var(--font); font-weight:inherit;font-style:inherit;border-style:none;min-height: 100vh;text-rendering: optimizeSpeed;scroll-behavior: smooth;}
figure, iframe, media {width:100%;padding:0; margin:0;}
div, section, header, article, main, aside, footer, textarea, input, button, nav, ol, ul, a  {border-style: none;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
table {border:none;border-collapse:collapse;}
td {text-align:left;vertical-align:top;padding:0; margin:0;}
s, u, i {text-decoration:none;font-style:normal;}
/* gipersulku */
a, button {display:inline-block;color: var(--brown);text-decoration:none;cursor: pointer;transition: color .2s ease-in-out;outline:none;}
a:not([class]):hover, button:hover, a:hover  {color:var(--yellow);outline:none;}
a:not([class]):focus, button:focus {color:var(--red);outline:none;}
*:focus{outline:none;}
a:not([class]) {color: var(--brown);text-decoration-skip-ink: auto;} /* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
img {max-width: 100%; display: block;}
/* forma */
input, .combo_field input, #sec_code, .form textarea, #comments {background: #fff; color:var(--gray);  height: 40px; padding:8px; font-size: 14px; border-radius:4px; border: 1px solid var(--gray); }
.form textarea, #comments  {padding:12px;}
input:focus, textarea:focus {cursor:text;}
:focus::-webkit-input-placeholder {color: transparent}  :focus placeholder {color: transparent}
:hover::-webkit-input-placeholder {color: transparent; transition:0.6s;}   :hover placeholder {color: transparent; transition:0.6s;}
/* tipografika */
p {color:var(--light);font-size:18px;line-height:1.4;}
strong, b { font-family: var(--bs-font); font-weight:400;}
em{ font-style: italic; }
ul:not([class]), ol:not([class]) { display:block; color:var(--light);font-size:16px; line-height:1.6; padding:0 0 0 40px; margin:20px 0;} /* стиль для ul и ol, у которых нет class*/
h1, h2, h3, h4, h5, h6, .big-zag {margin:0;padding:0; text-transform:uppercase; text-decoration:none; line-height:1; font-family: var(--font); font-weight:700; color:var(--white);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
h1{font-size:3.2em;}
h2{font-size:2.9em;}
h3{font-size:2.3em;}
h4{font-size:1.8em;}
h5, h6{font-size:1.5em; text-transform:uppercase;}
.zagh2 {background: var(--gray); border-radius:6px; padding:10px 20px;}
.zagh2 h2 {font-size:28px;margin-bottom:5px;}
.zagh2 h5 {font-size:16px;color: var(--light);}
.zagh2 s {color: var(--brown);font-size:2.4em; margin:-3px 20px 0 0;}
/* linia */
hr {margin: 1rem 0;color: inherit;background-color: currentColor; border: 0;opacity: 0.25; height:1px;}
.a-center{text-align: center;vertical-align: baseline;}
/* otstyp */
.clear{display:table; width:100%;min-height:1px;font-size:2px;float:none;clear: both;}.clear:before, .clear:after{float:none;content:"";display: block;height:2px;width:100%;clear:both;}
.str-5 {height:5px;}.str-10 {height:10px;}.str-20 {height:20px;}.str-30 {height:30px;}.str-40 {height:40px;} .str-50 {height:50px;}.str-60 {height:60px;} .str-70 {height:70px;}.str-80 {height:80px;} .str-90 {height:90px;}.str-100 {height:100px;}
/* knopki */
.knp {padding:8px 18px; border-radius: 5px; color: var(--white);font-size:18px;}
.knop {padding:9px 24px; border-radius: 8px; background: linear-gradient(to right,  #d18c12, #ac2c12); text-transform:uppercase; font-size:18px; line-height:1.6; color: var(--white);}
.knop:hover {background: linear-gradient(to left,  #d18c12, #ac2c12);}

/* maket */
.ramka  {overflow-x:hidden;}
.container {margin: 0 auto; width:1200px; max-width:1200px; position:relative;}
/*-- END shablon --*/
.anim-linii div{text-align:center; color:var(--light2); font-size:16px;}
.anim-linii img {margin-top:125px;}
.anim-linii div u {display:block; width:100%;font-size:1.3em; font-weight:700; margin-bottom:5px;}
.anim-linii div p {display:block; max-width:260px; margin:0 auto; text-align:center; color:var(--light2); margin-bottom:5px;}
/*-- FLEX --*/
.row {display:flex; flex-flow: row wrap;justify-content: space-between;}
.row-c {display:flex; flex-flow: row wrap;justify-content: space-evenly; align-self: center; align-items: center; align-content: center;}
/* ====  Дизайн :) ==========*/
#particles-js.header.fullhed {margin-top:20px; height: 80px;}
.fon-hd-top {width:100%;margin:0; position:fixed; top:0; left:0; z-index:295;}
.fonhed {background: var(--gray);}
.header {margin-top:20px; height: 100vh;}
.header s {color: var(--light);}
.particles-js-canvas-el{position:absolute; top:0; left:0;  opacity:.2; z-index:1;  animation: ancanv 11s linear infinite;}
.hd-top {width:1200px; max-width:1200px; margin:0 auto; position:relative;}
.hd-top > div, .foot-nav {border-radius:10px; background: var(--gray); padding:5px 10px;}
.hed-vhlog > span {position:relative;}
.hed-vhlog span:first-of-type {background: var(--gray); height:12px; padding:4px; font-size:11px; border-radius:50%; z-index:7;right:-9px;}
.hed-vhlog span:first-of-type s {font-size:11px;}
.hed-vhlog img {border-radius:5px;}
.hed-vhlog span:last-of-type {background: var(--gray); padding:4px; border-radius:5px; z-index:7;left:-9px;}
.hed-vhlog span:last-of-type u {text-transform:uppercase;color: var(--light); display:block; width:100%;}
.hed-vhlog span:last-of-type i {font-size:10px;background:var(--green);color: var(--light); padding:0 2px; border-radius:3px;}
/* hed-baner  */
.hed-baner {justify-content: space-between; width:100%; position:relative; top:180px; left:0; z-index:4;}
.hdbn-txt {flex:1;}
.hdbn-txt h4{ margin:30px 0; font-size: 20px; font-weight:100;}
.hdbn-shema {width:600px; height:408px; position:relative;}
.hdbn-shema [class*='bg-'] {position:absolute; z-index:3;}
.hdbn-shema > .bg-pdm {position:relative; z-index:2;}
.hdbn-shema .bg-logo_baner {top:60px; right:180px;}
.bg-pdm_romb {top:50px;left:140px; animation: hdromb 3s linear infinite;}
.bg-pdm_romb.vrm2 {top:51px;left:402px;}
.bg-pdm_romb.vrm3 {top:246px;left:100px;}
.bg-pdm_romb.vrm4 {top:254px;left:398px;}
.bg-pdm_kryg {top:160px;left:110px;}
.bg-pdm_kryg.krg2 {top:157px;left:442px;}
.bg-pdm_kryg_svet {top:148px;left:129px; animation: hdkrgsv 2s linear infinite; z-index:5!important;}
.bg-pdm_kryg_svet.krgsv2 {top:142px;left:461px;}
.bg-pdm_romb_svet{top:39px;left:168px; animation: hdrbsvt 2s linear infinite;  z-index:5!important;}
.bg-pdm_romb_svet.rbsvt2{top:244px;left:426px;}
.bg-pdm_kryg_kolo{top:171px;left:129px; animation: hdkrg 2s linear infinite;  z-index:6!important;}
.bg-pdm_kryg_kolo.klsv2{top:169px;left:461px;}

/* ARTICLE */
.article{position:relative; z-index:3;}


/* zirku  */
canvas{display:block;vertical-align:top;}
#particles-js{width: 100%; background: #1f2025;}
/* bl Poloska server  */
.anim-linii > .row-c {flex-flow: row nowrap;}
.texnolog {width:100%; position: absolute; bottom:50px; left:0;}
.texnolog > .row-c {justify-content: space-between;}
.hd-bglang {width:61px;}
.hd-lang {text-align: center; width:58px; color: var(--white); position:absolute; top:0; left:5px;}
.hd-lang a:first-of-type  {margin-top:15px;}
.hd-lang a {margin:5px 0;filter: brightness(0.5);}
.hd-lang a:hover {filter: brightness(1);}
.hdknpnav {margin-top:18px;} 
.hd-lang summary, .hd-lang a, .hd-login summary {cursor: pointer;}
.hd-lang summary, .hd-login summary{display:block; margin:0;}
.hd-lang .material-icons, .hdl-ik2, .hd-lang[open] > summary s, .hd-login summary .hdl-ik2, .hd-login[open] > summary .hdl-ik1 {display:none;}
.hd-lang[open] > summary s.material-icons {display:block!important; color:var(--light); margin:22px 0 10px -5px;}
.hd-login[open] > summary .hdl-ik2 {display:block; color:red;} 
.hed-zakl s, .hed-shop s {font-size:32px;}
.hed-zakl {padding:2px 20px;}
.hed-shop {padding:2px 20px 2px 10px;}
/* menu  */
.navhed { cursor:pointer; border-radius: 10px;background: var(--gray);padding:17px 10px 5px 10px;color:var(--light);font-size:26px; font-weight:400; text-transform:uppercase;}
.openanv .hedmenu, .openanv .opclz s:last-of-type {display:block;}
.opclz s {margin-left:5px; float:right; font-size:32px;}
.hedmenu, .opclz s:last-of-type, .openanv .opclz s  {display:none;}
.hedmenu {position:absolute; top: 55px; border-radius: 10px; padding:15px; margin:0 0 0 -10px; background: var(--gray); z-index:300;}
.hedmenu li {margin:10px; font-size:0.8em;}
.hdlg-txt sub {display:block;width:100%; font-size:13px; font-weight:700; text-transform: uppercase;color: var(--light);margin:0 0 5px 5px;letter-spacing:2px;}
.hdlg-txt u {display:block; width:100%; color: var(--brown); text-transform: uppercase; letter-spacing:1px; font-size:32px; font-weight:bold; margin-bottom: -4px;}
.hdlg-txt u span{color: var(--yellow);}
/* login menu  */
.hd-login { position:relative;}
.hdlogin-menu {position:absolute; top:55px; left:0; color:var(--light); border-radius: 10px; padding:15px;background: var(--gray); z-index:9;}
/* search  */
.hed-search {margin-top:10px; position:relative;}
.hed-search > input {background:none; border-radius:0; padding:2px 33px 2px 0; border:none;border-bottom: 1px solid var(--fon);height:36px; color: var(--light);}
.hed-search > input:focus {font-weight:100;font-size:14px;}
.knp-search {position: absolute; top:-3px; right:-6px; z-index:4; background:none;color: var(--light);}
.knp-search s{ font-size:32px;}


.cat-1 {color: var(--red);}
.cat-2 {color: var(--yellow);}
.cat-3 {color: var(--purple);}
.cat-4 {color: var(--blue);}
.cat-5 {color: var(--green);}
/*-- bl BLOCH --*/
.bloch {display: grid; grid-gap: 20px; grid-template-areas:
    "v1 v1 v2 v3 v3 v3"
    "v1 v1 v4 v4 v7 v7"
    "v1 v1 v5 v6 v7 v7";
}
.bloch-v1 {grid-area: v1; background: var(--gray);}
.bloch-v2 {grid-area: v2; min-height:140px; background:url(../img/bg/blc-f1.png) no-repeat;}
.bloch-v3 {grid-area: v3; background: var(--gray);}
.bloch-v4 {grid-area: v4; background:url(../img/bg/blc-f4.png) no-repeat;}
.bloch-v5 {grid-area: v5; background: var(--blue); }
.bloch-v6 {grid-area: v6; background: var(--purple); }
.bloch-v7 {grid-area: v7; background: url(../img/bg/blc-f7.jpg) no-repeat top right, #000000; padding-right:160px!important;}
.bloch-v1 h4 {color: var(--light);}
.bloch > div {border-radius:10px; padding:20px; color:var(--white);}
.bloch-v5 s, .bloch-v6 s {font-size:30px;}
.bloch-v5 h5, .bloch-v6 h5 {font-size:34px;margin:10px 0;}
.bloch-v5 p, .bloch-v6 p {margin:0; padding:0; font-weight:400;color:var(--white);}
.bloch-v4 a {background:var(--roz); width:160px; margin-top:15px;}
.bloch-v4 a:hover {background:var(--yellow);color:var(--white);}
.bloch-v7 > .row {flex-direction: column; align-self: space-between;height:100%;}
.bloch-v7 a {color:var(--light);font-size:15px;}
.bloch-v7 a s {margin: -2px 0 0 0; float:right; display: block;}
.bloch-v3 a {background: var(--blue); width:110px;}
.bloch-v3 .row {flex-flow: row nowrap; height:100%; align-items: center;}
.bloch-v3 h5 {color: var(--light);}
.bloch-v3 p {margin:0; padding:0; font-weight:400; line-height:1; color: var(--light2);}
.blch-new {margin: 20px 0; padding: 0 0 0 70px;}
.blch-new li {list-style-type:none; position:relative; margin:0;border-left:3px solid var(--gray2); padding: 15px 0 15px 25px;}
.blch-new li::after, .blch-new li::before {content: attr(data-name); font-size:19px; font-weight:700; position: absolute;top:8px;left:-70px;z-index:2;}
.blch-new li::before {content: attr(data-rik);top:24px; left:-68px; letter-spacing:5px;font-size:13px;}
.blch-new li s {font-size:17px;position:absolute;top:15px;left:-9px;z-index:3;}
.blch-new li a {font-size:16px;  font-weight:700;  color: var(--light);}
.zgmindale {text-transform:uppercase; margin-bottom:40px;}
.knikdl .material-icons {font-size:15px; margin-left:5px;}
.knikdl span:first-child {font-size:15px;}


/*-- bl GALEREA --*/
.ard-galereya {padding:0; display: grid; grid-gap: 20px; grid-template-areas:
    "va1 va1 va2 va2 va3 va3 va4 va4"
    "va5 va5 va5 va6 va6 va7 va7 va7";
}
.gal-l1 {grid-area: va1;}
.gal-l2 {grid-area: va2;}
.gal-l3 {grid-area: va3;}
.gal-l4 {grid-area: va4;}
.gal-l5 {grid-area: va5;}
.gal-l6 {grid-area: va6;}
.gal-l7 {grid-area: va7;}

.chomy > div {width:48%;}
.moikont {}
.moikont-fot {width:30%;}
.moikont-text {width:70%;}
.moikont-text  li {list-style-type: none; font-weight:700; margin:20px 0; font-size:1.3em;}
.moikont-text  li s {font-size:19px;}
.planu > dl{display:block; width:31%; color: var(--light);  background:var(--gray); padding:20px; border-radius:10px;}
.planu dt{float:left; text-align:center; width:18%;}
.planu dd{float:right; width:70%;margin:0; padding:0; font-size:16px;}
.planu u {font-size:1.8em; display:block; width:100%;}
.planu s {font-size:49px;}
/*========== RESPONSIV DIZAIN ==========*/
@media (max-width: 1199px) {
.container {margin:0; width:100%; max-width:100%; padding:20px 60px;}
.hd-top {margin:0; width:100%; max-width:100%;}
.bloch {grid-template-areas:
    "v1 v3 v3"
    "v1 v2 v4"
	"v1 v7 v7"
    "v1 v5 v6";
}       


}

/* Small Ekran */
@media (max-width: 1000px) {
.header {height:auto;overflow: hidden;}
.hed-baner {top:0; margin:150px 0 140px 0;}
.hedbl-search {width:50px;}
.hed-baner.row-c > div {width:100%; padding:20px;}
.texnolog {position:relative;}
.hdbn-shema {display:none;}
.anim-linii > .row-c {flex-flow: row wrap;}
.anim-linii > .row-c > div {width:48%;}
.anim-linii > .row-c > .anl-2, .anim-linii > .row-c > .anl-4, .anim-linii > .row-c > .anl-6 {display:none;}
.anim-linii > .row-c > div s {margin:0 auto;}
}

/* Plsnshet */
@media (max-width: 860px) {
.container {padding: 20px;}
.btn-mobmenu {display:block;}
.opclz > span, .hdlg-txt {display:none;}
.hed-vhlog span:last-of-type u {font-size:11px;}
.hedbl-search {width: 40px;}
.hed-search > input {padding: 2px;}
.hed-baner {top:0; margin:110px 0 90px 0;}
.texnolog > .row-c {padding:20px;}
.texnolog > .row-c > s {margin:10px 0;transform:scale(0.7, 0.7);}
.bloch {grid-template-areas:
	"v1 v1"
    "v3 v3"
    "v2 v4"
	"v7 v7"
    "v5 v6";
} 
.ard-galereya {grid-template-areas:
    "va1 va2 "
	"va3 va4"
    "va5 va6"
	"va7 va7";
}
 
}

@media (max-width: 750px) {
.anim-linii > .row-c > div, .chomy.row > div, .planu > dl, .moikont.row-c > div, .foot-nav.row > .fot-logo {width:100%;}
.foot-nav.row > .fot-logo table {width:290px; margin:30px auto;}
.fot-logo h4 {margin-top:0px!important;}
.foot-copir {margin-top:50px!important;}
.foot-nav a {margin:10px 20px!important;}
}

/* Smartfon */
@media (max-width: 540px) {
.hed-vhlog span:last-of-type {display:none;}
}

/* Mini Smartfon */
@media (max-width: 450px) {
.hed-zakl{display:none;}
.hed-shop {padding: 2px 0 2px 10px;}
.navhed {padding: 17px 2px 5px 1px;}
.hd-top > div, .foot-nav {padding: 5px 2px;}
.hdbn-txt h2 {font-size:2em;}

}