.so-extraslider .extraslider-inner .item-wrap { overflow: hidden; } .so-extraslider .extraslider-inner .item-wrap .item-info .rating{ padding: 0px 10px; } .so-extraslider .extraslider-inner .item-wrap .item-image { width: 100%; border: 1px solid #DDD; position: relative; overflow: hidden; } .so-extraslider .extraslider-inner .item-wrap .item-image:hover { -webkit-box-shadow: rgba(0, 0, 0, 0.17) 0 0 13px; -moz-box-shadow: rgba(0, 0, 0, 0.17) 0 0 13px; -o-box-shadow: rgba(0, 0, 0, 0.17) 0 0 13px; box-shadow: rgba(0, 0, 0, 0.17) 0 0 13px; } .so-extraslider .extraslider-inner .item-wrap .item-image .item-img-info a.quick-view { display: none; } .so-extraslider .extraslider-inner .item-wrap .item-image:hover .item-img-info a.quick-view { display: block; text-align: center; background: none repeat scroll 0 0 rgba(255, 255, 255, 0.82); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16); color: #000; font: 700 13px/16px Arial, Helvetica, sans-serif; height: 43px; left: 50%; margin: -21px 0 0 -53px; padding: 13px 0 0; position: absolute; top: 50%; width: 107px; text-decoration: none; } .so-extraslider .extraslider-inner .item-wrap .item-image .quick-view-wrapper-mobile { background-color: transparent; bottom: 0; height: 155px; overflow: hidden; position: absolute; right: 0; width: 215px; z-index: 2; } .so-extraslider .extraslider-inner .item-wrap .item-image .quick-view-wrapper-mobile a { background-color: rgba(208, 208, 211, 0.57); display: block; height: 130px; pointer-events: all; position: relative; right: -162px; top: 80px; transform: rotate(45deg); width: 85px; } .so-extraslider .extraslider-inner .item-wrap .item-image .quick-view-wrapper-mobile a:hover { background-color: rgba(125, 125, 125, 0.57); } .so-extraslider .extraslider-inner .item-wrap .item-image .quick-view-wrapper-mobile a i { bottom: 0; color: black; display: inline-block; font-size: x-large; height: 22px; left: 9px; overflow: hidden; position: absolute; right: 10px; top: 46px; transform: rotate(-44deg); width: 30px; z-index: 2; } .so-extraslider .wishlist { margin: 10px 0px; } .so-extraslider .extraslider-inner .item-wrap .item-image img { width: 99.9%; /*max-width: 100%;*/ border: 0; box-shadow: #000 0em 0em 0em; } .so-extraslider .extraslider-inner .item-wrap .item-info { /* padding: 10px; */ width: 100%; } /*-----------------style1----------------------------*/ .so-extraslider .extraslider-inner .item-wrap.style1 .item-readmore{ } .so-extraslider .extraslider-inner .item-wrap.style2 .item-info { background: #333; } .so-extraslider .extraslider-inner .item-wrap .item-info .item-content { margin-bottom: 10px; } .so-extraslider .extraslider-inner .item-wrap .item-info .item-content .button-container { margin-top: 5px; } .so-extraslider .extraslider-inner .item-wrap .item-info .item-content .content_price .price-old{ text-decoration: line-through; } .so-extraslider .extraslider-inner .item-wrap .item-info .item-content .content_price { margin-bottom: 10px; font-size: 15px; } .so-extraslider .extraslider-inner .item-wrap .item-info .item-content .content_price span { color: #fff; } .so-extraslider .extraslider-inner .item-wrap .item-info .item-content .button-container .lnk_view span { color: #000; } .so-extraslider .extraslider-inner .item-wrap .item-info .item-title a { text-transform: uppercase; font-size: 16px; } .so-extraslider .extraslider-inner .item-wrap.style3 .item-info{ color: #fff; } .so-extraslider .extraslider-inner .item-wrap.style3 .item-info .item-content .item-des p, .so-extraslider .extraslider-inner .item-wrap.style5 .item-info .item-content .item-des p, .so-extraslider .extraslider-inner .item-wrap.style6 .item-info .item-content .item-des p, .so-extraslider .extraslider-inner .item-wrap.style7 .item-info .item-content .item-des p { color: #fff; margin-top: 5px; } .so-extraslider .extraslider-inner .item-wrap.style4 .item-info{ color: #fff; } .so-extraslider .extraslider-inner .item-wrap.style4 .item-info .item-content .item-des { margin-top: 10px; color: #000; } .so-extraslider .extraslider-inner .item-wrap.style4 .item-info a { color: #000; } .so-extraslider .extraslider-inner .item-wrap.style4 .item-info .item-content .ajax_add_to_cart_button span { color: #fff; } .so-extraslider .extraslider-inner .item-wrap.style4 .item-info .item-content .content_price span { color: #000; } .so-extraslider .extraslider-inner .item-wrap.style4 .item-info .item-content .wishlist, .so-extraslider .extraslider-inner .item-wrap.style4 .item-info .item-content .compare { color: #000; } .so-extraslider .extraslider-inner .item-wrap.style2 .item-info .item-content { margin-bottom: 10px; } .so-extraslider .extraslider-inner .item-wrap.style1 .item-info .item-title { padding: 10px 0; font-weight: bold; margin-bottom: 0px; text-transform: uppercase; font-size: 16px; } .so-extraslider .extraslider-inner .item-wrap.style1 .item-info .item-title a:hover { text-decoration: none; } .so-extraslider .extraslider-inner .item-wrap.style1 .item-info .item-title, .so-extraslider .extraslider-inner .item-wrap.style2 .item-info .item-title { padding: 10px; font-weight: bold; } .so-extraslider .extraslider-inner .item-wrap.style1 .item-info .item-title + .item-content, .so-extraslider .extraslider-inner .item-wrap.style2 .item-info .item-title + .item-content { margin-top: 0px; } .so-extraslider .extraslider-inner .item-wrap .item-info .item-description { color: #fff; } .so-extraslider .extraslider-inner .item-wrap .item-info .item-readmore { text-align: right; } /*####################### item-style3 ##########################*/ .so-extraslider .extraslider-inner .item-wrap.style3 { position: relative; } .so-extraslider .extraslider-inner .item-wrap.style3 img { -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; transition: all 0.2s ease-in; box-shadow: #000 0em 0em 0em; } .so-extraslider .extraslider-inner .item-wrap.style3 .item-info { position: absolute; top: 0; height: 100%; text-align: center; padding: 0; background: url(../images/background.png) repeat; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: translate(460px, -100px) rotate(180deg); -moz-transform: translate(460px, -100px) rotate(180deg); -o-transform: translate(460px, -100px) rotate(180deg); -ms-transform: translate(460px, -100px) rotate(180deg); transform: translate(460px, -100px) rotate(180deg); -webkit-transition: all 0.2s 0.4s ease-in-out; -moz-transition: all 0.2s 0.4s ease-in-out; -o-transition: all 0.2s 0.4s ease-in-out; -ms-transition: all 0.2s 0.4s ease-in-out; transition: all 0.2s 0.4s ease-in-out; box-shadow: #000 0em 0em 0em; z-index:3; } .so-extraslider .extraslider-inner .item-wrap.style3 .item-title { -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -o-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; padding: 6px; background: url(../images/background.png) repeat; margin: 5% 0 0 0; text-transform: uppercase; box-shadow: #000 0em 0em 0em; } .so-extraslider .extraslider-inner .item-wrap.style3 .item-readmore a{ color: #000; font-weight: bold; font-size: 14px; } .so-extraslider .extraslider-inner .item-wrap.style3 .item-title a { color: #fff; font-weight: bold; font-size: 16px; } .so-extraslider .item .item-wrap.style3 .item-related, .so-extraslider .extraslider-inner .item-wrap.style3 .item-description { -webkit-transform: translateX(300px) rotate(90deg); -moz-transform: translateX(300px) rotate(90deg); -o-transform: translateX(300px) rotate(90deg); -ms-transform: translateX(300px) rotate(90deg); transform: translateX(300px) rotate(90deg); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; /* padding:10px; */ text-align: left; box-shadow: #000 0em 0em 0em; } .so-extraslider .extraslider-inner .item-wrap.style3 .item-price { text-align: center; } .so-extraslider .extraslider-inner .item-wrap.style3:hover .item-info { filter: alpha(opacity=100); opacity: 1; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); box-shadow: #000 0em 0em 0em; } .so-extraslider .extraslider-inner .item-wrap.style3:hover .item-title { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; -ms-transition-delay: 0.5s; transition-delay: 0.5s; box-shadow: #000 0em 0em 0em; } .so-extraslider .extraslider-inner .item-wrap.style3:hover .item-related, .so-extraslider .extraslider-inner .item-wrap.style3:hover .item-description { -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s; box-shadow: #000 0em 0em 0em; } .so-extraslider .extraslider-inner .item-wrap.style3:hover .item-price, .so-extraslider .extraslider-inner .item-wrap.style3:hover .item-readmore { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; box-shadow: #000 0em 0em 0em; } .so-extraslider .extraslider-inner .item-wrap.style3 .item-readmore { display: inline-block; text-decoration: none; padding: 10px 14px; background: #f7f7f7 linear-gradient(to bottom, #f7f7f7 0%, #ededed 100%) repeat-x scroll 0 0; border: 1px solid #fff; -webkit-box-shadow: 0 0 1px #000; -moz-box-shadow: 0 0 1px #000; box-shadow: 0 0 1px #000; -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /*####################### item-style4 ##########################*/ .so-extraslider .extraslider-inner .item-wrap.style4 { position: relative; } .so-extraslider .extraslider-inner .item-wrap.style4 .item-info { position: absolute; top: 0; left: 0; height: 100%; text-align: center; padding: 0; background: url(../images/bg-white.png); top: -100%; -webkit-transition: all 0.3s ease-out 0.5s; -moz-transition: all 0.3s ease-out 0.5s; -o-transition: all 0.3s ease-out 0.5s; -ms-transition: all 0.3s ease-out 0.5s; transition: all 0.3s ease-out 0.5s; z-index:3; } .so-extraslider .extraslider-inner .item-wrap.style4 .item-title { background: #333; color: #FFFFFF; font-size: 17px; padding: 7px; position: relative; text-align: center; text-transform: uppercase; -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); -o-transform: translateY(-200%); -ms-transform: translateY(-200%); transform: translateY(-200%); -webkit-transition: all 0.2s ease-in-out 0.1s; -moz-transition: all 0.2s ease-in-out 0.1s; -o-transition: all 0.2s ease-in-out 0.1s; -ms-transition: all 0.2s ease-in-out 0.1s; transition: all 0.2s ease-in-out 0.1s; } .so-extraslider .extraslider-inner .item-wrap.style4 .item-related, .so-extraslider .extraslider-inner .item-wrap.style4 .item-related h4, .so-extraslider .extraslider-inner .item-wrap.style4 .item-related ul a { color: #333; } .so-extraslider .extraslider-inner .item-wrap.style4 .item-price, .so-extraslider .extraslider-inner .item-wrap.style4 .item-description { text-align: left; color: #333; -webkit-transform: translateY(-500%); -moz-transform: translateY(-500%); -o-transform: translateY(-500%); -ms-transform: translateY(-500%); transform: translateY(-500%); -webkit-transition: all 0.2s ease-in-out 0.2s; -moz-transition: all 0.2s ease-in-out 0.2s; -o-transition: all 0.2s ease-in-out 0.2s; -ms-transition: all 0.2s ease-in-out 0.2s; transition: all 0.2s ease-in-out 0.2s; } .so-extraslider .extraslider-inner .item-wrap.style4 .item-price { text-align: center; color: #F30000; } .so-extraslider .extraslider-inner .item-wrap.style4 .item-tags { text-align: left; color: #333; -webkit-transform: translateY(-700%); -moz-transform: translateY(-700%); -o-transform: translateY(-700%); -ms-transform: translateY(-700%); transform: translateY(-700%); -webkit-transition: all 0.2s ease-in-out 0.2s; -moz-transition: all 0.2s ease-in-out 0.2s; -o-transition: all 0.2s ease-in-out 0.2s; -ms-transition: all 0.2s ease-in-out 0.2s; transition: all 0.2s ease-in-out 0.2s; } .so-extraslider .extraslider-inner .item-wrap.style4 .item-tags a { color: #333; } .so-extraslider .extraslider-inner .item-wrap.style4 .item-readmore { background: none repeat scroll 0 0 #000000; box-shadow: 0 0 1px #000000; color: #FFFFFF; display: inline-block; padding: 10px 12px; text-decoration: none; -webkit-transform: translateY(-1000%); -moz-transform: translateY(-1000%); -o-transform: translateY(-1000%); -ms-transform: translateY(-1000%); transform: translateY(-1000%); -webkit-transition: all 0.2s ease-in-out 0.3s; -moz-transition: all 0.2s ease-in-out 0.3s; -o-transition: all 0.2s ease-in-out 0.3s; -ms-transition: all 0.2s ease-in-out 0.3s; transition: all 0.2s ease-in-out 0.3s; } .so-extraslider .extraslider-inner .item-wrap.style4:hover .item-info { top: 0px; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; -webkit-animation: bounceY 0.9s linear; -moz-animation: bounceY 0.9s linear; -ms-animation: bounceY 0.9s linear; animation: bounceY 0.9s linear; } .so-extraslider .extraslider-inner .item-wrap.style4:hover .item-title { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } .so-extraslider .extraslider-inner .item-wrap.style4:hover .item-description { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } .so-extraslider .extraslider-inner .item-wrap.style4:hover .item-tags { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } .so-extraslider .extraslider-inner .item-wrap.style4:hover .item-price, .so-extraslider .extraslider-inner .item-wrap.style4:hover .item-readmore { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; } .so-extraslider .extraslider-inner .item-wrap.style4 .item-readmore a { color: #FFF; font-size: 14px; } .so-extraslider .extraslider-inner .item-wrap.style4 .item-title a { color: #FFF; text-transform: uppercase; font-weight: bold; } /*####################### item-style5 ##########################*/ .so-extraslider .extraslider-inner .item-wrap.style5 { position: relative; } .so-extraslider .extraslider-inner .item-wrap.style5 img { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; box-shadow: #000 0em 0em 0em; } .so-extraslider .extraslider-inner .item-wrap.style5 .item-info { text-align: center; position: absolute; top: 0; left: 0; height: 100%; background: #333; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; color: #fff; z-index:3; } .so-extraslider .extraslider-inner .item-wrap.style5 .item-title { text-transform: uppercase; border-bottom: #666 solid 1px; background: transparent; margin: 10px 10px 0 10px; padding-bottom: 7px; font-weight: bold; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); color: #333; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } .so-extraslider .extraslider-inner .item-wrap.style5 .item-description { text-align: left; color: #FFF; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; } .so-extraslider .extraslider-inner .item-wrap.style5 .item-readmore { text-align: center; padding: 10px 14px; background: #f7f7f7 linear-gradient(to bottom, #f7f7f7 0%, #ededed 100%) repeat-x scroll 0 0; border: 1px solid #fff; box-shadow: 0 0 1px #000000; color: #FFFFFF; display: inline-block; filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; } .so-extraslider .extraslider-inner .item-wrap.style5:hover img { -webkit-transform: scale(10); -moz-transform: scale(10); -o-transform: scale(10); -ms-transform: scale(10); transform: scale(10); filter: alpha(opacity=0); opacity: 0; box-shadow: #000 0em 0em 0em; } .so-extraslider .extraslider-inner .item-wrap.style5:hover .item-info { filter: alpha(opacity=100); opacity: 1; } .so-extraslider .extraslider-inner .item-wrap.style5:hover .item-price, .so-extraslider .extraslider-inner .item-wrap.style5:hover .item-title, .so-extraslider .extraslider-inner .item-wrap.style5:hover .item-description, .so-extraslider .extraslider-inner .item-wrap.style5:hover .item-readmore { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); filter: alpha(opacity=100); opacity: 1; } .so-extraslider .extraslider-inner .item-wrap.style5 .item-readmore a { color: #000; font-weight: bold; font-size: 14px; } .so-extraslider .extraslider-inner .item-wrap.style5 .item-title a { color: #FFF; margin-top: 7px; } /*####################### item-style6 ##########################*/ .so-extraslider .extraslider-inner .item-wrap.style6 { position: relative; } .so-extraslider .extraslider-inner .item-wrap.style6 img { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; box-shadow: #000 0em 0em 0em; } .so-extraslider .extraslider-inner .item-wrap.style6 .item-info { position: absolute; top: 0; left: 0; height: 100%; padding: 0; text-align: center; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; background-color: rgba(0, 0, 0, 0.7); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; color: #fff; z-index:3; } .so-extraslider .extraslider-inner .item-wrap.style6 .item-info .item-content { padding: 5px; } .so-extraslider .extraslider-inner .item-wrap.style6 .item-title { background: #FFF; opacity: 0.5; filter: alpha(opacity=50); font-size: 17px; padding: 5px; margin-top: 5%; text-align: center; text-transform: uppercase; -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -o-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .so-extraslider .extraslider-inner .item-wrap.style6 .item-price, .so-extraslider .extraslider-inner .item-wrap.style6 .item-description { text-align: left; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -o-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .so-extraslider .extraslider-inner .item-wrap.style6:hover img { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); box-shadow: #000 0em 0em 0em; } .so-extraslider .extraslider-inner .item-wrap.style6 .item-readmore { padding: 10px 14px; background: #f7f7f7 linear-gradient(to bottom, #f7f7f7 0%, #ededed 100%) repeat-x scroll 0 0; border: 1px solid #fff; box-shadow: 0 0 1px #000000; color: #FFFFFF; display: inline-block; text-align: center; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .so-extraslider .extraslider-inner .item-wrap.style6:hover .item-info { filter: alpha(opacity=100); opacity: 1; } .so-extraslider .extraslider-inner .item-wrap.style6:hover .item-price, .so-extraslider .extraslider-inner .item-wrap.style6:hover .item-title, .so-extraslider .extraslider-inner .item-wrap.style6:hover .item-description, .so-extraslider .extraslider-inner .item-wrap.style6:hover .item-readmore { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .so-extraslider .extraslider-inner .item-wrap.style6:hover .item-price, .so-extraslider .extraslider-inner .item-wrap.style6:hover .item-description, .so-extraslider .extraslider-inner .item-wrap.style6:hover .item-readmore { filter: alpha(opacity=100); opacity: 1; } .so-extraslider .extraslider-inner .item-wrap.style6:hover .item-price, .so-extraslider .extraslider-inner .item-wrap.style6:hover .item-description { -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; transition-delay: 0.1s; } .so-extraslider .extraslider-inner .item-wrap.style6:hover .item-readmore { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } .so-extraslider .extraslider-inner .item-wrap.style6 .item-readmore a { color: #000; font-weight: bold; font-size: 14px; } .so-extraslider .extraslider-inner .item-wrap.style6 .item-title a { color: #000; text-transform: uppercase; font-weight: bold; } /*####################### item-style7 ##########################*/ .so-extraslider .extraslider-inner .item-wrap.style7 { position: relative; } .so-extraslider .extraslider-inner .item-wrap.style7 img { -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; filter: alpha(opacity=100); opacity: 1; box-shadow: #000 0em 0em 0em; } .so-extraslider .extraslider-inner .item-wrap.style7 .item-info { position: absolute; top: 0; left: 0; height: 100%; text-align: center; padding: 0; background-color: #333; -webkit-transform: rotate(0deg) scale(1); -moz-transform: rotate(0deg) scale(1); -o-transform: rotate(0deg) scale(1); -ms-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; color: #fff; z-index:3; } .so-extraslider .extraslider-inner .item-wrap.style7 .item-info .item-content { padding: 5px; } .so-extraslider .extraslider-inner .item-wrap.style7 .item-title { background: #FFF; opacity: 0.5; filter: alpha(opacity=50); font-size: 17px; margin-top: 5%; padding: 5px; text-align: center; text-transform: uppercase; -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .so-extraslider .extraslider-inner .item-wrap.style7 .item-price, .so-extraslider .extraslider-inner .item-wrap.style7 .item-description { text-align: left; -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .so-extraslider .extraslider-inner .item-wrap.style7 .item-readmore { padding: 10px 14px; background: #f7f7f7 linear-gradient(to bottom, #f7f7f7 0%, #ededed 100%) repeat-x scroll 0 0; border: 1px solid #fff; box-shadow: 0 0 1px #000000; color: #FFFFFF; display: inline-block; text-align: center; -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .so-extraslider .extraslider-inner .item-wrap.style7:hover img { -webkit-transform: rotate(720deg) scale(0); -moz-transform: rotate(720deg) scale(0); -o-transform: rotate(720deg) scale(0); -ms-transform: rotate(720deg) scale(0); transform: rotate(720deg) scale(0); filter: alpha(opacity=0); opacity: 0; box-shadow: #000 0em 0em 0em; } .so-extraslider .extraslider-inner .item-wrap.style7:hover .item-info { filter: alpha(opacity=100); opacity: 1; -webkit-transform: translateY(0px) rotate(0deg); -moz-transform: translateY(0px) rotate(0deg); -o-transform: translateY(0px) rotate(0deg); -ms-transform: translateY(0px) rotate(0deg); transform: translateY(0px) rotate(0deg); -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s; } .so-extraslider .extraslider-inner .item-wrap.style7:hover .item-title { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -o-transition-delay: 0.7s; -ms-transition-delay: 0.7s; transition-delay: 0.7s; } .so-extraslider .extraslider-inner .item-wrap.style7:hover .item-description { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; -ms-transition-delay: 0.6s; transition-delay: 0.6s; } .so-extraslider .extraslider-inner .item-wrap.style7:hover .item-price, .so-extraslider .extraslider-inner .item-wrap.style7:hover .item-readmore { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; -ms-transition-delay: 0.5s; transition-delay: 0.5s; } .so-extraslider .extraslider-inner .item-wrap.style7 .item-readmore a { color: #000; font-weight: bold; font-size: 14px; } .so-extraslider .extraslider-inner .item-wrap.style7 .item-title a { color: #000; text-transform: uppercase; font-weight: bold; } .so-extraslider .extraslider-inner .item-wrap.style7 .item-price, .so-extraslider .extraslider-inner .item-wrap.style6 .item-price { text-align: center; color: #F30000; } /*------------------------------------------------ Animation ---------------------------------------------*/ /*-- FadeIn ---*/ .so-extraslider .extraslider-inner[data-effect="fadeIn"] .owl2-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .so-extraslider .extraslider-inner[data-effect="fadeIn"].extra-animate .owl2-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } /*-- ZomIn --*/ .so-extraslider .extraslider-inner[data-effect="zoomIn"] .owl2-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .so-extraslider .extraslider-inner[data-effect="zoomIn"].extra-animate .owl2-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } /*-- ZomOut --*/ .so-extraslider .extraslider-inner[data-effect="zoomOut"] .owl2-item { opacity: 0; position: relative; -webkit-animation: zoomOut 600ms ease both; -webkit-animation-play-state: paused; -moz-animation: zoomOut 600ms ease both; -moz-animation-play-state: paused; -o-animation: zoomOut 600ms ease both; -o-animation-play-state: paused; animation: zoomOut 600ms ease both; animation-play-state: paused; } .so-extraslider .extraslider-inner[data-effect="zoomOut"].extra-animate .owl2-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } /*---- SlideLeft --*/ .so-extraslider .extraslider-inner[data-effect="slideLeft"] .owl2-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .so-extraslider .extraslider-inner[data-effect="slideLeft"].extra-animate .owl2-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } /*--- SlideRight --*/ .so-extraslider .extraslider-inner[data-effect="slideRight"] .owl2-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .so-extraslider .extraslider-inner[data-effect="slideRight"].extra-animate .owl2-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } /*--- SlideTop ---*/ .so-extraslider .extraslider-inner[data-effect="slideTop"] .owl2-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .so-extraslider .extraslider-inner[data-effect="slideTop"].extra-animate .owl2-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } /*--- SlideBottom --*/ .so-extraslider .extraslider-inner[data-effect="slideBottom"] .owl2-item { opacity: 0; position: relative; -webkit-animation: slideBottom 600ms ease both; -webkit-animation-play-state: paused; -moz-animation: slideBottom 600ms ease both; -moz-animation-play-state: paused; -o-animation: slideBottom 600ms ease both; -o-animation-play-state: paused; animation: slideBottom 600ms ease both; animation-play-state: paused; } .so-extraslider .extraslider-inner[data-effect="slideBottom"].extra-animate .owl2-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } /*--- Flip ---*/ .so-extraslider .extraslider-inner[data-effect="flip"] .owl2-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -webkit-backface-visibility: visible; -moz-animation-play-state: paused; -moz-backface-visibility: visible; -o-animation-play-state: paused; -o-backface-visibility: visible; animation-play-state: paused; backface-visibility: visible; } .so-extraslider .extraslider-inner[data-effect="flip"].extra-animate .owl2-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } /*--- FlipX ---*/ .so-extraslider .extraslider-inner[data-effect="flipInX"] .owl2-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -webkit-backface-visibility: visible; -moz-animation-play-state: paused; -moz-backface-visibility: visible; -o-animation-play-state: paused; -o-backface-visibility: visible; animation-play-state: paused; backface-visibility: visible; } .so-extraslider .extraslider-inner[data-effect="flipInX"].extra-animate .owl2-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } /*--- FlipY ---*/ .so-extraslider .extraslider-inner[data-effect="flipInY"] .owl2-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -webkit-backface-visibility: visible; -moz-animation-play-state: paused; -moz-backface-visibility: visible; -o-animation-play-state: paused; -o-backface-visibility: visible; animation-play-state: paused; backface-visibility: visible; } .so-extraslider .extraslider-inner[data-effect="flipInY"].extra-animate .owl2-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } /*--- BounceIn ---*/ .so-extraslider .extraslider-inner[data-effect="bounceIn"] .owl2-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .so-extraslider .extraslider-inner[data-effect="bounceIn"].extra-animate .owl2-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } /*--- BounceUp ---*/ .so-extraslider .extraslider-inner[data-effect="bounceInUp"] .owl2-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .so-extraslider .extraslider-inner[data-effect="bounceInUp"].extra-animate .owl2-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } /*--- BounceDown ---*/ .so-extraslider .extraslider-inner[data-effect="bounceInDown"] .owl2-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .so-extraslider .extraslider-inner[data-effect="bounceInDown"].extra-animate .owl2-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } /*--- Page Top --*/ .so-extraslider .extraslider-inner[data-effect="pageTop"] .owl2-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -webkit-transform-origin: 50% 0%; -moz-animation-play-state: paused; -moz-transform-origin: 50% 0%; -o-animation-play-state: paused; -o-transform-origin: 50% 0%; animation-play-state: paused; transform-origin: 50% 0%; } .so-extraslider .extraslider-inner[data-effect="pageTop"].extra-animate .owl2-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } /*-- PageBottom ---*/ .so-extraslider .extraslider-inner[data-effect="pageBottom"] .owl2-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -webkit-transform-origin: 50% 100%; -moz-animation-play-state: paused; -moz-transform-origin: 50% 100%; -o-animation-play-state: paused; -o-transform-origin: 50% 100%; animation-play-state: paused; transform-origin: 50% 100%; } .so-extraslider .extraslider-inner[data-effect="pageBottom"].extra-animate .owl2-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } /*-- StarWars ---*/ .so-extraslider .extraslider-inner[data-effect="starwars"] .owl2-item { opacity: 0; position: relative; -webkit-transform-origin: 50% 50%; -webkit-animation-play-state: paused; -moz-transform-origin: 50% 50%; -moz-animation-play-state: paused; -o-transform-origin: 50% 50%; -o-animation-play-state: paused; transform-origin: 50% 50%; animation-play-state: paused; } .so-extraslider .extraslider-inner[data-effect="starwars"].extra-animate .owl2-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; }