html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0;border: 0;outline: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;} /* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;} table {border-collapse: collapse;border-spacing: 0;}

@font-face {
    font-family: 'Lora';
    src: url('../res/Lora.ttf');
}

@font-face {
    font-family: 'OpenSans';
    src: url('../res/OpenSans.ttf');
}

html, body {
    width: 100%;
    height: 100%;
    font-family: OpenSans;
    z-index:1;
}

.click {cursor:pointer; }
.kontakt { display:grid; grid-template-columns: 50% 50%; max-width:1200px; }
.kontakt div:nth-child(2) { display:grid; justify-content: end;}
.kontener {
  display: grid;
  grid-template-columns:auto;
  grid-template-rows: 100px 100% 300px;
  grid-auto-flow: row;
  column-gap: 0px;
  row-gap: 0px;
  min-height:100%;
  max-width:100%;
}

header, main, footer {
  display: grid;
  grid-template-columns:auto 1200px auto;
  grid-template-rows: 100%;
  grid-auto-flow: row; 
}

.naglowek { 
  display:grid; 
  grid-template-columns:20% 80%;
  grid-template-rows: auto;
  grid-auto-flow: column;
  padding-top:10px;
  color: #f78da7;
}

footer {
	background: #ddd;
	height:400px;
}

footer .stopka {
  display:grid;
  grid-template-columns:25% 25% 25% 25%;
  grid-auto-flow: row; 
}

footer div .stopka_dzial {
  display:block;
  margin-top:20px;	
  font-size: 0.8rem;
  line-height: 1.6rem;
  color: #777777;
}

.stopka_dzial a { text-decoration:none; color:#777777;}

.naglowek-logo {grid-column: 1;grid-row: 1 / 3;}
.naglowek-info {display:grid; grid-column: 2; align-items: center; grid-template-columns:50% 35% 15%; grid-template-rows: 100%; grid-auto-flow: row; font-size: 1rem; font-weight:400; }
.naglowek-info div {display: grid; align-items: center;}
.naglowek-menu {display:grid; grid-column: 2; align-items: center; justify-items: end; }

.naglowek-info div { display:flex; align-items: center; justify-content:end;}
.koszyk_info { display:flex; justify-content:end; }
.koszyk_info div { display:flex; }
.social { display:grid; justify-items: end; }
.social ul { list-style:none; display:flex; }
.social ul a { margin-right: 10px !important; }
.naglowek svg {height: 21px; width: 21px; fill: #f78da7;}

nav {display:flex; z-index:9999;}

nav svg {height: 10px !important; width: 16px !important; fill: #f78da7;}

nav ul { 
  list-style:none; 
  display:flex; 
}

nav ul li { 
  display:flex;
  background: #fff; 
}

nav ul li a{
  color: #f78da7;
  text-decoration:none;
  font-weight: 400;
  padding: 0 12px;
  font-size: 1.1rem;
}

nav ul li ul {
	display:none;
	position: absolute;
	
	line-height: 1.6rem;
    font-size: 0.9rem;
}

nav ul li ul li:nth-child(1) {margin-top:22px;}

nav ul li:hover> ul {
	display:block;

}

.magnes_plik {
	display:none;
}

.magnes_file_text { margin-left:10px; }

.wariant_list { display:none; 	position: absolute;
	line-height: 1.6rem;
    font-size: 0.9rem;
	background: #fff; padding:10px; border: 1px solid #777; border-radius:10px;
}
.wariant_drop:hover> .wariant_list {
	display:block;
}

nav ul li:hover> ul li a{
    font-size: 0.9rem;
    padding-left:13px;
	text-align:right;
}

h3 { color: #f78da7; font-style: italic; font-family: Lora; font-size: 1.2rem; line-height:2rem;}

.slide-right{ position:relative; animation:fading 3s}

@keyframes slideright{from{right:-300px;opacity:0} to{right:0;opacity:1}}

@keyframes fading{ from{opacity:0} to{opacity:1} }

.slider_block {
	display: block;
	border-radius:20px;
	box-shadow:0px 0px 5px 1px #aaaaaa6b;
	max-width:1200px;
	min-height: 469px;
	background: url('../img/slide_1.webp') no-repeat;
}

.slider_block div {
	max-width:1200px;
	min-height:30px;
}

.full_size_pic { width:100%; height:100%; position:fixed; background: #ffffff; top:0px; left:0px; z-index:-10000;   display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: 100%;
}
    
    .pic_in_full {
  display: grid;
  align-self: center;
  justify-self: center;
  max-width:1200px;

}

.pic_in_full img { max-width:1200px; }

.mobile-menu {display:none;}

.main_block { margin-top:25px; color: #555; }
.slider_text_block {position:absolute; display:grid; width: 480px; margin-left:750px; min-height:50px; font-family:Lora; margin-top:120px; color: #f78da7; font-size: 1.6rem; line-height:2.6rem; font-style:italic;}
.slider span { max-width: 480px; font-family:Lora; align-items: center; font-size: 1.0rem; line-height:2rem; color: #555; font-style:normal;}

.slider button { 	
position:absolute;
margin-left: -270px;
margin-top:380px; 
box-shadow:0px 0px 10px 5px #6666666b;
border-radius: 25px;
text-align:center;
background: #f78da7;
color: #fff;
font-family:Lora;
font-size: 1.3rem;
line-height:3.2rem;
padding-left:40px;
padding-right:40px;
border:0px;
font-style:italic;
}

.nawigacja {
color: #777777;
font-size:0.8rem;
}

strong {
	font-weight:bold;
}

.oferta {
font-family: Lora;
font-style:italic;
font-size:1.3rem;
line-height:1.5rem;
}

.lista_produkty {
  display:grid;
  grid-template-columns:24% 24% 24% 24%;
  grid-auto-flow: row; 
  column-gap: 1.33%;
  margin: 0px 0px 25px 0px;
  max-width:100%;
}

.lista_produkty div {
 max-width:100%;
 min-height: 400px;
 max-height: 400px;
 margin-top:25px;
 border-radius:20px;
 box-shadow:0px 0px 5px 1px #aaaaaa6b;
}

.lista_produkty div a {
	color: #555;
	text-decoration:none;
}

.lista_produkty div img{
 border-radius:20px 20px 0px 0px;
 max-width:100%;
}

.prod_name {
	font-weight:bold;
	display:block;
	padding-left:10px;
	font-size: 1.2rem;
	line-height:2rem;
}

.prod_type {
	display:block;
	padding-left:10px;
	font-size: 0.8rem;
	line-height:1.1rem;
}

.prod_set {
	display:block;
	padding-left:10px;
	font-size: 0.8rem;
	line-height:1.1rem;
	font-style: italic;	
}

.prod_price {
	display:block;
	padding-right:10px;
	text-align:right;
	
}

.produkt {
  display:grid;
  grid-template-columns:62% 35%;
  column-gap: 3%;
  color: #777777;
}

.koszyk {
  display:grid;
  grid-template-columns:33% 64%;
  column-gap: 3%;
  color: #777777;
  line-height: 1.6rem;
}

.produkt_opis, .produkt_szczegoly {
	  grid-column: 1 / 3;
	  margin:25px 0px 25px 0px;
} 

.produkt .product_main_photo img {
	max-width:100%;
	width: 100%;
	border-radius: 10px;
	height:496px;
	max-height:496px;
}

.product_min_photo {
	text-align:center;
	max-width:100%;
	overflow:none;
}

video {

        width: 100%;
        object-fit: fill;
        }

.warianty {
	display:grid;
	grid-template-columns: 32% 32% 32%;
	column-gap:2%;
	row-gap:5%;
	margin-bottom:25px;
	margin-top:25px;
}

.wariant_aktywny { border: 1px solid #f78da7; border-radius:5px; }
.wariant_niewybrany { border:1px solid #777; border-radius:5px; }

.product_min_photo img {
	max-width:75px;
	margin-right:15px;
	margin-top:10px;
	border-radius:5px;	
}

.produkt h1 {
	font-size:2rem;
	line-height:3rem;
	color: #f78da7;
	font-style:italic;
	font-family: Lora;
	margin:0px 0px 10px 0px;
}

.produkt button, .przycisk_koszyk {
	border-radius: 10px;
text-align:center;
background: #f78da7;
color: #fff;
font-family:Lora;
font-size: 1.1rem;
line-height:2.6rem;
padding-left:40px;
padding-right:40px;
border:0px;
font-style:italic;
cursor:pointer;
}

.produkt .cena {
	font-size: 1.4rem;
	font-weight:bold;
	line-height:1.6rem;
}

.produkt .znizka {
	font-size: 0.9rem;
	line-height:2.5rem;
}

.produkt .dostawa {
	font-size: 0.9rem;
	line-height:2.5rem;
	font-weight: bold;
}

.produkt .ilosc, .koszyk .ilosc {
border-radius: 10px;
font-family:Lora;
font-size: 1.1rem;
line-height:2.6rem;
padding-left:10px;
padding-right:10px;
border:1px solid #777777;
font-style:italic;
color:#777777;
min-width:50px;
width:50px;
text-align:center;
margin-right:10px;
}

.produkt_opis h2 {
	font-size:1.2rem;
	color: #f78da7;
	font-style:italic;
	font-family: Lora;
	display:block;
	width:100%;	
}

.cechy {
	display:grid;
	grid-template-columns:30% 68%;
	column-gap: 2%;
	font-size: 1rem; 
	line-height:1.6rem;
}

.cechy img {
	width:100%;
	max-width:100%;
}

.cechy ul {
	list-style: disc;
	margin:10px 20px 10px 20px;
	font-size:0.9rem;
	line-height:1.5rem;
	color:#777777;
}

.koszyk_podsumowanie {color:#777777; font-size: 0.9rem; line-height: 1.3rem; width:100%;}
.koszyk_podsumowanie th { font-weight: bold; text-align:left; line-height: 1.3rem;}
.koszyk_podsumowanie td { line-height: 2rem; vertical-align:middle; max-height:75px;}
.koszyk_podsumowanie td img {max-height:75px; vertical-align:middle; border-radius:10px;}
.koszyk_podsumowanie a { text-decoration:none; color: #777777;}

.error { border:#cf2929; color:#cf2929 !important; }

.koszyk_produkty_cena, .koszyk_dostawa, .koszyk_faktura, .delivery_address {color:#777777; font-size: 0.9rem; width:100%;}
.koszyk_produkty_cena th, .koszyk_dostawa th, .delivery_address th { font-weight: bold; text-align:left; line-height: 1.3rem;}
.koszyk_produkty_cena td, .koszyk_dostawa td, .koszyk_faktura td, .delivery_address td { line-height: 1.2rem; vertical-align:middle; padding: 5px 0px 5px 0px; }

.delivery_address th { font-weight: bold; text-align:left; line-height: 2.4rem;}

.koszyk_dostawa td div, .checkbox {display: block;
  position: relative;}

.koszyk_dostawa input, .checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}

.koszyk_dostawa .radio , .checkbox .checkbox_vis {position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  }
  
.koszyk_dostawa .radio:after, .checkbox_vis:after {
  content: "";
  position: absolute;
  display: none;
}
  
.koszyk_dostawa input:checked ~ .radio:after, .checkbox input:checked ~ .checkbox_vis:after {
  display: block;
}
  
.koszyk_dostawa .radio:after, .checkbox .checkbox_vis:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #f78da7;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.checkbox {margin: 15px 0px 10px 0px; line-height: 1.2rem;}
.checkbox label {font-size: 0.9rem; font-weight: bold;}

.koszyk_dostawa label, .checkbox label { padding-left: 25px; display: block; position: absolute;}
.odstep {height:13px;}
.pol {max-width:50%; width:50%;}

.koszyk_faktura td div, .delivery_address td div {display: block; position: relative;}
  
.placeholder { position:absolute; left:20px; top:10px; z-index: -1; }

.koszyk_faktura input:focus ~ .placeholder, .delivery_address input:focus ~ .placeholder { top:-10px; left:15px; z-index:1 !important; background: #fff; padding: 0px 5px 0px 5px; font-size:0.7rem; transition: all 0.5s; }
.koszyk_faktura input[value=""]:not(:focus) ~ .placeholder, .delivery_address input[value=""]:not(:focus) ~ .placeholder {top:10px; transition: all 0.5s;}
.koszyk_faktura input:not([value=""]) ~ .placeholder, .delivery_address input:not([value=""]) ~ .placeholder { top:-10px;left:15px; z-index:1 !important; background: #fff; padding: 0px 5px 0px 5px;  font-size:0.7rem;}
.koszyk_faktura .invoice, .delivery_address .delivery { border-radius:15px; color: #777777; border :1px solid; line-height:2.4rem; min-width:85%; padding: 0px 20px 0px 20px; background: transparent; }

.wyczysc_koszyk { color: #f78da7;  text-align:right; width:95%; display:block;}
.wyczysc_koszyk button { cursor:pointer; border:0px; background: #fff; color: #f78da7; max-height:21px;}
.wyczysc_koszyk span {vertical-align:top; line-height: 1.5rem; font-size: 0.9rem;}
.wyczysc_koszyk svg { width:16px; max-height:26px; fill: #f78da7; margin-right:10px;}

label { cursor:pointer; }

.regulamin, .kontakt {font-size: 1rem; line-height:1.6rem; color:#555; margin-top:15px; margin-bottom:15px;}
.regulamin ul li:before {content: "-"; padding-right:8x;}
.regulamin a, .kontakt a {text-decoration:none; color:#555; }

.file_list { display:block;}
.file_list div { display:inline-block; width:300px;}


.paczkomat_pozycja { display:block; font-size:0.9rem; cursor:pointer;padding-left:20px; padding-right:20px; margin-top:5px;}
.paczkomat_pozycja .kod { font-weight:bold; display:block;}
.paczkomat_pozycja .adres {display:block;}
.paczkomat_pozycja .opis {display:block; font-style:italic;}

table { margin-top:5px; color:#555;}
table tr {}
table tr td { padding: 5px 20px 5px 0px; font-size: 0.9rem; }

.page_load svg {-webkit-animation:load 4s linear infinite;-moz-animation:load 4s linear infinite;animation:load 4s linear infinite; fill:#f78da7; }
@-moz-keyframes load { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes load { 100% { -webkit-transform: rotate(360deg); } }
@keyframes load { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }