/* Basic Styling */
@media print{
.right-column{
display:none;
}}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

.ui-accordion .ui-accordion-content{
	overflow:visible;
	padding-left:10px;
	padding-right:0px;
	padding-top:0px;
	padding-bottom:20px;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: 'Poppins', sans-serif;
}

#boundary{
	height:919px;
}

.wiz_rwd{
	height:680px;
}

.container {
  margin: 0 auto;
  display: flex;
}

/* Columns */
.left-column {
  width: 60%;
  position: relative;
}

.right-column {
  width: 40%;
  z-index:2;
}

/*moje*/

.container{
	width:1120px;
}
	

input{
	padding:5px;
	background-color:rgba(122, 122, 122, 0.1);
	text-align:center;
}
	

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li{
	width:25%;
	display:inline-block;
}

#boundary{
	width:766px;
	height:800px;
}

.ui-state-active .ui-icon{
	background-image:url(images/ui-icons_454545_256x240.png);
}

.ui-state-default .ui-icon{
		background-image:url(images/ui-icons_454545_256x240.png);
}
	


button{
	background:#d80000;
	font-size:16px;
	line-height:1.7em;
	padding:0.3em 1em;
	color:#fff;
	text-transform:uppercase;
	border:2px solid;
	cursor:pointer;
}	

button:hover{
	border-color:#d80000;
	background:transparent;
	color:#d80000;
}

#roof_color{
	border:0px solid #fff;
	font-weight:bold;
	color:#d80000;
	margin-top:3px;
	width:90%;
}

#wall_color{
	border:0px solid #fff;
	font-weight:bold;
	color:#d80000;
	margin-top:3px;
		width:90%;

}

#door_color{
	border:0px solid #fff;
	font-weight:bold;
	color:#d80000;
	margin-top:3px;
		width:90%;


}

#pasek_color{
	border:0px solid #fff;
	font-weight:bold;
	color:#d80000;
	margin-top:3px;
		width:90%;


}

.information{
	padding-top:25px;
	width:100%;
	max-width:672px;

}

.naglowek{
	color:#888888;
}

h1{
	font-size:44px;
	color:#d80000;
	padding:0px;
	margin:0px;
}

.header {
  margin: 0 auto;
}

.ui-widget {
font-family: 'Poppins', sans-serif;
padding-top:15px;
}

.RAL_decription{
	font-size:12px;
	font-weight:600;
	text-align:center;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active{
	font-size:18px;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
	font-size:18px;
}

#ui-id-1{
	margin:0px;
}

#ui-id-2{
	margin:0px;
}

#ui-id-3{
	margin:0px;
}

#ui-id-5{
	margin:0px;
}

#ui-id-7{
	margin:0px;
}


.ui-icon-triangle-1-s{
	background-position:-63px -129px;
}

.ui-icon-triangle-1-e{
	background-position:-34px -129px;
}

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl:active{
	border-bottom:2px solid red;
}

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl{
	border:2px solid #fff;
	border-bottom-right-radius:0px;
	border-bottom-left-radius:0px;
	border-top-right-radius:0px;
	border-top-left-radius:0px;
	background:rgba(122, 122, 122, 0.1);
	font-size:18px;
	font-weight:600;
	color:#ED1C24;
}

/* Left Column */
.left-column img {
  width: 100%;
  position: absolute;
  left: 0;
  top:100px;
  opacity: 0;
  transition: all 0.3s ease;
}


.left-column img.show {
  opacity: 1;
margin:0px auto;
padding:0px;
position:absolute;
z-index:-1;
}

.left-column img.active2 {
  opacity: 1;
  position:absolute;
}

.left-column img.active3 {
  opacity: 1;  
  position:absolute;
 
}

.left-column img.active4 {
  opacity: 1;
    position:absolute;
}

.left-column img.active5 {
  opacity: 1;
    position:absolute;
}

.left-column img.show {
  opacity: 1;
}

/* Right Column */

/* Product Description */
.product-description {
}
.product-description span {
  font-size: 12px;
  color: #d80000;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
}
.product-description h1 {
  font-weight: 300;
  font-size: 52px;
  color: #43484D;
  letter-spacing: -2px;
}
.product-description p {
  font-size: 16px;
  font-weight: 300;
  color: #86939E;
  line-height: 24px;
}

