body{background-color: #ededed;}
.bg-black{background-color: #252525;}

td{
  border: 1px solid #dddddd;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 80px 4px 20px;}

.text-black{color: #000;}
.product-img{height: 65px;}

.footer_link_box ul li a{color: white !important;}
.flex-centerY-centerX {
  justify-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;}

.page-wrapper {height: 100%; display: table;}
.page-wrapper .page-inner {display: table-cell; vertical-align: middle;}
.el-wrapper {
    border-radius: 8px;
    padding: 15px;
    margin: 15px auto;
    background-color: #fff;}

@media (max-width: 991px) {
  .el-wrapper {width: 345px;}
}

@media (max-width: 767px) {
  .el-wrapper {width: 290px; margin: 30px auto;}
}

.el-wrapper:hover .h-bg {left: 0px}
.el-wrapper:hover .price {
  left: 35px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #ffffff;}

.el-wrapper:hover .add-to-cart {left: 50%}
.el-wrapper:hover .img {
  --webkit-filter: blur(7px);
  -o-filter: blur(7px);
  -ms-filter: blur(7px);
  filter: blur(7px);
  filter: progid:DXImageTransform.Microsoft.Blur(pixelradius='7', shadowopacity='0.0');
  opacity: 0.4;}

.el-wrapper:hover .info-inner {bottom: 155px}
.el-wrapper:hover .a-size {
  -webkit-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  transition-delay: 300ms;
  bottom: 50px;
  opacity: 1;}

.el-wrapper .box-down {
  width: 100%;
  height: 60px;
  position: relative;
  overflow: hidden;}

.el-wrapper .box-up {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
  text-align: center;}

.el-wrapper .img {
  padding: 20px 0;
  -webkit-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
  -moz-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
  -o-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
  transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
  /* ease-out */
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  /* ease-out */
}

.h-bg {
  -webkit-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
  -moz-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
  -o-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
  transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
  /* ease-out */
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  /* ease-out */
  width: 660px;
  height: 100%;
  background-color: #3f96cd;
  position: absolute;
  left: -659px;
}

.h-bg .h-bg-inner {
  width: 50%;
  height: 100%;
  background-color: #464646;}

.info-inner {
  -webkit-transition: all 400ms cubic-bezier(0, 0, 0.18, 1);
  -moz-transition: all 400ms cubic-bezier(0, 0, 0.18, 1);
  -o-transition: all 400ms cubic-bezier(0, 0, 0.18, 1);
  transition: all 400ms cubic-bezier(0, 0, 0.18, 1);
  /* ease-out */
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  /* ease-out */
  position: absolute;
  width: 100%;
  bottom: 0;
}

.info-inner .p-name,
.info-inner .p-company {display: block}
.info-inner .p-name {
  font-family: 'PT Sans', sans-serif;
  font-size: 18px;
  color: #252525;
}

.info-inner .p-company {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  color: #3cbeee;
  font-weight: 600;
}

.a-size {
  -webkit-transition: all 300ms cubic-bezier(0, 0, 0.18, 1);
  -moz-transition: all 300ms cubic-bezier(0, 0, 0.18, 1);
  -o-transition: all 300ms cubic-bezier(0, 0, 0.18, 1);
  transition: all 300ms cubic-bezier(0, 0, 0.18, 1);
  /* ease-out */
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  /* ease-out */
  position: absolute;
  width: 100%;
  bottom: -20px;
  font-family: 'PT Sans', sans-serif;
  color: #828282;
  opacity: 0;
}

.a-size .size {color: #252525}
.cart {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}

.cart .price {
  -webkit-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
  -moz-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
  -o-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
  transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
  /* ease-out */
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  /* ease-out */
  -webkit-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  transition-delay: 100ms;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #252525;
}

.cart .add-to-cart {
  -webkit-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
  -moz-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
  -o-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
  transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
  /* ease-out */
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  /* ease-out */
  -webkit-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  transition-delay: 100ms;
  display: block;
  position: absolute;
  top: 50%;
  left: 110%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.cart .add-to-cart .txt {
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
}



/* like cricket product page css  */
.border-start{border-left: 1px solid #dee2e6 !important;}
.card {border: none; overflow: hidden}
.thumbnail_images ul {
  list-style: none;
  justify-content: center;
  display: flex;
  align-items: center;
  margin-top: 10px;
  padding-left: 0;}

.thumbnail_images ul li {
  margin: 4px;
  padding: 4px;
  border: 2px solid #eee;
  cursor: pointer;
  transition: all 0.5s}

.thumbnail_images ul li:hover {border: 2px solid #000}
.main_image {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #eee;
  height: 320px;
  width: 100%;
  overflow: hidden}

.product-page-ul{padding-left: 1.6rem;}
.product-page-ul li{line-height: 30px; list-style-type: square;}
.product-page-ul li::marker {color: #3cbeee;}
.content p {font-size: 12px}
.ratings{margin-top: 15px;}
.ratings span {font-size: 14px; margin-left: 12px;}

.colors {margin-top: 5px}
.colors ul {list-style: none; display: flex; padding-left: 0px}
.colors ul li {
  height: 20px;
  width: 20px;
  display: flex;
  border-radius: 50%;
  margin-right: 10px;
  cursor: pointer}

.colors ul li:nth-child(1) {background-color: #6c704d}
.colors ul li:nth-child(2) {background-color: #96918b}
.colors ul li:nth-child(3) {background-color: #68778e}
.colors ul li:nth-child(4) {background-color: #263f55}
.colors ul li:nth-child(5) {background-color: #000000}

.text-side {position: relative; padding: 2rem 1.1rem !important;}
.search-option {
  position: absolute;
  background-color: #000;
  overflow: hidden;
  align-items: center;
  color: #fff;
  width: 200px;
  height: 100px;
  left: 30%;
  bottom: -200px;
  transition: all 0.5s;
  cursor: pointer
}

.search-option .first-search {
  position: absolute;
  top: 20px;
  left: 90px;
  font-size: 20px;
  opacity: 1000
}

.search-option .inputs {
  opacity: 0;
  transition: all 0.5s ease;
  transition-delay: 0.5s;
  position: relative
}

.search-option .inputs input {
  position: absolute;
  top: 200px;
  left: 30px;
  padding-left: 20px;
  background-color: transparent;
  width: 300px;
  border: none;
  color: #fff;
  border-bottom: 1px solid #eee;
  transition: all 0.5s;
  z-index: 10
}

.search-option .inputs input:focus {box-shadow: none; outline: none; z-index: 10}
.search-option:hover {border-radius: 0px; width: 100%; left: 0px}
.search-option:hover .inputs {opacity: 1}
.search-option:hover .first-search {left: 27px; top: 25px; font-size: 15px}
.search-option:hover .inputs input {top: 20px}
.search-option .share {position: absolute; right: 20px; top: 22px}
.buttons .btn {height: 50px; width: 150px; border-radius: 0px !important}



@media screen and (min-device-width: 768px) and (max-device-width: 991px){
  .el-wrapper .img{height: 250px;}
}