body {
   margin: 0;
   font-family: 'Lato';
   -ms-overflow-style: none;
   scrollbar-width: none
 }
:root {
   --anima: 50s ease-in-out infinite
}
input {
   display: none
}
 body::-webkit-scrollbar {
   display: none
 }
 :root {
    --an: ease-in-out forwards
  }
  .flex-center {
     display: flex;
     justify-content: center;
     align-items: center
  }
 .k1,
 .k2,
 .k3,
 .k4,
 .k5,
 .on,
 .od,
 .zn,
 .zd,
 .an,
 .ad {
    fill: none;
    stroke-linecap: round;
    stroke-width: 75;
    stroke: #fff;
    stroke-dashoffset: 0;
    stroke-dasharray: 900;
    animation: lo .66s var(--an)
 }
 
 @keyframes lo {
    to {
       stroke-dashoffset: 900
    }
 }
 
 .k1,
 .k2,
 .k3,
 .k4,
 .k5 {
    animation-duration: .31s
 }
 
 .k2 {
    animation-delay: 0.16s
 }
 
 .k3 {
    animation-delay: .47s
 }
 
 .k4 {
    animation-delay: .67s;
 }
 
 .k5 {
    animation-delay: 0.8s
 }
 
 .on {
    animation-delay: 0.95s
 }
 
 .od {
    animation-delay: 1.13s
 }
 
 .db {
    transform: translateX(18.05rem);
 }
 
 .db path {
    animation-delay: 1.34s
 }
 
 .db .od {
    animation-delay: 1.6s
 }
 
 .zn {
    animation-delay: 1.85s;
 }
 
 .zd {
    animation-delay: 2.1s
 }
 
 .an {
    animation-delay: 2.44s;
 }
 
 .ad {
    animation-delay: 2.7s
 }
 
 .ho {
    animation: ho 0.88s var(--an);
    animation-delay: 3.4s;
    opacity: 0
 }
 
 @keyframes ho {
    to {
       opacity: 1
    }
 }
.logo svg {
    animation: go 1s var(--an);
    animation-delay: 4.85s;
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 44rem
   }
@keyframes go {
    0%, 100% {
        fill: #000;
        top: calc(2vh + 1rem);
        left: calc(1vw + 1rem);
        transform: translate(0);
        width: 11rem;
        z-index: 999999
    }
    0% {
       opacity: 0
    }
    100% {
       opacity: 1
    }
}
.hero {
   width: 100%;
   animation: pg .77s var(--an);
   animation-delay: 4.85s;
   height: 100vh;
   opacity: 0
}
@keyframes pg {
    to {
        opacity: 1
    }
}
#img2, #img3 {
   background: url('./img/p2.jpeg') no-repeat center center!important;
   background-size: cover
}
#img3 {
   background: url('./img/p3.jpeg') no-repeat center center!important
}

.squares {
   position: absolute;
   right: calc(1vw + 1rem);
   top: 50%;
   transform: translateY(-50%);
   z-index: 4;
}
.squares p {
   display: block;
   cursor: pointer;
   border: 0.2rem solid #000;
   width: clamp(0.4rem, 0.4vw + 0.3rem, 0.6rem);
   height: clamp(0.4rem, 0.4vw + 0.3rem, 0.6rem);
   border-radius: 100%
}
.menu {
   position: absolute;
   height: calc(5vh + 3rem);
   width: 100%;
   opacity: 0;
   z-index: 6;
   animation: menu-show 1s var(--an);
   animation-delay: 4.85s;
}
@keyframes menu-show {
   from {
      opacity: 0
   }
   to {
      opacity: 1
   }
}
.menu label {
   color: #000;
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin: 0 calc(1vw + 1rem);
   cursor: pointer
}
#show {
   height: 100vh;
   width: 100%;
   background: #DDDDDD
}
#show div {
   height: 100vh;
   width: 100%;
   position: absolute;
   transition: all 43s ease-in-out
}
#one {
   background: url('./img/1.jpg') center no-repeat;
   background-size: cover
}
#two {
   background: url('./img/2.jpg') center no-repeat;
   background-size: cover
}
#three {
   background: url('./img/3.jpg') center no-repeat;
   background-size: cover
}
#four {
   background: url('./img/4.jpg') center no-repeat;
   background-size: cover
}
#five {
   background: url('./img/5.jpg') center no-repeat;
   background-size: cover
}
.start {
   animation: start var(--anima);
}
@keyframes start {
   0%, 20% {
       z-index: 3
   }
   15% {
       opacity: 1
   }
   20%, 95% {
       opacity: 0
   }
}
.go1 {
   animation: go1 var(--anima)
}
@keyframes go1 {
   0%, 20% {
       z-index: 3
   }
   0% {
       opacity: 0
   }
   1.2%, 15% {
       opacity: 1
   }
   20%, 95% {
       opacity: 0
   }
}
.go2 {
   animation: go2 var(--anima)
}
@keyframes go2 {
   0%, 15% {
       opacity: 0
   }
   20%, 40% {
       opacity: 1;
       z-index: 3
   }
   45%, 100% {
       opacity: 0
   }
}
.go3 {
   animation: go3 var(--anima)
}
@keyframes go3 {
   0%, 35% {
       opacity: 0
   }
   40%, 60% {
       opacity: 1;
       z-index: 3
   }
   65%, 100% {
       opacity: 0
   }
}
.go4 {
   animation: go4 var(--anima)
}
@keyframes go4 {
   0%, 55% {
       opacity: 0
   }
   60%, 80% {
       opacity: 1;
       z-index: 3
   }
   85%, 100% {
       opacity: 0
   }
}
.go5 {
   animation: go5 var(--anima)
}
@keyframes go5 {
   0%, 75% {
       opacity: 0
   }
   80%, 95% {
       opacity: 1
   }
   80%, 100% {
       z-index: 3
   }
   100% {
      opacity: 0
   }
}
#projekty {
   position: absolute;
   top: 0;
   padding-top: calc(5vh + 3rem);
   width: 100%;
   height: calc(100vh - (5vh + 3rem));
   background: #fff;
   opacity: 0;
   transition: all .5s ease-in-out;
   visibility: hidden;
   overflow: hidden
}
#projekty h1 {
   height: calc(3vh + 2.5rem);
   margin: 0;
   font-size: clamp(1.2rem, 1.8vw + 0.6rem, 2rem)
}
#input-projekty:checked ~ #projekty {
   opacity: 1;
   visibility: visible;
   overflow: visible;
   min-height: calc(100vh - (5vh + 3rem))
}
#input-projekty:checked ~ .logo {
   cursor: pointer
}
#input-projekty:checked ~ .menu label[for=input-projekty]{
   pointer-events:none
}
.bodyunlock {
   overflow: auto
}
.grid {
   position: relative;
   margin: calc(2vh + 1rem) auto 0 auto;
   max-width: 1600px;
   padding: 0 2rem;
   gap: 1rem;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   justify-content: center
}
.thumb {
   position: relative;
}
.thumb label {
   display: block;
   cursor: pointer;
   transition: all 0.33s ease-in-out
}
.thumb img {
   width: 100%;
   height: auto
}
.thumb h2 {
   font-weight: 400;
   text-transform: uppercase;
   font-size: clamp(0.7rem, 0.7vw + 0.5rem, 1.1rem)
}
.thumb img:nth-child(2) {
   position: absolute;
   top: 0;
   left: 0;
   transition: all .33s ease-in-out;
}
.thumb:hover img:nth-child(2) {
   opacity: 0
}
.open {
   position: absolute;
   visibility: hidden;
   opacity: 0;
   width: 100%;
   align-items: flex-start;
   transition: all .33s ease-in-out;
   z-index: 9
}
.open > div {
   position: absolute;
   transition: all .33s ease-in-out;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   max-width: 1485px;
   max-height: calc(100vh - (10vh + 6rem))
}
.open > div > img {
   max-width: 80%;
   max-height: calc(100vh - (12vh + 7rem));
   object-fit: cover
}
.arrow {
   width: 10%;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer
}
.flip {
   transform: scaleX(-1);
   right: -5rem;
   left: auto
}
.arrow img {
   max-height: 5vh;
   max-width: 3vw;
}
.open > div.for-close {
   margin: 0 auto;
   max-width: 1485px;
   width: 100%
}
.close {
   position: absolute;
   top: calc(-3vh - 2rem);
   right: 0;
   width: 10%;
   cursor: pointer
}
.close img {
   width: clamp(0.6rem, 0.7vw + 0.4rem, 1rem);
}

