.body {
  height: 100vh;
  background-image: url('../images/bg.gif');
  background-position: 0px 0px;
  background-size: 127px;
  background-attachment: fixed;
}

.logo {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  z-index: 1000;
  width: 35px;
  height: 35px;
  margin-top: 70px;
  margin-right: auto;
  margin-left: auto;
  background-image: url('../images/logo.png');
  background-position: 0px 0px;
  background-size: contain;
  background-repeat: no-repeat;
}

.utility-page-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100vw;
  height: 100vh;
  max-height: 100%;
  max-width: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.utility-page-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 260px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
}

.utility-page-form {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.preloader {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 2000;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-image: url('../images/bg_1.gif'), -webkit-linear-gradient(270deg, #fff, #fff);
  background-image: url('../images/bg_1.gif'), linear-gradient(180deg, #fff, #fff);
  background-position: 50% 0px, 0px 0px;
  background-size: 70px, auto;
  background-attachment: fixed, scroll;
}

.scroll-box {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: block;
  width: 110px;
  height: 24px;
  margin-right: auto;
  margin-bottom: 115px;
  margin-left: auto;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.txt-kolumna {
  position: relative;
  left: 0px;
  top: 0px;
  right: 0px;
  display: block;
  width: 120px;
  height: 20px;
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  direction: ltr;
  font-family: Karla, sans-serif;
  font-size: 13px;
  text-align: left;
  text-transform: uppercase;
}

.txt-kolumna.about {
  left: -45px;
  top: 46px;
  right: 0px;
  height: 20px;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  color: #353535;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.scroll-kreska {
  position: relative;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: block;
  overflow: hidden;
  width: 45px;
  height: 1px;
  margin-top: 2px;
  margin-left: 0px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto;
}

.scroll-kreska.about {
  width: 59px;
}

.kreska {
  display: block;
  width: 100%;
  height: 100%;
  margin-top: 0px;
  background-image: -webkit-linear-gradient(270deg, #353535, #353535);
  background-image: linear-gradient(180deg, #353535, #353535);
}

.kreska.about {
  background-image: -webkit-linear-gradient(270deg, #fff, #fff);
  background-image: linear-gradient(180deg, #fff, #fff);
}

.kolumna-projektowa {
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: auto;
  display: block;
  overflow: visible;
  width: 45%;
  height: 500px;
  max-width: 350px;
  margin-right: 10px;
  margin-left: 10px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.kolumna-projektowa.prawa {
  position: relative;
  display: block;
  height: 500px;
  margin-top: 26%;
  margin-bottom: 20px;
  padding-bottom: 0px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.kolumna-projektowa.poziom {
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 350px;
  max-height: 350px;
  max-width: 100%;
  margin-right: auto;
  margin-bottom: 20px;
  margin-left: auto;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-content: flex-end;
  -ms-flex-line-pack: end;
  align-content: flex-end;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.projekt {
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 500px;
  margin-bottom: 20vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 1;
}

.projekt.poziom {
  display: block;
  width: 550px;
  height: 350px;
  max-height: 350px;
  max-width: 550px;
  margin-right: auto;
  margin-left: auto;
}

.img-parallax {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 0.2;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  -webkit-transition: opacity 500ms ease, -webkit-transform 500ms ease;
  transition: opacity 500ms ease, -webkit-transform 500ms ease;
  transition: opacity 500ms ease, transform 500ms ease;
  transition: opacity 500ms ease, transform 500ms ease, -webkit-transform 500ms ease;
}

.obrazek {
  position: relative;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin-right: 0px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  background-image: url('../images/dupa3.jpg'), -webkit-linear-gradient(270deg, #d8d0ab, #d8d0ab);
  background-image: url('../images/dupa3.jpg'), linear-gradient(180deg, #d8d0ab, #d8d0ab);
  background-position: 50% 50%, 0px 0px;
  background-size: cover, auto;
  background-repeat: no-repeat, repeat;
  background-attachment: fixed, scroll;
  -webkit-transform-origin: 50% 0% 0px;
  -ms-transform-origin: 50% 0% 0px;
  transform-origin: 50% 0% 0px;
  cursor: pointer;
}

.obrazek._2 {
  background-image: url('../images/Bez-nazwy-2.jpg'), -webkit-linear-gradient(270deg, #d8d0ab, #d8d0ab);
  background-image: url('../images/Bez-nazwy-2.jpg'), linear-gradient(180deg, #d8d0ab, #d8d0ab);
  background-position: 50% 100%, 0px 0px;
  background-size: cover, auto;
  background-repeat: no-repeat, repeat;
  background-attachment: scroll, scroll;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.obrazek._3 {
  background-image: url('../images/arque.jpg'), -webkit-linear-gradient(270deg, #ff8ca4, #ff8ca4);
  background-image: url('../images/arque.jpg'), linear-gradient(180deg, #ff8ca4, #ff8ca4);
  background-position: -225px 50%, 0px 0px;
  background-size: cover, auto;
}

.obrazek._4 {
  background-image: url('../images/personal.jpg'), -webkit-linear-gradient(270deg, #d8d0ab, #d8d0ab);
  background-image: url('../images/personal.jpg'), linear-gradient(180deg, #d8d0ab, #d8d0ab);
  background-position: 69% 50%, 0px 0px;
  background-size: cover, auto;
  background-attachment: scroll, scroll;
}

.obrazek._5 {
  background-image: url('../images/Bez-nazwy-4.jpg'), -webkit-linear-gradient(270deg, #d8d0ab, #d8d0ab);
  background-image: url('../images/Bez-nazwy-4.jpg'), linear-gradient(180deg, #d8d0ab, #d8d0ab);
  background-position: 100% 50%, 0px 0px;
  background-size: cover, auto;
  background-attachment: fixed, scroll;
}

.obrazek.prawa {
  background-image: url('../images/dupa3.jpg'), -webkit-linear-gradient(270deg, null, null);
  background-image: url('../images/dupa3.jpg'), linear-gradient(180deg, null, null);
  background-position: 50% 50%, 0px 0px;
  background-attachment: scroll, scroll;
}

.szkielet {
  position: absolute;
  width: 100%;
  height: 100%;
}

.lewa-kolumna {
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 1000;
  width: 18%;
  height: 100%;
}

.lewa-kolumna.projekt {
  z-index: 2000;
}

.lewa-kolumna.levelup {
  z-index: 2001;
}

.srodek {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 64%;
  margin-top: 20vh;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 20vh;
  clear: none;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
}

.srodek.mobile {
  z-index: 0;
  display: none;
}

.srodek.test {
  display: none;
}

.prawa-kolumna {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 1000;
  width: 18%;
  height: 100%;
}

.prawa-kolumna.projekt {
  z-index: 2000;
}

.prawa-kolumna.levelup {
  z-index: 2001;
}

.nazwa-projektu {
  position: fixed;
  left: 0px;
  top: -30px;
  right: 0px;
  bottom: 0px;
  z-index: 2;
  display: block;
  width: 500px;
  height: 70px;
  margin: 50vh auto;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto;
  opacity: 0;
}

.nazwa-projektu.audi {
  position: fixed;
  display: block;
  margin-right: auto;
  margin-left: auto;
  opacity: 0;
}

.nazwa-projektu.projekt {
  position: absolute;
  z-index: 16;
  overflow: visible;
  opacity: 0;
}

.project-name {
  position: relative;
  top: 34px;
  display: inline-block;
  width: 100%;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  opacity: 1;
  font-family: Noedisplay, Georgia, sans-serif;
  color: #353535;
  font-size: 90px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}

.project-name.projektowa {
  top: 9px;
  z-index: 19;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 0;
  font-family: Noedisplay, Georgia, sans-serif;
  font-size: 110px;
  font-weight: 500;
}

.numerek {
  position: relative;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: block;
  width: 12px;
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;
  font-family: Noedisplay, Georgia, sans-serif;
  color: #353535;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.counter {
  position: fixed;
  left: 0px;
  top: 55px;
  right: 0px;
  bottom: 0px;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 50px;
  height: 20px;
  margin: 50vh auto;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  opacity: 0;
}

.counter.arque {
  top: 70px;
}

.div-block-2 {
  position: relative;
  width: 1px;
  height: 13px;
  margin-top: 2px;
  background-image: -webkit-linear-gradient(270deg, rgba(53, 53, 53, .5), rgba(53, 53, 53, .5));
  background-image: linear-gradient(180deg, rgba(53, 53, 53, .5), rgba(53, 53, 53, .5));
  -webkit-transform: rotate(38deg);
  -ms-transform: rotate(38deg);
  transform: rotate(38deg);
}

.loading {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: block;
  overflow: hidden;
  width: 30px;
  height: 50px;
  margin: 50vh auto;
}

.menu {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 16px;
  height: 12px;
  margin: 0px auto 75px;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 0.3;
  -webkit-transition: opacity 600ms cubic-bezier(.474, .375, .111, .937);
  transition: opacity 600ms cubic-bezier(.474, .375, .111, .937);
  cursor: pointer;
}

.menu:hover {
  opacity: 1;
}

.line-1 {
  position: relative;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: block;
  width: 10px;
  height: 2px;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  background-image: -webkit-linear-gradient(270deg, #353535, #353535);
  background-image: linear-gradient(180deg, #353535, #353535);
}

.mid-line {
  width: 100%;
  height: 2px;
  background-image: -webkit-linear-gradient(270deg, #353535, #353535);
  background-image: linear-gradient(180deg, #353535, #353535);
}

.menu-projects {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 30;
  display: none;
  width: 100%;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  opacity: 1;
  -webkit-perspective: 1200px;
  perspective: 1200px;
}

.allprojects-txt {
  position: relative;
  display: block;
  margin-right: auto;
  margin-bottom: 50px;
  margin-left: auto;
  -webkit-box-flex: 0;
  -webkit-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto;
  opacity: 1;
  font-family: Karla, sans-serif;
  font-size: 13px;
  text-align: center;
  text-transform: uppercase;
}

.menu-project-name {
  position: absolute;
  z-index: 4;
  display: inline-block;
  overflow: visible;
  height: 58px;
  margin-right: auto;
  margin-left: 100%;
  padding-top: 30px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  opacity: 1;
  -webkit-transition: opacity 200ms cubic-bezier(.215, .61, .355, 1);
  transition: opacity 200ms cubic-bezier(.215, .61, .355, 1);
  font-family: Noedisplay, Georgia, sans-serif;
  color: #353535;
  font-size: 60px;
  font-weight: 500;
  text-align: center;
}

.menu-project-name:hover {
  opacity: 1;
}

.line-3 {
  display: block;
  width: 10px;
  height: 2px;
  margin-right: auto;
  margin-left: auto;
  background-image: -webkit-linear-gradient(270deg, #353535, #353535);
  background-image: linear-gradient(180deg, #353535, #353535);
}

.projekt-hover {
  position: relative;
  z-index: 29;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.kontener-zaslepka-lirene {
  position: fixed;
  left: 0px;
  top: -30px;
  right: 0px;
  z-index: 15;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 260px;
  height: 70px;
  margin: 50vh auto;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.zaslepka-lirene {
  position: relative;
  z-index: auto;
  display: block;
  overflow: visible;
  width: 100%;
  height: 100%;
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  background-image: -webkit-linear-gradient(0deg, #1a69eb, #e7d290 83%);
  background-image: linear-gradient(90deg, #1a69eb, #e7d290 83%);
}

.zaslepka-lirene.projekt {
  z-index: 19;
  height: 90px;
}

.zaslepka-lirene.projekt.arque {
  height: 108px;
  background-image: -webkit-linear-gradient(0deg, #ff8ca4, #4711b5 99%);
  background-image: linear-gradient(90deg, #ff8ca4, #4711b5 99%);
}

.zaslepka-lirene.projekt.personal {
  background-image: -webkit-linear-gradient(0deg, #e31726, #06e5f9);
  background-image: linear-gradient(90deg, #e31726, #06e5f9);
}

.zaslepka-lirene.projekt.audi {
  background-image: -webkit-linear-gradient(0deg, #937cdb, #88e5c4 83%);
  background-image: linear-gradient(90deg, #937cdb, #88e5c4 83%);
}

.zaslepka-audi {
  width: 100%;
  height: 100%;
  margin-top: 0px;
  background-image: -webkit-linear-gradient(0deg, #937cdb, #88e5c4);
  background-image: linear-gradient(90deg, #937cdb, #88e5c4);
}

.kontener-zaslepka-audi {
  position: fixed;
  left: 0px;
  top: -30px;
  right: 3px;
  z-index: 10;
  display: block;
  overflow: hidden;
  width: 185px;
  height: 70px;
  margin: 50vh auto;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.kontener-zaslepka-audi.in_project {
  left: 0px;
  top: auto;
  right: 3px;
  bottom: -30px;
  width: 215px;
  height: 95px;
  margin-top: auto;
  margin-bottom: auto;
}

.kontener-zaslepka-audi.in_project.personal {
  width: 405px;
}

.kontener-zaslepka-audi.in_project.older {
  width: 275px;
}

.kontener-zaslepka-audi.in_project.lirene {
  width: 315px;
}

.kontener-zaslepka-audi.in_project.arque {
  width: 290px;
}

.kontener-zaslepka-brasil {
  position: fixed;
  left: 0px;
  top: -30px;
  right: 0px;
  z-index: 10;
  display: block;
  overflow: hidden;
  width: 240px;
  height: 87px;
  margin: 50vh auto;
}

.zaslepka-brasil {
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(0deg, #ff8ca4, #4711b5);
  background-image: linear-gradient(90deg, #ff8ca4, #4711b5);
}

.kontener-zaslepka-personal {
  position: fixed;
  left: 0px;
  top: -30px;
  right: 0px;
  z-index: 10;
  display: block;
  overflow: hidden;
  width: 341px;
  height: 70px;
  margin: 50vh auto;
}

.zaslepka-personal {
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(180deg, #06e5f9, #e31726);
  background-image: linear-gradient(270deg, #06e5f9, #e31726);
}

.kontener-zaslepka-older {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: -40px;
  z-index: 10;
  display: block;
  overflow: hidden;
  width: 220px;
  height: 70px;
  margin: 50vh auto;
}

.kontener-zaslepka-older.in_project {
  left: 0px;
  right: 0px;
  bottom: -30px;
  width: 270px;
  height: 95px;
  margin-top: auto;
  margin-bottom: auto;
}

.kontener-zaslepka-older.in_project.audi {
  width: 230px;
}

.kontener-zaslepka-older.in_project.arque {
  width: 285px;
}

.kontener-zaslepka-older.in_project.personal {
  width: 415px;
}

.kontener-zaslepka-older.in_project.lirene {
  width: 320px;
}

.zaslepka-older {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(0deg, #1a69eb, #e7d290 82%);
  background-image: linear-gradient(90deg, #1a69eb, #e7d290 82%);
}

.about_and_cont {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  display: block;
  overflow: hidden;
  width: 30px;
  height: 113px;
  margin-top: 70px;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  text-decoration: none;
}

.kreska-about {
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  display: block;
  width: 1px;
  height: 0%;
  margin-right: auto;
  margin-left: auto;
  background-image: -webkit-linear-gradient(270deg, #353535, #353535);
  background-image: linear-gradient(180deg, #353535, #353535);
  opacity: 1;
}

.kreska-about.sekcja {
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  display: block;
  height: 110px;
  margin-right: auto;
  margin-left: auto;
  background-image: -webkit-linear-gradient(270deg, #fff, #fff);
  background-image: linear-gradient(180deg, #fff, #fff);
}

.project-names {
  position: relative;
  left: 0px;
  top: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 64%;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-box-flex: 0;
  -webkit-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto;
}

.link-block-2 {
  position: relative;
  display: block;
  overflow: hidden;
  height: auto;
  margin-right: auto;
  margin-bottom: 10px;
  margin-left: auto;
  padding-bottom: 0px;
  float: none;
  clear: none;
  opacity: 0;
}

.kontener-zaslepka-menu {
  position: relative;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 1;
  overflow: hidden;
  width: 170px;
  height: 74px;
  margin-left: 0px;
}

.kontener-zaslepka-menu.audica {
  overflow: hidden;
  width: 124px;
}

.kontener-zaslepka-menu.brasil {
  width: 160px;
}

.kontener-zaslepka-menu.personal {
  width: 228px;
}

.kontener-zaslepka-menu.older {
  width: 145px;
}

.kontener-zaslepka-menu.arque {
  width: 223px;
}

.zaslepka-menu {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 3;
  overflow: hidden;
  width: 100%;
  height: 35px;
  padding-top: 0px;
  background-image: -webkit-linear-gradient(0deg, #589af8, #e7d290 82%);
  background-image: linear-gradient(90deg, #589af8, #e7d290 82%);
}

.zaslepka-menu.audica {
  background-image: -webkit-linear-gradient(0deg, #88e5c4, #937cdb);
  background-image: linear-gradient(90deg, #88e5c4, #937cdb);
}

.zaslepka-menu.brasilica {
  background-image: -webkit-linear-gradient(0deg, #4711b5, #ff8ca4);
  background-image: linear-gradient(90deg, #4711b5, #ff8ca4);
}

.zaslepka-menu.personalica {
  background-image: -webkit-linear-gradient(0deg, #e31726, #06e5f9);
  background-image: linear-gradient(90deg, #e31726, #06e5f9);
}

.zaslepka-menu.olderica {
  background-image: -webkit-linear-gradient(0deg, #589af8, #e7d290);
  background-image: linear-gradient(90deg, #589af8, #e7d290);
}

.menu_close {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 1001;
  display: none;
  overflow: visible;
  width: 16px;
  height: 15px;
  margin-bottom: 12vh;
  background-image: -webkit-linear-gradient(270deg, #881818, #881818);
  background-image: linear-gradient(180deg, #881818, #881818);
}

.blokada {
  position: fixed;
  z-index: 3000;
  display: block;
  width: 100%;
  height: 100%;
}

.zolty {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(270deg, #e7d290, #e7d290);
  background-image: linear-gradient(180deg, #e7d290, #e7d290);
}

.niebieski {
  position: absolute;
  width: 100%;
  height: 100%;
  margin-left: -100%;
  background-image: -webkit-linear-gradient(270deg, #64c7ec, #64c7ec);
  background-image: linear-gradient(180deg, #64c7ec, #64c7ec);
}

.zielony {
  position: absolute;
  width: 100%;
  height: 100%;
  margin-left: -100%;
  background-image: -webkit-linear-gradient(270deg, #88e5c4, #88e5c4);
  background-image: linear-gradient(180deg, #88e5c4, #88e5c4);
}

.fioletowy {
  position: absolute;
  width: 100%;
  height: 100%;
  margin-left: -100%;
  background-image: -webkit-linear-gradient(270deg, #937cdb, #937cdb);
  background-image: linear-gradient(180deg, #937cdb, #937cdb);
}

.zolty2 {
  width: 100%;
  height: 100%;
  margin-left: -100%;
  background-image: -webkit-linear-gradient(270deg, #e7d290, #e7d290);
  background-image: linear-gradient(180deg, #e7d290, #e7d290);
}

.aboutcontact {
  position: absolute;
  z-index: 2002;
  display: none;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 0;
}

.txt-about {
  display: block;
  overflow: visible;
  width: 65%;
  height: 100%;
  margin-top: -30px;
  padding-top: 10vh;
  padding-bottom: 10vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-align-content: space-around;
  -ms-flex-line-pack: distribute;
  align-content: space-around;
  -webkit-box-flex: 0;
  -webkit-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto;
  opacity: 0;
}

.heading-1 {
  position: relative;
  margin-top: 10px;
  margin-right: 0px;
  margin-bottom: 0px;
  float: none;
  clear: left;
  opacity: 1;
  font-family: Noedisplay, Georgia, sans-serif;
  color: #fff;
  font-size: 50px;
  line-height: 80px;
  font-weight: 500;
}

.heading-1.paragraf {
  margin-top: 60px;
}

.heading-3 {
  position: relative;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: block;
  margin-right: 10px;
  float: left;
  clear: none;
  -webkit-box-flex: 0;
  -webkit-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto;
  opacity: 1;
  font-family: Noedisplay, Georgia, sans-serif;
  color: #f1f1f1;
  font-size: 50px;
  line-height: 38px;
  font-weight: 500;
}

.paragraph {
  width: 70%;
  margin-top: 120px;
  margin-left: 0px;
  opacity: 0;
  font-family: Karla, sans-serif;
  color: hsla(0, 0%, 96%, .3);
  font-size: 13px;
  line-height: 30px;
  font-weight: 400;
}

.przekreslenie {
  position: absolute;
  left: 0px;
  top: 25px;
  right: 0px;
  bottom: 0px;
  width: 339px;
  height: 4px;
  background-image: -webkit-linear-gradient(0deg, #d61635, #64c7ec);
  background-image: linear-gradient(90deg, #d61635, #64c7ec);
}

.tekscik {
  margin-top: 0px;
  margin-right: 10px;
  margin-bottom: 0px;
  float: left;
  color: #fff;
  font-size: 50px;
  line-height: 60px;
  font-weight: 500;
}

.tekscik.inactive {
  opacity: 0.15;
}

.contactme {
  position: relative;
  left: 0px;
  bottom: 0px;
  height: 100px;
  margin-top: 60px;
  float: left;
  opacity: 0;
  font-family: Karla, sans-serif;
  color: #e7d290;
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
}

.close-contact {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  display: block;
  overflow: hidden;
  width: 30px;
  height: 113px;
  margin-top: 70px;
  margin-right: auto;
  margin-left: auto;
  text-decoration: none;
}

.txt-link-zamknij {
  position: relative;
  left: -40px;
  top: -64%;
  right: 0px;
  display: block;
  width: 113px;
  height: 20px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 0px;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  font-family: Karla, sans-serif;
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
}

.txt-kolumna-2 {
  position: relative;
  left: 0px;
  top: 0px;
  right: 0px;
  display: block;
  width: 120px;
  height: 20px;
  margin-right: auto;
  margin-left: auto;
  font-family: Karla, sans-serif;
  color: #353535;
  font-size: 13px;
  text-transform: uppercase;
}

.txt-kolumna-2.about {
  color: #fff;
}

.link-home {
  width: 100%;
  height: 100%;
}

.sekcja-opis {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}

.project-image {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  margin-bottom: 150px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.project-image.ostatni {
  margin-bottom: 130px;
}

.zaslepka-2 {
  position: absolute;
  z-index: 1;
  display: block;
  width: 0px;
  height: 62px;
  margin-top: 50px;
  margin-left: 0px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  background-image: -webkit-linear-gradient(0deg, #589af8, #e7d290);
  background-image: linear-gradient(90deg, #589af8, #e7d290);
}

.zaslepka-2.arque {
  height: 58px;
  background-image: -webkit-linear-gradient(0deg, #ff8ca4, #4711b5);
  background-image: linear-gradient(90deg, #ff8ca4, #4711b5);
}

.zaslepka-2.personal {
  position: absolute;
  overflow: visible;
  margin-left: 0px;
  background-image: -webkit-linear-gradient(0deg, #e31726, #06e5f9);
  background-image: linear-gradient(90deg, #e31726, #06e5f9);
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

.zaslepka-2.audi {
  background-image: -webkit-linear-gradient(0deg, #937cdb, #88e5c4);
  background-image: linear-gradient(90deg, #937cdb, #88e5c4);
}

.content {
  position: relative;
  left: 0px;
  top: 0px;
  right: 0px;
  z-index: 20;
  display: block;
  width: 64%;
  margin-top: 100vh;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 0px;
}

.zaslepka_projekt {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  z-index: auto;
  display: block;
  overflow: hidden;
  width: 305px;
  height: 114px;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.zaslepka_projekt.personal {
  width: 420px;
}

.zaslepka_projekt.older {
  width: 270px;
}

.zaslepka_projekt.arque {
  width: 295px;
}

.zaslepka_projekt.audi {
  width: 230px;
}

.paragraph-2 {
  position: relative;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: block;
  width: 70%;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  font-family: Karla, sans-serif;
  color: #9b9b9b;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
}

.paragraph-2.mobile {
  display: none;
}

.div-block-6 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 54%;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}

.div-block-7 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(270deg, #fff, #fff);
  background-image: linear-gradient(180deg, #fff, #fff);
}

.bg {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background-image: url('../images/bg_dark.gif');
  background-position: 50% 0px;
  opacity: 1;
}

.div-block-8 {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: visible;
  width: 100%;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.div-block-9 {
  position: relative;
  float: left;
}

.aboutme {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: block;
  width: 110px;
  height: 24px;
  margin-right: auto;
  margin-bottom: 115px;
  margin-left: auto;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.behance {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: block;
  width: 40px;
  height: 40px;
  margin-right: auto;
  margin-bottom: 160px;
  margin-left: auto;
  opacity: 0.3;
  -webkit-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
}

.behance:hover {
  opacity: 1;
}

.linkedin {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 210px;
  display: block;
  width: 40px;
  height: 40px;
  margin-right: auto;
  margin-left: auto;
  opacity: 0.3;
  -webkit-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
}

.linkedin:hover {
  opacity: 1;
}

.link-behance {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('../images/behance.svg');
  background-position: 0px 0px;
  background-size: cover;
  background-repeat: no-repeat;
}

.link-linkedin {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('../images/linkedin.svg');
  background-position: 0px 0px;
  background-size: cover;
  background-repeat: no-repeat;
}

.opis-gora {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 64%;
  height: 30%;
  margin-right: auto;
  margin-left: auto;
  padding-top: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.opis-srodek {
  position: fixed;
  display: block;
  width: 100%;
  height: 90px;
  margin-top: -30px;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-perspective: 1200px;
  perspective: 1200px;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}

.opis-dol {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 64%;
  height: 40%;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-perspective-origin: 50% 0%;
  perspective-origin: 50% 0%;
}

.project-info-txt {
  margin-right: 10px;
  font-family: Karla, sans-serif;
  color: #a1a1a1;
  font-size: 12px;
  text-transform: uppercase;
}

.project-info-txt.ukryty {
  display: none;
}

.data-project-txt {
  font-family: Noedisplay, Georgia, sans-serif;
  color: #353535;
  font-size: 20px;
  font-weight: 700;
}

.data-project-txt.ukryty {
  display: none;
}

.separator {
  width: 40px;
  height: 10px;
}

.separator.ukryty {
  display: none;
}

.next-project {
  position: relative;
  z-index: 19;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 64%;
  height: 160px;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  opacity: 0;
}

.next {
  position: relative;
  left: 0px;
  top: 0px;
  right: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: auto;
  height: 40px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  text-decoration: none;
}

.text-block {
  margin-right: 30px;
  margin-left: 30px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto;
  opacity: 0.4;
  font-family: Karla, sans-serif;
  color: #353535;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

.div-block-10 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 30px;
  height: 40px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 1;
}

.kreska-next {
  width: 15px;
  height: 1px;
  background-image: -webkit-linear-gradient(270deg, #353535, #353535);
  background-image: linear-gradient(180deg, #353535, #353535);
  opacity: 0.4;
}

.prev {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 40px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  text-decoration: none;
}

.project-title {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  opacity: 0;
  font-family: Noedisplay, Georgia, sans-serif;
  color: #353535;
  font-size: 110px;
  font-weight: 500;
  text-align: center;
}

.project-title.audi {
  color: #353535;
}

.zaslepka-prev {
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(0deg, #589af8, #e7d290);
  background-image: linear-gradient(90deg, #589af8, #e7d290);
}

.zaslepka-prev.arque {
  background-image: -webkit-linear-gradient(0deg, #ff8ca4, #4711b5);
  background-image: linear-gradient(90deg, #ff8ca4, #4711b5);
}

.zaslepka-prev.audi {
  background-image: -webkit-linear-gradient(0deg, #937cdb, #88e5c4);
  background-image: linear-gradient(90deg, #937cdb, #88e5c4);
}

.zaslepka-prev.personal {
  background-image: -webkit-linear-gradient(0deg, #e31726, #06e5f9);
  background-image: linear-gradient(90deg, #e31726, #06e5f9);
}

.zaslepka-next {
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(0deg, #937cdb, #88e5c4);
  background-image: linear-gradient(90deg, #937cdb, #88e5c4);
}

.zaslepka-next.personal {
  background-image: -webkit-linear-gradient(0deg, #e31726, #06e5f9);
  background-image: linear-gradient(90deg, #e31726, #06e5f9);
}

.zaslepka-next.older {
  background-image: -webkit-linear-gradient(0deg, #589af8, #e7d290);
  background-image: linear-gradient(90deg, #589af8, #e7d290);
}

.zaslepka-next.lirene {
  background-image: -webkit-linear-gradient(0deg, #589af8, #e7d290);
  background-image: linear-gradient(90deg, #589af8, #e7d290);
}

.zaslepka-next.arque {
  background-image: -webkit-linear-gradient(0deg, #ff8ca4, #4711b5);
  background-image: linear-gradient(90deg, #ff8ca4, #4711b5);
}

.menu-projects-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url('../images/bg_1.gif');
  background-position: 0px 0px;
  background-size: 127px;
  background-attachment: fixed;
  opacity: 1;
}

.section {
  position: static;
  display: block;
  height: 0px;
}

.category {
  margin-bottom: 40px;
  font-family: Karla, sans-serif;
  color: #a1a1a1;
  font-size: 12px;
  text-transform: uppercase;
}

.introduction-title {
  position: absolute;
  top: 0px;
  right: 0px;
  font-family: Karla, sans-serif;
  color: #353535;
  font-size: 13px;
  font-weight: 400;
  text-align: right;
  letter-spacing: normal;
  text-transform: uppercase;
}

.introduction-title.description {
  margin-top: 20px;
  color: #ababab;
}

.introduction-title.year {
  margin-top: 40px;
  color: #ababab;
}

.introduction {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  display: block;
  width: 100%;
  height: 60px;
  max-width: 710px;
  margin-right: auto;
  margin-left: auto;
}

.image {
  width: 100%;
}

.image-2 {
  width: 100%;
}

.image-3 {
  width: 100%;
}

.image-4 {
  width: 100%;
}

.dynamic-list-wrapper {
  display: block;
  width: 45%;
  max-width: 350px;
  margin-right: 10px;
  margin-left: 10px;
}

.dynamic-list-wrapper.prawa {
  display: block;
}

.dynamic-list {
  position: relative;
}

.ending {
  position: relative;
  bottom: 150px;
  width: 100%;
  height: 0px;
}

.html-embed {
  width: 100%;
}

html.w-mod-js *[data-ix="zaslepka-init-left"] {
  -webkit-transform: translate(-100%, 0px);
  -ms-transform: translate(-100%, 0px);
  transform: translate(-100%, 0px);
}

html.w-mod-js *[data-ix="zaslepka-init-right"] {
  -webkit-transform: translate(100%, 0px);
  -ms-transform: translate(100%, 0px);
  transform: translate(100%, 0px);
}

html.w-mod-js *[data-ix="pokaz-sie"] {
  opacity: 0;
  -webkit-transform: translate(0px, 120px);
  -ms-transform: translate(0px, 120px);
  transform: translate(0px, 120px);
}

html.w-mod-js *[data-ix="img-initial"] {
  -webkit-transform: translate(-100%, 0px);
  -ms-transform: translate(-100%, 0px);
  transform: translate(-100%, 0px);
}

html.w-mod-js *[data-ix="menu-projects-init"] {
  opacity: 0;
  -webkit-transform: translate(50%, 0px);
  -ms-transform: translate(50%, 0px);
  transform: translate(50%, 0px);
}

html.w-mod-js *[data-ix="zaladuj-sekcja-opis"] {
  opacity: 0;
}

html.w-mod-js *[data-ix="hide-introduction"] {
  opacity: 0;
  -webkit-transform: translate(-30px, 0px);
  -ms-transform: translate(-30px, 0px);
  transform: translate(-30px, 0px);
}

html.w-mod-js *[data-ix="load-images"] {
  opacity: 0;
  -webkit-transform: translate(0px, 100px) scale(1.05, 1.05);
  -ms-transform: translate(0px, 100px) scale(1.05, 1.05);
  transform: translate(0px, 100px) scale(1.05, 1.05);
}

@media (max-width: 991px) {
  .logo {
    width: 35px;
    height: 35px;
    background-size: 100%;
  }
  .preloader {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .kolumna-projektowa {
    overflow: visible;
    height: 400px;
  }
  .kolumna-projektowa.prawa {
    height: 400px;
  }
  .kolumna-projektowa.poziom {
    height: 200px;
    max-height: 200px;
    max-width: 400px;
  }
  .projekt {
    height: 100%;
  }
  .heading-1 {
    font-size: 32px;
    line-height: 50px;
  }
  .heading-1.paragraf {
    margin-top: 40px;
  }
  .heading-3 {
    margin-right: 0px;
  }
  .przekreslenie {
    top: 22px;
    width: 316px;
    height: 3px;
  }
  .tekscik {
    font-size: 32px;
    line-height: 50px;
  }
  .project-image {
    margin-bottom: 80px;
  }
  .zaslepka_projekt {
    width: 305px;
  }
  .paragraph-2 {
    width: 90%;
  }
  .opis-gora {
    height: 20%;
  }
  .opis-srodek {
    height: 90px;
    margin-top: -120px;
  }
  .introduction {
    display: block;
    width: 95%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 10px;
  }
}

@media (max-width: 767px) {
  .logo {
    display: block;
    width: 35px;
    height: 35px;
    margin-top: 30px;
    margin-right: auto;
    margin-left: auto;
    background-size: contain;
  }
  .preloader {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .scroll-box {
    margin-bottom: 80px;
  }
  .txt-kolumna.about {
    top: 44px;
    margin-top: 16%;
  }
  .kolumna-projektowa.mobile {
    overflow: hidden;
    width: 100%;
    height: 60vh;
    margin-bottom: 20vh;
    -webkit-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto;
  }
  .projekt {
    height: 100%;
  }
  .obrazek {
    background-image: url('../images/lirene.jpg'), -webkit-linear-gradient(270deg, null, null);
    background-image: url('../images/lirene.jpg'), linear-gradient(180deg, null, null);
    background-position: 50% 50%, 0px 0px;
    background-size: cover, auto;
    background-attachment: scroll, scroll;
  }
  .obrazek._3 {
    background-image: url('../images/Bez-nazwy-3.jpg'), -webkit-linear-gradient(270deg, null, null);
    background-image: url('../images/Bez-nazwy-3.jpg'), linear-gradient(180deg, null, null);
    background-position: 50% 50%, 0px 0px;
    background-size: cover, auto;
  }
  .obrazek._5 {
    background-image: url('../images/Bez-nazwy-4.jpg'), -webkit-linear-gradient(270deg, #d8d0ab, #d8d0ab);
    background-image: url('../images/Bez-nazwy-4.jpg'), linear-gradient(180deg, #d8d0ab, #d8d0ab);
    background-position: 100% 50%, 0px 0px;
    background-size: 100vw, auto;
    background-repeat: no-repeat, repeat;
  }
  .obrazek.horiz {
    background-image: url('../images/lirene.jpg'), -webkit-linear-gradient(270deg, #d8d0ab, #d8d0ab);
    background-image: url('../images/lirene.jpg'), linear-gradient(180deg, #d8d0ab, #d8d0ab);
    background-position: 65% 50%, 0px 0px;
    background-size: cover, auto;
  }
  .lewa-kolumna {
    width: 16%;
  }
  .lewa-kolumna.levelup {
    height: 100vh;
  }
  .srodek {
    display: none;
  }
  .srodek.mobile {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 8vh;
  }
  .prawa-kolumna {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 16%;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
  }
  .prawa-kolumna.levelup {
    height: 100vh;
  }
  .project-name {
    font-size: 70px;
  }
  .project-name.projektowa {
    top: 0px;
    font-size: 70px;
  }
  .counter {
    margin-top: 42px;
  }
  .menu {
    margin-top: 35%;
    margin-bottom: 40px;
  }
  .menu-projects {
    display: none;
  }
  .allprojects-txt {
    margin-bottom: 25px;
  }
  .menu-project-name {
    height: 35px;
    padding-top: 10px;
    font-size: 30px;
  }
  .zaslepka-lirene.projekt {
    top: 10px;
    height: 60px;
  }
  .zaslepka-lirene.projekt.arque {
    top: 10px;
    height: 68px;
  }
  .about_and_cont {
    height: 117px;
    margin-top: 30px;
  }
  .kontener-zaslepka-menu {
    width: 90px;
    height: 35px;
  }
  .kontener-zaslepka-menu.audica {
    width: 62px;
  }
  .kontener-zaslepka-menu.brasil {
    width: 82px;
  }
  .kontener-zaslepka-menu.personal {
    width: 125px;
  }
  .kontener-zaslepka-menu.older {
    width: 80px;
  }
  .blokada {
    display: block;
  }
  .aboutcontact {
    display: none;
    opacity: 0;
  }
  .txt-about {
    width: 62%;
    opacity: 0;
  }
  .przekreslenie {
    width: 216px;
  }
  .tekscik._1 {
    display: none;
  }
  .close-contact {
    margin-top: 40px;
  }
  .project-image.ostatni.mobile {
    margin-bottom: 70px;
  }
  .zaslepka-2 {
    top: -8px;
    display: block;
    height: 38px;
  }
  .zaslepka-2.arque {
    position: absolute;
    top: -8px;
    display: block;
    height: 36px;
  }
  .zaslepka_projekt {
    width: 194px;
    height: 82px;
  }
  .zaslepka_projekt.personal {
    width: 270px;
  }
  .zaslepka_projekt.older {
    width: 170px;
  }
  .zaslepka_projekt.arque {
    width: 190px;
  }
  .zaslepka_projekt.audi {
    width: 150px;
  }
  .paragraph-2 {
    display: none;
    width: 100%;
    line-height: 25px;
  }
  .paragraph-2.mobile {
    display: block;
  }
  .opis-gora {
    height: 15%;
  }
  .opis-srodek {
    position: relative;
  }
  .opis-dol {
    width: 66%;
    height: 60%;
  }
  .next-project {
    height: 100px;
  }
  .category {
    margin-bottom: 25px;
  }
  .link-mobile {
    position: relative;
    z-index: 22;
    width: 100%;
    height: 100%;
  }
  .image-5 {
    width: 100%;
  }
  .ending {
    bottom: 100px;
  }
}

@media (max-width: 479px) {
  .body {
    overflow: auto;
    height: 100%;
    background-image: url('../images/bg.gif');
    background-size: 127px;
  }
  .logo {
    left: 10px;
    display: block;
    width: 35px;
    margin-top: 30px;
    margin-right: auto;
    margin-left: auto;
    background-size: contain;
  }
  .logo.levelup {
    left: 10px;
    z-index: 2004;
    margin-top: 30px;
  }
  .preloader {
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: visible;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .scroll-box {
    position: absolute;
    left: 0px;
    right: auto;
    bottom: 0px;
    overflow: visible;
    height: 55px;
    margin-top: 0vh;
    margin-bottom: 60px;
  }
  .txt-kolumna.about {
    position: relative;
    left: -45px;
    top: 0px;
    right: 0px;
    width: 120px;
    height: 20px;
    margin-top: 50px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  .kolumna-projektowa {
    width: 100%;
    height: 50vh;
    margin-top: 20vh;
    margin-right: 0px;
    margin-left: 0px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto;
  }
  .kolumna-projektowa.prawa {
    height: 50vh;
    margin-bottom: 0px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto;
  }
  .kolumna-projektowa.poziom {
    width: 100%;
    height: 50vh;
    margin-top: 20vh;
    margin-bottom: 0px;
  }
  .kolumna-projektowa.mobile {
    margin-top: 15vh;
    margin-bottom: 10vh;
  }
  .projekt {
    height: 100%;
  }
  .obrazek {
    background-image: url('../images/lirene.jpg'), -webkit-linear-gradient(270deg, #d8d0ab, #d8d0ab);
    background-image: url('../images/lirene.jpg'), linear-gradient(180deg, #d8d0ab, #d8d0ab);
    background-position: 71% 50%, 0px 0px;
    background-size: auto 100%, auto;
    background-repeat: no-repeat, repeat;
    background-attachment: scroll, scroll;
  }
  .obrazek._3 {
    background-image: url('../images/Bez-nazwy-3.jpg'), -webkit-linear-gradient(270deg, null, null);
    background-image: url('../images/Bez-nazwy-3.jpg'), linear-gradient(180deg, null, null);
    background-position: 50% 50%, 0px 0px;
  }
  .obrazek._4 {
    background-image: url('../images/qpa.jpg'), -webkit-linear-gradient(270deg, null, null);
    background-image: url('../images/qpa.jpg'), linear-gradient(180deg, null, null);
  }
  .obrazek._5 {
    background-image: url('../images/Bez-nazwy-4.jpg'), -webkit-linear-gradient(270deg, #d8d0ab, #d8d0ab);
    background-image: url('../images/Bez-nazwy-4.jpg'), linear-gradient(180deg, #d8d0ab, #d8d0ab);
    background-position: 72% -75px, 0px 0px;
    background-size: auto 120%, auto;
    background-repeat: no-repeat, repeat;
    background-attachment: scroll, scroll;
  }
  .szkielet {
    overflow: visible;
  }
  .lewa-kolumna {
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    display: block;
    width: 20%;
    height: 100vh;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .lewa-kolumna.levelup {
    position: fixed;
    overflow: auto;
    width: 20%;
    height: 100%;
  }
  .srodek {
    display: none;
    width: 50%;
    margin-top: 0vh;
    padding-bottom: 20vh;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
  }
  .srodek.mobile {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 48%;
    padding-bottom: 12vh;
  }
  .prawa-kolumna {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 20%;
    height: 100vh;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
  }
  .prawa-kolumna.levelup {
    z-index: 2000;
    overflow: visible;
    width: 20%;
    height: 100%;
  }
  .nazwa-projektu {
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    margin-top: 42vh;
  }
  .project-name {
    width: 100%;
    font-size: 80px;
  }
  .counter {
    margin-top: 42px;
  }
  .loading {
    display: block;
    margin-top: 43vh;
  }
  .menu {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 0%;
    margin-bottom: 40px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  .menu-projects {
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    display: none;
  }
  .allprojects-txt {
    margin-bottom: 50px;
  }
  .menu-project-name {
    margin-bottom: 45px;
    padding-top: 16px;
    font-size: 45px;
  }
  .zaslepka-lirene.projekt {
    top: 0px;
  }
  .zaslepka-lirene.projekt.arque {
    top: 0px;
  }
  .kontener-zaslepka-audi.in_project {
    display: none;
    width: 165px;
    height: 85px;
  }
  .kontener-zaslepka-older.in_project {
    display: none;
    width: 190px;
    height: 85px;
  }
  .about_and_cont {
    height: 120px;
    margin-top: 30px;
  }
  .kontener-zaslepka-menu {
    width: 127px;
    height: 50px;
  }
  .kontener-zaslepka-menu.audica {
    width: 93px;
  }
  .kontener-zaslepka-menu.brasil {
    width: 120px;
  }
  .kontener-zaslepka-menu.personal {
    width: 170px;
  }
  .kontener-zaslepka-menu.older {
    width: 110px;
  }
  .zaslepka-menu {
    top: 24px;
    height: 26px;
  }
  .blokada {
    display: block;
  }
  .aboutcontact {
    z-index: 2003;
    display: none;
    opacity: 0;
  }
  .txt-about {
    width: 75%;
    padding-top: 25px;
    opacity: 0;
  }
  .heading-1 {
    margin-top: 10px;
    padding-top: 10px;
    font-size: 26px;
    line-height: 42px;
  }
  .heading-1.paragraf {
    margin-top: 20px;
  }
  .heading-1.odstep {
    padding-top: 30px;
  }
  .przekreslenie {
    top: 18px;
    width: 175px;
  }
  .tekscik {
    margin-right: 0px;
    font-size: 26px;
    line-height: 42px;
  }
  .tekscik.inactive {
    float: left;
  }
  .tekscik.odstep {
    padding-left: 6px;
  }
  .close-contact {
    margin-top: 50px;
  }
  .link-home {
    position: relative;
    margin-left: 0px;
  }
  .sekcja-opis {
    height: 100%;
  }
  .project-image {
    margin-bottom: 50px;
  }
  .project-image.ostatni.mobile {
    margin-bottom: 60px;
  }
  .project-image.video {
    display: block;
  }
  .zaslepka-2 {
    top: -18px;
    display: block;
  }
  .zaslepka-2.arque {
    top: -18px;
    height: 40px;
  }
  .content {
    z-index: 2000;
    overflow: visible;
    width: 80%;
  }
  .zaslepka_projekt {
    height: 70px;
  }
  .zaslepka_projekt.personal {
    position: absolute;
    width: 266px;
  }
  .paragraph-2.mobile {
    z-index: auto;
  }
  .div-block-6 {
    width: 85%;
  }
  .div-block-8 {
    padding-left: 30px;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .aboutme {
    display: none;
  }
  .behance {
    position: fixed;
    left: auto;
    right: 30px;
    bottom: 0px;
    margin-bottom: 50px;
  }
  .linkedin {
    position: fixed;
    left: auto;
    right: 30px;
    bottom: 100px;
  }
  .opis-gora {
    width: 60%;
    height: 20%;
    padding-top: 100px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .opis-srodek {
    height: 70px;
    margin-top: -140px;
  }
  .opis-dol {
    width: 64%;
  }
  .project-info-txt {
    display: block;
    margin-right: 6px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto;
    text-align: center;
  }
  .data-project-txt {
    text-align: center;
  }
  .separator {
    width: 40px;
    max-width: 12px;
    min-width: 12px;
  }
  .next-project {
    height: 100px;
  }
  .text-block {
    text-align: right;
  }
  .text-block.left {
    text-align: left;
  }
  .project-title {
    display: none;
    font-size: 80px;
  }
  .section {
    display: none;
  }
  .ending {
    bottom: 60px;
  }
}

@font-face {
  font-family: 'Noedisplay';
  src: url('../fonts/NoeDisplay-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Noedisplay';
  src: url('../fonts/NoeDisplay-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Noedisplay';
  src: url('../fonts/NoeDisplay-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Freight big pro';
  src: url('../fonts/Freight-Big-Pro-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Freight big pro';
  src: url('../fonts/Freight-Big-Pro-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Actadisplay';
  src: url('../fonts/ActaDisplay-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}