@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}
/*first load only 1*/ @font-face{font-family:Montserrat; src:url(Montserrat-Regular.woff) format('woff'); font-weight:400;font-display:swap; 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}

/*-------------------------------------------------------------------------*/
/*	0	Font + Root + Variables + Browser Reset
/*-------------------------------------------------------------------------*/
:root { /*** COLOR ***/	
--clr-m:#e03257;							/*clr - color; m - main*/
--clr-s:#F0F8FF;							/*s - second*/ 
--clr-t:#035B85;							/*t - third*/ 
--clr-w:#fff;							/*w - third*/
--clr-g:#cacdcc;							/*g - grey*/
--clr-d:#7c858c;							/*d - dark grey*/
--clr-b:#061b2b;							/*b - black*/
--clr-i:#ffffff;							/*i - color in main color*/
--clr-o:0.7;								/*o - opacity*/
--clr-m-o:rgba(224,50,87, 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(255,255,255, var(--clr-o));	/*w - third*/ 
--clr-g-o:rgba(202,205,204, var(--clr-o));	/*g - grey*/ 
--clr-d-o:rgba(124,133,140, var(--clr-o));	/*d - dark grey*/
--clr-b-o:rgba(6,27,43, var(--clr-o));		/*t - black*/ 
--clr-bg-gr:rgba(255, 200, 4, 0) 0%, rgba(255, 200, 4, var(--clr-o)) 100%; /*bg gradient*/
--bg-gradient-s:rgba(255, 200, 4, 0) 0%; --bg-gradient-e:rgba(255, 200, 4, var(--clr-o)) 100%; /*** COLOR  change***/
/*** COLOR  END***/	
	

--wrap:90;
--margin-top:40px;
	
--head-logo-w:250px;
--head-margin-l:20px;
--side-left-w:250px;
--side-right-w:250px;

/*** GAP ***/	
--min-div-w:120px;
--col-gap-px:40; /* 1 = 1px*/
--col-gap-vw:0; /* 1 = 1vw*/
--col-gap:calc(1vw*var(--col-gap-vw) + 1px*var(--col-gap-px));
	
	
--border-radius-full:250px;
--border-radius-block:20px;
--sq-rad:0px; /*block-border-radius*/
--sq-33:0 0 33%;
--sq-10:0 0 10%;
--sq-bor:0px; /*block-border*/
--sq-pad:0%; /*block-pading*/
	

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

:root {
/**/
--logo-head-width:120px;	
--theme-var-sidebar: calc( var(--theme-var-page) * var(--theme-var-sidebar_prc) );
--url:url("https://picsum.photos/id/1/200/300");
}
.box {background:var(--url);} /*test example*/

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


/*-------------------------------------------------------------------------*/
/*	0.3	Browser Reset
/*-------------------------------------------------------------------------*/
*{-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:'Montserrat', sans-serif;}
input:focus {outline:0; background:var(--clr-m)}
::selection {background:var(--clr-m); color:#fff; text-shadow:none;}
:after, :before {-webkit-transition:all 0.4s ease; transition:all 0.4s ease;}

html, body {min-height:100vh; font-size:22px; line-height:1.5; font-weight:500}
body {background:#1c2d3c; display:flex; flex-direction:column; -webkit-font-smoothing:antialiased;}

/*-------------------------------------------------------------------------*/
/*	1	Globally Applied Styles	+ Typography + Constant	
/*-------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------*/
/*	1.1	Globally Applied Styles
/*-------------------------------------------------------------------------*/
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-w);}

header {width:100%; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
main {flex: 1 0 auto; width:100%}
main > section {}
footer {flex: 0 0 auto; width: 100%}
article {padding: 0px 0;}
section {width: 100%;}
article p, article ul, article ol {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:#aaa;}
strong {}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
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; letter-spacing:-0.022em; color:var(--clr-b); margin:1.5em 0 1em; font-weight:800; text-transform:none;} 
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:20px; border:none; background:none; background:var(--clr-d); width:100%; color:var(--clr-w); border-radius:2px;}

button, input {overflow:visible;}
button, select, [type="button"], [type="reset"], [type="submit"] {cursor:pointer; align-items:center; -webkit-appearance: button; height: 58px; 
	border: 1px solid var(--clr-b); color: var(--clr-b); font-size:1em; border-radius:0; background:none; 
	padding:18px 25px; width: auto; min-width:150px; text-transform: none;}
button::-moz-focus-inner, input::-moz-focus-inner {padding: 0; border: 0;}
button {background: none; 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:#fff; background-color:var(--clr-m);}
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 {background:#9ba4aa}
input::placeholder, textarea::placeholder {color:var(--clr-w); font-size:100}
textarea:focus {min-height:120px;}

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(--margin-top); max-width:100%; position:relative; word-break: break-word;}
td {border:0.5px solid #000; padding:24px 24px; 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;}

article ol li {list-style: decimal}	
article ul li {list-style: disc;}
article 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:#cacaca}
time {color:var(--clr-m);}
/*-------------------------------------------------------------------------*/
/*	1.2	Typography
/*-------------------------------------------------------------------------*/
/*****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:#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(--margin-top); width:100%;}
select {width:100%; outline:0; font-weight:600; border-radius:0px; color:var(--clr-m); 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: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:#fff;}
.select select:disabled ~ .select_arrow {border-top-color: #cccccc;}
option { font-weight:normal; background:var(--clr-m);}
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);}

/*-------------------------------------------------------------------------*/
/*	1.3	Constant
/*-------------------------------------------------------------------------*/
.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);}

/* Співвідношення висоти до ширини блока*/
.sq20 {padding:0 0 calc(20% - var(--sq-bor)*2);}
.sq25 {padding:0 0 calc(25% - var(--sq-bor)*2);}
.sq30 {padding:0 0 calc(30% - var(--sq-bor)*2);}
.sq33 {padding:0 0 calc(33% - var(--sq-bor)*2);}
.sq50 {padding:0 0 calc(50% - var(--sq-bor)*2);}
.sq66 {padding:0 0 calc(66% - var(--sq-bor)*2);}
.sq75 {padding:0 0 calc(75% - var(--sq-bor)*2);}
.sq80 {padding:0 0 calc(80% - var(--sq-bor)*2);}
.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));} */