/* Product Configuration */
.product-color span,
.cable-config span {
  font-size: 14px;
  font-weight: 400;
  color: #86939E;
  margin-bottom: 20px;
  display: inline-block;
}

.product-color {
  margin-bottom: 0px;
}
  
.product-color1 span,
.cable-config span {
  font-size: 14px;
  font-weight: 400;
  color: #86939E;
  margin-bottom: 20px;
  display: inline-block;
}

.product-color1 {
  margin-bottom: 10px;
}
  
 .product-color2 span,
.cable-config span {
  font-size: 14px;
  font-weight: 400;
  color: #86939E;
  margin-bottom: 20px;
  display: inline-block;
}

.product-color2 {
  margin-bottom: 10px;

/* dach Color */

}

.dach-color div {
  display: inline-block;
  padding-left:15px;
  padding-top:15px;
}

.dach-color input[type="radio"] {
  display: none;
}

.dach-color input[type="radio"] + label span {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: -15px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
   transform: translateY(10px);

}

.dach-color input[type="radio"] + label span {
  border: 0px solid #FFFFFF;
  box-shadow: 0 1px 0px 0 rgba(0,0,0,0.8);
}

.dach-color input[type="radio"]#dach_color_1015 + label span {
  background-color: #EADEBD;
}
.dach-color input[type="radio"]#dach_color_1026 + label span {
  background-color: #F5FF00;
}
.dach-color input[type="radio"]#dach_color_2011 + label span {
  background-color: #EC7C25;
}
.dach-color input[type="radio"]#dach_color_3003 + label span {
  background-color: #8D1D2C;
}
.dach-color input[type="radio"]#dach_color_3011 + label span {
  background-color: #7E292C;
}
.dach-color input[type="radio"]#dach_color_4003 + label span {
  background-color: #D15B8F;
}
.dach-color input[type="radio"]#dach_color_4008 + label span {
  background-color: #904684;
}
.dach-color input[type="radio"]#dach_color_5010 + label span {
  background-color: #13447C;
}
.dach-color input[type="radio"]#dach_color_5012 + label span {
  background-color: #3481B8;
}
.dach-color input[type="radio"]#dach_color_6001 + label span {
  background-color: #28713E;
}
.dach-color input[type="radio"]#dach_color_6009 + label span {
  background-color: #26392F;
}
.dach-color input[type="radio"]#dach_color_6019 + label span {
  background-color: #B7D9B1;
}
.dach-color input[type="radio"]#dach_color_6025 + label span {
  background-color: #53753C;
}
.dach-color input[type="radio"]#dach_color_7004 + label span {
  background-color: #9EA0A1;
}
.dach-color input[type="radio"]#dach_color_7024 + label span {
  background-color: #474A50;
}
.dach-color input[type="radio"]#dach_color_7032 + label span {
  background-color: #B9B9A8;
}
.dach-color input[type="radio"]#dach_color_7035 + label span {
  background-color: #CBD0CC;
}
.dach-color input[type="radio"]#dach_color_7037 + label span {
  background-color: #7C7F7E;
}
.dach-color input[type="radio"]#dach_color_7040 + label span {
  background-color: #9DA3A6;
}
.dach-color input[type="radio"]#dach_color_7047 + label span {
  background-color: #CFD0CF;
}
.dach-color input[type="radio"]#dach_color_8015 + label span {
  background-color: #633A34;
}
.dach-color input[type="radio"]#dach_color_8017 + label span {
  background-color: #44322D;
}
.dach-color input[type="radio"]#dach_color_9003 + label span {
  background-color: #F4F8F4;
}


.dach-color input[type="radio"]:checked + label span {
  background-image: url(images/check-icn.svg);
  background-repeat: no-repeat;
  background-position: center;
    font-weight:bold;

}


/*sciana_color*/

.sciana-color div {
  display: inline-block;
  padding-left:15px;
  padding-top:15px;
}

.sciana-color input[type="radio"] {
  display: none;
}

.sciana-color input[type="radio"] + label span {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: -15px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
   transform: translateY(10px);

}

.sciana-color input[type="radio"] + label span {
  border: 0px solid #FFFFFF;
  box-shadow: 0 1px 0px 0 rgba(0,0,0,0.8);
}

