#bannerWrapper {width: 100%; height: 343px; background: url("../images/bgSlider.png") repeat-x}
#bannerContent {width: 980px; margin: 0 auto; height:343px; position: relative}
#bannerButtons {margin: 0; padding: 0; position: absolute; left: 0; bottom: 0; z-index: 100}
#bannerButtons li {list-style-type: none; display: block; float: left; width: 324px; height: 53px; margin: 0 3px 0 0}
#bannerButtons li, #bannerButtons a:visited {display: block; text-align: center; background: url("../images/btnBanner.png") no-repeat 0 -70px; font-family: PTSansBold; }
#bannerButtons li a, #bannerButtons li a:visited {display: block; text-decoration: none; color: #fff; font-size: 1.667em; padding: 20px 0 11px 0; text-decoration: none; text-shadow: 0 1px 0 #4d7b13; outline: none}
#bannerButtons li.current {background-position: 0 0}
#bannerButtons li.current a, #bannerButtons li.current a:visited {color: #7abb28; text-shadow: none}

#bannerBtn {margin: 0; padding: 0}
#bannerBtn li {list-style-type: none}

.btnBanner {position: absolute; top: 50%; display: block; overflow: hidden; width: 52px; height: 52px; margin-top: -40px; z-index: 100}
.btnBanner img {display: block}

#btnBannerPrev {left: 0}
#btnBannerNext {right: 0}
.btnBannerHover {opacity: 0}

#sequence {position: relative; margin: 0; width: 980px; height: 343px}
#sequence .sequence-canvas li * {position: absolute}
#sequence .sequence-canvas {height: 100%; width: 100%; margin: 0; padding: 0; list-style-type: none}
#sequence .sequence-canvas li {position: absolute; width: 100%; height: 100%; z-index: 1}
#sequence .sequence-canvas li:first-child {}

#sequence h3, #sequence p {margin: 0; padding: 0}

