.coupontxt { background: #0e8541; border: none; color: #0e8541; position: absolute; }
h6 { font-weight: bold; font-size: 16px; }
.sim_store a { line-height: 90px; }
.sim_store div { margin: 5px; }
.sim_cat div { line-height: 30px; }
.sim_cat div a { margin: 8px 5px; background: #ddd; padding: 3px 6px; border-radius: 6px; }
.price { font-size: 26px; font-weight: bold; line-height: 30px; text-align: center; display: block; }
.verfied{position: absolute; right: 90px; top:80px}
.percentage-sqaure-store { border: 1px solid #ccc; padding: 15px; margin: 10px; font-size: 2rem; }
.deal-btn { padding: 20px}
.deal{background:yellow}

/*
This is where we define the fill, color, thickness,
and stroke pattern of the SVG when there is no hover.
The dasharray and offset together define the line position
under the words. Here's also where the transition speed is set.
*/

#shape { stroke-width: 6px; fill: transparent; stroke-dasharray: 85 400; stroke-dashoffset: -260; transition: 1s all ease; }

/* 
  Pushing the text up into the SVG. Without this the
  text would be below the div's.
*/

#text { margin-top: -35px; text-align: center; background: #f1f1f1; padding: 5px; }
#text a { color: #222; text-decoration: none; font-weight: 100; font-size: 1.1em; }

/* 
  Changing the shape on hover. I change the color of the stroke,
make it thinner, then set it to again wrap around the entire parent element.
*/
.svg-wrapper:hover #shape { stroke-dasharray: 50 0; stroke-width: 7px; stroke-dashoffset: 0; stroke: #06d6a0;}


@media screen and (max-width: 500px) {
  .lgo { width: 120px; height: 120px; }
  #like_dislike_wrapper, .sidebar { display: none; }
  #mainContainer { padding: 1px 0; }
  .deal-card .discount-label { width: 100%; float: left; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 2px; background-color: #686868; }
  .deal-card .discount-label span { color: #fff; font-size: 1.3rem; text-align: center; }
  .deal-card .card-body { padding: 2px; display: flex; min-height: 38px; flex-direction: row; height: 100%; align-items: center; }
  .coupondetail { color: #575757; line-height: 15px; margin-bottom: 0; }
  #verify_text { font-size: 12px; }
  .price { font-size: 20px; font-weight: bold; line-height: 27px; text-align: center; display: block;  color:white;}
  .offer { background: #fff; height: auto; min-height: 85px; padding: 7px; margin-bottom: 5px; }
  .store-logo { float: left; width: 30%; border: 1px solid #ccc; padding: 10px; }
  .delivery_txt{font-size: 14px;}
  .store-right { float: left; width: 70%; padding: 1% 1% 0 3%; }
  .store-text { float: left; width: 100%; }
  .store-btn { float: left; width: 100%; }
  .store-btn a { float: left; }
  #popupoffer { font-size: 20px; padding: 0 0 16px 0; color: #369; font-weight: bold; }
  .store-btn input { float: left; }
  .coptext { font-size: 16px; color: #000; line-height: 16px; margin: 0; }
  .shipping_txt { font-size: 12px; }
  .svg-wrapper { margin: 4px 0; position: relative; top: -20px; width: 180px; /*make sure to use same height/width as in the html*/ height: 40px; display: inline-block; border-radius: 3px; margin-left: 5px; margin-right: 5px; /* background: #06d6a0; */ text-align: center; }
  .verfied{position: relative; top:10px}
}
@media (min-width: 501px) and (max-width: 900px) {
  .lgo { width: auto; height: auto; }
  .sidebar { width: 100%; padding: 0 15px; }
  .sidebar_bottom { display: none; }
  #mainContainer { padding: 25px 0; }
  .deal-card .discount-label { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 2px; padding: 12px 0; background-color: #686868; }
  .deal-card .discount-label span { color: #fff; font-size: 1.3rem; text-align: center; }
  .deal-card .card-body { padding: 2px 4px; display: flex; min-height: 88px; flex-direction: row; height: 100%; align-items: center; }
  .deal-card .card-body .coupondetail { color: #575757; }
  .offer { background: #fff; min-height: 110px; padding: 10px; margin-bottom: 10px; }
  .store-logo { color: #fff; text-align: center; float: left; width: 20%; border: 1px solid #ccc; padding-top: 30px; height: 110px; font-size: 16px; }
  .store-right { float: left; width: 80%; padding: 1% 1% 0 1%; }
  .store-text { float: left; width: 62%; }
  .store-btn { float: left; width: 30%; text-align: center; }
  .coptext { font-size: 17px; color: #000; line-height: 18px; margin: 0; }
  .coptext a { color: #000; }
  #popupoffer { font-size: 20px; padding: 0 0 16px 0; color: #369; font-weight: bold; }
  .coptext a:hover { color: #333; text-decoration: none; }
  #like_dislike_wrapper { margin-top: 15px; text-align: right; float: right; }
  .svg-wrapper { margin-top: 0; position: relative; top: -40px; width: 180px; /*make sure to use same height/width as in the html*/ height: 40px; display: inline-block; border-radius: 3px; margin-left: 5px; margin-right: 5px; /* background: #06d6a0; */ float: right; text-align: center; }
}
@media screen and (min-width: 901px) {
  .lgo { width: auto; height: auto; }
  .sidebar { width: 100%; padding: 0 20px; }
  .sidebar_bottom { display: none; }
  #mainContainer { padding: 30px 0; }
  .deal-card .discount-label { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 2px; padding: 12px 0; background-color: #686868; }
  .deal-card .discount-label span { color: #fff; font-size: 1.3rem; text-align: center; }
  .deal-card .card-body { display: flex; min-height: 88px; flex-direction: row; height: 100%; align-items: center; }
  .deal-card .card-body .coupondetail { color: #575757; }
  #about, .sort-order { }
  #popupoffer { font-size: 20px; padding: 0 0 16px 0; color: #369; font-weight: bold; }
  .sort-order > div:not(:first-child) { font-size: 10px; border-radius: 2px; padding: 0 4px; float: left; margin-left: 4px; color: #000; border: 1px solid #784c82; }
  .offer { background: #fff; min-height: 120px; padding: 10px; margin-bottom: 10px; }
  .store-logo { color: #fff; text-align: center; float: left; width: 20%; border: 1px solid #ccc; padding-top: 20px; height: 110px; font-size: 16px; }
  .store-right { float: left; width: 80%; padding: 1% 1% 0 3%; }
  .store-text { float: left; width: 66%; }
  .store-btn { float: right; width: 30%; }
  .price { align-items: center; border-radius: 2px;}
  .coptext { font-size: 20px; color: #000; line-height: 25px; margin: 0; }
  #like_dislike_wrapper { margin-top: 15px; text-align: right; float: right; }
  .svg-wrapper { margin-top: 0; width: 180px; /*make sure to use same height/width as in the html*/ height: 40px; display: inline-block; border-radius: 3px; margin-left: 5px; margin-right: 5px; /* background: #06d6a0; */ float: right; text-align: center; }
}