以下是 多款超酷动画效果的Lightbox特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>多款超酷动画效果的Lightbox特效</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="Boxaroo/css/jquery-Boxaroo-1.8.min.css"/>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="Boxaroo/js/jquery-Boxaroo-1.8.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.boxaroo-skin1').Boxaroo({"skin":1});
$('.boxaroo-skin2').Boxaroo({"skin":2});
$('.boxaroo-skin3').Boxaroo({"skin":3});
$('.boxaroo-skin4').Boxaroo({"skin":4});
$('.boxaroo-skin5').Boxaroo({"skin":5});
$('.boxaroo-skin6').Boxaroo({"skin":6});
});
</script>
</head>
<body>
<!-- SLIDER -->
<div class="fullwidthbanner-container">
<div class="fullwidthbanner">
<ul>
<!-- THE FIRST SLIDE -->
<li data-transition="slotfadevertical" data-slotamount="10" data-masterspeed="5000" data-thumb="images/slide1.jpg">
<!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
<img src="images/slide1.png" data-fullwidthcentering="on" alt="slide 1">
<div class="caption lfl stl"
data-x="0"
data-y="-50"
data-speed="1100"
data-start="800"
data-easing="easeInOutElastic" data-end="9100" data-endspeed="300" data-endeasing="easeInSine" >
<img src="images/headerkangaroo1.png" width="675px"/></div>
<div class="caption rev-green lfl stl"
data-x="480"
data-y="235"
data-speed="450"
data-start="800"
data-easing="easeInOutBack" data-end="8500" data-endspeed="300" data-endeasing="easeInSine" >
boxaroo</div>
<div class="caption rev-green2 lfl stl"
data-x="480"
data-y="290"
data-speed="1100"
data-start="800"
data-easing="easeInOutElastic" data-end="9100" data-endspeed="300" data-endeasing="easeInSine" >
jQuery lightbox plugin v1.8</div>
<div class="caption rev-green2 lfl stl"
data-x="480"
data-y="325"
data-speed="1100"
data-start="800"
data-easing="easeInOutElastic" data-end="9100" data-endspeed="300" data-endeasing="easeInSine" >
make it yours.</div>
<!-- THE SECOND SLIDE -->
<li data-transition="slideup" data-slotamount="15" data-masterspeed="5000" data-delay="9400" data-thumb="images/slide2.jpg">
<img src="images/slide2.png" data-fullwidthcentering="on" alt="slide 2">
<div class="caption rev-green2 lfl stl"
data-x="250"
data-y="100"
data-speed="450"
data-start="800"
data-easing="easeInQuad" data-end="9100" data-endspeed="300" data-endeasing="easeInSine" >
• HTML5, CSS3 and jQuery</div>
<div class="caption rev-green2 lfl stl"
data-x="250"
data-y="150"
data-speed="450"
data-start="850"
data-easing="easeInQuad" data-end="9100" data-endspeed="300" data-endeasing="easeInSine" >
• no experience needed</div>
<div class="caption rev-green2 lfl stl"
data-x="250"
data-y="200"
data-speed="450"
data-start="900"
data-easing="easeInQuad" data-end="9100" data-endspeed="300" data-endeasing="easeInSine" >
• simple setup with only 3 lines</div>
<div class="caption rev-green2 lfl stl"
data-x="250"
data-y="250"
data-speed="450"
data-start="950"
data-easing="easeInQuad" data-end="9100" data-endspeed="300" data-endeasing="easeInSine" >
• includes 60 GraphicRiver items</div>
<div class="caption rev-green2 lfl stl"
data-x="250"
data-y="300"
data-speed="450"
data-start="1000"
data-easing="easeInQuad" data-end="9100" data-endspeed="300" data-endeasing="easeInSine" >
• lightning fast customization</div>
<div class="caption lfl stl"
data-x="505"
data-y="-250"
data-speed="1100"
data-start="800"
data-easing="easeInOutElastic" data-end="9100" data-endspeed="300" data-endeasing="easeInSine" >
<img src="images/headerkangaroo2.png" width="859px"/></div>
</li>
</ul><div class="tp-bannertimer"></div>
</div>
</div>
<!-- HEADER -->
<header class="header-container">
<div class="header-elements container">
<div class="row span_12 no-margin-col logoblock">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="logo"></a>
</div>
<h2>unique presentation environments without coding experience</h2>
</div>
</div>
</header>
<!-- AD ICONS -->
<section class="container clr">
<div class="row row-big-col">
<div class="col span_12">
<div class="presentation-box">
<img src="css/images/medium_content_box1.png" alt="medium_content_box1">
<h4 class="text-align-center text-bold">Adaptive</h4>
<p class="text-align-center">Automatically adapts to any device dimensions and resolution.</p>
</div>
<div class="presentation-box">
<img src="css/images/medium_content_box2.png" alt="medium_content_box2">
<h4 class="text-align-center text-bold">Skin System</h4>
<p class="text-align-center">Ships with 6 carefully crafted Skins to choose and customize - or build your own.</p>
</div>
<div class="presentation-box">
<img src="css/images/medium_content_box3.png" alt="medium_content_box3">
<h4 class="text-align-center text-bold">Components</h4>
<p class="text-align-center">A building-block approach for <br>unsurpassed customization.</p>
</div>
<div class="presentation-box">
<img src="css/images/medium_content_box4.png" alt="medium_content_box4">
<h4 class="text-align-center text-bold">Simple Settings</h4>
<p class="text-align-center">No complicated CSS or strict HTML.<br> Built for beginning and advanced users.</p>
</div>
</div>
</div>
<!-- SKINS -->
<div class="row">
<div class="col span_12">
<div class="title-medium">
<h3>Default Skins [ 1 Simple Setting ]</h3>
</div>
<p style="font-size:16px;">Boxaroo is created for all experience levels and only requires 1 setting - the Skin - making it easy enough to use if you're new to HTML. Once a Skin has been loaded, any additional settings you apply will automatically override Skin settings - allowing Boxaroo Skins to act as customization launchpads. All of the demos below are setup using only 3 lines.</p>
</div>
</div>
<div class="row portrow">
<div class="portfolio-element art">
<a href="images/skin1.jpg" data-boxaroo='{
"counter_control":"true,Skin,of"
}'>
<img src="images/thumb1.png" alt="Skin 1" class="boxaroo-skin1" title="Skin 1" rel="Boxaroo Skins"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div class="portfolio-element art">
<a href="images/skin2.jpg"
data-boxaroo='{
"counter_pos":"15,13",
"caption_pos":"15,13",
"counter_control":"true,Skin,of"
}'>
<img src="images/thumb2.png" alt="Skin 2" class="boxaroo-skin2" title="Skin 2" rel="Boxaroo Skins"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div class="portfolio-element art">
<a href="images/skin3.jpg"
data-boxaroo='{"counter_control":"true,Skin,of"}'>
<img src="images/thumb3.png" alt="Skin 3" class="boxaroo-skin3" title="Skin 3" rel="Boxaroo Skins"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div class="portfolio-element art">
<a href="images/skin4.jpg"
data-boxaroo='{"counter_control":"true,Skin,of"}'>
<img src="images/thumb4.png" alt="Skin 4" class="boxaroo-skin4" title="Skin 4" rel="Boxaroo Skins"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div class="portfolio-element art">
<a href="images/skin5.jpg"
data-boxaroo='{"counter_control":"true,Skin,of"}'>
<img src="images/thumb5.png" alt="Skin 5" class="boxaroo-skin5" title="Skin 5" rel="Boxaroo Skins"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div class="portfolio-element art">
<a href="images/skin6.jpg"
data-boxaroo='{"counter_control":"true,Skin,of"}'>
<img src="images/thumb6.png" alt="Skin 6" class="boxaroo-skin6" title="Skin 6" rel="Boxaroo Skins"/></a>
<div class="extra-info portfolio-image"></div>
</div>
</div><br><br>
</section>
<div class="see-through full-see-through">
<div class="container clr">
<h2>More than Presets</h2>
<p>Skins get Boxaroo up and running quickly with 1 setting, but also act as a starting point for customization. You can apply a Skin to an entire gallery, then optionally continue customizing the gallery using additional settings. Boxaroo settings can also be applied to specific images inside the gallery using the data-boxaroo attribute.</p>
</div>
</div><br/><br/><br/>
<!-- COMPONENTS -->
<section class="container clr"><br>
<div class="row">
<div class="col span_12">
<div class="title-medium">
<h3>Components [ A Building Block Approach ]</h3>
</div>
</div>
</div>
<div class="row">
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Preloaders</h3>
<ul class="inline-ul">
<li><span class="gray-text">10 Customizable CSS3 Preloaders</span></li>
<li><span class="gray-text">GIF for Legacy Browsers</span></li>
</ul>
<p>Configure multiple colors and timing options for any of the 10 CSS3 Animated Preloaders. Similar GIFs will automatically be presented for Legacy Browsers. Each Lightbox can have it's own unique Preloader.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Captions</h3>
<ul class="inline-ul">
<li><span class="gray-text">Finally full control</span></li>
<li><span class="gray-text">over styling and placement</span></li>
</ul>
<p>Each Lightbox Item offers full and independent control over its Caption Styling, Animation Settings, Visibility, Scaling, Position, Scaling Ranges, Gallery Name, and more. Captions can be different for every Lightbox.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Counters</h3>
<ul class="inline-ul">
<li><span class="gray-text">Showing progress</span></li><br>
<li><span class="gray-text">with style</span></li>
</ul>
<p>The Counter records a user's progress through a Gallery. Instead of generic text, you can customize it to say whatever you like - per Lightbox. You can also swap positions, control language / scaling options and much more.</p>
</div>
</article>
</div>
</div>
<!-- COMPONENTS SLIDER -->
<div class="row row-big-col">
<div class="col span_12" style="margin-bottom:20px">
<section class="slider">
<div class="flexslider about-us-slider">
<ul class="slides">
<li><img src="images/compslide1.png" alt="Boxaroo"></li>
<li><img src="images/compslide2.png" alt="Boxaroo"></li>
<li><img src="images/compslide3.png" alt="Boxaroo"></li>
<li><img src="images/compslide4.png" alt="Boxaroo"></li>
</ul>
</div>
</section>
</div>
</div>
<div class="row portrow">
<div class="portfolio-element art">
<a href="images/bgentrance.jpg"
data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"lightbox_effect":"grow,shrink",
"lightbox_movement":"center,bottomright",
"frame_animation":true,
"frame_count":1,
"flip":"90,90",
"frame_speed":2500,
"frame_flip":"0,0",
"counter":false,
"caption":false,
"box_speed":"400,300,400",
"content_speed":"500,300,300",
"bg_color":"#a0ff8e",
"bg_tile":false,
"bg_pic":false,
"matte_color":"#FFFFFF",
"preloader_color":"#FFFFFF,#53f933",
"border":"5,#FFFFFF",
"frame_border":"5,#FFFFFF",
"nav_buttons":"false,false,false",
"gradient_nav_color":"#FFFFFF,#FFFFFF",
"gradient_nav_opacity":"1,1",
"drop_shadow":"0,0,0,0,#000000,0",
"frame_drop_shadow":"0,0,0,0,#000000,0",
"frame_nav_override":true
}'>
<img src="images/thumb1.png" class="boxaroo-skin1" title="Entrance & Exit Effects" rel="Components"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div class="portfolio-element art">
<a href="images/bgcounter.jpg"
data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"lightbox_movement":"topleft,center",
"nav_movement":true,
"highlight_type":false,
"bg_color":"#dfdfd1",
"matte_size":"6,6,6,6",
"matte_color":"#cbcbc6,#c5c5bd",
"border":"1,#FFFFFF",
"frame_border":"1,#FFFFFF",
"caption_pos":"10,10",
"caption_offsets":"0,-15",
"caption_control":"false,false",
"counter_pos":"14,14",
"counter_offsets":"0,15"
}'>
<img src="images/thumb2.png" class="boxaroo-skin2" alt="Component Positioning" title="Position any Component with a simple number" rel="Components"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div class="portfolio-element art">
<a href="images/bgnav.jpg"
data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"caption":false,
"gradient_nav_color":"#65ff9d,#65ff9d",
"bg_color":"#2d313b",
"bg_tile_opacity":0,
"bg_pic_opacity":0,
"nav_style":"21,21,21",
"nav_buttons":"false,true,true",
"matte_color":"#FFFFFF",
"border_radius":"15,15,15,15",
"matte_bg":false,
"border":"0,#FFFFFF",
"frame_border":"0,#FFFFFF",
"drop_shadow":"0,0,5,5,#1f2229,0.75",
"frame_drop_shadow":"0,0,5,5,#1f2229,0.75",
"matte_size":"5,5,5,5",
"preloader_style":10,
"nav_buttons_opacity":"1,1||0.25,1||0.25,1",
"preloader_color":"#4a4d55,#979799",
"gradient_nav_color":"#FFFFFF,#FFFFFF",
"highlight_speed":50000,
"highlight_color":"#e2e2ef,#e2e2ef,#e2e2ef",
"highlight_opacity":"0.15,0.15,0",
"highlight_stops":"92,96,100",
"highlight_frame_opacity":"0,0.5",
"gradient_nav_opacity":"0.25,0.25"
}'>
<img src="images/thumb3.png" class="boxaroo-skin3" title="Customizable UI" rel="Components"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div class="portfolio-element art">
<a href="images/bgcolorlayer.jpg"
data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"caption":false,
"counter":false,
"nav_buttons":"false,false,false",
"scale":"1,1",
"frame_scale":"1,1",
"lightbox_movement":"bottom,right",
"lightbox_effect":"grow,match",
"bg_tile":false,
"bg_tile_opacity":0,
"bg_pic_opacity":0,
"bg_color":"#02bb78,#292929,#e3e2e8",
"preloader_color":"#FFFFFF,#02bb78",
"border":"1,#FFFFFF",
"frame_border":"1,#FFFFFF",
"gradient_nav_color":"#3cfde5,#3cfde5",
"drop_shadow":"0,0,15,5,#22284a,0.10",
"frame_drop_shadow":"0,0,15,5,#22284a,0.10"
}'>
<img src="images/thumb4.png" class="boxaroo-skin4" title="Color Overlay" rel="Components"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div class="portfolio-element art">
<a href="images/bgtile.jpg"
data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"counter":false,
"caption":false,
"bg_tile":38,
"bg_opacity":1,
"bg_tile_opacity":0.15,
"gradient_nav_color":"#ffb2b1,#ffb2b1",
"gradient_nav_opacity":"0.25,0.25",
"bg_color":"#e54341",
"border":"2,#e54341",
"frame_border":"2,#e54341",
"drop_shadow":"0,0,10,15,#c43a38,0.7",
"frame_drop_shadow":"0,0,10,15,#c43a38,0.7",
"preloader_color":"#FFFFFF,#c43a38",
"highlight_color":"#e54341,#e54341,#e54341"
}'>
<img src="images/thumb5.png" class="boxaroo-skin5" title="Tile Overlay" rel="Components"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div class="portfolio-element art">
<a href="images/bgbg.jpg"
data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"caption_pos":"23,23",
"caption_offsets":"10,-10",
"caption_control":"false,false",
"counter":false,
"nav_buttons":"false,false,false",
"bg_opacity":1,
"bg_color":"#2a1f3d",
"bg_tile_opacity":0,
"bg_pic_opacity":1,
"bg_pic":"images/backgroundsample.jpg",
"border":"2,#373451",
"frame_border":"2,#373451",
"preloader_color":"#fff8c0,#fffad5",
"preloader_style":3,
"gradient_nav_color":"#fffad5,#fffad5",
"gradient_nav_opacity":"0.75,0.75",
"drop_shadow":"0,0,10,5,#373451,0.35",
"frame_drop_shadow":"0,0,10,5,#373451,0.35",
"matte_color":"#dbd398"
}'
>
<img src="images/thumb6.png" class="boxaroo-skin6" alt="Image Overlay" title="Photo Courtesy of Robin Rocker - Unsplash.com" rel="Components"/></a>
<div class="extra-info portfolio-image"></div>
</div>
</div><br><br>
<div class="row">
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Navigation Buttons</h3>
<ul class="inline-ul">
<li><span class="gray-text">Choose buttons from the</span></li>
<li><span class="gray-text">built-in Assets Library</span></li>
</ul>
<p>Changing the Navigation Buttons couldn't get easier - just pick a number corresponding to the button you like. You can change the Close, Previous or Next Buttons independently for every Lightbox Item if you like. Boxaroo will handle all the transitions seamlessly.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">HTML Elements</h3>
<ul class="inline-ul">
<li><span class="gray-text">Extend the Boxaroo environment</span></li>
<li><span class="gray-text">using 3 custom DIVs</span></li>
</ul>
<p>Ever wish you could just easily drop a bit of code into your existing Lightbox for a unique and custom solution? Each Lightbox Item has 3 unique and optional Components that you can quickly load any DIV into. Boxaroo also loads any events attached to your DIV.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Background Overlays</h3>
<ul class="inline-ul">
<li><span class="gray-text">Mix and Match 3 Backgrounds Overlays</span></li><br>
<li><span class="gray-text">Color | Tile | Image</span></li>
</ul>
<p>Each Lightbox Item has 3 unique Overlays. An Animated Color Layer will loop through any number of colors you give it. Choose from over 130 seamless patterns for the Tile Layer. Load backgrounds from a specific path, or use a number to load one from the Assets Library. </p>
</div>
</article>
</div>
</div></div><br><br><br><br>
</section>
<div class="see-through full-see-through flexibility">
<div class="container clr">
<h2>Unparalleled Flexibility</h2>
<p>Boxaroo is all about making it easy to build and customize unique Lightbox Environments - and make each one different from the last. Tailor your Lightboxes at the Image level, Gallery Level or multiple Galleries at once - with unparalleled flexibility. Boxaroo is simple to use, fully compatible with CMS systems, and powerful enough to mimic the design of nearly every Lightbox plugin available - making it ideal for both beginners and advanced users.</p>
</div>
</div><br/><br/><br/>
<!-- ASSETS LIBRARY -->
<section class="container clr">
<div class="row">
<div class="col span_12">
<div class="title-medium">
<h3>Assets Library [ An Unsurpassed Value ]</h3>
</div>
</div>
</div>
<!-- ASSETS SLIDER -->
<div class="row row-big-col">
<div class="col span_12">
<section class="slider">
<div class="flexslider assets-slider">
<ul class="slides">
<li><img src="images/assetsslide1.png" alt="Boxaroo"></li>
<li><img src="images/assetsslide2.png" alt="Boxaroo"></li>
<li><img src="images/assetsslide3.png" alt="Boxaroo"></li>
</ul>
</div>
</section>
</div>
</div>
<p style="font-size:16px">The Assets Library is a huge collection of Graphics assembled over the course of 2 months and designed specifically for Boxaroo. It includes includes 60 GraphicRiver Items in addition to hundreds of premium graphics files. All Assets have been carefully optimized, named numerically and organized into folders. With 725+ premium Backgrounds, 100+ Navigation Buttons, 100+ Seamless Tiles, Hover Icons and a lightning-fast "pick-by-number" approach - changing Lightbox Graphics has never been this much fun.</p>
<img src="images/assetsdemo.png" alt="Boxaroo" width="100%" style="margin-bottom:50px;margin-top:50px;"/>
</section>
<div class="see-through full-see-through adaptive">
<div class="container clr">
<h2>Adaptive Design</h2>
<p>Forget about responsive - Boxaroo dynamically adapts to any screen size at any resolution. Without a need to dig through tangled Media Queries, Boxaroo focuses on delivering a fast and fluid experience across all resolutions and display sizes. Boxaroo also supports a Fixed Layout Mode and includes options to toggle scalability and define scaling ranges for each Component.</p>
</div>
</div><br/><br/><br/>
<!-- EFFECTS -->
<section class="container clr">
<div class="row">
<div class="col span_12">
<div class="title-medium">
<h3>Special Effects [ The Awesome Stuff ]</h3>
</div>
</div>
</div>
<!-- EFFECTS SLIDER -->
<div class="row row-big-col">
<div class="col span_12">
<section class="slider">
<div class="flexslider effects-slider">
<ul class="slides">
<li><img src="images/effectslide1.png" alt="Boxaroo"></li>
<li><img src="images/effectslide2.png" alt="Boxaroo"></li>
<li><img src="images/effectslide3.png" alt="Boxaroo"></li>
</ul>
</div>
</section>
</div>
</div>
<p style="font-size:16px;">Boxaroo includes a stunning variety of hardware-accelerated CSS3 animations designed to work together seamlessly. Built-in feature detection (no Modernizr required) handles all of the fallback JavaScript animation <em>(using requestAnimationFrame when possible)</em>. Animations auto-adjust depending upon plugin situations such as the existence of other effects, or during specific user events.</p><br>
<div class="row">
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Fibonacci Spirals</h3>
<ul class="inline-ul">
<li><span class="gray-text">with legacy browser support</span></li>
</ul>
<p>Spirals can add a nice organic touch to Lightbox animations. Boxaroo allows you to configure Spiral Animations to occur during Open, Close, and/or Navigation. Set the axis for the animation, direction, radius, number of animation cycles, speed and more.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Shadows</h3>
<ul class="inline-ul">
<li><span class="gray-text">powerful control</span></li>
</ul>
<p>For that extra lighting realism, Boxaroo provides powerful shadow animation control. Animate the Shadow Color, Blur Radius, Spread Radius, X Distance, Y Distance and Opacity. Animated Drop Shadows can also optionally scale.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Highlights</h3>
<ul class="inline-ul">
<li><span class="gray-text">modern browser support</span></li>
</ul>
<p>Animated Highlights add another layer of realism to your content. Customize the Highlight Type (shape), position, speed, gradient stops, size and much more. You can even pass in arrays of opacities or colors for Highlight animation loops.</p>
</div>
</article>
</div>
</div>
<div id="spiral_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">Fibonacci Spirals</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;">Add some Spiral Animations to your Lightboxes with a couple simple settings. Control the In, Out and Navigation Speeds, Radius, Direction, Number of Cycles and more.</p>
</div>
<div class="row portrow">
<div class="portfolio-element art">
<a href="images/bgspirals.jpg"data-boxaroo='{
"spiral":"true,true,true",
"spiral_direction":"false,false",
"spiral_control":"500,10",
"spiral_speed":"2000,2000,1000",
"box_speed":"700,700,700",
"lightbox_effect":"grow,shrink",
"lightbox_movement":"center,center",
"nav_movement":true,
"preloader_color":"#7c4cb5,#FFFFFF",
"matte_color":"#FFFFFF",
"bg_pic_opacity":0,
"bg_color":"#714cb5,#7c4cb5",
"bg_tile_opacity":0,
"bg_opacity":1,
"drop_shadow":"0,0,15,5,#9a65cc,0.25",
"counter":false,
"caption":false,
"edge_buffers":"35,35",
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"highlight_frame_opacity":"0.25,0.45"
}'>
<img src="images/thumb7.png" alt="Fibonacci Spirals" class="boxaroo-skin1" title="Fibonacci Spirals" rel="Special Effects"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="shadow_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">Advanced Shadows</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;">Boxaroo includes full support for animated Lightbox Shadows. Use Shadows for Glow Effects, blurring Lightbox borders or inside Frame Animation Loops for pulsating animations.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgshadows.jpg" data-boxaroo='{
"bg_pic":true,
"bg_tile_opacity":0,
"bg_opacity":1,
"bg_pic_opacity":0,
"bg_color":"#0ea6e5",
"bg_speed":"500,500,500,10000",
"counter":false,
"caption":false,
"hover_type":"caption",
"preloader_color":"#2abdfa,#FFFFFF",
"matte_color":"#FFFFFF",
"border":"2,#2abdfa",
"frame_border":"2,#2abdfa",
"frame_animation":true,
"drop_shadow":"0,0,5,0,#b9e0c4,0.5",
"frame_drop_shadow":"0,0,25,10,#FFFFFF,0.5",
"edge_buffers":"30,30",
"frame_speed":2500,
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1"
}'>
<img src="images/thumb8.png" alt="Shadows" class="boxaroo-skin5" title="Lightbox Shadows" rel="Special Effects"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="highlight_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">Highlights</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;">Highlights are optional reflective accents and are highly configurable. They automatically adapt to any 2D/3D Transformations applied to the Lightbox - for added realism. <br/> (Use Arrow Keys, Swipe or Hover over the Lightbox to Navigate)</p>
</div>
<div class="portfolio-element art">
<a href="images/bghighlights.jpg" data-boxaroo='{
"box_speed":"700,500,500",
"lightbox_effect":"grow,shrink",
"lightbox_movement":"center,center",
"nav_movement":true,
"bg_opacity":1,
"bg_tile_opacity":0,
"bg_pic_opacity":0,
"bg_color":"#ff8010",
"counter":false,
"caption":false,
"frame_animation":true,
"flip":"0,-20",
"frame_flip":"0,20",
"translate":"20,0",
"frame_translate":"-20,0",
"border":"2,#ffedb7",
"frame_border":"2,#ffedb7",
"drop_shadow":"30,0,30,5,#994d0b,0.25",
"frame_drop_shadow":"-30,-10,30,5,#994d0b,0.25",
"highlight_type":"ellipse",
"highlight_pos":"1000,-400||false,false",
"highlight_color":"#FFFFFF,#FFFFFF,#FFFFFF",
"highlight_speed":false,
"highlight_opacity":"0,0.5,0",
"highlight_stops":"70,80,100",
"highlight_size":"200%,350%",
"highlight_frame_opacity":"0,0.4",
"nav_buttons":"false,false,false",
"gradient_nav_color":"#FFFFFF,#FFFFFF",
"matte_bg":false,
"matte_color":"#FFFFFF",
"preloader_color":"#ff8010,#FFFFFF",
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption"
}'>
<img src="images/thumb9.png" alt="Highlights" class="boxaroo-skin3" title="Highlights" rel="Special Effects"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="matte_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#6e6a57;margin-bottom:.25em;">Custom Matting</h1>
<p style="color:#6e6a57;font-size:1.25em;line-height:1.25em;">Mattes can be sized differently per side, be simple colors, animated Color Loops or repeating Tiles - all unique to each Lightbox. Boxaroo automatically handles the transitions for you. <br/>(Use Arrow Keys, Swipe or Hover over the Lightbox to Navigate)</p>
</div>
<div class="portfolio-element art">
<a href="images/bgmatte.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"caption":false,
"counter":false,
"nav_buttons":"false,false,false",
"bg_pic_opacity":0,
"edge_buffers":"40,40",
"matte_bg":40,
"matte_size":"50,40,55,40",
"matte_color":"#FFFFFF",
"matte_clr_speed":"5000",
"content_class":"content_drop_shadow",
"border":"2,#bbff8e",
"lightbox_movement":"left,right",
"frame_border":"2,#bbff8e",
"drop_shadow":"0,5,5,0,#4d8529,0.5",
"frame_drop_shadow":"0,5,5,0,#4d8529,0.5",
"bg_color":"#7bc749",
"preloader_color":"#bbff8e,#e9ffdb",
"gradient_nav_color":"#e9ffdb,#e9ffdb"
}'>
<img src="images/thumb10.png" alt="Custom Matting" class="boxaroo-skin6" title="Skin 4" rel="Special Effects"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="comp_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">Advanced Components</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;">All Components can animate into view by simply setting the start and end positions. Configure 2D/3D Hover Effects, Opacities, Animation Timing, Dynamic Class Assignment and many Component-specific settings such as Counter Keyword Selection, Full Width Captions and more.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgcomps.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"caption":true,
"counter":true,
"bg_pic":false,
"bg_pic_opacity":0.15,
"bg_color":"#e24e4e",
"bg_speed":"500,500,500,10000",
"bg_tile_opacity":0,
"frame_animation":true,
"bg_opacity":1,
"nav_buttons":"true,true,true",
"nav_pos":"19,24,20||19,16,12",
"nav_buttons_offsets":"-25,10||-200,-25||200,-25",
"nav_buttons_m_offsets":"0,0||-20,-25||20,-25",
"nav_buttons_opacity":"0.35,1||0.5,1||0.5,1",
"nav_button_scale":"0.75,1||1,1.4||1,1.4",
"caption_pos":"18,22",
"caption_offsets":"0,0",
"caption_m_offsets":"0,-20",
"caption_class":"caption_comp_demo",
"nav_style":"12,12,12",
"border":"5,#FFFFFF",
"preloader_color":"#FFFFFF,#e24e4e",
"frame_border":"5,#FFFFFF",
"matte_color":"#FFFFFF",
"drop_shadow":"0,0,13,5,#882d2d,0.25",
"frame_drop_shadow":"0,0,13,5,#882d2d,0.25",
"border_radius":"0,0,0,0",
"scale_border":"true,true",
"edge_buffers":"35,35",
"counter_pos":"22,6",
"counter_m_offsets":"0,-20",
"counter_class":"counter_comp_demo",
"counter_control":"true,Demonstration,of",
"caption_control":"true,true",
"border_radius":"10,10,10,10"
}'>
<img src="images/thumb11.png" alt="Advanced Components" class="boxaroo-skin1" title="Caption Component" rel="Special Effects"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="2d3d_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">2D/3D Transformations</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;">Boxaroo is packed with powerful 2D and 3D Transformation settings. Rotate, Tilt, Flip, Translate, Skew and Scale to your hardware-accelerated heart's desire - with perspective control. Use 2D/3D Transformations during Navigation, as stopping points or during Frame Animations.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgtransform.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"edge_buffers":"40,40",
"bg_pic":false,
"bg_opacity":1,
"bg_color":"#3e4649",
"bg_tile_opacity":0,
"frame_animation":true,
"frame_speed":4000,
"frame_ease":"ease-in-out,ease-in-out",
"frame_count":"infinite",
"frame_direction":"alternate",
"perspective":"1000",
"frame_perspective":"1000",
"flip":"20,-20",
"frame_flip":"22,-22",
"rotate":"3",
"frame_rotate":"5",
"translate":"-20,-30",
"frame_translate":"-20,-30",
"drop_shadow":"0,5,13,5,#292f31,0.45",
"frame_drop_shadow":"30,15,13,5,#292f31,0.35",
"scale":"1,1",
"frame_scale":"1,1",
"frame_nav_override":false,
"highlight_type":"ellipse",
"highlight_pos":"1500,-1500||-700,1000",
"highlight_color":"#cbffe8,#cbffe8,#cbffe8",
"highlight_speed":15000,
"highlight_opacity":"0,0.75,0",
"highlight_stops":"4,85,100",
"highlight_size":"200%,250%",
"highlight_frame_opacity":"0.05,0.15",
"border":"3,#717276",
"matte_color":"#22a86d",
"frame_border":"3,#c5bdba",
"preloader_color":"#FFFFFF,#717276",
"nav_buttons":"false,false,false",
"gradient_nav_colors":"#cbffe8,#cbffe8",
"counter":false,
"caption":false
}'>
<img src="images/thumb12.png" alt="2D/3D Transformations" class="boxaroo-skin2" title="2D/3D Transformations" rel="Special Effects"/></a>
<div class="extra-info portfolio-image"></div>
</div>
</div><br>
<div class="row">
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Custom Matting</h3>
<ul class="inline-ul">
<li><span class="gray-text">where has this feature been?</span></li>
</ul>
<p>Photographers rejoice - Boxaroo delivers full Matte Controls to the Lightbox. Animate Matte Widths (per side) and create color animation loops with an unlimited number of colors. You can apply a texture from the bountiful Assets Library with a single number. Animated Mattes can also optionally scale.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Borders</h3>
<ul class="inline-ul">
<li><span class="gray-text">full animation support</span></li>
</ul>
<p>Gain full animation control over your Lightbox Borders. Animate the Border Width, Color, or Radius (per corner). Animated Borders can also optionally scale. Like many Boxaroo settings, Border settings are modeled after CSS syntax - to make things as comfortable and familiar as possible.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">2D/3D Transformations</h3>
<ul class="inline-ul">
<li><span class="gray-text">flip, rotate, skew, translate, scale</span></li>
</ul>
<p>Apply 2D and 3D CSS3 Animations to individual Lightboxes with ease. Just set the degree or amount of the transformation and Boxaroo will handle all the animation ballistics. Use multiple transformations, adjust the perspective, and even chain them with Frame Animations (animations that kick in once the Lightbox has entered). </p>
</div>
</article>
</div>
</div>
</section>
<div class="see-through full-see-through positioning">
<div class="container clr">
<h2>Component Positioning</h2>
<img src="images/monitor.png" style="float:left;"/>
<p>To keep things simple, 25 pre-defined locations are setup on the screen. Just pick a number to position any Component. If you use 2 position numbers, Boxaroo will animate your Component from the first position to the second. Boxaroo also includes settings to offset the Component position for greater positioning precision.</p>
</div>
</div><br/><br/><br/>
<!-- FRAME ANIMATIONS -->
<section class="container clr">
<div class="row">
<div class="col span_12">
<div class="title-medium">
<h3>Frame Animations [ Looped Animation Tricks ]</h3>
</div>
</div>
</div>
<div id="rotation_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">Rotation Frame Animations</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;">Just set rotation angles along with optional animation settings and let Boxaroo handle the rest. Rotate once, a specific number of times, during navigation only or inside an infinite loop.</p>
</div>
<div class="row portrow">
<div class="portfolio-element art">
<a href="images/bgrotate.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"edge_buffers":"35,35",
"caption":false,
"counter":false,
"frame_animation":true,
"frame_speed":2000,
"rotate":10,
"frame_rotate":-10,
"nav_buttons":"false,false,false",
"bg_pic":104,
"bg_pic_opacity":0.5,
"drop_shadow":"10,15,13,0,#17100a,0.25",
"frame_drop_shadow":"-10,15,13,0,#17100a,0.25",
"bg_color":"#434950,#434950",
"bg_opacity":1,
"bg_tile":false,
"bg_tile_opacity":0,
"bg_speed":"400,600,1300,8000",
"border_radius":"15,15,15,15",
"border":"3,#5e8ad1",
"frame_border":"3,#5e8ad1",
"matte_color":"#434950",
"matte_size":"5,5,5,5",
"gradient_nav_color":"#9bc1ff,#9bc1ff",
"gradient_nav_opacity":"0.15,0.15",
"preloader_color":"#5e8ad1,#FFFFFF",
"highlight_type":false
}'>
<img src="images/thumb19.png" alt="Rotations" class="boxaroo-skin1" title="Rotation" rel="Frame Animations"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="flip_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#253018;margin-bottom:.25em;">Flip Frame Animations</h1>
<p style="color:#282d16;font-size:1.25em;line-height:1.25em;">Flip Lightboxes along the X or Y axis independently. Flip Animations are highlighy configurable with perspective control, complete 360+ degree support, smart setting adjustments built-in, automatic transition handling during navigation and much more.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgflip.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"edge_buffers":"35,35",
"flip":"10,10",
"frame_flip":"-20,-20",
"bg_color":"#2bc507",
"preloader_color":"#FFFFFF,#FFFFFF",
"bg_speed":"400,600,1300,2500",
"matte_color":"#FFFFFF,#71f600",
"matte_clr_speed":2500,
"frame_speed":2500,
"border":"2,#71f600",
"frame_border":"2,#FFFFFF",
"bg_tile_opacity":0,
"bg_opacity":1,
"bg_pic":false,
"gradient_nav_color":"#FFFFFF,#FFFFFF",
"caption":false,
"counter":false,
"nav_buttons":"false,false,false",
"drop_shadow":"-40,40,25,5,#458f07,0.025",
"frame_drop_shadow":"40,-40,25,0,#458f07,0.25",
"gradient_nav_color":"#71f600,#71f600",
"highlight_type":"ellipse",
"highlight_pos":"200,-2000||200,-1000",
"highlight_color":"#c6ff96,#c6ff96,#c6ff96",
"highlight_speed":false,
"highlight_opacity":"0,1,0",
"highlight_stops":"65,75,100",
"highlight_size":"200%,250%",
"highlight_frame_opacity":"0,0.2"
}'>
<img src="images/thumb14.png" alt="3D Flipping" class="boxaroo-skin2" title="Flip" rel="Frame Animations"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="skew_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#253018;margin-bottom:.25em;">Skew Frame Animations</h1>
<p style="color:#282d16;font-size:1.25em;line-height:1.25em;">Throw Skews into your Animation Combos for some interesting distortion effects. Skew Transformations support all of the exciting features that other Frame Animation Transformations support, as well as independent axis control.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgskew.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"counter":false,
"caption":false,
"frame_animation":true,
"frame_speed":2000,
"skew":"10,0",
"frame_skew":"-15,0",
"preloader_color":"#f7d77d,#FFFFFF",
"drop_shadow":"0,0,5,5,#eeb718,0.75",
"frame_drop_shadow":"0,0,20,5,#f7d77d,0.5",
"matte_color":"#f7d77d",
"matte_bg":false,
"edge_buffers":"40,40",
"lightbox_movement":"center,center",
"nav_movement":false,
"gradient_nav_color":"#f7d77d,#f7d77d",
"bg_color":"#f7d77d,#eeb718",
"bg_tile_opacity":0,
"bg_pic_opacity":0.1,
"border":"1,#f7d77d",
"frame_border":"1,#f7d77d",
"content_size":"0.75,0.75",
"nav_buttons":"false,false,false"
}'>
<img src="images/thumb15.png" alt="Skewing" class="boxaroo-skin3" title="Skew" rel="Frame Animations"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="scale_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#253018;margin-bottom:.25em;">Scale Frame Animations</h1>
<p style="color:#282d16;font-size:1.25em;line-height:1.25em;">Looped Scale Transformations can provide an interesting and subtle effect, adding an organic element and breathing life into the environment. Scaling supports all scenarios including starting large/small, grow/shrink, independent width/height control, and smart Boxaroo transitions.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgscale.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"edge_buffers":"40,40",
"scale":"0.75,0.75",
"frame_scale":"1,1",
"bg_pic":false,
"bg_pic_opacity":0,
"nav_buttons":"false,false,false",
"preloader_color":"#ee509f,#ee509f",
"drop_shadow":"0,5,10,0,#d14e8f,0.85",
"frame_drop_shadow":"0,20,15,15,#d14e8f,0.25",
"matte_color":"#FFFFFF",
"gradient_nav_color":"#FFFFFF,#FFFFFF",
"gradient_nav_opacity":"1,1",
"caption":false,
"counter":false,
"highlight_speed":false,
"bg_color":"#ee509f,#ff93ca",
"bg_tile_opacity":0,
"highlight_frame_opacity":"0,0.2",
"gradient_nav_color":"#ff007e,#ff007e",
"gradient_nav_opacity":"0.5,0.5"
}'>
<img src="images/thumb16.png" alt="3D Scaling" class="boxaroo-skin2" title="Scale" rel="Frame Animations"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="translate_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">Translation Frame Animations</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;">Animate the Lightbox along the X and Y axis independently or use Translations to offset the static position of your Lightbox. Couple Translations with other Frame Animation Transformations for incredible animation control.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgtranslate.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"caption":false,
"counter":false,
"nav_buttons":"false,false,false",
"translate":"0,-20",
"frame_translate":"0,20",
"border":"5,#FFFFFF",
"frame_border":"5,#ef4848",
"drop_shadow":"0,5,13,0,#fabda7,0.5",
"frame_drop_shadow":"0,5,13,0,#fabda7,0.5",
"frame_animation":true,
"frame_nav_override":true,
"edge_buffers":"40,40",
"bg_tile_opacity":0.01,
"matte_color":"#df2428",
"matte_bg":false,
"bg_pic":false,
"bg_color":"#ee484b,#de2428",
"gradient_nav_color":"#FFFFFF,#FFFFFF",
"gradient_nav_opacity":"0.15,0.15",
"preloader_color":"#FFFFFF,#FFFFFF"
}'>
<img src="images/thumb17.png" alt="3D Translations" class="boxaroo-skin6" title="Translations" rel="Frame Animations"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="combo_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">Frame Animation Combinations</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;">Have fun creating crazy Frame Animation combinations for wild effects.<br/>Subtle Frame Animation combinations are perfect for simulating organic movements.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgcombo.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"bg_pic":214,
"bg_pic_opacity":0.10,
"bg_tile_opacity":0.1,
"bg_color":"#3ca0e4,#a9dcff",
"bg_opacity":1,
"nav_buttons":"false,false,false",
"skew":"0,0",
"frame_skew":"0,0",
"translate":"0,600",
"frame_translate":"0,-100",
"rotate":"-60",
"frame_rotate":"-10",
"flip":"90,0",
"frame_flip":"0,0",
"scale":"0.25,0.25",
"frame_scale":"1,1",
"edge_buffers":"45,45",
"drop_shadow":"0,0,0,0,#2373a9,0.35",
"frame_drop_shadow":"200,70,50,0,#2373a9,0.15",
"border":"3,#3ca0e4",
"frame_border":"3,#a9dcff",
"frame_speed":4000,
"matte_color":"#3ca0e4",
"preloader_color":"#FFFFFF,#a9dcff",
"gradient_nav_color":"#FFFFFF,#FFFFFF",
"caption":false,
"counter":false,
"highlight_type":"ellipse",
"highlight_pos":"-2000,4000||-1000,-100",
"highlight_color":"#ffffff,#ffffff,#ffffff",
"highlight_speed":false,
"highlight_opacity":"0,0.75,0",
"highlight_stops":"4,85,100",
"highlight_size":"200%,250%",
"highlight_frame_opacity":"0.85,0.5"
}'>
<img src="images/thumb18.png" alt="Unlimited Combinations" class="boxaroo-skin2" title="Frame Animation Combinations" rel="Frame Animations"/></a>
<div class="extra-info portfolio-image"></div>
</div>
</div><br>
<p style="font-size:16px;">Frame Animations are optional animation loops that occur when a Lightbox is typically sitting still. They can add an incredible level of depth and realism to any scenerio as well as extend opening and closing animations into more complex chained transitions.</p><br>
<div class="row">
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Frame Animations</h3>
<ul class="inline-ul">
<li><span class="gray-text">how they work</span></li>
</ul>
<p>Several settings have sister Frame Animations settings. They can be understood as the secondary animation point for that setting. When Frame Animations are enabled, Boxaroo will animate a Lightbox entrance as usual, then seamlessly carry out any Frame Animations. This allows for fluid extensions of the entrance and exit animations as well as looped animations while viewing content.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Advanced Controls</h3>
<ul class="inline-ul">
<li><span class="gray-text">iterations and direction</span></li>
</ul>
<p>Once the Lightbox has animated open, the Frame Animation will execute a set number of times. You can control the number of times the Frame Animation should loop, or set it to infinity. You can also control the direction of Frame Animation (Normal, Reverse, Alternate and Alternate-Reverse) yielding creative animations. Speed and Easing controls are also available.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Navigation Override</h3>
<ul class="inline-ul">
<li><span class="gray-text">application levels</span></li>
</ul>
<p>The Navigation Override control gives you a powerful option of how you want Frame Animations applied to your Lightbox Item. Typically, Frame Animations are initiated after the Lightbox Entrance Animation has completed. The Navigation Override Setting allows you to tell Boxaroo you want the Frame Animation to occur during Navigation, rather than when it has finished animating into view. </p>
</div>
</article>
</div>
</div>
<!-- FRAME SLIDER -->
<div class="row row-big-col">
<div class="col span_12">
<section class="slider">
<div class="flexslider frame-slider">
<ul class="slides">
<li><img src="images/frameslide1.png" alt="Boxaroo"></li>
<li><img src="images/frameslide2.png" alt="Boxaroo"></li>
<li><img src="images/frameslide3.png" alt="Boxaroo"></li>
</ul>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Lightbox Movement</h3>
<ul class="inline-ul">
<li><span class="gray-text">directional control</span></li>
</ul>
<p>Every Lightbox Item allows you to control what part of the screen the Lightbox enters and exits. Aside from customizing animations, this allows for creating an illusion that your Gallery is aligned along an axis. Choose an off-screen location, or even use the Origin option to make it appear like the Lightbox is emerging from it's thumbnail. Boxaroo takes measures to make sure all animation settings work well with your movement settings.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Lightbox Size Effect</h3>
<ul class="inline-ul">
<li><span class="gray-text">shrink || grow || match</span></li>
</ul>
<p>The Lightbox Size Effect setting works in conjuction with the Ligthbox Movement setting. Where the movement setting controls the entrance/exit position, the Size Effect setting controls how the Lightbox's dimensions will be affected. Shrink will set the Lightbox to the full dimensions of the screen and shrink to it's final size. Grow will set the dimensions to 0 and grow to it's final size. Match will maintain Lightbox dimensions.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Speed and Easing</h3>
<ul class="inline-ul">
<li><span class="gray-text">forget about timing problems</span></li>
</ul>
<p>With so many animation effects and different options occurring at once, timing could quickly become a problem. Boxaroo cuts out the risk of timing issues by eliminating independent animation times and basing all animation effects around the Lightbox. Control the timing and easing of the Lightbox and all animation effects will elegantly follow suit. The Lightbox Content allows for Fading options using separate timing controls. </p>
</div>
</article>
</div>
</div>
<br><br><br></section>
<div class="see-through full-see-through frames">
<div class="container clr">
<h2>Approach It Like A Designer</h2>
<p>No coding experience is required, and Boxaroo takes a mere 3 lines of code for a complete setup - the rest is optional customization. All settings are as simplified as possible and many directly match CSS syntax. Boxaroo builds the animations for you, and changing graphics is a matter of picking numbers. You'll be happy to know you can leave your designer hat on. </p>
</div>
</div><br/><br/><br/>
<!-- EVENTS -->
<section class="container clr">
<div class="row">
<div class="col span_12">
<div class="title-medium">
<h3>Events [ And Other Goodies ]</h3>
</div>
</div>
</div>
<div class="row">
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Gallery Navigation</h3>
<ul class="inline-ul">
<li><span class="gray-text">keyboard || mouse || finger || stylus</span></li>
</ul>
<p>Boxaroo provides 7 customizable ways for user Navigation: (Keyboard, Virtual Mouse Swiping, Gradient Navigation Overlays, Touch, Swipe, Stylus and the Mousewheel) - allowing you to choose how users interact with your content. Additionally, Boxaroo allows you to control many aspects of navigation events such as Required Swiping Distance, Gesture Tolerance, Reverse Navigation Direction, Navigation Axis Selection and much more.
</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Thumbnails</h3>
<ul class="inline-ul">
<li><span class="gray-text">hover plugin yielding</span></li>
</ul>
<p>Although Boxaroo comes packing extensive Hover Effects options, you may already have a special plugin, or your own effects. Boxaroo is able to yield to your preferred plugin or code. This makes it perfect for effortlessly retaining existing thumbnail styles and effects in templates and themes. Boxaroo Thumbnail Effects have Icon and Caption Modes, and include a ton of options like 2D/3D Transformation hover effects.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Stacking Order</h3>
<ul class="inline-ul">
<li><span class="gray-text">from the bottom up</span></li>
</ul>
<p>All Components are layered in a logical order - with navigation elements taking priority. However, in case you decide to get tricky and include custom Lightbox interactivity or functionality through the HTML Element Component(s) you can change the stacking order with a single setting. Boxaroo allows you to shuffle how Components are layered on every Lightbox Item.</p>
</div>
</article>
</div>
</div>
<!-- EVENTS SLIDER -->
<div class="row row-big-col">
<div class="col span_12">
<section class="slider">
<div class="flexslider events-slider">
<ul class="slides">
<li><img src="images/eventsslide1.png" alt="Boxaroo"></li>
<li><img src="images/eventsslide2.png" alt="Boxaroo"></li>
<li><img src="images/eventsslide3.png" alt="Boxaroo"></li>
</ul>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Browser Dictation</h3>
<ul class="inline-ul">
<li><span class="gray-text">browser level control</span></li>
</ul>
<p>Boxaroo is a mix of CSS3 Transitions, CSS3 Keyframe Animations and JavaScript Animations. Feature detection is used to give hardware-accelerated CSS3 animations priority. Experiment with your Lightbox customizations and compare tightly written JavaScript animation performance against CSS3 performance - in specific browsers. You might be surprised.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Dynamic Class Assignment</h3>
<ul class="inline-ul">
<li><span class="gray-text">adding more style</span></li>
</ul>
<p>Just in case Boxaroo doesn't have a setting for what you're trying to achieve, you can dynamically assign classes to any Component and the Lightbox. These classes are applied before Components are displayed on screen and cleared when a Lightbox is closed, or when the user Navigates. Any CSS properties that are able to animate, and not controlled by a Boxaroo setting, will.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Presentation Controls</h3>
<ul class="inline-ul">
<li><span class="gray-text">dimensions and buffers</span></li>
</ul>
<p>An important aspect of any Lightbox is image handling. Rather than controlling the size of the image, Boxaroo allows you to control the distance between the edge of the browser and the Lightbox - calculating everything else for you. This allows for fluid, real-time scaling. Content is preloaded using AJAX and you can optionally deliver different content to tablets and/or mobile devices.</p>
</div>
</article>
</div>
</div><br><br><br>
</section>
<div class="see-through full-see-through adaptive">
<div class="container clr">
<h2>User Comfort</h2>
<p>Boxaroo provides 7 customizable ways users can navigate your content to insure the utmost level of comfort. Boxaroo supports Touch Events, Gestures, Virtual Mouse Events, Keyboard navigation, Stylus control, MouseWheel interaction and customizable Gradient Navigation Bar Overlays.</p>
</div>
</div><br/><br/><br/>
<!-- SLIDESHOWS AND FULL-SCREEN MODE -->
<section class="container clr">
<div class="row">
<div class="col span_12">
<div class="title-medium">
<h3>Flexibility [ Slideshows, Full-Size Mode, JavaScript Hooks and More ]</h3>
</div>
</div>
</div>
<div class="row">
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Slideshows</h3>
<ul class="inline-ul">
<li><span class="gray-text">customize and enable</span></li>
</ul>
<p>Slideshows retain all defined settings. Slides can be displayed for unique durations and the Slideshow can optionally close on completion. Use Slideshows with Full Size Mode and HTML Elements for a full presentation platform.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Counter Customization</h3>
<ul class="inline-ul">
<li><span class="gray-text">countdown to awesome</span></li>
</ul>
<p>Slideshows can optionally display a standard countdown progress bar. Both elements of the progress bar can be customized and set up with looped color animations to match your Lightbox Environment.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Slideshows Per Lightbox</h3>
<ul class="inline-ul">
<li><span class="gray-text">not your typical slideshow</span></li>
</ul>
<p>Slideshows can be a couple of Lightboxes inside a Gallery or the entire Gallery itself. You can even use multiple slideshows within the same Gallery, or use a single image for a Slideshow.</p>
</div>
</article>
</div>
</div>
<div id="fullscreen_el" class="demohtmlel full_size_demo_container">
<img src="images/samples/1/44.jpg" class="full_size_demo_image"/>
<h1 class="full_size_demo_h1">Full Size Mode</h1>
<p class="full_size_demo_p">Full Size Mode moves the Lightbox image into the background and removes the Lightbox. 3 Animated HTML Element Components allow you to inject any code you want directly into the environment. This allows Boxaroo to handle any content and maintain its scalability and customization options.</p><br>
<a href="http://13141618.taobao.com/" target="_blank" class="full_size_demo_a">> Art courtesy of: ZUCO</a></p>
</div>
<div class="portfolio-element art">
<a href="images/samples/1/44.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"bg_pic_opacity":0.10,
"bg_tile_opacity":0,
"bg_color":"#FFFFFF,#bff6fb",
"bg_speed":"300,300,400,15000",
"bg_opacity":1,
"html_els":"#fullscreen_el,false,false",
"html_els_pos":"18,25,23||25,25,23",
"html_els_offsets":"0,-600||0,0||0,0",
"html_els_m_offsets":"0,-40||0,0||0,0",
"html_els_m_speed":"1000,500,500",
"html_els_ranges":"30,70||30,70||30,70",
"caption":false,
"counter":false,
"nav_style":"2,2,2",
"nav_buttons_opacity":"0.5,1||0.5,1||0.25,0.5",
"nav_buttons":"false,true,true",
"full_size":true,
"slideshow":"false,true",
"slide_display_time":3000,
"close_at_end":true,
"slideshow_counter_direction":"right",
"slideshow_container_color":"#828282,#bfbfbf",
"slideshow_counter_color":"#bfbfbf,#828282",
"preloader_style":5,
"preloader_color":"#ff3934,#FFFFFF",
"nav_pos":"1,1,22||1,1,22",
"nav_buttons_offsets":"0,0||0,0||0,-30"
}'>
<img src="images/thumb13.png" alt="Full Size Mode" class="boxaroo-skin2" title="Full Size Mode" rel="Slideshows"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="htmlels_el" class="demohtmlel ext_demo_container">
<h1 class="ext_demo_h1">Extended Interaction</h1>
<p class="ext_demo_p">Full Size Mode removes the Lightbox from the environment and uses the Background Image Overlay for content placement. All customization options remain available and you can use animated HTML Element Components to accentuate content or add interactivity.<br/>The Boxaroo Box Mock-Up above is just an HTML Element, go ahead and give it a hover.</p>
</div>
<div id="demoboxtooltip" style="display:none;z-index:99999999999999999;width:38em;background:rgba(255,255,255,0.95);border-radius:5px;margin-top:1.85em;margin-left:1.85em;padding:0.85em;">
<h1 style="color:#686666;font-size:1.5em;letter-spacing:0.05em;line-height:1.5em;margin:0;font-family:'open_sanslight', sans-serif;text-align:center;">Do What You Want</h1>
<p style="color:#686666;font-size:1em;line-height:1.75em;text-align:center;">Design your HTML however you like, then tell Boxaroo to use it as a Component. Any functionality and animation is automatically injected into the Environment.</p>
</div>
<script type="text/javascript">
$(window).load(function(){
$('#demobox').on({'mouseenter':function(e){
$('#demoboxtooltip').css({'width':'40em','z-index':999999999999999999,'display':'block'});
}}).on({'mouseleave':function(e){
$('#demoboxtooltip').stop(true,true).fadeOut(250);
}}).on({'click':function(e){ alert("You clicked this HTML Element!");
}});
$('#demobox').on({'mousemove':function(e){
var mouseX=e.pageX, mouseY=e.pageY;
$('#demoboxtooltip').css({'position':'absolute','top':mouseY+'px','left':mouseX+'px'});
}});
});
</script>
<div id="demobox" class="demohtmlel demo_box_container">
<img src="images/samples/demobox.png" class="demo_box_img"/>
</div>
<div class="row portrow">
<div class="portfolio-element art">
<a href="Boxaroo/images/Backgrounds/bg_63.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"bg_color":"#FFFFFF",
"bg_speed":"400,600,1300,15000",
"full_size":true,
"html_els":"false,#demobox,false",
"html_els_pos":"18,18,23||22,25,23",
"html_els_offsets":"0,-200||0,-500||0,0",
"html_els_m_offsets":"0,-400||0,30||0,0",
"html_els_m_speed":"700,500,500",
"html_els_speed":"500,500||500,800||500,500",
"html_els_ranges":"10,70||10,70||10,70",
"caption":false,
"counter":false,
"nav_buttons":"false,true,true",
"nav_pos":"1,24,20||1,24,20",
"nav_buttons_offsets":"0,0||60,-20||-80,-20",
"slideshow":"false,true",
"slide_display_time":3000,
"nav_style":"18,18,18",
"close_at_end":true,
"slideshow_counter_direction":"right",
"slideshow_container_color":"#828282,#bfbfbf",
"nav_buttons_opacity":"1,1||0.5,1||0.5,1",
"slideshow_counter_color":"#bfbfbf,#828282",
"preloader_color":"#FFFFFF,#f4eded"
}'>
<img src="images/thumb20.png" alt="Extended Interaction" class="boxaroo-skin1" title="Extended Interaction" rel="Slideshows"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="cssfilter_el" class="demohtmlel" style="background:none;border-radius:0px;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#000000;margin-bottom:.25em;">CSS Image Filters</h1>
<p style="color:#000000;font-size:1.25em;line-height:1.25em;font-family:Arial, Helvetica, sans-serif;"> Animate Image Blurs, Grayscale, Sepia, Hue Rotations, Brightness, Contrast and Saturation - in hardware accelerated glory <em>(limited browser support)</em>.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgfilter.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"gradient_nav_color":"#fbf0da,#fbf0da",
"highlight_color":"#fbf0da,#fbf0da,#fbf0da",
"bg_pic":false,
"bg_tile_opacity":"0",
"bg_color":"#f1e5cf",
"bg_opacity":1,
"caption":false,
"counter":false,
"drop_shadow":"-10,-10,15,5,#767075,0.15",
"frame_drop_shadow":"0,5,15,5,#767075,0.35",
"nav_buttons":"false,false,false",
"slideshow":"false,true",
"slide_display_time":8000,
"border":"1,#f0e7ee",
"frame_border":"1,#f0e7ee",
"matte_size":"0,0,0,0",
"matte_color":"#4b2844",
"matte_bg":false,
"preloader_color":"#4b2844,#4b2844",
"preloader_style":6,
"lightbox_effect":"grow,shrink",
"lightbox_movement":"center,center",
"frame_animation":true,
"frame_count":"infinite",
"highlight_frame_opacity":"0.1,0.15",
"border_radius":"20,20,20,20",
"highlight_pos":"800,800||-1500,-1500",
"content_blur":"0px",
"frame_content_blur":"2px",
"frame_speed":3000,
"scale":"1,1",
"frame_scale":"1,1"
}'>
<img src="images/thumb21.png" alt="Image Filters" class="boxaroo-skin4" title="CSS Image Filters" rel="Slideshows"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="slideshow_el" class="demohtmlel" style="background:none;border-radius:0px;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">Slideshows</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;font-family:Arial, Helvetica, sans-serif;">Setup your Lightboxes however you like, then just enable Slideshows with one setting.<br/>They can even begin and end inside Galleries.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgslideshow.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"bg_pic":false,
"bg_pic_opacity":0,
"bg_tile":38,
"bg_tile_opacity":0.35,
"bg_color":"#1d1d1d",
"bg_opacity":1,
"bg_speed":"400,600,1300,9000",
"caption":false,
"counter":false,
"nav_buttons":"false,true,true",
"slideshow":"true,true",
"slide_display_time":6000,
"edge_buffers":"35,35",
"close_at_end":false,
"matte_color":"#02bb78",
"nav_style":"1,36,36",
"border":"2,#02bb78",
"frame_border":"2,#02bb78",
"slideshow_counter_direction":"right",
"slideshow_container_color":"#1d1d1d,#02bb78",
"preloader_color":"#02bb78,#a6e9d8",
"slideshow_counter_color":"#02bb78,#1d1d1d",
"nav_buttons":"false,false,false",
"highlight_pos":"-1000,-1300||-300,-100",
"highlight_color":"#a7ffb4,#a7ffb4,#a7ffb4",
"highlight_speed":6000,
"highlight_opacity":"0,0.65,0",
"highlight_stops":"50,80,95",
"highlight_size":"300%,350%",
"highlight_frame_opacity":"0.75,0.25"
}'>
<img src="images/thumb22.png" alt="Slideshows" class="boxaroo-skin2" title="Slideshows" rel="Slideshows"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="slideshowcounters_el" class="demohtmlel" style="background:none;border-radius:0px;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">Slideshow Counters</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;font-family:Arial, Helvetica, sans-serif;">Customize the Slideshow Counter position, size, direction and color animations.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgslideshowcounter.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"bg_pic":false,
"bg_color":"#20091b,#3c1236",
"bg_tile_opacity":0.015,
"caption":false,
"counter":false,
"nav_buttons":"false,false,false",
"slideshow":"true,true",
"slide_display_time":4000,
"border":"2,#855a7d",
"frame_border":"2,#855a7d",
"close_at_end":false,
"drop_shadow":"0,0,3,7,#4a1643,0.5",
"frame_drop_shadow":"0,0,25,15,#592952,0.9",
"slideshow_counter_direction":"left",
"slideshow_container_color":"#fcffc8,#855a7d",
"slideshow_counter_color":"#3c1236,#bfc0aa",
"matte_color":"#6d3c64",
"preloader_color":"#bfc0aa,#bfc0aa",
"matte_bg":false,
"highlight_pos":"-2000,-2300||-300,-100",
"highlight_color":"#6d3c64,#6d3c64,#6d3c64",
"highlight_speed":6000,
"highlight_opacity":"0,0.65,0",
"highlight_stops":"50,80,95",
"highlight_size":"300%,350%",
"highlight_frame_opacity":"0.75,0.5"
}'>
<img src="images/thumb23.png" alt="Slideshow Timers" class="boxaroo-skin3" title="Slideshow Counters" rel="Slideshows"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="jshooks_el" class="demohtmlel" style="background:none;border-radius:0px;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">JavaScript Hooks</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;font-family:Arial, Helvetica, sans-serif;">Hooks allow you to use custom functions at specific times based on events or interaction. To make things easy, <span style="color:#FFFFFF;font-weight:bold;">this</span> refers to the Boxaroo Object, containing all Boxaroo Elements.</p>
</div>
<script type="text/javascript">
function js_open(){alert('JavaScript Hook: Boxaroo Lightbox has opened. Function js_open() called.');};
function js_close(){alert("JavaScript Hook: Boxaroo Lightbox has closed. Function js_close() called.");};
function js_navigate(){alert("JavaScript Hook: Boxaroo Lightbox navigation has occurred. Function js_navigate() called.");};
function js_nav_fwd(){alert("JavaScript Hook: Boxaroo Lightbox navigation forward has occurred. Function js_nav_fwd() called.");};
function js_nav_back(){alert("JavaScript Hook: Boxaroo Lightbox navigation backward has occurred. Function js_nav_back() called.");};
function js_next_hover(){alert("JavaScript Hook: Boxaroo Lightbox Next Button has been hovered. Function js_next_hover() called.");};
function js_prev_hover(){alert("JavaScript Hook: Boxaroo Lightbox Previous Button has been hovered. Function js_prev_hover() called.");};
function js_close_hover(){alert("JavaScript Hook: Boxaroo Lightbox Close Button has been hovered. Function js_close_hover() called.");};
function js_slideshow_end(){alert("JavaScript Hook: Boxaroo Lightbox Slideshow has ended. Function js_slideshow_end() called.");};
function js_el1_click(){alert("JavaScript Hook: Boxaroo Lightbox HTML Element 1 has been clicked. Function js_el1_click() called.");};
function js_el2_click(){alert("JavaScript Hook: Boxaroo Lightbox HTML Element 2 has been clicked. Function js_el2_click() called.");};
function js_el3_click(){alert("JavaScript Hook: Boxaroo Lightbox HTML Element 3 has been clicked. Function js_el3_click() called.");};
</script>
<div class="portfolio-element art">
<a href="images/bgjs.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"bg_pic":false,
"bg_color":"#ff8010",
"bg_opacity":1,
"bg_tile_opacity":0.01,
"caption":false,
"counter":false,
"nav_buttons":"false,false,false",
"drop_shadow":"0,0,10,5,#c9650d,0.02",
"frame_drop_shadow":"0,0,20,2,#c9650d,0.7",
"border":"2,#ffe786",
"frame_border":"2,#ffe786",
"slideshow":"false,true",
"matte_color":"#ff8010",
"js_open":"js_open",
"js_open_nav":"js_open",
"js_close":"js_close",
"js_navigate":"js_navigate",
"js_nav_fwd":"js_nav_fwd",
"js_nav_back":"js_nav_back",
"js_prev_hover":"js_prev_hover",
"js_next_hover":"js_next_hover",
"js_close_hover":"js_close_hover",
"js_slideshow_end":"js_slideshow_end",
"js_el1_click":"js_el1_click",
"js_el2_click":"js_el2_click",
"js_el3_click":"js_el3_click",
"gradient_nav_color":"#ffe786,#ffe786",
"preloader_color":"#FFFFFF,#FFFFFF",
"frame_animation":true,
"highlight_pos":"-1000,-300||-300,-100",
"highlight_color":"#ffbf86,#ffe786,#ffbf86",
"highlight_speed":6000,
"highlight_opacity":"0,0.65,0",
"highlight_stops":"80,85,95",
"highlight_size":"300%,350%",
"highlight_frame_opacity":"1,0.5"
}'>
<img src="images/thumb24.png" alt="JavaScript Hooks" class="boxaroo-skin6" title="JavaScript Hooks" rel="Slideshows"/></a>
<div class="extra-info portfolio-image"></div>
</div>
</div>
<br>
<div class="row">
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Full Size Mode</h3>
<ul class="inline-ul">
<li><span class="gray-text">do it big</span></li>
</ul>
<p>Full Size Mode gets the most out of your content by making it full screen. All defined settings remain untouched and you still have control over Boxaroo Components. You can apply Full Size Mode to a single Lightbox within a Gallery and Boxaroo will automatically toggle between Standard and Full Size Modes during navigation.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">CSS Image Filters</h3>
<ul class="inline-ul">
<li><span class="gray-text">experimental fun</span></li>
</ul>
<p>Although still in the experimental stages and with limited browser support, CSS Image Filter Animations will give you a little extra something to have fun with. Animate Image Blurs, Grayscale, Sepia, Hue Rotations, Brightness, Contrast and Saturation - in hardware accelerated glory. When the time comes, Boxaroo is ready.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">JavaScript Hooks</h3>
<ul class="inline-ul">
<li><span class="gray-text">for the JS junkies</span></li>
</ul>
<p>Just in case there is something truly specific that Boxaroo has missed, JavaScript Hooks are built in and ready to extend Boxaroo's functionality. Feel confident calling your custom functions to action with any of the 12 Boxaroo's JavaScript Hooks. The this keyword inside your function references the Boxaroo Object - which neatly contains all elements. </p>
</div>
</article>
</div>
</div>
</section>
<div class="to-top"></div>
</body>
</html>
JS代码(main.js):
(function(e){
function t(e){
if(e in u.style)return e;
var t=["Moz","Webkit","O","ms"],n=e.charAt(0).toUpperCase()+e.substr(1);
if(e in u.style)return e;
for(e=0;
e<t.length;
++e){
var r=t[e]+n;
if(r in u.style)return r}
}
function n(e){
"string"===typeof e&&this.parse(e);
return this}
function r(t,n,r,i){
var s=[];
e.each(t,function(t){
t=e.camelCase(t);
t=e.transit.propertyMap[t]||e.cssProps[t]||t;
t=t.replace(/([A-Z])/g,function(e){
return"-"+e.toLowerCase()}
);
-1===e.inArray(t,s)&&s.push(t)}
);
e.cssEase[r]&&(r=e.cssEase[r]);
var u=""+o(n)+" "+r;
0<parseInt(i,10)&&(u+=" "+o(i));
var a=[];
e.each(s,function(e,t){
a.push(t+" "+u)}
);
return a.join(",")}
function i(t,n){
n||(e.cssNumber[t]=!0);
e.transit.propertyMap[t]=a.transform;
e.cssHooks[t]={
get:function(n){
return e(n).css("transit:transform").get(t)}
,set:function(n,r){
var i=e(n).css("transit:transform");
i.setFromString(t,r);
e(n).css({
"transit:transform":i}
)}
}
}
function s(e,t){
return"string"===typeof e&&!e.match(/^[\-0-9\.]+$/)?e:""+e+t}
function o(t){
e.fx.speeds[t]&&(t=e.fx.speeds[t]);
return s(t,"ms")}
e.transit={
version:"0.9.9",propertyMap:{
marginLeft:"margin",marginRight:"margin",marginBottom:"margin",marginTop:"margin",paddingLeft:"padding",paddingRight:"padding",paddingBottom:"padding",paddingTop:"padding"}
,enabled:!0,useTransitionEnd:!1}
;
var u=document.createElement("div"),a={
}
,f=-1<navigator.userAgent.toLowerCase().indexOf("chrome");
a.transition=t("transition");
a.transitionDelay=t("transitionDelay");
a.transform=t("transform");
a.transformOrigin=t("transformOrigin");
u.style[a.transform]="";
u.style[a.transform]="rotateY(90deg)";
a.transform3d=""!==u.style[a.transform];
var l=a.transitionEnd={
transition:"transitionend",MozTransition:"transitionend",OTransition:"oTransitionEnd",WebkitTransition:"webkitTransitionEnd",msTransition:"MSTransitionEnd"}
[a.transition]||null,c;
for(c in a)a.hasOwnProperty(c)&&"undefined"===typeof e.support[c]&&(e.support[c]=a[c]);
u=null;
e.cssEase={
_default:"ease","in":"ease-in",out:"ease-out","in-out":"ease-in-out",snap:"cubic-bezier(0,1,.5,1)",easeOutCubic:"cubic-bezier(.215,.61,.355,1)",easeInOutCubic:"cubic-bezier(.645,.045,.355,1)",easeInCirc:"cubic-bezier(.6,.04,.98,.335)",easeOutCirc:"cubic-bezier(.075,.82,.165,1)",easeInOutCirc:"cubic-bezier(.785,.135,.15,.86)",easeInExpo:"cubic-bezier(.95,.05,.795,.035)",easeOutExpo:"cubic-bezier(.19,1,.22,1)",easeInOutExpo:"cubic-bezier(1,0,0,1)",easeInQuad:"cubic-bezier(.55,.085,.68,.53)",easeOutQuad:"cubic-bezier(.25,.46,.45,.94)",easeInOutQuad:"cubic-bezier(.455,.03,.515,.955)",easeInQuart:"cubic-bezier(.895,.03,.685,.22)",easeOutQuart:"cubic-bezier(.165,.84,.44,1)",easeInOutQuart:"cubic-bezier(.77,0,.175,1)",easeInQuint:"cubic-bezier(.755,.05,.855,.06)",easeOutQuint:"cubic-bezier(.23,1,.32,1)",easeInOutQuint:"cubic-bezier(.86,0,.07,1)",easeInSine:"cubic-bezier(.47,0,.745,.715)",easeOutSine:"cubic-bezier(.39,.575,.565,1)",easeInOutSine:"cubic-bezier(.445,.05,.55,.95)",easeInBack:"cubic-bezier(.6,-.28,.735,.045)",easeOutBack:"cubic-bezier(.175,.885,.32,1.275)",easeInOutBack:"cubic-bezier(.68,-.55,.265,1.55)"}
;
e.cssHooks["transit:transform"]={
get:function(t){
return e(t).data("transform")||new n}
,set:function(t,r){
var i=r;
i instanceof n||(i=new n(i));
t.style[a.transform]="WebkitTransform"===a.transform&&!f?i.toString(!0):i.toString();
e(t).data("transform",i)}
}
;
e.cssHooks.transform={
set:e.cssHooks["transit:transform"].set}
;
"1.8">e.fn.jquery&&(e.cssHooks.transformOrigin={
get:function(e){
return e.style[a.transformOrigin]}
,set:function(e,t){
e.style[a.transformOrigin]=t}
}
,e.cssHooks.transition={
get:function(e){
return e.style[a.transition]}
,set:function(e,t){
e.style[a.transition]=t}
}
);
i("scale");
i("translate");
i("rotate");
i("rotateX");
i("rotateY");
i("rotate3d");
i("perspective");
i("skewX");
i("skewY");
i("x",!0);
i("y",!0);
n.prototype={
setFromString:function(e,t){
var r="string"===typeof t?t.split(","):t.constructor===Array?t:[t];
r.unshift(e);
n.prototype.set.apply(this,r)}
,set:function(e){
var t=Array.prototype.slice.apply(arguments,[1]);
this.setter[e]?this.setter[e].apply(this,t):this[e]=t.join(",")}
,get:function(e){
return this.getter[e]?this.getter[e].apply(this):this[e]||0}
,setter:{
rotate:function(e){
this.rotate=s(e,"deg")}
,rotateX:function(e){
this.rotateX=s(e,"deg")}
,rotateY:function(e){
this.rotateY=s(e,"deg")}
,scale:function(e,t){
void 0===t&&(t=e);
this.scale=e+","+t}
,skewX:function(e){
this.skewX=s(e,"deg")}
,skewY:function(e){
this.skewY=s(e,"deg")}
,perspective:function(e){
this.perspective=s(e,"px")}
,x:function(e){
this.set("translate",e,null)}
,y:function(e){
this.set("translate",null,e)}
,translate:function(e,t){
void 0===this._translateX&&(this._translateX=0);
void 0===this._translateY&&(this._translateY=0);
null!==e&&void 0!==e&&(this._translateX=s(e,"px"));
null!==t&&void 0!==t&&(this._translateY=s(t,"px"));
this.translate=this._translateX+","+this._translateY}
}
,getter:{
x:function(){
return this._translateX||0}
,y:function(){
return this._translateY||0}
,scale:function(){
var e=(this.scale||"1,1").split(",");
e[0]&&(e[0]=parseFloat(e[0]));
e[1]&&(e[1]=parseFloat(e[1]));
return e[0]===e[1]?e[0]:e}
,rotate3d:function(){
for(var e=(this.rotate3d||"0,0,0,0deg").split(","),t=0;
3>=t;
++t)e[t]&&(e[t]=parseFloat(e[t]));
e[3]&&(e[3]=s(e[3],"deg"));
return e}
}
,parse:function(e){
var t=this;
e.replace(/([a-zA-Z0-9]+)\((.*?)\)/g,function(e,n,r){
t.setFromString(n,r)}
)}
,toString:function(e){
var t=[],n;
for(n in this)if(this.hasOwnProperty(n)&&(a.transform3d||!("rotateX"===n||"rotateY"===n||"perspective"===n||"transformOrigin"===n)))"_"!==n[0]&&(e&&"scale"===n?t.push(n+"3d("+this[n]+",1)"):e&&"translate"===n?t.push(n+"3d("+this[n]+",0)"):t.push(n+"("+this[n]+")"));
return t.join(" ")}
}
;
e.fn.transition=e.fn.transit=function(t,n,i,s){
var u=this,f=0,c=!0;
"function"===typeof n&&(s=n,n=void 0);
"function"===typeof i&&(s=i,i=void 0);
"undefined"!==typeof t.easing&&(i=t.easing,delete t.easing);
"undefined"!==typeof t.duration&&(n=t.duration,delete t.duration);
"undefined"!==typeof t.complete&&(s=t.complete,delete t.complete);
"undefined"!==typeof t.queue&&(c=t.queue,delete t.queue);
"undefined"!==typeof t.delay&&(f=t.delay,delete t.delay);
"undefined"===typeof n&&(n=e.fx.speeds._default);
"undefined"===typeof i&&(i=e.cssEase._default);
n=o(n);
var h=r(t,n,i,f),p=e.transit.enabled&&a.transition?parseInt(n,10)+parseInt(f,10):0;
if(0===p)return n=c,i=function(e){
u.css(t);
s&&s.apply(u);
e&&e()}
,!0===n?u.queue(i):n?u.queue(n,i):i(),u;
var d={
}
;
n=c;
i=function(n){
var r=0;
"MozTransition"===a.transition&&25>r&&(r=25);
window.setTimeout(function(){
var r=!1,i=function(){
r&&u.unbind(l,i);
0<p&&u.each(function(){
this.style[a.transition]=d[this]||null}
);
"function"===typeof s&&s.apply(u);
"function"===typeof n&&n()}
;
0<p&&l&&e.transit.useTransitionEnd?(r=!0,u.bind(l,i)):window.setTimeout(i,p);
u.each(function(){
0<p&&(this.style[a.transition]=h);
e(this).css(t)}
)}
,r)}
;
!0===n?u.queue(i):n?u.queue(n,i):i();
return this}
;
e.transit.getTransitionValue=r}
)(jQuery);
(function(e,t){
jQuery.easing["jswing"]=jQuery.easing["swing"];
jQuery.extend(jQuery.easing,{
def:"easeOutQuad",swing:function(e,t,n,r,i){
return jQuery.easing[jQuery.easing.def](e,t,n,r,i)}
,easeInQuad:function(e,t,n,r,i){
return r*(t/=i)*t+n}
,easeOutQuad:function(e,t,n,r,i){
return-r*(t/=i)*(t-2)+n}
,easeInOutQuad:function(e,t,n,r,i){
if((t/=i/2)<1)return r/2*t*t+n;
return-r/2*(--t*(t-2)-1)+n}
,easeInCubic:function(e,t,n,r,i){
return r*(t/=i)*t*t+n}
,easeOutCubic:function(e,t,n,r,i){
return r*((t=t/i-1)*t*t+1)+n}
,easeInOutCubic:function(e,t,n,r,i){
if((t/=i/2)<1)return r/2*t*t*t+n;
return r/2*((t-=2)*t*t+2)+n}
,easeInQuart:function(e,t,n,r,i){
return r*(t/=i)*t*t*t+n}
,easeOutQuart:function(e,t,n,r,i){
return-r*((t=t/i-1)*t*t*t-1)+n}
,easeInOutQuart:function(e,t,n,r,i){
if((t/=i/2)<1)return r/2*t*t*t*t+n;
return-r/2*((t-=2)*t*t*t-2)+n}
,easeInQuint:function(e,t,n,r,i){
return r*(t/=i)*t*t*t*t+n}
,easeOutQuint:function(e,t,n,r,i){
return r*((t=t/i-1)*t*t*t*t+1)+n}
,easeInOutQuint:function(e,t,n,r,i){
if((t/=i/2)<1)return r/2*t*t*t*t*t+n;
return r/2*((t-=2)*t*t*t*t+2)+n}
,easeInSine:function(e,t,n,r,i){
return-r*Math.cos(t/i*(Math.PI/2))+r+n}
,easeOutSine:function(e,t,n,r,i){
return r*Math.sin(t/i*(Math.PI/2))+n}
,easeInOutSine:function(e,t,n,r,i){
return-r/2*(Math.cos(Math.PI*t/i)-1)+n}
,easeInExpo:function(e,t,n,r,i){
return t==0?n:r*Math.pow(2,10*(t/i-1))+n}
,easeOutExpo:function(e,t,n,r,i){
return t==i?n+r:r*(-Math.pow(2,-10*t/i)+1)+n}
,easeInOutExpo:function(e,t,n,r,i){
if(t==0)return n;
if(t==i)return n+r;
if((t/=i/2)<1)return r/2*Math.pow(2,10*(t-1))+n;
return r/2*(-Math.pow(2,-10*--t)+2)+n}
,easeInCirc:function(e,t,n,r,i){
return-r*(Math.sqrt(1-(t/=i)*t)-1)+n}
,easeOutCirc:function(e,t,n,r,i){
return r*Math.sqrt(1-(t=t/i-1)*t)+n}
,easeInOutCirc:function(e,t,n,r,i){
if((t/=i/2)<1)return-r/2*(Math.sqrt(1-t*t)-1)+n;
return r/2*(Math.sqrt(1-(t-=2)*t)+1)+n}
,easeInElastic:function(e,t,n,r,i){
var s=1.70158;
var o=0;
var u=r;
if(t==0)return n;
if((t/=i)==1)return n+r;
if(!o)o=i*.3;
if(u<Math.abs(r)){
u=r;
var s=o/4}
else var s=o/(2*Math.PI)*Math.asin(r/u);
return-(u*Math.pow(2,10*(t-=1))*Math.sin((t*i-s)*2*Math.PI/o))+n}
,easeOutElastic:function(e,t,n,r,i){
var s=1.70158;
var o=0;
var u=r;
if(t==0)return n;
if((t/=i)==1)return n+r;
if(!o)o=i*.3;
if(u<Math.abs(r)){
u=r;
var s=o/4}
else var s=o/(2*Math.PI)*Math.asin(r/u);
return u*Math.pow(2,-10*t)*Math.sin((t*i-s)*2*Math.PI/o)+r+n}
,easeInOutElastic:function(e,t,n,r,i){
var s=1.70158;
var o=0;
var u=r;
if(t==0)return n;
if((t/=i/2)==2)return n+r;
if(!o)o=i*.3*1.5;
if(u<Math.abs(r)){
u=r;
var s=o/4}
else var s=o/(2*Math.PI)*Math.asin(r/u);
if(t<1)return-.5*u*Math.pow(2,10*(t-=1))*Math.sin((t*i-s)*2*Math.PI/o)+n;
return u*Math.pow(2,-10*(t-=1))*Math.sin((t*i-s)*2*Math.PI/o)*.5+r+n}
,easeInBack:function(e,t,n,r,i,s){
if(s==undefined)s=1.70158;
return r*(t/=i)*t*((s+1)*t-s)+n}
,easeOutBack:function(e,t,n,r,i,s){
if(s==undefined)s=1.70158;
return r*((t=t/i-1)*t*((s+1)*t+s)+1)+n}
,easeInOutBack:function(e,t,n,r,i,s){
if(s==undefined)s=1.70158;
if((t/=i/2)<1)return r/2*t*t*(((s*=1.525)+1)*t-s)+n;
return r/2*((t-=2)*t*(((s*=1.525)+1)*t+s)+2)+n}
,easeInBounce:function(e,t,n,r,i){
return r-jQuery.easing.easeOutBounce(e,i-t,0,r,i)+n}
,easeOutBounce:function(e,t,n,r,i){
if((t/=i)<1/2.75){
return r*7.5625*t*t+n}
else if(t<2/2.75){
return r*(7.5625*(t-=1.5/2.75)*t+.75)+n}
else if(t<2.5/2.75){
return r*(7.5625*(t-=2.25/2.75)*t+.9375)+n}
else{
return r*(7.5625*(t-=2.625/2.75)*t+.984375)+n}
}
,easeInOutBounce:function(e,t,n,r,i){
if(t<i/2)return jQuery.easing.easeInBounce(e,t*2,0,r,i)*.5+n;
return jQuery.easing.easeOutBounce(e,t*2-i,0,r,i)*.5+r*.5+n}
}
);
e.waitForImages={
hasImageProperties:["backgroundImage","listStyleImage","borderImage","borderCornerImage"]}
;
e.expr[":"].uncached=function(t){
var n=document.createElement("img");
n.src=t.src;
return e(t).is('img[src!=""]')&&!n.complete}
;
e.fn.waitForImages=function(t,n,r){
if(e.isPlainObject(arguments[0])){
n=t.each;
r=t.waitForAll;
t=t.finished}
t=t||e.noop;
n=n||e.noop;
r=!!r;
if(!e.isFunction(t)||!e.isFunction(n)){
throw new TypeError("An invalid callback was supplied.")}
return this.each(function(){
var i=e(this),s=[];
if(r){
var o=e.waitForImages.hasImageProperties||[],u=/url\((['"]?)(.*?)\1\)/g;
i.find("*").each(function(){
var t=e(this);
if(t.is("img:uncached")){
s.push({
src:t.attr("src"),element:t[0]}
)}
e.each(o,function(e,n){
var r=t.css(n);
if(!r){
return true}
var i;
while(i=u.exec(r)){
s.push({
src:i[2],element:t[0]}
)}
}
)}
)}
else{
i.find("img:uncached").each(function(){
s.push({
src:this.src,element:this}
)}
)}
var a=s.length,f=0;
if(a==0){
t.call(i[0])}
e.each(s,function(r,s){
var o=new Image;
e(o).bind("load error",function(e){
f++;
n.call(s.element,f,a,e.type=="load");
if(f==a){
t.call(i[0]);
return false}
}
);
o.src=s.src}
)}
)}
;
e.fn.swipe=function(t){
if(!this)return false;
var n={
fingers:1,threshold:75,swipe:null,swipeLeft:null,swipeRight:null,swipeUp:null,swipeDown:null,swipeStatus:null,click:null,triggerOnTouchEnd:true,allowPageScroll:"auto"}
;
var r="left";
var i="right";
var s="up";
var o="down";
var u="none";
var a="horizontal";
var f="vertical";
var l="auto";
var c="start";
var h="move";
var p="end";
var d="cancel";
var v="ontouchstart"in window,m=v?"touchstart":"mousedown",g=v?"touchmove":"mousemove",y=v?"touchend":"mouseup",b="touchcancel";
var w="start";
if(t.allowPageScroll==undefined&&(t.swipe!=undefined||t.swipeStatus!=undefined))t.allowPageScroll=u;
if(t)e.extend(n,t);
return this.each(function(){
function t(){
var e=S();
if(e<=45&&e>=0)return r;
else if(e<=360&&e>=315)return r;
else if(e>=135&&e<=225)return i;
else if(e>45&&e<135)return o;
else return s}
function S(){
var e=P.x-H.x;
var t=H.y-P.y;
var n=Math.atan2(t,e);
var r=Math.round(n*180/Math.PI);
if(r<0)r=360-Math.abs(r);
return r}
function x(){
return Math.round(Math.sqrt(Math.pow(H.x-P.x,2)+Math.pow(H.y-P.y,2)))}
function T(e,t){
if(n.allowPageScroll==u){
e.preventDefault()}
else{
var c=n.allowPageScroll==l;
switch(t){
case r:if(n.swipeLeft&&c||!c&&n.allowPageScroll!=a)e.preventDefault();
break;
case i:if(n.swipeRight&&c||!c&&n.allowPageScroll!=a)e.preventDefault();
break;
case s:if(n.swipeUp&&c||!c&&n.allowPageScroll!=f)e.preventDefault();
break;
case o:if(n.swipeDown&&c||!c&&n.allowPageScroll!=f)e.preventDefault();
break}
}
}
function N(e,t){
if(n.swipeStatus)n.swipeStatus.call(M,e,t,direction||null,distance||0);
if(t==d){
if(n.click&&(D==1||!v)&&(isNaN(distance)||distance==0))n.click.call(M,e,e.target)}
if(t==p){
if(n.swipe){
n.swipe.call(M,e,direction,distance)}
switch(direction){
case r:if(n.swipeLeft)n.swipeLeft.call(M,e,direction,distance);
break;
case i:if(n.swipeRight)n.swipeRight.call(M,e,direction,distance);
break;
case s:if(n.swipeUp)n.swipeUp.call(M,e,direction,distance);
break;
case o:if(n.swipeDown)n.swipeDown.call(M,e,direction,distance);
break}
}
}
function C(e){
D=0;
P.x=0;
P.y=0;
H.x=0;
H.y=0;
B.x=0;
B.y=0}
function k(e){
e.preventDefault();
distance=x();
direction=t();
if(n.triggerOnTouchEnd){
w=p;
if((D==n.fingers||!v)&&H.x!=0){
if(distance>=n.threshold){
N(e,w);
C(e)}
else{
w=d;
N(e,w);
C(e)}
}
else{
w=d;
N(e,w);
C(e)}
}
else if(w==h){
w=d;
N(e,w);
C(e)}
O.removeEventListener(g,L,false);
O.removeEventListener(y,k,false)}
function L(e){
if(w==p||w==d)return;
var r=v?e.touches[0]:e;
H.x=r.pageX;
H.y=r.pageY;
direction=t();
if(v){
D=e.touches.length}
w=h;
T(e,direction);
if(D==n.fingers||!v){
distance=x();
if(n.swipeStatus)N(e,w,direction,distance);
if(!n.triggerOnTouchEnd){
if(distance>=n.threshold){
w=p;
N(e,w);
C(e)}
}
}
else{
w=d;
N(e,w);
C(e)}
}
function A(e){
var t=v?e.touches[0]:e;
w=c;
if(v){
D=e.touches.length}
distance=0;
direction=null;
if(D==n.fingers||!v){
P.x=H.x=t.pageX;
P.y=H.y=t.pageY;
if(n.swipeStatus)N(e,w)}
else{
C(e)}
O.addEventListener(g,L,false);
O.addEventListener(y,k,false)}
var O=this;
var M=e(this);
var _=null;
var D=0;
var P={
x:0,y:0}
;
var H={
x:0,y:0}
;
var B={
x:0,y:0}
;
try{
this.addEventListener(m,A,false);
this.addEventListener(b,C)}
catch(j){
}
}
)}
}
)(jQuery);
(function(e,t){
function n(t,n){
t.find(".defaultimg").each(function(i){
p(e(this),n);
n.height=Math.round(n.startheight*(n.width/n.startwidth));
t.height(n.height);
p(e(this),n);
try{
t.parent().find(".tp-bannershadow").css({
width:n.width}
)}
catch(s){
}
var o=t.find(">ul >li:eq("+n.act+") .slotholder");
var u=t.find(">ul >li:eq("+n.next+") .slotholder");
y(t,n);
u.find(".defaultimg").css({
opacity:0}
);
o.find(".defaultimg").css({
opacity:1}
);
b(t,n);
var a=t.find(">ul >li:eq("+n.next+")");
t.find(".tp-caption").each(function(){
e(this).stop(true,true)}
);
k(a,n);
r(n,t)}
)}
function r(e,t){
e.cd=0;
if(e.videoplaying!=true){
var n=t.find(".tp-bannertimer");
if(n.length>0){
n.stop();
n.css({
width:"0%"}
);
n.animate({
width:"100%"}
,{
duration:e.delay-100,queue:false,easing:"linear"}
)}
clearTimeout(e.thumbtimer);
e.thumbtimer=setTimeout(function(){
o(t);
h(t,e)}
,200)}
}
function i(e,t){
e.cd=0;
w(t,e);
var n=t.find(".tp-bannertimer");
if(n.length>0){
n.stop();
n.css({
width:"0%"}
);
n.animate({
width:"100%"}
,{
duration:e.delay-100,queue:false,easing:"linear"}
)}
}
function s(n,r){
var s=n.parent();
if(r.navigationType=="thumb"||r.navsecond=="both"){
s.append('<div class="tp-bullets tp-thumbs '+r.navigationStyle+'"><div class="tp-mask"><div class="tp-thumbcontainer"></div></div></div>')}
var a=s.find(".tp-bullets.tp-thumbs .tp-mask .tp-thumbcontainer");
var f=a.parent();
f.width(r.thumbWidth*r.thumbAmount);
f.height(r.thumbHeight);
f.parent().width(r.thumbWidth*r.thumbAmount);
f.parent().height(r.thumbHeight);
n.find(">ul:first >li").each(function(e){
var r=n.find(">ul:first >li:eq("+e+")");
if(r.data("thumb")!=t)var i=r.data("thumb");
else var i=r.find("img:first").attr("src");
a.append('<div class="bullet thumb"><img src="'+i+'"></div>');
var s=a.find(".bullet:first")}
);
var l=100;
a.find(".bullet").each(function(t){
var s=e(this);
if(t==r.slideamount-1)s.addClass("last");
if(t==0)s.addClass("first");
s.width(r.thumbWidth);
s.height(r.thumbHeight);
if(l>s.outerWidth(true))l=s.outerWidth(true);
s.click(function(){
if(r.transition==0&&s.index()!=r.act){
r.next=s.index();
i(r,n)}
}
)}
);
var c=l*n.find(">ul:first >li").length;
var h=a.parent().width();
r.thumbWidth=l;
if(h<c){
e(document).mousemove(function(t){
e("body").data("mousex",t.pageX)}
);
a.parent().mouseenter(function(){
var t=e(this);
t.addClass("over");
var r=t.offset();
var i=e("body").data("mousex")-r.left;
var s=t.width();
var o=t.find(".bullet:first").outerWidth(true);
var a=o*n.find(">ul:first >li").length;
var f=a-s+15;
var l=f/s;
i=i-30;
var c=0-i*l;
if(c>0)c=0;
if(c<0-a+s)c=0-a+s;
u(t,c,200)}
);
a.parent().mousemove(function(){
var t=e(this);
var r=t.offset();
var i=e("body").data("mousex")-r.left;
var s=t.width();
var o=t.find(".bullet:first").outerWidth(true);
var a=o*n.find(">ul:first >li").length;
var f=a-s+15;
var l=f/s;
i=i-30;
var c=0-i*l;
if(c>0)c=0;
if(c<0-a+s)c=0-a+s;
u(t,c,0)}
);
a.parent().mouseleave(function(){
var t=e(this);
t.removeClass("over");
o(n)}
)}
}
function o(e){
var t=e.parent().find(".tp-bullets.tp-thumbs .tp-mask .tp-thumbcontainer");
var n=t.parent();
var r=n.offset();
var i=n.find(".bullet:first").outerWidth(true);
var s=n.find(".bullet.selected").index()*i;
var o=n.width();
var i=n.find(".bullet:first").outerWidth(true);
var a=i*e.find(">ul:first >li").length;
var f=a-o;
var l=f/o;
var c=0-s;
if(c>0)c=0;
if(c<0-a+o)c=0-a+o;
if(!n.hasClass("over")){
u(n,c,200)}
}
function u(e,t,n){
e.stop();
e.find(".tp-thumbcontainer").animate({
left:t+"px"}
,{
duration:n,queue:false}
)}
function a(t,n){
if(n.navigationType=="bullet"||n.navigationType=="both"){
t.parent().append('<div class="tp-bullets simplebullets '+n.navigationStyle+'"></div>')}
var r=t.parent().find(".tp-bullets");
t.find(">ul:first >li").each(function(e){
var n=t.find(">ul:first >li:eq("+e+") img:first").attr("src");
r.append('<div class="bullet"></div>');
var i=r.find(".bullet:first")}
);
r.find(".bullet").each(function(r){
var s=e(this);
if(r==n.slideamount-1)s.addClass("last");
if(r==0)s.addClass("first");
s.click(function(){
var e=false;
if(n.navigationArrows=="withbullet"||n.navigationArrows=="nexttobullets"){
if(s.index()-1==n.act)e=true}
else{
if(s.index()==n.act)e=true}
if(n.transition==0&&!e){
if(n.navigationArrows=="withbullet"||n.navigationArrows=="nexttobullets"){
n.next=s.index()-1}
else{
n.next=s.index()}
i(n,t)}
}
)}
);
r.append('<div class="tpclear"></div>');
h(t,n)}
function f(e,n){
var r=e.find(".tp-bullets");
var s="";
var o=n.navigationStyle;
if(n.navigationArrows=="none")s="visibility:none";
n.soloArrowStyle="default";
if(n.navigationArrows!="none"&&n.navigationArrows!="nexttobullets")o=n.soloArrowStyle;
e.parent().append('<div style="'+s+'" class="tp-leftarrow tparrows '+o+'"></div>');
e.parent().append('<div style="'+s+'" class="tp-rightarrow tparrows '+o+'"></div>');
e.parent().find(".tp-rightarrow").click(function(){
if(n.transition==0){
if(e.data("showus")!=t&&e.data("showus")!=-1)n.next=e.data("showus")-1;
else n.next=n.next+1;
e.data("showus",-1);
if(n.next>=n.slideamount)n.next=0;
if(n.next<0)n.next=0;
if(n.act!=n.next)i(n,e)}
}
);
e.parent().find(".tp-leftarrow").click(function(){
if(n.transition==0){
n.next=n.next-1;
n.leftarrowpressed=1;
if(n.next<0)n.next=n.slideamount-1;
i(n,e)}
}
);
h(e,n)}
function l(e,t){
if(t.touchenabled=="on")e.swipe({
data:e,swipeRight:function(){
if(t.transition==0){
t.next=t.next-1;
t.leftarrowpressed=1;
if(t.next<0)t.next=t.slideamount-1;
i(t,e)}
}
,swipeLeft:function(){
if(t.transition==0){
t.next=t.next+1;
if(t.next==t.slideamount)t.next=0;
i(t,e)}
}
,allowPageScroll:"auto"}
)}
function c(e,t){
var n=e.parent().find(".tp-bullets");
var r=e.parent().find(".tparrows");
if(n==null){
e.append('<div class=".tp-bullets"></div>');
var n=e.parent().find(".tp-bullets")}
if(r==null){
e.append('<div class=".tparrows"></div>');
var r=e.parent().find(".tparrows")}
e.data("hidethumbs",t.hideThumbs);
n.addClass("hidebullets");
r.addClass("hidearrows");
n.hover(function(){
n.addClass("hovered");
clearTimeout(e.data("hidethumbs"));
n.removeClass("hidebullets");
r.removeClass("hidearrows")}
,function(){
n.removeClass("hovered");
if(!e.hasClass("hovered")&&!n.hasClass("hovered"))e.data("hidethumbs",setTimeout(function(){
n.addClass("hidebullets");
r.addClass("hidearrows")}
,t.hideThumbs))}
);
r.hover(function(){
n.addClass("hovered");
clearTimeout(e.data("hidethumbs"));
n.removeClass("hidebullets");
r.removeClass("hidearrows")}
,function(){
n.removeClass("hovered")}
);
e.on("mouseenter",function(){
e.addClass("hovered");
clearTimeout(e.data("hidethumbs"));
n.removeClass("hidebullets");
r.removeClass("hidearrows")}
);
e.on("mouseleave",function(){
e.removeClass("hovered");
if(!e.hasClass("hovered")&&!n.hasClass("hovered"))e.data("hidethumbs",setTimeout(function(){
n.addClass("hidebullets");
r.addClass("hidearrows")}
,t.hideThumbs))}
)}
function h(e,t){
var n=e.parent();
var r=n.find(".tp-bullets");
var i=n.find(".tp-leftarrow");
var s=n.find(".tp-rightarrow");
if(t.navigationType=="thumb"&&t.navigationArrows=="nexttobullets")t.navigationArrows="solo";
if(t.navigationArrows=="nexttobullets"){
i.prependTo(r).css({
"float":"left"}
);
s.insertBefore(r.find(".tpclear")).css({
"float":"left"}
)}
if(t.navigationArrows!="none"&&t.navigationArrows!="nexttobullets"){
i.css({
position:"absolute"}
);
s.css({
position:"absolute"}
);
if(t.soloArrowLeftValign=="center")i.css({
top:"50%",marginTop:t.soloArrowLeftVOffset-Math.round(i.innerHeight()/2)+"px"}
);
if(t.soloArrowLeftValign=="bottom")i.css({
bottom:0+t.soloArrowLeftVOffset+"px"}
);
if(t.soloArrowLeftValign=="top")i.css({
top:0+t.soloArrowLeftVOffset+"px"}
);
if(t.soloArrowLeftHalign=="center")i.css({
left:"50%",marginLeft:t.soloArrowLeftHOffset-Math.round(i.innerWidth()/2)+"px"}
);
if(t.soloArrowLeftHalign=="left")i.css({
left:0+t.soloArrowLeftHOffset+"px"}
);
if(t.soloArrowLeftHalign=="right")i.css({
right:0+t.soloArrowLeftHOffset+"px"}
);
if(t.soloArrowRightValign=="center")s.css({
top:"50%",marginTop:t.soloArrowRightVOffset-Math.round(s.innerHeight()/2)+"px"}
);
if(t.soloArrowRightValign=="bottom")s.css({
bottom:0+t.soloArrowRightVOffset+"px"}
);
if(t.soloArrowRightValign=="top")s.css({
top:0+t.soloArrowRightVOffset+"px"}
);
if(t.soloArrowRightHalign=="center")s.css({
left:"50%",marginLeft:t.soloArrowRightHOffset-Math.round(s.innerWidth()/2)+"px"}
);
if(t.soloArrowRightHalign=="left")s.css({
left:0+t.soloArrowRightHOffset+"px"}
);
if(t.soloArrowRightHalign=="right")s.css({
right:0+t.soloArrowRightHOffset+"px"}
);
if(i.position()!=null)i.css({
top:Math.round(parseInt(i.position().top,0))+"px"}
);
if(s.position()!=null)s.css({
top:Math.round(parseInt(s.position().top,0))+"px"}
)}
if(t.navigationArrows=="none"){
i.css({
visibility:"hidden"}
);
s.css({
visibility:"hidden"}
)}
if(t.navigationVAlign=="center")r.css({
top:"50%",marginTop:t.navigationVOffset-Math.round(r.innerHeight()/2)+"px"}
);
if(t.navigationVAlign=="bottom")r.css({
bottom:0+t.navigationVOffset+"px"}
);
if(t.navigationVAlign=="top")r.css({
top:0+t.navigationVOffset+"px"}
);
if(t.navigationHAlign=="center")r.css({
left:"50%",marginLeft:t.navigationHOffset-Math.round(r.innerWidth()/2)+"px"}
);
if(t.navigationHAlign=="left")r.css({
left:0+t.navigationHOffset+"px"}
);
if(t.navigationHAlign=="right")r.css({
right:0+t.navigationHOffset+"px"}
)}
function p(e,n){
n.width=parseInt(n.container.width(),0);
n.height=parseInt(n.container.height(),0);
n.bw=n.width/n.startwidth;
n.bh=n.height/n.startheight;
if(n.bh>1){
n.bw=1;
n.bh=1}
if(e.data("orgw")!=t){
e.width(e.data("orgw"));
e.height(e.data("orgh"))}
var r=n.width/e.width();
var i=n.height/e.height();
n.fw=r;
n.fh=i;
if(e.data("orgw")==t){
e.data("orgw",e.width());
e.data("orgh",e.height())}
if(n.fullWidth=="on"){
var s=n.container.parent().width();
var o=n.container.parent().height();
var u=o/e.data("orgh");
var a=s/e.data("orgw");
e.width(e.width()*u);
e.height(o);
if(e.width()<s){
e.width(s+50);
var a=e.width()/e.data("orgw");
e.height(e.data("orgh")*a)}
if(e.width()>s){
e.data("fxof",s/2-e.width()/2);
e.css({
position:"absolute",left:e.data("fxof")+"px"}
)}
if(e.height()<=o){
e.data("fyof",0);
e.css({
position:"absolute",top:e.data("fyof")+"px"}
)}
if(e.height()>o&&e.data("fullwidthcentering")=="on"){
e.data("fyof",o/2-e.height()/2);
e.css({
position:"absolute",top:e.data("fyof")+"px"}
)}
}
else{
e.width(n.width);
e.height(e.height()*r);
if(e.height()<n.height&&e.height()!=0&&e.height()!=null){
e.height(n.height);
e.width(e.data("orgw")*i)}
}
e.data("neww",e.width());
e.data("newh",e.height());
if(n.fullWidth=="on"){
n.slotw=Math.ceil(e.width()/n.slots)}
else{
n.slotw=Math.ceil(n.width/n.slots)}
n.sloth=Math.ceil(n.height/n.slots)}
function d(n,r){
n.find(".tp-caption").each(function(){
e(this).addClass(e(this).data("transition"));
e(this).addClass("start")}
);
n.find(">ul:first >li").each(function(n){
var r=e(this);
if(r.data("link")!=t){
var i=r.data("link");
var s="_self";
var o=2;
if(r.data("slideindex")=="back")o=0;
var u=r.data("linktoslide");
if(r.data("target")!=t)s=r.data("target");
if(i=="slide"){
r.append('<div class="tp-caption sft slidelink" style="z-index:'+o+';
" data-x="0" data-y="0" data-linktoslide="'+u+'" data-start="0"><a><div></div></a></div>')}
else{
u="no";
r.append('<div class="tp-caption sft slidelink" style="z-index:'+o+';
" data-x="0" data-y="0" data-linktoslide="'+u+'" data-start="0"><a target="'+s+'" href="'+i+'"><div></div></a></div>')}
}
}
);
n.find(">ul:first >li >img").each(function(t){
var n=e(this);
n.addClass("defaultimg");
p(n,r);
p(n,r);
n.wrap('<div class="slotholder"></div>');
n.css({
opacity:0}
);
n.data("li-id",t)}
)}
function v(e,n,r){
var i=e;
var s=i.find("img");
p(s,n);
var o=s.attr("src");
var u=s.css("background-color");
var a=s.data("neww");
var f=s.data("newh");
var l=s.data("fxof");
if(l==t)l=0;
var c=s.data("fyof");
if(s.data("fullwidthcentering")!="on"||c==t)c=0;
var h=0;
if(!r)var h=0-n.slotw;
for(var d=0;
d<n.slots;
d++)i.append('<div class="slot" style="position:absolute;
top:'+(0+c)+"px;
left:"+(l+d*n.slotw)+"px;
overflow:hidden;
width:"+n.slotw+"px;
height:"+f+'px"><div class="slotslide" style="position:absolute;
top:0px;
left:'+h+"px;
width:"+n.slotw+"px;
height:"+f+'px;
overflow:hidden;
"><img style="background-color:'+u+";
position:absolute;
top:0px;
left:"+(0-d*n.slotw)+"px;
width:"+a+"px;
height:"+f+'px" src="'+o+'"></div></div>')}
function m(e,n,r){
var i=e;
var s=i.find("img");
p(s,n);
var o=s.attr("src");
var u=s.css("background-color");
var a=s.data("neww");
var f=s.data("newh");
var l=s.data("fxof");
if(l==t)l=0;
var c=s.data("fyof");
if(s.data("fullwidthcentering")!="on"||c==t)c=0;
var h=0;
if(!r)var h=0-n.sloth;
for(var d=0;
d<n.slots+2;
d++)i.append('<div class="slot" style="position:absolute;
'+"top:"+(c+d*n.sloth)+"px;
"+"left:"+l+"px;
"+"overflow:hidden;
"+"width:"+a+"px;
"+"height:"+n.sloth+'px"'+'><div class="slotslide" style="position:absolute;
'+"top:"+h+"px;
"+"left:0px;
width:"+a+"px;
"+"height:"+n.sloth+"px;
"+'overflow:hidden;
"><img style="position:absolute;
'+"background-color:"+u+";
"+"top:"+(0-d*n.sloth)+"px;
"+"left:0px;
width:"+a+"px;
"+"height:"+f+'px" src="'+o+'"></div></div>')}
function g(e,n,r){
var i=e;
var s=i.find("img");
p(s,n);
var o=s.attr("src");
var u=s.css("background-color");
var a=s.data("neww");
var f=s.data("newh");
var l=s.data("fxof");
if(l==t)l=0;
var c=s.data("fyof");
if(s.data("fullwidthcentering")!="on"||c==t)c=0;
var h=0;
var d=0;
if(n.sloth>n.slotw)d=n.sloth;
else d=n.slotw;
if(!r){
var h=0-d}
n.slotw=d;
n.sloth=d;
var v=0;
var m=0;
for(var g=0;
g<n.slots;
g++){
m=0;
for(var y=0;
y<n.slots;
y++){
i.append('<div class="slot" '+'style="position:absolute;
'+"top:"+(c+m)+"px;
"+"left:"+(l+v)+"px;
"+"width:"+d+"px;
"+"height:"+d+"px;
"+'overflow:hidden;
">'+'<div class="slotslide" data-x="'+v+'" data-y="'+m+'" '+'style="position:absolute;
'+"top:"+0+"px;
"+"left:"+0+"px;
"+"width:"+d+"px;
"+"height:"+d+"px;
"+'overflow:hidden;
">'+'<img style="position:absolute;
'+"top:"+(0-m)+"px;
"+"left:"+(0-v)+"px;
"+"width:"+a+"px;
"+"height:"+f+"px"+"background-color:"+u+';
"'+'src="'+o+'"></div></div>');
m=m+d}
v=v+d}
}
function y(n,r,i){
if(i==t)i==80;
setTimeout(function(){
n.find(".slotholder .slot").each(function(){
clearTimeout(e(this).data("tout"));
e(this).remove()}
);
r.transition=0}
,i)}
function b(e,t){
var n=e.find(">li:eq("+t.act+")");
var r=e.find(">li:eq("+t.next+")");
var i=r.find(".tp-caption");
if(i.find("iframe")==0){
if(i.hasClass("hcenter"))i.css({
height:t.height+"px",top:"0px",left:t.width/2-i.outerWidth()/2+"px"}
);
else if(i.hasClass("vcenter"))i.css({
width:t.width+"px",left:"0px",top:t.height/2-i.outerHeight()/2+"px"}
)}
}
function w(n,r){
n.trigger("revolution.slide.onbeforeswap");
r.transition=1;
r.videoplaying=false;
try{
var i=n.find(">ul:first-child >li:eq("+r.act+")")}
catch(s){
var i=n.find(">ul:first-child >li:eq(1)")}
r.lastslide=r.act;
var u=n.find(">ul:first-child >li:eq("+r.next+")");
var a=i.find(".slotholder");
var f=u.find(".slotholder");
i.css({
visibility:"visible"}
);
u.css({
visibility:"visible"}
);
if(r.ie){
if(u.data("transition")=="boxfade")u.data("transition","boxslide");
if(u.data("transition")=="slotfade-vertical")u.data("transition","slotzoom-vertical");
if(u.data("transition")=="slotfade-horizontal")u.data("transition","slotzoom-horizontal")}
if(u.data("delay")!=t){
r.cd=0;
r.delay=u.data("delay")}
else{
r.delay=r.origcd}
i.css({
left:"0px",top:"0px"}
);
u.css({
left:"0px",top:"0px"}
);
if(u.data("differentissplayed")=="prepared"){
u.data("differentissplayed","done");
u.data("transition",u.data("savedtransition"));
u.data("slotamount",u.data("savedslotamount"));
u.data("masterspeed",u.data("savedmasterspeed"))}
if(u.data("fstransition")!=t&&u.data("differentissplayed")!="done"){
u.data("savedtransition",u.data("transition"));
u.data("savedslotamount",u.data("slotamount"));
u.data("savedmasterspeed",u.data("masterspeed"));
u.data("transition",u.data("fstransition"));
u.data("slotamount",u.data("fsslotamount"));
u.data("masterspeed",u.data("fsmasterspeed"));
u.data("differentissplayed","prepared")}
var l=0;
if(u.data("transition")=="boxslide")l=0;
else if(u.data("transition")=="boxfade")l=1;
else if(u.data("transition")=="slotslide-horizontal")l=2;
else if(u.data("transition")=="slotslide-vertical")l=3;
else if(u.data("transition")=="curtain-1")l=4;
else if(u.data("transition")=="curtain-2")l=5;
else if(u.data("transition")=="curtain-3")l=6;
else if(u.data("transition")=="slotzoom-horizontal")l=7;
else if(u.data("transition")=="slotzoom-vertical")l=8;
else if(u.data("transition")=="slotfade-horizontal")l=9;
else if(u.data("transition")=="slotfade-vertical")l=10;
else if(u.data("transition")=="fade")l=11;
else if(u.data("transition")=="slideleft")l=12;
else if(u.data("transition")=="slideup")l=13;
else if(u.data("transition")=="slidedown")l=14;
else if(u.data("transition")=="slideright")l=15;
else if(u.data("transition")=="papercut")l=16;
else if(u.data("transition")=="3dcurtain-horizontal")l=17;
else if(u.data("transition")=="3dcurtain-vertical")l=18;
else if(u.data("transition")=="cubic"||u.data("transition")=="cube")l=19;
else if(u.data("transition")=="flyin")l=20;
else if(u.data("transition")=="turnoff")l=21;
else{
l=Math.round(Math.random()*21);
u.data("slotamount",Math.round(Math.random()*12+4))}
if(u.data("transition")=="random-static"){
l=Math.round(Math.random()*16);
if(l>15)l=15;
if(l<0)l=0}
if(u.data("transition")=="random-premium"){
l=Math.round(Math.random()*6+16);
if(l>21)l=21;
if(l<16)l=16}
var c=-1;
if(r.leftarrowpressed==1||r.act>r.next)c=1;
if(u.data("transition")=="slidehorizontal"){
l=12;
if(r.leftarrowpressed==1)l=15}
if(u.data("transition")=="slidevertical"){
l=13;
if(r.leftarrowpressed==1)l=14}
r.leftarrowpressed=0;
if(l>21)l=21;
if(l<0)l=0;
if((r.ie||r.ie9)&&l>18){
l=Math.round(Math.random()*16);
u.data("slotamount",Math.round(Math.random()*12+4))}
if(r.ie&&(l==17||l==16||l==2||l==3||l==9||l==10))l=Math.round(Math.random()*3+12);
if(r.ie9&&l==3)l=4;
var h=300;
if(u.data("masterspeed")!=t&&u.data("masterspeed")>99&&u.data("masterspeed")<4001)h=u.data("masterspeed");
n.parent().find(".bullet").each(function(){
var t=e(this);
t.removeClass("selected");
if(r.navigationArrows=="withbullet"||r.navigationArrows=="nexttobullets"){
if(t.index()-1==r.next)t.addClass("selected")}
else{
if(t.index()==r.next)t.addClass("selected")}
}
);
n.find(">li").each(function(){
var t=e(this);
if(t.index!=r.act&&t.index!=r.next)t.css({
"z-index":16}
)}
);
i.css({
"z-index":18}
);
u.css({
"z-index":20}
);
u.css({
opacity:0}
);
L(i,r);
k(u,r);
if(u.data("slotamount")==t||u.data("slotamount")<1){
r.slots=Math.round(Math.random()*12+4);
if(u.data("transition")=="boxslide")r.slots=Math.round(Math.random()*6+3)}
else{
r.slots=u.data("slotamount")}
if(u.data("rotate")==t)r.rotate=0;
else if(u.data("rotate")==999)r.rotate=Math.round(Math.random()*360);
else r.rotate=u.data("rotate");
if(!e.support.transition||r.ie||r.ie9)r.rotate=0;
if(r.firststart==1){
i.css({
opacity:0}
);
r.firststart=0}
if(l==0){
h=h+100;
if(r.slots>10)r.slots=10;
u.css({
opacity:1}
);
g(a,r,true);
g(f,r,false);
f.find(".defaultimg").css({
opacity:0}
);
f.find(".slotslide").each(function(t){
var s=e(this);
if(r.ie9)s.transition({
top:0-r.sloth,left:0-r.slotw}
,0);
else s.transition({
top:0-r.sloth,left:0-r.slotw,rotate:r.rotate}
,0);
setTimeout(function(){
s.transition({
top:0,left:0,scale:1,rotate:0}
,h*1.5,function(){
if(t==r.slots*r.slots-1){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
r.act=r.next;
o(n)}
}
)}
,t*15)}
)}
if(l==1){
if(r.slots>5)r.slots=5;
u.css({
opacity:1}
);
g(f,r,false);
f.find(".defaultimg").css({
opacity:0}
);
f.find(".slotslide").each(function(t){
var s=e(this);
s.css({
opacity:0}
);
s.find("img").css({
opacity:0}
);
if(r.ie9)s.find("img").transition({
top:Math.random()*r.slotw-r.slotw+"px",left:Math.random()*r.slotw-r.slotw+"px"}
,0);
else s.find("img").transition({
top:Math.random()*r.slotw-r.slotw+"px",left:Math.random()*r.slotw-r.slotw+"px",rotate:r.rotate}
,0);
var l=Math.random()*1e3+(h+200);
if(t==r.slots*r.slots-1)l=1500;
s.find("img").transition({
opacity:1,top:0-s.data("y")+"px",left:0-s.data("x")+"px",rotate:0}
,l);
s.transition({
opacity:1}
,l,function(){
if(t==r.slots*r.slots-1){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
r.act=r.next;
o(n)}
}
)}
)}
if(l==2){
h=h+200;
u.css({
opacity:1}
);
v(a,r,true);
v(f,r,false);
f.find(".defaultimg").css({
opacity:0}
);
a.find(".slotslide").each(function(){
var t=e(this);
t.transit({
left:r.slotw+"px",rotate:0-r.rotate}
,h,function(){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
r.act=r.next;
o(n)}
)}
);
f.find(".slotslide").each(function(){
var t=e(this);
if(r.ie9)t.transit({
left:0-r.slotw+"px"}
,0);
else t.transit({
left:0-r.slotw+"px",rotate:r.rotate}
,0);
t.transit({
left:"0px",rotate:0}
,h,function(){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
if(r.ie)a.find(".defaultimg").css({
opacity:1}
);
r.act=r.next;
o(n)}
)}
)}
if(l==3){
h=h+200;
u.css({
opacity:1}
);
m(a,r,true);
m(f,r,false);
f.find(".defaultimg").css({
opacity:0}
);
a.find(".slotslide").each(function(){
var t=e(this);
t.transit({
top:r.sloth+"px",rotate:r.rotate}
,h,function(){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
r.act=r.next;
o(n)}
)}
);
f.find(".slotslide").each(function(){
var t=e(this);
if(r.ie9)t.transit({
top:0-r.sloth+"px"}
,0);
else t.transit({
top:0-r.sloth+"px",rotate:r.rotate}
,0);
t.transit({
top:"0px",rotate:0}
,h,function(){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
r.act=r.next;
o(n)}
)}
)}
if(l==4){
u.css({
opacity:1}
);
v(a,r,true);
v(f,r,true);
f.find(".defaultimg").css({
opacity:0}
);
a.find(".defaultimg").css({
opacity:0}
);
a.find(".slotslide").each(function(t){
var n=e(this);
n.transit({
top:0+r.height+"px",opacity:1,rotate:r.rotate}
,h+t*(70-r.slots))}
);
f.find(".slotslide").each(function(t){
var s=e(this);
if(r.ie9)s.transition({
top:0-r.height+"px",opacity:0}
,0);
else s.transition({
top:0-r.height+"px",opacity:0,rotate:r.rotate}
,0);
s.transition({
top:"0px",opacity:1,rotate:0}
,h+t*(70-r.slots),function(){
if(t==r.slots-1){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
r.act=r.next;
o(n)}
}
)}
)}
if(l==5){
u.css({
opacity:1}
);
v(a,r,true);
v(f,r,true);
f.find(".defaultimg").css({
opacity:0}
);
a.find(".defaultimg").css({
opacity:0}
);
a.find(".slotslide").each(function(t){
var n=e(this);
n.transition({
top:0+r.height+"px",opacity:1,rotate:r.rotate}
,h+(r.slots-t)*(70-r.slots))}
);
f.find(".slotslide").each(function(t){
var s=e(this);
if(r.ie9)s.transition({
top:0-r.height+"px",opacity:0}
,0);
else s.transition({
top:0-r.height+"px",opacity:0,rotate:r.rotate}
,0);
s.transition({
top:"0px",opacity:1,rotate:0}
,h+(r.slots-t)*(70-r.slots),function(){
if(t==0){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
r.act=r.next;
o(n)}
}
)}
)}
if(l==6){
u.css({
opacity:1}
);
if(r.slots<2)r.slots=2;
v(a,r,true);
v(f,r,true);
f.find(".defaultimg").css({
opacity:0}
);
a.find(".defaultimg").css({
opacity:0}
);
a.find(".slotslide").each(function(t){
var n=e(this);
if(t<r.slots/2)var i=(t+2)*60;
else var i=(2+r.slots-t)*60;
n.transition({
top:0+r.height+"px",opacity:1}
,h+i)}
);
f.find(".slotslide").each(function(t){
var s=e(this);
if(r.ie9)s.transition({
top:0-r.height+"px",opacity:0}
,0);
else s.transition({
top:0-r.height+"px",opacity:0,rotate:r.rotate}
,0);
if(t<r.slots/2)var l=(t+2)*60;
else var l=(2+r.slots-t)*60;
s.transition({
top:"0px",opacity:1,rotate:0}
,h+l,function(){
if(t==Math.round(r.slots/2)){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
r.act=r.next;
o(n)}
}
)}
)}
if(l==7){
h=h*3;
u.css({
opacity:1}
);
v(a,r,true);
v(f,r,true);
f.find(".defaultimg").css({
opacity:0}
);
a.find(".slotslide").each(function(){
var t=e(this).find("img");
t.transition({
left:0-r.slotw/2+"px",top:0-r.height/2+"px",width:r.slotw*2+"px",height:r.height*2+"px",opacity:0,rotate:r.rotate}
,h,function(){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
r.act=r.next;
o(n)}
)}
);
//;
f.find(".slotslide").each(function(t){
var s=e(this).find("img");
if(r.ie9)s.transition({
left:0+"px",top:0+"px",opacity:0}
,0);
else s.transition({
left:0+"px",top:0+"px",opacity:0,rotate:r.rotate}
,0);
s.transition({
left:0-t*r.slotw+"px",top:0+"px",width:f.find(".defaultimg").data("neww")+"px",height:f.find(".defaultimg").data("newh")+"px",opacity:1,rotate:0}
,h,function(){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
r.act=r.next;
o(n)}
)}
)}
if(l==8){
h=h*3;
u.css({
opacity:1}
);
m(a,r,true);
m(f,r,true);
f.find(".defaultimg").css({
opacity:0}
);
a.find(".slotslide").each(function(){
var t=e(this).find("img");
t.transition({
left:0-r.width/2+"px",top:0-r.sloth/2+"px",width:r.width*2+"px",height:r.sloth*2+"px",opacity:0,rotate:r.rotate}
,h,function(){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
r.act=r.next;
o(n)}
)}
);
f.find(".slotslide").each(function(t){
var s=e(this).find("img");
if(r.ie9)s.transition({
left:0+"px",top:0+"px",opacity:0}
,0);
else s.transition({
left:0+"px",top:0+"px",opacity:0,rotate:r.rotate}
,0);
s.transition({
left:0+"px",top:0-t*r.sloth+"px",width:f.find(".defaultimg").data("neww")+"px",height:f.find(".defaultimg").data("newh")+"px",opacity:1,rotate:0}
,h,function(){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
r.act=r.next;
o(n)}
)}
)}
if(l==9){
u.css({
opacity:1}
);
r.slots=r.width/20;
v(f,r,true);
f.find(".defaultimg").css({
opacity:0}
);
var p=0;
f.find(".slotslide").each(function(t){
var n=e(this);
p++;
n.transition({
opacity:0,x:0,y:0}
,0);
n.data("tout",setTimeout(function(){
n.transition({
x:0,y:0,opacity:1}
,h)}
,t*4))}
);
setTimeout(function(){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
if(r.ie)a.find(".defaultimg").css({
opacity:1}
);
r.act=r.next;
o(n)}
,h+p*4)}
if(l==10){
u.css({
opacity:1}
);
r.slots=r.height/20;
m(f,r,true);
f.find(".defaultimg").css({
opacity:0}
);
var p=0;
f.find(".slotslide").each(function(t){
var n=e(this);
p++;
n.transition({
opacity:0,x:0,y:0}
,0);
n.data("tout",setTimeout(function(){
n.transition({
x:0,y:0,opacity:1}
,h)}
,t*4))}
);
setTimeout(function(){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
if(r.ie)a.find(".defaultimg").css({
opacity:1}
);
r.act=r.next;
o(n)}
,h+p*4)}
if(l==11){
u.css({
opacity:1}
);
r.slots=1;
v(f,r,true);
f.find(".defaultimg").css({
opacity:0}
);
var p=0;
f.find(".slotslide").each(function(t){
var n=e(this);
p++;
if(r.ie9||r.ie){
if(r.ie)n.css({
position:"static"}
);
n.transition({
opacity:0}
,0)}
else n.transition({
opacity:0,rotate:r.rotate}
,0);
if(r.ie9||r.ie){
n.transition({
opacity:1}
,h)}
else{
n.transition({
opacity:1,rotate:0}
,h)}
}
);
setTimeout(function(){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
if(r.ie)a.find(".defaultimg").css({
opacity:1}
);
r.act=r.next;
o(n)}
,h)}
if(l==12||l==13||l==14||l==15){
h=h*3;
u.css({
opacity:1}
);
r.slots=1;
v(f,r,true);
v(a,r,true);
a.find(".defaultimg").css({
opacity:0}
);
f.find(".defaultimg").css({
opacity:0}
);
var d=r.width;
var b=r.height;
if(r.fullWidth=="on"){
d=r.container.parent().width();
b=r.container.parent().height()}
var w=f.find(".slotslide");
if(l==12)if(r.ie9){
w.transition({
left:d+"px"}
,0)}
else{
w.transition({
left:d+"px",rotate:r.rotate}
,0)}
else if(l==15)if(r.ie9)w.transition({
left:0-r.width+"px"}
,0);
else w.transition({
left:0-r.width+"px",rotate:r.rotate}
,0);
else if(l==13)if(r.ie9)w.transition({
top:b+"px"}
,0);
else w.transition({
top:b+"px",rotate:r.rotate}
,0);
else if(l==14)if(r.ie9)w.transition({
top:0-r.height+"px"}
,0);
else w.transition({
top:0-r.height+"px",rotate:r.rotate}
,0);
w.transition({
left:"0px",top:"0px",opacity:1,rotate:0}
,h,function(){
y(n,r,0);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
f.find(".defaultimg").css({
opacity:1}
);
r.act=r.next;
o(n)}
);
var E=a.find(".slotslide");
if(l==12)E.transition({
left:0-d+"px",opacity:1,rotate:0}
,h);
else if(l==15)E.transition({
left:d+"px",opacity:1,rotate:0}
,h);
else if(l==13)E.transition({
top:0-b+"px",opacity:1,rotate:0}
,h);
else if(l==14)E.transition({
top:b+"px",opacity:1,rotate:0}
,h)}
if(l==16){
i.css({
position:"absolute","z-index":20}
);
u.css({
position:"absolute","z-index":15}
);
i.wrapInner('<div class="tp-half-one"></div>');
i.find(".tp-half-one").clone(true).appendTo(i).addClass("tp-half-two");
i.find(".tp-half-two").removeClass("tp-half-one");
i.find(".tp-half-two").wrapInner('<div class="tp-offset"></div>');
var S=i.find(".defaultimg");
if(S.length>0&&S.data("fullwidthcentering")=="on"){
var x=S.height()/2;
var T=S.position().top}
else{
var x=r.height/2;
var T=0}
i.find(".tp-half-one").css({
width:r.width+"px",height:T+x+"px",overflow:"hidden",position:"absolute",top:"0px",left:"0px"}
);
i.find(".tp-half-two").css({
width:r.width+"px",height:T+x+"px",overflow:"hidden",position:"absolute",top:T+x+"px",left:"0px"}
);
i.find(".tp-half-two .tp-offset").css({
position:"absolute",top:0-x-T+"px",left:"0px"}
);
if(!e.support.transition){
i.find(".tp-half-one").animate({
opacity:0,top:0-r.height/2+"px"}
,{
duration:500,queue:false}
);
i.find(".tp-half-two").animate({
opacity:0,top:r.height+"px"}
,{
duration:500,queue:false}
)}
else{
var N=Math.round(Math.random()*40-20);
var C=Math.round(Math.random()*40-20);
var A=Math.random()*1+1;
var O=Math.random()*1+1;
i.find(".tp-half-one").transition({
opacity:1,scale:A,rotate:N,y:0-r.height/1.4+"px"}
,800,"in");
i.find(".tp-half-two").transition({
opacity:1,scale:O,rotate:C,y:0+r.height/1.4+"px"}
,800,"in");
if(i.html()!=null)u.transition({
scale:.8,x:r.width*.1,y:r.height*.1,rotate:N}
,0).transition({
rotate:0,scale:1,x:0,y:0}
,600,"snap")}
f.find(".defaultimg").css({
opacity:1}
);
setTimeout(function(){
i.css({
position:"absolute","z-index":18}
);
u.css({
position:"absolute","z-index":20}
);
f.find(".defaultimg").css({
opacity:1}
);
a.find(".defaultimg").css({
opacity:0}
);
if(i.find(".tp-half-one").length>0){
i.find(".tp-half-one >img,.tp-half-one >div").unwrap()}
i.find(".tp-half-two").remove();
r.transition=0;
r.act=r.next}
,800);
u.css({
opacity:1}
)}
if(l==17){
h=h+100;
if(r.slots>10)r.slots=10;
u.css({
opacity:1}
);
m(a,r,true);
m(f,r,false);
f.find(".defaultimg").css({
opacity:0}
);
f.find(".slotslide").each(function(t){
var s=e(this);
s.transition({
opacity:0,rotateY:350,rotateX:40,perspective:"1400px"}
,0);
setTimeout(function(){
s.transition({
opacity:1,top:0,left:0,scale:1,perspective:"150px",rotate:0,rotateY:0,rotateX:0}
,h*2,function(){
if(t==r.slots-1){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
r.act=r.next;
o(n)}
}
)}
,t*100)}
)}
if(l==18){
h=h+100;
if(r.slots>10)r.slots=10;
u.css({
opacity:1}
);
v(a,r,true);
v(f,r,false);
f.find(".defaultimg").css({
opacity:0}
);
f.find(".slotslide").each(function(t){
var s=e(this);
s.transition({
rotateX:10,rotateY:310,perspective:"1400px",rotate:0,opacity:0}
,0);
setTimeout(function(){
s.transition({
top:0,left:0,scale:1,perspective:"150px",rotate:0,rotateY:0,rotateX:0,opacity:1}
,h*2,function(){
if(t==r.slots-1){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
r.act=r.next;
o(n)}
}
)}
,t*100)}
)}
if(l==19){
h=h+100;
if(r.slots>10)r.slots=10;
u.css({
opacity:1}
);
v(a,r,true);
v(f,r,false);
f.find(".defaultimg").css({
opacity:0}
);
var M=u.css("z-index");
var _=i.css("z-index");
f.find(".slotslide").each(function(t){
var s=e(this);
s.parent().css({
overflow:"visible"}
);
s.css({
background:"#333"}
);
if(c==1)s.transition({
opacity:0,left:0,top:r.height/2,perspective:r.height*100,rotate3d:"1,0,0,-90deg "}
,0);
else s.transition({
opacity:0,left:0,top:0-r.height/2,perspective:r.height*100,rotate3d:"1,0,0,90deg "}
,0);
setTimeout(function(){
s.transition({
opacity:1,top:0,rotate3d:" 1,0,0,0deg "}
,h*2,function(){
if(t==r.slots-1){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
r.act=r.next;
o(n)}
}
)}
,t*150)}
);
a.find(".slotslide").each(function(t){
var n=e(this);
n.parent().css({
overflow:"visible"}
);
n.css({
background:"#333"}
);
n.transition({
top:0,perspective:r.height*100,rotate3d:"1,0,0,0deg"}
,0);
a.find(".defaultimg").css({
opacity:0}
);
setTimeout(function(){
if(c==1)n.transition({
opacity:.6,left:0,top:0-r.height/2,rotate3d:"1,0,0,90deg"}
,h*2,function(){
}
);
else n.transition({
opacity:.6,left:0,top:0+r.height/2,rotate3d:"1,0,0,-90deg"}
,h*2,function(){
}
)}
,t*150)}
)}
if(l==20){
h=h+100;
if(r.slots>10)r.slots=10;
u.css({
opacity:1}
);
m(a,r,true);
m(f,r,false);
f.find(".defaultimg").css({
opacity:0}
);
f.find(".slotslide").each(function(t){
var s=e(this);
s.parent().css({
overflow:"visible"}
);
if(c==1)s.transition({
scale:.8,top:0,left:0-r.width,perspective:r.width,rotate3d:"2,5,0,110deg"}
,0);
else s.transition({
scale:.8,top:0,left:0+r.width,perspective:r.width,rotate3d:"2,5,0,-110deg"}
,0);
setTimeout(function(){
s.transition({
scale:.8,left:0,perspective:r.width,rotate3d:"1,5,0,0deg"}
,h*2,"ease").transition({
scale:1}
,200,"out",function(){
if(t==r.slots-1){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
r.act=r.next;
o(n)}
}
)}
,t*100)}
);
a.find(".slotslide").each(function(t){
var n=e(this);
n.transition({
scale:.5,left:0,perspective:500,rotate3d:"1,5,0,5deg"}
,300,"in-out");
a.find(".defaultimg").css({
opacity:0}
);
setTimeout(function(){
if(c==1)n.transition({
top:0,left:r.width/2,perspective:r.width,rotate3d:"0,-3,0,70deg",opacity:0}
,h*2,"out",function(){
}
);
else n.transition({
top:0,left:0-r.width/2,perspective:r.width,rotate3d:"0,-3,0,-70deg",opacity:0}
,h*2,"out",function(){
}
)}
,t*100)}
)}
if(l==21){
h=h+100;
if(r.slots>10)r.slots=10;
u.css({
opacity:1}
);
m(a,r,true);
m(f,r,false);
f.find(".defaultimg").css({
opacity:0}
);
f.find(".slotslide").each(function(t){
var s=e(this);
if(c==1)s.transition({
top:0,left:0-r.width/2,perspective:r.width*2,rotate3d:"0,100,0,90deg"}
,0);
else s.transition({
top:0,left:0+r.width/2,perspective:r.width*2,rotate3d:"0,100,0,-90deg"}
,0);
setTimeout(function(){
s.transition({
left:0,perspective:r.width*2,rotate3d:"0,0,0,0deg"}
,h*2,function(){
if(t==r.slots-1){
y(n,r);
f.find(".defaultimg").css({
opacity:1}
);
if(u.index()!=i.index())a.find(".defaultimg").css({
opacity:0}
);
r.act=r.next;
o(n)}
}
)}
,t*100)}
);
a.find(".slotslide").each(function(t){
var n=e(this);
n.transition({
left:0,perspective:r.width*2,rotate3d:"0,0,0,0deg"}
,0);
a.find(".defaultimg").css({
opacity:0}
);
setTimeout(function(){
if(c==1)n.transition({
top:0,left:r.width/2,perspective:r.width,rotate3d:"0,1000,0,-90deg"}
,h*1.5,function(){
}
);
else n.transition({
top:0,left:0-r.width/2,perspective:r.width,rotate3d:"0,1000,0,+90deg"}
,h*1.5,function(){
}
)}
,t*100)}
)}
var D={
}
;
D.slideIndex=r.next+1;
n.trigger("revolution.slide.onchange",D);
setTimeout(function(){
n.trigger("revolution.slide.onafterswap")}
,h);
n.trigger("revolution.slide.onvideostop")}
function E(){
}
function S(t){
if(t.data==YT.PlayerState.PLAYING){
var n=e("body").find(".tp-bannertimer");
var r=n.data("opt");
n.stop();
r.videoplaying=true;
r.videostartednow=1}
else{
var n=e("body").find(".tp-bannertimer");
var r=n.data("opt");
if(r.conthover==0)n.animate({
width:"100%"}
,{
duration:r.delay-r.cd-100,queue:false,easing:"linear"}
);
r.videoplaying=false;
r.videostoppednow=1}
}
function x(e){
e.target.playVideo()}
function T(e,t,n){
if(e.addEventListener){
e.addEventListener(t,n,false)}
else{
e.attachEvent(t,n,false)}
}
function N(t){
var n=$f(t);
n.addEvent("ready",function(t){
n.addEvent("play",function(t){
var n=e("body").find(".tp-bannertimer");
var r=n.data("opt");
n.stop();
r.videoplaying=true}
);
n.addEvent("finish",function(t){
var n=e("body").find(".tp-bannertimer");
var r=n.data("opt");
if(r.conthover==0)n.animate({
width:"100%"}
,{
duration:r.delay-r.cd-100,queue:false,easing:"linear"}
);
r.videoplaying=false;
r.videostartednow=1}
);
n.addEvent("pause",function(t){
var n=e("body").find(".tp-bannertimer");
var r=n.data("opt");
if(r.conthover==0)n.animate({
width:"100%"}
,{
duration:r.delay-r.cd-100,queue:false,easing:"linear"}
);
r.videoplaying=false;
r.videostoppednow=1}
)}
)}
function C(t){
var n=$f(t);
n.addEvent("ready",function(e){
n.api("play")}
);
n.addEvent("play",function(t){
var n=e("body").find(".tp-bannertimer");
var r=n.data("opt");
n.stop();
r.videoplaying=true}
);
n.addEvent("finish",function(t){
var n=e("body").find(".tp-bannertimer");
var r=n.data("opt");
if(r.conthover==0)n.animate({
width:"100%"}
,{
duration:r.delay-r.cd-100,queue:false,easing:"linear"}
);
r.videoplaying=false;
r.videostartednow=1}
);
n.addEvent("pause",function(t){
var n=e("body").find(".tp-bannertimer");
var r=n.data("opt");
if(r.conthover==0)n.animate({
width:"100%"}
,{
duration:r.delay-r.cd-100,queue:false,easing:"linear"}
);
r.videoplaying=false;
r.videostoppednow=1}
)}
function k(n,r,i){
n.find(".tp-caption").each(function(i){
offsetx=r.width/2-r.startwidth/2;
if(r.bh>1){
r.bw=1;
r.bh=1}
if(r.bw>1){
r.bw=1;
r.bh=1}
var s=r.bw;
var o=r.bh;
var u=n.find(".tp-caption:eq("+i+")");
var a=0;
if(r.width<r.hideCaptionAtLimit&&u.data("captionhidden")=="on"){
u.addClass("tp-hidden-caption");
a=1}
else{
if(r.width<r.hideAllCaptionAtLilmit){
u.addClass("tp-hidden-caption");
a=1}
else{
u.removeClass("tp-hidden-caption")}
}
u.stop(true,true);
if(a==0){
if(u.data("linktoslide")!=t){
u.css({
cursor:"pointer"}
);
if(u.data("linktoslide")!="no"){
u.click(function(){
var t=e(this);
var n=t.data("linktoslide");
if(n!="next"&&n!="prev"){
r.container.data("showus",n);
r.container.parent().find(".tp-rightarrow").click()}
else if(n=="next")r.container.parent().find(".tp-rightarrow").click();
else if(n=="prev")r.container.parent().find(".tp-leftarrow").click()}
)}
}
if(u.hasClass("coloredbg"))offsetx=0;
if(offsetx<0)offsetx=0;
var f=0;
clearTimeout(u.data("timer"));
clearTimeout(u.data("timer-end"));
var l="iframe"+Math.round(Math.random()*1e3+1);
if(u.find("iframe").length>0){
u.find("iframe").each(function(){
var n=e(this);
if(n.attr("src").toLowerCase().indexOf("youtube")>=0){
if(!n.hasClass("HasListener")){
try{
n.attr("id",l);
var r;
if(u.data("autoplay")==true)r=new YT.Player(l,{
events:{
onStateChange:S,onReady:x}
}
);
else r=new YT.Player(l,{
events:{
onStateChange:S}
}
);
n.addClass("HasListener");
u.data("player",r)}
catch(i){
}
}
else{
if(u.data("autoplay")==true){
var r=u.data("player");
r.playVideo()}
}
}
else{
if(n.attr("src").toLowerCase().indexOf("vimeo")>=0){
if(!n.hasClass("HasListener")){
n.addClass("HasListener");
n.attr("id",l);
var s=n.attr("src");
var o={
}
,a=s,f=/([^&=]+)=([^&]*)/g,c;
while(c=f.exec(a)){
o[decodeURIComponent(c[1])]=decodeURIComponent(c[2])}
if(o["player_id"]!=t){
s=s.replace(o["player_id"],l)}
else{
s=s+"&player_id="+l}
try{
s=s.replace("api=0","api=1")}
catch(i){
}
s=s+"&api=1";
n.attr("src",s);
var r=u.find("iframe")[0];
if(u.data("autoplay")==true)$f(r).addEvent("ready",C);
else $f(r).addEvent("ready",N)}
else{
if(u.data("autoplay")==true){
var n=u.find("iframe");
var h=n.attr("id");
var p=$f(h);
p.api("pause")}
}
}
}
}
)}
if(u.hasClass("randomrotate")&&(r.ie||r.ie9))u.removeClass("randomrotate").addClass("sfb");
u.removeClass("noFilterClass");
var c=0;
var h=0;
if(u.find("img").length>0){
var p=u.find("img");
if(p.data("ww")==t)p.data("ww",p.width());
if(p.data("hh")==t)p.data("hh",p.height());
var d=p.data("ww");
var v=p.data("hh");
p.width(d*r.bw);
p.height(v*r.bh);
c=p.width();
h=p.height()}
else{
if(u.find("iframe").length>0){
var p=u.find("iframe");
if(u.data("ww")==t){
u.data("ww",p.width())}
if(u.data("hh")==t)u.data("hh",p.height());
var d=u.data("ww");
var v=u.data("hh");
var m=u;
if(m.data("fsize")==t)m.data("fsize",parseInt(m.css("font-size"),0)||0);
if(m.data("pt")==t)m.data("pt",parseInt(m.css("paddingTop"),0)||0);
if(m.data("pb")==t)m.data("pb",parseInt(m.css("paddingBottom"),0)||0);
if(m.data("pl")==t)m.data("pl",parseInt(m.css("paddingLeft"),0)||0);
if(m.data("pr")==t)m.data("pr",parseInt(m.css("paddingRight"),0)||0);
if(m.data("mt")==t)m.data("mt",parseInt(m.css("marginTop"),0)||0);
if(m.data("mb")==t)m.data("mb",parseInt(m.css("marginBottom"),0)||0);
if(m.data("ml")==t)m.data("ml",parseInt(m.css("marginLeft"),0)||0);
if(m.data("mr")==t)m.data("mr",parseInt(m.css("marginRight"),0)||0);
if(m.data("bt")==t)m.data("bt",parseInt(m.css("borderTop"),0)||0);
if(m.data("bb")==t)m.data("bb",parseInt(m.css("borderBottom"),0)||0);
if(m.data("bl")==t)m.data("bl",parseInt(m.css("borderLeft"),0)||0);
if(m.data("br")==t)m.data("br",parseInt(m.css("borderRight"),0)||0);
if(m.data("lh")==t)m.data("lh",parseInt(m.css("lineHeight"),0)||0);
var g=r.width;
var y=r.height;
if(g>r.startwidth)g=r.startwidth;
if(y>r.startheight)y=r.startheight;
if(!u.hasClass("fullscreenvideo"))u.css({
"font-size":m.data("fsize")*r.bw+"px","padding-top":m.data("pt")*r.bh+"px","padding-bottom":m.data("pb")*r.bh+"px","padding-left":m.data("pl")*r.bw+"px","padding-right":m.data("pr")*r.bw+"px","margin-top":m.data("mt")*r.bh+"px","margin-bottom":m.data("mb")*r.bh+"px","margin-left":m.data("ml")*r.bw+"px","margin-right":m.data("mr")*r.bw+"px","border-top":m.data("bt")*r.bh+"px","border-bottom":m.data("bb")*r.bh+"px","border-left":m.data("bl")*r.bw+"px","border-right":m.data("br")*r.bw+"px","line-height":m.data("lh")*r.bh+"px",height:v*r.bh+"px","white-space":"nowrap"}
);
else u.css({
width:r.startwidth*r.bw,height:r.startheight*r.bh}
);
p.width(d*r.bw);
p.height(v*r.bh);
c=p.width();
h=p.height()}
else{
var m=u;
if(m.data("fsize")==t)m.data("fsize",parseInt(m.css("font-size"),0)||0);
if(m.data("pt")==t)m.data("pt",parseInt(m.css("paddingTop"),0)||0);
if(m.data("pb")==t)m.data("pb",parseInt(m.css("paddingBottom"),0)||0);
if(m.data("pl")==t)m.data("pl",parseInt(m.css("paddingLeft"),0)||0);
if(m.data("pr")==t)m.data("pr",parseInt(m.css("paddingRight"),0)||0);
if(m.data("mt")==t)m.data("mt",parseInt(m.css("marginTop"),0)||0);
if(m.data("mb")==t)m.data("mb",parseInt(m.css("marginBottom"),0)||0);
if(m.data("ml")==t)m.data("ml",parseInt(m.css("marginLeft"),0)||0);
if(m.data("mr")==t)m.data("mr",parseInt(m.css("marginRight"),0)||0);
if(m.data("bt")==t)m.data("bt",parseInt(m.css("borderTop"),0)||0);
if(m.data("bb")==t)m.data("bb",parseInt(m.css("borderBottom"),0)||0);
if(m.data("bl")==t)m.data("bl",parseInt(m.css("borderLeft"),0)||0);
if(m.data("br")==t)m.data("br",parseInt(m.css("borderRight"),0)||0);
if(m.data("lh")==t)m.data("lh",parseInt(m.css("lineHeight"),0)||0);
u.css({
"font-size":m.data("fsize")*r.bw+"px","padding-top":m.data("pt")*r.bh+"px","padding-bottom":m.data("pb")*r.bh+"px","padding-left":m.data("pl")*r.bw+"px","padding-right":m.data("pr")*r.bw+"px","margin-top":m.data("mt")*r.bh+"px","margin-bottom":m.data("mb")*r.bh+"px","margin-left":m.data("ml")*r.bw+"px","margin-right":m.data("mr")*r.bw+"px","border-top":m.data("bt")*r.bh+"px","border-bottom":m.data("bb")*r.bh+"px","border-left":m.data("bl")*r.bw+"px","border-right":m.data("br")*r.bw+"px","line-height":m.data("lh")*r.bh+"px","white-space":"nowrap"}
);
h=u.outerHeight(true);
c=u.outerWidth(true)}
}
if(u.hasClass("fade")){
u.css({
opacity:0,left:s*u.data("x")+offsetx+"px",top:r.bh*u.data("y")+"px"}
)}
if(u.hasClass("randomrotate")){
u.css({
left:s*u.data("x")+offsetx+"px",top:o*u.data("y")+f+"px"}
);
var b=Math.random()*2+1;
var w=Math.round(Math.random()*200-100);
var E=Math.round(Math.random()*200-100);
var T=Math.round(Math.random()*200-100);
u.data("repx",E);
u.data("repy",T);
u.data("repo",u.css("opacity"));
u.data("rotate",w);
u.data("scale",b);
u.transition({
opacity:0,scale:b,rotate:w,x:E,y:T,duration:"0ms"}
)}
else{
if(r.ie||r.ie9){
}
else{
if(u.find("iframe").length==0)u.transition({
scale:1,rotate:0}
)}
}
if(u.hasClass("lfr")){
u.css({
opacity:1,left:15+r.width+"px",top:r.bh*u.data("y")+"px"}
)}
if(u.hasClass("lfl")){
u.css({
opacity:1,left:-15-c+"px",top:r.bh*u.data("y")+"px"}
)}
if(u.hasClass("sfl")){
u.css({
opacity:0,left:s*u.data("x")-50+offsetx+"px",top:r.bh*u.data("y")+"px"}
)}
if(u.hasClass("sfr")){
u.css({
opacity:0,left:s*u.data("x")+50+offsetx+"px",top:r.bh*u.data("y")+"px"}
)}
if(u.hasClass("lft")){
u.css({
opacity:1,left:s*u.data("x")+offsetx+"px",top:-25-h+"px"}
)}
if(u.hasClass("lfb")){
u.css({
opacity:1,left:s*u.data("x")+offsetx+"px",top:25+r.height+"px"}
)}
if(u.hasClass("sft")){
u.css({
opacity:0,left:s*u.data("x")+offsetx+"px",top:r.bh*u.data("y")-50+"px"}
)}
if(u.hasClass("sfb")){
u.css({
opacity:0,left:s*u.data("x")+offsetx+"px",top:r.bh*u.data("y")+50+"px"}
)}
u.data("timer",setTimeout(function(){
u.css({
visibility:"visible"}
);
if(u.hasClass("fade")){
u.data("repo",u.css("opacity"));
u.animate({
opacity:1}
,{
duration:u.data("speed"),complete:function(){
if(r.ie)e(this).addClass("noFilterClass")}
}
)}
if(u.hasClass("randomrotate")){
u.transition({
opacity:1,scale:1,left:s*u.data("x")+offsetx+"px",top:o*u.data("y")+f+"px",rotate:0,x:0,y:0,duration:u.data("speed")}
);
if(r.ie)u.addClass("noFilterClass")}
if(u.hasClass("lfr")||u.hasClass("lfl")||u.hasClass("sfr")||u.hasClass("sfl")||u.hasClass("lft")||u.hasClass("lfb")||u.hasClass("sft")||u.hasClass("sfb")){
var n=u.data("easing");
if(n==t)n="linear";
u.data("repx",u.position().left);
u.data("repy",u.position().top);
u.data("repo",u.css("opacity"));
u.animate({
opacity:1,left:s*u.data("x")+offsetx+"px",top:r.bh*u.data("y")+"px"}
,{
duration:u.data("speed"),easing:n,complete:function(){
if(r.ie)e(this).addClass("noFilterClass")}
}
)}
}
,u.data("start")));
if(u.data("end")!=t)u.data("timer-end",setTimeout(function(){
if((r.ie||r.ie9)&&(u.hasClass("randomrotate")||u.hasClass("randomrotateout"))){
u.removeClass("randomrotate").removeClass("randomrotateout").addClass("fadeout")}
A(u,r)}
,u.data("end")))}
}
);
var s=jQuery("body").find(".tp-bannertimer");
s.data("opt",r)}
function L(e,t){
e.find(".tp-caption").each(function(n){
var r=e.find(".tp-caption:eq("+n+")");
r.stop(true,true);
clearTimeout(r.data("timer"));
clearTimeout(r.data("timer-end"));
var i=r.data("easing");
i="easeInOutSine";
var s=r.data("repx");
var o=r.data("repy");
var u=r.data("repo");
var a=r.data("rotate");
var f=r.data("scale");
if(r.find("iframe").length>0){
try{
var l=r.find("iframe");
var c=l.attr("id");
var h=$f(c);
h.api("pause")}
catch(p){
}
try{
var d=r.data("player");
d.stopVideo()}
catch(p){
}
}
try{
A(r,t)}
catch(p){
}
}
)}
function A(n,r){
if(n.hasClass("randomrotate")&&(r.ie||r.ie9))n.removeClass("randomrotate").addClass("sfb");
if(n.hasClass("randomrotateout")&&(r.ie||r.ie9))n.removeClass("randomrotateout").addClass("stb");
var i=n.data("endspeed");
if(i==t)i=n.data("speed");
var s=n.data("repx");
var o=n.data("repy");
var u=n.data("repo");
if(r.ie){
n.css({
opacity:"inherit",filter:"inherit"}
)}
if(n.hasClass("ltr")||n.hasClass("ltl")||n.hasClass("str")||n.hasClass("stl")||n.hasClass("ltt")||n.hasClass("ltb")||n.hasClass("stt")||n.hasClass("stb")){
s=n.position().left;
o=n.position().top;
if(n.hasClass("ltr"))s=r.width+60;
else if(n.hasClass("ltl"))s=0-n.width()-60;
else if(n.hasClass("ltt"))o=0-n.height()-60;
else if(n.hasClass("ltb"))o=r.height+60;
else if(n.hasClass("str")){
s=s+50;
u=0}
else if(n.hasClass("stl")){
s=s-50;
u=0}
else if(n.hasClass("stt")){
o=o-50;
u=0}
else if(n.hasClass("stb")){
o=o+50;
u=0}
var a=n.data("endeasing");
if(a==t)a="linear";
n.animate({
opacity:u,left:s+"px",top:o+"px"}
,{
duration:n.data("endspeed"),easing:a,complete:function(){
e(this).css({
visibility:"hidden"}
)}
}
);
if(r.ie)n.removeClass("noFilterClass")}
else if(n.hasClass("randomrotateout")){
n.transition({
opacity:0,scale:Math.random()*2+.3,left:Math.random()*r.width+"px",top:Math.random()*r.height+"px",rotate:Math.random()*40,duration:i,complete:function(){
e(this).css({
visibility:"hidden"}
)}
}
);
if(r.ie)n.removeClass("noFilterClass")}
else if(n.hasClass("fadeout")){
if(r.ie)n.removeClass("noFilterClass");
n.animate({
opacity:0}
,{
duration:200,complete:function(){
e(this).css({
visibility:"hidden"}
)}
}
)}
else if(n.hasClass("lfr")||n.hasClass("lfl")||n.hasClass("sfr")||n.hasClass("sfl")||n.hasClass("lft")||n.hasClass("lfb")||n.hasClass("sft")||n.hasClass("sfb")){
if(n.hasClass("lfr"))s=r.width+60;
else if(n.hasClass("lfl"))s=0-n.width()-60;
else if(n.hasClass("lft"))o=0-n.height()-60;
else if(n.hasClass("lfb"))o=r.height+60;
var a=n.data("endeasing");
if(a==t)a="linear";
n.animate({
opacity:u,left:s+"px",top:o+"px"}
,{
duration:n.data("endspeed"),easing:a,complete:function(){
e(this).css({
visibility:"hidden"}
)}
}
);
if(r.ie)n.removeClass("noFilterClass")}
else if(n.hasClass("fade")){
n.animate({
opacity:0}
,{
duration:i,complete:function(){
e(this).css({
visibility:"hidden"}
)}
}
);
if(r.ie)n.removeClass("noFilterClass")}
else if(n.hasClass("randomrotate")){
n.transition({
opacity:0,scale:Math.random()*2+.3,left:Math.random()*r.width+"px",top:Math.random()*r.height+"px",rotate:Math.random()*40,duration:i}
);
if(r.ie)n.removeClass("noFilterClass")}
}
function O(t,n){
t.children().each(function(){
e(this).die("click");
e(this).die("mouseenter");
e(this).die("mouseleave");
e(this).unbind("hover")}
);
t.die("click","mouseenter","mouseleave");
clearInterval(n.cdint);
t=null}
function M(n,r){
r.cd=0;
r.loop=0;
if(r.stopAfterLoops!=t&&r.stopAfterLoops>-1)r.looptogo=r.stopAfterLoops;
else r.looptogo=9999999;
if(r.stopAtSlide!=t&&r.stopAtSlide>-1)r.lastslidetoshow=r.stopAtSlide;
else r.lastslidetoshow=999;
if(r.looptogo==0)r.stopLoop="on";
if(r.slideamount>1&&!(r.stopAfterLoops==0&&r.stopAtSlide==1)){
var i=n.find(".tp-bannertimer");
if(i.length>0){
i.css({
width:"0%"}
);
i.animate({
width:"100%"}
,{
duration:r.delay-100,queue:false,easing:"linear"}
)}
i.data("opt",r);
r.cdint=setInterval(function(){
if(e("body").find(n).length==0)O(n,r);
if(n.data("conthover-changed")==1){
r.conthover=n.data("conthover");
n.data("conthover-changed",0)}
if(r.conthover!=1&&r.videoplaying!=true&&r.width>r.hideSliderAtLimit)r.cd=r.cd+100;
if(r.fullWidth!="on")if(r.width>r.hideSliderAtLimit)n.parent().removeClass("tp-hide-revslider");
else n.parent().addClass("tp-hide-revslider");
if(r.videostartednow==1){
n.trigger("revolution.slide.onvideoplay");
r.videostartednow=0}
if(r.videostoppednow==1){
n.trigger("revolution.slide.onvideostop");
r.videostoppednow=0}
if(r.cd>=r.delay){
r.cd=0;
r.act=r.next;
r.next=r.next+1;
if(r.next>n.find(">ul >li").length-1){
r.next=0;
r.looptogo=r.looptogo-1;
if(r.loop<=0){
r.stopLoop="on"}
}
if(r.stopLoop=="on"&&r.next==r.lastslidetoshow-1){
clearInterval(r.cdint);
n.find(".tp-bannertimer").css({
visibility:"hidden"}
);
n.trigger("revolution.slide.onstop")}
w(n,r);
if(i.length>0){
i.css({
width:"0%"}
);
i.animate({
width:"100%"}
,{
duration:r.delay-100,queue:false,easing:"linear"}
)}
}
}
,100);
n.hover(function(){
if(r.onHoverStop=="on"){
r.conthover=1;
i.stop();
n.trigger("revolution.slide.onpause")}
}
,function(){
if(n.data("conthover")!=1){
n.trigger("revolution.slide.onresume");
r.conthover=0;
if(r.onHoverStop=="on"&&r.videoplaying!=true){
i.animate({
width:"100%"}
,{
duration:r.delay-r.cd-100,queue:false,easing:"linear"}
)}
}
}
)}
}
e.fn.extend({
revolution:function(r){
e.fn.revolution.defaults={
delay:9e3,startheight:500,startwidth:960,hideThumbs:200,thumbWidth:100,thumbHeight:50,thumbAmount:5,navigationType:"bullet",navigationArrows:"withbullet",navigationStyle:"round",navigationHAlign:"center",navigationVAlign:"bottom",navigationHOffset:0,navigationVOffset:20,soloArrowLeftHalign:"left",soloArrowLeftValign:"center",soloArrowLeftHOffset:20,soloArrowLeftVOffset:0,soloArrowRightHalign:"right",soloArrowRightValign:"center",soloArrowRightHOffset:20,soloArrowRightVOffset:0,touchenabled:"on",onHoverStop:"on",stopAtSlide:-1,stopAfterLoops:-1,hideCaptionAtLimit:0,hideAllCaptionAtLilmit:0,hideSliderAtLimit:0,shadow:1,fullWidth:"off"}
;
r=e.extend({
}
,e.fn.revolution.defaults,r);
return this.each(function(){
var i=r;
var o=e(this);
if(!o.hasClass("revslider-initialised")){
o.addClass("revslider-initialised");
i.firefox13=false;
i.ie=!e.support.opacity;
i.ie9=document.documentMode==9;
var u=e.fn.jquery.split("."),h=parseFloat(u[0]),p=parseFloat(u[1]),v=parseFloat(u[2]||"0");
if(h==1&&p<7){
o.html('<div style="text-align:center;
padding:40px 0px;
font-size:20px;
color:#992222;
"> The Current Version of jQuery:'+u+" <br>Please update your jQuery Version to min. 1.7 in Case you wish to use the Revolution Slider Plugin</div>")}
if(!e.support.transition)e.fn.transition=e.fn.animate;
e.cssEase["bounce"]="cubic-bezier(0,1,0.5,1.3)";
o.find(".caption").each(function(){
e(this).addClass("tp-caption")}
);
o.find(".tp-caption iframe").each(function(){
try{
if(e(this).attr("src").indexOf("you")>0){
var t=document.createElement("script");
t.src="http://www.youtube.com/player_api";
var n=document.getElementsByTagName("script")[0];
n.parentNode.insertBefore(t,n)}
}
catch(r){
}
}
);
o.find(".tp-caption iframe").each(function(){
try{
if(e(this).attr("src").indexOf("vim")>0){
var t=document.createElement("script");
t.src="http://a.vimeocdn.com/js/froogaloop2.min.js";
var n=document.getElementsByTagName("script")[0];
n.parentNode.insertBefore(t,n)}
}
catch(r){
}
}
);
if(i.shuffle=="on"){
for(var m=0;
m<o.find(">ul:first-child >li").length;
m++){
var g=Math.round(Math.random()*o.find(">ul:first-child >li").length);
o.find(">ul:first-child >li:eq("+g+")").prependTo(o.find(">ul:first-child"))}
}
i.slots=4;
i.act=-1;
i.next=0;
if(i.startWithSlide!=t)i.next=i.startWithSlide;
i.origcd=i.delay;
i.firststart=1;
if(i.navigationHOffset==t)i.navOffsetHorizontal=0;
if(i.navigationVOffset==t)i.navOffsetVertical=0;
o.append('<div class="tp-loader"></div>');
if(o.find(".tp-bannertimer").length==0)o.append('<div class="tp-bannertimer" style="visibility:hidden"></div>');
var y=o.find(".tp-bannertimer");
if(y.length>0){
y.css({
width:"0%"}
)}
o.addClass("tp-simpleresponsive");
i.container=o;
i.slideamount=o.find(">ul:first >li").length;
if(o.height()==0)o.height(i.startheight);
if(i.startwidth==t||i.startwidth==0)i.startwidth=o.width();
if(i.startheight==t||i.startheight==0)i.startheight=o.height();
i.width=o.width();
i.height=o.height();
i.bw=i.startwidth/o.width();
i.bh=i.startheight/o.height();
if(i.width!=i.startwidth){
i.height=Math.round(i.startheight*(i.width/i.startwidth));
o.height(i.height)}
if(i.shadow!=0){
o.parent().append('<div class="tp-bannershadow tp-shadow'+i.shadow+'"></div>');
o.parent().find(".tp-bannershadow").css({
width:i.width}
)}
o.find("ul").css({
display:"none"}
);
o.waitForImages(function(){
o.find("ul").css({
display:"block"}
);
d(o,i);
if(i.slideamount>1)a(o,i);
if(i.slideamount>1)s(o,i);
if(i.slideamount>1)f(o,i);
e("#unvisible_button").click(function(){
i.navigationArrows=e(".selectnavarrows").val();
i.navigationType=e(".selectnavtype").val();
i.navigationStyle=e(".selectnavstyle").val();
i.soloArrowStyle="default";
e(".tp-bullets").remove();
e(".tparrows").remove();
if(i.slideamount>1)a(o,i);
if(i.slideamount>1)s(o,i);
if(i.slideamount>1)f(o,i)}
);
l(o,i);
if(i.hideThumbs>0)c(o,i);
o.waitForImages(function(){
o.find(".tp-loader").fadeOut(600);
setTimeout(function(){
w(o,i);
if(i.slideamount>1)M(o,i);
o.trigger("revolution.slide.onloaded")}
,600)}
)}
);
e(window).resize(function(){
if(e("body").find(o)!=0)if(o.outerWidth(true)!=i.width){
n(o,i)}
}
)}
}
)}
,revpause:function(t){
return this.each(function(){
var t=e(this);
t.data("conthover",1);
t.data("conthover-changed",1);
t.trigger("revolution.slide.onpause");
var n=t.parent().find(".tp-bannertimer");
n.stop()}
)}
,revresume:function(t){
return this.each(function(){
var t=e(this);
t.data("conthover",0);
t.data("conthover-changed",1);
t.trigger("revolution.slide.onresume");
var n=t.parent().find(".tp-bannertimer");
var r=n.data("opt");
n.animate({
width:"100%"}
,{
duration:r.delay-r.cd-100,queue:false,easing:"linear"}
)}
)}
,revnext:function(t){
return this.each(function(){
var t=e(this);
t.parent().find(".tp-rightarrow").click()}
)}
,revprev:function(t){
return this.each(function(){
var t=e(this);
t.parent().find(".tp-leftarrow").click()}
)}
,revmaxslide:function(t){
return e(this).find(">ul:first-child >li").length}
,revcurrentslide:function(t){
var n=e(this);
var r=n.parent().find(".tp-bannertimer");
var i=r.data("opt");
return i.act}
,revlastslide:function(t){
var n=e(this);
var r=n.parent().find(".tp-bannertimer");
var i=r.data("opt");
return i.lastslide}
,revshowslide:function(t){
return this.each(function(){
var n=e(this);
n.data("showus",t);
n.parent().find(".tp-rightarrow").click()}
)}
}
)}
)(jQuery);
(function(e){
e.flexslider=function(t,n){
var r=e(t),i=e.extend({
}
,e.flexslider.defaults,n),s=i.namespace,o="ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch,u=o?"touchend":"click",a="vertical"===i.direction,f=i.reverse,l=0<i.itemWidth,c="fade"===i.animation,h=""!==i.asNavFor,p={
}
;
e.data(t,"flexslider",r);
p={
init:function(){
r.animating=!1;
r.currentSlide=i.startAt;
r.animatingTo=r.currentSlide;
r.atEnd=0===r.currentSlide||r.currentSlide===r.last;
r.containerSelector=i.selector.substr(0,i.selector.search(" "));
r.slides=e(i.selector,r);
r.container=e(r.containerSelector,r);
r.count=r.slides.length;
r.syncExists=0<e(i.sync).length;
"slide"===i.animation&&(i.animation="swing");
r.prop=a?"top":"marginLeft";
r.args={
}
;
r.manualPause=!1;
var t=r,n;
if(n=!i.video)if(n=!c)if(n=i.useCSS)e:{
n=document.createElement("div");
var s=["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"],u;
for(u in s)if(void 0!==n.style[s[u]]){
r.pfx=s[u].replace("Perspective","").toLowerCase();
r.prop="-"+r.pfx+"-transform";
n=!0;
break e}
n=!1}
t.transitions=n;
""!==i.controlsContainer&&(r.controlsContainer=0<e(i.controlsContainer).length&&e(i.controlsContainer));
""!==i.manualControls&&(r.manualControls=0<e(i.manualControls).length&&e(i.manualControls));
i.randomize&&(r.slides.sort(function(){
return Math.round(Math.random())-.5}
),r.container.empty().append(r.slides));
r.doMath();
h&&p.asNav.setup();
r.setup("init");
i.controlNav&&p.controlNav.setup();
i.directionNav&&p.directionNav.setup();
i.keyboard&&(1===e(r.containerSelector).length||i.multipleKeyboard)&&e(document).bind("keyup",function(e){
e=e.keyCode;
if(!r.animating&&(39===e||37===e))e=39===e?r.getTarget("next"):37===e?r.getTarget("prev"):!1,r.flexAnimate(e,i.pauseOnAction)}
);
i.mousewheel&&r.bind("mousewheel",function(e,t){
e.preventDefault();
var n=0>t?r.getTarget("next"):r.getTarget("prev");
r.flexAnimate(n,i.pauseOnAction)}
);
i.pausePlay&&p.pausePlay.setup();
i.slideshow&&(i.pauseOnHover&&r.hover(function(){
!r.manualPlay&&!r.manualPause&&r.pause()}
,function(){
!r.manualPause&&!r.manualPlay&&r.play()}
),0<i.initDelay?setTimeout(r.play,i.initDelay):r.play());
o&&i.touch&&p.touch();
(!c||c&&i.smoothHeight)&&e(window).bind("resize focus",p.resize);
setTimeout(function(){
i.start(r)}
,200)}
,asNav:{
setup:function(){
r.asNav=!0;
r.animatingTo=Math.floor(r.currentSlide/r.move);
r.currentItem=r.currentSlide;
r.slides.removeClass(s+"active-slide").eq(r.currentItem).addClass(s+"active-slide");
r.slides.click(function(t){
t.preventDefault();
t=e(this);
var n=t.index();
!e(i.asNavFor).data("flexslider").animating&&!t.hasClass("active")&&(r.direction=r.currentItem<n?"next":"prev",r.flexAnimate(n,i.pauseOnAction,!1,!0,!0))}
)}
}
,controlNav:{
setup:function(){
r.manualControls?p.controlNav.setupManual():p.controlNav.setupPaging()}
,setupPaging:function(){
var t=1,n;
r.controlNavScaffold=e('<ol class="'+s+"control-nav "+s+("thumbnails"===i.controlNav?"control-thumbs":"control-paging")+'"></ol>');
if(1<r.pagingCount)for(var a=0;
a<r.pagingCount;
a++)n="thumbnails"===i.controlNav?'<img src="'+r.slides.eq(a).attr("data-thumb")+'"/>':"<a>"+t+"</a>",r.controlNavScaffold.append("<li>"+n+"</li>"),t++;
r.controlsContainer?e(r.controlsContainer).append(r.controlNavScaffold):r.append(r.controlNavScaffold);
p.controlNav.set();
p.controlNav.active();
r.controlNavScaffold.delegate("a,img",u,function(t){
t.preventDefault();
t=e(this);
var n=r.controlNav.index(t);
t.hasClass(s+"active")||(r.direction=n>r.currentSlide?"next":"prev",r.flexAnimate(n,i.pauseOnAction))}
);
o&&r.controlNavScaffold.delegate("a","click touchstart",function(e){
e.preventDefault()}
)}
,setupManual:function(){
r.controlNav=r.manualControls;
p.controlNav.active();
r.controlNav.live(u,function(t){
t.preventDefault();
t=e(this);
var n=r.controlNav.index(t);
t.hasClass(s+"active")||(n>r.currentSlide?r.direction="next":r.direction="prev",r.flexAnimate(n,i.pauseOnAction))}
);
o&&r.controlNav.live("click touchstart",function(e){
e.preventDefault()}
)}
,set:function(){
r.controlNav=e("."+s+"control-nav li "+("thumbnails"===i.controlNav?"img":"a"),r.controlsContainer?r.controlsContainer:r)}
,active:function(){
r.controlNav.removeClass(s+"active").eq(r.animatingTo).addClass(s+"active")}
,update:function(t,n){
1<r.pagingCount&&"add"===t?r.controlNavScaffold.append(e("<li><a>"+r.count+"</a></li>")):1===r.pagingCount?r.controlNavScaffold.find("li").remove():r.controlNav.eq(n).closest("li").remove();
p.controlNav.set();
1<r.pagingCount&&r.pagingCount!==r.controlNav.length?r.update(n,t):p.controlNav.active()}
}
,directionNav:{
setup:function(){
var t=e('<ul class="'+s+'direction-nav"><li><a class="'+s+'prev" href="#">'+i.prevText+'</a></li><li><a class="'+s+'next" href="#">'+i.nextText+"</a></li></ul>");
r.controlsContainer?(e(r.controlsContainer).append(t),r.directionNav=e("."+s+"direction-nav li a",r.controlsContainer)):(r.append(t),r.directionNav=e("."+s+"direction-nav li a",r));
p.directionNav.update();
r.directionNav.bind(u,function(t){
t.preventDefault();
t=e(this).hasClass(s+"next")?r.getTarget("next"):r.getTarget("prev");
r.flexAnimate(t,i.pauseOnAction)}
);
o&&r.directionNav.bind("click touchstart",function(e){
e.preventDefault()}
)}
,update:function(){
var e=s+"disabled";
1===r.pagingCount?r.directionNav.addClass(e):i.animationLoop?r.directionNav.removeClass(e):0===r.animatingTo?r.directionNav.removeClass(e).filter("."+s+"prev").addClass(e):r.animatingTo===r.last?r.directionNav.removeClass(e).filter("."+s+"next").addClass(e):r.directionNav.removeClass(e)}
}
,pausePlay:{
setup:function(){
var t=e('<div class="'+s+'pauseplay"><a></a></div>');
r.controlsContainer?(r.controlsContainer.append(t),r.pausePlay=e("."+s+"pauseplay a",r.controlsContainer)):(r.append(t),r.pausePlay=e("."+s+"pauseplay a",r));
p.pausePlay.update(i.slideshow?s+"pause":s+"play");
r.pausePlay.bind(u,function(t){
t.preventDefault();
e(this).hasClass(s+"pause")?(r.manualPause=!0,r.manualPlay=!1,r.pause()):(r.manualPause=!1,r.manualPlay=!0,r.play())}
);
o&&r.pausePlay.bind("click touchstart",function(e){
e.preventDefault()}
)}
,update:function(e){
"play"===e?r.pausePlay.removeClass(s+"pause").addClass(s+"play").text(i.playText):r.pausePlay.removeClass(s+"play").addClass(s+"pause").text(i.pauseText)}
}
,touch:function(){
function e(e){
p=a?s-e.touches[0].pageY:s-e.touches[0].pageX;
v=a?Math.abs(p)<Math.abs(e.touches[0].pageX-o):Math.abs(p)<Math.abs(e.touches[0].pageY-o);
if(!v||500<Number(new Date)-d)e.preventDefault(),!c&&r.transitions&&(i.animationLoop||(p/=0===r.currentSlide&&0>p||r.currentSlide===r.last&&0<p?Math.abs(p)/h+2:1),r.setProps(u+p,"setTouch"))}
function n(){
t.removeEventListener("touchmove",e,!1);
if(r.animatingTo===r.currentSlide&&!v&&null!==p){
var a=f?-p:p,l=0<a?r.getTarget("next"):r.getTarget("prev");
r.canAdvance(l)&&(550>Number(new Date)-d&&50<Math.abs(a)||Math.abs(a)>h/2)?r.flexAnimate(l,i.pauseOnAction):c||r.flexAnimate(r.currentSlide,i.pauseOnAction,!0)}
t.removeEventListener("touchend",n,!1);
u=p=o=s=null}
var s,o,u,h,p,d,v=!1;
t.addEventListener("touchstart",function(c){
r.animating?c.preventDefault():1===c.touches.length&&(r.pause(),h=a?r.h:r.w,d=Number(new Date),u=l&&f&&r.animatingTo===r.last?0:l&&f?r.limit-(r.itemW+i.itemMargin)*r.move*r.animatingTo:l&&r.currentSlide===r.last?r.limit:l?(r.itemW+i.itemMargin)*r.move*r.currentSlide:f?(r.last-r.currentSlide+r.cloneOffset)*h:(r.currentSlide+r.cloneOffset)*h,s=a?c.touches[0].pageY:c.touches[0].pageX,o=a?c.touches[0].pageX:c.touches[0].pageY,t.addEventListener("touchmove",e,!1),t.addEventListener("touchend",n,!1))}
,!1)}
,resize:function(){
!r.animating&&r.is(":visible")&&(l||r.doMath(),c?p.smoothHeight():l?(r.slides.width(r.computedW),r.update(r.pagingCount),r.setProps()):a?(r.viewport.height(r.h),r.setProps(r.h,"setTotal")):(i.smoothHeight&&p.smoothHeight(),r.newSlides.width(r.computedW),r.setProps(r.computedW,"setTotal")))}
,smoothHeight:function(e){
if(!a||c){
var t=c?r:r.viewport;
e?t.animate({
height:r.slides.eq(r.animatingTo).height()}
,e):t.height(r.slides.eq(r.animatingTo).height())}
}
,sync:function(t){
var n=e(i.sync).data("flexslider"),s=r.animatingTo;
switch(t){
case"animate":n.flexAnimate(s,i.pauseOnAction,!1,!0);
break;
case"play":!n.playing&&!n.asNav&&n.play();
break;
case"pause":n.pause()}
}
}
;
r.flexAnimate=function(t,n,u,v,g){
h&&1===r.pagingCount&&(r.direction=r.currentItem<t?"next":"prev");
if(!r.animating&&(r.canAdvance(t,g)||u)&&r.is(":visible")){
if(h&&v)if(u=e(i.asNavFor).data("flexslider"),r.atEnd=0===t||t===r.count-1,u.flexAnimate(t,!0,!1,!0,g),r.direction=r.currentItem<t?"next":"prev",u.direction=r.direction,Math.ceil((t+1)/r.visible)-1!==r.currentSlide&&0!==t)r.currentItem=t,r.slides.removeClass(s+"active-slide").eq(t).addClass(s+"active-slide"),t=Math.floor(t/r.visible);
else return r.currentItem=t,r.slides.removeClass(s+"active-slide").eq(t).addClass(s+"active-slide"),!1;
r.animating=!0;
r.animatingTo=t;
i.before(r);
n&&r.pause();
r.syncExists&&!g&&p.sync("animate");
i.controlNav&&p.controlNav.active();
l||r.slides.removeClass(s+"active-slide").eq(t).addClass(s+"active-slide");
r.atEnd=0===t||t===r.last;
i.directionNav&&p.directionNav.update();
t===r.last&&(i.end(r),i.animationLoop||r.pause());
if(c)o?(r.slides.eq(r.currentSlide).css({
opacity:0,zIndex:1}
),r.slides.eq(t).css({
opacity:1,zIndex:2}
),r.slides.unbind("webkitTransitionEnd transitionend"),r.slides.eq(r.currentSlide).bind("webkitTransitionEnd transitionend",function(){
i.after(r)}
),r.animating=!1,r.currentSlide=r.animatingTo):(r.slides.eq(r.currentSlide).fadeOut(i.animationSpeed,i.easing),r.slides.eq(t).fadeIn(i.animationSpeed,i.easing,r.wrapup));
else{
var y=a?r.slides.filter(":first").height():r.computedW;
l?(t=i.itemWidth>r.w?2*i.itemMargin:i.itemMargin,t=(r.itemW+t)*r.move*r.animatingTo,t=t>r.limit&&1!==r.visible?r.limit:t):t=0===r.currentSlide&&t===r.count-1&&i.animationLoop&&"next"!==r.direction?f?(r.count+r.cloneOffset)*y:0:r.currentSlide===r.last&&0===t&&i.animationLoop&&"prev"!==r.direction?f?0:(r.count+1)*y:f?(r.count-1-t+r.cloneOffset)*y:(t+r.cloneOffset)*y;
r.setProps(t,"",i.animationSpeed);
if(r.transitions){
if(!i.animationLoop||!r.atEnd)r.animating=!1,r.currentSlide=r.animatingTo;
r.container.unbind("webkitTransitionEnd transitionend");
r.container.bind("webkitTransitionEnd transitionend",function(){
r.wrapup(y)}
)}
else r.container.animate(r.args,i.animationSpeed,i.easing,function(){
r.wrapup(y)}
)}
i.smoothHeight&&p.smoothHeight(i.animationSpeed)}
}
;
r.wrapup=function(e){
!c&&!l&&(0===r.currentSlide&&r.animatingTo===r.last&&i.animationLoop?r.setProps(e,"jumpEnd"):r.currentSlide===r.last&&0===r.animatingTo&&i.animationLoop&&r.setProps(e,"jumpStart"));
r.animating=!1;
r.currentSlide=r.animatingTo;
i.after(r)}
;
r.animateSlides=function(){
r.animating||r.flexAnimate(r.getTarget("next"))}
;
r.pause=function(){
clearInterval(r.animatedSlides);
r.playing=!1;
i.pausePlay&&p.pausePlay.update("play");
r.syncExists&&p.sync("pause")}
;
r.play=function(){
r.animatedSlides=setInterval(r.animateSlides,i.slideshowSpeed);
r.playing=!0;
i.pausePlay&&p.pausePlay.update("pause");
r.syncExists&&p.sync("play")}
;
r.canAdvance=function(e,t){
var n=h?r.pagingCount-1:r.last;
return t?!0:h&&r.currentItem===r.count-1&&0===e&&"prev"===r.direction?!0:h&&0===r.currentItem&&e===r.pagingCount-1&&"next"!==r.direction?!1:e===r.currentSlide&&!h?!1:i.animationLoop?!0:r.atEnd&&0===r.currentSlide&&e===n&&"next"!==r.direction?!1:r.atEnd&&r.currentSlide===n&&0===e&&"next"===r.direction?!1:!0}
;
r.getTarget=function(e){
r.direction=e;
return"next"===e?r.currentSlide===r.last?0:r.currentSlide+1:0===r.currentSlide?r.last:r.currentSlide-1}
;
r.setProps=function(e,t,n){
var s,o=e?e:(r.itemW+i.itemMargin)*r.move*r.animatingTo;
s=-1*function(){
if(l)return"setTouch"===t?e:f&&r.animatingTo===r.last?0:f?r.limit-(r.itemW+i.itemMargin)*r.move*r.animatingTo:r.animatingTo===r.last?r.limit:o;
switch(t){
case"setTotal":return f?(r.count-1-r.currentSlide+r.cloneOffset)*e:(r.currentSlide+r.cloneOffset)*e;
case"setTouch":return e;
case"jumpEnd":return f?e:r.count*e;
case"jumpStart":return f?r.count*e:e;
default:return e}
}
()+"px";
r.transitions&&(s=a?"translate3d(0,"+s+",0)":"translate3d("+s+",0,0)",n=void 0!==n?n/1e3+"s":"0s",r.container.css("-"+r.pfx+"-transition-duration",n));
r.args[r.prop]=s;
(r.transitions||void 0===n)&&r.container.css(r.args)}
;
r.setup=function(t){
if(c)r.slides.css({
width:"100%","float":"left",marginRight:"-100%",position:"relative"}
),"init"===t&&(o?r.slides.css({
opacity:0,display:"block",webkitTransition:"opacity "+i.animationSpeed/1e3+"s ease",zIndex:1}
).eq(r.currentSlide).css({
opacity:1,zIndex:2}
):r.slides.eq(r.currentSlide).fadeIn(i.animationSpeed,i.easing)),i.smoothHeight&&p.smoothHeight();
else{
var n,u;
"init"===t&&(r.viewport=e('<div class="'+s+'viewport"></div>').css({
overflow:"hidden",position:"relative"}
).appendTo(r).append(r.container),r.cloneCount=0,r.cloneOffset=0,f&&(u=e.makeArray(r.slides).reverse(),r.slides=e(u),r.container.empty().append(r.slides)));
i.animationLoop&&!l&&(r.cloneCount=2,r.cloneOffset=1,"init"!==t&&r.container.find(".clone").remove(),r.container.append(r.slides.first().clone().addClass("clone")).prepend(r.slides.last().clone().addClass("clone")));
r.newSlides=e(i.selector,r);
n=f?r.count-1-r.currentSlide+r.cloneOffset:r.currentSlide+r.cloneOffset;
a&&!l?(r.container.height(200*(r.count+r.cloneCount)+"%").css("position","absolute").width("100%"),setTimeout(function(){
r.newSlides.css({
display:"block"}
);
r.doMath();
r.viewport.height(r.h);
r.setProps(n*r.h,"init")}
,"init"===t?100:0)):(r.container.width(200*(r.count+r.cloneCount)+"%"),r.setProps(n*r.computedW,"init"),setTimeout(function(){
r.doMath();
r.newSlides.css({
width:r.computedW,"float":"left",display:"block"}
);
i.smoothHeight&&p.smoothHeight()}
,"init"===t?100:0))}
l||r.slides.removeClass(s+"active-slide").eq(r.currentSlide).addClass(s+"active-slide")}
;
r.doMath=function(){
var e=r.slides.first(),t=i.itemMargin,n=i.minItems,s=i.maxItems;
r.w=r.width();
r.h=e.height();
r.boxPadding=e.outerWidth()-e.width();
l?(r.itemT=i.itemWidth+t,r.minW=n?n*r.itemT:r.w,r.maxW=s?s*r.itemT:r.w,r.itemW=r.minW>r.w?(r.w-t*n)/n:r.maxW<r.w?(r.w-t*s)/s:i.itemWidth>r.w?r.w:i.itemWidth,r.visible=Math.floor(r.w/(r.itemW+t)),r.move=0<i.move&&i.move<r.visible?i.move:r.visible,r.pagingCount=Math.ceil((r.count-r.visible)/r.move+1),r.last=r.pagingCount-1,r.limit=1===r.pagingCount?0:i.itemWidth>r.w?(r.itemW+2*t)*r.count-r.w-t:(r.itemW+t)*r.count-r.w-t):(r.itemW=r.w,r.pagingCount=r.count,r.last=r.count-1);
r.computedW=r.itemW-r.boxPadding}
;
r.update=function(e,t){
r.doMath();
l||(e<r.currentSlide?r.currentSlide+=1:e<=r.currentSlide&&0!==e&&(r.currentSlide-=1),r.animatingTo=r.currentSlide);
if(i.controlNav&&!r.manualControls)if("add"===t&&!l||r.pagingCount>r.controlNav.length)p.controlNav.update("add");
else if("remove"===t&&!l||r.pagingCount<r.controlNav.length)l&&r.currentSlide>r.last&&(r.currentSlide-=1,r.animatingTo-=1),p.controlNav.update("remove",r.last);
i.directionNav&&p.directionNav.update()}
;
r.addSlide=function(t,n){
var s=e(t);
r.count+=1;
r.last=r.count-1;
a&&f?void 0!==n?r.slides.eq(r.count-n).after(s):r.container.prepend(s):void 0!==n?r.slides.eq(n).before(s):r.container.append(s);
r.update(n,"add");
r.slides=e(i.selector+":not(.clone)",r);
r.setup();
i.added(r)}
;
r.removeSlide=function(t){
var n=isNaN(t)?r.slides.index(e(t)):t;
r.count-=1;
r.last=r.count-1;
isNaN(t)?e(t,r.slides).remove():a&&f?r.slides.eq(r.last).remove():r.slides.eq(t).remove();
r.doMath();
r.update(n,"remove");
r.slides=e(i.selector+":not(.clone)",r);
r.setup();
i.removed(r)}
;
p.init()}
;
e.flexslider.defaults={
namespace:"flex-",selector:".slides > li",animation:"fade",easing:"swing",direction:"horizontal",reverse:!1,animationLoop:!0,smoothHeight:!1,startAt:0,slideshow:!0,slideshowSpeed:7e3,animationSpeed:600,initDelay:0,randomize:!1,pauseOnAction:!0,pauseOnHover:!1,useCSS:!0,touch:!0,video:!1,controlNav:!0,directionNav:!0,prevText:"Previous",nextText:"Next",keyboard:!0,multipleKeyboard:!1,mousewheel:!1,pausePlay:!1,pauseText:"Pause",playText:"Play",controlsContainer:"",manualControls:"",sync:"",asNavFor:"",itemWidth:0,itemMargin:0,minItems:0,maxItems:0,move:0,start:function(){
}
,before:function(){
}
,after:function(){
}
,end:function(){
}
,added:function(){
}
,removed:function(){
}
}
;
e.fn.flexslider=function(t){
void 0===t&&(t={
}
);
if("object"===typeof t)return this.each(function(){
var n=e(this),r=n.find(t.selector?t.selector:".slides > li");
1===r.length?(r.fadeIn(400),t.start&&t.start(n)):void 0==n.data("flexslider")&&new e.flexslider(this,t)}
);
var n=e(this).data("flexslider");
switch(t){
case"play":n.play();
break;
case"pause":n.pause();
break;
case"next":n.flexAnimate(n.getTarget("next"),!0);
break;
case"prev":case"previous":n.flexAnimate(n.getTarget("prev"),!0);
break;
default:"number"===typeof t&&n.flexAnimate(t,!0)}
}
}
)(jQuery);
$(document).ready(function(){
$(function(){
var e=$(".to-top");
$(window).scroll(function(){
if($(this).scrollTop()!=0){
e.css({
display:"block","z-index":0,top:window.innerHeight+$(window).scrollTop()-50+"px"}
)}
else{
e[0].style.display="hidden"}
}
);
e.click(function(){
$("body,html").animate({
scrollTop:0}
,800)}
)}
);
if(navigator.userAgent.match(/iPad/i)==null){
$(".about-us-slider,.assets-slider,.events-slider,.effects-slider,.frame-slider").flexslider({
manualControls:".flex-control-nav_ li",easing:"swing",direction:"horizontal",reverse:false,animationLoop:true,smoothHeight:true,startAt:0,slideshow:true,slideshowSpeed:7e3,animationSpeed:600,initDelay:0,randomize:false,pauseOnAction:true,pauseOnHover:false,useCSS:true,touch:false,video:false,controlNav:false,directionNav:false,prevText:"Previous",nextText:"Next",keyboard:false}
)}
$(".fullwidthbanner").revolution({
delay:9e3,startwidth:960,startheight:500,onHoverStop:"on",thumbWidth:100,thumbHeight:50,thumbAmount:3,hideThumbs:0,navigationType:"none",navigationArrows:"solo",navigationStyle:"round",navigationHAlign:"center",navigationVAlign:"top",navigationHOffset:0,navigationVOffset:20,soloArrowLeftHalign:"left",soloArrowLeftValign:"center",soloArrowLeftHOffset:0,soloArrowLeftVOffset:0,soloArrowRightHalign:"right",soloArrowRightValign:"center",soloArrowRightHOffset:0,soloArrowRightVOffset:0,touchenabled:"on",stopAtSlide:-1,stopAfterLoops:-1,hideCaptionAtLimit:0,hideAllCaptionAtLilmit:0,hideSliderAtLimit:0,fullWidth:"on",shadow:0}
)}
)CSS代码(style.css):
html{color:#000;background:#FFF}
blockquote,body,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-weight:400}
q:after,q:before{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,select,textarea{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}
legend{color:#000}
#yui3-css-stamp.cssreset{display:none}
.clr,.group,.row,:first-child+html .clr,:first-child+html .group,:first-child+html .row{zoom:1}
a,button,div,h1,h2,h3,h4,h5,h6,input,label,li,p,span,td,th{font-family:'Open Sans',sans-serif;color:#323232}
h1,h2,h3,h4,h5,h6,p{margin-bottom:1em}
h1{font-size:58px;margin-bottom:58px}
h2{font-size:22px;margin-bottom:22px;display:inline-block}
h2 span{font-size:22px}
h3{font-size:18px;margin-bottom:18px}
h4{font-size:16px;margin-bottom:16px}
h5,h5 span{font-size:15px;margin-bottom:15px}
h6{font-size:14px;margin-bottom:14px}
label{font-size:14px}
a,input,li,p,span,td,th{font-size:12px}
.text-bold,.title-small,.title-small-edge,th{font-weight:700}
p{line-height:1.7em}
.text-bold{font-weight:700}
.underline{text-decoration:underline}
.light-green{background-color:#9fca66}
.green{background-color:#ff6f24}
.light-gray{background-color:#f2f2f2}
.very-light-gray{background-color:#f7f6f5}
.dark-gray{background-color:#323232}
.gray{background-color:#989898}
.white{background-color:#fff}
.eleven-gray{background-color:#4e4e4e,}
.medium-gray{background-color:#f8f8f8}
.border-gray{background-color:#d5d4d4}
.mooli{background-color:gray}
.foka{background-color:#cecece}
.light-green-text{color:#9fca66}
.green-text{color:#ff6f24}
.light-gray-text{color:#f2f2f2}
.very-light-gray-text{color:#f7f6f5}
.dark-gray-text{color:#323232}
.gray-text{color:#989898}
.white-text{color:#fff}
.eleven-gray-text{color:#4e4e4e,}
.medium-gray-text{color:#f8f8f8}
.mooli-text{color:gray}
.nova-text{color:#e5e6e4}
.tif-text{color:#979797}
.moon-gray-text{color:#919191}
.text-center{text-align:center}
.title-small{background-repeat:repeat-x}
.footer-container .title-small h5,.title-small h5{margin-bottom:0;padding-right:10px;float:left;display:table}
.title-medium{text-align:center;background:url(images/small_content_divider.png) 0 50%;background-repeat:repeat-x}
.title-medium h3{padding:0 8px;margin-bottom:0;background-color:#fff;display:inline-block;font-weight:600}
.title-large{margin-bottom:65px;position:relative}
.title-large .title-large-inner{background:url(images/small_content_title_bg.png);padding:32px 0;border-bottom:1px #ccc solid}
.title-large .title-large-inner:after{background:url(images/small_content_title_circle.png);width:15px;height:15px;content:" ";position:absolute;left:50%;bottom:-7px;z-index:1001}
.title-large h2{margin-bottom:0}
.title-small{margin-bottom:16px}
.title-medium{margin-bottom:25px}
.divider-small{border-top:1px #e5e5e5 solid;color:#3a3a3a;margin-bottom:8px}
.divider-medium{border-top:1px #e5e5e5 solid;color:#3a3a3a;margin-bottom:1px}
.divider-large{height:0;border-bottom:1px #cecece solid;position:relative;margin:50px 0}
.divider-large.small-corr{margin:12px 0}
.divider-large:after{background:url(images/small_content_title_circle.png);width:15px;height:15px;content:" ";position:absolute;right:50%;margin-right:-7px;bottom:-8px;z-index:1001;display:block}
a{text-decoration:none}
.green-hover{color:#fff;transition:color 400ms;-moz-transition:color 400ms;-webkit-transition:color 400ms;-o-transition:color 400ms}
.green-hover:hover{color:#FF6F24}
.content-green-hover{transition:color 400ms;-moz-transition:color 400ms;-webkit-transition:color 400ms;-o-transition:color 400ms}
.content-green-hover:hover{color:#ff6f24}
.portfolio-element{width:160px;min-height:210px;max-height:210px;overflow:visible;float:left;margin-right:5px}
.portfolio-element-widget{width:300px;min-height:372px}
.blog-image img{height:auto}
.image-hover img{display:block!important}
.image-hover{position:relative;display:block}
.image-hover .extra-info{text-align:center;position:absolute;top:0;left:0;visibility:hidden;opacity:0;-webkit-transition:all 400ms ease;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out;transition:all 400ms ease-in-out;background:rgba(0,0,0,0)}
.image-hover:hover .extra-info{display:block;visibility:visible;opacity:1;background:rgba(0,0,0,.5)}
.image-hover .extra-info a{position:absolute;top:50%;left:50%}
.inline-block{display:inline-block}
.floatleft{float:left}
.floatright{float:right}
.inline-ul{margin-bottom:16px;display:block}
.inline-ul li{display:inline-block;margin-right:8px}
.inline-ul-nm li{display:inline-block}
.ul-hover-a a:hover{color:#89bf42}
.no-margin{margin:0!important}
.no-margin-col .col{margin-bottom:0!important}
.no-margin-col-left .col{margin-left:0!important}
.margin{margin:16px!important}
.img-margin{margin:0 16px 16px 0}
.margin-bottom{margin-bottom:16px!important}
.no-padding,.no-padding li{padding:0}
.padding{padding:8px}
.medium-padding{padding:16px}
.large-padding{padding:32px}
.full-width{min-width:100%}
.text-align-center{text-align:center}
.center{margin:0 auto}
.footer-social-icons{margin-top:8px}
.footer-social-icons div{float:left;margin-right:8px;margin-bottom:8px;height:46px;width:48px;transition:background 400ms;-moz-transition:background 400ms;-webkit-transition:background 400ms;-o-transition:background 400ms;background-size:200% 100%!important}
.footer-social-icons div:hover{background-position:100% 0}
.footer-social-icons .social-icon-dribbble{background:url(images/medium_footer_dribbble_sprite.png) no-repeat}
.footer-social-icons .social-icon-facebook{background:url(images/medium_footer_facebook_sprite.png) no-repeat}
.footer-social-icons .social-icon-skype{background:url(images/medium_footer_skype_sprite.png) no-repeat}
.footer-social-icons .social-icon-twitter{background:url(images/medium_footer_twitter_sprite.png) no-repeat}
.footer-social-icons .social-icon-vimeo{background:url(images/medium_footer_vimeo_sprite.png) no-repeat}
.footer-social-icons.small{margin:0}
.footer-social-icons.small div{height:34px;width:36px;margin-right:6px;margin-bottom:6px}
.header-social-icons.small{margin:0}
.header-social-icons.small div{height:35px;width:37px}
.header-social-icons div{float:left;margin-left:8px;margin-bottom:8px;height:46px;width:48px;transition:background 400ms;-moz-transition:background 400ms;-webkit-transition:background 400ms;-o-transition:background 400ms;background-size:200% 100%!important}
.header-social-icons div:hover{background-position:100% 0}
.header-social-icons .social-icon-dribbble{background:url(images/medium_header_dribbble_sprite.png) no-repeat}
.header-social-icons .social-icon-facebook{background:url(images/medium_header_facebook_sprite.png) no-repeat}
.header-social-icons .social-icon-skype{background:url(images/medium_header_skype_sprite.png) no-repeat}
.header-social-icons .social-icon-twitter{background:url(images/medium_header_twitter_sprite.png) no-repeat}
.header-social-icons .social-icon-vimeo{background:url(images/medium_header_vimeo_sprite.png) no-repeat}
.alert-message p{margin:0!important;padding:.5em 0}
.alert-message{display:block;padding:12px 20px;text-align:center;color:#717171!important;margin-bottom:20px;min-width:200px;border-radius:3px}
.alert-message a{display:block;width:13px;height:13px;margin-top:4px;float:right;text-indent:-9999px;opacity:.4}
.alert-message.warning p{background:url(images/small_shortcode_alert_warning_x.png) no-repeat right 50%}
.alert-message.error p{background:url(images/small_shortcode_alert_error_x.png) no-repeat right 50%}
.alert-message.success p{background:url(images/small_shortcode_alert_success_x.png) no-repeat right 50%}
.alert-message.info p{background:url(images/small_shortcode_alert_info_x.png) no-repeat right 50%}
.alert-message a:hover{opacity:.8}
.alert-message.warning{background:#fbf6e4 url(images/small_shortcode_alert_warning.png) no-repeat 12px 50%;border:1px solid #eed77d;color:#c7a900!important}
.alert-message.warning p{color:#e4c222!important}
.alert-message.error{background:#fee9e9 url(images/small_shortcode_alert_error.png) no-repeat 12px 50%;border:1px solid #e8a0a0}
.alert-message.error p{color:#d15e5e!important}
.alert-message.success{background:#e9f2d3 url(images/small_shortcode_alert_successfull.png) no-repeat 12px 50%;border:1px solid #c0d86d}
.alert-message.success p{color:#8aaf38!important}
.alert-message.info{background:#dce9f3 url(images/small_shortcode_alert_info.png) no-repeat 12px 50%;border:1px solid #a0c2dc}
.alert-message.info p{color:#5695c2!important}
.progress-bar{position:relative;border:1px #d5d4d4 solid;border-radius:4px}
.progress-bar p{position:absolute;margin:0;top:10px;left:0;padding-left:8px;color:#fff;font-weight:700}
.meter{height:40px;width:100%;background:#F6F6F6}
.meter>span{border-radius:4px;display:block;height:100%;background-color:#89bf42;position:relative;overflow:hidden}
.meter-one span,.meter-two span{width:30%}
.meter-three span{width:80%}
.meter-four span{width:60%}
.meter-five span{width:40%}
.blockquote-container{border-left:4px #89bf42 solid;background-color:#F6F6F6;padding:20px;margin-bottom:16px}
blockquote{padding:0 8px}
blockquote p{display:inline;color:gray;font-style:italic;font-size:14px}
.button-a{display:table;padding-bottom:11px;background:url(images/medium_shortcode_green_shadow.png) no-repeat 0 100%}
.button-a span.button{font-weight:700;border:0;display:table-cell;height:auto;transition:all 400ms;-moz-transition:all 400ms;-webkit-transition:all 400ms;-o-transition:all 400ms;text-align:center;vertical-align:middle;line-height:0!important}
.button-a span.large,.button-a span.medium,.button-a span.small{margin-bottom:8px;color:#fff;width:100%;padding:4px;text-shadow:none!important}
.button-a span.small{height:30px!important;font-size:12px!important;min-width:100px}
.button-a span.medium{height:40px!important;font-size:15px!important;min-width:120px}
.button-a span.large{height:50px!important;font-size:18px!important;min-width:140px}
.button-a span.green{background:url(images/medium_shortcode_green_normal.png) no-repeat;background-size:100% 100%;box-shadow:none!important}
.button-a span.green:hover,.button-a span.light-gray{background:url(images/medium_shortcode_light_grey_normal.png) no-repeat;color:#323232!important;background-size:100% 100%}
.button-a span.light-gray:hover{background:url(images/medium_shortcode_green_normal.png) no-repeat;color:#fff!important;background-size:100% 100%}
.button-a span.dark-gray{background:url(images/medium_shortcode_dark_grey_normal.png) no-repeat;background-size:100% 100%}
.button-a span.dark-gray:hover{background:url(images/medium_shortcode_green_normal.png) no-repeat;color:#fff;background-size:100% 100%}
span.dropcap-gray,span.dropcap-green{width:60px;height:60px;font-size:30px;float:left;color:#fff;clear:both;text-align:center;line-height:60px;margin-bottom:1px;margin-right:10px;display:block;padding-right:0!important;border-radius:3px}
span.dropcap-gray{background-color:#323232}
span.dropcap-green{background-color:#89bf42}
table.default-table{background-color:#fff;width:100%;border:1px #ddd solid;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;border-collapse:separate;margin-bottom:20px}
table.default-table td,table.default-table th{padding:10px}
table.default-table th{background-color:#F6F6F6;text-align:left}
table.default-table td{transition:all 400ms;-moz-transition:all 400ms;-webkit-transition:all 400ms;-o-transition:all 400ms;text-align:left}
table.default-table td:hover{background-color:#89bf42!important;color:#fff}
table.default-table tbody tr:nth-child(2) td,table.default-table tbody tr:nth-child(4) td,table.default-table tbody tr:nth-child(6) td,table.default-table tbody tr:nth-child(8) td{background-color:#F6F6F6}
table.default-table td:nth-child(1),table.default-table td:nth-child(2),table.default-table td:nth-child(3),table.default-table td:nth-child(4),table.default-table td:nth-child(5),table.default-table th:nth-child(1),table.default-table th:nth-child(2),table.default-table th:nth-child(3),table.default-table th:nth-child(4),table.default-table th:nth-child(5){border-right:1px #ddd solid}
table.pricing_table td:last-child{border:0!important}
.pricing-table-shadow{width:100%;height:99px;background:url(images/medium_shortcode_table_shadow.png) no-repeat;background-size:100% 100%}
div.gray-pricing-table{width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;border-collapse:separate;margin-bottom:0;position:relative}
div.gray-pricing-table .plan h3,div.gray-pricing-table .plan h4,div.gray-pricing-table .plan li{margin:0;padding:10px 0;color:#fff;text-align:center}
div.gray-pricing-table .plan li{color:#000;background-color:#F6F6F6}
div.gray-pricing-table .plan h3{background-color:#4e4e4e}
div.gray-pricing-table .plan h4{background-color:#323232}
div.gray-pricing-table .plan{border-right:1px #fff solid;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;border-collapse:separate;float:left;width:25%}
div.gray-pricing-table .plan:last-child{border:0!important}
div.gray-pricing-table ul li a{color:#fff}
div.gray-pricing-table.pt-four .plan:nth-child(3) h3{background-color:#89bf42}
div.gray-pricing-table.pt-four .plan:nth-child(3) h4{background-color:#9fca66}
.pt-button-large,.pt-button-normal{transition:background-color 400ms;-moz-transition:background-color 400ms;-webkit-transition:background-color 400ms;-o-transition:background-color 400ms}
.pt-button-large{background-color:#89bf42!important}
.pt-button-large:hover,.pt-button-normal{background-color:#323232!important}
.pt-button-normal:hover{background-color:#89bf42!important}
ul.tab_navigation{list-style:none;margin:0 0 -11px 0!important;padding:0;border-bottom:0!important;overflow:hidden}
ul.tab_navigation li{display:block;float:left;padding:0;margin-right:3px}
ul.tab_navigation li a{display:block;padding:10px 20px;float:left;background-color:#f2f2f2;position:relative;top:2px;text-decoration:none;border:1px solid #d5d5d5;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin-bottom:0!important;border-top-left-radius:3px;border-top-right-radius:3px;font-weight:700}
ul.tab_navigation li a.active{background-color:#fff;color:#89bf42;border-bottom:3px solid #89bf42;top:0}
ul.tab_navigation li a:hover{background-color:#fff}
ul.tab_navigation li a:focus{outline:0}
div.tabs div{padding:20px;margin:10px 0 0;border:1px solid #d5d5d5;border-top:1px solid #d5d5d5;background:#f8f8f8;font-size:12px;border-bottom-left-radius:3px;border-bottom-right-radius:3px}
.accordion{margin-bottom:5px;display:block;border-radius:3px;border:1px #d5d4d4 solid}
.accordion .title{font-weight:700;transition:color 400ms;-moz-transition:color 400ms;-webkit-transition:color 400ms;-o-transition:color 400ms;display:block;padding:20px;background:#f2f2f2 url(images/medium_shortcode_accordion_plus.png) no-repeat 100% 50%;cursor:pointer;font-size:12px}
.accordion .title.active{color:#89bf42;background:#f2f2f2 url(images/medium_shortcode_accordion_minus.png) no-repeat 100% 50%}
.accordion .inner{border-top:1px #d5d4d4 solid;display:none;background-color:#f8f8f8}
.accordion .inner p{padding:20px;margin-bottom:0!important}
.author-shortcode{border-radius:4px;background-color:#f2f2f2;border:1px #d5d4d4 solid;margin-bottom:50px;height:auto}
.author-shortcode-text{display:block;width:auto;padding:18px}
.flexslider.testimonials{border:1px solid #d5d4d4;margin-bottom:80px}
.testimonials-arrow{height:auto;width:100%;background-color:#f2f2f2}
.testimonials-author{padding-left:32px;padding-bottom:16px;padding-top:16px;background:url(images/small_content_user_icon.png) no-repeat 0 50%;display:inline-block!important;color:#fff;font-weight:700}
.testimonials-author-text{margin-left:16px;margin-bottom:0!important;color:#989898;font-style:italic}
.testimonials-author-div{background:url(images/small_content_testimonials_quote.png) no-repeat 20px 30px;background-color:#f2f2f2;margin:0;padding:32px}
.team-member img{margin-bottom:12px;height:auto;border-radius:3px}
.client{background-color:#f2f2f2;text-align:center;padding:16px 0;float:left}
.client>div{height:100px;display:block;transition:background 400ms;-moz-transition:background 400ms;-webkit-transition:background 400ms;-o-transition:background 400ms;background-size:100%!important}
.client .activeden{background:url(images/medium_content_activeden_normal.png) no-repeat}
.client .activeden:hover{background:url(images/medium_content_activeden_hovered.png) no-repeat}
.client .audiojungle{background:url(images/medium_content_audiojungle_normal.png) no-repeat}
.client .audiojungle:hover{background:url(images/medium_content_audiojungle_hovered.png) no-repeat}
.client .codecanyon{background:url(images/medium_content_codecanyon_normal.png) no-repeat}
.client .codecanyon:hover{background:url(images/medium_content_codecanyon_hovered.png) no-repeat}
.client .graphicriver{background:url(images/medium_content_graphicriver_normal.png) no-repeat}
.client .graphicriver:hover{background:url(images/medium_content_graphicriver_hovered.png) no-repeat}
.client .themeforest{background:url(images/medium_content_themeforest_normal.png) no-repeat}
.client .themeforest:hover{background:url(images/medium_content_themeforest_hovered.png) no-repeat}
.list{display:block;margin-bottom:16px}
.list ul li{margin:8px 0;padding-top:5px;padding-bottom:5px;padding-left:20px;list-style-position:inside;vertical-align:middle;display:list-item}
.circle ul li{padding-left:30px;background:url(images/small_content_why_choose_us_icon.png) no-repeat scroll left center transparent}
.presentation-box{float:left;display:block;width:25%;text-align:center;position:relative}
.presentation-box img{margin-bottom:12px}
.presentation-box:before{position:absolute;height:16px;width:32px;left:0;top:90px;content:" ";z-index:1002;background:url(images/small_content_box_divider_left.png) no-repeat}
.presentation-box:after{position:absolute;height:16px;width:33px;right:-2px;top:90px;content:" ";z-index:1002;background:url(images/small_content_box_divider_right.png) no-repeat}
.col div.presentation-box:first-child:before,.col div.presentation-box:last-child:after{background:0 0}
.widget-area{display:block}
.widget-area .widget{margin-bottom:42px}
.widget_recent_entries li a{color:#000;transition:color 400ms;-moz-transition:color 400ms;-webkit-transition:color 400ms;-o-transition:color 400ms}
.widget_recent_entries li{background:url(images/small_content_circle.png) no-repeat 0 50%;padding:6px 0 6px 20px}
.widget_recent_entries li a:hover{color:#FFF!important}
.widget_search input{padding:16px;border:1px #c4c4c4 solid;display:block;background:url(images/medium_widget_loupe.png) no-repeat 100% 50%;background-color:#fff;width:100%}
.recent-comments-widget li{color:#000;border-bottom:1px #cacaca dashed;background:url(images/small_widget_comment_bubbles.png) no-repeat 0 50%;padding:12px 0 12px 20px}
.tags-widget .tagcloud>div{background:url(images/medium_widget_tag_bg_normal.png) no-repeat;background-size:100% 100%;margin-bottom:8px;margin-right:8px;float:left;display:block;transition:background 400ms;-moz-transition:background 400ms;-webkit-transition:background 400ms;-o-transition:background 400ms}
.tags-widget .tagcloud>div:hover{background:url(images/medium_widget_tag_bg_hovered.png) no-repeat;background-size:100% 100%}
.tags-widget .tagcloud>div a{display:block;padding:8px;transition:color 400ms;-moz-transition:color 400ms;-webkit-transition:color 400ms;-o-transition:color 400ms}
.tags-widget .tagcloud>div a:hover{color:#fff}
.portfolio-widget .portfolio-element{width:300px;min-height:310px}
.flex-container a:active,.flex-container a:focus,.flexslider a:active,.flexslider a:focus{outline:0}
.flex-control-nav,.flex-direction-nav,.slides{margin:0;padding:0;list-style:none}
.flexslider{margin:0;padding:0}
.flexslider .slides>li{display:none;-webkit-backface-visibility:hidden}
.flexslider .slides img{width:100%;display:block}
.flex-pauseplay span{text-transform:capitalize}
.slides:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
html[xmlns] .slides{display:block}
* html .slides{height:1%}
.no-js .slides>li:first-child{display:block}
.flexslider{background:#fff;position:relative;-webkit-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;border-radius:4px;zoom:1}
.flex-viewport{max-height:2000px;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;transition:all 1s ease}
.loading .flex-viewport{max-height:300px}
.flexslider .slides{zoom:1}
.flex-direction-nav{*height:0}
.flex-direction-nav a{margin:-20px 0 0;top:50%;z-index:10;cursor:pointer;text-indent:-9999px}
.flex-direction-nav .flex-next{background-position:100% 0;right:-36px}
.flex-direction-nav .flex-prev{left:-36px}
.flex-direction-nav .flex-disabled{opacity:.3!important;filter:alpha(opacity=30);cursor:default}
@media screen and (max-width:860px){.flex-direction-nav .flex-prev{opacity:1;left:0}
.flex-direction-nav .flex-next{opacity:1;right:0}
}
.flex-direction-nav a{width:41px;height:43px;display:block;position:absolute;transition:background 400ms;-moz-transition:background 400ms;-webkit-transition:background 400ms;-o-transition:background 400ms}
.flex-direction-nav a.flex-prev{background:url(images/medium_content_button_left_sprite.png) no-repeat 0 0,url(images/small_content_button_left_shadow.png) no-repeat 0 100%;padding-right:41px}
.flex-direction-nav a.flex-next{background:url(images/medium_content_button_right_sprite.png) no-repeat 0 0,url(images/small_content_button_right_shadow.png) no-repeat 0 100%;padding-left:41px}
.flex-direction-nav a.flex-prev:hover{background:url(images/medium_content_button_left_sprite.png) no-repeat 0 0,url(images/small_content_button_left_shadow.png) no-repeat 0 100%;background-position:100% 0,0 100%}
.flex-direction-nav a.flex-next:hover{background:url(images/medium_content_button_right_sprite.png) no-repeat 0 0,url(images/small_content_button_right_shadow.png) no-repeat 0 100%;background-position:100% 0,0 100%}
.testimonials .flex-direction-nav a{top:130%}
.about-us-slider .flex-direction-nav a.flex-prev{left:0}
.about-us-slider .flex-direction-nav a.flex-next{right:0}
.about-us-slider .flex-direction-nav a{width:41px;height:43px}
.about-us-slider .flex-direction-nav a.flex-prev{background:url(images/medium_content_button_left_sprite.png) no-repeat!important}
.about-us-slider .flex-direction-nav a.flex-next{background:url(images/medium_content_button_right_sprite.png) no-repeat!important}
.about-us-slider .flex-direction-nav a.flex-prev:hover{background:url(images/medium_content_button_left_sprite.png) no-repeat!important;background-position:100% 0!important}
.about-us-slider .flex-direction-nav a.flex-next:hover{background:url(images/medium_content_button_right_sprite.png) no-repeat!important;background-position:100% 0!important}
.single-portfolio-slider-widget .flex-direction-nav a{top:440px!important}
.tp-caption.tp-hidden-caption,.tp-hide-revslider{visibility:hidden!important;display:none!important}
.tp-caption{z-index:1}
.tp-caption.big_white{position:absolute;color:#fff;text-shadow:none;font-weight:800;font-size:20px;line-height:20px;font-family:'Open Sans',sans;padding:3px 4px;padding-top:1px;margin:0;border-width:0;border-style:none;background-color:#000;letter-spacing:0}
.tp-caption.big_orange{position:absolute;color:#fff;text-shadow:none;font-weight:700;font-size:36px;line-height:36px;font-family:Arial;padding:0 4px;margin:0;border-width:0;border-style:none;background-color:#fb7354;letter-spacing:-1.5px}
.tp-caption.big_black{position:absolute;color:#000;text-shadow:none;font-weight:800;font-size:36px;line-height:36px;font-family:'Open Sans',sans;padding:0 4px;margin:0;border-width:0;border-style:none;background-color:#fff;letter-spacing:-1.5px}
.tp-caption.medium_grey{position:absolute;color:#fff;font-weight:700;font-size:20px;line-height:20px;font-family:Arial;padding:2px 4px;margin:0;border-width:0;border-style:none;background-color:#888;white-space:nowrap;text-shadow:0 2px 5px rgba(0,0,0,.5)}
.tp-caption.small_text{position:absolute;color:#fff;font-weight:700;font-size:14px;line-height:20px;font-family:Arial;margin:0;border-width:0;border-style:none;white-space:nowrap;text-shadow:0 2px 5px rgba(0,0,0,.5)}
.tp-caption.medium_text{position:absolute;color:#fff;font-weight:300;font-size:20px;line-height:20px;font-family:'Open Sans',sans;margin:0;border-width:0;border-style:none;white-space:nowrap;text-shadow:0 2px 5px rgba(0,0,0,.5)}
.tp-caption.large_text{position:absolute;color:#fff;font-weight:800;font-size:36px;line-height:36px;font-family:'Open Sans',sans;margin:0;border-width:0;border-style:none;white-space:nowrap;text-shadow:0 2px 5px rgba(0,0,0,.5)}
.tp-caption.large_black_text{position:absolute;color:#000;text-shadow:none;font-weight:300;font-size:42px;line-height:42px;font-family:'Open Sans',sans;margin:0;border-width:0;border-style:none;white-space:nowrap}
.tp-caption.very_large_text{position:absolute;color:#fff;font-weight:800;font-size:60px;line-height:60px;font-family:'Open Sans',sans;margin:0;border-width:0;border-style:none;white-space:nowrap;text-shadow:0 2px 5px rgba(0,0,0,.5);letter-spacing:0}
.tp-caption.very_large_black_text{position:absolute;color:#000;text-shadow:none;font-weight:800;font-size:72px;line-height:72px;font-family:'Open Sans',sans;margin:0;border-width:0;border-style:none;white-space:nowrap}
.tp-caption.bold_red_text{position:absolute;color:#d31e00;text-shadow:none;font-weight:800;font-size:20px;line-height:20px;font-family:'Open Sans',sans;margin:0;border-width:0;border-style:none;white-space:nowrap}
.tp-caption.bold_brown_text{position:absolute;color:#a04606;text-shadow:none;font-weight:800;font-size:20px;line-height:20px;font-family:'Open Sans',sans;margin:0;border-width:0;border-style:none;white-space:nowrap}
.tp-caption.bold_green_text{position:absolute;color:#5b9830;text-shadow:none;font-weight:800;font-size:20px;line-height:20px;font-family:'Open Sans',sans;margin:0;border-width:0;border-style:none;white-space:nowrap}
.tp-caption.very_big_white{position:absolute;color:#fff;text-shadow:none;font-weight:800;font-size:36px;line-height:36px;font-family:'Open Sans',sans;margin:0;border-width:0;border-style:none;white-space:nowrap;padding:3px 4px;padding-top:1px;background-color:#7e8e96}
.tp-caption.very_big_black{position:absolute;color:#000;text-shadow:none;font-weight:700;font-size:60px;line-height:60px;font-family:Arial;margin:0;border-width:0;border-style:none;white-space:nowrap;padding:0 4px;padding-top:1px;background-color:#fff}
.tp-caption.boxshadow{-moz-box-shadow:0 0 20px rgba(0,0,0,.5);-webkit-box-shadow:0 0 20px rgba(0,0,0,.5);box-shadow:0 0 20px rgba(0,0,0,.5)}
.tp-caption.black{color:#000;text-shadow:none;font-weight:300;font-size:19px;line-height:19px;font-family:'Open Sans',sans}
.tp-caption.noshadow{text-shadow:none}
.tp-caption a{color:#ff7302;text-shadow:none;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-ms-transition:all .2s ease-out}
.tp-caption a:hover{color:#ffa902}
.tp_inner_padding{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;max-height:none!important}
.button{padding:6px 13px 5px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;height:30px;cursor:pointer;color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.6)!important;font-size:15px;line-height:45px!important;background:url(images/gradient/g30.png) repeat-x top;font-family:arial,sans-serif;font-weight:700;letter-spacing:-1px}
.button.big{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.6);font-weight:700;padding:9px 20px;font-size:19px;line-height:57px!important;background:url(images/gradient/g40.png) repeat-x top}
.button.big:hover,.button:hover,.purchase:hover{background-position:bottom,15px 11px}
@media only screen and (min-width:480px) and (max-width:767px){.button{padding:4px 8px 3px;line-height:25px!important;font-size:11px!important;font-weight:400}
a.button{-webkit-transition:none;-moz-transition:none;-o-transition:none;-ms-transition:none}
}
@media only screen and (min-width:0) and (max-width:479px){.button{padding:2px 5px;line-height:20px!important;font-size:10px!important}
a.button{-webkit-transition:none;-moz-transition:none;-o-transition:none;-ms-transition:none}
}
.button.green,.button:hover.green,.purchase.green,.purchase:hover.green{background-color:#21a117;-webkit-box-shadow:0 3px 0 0 #104d0b;-moz-box-shadow:0 3px 0 0 #104d0b;box-shadow:0 3px 0 0 #104d0b}
.button.blue,.button:hover.blue,.purchase.blue,.purchase:hover.blue{background-color:#1d78cb;-webkit-box-shadow:0 3px 0 0 #0f3e68;-moz-box-shadow:0 3px 0 0 #0f3e68;box-shadow:0 3px 0 0 #0f3e68}
.button.red,.button:hover.red,.purchase.red,.purchase:hover.red{background-color:#cb1d1d;-webkit-box-shadow:0 3px 0 0 #7c1212;-moz-box-shadow:0 3px 0 0 #7c1212;box-shadow:0 3px 0 0 #7c1212}
.button.orange,.button:hover.orange,.purchase.orange,.purchase:hover.orange{background-color:#f70;-webkit-box-shadow:0 3px 0 0 #a34c00;-moz-box-shadow:0 3px 0 0 #a34c00;box-shadow:0 3px 0 0 #a34c00}
.button.darkgrey,.button.grey,.button:hover.darkgrey,.button:hover.grey,.purchase.darkgrey,.purchase:hover.darkgrey{background-color:#555;-webkit-box-shadow:0 3px 0 0 #222;-moz-box-shadow:0 3px 0 0 #222;box-shadow:0 3px 0 0 #222}
.button.lightgrey,.button:hover.lightgrey,.purchase.lightgrey,.purchase:hover.lightgrey{background-color:#888;-webkit-box-shadow:0 3px 0 0 #555;-moz-box-shadow:0 3px 0 0 #555;box-shadow:0 3px 0 0 #555}
.tp-simpleresponsive .slotholder *,.tp-simpleresponsive img{-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;-webkit-perspective:1000}
.tp-simpleresponsive .caption,.tp-simpleresponsive .tp-caption{-ms-filter:"alpha(Opacity=0)";-moz-opacity:0;-khtml-opacity:0;opacity:0;position:absolute;visibility:hidden}
.tp-simpleresponsive img{max-width:none}
.noFilterClass{filter:none!important}
.tp-bannershadow{position:absolute;margin-left:auto;margin-right:auto;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none}
.tp-bannershadow.tp-shadow1{background:url(assets/shadow1.png) no-repeat;background-size:100%;width:890px;height:30px;bottom:-30px}
.tp-bannershadow.tp-shadow2{background:url(assets/shadow2.png) no-repeat;background-size:100%;width:890px;height:60px;bottom:-60px}
.tp-bannershadow.tp-shadow3{background:url(assets/shadow3.png) no-repeat;background-size:100%;width:890px;height:60px;bottom:-60px}
.caption.fullscreenvideo{left:0;top:0;position:absolute;width:100%;height:100%}
.caption.fullscreenvideo iframe{width:100%!important;height:100%!important}
.tp-caption.fullscreenvideo{left:0;top:0;position:absolute;width:100%;height:100%}
.tp-caption.fullscreenvideo iframe{width:100%!important;height:100%!important}
.tpclear{clear:both}
.tp-bullets{z-index:1000;position:absolute;-ms-filter:"alpha(Opacity=100)";-moz-opacity:1;-khtml-opacity:1;opacity:1;-webkit-transition:opacity .2s ease-out;-moz-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;-ms-transition:opacity .2s ease-out}
.tp-bullets.hidebullets{-ms-filter:"alpha(Opacity=0)";-moz-opacity:0;-khtml-opacity:0;opacity:0}
.tp-bullets.simplebullets.navbar{border:1px solid #666;border-bottom:1px solid #444;background:url(assets/boxed_bgtile.png);height:40px;padding:0 10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.tp-bullets.simplebullets.navbar-old{background:url(assets/navigdots_bgtile.png);height:35px;padding:0 10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.tp-bullets.simplebullets.round .bullet{cursor:pointer;position:relative;background:url(assets/bullet.png) no-Repeat top left;width:20px;height:20px;margin-right:0;float:left;margin-top:-10px;margin-left:3px}
.tp-bullets.simplebullets.round .bullet.last{margin-right:3px}
.tp-bullets.simplebullets.round-old .bullet{cursor:pointer;position:relative;background:url(assets/bullets.png) no-Repeat bottom left;width:23px;height:23px;margin-right:0;float:left;margin-top:-12px}
.tp-bullets.simplebullets.round-old .bullet.last{margin-right:0}
.tp-bullets.simplebullets.square .bullet{cursor:pointer;position:relative;background:url(assets/bullets2.png) no-Repeat bottom left;width:19px;height:19px;margin-right:0;float:left;margin-top:-10px}
.tp-bullets.simplebullets.square .bullet.last{margin-right:0}
.tp-bullets.simplebullets.square-old .bullet{cursor:pointer;position:relative;background:url(assets/bullets2.png) no-Repeat bottom left;width:19px;height:19px;margin-right:0;float:left;margin-top:-10px}
.tp-bullets.simplebullets.square-old .bullet.last{margin-right:0}
.tp-bullets.simplebullets.navbar .bullet{cursor:pointer;position:relative;background:url(assets/bullet_boxed.png) no-Repeat top left;width:18px;height:19px;margin-right:5px;float:left;margin-top:10px}
.tp-bullets.simplebullets.navbar .bullet.first{margin-left:0!important}
.tp-bullets.simplebullets.navbar .bullet.last{margin-right:0!important}
.tp-bullets.simplebullets.navbar-old .bullet{cursor:pointer;position:relative;background:url(assets/navigdots.png) no-Repeat bottom left;width:15px;height:15px;margin-left:5px!important;margin-right:5px!important;float:left;margin-top:10px}
.tp-bullets.simplebullets.navbar-old .bullet.first{margin-left:0!important}
.tp-bullets.simplebullets.navbar-old .bullet.last{margin-right:0!important}
.tp-bullets.simplebullets .bullet.selected,.tp-bullets.simplebullets .bullet:hover{background-position:top left}
.tp-bullets.simplebullets.navbar .bullet.selected,.tp-bullets.simplebullets.navbar .bullet:hover,.tp-bullets.simplebullets.round .bullet.selected,.tp-bullets.simplebullets.round .bullet:hover{background-position:bottom left}
.tparrows{-ms-filter:"alpha(Opacity=100)";-moz-opacity:1;-khtml-opacity:1;opacity:1;-webkit-transition:opacity .2s ease-out;-moz-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;-ms-transition:opacity .2s ease-out}
.tparrows.hidearrows{-ms-filter:"alpha(Opacity=0)";-moz-opacity:0;-khtml-opacity:0;opacity:0}
.tp-leftarrow{z-index:100;cursor:pointer;position:relative;background:url(assets/large_left.png) no-Repeat top left;width:40px;height:40px}
.tp-rightarrow{z-index:100;cursor:pointer;position:relative;background:url(assets/large_right.png) no-Repeat top left;width:40px;height:40px}
.tp-leftarrow.round{z-index:100;cursor:pointer;position:relative;background:url(assets/small_left.png) no-Repeat top left;width:19px;height:14px;margin-right:0;float:left;margin-top:-7px}
.tp-rightarrow.round{z-index:100;cursor:pointer;position:relative;background:url(assets/small_right.png) no-Repeat top left;width:19px;height:14px;margin-right:0;float:left;margin-top:-7px}
.tp-leftarrow.round-old{z-index:100;cursor:pointer;position:relative;background:url(assets/arrow_left.png) no-Repeat top left;width:26px;height:26px;margin-right:0;float:left;margin-top:-13px}
.tp-rightarrow.round-old{z-index:100;cursor:pointer;position:relative;background:url(assets/arrow_right.png) no-Repeat top left;width:26px;height:26px;margin-right:0;float:left;margin-top:-13px}
.tp-leftarrow.navbar{z-index:100;cursor:pointer;position:relative;background:url(assets/small_left_boxed.png) no-Repeat top left;width:20px;height:15px;float:left;margin-right:6px;margin-top:12px}
.tp-rightarrow.navbar{z-index:100;cursor:pointer;position:relative;background:url(assets/small_right_boxed.png) no-Repeat top left;width:20px;height:15px;float:left;margin-left:6px;margin-top:12px}
.tp-leftarrow.navbar-old{z-index:100;cursor:pointer;position:relative;background:url(assets/arrowleft.png) no-Repeat top left;width:9px;height:16px;float:left;margin-right:6px;margin-top:10px}
.tp-rightarrow.navbar-old{z-index:100;cursor:pointer;position:relative;background:url(assets/arrowright.png) no-Repeat top left;width:9px;height:16px;float:left;margin-left:6px;margin-top:10px}
.tp-leftarrow.navbar-old.thumbswitharrow{margin-right:10px}
.tp-rightarrow.navbar-old.thumbswitharrow{margin-left:0}
.tp-leftarrow.square{z-index:100;cursor:pointer;position:relative;background:url(assets/arrow_left2.png) no-Repeat top left;width:12px;height:17px;float:left;margin-right:0;margin-top:-9px}
.tp-rightarrow.square{z-index:100;cursor:pointer;position:relative;background:url(assets/arrow_right2.png) no-Repeat top left;width:12px;height:17px;float:left;margin-left:0;margin-top:-9px}
.tp-leftarrow.default,.tp-rightarrow.default{transition:background 400ms;-moz-transition:background 400ms;-webkit-transition:background 400ms;-o-transition:background 400ms}
.tp-leftarrow.square-old{z-index:100;cursor:pointer;position:relative;background:url(assets/arrow_left2.png) no-Repeat top left;width:12px;height:17px;float:left;margin-right:0;margin-top:-9px}
.tp-rightarrow.square-old{z-index:100;cursor:pointer;position:relative;background:url(assets/arrow_right2.png) no-Repeat top left;width:12px;height:17px;float:left;margin-left:0;margin-top:-9px}
.tp-leftarrow.default{z-index:100;cursor:pointer;position:relative;background:url(revolution/assets/slider_button_left_sprite.png) no-Repeat 0 0;width:89px;height:73px}
.tp-rightarrow.default{z-index:100;cursor:pointer;position:relative;background:url(revolution/assets/slider_button_right_sprite.png) no-Repeat 0 0;width:89px;height:73px}
.tp-leftarrow:hover,.tp-rightarrow:hover{background-position:right}
.tp-bullets.tp-thumbs{z-index:1000;position:absolute;padding:3px;background-color:#fff;width:500px;height:50px;margin-top:-50px}
.fullwidthbanner-container .tp-thumbs{padding:3px}
.tp-bullets.tp-thumbs .tp-mask{width:500px;height:50px;overflow:hidden;position:relative}
.tp-bullets.tp-thumbs .tp-mask .tp-thumbcontainer{width:5000px;position:absolute}
.tp-bullets.tp-thumbs .bullet{width:100px;height:50px;cursor:pointer;overflow:hidden;background:0 0;margin:0;float:left;-ms-filter:"alpha(Opacity=50)";-moz-opacity:.5;-khtml-opacity:.5;opacity:.5;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-ms-transition:all .2s ease-out}
.tp-bullets.tp-thumbs .bullet.selected,.tp-bullets.tp-thumbs .bullet:hover{-ms-filter:"alpha(Opacity=100)";-moz-opacity:1;-khtml-opacity:1;opacity:1}
.tp-thumbs img{width:100%}
.tp-bannertimer{width:100%;height:10px;background:url(revolution/assets/timer.png);position:absolute;z-index:200}
.tp-bannertimer.tp-bottom{bottom:0!important;height:5px}
@media only screen and (min-width:480px) and (max-width:767px){.responsive .tp-bullets.tp-thumbs,.responsive .tp-bullets.tp-thumbs .tp-mask{width:300px!important;height:30px!important}
.responsive .tp-bullets.tp-thumbs .bullet{width:60px!important;height:30px!important}
}
@media only screen and (min-width:0) and (max-width:479px){.responsive .tp-bullets,.responsive .tparrows{display:none}
}
.tp-simpleresponsive img{-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none}
.tp-simpleresponsive a{text-decoration:none}
.tp-simpleresponsive ul{list-style:none;padding:0;margin:0}
.tp-simpleresponsive >ul >li{list-stye:none;position:absolute;visibility:hidden}
.caption.slidelink a div,.tp-caption.slidelink a div{width:10000px;height:10000px;background:url(assets/coloredbg.png) repeat}
.tp-loader{background:url(revolution/assets/loader.gif) no-repeat 10px 10px;background-color:#fff;margin:-22px -22px;top:50%;left:50%;z-index:10000;position:absolute;width:44px;height:44px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}
.tp-transparentimg{content:"url(assets/transparent.png)"}
.tp-3d{-webkit-transform-style:preserve-3d;-webkit-transform-origin:50% 50%}
.fullwidthbanner-container{width:100%!important;position:relative;padding:0;max-height:400px!important;overflow:hidden;margin-bottom:0}
.bannercontainer{padding:0;background-color:#fff;width:960px;position:relative;position:relative;margin-left:auto;margin-right:auto}
.banner{width:960px;height:500px;position:relative;overflow:hidden}
@media only screen and (min-width:768px) and (max-width:959px){.banner,.bannercontainer{width:760px;height:395px}
}
@media only screen and (min-width:480px) and (max-width:767px){.banner,.bannercontainer{width:480px;height:250px}
}
@media only screen and (min-width:0) and (max-width:479px){.banner,.bannercontainer{width:320px;height:166px}
}
.caption.rev-green{position:absolute;color:#FF6F24;text-shadow:none;font-weight:800;font-size:86px;line-height:20px;font-family:harabararegular!important;padding:10px;padding-top:6px;margin:0;border-width:0;border-style:none;border-radius:1.5px;letter-spacing:0;opacity:.98!important}
.caption.rev-green2{position:absolute;color:#626262;text-shadow:none;font-weight:200;font-size:22px;line-height:20px;font-family:'Open Sans',sans;padding:10px;padding-top:6px;margin:0;border-width:0;border-style:none;border-radius:1.5px;letter-spacing:0;opacity:.98!important}
.new{font-size:40px!important;letter-spacing:2px}
.carousel-wrapper{position:relative;width:auto}
.carousel{position:relative;overflow:hidden;height:auto}
.carousel ul{width:20000em;position:absolute;list-style:none;margin:0;padding:0}
.carousel li{float:left}
.carousel-control-next,.carousel-control-prev{position:absolute;bottom:-64px;width:41px;height:43px;text-align:center;color:#fff;text-decoration:none;display:block;transition:background 400ms;-moz-transition:background 400ms;-webkit-transition:background 400ms;-o-transition:background 400ms;z-index:1100}
.carousel-control-prev{background:url(images/medium_content_button_left_sprite.png) no-repeat 0 0,url(images/small_content_button_left_shadow.png) no-repeat 0 100%;left:0}
.carousel-control-next{background:url(images/medium_content_button_right_sprite.png) no-repeat 0 0,url(images/small_content_button_right_shadow.png) no-repeat 0 100%;right:0}
.carousel-control-next:hover,.carousel-control-prev:hover{background-position:100% 0,0 100%}
.jcarousel-clients-skin-wrapper{margin-bottom:64px}
.jcarousel-single-portfolio-skin-wrapper{padding-bottom:16px}
.jcarousel-single-portfolio-skin-wrapper .carousel-control-next,.jcarousel-single-portfolio-skin-wrapper .carousel-control-prev{bottom:0}
body,html{height:100%}
body{background-color:#fff}
@font-face{font-family:harabararegular;src:url(harabara-webfont.eot);src:url(harabara-webfont.eot?#iefix) format('embedded-opentype'),url(harabara-webfont.woff) format('woff'),url(harabara-webfont.ttf) format('truetype'),url(harabara-webfont.svg#harabararegular) format('svg');font-weight:400;font-style:normal}
header{height:auto;width:100%;background-image:url(../images/parallaxbg5.png);background-repeat:none!important;background-position:top!important;border-bottom:5px solid #626262;border-top:5px solid #626262;margin-bottom:70px}
.header-top{padding:16px 0;background-color:#89bf42!important}
.header-social-icons a:first-child div{margin:0}
.mail-top,header .phone-top{padding:8px 0 8px 32px;font-weight:700}
header .phone-top{background:url(images/small_header_telephone.png) no-repeat 0 50%}
header .mail-top{background:url(images/small_header_mail.png) no-repeat 0 50%}
header .logo{margin-top:20px;margin-bottom:15px;margin-left:10px;float:left}
header .logoblock h2{color:#FFF;font-family:'Open Sans',sans-serif!important;margin:30px 0 0 20px;opacity:.35}
header .logo img{display:block}
.breadcrumb li{margin-right:0}
.breadcrumb li:after{content:" /"}
.breadcrumb li:last-child:after{content:""}
.breadcrumb{margin:0}
.breadcrumb a{color:#989898;transition:color 400ms;-moz-transition:color 400ms;-webkit-transition:color 400ms;-o-transition:color 400ms}
.breadcrumb a:hover{color:#89bf42}
.header-container .select-menu{background:none repeat scroll 0 0 #F6F6F6;border:1px solid #CCC;color:#666;font-size:12px;line-height:21px;margin:0 auto;padding:5px;height:auto;margin-bottom:25px}
.menu-system{width:100%}
.home-entry h3{font-size:14px}
.entry{margin-bottom:18px;position:relative;background:url(images/small_content_blog_post_divider.png) repeat-y 18px 0}
.single-entry{margin-bottom:50px}
.entry:after{content:"";position:absolute;display:block;background:url(images/small_content_blog_circle.png) no-repeat;width:15px;height:15px;z-index:1;bottom:-10px;left:11px}
.entry-image-blog img{border-radius:3px!important;height:auto}
.entry-img-hover-link,.entry-img-hover-loupe{display:block;width:48px;height:46px;transition:background 400ms;-moz-transition:background 400ms;-webkit-transition:background 400ms;-o-transition:background 400ms}
.entry-img-hover-loupe{background:url(images/small_content_zoom_normal.png) no-repeat;margin-left:-24px;margin-top:-23px}
.portfolio-image .entry-img-hover-loupe{margin-left:-48px}
.entry-img-hover-loupe:hover{background:url(images/small_content_zoom_hovered.png) no-repeat}
.entry-img-hover-link{background:url(images/small_content_portfolio_link_normal.png) no-repeat;margin-left:2px;margin-top:-23px}
.entry-img-hover-link:hover{background:url(images/small_content_portfolio_link_hovered.png) no-repeat}
.single-portfolio-slider-widget .entry-img-hover-loupe{margin-left:-48px!important}
.image-shadow{background:url(images/large_content_entry_shadow.png) no-repeat;background-size:100%;height:15px;width:100%}
.home-image-shadow{background:url(images/small_home_content_entry_shadow.png) no-repeat;background-size:100%;height:4px;width:100%}
.entry-image{margin-bottom:15px}
.home-entry-meta{position:absolute;top:80px;left:-20px;z-index:1}
.entry-meta{position:absolute;top:343px;left:-20px;z-index:1000}
.meta-date,.meta-ico{float:left}
.meta-date{background:url(images/medium_content_date_base.png) no-repeat;width:77px;height:77px}
.meta-date p{margin:0;color:#fff;text-align:center;line-height:1.2em}
.meta-date p:first-of-type{padding-top:18px;font-size:15px;font-weight:700}
.meta-date p:first-child{font-weight:700;font-size:20px}
.meta-ico{background:url(images/medium_content_type_base.png) no-repeat;width:88px;height:77px;position:relative;left:-22px}
.entry-text{padding-left:40px}
.entry-text-ul li{margin-right:8px;position:relative}
.entry-text-ul li li{margin:0}
.entry-text-ul li a{transition:color 400ms;-moz-transition:color 400ms;-webkit-transition:color 400ms;-o-transition:color 400ms;color:#989898}
.entry-text-ul li a:hover{color:#89bf42}
.entry-text-ul>li:after{position:absolute;color:#989898;content:"鈥?;font-size:12px;right:-9px;top:1px}
.entry-text-ul li:last-child:after{content:""}
.read-more{font-weight:700;transition:all 400ms!important;-moz-transition:all 400ms!important;-webkit-transition:all 400ms!important;-o-transition:all 400ms!important;padding-right:10px;background:url(images/small_content_read_more_arrow_normal.png) no-repeat 100% 55%}
.read-more:hover{background:url(images/small_content_read_more_arrow_hovered.png) no-repeat 100% 55%}
.comments-div .comment-text{margin-bottom:25px}
.comments-div .comment-avatar{display:block;margin-right:16px;width:70px;height:72px}
.comment-box-inline{position:relative}
.comments-div .comment-avatar,.comments-div .comment-text{float:left}
.comments-div .comment-inner{padding-left:60px}
.comment-border{border-bottom:1px #e5e5e5 solid;margin-bottom:20px}
.comment-reply{background:url(images/small_content_reply_arrow.png) no-repeat 10% 50%,url(images/medium_shortcode_green_normal.png) no-repeat;background-size:auto auto,100% 100%;margin-bottom:8px;color:#fff;padding:0 30px 1px 40px;height:32px;font-size:12px;display:table-cell;transition:all 400ms;-moz-transition:all 400ms;-webkit-transition:all 400ms;-o-transition:all 400ms;text-align:right;vertical-align:middle;font-weight:700}
.comment-reply:hover{background:url(images/small_content_reply_arrow_hover.png) no-repeat 10% 50%,url(images/medium_shortcode_light_grey_normal.png) no-repeat;background-size:auto auto,100% 100%;color:#323232}
.pager{border:1px #d5d4d4 solid;border-radius:3px;display:block;padding:1px;width:250px;background-color:#ff6f24;margin-top:100px;margin-bottom:50px}
.pager ul{display:block;width:80%;float:left;text-align:center;border-left:1px #d5d4d4 solid;border-right:1px #d5d4d4 solid}
.pager ul li{display:inline-table}
.pager ul li a{color:#9d9d9d;transition:border 400ms;-moz-transition:border 400ms;-webkit-transition:border 400ms;-o-transition:border 400ms;padding:8px 0;margin:0 8px;display:block;border-bottom:5px #ff6f24 solid;border-top:5px #ff6f24 solid;position:relative;font-weight:700}
.pager ul li a:hover{color:#89bf42;border-bottom:5px #89bf42 solid}
.pager .back-pager,.pager .next-pager{height:15px;display:block;width:10%;float:left;transition:background 400ms;-moz-transition:background 400ms;-webkit-transition:background 400ms;-o-transition:background 400ms;margin-top:13px}
.pager .back-pager{background:url(images/small_content_portfolio_pagination_arrow_left_normal.png) no-repeat 50% 50%}
.pager .next-pager{background:url(images/small_content_portfolio_pagination_arrow_right_normal.png) no-repeat 50% 50%}
.pager .back-pager:hover{background:url(images/small_content_portfolio_pagination_arrow_left_hovered.png) no-repeat 50% 50%}
.pager .next-pager:hover{background:url(images/small_content_portfolio_pagination_arrow_right_hovered.png) no-repeat 50% 50%}
.footer-container:before{background:url(images/small_content_title_circle.png);width:15px;height:15px;content:" ";position:absolute;left:50%;top:-8px;z-index:1001}
.footer-container{background-color:#ff6f24;border-top:2px #626262 solid;position:relative}
.footer-container>div.container{padding:32px 0 0}
.copyright-container{background-color:#000;padding:16px 0}
.copyright-container p{margin-bottom:0;text-align:center}
.flickr .flickr-items{float:left;margin-right:8px}
.flickr .flickr-items img{transition:all 400ms;-moz-transition:all 400ms;-webkit-transition:all 400ms;-o-transition:all 400ms;border-radius:38px;width:62px;height:62px}
.flickr .flickr-items img:hover{border-radius:3px}
#map{min-height:500px;margin-bottom:50px;box-shadow:inset 0 0 10px #000}
label{width:100%;display:block;margin-bottom:8px}
input.default-input,textarea.default-input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;border:1px #bfbfbf solid;background-color:#f6f6f6;padding:8px;display:block}
textarea.default-input{resize:none;border-radius:4px}
input.email,input.name,input.website{height:45px;padding-left:60px}
input.name{background:url(images/small_content_name_icon.png) no-repeat}
input.email{background:url(images/small_content_email_icon.png) no-repeat}
input.website{background:url(images/small_content_website_icon.png) no-repeat}
textarea.pen{height:192px;padding-left:60px;background:url(images/medium_content_your_message_icon.png) no-repeat}
input.email,input.name,input.website,textarea.pen{background-color:#ff6f24;color:#919191;border-radius:3px}
.contact-green{color:#89bf42;font-size:18px}
.options{left:25%;position:relative}
.option-set{width:50%;padding:4px;background-color:#ff6f24;border:1px solid #d5d4d4;text-align:center;border-radius:3px;margin-bottom:50px}
.option-set li{margin:0;padding-right:8px}
.option-set li a{color:#9d9d9d;font-size:12px;font-weight:700;transition:color 400ms;-moz-transition:color 400ms;-webkit-transition:color 400ms;-o-transition:color 400ms}
.option-set li:after{color:#9d9d9d;content:"/";padding-left:12px}
.option-set li:last-child{padding:0}
.option-set li:first-child{padding-left:12px}
.option-set li:last-child:after{content:""}
.option-set li:hover a{color:#89bf42}
.portfolio-info{background:url(images/medium_content_text_box.png) no-repeat;background-size:100% 100%;text-align:center;position:relative;top:-25px;width:50%;left:25%;padding:8px;z-index:1003}
.portfolio-info p{margin:0}
.portfolio-info,.portfolio-info p,.portfolio-info span{color:#fff}
.single-portfolio-info{min-height:400px;display:block}
.single-portfolio-list{padding:8px}
.single-portfolio-list p{padding:8px 0;border-radius:3px;width:235px}
.single-portfolio-list div{margin-right:10px}
.single-portfolio-list div,.single-portfolio-list p{float:left}
.single-portfolio-info .title-medium{margin-bottom:0!important}
.single-portfolio-info h3{padding:8px!important;float:left}
.single-portfolio-info ul ul li{border-bottom:1px #cacaca dashed;padding:8px 0}
.single-portfolio-info ul ul ul li{border:0;padding:0}
.single-portfolio-info ul ul li span:first-child{padding-right:4px}
.to-top{transition:background 400ms;-moz-transition:background 400ms;-webkit-transition:background 400ms;-o-transition:background 400ms;width:48px;height:47px;background:url(images/small_content_back_to_top_sprite.png);background-color:#fff;position:absolute;right:50px;cursor:pointer;display:none}
.to-top:hover{background-position:0 -47px}
.see-through{background-attachment:fixed;background-clip:padding-box!important;background-color:transparent;background-position:center center;background-repeat:no-repeat;background-size:cover!important;padding:0}
.full-see-through{height:auto;width:100%;background-image:url(../images/parallaxbg.png)}
.flexibility{height:auto;width:100%;background-image:url(../images/parallaxbg1.png)}
.adaptive{height:auto;width:100%;background-image:url(../images/parallaxbg2.png)}
.positioning{height:auto;width:100%;background-image:url(../images/parallaxbg3.png)}
.frames{height:auto;width:100%;background-image:url(../images/parallaxbg4.png)}
.see-through div.container{height:100%;padding:50px 0}
.see-through h2{border-radius:1.5px;color:#FFF;font-family:'Open Sans',sans;font-weight:600;letter-spacing:0;opacity:.98!important;text-align:center;display:block;width:65%;padding:2px 10px;margin:0 auto;margin-bottom:20px;text-shadow:2px 2px 1px rgba(0,0,0,.5)}
.see-through p{border-radius:1.5px;color:#FFF;font-family:'Open Sans',sans;font-weight:400;letter-spacing:0;opacity:.98!important;text-align:center;padding:2px 5px;font-size:18px;display:block;width:85%;text-shadow:2px 2px 1px rgba(0,0,0,.5);margin:0 auto!important}
.portrow{width:99%;margin:0 auto;margin-left:10px}
.demohtmlel{width:40em;display:none}
.demohtmlel h1{font-size:2em;color:#9a9a9a;font-family:open_sanslight,sans-serif}
.demohtmlel p{font-size:.85em;color:#9a9a9a;line-height:1.85em!important;font-family:open_sanslight,sans-serif!important}
.demohtmlel img{width:2em;height:auto;float:left}
.content_drop_shadow{box-shadow:0 0 10px 1px rgba(169,157,96,.5);border:2px solid rgba(225,224,140,.25)!important}
.caption_comp_demo{background:0 0;height:4em;text-align:center;font-family:open_sanslight}
.caption_comp_demo p span.GalleryName{padding-left:1.5em}
.caption_comp_demo p span{color:#FFF;font-size:1.5em;font-family:open_sanslight;line-height:2em;opacity:.75;letter-spacing:.1em}
.counter_comp_demo p{color:#FFF;font-family:open_sanslight;letter-spacing:.1em;opacity:.5}
a{outline:0;border:0}
.full_size_demo_container{background:0 0;border-radius:0;border:0;box-shadow:none;width:80em}
.full_size_demo_image{float:left!important;width:50em!important;height:35em!important;padding-right:2em!important;border-right:.85em solid #ff3934!important;margin-right:1.5em!important}
.full_size_demo_h1{color:#ff3934!important;margin-bottom:.25em!important;text-align:left!important;font-size:3em!important}
.full_size_demo_p{color:#222!important;font-size:1.5em!important;line-height:1.5em!important;text-align:left!important}
.full_size_demo_a{color:#ff3934!important;font-size:1.5em!important}
.ext_demo_container{background:none!important;border-radius:0!important;border:0!important;box-shadow:none!important;width:55em!important;text-align:center!important}
.ext_demo_h1{color:#686666!important;margin-bottom:.25em!important}
.ext_demo_p{color:#686666!important;font-size:1.25em!important}
.demo_box_container{background:none!important;border:0!important;box-shadow:none!important;width:80em!important;text-align:center!important}
.demo_box_img{width:80em!important;cursor:pointer!important}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.container{margin:0 auto;width:1000px}
.clr:after,.col:after,.group:after,.row:after{content:"";display:block;height:0;clear:both;visibility:hidden}
.col{display:block;float:left;width:100%;margin-bottom:18px}
.row-big-col .col{margin-bottom:50px}
.row-no-margin .col{margin-bottom:0!important}
@media (min-width:768px){.col{margin-left:5%;position:relative}
}
.col:first-child{margin-left:0}
@media (min-width:768px){.span_1{width:3.75%}
.span_2{width:12.5%}
.span_3{width:21.25%}
.span_4{width:30%}
.span_5{width:38.75%}
.span_6{width:47.5%}
.span_7{width:56.25%}
.span_8{width:65%}
.span_9{width:73.75%}
.span_10{width:82.5%}
.span_11{width:91.25%}
.span_12{width:100%}
}
@media only screen and (min-width:1px) and (max-width:479px){.container,.jcarousel-clients{width:300px}
.select-menu{display:inline-block!important;width:300px}
header .logo img{margin:0 auto}
.menu-system ul.Whilom{display:none}
.home-entry-meta{top:140px}
.entry-meta{top:125px}
.breadcrumb,.header-social-icons-parent{float:left}
#portfolio .portfolio-element{margin-left:25px}
.comments-div .comment-text{width:214px}
.comments-div .comment-inner .comment-text{width:154px}
.meter>span{max-width:300px}
.blog-image,.blog-image img{width:300px;height:185px}
div.gray-pricing-table .plan{width:100%}
.entry-image-blog img{width:300px}
.portfolio-image{width:250px;height:321px}
.single-blog-image{width:296px;height:296px}
.team-member img{width:300px}
.testimonials .flex-direction-nav a.flex-prev{left:34%!important}
.testimonials .flex-direction-nav a.flex-next{right:34%!important}
.single-portfolio-slider-widget .flex-direction-nav .flex-prev{left:35%!important}
.single-portfolio-slider-widget .flex-direction-nav .flex-next{right:35%!important}
.jcarousel-clients-skin,.jcarousel-clients-skin-wrapper{width:300px!important}
.jcarousel-clients-skin-wrapper .carousel-control-next{right:35%!important}
.jcarousel-clients-skin-wrapper .carousel-control-prev{left:35%!important}
.client{width:300px;float:none}
.client>div{margin-left:67px;width:166px}
.jcarousel-clients,.jcarousel-clients-skin{height:660px}
.jcarousel-single-portfolio-skin-wrapper .carousel-control-next{right:35%!important}
.jcarousel-single-portfolio-skin-wrapper .carousel-control-prev{left:35%!important}
.jcarousel-single-portfolio,.jcarousel-single-portfolio-skin{height:1480px}
.carousel,.jcarousel-single-portfolio li{width:300px}
.jcarousel-single-portfolio .portfolio-element{float:none;margin-left:25px}
.presentation-box{width:100%}
.presentation-box:after,.presentation-box:before{display:none!important}
}
@media only screen and (min-width:480px) and (max-width:768px){.container,.jcarousel-clients{width:500px}
.select-menu{display:block!important;width:300px}
header .logo img{margin:0;margin-top:5px;height:20px;padding:0}
header .logo{height:0;margin:0;margin-top:5px}
.logoblock h2{font-size:14px;letter-spacing:0;padding:0;margin:0;margin-top:-50px}
.menu-system ul.Whilom{display:none}
.home-entry-meta{top:255px}
.entry-meta{top:235px}
.breadcrumb,.header-social-icons-parent{float:left}
#portfolio .portfolio-element{margin-left:115px}
.comments-div .comment-text{width:394px}
.comments-div .comment-inner .comment-text{width:334px}
.blog-image,.blog-image img{width:480px;height:295px}
div.gray-pricing-table .plan{width:100%}
.entry-image-blog img{width:480px}
.portfolio-image{width:250px;height:321px}
.single-blog-image{width:296px;height:296px}
.team-member img{width:480px}
.testimonials .flex-direction-nav a.flex-prev{left:40%!important}
.testimonials .flex-direction-nav a.flex-next{right:40%!important}
.single-portfolio-slider-widget .flex-direction-nav .flex-prev{left:40%!important}
.single-portfolio-slider-widget .flex-direction-nav .flex-next{right:40%!important}
.jcarousel-clients-skin,.jcarousel-clients-skin-wrapper{width:480px!important}
.jcarousel-clients-skin-wrapper .carousel-control-next{right:40%!important}
.jcarousel-clients-skin-wrapper .carousel-control-prev{left:40%!important}
.client{width:480px;float:none}
.client>div{margin-left:157px;width:166px}
.jcarousel-clients,.jcarousel-clients-skin{height:660px}
.jcarousel-single-portfolio-skin-wrapper .carousel-control-next{right:40%!important}
.jcarousel-single-portfolio-skin-wrapper .carousel-control-prev{left:40%!important}
.jcarousel-single-portfolio,.jcarousel-single-portfolio-skin{height:1480px}
.carousel,.jcarousel-single-portfolio li{width:480px}
.jcarousel-single-portfolio .portfolio-element{float:none;margin-left:115px}
.presentation-box{width:100%}
.presentation-box,.presentation-box:after,.presentation-box:before{display:none!important}
.home-image-shadow{background:url(images/small_home_content_entry_shadow.png) no-repeat;background-size:100%;height:4px;width:100%}
header{background-repeat:none!important}
.full_size_demo_container{width:50em!important}
.full_size_demo_image{width:27.5em!important;height:19.25em!important;padding-right:1em!important;margin-right:.75em!important}
.full_size_demo_h1{margin-bottom:.125em!important;font-size:1.5em!important}
.full_size_demo_p{font-size:1.5em!important;line-height:1em!important}
.full_size_demo_a{font-size:1.5em!important}
.demo_box_container,.demo_box_img{width:40em!important}
}
@media only screen and (min-width:769px) and (max-width:960px){.container,.jcarousel-clients{width:768px}
.select-menu{display:none;width:auto}
.menu-system ul.Whilom{display:block}
header .logo img{margin:0}
.home-entry-meta{top:50px}
.entry-meta{top:250px}
.breadcrumb,.header-social-icons-parent{float:right}
.comments-div .comment-text{width:413px}
.comments-div .comment-inner .comment-text{width:353px}
.blog-image,.blog-image img{width:500px;height:308px}
.home-blog-image{width:213px;height:131px}
.single-blog-image{width:296px;height:296px}
div.gray-pricing-table .plan{width:25%}
.entry-image-blog img{width:100%}
.portfolio-image{width:250px;height:321px}
.team-member img{width:219px}
.testimonials .flex-direction-nav a.flex-prev{left:37%!important}
.testimonials .flex-direction-nav a.flex-next{right:37%!important}
.single-portfolio-slider-widget .flex-direction-nav .flex-prev{left:30%!important}
.single-portfolio-slider-widget .flex-direction-nav .flex-next{right:30%!important}
.services-testimonials .flex-direction-nav a.flex-prev{left:28%!important}
.services-testimonials .flex-direction-nav a.flex-next{right:28%!important}
.jcarousel-clients-skin,.jcarousel-clients-skin-wrapper{width:786px!important}
.jcarousel-clients-skin .carousel-control-next,.jcarousel-clients-skin .carousel-control-prev{top:160px}
.jcarousel-clients-skin-wrapper .carousel-control-next{right:44%!important}
.jcarousel-clients-skin-wrapper .carousel-control-prev{left:44%!important}
.client{width:157.2px;float:left}
.client>div{margin-left:16.5px;width:124.2px}
.jcarousel-clients,.jcarousel-clients-skin{height:132px}
.jcarousel-single-portfolio-skin-wrapper .carousel-control-next{right:44%!important}
.jcarousel-single-portfolio-skin-wrapper .carousel-control-prev{left:44%!important}
.jcarousel-single-portfolio,.jcarousel-single-portfolio-skin{height:1480px}
.carousel,.jcarousel-single-portfolio li{width:768px}
.jcarousel-single-portfolio .portfolio-element{float:none;margin-left:259px}
.presentation-box{width:50%}
.presentation-box:after,.presentation-box:before{display:none!important}
}
@media only screen and (min-width:961px){.container,.jcarousel-clients{width:1000px}
.select-menu{display:none;width:auto}
.menu-system ul.Whilom{display:block;float:right}
header .logo img{margin:0}
.home-entry-meta{top:80px}
.entry-meta{top:343px}
.breadcrumb,.header-social-icons-parent{float:right}
.comments-div .comment-text{width:564px}
.comments-div .comment-inner .comment-text{width:504px}
.blog-image,.blog-image img{width:650px;height:400px}
.home-blog-image{width:213px;height:131px}
.single-blog-image{width:296px;height:296px}
.portfolio-image{width:160px;height:206px}
div.gray-pricing-table .plan{width:25%}
.entry-image-blog img{width:213px}
.team-member img{width:219px}
.single-portfolio-slider .flex-direction-nav a.flex-prev,.testimonials .flex-direction-nav a.flex-prev{left:40%}
.single-portfolio-slider .flex-direction-nav a.flex-next,.testimonials .flex-direction-nav a.flex-next{right:40%}
.single-portfolio-slider-widget .flex-direction-nav .flex-prev{left:35%!important}
.single-portfolio-slider-widget .flex-direction-nav .flex-next{right:35%!important}
.services-testimonials .flex-direction-nav a.flex-prev{left:34%!important}
.services-testimonials .flex-direction-nav a.flex-next{right:34%!important}
.jcarousel-clients-skin,.jcarousel-clients-skin-wrapper{width:1000px!important}
.jcarousel-clients-skin-wrapper .carousel-control-next{right:45%!important}
.jcarousel-clients-skin-wrapper .carousel-control-prev{left:45%!important}
.client{width:200px;float:left}
.client>div{margin-left:16.5px;width:166px}
.jcarousel-clients,.jcarousel-clients-skin{height:132px}
.jcarousel-single-portfolio-skin-wrapper .carousel-control-next{right:45%!important}
.jcarousel-single-portfolio-skin-wrapper .carousel-control-prev{left:45%!important}
.jcarousel-single-portfolio,.jcarousel-single-portfolio-skin{height:400px}
.carousel{width:750px;margin:0 auto}
.jcarousel-single-portfolio .portfolio-element{float:left}
.presentation-box{width:25%}
.presentation-box:after,.presentation-box:before{display:block!important}
}
分享到QQ
分享到微博
微信扫一扫
