@charset "UTF-8";
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;
}

body {
  line-height: 1;
}

a {
  text-decoration-skip-ink: auto;
}

a[href^=tel] {
  color: inherit;
  text-decoration: none;
}

button {
  outline: 0;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

q {
  display: inline;
  font-style: italic;
}

q:before {
  content: '"';
  font-style: normal;
}

q:after {
  content: '"';
  font-style: normal;
}

textarea, input[type=text], input[type=button], input[type=submit], input[type=reset], input[type=search], input[type=password] {
  -webkit-appearance: none;
  appearance: none;
}

input[type=search] {
  -webkit-appearance: textfield;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  padding: 2px;
}

big {
  font-size: 120%;
}

small, sup, sub {
  font-size: 80%;
}

sup {
  vertical-align: super;
}

sub {
  vertical-align: sub;
}

dd {
  margin-left: 20px;
}

kbd, tt {
  font-family: courier;
  font-size: 12px;
}

ins {
  text-decoration: underline;
}

del, strike, s {
  text-decoration: line-through;
}

dt {
  font-weight: bold;
}

address, cite, var {
  font-style: italic;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  word-break: normal;
}

.screen-reader-text:focus {
  background-color: #f7f7f7;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  -webkit-clip-path: none;
  clip-path: none;
  color: #007acc;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  right: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

.skip-link {
  left: -9999rem;
  top: 2.5rem;
  z-index: 999999999;
  text-decoration: underline;
}

.skip-link:focus {
  display: block;
  left: 6px;
  top: 7px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  line-height: normal;
  padding: 15px 23px 14px;
  z-index: 100000;
  right: auto;
}

.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active) {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

@font-face {
  font-family: "inkio-aspekta";
  src: url("fonts/Inkio_AspektaVF.woff2") format("woff2"), url("fonts/Inkio_AspektaVF.woff") format("woff");
}
*, ::before, ::after {
  box-sizing: border-box;
}

:focus-visible {
  outline: none;
}

:root {
  --blue: #1765f2;
  --orange: #fa3e02;
  --black: #151517;
  --real-black: #000;
  --dark-gray: #818181;
  --light-gray: #c1c1c1;
  --white: #f1f1f1;
  --white-semi: rgba(241,241,241,.5);
  --real-white: #fff;
  --font: "inkio-aspekta", sans-serif;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 550;
  --font-size: .65px;
  --radius: 4px;
  --radius-big: 20px;
}

html {
  scroll-padding-top: 78px;
  overscroll-behavior: none;
}

body {
  font-size: calc(var(--font-size) * 30);
  line-height: 1.33333;
  font-family: var(--font);
  font-weight: var(--font-regular);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  overflow-x: hidden;
  background-color: var(--black);
}

::selection {
  color: var(--black);
  background: var(--blue);
}

input, button, select, option, textarea {
  font-size: calc(var(--font-size) * 30);
  line-height: 1.33333;
  font-family: var(--font);
  font-weight: var(--font-regular);
  color: var(--black);
}
input::placeholder, button::placeholder, select::placeholder, option::placeholder, textarea::placeholder {
  opacity: 1;
  color: var(--black);
}

a {
  color: var(--white);
  text-decoration: none;
}

img {
  vertical-align: top;
  max-width: 100%;
}

.page-transition {
  touch-action: manipulation;
}

.ta-c {
  text-align: center;
}

.ta-r {
  text-align: right;
}

.container {
  padding: 0 25px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.container-narrow {
  max-width: 1530px;
  margin: 0 auto;
}

.row {
  margin: 0 -15px;
  display: flex;
  flex-wrap: wrap;
}

.col-1-8, .col-2-8, .col-3-8, .col-4-8, .col-5-8, .col-6-8, .col-7-8, .col-8-8 {
  padding: 0 15px;
}

.col-md-1-8, .col-md-2-8, .col-md-3-8, .col-md-4-8, .col-md-5-8, .col-md-6-8, .col-md-7-8, .col-md-8-8, .col-md-1-3, .col-md-2-3, .col-lg-1-8, .col-lg-2-8, .col-lg-3-8, .col-lg-4-8, .col-lg-5-8, .col-lg-6-8, .col-lg-7-8, .col-lg-8-8 {
  width: 100%;
  padding: 0 15px;
}

.col-1-8 {
  width: 12.5%;
}

.col-2-8 {
  width: 25%;
}

.col-3-8 {
  width: 37.5%;
}

.col-4-8 {
  width: 50%;
}

.col-5-8 {
  width: 62.5%;
}

.col-6-8 {
  width: 75%;
}

.col-7-8 {
  width: 87.5%;
}

.col-8-8 {
  width: 100%;
}

.offset-1-8 {
  margin-left: 12.5%;
}

.offset-2-8 {
  margin-left: 25%;
}

.offset-3-8 {
  margin-left: 37.5%;
}

.offset-4-8 {
  margin-left: 50%;
}

.offset-5-8 {
  margin-left: 62.5%;
}

.offset-6-8 {
  margin-left: 75%;
}

.offset-7-8 {
  margin-left: 87.5%;
}

.offset-8-8 {
  margin-left: 100%;
}

.cryptedmail {
  cursor: pointer;
  white-space: nowrap;
}

.rotating-text, .rotating-text-static, .rotating-text-on-load {
  position: relative;
  display: block;
  perspective: 400px;
}
.rotating-text .char, .rotating-text-static .char, .rotating-text-on-load .char {
  transform-origin: top;
}
.rotating-text .new, .rotating-text-static .new, .rotating-text-on-load .new {
  position: absolute !important;
  top: 0;
  width: 100%;
  left: 0;
}
.rotating-text .new .char, .rotating-text-static .new .char, .rotating-text-on-load .new .char {
  transform: rotateX(-90deg);
  opacity: 0;
  transform-origin: bottom;
}
.rotating-text.no-change .original, .rotating-text-static.no-change .original, .rotating-text-on-load.no-change .original {
  opacity: 0.09;
}

.rotating-text-on-load .new {
  position: static !important;
}
.rotating-text-on-load .new .char {
  opacity: 0;
}

.btn {
  display: inline-block;
  border-radius: var(--radius);
  padding: 9px 24px;
  line-height: 20px;
  background-color: var(--white);
  color: var(--black);
  text-transform: uppercase;
  font-size: calc(var(--font-size) * 18);
  border: 0;
  cursor: pointer;
  vertical-align: top;
  font-family: var(--font);
  font-weight: var(--font-regular);
}
.btn.btn-arrow {
  position: relative;
  padding: 9px 24px 9px 48px;
}
.btn.btn-arrow:after {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 9px;
  top: 9px;
  background-image: url("../img/icons/arrow-black.svg");
  content: "";
  display: block;
  transition: transform 0.3s;
}
.btn.btn-arrow:hover:after {
  transform: rotate(45deg);
}
.btn.btn-small {
  font-size: 0;
  padding: 9px 19px;
}
.btn.btn-black {
  background-color: var(--black);
  color: var(--white);
}
.btn.btn-black.btn-arrow:after {
  background-image: url("../img/icons/arrow.svg");
}
.btn.btn-send {
  position: relative;
  padding: 9px 24px 9px 48px;
}
.btn.btn-send:after {
  width: 30px;
  height: 20px;
  position: absolute;
  left: 9px;
  top: 9px;
  background-image: url("../img/icons/send.svg");
  background-position: center;
  content: "";
  display: block;
  transition: transform 0.3s;
}
.btn.btn-send:hover {
  background-color: var(--blue);
}
.btn.btn-expanding {
  padding: 9px 24px 9px 45px;
  transition: padding 0.3s;
}
.btn.btn-expanding .expandable {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.3s, opacity 0.3s;
  opacity: 1;
  vertical-align: top;
}
.btn.btn-expanding .expandable .char {
  opacity: 0;
}
.btn.btn-expanding.btn-send {
  position: relative;
  padding: 9px 24px 9px 54px;
  color: var(--blue);
}
.btn.btn-expanding.btn-send:hover {
  padding: 9px 24px 9px 54px;
  background-color: var(--black);
}
.btn.btn-expanding.btn-send:after {
  width: 35px;
  height: 20px;
  background-image: url("../img/icons/send-blue.svg");
}
.btn.btn-blue {
  color: var(--blue);
}
.btn.btn-blue.btn-arrow:after {
  background-image: url("../img/icons/arrow-blue.svg");
}
.btn.btn-condensed {
  font-size: calc(var(--font-size) * 13.5);
  padding: 6px 16px 6px 36px;
}
.btn.btn-condensed::after {
  width: 16px;
  height: 16px;
  left: 8px;
  top: 8px;
}

.input-holder {
  position: relative;
}
.input-holder::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid var(--white);
  opacity: 0.63;
}
.input-holder input, .input-holder textarea {
  width: 100%;
  line-height: 38px;
  border: 0;
  background-color: transparent;
  padding: 0;
  opacity: 0.63;
  color: var(--white);
}
.input-holder input + label, .input-holder textarea + label {
  width: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--white);
  transition: width 0.5s;
}
.input-holder input:not(:placeholder-shown), .input-holder textarea:not(:placeholder-shown) {
  opacity: 1 !important;
}
.input-holder input:focus + label, .input-holder textarea:focus + label {
  width: 100%;
  left: 0;
  right: auto;
}

.select {
  width: 100%;
  position: relative;
  cursor: pointer;
  background-color: var(--white);
  color: var(--black);
  border-radius: var(--radius);
  text-transform: uppercase;
  opacity: 0.63;
}
.select.opened {
  opacity: 1;
}
.select .select-trigger {
  position: relative;
  padding: 10px 15px;
  height: 38px;
  position: relative;
  z-index: 3;
}
.select .select-trigger::after {
  position: absolute;
  right: 14px;
  top: 11px;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("../img/icons/arrow-black.svg");
  transform: rotate(135deg);
}
.select .select-trigger input {
  border: 0;
  background-color: transparent;
  padding: 0;
  font-size: calc(var(--font-size) * 18);
  line-height: 18px;
  pointer-events: none;
  padding: 0;
  vertical-align: top;
  width: 100%;
  text-transform: uppercase;
}
.select .select-options {
  position: absolute;
  top: 0px;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  background-color: var(--white);
  padding-top: 38px;
}
.select .select-options .option {
  display: block;
  padding: 10px 15px;
  border-top: 1px solid var(--light-gray);
  height: 38px;
  width: 100%;
  font-size: calc(var(--font-size) * 18);
  line-height: 18px;
}
.select .select-options .option.selected, .select .select-options .option.selected:hover {
  background-color: var(--blue);
}
.select .select-options .option:hover {
  background-color: var(--light-gray);
}
.select .select-options .option.disabled {
  pointer-events: none;
  opacity: 0.36;
}
.select.opened .select-options {
  opacity: 1;
  pointer-events: auto;
}

.sticked-to-right {
  width: calc(100% + 25px);
  overflow: hidden;
}

@media (min-width: 800px) {
  .container {
    padding: 0 55px;
  }
  .col-md-1-8 {
    width: 12.5%;
  }
  .col-md-2-8 {
    width: 25%;
  }
  .col-md-3-8 {
    width: 37.5%;
  }
  .col-md-4-8 {
    width: 50%;
  }
  .col-md-5-8 {
    width: 62.5%;
  }
  .col-md-6-8 {
    width: 75%;
  }
  .col-md-7-8 {
    width: 87.5%;
  }
  .col-md-8-8 {
    width: 100%;
  }
  .col-md-1-3 {
    width: 33.33333%;
  }
  .col-md-2-3 {
    width: 66.66666%;
  }
  .offset-md-1-8 {
    margin-left: 12.5%;
  }
  .offset-md-2-8 {
    margin-left: 25%;
  }
  .offset-md-3-8 {
    margin-left: 37.5%;
  }
  .offset-md-4-8 {
    margin-left: 50%;
  }
  .offset-md-5-8 {
    margin-left: 62.5%;
  }
  .offset-md-6-8 {
    margin-left: 75%;
  }
  .offset-md-7-8 {
    margin-left: 87.5%;
  }
  .sticked-to-right {
    width: calc(100% + 55px);
  }
  .btn.btn-expanding {
    padding: 9px 19px;
  }
  .btn.btn-expanding:not(:hover) .expandable {
    width: 0px !important;
    opacity: 0;
  }
  .btn.btn-expanding:hover {
    padding: 9px 24px 9px 45px;
  }
  .btn.btn-expanding.btn-send {
    padding: 9px 26px 9px 26px;
  }
  .btn.btn-expanding-js .char {
    opacity: 1;
  }
}
@media (min-width: 1200px) {
  .col-lg-1-8 {
    width: 12.5%;
  }
  .col-lg-2-8 {
    width: 25%;
  }
  .col-lg-3-8 {
    width: 37.5%;
  }
  .col-lg-4-8 {
    width: 50%;
  }
  .col-lg-5-8 {
    width: 62.5%;
  }
  .col-lg-6-8 {
    width: 75%;
  }
  .col-lg-7-8 {
    width: 87.5%;
  }
  .col-lg-8-8 {
    width: 100%;
  }
  .offset-lg-0-8 {
    margin-left: 0;
  }
  .offset-lg-1-8 {
    margin-left: 12.5%;
  }
  .offset-lg-2-8 {
    margin-left: 25%;
  }
  .offset-lg-3-8 {
    margin-left: 37.5%;
  }
  .offset-lg-4-8 {
    margin-left: 50%;
  }
  .offset-lg-5-8 {
    margin-left: 22.5%;
  }
  .offset-lg-6-8 {
    margin-left: 75%;
  }
  .offset-lg-7-8 {
    margin-left: 87.5%;
  }
  .ta-lg-c {
    text-align: center;
  }
  .ta-lg-r {
    text-align: right;
  }
  .ta-lg-l {
    text-align: left;
  }
}
/* Header ~ Footer */
#header {
  padding: 20px 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 78px;
  z-index: 100;
  transition: top 0.5s, background 0.5s;
}
#header .main-title {
  position: relative;
}
#header .main-title .logo {
  position: absolute;
  width: 90px;
  display: flex;
  align-items: end;
  opacity: 0;
  transition: opacity 0.3s;
}
#header .main-title .logo svg {
  fill: var(--white);
  vertical-align: top;
  width: 100%;
}
#header .main-title .title {
  line-height: 28px;
  position: absolute;
  top: 0px;
  margin: 5px 0 5px;
  transition: top 0.5s cubic-bezier(0, 0.5, 0.2, 1) 0.1s;
  font-size: calc(var(--font-size) * 18);
  font-weight: var(--font-medium);
}
#header .main-menu {
  border-radius: var(--radius);
  background-color: var(--white);
  display: inline-block;
  text-align: center;
  vertical-align: top;
  overflow: hidden;
}
#header .main-menu .content {
  transition: height 0.5s;
  overflow: hidden;
}
#header .main-menu ul {
  width: auto;
}
#header .main-menu li {
  width: auto;
}
#header .main-menu a {
  text-transform: uppercase;
  font-size: calc(var(--font-size) * 18);
  color: var(--black);
  display: inline-block;
  padding: 10px 15px;
  border-radius: var(--radius);
  line-height: 18px;
  position: relative;
  width: 100%;
  white-space: nowrap;
  cursor: pointer;
  font-weight: var(--font-medium);
}
#header .main-menu a span {
  position: relative;
}
#header .main-menu a::before {
  content: "";
  background-color: var(--blue);
  width: 0%;
  height: 0%;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  filter: blur(5px);
  transition: width 2s, height 2s, left 2s, top 2s, opacity 2s;
}
#header .main-menu a:hover::before {
  width: 120%;
  height: 140%;
  left: -10%;
  top: -20%;
  opacity: 1;
  transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s, opacity 0.5s;
}
#header .main-menu .header {
  display: flex;
}
#header .main-menu .header a {
  background-color: var(--light-gray);
  width: auto;
  flex-grow: 1;
  overflow: hidden;
  vertical-align: top;
}
#header #menu-button {
  padding: 0;
  border: 0;
  height: 38px;
  width: 38px;
  position: relative;
  vertical-align: top;
  display: block;
  float: left;
  cursor: pointer;
  background-color: transparent;
}
#header #menu-button span {
  width: 40%;
  height: 1px;
  background-color: var(--black);
  position: absolute;
  left: 30%;
  top: calc(50% - 1px);
  transition: opacity 0.5s, transform 0.5s;
}
#header #menu-button span:first-child {
  margin-top: -5px;
}
#header #menu-button span:last-child {
  margin-top: 5px;
}
#header .page-switcher {
  display: none;
}
#header .main-menu .page-switcher {
  display: block;
}
#header .main-menu .page-switcher.page-transition-orange {
  background-color: var(--orange);
  color: var(--white);
}
#header .main-menu .page-switcher.page-transition-blue {
  background-color: var(--blue);
  color: var(--black);
}
#header .main-menu .page-switcher::before {
  display: none;
}

body:not(.menu-opened) #header .main-menu .content {
  height: 0px !important;
}

body.menu-opened #header #menu-button span:nth-child(1) {
  transform: translate(0px, 5px) rotate(45deg);
}
body.menu-opened #header #menu-button span:nth-child(2) {
  opacity: 0;
}
body.menu-opened #header #menu-button span:nth-child(3) {
  transform: translate(0px, -5px) rotate(-45deg);
}

body.footer-showing #header {
  top: -80px;
}

body:not(.logo-showing) #header .main-title .title {
  top: -60px;
}

body:not(.website-loaded) #header .main-title .title {
  top: -60px;
}

body.website-loaded #header {
  background-color: var(--black);
}
body.website-loaded #header .main-title .logo {
  opacity: 1;
}

body.intro-showing #header {
  background-color: transparent;
}

#footer {
  padding: 40px 0 20px;
  color: var(--black);
  position: relative;
  z-index: 1;
  background-color: var(--blue);
  overflow: hidden;
}
#footer a {
  color: var(--black);
}
#footer .newsletter {
  margin-bottom: 100px;
}
#footer .newsletter .newsletter-form {
  display: flex;
  margin-top: 10px;
}
#footer .newsletter .newsletter-form .input-holder {
  margin-right: 10px;
}
#footer .newsletter .newsletter-form .input-holder::after {
  border-bottom: 1px solid var(--black);
  opacity: 0.27;
}
#footer .newsletter .newsletter-form .input-holder input {
  opacity: 0.27;
  color: var(--black);
}
#footer .newsletter .newsletter-form .input-holder input + label {
  background-color: var(--black);
}
#footer .footer-menu {
  margin: 40px 0;
}
#footer .footer-menu a {
  display: inline-block;
  cursor: pointer;
}
#footer .page-switcher {
  margin: 40px 0;
  position: relative;
  display: block;
}
#footer .page-switcher .image-holder {
  border-radius: var(--radius);
  overflow: hidden;
  margin-left: 100px;
  height: 200px;
  opacity: 0.36;
  transition: opacity 0.3s, border-radius 0.3s;
}
#footer .page-switcher .image-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#footer .page-switcher .button-holder {
  position: absolute !important;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex !important;
  align-items: center;
}
#footer .page-switcher:hover .image-holder {
  opacity: 1;
  border-radius: var(--radius-big);
}
#footer .page-switcher:hover .btn {
  padding: 9px 24px 9px 45px;
}
#footer .page-switcher:hover .btn .expandable {
  width: 77px !important;
  opacity: 1;
}
#footer .page-switcher:hover .btn.btn-arrow::after {
  transform: rotate(45deg);
}
#footer .menu-socials {
  margin: 80px 0 40px;
  display: flex;
  flex-wrap: wrap;
}
#footer .menu-socials a {
  margin-right: 40px;
}
#footer .copyright {
  font-size: calc(var(--font-size) * 18);
  font-weight: var(--font-medium);
}
#footer .copyright a {
  display: inline-block;
  position: relative;
}
#footer .copyright a::after {
  position: absolute;
  content: "";
  bottom: 0;
  right: 0;
  width: 0%;
  height: 1px;
  background: var(--black);
  transition: width 0.3s;
}
#footer .copyright a:hover::after {
  width: 100%;
  left: 0;
  right: auto;
}
#footer .copyright .row {
  flex-direction: column-reverse;
}
#footer .copyright .copyright-menu {
  margin-bottom: 20px;
}
#footer .copyright .copyright-menu a {
  display: inline-block;
}
#footer .copyright .copyright-menu a:not(:last-child) {
  margin-right: 20px;
}
#footer .copyright .author {
  float: right;
}
#footer .big-logo svg {
  fill: var(--black);
}
#footer .footer-logo-mobile {
  display: none;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10000;
  pointer-events: none;
  font-size: calc(var(--font-size) * 16);
}
.popup .overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(129, 129, 129, 0.63);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s 1.8s;
}
.popup .wrapper {
  pointer-events: auto;
  color: var(--white);
  position: relative;
  height: 100%;
  overflow-y: auto;
  padding: 20px 0;
  top: 120vh;
  margin-top: 20px;
  margin-left: 25px;
  border-radius: var(--radius-big) var(--radius-big) 0 0;
  width: calc(100% - 50px);
  transition: top 0.5s cubic-bezier(0.51, 0.01, 0.99, 0.45) 1.2s, margin 1.2s 0s, width 1.2s 0s, border-radius 1.2s 0s;
  background-color: var(--black);
}
.popup .wrapper .close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: url("../img/icons/cross.svg");
  border: 0;
  font-size: 0;
  cursor: pointer;
  transition: transform 0.3s;
  z-index: 2;
}
.popup .wrapper .close:hover {
  transform: rotate(90deg);
}
.popup .wrapper .holder {
  position: relative;
  z-index: 1;
}
.popup .wrapper .header .main-title {
  font-size: calc(var(--font-size) * 54);
  line-height: 40px;
}
.popup .wrapper .content .top {
  padding: 100px 0 0;
  border-bottom: 1px solid var(--light-gray);
}
.popup .wrapper .content .top .info {
  margin-bottom: 0.5em;
}
.popup .wrapper .content .top .info .position {
  color: var(--light-gray);
}
.popup .wrapper .content .top .contacts {
  margin-bottom: 2em;
}
.popup .wrapper .content .top .contacts .run-to-left {
  display: none;
}
.popup .wrapper .content .top .contacts a {
  display: block;
}
.popup .wrapper .content .bottom {
  padding: 2em 0 0;
}
.popup .wrapper .content .bottom .map-button {
  margin-bottom: 2em;
}
.popup .wrapper .content .bottom .map-button .btn {
  background-color: var(--white);
  color: var(--black);
}
.popup .wrapper .content .bottom .title {
  margin-bottom: 0.5em;
}
.popup .wrapper .content .bottom .title .subtitle {
  display: block;
  color: var(--light-gray);
}
.popup .wrapper .content .bottom p {
  margin-bottom: 1em;
}
.popup .wrapper .content .bottom p span {
  display: inline-block;
  width: 40px;
}
.popup .wrapper .content .bottom p small {
  display: inline-block;
  margin-bottom: 2em;
}

#lightbox-aside .holder {
  height: 100%;
  width: 100%;
}
#lightbox-aside .gallery {
  height: 100%;
  width: 100%;
  padding: 80px 0;
  overflow: hidden;
}
#lightbox-aside .gallery .slides {
  width: 100%;
  height: 100%;
  display: flex;
  transition: opacity 0.5s;
}
#lightbox-aside .gallery .slides .slide {
  margin: auto;
  height: 100%;
  display: flex;
}
#lightbox-aside .gallery .slides .slide img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
#lightbox-aside .gallery .slides .slide:not(.active) {
  display: none;
}
#lightbox-aside .gallery .cursors {
  margin: 0;
  font-size: calc(var(--font-size) * 24);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}
