/* * jQuery FlexSlider v1.8 * http://flex.madebymufffin.com * * Copyright 2011, Tyler Smith * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ #container {width: 80%; max-width: 800px; margin: 0 auto;} /* Browser Resets */ .flex-container a:active, .flexslider a:active {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .flexslider {width: 100%; margin: 0; padding: 0;} .flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {max-width: 100%; display: block; width:100%; } .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* FlexSlider Default Theme *********************************/ .flexslider { position: relative; zoom: 1; text-align:center; } .flexslider::after{ background:url(../images/spinner.gif) no-repeat center center; content:""; display:inline-block; width:50px; height:50px;position: absolute;top: 42%;left: 50%; } .flexslider .slides {zoom: 1;} .flexslider .slides > li {position: relative;} /* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */ .flex-container {zoom: 1; position: relative;} .flexslider .slides li { /*height:642px; background-repeat:no-repeat; background-position:center; background-size:cover;*/ } .flexslider .slides li img { width:100%; float:left; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease;} /* Caption style */ /* IE rgba() hack */ .flex-caption, .flex-caption { zoom: 1; } .flex-caption { background:url(../images/banner-caption-bg.png) no-repeat;position: absolute; text-align: center; top: 90px;width:490px; padding:0px; text-align:center; right:0;padding: 25px 0px;right: -55px;} .flex-caption h1 { clear:left; font-size:43px; color:#fff; line-height: 45px;letter-spacing: 4px; padding:0px;font-family: 'the_heart_of_everything_demRg';} .flex-caption p{font-size:19px; color:#fff; line-height: 25px;letter-spacing: 1px;} /* Direction Nav */ .flex-direction-nav li a {width:27px; height:28px; display: block; z-index:100; background: url(../images/flex-arw.png) no-repeat 0 0; position: absolute; top: 46%; cursor: pointer; text-indent: -99999px;} .flex-direction-nav li .flex-next {background-position:-28px 0; right:45px;} .flex-direction-nav li .flex-prev {left:45px;} .flex-direction-nav li .flex-next:hover {background-position:-28px -31px; } .flex-direction-nav li .flex-prev:hover {background-position:0 -31px;} .flex-direction-nav li .disabled {opacity:.3; filter:alpha(opacity=30); cursor: default;} /* Control Nav */ .flex-control-nav {width: 100%; position: absolute; bottom:20px; z-index:100; text-align:center; } .flex-control-nav li {margin:0 4px; display: inline-block; zoom: 1; *display: inline;} .flex-control-nav li a {width:7px; height:7px; display: block; font-size:0px; line-height:0px; cursor: pointer; text-indent: -99999px;border-radius:50px; background:#e4e4e4} .flex-control-nav li a:hover, .flex-control-nav li a.flex-active { background:#f2f2f2;} .flexslider .slides { overflow: hidden; } .flex-caption h1 { -webkit-transform: translateX(400px); -moz-transform: translateX(400px); transform: translateX(400px); opacity:0; } .flex-caption p { -webkit-transform: translateX(500px); -moz-transform: translateX(500px); transform: translateX(500px); opacity:0;font-family: 'Geogrotesque-Medium'; } .flex-caption .slide-btn { opacity:0; } /* .flex-active-slide .flex-caption h1{ -webkit-transform: -webkit-translateX(70%); opacity:0; animation: fade_title 5.5s linear ; -moz-animation: fade_title 6.5s linear ; -webkit-animation: fade_title 6.5s linear ; -o-animation: fade_title 6.5s linear ;} @keyframes fade_title { 0% { transform: translateX(70%); opacity:0;} 20% { transform: translateX(00); opacity:1;} 80% { transform: translateX(00); opacity:1;} 100% { transform: translateX(-100%); opacity:0;} } @-moz-keyframes fade_title { 0% { -moz-transform: translateX(70%); opacity:0;} 20% { -moz-transform: translateX(00); opacity:1;} 80% { -moz-transform: translateX(00); opacity:1;} 100% { -moz-transform: translateX(-100%); opacity:0;} } @-webkit-keyframes fade_title { 0% { -webkit-transform: translateX(70%); opacity:0;} 20% { -webkit-transform: translateX(00); opacity:1;} 80% { -webkit-transform: translateX(00); opacity:1;} 100% { -webkit-transform: translateX(-100%); opacity:0;} } @-o-keyframes fade_title { 0% { -o-transform: translateX(70%); opacity:0;} 20% { -o-transform: translateX(00); opacity:1;} 80% { -o-transform: translateX(00); opacity:1;} 100% { -o-transform: translateX(-100%); opacity:0;} } .flex-active-slide .flex-caption p{ -webkit-transform: -webkit-translateY(50%); opacity:0; animation: img_in 5.5s linear ; -moz-animation: img_in 5.5s linear ; -webkit-animation: img_in 5.5s linear ; -o-animation: img_in 5.5s linear ;} @keyframes img_in { 0% { transform: translateX(50%); opacity:0;} 20% { transform: translateX(00); opacity:1;} 80% { transform: translateX(00); opacity:1;} 100% { transform: translateX(100%); opacity:0;} } @-moz-keyframes img_in { 0% { -moz-transform: translateX(50%); opacity:0;} 20% { -moz-transform: translateX(00); opacity:1;} 80% { -moz-transform: translateX(00); opacity:1;} 100% { -moz-transform: translateX(100%); opacity:0;} } @-webkit-keyframes img_in { 0% { -webkit-transform: translateX(50%); opacity:0;} 20% { -webkit-transform: translateX(00); opacity:1;} 80% { -webkit-transform: translateX(00); opacity:1;} 100% { -webkit-transform: translateX(100%); opacity:0;} } @-o-keyframes img_in { 0% { -o-transform: translateX(50%); opacity:0;} 20% { -o-transform: translateX(00); opacity:1;} 80% { -o-transform: translateX(00); opacity:1;} 100% { -o-transform: translateX(100%); opacity:0;} }*/ /*.flex-active-slide:after { background:url(../images/tree.png) no-repeat right bottom; position:absolute; bottom: 0; content: ""; display: block; height: 288px; width: 154px; z-index: 99; right:0; }*/ .flex-caption1 img { opacity: 0; } .ban-bg { background:#093; width:100%; height:100%; position:relative;} .ban-bg:after { width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent; position:absolute;} .flex-active-slide .flex-caption img.bg-banner-img{ -webkit-animation:hdrlft linear 1; -moz-animation:hdrlft linear 1; -o-animation:hdrlft linear 1; animation:hdrlft linear 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1.4s; -moz-animation-duration:1.4s; -o-animation-duration:1.4s; animation-duration:1.4s; } @-webkit-keyframes hdrlft { 0% { opacity: 0; -webkit-transform: translateY(-400px); } 55% { opacity: 0; -webkit-transform: translateY(-400px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes hdrlft { 0% { opacity: 0; -moz-transform: translateY(-400px); } 55% { opacity: 0; -moz-transform: translateY(-400px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes hdrlft { 0% { opacity: 0; -o-transform: translateY(-400px); } 55% { opacity: 0; -o-transform: translateY(-400px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes hdrlft { 0% { opacity: 0; transform: translateY(-400px); } 55% { opacity: 0; transform: translateY(-400px); } 100% { opacity: 1; transform: translateY(0); } } .flex-active-slide .flex-caption h3 { -webkit-animation:hdrlft linear 1; -moz-animation:hdrlft linear 1; -o-animation:hdrlft linear 1; animation:hdrlft linear 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1.4s; -moz-animation-duration:1.4s; -o-animation-duration:1.4s; animation-duration:1.4s; } @-webkit-keyframes hdrlft { 0% { opacity: 0; -webkit-transform: translateY(-400px); } 55% { opacity: 0; -webkit-transform: translateY(-400px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes hdrlft { 0% { opacity: 0; -moz-transform: translateY(-400px); } 55% { opacity: 0; -moz-transform: translateY(-400px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes hdrlft { 0% { opacity: 0; -o-transform: translateY(-400px); } 55% { opacity: 0; -o-transform: translateY(-400px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes hdrlft { 0% { opacity: 0; transform: translateY(-400px); } 55% { opacity: 0; transform: translateY(-400px); } 100% { opacity: 1; transform: translateY(0); } } .flex-active-slide .flex-caption h1 { -webkit-animation:leftright linear 1; -moz-animation:leftright linear 1; -o-animation:leftright linear 1; animation:leftright linear 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1.5s; -moz-animation-duration:1.5s; -o-animation-duration:1.5s; animation-duration:1.5s; } @-webkit-keyframes leftright { 0% { opacity: 0; -webkit-transform: translateX(-400px); } 55% { opacity: 0; -webkit-transform: translateX(-400px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes leftright { 0% { opacity: 0; -moz-transform: translateX(-400px); } 55% { opacity: 0; -moz-transform: translateX(-400px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes leftright { 0% { opacity: 0; -o-transform: translateX(-400px); } 55% { opacity: 0; -o-transform: translateX(-400px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes leftright { 0% { opacity: 0; transform: translateX(-400px); } 55% { opacity: 0; transform: translateX(-400px); } 100% { opacity: 1; transform: translateX(0); } } .flex-active-slide .flex-caption p { -webkit-animation:rightleft linear 1; -moz-animation:rightleft linear 1; -o-animation:rightleft linear 1; animation:rightleft linear 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1.6s; -moz-animation-duration:1.6s; -o-animation-duration:1.6s; animation-duration:1.6s; } @-webkit-keyframes rightleft { 0% { opacity: 0; -webkit-transform: translateX(400px); } 55% { opacity:0; -webkit-transform: translateX(400px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes rightleft { 0% { opacity: 0; -moz-transform: translateX(400px); } 55% { opacity: 0; -moz-transform: translateX(400px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes rightleft { 0% { opacity: 0; -o-transform: translateX(400px); } 55% { opacity: 0; -o-transform: translateX(400px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes rightleft { 0% { opacity: 0; transform: translateX(400px); } 55% { opacity: 0; transform: translateX(400px); } 100% { opacity: 1; transform: translateX(0); } } .flex-active-slide .flex-caption .slide-btn { opacity: 0; -webkit-animation:fadeInBtn ease-in 1; -moz-animation:fadeInBtn ease-in 1; -o-animation:fadeInBtn ease-in 1; animation:fadeInBtn ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:2.5s; -moz-animation-duration:2.5s; -o-animation-duration:2.5s; animation-duration:2.5s; } @-webkit-keyframes fadeInBtn { 0% { opacity: 0; } 75% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeInBtn { 0% { opacity: 0; } 75% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeInBtn { 0% { opacity: 0; } 65% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInBtn { 0% { opacity: 0; } 75% { opacity: 0; } 100% { opacity: 1; } } .flex-active-slide .flex-caption1 h3 { -webkit-animation:hdrlft linear 1; -moz-animation:hdrlft linear 1; -o-animation:hdrlft linear 1; animation:hdrlft linear 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1.4s; -moz-animation-duration:1.4s; -o-animation-duration:1.4s; animation-duration:1.4s; } @-webkit-keyframes hdrlft { 0% { opacity: 0; -webkit-transform: translateY(-400px); } 55% { opacity: 0; -webkit-transform: translateY(-400px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes hdrlft { 0% { opacity: 0; -moz-transform: translateY(-400px); } 55% { opacity: 0; -moz-transform: translateY(-400px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes hdrlft { 0% { opacity: 0; -o-transform: translateY(-400px); } 55% { opacity: 0; -o-transform: translateY(-400px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes hdrlft { 0% { opacity: 0; transform: translateY(-400px); } 55% { opacity: 0; transform: translateY(-400px); } 100% { opacity: 1; transform: translateY(0); } } .flex-active-slide .flex-caption1 h1 { -webkit-animation:leftright linear 1; -moz-animation:leftright linear 1; -o-animation:leftright linear 1; animation:leftright linear 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1.5s; -moz-animation-duration:1.5s; -o-animation-duration:1.5s; animation-duration:1.5s; } @-webkit-keyframes leftright { 0% { opacity: 0; -webkit-transform: translateX(400px); } 55% { opacity: 0; -webkit-transform: translateX(400px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes leftright { 0% { opacity: 0; -moz-transform: translateX(400px); } 55% { opacity: 0; -moz-transform: translateX(400px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes leftright { 0% { opacity: 0; -o-transform: translateX(400px); } 55% { opacity: 0; -o-transform: translateX(400px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes leftright { 0% { opacity: 0; transform: translateX(400px); } 55% { opacity: 0; transform: translateX(400px); } 100% { opacity: 1; transform: translateX(0); } } .flex-active-slide .flex-caption1 .slide-btn { opacity: 0; -webkit-animation:fadeInBtn ease-in 1; -moz-animation:fadeInBtn ease-in 1; -o-animation:fadeInBtn ease-in 1; animation:fadeInBtn ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:2.5s; -moz-animation-duration:2.5s; -o-animation-duration:2.5s; animation-duration:2.5s; } @-webkit-keyframes fadeInBtn { 0% { opacity: 0; } 75% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeInBtn { 0% { opacity: 0; } 75% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeInBtn { 0% { opacity: 0; } 65% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInBtn { 0% { opacity: 0; } 75% { opacity: 0; } 100% { opacity: 1; } } .flex-active-slide .flex-caption1 p { -webkit-animation:rightleft linear 1; -moz-animation:rightleft linear 1; -o-animation:rightleft linear 1; animation:rightleft linear 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1.6s; -moz-animation-duration:1.6s; -o-animation-duration:1.6s; animation-duration:1.6s; } @-webkit-keyframes rightleft { 0% { opacity: 0; -webkit-transform: translateX(-400px); } 55% { opacity:0; -webkit-transform: translateX(-400px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes rightleft { 0% { opacity: 0; -moz-transform: translateX(-400px); } 55% { opacity: 0; -moz-transform: translateX(-400px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes rightleft { 0% { opacity: 0; -o-transform: translateX(-400px); } 55% { opacity: 0; -o-transform: translateX(-400px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes rightleft { 0% { opacity: 0; transform: translateX(-400px); } 55% { opacity: 0; transform: translateX(-400px); } 100% { opacity: 1; transform: translateX(0); } } .flex-active-slide .flex-caption2 .img { -webkit-animation:leftright linear 1; -moz-animation:leftright linear 1; -o-animation:leftright linear 1; animation:leftright linear 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1.5s; -moz-animation-duration:1.5s; -o-animation-duration:1.5s; animation-duration:1.5s; } @-webkit-keyframes leftright { 0% { opacity: 0; -webkit-transform: translateX(-400px); } 55% { opacity: 0; -webkit-transform: translateX(-400px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes leftright { 0% { opacity: 0; -moz-transform: translateX(-400px); } 55% { opacity: 0; -moz-transform: translateX(-400px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes leftright { 0% { opacity: 0; -o-transform: translateX(-400px); } 55% { opacity: 0; -o-transform: translateX(-400px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes leftright { 0% { opacity: 0; transform: translateX(-400px); } 55% { opacity: 0; transform: translateX(-400px); } 100% { opacity: 1; transform: translateX(0); } } .flex-active-slide .flex-caption2 .aple-txt { -webkit-animation:rightleft linear 1; -moz-animation:rightleft linear 1; -o-animation:rightleft linear 1; animation:rightleft linear 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1.6s; -moz-animation-duration:1.6s; -o-animation-duration:1.6s; animation-duration:1.6s; } @-webkit-keyframes rightleft { 0% { opacity: 0; -webkit-transform: translateX(400px); } 55% { opacity:0; -webkit-transform: translateX(400px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes rightleft { 0% { opacity: 0; -moz-transform: translateX(400px); } 55% { opacity: 0; -moz-transform: translateX(400px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes rightleft { 0% { opacity: 0; -o-transform: translateX(400px); } 55% { opacity: 0; -o-transform: translateX(400px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes rightleft { 0% { opacity: 0; transform: translateX(400px); } 55% { opacity: 0; transform: translateX(400px); } 100% { opacity: 1; transform: translateX(0); } } .flex-active-slide .flex-caption3 h1 { -webkit-animation:leftright linear 1; -moz-animation:leftright linear 1; -o-animation:leftright linear 1; animation:leftright linear 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1.5s; -moz-animation-duration:1.5s; -o-animation-duration:1.5s; animation-duration:1.5s; } @-webkit-keyframes leftright { 0% { opacity: 0; -webkit-transform: translateX(-400px); } 55% { opacity: 0; -webkit-transform: translateX(-400px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes leftright { 0% { opacity: 0; -moz-transform: translateX(-400px); } 55% { opacity: 0; -moz-transform: translateX(-400px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes leftright { 0% { opacity: 0; -o-transform: translateX(-400px); } 55% { opacity: 0; -o-transform: translateX(-400px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes leftright { 0% { opacity: 0; transform: translateX(-400px); } 55% { opacity: 0; transform: translateX(-400px); } 100% { opacity: 1; transform: translateX(0); } } .flex-active-slide .flex-caption3 p { -webkit-animation:rightleft linear 1; -moz-animation:rightleft linear 1; -o-animation:rightleft linear 1; animation:rightleft linear 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1.6s; -moz-animation-duration:1.6s; -o-animation-duration:1.6s; animation-duration:1.6s; } @-webkit-keyframes rightleft { 0% { opacity: 0; -webkit-transform: translateX(400px); } 55% { opacity:0; -webkit-transform: translateX(400px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes rightleft { 0% { opacity: 0; -moz-transform: translateX(400px); } 55% { opacity: 0; -moz-transform: translateX(400px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes rightleft { 0% { opacity: 0; -o-transform: translateX(400px); } 55% { opacity: 0; -o-transform: translateX(400px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes rightleft { 0% { opacity: 0; transform: translateX(400px); } 55% { opacity: 0; transform: translateX(400px); } 100% { opacity: 1; transform: translateX(0); } } .flex-active-slide .flex-caption3 .slide-btn { opacity: 0; -webkit-animation:fadeInBtn ease-in 1; -moz-animation:fadeInBtn ease-in 1; -o-animation:fadeInBtn ease-in 1; animation:fadeInBtn ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:2.5s; -moz-animation-duration:2.5s; -o-animation-duration:2.5s; animation-duration:2.5s; } @-webkit-keyframes fadeInBtn { 0% { opacity: 0; } 75% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeInBtn { 0% { opacity: 0; } 75% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeInBtn { 0% { opacity: 0; } 65% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInBtn { 0% { opacity: 0; } 75% { opacity: 0; } 100% { opacity: 1; } } .product-detail-lft .flex-direction-nav li a {width:14px; height:28px; margin:-24px 0 0 0; display: block; z-index:100; background: url(../images/dir-nav1.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -99999px;} .product-detail-lft .flex-direction-nav li .flex-next:hover {background-position:-16px -28px; } .product-detail-lft .flex-direction-nav li .flex-prev:hover {background-position:0 -28px;} .product-detail-lft .flex-direction-nav li .flex-next {background-position:-16px 0; right:0px;} .product-detail-lft .flex-direction-nav li .flex-prev {left:0px;}