#intro{ width: 100%; background: #52b3d9; }
#intro.scrolled{ padding-top: 141px; }
#intro .wrap{ text-align: center; display: table; position: relative;  }
#intro .need{ display: table-cell; vertical-align: middle; color: #FFF; padding-bottom: 100px; clear: both; width: 100%; height: 435px; }
#intro .need p{ font-size: 55px; padding: 0; margin: 0; line-height: 1.3em; text-transform: uppercase; display: none; }
#intro .need span{ font-size: 80px; font-family:'Avenir LT W01 95 Black', Arial, sans-serif; }
#intro .btn{ font-size: 20px; margin: 30px 0 0; padding: 22px 55px; position: relative; }

#testimonial{ padding: 70px 0 10px; background: #FFF; position: relative; z-index: 9; }
#testimonial .wrap{ width: 768px; text-align: center; }
#testimonial .quotemarks{ font-size: 70px;  color: #DADFE1;  }
#testimonial .quotemarks span{ display: inline; margin: 0 20px 0;  }
#testimonial .quotemarks .icon-left_quote{ position: relative; top: -10px; }
#testimonial .quotemarks h2{ display: inline; font-size: 70px; text-transform: uppercase; }
#testimonial .quote{ font-size: 25px; line-height: 1.4em; padding: 10px 0 20px; margin: 0; }
#testimonial .customer img{ width: 50px; height: 50px; }
#testimonial .customer p{ font-size: 16px; }
#testimonial .customer strong{ display: block; text-transform: uppercase; }

#services{ background: #52b3d9; padding: 80px 0; overflow: hidden; position: relative; z-index: 9; }
#services .wrap{ }
#services .tabs{ margin: 0; padding: 0 0 40px; list-style: none; }
#services .tabs li{ display: inline; color: #FFF; padding: 0 20px; font-family:'Avenir LT W01 95 Black', Arial, sans-serif; font-size: 18px; text-transform: uppercase; }
#services .tabs li a{ color: #FFF; text-decoration: none; display: inline-block; padding: 0 0 5px; }
#services .tabs li a.active{ border-bottom: #FFF 5px solid; }
#services .tab{ position: relative; height: 450px; display: none; }
#services .tab#designtab{ display: block; }
#services .tab .right{ width: 38%; padding: 30px 0 0 1.7%; color: #FFF; font-size: 18px; float: left; position: relative; }
#services .tab .right h2{ font-size: 35px; text-transform: uppercase; padding: 0; margin: 0;  }
#services .tab .right .btn{ margin-top: 10px; }
#services .tab img{ position: absolute; left: 52%; top: 80px; }
#services .tab img.ipad{ left: 67%; top: -80px; }
#services .tab img.iphone{ left: 45%; top: 80px; }
#services .tab .icon-magento{ font-size: 690px; color: #FFF; position: absolute; left: 50%; top: -140px; -webkit-transform: rotate(18deg); -moz-transform: rotate(18deg); -o-transform: rotate(18deg); writing-mode: lr-tb; }
#services .tab .browser{  position: absolute; left: 52%; top: -80px; width: 1008px; height: 708px; background: url(../img/services/browser.png); overflow: hidden; }
#services .tab .browser img.logo{ position: absolute; left: 83px; top: 136px; }
#services .tab .browser img.subscribe{ position: absolute; left: auto; right: 86px; top: 138px; }
#services .tab .browser .navigation{ position: absolute; left: 6px; top: 199px; }
#services .tab .browser .slider{ position: absolute; left: 83px; top: 245px; }
#services .tab .browser .leftcol{ position: absolute; left: 83px; top: 560px; }
#services .tab .browser .rightcol{ position: absolute; right: 83px; left: auto; top: 560px; }

#clients{ text-align: center; padding: 0 0 90px; }
#clients ul{ padding: 0; margin: 20px 0 15px; list-style: none; }
#clients ul li{ display: inline-block; margin: 0 20px; }
#clients ul li strong{ display: block; text-indent: -999999px; }
#clients ul li span{ font-size: 43px; color: #c0c0c0; }
#clients ul li.sony span{ font-size: 33px; }
#clients ul li.westfield span{ font-size: 35px; }