#lightbox-aside .gallery .cursors .gallery-cursor-area {
  height: 100%;
  position: relative;
  width: 100%;
}
#lightbox-aside .gallery .cursors .gallery-cursor {
  background: radial-gradient(circle, var(--blue) 50%, rgba(0, 0, 0, 0) 70%);
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: calc(var(--font-size) * 18);
  text-align: center;
  color: var(--black);
  position: absolute;
  top: calc(50% - 12px);
  left: 0px;
  z-index: 10;
  padding: 0;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  font-size: 0;
}
#lightbox-aside .gallery .cursors .gallery-cursor::after {
  content: "";
  position: absolute;
  top: 30%;
  left: 30%;
  width: 40%;
  height: 40%;
  background-image: url("../img/icons/arrow-black.svg");
  transform: rotate(225deg);
}
#lightbox-aside .gallery .cursors .gallery-cursor:hover, #lightbox-aside .gallery .cursors .gallery-cursor:active {
  transform: scale(0.9);
}
#lightbox-aside .gallery .cursors .gallery-cursor-area.right .gallery-cursor {
  left: auto;
  right: 0;
}
#lightbox-aside .gallery .cursors .gallery-cursor-area.right .gallery-cursor::after {
  transform: rotate(45deg);
}
#lightbox-aside .gallery.changing .slides {
  opacity: 0;
}

#lightbox-aside-easy {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
#lightbox-aside-easy .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.81);
}
#lightbox-aside-easy .wrapper {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#lightbox-aside-easy .holder {
  max-height: 80%;
  max-width: 80%;
  background-color: red;
  margin: auto;
  z-index: 2;
}

body.lightbox-opened #lightbox-aside-easy {
  opacity: 1;
  pointer-events: auto;
}

body.contact-opened #contact-aside .overlay, body.gallery-opened #lightbox-aside .overlay {
  opacity: 1;
  transition-delay: 0s;
}
body.contact-opened #contact-aside .wrapper, body.gallery-opened #lightbox-aside .wrapper {
  top: 0;
  margin-top: 0;
  margin-left: 0;
  width: 100%;
  border-radius: 0;
  transition: top 1.2s cubic-bezier(0.13, 0.7, 0.26, 1) 0.9s, margin 1.2s ease-in-out 2.3s, width 1.2s ease-in-out 2.3s, border-radius 1.2s ease-in-out 2.3s;
}

.logo-slideshow {
  position: relative;
}
.logo-slideshow img:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.logo-slideshow img {
  opacity: 0;
  transition: opacity 0.8s;
  pointer-events: none;
  max-width: 420px;
}
.logo-slideshow img.visible {
  opacity: 1;
  pointer-events: auto;
}

.label-cursor-area {
  position: relative;
  cursor: none !important;
}
.label-cursor-area .label-cursor {
  position: absolute;
  background-color: var(--orange);
  border-radius: var(--radius);
  padding: 6px 16px;
  font-size: calc(var(--font-size) * 16);
  color: var(--real-white);
  text-transform: uppercase;
  pointer-events: none;
  margin: -16px 0 0 -40px;
  min-width: 80px;
  text-align: center;
  transition: opacity 0.3s 0s;
  opacity: 0;
  white-space: nowrap;
}
.label-cursor-area:hover .label-cursor {
  opacity: 1;
}
.label-cursor-area:hover .label-cursor.hidden {
  opacity: 0;
}

@media (min-width: 800px) {
  #header .main-title .title {
    font-size: calc(var(--font-size) * 30);
  }
  #footer {
    padding: 55px 0 20px;
  }
  #footer .left-side {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  #footer .left-side .newsletter {
    margin-bottom: auto;
  }
  #footer .left-side .big-logo-holder {
    margin-top: 20px;
  }
  #footer .footer-menu {
    margin: 0 0 40px;
  }
  #footer .menu-socials {
    margin: 80px 0 0;
  }
  #footer .copyright {
    margin-top: 40px;
  }
  #footer .copyright .row {
    flex-direction: row;
  }
  #footer .copyright .author {
    float: none;
    margin-left: 40px;
  }
  #footer .copyright .copyright-menu {
    margin: 0;
  }
  #footer .copyright .copyright-menu a:not(:last-child) {
    margin-right: 40px;
  }
  .popup {
    font-size: calc(var(--font-size) * 30);
  }
  .popup .wrapper {
    padding: 40px 0;
    width: calc(100% - 110px);
    margin-left: 55px;
    margin-top: 55px;
  }
  .popup .wrapper .close {
    right: 55px;
    top: 45px;
  }
  .popup .wrapper .holder {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .popup .wrapper .holder .header {
    margin-bottom: 20px;
  }
  .popup .wrapper .holder .content {
    margin: auto 0 0;
  }
  .popup .wrapper .holder .content .bottom p small {
    margin-bottom: 0;
  }
}
@media (min-width: 1200px) {
  #header .page-switcher {
    display: inline-block;
    margin-left: 5px;
    background-color: transparent;
    padding: 9px 15px;
    line-height: 18px;
    transition: color 0.3s, background 0.3s;
  }
  #header .page-switcher.page-transition-orange {
    border: 1px solid var(--white);
    color: var(--white);
  }
  #header .page-switcher.page-transition-orange:hover {
    background-color: var(--orange);
    border-color: var(--orange);
  }
  #header .page-switcher.page-transition-blue {
    border: 1px solid var(--black);
    color: var(--black);
  }
  #header .page-switcher.page-transition-blue:hover {
    background-color: var(--blue);
    border-color: var(--blue);
  }
  #header .main-menu .header {
    float: right;
    display: inline-block;
  }
  #header .main-menu .header #menu-button {
    width: 0px;
    position: relative;
    z-index: 1;
    transition: width 0.3s 0.2s;
    overflow: hidden;
  }
  #header .main-menu .content {
    transition: width 1s;
    height: auto !important;
  }
  #header .main-menu .content ul {
    white-space: nowrap;
    width: fit-content;
    display: flex;
  }
  #header .main-menu .page-switcher {
    display: none !important;
  }
  body:not(.menu-opened) #header .main-menu .content {
    height: auto !important;
  }
  body:not(.intro-showing):not(.menu-opened) #header .main-menu .content {
    width: 0px !important;
  }
  body:not(.intro-showing):not(.menu-opened) #header .main-menu #menu-button {
    width: 38px;
  }
  body:not(.website-loaded) #header .main-menu .content {
    width: 0px !important;
  }
  body:not(.website-loaded) #header .main-menu #menu-button {
    width: 38px;
  }
  #footer .left-side .newsletter .newsletter-title {
    font-size: calc(var(--font-size) * 54);
    line-height: 1.1;
    max-width: 540px;
  }
  #footer .left-side .newsletter .newsletter-form {
    margin-top: 20px;
  }
  #footer .left-side .newsletter .newsletter-form .input-holder {
    width: 70%;
  }
  #footer .left-side .newsletter .newsletter-form .input-holder input {
    font-size: calc(var(--font-size) * 54);
    height: 38px;
  }
  #footer .left-side .big-logo-holder {
    margin-top: 100px;
  }
  #footer .footer-menu {
    font-size: calc(var(--font-size) * 54);
    margin-bottom: 60px;
  }
  #footer .page-switcher {
    width: 360px;
  }
  #footer .menu-socials {
    margin-top: 100px;
  }
  .popup .wrapper .header .main-title {
    font-size: calc(var(--font-size) * 99);
    line-height: 1em;
  }
  .popup .wrapper .holder {
    width: calc(100% - 400px);
    margin: 0 auto;
  }
  .popup .wrapper .content .top .info {
    margin-bottom: 1em;
  }
  .popup .wrapper .content .top .contacts {
    position: relative;
  }
  .popup .wrapper .content .top .contacts .run-to-left {
    display: block;
    position: absolute;
    left: -200px;
    top: 0;
  }
  .popup .wrapper .content .bottom {
    position: relative;
    padding-top: 0;
    margin-top: 2em;
  }
  .popup .wrapper .content .bottom .map-button {
    position: absolute;
    left: -200px;
    top: 5px;
  }
  .popup .wrapper .content .bottom .title {
    margin-bottom: 1em;
  }
  .end-section {
    background-color: var(--blue);
    padding: 0 55px;
  }
  .end-section .end-section-inner {
    padding: 40px 0;
    min-height: 100vh;
    margin: 0 -55px;
    background-color: var(--black);
  }
  #lightbox-aside .gallery {
    position: relative;
  }
  #lightbox-aside .cursors {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
  }
  #lightbox-aside .cursors .gallery-cursor-area {
    height: calc(100% - 200px);
    width: 45%;
    margin: 100px 5% 100px 0%;
    position: relative;
    display: inline-block;
  }
  #lightbox-aside .cursors .gallery-cursor-area .gallery-cursor {
    display: block;
    width: 160px;
    height: 160px;
    line-height: 30px;
    padding: 65px 0;
    font-size: calc(var(--font-size) * 36);
    text-align: center;
    color: var(--black);
    position: absolute;
    z-index: 100;
    border-radius: 50%;
    pointer-events: none;
    margin-left: -80px;
    margin-top: -100px;
    white-space: nowrap;
    transition: transform 0.8s, opacity 0.8s;
    transform: scale(0.1);
    z-index: 3;
    opacity: 0;
  }
  #lightbox-aside .cursors .gallery-cursor-area .gallery-cursor::before {
    display: block;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, var(--blue) 50%, rgba(0, 0, 0, 0) 70%);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-name: wiggle;
  }
  #lightbox-aside .cursors .gallery-cursor-area .gallery-cursor::after {
    display: none;
  }
  #lightbox-aside .cursors .gallery-cursor-area .gallery-cursor .inner {
    position: relative;
  }
  #lightbox-aside .cursors .gallery-cursor-area.right {
    margin: 100px 0% 100px 5%;
  }
  #lightbox-aside .cursors .gallery-cursor-area:hover .gallery-cursor {
    opacity: 1;
    transform: scale(1);
  }
}
/* Homepage */
main.homepage {
  position: relative;
  z-index: 2;
}
main.homepage .hero {
  font-size: calc(var(--font-size) * 54);
  line-height: 1em;
}
main.homepage section.intro {
  padding: 20px 0;
  height: 100vh;
}
main.homepage section.intro .image-positions {
  position: sticky;
  top: 20px;
  width: 100%;
  margin-bottom: -50vh;
}
main.homepage section.intro .image-positions .image-position-holder {
  position: relative;
}
main.homepage section.intro .image-positions .image-position {
  position: absolute;
  padding-top: 30vh;
  width: 100%;
}
main.homepage section.intro .image-positions .image-position .image-holder {
  border-radius: var(--radius-big);
  overflow: hidden;
  width: 0%;
  height: 100%;
  transition: width 0.5s;
  position: absolute;
  left: 0;
  top: 0;
}
main.homepage section.intro .image-positions .image-position .image-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.2) translate(10%);
  transition: transform 1.5s 1s;
  max-width: none;
}
main.homepage section.intro .image-positions .image-position.visible .image-holder {
  width: 100%;
  right: 0;
  left: auto;
}
main.homepage section.intro .image-positions .image-position.visible .image-holder img {
  transform: scale(1.2) translate(0);
  transition-delay: 0s;
}
main.homepage section.intro .image-positions .image-position-01 {
  top: 10vh;
}
main.homepage section.intro .image-positions .image-position-02 {
  top: 40vh;
}
main.homepage section.intro .image-positions .image-position-03 {
  top: 30vh;
}
main.homepage section.intro .image-positions .image-position-04 {
  top: 10vh;
}
main.homepage section.intro .image-positions .image-position-05 {
  top: 40vh;
}
main.homepage section.intro .image-positions .image-position-06 {
  top: 20vh;
}
main.homepage section.about {
  min-height: 100vh;
  display: flex;
  align-items: center;
  margin-bottom: 20vh;
}
main.homepage section.about .container {
  width: 100%;
}
main.homepage section.showcase .hero {
  height: 100vh;
  position: sticky;
  top: 78px;
  padding: 15px 0;
}
main.homepage section.showcase .left-side {
  padding: 0 15px;
}
main.homepage section.showcase .right-side {
  display: none;
}
main.homepage section.showcase .showcase-images {
  position: sticky;
  top: 78px;
}
main.homepage section.showcase .showcase-images .image-holder {
  height: calc(100vh - 108px);
  overflow: hidden;
  border-radius: var(--radius-big) 0 0 var(--radius-big);
}
main.homepage section.showcase .showcase-images .image-holder .image {
  height: 100%;
  width: 100%;
  border-radius: var(--radius-big) 0 0 var(--radius-big);
  overflow: hidden;
}
main.homepage section.showcase .showcase-images .image-holder .image:not(:first-child) {
  position: absolute;
  left: 100%;
  top: 0;
}
main.homepage section.showcase .showcase-images .image-holder img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: left center;
  transform: scale(1.2);
}
main.homepage section.showcase .card {
  color: var(--white);
  position: relative;
}
main.homepage section.showcase .card .card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
main.homepage section.showcase .card .page {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  transition: opacity 0.8s 0s;
  margin-bottom: 150px;
  overflow: hidden;
}
main.homepage section.showcase .card .page .image {
  margin: 60px 0 0;
  border-radius: var(--radius-big);
  height: 240px;
  order: -1;
}
main.homepage section.showcase .card .page:last-of-type {
  padding-bottom: 0;
}
main.homepage section.showcase .card .page:last-of-type .image {
  margin-bottom: 0;
}
main.homepage section.showcase .card .title {
  font-size: calc(var(--font-size) * 63);
  line-height: 1em;
  margin: 30px 0 60px;
}
main.homepage section.showcase .card .button-holder {
  margin-bottom: 60px;
  display: flex;
}
main.homepage section.showcase .card .button-holder:after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--white);
  display: inline-block;
  margin: 18px 0px 0px 20px;
}
main.homepage section.showcase .card .text {
  font-size: calc(var(--font-size) * 21);
  margin-bottom: auto;
}
main.homepage section.showcase .card .image {
  margin: 60px 0 20px;
  border-radius: var(--radius-big);
  overflow: hidden;
}
main.homepage section.showcase .card .image img {
  object-fit: cover;
  object-position: center;
  height: 100%;
  width: 100%;
}
main.homepage section.showcase .card .menu {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  position: sticky;
  bottom: 20px;
  background-color: var(--white);
  z-index: 1;
  padding: 20px 0;
  border-radius: var(--radius-big);
}
main.homepage section.showcase .card .menu .menu-item {
  flex-grow: 1;
  font-size: calc(var(--font-size) * 14);
  text-transform: uppercase;
  background-color: transparent;
  padding: 5px;
  border: 0;
  cursor: pointer;
  color: var(--dark-gray);
  font-weight: var(--font-medium);
}
main.homepage section.clients {
  padding-top: 50vh;
}
main.homepage section.clients .logos {
  margin: 40px 20px;
}
main.homepage section.references {
  padding-top: 30vh;
  padding-bottom: 50vh;
  overflow: hidden;
}
main.homepage section.references .hero {
  padding-bottom: 10vh;
}
main.homepage section.references .card {
  background-color: var(--white);
  color: var(--black);
  padding: 20px;
  border-radius: var(--radius-big);
  text-align: center;
}
main.homepage section.references .card .number {
  font-size: calc(var(--font-size) * 63);
  line-height: 1em;
}
main.homepage section.references .card .text {
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  line-height: 1.1;
}
main.homepage section.references .card .footer .countdown {
  width: 100%;
  height: 2px;
  background-color: var(--light-gray);
  position: relative;
  margin: 0 0 15px;
  opacity: 0;
  transition: opacity 1s;
}
main.homepage section.references .card .footer .countdown::after {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: var(--black);
  content: "";
  display: block;
  transition: width 19s linear;
}
main.homepage section.references .card .footer .bottom {
  display: flex;
  width: calc(100% + 30px);
  text-align: left;
}
main.homepage section.references .card .footer .number {
  font-size: calc(var(--font-size) * 30);
  vertical-align: top;
  line-height: 1.33333;
  display: inline-block;
  margin-right: 20px;
  float: left;
  width: 20px;
}
main.homepage section.references .card .footer .name {
  display: inline-block;
  width: calc(100% - 40px);
}
main.homepage section.references .card .tags {
  margin-top: 15px;
  max-width: 250px;
  text-align: left;
  padding-left: 35px;
}
main.homepage section.references .card .tag {
  font-size: calc(var(--font-size) * 18);
  border-radius: var(--radius);
  background-color: var(--black);
  color: var(--white);
  display: inline-block;
  margin-left: 5px;
  margin-top: 8px;
  padding: 5px 15px;
  vertical-align: top;
  white-space: nowrap;
}
main.homepage section.references .references-carousel {
  position: relative;
  padding: 140px 0 0;
}
main.homepage section.references .references-carousel .reference {
  position: absolute;
  top: 140px;
  left: 0;
  filter: blur(0px);
  transition: transform 1s, opacity 1s, filter 1s;
  transform-origin: center top;
  width: 100%;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.27);
  opacity: 0;
  pointer-events: none;
}
main.homepage section.references .references-carousel .navigation {
  background: radial-gradient(circle, var(--blue) 50%, rgba(0, 0, 0, 0) 70%);
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: calc(var(--font-size) * 18);
  text-align: center;
  color: var(--black);
  position: absolute;
  top: 340px;
  left: -20px;
  z-index: 10;
  padding: 0;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  font-size: 0;
}
main.homepage section.references .references-carousel .navigation::after {
  content: "";
  position: absolute;
  top: 30%;
  left: 30%;
  width: 40%;
  height: 40%;
  background-image: url("../img/icons/arrow-black.svg");
  transform: rotate(225deg);
}
main.homepage section.references .references-carousel .navigation:hover, main.homepage section.references .references-carousel .navigation:active {
  transform: scale(0.9);
}
main.homepage section.references .references-carousel .navigation.next {
  left: auto;
  right: -20px;
}
main.homepage section.references .references-carousel .navigation.next::after {
  transform: rotate(45deg);
}
main.homepage section.references .references-carousel.text-fit-ready .reference[data-order="0"] {
  transform: translateY(-130px) scale(0.01);
  filter: blur(70px);
  z-index: 0;
}
main.homepage section.references .references-carousel.text-fit-ready .reference[data-order="1"] {
  transform: translateY(-120px) scale(0.1);
  filter: blur(25px);
  z-index: 1;
  opacity: 1;
}
main.homepage section.references .references-carousel.text-fit-ready .reference[data-order="2"] {
  transform: translateY(-100px) scale(0.4);
  filter: blur(10px);
  opacity: 1;
  z-index: 2;
}
main.homepage section.references .references-carousel.text-fit-ready .reference[data-order="3"] {
  transform: translateY(-60px) scale(0.8);
  filter: blur(5px);
  opacity: 1;
  z-index: 3;
}
main.homepage section.references .references-carousel.text-fit-ready .reference[data-order="4"] {
  position: relative;
  top: 0;
  opacity: 1;
  pointer-events: auto;
  z-index: 4;
}
main.homepage section.references .references-carousel.text-fit-ready .reference[data-order="4"] .footer .countdown {
  opacity: 1;
}
main.homepage section.references .references-carousel.text-fit-ready .reference[data-order="5"] {
  transform: translateY(60px) scale(1.5);
  filter: blur(15px);
  z-index: 5;
}
main.homepage section.references .references-carousel.moving .card .footer .countdown::after {
  width: 0;
  transition-duration: 0s;
}
main.homepage section.references #references-cursor {
  display: none;
}

body:not(.intro-half-showing) main.homepage section.intro .image-positions .image-position .image-holder {
  width: 0 !important;
  left: 0;
  right: auto;
}

section.contact .carousel-contact {
  margin: 120px 0 40px;
  border-radius: var(--radius-big);
  overflow: hidden;
  height: 240px;
  position: relative;
}
section.contact .carousel-contact .carousel-slider {
  height: 100%;
  position: relative;
}
section.contact .carousel-contact .carousel-cell {
  height: 100%;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: width 0s 1s;
  overflow: hidden;
}
section.contact .carousel-contact .carousel-cell img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-width: none;
  transition: transform 0s ease-out 5s;
}
section.contact .carousel-contact .carousel-cell.active {
  width: 100%;
  left: auto;
  right: 0;
  transition-delay: 0s;
  transition-duration: 1s;
  z-index: 2;
}
section.contact .carousel-contact .carousel-cell.active img {
  transform: scale(1.1) translateX(-3%);
  transition-duration: 2s;
  transition-delay: 0s;
}
section.contact .carousel-contact .countdowns {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  padding: 10px 20px;
  z-index: 3;
}
section.contact .carousel-contact .countdowns li {
  padding: 10px;
  flex-grow: 1;
}
section.contact .carousel-contact .countdowns li button {
  width: 100%;
  padding: 10px 0;
  border: 0;
  background: transparent;
  position: relative;
  cursor: pointer;
}
section.contact .carousel-contact .countdowns li button::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--white);
  opacity: 0.45;
  position: absolute;
  top: 9px;
  left: 0;
}
section.contact .carousel-contact .countdowns li button::after {
  content: "";
  display: block;
  width: 0%;
  height: 2px;
  background-color: var(--white);
  position: absolute;
  top: 9px;
  left: 0;
  transition: none;
}
section.contact .carousel-contact .countdowns li button.active::after {
  width: 100%;
  transition: width 6s linear;
}
section.contact .carousel-contact .countdowns li button.before::after {
  width: 100%;
}
section.contact .carousel-contact .countdowns li button.next::after {
  width: 0%;
}
section.contact .right-side .contact-form, section.contact .right-side .phone {
  background-color: var(--real-black);
  padding: 20px 40px 20px 20px;
  border-radius: var(--radius-big) 0 0 var(--radius-big);
}
section.contact .right-side .contact-form {
  margin-bottom: 20px;
}
section.contact .right-side .contact-form .input-holder {
  margin-bottom: 15px;
}
section.contact .right-side .contact-form .input-holder input, section.contact .right-side .contact-form .input-holder textarea {
  width: 100%;
}
section.contact .right-side .contact-form .input-holder input::placeholder, section.contact .right-side .contact-form .input-holder textarea::placeholder {
  color: var(--white);
}
section.contact .right-side .contact-form .input-holder textarea {
  height: 240px;
}
section.contact .right-side .contact-form .form-bottom {
  margin-top: 20px;
}
section.contact .right-side .checkbox-holder input {
  position: absolute;
  left: -9999px;
}
section.contact .right-side .checkbox-holder input + label {
  position: relative;
  padding: 3px 0 3px 36px;
  display: inline-block;
  font-size: calc(var(--font-size) * 18);
  max-width: 200px;
}
section.contact .right-side .checkbox-holder input + label::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 7px;
  height: 24px;
  width: 24px;
  border: 1px solid var(--white);
  border-radius: var(--radius);
}
section.contact .right-side .checkbox-holder input + label::after {
  content: "";
  display: block;
  position: absolute;
  left: 12px;
  top: 19px;
  height: 0px;
  width: 0px;
  background-color: var(--white);
  border-radius: 1px;
  transition: width 0.3s, height 0.3s, left 0.3s, top 0.3s;
}
section.contact .right-side .checkbox-holder input:checked + label::after {
  width: 8px;
  height: 8px;
  left: 8px;
  top: 15px;
}
section.contact .right-side .select-holder {
  margin-bottom: 15px;
}
section.contact .right-side .phone {
  margin-bottom: 50px;
}
section.contact .right-side .phone .title-phone {
  color: var(--light-gray);
}
section.contact .right-side .phone .link-phone {
  font-size: calc(var(--font-size) * 54);
  line-height: 1;
  margin-top: 10px;
  display: inline-block;
  white-space: nowrap;
}
section.contact .right-side .phone .link-phone:hover {
  color: var(--blue);
}

#reveal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--black);
  z-index: 1000;
  display: flex;
}
#reveal .reveal-content {
  margin: auto;
  opacity: 0;
  color: var(--white);
}
#reveal.hidden {
  display: none;
}

#transition-start-holder {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1000000;
}

#transition-start {
  background: radial-gradient(circle, var(--blue) 50%, rgba(0, 0, 0, 0) 70%);
  position: absolute;
  width: 10vw;
  height: 10vw;
  margin: -5vw;
  opacity: 0;
  transform: scale(0.1);
  transition: transform 1s, opacity 0.3s;
}
#transition-start.orange {
  background: radial-gradient(circle, var(--orange) 50%, rgba(0, 0, 0, 0) 70%);
}
#transition-start.visible {
  transform: scale(50);
  opacity: 1;
}

