@font-face {
  font-family: "CenturyGothic-Bold";
  src: url("../font/CenturyGothic-Bold.woff2") format("woff2"),
    url("../font/CenturyGothic-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CenturyGothic-regular";
  src: url("../font/CenturyGothic.woff2") format("woff2"),
    url("../font/CenturyGothic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/*===== VARIABLES CSS =====*/
:root {
  --scrollbar-size: 0px;

  /*========== Colors ==========*/
  --first-color: #da2535;
  --white-color: #fff;

  /*========== Circle logo ==========*/
  --radius: 65px;
  --frame-size: 95px;
  --d-outer: calc(var(--radius) * 2);
  --d-inner: calc(var(--radius) * 2 - var(--frame-size));

  /*========== Fonts size  ==========*/

  --paragraphs: 15px;
  --paragraphs-2k: 20px;
  --paragraphs-mobile: 14px;
}

*,
:after,
:before {
  box-sizing: border-box;
}

/*========== Layout style ==========*/

.viewport {
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 0;
  margin: 0;
  font-family: "CenturyGothic-regular";
  position: relative;
}

#supportError {
  display: none;
}

/* WebKit and Chromiums */
::-webkit-scrollbar {
  width: 5px;
  height: 3px;
  background: #000;
}

::-webkit-scrollbar-thumb {
  background: #fff;
}

.change_color_page {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--white-color);
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out;
  background-color: #fbe8ee;
}

.header.white {
  background-color: #0a0a0a;
}

.scrollbar-test {
  position: absolute;
  visibility: hidden;
  overflow: scroll;
  width: 100px;
  height: 100px;
  top: -99999px;
  left: -99999px;
  pointer-events: none;
  user-select: none;
}

.fixed-content {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: var(--scrollbar-size, 0px);
  bottom: 0;
  z-index: 2;
  pointer-events: none;
}

.scroll-container {
  position: absolute;
  overflow: hidden;
  z-index: 10;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  width: 100%;
}

.content {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.spacer {
  background: transparent;
}

.single-item {
  flex: 0 0 100vw;
  height: 100vh;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  font-size: var(--paragraphs);
}

.single-item.left {
  justify-content: flex-start;
}

.single-item.active {
  background: #fff;
  background-image: radial-gradient(
      closest-side,
      rgba(237, 185, 197, 1),
      rgba(237, 185, 197, 0)
    ),
    radial-gradient(
      closest-side,
      rgba(179, 198, 228, 1),
      rgba(179, 198, 228, 0)
    ),
    radial-gradient(
      closest-side,
      rgba(172, 201, 231, 1),
      rgba(172, 201, 231, 0)
    ),
    radial-gradient(
      closest-side,
      rgba(251, 179, 183, 1),
      rgba(251, 179, 183, 0)
    ),
    radial-gradient(
      closest-side,
      rgba(214, 190, 208, 1),
      rgba(214, 190, 147, 0)
    );
  background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax,
    110vmax 110vmax, 90vmax 90vmax;
  background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax,
    -30vmax -10vmax, 50vmax 50vmax;
  background-repeat: no-repeat;
  animation: 4s movementBG linear infinite;
}

.single-item .mainDIV {
  width: 100%;
  height: 95%;
}

.single-item .absolute {
  position: absolute;
  bottom: 5%;
  right: 1%;
  transform: scale(0.9);
}

.horizontal-scroll-wrapper {
  position: relative;
}

.horizontal-scroll {
  display: flex;
}

.horizontal-scroll .single-item {
  /* flex: 0 0 100vw; */
  display: block;
  margin-top: 30px;
}

.horizontal-scroll .Horizontal-section .mainDIV {
  margin-top: 80px;
}

.horizontal-scroll .Horizontal-section .nominalWIDTH {
  width: 95% !important;
}

.horizontal-scroll .single-item p {
  width: 95%;
}

.nominalWIDTH {
  width: 80% !important;
  margin: 0 auto;
}

.header__logo-mobile img {
  display: none;
}

.fixed__menuHamburger {
  position: fixed;
  z-index: 5;
  left: 5%;
  top: 2%;
  opacity: 0;
  background: rgba(255, 255, 255, 0.85) !important;
  padding: 5px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.35) !important;
  cursor: pointer;
  transition: 0.65s;
}

.fixed__menuHamburger:hover {
  transform: scale(0.93);
}

.fixed__arrow {
  background: #fff;
  border-radius: 50%;
  padding: 6px 12px 7px 12px;
  -webkit-box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.3);
  transition: 0.5s;
  cursor: pointer;
  position: fixed;
  z-index: 9;
  bottom: 2%;
  right: 1.5%;
}

