/* Spokes - Oak Cliff Pedicabs - 2013 ===================================================================================== Site created by MonkeyTag - www.monkeytag.com Artwork by Gary Pedroza Front-end and back-end development by Anthony Bearden =====================================================================================*/ /* * TABLE OF CONTENTS - SCENES.CSS * * @Main * @Pedicabs? * @Spokes? * @OakCliff? * @Routes? * @Scorchers? * */ article { width:1200px; margin: 0 auto; min-height: 100%; position: relative; } body{ overflow-x: visible; } .mainbg { position: absolute; width: 100%; height: 2000px; top: 0; left: 0;} .bg, .bg1, .bg2, .bg3, .bg4, .bg5, .bg6, .bg7, .bg8, .bg9, .bg10, .bg11, .bg12, .bg13, .bg14{ position: absolute; height: 2000px; width: 1900px; top: 0; left: 0;} #scene1, #scene2, #scene3, #scene4, #scene5, #scene6{ height: 2000px; width: 100%; margin: 0; overflow: hidden;} /*---------------------------------------------------- @Main Scene -----------------------------------------------------*/ #scene1{height: 1100px;} #scene1 .events{margin:335px 0 0 630px; position: relative; width:465px} #scene1 ul{margin-left: 20px; list-style-type: disc; letter-spacing: 1px} #scene1 li{padding:7px 0; font-size: 19px} #scene1 .mainbg {height:1100px; background: url(../images/click-reveal-images/click-reveal-img/bg_home.jpg) 50% 70px no-repeat } #scene1 .bg1{background: url(../images/click-reveal-images/click-reveal-img/light_poles.png) 50% 50% no-repeat fixed;} #scene1 .bg2{background: url(../images/click-reveal-images/click-reveal-img/pedicab_rt_side.png) -27% 742px no-repeat fixed;} #scene1 .bg3{background: url(../images/click-reveal-images/click-reveal-img/pedicab_lt_side.png) 135% 481px no-repeat fixed;} #scene1 .bg4{background: url(../images/click-reveal-images/click-reveal-img/pedicab_rt_side-lights.png) -27% 742px no-repeat fixed;} #scene1 .bg5{background: url(../images/click-reveal-images/click-reveal-img/pedicab_lt_side-lights.png) 135% 481px no-repeat fixed;} /*---------------------------------------------------- @Pedicabs? Scene -----------------------------------------------------*/ #scene2 .mainbg {background: url(../images/click-reveal-img/bg_pedicabs.jpg) 50% -284px no-repeat fixed;} #scene2 .bg1{background: url(../images/click-reveal-img/sun.png) 50% 360px no-repeat fixed;} #scene2 .bg2{background: url(../images/click-reveal-img/cloud1.png) 50% 360px no-repeat fixed;} #scene2 .bg3{background: url(../images/click-reveal-img/cloud2.png) 50% 360px no-repeat fixed;} #scene2 .bg4{background: url(../images/click-reveal-img/cloud3.png) 50% 360px no-repeat fixed;} #scene2 .bg5{background: url(../images/click-reveal-img/cloud4.png) 50% 360px no-repeat fixed;} #scene2 .bg6{background: url(../images/click-reveal-img/bird.png) 59% 616px no-repeat fixed;} #scene2 .bg7{background: url(../images/click-reveal-img/hero.png) 50% 360px no-repeat fixed;} #scene2 .bg8{background: url(../images/click-reveal-img/hero_shadow.png) 50% 360px no-repeat fixed;} #scene2 .bg9{background: url(../images/click-reveal-img/pedicab.png) 50% 360px no-repeat fixed;} #scene2 .bg10{background: url(../images/click-reveal-img/pedicab_light.png) 50% 360px no-repeat fixed;} #scene2 .text h1 p{margin-bottom: 40px;/*text-shadow: 1px 1px 3px #2b8093;*/} #scene2 .desc {background:#42a8bf ;color:white;outline-color:#42a8bf ;border-color: white} /*---------------------------------------------------- @Spokes? Scene -----------------------------------------------------*/ #scene3 .mainbg {background: url(../images/click-reveal-img/bg_spokes.jpg) 50% 24px no-repeat fixed;} #scene3 .bg1{background: url(../images/click-reveal-img/justin.png) 50% 360px no-repeat fixed;} #scene3 .bg2{background: url(../images/click-reveal-img/ripples_back.png) 50% 340px no-repeat fixed;} #scene3 .bg3{background: url(../images/click-reveal-img/ripples_front.png) 50% 380px no-repeat fixed;} #scene3 .bg4, #scene3 .bg5{background: url(../images/click-reveal-img/pedicabs_dual.png) 50% 240px no-repeat fixed;} #scene3 .bg6{background: url(../images/click-reveal-img/cloud5.png) 50% 360px no-repeat fixed;} #scene3 .bg7{background: url(../images/click-reveal-img/cloud6.png) 50% 360px no-repeat fixed;} #scene3 .bg8{background: url(../images/click-reveal-img/cloud7.png) 50% 360px no-repeat fixed;} #scene3 .bg9{background: url(../images/click-reveal-img/spokes_bridge.png) 50% 24px no-repeat fixed;} #scene3 .bg10{background: url(../images/click-reveal-img/sun-smll.png) 50% 24px no-repeat fixed;} #scene3 .bg11{background: url(../images/click-reveal-img/sun-reflect.png) 50% 24px no-repeat fixed;} #scene3 .bg12{background: url(../images/click-reveal-img/spokes_bridge2.png) 50% 24px no-repeat fixed;} #scene3 .text h1 p{margin-bottom: 40px;/*text-shadow: 1px 1px 3px #8e582d;*/} #scene3 .desc {background:#362312 ;outline-color:#362312 ;border-color: white} #scene3 .desc p, #scene3 .text a{color:white !important} #scene3 .text a{border-bottom: 1px dotted white;} /*---------------------------------------------------- @OakCliff Scene -----------------------------------------------------*/ #scene4{height: 5895px;} #scene4 article{width:100%} #scene4 .bg1 { height:100%; width:100%; /* z-index: 997; */ transition: all 0.2s; background-size: 100px 100px; background-repeat: no-repeat; position: absolute; -webkit-transition: background-color 0.4s ease; -moz-transition: background-color 0.4s ease; -o-transition: background-color 0.4s ease; transition: background-color 0.4s ease; background-size:5% !important; } #scene4 .bg1.bg1_2 {height:100%;width:100%;background: url(../images/click-reveal-img/character1_2.png) 75% 10px no-repeat fixed; transition: all 0.2s} #scene4 .bg3 {top:1896px;height:200px;width:100%;background: url(../images/click-reveal-img/hole-layover.png) 50% 0 no-repeat;} #scene4 .bg4 {top:2146px;height:7px;width:100%;background: url(../images/click-reveal-img/golf-ball.png) 50% 0 no-repeat;} #scene4 .bg5 {top:1350px;height:291px;width:100%;background: url(../images/click-reveal-img/bg_bike.png) 50% 0 no-repeat;z-index: 998} #scene4 button.btn1, #scene4 button.btn1:hover, #scene4 button.btn1:active{top:2145px;right:-80px; height:32px; width: 70px;position: absolute; border:0; padding: 0;cursor: pointer; background: transparent } #scene4 button.btn1:hover, #scene4 button.btn1:active{background-position: -67px 0} #scene4 .content{width: 488px;} #scene4 .content.kessler, #scene4 .content.oddfellows, #scene4 .content.mural, #scene4 .content.texas, #scene4 .content.enos{display: none; } #scene4 .content.oddfellows, #scene4 .content.texas{-webkit-transform-origin:100% 0; -moz-transform-origin:100% 0; margin-left: -490px; border-radius: 5px} #scene4 .callout {width:0} #scene4 .callout.kessler{top: 70px;left: 317px;} /*#scene4 .callout.oddfellows{top: 307px;left: 501px;}*/ #scene4 .callout.mural{top: 2000px;left: 126px;} #scene4 .callout.texas{top: 3000px;left: 780px;} #scene4 .callout.enos{top: 3050px;left: 180px;} #scene4 .btn-oc{background: #BEC831;height: 33px; width:95px; display: block; cursor: pointer;margin:5px} #scene4 .btn-oc:hover{background: #d2da52} #scene4 .btn-oc p{padding:5px 0; text-align: center; } /*---------------------------------------------------- @OakCliff Scene -----------------------------------------------------*/ #scene4_2{height: 2010px;} #scene4_2 article{width:980px} #scene4_2 .mainbg {height:1997px; background: url(../images/click-reveal-img/scene2.png) 50% 0px no-repeat; background-size:100%} #scene4_2 .bg1 {height:3680px;width:100%;background: url(../images/click-reveal-img/character1.png) 23% 10px no-repeat fixed;z-index: 997} #scene4_2 .bg3 {top:1896px;height:200px;width:100%;background: url(../images/click-reveal-img/hole-layover.png) 50% 0 no-repeat;} #scene4_2 .bg4 {top:2146px;height:7px;width:100%;background: url(../images/click-reveal-img/golf-ball.png) 50% 0 no-repeat;} #scene4_2 .bg5 {top:1350px;height:291px;width:100%;background: url(../images/click-reveal-img/bg_bike.png) 50% 0 no-repeat;z-index: 998} #scene4_2 button.btn1, #scene4 button.btn1:hover, #scene4 button.btn1:active{top:2145px;right:-80px; height:32px; width: 70px;position: absolute; border:0; padding: 0;cursor: pointer; background: transparent } #scene4_2 button.btn1:hover, #scene4 button.btn1:active{background-position: -67px 0} #scene4_2 .content{margin-top: -125px; width: 555px;} #scene4_2 .content.kessler, #scene4 .content.oddfellows, #scene4 .content.mural, #scene4 .content.texas, #scene4 .content.enos{display: none; } #scene4_2 .content.oddfellows, #scene4 .content.texas{-webkit-transform-origin:100% 0; -moz-transform-origin:100% 0; margin-left: -575px} #scene4_2 .callout {width:0} #scene4_2 .callout.kessler{top: 500px;left: 50px;} #scene4_2 .callout.oddfellows{top: 750px;left: 790px;} #scene4_2 .callout.mural{top: 2000px;left: 190px;} #scene4_2 .callout.texas{top: 3000px;left: 780px;} #scene4_2 .callout.enos{top: 3050px;left: 180px;} #scene4_2 .content h3, #scene4_2 .content p.para{width:550px; margin:5px 5px 18px} #scene4_2 .btn-oc{background: #BEC831;height: 33px; width:95px; display: block; cursor: pointer;margin:5px} #scene4_2 .btn-oc:hover{background: #d2da52} #scene4_2 .btn-oc p{padding:5px 0; text-align: center; } /*---------------------------------------------------- @Routes? Scene -----------------------------------------------------*/ #scene5{height: 1100px;background: #404040} #scene5 article{width:980px;min-height:1025px} #scene5 .mainbg {height:1025px; background: url(../images/click-reveal-img/bg_ocmap.jpg) 50% 0px no-repeat} #scene5 .bg1{height: 1025px;width:100%;background: url(../images/click-reveal-img/dash.png) 50% 105px no-repeat} #scene5 .content{margin-top: -125px;} #scene5 .callout .content{-webkit-transform-origin: 0 0;-webkit-transform: scale3d(0,0,0);-webkit-transition: .3s;-moz-transform-origin: 0 0;-moz-transform: scale(0,0);-moz-transition: .3s;} #scene5 .callout:hover .content {-webkit-transform: scale3d(1,1,1);-moz-transform: scale(1,1)} #scene5 .callout.kessler{top: 747px;left: 90px; z-index: 999} #scene5 .callout.winery{top: 747px;left: 295px;} #scene5 .callout.bolsa{top: 747px;left: 500px;} #scene5 .callout.lockhart{top: 747px;left: 630px;z-index: 999} #scene5 .callout.whitehall{top: 747px;left: 680px;z-index: 998} #scene5 .callout.enos{top: 787px;left: 630px;z-index: 1009} #scene5 .callout.lucia{top: 817px;left: 590px;z-index: 999} #scene5 .callout.hunky{top: 837px;left: 635px;z-index: 996} #scene5 .callout.hattie{top: 777px;left: 670px;z-index: 997} #scene5 .callout.oddfellow{top: 777px;left: 710px;z-index: 996} #scene5 .callout.texas{top: 1020px;left: 710px;} #scene5 .callout.bee{top: 750px;left: 800px;z-index: 996} #scene5 .callout.cookie{top: 345px;left: 855px;z-index: 999} #scene5 .callout.tamale{top: 375px;left: 855px;z-index: 998} #scene5 .callout.spiral{top: 405px;left: 855px;z-index: 997} #scene5 .btn-map{background: #BEC831; height:75px; width:300px; display: block; margin: 0 auto; cursor: pointer; position: relative} #scene5 .btn-map p{text-align: center;padding: 25px 0} #scene5 .btn-map:hover{opacity:0.8;filter:alpha(opacity=80); /* For IE8 and earlier */} /*---------------------------------------------------- @Scorchers? Scene -----------------------------------------------------*/ #scene6{height: 1200px;} #scene6 .mainbg {background: url(../images/click-reveal-img/bg_scorchers.jpg) 50% 24px no-repeat fixed;} #scene6 .bg1{background: url(../images/click-reveal-img/scorcher.png) 50% 50% no-repeat;position: absolute; margin:0 auto;top: -420px;width:100%; } #scene6 .titles{width:100%; height: 300px; margin: 0 auto; position: absolute;top: 150px;left: 0;} #scene6 .titles ul{width:750px;margin: 0 auto;} #scene6 .titles .quotes li p{font-family: 'Imp-Caps', "Times New Roman",Georgia,Serif; font-size: 52px; color: #fab14d; text-align: center; line-height: 50px} #scene6 .driver {position: absolute; width: 100%; top: 850px; text-align: center} #scene6 .app{position: absolute;width:100%;margin:0 auto; top:950px; z-index: 999} #scene6 .btn-driver{background: #BEC831; height:50px; width:250px; cursor: pointer; margin: 0 auto;display: block;position: relative} #scene6 .btn-driver p{text-align: center; padding: 15px 0 18px; font-size: 24px} #scene6 .btn-driver:hover{opacity:0.8;filter:alpha(opacity=80); /* For IE8 and earlier */}