/* Change 2026/05/24 */ /*-----------*/
/* 2.1 typo -----*/
/*-----------------------------------*/
main {flex:1 0 auto; width:100%;}
footer {flex:0 0 auto; width:100%}
section {width:100%;}
a {text-decoration:none; color: var(--clr-m); font-size:unset}
a:hover {text-decoration: none; color:#aaa;}
strong {}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
article h2, article h3, article h4, article h5, article h6 {margin:2em 0 1.5em; line-height:1.5em; font-weight: 600;}
h1 {font-size:2em; margin:2em 0 1.5em; width:100%; font-weight:700; text-transform:uppercase; display:flex; align-items:center;}
h2 {font-size:1.5em; font-weight:600;}
h3 {font-size:1.25em; font-weight:600;}
h4 {font-size:1.25em; color:var(--clr-m);}
h5 {font-size:1.125em;}
h6 {font-size:1em;}
img {max-width:100%; vertical-align: middle; border: 0; height: auto}
a img {border: none;}
figure {margin:0px; margin-top: var(--mrg-f); margin-bottom:20px}
iframe {width: 100%}
audio, canvas, video {display: inline-block;}
audio:not([controls]) {display: none;height: 0;}
[hidden], template {display: none;}
abbr[title] {border-bottom: 1px dotted;}
b, strong, em {font-weight:600; font-size:1em; color: inherit;}
dfn {font-style: italic;}
mark {background:var(--clr-m); color:var(--clr-b);}
code, kbd, pre, samp {font-size: 1em;}
pre {white-space: pre-wrap;}
q {quotes: "\201C" "\201D" "\2018" "\2019";}
q, blockquote {quotes: none;}
blockquote {margin:30px 0 30px 15px; padding-left:15px; position:relative; font-style:italic; font-weight:300; border-left:2px solid #39F;}
q:before, q:after, blockquote:before, blockquote:after {content: ""; content: none;}
small {font-size: 80%;}
sub, sup {position: relative; vertical-align: baseline;font-size: 75%;line-height: 0;}
sup {top: -.5em;}
sub {bottom: -.25em;}
svg:not(:root) {overflow: hidden;}
ol, ul, li {list-style: none;}
ul {padding-left:1.2em}
ol {padding-left:0.5em}
li ol {padding: 0}
ol {list-style-type: none; counter-reset: item; margin: 0; padding: 0;}
ol > li {display: table; counter-increment: item;}
ol > li:before {content: counters(item, ".") ". "; display: table-cell; padding-right: 0.3em;}
li > ul, li > ol, ul > ul, ol > ol{margin-top:0px}
li ol > li {margin: 0;}
li ol > li:before {content: counters(item, ".") " ";}
table {border-spacing:0; border-collapse: collapse; margin:0 auto; background:white; border-radius:6px; overflow:hidden; margin-top:var(--mrg-f); max-width:100%; position:relative; word-break: break-word;}
td {border:0.5px solid #000; padding:1em; position:relative}
tr:nth-child(even) {background-color: #f2f2f2;}
tr:hover {color:var(--clr-m);}
table td, table th { padding-left:8px; text-align:left; vertical-align: middle;}
table thead tr {height:60px; background:#FFED86; font-size:16px; }
table tbody tr {}
table tbody tr:last-child {border:0;}
blockquote {margin:1em 0; font-style:normal; padding:calc(var(--mrg-f)/2) 0; padding-left:25px; font-weight:300; border-left:1px solid var(--clr-m);}
blockquote p {font-size:1.22em; font-weight: 400}
blockquote cite {font-style:normal; font-size:0.66em; color:#cacaca}
time {color:var(--clr-m);}
place {}
/* 2.1.1 Typography Form types
_____________________________________*/
legend, button, input, optgroup, select, textarea {margin: 0;}
legend {margin-bottom:1em; position:relative; padding:0 1em 0 0.5em; font-weight:500;}
label {display:block; font-weight:600; position:relative;}
input {margin-bottom:var(--mrg-f);}
p > input {margin-bottom:0;}
textarea, input[type="button"], input[type="color"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="file"], input[type="hidden"], input[type="image"], input[type="month"], input[type="number"], input[type="password"], input[type="range"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"] {-webkit-appearance:none; appearance:none; font-size:var(--form-font-s); width:100%; border-radius:var(--form-brd-rad); color:var(--form-clr); margin-top:var(--mrg-f); margin-top:0; line-height:1; padding:var(--form-pad); background:var(--form-bg); border:var(--form-brd-s) solid var(--form-brd-c); border-bottom:var(--form-brd-s) solid var(--form-brd-c);
transition: 180ms box-shadow ease-in-out; height:calc(var(--form-font-s) + (var(--form-brd-s) + var(--form-pad))*2 )}
textarea {-webkit-writing-mode:horizontal-tb!important; text-rendering:auto; letter-spacing:normal; word-spacing:normal; text-transform:none; text-indent:0px; text-shadow:none; display:inline-block; text-align:start; -webkit-appearance:textarea; -webkit-rtl-ordering:logical; flex-direction:column; cursor:text; white-space:pre-wrap; overflow-wrap:break-word; word-wrap:break-word; border-image:initial; overflow:auto; vertical-align:top; resize:vertical; line-height:1.5; height:auto}
input::placeholder, textarea::placeholder {color:var(--clr-m); line-height:1; font-stretch:400;}
input:focus {outline:none; border:0;}
input:focus, textarea:focus {border:var(--form-brd-s) solid var(--form-brd-c); background:var(--form-bg)}
textarea:focus {min-height:120px;}
/* 2.1.2 Typography checkbox & radio
_____________________________________*/
input[type="checkbox"], input[type="radio"] {-webkit-appearance:none; appearance:none; background-color:var(--form-bg); margin:0; margin-right:var(--mrg-c); cursor:pointer; font-size:1.5em; width:var(--form-w); height:var(--form-h); border:var(--form-brd-s) solid currentColor; transform:translateY(-0.075em); display:grid; place-content:center;}
input[type="checkbox"] {border-radius: min(var(--form-brd-rad), 5px );}
input[type="radio"] {border-radius:50%;}
input[type="checkbox"]::before, input[type="radio"]::before {content:""; width:0.65em; height:0.65em; transform:scale(0); transition:120ms transform ease-in-out; box-shadow:inset 1em 1em var(--form-clr); /* Windows High Contrast Mode */ background-color:CanvasText;}
input[type="radio"]::before {border-radius:50%;}
input[type="checkbox"]::before {}
input[type="checkbox"].checkboxa::before {transform-origin:bottom left; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);}
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {transform:scale(1);}
input[type="checkbox"]:focus, input[type="radio"]:focus {outline-offset: max(2px, 0.15em); border:var(--form-brd-s) solid var(--form-brd-c);}
input[type="checkbox"]:disabled {--form-clr:var(--form-dis); color:var(--form-dis); cursor:not-allowed;}
input[type="checkbox"] + label,
input[type="radio"] + label {display:inline-flex; width: calc(100% - 3em);font-weight:400; font-size:1em; align-items:center;}
input[type="checkbox"] + label {}
/* 2.1.3 Typography more
_____________________________________*/
/*text*/
/* input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="search"], input[type="url"], textarea {-webkit-appearance:none; appearance:none; --outline-color:var(--clr-m);} */
/*search*/ /*
input[type="search"] {-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;} */
input[type="color"] {padding:calc(var(--form-pad)/2)}
input[type="file"] {padding:0; color:var(--clr-m); color:#f00}
/*file*/
::-webkit-file-upload-button{}
/*date*/
input[type="date"], input[type="month"], input[type="time"], input[type="week"] {-webkit-appearance:none; -moz-appearance:none; /*text-align:-webkit-left; display:-webkit-inline-flex;*/ min-width:100%; position:relative}
input[type="date"]:after {/*content: 'ert'; */ color:aqua; right:20px; position:absolute; top:10px}
/*range*/
input[type="range"] {-webkit-appearance:none; appearance:none; background:transparent; cursor:pointer; width:100%; padding:0; border:0}
input[type="range"]:focus {outline:none; border:0;}
input[type="range"]::-webkit-slider {background-color:#000; border-radius:0; height:0;}
input[type="range"]::-webkit-slider-runnable-track {background-color:#000; border-radius: 0.5rem; height: 0.5rem;}
input[type="range"]::-webkit-slider-thumb {-webkit-appearance:none; appearance:none; margin-top:-4px; background-color:var(--clr-m);border-radius: 0.5rem; height: 1rem; width: 1rem;}
input[type="range"]:focus::-webkit-slider-thumb {outline: 2px solid var(--clr-m); outline-offset: 0.125rem;}
input[type="range"]::-moz-range-track {background-color:#000; border-radius:0.5rem; height: 0.5rem;}
input[type="range"]::-moz-range-thumb {background-color:#f00; border:none; border-radius:0.5rem; height: 1rem; width: 1rem;}
input[type="range"]:focus::-moz-range-thumb{outline: 1px solid var(--clr-m); outline-offset: 0.125rem;}
/*select*/
.select {position:relative; display:inline-block; margin-top:var(--mrg-f); width:100%;}
select {width:100%; outline:0; font-weight:600; appearance:none; -webkit-appearance:none; -moz-appearance:none;}
select::-ms-expand {display: none;}
select:hover, select:focus {}
select:disabled {opacity: 0.5; pointer-events: none;}
.select_arrow {position:absolute; top:1em; right:2em; width:1em; height:1em; border:solid var(--clr-i); border-width:0 3px 3px 0; display:inline-block; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
.select select:hover ~ .select_arrow, .select select:focus ~ .select_arrow {border-color:#fff;}
.select select:disabled ~ .select_arrow {border-top-color: #EFEBE2;}
option {font-weight:normal; color:var(--clr-i); /*background:var(--clr-m);*/}
option:hover { font-weight:normal; background:var(--clr-m); box-shadow: 0 0 10px 100px var(--clr-m) inset;}
/* only blog // article p:last-child {margin-bottom:var(--mrg-f);} */
.wrap {margin:0 auto; clear:both; padding:0 calc((100vw - 1vw*var(--wrap))/2);}
.margin {margin:0 auto}
.flex {display:flex; justify-content:space-between; flex-wrap:wrap;}
/* Change 2026/04/01 */ /*-----------*/
/* 2.2 icons -----*/
/*-----------------------------------*/
.icon-svg::before, .icon-svga::after, .icon-svgb::before, .icon-svgb::after {padding:0.75em}
.icon-svg::before, .icon-svga::after, .icon-svgb::before, .icon-svgb::after {content:''; display:block; background:var(--clr-m); -webkit-mask-size:100%!important; mask-size:100%!important;}
/*
.icon-svga::after {padding:0.75em; content:''; display:block; background:var(--clr-m); /*-webkit-mask-size:100%!important; mask-size:100%!important; margin-left:1em;}
.icon-svgb::after, .icon-svgb::before {content:''; display:block; background:var(--clr-m); -webkit-mask-size:100%!important; mask-size:100%!important; margin-left:1em;} */
.icon-svg::before, .icon-svgb::before {margin-right:1em;}
.icon-svga::after, .icon-svgb::after {margin-left:1em;}
span.icon-svg::before, span.icon-svgb::before, span.icon-svga::after, span.icon-svgb::after {margin:0;}
div:hover > [class^="box-"]:after, a:hover [class^="box-"]:after {transform:rotate(90deg);}
.top-search {width:6em}
/*ICONS*/
[class^="ico"] {display:flex; position:relative; align-items:center;}
[class^="ico-a"] {justify-content:space-between;}
[class^="ico-a"]:after {content:'';background-size:contain; background-repeat:no-repeat; background-position:center; background-color:#f0f;}
[class^="ico-b"]:before {content:'';background-size:contain; background-repeat:no-repeat; background-position:center; background-color:#f0f;}
[class^="ico-b"]:before {margin-right:var(--mrg-f); padding: calc(50px/2);}
[class^="ico-a"]:after, [class^="ico-ba"]:after {margin-left:var(--mrg-f); float:right; padding: calc(24px/2);}
div:hover > [class^="ico-"]:after, a:hover [class^="ico-"]:after {transform: rotate(90deg);}
div:hover > [class^="ico-"]:before, a:hover [class^="ico-"]:before {background-color: #f00;}
[class*="icoboxa-"], [class*="icoboxb-"], [class*="icoboxc-"] {display:flex; align-items:center;}
/* after */
/* text-left */ .icoboxa-1 {}
/* text-center */ .icoboxa-2 {justify-content:space-between}
/* all-center */ .icoboxa-3 {justify-content:center}
/* text-right */ .icoboxa-4 {text-align:right}
/* before */
/* text-left */ .icoboxb-1 {}
/* text-center */ .icoboxb-2 {text-align:right; justify-content:space-between}
/* all-center */ .icoboxb-3 {text-align:center; justify-content:center}
/* text-right */ .icoboxb-4 {text-align:right; justify-content:flex-end}
/* before & after */
/* text-left */ .icoboxc-1 {justify-content:space-between}
/* text-center */ .icoboxc-2 {justify-content:center; text-align:center}
.icoboxc-2::after, .icoboxc-2::before {mask-size:contain!important; flex-grow:1;}
.icoboxc-2::before {margin-left:0; margin-right:1em; mask-position:left!important;}
.icoboxc-2::after {mask-size:contain!important; mask-position:right!important;}
/* all-center */ .icoboxc-3 {justify-content:center; text-align:center}
.icoboxc-3::after, .icoboxc-3::before {mask-size:contain!important;}
.icoboxc-3::before {margin-left:0; margin-right:1em; mask-position:left;}
.icoboxc-3::after {mask-size:contain!important; mask-position:right;}
/* text-right */ .icoboxc-4 {text-align:right; justify-content:flex-end}
.icoboxc-4::before {margin-left:0; mask-size:contain!important; margin-right:1em; mask-position:left!important; flex-grow:1;}
.icoboxc-1.icon-svg-image::after {-webkit-mask:var(--svg-icon-arrow) no-repeat center; mask:var(--svg-icon-arrow) no-repeat center;}
.icoboxc-1.icon-svgb.icon-svg-image::after {mask-size:contain!important; flex-grow: 1; mask-position:right;}
.icoboxc-1::before {margin-left:0; margin-right:1em}
.trans-rot:hover {}
.trans-rot-a:hover:after {}
/**:hover > [class*="icoboxa-"]:after, */ a:hover [class*="icoboxa-"]:after, [class*="icoboxa-"]:hover:after {transform:rotate(90deg);}
/**:hover > [class*="icoboxa-"]:after, */ a:hover [class*="icoboxa-"]:after, [class*="icoboxa-"]:hover:after {transform:scale(1.1);}
/**:hover > [class*="icoboxa-"]:after, */ a:hover [class*="icoboxa-"]:after, [class*="icoboxa-"]:hover:after {transform:translateX(10px);}
.icon-svg-map::before {-webkit-mask:var(--svg-icon-map) no-repeat center; mask:var(--svg-icon-map) no-repeat center;}
.icon-svg-phone::before {-webkit-mask:var(--svg-icon-phone) no-repeat center; mask:var(--svg-icon-phone) no-repeat center;}
.icon-svg-phone-2::before {-webkit-mask:var(--svg-icon-phone2) no-repeat center; mask:var(--svg-icon-phone2) no-repeat center;}
.icon-svg-iphone::before {-webkit-mask:var(--svg-icon-iphone) no-repeat center; mask:var(--svg-icon-iphone) no-repeat center;}
.icon-svg-arrow::before, .icon-svg-arrow::after {-webkit-mask:var(--svg-icon-arrow) no-repeat center; mask:var(--svg-icon-arrow) no-repeat center;}
.icon-svg-search::before {-webkit-mask:var(--svg-icon-search) no-repeat center; mask:var(--svg-icon-search) no-repeat center;}
.icon-svg-chevron::before {-webkit-mask:var(--svg-icon-chevron) no-repeat center; mask:var(--svg-icon-chevron) no-repeat center;}
.icon-svg-check::before {-webkit-mask:var(--svg-icon-check) no-repeat center; mask:var(--svg-icon-check) no-repeat center;}
.icon-svg-plus::before {-webkit-mask:var(--svg-icon-plus) no-repeat center; mask:var(--svg-icon-plus) no-repeat center;}
.icon-svg-envelop:before {-webkit-mask:var(--svg-icon-envelop) no-repeat center; mask:var(--svg-icon-envelop) no-repeat center;}
.icon-svg-at::before {-webkit-mask:var(--svg-icon-at) no-repeat center; mask:var(--svg-icon-at) no-repeat center;}
.icon-svg-time::before {-webkit-mask:var(--svg-icon-time) no-repeat center; mask:var(--svg-icon-time) no-repeat center;}
.icon-svg-home::before {-webkit-mask:var(--svg-icon-home) no-repeat center; mask:var(--svg-icon-home) no-repeat center;}
.icon-svg-home-2::before {-webkit-mask:var(--svg-icon-home2) no-repeat center; mask:var(--svg-icon-home2) no-repeat center;}
.icon-svg-image::before {-webkit-mask:var(--svg-icon-image) no-repeat center; mask:var(--svg-icon-image) no-repeat center;}
.icon-svg-user::before {-webkit-mask:var(--svg-icon-user) no-repeat center; mask:var(--svg-icon-user) no-repeat center;}
.icon-svg-time::before {-webkit-mask:var(--svg-icon-time) no-repeat center; mask:var(--svg-icon-time) no-repeat center;}
.icon-svg-smm-you::before {-webkit-mask:var(--svg-smm-you) no-repeat center; mask:var(--svg-smm-you) no-repeat center; background:#ff0000}
.icon-svg-smm-you {--svg-smm-you: url('data:image/svg+xml, ');}
.icon-svg-smm-telegram::before {-webkit-mask:var(--svg-smm-telegram) no-repeat center; mask:var(--svg-smm-telegram) no-repeat center; background:#0088cc}
.icon-svg-smm-telegram {--svg-smm-telegram: url('data:image/svg+xml, ');}
.icon-svg-smm-viber::before {-webkit-mask:var(--svg-smm-viber) no-repeat center; mask:var(--svg-smm-viber) no-repeat center; background:#7360f2}
.icon-svg-smm-viber {--svg-smm-viber: url('data:image/svg+xml, ');}
.icon-svg-smm-facebook::before {-webkit-mask:var(--svg-smm-facebook) no-repeat center; mask:var(--svg-smm-facebook) no-repeat center; background:#1877f2}
.icon-svg-smm-facebook {--svg-smm-facebook: url('data:image/svg+xml, ');}
.icon-svg-smm-insta::before {-webkit-mask:var(--svg-smm-insta) no-repeat center; mask:var(--svg-smm-insta) no-repeat center;}
.icon-svg-smm-insta::before, .icon-svg-smm-insta-2::before {background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); background:-webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);}
.icon-svg-smm-insta {--svg-smm-insta: url('data:image/svg+xml, ');}
.icon-svg-smm-insta-2::before {-webkit-mask:var(--svg-smm-insta2) no-repeat center; mask:var(--svg-smm-insta2) no-repeat center;}
.icon-svg-smm-insta-2 {--svg-smm-insta2: url('data:image/svg+xml, ');}
.icon-svg-smm-tiktok::before {-webkit-mask:var(--svg-smm-tiktok) no-repeat center; mask:var(--svg-smm-tiktok) no-repeat center; background:#010101}
.icon-svg-smm-tiktok {--svg-smm-tiktok: url('data:image/svg+xml, ');}
.icon-svg-smm-x-social::before {-webkit-mask:var(--svg-smm-x-social) no-repeat center; mask:var(--svg-smm-x-social) no-repeat center; background:#000000}
.icon-svg-smm-x-social {--svg-smm-x-social: url('data:image/svg+xml, ');}
.icon-svg-smm-threads::before {-webkit-mask:var(--svg-smm-threads) no-repeat center; mask:var(--svg-smm-threads) no-repeat center; background:#000000}
.icon-svg-smm-threads {--svg-smm-threads: url('data:image/svg+xml, ');}
.icon-svg-smm-messenger::before {-webkit-mask:var(--svg-smm-messenger) no-repeat center; mask:var(--svg-smm-messenger) no-repeat center; background:radial-gradient(circle at 25% 98%, rgb(0, 120, 255) 5%, rgb(75, 105, 255) 25%, rgb(175, 55, 240) 55%, rgb(255, 85, 125) 78%, rgb(250, 105, 110) 83%);}
.icon-svg-smm-messenger {--svg-smm-messenger: url('data:image/svg+xml, ');}
.icon-svg-smm-whatsapp::before {-webkit-mask:var(--svg-smm-whatsapp) no-repeat center; mask:var(--svg-smm-whatsapp) no-repeat center; background:#25d366}
.icon-svg-smm-whatsapp {--svg-smm-whatsapp: url('data:image/svg+xml, ');}
.icon-svg-smm-whatsapp-2::before {-webkit-mask:var(--svg-smm-whatsapp2) no-repeat center; mask:var(--svg-smm-whatsapp2) no-repeat center; background:#25d366}
.icon-svg-smm-whatsapp-2 {--svg-smm-whatsapp2: url('data:image/svg+xml, ');}
.icon-svg-smm-google::before {-webkit-mask:var(--svg-smm-google) no-repeat center; mask:var(--svg-smm-google) no-repeat center; background:
linear-gradient(207deg, rgb(67 133 245 / 1) 50%, rgb(67 133 245 / 0) 50.2%) 229.7% 113.64% / 79.8% 64.8% no-repeat no-repeat, /* Blue */
linear-gradient(207deg, rgb(234 66 53 / 1) 50%, rgb(234 66 53 / 0) 50.2%) 0% 0% / 100% 100% no-repeat no-repeat, /* Red */
linear-gradient(147deg, rgb(250 188 8 / 1) 50%, rgb(250 188 8 / 0) 50.2%) 4.31% 59.81% / 58.2% 57.2% no-repeat no-repeat, /* Yellow */
radial-gradient(ellipse at 50% 50%, rgb(50 168 83 / 1) 0%, rgb(50 168 83 / 1) 100%) 0% 0% / 100% 100% no-repeat no-repeat; /* Green */}
.icon-svg-smm-google {--svg-smm-google: url('data:image/svg+xml, ');}
.icon-svg-smm-linkedin::before {-webkit-mask:var(--svg-smm-linkedin) no-repeat center; mask:var(--svg-smm-linkedin) no-repeat center; background:#0a66c2}
.icon-svg-smm-linkedin {--svg-smm-linkedin: url('data:image/svg+xml, ');}
.icon-svg-smm-linkedin {--svg-smm-linkedin: url('data:image/svg+xml, ');}
.icon-svg-smm-behance::before {-webkit-mask:var(--svg-smm-behance) no-repeat center; mask:var(--svg-smm-behance) no-repeat center; background:#053eff}
.icon-svg-smm-behance {--svg-smm-behance: url('data:image/svg+xml, ');}
/* Change 2026/06/06 */ /*-----------*/
/* 2.3 buttons -----*/
/*-----------------------------------*/
button::-moz-focus-inner, input::-moz-focus-inner {padding:0; border: 0;}
button[disabled], html input[disabled] {cursor: default;}
button:hover, select:hover, [type="button"]:hover, [type="reset"]:hover, [type="submit"]:hover {color:var(--btn-clr); border:var(--btn-brd-s) solid var(--btn-brd-c); background-color:var(--clr-m);}
input + button, textarea + button, input + input[type="submit"], fieldset + input[type="submit"], fieldset + button{margin:0}
button + button {margin-left:var(--mrg-f);}
/* 2.3.1 Typography Buttons Types Form types
_____________________________________*/
.btn {display:block; width:fit-content; margin:var(--mrg-f) auto; font-size:var(--btn-font-s); border-radius:var(--btn-brd-rad)}
.main-article .btn p, .btn p {margin:0}
.btn a {line-height:1}
::-webkit-file-upload-button, .btn p, p.btn, .cc-btn.cc-dismiss, button, select, input[type="button"], [type="button"], [type="reset"], [type="submit"], .tab button {padding:var(--btn-pad) calc(var(--btn-pad)*2); line-height:1; color:var(--btn-clr); font-size:var(--btn-font-s); text-transform:uppercase; background:var(--btn-bg); width:fit-content; border-radius:var(--btn-brd-rad); display:block; cursor:pointer; border:var(--btn-brd-s) solid var(--btn-brd-c);}
.tab button {cursor:pointer; transition:0.3s; text-transform:none; margin:var(--mrg-f) var(--mrg-f) 0 0;}
.tab button + button {margin-left:0}
.tab button.active, .tab button:hover {background-color:inherit; color:var(--clr-m); border:var(--btn-brd-s) solid var(--clr-m); }
.btn-red p, p.btn-red, button.btn-red, select.btn-red {background:var(--clr-b); color:var(--clr-s);}
.btn-arrow p, button.btn-arrow, select.btn-arrow {margin:0; display:flex; align-items:center;}
button.btn-arrow, select.btn-arrow {margin:0 auto; padding:var(--btn-pad) calc(var(--btn-pad)*2);}
.btn-arrow p::after, button.btn-arrow::after, select.btn-arrow::after {margin:0 0 0 1em; padding:0.5em; background:var(--clr-i); display:inline-block;}
.btn-arrow p::before, button.btn-arrow::before, select.btn-arrow::before {margin:0 0 0 1em; padding:0.5em; background:var(--clr-i); display:inline-block;}
.btn-arrow:hover p::after {margin-left:2em;}
.btn-arrow p span.icon-svga {background:var(--clr-w); border-radius:var(--btn-brd-rad); padding:var(--btn-pad);
padding:calc(var(--icon-s) / 2 - 0.75em);
margin-left:var(--btn-mrg);}
.btn-arrow p span.icon-svga::after {margin-left:0em;}
.btn-span p {padding:0.5em; padding:0 0 0 calc(var(--btn-pad) * 2);}
.btn-txt {}
button.btn-txt {color:var(--clr-m); background:none; border:none; padding:0;}
.btn-txt p, p.btn-txt, p.box-more, .box-more p {color:var(--clr-b); width:fit-content; padding:0; background:none; border:none}
.btn-txt.icon-svga {display:flex; align-items:center;}
.btn-arrow:hover p::after, .btn-txt:hover::after {margin-left:2em;}
.btn .submit-btn {}
.box-block .box-button {margin-left:0; margin:0 auto; display:flex;}
.section-btn-top {position:absolute; right:0; top:0; margin-top:0em;}
.column-full .section-btn-top {right:calc((100vw - 1vw* var(--wrap)) / 2);}
.section-btn-top.btn-txt {border-bottom:var(--btn-brd-s) solid var(--btn-brd-c); padding-bottom:0.5em; padding-top:0.5em; border-radius:0;}
.section-btn-top p {margin:0}
.section-btn, .block-btn {}
.btn-dev {display:block ;width:fit-content; margin:0 auto;}
.btn-dev p, button.btn-dev, select.btn-dev {padding:var(--btn-pad) calc(var(--btn-pad)*2); display:block; width:fit-content; border-radius:var(--btn-brd-rad); color:var(--clr-m); font-weight:600; background:var(--clr-w); border:var(--btn-brd-s) solid var(--btn-brd-c); margin:var(--mrg-f) auto;}
.btn-dev:hover p, button.btn-dev:hover, select.btn-dev:hover {color:var(--clr-w); background:var(--clr-m); border:2px solid var(--clr-s);}
/* 2.3.2 Typography Tegs
_____________________________________*/
.block-btns.box-tag {margin:0; display:block}
.block-btns.box-tag .tag-link, .block-btns.box-tag > span {margin:var(--mrg-f) var(--mrg-f) 0 0; display:inline-block}
.block-btns.box-tag .tag-link * {margin:0}
.block-btns .tag-link * {background-color:var(--btn-bg);}
article footer .box-tag {display:flex; flex-wrap:wrap; align-items:center;}
article footer .box-tag > * {font-size:1em;}
article footer .box-tag > p { /* & 265 - .article-shares p */}
article footer .tag-link {background:var(--clr-s-o); color:var(--clr-b)}
article footer .tag-link p {color:var(--clr-b)}
/* 2.3.3 Typography Block buttons/tegs/icons
_____________________________________*/
.block-btns {margin:var(--mrg-f) auto 0; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; width:100%}
.block-btns .btn {margin:0 0 var(--mrg-f)}
.block-btns .btn + *, .block-btns button + * {margin-left:var(--mrg-f);}
/* 2.3.4 Typography Icons Buttons
_____________________________________*/
/* ICON SIN */
.icon-box {margin:var(--mrg-f) 0; display:block; display:flex;}
.icon-box .icon-svg, .icons-block .icon-svg {width:var(--icon-w); height:var(--icon-h); padding:0}
.icon-box .icon-svg::before, .icons-block .icon-svg::before {width:var(--icon-w); height:var(--icon-h); padding:0}
.icon-box span + * {margin:0 0 0 var(--mrg-c);}
/* ICON BLOCK */
.icons-block {display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; margin:var(--mrg-f) 0}
.icons-block > *, .icons-block > p {display:flex; flex-wrap:wrap; align-items:center; /*justify-content:center;*/ width:auto; margin:0 var(--mrg-f) 0 0}
.icons-block * > span + * {margin:0 0 0 var(--mrg-c)!important;}
.icons-block span.icon-svg::before {/* STYLED icons-block *//* background:var(--btn-clr);*/}
/* ICON BLOCK BTN */
.icons-block-btn {}
.icons-block-btn a p {margin-right:var(--mrg-c);}
.icons-block-btn h2 {margin:0 0 0 var(--mrg-c);}
.icons-block-btn span.icon-svg {justify-content:center; border-radius:var(--btn-brd-rad); border:var(--btn-brd-s) solid var(--btn-brd-c); background:var(--btn-bg);}
.icons-block.icons-block-btn span.icon-svg::before {background:var(--btn-ba-bg); width:calc(var(--icon-w)/1.5); height:calc(var(--icon-h)/1.5);}
/* 2.3.5 Typography Buttons Block
_____________________________________*/
.article-shares {display:flex; align-items:center; justify-content:space-between; margin:var(--margin-top) 0; /*background:var(--clr-m);*/}
.article-shares p, article footer .box-tag > p {font-size:1.125em; font-weight:500; color:var(--clr-b)}
.article-shares .icons-block a {margin:0 0 0 var(--mrg-c)}
.pagination {margin:2em 0; display:flex; justify-content:flex-start; /*justify-content:center; background:var(--clr-t); border-radius:var(--btn-brd-r); padding:2em;*/}
.pagination .nav-links {display:flex}
.pagination span, .pagination a {color:var(--btn-clr); width:var(--icon-w); height:var(--icon-h); display:flex; align-items:center; justify-content:center; font-size:var(--btn-font-s); background:var(--btn-bg); border-radius:var(--btn-brd-rad); border:var(--btn-brd-s) solid var(--btn-brd-c); margin:0 var(--mrg-c) 0 0; /* margin:0 var(--mrg-c); */}
.pagination span {background:var(--clr-b);}
.pagination a {}
#back-to-top {position:fixed; display:flex; align-items:center; justify-content:center;
width:var(--icon-w); height:var(--icon-h); font-size:var(--btn-font-s); border-radius:var(--btn-brd-rad); border:var(--btn-brd-s) solid var(--btn-brd-c); background:var(--btn-bg); bottom:1em; right:5%; right:calc((100vw - 1vw* var(--wrap)) / 2); transform:rotate(270deg); transition:all 0.4s ease; opacity:0; z-index:-1;}
#back-to-top.icon-svg-arrow {}
#back-to-top.icon-svg-arrow::before {margin:0; background:var(--btn-ba-bg); padding:var(--btn-ba-pad)}
#back-to-top:hover {background:var(--btn-bg-o); color:var(--btn-clr-o);}
#back-to-top.show {opacity:1; z-index:999}
#back-to-top:hover::before {background:var(--btn-ba-bg-o);}
!!!!!!!!!!!!!!!!!! CaLL Button {}
/* 2.3.6 Typography Pop-up
_____________________________________*/
.more-arrow{text-align:right; margin-top:-4.5em;}
.more-arrow a{color:var(--clr-m); border-bottom:2px solid; padding-bottom:0.5em;}
.more-arrow a::after {content: '← — —'; transform:rotate(180deg); padding-right:0.5em; display: inline-block;}
.arr-to-down {position:absolute; right:2vw; bottom:5vw; transform:rotate(270deg);}
.arr-to-down a{color:var(--clr-w); display:block; animation-name:floatingrev; animation-duration:3s; animation-iteration-count:infinite; animation-timing-function: ease-in-out;}
.arr-to-down img {display: none}
@keyframes floating {from { transform: translate(0, 0px);} 65% {transform: translate(0, 15px);} to {transform: translate(0, -0px);}}
@keyframes floatingrev {from { transform: translate(0, 0px);} 65% {transform: translate(15px, 0);} to {transform: translate(0, -0px);}}
@media screen and (max-width:620px) {
.block-btns .btn, .block-btns .btn + *, .block-btns button + * {margin:0 auto var(--mrg-f);}
}
/* Change 2026/06/06 */ /*-----------*/
/* 2.4 Base -----*/
/*-----------------------------------*/
.required:after {content:"*"; color:var(--clr-m); position:absolute; top:0;}
span.required {color:var(--clr-m); font-weight:600;}
span.required:after {content:"";}
input.antispam {width:0; height:0; padding:0; border:0; display:contents;}
/* 2.4.1 Typography fieldset
_____________________________________*/
fieldset {display:flex; flex-wrap:wrap; align-items:center; margin-top:var(--mrg-f); padding:0 2em 1em; border:var(--form-brd-s) solid var(--form-brd-c); border-radius:var(--form-brd-rad);}
fieldset label {width:100%;}
fieldset p.w100 {width:100%; display:flex; align-items:center; margin-top:var(--mrg-f); font-weight:600; font-size:1.25em}
.checkbox-box, .radiobox-box {display:flex; align-items:center; margin:0 0 var(--mrg-f) 0;}
fieldset .checkbox-box, fieldset .radiobox-box {display:flex; align-items:flex-start; margin:0 0 var(--mrg-f) 0;}
fieldset .checkbox-box label, fieldset .radiobox-box label {margin:-0.25em 0 0;}
/* 2.4.2 Typography form-container
_____________________________________*/
.form-container {display:flex; justify-content:space-between; flex-wrap:wrap;}
.form-container > label {width:100%; margin-bottom:0}
.form-container > button {margin:0 auto; width:auto}
.form-container > div {margin:0}
.form-container p {margin:0 0 var(--mrg-f) 0;}
.form-container > p {width:100%;}
.form-container fieldset {margin:0 0 var(--mrg-f) 0; width:100%}
.form-container textarea {margin:0 0 var(--mrg-f) 0; width:100%}
.form-container h5 {margin-top:0; width:100%}
.form-container > div.must-text {width:100%; margin-bottom:var(--mrg-f);}
/* 2.4.3 Typography Buttons Block
_____________________________________*/
.send-form-01 {}
.send-form-02 label {width:calc(50% - (var(--mrg-f) / 2));}
.send-form-02 label.textarea { width:100%;}
.send-form-03 {align-items:stretch!important;}
.send-form-03 .w50 + .w50 label {height:100%; display:flex;}
.send-form-04 p {display:flex; width:100%; align-items:center; margin-bottom:1em;}
.send-form-04 > p > label {width:40%; margin-bottom:0;}
form .policy-check {display:flex; align-items:center; width:100%; margin:0 0 var(--mrg-f) 0;}
form .policy-check label {display:block; margin:0; margin-bottom:0; width:calc(100% - var(--form-w) - var(--mrg-c)); color:var(--clr-g);}
form .policy-check label a {color:var(--clr-w);}
form .policy-check input {top:0; }
#pop-modal-form-01 {display:none; border-radius:var(--block-brd-rad);}
#pop-modal-form-01 form {display:inline-block}
.pop-modal-form-02.fancybox-content {display:none; padding: 0; margin:-2em; max-width:60%; border-radius:var(--block-brd-rad);}
.pop-modal-form-02 div {margin:0; align-items:stretch;}
.pop-modal-form-02 img {object-fit:cover; height:100%}
.pop-modal-form-02 .form-container {padding:1em}
.pop-modal-form-03 {display:none; border-radius:var(--block-brd-rad);}
.pop-modal-form-03.fancybox-content {display:none; max-width:60%;}
/* 2.4.3 Table
_____________________________________*/
/* Change 2026/06/06 */ /*-----------*/
/* 2.5 Constant Global -----*/
/*-----------------------------------*/
/* 2.5.1 Constant Left & Right
_____________________________________*/
.left, .left-t, .right, .right-t {width:50%}
.left, .left-t {float:left}
.left {margin:var(--mrg-f) var(--mrg-f) 0 var(--mrg-f);}
.left-t {margin:0 var(--mrg-f) var(--mrg-f) 0;}
.right, .right-t {float:right}
.right {margin:var(--mrg-f) 0 var(--mrg-f) var(--mrg-f);}
.right-t {margin:0 0 var(--mrg-f) var(--mrg-f);}
.alignright {width:50%; margin:0 0 var(--mrg-c) var(--mrg-c); float:right;}
.alignleft {width:50%; margin:0 var(--mrg-c) var(--mrg-c) 0; float:left;}
@media screen and (max-width:680px) {
.left, .left-t, .right, .right-t, .w40.left-t, .w40.right-t {width:100%; margin:0 0 var(--mrg-c) 0; float:none}
.left, .right {margin:var(--mrg-c) 0;}
}
.column-2 > *[class^="w"] > img, .column-3 > *[class^="w"] > img {width:100%;}
.txt-center {text-align:center;}
.txt-upper {text-transform:uppercase;}
/* 2.5.2 Constant Absolut / Padding / Vertical / Border Radius
_____________________________________*/
.abs-t {position:absolute; top:0;}
.abs-t-l {position:absolute; top:0; left:0}
.abs-t-r {position:absolute; top:0; right:0}
.pv20 {padding:20px 0}
.pv30 {padding:30px 0}
.pv40 {padding:40px 0}
.pv80 {padding:80px 0}
.valign-middle {display:-ms-flexbox; display:-webkit-flex; display: flex; -ms-flex-align:center; -webkit-align-items:center; -webkit-box-align:center; align-items:center;}
.is-vertically-aligned-center {align-items:center;}
.contacts .valign-content {flex-direction:column;}
.grid-m {display:grid; align-content:center;}
.grid-e {display:grid; align-content:space-evenly;}
/*block-border-radius*/
.bs-brb {border-radius: var(--block-brd-rad);}
.bs-brb-t {border-radius: var(--block-brd-rad) var(--block-brd-rad) 0 0;}
.bs-brb-r {border-radius: 0 var(--block-brd-rad) var(--block-brd-rad) 0;}
.bs-brb-b {border-radius: 0 0 var(--block-brd-rad) var(--block-brd-rad);}
.bs-brb-l {border-radius: var(--block-brd-rad) 0 0 var(--block-brd-rad);}
/* 2.5.3 Constant Width / Squaer
_____________________________________*/
/* Ширина блока в % */
.w10 {--col-nw:10%;width:10%}
.w15 {--col-nw:15%;width:15%}
.w20 {--col-nw:20%;width:20%}
.w25 {--col-nw:25%;width:25%}
.w30 {--col-nw:30%;width:30%}
.w35 {--col-nw:35%;width:35%}
.w40 {--col-nw:40%;width:40%}
.w45 {--col-nw:45%;width:45%}
.w50 {--col-nw:50%;width:50%}
.w55 {--col-nw:50%;width:55%}
.w60 {--col-nw:60%;width:60%}
.w65 {--col-nw:60%;width:65%}
.w70 {--col-nw:70%;width:70%}
.w75 {--col-nw:75%;width:75%}
.w80 {--col-nw:80%;width:80%}
.w90 {--col-nw:90%;width:90%}
.w100 {--col-nw:100%;width:100%}
/* Співвідношення висоти до ширини блока*/
.sq20 {padding:0 0 calc(20% - var(--block-brd-s)*2);}
.sq25 {padding:0 0 calc(25% - var(--block-brd-s)*2);}
.sq30 {padding:0 0 calc(30% - var(--block-brd-s)*2);}
.sq33 {padding:0 0 calc(33% - var(--block-brd-s)*2);}
.sq50 {padding:0 0 calc(50% - var(--block-brd-s)*2);}
.sq66 {padding:0 0 calc(66% - var(--block-brd-s)*2);}
.sq75 {padding:0 0 calc(75% - var(--block-brd-s)*2);}
.sq80 {padding:0 0 calc(80% - var(--block-brd-s)*2);}
.sq100 {padding:0 0 calc(100% - var(--block-brd-s)*2);}
.sq120 {padding:0 0 calc(120% - var(--block-brd-s)*2);}
.sq140 {padding:0 0 calc(140% - var(--block-brd-s)*2);}
.sq150 {padding:0 0 calc(150% - var(--block-brd-s)*2);}
.sq160 {padding:0 0 calc(160% - var(--block-brd-s)*2);}
.sq180 {padding:0 0 calc(180% - var(--block-brd-s)*2);}
.sq200 {padding:0 0 calc(200% - var(--block-brd-s)*2);}
/* 2.5.4 Constant Grid / Column
_____________________________________*/
.grid-1, .column-1 {--col-n:1}
.grid-2, .column-2 {--col-n:2}
.grid-3, .column-3 {--col-n:3}
.grid-4, .column-4 {--col-n:4}
.grid-5, .column-5 {--col-n:5}
.grid-6, .column-6 {--col-n:6}
.grid-7, .column-7 {--col-n:7}
.grid-8, .column-8 {--col-n:8}
.grid-9, .column-9 {--col-n:9}
.grid-10, .column-10 {--col-n:10}
.grid-11, .column-11 {--col-n:11}
.grid-12, .column-12 {--col-n:12}
/* 3.0 class="grid-N & column-N" -----*/
.grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12 {margin-top:var(--mrg-f); transition:all 0.3s; clear:both; width:unset}
/* 3.1 class="grid-N" GRID-----*/
.grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {display:grid; grid-gap:var(--col-gap); grid-template-columns:repeat(auto-fill, minmax(calc(100% / var(--col-n) - var(--col-gap)), 1fr));}
/* 3.2 class="column-N" COLUMN ------*/
.column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12 {clear:both; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start; align-content:flex-start; margin-top:var(--mrg-f);}
.column-2 > *, .column-3 > *, .column-4 > *, .column-5 > *, .column-6 > *, .column-7 > *, .column-8 > *, .column-9 > *, .column-10 > *, .column-11 > *, .column-12 > * {/*margin-right: var(--col-gap); */ width:calc(100%/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n)); margin-bottom: calc((100% - (100%/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n))*var(--col-n))/calc(var(--col-n) - 1)); /* min-width:var(--min-div-w) */}
.column-12 > * {--col-gap-px:10; /* max=10 */ --col-gap-vw:0; /* max=0.6 */ }
/*
.sq30 > a {width:calc(100% - (var(--block-pad)*2)*0.3); left: calc(var(--block-pad)*0.3);}
.sq50 > a {width:calc(100% - (var(--block-pad)*2)/2)!important; left: calc(var(--block-pad)*0.5)!important;}
.sq50 > div {width:calc(100% - (var(--block-pad)*2)/2)!important; left: calc(var(--block-pad)*0.5)!important;}
.sq80 > a {width:calc(100% - (var(--block-pad)*2)*0.8); left: calc(var(--block-pad)*0.8);}
.sq100 > a {width:calc(100% - (var(--block-pad)*2)); left: calc(var(--block-pad));} */
/* 2.6.5 Constant
_____________________________________*/