/* -------------------------------------------------- */ /* From Slick Library /* -------------------------------------------------- */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: 0; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: left; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* -------------------------------------------------- */ /* Products & Categories Carousel /* -------------------------------------------------- */ .newproducts .carousel { height: 320px; } .product-slider.cols-5 { padding: 2% 1% 2% 0.85%; } .product-slider, .categories-slider, .post-slider { position: relative; margin: 0; background: white; padding: 2% 1%; clear: both; box-sizing: border-box; } body .product-slider { margin-bottom: 0; } .product-slider .slider-title, .categories-slider .slider-title, .post-slider .slider-title { margin: 0; padding: 0 1% 1.2%; font-size: 18px; text-transform: uppercase; color: #333333; text-align: left; display: inline-block; font-weight: 500; letter-spacing: 1px; } .layout-fullwidth .product-slider .slider-title, .layout-fullwidth .categories-slider .slider-title, .layout-fullwidth .post-slider .slider-title { padding: 0 1% 1%; } .product-slider .carousel, .categories-slider .cat_carousel, .post-slider .carousel { padding: 20px 0 0 0; border-top: 1px solid #dddddd; } .product-slider .product-slide .sellupper { right: -23px; } .product-slider .product-slide .newupper { left: -23px; } .product-slider .carousel .inner-slider, .categories-slider .cat_carousel .inner-slider, .post-slider .carousel .inner-slider { white-space: nowrap; overflow: hidden; margin: 0; } .product-slider .product-slide, .categories-slider .cat-slide, .post-slider .post-slide { display: inline-block; width: 18.6%; position: relative; vertical-align: top; overflow: hidden; height: 100%; white-space: normal; padding: 0; float: none !important; margin-right: 0 !important; } .product-slider .product-slide .img-wrapper img { width: 100%; } .product-slider .product-name-price { min-height: 110px; } .product-slider .product-slide:last-child { margin-right: 0; } .product-slider .product-image { position: relative; display: block; } .product-slider .carousel .slick-slide, .categories-slider .cat_carousel .slick-slide, .post-slider .carousel .slick-slide { margin: 0 7.5px; } .categories-slider .products-categories .cat-slide h2 { position: absolute; bottom: 0; width: 100%; background: #dfdfdf; margin: 0; padding: 3%; text-align: center; box-sizing: border-box; -webkit-transition: all .5s ease-out; transition: all .5s ease-out; } .products-categories .cat-slide h2 .count { display: none; } .cat_carousel { width: 100%; margin: 0 auto; padding-top: 35px; padding-bottom: 25px; box-sizing: border-box; } .products-categories .cat-slide img { height: auto; width: 100%; display: block; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all .4s ease-out; transition: all .4s ease-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .products-categories .cat-slide a { display: inline-block; width: 100%; box-sizing: border-box; } .product-slider .product-slide .product-name { display: block; width: 100%; text-align: left; padding-top: 10px; margin: 0 0 5px; position: relative; } .product-slider .product-slide .product-name a { color: #323232; font-size: 15px; } .product-slider .product-slide .price { text-align: left; } .product-slider .product-slide .price.sale { line-height: 18px; font-size: 16px; margin-top: -4px; } .product-slider .product-slide .price .from { display: none; } .product-slider .product-slide .price del .amount { font-size: 11px; margin-right: 10px; } .product-slider .product-slide .price .amount, .product-slider .product-slide .price.sale .currentprice { font-size: 14px; } .product-slider .product-slide .btn-cont { float: right; } #product-page .product-slider.related { margin: 20px 0 0 0; } .product-slide .product-grid .starwrapper { top: 84%; } /* -------------------------------------------------- */ /* Products & Categories Columns /* -------------------------------------------------- */ /*********************** 3 Columns ****************************/ .categories-slider.cols-3 .cat_carousel .products-categories .slick-slide, .product-slider.cols-3 .carousel .slick-slide { margin: 0 10px; } .cat_carousel .products-categories.columns-3 .cat-slide { height: 361px; } .product-slider.cols-3 .product-slide, .post-slider.cols-3 .post-slide { width: 31.3%; } .cat_carousel .products-categories.columns-3 .cat-slide a { max-height: 357px; } /*********************** 4 Columns ****************************/ .cat_carousel .cat-slide { width: 262px; height: auto; margin-right: 20px; overflow: hidden; } .product-slider.cols-4 .product-slide, .post-slider.cols-4 .post-slide { width: 23%; padding: 0; } .categories-slider.cols-4 .products-categories .cat-slide h2 { padding: 4% 3%; font-size: 18px; width: 100%; } /*********************** 3 & 4 Columns ****************************/ .product-slider.cols-3 .product-slide .sellupper, .product-slider.cols-4 .product-slide .sellupper { right: -22px; } .product-slider.cols-3 .product-slide .newupper, .product-slider.cols-4 .product-slide .newupper { left: -22px; } /*********************** 5 Columns ****************************/ .cat_carousel .products-categories.columns-5 .cat-slide { width: 206px; } .products-categories.columns-5 .cat-slide h2 { padding: 5% 3%; font-size: 16px; } .cat_carousel .products-categories.columns-5 .cat-slide a { max-height: 206px; } .categories-slider.cols-5 .products-categories .cat-slide h2 { font-size: 17px; } /*********************** Navigation Arrows ****************************/ .product-slider .prev, .product-slider .next, .categories-slider .prev, .categories-slider .next, .post-slider .prev, .post-slider .next { display: block; position: absolute; z-index: 25; width: auto; height: 30px; cursor: pointer; font-size: 25px; top: 15px; border-radius: 2px; text-align: center; line-height: 32px; padding: 0 10px; } .layout-fullwidth .product-slider .prev, .layout-fullwidth .product-slider .next, .layout-fullwidth .categories-slider .prev, .layout-fullwidth .categories-slider .next, .layout-fullwidth .post-slider .prev, .layout-fullwidth .post-slider .next { top: 10px; } .product-slider .prev:hover, .product-slider .prev:focus, .product-slider .next:hover, .product-slider .next:focus, .categories-slider .prev:hover, .categories-slider .prev:focus, .categories-slider .next:hover, .categories-slider .next:focus, .post-slider .prev:hover, .post-slider .prev:focus, .post-slider .next:hover, .post-slider .next:focus { background: #EE9D16; color: #fff; } .next.disabled, .prev.disabled { opacity:0.5; cursor:default !important; background-position: 0 0 !important; } /*********************** Prev Arrow ****************************/ .product-slider .prev, .categories-slider .prev, .post-slider .prev { right: 60px; } /*********************** Next Arrow ****************************/ .product-slider .next, .categories-slider .next, .post-slider .next { right: 25px; } .al-controls { position: absolute; top: 0; right: 0; } .layout-fullwidth .al-controls { top: 10px; } .al-controls button { background: transparent !important; } /* -------------------------------------------------- */ /* Single Product Image Gallery /* -------------------------------------------------- */ #product-page .product-images .views-gallery { width: 80%; margin: 20px auto 0; border: 1px solid #dddddd; padding: 1.5% 1.5% 0; box-sizing: border-box; position: relative; z-index: 9999; } #product-page .product-images .views-gallery img { height: auto; max-width: 100%; } #product-page .product-images .views-gallery .slider .slick-slide { margin: 0 4px; } body.single-product .product-images .prev-carousel, body.single-product .product-images .next-carousel { position: absolute; bottom: 25px; font-size: 22px; z-index: 9999; } body.single-product .product-images .prev-carousel { left: 10px; } body.single-product .product-images .next-carousel { right: 10px; } .expirytimer { font-family: 'Montserrat', sans-serif; font-weight: 400; display: inline-block; margin-left: 15px; position: relative; max-width: 355px; width: 100%; } .expirytimer span { font-weight: normal; background: rgba(238, 157, 22, 0.8); color: #fff; padding: 0 20px; font-size: 20px; border-radius: 3px; position: absolute; left: 0; top: -23px; } .expirytimer span em { font-style: normal; font-size: 14px; margin-right: 5px; margin-left: 3px; } /* For box layout */ @media all and (max-width: 1150px) { /* -------------------------------------------------- */ /* Single Product /* -------------------------------------------------- */ body.single-product .product-images .prev-carousel, body.single-product .product-images .next-carousel { bottom: 4%; } } @media all and (min-width: 959px) { .products-categories .cat-slide:hover a:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; box-sizing: border-box; -webkit-transition: all .4s ease-out; transition: all .4s ease-out; } .categories-slider.effect-dark .products-categories .cat-slide:hover a:after { background: rgba(0, 0, 0, 0.6); -webkit-transition: all .4s ease-out; transition: all .4s ease-out; } .products-categories .cat-slide:hover h2 { color: #fff; background: transparent; z-index: 10; bottom: 42%; -webkit-transition: all .5s ease-out; transition: all .5s ease-out; } .products-categories.columns-4 .cat-slide:hover h2 { font-size: 22px; } .categories-slider.effect-light .products-categories .cat-slide:hover h2 { background: rgba(0, 0, 0, 0.7) !important; } .products-categories.columns-5 .cat-slide:hover h2 { bottom: 35%; } .products-categories .cat-slide:hover h2 { font-size: 22px; } .products-categories .cat-slide a:hover img { opacity: 0.8; -webkit-transform: scale(1.1); transform: scale(1.1); } } @media only screen and (max-width: 959px) { .product-slider, .post-slider, .categories-slider, .product-slider.cols-5, .categories-slider.cols-5 .post-slider.cols-5 { padding: 3% 3% 5%; } .product-slider .product-image img { left: 0; } .carousel { width: 100%; } .cat_carousel .products-categories.columns-5 .cat-slide a { max-height: 303px; } } @media all and (max-width: 768px) { .layout-fullwidth .product-slider .prev, .layout-fullwidth .product-slider .next, .layout-fullwidth .categories-slider .prev, .layout-fullwidth .categories-slider .next, .layout-fullwidth .post-slider .prev, .layout-fullwidth .post-slider .next { top: 5px; } body .expirytimer { display: block; margin-left: 8px; margin-bottom: 5px; } body .expirytimer span { position: relative; top: auto; left: auto; padding: 3px 10px; } } @media all and (max-width: 640px) { /* -------------------------------------------------- */ /* Carousels /* -------------------------------------------------- */ body .product-slider .slider-title, body .products-grid .products-title, body .categories-slider .slider-title, body .categories-grid .grid-title, body .post-slider .slider-title, body .posts-grid .grid-title { margin: 0; padding: 0 5px 15px; } body .cat_carousel .products-categories.columns-5 .cat-slide a { max-height: 1000px; } .layout-fullwidth .product-slider .prev, .layout-fullwidth .product-slider .next, .layout-fullwidth .categories-slider .prev, .layout-fullwidth .categories-slider .next, .layout-fullwidth .post-slider .prev, .layout-fullwidth .post-slider .next { top: 0; } } @media only screen and (max-width: 479px) { /* -------------------------------------------------- */ /* Sliders & Carousels /* -------------------------------------------------- */ body .categories-slider .cat_carousel .products-categories { margin-bottom: 0; } body .product-slider .slider-title, body .categories-slider .slider-title, body .post-slider .slider-title, body .layout-fullwidth .product-slider .slider-title, body .layout-fullwidth .categories-slider .slider-title, body .layout-fullwidth .post-slider .slider-title { padding: 8px 5px 13px; width: 100%; text-align: center; } body .product-slider .al-controls { top: 37%; right: 0; } body .categories-slider .al-controls { top: 51%; right: 0; } body .post-slider .al-controls { top: 30%; right: 0; } .al-controls { left: auto; width: 100%; } body .product-slider .prev, body .categories-slider .prev, body .post-slider .prev { left: 5%; right: auto; color: #fff; background: rgba(0, 0, 0, 0.3); } body .product-slider .next, body .categories-slider .next, body .post-slider .next { right: 5%; left: auto; color: #fff; background: rgba(0, 0, 0, 0.3); } body .expirytimer { margin-left: auto; margin-right: auto; text-align: center; } /* -------------------------------------------------- */ /* Single Product /* -------------------------------------------------- */ body #product-page .product-images .views-gallery { width: 84% !important; } body #product-page .product-images .main-image .mousetrap { display: none; } body.single-product .product-images .prev-carousel, body.single-product .product-images .next-carousel { bottom: 4.5%; } } /* -------------------------------------------------- */ /* Countdown fix /* -------------------------------------------------- */ @media only screen and (max-width: 380px) { body .expirytimer span { padding: 3px 8px; } body .expirytimer span em { margin-right: 0; margin-left: 2px; } }