.section {}

/* struktura */
.top {z-index: 4;}
.scrollPersonal {padding: 5.2vh 5.2vh 0;}
.scrollPersonal::after, .scrollPersonal::before {
    content: ' ';
    display: table;
}

body .scrollPersonal > .konkon {float: left; margin-left: 107px;}
.kontent {float: left; height: auto; display: inline-block; 
    height: auto;
    vertical-align: middle;
    border: 0;
}
.konkon * {
    position: static;
}

.kontener .section .realizacje {
    display: table;
    overflow: hidden;
    width: calc(100% - 567px);
    right: 0;
    height: auto;
    top: 0;
    float: right;
    position: relative;

}
.imagekontener {width: 100%; height: 100%;}

.kontent > .bottom {
    position: static;
    border-bottom: 2px solid #FFBFB3;
    float: left;
    width: 100%;
}
.kontent > .bottom.jp {
    margin-top: 8vh;
    position: static;
} 

.section .realizacje > * {
     margin-top: 3vh; float: left; color: white; text-decoration: none; box-sizing: border-box; border-right: 1.5vh solid transparent; border-left: 1.5vh solid transparent; height: 43.3vh; z-index: 5;
}
.section .realizacje > * {display: none;}
.section .realizacje > *.active {display: block;}
.section .realizacje > *:nth-child(6n+1) {width: 50%; margin-top: 10.4vh;}
.section .realizacje > *:nth-child(6n+2) {width: 25%; margin-top: 10.4vh}
.section .realizacje > *:nth-child(6n+3) {width: 25%; margin-top: 10.4vh}
.section .realizacje > *:nth-child(6n+4) {width: 25%;}
.section .realizacje > *:nth-child(6n+5) {width: 25%;}
.section .realizacje > *:nth-child(6n+6) {width: 50%;}
.section .realizacje > *:nth-child(3n+1) {border-left: 0vh solid transparent;}
.section .realizacje > *:nth-child(3n+3) {border-right: 0vh solid transparent;}
.section .realizacje > *:nth-child(1), .section .realizacje > *:nth-child(2), .section .realizacje > *:nth-child(3) {margin-top: 0vh;}

.section .realizacje.reali-prod > *:nth-child(6n+1) {width: 50%; margin-top: 10.4vh; float: left; border-left: 0vh solid transparent;}
.section .realizacje.reali-prod > *:nth-child(6n+2) {width: 50%; height: 89.6vh; float: right; margin-top: 10.4vh; border-right: 0vh solid transparent;}
.section .realizacje.reali-prod > *:nth-child(6n+3) {width: 50%; float: left; border-left: 0vh solid transparent; margin-top: 3vh; border-right: 1.5vh solid transparent;}

.section .realizacje.reali-prod > *:nth-child(6n+4) {width: 50%; float: left; border-left: 0vh solid transparent; margin-top: 10.4vh; height: 89.6vh;}
.section .realizacje.reali-prod > *:nth-child(6n+5) {float: right; width: 50%; border-right: 0vh solid transparent; margin-top: 10.4vh;}
.section .realizacje.reali-prod > *:nth-child(6n+6) {float: right; width: 50%; border-right: 0vh solid transparent; margin-top: 3vh;}
.section .realizacje.reali-prod > *:nth-child(1), .section .realizacje.reali-prod > *:nth-child(2) {margin-top: 0vh;}


body:not(.disable) .section .realizacje > * .opis, body:not(.disable) .section .realizacje > *,  body:not(.disable) .filtry li {transition: all 250ms ease-in-out;}
.section .realizacje > * .opis {width: 100%; height: 100%; position: absolute; top: 0; left: 0; box-sizing: border-box; padding: 30px; background-color: rgba(255, 191, 179, 0.9); opacity: 0;}
.section .realizacje > *:hover .opis {opacity: 1;}
.section .realizacje > * img {object-fit: cover; width: 100%; height: 100%;}

.section .realizacje > *.hide {
    animation: hide 230ms ease-in forwards;
    -webkit-animation: hide 230ms ease-in forwards;
}

.section .realizacje > *.poj {
    animation: show 400ms ease-in forwards;
    -webkit-animation: show 400ms ease-in forwards;
}

@-webkit-keyframes hide {
    from {opacity: 100%;}
    to {opacity: 0;}
  }
  
  @keyframes hide {
    from {opacity: 100%;}
    to {opacity: 0;}
  }

  @-webkit-keyframes show {
    from {opacity: 0;}
    to {opacity: 100%;}
  }
  
  @keyframes show {
    from {opacity: 0;}
    to {opacity: 100%;}
  }

/* scroll prp */
.section > :not(.inne) {margin-left: 0;}
.hideinfo {display: :none; }

/* .kontent {top: 28.5vh;} */
body:not(.disable) .kontent {transition: width 650ms cubic-bezier(0.860, 0.000, 0.070, 1.000);}