.sciana-color input[type="radio"]#sciana_color_1015 + label span {
  background-color: #EADEBD;
}
.sciana-color input[type="radio"]#sciana_color_1026 + label span {
  background-color: #F5FF00;
}
.sciana-color input[type="radio"]#sciana_color_2011 + label span {
  background-color: #EC7C25;
}
.sciana-color input[type="radio"]#sciana_color_3003 + label span {
  background-color: #8D1D2C;
}
.sciana-color input[type="radio"]#sciana_color_3011 + label span {
  background-color: #7E292C;
}
.sciana-color input[type="radio"]#sciana_color_4003 + label span {
  background-color: #D15B8F;
}
.sciana-color input[type="radio"]#sciana_color_4008 + label span {
  background-color: #904684;
}
.sciana-color input[type="radio"]#sciana_color_5010 + label span {
  background-color: #13447C;
}
.sciana-color input[type="radio"]#sciana_color_5012 + label span {
  background-color: #3481B8;
}
.sciana-color input[type="radio"]#sciana_color_6001 + label span {
  background-color: #28713E;
}
.sciana-color input[type="radio"]#sciana_color_6009 + label span {
  background-color: #26392F;
}
.sciana-color input[type="radio"]#sciana_color_6019 + label span {
  background-color: #B7D9B1;
}
.sciana-color input[type="radio"]#sciana_color_6025 + label span {
  background-color: #53753C;
}
.sciana-color input[type="radio"]#sciana_color_7004 + label span {
  background-color: #9EA0A1;
}
.sciana-color input[type="radio"]#sciana_color_7024 + label span {
  background-color: #474A50;
}
.sciana-color input[type="radio"]#sciana_color_7032 + label span {
  background-color: #B9B9A8;
}
.sciana-color input[type="radio"]#sciana_color_7035 + label span {
  background-color: #CBD0CC;
}
.sciana-color input[type="radio"]#sciana_color_7037 + label span {
  background-color: #7C7F7E;
}
.sciana-color input[type="radio"]#sciana_color_7040 + label span {
  background-color: #9DA3A6;
}
.sciana-color input[type="radio"]#sciana_color_7047 + label span {
  background-color: #CFD0CF;
}
.sciana-color input[type="radio"]#sciana_color_8015 + label span {
  background-color: #633A34;
}
.sciana-color input[type="radio"]#sciana_color_8017 + label span {
  background-color: #44322D;
}
.sciana-color input[type="radio"]#sciana_color_9003 + label span {
  background-color: #F4F8F4;
}


.sciana-color input[type="radio"]:checked + label span {
  background-image: url(images/check-icn.svg);
  background-repeat: no-repeat;
  background-position: center;
    font-weight:bold;

}

/*drzwi color*/

.drzwi-color div {
  display: inline-block;
  padding-left:15px;
  padding-top:15px;
}

.drzwi-color input[type="radio"] {
  display: none;
}

.drzwi-color input[type="radio"] + label span {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: -15px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
   transform: translateY(10px);

}

.drzwi-color input[type="radio"] + label span {
  border: 0px solid #FFFFFF;
  box-shadow: 0 1px 0px 0 rgba(0,0,0,0.8);
}