#transition-end {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  width: 100%;
  height: 100%;
}
#transition-end .inside {
  display: inline-block;
  width: 20vh;
  height: 20vh;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -10vh;
  border-radius: 50%;
  opacity: 1;
  transform: scale(25);
  transition: none;
}

body.transition-opacity #transition-end {
  display: none;
}

body.design #transition-end .inside {
  background: radial-gradient(circle, var(--blue) 50%, rgba(0, 0, 0, 0) 70%);
}

body.vyroba {
  background-color: var(--real-white);
}
body.vyroba ::selection {
  color: var(--white);
  background: var(--orange);
}
body.vyroba #transition-end .inside {
  background: radial-gradient(circle, var(--orange) 50%, rgba(0, 0, 0, 0) 70%);
}

body:not(.website-loaded) * {
  transition: none !important;
}
body:not(.website-loaded).transition-opacity {
  opacity: 0;
}

body.website-loaded {
  transition: opacity 0.5s, padding 0.5s;
  opacity: 1;
}
body.website-loaded #transition-end .inside {
  transform: scale(0.1);
  opacity: 0;
  transition: transform 0.5s ease-out 0.5s, opacity 0s ease-out 1s;
}

body.website-unloaded {
  opacity: 0;
}

@media (min-width: 800px) {
  main.homepage section.intro .image-positions .image-position {
    padding-top: 72.5%;
  }
  main.homepage section.showcase .card .page .image {
    height: 400px;
  }
  main.homepage section.showcase .card .menu .menu-item {
    font-size: calc(var(--font-size) * 18);
  }
  main.homepage section.references .references-carousel .navigation {
    left: -60px;
    top: 300px;
  }
  main.homepage section.references .references-carousel .navigation.next {
    left: auto;
    right: -60px;
  }
  main.homepage section.references .card .tags{
    margin-top: 0;
    text-align: right;
    padding-left: 0;
  }
  main.homepage section.references .card .tags .tag{
    margin-top: 0;
    margin-bottom: 8px;
    margin-left: 0;
    margin-right: 5px;
  }
  section.contact .end-section-inner {
    padding: 30vh 0 50px;
  }
  section.contact .container {
    height: 1900px;
  }
  section.contact .container .row {
    height: 100%;
  }
  section.contact .left-side {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  section.contact .left-side .title {
    margin-bottom: 480px;
    position: sticky;
    top: 78px;
    height: 200px;
  }
  section.contact .carousel-contact-holder {
    position: sticky;
    top: 250px;
  }
  section.contact .carousel-contact {
    margin: 400px 0 0;
    height: 300px;
  }
  section.contact .right-side {
    position: sticky;
    top: 78px;
  }
  section.contact .right-side .contact-form {
    margin-bottom: 55px;
    padding: 40px 55px 40px 40px;
  }
  section.contact .right-side .contact-form .input-holder, section.contact .right-side .contact-form .select-holder {
    margin-bottom: 25px;
  }
  section.contact .right-side .phone {
    padding: 40px 55px 40px 40px;
    margin-bottom: 0;
  }
}
@media (min-width: 1200px) {
  main.homepage .hero {
    font-size: calc(var(--font-size) * 99);
  }
  main.homepage section.about {
    margin-bottom: 0;
    margin-top: 50vh;
    min-height: 20vh;
  }
  main.homepage section.showcase .left-side {
    width: calc(80vh - 80px);
    padding-top: 100vh;
  }
  main.homepage section.showcase .right-side {
    display: block;
    width: calc(100% - 80vh + 80px);
    padding: 0 15px;
  }
  main.homepage section.showcase .card {
    height: calc(100vh - 108px);
    padding: 20px 55px;
  }
  main.homepage section.showcase .card .title {
    font-size: calc(var(--font-size) * 81);
    margin: auto 0;
    height: 180px;
    display: inline-block;
    align-content: end;
  }
  main.homepage section.showcase .card .text {
    font-size: calc(var(--font-size) * 30);
  }
  main.homepage section.showcase .card .button-holder {
    opacity: 0;
    pointer-events: none;
  }
  main.homepage section.showcase .card .button-holder::after {
    margin: 18px 0px 0px 62px;
  }
  main.homepage section.showcase .card .image {
    display: none;
  }
  main.homepage section.showcase .card .page {
    padding-bottom: 120px;
    pointer-events: none;
    position: absolute;
  }
  main.homepage section.showcase .card .page:last-of-type {
    padding-bottom: 120px;
  }
  main.homepage section.showcase .card .page .text .line {
    opacity: 0;
    overflow: hidden;
  }
  main.homepage section.showcase .card .page .title .line {
    opacity: 0;
  }
  main.homepage section.showcase .card .page:first-of-type .title .line {
    opacity: 1;
  }
  main.homepage section.showcase .card .page:first-of-type .text .line {
    opacity: 1;
  }
  main.homepage section.showcase .card[data-visible=page01] .menu-item:nth-child(1), main.homepage section.showcase .card[data-visible=page02] .menu-item:nth-child(2), main.homepage section.showcase .card[data-visible=page03] .menu-item:nth-child(3), main.homepage section.showcase .card[data-visible=page04] .menu-item:nth-child(4), main.homepage section.showcase .card[data-visible=page05] .menu-item:nth-child(5) {
    color: var(--white) !important;
  }
  main.homepage section.showcase .card[data-visible=page01] .page01 .button-holder, main.homepage section.showcase .card[data-visible=page02] .page02 .button-holder, main.homepage section.showcase .card[data-visible=page03] .page03 .button-holder, main.homepage section.showcase .card[data-visible=page04] .page04 .button-holder, main.homepage section.showcase .card[data-visible=page05] .page05 .button-holder {
    opacity: 1;
    pointer-events: auto;
  }
  main.homepage section.showcase .card[data-visible=page01] .page01 .title .char, main.homepage section.showcase .card[data-visible=page02] .page02 .title .char, main.homepage section.showcase .card[data-visible=page03] .page03 .title .char, main.homepage section.showcase .card[data-visible=page04] .page04 .title .char, main.homepage section.showcase .card[data-visible=page05] .page05 .title .char {
    transform-origin: top;
  }
  main.homepage section.showcase .card .menu {
    border-top: 1px solid var(--dark-gray);
    position: absolute;
    width: 100%;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    color: var(--light-gray);
  }
  main.homepage section.showcase .card .menu .menu-item {
    padding: 20px 0;
    position: relative;
    transition: color 0.3s;
  }
  main.homepage section.showcase .card .menu .menu-item::after {
    content: "";
    display: block;
    width: 0%;
    height: 1px;
    background-color: var(--white);
    position: absolute;
    top: -1px;
    left: 50%;
    transition: width 0.3s, left 0.3s;
  }
  main.homepage section.showcase .card .menu .menu-item:hover {
    color: var(--white);
  }
  main.homepage section.showcase .card .menu .menu-item:hover::after {
    width: 100%;
    left: 0%;
  }
  main.homepage section.showcase .card[data-visible=page01] .menu:not(:hover) .menu-item:nth-child(1)::after, main.homepage section.showcase .card[data-visible=page02] .menu:not(:hover) .menu-item:nth-child(2)::after, main.homepage section.showcase .card[data-visible=page03] .menu:not(:hover) .menu-item:nth-child(3)::after, main.homepage section.showcase .card[data-visible=page04] .menu:not(:hover) .menu-item:nth-child(4)::after, main.homepage section.showcase .card[data-visible=page05] .menu:not(:hover) .menu-item:nth-child(5)::after {
    width: 100%;
    left: 0;
  }
  main.homepage section.clients .logos {
    margin: 140px 0;
  }
  main.homepage section.clients .logos .row {
    margin-top: 60px;
  }
  main.homepage section.references .hero {
    padding-bottom: 30vh;
  }
  section.contact .right-side .phone .link-phone {
    font-size: calc(var(--font-size) * 81);
  }
  section.contact .left-side .title {
    margin-bottom: 535px;
  }
  section.contact .carousel-contact-holder {
    top: -85px;
  }
  section.contact .carousel-contact {
    height: 500px;
  }
}
@media (min-width: 1200px) and (max-width: 2399px) {
  main.homepage section.references .col-lg-flex {
    width: 640px;
    margin-left: 0;
  }
  main.homepage section.references .references-carousel {
    padding: 0;
  }
  main.homepage section.references .references-carousel .reference {
    top: 0;
  }
  main.homepage section.references .references-carousel .navigation {
    width: 695px;
    left: -55px;
    background: transparent;
    opacity: 0;
    border-radius: 0;
    height: 100%;
    top: 0;
    cursor: none;
    z-index: 10;
  }
  main.homepage section.references .references-carousel .navigation.next {
    left: 640px;
    width: calc(100vw - 695px);
    right: auto;
  }
  main.homepage section.references .references-carousel .navigation:after {
    display: none;
  }
  main.homepage section.references .references-carousel .navigation:hover {
    transform: scale(1);
  }
  main.homepage section.references .references-carousel.text-fit-ready .reference[data-order="0"] {
    transform: translateY(0) translateX(205%) scale(0.05);
  }
  main.homepage section.references .references-carousel.text-fit-ready .reference[data-order="1"] {
    transform: translateY(0) translateX(190%) scale(0.2);
  }
  main.homepage section.references .references-carousel.text-fit-ready .reference[data-order="2"] {
    transform: translateY(0) translateX(155%) scale(0.4);
  }
  main.homepage section.references .references-carousel.text-fit-ready .reference[data-order="3"] {
    transform: translateY(0) translateX(95%) scale(0.7);
  }
  main.homepage section.references .references-carousel.text-fit-ready .reference[data-order="4"] {
    position: relative;
    top: 0;
    opacity: 1;
    pointer-events: auto;
    z-index: 4;
  }
  main.homepage section.references .references-carousel.text-fit-ready .reference[data-order="5"] {
    transform: translateY(0) translateX(-160%) scale(1.5);
  }
  main.homepage section.references .card {
    padding: 40px;
  }
  main.homepage section.references .card .text {
    height: 600px;
    padding: 100px 20px;
  }
  main.homepage section.references .card .footer .countdown {
    margin-bottom: 30px;
  }
  main.homepage section.references #references-cursor {
    display: block;
    width: 200px;
    height: 200px;
    line-height: 30px;
    padding: 85px 0;
    font-size: calc(var(--font-size) * 36);
    text-align: center;
    color: var(--black);
    position: absolute;
    z-index: 100;
    border-radius: 50%;
    pointer-events: none;
    margin-left: -90px;
    margin-top: -90px;
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.01);
    transition: transform 0.5s, opacity 0.1s 0.4s;
  }
  main.homepage section.references #references-cursor::before {
    display: block;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--blue) 50%, rgba(0, 0, 0, 0) 70%);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-name: wiggle;
  }
  main.homepage section.references #references-cursor .inner {
    position: relative;
  }
  main.homepage section.references #references-cursor .inner .prev {
    position: relative;
  }
  main.homepage section.references #references-cursor .inner .next {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
  }
  main.homepage section.references .references-carousel:hover #references-cursor {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0s, 0s;
  }
}
@media (min-width: 2400px) {
  main.homepage section.references .references-carousel {
    width: 1200px;
    margin: 0 auto;
  }
  main.homepage section.references .references-carousel .navigation {
    top: 400px;
  }
  main.homepage section.references .card .text {
    height: 440px;
  }
}
html.lenis-scrolling main.homepage section.references #references-cursor {
  opacity: 0 !important;
  transform: scale(0.01) !important;
}

@keyframes wiggle {
  0% {
    transform: scale(1) translate(0, 0) skew(0, 0) rotate(0deg);
  }
  25% {
    transform: scale(1.1) translate(-5px, 10px) skew(2deg, 2deg);
  }
  50% {
    transform: scale(1) translate(7px, -10px) skew(-3deg, -2deg);
  }
  75% {
    transform: scale(1.1) translate(5px, 5px) skew(1deg, -3deg);
  }
  100% {
    transform: scale(1) translate(0, 0) skew(0, 0) rotate(360deg);
  }
}
@keyframes bigWiggle {
  0% {
    transform: scale(1) translate(0, 0) skew(0, 0);
  }
  25% {
    transform: scale(1.1) translate(-50px, 60px) skew(2deg, 2deg);
  }
  50% {
    transform: scale(1) translate(30px, -20px) skew(-3deg, -2deg);
  }
  75% {
    transform: scale(1.1) translate(50px, 80px) skew(1deg, -3deg);
  }
}
.p5Canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  cursor: pointer;
  width: 100%;
  filter: blur(30px);
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-name: bigWiggle;
}

@media (max-width: 799px) {
  main.homepage section.intro .image-positions .row {
    flex-direction: column;
    position: relative;
  }
  main.homepage section.intro .image-positions .col-4-8 {
    width: 100%;
    position: absolute;
    top: 0;
  }
  main.homepage section.intro .image-positions .offset-4-8 {
    margin-left: 0;
  }
  main.homepage section.intro .image-positions .image-position-01, main.homepage section.intro .image-positions .image-position-03, main.homepage section.intro .image-positions .image-position-05 {
    top: 60px;
  }
  main.homepage section.intro .image-positions .image-position-02, main.homepage section.intro .image-positions .image-position-04, main.homepage section.intro .image-positions .image-position-06 {
    top: calc(30vh + 90px);
  }
  #footer .menu-block {
    display: flex;
    flex-wrap: wrap;
  }
  #footer .menu-block .footer-menu {
    order: 1;
    width: 50%;
    margin-top: 0px;
  }
  #footer .menu-block .menu-socials {
    flex-direction: column;
    order: 2;
    width: 50%;
    margin: 0px 0px auto;
  }
  #footer .menu-block .page-switcher {
    order: 3;
  }
  #footer .footer-logo-mobile {
    display: block;
    margin: 80px 0 20px;
  }
  #footer .footer-logo-desktop {
    display: none;
  }
  #footer .container .row {
    display: flex;
    flex-direction: column-reverse;
  }
  #footer .newsletter {
    margin: 50px 0;
  }
  #footer .copyright-menu {
    display: flex;
  }
  #footer .copyright-menu a:last-child {
    margin-left: auto;
  }
}
body.signpost {
  background-color: var(--white);
  color: var(--black);
}
body.signpost .btn.btn-expanding.btn-send {
  color: var(--dark-gray);
  background-color: var(--real-white);
}
body.signpost .btn.btn-expanding.btn-send::after {
  background-image: url("../img/icons/send-dark-gray.svg");
}
body.signpost .btn.btn-expanding.btn-send:hover {
  background-color: var(--real-white);
}
body.signpost main.signpost .signs {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 30px 0;
  gap: 30px;
}
body.signpost main.signpost .signs .sign {
  border-radius: var(--radius-big);
  height: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
body.signpost main.signpost .signs .sign .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
body.signpost main.signpost .signs .sign .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
body.signpost main.signpost .signs .sign .title {
  position: relative;
  z-index: 1;
  font-size: calc(var(--font-size) * 99);
}
body.signpost main.signpost .signpost-cursor {
  display: none;
}
body.signpost #footer {
  background-color: var(--white);
  color: var(--dark-gray);
}
body.signpost #footer a {
  color: var(--dark-gray);
}
body.signpost #footer .copyright a::after {
  background-color: var(--dark-gray);
}
body.signpost #footer .big-logo svg {
  fill: var(--dark-gray);
}

@media (min-width: 800px) {
  body.signpost main.signpost .container {
    padding: 0 30px;
  }
  body.signpost #footer .left-side .big-logo-holder {
    margin-top: 80px;
  }
  body.signpost #footer .menu-block {
    display: flex;
    flex-direction: column;
  }
  body.signpost #footer .menu-block .menu-socials {
    margin-top: auto;
  }
}
@media (min-width: 1200px) {
  body.signpost main.signpost .signs {
    gap: 0;
    flex-direction: row;
  }
  body.signpost main.signpost .signs .sign {
    height: 100%;
    width: 50%;
    transition: width 1.5s ease-in-out;
    cursor: none;
    position: relative;
  }
  body.signpost main.signpost .signs .sign .title {
    font-size: calc(var(--font-size) * 126);
    pointer-events: none;
  }
  body.signpost main.signpost .signs .sign:hover {
    width: 70%;
  }
  body.signpost main.signpost .signs .sign:first-of-type {
    border-radius: var(--radius-big) 0 0 var(--radius-big);
  }
  body.signpost main.signpost .signs .sign:last-of-type {
    border-radius: 0 var(--radius-big) var(--radius-big) 0;
  }
  body.signpost main.signpost .signs .sign:last-of-type .image {
    left: auto;
    right: 0;
  }
  body.signpost main.signpost .signs .sign .image {
    width: calc(100vw - var(--scrollbar-width) - 60px);
  }
  body.signpost main.signpost .signs .sign .signpost-cursor {
    display: block;
    width: 200px;
    height: 200px;
    line-height: 30px;
    padding: 85px 0;
    font-size: calc(var(--font-size) * 36);
    text-align: center;
    color: var(--black);
    position: absolute;
    z-index: 100;
    border-radius: 50%;
    pointer-events: none;
    margin-left: -100px;
    margin-top: -100px;
    white-space: nowrap;
    transition: transform 0.5s, opacity 0.1s 0.4s;
    transform: scale(0.01);
    z-index: 3;
    opacity: 0;
  }
  body.signpost main.signpost .signs .sign .signpost-cursor::before {
    display: block;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--blue) 50%, rgba(0, 0, 0, 0) 70%);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-name: wiggle;
  }
  body.signpost main.signpost .signs .sign .signpost-cursor .inner {
    position: relative;
  }
  body.signpost main.signpost .signs .sign .clickable {
    display: block;
    position: absolute;
    width: 80%;
    height: 100%;
    left: 0%;
    top: 0%;
  }
  body.signpost main.signpost .signs .sign.shop .clickable {
    left: 20%;
  }
  body.signpost main.signpost .signs .sign .clickable:hover + .signpost-cursor {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0s, 0s;
  }
  body.signpost main.signpost .signs .sign.shop .signpost-cursor {
    color: var(--real-white);
  }
  body.signpost main.signpost .signs .sign.shop .signpost-cursor::before {
    background: radial-gradient(circle, rgb(250, 62, 2) 50%, rgba(0, 0, 0, 0) 70%);
  }
}
body.vyroba main {
  color: var(--black);
  background-color: var(--real-white);
  transition: padding 0.5s;
  overflow: hidden;
}
body.vyroba .input-holder input, body.vyroba .input-holder textarea {
  color: var(--black);
}
body.vyroba .input-holder input + label, body.vyroba .input-holder textarea + label {
  background-color: var(--black);
}
body.vyroba .input-holder:after {
  border-bottom-color: var(--black);
}
body.vyroba .select .select-options .option.selected {
  background-color: var(--orange);
  color: var(--real-white);
}
body.vyroba .btn {
  background-color: var(--light-gray);
  color: var(--black);
}
body.vyroba .btn.btn-send:hover {
  background-color: var(--orange);
  color: var(--real-white);
}
body.vyroba .btn.btn-send:hover::after {
  background-image: url("../img/icons/send-white.svg");
}
body.vyroba .btn.btn-arrow:not(.btn-small):hover {
  background-color: var(--orange);
  color: var(--real-white);
}
body.vyroba .btn.btn-arrow:not(.btn-small):hover::after {
  background-image: url("../img/icons/arrow-white.svg");
}
body.vyroba #top-notice {
  height: 0;
  overflow: hidden;
  background-color: var(--orange);
  color: var(--white);
  text-align: center;
  margin: -20px 0 20px;
  line-height: 20px;
  font-size: calc(var(--font-size) * 21);
  transition: height 0.5s;
  position: relative;
  z-index: 100;
  font-weight: var(--font-semibold);
  padding: 0 40px;
}
body.vyroba #top-notice .notice-carousel {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  height: 100%;
}
body.vyroba #top-notice .notice-carousel .flickity-viewport {
  overflow: hidden;
  height: 40px !important;
}
body.vyroba #top-notice .notice-carousel .cell {
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s;
  height: 40px;
  line-height: 1.2em;
  display: flex;
  justify-content: center;
}
body.vyroba #top-notice .notice-carousel .cell .container {
  padding: 0;
  align-self: center;
  justify-content: center;
}
body.vyroba #top-notice .notice-carousel .cell.is-selected {
  opacity: 1;
}
body.vyroba #top-notice .notice-carousel .flickity-button {
  width: 16px;
  height: 16px;
  margin: 2px;
  background-color: transparent;
  border: 0;
  color: var(--white);
  cursor: pointer;
  position: absolute;
  left: -25px;
  top: 10px;
  padding: 0;
  background-image: url("../img/icons/arrow-white.svg");
}
body.vyroba #top-notice .notice-carousel .flickity-button.previous {
  transform: rotate(-135deg);
}
body.vyroba #top-notice .notice-carousel .flickity-button.next {
  transform: rotate(45deg);
  left: auto;
  right: -25px;
}
body.vyroba #top-notice .notice-carousel .flickity-button svg {
  display: none;
}
body.vyroba #header {
  height: auto;
}
body.vyroba #header .main-title .logo svg {
  fill: var(--black);
}
body.vyroba #header .cart-button {
  height: 38px;
  border-radius: var(--radius);
  display: inline-block;
  position: relative;
}
body.vyroba #header .cart-button .value {
  position: absolute;
  right: 0;
  top: 0;
  height: auto;
  width: auto;
  background-color: var(--white);
  font-size: calc(var(--font-size) * 24);
  color: var(--black);
  display: inline-block;
  overflow: hidden;
  text-align: left;
  border-radius: var(--radius);
  transition: width 0.5s ease-in-out, height 0.5s ease-in-out 0.4s;
}
body.vyroba #header .cart-button .value .expandable-inner {
  padding: 0;
  height: auto;
  width: 340px;
  display: inline-block;
}
body.vyroba #header .cart-button .value .header {
  text-align: center;
  padding-right: 38px;
  font-size: calc(var(--font-size) * 18);
  line-height: 1;
  display: block;
  padding: 10px 15px;
}
body.vyroba #header .cart-button .value .header .price-vat {
  font-size: calc(var(--font-size) * 24);
  white-space: nowrap;
  display: block;
  font-weight: var(--font-medium);
}
body.vyroba #header .cart-button .value .cart-items {
  display: block;
  max-height: 380px;
  overflow: auto;
}
body.vyroba #header .cart-button .value .cart-items .cart-item {
  display: flex;
  padding: 15px 0;
  margin: 0 15px;
  border-top: 1px solid var(--light-gray);
}
body.vyroba #header .cart-button .value .cart-items .cart-item .image {
  height: 60px;
  width: 80px;
  border-radius: var(--radius);
  overflow: hidden;
}
body.vyroba #header .cart-button .value .cart-items .cart-item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
body.vyroba #header .cart-button .value .cart-items .cart-item .text {
  flex-grow: 1;
  padding: 0 15px;
}
body.vyroba #header .cart-button .value .cart-items .cart-item .text .price {
  display: block;
  font-weight: var(--font-medium);
}
body.vyroba #header .cart-button .value .cart-items .cart-item .remove-holder {
  cursor: auto;
  width: 55px;
  margin-right: -15px;
  margin-top: -15px;
  margin-bottom: -15px;
}
body.vyroba #header .cart-button .value .cart-items .cart-item .remove {
  width: 16px;
  height: 16px;
  padding: 0;
  font-size: 0;
  background-image: url("../img/icons/cross-black.svg");
  background-size: cover;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  float: right;
  margin-right: 15px;
  margin-top: 15px;
}
body.vyroba #header .cart-button .number {
  border-radius: var(--radius);
  background-color: var(--orange);
  color: var(--white);
  text-align: center;
  line-height: 20px;
  width: 20px;
  height: 20px;
  position: absolute;
  left: -287px;
  top: 15px;
  z-index: 10;
  font-size: calc(var(--font-size) * 18);
  transition: left 0.5s ease-in-out, top 0.5s ease-in-out;
  pointer-events: none;
}
body.vyroba #header .cart-button .icon {
  display: inline-block;
  width: 38px;
  height: 100%;
  border-radius: var(--radius);
  background-color: var(--orange);
  position: relative;
  z-index: 2;
  transition: background 0.3s;
  cursor: pointer;
}
body.vyroba #header .cart-button .icon img {
  width: 20px;
  height: 20px;
  margin: 9px;
}
body.vyroba #header .cart-button:not(:hover) .icon {
  background-color: var(--black);
}
body.vyroba #header .cart-button:not(:hover) .value {
  width: 0px !important;
  height: 38px !important;
  transition-delay: 0.4s, 0s;
}
body.vyroba #header .cart-button:not(:hover) .number {
  left: -10px;
  top: 9px;
  transition-delay: 0.4s;
}
body.vyroba #header #menu-button {
  float: none;
  background-color: var(--white);
  border-radius: var(--radius);
  display: inline-block;
  position: relative;
  z-index: 5;
}
body.vyroba #header .main-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 4;
  pointer-events: none;
}
body.vyroba #header .main-menu .overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(129, 129, 129, 0.63);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s;
  display: none;
}
body.vyroba #header .main-menu .panel {
  border-radius: 0 0 var(--radius-big) var(--radius-big);
  position: relative;
  z-index: 2;
  width: 0;
  margin: 0 auto;
  overflow: hidden;
  padding: 20px 20px 20px;
  display: flex;
  flex-direction: column;
  transition: padding 0.5s, box-shadow 0s, width 0.5s 0.4s;
  transition-timing-function: ease-out;
}
body.vyroba #header .main-menu .panel .navigation {
  display: inline-block;
  border-radius: var(--radius);
  margin-bottom: 20px;
  vertical-align: top;
  position: relative;
  z-index: 5;
  padding-top: 38px;
  overflow: hidden;
  background-color: var(--white);
  transition: height 0.5s 0s ease-out;
  height: 38px;
}
body.vyroba #header .main-menu .panel .navigation .navigation-holder {
  overflow: hidden;
}
body.vyroba #header .main-menu .panel .navigation a {
  position: relative;
  vertical-align: top;
  display: block;
}
body.vyroba #header .main-menu .panel .navigation a::before {
  background-color: var(--orange);
}
body.vyroba #header .main-menu .panel .cards {
  overflow-y: auto;
  height: 100%;
  position: relative;
}
body.vyroba #header .main-menu .panel .cards .card {
  width: calc(100% - var(--scrollbar-width));
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s;
  position: absolute;
  top: 0;
  left: 0;
}
body.vyroba #header .main-menu .panel .cards .image {
  overflow: hidden;
  border-radius: var(--radius-big);
  height: 100%;
  display: none;
  position: relative;
}
body.vyroba #header .main-menu .panel .cards .image img {
  left: 100%;
  transition: transform 5s, left 0.8s;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
