* {
  color: white;
  font-family: 'Open Sans', sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: black;
  color: white;
  font-family: 'Open Sans', sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

h1 {
  margin: 0;
  padding: 0;
  line-height: initial;
  letter-spacing: initial;
  word-spacing: initial;
  font-size: 2.5rem;
  font-family: 'Maven Pro', 'Arial',  sans-serif;
}

h2 {
  margin: 0;
  padding: 0;
  line-height: initial;
  letter-spacing: initial;
  word-spacing: initial;
  font-size: 2rem;
  font-family: 'Maven Pro', 'Arial', sans-serif;
}

img {
  width: initial;
  height: initial;
}

.btn {
  font-size: 1.125rem;
  padding: 0.625rem;
  font-weight: 600;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  -webkit-transition: color 0.3s ease-out;
  transition: color 0.3s ease-out;
  display: block;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

@media screen and (max-width: 400px) {
  .btn {
    font-size: 0.9rem;
  }
}

.btn:after {
  position: absolute;
  content: "";
  display: block;
  bottom: 3px;
  left: 0px;
  height: 2px;
  width: 0%;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(5%, #0093e9), color-stop(95%, #80d0c7));
  background-image: linear-gradient(to right, #0093e9 5%, #80d0c7 95%);
  -webkit-transition: width 0.3s ease-out;
  transition: width 0.3s ease-out;
}

.btn:active, .btn:focus, .btn:hover, .btn:focus-within {
  color: #80d0c7;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .btn:active, .btn:focus, .btn:hover, .btn:focus-within {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(5%, #0093e9), color-stop(95%, #80d0c7));
    background-image: linear-gradient(to right, #0093e9 5%, #80d0c7 95%);
    color: transparent !important;
    background-clip: text;
    -webkit-background-clip: text;
  }
}

.btn:active:after, .btn:focus:after, .btn:hover:after, .btn:focus-within:after {
  width: 100%;
}

.logo {
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  display: block;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.logo img {
  display: block;
  -webkit-filter: drop-shadow(#2f4046 0px 0px 5px);
          filter: drop-shadow(#2f4046 0px 0px 5px);
  -webkit-transition: text-shadow 0.5s;
  transition: text-shadow 0.5s;
}

.logo:active, .logo:focus, .logo:hover, .logo:focus-within {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}

nav {
  padding: 0.8rem calc(1.525rem + 3.3vw) 0.8rem;
  font-family: 'Maven Pro', 'Arial', sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  list-style-type: none;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: fixed;
  z-index: 999;
  background-color: black;
  height: 100px;
  -webkit-box-shadow: 0px -3px 10px 0px black;
          box-shadow: 0px -3px 10px 0px black;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
  -webkit-animation: opacityTop 1.5s ease-out backwards 2s;
          animation: opacityTop 1.5s ease-out backwards 2s;
}

@media (min-width: 1200px) {
  nav {
    padding: 0.8rem 4rem 0.8rem;
  }
}

@media screen and (max-height: 400px) {
  nav {
    visibility: hidden;
  }
}

@media screen and (max-width: 330px) {
  nav {
    visibility: hidden;
  }
}

nav a:first-child {
  margin-right: 50%;
}

nav a:first-child span {
  font-size: 48px;
}

@media screen and (min-width: 600px) and (max-width: 959px) {
  nav a:first-child {
    margin-right: 25%;
  }
}

@media screen and (max-width: 599px) {
  nav a:first-child {
    margin-right: 0;
    display: none;
  }
}

@media screen and (orientation: portrait) {
  nav a:first-child {
    display: none;
  }
}

nav.top {
  padding: calc(1.275rem + 0.3vw) calc(1.525rem + 3.3vw) calc(1.275rem + 0.3vw);
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}

@media (min-width: 1200px) {
  nav.top {
    padding: 1.5rem 4rem 1.5rem;
  }
}

@media screen and (max-height: 400px) {
  nav.top {
    visibility: hidden;
  }
}

@media screen and (max-width: 340px) {
  nav.top {
    visibility: hidden;
  }
}

#landing {
  padding: 0 calc(1.525rem + 3.3vw);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100vh;
  -webkit-box-shadow: 0px 0px 10px 0px black;
          box-shadow: 0px 0px 10px 0px black;
  background-color: black;
}

@media (min-width: 1200px) {
  #landing {
    padding: 0 4rem;
  }
}

@media screen and (max-width: 700px) {
  #landing {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

#landing .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 8rem;
}

@media screen and (max-width: 1279px) {
  #landing .title {
    margin-right: 200px;
  }
}

@media screen and (max-height: 400px) {
  #landing .title {
    margin-right: 0;
  }
}

@media screen and (max-width: 700px) {
  #landing .title {
    margin-right: 0;
    width: 75vmin;
    max-width: 330px;
  }
}

#landing .title h1,
#landing .title h2 {
  font-family: 'Maven Pro', 'Arial', sans-serif;
  text-transform: uppercase;
  margin: 5px;
  position: relative;
  z-index: 200;
  font-weight: normal;
}

#landing .title h1 {
  position: relative;
  -webkit-animation: opacityTop 2s ease-out backwards;
          animation: opacityTop 2s ease-out backwards;
}

