﻿html { font-size:10px; font-family: "Poppins", sans-serif; max-width:1920px; display:block; margin:auto; position:relative; }
body {margin: 0px; padding: 0px; width: 100%; height: 100%; background:#111; text-align: left; color:#eee; line-height:30px; font-size:16px; }

*{box-sizing: border-box;}
.all { width:100%; position:relative; }
img {border:none; margin:0px; padding:0px; }
a:link , a:visited , a:hover {text-decoration: none; color:#009edf;}
a:hover {color: #009edf;}
h1 , h2 , h3 , h4 , h5, h6{padding:0px; font-size: 1.8rem; margin:0px;  font-weight: normal;  }
ul{ padding:0px; margin:0px;}
p{ margin:0px 0px 20px 0px; padding:0px;  }
ul{ padding:0px; margin:0px; list-style:none;}
.cl { width:100%; clear:both;}

img.alignleft , .alignleft { float:left; margin-right:10px; width:auto !important; height:auto !important;}
img.alignright { float:right; margin-left:2%;}
img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto;}

:root{
	--k1:#ffb228;	
	--k2:#222;
	--szary:#333;	
	--p2:2%;		
	--p3:3%;
	--p5:5%;	
	--p10:10%;		
	--p15:15%;			
	--p20:20%;				
}

#top { width:100%; padding:0px 5%; height:150px; display:flex; justify-content:space-between; align-items:center; position:absolute; z-index:222; left:0px; top:0px;}
#top a#logo img { width:auto !important; height:130px !important; display:block;}

.podstrona #top { position:relative; margin-bottom:20px;}


#mtop { display:flex; align-items:center;}
#mtop ul { display:flex; }
#mtop ul li { margin:0px 10px;}
#mtop ul li a { padding:10px 20px; color:#eee; position:relative;}
#mtop ul li a:after {  content: ''; height: 3px; background-color: var(--k1); display: block; width:0; position:absolute; bottom:0px; left:0px; transition: 0.8s all; }
#mtop ul li a:hover:after { width:100%;}
a.fb img { width:auto; height:40px; margin-top:6px; }

#baner { width:100%; height:100vh; overflow:hidden; min-height:700px; position:relative; max-height:1080px;}
#baner video {width:100%;  height:100%; object-fit: cover; display:block; }
#baner span#cien {background: rgb(17,17,17); background: linear-gradient(0deg, rgba(17,17,17,1) 0%, rgba(17,17,17,0) 100%); position:absolute; z-index:5; left:0px; bottom:0px; width:100%; height:50%; }

#opisb { position:absolute; left:5%; bottom:10%; z-index:22; width:40%;}
#opisb h1 { font-size:5.5rem; line-height:6rem; margin-bottom:30px; text-shadow:1px 1px 1px #000; }
#opisb h1 strong { font-size:6rem; line-height:6.2rem; display:block;  }
#opisb h1 span { font-size:3rem; line-height:3.2rem; }


#telefony { position:absolute; z-index:11; right:5%; bottom:15%;}
a.tel { font-size:3rem; color:#eee; display:flex; align-items:center; margin-bottom:10px; }
a.tel:hover { color:var(--k1);}
a.tel img { width:auto; height:40px; margin-right:10px;}

#uslugi { width:100%; padding:var(--p2) var(--p5);}

.tyt , .tyt2 { text-align:center; font-size:3rem; line-height:3.5rem; margin-bottom:30px; }
.tyt strong , .tyt2 strong { display:block; font-size:1.8rem; line-height:2.3rem;  }
.tyt2 { text-align:left;}

#button {display:inline-block; background: #222; width:50px; height:50px;  text-align: center; position: fixed; bottom: 20px; right: 20px; opacity: 0; visibility: hidden; z-index: 1000; cursor:pointer;  }
#button img { width:20px !important; height:20px !important; margin-top:15px;}
#button:hover { background:var(--k1);   }
#button.show {opacity: 1; visibility: visible;}

a.wiecej { width:100%; height:100%; position:absolute; z-index:22; left:0px; top:0px; text-indent:-99999px; }

ul.oferta { width:102%; margin-left:-1%; display:flex; justify-content:center; flex-wrap:wrap;}
ul.oferta li { width:23%; margin:0px 1% 2% 1%; position:relative; background:#000;}
ul.oferta li:after {  content: ''; height: 3px; background-color: #333; display: block; width:0; position:absolute; bottom:0px; left:0px; transition: 0.8s all; }
ul.oferta li:hover:after { width:100%;}
ul.oferta li .ico { width:100%; overflow:hidden;}
ul.oferta li .ico img { width:100% !important; height:auto !important; display:block; filter: grayscale(1);}
ul.oferta li:hover .ico img {filter: grayscale(0);}
ul.oferta li h2 { text-align:left; padding:5%; line-height:20px;}

#porady { width:100%; padding:var(--p2) var(--p10); overflow:hidden;}
#infoporady { width:100%; display:flex; flex-wrap:wrap; justify-content:space-between;}
#infoporady .box { width:49%; background:#222; padding:var(--p2); }
#infoporady .box p:last-of-type { margin-bottom:0px;}

#formalnosci { width:100%; padding:var(--p2) var(--p5); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; overflow:hidden; }
#formalnosci .box { width:49%;}
#formalnosci .box img { width:100% !important; height:auto !important; display:block;}


a.wiecej2 { width:350px; color:#eee; font-size:14px; line-height:50px; box-shadow: 0 0 0 1px #eee; text-align:center; display:block; margin:40px 0px 0px 0px;} 
a:hover.wiecej2 { color:#eee; background:#333;}

#map { width:90%; height:500px; margin:0px var(--p5);}

#footer { width:90%; margin:var(--p2) 5% 0px 5%; background:#222; padding:var(--p2); display:flex; justify-content:space-between;}
#footer a { color:#eee;}
#footer a:hover { color:#777;}

#podpis { width:100%; padding:20px var(--p10); display:flex; justify-content:space-between; font-size:12px;}
#podpis a { color:#eee;}
#podpis a:hover { text-decoration:underline;}


/* Lista*/

.lista { width:100%; position:relative; }
.lista img { max-width:100% !important; height:auto !important;}
.lista p { margin-bottom:20px;}
.lista a  { color:#eee; background-image: linear-gradient(#ffb228, #ffb228); background-size:100% 5px; background-repeat:no-repeat; background-position:100% 100%; transition: background-size .7s, background-position .5s ease-in-out;}
.lista a:hover { background-size: 100% 100%; background-position: 0% 100%; transition: background-position .7s, background-size .5s ease-in-out;}

.lista ul { list-style:none; padding:0px 0px 0px 20px; display: table; }
.lista ul > li { background:url(../graf/li1.svg) no-repeat 0px 8px; padding-left:30px; text-align:left; background-size:12px;}
.lista ul > li > ul > li {background-size:6px;}
.lista > ul > li:last-child { padding:0px 0px 20px 30px;}

.lista ol {padding:0px 0px 0px 20px; display: table; list-style-position: outside; }
.lista ol > li {padding-left:10px; text-align:left; }
.lista ol > li > ol { padding-left:40px;}
.lista ol > li > ol > li { list-style:lower-alpha;}
.lista ol > li > ol > li > ol > li { list-style:upper-roman;}
.lista ol > li > ol > li > ol > li > ol > li { list-style:upper-alpha; }
.lista ol > li > ol > li > ol > li > ol > li > ol > li { list-style:lower-alpha; }
.lista > ol > li:last-child { padding:0px 0px 20px 10px;}

.lista h1 , .lista h2 , .lista h3 , .lista h4 , .lista h5, .lista h6 { text-align:left; font-size:2.6rem; line-height:3.2rem; position:relative; padding:20px 0px 10px 0px; color:var(--lakiernik);}

/* END Lista*/

#page-posluga { width:100%; padding:0px var(--p5); display:flex; justify-content:space-between; align-items:center; margin-bottom:2%; overflow:hidden; }
#page-posluga .box:nth-child(1) { width:55%; overflow:hidden;}
#page-posluga .box:nth-child(1) img { width:100% !important; height:auto !important; display:block; filter: grayscale(0.5);}
#page-posluga .box:nth-child(2) { width:43%;}
#page-posluga .box:nth-child(2) p:first-of-type { font-size:20px;}

.pogrzeb  { align-items:flex-start !important;}



/* ------------------------- strony BOX Biały ----------------------------- */

.box100 { width:100%; padding:0px; margin-bottom:2%;}
.box90 { width:100%; padding:0px var(--p5); margin-bottom:2%;}
.box80 { width:100%; padding:0px var(--p10); margin-bottom:2%;}
.box70 { width:100%; padding:0px var(--p15); margin-bottom:2%;}
.box60 { width:100%; padding:0px var(--p20); margin-bottom:2%;}

.box90 { width:100%; padding:0px var(--p5); margin-bottom:2%;}
.box80 { width:100%; padding:0px var(--p10); margin-bottom:2%;}
.box70 { width:100%; padding:0px var(--p15); margin-bottom:2%;}
.box60 { width:100%; padding:0px var(--p20); margin-bottom:2%;}


.box-bialy { width:100%; margin-left:0px;}
.box-obrys { width:100%; box-shadow: 0 0 0 1px var(--k2); padding:2%;}
.box-szary { width:100%; background:var(--k2); padding:2%;}
.box100 .box-cien , .box100 .box-video { padding:5%;}

.page { display: flex; justify-content:space-between;}
.page .box { padding:1%; display:block; margin:0px auto; }

.page .box img { width:100% !important; height:auto !important; display:block; filter: grayscale(0.5);}
.page .box img.alignleft , .page .box img.alignleft { float:left; margin-right:10px; width:auto !important; height:auto !important;}

.page .box p:last-of-type { margin-bottom:0px; }
.page .box .lista h1:first-of-type , .page .box .lista h2:first-of-type , .page .box .lista h3:first-of-type , .page .box .lista h4:first-of-type , .page .box .lista h5:first-of-type , .page .box .lista h6:first-of-type 
{ padding:0px 0px 20px 0px;}


.page-top { align-items: flex-start;}
.page-center {align-items: center;}
.page-bottom { align-items: flex-end;}

.box-30-70 { display: flex;}
.box-30-70 .box:nth-child(1) {  width:30%; }
.box-30-70 .box:nth-child(2) {  width:70%; }

.box-40-60 { display: flex;}
.box-40-60 .box:nth-child(1) {  width:40%; }
.box-40-60 .box:nth-child(2) {  width:60%; }

.box-60-40 { display: flex;}
.box-60-40 .box:nth-child(1) {  width:60%; }
.box-60-40 .box:nth-child(2) {  width:40%; }

.box-70-30 { display: flex;}
.box-70-30 .box:nth-child(1) {  width:70%; }
.box-70-30 .box:nth-child(2) {  width:30%; }

.box-50-50 { display: flex; width:100%;}
.box-50-50 .box:nth-child(1) {  width:100%; }
.box-50-50 .box:nth-child(2) {  width:100%; }

.box-30-30 { display: flex; width:100%;}
.box-30-30 .box {  width:33.3%; }

.background-video {width: auto !important;  min-width:100% !important; min-height:100% !important; position: absolute; left:0; right:0; top:0; bottom:0; z-index: -1;}



@media only screen and (max-width: 1200px)
{
.page , .box-40-60 , .box-60-40 , .box-30-70 , .box-70-30 , .box-50-50 , .box-30-30{ flex-wrap:wrap; }
.page .box { width:100%; padding:0px; }
.hbps-responsive-video { width:100%;}
.box-30-70 .box:nth-child(1) , .box-30-70 .box:nth-child(2) , .box-40-60 .box:nth-child(1) , .box-40-60 .box:nth-child(2) , .box-60-40 .box:nth-child(1) , .box-60-40 .box:nth-child(2) , .box-70-30 .box:nth-child(1) , .box-70-30 .box:nth-child(2) , .box-50-50 .box:nth-child(1) , .box-50-50 .box:nth-child(2) {  width:100%; }
.box-obrys { width:100%; margin:0px 0px 3% 0px; padding:5%;}
.box-szary { width:100%; margin:0px 0px 3% 0px; padding:5%;}
.box-cien { width:100%; margin:0px 0px 3% 0px; padding:5%;  }
.box-video { width:100%; margin:0px 0px 3% 0px; padding:5%;}
.page .box p:last-of-type { margin-bottom:20px; }
.order1 { order: -1;}
}


/* ------------------------- END strony BOX Biały ----------------------------- */

#bre { width:100%; padding:0px 5%; font-size:12px; color:#777; text-align:left; line-height:20px;}
#bre a {color:#777}
#bre a:hover { text-decoration:underline;}
#bre .separator { padding:0px 5px;}

#cat { width:100%; padding:0px var(--p10);}

ul.ofertacat { width:102%; margin-left:-1%; margin-left:1%; display:flex; justify-content:center; flex-wrap:wrap; }
ul.ofertacat li { width:48%; margin:0px 1% 2% 1%; position:relative; background:#222;}
ul.ofertacat li:hover { background:#000;}
ul.ofertacat li .ico { width:100%; overflow:hidden;}
ul.ofertacat li .ico img { width:100% !important; height:auto !important; display:block; filter: grayscale(0.8);}
ul.ofertacat li:hover .ico img {filter: grayscale(0);}
ul.ofertacat li h2 { padding:2%; text-align:center; font-size:22px;}
ul.ofertacat li h2 strong { display:block; font-size:14px; line-height:20px;}

.inne { width:100%; padding:var(--p2) var(--p5); overflow:hidden;}
.inne ul.oferta li { width:31.3%; }

#page-kontakt { width:100%; padding:var(--p2) var(--p5); display:flex; justify-content:space-between;}
#page-kontakt .box { width:100%;}
#page-kontakt .box .lista { text-align:center;}

/*formularz*/

.formularz { width:100%; padding:2% 0px 0px 0px; display: flex; justify-content: space-between; flex-wrap: wrap; align-content: center; }
.formularz p { margin-bottom:0px; width:100%;}
.formularz span { width:100%; position:relative; display:block;}

.formularz input , .formularz textarea , .formularz select { width:100%; height:50px; line-height:50px; border: none; padding:0px 10px; box-shadow: 0 0 0 1px #777; background:#222; font-family: "Poppins", sans-serif; font-size:16px; margin-bottom:14px; color:#eee;}
.formularz input:hover, .formularz textarea:hover, .formularz select:hover { box-shadow: 0 0 0 1px var(--k1); background:#333;  }
.formularz input:focus, .formularz textarea:focus, .formularz select:focus  { box-shadow: 0 0 0 1px var(--k1);  background:#333; }
.formularz textarea { height:100px; padding:0px 10px;}

input.wpcf7-submit { width:40%; line-height:50px; color:#eee; background:none; border:none; padding:0px;  font-size:14px; text-align:center; box-shadow: 0 0 0 1px #eee; cursor:pointer; margin:30px 0px 0px auto; display:block; }
input:hover.wpcf7-submit { color:#eee; background:#333;  }


.formularz span.wpcf7-not-valid-tip { position:absolute; z-index:4; right:10px; top:-35px; background:var(--k1); color:#111; padding:0px 2%; width:auto; line-height:30px; font-size:11px;}
.formularz span.wpcf7-not-valid-tip:after {content: ''; height: 10px; width:10px; background-color: var(--k1); display: block; position:absolute; bottom:-5px; left:20px; transform: rotate(45deg); }

.formularz .f1 { width:100%; }
.formularz .f2 { width:49%; }
.formularz .f3 { width:32.5%; }

.wpcf7 form.sent .wpcf7-response-output , .wpcf7 form.invalid .wpcf7-response-output { width:100%; padding:0px 5%; text-align:center; margin:0px; border:0px; font-size:1.6rem;}


/* end formularz */

/* menu*/

.nav-top , .nav-drill  {display:none;}

@media only screen and (max-width: 1200px) {


.nav-top {display: flex; align-items: center; text-transform:uppercase; position:relative; margin-left:20px; }  

.nav-top .hamburger {cursor: pointer; font-size:18px; padding-right:20px; color:#eee;}
.nav-top .hamburger:after { content:'\002630 '; position:absolute; top:0px; right:0px; font-size:18px; }
.nav-is-toggled .nav-top .hamburger:after { content:'\000058'; position:absolute; top:0px; right:0px; font-size:18px; } 


.nav-drill { margin-top: 0px; transform: translateX(100%); }
.nav-is-toggled .nav-drill { transform: translateX(0); left:0px;}
.nav-is-toggled::after {opacity: 1; visibility: visible;}

.nav-drill ul { width:100%;}

.nav-drill { display: flex; position: fixed; z-index:5500; top: 0; left: -500px; width: 250px; height: 100vh; background-color:var(--szary); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; transition: 0.45s;}
.nav-drill .nav-items {flex: 0 0 100%;}
.nav-drill .nav-link {display: block; width:100%; padding-right:20%; padding: 20px 1em; background-color:var(--szary); color:#eee; font-size: 16px; line-height: 20px;  text-align:left; border-bottom:1px solid #444;}
.nav-drill .nav-link:hover { background-color:var(--k1) !important; color:#fff;}



.menu-image-title-after.menu-image-title { padding-left: 0px;}

.nav-drill .nav-expand-content { position: absolute; top: 0; left:0px; width: 100%; height: 100%; transform: translateX(100%); background-color: #f7f9fb; transition: 0.3s; visibility: hidden;}
.nav-drill .nav-expand-content .nav-back-link {display: flex; align-items: center; }

.nav-drill .nav-expand-content .nav-back-link { }
.nav-drill .nav-expand-link { display: flex; justify-content: space-between;}

.nav-drill .nav-expand-link {}
.nav-drill .nav-expand.active > .nav-expand-content { transform: translateX(0); visibility: visible;}

.nav-expand .nav-expand-content { background-color:var(--szary);}
.nav-expand .nav-expand-content .nav-link { background-color:var(--szary);}
.nav-expand .nav-expand-content .nav-expand-content { background-color:var(--szary);}
.nav-expand .nav-expand-content .nav-expand-content .nav-link { background-color:var(--szary);}
.nav-expand .nav-expand-content .nav-expand-content .nav-expand-content { background-color:var(--szary);}
.nav-expand .nav-expand-content .nav-expand-content .nav-expand-content .nav-link { background-color:var(--szary);}
.nav-expand .nav-expand-content .nav-expand-content .nav-expand-content .nav-expand-content { background-color:var(--szary);}
.nav-expand .nav-expand-content .nav-expand-content .nav-expand-content .nav-expand-content .nav-link { background-color:var(--szary);}


.nav-drill .nav-expand > .nav-link { background:var(--szary) url(../graf/prawa.svg) no-repeat 90% center; background-size:15px; }
.nav-drill .nav-expand > .nav-link:hover { background:var(--k1) url(../graf/prawa2.svg) no-repeat 90% center; background-size:15px;}

.nav-drill .nav-expand-content .nav-back-link { background:var(--k1) url(../graf/lewa2.svg) no-repeat 90% center !important; background-size:15px !important; color:#fff; }
.nav-drill .nav-expand-content .nav-back-link:hover { background:var(--k1) url(../graf/lewa2.svg) no-repeat 90% center !important; background-size:15px !important; color:#fff; }

}

/* END menu*/


