/* CSS Document */
/* Products List ==============================================================*/
.product-list { width:98%;  margin: 5% auto; display: block; }
.product-list li{ width:90%; margin: 50px auto; display: block;  vertical-align: top; }

.product-list li figure { position: relative;  overflow: hidden; width: 100%; text-align: center; cursor: pointer;}
.product-list li figure img { position: relative; display: block;  height:auto;  width: 100%; padding: 10px;  opacity: 1;position: relative; z-index: 0; background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(0px,0, 0); transform: translate3d(0px,0,0);}
.product-list li figcaption{  width: 80%; margin-top: -20px;  position: relative; z-index: 99; }
.product-list li figcaption h3{    padding:10px; font-size: 1.15rem;  font-weight: 700; color: #fff; background: #1f328c; width: 253px; margin-left: 0px;}
.product-list li figcaption h4{    padding:5px; font-size: .8rem;  font-weight:400; color: #1f328c;}
/* For some effects it will show as a button */
.product-list li figure:hover img{ opacity: .75; transform: scale(1.1); background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);}
.product-list li figure:before,.product-list li figure:after{ content: "";width: 0;height: 0;position: absolute;opacity: 0;z-index: 1; transition: all 0.5s ease 0s;}
.product-list li figure:before{ bottom: 5%;left: 5%;border-bottom: 2px solid #fff;border-left: 2px solid #fff;}
.product-list li figure:after{top: 5%;right: 5%;border-top: 2px solid #fff;border-right: 2px solid #fff;}
.product-list li figure:hover:before,.product-list li figure:hover:after{opacity: 1; width: 100%;height: 100%;}

@media (min-width:768px) {
.product-list li{  display: inline-block; width: 45%; margin-top: 50px; margin-bottom: 50px; margin-left: 20px; }

}

@media (min-width:1100px) {
.product-list li{  display: inline-block; width: 30%; margin-bottom: 50px; margin-left: 20px;}

}




/*----product  tag label------*/
.note { position: absolute; top: 0; left: 0; width: 80px; height: 80px; border-radius:99em;  padding:20px 13px; font-size: 0.9em; line-height: 1.5em;  }
.note.on-sale { background:#aa2d2b; color: #fff; }
.note.no-stock { background:#daa520; color: #fff; }
.price { padding:10px 13px; display:block;   font-size: 1.3em; color:#aa2d2b; }
.price.sale { color:#aa2d2b; }
.price.old { position: absolute; top:43px; right: 10%;  padding: 4px 6px; text-decoration: line-through; font-size:1rem; color: #B1B1B1; }
a .price{padding:0px;color: #000; font-size: .9rem; }
a .price strong{ color:#c32f2f; font-size: 1.1rem;}

/* Products Detail ============================================================*/
.productwrap{ margin: 0 auto;  padding: 0 15px; width:100%; max-width:1440px; display:flex;  flex-wrap: wrap-reverse;  flex-direction:row;  justify-content: flex-start; }
.productwrap h1 { width: 100%;  margin:0px 0px 10px 0; padding-top: 30px; font-size:1.5rem;color: #2a2a2a; font-weight: 400;   line-height: 1.25em;   text-align: left; }
.productwrap h1::after {content: ""; display: block; margin:-30px 0 -10px 0; background:url(../images/v-line-2.png) no-repeat left bottom; background-size:50% auto;   width: 452px; height:70px; }	
.bg-light{background:#f2f2f2; }

/****wrap-box============================================================*/
.leftwrap {width:100%;   padding: 5% 0px 20px 0px;  vertical-align: top; }
.rightwrap { width: 100%;    margin:3% auto 5% 5%; padding-left: 0px;}

.product-info { margin:1% auto; padding:1em .5em; display: block; width: 100%; vertical-align: top; }
.product-info p {margin-bottom: 30px; font-size:1rem;  line-height: 1.5em; font-weight:200; }
.product-info ul {margin:5% auto; display:block;}
.product-info ul li {margin:2% auto 0px auto; width: auto; display:block; font-size: .9rem; }
.product-info ul li span{  display: inline-block; }
.product-info ul li span.name{ width: 40%; text-align:left; display:inline-block;  font-weight:700;  }
.product-info ul li span.value{ width: 80%;  text-align:left; display:inline-block; vertical-align: top; font-weight:400;  color: #52575c;   }
a.viewmods{ margin:3% 0px; display:block; font-size: .8rem;  color:#0070c9;  }
a.viewmods:hover{ text-decoration: underline;}

.product-name { width: 100%;   display: block;  margin: 0; padding: 0;  font-size: 2rem;  line-height: 1.1;  font-style: italic; color: #1f328c; }
.product-name::after { display: none; }
.product-name span{  font-size: 1.5rem; color: #52575c;}
.label { color: #000; font-size: 1em; font-weight:500; }
.tag{ display: inline-block; margin:5px; padding: 3px 15px;  font-size: .9rem; text-align: center; color:#827055;   border:solid 1px #827055; border-radius: 15px; }

.model-name { color:#999; font-weight: 700; }
.short-description { margin:auto; padding:1em; display: block; width: 100%; }
.short-description p { margin-bottom: 1px; font-size:.85rem; color: #42444a; line-height: 1.65em; font-weight: 400; }




.rightwrap ol.page { width: 100%;   margin: 0px auto; text-align: left; }
.rightwrap ol.page li { width:auto; display: inline-block;    list-style-type: none; margin: 5% auto 2% 5px;  }
.rightwrap ul.share li{  display: inline-block; }
.rightwrap ul.share li a{  }
.rightwrap ul.social-icons li.facebook a,.rightwrap ul.social-icons li.instagram a, .rightwrap ul.social-icons li.line a{ background-color:transparent; border-radius: 4px;}


/* Theme li - Product View */
.resp-tab-content { display: block; padding: 30px ; width: 98%; max-width:1000px;  margin:2% auto; line-height: 1.75em; }
.resp-tab-content h2{ margin:1% auto 5% auto; padding-bottom:18px; font-size:1.5rem;  color:#000; font-weight: 500;border-bottom: 1px solid  #d6d6d6; }
.resp-tab-content p{   margin-bottom:10px; font-size:1rem; font-weight:400;   }


/***tab size*/
.edit{ width:96%; margin:0 auto 20px auto; display: block; text-align:left; }
.edit p{ margin:2% auto;  line-height:1.75rem;}
.edit p strong{ padding-bottom:2em; font-weight: 700; font-size:1.1em; color:#ff6600; }
.edit .col-5 { width: 100%; }

.edit-ul { margin: 0 0 20px 0; padding: 0; list-style: none; }
.edit-ul li { margin: 0 0 8px 0; padding: 0 0 0 20px; display: block; position: relative; font-size:.85rem; font-weight:400;  line-height:1.35rem;   }
.edit-ul li:before { content: ""; position: absolute; top: 12px; left: 5px; height: 2px; width: 6px; background: #666; display: block; }

.edit li { padding-left: 10px;}
.edit li:before { content: " - "; top: 12px; left: 5px; width: 6px;}

.datatable{ width: 100%; color: #888; border:  1px solid #888;  border-spacing: 0px;}
.datatable th{ background-color: #08c; border-bottom: 1px solid #fff;  color: #fff; font-weight: normal; padding: 0 0 0 10px; text-align: center; width: 150px; }
.datatable td{ font-weight: normal; height: 30px;  padding: 0 0 0 10px; text-align: center; width: 400px;	color: #888; border-bottom: 1px solid #888; border-spacing: 0px;}



/*original style*/
.edit-title-1{ margin: 30px 0px; padding-bottom: 5px;color: #cd4a56; font-size: 25px; font-weight:400; line-height: 30px;border-bottom: 2px solid #df9ca7;}
.edit-title-2{ margin: 30px 0px; padding-bottom: 5px;color:#a76859; font-size:20px; font-weight:400; line-height:30px; border-bottom:3px dotted #a76859;}
.edit-title-3{ margin: 30px 0px; padding-bottom: 5px;color:#895d58; font-size:20px; font-weight:400; line-height:30px; }



/*best-wrap*/ 
.best-wrap{ width: 100%; display: block; margin:0px auto; background: url(../images/index/best-wrap.jpg) no-repeat left bottom; background-size: 100% auto;}
.best-wrap .product{margin:0px auto; padding:1% 0px 5% 0px;}

@media (min-width:768px) {
	
.leftwrap {width:52%;  display:inline-block;  padding: 5% 0px 20px 0px;  vertical-align: top; }
/****rightwrap============================================================*/
.rightwrap { width: 45%;  display:inline-block; margin:3% auto 5% auto; padding-left: 0px;}
.product-name {  font-size: 3rem;  }
	
	
}



@media (max-width:1095px) {
.product-list { width:98%;  margin: 5% auto; display: block; padding-left: 5px; }
}