* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
/*font-family:*/             /*wonder which ones I can download*/    
}


#wrapper { display: flex;
    width: 100%;
    max-width: 1500px;
    flex-wrap: wrap;
    margin: 0 auto;
    /*border: 2px solid red;*/
}

#empty {width: 100%;
    height: 1.5vh;
background: #fff;}

#znamysie { width: 100%;
    text-align: center;
    min-height: 5vh;
    padding: 0.8rem;
    background: #4d4d4d;
    color: white;
    /*border-bottom: 2px solid yellow;*/
    }

header{ display: flex;
    width: 100%;
/*border: 2px solid black;*/
}

.dachimg { width: 100%;
    display: block;
    margin: 0 auto; }
/*-------------------------początek menu-------------------------*/
#menu {
  background: #7E6256; /*#464646;*/
  color: #eee;
  height: 35px;
    
}
#menu ul,
#menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#menu ul {
  height: 35px; /*było*/
  display: flex;
  flex-direction: row;
  justify-content:flex-end;
  align-items: center;
}
#menu li {
  display:inline;
  position: relative;
  font: bold 18px Arial; /*było 13px*/
}
#menu li a {
  color: #ccc;
}
#menu a {
  display: block;
  line-height: 35px;
  padding: 0 14px;
  text-decoration: none;
  color: #333;
}
#menu li:hover > a,
#menu li a:hover {
  color: #fff;
}
#menu input {
  display: none;
  margin: 0 0;
  padding: 0 0;
  width: 80px;
  height: 35px;
  opacity: 0;
  cursor: pointer;
}
#menu label {
  font: bold 30px Arial;
  display: none;
  width: 35px;
  height: 36px;
  line-height: 36px;
  text-align: center;
}
#menu label span {
  font-size: 13px;
  position: absolute;
  left: 35px;
}
#menu ul.menus {
  height: auto;
  overflow: hidden;
  width: 180px;
  background: #fff;
  position: absolute;
  z-index: 99;
  display: none;
  border: 1px solid #ccc;
  border-top: none;
  color: #333;
}
#menu ul.menus a {
  color: #333;
}
#menu ul.menus li {
  display: block;
  width: 100%;
  font: 12px Arial;
  text-transform: none;
}
#menu li:hover ul.menus {
  display: block;
}
/*#menu a.prett,
#menu a.trigger2 {
  padding: 0 27px 0 14px;
}
#menu li:hover > a.prett,
#menu a.prett:hover {
  background: #fff;
  color: #333;
}
#menu a.prett::after {
  content: "";
  width: 0;
  height: 0;
  border-width: 6px 5px;
  border-style: solid;
  border-color: #eee transparent transparent transparent;
  position: absolute;
  top: 15px;
  right: 9px;
}*/


#menu ul.menus a:hover {
  background: #bababa;
}
#menu a.trigger2::after {
  content: "";
  width: 0;
  height: 0;
  border-width: 5px 6px;
  border-style: solid;
  border-color: transparent transparent transparent #eee;
  position: absolute;
  top: 13px;
  right: 9px;
}

@media screen and (max-width: 800px) {
  #menu {
    position: relative;
  }
  #menu ul {
    background: #838383;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 3;
    height: auto;
    display: none;
  }
  #menu ul.menus {
    width: 100%;
    position: static;
    border: none;
  }
  #menu li {
    display: block;
    float: none;
    width: auto;
    text-align: left;
  }
  #menu li a {
    color: #fff;
  }
  #menu li a:hover {
    color: #333;
  }
  #menu li:hover {
    background: #bababa;
    color: #333;
  }
  /*#menu li:hover > a.prett,
  #menu a.prett:hover {
    background: #bababa;
    color: #333;
  }*/
  #menu ul.menus a {
    background: #bababa;
  }
  #menu ul.menus a:hover {
    background: #fff;
  }
  #menu input,
  #menu label {
    position: absolute;
    display: flex;
  }
  #menu input {
    z-index: 4;
  }
  #menu input:checked + label {
    color: white;
  }
  #menu input:checked ~ ul {
    display: block;
  }
}

.menu-button-container {
  display: flex;
  right:2%;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: flex;
  justify-content:flex-end;
  background-color: #fff;
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

/*------------------------koniec menu ----------------------------*/

h1 {font-size: calc(2.3vw + .8rem);  }

#container { width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    background-color: #7E6256; /* było #1D4719;*/
} 


#grid-wrapper { display: grid;
grid-template-columns: 42% 42%;
grid-template-rows: auto auto;
justify-content: center;
color: #fff;    
/*border: 1px solid red;*/}

.left {grid-column: 1 / 2;
text-align: center;
/*border: 1px solid green;*/
padding: 1rem;
}

.right {grid-column: 2 / 3;
text-align: center;
padding: 1rem;
/*border: 1px solid blue;*/}

span {font-weight: bold;
    font-size:calc(.6vw + 1.15rem);}