.fixed__arrow:hover {
  transform: scale(1.15);
}

.fixed__arrow img {
  width: 13px;
  transform: rotate(-180deg);
}

/*========== Preloader ==========*/

.preloader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 10000;
  visibility: hidden;
  opacity: 0;
  width: 100vw;
  height: 100vh;
  top: 0;
  margin: 0;
  background: rgb(215, 198, 213);
  background: -moz-linear-gradient(
    90deg,
    rgba(215, 198, 213, 1) 0%,
    rgba(215, 199, 211, 1) 28%,
    rgba(203, 201, 222, 1) 46%,
    rgba(186, 208, 234, 1) 72%,
    rgba(203, 202, 222, 1) 100%
  );
  background: -webkit-linear-gradient(
    90deg,
    rgba(215, 198, 213, 1) 0%,
    rgba(215, 199, 211, 1) 28%,
    rgba(203, 201, 222, 1) 46%,
    rgba(186, 208, 234, 1) 72%,
    rgba(203, 202, 222, 1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(215, 198, 213, 1) 0%,
    rgba(215, 199, 211, 1) 28%,
    rgba(203, 201, 222, 1) 46%,
    rgba(186, 208, 234, 1) 72%,
    rgba(203, 202, 222, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d7c6d5", endColorstr="#cbcade", GradientType=1);
  transition: opacity 400ms ease-in-out, visibility 0s 400ms;
}

.show-preloader {
  visibility: visible;
  opacity: 1;
}

.circle {
  background-color: #000;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
  -webkit-animation: stretchdelay 0.7s infinite ease-in-out;
  animation: stretchdelay 0.7s infinite ease-in-out;
}

.preloader .circle:nth-child(1) {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.preloader .circle:nth-child(2) {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.preloader .circle:nth-child(3) {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.preloader .circle:nth-child(4) {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

@keyframes stretchdelay {
  0%,
  40%,
  100% {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
  }

  20% {
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
  }
}

/*========== Section1  ==========*/

.section1__afterVideo .section1__mobile {
  display: none;
}

.items__layer {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 1;
}

.items__layer img,
.items__layer video {
  width: 370px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
}

/*
.items__layer img,
.items__layer video {
  width: 380px;
  display: block;
  margin: 19% auto 0 auto;
}
*/

.header__logo {
  opacity: 0;
}

.section1 .section1__social {
  position: absolute;
  right: 2%;
  top: 42%;
}

.section1 .section1__social img {
  width: 38px;
  margin: 5px 0;
  transition: 0.2s;
}

.section1 .section1__social img:hover {
  transform: scale(1.1);
}

.section1__arrow {
  position: absolute;
  bottom: 5%;
  right: 1%;
}

.section1__arrow img {
  width: 70px;
  -moz-animation: ArrowBounce 2s infinite;
  -webkit-animation: ArrowBounce 2s infinite;
  animation: ArrowBounce 2s infinite;
}

.section1__afterVideo .section1__afterVideo-menu {
  position: absolute;
  width: 800px;
  top: 3%;
  left: 50%;
  margin-left: -370px;
  font-size: 20px;
  z-index: 99;
}

.section1__afterVideo .section1__afterVideo-menu ul {
  list-style: none;
  display: flex;
  align-items: center;
  padding-left: 0;
}

.section1__afterVideo .section1__afterVideo-menu ul li {
  margin: 0 41px;
}

.section1__afterVideo .section1__afterVideo-menu ul li a {
  text-decoration: none;
  color: #000;
  padding-bottom: 5px;
}

.section1__afterVideo .section1__afterVideo-menu ul li a:hover {
  border-bottom: 2px solid #000;
}

/* = Circle logo =*/

.veryveryCircle {
  width: 70px;
  height: 70px;
  overflow: hidden;
  position: relative;
  transition: 0.3s;
}
.veryveryCircle svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation-name: rotate;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.veryveryCircle text {
  font-family: sans-serif;
  font-size: 26px;
  fill: black;
}
.veryveryCircle text textPath {
  letter-spacing: 5px;
}

.veryveryCircle__logo {
  position: absolute;
  left: 50%;
  margin-left: -15px;
  top: 20px;
}

.veryveryCircle:hover {
  transform: scale(0.85);
}

/* = Hamburger menu ico =*/

.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transform: scale(0.8);
  position: absolute;
  right: 10px;
}
.hamRotate.active {
  transform: rotate(45deg);
}
.hamRotate180.active {
  transform: rotate(180deg);
}
.line {
  fill: none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke: #000;
  stroke-width: 5.5;
  stroke-linecap: round;
}

.ham7 .top {
  stroke-dasharray: 40 82;
}
.ham7 .middle {
  stroke-dasharray: 40 111;
}
.ham7 .bottom {
  stroke-dasharray: 40 161;
}
.ham7.active .top {
  stroke-dasharray: 17 82;
  stroke-dashoffset: -62px;
}
.ham7.active .middle {
  stroke-dashoffset: 23px;
}
.ham7.active .bottom {
  stroke-dashoffset: -83px;
}

/*=========== O nas ===========*/

#onas {
  background: url(../img/onas.webp) no-repeat;
  background-size: cover;
}

#onas .onas__headingInfo {
  font-size: 18px;
  margin-top: 80px;
  font-family: "CenturyGothic-Bold";
  letter-spacing: 1px;
}

#onas p {
  font-size: var(--paragraphs);
  line-height: 23px;
}

#onas .onas__left p {
  width: 660px;
}

#onas .onas__left .onas__left-paragraph {
  margin-top: 50px;
}