.drzwi-color input[type="radio"]#drzwi_color_1015 + label span {
  background-color: #EADEBD;
}
.drzwi-color input[type="radio"]#drzwi_color_1026 + label span {
  background-color: #F5FF00;
}
.drzwi-color input[type="radio"]#drzwi_color_2011 + label span {
  background-color: #EC7C25;
}
.drzwi-color input[type="radio"]#drzwi_color_3003 + label span {
  background-color: #8D1D2C;
}
.drzwi-color input[type="radio"]#drzwi_color_3011 + label span {
  background-color: #7E292C;
}
.drzwi-color input[type="radio"]#drzwi_color_4003 + label span {
  background-color: #D15B8F;
}
.drzwi-color input[type="radio"]#drzwi_color_4008 + label span {
  background-color: #904684;
}
.drzwi-color input[type="radio"]#drzwi_color_5010 + label span {
  background-color: #13447C;
}
.drzwi-color input[type="radio"]#drzwi_color_5012 + label span {
  background-color: #3481B8;
}
.drzwi-color input[type="radio"]#drzwi_color_6001 + label span {
  background-color: #28713E;
}
.drzwi-color input[type="radio"]#drzwi_color_6009 + label span {
  background-color: #26392F;
}
.drzwi-color input[type="radio"]#drzwi_color_6019 + label span {
  background-color: #B7D9B1;
}
.drzwi-color input[type="radio"]#drzwi_color_6025 + label span {
  background-color: #53753C;
}
.drzwi-color input[type="radio"]#drzwi_color_7004 + label span {
  background-color: #9EA0A1;
}
.drzwi-color input[type="radio"]#drzwi_color_7024 + label span {
  background-color: #474A50;
}
.drzwi-color input[type="radio"]#drzwi_color_7032 + label span {
  background-color: #B9B9A8;
}
.drzwi-color input[type="radio"]#drzwi_color_7035 + label span {
  background-color: #CBD0CC;
}
.drzwi-color input[type="radio"]#drzwi_color_7037 + label span {
  background-color: #7C7F7E;
}
.drzwi-color input[type="radio"]#drzwi_color_7040 + label span {
  background-color: #9DA3A6;
}
.drzwi-color input[type="radio"]#drzwi_color_7047 + label span {
  background-color: #CFD0CF;
}
.drzwi-color input[type="radio"]#drzwi_color_8015 + label span {
  background-color: #633A34;
}
.drzwi-color input[type="radio"]#drzwi_color_8017 + label span {
  background-color: #44322D;
}
.drzwi-color input[type="radio"]#drzwi_color_9003 + label span {
  background-color: #F4F8F4;
}


.drzwi-color input[type="radio"]:checked + label span {
  background-image: url(images/check-icn.svg);
  background-repeat: no-repeat;
  background-position: center;
    font-weight:bold;

}

/*opaska color*/

.pasek-color div {
  display: inline-block;
  padding-left:15px;
  padding-top:15px;
}

.pasek-color input[type="radio"] {
  display: none;
}

.pasek-color input[type="radio"] + label span {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: -15px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
   transform: translateY(10px);


}

.pasek-color input[type="radio"] + label span {
  border: 0px solid #FFFFFF;
  box-shadow: 0 1px 0px 0 rgba(0,0,0,0.8);
}

.pasek-color input[type="radio"]#pasek_color_1015 + label span {
  background-color: #EADEBD;
}
.pasek-color input[type="radio"]#pasek_color_1026 + label span {
  background-color: #F5FF00;
}
.pasek-color input[type="radio"]#pasek_color_2011 + label span {
  background-color: #EC7C25;
}
.pasek-color input[type="radio"]#pasek_color_3003 + label span {
  background-color: #8D1D2C;
}
.pasek-color input[type="radio"]#pasek_color_3011 + label span {
  background-color: #7E292C;
}
.pasek-color input[type="radio"]#pasek_color_4003 + label span {
  background-color: #D15B8F;
}
.pasek-color input[type="radio"]#pasek_color_4008 + label span {
  background-color: #904684;
}
.pasek-color input[type="radio"]#pasek_color_5010 + label span {
  background-color: #13447C;
}
.pasek-color input[type="radio"]#pasek_color_5012 + label span {
  background-color: #3481B8;
}
.pasek-color input[type="radio"]#pasek_color_6001 + label span {
  background-color: #28713E;
}
.pasek-color input[type="radio"]#pasek_color_6009 + label span {
  background-color: #26392F;
}
.pasek-color input[type="radio"]#pasek_color_6019 + label span {
  background-color: #B7D9B1;
}
.pasek-color input[type="radio"]#pasek_color_6025 + label span {
  background-color: #53753C;
}
.pasek-color input[type="radio"]#pasek_color_7004 + label span {
  background-color: #9EA0A1;
}
.pasek-color input[type="radio"]#pasek_color_7024 + label span {
  background-color: #474A50;
}
.pasek-color input[type="radio"]#pasek_color_7032 + label span {
  background-color: #B9B9A8;
}
.pasek-color input[type="radio"]#pasek_color_7035 + label span {
  background-color: #CBD0CC;
}
.pasek-color input[type="radio"]#pasek_color_7037 + label span {
  background-color: #7C7F7E;
}
.pasek-color input[type="radio"]#pasek_color_7040 + label span {
  background-color: #9DA3A6;
}
.pasek-color input[type="radio"]#pasek_color_7047 + label span {
  background-color: #CFD0CF;
}
.pasek-color input[type="radio"]#pasek_color_8015 + label span {
  background-color: #633A34;
}
.pasek-color input[type="radio"]#pasek_color_8017 + label span {
  background-color: #44322D;
}
.pasek-color input[type="radio"]#pasek_color_9003 + label span {
  background-color: #F4F8F4;
}