body.vyroba #header .main-menu .panel .cards .image img.move {
  left: 0;
  transform: scale(1.1) translateX(-3%);
}
body.vyroba #header .main-menu .panel .cards .text {
  text-align: left;
  column-count: 2;
  gap: 20px;
  height: 325px;
  padding: 15px 0;
}
body.vyroba #header .main-menu .panel .cards .text .part {
  margin-bottom: 20px;
  break-inside: avoid-column;
}
body.vyroba #header .main-menu .panel .cards .text a {
  text-transform: none;
  font-weight: var(--font-regular);
  transition: font-weight 0.2s;
  padding: 0;
  line-height: 1.2;
  display: block;
  padding: 3px 0;
  white-space: wrap;
  font-size: calc(var(--font-size) * 30);
  position: relative;
  transition: padding 0.3s;
}
body.vyroba #header .main-menu .panel .cards .text a::before {
  display: none;
}
body.vyroba #header .main-menu .panel .cards .text a::after {
  content: "→";
  position: absolute;
  left: -30px;
  opacity: 0;
  transition: opacity 0.3s, left 0.3s;
  pointer-events: none;
}
body.vyroba #header .main-menu .panel .cards .text a:hover {
  padding-left: 20px;
}
body.vyroba #header .main-menu .panel .cards .text a:hover::after {
  left: 0;
  opacity: 1;
}
body.vyroba #header .main-menu .panel .cards .menu-sub-parts .menu-sub-part {
  opacity: 0;
  position: absolute;
  top: 70px;
  left: 0;
  width: 100%;
}
body.vyroba #header .main-menu .panel .cards .menu-sub-parts .menu-sub-part.active {
  opacity: 1;
  z-index: 2;
}
body.vyroba #header .main-menu .panel .cards #menu-article-list {
  display: none;
}
body.vyroba #header .main-menu .panel .cards .infinite-row {
  margin: -10px -15px;
}
body.vyroba #header .main-menu .panel .cards .infinite-row:hover .article .top {
  opacity: 0.45;
}
body.vyroba #header .main-menu .panel .cards .infinite-row .article {
  text-align: left;
}
body.vyroba #header .main-menu .panel .cards .infinite-row .article::before {
  display: none;
}
body.vyroba #header .main-menu .panel .cards .infinite-row .article .article-title {
  transition: opacity 0.5s;
}
body.vyroba #header .main-menu .panel .cards .infinite-row .article .image {
  display: inline-block;
  position: absolute;
  height: 100%;
}
body.vyroba #header .main-menu .panel .cards .infinite-row .article .image img.original {
  position: static;
}
body.vyroba #header .main-menu .panel .cards .infinite-row .article .image img.new {
  position: absolute;
  left: 100%;
  transition: left 0s;
}
body.vyroba #header .main-menu .panel .cards .infinite-row .article .tags {
  position: absolute;
  transition: opacity 0.5s;
}
body.vyroba #header .main-menu .panel .cards .infinite-row .article.changing .article-title {
  opacity: 0;
}
body.vyroba #header .main-menu .panel .cards .infinite-row .article.changing .tags {
  opacity: 0;
}
body.vyroba #header .main-menu .panel .cards .infinite-row .article.moving .image img.new {
  left: 0;
  transition-duration: 1s;
}
body.vyroba #header .main-menu .panel .cards .infinite-row button.article {
  display: none;
}
body.vyroba #header .main-menu .panel .cards .button-holder.all .btn {
  width: auto;
  padding: 9px 24px 9px 48px;
}
body.vyroba #header .main-menu .panel .cards .button-holder.all .btn::before {
  display: none;
}
body.vyroba #header .main-menu .panel .cards .button-holder.all .btn:hover {
  color: var(--real-white);
}
body.vyroba.website-loaded #header {
  background-color: var(--real-white);
}
body.vyroba.menu-opened #header .main-menu {
  opacity: 1;
  pointer-events: auto;
}
body.vyroba.menu-opened #header .main-menu .overlay {
  opacity: 1;
  transition-duration: 0s;
}
body.vyroba.menu-opened #header .main-menu .panel {
  width: 160px;
  transition-delay: 0s;
}
body.vyroba.menu-opened #header .main-menu .panel .navigation {
  background-color: var(--white);
  height: 228px;
  transition-delay: 0.5s;
}
body.vyroba.menu-opened #header .main-menu .card.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
body.vyroba .item {
  margin-bottom: 30px;
  display: block;
  color: var(--black);
}
body.vyroba .item .top {
  overflow: hidden;
  padding-top: 72.5%;
  position: relative;
  width: 100%;
  display: block;
}
body.vyroba .item .top .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
body.vyroba .item .top .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-big);
  overflow: hidden;
}
body.vyroba .item .top .text {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  padding: 20px;
  margin-bottom: -100%;
  z-index: 1;
  background-color: transparent;
  transition: background 1s, margin 0.3s;
  color: var(--black);
}
body.vyroba .item .top .text .title {
  font-weight: var(--font-semibold);
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
body.vyroba .item .top .text .description {
  font-size: calc(var(--font-size) * 21);
  max-width: 300px;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  white-space: normal;
}
body.vyroba .item .top .text .btn {
  transition: background-color 0s 0s;
  position: absolute;
  top: calc(-100% + 10px);
  font-size: 0;
  padding: 9px 19px 9px 19px;
  background-color: var(--orange);
}
body.vyroba .item .top .text .btn:after {
  transition-delay: 0s;
  background-image: url("../img/icons/arrow-white.svg");
}
body.vyroba .item .top .text::before {
  position: absolute;
  bottom: -50%;
  left: -50%;
  width: 200%;
  height: 210%;
  background-color: var(--real-white);
  filter: blur(40px);
  content: "";
  display: inline-block;
  opacity: 0;
  transition: opacity 0.3s;
}
body.vyroba .item .bottom {
  margin-top: 10px;
  margin-left: 20px;
  display: block;
  overflow: hidden;
  position: relative;
}
body.vyroba .item .bottom .label {
  font-weight: var(--font-semibold);
  position: relative;
  top: 0;
  transition: top 0.3s;
}
body.vyroba .article:not(main) {
  margin-bottom: 40px;
  display: inline-block;
  width: 100%;
}
body.vyroba .article:not(main) .top {
  margin-bottom: 20px;
  display: block;
  position: relative;
  vertical-align: top;
  transition: opacity 0.3s;
  padding-top: 72.5%;
}
body.vyroba .article:not(main) .top .image {
  height: 100%;
  width: 100%;
  display: inline-block;
  border-radius: var(--radius-big);
  overflow: hidden;
  vertical-align: top;
  position: absolute;
  top: 0;
  left: 0;
}
body.vyroba .article:not(main) .top .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
body.vyroba .article:not(main) .top .tags {
  position: absolute;
  top: 50%;
  left: 20px;
  z-index: 1;
  margin-top: -12px;
}
body.vyroba .article:not(main) .top .tags .tag {
  display: inline-block;
  line-height: 20px;
  font-size: calc(var(--font-size) * 18);
  background-color: var(--orange);
  color: var(--real-white);
  padding: 9px 24px;
  border-radius: var(--radius);
  margin-right: 10px;
  text-transform: uppercase;
  font-weight: var(--font-semibold);
}
body.vyroba .article:not(main) .bottom {
  display: flex;
}
body.vyroba .article:not(main) .bottom .article-title {
  color: var(--black);
  margin-left: 30px;
  font-size: calc(var(--font-size) * 24);
  line-height: 1.2;
  text-transform: none;
}
body.vyroba .article:not(main):hover .top {
  opacity: 1 !important;
}
body.vyroba .article:not(main):hover .btn {
  background-color: var(--orange);
  color: var(--real-white);
}
body.vyroba .article:not(main):hover .btn::after {
  background-image: url("../img/icons/arrow-white.svg");
  transform: rotate(45deg);
}
body.vyroba section.bestsellers {
  padding: 80px 0;
  background-color: var(--white);
}
body.vyroba section.bestsellers .bestsellers-slider {
  white-space: nowrap;
  overflow-x: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;
}
body.vyroba section.bestsellers .bestsellers-slider::-webkit-scrollbar {
  display: none;
}
body.vyroba section.bestsellers .left-side {
  height: 100%;
  display: inline-block;
  vertical-align: top;
  width: 250px;
  padding-left: 25px;
}
body.vyroba section.bestsellers .products {
  display: inline-block;
  white-space: nowrap;
  font-size: 0;
}
body.vyroba section.bestsellers .products .item {
  width: 300px;
  display: inline-block;
  margin-right: 25px;
  font-size: calc(var(--font-size) * 30);
}
body.vyroba section.bestsellers .products .item .top .text::before {
  background-color: var(--white);
}
body.vyroba section.bestsellers .products .item .top .text .btn {
  top: calc(-100% - 55px);
}
body.vyroba section.bestsellers .title {
  font-weight: var(--font-semibold);
  margin-bottom: 30px;
}
body.vyroba section.bestsellers nav.menu a {
  color: var(--black);
  transition: font-weight 0.3s;
  line-height: 1.5;
}
body.vyroba section.bestsellers nav.menu a:hover {
  font-weight: var(--font-semibold);
}
body.vyroba section.bestsellers .buttons {
  margin-top: auto;
  display: none;
}
body.vyroba section.bestsellers .buttons .btn {
  padding: 9px;
  margin-right: 5px;
}
body.vyroba section.bestsellers .buttons .btn img {
  height: 20px;
  width: 20px;
  transform: rotate(-135deg);
}
body.vyroba section.bestsellers .buttons .btn:last-child img {
  transform: rotate(45deg);
}
body.vyroba section.bestsellers .item {
  margin-bottom: 30px;
}
body.vyroba section.bestsellers .item .image {
  transition: width 1s;
  position: absolute;
  left: 0;
  width: 0;
  z-index: 1;
}
body.vyroba section.bestsellers .item .image img {
  max-width: none;
  width: 100%;
  right: 0;
  left: auto;
  z-index: 3;
}
body.vyroba section.bestsellers .item .image .tags {
  position: absolute;
  top: calc(50% - 20px);
  left: 20px;
}
body.vyroba section.bestsellers .item .image .tags .tag {
  font-size: calc(var(--font-size) * 18);
  line-height: 20px;
  font-weight: var(--font-semibold);
  padding: 9px 24px;
  border-radius: var(--radius);
  background-color: var(--orange);
  color: var(--white);
  text-transform: uppercase;
}
body.vyroba section.bestsellers .item .bottom .label span {
  display: block;
}
body.vyroba main #carousel-vyroba {
  height: calc(100vh - 120px);
}
body.vyroba main #carousel-vyroba .row {
  display: flex;
  flex-direction: column-reverse;
  height: 100%;
  justify-content: start;
  flex-wrap: nowrap;
}
body.vyroba main #carousel-vyroba .row > div:first-child {
  flex-grow: 1;
}
body.vyroba main #carousel-vyroba .left {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 40px;
}
body.vyroba main #carousel-vyroba .left .title {
  font-size: calc(var(--font-size) * 54);
  line-height: 1;
  margin-top: 40px;
  position: relative;
}
body.vyroba main #carousel-vyroba .left .title .carousel-cell:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
}
body.vyroba main #carousel-vyroba .left .title .carousel-cell .char {
  opacity: 0;
  transform: rotateX(90deg);
}
body.vyroba main #carousel-vyroba .left .title .carousel-cell.active .char {
  transform-origin: bottom;
}
body.vyroba main #carousel-vyroba .left .button-holder {
  margin: auto 0 20px;
  position: relative;
  display: flex;
}
body.vyroba main #carousel-vyroba .left .button-holder .timer {
  margin: 18px 0px 0px 30px;
  position: relative;
  width: 100%;
  height: 2px;
}
body.vyroba main #carousel-vyroba .left .button-holder .timer::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--orange);
  opacity: 0.36;
  display: inline-block;
}
body.vyroba main #carousel-vyroba .left .button-holder .timer .handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--orange);
  transition: width 4s linear;
}
body.vyroba main #carousel-vyroba .left .tags-holder {
  position: relative;
  height: 40px;
  width: 100%;
  margin: 0 0 auto;
}
body.vyroba main #carousel-vyroba .left .tags {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity 0.5s 0.3s;
}
body.vyroba main #carousel-vyroba .left .tags.active {
  opacity: 1;
  pointer-events: auto;
}
body.vyroba main #carousel-vyroba .left .tags .tag {
  text-transform: uppercase;
  background-color: var(--orange);
  padding: 9px 24px;
  color: var(--white);
  margin: 0 5px 0 0;
  border-radius: var(--radius);
  font-size: calc(var(--font-size) * 18);
  line-height: 20px;
  display: inline-block;
  font-weight: var(--font-semibold);
}
body.vyroba main #carousel-vyroba .left .tags .tag.info {
  background-color: var(--white);
  color: var(--black);
}
body.vyroba main #carousel-vyroba .left .navigation {
  display: none;
}
body.vyroba main #carousel-vyroba .left .navigation .navigation-button {
  width: 60px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius);
  border: 0;
  margin-right: 10px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.3s;
  position: relative;
}
body.vyroba main #carousel-vyroba .left .navigation .navigation-button:hover, body.vyroba main #carousel-vyroba .left .navigation .navigation-button.active {
  opacity: 1;
}
body.vyroba main #carousel-vyroba .left .navigation .navigation-button img {
  max-width: none;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
