@font-face{font-family:Ardenis; src:url(fonts/Ardenis.ttf) format("TrueType"); font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:Bebas Neue Cyrillic; src:url(fonts/Bebas_Neue_Cyrillic.ttf) format("TrueType"); font-weight:300;font-display:swap;font-style:normal}
@font-face{font-family:Montserrat; src:url(https://ardenis.com.ua/main/fonts/Montserrat-Thin.woff) format('woff'); font-weight:100;font-display:swap;font-style:normal}
@font-face{font-family:Montserrat; src:url(Montserrat-Regular.woff) format('woff'); font-weight:400;font-display:swap; /*first load only 1*/
	
	font-style:normal}
@font-face{font-family:Montserrat; src:url(https://ardenis.com.ua/main/fonts/Montserrat-Medium.woff) format('woff'); font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:Montserrat; src:url(Montserrat-SemiBold.woff) format('woff'); font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:Montserrat; src:url(Montserrat-ExtraBold.woff) format('woff'); font-weight:800; font-style:normal; font-display:swap;}
@font-face{font-family:Montserrat; src:url(https://ardenis.com.ua/main/fonts/Montserrat-Black.woff) format('woff'); font-weight:900; font-display:swap; font-style:normal}
.sidebar-form .form
.lo18 {    --background-color:#fff;
    --error-code-color:var(--google-gray-700);
    --google-blue-100:rgb(210, 227, 252);
    --google-blue-300:rgb(138, 180, 248);
    --google-blue-600:rgb(26, 115, 232);
    --google-blue-700:rgb(25, 103, 210);
    --google-gray-100:rgb(241, 243, 244);
    --google-gray-300:rgb(218, 220, 224);
    --google-gray-500:rgb(154, 160, 166);
    --google-gray-50:rgb(248, 249, 250);
    --google-gray-600:rgb(128, 134, 139);
    --google-gray-700:rgb(95, 99, 104);
    --google-gray-800:rgb(60, 64, 67);
    --google-gray-900:rgb(32, 33, 36);
    --heading-color:var(--google-gray-900);
    --link-color:rgb(88, 88, 88);
    --popup-container-background-color:rgba(0,0,0,.65);
    --primary-button-fill-color-active:var(--google-blue-700);
    --primary-button-fill-color:var(--google-blue-600);
    --primary-button-text-color:#fff;
    --quiet-background-color:rgb(247, 247, 247);
    --secondary-button-border-color:var(--google-gray-500);
    --secondary-button-fill-color:#fff;
    --secondary-button-hover-border-color:var(--google-gray-600);
    --secondary-button-hover-fill-color:var(--google-gray-50);
    --secondary-button-text-color:var(--google-gray-700);
    --small-link-color:var(--google-gray-700);
    --text-color:var(--google-gray-700);
    background:var(--background-color);
    color:var(--text-color);
    word-wrap:break-word;}
/* --wp--style--block-gap:1.5rem; */
/*
-------------------------------------------------------------------------

	1.	Browser Reset + Font Face
	2.	Globally Applied Styles
	3.	Header + Search Bar Styles
	4.	Plugin Related Styles
	5.	Page + Custom Page Layout Styles
	6.	Nectar Shortcode Styles
	7.  Footer Styles
	8.	Sidebar Styles
	9.  Blog + Pagination Styles
	10.	Comment Styles
	11.	General Form Styles
лоадер
перемінні константи
типографіка
константи блока
хедер(логоб серч, бред, мови, ) + меню 
сітка
бокси
анімація
фанкі овл
файл стандартного вп
мій вп
оригінальні переписування налаштування
-------------------------------------------------------------------------*/
									.rata {color:rgba(252,252,252,1.00)}
:root { /*** COLOR ***/	
--clr-m:rgba(1, 97, 39, 1); /*clr - color; m - main*/ --main-color:rgba(1, 97, 39, 1);
--clr-s:rgba(240, 255, 228, 1); /*s - second*/
--clr-t:#035B85; /*t - third*/
--clr-w:#fff; /*w - white*/
--clr-g:rgba(150, 148, 147, 1); /*g - grey*/
--clr-d:rgba(113, 112, 109, 1); /*d - dark grey*/
--clr-b:rgba(18, 16, 12, 1); /*t - black*/
--clr-i:#ffffff; /*i - color in main color*/
--clr-o:0.5; /*o - opacity*/

--clr-m-o:rgba(1, 97, 39, var(--clr-o)); /*m - main opacity*/
--clr-s-o:rgba(255,145,0, var(--clr-o)); /*s - second*/
--clr-t-o:rgba(255,145,0, var(--clr-o)); /*t - third*/
--clr-w-o:rgba(252,252,252, var(--clr-o)); /*w - third*/
--clr-g-o:rgba(204,204,204, var(--clr-o)); /*g - grey*/
--clr-d-o:rgba(170,170,170, var(--clr-o)); /*d - dark grey*/
--clr-b-o:rgba(18, 16, 12, var(--clr-o)); /*t - black*/
--clr-bg-gr:rgba(1, 97, 39, 0) 0%, rgba(1, 97, 39, var(--clr-o)) 100%; /*bg gradient*/

/*** CONSTANT ***/
--margin-top:15px;
--wrap:90;
	

--border-radius-full:250px;
--border-radius-block:20px;

/*radio-btn*/	
--lbl-radio:16px;
--lbl-radio-in:1.5;
--radius-lbl-radio:1px;
--half-lbl-radio:calc(var(--lbl-radio) / 2);
--quat-lbl-radio:calc(var(--lbl-radio) / 4);

/*------------------------------*/
	.awe {color:#AAAAAA }
}

:root {
/**/
--logo-head-width:120px;	
--theme-var-sidebar:calc(var(--theme-var-page) * var(--theme-var-sidebar_prc) );
--url:https://sk-security.com.ua/;
}
.dark {--clr-m:var(--clr-w)} /*test example*/

@media screen and (max-width:650px) {
	.container { --fontsize:50px;}
	:root { --clr-m!!!!:#F03;}
}


/*-------------------------------------------------------------------------*/
/*	1.	Browser Reset + Font Face // typograf
/*-------------------------------------------------------------------------*/



*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-transition:all 0.4s ease; transition:all 0.4s ease; margin:0; padding:0; text-decoration:none; font-family:'Raleway', sans-serif;}
input:focus {outline:0; background:var(--clr-m)}
::selection {background:var(--clr-m); color:var(--clr-w); text-shadow:none;}
:after, :before {-webkit-transition:all 0.4s ease; transition:all 0.4s ease;}

html, body {min-height:100vh; font-size:24px; line-height:1.5; font-weight:500}
body {background:var(--clr-w); display:flex; flex-direction:column; -webkit-font-smoothing:antialiased;}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, img, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, font, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, hgroup, menu, nav, output, section, summary, time, mark, audio, video {margin:0; padding:0; text-decoration:none; vertical-align:baseline; outline:0; border:0;}
body, object, blockquote, pre, a, abbr, address, cite, code, del, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, font, fieldset, form, label, table, caption, aside, canvas, details, output, section, summary, time, mark, a, p {color:var(--clr-b);}

header {width:100%; z-index:999; -webkit-transition:all 0.4s ease; transition:all 0.4s ease; margin-bottom:0px}
main {flex:1 0 auto;}
footer {flex:0 0 auto; width:100%}
article {padding:0px 0;}
section {}
p {margin-top:var(--margin-top); }
/* only blog // article p:last-child {margin-bottom:var(--margin-top);} */
a {text-decoration:none; color:var(--clr-m); font-size:unset}
a:hover {text-decoration:none; color:var(--clr-d);}
strong {}

h2, h3, h4, h5, h6 {margin:calc(var(--margin-top) + 15px) 0 var(--margin-top); font-weight:600; line-height:1.5em;}
h1 {font-size:2.25em; color:var(--clr-b); margin:1.5em 0 1em; font-weight:700; text-align: center; text-transform:uppercase;} 
h2 {font-size:1.55em;}
h3 {font-size:1.33em;}
h4 {font-size:1.22em; color:var(--clr-m);}
h5 {font-size:1.11em;}
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(--margin-top); 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;}


legend, button, input, optgroup, select, textarea {margin:0;}
label {display:block; margin-top:var(--margin-top); font-size:1.125em; font-weight:600}

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; margin:0; margin-top:var(--margin-top); padding:9px 0; border:none; background:none; width:100%; color:var(--clr-m); 
	border-bottom:2px solid var(--clr-m); 
	border-radius:0px;}

button, input {overflow:visible;}
button, select, [type="button"], [type="reset"], [type="submit"], input[type="file"] {cursor:pointer; align-items:center; -webkit-appearance:button; max-height:58px; 
	border:1px solid var(--clr-b); color:var(--clr-w); background-color:var(--clr-m); font-size:1em; border-radius:12px; 
	padding:16px 45px; width:auto; min-width:150px; text-transform:none;}
button::-moz-focus-inner, input::-moz-focus-inner {padding:0; border:0;}
button {display:flex; margin:0 auto; margin-top:calc(var(--margin-top) / 2)}
button[disabled], html input[disabled] {cursor:default;}
button:hover, select:hover, [type="button"]:hover, [type="reset"]:hover, [type="submit"]:hover {color:var(--clr-m); border:1px solid var(--clr-m); background-color:var(--clr-s);}
input + button, textarea + button, input + input[type="submit"], fieldset + input[type="submit"], fieldset + button{margin:var(--margin-top) 0  0}
button + button {margin-left:var(--margin-top);}

input:focus {outline:none; border:0;}
input:focus, textarea:focus {border-bottom:2px solid var(--clr-m); background:var(--clr-w)}
input::placeholder, textarea::placeholder {color:var(--clr-m); font-size:100}
textarea:focus {min-height:120px;}

ol, ul, li {list-style:none;}
ul {padding-left:1.2em; margin-top:var(--margin-top)}
ol {padding-left:0.5em; margin-top:var(--margin-top)}
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(--margin-top); max-width:100%; position:relative; word-break:break-word;}
td {border:0.5px solid var(--clr-b); padding:24px 24px; position:relative}	
tr:nth-child(even) {background-color:var(--clr-g);}
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:var(--clr-m); font-size:16px; }
table tbody tr {}
table tbody tr:last-child  {border:0;}

ol li {list-style:decimal}	
ul li {list-style:disc;}
ul li::marker {color:var(--clr-m); content:'⬤'; content:'●'; content:'\00A0\25CF\00A0\00A0'; font-size:0.8em;}

blockquote {margin:40px 0; font-style:normal; padding:calc(var(--margin-top)/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:var(--clr-g)}
time {color:var(--clr-m);}




@media screen and (max-width:600px) {
table > *, table tr, table td, table th { display:block }
thead {display:none}
/*tbody {display:table-caption;}*/
table td {display:block; font-size:.8em; text-align:left;}
table tr {border-bottom:3px solid var(--clr-m); display:block; margin-bottom:0.625em;}
tbody tr { height:auto; padding:0;}
tbody tr td { padding-left:45%!important;}
tbody tr td:first-child {text-align:center; font-size:1.0em; font-weight:600; padding-left:0!important;}
tbody tr td:last-child { margin-bottom:0 }
tbody tr td:before {position:absolute; font-weight:600; width:40%; left:0.5em; top:0.5em}
tbody tr td:nth-child(1):before {content:"";}
#tab-2 tbody tr td:nth-child(2):before {content:"ДЕШЕВИЙ";}
#tab-2 tbody tr td:nth-child(3):before {content:"СТАНДАРТ";}
#tab-2 tbody tr td:nth-child(4):before {content:"ARDENIS START";}
#tab-2 tbody tr td:nth-child(5):before {content:"ДОРОГИЙ";}
  
.wp-block-table td  {border-bottom:0px solid; word-break:break-word; padding:0.5em;}
.wp-block-table table tr:first-child {display:none;}
.wp-block-table table tr td:first-child {border-collapse:collapse; text-align:center; background:var(--clr-m); color:var(--clr-w); border:1px solid var(--clr-m);}
.wp-block-table table td {width:auto}
}



/*-------------------------------------------------------------------------*/
/*	2. constant 1
/*-------------------------------------------------------------------------*/
.wrap { margin:0 auto; clear:both; padding:0 calc((100vw - 1vw*var(--wrap))/2);}
.margin {margin:0 auto}
.right {width:250px; float:right}
.left {width:calc(100% - 300px); float:left}
.txt-center {text-align:center;}
.txt-upper {text-transform:uppercase;}
.flex {display:flex; justify-content:space-between; flex-wrap:wrap; transition:all 0.3s;}
.required:after {content:"*"; color:var(--clr-m);}

.grid-h-m {display:grid; align-content:center;}
.grid-h-e {display:grid; align-content:space-evenly;}

.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;}
*{--aside:30%}
.has-aside {display:flex; flex-wrap:wrap; justify-content:space-between;} /* in main for clasic sidebar */ 
.has-aside > h1, .has-aside > div, .has-aside > p, .has-aside > h2 {width:100%}
.has-aside > aside {width:var(--aside); background:none; margin-top:calc(1vw*var(--col-gap));}
.has-aside > section /*or article*/ {width:calc(100% - var(--aside) - var(--col-gap-2)*2); background:none; margin-top:calc(1vw*var(--col-gap));}

/*-------------------------------------------------------------------------*/
/*	3.	Header & Top & Menu
/*-------------------------------------------------------------------------*/
.logo-top {display:flex; align-items:center; width:auto}

.header-menu-drop {padding:0; width:100%; box-shadow:0 1px 7px rgb(0 0 0 / 25%); border-bottom:0px var(--clr-m) solid;}
.header-menu-drop .logo-top {max-width:220px; z-index:900; padding:5px 0; line-height:0; transition:all .4s ease-out}
.header-menu-drop .logo-top img {width:auto; max-width:100%}
.header-menu-drop .top-sub{display:flex; justify-content:space-between; align-items:center;}

#menudrop {width:100%}
#menudrop ul {padding-left:0}
#menudrop div {margin-right:20px;}
#menudrop div:last-child {margin-right:0px;}
#menudrop ul {margin-right:20px;}
#menudrop ul:last-child {margin-right:0px;}
#menudrop .button {margin-right:0px;}

.header-menu-slide {}
.header-menu-slide .logo-top {width:8%; z-index:900}
.header-menu-slide .header-top {width:88%; position:relative}
.header-menu-slide .top-sub {width:70%; list-style-type:none; padding:0;}
.header-menu-slide #menu-s-button {position:relative; right:0px;}
.header-menu-slide .breadcrumbs {width:100%; position:absolute; bottom:0; left:0%; font-size:0.9em;}

.top-smm {margin:0px 0px; display:flex; min-width:55px;}
.top-smm a {margin-right:20px}
.top-smm a:last-child {margin-right:0px}
.top-search {width:30px}

.wpm-language-switcher {display:flex!important; align-items:center;}
.wpm-language-switcher li {border:none!important; padding:0 5px!important;}
.wpm-language-switcher .active span span {color:var(--clr-m); font-weight:700;}
.wpm-language-switcher li:hover{background:none!important;}
.wpm-language-switcher li:hover a span {color:var(--clr-m)}

.breadcrumbs {padding:10px 0; font-size:0.8em;}
.breadcrumbs span {}
.breadcrumbs a {text-decoration:none; color:var(--clr-m);}
.breadcrumbs a:hover {color:var(--clr-m);}
.breadcrumbs a span {text-decoration:none; color:var(--clr-b); font-size:inherit;}
.breadcrumbs a span:hover {color:var(--clr-m);}
.breadcrumbs__separator {color:var(--clr-m); font-weight:700; padding:0 5px}
.breadcrumbs__current {color:var(--clr-d); font-size:inherit; font-weight:300;}
.breadcrumbs li {padding-right:15px; display:block;}
.breadcrumbs li:before {content:'';}

@media screen and (max-width:1199px) {
.header-menu-drop .top-sub{top:7px; position:absolute; right:50px;}
}

/*------ Main slider style ------*/

/*!!!------ TAB ------*/

/*-------------------------------------------------------------------------*/
/*	4.	Box constant
/*-------------------------------------------------------------------------*/

*{
--sq-rad:0px; /*block-border-radius*/
--sq-33:0 0 33%;
--sq-10:0 0 10%;
--sq-bor:0px; /*block-border*/
--sq-pad:0px; /*block-pading*/
	
}
.servi .box-1 {--sq-bor:2px; --sq-rad:12px;}
.servi a.box-block {--sq-pad:20px 0;}

/* Співвідношення висоти до ширини блока*/
.sq20 {padding:0 0 20%;}
.sq25 {padding:0 0 25%;}
.sq30 {padding:0 0 30%;}
.sq33 {padding:0 0 33%;}
.sq50 {padding:0 0 50%;}
.sq66 {padding:0 0 66%;}
.sq75 {padding:0 0 75%;}
.sq80 {padding:0 0 80%;}
.sq100 {padding:0 0 calc(100% - var(--sq-bor)*2);}
.sq120 {padding:0 0 calc(120% - var(--sq-bor)*2);}
.sq140 {padding:0 0 calc(140% - var(--sq-bor)*2);}
.sq150 {padding:0 0 calc(150% - var(--sq-bor)*2);}
.sq160 {padding:0 0 calc(160% - var(--sq-bor)*2);}
.sq180 {padding:0 0 calc(180% - var(--sq-bor)*2);}
.sq200 {padding:0 0 calc(200% - var(--sq-bor)*2);}

/*
.sq30 > a {width:calc(100% - (var(--sq-pad)*2)*0.3); left:calc(var(--sq-pad)*0.3);}
.sq50 > a {width:calc(100% - (var(--sq-pad)*2)/2)!important; left:calc(var(--sq-pad)*0.5)!important;}

.sq50 > div {width:calc(100% - (var(--sq-pad)*2)/2)!important; left:calc(var(--sq-pad)*0.5)!important;}
.sq80 > a {width:calc(100% - (var(--sq-pad)*2)*0.8); left:calc(var(--sq-pad)*0.8);}
.sq100 > a {width:calc(100% - (var(--sq-pad)*2)); left:calc(var(--sq-pad));} */

/*block-border-radius*/
.bs-brb {border-radius:var(--sq-rad);}
.bs-brb-t {border-radius:var(--sq-rad) var(--sq-rad) 0 0;}
.bs-brb-r {border-radius:0 var(--sq-rad) var(--sq-rad) 0;}
.bs-brb-b {border-radius:0 0 var(--sq-rad) var(--sq-rad);}
.bs-brb-l {border-radius:var(--sq-rad) 0 0 var(--sq-rad);}

/*-------------------------------------------------------------------------*/
/*	5.	Grid	
/*-------------------------------------------------------------------------*/
/*
0 - flex-full = column-full
1 - column-1
2 -cent; - flex / column-2c column-2 = gr
3 -gr	
4 -gr
5 -gr
6 -gr
	
	grid - 25 25 25 25 - розпреділення
	column - 20 30 30 20 - колонки
*/
*{
/*** GAP ***/	
--col-gap:4;
--col-gap-1:1vw*var(--col-gap); /* для margin-top*/
--col-gap-2:1vw*var(--col-gap)/2;
--col-gap-3:1vw*var(--col-gap)*2/3;
--col-gap-4:1vw*var(--col-gap)*3/4;
--col-gap-5:1vw*var(--col-gap)*4/5;
--col-gap-6:1vw*var(--col-gap)*5/6;	
	
	--perc:calc(0.25%*var(--col-gap)/2);
}
/*	Ширина блока в %	*/
.w10 {width:10%}
.w15 {width:15%}
.w20 {width:20%}
.w25 {width:25%}
.w30 {width:30%}
.w35 {width:35%}
.w40 {width:40%}
.w45 {width:45%}
.w50 {width:50%}
.w60 {width:60%}
.w70 {width:70%}
.w80 {width:80%}
.w90 {width:90%}
.w100 {width:100%}
.w60m {width:60%; margin:0 auto}
.w70m {width:70%; margin:0 auto}
.w80m {width:80%; margin:0 auto}
.w90m {width:90%; margin:0 auto}	

.grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7 {display:grid; grid-gap:calc(1vw*var(--wrap)/100*var(--col-gap)) calc(1vw*var(--col-gap)); margin-top:var(--margin-top); transition:all 0.3s;}
.grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7 {grid-gap:calc(1vw*var(--wrap)/100*var(--col-gap)) calc(1vw*var(--wrap)/100*var(--col-gap))}

.grid-2 {grid-template-columns:repeat(auto-fill, minmax(calc(100% / 2 - var(--col-gap-2)), 1fr));}
.grid-3 {grid-template-columns:repeat(auto-fill, minmax(calc(100% / 3 - var(--col-gap-3)), 1fr));}
.grid-4 {grid-template-columns:repeat(auto-fill, minmax(calc(100% / 4 - var(--col-gap-4)), 1fr));}
.grid-5 {grid-template-columns:repeat(auto-fill, minmax(calc(100% / 5 - var(--col-gap-5)), 1fr));}
.grid-6 {grid-template-columns:repeat(auto-fill, minmax(calc(100% / 6 - var(--col-gap-6)), 1fr));}
.grid-7 {grid-template-columns:repeat(auto-fill, minmax(calc(100% / 7 - var(--col-gap-7)), 1fr));}


.column-full {margin:var(--margin-top) calc(1vw*var(--wrap)/2 - 50vw);}

.column-center {--perc:calc(var(--col-c-w)/100*var(--col-gap)/2); justify-content:center; margin:calc(0vw - var(--perc)); margin-top:var(--margin-top);}
.column-4.column-center {--perc:calc(0.25vw*var(--col-gap)/4);}
.column-center > div {width:calc(25% - var(--perc)*2); margin:var(--perc);}
.column-center > div:first-child {margin-left:calc(var(--perc) + 0.02%);}

.column-first div:first-child {width:100%}	/*WORK ONLY WITH COLUMN*/
	
	

.column-1 > div {margin-top:calc(1vw*var(--col-gap));}
.column-1 > div, .column-2 > div, .column-3 > div, .column-4 > div, .column-5 > div, .column-6 > div, .column-7 > div {margin-top:calc(1vw*var(--col-gap));}

.column-2 > div.w10 {width:calc(10% - var(--col-gap-2))}
.column-2 > div.w15 {width:calc(15% - var(--col-gap-2))}
.column-2 > div.w20 {width:calc(20% - var(--col-gap-2))}
.column-2 > div.w25 {width:calc(25% - var(--col-gap-2))}
.column-2 > div.w30 {width:calc(30% - var(--col-gap-2))}
.column-2 > div.w35 {width:calc(35% - var(--col-gap-2))}
.column-2 > div.w40 {width:calc(40% - var(--col-gap-2))}
.column-2 > div.w45 {width:calc(45% - var(--col-gap-2))}
.column-2 > div.w50 {width:calc(50% - var(--col-gap-2))}
.column-2 > div.w60 {width:calc(60% - var(--col-gap-2))}
.column-2 > div.w70 {width:calc(70% - var(--col-gap-2))}

.column-3 > div.w10 {width:calc(10% - var(--col-gap-3))}
.column-3 > div.w15 {width:calc(15% - var(--col-gap-3))}
.column-3 > div.w20 {width:calc(20% - var(--col-gap-3))}
.column-3 > div.w25 {width:calc(25% - var(--col-gap-3))}
.column-3 > div.w30 {width:calc(30% - var(--col-gap-3))}
.column-3 > div.w35 {width:calc(35% - var(--col-gap-3))}
.column-3 > div.w40 {width:calc(40% - var(--col-gap-3))}
.column-3 > div.w45 {width:calc(45% - var(--col-gap-3))}
.column-3 > div.w50 {width:calc(50% - var(--col-gap-3))}
.column-3 > div.w60 {width:calc(60% - var(--col-gap-3))}
.column-3 > div.w70 {width:calc(70% - var(--col-gap-3))}

.column-4 > div.w10 {width:calc(10% - var(--col-gap-4))}
.column-4 > div.w15 {width:calc(15% - var(--col-gap-4))}
.column-4 > div.w20 {width:calc(20% - var(--col-gap-4))}
.column-4 > div.w25 {width:calc(25% - var(--col-gap-4))}
.column-4 > div.w30 {width:calc(30% - var(--col-gap-4))}
.column-4 > div.w35 {width:calc(35% - var(--col-gap-4))}
.column-4 > div.w40 {width:calc(40% - var(--col-gap-4))}
.column-4 > div.w45 {width:calc(45% - var(--col-gap-4))}
.column-4 > div.w50 {width:calc(50% - var(--col-gap-4))}
.column-4 > div.w60 {width:calc(60% - var(--col-gap-4))}
.column-4 > div.w70 {width:calc(70% - var(--col-gap-4))}

.column-5 > div.w10 {width:calc(10% - var(--col-gap-5))}
.column-5 > div.w15 {width:calc(15% - var(--col-gap-5))}
.column-5 > div.w20 {width:calc(20% - var(--col-gap-5))}
.column-5 > div.w25 {width:calc(25% - var(--col-gap-5))}
.column-5 > div.w30 {width:calc(30% - var(--col-gap-5))}
.column-5 > div.w35 {width:calc(35% - var(--col-gap-5))}
.column-5 > div.w40 {width:calc(40% - var(--col-gap-5))}
.column-5 > div.w45 {width:calc(45% - var(--col-gap-5))}
.column-5 > div.w50 {width:calc(50% - var(--col-gap-5))}
.column-5 > div.w60 {width:calc(60% - var(--col-gap-5))}
.column-5 > div.w70 {width:calc(70% - var(--col-gap-5))}

.column-6 > div.w10 {width:calc(10% - var(--col-gap-6))}
.column-6 > div.w15 {width:calc(15% - var(--col-gap-6))}
.column-6 > div.w20 {width:calc(20% - var(--col-gap-6))}
.column-6 > div.w25 {width:calc(25% - var(--col-gap-6))}
.column-6 > div.w30 {width:calc(30% - var(--col-gap-6))}
.column-6 > div.w35 {width:calc(35% - var(--col-gap-6))}
.column-6 > div.w40 {width:calc(40% - var(--col-gap-6))}
.column-6 > div.w45 {width:calc(45% - var(--col-gap-6))}
.column-6 > div.w50 {width:calc(50% - var(--col-gap-6))}
.column-6 > div.w60 {width:calc(60% - var(--col-gap-6))}
.column-6 > div.w70 {width:calc(70% - var(--col-gap-6))}
	
.parts-3 + .parts-1 {margin-top:calc(var(--col-gap-3)*3/2);}
	




	


.grid-2.column-first div:first-child {--perc:calc(1%*var(--col-gap)/2); grid-column-start:1; grid-column-end:3; padding:0 0 calc(100%/2 - var(--perc)*2 - var(--sq-bor)*2);}
.grid-3.column-first div:first-child {--perc:calc(1%*var(--col-gap)/2); grid-column-start:1; grid-column-end:4; padding:0 0 calc(100%/3 - var(--perc)*2 - var(--sq-bor)*2);}
.grid-4.column-first div:first-child {--perc:calc(1%*var(--col-gap)/2); grid-column-start:1; grid-column-end:5; padding:0 0 calc(100%/4 - var(--perc)*2 - var(--sq-bor)*2);}
.grid-2.column-first div:first-child a {width:calc(100% - (var(--sq-pad)*2)/2); left:calc(var(--sq-pad)/2);}
.grid-3.column-first div:first-child a {width:calc(100% - (var(--sq-pad)*2)/3); left:calc(var(--sq-pad)/3);}
.grid-4.column-first div:first-child a {width:calc(100% - (var(--sq-pad)*2)/4); left:calc(var(--sq-pad)/4);}


.grid-5.column-first div:first-child {grid-column-start:1; grid-column-end:6;}
.grid-6.column-first div:first-child {grid-column-start:1; grid-column-end:7;}
.grid-7.column-first div:first-child {grid-column-start:1; grid-column-end:8;}
*{--col-c-w:25%}
.column-center > div.box-3 { --col-c-w:25%;
	width:calc(var(--col-c-w) - var(--perc)*2);
	margin:var(--perc);
	
	padding:0 0 calc(var(--col-c-w) - var(--perc)*2 - var(--sq-bor)*2);     padding:0 0 calc(var(--col-c-w)*1.5 - var(--perc)*2 - var(--sq-bor)*2);}

.column-center .sq100 {padding:0 0 calc(25% - var(--perc)*2 - var(--sq-bor)*2);}
.column-center-4 .sq100 {padding:0 0 calc(25% - var(--perc)*2);}
.column-center-5 .sq100 {padding:0 0 calc(20% - var(--perc)*2);}
















@media (max-width:980px) {
.wp-block-gallery.columns-4, .wp-block-gallery.columns-5, .wp-block-gallery.columns-6, .grid-4, .grid-5, .grid-6, .grid-7 {grid-template-columns:repeat(auto-fill, minmax(calc(100% / 3 - var(--col-gap-3)), 1fr))}
}
@media (max-width:720px) {
.wp-block-gallery.columns-3, .wp-block-gallery.columns-4, .wp-block-gallery.columns-5, .wp-block-gallery.columns-6, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7{grid-template-columns:repeat(auto-fill, minmax(48%, 1fr));}
}
@media (max-width:540px) {
.wp-block-gallery.columns-2, .wp-block-gallery.columns-3, .wp-block-gallery.columns-4, .wp-block-gallery.columns-5, .wp-block-gallery.columns-6, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7 {grid-template-columns:repeat(auto-fill, minmax(100%, 1fr));}
}

/*-------------------------------------------------------------------------*/
/*	6.	Box
/*-------------------------------------------------------------------------*/
.box-name {margin:0 0 var(--margin-top);}
.box-block {border:0; overflow:hidden; width:100%;}
.box-img {overflow:hidden; position:relative;}
.box-img img {margin-bottom:0px; margin: 0 auto; justify-content:center; align-content:center; display:flex; max-width:100%; height:100%; object-fit:cover;}
.box-1:hover .box-img img, .box-2:hover .box-img img {transform:scale(1.0)}
.box-img iframe {}


.box-text {margin:0; padding:0px 15px; height:100%;}
.box-text h2, .box-text p, .box-text a {margin-top:var(--margin-top); color: var(--clr-b) ; text-align: center; }
.box-teg, .box-text > a {margin-top:0px}


.box-teg a, .box-teg a p {border:1px solid var(--clr-m); font-size:0.9em; border-radius:var(--sq-rad); padding:5px 10px; display:inline-block; margin:10px 10px 0 0;}
.box-teg a p {margin:0 10px 10px 0;}
.box-teg a:hover, .box-teg a:hover p {border:1px solid var(--clr-m); background:var(--clr-m); border-radius:var(--sq-rad); color:var(--clr-i)}


.box-date {color:var(--clr-g);}
.box-date:before {content:''; position:relative; padding:calc(24px/2); margin-right:15px; background:no-repeat right; background-size:contain; background-image:url(https://sk-security.com.ua/main/img/in-signalb.png);}

.box-icon {width:100%; height:0px; padding-bottom:50px; background:no-repeat center; background-size:contain;}
.box-title {margin:0}
.box-separator {background:var(--clr-m); width:60%; max-width:100%; margin:0 auto; margin-top:2vh; height:2px; display:block; border:0}
/*wp-block-separator*/
.box-expert {/*flex:1 0 auto;*/}
.box-more {bottom:15px}
.box-smm {display:flex; margin-top:var(--margin-top); justify-content:center;}
.box-smm a {width:20px; height:20px; background:none; text-align:center; margin:0 10px;}
.box-smm a p {margin-top:0;}
.box-more:after {content:'\1F812'; margin-left:10px; font-size:2em}
.box-1 a:hover .box-more:after, .box-2 a:hover .box-more:after {margin-left:20px;}
.box-button {background:var(--clr-m); color:var(--clr-i); align-items:center; width:fit-content; padding:10px 20px; border-radius:var(--sq-rad); margin:0 auto; margin-top:var(--margin-top);
	
display:inline-block}
.box-button:after {content:''; padding:calc(26px/2); margin-left:10px; background-size:contain; background-repeat:no-repeat; background-position:center; background-color:none; background-image:url(arr-1b.png);}



/*--------------------------------------------------------------------------------------------------------*/

.box-1 {/*background:; padding:; color:; box-shadow:;*/}
.box-1 .box-block {/*background:; padding:; color:; box-shadow:;*/}
.box-1 .box-img {/*background:; padding:; color:; box-shadow:;*/}
.box-1 .box-text, .box-2 .box-text {/*background:; padding:; color:; box-shadow:;*/}
.box-1, .box-2, .box-3 {position:relative; overflow:hidden;	box-shadow:5px 10px 20px var(--clr-d-o); border: var(--clr-g) var(--sq-bor) solid; border-radius:var(--sq-rad); color:var(--clr-b);}
.box-1:hover, .box-2:hover, .box-3:hover {background:var(--clr-s); border-color: var(--clr-m);}
.box-1 > div:last-child {padding-bottom:calc(var(--margin-top)*2);}

/*wp-block-separator*/
.box-1 a:hover .box-more:after {margin-left:20px;}
/*--------------------------------------------------*/
.box-1 > a.box-block {height:100%; display:block; padding:var(--sq-pad);}
/*--------------------------------------------------*/

.box-1 .box-block, .box-2 .box-block {height:100%;}

.box-1:hover .box-button {background:var(--clr-s); color:var(--clr-i)}
.box-1:hover .box-button:after {content:''; margin-left:10px;}

.box-1:hover .box-text h2 {color: var(--clr-m)}



.box-2:hover .box-button {background:var(--clr-s); color:var(--clr-i)}
.box-2:hover .box-button:after {content:''; margin-left:10px;}

.box-2 > h2 {justify-content:space-between; width:100%;}
.box-2 {--box-wi:33%;}
.box-2 .box-img { border-radius:var(--sq-rad); width:var(--box-wi); height:100%;}
.box-2 .box-text {width:100%;}
.box-2 .box-img + .box-text{width:calc(100% - var(--box-wi));}
.box-2 .box-block {display:flex; justify-content:space-between; flex-wrap:wrap;}
.box-2 .box-block > div:last-child {padding-bottom:calc(var(--margin-top)*4);}
.box-2[class*="sq"] .box-block {position:absolute; height:100%;}
.box-2[class*="sq"] .box-text {position:relative;}


.box-3 .box-block {display:block; position:relative; background-color:var(--clr-i); background-size:cover;}
.box-3 .box-img {position:absolute; z-index:1; height:100%; width:100%}
.box-3:hover .box-img img {transform:scale(1.1)}
.box-3 .box-text {padding:0 var(--sq-pad); height:calc(100% - var(--sq-pad)*2); top:var(--sq-pad); width:calc(100% - var(--sq-pad)*2); position:absolute; z-index:2; left:var(--sq-pad); text-align:center; min-height:50px; background-color:rgb(0, 0, 0, 0.64); color:var(--clr-i); overflow:hidden; transition-duration:0.5s; transition:0.5s;}	

.box-3 .box-text[class*="grid-"] {display:grid;}
.box-3 .box-text.grid-f {align-content:space-between;}
.box-3 .box-text.grid-c {align-content:center;}
.box-3 .box-expert, .box-3 .box-more {color:var(--clr-w)}
.box-3 .box-pad {}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! - де саме ставити */
.column-center .box-3 .box-block {position:absolute; height:100%;}


/*squeeze box-z*/
.box-3 [class*="box-z"] {height:5%; -webkit-transition:all 0.6s ease; transition:all 0.6s ease;}
.box-3 .box-text.box-z-t {top:var(--sq-pad)}
.box-3 .box-text.box-z-c {top:calc(50% - var(--sq-pad));}
.box-3 .box-text.box-z-b {bottom:var(--sq-pad); top:auto}
.box-3:hover .box-z-c {top:var(--sq-pad);}

.box-text[class*="box-z"] .box-teg, .box-3 [class*="box-z"] .box-icon, .box-3 [class*="box-z"] .box-date, .box-3 [class*="box-z"] .box-expert, .box-3 [class*="box-z"] .box-separator, .box-3 [class*="box-z"] .box-more {max-height:0px; padding-bottom:0px; overflow:hidden; margin-top:0;}
.box-3 [class*="box-z"] .box-text a, .box-3 [class*="box-z"] .box-text h2 {margin-top:0;}
/*.box-3 .box-text > a {width:calc(100% - var(--sq-pad)*2);}*/
.box-3 [class*="box-z"] .box-more {opacity:0;}


.box-3:hover [class*="box-z"] {height:calc(100% - var(--sq-pad)*2); -webkit-transition:all 0.3s ease; transition:all 0.3s ease;}
.box-3:hover [class*="box-z"] .box-teg, .box-3:hover [class*="box-z"] .box-icon, .box-3:hover [class*="box-z"] .box-date, .box-3:hover [class*="box-z"] .box-expert, .box-3:hover [class*="box-z"] .box-separator, .box-3:hover [class*="box-z"] .box-more, .box-3:hover [class*="box-z"] .box-text > a{-webkit-transition:all 0.4s ease; transition:all 0.4s ease; max-height:300px; margin-top:var(--margin-top);}
.box-3:hover [class*="box-z"] .box-icon {padding-bottom:50px}
.box-3:hover [class*="box-z"] .box-more {opacity:1;}

/*box-on-img - only box-1*/
.box-on-img {width:80%; margin:0 auto; margin-top:-20%; z-index:2; position:relative; background:var(--clr-w); padding:0 10px 10px;}
.box-1 > h2 + .box-block .box-img {border-radius:var(--sq-rad) var(--sq-rad) var(--sq-rad) var(--sq-rad);}

/*Poloroid - only box-3*/
.box-pol {--pol-color:var(--clr-i); --pol-rad:20px}
.box-pol {border-radius:var(--sq-rad); border:var(--sq-bor) solid var(--clr-m);}
.box-pol .box-block {position:absolute; height:100%; display:grid; border-radius:var(--sq-rad); border:var(--pol-rad) solid; border-color:var(--pol-color); z-index:1;}
.box-pol > h2, .box-pol > a > h2 {bottom:0; position:absolute; justify-content:space-between; align-items:center; background:var(--pol-color); border:var(--pol-rad) solid; border-color:var(--pol-color); width:100%; z-index:2}
.box-pol:hover {border-color:var(--clr-m);}
.box-pol:hover .box-block {height:100%; padding:0; border-color:var(--clr-m);}
.box-pol:hover > h2 {background:var(--clr-m); color:var(--pol-color); border-color:var(--clr-m);}
/*-------------------------------------------------------------------------*/
/*	7.	Grid + Box
/*-------------------------------------------------------------------------*/
/*background-color*/
.bs-bg-c {background-color:var(--clr-w)}

/*image-background-gradient-hover*/
/* START OLD */
.image-bg {position:absolute; padding:0 0 0 100%; height:0%; background:linear-gradient(180deg, var(--clr-bg-gr)); bottom:0; transition:0.5s;}
div:hover > div > .image-bg {height:100%;}
.image-bg-gr-b {position:absolute; padding:0 0 0 100%; height:0%; background:linear-gradient(180deg, var(--clr-bg-gr)); bottom:0; transition:0.5s;}
div:hover > div > .image-bg-gr-b, div:hover > div > .image-bg-gr-t {height:100%;}
.image-bg-gr-t {position:absolute; padding:0 0 0 100%; height:0%; background:linear-gradient(0deg, var(--clr-bg-gr)); top:0; transition:0.5s;}
div:hover > div > .image-bg-gr-t, a:hover > div > .image-bg-gr-t, div:hover > div > .image-bg-gr-b, a:hover > div > .image-bg-gr-b {height:100%;}
/* END OLD */

.box-img > [class*="bg-"] {position:absolute; transition:0.5s; padding:0 0 0 100%; height:100%; bottom:0; background:var(--clr-b); opacity:0}
.box-img > [class*="bg-sl-"] {transform:translate(0%)}
.box-img > .bg-sl-t {background:linear-gradient(0deg, var(--clr-bg-gr)); transform:translateY(-100%);}
.box-img > .bg-sl-l {background:linear-gradient(90deg, var(--clr-bg-gr)); transform:translateY(100%);}
.box-img > .bg-sl-r {background:linear-gradient(270deg, var(--clr-bg-gr)); transform:translateY(-100%);}
.box-img > .bg-sl-b {background:linear-gradient(180deg, var(--clr-bg-gr)); transform:translateY(100%);}
[class^="box-"]:hover .box-img [class*="bg-"] {opacity:0.7}
[class^="box-"]:hover .box-img [class*="bg-sl-"] {transform:translate(0%); opacity:1}


.box-button.hidden {height:0px; padding:0px; overflow:hidden; transition:all 0.4s ease; margin:0 auto}
div[class*="box-"]:hover .box-button.hidden {display:block; padding:10px 20px; height:auto; margin-top:var(--margin-top); transition:all 0.4s ease;}

/*ICONS*/
[class*="ico-"] {display:inline-block; position:relative; align-items:flex-start;}
[class*="ico-a"] {justify-content:space-between;}
[class*="ico-"]:after, [class^="ico-"]:before {content:'';background-size:contain; background-repeat:no-repeat; background-position:center; background-color:none; display:inline-block; vertical-align:middle;}
[class*="ico-b"]:before {margin-right:20px; padding:calc(50px/2);}
[class*="ico-a"]:after, [class^="ico-ba"]:after {padding:calc(24px/2); margin-left:20px;}

/*----- BOX with HEADER -----*/
[class^="box"] h2 {font-size:1.1em; text-transform: uppercase}
[class^="box"] > h2 {width:100%}

.title-b, .title-t {display:grid; align-content:space-between;}
.title-b > .title, .title-t > .title {margin:0;  justify-content:space-between; padding:var(--sq-pad) var(--sq-pad);}/*
.title-t > .title {margin-top:0; margin-bottom:0px;}
.title-b > .title {margin-bottom:0px; padding-bottom:0;}*/


h2[class*="ico-"] {width:100%}
h2[class*="ico-a"]:after, h2[class^="ico-ba"]:after {position:absolute; right:0; }

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:none;}



.bloc-hov {} /* FOR HOVER TRANSITION*/
.bloc-hov:hover .icon-c8:after, .icon-c8-prl {background-image:url(https://sk-security.com.ua/main/img/in-signalb.png);}
.bloc-hov:hover .icon-rot:after{transform:rotate(90deg);}
.bloc-hov:hover .icon-sld:after{margin-right:0px;}
.bloc-hov:hover .more {color:var(--clr-m)}
.bloc-hov:hover .more:after {content:'3'; padding-left:20px;}



/*ICONS - IMG*/
.web-icon-18 {background-image:url(https://sk-security.com.ua/main/img/in-signaly.png)}

.icon-h1:before{background-image:url(icon-des-01.png);}
.icon-h2:before{background-image:url(icon-des-02.png);}
.icon-h3:before{background-image:url(icon-des-03.png);}
	
.icon-c2:after {background-image:url(f-icon-a.png);}
.icon-c8:after {background-color:#f00; background-image:url(https://sk-security.com.ua/main/img/in-signaly.png);}

.icon-arr:after {content:'\21E2'; font-size:1.5em; line-height:1;}

/*-------------------------------------------------------------------------*/
/*	8.	Box more	
/*-------------------------------------------------------------------------*/


/*-------------------------------------------------------------------------*/
/*	4.	Typo 2
/*-------------------------------------------------------------------------*/
/*****checkbox radio*****/
input[type="checkbox"], input[type="radio"] {-webkit-appearance:none; appearance:none; top:var(--quat-lbl-radio); position:relative; width:calc(var(--lbl-radio) + var(--radius-lbl-radio) * 2); height:calc(var(--lbl-radio) + var(--radius-lbl-radio) * 2); margin-right:var(--half-lbl-radio); padding-left:calc(var(--lbl-radio) + var(--half-lbl-radio) / 2); cursor:pointer; border:none; }
input[type="checkbox"]::before, input[type="radio"]::before {-webkit-appearance:none; appearance:none; content:""; display:block; position:absolute; width:var(--lbl-radio); height:var(--lbl-radio); left:0; top:calc(50% - var(--half-lbl-radio)); margin-top:margin-top:calc(var(--half-lbl-radio) * -1); border:var(--radius-lbl-radio) solid var(--clr-m);}
input[type="checkbox"]:after, input[type="radio"]:after {-webkit-appearance:none; appearance:none; content:""; display:block; position:absolute; width:0; height:0; top:50%; left:calc(var(--lbl-radio) / 2); margin-top:0; background:var(--clr-m); transition:.2s ease-in-out; overflow:hidden}
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {transform:scale(1); }
input[type="checkbox"]:checked::after, input[type="radio"]:checked::after{height:calc(var(--half-lbl-radio) * var(--lbl-radio-in)); width:calc(var(--half-lbl-radio) * var(--lbl-radio-in)); margin-top:calc(var(--half-lbl-radio) * var(--lbl-radio-in) / 2 * -1 + var(--radius-lbl-radio)); left:calc((var(--lbl-radio) - var(--half-lbl-radio) * var(--lbl-radio-in)) / 2 + var(--radius-lbl-radio));}

input[type="checkbox"]:focus, input[type="radio"]:focus {border-bottom:0px;}
input[type="checkbox"] + label, input[type="radio"] + label {display:inline-flex; 
	font-size:0.9em;font-weight:400; align-items:center; margin-right:var(--margin-top)}
input[type="checkbox"] + label {} 
input[type="checkbox"]:checked + label {}
input[type="radio"]:before, input[type="radio"]:after {border-radius:50%;}

fieldset {display:flex; flex-wrap:wrap; align-items:center; margin-top:var(--margin-top); padding:0 24px 24px; border:1px solid var(--clr-b);}
fieldset label {width:auto!important; margin-right:20px}
fieldset div {width:48%; margin-right:2%; display:flex; align-items:center; margin-top:var(--margin-top);}
fieldset div label {width:calc(100% - 1.7em)!important; margin-right:0px}
fieldset div input[type="checkbox"], fieldset div input[type="radio"] {top:auto}
fieldset div input[type="checkbox"] + label, fieldset div input[type="radio"] + label {margin:0}
.div-checkbox {display:flex; margin-top:var(--margin-top);}
.div-checkbox input[type="checkbox"] {top:0}
.div-checkbox input[type="checkbox"] + label {margin-top:0px}

/*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;} */

/*file*/
::-webkit-file-upload-button {background:black; -webkit-border-radius:0px; color:var(--clr-m); padding:12px; font-size:16px}

/*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:var(--clr-b); border-radius:0; height:0;}
input[type="range"]::-webkit-slider-runnable-track {background-color:var(--clr-b); 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:var(--clr-b); 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(--margin-top); width:100%;}
select {width:100%; outline:0; font-weight:600; border-radius:0px; appearance:none; -webkit-appearance:none; -moz-appearance:none; margin-top: var(--margin-top);}
select::-ms-expand {display:none;}
select:hover, select:focus {}
select:disabled {opacity:0.5; pointer-events:none;}
.select_arrow {position:absolute; top:25px; right:23px; width:10px; height:10px; border:solid var(--clr-m); border-width:0 3px 3px 0; display:inline-block; padding:3px; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
.select select:hover ~ .select_arrow, .select select:focus ~ .select_arrow {border-color:var(--clr-w);}
.select select:disabled ~ .select_arrow {border-top-color:var(--clr-d);}
option { font-weight:normal; background:var(--clr-m); color:var(--clr-w);}
option:hover { font-weight:normal; background:var(--clr-m); box-shadow:0 0 10px 100px var(--clr-m) inset;}

/*textarea*/
textarea {overflow:auto; vertical-align:top; resize:vertical; border-radius:0; width:100%; margin-top:var(--margin-top); color:var(--clr-m); background:none; 
    border:1px solid;
    flex-direction:column;
    resize:auto;
    cursor:auto;
    padding:18px; white-space:pre-wrap; word-wrap:break-word; 
	
	border-bottom:2px solid var(--clr-m);}
/*------ General style ------*/
.list-style-2 {padding-left:2em;}
.list-style-2 li {margin-top:var(--margin-top)}
.list-style-2 li::marker {font-size:1.4em; content:'\2B57\00A0'; color:var(--clr-b)!important;}
.list-style-2 li strong {width:100%; display:block; font-size:1.33em; padding-bottom:var(--margin-top)}

.has-drop-cat {border:1px solid var(--clr-m); padding:25px!important; display:flex; margin:calc(var(--margin-top) + 15px) 0;}
.has-drop-cat strong {font-weight:600; margin-right:0.3em;}
.has-drop-cap:not(:focus)::first-letter {float:left; font-size:2.5em; line-height:0.75; font-weight:700; margin:5px var(--margin-top) var(--margin-top) 0; text-transform:uppercase; font-style:normal;}
	
.wp-block-quote {/*background:rgba(255,200,4,0.2); color:#000; padding:25px; border-left:2px solid rgba(255,200,4,1.00); margin:20px 0 0; padding-left:1em;*/}
.wp-block-quote p {font-size:1.22em; margin-top:0; color:var(--clr-m)}
.wp-block-quote p:before {content:"«";}
.wp-block-quote p:after {content:"»";}
.wp-block-quote cite {}
.wp-block-quote cite:before {content:"– ";}
	
.wp-block-pullquote {margin:var(--margin-top) 0 0; padding:3em 0; text-align:center; overflow-wrap:break-word;}
.wp-block-separator {margin-top:var(--margin-top); background:var(--clr-d); height:2px; border:0;}
/*-------------------------------------------------------------------------*/
/*	4.	Script
/*-------------------------------------------------------------------------*/
.right-im {float:right; margin:0 0 var(--margin-top) var(--margin-top);}
.cat-equi .box-1:hover {background:none}


.cont-ico {background:rgba(240, 255, 228, 1); padding:20px; width:40%; margin-bottom:60px;}
.cont-ico p {width:100%; margin-bottom:15px; padding-bottom: 15px; border-bottom: 1px solid var(--clr-g)}
.cont-ico p:before {content: ''; margin-right:20px; background-repeat:no-repeat; background-size: contain; background-position: center; padding: 29px 24px}
.cont-ico-1:before {background-image: url(https://driver.ardenis.com.ua/main/cont-ico-1.png)}
.cont-ico-2:before {background-image: url(https://driver.ardenis.com.ua/main/cont-ico-2.png)}
.cont-ico-3:before {background-image: url(https://driver.ardenis.com.ua/main/cont-ico-3.png)}
/*-------------------------------------------------------------------------*/
/*	4.	Single
/*-------------------------------------------------------------------------*/
input {padding: 5px!important}
.overlay:target+.modal_good  {top: 50%; opacity: 1; display: block; visibility: visible;}	

.modal_good {width:80%; border-radius:12px; background:#fff; position: fixed; left:10%; opacity:0; display: none; z-index:999999; padding:25px;}
.overlay:target { z-index:99999; position: fixed; background-color: #000; opacity: 0.8; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer;}
.modal_good #modal_close {width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block;}
	
	
#modal_form5 {width:80%; max-width:1180px; border-radius:12px; background:#fff; position: fixed; left:50%; margin-left:-590px; display: none; opacity: 0; z-index:999999; padding:25px;}
#overlay { z-index:99999; position: fixed; background-color: #000; opacity: 0.8; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer; display: none;}
#modal_form5 #modal_close {width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block;}
.osnImg {width: 50 px; height: 50px; border: 1px solid #999999; cursor: pointer; padding: 3px;}	
.tzagl {margin: 10px 0; font-weight: 600;}
.stamp-box {text-align:center; padding:15px;}
.stamp-box:hover {background:none}
.stamp-box h2 {position:absolute; top:8px; right:15px; text-align:right; width:auto;}
.stamp-box button {padding:10px 20px; min-width:auto}
.formstam1 {width: 45%}
.formstam1 div {width:100%}
.formstam1 select {padding: 16px;}
.formstam2 {width:100%; margin-top:15px}
.formstam2 .rform {width:40%}
.formstam2 .bform {max-width:55%; display: grid; justify-content: end;}
.rform input {border-bottom: none; font-weight: 600; font-size: 2em;}


.sidebar-form {margin-top:50px}
.sidebar-form h2 {font-size:1.1em;}
.sidebar-form .form {width: 50%; padding:20px 60px; background:rgba(240, 255, 228, 1) }
.sidebar-form .img {width: 50%;}
.sidebar-form .img img { object-fit: cover; height: 100%;}
.sidebar-form .fform input {width: 100%; font-size: 0.9em; border-radius: 0;}
::-webkit-file-upload-button {background:var(--clr-s); -webkit-border-radius:0px; color:var(--main-color); border:0; padding:2px; font-size:1em}

.cat-top-block {float: right; width: 40%; margin: 0 0 20px 20px;}
.cat-top-desc {margin-bottom: 20px}
.cat-top-dost {border-top:3px solid rgba(1, 97, 39, 1) ; width: 100%; margin:20px 0 30px}
.cat-top-dost div {width: 48%}

.cat-stamp {}
.sin-cat-stamp .img {width:50%}
.osn, .stampa {width: 48%; display: grid; justify-content: center;}
.osn img, .stampa img {width: 100%; max-width:180px}
.osns {}
.tzagl {}
.osnImg {width: 50px; height: 50px; border:none; cursor: pointer; padding:0}


@media screen and (max-width:1480px) {
#modal_form5 {width:80%; left:10%; margin-left:0px}
}

@media screen and (max-width:1366px) {
html, body {min-height:100vh; font-size:18px; line-height:1.5; font-weight:400}
}
@media screen and (max-width:1199px) {
.header-menu-drop .top-sub{top:7px; position:absolute; right:50px;} 
}

@media screen and (max-width:980px) {
html, body {font-size:16px;}
}
@media screen and (max-width:860px) {
html, body {font-size:18px;}
#modal_form5 > form > .flex > .flex {width: 100%}
.cat-top-dost div {width:100%}
.sidebar-form {overflow: hidden; position: relative}
.sidebar-form .form {width:100%; z-index: 2; background:rgba(240, 255, 228, 0.6) ;}
.sidebar-form .img {width:auto; max-width: 100%; position: absolute; bottom: 0; height: 100%; right: 0; z-index: 1;}
}
@media screen and (max-width:720px) {
html, body {font-size:18px;}
}
/*-------------------------------------------------------------------------*/
/*	4.	Category
/*-------------------------------------------------------------------------*/
.wp-block-gallery.columns-2, .wp-block-gallery.columns-3, .wp-block-gallery.columns-4, .wp-block-gallery.columns-5, .wp-block-gallery.columns-6, .wp-block-gallery.columns-7 {display: grid; grid-gap: calc(1vw*var(--wrap)/100*var(--col-gap)) calc(1vw*var(--wrap)/100*var(--col-gap)); margin-top: var(--margin-top);}

.wp-block-gallery.columns-2 {grid-template-columns: repeat(auto-fill, minmax(calc(100% / 2 - var(--col-gap-2)), 1fr));}
.wp-block-gallery.columns-3 {grid-template-columns: repeat(auto-fill, minmax(calc(100% / 3 - var(--col-gap-3)), 1fr));}
.wp-block-gallery.columns-4 {grid-template-columns: repeat(auto-fill, minmax(calc(100% / 4 - var(--col-gap-4)), 1fr));}
.wp-block-gallery.columns-5 {grid-template-columns: repeat(auto-fill, minmax(calc(100% / 5 - var(--col-gap-5)), 1fr));}
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {margin:0; width:100%;}
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {background:none; color: #000; font-size: initial; margin-bottom: 0; position: initial; width: 100%;}

.wp-block-gallery.columns-2 figure, .wp-block-gallery.columns-3 figure, .wp-block-gallery.columns-4 figure, .wp-block-gallery.columns-5 figure {width: 100%}
	




@media (min-width:600px) {
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {margin:0; width:100%;}
.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {width: 100%}
.wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {width: 100%}
}
@media (max-width:780px) {
.wp-block-gallery.columns-5 {grid-template-columns: repeat(auto-fill, minmax(calc(100% / 3 - var(--col-gap-3)), 1fr));}
}
@media (max-width:680px) {
.wp-block-gallery.columns-4 {grid-template-columns: repeat(auto-fill, minmax(calc(100% / 3 - var(--col-gap-3)), 1fr));}
}
@media (max-width:580px) {
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {margin:0; width:100%;}
.wp-block-gallery.columns-3, .wp-block-gallery.columns-4, .wp-block-gallery.columns-5, .wp-block-gallery.columns-6 {grid-template-columns: repeat(auto-fill, minmax(calc(100% / 2 - var(--col-gap-2)), 1fr));}

}
@media (max-width:480px) {
.wp-block-gallery.columns-2, .wp-block-gallery.columns-3, .wp-block-gallery.columns-4, .wp-block-gallery.columns-5, .wp-block-gallery.columns-6 {grid-template-columns: repeat(auto-fill, minmax(calc(100% - var(--col-gap-1)), 1fr));}

}

/*-------------------------------------------------------------------------*/
/*	3.	Main	
/*-------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------*/
/*	3.	CMS	
/*-------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------*/
/*	3.	Original	
/*-------------------------------------------------------------------------*/


/*-------------------------------------------------------------------------*/
/*	3.2	Keyframes
/*-------------------------------------------------------------------------*/
footer {margin-top: 10vh; background-color:rgba(1, 97, 39, 1); padding: 40px calc((100vw - 1vw*var(--wrap))/2) 10px}
.foot-logo {width:119px}
.foot-logo img{max-width: 119px}
.foot-tel {width:calc(80% - 119px - 40px); margin-bottom: 30px; padding:0 20px}
.foot-tel div {}
.foot-tel div a p {color: #fff; width: fit-content;}
.foot-smm {width:20%; justify-content:right; margin: 10px 0}
.foot-smm a p {background-repeat:no-repeat; margin:0 10px; background-position:center; background-size: contain; width: 40px}
.foot-rights {width:100%; color: #fff; text-align: center; border-top:#fff 3px solid; padding:20px 0}

@media (max-width:1224px) {
.foot-smm {width:auto}
.foot-smm a p {width:30px}
}
@media (max-width:720px) {
.foot-tel {width:100%; margin:30px 0; padding:0}
.foot-smm {position: absolute; right: 5%;}
}



@media (max-width:640px) {
.foot-tel div {width: 100%;}
.foot-tel div a p {color: #fff; width: 100%; text-align: center;}
}







</style>