/* The smallest content width - you can change it the way you like */
body,
section,
.fullscreen-bg,
.header,
.nav,
.popup,
.inner {
  min-width: 320px;
}

/* Navigation text overlap hidden on mobile (some old mobile browsers doesn't support "overflow: hidden" property, so the overlapping it happening. We stopped to support this feature about a year ago) */
.navigation li a .link-hover {
  display: none;
}

@media only screen and (min-width: 768px) {
  .navigation li a .link-hover {
    display: block;
  }
}

/* New menu link animation */
.nav.animate-in .navigation li:nth-of-type(5) {
  -webkit-transition: opacity 0.2s 1.5s,
    -webkit-transform 0.2s 1.5s cubic-bezier(0.06, 0.71, 0.71, 1.25);
  transition: opacity 0.2s 1.5s, -webkit-transform 0.2s 1.5s cubic-bezier(0.06, 0.71, 0.71, 1.25);
  -o-transition: opacity 0.2s 1.5s, transform 0.2s 1.5s cubic-bezier(0.06, 0.71, 0.71, 1.25);
  -moz-transition: opacity 0.2s 1.5s, transform 0.2s 1.5s cubic-bezier(0.06, 0.71, 0.71, 1.25),
    -moz-transform 0.2s 1.5s cubic-bezier(0.06, 0.71, 0.71, 1.25);
  transition: opacity 0.2s 1.5s, transform 0.2s 1.5s cubic-bezier(0.06, 0.71, 0.71, 1.25);
  transition: opacity 0.2s 1.5s, transform 0.2s 1.5s cubic-bezier(0.06, 0.71, 0.71, 1.25),
    -webkit-transform 0.2s 1.5s cubic-bezier(0.06, 0.71, 0.71, 1.25),
    -moz-transform 0.2s 1.5s cubic-bezier(0.06, 0.71, 0.71, 1.25);
}

@media (min-width: 767px) {
  .logo {
    display: flex;
    align-items: center;
  }
}

@media (max-width: 767px) {
  .navigation li::after {
    content: "";
  }

  .navigation li {
    display: block;
  }

  .logo a {
    width: auto;
    display: block;
    position: relative;
    left: 0;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

@media (max-width: 355px) {
  .logo {
    left: 1.3rem;
  }
}

@media (min-width: 767px) and (max-width: 1025px) {
  .main.animate-in .footer-mobile {
    position: static;
    height: auto;
    scale: 1.2;
    margin: 20px 0 0 0;
  }

  .popup__content.block-rounded-s {
    background-color: #000;
  }

  .main.animate-in .headline__title,
  h3 {
    font-size: 24px;
  }

  #contact p.block__text,
  #about p.block__text,
  #works p.block__text {
    font-size: 16px !important;
  }
  .btn-s-text .title {
    font-size: 18px;
  }
  p.copyright {
    font-size: 16px !important;
  }
}
.main::after {
  display: none;
}

/* Allow the hero background to show immediately instead of flashing a black fill */
#main {
  background-color: transparent;
}

#main .fullscreen-bg {
  opacity: 1;
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
}

#main::after {
  background: none;
}
@media (max-width: 767px) {
  .footer-desktop {
    display: block;
    position: relative;
    inset: auto;
  }
  footer#footer {
    display: block;
    padding-bottom: 12px;
    z-index: 1;
  }
  #footer .col-6.footer-desktop__left.fullheight,
  #footer .col-6.footer-desktop__right.fullheight {
    width: 100%;
  }
  #footer .container-desktop.fullheight.d-flex.justify-content-end.align-items-center,
  #footer .container-desktop.d-flex.fullheight.justify-content-start.align-items-center {
    padding: 0 8px !important;
    justify-content: center !important;
    align-items: center !important;
  }
  #footer ul.socials.d-flex.align-items-start {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  #footer ul.socials.d-flex.align-items-start li:nth-child(4) {
    display: block;
    width: 100%;
  }
  #footer p.copyright.bright {
    text-align: center;
  }
}