body.vyroba main #carousel-vyroba .left .navigation .navigation-button:nth-child(2) .image.active {
  transition-delay: 0.2s;
}
body.vyroba main #carousel-vyroba .left .navigation .navigation-button:nth-child(3) .image.active {
  transition-delay: 0.4s;
}
body.vyroba main #carousel-vyroba .left .navigation .navigation-button:nth-child(4) .image.active {
  transition-delay: 0.6s;
}
body.vyroba main #carousel-vyroba .left .navigation .navigation-button:nth-child(5) .image.active {
  transition-delay: 0.8s;
}
body.vyroba main #carousel-vyroba .left .navigation .navigation-button:nth-child(6) .image.active {
  transition-delay: 1s;
}
body.vyroba main #carousel-vyroba .right {
  overflow: hidden;
  border-radius: var(--radius-big) 0 0 var(--radius-big);
  height: 100%;
  position: relative;
  height: 70vw;
}
body.vyroba main #carousel-vyroba .right .image {
  width: 0;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  transition: width 0s 1s;
  overflow: hidden;
}
body.vyroba main #carousel-vyroba .right .image img {
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0s ease-in-out 2s;
}
body.vyroba main #carousel-vyroba .right .image.active {
  width: 100%;
  z-index: 2;
  transition-duration: 1s;
  transition-delay: 0s;
}
body.vyroba main #carousel-vyroba .right .image.active img {
  transform: scale(1.05) translateX(-1.5%);
  transition-duration: 2s;
  transition-delay: 0s;
}
body.vyroba main #carousel-vyroba .right .image.left-from-active {
  right: auto;
  left: 0%;
}
body.vyroba main #carousel-vyroba .right .image.left-from-active img {
  position: absolute;
  right: 0;
}
body.vyroba main #carousel-vyroba.moving .left .button-holder .timer .handle {
  width: 0;
  transition-duration: 0s;
}
body.vyroba main section.contact .title.hero {
  margin-bottom: 40px;
}
body.vyroba main section.contact .sliders-contact-holder {
  display: none;
}
body.vyroba main .right-side .contact-form, body.vyroba main .right-side .phone {
  background-color: var(--white);
}
body.vyroba main .right-side .contact-form .input-holder input::placeholder, body.vyroba main .right-side .contact-form .input-holder textarea::placeholder {
  color: var(--black);
}
body.vyroba main .right-side .contact-form .select {
  background-color: var(--real-white);
  opacity: 1;
}
body.vyroba main .right-side .contact-form .select .select-options {
  background-color: var(--real-white);
}
body.vyroba main .right-side .contact-form .select .select-options .option:hover {
  background-color: var(--orange);
  color: var(--white);
}
body.vyroba main .right-side .checkbox-holder input + label::before {
  border-color: var(--black);
}
body.vyroba main .right-side .checkbox-holder input + label::after {
  background-color: var(--black);
}
body.vyroba main .right-side .phone .title-phone {
  color: var(--black);
  opacity: 0.63;
}
body.vyroba main .right-side .phone .link-phone:hover {
  color: var(--orange);
}
body.vyroba main.homepage {
  position: static;
}
body.vyroba main.homepage section.intro {
  height: auto;
  min-height: 100vh;
  padding: 0;
}
body.vyroba main.homepage section.intro .logos {
  padding: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
body.vyroba main.homepage section.intro .logos .logo-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 30%;
  text-align: left;
  color: var(--light-gray);
  font-size: calc(var(--font-size) * 18);
  margin-right: auto;
}
body.vyroba main.homepage section.intro .logos .logo-title .image {
  margin-top: 5px;
  max-width: 80px;
}
body.vyroba main.homepage section.intro .logos .logo-slideshow {
  width: 33%;
}
body.vyroba main.homepage section.intro .logos .logo-slideshow:nth-child(4), body.vyroba main.homepage section.intro .logos .logo-slideshow:nth-child(5), body.vyroba main.homepage section.intro .logos .logo-slideshow:nth-child(6), body.vyroba main.homepage section.intro .logos .logo-slideshow:nth-child(7) {
  display: none;
}
body.vyroba main.homepage section.hero {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.vyroba main.homepage section.services {
  padding: 160px 50px 0;
}
body.vyroba main.homepage section.services .box {
  border-radius: var(--radius-big);
  background-color: var(--white);
  padding: 30px;
  font-size: calc(var(--font-size) * 21);
  background-repeat: no-repeat;
  margin-bottom: 20px;
}
body.vyroba main.homepage section.services .box.box-orange {
  background: var(--orange);
  color: var(--real-white);
}
body.vyroba main.homepage section.services .box.box-orange .btn {
  background-color: var(--real-white);
  color: var(--orange);
}
body.vyroba main.homepage section.services .box.box-orange .btn::after {
  background-image: url("../img/icons/arrow-orange.svg");
}
body.vyroba main.homepage section.services .box .box-title {
  text-transform: uppercase;
  margin-bottom: 20px;
  font-size: calc(var(--font-size) * 30);
}
body.vyroba main.homepage section.services .box .btn-holder {
  margin-top: 30px;
}
body.vyroba main.homepage section.solutions {
  margin: 160px 0;
}
body.vyroba main.homepage section.solutions .title {
  font-size: calc(var(--font-size) * 54);
  line-height: 1;
  margin: 40px 0;
}
body.vyroba main.homepage section.solutions .solution {
  transition: opacity 0.3s;
}
body.vyroba main.homepage section.solutions .solution .bottom .label {
  position: static;
}
body.vyroba main.homepage section.solutions .solution.dimmed {
  opacity: 0.45;
}
body.vyroba main.homepage section.order-design {
  background-color: var(--black);
  color: var(--white);
  padding: 10vh 0 40vh;
  position: relative;
  overflow: hidden;
}
body.vyroba main.homepage section.order-design .button-holder {
  margin-top: 40px;
}
body.vyroba main.homepage section.order-design .btn {
  color: var(--black);
  background-color: var(--white);
}
body.vyroba main.homepage section.order-design .btn:hover {
  background-color: var(--blue);
}
body.vyroba main.homepage section.order-design #sketch-holder {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
}
body.vyroba main.homepage section.order-design #sketch-holder .p5Canvas {
  position: absolute;
  z-index: 1;
  cursor: auto;
}
body.vyroba main.homepage section.order-design .order-design-holder {
  position: relative;
  z-index: 1;
}
body.vyroba main.homepage section.boxes {
  padding: 160px 0 80px;
  overflow-x: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;
}
body.vyroba main.homepage section.boxes::-webkit-scrollbar {
  display: none;
}
body.vyroba main.homepage section.boxes .overflow-x {
  width: 100%;
  min-width: 600px;
}
body.vyroba main.homepage section.boxes .box {
  border-radius: var(--radius-big);
  background-color: var(--white);
  padding: 20px;
  height: 100%;
  font-size: calc(var(--font-size) * 21);
  background-repeat: no-repeat;
}
body.vyroba main.homepage section.boxes .box.box01 {
  background-image: url("../img/box01.png");
  background-position: top -150px right -150px;
  background-size: 420px;
}
body.vyroba main.homepage section.boxes .box.box02 {
  background-image: url("../img/box02.png");
  background-position: top -70px right -60px;
  background-size: 500px;
}
body.vyroba main.homepage section.boxes .box .inner {
  padding-top: 240px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
body.vyroba main.homepage section.boxes .box .title {
  font-size: calc(var(--font-size) * 30);
  line-height: 1;
  margin-bottom: 20px;
  margin-top: auto;
}
body.vyroba main.homepage section.boxes .box .text {
  margin-bottom: auto;
}
body.vyroba main.homepage section.boxes .box .btn-holder {
  margin-top: 20px;
}
body.vyroba main.homepage section.articles {
  padding: 80px 0 160px;
}
body.vyroba main.homepage section.articles .row {
  height: 100% !important;
}
body.vyroba main.homepage section.articles .title {
  font-weight: var(--font-semibold);
  margin: 0 0 20px;
}
body.vyroba main.homepage section.articles .row-button {
  margin-top: 20px;
}
body.vyroba .end-section {
  background-color: var(--orange);
}
body.vyroba .end-section .end-section-inner {
  background-color: var(--real-white);
  padding-top: 60px;
}
body.vyroba #footer {
  background-color: var(--orange);
  color: var(--real-white);
}
body.vyroba #footer a {
  color: var(--real-white);
}
body.vyroba #footer .big-logo svg {
  fill: var(--real-white);
}
body.vyroba #footer .copyright a::after {
  background-color: var(--real-white);
}
body.vyroba #footer .newsletter .newsletter-form .input-holder::after {
  border-bottom-color: var(--real-white);
}
body.vyroba #footer .newsletter .newsletter-form .input-holder input {
  color: var(--real-white);
}
body.vyroba #footer .newsletter .newsletter-form .input-holder input::placeholder {
  color: var(--real-white);
}
body.vyroba #footer .newsletter .newsletter-form .input-holder input + label {
  background-color: var(--real-white);
}
body.vyroba #footer .btn {
  background-color: var(--real-white);
  color: var(--orange);
}
body.vyroba #footer .btn.btn-arrow::after {
  background-image: url("../img/icons/arrow-orange.svg");
}
body.vyroba #footer .btn.btn-send::after {
  background-image: url("../img/icons/send-orange.svg");
}
body.vyroba section.navigation-menu {
  background-color: var(--real-white);
  position: fixed;
  z-index: 5;
  top: -78px;
  left: 0;
  width: 100%;
  transition: top 0.5s;
  margin-bottom: 20px;
}
body.vyroba section.navigation-menu .navigation-submenu {
  border-bottom: 2px solid var(--orange);
  position: relative;
}
body.vyroba section.navigation-menu .navigation-submenu .links {
  white-space: nowrap;
  overflow: auto;
  padding: 3px 0;
}
body.vyroba section.navigation-menu .navigation-submenu .links a {
  color: var(--black);
  padding: 5px 0;
  margin-right: 30px;
  display: inline-block;
  transition: font-weight 0.3s;
}
body.vyroba section.navigation-menu .navigation-submenu .links a:hover, body.vyroba section.navigation-menu .navigation-submenu .links a.active {
  font-weight: var(--font-semibold);
}
body.vyroba section.navigation-menu .navigation-submenu .links a:last-child {
  margin-right: 130px;
}
body.vyroba section.navigation-menu .navigation-submenu .btn {
  background-color: var(--black);
  color: var(--white);
  position: absolute;
  right: 0;
  top: 0;
  font-weight: var(--font-semibold);
  transition: background 0.3s;
}
body.vyroba section.navigation-menu .navigation-submenu .btn:hover {
  background-color: var(--orange);
}
body.vyroba main.products {
  padding-top: 122px;
}
body.vyroba main.products section.products .end-section-inner {
  padding-bottom: 120px;
}
body.vyroba main.products section.products .products-part {
  padding: 60px 0 0;
}
body.vyroba main.products section.products .part-title {
  padding: 80px 30px 10px;
  margin: 0 -30px -112px;
  background-color: var(--real-white);
  z-index: 2;
  height: 120px;
}
body.vyroba main.products section.products .oversize-title {
  font-weight: var(--font-semibold);
}
body.vyroba main.products section.products .products-list {
  padding-top: 112px;
}
body.vyroba main.articles {
  padding: 18px 0 0;
}
body.vyroba main.articles section.intro {
  height: auto;
  min-height: 100vh;
}
body.vyroba main.articles section.intro #carousel-vyroba {
  height: auto;
}
body.vyroba main.articles section.intro #carousel-vyroba .left .title {
  margin-bottom: 30px;
}
body.vyroba main.articles section.intro #carousel-vyroba .left .tags-holder {
  height: 200px;
}
body.vyroba main.articles section.articles .pagination {
  padding-bottom: 50px;
}
body.vyroba main.articles section.articles #filter {
  margin-top: 10px;
}
body.vyroba main.articles section.articles .project-holder {
  opacity: 0;
  transition: opacity 0.3s;
}
body.vyroba main.articles section.articles .project-holder.visible {
  opacity: 1;
}
body.vyroba main.articles section.articles .project-holder.hidden {
  display: none;
}
body.vyroba main.materials {
  overflow: clip;
}
body.vyroba main.materials .material {
  border-bottom: 1px solid var(--light-gray);
}
body.vyroba main.materials .material:first-of-type {
  border-top: 1px solid var(--light-gray);
}
body.vyroba main.materials .material .accordion-header {
  color: var(--black);
}
body.vyroba main.materials .material .accordion-header::before {
  display: none;
}
body.vyroba main.materials .material .accordion-header .image {
  width: 50px;
  height: 50px;
  background-color: transparent;
  border: 0;
  padding: 0;
  pointer-events: none;
  position: relative;
}
body.vyroba main.materials .material .accordion-header .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  overflow: hidden;
}
body.vyroba main.materials .material .accordion-header .image .plus {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-image: url("../img/icons/plus-in-circle.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  position: absolute;
  left: 66%;
  top: 66%;
  font-size: 0;
  opacity: 0;
  transition: opacity 0.3s;
}
body.vyroba main.materials .material .accordion-header .title {
  line-height: 1.2;
  display: flex;
  height: 100%;
  align-items: center;
}
body.vyroba main.materials .material .accordion-header .grammage {
  font-size: calc(var(--font-size) * 18);
  line-height: 1.1;
  display: flex;
  height: 100%;
  align-items: center;
}
body.vyroba main.materials .material .accordion-content .middle-column {
  order: 3;
}
body.vyroba main.materials .material .accordion-content .image {
  width: 100%;
  padding: 100% 0 0;
  position: relative;
  display: block;
  margin: 20px 0;
  border-radius: 0;
  border: 0;
  background-color: transparent;
  display: none;
}
body.vyroba main.materials .material .accordion-content .image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}
body.vyroba main.materials .material .accordion-content .image .plus {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-image: url("../img/icons/plus-in-circle.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  position: absolute;
  left: 66%;
  top: 66%;
  font-size: 0;
  display: none;
}
body.vyroba main.materials .material .accordion-content .text p {
  margin: 0 0 30px;
}
body.vyroba main.materials .material .accordion-content .text .sub-title {
  font-weight: var(--font-semibold);
  margin: 30px 0 10px;
}
body.vyroba main.materials .material .accordion-content .text ul {
  list-style-type: "●";
  padding: 0 0 0 20px;
}
body.vyroba main.materials .material .accordion-content .text ul li {
  padding-left: 20px;
  margin: 10px 0;
}
body.vyroba main.materials .material .accordion-content .right-column {
  margin: 40px 0 20px;
}
body.vyroba main.materials .material .accordion-content .right-column .grammage {
  display: none;
}
body.vyroba main.materials .material .accordion-content .right-column .aside {
  font-size: calc(var(--font-size) * 21);
  display: flex;
  gap: 20px;
}
body.vyroba main.materials .material .accordion-content .right-column .aside .part {
  width: 50%;
}
body.vyroba main.materials .material .accordion-content .right-column .aside .sub-title {
  font-weight: var(--font-semibold);
}
body.vyroba main.materials .material .accordion-content .right-column .aside ul {
  padding: 0 0 30px 7px;
}
body.vyroba main.materials .material .accordion-content .right-column .aside ul.positive {
  list-style-type: "+";
}
body.vyroba main.materials .material .accordion-content .right-column .aside ul.warning {
  list-style-type: "–";
}
body.vyroba main.materials .material .accordion-content .right-column .aside ul li {
  padding-left: 5px;
  margin: 5px 0;
}
body.vyroba main.materials .material.active .accordion-header .image {
  pointer-events: auto;
}
body.vyroba main.materials .material.active .accordion-header .image .plus {
  opacity: 1;
}

.pagination a {
  font-size: calc(var(--font-size) * 24);
  margin-right: 5px;
  color: var(--dark-gray);
}
.pagination a.active, .pagination a:hover {
  color: var(--black);
}

.filter-holder {
  position: sticky;
  top: 78px;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 50px;
}

#filter {
  background-color: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  font-weight: var(--font-semibold);
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}
#filter .filter-button {
  display: inline-block;
  font-size: calc(var(--font-size) * 18);
  text-transform: uppercase;
  vertical-align: top;
  border: 0;
  background-color: transparent;
  padding: 5px;
  flex-grow: 1;
  cursor: pointer;
  color: var(--dark-gray);
}
#filter .filter-button:first-child {
  padding-left: 10px;
}
#filter .filter-button:last-child {
  padding-right: 10px;
}
#filter .filter-button.active, #filter .filter-button:hover {
  color: var(--black);
}

body.top-notice-exists main {
  padding-top: 118px;
}

body.top-notice-visible:not(.footer-showing) #top-notice {
  height: 40px;
}
body.top-notice-visible:not(.footer-showing) #header .main-menu .panel {
  padding-top: 60px;
}

body.navigation-menu-visible:not(.footer-showing) #navigation-menu {
  top: 78px;
}

main.article {
  padding: 78px 0 40px;
  margin-bottom: 0 !important;
}
main.article .about-article .breadcrumbs {
  font-size: calc(var(--font-size) * 18);
  font-weight: var(--font-semibold);
}
main.article .about-article .breadcrumbs a {
  color: var(--black);
}
main.article .about-article .info {
  margin-top: 10px;
}
main.article .about-article .info td {
  padding: 0;
}
main.article .about-article .info td:first-child {
  font-size: calc(var(--font-size) * 18);
  text-transform: uppercase;
  font-weight: var(--font-semibold);
  padding-right: 40px;
}
main.article section.intro .background {
  height: 70vh;
  overflow: hidden;
}
main.article section.intro .background .image {
  background-image: url("../img/dummy02.jpg");
  background-size: cover;
  background-position: center;
  height: 100%;
  border-radius: 0;
  padding: 0;
}
main.article section.intro .text {
  padding: 30px 0;
}
main.article section.intro .title {
  font-size: calc(var(--font-size) * 54);
  line-height: 1;
  margin-bottom: 30px;
}
main.article .image {
  border-radius: var(--radius-big);
  overflow: hidden;
  padding-top: 72.5%;
  position: relative;
  margin-bottom: 30px;
}
main.article .image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
main.article section.content .gallery .row {
  white-space: nowrap;
  overflow-x: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;
  display: block;
  font-size: 0;
  margin: 0 -30px;
  padding: 0 15px;
}
main.article section.content .gallery .row::-webkit-scrollbar {
  display: none;
}
main.article section.content .gallery .row .gallery-holder {
  display: inline-block;
  font-size: calc(var(--font-size) * 30);
}
main.article section.content .title {
  font-size: calc(var(--font-size) * 36);
  font-weight: var(--font-semibold);
  margin-bottom: 20px;
  line-height: 1;
}
main.article section.content h3 {
  font-weight: var(--font-semibold);
  margin-top: 20px;
}
main.article section.content .hero {
  font-size: calc(var(--font-size) * 36);
  line-height: 1.1;
  text-align: center;
}
main.article section.content .last-about-article-holder {
  order: 2;
  margin: 60px 0 0;
}
main.article section.content .section {
  margin: 40px 0;
}
main.article section.content .btn-share {
  overflow: hidden;
  margin-top: 40px;
}
main.article section.content .btn-share .nav {
  padding-top: 3px;
}
main.article section.content .btn-share .nav .link {
  display: block;
  padding: 3px 0;
  color: var(--black);
  position: relative;
}
main.article section.content .btn-share .nav .link .alert {
  display: none;
  position: absolute;
  right: -10px;
  bottom: 25px;
  background-color: var(--black);
  color: var(--white);
  border-radius: var(--radius);
  font-size: calc(var(--font-size) * 18);
  padding: 5px 10px;
  max-width: 140px;
  width: max-content;
  opacity: 0;
  transition: opacity 1s;
}
main.article section.content .btn-share .nav .link.alert-displayed .alert {
  display: block;
}
main.article section.content .btn-share .nav .link.alert-visible .alert {
  opacity: 1;
  transition-duration: 0.3s;
}
main.article section.content .btn-share:hover .nav * {
  color: var(--white);
}
main.article section.content .btn-share:not(.opened) {
  height: 38px !important;
}
main.article section.more-articles .articles-slider {
  margin-top: 120px;
}
main.article section.more-articles .title-holder {
  width: 200px;
  display: inline-block;
  font-size: calc(var(--font-size) * 63);
  line-height: 1;
}

@media (min-width: 600px) {
  body.vyroba #header .main-menu .panel .cards .text {
    column-count: 3;
  }
}
@media (max-width: 799px) {
  .solutions-slider, .more-items-slider {
    margin: 0 0 0 -10px;
  }
  .solutions-slider .row, .more-items-slider .row {
    white-space: nowrap;
    overflow-x: auto;
    display: block;
    width: calc(100% + 40px);
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;
  }
  .solutions-slider .row::-webkit-scrollbar, .more-items-slider .row::-webkit-scrollbar {
    display: none;
  }
  .solutions-slider .solution-title, .solutions-slider .more-items-title, .more-items-slider .solution-title, .more-items-slider .more-items-title {
    display: inline-block;
    width: 270px;
    vertical-align: top;
  }
  .solutions-slider .solution-title .title, .solutions-slider .more-items-title .title, .more-items-slider .solution-title .title, .more-items-slider .more-items-title .title {
    padding-left: 10px;
  }
  .solutions-slider .solution-holder, .solutions-slider .item-holder, .more-items-slider .solution-holder, .more-items-slider .item-holder {
    display: inline-block;
    margin: 40px 0 0;
    width: 300px;
  }
  .solutions-slider .solution-holder.solution-holder-fake, .solutions-slider .item-holder.solution-holder-fake, .more-items-slider .solution-holder.solution-holder-fake, .more-items-slider .item-holder.solution-holder-fake {
    display: none;
  }
  .articles-slider {
    margin: 0 0 0 -10px;
  }
  .articles-slider .row {
    white-space: nowrap;
    overflow-x: auto;
    display: block;
    width: calc(100% + 40px);
    padding: 0 10px;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;
    font-size: 0;
  }
  .articles-slider .row::-webkit-scrollbar {
    display: none;
  }
  .articles-slider .article-holder {
    display: inline-block;
    width: 300px;
    font-size: calc(var(--font-size) * 30);
    vertical-align: top;
  }
  .products-list .row {
    font-size: 0;
    white-space: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: block;
    margin: 0 -30px;
    padding: 0 15px;
  }
  .products-list .row .col-md-4-8 {
    width: 300px;
    display: inline-block;
    font-size: calc(var(--font-size) * 30);
  }
  .products-list .material .row {
    font-size: calc(var(--font-size) * 30);
    display: flex;
    white-space: normal;
  }
  .products-list .material .row .col-md-4-8 {
    width: 100%;
  }
  body.vyroba section.navigation-menu .navigation-submenu .links {
    white-space: wrap;
  }
  body.vyroba section.navigation-menu .navigation-submenu .links a {
    display: none;
  }
  body.vyroba section.navigation-menu .navigation-submenu .links a.active {
    display: block;
  }
  body.vyroba section.navigation-menu .navigation-submenu .expres-btn {
    position: static;
    margin: 5px 0 15px;
    display: none;
  }
  body.vyroba section.navigation-menu .navigation-submenu .open-menu {
    font-size: 0;
    padding: 0;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 5px;
    right: 0;
    background-color: transparent;
    border: 0px;
    cursor: pointer;
  }
  body.vyroba section.navigation-menu .navigation-submenu .open-menu::after {
    content: "→";
    font-size: calc(var(--font-size) * 24);
    transform: rotate(90deg);
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 6px;
    line-height: 20px;
  }
  body.vyroba section.navigation-menu.active .navigation-submenu .links a {
    display: block;
  }
  body.vyroba section.navigation-menu.active .navigation-submenu .expres-btn {
    display: inline-block;
  }
  body.vyroba section.navigation-menu.active .navigation-submenu .open-menu {
    transform: rotate(-180deg);
  }
  main.article section.content .gallery .row .gallery-holder {
    width: 300px;
  }
}
@media (min-width: 800px) {
  body.vyroba main {
    overflow: clip;
  }
  body.vyroba main .item .top .text .btn {
    position: relative;
    padding: 9px 24px 9px 48px;
    background-color: var(--light-gray);
    font-size: calc(var(--font-size) * 18);
  }
  body.vyroba main .item .top .text .btn::after {
    background-image: url("../img/icons/arrow-black.svg");
  }
  body.vyroba main .item .top .text .btn:hover {
    background-color: var(--orange);
  }
  body.vyroba main .item .top .text .btn:hover::after {
    background-image: url("../img/icons/arrow-white.svg");
  }
  body.vyroba main .item:hover .top .text {
    margin-bottom: 0;
    background-color: var(--white);
  }
  body.vyroba main .item:hover .top .text::before {
    opacity: 1;
  }
  body.vyroba main .item:hover .bottom .label {
    top: -40px;
  }
  body.vyroba main #carousel-vyroba {
    height: calc(100vh - 200px - 5vw);
  }
  body.vyroba main #carousel-vyroba .row {
    flex-direction: row;
  }
  body.vyroba main #carousel-vyroba .right {
    min-height: 440px;
    height: calc(100vh - 200px - 5vw);
  }
  body.vyroba main #carousel-vyroba .left {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  body.vyroba main #carousel-vyroba .left .title {
    margin: auto 0;
    font-size: calc(var(--font-size) * 99);
  }
  body.vyroba main #carousel-vyroba .left .tags-holder {
    margin-bottom: auto;
  }
  body.vyroba main #carousel-vyroba .left .navigation {
    margin-top: auto;
    display: flex;
  }
  body.vyroba main #carousel-vyroba .left .navigation .navigation-button {
    width: 70px;
    height: 50.75px;
  }
  body.vyroba main #open-mobile-sub-menu {
    display: none;
  }
  body.vyroba main section.bestsellers {
    padding: 80px 0 80px;
  }
  body.vyroba main section.bestsellers .buttons {
    display: block;
  }
  body.vyroba main section.bestsellers .left-side {
    padding-left: 55px;
    width: 360px;
  }
  body.vyroba main section.bestsellers .products {
    padding-right: 30px;
  }
  body.vyroba main section.bestsellers .products .item {
    width: 540px;
  }
  body.vyroba main section.contact .container {
    height: auto;
  }
  body.vyroba main section.contact .end-section-inner {
    position: relative;
    padding-top: 40px;
  }
  body.vyroba main section.contact .right-side {
    position: relative;
    top: 0;
  }
  body.vyroba main section.contact .title.hero {
    z-index: 3;
    position: static;
    font-size: calc(var(--font-size) * 54);
    line-height: 1;
  }
  body.vyroba main section.contact .sliders-contact-holder {
    display: block;
    position: absolute;
    top: 0;
    left: 45px;
    width: 60%;
    height: 100%;
  }
  body.vyroba main section.contact .sliders-contact-holder::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 40%, rgba(255, 255, 255, 0) 100%);
    display: block;
    content: "";
    pointer-events: none;
  }
  body.vyroba main section.contact .sliders-contact {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    position: relative;
  }
  body.vyroba main section.contact .sliders-contact .slider {
    width: 33%;
    padding: 0 10px;
    height: fit-content;
  }
  body.vyroba main section.contact .sliders-contact .slider .image {
    border-radius: var(--radius-big);
    overflow: hidden;
    padding-top: 72.5%;
    position: relative;
    width: 100%;
    margin-bottom: 20px;
  }
  body.vyroba main section.contact .sliders-contact .slider .image img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
    object-position: center;
  }
  body.vyroba main section.contact .sliders-contact .slider#contact-slider01 {
    animation: verticalSlider 20s linear infinite;
  }
  body.vyroba main section.contact .sliders-contact .slider#contact-slider02 {
    animation: verticalSlider 25s linear infinite reverse;
  }
  body.vyroba main section.contact .sliders-contact .slider#contact-slider03 {
    animation: verticalSlider 35s linear infinite;
  }
  @keyframes verticalSlider {
    0% {
      transform: translateY(-50%);
    }
    100% {
      transform: translateY(0%);
    }
  }
  body.vyroba main.homepage section.intro .logos .logo-title {
    width: 14.25%;
  }
  body.vyroba main.homepage section.intro .logos .logo-slideshow {
    width: 14.25%;
  }
  body.vyroba main.homepage section.intro .logos .logo-slideshow:nth-child(4), body.vyroba main.homepage section.intro .logos .logo-slideshow:nth-child(5), body.vyroba main.homepage section.intro .logos .logo-slideshow:nth-child(6), body.vyroba main.homepage section.intro .logos .logo-slideshow:nth-child(7) {
    display: inline-block;
  }
  body.vyroba main.homepage section.services {
    padding: 80px 0 0;
  }
  body.vyroba main.homepage section.services .box {
    height: 100%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
  }
  body.vyroba main.homepage section.services .box .text {
    margin-bottom: auto;
  }
  body.vyroba main.homepage section.solutions {
    margin: 80px 0 50px;
  }
  body.vyroba main.homepage section.solutions .title {
    margin: 0;
  }
  body.vyroba main.homepage section.order-design .hero {
    max-width: 800px;
    margin: 0 auto;
  }
  body.vyroba main.homepage section.boxes .box .title {
    font-size: calc(var(--font-size) * 54);
  }
  body.vyroba main.homepage section.articles .row .article .top {
    opacity: 1;
  }
  body.vyroba main.homepage section.articles .row:hover .article .top {
    opacity: 0.45;
  }
  body.vyroba main.articles .title-container {
    margin-top: 320px;
    position: sticky;
    top: 60px;
    background-color: var(--real-white);
    z-index: 1;
    padding-top: 15px;
    padding-bottom: 15px;
    transition: top 0.3s ease-in-out;
  }
  body.vyroba main.articles .title-container .title {
    font-weight: var(--font-semibold);
    position: relative;
    height: 40px;
    line-height: 40px;
  }
  body.vyroba main.articles .title-container .title .inner {
    display: flex;
    align-items: end;
    position: absolute;
    bottom: 10px;
    left: 0;
    line-height: 1em;
  }
  body.vyroba main.articles .filter-holder {
    margin: 0 0 40px;
  }
  body.vyroba main.articles .article {
    margin-bottom: 100px;
  }
  body.vyroba main.articles #carousel-vyroba .left .button-holder {
    margin-bottom: 40px;
  }
  body.vyroba main.materials .material .accordion-header {
    height: 100px;
    transition: height 0.3s;
  }
  body.vyroba main.materials .material .accordion-header .title {
    transition: font-size 0.3s;
  }
  body.vyroba main.materials .material .accordion-header .image {
    display: none;
  }
  body.vyroba main.materials .material .accordion-header .grammage {
    display: none;
  }
  body.vyroba main.materials .material .accordion-header .row {
    height: 100%;
  }
  body.vyroba main.materials .material .accordion-content {
    overflow: visible;
  }
  body.vyroba main.materials .material .accordion-content .middle-column {
    order: 1;
  }
  body.vyroba main.materials .material .accordion-content .last-column {
    order: 2;
  }
  body.vyroba main.materials .material .accordion-content .text, body.vyroba main.materials .material .accordion-content .aside {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s 0s;
  }
  body.vyroba main.materials .material .accordion-content .right-column {
    pointer-events: none;
    margin-top: 0;
  }
  body.vyroba main.materials .material .accordion-content .right-column .aside {
    margin-top: 0;
    display: block;
  }
  body.vyroba main.materials .material .accordion-content .right-column .aside .part {
    width: 100%;
  }
  body.vyroba main.materials .material .accordion-content .right-column .grammage {
    display: flex;
    align-items: center;
    height: 80px;
    margin-top: -90px;
    transition: height 0.3s, margin 0.3s;
  }
  body.vyroba main.materials .material .accordion-content .image {
    width: 80px;
    padding-top: 80px;
    margin-top: -90px;
    pointer-events: none;
    display: block;
    transition: width 0.3s, padding 0.3s, margin 0.3s;
  }
  body.vyroba main.materials .material .accordion-content .image .plus {
    opacity: 0;
    display: block;
    transition: opacity 0.3s, transform 0.3s;
    cursor: pointer;
  }
  body.vyroba main.materials .material .accordion-content .image .plus:hover {
    transform: rotate(180deg);
  }
  body.vyroba main.materials .material:hover .accordion-header, body.vyroba main.materials .material.active .accordion-header {
    height: 180px;
  }
  body.vyroba main.materials .material:hover .accordion-header .title, body.vyroba main.materials .material.active .accordion-header .title {
    font-size: calc(var(--font-size) * 54);
  }
  body.vyroba main.materials .material:hover .accordion-content .image, body.vyroba main.materials .material.active .accordion-content .image {
    width: 140px;
    padding-top: 140px;
    margin-top: -160px;
  }
  body.vyroba main.materials .material:hover .accordion-content .grammage, body.vyroba main.materials .material.active .accordion-content .grammage {
    height: 140px;
    margin-top: -160px;
    margin-bottom: 20px;
  }
  body.vyroba main.materials .material.active .text, body.vyroba main.materials .material.active .aside {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.2s;
  }
  body.vyroba main.materials .material.active .image, body.vyroba main.materials .material.active .right-column {
    position: sticky;
    top: 140px;
  }
  body.vyroba main.materials .material.active .image .plus {
    pointer-events: auto;
    opacity: 1;
  }
  main.article {
    padding-bottom: 0;
  }
  main.article section.intro {
    height: calc(100vh - 78px);
    display: flex;
    flex-direction: column;
  }
  main.article section.intro .background {
    height: 100%;
  }
  main.article section.intro .text {
    padding: 40px 0;
  }
  main.article section.intro .text .title {
    margin: 0;
  }
  main.article section.content {
    padding: 80px 0;
  }
  main.article section.content .gallery .row {
    white-space: normal;
  }
  main.article section.content section.section {
    margin: 80px 0;
  }
  main.article section.content .hero-holder .row {
    height: 100%;
  }
  main.article section.content .hero-holder .row > * {
    height: 100%;
  }
  main.article section.content .hero {
    text-align: left;
    height: 100%;
    display: flex;
    padding-bottom: 30px;
    align-items: center;
  }
  main.article section.content .last-about-article-holder {
    order: 0;
  }
  main.article section.more-articles .title-holder {
    width: 33.33333%;
  }
  main.article section.more-articles .articles-slider {
    margin-bottom: 80px;
  }
}
body.footer-showing.vyroba main.articles .title-container {
  top: 0;
}