#onas .onas__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

#onas .onas__right {
  margin-top: 300px;
}

#onas .onas__right .onas__right-imgHeading {
  display: block;
  text-align: right;
  margin: 0 auto;
  padding-bottom: 40px;
}

#onas .onas__right .onas__rightheading-border {
  position: absolute;
  height: 9px;
  width: 50%;
  background: #000;
}

#onas .onas__right h3 {
  font-size: 23px;
  margin-top: 50px;
}

#onas .onas__right p {
  width: 92%;
}

.scrollToOnas {
  cursor: pointer;
}

/*=========== Porfolio ===========*/

#portfolio {
  background: url("../img/portfolio_bg.webp") no-repeat;
  background-size: 30vw 100vh;
  overflow: hidden;
}

#portfolio .section1__arrow {
  transform: rotate(-90deg);
}

.arrowShowOrNot {
  right: 3%;
  top: 20px;
  position: absolute;
  display: none;
  border-radius: 7px;
  background: #fff;
  padding: 5px 10px;
  z-index: 9;
}

.portfolio__menu {
  position: absolute;
  left: -440px;
  top: 5.32%;
  background: #fff;
  color: #000;
  transform: rotate(-90deg);
  width: 100vh;
  z-index: 9;
  text-align: center;
}

.arrowShowOrNot p {
  margin: 0;
  padding-right: 8px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 13px;
}

.arrowShowOrNot img {
  width: 10px;
  -moz-animation: ArrowBounce 2s infinite;
  -webkit-animation: ArrowBounce 2s infinite;
  animation: ArrowBounce 2s infinite;
}

#portfolio .headingPortfolio {
  margin-top: 20px;
  position: relative;
}

#portfolio .headingPortfolio .headingPortfolio__line {
  width: 84%;
  height: 5px;
  background: #9565f5;
  position: absolute;
  top: 10px;
  left: 32%;
}

#portfolio .veryveryCircle {
  width: 300px;
  height: 300px;
  margin-left: 110px;
}

#portfolio .veryveryCircle:hover {
  transform: scale(0.95);
}

.veryveryCircle svg {
  animation-duration: 45s;
}

.veryveryCircle text {
  font-size: 25px;
}

#portfolio .veryveryCircle__logo {
  margin-left: -63px;
  top: 85px;
}

#portfolio .veryveryCircle textPath {
  font-weight: bold;
}

#portfolio .portfolio__grid {
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
  width: 90%;
  margin: 150px auto 0 auto;
}

#portfolio .portfolio__grid h3 {
  font-size: 23px;
}

/*=========== Porfolio Horizontal section ===========*/

#portfolio .Horizontal-section .Horizontal-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 100px;
}

