@keyframes container-move {
0%, 15% {
transform: translateY(0);
}
45%, 55% {
transform: translateY(9rem);
}
85%, 100% {
transform: translateY(0);
}
} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after {
content: "";
content: none;
}
q:before, q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
*:focus {
outline: none;
}
img {
max-width: 100%;
}
a {
text-decoration: none;
}
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
border: none;
padding: 0;
margin: 0;
box-shadow: none;
}
input, textarea, select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
border-radius: 0;
padding: 0;
margin: 0;
box-shadow: none;
}   ::selection {
color: white;
background-color: black;
}
::-moz-selection {
color: white;
background-color: black;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #99A1AF;
opacity: 1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #99A1AF;
opacity: 1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #99A1AF;
opacity: 1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #99A1AF;
opacity: 1;
} html, body {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
font-family: rigid-square, sans-serif;
font-optical-sizing: auto;
font-style: normal;
}
body.overflow {
overflow: hidden;
}
.container-fluid {
width: 100%;
margin-right: auto;
margin-left: auto;
}
.container {
max-width: 86.5rem;
width: 100%;
margin-right: auto;
margin-left: auto;
}
.row {
position: relative;
padding-left: 1rem;
padding-right: 1rem;
}
.flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.grid {
display: grid;
}  h1, .h1 {
color: #1E2939;
font-family: rigid-square, sans-serif;
font-size: 4rem;
font-weight: 700;
line-height: 4.375rem;
letter-spacing: -0.25rem;
}
h2, .h2 {
color: #1E2939;
font-family: rigid-square, sans-serif;
font-size: 3rem;
font-weight: 700;
line-height: 3.125rem;
letter-spacing: -0.25rem;
}
h3, .h3 {
color: #1E2939;
font-family: rigid-square, sans-serif;
font-size: 2.5rem;
font-weight: 700;
line-height: 3.125rem;
letter-spacing: -0.1875rem;
}
h4, .h4 {
color: #1E2939;
font-family: rigid-square, sans-serif;
font-size: 2.25rem;
font-weight: 700;
line-height: 2.5625rem;
letter-spacing: -0.125rem;
}
h5, .h5 {
color: #1E2939;
font-family: rigid-square, sans-serif;
font-size: 1.5rem;
font-weight: 700;
line-height: 2.125rem;
letter-spacing: -0.0625rem;
}
h6, .h6 {
color: #1E2939;
font-family: rigid-square, sans-serif;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.5rem;
letter-spacing: -0.0625rem;
}
.display-1 {
color: #1E2939;
font-size: 6rem;
font-weight: 700;
line-height: 6.25rem;
letter-spacing: -0.25rem;
}
.text-center {
text-align: center;
}
.text-center .buttons {
justify-content: center;
}
.uppercase {
text-transform: uppercase;
}
.text-xl, .has-text-xl-font-size {
color: black;
font-size: 1.25rem;
font-style: normal;
font-weight: 300;
line-height: 1.875rem;
}
.text-l, .has-text-l-font-size {
color: black;
font-size: 1.125rem;
font-weight: 300;
line-height: 1.625rem;
letter-spacing: 0.00438rem;
}
.text-m, .has-text-m-font-size {
color: black;
font-size: 1rem;
font-weight: 300;
line-height: 1.625rem;
letter-spacing: 0.00438rem;
}
.text-s, .has-text-s-font-size {
color: black;
font-size: 0.875rem;
font-weight: 300;
line-height: 1.1875rem;
}
.caption {
font-size: 0.75rem;
font-weight: 400;
line-height: 1rem;
}
.tag {
display: inline-block;
box-sizing: border-box;
padding: 0.1875rem 0.5rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.75rem;
letter-spacing: -0.0275rem;
border-radius: 0.375rem;
}
.tag.tag-sm {
padding: 0.1875rem 0.5rem;
font-size: 0.75rem;
line-height: 1rem;
letter-spacing: initial;
}
.tag.teal {
color: white;
background: #00AD8E;
}
.tag.success {
background: #00A63E;
color: white;
}
.tag.neutral {
background: #EDEDED;
color: #1E2939;
}
.tag.outline {
color: #1E2939;
border: 1px solid #CCC;
}
.tag.primary {
color: white;
background: #00A1D1;
}
.tag.gray {
color: #191815;
background: #CCC;
}
.tag.dark {
background: #0F1D40;
color: white;
}
.btn {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
position: relative;
z-index: 1;
isolation: isolate;
overflow: hidden;
height: 3rem;
padding: 0.25rem 1rem;
border-radius: 3rem;
box-sizing: border-box;
font-family: rigid-square, sans-serif;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.75rem;
letter-spacing: -0.02744rem;
text-align: center;
transition: color 0.4s ease, border-color 0.4s ease;
}
.btn span,
.btn svg {
position: relative;
z-index: 2;
}
.btn svg {
width: 0.875rem;
height: 0.875rem;
}
.btn.btn-icon {
padding: 0.25rem 0.25rem 0.25rem 1rem;
}
.btn.btn-icon svg {
width: 2.5rem;
height: 2.5rem;
flex-shrink: 0;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn.btn-icon::before {
content: "";
position: absolute;
z-index: 1;
right: 0.25rem;
top: 50%;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
transform: translateY(-50%) scale(0);
transform-origin: center;
transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn.btn-icon.btn-blue:before {
background: #191815;
}
.btn.btn-icon.btn-black:before {
background: white;
}
.btn.btn-icon:hover::before {
transform: translateY(-50%) scale(12);
}
.btn.btn-icon:hover svg {
transform: rotate(45deg);
}
.btn.btn-icon:active svg {
transform: rotate(45deg) scale(0.9);
}
.btn.btn-blue {
color: white;
background: #00A1D1;
}
.btn.btn-black {
color: white;
background: #191815;
}
.btn.btn-black:hover {
color: #191815;
}
.btn.btn-outline-grey {
color: #191815;
background: transparent;
border: 0.0625rem solid #BEBEBE;
}
.btn.btn-outline-grey::before {
content: "";
position: absolute;
z-index: 1;
inset: 0;
background: #00A1D1;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn.btn-outline-grey:hover {
color: white;
border-color: #00A1D1;
}
.btn.btn-outline-grey:hover::before {
transform: scaleX(1);
}
.btn.btn-outline-white {
color: white;
background: transparent;
border: 0.0625rem solid #BEBEBE;
}
.btn.btn-outline-white::before {
content: "";
position: absolute;
z-index: 1;
inset: 0;
background: #00A1D1;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn.btn-outline-white:hover {
color: white;
border-color: #00A1D1;
}
.btn.btn-outline-white:hover::before {
transform: scaleX(1);
}
.btn.w-100 {
width: 100%;
}
.btn:focus-visible {
outline: 0.1875rem solid rgba(0, 161, 209, 0.25);
outline-offset: 0.1875rem;
}
@media (prefers-reduced-motion: reduce) {
.btn,
.btn span,
.btn svg,
.btn::before {
transition: none;
}
}
.color-white {
color: white !important;
}
.color-white > * {
color: white !important;
}
.color-light.text-xl, .color-light.has-text-xl-font-size {
color: #808080;
}
.color-light.text-l, .color-light.has-text-l-font-size {
color: #808080;
}
.color-light.text-m, .color-light.has-text-m-font-size {
color: #808080;
}
.color-light.text-s, .color-light.has-text-s-font-size {
color: #808080;
}
strong, b, .bold {
font-weight: 600;
}
.weight-400 {
font-weight: 400;
}
.weight-600 {
font-weight: 600;
}
.weight-700 {
font-weight: 700;
}
.text-content h1, .text-content h2, .text-content h3, .text-content .h1, .text-content .h2, .text-content .h3 {
margin: 0 0 1rem;
}
.text-content h1 a, .text-content h2 a, .text-content h3 a, .text-content .h1 a, .text-content .h2 a, .text-content .h3 a {
color: inherit;
}
.text-content h4, .text-content h5, .text-content h6, .text-content .h4, .text-content .h5, .text-content .h6 {
margin: 0 0 0.375rem;
}
.text-content h4 a, .text-content h5 a, .text-content h6 a, .text-content .h4 a, .text-content .h5 a, .text-content .h6 a {
color: inherit;
}
.text-content p {
margin: 0 0 1rem;
}
.text-content p a {
color: #00A63E;
}
.text-content .buttons {
display: flex;
gap: 1rem;
align-items: center;
margin: 2rem 0 0;
}
.text-content strong {
font-weight: 700;
}
.text-content.text-xl ul li:after, .text-content.has-text-xl-font-size ul li:after {
top: 0.75rem;
}
.text-content.text-l ul, .text-content.has-text-l-font-size ul {
gap: 0.875rem;
}
.text-content.text-l ul li:after, .text-content.has-text-l-font-size ul li:after {
top: 0.625rem;
}
.text-content.text-m ul li:after, .text-content.has-text-m-font-size ul li:after {
top: 0.625rem;
}
.text-content.text-s ul li:after, .text-content.has-text-s-font-size ul li:after {
top: 0.4375rem;
}
.text-content ul {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
margin: 0 0 1rem;
}
.text-content ul li {
padding: 0 0 0 0.6875rem;
position: relative;
}
.text-content ul li a {
color: #00A63E;
}
.text-content ul li:after {
content: close-quote;
position: absolute;
left: 0;
width: 0.25rem;
height: 0.25rem;
border-radius: 100%;
background: #99A1AF;
}
.text-content ol {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
margin: 0 0 1rem 1.25rem;
list-style: decimal;
}
.text-content ol li a {
color: #00A63E;
}
.text-content > :last-child {
margin-bottom: 0 !important;
}
.breadcrumb {
display: flex;
height: 1.25rem;
align-items: center;
gap: 0.5rem;
margin: 0 0 2.25rem;
}
.breadcrumb p {
color: #6A7282;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.25rem;
letter-spacing: -0.01938rem;
}
.breadcrumb p a {
color: #6A7282;
}
.breadcrumb p .last {
color: #101828;
font-weight: 600;
}
.mobile-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #1D1D1B;
z-index: 99;
}
.mobile-nav .wrapper {
margin: 6rem 0 0 !important;
padding: 1rem 0 4rem;
display: flex;
flex-flow: column;
justify-content: space-between;
height: calc(100dvh - 12rem);
max-height: -webkit-fill-available;
gap: 1.5rem;
}
.mobile-nav .wrapper .nav {
height: 100%;
display: flex;
align-items: center;
max-width: 28rem;
width: 100%;
margin: 0 auto;
}
.mobile-nav .wrapper .nav nav {
width: 100%;
}
.mobile-nav .wrapper .nav nav ul {
display: flex;
flex-flow: column;
gap: 1.5rem;
}
.mobile-nav .wrapper .nav nav ul li.current-menu-item a {
color: #00A1D1;
}
.mobile-nav .wrapper .nav nav ul li a {
color: white;
display: inline-block;
width: 100%;
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/menu-arrow-right.svg) no-repeat center right;
background-size: 1rem 1rem;
}
.mobile-nav .wrapper .bottom {
padding: 1.5rem 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-nav .wrapper .bottom .text-s {
margin: 0 0 0.875rem;
color: rgba(255, 255, 255, 0.5);
}
.mobile-nav .wrapper .bottom .quick-contacts {
display: flex;
align-items: center;
justify-content: center;
gap: 0.9375rem;
font-size: 0.75rem;
font-weight: 400;
line-height: 1rem;
}
.mobile-nav .wrapper .bottom .quick-contacts .tel {
color: black;
background: white url(//stavar.sk/wp-content/themes/stavar/assets/img/tel.svg) no-repeat left 0.5rem center;
background-size: 0.75rem 0.75rem;
padding: 0.25rem 0.5rem 0.25rem 1.5rem;
border-radius: 3rem;
}
.mobile-nav .wrapper .bottom .quick-contacts .whatsapp {
color: white;
background: #00A63E url(//stavar.sk/wp-content/themes/stavar/assets/img/message.svg) no-repeat left 0.5rem center;
background-size: 0.75rem 0.75rem;
padding: 0.25rem 0.5rem 0.25rem 1.5rem;
border-radius: 3rem;
} .alm-loading .alm-btn-wrap {
display: none;
}
.alm-loading .grid {
min-height: 10rem;
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/loading.svg) no-repeat center center;
background-size: 6rem 6rem;
}
.alm-btn-wrap {
display: flex;
justify-content: center;
}
.alm-btn-wrap button {
margin: 2rem 0 0;
}
.alm-btn-wrap button:before {
z-index: -1 !important;
}
.alm-btn-wrap .done {
display: none;
} .screen-reader-text {
border: 0;
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
#cmplz-document {
font-size: 1rem;
font-weight: 300;
line-height: 1.5rem;
margin: 0 auto;
max-width: 100%;
}
#cmplz-document .cmplz-accept-service {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: checkbox;
}
.cmplz-consent-checkbox {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: checkbox;
}
.cmplz-links.cmplz-information {
display: none !important;
}
#cmplz-document ul, .editor-styles-wrapper .cmplz-unlinked-mode ul {
list-style: none;
margin: 0 0 1.8125rem;
}
#cmplz-document p, #cmplz-document li, #cmplz-document td, .editor-styles-wrapper .cmplz-unlinked-mode p, .editor-styles-wrapper .cmplz-unlinked-mode li, .editor-styles-wrapper .cmplz-unlinked-mode td {
font-size: 1rem;
font-weight: 300;
line-height: 1.5rem;
}
#cmplz-document h2, #cmplz-document h3, .editor-styles-wrapper .cmplz-unlinked-mode h2, .editor-styles-wrapper .cmplz-unlinked-mode h3 {
letter-spacing: initial;
}
#cmplz-cookies-overview .cmplz-dropdown summary div h3, #cmplz-document .cmplz-dropdown summary div h3, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary div h3 {
letter-spacing: initial;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
border-width: 1px !important;
font-family: rigid-square, sans-serif !important;
font-size: 0.875rem !important;
font-weight: 400 !important;
line-height: 1.75rem !important;
letter-spacing: -0.02744rem !important;
height: 3rem;
padding: 0.25rem 1rem !important;
border-radius: 3rem !important;
box-sizing: border-box;
min-height: initial !important;
} .gform_wrapper form {
position: relative;
}
.gform_wrapper .gform_confirmation_message p {
font-size: 1rem;
font-weight: 300;
line-height: 1.5rem;
color: #101828;
margin: 0 0 1.875rem;
}
.gform_wrapper .gform_heading {
display: none;
}
.gform_wrapper .gform-body .gform_fields {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
gap: 1.5rem;
margin: 0 0 2rem;
}
.gform_wrapper .gform-body .gfield {
-webkit-box-flex: 0 0 100%;
-moz-box-flex: 0 0 100%;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
}
.gform_wrapper .gform-body .gfield.gfield--width-half {
-webkit-box-flex: 0 0 calc(50% - 0.75rem);
-moz-box-flex: 0 0 calc(50% - 0.75rem);
-webkit-flex: 0 0 calc(50% - 0.75rem);
-ms-flex: 0 0 calc(50% - 0.75rem);
flex: 0 0 calc(50% - 0.75rem);
}
.gform_wrapper .gform-body .gfield.gfield_error .gfield_label {
color: #E53333;
}
.gform_wrapper .gform-body .gfield.gfield_error .ginput_container input:not([type=checkbox]) {
border: 2px solid #E53333;
}
.gform_wrapper .gform-body .gfield.gfield--input-type-hidden {
position: absolute;
}
.gform_wrapper .gform-body .gfield.gform_validation_container {
display: none;
}
.gform_wrapper .gform-body .gfield.hidden_label > label {
display: none;
}
.gform_wrapper .gform-body .gfield.hidden_label legend {
display: none;
}
.gform_wrapper .gform-body .gfield .gfield_label {
display: inline-block;
color: #929292;
font-size: 0.75rem;
font-weight: 400;
line-height: 1rem;
padding: 0 0 0.375rem;
}
.gform_wrapper .gform-body .gfield .gfield_label a {
color: #1E2939;
font-weight: 400;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
.gform_wrapper .gform-body .gfield .validation_message {
margin: 0.375rem 0;
color: #E53333;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.3125rem;
}
.gform_wrapper .gform-body .gfield .ginput_container {
width: 100%;
}
.gform_wrapper .gform-body .gfield .ginput_container input:not([type=checkbox]) {
width: 100%;
box-sizing: border-box;
padding: 0.75rem 0.875rem;
border-radius: 0.625rem;
border: 1px solid #CCC;
background: #FFF;
font-family: rigid-square, sans-serif;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25rem;
letter-spacing: -0.01938rem;
color: #1D1D1B;
height: 2.75rem;
transition: border 0.3s ease-out;
}
.gform_wrapper .gform-body .gfield .ginput_container input:not([type=checkbox]):focus {
border: 2px solid #00A1D1;
}
.gform_wrapper .gform-body .gfield .ginput_container input[type=checkbox] {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: auto;
opacity: 0;
position: absolute;
}
.gform_wrapper .gform-body .gfield .ginput_container input[type=checkbox]:checked + label:before {
border: none;
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/checked.svg) no-repeat center center;
background-size: 1.25rem 1.25rem;
}
.gform_wrapper .gform-body .gfield .ginput_container input[type=checkbox] + label {
display: inline-block;
color: black;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.25rem;
letter-spacing: -0.01938rem;
padding: 0 0 0 2rem;
position: relative;
cursor: pointer;
}
.gform_wrapper .gform-body .gfield .ginput_container input[type=checkbox] + label a {
color: #808080;
font-weight: 400;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
.gform_wrapper .gform-body .gfield .ginput_container input[type=checkbox] + label:before {
content: close-quote;
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
width: 1.25rem;
height: 1.25rem;
border-radius: 0.3125rem;
border: 1.5px solid #CCC;
background: #FFF;
}
.gform_wrapper .gform-body .gfield .ginput_container select {
width: 100%;
box-sizing: border-box;
padding: 0.75rem 0.875rem;
border-radius: 0.625rem;
border: 1px solid #CCC;
font-family: rigid-square, sans-serif;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25rem;
letter-spacing: -0.01938rem;
color: #1D1D1B;
height: 2.75rem;
transition: border 0.3s ease-out;
background: #fff url(//stavar.sk/wp-content/themes/stavar/assets/img/select.svg) no-repeat center right 0.875rem;
background-size: 1.125rem 1.125rem;
}
.gform_wrapper .gform-body .gfield .ginput_container select:focus {
border: 2px solid #00A1D1;
}
.gform_wrapper .gform-body .gfield .ginput_container .gfield_required {
display: none;
}
.gform_wrapper .gform-body .gfield .ginput_container textarea {
width: 100%;
box-sizing: border-box;
resize: none;
padding: 0.75rem 0.875rem;
border: 1.5px solid #CCC;
background: #FFF;
font-family: rigid-square, sans-serif;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25rem;
letter-spacing: -0.01938rem;
color: #1D1D1B;
transition: border 0.3s ease-out;
border-radius: 0.625rem;
}
.gform_wrapper .gform-body .gfield .ginput_container textarea.small {
height: 6.375rem;
}
.gform_wrapper .gform-body .gfield .ginput_container textarea:focus {
border: 2px solid #00A1D1;
}
.gform_wrapper .gform_footer .gform_ajax_spinner {
display: none;
}
.gform_wrapper .gform_footer button {
font-family: rigid-square, sans-serif;
}
.gform_wrapper .gform_validation_errors .gform_submission_error {
margin: 0 0 1.5rem;
color: #1E2939;
font-size: 1.875rem;
font-weight: 700;
line-height: 2.25rem;
letter-spacing: -0.05625rem;
} header {
background: #F9F9F9;
padding: 1.25rem 0;
}
header .flex {
position: relative;
z-index: 100;
height: 4rem;
align-items: center;
justify-content: space-between;
}
header .flex .logo {
font-size: 0;
}
header .flex .logo a {
display: inline-block;
width: 13.5625rem;
height: 3.81856rem;
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/logo.svg) no-repeat center left;
background-size: contain;
}
header .flex .logo.active a {
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/logo-white.svg) no-repeat center left;
background-size: contain;
}
header .flex nav ul {
display: flex;
gap: 2.25rem;
}
header .flex nav ul li a {
color: black;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.75rem;
letter-spacing: -0.0275rem;
}
header .flex .actions {
display: flex;
align-items: center;
gap: 2rem;
}
header .flex .actions .quick-contacts {
display: flex;
align-items: center;
gap: 0.9375rem;
font-size: 0.75rem;
font-weight: 400;
line-height: 1rem;
}
header .flex .actions .quick-contacts .tel {
color: black;
background: white url(//stavar.sk/wp-content/themes/stavar/assets/img/tel.svg) no-repeat left 0.5rem center;
background-size: 0.75rem 0.75rem;
padding: 0.25rem 0.5rem 0.25rem 1.5rem;
border-radius: 3rem;
}
header .flex .actions .quick-contacts .whatsapp {
color: white;
background: #00A63E url(//stavar.sk/wp-content/themes/stavar/assets/img/message.svg) no-repeat left 0.5rem center;
background-size: 0.75rem 0.75rem;
padding: 0.25rem 0.5rem 0.25rem 1.5rem;
border-radius: 3rem;
}
header .flex .actions .quick-contacts.active {
display: none;
}
header .flex .burger {
display: none;
} section.hero {
position: relative;
padding: 3.375rem 0 2.75rem;
background: #F9F9F9 url(//stavar.sk/wp-content/themes/stavar/assets/img/hero_bg@2x.png) no-repeat bottom -1px right;
background-size: 57.8125rem auto;
}
section.hero .img_anime {
font-size: 0;
position: absolute;
right: 9rem;
width: 38.51531rem;
top: -34rem;
animation: container-move 14s ease-in-out infinite;
will-change: transform;
}
section.hero .img_anime img {
width: 100%;
height: auto;
}
section.hero .flex {
align-items: center;
height: 35rem;
}
section.hero .flex .text-content {
max-width: 34.875rem;
}
section.hero .content {
position: relative;
}
section.hero .content .call {
position: absolute;
bottom: -1rem;
right: 0;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem;
border-radius: 0.75rem;
background: white;
color: #00A63E;
}
section.trust-strip {
background: #00A1D1;
padding: 1.625rem 0;
}
section.trust-strip .flex {
gap: 1rem;
}
section.trust-strip .flex .item {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 0.75rem;
}
section.trust-strip .flex .item .icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.125rem;
height: 3.125rem;
flex: 0 0 3.125rem;
border-radius: 3.75rem;
background: rgba(255, 255, 255, 0.2);
}
section.trust-strip .flex .item .icon svg, section.trust-strip .flex .item .icon img {
width: 1.5rem;
height: 1.5rem;
}
section.solutions {
padding: 4.625rem 0;
}
section.solutions .grid {
margin: 2.3125rem 0 0;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
section.solutions .grid a {
height: 20.6875rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
background: rgba(237, 237, 237, 0.5);
padding: 1.375rem;
box-sizing: border-box;
color: black;
position: relative;
isolation: isolate;
overflow: hidden;
}
section.solutions .grid a::before {
content: "";
position: absolute;
z-index: 0;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.45s ease;
}
section.solutions .grid a .image {
font-size: 0;
position: absolute;
z-index: 1;
top: 0.5rem;
right: 0;
mix-blend-mode: multiply;
width: 72%;
}
section.solutions .grid a .image img {
width: 100%;
}
section.solutions .grid a .image > img {
display: block;
opacity: 0.6;
transition: opacity 0.4s ease;
}
section.solutions .grid a .image .full-image {
position: absolute;
opacity: 0;
inset: 0;
transition: opacity 0.45s ease;
width: 100%;
}
section.solutions .grid a .image .full-image img {
display: block;
}
section.solutions .grid a .text-content {
position: relative;
z-index: 2;
}
section.solutions .grid a .text-content h5 {
transition: color 0.35s ease;
}
section.solutions .grid a .text-content p {
transition: color 0.35s ease;
}
section.solutions .grid a .hover {
position: relative;
z-index: 2;
font-size: 0.875rem;
font-style: normal;
font-weight: 600;
line-height: 1.25rem;
letter-spacing: -0.00938rem;
color: white;
display: flex;
align-items: center;
gap: 0.5625rem;
max-height: 0;
margin-top: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(0.5rem);
transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
}
section.solutions .grid a .hover .icon {
width: 2rem;
height: 2rem;
flex: 0 0 2rem;
opacity: 0;
transform: scale(0.75);
transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
section.solutions .grid a:nth-child(odd)::before {
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/category_card_hover_bg.svg) no-repeat top left, #00AD8E;
}
section.solutions .grid a:nth-child(odd) .hover .icon {
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/arrow_green.svg) no-repeat center center;
background-size: 100% 100%;
}
section.solutions .grid a:nth-child(even)::before {
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/category_card_hover_bg.svg) no-repeat top left, #5DC2D3;
}
section.solutions .grid a:nth-child(even) .hover .icon {
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/arrow_blue.svg) no-repeat center center;
background-size: 100% 100%;
}
section.solutions .grid a:hover::before, section.solutions .grid a:focus-visible::before {
opacity: 1;
}
section.solutions .grid a:hover .image > img, section.solutions .grid a:focus-visible .image > img {
opacity: 0;
}
section.solutions .grid a:hover .image .full-image, section.solutions .grid a:focus-visible .image .full-image {
opacity: 1;
}
section.solutions .grid a:hover .text-content h5, section.solutions .grid a:focus-visible .text-content h5 {
color: white;
}
section.solutions .grid a:hover .text-content p, section.solutions .grid a:focus-visible .text-content p {
color: white;
}
section.solutions .grid a:hover .hover, section.solutions .grid a:focus-visible .hover {
max-height: 2rem;
margin-top: 0.9375rem;
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease 0.12s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.06s, visibility 0s;
}
section.solutions .grid a:hover .hover .icon, section.solutions .grid a:focus-visible .hover .icon {
opacity: 1;
transform: scale(1);
transition-delay: 0.16s;
}
section.solutions .grid a:focus-visible {
outline: 0.1875rem solid rgba(0, 161, 209, 0.35);
outline-offset: 0.1875rem;
}
section.full-image {
position: relative;
}
section.full-image .image {
font-size: 0;
position: relative;
}
section.full-image .image:after {
content: close-quote;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(54deg, rgba(0, 161, 209, 0.8) 6.6%, rgba(0, 161, 209, 0) 47.51%);
}
section.full-image .image img {
width: 100%;
max-height: 38.1875rem;
height: 100%;
object-fit: cover;
object-position: center center;
}
section.full-image .content {
position: absolute;
left: 0;
right: 0;
bottom: 3rem;
z-index: 1;
}
section.full-image .content .title {
max-width: 44.125rem;
}
section.category-slider {
padding: 5.125rem 0;
background: #F9F9F9 url(//stavar.sk/wp-content/themes/stavar/assets/img/product_slider_bg.svg) no-repeat bottom right;
}
section.category-slider .slider {
margin: 2rem -0.5rem 0;
}
section.category-slider .slider .slick-track {
display: flex;
}
section.category-slider .slider .slide {
height: auto;
}
section.category-slider .slider .slide .box {
background: white;
margin: 0 0.5rem;
height: 100%;
display: flex;
flex-flow: column;
}
section.category-slider .slider .slide .box .image {
font-size: 0;
position: relative;
height: 14.75rem;
}
section.category-slider .slider .slide .box .image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
section.category-slider .slider .slide .box .image .price {
position: absolute;
bottom: 0.625rem;
right: 0.625rem;
padding: 0.1875rem 0.5rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.75rem;
letter-spacing: -0.0275rem;
color: white;
border-radius: 0.375rem;
background: #00A1D1;
}
section.category-slider .slider .slide .box .info {
flex: 1;
padding: 1rem;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
justify-content: space-between;
}
section.category-slider .slider .slide .box .info .button {
width: 100%;
}
section.category-slider .slider .slick-dots {
display: flex;
gap: 0.375rem;
justify-content: center;
margin: 2rem 0 0;
font-size: 0;
}
section.category-slider .slider .slick-dots li button {
font-size: 0;
width: 0.375rem;
height: 0.125rem;
background: #D7D7D7;
transition: all 0.3s ease-in-out;
}
section.category-slider .slider .slick-dots li.slick-active button {
width: 0.9375rem;
background: #00A1D1;
}
section.category-slider .slider .arrow {
width: 3.375rem;
height: 3.375rem;
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/slider-arrow.svg) no-repeat center center;
background-size: 100% 100%;
position: absolute;
top: calc(50% - 1.6875rem);
z-index: 1;
cursor: pointer;
}
section.category-slider .slider .arrow.prev {
left: -3.875rem;
transform: rotate(180deg);
}
section.category-slider .slider .arrow.next {
right: -3.875rem;
}
section.category-slider .slider .arrow.slick-disabled {
cursor: not-allowed;
}
section.guide {
padding: 4rem 0 6.5rem;
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/guide_bg.svg) no-repeat bottom left;
}
section.guide .flex {
gap: 0.625rem;
margin: 1.875rem 0;
}
section.guide .flex .box {
flex: 1;
box-sizing: border-box;
padding: 5rem;
position: relative;
background: #00A1D1;
}
section.guide .flex .box .image {
font-size: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
section.guide .flex .box .image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
section.guide .flex .box .image:after {
content: close-quote;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(88deg, rgba(0, 0, 0, 0.8) 8.51%, rgba(0, 0, 0, 0) 125.9%);
}
section.guide .flex .box .text-content {
position: relative;
z-index: 2;
}
section.guide .flex .box .text-content ul {
gap: 0.75rem;
}
section.guide .flex .box .text-content ul li {
padding: 0 0 0 1.875rem;
font-size: 1rem;
line-height: 1.75rem;
letter-spacing: -0.0275rem;
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/li.svg) no-repeat top 0.25rem left;
background-size: 1.25rem 1.25rem;
}
section.guide .flex .box .text-content ul li:after {
content: none;
}
section.guide .bottom {
text-align: center;
}
section.process {
padding: 5.875rem 0;
background: #F9F9F9;
}
section.process .grid {
margin: 2.9375rem 0 0;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
section.process .grid .item {
padding: 1.375rem;
}
section.process .grid .item:nth-child(even) .number {
color: #808080;
}
section.process .grid .item .text-content {
padding: 1rem 0 0;
margin: -1.625rem 0 0;
background: #f9f9f9;
position: relative;
}
section.cta {
padding: 2.8125rem 0;
position: relative;
}
section.cta .bg-image {
font-size: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
section.cta .bg-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
section.cta .box {
max-width: 29.75rem;
padding: 1.5rem;
border-radius: 0.75rem;
background: white;
box-sizing: border-box;
height: 40.375rem;
}
section.cta .box .flex {
height: 100%;
flex-flow: column;
justify-content: space-between;
}
section.cta .box .flex .top .icon {
margin: 0 0 2.5rem;
border-radius: 0.625rem;
background: rgba(0, 161, 209, 0.1);
display: flex;
width: 3.6875rem;
height: 3.6875rem;
flex-direction: column;
justify-content: center;
align-items: center;
}
section.map {
padding: 3.125rem 0;
background: #F9F9F9;
}
section.map .flex {
align-items: center;
}
section.map .flex .text {
flex: 1;
}
section.map .flex .image {
flex: 0 1 50.8125rem;
}
section.map .flex .image svg {
width: 100%;
}
section.map .flex .image svg g.pin {
filter: drop-shadow(0 8.799px 35.197px rgba(0, 0, 0, 0.15));
}
section.contact {
padding: 3.125rem 0;
background: #F9F9F9 url(//stavar.sk/wp-content/themes/stavar/assets/img/contact_bg.svg) no-repeat bottom left;
}
section.contact .form {
padding: 3.25rem;
background: white;
}
section.contact .form .flex {
gap: 3rem;
margin: 3rem 0 0;
}
section.contact .form .flex .form-wrapper {
flex: 0 1 48.5rem;
}
section.contact .form .flex .box {
flex: 0 1 26.375rem;
padding: 2.125rem;
box-sizing: border-box;
background: #EDEDED;
border-radius: 0.75rem;
}
section.contact .form .flex .box .contacts {
margin: 2.5rem 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
section.contact .form .flex .box .contacts .contact {
display: inline-flex;
align-items: center;
gap: 1rem;
}
section.contact .form .flex .box .contacts .contact .contact-icon {
flex: 0 0 3.5rem;
font-size: 0;
}
section.contact .form .flex .box .contacts .contact .contact-icon img {
width: 100%;
}
section.contact .form .flex .box .box-note {
padding: 1rem 0 0;
border-top: 1px dashed #C3C3C3;
}
section.hero-catalog {
padding: 3.375rem 0 2.75rem;
background: #F9F9F9;
position: relative;
}
section.hero-catalog .bg-image {
font-size: 0;
position: absolute;
right: 0;
bottom: 0;
top: 0;
}
section.hero-catalog .bg-image img {
width: 100%;
height: 100%;
}
section.hero-catalog .content {
margin: 2.25rem 0 3.375rem;
max-width: 34.875rem;
}
section.hero-catalog .categories {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0.75rem;
}
section.hero-catalog .categories a {
background: white;
}
section.hero-catalog .categories a .box {
padding: 2.25rem;
}
section.hero-catalog .categories a .box .icon {
width: 3.5rem;
height: 3.5rem;
font-size: 0;
margin: 0 0 0.75rem;
}
section.hero-catalog .categories a .box .icon img {
width: 100%;
height: 100%;
}
section.hero-catalog .categories a .box .caption {
margin: 0.375rem 0 0;
color: #808080;
}
section.product-list {
padding: 0 0 3.875rem;
background: #F9F9F9;
}
section.product-list .filter {
background: white;
padding: 1rem 0;
border-bottom: 1px solid #EDEDED;
position: relative;
z-index: 1;
}
section.product-list .filter .alm-filters-edit {
display: none;
}
section.product-list .filter .alm-filters {
display: flex;
align-items: center;
gap: 0.25rem;
}
section.product-list .filter .alm-filters .alm-filter {
position: relative;
cursor: pointer;
}
section.product-list .filter .alm-filters .alm-filter .alm-filter--title h3 {
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25rem;
letter-spacing: -0.01938rem;
padding: 0.625rem 2rem 0.625rem 0.75rem;
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/chevron-down.svg) no-repeat center right 0.75rem;
background-size: 0.875rem 0.875rem;
border-radius: 0.5rem;
}
section.product-list .filter .alm-filters .alm-filter .alm-filter--inner {
border: 1px solid #EDEDED;
background: #FFF;
box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.06);
display: none;
position: absolute;
left: 0;
top: calc(100% + 0.875rem);
width: 20rem;
}
section.product-list .filter .alm-filters .alm-filter .alm-filter--inner ul {
padding: 1.5rem;
display: flex;
flex-flow: column;
gap: 0.5rem;
}
section.product-list .filter .alm-filters .alm-filter .alm-filter--inner ul li .field-checkbox {
cursor: pointer;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.25rem;
letter-spacing: -0.01938rem;
color: #1D1D1B;
margin: 0.375rem 0;
padding: 0 0 0 2rem;
position: relative;
}
section.product-list .filter .alm-filters .alm-filter .alm-filter--inner ul li .field-checkbox:before {
content: close-quote;
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
width: 1.25rem;
height: 1.25rem;
border-radius: 0.3125rem;
border: 1.5px solid #CCC;
background: #FFF;
}
section.product-list .filter .alm-filters .alm-filter .alm-filter--inner ul li .field-checkbox.active:before {
border: none;
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/checked.svg) no-repeat center center;
background-size: 1.25rem 1.25rem;
}
section.product-list .filter .alm-filters .alm-filter.active .alm-filter--inner {
display: block;
}
section.product-list .filter .alm-filters .alm-filter.active .alm-filter--title h3 {
background: black url(//stavar.sk/wp-content/themes/stavar/assets/img/chevron-down-white.svg) no-repeat center right 0.75rem;
background-size: 0.875rem 0.875rem;
color: white;
}
section.product-list .filter .alm-filters .alm-filters--controls {
flex: 1;
}
section.product-list .filter .alm-filters .alm-filters--controls .alm-filters--reset {
text-align: right;
display: flex;
justify-content: flex-end;
}
section.product-list .filter .alm-filters .alm-filters--controls .alm-filters--reset .alm-filters--reset-button {
font-family: rigid-square, sans-serif;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25rem;
letter-spacing: -0.01938rem;
padding: 0.625rem 1rem;
border-radius: 4rem;
border: 1.5px solid #CCC;
background: white;
}
section.product-list .filter .alm-filters .alm-filters--loading {
display: none;
}
section.product-list .grid {
padding: 2.625rem 0 0;
grid-template-columns: repeat(4, 1fr);
gap: 2rem 1rem;
}
section.product-list .grid .box {
background: white;
height: 100%;
display: flex;
flex-flow: column;
}
section.product-list .grid .box .image {
font-size: 0;
position: relative;
height: 14.75rem;
}
section.product-list .grid .box .image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
section.product-list .grid .box .image .price {
position: absolute;
bottom: 0.625rem;
right: 0.625rem;
padding: 0.1875rem 0.5rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.75rem;
letter-spacing: -0.0275rem;
color: white;
border-radius: 0.375rem;
background: #00A1D1;
}
section.product-list .grid .box .image .availability {
position: absolute;
top: 0.625rem;
right: 0.625rem;
}
section.product-list .grid .box .info {
flex: 1;
padding: 1rem;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
justify-content: space-between;
}
section.product-list .grid .box .info .button {
width: 100%;
}
section.compare {
padding: 5rem 0;
}
section.compare .wrapper {
margin: 3rem 0 0;
padding: 2rem 0;
border: 1px solid #EDEDED;
background: white;
box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.06), 0 12px 32px 0 rgba(0, 0, 0, 0.02);
}
section.compare .wrapper .overflow {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
section.compare .wrapper .overflow::-webkit-scrollbar {
display: none;
}
section.compare .wrapper .overflow .table {
width: max-content;
min-width: 100%;
padding: 0 2rem;
box-sizing: border-box;
}
section.compare .wrapper .overflow .table .columns {
display: grid;
grid-template-columns: 13.75rem;
grid-auto-flow: column;
grid-auto-columns: minmax(11rem, 1fr);
align-items: center;
gap: 1.25rem;
padding: 1.75rem 0;
border-bottom: 0.0625rem solid #EDEDED;
}
section.compare .wrapper .overflow .table .columns:first-child {
padding-top: 0;
}
section.compare .wrapper .overflow .table .columns:last-child {
padding-bottom: 0;
border-bottom: none;
}
section.compare .wrapper .overflow .table .columns .col:first-child {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
section.compare .wrapper .overflow .table .columns .col .box {
display: flex;
padding: 0.75rem;
align-items: center;
gap: 1rem;
background: #F4F4F4;
}
section.compare .wrapper .overflow .table .columns .col .box .icon {
font-size: 0;
flex: 0 0 3.5rem;
height: 3.5rem;
}
section.compare .wrapper .overflow .table .columns .col .box .icon img {
width: 100%;
height: 100%;
}
section.compare .wrapper .overflow .table .columns .col .box .name .tag {
margin: 0.125rem 0 0;
}
section.faq {
padding: 6.25rem 0;
background: #F9F9F9;
}
section.faq .wrapper {
max-width: 70.25rem;
margin: 0 auto;
}
section.faq .wrapper .questions {
margin: 3rem 0 0;
}
section.faq .wrapper .questions .toggle {
border-bottom: 0.0625rem solid #EDEDED;
}
section.faq .wrapper .questions .toggle.active .question:after {
transform: rotate(0deg);
}
section.faq .wrapper .questions .toggle .question {
padding: 1.25rem 2rem 1.25rem 0;
position: relative;
cursor: pointer;
}
section.faq .wrapper .questions .toggle .question:after, section.faq .wrapper .questions .toggle .question:before {
content: close-quote;
position: absolute;
height: 0.125rem;
width: 1rem;
background: #00A1D1;
right: 0;
top: 50%;
}
section.faq .wrapper .questions .toggle .question:after {
transform: rotate(90deg);
transition: transform 0.3s ease;
}
section.faq .wrapper .questions .toggle .answer {
padding: 0 4rem 0 0;
}
section.faq .wrapper .questions .toggle .answer .text-content {
padding: 0 0 1.25rem;
}
section.products {
padding: 5.875rem 0;
}
section.products .text {
margin: 0 0 3rem;
}
section.products .grid {
grid-template-columns: repeat(4, 1fr);
gap: 2rem 1rem;
}
section.products .grid .box {
background: white;
height: 100%;
display: flex;
flex-flow: column;
}
section.products .grid .box .image {
font-size: 0;
position: relative;
height: 14.75rem;
}
section.products .grid .box .image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
section.products .grid .box .image .price {
position: absolute;
bottom: 0.625rem;
right: 0.625rem;
padding: 0.1875rem 0.5rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.75rem;
letter-spacing: -0.0275rem;
color: white;
border-radius: 0.375rem;
background: #00A1D1;
}
section.products .grid .box .image .availability {
position: absolute;
top: 0.625rem;
right: 0.625rem;
}
section.products .grid .box .info {
flex: 1;
padding: 1rem;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
justify-content: space-between;
}
section.products .grid .box .info .button {
width: 100%;
}
section.table {
padding: 4.375rem 0;
}
section.table .table {
max-width: 60rem;
width: 100%;
margin: 2.5rem auto 0;
}
section.table .table table {
width: 100%;
border: 1px solid #E5E7EB;
}
section.table .table table tr th {
text-align: left;
font-weight: 600;
padding: 1rem 1.5rem;
background: #F4F4F4;
border-bottom: 1px solid #E5E7EB;
}
section.table .table table tr td {
padding: 1rem 1.5rem;
border-bottom: 1px solid #E5E7EB;
}
section.table .table-info {
max-width: 60rem;
width: 100%;
margin: 0.75rem auto 0;
}
section.table .table-info ul li {
padding: 0 0 0 1.375rem;
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/table-li.svg) no-repeat left top 0.0625rem;
background-size: 1rem 1rem;
}
section.table .table-info ul li:after {
content: none;
}
section.column-hero {
padding: 3.375rem 0 2.75rem;
background: #F9F9F9 url(//stavar.sk/wp-content/themes/stavar/assets/img/rental-hero.svg) no-repeat top 8rem right;
position: relative;
}
section.column-hero .content .flex {
align-items: flex-end;
gap: 3.375rem;
}
section.column-hero .content .flex .text {
flex: 0 1 46.5625rem;
}
section.column-hero .content .flex .pros {
flex: 1;
}
section.column-hero .content .flex .pros ul li {
padding: 0 0 0 2.125rem;
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/table-li.svg) no-repeat left top 0.0625rem;
background-size: 1.5rem 1.5rem;
}
section.column-hero .content .flex .pros ul li:after {
content: none;
}
section.column-hero .content .buttons {
margin: 2.25rem 0 0;
display: flex;
gap: 1rem;
}
section.column-hero .content .box {
margin: 3.375rem 0 0;
display: flex;
align-items: center;
gap: 2rem;
background: white;
box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.06), 0 12px 32px 0 rgba(0, 0, 0, 0.02);
padding: 2.5rem;
}
section.column-hero .content .box .text {
flex: 1;
}
section.contact-form {
padding: 3rem 0;
background: #F9FAFB;
}
section.contact-form .text {
max-width: 41.75rem;
margin: 0 auto 2rem;
}
section.contact-form .form {
max-width: 41.75rem;
margin: 0 auto;
padding: 2rem;
border-radius: 0.75rem;
background: #FFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
section.product {
padding: 3.375rem 0 2.75rem;
background: linear-gradient(0deg, #F9F9F9 0%, #F9F9F9 100%), #F4F4F4;
}
section.product .product-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 32.25rem;
grid-template-areas: "gallery aside" "content aside";
gap: 3.375rem;
row-gap: 2rem;
align-items: start;
}
section.product .product-layout .gallery {
grid-area: gallery;
min-width: 0;
margin: 0 0 2rem;
}
section.product .product-layout .gallery .product-gallery .gallery-main {
height: 29.9375rem;
position: relative;
display: inline-block;
width: 100%;
font-size: 0;
}
section.product .product-layout .gallery .product-gallery .gallery-main.is-variant-image {
background: white;
}
section.product .product-layout .gallery .product-gallery .gallery-main.is-variant-image img {
object-fit: contain;
}
section.product .product-layout .gallery .product-gallery .gallery-main .tag {
position: absolute;
bottom: 0.75rem;
right: 0.75rem;
}
section.product .product-layout .gallery .product-gallery .gallery-thumbnails {
margin: 0.625rem 0 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.625rem;
}
section.product .product-layout .gallery .product-gallery .gallery-thumbnails .gallery-item {
height: 9.375rem;
font-size: 0;
}
section.product .product-layout .gallery .product-gallery .gallery-thumbnails .gallery-item:nth-child(n+5) {
display: none;
}
section.product .product-layout .gallery .product-gallery img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
section.product .product-layout .aside {
grid-area: aside;
width: 32.25rem;
align-self: start;
}
section.product .product-layout .aside .box {
padding: 1.75rem;
background: white;
display: flex;
flex-flow: column;
gap: 2rem;
margin: 0 0 1.125rem;
}
section.product .product-layout .aside .box .info .caption {
color: #00A1D1;
margin: 0 0 0.75rem;
}
section.product .product-layout .aside .box .divider {
height: 0.0625rem;
width: 100%;
background: #EDEDED;
}
section.product .product-layout .aside .box .parameters .caption {
margin: 0 0 0.875rem;
color: #929292;
}
section.product .product-layout .aside .box .parameters .warranty {
border: 1px solid rgba(217, 119, 6, 0.2);
background: #FFF7E6;
display: flex;
padding: 1rem;
align-items: center;
gap: 0.75rem;
margin: 0 0 0.875rem;
}
section.product .product-layout .aside .box .parameters .warranty .icon {
font-size: 0;
width: 2.25rem;
height: 2.25rem;
flex: 0 0 2.25rem;
}
section.product .product-layout .aside .box .parameters .warranty .icon img {
width: 100%;
height: auto;
}
section.product .product-layout .aside .box .parameters .warranty .text {
color: #92400E;
}
section.product .product-layout .aside .box .parameters ul li {
padding: 0 0 0 1.875rem;
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/table-li.svg) no-repeat left top 0.1875rem;
background-size: 1.25rem 1.25rem;
}
section.product .product-layout .aside .box .parameters ul li:after {
content: none;
}
section.product .product-layout .aside .box [hidden] {
display: none !important;
}
section.product .product-layout .aside .box .length-variants .caption {
color: #929292;
margin: 0 0 0.875rem;
}
section.product .product-layout .aside .box .length-variants__list {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
}
section.product .product-layout .aside .box .length-variants .length-variant {
min-width: 3.75rem;
padding: 0.625rem 0.875rem;
border: 1px solid #929292;
border-radius: 0.25rem;
background: white;
color: #929292;
font-family: inherit;
cursor: pointer;
}
section.product .product-layout .aside .box .length-variants .length-variant.is-active, section.product .product-layout .aside .box .length-variants .length-variant:hover {
border-color: #00A1D1;
background: #00A1D1;
color: white;
}
section.product .product-layout .aside .box .length-variants .length-variant:focus-visible {
outline: 2px solid #00A1D1;
outline-offset: 2px;
}
section.product .product-layout .aside .box .color-variants .caption {
color: #929292;
margin: 0 0 0.875rem;
}
section.product .product-layout .aside .box .color-variants__list {
display: flex;
flex-wrap: wrap;
gap: 0.875rem;
}
section.product .product-layout .aside .box .color-variants .color-variant {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
max-width: 8rem;
padding: 0.25rem;
border: 0;
background: transparent;
color: inherit;
font-family: inherit;
cursor: pointer;
}
section.product .product-layout .aside .box .color-variants .color-variant__swatch {
display: block;
width: 2.75rem;
height: 2.75rem;
border: 1px solid #929292;
border-radius: 0.25rem;
}
section.product .product-layout .aside .box .color-variants .color-variant__name {
text-align: center;
overflow-wrap: anywhere;
}
section.product .product-layout .aside .box .color-variants .color-variant.is-active .color-variant__swatch, section.product .product-layout .aside .box .color-variants .color-variant:hover .color-variant__swatch {
outline: 2px solid #00A1D1;
outline-offset: 2px;
}
section.product .product-layout .aside .box .color-variants .color-variant:focus-visible {
outline: 2px solid #00A1D1;
outline-offset: 2px;
border-radius: 0.25rem;
}
section.product .product-layout .aside .box .pricing {
display: flex;
gap: 1.25rem;
}
section.product .product-layout .aside .box .pricing .item {
flex: 1;
}
section.product .product-layout .aside .box .pricing .item .caption {
margin: 0 0 0.125rem;
color: #6A7282;
}
section.product .product-layout .aside .box .pricing .item .price {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
section.product .product-layout .aside .box .pricing .item .price .text-m {
color: #6A7282;
}
section.product .product-layout .aside .box .buttons {
display: flex;
gap: 0.75rem;
}
section.product .product-layout .aside .info {
display: flex;
flex-flow: column;
gap: 1rem;
}
section.product .product-layout .aside .info .item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
section.product .product-layout .aside .info .item .icon {
flex: 0 0 1.5rem;
height: 1.5rem;
font-size: 0;
}
section.product .product-layout .aside .info .item .icon img {
width: 100%;
}
section.product .product-layout .aside .info .item .caption {
color: #929292;
}
section.product .product-layout .aside .cta {
margin: 0 0 1.125rem;
display: flex;
gap: 0.75rem;
}
section.product .product-layout .aside .cta a {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.75rem;
letter-spacing: -0.0275rem;
border-radius: 0.625rem;
}
section.product .product-layout .aside .cta a svg {
width: 1rem;
height: 1rem;
}
section.product .product-layout .aside .cta a.tel {
background: white;
color: black;
}
section.product .product-layout .aside .cta a.whatsapp {
background: #D6F9E3;
color: #00A63E;
}
section.product .product-layout .aside .shipping-prices {
margin: 0 0 1.125rem;
}
section.product .product-layout .product-content {
grid-area: content;
min-width: 0;
padding: 1.75rem;
background: white;
display: flex;
flex-flow: column;
gap: 2.75rem;
}
section.product .product-layout .product-content .divider {
height: 0.0625rem;
width: 100%;
background: #EDEDED;
}
section.product .product-layout .product-content .form {
padding: 3rem;
background: #F9FAFB;
}
section.product .product-layout .product-content .form .content {
margin: 2rem 0 0;
padding: 2rem;
border-radius: 0.75rem;
background: #FFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
section.product .product-layout .product-content .form .content .tabs {
display: flex;
height: 3rem;
padding: 0.25rem;
border-radius: 1.5rem;
background: #F3F4F6;
box-sizing: border-box;
margin: 0 0 1.5rem;
}
section.product .product-layout .product-content .form .content .tabs .tab {
padding: 0.625rem 1.5rem;
flex: 1;
border-radius: 1.25rem;
text-align: center;
color: #99A1AF;
height: 2.5rem;
box-sizing: border-box;
cursor: pointer;
}
section.product .product-layout .product-content .form .content .tabs .tab.active {
background: white;
color: #1D1D1B;
}
section.product .product-layout .product-content .form .content .tabs-contents .tab-content {
display: none;
}
section.product .product-layout .product-content .form .content .tabs-contents .tab-content.active {
display: block;
}
section.product .product-layout .product-content .use-cases .grid {
grid-template-columns: repeat(3, 1fr);
gap: 0.625rem;
margin: 1rem 0 0;
}
section.product .product-layout .product-content .use-cases .grid .item {
position: relative;
height: 17.5rem;
}
section.product .product-layout .product-content .use-cases .grid .item:after {
content: close-quote;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 37.86%, rgba(0, 0, 0, 0) 63.57%);
}
section.product .product-layout .product-content .use-cases .grid .item .image {
font-size: 0;
width: 100%;
height: 100%;
}
section.product .product-layout .product-content .use-cases .grid .item .image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
section.product .product-layout .product-content .use-cases .grid .item .content {
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
right: 0;
padding: 1.375rem;
}
section.product .product-layout .product-content .compare .grid {
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1.5rem 0 0;
grid-auto-rows: 1fr;
}
section.product .product-layout .product-content .compare .grid a {
padding: 1rem;
border: 1px solid #EDEDED;
position: relative;
display: flex;
flex-flow: column;
justify-content: space-between;
}
section.product .product-layout .product-content .compare .grid a.active {
border: 2px solid #00A63E;
}
section.product .product-layout .product-content .compare .grid a .tag {
position: absolute;
top: 0.75rem;
right: 0.75rem;
}
section.product .product-layout .product-content .compare .grid a .info {
padding: 0 0 0.75rem;
}
section.product .product-layout .product-content .compare .grid a .info .caption {
margin: 0 0 0.25rem;
color: #00A1D1;
}
section.product .product-layout .product-content .compare .grid a .info .name {
padding: 0 0 0.75rem;
}
section.product .product-layout .product-content .compare .grid a .price {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #D6D6D6;
padding: 0.75rem 0 0;
}
section.product .product-layout .product-content .compare .grid a .price .caption {
color: #99A1AF;
}
section.product .product-layout .product-content .video .item {
display: flex;
align-items: center;
padding: 1.375rem;
background: #00A1D1;
gap: 2rem;
}
section.product .product-layout .product-content .video .item .image {
flex: 1;
font-size: 0;
border-radius: 0.75rem;
overflow: hidden;
position: relative;
}
section.product .product-layout .product-content .video .item .image .play {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-flow: column;
gap: 0.5rem;
align-items: center;
justify-content: center;
}
section.product .product-layout .product-content .video .item .image .play img {
width: 3rem;
height: 3rem;
}
section.product .product-layout .product-content .video .item .image .play .caption {
color: rgba(255, 255, 255, 0.5);
}
section.product .product-layout .product-content .video .item .text {
flex: 1;
}
section.product .product-layout .product-content .parameters .items {
margin: 1rem 0;
display: flex;
padding: 1.125rem 0;
gap: 2.5rem;
}
section.product .product-layout .product-content .parameters .items .item {
position: relative;
flex: 1;
display: flex;
gap: 0.5rem;
}
section.product .product-layout .product-content .parameters .items .item .icon {
flex: 0 0 1.25rem;
height: 1.25rem;
}
section.product .product-layout .product-content .parameters .items .item .icon img {
width: 100%;
}
section.product .product-layout .product-content .parameters .items .item:not(:last-child):after {
content: close-quote;
position: absolute;
right: -1.25rem;
top: 0;
height: 100%;
width: 0.0625rem;
background: #EDEDED;
}
section.product .product-layout .product-content .parameters .doc {
display: inline-flex;
align-items: center;
gap: 0.375rem;
color: #00A63E;
font-size: 0.875rem;
font-style: normal;
font-weight: 600;
line-height: 1.25rem;
letter-spacing: -0.00938rem;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
section.product .product-layout .product-content .parameters .doc svg {
width: 1.125rem;
height: 1.125rem;
}
section.product .product-layout .product-content .notification {
display: flex;
padding: 1.5rem;
align-items: flex-start;
gap: 1rem;
background: #FFFAE5;
}
section.product .product-layout .product-content .notification .icon {
flex: 0 0 3rem;
height: 3rem;
font-size: 0;
}
section.product .product-layout .product-content .notification .icon img {
width: 100%;
}
section.product .product-layout .product-content .price-info .items {
padding: 2rem 0 0;
}
section.product .product-layout .product-content .price-info .items .item {
padding: 1.25rem 0;
}
section.product .product-layout .product-content .price-info .items .item .value {
margin: 0.25rem 0 0;
}
section.product .product-layout .product-content .price-info .items .item:not(:last-child) {
border-bottom: 1px solid #E5E7EB;
}
section.product .product-layout .product-content .accessories .items {
margin: 1rem 0 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
section.product .product-layout .product-content .accessories .items .item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem;
background: #F9FAFB;
}
section.product .product-layout .product-content .accessories .items .item .icon {
width: 2rem;
height: 2rem;
flex: 0 0 2rem;
}
section.product .product-layout .product-content .accessories .items .item .icon img {
width: 100%;
}
section.product .product-layout .product-content .accessories .items .item .values .value {
color: #6B7280;
}
section.page-hero {
padding: 3.375rem 0 2.75rem;
background: #F9F9F9 url(//stavar.sk/wp-content/themes/stavar/assets/img/page-hero.svg) no-repeat bottom right 5.5rem;
}
section.page-hero .content {
max-width: 46.5625rem;
}
section.page-hero-centered {
padding: 3.375rem 0 2.75rem;
background: #F9F9F9 url(//stavar.sk/wp-content/themes/stavar/assets/img/hero-centered.svg) no-repeat center bottom;
}
section.page-hero-centered .content .text h1 {
max-width: 52rem;
margin: 0 auto 1rem;
}
section.realisation-hero {
position: relative;
padding: 5.125rem 0;
}
section.realisation-hero .breadcrumb p {
color: #ADADAD;
}
section.realisation-hero .breadcrumb p a {
color: #ADADAD;
}
section.realisation-hero .breadcrumb p .last {
color: white;
}
section.realisation-hero .bg-image {
font-size: 0;
position: absolute;
inset: 0;
}
section.realisation-hero .bg-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
section.realisation-hero .bg-image:after {
content: close-quote;
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(30, 41, 57, 0.5) 0%, rgba(30, 41, 57, 0.05) 101.37%), linear-gradient(0deg, rgba(30, 41, 57, 0.5) 0%, rgba(30, 41, 57, 0.5) 100%);
}
section.realisation-hero .content .text {
max-width: 44.125rem;
padding: 1rem 0 2.25rem;
}
section.realisation-hero .content .features {
display: flex;
gap: 2.5rem;
padding: 1.125rem 0;
}
section.realisation-hero .content .features .item {
min-width: 10.5rem;
display: flex;
align-items: flex-start;
gap: 0.5rem;
position: relative;
}
section.realisation-hero .content .features .item .icon {
font-size: 0;
width: 1.125rem;
height: 1.125rem;
}
section.realisation-hero .content .features .item .icon svg {
width: 100%;
height: 100%;
object-fit: contain;
}
section.realisation-hero .content .features .item:not(:first-child):after {
content: close-quote;
position: absolute;
left: -1.25rem;
top: 0;
bottom: 0;
width: 1px;
background: rgba(237, 237, 237, 0.4);
}
section.realisation-list {
padding: 5.125rem 0;
background: white;
}
section.realisation-list .grid {
grid-template-columns: repeat(4, 1fr);
gap: 2rem 1rem;
}
section.realisation-list .grid .box {
background: white;
height: 100%;
display: flex;
flex-flow: column;
border: 1px solid #EDEDED;
}
section.realisation-list .grid .box .image {
font-size: 0;
position: relative;
height: 18.25rem;
}
section.realisation-list .grid .box .image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
section.realisation-list .grid .box .image .tag {
position: absolute;
top: 0.625rem;
left: 0.625rem;
}
section.realisation-list .grid .box .info {
flex: 1;
padding: 1rem;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
justify-content: space-between;
}
section.realisation-list .grid .box .info .button {
width: 100%;
}
section.realisation-detail {
padding: 3.375rem 0 5.125rem;
background: white;
}
section.realisation-detail .content .flex {
align-items: flex-start;
gap: 3rem;
}
section.realisation-detail .content .flex .texts {
flex: 1;
display: flex;
flex-flow: column;
gap: 3rem;
}
section.realisation-detail .content .flex .texts .block .title {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0 0 1rem;
}
section.realisation-detail .content .flex .texts .block .title .number {
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
}
section.realisation-detail .content .flex .texts .block:nth-child(odd) .title .number {
background: #F3F4F6;
color: #6A7282;
}
section.realisation-detail .content .flex .texts .block:nth-child(even) .title .number {
background: #1E2939;
color: white;
}
section.realisation-detail .content .flex .texts ul li {
padding: 0 0 0 2.125rem;
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/table-li.svg) no-repeat left top;
background-size: 1.5rem 1.5rem;
}
section.realisation-detail .content .flex .texts ul li:after {
content: none;
}
section.realisation-detail .content .flex .box {
flex: 0 0 22.625rem;
padding: 1.75rem;
box-sizing: border-box;
background: #F9F9F9;
}
section.realisation-detail .content .flex .box .items {
margin: 2rem 0;
display: flex;
flex-flow: column;
gap: 1.5rem;
}
section.realisation-detail .content .flex .box .items .item h4 {
margin: 0 0 0.5rem;
}
section.realisation-detail .content .flex .box .items .item .info {
color: #6A7282;
}
section.realisation-detail .content .flex .box .items .item:not(:last-child) {
padding: 0 0 1.5rem;
border-bottom: 1px solid #E5E7EB;
}
section.realisation-detail .gallery {
margin: 2.5rem 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.625rem;
}
section.realisation-detail .gallery a {
position: relative;
display: block;
font-size: 0;
height: 18.375rem;
}
section.realisation-detail .gallery a:nth-child(n+4) {
display: none;
}
section.realisation-detail .gallery a img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
section.realisation-detail .gallery a video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
position: relative;
}
section.realisation-detail .gallery a[data-video]:after {
content: close-quote;
position: absolute;
inset: 0;
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/play.svg) no-repeat center center;
background-size: 4rem 4rem;
cursor: pointer;
}
section.realisation-detail .gallery a .count {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(63deg, rgba(0, 161, 209, 0.8) 7%, rgba(0, 161, 209, 0) 117.1%);
color: #fff;
pointer-events: none;
}
section.realisation-detail .accessories .grid {
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin: 1rem 0 0;
}
section.realisation-detail .accessories .grid .item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem;
background: #F9FAFB;
}
section.realisation-detail .accessories .grid .item .icon {
width: 1.875rem;
height: 1.875rem;
}
section.realisation-detail .accessories .grid .item .icon img {
width: 100%;
}
section.wizard {
padding: 3.375rem 0 5rem;
background: #F9F9F9 url(//stavar.sk/wp-content/themes/stavar/assets/img/wizard_bg.svg) no-repeat center bottom;
}
section.wizard .guide {
max-width: 56rem;
margin: 3rem auto 0;
}
section.wizard .guide .guide__top {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 0 2rem;
}
section.wizard .guide .guide__top .guide__back {
visibility: hidden;
}
section.wizard .guide .guide__top .guide__back.is-visible {
visibility: visible;
}
section.wizard .guide .guide__top .guide__counter {
color: #6A7282;
}
section.wizard .guide .guide__card {
width: 100%;
box-sizing: border-box;
padding: 4rem;
border: 1px solid #EDEDED;
background: white;
box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.06), 0 12px 32px 0 rgba(0, 0, 0, 0.02);
}
section.wizard .guide .guide__card .guide__step {
display: none;
}
section.wizard .guide .guide__card .guide__step.is-active {
display: block;
}
section.wizard .guide .guide__card .guide__step .guide__heading {
text-align: center;
}
section.wizard .guide .guide__card .guide__step .guide__progress {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin: 1.875rem 0;
}
section.wizard .guide .guide__card .guide__step .guide__progress span {
height: 0.5rem;
flex: 1;
border-radius: 1rem;
background: #E5E7EB;
}
section.wizard .guide .guide__card .guide__step .guide__progress span.is-active {
background: #00A63E;
}
section.wizard .guide .guide__card .guide__step .guide__options {
display: grid;
gap: 1.25rem;
}
section.wizard .guide .guide__card .guide__step .guide__options .sr-only {
display: none;
}
section.wizard .guide .guide__card .guide__step .guide__options.guide__options--3 {
grid-template-columns: repeat(3, 1fr);
}
section.wizard .guide .guide__card .guide__step .guide__options.guide__options--2 {
grid-template-columns: repeat(2, 1fr);
}
section.wizard .guide .guide__card .guide__step .guide__options .guide-option {
cursor: pointer;
display: flex;
padding: 1.25rem 1.875rem;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 0.75rem;
border: 1px solid #E5E7EB;
box-sizing: border-box;
min-height: 7.875rem;
}
section.wizard .guide .guide__card .guide__step .guide__options .guide-option .guide-option__content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.625rem;
text-align: center;
}
section.wizard .guide .guide__card .guide__step .guide__options .guide-option .guide-option__content .guide-option__icon {
width: 3.5rem;
height: 3.5rem;
border-radius: 100%;
background: #F9F9F9;
display: flex;
align-items: center;
justify-content: center;
}
section.wizard .guide .guide__card .guide__step .guide__options .guide-option .guide-option__content .guide-option__icon svg {
width: 1.5rem;
height: 1.5rem;
}
section.wizard .guide .guide__card .guide__result {
display: none;
}
section.wizard .guide .guide__card .guide__result.is-active {
display: block;
}
section.wizard .guide .guide__card .guide__result .guide-result__content .title {
padding: 0 0 1.875rem;
border-bottom: 1px solid #F3F4F6;
}
section.wizard .guide .guide__card .guide__result .guide-result__content .title h6 {
color: #6A7282;
}
section.wizard .guide .guide__card .guide__result .guide-result__content .text {
padding: 1.875rem 0;
}
section.wizard .guide .guide__card .guide__result .guide-result__content .text ul li {
padding: 0 0 0 1.875rem;
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/table-li.svg) no-repeat left top 0.1875rem;
background-size: 1.25rem 1.25rem;
}
section.wizard .guide .guide__card .guide__result .guide-result__content .text ul li:after {
content: none;
}
section.wizard .guide .guide__card .guide__result .guide-result__content .guide-result__notice {
border: 1px solid rgba(217, 119, 6, 0.2);
background: #FFF7E6;
display: flex;
padding: 1rem;
align-items: center;
gap: 0.75rem;
margin: 0 0 1.875rem;
}
section.wizard .guide .guide__card .guide__result .guide-result__content .guide-result__notice .icon {
font-size: 0;
width: 2.25rem;
height: 2.25rem;
flex: 0 0 2.25rem;
}
section.wizard .guide .guide__card .guide__result .guide-result__content .guide-result__notice .icon img {
width: 100%;
height: auto;
}
section.wizard .guide .guide__card .guide__result .guide-result__content .guide-result__notice .info {
color: #92400E;
}
section.wizard .guide .guide__card .guide__result .guide-result__buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin: 0 0 1.875rem 0;
}
section.wizard .guide .guide__card .guide__result .guide-result__reset-wrapper {
display: flex;
justify-content: center;
}
section.wizard .guide .guide__card .guide__result .guide-result__reset-wrapper button {
padding: 0.25rem 1rem;
background: white;
display: flex;
align-items: center;
gap: 0.5rem;
color: black;
font-family: rigid-square, sans-serif;
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 1.75rem; letter-spacing: -0.0275rem;
}
section.wizard .guide .guide__card .guide__result .guide-result__reset-wrapper button .icon {
font-size: 0;
width: 0.875rem;
height: 0.875rem;
}
section.wizard .guide .guide__card .guide__result .guide-result__reset-wrapper button .icon svg {
width: 100%;
height: 100%;
}
section.wizard .guide .guide__card .guide__form {
display: none;
}
section.wizard .guide .guide__card .guide__form.is-active {
display: block;
}
section.wizard .guide .guide__card .guide__form .form {
margin: 3rem 0 0;
}
section.wizard .guide-form {
display: none;
}
section.solution-list {
padding: 4.375rem 0;
}
section.solution-list .wrapper {
margin: 0 auto;
text-align: center;
}
section.solution-list .wrapper .tabs {
margin: 1.25rem 0 0;
display: inline-flex;
padding: 0.375rem;
align-items: flex-start;
gap: 0.25rem;
border-radius: 0.75rem;
background: #EDEDED;
}
section.solution-list .wrapper .tabs .tab {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
cursor: pointer;
}
section.solution-list .wrapper .tabs .tab.active {
background: #FFF;
}
section.solution-list .contents {
margin: 3.125rem 0 0;
}
section.solution-list .contents .content {
display: none;
}
section.solution-list .contents .content.active {
display: block;
}
section.solution-list .contents .content .grid {
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
section.solution-list .contents .content .grid .item {
padding: 1.375rem;
background: #F9F9F9;
}
section.solution-list .contents .content .grid .item .icon {
font-size: 0;
margin: 0 0 0.75rem;
width: 3.5rem;
height: 3.5rem;
}
section.solution-list .contents .content .grid .item .icon svg {
width: 100%;
height: 100%;
}
section.solution-list .contents .content .grid .item .text {
margin: 0 0 0.9375rem;
}
section.solution-list .contents .content .grid .item .link {
display: flex;
align-items: center;
gap: 0.5rem;
color: #00A1D1;
}
section.solution-list .box {
margin: 2.5rem 0 0;
background: #00A1D1;
display: flex;
align-items: center;
gap: 2rem;
box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.06), 0 12px 32px 0 rgba(0, 0, 0, 0.02);
padding: 2.5rem;
}
section.solution-list .box .text {
flex: 1;
}
section.media-text {
padding: 3.375rem 0;
}
section.media-text .flex {
gap: 4rem;
}
section.media-text .flex.flex-reverse {
flex-flow: row-reverse;
}
section.media-text .flex-center {
align-items: center;
}
section.media-text .flex-end {
align-items: flex-end;
}
section.media-text .flex .media {
flex: 0 1 41.5rem;
font-size: 0;
position: relative;
}
section.media-text .flex .media img {
max-height: 27.875rem;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
section.media-text .flex .media video {
border-radius: 1.25rem;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
section.media-text .flex .media .play {
position: absolute;
z-index: 1;
font-size: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1.25rem;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
display: flex;
align-items: center;
justify-content: center;
}
section.media-text .flex .media .play svg {
width: 6rem;
height: 6rem;
}
section.media-text .flex .content {
flex: 0 1 38.875rem;
}
section.media-text .flex .content .text-content {
padding: 0 2.5rem;
}
section.media-text .flex .content .text-content .caption {
text-transform: uppercase;
font-weight: 700;
color: #6A7282;
margin: 0 0 1rem;
}
section.solution-info {
padding: 4rem 0;
}
section.solution-info .flex {
gap: 4rem;
}
section.solution-info .flex .steps {
flex: 1;
}
section.solution-info .flex .steps .items {
margin: 1rem 0 0;
}
section.solution-info .flex .steps .items .step {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0 0 1rem;
}
section.solution-info .flex .steps .items .step .number {
width: 2rem;
height: 2rem;
flex: 0 0 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
}
section.solution-info .flex .steps .items .step:nth-child(odd) .number {
background: #F3F4F6;
color: #6A7282;
}
section.solution-info .flex .steps .items .step:nth-child(even) .number {
background: #1E2939;
color: white;
}
section.solution-info .flex .faq {
flex: 1;
}
section.solution-info .flex .faq .questions {
margin: 1.125rem 0 0;
}
section.solution-info .flex .faq .questions .toggle {
border-bottom: 0.0625rem solid #EDEDED;
}
section.solution-info .flex .faq .questions .toggle.active .question:after {
transform: rotate(0deg);
}
section.solution-info .flex .faq .questions .toggle .question {
padding: 1.25rem 2rem 1.25rem 0;
position: relative;
cursor: pointer;
}
section.solution-info .flex .faq .questions .toggle .question:after, section.solution-info .flex .faq .questions .toggle .question:before {
content: close-quote;
position: absolute;
height: 0.125rem;
width: 1rem;
background: #00A1D1;
right: 0;
top: 50%;
}
section.solution-info .flex .faq .questions .toggle .question:after {
transform: rotate(90deg);
transition: transform 0.3s ease;
}
section.solution-info .flex .faq .questions .toggle .answer {
padding: 0 4rem 0 0;
}
section.solution-info .flex .faq .questions .toggle .answer .text-content {
padding: 0 0 1.25rem;
}
section.recommended-types {
padding: 4.375rem 0 2.75rem;
overflow: hidden;
}
section.recommended-types .title {
margin: 0 0 3.125rem;
}
section.recommended-types .slider {
margin: 0 -0.375rem;
}
section.recommended-types .slider .slide {
height: auto;
}
section.recommended-types .slider .slide .item {
height: 100%;
box-sizing: border-box;
margin: 0 0.375rem;
padding: 1rem;
border: 2px solid #F9F9F9;
background: #F9F9F9;
display: flex;
flex-flow: column;
justify-content: space-between;
}
section.recommended-types .slider .slide .item.active {
border: 2px solid #00A63E;
}
section.recommended-types .slider .slide .item .image {
position: relative;
font-size: 0;
height: 11.8125rem;
}
section.recommended-types .slider .slide .item .image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
section.recommended-types .slider .slide .item .image .tag {
position: absolute;
top: 0.625rem;
left: 0.625rem;
}
section.recommended-types .slider .slide .item .wrapper {
height: 100%;
display: flex;
flex-flow: column;
justify-content: space-between;
}
section.recommended-types .slider .slide .item .wrapper .text {
padding: 1.25rem 0;
}
section.recommended-types .slider .slide .item .wrapper .text p {
color: #808080;
}
section.recommended-types .slider .slide .item .wrapper .info .pricing {
padding: 1.25rem 0;
border-top: 1px solid #D6D6D6;
}
section.recommended-types .slider .slide .item .wrapper .info .pricing .rent {
color: #99A1AF;
}
section.recommended-types .slider .slide .item .wrapper .info .buttons {
display: flex;
align-items: center;
gap: 1rem;
}
section.recommended-types .slider .slide .item .wrapper .info .buttons .link {
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 1.75rem;
letter-spacing: -0.0275rem;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
color: #191815;
}
section.recommended-types .slider .slick-list {
overflow: visible;
}
section.recommended-types .slider .slick-track {
display: flex;
}
section.recommended-types .slider .slick-dots {
display: flex;
gap: 0.375rem;
justify-content: center;
margin: 2rem 0 0;
font-size: 0;
}
section.recommended-types .slider .slick-dots li button {
font-size: 0;
width: 0.375rem;
height: 0.125rem;
background: #D7D7D7;
transition: all 0.3s ease-in-out;
}
section.recommended-types .slider .slick-dots li.slick-active button {
width: 0.9375rem;
background: #00A1D1;
}
section.recommended-types .box {
margin: 2.5rem 0 0;
background: #00A1D1;
display: flex;
align-items: center;
gap: 2rem;
box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.06), 0 12px 32px 0 rgba(0, 0, 0, 0.02);
padding: 2.5rem;
}
section.recommended-types .box .text {
flex: 1;
}
section.icons {
padding: 4.375rem 0;
}
section.icons .main-text {
margin: 0 0 2.5rem;
}
section.icons .grid {
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
section.icons .grid:has(> :nth-child(1):last-child) {
grid-template-columns: 1fr;
}
section.icons .grid:has(> :nth-child(2):last-child) {
grid-template-columns: repeat(2, 1fr);
}
section.icons .grid:has(> :nth-child(3):last-child) {
grid-template-columns: repeat(3, 1fr);
}
section.icons .grid .item {
padding: 1.375rem;
background: #F9F9F9;
display: flex;
flex-flow: column;
gap: 0.75rem;
min-height: 13.875rem;
box-sizing: border-box;
}
section.icons .grid .item .icon {
width: 3.5rem;
height: 3.5rem;
}
section.icons .grid .item .icon img {
width: 100%;
}
section.icons .grid .item .text .caption {
letter-spacing: 0.075rem;
text-transform: uppercase;
margin: 0 0 0.75rem;
color: #6A7282;
}
section.icons .grid .item .text p {
color: #4A5565;
}
section.business-card .box {
background: #00A1D1;
box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.06), 0 12px 32px 0 rgba(0, 0, 0, 0.02);
display: flex;
gap: 2rem;
align-items: center;
padding: 2.5rem;
}
section.business-card .box .seller {
flex: 1;
display: inline-flex;
align-items: center;
gap: 2rem;
}
section.business-card .box .seller .photo {
font-size: 0;
width: 8rem;
height: 8rem;
flex: 0 0 8rem;
border-radius: 100%;
border: 4px solid #FFF;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
section.business-card .box .seller .photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border-radius: 100%;
}
section.business-card .box .seller .content .tag {
margin: 0.5rem 0;
}
section.business-card .box .contacts {
flex: 0 1 21.6875rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
section.business-card .box .contacts .contact {
display: inline-flex;
align-items: center;
gap: 1rem;
}
section.business-card .box .contacts .contact .contact-icon {
flex: 0 0 3.5rem;
font-size: 0;
}
section.business-card .box .contacts .contact .contact-icon img {
width: 100%;
}
section.info-image {
background: #0F172B;
position: relative;
}
section.info-image .bg-image {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 50vw;
font-size: 0;
}
section.info-image .bg-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
section.info-image .wrapper {
min-height: 26.5rem;
display: flex;
align-items: center;
}
section.info-image .wrapper .content {
padding: 4.5rem 2rem 4.5rem 0;
width: 50%;
box-sizing: border-box;
}
section.info-image .wrapper .content .text p {
color: #99A1AF !important;
}
section.info-image .wrapper .content .facts {
margin: 1.5rem 0 0;
display: grid;
gap: 2rem;
grid-template-columns: repeat(2, 1fr);
}
section.info-image .wrapper .content .facts .fact {
padding: 1.25rem 0;
}
section.info-image .wrapper .content .facts .fact > * {
color: white;
}
section.info-image .wrapper .content .facts .fact h5 {
padding: 1rem 0 0;
margin: -2.375rem 0 0px;
position: relative;
background: #0F172B;
}
section.info-image .wrapper .content .locations {
margin: 1.5rem 0 0;
display: grid;
gap: 2rem;
grid-template-columns: repeat(2, 1fr);
}
section.info-image .wrapper .content .locations .location {
padding: 1.25rem;
background: #1A2539;
display: flex;
flex-flow: column;
justify-content: space-between;
gap: 2rem;
}
section.info-image .wrapper .content .locations .location .info .city {
display: flex;
align-items: center;
gap: 0.25rem;
margin: 0 0 0.5rem;
}
section.info-image .wrapper .content .locations .location .info .city svg {
width: 1.25rem;
height: 1.25rem;
}
section.info-image .wrapper .content .locations .location .info .text-content h6 {
margin: 0;
}
section.info-image .wrapper .content .locations .location .info .text-content p {
color: #99A1AF !important;
}
section.info-image .wrapper .content .locations .location .info .text-content p a {
color: inherit;
}
section.info-image .wrapper .content .locations .location .opening--hours {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 0 0;
border-top: 1px solid rgba(128, 128, 128, 0.2);
color: #99A1AF;
}
section.info-image .wrapper .content .locations .location .opening--hours svg {
width: 1rem;
height: 1rem;
}
section.contact-expert {
background: #F9F9F9;
padding: 3.375rem 0 2.75rem;
}
section.contact-expert .flex {
gap: 2rem;
align-items: flex-start;
}
section.contact-expert .flex .main-content {
flex: 1;
}
section.contact-expert .flex .main-content .box {
display: inline-flex;
align-items: center;
gap: 2rem;
padding: 1.25rem 2.5rem 1.25rem 1.25rem;
background: #EDEDED;
margin: 3.375rem 0 2.25rem;
}
section.contact-expert .flex .main-content .box .photo {
font-size: 0;
width: 8rem;
height: 8rem;
flex: 0 0 8rem;
border-radius: 100%;
border: 4px solid #FFF;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
section.contact-expert .flex .main-content .box .photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border-radius: 100%;
}
section.contact-expert .flex .main-content .contacts {
display: flex;
align-items: flex-start;
gap: 1.5rem;
}
section.contact-expert .flex .main-content .contacts .contact {
flex: 1;
display: inline-flex;
align-items: center;
gap: 1rem;
}
section.contact-expert .flex .main-content .contacts .contact .contact-icon {
flex: 0 0 3.5rem;
font-size: 0;
}
section.contact-expert .flex .main-content .contacts .contact .contact-icon img {
width: 100%;
}
section.contact-expert .flex .form-wrapper {
flex: 0 0 36.25rem;
box-sizing: border-box;
padding: 3.25rem;
background: white;
}
section.contact-expert .flex .form-wrapper .form {
margin: 3rem 0 0;
}
section.text-content {
padding: 4.375rem 0;
}
section.text-content .content {
max-width: 57.5rem;
margin: 0 auto;
} footer {
padding: 3.5rem 0 2.5rem;
background: #1D1D1B;
}
footer .top {
margin: 0 0 4rem;
}
footer .top .flex {
justify-content: space-between;
}
footer .top .flex .col .logo {
font-size: 0;
}
footer .top .flex .col .logo a {
display: inline-block;
}
footer .top .flex .col .description {
margin: 1rem 0;
}
footer .top .flex .col .social {
display: flex;
align-items: center;
gap: 0.75rem;
}
footer .top .flex .col .name {
margin: 0 0 0.75rem;
color: white;
}
footer .top .flex .col .content ul {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
footer .top .flex .col .content ul li a {
color: #ADADAD;
padding: 0 0 0 1.625rem;
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/arrow-right.svg) no-repeat left center;
background-size: 1rem 1rem;
transition: color 0.3s ease-out;
}
footer .top .flex .col .content ul li a:hover {
color: white;
}
footer .top .flex .col .content ul li a.tel {
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/phone.svg) no-repeat left center;
background-size: 1rem 1rem;
}
footer .top .flex .col .content ul li a.mail {
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/mail.svg) no-repeat left center;
background-size: 1rem 1rem;
}
footer .top .flex .col .content ul li a.address {
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/map-pin.svg) no-repeat left center;
background-size: 1rem 1rem;
}
footer .bottom {
padding: 1rem 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
footer .bottom .flex {
justify-content: space-between;
}
footer .bottom .flex .copyright {
color: #ADADAD;
}
footer .bottom .flex .made-by {
color: #ADADAD;
}
footer .bottom .flex .made-by a {
color: white;
}
footer .bottom .flex .links {
display: flex;
align-items: center;
gap: 1.5rem;
}
footer .bottom .flex .links a {
color: #ADADAD;
padding: 0 0 0 1.5rem;
transition: color 0.3s ease-out;
}
footer .bottom .flex .links a:hover {
color: white;
}
footer .bottom .flex .links a.terms {
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/file-text.svg) no-repeat left center;
background-size: 1rem 1rem;
}
footer .bottom .flex .links a.gdpr {
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/shield.svg) no-repeat left center;
background-size: 1rem 1rem;
}
footer .bottom .flex .links a.cookies {
background: url(//stavar.sk/wp-content/themes/stavar/assets/img/cookie.svg) no-repeat left center;
background-size: 1rem 1rem;
}  @media (max-width: 1499px) {
section.category-slider .slider .arrow {
top: calc(100% - 1.5rem);
}
section.category-slider .slider .arrow.next {
right: 0.5rem;
}
section.category-slider .slider .arrow.prev {
left: initial;
right: 4.375rem;
}
}
@media (max-width: 1399px) {
section.hero .img_anime {
right: 1rem;
}
}
@media (max-width: 1299px) {
header .flex nav ul {
gap: 1.25rem;
}
section.guide .flex .box {
padding: 4rem;
}
}
@media (max-width: 1199px) {
.container {
max-width: calc(960px + 2rem);
}
header .flex nav {
display: none;
}
header .flex .actions .button {
display: none;
}
header .flex .burger {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
gap: 5px;
width: 2.75rem;
height: 2.75rem;
border-radius: 100%;
background: #101828;
box-sizing: border-box;
font-size: 0;
cursor: pointer;
position: relative;
}
header .flex .burger span {
width: 1rem;
height: 1px;
background: white;
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
-ms-transition: all 0.35s;
-o-transition: all 0.35s;
transition: all 0.35s;
}
header .flex .burger.active {
background: rgba(255, 255, 255, 0.11);
}
header .flex .burger.active span:nth-child(1) {
-webkit-transform: translate(0, 6px) rotate(45deg);
-moz-transform: translate(0, 6px) rotate(45deg);
-ms-transform: translate(0, 6px) rotate(45deg);
-o-transform: translate(0, 6px) rotate(45deg);
transform: translate(0, 6px) rotate(45deg);
}
header .flex .burger.active span:nth-child(2) {
width: 0;
}
header .flex .burger.active span:nth-child(3) {
-webkit-transform: translate(0, -6px) rotate(-45deg);
-moz-transform: translate(0, -6px) rotate(-45deg);
-ms-transform: translate(0, -6px) rotate(-45deg);
-o-transform: translate(0, -6px) rotate(-45deg);
transform: translate(0, -6px) rotate(-45deg);
}
section.hero {
background-size: 80% auto;
padding: 0 0 2.75rem;
}
section.hero .img_anime {
width: 27rem;
top: -26rem;
}
section.hero .flex {
height: 30rem;
}
section.trust-strip {
overflow: hidden;
}
section.trust-strip .slick-list {
overflow: visible;
}
section.trust-strip .flex {
display: block;
}
section.trust-strip .flex .item {
width: 20rem;
margin: 0 0.5rem;
}
section.guide .flex .box {
padding: 3rem 2rem;
}
section.process .flex .item {
padding: 0;
}
section.map .flex .image {
flex: 0 1 38rem;
}
section.column-hero .content .flex {
flex-flow: column;
align-items: flex-start;
gap: 2rem;
}
section.column-hero .content .flex .text {
flex: 1;
}
section.contact-expert .flex {
flex-flow: column;
}
section.contact-expert .flex .main-content .wrapper {
display: flex;
gap: 2rem;
align-items: center;
}
section.contact-expert .flex .main-content .contacts {
flex-flow: column;
}
section.contact-expert .flex .form-wrapper {
width: 100%;
flex: 1 1 100%;
}
section.solution-list .contents .content .grid {
grid-template-columns: repeat(2, 1fr);
}
section.recommended-types .slider .slide .item {
width: 27rem;
}
section.media-text .flex {
gap: 2rem;
}
section.media-text .flex .media img {
min-height: 27.875rem;
}
section.media-text .flex .content .text-content {
padding: 0;
}
section.realisation-list .grid {
grid-template-columns: repeat(3, 1fr);
}
section.product-list .grid {
grid-template-columns: repeat(3, 1fr);
}
section.hero-catalog .bg-image {
display: none;
}
section.hero-catalog .categories {
grid-template-columns: repeat(3, 1fr);
}
section.product .product-layout {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "gallery" "aside" "content";
gap: 1.5rem;
}
section.product .product-layout .aside {
position: static;
width: auto;
}
section.product .product-layout .product-content {
margin: 2rem 0 0;
}
footer .bottom {
padding: 2rem 0 0;
}
footer .bottom .flex {
flex-flow: column-reverse;
gap: 1.75rem;
align-items: center;
}
}
@media (max-width: 991px) {
@keyframes container-move {
0%, 15% {
transform: translateY(0);
}
45%, 55% {
transform: translateY(3rem);
}
85%, 100% {
transform: translateY(0);
}
}
.container {
max-width: calc(720px + 2rem);
}
section.hero {
background-size: 60% auto;
padding: 15rem 0 2.75rem;
}
section.hero .img_anime {
width: 20rem;
right: calc(50% - 10rem);
top: -21rem;
}
section.hero .flex {
height: auto;
}
section.hero .flex .text-content {
max-width: 100%;
}
section.hero .content .call {
display: none;
}
section.solutions .grid {
grid-template-columns: repeat(2, 1fr);
}
section.map .flex {
flex-flow: column;
}
section.map .flex .image {
flex: 1;
}
section.contact .form .flex {
flex-flow: column;
}
section.contact .form .flex .form-wrapper {
flex: 1;
}
section.contact .form .flex .box {
flex: 1;
}
section.process .grid {
grid-template-columns: repeat(2, 1fr);
}
section.icons .grid {
grid-template-columns: repeat(2, 1fr);
}
section.business-card .box {
flex-flow: column;
align-items: flex-start;
}
section.business-card .box .contacts {
flex: 1;
margin-left: 10rem;
}
section.info-image .bg-image {
position: initial;
width: 100%;
}
section.info-image .bg-image img {
max-height: 25rem;
}
section.info-image .wrapper .content {
padding: 2.5rem 0;
width: 100%;
}
section.contact-expert .flex .main-content .box {
margin: 3.375rem 0 0;
}
section.contact-expert .flex .main-content .wrapper {
align-items: flex-start;
flex-flow: column;
}
section.contact-expert .flex .main-content .contacts {
flex-flow: row;
width: 100%;
}
section.solution-info .flex {
flex-flow: column;
}
section.media-text .flex {
flex-flow: column;
}
section.media-text .flex.flex-reverse {
flex-flow: column;
}
section.media-text .flex .media {
flex: 1;
flex: 1 1 100%;
width: 100%;
}
section.media-text .flex .content {
flex: 1;
}
section.realisation-list .grid {
grid-template-columns: repeat(2, 1fr);
}
section.realisation-detail .content .flex {
flex-flow: column;
}
section.realisation-detail .content .flex .box {
flex: 1;
width: 100%;
}
section.realisation-detail .content .flex .box .items {
flex-flow: row;
}
section.realisation-detail .content .flex .box .items .item {
flex: 1;
}
section.realisation-detail .content .flex .box .items .item:not(:last-child) {
padding: 0 1.5rem 0 0;
border-right: 1px solid #E5E7EB;
border-bottom: none;
}
section.realisation-detail .gallery a {
height: 14.375rem;
}
section.products .grid {
grid-template-columns: repeat(2, 1fr);
}
section.product-list .grid {
grid-template-columns: repeat(2, 1fr);
}
footer .top .flex {
flex-flow: row wrap;
gap: 4rem 2rem;
}
footer .top .flex .col {
flex: 0 0 46%;
}
}
@media (max-width: 767px) {
.container {
max-width: calc(540px + 2rem);
}
h1, .h1 {
font-size: 2.5rem;
line-height: 3.125rem;
letter-spacing: -0.1875rem;
}
h2, .h2 {
font-size: 2.25rem;
line-height: 2.5625rem;
letter-spacing: -0.125rem;
}
h3, .h3 {
font-size: 2rem;
line-height: 2.25rem;
letter-spacing: -0.0625rem;
}
h4, .h4 {
font-size: 1.5rem;
line-height: 2.125rem;
letter-spacing: -0.0625rem;
}
h5, .h5 {
font-size: 1.25rem;
line-height: 1.5rem;
letter-spacing: -0.0625rem;
}
h6, .h6 {
font-size: 1.125rem;
}
.text-content .buttons {
gap: 0.5rem;
}
.gform_wrapper .gform-body .gform_fields {
gap: 1.25rem;
}
.gform_wrapper .gform-body .gfield.gfield--width-half {
flex: 0 1 100%;
}
header .flex .logo a {
width: 10.8125rem;
height: 3.04438rem;
}
header .flex .actions {
gap: 0.75rem;
}
header .flex .actions .quick-contacts .whatsapp {
display: none;
}
header .flex .actions .quick-contacts .tel {
font-size: 0;
background: white url(//stavar.sk/wp-content/themes/stavar/assets/img/tel.svg) no-repeat center center;
background-size: 1.375rem 1.375rem;
width: 2.75rem;
height: 2.75rem;
border-radius: 100%;
padding: 0;
}
section.hero {
background-size: 0 0;
}
section.guide {
padding: 3.375rem 0;
}
section.guide .flex {
flex-flow: column;
}
section.guide .flex .box {
padding: 2.5rem;
}
section.full-image .image {
height: 100%;
position: absolute;
inset: 0;
}
section.full-image .image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
section.full-image .content {
position: initial;
padding: 20rem 0 1.5rem;
}
section.solutions {
padding: 3.375rem 0;
}
section.category-slider {
padding: 3.375rem 0;
}
section.process {
padding: 3.375rem 0;
}
section.process .grid {
margin: 1rem 0 0;
}
section.cta {
padding: 8rem 0 0.875rem 0;
}
section.cta .box {
height: auto;
}
section.cta .box .flex {
gap: 2rem;
}
section.column-hero .content .flex {
gap: 1rem;
}
section.icons .grid:has(> :nth-child(3):last-child) {
grid-template-columns: repeat(1, 1fr);
}
section.business-card .box .contacts {
margin-left: 0;
}
section.info-image .wrapper .content .locations {
gap: 1rem;
grid-template-columns: repeat(1, 1fr);
}
section.contact-expert .flex .main-content .box {
margin: 2.5rem 0 0;
}
section.contact-expert .flex .main-content .wrapper {
align-items: flex-start;
flex-flow: column;
}
section.contact-expert .flex .main-content .contacts {
flex-flow: column;
width: 100%;
}
section.solution-list {
padding: 3.375rem 0;
}
section.solution-list .box {
flex-flow: column;
align-items: flex-start;
}
section.faq {
padding: 3.375rem 0;
}
section.recommended-types {
padding: 3.375rem 0;
}
section.recommended-types .box {
flex-flow: column;
align-items: flex-start;
}
section.solution-info {
padding: 3.375rem 0;
}
section.realisation-list {
padding: 3.375rem 0;
}
section.realisation-list .grid {
grid-template-columns: repeat(1, 1fr);
}
section.realisation-detail {
padding: 3.375rem 0;
}
section.realisation-detail .content .flex .box {
flex: 1;
width: 100%;
}
section.realisation-detail .content .flex .box .items {
flex-flow: column;
}
section.realisation-detail .content .flex .box .items .item {
flex: 1;
}
section.realisation-detail .content .flex .box .items .item:not(:last-child) {
padding: 0 0 1.5rem 0;
border-bottom: 1px solid #E5E7EB;
border-right: none;
}
section.realisation-detail .gallery a {
height: 11.375rem;
}
section.realisation-detail .accessories .grid {
grid-template-columns: 1fr;
}
section.realisation-hero {
padding: 3.375rem 0;
}
section.realisation-hero .content .features {
display: grid;
grid-template-columns: 1fr 1fr;
}
section.realisation-hero .content .features .item {
min-width: auto;
}
section.realisation-hero .content .features .item:not(:first-child):after {
content: none;
}
section.column-hero .content .box {
flex-flow: column;
align-items: flex-start;
}
section.products {
padding: 3.375rem 0;
}
section.table {
padding: 3.375rem 0;
}
section.table .table {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
margin: 2.5rem -1rem 0;
width: calc(100% + 2rem);
}
section.table .table::-webkit-scrollbar {
display: none;
}
section.table .table table {
min-width: max-content;
border-collapse: collapse;
margin: 0 1rem;
}
section.table .table table th, section.table .table table td {
white-space: nowrap;
}
section.wizard .guide .guide__card .guide__step .guide__options.guide__options--2 {
grid-template-columns: repeat(1, 1fr);
}
section.wizard .guide .guide__card .guide__step .guide__options.guide__options--3 {
grid-template-columns: repeat(2, 1fr);
}
section.hero-catalog .categories a .box {
padding: 1rem;
}
section.compare {
padding: 3.375rem 0;
}
section.product .product-layout .gallery {
margin: 0;
}
section.product .product-layout .gallery .product-gallery .gallery-main {
height: 21.9375rem;
}
section.product .product-layout .product-content .parameters .items {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem 2.5rem;
}
section.product .product-layout .product-content .parameters .items .item:not(:last-child):after {
content: none;
}
section.product .product-layout .product-content .video .item {
gap: 1rem;
flex-flow: column;
}
section.product .product-layout .product-content .use-cases .grid {
grid-template-columns: repeat(1, 1fr);
}
section.product .product-layout .product-content .accessories .items {
grid-template-columns: 1fr;
}
section.product .product-layout .product-content .form {
padding: 1rem;
}
section.text-content {
padding: 3.375rem 0;
}
}
@media (max-width: 575px) {
.container {
max-width: 100%;
}
header {
position: relative;
}
header:after {
content: close-quote;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 21rem;
background: linear-gradient(180deg, #F4F3FA 0%, rgba(244, 243, 250, 0) 32.19%);
z-index: 10;
pointer-events: none;
}
section.category-slider {
overflow: hidden;
}
section.category-slider .slider .slick-list {
overflow: visible;
}
section.category-slider .slider .slide .box {
width: 18.5rem;
}
section.process .grid {
grid-template-columns: repeat(1, 1fr);
}
section.process .grid .item {
position: relative;
}
section.process .grid .item:not(:last-child):after {
content: close-quote;
position: absolute;
bottom: -1rem;
left: 0;
right: 0;
height: 1px;
background: rgba(0, 0, 0, 0.1);
}
section.business-card .box {
margin: 0 -1rem;
padding: 2rem 1rem;
}
section.business-card .box .seller {
flex-flow: column;
align-items: flex-start;
}
section.icons .grid {
grid-template-columns: repeat(1, 1fr);
}
section.icons .grid:has(> :nth-child(2):last-child) {
grid-template-columns: repeat(1, 1fr);
}
section.icons .grid .item {
min-height: initial;
}
section.contact-expert .flex .main-content .box {
margin: 2.5rem -1rem 0 -1rem;
width: calc(100% + 2rem);
box-sizing: border-box;
gap: 1rem;
padding: 1.25rem 1.5rem 1.25rem 1rem;
}
section.contact-expert .flex .main-content .box .photo {
width: 4rem;
height: 4rem;
flex: 0 0 4rem;
}
section.solution-list .contents .content .grid {
grid-template-columns: repeat(1, 1fr);
}
section.solution-list .box {
padding: 2rem 1.5rem;
}
section.recommended-types .slider .slide .item {
width: calc(100vw - 4rem);
}
section.recommended-types .slider .slide .item .wrapper .info .buttons {
flex-flow: column;
align-items: flex-start;
}
section.recommended-types .box {
padding: 2rem 1.5rem;
}
section.solution-info .flex .faq .questions .toggle .answer {
padding: 0 2rem 0 0;
}
section.faq .wrapper .questions .toggle .answer {
padding: 0 2rem 0 0;
}
section.column-hero .content .buttons {
flex-flow: column;
align-items: flex-start;
}
section.realisation-detail .gallery a {
height: 7.375rem;
}
section.realisation-detail .gallery a[data-video]:after {
background-size: 2rem 2rem;
}
section.products .grid {
grid-template-columns: repeat(1, 1fr);
}
section.wizard .guide .guide__card {
padding: 2rem 1rem 1rem;
}
section.wizard .guide .guide__card .guide__step .guide__options {
gap: 0.5rem;
}
section.wizard .guide .guide__card .guide__step .guide__options .guide-option {
padding: 1.25rem 1rem;
}
section.hero-catalog .categories {
grid-template-columns: repeat(2, 1fr);
}
section.product-list .grid {
grid-template-columns: repeat(1, 1fr);
}
section.compare .wrapper .overflow .table .columns {
grid-template-columns: 7.75rem;
}
section.product .product-layout .gallery .product-gallery .gallery-main {
height: 13.9375rem;
}
section.product .product-layout .gallery .product-gallery .gallery-thumbnails {
grid-template-columns: repeat(2, 1fr);
}
section.product .product-layout .aside .box {
padding: 1rem;
}
section.product .product-layout .aside .box .pricing {
flex-flow: column;
}
section.product .product-layout .aside .box .buttons {
flex-flow: column;
}
section.product .product-layout .product-content {
padding: 1.25rem 1rem;
}
section.product .product-layout .product-content .parameters .items {
grid-template-columns: 1fr;
gap: 1rem;
}
section.product .product-layout .product-content .compare .grid {
grid-template-columns: 1fr;
}
section.product .product-layout .product-content .form .content {
padding: 1rem;
}
section.product .product-layout .product-content .form .content .tabs {
flex-flow: column;
height: auto;
}
section.solutions .grid {
gap: 0.5rem;
}
section.solutions .grid a {
height: 12.375rem;
}
section.solutions .grid a .image {
width: 92%;
height: 80%;
}
section.solutions .grid a .image img {
height: 100%;
object-fit: contain;
object-position: top right;
}
section.solutions .grid a .text-content p {
display: none;
}
section.solutions .grid a .hover {
display: none;
}
section.contact .form {
padding: 1.25rem 1.25rem 0;
border-radius: 0 0 0.75rem 0.75rem;
}
section.contact .form .flex .box {
margin: 0 -1.25rem;
padding: 1.25rem;
}
section.contact .form .flex .box .contacts {
margin: 1.5rem 0;
}
section.contact .form .flex .box .contacts .contact-content .contact-label {
font-size: 0.875rem;
line-height: 1.1875rem;
}
section.contact-form .form {
padding: 1.25rem;
}
footer .top .flex {
flex-flow: column;
gap: 3rem;
text-align: center;
justify-content: center;
align-items: center;
}
footer .top .flex .col {
flex: 1;
}
footer .top .flex .col .social {
justify-content: center;
}
footer .top .flex .col .content ul {
align-items: center;
}
footer .bottom .flex .links {
flex-flow: column;
}
}
@media (min-width: 1799px) {
html {
font-size: 18px;
}
}
@media (min-width: 1999px) {
html {
font-size: 20px;
}
}
@media (min-width: 2399px) {
html {
font-size: 24px;
}
}