@media (min-width: 1200px) {
  body.vyroba .item {
    margin-bottom: 80px;
  }
  body.vyroba #header #menu-button {
    display: none;
  }
  body.vyroba #header .main-menu {
    opacity: 1;
    pointer-events: none;
  }
  body.vyroba #header .main-menu .overlay {
    pointer-events: none;
    display: block;
  }
  body.vyroba #header .main-menu .panel {
    box-shadow: none;
    padding: 20px 40px 40px;
    height: auto;
    width: 1200px;
  }
  body.vyroba #header .main-menu .panel .navigation {
    margin: 0 auto 30px;
    background-color: var(--white);
    overflow: hidden;
    height: auto;
    padding-top: 0;
    width: auto;
  }
  body.vyroba #header .main-menu .panel .navigation .navigation-holder {
    pointer-events: auto;
  }
  body.vyroba #header .main-menu .panel .navigation a {
    display: inline-block;
    width: auto;
  }
  body.vyroba #header .main-menu .panel .cards {
    height: 520px;
    overflow: visible;
  }
  body.vyroba #header .main-menu .panel .cards .card {
    height: 100%;
    overflow: visible;
  }
  body.vyroba #header .main-menu .panel .cards .card .navigation-submenu {
    border-bottom: 2px solid var(--orange);
    margin-bottom: 30px;
    text-align: left;
  }
  body.vyroba #header .main-menu .panel .cards .card .navigation-submenu a {
    display: inline-block;
    width: auto;
    text-transform: none;
    padding: 5px 0;
    margin-right: 20px;
    margin-bottom: 10px;
    font-weight: var(--font-regular);
    transition: font-weight 0.3s;
    vertical-align: top;
  }
  body.vyroba #header .main-menu .panel .cards .card .navigation-submenu a::before {
    display: none;
  }
  body.vyroba #header .main-menu .panel .cards .card .navigation-submenu a:hover, body.vyroba #header .main-menu .panel .cards .card .navigation-submenu a.active {
    font-weight: var(--font-semibold);
  }
  body.vyroba #header .main-menu .panel .cards .card .navigation-submenu .btn {
    float: right;
    margin-right: 0;
    background-color: var(--black);
    color: var(--white);
    text-transform: uppercase;
    padding: 5px 15px;
    font-size: calc(var(--font-size) * 14);
    font-weight: var(--font-semibold);
    transition: background 0.3s;
  }
  body.vyroba #header .main-menu .panel .cards .card .navigation-submenu .btn:hover {
    background-color: var(--orange);
  }
  body.vyroba #header .main-menu .panel .cards .card .last-row .title {
    color: var(--black);
    text-align: left;
    font-size: calc(var(--font-size) * 126);
    margin-top: 40px;
    white-space: nowrap;
  }
  body.vyroba #header .main-menu .panel .cards .card .last-row .btn {
    width: auto;
    margin-top: 90px;
    padding: 9px 24px 9px 48px;
  }
  body.vyroba #header .main-menu .panel .cards .card .last-row .btn::before {
    display: none;
  }
  body.vyroba #header .main-menu .panel .cards .card .last-row .btn:hover {
    color: var(--white);
  }
  body.vyroba #header .main-menu .panel .cards .card[data-type=articles] {
    display: flex;
    flex-direction: column;
  }
  body.vyroba #header .main-menu .panel .cards .card[data-type=articles] .button-holder {
    margin-top: auto;
  }
  body.vyroba #header .main-menu .panel .cards .image {
    height: 325px;
    width: 100%;
    display: block;
  }
  body.vyroba #header .main-menu .panel .cards .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  body.vyroba #header .main-menu .panel .cards .infinite-row {
    display: flex;
    width: 120%;
  }
  body.vyroba #header .main-menu .panel .cards .infinite-row .article-holder {
    width: 33.33333%;
  }
  body.vyroba #header .main-menu .panel .cards .infinite-row button.article {
    display: block;
    border: 0;
    padding: 10px 15px;
    background-color: transparent;
    vertical-align: top;
    cursor: pointer;
    margin-bottom: 0;
  }
  body.vyroba #header .main-menu .panel .cards .infinite-row button.article .top {
    margin-bottom: 0;
  }
  body.vyroba #header .main-menu .panel .cards .infinite-row button.article:hover .top {
    opacity: 0.45 !important;
  }
  body.vyroba.menu-opened #header .main-menu {
    pointer-events: none;
  }
  body.vyroba.menu-opened #header .main-menu .panel {
    background-color: var(--white);
    pointer-events: auto;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.45);
    transition-duration: 0.5s 2s;
    width: 1200px;
  }
  body.vyroba.menu-opened #header .main-menu .panel .navigation {
    height: auto;
    background-color: var(--real-white);
  }
  body.vyroba.menu-opened #header .main-menu .panel .cards {
    display: block;
  }
  body.vyroba.menu-opened #header .main-menu[data-active=products] .panel .navigation a[data-type=products]::before, body.vyroba.menu-opened #header .main-menu[data-active=materials] .panel .navigation a[data-type=materials]::before, body.vyroba.menu-opened #header .main-menu[data-active=articles] .panel .navigation a[data-type=articles]::before {
    width: 120%;
    height: 140%;
    left: -10%;
    top: -20%;
    opacity: 1;
    transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s, opacity 0.5s;
  }
  body.vyroba main section.contact .sliders-contact-holder {
    width: 70%;
  }
  body.vyroba main section.contact .sliders-contact-holder::after {
    height: 500px;
  }
  body.vyroba main section.contact .title.hero {
    font-size: calc(var(--font-size) * 99);
  }
  body.vyroba main.homepage .item {
    margin-bottom: 80px;
  }
  body.vyroba main.homepage section.bestsellers {
    padding: 120px 0 50px;
  }
  body.vyroba main.homepage section.services {
    padding: 300px 0 100px;
  }
  body.vyroba main.homepage section.solutions {
    margin: 200px 0;
  }
  body.vyroba main.homepage section.solutions .title {
    font-size: calc(var(--font-size) * 99);
  }
  body.vyroba main.homepage section.solutions .item {
    margin-bottom: 60px;
  }
  body.vyroba main.homepage section.order-design {
    padding: 20vh 0 40vh;
  }
  body.vyroba main.homepage section.order-design .button-holder {
    margin-top: 80px;
  }
  body.vyroba main.homepage section.boxes {
    padding: 200px 0 0;
  }
  body.vyroba main.homepage section.boxes .box {
    padding: 72.5% 0 0 0;
    position: relative;
  }
  body.vyroba main.homepage section.boxes .box.box01 {
    background-position: top 50% right 240%;
    background-size: 130%;
  }
  body.vyroba main.homepage section.boxes .box.box02 {
    background-position: top -50px right -70px;
    background-size: 100%;
  }
  body.vyroba main.homepage section.boxes .box .inner {
    padding: 30px 50% 30px 30px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  body.vyroba main.homepage section.articles {
    padding: 240px 0 200px;
  }
  body.vyroba main.homepage section.articles .title {
    margin-bottom: 40px;
  }
  body.vyroba main.homepage section.articles .row-button {
    margin-top: 120px;
  }
  body.vyroba main.products {
    padding-top: 122px;
  }
  body.vyroba main.products section.products .part-title {
    height: 120px;
    padding-top: 78px;
    margin-left: 0;
    margin-right: 0;
    position: sticky;
    top: 0;
  }
  body.vyroba main.products section.products .oversize-title .inner {
    display: flex;
    align-items: end;
    position: absolute;
    bottom: 10px;
    left: 0;
  }
  body.vyroba main.products section.products .products-part {
    padding: 400px 0 0;
  }
  body.vyroba main.products section.products .products-part .item .top {
    padding-top: 300px;
  }
  body.vyroba main.products section.bestsellers {
    background-color: transparent;
    padding: 0 55px;
  }
  body.vyroba main.products section.bestsellers .bestsellers-wrapper {
    background-color: var(--white);
    margin: 0 -55px;
    padding: 140px 0 80px;
  }
  body.vyroba main.materials .material .accordion-header .grammage {
    font-size: 0;
    position: relative;
    display: block;
  }
  body.vyroba main.materials .material .accordion-header .grammage::after {
    width: 20px;
    height: 20px;
    content: "";
    display: block;
    background-image: url("../img/icons/plus-black.svg");
    position: absolute;
    right: 0;
    top: calc(50% - 10px);
    transition: top 0.3s, width 0.3s, height 0.3s, transform 0.3s;
  }
  body.vyroba main.materials .material:hover .accordion-header, body.vyroba main.materials .material.active .accordion-header {
    height: 300px;
  }
  body.vyroba main.materials .material:hover .accordion-header .title, body.vyroba main.materials .material.active .accordion-header .title {
    font-size: calc(var(--font-size) * 126);
    line-height: 1em;
  }
  body.vyroba main.materials .material:hover .accordion-header .grammage::after, body.vyroba main.materials .material.active .accordion-header .grammage::after {
    width: 50px;
    height: 50px;
    top: calc(50% - 25px);
  }
  body.vyroba main.materials .material:hover .accordion-content .image, body.vyroba main.materials .material.active .accordion-content .image {
    width: 240px;
    padding-top: 240px;
    margin-top: -270px;
  }
  body.vyroba main.materials .material:hover .accordion-content .image .plus, body.vyroba main.materials .material.active .accordion-content .image .plus {
    left: 75%;
    top: 75%;
  }
  body.vyroba main.materials .material:hover .accordion-content .grammage, body.vyroba main.materials .material.active .accordion-content .grammage {
    height: 240px;
    margin-top: -270px;
    margin-bottom: 0;
  }
  body.vyroba main.materials .material:hover .accordion-content .text, body.vyroba main.materials .material.active .accordion-content .text {
    margin-top: -30px;
  }
  body.vyroba main.materials .material.active .accordion-header .grammage::after {
    transform: rotate(45deg);
  }
  main.article section.intro .text {
    padding: 30px 0;
  }
  main.article section.intro .text .title {
    font-size: calc(var(--font-size) * 99);
  }
  main.article section.intro .text .about-article {
    margin-top: 15px;
  }
  main.article section.content {
    padding-bottom: 0;
  }
  main.article section.content .title {
    font-size: calc(var(--font-size) * 54);
    margin-bottom: 30px;
  }
  main.article section.more-articles .title-holder .title {
    font-size: calc(var(--font-size) * 126);
  }
  main.article section.more-articles .articles-slider {
    margin-top: 300px;
  }
}
body.projekty .end-section {
  background-color: transparent;
}
body.projekty .end-section-inner {
  background: rgb(21, 21, 23);
  background: linear-gradient(180deg, rgba(21, 21, 23, 0) 0%, rgb(21, 21, 23) 20%);
}
body.projekty.footer-showing .end-section {
  background-color: var(--blue);
}
body.projekty .project-grid {
  width: calc(100% + 10px);
  margin: 0 -5px;
}
body.projekty .project-grid .project-holder {
  width: 50%;
}
body.projekty .project-grid .project-holder .project {
  margin: 0 5px 10px;
  padding: 70% 0 0;
  position: relative;
  border: 0;
  width: calc(100% - 10px);
  vertical-align: top;
  background-color: transparent;
}
body.projekty .project-grid .project-holder .project .image {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  width: 100%;
  height: 100%;
  display: block;
  transition: width 0.5s ease-in-out;
  border-radius: var(--radius-big);
  overflow: hidden;
}
body.projekty .project-grid .project-holder .project .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-width: none;
  scale: 1.1;
  translate: 0 0;
  transition: scale 2s, translate 2s;
}
body.projekty .project-grid .project-holder .project .project-cursor-area {
  display: none;
}
body.projekty .project-grid .project-holder:not(.visible) .project .image {
  width: 0%;
  left: 0;
  right: auto;
}
body.projekty .project-grid .project-holder:not(.visible) .project .image img {
  scale: 1;
  translate: 5% 0;
}
body.projekty .project-grid .project-holder.hidden .project {
  display: none;
}
body.projekty .project-grid .stamp {
  position: absolute;
  width: 20px;
  height: 10vw;
  top: 0;
  left: 0;
}
body.projekty .project-grid .stamp02 {
  display: none;
}
body.projekty main.projects section.headline {
  padding: 100px 0 50px;
  min-height: 40vh;
}
body.projekty main.projects section.headline .hero {
  font-size: calc(var(--font-size) * 54);
  position: sticky;
  top: 160px;
}
body.projekty main.projects section.projects .project-grid {
  margin-bottom: 40px;
}

@media (min-width: 800px) {
  body.projekty .project-grid {
    width: calc(100% + 30px);
    margin: 0 -15px;
  }
  body.projekty .project-grid .project-holder {
    width: 33.33333%;
  }
  body.projekty .project-grid .project-holder .project {
    margin: 0 15px 30px;
    width: calc(100% - 30px);
  }
  body.projekty .project-grid .stamp {
    left: 50%;
  }
  body.projekty .filter-holder {
    top: 26px;
    background-color: transparent;
    pointer-events: none;
    z-index: 100;
  }
  body.projekty .filter-holder #filter {
    pointer-events: auto;
    transition: width 1s ease-in-out 0.3s;
    position: relative;
  }
  body.projekty .filter-holder #filter::after {
    background-image: url("/img/icons/plus-black.svg");
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    left: 0;
    top: 0;
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s 0s;
  }
  body.projekty .filter-holder #filter .filter-button {
    transition: opacity 0.3s 0.3s;
  }
  body.projekty:not(.intro-showing) .filter-holder #filter:not(:hover) {
    width: 26px;
    transition-delay: 0s;
  }
  body.projekty:not(.intro-showing) .filter-holder #filter:not(:hover)::after {
    opacity: 1;
    transition-delay: 1s;
  }
  body.projekty:not(.intro-showing) .filter-holder #filter:not(:hover) .filter-button {
    opacity: 0;
    transition-delay: 0s;
  }
}
@media (min-width: 1200px) {
  body.projekty .project-grid .project-holder {
    width: 25%;
  }
  body.projekty .project-grid .project-holder .project .project-cursor-area {
    display: block;
    width: 80%;
    height: 80%;
    position: absolute;
    top: 10%;
    left: 10%;
  }
  body.projekty .project-grid .project-holder .project .project-cursor-area .project-cursor {
    display: block;
    width: 160px;
    height: 160px;
    line-height: 30px;
    padding: 65px 0;
    font-size: calc(var(--font-size) * 36);
    text-align: center;
    color: var(--black);
    position: absolute;
    z-index: 100;
    border-radius: 50%;
    pointer-events: none;
    margin-left: -80px;
    margin-top: -100px;
    white-space: nowrap;
    transition: transform 0.5s, opacity 0.1s 0.4s;
    transform: scale(0.01);
    z-index: 3;
    opacity: 0;
  }
  body.projekty .project-grid .project-holder .project .project-cursor-area .project-cursor::before {
    display: block;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, var(--blue) 50%, rgba(0, 0, 0, 0) 70%);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-name: wiggle;
  }
  body.projekty .project-grid .project-holder .project .project-cursor-area .project-cursor .inner {
    position: relative;
    opacity: 0;
    transition: opacity 0.3s;
  }
  body.projekty .project-grid .project-holder .project .project-cursor-area:hover .project-cursor {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0s, 0s;
  }
  body.projekty .project-grid .project-holder .project .project-cursor-area:hover .project-cursor .inner {
    opacity: 1;
  }
  body.projekty .project-grid .stamp02 {
    display: block;
    left: 0;
  }
  body.projekty main.projects section.headline .hero {
    font-size: calc(var(--font-size) * 99);
    line-height: 1;
  }
}
.offer-menu {
  position: sticky;
  bottom: 0;
  padding: 15px 0 20px;
  background-color: var(--black);
  transition: opacity 0.3s;
  margin-top: -160px;
  height: 190px;
  transition: height 1s, opacity 0.5s;
}
.offer-menu .offer-menu-item {
  border-bottom: 1px solid var(--white-semi);
  color: var(--white-semi);
  padding: 10px 0;
  transition: color 0.3s, opacity 0.3s;
  position: relative;
  font-size: calc(var(--font-size) * 21);
  display: block;
}
.offer-menu .offer-menu-item::before {
  content: "→";
  overflow: hidden;
  width: 0%;
  display: inline-block;
  float: left;
  transition: width 0.3s;
}
.offer-menu .offer-menu-item::after {
  content: "";
  width: 0%;
  height: 1px;
  background-color: var(--white);
  display: block;
  position: absolute;
  right: 0;
  bottom: -1px;
  transition: width 0.8s;
}
.offer-menu .offer-menu-item:hover, .offer-menu .offer-menu-item.active {
  color: var(--white);
}
.offer-menu .offer-menu-item:hover::before, .offer-menu .offer-menu-item.active::before {
  width: 24px;
}
.offer-menu .offer-menu-item:hover::after, .offer-menu .offer-menu-item.active::after {
  width: 100%;
  right: auto;
  left: 0;
}
.offer-menu .back-to-top {
  position: absolute;
  bottom: 27px;
  right: 30px;
  transition: opacity 0.3s;
}

.accordion {
  width: 100%;
}
.accordion .accordion-item .accordion-header {
  width: 100%;
  color: var(--white-semi);
  padding: 5px 0;
  border: none;
  cursor: pointer;
  transition: color 0.3s;
  text-align: left;
  background-color: transparent;
}
.accordion .accordion-item .accordion-header::before {
  content: "→";
  overflow: hidden;
  width: 0%;
  display: inline-block;
  float: left;
  transition: width 0.3s;
}
.accordion .accordion-item .accordion-content {
  overflow: hidden;
  transition: height 0.3s ease;
}
.accordion .accordion-item.active .accordion-header, .accordion .accordion-header:hover {
  color: var(--white);
}
.accordion .accordion-item.active .accordion-header::before, .accordion .accordion-header:hover::before {
  width: 24px;
}
.accordion .accordion-item:not(.active) .accordion-content {
  height: 0px !important;
}

