Файловый менеджер

Файловый менеджер - Редактировать - /home/digilove/public_html/modules/mod_sj_vm_extra_slider/assets/css/css3.css

Назад
.sj-extra-slider .extraslider-inner .item-wrap { overflow: hidden; } .sj-extra-slider .extraslider-inner .item-wrap .item-image { width: 100%; position: relative; overflow: hidden; } .sj-extra-slider .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; } .sj-extra-slider .extraslider-inner .item-wrap .item-image .item-img-info a.quick-view { display: none; } .sj-extra-slider .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; } .sj-extra-slider .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; } .sj-extra-slider .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; } .sj-extra-slider .extraslider-inner .item-wrap .item-image .quick-view-wrapper-mobile a:hover { background-color: rgba(125, 125, 125, 0.57); } .sj-extra-slider .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; } .sj-extra-slider .wishlist { margin: 10px 0px; } .sj-extra-slider .compare { margin-bottom: 10px; } .sj-extra-slider .extraslider-inner .item-wrap .item-image img { width: 100%; /max-width: 100%;/ border: 0; box-shadow: #000 0em 0em 0em; } .sj-extra-slider .extraslider-inner .item-wrap .item-info { /* padding: 10px; / width: 100%; } /-----------------style1----------------------------/ .sj-extra-slider .extraslider-inner .item-wrap.style1 .item-readmore{ } .sj-extra-slider .extraslider-inner .item-wrap.style2 .item-info { background: #333; } .sj-extra-slider .extraslider-inner .item-wrap .item-info .item-content { margin-bottom: 10px; } .sj-extra-slider .extraslider-inner .item-wrap .item-info .item-content .button-container { margin-top: 5px; } .sj-extra-slider .extraslider-inner .item-wrap .item-info .item-content .content_price .price-old{ text-decoration: line-through; } .sj-extra-slider .extraslider-inner .item-wrap .item-info .item-content .content_price { margin-bottom: 10px; font-size: 15px; } .sj-extra-slider .extraslider-inner .item-wrap .item-info .item-content .content_price span { color: #fff; } .sj-extra-slider .extraslider-inner .item-wrap .item-info .item-content .button-container .lnk_view span { color: #000; } .sj-extra-slider .extraslider-inner .item-wrap .item-info .item-title a { text-transform: uppercase; font-size: 16px; } .sj-extra-slider .extraslider-inner .item-wrap.style3 .item-info{ color: #fff; } .sj-extra-slider .extraslider-inner .item-wrap.style3 .item-info .item-content .item-des p, .sj-extra-slider .extraslider-inner .item-wrap.style5 .item-info .item-content .item-des p, .sj-extra-slider .extraslider-inner .item-wrap.style6 .item-info .item-content .item-des p, .sj-extra-slider .extraslider-inner .item-wrap.style7 .item-info .item-content .item-des p { color: #fff; margin-top: 5px; } .sj-extra-slider .extraslider-inner .item-wrap.style4 .item-info{ color: #fff; } .sj-extra-slider .extraslider-inner .item-wrap.style4 .item-info .item-content .item-des { margin-top: 10px; color: #000; } .sj-extra-slider .extraslider-inner .item-wrap.style4 .item-info a { color: #000; } .sj-extra-slider .extraslider-inner .item-wrap.style4 .item-info .item-content .ajax_add_to_cart_button span { color: #fff; } .sj-extra-slider .extraslider-inner .item-wrap.style4 .item-info .item-content .content_price span { color: #000; } .sj-extra-slider .extraslider-inner .item-wrap.style4 .item-info .item-content .wishlist, .sj-extra-slider .extraslider-inner .item-wrap.style4 .item-info .item-content .compare { color: #000; } .sj-extra-slider .extraslider-inner .item-wrap.style2 .item-info .item-content { margin-bottom: 10px; } .sj-extra-slider .extraslider-inner .item-wrap.style1 .item-info .item-title { padding: 10px 0; font-weight: bold; margin-bottom: 0px; text-transform: uppercase; font-size: 16px; } .sj-extra-slider .extraslider-inner .item-wrap.style1 .item-info .item-title a:hover { text-decoration: none; } .sj-extra-slider .extraslider-inner .item-wrap.style1 .item-info .item-title, .sj-extra-slider .extraslider-inner .item-wrap.style2 .item-info .item-title { padding: 10px; font-weight: bold; } .sj-extra-slider .extraslider-inner .item-wrap.style1 .item-info .item-title + .item-content, .sj-extra-slider .extraslider-inner .item-wrap.style2 .item-info .item-title + .item-content { margin-top: 0px; } .sj-extra-slider .extraslider-inner .item-wrap .item-info .item-description { color: #fff; } .sj-extra-slider .extraslider-inner .item-wrap .item-info .item-readmore { text-align: right; margin-right: 15px; font-size: 14px; } /####################### item-style3 ##########################/ .sj-extra-slider .extraslider-inner .item-wrap.style3 { position: relative; } .sj-extra-slider .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; } .sj-extra-slider .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; } .sj-extra-slider .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; } .sj-extra-slider .extraslider-inner .item-wrap.style3 .item-readmore a{ color: #000; font-weight: bold; font-size: 14px; } .sj-extra-slider .extraslider-inner .item-wrap.style3 .item-title a { color: #fff; font-weight: bold; font-size: 16px; } .sj-extra-slider .item .item-wrap.style3 .item-related, .sj-extra-slider .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; } .sj-extra-slider .extraslider-inner .item-wrap.style3 .item-price { text-align: center; } .sj-extra-slider .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; } .sj-extra-slider .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; } .sj-extra-slider .extraslider-inner .item-wrap.style3:hover .item-related, .sj-extra-slider .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; } .sj-extra-slider .extraslider-inner .item-wrap.style3:hover .item-price, .sj-extra-slider .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; } .sj-extra-slider .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; background: #fff; } /####################### item-style4 ##########################/ .sj-extra-slider .extraslider-inner .item-wrap.style4 { position: relative; } .sj-extra-slider .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; } .sj-extra-slider .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; } .sj-extra-slider .extraslider-inner .item-wrap.style4 .item-related, .sj-extra-slider .extraslider-inner .item-wrap.style4 .item-related h4, .sj-extra-slider .extraslider-inner .item-wrap.style4 .item-related ul a { color: #333; } .sj-extra-slider .extraslider-inner .item-wrap.style4 .item-price, .sj-extra-slider .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; } .sj-extra-slider .extraslider-inner .item-wrap.style4 .item-price { text-align: center; color: #F30000; } .sj-extra-slider .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; } .sj-extra-slider .extraslider-inner .item-wrap.style4 .item-tags a { color: #333; } .sj-extra-slider .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; } .sj-extra-slider .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; } .sj-extra-slider .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; } .sj-extra-slider .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; } .sj-extra-slider .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; } .sj-extra-slider .extraslider-inner .item-wrap.style4:hover .item-price, .sj-extra-slider .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; } .sj-extra-slider .extraslider-inner .item-wrap.style4 .item-readmore a { color: #FFF; font-size: 14px; } .sj-extra-slider .extraslider-inner .item-wrap.style4 .item-title a { color: #FFF; text-transform: uppercase; font-weight: bold; } @keyframes bounceY { 0% { transform: translateY(-103%); } 40% { transform: translateY(-50%); } 65% { transform: translateY(-25%); } 82% { transform: translateY(-12%); } 92% { transform: translateY(-5%); } 55%, 75%, 87%, 97%, 100% { transform: translateY(0%); } } @-moz-keyframes bounceY { 0% { -moz-transform: translateY(-1023%); } 40% { -moz-transform: translateY(-50%); } 65% { -moz-transform: translateY(-25%); } 82% { -moz-transform: translateY(-12%); } 92% { -moz-transform: translateY(-5%); } 55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0%); } } @-webkit-keyframes bounceY { 0% { -webkit-transform: translateY(-103%); } 40% { -webkit-transform: translateY(-50%); } 65% { -webkit-transform: translateY(-25%); } 82% { -webkit-transform: translateY(-12%); } 92% { -webkit-transform: translateY(-5%); } 55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0%); } } /####################### item-style5 ##########################/ .sj-extra-slider .extraslider-inner .item-wrap.style5 { position: relative; } .sj-extra-slider .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; } .sj-extra-slider .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; } .sj-extra-slider .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; } .sj-extra-slider .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; } .sj-extra-slider .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; background: #fff; 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; } .sj-extra-slider .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; } .sj-extra-slider .extraslider-inner .item-wrap.style5:hover .item-info { filter: alpha(opacity=100); opacity: 1; } .sj-extra-slider .extraslider-inner .item-wrap.style5:hover .item-price, .sj-extra-slider .extraslider-inner .item-wrap.style5:hover .item-title, .sj-extra-slider .extraslider-inner .item-wrap.style5:hover .item-description, .sj-extra-slider .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; } .sj-extra-slider .extraslider-inner .item-wrap.style5 .item-readmore a { color: #000; font-weight: bold; font-size: 14px; } .sj-extra-slider .extraslider-inner .item-wrap.style5 .item-title a { color: #FFF; margin-top: 7px; } /####################### item-style6 ##########################/ .sj-extra-slider .extraslider-inner .item-wrap.style6 { position: relative; } .sj-extra-slider .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; } .sj-extra-slider .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; } .sj-extra-slider .extraslider-inner .item-wrap.style6 .item-info .item-content { padding: 5px; } .sj-extra-slider .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; } .sj-extra-slider .extraslider-inner .item-wrap.style6 .item-price, .sj-extra-slider .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; } .sj-extra-slider .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; } .sj-extra-slider .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; background: #fff; 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; } .sj-extra-slider .extraslider-inner .item-wrap.style6:hover .item-info { filter: alpha(opacity=100); opacity: 1; } .sj-extra-slider .extraslider-inner .item-wrap.style6:hover .item-price, .sj-extra-slider .extraslider-inner .item-wrap.style6:hover .item-title, .sj-extra-slider .extraslider-inner .item-wrap.style6:hover .item-description, .sj-extra-slider .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); } .sj-extra-slider .extraslider-inner .item-wrap.style6:hover .item-price, .sj-extra-slider .extraslider-inner .item-wrap.style6:hover .item-description, .sj-extra-slider .extraslider-inner .item-wrap.style6:hover .item-readmore { filter: alpha(opacity=100); opacity: 1; } .sj-extra-slider .extraslider-inner .item-wrap.style6:hover .item-price, .sj-extra-slider .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; } .sj-extra-slider .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; } .sj-extra-slider .extraslider-inner .item-wrap.style6 .item-readmore a { color: #000; font-weight: bold; font-size: 14px; } .sj-extra-slider .extraslider-inner .item-wrap.style6 .item-title a { color: #000; text-transform: uppercase; font-weight: bold; } /####################### item-style7 ##########################/ .sj-extra-slider .extraslider-inner .item-wrap.style7 { position: relative; } .sj-extra-slider .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; } .sj-extra-slider .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; } .sj-extra-slider .extraslider-inner .item-wrap.style7 .item-info .item-content { padding: 5px; } .sj-extra-slider .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; } .sj-extra-slider .extraslider-inner .item-wrap.style7 .item-price, .sj-extra-slider .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; } .sj-extra-slider .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; background: #fff; -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; } .sj-extra-slider .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; } .sj-extra-slider .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; } .sj-extra-slider .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; } .sj-extra-slider .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; } .sj-extra-slider .extraslider-inner .item-wrap.style7:hover .item-price, .sj-extra-slider .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; } .sj-extra-slider .extraslider-inner .item-wrap.style7 .item-readmore a { color: #000; font-weight: bold; font-size: 14px; } .sj-extra-slider .extraslider-inner .item-wrap.style7 .item-title a { color: #000; text-transform: uppercase; font-weight: bold; } .sj-extra-slider .extraslider-inner .item-wrap.style7 .item-price, .sj-extra-slider .extraslider-inner .item-wrap.style6 .item-price { text-align: center; color: #F30000; } /------------------------------------------------ Animation ---------------------------------------------/ /-- FadeIn ---/ .sj-extra-slider .extraslider-inner[data-effect="fadeIn"] .owl-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .sj-extra-slider .extraslider-inner[data-effect="fadeIn"].extra-animate .owl-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /-- ZomIn --/ .sj-extra-slider .extraslider-inner[data-effect="zoomIn"] .owl-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .sj-extra-slider .extraslider-inner[data-effect="zoomIn"].extra-animate .owl-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale(1.8); } 100% { opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes zoomIn { 0% { opacity: 0; -moz-transform: scale(1.8); } 100% { opacity: 1; -moz-transform: scale(1); } } @-o-keyframes zoomIn { 0% { opacity: 0; -o-transform: scale(1.8); } 100% { opacity: 1; -o-transform: scale(1); } } @keyframes zoomIn { 0% { opacity: 0; transform: scale(1.8); } 100% { opacity: 1; transform: scale(1); } } /-- ZomOut --/ .sj-extra-slider .extraslider-inner[data-effect="zoomOut"] .owl-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; } .sj-extra-slider .extraslider-inner[data-effect="zoomOut"].extra-animate .owl-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes zoomOut { 0% { opacity: 0; -webkit-transform: scale(.6); } 100% { opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes zoomOut { 0% { opacity: 0; -moz-transform: scale(.6); } 100% { opacity: 1; -moz-transform: scale(1); } } @-o-keyframes zoomOut { 0% { opacity: 0; -o-transform: scale(.6); } 100% { opacity: 1; -o-transform: scale(1); } } @keyframes zoomOut { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } } /---- SlideLeft --/ .sj-extra-slider .extraslider-inner[data-effect="slideLeft"] .owl-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .sj-extra-slider .extraslider-inner[data-effect="slideLeft"].extra-animate .owl-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes slideLeft { 0% { opacity: 0; left: -30px; } 100% { opacity: 1; left: 0; } } @-moz-keyframes slideLeft { 0% { opacity: 0; left: -30px; } 100% { opacity: 1; left: 0; } } @-o-keyframes slideLeft { 0% { opacity: 0; left: -30px; } 100% { opacity: 1; left: 0; } } @keyframes slideLeft { 0% { opacity: 0; left: -30px; } 100% { opacity: 1; left: 0; } } /--- SlideRight --/ .sj-extra-slider .extraslider-inner[data-effect="slideRight"] .owl-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .sj-extra-slider .extraslider-inner[data-effect="slideRight"].extra-animate .owl-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes slideRight { 0% { opacity: 0; left: 30px; } 100% { opacity: 1; left: 0; } } @-moz-keyframes slideRight { 0% { opacity: 0; left: 30px; } 100% { opacity: 1; left: 0; } } @-o-keyframes slideRight { 0% { opacity: 0; left: 30px; } 100% { opacity: 1; left: 0; } } @keyframes slideRight { 0% { opacity: 0; left: 30px; } 100% { opacity: 1; left: 0; } } /--- SlideTop ---/ .sj-extra-slider .extraslider-inner[data-effect="slideTop"] .owl-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .sj-extra-slider .extraslider-inner[data-effect="slideTop"].extra-animate .owl-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes slideTop { 0% { opacity: 0; top: -30px; } 100% { opacity: 1; top: 0; } } @-moz-keyframes slideTop { 0% { opacity: 0; top: -30px; } 100% { opacity: 1; top: 0; } } @-o-keyframes slideTop { 0% { opacity: 0; top: -30px; } 100% { opacity: 1; top: 0; } } @keyframes slideTop { 0% { opacity: 0; top: -30px; } 100% { opacity: 1; top: 0; } } /--- SlideBottom --/ .sj-extra-slider .extraslider-inner[data-effect="slideBottom"] .owl-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; } .sj-extra-slider .extraslider-inner[data-effect="slideBottom"].extra-animate .owl-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes slideBottom { 0% { opacity: 0; top: 30px; } 100% { opacity: 1; top: 0; } } @-moz-keyframes slideBottom { 0% { opacity: 0; top: 30px; } 100% { opacity: 1; top: 0; } } @-o-keyframes slideBottom { 0% { opacity: 0; top: 30px; } 100% { opacity: 1; top: 0; } } @keyframes slideBottom { 0% { opacity: 0; top: 30px; } 100% { opacity: 1; top: 0; } } /--- Flip ---/ .sj-extra-slider .extraslider-inner[data-effect="flip"] .owl-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; } .sj-extra-slider .extraslider-inner[data-effect="flip"].extra-animate .owl-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes flip { 0% { opacity: 0; -webkit-transform: perspective(500px) rotateY(0deg); -webkit-animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(500px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(500px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(500px) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; } 100% { opacity: 1; -webkit-transform: perspective(500px) scale(1); -webkit-animation-timing-function: ease-in; } } @-moz-keyframes flip { 0% { opacity: 0; -moz-transform: perspective(500px) rotateY(0deg); -moz-animation-timing-function: ease-out; } 40% { -moz-transform: perspective(500px) translateZ(150px) rotateY(170deg); -moz-animation-timing-function: ease-out; } 50% { -moz-transform: perspective(500px) translateZ(150px) rotateY(190deg) scale(1); -moz-animation-timing-function: ease-in; } 80% { -moz-transform: perspective(500px) rotateY(360deg) scale(.95); -moz-animation-timing-function: ease-in; } 100% { opacity: 1; -moz-transform: perspective(500px) scale(1); -moz-animation-timing-function: ease-in; } } @-o-keyframes flip { 0% { opacity: 0; -o-transform: perspective(500px) rotateY(0deg); -o-animation-timing-function: ease-out; } 40% { -o-transform: perspective(500px) translateZ(150px) rotateY(170deg); -o-animation-timing-function: ease-out; } 50% { -o-transform: perspective(500px) translateZ(150px) rotateY(190deg) scale(1); -o-animation-timing-function: ease-in; } 80% { -o-transform: perspective(500px) rotateY(360deg) scale(.95); -o-animation-timing-function: ease-in; } 100% { opacity: 1; -o-transform: perspective(500px) scale(1); -o-animation-timing-function: ease-in; } } @keyframes flip { 0% { opacity: 0; transform: perspective(500px) rotateY(0deg); animation-timing-function: ease-out; } 40% { transform: perspective(500px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; } 50% { transform: perspective(500px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; } 80% { transform: perspective(500px) rotateY(360deg) scale(.95); animation-timing-function: ease-in; } 100% { opacity: 1; transform: perspective(500px) scale(1); animation-timing-function: ease-in; } } /--- FlipX ---/ .sj-extra-slider .extraslider-inner[data-effect="flipInX"] .owl-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; } .sj-extra-slider .extraslider-inner[data-effect="flipInX"].extra-animate .owl-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes flipInX { 0% { opacity: 0; -webkit-transform: perspective(400px) rotateX(85deg); } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); } 70% { -webkit-transform: perspective(400px) rotateX(15deg); } 90% { -webkit-transform: perspective(400px) rotateX(-5deg); } 100% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); } } @-moz-keyframes flipInX { 0% { opacity: 0; -moz-transform: perspective(400px) rotateX(85deg); } 40% { -moz-transform: perspective(400px) rotateX(-20deg); } 70% { -moz-transform: perspective(400px) rotateX(15deg); } 90% { -moz-transform: perspective(400px) rotateX(-5deg); } 100% { opacity: 1; -moz-transform: perspective(400px) rotateX(0deg); } } @-o-keyframes flipInX { 0% { opacity: 0; -o-transform: perspective(400px) rotateX(85deg); } 40% { -o-transform: perspective(400px) rotateX(-20deg); } 70% { -o-transform: perspective(400px) rotateX(15deg); } 90% { -o-transform: perspective(400px) rotateX(-5deg); } 100% { opacity: 1; -o-transform: perspective(400px) rotateX(0deg); } } @keyframes flipInX { 0% { opacity: 0; transform: perspective(400px) rotateX(85deg); } 40% { transform: perspective(400px) rotateX(-20deg); } 70% { transform: perspective(400px) rotateX(15deg); } 90% { transform: perspective(400px) rotateX(-5deg); } 100% { opacity: 1; transform: perspective(400px) rotateX(0deg); } } /--- FlipY ---/ .sj-extra-slider .extraslider-inner[data-effect="flipInY"] .owl-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; } .sj-extra-slider .extraslider-inner[data-effect="flipInY"].extra-animate .owl-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes flipInY { 0% { opacity: 0; -webkit-transform: perspective(400px) rotateY(80deg); } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); } 90% { -webkit-transform: perspective(400px) rotateY(-5deg); } 100% { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg); } } @-moz-keyframes flipInY { 0% { opacity: 0; -moz-transform: perspective(400px) rotateY(80deg); } 40% { -moz-transform: perspective(400px) rotateY(-20deg); } 70% { -moz-transform: perspective(400px) rotateY(10deg); } 90% { -moz-transform: perspective(400px) rotateY(-5deg); } 100% { opacity: 1; -moz-transform: perspective(400px) rotateY(0deg); } } @-o-keyframes flipInY { 0% { opacity: 0; -o-transform: perspective(400px) rotateY(80deg); } 40% { -o-transform: perspective(400px) rotateY(-20deg); } 70% { -o-transform: perspective(400px) rotateY(10deg); } 90% { -o-transform: perspective(400px) rotateY(-5deg); } 100% { opacity: 1; -o-transform: perspective(400px) rotateY(0deg); } } @keyframes flipInY { 0% { opacity: 0; -webkit-transform: perspective(400px) rotateY(80deg); } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); } 90% { -webkit-transform: perspective(400px) rotateY(-5deg); } 100% { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg); } } /--- BounceIn ---/ .sj-extra-slider .extraslider-inner[data-effect="bounceIn"] .owl-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .sj-extra-slider .extraslider-inner[data-effect="bounceIn"].extra-animate .owl-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(.3); } 50% { -moz-transform: scale(1.05); } 70% { -moz-transform: scale(.9); } 100% { opacity: 1; -moz-transform: scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -o-transform: scale(.3); } 50% { -o-transform: scale(1.05); } 70% { -o-transform: scale(.9); } 100% { opacity: 1; -o-transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(.3); } 50% { transform: scale(1.05); } 70% { transform: scale(.9); } 100% { opacity: 1; transform: scale(1); } } /--- BounceUp ---/ .sj-extra-slider .extraslider-inner[data-effect="bounceInUp"] .owl-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .sj-extra-slider .extraslider-inner[data-effect="bounceInUp"].extra-animate .owl-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 60% { -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -moz-transform: translateY(2000px); } 60% { -moz-transform: translateY(-30px); } 80% { -moz-transform: translateY(10px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes bounceInUp { 0% { opacity: 0; -o-transform: translateY(2000px); } 60% { -o-transform: translateY(-30px); } 80% { -o-transform: translateY(10px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(2000px); } 60% { transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } /--- BounceDown ---/ .sj-extra-slider .extraslider-inner[data-effect="bounceInDown"] .owl-item { opacity: 0; position: relative; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .sj-extra-slider .extraslider-inner[data-effect="bounceInDown"].extra-animate .owl-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 60% { -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes bounceInDown { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 60% { -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes bounceInDown { 0% { opacity: 0; -o-transform: translateY(-2000px); } 60% { -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-2000px); } 60% { transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } /--- Page Top --/ .sj-extra-slider .extraslider-inner[data-effect="pageTop"] .owl-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%; } .sj-extra-slider .extraslider-inner[data-effect="pageTop"].extra-animate .owl-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes pageTop { 0% { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); } 100% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); } } @-moz-keyframes pageTop { 0% { opacity: 0; -moz-transform: perspective(400px) rotateX(90deg); } 100% { opacity: 1; -moz-transform: perspective(400px) rotateX(0deg); } } @-o-keyframes pageTop { 0% { opacity: 0; -o-transform: perspective(400px) rotateX(90deg); } 100% { opacity: 1; -o-transform: perspective(400px) rotateX(0deg); } } @keyframes pageTop { 0% { opacity: 0; transform: perspective(400px) rotateX(90deg); } 100% { opacity: 1; transform: perspective(400px) rotateX(0deg); } } /-- PageBottom ---/ .sj-extra-slider .extraslider-inner[data-effect="pageBottom"] .owl-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%; } .sj-extra-slider .extraslider-inner[data-effect="pageBottom"].extra-animate .owl-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes pageBottom { 0% { opacity: 0; -webkit-transform: perspective(400px) rotateX(-90deg); } 100% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); } } @-moz-keyframes pageBottom { 0% { opacity: 0; -moz-transform: perspective(400px) rotateX(-90deg); } 100% { opacity: 1; -moz-transform: perspective(400px) rotateX(0deg); } } @-o-keyframes pageBottom { 0% { opacity: 0; -o-transform: perspective(400px) rotateX(-90deg); } 100% { opacity: 1; -o-transform: perspective(400px) rotateX(0deg); } } @keyframes pageBottom { 0% { opacity: 0; transform: perspective(400px) rotateX(-90deg); } 100% { opacity: 1; transform: perspective(400px) rotateX(0deg); } } /-- StarWars ---*/ .sj-extra-slider .extraslider-inner[data-effect="starwars"] .owl-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; } .sj-extra-slider .extraslider-inner[data-effect="starwars"].extra-animate .owl-item { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes starwars { 0% { opacity: 0; -webkit-transform: perspective(200px) scale(3) translateY(180px) rotateX(80deg); } 80% { opacity: 1; -webkit-transform: perspective(200px) scale(1) rotateX(60deg) } 100% { opacity: 1; -webkit-transform: perspective(200px) scale(1) rotateX(0deg) } } @-moz-keyframes starwars { 0% { opacity: 0; -moz-transform: perspective(200px) scale(3) translateY(180px) rotateX(80deg); } 80% { opacity: 1; -moz-transform: perspective(200px) scale(1) rotateX(60deg) } 100% { opacity: 1; -moz-transform: perspective(200px) scale(1) rotateX(0deg) } } @-o-keyframes starwars { 0% { opacity: 0; -o-transform: perspective(200px) scale(3) translateY(180px) rotateX(80deg); } 80% { opacity: 1; -o-transform: perspective(200px) scale(1) rotateX(60deg) } 100% { opacity: 1; -o-transform: perspective(200px) scale(1) rotateX(0deg) } } @keyframes starwars { 0% { opacity: 0; transform: perspective(200px) scale(3) translateY(180px) rotateX(80deg); } 80% { opacity: 1; transform: perspective(200px) scale(1) rotateX(60deg) } 100% { opacity: 1; transform: perspective(200px) scale(1) rotateX(0deg) } }

| ver. 1.4 | Github | . | PHP 7.4.33 | Генерация страницы: 0 | proxy | phpinfo | Настройка