.product-grid{ background: #fff; font-family: 'Poppins', sans-serif; text-align: center; border: 1px solid #f2efea; padding: 15px; } .product-grid .product-image{ position: relative; } .product-grid .product-image a.image{ display: block; } .product-grid .product-image img{ width: 100%; height: auto; transition: all 0.4s ease 0.1s; } .product-grid .product-image:hover img{ opacity: 0.2; } .product-grid .product-discount-label{ color: #fff; background: #fc4428; font-size: 12px; text-transform: uppercase; padding: 3px 5px; border-radius: 2px; position: absolute; top: 8px; right: 8px; transition: all 300ms ease; } .product-grid .social{ width: 120px; padding: 0; margin: 0; list-style: none; transform: translateX(-50%)translateY(-50%); position: absolute; top: 50%; left: 50%; } .product-grid .social li{ display: inline-block; margin: 0; opacity: 0; transition: all 0.4s ease 0s; } .product-grid .social li:nth-child(2){ transition: all 0.4s ease 0.2s; } .product-grid .social li:nth-child(3){ transition: all 0.4s ease 0.4s; } .product-grid .product-image:hover .social li{ opacity: 1; } .product-grid .social li a{ color: #2f3542; background: #fff; font-size: 16px; line-height: 37px; height: 37px; width: 37px; border-radius: 0 10px 0 0; box-shadow: 0 0 10px #dedede; display: block; transition: all 0.4s ease 0s; } .product-grid .social li a:hover{ color: #fff; background: #fc4428; } .product-grid .product-content{ text-align: left; padding: 12px 12px 5px; } .product-grid .product-category{ font-size: 13px; text-transform: capitalize; margin: 0 0 8px; } .product-grid .product-category a{ color: #cdcdcd; transition: all .4s ease-out; } .product-grid .product-category a:hover{ color: #fc4428; } .product-grid .title{ font-size: 17px; text-transform: capitalize; margin: 0 0 8px; } .product-grid .title a{ color: #2f3542; transition: all .4s ease-out; } .product-grid .title a:hover{ color: #fc4428; } .product-grid .price{ color: #2f3542; font-size: 18px; font-weight: 500; margin-bottom: 5px; } .product-grid .price span{ color: #cdcdcd; font-size: 14px; text-decoration: line-through; margin-right: 7px; display: inline-block; } .product-grid .rating{ padding: 0; margin: 0; list-style: none; } .product-grid .rating li{ color: #fc4428; font-size: 11px; } .product-grid .rating li.far{ color: #cdcdcd; } @media only screen and (max-width:990px){ .product-grid{ margin: 0 0 30px; } }