/****************************
 * FONTS
 ****************************/
@font-face {
    font-family: 'AvenirLTStd-Light';
    src: url('fonts/AvenirLTStd-Light.eot?#iefix') format('embedded-opentype'), url('fonts/AvenirLTStd-Light.otf') format('opentype'), url('fonts/AvenirLTStd-Light.woff') format('woff'), url('fonts/AvenirLTStd-Light.ttf') format('truetype'), url('fonts/AvenirLTStd-Light.svg#AvenirLTStd-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AvenirLTStd-Black';
    src: url('fonts/AvenirLTStd-Black.eot?#iefix') format('embedded-opentype'), url('fonts/AvenirLTStd-Black.otf') format('opentype'), url('fonts/AvenirLTStd-Black.woff') format('woff'), url('fonts/AvenirLTStd-Black.ttf') format('truetype'), url('fonts/AvenirLTStd-Black.svg#AvenirLTStd-Black') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TradeGothicLTExtendedBold';
    src: url('fonts/tradegothicltboldextended.eot');
    src: url('fonts/tradegothicltboldextended.eot') format('embedded-opentype'), url('fonts/tradegothicltboldextended.woff2') format('woff2'), url('fonts/tradegothicltboldextended.woff') format('woff'), url('fonts/tradegothicltboldextended.ttf') format('truetype'), url('fonts/tradegothicltboldextended.svg#TradeGothicLTExtendedBold') format('svg');
}

/****************************
 * GLOBAL
 ****************************/

html, body { height: 100%; }
ul, li { list-style: none; margin: 0; padding: 0; }

.pull-left { float: left; }
.pull-right { float: right; }

.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; }
.clearfix:after { clear: both; }

.wrapper { width: 960px; margin: 0 auto; padding: 0 10px; position: relative; }