@media screen and (max-width: 700px) {
  #landing .title h1 {
    font-size: calc(1.3rem + 0.6vw);
  }
}

@media screen and (max-width: 700px) and (min-width: 1200px) {
  #landing .title h1 {
    font-size: 1.75rem;
  }
}

#landing .title h1:after {
  position: absolute;
  content: "";
  display: block;
  bottom: -2px;
  left: -1%;
  height: 3px;
  width: 102%;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(5%, #0093e9), color-stop(95%, #80d0c7));
  background-image: linear-gradient(to right, #0093e9 5%, #80d0c7 95%);
  -webkit-animation: widthToRight 2.5s ease-in-out backwards;
          animation: widthToRight 2.5s ease-in-out backwards;
}

#landing .title h2 {
  -webkit-animation: opacityTop 1.5s ease-out backwards 1.5s;
          animation: opacityTop 1.5s ease-out backwards 1.5s;
}

@media screen and (max-width: 700px) {
  #landing .title h2 {
    font-size: calc(1.275rem + 0.3vw);
  }
}

@media screen and (max-width: 700px) and (min-width: 1200px) {
  #landing .title h2 {
    font-size: 1.5rem;
  }
}

#landing .pictures {
  height: 50vh;
  width: 400px;
  position: relative;
}

@media screen and (max-width: 700px) {
  #landing .pictures {
    display: contents;
  }
}

@media screen and (max-height: 500px) {
  #landing .pictures {
    height: 90vh;
  }
}

@media screen and (max-height: 400px) {
  #landing .pictures {
    display: none;
  }
}

#landing .pictures img {
  position: absolute;
  width: 400px;
  height: 400px;
  -webkit-animation: fromTop 4s backwards cubic-bezier(0.22, 0.61, 0.36, 1);
          animation: fromTop 4s backwards cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media screen and (max-width: 1279px) {
  #landing .pictures .scroll1,
  #landing .pictures .scroll2,
  #landing .pictures .scroll3 {
    display: none;
  }
  #landing .pictures #touch,
  #landing .pictures #mac {
    display: block;
    right: 0;
  }
}

@media screen and (max-width: 959px) {
  #landing .pictures {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}

@media screen and (max-width: 700px) {
  #landing .pictures #touch {
    display: none;
  }
  #landing .pictures #mac {
    right: auto;
    top: auto;
    -webkit-transform: none !important;
            transform: none !important;
    -webkit-animation: opacityTop 1.5s ease-out backwards 0.5s;
            animation: opacityTop 1.5s ease-out backwards 0.5s;
    width: 90vmin;
  }
  #landing .pictures .scroll1,
  #landing .pictures .scroll2,
  #landing .pictures .scroll3 {
    -webkit-transform: none !important;
            transform: none !important;
  }
}

#omnie {
  background: #000000;
}