main.offer {
  padding-top: 80px;
}
main.offer[data-section=intro] .offer-menu {
  background-color: transparent;
}
main.offer .offer-section {
  min-height: 100vh;
}
main.offer .offer-section .hero {
  font-size: calc(var(--font-size) * 54);
  line-height: 1.15;
  margin: 40px 0 40px;
}
main.offer .offer-section .tags {
  margin: 40px 0;
}
main.offer .offer-section .tags .tag {
  font-size: calc(var(--font-size) * 18);
  color: var(--white-semi);
  text-transform: uppercase;
  margin: 0 20px 10px 0;
  white-space: nowrap;
  font-weight: var(--font-semibold);
}
main.offer .offer-section .offer-carousel {
  height: fit-content;
  margin: 40px 0 160px;
}
main.offer .offer-section .offer-carousel .carousel-cell {
  width: 80%;
  height: fit-content;
  vertical-align: top;
}
main.offer .offer-section .offer-carousel .image {
  padding-top: 70%;
  position: relative;
  margin-right: 20px;
  border-radius: var(--radius-big);
  overflow: hidden;
}
main.offer .offer-section .offer-carousel .image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
main.offer .offer-section .offer-carousel .flickity-button {
  display: none;
}
main.offer .offer-section .accordion .accordion-content .inner {
  padding: 20px 0 80px;
}
main.offer .offer-section .rotating-text .char {
  transform-origin: bottom;
}
main.offer section.intro .image {
  overflow: hidden;
  border-radius: var(--radius-big) 0 0 var(--radius-big);
  height: 25vh;
}
main.offer section.intro .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
main.offer section.contact .title {
  font-size: calc(var(--font-size) * 54);
  line-height: 1.15;
  margin-bottom: 40px;
  min-height: 140px;
}
main.offer[data-section=intro] .offer-menu .back-to-top {
  opacity: 0;
  pointer-events: none;
}
main.offer[data-section=intro] .offer-menu .offer-menu-item {
  opacity: 1;
  pointer-events: auto;
}
main.offer[data-section=""] .offer-menu {
  opacity: 0;
  pointer-events: none;
}
main.offer:not([data-section=intro]):not([data-section=""]) .offer-menu {
  height: 75px;
}
main.offer:not([data-section=intro]):not([data-section=""]) .offer-menu .offer-menu-item:not([data-target=branding]) {
  position: absolute;
  width: calc(100% - 50px);
  bottom: 20px;
  left: 25px;
}
main.offer .offer-menu .offer-menu-item {
  opacity: 0;
  pointer-events: none;
}
main.offer .offer-menu .offer-menu-item.active {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 800px) {
  .offer-menu {
    background-color: transparent;
    height: auto;
    padding: 40px 0;
    pointer-events: none;
  }
  .offer-menu .offer-menu-item {
    display: block;
    pointer-events: auto;
  }
  .offer-menu .back-to-top {
    display: none;
  }
  main.offer section.intro .image {
    height: calc(100dvh - 120px);
  }
  main.offer section.contact .container {
    height: auto;
  }
  main.offer section.contact .right-side .contact-form {
    margin-bottom: 0;
  }
  main.offer section.contact .title {
    margin-bottom: 120px;
  }
  main.offer section.contact .end-section-inner {
    padding: 40px 0 80px;
  }
  main.offer .offer-menu {
    margin-top: -240px;
  }
  main.offer .offer-menu .offer-menu-item {
    opacity: 1;
    pointer-events: auto;
  }
  main.offer:not([data-section=intro]):not([data-section=""]) .offer-menu {
    height: auto;
  }
  main.offer:not([data-section=intro]):not([data-section=""]) .offer-menu .offer-menu-item {
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    opacity: 1;
    pointer-events: auto;
    width: 100%;
  }
  main.offer:not([data-section=intro]):not([data-section=""]) .offer-menu .offer-menu-item:not([data-target=branding]) {
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    opacity: 1;
    pointer-events: auto;
    width: 100%;
  }
  main.offer[data-section=""] .offer-menu .offer-menu-item {
    pointer-events: none;
  }
  main.offer .offer-section {
    margin-bottom: 120px;
    /*.offer-carousel{
      position: relative;

      .flickity-button{
        display: block;
        position: absolute;
        width: 50%;
        top: 0;
        left: 0;
        padding: 0;
        height: 100%;
        border: 0;
        background-color: transparent;

        &.next{
          left: 50%;
        }

        svg{
          display: none;
        }
      }
    }

    .offer-carousel-holder{
      position: relative;

      .project-cursor-area{
        display: block;
        width: 80%;
        height: 80%;
        position: absolute;
        top: 10%;
        left: 10%;
      }

      .flickity-cursor{
        display: block;
        width: 160px;
        height: 160px;
        line-height: 30px;
        padding: 65px 0;
        font-size: calc(var(--font-size) * 30);
        text-align: center;
        color: var(--black);
        position: absolute;
        z-index: 100;
        border-radius: 50%;
        pointer-events: none;
        margin-left: -80px;
        margin-top: -80px;
        white-space: nowrap;
        transition: transform .8s, opacity .8s;
        transform: scale(0.1);
        opacity: 0;
        z-index: 3;

        &::before{
          display: block;
          width: 160px;
          height: 160px;
          background: radial-gradient(circle, var(--blue) 50%, rgba(0,0,0,0) 70%);
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          animation-duration: 15s;
          animation-iteration-count: infinite;
          animation-timing-function: ease-in-out;
          animation-name: wiggle;
        }

        .inner{
          position: relative;
          z-index: 3;
        }
      }
    }

    .offer-carousel-holder:hover .flickity-cursor{
      opacity: 1;
      transform: scale(1);
    }*/
  }
  main.offer .offer-section .right-side {
    padding-top: 40px;
    min-height: calc(100dvh - 120px);
    display: flex;
    flex-direction: column;
  }
  main.offer .offer-section .right-side .offer-carousel {
    margin: 0;
    cursor: grab;
  }
  main.offer .offer-section .right-side .tags {
    margin-bottom: auto;
  }
  main.offer .offer-section .right-side .accordion {
    margin-bottom: auto;
  }
  main.offer .offer-section .right-side .sticked-to-right {
    margin-top: 40px;
  }
}
@media (min-width: 1200px) {
  .offer-menu .offer-menu-item {
    font-size: calc(var(--font-size) * 54);
    white-space: nowrap;
    transition: font-size 0.3s, width 0.3s;
  }
  .offer-menu .offer-menu-item:hover::before, .offer-menu .offer-menu-item.active::before {
    width: 40px;
  }
  main.offer .offer-section {
    padding: 0 0 50vh;
  }
  main.offer .offer-section .hero {
    font-size: calc(var(--font-size) * 99);
    position: fixed;
    width: 50vw;
    top: 80px;
    left: 50px;
  }
  main.offer .offer-section .offer-carousel .carousel-cell {
    width: 40%;
  }
  main.offer .offer-section .offer-carousel .carousel-cell .image img {
    max-width: none;
  }
  main.offer .offer-section .right-side .text, main.offer .offer-section .right-side .tags {
    width: 75%;
  }
  main.offer .offer-section .hero .original {
    display: none !important;
  }
  main.offer .offer-section .hero .new .char {
    transform: rotateX(-90deg);
    opacity: 0;
    transform-origin: bottom;
  }
  main.offer .offer-section .text .line {
    overflow: hidden;
  }
  main.offer .offer-section .tags .tag {
    display: inline-block;
  }
  main.offer .offer-menu {
    background-color: transparent;
    margin-top: -352px;
  }
  main.offer .offer-menu.smaller .offer-menu-item {
    font-size: calc(var(--font-size) * 30);
    width: 66.66666% !important;
  }
  main.offer .offer-menu.smaller .offer-menu-item:hover::before, main.offer .offer-menu.smaller .offer-menu-item.active::before {
    width: 24px;
  }
  main.offer section.intro .image {
    position: relative;
  }
  main.offer section.intro .image img {
    max-width: none;
  }
  main.offer section.marketing {
    padding-bottom: 0;
  }
  main.offer section.contact {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
    padding-bottom: 0;
    position: relative;
  }
  main.offer section.contact .container {
    margin-top: -100vh;
    height: 150vh;
    background-color: var(--black);
  }
  main.offer section.contact .hero {
    font-size: calc(var(--font-size) * 99);
    padding: 40px 0;
  }
  main.offer[data-section=""] section.contact {
    opacity: 1;
    pointer-events: auto;
  }
  body.footer-showing main.offer .offer-menu {
    opacity: 0;
    display: none;
  }
  body.footer-showing main.offer .offer-menu .offer-menu-item {
    pointer-events: none;
  }
}
.tooltip-parent {
  position: relative;
}

.tooltip {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  background-image: url("../img/icons/tooltip.svg");
  background-size: cover;
  cursor: help;
}
.tooltip .tooltip-content {
  display: none;
  position: absolute;
  right: -10px;
  bottom: 25px;
  background-color: var(--black);
  color: var(--white);
  border-radius: var(--radius);
  font-size: calc(var(--font-size) * 18);
  padding: 5px 10px;
  max-width: 200px;
  width: max-content;
}
.tooltip.hovered .tooltip-content {
  display: inline-block;
}

@media (min-width: 800px) {
  .tooltip:hover .tooltip-content {
    display: inline-block;
  }
  .tooltip.hovered .tooltip-content {
    display: none;
  }
}
main.product {
  padding: 78px 0 40px;
}
main.product .left-column, main.product .right-column {
  padding: 0 15px;
  width: 100%;
}
main.product .carousel {
  height: auto !important;
}
main.product .carousel .right {
  border-radius: var(--radius-big) !important;
  margin-bottom: 10px;
  height: auto !important;
  padding-top: 72.5%;
}
main.product .carousel .navigation {
  font-size: 0;
}
main.product .carousel .navigation .navigation-button {
  position: relative;
  display: inline-block;
  width: 55px;
  height: 40px;
  margin-right: 10px;
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0.45;
  transition: opacity 0.3s;
  cursor: pointer;
  margin-bottom: 10px;
}
main.product .carousel .navigation .navigation-button.active, main.product .carousel .navigation .navigation-button:hover {
  opacity: 1;
}
main.product .heading {
  margin: 60px 0 20px;
}
main.product .heading .breadcrumbs {
  font-size: calc(var(--font-size) * 18);
}
main.product .heading .title {
  font-size: calc(var(--font-size) * 54);
  font-weight: var(--font-semibold);
}
main.product .description {
  margin: 0 0 40px;
}
main.product .description .accordion-header {
  border-bottom: 1px solid var(--light-gray);
  padding: 10px 0;
}
main.product .description .accordion-header::before {
  display: none;
}
main.product .description .title {
  color: var(--black);
  font-weight: var(--font-semibold);
  position: relative;
}
main.product .description .title::after {
  background-image: url("../img/icons/plus-black.svg");
  width: 20px;
  height: 20px;
  position: absolute;
  right: 0;
  top: 3px;
  content: "";
  display: block;
  transition: transform 0.3s;
}
main.product .description .inner {
  padding: 0 0 40px;
}
main.product .description p {
  margin: 20px 0;
  max-width: 600px;
}
main.product .description .accordion-item.active .title::after {
  transform: rotate(45deg);
}
main.product .heading-desktop {
  display: none;
}
main.product .configurator {
  margin: 0 0 60px;
  width: 100%;
}
main.product .configurator .title {
  font-size: calc(var(--font-size) * 18);
  text-transform: uppercase;
  font-weight: var(--font-semibold);
  padding: 10px 0;
}
main.product .configurator .part {
  margin: 20px 0 60px;
}
main.product .configurator .shipping {
  display: flex;
  gap: 10px;
  align-items: start;
  min-height: 90px;
}
main.product .configurator .shipping .shipping-button {
  width: 50%;
  border-radius: var(--radius);
  border: 1px solid var(--light-gray);
  padding: 10px;
  cursor: pointer;
  background-size: 26px;
  background-repeat: no-repeat;
  background-position: left 10px top 11px;
  transition: background 0.3s, border 0.3s, color 0.3s;
}
main.product .configurator .shipping .shipping-button .title {
  text-align: center;
  padding: 0;
  border: 0;
  font-size: calc(var(--font-size) * 30);
  text-transform: none;
  font-weight: var(--font-regular);
  transition: padding 0.3s;
}
main.product .configurator .shipping .shipping-button .content {
  padding-top: 10px;
  display: none;
}
main.product .configurator .shipping .shipping-button .content input {
  position: absolute;
  left: -99999px;
  opacity: 0.01;
}
main.product .configurator .shipping .shipping-button .content .input-holder::after {
  display: none;
}
main.product .configurator .shipping .shipping-button .content label {
  width: 100%;
  display: block;
  position: static;
  height: auto;
  background-color: transparent;
  font-size: calc(var(--font-size) * 18);
}
main.product .configurator .shipping .shipping-button .content label .the-row {
  display: block;
}
main.product .configurator .shipping .shipping-button .content label .name {
  font-size: calc(var(--font-size) * 16);
  text-transform: uppercase;
  display: inline-block;
  width: 70px;
  vertical-align: middle;
  margin: auto 0;
}
main.product .configurator .shipping .shipping-button .content label .desc {
  line-height: 1em;
}
main.product .configurator .shipping .shipping-button:hover {
  border-color: var(--black);
  background-color: var(--black);
  color: var(--white);
}
main.product .configurator .shipping .shipping-button.active {
  border-color: var(--black);
  background-color: var(--black);
  color: var(--white);
  background-image: url("../img/icons/tick-white.svg");
}
main.product .configurator .shipping .shipping-button.active .title {
  padding-left: 30px;
}
main.product .configurator .shipping .shipping-button.active .content {
  display: block;
}
main.product .configurator .shipping .shipping-button.express .content {
  position: absolute;
  padding-top: 0;
  width: 100%;
}
main.product .configurator .shipping .shipping-button.express .content label {
  font-size: calc(var(--font-size) * 30);
  border-radius: var(--radius);
  border: 1px solid var(--light-gray);
  padding: 10px;
  cursor: pointer;
  background-size: 26px;
  background-repeat: no-repeat;
  background-position: left 10px top 11px;
  transition: background 0.3s, border 0.3s, color 0.3s;
  color: var(--black);
  margin-bottom: 7px;
  display: flex;
}
main.product .configurator .shipping .shipping-button.express .content label .name {
  width: 50px;
}
main.product .configurator .shipping .shipping-button.express.active {
  border: 0;
  background: 0;
  padding: 0;
}
main.product .configurator .shipping .shipping-button.express.active .title, main.product .configurator .shipping .shipping-button.express.active .tooltip {
  display: none;
}
main.product .configurator .shipping .shipping-button.express.active .content .tooltip {
  display: block;
}
main.product .configurator .shipping .shipping-button.express.active .content .input-holder label:hover, main.product .configurator .shipping .shipping-button.express.active .content .input-holder input:checked + label {
  background-color: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}
main.product .configurator .shipping .shipping-button.express.active .content .input-holder input:checked + label {
  background-image: url("../img/icons/tick-white.svg");
  background-position: 10px center;
}
main.product .configurator .shipping .shipping-button.express.active .content .input-holder input:checked + label .name {
  opacity: 0;
}
main.product .configurator .shipping .shipping-button.express:hover {
  background-color: var(--orange);
  border-color: var(--orange);
}
main.product .configurator .properties .property {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 10px 0;
}
main.product .configurator .properties .property .left {
  width: 80px;
}
main.product .configurator .properties .property .right {
  width: calc(100% - 100px);
}
main.product .configurator .properties .property .title {
  padding: 0;
}
main.product .configurator .properties .property .select {
  background-color: var(--real-white);
  border-bottom: 1px solid var(--light-gray);
  border-radius: 0;
  opacity: 1;
  text-transform: none;
  position: relative;
}
main.product .configurator .properties .property .select .select-trigger {
  padding: 5px 0;
}
main.product .configurator .properties .property .select .select-trigger input {
  color: var(--black);
  font-size: calc(var(--font-size) * 30);
  text-transform: none;
}
main.product .configurator .properties .property .select .select-trigger::after {
  background-image: url("../img/icons/down-black.svg");
  transform: rotate(0deg);
  right: 6px;
}
main.product .configurator .properties .property .select .select-options {
  background-color: var(--real-white);
}
main.product .configurator .properties .property .select .select-options .option {
  background-color: var(--white);
}
main.product .configurator .properties .property .select .select-options .option.selected, main.product .configurator .properties .property .select .select-options .option:hover {
  background-color: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}
main.product .configurator .properties .property .select.opened {
  z-index: 4;
}
main.product .configurator .properties .property .select.opened .select-trigger::after {
  transform: rotate(180deg);
}
main.product .configurator .pricelist {
  background-color: var(--white);
  border-radius: var(--radius-big);
  padding: 20px 20px 15px;
  font-size: calc(var(--font-size) * 18);
}
main.product .configurator .pricelist .header {
  display: flex;
  gap: 3%;
  border-bottom: 1px solid var(--light-gray);
  margin-bottom: 10px;
}
main.product .configurator .pricelist .header .cell {
  width: 22%;
  text-transform: uppercase;
  padding: 0 0 10px;
}
main.product .configurator .pricelist .header .cell:first-child {
  font-weight: var(--font-semibold);
  width: 30%;
}
main.product .configurator .pricelist .header .cell:nth-child(2) {
  width: 17%;
}
main.product .configurator .pricelist .content {
  font-size: calc(var(--font-size) * 24);
}
main.product .configurator .pricelist .content input {
  position: absolute;
  left: -99999px;
}
main.product .configurator .pricelist .content .label {
  display: flex;
  gap: 3%;
  margin: 5px 0;
  border-radius: var(--radius);
  cursor: pointer;
}
main.product .configurator .pricelist .content .label .cell {
  width: 22%;
  padding: 5px 0;
  font-weight: var(--font-semibold);
  align-content: center;
}
main.product .configurator .pricelist .content .label .cell .vat {
  font-size: calc(var(--font-size) * 18);
  display: block;
  font-weight: var(--font-regular);
}
main.product .configurator .pricelist .content .label .cell.amount {
  padding: 0;
  text-align: center;
  width: 30%;
}
main.product .configurator .pricelist .content .label .cell.amount .inner {
  background-color: var(--light-gray);
  margin-right: 10px;
  border-radius: var(--radius);
  height: 100%;
  align-content: center;
}
main.product .configurator .pricelist .content .label .cell.amount.custom .inner {
  display: flex;
}
main.product .configurator .pricelist .content .label .cell.amount.custom button {
  padding: 0;
  font-size: calc(var(--font-size) * 24);
  line-height: 20px;
  border: 0;
  background: transparent;
  width: 30%;
  font-weight: var(--font-semibold);
  cursor: pointer;
}
main.product .configurator .pricelist .content .label .cell.amount.custom input {
  position: static;
  opacity: 1;
  width: 40%;
  font-size: calc(var(--font-size) * 24);
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  line-height: 20px;
  text-align: center;
  font-weight: var(--font-semibold);
}
main.product .configurator .pricelist .content .label .cell.amount.custom input::-webkit-outer-spin-button,
main.product .configurator .pricelist .content .label .cell.amount.custom input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
main.product .configurator .pricelist .content .label .cell.sale {
  margin: 5px 0;
  text-align: center;
  width: 17%;
}
main.product .configurator .pricelist .content .label .cell.sale .inner {
  background-color: var(--black);
  border-radius: var(--radius);
  color: var(--white);
  padding: 5px 10px;
  width: 90%;
}
main.product .configurator .pricelist .content input:checked + .label, main.product .configurator .pricelist .content .label:hover {
  background-color: var(--black);
}
main.product .configurator .pricelist .content input:checked + .label .cell, main.product .configurator .pricelist .content .label:hover .cell {
  color: var(--white);
}
main.product .configurator .pricelist .content input:checked + .label .cell .vat, main.product .configurator .pricelist .content .label:hover .cell .vat {
  color: var(--white);
}
main.product .configurator .pricelist .content input:checked + .label .cell.amount .inner, main.product .configurator .pricelist .content .label:hover .cell.amount .inner {
  background-color: var(--black);
}
main.product .configurator .pricelist .content input:checked + .label .cell.amount.custom button, main.product .configurator .pricelist .content input:checked + .label .cell.amount.custom input, main.product .configurator .pricelist .content .label:hover .cell.amount.custom button, main.product .configurator .pricelist .content .label:hover .cell.amount.custom input {
  color: var(--white);
}
main.product .configurator .pricelist .content input:checked + .label .cell.sale .inner, main.product .configurator .pricelist .content .label:hover .cell.sale .inner {
  background-color: var(--real-white);
  color: var(--black);
}
main.product .configurator .data {
  position: relative;
}
main.product .configurator .data .inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
main.product .configurator .data .radio-holder {
  width: 100%;
}
main.product .configurator .data .radio-holder.half {
  width: calc(50% - 5px);
}
main.product .configurator .data input {
  position: absolute;
  left: -99999px;
  opacity: 0.01;
}
main.product .configurator .data label {
  border-radius: var(--radius);
  border: 1px solid var(--light-gray);
  text-align: center;
  display: block;
  padding: 10px;
  cursor: pointer;
}
main.product .configurator .data label.data-load .inner {
  padding-left: 30px;
  background-image: url("../img/icons/plus-black.svg");
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: left center;
}
main.product .configurator .data input:checked + label, main.product .configurator .data label:hover {
  background-color: var(--black);
  color: var(--white);
  border-color: var(--black);
}
main.product .configurator .data input:checked + label.data-design, main.product .configurator .data label:hover.data-design {
  background-color: var(--blue);
  border-color: var(--blue);
  color: var(--black);
}
main.product .configurator .data input:checked + label.data-load .inner, main.product .configurator .data label:hover.data-load .inner {
  background-image: url("../img/icons/plus-white.svg");
}
main.product .configurator .data .form {
  background-color: var(--white);
  padding: 10px 20px;
  border-radius: var(--radius);
  visibility: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}
main.product .configurator .data .form .header {
  display: flex;
  border-bottom: 1px solid var(--light-gray);
  margin-bottom: 10px;
  padding-bottom: 5px;
}
main.product .configurator .data .form .header .close {
  margin-left: auto;
  border: 0;
  background: transparent;
  padding: 0;
  margin-top: 5px;
  cursor: pointer;
}
main.product .configurator .data .form .header .close img {
  width: 16px;
  transform: rotate(45deg);
}
main.product .configurator .data .form .content {
  font-size: calc(var(--font-size) * 18);
}
main.product .configurator .data .form .content .add-data {
  font-size: calc(var(--font-size) * 18);
  padding: 5px 25px;
  background-image: url("../img/icons/plus-black.svg");
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: left center;
  text-transform: uppercase;
  width: 100%;
  border: 0;
  background-color: transparent;
  text-align: left;
  cursor: pointer;
  transition: font-weight 0.3s;
}
main.product .configurator .data .form .content .add-data:hover {
  font-weight: var(--font-semibold);
}
main.product .configurator .data .form .content .files {
  padding: 10px 0 5px;
}
main.product .configurator .data .form .content .files .file {
  margin-bottom: 5px;
  display: flex;
}
main.product .configurator .data .form .content .files .file .image {
  width: 25px;
  background-image: url("../img/icons/file.png");
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: left 4px;
}
main.product .configurator .data .form .content .files .file .name {
  line-height: 26px;
  white-space: nowrap;
  width: calc(100% - 110px);
  overflow: hidden;
  position: relative;
}
main.product .configurator .data .form .content .files .file .size {
  white-space: nowrap;
  padding: 0 10px;
  margin-left: auto;
  line-height: 26px;
  width: 60px;
}
main.product .configurator .data .form .content .files .file .close {
  border: 0;
  background-color: transparent;
  padding: 0;
  margin-top: 5px;
}
main.product .configurator .data .form .content .files .file .close img {
  width: 16px;
  transform: rotate(45deg);
}
main.product .configurator .data .form .content .textarea {
  width: 100%;
  border: 0;
  background: transparent;
  border-top: 1px solid #bdd5fb;
  font-size: calc(var(--font-size) * 18);
  padding-top: 10px;
  margin-bottom: 10px;
  height: 100px;
  max-width: 100%;
  min-width: 100%;
}
main.product .configurator .data .form .content .textarea::placeholder {
  color: var(--black);
}
main.product .configurator .data .form.custom-form {
  background-color: #e9f1fe;
  border: 1px solid var(--blue);
}
main.product .configurator .data .form.custom-form .header {
  border-bottom: 1px solid #bdd5fb;
}
main.product .configurator .data.data-form-opened .data-form {
  visibility: visible;
  position: static;
}
main.product .configurator .data.custom-form-opened .custom-form {
  visibility: visible;
  position: static;
}
main.product .configurator .btn-cart {
  width: 100%;
  background-color: var(--orange);
  color: var(--white);
  text-transform: none;
  font-size: calc(var(--font-size) * 30);
  padding: 0 15px;
  transition: background 0.3s;
  margin-top: -30px;
}
main.product .configurator .btn-cart .inner {
  padding: 14px 40px 14px 0;
  display: inline-block;
  position: relative;
}
main.product .configurator .btn-cart .inner::after {
  position: absolute;
  right: 0;
  top: 15px;
  width: 20px;
  height: 20px;
  background-image: url("../img/icons/arrow-white.svg");
  transform: rotate(45deg);
  content: "";
  display: inline-block;
}
main.product .configurator .btn-cart:hover {
  opacity: 0.81;
}
main.product .configurator .btn-cart.disabled {
  opacity: 0.45;
  pointer-events: none;
}
main.product .configurator .btn-cart.disabled .inner {
  opacity: 0.45;
}
main.product .more-items {
  margin: 40px 0;
}
main.product .more-items-title {
  font-size: calc(var(--font-size) * 54);
  line-height: 1;
  margin: 40px 0;
}

.hover-autoscroll {
  overflow: hidden;
}
.hover-autoscroll .inner {
  position: absolute;
  top: 0;
  transition: right 1s linear;
  white-space: nowrap;
}
.hover-autoscroll:hover .inner {
  right: 0 !important;
}

.autoscroll {
  overflow: hidden;
  width: calc(100% - 30px);
  position: relative;
}
.autoscroll input.hidden {
  width: 0;
  position: absolute;
}
.autoscroll .inner {
  white-space: nowrap;
  display: inline-block;
}

@keyframes autoscroll {
  0% {
    left: 0;
  }
  100% {
    right: 0;
  }
}
main.page {
  padding: 160px 0 40px;
}
main.page h1.title {
  margin: 0 0 40px;
  font-size: calc(var(--font-size) * 54);
  line-height: 1;
}
main.page h2.title {
  font-weight: var(--font-semibold);
  padding-top: 50px;
}
main.page .anchor-menu {
  margin-bottom: 40px;
}
main.page .anchor-menu a {
  color: var(--black);
}
main.page .text {
  margin-bottom: 40px;
}