.logo-prp {display: none; width: 100%; padding-top: 5.2vh; height: 14.3vh; padding-bottom: 12.5vh;}

/* typo */
h1 {font-size: 4.5vh;
    line-height: 4.6vh;
    margin-top: 28.5vh;
    margin-bottom: 4.8vh;box-sizing: border-box;}
.section .realizacje > * .opis h3 {text-align: center; letter-spacing: 2px; font-family: 'mob'; text-transform: uppercase; margin: 0 0 25px;}
.section .realizacje > * .opis p {font-family: 'FuturaPT-BookObl'; text-align: justify; max-width: 300px; margin: 0 auto; display: block; }
.section .realizacje > * .opis p.gobut {width: 115px; height: 25px; line-height: 25px; font-size: 12px; letter-spacing: 2px; font-family: 'mob'; text-align: center; color: #FFBFB3; background-color: white; position: absolute; bottom: 50px;left: 50%; transform: translateX(-50%); border-radius: 15px;}
@media screen and (min-width: 980px) { 
    .pion .section .realizacje > * .opis h3 {font-size: 1vw; top: 35%;}
    .pion .section .realizacje > * .opis p {display: none;}
    .pion .section .realizacje > * .opis p.gobut {display: block;}
}
.kontent p {font-family: 'FuturaPT-BookObl';}

    @media screen and (min-height: 820px) { 
        .section .realizacje > * .opis h3, .section .realizacje > * .opis p {font-size: 1.9vh;}
    }
    @media screen and (min-height: 600px) and (max-height: 820px) { 
        .section .realizacje > * .opis h3, .section .realizacje > * .opis p {font-size: 2vh;}
    }
    @media screen and (min-height: 480px) and (max-height: 600px) { 
        .section .realizacje > * .opis h3, .section .realizacje > * .opis p {font-size: 2.3vh;}
        .section .realizacje > * .opis p.gobut {bottom: 25px;}
    }
    @media screen and (max-height: 480px) {
        .section .realizacje > * {height: 91.8vh;}
        .section .realizacje > * .opis p.gobut {bottom: 20px;}
        .section .realizacje > * .opis h3, .section .realizacje > * .opis p {font-size: 4vh;}
    }
@media screen and (max-width: 1550px) and (min-width: 1300px) {   
    @media screen and (min-height: 820px) { 
        .section .realizacje > * .opis h3, .section .realizacje > * .opis p {font-size: 1.6vh;}
    }
    @media screen and (min-height: 600px) and (max-height: 820px) { 
        .section .realizacje > * .opis h3, .section .realizacje > * .opis p {font-size: 1.7vh;}
    }
    @media screen and (min-height: 480px) and (max-height: 600px) { 
        .section .realizacje > * .opis h3, .section .realizacje > * .opis p {font-size: 2vh;}
    }
    @media screen and (max-height: 480px) {
        .section .realizacje > * .opis h3, .section .realizacje > * .opis p {font-size: 3vh;}
    }
}
@media screen and (min-width: 1180px) and (max-width: 1300px) {   
    @media screen and (min-height: 820px) { 
        .section .realizacje > * .opis h3, .section .realizacje > * .opis p {font-size: 1.5vh;}
    }
    @media screen and (min-height: 600px) and (max-height: 820px) { 
        .section .realizacje > * .opis h3, .section .realizacje > * .opis p {font-size: 1.6vh;}
    }
    @media screen and (min-height: 480px) and (max-height: 600px) { 
        .section .realizacje > * .opis h3, .section .realizacje > * .opis p {font-size: 1.8vh;}
    }
    @media screen and (max-height: 480px) {
        .section .realizacje > * .opis h3, .section .realizacje > * .opis p {font-size: 2.5vh;}
    }    
}
@media screen and (min-width: 1000px) and (max-width: 1180px) { 
    .section .realizacje > * .opis p.gobut {bottom: 25px; width: 90px; height: 20px; line-height: 20px; font-size: 11px;}
    .section .realizacje > * .opis {padding: 15px;}
    .section .realizacje > * .opis h3 {margin: 0 0 15px;}
    @media screen and (min-height: 820px) { 
        .section .realizacje > * .opis h3, .section .realizacje > * .opis p {font-size: 1.45vh;}
    }
    @media screen and (min-height: 600px) and (max-height: 820px) { 
        .section .realizacje > * .opis h3, .section .realizacje > * .opis p {font-size: 1.5vh;}
    }
    @media screen and (min-height: 480px) and (max-height: 600px) { 
        .section .realizacje > * .opis h3, .section .realizacje > * .opis p {font-size: 1.6vh;}
    }
    @media screen and (max-height: 480px) {
        .section .realizacje > * .opis h3, .section .realizacje > * .opis p {font-size: 2.1vh;}
    }    
}  


/* filtry */
.filtry {list-style: none; padding: 0; margin: 40px 0 15px;}
.filtry li { font-family: 'mob'; text-transform: uppercase; font-size: 16px; letter-spacing: 2px; border-bottom: 1px solid black; margin-top: 10px; padding: 10px 0 8px; display: table; cursor: pointer;}
.filtry li.active {color: #FFBFB3; border-bottom: 1px solid #FFBFB3;}

@media screen and (max-width: 1600px) and (min-width: 1400px) {
    body .scrollPersonal > .konkon {margin-left: 27px;}
    .kontener .section .realizacje {width: calc(100% - 487px);}
}
@media screen and (max-width: 1400px) and (min-width: 980px) {
    body .scrollPersonal > .konkon {margin-left: 0px;}
    .kontener .section .realizacje {width: calc(100% - 350px);}
    .filtry li {font-size: 13px; margin-top: 6px;}
}
@media screen and (max-width: 980px) {
    body .scrollPersonal > .konkon {margin-left: 0; width: 100%; height: auto !important;}
    h1 {margin-top: 0; margin-bottom: 20px;}
    .kontent {width: 100%; margin-bottom: 25px;}
    .kontent p {margin: 20px 0;}
    .kontener .section .realizacje {float: left; width: 100%; margin: 0;}
    .kontent.scrollKontent {
        position: relative !important; top: 0 !important; bottom: unset !important; margin-bottom: 0;
    }
    .filtry {margin: 35px 0 0;}
    /* realizacje */
    .imagekontener {height: 85%;}

    .section .realizacje > * .opis {position: relative; opacity: 1; background: none; padding: 3% 0 0; height: 12%; display: block;}
    body .section .realizacje > * .opis * {display: none;}
    body .section .realizacje > * .opis h3 {display: block; color: #FFBFB3; font-size: 16px;}
    .section .realizacje > *, .section .realizacje.reali-prod > *, .section .realizacje.reali-prod > :nth-child(6n+4), .section .realizacje.reali-prod > :nth-child(6n+5) {height: 46vh; margin-top: 3vh;}
    .section .realizacje > *:nth-child(6n+1), .section .realizacje.reali-prod > *:nth-child(6n+1) {width: 100%; margin-top: 3vh; border-left: 0vh solid transparent; border-right: 0vh solid transparent; height: 46vh;}
    .section .realizacje > *:nth-child(6n+2) {width: 50%; margin-top: 3vh; border-left: 0vh solid transparent;height: 46vh;}
    .section .realizacje.reali-prod > *:nth-child(6n+2) {width: 50%; margin-top: 3vh; border-left: 0vh solid transparent;height: 46vh; float: left;}
    .section .realizacje > *:nth-child(6n+3) {width: 50%; margin-top: 3vh; border-right: 0vh solid transparent; height: 46vh;}
    .section .realizacje.reali-prod > *:nth-child(6n+3) {width: 50%; margin-top: 3vh; border-right: 0vh solid transparent; border-left: 1.5vh solid transparent; height: 46vh; float: left;}
    .section .realizacje > *:nth-child(6n+4) {width: 50%; border-left: 0vh solid transparent; height: 46vh;}
    .section .realizacje.reali-prod > *:nth-child(6n+4) {width: 50%; border-right: 0vh solid transparent; height: 46vh; float: left;}
    .section .realizacje > *:nth-child(6n+5), .section .realizacje.reali-prod > *:nth-child(6n+5) {width: 50%; border-right: 0vh solid transparent; height: 46vh;}
    .section .realizacje > *:nth-child(6n+6), .section .realizacje.reali-prod > *:nth-child(6n+6) {width: 100%; border-right: 0vh solid transparent; border-right: 0vh solid transparent; height: 46vh;}

}
@media screen and (max-width: 500px) {
    body .section .realizacje > * .opis h3 {font-size: 14px; letter-spacing: 1px;}
}
@media screen and (max-width: 450px) {
    .section .realizacje > *:nth-child(6n+1), .section .realizacje > *:nth-child(6n+2), .section .realizacje > *:nth-child(6n+3), .section .realizacje > *:nth-child(6n+4), .section .realizacje > *:nth-child(6n+5), .section .realizacje > *:nth-child(6n+6) {width: 100%; margin-top: 2vh; border-left: 0vh solid transparent; border-right: 0vh solid transparent;}
    .section .realizacje.reali-prod > *:nth-child(6n+1), .section .realizacje.reali-prod > *:nth-child(6n+2), .section .realizacje.reali-prod > *:nth-child(6n+3), .section .realizacje.reali-prod > *:nth-child(6n+4), .section .realizacje.reali-prod > *:nth-child(6n+5), .section .realizacje.reali-prod > *:nth-child(6n+6) {width: 100%; margin-top: 2vh; border-left: 0vh solid transparent; border-right: 0vh solid transparent;}

}