html, button, 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,font,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 {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}
ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600&display=swap');
a, a:link, a:visited{
	text-decoration:none;
  	color: inherit;
}
body {
	background: white;
}
body, input, textarea {
	font-family: 'Raleway', sans-serif;
	color: rgb(98, 98, 98);
	font-size: 16px;
}
img {
	max-width: 100%;
}
::placeholder {
	font-size: 16px;
	font-weight: 400;
  color: #d5d3d3;
  opacity: 1;
}
:-ms-input-placeholder {
	font-size: 16px;
	font-weight: 400;
  color: #d5d3d3;
}
::-ms-input-placeholder {
	font-size: 16px;
  color: #d5d3d3;
}
.disabled {
	position: relative;
	pointer-events: none;
}
.disabled .description {
	display: none;
}
.disabled .image, 
.disabled .title, 
.disabled .description {
	opacity: 0.2;
}
.disabled:after {
	content: 'NIEDOSTĘPNE';
	top: 0px;
	right: 0px;
	position: absolute;
	background: red;
	padding: 8px;
	font-size: 15px;
	font-weight: 500;
	color: white;
}
#choose-size .min input,
#choose-size .max input {
	border-color: red;
}
#choose-size .width.min:after,
#choose-size .width.max:after,
#choose-size .height.min:after,
#choose-size .height.max:after,
#choose-size .width.number:after,
#choose-size .height.number:after {
	font-size: 13px;
	color: #ce0000;
	font-weight: 600;
	text-align: center;
	display: block;
	width: 100%;
	margin-top: 10px;
}
#choose-size .width.min:after {
	content: 'Wymagana szerokość to 30 cm lub więcej.';
}
#choose-size .width.max:after {
	content: 'Szerokość nie może być większa niż 150 cm. Jeżeli potrzebujesz większą szerokość skontaktuj się z nami a zaproponujemy inne możliwości.';
}
#choose-size .height.min:after {
	content: 'Wymagana wysokość to 20 cm lub więcej.';
}
#choose-size .height.max:after {
	content: 'Wysokość nie może być większa niż 220 cm. Jeżeli potrzebujesz większą wysokość skontaktuj się z nami a zaproponujemy inne możliwości.';
}

#choose-size .width.number:after,
#choose-size .height.number:after {
	content: 'Wartość musi być liczbą.';
}
/*HEADER*/
.header {
	width: 100%;
	padding: 16px 32px;
	background: #fff;
	box-shadow: 0 0 12px rgba(0,0,0,.25);
	margin-bottom: 50px;
}
.header .logo img {
	max-width: 90%;
}
.header nav li {
	display: inline-block;
	margin-right: 10px;
	border-right: 1px solid #eee;
	padding-right: 15px;
}
.header nav a {
	padding: 5px;
	font-size: 18px;
}
.header nav a:hover, .header .cart a:hover {
	color: #426fd9;
}
.container-fluid {
	max-width: 1400px;
}
.header .cart i {
	font-size: 30px;
}
.header .cart a {
	position: relative;
}
.header .cart .count {
	right: -10px;
	bottom: 15px;
	font-size: 13px;
	line-height: 20px;
	border-radius: 100%;
	position: absolute;
	background-color: #426fd9;
	width: 20px;
	height: 20px;
	color: white;
	text-align: center;
	vertical-align: middle;
}
/*STEPS*/
li.done {
	color: #42ac1c;
}
.steps {
	margin-bottom: 60px;
}
.steps ul li {
	margin-bottom: 20px;
	font-size: 25px;
	line-height: 1.4;
	font-weight: 600;
	border-bottom: 1px solid #ececec;
	padding-bottom: 20px;
}
.steps ul li.done {
	cursor: pointer;
}
.steps ul li:last-child,
.header nav li:last-child {
	margin: 0;
	padding: 0;
	border: 0;
}
.steps ul li span {
	font-size: 13px;
	font-weight: 400;
	display: block;
}
.steps ul li.active {
	color: #426fd9;
}
.steps ul {
	text-align: center;
}
.sticky {
	position: sticky !important;
	top: 20px;
	left: 0;
}

