/* Change 2025/07/13 */ /*-------------------------------------------------*/ /* 0 Font + Root + Variables + Browser Reset /*-------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------*/ /* 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;} /* .column-1 > *, .column-2 > *, .column-3 > *, .column-4 > *, .column-5 > *, .column-6 > *, .column-7 > *, .column-8 > *, .column-9 > *, .column-10 > *, .column-11 > *, .column-12 > *, .column-1 > [class^="w"], .column-2 > [class^="w"], .column-3 > [class^="w"], .column-4 > [class^="w"], .column-5 > [class^="w"], .column-6 > [class^="w"], .column-7 > [class^="w"], .column-8 > [class^="w"] {background:#f00} */ 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:18px; line-height:1.5; font-weight:500} body {/*background:var(--clr-b);*/ 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-b);} main {flex: 1 0 auto; width:100%} footer {flex: 0 0 auto; width: 100%} section {width: 100%;} /* 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, 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(--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;} 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: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;} article ol li {list-style:decimal} article li > ul, article li > ol, article ul > ul, article ol > ol{margin-top:0px} 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:1em 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 Form /*-------------------------------------------------------------------------*/ 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; /*margin-bottom:var(--margin-top);*/ font-size:1.125em; font-weight:600; position:relative;} p label + input {font-size:1.125em!important;} input {margin-bottom:var(--margin-top);} 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(--xformin-font-s); width:100%; color:var(--clr-m); margin-top:var(--margin-top); margin-top:0; padding:0.25em 0.5em; border:none; border-radius:0px; background:none; transition: 180ms box-shadow ease-in-out} 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;} input:focus {outline:none; border:0;} input:focus, textarea:focus {border:var(--xformin-brd-s) solid var(--xformin-brd-c); background:var(--clr-g)} input::placeholder, textarea::placeholder {color:var(--clr-g); font-size:100} textarea:focus {min-height:120px;} /*checkbox & radio */ input[type="checkbox"], input[type="radio"] {-webkit-appearance:none; appearance:none; background-color:var(--xformin-bg); margin:0; margin-right:0.5em; cursor:pointer; font:inherit; width:var(--xformin-w); height:var(--xformin-h); border:var(--xformin-brd-s) solid currentColor; transform:translateY(-0.075em); display:grid; place-content:center;} input[type="checkbox"] {border-radius:var(--xformin-brd-r);} 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(--xformin-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(--xformin-brd-s) solid var(--xformin-brd-c);} input[type="checkbox"]:disabled {--xformin-clr:var(--xformin-dis); color:var(--xformin-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 {} /*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:var(--clr-m); -webkit-border-radius:0px; color:var(--clr-w); border:none; border-radius: 8px; 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; 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;} /*-------------------------------------------------------------------------*/ /* 1.2.2 Typography buttons /*-------------------------------------------------------------------------*/ button, select, input[type="button"], [type="button"], [type="reset"], [type="submit"] {border:1px solid var(--clr-m); !!!!!!!!!!!!!} 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(--clr-i); border:1px solid var(--clr-b); 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(--margin-top);} .btn-dev {display:block ;width:fit-content; margin:0 auto;} .btn-dev p, button.btn-dev, select.btn-dev {padding:1em 2em; display:block; width:fit-content; border-radius:var(--btn-brd-r); color:var(--clr-m); font-weight:600; background:var(--clr-w); border:2px solid var(--clr-m); margin:var(--margin-top) 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);} .btn {display:block ;width:fit-content; margin:0 auto; margin:var(--margin-top) auto;} .main-article .btn p, .btn p {margin:0} .btn p, p.btn, .box-more, .box-block .box-button, button, select, input[type="button"], [type="button"], [type="reset"], [type="submit"] {color:var(--clr-i); text-transform:uppercase; padding:1em 2em; background:var(--clr-m); width:fit-content; border-radius:var(--btn-brd-r); display:block; cursor:pointer} .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} button.btn-arrow, select.btn-arrow {margin:0 auto} .btn-arrow p::after, button.btn-arrow::after, select.btn-arrow::after {margin:0 0 0 1em; padding-right:0.5em; background:var(--clr-i); display:inline-block;} .btn-arrow:hover p::after {margin-left:2em;} .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;} .btn-txt.icon-svga {display:flex} .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:4em;} .column-full .section-btn-top {right:calc((100vw - 1vw* var(--wrap)) / 2);} .section-btn-top.btn-txt {border-bottom:2px solid var(--clr-m); padding-bottom:0.5em; border-bottom: 2px solid var(--clr-m); border-radius:0;} .section-btn-top p {margin:0} .section-btn, .block-btn {} .btns-div {margin:0 auto; display:flex; justify-content:center; align-items:center;} .btns-div .btn {margin:var(--margin-top) 0} .btns-div .btn + *, .btns-div button + * {margin-left:var(--margin-top);} /*-------------------------------------------------------------------------*/ /* 1.2.3 Typography Form types /*-------------------------------------------------------------------------*/ .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;} fieldset {display:flex; flex-wrap:wrap; align-items:center; margin-top:var(--margin-top); padding:0 2em 1em; border:1px solid var(--clr-b); border-radius:var(--sq-rad);} fieldset label {width:100%;} fieldset p.w100 {width:100%; display:flex; align-items:center; margin-top:var(--margin-top); font-weight:600; font-size:1.25em} .checkbox-box, .radiobox-box {display:flex; align-items:center; margin:0 0 var(--margin-top) 0;} fieldset .checkbox-box, fieldset .radiobox-box {display:flex; align-items:flex-start; margin:0 0 var(--margin-top) 0;} fieldset .checkbox-box label, fieldset .radiobox-box label {margin:-0.25em 0 0;} .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(--margin-top) 0;} .form-container > p {width:100%;} .form-container fieldset {margin:0 0 var(--margin-top) 0; width:100%} .form-container textarea {margin:0 0 var(--margin-top) 0; width:100%} .form-container h5 {margin-top:0; width:100%} .form-container > div.must-text {width:100%; margin-bottom:var(--margin-top);} .send-form-01 {} .send-form-02 label {width:calc(50% - (var(--margin-top) / 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(--margin-top) 0;} form .policy-check label {display:block; margin:0; margin-bottom:0; width:100%} form .policy-check input {top:0; } #pop-modal-form-01 {display:none; border-radius:var(--sq-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(--sq-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(--sq-rad);} .pop-modal-form-03.fancybox-content {display:none; max-width:60%;} /*-------------------------------------------------------------------------*/ /* 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} .alignright {width:50%; margin:0 0 2em 2em; float:right;} .alignleft {width:50%; margin:0 2em 2em 0; float:left;} @media screen and (max-width:720px) { .alignright, .alignleft {width:100%; margin:0 0 2em 0;} } .txt-center {text-align:center;} .txt-upper {text-transform:uppercase;} .flex {display:flex; justify-content:space-between; flex-wrap:wrap;} /* Співвідношення висоти до ширини блока*/ .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;} /*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);} /*-------------------------------------------------------------------------*/ /* 2 Header + Search Bar Styles / Sidebar / Footer / Fancybox Pop Up /*-------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------*/ /* 2.0 Enter: Main / Barba /*-------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------*/ /* 2.1 Header / Menu / Breadcrumbs / Search Bar Styles /*-------------------------------------------------------------------------*/ *{ --head-all-h:140px; /* HEADER height */ --head-logo-w:80px; /* LOGO W */ --head-logo-h:80px; /* LOGO H */ --head-margin-l:3em; /* for breadcrumbs & footer logo */ } body > header {z-index:200; width:100%; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;} body > header.mh-height.temp-01 {height:calc(var(--head-logo-h) + 3em + var(--margin-top)*2);} body > header.mh-height.temp-02 {height:var(--head-all-h); padding-bottom:0; padding-top:0;} body > header.mh-height.temp-03 {height:calc(var(--head-logo-h) + var(--margin-top)*2);} body > header.mh-absolute {position:absolute; height:var(--head-all-h);} /* if on image*/ body > header.mh-absolute + main article.top-page-1 {margin-top:var(--head-all-h);} body > header.mh-fixed {position:fixed; height:var(--head-all-h)} body > header.mh-fixed.sticky {background-color:var(--clr-w); padding-bottom:0; padding-top:0;} body > header.mh-fixed + main {margin-top:var(--head-all-h); /* or not */ background:#f00} .temp-01, .temp-02, .temp-03 {width:100%; margin:0 auto; clear:both; padding:0 calc((100vw - 1vw* var(--wrap)) / 2); padding-top:var(--margin-top); padding-bottom:var(--margin-top); background:var(--clr-w-o); /* margin-bottom:var(--margin-top); box-shadow:0 1px 7px rgb(0 0 0 / 25%); border-bottom:0px var(--clr-m) solid; background:rgba(251,247,247,0.10) */ display:flex; justify-content:space-between; flex-wrap:wrap; -webkit-transition:all 0.4s ease; transition:all 0.4s ease;} #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; width:100%; font-family:sans-serif; font-size: 1em; flex-grow:1;} #menudrop > * {margin-left:2em} #menudrop > *:first-child{margin-left:0px; margin-right:1em} .header-menu-drop #menudrop > .button + * {margin-left:0px} .header-menu-slide .breadcrumbs {width: 100%; /* position: absolute; bottom: 0; left: 0%; */ font-size:0.9em;} .header-menu-slide .icon-svg::before, .header-menu-slide .icon-svga::after, .header-menu-drop .icon-svg::before, .header-menu-drop .icon-svga::after {padding:1em;} #menudrop ul {padding-left: 0} #menudrop div:last-child {margin-right:0px;} #menudrop ul {margin-right: 20px;} #menudrop ul:last-child {margin-right:0px;} #menudrop .button {margin-right:0px;} .temp-01 #menudrop, .temp-02 #menudrop {align-items:center;} .temp-02.header-menu-slide #menudrop > *:first-child {flex-grow:1;} .temp-01 .header-top {width:100%; margin-bottom:1em} .temp-03 #menudrop .breadcrumbs {order:15; margin-left:var(--head-margin-l); margin-bottom:0; position: absolute; bottom: 0; left: var(--head-logo-w); width:calc(100% - var(--head-logo-w) - var(--head-margin-l));} #menu-s {top:0} .head-logo {display:flex; align-items:center; width:var(--head-logo-w); max-width:100%; z-index:993} .header-menu-drop .head-logo {max-width:220px; padding:5px 0; line-height:0; transition:all .4s ease-out} .header-menu-drop .head-logo img {width:auto; max-width:100%} .navigation {flex-grow:1} .head-smm {display:flex;} .head-smm a, .head-search, .head-sub > li {margin-left:calc(var(--margin-top)/2)} .head-sub {display:flex; align-items:flex-start;} /*.header-menu-drop .head-sub{flex-grow:1}*/ .header-menu-slide .head-sub {flex-grow:1;} .head-sub > li:first-child {margin-left:0} .head-sub > li {background: none} .head-sub > li::before {margin-right:calc(var(--margin-top)/2)} /*.head-smm a p, .head-search a p, .head-sub > li::before {background-repeat:no-repeat; content:''; background-position:left; background-size:contain; padding:calc(var(--margin-top)*0.8); }*/ .head-smm {margin: 0px 0px; display:flex; min-width: 55px;} /*.head-smm a {margin-right:1em} .head-smm a:last-child {margin-right:0px} .head-smm a:first-child {margin-right:0px} */ .head-search {width:3em} .head-lang {display:flex;} .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 {display:flex; flex-wrap:wrap; width:100%; margin:1em 0;} .breadcrumbs p {margin:0} .breadcrumbs span {line-height:1.5} .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-g); font-size:inherit; font-weight:300;} .breadcrumbs li {padding-right:15px; display: block;} .breadcrumbs li:before {content: '';} @media screen and (max-width:1080px) { .header-menu-slide .head-sub, .temp-01 .head-sub {display:none} .temp-02.header-menu-slide #menudrop > *:first-child, .temp-03.header-menu-slide #menudrop > *:first-child {flex-grow:1;} .temp-02.header-menu-drop .head-logo {max-width:100%; flex-grow:1} .temp-02.header-menu-drop .head-logo img {max-height:80px;} } @media (max-width:680px) { .header-menu-slide, .header-menu-drop {font-size:0.8em;} #menudrop > * {margin-left:1em;} } @media (max-width:460px) { .head-smm a, .head-search, .head-sub > li {margin-left:0;} } /*-------------------------------------------------------------------------*/ /* 3.1 Section + Structure /*-------------------------------------------------------------------------*/ .section-sub-title {--svg-icon-heart: url('data:image/svg+xml, ');} /*-------------------------------------------------------------------------*/ /* 3.2 Article.header + Structure /*-------------------------------------------------------------------------*/ div.main-content {--top-page-h:calc(90vh - 107px - 1em);} div.main-content {position:relative; display:flex; justify-content:space-between; flex-wrap:wrap; margin:0 auto; clear:both; padding:0 calc((100vw - 1vw* var(--wrap)) / 2);} .main-content > section, .main-content {margin-top:0} div.main-content > header {width:100%; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; /* margin-bottom:var(--margin-top)*/} /* .top-page-2 {height:60vh; width:100vw; margin:0 calc(1vw*var(--wrap)/2 - 50vw); background:center; background-size:cover; position:absolute; top:0}*/ .ind-page .top-page-2 {height:var(--top-page-h); z-index: 0;} .article-text-desc {display:flex; align-items:center; font-weight:600; justify-content:center;} .top-page-1 > header {width:100%} .top-page-1 main > header {} .top-page-2 {display:flex; flex-wrap:wrap} .top-page-2 > header, .top-page-3 > header {width:calc(100% + (100vw - 1vw*var(--wrap))); height:var(--top-page-h); margin:0 calc(1vw*var(--wrap)/2 - 50vw) var(--margin-top); background:url(main/img/header-bg.jpg) no-repeat top center; background-size:cover; position:relative} .top-page-3 {/*padding-top:60vh;*/} .top-page-bg-img {position:absolute; top:0; z-index:-1; padding:0; width:100%; align-content:center; height:var(--top-page-h);} .top-page-bg-img img{object-fit:cover; height:100%; width:100%;} .top-page-title {align-content:center; height:var(--top-page-h); position:relative; z-index:1} .top-page-2 .top-page-title {height:calc(70vh - 107px - 1em);} .top-page-gr-t {background:rgba(0, 0, 0, 0.5); height:var(--top-page-h); position:absolute; width:100%; top:0} /*#article-body-main {width:auto;}*/ .top-page-gr-b {background:rgba(0, 0, 0, 0.5); color:var(--clr-w);width:100%; align-content:center; position:absolute; height:20vh; z-index:0} /*.top-page-gr p {width:60%; margin: 0 auto; margin-bottom:1em; color:var(--clr-w); text-align:center}*/ .top-page-arr-to-down {position:absolute; right:2vw; bottom:5vw; transform:rotate(270deg);} .top-page-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;} .top-page-arr-to-down a img {animation-name: floating; animation-duration:3s; animation-iteration-count:infinite; animation-timing-function:ease-in-out;} /* .top-page-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);}} article {width:100%} article[class*="has-aside"] {display:flex; flex-wrap:wrap; justify-content:space-between} article[class*="has-aside"] > div {order:3; /*display:flex; flex-wrap:wrap; background:var(--test-bg)*/} article[class*="has-aside"] > footer{order:5;} article.has-asides > div, article.has-asides > footer {width:calc(100% - var(--side-right-w) - var(--side-left-w) - var(--margin-top)*2 );} article.has-asidel > div, article.has-asidel > footer {width:calc(100% - var(--side-left-w) - var(--margin-top)*2 );} article.has-asider > div, article.has-asider > footer {width:calc(100% - var(--side-right-w) - var(--margin-top)*2 );} body .article-text-desc {width:100%!important; order:0!important;} article[class*="has-aside"] #article-body-main, article[class*="has-aside"] > #article-body-main > div, article[class*="has-aside"] > #article-body-main .article-text-desc p {margin-top:0} body.category .main-content footer {width:100%;} aside {background:var(--test-bg)} .aside-left {width:var(--side-left-w); order:2;} .aside-right {width:var(--side-right-w); order:4; position:sticky; top:50px; height:fit-content;} .aside-bottom {order:6; width:100%; margin-top:var(--margin-top); background:var(--test-bg)} aside[class*="aside-"] > h1 {margin-top:0; font-size:1.25em;} .cat-aside-g .has-asides .column-2 {width:calc((100%/4*2) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .cat-aside-g .has-asides .column-2 + footer + aside, .cat-aside-g .has-asides .column-2 + footer + aside + aside {--col-n:2; width:calc(((100%/4*2) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n))/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .cat-aside-g .has-asidel .column-2, .cat-aside-g .has-asider .column-2 {width:calc((100%/3*2) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .cat-aside-g .has-asidel .column-2 + footer + aside, .cat-aside-g .has-asider .column-2 + footer + aside {--col-n:2; width:calc(((100%/3*2) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n))/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .cat-aside-g .has-asides .column-3 {width:calc((100%/5*3) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .cat-aside-g .has-asides .column-3 + footer + aside, .cat-aside-g .has-asides .column-3 + footer + aside + aside {--col-n:3; width:calc(((100%/5*3) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n))/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .cat-aside-g .has-asidel .column-3, .cat-aside-g .has-asider .column-3 {width:calc((100%/4*3) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .cat-aside-g .has-asidel .column-3 + footer + aside, .cat-aside-g .has-asider .column-3 + footer + aside {--col-n:3; width:calc(((100%/4*3) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n))/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .cat-aside-g .has-asidel .column-4, .cat-aside-g .has-asider .column-4 {width:calc((100%/5*4) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .cat-aside-g .has-asidel .column-4 + footer + aside, .cat-aside-g .has-asider .column-4 + footer + aside {--col-n:4; width:calc(((100%/5*4) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n))/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .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:var(--test-bg); margin-top:calc(1vw*var(--col-gap));} /*-------------------------------------------------------------------------*/ /* 3.3 Common: /*-------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------*/ /* 3.3 Footer /*-------------------------------------------------------------------------*/ footer.wrap {margin-top:var(--margin-top); background:var(--clr-g);} footer.wrap h2, footer.wrap h3, footer.wrap h4, footer.wrap h5 {margin-top:0} footer.foot-dark {background:var(--clr-m)} footer.foot-dark, footer.foot-dark p, footer.foot-dark span {color:var(--clr-w);} footer.foot-dark a {color:var(--clr-w); color:var(--clr-s); color:var(--clr-i);} footer.foot-dark .icon-svg::before {background:var(--clr-m); background:var(--clr-s); background:var(--clr-i);} footer.foot-light {background:var(--clr-g)} footer.foot-light, footer.foot-light p, footer.foot-light span {color:var(--clr-b);} footer.foot-light a {color:var(--clr-w); color:var(--clr-s); color:var(--clr-m);} footer > * {margin-top:var(--head-margin-l)} footer > *:last-child {margin-bottom:var(--head-margin-l)} .footer-bottom-01 .footer-bottom-02 .footer-bottom-03 /* ONLY copywriting - OLD footer-copywriting*/ .site-info {} .copywriting {font-size:0.9em;} .copywriting-logo {display:flex; justify-content:center;} .footer-bottom-01 {background:var(--clr-m); padding-top:var(--margin-top); padding-bottom:var(--margin-top);} .footer-bottom-02 {} .footer-bottom-03 {} .foot-smm {align-items: center} .foot-smm a:first-child {margin-right:0px} .footer-mobile-phone-btn {width:0%; height:0px; overflow:hidden;} @media screen and (max-width:720px) { footer.wrap *[class^="column-"] .w50, footer.wrap *[class^="column-"] .w70 {width:100%;} } @media screen and (max-width: 680px) { .footer-mobile-phone-btn {width:calc(100% - 4em); height:3em; background:var(--clr-m); display:flex; margin:1em 0; align-items:center; justify-content:center;} .footer-mobile-phone-btn a p {color:var(--clr-i); font-size:1em; font-weight:600; margin-bottom:0} footer > *:last-child { margin-bottom:1.5em; /* Залежить від font-size*/} } /*-------------------------------------------------------------------------*/ /* 3.4 Fancybox Pop Up /*-------------------------------------------------------------------------*/ /* 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-bottom:var(--margin-top); padding:25px; border:none; background:none; font-size:1em; background-color:var(--clr-w); width:100%; color:var(--clr-b); border: 2px solid var(--clr-g); border-radius:0px;font-weight:600; margin-bottom: 0; padding:0.5em;} textarea {margin-top: 0; color:var(--clr-b); background:var(--clr-w); border: 1px solid var(--clr-g); padding: 1em; border-bottom:2px solid var(--clr-g);} input::placeholder, textarea::placeholder {color:var(--clr-d); font-weight:100} input.antispam {width:0; height:0; padding:0; border:0; display:contents;} input[type="checkbox"] + label {margin: 0 0 1em 1em;} */ /*-------------------------------------------------------------------------*/ /* 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 /*-------------------------------------------------------------------------*/ .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-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;} /* ------------------------------------------------------------------------- 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 -------------------------------------------------------------------------*/ /*------ General style article-body-main ------*/ /**/ .main-article p {margin:var(--margin-top) 0;} /* article p:last-child {margin-bottom:var(--margin-top);} */ article ul, article ol {margin-top: var(--margin-top)} article a {color:var(--clr-m);} article strong {} article h1 {} article h2 {} article h3 {} article h4 {} article h5 {} article h6 {} @media screen and (max-width: 1366px) { html, body {min-height:100vh; font-size:14px;} } @media screen and (max-width: 1199px) { .header-menu-drop .head-sub{top:7px; position:absolute; right:50px;} } @media screen and (max-width:960px) { html, body {font-size:14px;} } @media screen and (max-width:720px) { html, body {font-size:14px;} } @media screen and (max-width:680px) { html, body {font-size:18px;} } @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: #fff; border:1px solid var(--clr-m);} .wp-block-table table td {width: auto} }