/* Products ===================================================================*/
.product { width:98%; max-width: 900px; margin: 5% auto; display: flex; flex-wrap: wrap;  flex-direction:row;  align-items:flex-start;  justify-content:flex-start;  }
.product li{ width: 100%; margin-bottom: 35px; background: #fff linear-gradient(-130deg, transparent 350px, #5b204a  0) left;  background-repeat: no-repeat;  background-size: 49% 100%;  border-bottom: dashed 1px rgba(198,175,176,1.00) ;} 
.product li figure { position: relative; width: 40%; margin: auto; display: inline-block; align-items: flex-start;    text-align: center; cursor: pointer; overflow: hidden; }
.product li figure img { position: relative; opacity: 1;    -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 li figcaption { width:58%; height: auto; padding:5vh 0px 0px 30px; display: inline-block; margin: auto; vertical-align:top; color: #fff;  text-align: left; }
.product li h3{ padding-bottom: 20px; word-spacing: -0.15em;  font-size: 1.75rem;  font-weight: 600; color: #000;   }
.product li h4{ font-size:1.15rem; color: #5b204a;}
.product li p{font-size:.9rem; padding:10px 0px;  } 
.product li figure:hover img{ opacity: .2; transform: scale(1.1); }
.product li:nth-child(2n){background: #fff linear-gradient(130deg, transparent 350px, #5b204a  0) right;  background-repeat: no-repeat;  background-size: 49% 100%; }
.product li:nth-child(2n) figure{align-items: flex-end; float: right; }

@media only screen and (max-width: 768px) {
.product li,.product li:nth-child(2n){ background: #fff;}	
.product li figure {  width: 96%; margin: auto; display: block; }
.product li figcaption { width: 96%; margin: auto; display: block; }	
}


/* Products List ==============================================================*/
.product-list { width:98%;  margin: 5% auto; display: flex; flex-wrap: wrap;  flex-direction:row;  align-items:flex-start;  justify-content:flex-start;  }
.product-list li{ width: calc(100%/4 - 15px); margin-right: 15px; margin-bottom: 35px; }
.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%;    opacity: 1; 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 h3{    padding:10px; word-spacing: -0.15em;  font-size: 1.15rem;  font-weight: 500; color: #5b204a;}
/* 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, #5b204a 0%, #c646a1 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 only screen and (max-width: 992px) { 
.product-list { justify-content: space-between; }
.product-list li { width: calc(49% - 19px); margin-right: 0px; }
.product-list .pic { display: flex; justify-content: center; align-items: center; }
.product-list .pic img { max-height: 215px; } 
}

@media only screen and (max-width: 480px) { 
.product-list li { width: calc(100% - 10px); } 
}

/* Products Detail ============================================================*/
.productwrap{ margin:0 auto;  width:100%; display:block; }
.productwrap h1 { width: 100%;  margin-bottom: 2%; font-size:2.10938rem;color: #323d47; font-weight: 400;   line-height: 1.25em;   text-align: left; }
.productwrap h1::after { content: ""; display: block; width:80%; height: 2px; margin: 10px 0; background-image: linear-gradient(to right, #5b204a 0%, #fff 100%);  }
.productwrap h2{  margin:5% auto; font-size:1.15rem; color:#0070c9;  font-weight: 700; }
.bg-light{background:#f2f2f2; }
.leftwrap {width: 40%;  display:inline-block;  padding: 0px 0px 20px 0px;  vertical-align: top; }
.productwrap ol { list-style-type: decimal; }
.productwrap ul { list-style-type: disc;}

/****rightwrap============================================================*/
.rightwrap { width: 50%;  display:inline-block; margin:5% auto 5% 5%; padding-left: 50px;   }
.product-info { margin:1% auto; padding:1em .5em; display: block; width: 100%; border-bottom: 1px solid #d6d6d6;}
.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:3% 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: 50%;  text-align:left; display:inline-block; font-weight:400;  color: #888;   }
a.viewmods{ margin:3% 0px; display:block; font-size: .8rem;  color:#0070c9;  }
a.viewmods:hover{ text-decoration: underline;}

.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.youtube a, .rightwrap ul.social-icons li.line a{ background-color:#B3B3B3; border-radius: 4px;}

/*tab*/
.resp-tabs-list {   width: 100%; margin:0px; padding: 0px;  text-align: center; background: #444; border-bottom:solid 1px rgba(255,255,255,.5); border-top:solid 1px rgba(255,255,255,.5);  }
.resp-tabs-list li { display: inline-block; padding:3px 2em; margin: 0px -2px;  width:auto; border-left:solid 1px rgba(255,255,255,.3);  vertical-align: middle;  list-style: none; text-align: center; font-weight:400; font-size:.9rem; line-height:2.5em; cursor: pointer;   }
.resp-tabs-list li a{color: #fff;  }
.resp-tabs-list li a:hover{color: #888;  }
.resp-tabs-list li:last-child{border-right:solid 1px rgba(255,255,255,.3);}

.resp-tab-content { display: block; padding: 30px ; width: 98%; max-width:1360px;  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: 700;border-bottom: 1px solid  #d6d6d6; }
.resp-tab-content p{   margin-bottom:34px; font-size:.9rem; }


.related-list li{ width: calc(100%/4 - 19px); margin-right: 5px; margin-bottom:5%; display:inline-block; text-align: center; }
.related-list li a h3{ padding: 20px; word-spacing: -0.15em;  font-size: .9rem;  font-weight: 400; color: #000;   }


/*table style============================================================*/
.modeldetails {width: 100%;  min-width:800px;  margin: 2% auto; border: 1px solid rgba(255,255,255,.2); }
.modeldetails thead tr {background: #333;color: #fff; }
.modeldetails thead tr th {border-left: 1px solid rgba(255,255,255,.2); }
.modeldetails thead tr th:first-of-type {border-left:none;}
.modeldetails th, td {padding: 5px 12px;text-align: center;vertical-align: middle; font-size: .8rem;}
.modeldetails td, .modeldetails th {text-align: left; vertical-align: middle;}
.modeldetails td{ border-left: 1px solid #eee;}
.modeldetails tbody { color: #201c1d}
.modeldetails tbody tr { border-bottom: 1px solid #eee; border-top: 1px solid #eee;}
.modeldetails tbody tr td:last-child {border-right: 1px solid #eee}
.modeldetails tbody tr:nth-of-type(odd) { background: #fff}
.modeldetails tbody tr:nth-of-type(even) {background:#fafafa; }
.modeldetails img { vertical-align: middle;margin: 5px;}
.img-s{ width: 100%; max-width:50px; height: auto;  }



/*table*/
.datatable {   vertical-align: top;  margin: 2% auto; width:100%; min-width:800px; overflow-x: auto;  }
.datatable th { padding: 6px; font-size: .9rem; color: #fff;     background-image: linear-gradient(60deg, #0070c9 0%, #2b76b9 37%, #2cacd1 100%); border: solid 1px rgba(255,255,255,.3);  font-weight: 700; text-align: left; text-transform: uppercase;  }
.datatable tr:nth-child(even) { background: #fafafa; }
.datatable tr:nth-child(odd) { background: #fff; }
.datatable td { padding: 6px 12px; font-size: .8rem; font-weight: 400; vertical-align:top;  border-left: solid 1px #eee; }
.datatable td img{ vertical-align:top;}
.datatable tbody tr:first-child { border-top: 1px solid #eee;  }
.datatable tbody tr:last-child { border-bottom: 1px solid #eee;  }
.datatable tbody tr td:last-child {border-right: 1px solid #eee}

.datatable-v { display: flex; overflow: hidden; background: none; }
.datatable-v tbody { width: 100%; max-width: 800px; -webkit-overflow-scrolling: touch; }
.datatable-v thead { display: flex; flex-shrink: 0; min-width: min-content; }
.datatable-v tbody { display: flex; position: relative; overflow-x: auto; overflow-y: hidden; }
.datatable-v tr { display: flex; flex-direction: column; min-width: min-content; flex-shrink: 0; }
.datatable-v td, .datatable-v th { display: block; }
.datatable-v td { background-image: none !important; border-left: 0; }
.datatable-v th:not(:last-child), .datatable-v td:not(:last-child) { border-bottom: 0; }
.datatable-v tbody tr:first-child { background: #fff; }
.datatable-v tbody tr:last-child { border: 1px solid #0070c9;  }



/***tab size*/
.edit{ width:96%; margin:0 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:#000; }
.edit .col-5 { width: 100%; }
@media only screen and (max-width: 992px) { 
	.leftwrap,.rightwrap { width: 100%; display: block;  margin: auto; padding:10px; }	
}


/* products_search */
.product_search {
	font-size: 14px;
	border-left: 1px solid #2b76b9;
	border-top: 1px solid #2b76b9;
	color: #666666;
}
.product_search th {
	color: #FFFFFF;
	background-color: #2b76b9;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	padding:5px 0;
	border-right: 1px solid #2b76b9;
	border-bottom: 1px solid #2b76b9;
	line-height: 30px;
}
.product_search td {
	text-align: center;
	vertical-align: middle;
	font-size: 14px;
	padding:5px 0 5px 0;
	border-right: 1px solid #2b76b9;
	border-bottom: 1px solid #2b76b9;
}
.product_search td a:link {
	text-decoration: none;
	color: #666666;
}
.product_search td a:visited {
	color: #666666;
	text-decoration: none;
}
.product_search td a:hover {
	color: #980203;
	text-decoration: none;
}
.product_search td a:active {
	color: #666666;
}