body { background-color: #000; color: #FFF; font-size: 14px; font-family: 'AvenirLTStd-Light'; letter-spacing: 2px; }
header { background-color: #000; height: 103px; position: fixed; top: 0; width: 100%; z-index: 9999; }
header .main-title { padding: 20px 0 20px 10px; }
header .main-title a { background: url(../images/logo.png) no-repeat; width: 134px; height: 63px; display: block; }
header .main-title a span { display: none; }
header .main-menu { margin-top: 42px; margin-right: 12px; }
header .main-menu ul li { float: left; background: url(../images/menu-bullet.png) no-repeat left center; padding: 0 20px 0 25px; }
header .main-menu ul li:last-child { padding-right: 0; }
header .main-menu ul li:first-child { padding-left: 0; background: none; }
header .main-menu ul li a { color: #287298; text-transform: uppercase; text-decoration: none; }
header .main-menu ul li a:hover, header .main-menu ul li.active a { color: #ffe368; }
header .main-menu ul li a span { }

article { position: relative; background-size: 100% 100% !important; height: 600px; background-repeat: no-repeat; width: 100%; }
article .wrapper { height: 100%; }
article h1 { margin: 0; }
article h1 span { font-family: 'TradeGothicLTExtendedBold'; font-size: 69px; color: #287298; text-transform: uppercase; line-height: 80px; }
article h1 small { font-family: 'TradeGothicLTExtendedBold'; color: #ffe368; text-transform: uppercase; font-size: 30px; }

/****************************
 * LOADER
 ****************************/
.loader { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 9; }
.loader .loader-wrapper { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; }

.loading .loader { display: block; }
html.loading, .loading body { overflow: hidden; }
.loading header { display: none; }
.loading #step-1 { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 8; }
.loading #step-1 .content-text { display: none; }
.loading #step-1 .content-image { display: none; }

/****************************
 * ALTIMETER
 ****************************/
.altimeter { opacity: 0; position: fixed; top: 50%; margin-top: -147px; right: -200px; z-index: 999; }
.altimeter-wrapper { background: url(../images/bg-altimeter.png) no-repeat; width: 52px; height: 423px; }
.altimeter-wrapper span { font-family: 'AvenirLTStd-Black'; font-size: 16px; display: block; background: url(../images/marker-altimeter.png) no-repeat; width: 70px; height: 20px; color: #000; text-align: right; position: absolute; top: -7px; right: 56px; padding: 0 10px 0 0; letter-spacing: 1px; }

/****************************
 * STEP 1
 ****************************/
#step-1 { background: url(../images/step-1/bg.jpg) no-repeat top center; height: 870px; overflow: hidden; }
#step-1 .content-text { position: absolute; width: 350px; text-align: center; top: 50%; margin-top: -178px; left: 22px; }
#step-1 .content-text p { text-transform: uppercase; margin: 5px 0; letter-spacing: 3px; }
#step-1 .content-text a { display: block; background: url(../images/step-1/bt-down.png) no-repeat; width: 86px; height: 86px; color: #FFF; text-decoration: none; text-transform: uppercase; font-size: 12px; margin: 32px auto 0 auto; padding-bottom: 31px; }
#step-1 .content-text a span { display: block; padding: 103px 0 0 0; }
#step-1 .content-image { background: url(../images/step-1/clock.png) no-repeat; width: 734px; height: 791px; position: absolute; top: 50%; margin-top: -395px; right: -101px; }

/****************************
 * STEP 2
 ****************************/
#step-2 { background: url(../images/step-2/bg.png) no-repeat top center; overflow: hidden; margin: -127px 0 -132px 0; z-index: 9; height: 750px; }
#step-2 .step-2-video { width: 768px; margin-top: -158px; position: absolute; top: 50%; left: 106px; }
#step-2 .step-2-video-border-top { border-top: solid 1px #ffe368; position: absolute; top: 0; left: 0; width: 100%; }
#step-2 .step-2-video-border-bottom { border-bottom: solid 1px #ffe368; position: absolute; bottom: 0; right: 0; width: 100%; }
#step-2 .step-2-video-content { background: url(../images/step-2/video-bg.jpg) no-repeat center center; height: 432px; margin: 10px 0; position: relative; overflow: hidden; }
#step-2 .step-2-video-content h2 { font-weight: normal; text-transform: uppercase; text-align: center; display: block; margin: 136px 0 34px 0; }
#step-2 .step-2-video-content h2 span { font-size: 24px; display: block; }
#step-2 .step-2-video-content h2 small { font-size: 14px; }
#step-2 .step-2-video-content a { background: url(../images/step-2/bt-play.png) no-repeat; width: 86px; height: 86px; display: block; margin: 0 auto; }
#step-2 .step-2-video-content a span { display: none; }
#step-2 .step-2-video-content .step-2-video-content-play { }
#step-2 .step-2-video-content .step-2-video-content-video { display: none; }

/****************************
 * STEP 3
 ****************************/
#step-3 { background: url(../images/step-3/bg.jpg) no-repeat center center fixed; height: 840px; }
#step-3 .content-text { position: absolute; width: 280px; text-align: center; top: 50%; margin-top: -63px; left: 662px; }
#step-3 .content-text p { text-align: left; font-size: 12px; }
#step-3 .content-text h1 { text-align: left; }

/****************************
 * STEP 4
 ****************************/
#step-4 { background: url(../images/step-4/bg.png) no-repeat top center; margin: -154px 0 -130px 0; z-index: 9; }
#step-4 .content-text { position: absolute; width: 510px; text-align: center; top: 50%; margin-top: -2px; left: 83px; }
#step-4 .content-text p { text-align: left; font-size: 12px; }
#step-4 .content-text h1 { text-align: left; }
#step-4 .content-text h1 span { font-size: 50px; line-height: 70px; letter-spacing: 0; }

/****************************
 * STEP 5
 ****************************/
#step-5 { background: url(../images/step-5/bg.jpg) no-repeat top center; height: 860px; }
#step-5 .content-text { position: absolute; width: 320px; text-align: center; top: 50%; margin-top: -132px; left: 95px; }
#step-5 .content-text p { text-align: left; font-size: 12px; }
#step-5 .content-text h1 { text-align: left; }
#step-5 .content-text h1 span { font-size: 60px; line-height: 70px; letter-spacing: 0; }
#step-5 .content-text h1 small { display: block; margin-top: 15px; }
#step-5 .content-image { position: absolute; width: 488px; height: 690px; top: 50%; left: 50%; margin: -339px 0 0 -49px; background: url(../images/step-5/clock.png) no-repeat; }

/****************************
 * STEP 6
 ****************************/
#step-6 { background: url(../images/step-6/bg.png) no-repeat top center; overflow: hidden; margin: -100px 0 -100px 0; z-index: 9; height: 870px; }
#step-6 .content-text { position: absolute; width: 610px; height: 100%; text-align: center; top: 50%; left: 187px; z-index: 9; margin: 110px 0 0 0; }
#step-6 .content-text p { font-size: 12px; }
#step-6 .content-text h1 span { font-size: 60px; line-height: 70px; letter-spacing: 0; }
#step-6 .content-text h1 small { display: block; margin-top: 15px; }
#step-6 .content-image { position: absolute; width: 1600px; height: 900px; top: 50%; left: 50%; margin: -420px 0 0 -800px; background: url(../images/step-6/clock.png) no-repeat; }

/****************************
 * STEP 7
 ****************************/
#step-7 { background: url(../images/step-7/bg.jpg) no-repeat top center fixed; }
#step-7 .content-text { position: absolute; width: 260px; text-align: center; top: 50%; margin-top: 35px; left: 144px; }
#step-7 .content-text p { text-align: left; font-size: 12px; }
#step-7 .content-text h1 { text-align: left; }

/****************************
 * STEP 8
 ****************************/
#step-8 { background: url(../images/step-8/bg.png) no-repeat top center; overflow: hidden; margin: -66px 0 -140px 0; z-index: 9; height: 800px; }
#step-8 .content-text { position: absolute; width: 370px; text-align: center; top: 50%; margin-top: 30px; left: 552px; z-index: 9; }
#step-8 .content-text p { text-align: left; font-size: 12px; }
#step-8 .content-text h1 { text-align: left; }
#step-8 .content-image { position: absolute; width: 1600px; height: 900px; top: 50%; left: 50%; margin: -450px 0 0 -800px; background: url(../images/step-8/clock.png) no-repeat; }

/****************************
 * STEP 9
 ****************************/
#step-9 { background: url(../images/step-9/bg.jpg) no-repeat top center fixed; overflow: hidden; min-height: 848px; }
#step-9 .content-text { position: absolute; width: 560px; text-align: center; top: 50%; margin-top: 155px; left: 143px; z-index: 9; }
#step-9 .content-text p { text-align: left; font-size: 12px; }
#step-9 .content-text h1 { text-align: left; }

/****************************
 * STEP 10
 ****************************/
#step-10 { background: url(../images/step-10/bg.png) no-repeat top center; overflow: hidden; margin: -100px 0 -150px 0; z-index: 9; height: 830px; }
#step-10 .content-text { position: absolute; width: 610px; height: 100%; text-align: center; top: 50%; left: 187px; z-index: 9; margin-top: 100px; }
#step-10 .content-text p { font-size: 12px; }
#step-10 .content-text h1 span { font-size: 60px; line-height: 70px; letter-spacing: 0; }
#step-10 .content-text h1 small { display: block; margin-top: 15px; }
#step-10 .content-image { position: absolute; width: 1600px; height: 900px; top: 50%; left: 50%; margin: -450px 0 0 -800px; background: url(../images/step-10/clock.png) no-repeat; }

/****************************
 * STEP 11
 ****************************/
#step-11 { background: url(../images/step-11/bg.jpg) no-repeat top center; overflow: hidden; height: 934px; }
#step-11 .content-text { position: absolute; width: 490px; height: 100%; text-align: center; top: 50%; left: 400px; z-index: 9; margin: 140px 0 0 0; }
#step-11 .content-text p { font-size: 12px; }
#step-11 .content-text h1 span { font-size: 60px; line-height: 70px; letter-spacing: 0; }
#step-11 .content-text h1 small { display: block; margin-top: 15px; }
#step-11 .content-image { position: absolute; width: 372px; height: 514px; top: 50%; left: 50%; margin: -301px 0 0 -20px; background: url(../images/step-11/clock.png) no-repeat; }
#step-11 .content-image-dark { position: absolute; width: 372px; height: 514px; top: 50%; left: 50%; margin: -301px 0 0 -20px; background: url(../images/step-11/clock-dark.png) no-repeat; opacity: 0; }

/****************************
 * STEP 12
 ****************************/
#step-12 { background: url(../images/step-12/bg.png) no-repeat top center; overflow: hidden; margin: -50px 0 -130px 0; z-index: 9; }
#step-12 .content-text { position: absolute; width: 520px; text-align: center; top: 50%; left: 50%; z-index: 9; height: 132px; margin: -68px 0 0 -260px; }
#step-12 .content-text p { font-size: 12px; }
#step-12 .content-text h1 span { font-size: 60px; line-height: 70px; letter-spacing: 0; }
#step-12 .content-text h1 small { display: block; margin-top: 15px; }

/****************************
 * STEP 13
 ****************************/
#step-13 { background: url(../images/step-13/bg.jpg) no-repeat top center; overflow: hidden; height: 847px; }
#step-13 .content-text { text-align: center; margin: 167px 0 0 0; }
#step-13 .content-text h1 span { font-size: 55px; line-height: 70px; letter-spacing: 0; }
#step-13 .content-text h1 small { display: block; margin-top: 15px; }

#step-13 #step-13-menu { display: block; background: url(../images/step-13/bg-menu.png) repeat-x center center; width: 583px; height: 28px; margin: 20px auto 0 -290px; z-index: 99; position: absolute; left: 50%; }
#step-13 #step-13-menu li { float: left; margin-right: 69px; }
#step-13 #step-13-menu li a { display: block; width: 28px; height: 28px; background: url(../images/step-13/bt-menu.png) no-repeat right center; }
#step-13 #step-13-menu li.active a { background-position: left center; }
#step-13 #step-13-menu li a span { display: none; }
#step-13 #step-13-menu li:first-child { margin-left: -14px; }
#step-13 #step-13-menu li:last-child { margin-right: -14px; }
#step-13 .step-13-content { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#step-13 .step-13-content .content-text { position: absolute; top: 50%; height: 390px; text-align: left; left: 50%; margin: -105px 0 0 34px; }
#step-13 .step-13-content .content-text .title { color: #ffe368; font-size: 30px; font-family: 'TradeGothicLTExtendedBold'; text-transform: uppercase; }
#step-13 .step-13-content .content-text .clock-features { margin-top: 10px; }
#step-13 .step-13-content .content-text .clock-features li { background: url(../images/step-13/bullet.png) no-repeat 0 6px; padding: 0 0 0 13px; font-size: 12px; width: 360px; line-height: 18px; }
#step-13 .step-13-content .content-image { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

#step-13-left-arrow { float: left; }
#step-13-right-arrow { float: right; }
#step-13-left-arrow, #step-13-right-arrow { margin-top: 210px; }

#step-13-1.step-13-content .content-image { background: url(../images/step-13/product-1/clock.png) no-repeat top center; }

#step-13-2.step-13-content .content-text { margin-top: -65px }
#step-13-2.step-13-content .content-image { background: url(../images/step-13/product-2/clock.png) no-repeat top center; }

#step-13-3.step-13-content .content-text { margin-top: -65px }
#step-13-3.step-13-content .content-image { background: url(../images/step-13/product-3/clock.png) no-repeat top center; }

#step-13-4.step-13-content .content-text { margin-top: -65px }
#step-13-4.step-13-content .content-image { background: url(../images/step-13/product-4/clock.png) no-repeat top center; }

#step-13-5.step-13-content .content-text { margin-top: -60px }
#step-13-5.step-13-content .content-image { background: url(../images/step-13/product-5/clock.png) no-repeat top center; }

#step-13-6.step-13-content .content-text { margin-top: -60px }
#step-13-6.step-13-content .content-image { background: url(../images/step-13/product-6/clock.png) no-repeat top center; }

#step-13-7.step-13-content .content-text { margin-top: -60px }
#step-13-7.step-13-content .content-image { background: url(../images/step-13/product-7/clock.png) no-repeat top center; }

/****************************
 * STEP 14
 ****************************/
#step-14 { background: url(../images/step-14/bg.png) no-repeat top center; overflow: hidden; padding-bottom: 550px; margin: -132px 0 0 0; z-index: 10; }
#step-14 .content-text { position: absolute; text-align: left; top: 50%; left: 408px; z-index: 9; margin: -132px 0 0 -260px; }
#step-14 .content-text p { font-size: 12px; }
#step-14 .content-text h1 span { font-size: 55px; line-height: 70px; letter-spacing: 0; text-align: left; }
#step-14 .content-text h1 small { display: block; margin-top: 15px; }
#step-14 .content-text form { position: relative; }
#step-14 .content-text form fieldset { border: 0; padding: 0; }
#step-14 .content-text form label span { text-transform: uppercase; display: block; border-bottom: solid 1px #ffe368; padding: 0 0 7px 0; margin-bottom: 5px; }
#step-14 .content-text form input[type=text], #step-14 .content-text form input[type=email], #step-14 .content-text form textarea { text-transform: uppercase; color: #ffe368; background-color: #000; border: 0; padding: 11px; font-size: 14px; width: 746px; }
#step-14 .content-text form textarea { resize: none; }
#step-14 .content-text form input[type=submit] { background-color: transparent; border: 0; text-transform: uppercase; font-family: 'AvenirLTStd-Black'; color: #ffe368; font-size: 24px; padding: 0; float: right; }
#step-14 .content-text .footer p.closing { font-size: 22px; text-transform: uppercase; line-height: 40px; text-align: center; width: 100%; margin-top: 80px; padding: 0 0 60px 0; }
#step-14 .content-text .footer a.top { display: block; width: 86px; height: 86px; background: url(../images/step-14/bt-top.png) no-repeat; color: #FFF; text-decoration: none; margin: 0 auto; padding: 106px 0 0 0; }
#step-14 .content-text .footer a.top span { display: block; text-align: center; text-transform: uppercase; font-size: 14px; }
#step-14 .content-text .footer .pull-left a { display: block; background: url(../images/logo-technos.png) no-repeat; width: 166px; height: 50px; }
#step-14 .content-text .footer .pull-left a span { display: none; }
#step-14 .content-text .footer .pull-right { font-size: 12px; margin-top: 17px; }

#step-14 .msg { display: none; position: absolute; top: 50%; left: 50%; width: 370px; height: 100px; margin: -50px 0 0 -185px; background-color: #000; border-top: solid 1px #ffe368; }
#step-14 .msg .close { position: absolute; top: 5px; right: 5px; color: #FFF; display: block; text-decoration: none; font-size: 14px; text-transform: uppercase; }
#step-14 .msg p { font-size: 14px; color: #ffe368; font-family: 'AvenirLTStd-Black'; line-height: 30px; text-align: center; padding: 0 20px; text-transform: uppercase; }

.is-mobile { width: 980px; }
.is-mobile article { background-attachment: scroll !important; }
.is-mobile #step-2 .step-2-video { margin-top: -212px; }
.is-mobile #step-3 .content-text { margin-top: -200px; }
.is-mobile #step-4 .content-text { margin-top: -162px; }
.is-mobile #step-5 .content-text { margin-top: -190px; }
.is-mobile #step-7 .content-text { margin-top: -119px; }
.is-mobile #step-8 .content-text { margin-top: -88px; }
.is-mobile #step-9 .content-text { margin-top: 180px; }