@media (max-width: 440px) {
  main.product .configurator .pricelist .header .cell {
    width: 33%;
  }
  main.product .configurator .pricelist .header .cell:nth-child(2) {
    display: none;
  }
  main.product .configurator .pricelist .content .label .cell {
    width: 33%;
  }
  main.product .configurator .pricelist .content .label .cell.sale {
    display: none;
  }
}
@media (min-width: 800px) {
  main.product {
    padding-bottom: 0;
  }
  main.product .heading-desktop {
    display: block;
  }
  main.product .heading-mobile {
    display: none;
  }
  main.product .heading {
    margin: 0 0 40px;
  }
  main.product .left-column {
    width: calc(100% - 490px);
  }
  main.product .left-column .sticky {
    position: sticky;
    top: 78px;
    margin-bottom: 60px;
  }
  main.product .right-column {
    width: 490px;
  }
  main.product .more-items {
    margin: 140px 0 0;
  }
  main.product .more-items .end-section-inner {
    padding-bottom: 40px;
  }
  main.product .more-items-title {
    margin: 0;
  }
  body.vyroba main #carousel-vyroba .right {
    min-height: 0;
  }
  main.page {
    padding-top: 78px;
  }
  main.page .left-column {
    position: sticky;
    top: 78px;
  }
  main.page #navigation-menu {
    top: 220px !important;
    position: sticky !important;
  }
  main.page #navigation-menu .container {
    padding: 0;
  }
  main.page #navigation-menu .navigation-submenu {
    border-bottom: 0;
  }
  main.page #navigation-menu .links a {
    display: block;
  }
  main.page #navigation-menu .links a::before {
    content: "→";
    overflow: hidden;
    width: 0%;
    display: inline-block;
    float: left;
    transition: width 0.3s;
  }
  main.page #navigation-menu .links a:hover::before {
    width: 24px;
  }
  main.page h2.title {
    padding-top: 0;
  }
}
@media (min-width: 1200px) {
  main.product .left-column {
    width: calc(100% - 510px);
    margin-right: 20px;
  }
  main.product .more-items .end-section-inner {
    padding-top: 240px;
    margin-top: 0;
  }
  main.product .more-items .item {
    margin-bottom: 60px;
  }
  main.product .more-items-title {
    font-size: calc(var(--font-size) * 126);
  }
  main.product .carousel .navigation .navigation-button {
    width: 70px;
    height: 50px;
  }
}
/* Cart */
.radio-holder.checkbox input[type=radio], .radio-holder.checkbox input[type=checkbox] {
  position: absolute;
  left: -9999px;
}
.radio-holder.checkbox label {
  display: flex;
  padding-left: 26px;
  position: relative;
  margin-bottom: 15px;
}
.radio-holder.checkbox label::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border: 1px solid var(--black);
  position: absolute;
  left: 0;
  top: 0;
}
.radio-holder.checkbox label::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: var(--black);
  position: absolute;
  left: 4px;
  top: 4px;
  opacity: 0;
  transition: opacity 0.3s;
}
.radio-holder.checkbox label .left {
  margin-right: 10px;
}
.radio-holder.checkbox label .right {
  margin-left: auto;
  white-space: nowrap;
}
.radio-holder.checkbox input:checked + label::after {
  opacity: 1;
}

main.cart {
  padding: 78px 0 40px;
}
main.cart a {
  color: var(--black);
}
main.cart .title {
  font-size: calc(var(--font-size) * 30);
  font-weight: var(--font-semibold);
  margin-bottom: 1em;
  line-height: 1em;
}
main.cart .right-column {
  position: sticky;
  top: 78px;
}
main.cart .box {
  background-color: var(--white);
  border-radius: var(--radius);
  padding: 15px;
  font-size: calc(var(--font-size) * 18);
  margin-bottom: 2em;
}
main.cart .box .subtitle {
  text-transform: uppercase;
  font-weight: var(--font-semibold);
  margin-bottom: 1em;
}
main.cart .box .section {
  padding-bottom: 0.5em;
}
main.cart .box .section:not(:last-child) {
  border-bottom: 2px solid var(--black);
  margin-bottom: 1.5em;
}
main.cart .box .cart-item {
  font-size: calc(var(--font-size) * 14);
  padding-top: 15px;
  padding-bottom: 15px;
}
main.cart .box .cart-item:not(:last-child) {
  border-bottom: 1px solid var(--light-gray);
}
main.cart .box .cart-item table {
  width: 100%;
}
main.cart .box .cart-item table tr td:last-child {
  text-align: right;
}
main.cart .box .cart-item .small-title {
  font-size: calc(var(--font-size) * 18);
}
main.cart .box .cart-item .price {
  font-size: calc(var(--font-size) * 18);
  font-weight: var(--font-semibold);
}
main.cart .box .sum {
  font-size: calc(var(--font-size) * 30);
  font-weight: var(--font-semibold);
  display: flex;
}
main.cart .box .sum .right {
  margin-left: auto;
  text-align: right;
}
main.cart .box .sum .right .no-vat {
  font-size: calc(var(--font-size) * 18);
  font-weight: var(--font-regular);
  display: block;
}
main.cart .btn-cart {
  width: 100%;
  background-color: var(--orange);
  color: var(--white);
  text-transform: none;
  font-size: calc(var(--font-size) * 30);
  padding: 0 15px;
  transition: background 0.3s;
  text-align: center;
}
main.cart .btn-cart.disabled {
  opacity: 0.45;
  pointer-events: none;
}
main.cart .btn-cart .inner {
  position: relative;
  display: inline-block;
  padding: 14px 40px 14px 0;
}
main.cart .btn-cart .inner::after {
  position: absolute;
  right: 0;
  top: 15px;
  width: 20px;
  height: 20px;
  background-image: url("../img/icons/arrow-white.svg");
  transform: rotate(45deg);
  content: "";
  display: inline-block;
}
main.cart .btn-cart:hover {
  opacity: 0.81;
}
main.cart .data-form {
  width: 100%;
}
main.cart .data-form .content {
  font-size: calc(var(--font-size) * 18);
}
main.cart .data-form .content .add-data {
  font-size: calc(var(--font-size) * 18);
  padding: 5px 25px;
  background-image: url("../img/icons/plus-black.svg");
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: left center;
  text-transform: uppercase;
  width: 100%;
  border: 0;
  background-color: transparent;
  text-align: left;
  cursor: pointer;
  transition: font-weight 0.3s;
}
main.cart .data-form .content .add-data:hover {
  font-weight: var(--font-semibold);
}
main.cart .data-form .content .files {
  padding: 10px 0 5px;
}
main.cart .data-form .content .files .file {
  margin-bottom: 5px;
  display: flex;
}
main.cart .data-form .content .files .file .image {
  width: 25px;
  background-image: url("../img/icons/file.png");
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: left 4px;
}
main.cart .data-form .content .files .file .name {
  line-height: 26px;
  white-space: nowrap;
  width: calc(100% - 110px);
  overflow: hidden;
  position: relative;
}
main.cart .data-form .content .files .file .size {
  white-space: nowrap;
  padding: 0 10px;
  margin-left: auto;
  line-height: 26px;
  width: 60px;
}
main.cart .data-form .content .files .file .close {
  border: 0;
  background-color: transparent;
  padding: 0;
  margin-top: 5px;
}
main.cart .data-form .content .files .file .close img {
  width: 16px;
  transform: rotate(45deg);
}
main.cart .data-form .content .textarea {
  width: 100%;
  border: 0;
  background: transparent;
  border-top: 1px solid var(--light-gray);
  font-size: calc(var(--font-size) * 18);
  padding-top: 10px;
  margin-bottom: 10px;
  height: 100px;
  max-width: 100%;
  min-width: 100%;
}
main.cart .data-form .content .textarea::placeholder {
  color: var(--light-gray);
}
main.cart .left-column {
  margin-bottom: 60px;
}
main.cart .left-column .header {
  line-height: 1em;
  border-bottom: 2px solid var(--black);
}
main.cart .left-column .header .title {
  margin-bottom: 1em;
  font-weight: var(--font-regular);
}
main.cart .left-column .header .title a {
  transition: font-weight 0.3s;
}
main.cart .left-column .header .title a.active, main.cart .left-column .header .title a:hover {
  font-weight: var(--font-semibold);
}
main.cart .left-column .cart-item {
  border-bottom: 2px solid var(--black);
}
main.cart .left-column .cart-item .remove {
  width: 16px;
  height: 16px;
  padding: 0;
  font-size: 0;
  background-image: url("../img/icons/cross-black.svg");
  background-size: cover;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  float: right;
  margin-top: 5px;
}
main.cart .left-column .cart-item .part {
  font-size: calc(var(--font-size) * 18);
  padding: 30px 0;
}
main.cart .left-column .cart-item .part:not(:last-child) {
  border-bottom: 1px solid var(--light-gray);
}
main.cart .left-column .cart-item .subtitle {
  font-weight: var(--font-semibold);
  margin-bottom: 1em;
  font-size: calc(var(--font-size) * 30);
}
main.cart .left-column .cart-item .image {
  width: 200px;
  height: 140px;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}
main.cart .left-column .cart-item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
main.cart .left-column .cart-item .smalltitle {
  font-weight: var(--font-semibold);
  margin-bottom: 1em;
  text-transform: uppercase;
}
main.cart .left-column .cart-item .info {
  width: 100%;
}
main.cart .left-column .cart-item .info td {
  padding: 0 0 5px 0;
  width: 50%;
}
main.cart .left-column .cart-item .info td.price {
  text-align: right;
  font-weight: var(--font-semibold);
}
main.cart .left-column .cart-item .info td.price .no-vat {
  font-weight: var(--font-regular);
  font-size: calc(var(--font-size) * 14);
}
main.cart .data a {
  text-decoration: underline;
}
main.cart .accordion-checkbox {
  transition: height 0.3s, opacity 0.3s;
  opacity: 1;
}
main.cart .accordion-checkbox .content .files .file .image {
  height: 25px;
  margin-bottom: 0;
}
main.cart .radio-holder input:not(:checked) ~ .accordion-checkbox {
  height: 0px !important;
  overflow: hidden;
  opacity: 0;
}
main.cart .more-products {
  padding: 120px 0 20px;
}
main.cart .more-products .title {
  font-weight: var(--font-regular);
  margin-bottom: 1.5em;
  font-size: calc(var(--font-size) * 54);
}
main.cart .more-products .item {
  width: 300px;
  margin: 0 15px 40px;
  transition: opacity 0.3s;
}
main.cart .more-products .item:hover .bottom .label {
  top: 0;
}
main.cart .more-products .project-carousel:hover .item {
  opacity: 0.45;
}
main.cart .more-products .project-carousel:hover .item:hover {
  opacity: 1;
}

main.order .left-column .part {
  padding: 30px 0;
  font-size: calc(var(--font-size) * 18);
}
main.order .left-column .part:not(:first-child) {
  border-top: 1px solid var(--light-gray);
}
main.order .left-column .part:last-child {
  border-top: 2px solid var(--black);
}
main.order .left-column .part .smalltitle {
  text-transform: uppercase;
  margin: 8px 0 1.5em;
  font-weight: var(--font-semibold);
}
main.order .left-column .input-holder {
  margin-bottom: 5px;
}
main.order .left-column .input-holder::after {
  opacity: 1;
  border-color: var(--light-gray);
}
main.order .left-column input, main.order .left-column textarea {
  font-size: calc(var(--font-size) * 18);
  line-height: 28px;
  opacity: 1;
}
main.order .left-column input::placeholder, main.order .left-column textarea::placeholder {
  color: var(--light-gray);
  opacity: 1 !important;
}
main.order .left-column .label {
  margin-top: 8px;
}
main.order .left-column .select {
  background-color: transparent;
  opacity: 1;
}
main.order .left-column .select .select-trigger {
  padding: 5px 0;
  height: 28px;
  border-bottom: 1px solid var(--light-gray);
  color: var(--black);
  text-transform: none;
}
main.order .left-column .select .select-trigger::after {
  width: 12px;
  height: 12px;
  right: 5px;
  top: 6px;
}
main.order .left-column .select .select-options {
  padding-top: 27px;
  background-color: transparent;
}
main.order .left-column .select .select-options .option {
  padding: 5px 10px;
  text-transform: none;
  background-color: var(--white);
  height: 28px;
}
main.order .left-column .select .select-options .option.selected {
  background-color: var(--orange);
}
main.order .left-column .spacer {
  height: 2.5em;
}
main.order .left-column .btn-ares {
  font-size: calc(var(--font-size) * 18);
  line-height: 20px;
  text-transform: none;
  background-color: var(--white);
  width: 100%;
  padding: 0;
}
main.order .left-column .btn-ares::after {
  display: none;
}
main.order .left-column .btn-ares .inner {
  padding: 4px 10px 4px 24px;
  display: inline-block;
  position: relative;
}
main.order .left-column .btn-ares .inner::after {
  transform: rotate(45deg);
  width: 14px;
  height: 14px;
  left: 0;
  top: 7px;
  position: absolute;
  background-image: url("../img/icons/arrow-black.svg");
  content: "";
  display: block;
}
main.order .left-column .btn-ares:hover {
  background-color: var(--black) !important;
}
main.order .left-column .btn-ares:hover .inner::after {
  background-image: url("../img/icons/arrow-white.svg");
}
main.order .left-column textarea {
  height: 140px;
  max-width: 100%;
  min-width: 100%;
}

@media (min-width: 800px) {
  main.cart section.cart {
    padding: 40px 0;
  }
  main.cart .left-column {
    margin-bottom: 0;
  }
  main.cart .left-column .cart-item .smalltitle-first {
    margin: 1em 0 1.5em;
  }
  main.cart .right-column {
    top: 118px;
  }
}
@media (min-width: 800px) {
  main.cart section.cart {
    padding: 80px 0 140px;
  }
  main.cart .right-column {
    top: 158px;
  }
  main.cart .more-products {
    padding: 140px 0;
  }
  main.cart .more-products .item {
    width: 400px;
  }
}
body.user {
  background-color: var(--real-white);
  color: var(--real-black);
}
body.user ::selection {
  background-color: var(--light-gray);
}
body.user main {
  width: fit-content;
  margin: 60px auto 0;
  max-width: 100%;
  min-height: 100vh;
}
body.user main .orders {
  margin: 0 0 60px;
}
body.user main .orders h2 {
  font-size: calc(var(--font-size) * 30);
  margin-bottom: 1em;
  font-weight: var(--font-medium);
}
body.user main .orders .table-wrapper {
  position: relative;
}
body.user main .orders .table-wrapper .button-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
body.user main .orders .table-wrapper .button-holder {
  position: sticky;
  top: 0;
  max-height: 100vh;
  height: 100%;
}
body.user main .orders .table-wrapper .scroll-left-button, body.user main .orders .table-wrapper .scroll-right-button {
  position: absolute;
  left: -16px;
  width: 32px;
  top: calc(50% - 16px);
  height: 32px;
  transform: rotate(-135deg);
  font-size: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  background-color: var(--black);
  border-radius: 50%;
  cursor: pointer;
  background-image: url("../img/icons/arrow.svg");
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
}
body.user main .orders .table-wrapper .scroll-right-button {
  left: auto;
  right: -16px;
  transform: rotate(45deg);
}
body.user main .orders .table-wrapper.scrollable:not(.hide-left) .scroll-left-button {
  opacity: 1;
  pointer-events: auto;
}
body.user main .orders .table-wrapper.scrollable:not(.hide-right) .scroll-right-button {
  opacity: 1;
  pointer-events: auto;
}
body.user main .orders .table-holder {
  font-size: calc(var(--font-size) * 18);
  background-color: var(--white);
  padding: 0 15px;
  border-radius: var(--radius);
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  overscroll-behavior-x: contain;
}
body.user main .orders .table th {
  text-transform: uppercase;
  text-align: center;
  font-weight: var(--font-medium);
  padding: 15px;
  white-space: nowrap;
}
body.user main .orders .table th:first-of-type {
  padding-left: 0;
}
body.user main .orders .table th:last-of-type {
  padding-right: 0;
}
body.user main .orders .table th.th-desc {
  text-align: left;
}
body.user main .orders .table td {
  padding: 15px;
  border-top: 1px solid rgba(193, 193, 193, 0.45);
  vertical-align: middle;
}
body.user main .orders .table td:first-of-type {
  padding-left: 0;
}
body.user main .orders .table td:last-of-type {
  padding-right: 0;
}
body.user main .orders .table td.td-desc {
  min-width: 240px;
  max-width: 360px;
}
body.user main .orders .table td.td-desc .title {
  font-size: calc(var(--font-size) * 24);
  font-weight: var(--font-medium);
  margin-bottom: 0.1em;
}
body.user main .orders .table td.td-actions {
  white-space: nowrap;
  min-width: 105px;
}
body.user main .orders .table td.td-status, body.user main .orders .table td.td-shipping, body.user main .orders .table td.td-type {
  text-align: center;
}
body.user main .orders .table .tag {
  background-color: var(--black);
  color: var(--real-white);
  border-radius: var(--radius);
  padding: 3px 8px;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: calc(var(--font-size) * 14);
  font-weight: var(--font-medium);
}
body.user main .orders .table .tag.tag-colored {
  background-color: var(--real-white);
  color: var(--black);
}
body.user main .orders .table .tag.tag-disabled {
  background-color: var(--light-gray);
  color: var(--black);
}
body.user main .orders .table .action {
  background-color: var(--real-white);
  border-radius: var(--radius);
  border: 0;
  position: relative;
  padding: 2px 5px;
  height: 20px;
  cursor: pointer;
  margin: 0 1px;
  font-size: 0;
  vertical-align: middle;
}
body.user main .orders .table .action img {
  width: 16px;
  height: 16px;
  vertical-align: top;
}
body.user main .orders .table .action .action-tooltip {
  opacity: 0;
  pointer-events: auto;
  position: absolute;
  background-color: var(--black);
  color: var(--real-white);
  text-transform: uppercase;
  white-space: nowrap;
  font-size: calc(var(--font-size) * 12);
  font-weight: var(--font-medium);
  display: block;
  padding: 2px 5px;
  border-radius: var(--radius);
  left: 3px;
  bottom: -23px;
  transition: opacity 0.3s;
  display: none;
}
body.user main .orders .table .action .action-tooltip .content {
  position: relative;
}
body.user main .orders .table .action .action-tooltip::before {
  width: 7px;
  height: 7px;
  background-color: var(--black);
  content: "";
  display: block;
  transform: rotate(45deg);
  position: absolute;
  left: 7px;
  top: -3px;
}
body.user main .orders .table .action:hover .action-tooltip {
  opacity: 1;
}
body.user main .orders .buttons {
  padding-bottom: 15px;
  white-space: nowrap;
}
body.user main .orders .buttons .btn {
  border: 1px solid var(--black);
  text-transform: none;
  font-size: calc(var(--font-size) * 30);
  margin-right: 10px;
}
body.user main .orders .buttons .btn:hover {
  background-color: var(--black);
  color: var(--white);
}
body.user main .orders .buttons .btn.btn-search {
  padding-left: 50px;
  position: relative;
}
body.user main .orders .buttons .btn.btn-search::after {
  background-image: url("../img/icons/search.svg");
  width: 20px;
  height: 20px;
  left: 16px;
  top: 9px;
  content: "";
  display: block;
  position: absolute;
}
body.user main .orders .buttons .btn.btn-search:hover::after {
  background-image: url(../img/icons/search-white.svg);
}
body.user main .orders .buttons .btn.btn-more {
  padding-right: 50px;
  padding-left: 20px;
}
body.user main .orders .buttons .btn.btn-more::after {
  right: 16px;
  left: auto;
  transform: rotate(45deg);
}
body.user main .orders .buttons .btn.btn-more:hover::after {
  background-image: url(../img/icons/arrow-white.svg);
}
body.user main .orders.orders-actual .tag {
  background-color: var(--real-white);
  color: var(--black);
}
body.user main .orders.orders-vyroba .tag.tag-colored {
  background-color: var(--orange);
  color: var(--white);
}
body.user main .orders.orders-design .tag.tag-colored {
  background-color: var(--blue);
  color: var(--white);
}
body.user main section.search {
  padding: 60px 0 60px;
  margin-top: -50px;
}
body.user main section.search .form {
  background-color: var(--white);
  border-radius: var(--radius);
  padding: 5px 15px;
}
body.user main section.search .form .input {
  background-color: transparent;
  border: 0;
  width: 100%;
}
body.user main section.search .form .input::placeholder {
  color: var(--light-gray);
}
body.user #footer {
  background-color: var(--black);
  color: var(--white);
}
body.user #footer a {
  color: var(--white);
}
body.user #footer .copyright a::after {
  background-color: var(--white);
}
body.user #footer .big-logo svg {
  fill: var(--white);
}
body.user #footer .left-side .newsletter .newsletter-form .input-holder input {
  color: var(--white);
}
body.user #footer .left-side .newsletter .newsletter-form .input-holder input::placeholder {
  color: var(--white);
}
body.user #footer .left-side .newsletter .newsletter-form .input-holder::after {
  border-bottom-color: var(--white);
}
body.user #footer .left-side .newsletter .newsletter-form .btn {
  background-color: var(--white);
  color: var(--black);
}
body.user #footer .left-side .newsletter .newsletter-form .btn::after {
  background-image: url("../img/icons/send.svg");
}
body.user #header {
  background-color: var(--real-white);
  height: auto;
  position: relative;
}
body.user #header .main-title .logo {
  position: static;
}
body.user #header .main-title .logo svg {
  fill: var(--black);
}
body.user #header .title {
  margin-top: 1em;
  line-height: 1em;
  font-size: calc(var(--font-size) * 54);
  font-weight: var(--font-medium);
}
body.user #header .contact {
  font-size: calc(var(--font-size) * 18);
  margin-top: 1em;
  padding-bottom: 1em;
}
body.user #header .contact .copy-to-clipboard {
  font-size: 1em;
  background-color: transparent;
  border: 0;
  padding: 0;
  position: relative;
  cursor: pointer;
}
body.user #header .contact .copy-to-clipboard::after {
  position: absolute;
  content: "";
  bottom: 0;
  right: 0;
  width: 0%;
  height: 1px;
  background: var(--black);
  transition: width 0.3s;
}
body.user #header .contact .copy-to-clipboard .copy-to-clipboard-tooltip {
  opacity: 0;
  position: absolute;
  background-color: var(--black);
  color: var(--real-white);
  text-transform: uppercase;
  white-space: nowrap;
  font-size: calc(var(--font-size) * 12);
  font-weight: var(--font-medium);
  display: block;
  padding: 2px 5px;
  border-radius: var(--radius);
  left: 3px;
  bottom: -23px;
  transition: opacity 0.3s;
  pointer-events: none;
}
body.user #header .contact .copy-to-clipboard .copy-to-clipboard-tooltip .content {
  position: relative;
}
body.user #header .contact .copy-to-clipboard .copy-to-clipboard-tooltip::before {
  width: 7px;
  height: 7px;
  background-color: var(--black);
  content: "";
  display: block;
  transform: rotate(45deg);
  position: absolute;
  left: 7px;
  top: -3px;
}
body.user #header .contact .copy-to-clipboard.show-tooltip .copy-to-clipboard-tooltip {
  opacity: 1;
}
body.user #header .contact .copy-to-clipboard:hover:after {
  width: 100%;
  left: 0;
  right: auto;
}

body.user.footer-showing #header {
  top: -200px;
}

@media (min-width: 800px) {
  body.user #header {
    position: fixed;
  }
  body.user #header .title {
    margin-top: 0;
  }
  body.user #header .contact {
    margin-top: 0;
    padding-bottom: 0;
    line-height: 1.25em;
  }
}
@media (min-width: 1200px) {
  body.user main {
    margin-top: 120px;
  }
  body.user main .orders {
    margin: 0 0 120px;
  }
  body.user main .orders .table-holder {
    padding: 0 30px;
  }
  body.user main .orders .table .action .action-tooltip {
    display: block;
  }
  body.user main .orders .table td, body.user main .orders .table th {
    padding: 20px 15px;
  }
  body.user main .orders .buttons {
    padding: 20px 20px 40px;
    display: flex;
    position: relative;
  }
  body.user main .orders .buttons .btn.btn-search {
    position: absolute;
    left: 20px;
    top: 20px;
  }
  body.user main .orders .buttons .btn.btn-more {
    margin: 0 auto;
    padding: 9px 100px 9px 70px;
  }
  body.user main section.search {
    padding: 60px 0 120px;
    margin-top: -40px;
  }
  body.user #header .contact {
    font-size: calc(var(--font-size) * 24);
  }
}