/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 7 version
*/


/*OGOLNE*/
html{
    height: 100%;
  color: black;
  font-size: 48px;
font-family: 'Playfair Display', serif;
  text-align: center;
  text-decoration: none;
  display: none;
}

body{
    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;
  margin: 0;
  padding: 0;
overflow-x: hidden !important;
  -webkit-transition: background-color .7s ease;
  -o-transition: background-color .7s ease;
  transition: background-color .7s ease; 
}

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

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

.border {
  border-bottom: 1px solid black;
  margin: 0 0 .4rem 0;
  width: 25%;
} 

.bordercenter{
border-bottom: 1px solid black; 
display: inline;
}

img {
width: 100%;
}

h1 { 
  font-weight:normal; 
}

.im{
  width: 70%;
}


/*STRZALKA*/
.strzalka2 {
  position: fixed;
    z-index: 150;
     font-size: 1.2rem;
left: calc(50% - .7rem);
bottom: 9%;
      opacity: 1;         
}

.strzalka2 a {
       padding: .5rem;
  position: relative;
    font-weight: 600;
  font-size: 1.2rem; 
  text-decoration: none; 
   color: white;
}

.bounce {
  -webkit-animation: bounce 3s infinite;
   animation: bounce 3s infinite;
}


@-webkit-keyframes bounce {
  10%, 20%, 40%, 65%, 90% {
   -webkit-transform: translateY(0);
  transform: translateY(0);               
  }

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

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


@keyframes bounce {
  10%, 20%, 40%, 65%, 90% {
-webkit-transform: translateY(0);
  transform: translateY(0);
  }

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

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


/*NAWIGACJA*/

.hamburger, .cross {
visibility: hidden;
  position: fixed; 
    z-index:500;
font-size: .45rem;
top: 1%;
right: 6%;
cursor: pointer;
}

#aktualne {
   color: #aeaeae;
cursor: default;
}

nav{
 z-index: 900;
    position: fixed;
    margin: 0;
    opacity: 1;
background-color: white;
}

nav ul{
 z-index: 100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
    justify-content: space-between;
 position: fixed;
right: calc(6% - 1rem);   
 top: .7rem;
    margin:0;
    padding: 0 ;
}

ul li{
    list-style: none;
padding: 0 1rem 0 0;
    font-size: .3rem;
    text-align: left;
  white-space: nowrap;
  font-family: 'Noto Sans', sans-serif;
}

nav a{
     text-decoration: none;
  color: black;
     padding:0;
}

.chaberek {
  width: 9%;
  z-index: 700;
    position: fixed; 
    top: 1%;
    left: 6%;

   padding: 0;
   margin:0;
}

header a{
  text-decoration: none;
}

.nawspod {
display: -webkit-box;
display: -ms-flexbox;
display: flex; 
margin:  6% 0 3% 0 ; 
  -webkit-box-pack: center; 
   -ms-flex-pack: center; 
   justify-content: center; 
   -webkit-box-align: center; 
  -ms-flex-align: center; 
  align-items: center; 
}

.nawspod a{
  margin: 0 .8%;
  padding: 0;
  font-size: .6rem; 
  text-decoration: none; 
  width: 1rem;
  height: 1rem;
  line-height: 160%;
          border-radius: 50%;
   color: black;
     background-color: #e2e2e2;
}

.nawspod a:hover {  
  background-color: white;
}

p a {
   color: inherit;
}

nav a:hover:not(#aktualne2):not(.kategoria){
   color: #aeaeae;
}

.glowna_tytul{
  position: relative;
color: white;
font-size: 1rem;
top:14%;
padding: 0 25%;
font-style: oblique;
font-weight: 600;
}



.glowna_guzik{
display: inline-block;
color: black;
font-size: .28rem;
padding: .2rem .6rem;
margin: 2.3rem;
  text-transform: uppercase;
background-color: white;
      -webkit-transition: background-color 0.2s ease-in;
      -o-transition: background-color 0.2s ease-in;
      transition: background-color 0.2s ease-in;
  font-style: normal;
  font-weight: 700;
    letter-spacing: 1px;
       text-decoration: none;
}

.glowna_guzik a{
    text-decoration: none;
}

.stopkakontakt{
margin-top: auto;
}

.stopka2  {
  margin: 3% 0 2% 0; 
  font-size: .3rem;
   color: #bcbcbc;
   line-height: 160%; 
 text-align: center;
}

.stopka2 a  {
text-decoration: none;
}

.stopka2 a:hover {
 color: black;
}


/*PORTFOLIO*/
.container3a{
padding: calc(2rem - .2rem) calc(5.5% - .2rem ) 0% calc(5.5% - .2rem);
 -webkit-box-flex: 1;
     -ms-flex: 1 0 auto;
         flex: 1 0 auto;
}

.container3b{
     padding: 0% calc(5% - .2rem ) 0% calc(5% - .2rem);
 -webkit-box-flex: 1;
     -ms-flex: 1 0 auto;
         flex: 1 0 auto;
}

.container3ab{
     padding: 2% .5rem 2% .5rem;
     font-size: .42rem; 
     letter-spacing: 1px;
       text-transform: uppercase;
       font-family: 'Noto Sans', sans-serif;
}

.container3c{
     padding: 4% calc(7% - .2rem ) .7rem calc(7% - .2rem );
     font-size: .45rem; 
     text-align: center; 
     letter-spacing: 1px;
}

.grid {
    display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
    font-size: 0%;
    line-height: 0%;  
    padding:0;
    margin:0;
}

.cell {
    margin: .2rem;
    position: relative;
  -ms-flex-preferred-size: calc(33% - .4rem);
      flex-basis: calc(33.33% - .4rem);
}

.responsive-image {
    max-width: 100%;
}

.cell img {
  -webkit-transition: all 2.1s ease;
  -o-transition: all 2.1s ease;
  transition: all 2.1s ease; 
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  opacity: 0;
  -webkit-transition: opacity .2s ease, top .8s, bottom .8s, left .8s, right .8s;
  -o-transition: opacity .2s ease, top .8s, bottom .8s, left .8s, right .8s;
  transition: opacity .2s ease, top .8s, bottom .8s, left .8s, right .8s;
background-color: white;
}

.overlay:hover  { 
  opacity: .9; 
}

.text3 {
  position: relative; 
  line-height: 130%; 
     color: black; 
     font-size: .35rem; 
      z-index: 100;
      font-weight: 700;
margin: 0px;
padding: 0 1rem .2rem 1rem;
font-family: 'Noto Sans', sans-serif;
}

.textt {
 position: relative;
 text-align: center;
 max-width: 100%;
    top: 50%;
    left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


/*produkty*/
.nakladkap3 {
font-size:.32rem; 
line-height:160%; 
padding: 0; 
margin: 0 0 .7rem 0;
}

.nakladka_stojak2 {
font-size:.32rem; 
line-height:160%; 
padding: 0 .3rem 0 0 ; 
text-align: left;
margin:0 0 .4rem 0;
}

.nakladkap2 {
font-size:.28rem; 
line-height:190%; 
padding: 0; 
margin:0;
font-weight:normal;
  font-family: 'Noto Sans', sans-serif;
}

.nakladkaonas1{
  position: absolute;
font-size:1.1rem; 
/*left: 0;*/
top: 4%;
padding: 0 0 0 0; 
margin: 0 0 0 -1.5rem;
font-weight: 700;
}

.vores {
  display: block;
}

.nakladkap1 {
font-size:.8rem; 
padding: 0 0 .5rem 0; 
margin:0;
font-weight: 700;
}

.nakladka_stojak1 {
font-size: .35rem; 
padding: 0 0 .5rem 0; 
margin: 1rem 0 0 0;
text-align: left;
font-weight: 700;
text-transform: uppercase;
}

.hideme {
  opacity:0; 
  -webkit-transition: opacity .3s ease-in-out; 
  -o-transition: opacity .3s ease-in-out; 
  transition: opacity .3s ease-in-out;
}

.produktkontopissr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    }

.produktlewoopis {
  position: relative;
  -ms-flex-preferred-size: calc(66%);
  flex-basis: calc(66%); 
  margin:  0 .5rem 0 0;
  padding:0;
}

.produktprawoopis {
  text-align: left;
-ms-flex-preferred-size: calc(33%);
flex-basis: calc(33%); 
  margin:  0 0 0 .5rem;
    padding:0;
}

.produktprawoopisonas {
  text-align: left;
-ms-flex-preferred-size: calc(33%);
flex-basis: calc(33%); 
  margin:  4% 0 0 .5rem;
    padding:0;
}


/*O NAS*/

.logo{
  width: 100%;
  }

.container3{
 margin: 10% 22% 0 22%;
    padding: 0;
}


/*KONTAKT*/

.kontaktprawo p {
 line-height: 160%; 
 margin: 0; 
 font-size: .32rem; 
 padding: 0 0 2% 0%;
}

.kontaktprawo p a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

.kontaktprawo a:hover {
  color: #ababab;
}

.kontaktprawo {
  -ms-flex-preferred-size: 75%;
   flex-basis: 75%; 
  padding: 0% 0 0 0%; 
  margin: 0; 
}

.kontaktlewo {
  padding: 0; 
  margin: 3% 0 2% 0; 
  font-size: 1rem; 
  line-height: 90%; 
  padding-bottom:1rem;
  font-weight: 600;
}

.kontaktkontgora {
  padding: 8% 37% 1rem 37%; 
}

.kontaktopis{
padding-bottom: 1.7rem;
}
/*STRONA GLOWNA*/

.pokazik {
 margin: 2rem 0 0 0;  
  width: auto; 
    height: 90vh;
    background-size: cover;
 background-position: 50% 50%;    
}

.pok2{
   background-image: url(img/glowna_tlo2.jpg);
     background-position: center bottom ;
}

.pok7{
   background-image: url(img/glowna_tlo1.jpg);
     background-position: center top ;
}

.podpis {
    display: none;
  position: absolute; 
  left: 0;
bottom: -5%; 
    padding: 0 0 0 0; 
    margin:  0; 
    line-height: 100%;  
     text-align: left; 
     color: black; 
     font-size: .3rem; 
      z-index: 1500;
        opacity:1; 
  -webkit-transition: opacity .6s ease-in-out; 
  -o-transition: opacity .6s ease-in-out; 
  transition: opacity .6s ease-in-out;
}












@media all and (max-width: 1400px) {


.glowna_tytul{
padding: 0 18%;
}

.glowna_guzik{
margin: 1.5rem;
}

.im{
  width: 80%;
}

.container3{
    margin: 10% 18% 0 18%;
    padding: 0;
}

/*.nakladkaonas1{
  top: 4%;
margin: 0 0 0 -1.5rem;
}

*/
  }





  @media all and (max-width: 1100px) {

html{
  font-size: 44px;
}


.pokazik {
margin: 8% 0 0 0;
height: 90vh;
}

.glowna_guzik{
margin: .8rem;
}

nav ul{ 
 top: .6rem;
}

.glowna_tytul{
top:10%;
}

.strzalka2 {
bottom: 5%;      
}

.chaberek {
    left: 7%;
    width: 11%;
}

.container3a{
padding: 7% calc(5.5% - .2rem ) 0% calc(5.5% - .2rem);
}

.container3{
    margin: 10% 12% 0 12%;
    padding: 0;
}

.produktlewoopis {
  margin:  0 .25rem 0 0;
}

.produktprawoopisonas {
  margin:  0 0 0 .5rem;
}

.nakladkaonas1{
font-size:.85rem; 
/*top: 21%;*/
margin: 0 0 0 -1rem;
}

.nakladkap1 {
font-size:.65rem; 
padding: 0 0 .5rem 0; 
margin:0;
font-weight: 700;
}

.kontaktlewo {
  margin: 8% 0 2% 0; 
  font-size: .85rem; 
}



  }







@media all and (max-width: 1100px) and (orientation: portrait) {

.pokazik {
margin: 8% 0 0 0;
height: 50vh;
}

.glowna_guzik{
margin: 2rem;
}

.nakladkaonas1{
font-size:.85rem; 
top: 10%;
margin: 0 0 0 -1rem;
}

.container3{
    margin: 10% 6% 0 6%;
    padding: 0;
}

.produktkontopissr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: block;
    }

.nakladkaonas1{
  position: relative;
font-size:.8rem; 
margin: .2rem 0 0 0rem;
text-align: left;
/*width: 100%;*/
}

.vores {
  display: inline;
}

.produktprawoopisonas {
  margin:  4% 0 0 0rem;
}


  }








  @media all and (max-width: 800px)  {


html{
  font-size: 40px;
}

.dim {
display: none;
    background:rgba(0, 0, 0, 0.2);
    height:100%;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    z-index:300;
}

.strzalka2 {
visibility: hidden;
}

nav{
 z-index: 400;
    position: fixed;
    margin: 0;
    opacity: 1;
}

.hamburger, .cross {
  visibility:visible;
  position: fixed; 
    z-index:500;
font-size: .45rem;
margin: 0;
padding: 0;
top: 3%;
right: 7%;
cursor: pointer;
}

.menu {
display: none;
}

nav ul{
-webkit-transform: none;
    -ms-transform: none;
        transform: none;
width: 100%;
right: 0;
left: 0;
top: 0%;
    margin:0;
padding: 2rem 0 .6rem 0;
     background-color: white;
}

nav li{
padding: .3rem 0rem .3rem 0;
    font-size: .35rem;
     text-align: center;
}

.chaberek {
    width: 22%;
    top: 1%;
    left: 7%;
}

.bordercenter{
border-bottom: 1px solid black; 
display: inline;
}

.border {
  border-bottom: 1px solid black;
  margin: 0 0 .4rem 0;
  width: 20%;
} 

.glowna_tytul{
font-size: .9rem;
top:10%;
padding: 0 10%;
}

.glowna_guzik{
margin: 1.7rem;
}

.nawspod {
margin:  7% ; 
}

.nawspod a{
  margin: 0 2%;
}

.stopka2   {
  margin: 0 6% 5% 6%; 
  font-size: .35rem;
}

.kontaktprawo p {
 line-height: 140%; 
 margin: 0; 
 font-size: .35rem; 
 padding: 3% 0 0 0%;
 text-align: center;
}

.kontaktprawo {
  padding: 0%; 
  margin: 0; 
}

.kontaktlewo {
font-size: .8rem;
  margin: 3% 0 0% 0; 
    padding-bottom:.8rem;
}

.kontaktkontgora {
  display: block;  
  padding: 18% 9% 1rem 9%; 
}

.kontaktopis{

}

.container3{
 margin: 15% 6% 5% 6%;
    padding: 0;
}

.container3a{
     padding: 15% calc(6% - .12rem) 1.5rem calc(6% - .12rem);
}

.container3b{ 
     padding: 1% calc(6% - .12rem) 0 calc(6% - .12rem);
}

.container3ab{
     padding: 2% calc(6% - .12rem) 0% calc(6% - .12rem);
padding: .3rem 0;
     font-size: .4rem;
}

.container3c{
     padding: 1rem calc(7% - .2rem ) 1rem calc(12% - .2rem );
     font-size: .45rem; 
     text-align: center; 
     letter-spacing: 1px;
}

.cell {
    margin: .24rem;
  -ms-flex-preferred-size: calc(100% );
 flex-basis: calc(100% );
}

.text2 {
  line-height: 140%; 
     font-size: .4rem; 
padding: .2rem 0 0 0;
}

.text3 {
     font-size: .35rem; 
}

.pokazik {
margin: 17% 0 0 0;
height: 92vh;
}

.nakladkap3 {
font-size:.35rem; 
line-height:160%; 
}

.nakladkap2 {
font-size:.3rem; 
}

.nakladkap1 {
font-size:.7rem; 
padding: 0 0 .5rem 0; 
}

.nakladkaonas1{
  position: relative;
font-size:.8rem; 
margin: .2rem 0 0 0rem;
text-align: left;

}

.produktkontopissr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: block;
    }