#omnie > div {
  background: #000000;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#414243));
  background: linear-gradient(to bottom, transparent, #414243);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 200;
  padding-left: 20%;
  padding-right: 20%;
  gap: 40px;
}

@media screen and (max-width: 959px) {
  #omnie > div {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-left: 10%;
    padding-right: 10%;
  }
  #omnie > div h1 {
    text-align: center;
  }
}

#omnie > div div h1 {
  font-variant: small-caps;
  text-shadow: -1px -1px 0 #000,
 1px -1px 0 #000,
 -1px 1px 0 #000,
 1px 1px 0 #000;
}

#omnie > div div p {
  text-align: justify;
  text-shadow: -1px -1px 0 #000,
 1px -1px 0 #000,
 -1px 1px 0 #000,
 1px 1px 0 #000;
}

#omnie > div div img {
  width: 300px;
  height: 300px;
  border-radius: 150px;
  -webkit-box-shadow: 0px 0px 18px -7px black;
          box-shadow: 0px 0px 18px -7px black;
}

#realizacje {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 200;
  padding-left: 10%;
  padding-right: 10%;
  background: #000;
  background: -webkit-gradient(linear, left top, left bottom, from(#414243), color-stop(#8C8C8C), to(#414243));
  background: linear-gradient(to bottom, #414243, #8C8C8C, #414243);
  gap: 40px;
}

#realizacje > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#realizacje > div h1 {
  font-variant: small-caps;
  text-align: center;
  text-shadow: -1px -1px 0 #000,
 1px -1px 0 #000,
 -1px 1px 0 #000,
 1px 1px 0 #000;
}

#realizacje > div p {
  text-align: justify;
  text-shadow: -1px -1px 0 #000,
 1px -1px 0 #000,
 -1px 1px 0 #000,
 1px 1px 0 #000;
}

#realizacje div.grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 20px;
  -webkit-box-flex: 2;
      -ms-flex-positive: 2;
          flex-grow: 2;
}

#realizacje div.grid > div {
  position: relative;
}

#realizacje div.grid > div picture {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#realizacje div.grid > div img {
  width: 100%;
  height: auto;
  max-width: 400px;
  -webkit-box-shadow: 0px 0px 18px -7px black;
          box-shadow: 0px 0px 18px -7px black;
  border-radius: 2px;
}

@media screen and (max-width: 959px) {
  #realizacje div.grid > div img {
    max-width: 700px;
  }
}

#realizacje div.grid > div > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  gap: 20px;
  opacity: 0;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}

#realizacje div.grid > div > div:hover, #realizacje div.grid > div > div:focus-within {
  opacity: 100;
}

#realizacje div.grid > div > div h2 {
  text-align: center;
  font-variant: small-caps;
}

#kontakt {
  background: #000000;
  background: -webkit-gradient(linear, left top, left bottom, from(#414243), to(black));
  background: linear-gradient(to bottom, #414243, black);
}

#kontakt > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 200;
  padding-left: 10%;
  padding-right: 10%;
  gap: 40px;
}

@media screen and (max-width: 959px) {
  #kontakt > div {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media screen and (max-width: 959px) {
  #kontakt > div {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-left: 10%;
    padding-right: 10%;
  }
}

#kontakt > div h1 {
  font-variant: small-caps;
  text-align: center;
  text-shadow: -1px -1px 0 #000,
 1px -1px 0 #000,
 -1px 1px 0 #000,
 1px 1px 0 #000;
}

#kontakt > div p {
  text-align: justify;
  text-shadow: -1px -1px 0 #000,
 1px -1px 0 #000,
 -1px 1px 0 #000,
 1px 1px 0 #000;
}

#kontakt > div > div {
  width: 30%;
}

@media screen and (max-width: 959px) {
  #kontakt > div > div {
    width: 80%;
  }
}

@media screen and (max-width: 599px) {
  #kontakt > div > div {
    width: 100%;
  }
}

#kontakt > div > div form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

#kontakt > div > div form fieldset label {
  width: 100%;
  position: relative;
}

#kontakt > div > div form fieldset input {
  border: 0;
  padding: 0;
  margin: 0;
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

