ul.product{display: flex; flex-wrap: wrap;  list-style: none; padding: 0; margin: 0; width: 100%;}
ul.product li{ flex: 1 1 calc(25% - 30px); max-width: calc(25% - 30px); margin: 15px; display: flex; flex-direction: column; position: relative; }

ul.product li a{ text-decoration: none; color: #343434;}
ul.product li div.img{margin:0px; position: relative;overflow: hidden;}

ul.product li div.star i.fa{font-size: 25px; opacity: 0.8;}
ul.product li div.star-0{display: none;}
ul.product li img {width: 100%; height: 100%; object-fit: contain; float: left;} /*cover*/
ul.product li a:hover img{opacity: 0.7;}
ul.product li h2{margin: 10px 0 0px 0; font-size: 17px; font-weight: normal; }
ul.product li h2 a:hover{text-decoration: underline;}
ul.product li div{margin-top: 10px;}
ul.product li code{position: absolute; top: 0px; right: 0px;background-color: rgba(255,255,255,0.5);color: black;font-size: 25px;padding: 7px 10px 7px 10px; display: none;}

ul.product li i.fa-bolt{	position: absolute; top: 0px; right: 0px;  color: red; font-size: 35px; animation:ck-ripple 2s linear infinite, heartbeat 2s linear infinite; border-radius: 50%; }

div.price span{font-size: 16px; letter-spacing: -1px;}
div.price span.sale{font-weight: bold; font-size: 140%;}
/*div.price span.sale0{display: none;}*/
div.price span.sale em{font-weight: normal; font-style: normal; font-size: 16px;}
div.price span.old{text-decoration: line-through; color: #5b5b5b;}
div.price span.off0{display: none;}
div.price span.off{color:red;}
div.price span.off i.fa{font-size: 16px; margin-right: 2px;}
/*ul.product div.price span.off{position: absolute; top: 0px; left: 0px; background-color: red; color:white;padding: 3px 6px 3px 6px; }*/

ul.product li button{  position: absolute; bottom: 1px; right: 1px;  cursor: pointer;color:white; padding: 7px 10px 7px 10px;font-size: 16px; z-index: 1; border-radius:2px; background-color: #156f50;border: #125f45 1px solid; display: none;}  /*left: 50%;transform: translateX(-50%);*/ 
ul.product li button label{cursor: pointer;}
ul.product li button:hover{background-color: #d34836;border-color: #be3c29;}
ul.product li:hover button{display: inline; transition: all .3s ease;}



div#dialogAddCart{position:fixed;width: 100%;float: left; background: url(../images/transparent-bg.png); z-index: 2000; top: 0px; left: 0px; height: 100%;}
div#dialogAddCart a.close-top{position: absolute; top: -5px; right: -5px;background-color: white;width: 30px; height: 30px; text-align: center;	border: #00b9f5 4px solid;color: #6c6c6c;}
div#dialogAddCart a.close-top i{font-size: 25px;margin-top:2px;}
div#dialogAddCart a.close-top:hover{background-color: #00b9f5; color:black;}

div#dialogAddCart form{position: absolute;left: 0px;top: 0px; background-color: white ;border: #00b9f5 6px solid;z-index: 1001; width: calc(100% - 12px); max-width:600px;}
div#dialogAddCart form div.box{float: left; width: 100%;position: relative;}
div#dialogAddCart form h3{position: absolute; top:-40px;left:-6px;margin:0px;background-color: #00b9f5;padding: 5px 15px 5px 15px;height: 25px;line-height: 25px;text-transform: uppercase;color: white;font-size:18px;font-weight: normal;}
div#dialogAddCart div.content{float: left;width: calc(100% - 20px);padding: 10px;min-height: 100px; overflow: auto;}
div#dialogAddCart a.img{float: left;width:100px;text-decoration: none;color: black;}
div#dialogAddCart a.img img{width:100%; float:left;}

div#dialogAddCart table{float: left; width: calc(100% - 120px); margin-left: 20px;}
div#dialogAddCart table th{text-align: left;background-color: #f3f3f3;line-height: 35px; font-weight:normal;text-transform: uppercase;text-indent: 5px;}
div#dialogAddCart table a{color: black; font-size:16px; text-decoration: none;padding: 5px 0 5px 0; font-weight: bold;}
div#dialogAddCart table a:hover{color: #00b9f5;}

div#dialogAddCart table span{float: left;width:100%;}
div#dialogAddCart table span label{float: left;border: #cacaca 1px solid; background-color: #f3f3f3;width: 30px;text-align: center;height:30px;line-height: 30px;font-size:25px; cursor: pointer; color:#969696;}
div#dialogAddCart table span input{float:left;border:none; border-top: #cacaca 1px solid;border-bottom: #cacaca 1px solid;width:30px;text-align: center;height: 28px;font-size:15px;}
div#dialogAddCart table span label:hover{background-color: #e2e2e2; border-color: #d5d5d5;}
div#dialogAddCart table span.totalPrice{font-size:15px;font-weight: bold;}

div#dialogAddCart div.content div{float: left;width:100%;margin:30px 0 20px 0;}
div#dialogAddCart div.content div a{font-size:15px;text-decoration: none;color: black;float: right;background-color: #fcd21b;	padding: 5px 10px 5px 10px;}
div#dialogAddCart div.content div a i{font-size:20px;}
div#dialogAddCart div.content div a:hover{background-color: red;color:white;}
div#dialogAddCart div.content div label{float: left; display: none;}


@media screen and (max-width:900px) {	
	ul.product li { flex: 1 1 calc(33.3% - 30px); max-width: calc(33.3% - 30px); }	
}

@media screen and (max-width:700px){	
   ul.product li { flex: 1 1 calc(50% - 20px); max-width: calc(50% - 20px); margin: 10px; }
}

@media screen and (max-width:300px) {	
	ul.product li { flex: 1 1 calc(100% - 10px);  max-width: calc(100% - 10px); margin: 5px;}		
}