.left-text {border-top: 5px solid #35281F;
border-left: 2px solid #35281F;    
padding: 0.5rem 2vw;
font-size: 1.2rem;
line-height: 2.2rem; /*było 2.4rem*/
    
}

.right-text {border-right: 2px solid #35281F;
    border-top: 5px solid #35281F;
padding: 0.5rem 2vw;
font-size: 1.2rem;
line-height: 2.2rem; 
}

.right-text-bottom {border-left: 5px solid #35281F;
border-bottom: 2px solid #35281F;    
padding: 0.5rem 2vw;
font-size: 1.2rem;
 line-height: 2.2rem;  
}


.left-text-bottom {border-right: 5px solid #35281F;
border-bottom: 2px solid #35281F;    
padding: 0.5rem 2vw;
font-size: 1.2rem;
line-height: 2.2rem;  
}


/*----------------------firma początek--------------*/

#container-firma { 
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    
    /*background-color: #7E6256;*/ /* było #1D4719;*/
    /*border: 1px solid orange;*/
}

#grid-wrapper-firma {display: grid;
    /*max-width: 90%;*/    
grid-template-columns: repeat(3, 1fr);
 font-size: 1.5rem;
    text-align: center;
    /*padding: 2rem;*/
/*border: 3px solid grey;*/
    margin: 2vh auto;
    grid-gap: 1.2vw;
    }

.item {
border: 1px solid lightgrey; 
   
}
.wykonujemy {font-size: 1.5rem;
text-align: center;
padding: 3vh 0;} 

.imgmaterials {padding: .5rem;}

.tekst {font-size: 1.2rem;
    text-align: left;
    padding: .8rem;
    text-indent: 2vw;
}

.imginfirma {max-width: 80%;
}

.imgmaterials {color: #A00F00;}



/*-----------------beginning of Accordion--------------*/
.container {
 padding: 2vw; /* byłopadding: 200px;*/
   }

h2 {text-align: center;}
.faq-drawer {
  margin-bottom: 30px;
}

.faq-drawer__content-wrapper {
  font-size: 1.25em;
  line-height: 1.4em;
  max-height: 0px;
  overflow: hidden;
  transition: 0.25s ease-in-out;
}

.faq-drawer__title {
  border-top: #000 1px solid;
  cursor: pointer;
  display: block;
  font-size: 1.25em;
  font-weight: 700;
  padding: 30px 0 0 0;
  position: relative;
  margin-bottom: 0;
  transition: all 0.25s ease-out;
}

.faq-drawer__title::after {
  border-style: solid;
  border-width: 1px 1px 0 0;
  content: " ";
  display: inline-block;
  float: right;
  height: 10px;
  left: 2px;
  position: relative;
  right: 20px;
  top: 2px;
  transform: rotate(135deg);
  transition: 0.35s ease-in-out;
  vertical-align: top;
  width: 10px;
}

/* OPTIONAL HOVER STATE */
.faq-drawer__title:hover { 
  color: #4E4B52;
}

.faq-drawer__trigger:checked
  + .faq-drawer__title
  + .faq-drawer__content-wrapper {
  max-height: 560px;  /*było 350px ale dłuższy tekst wpisany był obcinany przy szerokości ekranu 240px, ta częśc odpowiada za ilość wpisanego tekstu */
}

.faq-drawer__trigger:checked + .faq-drawer__title::after {
  transform: rotate(-45deg);
  transition: 0.25s ease-in-out;
}

input[type="checkbox"] {
  display: none;
}
/*---------------------End of Accordion--------------------*/

/*-------------------------firma koniec--------------------------*/

/*----------------------galeria początek--------------*/

#container-galeria {width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    /*background-color: #7E6256;*/ /* było #1D4719;*/
    
    }

#grid-wrapper-galeria {
display: grid;
max-width: 90%;
grid-template-columns: repeat(4,1fr);
grid-template-rows: auto;  
justify-content: center;
margin: 2rem auto; 
grid-gap: 1%;
      }