/*BOX*/
.box {
	cursor: pointer;
	text-align: center;
	margin-bottom: 35px;
	transition: opacity 0.2s ease-in-out;
}
.box:hover {
	opacity: 0.9;
}
.box .title {
	color: #426fd9;
	font-weight: 600;
	line-height: 1.5;
	font-size: 18px;
	margin: 5px 0px;
	text-transform: uppercase;
}
.box .description {
	font-size: 13px;
	line-height: 1.4;
}
.box .image:after {
	content: '';
	transform: translate(-30px, 0px);
	opacity: 0;
	transition: .4s ease-in-out;
}
.box.active .image:after {
	content: "\f00c";
	font-family: "Line Awesome Free";
	font-weight: 900;
	color: white;
	font-size: 15px;
	line-height: 30px;
	opacity: 1;
	transform: translate(0,0);
	background: #426fd9;
  width: 30px;
	height: 30px;
	border-radius: 100%;
	position: absolute;
	top: -10px;
	right: -10px;
}
.box .image {
	position: relative;
}
.box .image img {
  max-width: 100%;
}

/*RODZAJ MONTAŻU*/
#rodzaj-montazu .box:hover .description {
	transition: all 0.5s;
	color: #d74848;
}

/*STEP 6*/
#choose-size label {
	text-align: center;
	display: block;
	margin-bottom: 10px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
	font-size: 18px;
	color: #426fd9;
}
#choose-size label small {
	text-transform: none;
	color: rgb(98, 98, 98);
	display: block;
	font-size: 13px;
}
#choose-size label small span {
	color: #e8223d;
}
#choose-size .price-per-item {
	font-size: 25px;
	text-align: center;
	margin: 30px 0px;
}
.price-per-item strong,
.price-total strong {
	color: #e8223d;
}
#choose-size .price-total {
	text-align: center;
	font-size: 28px;
	margin-top: -20px;
}
#choose-size input {
	width: 100%;
	border: 1px solid #999;
	height: 50px;
	padding: 10px;
	text-align: center;
	font-size: 23px;
	font-weight: 600;
	outline: 0;
}
#choose-size input:focus {
	box-shadow: 0px 0px 5px 0px #d7d7d7;
}
/*SUMMARY*/
#summary ul li {
	font-size: 20px;
	margin-bottom: 15px;
}
#summary ul li span {
	color: #426fd9;
	font-weight: 600;
}
#summary .price {
	border-top: 2px solid #f2f2f2;
	padding-top: 25px;
	margin: 25px 0px;
}
#summary .price .price-per-item,
#summary .price .price-total {
	display: block;
}
#summary .price-per-item {
	font-size: 23px;
	margin-bottom: 15px;
}
#summary .price-total {
	font-size: 25px;
}
#summary .buttons a {
	color: white;
	text-transform: uppercase;
	display: block;
	padding: 20px 20px;
	font-size: 20px;
	font-weight: 600;
	background: #426fd9;
	text-align: center;
}
#summary .buttons a:hover {
	background: #618df4
}

/*POPUP*/
.popup {
	position: fixed;
	background: rgba(255, 255, 255, 0.9);
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 9999;
	display: block;
	text-align: center;
	/*display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;*/
}
.popup .close {
	position: absolute;
	right: 20px;
	top: 20px;
	font-size: 20px;
	background: #426fd9;
	border-radius: 100%;
	color: white;
	font-weight: bold;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	cursor: pointer;
}