.open1b, .open1c,
#open1c:checked ~ .open1a,
#open1c:checked ~ .open1b,
#open1a:checked ~ .open1b,
#open1a:checked ~ .open1c,
#open1b:checked ~ .open1a,
#open1b:checked ~ .open1c,
#open1:checked ~ #projekty .thumb label,
#open1:not(:checked) ~ #projekty .open1a,
#open1:not(:checked) ~ #projekty .open1b,
#open1:not(:checked) ~ #projekty .open1c,
.open2b, .open2c,
#open2c:checked ~ .open2a,
#open2c:checked ~ .open2b,
#open2a:checked ~ .open2b,
#open2a:checked ~ .open2c,
#open2b:checked ~ .open2a,
#open2b:checked ~ .open2c,
#open2:checked ~ #projekty .thumb label,
#open2:not(:checked) ~ #projekty .open2a,
#open2:not(:checked) ~ #projekty .open2b,
#open2:not(:checked) ~ #projekty .open2c,
.open3b, .open3c,
#open3c:checked ~ .open3a,
#open3c:checked ~ .open3b,
#open3a:checked ~ .open3b,
#open3a:checked ~ .open3c,
#open3b:checked ~ .open3a,
#open3b:checked ~ .open3c,
#open3:checked ~ #projekty .thumb label,
#open3:not(:checked) ~ #projekty .open3a,
#open3:not(:checked) ~ #projekty .open3b,
#open3:not(:checked) ~ #projekty .open3c {
   visibility: hidden;
   opacity: 0
}
#open1c:checked ~ .open1c,
#open1a:checked ~ .open1a,
#open1b:checked ~ .open1b,
#open1:checked ~ #projekty .open1,
#open2c:checked ~ .open2c,
#open2a:checked ~ .open2a,
#open2b:checked ~ .open2b,
#open2:checked ~ #projekty .open2,
#open3c:checked ~ .open3c,
#open3a:checked ~ .open3a,
#open3b:checked ~ .open3b,
#open3:checked ~ #projekty .open3 {
   visibility: visible;
   opacity: 1
}

 @media (max-width: 1080px) {
   .grid {
      grid-template-columns: 1fr 1fr
   }
 }
 @media (max-width: 1080px) {
   .grid {
      grid-template-columns: 1fr 1fr
   }
 }
 @media (max-width: 767.98px) {
   .menu {
      justify-content: flex-end
   }
  }


 @media (max-width: 576px) {
   body {
      font-size: 13px
   }
   @keyframes go {
   0%, 100% {
       fill: #000;
       top: 1.5rem;
       left: 1.5rem;
       transform: translate(0);
       width: 7.7rem;
       position: absolute;
       z-index: 999999
   }
   0% {
      opacity: 0
   }
   100% {
      opacity: 1
   }
  }
}
@media (max-width: 333px) {
  body {
     font-size: 11px
  }
}

@media (max-height: 1080px) {

 }