.produktlewoopis {
  margin:  .2rem 0 0 0;
  padding:0;
}
.produktprawoopis {
  margin:  .5rem 0 0 0;
}

.produktprawoopisonas {
  margin:  4% 0 0 0rem;
}

.nakladka_stojak1 {
margin: .8rem 0 0 0;
}

.nakladka_stojak2 {
margin:0 0 .5rem 0;
font-size:.35rem; 
}


  }







  @media all and (max-width: 800px)  and (orientation: landscape) {

/*html{
  font-size: 25px;
}
*/
html{
  font-size: 40px;
}

.im{
  width: 70%;
}

.chaberek {
    width: 15%;
    top: 1%;
    left: 7%;
}

.pokazik {
margin: 8% 0 0 0;
height: 92vh;
}

.hamburger, .cross {
  visibility:visible;
  position: fixed; 
    z-index:500;
font-size: .45rem;
margin: 0;
padding: 0;
top: 5%;
right: 7%;
cursor: pointer;
}

/*.glowna_tytul{
font-size: 1.1rem;
top:3%;
padding: 0 10%;
}
*/
.glowna_guzik{
margin: 0;
/*font-size: .4rem;*/
}

.container3{
 margin: 7% 6% 5% 6%;
    padding: 0;
}

.container3a{
     padding: 7% calc(6% - .12rem) 1.5rem calc(6% - .12rem);
}

.kontaktkontgora {
  display: block;  
  padding: 10% 9% 1rem 9%; 
}

nav ul{
padding: 1rem 0 .6rem 0;
}

.vores {
  display: inline;
}

/*.container3ab{
     padding: 2% calc(6% - .12rem) 0% calc(6% - .12rem);
padding: .3rem 0;
     font-size: .3rem;
}
*/

  }