#portfolio .Horizontal-section .Horizontal-info img {
  height: auto;
}

#portfolio .Horizontal-section .Horizontal-info div:nth-child(1) img {
  width: 100%;
}

#portfolio .Horizontal-section .Horizontal-info div:nth-child(2) img {
  width: 78%;
}

#portfolio .Horizontal-section .readmore {
  font-family: CenturyGothic-Bold;
  text-transform: none;
}

#portfolio .Horizontal-section .Horizontal-info2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 100px;
}

#portfolio .Horizontal-section .Horizontal-info2 div:nth-child(1) img,
#portfolio .Horizontal-section .Horizontal-info2 div:nth-child(2) img {
  width: 95%;
}

#portfolio .Horizontal-info2 .readmore {
  margin-bottom: 20px;
}

/*=========== Kontakt ===========*/

#kontakt {
  position: relative;
}

#kontakt .kontakt__heading {
  margin-top: 5%;
}

#kontakt .kontakt__bacgroundmain {
  width: 620px;
  position: absolute;
  bottom: 100px;
}

#kontakt h3 {
  margin: 8% 0 4% 0;
  font-family: "CenturyGothic-Bold";
}

#kontakt p,
#kontakt h3,
#kontakt .kontakt__heading {
  position: relative;
  z-index: 9;
}

#kontakt .kontakt__left {
  width: 50%;
}

#kontakt .kontakt__right .background {
  width: 500px;
  position: absolute;
  right: 5%;
  top: 3%;
  opacity: 0.85;
}

#kontakt .kontakt__right #logoKontakt {
  width: 250px;
  position: absolute;
  right: 10%;
  top: 30%;
}

#kontakt a {
  font-weight: bold;
  text-decoration: underline;
  color: #000;
}

/*========== Footer  ==========*/

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 160px;
  background: #f8f4f3;
}

footer .footer__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 990px;
  margin: 30px auto 0 auto;
}

footer .footer__social {
  text-align: right;
}

footer .footer__social .footer__social-ico {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: right;
  width: 130px;
  margin-left: auto;
}

footer .footer__social .footer__social-heading {
  margin-right: 7px;
}

footer .footer__social .footer__social-ico img {
  width: 30px;
  transition: 0.2s;
}

footer .footer__social .footer__social-ico img:hover {
  transform: scale(1.1);
}

footer .footer__social .footer__social-description {
  font-size: 11px;
}

footer .footer__social .footer__social-description a {
  color: #666666;
  text-decoration: underline;
}

footer .footer__logo img {
  width: 220px;
}
/*========== Keyframes  ==========*/

@keyframes movementBG {
  0%,
  100% {
    background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax,
      110vmax 110vmax, 90vmax 90vmax;
    background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax,
      -30vmax -10vmax, 50vmax 50vmax;
  }
  25% {
    background-size: 100vmax 100vmax, 90vmax 90vmax, 100vmax 100vmax,
      90vmax 90vmax, 60vmax 60vmax;
    background-position: -60vmax -90vmax, 50vmax -40vmax, 0vmax -20vmax,
      -40vmax -20vmax, 40vmax 60vmax;
  }
  50% {
    background-size: 80vmax 80vmax, 110vmax 110vmax, 80vmax 80vmax,
      60vmax 60vmax, 80vmax 80vmax;
    background-position: -50vmax -70vmax, 40vmax -30vmax, 10vmax 0vmax,
      20vmax 10vmax, 30vmax 70vmax;
  }
  75% {
    background-size: 90vmax 90vmax, 90vmax 90vmax, 100vmax 100vmax,
      90vmax 90vmax, 70vmax 70vmax;
    background-position: -50vmax -40vmax, 50vmax -30vmax, 20vmax 0vmax,
      -10vmax 10vmax, 40vmax 60vmax;
  }
}

@-moz-keyframes ArrowBounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes ArrowBounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes ArrowBounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes rotate {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0);
  }
}

/*========== Media queries ==========*/

/* == 2k Resolution == */

