/*=  🐿️ Ardilla-CMS ☘ 
| ---------------------
| R O O T  */
: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:#57423f;
--red: #aa1225;
--pink: #b64396;
--braun: #b9756e;
--orange: #ffe4de;
--yellow: rgba(236, 188, 92);
--blue: #7cb0e0;
--azure: #d5f4ff;
--green: #6a940b;
--grayl: rgba(174, 174, 174, 0.8);
--gray: #a9ad9b;
--grayd: rgba(64, 64, 64, 0.7);
--fon: #f3eed9;
--white: #fff;
--dark: rgba(0, 0, 0, 0.9);
--fongrad_red: linear-gradient(to right top, #aa1225, #c4544c, #dc8578, #efb4a9, #ffe4de);
--fongrad_gray: linear-gradient(72deg, rgba(196,195,196,0.3) 0%, rgba(56,62,62,0.3) 100%);
}
.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-2-3-7  > .c-7{width: calc(var(--col-7) - var(--gap-2));}
.col-2-3-7  > .c-3{width: calc(var(--col-3) - var(--gap-2));}
.col-2-3-7  > .c-2{width: calc(var(--col-2) - var(--gap-2));}
.col-2-2-8  > .c-8{width: calc(var(--col-8) - var(--gap-2));}
.col-2-2-8  > .c-2{width: calc(var(--col-2) - 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;}
/* end| R O O T  -----------------------
.div-3-kolonku{flex: 1 1 calc(33.333% - var(--gap));} 
-------------------------------------- */

/* ⏰  29.08.2025 - CSS-grid: (Flex12-3D)---------------------
|  🐿️ R E S E T  ☘ 
| ------------------------------------------------------------
| Скидання стилів для Flex12-3D */
html, body {min-width: 100%; width: 100%; max-width: 100%;padding:0; margin:0;}
body {background: var(--white); color:var(--txt); font-family: "Tahoma", serif; font-optical-sizing: auto; font-size:12px;  font-weight: 300;line-height:1.15;}
figure, iframe{width:100%;padding:0; margin:0;}
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 {color: var(--pink);text-transform: uppercase; font-family: "Verdana", serif;font-weight: 700;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.0em;}
h2{font-size:1.6em;}
h3{font-size:1.4em;}
h4{font-size:1.2em;}
h5{font-size:1.1em;}
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;}
a:hover, button:hover {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 {position:relative; font-size:14px; display: inline-block; padding: var(--gap-halff); line-height:1; background: var(--fon); color:var(--txt);	border: 1px solid var(--grayl);}
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(--braun); outline: none;}
input::-moz-placeh:activeolder, textarea::-moz-placeholder, input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { opacity: 0.7; }
input{padding:6px 10px; border:1px solid var(--gray); border-radius: 6px; width:100%;}
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); letter-spacing: 1px;position: relative;}
ul li::after {content:''; width:8px; height:8px; background: var(--braun); border: 1px solid var(--braun); position: absolute;  left: -10px; top:6px; padding: 2px; background-clip: content-box;}
ol{counter-reset: list;}
ol li::before {content: counter(list); counter-increment: list; color: var(--braun); position: absolute; left: -10px; top: 4px;}


#ramka, .ramka{width: 1600px; max-width: 1600px; position: relative; margin:0 auto; padding:54px 0 0 0; overflow:hidden;}
button{background-color: var(--fon); color:var(--txt);}
/* приховуємо стрілочки вверх вниз */
input[type="number"] {-moz-appearance: textfield;}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;}