.grid-m	{display:grid; align-content:center;}
.grid-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;}


.title-b, .title-t {display:grid; align-content:space-between;}
.title-t > h2a {margin-top: 0; margin-bottom:0px;}
.title-b > h2a {margin-bottom: 0px; padding-bottom:0;}
.box-title-top, .box-title-but {display:grid; align-content:space-between;}


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

/*-------------------------------------------------------------------------*/
/*	3	Header + Search Bar Styles
/*-------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------*/
/*	3.	Sidebar
/*-------------------------------------------------------------------------*/
article {width: 100%}
article.has-side {width:calc(100% - var(--side-right-w) - var(--side-left-w) - var(--margin-top)*2 ); order: 3; background:var(--test-bg)}
.side-left {width:var(--side-left-w); order:2; background:var(--test-bg)}
.side-right {width:var(--side-right-w); order:4; background:var(--test-bg)}
.side-bottom {order:5; width:100%; margin-top:var(--margin-top); background:var(--test-bg)}

.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, .has-aside > a {width:100%}
.has-aside > aside {width:30%; background:#f0f; margin-top:calc(1vw*var(--col-gap));}
.has-aside > section /*or article*/ {width:calc(100% - 30% - var(--col-gap-2)*2); background:#0f0; margin-top:calc(1vw*var(--col-gap));}
.has-aside h2 {margin-top:0}
/*-------------------------------------------------------------------------*/
/*	3.1	Header & Top & Menu
/*-------------------------------------------------------------------------*/

header.wrap {width:100%; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; padding-top:20px; padding-bottom: 20px; background:rgba(6, 27, 43, 1); box-shadow: 0 1px 7px rgb(0 0 0 / 25%); border-bottom: 0px var(--clr-m) solid;
/* position: absolute; top: 0; background: rgba(251,247,247,0.10) */
}

.menu-color-rev {--clr-m: var(--clr-m); background: var(--clr-m)}

.header-menu-drop.sticky{position:sticky; z-index:99; top:0; background-color:var(--clr-w)}
header .header-top {padding-bottom:var(--head-margin-l);}
#menudrop, #menudrop ul,#menudrop ul li,#menudrop ul li a,#menudrop #head-mobile{border:0;list-style:none;line-height:1;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; display:block; -webkit-transition: all .25s ease; -ms-transition: all .25s ease; transition: all .25s ease;}
#menudrop {display: flex!important; justify-content: space-between; font-family:sans-serif; font-size: 16px; flex-grow:1;}
#menudrop > * {margin-left: 20px}
#menudrop > *:first-child{margin-left:0px}
.header-menu-drop #menudrop > .button + * {margin-left:0px}
.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;}

.logo-top {display:flex; align-items:center; width:var(--head-logo-w); max-width:100%; z-index:993}
.top-sub {display:flex; align-items: flex-start;}
.header-menu-slide .top-sub {flex-grow: 1;}
.top-smm {display:flex;}
.top-smm a, .top-search, .top-sub > li {margin-left:calc(var(--margin-top)/2)}
.top-sub > li:first-child {margin-left:0}
.top-sub > li {background: none}
.top-sub > li::before {margin-right:calc(var(--margin-top)/2)}
.top-smm a:first-child {margin-right:0px}
.top-smm a p, .top-search a p, .top-sub > li::before {background-repeat:no-repeat; content:''; background-position:left; background-size:contain; padding:calc(var(--margin-top)*1.5); /*width: 42px; height: 43px;*/}

.foot-smm {align-items: center}
.foot-smm a:first-child {margin-right:0px}
.foot-smm a p, .foot-search a p {background-repeat:no-repeat; content:''; background-position:left; background-size:contain; padding:calc(var(--margin-top)*1.5); /*width: 42px; height: 43px;*/}





.breadcrumbs {padding:20px; font-size:0.8em; background:var(--clr-m); width:100%; margin-top:calc(var(--margin-top)*1); margin-bottom:var(--margin-top)}
.breadcrumbs nav {display:flex;}
.breadcrumbs span {}
.breadcrumbs a {text-decoration: none; color:var(--clr-w);}
.breadcrumbs a:hover {color:var(--clr-w);}
.breadcrumbs a span {text-decoration: none; color:var(--clr-w); font-size:inherit;}
.breadcrumbs a span:hover {color: var(--clr-g);}
.breadcrumbs__separator {font-weight: 700; padding: 0 5px}
.breadcrumbs__current {color:var(--clr-g); font-size:inherit;}
.breadcrumbs li {padding-right: 15px; display: block;}
.breadcrumbs li:before {content: '';}

.navigation {flex-grow: 1}
.temp-03 #menudrop .breadcrumbs {order:15; margin-left:var(--head-margin-l); position: absolute; bottom: 0; left: var(--head-logo-w); width:calc(100% - var(--head-logo-w) - var(--head-margin-l));}
.temp-02 #menudrop {align-items: center;}
#menu-s {top:0}	
@media screen and (max-width: 1086px) {
#menudrop .button {z-index: 999; order:9;}
#menudrop .navigation {z-index: 999; order:10; width:100%; background: #ccc;}
}



footer.wrap {margin-top:var(--head-margin-l); background:var(--test-bg)}
footer > * {margin-top:var(--head-margin-l)}
footer > *:last-child {margin-bottom:var(--head-margin-l)}	
footer > .sub {border-top: 2px solid var(--clr-w); padding-top:var(--head-margin-l); align-items: center;}
footer > .box-4 div {margin-top:var(--head-margin-l)}
footer .part-2	{display: flex; border:2px solid #fff; border-block: none; padding: 0 var(--head-margin-l); align-items: center; flex-wrap: wrap; align-content: center; text-align: center;}
/*-------------------------------------------------------------------------*/
/*	X	Typo 2
/*-------------------------------------------------------------------------*/

/*------ 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: #ccc; height:2px; border: 0;}


/*-------------------------------------------------------------------------*/
/*	X	DONT KNOW
/*-------------------------------------------------------------------------*/


/*background-color*/
.bs-bg-c {background-color:#FFFFFF}

/*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:#000; 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 {} /*для всіх H2 */
.grid-2 h2, .grid-3 h2, .grid-4 h2, .grid-5 h2, .grid-6 h2, .grid-7 h2 {font-size: 1.1em}
[class^="box"] h2 {font-size:1.1em;}






.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: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(--margin-top); padding: calc(50px/2);}
[class^="ico-a"]:after, [class^="ico-ba"]:after {margin-left:var(--margin-top); 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;}













.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: -8px;}
.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;}


/* keyframes*/

@keyframes slideShow {
  0% {
    opacity: 0;
    transform: scale(1);
    -ms-transform: scale(1);
  }
  4% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  28% {
    opacity: 0;
    transform: scale(1.1);
    -ms-transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
    -ms-transformm: scale(1);
  }
}
@-webkit-keyframes slideShow {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
  }
  4% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  28% {
    opacity: 0;
    -webkit-transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -webkit-transformm: scale(1);
  }
}