/* | -------------------------------------------------------- | Plugin Name : Ecommerce Grid | Plugin Version : 1.1 | Created Date : 17/01/2018 | Modified Date : 21/11/2018 | Platforms : HTML5, CSS3, Bootstrap3, JS, Jquery | Plugin Author : Yankee Themes | Author URI : https://themeforest.net/user/yankeethemes | Author Contact : enquiry[at]yankeeinfoweb[dot]com | File : ecm-plugin.css | -------------------------------------------------------- */ /* | -------------------------------------------------------- | TABLE OF CSS CONTENT | -------------------------------------------------------- | Plugin Global CSS | Grid View Plugin Style CSS | Grid View Plugin Responsive CSS | List View Plugin Style CSS | List View Plugin Responsive CSS | Plugin Style Chooser CSS */ /* Note : ecm-plugin.css is only used for plugin, do not include any base css in this file */ /* GENERAL SCAFOLDING CSS BOF ======================================================= */ /* Grid Common Selector CSS BOF */ body .product-grid { color: #333333; font-family: "Open Sans"; font-size: 14px; font-weight: 300; line-height: normal; } html, body { margin:0px; padding:0px; } .product-grid.grey-color-bg { background-color:#f1f1f1; } .product-grid.light-grey-color-bg { background-color:#f5f5f5; } .product-grid .block-title { position:relative; font-size:20px; } .product-grid .block-title::after { bottom:-23px; content:""; height:2px; left:0; position:absolute; width:30px; } section.product-grid { padding-top:70px; padding-bottom:70px; } .product-grid .thumbnail { background-color: #ffffff; border: 1px solid #dddddd; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; display: block; line-height: 1.42857; margin-bottom: 20px; padding:4px; margin-top:50px; } .product-grid .text-center { text-align:center; } /* Trypography Style CSS BOF */ .product-grid .ecm-heading-h1, .product-grid .ecm-heading-h2, .product-grid .ecm-heading-h3, .product-grid .ecm-heading-h4, .product-grid .ecm-heading-h5, .product-grid .ecm-heading-h6 { margin:3px 0; padding:3px 0; line-height:1.5; font-family: "Open Sans"; } .product-grid .ecm-heading-h5, h6 { font-weight:300; } .product-grid .ecm-heading-h1 { font-size:35px; font-weight:700; } .product-grid .ecm-heading-h2 { font-size:30px; font-weight:600; } .product-grid .ecm-heading-h3 { font-size:25px; font-weight:400; } .product-grid .ecm-heading-h4 { font-size:20px; font-weight:600; } .product-grid .ecm-heading-h5 { font-size:17px; } .product-grid .ecm-heading-h6 { font-size:15px; } .product-grid .ecm-p { line-height: 1.5; padding-bottom: 5px; padding-top: 5px; } .product-grid i { font-family:'FontAwesome'; } .product-grid ul { list-style:none; margin:0; padding:0; } .product-grid ul li { display:inline-block; line-height:1.5; } /* Image Style CSS BOF */ .product-grid .ecm-img { height: auto; line-height: normal; max-width: 100%; vertical-align: middle; } .product-grid .ecm-a .ecm-img, .product-grid .ecm-img { border:none; outline:none !important; outline-offset:0 !important; opacity:1; } .product-grid .ecm-a:hover .ecm-img { opacity:.6; } /* Button Style CSS BOF */ .product-grid .btn { padding:5px 10px; color:#fff; font-size:16px; border:medium none; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; font-weight:normal; line-height:1.42857; margin-bottom: 0; text-align:center; vertical-align:middle; white-space:nowrap; cursor:pointer; } /* Hover State CSS BOF */ .product-grid .btn:hover, .product-grid .btn:focus, .product-grid .btn:active, .product-grid .btn.active { color:#fff; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; outline:none; background:#333; } /* Hyperlinks Style CSS BOF */ .product-grid .ecm-a { color:#333333; } .product-grid .ecm-a:hover, .product-grid .ecm-a:focus, .product-grid .ecm-a:active { text-decoration:none; } .product-grid .ecm-a, .product-grid *:hover, .product-grid *:focus, .product-grid *:active .product-grid:focus { text-decoration:none; outline:none !important; outline-offset:0 !important; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; } /* | -------------------------------------------------------- | PLUGIN GRID VIEW CSS BOF | -------------------------------------------------------- */ /*** Grid Style-1 CSS BOF ***/ .product-grid .style-1 .thumbnail { position:relative; overflow:hidden; padding:5px 5px 15px; -moz-transition:all .5s ease-in-out 0s; -webkit-transition:all .5s ease-in-out 0s; -o-transition:all .5s ease-in-out 0s; -ms-transition:all .5s ease-in-out 0s; transition:all .5s ease-in-out 0s; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; } .product-grid .style-1 .user-action { text-align:center; position:absolute; bottom:0; left:-35px; z-index:2; } .product-grid .style-1 .btn { -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; display:block; height:35px; width:35px; } .product-grid .style-1 .user-rating { position:relative; z-index:3; } .product-grid .style-1 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-1 .user-rating li .ecm-rating { color:#a8a8a8; } .product-grid .style-1 .user-action li { display:block; } .product-grid .style-1 .thumbnail .item-detail { padding:10px 15px; } /* Animation CSS BOF */ .product-grid .style-1 .ecm-a, .product-grid .style-1 i, .product-grid .style-1 .ecm-img, .product-grid .style-1 .btn, .product-grid .user-action { transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition:all 0.5s ease-in-out 0s; -ms-transition:all 0.5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-1 .thumbnail:hover .user-action { left:0 } .product-grid .style-1 .thumbnail:hover .btn:hover, .product-grid .thumbnail:hover .btn:focus, .product-grid .thumbnail:hover .btn:active, .product-grid .style-1 .thumbnail:hover .btn.active { color:fff; background:#333; } /*** Grid Style-2 CSS BOF ***/ .product-grid .style-2 .thumbnail { position:relative; overflow:hidden; border:medium none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; } .product-grid .style-2 .thumbnail .item-img { position:relative; overflow:hidden; } .product-grid .style-2 .thumbnail .item-detail { padding:10px 15px; } .product-grid .style-2 .thumbnail .user-action { text-align:center; position:absolute; top:50%; right:0; left:0; width:auto; z-index:2; -moz-transform:translateY(0); -webkit-transform:translateY(0); -o-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); opacity:0; } .product-grid .style-2 .btn { -moz-border-radius:100%; -webkit-border-radius:100%; border-radius:100%; width:40px; height:40px; line-height:40px; padding:0; } .product-grid .style-2 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-2 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-grid .style-2 .thumbnail, .product-grid .style-2 .thumbnail:hover .item-detail, .product-grid .style-2 a, .product-grid .style-2 i, .product-grid .style-2 img, .product-grid .style-2 .btn, .product-grid .user-action { transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition:all 0.5s ease-in-out 0s; -ms-transition:all 0.5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-2 .thumbnail:hover { -moz-box-shadow:0 10px 30px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow:0 10px 30px 0 rgba(0, 0, 0, 0.2); box-shadow:0 10px 30px 0 rgba(0, 0, 0, 0.2); } .product-grid .style-2 .thumbnail:hover .user-action { -moz-transform:translateY(50px); -webkit-transform:translateY(50px); -o-transform:translateY(50px); -ms-transform:translateY(50px); transform:translateY(50px); opacity:1; } /*** Grid Style-3 CSS BOF ***/ .product-grid .style-3 .thumbnail { position:relative; overflow:hidden; padding:0; border:solid 1px #f2f2f2;color: #333333; font-family: "Open Sans"; font-size: 14px; font-weight: 300; line-height: normal; } .product-grid .style-3 .thumbnail .item-img { position:relative; overflow:hidden; } .product-grid .style-3 .thumbnail .item-detail { padding:10px 15px; } .product-grid .style-3 .user-action { text-align:center; position:absolute; bottom:-40px; right:0; left:0; width:auto; z-index:2; } .product-grid .style-3 .btn { -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; } .product-grid .style-3 .thumbnail .item-detail .ecm-heading-h4 { letter-spacing:0px; } .product-grid .style-3 .thumbnail .item-detail .ecm-heading-h4:after { background:rgba(0, 0, 0, .4); width:50px; height:1px; margin:10px auto 0; content:""; display:block; } .product-grid .style-3 .thumbnail .item-img::after { background:rgba(0, 0, 0, 0.8); content:""; height:10px; left:0; position:absolute; top:-10px; width:100%; } .product-grid .style-3 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-3 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-grid .style-3 .user-action, .product-grid .style-3 .thumbnail .item-detail .ecm-heading-h4, .product-grid .style-3 .thumbnail .item-detail .ecm-heading-h4:after, .product-grid .style-3 .thumbnail .item-img::after, .product-grid .style-3 a, .product-grid .style-3 i, .product-grid .style-3 img, .product-grid .style-3 .btn { transition:all .5s ease-in-out 0s; -moz-transition:all .5s ease-in-out 0s; -webkit-transition:all .5s ease-in-out 0s; -o-transition:all .5s ease-in-out 0s; -ms-transition:all .5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-3 .thumbnail:hover .user-action { bottom:0; } .product-grid .style-3 .thumbnail:hover .item-detail .ecm-heading-h4 { letter-spacing:2px; } .product-grid .style-3 .thumbnail:hover .item-detail .ecm-heading-h4:after { width:150px; } .product-grid .style-3 .thumbnail:hover .item-img:after { height:100%; top:0; background:rgba(0, 0, 0, .5); } .product-grid .style-3 .btn:hover, .product-grid .style-3 .btn:focus, .product-grid .style-3 .btn:active, .product-grid .style-3 .btn.active { color:#fff; } /*** Grid Style-4 CSS BOF ***/ .product-grid .style-4 .hover-content .add-to-cart { display:block; position:relative; margin-bottom:3px; opacity: 0; top: -150px; } .product-grid .style-4 .hover-content .add-to-cart .btn { width:192px; } .product-grid .style-4 .item-img { position:relative;text-align:center;margin:0 auto; overflow: hidden; z-index: 0; } .product-grid .style-4 .hover-content { left: 0;margin-top: -40px; position: absolute;top: 50%; width:100%; } .product-grid .style-4 .item-detail { padding:10px; } .product-grid .style-4 .item-detail .ecm-heading-h4 { text-transform:uppercase; font-weight:600; font-size:16px; } .product-grid .style-4 .item-detail .item-price { font-weight:600; float:left; font-size:20px; } .product-grid .style-4 .item-detail .user-rating { float:right; margin-top:7px; } .product-grid .style-4 .user-action .btn { padding:5px 0; width: 45px; } .product-grid .style-4 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-4 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-grid .style-4 .add-to-cart, .product-grid .style-4 .hover-content, .product-grid .style-4 a, .product-grid .style-4 i, .product-grid .style-4 img, .product-grid .style-4 .btn, .product-grid .user-action { transition:all .5s ease-in-out 0s; -moz-transition:all .5s ease-in-out 0s; -webkit-transition:all .5s ease-in-out 0s; -o-transition:all .5s ease-in-out 0s; -ms-transition:all .5s ease-in-out 0s; } .product-grid .style-4 .use-action .btn:nth-child(1) {transition-delay: 0.1s; -webkit-transition-delay:0.1s; -o-transition-delay: 0.1s;} .product-grid .style-4 .use-action .btn:nth-child(2) {transition-delay: 0.2s; -webkit-transition-delay:0.2s; -o-transition-delay: 0.2s;} .product-grid .style-4 .use-action .btn:nth-child(3) {transition-delay: 0.1s; -webkit-transition-delay:0.1s; -o-transition-delay: 0.1s;} /* Hover State CSS BOF */ .product-grid .style-4 .thumbnail:hover .add-to-cart { opacity: 1; top: 0; } .product-grid .style-4 .thumbnail:hover .user-action .btn { opacity: 1; top: 0;} .product-grid .style-4 .user-action .btn { opacity: 0; top: 150px; } /*** Grid Style-5 CSS BOF ***/ .product-grid .style-5 .thumbnail { border:medium none; } .product-grid .style-5 .thumbnail .item-img { position:relative; margin-bottom:10px; overflow:hidden; } .product-grid .style-5 .thumbnail .item-img .ecm-img { -webkit-transform:scale(1); -o-transform:scale(1); -ms-transform:scale(1); -moz-transform:scale(1); transform:scale(1); } .product-grid .style-5 .thumbnail .item-img .badge { position:absolute; top:0; right:0; padding:5px 9px; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; } .product-grid .style-5 .thumbnail .item-price { font-weight:400; font-size:18px; } .product-grid .style-5 .thumbnail .item-price span { text-decoration:line-through; padding:0 10px; color:#a8a8a8; } .product-grid .style-5 .hover-content { left: 0; position: absolute; right: 0; bottom:-45px; opacity:0; } .product-grid .style-5 .user-action .btn { background:none; } .product-grid .style-5 .thumbnail .item-detail .ecm-p { margin-bottom:0 } .product-grid .style-5 .user-rating { margin-bottom:10px; } .product-grid .style-5 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-5 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-grid .style-5 .hover-content, .product-grid .style-5 .thumbnail .item-price, .product-grid .style-5 .thumbnail .item-img .badge, .product-grid .style-5 .thumbnail .item-img, .product-grid .style-5 a, .product-grid .style-5 i, .product-grid .style-5 img, .product-grid .style-5 .btn, .product-grid .user-action { -moz-transition:all .3s ease-in-out 0s; -webkit-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-5 .thumbnail:hover .item-img .ecm-img { -webkit-transform:scale(1.2); -o-transform:scale(1.2); -ms-transform:scale(1.2); -moz-transform:scale(1.2); transform:scale(1.2); } .product-grid .style-5 .thumbnail:hover .item-price { opacity:0; } .product-grid .style-5 .thumbnail:hover .hover-content { opacity:1; bottom:-12px; } .product-grid .style-5 .user-action .btn { background: none; } .product-grid .style-5 .user-action .btn:hover, .product-grid .style-5 .user-action .btn:focus, .product-grid .style-5 .user-action .btn:active, .product-grid .style-5 .user-action .btn.active { color:#fff !important; } .product-grid .style-5 .thumbnail .item-img .badge { color:#fff; } /*** Grid Style-6 CSS BOF ***/ .product-grid .style-6 .thumbnail { text-align:center; overflow:hidden; } .product-grid .style-6 .thumbnail .item-img { position:relative; overflow:hidden; } .product-grid .style-6 .thumbnail .item-img .sale { position:absolute; width:50px; bottom:0; right:0; font-weight:600; height:50px; display:block; line-height:50px; -moz-border-radius:20px 0 0; -webkit-border-radius:20px 0 0; border-radius:20px 0 0; font-size:15px; } .product-grid .style-6 .thumbnail .item-detail { position:absolute;left:0; top:0; width:100%; height:100%; } .product-grid .style-6 .thumbnail .item-detail .ecm-heading-h4 { position:relative; text-align:center; } .product-grid .style-6 .thumbnail .item-detail .ecm-heading-h4 a { color:#fff; } .product-grid .style-6 .thumbnail .item-detail .ecm-heading-h4:after { content: ""; width:60px; background:#fff; height:2px; position:absolute; top:40px; left:0; right:0; margin:0 auto;} .product-grid .style-6 .thumbnail .item-detail .item-price { color:#fff;font-weight:600; margin-top:25px; font-size:20px; margin-bottom:0 } .product-grid .style-6 .thumbnail .item-detail .item-price span { padding-left:10px; color:#CCC; text-decoration:line-through; font-weight:normal; } .product-grid .style-6 .thumbnail .user-action { margin-top:10px; } .product-grid .style-6 .thumbnail .user-action .btn { -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; width:40px; height:40px; line-height:30px; } .product-grid .style-6 .thumbnail .user-rating li .ecm-rating { color:#fff; } .product-grid .style-6 .thumbnail .hover-content { top:-100%; position:absolute; width:100%;left:0; transform: translate(0%, 10%); } .product-grid .style-6 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-6 .thumbnail .item-img .sale { color: white; } /* Animation CSS BOF */ .product-grid .style-6 .thumbnail .item-img .sale, .product-grid .style-6 .thumbnail .item-detail, .product-grid .style-6 .thumbnail .hover-content, .product-grid .style-6 a, .product-grid .style-6 i, .product-grid .style-6 img, .product-grid .style-6 .btn, .product-grid .user-action { -moz-transition:all .5s ease-in-out 0s; -webkit-transition:all .5s ease-in-out 0s; -o-transition:all .5s ease-in-out 0s; transition:all .5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-6 .thumbnail:hover .item-detail { background:rgba(0, 0, 0, .5) } .product-grid .style-6 .thumbnail:hover .hover-content { top:0; } .product-grid .style-6 .thumbnail:hover .sale { right:-50px; } /*** Grid Style-7 CSS BOF ***/ .product-grid .style-7 .thumbnail { text-align:center; overflow:hidden; background:#fff; padding:10px; border-radius:10px; } .product-grid .style-7 .thumbnail .item-img { position:relative; overflow:hidden; margin-bottom:10px; } .product-grid .style-7 .thumbnail .item-img .back { position:absolute; top:0; left:0; opacity:0; -moz-transform:rotateY(180deg); -webkit-transform:rotateY(180deg); -o-transform:rotateY(180deg); -ms-transform:rotateY(180deg); transform:rotateY(180deg); } .product-grid .style-7 .thumbnail .item-detail .sale { position:absolute; top:2%; right:2%; background:#006; color: #fff; width:50px; height:50px; line-height:40px; border-radius:50%; display:block;} .product-grid .style-7 .thumbnail .hover-content .btn { font-size:22px; height:45px; line-height:43px; padding: 0; text-align: center; width:45px; margin-bottom:5px; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; -moz-box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.3); display:block; } .product-grid .style-7 .thumbnail .hover-content { display:block; margin-bottom:5px; position:absolute; top:30px; left:-50px; } .product-grid .style-7 .thumbnail .addtocart .ecm-cart { bottom:-7px;left:0; right:0; margin:0 auto; position: absolute; width:60px; height:60px; font-size:20px; border:7px solid #f2f2f2; line-height:35px; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; -moz-border-radius:100%; -webkit-border-radius:100%; border-radius:100%; } .product-grid .style-7 .thumbnail .item-price { margin-bottom:20px; font-size:15px; font-weight:600; float:right; } .product-grid .style-7 .thumbnail .hover-content li { display:block; } .product-grid .style-7 .thumbnail .user-rating { float:left; } .product-grid .style-7 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-7 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-grid .style-7 .thumbnail, .product-grid .style-7 .thumbnail .item-img, .product-grid .style-7 .thumbnail .item-img .front, .product-grid .style-7 .thumbnail .item-img .back, .product-grid .style-7 .thumbnail .hover-content, .product-grid .style-7 a, .product-grid .style-7 i, .product-grid .style-7 img, .product-grid .style-7 .btn, .product-grid .user-action { transition:all .5s ease-in-out 0s; -moz-transition:all .5s ease-in-out 0s; -webkit-transition:all .5s ease-in-out 0s; -o-transition:all .5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-7 .thumbnail:hover .back { opacity:1; -webkit-transform:rotateY(0deg); -moz-transform:rotateY(0deg); -o-transform:rotateY(0deg); -ms-transform:rotateY(0deg); transform:rotateY(0deg); } .product-grid .style-7 .thumbnail:hover .front{ opacity:0;-webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -o-transform:rotateY(180deg); -ms-transform:rotateY(180deg); transform:rotateY(180deg); } .product-grid .style-7 .thumbnail:hover{ -moz-box-shadow: 0px 4px 5px -1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 4px 5px -1px rgba(0, 0, 0, 0.3); box-shadow: 0px 4px 5px -1px rgba(0, 0, 0, 0.3); } .product-grid .style-7 .thumbnail:hover .addtocart .ecm-cart { -moz-box-shadow: 0px 4px 5px -1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 4px 5px -1px rgba(0, 0, 0, 0.3); box-shadow: 0px 4px 5px -1px rgba(0, 0, 0, 0.3); } .product-grid .style-7 .thumbnail:hover .hover-content { left:10px; } .product-grid .style-7 .thumbnail:hover .hover-content li a { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); } /*** Grid Style-8 CSS BOF */ .product-grid .style-8 .thumbnail .item-img { overflow: hidden; position: relative; text-align: center; } .product-grid .style-8 .thumbnail .user-action { bottom: -20px; left: 5%; opacity: 0; padding: 20px 0; position: absolute; text-align: center;visibility: hidden;width: 90%; } .product-grid .style-8 .thumbnail .item-img-thumbnail { position: relative; } .product-grid .style-8 .thumbnail .item-detail { display: inline-block; padding:10px; width: 100%; } .product-grid .style-8 .thumbnail .back-img { left: 0; opacity: 0; position: absolute; top: 0; visibility: hidden; } .product-grid .style-8 .thumbnail .item-detail .item-price { font-weight:500; margin-bottom:3px; font-size:20px; } .product-grid .style-8 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-8 .user-rating li .ecm-rating { color:#a8a8a8; } /* Aimation CSS BOF */ .product-grid .style-8 .thumbnail .user-action, .product-grid .style-8 .thumbnail .back-img, .product-grid .style-8 a, .product-grid .style-8 i, .product-grid .style-8 img, .product-grid .style-8 .btn { -moz-transition:all .5s ease-in-out 0s; -webkit-transition:all .5s ease-in-out 0s; -o-transition:all .5s ease-in-out 0s; -ms-transition:all .5s ease-in-out 0s; transition:all .5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-8 .thumbnail:hover .back-img { backface-visibility: hidden; opacity: 1; visibility: visible; } .product-grid .style-8 .thumbnail:hover .back-img, .product-grid .style-8 .thumbnail:hover .user-action { transition: all 300ms ease 0s; -moz-transition: all 300ms ease 0s; -webkit-transition: all 300ms ease 0s; -o-transition: all 300ms ease 0s; -ms-transition: all 300ms ease 0s; } .product-grid .style-8 .thumbnail:hover .user-action { bottom: 10px; opacity: 1; visibility: visible; } .product-grid .style-8 .user-action .btn { background: none; } /*** Grid Style-9 CSS BOF */ .product-grid .style-9 .thumbnail { text-align: center; border:medium none; } .product-grid .style-9 .thumbnail .item-img { position: relative; display: inline-block; } .product-grid .style-9 .thumbnail .item-img .label-box::after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #000; bottom: -4px; content: ""; left: 50%; margin-left: -2px; position: absolute; } .product-grid .style-9 .thumbnail .item-img .label-box { background: #000 none repeat scroll 0 0; border-radius: 3px; color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; margin-bottom: 0; padding: 0 11px; position: absolute; right: 16px; text-transform: uppercase; top: 16px; } .product-grid .style-9 .thumbnail .item-img .user-action { position: absolute; top: 11px; width: 100%; } .product-grid .style-9 .thumbnail .user-action .btn { display: inline-block; line-height:30px; margin: 0 -1px; -moz-transform:scale(0); -webkit-transform:scale(0); -o-transform:scale(0); transform: scale(0); width:50px; } .product-grid .style-9 .thumbnail .cart-action { bottom: 11px; position: absolute; width: 100%; } .product-grid .style-9 .thumbnail .cart-action .btn { -moz-transform:scale(0); -webkit-transform:scale(0); -o-transform:scale(0); transform: scale(0); width:80%; margin:0 auto; padding:10px; } .product-grid .style-9 .thumbnail .item-detail { padding:15px; } .product-grid .style-9 .thumbnail .item-price { font-size:20px; font-weight:500; } .product-grid .style-9 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-9 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-grid .style-9 .thumbnail .user-action .btn, .product-grid .thumbnail .cart-action .btn, .product-grid .style-9 a, .product-grid .style-9 i, .product-grid .style-9 img, .product-grid .style-9 .btn, .product-grid .user-action { -moz-transition:all .5s ease-in-out 0s; -webkit-transition:all .5s ease-in-out 0s; -o-transition:all .5s ease-in-out 0s; -ms-transition:all .5s ease-in-out 0s; transition:all .5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-9 .thumbnail:hover .user-action .btn, .product-grid .style-9 .thumbnail:hover .cart-action .btn { -moz-transform:scale(1); -webkit-transform:scale(1); -o-transform:scale(1); transform: scale(1); } /*** Grid Style-10 CSS BOF */ .product-grid .style-10 .thumbnail { text-align: center; border:medium none; } .product-grid .style-10 .thumbnail .item-img { position: relative; display: inline-block; } .product-grid .style-10 .thumbnail .item-img .label-box::after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #000; bottom: -4px; content: ""; left: 50%; margin-left: -2px; position: absolute; } .product-grid .style-10 .thumbnail .item-img .label-box { background: #000 none repeat scroll 0 0; border-radius: 3px; color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; margin-bottom: 0; padding: 0 11px; position: absolute; right: 16px; text-transform: uppercase; top: 16px; } .product-grid .style-10 .thumbnail .item-img .user-action { position: absolute; bottom:11px; width: 100%; } .product-grid .style-10 .thumbnail .user-action .btn { display: inline-block; line-height:30px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-transform:scale(0); -webkit-transform:scale(0); -o-transform:scale(0); transform: scale(0); width:50px; } .product-grid .style-10 .thumbnail .cart-action { top: 11px; position: absolute; width: 100%; } .product-grid .style-10 .thumbnail .cart-action .btn { -moz-transform:scale(0); -webkit-transform:scale(0); -o-transform:scale(0); transform: scale(0); width:80%; margin:0 auto; padding:10px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } .product-grid .style-10 .thumbnail .item-detail { padding:15px; } .product-grid .style-10 .thumbnail .item-price { font-size:20px; font-weight:500; margin:10px auto; } .product-grid .style-10 .thumbnail .item-price span { text-decoration:line-through; padding:0 10px; color:#a8a8a8 } .product-grid .style-10 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-10 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-grid .style-10 .thumbnail .user-action .btn, .product-grid .thumbnail .cart-action .btn, .product-grid .style-10 a, .product-grid .style-10 i, .product-grid .style-10 img, .product-grid .style-10 .btn, .product-grid .user-action { -moz-transition:all .5s ease-in-out 0s; -webkit-transition:all .5s ease-in-out 0s; -o-transition:all .5s ease-in-out 0s; -ms-transition:all .5s ease-in-out 0s; transition:all .5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-10 .thumbnail:hover .user-action .btn, .product-grid .style-10 .thumbnail:hover .cart-action .btn { -moz-transform:scale(1); -webkit-transform:scale(1); -o-transform:scale(1); transform: scale(1); } /*** Grid Style-11 CSS BOF */ .product-grid .style-11 .thumbnail { text-align: center; border:medium none; -moz-transition:all .5s ease-in-out 0s; -webkit-transition:all .5s ease-in-out 0s; -o-transition:all .5s ease-in-out 0s; -ms-transition:all .5s ease-in-out 0s; transition:all .5s ease-in-out 0s; } .product-grid .style-11 .thumbnail .item-img { position: relative; display: inline-block; } .product-grid .style-11 .thumbnail .item-img .label-box::after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #000; bottom: -4px; content: ""; left: 50%; margin-left: -2px; position: absolute; } .product-grid .style-11 .thumbnail .item-img .label-box { background: #000 none repeat scroll 0 0; border-radius: 3px; color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; margin-bottom: 0; padding: 0 11px; position: absolute; right: 16px; text-transform: uppercase; top: 16px; } .product-grid .style-11 .thumbnail .item-img .user-action { position: absolute; bottom:11px; left:0; right:0; margin:0 auto; } .product-grid .style-11 .thumbnail .user-action .btn { display: inline-block; line-height:30px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-transform:rotate(0deg) scale(0); -webkit-transform:rotate(0deg) scale(0); -o-transform:rotate(0deg) scale(0); transform:rotate(0deg) scale(0); width:45px; } .product-grid .style-11 .thumbnail .cart-action .btn { -moz-transform:scale(0); -webkit-transform:scale(0); -o-transform:scale(0); transform: scale(0); margin:10px auto; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } .product-grid .style-11 .thumbnail .item-detail { padding:15px; } .product-grid .style-11 .thumbnail .item-price { font-size:20px; font-weight:500; margin:10px auto; } .product-grid .style-11 .thumbnail .item-price span { text-decoration:line-through; padding:0 10px; color:#a8a8a8 } .product-grid .style-11 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-11 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-grid .style-11 .thumbnail .user-action .btn, .product-grid .thumbnail .cart-action .btn, .product-grid .style-11 a, .product-grid .style-11 i, .product-grid .style-11 img, .product-grid .style-11 .btn, .product-grid .user-action { -moz-transition:all .5s ease-in-out 0s; -webkit-transition:all .5s ease-in-out 0s; -o-transition:all .5s ease-in-out 0s; -ms-transition:all .5s ease-in-out 0s; transition:all .5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-11 .thumbnail:hover { -moz-box-shadow:0 3px 3px 0 rgba(0, 0, 0, .2); -webkit-box-shadow:0 3px 3px 0 rgba(0, 0, 0, .2); box-shadow:0 3px 3px 0 rgba(0, 0, 0, .2); } .product-grid .style-11 .thumbnail:hover .user-action .btn { -moz-transform:rotate(360deg) scale(1,1); -webkit-transform:rotate(360deg) scale(1,1); -o-transform:rotate(360deg) scale(1,1); transform:rotate(360deg) scale(1,1); } /*** Grid Style-12 CSS BOF */ .product-grid .style-12 .thumbnail .item-img { overflow: hidden; position: relative; text-align: center; } .product-grid .style-12 .thumbnail .user-action { bottom: -20px; left:0; opacity: 0; padding:5px 0; position: absolute; text-align: center;visibility: hidden;width:100%; } .product-grid .style-12 .thumbnail .item-img-thumbnail { position: relative; } .product-grid .style-12 .thumbnail .item-detail { display: inline-block; padding:10px; width: 100%; } .product-grid .style-12 .thumbnail .item-detail .item-price { font-weight:500; margin-bottom:3px; font-size:20px; } .product-grid .style-12 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-12 .user-rating li .ecm-rating { color:#a8a8a8; } /* Aimation CSS BOF */ .product-grid .style-12 .thumbnail .user-action, .product-grid .style-12 .thumbnail .back-img, .product-grid .style-12 a, .product-grid .style-12 i, .product-grid .style-12 img, .product-grid .style-12 .btn, .product-grid .user-action { -moz-transition:all .5s ease-in-out 0s; -webkit-transition:all .5s ease-in-out 0s; -o-transition:all .5s ease-in-out 0s; -ms-transition:all .5s ease-in-out 0s; transition:all .5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-12 .thumbnail:hover .user-action { bottom:0; opacity: 1; transition: all 300ms ease 0s; -moz-transition: all 300ms ease 0s; -webkit-transition: all 300ms ease 0s; -o-transition: all 300ms ease 0s; -ms-transition: all 300ms ease 0s; visibility: visible; } .product-grid .style-12 .user-action .btn { background: none; color: white; } .product-grid .style-12 .user-action .btn:hover, .product-grid .style-12 .user-action .btn:focus, .product-grid .style-12 .user-action .btn:active, .product-grid .style-12 .user-action .btn.active { background: none; color: none; } /*** Grid Style-13 CSS BOF ***/ .product-grid .style-13 .thumbnail { border:medium none; } .product-grid .style-13 .thumbnail .item-img { position:relative; margin-bottom:10px; overflow:hidden; } .product-grid .style-13 .thumbnail .item-price { font-weight:400; font-size:18px; } .product-grid .style-13 .thumbnail .item-price span { text-decoration:line-through; padding:0 10px; color:#a8a8a8; } .product-grid .style-13 .hover-content { left: 0; position: absolute; right: 0; bottom:-45px; opacity:0; } .product-grid .style-13 .user-action .btn { background:none; -moz-border-radius:100px; -webkit-border-radius:100px; border-radius:100px; width:40px; height:40px; line-height:30px; } .product-grid .style-13 .thumbnail .item-detail .ecm-p { margin-bottom:0 } .product-grid .style-13 .user-rating { margin-bottom:10px; } .product-grid .style-13 .thumbnail .item-img::after { background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0; content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 0; z-index: 1; } .product-grid .style-13 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-13 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-grid .style-13 .hover-content, .product-grid .style-13 .thumbnail .item-price, .product-grid .style-13 .thumbnail .item-img::after, .product-grid .style-13 a, .product-grid .style-13 i, .product-grid .style-13 img, .product-grid .style-13 .btn, .product-grid .user-action { -moz-transition:all .3s ease-in-out 0s; -webkit-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-13 .thumbnail:hover .item-price { opacity:0; } .product-grid .style-13 .thumbnail:hover .hover-content { opacity:1; bottom:-12px; } .product-grid .style-13 .thumbnail:hover .item-img:after { width:100%; } .product-grid .style-13 .user-action .btn { background: none; } .product-grid .style-13 .user-action .btn:hover, .product-grid .style-13 .user-action .btn:focus, .product-grid .style-13 .user-action .btn:active, .product-grid .style-13 .user-action .btn.active { color: #fff !important; } /*** Grid Style-14 CSS BOF ***/ .product-grid .style-14 .thumbnail { position:relative; overflow:hidden; border:medium none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; padding:0; } .product-grid .style-14 .thumbnail .item-img { position:relative; margin-top:15px; } .product-grid .style-14 .thumbnail .item-img .ecm-img { max-width:30%; } .product-grid .style-14 .thumbnail .item-detail { padding:10px 15px; } .product-grid .style-14 .thumbnail .user-action { text-align:center; position:absolute; top:50%; right:0; left:0; width:auto; z-index:2; -moz-transform:translateY(0); -webkit-transform:translateY(0); -o-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); opacity:0; } .product-grid .style-14 .btn { -moz-border-radius:50% 0 50% 0; -webkit-border-radius:50% 0 50% 0; border-radius:50% 0 50% 0; width:40px; height:40px; line-height:40px; padding:0; } .product-grid .style-14 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-14 .user-rating li .ecm-raing { color:#a8a8a8; } /* Animation CSS BOF */ .product-grid .style-14 .thumbnail, .product-grid .style-14 .thumbnail .item-detail, .product-grid .style-14 a, .product-grid .style-14 i, .product-grid .style-14 img, .product-grid .style-14 .btn, .product-grid .user-action { transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition:all 0.5s ease-in-out 0s; -ms-transition:all 0.5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-14 .thumbnail:hover { -moz-box-shadow:0 10px 30px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow:0 10px 30px 0 rgba(0, 0, 0, 0.2); box-shadow:0 10px 30px 0 rgba(0, 0, 0, 0.2); } .product-grid .style-14 .thumbnail:hover .user-action { -moz-transform:translateY(50px); -webkit-transform:translateY(50px); -o-transform:translateY(50px); -ms-transform:translateY(50px); transform:translateY(50px); opacity:1; } .product-grid .style-14 .thumbnail:hover .item-detail { background:#f8f8f8; } .product-grid .style-14 .btn:hover, .product-grid .style-14 .btn:focus, .product-grid .style-14 .btn:active, .product-grid .style-14 .btn.active { -moz-border-radius:0 50%; -webkit-border-radius:0 50%; border-radius:0 50%; } /*** Grid Style-15 CSS BOF ***/ .product-grid .style-15 .thumbnail { position:relative; overflow:hidden; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; padding:10px; } .product-grid .style-15 .thumbnail .item-normal { position:relative; overflow:hidden; } .product-grid .style-15 .thumbnail .item-hover { height: 100%; left: 0; position: absolute; top: 0; width: 100%; right:0; padding:10px 15px; opacity:0; visibility:hidden; } .product-grid .style-15 .thumbnail .user-action { text-align:center; position:absolute; top:40%; right:0; left:0; width:auto; } .product-grid .style-15 .btn { width:70px; height:70px; line-height:70px; font-size:35px; padding:0; -moz-box-shadow:0 0 0 2px rgba(255, 255, 255, 0.4); -webkit-box-shadow:0 0 0 2px rgba(255, 255, 255, 0.4); box-shadow:0 0 0 2px rgba(255, 255, 255, 0.4); } .product-grid .style-15 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-15 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-grid .style-15 .thumbnail, .product-grid .style-15 .thumbnail .item-hover, .product-grid .style-15 a, .product-grid .style-15 i, .product-grid .style-15 img, .product-grid .style-15 .btn, .product-grid .user-action { transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition:all 0.5s ease-in-out 0s; -ms-transition:all 0.5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-15 .thumbnail:hover .item-hover { opacity:1; visibility:visible; } .product-grid .style-15 .thumbnail:hover { -moz-box-shadow:0 10px 30px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow:0 10px 30px 0 rgba(0, 0, 0, 0.2); box-shadow:0 10px 30px 0 rgba(0, 0, 0, 0.2); } .product-grid .style-15 .thumbnail:hover .user-action { opacity:1; } .product-grid .style-15 .thumbnail .item-hover { background: rgba(0, 0, 0, 0.5); } .product-grid .style-15 .btn { background: #333333; } .product-grid .style-15 .btn:hover, .product-grid .style-15 .btn:focus, .product-grid .style-15 .btn:active, .product-grid .style-15 .btn.active { background: white; } /*** Grid Style-16 CSS BOF ***/ .product-grid .style-16 .thumbnail { padding:0; } .product-grid .style-16 .thumbnail .product-img { position:relative; margin:0; width:100%; overflow:hidden; top:0; } .product-grid .style-16 .thumbnail .product-img a { position:relative; display:block; text-align:center; } .product-grid .style-16 .thumbnail .product-img .front { opacity:1; position:relative; } .product-grid .style-16 .thumbnail .product-img .back { opacity:0; position:absolute; left:0; right:0; } .product-grid .style-16 .thumbnail .product-img .ecm-img { display:inline-block; } .product-grid .style-16 .thumbnail .product-des { padding:10px 0; text-align:center; position:relative; } .product-grid .style-16 .thumbnail .product-des .ecm-heading-h4 { font-weight:700; text-transform:uppercase; } .product-grid .style-16 .thumbnail .product-des ul.star { padding:5px 15px; margin:0; list-style:none; } .product-grid .style-16 .thumbnail .product-des ul.star li { font-size:15px; } .product-grid .style-16 .thumbnail .product-des ul.star li:last-child i, .products-grid .product-item-info .product-des ul.star li:nth-child(4) i { color:#ccc; } .product-grid .style-16 .thumbnail .product-des span { padding:5px 15px; font-size:18px; font-weight:700; margin:0; } .product-grid .style-16 .thumbnail .product-des .action { -webkit-transform:scale(0); -moz-transform:scale(0); -o-transform:scale(0); transform:scale(0); opacity:0; position:absolute; margin:0; padding:0; background:#000; top:0; left:0; right:0; bottom:0; } .product-grid .style-16 .thumbnail .product-des .action ul { list-style:none; text-align:center; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .product-grid .style-16 .thumbnail .product-des .action ul li { font:20px; margin:0 5px; } .product-grid .style-16 .thumbnail .product-des .action .btn { text-align:center; width:45px; height:45px; line-height:35px; display:block; } .product-grid .style-16 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-16 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-grid .style-16 .thumbnail, .product-grid .style-16 .thumbnail .product-img .front, .product-grid .style-16 .thumbnail .product-img .back, .product-grid .style-16 .thumbnail .product-des .action, .products-grid .style-16 .thumbnail .product-des .action ul li a, .product-grid .style-16 a, .product-grid .style-16 i, .product-grid .style-16 img, .product-grid .style-16 .btn, .product-grid .user-action { transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition:all 0.5s ease-in-out 0s; -ms-transition:all 0.5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-16 .thumbnail:hover .product-img .front { opacity:0; } .product-grid .style-16 .thumbnail:hover .product-img .back { opacity:1; } .product-grid .style-16 .thumbnail:hover { -moz-box-shadow: 0 0 6px -2px #999; -webkit-box-shadow: 0 0 6px -2px #999; box-shadow: 0 0 6px -2px #999; } .product-grid .style-16 .thumbnail:hover .action { opacity:1; -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .product-grid .style-16 .thumbnail .product-des .action .btn { background: none; } .product-grid .style-16 .thumbnail .product-des .action .btn:hover, .product-grid .style-16 .thumbnail .product-des .action .btn:focus, .product-grid .style-16 .thumbnail .product-des .action .btn:active, .product-grid .style-16 .thumbnail .product-des .action .btn.active { color:#fff !important; } /*** Grid Style-17 CSS BOF ***/ .product-grid .style-17 .thumbnail { width:100%; height:100%; background:#fff; overflow:hidden; padding:10px; border: 1px solid #ddd; } .product-grid .style-17 .thumbnail .product-img { position:relative; text-align:center; } .product-grid .style-17 .thumbnail .product-img .ecm-link { position:relative; display:block; text-align:center; } .product-grid .style-17 .thumbnail .product-img .ecm-img { display:inline-block; } .product-grid .style-17 .thumbnail .product-img .back {position:absolute; left:100%; transition:all 0.8s ease-in-out 0s; opacity:0; } .product-grid .style-17 .thumbnail .product-img .front { position:relative; } .product-grid .style-17 .thumbnail .product-des { padding:10px 0; text-align:center; position:relative; } .product-grid .style-17 .thumbnail .product-des .ecm-heading-h4 { font-weight:700; text-transform:uppercase; border-bottom: 1px solid #eaeaea; padding-bottom:10px; } .product-grid .style-17 .thumbnail .product-des .ecm-p { padding:5px 15px; } .product-grid .style-17 .thumbnail .product-des .star { padding: 0; margin:0; list-style:none; clear:both; } .product-grid .style-17 .thumbnail .product-des .star li { font-size:15px; } .product-grid .style-17 .thumbnail .product-des .star li i { color:#333; } .product-grid .style-17 .thumbnail .product-des .star li:last-child i, .product-grid .style-17 .thumbnail .product-des .star li:nth-child(4) i { color:#ccc; } .product-grid .style-17 .thumbnail .product-des span { padding:10px 0; font-size:18px; font-weight:700; margin:0; display:block; } .old-price { color:#ccc; text-decoration:line-through; } .product-grid .style-17 .thumbnail .product-img .action { position:absolute; margin:0; padding:0; top:0; left:-60px; } .product-grid .style-17 .thumbnail .product-img .action .ecm-ul { list-style:none; text-align:center; } .product-grid .style-17 .thumbnail .product-img .action .ecm-ul li { font:20px; margin:5px 0; display:block; } .product-grid .style-17 .thumbnail .product-img .action .btn { text-align:center; width:45px; height:45px; line-height:35px; display:block; -moz-border-radius:50px;-webkit-border-radius:50px; border-radius:50px; } .product-grid .style-17 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-17 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-grid .style-17 .thumbnail, .product-grid .style-17 .thumbnail .product-img .front, .product-grid .style-17 .thumbnail .product-img .back, .product-grid .style-17 .thumbnail .product-img .action, .products-grid .style-17 .thumbnail .product-des .action ul li a, .product-grid .style-17 a, .product-grid .style-17 i, .product-grid .style-17 img, .product-grid .style-17 .btn, .product-grid .user-action { transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition:all 0.5s ease-in-out 0s; -ms-transition:all 0.5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-17 .thumbnail:hover .action { opacity:1; left:0; } .product-grid .style-17 .thumbnail:hover .back { left:0; opacity:1; } .product-grid .style-17 .thumbnail:hover .front { left:-100%; } /*** Grid Style-18 CSS BOF ***/ .product-grid .style-18 .thumbnail { position:relative; overflow:hidden; } .product-grid .style-18 .thumbnail .item-img { position:relative; overflow:hidden; } .product-grid .style-18 .thumbnail .item-img .ecm-img { border: 1px solid #dddddd; } .product-grid .style-18 .thumbnail .item-detail { padding:10px 15px; } .product-grid .style-18 .thumbnail .item-detail .ecm-heading-h3 { font-weight:600; } .product-grid .style-18 .thumbnail .item-detail .btn { margin-top:10px; } .product-grid .style-18 .thumbnail .item-detail .btn-wishlist, .product-grid .style-18 .thumbnail .item-detail .btn-view { opacity:0; visibility:hidden; } .product-grid .style-18 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-18 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-grid .style-18 .thumbnail, .product-grid .style-18 .thumbnail:hover .item-detail, .product-grid .style-18 .thumbnail .item-img img, .product-grid .style-18 a, .product-grid .style-18 i, .product-grid .style-18 img, .product-grid .style-18 .btn, .product-grid .user-action { transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition:all 0.5s ease-in-out 0s; -ms-transition:all 0.5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-18 .thumbnail:hover .btn-wishlist, .product-grid .style-18 .thumbnail:hover .btn-view { opacity:1; visibility:visible; } .product-grid .style-18 .thumbnail .item-detail .btn { background: none; } .product-grid .style-18 .thumbnail .item-detail .btn:hover, .product-grid .style-18 .thumbnail .item-detail .btn:focus, .product-grid .style-18 .thumbnail .item-detail .btn:active, .product-grid .style-18 .thumbnail .item-detail .btn.active { color:#fff !important; } /*** Grid Style-19 CSS BOF ***/ .product-grid .style-19 .thumbnail { position:relative; margin-bottom:30px;overflow:hidden; padding:0; } .product-grid .style-19 .thumbnail .item-detail { margin:0px; padding:10px; } .product-grid .style-19 .thumbnail .ecm-heading-h3 { font-size:20px; } .product-grid .style-19 .thumbnail .ecm-heading-h3 span { float:right; text-decoration:line-through; color:#a8a8a8 } .product-grid .style-19 .thumbnail .item-overlay { position:absolute; opacity:0; text-align:center; width:100%; top:0; } .product-grid .style-19 .thumbnail .user-action { position:absolute; text-align:center; right:-236px; bottom:10px; transition: all 0.5s ease-out 0s; } .product-grid .style-19 .thumbnail .quick-view { position: absolute; cursor:pointer; left:0; top:0; } .product-grid .style-19 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-19 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-grid .style-19 .thumbnail, .product-grid .style-19 .thumbnail .user-action, .product-grid .style-19 .thumbnail .item-overlay, .product-grid .style-19 a, .product-grid .style-19 i, .product-grid .style-19 img, .product-grid .style-19 .btn, .product-grid .user-action { transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition:all 0.5s ease-in-out 0s; -ms-transition:all 0.5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-19 .thumbnail:hover .item-overlay { opacity:1; } .product-grid .style-19 .thumbnail:hover .user-action { bottom:10px; right:0; color:#F00; } /*** Grid Style-20 CSS BOF ***/ .product-grid .style-20 .thumbnail { background:#fff; padding:5px; transition: all 0.9s ease-in-out 0s; margin-bottom:30px; } .product-grid .style-20 .thumbnail .item-img .ecm-img { display:inline-block; } .product-grid .style-20 .thumbnail .item-detail { padding:10px; border-top:solid 1px #ddd; } .product-grid .style-20 .thumbnail .item-img { margin:0px; padding:0px; position:relative; width:100%; transition: all 0.4s ease-in-out 0s; overflow:hidden; } .product-grid .style-20 .thumbnail .user-action { position:absolute; text-align:center; bottom:-60px; left:0%; right:0%; opacity:0; } .product-grid .style-20 .thumbnail .user-action .btn { text-align:center; width:45px; height:45px; line-height:35px; display:block; -moz-border-radius:50px;-webkit-border-radius:50px; border-radius:50px; } .product-grid .style-20 .thumbnail .item-img .back { position:absolute; top:0; left:0; opacity:0; } .product-grid .style-20 .thumbnail .item-img .front { -moz-transform:rotateY(180deg); -webkit-transform:rotateY(180deg); -o-transform:rotateY(180deg); -ms-transform:rotateY(180deg); transform:rotateY(180deg); } .product-grid .style-20 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-20 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-grid .style-20 .thumbnail, .product-grid .style-20 .thumbnail .user-action, .product-grid .style-20 a, .product-grid .style-20 i, .product-grid .style-20 img, .product-grid .style-20 .btn, .product-grid .user-action { transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition:all 0.5s ease-in-out 0s; -ms-transition:all 0.5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-20 .thumbnail:hover .user-action { opacity:1; bottom:20px; } .product-grid .style-20 .thumbnail:hover .item-img .back { -moz-transform:rotateY(180deg); -webkit-transform:rotateY(180deg); -o-transform:rotateY(180deg); -ms-transform:rotateY(180deg); transform:rotateY(180deg); opacity:1; } .product-grid .style-20 .thumbnail:hover .item-img .front { -moz-transform:rotateY(180deg); -webkit-transform:rotateY(180deg); -o-transform:rotateY(180deg); -ms-transform:rotateY(180deg); transform:rotateY(180deg); opacity:0;} /*** Grid Style-21 CSS BOF ***/ .product-grid .style-21 .thumbnail { position:relative; overflow:hidden; border:solid 1px #ddd; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; } .product-grid .style-21 .thumbnail .item-img { position:relative; overflow:hidden; } .product-grid .style-21 .thumbnail .item-detail { padding:10px 15px; } .product-grid .style-21 .thumbnail .item-detail .ecm-heading-h4, .product-grid .style-21 .thumbnail .item-detail .ecm-heading-h3 { position: relative; top: 0; } .product-grid .style-21 .thumbnail .user-action { text-align:center; position:absolute; top:50%; right:0; left:0; width:auto; z-index:2; -moz-transform:translateY(0); -webkit-transform:translateY(0); -o-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); opacity:0; } .product-grid .style-21 .btn { -moz-border-radius:100%; -webkit-border-radius:100%; border-radius:100%; width:40px; height:40px; line-height:40px; padding:0; } .product-grid .style-21 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-21 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-grid .style-21 .thumbnail, .product-grid .style-21 .thumbnail:hover .item-detail, .product-grid .style-21 .thumbnail .item-detail h4, .product-grid .style-21 .thumbnail .item-detail h3, .product-grid .style-21 a, .product-grid .style-21 i, .product-grid .style-21 img, .product-grid .style-21 .btn, .product-grid .user-action { transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition:all 0.3s ease-in-out 0s; -ms-transition:all 0.3s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-21 .thumbnail:hover .user-action { -moz-transform:translateY(50px); -webkit-transform:translateY(50px); -o-transform:translateY(50px); -ms-transform:translateY(50px); transform:translateY(50px); opacity:1; } .product-grid .style-21 .thumbnail:hover .item-detail h4 { top: 35px; } .product-grid .style-21 .thumbnail:hover .item-detail h3 { top: -32px; } /*** Grid Style-22 CSS BOF ***/ .product-grid .style-22 .thumbnail { border:solid 1px rgba(255, 255, 255, .0); } .product-grid .style-22 .thumbnail .item-img { position:relative; margin-bottom:10px; overflow:hidden; } .product-grid .style-22 .thumbnail .item-price { font-weight:400; font-size:18px; } .product-grid .style-22 .thumbnail .item-price span { text-decoration:line-through; padding:0 10px; color:#a8a8a8; } .product-grid .style-22 .user-action .btn { width:40px; height:40px; line-height:30px; } .product-grid .style-22 .thumbnail .item-detail { padding:10px; } .product-grid .style-22 .user-rating { margin-bottom:10px; } .product-grid .style-22 .thumbnail .item-img, .product-grid .style-22 .thumbnail, .product-grid .style-22 .user-action .btn { -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; } .product-grid .style-22 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-22 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-grid .style-22 .hover-content, .product-grid .style-22 .thumbnail .item-price, .product-grid .style-22 .thumbnail, .product-grid .style-22 .thumbnail .item-img, .product-grid .style-22 a, .product-grid .style-22 i, .product-grid .style-22 img, .product-grid .style-22 .btn, .product-grid .user-action { -moz-transition:all .5s ease-in-out 0s; -webkit-transition:all .5s ease-in-out 0s; -o-transition:all .5s ease-in-out 0s; -ms-transition:all .5s ease-in-out 0s; transition:all .5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-22 .thumbnail:hover .user-action .btn { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .product-grid .style-22 .thumbnail:hover .item-img, .product-grid .style-22 .thumbnail:hover { -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; } /*** Grid Style-23 CSS BOF ***/ .product-grid .style-23 .thumbnail { -webkit-border-radius:0; border-radius:0; border:solid 1px #ddd; padding:10px; overflow:hidden; position:relative; } .product-grid .style-23 .thumbnail .ecm-heading-h4 { margin-bottom:10px; position: relative; } .product-grid .style-23 .thumbnail .ecm-heading-h4::after { background:#ddd; bottom: -2px; content: ""; height: 1px; left: 0; margin: 0 auto; position: absolute; right: 0; width: 60px; } .product-grid .style-23 .thumbnail .ecm-heading-h5 { display:inline-block; font-weight:400; } .product-grid .style-23 .thumbnail .ecm-p { margin-bottom:0; } .product-grid .style-23 .thumbnail .item-price .price { float:left; } .product-grid .style-23 .thumbnail .item-price .old-price { float:right; } .product-grid .style-23 .thumbnail .old-price { color:#a8a8a8; text-decoration:line-through; } .product-grid .style-23 .thumbnail .item-hover { position:absolute; left:0; top:-72px; background:rgba(0, 0, 0, .2); width:100%; padding:10px; text-align:center; -webkit-transition:all .3s ease-in-out 0s;-moz-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s;transition:all .3s ease-in-out 0s; } .product-grid .style-23 .thumbnail .item-hover ul.user-action li { padding:0 5px; display:inline-block; } .product-grid .style-23 .thumbnail .item-hover ul.user-action li .btn { width:45px; height:45px; -webkit-border-radius:100px; border-radius:100px; font-size:20px; line-height:35px; } .product-grid .style-23 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-23 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-grid .style-23 .thumbnail .item-hover, .product-grid .style-23 a, .product-grid .style-23 i, .product-grid .style-23 img, .product-grid .style-23 .btn, .product-grid .user-action { -webkit-transition:all .3s ease-in-out 0s;-moz-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-23 .thumbnail:hover .item-hover { top:0; } /*** Grid Style-24 CSS BOF ***/ .product-grid .style-24 .thumbnail { border:medium none; background:none; } .product-grid .style-24 .thumbnail .product-item { border:solid 1px #dcdcdc; position:relative; } .product-grid .style-24 .thumbnail .item-wrapper { padding:10px 15px; overflow:hidden; background:#fff; } .product-grid .style-24 .thumbnail .item-rattings i, .product-grid .style-24 .thumbnail .product-item .item-info i { margin:0 10px; } .product-grid .style-24 .thumbnail .product-item .item-desc .ecm-p { margin-bottom:0; } .product-grid .style-24 .thumbnail .product-item .item-info, .product-grid .style-24 .thumbnail .product-item .item-desc { padding:10px 15px; left:0; right:0; position:absolute; z-index:2; background:#fff } .product-grid .style-24 .product-item .item-info { top:0; } .product-grid .style-24 .product-item .item-desc { bottom:0; } .product-grid .style-24 .product-item .item-info, .product-grid .style-24 .thumbnail .product-item .item-desc { opacity:0; visibility:hidden; } .product-grid .style-24 .product-item .user-action .btn { padding:5px 0; } .product-grid .style-24 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-24 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-grid .style-24 .thumbnail .product-item, .product-grid .style-24 .thumbnail .product-item .item-info, .product-grid .style-24 .thumbnail .product-item .item-desc, .product-grid .style-24 a, .product-grid .style-24 i, .product-grid .style-24 img, .product-grid .style-24 .btn, .product-grid .user-action { transition:all .5s ease-in-out 0s; -moz-transition:all .5s ease-in-out 0s; -webkit-transition:all .5s ease-in-out 0s; -o-transition:all .5s ease-in-out 0s; -ms-transition:all .5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-24 .thumbnail .product-item:hover { -moz-box-shadow:0px 10px 0 0px rgba(92, 92, 92, 0.2); -webkit-box-shadow:0px 10px 0 0px rgba(92, 92, 92, 0.2); box-shadow:0px 10px 0 0px rgba(92, 92, 92, 0.2); } .product-grid .style-24 .thumbnail .product-item:hover .item-info { top:-83px; visibility:visible; opacity:1; -moz-box-shadow:0 0 11px 0 rgba(92, 92, 92, 0.2); -webkit-box-shadow:0 0 11px 0 rgba(92, 92, 92, 0.2); box-shadow:0 0 11px 0 rgba(92, 92, 92, 0.2); } .product-grid .style-24 .thumbnail .product-item:hover .item-desc { bottom:-18px; visibility:visible; opacity:1; -moz-box-shadow:0 0 14px 5px rgba(92, 92, 92, 0.2); -webkit-box-shadow:0 0 14px 5px rgba(92, 92, 92, 0.2); box-shadow:0 0 14px 5px rgba(92, 92, 92, 0.2); } /*** Grid Style-25 CSS BOF ***/ .product-grid .style-25 .thumbnail { position:relative; border:solid 1px #f5f5f5; } .product-grid .style-25 .thumbnail::after, .product-grid .style-25 .thumbnail::before { content: ""; height: 2px; position: absolute; width: 10px; z-index: 5; } .product-grid .style-25 .thumbnail::before { left:-1px; top:-1px; } .product-grid .style-25 .thumbnail::after { right:-1px; bottom:-1px; } .product-grid .style-25 .thumbnail .item-img { position:relative; overflow:hidden; } .product-grid .style-25 .thumbnail .item-detail { padding:10px 15px; } .product-grid .style-25 .btn { -moz-border-radius:100%; -webkit-border-radius:100%; border-radius:100%; width:40px; height:40px; line-height:40px; padding:0; margin:0; } .product-grid .style-25 .user-rating li { padding:0 2px; display:inline-block; } .product-grid .style-25 .user-rating li .ecm-rating { color:#a8a8a8; } .product-grid .style-25 .thumbnail .ecm-img { margin-bottom:10px; } /* Animation CSS BOF */ .product-grid .style-25 .thumbnail, .product-grid .style-14 .thumbnail:hover .item-detail, .product-grid .style-25 .thumbnail::after, .product-grid .style-25 .thumbnail::before, .product-grid .style-25 a, .product-grid .style-25 i, .product-grid .style-25 img, .product-grid .style-25 .btn, .product-grid .user-action { transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition:all 0.3s ease-in-out 0s; -ms-transition:all 0.3s ease-in-out 0s; } /* Hover State CSS BOF */ .product-grid .style-25 .thumbnail:hover .btn { margin:0 3px; } .product-grid .style-25 .thumbnail:hover:after, .product-grid .style-25 .thumbnail:hover:before { width:100%; } /*** OWL Carousel Control CSS BOF ***/ .owl-three.owl-theme .owl-nav [class*="owl-"] { font-size: 25px; width: 35px; height: 35px; padding: 0; line-height: 32px; position:absolute; top:50%; transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition:all 0.3s ease-in-out 0s; -ms-transition:all 0.3s ease-in-out 0s; } .owl-three.owl-theme .owl-nav [class*="owl-prev"] { left:0; } .owl-three.owl-theme .owl-nav [class*="owl-next"] { right:0; } .owl-three.owl-theme .owl-nav [class*="owl-"]:hover { background:#333; } .product-grid .style-2 .owl-two .thumbnail:hover { -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; } /* | -------------------------------------------------------- | PLUGIN LIST VIEW CSS BOF | -------------------------------------------------------- */ /* Grid Common Selector CSS BOF */ body .product-list { color: #333333; font-family: "Open Sans"; font-size: 14px; font-weight: 300; line-height: normal; } .product-list.grey-color-bg { background-color:#f1f1f1; } .product-list.light-grey-color-bg { background-color:#f5f5f5; } .product-list .block-title { position:relative; font-size:20px; } .product-list .block-title::after { bottom:-23px; content:""; height:2px; left:0; position:absolute; width:30px; } section.product-list { padding-top:70px; padding-bottom:70px; } .product-list .thumbnail { background-color: #ffffff; border: 1px solid #dddddd; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; display: block; line-height: 1.42857; margin-bottom: 20px; padding:4px; margin-top:50px; } .product-list .text-center { text-align:center; } /* Trypography Style CSS BOF */ .product-list .ecm-heading-h1, .product-list .ecm-heading-h2, .product-list .ecm-heading-h3, .product-list .ecm-heading-h4, .product-list .ecm-heading-h5, .product-list .ecm-heading-h6 { margin:3px 0; padding:3px 0; line-height:1.5; font-family: "Open Sans"; } .product-list .ecm-heading-h5, h6 { font-weight:300; } .product-list .ecm-heading-h1 { font-size:35px; font-weight:700; } .product-list .ecm-heading-h2 { font-size:30px; font-weight:600; } .product-list .ecm-heading-h3 { font-size:25px; font-weight:400; } .product-list .ecm-heading-h4 { font-size:20px; font-weight:600; } .product-list .ecm-heading-h5 { font-size:17px; } .product-list .ecm-heading-h6 { font-size:15px; } .product-list .ecm-p { line-height: 1.5; padding-bottom: 5px; padding-top: 5px; } .product-list i { font-family:'FontAwesome'; } .product-list ul { list-style:none; margin:0; padding:0; } .product-list ul li { display:inline-block; line-height:1.5; } /* Image Style CSS BOF */ .product-list .ecm-img { height: auto; line-height: normal; max-width: 100%; vertical-align: middle; } .product-list .ecm-a .ecm-img, .product-list .ecm-img { border:none; outline:none !important; outline-offset:0 !important; opacity:1; } .product-list .ecm-a:hover .ecm-img { opacity:.6; } /* Button Style CSS BOF */ .product-list .btn { padding:5px 10px; color:#fff; font-size:16px; border:medium none; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; font-weight:normal; line-height:1.42857; margin-bottom: 0; text-align:center; vertical-align:middle; white-space:nowrap; cursor:pointer; } /* Hover State CSS BOF */ .product-list .btn:hover, .product-list .btn:focus, .product-list .btn:active, .product-list .btn.active { color:#fff; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; outline:none; background:#333 } /* common button hover property */ /* Hyperlinks Style CSS BOF */ .product-list .ecm-a { color:#333333; } .product-list .ecm-a:hover, .product-list .ecm-a:focus, .product-list .ecm-a:active { text-decoration:none; } .product-list .ecm-a, .product-list *:hover, .product-list *:focus, .product-list *:active .product-list:focus { text-decoration:none; outline:none !important; outline-offset:0 !important; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; } /* List Style Global Classes CSS BOF */ .product-list [class*="style-"] { margin-top:50px; margin-bottom:20px; padding:10px; } .product-list .d-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .product-list .align-items-center { -webkit-box-align:center; -ms-flex-align:center; align-items:center; } .product-list [class*="style-"] h4 { padding:0; margin:0; } /* remove padding when you want to spacer in heading*/ .ecm-product-type { margin-top:60px; } .ecm-product-type .btn-line { border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; color: #333333; display: inline-block; font-size: 18px; height: 45px; line-height: 40px; padding: 0; text-align: center; width: 45px; } /*** List Style-1 CSS BOF ***/ .product-list .style-1 { position:relative; overflow:hidden; -moz-transition:all .5s ease-in-out 0s; -webkit-transition:all .5s ease-in-out 0s; -o-transition:all .5s ease-in-out 0s; -ms-transition:all .5s ease-in-out 0s; transition:all .5s ease-in-out 0s; border: 1px solid #dddddd; } .product-list .style-1 .user-action { margin-top:15px; } .product-list .style-1 .btn { -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; height:35px; width:35px; } .product-list .style-1 .user-rating { position:relative; z-index:3; } .product-list .style-1 .user-rating li { padding:0 2px; display:inline-block; } .product-list .style-1 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-list .style-1 .ecm-a, .product-list .style-1 i, .product-list .style-1 .ecm-img, .product-list .style-1 .btn, .product-list .style-1 .user-action { transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition:all 0.5s ease-in-out 0s; -ms-transition:all 0.5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-list .style-1:hover .user-action { left:0 } .product-list .style-1:hover .btn:hover, .product-list .style-1:hover .btn:focus, .product-list .style-1:hover .btn:active, .product-list .style-1:hover .btn.active { color:fff; background:#333; } /*** List Style-2 CSS BOF ***/ .product-list .style-2 { position:relative; overflow:hidden; border:medium none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; background-color:#fff; } .product-list .style-2 .item-img { position:relative; overflow:hidden; } .product-list .style-2 .user-action { margin-top:15px; } .product-list .style-2 .btn { -moz-border-radius:100%; -webkit-border-radius:100%; border-radius:100%; width:40px; height:40px; line-height:40px; padding:0; } .product-list .style-2 .user-rating li { padding:0 2px; display:inline-block; } .product-list .style-2 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-list .style-2 { transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition:all 0.5s ease-in-out 0s; -ms-transition:all 0.5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-list .style-2:hover { -moz-box-shadow:0 10px 30px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow:0 10px 30px 0 rgba(0, 0, 0, 0.2); box-shadow:0 10px 30px 0 rgba(0, 0, 0, 0.2); } /*** Grid Style-3 CSS BOF ***/ .product-list .style-3 { position:relative; overflow:hidden; border:solid 1px #f2f2f2; } .product-list .style-3 .item-img { position:relative; overflow:hidden; } .product-list .style-3 .user-action { text-align:center; position:absolute; bottom:-40px; right:0; left:0; width:auto; z-index:2; } .product-list .style-3 .btn { -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; } .product-list .style-3 .item-img::after { background:rgba(0, 0, 0, 0.8); content:""; height:10px; left:0; position:absolute; top:-10px; width:100%; } .product-list .style-3 .user-rating li { padding:0 2px; display:inline-block; } .product-list .style-3 .user-rating li .ecm-rating { color:#a8a8a8; } .product-list .style-3 .item-detail .ecm-heading-h4 { position:relative; margin-bottom:15px; } .product-list .style-3 .item-detail .ecm-heading-h4::after { background: rgba(0, 0, 0, 0.4); content: ""; display: block; height:2px; left:0; width: 30px; position:absolute; margin:10px 0; } /* Animation CSS BOF */ .product-list .style-3, .product-list .style-3 .user-action, .product-list .style-3 .item-img::after, .product-list .style-3 a, .product-list .style-3 i, .product-list .style-3 img, .product-list .style-3 .btn { transition:all .5s ease-in-out 0s; -moz-transition:all .5s ease-in-out 0s; -webkit-transition:all .5s ease-in-out 0s; -o-transition:all .5s ease-in-out 0s; -ms-transition:all .5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-list .style-3:hover .user-action { bottom:20px; } .product-list .style-3:hover .item-img:after { height:100%; top:0; background:rgba(0, 0, 0, .5); } .product-list .style-3 .btn:hover, .product-list .style-3 .btn:focus, .product-list .style-3 .btn:active, ..product-list .style-3 .btn.active { color:#fff; } /*** Grid Style-4 CSS BOF ***/ .product-list .style-4 { background-color:#fff; } .product-list .style-4 .hover-content .add-to-cart { display:block; position:relative; margin-bottom:3px; opacity: 0; top: -150px; } .product-list .style-4 .hover-content .add-to-cart .btn { width:192px; } .product-list .style-4 .item-img { position:relative;text-align:center;margin:0 auto; overflow: hidden; z-index: 0; } .product-list .style-4 .hover-content { left: 0;margin-top: -40px; position: absolute;top: 50%; width:100%; } .product-list .style-4 .user-action .btn { padding:5px 0; width: 45px; } .product-list .style-4 .user-rating li { padding:0 2px; display:inline-block; } .product-list .style-4 .user-rating li .ecm-rating { color:#a8a8a8; } .product-list .style-4 .ecm-discount-price { color:rgba(0, 0, 0, .4); text-decoration:line-through; padding:0 10px; font-style:italic; } /* Animation CSS BOF */ .product-list .style-4 .add-to-cart, .product-list .style-4 .hover-content, .product-list .style-4 a, .product-list .style-4 i, .product-list .style-4 img, .product-list .style-4 .btn, .product-list .user-action { transition:all .5s ease-in-out 0s; -moz-transition:all .5s ease-in-out 0s; -webkit-transition:all .5s ease-in-out 0s; -o-transition:all .5s ease-in-out 0s; -ms-transition:all .5s ease-in-out 0s; } .product-list .style-4 .user-action .btn:nth-child(1) {transition-delay: 0.1s; -webkit-transition-delay:0.1s; -o-transition-delay: 0.1s;} .product-list .style-4 .user-action .btn:nth-child(2) {transition-delay: 0.2s; -webkit-transition-delay:0.2s; -o-transition-delay: 0.2s;} .product-list .style-4 .user-action .btn:nth-child(3) {transition-delay: 0.1s; -webkit-transition-delay:0.1s; -o-transition-delay: 0.1s;} /* Hover State CSS BOF */ .product-list .style-4:hover .add-to-cart { opacity: 1; top: 0; } .product-list .style-4:hover .user-action .btn { opacity: 1; top: 0;} .product-list .style-4 .user-action .btn { opacity: 0; top: 150px; } /*** Grid Style-5 CSS BOF ***/ .product-list .style-5 { border:1px solid #f2f2f2; } .product-list .style-5 .item-img { position:relative; overflow:hidden; } .product-list .style-5 .item-img .ecm-img { -webkit-transform:scale(1); -o-transform:scale(1); -ms-transform:scale(1); -moz-transform:scale(1); transform:scale(1); } .product-list .style-5 .item-img .badge { position:absolute; top:0; right:0; padding:5px 9px; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; } .product-list .style-5 .user-action { position:absolute; left:-40px; top:25%; } .product-list .style-5 .user-action li { display:block; } .product-list .style-5 .user-action .btn { background:none; } .product-list .style-5 .item-detail .ecm-p { margin-bottom:0 } .product-list .style-5 .user-rating { margin-bottom:10px; } .product-list .style-5 .user-rating li { padding:0 2px; display:inline-block; } .product-list .style-5 .user-rating li .ecm-rating { color:#a8a8a8; } .product-list .style-5 .ecm-discount-price { color:rgba(0, 0, 0, .4); text-decoration:line-through; padding:0 10px; font-style:italic; } /* Animation CSS BOF */ .product-list .style-5, .product-list .style-5 .item-img, .product-list .style-5 a, .product-list .style-5 i, .product-list .style-5 img, .product-list .style-5 .btn, .product-list .user-action { -moz-transition:all .3s ease-in-out 0s; -webkit-transition:all .3s ease-in-out 0s; -o-transition:all .3s ease-in-out 0s; -ms-transition:all .3s ease-in-out 0s; transition:all .3s ease-in-out 0s; } /* Hover State CSS BOF */ .product-list .style-5:hover .item-img .ecm-img { -webkit-transform:scale(1.2); -o-transform:scale(1.2); -ms-transform:scale(1.2); -moz-transform:scale(1.2); transform:scale(1.2); } .product-list .style-5:hover .user-action { left:0; } .product-list .style-5 .item-img .badge { color:#fff; } /*** Grid Style-6 CSS BOF */ .product-list .style-6 { background-color:#fff; border:1px solid #dddddd; } .product-list .style-6 .item-img { overflow: hidden; position: relative; text-align: center; border:1px solid #dddddd; } .product-list .style-6 .user-action { bottom: -20px; left: 5%; opacity: 0; padding: 20px 0; position: absolute; text-align: center;visibility: hidden;width: 90%; } .product-list .style-6 .item-img-thumbnail { position: relative; } .product-list .style-6 .item-detail { display: inline-block; width: 100%; } .product-list .style-6 .back-img { left: 0; opacity: 0; position: absolute; top: 0; visibility: hidden; } .product-list .style-6 .item-detail .item-price { font-weight:500; margin-bottom:3px; font-size:20px; } .product-list .style-6 .user-rating li { padding:0 2px; display:inline-block; } .product-list .style-6 .user-rating li .ecm-rating { color:#a8a8a8; } .product-list .style-6 .ecm-discount-price { color:rgba(0, 0, 0, .4); text-decoration:line-through; padding:0 10px; font-style:italic; } .product-list .style-6 .user-action .btn { background:none; } /* Aimation CSS BOF */ .product-list .style-6, .product-list .style-6 .user-action, .product-list .style-6 .back-img, .product-list .style-6 a, .product-list .style-6 i, .product-list .style-6 img, .product-list .style-6 .btn { -moz-transition:all .5s ease-in-out 0s; -webkit-transition:all .5s ease-in-out 0s; -o-transition:all .5s ease-in-out 0s; -ms-transition:all .5s ease-in-out 0s; transition:all .5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-list .style-6:hover .back-img { backface-visibility: hidden; opacity: 1; visibility: visible; } .product-list .style-6:hover .back-img, .product-list .style-6 .thumbnail:hover .user-action { transition: all 300ms ease 0s; -moz-transition: all 300ms ease 0s; -webkit-transition: all 300ms ease 0s; -o-transition: all 300ms ease 0s; -ms-transition: all 300ms ease 0s; } .product-list .style-6:hover .user-action { bottom: 10px; opacity: 1; visibility: visible; } /*** Grid Style-7 CSS BOF */ .product-list .style-7 { -moz-box-shadow:0 2px 15px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow:0 2px 15px 0 rgba(0, 0, 0, 0.1); box-shadow:0 2px 15px 0 rgba(0, 0, 0, 0.1); } .product-list .style-7 .item-img { position: relative; display: inline-block; } .product-list .style-7 .item-img .label-box::after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #000; bottom: -4px; content: ""; left: 50%; margin-left: -2px; position: absolute; } .product-list .style-7 .item-img .label-box { background: #000 none repeat scroll 0 0; border-radius: 3px; color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; margin-bottom: 0; padding: 0 11px; position: absolute; right: 16px; text-transform: uppercase; top: 16px; } .product-list .style-7 .item-img .user-action { position: absolute; bottom:11px; width: 100%; } .product-list .style-7 .user-action .btn { display: inline-block; line-height:30px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-transform:scale(0); -webkit-transform:scale(0); -o-transform:scale(0); transform: scale(0); width:50px; } .product-list .style-7 .cart-action { top: 11px; position: absolute; width: 100%; } .product-list .style-7 .cart-action .btn { -moz-transform:scale(0); -webkit-transform:scale(0); -o-transform:scale(0); transform: scale(0); width:80%; margin:0 auto; padding:10px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } .product-list .style-7 .user-rating li { padding:0 2px; display:inline-block; } .product-list .style-7 .ecm-discount-price { color:rgba(0, 0, 0, .4); text-decoration:line-through; padding:0 10px; font-style:italic; } .product-list .style-7 .user-rating li .ecm-rating { color:#a8a8a8; } /* Animation CSS BOF */ .product-list .style-7, .product-list .style-7 .user-action .btn, .product-list .cart-action .btn, .product-list .style-7 a, .product-list .style-7 i, .product-list .style-7 img, .product-list .style-7 .btn, .product-list .style-7 .user-action { -moz-transition:all .5s ease-in-out 0s; -webkit-transition:all .5s ease-in-out 0s; -o-transition:all .5s ease-in-out 0s; -ms-transition:all .5s ease-in-out 0s; transition:all .5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-list .style-7:hover .user-action .btn, .product-list .style-7:hover .cart-action .btn { -moz-transform:scale(1); -webkit-transform:scale(1); -o-transform:scale(1); transform: scale(1); } /*** Grid Style-8 CSS BOF */ .product-list .style-8 { background:#fff; } .product-list .style-8 .item-img { position: relative; display: inline-block; border:1px solid #dddddd; } .product-list .style-8 .item-img .label-box::after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #000; bottom: -4px; content: ""; left: 50%; margin-left: -2px; position: absolute; } .product-list .style-8 .item-img .label-box { background: #000 none repeat scroll 0 0; border-radius: 3px; color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; margin-bottom: 0; padding: 0 11px; position: absolute; right: 16px; text-transform: uppercase; top: 16px; } .product-list .style-8 .item-img .user-action { position: absolute; bottom:11px; left:0; right:0; margin:0 auto; } .product-list .style-8 .user-action .btn { display: inline-block; line-height:30px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-transform:rotate(0deg) scale(0); -webkit-transform:rotate(0deg) scale(0); -o-transform:rotate(0deg) scale(0); transform:rotate(0deg) scale(0); width:45px; } .product-list .style-8 .cart-action .btn { -moz-transform:scale(0); -webkit-transform:scale(0); -o-transform:scale(0); transform: scale(0); margin:10px auto; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } .product-list .style-8 .user-rating li { padding:0 2px; display:inline-block; } .product-list .style-8 .user-rating li .ecm-rating { color:#a8a8a8; } .product-list .style-8 .ecm-discount-price { color:rgba(0, 0, 0, .4); text-decoration:line-through; padding:0 10px; font-style:italic; } /* Animation CSS BOF */ .product-list .style-8, .product-list .style-8 .user-action .btn, .product-list .style-8 a, .product-list .style-8 i, .product-list .style-8 img, .product-list .style-8 .btn, .product-list .style-8 .user-action { -moz-transition:all .5s ease-in-out 0s; -webkit-transition:all .5s ease-in-out 0s; -o-transition:all .5s ease-in-out 0s; -ms-transition:all .5s ease-in-out 0s; transition:all .5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-list .style-8:hover { -moz-box-shadow:0 3px 3px 0 rgba(0, 0, 0, .2); -webkit-box-shadow:0 3px 3px 0 rgba(0, 0, 0, .2); box-shadow:0 3px 3px 0 rgba(0, 0, 0, .2); } .product-list .style-8:hover .user-action .btn { -moz-transform:rotate(360deg) scale(1,1); -webkit-transform:rotate(360deg) scale(1,1); -o-transform:rotate(360deg) scale(1,1); transform:rotate(360deg) scale(1,1); } /*** Grid Style-9 CSS BOF */ .product-list .style-9 { border:1px solid #dddddd; } .product-list .style-9 .item-img { overflow: hidden; position: relative; text-align: center; border:1px solid #dddddd; } .product-list .style-9 .user-action { bottom: -20px; left:0; opacity: 0; padding:5px 0; position: absolute; text-align: center;visibility: hidden;width:100%; } .product-list .style-9 .item-img-thumbnail { position: relative; } .product-list .style-9 .item-detail { display: inline-block; width: 100%; } .product-list .style-9 .item-detail .item-price { font-weight:500; margin-bottom:3px; font-size:20px; } .product-list .style-9 .user-rating li { padding:0 2px; display:inline-block; } .product-list .style-9 .user-rating li .ecm-rating { color:#a8a8a8; } .product-list .style-9 .ecm-discount-price { color:rgba(0, 0, 0, .4); text-decoration:line-through; padding:0 10px; font-style:italic; } /* Aimation CSS BOF */ .product-list .style-9, .product-list .style-9 .user-action, .product-list .style-9 a, .product-list .style-9 i, .product-list .style-12 img, .product-list .style-9 .btn, .product-list .style-9 .user-action { -moz-transition:all .5s ease-in-out 0s; -webkit-transition:all .5s ease-in-out 0s; -o-transition:all .5s ease-in-out 0s; -ms-transition:all .5s ease-in-out 0s; transition:all .5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-list .style-9:hover .user-action { bottom:0; opacity: 1; transition: all 300ms ease 0s; -moz-transition: all 300ms ease 0s; -webkit-transition: all 300ms ease 0s; -o-transition: all 300ms ease 0s; -ms-transition: all 300ms ease 0s; visibility: visible; } .product-list .style-9 .user-action .btn { background: none; color: white; } .product-list .style-9 .user-action .btn:hover, .product-list .style-9 .user-action .btn:focus, .product-list .style-9 .user-action .btn:active, .product-list .style-9 .user-action .btn.active { background:none; color: none; } /*** Grid Style-10 CSS BOF ***/ .product-list .style-10 { background:#fff; } .product-list .style-10 .product-img { position:relative; margin:0; width:100%; overflow:hidden; top:0; border:1px solid #dddddd; } .product-list .style-10 .product-img a { position:relative; display:block; text-align:center; } .product-list .style-10 .product-img .front { opacity:1; position:relative; } .product-list .style-10 .product-img .back { opacity:0; position:absolute; left:0; right:0; } .product-list .style-10 .product-img .ecm-img { display:inline-block; } .product-list .style-10 .product-img .action { -webkit-transform:scale(0); -moz-transform:scale(0); -o-transform:scale(0); transform:scale(0); opacity:0; position:absolute; margin:0; padding:0; background:rgba(0, 0, 0, .6); top:0; left:0; right:0; bottom:0; } .product-list .style-10 .product-img .action ul { list-style:none; text-align:center; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .product-list .style-10 .product-img .action ul li { font:20px; margin:0 5px; } .product-list .style-10 .product-img .action .btn { text-align:center; width:45px; height:45px; line-height:35px; display:block; } .product-list .style-10 .user-rating li { padding:0 2px; display:inline-block; } .product-list .style-10 .user-rating li .ecm-rating { color:#a8a8a8; } .product-list .style-10 .ecm-discount-price { color:rgba(0, 0, 0, .4); text-decoration:line-through; padding:0 10px; font-style:italic; } /* Animation CSS BOF */ .product-list .style-10, .product-list .style-10 .product-img .front, .product-list .style-10 .product-img .back, .product-list .style-10 .product-img .action, .products-grid .style-10 .product-img .action ul li a, .product-list .style-10 a, .product-list .style-10 i, .product-list .style-10 img, .product-list .style-10 .btn, .product-list .user-action { transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition:all 0.5s ease-in-out 0s; -ms-transition:all 0.5s ease-in-out 0s; } /* Hover State CSS BOF */ .product-list .style-10:hover .product-img .front { opacity:0; } .product-list .style-10:hover .product-img .back { opacity:1; } .product-list .style-10:hover { -moz-box-shadow: 0 0 6px -2px #999; -webkit-box-shadow: 0 0 6px -2px #999; box-shadow: 0 0 6px -2px #999; } .product-list .style-10:hover .action { opacity:1; -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .product-list .style-10 .product-img .action .btn { background: none; } .product-list .style-10 .product-img .action .btn:hover, .product-list .style-10 .product-img .action .btn:focus, .product-list .style-10 .product-img .action .btn:active, .product-list .style-10 .product-img .action .btn.active { color:#fff !important; } /* | -------------------------------------------------------- | GRID VIEW RESPONSIVE CSS | -------------------------------------------------------- */ /* iPad & Small Tablet (Portrait) (768 * 797) ============================================================== */ @media (min-width: 768px) and (max-width: 980px) { /*** Grid Style Global Classes CSS BOF ***/ body .product-grid { font-size:13px; } .product-grid body { font-size:13px } .product-grid .ecm-heading-h1 { font-size:30px; } .product-grid .ecm-heading-h2 { font-size:25px; line-height:1.3 } .product-grid .ecm-heading-h3 { font-size:20px; } .product-grid .ecm-heading-h4 { font-size:16px; } section.product-grid { padding-top:50px; padding-bottom:50px; } /*** Grid Style Variation CSS BOF ***/ .product-grid .style-2 .thumbnail:hover .user-action { -moz-transform:translateY(20px); -webkit-transform:translateY(20px); -o-transform:translateY(20px); -ms-transform:translateY(20px); transform:translateY(20px); } .product-grid .style-3 .thumbnail:hover .item-detail .ecm-heading-h4 { letter-spacing:1px; } .product-grid .style-4 .item-detail .ecm-heading-h4 { text-align:center;} .product-grid .style-4 .item-detail .item-price {float:none; text-align:center; } .product-grid .style-4 .item-detail .user-rating { float:none; margin-top:0 } .product-grid .style-4 .item-detail { padding:5px; } .product-grid .style-4 .hover-content .add-to-cart .btn { width:auto; } .product-grid .style-4 .user-action .btn { padding:5px 0; width:28px; } .product-grid .style-5 .user-action .btn { font-size:13px; } .product-grid .style-6 .thumbnail .hover-content { top:-130%; } .product-grid .style-6 .thumbnail:hover .hover-content { top:-22px; } .product-grid .style-6 .thumbnail .item-detail .item-price { margin-top:0; } .product-grid .style-7 .item-detail .item-price, .product-grid .style-7 .item-detail .user-rating { float:none; } .product-grid .style-7 .thumbnail { padding-bottom:35px; } .product-grid .style-9 .thumbnail .user-action .btn { width:40px; } .product-grid .style-9 .thumbnail .cart-action .btn { padding:8px 10px; } .product-grid .style-10 .thumbnail .cart-action .btn { padding:8px 10px; } .product-grid .style-10 .thumbnail .user-action .btn { width:40px; } .product-grid .style-15 .btn { font-size:25px; width:50px; height:50px; line-height:50px; } .product-grid .style-16 .thumbnail .product-des .action ul li { margin:0; } .product-grid .style-18 .thumbnail .item-detail { padding:10px; } .product-grid .style-20 .thumbnail .user-action .btn { width:30px; height:30px; line-height:30px; padding:0; } .product-grid .style-22 .thumbnail .item-detail { padding:5px; } .product-grid .style-22 .user-action .btn { width:30px; height:30px; line-height:30px; padding:0; } .product-grid .style-21 .thumbnail:hover .item-detail .ecm-heading-h3 { top:-42px; } .product-grid .style-23 .thumbnail .item-hover ul.user-action li { padding:0; } .product-grid .style-23 .thumbnail .item-hover ul.user-action li .btn { width:40px; height:40px; line-height:30px; } /*** List Style Global Classes CSS BOF ***/ body .product-list { font-size:13px; } .product-list body { font-size:13px } .product-list .ecm-heading-h1 { font-size:30px; } .product-list .ecm-heading-h2 { font-size:25px; line-height:1.3 } .product-list .ecm-heading-h3 { font-size:20px; } .product-list .ecm-heading-h4 { font-size:16px; } section.product-list { padding-top:50px; padding-bottom:50px; } .product-list [class*="style-"] { padding:15px 10px; } } /* All Mobile Device (iPhone, Android, Window)(480 * 640) ============================================================== */ @media (max-width: 767px) { /*** Grid Style Global Classes CSS BOF ***/ body .product-grid { font-size:13px; } section.product-grid { padding-top:30px; padding-bottom:30px; } .product-grid .ecm-heading-h1, .product-grid .ecm-heading-h2, .product-grid .ecm-heading-h3, .product-grid .ecm-heading-h4, .product-grid .ecm-heading-h5, .product-grid .ecm-heading-h6 { text-align:center; } .product-grid .ecm-heading-h1 { font-size:25px; } .product-grid .ecm-heading-h2 { font-size:20px; line-height:1.3 } .product-grid .ecm-heading-h3 { font-size:18px; } .product-grid .ecm-heading-h4 { font-size:15px; } .product-grid .ecm-p { text-align:center; padding-top:3px; padding-bottom:3px; } .product-grid .ecm-ul li { line-height:1.2 } .product-grid hr.style-two { margin:15px auto; } .product-grid .mob-right { float:right; } .product-grid figcaption { display:none; } .product-grid .ecm-img, .product-grid .img-left, .product-grid .img-right { float:none; margin:0px auto 0; display:block; text-align:center; } .product-grid .thumbnail .ecm-img { width:100%; } .ecm-product-type { text-align: center; } /*** Grid Style Variation CSS BOF ***/ .product-grid .thumbnail { margin-top:30px; margin-bottom:30px; } .product-grid .block-title { margin-bottom:15px; } .product-grid .block-title::after { right:0; margin:0 auto; bottom:-10px; } .product-grid .style-4 .item-detail .item-price, .product-grid .style-4 .item-detail .user-rating { float:none; } .product-grid .style-5 .thumbnail { margin-bottom:40px; } .product-grid .style-5 .thumbnail:hover .hover-content { bottom:-28px; } .product-grid .style-8 .user-rating { text-align:center; } .product-grid .style-9 .thumbnail { margin-bottom:0; margin-top:20px; } .product-grid .style-12 .user-rating { text-align:center; } .product-grid .style-13 .thumbnail:hover .hover-content { bottom:-28px; } .product-grid .style-18 .thumbnail .user-rating { text-align:center; } .product-grid .style-18 .user-action { text-align:center; } .product-grid .style-20 .user-rating { text-align:center; } .product-grid .style-24 .thumbnail .product-item .item-info, .product-grid .style-24 .thumbnail .product-item .item-desc { position:relative; } .product-grid .style-24 .product-item .item-info, .product-grid .style-24 .thumbnail .product-item .item-desc { visibility:visible; opacity:1; } .product-grid .style-24 .thumbnail .product-item .item-desc { padding:0 10px 15px; } .product-grid .style-24 .thumbnail .product-item:hover .item-info, .product-grid .style-24 .thumbnail .product-item:hover .item-desc, .product-grid .style-24 .thumbnail .product-item:hover { -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; } .product-grid .style-24 .thumbnail .product-item:hover .item-info, .product-grid .style-24 .thumbnail .product-item:hover .item-desc { top:0; bottom:0; } /*** List Style Global Classes CSS BOF ***/ body .product-list { font-size:13px; } section.product-list { padding-top:30px; padding-bottom:30px; } .product-list .ecm-heading-h1, .product-list .ecm-heading-h2, .product-list .ecm-heading-h3, .product-list .ecm-heading-h4, .product-list .ecm-heading-h5, .product-list .ecm-heading-h6 { text-align:center; } .product-list .ecm-heading-h1 { font-size:25px; } .product-list .ecm-heading-h2 { font-size:20px; line-height:1.3 } .product-list .ecm-heading-h3 { font-size:18px; } .product-list .ecm-heading-h4 { font-size:15px; } .product-list .ecm-p { text-align:center; padding-top:3px; padding-bottom:3px; } .product-list .ecm-ul li { line-height:1.2 } .product-list hr.style-two { margin:15px auto; } .product-list .mob-right { float:right; } .product-list figcaption { display:none; } .product-list .ecm-img, .product-list .img-left, .product-list .img-right { float:none; margin:0px auto 0; display:block; text-align:center; } .product-list .thumbnail .ecm-img { width:100%; } .product-list .d-flex { display:block; } .product-list .align-items-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .product-list .block-title::after { right:0; margin:0 auto; bottom:-10px; } .product-list .user-action, .product-list .user-rating { text-align:center; } .product-list [class*="style-"] { padding:15px; } .product-list [class*="style-"] .item-detail { padding-top:15px; } .product-list .style-3 .item-detail .ecm-heading-h4::after { margin:10px auto; right:0; } } /* iPad & Small Tablet Landscape (1024 * 768) ============================================================== */ @media (min-width: 979px) and (max-width: 1200px) { /*** Grid Style Global Classes CSS BOF ***/ .product-grid .style-6 .thumbnail:hover .hover-content { top:-15px; } .product-grid .style-7 .item-detail .item-price, .product-grid .style-7 .item-detail .user-rating { float:none; } .product-grid .style-7 .thumbnail { padding-bottom:35px; } .product-grid .style-24 .thumbnail .product-item:hover .item-desc { bottom:-18px; } } /* | -------------------------------------------------------- | STYLE CHOOSER CSS | -------------------------------------------------------- */ .ecm-style-switcher { width: 200px; padding: 20px; position: fixed; top: 50%; left: -200px; z-index: 1999; background: #fff; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); border: 1px solid #95BB53; -moz-transition: left .3s linear; -webkit-transition: left .3s linear; -o-transition: left .3s linear; -ms-transition: left .3s linear; transition: left .3s linear; } .ecm-style-switcher.open{ left: 0; } .ecm-style-switcher h3{ margin: 0 0 10px; font-size: 18px; } .ecm-style-switcher > button{ font-size: 0; width: 24px; height: 24px; margin: 5px; border: none; padding: 0; outline: none; } .ecm-style-switcher > button:hover { opacity: .7; } .ecm-style-switcher > button.current{ box-shadow: 0 0 0 3px #fff, 0 0 0 5px #ccc; opacity: 1; } /* Switcher Button CSS BOF */ .ecm-style-switcher-btn { position: absolute; top: -1px; left: 100%; width: 40px; height: 40px; line-height: 40px; background: #95BB53; color: #fff; text-align: center; cursor: pointer; text-decoration: none; } .ecm-style-switcher-btn:before { content: ''; font-family: fontawesome; font-weight: normal; display: block; -moz-animation:animswitch 2s linear infinite; -webkit-animation:animswitch 2s linear infinite; -o-animation:animswitch 2s linear infinite; -ms-animation:animswitch 2s linear infinite; animation:animswitch 2s linear infinite; } .ecm-style-switcher-btn:hover, .ecm-style-switcher-btn:focus, .ecm-style-switcher-btn:active { color: #fff; text-decoration: none; } /* Keyframe CSS BOF */ @keyframes animswitch{ 100% { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } .ecm-style-switcher.open .ecm-style-switcher-btn:before{ content: ''; -moz-animation: animswitch 0s linear infinite; -webkit-animation: animswitch 0s linear infinite; -o-animation: animswitch 0s linear infinite; -ms-animation: animswitch 0s linear infinite; animation: animswitch 0s linear infinite; }