#kontakt > div > div form fieldset input[type="email"], #kontakt > div > div form fieldset input[type="text"] {
  color: black;
  width: 100%;
  background-color: white;
  border-radius: 3px;
  margin-bottom: 0.5rem;
  margin-top: 0.15rem;
  padding: 0.25rem;
}

#kontakt > div > div form fieldset input[type="email"]:-moz-read-only, #kontakt > div > div form fieldset input[type="text"]:-moz-read-only {
  background-color: lightgray;
}

#kontakt > div > div form fieldset input[type="email"]:read-only, #kontakt > div > div form fieldset input[type="text"]:read-only {
  background-color: lightgray;
}

#kontakt > div > div form fieldset input[type="submit"] {
  color: white;
  background-color: transparent;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  cursor: pointer;
  padding: 0.625rem;
}

#kontakt > div > div form fieldset > div {
  cursor: pointer;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  padding: 0;
}

#kontakt > div > div form fieldset textarea {
  color: black;
  width: 99%;
  min-height: 150px;
  resize: vertical;
  border: 0;
  overflow: auto;
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: white;
  border-radius: 3px;
  margin-bottom: 0.5rem;
  margin-top: 0.15rem;
  padding: 0.25rem;
}

#kontakt > div > div form fieldset textarea:-moz-read-only {
  background-color: lightgray;
}

#kontakt > div > div form fieldset textarea:read-only {
  background-color: lightgray;
}

#message-loading {
  display: none;
  opacity: 0;
  position: absolute;
  top: 30%;
  left: 30%;
  width: 80px;
  height: 80px;
}

footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-variant: small-caps;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 3%;
  background-color: black;
}

@media screen and (max-width: 599px) {
  footer {
    padding-bottom: 12vh;
  }
}

.nav-margin {
  display: block;
  padding: 0.8rem;
  height: 30px;
  width: 100%;
  position: relative;
  background: transparent;
}

.grecaptcha-badge {
  z-index: 999;
  -webkit-transform: translateX(256px);
          transform: translateX(256px);
  -webkit-animation: captchaFromRight 1s forwards 1.5s;
          animation: captchaFromRight 1s forwards 1.5s;
}

[data-inviewport="opacity"] {
  opacity: 0;
  -webkit-transition: opacity 2s ease-out;
  transition: opacity 2s ease-out;
}

[data-inviewport="opacity"].is-inViewport {
  opacity: 1;
}

[data-inviewport="flipIn"] {
  -webkit-transform: rotate3d(1, 0, 0, 45deg);
          transform: rotate3d(1, 0, 0, 45deg);
  -webkit-transition: -webkit-transform 2s ease-out;
  transition: -webkit-transform 2s ease-out;
  transition: transform 2s ease-out;
  transition: transform 2s ease-out, -webkit-transform 2s ease-out;
}

[data-inviewport="flipIn"].is-inViewport {
  -webkit-transform: rotate3d(0, 0, 0, 45deg);
          transform: rotate3d(0, 0, 0, 45deg);
}

@-webkit-keyframes fromTop {
  from {
    -webkit-transform: perspective(100px) translate3d(10vw, 100px, -10px) scale(0.3);
            transform: perspective(100px) translate3d(10vw, 100px, -10px) scale(0.3);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

@keyframes fromTop {
  from {
    -webkit-transform: perspective(100px) translate3d(10vw, 100px, -10px) scale(0.3);
            transform: perspective(100px) translate3d(10vw, 100px, -10px) scale(0.3);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

@-webkit-keyframes opacityTop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes opacityTop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes widthToRight {
  from {
    width: 0%;
  }
  to {
    width: 102%;
  }
}

@keyframes widthToRight {
  from {
    width: 0%;
  }
  to {
    width: 102%;
  }
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes captchaFromRight {
  from {
    -webkit-transform: translateX(256px);
            transform: translateX(256px);
  }
  to {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@keyframes captchaFromRight {
  from {
    -webkit-transform: translateX(256px);
            transform: translateX(256px);
  }
  to {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
/*# sourceMappingURL=style.css.map */