/*= flex12-3D = start = https://github.com/rullan-ardilla/flex12-3D © TM͡๏̯͡๏ rullan.in.ua --[25.08.2025]  2.17rem or 34.7px 
|  🐿️ Ardilla-CMS ☘ 
| ---------------------
| R O O T  */
@import url('https://fonts.googleapis.com/css2?family=Tektur&display=swap');
:root {  
--gap-half: 17.35px;
--gap-halff: 8.67px;
--gap-halfff: 4.33px;
--gap: 34.7px;
--gapp: 69.4px;
--col-1:8.33%; 
--col-2:16.6%; 
--col-3:25%; 
--col-4:33.33%;
--col-5:41.66%;
--col-6:50%;
--col-7:58.33%;
--col-8:66.67%;
--col-9:75%; 
--col-10:83.33%;
--col-11:91.67%;
--col-12:100%;
--gap-1: calc(var(--gap) / 2);
--gap-2: calc((2 * var(--gap)) / 3);
--gap-3: calc((3 * var(--gap)) / 4);
--gap-4: calc((4 * var(--gap)) / 5);
--gap-5: calc((5 * var(--gap)) / 6);
--gap-6: calc((6 * var(--gap)) / 7);
--gap-7: calc((7 * var(--gap)) / 8);
--gap-8: calc((8 * var(--gap)) / 9);
--gap-9: calc((9 * var(--gap)) / 10);
--gap-10: calc((10 * var(--gap)) / 11);
--gap-11: calc((11 * var(--gap)) / 12);
--font-size: 14px;
--txt:#212222;
--fiolet:rgba(167,77,201);
--blue: rgba(9, 149, 212, 0.8);
--suniy: #3F71F0;
--cyan: rgba(53, 220, 220, 0.6);
--purple: rgba(181, 43, 173, 0.8);
--red: rgba(255,28,28);
--pink: rgba(220, 53, 220, 0.8);
--orange-light: rgba(241, 174, 53, 0.8);
--orange: rgba(220, 110, 53, 0.8);
--orange-dark: rgba(132, 64, 32, 0.8);
--yellow: rgba(220, 220, 53, 0.8);
--green: rgba(53, 220, 69, 0.8);
--gray-light: rgba(174, 174, 174, 0.8);
--gray: rgba(128, 128, 128, 0.8);
--gray-dark: rgba(68,68,68);
--fonbg:  rgba(13, 24, 30, 0.3);
--white: rgba(223, 223, 223);
--black: rgba(16, 16, 16, 0.9);
--dark: rgba(0, 0, 0, 0.9);
--txt-input:  rgba(131, 101, 181, 0.9);
--border:  rgba(75, 54, 112, 0.9);
}
.col-1-11{width:100%;}
.col-1-11 > .c-1{width: calc(var(--col-1) - var(--gap-1));}
.col-1-11 > .c-11{width: calc(var(--col-11) - var(--gap-1));}
.col-2-10 > .c-2{width: calc(var(--col-2) - var(--gap-1));}
.col-2-10 > .c-10{width: calc(var(--col-10) - var(--gap-1));}
.col-3-9 > .c-3{width: calc(var(--col-3) - var(--gap-1));}
.col-3-9 > .c-9{width: calc(var(--col-9) - var(--gap-1));}
.col-4-8 > .c-4{width: calc(var(--col-4) - var(--gap-1));}
.col-4-8 > .c-8{width: calc(var(--col-8) - var(--gap-1));}
.col-5-7 > .c-5{width: calc(var(--col-5) - var(--gap-1));}
.col-5-7 > .c-7{width: calc(var(--col-7) - var(--gap-1));}
.col-6-6 > .c-6{width: calc(var(--col-6) - var(--gap-1));}
.col-6-3-3 > .c-6{width: calc(var(--col-6) - var(--gap-2));}
.col-6-3-3 > .c-3{width: calc(var(--col-3) - var(--gap-2));}
.col-3-3-3-3 > .c-3{width: calc(var(--col-3) - var(--gap-3));}
.col-2-2-2-2-2 > .c-2{width: calc(var(--col-2) - var(--gap-4));}
.col-4-4-4  > .c-4{width: calc(var(--col-4) - var(--gap-2));}
.col-2-6-4  > .c-2{width: calc(var(--col-2) - var(--gap-2));}
.col-2-6-4  > .c-4{width: calc(var(--col-4) - var(--gap-2));}
.col-2-6-4  > .c-6{width: calc(var(--col-6) - var(--gap-2));}
.col-1-4-7  > .c-1{width: calc(var(--col-1) - var(--gap-2));}
.col-1-4-7  > .c-4{width: calc(var(--col-4) - var(--gap-2));}
.col-1-4-7  > .c-7{width: calc(var(--col-7) - var(--gap-2));}
.col-3-4-2-3 > .c-3{width: calc(var(--col-3) - var(--gap-3));}
.col-3-4-2-3 > .c-4{width: calc(var(--col-4) - var(--gap-3));}
.col-3-4-2-3 > .c-2{width: calc(var(--col-2) - var(--gap-3));}
.str-1 {height: var(--gap);}.str-2 {height: calc(2 * var(--gap));}.str-3 {height: calc(3 * var(--gap));}.str-4 {height: calc(4 * var(--gap));}.str-5{height: calc(5 * var(--gap));}.str-6{height: calc(6 * var(--gap));}
.row, .row-bc{display:flex; flex-flow: row wrap; justify-content: space-between; gap:var(--gap);max-width:100%;border-style: none; box-sizing:border-box;}
.row-bc {align-items:center; align-content: center;}
.row-ltc {display:flex; justify-content: start; align-items:center; align-content: center; gap:var(--gap);}
.row-c {display:flex; justify-content:center; align-items:center; align-content: center; gap:var(--gap);}
.row-rtc {display:flex; justify-content: end; align-items:center; align-content: center; gap:var(--gap);}
.nowrap {flex-wrap: nowrap;}
/*-----*/
figure, iframe{width:100%;padding:0; margin:0;}
body, div, section, header, article, main, aside, footer, textarea, #video-fon, button, nav, ol, ul, li, a, s, u, i, sup, sub, span, input, textarea{max-width:100%; border-style: none; -webkit-box-sizing:border-box;-moz-box-sizing:border-box; box-sizing:border-box;margin:0; padding:0;}
table {caption-side: bottom;border-collapse: collapse;}
caption {padding-top: 0.5rem;padding-bottom: 0.5rem;color: #6c757d;text-align: left;}
th {text-align: inherit;text-align: -webkit-match-parent;}
tbody, tfoot, tr, td, th {border-color: inherit;border-style: solid;border-width: 0;}
thead{background: var(--blue);}
td, th {border-bottom: 1px solid var(--linia); padding:8px 10px;}
tr:nth-child(even){background: rgba(101, 140, 184, 0.1);}
tr:hover {background: rgba(33, 77, 111, 0.6);}
s{text-decoration:none;font-style:normal;margin:0;}
img {max-width:100%;}
h1, h2, h3, h4, h5, h6, .big-zag {text-transform: uppercase; font-weight: 400;display:inline-block; margin:0;padding:0; text-decoration:none; line-height:1; -webkit-box-sizing:border-box; box-sizing:border-box;}
h1{font-size:2.6em;}
h2{font-size:2.0em;}
h3{font-size:1.7em;}
h4{font-size:1.4em;}
h5{font-size:1.2em;}
p {text-align:justify; margin:0 0 var(--gap-halff) 0; font-size: var(--font-size); line-height: 1.4; letter-spacing: 1px;}
b, strong{font-weight:700;}
.qoute {position:relative; margin: var(--gap-half) 0; line-height:1.3; font-weight:100; padding: var(--gap-half) 0  var(--gap-half) var(--gap); quotes: "\201c" "\201d" "\2018" "\2019"; font-size:1.1em; font-style: italic;border-left: 2px solid var(--red);}
.qoute::before {content: open-quote;font-size:3em; color:var(--red); position:absolute; top:-3px; left:-1px;}
.qoute::after {content: close-quote;font-size:3em; color:var(--red); position:absolute; bottom:-10px; right:10px;height:28px;}
.qoute-v2 {quotes: "\00AB\00A0" "\00A0\00BB";}
.texkontyr {text-shadow: black 1px 1px 0, black -1px -1px 0, black -1px 1px 0, black 1px -1px 0;}
.texkontyr-m {text-shadow: 0px 1px 1px black;}
.shadow {box-shadow: rgb(0 0 0 / 99%) 0px 0px 20px;} 
pre {white-space: pre-wrap; word-wrap: break-word; border-radius:16px; line-height: 1.6; border: 1px dashed var(--gray); padding:15px; color: var(--dark);}
pre s {color: var(--yellow); font-weight:bold; font-size:1.1em;}
a {display: inline-block;color:var(--blue); text-decoration:none;transition: filter 0.3s ease;}
a:hover, button:hover {color:var(--yellow); cursor:pointer;}
a:not([href]):not([class]), a:not([href]):not([class]):hover {color: inherit;text-decoration: none;}
hr {margin: var(--gap-half) 0; height:1px; background-color: var(--blue);border: 0;opacity: 0.7;}
.a-center{text-align: center;width:100%;vertical-align: baseline;}
.nodispl, .wievnot, .none, .hidden{display:none;}
.rel {position:relative;}
.clear{display:block;position:relative;padding:1px 0; width:100%;min-height:1px;font-size:2px;float:none;clear: both;}
select, textarea, input {border-radius:8px; background:rgba(254,254,254); position:relative; font-size:17px; display: inline-block; padding:var(--gap-half) var(--gap-halff); line-height:1; border: 1px solid var(--gray-light);}
select option {border: none; outline: none;}
textarea {height: auto; margin: 0; overflow: auto; vertical-align: top; resize: vertical; }
textarea:focus, select:active, select:focus, .uneditable-input:focus, input:focus, input:active, input:target, input:focus-visible {border-color:var(--fiolet); outline: none;}
input::-moz-placeh:activeolder, textarea::-moz-placeholder, input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { opacity: 0.7; }

label{position:relative; display:inline-block;}
select{padding:6px 16px 6px 6px;}
ul, ol{list-style: none; margin:var(--gap-half) 0; padding:0 0 0 var(--gap-half);}
li{padding:var(--gap-halfff) 0 4px var(--gap-half); font-size: var(--font-size); line-height: 1.2; letter-spacing: 1px;position: relative;}
ul li::after {content:''; width:9px; height:9px; background: var(--gray-dark); border: 1px solid var(--gray-dark); position: absolute;  left: -10px; top:6px; padding:1px; background-clip: content-box;}
ol{counter-reset: list;}
ol li::before {content: counter(list); counter-increment: list; color: var(--gray-dark); position: absolute; left: -10px; top: 4px;}
html {height: 100vh; min-height: 100vh; margin:0; padding:0; background:rgba(254,254,254);}
body {overflow-x: hidden; display:block;min-height: 100%;width:100%!important; max-width:100%!important; font-family: "Tektur", serif; font-optical-sizing: auto; font-size:12px;  font-weight: 100; line-height: 1;}
#ramka, .ramka{max-width: 100%!important; overflow: hidden; position: relative; margin:0;  padding:0;  min-height:100vh;}
.mega{width:1400px;max-width:1400px;margin:0 auto; padding:0;}
.big-zag{display:block; width:100%; text-align: center; margin:0 0 var(--gap) 0; font-size:28px;}
/* end reset */
button{ background:transparent;}
.btn, .btn-2{background:var(--red); font-size:18px; color:var(--white); padding:var(--gap-half) var(--gap); margin:var(--gap) 0; border-radius:8px;}
.btn:hover{background: var(--blue);}
.btn-2{background:#fff; font-size:18px; color:var(--black); border:2px solid var(--red);}
.btn-2:hover{background: var(--blue); border-color:var(--yellow); }
.bold{font-weight:700;}
.relative{position:relative;}