@media screen and (min-width: 2040px) {
  #mainWID .mainDIV {
    width: 1920px !important;
    margin: 0 auto !important;
  }
  #portfolio .headingPortfolio .headingPortfolio__line {
    left: 23% !important;
    width: 95% !important;
  }

  #onas .onas__headingInfo,
  #onas .onas__right h3,
  #portfolio .portfolio__grid h3 {
    font-size: 34px;
  }

  #onas .onas__left p,
  #onas .onas__right p,
  .portfolio__grid p {
    font-size: var(--paragraphs-2k);
    line-height: 35px;
    width: 94%;
  }

  #onas .onas__right {
    margin-top: 500px;
  }

  .single-item .absolute {
    transform: scale(1.2);
    right: 2%;
  }

  .items__layer img,
  .items__layer video {
    width: 700px;
    transform: translate(-50%, -70%);
  }

  .section1 .section1__social {
    top: 44%;
  }

  .section1__afterVideo .section1__afterVideo-menu ul li a {
    font-size: 28px;
  }

  .section1__afterVideo .section1__afterVideo-menu {
    width: 900px;
    margin-left: -445px;
  }

  .veryveryCircle {
    transform: scale(1.3);
  }

  .section1 .section1__social img {
    width: 50px;
    margin: 9px 0;
  }

  #portfolio .portfolio__grid {
    margin-top: 300px;
  }

  .section1__arrow img {
    transform: scale(1.2);
  }

  #mainWID .horizontal-scroll .Horizontal-section .mainDIV {
    margin-top: 180px !important;
  }

  .Horizontal-section .Horizontal-info__heading {
    font-size: 27px;
  }

  .horizontal-scroll .single-item p {
    font-size: var(--paragraphs-2k);
  }

  #portfolio .Horizontal-section .readmore {
    padding: 8px 35px;
    font-size: 19px;
  }

  #portfolio .Horizontal-section .Horizontal-info div:nth-child(2) img {
    width: 90%;
  }

  #portfolio .Horizontal-section .Horizontal-info2 div:nth-child(1) img,
  #portfolio .Horizontal-section .Horizontal-info2 div:nth-child(2) img {
    width: 100%;
  }

  #kontakt .kontakt__right #logoKontakt {
    width: 450px;
  }

  #kontakt .kontakt__right .background {
    width: 800px;
  }

  #kontakt h3 {
    font-size: 40px !important;
  }

  #kontakt .kontakt__bacgroundmain {
    width: 800px;
  }

  #kontakt p {
    font-size: 20px;
  }

  .footer__social-description {
    margin: 5px 0;
  }

  .arrowShowOrNot p {
    font-size: 17px;
    padding-right: 18px;
  }

  .arrowShowOrNot img {
    width: 20px;
  }

  .fixed__menuHamburger {
    transform: scale(1.5);
  }
}

/* === Portfolio line position === */

@media screen and (max-width: 2039px) {
  #portfolio .headingPortfolio .headingPortfolio__line {
    left: 27% !important;
    width: 141% !important;
  }
}

@media screen and (max-width: 2001px) {
  #portfolio .headingPortfolio .headingPortfolio__line {
    left: 32% !important;
  }
}

@media screen and (max-width: 1716px) {
  #portfolio .headingPortfolio .headingPortfolio__line {
    left: 35% !important;
  }

  #kontakt .kontakt__right .background {
    width: 420px;
  }
}

@media screen and (max-width: 1555px) {
  #portfolio .headingPortfolio .headingPortfolio__line {
    left: 40% !important;
    width: 90% !important;
  }
}

/* ==  Desktop resolution == */

@media screen and (max-width: 1601px) {
  .horizontal-scroll .Horizontal-section .mainDIV {
    margin-top: 55px;
  }

  #portfolio .Horizontal-section .Horizontal-info div:nth-child(2) img {
    width: 74%;
  }

  #portfolio .Horizontal-section .Horizontal-info2 div:nth-child(1) img,
  #portfolio .Horizontal-section .Horizontal-info2 div:nth-child(2) img {
    width: 85%;
  }
}

@media screen and (max-width: 1601px) and (min-height: 1000px) {
  .horizontal-scroll .Horizontal-section .mainDIV {
    margin-top: 180px;
  }
}

@media screen and (max-width: 1441px) {
  #mainWID .nominalWIDTH {
    width: 92% !important;
  }
}

