/* Clear Fix */ .clearfix:before, .clearfix:after { content: ""; display: table;} .clearfix:after { clear: both;} .clearfix { zoom: 1;} /* For IE 6/7 (trigger hasLayout) */ /* Fonts */ @import url("http://fast.fonts.com/t/1.css?apiType=css&projectid=f9b4f1cb-13eb-4b3e-8fa8-a4ed456fd264"); @font-face{ font-family:"BYHeadline01"; /* ITCLubalinGraphBold */ src:url("/assets/fonts/lubalin-bold/a713a064-6a36-4185-b6d2-fa8ff6008e0c.eot?#iefix"); src:url("/assets/fonts/lubalin-bold/a713a064-6a36-4185-b6d2-fa8ff6008e0c.eot?#iefix") format("eot"), url("/assets/fonts/lubalin-bold/c59e9063-02de-43e5-b513-ef487a74fd02.woff") format("woff"), url("/assets/fonts/lubalin-bold/e22e79cb-b7e6-4025-b43e-4d4a54936160.ttf") format("truetype"), url("/assets/fonts/lubalin-bold/3877ab32-3fc7-44b0-9b48-1788b2a3e059.svg#3877ab32-3fc7-44b0-9b48-1788b2a3e059") format("svg"); font-weight : normal; font-style : normal; } @font-face{ font-family:"BYHeadline02"; /* ITCLubalinGraphDemi */ src:url("/assets/fonts/lubalin-demi/cc99e9f2-4765-47e8-8e9e-f8afa7f45aa2.eot?#iefix"); src:url("/assets/fonts/lubalin-demi/cc99e9f2-4765-47e8-8e9e-f8afa7f45aa2.eot?#iefix") format("eot"), url("/assets/fonts/lubalin-demi/59400685-dc94-4bda-8b78-cceef07d0471.woff") format("woff"), url("/assets/fonts/lubalin-demi/d8199ae6-f15d-4aad-b2c6-4fb6aa728384.ttf") format("truetype"), url("/assets/fonts/lubalin-demi/33772b07-3175-4e1c-9aca-009627307668.svg#33772b07-3175-4e1c-9aca-009627307668") format("svg"); font-weight : normal; font-style : normal; } #modal-master, #flash-message {display: none} /******************* Main Layout *******************/ html { overflow-x : hidden; background-color : #FFFFFF; max-width : 1600px; margin : 0px auto; } body { overflow : hidden; margin : 0px; line-height : 1.2; font-size : 1.0em; letter-spacing : normal; height : 0px; } div { -moz-user-select : none; -webkit-user-select : none; } img { -moz-user-select : none; -webkit-user-select : none; } div.marker { z-index : 1; position : absolute; } html.csstransitions div.information { -o-transition : 0s linear; -moz-transition : 0s linear; -webkit-transition : 0s linear; transition : 0s linear; } div.information { z-index : 15; position : absolute; margin : 0px 0px 0px -190px; color : #FFFFFF; width : 380px; } div.information h1 { margin : 0px 0px 15px 0px; font-family : BYHeadline01, serif; font-weight : normal; font-size : 46px; line-height : 0.95; } div.information p { margin : 0px 0px 15px 0px; font-family : Helvetica, Arial, sans-serif; font-weight : normal; font-size : 18px; } html.csstransitions div.information_note { -o-transition : 0s linear; -moz-transition : 0s linear; -webkit-transition : 0s linear; transition : 0s linear; } div.information_note { z-index : 10; position : absolute; opacity : 0.65; background-color : #444444; border-radius : 150px; color : #FFFFFF; width : 300px; height : 300px; } div.information_note h2 { margin : 80px auto 5px auto; font-family : BYHeadline01, serif; font-weight : normal; font-size : 45px; line-height : 0.95; width : 200px; } div.information_note p { margin : 0px auto 5px auto; font-family : BYHeadline02, serif; font-weight : normal; font-size : 18px; line-height : 1.3; width : 185px; } html.csstransitions div.image { -o-transition : 0s linear; -moz-transition : 0s linear; -webkit-transition : 0s linear; transition : 0s linear; } div.image { -moz-box-shadow : 3px 3px 10px 3px #888888; -webkit-box-shadow : 3px 3px 10px 3px #888888; box-shadow : 3px 3px 10px 3px #888888; z-index : 10; position : absolute; } html.csstransitions div.image_note { -o-transition : 0s linear; -moz-transition : 0s linear; -webkit-transition : 0s linear; transition : 0s linear; } div.image_note { -moz-box-shadow : 3px 3px 10px 3px #888888; -webkit-box-shadow : 3px 3px 10px 3px #888888; box-shadow : 3px 3px 10px 3px #888888; z-index : 15; position : absolute; opacity : 0.85; background-color : #FFFFFF; padding : 10px; } div.image_note h2 { margin : 0px 0px 5px 0px; font-family : Helvetica, Arial, sans-serif; font-weight : bold; font-size : 18px; } div.image_note p { margin : 0px auto 5px auto; font-family : Helvetica, Arial, sans-serif; font-weight : normal; font-size : 14px; line-height : 1.3; } /******************* Page Index *******************/ @keyframes page_scroll_down { 0% { top:15px;} 30% { top:5px;} 38% { top:5px;} 45% { top:15px;} 50% { top:11px;} 55% { top:15px;} 60% { top:13px;} 65% { top:15px;} 100% { top:15px;} } @-o-keyframes page_scroll_down { 0% { top:15px;} 30% { top:5px;} 38% { top:5px;} 45% { top:15px;} 50% { top:11px;} 55% { top:15px;} 60% { top:13px;} 65% { top:15px;} 100% { top:15px;} } @-moz-keyframes page_scroll_down { 0% { top:15px;} 30% { top:5px;} 38% { top:5px;} 45% { top:15px;} 50% { top:11px;} 55% { top:15px;} 60% { top:13px;} 65% { top:15px;} 100% { top:15px;} } @-webkit-keyframes page_scroll_down { 0% { top:15px;} 30% { top:5px;} 38% { top:5px;} 45% { top:15px;} 50% { top:11px;} 55% { top:15px;} 60% { top:13px;} 65% { top:15px;} 100% { top:15px;} } div.page_scrollbar { display : none; z-index : 500; position : fixed; top : 0px; right : 0px; padding : 2px 2px 2px 15px; width : 15px; height : 100%; } div.page_scrollbar div.scroll_block { opacity : 0.7; background-color : #AAAAAA; margin : 0px; border-radius : 7px; width : 15px; height : 40px; } html.csstransitions div.page_scrollnotice { -o-transition : 1s linear; -moz-transition : 1s linear; -webkit-transition : 1s linear; transition : 1s linear; } div.page_scrollnotice { visibility : hidden; opacity : 0; z-index : 300; position : fixed; bottom : -120px; right : 20px; width : 180px; height : 180px; } div.page_scrollnotice div { -o-transform : rotate(-15deg); -moz-transform : rotate(-15deg); -ms-transform : rotate(-15deg); -webkit-transform : rotate(-15deg); transform : rotate(-15deg); z-index : 0; position : absolute; background : #000000; width : 180px; height : 180px; } div.page_scrollnotice p { z-index : 1; position : relative; top : 35px; left : 10px; margin : 0px; padding : 0px; font-family : BYHeadline02, serif; font-weight : normal; font-size : 16px; line-height : 1.0; color : #FEED07; } div.page_scrollnotice img { z-index : 2; position : relative; top : 15px; right : -120px; background : transparent url('/assets/images/green/00/scroll_down.png') no-repeat center top; margin : 0px; padding : 0px; width : 16px; height : 21px; } html.cssanimations div.page_scrollnotice img { animation:page_scroll_down 1.5s linear 0s infinite; -o-animation:page_scroll_down 1.5s linear 0s infinite; -moz-animation:page_scroll_down 1.5s linear 0s infinite; -webkit-animation:page_scroll_down 1.5s linear 0s infinite;} div.page_legend { z-index : 500; position : fixed; top : 50%; right : 40px; margin : -250px 0px 0px 0px; width : 250px; } html.csstransitions div.page_legend div.legend_item div.item_text { -o-transition : 0.5s linear; -moz-transition : 0.5s linear; -webkit-transition : 0.5s linear; transition : 0.5s linear; } div.page_legend div.legend_item div.item_text { opacity : 0; visibility : hidden; position : absolute; right : 40px; background-color : #FEED07; margin : -4px 0px 0px 0px; padding : 5px 5px 5px 5px; font-family : BYHeadline02, serif; font-weight : normal; font-size : 16px; color : #333333; } div.page_legend div.legend_item:hover div.item_text { opacity : 1; visibility : visible; } div.page_legend div.active div.item_text { opacity : 1; visibility : visible; } div.page_legend div.item_marker { opacity : 0.6; float : right; margin : 0px 0px 25px 0px; border-radius : 15px; width : 20px; height : 20px; } div.page_legend div.disabled div.item_marker { background-color:#AAAAAA;} div.page_legend div.enabled div.item_marker { background-color:#AAAAAA;} div.page_legend div.active div.item_marker { background-color:#FEED07; opacity:1.0;} div.page_legend div a { display : inline-block; border : none; width : 20px; height : 20px; } div.page_legend div.disabled a:hover { cursor:default;} div.page_legend div.home img { position : relative; left : -6px; border : none; } /******************* Page 00 *******************/ div.page_00 { position : relative; background : transparent url('/assets/images/green/00/background_main.png') no-repeat center top; height : 1100px; } div.page_00 div.background_cloud { z-index : 3; position : absolute; top : 1100px; top : 800px; right : 0px; } div.page_00 div.loading { z-index : 10; position : absolute; top : 250px; left : 50%; margin : 0px 0px 0px -130px; width : 259px; left : 50%; margin : 0px 0px 0px -250px; text-align : center; width : 500px; height : 69px; } div.page_00 div.loading div.loading_image { float : left; width : 242px; } div.page_00 div.loading div.loading_text { margin : 15px 0px 0px 0px; color : #000000; width : 130px; float : right; margin : 0px; width : 258px; } div.page_00 div.loading div.loading_text div.text_progress { opacity : 1; margin : 5px 0px 10px 0px; font-family : BYHeadline01, serif; font-size : 40px; color : #000000; text-shadow : none; } div.page_00 div.loading div.loading_text div.text_information { opacity : 1; margin : 5px 0px 10px 0px; font-family : Helvetica, Arial, serif; font-size : 20px; color : #000000; text-shadow : none; } div.page_00 div.loading div.loading_text div.text_information div { margin : 5px 0px 10px 0px; } html.csstransitions div.page_00 div.loading div.loading_text div.text_hide { -o-transition : visibility 0s linear 1s, margin 0.5s linear 0.5s, opacity 0.5s linear 0.5s, color 0.5s linear 0s, text-shadow 1s linear; -moz-transition : visibility 0s linear 1s, margin 0.5s linear 0.5s, opacity 0.5s linear 0.5s, color 0.5s linear 0s, text-shadow 1s linear; -webkit-transition : visibility 0s linear 1s, margin 0.5s linear 0.5s, opacity 0.5s linear 0.5s, color 0.5s linear 0s, text-shadow 1s linear; transition : visibility 0s linear 1s, margin 0.5s linear 0.5s, opacity 0.5s linear 0.5s, color 0.5s linear 0s, text-shadow 1s linear; } div.page_00 div.loading div.loading_text div.text_hide { visibility : hidden; opacity : 0; margin-top : 0px; color : transparent; text-shadow : 0 0 10px rgba(0,0,0,0.5); } html.csstransitions div.page_00 div.loading div.loading_text div.text_show { -o-transition : visibility 0s linear 0s, margin 0.5s linear 0.5s, opacity 0.5s linear 0.5s, color 0.5s linear 0s, text-shadow 1s linear; -moz-transition : visibility 0s linear 0s, margin 0.5s linear 0.5s, opacity 0.5s linear 0.5s, color 0.5s linear 0s, text-shadow 1s linear; -webkit-transition : visibility 0s linear 0s, margin 0.5s linear 0.5s, opacity 0.5s linear 0.5s, color 0.5s linear 0s, text-shadow 1s linear; transition : visibility 0s linear 0s, margin 0.5s linear 0.5s, opacity 0.5s linear 0.5s, color 0.5s linear 0s, text-shadow 1s linear; } div.page_00 div.loading div.loading_text div.text_show { visibility : visible; opacity : 1; margin-top : 5px; color : #000000; text-shadow : none; } div.page_00 div.loading div.loading_text div.text_scrollnotice { visibility : hidden; opacity : 0; background-color : #FFFFFF; margin : 20px auto 0px auto; border-radius : 70px; width : 140px; height : 140px; } div.page_00 div.loading div.loading_text div.text_scrollnotice p { margin : 0px auto; padding : 30px 0px 10px 0px; font-family : Helvetica, Arial, sans-serif; font-size : 14px; font-weight : bold; text-transform : uppercase; width : 100px; } div.page_00 div.loading div.loading_text div.text_scrollnotice img { position : relative; top : 15px; left : 0px; background : transparent url('/assets/images/green/00/scroll_down_alt.png') no-repeat center top; margin : 0px; padding : 0px; width : 16px; height : 21px; } html.cssanimations div.text_scrollnotice img { animation:page_scroll_down 1.5s linear 0s infinite; -o-animation:page_scroll_down 1.5s linear 0s infinite; -moz-animation:page_scroll_down 1.5s linear 0s infinite; -webkit-animation:page_scroll_down 1.5s linear 0s infinite;} /******************* Page 01 *******************/ div.page_01 { position : relative; background : transparent url('/assets/images/green/01/background_main.png') repeat-y center top; height : 1900px; } div.page_01 div.marker { top:0px; left:0px;} div.page_01 div.background { overflow : visible; z-index : 1; position : absolute; background : transparent url('/assets/images/green/01/background.png') no-repeat center top; width : 100%; height : 880px; } html.csstransitions div.page_01 div.background_birds { -o-transition : 0s linear; -moz-transition : 0s linear; -webkit-transition : 0s linear; transition : 0s linear; } div.page_01 div.background_birds { z-index : 3; position : relative; margin : 0px 0px 0px 0px; width : 100px; height : 100px; } div.page_01 div.background_birds img { position : absolute; } div.page_01 div.background_birds img.bird_01 { left:0px; top:0px;} div.page_01 div.background_birds img.bird_02 { left:90px; top:-130px;} div.page_01 div.background_birds img.bird_03 { left:170px; top:40px;} div.page_01 div.background_clouds { overflow : visible; z-index : 3; position : absolute; } html.csstransitions div.page_01 div.background_clouds img { -o-transition : 0s linear; -moz-transition : 0s linear; -webkit-transition : 0s linear; transition : 0s linear; } div.page_01 div.background_clouds img { position : relative; top : 150px; left : -400px; } div.page_01 div.information01 { z-index : 10; top : 500px; left : 48%; margin : 0px 0px 0px -260px; color : #000000; width : 520px; } div.page_01 div.information01 h1 { font-size : 65px; } div.page_01 div.cloud_container { position : absolute; } html.csstransitions div.page_01 img.cloud_left { -o-transition : 0s linear; -moz-transition : 0s linear; -webkit-transition : 0s linear; transition : 0s linear; } div.page_01 img.cloud_left { z-index : 5; position : relative; top : 400px; left : 0px; } html.csstransitions div.page_01 img.cloud_right { -o-transition : 0s linear; -moz-transition : 0s linear; -webkit-transition : 0s linear; transition : 0s linear; } div.page_01 img.cloud_right { z-index : 3; position : relative; top : 330px; right : -400px; } html.csstransitions div.page_01 div.logo_container { -o-transition : 0s linear; -moz-transition : 0s linear; -webkit-transition : 0s linear; transition : 0s linear; } div.page_01 div.logo_container { z-index : 10; position : absolute; top : 800px; left : 50%; margin-left : -380px; } div.page_01 div.logo_container img { margin : 0px 100px 0px 0px; } div.page_01 div.logo_container img.logo03 { margin-right : 0px; } @media only screen and (max-width : 975px) { div.page_01 div.logo_container { margin-left: -260px;} div.page_01 div.logo_container img { margin: 0px 50px 0px 0px;} div.page_01 div.logo_container img.logo01 { width: 120px;} div.page_01 div.logo_container img.logo02 { width: 135px;} div.page_01 div.logo_container img.logo03 { width: 158px;} } /******************* Page 02 *******************/ html.csstransitions div.page_02 { -o-transition : 0s linear; -moz-transition : 0s linear; -webkit-transition : 0s linear; transition : 0s linear; } div.page_02 { position : relative; background : transparent url('/assets/images/green/02/background_tarmac.jpg') repeat-y center top; height : 470px; } div.page_02 div.marker { top:-1000px; left:0px;} div.page_02 div.background { z-index : 1; position : absolute; top : -1000px; background : transparent url('/assets/images/green/02/background_sky_main.png') repeat-y center top; width : 100%; height : 1000px; } div.page_02 div.background_sun { overflow : visible; z-index : 2; position : absolute; } html.csstransitions div.page_02 div.background_sun img { -o-transition : 0s linear; -moz-transition : 0s linear; -webkit-transition : 0s linear; transition : 0s linear; } div.page_02 div.background_sun img { position : relative; top : -1430px; width : 1600px; } div.page_02 div.background_city { z-index : 1; position : absolute; top : -300px; background : transparent url('/assets/images/green/02/background_city.png') no-repeat center top; width : 100%; height : 280px; } div.page_02 div.information01 { top : -600px; left : 45%; margin : 0px 0px 0px -260px; color : #000000; width : 520px; } div.page_02 div.information_note01 { z-index : 10; top : -500px; right : 10%; background-color : #444444; border-radius : 150px; width : 300px; height : 300px; } div.page_02 div.information_note01 h2 { margin : 80px auto 5px auto; width : 222px; } div.page_02 div.information_note01 p { margin : 0px auto 5px auto; width : 210px; } div.page_02 div.image01 { -o-transform : rotate(-10deg); -moz-transform : rotate(-10deg); -ms-transform : rotate(-10deg); -webkit-transform : rotate(-10deg); transform : rotate(-10deg); top : 0px; left : 35%; margin : 0px 0px 0px -260px; } div.page_02 div.image01_note { top : 270px; left : 50%; margin : 0px 0px 0px -125px; width : 230px; } div.page_02 div.solarpanels { z-index : 5; position : absolute; top : -125px; } html.csstransitions div.page_02 div.solarpanels img { -o-transition : 0s linear; -moz-transition : 0s linear; -webkit-transition : 0s linear; transition : 0s linear; } div.page_02 div.solarpanels img { position : relative; left : 50%; margin : 0px 0px 0px -800px; } div.page_02 div.solarpanels img#page02_solarback { top: 90px;} div.page_02 div.solarpanels img#page02_solarmiddle01 { top: 80px;} div.page_02 div.solarpanels img#page02_solarmiddle02 { top: 70px;} div.page_02 div.solarpanels img#page02_solarfront { top: 20px;} /******************* Page 03 *******************/ @keyframes page03_turbine_on { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} } @keyframes page03_turbine_sway { 0% { transform: rotate(0deg);} 100% { transform: rotate(30deg);} } @-o-keyframes page03_turbine_on { 0% { -o-transform: rotate(0deg);} 100% { -o-transform: rotate(360deg);} } @-o-keyframes page03_turbine_sway { 0% { -o-transform: rotate(0deg);} 100% { -o-transform: rotate(30deg);} } @-moz-keyframes page03_turbine_on { 0% { -moz-transform: rotate(0deg);} 100% { -moz-transform: rotate(360deg);} } @-moz-keyframes page03_turbine_sway { 0% { -moz-transform: rotate(0deg);} 100% { -moz-transform: rotate(30deg);} } @-webkit-keyframes page03_turbine_on { 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);} } @-webkit-keyframes page03_turbine_sway { 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(30deg);} } div.page_03 { position : relative; background : transparent url('/assets/images/green/03/background_main.jpg') no-repeat center top; height : 1250px; } div.page_03 div.marker { top:0px; left:0px;} div.page_03 div.background_top { z-index : 6; position : absolute; top : -79px; background : transparent url('/assets/images/green/03/background_top.png') repeat-x left top; width : 100%; height : 80px; } div.page_03 div.background_grass { z-index : 3; position : absolute; top : 1200px; width : 1600px; } html.csstransitions div.page_03 div.background_grass { -o-transition : 0s linear; -moz-transition : 0s linear; -webkit-transition : 0s linear; transition : 0s linear; } div.page_03 div#page03_grassback { top: 1150px; z-index: 3;} div.page_03 div#page03_grassmiddle01 { top: 1185px; z-index: 5;} div.page_03 div#page03_grassmiddle02 { top: 1230px; z-index: 7;} div.page_03 div#page03_grassfront { top: 1275px; z-index: 9;} div.page_03 div.background_grass img { position : relative; left : 50%; margin : 0px 0px 0px -800px; } div.page_03 div.information01 { top : 300px; left : 35%; margin : 0px 0px 0px -190px; color : #000000; width : 380px; } div.page_03 div.image01 { -o-transform : rotate(-10deg); -moz-transform : rotate(-10deg); -ms-transform : rotate(-10deg); -webkit-transform : rotate(-10deg); transform : rotate(-10deg); top : 700px; left : 25%; margin : 0px 0px 0px -180px; } div.page_03 div.image01_note { top : 800px; left : 40%; margin : 0px 0px 0px -125px; width : 230px; } div.page_03 div.turbine01 { z-index : 6; position : absolute; top : 420px; right : 45%; } div.page_03 div.turbine01_mast_shadow { z-index: 2;} div.page_03 div.turbine01_propellor_shadow { z-index: 2;} div.page_03 div.turbine01_mast { z-index: 6;} div.page_03 div.turbine01_propellor { z-index: 6;} div.page_03 div.turbine01_cone { z-index: 7;} div.page_03 div.turbine01 img { position:relative;} div.page_03 div.turbine01_mast_shadow img { margin-top: 40%; left: 130%; height: 707px;} div.page_03 div.turbine01_propellor_shadow img { margin-top: -37%; left: 68%; height: 600px; position: relative; } div.page_03 div.turbine01_mast img { margin-top: 0px; left: 0px; height: 833px;} div.page_03 div.turbine01_propellor img { margin-top: -47%; left: 47%; height: 800px; position: relative; } div.page_03 div.turbine01_cone img { margin-top: -5%; left: -5%; height: 47px;} html.cssanimations body.device_tablet div.page_03 div.turbine01_propellor_shadow img, html.cssanimations body.device_desktop div.page_03 div.turbine01_propellor_shadow img.animate { animation:page03_turbine_on 4.0s linear 0s infinite forwards; -o-animation:page03_turbine_on 4.0s linear 0s infinite forwards; -moz-animation:page03_turbine_on 4.0s linear 0s infinite forwards; -webkit-animation:page03_turbine_on 4.0s linear 0s infinite forwards; } html.cssanimations body.device_tablet div.page_03 div.turbine01_propellor img, html.cssanimations body.device_desktop div.page_03 div.turbine01_propellor img.animate { animation:page03_turbine_on 4.0s linear 0s infinite forwards; -o-animation:page03_turbine_on 4.0s linear 0s infinite forwards; -moz-animation:page03_turbine_on 4.0s linear 0s infinite forwards; -webkit-animation:page03_turbine_on 4.0s linear 0s infinite forwards; } div.page_03 div.turbine02 { z-index : 4; position : absolute; top : 590px; right : 25%; } div.page_03 div.turbine02_mast_shadow { z-index: 2;} div.page_03 div.turbine02_propellor_shadow { z-index: 2;} div.page_03 div.turbine02_mast { z-index: 4;} div.page_03 div.turbine02_propellor { z-index: 4;} div.page_03 div.turbine02_cone { z-index: 5;} div.page_03 div.turbine02 img { position:relative;} div.page_03 div.turbine02_mast_shadow img { margin-top: 40%; left: 130%; height: 565px;} div.page_03 div.turbine02_propellor_shadow img { margin-top: -35%; left: 70%; height: 410px; position: relative; } div.page_03 div.turbine02_mast img { margin-top: 0px; left: 0px; height: 666px;} div.page_03 div.turbine02_propellor img { margin-top: -47%; left: 47%; height: 560px; position: relative; } div.page_03 div.turbine02_cone img { margin-top: -5%; left: -5%; height: 37px;} html.cssanimations body.device_tablet div.page_03 div.turbine02_propellor_shadow img, html.cssanimations body.device_desktop div.page_03 div.turbine02_propellor_shadow img.animate { animation:page03_turbine_on 4.0s linear 0s infinite forwards; -o-animation:page03_turbine_on 4.0s linear 0s infinite forwards; -moz-animation:page03_turbine_on 4.0s linear 0s infinite forwards; -webkit-animation:page03_turbine_on 4.0s linear 0s infinite forwards; } html.cssanimations body.device_tablet div.page_03 div.turbine02_propellor img, html.cssanimations body.device_desktop div.page_03 div.turbine02_propellor img.animate { animation:page03_turbine_on 4.0s linear 0s infinite forwards; -o-animation:page03_turbine_on 4.0s linear 0s infinite forwards; -moz-animation:page03_turbine_on 4.0s linear 0s infinite forwards; -webkit-animation:page03_turbine_on 4.0s linear 0s infinite forwards; } /******************* Page 04 *******************/ @keyframes page04_bubble_flow { 0% { top:0px; margin-left:-255px; opacity:0; background-color:#93BFEC;} 5% { top:100px; margin-left:-252px; opacity:0.6; background-color:#93BFEC;} 6% { top:120px; margin-left:-255px; opacity:0.6; background-color:#93BFEC;} 7% { top:140px; margin-left:-258px; opacity:0.6; background-color:#93BFEC;} 12% { top:240px; margin-left:-255px; opacity:0.6; background-color:#93BFEC;} 13% { top:275px; margin-left:-270px; opacity:0.6; background-color:#93BFEC;} 14% { top:295px; margin-left:-315px; opacity:0.6; background-color:#93BFEC;} 15% { top:298px; margin-left:-355px; opacity:0.6; background-color:#93BFEC;} 16% { top:295px; margin-left:-395px; opacity:0.6; background-color:#93BFEC;} 17% { top:292px; margin-left:-435px; opacity:0.6; background-color:#93BFEC;} 18% { top:295px; margin-left:-475px; opacity:0.6; background-color:#93BFEC;} 19% { top:320px; margin-left:-520px; opacity:0.6; background-color:#93BFEC;} 20% { top:355px; margin-left:-530px; opacity:0.6; background-color:#93BFEC;} 21% { top:395px; margin-left:-520px; opacity:0.6; background-color:#93BFEC;} 22% { top:415px; margin-left:-470px; opacity:0.6; background-color:#93BFEC;} 26% { top:415px; margin-left:-370px; opacity:0.6; background-color:#93BFEC;} 27% { top:435px; margin-left:-330px; opacity:0.6; background-color:#93BFEC;} 28% { top:475px; margin-left:-310px; opacity:0.6; background-color:#93BFEC;} 32% { top:635px; margin-left:-310px; opacity:0.6; background-color:#93BFEC;} 33% { top:675px; margin-left:-300px; opacity:0.6; background-color:#93BFEC;} 34% { top:695px; margin-left:-250px; opacity:0.6; background-color:#93BFEC;} 35% { top:675px; margin-left:-200px; opacity:0.6; background-color:#93BFEC;} 36% { top:635px; margin-left:-190px; opacity:0.6; background-color:#93BFEC;} 40% { top:475px; margin-left:-190px; opacity:0.6; background-color:#AAAAAA;} 41% { top:435px; margin-left:-175px; opacity:0.6; background-color:#AAAAAA;} 42% { top:415px; margin-left:-130px; opacity:0.6; background-color:#AAAAAA;} 43% { top:435px; margin-left:-85px; opacity:0.6; background-color:#AAAAAA;} 44% { top:475px; margin-left:-70px; opacity:0.6; background-color:#AAAAAA;} 48% { top:635px; margin-left:-70px; opacity:0.6; background-color:#AAAAAA;} 49% { top:675px; margin-left:-50px; opacity:0.6; background-color:#AAAAAA;} 50% { top:695px; margin-left:-10px; opacity:0.6; background-color:#AAAAAA;} 51% { top:675px; margin-left:40px; opacity:0.6; background-color:#AAAAAA;} 52% { top:635px; margin-left:55px; opacity:0.6; background-color:#AAAAAA;} 56% { top:475px; margin-left:55px; opacity:0.6; background-color:#AAAAAA;} 57% { top:435px; margin-left:70px; opacity:0.6; background-color:#AAAAAA;} 58% { top:415px; margin-left:115px; opacity:0.6; background-color:#AAAAAA;} 59% { top:435px; margin-left:160px; opacity:0.6; background-color:#AAAAAA;} 60% { top:475px; margin-left:175px; opacity:0.6; background-color:#AAAAAA;} 64% { top:635px; margin-left:175px; opacity:0.6; background-color:#DA7770;} 65% { top:675px; margin-left:190px; opacity:0.6; background-color:#DA7770;} 66% { top:695px; margin-left:235px; opacity:0.6; background-color:#DA7770;} 67% { top:675px; margin-left:280px; opacity:0.6; background-color:#DA7770;} 68% { top:635px; margin-left:295px; opacity:0.6; background-color:#DA7770;} 72% { top:475px; margin-left:295px; opacity:0.6; background-color:#DA7770;} 73% { top:435px; margin-left:310px; opacity:0.6; background-color:#DA7770;} 74% { top:415px; margin-left:360px; opacity:0.6; background-color:#DA7770;} 78% { top:415px; margin-left:455px; opacity:0.6; background-color:#DA7770;} 79% { top:395px; margin-left:505px; opacity:0.6; background-color:#DA7770;} 80% { top:355px; margin-left:515px; opacity:0.6; background-color:#DA7770;} 81% { top:320px; margin-left:505px; opacity:0.6; background-color:#DA7770;} 82% { top:295px; margin-left:455px; opacity:0.6; background-color:#DA7770;} 83% { top:298px; margin-left:415px; opacity:0.6; background-color:#DA7770;} 84% { top:295px; margin-left:375px; opacity:0.6; background-color:#DA7770;} 85% { top:292px; margin-left:335px; opacity:0.6; background-color:#DA7770;} 86% { top:295px; margin-left:300px; opacity:0.6; background-color:#DA7770;} 87% { top:275px; margin-left:260px; opacity:0.6; background-color:#DA7770;} 88% { top:240px; margin-left:240px; opacity:0.6; background-color:#DA7770;} 93% { top:140px; margin-left:237px; opacity:0.6; background-color:#DA7770;} 94% { top:120px; margin-left:240px; opacity:0.6; background-color:#DA7770;} 95% { top:100px; margin-left:243px; opacity:0.6; background-color:#DA7770;} 100% { top:0px; margin-left:240px; opacity:0; background-color:#DA7770;} } @-o-keyframes page04_bubble_flow { 0% { top:0px; margin-left:-255px; opacity:0; background-color:#93BFEC;} 5% { top:100px; margin-left:-252px; opacity:0.6; background-color:#93BFEC;} 6% { top:120px; margin-left:-255px; opacity:0.6; background-color:#93BFEC;} 7% { top:140px; margin-left:-258px; opacity:0.6; background-color:#93BFEC;} 12% { top:240px; margin-left:-255px; opacity:0.6; background-color:#93BFEC;} 13% { top:275px; margin-left:-270px; opacity:0.6; background-color:#93BFEC;} 14% { top:295px; margin-left:-315px; opacity:0.6; background-color:#93BFEC;} 15% { top:298px; margin-left:-355px; opacity:0.6; background-color:#93BFEC;} 16% { top:295px; margin-left:-395px; opacity:0.6; background-color:#93BFEC;} 17% { top:292px; margin-left:-435px; opacity:0.6; background-color:#93BFEC;} 18% { top:295px; margin-left:-475px; opacity:0.6; background-color:#93BFEC;} 19% { top:320px; margin-left:-520px; opacity:0.6; background-color:#93BFEC;} 20% { top:355px; margin-left:-530px; opacity:0.6; background-color:#93BFEC;} 21% { top:395px; margin-left:-520px; opacity:0.6; background-color:#93BFEC;} 22% { top:415px; margin-left:-470px; opacity:0.6; background-color:#93BFEC;} 26% { top:415px; margin-left:-370px; opacity:0.6; background-color:#93BFEC;} 27% { top:435px; margin-left:-330px; opacity:0.6; background-color:#93BFEC;} 28% { top:475px; margin-left:-310px; opacity:0.6; background-color:#93BFEC;} 32% { top:635px; margin-left:-310px; opacity:0.6; background-color:#93BFEC;} 33% { top:675px; margin-left:-300px; opacity:0.6; background-color:#93BFEC;} 34% { top:695px; margin-left:-250px; opacity:0.6; background-color:#93BFEC;} 35% { top:675px; margin-left:-200px; opacity:0.6; background-color:#93BFEC;} 36% { top:635px; margin-left:-190px; opacity:0.6; background-color:#93BFEC;} 40% { top:475px; margin-left:-190px; opacity:0.6; background-color:#AAAAAA;} 41% { top:435px; margin-left:-175px; opacity:0.6; background-color:#AAAAAA;} 42% { top:415px; margin-left:-130px; opacity:0.6; background-color:#AAAAAA;} 43% { top:435px; margin-left:-85px; opacity:0.6; background-color:#AAAAAA;} 44% { top:475px; margin-left:-70px; opacity:0.6; background-color:#AAAAAA;} 48% { top:635px; margin-left:-70px; opacity:0.6; background-color:#AAAAAA;} 49% { top:675px; margin-left:-50px; opacity:0.6; background-color:#AAAAAA;} 50% { top:695px; margin-left:-10px; opacity:0.6; background-color:#AAAAAA;} 51% { top:675px; margin-left:40px; opacity:0.6; background-color:#AAAAAA;} 52% { top:635px; margin-left:55px; opacity:0.6; background-color:#AAAAAA;} 56% { top:475px; margin-left:55px; opacity:0.6; background-color:#AAAAAA;} 57% { top:435px; margin-left:70px; opacity:0.6; background-color:#AAAAAA;} 58% { top:415px; margin-left:115px; opacity:0.6; background-color:#AAAAAA;} 59% { top:435px; margin-left:160px; opacity:0.6; background-color:#AAAAAA;} 60% { top:475px; margin-left:175px; opacity:0.6; background-color:#AAAAAA;} 64% { top:635px; margin-left:175px; opacity:0.6; background-color:#DA7770;} 65% { top:675px; margin-left:190px; opacity:0.6; background-color:#DA7770;} 66% { top:695px; margin-left:235px; opacity:0.6; background-color:#DA7770;} 67% { top:675px; margin-left:280px; opacity:0.6; background-color:#DA7770;} 68% { top:635px; margin-left:295px; opacity:0.6; background-color:#DA7770;} 72% { top:475px; margin-left:295px; opacity:0.6; background-color:#DA7770;} 73% { top:435px; margin-left:310px; opacity:0.6; background-color:#DA7770;} 74% { top:415px; margin-left:360px; opacity:0.6; background-color:#DA7770;} 78% { top:415px; margin-left:455px; opacity:0.6; background-color:#DA7770;} 79% { top:395px; margin-left:505px; opacity:0.6; background-color:#DA7770;} 80% { top:355px; margin-left:515px; opacity:0.6; background-color:#DA7770;} 81% { top:320px; margin-left:505px; opacity:0.6; background-color:#DA7770;} 82% { top:295px; margin-left:455px; opacity:0.6; background-color:#DA7770;} 83% { top:298px; margin-left:415px; opacity:0.6; background-color:#DA7770;} 84% { top:295px; margin-left:375px; opacity:0.6; background-color:#DA7770;} 85% { top:292px; margin-left:335px; opacity:0.6; background-color:#DA7770;} 86% { top:295px; margin-left:300px; opacity:0.6; background-color:#DA7770;} 87% { top:275px; margin-left:260px; opacity:0.6; background-color:#DA7770;} 88% { top:240px; margin-left:240px; opacity:0.6; background-color:#DA7770;} 93% { top:140px; margin-left:237px; opacity:0.6; background-color:#DA7770;} 94% { top:120px; margin-left:240px; opacity:0.6; background-color:#DA7770;} 95% { top:100px; margin-left:243px; opacity:0.6; background-color:#DA7770;} 100% { top:0px; margin-left:240px; opacity:0; background-color:#DA7770;} } @-moz-keyframes page04_bubble_flow { 0% { top:0px; margin-left:-255px; opacity:0; background-color:#93BFEC;} 5% { top:100px; margin-left:-252px; opacity:0.6; background-color:#93BFEC;} 6% { top:120px; margin-left:-255px; opacity:0.6; background-color:#93BFEC;} 7% { top:140px; margin-left:-258px; opacity:0.6; background-color:#93BFEC;} 12% { top:240px; margin-left:-255px; opacity:0.6; background-color:#93BFEC;} 13% { top:275px; margin-left:-270px; opacity:0.6; background-color:#93BFEC;} 14% { top:295px; margin-left:-315px; opacity:0.6; background-color:#93BFEC;} 15% { top:298px; margin-left:-355px; opacity:0.6; background-color:#93BFEC;} 16% { top:295px; margin-left:-395px; opacity:0.6; background-color:#93BFEC;} 17% { top:292px; margin-left:-435px; opacity:0.6; background-color:#93BFEC;} 18% { top:295px; margin-left:-475px; opacity:0.6; background-color:#93BFEC;} 19% { top:320px; margin-left:-520px; opacity:0.6; background-color:#93BFEC;} 20% { top:355px; margin-left:-530px; opacity:0.6; background-color:#93BFEC;} 21% { top:395px; margin-left:-520px; opacity:0.6; background-color:#93BFEC;} 22% { top:415px; margin-left:-470px; opacity:0.6; background-color:#93BFEC;} 26% { top:415px; margin-left:-370px; opacity:0.6; background-color:#93BFEC;} 27% { top:435px; margin-left:-330px; opacity:0.6; background-color:#93BFEC;} 28% { top:475px; margin-left:-310px; opacity:0.6; background-color:#93BFEC;} 32% { top:635px; margin-left:-310px; opacity:0.6; background-color:#93BFEC;} 33% { top:675px; margin-left:-300px; opacity:0.6; background-color:#93BFEC;} 34% { top:695px; margin-left:-250px; opacity:0.6; background-color:#93BFEC;} 35% { top:675px; margin-left:-200px; opacity:0.6; background-color:#93BFEC;} 36% { top:635px; margin-left:-190px; opacity:0.6; background-color:#93BFEC;} 40% { top:475px; margin-left:-190px; opacity:0.6; background-color:#AAAAAA;} 41% { top:435px; margin-left:-175px; opacity:0.6; background-color:#AAAAAA;} 42% { top:415px; margin-left:-130px; opacity:0.6; background-color:#AAAAAA;} 43% { top:435px; margin-left:-85px; opacity:0.6; background-color:#AAAAAA;} 44% { top:475px; margin-left:-70px; opacity:0.6; background-color:#AAAAAA;} 48% { top:635px; margin-left:-70px; opacity:0.6; background-color:#AAAAAA;} 49% { top:675px; margin-left:-50px; opacity:0.6; background-color:#AAAAAA;} 50% { top:695px; margin-left:-10px; opacity:0.6; background-color:#AAAAAA;} 51% { top:675px; margin-left:40px; opacity:0.6; background-color:#AAAAAA;} 52% { top:635px; margin-left:55px; opacity:0.6; background-color:#AAAAAA;} 56% { top:475px; margin-left:55px; opacity:0.6; background-color:#AAAAAA;} 57% { top:435px; margin-left:70px; opacity:0.6; background-color:#AAAAAA;} 58% { top:415px; margin-left:115px; opacity:0.6; background-color:#AAAAAA;} 59% { top:435px; margin-left:160px; opacity:0.6; background-color:#AAAAAA;} 60% { top:475px; margin-left:175px; opacity:0.6; background-color:#AAAAAA;} 64% { top:635px; margin-left:175px; opacity:0.6; background-color:#DA7770;} 65% { top:675px; margin-left:190px; opacity:0.6; background-color:#DA7770;} 66% { top:695px; margin-left:235px; opacity:0.6; background-color:#DA7770;} 67% { top:675px; margin-left:280px; opacity:0.6; background-color:#DA7770;} 68% { top:635px; margin-left:295px; opacity:0.6; background-color:#DA7770;} 72% { top:475px; margin-left:295px; opacity:0.6; background-color:#DA7770;} 73% { top:435px; margin-left:310px; opacity:0.6; background-color:#DA7770;} 74% { top:415px; margin-left:360px; opacity:0.6; background-color:#DA7770;} 78% { top:415px; margin-left:455px; opacity:0.6; background-color:#DA7770;} 79% { top:395px; margin-left:505px; opacity:0.6; background-color:#DA7770;} 80% { top:355px; margin-left:515px; opacity:0.6; background-color:#DA7770;} 81% { top:320px; margin-left:505px; opacity:0.6; background-color:#DA7770;} 82% { top:295px; margin-left:455px; opacity:0.6; background-color:#DA7770;} 83% { top:298px; margin-left:415px; opacity:0.6; background-color:#DA7770;} 84% { top:295px; margin-left:375px; opacity:0.6; background-color:#DA7770;} 85% { top:292px; margin-left:335px; opacity:0.6; background-color:#DA7770;} 86% { top:295px; margin-left:300px; opacity:0.6; background-color:#DA7770;} 87% { top:275px; margin-left:260px; opacity:0.6; background-color:#DA7770;} 88% { top:240px; margin-left:240px; opacity:0.6; background-color:#DA7770;} 93% { top:140px; margin-left:237px; opacity:0.6; background-color:#DA7770;} 94% { top:120px; margin-left:240px; opacity:0.6; background-color:#DA7770;} 95% { top:100px; margin-left:243px; opacity:0.6; background-color:#DA7770;} 100% { top:0px; margin-left:240px; opacity:0; background-color:#DA7770;} } @-webkit-keyframes page04_bubble_flow { 0% { top:0px; margin-left:-255px; opacity:0; background-color:#93BFEC;} 5% { top:100px; margin-left:-252px; opacity:0.6; background-color:#93BFEC;} 6% { top:120px; margin-left:-255px; opacity:0.6; background-color:#93BFEC;} 7% { top:140px; margin-left:-258px; opacity:0.6; background-color:#93BFEC;} 12% { top:240px; margin-left:-255px; opacity:0.6; background-color:#93BFEC;} 13% { top:275px; margin-left:-270px; opacity:0.6; background-color:#93BFEC;} 14% { top:295px; margin-left:-315px; opacity:0.6; background-color:#93BFEC;} 15% { top:298px; margin-left:-355px; opacity:0.6; background-color:#93BFEC;} 16% { top:295px; margin-left:-395px; opacity:0.6; background-color:#93BFEC;} 17% { top:292px; margin-left:-435px; opacity:0.6; background-color:#93BFEC;} 18% { top:295px; margin-left:-475px; opacity:0.6; background-color:#93BFEC;} 19% { top:320px; margin-left:-520px; opacity:0.6; background-color:#93BFEC;} 20% { top:355px; margin-left:-530px; opacity:0.6; background-color:#93BFEC;} 21% { top:395px; margin-left:-520px; opacity:0.6; background-color:#93BFEC;} 22% { top:415px; margin-left:-470px; opacity:0.6; background-color:#93BFEC;} 26% { top:415px; margin-left:-370px; opacity:0.6; background-color:#93BFEC;} 27% { top:435px; margin-left:-330px; opacity:0.6; background-color:#93BFEC;} 28% { top:475px; margin-left:-310px; opacity:0.6; background-color:#93BFEC;} 32% { top:635px; margin-left:-310px; opacity:0.6; background-color:#93BFEC;} 33% { top:675px; margin-left:-300px; opacity:0.6; background-color:#93BFEC;} 34% { top:695px; margin-left:-250px; opacity:0.6; background-color:#93BFEC;} 35% { top:675px; margin-left:-200px; opacity:0.6; background-color:#93BFEC;} 36% { top:635px; margin-left:-190px; opacity:0.6; background-color:#93BFEC;} 40% { top:475px; margin-left:-190px; opacity:0.6; background-color:#AAAAAA;} 41% { top:435px; margin-left:-175px; opacity:0.6; background-color:#AAAAAA;} 42% { top:415px; margin-left:-130px; opacity:0.6; background-color:#AAAAAA;} 43% { top:435px; margin-left:-85px; opacity:0.6; background-color:#AAAAAA;} 44% { top:475px; margin-left:-70px; opacity:0.6; background-color:#AAAAAA;} 48% { top:635px; margin-left:-70px; opacity:0.6; background-color:#AAAAAA;} 49% { top:675px; margin-left:-50px; opacity:0.6; background-color:#AAAAAA;} 50% { top:695px; margin-left:-10px; opacity:0.6; background-color:#AAAAAA;} 51% { top:675px; margin-left:40px; opacity:0.6; background-color:#AAAAAA;} 52% { top:635px; margin-left:55px; opacity:0.6; background-color:#AAAAAA;} 56% { top:475px; margin-left:55px; opacity:0.6; background-color:#AAAAAA;} 57% { top:435px; margin-left:70px; opacity:0.6; background-color:#AAAAAA;} 58% { top:415px; margin-left:115px; opacity:0.6; background-color:#AAAAAA;} 59% { top:435px; margin-left:160px; opacity:0.6; background-color:#AAAAAA;} 60% { top:475px; margin-left:175px; opacity:0.6; background-color:#AAAAAA;} 64% { top:635px; margin-left:175px; opacity:0.6; background-color:#DA7770;} 65% { top:675px; margin-left:190px; opacity:0.6; background-color:#DA7770;} 66% { top:695px; margin-left:235px; opacity:0.6; background-color:#DA7770;} 67% { top:675px; margin-left:280px; opacity:0.6; background-color:#DA7770;} 68% { top:635px; margin-left:295px; opacity:0.6; background-color:#DA7770;} 72% { top:475px; margin-left:295px; opacity:0.6; background-color:#DA7770;} 73% { top:435px; margin-left:310px; opacity:0.6; background-color:#DA7770;} 74% { top:415px; margin-left:360px; opacity:0.6; background-color:#DA7770;} 78% { top:415px; margin-left:455px; opacity:0.6; background-color:#DA7770;} 79% { top:395px; margin-left:505px; opacity:0.6; background-color:#DA7770;} 80% { top:355px; margin-left:515px; opacity:0.6; background-color:#DA7770;} 81% { top:320px; margin-left:505px; opacity:0.6; background-color:#DA7770;} 82% { top:295px; margin-left:455px; opacity:0.6; background-color:#DA7770;} 83% { top:298px; margin-left:415px; opacity:0.6; background-color:#DA7770;} 84% { top:295px; margin-left:375px; opacity:0.6; background-color:#DA7770;} 85% { top:292px; margin-left:335px; opacity:0.6; background-color:#DA7770;} 86% { top:295px; margin-left:300px; opacity:0.6; background-color:#DA7770;} 87% { top:275px; margin-left:260px; opacity:0.6; background-color:#DA7770;} 88% { top:240px; margin-left:240px; opacity:0.6; background-color:#DA7770;} 93% { top:140px; margin-left:237px; opacity:0.6; background-color:#DA7770;} 94% { top:120px; margin-left:240px; opacity:0.6; background-color:#DA7770;} 95% { top:100px; margin-left:243px; opacity:0.6; background-color:#DA7770;} 100% { top:0px; margin-left:240px; opacity:0; background-color:#DA7770;} } div.page_04 { position : relative; background : #000000 url('/assets/images/green/04/background_main.jpg') no-repeat center top; height : 670px; } div.page_04 div.marker { top:-200px; left:0px;} div.page_04 div.background_bottom { z-index : 2; position : absolute; top : 670px; background : transparent url('/assets/images/green/04/background_bottom.png') no-repeat center top; width : 100%; height : 230px; } div.page_04 div.background_pipes { z-index : 3; position : absolute; left : 50%; margin : 0px 0px 0px -550px; } div.page_04 div.background_pipes img { position : relative; width : 1100px; } div.page_04 div.background_pipes img.pipes_alt { display:none;} div.page_04 div.information01 { top : 150px; left : 50%; margin : 0px 0px 0px -190px; color : #FFFFFF; width : 380px; } div.page_04 div.bubble { position : absolute; left : 50%; z-index : 5; opacity : 0; background-color : #FFFFFF; } div.page_04 div.bubble_small { margin : 0px; border-radius : 5px; width : 10px; height : 10px; } div.page_04 div.bubble_large { margin : 0px; border-radius : 8px; width : 16px; height : 16px; } html.cssanimations div.page_04 div.bubble_slow { animation:page04_bubble_flow 30.0s linear 0s infinite forwards; -o-animation:page04_bubble_flow 30.0s linear 0s infinite forwards; -moz-animation:page04_bubble_flow 30.0s linear 0s infinite forwards; -webkit-animation:page04_bubble_flow 30.0s linear 0s infinite forwards;} html.cssanimations div.page_04 div.bubble_normal { animation:page04_bubble_flow 25.0 linear 0s infinite forwards; -o-animation:page04_bubble_flow 25.0s linear 0s infinite forwards; -moz-animation:page04_bubble_flow 25.0s linear 0s infinite forwards; -webkit-animation:page04_bubble_flow 25.0s linear 0s infinite forwards;} html.cssanimations div.page_04 div.bubble_fast { animation:page04_bubble_flow 20.0s linear 0s infinite forwards; -o-animation:page04_bubble_flow 20.0s linear 0s infinite forwards; -moz-animation:page04_bubble_flow 20.0s linear 0s infinite forwards; -webkit-animation:page04_bubble_flow 20.0s linear 0s infinite forwards;} /******************* Page 05 *******************/ @keyframes page05_bulb_on { 0% { opacity: 0;} 29% { opacity: 0;} 30% { opacity: 1;} 45% { opacity: 0;} 65% { opacity: 1;} 80% { opacity: 0;} 100% { opacity: 1;} } @keyframes page05_bulb_off { 0% { opacity: 1;} 29% { opacity: 1;} 30% { opacity: 0;} 45% { opacity: 1;} 65% { opacity: 0;} 80% { opacity: 1;} 100% { opacity: 0;} } @-o-keyframes page05_bulb_on { 0% { opacity: 0;} 29% { opacity: 0;} 30% { opacity: 1;} 45% { opacity: 0;} 65% { opacity: 1;} 80% { opacity: 0;} 100% { opacity: 1;} } @-o-keyframes page05_bulb_off { 0% { opacity: 1;} 29% { opacity: 1;} 30% { opacity: 0;} 45% { opacity: 1;} 65% { opacity: 0;} 80% { opacity: 1;} 100% { opacity: 0;} } @-moz-keyframes page05_bulb_on { 0% { opacity: 0;} 29% { opacity: 0;} 30% { opacity: 1;} 45% { opacity: 0;} 65% { opacity: 1;} 80% { opacity: 0;} 100% { opacity: 1;} } @-moz-keyframes page05_bulb_off { 0% { opacity: 1;} 29% { opacity: 1;} 30% { opacity: 0;} 45% { opacity: 1;} 65% { opacity: 0;} 80% { opacity: 1;} 100% { opacity: 0;} } @-webkit-keyframes page05_bulb_on { 0% { opacity: 0;} 29% { opacity: 0;} 30% { opacity: 1;} 45% { opacity: 0;} 65% { opacity: 1;} 80% { opacity: 0;} 100% { opacity: 1;} } @-webkit-keyframes page05_bulb_off { 0% { opacity: 1;} 29% { opacity: 1;} 30% { opacity: 0;} 45% { opacity: 1;} 65% { opacity: 0;} 80% { opacity: 1;} 100% { opacity: 0;} } html.csstransitions #page_05.lightbulb_on { -o-transition : background-color 3.0s ease 1.0s; -moz-transition : background-color 3.0s ease 1.0s; -webkit-transition : background-color 3.0s ease 1.0s; transition : background-color 3.0s ease 1.0s; } html.csstransitions #page_05.lightbulb_off { -o-transition : background-color 2.0s ease; -moz-transition : background-color 2.0s ease; -webkit-transition : background-color 2.0s ease; transition : background-color 2.0s ease; } div.page_05 { position : relative; background : #000000; height : 1300px; } #page_05.lightbulb_on { background : #FFFFFF; } div.page_05 div.marker { top:0px; left:0px;} div.page_05 div.lightbulb { z-index : 1; position : absolute; left : 50%; margin : 0px 0px 0px -800px; } html.csstransitions div.page_05 div.lightbulb img.cord { -o-transition : 0s linear; -moz-transition : 0s linear; -webkit-transition : 0s linear; transition : 0s linear; } div.page_05 div.lightbulb img.cord { z-index : 2; display : block; position : relative; left : 350px; width : 222px; height : 50px; } div.page_05 div.lightbulb img.bulb_off { opacity : 1; z-index : 3; display : block; position : relative; left : 350px; } div.page_05 div.lightbulb img.bulb_on { opacity : 0; z-index : 4; display : block; position : relative; left : 350px; top : -810px; } html.csstransitions div.page_05 div.lightbulb_on img.glow { -o-transition : opacity 1.0s ease 1s; -moz-transition : opacity 1.0s ease 1s; -webkit-transition : opacity 1.0s ease 1s; transition : opacity 1.0s ease 1s; } div.page_05 div.lightbulb img.glow { opacity : 0; z-index : 1; display : block; position : relative; top : -1500px; } html.cssanimations div.page_05 div.lightbulb_on img.bulb_off { animation: page05_bulb_off 1s ease 0s 1 forwards; -o-animation: page05_bulb_off 1s ease 0s 1 forwards; -moz-animation: page05_bulb_off 1s ease 0s 1 forwards; -webkit-animation: page05_bulb_off 1s ease 0s 1 forwards;} html.cssanimations div.page_05 div.lightbulb_on img.bulb_on { animation: page05_bulb_on 1s ease 0s 1 forwards; -o-animation: page05_bulb_on 1s ease 0s 1 forwards; -moz-animation: page05_bulb_on 1s ease 0s 1 forwards; -webkit-animation: page05_bulb_on 1s ease 0s 1 forwards;} html.csstransitions div.page_05 div.lightbulb_on img.glow { opacity: 1;} html.csstransitions div.page_05 div.information01 { -o-transition : 0s linear; -moz-transition : 0s linear; -webkit-transition : 0s linear; transition : 0s linear; } html.csstransitions div.page_05 #page05_information01.lightbulb_on { -o-transition : top 0s linear, color 3.0s ease 1.0s; -moz-transition : top 0s linear, color 3.0s ease 1.0s; -webkit-transition : top 0s linear, color 3.0s ease 1.0s; transition : top 0s linear, color 3.0s ease 1.0s; } html.csstransitions div.page_05 #page05_information01.lightbulb_off { -o-transition : top 0s linear, color 2.0s ease; -moz-transition : top 0s linear, color 2.0s ease; -webkit-transition : top 0s linear, color 2.0s ease; transition : top 0s linear, color 2.0s ease; } div.page_05 div.information01 { top : 300px; right : 40%; margin : 0px -225px 0px 0px; color : #FFFFFF; width : 450px; } div.page_05 #page05_information01.lightbulb_on { color : #000000; } div.page_05 div.image01 { -o-transform : rotate(10deg); -moz-transform : rotate(10deg); -ms-transform : rotate(10deg); -webkit-transform : rotate(10deg); transform : rotate(10deg); z-index : 10; top : 550px; right : 25%; margin : 0px -260px 0px 0px; } div.page_05 div.image01_note { z-index : 15; top : 550px; right : 45%; margin : 0px -125px 0px 0px; width : 230px; } div.page_05 div.image02 { -o-transform : rotate(-10deg); -moz-transform : rotate(-10deg); -ms-transform : rotate(-10deg); -webkit-transform : rotate(-10deg); transform : rotate(-10deg); z-index : 12; top : 700px; right : 40%; margin : 0px -260px 0px 0px; } div.page_05 div.image02_note { z-index : 17; top : 750px; right : 55%; margin : 0px -145px 0px 0px; width : 270px; } /******************* Page 06 *******************/ div.page_06 { position : relative; background : url('/assets/images/green/06/background_main.jpg') no-repeat center top; height : 855px; } div.page_06 div.marker { top:0px; left:0px;} div.page_06 div.background_top { z-index : 0; position : absolute; top : -240px; background : transparent url('/assets/images/green/06/background_top.png') no-repeat center top; width : 100%; height : 240px; } div.page_06 div.background_bottom { z-index : 1; position : absolute; top : 855px; background : transparent url('/assets/images/green/06/background_bottom.png') no-repeat center top; width : 100%; height : 308px; } div.page_06 div.information01 { top : 150px; left : 68%; margin : 0px 0px 0px -200px; color : #FFFFFF; width : 400px; } div.page_06 div.image01 { -o-transform : rotate(-10deg); -moz-transform : rotate(-10deg); -ms-transform : rotate(-10deg); -webkit-transform : rotate(-10deg); transform : rotate(-10deg); -moz-box-shadow : 3px -3px 10px 3px #333333; -webkit-box-shadow : 3px -3px 10px 3px #333333; box-shadow : 3px -3px 10px 3px #333333; z-index : 10; top : 50px; left : 18%; margin : 0px 0px 0px -260px; } div.page_06 div.image01_note { -moz-box-shadow : 3px 3px 10px 3px #333333; -webkit-box-shadow : 3px 3px 10px 3px #333333; box-shadow : 3px 3px 10px 3px #333333; z-index : 15; top : 400px; left : 13%; margin : 0px 0px 0px -125px; width : 230px; } div.page_06 div.image02 { -o-transform : rotate(10deg); -moz-transform : rotate(10deg); -ms-transform : rotate(10deg); -webkit-transform : rotate(10deg); transform : rotate(10deg); -moz-box-shadow : 3px -3px 10px 3px #333333; -webkit-box-shadow : 3px -3px 10px 3px #333333; box-shadow : 3px -3px 10px 3px #333333; z-index : 12; top : 400px; left : 50%; margin : 0px 0px 0px -260px; } div.page_06 div.image02_note { -moz-box-shadow : 3px 3px 10px 3px #333333; -webkit-box-shadow : 3px 3px 10px 3px #333333; box-shadow : 3px 3px 10px 3px #333333; z-index : 17; top : 650px; left : 70%; margin : 0px 0px 0px -125px; width : 230px; } div.page_06 div.image03 { -o-transform : rotate(-5deg); -moz-transform : rotate(-5deg); -ms-transform : rotate(-5deg); -webkit-transform : rotate(-5deg); transform : rotate(-5deg); -moz-box-shadow : 3px -3px 10px 3px #333333; -webkit-box-shadow : 3px -3px 10px 3px #333333; box-shadow : 3px -3px 10px 3px #333333; z-index : 14; top : 600px; left : 20%; margin : 0px 0px 0px -260px; } div.page_06 div.image03_note { -moz-box-shadow : 3px 3px 10px 3px #333333; -webkit-box-shadow : 3px 3px 10px 3px #333333; box-shadow : 3px 3px 10px 3px #333333; z-index : 19; top : 850px; left : 40%; margin : 0px 0px 0px -145px; width : 270px; } @media only screen and (max-width : 975px) { div.page_06 div.information01 { left: 62%; top: 140px;} div.page_06 div.image01 { left: -9%;} div.page_06 div.image01_note { left: 18%;} } /******************* Page 07 *******************/ div.page_07 { position : relative; background : url('/assets/images/green/07/background_main.jpg') no-repeat center top; height : 2100px; } div.page_07 div.marker { top:100px; left:0px;} div.page_07 div.information01 { top : 250px; left : 60%; margin : 0px 0px 0px -190px; color : #000000; width : 380px; } div.page_07 div.information02 { top : 1100px; left : 68%; margin : 0px 0px 0px -230px; color : #FFFFFF; width : 460px; } div.page_07 div.information_note01 { top : 450px; right : 15%; background-color : #222222; } div.page_07 div.information_note01 p { margin : 90px auto 5px auto; font-family : BYHeadline02, serif; width : 210px; } div.page_07 div.information_note01 p span.text_large { font-family : BYHeadline01, serif; font-size : 45px; } div.page_07 div.image01 { -o-transform : rotate(10deg); -moz-transform : rotate(10deg); -ms-transform : rotate(10deg); -webkit-transform : rotate(10deg); transform : rotate(10deg); -moz-box-shadow : 3px -3px 10px 3px #333333; -webkit-box-shadow : 3px -3px 10px 3px #333333; box-shadow : 3px -3px 10px 3px #333333; z-index : 10; top : 600px; left : 30%; margin : 0px 0px 0px -180px; } div.page_07 div.image01_note { -moz-box-shadow : 3px 3px 10px 3px #333333; -webkit-box-shadow : 3px 3px 10px 3px #333333; box-shadow : 3px 3px 10px 3px #333333; z-index : 15; top : 1100px; left : 30%; margin : 0px 0px 0px -125px; width : 230px; } div.page_07 div.image02 { -o-transform : rotate(-10deg); -moz-transform : rotate(-10deg); -ms-transform : rotate(-10deg); -webkit-transform : rotate(-10deg); transform : rotate(-10deg); -moz-box-shadow : 3px -3px 10px 3px #333333; -webkit-box-shadow : 3px -3px 10px 3px #333333; box-shadow : 3px -3px 10px 3px #333333; z-index : 12; top : 1350px; left : 30%; margin : 0px 0px 0px -260px; } div.page_07 div.image02_note { -moz-box-shadow : 3px 3px 10px 3px #333333; -webkit-box-shadow : 3px 3px 10px 3px #333333; box-shadow : 3px 3px 10px 3px #333333; z-index : 17; top : 1650px; left : 45%; margin : 0px 0px 0px -135px; width : 250px; } div.page_07 div.image03 { -o-transform : rotate(10deg); -moz-transform : rotate(10deg); -ms-transform : rotate(10deg); -webkit-transform : rotate(10deg); transform : rotate(10deg); -moz-box-shadow : 3px -3px 10px 3px #333333; -webkit-box-shadow : 3px -3px 10px 3px #333333; box-shadow : 3px -3px 10px 3px #333333; z-index : 14; top : 1500px; right : 30%; margin : 0px -180px 0px 0px; } div.page_07 div.image03_note { -moz-box-shadow : 3px 3px 10px 3px #333333; -webkit-box-shadow : 3px 3px 10px 3px #333333; box-shadow : 3px 3px 10px 3px #333333; z-index : 19; top : 1900px; right : 45%; margin : 0px -135px 0px 0px; width : 250px; } @media only screen and (max-width : 975px) { div.page_07 div.information01 { left: 65%; margin-left: -180px; width: 360px;} div.page_07 div.information01 h1 { font-size: 42px;} div.page_07 div.information01 p { font-size: 16px;} div.page_07 div.information02 { left: 65%; margin-left: -180px; width: 360px;} div.page_07 div.information02 h1 { font-size: 40px;} div.page_07 div.information02 p { font-size: 16px;} div.page_07 div.image01 { left: 13%;} div.page_07 div.image01_note { left: 18%;} } /******************* Page 08 *******************/ @keyframes page08_bubbleup_01 { 0% { top:900px; margin-left:0px;} 5% { top:840px; margin-left:-5px;} 10% { top:780px; margin-left:0px;} 15% { top:720px; margin-left:5px;} 20% { top:660px; margin-left:0px;} 25% { top:600px; margin-left:-5px;} 30% { top:540px; margin-left:0px;} 35% { top:480px; margin-left:5px;} 40% { top:420px; margin-left:0px;} 45% { top:360px; margin-left:-5px;} 50% { top:300px; margin-left:0px;} 55% { top:240px; margin-left:5px;} 60% { top:180px; margin-left:0px;} 65% { top:120px; margin-left:-5px;} 70% { top:60px; margin-left:0px;} 75% { top:0px; margin-left:5px;} 80% { top:-60px; margin-left:0px;} 85% { top:-120px; margin-left:-5px;} 90% { top:-180px; margin-left:0px;} 95% { top:-240px; margin-left:5px;} 100% { top:-300px; margin-left:0px;} } @keyframes page08_bubbleup_02 { 0% { top:900px; margin-left:0px;} 5% { top:845px; margin-left:-5px;} 10% { top:790px; margin-left:0px;} 15% { top:735px; margin-left:5px;} 20% { top:680px; margin-left:0px;} 25% { top:625px; margin-left:-5px;} 30% { top:570px; margin-left:0px;} 35% { top:515px; margin-left:5px;} 40% { top:460px; margin-left:0px;} 45% { top:405px; margin-left:-5px;} 50% { top:350px; margin-left:0px;} 55% { top:295px; margin-left:5px;} 60% { top:240px; margin-left:0px;} 65% { top:185px; margin-left:-5px;} 70% { top:130px; margin-left:0px;} 75% { top:75px; margin-left:5px;} 80% { top:20px; margin-left:0px;} 85% { top:-35px; margin-left:-5px;} 90% { top:-90px; margin-left:0px;} 95% { top:-145px; margin-left:5px;} 100% { top:-200px; margin-left:0px;} } @-o-keyframes page08_bubbleup_01 { 0% { top:900px; margin-left:0px;} 5% { top:840px; margin-left:-5px;} 10% { top:780px; margin-left:0px;} 15% { top:720px; margin-left:5px;} 20% { top:660px; margin-left:0px;} 25% { top:600px; margin-left:-5px;} 30% { top:540px; margin-left:0px;} 35% { top:480px; margin-left:5px;} 40% { top:420px; margin-left:0px;} 45% { top:360px; margin-left:-5px;} 50% { top:300px; margin-left:0px;} 55% { top:240px; margin-left:5px;} 60% { top:180px; margin-left:0px;} 65% { top:120px; margin-left:-5px;} 70% { top:60px; margin-left:0px;} 75% { top:0px; margin-left:5px;} 80% { top:-60px; margin-left:0px;} 85% { top:-120px; margin-left:-5px;} 90% { top:-180px; margin-left:0px;} 95% { top:-240px; margin-left:5px;} 100% { top:-300px; margin-left:0px;} } @-o-keyframes page08_bubbleup_02 { 0% { top:900px; margin-left:0px;} 5% { top:845px; margin-left:-5px;} 10% { top:790px; margin-left:0px;} 15% { top:735px; margin-left:5px;} 20% { top:680px; margin-left:0px;} 25% { top:625px; margin-left:-5px;} 30% { top:570px; margin-left:0px;} 35% { top:515px; margin-left:5px;} 40% { top:460px; margin-left:0px;} 45% { top:405px; margin-left:-5px;} 50% { top:350px; margin-left:0px;} 55% { top:295px; margin-left:5px;} 60% { top:240px; margin-left:0px;} 65% { top:185px; margin-left:-5px;} 70% { top:130px; margin-left:0px;} 75% { top:75px; margin-left:5px;} 80% { top:20px; margin-left:0px;} 85% { top:-35px; margin-left:-5px;} 90% { top:-90px; margin-left:0px;} 95% { top:-145px; margin-left:5px;} 100% { top:-200px; margin-left:0px;} } @-moz-keyframes page08_bubbleup_01 { 0% { top:900px; margin-left:0px;} 5% { top:840px; margin-left:-5px;} 10% { top:780px; margin-left:0px;} 15% { top:720px; margin-left:5px;} 20% { top:660px; margin-left:0px;} 25% { top:600px; margin-left:-5px;} 30% { top:540px; margin-left:0px;} 35% { top:480px; margin-left:5px;} 40% { top:420px; margin-left:0px;} 45% { top:360px; margin-left:-5px;} 50% { top:300px; margin-left:0px;} 55% { top:240px; margin-left:5px;} 60% { top:180px; margin-left:0px;} 65% { top:120px; margin-left:-5px;} 70% { top:60px; margin-left:0px;} 75% { top:0px; margin-left:5px;} 80% { top:-60px; margin-left:0px;} 85% { top:-120px; margin-left:-5px;} 90% { top:-180px; margin-left:0px;} 95% { top:-240px; margin-left:5px;} 100% { top:-300px; margin-left:0px;} } @-moz-keyframes page08_bubbleup_02 { 0% { top:900px; margin-left:0px;} 5% { top:845px; margin-left:-5px;} 10% { top:790px; margin-left:0px;} 15% { top:735px; margin-left:5px;} 20% { top:680px; margin-left:0px;} 25% { top:625px; margin-left:-5px;} 30% { top:570px; margin-left:0px;} 35% { top:515px; margin-left:5px;} 40% { top:460px; margin-left:0px;} 45% { top:405px; margin-left:-5px;} 50% { top:350px; margin-left:0px;} 55% { top:295px; margin-left:5px;} 60% { top:240px; margin-left:0px;} 65% { top:185px; margin-left:-5px;} 70% { top:130px; margin-left:0px;} 75% { top:75px; margin-left:5px;} 80% { top:20px; margin-left:0px;} 85% { top:-35px; margin-left:-5px;} 90% { top:-90px; margin-left:0px;} 95% { top:-145px; margin-left:5px;} 100% { top:-200px; margin-left:0px;} } @-webkit-keyframes page08_bubbleup_01 { 0% { top:900px; margin-left:0px;} 5% { top:840px; margin-left:-5px;} 10% { top:780px; margin-left:0px;} 15% { top:720px; margin-left:5px;} 20% { top:660px; margin-left:0px;} 25% { top:600px; margin-left:-5px;} 30% { top:540px; margin-left:0px;} 35% { top:480px; margin-left:5px;} 40% { top:420px; margin-left:0px;} 45% { top:360px; margin-left:-5px;} 50% { top:300px; margin-left:0px;} 55% { top:240px; margin-left:5px;} 60% { top:180px; margin-left:0px;} 65% { top:120px; margin-left:-5px;} 70% { top:60px; margin-left:0px;} 75% { top:0px; margin-left:5px;} 80% { top:-60px; margin-left:0px;} 85% { top:-120px; margin-left:-5px;} 90% { top:-180px; margin-left:0px;} 95% { top:-240px; margin-left:5px;} 100% { top:-300px; margin-left:0px;} } @-webkit-keyframes page08_bubbleup_02 { 0% { top:900px; margin-left:0px;} 5% { top:845px; margin-left:-5px;} 10% { top:790px; margin-left:0px;} 15% { top:735px; margin-left:5px;} 20% { top:680px; margin-left:0px;} 25% { top:625px; margin-left:-5px;} 30% { top:570px; margin-left:0px;} 35% { top:515px; margin-left:5px;} 40% { top:460px; margin-left:0px;} 45% { top:405px; margin-left:-5px;} 50% { top:350px; margin-left:0px;} 55% { top:295px; margin-left:5px;} 60% { top:240px; margin-left:0px;} 65% { top:185px; margin-left:-5px;} 70% { top:130px; margin-left:0px;} 75% { top:75px; margin-left:5px;} 80% { top:20px; margin-left:0px;} 85% { top:-35px; margin-left:-5px;} 90% { top:-90px; margin-left:0px;} 95% { top:-145px; margin-left:5px;} 100% { top:-200px; margin-left:0px;} } div.page_08 { position : relative; background : url('/assets/images/green/08/background_main.png') no-repeat center top; height : 639px; } div.page_08 div.marker { top:0px; left:0px;} div.page_08 div.background_top { z-index : 0; position : absolute; top : -387px; background : transparent url('/assets/images/green/08/background_top.png') no-repeat center top; width : 100%; height : 387px; } div.page_08 div.background_bottom { z-index : 1; position : absolute; top : 639px; background : transparent url('/assets/images/green/08/background_bottom.png') no-repeat center top; width : 100%; height : 405px; } div.page_08 div.background_bubbles { z-index : 3; position : absolute; width : 100%; } div.page_08 div.bubble { position : relative; left : 50%; margin-left : -10px; width : 10px; } div.page_08 div.bubble img { position:absolute;} div.page_08 div.bubble img.bubble { z-index:1;} div.page_08 div.bubble img.sparkle { z-index:2; margin:-15px 0px 0px -15px; height:40px;} div.page_08 div.background_top div.bubble_01 img { top:0px; left:-790px; height:12px;} div.page_08 div.background_top div.bubble_02 img { top:80px; left:-770px;} div.page_08 div.background_top div.bubble_03 img { top:20px; left:-720px; height:10px;} div.page_08 div.background_top div.bubble_04 img { top:50px; left:-750px; height:12px;} div.page_08 div.background_top div.bubble_05 img { top:120px; left:-600px;} div.page_08 div.background_top div.bubble_06 img { top:140px; left:-590px; height:10px;} div.page_08 div.background_top div.bubble_07 img { top:160px; left:-570px; height:12px;} div.page_08 div.background_top div.bubble_08 img { top:200px; left:-380px;} div.page_08 div.background_top div.bubble_09 img { top:230px; left:-400px; height:10px;} div.page_08 div.background_top div.bubble_10 img { top:220px; left:-350px;} div.page_08 div.background_top div.bubble_11 img { top:200px; left:-345px; height:10px;} div.page_08 div.background_top div.bubble_12 img { top:250px; left:-340px; height:12px;} div.page_08 div.background_top div.bubble_13 img { top:250px; left:-100px;} div.page_08 div.background_top div.bubble_14 img { top:280px; left:-65px; height:10px;} div.page_08 div.background_top div.bubble_15 img { top:230px; left:-50px;} div.page_08 div.background_top div.bubble_16 img { top:270px; left:-40px; height:12px;} div.page_08 div.background_top div.bubble_17 img { top:270px; left:40px; height:10px;} div.page_08 div.background_top div.bubble_18 img { top:300px; left:85px; height:12px;} div.page_08 div.background_top div.bubble_19 img { top:350px; left:90px; height:10px;} div.page_08 div.background_top div.bubble_20 img { top:270px; left:100px;} div.page_08 div.background_top div.bubble_21 img { top:240px; left:130px; height:12px;} div.page_08 div.background_top div.bubble_22 img { top:270px; left:170px; height:10px;} div.page_08 div.background_top div.bubble_23 img { top:340px; left:180px; height:10px;} div.page_08 div.background_top div.bubble_24 img { top:250px; left:185px; height:12px;} div.page_08 div.background_top div.bubble_25 img { top:300px; left:200px;} div.page_08 div.background_top div.bubble_26 img { top:370px; left:220px; height:12px;} div.page_08 div.background_top div.bubble_27 img { top:320px; left:235px; height:10px;} div.page_08 div.background_top div.bubble_28 img { top:240px; left:240px; height:10px;} div.page_08 div.background_top div.bubble_29 img { top:320px; left:340px; height:10px;} div.page_08 div.background_top div.bubble_30 img { top:380px; left:400px;} div.page_08 div.background_top div.bubble_31 img { top:350px; left:440px; height:10px;} div.page_08 div.background_top div.bubble_32 img { top:400px; left:460px; height:12px;} div.page_08 div.background_top div.bubble_33 img { top:290px; left:490px; height:10px;} div.page_08 div.background_top div.bubble_34 img { top:370px; left:600px; height:10px;} div.page_08 div.background_top div.bubble_35 img { top:320px; left:650px;} div.page_08 div.background_top div.bubble_36 img { top:400px; left:700px; height:10px;} div.page_08 div.background_bottom div.bubble_01 img { top:300px; left:-790px; height:12px;} div.page_08 div.background_bottom div.bubble_02 img { top:220px; left:-770px;} div.page_08 div.background_bottom div.bubble_03 img { top:270px; left:-720px; height:10px;} div.page_08 div.background_bottom div.bubble_04 img { top:190px; left:-750px; height:12px;} div.page_08 div.background_bottom div.bubble_05 img { top:300px; left:-600px; height:10px;} div.page_08 div.background_bottom div.bubble_06 img { top:250px; left:-590px;} div.page_08 div.background_bottom div.bubble_07 img { top:280px; left:-570px; height:12px;} div.page_08 div.background_bottom div.bubble_08 img { top:220px; left:-380px;} div.page_08 div.background_bottom div.bubble_09 img { top:140px; left:-400px; height:10px;} div.page_08 div.background_bottom div.bubble_10 img { top:220px; left:-350px;} div.page_08 div.background_bottom div.bubble_11 img { top:270px; left:-345px; height:10px;} div.page_08 div.background_bottom div.bubble_12 img { top:200px; left:-240px;} div.page_08 div.background_bottom div.bubble_13 img { top:150px; left:-100px;} div.page_08 div.background_bottom div.bubble_14 img { top:240px; left:-65px; height:10px;} div.page_08 div.background_bottom div.bubble_15 img { top:170px; left:-50px; height:12px;} div.page_08 div.background_bottom div.bubble_16 img { top:140px; left:-40px; height:12px;} div.page_08 div.background_bottom div.bubble_17 img { top:170px; left:40px; height:10px;} div.page_08 div.background_bottom div.bubble_18 img { top:250px; left:85px;} div.page_08 div.background_bottom div.bubble_19 img { top:200px; left:90px; height:10px;} div.page_08 div.background_bottom div.bubble_20 img { top:170px; left:100px; height:12px;} div.page_08 div.background_bottom div.bubble_21 img { top:170px; left:130px; height:12px;} div.page_08 div.background_bottom div.bubble_22 img { top:130px; left:170px; height:10px;} div.page_08 div.background_bottom div.bubble_23 img { top:180px; left:180px; height:10px;} div.page_08 div.background_bottom div.bubble_24 img { top:150px; left:185px;} div.page_08 div.background_bottom div.bubble_25 img { top:150px; left:200px; height:12px;} div.page_08 div.background_bottom div.bubble_26 img { top:100px; left:220px; height:12px;} div.page_08 div.background_bottom div.bubble_27 img { top:120px; left:235px; height:10px;} div.page_08 div.background_bottom div.bubble_28 img { top:130px; left:240px; height:10px;} div.page_08 div.background_bottom div.bubble_29 img { top:100px; left:340px; height:10px;} div.page_08 div.background_bottom div.bubble_30 img { top:60px; left:400px;} div.page_08 div.background_bottom div.bubble_31 img { top:40px; left:440px; height:10px;} div.page_08 div.background_bottom div.bubble_32 img { top:20px; left:460px; height:12px;} div.page_08 div.background_bottom div.bubble_33 img { top:-50px; left:490px;} div.page_08 div.background_bottom div.bubble_34 img { top:-20px; left:600px; height:10px;} div.page_08 div.background_bottom div.bubble_35 img { top:-80px; left:650px; height:10px;} div.page_08 div.background_bottom div.bubble_36 img { top:0px; left:700px;} div.page_08 div.background_bubbles div.bubble_01 img { left:-750px; height:12px;} div.page_08 div.background_bubbles div.bubble_02 img { left:-700px; height:12px;} div.page_08 div.background_bubbles div.bubble_03 img { left:-650px;} div.page_08 div.background_bubbles div.bubble_04 img { left:-600px; height:10px;} div.page_08 div.background_bubbles div.bubble_05 img { left:-550px; height:10px;} div.page_08 div.background_bubbles div.bubble_06 img { left:-500px;} div.page_08 div.background_bubbles div.bubble_07 img { left:-450px; height:12px;} div.page_08 div.background_bubbles div.bubble_08 img { left:-400px; height:10px;} div.page_08 div.background_bubbles div.bubble_09 img { left:-350px;} div.page_08 div.background_bubbles div.bubble_10 img { left:-300px; height:12px;} html.cssanimations div.page_08 div.background_bubbles div.bubble_high { animation: page08_bubbleup_01 6s linear normal infinite; -o-animation: page08_bubbleup_01 6s linear normal infinite; -moz-animation: page08_bubbleup_01 6s linear normal infinite; -webkit-animation: page08_bubbleup_01 6s linear normal infinite;} html.cssanimations div.page_08 div.background_bubbles div.bubble_med { animation: page08_bubbleup_02 6s linear normal infinite; -o-animation: page08_bubbleup_02 6s linear normal infinite; -moz-animation: page08_bubbleup_02 6s linear normal infinite; -webkit-animation: page08_bubbleup_02 6s linear normal infinite;} div.page_08 img.icon { background : transparent url('/assets/images/green/08/icons.png') no-repeat center top; width : 100px; height : 100px; } div.page_08 img.icon_tap { background-position:0px 0px;} div.page_08 img.icon_cloud { background-position:0px -100px;} div.page_08 img.icon_toilet { background-position:0px -200px;} div.page_08 div.information01 { top : 150px; left : 55%; margin : 0px 0px 0px -190px; color : #FFFFFF; width : 380px; } html.csstransitions div.page_08 div.information_list { -o-transition : top 0s linear; -moz-transition : top 0s linear; -webkit-transition : top 0s linear; transition : top 0s linear; } div.page_08 div.information_list { z-index : 10; position : absolute; top : 300px; left : 60%; margin : 0px 0px 0px -281px; color : #FFFFFF; width : 562px; } div.page_08 div.information_list div.list { float : left; border-right : 1px solid #FFFFFF; padding : 0px 40px 0px 50px; width : 120px; } div.page_08 div.information_list div.list_first { padding-left : 0px; } div.page_08 div.information_list div.list_last { border-right : none; padding-right : 0px; } div.page_08 div.information_list div.list p { margin : 5px 0px 10px 0px; font-family : Helvetica, Arial, sans-serif; font-weight : normal; font-size : 14px; line-height : 1.3; } div.page_08 div.information_list div.list img { margin : 0px 0px 20px 0px; } div.page_08 div.image01 { -o-transform : rotate(10deg); -moz-transform : rotate(10deg); -ms-transform : rotate(10deg); -webkit-transform : rotate(10deg); transform : rotate(10deg); -moz-box-shadow : 3px -3px 10px 3px #333333; -webkit-box-shadow : 3px -3px 10px 3px #333333; box-shadow : 3px -3px 10px 3px #333333; z-index : 10; top : 100px; left : 10%; margin : 0px 0px 0px -180px; } div.page_08 div.image01_note { -moz-box-shadow : 3px 3px 10px 3px #333333; -webkit-box-shadow : 3px 3px 10px 3px #333333; box-shadow : 3px 3px 10px 3px #333333; z-index : 15; top : 600px; left : 16%; margin : 0px 0px 0px -135px; width : 250px; } @media only screen and (max-width : 975px) { div.page_08 div.information01 { left: 60%; margin-left: -180px; width: 360px;} div.page_08 div.information01 h1 { font-size: 45px;} div.page_08 div.information01 p { font-size: 16px;} div.page_08 div.information_list { left: 60%; margin-left: -200px; width: 400px;} div.page_08 div.information_list div.list { padding: 0px 24px 0px 24px; width: 100px;} div.page_08 div.information_list div.list_first { padding-left: 0px;} div.page_08 div.information_list div.list_last { padding-right: 0px;} div.page_08 div.image01 { left: -2%;} div.page_08 div.image01_note { left: 20%;} } /******************* Page 09 *******************/ div.page_09 { position : relative; background : url('/assets/images/green/09/background_main.jpg') repeat-y center top; height : 1700px; } div.page_09 div.marker { top:100px; left:0px;} html.csstransitions div.page_09 div.background_bikes { -o-transition : 0s linear; -moz-transition : 0s linear; -webkit-transition : 0s linear; transition : 0s linear; } div.page_09 div.background_bikes { z-index : 1; position : absolute; background : transparent url('/assets/images/green/09/background_bikes.png') no-repeat center top; top : 200px; width : 100%; height : 1780px; } div.page_09 div.information01 { top : 500px; left : 20%; margin : 0px 0px 0px -105px; color : #000000; width : 210px; } @media only screen and (max-width : 975px) { div.page_09 div.information01 { left: 17%; } } /******************* Page 10 *******************/ div.page_10 { position : relative; background : url('/assets/images/green/10/background_main.jpg') no-repeat center top; height : 1000px; } div.page_10 div.marker { top:0px; left:0px;} html.csstransitions div.page_10 div.background_box { -o-transition : 0s linear; -moz-transition : 0s linear; -webkit-transition : 0s linear; transition : 0s linear; } div.page_10 div.background_box { z-index : 2; position : absolute; background : transparent url('/assets/images/green/10/background_box.png') no-repeat left top; top : 150px; width : 100%; height : 980px; } div.page_10 div.information01 { top : 400px; right : 25%; margin : 0px -125px 0px 0px; color : #000000; width : 250px; } div.page_10 img.icon { background : transparent url('/assets/images/green/10/icons.png') no-repeat center top; height : 53px; } div.page_10 img.icon_arrow_long { background-position:0px 0px; width:190px;} div.page_10 img.icon_arrow_short { background-position:-199px 0px; width:90px;} div.page_10 img.icon_facebook { background-position:-299px 0px; width:60px;} div.page_10 img.icon_twitter { background-position:-374px 0px; width:60px;} div.page_10 img.icon_googleplus { background-position:-449px 0px; width:60px;} div.page_10 div.footer { z-index : 10; position : absolute; background : url('/assets/images/green/10/background_footer.png') no-repeat center top; top : 750px; width : 100%; height : 635px; } div.page_10 div.information_list { z-index : 10; position : absolute; top : 130px; left : 50%; margin : 0px 0px 0px -401px; color : #000000; width : 802px; } div.page_10 div.information_list div.list { float : left; border-right : 1px solid #666666; padding : 0px 50px 0px 50px; width : 200px; } div.page_10 div.information_list div.list_first { padding-left : 0px; } div.page_10 div.information_list div.list_last { border-right : none; padding-right : 0px; } div.page_10 div.information_list div.list h2 { margin : 5px 0px 10px 0px; font-family : BYHeadline01, serif; font-weight : normal; font-size : 30px; line-height : 1.0; } div.page_10 div.information_list div.list img { margin : 0px 0px 20px 0px; } div.page_10 div.information_list div.list a { display : inline-block; position : relative; font-family : Helvetica, Arial, sans-serif; font-weight : normal; font-size : 22px; color : #FFFFFF; vertical-align : baseline; margin-right : 20px; } div.page_10 div.information_list div.list a span { z-index : 2; position : absolute; top : 13px; left : 20px; } div.page_10 div.information_list div.list a img { margin : 0px; border : none; } div.page_10 div.information_list div.list a:hover img { opacity : 0.8; } @media only screen and (max-width : 975px) { div.page_10 div.information01 { top: 360px; } div.page_10 div.information_list { margin-left: -325px; width: 650px;} div.page_10 div.information_list div.list { padding: 0px 19px 0px 19px; width: 190px;} div.page_10 div.information_list div.list_first { padding-left: 0px;} div.page_10 div.information_list div.list_last { padding-right: 0px;} }