:root {
            --primary: #2563eb;
            --dark: #1f2937;
            --light: #f3f4f6;
        }


	*{padding: 0;margin: 0;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;line-height: 150%;}

	header{position: sticky;top: 0;/*box-shadow: 0px 0px 10px var(--light);*/border-bottom: 2px solid var(--light);padding: 10px 5%;background-color: #fff;z-index: 9;display: flex;flex-direction: row;align-items: center;justify-content: space-between;}

nav{color: #7e7e7e;}
.butOrderNow{background-color: var(--primary);color: #fff;padding: 6px 12px;border-radius: 10px;margin-left: 12px;}
header a{color: inherit;text-decoration: none;color: #000;}

	header #brand{font-size: 24px; font-weight: bold;display: flex;}
	header #brand img{height: 34px;width: auto;}

	#product_col_wrap{display: flex;flex-direction: row;}
	#product_col_wrap section{flex-basis: 50%;height: calc(100vh - 56px);}

	#product_col_wrap section:nth-child(1){/*background-image: url("./img/black_1.webp");background-repeat: no-repeat;background-size: cover;*/}

	#product_col_wrap section:nth-child(2){justify-content: center;align-content: center;overflow-y: scroll;}

#product_col_wrap .product_image_holder{background-repeat: no-repeat;background-size: cover;height: calc(100vh - 56px);width: 100%;display: none;background-position: center;}


#gallery_wrap{/*background-color: #fff;border-radius: 20px;padding: 5%;*/}


#product_images_wrap{user-select: none; 
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            touch-action: pan-y;
            position: relative;
        }


/* Fading animation */
#product_images_wrap img {
    display: none;
    width: 100%;
  animation-name: fade;
  animation-duration: 1.5s;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 14px;
  margin: 24px;
  margin-top: -22px;
  color:rgba(0,0,0, 0.4);
  font-weight: bold;
  font-size: 10px;
  transition: 0.6s ease;
  border-radius: 100px;
  user-select: none;
   background-color: rgba(230, 230, 230, 0.5);


}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 100px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(230, 230, 230, 0.9);
  color: #000;
    -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}


@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}



#dot1_wrap{margin-bottom: 30px;position: absolute;bottom: 0;width: 100%;}
.dot1 {
  cursor: pointer;
  height: 8px;
  width: 8px;
  margin: 0 12px;
 background-color: rgba(151, 151, 151, 0.4);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  
}


.dot2 {
  cursor: pointer;
  height: 24px;
  width: 24px;
  margin: 0 2px;
 /* background-color: #bbb;*/
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  border: 1px solid rgba(87, 86, 86, 0.2);
}

.active, .dot1:hover {
  background-color: rgba(151, 151, 151, 1);
}


/*#fade1{background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);}*/

	#product_desc article{padding:24px 5%;}
  h1{font-size: 28px;/*display: flex;
  justify-content: left;
  align-items: center;*/}
  h1 img{display:inline-block;height: 33px; margin-left: 6px;border-radius: 5px;width: auto;vertical-align: middle;margin-bottom: 6px;}
	h1, h2, h3{padding-bottom: 12px;}
	#tagline{font-size: 30px;color: #9b9b9b;font-weight: bold;}
	form h2{margin: 24px 0;}
	p{margin-bottom: 12px;}

 .badge {
            background: #dcfce7;
            color: #166534;
            padding: 12px 24px;
            border-radius: 20px;
            font-size: 1rem;
            display: inline-block;
            margin-bottom: 24px;
        }

#price{font-size: 24px;font-weight: normal;margin-bottom: 24px;display: block;}


#payment_form{margin:24px 5%;background-color: #f2f2f2;border-radius: 10px;padding: 24px;}
#payment_form input, #payment_form select, #payment_form label{display: block;width: -moz-available;min-width: 90%;}
#payment_form input, #payment_form select{padding:10px;border-radius: 10px;margin-bottom: 24px;border: none;margin-top: 6px;background-color: #fff;border: 1px solid #ddd;outline: none;}

select{-webkit-appearance: none;color: inherit;}
#button_pay{color: white;
  border: none;
  padding: 12px 24px;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s;
  margin: 24px 0;
  display: inline-block;
background-color: var(--primary);}


#footer{background-color: #333;color: #fff;margin-top: 50px;}

#map iframe{width: 100%;min-height: 300px;border: none;}


#featureWrap{padding:24px 5%;
 /* Style the buttons that are used to open and close the accordion panel */
}
.accordion {
  /*background-color: #e5f2ff;*/
  color: #000;
  cursor: pointer;
  /*padding:12px;*/
  width: calc(100% - 24px);
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  font-size: 1rem;
  border-radius: 10px;
  font-weight: normal;
    -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  display: flex;
  justify-content: space-between;

}



/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  /*background-color: #d5e5f2;*/
 /* background-color: #e5f2ff;*/
 background-color: #fff;

}

.panel {
  padding: 5px 24px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion:after {
  content: '\02795'; 
  font-size: 8px;
  color: #777;
  /*float: right;
  margin-left: 5px;*/
  font-weight: normal;
}

.accordionActive:after {
  content: "\2796"; 
  font-weight: normal;
}

.accordion h3{font-size: 1rem;font-weight: normal;}

	@media (max-width: 600px) {
		header {padding: 8px 5%;}
		header #brand img{height: 28px;width: auto;}
		header a{font-size: 14px;}

    h1{justify-content: left;}
#product_col_wrap{display: flex;flex-direction: column;}
#product_col_wrap .product_image_holder{background-repeat: no-repeat;background-size: cover;height: calc(60vh);width: 100%;display: none;background-position: center;}


.badge{

	padding: 8px 20px;
            border-radius: 20px;
            font-size: 0.8rem;
}

}