@media screen and (max-width: 1290px) {
  .section1__arrow {
    display: none !important;
  }

  #onas .onas__headingInfo {
    margin-top: 10px;
  }

  #onas .onas__right {
    margin-top: 70px;
  }

  #onas .onas__right p {
    width: 100%;
  }

  #onas .onas__right .onas__right-imgHeading {
    width: 340px;
    padding-bottom: 20px;
  }
  #onas .onas__right .onas__rightheading-border {
    height: 7px;
  }
  #portfolio .headingPortfolio .headingPortfolio__line {
    display: none;
  }

  #portfolio .Horizontal-section .Horizontal-info2 div:nth-child(2) img {
    width: 72%;
  }

  #kontakt .kontakt__right .background {
    width: 250px;
    right: 10%;
  }

  #kontakt .kontakt__right #logoKontakt {
    width: 140px;
  }

  .kontakt__heading {
    width: 380px !important;
  }
}

@media screen and (max-width: 1290px) and (min-height: 900px) {
  #onas .onas__right {
    margin-top: 280px;
  }
}

@media screen and (max-width: 1290px) and (max-height: 800px) {
  #portfolio .portfolio__grid {
    margin-top: 50px;
  }

  #portfolio .veryveryCircle {
    margin-left: 40px;
  }
}

@media screen and (max-width: 1290px) and (max-height: 620px) {
  #portfolio .Horizontal-info__heading {
    margin: 8px 0;
  }
  #portfolio .Horizontal-section .Horizontal-info div:nth-child(2) img {
    width: 67%;
  }
  #portfolio .Horizontal-section .Horizontal-info p {
    margin: 20px 0;
  }

  .horizontal-scroll .Horizontal-section .mainDIV {
    margin-top: 10px;
  }
  .horizontal-scroll .single-item {
    margin-top: 5px;
  }
}

/* == First Break point == */

@media screen and (max-width: 1150px) {
  #onas .onas__grid {
    display: block;
  }
  #onas .onas__right .onas__rightheading-border {
    width: 100%;
    position: relative;
  }

  #onas .onas__right {
    margin-top: 10px;
  }

  #onas .onas__right .onas__rightheading-border {
    height: 5px;
  }

  #onas .onas__right h3,
  #onas .onas__left .onas__left-paragraph {
    margin-top: 15px;
  }

  footer .footer__grid {
    width: 85%;
  }
}

@media screen and (max-width: 1000px) and (min-height: 1200px) {
  #onas .onas__right {
    margin-top: 280px;
  }
}

@media screen and (max-width: 990px) {
  #portfolio .headingPortfolio img {
    display: block;
    text-align: center;
    margin: 0 auto;
    width: 70%;
  }
  #portfolio .portfolio__grid {
    display: block;
    margin-top: 100px;
    width: 100%;
  }

  #portfolio .veryveryCircle {
    display: none;
  }
  #portfolio .Horizontal-section .Horizontal-info div:nth-child(2) img {
    display: none;
  }

  #portfolio .Horizontal-section .Horizontal-info {
    display: block;
  }

  #portfolio .Horizontal-section .Horizontal-info div:nth-child(1) img {
    width: 500px;
    margin: 0 auto;
    display: block;
  }

  #portfolio .Horizontal-info__heading {
    text-align: center;
    margin-top: 30px;
  }

  #portfolio .Horizontal-section .Horizontal-info p,
  .horizontal-scroll .single-item p {
    text-align: center;
  }

  #portfolio .Horizontal-section .readmore {
    display: block;
    margin: 0 auto;
    width: 50%;
  }

  .items__layer {
    height: 40%;
  }

  #portfolio .Horizontal-section .Horizontal-info2 {
    display: block;
  }
  #portfolio .Horizontal-section .Horizontal-info2 div:nth-child(1) img {
    width: 250px;
    margin: 0 auto;
    display: block;
  }
  #portfolio .Horizontal-section .Horizontal-info2 div:nth-child(2) img {
    display: none;
  }

  #kontakt .kontakt__right .background,
  #kontakt .kontakt__right #logoKontakt {
    display: none;
  }

  #kontakt .kontakt__left {
    width: 95%;
  }
  .items__layer img,
  .items__layer video {
    display: none;
  }

  .header__logo-mobile img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 110px;
    margin-top: -55px; /* Half the height */
    margin-left: -100px; /* Half the width */
  }

  .arrowShowOrNot {
    display: none !important;
  }
}

@media screen and (max-width: 850px) {
  #supportError {
    display: block;
    text-align: center;
    margin-top: 20%;
  }
  #mainWID {
    display: none;
  }
}