.pasek-color input[type="radio"]:checked + label span {
  background-image: url(images/check-icn.svg);
  background-repeat: no-repeat;
  background-position: center;
    font-weight:bold;

}

/* Product Price */
.product-price {
  display: flex;
  align-items: center;
}

.product-price span {
  font-size: 26px;
  font-weight: 300;
  color: #43474D;
  margin-right: 20px;
}

.cart-btn {
  display: inline-block;
  background-color: #7DC855;
  border-radius: 6px;
  font-size: 16px;
  color: #FFFFFF;
  text-decoration: none;
  padding: 12px 30px;
  transition: all .5s;
}
.cart-btn:hover {
  background-color: #64af3d;
}

/*Drop down*/
 /* Dropdown Button */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;} 

/*dodatkowe*/
.ui-accordion .ui-accordion-content{
	border:0px solid;
	padding-right:10px;
}


/* Responsive */
@media (max-width: 940px) {
	
#boundary{
	height:150px;
}
	
.information{
	padding-top:15px;
	padding-left:15px;
}
	
  .container {
    flex-direction: column;
    margin-top: 60px;
  }

  .left-column,
  .right-column {
    width: 100%;
  }

  .left-column img {
    width: 100%;
    right: 0;
    top: 20px;
    left: initial;
  }
  
  .left-column img.show {
  opacity: 1;
margin:0px auto;
padding:0px;
position:absolute;
top:20px;
z-index:-1;
}

.container{
	margin-top:0px;
	width:100%;
}

.right-column{
	position:relative;
	top:460px;
}
.left-column img.active2 {
  opacity: 1;
  position:absolute;
top:20px;
}

.left-column img.active3 {
  opacity: 1;  position:absolute;
top:20px;
 
}

.left-column img.active4 {
  opacity: 1;
    position:absolute;
top:20px;
}

.left-column img.active5 {
  opacity: 1;
    position:absolute;
top:20px;
}
}
@media (max-width: 535px) {
  .left-column img {
    width: 100%;
    top: -85px;
  }
  
  li{
	 width:100%;
  }
  
  .left-column img.show{
	  top:180px;
  }
  
  .left-column img.active2{
	  top:180px;
  }
  
  .left-column img.active{
	  top:180px;
  }
  
  .left-column img.active3{
	  top:180px;
  }
  
  .left-column img.active4{
	  top:180px;
  }  
  
  .left-column img.active5{
	  top:180px;
  }
  
  #roof_color{
	border:0px solid #fff;
	font-weight:bold;
	color:#d80000;
	margin-top:3px;
	width:auto;
}

#wall_color{
	border:0px solid #fff;
	font-weight:bold;
	color:#d80000;
	margin-top:3px;
		width:auto;
}

#door_color{
	border:0px solid #fff;
	font-weight:bold;
	color:#d80000;
	margin-top:3px;
		width:auto;
}

#pasek_color{
	border:0px solid #fff;
	font-weight:bold;
	color:#d80000;
	margin-top:3px;
		width:auto;


}

.right-column{
	width:100%;
	padding-left:15px;
  
}

.left-column img{
	top:180px;
}

.container{
	width:100%;
}

.information{
	padding-left:15px;
}


@media only screen and (min-width:321px) and (max-width:768px) {
#boundary{
	height:150px;
}

.wiz_rwd{
	height:1180px;
}

	.left-column img.show{
		top:60px;
	}
	.left-column img.active2{
	  top:60px;
  }
  
  .left-column img.active{
	  top:60px;
  }
  
  .left-column img.active3{
	  top:60px;
  }
  
  .left-column img.active4{
	  top:60px;
  }  
  
  .left-column img.active5{
	  top:60px;
  }
  
}

@media only screen and (max-width:320px){
#boundary{
	height:150px;
}

.wiz_rwd{
	height:1180px;
}


	.right-column{
		position:relative;
		top:240px;
	}