/*CONTENT*/
.content {
	margin-bottom: 100px;
}
.content h2.title {
	text-transform: uppercase;
	text-align: center;
	margin: 0px 0px 40px 0px;
	font-size: 27px;
	font-weight: 600;
}
.row.mt {
	margin-top: 40px;
}
.next-step {
	transition: background-color 0.5s linear;
	display: none;
	position: fixed;
	text-transform: uppercase;
	cursor: pointer;
	width: 100%;
	bottom: 0px;
	margin: 0 auto;
	left: 0;
	right: 0;
	background: #507ce3;
	color: white;
	font-size: 18px;
	padding: 10px 0px 9px 0px;
	font-weight: 600;
	text-align: center;
}
.next-step span {
	border: 2px solid white;
	padding: 11px 30px;
	display: inline-block;
}
.next-step:hover {
	background-color: #426fd9;
}
/*CART*/
a.btn-big:hover, a.btn-medium:hover {
	background: #5386fd;
	cursor: pointer;
}
a.btn-big, a.btn-medium {
	font-size: 15px;
	font-weight: 500;
	display: inline-block;
	#background: #426fd9;
	background: #ff5a00;
	color: white;
	text-transform: uppercase;
}
a.btn-big {
	padding: 20px 30px;
}
a.btn-medium {
	padding: 15px 20px;
}
#cart .sum {
	width: 100%;
	text-align: right;
}
#cart .sum p {
	font-size: 18px;
}
#cart .sum strong {
	color: red;
	font-size: 25px;
}
#cart .empty {
	text-align: center;
	width: 100%;
}
#cartTable {
	width: 100%;
}
#cartTable td {
	padding: 12px;
	border: 1px solid #d2d2d2;
	vertical-align: middle;
	text-align: center;
}
#cartTable td:first-child {
	text-align: left;
}
#cartTable small {
	font-size: 13px;
	margin-top: 5px;
	display: block;
	line-height: 1.4;
}
#cartTable td strong {
	color: #426fd9;
}
#cartTable button {
	font-size: 20px;
}
#cartTable button:hover {
	color: red;
}
a#submit_order {
	font-weight: 700;
}
/*ORDER*/
#order {
	text-align: center;
}
#order p {
	margin: 30px 0px;
}
#order h2 {
	font-weight: 600;
	font-size: 35px;
	margin: 30px 0px;
}
#order strong {
	font-size: 40px;
	color: #426fd9;
	display: block;
}
.zamowienie {
	font-size: 40px;
	color: #red;
	#display: block;
	font-weight: bold;
}
#order img {
	border: 1px solid #eee;
	max-width: 300px;
	margin-top: 5px;
}

p {
	font-size: 15px;
	line-height: 1.6;
	margin: 15px 0px;
}
button {
	cursor: pointer;
}
.sonets {
	font-size: 12px;
}
.sonets img {
	padding-left: 1px;
	margin-top: -2px;
	vertical-align: middle;
}
.sonets a:hover {
	text-shadow: 0px 0px 3px rgb(33, 154, 214);
	color: rgb(33, 154, 214) !important;
}
.sonets a:hover img {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
a, i, #footer .payments img, .sonets img, button, .zoom, #searchbox .close,
input.tnp-submit, .entry-summary .newsletter, .brands img, #footer ul.menu-social li svg path {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
 }
.zoom:hover {transform: scale(1.15);}
.opacity {opacity: 1;}
.opacity:hover {opacity: 0.7;}
.rotate:hover {transform:rotate(360deg);}

.row-calc {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: space-between; zdjete 2025-05 dla ustawienia blackout */
    justify-content: flex-start;
}

/* kalkulator ramka hover */
#grupa-tkanin > div > div:hover {
    border: 1px solid #ccc;
}
#duo-lux-standard-color, #duo-lux-thermo-color-id*, #melange-lux-thermo-color, #dolomit-lux-standard-color-id, #drago-lux-standard-color-id, #blackout-color-id > div > div:hover {
    border: 1px solid #ccc;
}
#montaz-klejony > div > div:hover  {
    border: 1px solid #ccc;
}
#kolor-profilu > div > div:hover {
    border: 1px solid #ccc;
}
#honeycomb-color-id  > div > div:hover {
    border: 1px solid #ccc;
}
.col-4.box:hover {
    border: 1px solid #ccc;
}
.col-6.box:hover {
    border: 1px solid #ccc;
}