/*------------------------gallery styling początek----------*/
/*header {
      color: rgb(250,250,250);
      text-align: center;
      font-size: 1.2em;
   }*/

      #gallery-section {
      	display: flex;
      	align-items: center;
      	justify-content: center;
      	padding: 10px;
      	z-index: -1;
      }

      #thumbnail-gallery-container {
      	display: flex;
      	flex-flow: row wrap;
      	justify-content: space-between;
      	padding: 15px 50px 10px 50px;
      }

      .thumbnail {
        width: 32%;
        margin-bottom: 2%; 
        position: relative;
        }

      img.thumbnail-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        }

    @media only screen and (max-width: 800px){
    	#gallery-section {
    		padding: 10px 10px 0px 10px;
    	}
    	#thumbnail-gallery-container {
    	    padding: 0px;
    	}
    }

    /* Lightbox Styles */ 

	.lightbox-overlay {
    	display: flex;
    	transform: scale(0,1);
    	transition: transform 400ms ease-out;
    	transform-origin: center;
    	justify-content: center;
      align-items: center;
      background-color: rgb(80,80,80,0.95);
    	width: 100vw;
    	height: 100vh;
    	position: fixed;
    	top: 0;
    	left: 0;
    }

    .lightbox-overlay:target {
    	display: flex;
    	transform: scale(1,1);
    	z-index: 99999;
    };

    .lightbox-content {
    	color: rgb(250,250,250);
    	padding: 1.5em;
    	width: 75vw;
    	text-align: center;
    }

    .lightbox-image-title {
    	position: relative;
    	text-align: center;
    }

    .lightbox-navigation {
    	display: flex;
    	flex-flow: row wrap;
    	justify-content: space-evenly;
    }

    .close {
    	position: absolute;
    	background-color: none;
        top: 5px;    /* Top Right Corner Placement */
        right: 20px; 
        display: flex;
        justify-content: center;
        align-items: center;
    }

    a.close {
    	text-decoration: none;
    	font-weight: bold;
    	font-size :2em;
    	font-family: sans-serif;
    }

    .close::after {
    	content: 'X';
    	color: rgb(250,250,250);
    }

     .back, .next {
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	width: 24%;
    	height: 2em;
    	color: rgb(255,255,255);
    	margin: 1%;
    } 

    img.lightbox-image {
    	width: 65vw;
    	max-height: 65vh;
    	object-fit: contain;
    }

/*------------------------gallery styling end--------------- */


/*.galbox { border: 1px solid black;
    }
.imggallery {max-width: 100%; 
    display: block;
    margin: 0 auto;}*/

/*-------------------------galeria koniec--------------------------*/

/*----------------------oferta początek--------------*/

#container-oferta {width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    /*background-color: #7E6256;*/ /* było #1D4719;*/
    }

#grid-wrapper-oferta {display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
justify-content: center;
font-size: 1.5rem;
    text-align: center;
    /*padding: 2rem;*/

    }
.remont {max-width: 100%;
}

#section1 {
display: grid;
grid-template-columns: 1fr;    

    /*grid-template-columns: 2fr 1fr;*/
    
}

.usbudowlane { 
    text-align: left;
padding-left: 1rem;
color: dodgerblue;
    
}
.opis-usbudowlane { 
padding: 1.5rem 0.5rem 0 2.5rem;
    font-size: 80%;
    text-indent: 5%;
    line-height: 1.8rem;
    text-align: left;
    }

.budowlaniec { width: min(450px, 50%);
float: right;  
  margin-left: 4rem;
}

.listklas {list-style: square;
    list-style-position: inside;
text-align: left;
    font-size: 80%;
    padding: 0 0 0 2.5rem;
    margin-bottom: 1.2rem;
}

.pasek {max-width: 40%;
    padding: .5rem;
    margin-left: 2.3rem;
background-color:aquamarine;
margin-bottom: 1.2rem;}

.usbudowlane-inne {text-align: center;
color: dodgerblue;
padding-top: 3rem;}

.pasek-drugi  {max-width: 50%;
    padding: .3rem;
    margin: 1rem auto;
background-color:aquamarine;
margin-bottom: 1.2rem;}

#section2 {display: grid;
grid-template-columns: repeat(2, 1fr);
max-width: 85%;
margin: 0 auto;    
grid-gap: 1rem;    
border: 1px solid red;    
}






/*-------------------------oferta koniec--------------------------*/



/*----------------media queries początek----------------- */
/*
@media only screen and (max-width: 1000px) {
 .left-text, .right-text, .right-text-bottom, .left-text-bottom  {
padding: 1rem 1.5rem;
font-size: 1.2rem;
line-height: 2.4rem;    }   
    }*/
@media only screen and (max-width: 1000px) {
    
    #grid-wrapper {}
    .left-text, .right-text, .right-text-bottom, .left-text-bottom {
    line-height: calc(2vw + .8rem);    
        
    }          
    
    
}

@media only screen and (max-width: 800px) {
      
    #grid-wrapper {display: flex;
    flex-direction: column; } 
    
     .left-text, .right-text, .right-text-bottom, .left-text-bottom  {
padding: 1rem 1rem;   /*1rem 1.5rem;*/
font-size: 1.2rem;
line-height: 2rem;}
    
        .right {order:-1;}          
    }


@media only screen and (max-width: 800px) {
      
    #grid-wrapper-firma { display: flex;
        flex-direction: column;  }
    
    /*#grid-wrapper-firma {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));    
    }*/
    }

@media only screen and (max-width: 500px) {
      
    #grid-wrapper-firma {}
        .pytania {font-size: calc(3.3vw + .5rem);}
        }


@media only screen and (max-width: 800px){
    
    #grid-wrapper-galeria {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   
     /*grid-template-columns: 2fr;*/
        margin: 3% auto; 
        }    
    }

@media only screen and (max-width: 800px){
    
    #section1{
    display: grid;
        grid-auto-flow: column;
    /*flex-direction: column;*/
            }
    .opis-usbudowlane {width: 100%;
    padding: 1rem;
    }
    .budowlaniec {width: 100%;
        margin-left: 0;
            }
        }





/*----------------media queries koniec-------------------*/