/* Slide 1*/
.slide1 h3 {left: 100px; top: 140px; color: #fff; font-family: ptSansBold; font-size: 2.500em; text-shadow: 0 1px 0 #4d7b13; opacity: 0}
.slide1 p {right: 520px; top: 180px; color: #345608; font-family: ptSansBold; font-size: 2.500em; text-shadow: 0 1px 0 #a5e94f; line-height: 1em; width: 360px; text-align: right; opacity: 0}
.slide1 .mac1 {right: 210px; top: 50px; z-index: 1; opacity: 0}
.slide1 .mac2 {right: 75px; top: 4px; z-index: 2; opacity: 0}
.slide1 .bgSlide {width: 523px; height: 226px; background: url("../images/banner/bgSlide1.png"); bottom: 0; right: 0; opacity: 0}
.slide1 .ipad {right: 325px; top: 82px; z-index: 3; opacity: 0}
.slide1 .iphone {right: 435px; top: 151px; z-index: 4; opacity: 0}

.slide1.animate-in h3 {left: 75px; opacity: 1; transition: all 1s ease-out; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out}
.slide1.animate-in p {right: 500px; opacity: 1; transition: all 1s ease-out .5s; -webkit-transition: all 1s ease-out .5s; -moz-transition: all 1s ease-out .5s; -o-transition: all 1s ease-out .5s}
.slide1.animate-in .mac1 {right: 230px; opacity: 1; transition: all 1s ease-out 1.5s; -webkit-transition: all 1s ease-out 1.5s; -moz-transition: all 1s ease-out 1.5s; -o-transition: all 1s ease-out 1.5s}
.slide1.animate-in .mac2 {right: 55px; opacity: 1; transition: all 1s ease-out .5s; -webkit-transition: all 1s ease-out .5s; -moz-transition: all 1s ease-out .5s; -o-transition: all 1s ease-out .5s}
.slide1.animate-in .bgSlide {opacity: 1; transition: all 1s ease-out; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out}
.slide1.animate-in .ipad {right: 295px; opacity: 1; transition: all 1s ease-out 1s; -webkit-transition: all 1s ease-out 1s; -moz-transition: all 1s ease-out 1s; -o-transition: all 1s ease-out 1s}
.slide1.animate-in .iphone {right: 415px; opacity: 1; transition: all 1s ease-out 1.5s; -webkit-transition: all 1s ease-out 1.5s; -moz-transition: all 1s ease-out 1.5s; -o-transition: all 1s ease-out 1.5s}

.slide1.animate-out h3 {left: 85px; opacity: 0; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out}
.slide1.animate-out p {right: 510px; opacity: 0; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out}
.slide1.animate-out .mac1 {right: 220px; opacity: 0; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out}
.slide1.animate-out .mac2 {right: 65px; opacity: 0; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out}
.slide1.animate-out .bgSlide {opacity: 0; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out}
.slide1.animate-out .ipad {right: 305px; opacity: 0; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out}
.slide1.animate-out .iphone {right: 425px; opacity: 0; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all 1s .5s ease-out}

/* Slide 2*/
.slide2 h3 {left: 100px; top: 140px; color: #fff; font-family: ptSansBold; font-size: 2.500em; text-shadow: 0 1px 0 #4d7b13; opacity: 0}
.slide2 .paragraph1 {right: 490px; top: 180px; color: #345608; font-family: ptSansBold; font-size: 2em; text-shadow: 0 1px 0 #a5e94f; line-height: 1em; width: 360px; text-align: right; opacity: 0}
.slide2 .paragraph2 {right: 490px; top: 220px; color: #345608; font-family: ptSansBold; font-size: 2em; text-shadow: 0 1px 0 #a5e94f; line-height: 1em; width: 360px; text-align: right; opacity: 0}
.slide2 .bgSlide {width: 523px; height: 226px; background: url("../images/banner/bgSlide1.png"); bottom: 0; right: 20px; opacity: 0}
.slide2 .bgShe {width: 484px; height: 343px; background: url("../images/banner/bgSlide2.png"); bottom: 0; right: 0; opacity: 0; z-index: 1}
.slide2 .she {opacity: 0; bottom: 0; right: 115px; z-index: 2}

.slide2.animate-in h3 {left: 75px; opacity: 1; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out}
.slide2.animate-in .paragraph1 {right: 460px; opacity: 1; transition: all .5s ease-out 1s; -webkit-transition: all .5s ease-out 1s; -moz-transition: all .5s ease-out 1s; -o-transition: all .5s ease-out 1s}
.slide2.animate-in .paragraph2 {right: 460px; opacity: 1; transition: all .5s ease-out 1.5s; -webkit-transition: all .5s ease-out 1.5s; -moz-transition: all .5s ease-out 1.5s; -o-transition: all .5s ease-out 1.5s}
.slide2.animate-in .bgSlide {opacity: 1; transition: all 1s ease-out; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out}
.slide2.animate-in .bgShe {opacity: 1; transition: all .5s ease-out .5s; -webkit-transition: all .5s ease-out .5s; -moz-transition: all .5s ease-out .5s; -o-transition: all .5s ease-out .5s}
.slide2.animate-in .she {opacity: 1; right: 125px; transition: all .5s ease-out 1s; -webkit-transition: all .5s ease-out 1s; -moz-transition: all .5s ease-out 1s; -o-transition: all .5s ease-out 1s}

.slide2.animate-out h3 {left: 85px; opacity: 0; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out}
.slide2.animate-out .paragraph1 {right: 480px; opacity: 0; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out}
.slide2.animate-out .paragraph2 {right: 480px; opacity: 0; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out}
.slide2.animate-out .she {opacity: 0; right: 115px; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out}
.slide2.animate-out .bgSlide {opacity: 0; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out}
.slide2.animate-out .bgShe {opacity: 0; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out}

/* Slide 3*/
.slide3 img {}
.slide3 div {}
.slide3 p {}
.slide3 .paragraph1 {left: 100px; top: 215px; font-family: ptSansBold; font-size: 2.333em; color: #fff; text-shadow: 0 1px 0 #4d7b13; z-index: 2; opacity: 0}
.slide3 .paragraph2 {left: 328px; top: 215px; font-family: ptSansBold; font-size: 2.333em; color: #fff; text-shadow: 0 1px 0 #4d7b13; z-index: 2; opacity: 0}
.slide3 .paragraph3 {left: 516px; top: 215px; font-family: ptSansBold; font-size: 2.333em; color: #fff; text-shadow: 0 1px 0 #4d7b13; z-index: 2; opacity: 0}
.slide3 .paragraph4 {left: 710px; top: 215px; font-family: ptSansBold; font-size: 2.333em; color: #fff; text-shadow: 0 1px 0 #4d7b13; z-index: 2; opacity: 0}
.slide3 .icon1 {left: 102px; top: 70px; z-index: 2; opacity: 0}
.slide3 .icon2 {left: 314px; top: 70px; z-index: 2; opacity: 0}
.slide3 .icon3 {left: 524px; top: 70px; z-index: 2; opacity: 0}
.slide3 .icon4 {left: 732px; top: 70px; z-index: 2; opacity: 0}
.slide3 .light1 {left: 34px; top: 66px; width: 274px; height: 276px; background: url("../images/banner/light.png"); opacity: 0}
.slide3 .light2 {left: 244px; top: 66px; width: 274px; height: 276px; background: url("../images/banner/light.png"); opacity: 0}
.slide3 .light3 {left: 454px; top: 66px; width: 274px; height: 276px; background: url("../images/banner/light.png"); opacity: 0}
.slide3 .light4 {left: 664px; top: 66px; width: 274px; height: 276px; background: url("../images/banner/light.png"); opacity: 0}

.slide3.animate-in .light1 {opacity: 1; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out}
.slide3.animate-in .icon1 {opacity: 1; transition: all 1s ease-out; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out}
.slide3.animate-in .paragraph1 {opacity: 1; top: 225px; transition: all 1s ease-out .5s; -webkit-transition: all 1s ease-out .5s; -moz-transition: all 1s ease-out .5s; -o-transition: all 1s ease-out .5s}

.slide3.animate-in .light2 {opacity: 1; transition: all .5s ease-out .25s; -webkit-transition: all .5s ease-out .25s; -moz-transition: all .5s ease-out .25s; -o-transition: all .5s ease-out .25s}
.slide3.animate-in .icon2 {opacity: 1; transition: all 1s ease-out .25s; -webkit-transition: all 1s ease-out .25s; -moz-transition: all 1s ease-out .25s; -o-transition: all 1s ease-out .25s}
.slide3.animate-in .paragraph2 {opacity: 1; top: 225px; transition: all 1s ease-out .75s; -webkit-transition: all 1s ease-out .75s; -moz-transition: all 1s ease-out .75s; -o-transition: all 1s ease-out .75s}

.slide3.animate-in .light3 {opacity: 1; transition: all .5s ease-out .5s; -webkit-transition: all .5s ease-out .5s; -moz-transition: all .5s ease-out .5s; -o-transition: all .5s ease-out .5s}
.slide3.animate-in .icon3 {opacity: 1; transition: all 1s ease-out .5s; -webkit-transition: all 1s ease-out .5s; -moz-transition: all 1s ease-out .5s; -o-transition: all 1s ease-out .5s}
.slide3.animate-in .paragraph3 {opacity: 1; top: 225px; transition: all 1s ease-out 1s; -webkit-transition: all 1s ease-out 1s; -moz-transition: all 1s ease-out 1s; -o-transition: all 1s ease-out 1s}

.slide3.animate-in .light4 {opacity: 1; transition: all .5s ease-out .75s; -webkit-transition: all .5s ease-out .75s; -moz-transition: all .5s ease-out .75s; -o-transition: all .5s ease-out .75s}
.slide3.animate-in .icon4 {opacity: 1; transition: all 1s ease-out .75s; -webkit-transition: all 1s ease-out .75s; -moz-transition: all 1s ease-out .75s; -o-transition: all 1s ease-out .75s}
.slide3.animate-in .paragraph4 {opacity: 1; top: 225px; transition: all 1s ease-out 1.25s; -webkit-transition: all 1s ease-out 1.25s; -moz-transition: all 1s ease-out 1.25s; -o-transition: all 1s ease-out 1.25s}

.slide3.animate-out .icon1, .slide3.animate-out .icon2, .slide3.animate-out .icon3, .slide3.animate-out .icon4 {opacity: 0; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out}
.slide3.animate-out .light1, .slide3.animate-out .light2, .slide3.animate-out .light3, .slide3.animate-out .light4 {opacity: 0; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out}
.slide3.animate-out .paragraph1, .slide3.animate-out .paragraph2, .slide3.animate-out .paragraph3, .slide3.animate-out .paragraph4 {opacity: 0; transition: all .5s ease-out .25s; -webkit-transition: all .5s ease-out .25s; -moz-transition: all .5s ease-out .25s; -o-transition: all .5s ease-out .25s}

.slide3.animate-in .fake {opacity: 0; transition: all .1s ease-out; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out}
.slide3.animate-out .fake {opacity: 1; transition: all .1s ease-out; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out}

.sequence-preloader .preloading .circle{fill: #fff !important}
div.inline{background-color: #fff !important}