/*
THEME NAME: HTML5 Starter Pack
THEME URI: http://www.websiteaddress.com/
DESCRIPTION: Just another HTML5 Starter Pack.
VERSION: 1.0
AUTHOR: Matt @ DVQ (Digital Visions Queenstown)
AUTHOR URI: http://www.dvq.co.nz/
*/
@import url(assets/css/reset.css); /* IMPORT RESET STYLESHEET */
@import url(//fast.fonts.net/cssapi/4b55f6db-8a89-4649-8d22-421cafcfd847.css); /* IMPORT FONTS STYLESHEET */
/* BASE ---------------------------- */
body { background: rgb(255,255,255) url(assets/img/ui/top-wall-gradient-repeat-x.gif) repeat-x 0 0; color: rgb(68,68,68); font: 105%/1.5em "Proxima Nova", Helvetica, Arial, sans-serif; }
/* FONTs ---------------------------- */
p { margin: 0 0 1.5em 0; font-size: 107%; line-height: 1.6em; color: rgb(102,102,102); }
h2 { font: 190% "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; margin: 0 0 20px 0; }
h3 { }
h4 { }
h5 { }
h6 { }
blockquote { }
blockquote p { padding: 0 0 0 2em; }
/* LINKS ------------------------------------------------------------------ */
a, a:visited { color: rgb(0,174,239); text-decoration: none; outline: none; }
a:hover { color: rgb(68,68,68); text-decoration: none; }
a:active, a:focus { outline: none; }
a { -webkit-transition: color 0.2s ease 0s; -moz-transition: color 0.2s ease 0s; -o-transition: color 0.2s ease 0s; transition: color 0.2s ease 0s; }
/* IMGs / VIDEOs ---------------------------- */
img { }
.alignleft { float: left; margin: 0 10px 10px 0; }
.alignright { float: right; margin: 0 0 10px 10px; }
.aligncenter { margin: 0 auto 1.5em auto; display: block; text-align: center; }
/* LISTs ---------------------------- */
ul, ol { }
ul li, ol li { }
/* - CONTENT START ----------------------------------------------------------------------------------------------------- */
/* CONTAINERs ---------------------------- */
.container { width: 940px; height: 100%; margin: 0px auto; position: relative; }
.not-homepage { background: rgb(255,255,255); }
hr { width: 100%; height: 1px; border: none; background: rgba(0,0,0,0.1); color: rgba(0,0,0,0.1); margin: 60px 0; }
.page-content { width: 100%; margin: -20px 0 70px 0; float: left; }
/* HEADER ---------------------------- */
#header { width: 100%; height: 805px; display: block; float: left; background: url(assets/img/ui/top-tv.png) no-repeat 50% 105px; }
#top-bar { position: fixed; background: rgba(255,255,255,0); padding: 0 0 24px 0; width: 100%; z-index: 200; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; }
#top-bar.active-top-bar { background: rgba(255,255,255,0.97); padding: 0 0 8px 0; border-bottom: 1px solid rgba(0,0,0,0.15); }
#top-bar.active-top-bar #logo { margin: 8px 0 0 0; }
#top-bar.active-top-bar .days-left-wrapper { margin: 22px 0 0 0; }
#top-bar.top-bar-not-homepage { position: relative; }
#logo { width: 237px; height: 58px; background: url(assets/img/ui/logo.png) no-repeat 0 0; float: left; text-indent: -9999px; display: block; float: left; margin: 24px 0 0 0; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; }
#logo:hover { opacity: 0.8; }
/* DAYS LEFT COUNTER ---------------------------- */
.days-left-wrapper { margin: 37px 0 0 0; float: right; width: 200px; text-align: right; font: 130% "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; line-height: 34px; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; }
.days-left-counter { margin: -1px 0 0 8px; float: right; color: rgb(255,255,255); background: rgb(68,68,68); -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; display: block; padding: 1px 13px 3px 13px; height: 30px; }
/* TOP TV ---------------------------- */
.top-tv-slideshow { width: 528px; height: 322px; background: rgb(0,0,0); position: absolute; top: 119px; left: 206px; cursor: pointer; z-index: 10; }
.top-tv-slideshow span { z-index: 12; position: relative; display: none; float: left; }
.play-button { width: 100px; height: 100px; opacity: 0.8; display: block; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; z-index: 25; background: url(assets/img/ui/play-button.png) no-repeat 0 0; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; }
.top-tv-slideshow:hover .play-button { opacity: 1; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }
.top-tv-slideshow-img-1 { background: url(assets/img/ui/top-tv-image-1.jpg) no-repeat 0 0; width: 528px; height: 322px; display: block; text-indent: -9999px }
.top-tv-slideshow-img-2 { background: url(assets/img/ui/top-tv-image-2.jpg) no-repeat 0 0; width: 528px; height: 322px; display: block; text-indent: -9999px }
.top-tv-slideshow-img-3 { background: url(assets/img/ui/top-tv-image-3.jpg) no-repeat 0 0; width: 528px; height: 322px; display: block; text-indent: -9999px }
.top-tv-slideshow-img-4 { background: url(assets/img/ui/top-tv-image-4.jpg) no-repeat 0 0; width: 528px; height: 322px; display: block; text-indent: -9999px }
/* PRE-ORDER BUTTON ---------------------------- */
a.pre-order-button { font: 130% "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; background: rgb(0,174,239); height: 60px; line-height: 60px; display: block; position: absolute; top: 541px; left: 50%; margin: 0 0 0 -126px; color: rgb(255,255,255); padding: 0 32px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; }
a.pre-order-button:hover { margin-top: -4px; background: rgb(2,163,223); color: rgb(204,239,252); box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.pre-order-subtext { position: absolute; text-align: center; top: 616px; margin: 0 auto; width: 100%; }
/* SOCIAL BUTTONs ---------------------------- */
.social-buttons-wrapper { position: absolute; top: 518px; right: 256px; }
#fb-root, .like { position:absolute; top:0px; left:0px; }
.tweet { position:absolute; top:0px; left:117px; }
/* SOCIAL BUTTONs ---------------------------- */
#yt-player { position: absolute; z-index: 1; top: 119px; left: 50%; margin: 0 0 0 -264px; }
/* INTRODUCTION ---------------------------- */
.introduction { width: 100%; float: left; }
.intro-section-text-block { width: 100%; margin: -40px 0 0 0; float: left; }
.sugarcube-render { position: absolute; display: block; z-index: 5; top: -48px; right: -10px; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; }
.sugarcube-render:hover { top: -58px; right: -10px; }
.sugarcube-render-shadow { width: 445px; height: 161px; opacity: 0; position: absolute; z-index: 2; top: 16px; right: 32px; background: url(assets/img/ui/sugarcube-render-shadow.png) no-repeat 0 0; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; }
.sugarcube-render-wrapper:hover .sugarcube-render-shadow { opacity: 0.8; }
/* BLUE SECTION ---------------------------- */
.blue-section { width: 100%; height: 637px; margin: 200px 0 0 0; float: left; background: rgb(0,174,239); }
.second-tv { width: 672px; height: 380px; background: url(assets/img/ui/second-tv.png); position: absolute; top: -40px; left: -55px; }
.second-tv img { z-index: 2; position: absolute; top: 14px; left: 72px; }
.blue-section-text-block { width: 306px; float: right; }
.blue-section-text-block h2 { color: rgb(255,255,255); margin-top: 68px; }
.blue-section-text-block p { color: rgb(204,239,252); }
.blue-section a { opacity: 0.50; -webkit-transition: opacity 0.2s ease 0s; -moz-transition: opacity 0.2s ease 0s; -o-transition: opacity 0.2s ease 0s; transition: opacity 0.2s ease 0s; }
.blue-section a:hover { opacity: 1; }
.device-iphone { width: 50px; height: 104px; display: block; position: absolute; bottom: 48px; left: 0; background: url(assets/img/ui/device-outlines.png) 0 -79px; }
.device-ipad { width: 122px; height: 156px; display: block; position: absolute; bottom: 48px; left: 288px; background: url(assets/img/ui/device-outlines.png) -160px -27px; }
.device-laptop { width: 324px; height: 183px; display: block; position: absolute; bottom: 48px; right: 0; background: url(assets/img/ui/device-outlines.png) -357px 0; }
.blue-section .active-device-iphone { background: url(assets/img/ui/device-outlines.png) 0 -262px; opacity: 1; }
.blue-section .active-device-ipad { background: url(assets/img/ui/device-outlines.png) -160px -210px; opacity: 1; }
.blue-section .active-device-laptop { background: url(assets/img/ui/device-outlines.png) -357px -183px; opacity: 1; }
.dotted-trail-1 { width: 50px; height: 43px; background: url(assets/img/ui/wifi-signal-1.png) no-repeat 0 0; display: block; position: absolute; top: 424px; bottom: 0px; left: 18px; }
.dotted-trail-2 { width: 57px; height: 43px; background: url(assets/img/ui/wifi-signal-2.png) no-repeat 0 0; display: block; position: absolute; top: 376px; bottom: 0px; left: 320px; }
.dotted-trail-3 { width: 50px; height: 43px; background: url(assets/img/ui/wifi-signal-3.png) no-repeat 0 0; display: block; position: absolute; top: 363px; bottom: 0px; left: 593px; }
/* GRAY SECTION ---------------------------- */
.gray-section { width: 100%; float: left; background: rgb(68,68,68); padding: 0 0 100px 0; }
.gray-section-text-block { text-align: center; }
.gray-section-text-block h2 { color: rgb(255,255,255); margin-top: 98px; }
.gray-section-text-block p { color: rgb(218,218,218); }
.gray-section-column { width: 265px; float: left; text-align: center; margin: 40px 0 0 0; padding: 0 24px; }
.gray-section-column p { color: rgb(218,218,218); margin: 16px 0 0 0; }
.setup-number { width: 80px; height: 78px; padding: 2px 0 0 0; font: 190% "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; line-height: 80px; color: rgb(255,255,255); display: block; -moz-border-radius: 80px; -webkit-border-radius: 80px; border-radius: 80px; border: 2px solid rgb(255,255,255); text-align: center; margin: 0 auto; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; }
.gray-section-column:hover .setup-number { background: rgb(255,255,255); color: rgb(68,68,68); }
/* BEAUTIFUL VISUALS SECTION ---------------------------- */
.bv-section { width: 100%; float: left; margin: 0 0 100px 0; }
.bv-section-text-block { width: 440px; float: left; }
.bv-section-text-block h2 { margin-top: 132px; }
.bv-section-text-block p { }
.bottom-tv { width: 527px; height: 410px; display: block; background: url(assets/img/ui/bottom-tv.png) no-repeat 0 0; position: absolute; top: 72px; right: -42px; }
.bottom-tv-hover { width: 365px; height: 309px; opacity: 0; position: absolute; top: 20px; right: 83px; background: url(assets/img/ui/bottom-tv-hover.png) no-repeat 0 0; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; }
.bottom-tv:hover .bottom-tv-hover { opacity: 1; }
/* HOW IT WORKS SECTION ---------------------------- */
.hiw-section { width: 100%; float: left; margin: 132px 0 48px 0; }
.hiw-section-text-block { width: 454px; margin: 24px 0 0 0; float: right; position: relative; }
.hiw-section-text-block h2 { }
.hiw-section-text-block p { position: absolute; top: 64px; background: rgb(255,255,255); }
.features-box-wrapper { position: relative; top: -70px; width: 412px; }
.features-box { width: 188px; height: 140px; position: relative; top: 0; color: rgb(102,102,102); border: 2px solid rgba(0,0,0,0.15); -moz-border-radius: 6px; -wekbit-border-radius: 6px; border-radius: 6px; text-align: center; font: 110% "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; float: left; display: block; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; }
.features-box:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.10); top: -4px; border-color: rgb(0,174,239); }
.features-box-title { position: absolute; left: 0; bottom: 12px; width: 188px; }
.airplay-box { float: left; margin: 0 0 28px 0; }
.chromecast-box { float: right; margin: 0 0 28px 0; }
.miracast-box { float: left; }
.dlna-box { float: right; }
.airplay-icon { width: 84px; height: 84px; background: red url(assets/img/ui/how-it-works-logos.gif) no-repeat 0 0; display: block; margin: 11px auto 0 auto; }
.chromecast-icon { width: 84px; height: 84px; background: red url(assets/img/ui/how-it-works-logos.gif) no-repeat -84px 0; display: block; margin: 11px auto 0 auto; }
.miracast-icon { width: 84px; height: 84px; background: red url(assets/img/ui/how-it-works-logos.gif) no-repeat 0 -84px; display: block; margin: 11px auto 0 auto; }
.dlna-icon { width: 84px; height: 84px; background: red url(assets/img/ui/how-it-works-logos.gif) no-repeat -84px -84px; display: block; margin: 11px auto 0 auto; }
/* SECOND PRE-ORDER BUTTON ---------------------------- */
.second-pre-order-section { width: 100%; height: 108px; float: left; background: rgb(68,68,68); }
a.second-pre-order-button { font: 130% "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; background: rgb(0,174,239); height: 60px; line-height: 60px; display: block; position: absolute; top: 24px; right: 0; margin: 0 0 0 0; color: rgb(255,255,255); padding: 0 32px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; }
a.second-pre-order-button:hover { margin-top: -4px; background: rgb(2,163,223); color: rgb(204,239,252); box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.second-pre-order-subtext { position: absolute; text-align: left; top: 41px; margin: 0 auto; color: rgb(255,255,255); }
.second-pre-order-subtext span { margin-right: 48px; color: rgb(170,170,170); }
/* TEAM SECTION ---------------------------- */
.team-section { width: 100%; height: 558px; float: left; background: rgb(236,236,236); }
.team-section-text-block { text-align: center; }
.team-section-text-block h2 { margin-top: 98px; }
.team-section-text-block p { color: rgb(102,102,102); }
.team-section-column { width: 136px; float: left; text-align: center; margin: 40px 0 0 0; }
.team-section-column p { color: rgb(68,68,68); margin: 12px 0 0 0; font-weight: bold; line-height: 22px; }
.team-section-column span.team-sub-text { font-weight: normal; font-size: 80%; color: rgb(102,102,102); }
.team-section-right-margin { margin: 40px 65px 0 0; }
.team-section-column img { position: relative; top: 0; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; -moz-border-radius: 163px; -webkit-border-radius: 163px; border-radius: 163px; }
.team-section-column:hover img { box-shadow: 0 2px 8px rgba(0,0,0,0.25); top: -4px; }
.team-section-column:hover p { color: rgb(0,174,239);}
/* FAQs SECTION ---------------------------- */
.faqs-section { width: 100%; margin: 0 0 70px 0; float: left; }
.faqs-section-text-block { }
.faqs-section-text-block h2 { margin-top: 98px; }
.faqs-section-column-left { width: 418px; float: left; }
.faqs-section-column-right { width: 418px; float: right; }
/* FOOTER ---------------------------- */
#footer { text-transform: uppercase; float: left; width: 100%; font-size: 80%; display: block; }
.footer-container { border-top: 1px solid rgba(0,0,0,0.1); padding: 48px 0; }
.copyright { margin: 0; float: left; }
.footer-nav { float: right; margin: 0; text-align: right; }
#footer a { color: rgb(102,102,102); }
#footer a:hover { color: rgb(0,174,239); }
.footer-nav-divider { padding: 0 12px; color: rgb(170,170,170); }
.social-icon { -webkit-transition: all 0.2s ease 0s; margin-left: 12px; float: right; text-align: left; }
.twitter-icon { width: 18px; height: 18px; display: block; text-indent: -9999px; position: relative; top: 0px; background: url(assets/img/ui/social-icons.png) no-repeat -60px 0; }
.twitter-icon:hover { background-position: -60px -18px; }
.facebook-icon { width: 18px; height: 18px; display: block; margin-left: 24px; text-indent: -9999px; position: relative; top: 0px; background: url(assets/img/ui/social-icons.png) no-repeat 0px 0; }
.facebook-icon:hover { background-position: 0 -18px; }
.linkedin-icon { width: 18px; height: 18px; display: block; text-indent: -9999px; position: relative; top: 0px; background: url(assets/img/ui/social-icons.png) no-repeat -30px 0; }
.linkedin-icon:hover { background-position: -30px -18px; }
/* - CONTENT END ----------------------------------------------------------------------------------------------------- */