.sjloverlay{ position: fixed; width: 100%; height: 100%; background: #000; opacity: 0.6; top: 0; left: 0; z-index: 999999998; }
#sjl{ width: 70%; position: fixed; top: 100px; left: 10%; background: #FFF; padding: 10px 5% 40px; border-radius: 3px; z-index: 999999999; text-align: center; }
#sjl .sjllogo{ width: 150px; height: 150px; background: url(../img/sjl.png); background-image: url(../img/sjl.svg), none; background-size: contain; display: block; text-indent: -9999999px; margin: 0 auto 30px; text-decoration: none; }
#sjl h2{ padding: 30px 0!important; margin: 0; }
#sjl .close{ width: 36px; height: 36px; line-height: 36px; font-size: 20px; background: #EEE; position: absolute; top: -17px; right: -17px; text-decoration: none; border: #CCC 3px solid; }

/* CSS Enhancements */
#testimonial .customer img{ border-radius: 25px; }

/*IE FIXES*/
#testimonial .customer img{ behavior: url(/PIE.htc); z-index: 9999999!important; }

/* FlexSlider */
.flexslider { padding: 0; }
.flexslider .slides{ padding: 0; margin: 0; list-style: armenian; }
.flexslider .slides > li { display: none; list-style: none; -webkit-backface-visibility: hidden; } /* Hide the slides before the JS is loaded. Avoids image jumping */
.flex-pauseplay span { text-transform: capitalize; }
.slides:after { content: "\0020"; 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; }
.flex-control-nav{ list-style: none; padding: 0; margin: 0; text-align: center; }
.flex-control-nav li{ display: inline-block; }

@media only screen and (max-width: 1160px){
#testimonial .wrap{ width: 60%; }
#services .tabs li.ourservices{ display: none; }
}

@media only screen and (max-width: 980px){
#intro .need p{ font-size: 50px;  }
#intro .need span{ font-size: 70px; }
#services .tab{ height: 510px; }
#services .tab img{ position: absolute; left: 52%; top: 30px; }
#services .tab .icon-magento{ top: -130px; }
}
@media only screen and (max-width: 820px){
#intro.scrolled{ padding-top: 0; }
#intro .need{ padding: 0 0 130px;  }
#intro .need p{ font-size: 50px;  }
#intro .need span{ font-size: 60px; }
#services{ text-align: center; padding: 80px 0 0; }
#services .tabs{ text-align: center; }
#services .tabs li{ float: none; display: inline; }
#services .tab{ height: auto; }
#services .tab img{ display: none; }
#services .tab .right{ width: 80%; margin: 0 auto; float: none; padding: 10px 0 80px; }
#services .tab .browser{ display: none; }
#services .tab .icon-magento{ font-size: 150px; display: block; position: static; transform: none; -webkit-transform: none; }
}
@media only screen and (max-width: 635px){
#intro .need p{ font-size: 30px;  }
#intro .need span{ font-size: 40px; }
#intro .need .btn{ font-size: 15px; }
#services .tab img.ipad{ right: auto; left: 18%; margin-left: 0; }
#services .tab img.iphone{ left: auto; right: 18%; margin-left: 0; }
#sjl{ width: 80%; left: 5%; top: 55px; padding: 20px 5% 30px; }
#sjl h2{ padding: 10px 0 20px!important; margin: 0; }
#sjl .sjllogo{ width: 100px; height: 100px; }
#sjl .btn span{ display: none; }
}
@media only screen and (max-width: 635px) and (orientation:landscape){
#intro .need{ height: 210px!important; }
#sjl{ top: 20px; }
#sjl .sjllogo{ margin-bottom: 15px; }
}
@media only screen and (max-width: 420px){
#intro .need p{ font-size: 25px;  }
#intro .need span{ font-size: 30px; }
#intro .need .btn{ padding: 22px 35px; }
#testimonial{ padding: 50px 0 10px; }
#testimonial .wrap{ width: 80%; }
#testimonial .quote{ font-size: 22px; }
#clients{ padding: 0 0 70px; }
#clients ul{ margin: 10px 0 15px; }
#services{ padding: 50px 0 0; }
#services .tabs{ padding: 0 0 30px; }
#services .tabs li{ padding: 0 10px; font-size: 16px; }
#services .tab .right h2{ font-size: 25px; }
#services .tab img.browser{ width: 290px; margin-left: -145px; }
#services .tab img.ipad{ width: 239px; left: 5%; }
#services .tab img.iphone{ width: 109px; right: 5%; }
#services .tab .icon-magento{ padding-bottom: 15px; }
#services .tab .right{ padding: 10px 0 60px; }
#sjl h2 span{ display: none; }
}