* {-webkit-font-smoothing: antialiased;} body {position:fixed;overflow:hidden;height:100%;width:100%;} .clear { clear: both; } ::selection { background: #f6f6f6; /* WebKit/Blink Browsers */ } ::-moz-selection { background: #f6f6f6; /* Gecko Browsers */ } #mobileview {display:none;} .old-ie{} #background-svg .svg{display:block;position:absolute;left:0;top:0;z-index:2} #background-svg .image{display:none;position:absolute;left:0;top:0;z-index:2;width:100%;height:100%;} #background-svg .image * {position:absolute;width:25%;height:50%;} #background-svg .image .image1 {left:0;top:0;} #background-svg .image .image2 {left:25%;top:0;} #background-svg .image .image3 {left:50%;top:0;} #background-svg .image .image4 {left:75%;top:0;} #background-svg .image .image5 {left:0;top:50%;} #background-svg .image .image6 {left:25%;top:50%;} #background-svg .image .image7 {left:50%;top:50%;} #background-svg .image .image8 {left:75%;top:50%;} #alternative-background-svg .svg{display:block;position:absolute;left:0;top:0;z-index:1} #alternative-background-svg .image{display:none;position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;} #alternative-background-svg .image * {position:absolute;width:25%;height:50%;} #alternative-background-svg .image .image1 {left:0;top:0;} #alternative-background-svg .image .image2 {left:25%;top:0;} #alternative-background-svg .image .image3 {left:50%;top:0;} #alternative-background-svg .image .image4 {left:75%;top:0;} #alternative-background-svg .image .image5 {left:0;top:50%;} #alternative-background-svg .image .image6 {left:25%;top:50%;} #alternative-background-svg .image .image7 {left:50%;top:50%;} #alternative-background-svg .image .image8 {left:75%;top:50%;} .trans {-webkit-transition:.4s;-moz-transition:.4s;-o-transition:.4s;transition:.4s} .navigation {position: absolute;z-index: 99999;top: 0;right: 0;background: url(../images/nav-open-btn.png) no-repeat;padding-left:50px;min-height:50px;} .navigation .nav-btn {position:absolute;z-index:1;left:0;top:0;width:50px;height:50px;} .navigation .content{padding:0;background-color: black;height: 50px;font-size:0;-webkit-transition:.4s;-moz-transition:.4s;-o-transition:.4s;transition:.4s;margin-left:0;} .navigation .content a{line-height:50px;font-size:11px;text-transform:uppercase;font-family:"RedRing";font-weight:500;color:white;text-decoration:none;display:inline-block;text-align:center;overflow:hidden;} .navigation .content a:hover{color:#f16025;} .navigation .content > a.home{width:0;-webkit-transition:.4s;-moz-transition:.4s;-o-transition:.4s;transition:.4s;} .navigation .content > a.quiz{width:0;-webkit-transition:.4s;-moz-transition:.4s;-o-transition:.4s;transition:.4s;} .navigation .content > a.about{width:0;-webkit-transition:.4s;-moz-transition:.4s;-o-transition:.4s;transition:.4s;} .navigation .content > a.research{width:0;-webkit-transition:.4s;-moz-transition:.4s;-o-transition:.4s;transition:.4s;} .navigation .content .share-container{} .navigation .content .share-container .share-btn{width:0;-webkit-transition:.4s;-moz-transition:.4s;-o-transition:.4s;transition:.4s;} .navigation .content .share-container .buttons{display:inline-block;vertical-align: top;overflow: hidden;width: 0;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} .navigation .content .share-container .buttons-inner{width:400px;} .navigation .content .share-container .buttons .buttons-inner > span, .navigation .content .share-container .buttons .buttons-inner > a{display: inline-block;vertical-align: middle;margin-left: 10px;} .navigation .content .share-container .buttons a .icon{background:url(../images/share-icons.png) no-repeat;width:16px;height:16px;vertical-align:middle;display:inline-block;} .navigation .content .share-container .buttons a.facebook {color:#fff;} .navigation .content .share-container .buttons a.facebook .fb-like{display:inline-block;vertical-align:middle;} .navigation .content .share-container .buttons a.facebook .icon{background-position:3px -18px;} .navigation .content .share-container .buttons a.facebook:hover{color:#00789c;} .navigation .content .share-container .buttons a.facebook:hover .icon {background-position:3px -117px;} .navigation .content .share-container .buttons a.twitter {margin-right:10px;} .navigation .content .share-container .buttons a.twitter iframe{display:inline-block;vertical-align:middle;} .navigation .content .share-container .buttons a.twitter .icon{background-position:-17px -17px;margin-right:2px;} .navigation .content .share-container .buttons a.twitter:hover .icon{background-position:-17px -116px;} .navigation .content .share-container .buttons a.twitter:hover {color:#37aeef} .navigation .content .newsletter-form .gform_fields li:first-child{display:none;} .navigation .content .newsletter-form .gform_validation_container{display:none;} .navigation .content .newsletter-form .gform_footer {display:inline-block;vertical-align:middle;} .navigation .content .newsletter-form .gform_body{display:inline-block;} .navigation .content .newsletter-form label{display:none;} .navigation .content .newsletter-form ul{margin:0;padding:0} .navigation .content .newsletter-form li{display:inline-block;list-style: none;} /*.navigation .content .newsletter-form li.gfield_error input{color:red;}*/ .navigation .content .newsletter-form input{border:none;display:inline-block;color:#f16025;font-size:12px;font-weight:500;font-family:"RedRing";line-height:22px;} .navigation .content .newsletter-form input[type="text"]{text-indent:5px;width:170px;background:none;} .navigation .content .newsletter-form input:focus{outline:none;border:none;} .navigation .content .newsletter-form input[type="submit"]{text-indent: -999px;width: 21px;background: url(../images/hm-nav-submit-newsletter.png) no-repeat left center;height: 21px;} .navigation .content .newsletter-form ::-webkit-input-placeholder { /* WebKit browsers */color: #f16025;opacity: 0.7;} .navigation .content .newsletter-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #f16025;opacity: 0.7;} .navigation .content .newsletter-form moz-placeholder { /* Mozilla Firefox 19+ */color: #f16025;opacity: 0.7;} .navigation .content .newsletter-form :-ms-input-placeholder { /* Internet Explorer 10+ */color: #f16025;} .navigation .content .newsletter-form ::selection {background: #f16025;color:#fff; /* WebKit/Blink Browsers */} .navigation .content .newsletter-form ::-moz-selection {background: #f16025;color:#fff; /* Gecko Browsers */} .navigation .content .newsletter-form form{display: inline-block;border:2px solid #f16025;position:relative;} .navigation .content .newsletter-form .gform_body{display:inline-block;vertical-align:middle;} .navigation .content .newsletter-form #gforms_confirmation_message{color: white;font-size: 13px;height: 29px;line-height: 30px;font-family: "RedRing";} .navigation .content .newsletter-form .gform_ajax_spinner {position:absolute;right:5px;top:3px;} .navigation:hover .content, .navigation.open .content {padding:0 41px 0 41px;margin-left:2px;} .navigation:hover .content a, .navigation.open .content a{} .navigation:hover .content a.home, .navigation.open .content a.home{width:47px;} .navigation:hover .content a.about, .navigation.open .content a.about{width:53px;} .navigation:hover .content a.quiz, .navigation.open .content a.quiz{width:53px;} .navigation:hover .content a.research, .navigation.open .content a.research{width:72px;} .navigation:hover .content a.share-btn, .navigation.open .content a.share-btn{width:51px;} .navigation:hover .content .share-container.active .buttons, .navigation.open .content .share-container.active .buttons {width:392px;opacity:1;} .fullscreen-btn {position: absolute;background: url(../images/fullscreen.png);z-index: 99999;right: 0;top: 50px;width: 50px;height: 50px;overflow: hidden;text-indent: -100px;background-position: 0 100%;} .fullscreen-btn:hover {background-position:100% 100%;} .fullscreen .fullscreen-btn {background-position: 0 0;} .fullscreen .fullscreen-btn:hover {background-position: 100% 0;} .fullscreen .game-content-top {height:100%;} .fullscreen .zoom-buttons {bottom:20px;} .fullscreen .questions-content-bottom{height:0 !important;} .container {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;background:url(../images/home-background.svg) 50% 50%;background-size:cover;overflow:hidden;} .ie .container{background:url(../images/home-background.png) 50% 50%;} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .container{background:url(../images/home-background.png) 50% 50%;background-size:cover;} } .home-content-top {position:absolute;left:0;top:0;width:100%;height:60%;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} .home-finish .home-content-top{top:-67%;} .home-content-top .inner-content{position:absolute;left:0;bottom:12px;width:100%;text-align:center;} .home-content-top .inner-content h1{font-family:"RedRing";font-weight:100;font-size:85px;color:#f16025;text-transform:uppercase;margin:0;line-height:85px;letter-spacing: 9px;} .home-content-top .inner-content h4{font-family:"RedRing";font-weight:500;font-size:17px;color:#f16025;text-transform:uppercase;margin:0;letter-spacing: 8px;} .home-content-top .inner-content p{font-family:Arial;font-weight:500;color:#44a3a6;font-size:14px;line-height:18px;} .home-content-top .inner-content .start-btn{font-family:"RedRing";font-weight:500;font-size:12px;color:#f16025;text-transform:uppercase;margin:0;background-color:white;padding:14px 69px;text-decoration:none;margin-top:35px;display:inline-block;border:2px solid white;/*-webkit-transition:.4s border-color;-moz-transition:.4s border-color;-o-transition:.4s border-color;transition:.4s border-color;*/} .home-content-top .inner-content .start-btn:hover {border-color:#f16025} .home-content-top .inner-content .browser-not-supported{display:none;} .ie8 .home-content-top .inner-content .start-btn{display:none;} .ie8 .home-content-top .inner-content .browser-not-supported{display:inline-block;} .home-content-top .game-zoom-area {background-color:lightgrey;} .home-content-bottom {position:absolute;left:0;bottom:0;width:100%;height:33%;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} .home-finish .home-content-bottom {bottom:-33%;} .home-content-bottom img {width: 96%;margin: 0 2%;position: absolute;bottom: 0;} .game-content-top{position:absolute;left:0;top:-60%;width:100%;height:60%;-webkit-transition:top 1s 1s;-moz-transition:top 1s 1s;-o-transition:top 1s 1s;transition:top 1s 1s;background-color:white;z-index:200;} body.game-start .game-content-top {top:0;} .questions-content-bottom{position:absolute;left:0;bottom:-40%;width:100%;height:40%;background-color:white;z-index:300; -webkit-transition:1s 1s;-moz-transition:1s 1s;-o-transition:1s 1s;transition:1s 1s; -webkit-transition:all 1s 1s, height .2s;-moz-transition:1s 1s, height .2s;-o-transition:1s 1s, height .2s;transition:1s 1s, height .2s;} body.game-start .questions-content-bottom {bottom:0;} .questions-content-bottom.showing-question{height:70%;} /******************/ /* PROGRESS BAR */ /******************/ .questions-content-bottom .questions-bar-container{position: absolute;top: 0;left: 0;width: 100%;background-color: #FFF;z-index: 10;} .questions-content-bottom .questions-bar{width:90%;margin: 0 auto;background-color: #F1F2F2;margin-top:38px;height:5px;font-size:0;line-height:0;display:block;} .questions-content-bottom .questions-bar.hidden {background:#fff;} .questions-content-bottom .questions-bar .progress-bar-item{height:5px;display:inline-block;position:relative;border-right: 1px solid #F1F2F2;} .questions-content-bottom .questions-bar .progress-bar-item.active{background-color:#000;border-right: 1px solid #F1F2F2;} .questions-content-bottom .questions-bar .progress-bar-item.current{background:url(../images/progress-bar-arrow.png) no-repeat center 0 #000;cursor:pointer;z-index:100} .questions-content-bottom .questions-bar .progress-bar-item .icon{display:none;position:absolute;height:30px;top:-32px;left:0px;background-repeat:no-repeat;background-position:center center;} .questions-content-bottom .questions-bar .progress-bar-item.current .icon{display:block;} .questions-content-bottom .questions-bar .progress-bar-item .icon-over{display:none;position:absolute;height:47px;bottom:0;background:url(../images/../images/progress-bar-arrow-over.png) no-repeat center bottom;z-index:10;} .questions-content-bottom .questions-bar .progress-bar-item .icon-over span{width:100%;height:30px;display:block;background-repeat:no-repeat;background-position:center center;} .questions-content-bottom .questions-bar .progress-bar-item .popup{display:none;width:420px;background-color:#f16025;position:absolute;bottom: 19px;z-index: 5;padding:20px 20px 55px;color:#fff;left:0;} .questions-content-bottom .questions-bar .progress-bar-item .popup.right-side{right:0;left:auto;} .questions-content-bottom .questions-bar .progress-bar-item .popup h2{font-family:"RedRing";font-weight:100;font-size:18px;line-height:22px;margin-bottom:10px;} .questions-content-bottom .questions-bar .progress-bar-item .popup p{font-family:"RedRing";font-weight:500;font-size:12px;line-height:16px;margin:0;} .questions-content-bottom .questions-bar .progress-bar-item.current:hover .icon{display:none;} .questions-content-bottom .questions-bar .progress-bar-item.current:hover .icon-over{display:block;} .questions-content-bottom .questions-bar .progress-bar-item.current:hover .popup{display:block;} .questions-content-bottom .questions-bar .progress-bar-item.health .icon{background-image:url(../images/bar-icon-health.png) ;} .questions-content-bottom .questions-bar .progress-bar-item.health .icon-over span{background-image:url(../images/bar-icon-health-white.png) ;} .questions-content-bottom .questions-bar .progress-bar-item.education .icon{background-image:url(../images/bar-icon-education.png) ;} .questions-content-bottom .questions-bar .progress-bar-item.education .icon-over span{background-image:url(../images/bar-icon-education-white.png) ;} .questions-content-bottom .questions-bar .progress-bar-item.economy .icon{background-image:url(../images/bar-icon-economy.png) ;} .questions-content-bottom .questions-bar .progress-bar-item.economy .icon-over span{background-image:url(../images/bar-icon-economy-white.png) ;} .questions-content-bottom .questions-bar .progress-bar-item.public_safety .icon{background-image:url(../images/bar-icon-public-safety.png) ;} .questions-content-bottom .questions-bar .progress-bar-item.public_safety .icon-over span{background-image:url(../images/bar-icon-public-safety-white.png) ;} .questions-content-bottom .questions-bar .progress-bar-item.personal_success .icon{background-image:url(../images/bar-icon-success.png) ;} .questions-content-bottom .questions-bar .progress-bar-item.personal_success .icon-over span{background-image:url(../images/bar-icon-success-white.png) ;} /******************/ /* QUESTIONS */ /******************/ .questions-content-bottom .question-items{position:relative;height:100%;overflow: hidden;z-index:5;} .questions-content-bottom .question-items .question-item {position:absolute;left:0;width:100%;height:100%;padding-top:65px;box-sizing:border-box;} .questions-content-bottom .question-items .question-item .question-container{margin:0 auto;display:inline-block;vertical-align:middle;padding-bottom: 50px;max-width: 90%;} .questions-content-bottom .question-items .question-item h1{font-family: "RedRing";font-weight: 100;font-size: 36px;line-height: 38px;margin: 0 0 40px;text-align: center;padding: 0 150px;} .questions-content-bottom .question-items .question-item h1 span{font-weight:400;} .questions-content-bottom .question-items .question-item .buttons-container{text-align:center;} .questions-content-bottom .question-items .question-item .buttons{font-size:0;text-align:left;margin:0 auto;display:inline-block;padding:0 100px;} .questions-content-bottom .question-items .question-item .buttons a{position:relative;font-size: 12px;font-family: "RedRing";font-weight: 300;text-decoration: none;display: inline-block;color: black;padding: 12px 0;margin:5px 0;width:100%;max-width: 680px;}/*transition:.4s background-position;*/ .questions-content-bottom .question-items .question-item .buttons a .checkbox{background:url(../images/answer-radio-button.png) no-repeat 0 0;width:20px;height:20px;position:absolute;top:12px;left:0;} .questions-content-bottom .question-items .question-item .buttons a p br{display:none;} .questions-content-bottom .question-items .question-item .buttons p{margin:0;text-align:left;padding:0 28px;} .questions-content-bottom .question-items .question-item .buttons a:hover{} .questions-content-bottom .question-items .question-item .buttons a.selected .checkbox{display:none;} .questions-content-bottom .question-items .question-item .buttons a.selected.wrong{background:url(../images/answer-icon-wrong.png) no-repeat left 14px;} .questions-content-bottom .question-items .question-item .buttons a.selected.correct{background:url(../images/answer-icon-correct.png) no-repeat left 14px;} .questions-content-bottom .question-items .question-item p{font-family: "RedRing";font-weight: 300;font-size:16px;line-height:22px;display:block;text-align:center;} .questions-content-bottom .question-items .question-item.next {top:100%;} .questions-content-bottom .question-items .question-item.current {top:0;} .questions-content-bottom .question-items .question-item.previous {top:-100%;} .questions-content-bottom .question-items .question-item.last{} .questions-content-bottom .question-items .question-item.last .answer{display:block;padding: 0px 200px;} .questions-content-bottom .question-items .question-item.last .answer .feedback.correct{display:block;padding: 0 40px;} .questions-content-bottom .question-items .question-item .question{text-align: center;height:100%;} .questions-content-bottom .question-items .question-item .answer{display:none;height:100%;text-align:center;padding: 0px 120px;font-size: 0;overflow: hidden;} .questions-content-bottom .question-items .question-item .answer h1{margin-bottom:0;} .questions-content-bottom .question-items .question-item .vertical-aligner{display:inline-block;height:100%;vertical-align:middle;} .questions-content-bottom .question-items .question-item .answer .answer-container{margin:0 auto;display:inline-block;vertical-align:middle;padding-bottom: 50px;width:100%;} .questions-content-bottom .question-items .question-item .answer .feedback{display:none;margin-bottom: 2%;margin-top: 0;} .questions-content-bottom .question-items .question-item .answer.correct .correct{display:block;} .questions-content-bottom .question-items .question-item .answer.wrong .wrong{display:block;} .questions-content-bottom .question-items .question-item .answer .more-articles{text-align:center;} .questions-content-bottom .question-items .question-item .answer .more-articles > label{font-family: "RedRing";font-weight: 700;font-size:11px;vertical-align:middle;margin-right:20px;} .questions-content-bottom .question-items .question-item .answer .more-articles .icon{height:21px;background-position:0 top;background-repeat:no-repeat;display:inline-block;cursor:pointer;vertical-align:middle;display:inline-block;} .questions-content-bottom .question-items .question-item .answer .more-articles .icon:hover{background-position:0 bottom;} .questions-content-bottom .question-items .question-item .answer .more-articles .icon.video-btn{width:60px;background-image:url(../images/answer-video-btn.png);margin-right:30px;text-indent: -99999px;} .questions-content-bottom .question-items .question-item .answer .more-articles .articles-btn{position:relative;-webkit-transition:width .4s;-moz-transition:width .4s;-o-transition:width .4s;transition:width .4s;overflow:hidden;width:auto;vertical-align:middle;text-align:left;display:inline-block;min-height: 21px;} .questions-content-bottom .question-items .question-item .answer .more-articles .articles-btn .icon{background-image:url(../images/answer-articles-btn.png);width:48px;} .questions-content-bottom .question-items .question-item .answer .more-articles .articles-btn:hover .articles-wrapper{width:300px;} .questions-content-bottom .question-items .question-item .answer .more-articles .articles-wrapper{position:relative;overflow:hidden;display:inline-block;vertical-align: middle;width:0px;} .questions-content-bottom .question-items .question-item .answer .more-articles .articles-wrapper a{display:block;margin-bottom:5px;font-style:italic;color:#000;text-decoration:none;text-align: left;font-size: 11px;font-family: "RedRing";font-weight: 500;margin-left: 20px;width:280px;} .questions-content-bottom .question-items .question-item .answer .more-articles .articles-wrapper a:hover{text-decoration:underline;;} .questions-content-bottom .question-items .question-arrow {position: absolute;display: block;width: 52px;height: 52px;text-indent: -99999px;cursor:pointer;} .questions-content-bottom .question-items .question-arrow.next{background:url(../images/arrow-right-1.png) no-repeat right -52px;top: 50%;right: 42px;} .questions-content-bottom .question-items .question-arrow.inactive{background-position:0 0 !important;} .questions-content-bottom .question-items .question-arrow.inactive:hover{background-position:0 0 !important;cursor:default;} .questions-content-bottom .question-items .question-arrow.next.last{text-indent:0;padding-right:60px;width:auto;font-family: "RedRing";font-weight: 700;font-size:16px;text-transform:uppercase;color:#ff6800;line-height: 52px;background-position:right -156px;text-decoration:none;} .questions-content-bottom .question-items .question-arrow.next.last.learn-more{color:#000;background-position:right -52px;} .questions-content-bottom .question-items .question-arrow.next.last.learn-more:hover{color:#000;background-position:right -104px;} .questions-content-bottom .question-items .question-arrow.next.last:hover{background-position:right -156px;} .questions-content-bottom .question-items .question-arrow.prev{background:url(../images/arrow-left-1.png) no-repeat right -52px;top: 50%;left: 42px;} .questions-content-bottom .question-items .question-arrow.next:hover {background-position:right -104px;} .questions-content-bottom .question-items .question-arrow.prev:hover {background-position:right -104px;} .zoom-buttons {position: absolute;right: 0;bottom: 0;z-index:400;/*-webkit-transition:.2s;-moz-transition:.2s;-o-transition:.2s;transition:.2s;*/} .zoom-buttons a{display: block;text-decoration: none;text-align: center;border: 1px solid white;padding: 0 4px;margin-bottom: 5px;margin-right: 5px;color:#fff;background-color:#000;} .zoom-buttons a:hover {border-color:#000;color:#000;background-color:#fff;} @media (min-height: 950px) { .questions-content-bottom .question-items .question-item h1.content{margin:0px 40px 60px;} } @media (max-height: 700px) { .questions-content-bottom .question-items .question-item h1.content{margin:0px 20px 10px;} .questions-content-bottom .question-items .question-item .answer .feedback{margin-bottom:2%;} .questions-content-bottom .question-items .question-item .answer .answer-container{max-width:100%;} .questions-content-bottom .question-items .question-item .buttons a{padding-top:7px;padding-bottom:7px;} .questions-content-bottom .question-items .question-item .buttons a .checkbox{top:8px;} } @media (max-height: 560px) { .game-content-top{top:-55%;height:55%;} .questions-content-bottom{bottom:-45%;height:45%;} } @media (max-height: 500px) { .game-content-top{top:-45%;height:45%;} .questions-content-bottom{bottom:-55%;height:55%;} } @media (max-width: 1024px) { .questions-content-bottom .question-items .question-item h1{padding:0;} .questions-content-bottom .question-items .question-item p{line-height:19px;} } /******************/ /* POPUPS */ /******************/ .big-popup{display: inline-block;} .big-popup.research{width:830px;} .big-popup.about{width:600px;} .big-popup h1{font-family:"RedRing";font-weight:100;font-size:36px;color:#;text-transform:uppercase;margin:0;line-height:42px;margin-bottom:15px;} .big-popup .content{font-family:"RedRing";font-weight:500;font-size:12px;;} .big-popup .content p{margin-top:0;} .big-popup .two-columns { -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; overflow:hidden; } .big-popup .close-btn{font-size: 12px;line-height:36px;font-family: "RedRing";font-weight: 500;text-decoration: none;text-transform:uppercase;display: inline-block;border: 2px solid black;color: black;height:36px;width:146px;text-align:center;position:absolute;top:30px;left:35px;} .big-popup .close-btn:hover{background:url(../images/answer-black-bar.png) repeat-x 0 bottom;border:0;height:40px;width:150px;line-height:40px;} .big-popup .close-btn .arrow{background:url(../images/go-back-arrow.png) no-repeat 0 0;width:16px;height:15px;position:absolute;top:10px;left:15px;} .big-popup .close-btn:hover .arrow{top:12px;left:17px;} .big-popup .pagination-links{float:right;} .big-popup .pagination-links a{color:#c8c8c8;} .big-popup .pagination-links a:hover{color:#000;} .big-popup .pagination-links a, .big-popup .pagination-links span{font-family: "RedRing";font-weight: 700;font-size:12px;color:#c8c8c8;margin:0 2px;vertical-align:middle;text-decoration:none;display:inline-block;} .big-popup .pagination-links span{color:#000;} .big-popup .pagination-links .next, .big-popup .pagination-links .prev{width:9px;height:16px;text-indent:-9999px;margin:0 10px;} .big-popup .pagination-links .next{background:url(../images/popup-pagination-next.png) no-repeat 0 0;} .big-popup .pagination-links .prev{background:url(../images/popup-pagination-prev.png) no-repeat 0 0;} .big-popup .posts-container{border:1px solid #f1f2f2;display: inline-block;width: 828px;} .big-popup .post{border:1px solid #f1f2f2;width:336px;height:180px;padding:42px 38px 0;float:left;position:relative;} .big-popup .post.video{width:412px;height:auto;padding:0;font-size:0;} .big-popup .post h3{font-family: "RedRing";font-weight: 100;font-size:18px;width:280px;margin-top:0;} .big-popup .post h3 a{color:#000;text-decoration:none;} .big-popup .post h4{font-family: "RedRing";font-weight: 500;font-size:12px;width:280px;margin-top:0;font-style:italic;} .big-popup .post-terms {font-family: "RedRing";font-weight: 700;font-size:11px;text-transform:uppercase;} .big-popup .post-terms span{margin-right:10px;} .big-popup .post .arrow {position: absolute;display: block;width: 52px;height: 52px;text-indent: -100px;overflow: hidden;background:url(../images/arrow-right-1.png) no-repeat 0 -52px;position:absolute;right:40px;top:90px;} .big-popup .post .arrow:hover {background-position:0 -104px;} .big-popup .post-categories{float:right;padding-top:15px;} .big-popup .post-categories a{display:inline-block;font-family: "RedRing";font-weight: 700;font-size:12px;color:#c8c8c8;margin-left:10px;text-decoration:none;text-transform:uppercase;} .big-popup .post-categories a:hover, .big-popup .post-categories a.active{color:#000;} .big-popup .post-types{display:block;font-size:0px;} .big-popup .post-types a{font-family: "RedRing";font-weight: 500;font-size:12px;color:#000;padding:15px 50px;border:1px solid #fff;display:inline-block;text-transform:uppercase;text-decoration:none;} .big-popup .post-types a:hover, .big-popup .post-types a.active{background-color:#f1f2f2;border:1px solid #f1f2f2;} .big-popup.single-research{padding-right: 20px;} .big-popup.single-research img{float:left;margin:6px 15px 15px 0;} .big-popup.single-research h2{font-family: "RedRing";font-weight: 100;font-size:36px;line-height:33px;margin-top:0;margin-bottom:15px;text-decoration:none;text-transform:none;} .big-popup.single-research h3{font-family: "RedRing";font-weight: 500;font-size:18px;line-height:21px;margin-top:0;margin-bottom:15px;text-decoration:none;text-transform:none;} .big-popup.single-research h4{font-family: "RedRing";font-weight: 300;font-size:12px;margin-top:0;text-decoration:none;text-transform:none;font-style:italic;display:inline-block;} .big-popup .read-full-article{font-family: "RedRing";font-weight: 700;font-size:11px;text-transform:uppercase;text-decoration:none;display:block;float:right;color:#000;background:url(../images/read-more-arrow.png) no-repeat center right;height:15px;padding-right:25px;} .big-popup.single-research .post-terms{margin-bottom:15px;} .video-popup #cboxContent{padding:0;background-color:transparent;} .video-popup #cboxLoadedContent{margin:0;} @media (max-height: 800px) { .big-popup .post{height:160px;padding:20px 38px 0;} .big-popup .post h3{line-height: 20px;} .big-popup .post .arrow{top:65px;} } /******************/ /* GAME ZOOM AREA */ /******************/ .game-zoom-area {position:relative;width:3268.646px;-webkit-perspective:none !important;perspective:none !important;} .game-zoom-area .drawing-wrapper{width: 100%;height: 0;padding-top: 54.58911733%;} .game-zoom-area .drawing-container{position: absolute;top: 0;left: 0;overflow: hidden;height: 100%;width: 100%;z-index:2;background-color:white;} .game-zoom-area .drawing-container.transition{transition:width 200ms ease-in-out;} .game-zoom-area .drawing-container .drawing-inner{position:absolute;width:1899.937px;height:869.042px;left:754px;top:470px;z-index:3;} .game-zoom-area .clickable{cursor:pointer;} .game-zoom-area .drawing-container .clicked{border:2px solid red;} #limiter{position: absolute;height: 100%;left: 50%;width: 10px;top: 0;background-color: white;z-index: 300;display: none;cursor:pointer;background:url(../images/limiter-marker.png) no-repeat 0 bottom #FFF;} #limiter .arrow {position:absolute;left:0;top:0;width:10px;height:20px;background:url(../images/limiter-marker.png) no-repeat 0 0;} #limiter .arrows {display:none;position:absolute;left:-15px;top:45%;width:41px;height:41px;background:url(../images/limiter-arrows.png) no-repeat 0 0;line-height:41px;font-family:"RedRing";font-size:12px;color:#000;text-indent:45px;text-transform:uppercase;} #limiter .arrows.no-tooltip{overflow:hidden;} #mouse-info{display:none;width:20px;height:20px;position:absolute;background:url(../images/popup-mouse-info.png) no-repeat 0 0;z-index:1000;pointer-events:none;} #alternative-overlay-copy{position:absolute;font-family:"RedRing";font-weight:500;font-size:80px;color:#000;top:50%;left:0;z-index: 300;margin-top: -50px;width:100%;text-align:center;pointer-events: none;} /**********/ /* LOADER */ /**********/ .loader {position: fixed;width: 100%;height: 100%;z-index: 99998;display:none;} .loader .bg{position: absolute;width: 100%;height: 100%;z-index: 1;background-color: white;opacity: 0;} .loader .spinner {width: 40px;height: 40px;margin: -20px 0 0 -20px;background-color: #f16025;border-radius: 100%;-webkit-animation: scaleout 1.0s infinite ease-in-out;animation: scaleout 1.0s infinite ease-in-out;z-index: 2;position: absolute;top: 50%;left: 50%;} @-webkit-keyframes scaleout { 0% { -webkit-transform: scale(0.0) } 100% { -webkit-transform: scale(1.0); opacity: 0; } } @keyframes scaleout { 0% { transform: scale(0.0); -webkit-transform: scale(0.0); } 100% { transform: scale(1.0); -webkit-transform: scale(1.0); opacity: 0; } } /***********/ /* OVERLAY */ /***********/ .custom-overlay {position: fixed;width: 100%;height: 100%;z-index: 999;display:none;} .custom-overlay .bg{position: absolute;width: 100%;height: 100%;z-index: 1;} .custom-overlay .popup-wrapper{position:absolute;left:50%;top:15%;z-index: 100;} .custom-overlay .popup{width:360px;height:auto;background-color:#f16025;margin-left: -50%;padding:25px 20px;} .custom-overlay .popup h3{font-family: "RedRing";font-weight: 100;font-size:18px;line-height:20px;margin-top:0;color:#fff;margin-bottom:10px;} .custom-overlay .popup h4{font-family: "RedRing";font-weight: 500;font-size:12px;margin-top:0;color:#fff;margin-bottom:15px;} .custom-overlay .popup .resources-links{position:relative;} .custom-overlay .popup .icon{height:21px;background-position:0 top;background-repeat:no-repeat;display:inline-block;cursor:pointer;vertical-align:middle;display:inline-block;} .custom-overlay .popup .icon:hover{background-position:0 bottom;} .custom-overlay .popup .icon.video-btn{width:60px;background-image:url(../images/popup-video-btn.png);margin-right:30px;text-indent: -99999px;} .custom-overlay .popup .icon.articles-btn{width:48px;background-image:url(../images/popup-articles-btn.png?new);-webkit-transition:width .4s;-moz-transition:width .4s;-o-transition:width .4s;transition:width .4s} .custom-overlay .popup .icon .articles-wrapper{height:auto;position:absolute;top:21px;left:-20px;width:400px;font-size:11px;font-family: "RedRing";font-weight: 500;color:#fff;overflow:hidden;} .custom-overlay .popup .icon .articles-wrapper a{display:block;font-style:italic;color:#fff;text-decoration:none;padding:5px 20px;} .custom-overlay .popup .icon .articles-wrapper a span{vertical-align:middle;} .custom-overlay .popup .icon .articles-wrapper a span.arrow{background:url(../images/link-arrow-white.png) no-repeat 0 0;width:16px;height:15px;display:inline-block;vertical-align:middle;margin:0 5px;} .custom-overlay .popup .icon .articles-wrapper a:hover{color:#000;} .custom-overlay .popup .icon .articles-wrapper a:hover span.arrow{background-position:0 -15px;} .custom-overlay .popup .icon .articles-inner{position:relative;top:-200px;background-color:#f16025;-webkit-transition:top .4s;-moz-transition:top .4s;-o-transition:top .4s;transition:top .4;padding:10px 0 10px;} .custom-overlay .popup .icon.articles-btn:hover{} .custom-overlay .popup .icon.articles-btn.open .articles-inner, .custom-overlay .popup .icon.articles-btn:hover .articles-inner{top:0;} .custom-overlay .popup.how-to-help{padding:60px 100px 20px;width:580px;text-align:center;position:relative;} .custom-overlay .popup.how-to-help h1{font-family: "RedRing";font-weight: 100;font-size:36px;line-height:40px;margin-top:0;margin-bottom:15px;text-decoration:none;text-transform:none;color:#fff;} .custom-overlay .popup.how-to-help label{font-family: "RedRing";font-weight: 500;font-size:14px;padding:0px 5px 30px;display:block;color:#fff;} .custom-overlay .popup.how-to-help .buttons-container{} .custom-overlay .popup.how-to-help .buttons-container.more > label{display:none;} .custom-overlay .popup.how-to-help .button-wrapper{width:180px;display:inline-block;color:#fff;margin:0 5px 100px;vertical-align:top;} .custom-overlay .popup.how-to-help .less .button-wrapper label{display:none;} .custom-overlay .popup.how-to-help .more .button-wrapper label{font-family: "RedRing";font-weight: 500;font-size:12px;padding:13px 0;display:block;color:#fff;} .custom-overlay .popup.how-to-help .buttons-container.more .hidden{display:inline-block;} .custom-overlay .popup.how-to-help .buttons-container .hidden{display:none;} .custom-overlay .popup.how-to-help .button-wrapper .button{position:relative;border:2px solid #fff;font-family: "RedRing";font-weight: 500;font-size:12px;text-transform:uppercase;text-decoration:none;line-height:36px;cursor:pointer;width:176px;height:36px;} .custom-overlay .popup.how-to-help .button-wrapper .button a{color:#fff;text-decoration:none;} .custom-overlay .popup.how-to-help .button-wrapper .button span{vertical-align:middle;} .custom-overlay .popup.how-to-help .buttons-container .button .dropdown{position:absolute;top:36px;left:-2px;display:block;height:0;overflow:hidden;-webkit-transition:height .4s;-moz-transition:height .4s;-o-transition:height .4s;transition:height .4;background-color:#F16025;width:176px;z-index: 100;border-bottom:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #fff;} .custom-overlay .popup.how-to-help .buttons-container .button .dropdown a{display:block;height:38px;line-height:42px;} .custom-overlay .popup.how-to-help .buttons-container .button .dropdown a:hover{background-color:#fff;} .custom-overlay .popup.how-to-help .buttons-container .button:hover .dropdown{height:114px;} .custom-overlay .popup.how-to-help .buttons-container .button:hover {} .custom-overlay .popup.how-to-help .icon{width:14px;height:14px;background-repeat:no-repeat;background-position:right 0;vertical-align:middle;display:inline-block;margin-right: 5px;margin-bottom: 4px} .custom-overlay .popup.how-to-help a:hover .icon{background-position:right -14px;} .custom-overlay .popup.how-to-help .button-wrapper .button.follow a:hover{color:#f16025;} .custom-overlay .popup.how-to-help .facebook .icon{background-image:url(../images/popup-icon-facebook.png);margin-left:10px;} .custom-overlay .popup.how-to-help a.facebook:hover{color:#00789c;} .custom-overlay .popup.how-to-help .twitter .icon{background-image:url(../images/popup-icon-twitter.png?new);} .custom-overlay .popup.how-to-help a.twitter:hover{color:#37AEEF;} .custom-overlay .popup.how-to-help .email .icon{background-image:url(../images/popup-icon-email.png);} .custom-overlay .popup.how-to-help a.email:hover .icon{background-position:right -28px;} .custom-overlay .popup.how-to-help a.email:hover{color:#F16025;} .custom-overlay .popup.how-to-help .button-wrapper .button .arrow{height:15px;width:16px;background:url(../images/popup-button-arrow.png) no-repeat 0 0;vertical-align:middle;display:inline-block;margin-left:5px;margin-bottom: 4px} .custom-overlay .popup.how-to-help .button-wrapper .button a:hover .arrow{background-position:0 -15px;} .custom-overlay .popup.how-to-help .button-wrapper .button a.email:hover .arrow, .custom-overlay .popup.how-to-help .button-wrapper .button.follow a:hover .arrow{background-position:0 -30px;} /*.custom-overlay .popup.how-to-help .button-wrapper .button.donate:hover{border-color:#000;color:#000;} .custom-overlay .popup.how-to-help .button-wrapper .button .icon{background-repeat:no-repeat;background-position:center 0;width:18px;height:16px;display;vertical-align:middle;display:none;} .custom-overlay .popup.how-to-help .button-wrapper .button:hover .icon{display:inline-block;} */ .custom-overlay .popup.how-to-help .bottom-bar{padding:10px 15px;box-sizing:border-box;color:#fff;font-family: "RedRing";font-weight: 700;font-size:12px;} .custom-overlay .popup.how-to-help .bottom-bar .icon{margin:0;} .custom-overlay .popup.how-to-help .bottom-bar a{color:#fff;text-decoration:none;margin-right:5px;} .custom-overlay .popup.how-to-help .bottom-bar a:hover{color:#000;} .custom-overlay .popup.how-to-help .bottom-bar .facebook-like-btn{width:auto;height:20px;display:inline-block;vertical-align:middle;text-align:left;} .custom-overlay .popup.how-to-help .bottom-bar .facebook-like-btn .icon{background-position:right -14px;background-image:url(../images/popup-icon-facebook.png);} .custom-overlay .popup.how-to-help .bottom-bar .facebook-like-btn .fb_iframe_widget{display:inline-block;} .custom-overlay .popup.how-to-help .bottom-bar .fb_iframe_widget{vertical-align:middle;} .custom-overlay .popup.how-to-help .bottom-bar .twitter-follow-btn{vertical-align:middle;height:20px;display:inline-block;overflow:hidden;text-align:left;} .custom-overlay .popup.how-to-help .bottom-bar .twitter-like-btn .icon{background-position:right -14px;} .custom-overlay .popup.how-to-help .bottom-bar .twitter-follow-btn .twitter-follow-button{vertical-align:middle;display:inline-block;} .custom-overlay .popup.how-to-help .bottom-bar .newsletter-btn{height:20px;vertical-align:middle;display:inline-block;width:14px;margin-left:5px;text-align:left;} .custom-overlay .popup.how-to-help .bottom-bar .newsletter-btn .icon{background-position:right top;background-image:url(../images/email-icon.png);height:20px;width:27px;} .custom-overlay .popup.how-to-help .bottom-bar .newsletter-btn:hover .icon{background-position:right bottom;} .custom-overlay .popup-wrapper .newsletter-form{position:absolute;display:none;bottom:0;left:0;width:100%;padding:8px 15px;box-sizing:border-box;background-color: #FFF;margin-left:-50%;text-align:center;} .custom-overlay .popup-wrapper .newsletter-form .close-btn{position:absolute;bottom:0;right:0;width:36px;height:36px;background:url(../images/newsletter-form-close.png) no-repeat center center #fff;} .custom-overlay .popup-wrapper .newsletter-form .gform_fields li:first-child{display:none;} .custom-overlay .popup-wrapper .newsletter-form .gform_validation_container{display:none;} .custom-overlay .popup-wrapper .newsletter-form .gform_footer {display:inline-block;} .custom-overlay .popup-wrapper .newsletter-form .gform_body{display:inline-block;} .custom-overlay .popup-wrapper .newsletter-form label{display:none;} .custom-overlay .popup-wrapper .newsletter-form ul{margin:0;padding:0} .custom-overlay .popup-wrapper .newsletter-form li{display:inline-block;list-style: none;} .custom-overlay .popup-wrapper .newsletter-form input{border:none;display:inline-block;color:#f16025;font-size:12px;font-weight:500;} .custom-overlay .popup-wrapper .newsletter-form input[type="text"]{text-indent:5px;width:170px;} .custom-overlay .popup-wrapper .newsletter-form input:focus{outline:none;border:none;} .custom-overlay .popup-wrapper .newsletter-form input[type="submit"]{text-indent:-999px;width:16px;background:url(../images/newsletter-submit-btn.png) no-repeat center center #fff;height:16px;} .custom-overlay .popup-wrapper .newsletter-form ::-webkit-input-placeholder { /* WebKit browsers */ color: #f16025; opacity: 0.7; } .custom-overlay .popup-wrapper .newsletter-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #f16025; opacity: 0.7; } .custom-overlay .popup-wrapper .newsletter-form moz-placeholder { /* Mozilla Firefox 19+ */ color: #f16025; opacity: 0.7; } .custom-overlay .popup-wrapper .newsletter-form :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #f16025; } .custom-overlay .popup-wrapper .newsletter-form ::selection { background: #f16025;color:#fff; /* WebKit/Blink Browsers */ } .custom-overlay .popup-wrapper .newsletter-form ::-moz-selection { background: #f16025;color:#fff; /* Gecko Browsers */ } .custom-overlay .popup-wrapper .newsletter-form form{display: inline-block;border:2px solid #f16025;position:relative;} .custom-overlay .popup-wrapper .newsletter-form .gform_body{display:inline-block;} .custom-overlay .popup-wrapper .newsletter-form .gform_ajax_spinner {position:absolute;right:1px;top:1px;} .custom-overlay .popup-wrapper .newsletter-form #gforms_confirmation_message{line-height:20px;font-family: "RedRing";font-weight: 500;font-size:12px;} .custom-overlay .popup.how-to-help .links-bar{margin-bottom:50px;} .custom-overlay .popup.how-to-help .links-bar a{font-family: "RedRing";font-weight: 500;font-size:12px;height:21px;line-height:21px;display:inline-block;text-decoration:none;color:#fff;padding:0 15px;} .custom-overlay .popup.how-to-help .links-bar a:hover{color:#000;} .custom-overlay .popup.how-to-help a.watch-video{margin-top:0;background:url(../images/popup-video-btn-no-arrow.png) top left no-repeat;padding-left:45px;} .custom-overlay .popup.how-to-help .watch-video:hover{background-position:bottom left;} .custom-overlay .popup.how-to-help a.play-again{border-right:2px solid #fff;border-left:2px solid #fff;} .custom-overlay .popup.how-to-help a.see-research{background:url(../images/popup-research-icon.png) 14px top no-repeat;padding-left:50px;} .custom-overlay .popup.how-to-help a.see-research:hover{background-position:14px bottom;} #popups-data{display:none;} /***********/ /* FOOTER */ /**********/ #footer{position:fixed;bottom:0;height:17px;width:100%;background-color:#ff6627;z-index: 2;cursor:pointer;} #footer .collapsed{display:block;} #footer label{float:right;font-family: "RedRing";font-weight: 500;font-size:12px;padding:0px 5px 0 0;display:block;line-height:17px;color:#fff;text-transform:uppercase;} #footer:hover{height:150px;} #footer:hover .collapsed{display:none;} #footer:hover .expanded{display:block;} #footer .expanded label{float:none;} #footer .logos{width:115px;background-color:#e63b00;text-align:center;color:#ff9d74;font-family: "RedRing";font-weight: 500;font-size:12px;line-height: 20px;padding-top:15px;display: block;float:left;} #footer .logos img{margin-bottom:10px;} #footer .credits{display:block;padding:25px 30px;margin-left: 115px;} #footer .logos a{text-align: center;color: #ff9d74;font-family: "RedRing";font-weight: 500;font-size: 12px;line-height: 20px;text-decoration:none;} #footer p{font-family: "RedRing";font-weight: 400;font-size:14px;color:#fff;} /******************/ /*******/ /*******/ /* MAP */ /*******/ /*******/ /*BACKGROUND*/ #background-svg svg{display:block;position:absolute;left:0px;top:0px;} #background-svg{width:3268.646px;padding-top:1784.325px;height:0;position:absolute;overflow:hidden;left:0px;top:0px;z-index:2;} #background-svg-background{width: 100%;padding-top:54.58911733%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #introduction{width:247px;padding-top:263px;height:0;position:absolute;overflow:hidden;left:839px;top:286px;z-index:100;} #home-svg{width:247px;padding-top:263px;height:0;position:absolute;overflow:hidden;left:839px;top:286px;z-index:121;display:none;} #bus-svg{width:347px;padding-top:100px;height:0;position:absolute;overflow:hidden;left:839px;top:185px;z-index:120;display:none} #train-svg{width:338px;padding-top:69px;height:0;position:absolute;overflow:hidden;left:1392px;top:506px;z-index:120;display:none} #school-svg{width:334px;padding-top:236px;height:0;position:absolute;overflow:hidden;left:839px;top:523px;z-index:120;display:none} #park-svg{width:267px;padding-top:213px;height:0;position:absolute;left:572px;top:211px;z-index:121;display:none} #baseball-field-svg{width:201px;padding-top:191px;height:0;position:absolute;overflow:hidden;left:1529px;top:567px;z-index:121;display:none} #larger_piece-svg{width:281px;padding-top:438px;height:0;position:absolute;overflow:hidden;left:1066px;top:137px;z-index:121;display:none} #factory-svg{width:306px;padding-top:244px;height:0;position:absolute;overflow:hidden;left:1087px;top:331px;z-index:126;display:none} #smaller-piece-svg{width:148px;padding-top:229px;height:0;position:absolute;overflow:hidden;left:191px;top:556px;z-index:120;display:none} #purple-neighbourhood-svg{width:280px;padding-top:253px;height:0;position:absolute;overflow:hidden;left:559px;top:406px;z-index:122;display:none} #food-svg{width:191px;padding-top:213px;height:0;position:absolute;overflow:hidden;left:1277px;top:127px;z-index:121;display:none} #wallet-svg{width:200px;padding-top:185px;height:0;position:absolute;overflow:hidden;left:839px;top:0px;z-index:122;display:none} #walking-svg{width:214px;padding-top:239px;height:0;position:absolute;overflow:hidden;left:383px;top:184px;z-index:120;display:none} #bike-svg{width:280px;padding-top:137px;height:0;position:absolute;overflow:hidden;left:559px;top:658px;z-index:120;display:none;} #book-svg{width:228px;padding-top:168px;height:0;position:absolute;overflow:hidden;left:369px;top:17px;z-index:120;display:none} #hands-svg{width:285px;padding-top:194px;height:0;position:absolute;overflow:hidden;left:1392px;top:312px;z-index:123;display:none} #police-svg{width:248px;padding-top:153px;height:0;position:absolute;overflow:hidden;left:311px;top:581px;z-index:118;display:none} #green-neighbourhood-svg{width:209px;padding-top:227px;height:0;position:absolute;overflow:hidden;left:1468px;top:112px;z-index:122;display:none} #yellow-neighbourhood-svg{width:242px;padding-top:198px;height:0;position:absolute;overflow:hidden;left:597px;top:35px;z-index:120;display:none} #trash-bins-svg{width:253px;padding-top:61px;height:0;position:absolute;overflow:hidden;left:992px;top:699px;z-index:121;display:none} #buildings-paint-svg{width:446px;padding-top:273px;height:0;position:absolute;overflow:hidden;left:112px;top:307px;z-index:110;display:none} #red-neighbourhood-svg{width:191px;padding-top:215px;height:0;position:absolute;overflow:hidden;left:0px;top:581px;z-index:119;display:none} #blue-neighbourhood-svg{width:147px;padding-top:159px;height:0;position:absolute;overflow:hidden;left:1393px;top:575px;z-index:120;display:none} #trees5-svg{width:132px;padding-top:188px;height:0;position:absolute;overflow:hidden;left:1318px;top:325px;z-index:124;display:none} #trees3-svg{width:95px;padding-top:236px;height:0;position:absolute;overflow:hidden;left:1677px;top:311px;z-index:121;display:none} /* BASEBALL FIELD */ #baseball-field-svg svg{display:block;position:absolute;left:0px;top:0px;} /*#baseball-field-svg{width:201px;padding-top:191px;height:0;position:absolute;overflow:hidden;left:1524px;top:567px;z-index:120;}*/ #baseball-field-svg-background{width: 100%;padding-top:95.09%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #baseball-field-svg-people{width: 100%;padding-top:95.09%;left: 0%;top:0%;z-index: 2;height:0;position: absolute;display:none;} #baseball-field-svg-heart{width: 9.90%;padding-top: 8.74%;left: 47.4%;top: -10%;z-index: 3;height: 0;position: absolute;-webkit-transition: 3s;-moz-transition: 3s;-o-transition: 3s;transition: 3s;opacity: 1;} #baseball-field-svg-mask-wrapper{width: 33%;height: 0;padding-top: 33%;position: absolute;z-index: 2;top: 16.3%;left: 35.8%;overflow: hidden;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);} #baseball-field-svg-mask-inner{width: 200%;height: 200%;position: absolute;top: 0;left: 0;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #baseball-field-svg-mask-inner2{background-color: #5BD065;width: 50%;height: 50%;position: absolute;top: 0;left: 0;} #baseball-field-svg.active #baseball-field-svg-mask-inner {-webkit-transform: rotate(-92deg);-moz-transform: rotate(-92deg);-ms-transform: rotate(-92deg);-o-transform: rotate(-92deg);transform: rotate(-92deg);} #baseball-field-svg.active #baseball-field-svg-heart {opacity:0;top:41%;} #baseball-field-svg-confetti {display:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:10;} #baseball-field-svg-confetti > * {-webkit-animation: baseball_field_confetti_fly 3s linear infinite;-moz-animation: baseball_field_confetti_fly 3s linear infinite;-o-animation: baseball_field_confetti_fly 3s linear infinite;animation: baseball_field_confetti_fly 3s linear infinite;z-index:10;width:1.495%;padding-top:4.470%;left:0;top:0%;height:0;position:absolute;} #baseball-field-svg-confetti * svg{-webkit-animation: baseball_field_confetti .2s linear infinite;-moz-animation: baseball_field_confetti .2s linear infinite;-o-animation: baseball_field_confetti .2s linear infinite;animation: baseball_field_confetti .2s linear infinite} #baseball-field-svg-confetti .inner {width:100%;height:100%;position:absolute;left:0;top:0;-webkit-animation: baseball_field_confetti_rotate .5s linear infinite;-moz-animation: baseball_field_confetti_rotate .5s linear infinite;-o-animation: baseball_field_confetti_rotate .5s linear infinite;animation: baseball_field_confetti_rotate .5s linear infinite;z-index:10;} #baseball-field-svg-confetti > *.duration_2s svg{-webkit-animation-duration: .2s;-moz-animation-duration: .2s;-o-animation-duration: .2s;animation-duration: .2s} #baseball-field-svg-confetti > *.duration_4s svg{-webkit-animation-duration: .4s;-moz-animation-duration: .4s;-o-animation-duration: .4s;animation-duration: .4s;} #baseball-field-svg-confetti > *.duration_6s svg{-webkit-animation-duration: .6s;-moz-animation-duration: .6s;-o-animation-duration: .6s;animation-duration: .6s;} #baseball-field-svg-confetti > *.duration_8s svg{-webkit-animation-duration: .8s;-moz-animation-duration: .8s;-o-animation-duration: .8s;animation-duration: .8s;} #baseball-field-svg-confetti > *.duration1s svg{-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;} #baseball-field-svg-confetti > *.transition3s {-webkit-animation-duration: 3s;-moz-animation-duration: 3s;-o-animation-duration: 3s;animation-duration: 3s;} #baseball-field-svg-confetti > *.transition4s {-webkit-animation-duration: 4s;-moz-animation-duration: 4s;-o-animation-duration: 4s;animation-duration: 4s;} #baseball-field-svg-confetti > *.transition5s {-webkit-animation-duration: 5s;-moz-animation-duration: 5s;-o-animation-duration: 5s;animation-duration: 5s;} #baseball-field-svg-confetti > *.transition6s {-webkit-animation-duration: 6s;-moz-animation-duration: 6s;-o-animation-duration: 6s;animation-duration: 6s;} #baseball-field-svg-confetti > *.transition7s {-webkit-animation-duration: 7s;-moz-animation-duration: 7s;-o-animation-duration: 7s;animation-duration: 7s;} @-webkit-keyframes baseball_field_confetti{ from {-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);} to {-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);} } @-webkit-keyframes baseball_field_confetti_rotate{ from {-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);} to {-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);} } @-webkit-keyframes baseball_field_confetti_fly{ from {top:-10%;} to {top: 100%;} } @keyframes baseball_field_confetti{ from {-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);} to {-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);} } @keyframes baseball_field_confetti_rotate{ from {-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);} to {-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);} } @keyframes baseball_field_confetti_fly{ from {top:-10%;} to {top: 100%;} } /* BIKE */ #bike-svg svg{display:block;position:absolute;left:0px;top:0px;} /*#bike-svg{width:280px;padding-top:137px;height:0;position:absolute;overflow:hidden;left:554px;top:656px;z-index:120;}*/ #bike-svg-background{width: 100%;padding-top:48.96%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #bike-svg-coin-1{width: 17.74%;padding-top:17.74%;left: 32.59%;top:45.84%;z-index: 2;height:0;position: absolute;visibility:hidden;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);} #bike-svg #bike-svg-coin-1 g path{visibility:hidden;stroke-dasharray:52;stroke-dashoffset:52;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #bike-svg #bike-svg-coin-1.delay_3s g path {-webkit-transition-delay:.3s;-moz-transition-delay:.3s;-o-transition-delay:.3s;transition-delay:.3s;} #bike-svg #bike-svg-coin-1 g line{visibility:hidden;stroke-dasharray:3;stroke-dashoffset:3;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #bike-svg #bike-svg-coin-1.delay_3s g line {-webkit-transition-delay:.3s;-moz-transition-delay:.3s;-o-transition-delay:.3s;transition-delay:.3s;} #bike-svg-coin-2{width: 17.74%;padding-top:17.74%;left: 72.24%;top:45.84%;z-index: 2;height:0;position: absolute;visibility:hidden;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;-webkit-transform:rotatey(-90deg);-moz-transform:rotatey(-90deg);-ms-transform:rotatey(-90deg);-o-transform:rotatey(-90deg);transform:rotatey(-90deg);} #bike-svg #bike-svg-coin-2 g path{visibility:hidden;stroke-dasharray:52;stroke-dashoffset:52;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #bike-svg #bike-svg-coin-2.delay_3s g path {-webkit-transition-delay:.3s;-moz-transition-delay:.3s;-o-transition-delay:.3s;transition-delay:.3s;} #bike-svg #bike-svg-coin-2 g line{visibility:hidden;stroke-dasharray:3;stroke-dashoffset:3;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #bike-svg #bike-svg-coin-2.delay_3s g line {-webkit-transition-delay:.3s;-moz-transition-delay:.3s;-o-transition-delay:.3s;transition-delay:.3s;} #bike-svg-lines{width: 100%;padding-top:48.96%;left: 0%;top:0%;z-index: 3;height:0;position: absolute;} #bike-svg-lines g line {visibility:hidden;stroke-dasharray:58;stroke-dashoffset:58;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #bike-svg-lines.delay1s g line {-webki-transition-delay:1s;-moz-transition-delay:1s;-o-transition-delay:1s;transition-delay:1s;} #bike-svg-heart-1{width: 6.77%;padding-top:6.09%;left: 105%;top:8%;z-index: 3;height:0;position: absolute;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #bike-svg-heart-1.delay1s {-webki-transition-delay:1s;-moz-transition-delay:1s;-o-transition-delay:1s;transition-delay:1s;} #bike-svg-heart-1 svg {-webkit-animation: bike_item_animation .2s linear infinite;-moz-animation: bike_item_animation .2s linear infinite;-o-animation: bike_item_animation .2s linear infinite;animation: bike_item_animation .2s linear infinite} #bike-svg-heart-2{width: 6.77%;padding-top:6.09%;left: 151%;top:32%;z-index: 3;height:0;position: absolute;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #bike-svg-heart-2.delay1s {-webki-transition-delay:1s;-moz-transition-delay:1s;-o-transition-delay:1s;transition-delay:1s;} #bike-svg-heart-2 svg {-webkit-animation: bike_item_animation .4s linear infinite;-moz-animation: bike_item_animation .4s linear infinite;-o-animation: bike_item_animation .4s linear infinite;animation: bike_item_animation .4s linear infinite;} #bike-svg-heart-3{width: 11.06%;padding-top:9.95%;left: 112%;top:41%;z-index: 3;height:0;position: absolute;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #bike-svg-heart-3.delay1s {-webki-transition-delay:1s;-moz-transition-delay:1s;-o-transition-delay:1s;transition-delay:1s;} #bike-svg-heart-3 svg {-webkit-animation: bike_item_animation .3s linear infinite;-moz-animation: bike_item_animation .3s linear infinite;-o-animation: bike_item_animation .3s linear infinite;animation: bike_item_animation .3s linear infinite;} #bike-svg-cross{width: 9.40%;padding-top:9.40%;left: 130%;top:10%;z-index: 3;height:0;position: absolute;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #bike-svg-cross.delay1s {-webki-transition-delay:1s;-moz-transition-delay:1s;-o-transition-delay:1s;transition-delay:1s;} #bike-svg-cross svg {-webkit-animation: bike_item_animation .5s linear infinite;-moz-animation: bike_item_animation .5s linear infinite;-o-animation: bike_item_animation .5s linear infinite;animation: bike_item_animation .5s linear infinite;} #bike-svg.active #bike-svg-coin-1, #bike-svg.active #bike-svg-coin-2 {visibility:visible;-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);} #bike-svg.active #bike-svg-heart-1{left:5%;} #bike-svg.active #bike-svg-heart-2{left: 51%;} #bike-svg.active #bike-svg-heart-3{left: 12%;} #bike-svg.active #bike-svg-cross{left: 30%;} #bike-svg.inactive g *, #bike-svg.active g *{visibility:visible !important} #bike-svg.active g *{stroke-dashoffset:0 !important} @-webkit-keyframes bike_item_animation { 0%{margin-top:0px;} 25%{margin-top:-2px;} 75%{margin-top:2px;} 100%{margin-top:0px;} } @keyframes bike_item_animation { 0%{margin-top:0px;} 25%{margin-top:-2px;} 75%{margin-top:2px;} 100%{margin-top:0px;} } /* BLUE NEIGHBOURHOOD */ #blue-neighbourhood-svg svg{display:block;position:absolute;left:0px;top:0px;} /*#blue-neighbourhood-svg{width:147px;padding-top:159px;height:0;position:absolute;overflow:hidden;left:1387px;top:574px;z-index:120;}*/ #blue-neighbourhood-svg-backgorund{width: 100%;padding-top:108.36%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;display:block} #blue-neighbourhood-svg-building-1{width: 37.64%;padding-top:33.74%;left: 5.42%;top:7.21%;z-index: 2;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #blue-neighbourhood-svg-building-1.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #blue-neighbourhood-svg-building-1 g.drawing rect{visibility:hidden;stroke-dasharray:40;stroke-dashoffset:40;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #blue-neighbourhood-svg-building-1-rented.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #blue-neighbourhood-svg-building-1-rented{width: 37.64%;padding-top:33.74%;left: 5.42%;top:7.21%;z-index: 3;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #blue-neighbourhood-svg-building-2{width: 21.58%;padding-top:22.36%;left: 49.58%;top:10.48%;z-index: 4;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #blue-neighbourhood-svg-building-2.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #blue-neighbourhood-svg-building-2 g.drawing polyline{visibility:hidden;stroke-dasharray:45;stroke-dashoffset:45;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #blue-neighbourhood-svg-building-2-rented{width: 21.58%;padding-top:22.36%;left: 49.58%;top:10.48%;z-index: 5;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #blue-neighbourhood-svg-building-2-rented.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #blue-neighbourhood-svg-building-3{width: 24.54%;padding-top:23.74%;left: 75.45%;top:19.16%;z-index: 6;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #blue-neighbourhood-svg-building-3.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #blue-neighbourhood-svg-building-3 g.drawing rect{visibility:hidden;stroke-dasharray:40;stroke-dashoffset:40;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #blue-neighbourhood-svg-building-3 g.drawing polyline{visibility:hidden;stroke-dasharray:45;stroke-dashoffset:45;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #blue-neighbourhood-svg-building-3-rented{width: 24.54%;padding-top:23.74%;left: 75.45%;top:19.16%;z-index: 7;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #blue-neighbourhood-svg-building-3-rented.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #blue-neighbourhood-svg-building-4{width: 26.26%;padding-top:30.05%;left: 33.14%;top:26.61%;z-index: 8;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #blue-neighbourhood-svg-building-4.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #blue-neighbourhood-svg-building-4 g.drawing rect{visibility:hidden;stroke-dasharray:40;stroke-dashoffset:40;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #blue-neighbourhood-svg-building-4-rented{width: 26.26%;padding-top:30.05%;left: 33.14%;top:26.61%;z-index: 9;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #blue-neighbourhood-svg-building-4-rented.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #blue-neighbourhood-svg-building-5{width: 34.81%;padding-top:39.85%;left: 5.42%;top:48.32%;z-index: 10;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #blue-neighbourhood-svg-building-5.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #blue-neighbourhood-svg-building-5 g.drawing rect{visibility:hidden;stroke-dasharray:50;stroke-dashoffset:50;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #blue-neighbourhood-svg-building-5 g.drawing circle{visibility:hidden;stroke-dasharray:30;stroke-dashoffset:30;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #blue-neighbourhood-svg-building-5-rented{width: 34.81%;padding-top:39.85%;left: 5.42%;top:48.32%;z-index: 11;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #blue-neighbourhood-svg-building-5-rented.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #blue-neighbourhood-svg-building-6{width: 41.47%;padding-top:47.47%;left: 51.48%;top:41.27%;z-index: 12;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #blue-neighbourhood-svg-building-6.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #blue-neighbourhood-svg-building-6 g.drawing polyline{visibility:hidden;stroke-dasharray:70;stroke-dashoffset:70;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #blue-neighbourhood-svg-building-6 g.drawing rect{visibility:hidden;stroke-dasharray:50;stroke-dashoffset:50;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #blue-neighbourhood-svg-building-6-rented{width: 41.47%;padding-top:47.47%;left: 51.48%;top:41.27%;z-index: 13;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #blue-neighbourhood-svg-building-6-rented.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #blue-neighbourhood-svg.active g.drawing *, #blue-neighbourhood-svg.inactive g.drawing * {visibility:visible;} #blue-neighbourhood-svg.active g.drawing *{stroke-dashoffset:0} #blue-neighbourhood-svg.active #blue-neighbourhood-svg-building-1, #blue-neighbourhood-svg.active #blue-neighbourhood-svg-building-2, #blue-neighbourhood-svg.active #blue-neighbourhood-svg-building-3, #blue-neighbourhood-svg.active #blue-neighbourhood-svg-building-4, #blue-neighbourhood-svg.active #blue-neighbourhood-svg-building-5, #blue-neighbourhood-svg.active #blue-neighbourhood-svg-building-6{-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);} #blue-neighbourhood-svg.active #blue-neighbourhood-svg-building-1-rented, #blue-neighbourhood-svg.active #blue-neighbourhood-svg-building-2-rented, #blue-neighbourhood-svg.active #blue-neighbourhood-svg-building-3-rented, #blue-neighbourhood-svg.active #blue-neighbourhood-svg-building-4-rented, #blue-neighbourhood-svg.active #blue-neighbourhood-svg-building-5-rented, #blue-neighbourhood-svg.active #blue-neighbourhood-svg-building-6-rented{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);} /* BOOK */ #book-svg svg{display:block;position:absolute;left:0;top:0;} /*#book-svg{width:228px;padding-top:168px;height:0;position:absolute;overflow:hidden;left:366px;top:16px;z-index:120;}*/ #book-svg-backgorund{width: 89.47%;position: absolute;bottom: 0;right: 0;z-index: 2;height:0;padding-top:39.2%;} #book-svg-book{width: 70.17%;position: absolute;z-index: 3;bottom: 0;left: 20%;height:0;padding-top:58.69%;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #book-svg-book g line {visibility:hidden;stroke-dasharray:20;stroke-dashoffset:20;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #book-svg-book g polyline {visibility:hidden;stroke-dasharray:80;stroke-dashoffset:80;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #book-svg.active #book-svg-book{left:0;} #book-svg-ruler{width: 13.16%;position:absolute;z-index: 4;bottom: -94%;right: 0;height:0;padding-top:67.4%;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #book-svg.active #book-svg-ruler{bottom:0;} #book-svg-apple{width: 25.44%;position:absolute;z-index: 1;height: 0;padding-top:28.42%;left: 50%;top: 54%;-webkit-transform:scale(.2);-moz-transform:scale(.2);-ms-transform:scale(.2);-o-transform:scale(.2);transform:scale(.2);-webkit-transition: all .5s ease-in-out, opacity .0001s ease-in-out;-moz-transition: all .5s ease-in-out, opacity .0001s ease-in-out;-o-transition: all .5s ease-in-out, opacity .0001s ease-in-out;transition: all .5s ease-in-out, opacity .0001s ease-in-out;-webkit-transition-delay:.5s, .5s;-moz-transition-delay:.5s, .5s;-o-transition-delay:.5s, .5s;transition-delay:.5s, .5s;opacity: 1;} #book-svg.active #book-svg-apple{-webkit-transition-delay:0s,.4999s;-moz-transition-delay:0s,.4999s;-o-transition-delay:0s,.4999s;transition-delay:0s,.4999s;top:4%;left:55%;-webkit-transform:scale(.7);-moz-transform:scale(.7);-ms-transform:scale(.7);-o-transform:scale(.7);transform:scale(.7);opacity:0;} #book-svg-apple-2{width: 25.44%;position:absolute;z-index: 5;height: 0;padding-top:28.42%;left: 55%;top: 4%;-webkit-transform:scale(.7);-moz-transform:scale(.7);-ms-transform:scale(.7);-o-transform:scale(.7);transform:scale(.7);-webkit-transition: all .5s ease-in-out, opacity .0001s ease-in-out;-moz-transition: all .5s ease-in-out, opacity .0001s ease-in-out;-o-transition: all .5s ease-in-out, opacity .0001s ease-in-out;transition: all .5s ease-in-out, opacity .0001s ease-in-out;-webkit-transition-delay:0s, .4999s;-moz-transition-delay:0s, .4999s;-o-transition-delay:0s, .4999s;transition-delay:0s, .4999s;opacity:0;} #book-svg.active #book-svg-apple-2{-webkit-transition-delay:.5s,.5s;-moz-transition-delay:.5s,.5s;-o-transition-delay:.5s,.5s;transition-delay:.5s,.5s;top:50%;left:60%;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:1;} #book-svg.inactive g *, #book-svg.active g * {visibility:visible;} #book-svg.active g * {stroke-dashoffset:0;} /* BRIDGE */ #bridge-svg svg{display:block;position:absolute;left:0;top:0;} /*#bridge-svg{width:306px;padding-top:185px;height:0;position:absolute;overflow:hidden;left:1081px;top:574px;z-index:120;}*/ #bridge-svg-background{width: 100%;padding-top:60.46%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;display:block} /* BUILDINGS PAINT */ #buildings-paint-svg svg{display:block;position:absolute;left:0px;top:0px;} /*#buildings-paint-svg{width:446px;padding-top:273px;height:0;position:absolute;overflow:hidden;left:110px;top:306px;z-index:110;}*/ #buildings-paint-svg-background{width: 100%;padding-top:61.12%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #buildings-paint-svg-building-1{width: 25.05%;padding-top:37.17%;left: 30.63%;top:0%;z-index: 2;height:0;position: absolute;} #buildings-paint-svg-building-1 g.drawing line {visible:hidden;stroke-dasharray:134;stroke-dashoffset:134;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #buildings-paint-svg-building-2{width: 30.96%;padding-top:12.82%;left: 3.57%;top:59.23%;z-index: 4;height:0;position: absolute;} #buildings-paint-svg-building-2 g.drawing polyline{visible:hidden;stroke-dasharray:80;stroke-dashoffset:80;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #buildings-paint-svg-building-2 g.drawing line{visible:hidden;stroke-dasharray:138;stroke-dashoffset:138;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #buildings-paint-svg-building-2 g.drawing rect{visible:hidden;stroke-dasharray:68;stroke-dashoffset:68;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #buildings-paint-svg-building-3{width: 11.39%;padding-top:16.54%;left: 12.94%;top:33.00%;z-index: 3;height:0;position: absolute;} #buildings-paint-svg-building-4{width: 29.31%;padding-top:24.68%;left: 67.70%;top:54.43%;z-index: 6;height:0;position: absolute;} #buildings-paint-svg-building-4 g.drawing polyline{visible:hidden;stroke-dasharray:234;stroke-dashoffset:234;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #buildings-paint-svg-building-4 g.drawing line{visible:hidden;stroke-dasharray:106;stroke-dashoffset:106;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #buildings-paint-svg-building-4 g.drawing rect{visible:hidden;stroke-dasharray:90;stroke-dashoffset:90;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #buildings-paint-svg-building-5{width: 9.35%;padding-top:10.86%;left: 61.23%;top:42.97%;z-index: 5;height:0;position: absolute;} #buildings-paint-svg-building-5 g.drawing rect{visible:hidden;stroke-dasharray:56;stroke-dashoffset:56;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #buildings-paint-svg-building-5 g.drawing line{visible:hidden;stroke-dasharray:41;stroke-dashoffset:41;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #buildings-paint-svg-building-5 g.drawing polyline{visible:hidden;stroke-dasharray:57;stroke-dashoffset:57;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #buildings-paint-svg-paint{width: 19.22%;padding-top:16.59%;left: 41.17%;top:69.37%;z-index: 7;height:0;position: absolute;} #buildings-paint-svg-paint g.brush{-webkit-animation: buildings_paint_brush .5s linear infinite;-moz-animation: buildings_paint_brush .5s linear infinite;-o-animation: buildings_paint_brush .5s linear infinite;animation: buildings_paint_brush .5s linear infinite;-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-o-animation-play-state:paused;animation-play-state:paused} #buildings-paint-svg-paint g.drawing line{visible:hidden;stroke-dasharray:23;stroke-dashoffset:23;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #buildings-paint-svg-paint g.drawing circle{visible:hidden;stroke-dasharray:23;stroke-dashoffset:23;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #buildings-paint-svg-tree{width: 6.33%;padding-top:14.89%;left: 2.11%;top:72.74%;z-index: 8;height:0;position: absolute;} #buildings-paint-svg.active g.drawing *, #buildings-paint-svg.inactive g.drawing * {visibility:visible} #buildings-paint-svg.active g.drawing * {stroke-dashoffset:0} #buildings-paint-svg.active #buildings-paint-svg-paint g.brush {-webkit-animation-play-state:running;-moz-animation-play-state:running;-o-animation-play-state:running;animation-play-state:running} @-webkit-keyframes buildings_paint_brush{ 0% {-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0);} 50% {-webkit-transform:translate(0,-10px);-moz-transform:translate(0,-10px);-ms-transform:translate(0,-10px);-o-transform:translate(0,-10px);transform:translate(0,-10px);} 100% {-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0);} } @keyframes buildings_paint_brush{ 0% {-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0);} 50% {-webkit-transform:translate(0,-10px);-moz-transform:translate(0,-10px);-ms-transform:translate(0,-10px);-o-transform:translate(0,-10px);transform:translate(0,-10px);} 100% {-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0);} } /* BUS */ #bus-svg svg{display:block;position:absolute;left:0;top:0;} /*#bus-svg{width:347px;padding-top:100px;height:0;position:absolute;overflow:hidden;left:834px;top:185px;z-index:120;}*/ #bus-svg-background{width: 100%;padding-top:28.81%;left: 0;top:0;z-index: 1;height:0;position: absolute;} #bus-svg-bus{width: 69.04%;padding-top:15.42%;left: 06.20%;top:0;z-index: 2;height:0;position: absolute;} #bus-svg-cross-1{width: 08.08%;padding-top:08.08%;left:28.92%;top:100%;z-index: 3;height:0;position: absolute;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #bus-svg-cross-2{width: 04.85%;padding-top:04.85%;left:140%;top:100%;z-index: 4;height:0;position: absolute;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #bus-svg-sign{width: 08.06%;padding-top:24.24%;left:38.73%;top:04.14%;z-index: 5;height:0;position: absolute;} #bus-svg-steps-blue{width: 42.24%;padding-top:05.45%;left:-03.44%;top:62.09%;z-index: 6;height:0;position: absolute;} #bus-svg-steps-blue path {display:none;} #bus-svg-steps-violet{width: 43.12%;padding-top:06.19%;left:-11.98%;top:73.78%;z-index: 7;height:0;position: absolute;} #bus-svg-steps-violet path {display:none;} #bus-svg-steps-red{width: 31.01%;padding-top:04.15%;left:47.49%;top:65.02%;z-index: 8;height:0;position: absolute;} #bus-svg-steps-red path {display:none;} #bus-svg-steps-orange{width: 34.80%;padding-top:07.33%;left:54.98%;top:69.36%;z-index: 9;height:0;position: absolute;} #bus-svg-steps-orange path {display:none;} #bus-svg.active #bus-svg-cross-1{top:4.89%;} #bus-svg.active #bus-svg-cross-2{left:51.49%;top:31.88%;} #bus-svg #bus-svg-bus g line, #bus-svg #bus-svg-bus g polyline, #bus-svg #bus-svg-bus g circle{visibility:hidden;-webkit-transition: 1.5s;-moz-transition:1.5s;-o-transition:1.5s;transition:1.5s;} #bus-svg #bus-svg-bus g circle{stroke-dasharray: 60;stroke-dashoffset: 60} #bus-svg #bus-svg-bus g line{stroke-dasharray: 41;stroke-dashoffset: 41} #bus-svg #bus-svg-bus g polyline{stroke-dasharray: 112;stroke-dashoffset: 112;} #bus-svg.inactive #bus-svg-bus g line, #bus-svg.inactive #bus-svg-bus g circle, #bus-svg.active #bus-svg-bus g polyline, #bus-svg.inactive #bus-svg-bus g polyline, #bus-svg.active #bus-svg-bus g line, #bus-svg.active #bus-svg-bus g circle{visibility:visible;} #bus-svg.active #bus-svg-bus g polyline, #bus-svg.active #bus-svg-bus g line, #bus-svg.active #bus-svg-bus g circle{stroke-dashoffset: 0;} #bus-svg.active #bus-svg-bus svg g line, #bus-svg.active #bus-svg-bus svg g polyline, #bus-svg.active #bus-svg-bus svg > path { -webkit-animation: bus_engine_animation .2s infinite; -moz-animation: bus_engine_animation .2s infinite; -o-animation: bus_engine_animation .2s infinite; animation: bus_engine_animation .2s infinite; } @-webkit-keyframes bus_engine_animation{ 0% {-webkit-transform: translate(0,0);-moz-transform: translate(0,0);-ms-transform: translate(0,0);-o-transform: translate(0,0);transform: translate(0,0);} 50% {-webkit-transform: translate(0,-5px);-moz-transform: translate(0,-5px);-ms-transform: translate(0,-5px);-o-transform: translate(0,-5px);transform: translate(0,-5px);} 100% {-webkit-transform: translate(0,0);-moz-transform: translate(0,0);-ms-transform: translate(0,0);-o-transform: translate(0,0);transform: translate(0,0);} } @keyframes bus_engine_animation{ 0% {-webkit-transform: translate(0,0);-moz-transform: translate(0,0);-ms-transform: translate(0,0);-o-transform: translate(0,0);transform: translate(0,0);} 50% {-webkit-transform: translate(0,-5px);-moz-transform: translate(0,-5px);-ms-transform: translate(0,-5px);-o-transform: translate(0,-5px);transform: translate(0,-5px);} 100% {-webkit-transform: translate(0,0);-moz-transform: translate(0,0);-ms-transform: translate(0,0);-o-transform: translate(0,0);transform: translate(0,0);} } #bus-svg.inactive #bus-svg-bus svg > path {-webkit-transform: translate(0,0);-moz-transform: translate(0,0);-ms-transform: translate(0,0);-o-transform: translate(0,0);transform: translate(0,0);} /* FACTORY */ #factory-svg svg{display:block;position:absolute;left:0;top:0;} /*#factory-svg{width:306px;padding-top:244px;height:0;position:absolute;overflow:hidden;left:1081px;top:330px;z-index:126;}*/ #factory-svg-backgorund{position: absolute;bottom: 0;right: 0;z-index: 1;height:0;width: 100%;padding-top:79.713%;} /* FIELDS */ #fields-svg svg{display:block;position:absolute;left:0px;top:0px;} /*#fields-svg{width:114px;padding-top:281px;height:0;position:absolute;overflow:hidden;left:0px;top:362px;z-index:10;}*/ #fields-svg-backgorund{width: 100%;padding-top:246.49%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;display:block} /* FOOD */ #food-svg svg{display:block;position:absolute;left:0px;top:0px;} /*#food-svg{width:191px;padding-top:213px;height:0;position:absolute;overflow:hidden;left:1272px;top:126px;z-index:121;}*/ #food-svg-background{width: 100%;padding-top:111.51%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #food-svg-cabbage{width: 41.84%;padding-top:40.21%;left: 55.64%;top:0%;z-index: 1;height:0;position: absolute;} #food-svg-cabbage g path {stroke-dasharray: 50;stroke-dashoffset:50;visibility:hidden;transition:1s;} #food-svg-orange{width: 100%;padding-top:111.51%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #food-svg-orange g circle {visibility:hidden;opacity:0;transition: 1s;} #food-svg-orange-bite{width: 100%;padding-top:111.51%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;display:none;} #food-svg-baguette{width: 100%;padding-top:111.51%;left: 0%;top:-1.2%;z-index: 1;height:0;position: absolute;} #food-svg-baguette-bite{width: 100%;padding-top:111.51%;left: 0%;top:-1.2%;z-index: 1;height:0;position: absolute;display:none;} #food-svg.active #food-svg-orange g circle{visibility:visible;opacity:1;} #food-svg.active #food-svg-cabbage g path{visibility:visible;stroke-dashoffset:0} /* GREEN NEIGHBOURHOOD */ #green-neighbourhood-svg svg{display:block;position:absolute;left:0px;top:0px;} /*#green-neighbourhood-svg{width:209px;padding-top:227px;height:0;position:absolute;overflow:hidden;left:1463px;top:111px;z-index:122;}*/ #green-neighbourhood-svg-backgorund{width: 100%;padding-top:109%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #green-neighbourhood-svg-building-1{width: 12.73%;padding-top:22%;left: 26%;top:8%;z-index: 2;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #green-neighbourhood-svg-building-1.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #green-neighbourhood-svg-building-1 g.drawing rect{visibility:hidden;stroke-dasharray:50;stroke-dashoffset:50;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #green-neighbourhood-svg-building-1-flip{width: 12.73%;padding-top:22%;left: 26%;top:8%;z-index: 3;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #green-neighbourhood-svg-building-1-flip.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #green-neighbourhood-svg-building-2{width: 25.61%;padding-top:26%;left: 5%;top:15%;z-index: 4;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #green-neighbourhood-svg-building-2.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #green-neighbourhood-svg-building-2 g.drawing polyline{visibility:hidden;stroke-dasharray:60;stroke-dashoffset:60;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #green-neighbourhood-svg-building-2 g.drawing rect{visibility:hidden;stroke-dasharray:52;stroke-dashoffset:52;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #green-neighbourhood-svg-building-2-flip{width: 25.61%;padding-top:26%;left: 5%;top:15%;z-index: 5;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #green-neighbourhood-svg-building-2-flip.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #green-neighbourhood-svg-building-3{width: 20.92%;padding-top:36%;left: 68%;top:8%;z-index: 6;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #green-neighbourhood-svg-building-3.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #green-neighbourhood-svg-building-3 g.drawing polyline{visibility:hidden;stroke-dasharray:60;stroke-dashoffset:60;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #green-neighbourhood-svg-building-3-flip{width: 20.92%;padding-top:36%;left: 68%;top:8%;z-index: 7;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #green-neighbourhood-svg-building-3-flip.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #green-neighbourhood-svg-building-4{width: 21.58%;padding-top:22%;left: 38%;top:35%;z-index: 8;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #green-neighbourhood-svg-building-4.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #green-neighbourhood-svg-building-4 g.drawing polyline{visibility:hidden;stroke-dasharray:60;stroke-dashoffset:60;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #green-neighbourhood-svg-building-4-flip{width: 21.58%;padding-top:22%;left: 38%;top:35%;z-index: 9;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #green-neighbourhood-svg-building-4-flip.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #green-neighbourhood-svg-building-5{width: 12.56%;padding-top:22%;left: 16%;top:51%;z-index: 10;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #green-neighbourhood-svg-building-5.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #green-neighbourhood-svg-building-5 g.drawing polyline{visibility:hidden;stroke-dasharray:60;stroke-dashoffset:60;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #green-neighbourhood-svg-building-5-flip{width: 12.56%;padding-top:22%;left: 16%;top:51%;z-index: 11;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #green-neighbourhood-svg-building-5-flip.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #green-neighbourhood-svg-building-6{width: 15.8%;padding-top:32%;left: 4%;top:53%;z-index: 12;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #green-neighbourhood-svg-building-6.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #green-neighbourhood-svg-building-6 g.drawing rect{visibility:hidden;stroke-dasharray:50;stroke-dashoffset:50;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #green-neighbourhood-svg-building-6-flip{width: 15.8%;padding-top:32%;left: 4%;top:53%;z-index: 13;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #green-neighbourhood-svg-building-6-flip.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #green-neighbourhood-svg-building-7{width: 19.15%;padding-top:27%;left: 34%;top:62%;z-index: 14;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #green-neighbourhood-svg-building-7.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #green-neighbourhood-svg-building-7 g.drawing polyline{visibility:hidden;stroke-dasharray:60;stroke-dashoffset:60;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #green-neighbourhood-svg-building-7 g.drawing rect{visibility:hidden;stroke-dasharray:50;stroke-dashoffset:50;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #green-neighbourhood-svg-building-7-flip{width: 19.15%;padding-top:27%;left: 34%;top:62%;z-index: 15;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #green-neighbourhood-svg-building-7-flip.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #green-neighbourhood-svg-building-8{width: 32.47%;padding-top:37%;left: 68%;top:49%;z-index: 16;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #green-neighbourhood-svg-building-8.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #green-neighbourhood-svg-building-8 g.drawing polyline{visibility:hidden;stroke-dasharray:60;stroke-dashoffset:60;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #green-neighbourhood-svg-building-8 g.drawing rect{visibility:hidden;stroke-dasharray:50;stroke-dashoffset:50;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #green-neighbourhood-svg-building-8-flip{width: 32.47%;padding-top:37%;left: 68%;top:49%;z-index: 17;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #green-neighbourhood-svg-building-8-flip.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #green-neighbourhood-svg-tree{width: 14.04%;padding-top:29%;left: 46%;top:0%;z-index: 18;height:0;position: absolute;} #green-neighbourhood-svg.active g.drawing *, #green-neighbourhood-svg.inactive g.drawing * {visibility:visible;} #green-neighbourhood-svg.active g.drawing *{stroke-dashoffset:0} #green-neighbourhood-svg.active #green-neighbourhood-svg-building-1, #green-neighbourhood-svg.active #green-neighbourhood-svg-building-2, #green-neighbourhood-svg.active #green-neighbourhood-svg-building-3, #green-neighbourhood-svg.active #green-neighbourhood-svg-building-4, #green-neighbourhood-svg.active #green-neighbourhood-svg-building-5, #green-neighbourhood-svg.active #green-neighbourhood-svg-building-6, #green-neighbourhood-svg.active #green-neighbourhood-svg-building-7, #green-neighbourhood-svg.active #green-neighbourhood-svg-building-8 {-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);} #green-neighbourhood-svg.active #green-neighbourhood-svg-building-1-flip, #green-neighbourhood-svg.active #green-neighbourhood-svg-building-2-flip, #green-neighbourhood-svg.active #green-neighbourhood-svg-building-3-flip, #green-neighbourhood-svg.active #green-neighbourhood-svg-building-4-flip, #green-neighbourhood-svg.active #green-neighbourhood-svg-building-5-flip, #green-neighbourhood-svg.active #green-neighbourhood-svg-building-6-flip, #green-neighbourhood-svg.active #green-neighbourhood-svg-building-7-flip, #green-neighbourhood-svg.active #green-neighbourhood-svg-building-8-flip{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);} /* GROUND */ #ground-svg svg{display:block;position:absolute;left:0;top:0;} /*#ground-svg{width:1330px;padding-top:109px;height:0;position:absolute;overflow:hidden;left:188px;top:759px;z-index:100;}*/ #ground-svg-background{width: 100%;padding-top:8.2%;left:0;top:0;z-index:1;height:0;position:absolute;display:block} /* HANDS */ #hands-svg svg{display:block;position:absolute;left:0px;top:0px;} /*#hands-svg{width:285px;padding-top:194px;height:0;position:absolute;overflow:hidden;left:1386px;top:311px;z-index:123;}*/ #hands-svg-background{width: 100%;padding-top:68.23%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #hands-svg-hand-left-thumb{width: 65.38%;padding-top:31.75%;z-index: 2;height:0;position: absolute;top: 26%;left: -6%;-webkit-transform: rotate(10deg);-moz-transform: rotate(10deg);-ms-transform: rotate(10deg);-o-transform: rotate(10deg);transform: rotate(10deg);-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #hands-svg-hand-right{width: 62.10%;padding-top:28.94%;z-index: 3;height:0;position: absolute;left: 62%;-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-ms-transform: rotate(-10deg);-o-transform: rotate(-10deg);transform: rotate(-10deg);top: 30%;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #hands-svg-hand-left{width: 65.38%;padding-top:31.75%;z-index: 4;height:0;position: absolute;top: 26%;left: -6%;-webkit-transform: rotate(10deg);-moz-transform: rotate(10deg);-ms-transform: rotate(10deg);-o-transform: rotate(10deg);transform: rotate(10deg);-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #hands-svg #hands-svg-hand-left g line {visibility:hidden;stroke-dasharray:120;stroke-dashoffset:120;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #hands-svg-shield{width: 16.63%;padding-top:17.89%;left: 52.06%;top:31.85%;z-index: 5;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;} #hands-svg-shield.delay_5s{-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #hands-svg-shield.delay_25s{-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #hands-svg-shield-star{width: 16.63%;padding-top:17.89%;left: 52.06%;top:31.85%;z-index: 5;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;} #hands-svg-shield-star.delay_5s{-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #hands-svg-shield-star.delay_25s{-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #hands-svg-shield-star svg {opacity:0;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #hands-svg-shield-smile{width: 16.63%;padding-top:17.89%;left: 52.06%;top:31.85%;z-index: 5;height:0;position: absolute;visibility:hidden;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;} #hands-svg-shield-smile.delay_75s{-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s;} #hands-svg.active #hands-svg-hand-left {left:6.46%;top:34.59%;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);} #hands-svg.active #hands-svg-hand-left-thumb {left: 6.46%;top:34.59%;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);} #hands-svg.active #hands-svg-hand-right {left:49.27%;top:38.73%;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);} #hands-svg.active #hands-svg-shield-star svg {opacity:1;} #hands-svg.active #hands-svg-shield-smile {-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);} #hands-svg.active #hands-svg-shield{-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);} #hands-svg.active #hands-svg-shield-star{-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);} #hands-svg.inactive #hands-svg-shield-smile, #hands-svg.active #hands-svg-shield-smile, #hands-svg.inactive #hands-svg-shield-star, #hands-svg.active #hands-svg-shield-star, #hands-svg.inactive g *, #hands-svg.active g * {visibility:visible !important;} #hands-svg.active g * {stroke-dashoffset:0 !important} /* HOME */ #home-svg svg{display:block;position:absolute;left:0;top:0;} #home-svg-backgorund{width: 100%;position: absolute;top:0;left:0;z-index: 1;height:0;padding-top:106.78%;} #home-svg .drawing polyline {visibility:hidden;stroke-dasharray:127;stroke-dashoffset:127;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #home-svg .drawing rect {visibility:hidden;stroke-dasharray:136;stroke-dashoffset:136;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #home-svg.active .drawing rect, #home-svg.active .drawing polyline {stroke-dashoffset:0;visibility:visible} /* LARGER PIECE */ #larger_piece-svg svg{display:block;position:absolute;left:0;top:0;} /*#larger_piece-svg{width:281px;padding-top:438px;height:0;position:absolute;overflow:hidden;left:1061px;top:137px;z-index:121;}*/ #larger_piece-svg-background{width: 100%;position: absolute;left: 0%;z-index: 1;height:0;padding-top:155.8718861%;bottom:0;} #larger_piece-svg-orange-top{width: 37.46654804%;position: absolute;left: 35.68220641%;height:0;padding-top:56.14021352%;top:14.5%;z-index: 2;transition:1.5s;} #larger_piece-svg-orange-bottom{width: 37.46654804%;position: absolute;left: 35.68220641%;height:0;padding-top:56.14021352%;top:3.67739726%;z-index: 3;} #larger_piece-svg-blue{width: 30.93807829%;position: absolute;left: 0;height:0;padding-top:41.18825623%;top:28.02990868%;z-index:2;overflow:hidden;} #larger_piece-svg-green{width: 42.88220641%;position: absolute;left: 35.68220641%;height:0;padding-top:31.21423488%;top:42.95570776%;z-index:2;overflow:hidden;} #larger_piece-svg-blue svg{top:100%;-webkit-transition: 1.5s;-moz-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} #larger_piece-svg-green svg{top:100%;-webkit-transition: 1.5s;-moz-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} #larger_piece-svg-trees{width: 53.42135231%;position: absolute;left: 0;height:0;padding-top:60.85373665%;top:51.36712329%;z-index:3;} #larger_piece-svg-text-mask{position: absolute;background-color: #FEE222;width: 18%;height: 4%;right: 27%;top: 16%;z-index: 4;-webkit-transition: 1.5s;-moz-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} #larger_piece-svg.active #larger_piece-svg-orange-top {top:3.67739726%;} #larger_piece-svg.active #larger_piece-svg-blue svg {top:0;} #larger_piece-svg.active #larger_piece-svg-green svg {top:0;} #larger_piece-svg.active #larger_piece-svg-text-mask {top: 5.5%;width: 0;} #larger_piece-svg #larger_piece-svg-blue g polyline {visibility: hidden;stroke-dasharray: 92;stroke-dashoffset: 92;-webkit-transition: 2s .3s;-moz-transition: 2s .3s;-o-transition: 2s .3s;transition: 2s .3s;} #larger_piece-svg #larger_piece-svg-blue g rect {visibility: hidden;stroke-dasharray: 168;stroke-dashoffset: 168;-webkit-transition: 2s .3s;-moz-transition: 2s .3s;-o-transition: 2s .3s;transition: 2s .3s;} #larger_piece-svg #larger_piece-svg-blue g line {visibility: hidden;stroke-dasharray: 38;stroke-dashoffset: 38;-webkit-transition: 2s .3s;-moz-transition: 2s .3s;-o-transition: 2s .3s;transition: 2s .3s;} #larger_piece-svg #larger_piece-svg-green g line {visibility:hidden;stroke-dasharray: 24;stroke-dashoffset:24;-webkit-transition: 2s .3s;-moz-transition: 2s .3s;-o-transition: 2s .3s;transition: 2s .3s;} #larger_piece-svg #larger_piece-svg-green g path {visibility:hidden;stroke-dasharray: 24;stroke-dashoffset:24;-webkit-transition: 2s .3s;-moz-transition: 2s .3s;-o-transition: 2s .3s;transition: 2s .3s;} #larger_piece-svg #larger_piece-svg-green g rect {visibility:hidden;stroke-dasharray: 234;stroke-dashoffset:234;-webkit-transition: 2s .3s;-moz-transition: 2s .3s;-o-transition: 2s .3s;transition: 2s .3s;} #larger_piece-svg #larger_piece-svg-green g polyline {visibility:hidden;stroke-dasharray: 158;stroke-dashoffset:158;-webkit-transition: 2s .3s;-moz-transition: 2s .3s;-o-transition: 2s .3s;transition: 2s .3s;} #larger_piece-svg #larger_piece-svg-orange-top g rect {visibility:hidden;stroke-dasharray: 87;stroke-dashoffset:87;-webkit-transition: 2s .3s;-moz-transition: 2s .3s;-o-transition: 2s .3s;transition: 2s .3s;} #larger_piece-svg #larger_piece-svg-orange-top g line {visibility:hidden;stroke-dasharray: 106;stroke-dashoffset:106;-webkit-transition: 2s .3s;-moz-transition: 2s .3s;-o-transition: 2s .3s;transition: 2s .3s;} #larger_piece-svg #larger_piece-svg-orange-bottom g rect {visibility:hidden;stroke-dasharray: 105;stroke-dashoffset:105;-webkit-transition: 2s;-moz-transition: 2s;-o-transition: 2s;transition: 2s;} #larger_piece-svg #larger_piece-svg-orange-bottom g polyline {visibility:hidden;stroke-dasharray: 148;stroke-dashoffset:148;-webkit-transition:1.5s;-moz-transition:1.5s;-o-transition:1.5s;transition:1.5s;} #larger_piece-svg #larger_piece-svg-orange-bottom g line {visibility:hidden;stroke-dasharray: 10;stroke-dashoffset:10;-webkit-transition: .3s 1.5s;-moz-transition: .3s 1.5s;-o-transition: .3s 1.5s;transition: .3s 1.5s;} #larger_piece-svg.active g *, #larger_piece-svg.inactive g * {visibility:visible !important;} #larger_piece-svg.active g * {stroke-dashoffset:0 !important} /* MOUNTAINS */ #mountains-svg svg{display:block;position:absolute;left:0px;top:0px;} /*#mountains-svg{width:338px;padding-top:261px;height:0;position:absolute;overflow:hidden;left:-18px;top:115px;z-index:10;}*/ #mountains-svg-backgorund{width: 100%;padding-top:77.22%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;display:block} /* MOUNTAINS2 */ #mountains2-svg svg{display:block;position:absolute;left:0px;top:0px;} /*#mountains2-svg{width:273px;padding-top:40px;height:0;position:absolute;overflow:hidden;left:1462px;top:97px;z-index:121;}*/ #mountains2-svg-background{width: 100%;padding-top:14.65%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;display:block} /* PARK */ #park-svg svg{display:block;position:absolute;left:0px;top:0px;} /*#park-svg{width:267px;padding-top:213px;height:0;position:absolute;overflow:hidden;left:567px;top:211px;z-index:121;}*/ #park-svg-background{width:100%;padding-top:79.182%;right: 0;bottom:0;z-index: 1;height:0;position: absolute;} #park-svg-orange-bird{width:13.346%;padding-top:10.932%;height:0;position:absolute;z-index:2;top:-116%;left:83%;-webkit-transition:1.5s;-moz-transition:1.5s;-o-transition:1.5s;transition:1.5s, opacity .7s;-webkit-transition-delay:0s, 0s;-moz-transition-delay:0s, 0s;-o-transition-delay:0s, 0s;transition-delay:0s, 0s;opacity:0;} #park-svg-orange-bird-body{width:95.201%;padding-top:81.919%;height:0;position:absolute;z-index:2;top:0;left:0;} #park-svg-orange-bird-wing{width:45.743%;padding-top:45.743%;height:0;position:absolute;z-index:2;top:21%;right:0;} #park-svg-yellow-bird{width:13.346%;padding-top:10.932%;height:0;position:absolute;z-index:2;left: -57%;top: -120%;-webkit-transition:2s;-moz-transition:2s;-o-transition:2s;transition:2s, opacity .7s;-webkit-transition-delay:0s, 0s;-moz-transition-delay:0s, 0s;-o-transition-delay:0s, 0s;transition-delay:0s, 0s;opacity:0;} #park-svg-yellow-bird-body{width:95.201%;padding-top:81.919%;height:0;position:absolute;z-index:2;top:0;right:0;} #park-svg-yellow-bird-wing{width:45.743%;padding-top:45.743%;height:0;position:absolute;z-index:2;top:21%;left:0} #park-svg.active #park-svg-orange-bird {top: 45.4%;left: 48%;opacity:1;} #park-svg.inactive #park-svg-orange-bird {-webkit-transition-delay:0s, .8s;-moz-transition-delay:0s, .8s;-o-transition-delay:0s, .8s;transition-delay:0s, .8s;} #park-svg.active #park-svg-orange-bird-wing { -webkit-animation: park_bird_wings .6s 3; -moz-animation: park_bird_wings .6s 3; -o-animation: park_bird_wings .6s 3; animation: park_bird_wings .6s 3; } #park-svg.inactive #park-svg-orange-bird-wing { -webkit-animation: park_bird_wings2 .6s 3; -moz-animation: park_bird_wings2 .6s 3; -o-animation: park_bird_wings2 .6s 3; animation: park_bird_wings2 .6s 3; } #park-svg.active #park-svg-yellow-bird {top: 45.4%;left: 32%;opacity:1;} #park-svg.inactive #park-svg-yellow-bird {-webkit-transition-delay:0s, 1.3s;-moz-transition-delay:0s, 1.3s;-o-transition-delay:0s, 1.3s;transition-delay:0s, 1.3s;} #park-svg.active #park-svg-yellow-bird-wing { -webkit-animation: park_bird_wings3 .7s 2; -moz-animation: park_bird_wings3 .7s 2; -o-animation: park_bird_wings3 .7s 2; animation: park_bird_wings3 .7s 2; } #park-svg.inactive #park-svg-yellow-bird-wing { -webkit-animation: park_bird_wings4 .7s 2; -moz-animation: park_bird_wings4 .7s 2; -o-animation: park_bird_wings4 .7s 2; animation: park_bird_wings4 .7s 2; } @-webkit-keyframes park_bird_wings{ 0% {-webkit-transform: rotate(-90deg) translate(82%,13%);-moz-transform: rotate(-90deg) translate(82%,13%);-ms-transform: rotate(-90deg) translate(82%,13%);-o-transform: rotate(-90deg) translate(82%,13%);transform: rotate(-90deg) translate(82%,13%);} 11% {-webkit-transform: rotate(-0deg) translate(0);-moz-transform: rotate(-0deg) translate(0);-ms-transform: rotate(-0deg) translate(0);-o-transform: rotate(-0deg) translate(0);transform: rotate(-0deg) translate(0);} 22% {-webkit-transform: rotate(-90deg) translate(82%,13%);-moz-transform: rotate(-90deg) translate(82%,13%);-ms-transform: rotate(-90deg) translate(82%,13%);-o-transform: rotate(-90deg) translate(82%,13%);transform: rotate(-90deg) translate(82%,13%);} 33% {-webkit-transform: rotate(-0deg) translate(0);-moz-transform: rotate(-0deg) translate(0);-ms-transform: rotate(-0deg) translate(0);-o-transform: rotate(-0deg) translate(0);transform: rotate(-0deg) translate(0);} 44% {-webkit-transform: rotate(-90deg) translate(82%,13%);-moz-transform: rotate(-90deg) translate(82%,13%);-ms-transform: rotate(-90deg) translate(82%,13%);-o-transform: rotate(-90deg) translate(82%,13%);transform: rotate(-90deg) translate(82%,13%);} 55% {-webkit-transform: rotate(-0deg) translate(0);-moz-transform: rotate(-0deg) translate(0);-ms-transform: rotate(-0deg) translate(0);-o-transform: rotate(-0deg) translate(0);transform: rotate(-0deg) translate(0);} 66% {-webkit-transform: rotate(-90deg) translate(82%,13%);-moz-transform: rotate(-90deg) translate(82%,13%);-ms-transform: rotate(-90deg) translate(82%,13%);-o-transform: rotate(-90deg) translate(82%,13%);transform: rotate(-90deg) translate(82%,13%);} 77% {-webkit-transform: rotate(-0deg) translate(0);-moz-transform: rotate(-0deg) translate(0);-ms-transform: rotate(-0deg) translate(0);-o-transform: rotate(-0deg) translate(0);transform: rotate(-0deg) translate(0);} 88% {-webkit-transform: rotate(-90deg) translate(82%,13%);-moz-transform: rotate(-90deg) translate(82%,13%);-ms-transform: rotate(-90deg) translate(82%,13%);-o-transform: rotate(-90deg) translate(82%,13%);transform: rotate(-90deg) translate(82%,13%);} 100% {-webkit-transform: rotate(-0deg) translate(0);-moz-transform: rotate(-0deg) translate(0);-ms-transform: rotate(-0deg) translate(0);-o-transform: rotate(-0deg) translate(0);transform: rotate(-0deg) translate(0);} } @-webkit-keyframes park_bird_wings2{ 0% {-webkit-transform: rotate(0deg) translate(0);-moz-transform: rotate(0deg) translate(0);-ms-transform: rotate(0deg) translate(0);-o-transform: rotate(0deg) translate(0);transform: rotate(0deg) translate(0);} 11% {-webkit-transform: rotate(-90deg) translate(82%,13%);-moz-transform: rotate(-90deg) translate(82%,13%);-ms-transform: rotate(-90deg) translate(82%,13%);-o-transform: rotate(-90deg) translate(82%,13%);transform: rotate(-90deg) translate(82%,13%);} 22% {-webkit-transform: rotate(-20deg) translate(19%,-10%);-moz-transform: rotate(-20deg) translate(19%,-10%);-ms-transform: rotate(-20deg) translate(19%,-10%);-o-transform: rotate(-20deg) translate(19%,-10%);transform: rotate(-20deg) translate(19%,-10%);} 33% {-webkit-transform: rotate(-90deg) translate(82%,13%);-moz-transform: rotate(-90deg) translate(82%,13%);-ms-transform: rotate(-90deg) translate(82%,13%);-o-transform: rotate(-90deg) translate(82%,13%);transform: rotate(-90deg) translate(82%,13%);} 44% {-webkit-transform: rotate(-20deg) translate(19%,-10%);-moz-transform: rotate(-20deg) translate(19%,-10%);-ms-transform: rotate(-20deg) translate(19%,-10%);-o-transform: rotate(-20deg) translate(19%,-10%);transform: rotate(-20deg) translate(19%,-10%);} 55% {-webkit-transform: rotate(-90deg) translate(82%,13%);-moz-transform: rotate(-90deg) translate(82%,13%);-ms-transform: rotate(-90deg) translate(82%,13%);-o-transform: rotate(-90deg) translate(82%,13%);transform: rotate(-90deg) translate(82%,13%);} 66% {-webkit-transform: rotate(-20deg) translate(19%,-10%);-moz-transform: rotate(-20deg) translate(19%,-10%);-ms-transform: rotate(-20deg) translate(19%,-10%);-o-transform: rotate(-20deg) translate(19%,-10%);transform: rotate(-20deg) translate(19%,-10%);} 77% {-webkit-transform: rotate(-90deg) translate(82%,13%);-moz-transform: rotate(-90deg) translate(82%,13%);-ms-transform: rotate(-90deg) translate(82%,13%);-o-transform: rotate(-90deg) translate(82%,13%);transform: rotate(-90deg) translate(82%,13%);} 88% {-webkit-transform: rotate(-20deg) translate(19%,-10%);-moz-transform: rotate(-20deg) translate(19%,-10%);-ms-transform: rotate(-20deg) translate(19%,-10%);-o-transform: rotate(-20deg) translate(19%,-10%);transform: rotate(-20deg) translate(19%,-10%);} 100% {-webkit-transform: rotate(-90deg) translate(82%,13%);-moz-transform: rotate(-90deg) translate(82%,13%);-ms-transform: rotate(-90deg) translate(82%,13%);-o-transform: rotate(-90deg) translate(82%,13%);transform: rotate(-90deg) translate(82%,13%);} } @-webkit-keyframes park_bird_wings3{ 0% {-webkit-transform: rotate(90deg) translate(-80%,20%);-moz-transform: rotate(90deg) translate(-80%,20%);-ms-transform: rotate(90deg) translate(-80%,20%);-o-transform: rotate(90deg) translate(-80%,20%);transform: rotate(90deg) translate(-80%,20%);} 11% {-webkit-transform: rotate(20deg) translate(-20%,-10%);-moz-transform: rotate(20deg) translate(-20%,-10%);-ms-transform: rotate(20deg) translate(-20%,-10%);-o-transform: rotate(20deg) translate(-20%,-10%);transform: rotate(20deg) translate(-20%,-10%);} 22% {-webkit-transform: rotate(90deg) translate(-80%,20%);-moz-transform: rotate(90deg) translate(-80%,20%);-ms-transform: rotate(90deg) translate(-80%,20%);-o-transform: rotate(90deg) translate(-80%,20%);transform: rotate(90deg) translate(-80%,20%);} 33% {-webkit-transform: rotate(20deg) translate(-20%,-10%);-moz-transform: rotate(20deg) translate(-20%,-10%);-ms-transform: rotate(20deg) translate(-20%,-10%);-o-transform: rotate(20deg) translate(-20%,-10%);transform: rotate(20deg) translate(-20%,-10%);} 44% {-webkit-transform: rotate(90deg) translate(-80%,20%);-moz-transform: rotate(90deg) translate(-80%,20%);-ms-transform: rotate(90deg) translate(-80%,20%);-o-transform: rotate(90deg) translate(-80%,20%);transform: rotate(90deg) translate(-80%,20%);} 55% {-webkit-transform: rotate(20deg) translate(-20%,-10%);-moz-transform: rotate(20deg) translate(-20%,-10%);-ms-transform: rotate(20deg) translate(-20%,-10%);-o-transform: rotate(20deg) translate(-20%,-10%);transform: rotate(20deg) translate(-20%,-10%);} 66% {-webkit-transform: rotate(90deg) translate(-80%,20%);-moz-transform: rotate(90deg) translate(-80%,20%);-ms-transform: rotate(90deg) translate(-80%,20%);-o-transform: rotate(90deg) translate(-80%,20%);transform: rotate(90deg) translate(-80%,20%);} 77% {-webkit-transform: rotate(20deg) translate(-20%,-10%);-moz-transform: rotate(20deg) translate(-20%,-10%);-ms-transform: rotate(20deg) translate(-20%,-10%);-o-transform: rotate(20deg) translate(-20%,-10%);transform: rotate(20deg) translate(-20%,-10%);} 88% {-webkit-transform: rotate(90deg) translate(-80%,20%);-moz-transform: rotate(90deg) translate(-80%,20%);-ms-transform: rotate(90deg) translate(-80%,20%);-o-transform: rotate(90deg) translate(-80%,20%);transform: rotate(90deg) translate(-80%,20%);} 100% {-webkit-transform: rotate(0deg) translate(0);-moz-transform: rotate(0deg) translate(0);-ms-transform: rotate(0deg) translate(0);-o-transform: rotate(0deg) translate(0);transform: rotate(0deg) translate(0);} } @-webkit-keyframes park_bird_wings4{ 0% {-webkit-transform: rotate(0deg) translate(0);-moz-transform: rotate(0deg) translate(0);-ms-transform: rotate(0deg) translate(0);-o-transform: rotate(0deg) translate(0);transform: rotate(0deg) translate(0);} 11% {-webkit-transform: rotate(90deg) translate(-80%,20%);-moz-transform: rotate(90deg) translate(-80%,20%);-ms-transform: rotate(90deg) translate(-80%,20%);-o-transform: rotate(90deg) translate(-80%,20%);transform: rotate(90deg) translate(-80%,20%);} 22% {-webkit-transform: rotate(20deg) translate(-20%,-10%);-moz-transform: rotate(20deg) translate(-20%,-10%);-ms-transform: rotate(20deg) translate(-20%,-10%);-o-transform: rotate(20deg) translate(-20%,-10%);transform: rotate(20deg) translate(-20%,-10%);} 33% {-webkit-transform: rotate(90deg) translate(-80%,20%);-moz-transform: rotate(90deg) translate(-80%,20%);-ms-transform: rotate(90deg) translate(-80%,20%);-o-transform: rotate(90deg) translate(-80%,20%);transform: rotate(90deg) translate(-80%,20%);} 44% {-webkit-transform: rotate(20deg) translate(-20%,-10%);-moz-transform: rotate(20deg) translate(-20%,-10%);-ms-transform: rotate(20deg) translate(-20%,-10%);-o-transform: rotate(20deg) translate(-20%,-10%);transform: rotate(20deg) translate(-20%,-10%);} 55% {-webkit-transform: rotate(90deg) translate(-80%,20%);-moz-transform: rotate(90deg) translate(-80%,20%);-ms-transform: rotate(90deg) translate(-80%,20%);-o-transform: rotate(90deg) translate(-80%,20%);transform: rotate(90deg) translate(-80%,20%);} 66% {-webkit-transform: rotate(20deg) translate(-20%,-10%);-moz-transform: rotate(20deg) translate(-20%,-10%);-ms-transform: rotate(20deg) translate(-20%,-10%);-o-transform: rotate(20deg) translate(-20%,-10%);transform: rotate(20deg) translate(-20%,-10%);} 77% {-webkit-transform: rotate(90deg) translate(-80%,20%);-moz-transform: rotate(90deg) translate(-80%,20%);-ms-transform: rotate(90deg) translate(-80%,20%);-o-transform: rotate(90deg) translate(-80%,20%);transform: rotate(90deg) translate(-80%,20%);} 88% {-webkit-transform: rotate(20deg) translate(-20%,-10%);-moz-transform: rotate(20deg) translate(-20%,-10%);-ms-transform: rotate(20deg) translate(-20%,-10%);-o-transform: rotate(20deg) translate(-20%,-10%);transform: rotate(20deg) translate(-20%,-10%);} 100% {-webkit-transform: rotate(90deg) translate(-80%,20%);-moz-transform: rotate(90deg) translate(-80%,20%);-ms-transform: rotate(90deg) translate(-80%,20%);-o-transform: rotate(90deg) translate(-80%,20%);transform: rotate(90deg) translate(-80%,20%);} } @keyframes park_bird_wings{ 0% {-webkit-transform: rotate(-90deg) translate(82%,13%);-moz-transform: rotate(-90deg) translate(82%,13%);-ms-transform: rotate(-90deg) translate(82%,13%);-o-transform: rotate(-90deg) translate(82%,13%);transform: rotate(-90deg) translate(82%,13%);} 11% {-webkit-transform: rotate(-0deg) translate(0);-moz-transform: rotate(-0deg) translate(0);-ms-transform: rotate(-0deg) translate(0);-o-transform: rotate(-0deg) translate(0);transform: rotate(-0deg) translate(0);} 22% {-webkit-transform: rotate(-90deg) translate(82%,13%);-moz-transform: rotate(-90deg) translate(82%,13%);-ms-transform: rotate(-90deg) translate(82%,13%);-o-transform: rotate(-90deg) translate(82%,13%);transform: rotate(-90deg) translate(82%,13%);} 33% {-webkit-transform: rotate(-0deg) translate(0);-moz-transform: rotate(-0deg) translate(0);-ms-transform: rotate(-0deg) translate(0);-o-transform: rotate(-0deg) translate(0);transform: rotate(-0deg) translate(0);} 44% {-webkit-transform: rotate(-90deg) translate(82%,13%);-moz-transform: rotate(-90deg) translate(82%,13%);-ms-transform: rotate(-90deg) translate(82%,13%);-o-transform: rotate(-90deg) translate(82%,13%);transform: rotate(-90deg) translate(82%,13%);} 55% {-webkit-transform: rotate(-0deg) translate(0);-moz-transform: rotate(-0deg) translate(0);-ms-transform: rotate(-0deg) translate(0);-o-transform: rotate(-0deg) translate(0);transform: rotate(-0deg) translate(0);} 66% {-webkit-transform: rotate(-90deg) translate(82%,13%);-moz-transform: rotate(-90deg) translate(82%,13%);-ms-transform: rotate(-90deg) translate(82%,13%);-o-transform: rotate(-90deg) translate(82%,13%);transform: rotate(-90deg) translate(82%,13%);} 77% {-webkit-transform: rotate(-0deg) translate(0);-moz-transform: rotate(-0deg) translate(0);-ms-transform: rotate(-0deg) translate(0);-o-transform: rotate(-0deg) translate(0);transform: rotate(-0deg) translate(0);} 88% {-webkit-transform: rotate(-90deg) translate(82%,13%);-moz-transform: rotate(-90deg) translate(82%,13%);-ms-transform: rotate(-90deg) translate(82%,13%);-o-transform: rotate(-90deg) translate(82%,13%);transform: rotate(-90deg) translate(82%,13%);} 100% {-webkit-transform: rotate(-0deg) translate(0);-moz-transform: rotate(-0deg) translate(0);-ms-transform: rotate(-0deg) translate(0);-o-transform: rotate(-0deg) translate(0);transform: rotate(-0deg) translate(0);} } @keyframes park_bird_wings2{ 0% {-webkit-transform: rotate(0deg) translate(0);-moz-transform: rotate(0deg) translate(0);-ms-transform: rotate(0deg) translate(0);-o-transform: rotate(0deg) translate(0);transform: rotate(0deg) translate(0);} 11% {-webkit-transform: rotate(-90deg) translate(82%,13%);-moz-transform: rotate(-90deg) translate(82%,13%);-ms-transform: rotate(-90deg) translate(82%,13%);-o-transform: rotate(-90deg) translate(82%,13%);transform: rotate(-90deg) translate(82%,13%);} 22% {-webkit-transform: rotate(-20deg) translate(19%,-10%);-moz-transform: rotate(-20deg) translate(19%,-10%);-ms-transform: rotate(-20deg) translate(19%,-10%);-o-transform: rotate(-20deg) translate(19%,-10%);transform: rotate(-20deg) translate(19%,-10%);} 33% {-webkit-transform: rotate(-90deg) translate(82%,13%);-moz-transform: rotate(-90deg) translate(82%,13%);-ms-transform: rotate(-90deg) translate(82%,13%);-o-transform: rotate(-90deg) translate(82%,13%);transform: rotate(-90deg) translate(82%,13%);} 44% {-webkit-transform: rotate(-20deg) translate(19%,-10%);-moz-transform: rotate(-20deg) translate(19%,-10%);-ms-transform: rotate(-20deg) translate(19%,-10%);-o-transform: rotate(-20deg) translate(19%,-10%);transform: rotate(-20deg) translate(19%,-10%);} 55% {-webkit-transform: rotate(-90deg) translate(82%,13%);-moz-transform: rotate(-90deg) translate(82%,13%);-ms-transform: rotate(-90deg) translate(82%,13%);-o-transform: rotate(-90deg) translate(82%,13%);transform: rotate(-90deg) translate(82%,13%);} 66% {-webkit-transform: rotate(-20deg) translate(19%,-10%);-moz-transform: rotate(-20deg) translate(19%,-10%);-ms-transform: rotate(-20deg) translate(19%,-10%);-o-transform: rotate(-20deg) translate(19%,-10%);transform: rotate(-20deg) translate(19%,-10%);} 77% {-webkit-transform: rotate(-90deg) translate(82%,13%);-moz-transform: rotate(-90deg) translate(82%,13%);-ms-transform: rotate(-90deg) translate(82%,13%);-o-transform: rotate(-90deg) translate(82%,13%);transform: rotate(-90deg) translate(82%,13%);} 88% {-webkit-transform: rotate(-20deg) translate(19%,-10%);-moz-transform: rotate(-20deg) translate(19%,-10%);-ms-transform: rotate(-20deg) translate(19%,-10%);-o-transform: rotate(-20deg) translate(19%,-10%);transform: rotate(-20deg) translate(19%,-10%);} 100% {-webkit-transform: rotate(-90deg) translate(82%,13%);-moz-transform: rotate(-90deg) translate(82%,13%);-ms-transform: rotate(-90deg) translate(82%,13%);-o-transform: rotate(-90deg) translate(82%,13%);transform: rotate(-90deg) translate(82%,13%);} } @keyframes park_bird_wings3{ 0% {-webkit-transform: rotate(90deg) translate(-80%,20%);-moz-transform: rotate(90deg) translate(-80%,20%);-ms-transform: rotate(90deg) translate(-80%,20%);-o-transform: rotate(90deg) translate(-80%,20%);transform: rotate(90deg) translate(-80%,20%);} 11% {-webkit-transform: rotate(20deg) translate(-20%,-10%);-moz-transform: rotate(20deg) translate(-20%,-10%);-ms-transform: rotate(20deg) translate(-20%,-10%);-o-transform: rotate(20deg) translate(-20%,-10%);transform: rotate(20deg) translate(-20%,-10%);} 22% {-webkit-transform: rotate(90deg) translate(-80%,20%);-moz-transform: rotate(90deg) translate(-80%,20%);-ms-transform: rotate(90deg) translate(-80%,20%);-o-transform: rotate(90deg) translate(-80%,20%);transform: rotate(90deg) translate(-80%,20%);} 33% {-webkit-transform: rotate(20deg) translate(-20%,-10%);-moz-transform: rotate(20deg) translate(-20%,-10%);-ms-transform: rotate(20deg) translate(-20%,-10%);-o-transform: rotate(20deg) translate(-20%,-10%);transform: rotate(20deg) translate(-20%,-10%);} 44% {-webkit-transform: rotate(90deg) translate(-80%,20%);-moz-transform: rotate(90deg) translate(-80%,20%);-ms-transform: rotate(90deg) translate(-80%,20%);-o-transform: rotate(90deg) translate(-80%,20%);transform: rotate(90deg) translate(-80%,20%);} 55% {-webkit-transform: rotate(20deg) translate(-20%,-10%);-moz-transform: rotate(20deg) translate(-20%,-10%);-ms-transform: rotate(20deg) translate(-20%,-10%);-o-transform: rotate(20deg) translate(-20%,-10%);transform: rotate(20deg) translate(-20%,-10%);} 66% {-webkit-transform: rotate(90deg) translate(-80%,20%);-moz-transform: rotate(90deg) translate(-80%,20%);-ms-transform: rotate(90deg) translate(-80%,20%);-o-transform: rotate(90deg) translate(-80%,20%);transform: rotate(90deg) translate(-80%,20%);} 77% {-webkit-transform: rotate(20deg) translate(-20%,-10%);-moz-transform: rotate(20deg) translate(-20%,-10%);-ms-transform: rotate(20deg) translate(-20%,-10%);-o-transform: rotate(20deg) translate(-20%,-10%);transform: rotate(20deg) translate(-20%,-10%);} 88% {-webkit-transform: rotate(90deg) translate(-80%,20%);-moz-transform: rotate(90deg) translate(-80%,20%);-ms-transform: rotate(90deg) translate(-80%,20%);-o-transform: rotate(90deg) translate(-80%,20%);transform: rotate(90deg) translate(-80%,20%);} 100% {-webkit-transform: rotate(0deg) translate(0);-moz-transform: rotate(0deg) translate(0);-ms-transform: rotate(0deg) translate(0);-o-transform: rotate(0deg) translate(0);transform: rotate(0deg) translate(0);} } @keyframes park_bird_wings4{ 0% {-webkit-transform: rotate(0deg) translate(0);-moz-transform: rotate(0deg) translate(0);-ms-transform: rotate(0deg) translate(0);-o-transform: rotate(0deg) translate(0);transform: rotate(0deg) translate(0);} 11% {-webkit-transform: rotate(90deg) translate(-80%,20%);-moz-transform: rotate(90deg) translate(-80%,20%);-ms-transform: rotate(90deg) translate(-80%,20%);-o-transform: rotate(90deg) translate(-80%,20%);transform: rotate(90deg) translate(-80%,20%);} 22% {-webkit-transform: rotate(20deg) translate(-20%,-10%);-moz-transform: rotate(20deg) translate(-20%,-10%);-ms-transform: rotate(20deg) translate(-20%,-10%);-o-transform: rotate(20deg) translate(-20%,-10%);transform: rotate(20deg) translate(-20%,-10%);} 33% {-webkit-transform: rotate(90deg) translate(-80%,20%);-moz-transform: rotate(90deg) translate(-80%,20%);-ms-transform: rotate(90deg) translate(-80%,20%);-o-transform: rotate(90deg) translate(-80%,20%);transform: rotate(90deg) translate(-80%,20%);} 44% {-webkit-transform: rotate(20deg) translate(-20%,-10%);-moz-transform: rotate(20deg) translate(-20%,-10%);-ms-transform: rotate(20deg) translate(-20%,-10%);-o-transform: rotate(20deg) translate(-20%,-10%);transform: rotate(20deg) translate(-20%,-10%);} 55% {-webkit-transform: rotate(90deg) translate(-80%,20%);-moz-transform: rotate(90deg) translate(-80%,20%);-ms-transform: rotate(90deg) translate(-80%,20%);-o-transform: rotate(90deg) translate(-80%,20%);transform: rotate(90deg) translate(-80%,20%);} 66% {-webkit-transform: rotate(20deg) translate(-20%,-10%);-moz-transform: rotate(20deg) translate(-20%,-10%);-ms-transform: rotate(20deg) translate(-20%,-10%);-o-transform: rotate(20deg) translate(-20%,-10%);transform: rotate(20deg) translate(-20%,-10%);} 77% {-webkit-transform: rotate(90deg) translate(-80%,20%);-moz-transform: rotate(90deg) translate(-80%,20%);-ms-transform: rotate(90deg) translate(-80%,20%);-o-transform: rotate(90deg) translate(-80%,20%);transform: rotate(90deg) translate(-80%,20%);} 88% {-webkit-transform: rotate(20deg) translate(-20%,-10%);-moz-transform: rotate(20deg) translate(-20%,-10%);-ms-transform: rotate(20deg) translate(-20%,-10%);-o-transform: rotate(20deg) translate(-20%,-10%);transform: rotate(20deg) translate(-20%,-10%);} 100% {-webkit-transform: rotate(90deg) translate(-80%,20%);-moz-transform: rotate(90deg) translate(-80%,20%);-ms-transform: rotate(90deg) translate(-80%,20%);-o-transform: rotate(90deg) translate(-80%,20%);transform: rotate(90deg) translate(-80%,20%);} } /* POLICE */ #police-svg svg{display:block;position:absolute;left:0px;top:0px;} /*#police-svg{width:248px;padding-top:153px;height:0;position:absolute;overflow:hidden;left:306px;top:578px;z-index:118;}*/ #police-svg-background{width: 100%;padding-top:61.69%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #police-svg-background g line {visibility:hidden;stroke-dasharray:100;stroke-dashoffset:100;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #police-svg-background g polyline {visibility:hidden;stroke-dasharray:88;stroke-dashoffset:88;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #police-svg-background g rect {visibility:hidden;stroke-dasharray:60;stroke-dashoffset:60;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #police-svg-shield{width: 18.97%;padding-top:21.00%;left: 47.05%;top:15.91%;z-index: 2;height:0;position: absolute;} #police-svg-shield svg{ -webkit-animation: police_shield_animation .5s linear infinite; -moz-animation: police_shield_animation .5s linear infinite; -o-animation: police_shield_animation .5s linear infinite; animation: police_shield_animation .5s linear infinite; -webkit-animation-play-state:paused; -moz-animation-play-state:paused; -o-animation-play-state:paused; animation-play-state:paused; } #police-svg-shield g path {visibility:hidden;stroke-dasharray:110;stroke-dashoffset:110;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #police-svg.inactive g *, #police-svg.active g * {visibility:visible;} #police-svg.active g * {stroke-dashoffset:0} #police-svg.active #police-svg-shield svg{ -webkit-animation-play-state:running; -moz-animation-play-state:running; -o-animation-play-state:running; animation-play-state:running; } @-webkit-keyframes police_shield_animation{ 0%{margin-top:0;} 25%{margin-top:-5%;} 75%{margin-top:5%;} 100%{margin-top:0;} } @keyframes police_shield_animation{ 0%{margin-top:0;} 25%{margin-top:-5%;} 75%{margin-top:5%;} 100%{margin-top:0;} } /* PURPLE NEIGHBOURHOOD */ #purple-neighbourhood-svg svg{display:block;position:absolute;left:0px;top:0px;} /*#purple-neighbourhood-svg{width:280px;padding-top:253px;height:0;position:absolute;overflow:hidden;left:554px;top:404px;z-index:122;}*/ #purple-neighbourhood-svg-background{width: 100%;padding-top:90.26%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #purple-neighbourhood-svg-windows{width: 100%;padding-top:90.26%;left: 0%;top:0%;z-index: 2;height:0;position: absolute;} #purple-neighbourhood-svg-letter-1{width: 16.75%;padding-top:12.05%;left: 11%;top:17%;z-index: 3;height:0;position: absolute;-webkit-transition:3s;-moz-transition:3s;-o-transition:3s;transition:3s;} #purple-neighbourhood-svg-letter-2{width: 16.75%;padding-top:12.05%;left: 10%;top:52%;z-index: 3;height:0;position: absolute;-webkit-transition:3s;-moz-transition:3s;-o-transition:3s;transition:3s;} #purple-neighbourhood-svg-letter-3{width: 16.75%;padding-top:12.05%;left: 74%;top:10%;z-index: 3;height:0;position: absolute;-webkit-transition:3s;-moz-transition:3s;-o-transition:3s;transition:3s;} #purple-neighbourhood-svg-letter-4{width: 9.40%;padding-top:6.57%;left: 32%;top:39%;z-index: 3;height:0;position: absolute;-webkit-transition:3s;-moz-transition:3s;-o-transition:3s;transition:3s;} #purple-neighbourhood-svg-letter-5{width: 9.40%;padding-top:6.57%;left: 67%;top:60%;z-index: 3;height:0;position: absolute;-webkit-transition:3s;-moz-transition:3s;-o-transition:3s;transition:3s;} #purple-neighbourhood-svg-clock{width: 27.39%;padding-top:27.39%;left: 12.67%;top:110%;z-index: 4;height:0;position: absolute;-webkit-transition: 1s;-moz-transition: 1s;-o-transition: 1s;transition: 1s;} #purple-neighbourhood-svg-clock-hand-big{width: 27.39%;padding-top:27.39%;left: 12.67%;top:110%;z-index: 5;height:0;position: absolute;-webkit-transition: 1s;-moz-transition: 1s;-o-transition: 1s;transition: 1s;} #purple-neighbourhood-svg-clock-hand-big svg{-webkit-animation: purple_neighbourhood_hand 1s linear infinite;-moz-animation: purple_neighbourhood_hand 1s linear infinite;-o-animation: purple_neighbourhood_hand 1s linear infinite;animation: purple_neighbourhood_hand 1s linear infinite} #purple-neighbourhood-svg-clock-hand-small{width: 27.39%;padding-top:27.39%;left: 12.67%;top:110%;z-index: 5;height:0;position: absolute;-webkit-transition: 1s;-moz-transition: 1s;-o-transition: 1s;transition: 1s;} #purple-neighbourhood-svg-clock-hand-small svg {-webkit-animation: purple_neighbourhood_hand 12s linear infinite;-moz-animation: purple_neighbourhood_hand 12s linear infinite;-o-animation: purple_neighbourhood_hand 12s linear infinite;animation: purple_neighbourhood_hand 12s linear infinite} #purple-neighbourhood-svg .purple-neighbourhood-svg-item svg{display:none;} #purple-neighbourhood-svg-windows g rect{display:none;} #purple-neighbourhood-svg.active #purple-neighbourhood-svg-clock {top:65.20%;} #purple-neighbourhood-svg.active #purple-neighbourhood-svg-clock-hand-big {top:65.20%;} #purple-neighbourhood-svg.active #purple-neighbourhood-svg-clock-hand-small {top:65.20%;} @-webkit-keyframes purple_neighbourhood_hand{ 0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);} } @keyframes purple_neighbourhood_hand{ from {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);} } #purple-neighbourhood-svg.active #purple-neighbourhood-svg-letter-1{left:100%;top:80%;} #purple-neighbourhood-svg.active #purple-neighbourhood-svg-letter-2{left:50%;top:-20%;} #purple-neighbourhood-svg.active #purple-neighbourhood-svg-letter-3{left:-10%;top:80%;} #purple-neighbourhood-svg.active #purple-neighbourhood-svg-letter-4{left:100%;} #purple-neighbourhood-svg.active #purple-neighbourhood-svg-letter-5{left:-10%;top:-10%;} #purple-neighbourhood-svg #purple-neighbourhood-svg-windows g polyline {visibility: hidden;stroke-dasharray: 67;stroke-dashoffset: 67;-webkit-transition: 2s .3s;-moz-transition: 2s .3s;-o-transition: 2s .3s;transition: 2s .3s;} #purple-neighbourhood-svg.active #purple-neighbourhood-svg-windows g polyline {visibility:visible;stroke-dashoffset:0} /* RED NEIGHBOURHOOD */ #red-neighbourhood-svg svg{display:block;position:absolute;left:0px;top:0px;} /*#red-neighbourhood-svg{width:191px;padding-top:215px;height:0;position:absolute;overflow:hidden;left:0px;top:577px;z-index:119;}*/ #red-neighbourhood-svg-backgorund{width: 100%;padding-top:112.52%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;display:block} #red-neighbourhood-svg-building-1{width: 22.89%;padding-top:34.64%;left: 56.98%;top:0%;z-index: 2;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #red-neighbourhood-svg-building-1.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #red-neighbourhood-svg-building-1 g.drawing polyline{visibility:hidden;stroke-dasharray:60;stroke-dashoffset:60;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #red-neighbourhood-svg-building-1-rented{width: 22.89%;padding-top:34.64%;left: 56.98%;top:0%;z-index: 3;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #red-neighbourhood-svg-building-1-rented.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #red-neighbourhood-svg-building-2{width: 23.61%;padding-top:36.28%;left: 23.79%;top:16.21%;z-index: 4;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #red-neighbourhood-svg-building-2.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #red-neighbourhood-svg-building-2 g.drawing polyline{visibility:hidden;stroke-dasharray:60;stroke-dashoffset:60;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #red-neighbourhood-svg-building-2 g.drawing rect{visibility:hidden;stroke-dasharray:50;stroke-dashoffset:50;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #red-neighbourhood-svg-building-2-rented{width: 23.61%;padding-top:36.28%;left: 23.79%;top:16.21%;z-index: 5;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #red-neighbourhood-svg-building-2-rented.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #red-neighbourhood-svg-building-3{width: 13.7%;padding-top:24.02%;left: 0%;top:41.38%;z-index: 6;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #red-neighbourhood-svg-building-3.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #red-neighbourhood-svg-building-3 g.drawing rect{visibility:hidden;stroke-dasharray:50;stroke-dashoffset:50;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #red-neighbourhood-svg-building-3-rented{width: 13.7%;padding-top:24.02%;left: 0%;top:41.38%;z-index: 7;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #red-neighbourhood-svg-building-3-rented.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #red-neighbourhood-svg-building-4{width: 28.02%;padding-top:28.02%;left: 72.1%;top:34.72%;z-index: 8;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #red-neighbourhood-svg-building-4.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #red-neighbourhood-svg-building-4 g.drawing polyline{visibility:hidden;stroke-dasharray:60;stroke-dashoffset:60;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #red-neighbourhood-svg-building-4 g.drawing rect{visibility:hidden;stroke-dasharray:50;stroke-dashoffset:50;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #red-neighbourhood-svg-building-4-rented{width: 28.02%;padding-top:28.02%;left: 72.1%;top:34.72%;z-index: 9;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #red-neighbourhood-svg-building-4-rented.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #red-neighbourhood-svg-building-5{width: 24.65%;padding-top:28.21%;left: 37.74%;top:56.53%;z-index: 10;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #red-neighbourhood-svg-building-5.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #red-neighbourhood-svg-building-5 g.drawing polyline{visibility:hidden;stroke-dasharray:60;stroke-dashoffset:60;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #red-neighbourhood-svg-building-5 g.drawing rect{visibility:hidden;stroke-dasharray:50;stroke-dashoffset:50;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #red-neighbourhood-svg-building-5-rented{width: 24.65%;padding-top:28.21%;left: 37.74%;top:56.53%;z-index: 11;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #red-neighbourhood-svg-building-5-rented.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #red-neighbourhood-svg-building-6{width: 20.96%;padding-top:30.06%;left: 72.1%;top:68.46%;z-index: 12;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #red-neighbourhood-svg-building-6.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #red-neighbourhood-svg-building-6 g.drawing polyline{visibility:hidden;stroke-dasharray:60;stroke-dashoffset:60;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #red-neighbourhood-svg-building-6 g.drawing rect{visibility:hidden;stroke-dasharray:50;stroke-dashoffset:50;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #red-neighbourhood-svg-building-6-rented{width: 20.96%;padding-top:30.06%;left: 72.1%;top:68.46%;z-index: 13;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #red-neighbourhood-svg-building-6-rented.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #red-neighbourhood-svg.active g.drawing *, #red-neighbourhood-svg.inactive g.drawing * {visibility:visible;} #red-neighbourhood-svg.active g.drawing *{stroke-dashoffset:0} #red-neighbourhood-svg.active #red-neighbourhood-svg-building-1, #red-neighbourhood-svg.active #red-neighbourhood-svg-building-2, #red-neighbourhood-svg.active #red-neighbourhood-svg-building-3, #red-neighbourhood-svg.active #red-neighbourhood-svg-building-4, #red-neighbourhood-svg.active #red-neighbourhood-svg-building-5, #red-neighbourhood-svg.active #red-neighbourhood-svg-building-6{-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);} #red-neighbourhood-svg.active #red-neighbourhood-svg-building-1-rented, #red-neighbourhood-svg.active #red-neighbourhood-svg-building-2-rented, #red-neighbourhood-svg.active #red-neighbourhood-svg-building-3-rented, #red-neighbourhood-svg.active #red-neighbourhood-svg-building-4-rented, #red-neighbourhood-svg.active #red-neighbourhood-svg-building-5-rented, #red-neighbourhood-svg.active #red-neighbourhood-svg-building-6-rented{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);} /* ROAD2 */ #road2-svg svg{display:block;position:absolute;left:0;top:0;} /*#road2-svg{width:338px;padding-top:294px;height:0;position:absolute;overflow:hidden;left:1387px;top:574px;z-index:120;}*/ #road2-svg-background{width: 100%;padding-top:86.98%;left: 0;top:0;z-index: 1;height:0;position: absolute;display:block} /* ROAD3 */ #road3-svg svg{display:block;position:absolute;left:0;top:0;} /*#road3-svg{width:734px;padding-top:154px;height:0;position:absolute;overflow:hidden;left:280px;top:679px;z-index:110;}*/ #road3-svg-background{width: 100%;padding-top:20.98%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;display:block} /* SCHOOL */ #school-svg svg{display:block;position:absolute;left:0;top:0;} /*#school-svg{width:334px;padding-top:236px;height:0;position:absolute;overflow:hidden;left:834px;top:523px;z-index:120;}*/ #school-svg-background{width: 100%;position: absolute;left: 0;z-index: 1;height:0;padding-top:63.19%;bottom:0;} #school-svg-hat{width: 20.83%;height:0;padding-top:14.79%;top:39%;left:36.49%;z-index: 2;position: absolute;visibility:hidden;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);transform: rotate(-90deg);-webkit-transition: .5s;-moz-transition: .5s;-o-transition: .5s;transition: .5s;} #school-svg.active #school-svg-hat {-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);top:6.99%;visibility:visible;} #school-svg-diploma{width: 16.49%;height:0;padding-top:20%;top:40%;left:59.00%;z-index: 3;position: absolute;visibility:hidden;overflow:hidden;-webkit-transform:rotate(80deg);-moz-transform:rotate(80deg);-ms-transform:rotate(80deg);-o-transform:rotate(80deg);transform:rotate(80deg);-webkit-transition: .5s;-moz-transition: .5s;-o-transition: .5s;transition: .5s;} #school-svg.active #school-svg-diploma{visibility:visible;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);padding-top:29%;top:0;} #school-svg-building{width: 86.15%;padding-top:47.07%;top:16.20%;left:6.01%;z-index: 4;position: absolute;height:0;} #school-svg-trees{width: 16.25%;padding-top:12.74%;top:53.98%;left:78.34%;z-index: 5;position: absolute;height:0;} #school-svg #school-svg-building g line {visibility:hidden;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;stroke-dasharray: 75;stroke-dashoffset: 75;} #school-svg #school-svg-building g polyline {visibility:hidden;-webkit-transition:1.5s;-moz-transition:1.5s;-o-transition:1.5s;transition:1.5s;stroke-dasharray: 154;stroke-dashoffset: 154;} #school-svg #school-svg-building g rect {visibility:hidden;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s; stroke-dasharray: 72;stroke-dashoffset: 72;} #school-svg.active #school-svg-building g line, #school-svg.active #school-svg-building g rect, #school-svg.active #school-svg-building g polyline{visibility:visible;stroke-dashoffset: 0;} /* SKY */ #sky-svg svg{display:block;position:absolute;left:0;top:0;} /*#sky-svg{width:1691px;padding-top:169px;height:0;position:absolute;overflow:hidden;left:79px;top:0px;z-index:10;}*/ #sky-svg-background{width: 100%;padding-top:9.99%;left: 0;top:0;z-index: 1;height:0;position: absolute;display:block} /* SMALLER PIECE */ #smaller-piece-svg svg{display:block;position:absolute;left:0px;top:0px;} /*#smaller-piece-svg{width:148px;padding-top:229px;height:0;position:absolute;overflow:hidden;left:190px;top:564px;z-index:120;}*/ #smaller-piece-svg-background{width: 100%;padding-top:155.32%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #smaller-piece-svg-building-blue{width: 31.94%;padding-top:33.29%;left: 21.82%;top:0%;z-index: 2;height:0;position: absolute;overflow:hidden;} #smaller-piece-svg-building-blue svg {top:100%;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #smaller-piece-svg-building-orange{width: 31.93%;padding-top:53.12%;left: 61.78%;top:11.01%;z-index: 3;height:0;position: absolute;} #smaller-piece-svg-building-violet-top{width: 46.32%;padding-top:53.81%;left: 7.89%;top:38.8%;z-index: 4;height:0;position: absolute;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #smaller-piece-svg-building-violet-bottom{width: 46.32%;padding-top:53.81%;left: 7.89%;top:25.96%;z-index: 5;height:0;position: absolute;} #smaller-piece-svg-mask {position: absolute;right: 55%;top: 40.5%;background-color: #A273FF;width: 29.5%;height: 7.5%;z-index: 5;-webkit-transition:1.5s;-moz-transition:1.5s;-o-transition:1.5s;transition:1.5s;} #smaller-piece-svg.active #smaller-piece-svg-building-violet-top {top:25.96%;} #smaller-piece-svg.active #smaller-piece-svg-building-blue svg {top:0;} #smaller-piece-svg.active #smaller-piece-svg-mask {width:0;} #smaller-piece-svg-building-blue g polyline {visibility: hidden;stroke-dasharray: 64;stroke-dashoffset: 64;-webkit-transition: 2s .3s;-moz-transition: 2s .3s;-o-transition: 2s .3s;transition: 2s .3s;} #smaller-piece-svg-building-blue g rect {visibility: hidden;stroke-dasharray: 51;stroke-dashoffset: 51;-webkit-transition: 2s .3s;-moz-transition: 2s .3s;-o-transition: 2s .3s;transition: 2s .3s;} #smaller-piece-svg-building-blue g line {visibility: hidden;stroke-dasharray: 47;stroke-dashoffset: 47;-webkit-transition: 2s .3s;-moz-transition: 2s .3s;-o-transition: 2s .3s;transition: 2s .3s;} #smaller-piece-svg-building-orange g polyline {visibility: hidden;stroke-dasharray: 64;stroke-dashoffset: 64;-webkit-transition: 1s;-moz-transition: 1s;-o-transition: 1s;transition: 1s;} #smaller-piece-svg-building-orange g rect {visibility: hidden;stroke-dasharray: 51;stroke-dashoffset: 51;-webkit-transition: 1.5s;-moz-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} #smaller-piece-svg-building-orange g line {visibility: hidden;stroke-dasharray: 47;stroke-dashoffset: 47;-webkit-transition: 2s;-moz-transition: 2s;-o-transition: 2s;transition: 2s;} #smaller-piece-svg-building-violet-bottom g polyline {visibility: hidden;stroke-dasharray: 55;stroke-dashoffset: 55;-webkit-transition: 1s;-moz-transition: 1s;-o-transition: 1s;transition: 1s;} #smaller-piece-svg-building-violet-bottom g rect {visibility: hidden;stroke-dasharray: 104;stroke-dashoffset: 104;-webkit-transition: 1.5s;-moz-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} #smaller-piece-svg-building-violet-bottom g line {visibility: hidden;stroke-dasharray: 70;stroke-dashoffset: 70;-webkit-transition: 2s;-moz-transition: 2s;-o-transition: 2s;transition: 2s;} #smaller-piece-svg-building-violet-top g polyline {visibility: hidden;stroke-dasharray: 64;stroke-dashoffset: 64;-webkit-transition: 1s;-moz-transition: 1s;-o-transition: 1s;transition: 1s;} #smaller-piece-svg-building-violet-top g rect {visibility: hidden;stroke-dasharray: 44;stroke-dashoffset: 44;-webkit-transition: 1.5s;-moz-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} #smaller-piece-svg-building-violet-top g line {visibility: hidden;stroke-dasharray: 68;stroke-dashoffset: 68;-webkit-transition: 2s;-moz-transition: 2s;-o-transition: 2s;transition: 2s;} #smaller-piece-svg.active g *, #smaller-piece-svg.inactive g * {visibility:visible !important;} #smaller-piece-svg.active g * {stroke-dashoffset:0 !important} /* SUNSET */ #sunset-svg svg{display:block;position:absolute;left:0;top:0;} /*#sunset-svg{width:438px;padding-top:72px;height:0;position:absolute;overflow:hidden;left:834px;top:113px;z-index:109;}*/ #sunset-svg-background{width: 100%;padding-top:16.44%;left: 0;top:0;z-index: 1;height:0;position: absolute;display:block} /* TRAIN */ #train-svg svg{display:block;position:absolute;left:0;top:0;} /*#train-svg{width:338px;padding-top:69px;height:0;position:absolute;overflow:hidden;left:1387px;top:505px;z-index:120;}*/ #train-svg-background{width: 100%;padding-top:20.38%;left: 0;top:0;z-index: 1;height:0;position: absolute;} #train-svg-heart-1{width: 04.81%;padding-top:04.33%;left: -10%;top:08.74%;z-index: 3;height:0;position: absolute;display:none;} #train-svg-heart-2{width: 04.81%;padding-top:04.33%;left: -10%;top:-04.74%;z-index: 3;height:0;position: absolute;display:none;} #train-svg-heart-3{width: 04.81%;padding-top:04.33%;left: -10%;top:25.74%;z-index: 3;height:0;position: absolute;display:none;} #train-svg-cross-1{width: 07.79%;padding-top:07.79%;left: -10%;top:04.62%;z-index: 3;height:0;position: absolute;display:none;} #train-svg-cross-2{width: 05.79%;padding-top:05.79%;left: -10%;top:08.62%;z-index: 3;height:0;position: absolute;display:none;} #train-svg-train{width: 114.289%;padding-top:10.793%;left: -17%;top: 26%;z-index: 2;height:0;position: absolute;} #train-svg #train-svg-train g line{visibility:hidden;-webkit-transition: 1.5s;-moz-transition:1.5s;-o-transition:1.5s;transition:1.5s;} #train-svg #train-svg-train g line{stroke-dasharray: 126;stroke-dashoffset: 126} #train-svg.inactive #train-svg-train g line, #train-svg.active #train-svg-train g line{visibility:visible;} #train-svg.active #train-svg-train g line{stroke-dashoffset: 0;} #train-svg-heart-1.active{ -webkit-animation: train_svg_heart_1 2s cubic-bezier(0.580, 0.250, 0.225, 0.645) infinite; -moz-animation: train_svg_heart_1 2s cubic-bezier(0.580, 0.250, 0.225, 0.645) infinite; -o-animation: train_svg_heart_1 2s cubic-bezier(0.580, 0.250, 0.225, 0.645) infinite; animation: train_svg_heart_1 2s cubic-bezier(0.580, 0.250, 0.225, 0.645) infinite } #train-svg-heart-2.active{ -webkit-animation: train_svg_heart_2 2s cubic-bezier(0.035, 0.690, 0.830, 0.230) infinite; -moz-animation: train_svg_heart_2 2s cubic-bezier(0.035, 0.690, 0.830, 0.230) infinite; -o-animation: train_svg_heart_2 2s cubic-bezier(0.035, 0.690, 0.830, 0.230) infinite; animation: train_svg_heart_2 2s cubic-bezier(0.035, 0.690, 0.830, 0.230) infinite; } #train-svg-heart-3.active{ -webkit-animation: train_svg_heart_3 2s infinite; -moz-animation: train_svg_heart_3 2s infinite; -o-animation: train_svg_heart_3 2s infinite; animation: train_svg_heart_3 2s infinite; } #train-svg-cross-1.active{ -webkit-animation: train_svg_cross_1 2s infinite linear; -moz-animation: train_svg_cross_1 2s infinite linear; -o-animation: train_svg_cross_1 2s infinite linear; animation: train_svg_cross_1 2s infinite linear; } #train-svg-cross-2.active{ -webkit-animation: train_svg_cross_2 2s infinite; -moz-animation: train_svg_cross_2 2s infinite; -o-animation: train_svg_cross_2 2s infinite; animation: train_svg_cross_2 2s infinite; } @-webkit-keyframes train_svg_heart_1{ 0% {left:-10%;top:0;} 40% {top: 50%;} 75% {top: 70%;} 100% {left: 100%;top:10%;} } @keyframes train_svg_heart_1{ 0% {left:-10%;top:0;} 40% {top: 50%;} 75% {top: 70%;} 100% {left: 100%;top:10%;} } @-webkit-keyframes train_svg_heart_2{ 0% {left:-10%;top:30%;} 50% {top: 40%;} 100% {left: 100%;top:50%;} } @keyframes train_svg_heart_2{ 0% {left:-10%;top:30%;} 50% {top: 40%;} 100% {left: 100%;top:50%;} } @-webkit-keyframes train_svg_heart_3{ 0% {left:-10%;top:0;} 50% {top: 60%;} 100% {left: 100%;top:90%;} } @keyframes train_svg_heart_3{ 0% {left:-10%;top:0;} 50% {top: 60%;} 100% {left: 100%;top:90%;} } @-webkit-keyframes train_svg_cross_1{ 0% {left:-10%;top:100%;} 50% {top: 4.62%;} 100% {left: 100%;top:-10%;} } @keyframes train_svg_cross_1{ 0% {left:-10%;top:100%;} 50% {top: 4.62%;} 100% {left: 100%;top:-10%;} } @-webkit-keyframes train_svg_cross_2{ 0% {left:-10%;top:0;} 50% {left: 30%;top: 65%;} 100% {left: 100%;top:50%;} } @keyframes train_svg_cross_2{ 0% {left:-10%;top:0;} 50% {left: 30%;top: 65%;} 100% {left: 100%;top:50%;} } /* TRASH BINS */ #trash-bins-svg svg{display:block;position:absolute;left:0px;top:0px;} #trash-bins-svg g *{visibility:visible;stroke-dasharray:33;stroke-dashoffset:33;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} /*#trash-bins-svg{width:253px;padding-top:61px;height:0;position:absolute;overflow:hidden;left:988px;top:697px;z-index:121;}*/ #trash-bins-svg-background{width: 100%;padding-top:24.42%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;display:block} #trash-bins-svg-trash-green-cont {width: 18.19%;padding-top:19.63%;left: 9.34%;top:19.9%;z-index: 2;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;} #trash-bins-svg-trash-green{width: 100%;height:100%;top:0;left:0;z-index: 2;position: absolute;display:block} #trash-bins-svg-trash-green-mask{width:100%;height:100%;top:0;left:0;z-index: 4;position: absolute;display:block} #trash-bins-svg-trash-green-label{width:100%;height:100%;top:0;left:0;z-index: 5;position: absolute;display:block} #trash-bins-svg-bottle{width: 15.48%;padding-top: 24.09%;left: 42.12%;top: -135.13%;z-index: 3;height: 0;position: absolute;visibility:hidden;-webkit-transition: top .5s, opacity .2s;-moz-transition: top .5s, opacity .2s;-o-transition: top .5s, opacity .2s;transition: top .5s, opacity .2s;} #trash-bins-svg-trash-shield-1{width: 18.19%;padding-top:19.63%;left: 9.34%;top:19.9%;z-index: 6;height:0;position: absolute;-webkit-transform: rotateY(90deg);-moz-transform: rotateY(90deg);-ms-transform: rotateY(90deg);-o-transform: rotateY(90deg);transform: rotateY(90deg);-webkit-transition: .25s;-moz-transition: .25s;-o-transition: .25s;transition: .25s;} #trash-bins-svg-trash-shield-1 g.drawing * {visibility:hidden;stroke-dasharray:50;stroke-dashoffset:50;-webkit-transition:.5s 1s;-moz-transition:.5s 1s;-o-transition:.5s 1s;transition:.5s 1s;} #trash-bins-svg-trash-blue-cont {width: 18.19%;padding-top:19.63%;left: 28.66%;top:19.9%;z-index: 2;height:0;position:absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear} #trash-bins-svg-trash-blue{width:100%;height:100%;left:0;top:0;z-index: 7;position: absolute;} #trash-bins-svg-trash-blue-mask{width:100%;height:100%;left:0;top:0;z-index: 9;position: absolute;display:block} #trash-bins-svg-trash-blue-label{width:100%;height:100%;left:0;top:0;;z-index: 10;position: absolute;display:block} #trash-bins-svg-paper{width: 42.11%;padding-top: 43.99%;left: 30.26%;top: -144.13%;z-index: 8;height: 0;position: absolute;visibility:hidden;-webkit-transition: top .5s, opacity .2s;-moz-transition: top .5s, opacity .2s;-o-transition: top .5s, opacity .2s;transition: top .5s, opacity .2s;} #trash-bins-svg-trash-shield-2{width: 18.19%;padding-top:19.63%;left: 28.66%;top:19.9%;z-index: 11;height:0;position: absolute;-webkit-transform: rotateY(90deg);-moz-transform: rotateY(90deg);-ms-transform: rotateY(90deg);-o-transform: rotateY(90deg);transform: rotateY(90deg);-webkit-transition: .25s;-moz-transition: .25s;-o-transition: .25s;transition: .25s;} #trash-bins-svg-trash-shield-2 g.drawing * {visibility:hidden;stroke-dasharray:50;stroke-dashoffset:50;-webkit-transition:.5s 1.25s;-moz-transition:.5s 1.25s;-o-transition:.5s 1.25s;transition:.5s 1.25s;} #trash-bins-svg-trash-red-cont {width: 18.19%;padding-top:19.63%;left: 47.97%;top:19.9%;z-index: 2;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear} #trash-bins-svg-trash-red{width:100%;height:100%;top:0;left:0;z-index: 12;height:0;position: absolute;} #trash-bins-svg-trash-red-mask{width:100%;height:100%;top:0;left:0;;z-index: 14;position: absolute;} #trash-bins-svg-trash-red-label{width:100%;height:100%;top:0;left:0;z-index: 15;position: absolute;} #trash-bins-svg-food{width: 17.07%;padding-top: 24.36%;left: 40.98%;top: -133.13%;z-index: 13;height: 0;position: absolute;visibility:hidden;-webkit-transition: top .5s, opacity .2s;-moz-transition: top .5s, opacity .2s;-o-transition: top .5s, opacity .2s;transition: top .5s, opacity .2s;} #trash-bins-svg-trash-shield-3{width: 18.19%;padding-top:19.63%;left: 47.97%;top:19.9%;z-index: 16;height:0;position: absolute;-webkit-transform: rotateY(90deg);-moz-transform: rotateY(90deg);-ms-transform: rotateY(90deg);-o-transform: rotateY(90deg);transform: rotateY(90deg);-webkit-transition: .25s;-moz-transition: .25s;-o-transition: .25s;transition: .25s;} #trash-bins-svg-trash-shield-3 g.drawing * {visibility:hidden;stroke-dasharray:50;stroke-dashoffset:50;-webkit-transition:.5s 1.5s;-moz-transition:.5s 1.5s;-o-transition:.5s 1.5s;transition:.5s 1.5s;} #trash-bins-svg.active #trash-bins-svg-bottle{visibility: visible;opacity: 1;top: 60%;} #trash-bins-svg.active #trash-bins-svg-paper{visibility:visible;opacity:1;top:51%;} #trash-bins-svg.active #trash-bins-svg-food{visibility:visible;opacity:1;top:60%} #trash-bins-svg.active #trash-bins-svg-trash-green-cont, #trash-bins-svg.active #trash-bins-svg-trash-blue-cont, #trash-bins-svg.active #trash-bins-svg-trash-red-cont{-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);} #trash-bins-svg.active #trash-bins-svg-trash-shield-1, #trash-bins-svg.active #trash-bins-svg-trash-shield-2, #trash-bins-svg.active #trash-bins-svg-trash-shield-3{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);} .trash-bins-delay_25s {-webkit-transition-delay: .25s !important;-moz-transition-delay: .25s !important;-o-transition-delay: .25s !important;transition-delay: .25s !important;} .trash-bins-delay_5s {-webkit-transition-delay: .5s !important;-moz-transition-delay: .5s !important;-o-transition-delay: .5s !important;transition-delay: .5s !important;} .trash-bins-delay_75s {-webkit-transition-delay: .75s !important;-moz-transition-delay: .75s !important;-o-transition-delay: .75s !important;transition-delay: .75s !important;} .trash-bins-delay1s {-webkit-transition-delay: 1s !important;-moz-transition-delay: 1s !important;-o-transition-delay: 1s !important;transition-delay: 1s !important;} .trash-bins-delay1_25s {-webkit-transition-delay: 1.25s !important;-moz-transition-delay: 1.25s !important;-o-transition-delay: 1.25s !important;transition-delay: 1.25s !important;} .trash-bins-delay1_5s {-webkit-transition-delay: 1.5s !important;-moz-transition-delay: 1.5s !important;-o-transition-delay: 1.5s !important;transition-delay: 1.5s !important;} #trash-bins-svg.active svg g.drawing *, #trash-bins-svg.inactive svg g.drawing * {visibility:visible;} #trash-bins-svg.active svg g.drawing * {stroke-dashoffset:0} /* TREES1 */ #trees1-svg svg{display:block;position:absolute;left:0;top:0;} /*#trees1-svg{width:370px;padding-top:224px;height:0;position:absolute;overflow:hidden;}*/ #trees1-svg-backgorund{position: absolute;bottom: 0;right: 0;z-index: 1;height:0;width: 100%;padding-top:60.41%;} /* TREES2 */ #trees2-svg svg{display:block;position:absolute;left:0;top:0;} /*#trees2-svg{width:111px;padding-top:127px;height:0;position:absolute;overflow:hidden;left:1656px;top:106px;z-index:122;}*/ #trees2-svg-background{width: 100%;padding-top:114.41%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;display:block} /* TREES3 */ #trees3-svg svg{display:block;position:absolute;left:0;top:0;} /*#trees3-svg{width:95px;padding-top:236px;height:0;position:absolute;overflow:hidden;left:1671px;top:311px;z-index:121;}*/ #trees3-svg-background{width: 100%;padding-top:248.42%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;display:block} /* TREES4 */ #trees4-svg svg{display:block;position:absolute;left:0;top:0;} /*#trees4-svg{width:236px;padding-top:71px;height:0;position:absolute;overflow:hidden;left:319px;top:721px;z-index:119;}*/ #trees4-svg-background{width: 100%;padding-top:30.08%;left:0;top:0;z-index: 1;height:0;position: absolute;display:block} /* TREES5 */ #trees5-svg svg{display:block;position:absolute;left:0;top:0;} /*#trees5-svg{width:132px;padding-top:188px;height:0;position:absolute;overflow:hidden;left:1314px;top:324px;z-index:124;}*/ #trees5-svg-background{width: 100%;padding-top:142.42%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;display:block} /* WALKING */ #walking-svg svg{display:block;position:absolute;left:0px;top:0px;} /*#walking-svg{width:214px;padding-top:239px;height:0;position:absolute;overflow:hidden;left:380px;top:184px;z-index:120;}*/ #walking-svg-backgorund{width: 100%;padding-top:111.68%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #walking-svg-heart1{width: 14.47%;padding-top:13.02%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;-webkit-animation: walking_heart1 3s ease-in-out infinite alternate;display:none;} #walking-svg-heart2{width: 8.87%;padding-top:7.98%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;-webkit-animation: walking_heart2 4s ease-in-out infinite;display:none;} #walking-svg-heart3{width: 8.87%;padding-top:7.98%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;-webkit-animation: walking_heart3 2s infinite;display:none;} #walking-svg-cross{width: 12.31%;padding-top:12.31%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;-webkit-animation: walking_cross 3.5s linear infinite;display:none;} #walking-svg-frames{width:30.35%;padding-top:29.17%;left:105%;top:0;z-index:2;height:0;position:absolute;-webkit-transition: left 1s;-moz-transition: left 1s;-o-transition: left 1s;transition: left 1s;} #walking-svg-frames-inner{top:0;left:0;width:100%;height:100%;position:absolute;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #walking-svg-frame1{width: 100%;height:99.554%;left: 0%;top:0%;z-index: 1;position: absolute;} #walking-svg-frame2{width: 50.148%;height:100%;left: 33%;top:0%;z-index: 1;position: absolute;display:none;} #walking-svg-frame3{width: 77.005%;height:100%;left: 27%;top:0%;z-index: 1;position: absolute;display:none;} #walking-svg-frame4{width: 100%;height:99.554%;left: 4%;top:0%;z-index: 1;position: absolute;display:none} #walking-svg-frame5{width: 50.148%;height:100%;left: 35%;top:0%;z-index: 1;position: absolute;display:none} #walking-svg-frame6{width: 70.84%;height:100%;left: 31%;top:0%;z-index: 1;position: absolute;display:none} #walking-svg.active #walking-svg-frames {left:60%;} #walking-svg.inactive #walking-svg-frames {-webkit-transition-delay: .25s;-moz-transition-delay: .25s;-o-transition-delay: .25s;transition-delay: .25s} #walking-svg.inactive #walking-svg-frames-inner {-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg);transform: rotateY(180deg);} @-webkit-keyframes walking_heart1{ 0% {left:100%;top:80%;} 100% {left:-20%;top:20%;} } @-webkit-keyframes walking_heart2{ 0% {left:-20%;top:50%;} 100% {left:110%;top:40%;} } @-webkit-keyframes walking_heart3{ 0% {top:70%;left:-10%;} 100% {top:110%;left:70%;} } @-webkit-keyframes walking_cross{ 0% {left:-20%;top:-20%;} 20% {left:20%;top:-10%;} 50% {left:65%;top:25%;} 80% {left:100%;top:70%;} 100% {left:110%;top:110%;} } /* WALLET */ #wallet-svg svg{display:block;position:absolute;left:0px;top:0px;} /*#wallet-svg{width:200px;padding-top:185px;height:0;position:absolute;overflow:hidden;left:834px;top:0px;z-index:122;}*/ #wallet-svg-backgorund{width: 100%;padding-top:92.63%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;display:block} #wallet-svg-wallet-back{width: 47.84%;padding-top:30.37%;left: 25.46%;top:67.21%;z-index: 2;height:0;position: absolute;display:block} #wallet-svg-wallet-front{width: 47.84%;padding-top:30.37%;left: 25.46%;top:67.21%;z-index: 5;height:0;position: absolute;display:block} #wallet-svg-wallet-front g.drawing * {visibility:hidden;stroke-dasharray:155;stroke-dashoffset:155;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #wallet-svg-coin{width: 26.46%;padding-top:28.06%;left: 36.15%;top:32.53%;z-index: 3;height:0;position: absolute;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #wallet-svg-coin g.drawing path {visibility:hidden;stroke-dasharray:57;stroke-dashoffset:57;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #wallet-svg-coin g.drawing line {visibility:hidden;stroke-dasharray:5;stroke-dashoffset:5;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #wallet-svg-heart{width: 54.3%;padding-top:23.47%;left: 22.82%;top:70%;z-index: 4;height:0;position: absolute;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #wallet-svg-heart g.drawing line {visibility:hidden;stroke-dasharray:15;stroke-dashoffset:15;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} .wallet_delay_5s{-webkit-transition-delay:.5s !important;-moz-transition-delay:.5s !important;-o-transition-delay:.5s !important;transition-delay:.5s !important;} #wallet-svg-heart.wallet_delay_5s g.drawing line {-webkit-transition-delay:1s;-moz-transition-delay:1s;-o-transition-delay:1s;transition-delay:1s;} #wallet-svg.active svg g.drawing *, #wallet-svg.inactive svg g.drawing * {visibility:visible;} #wallet-svg.active svg g.drawing * {stroke-dashoffset:0} #wallet-svg.active #wallet-svg-coin{top:72%;} #wallet-svg.active #wallet-svg-heart{top:27.73%;} /* WATER1 */ #water1-svg svg{display:block;position:absolute;left:0;top:0;} /*#water1-svg{width:281px;padding-top:281px;height:0;position:absolute;overflow:hidden;left:110px;top:95px;z-index:10;}*/ #water1-svg-background{width: 100%;padding-top:100%;left: 0;top:0;z-index: 1;height:0;position: absolute;display:block} /* WATER2 */ #water2-svg svg{display:block;position:absolute;left:0;top:0;} /*#water2-svg{width:95px;padding-top:202px;height:0;position:absolute;overflow:hidden;left:1671px;top:138px;z-index:110;}*/ #water2-svg-background{width: 100%;padding-top:212.63%;left: 0;top:0;z-index: 1;height:0;position: absolute;display:block} /* WATER3 */ #water3-svg svg{display:block;position:absolute;left:0;top:0;} /*#water3-svg{width:135px;padding-top:430px;height:0;position:absolute;overflow:hidden;left:1758px;top:76px;z-index:111;}*/ #water3-svg-background{width: 100%;padding-top:318.52%;left: 0;top:0;z-index: 1;height:0;position: absolute;display:block} /* WATER4 */ #water4-svg svg{display:block;position:absolute;left:0;top:0;} /*#water4-svg{width:191px;padding-top:202px;height:0;position:absolute;overflow:hidden;left:606px;top:1534px;z-index:109;}*/ #water4-svg-background{width: 100%;padding-top:105.76%;left: 0;top:0;z-index: 1;height:0;position: absolute;display:block} /* YELLOW NEIGHBOURHOOD */ #yellow-neighbourhood-svg svg{display:block;position:absolute;left:0px;top:0px;} /*#yellow-neighbourhood-svg{width:242px;padding-top:198px;height:0;position:absolute;overflow:hidden;left:593px;top:35px;z-index:120;}*/ #yellow-neighbourhood-svg-background{width: 100%;padding-top:81.98%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #yellow-neighbourhood-svg-building-1{width: 18.86%;padding-top:21.58%;left: 26.60%;top:0%;z-index: 2;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #yellow-neighbourhood-svg-building-1.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #yellow-neighbourhood-svg-building-1 g.drawing polyline{visibility:hidden;stroke-dasharray:68;stroke-dashoffset:68;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #yellow-neighbourhood-svg-building-1-flip{width: 18.86%;padding-top:21.58%;left: 26.60%;top:0%;z-index: 3;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #yellow-neighbourhood-svg-building-1-flip.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #yellow-neighbourhood-svg-building-2{width: 36.57%;padding-top:24.83%;left: 58.87%;top:15.06%;z-index: 4;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #yellow-neighbourhood-svg-building-2.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #yellow-neighbourhood-svg-building-2 g.drawing polyline{visibility:hidden;stroke-dasharray:80;stroke-dashoffset:80;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #yellow-neighbourhood-svg-building-2 g.drawing rect{visibility:hidden;stroke-dasharray:62;stroke-dashoffset:62;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #yellow-neighbourhood-svg-building-2-flip{width: 36.57%;padding-top:24.83%;left: 58.87%;top:15.06%;z-index: 5;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #yellow-neighbourhood-svg-building-2-flip.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #yellow-neighbourhood-svg-building-3{width: 38.11%;padding-top:39.50%;left: 11.85%;top:35.76%;z-index: 6;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #yellow-neighbourhood-svg-building-3.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #yellow-neighbourhood-svg-building-3 g.drawing rect{visibility:hidden;stroke-dasharray:62;stroke-dashoffset:62;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #yellow-neighbourhood-svg-building-3-flip{width: 38.11%;padding-top:39.50%;left: 11.85%;top:35.76%;z-index: 7;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #yellow-neighbourhood-svg-building-3-flip.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #yellow-neighbourhood-svg-building-4{width: 13.14%;padding-top:13.81%;left: 74.10%;top:60.71%;z-index: 8;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #yellow-neighbourhood-svg-building-4.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #yellow-neighbourhood-svg-building-4 g.drawing rect{visibility:hidden;stroke-dasharray:62;stroke-dashoffset:62;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #yellow-neighbourhood-svg-building-4-flip{width: 13.14%;padding-top:13.81%;left: 74.10%;top:60.71%;z-index: 9;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #yellow-neighbourhood-svg-building-4-flip.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #yellow-neighbourhood-svg-building-5{width: 26.78%;padding-top:36.14%;left: 39.28%;top:55.95%;z-index: 10;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #yellow-neighbourhood-svg-building-5.delay_25s {-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #yellow-neighbourhood-svg-building-5 g.drawing polyline{visibility:hidden;stroke-dasharray:70;stroke-dashoffset:70;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #yellow-neighbourhood-svg-building-5 g.drawing rect{visibility:hidden;stroke-dasharray:62;stroke-dashoffset:62;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #yellow-neighbourhood-svg-building-5-flip{width: 26.78%;padding-top:36.14%;left: 39.28%;top:55.95%;z-index: 11;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition: .25s linear;-moz-transition: .25s linear;-o-transition: .25s linear;transition: .25s linear;} #yellow-neighbourhood-svg-building-5-flip.delay_75s {-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s} #yellow-neighbourhood-svg-tree{width: 13.34%;padding-top:18.61%;left: 8.63%;top:4.36%;z-index: 12;height:0;position: absolute;} #yellow-neighbourhood-svg-bush{width: 14.33%;padding-top:7.94%;left: 82.51%;top:72.74%;z-index: 13;height:0;position: absolute;} #yellow-neighbourhood-svg.active g.drawing *, #yellow-neighbourhood-svg.inactive g.drawing * {visibility:visible;} #yellow-neighbourhood-svg.active g.drawing *{stroke-dashoffset:0} #yellow-neighbourhood-svg.active #yellow-neighbourhood-svg-building-1, #yellow-neighbourhood-svg.active #yellow-neighbourhood-svg-building-2, #yellow-neighbourhood-svg.active #yellow-neighbourhood-svg-building-3, #yellow-neighbourhood-svg.active #yellow-neighbourhood-svg-building-4, #yellow-neighbourhood-svg.active #yellow-neighbourhood-svg-building-5 {-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);} #yellow-neighbourhood-svg.active #yellow-neighbourhood-svg-building-1-flip, #yellow-neighbourhood-svg.active #yellow-neighbourhood-svg-building-2-flip, #yellow-neighbourhood-svg.active #yellow-neighbourhood-svg-building-3-flip, #yellow-neighbourhood-svg.active #yellow-neighbourhood-svg-building-4-flip, #yellow-neighbourhood-svg.active #yellow-neighbourhood-svg-building-5-flip{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);} /*******************/ /*******************/ /* ALTERNATIVE MAP */ /*******************/ /*******************/ .game-zoom-area .alternative-drawing-container{position: absolute;top: 0;left: 0;overflow: hidden;height: 100%;width: 100%;z-index:1;background-color:gray;} .game-zoom-area .alternative-drawing-inner{position: absolute;height:869.816px;width:1900.03px;left:754px;top:470px;z-index:1;} .alternative-drawing-container svg{display:block;position:absolute;left:0;top:0;overflow:visible;} .alternative-drawing-container .active svg .drawing line, .alternative-drawing-container .active svg .drawing-2 line, .alternative-drawing-container .active svg .drawing2 line, .alternative-drawing-container .active svg .drawing2 polyline, .alternative-drawing-container .active svg .drawing polyline, .alternative-drawing-container .active svg .drawing polygon, .alternative-drawing-container .active svg .drawing circle, .alternative-drawing-container .active svg .drawing rect, .alternative-drawing-container .active svg .drawing path {stroke-dashoffset:0 !important} #alternative-background-svg{width:100%;height:100%;position:absolute;overflow:hidden;left:0px;top:0px;z-index:1;} /* SHCOOL */ #alternative-school-svg{width:334.06px;padding-top:211.448px;height:0;position:absolute;overflow:hidden;left:839px;top:548px;z-index:110;} #alternative-school-svg .drawing polyline {stroke-dasharray:154;stroke-dashoffset:154;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-school-svg .drawing line {stroke-dasharray:76;stroke-dashoffset:76;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-school-svg .drawing rect {stroke-dasharray:72;stroke-dashoffset:72;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-school-svg-school{width: 100%;padding-top:63%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #alternative-school-svg-letter1{width: 2.75%;padding-top:6%;left: 48%;top:12%;z-index: 2;height:0;position: absolute;opacity:0;-webkit-transition:.5s .5s;-moz-transition:.5s .5s;-o-transition:.5s .5s;transition:.5s .5s;-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-ms-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5);} #alternative-school-svg.active #alternative-school-svg-letter1 {opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);} #alternative-school-svg-letter2{width: 2.75%;padding-top:6%;left: 19%;top:20%;z-index: 2;height:0;position: absolute;opacity:0;-webkit-transition:.5s 1s;-moz-transition:.5s 1s;-o-transition:.5s 1s;transition:.5s 1s;-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-ms-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5);} #alternative-school-svg.active #alternative-school-svg-letter2 {opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);} #alternative-school-svg-letter3{width: 2.75%;padding-top:6%;left: 40%;top:24%;z-index: 2;height:0;position: absolute;opacity:0;-webkit-transition:.5s 1.2s;-moz-transition:.5s 1.2s;-o-transition:.5s 1.2s;transition:.5s 1.2s;-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-ms-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5);} #alternative-school-svg.active #alternative-school-svg-letter3 {opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);} #alternative-school-svg-letter4{width: 2.75%;padding-top:6%;left: 35%;top:10%;z-index: 2;height:0;position: absolute;opacity:0;-webkit-transition:.5s 1.5s;-moz-transition:.5s 1.5s;-o-transition:.5s 1.5s;transition:.5s 1.5s;-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-ms-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5);} #alternative-school-svg.active #alternative-school-svg-letter4 {opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);} /* TRAFFIC/BUS */ #alternative-traffic-svg{width:348.909px;padding-top:101.371px;height:0;position:absolute;overflow:hidden;left:839px;top:184px;z-index:110;} #alternative-traffic-svg .drawing path {stroke-dasharray:165;stroke-dashoffset:165;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-traffic-svg-traffic{width: 99.71%;padding-top:29%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} /* TRAIN */ #alternative-train-svg{width:338px;height:69px;position:absolute;overflow:hidden;left:1392px;top:506px;z-index:120;} /* PARK */ #alternative-park-svg{width:241.6px;padding-top:189.446px;height:0;position:absolute;overflow:hidden;left:597px;top:234px;z-index:110;} #alternative-park-svg .drawing line {stroke-dasharray:76;stroke-dashoffset:76;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-park-svg .drawing path {stroke-dasharray:76;stroke-dashoffset:76;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-park-svg .drawing polyline {stroke-dasharray:76;stroke-dashoffset:76;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-park-svg .drawing-2 line {stroke-dasharray:20;stroke-dashoffset:20;-webkit-transition:.2s 1s;-moz-transition:.2s 1s;-o-transition:.2s 1s;transition:.2s 1s;} #alternative-park-svg-park{width: 100%;padding-top:78%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} /* POLICE */ #alternative-police-svg{width:248px;height:153px;position:absolute;overflow:hidden;left:311px;top:581px;z-index:118;} /* BASEBALL FIELD */ #alternative-baseball-field-svg{width:191.226px;padding-top:219.061px;height:0;position:absolute;overflow:hidden;left:1539px;top:541px;z-index:110;} #alternative-baseball-field-svg .drawing line {stroke-dasharray:132;stroke-dashoffset:132;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-baseball-field-svg-baseball-field{width: 100%;padding-top:115%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} /* LARGER PIECE */ #alternative-larger-piece-svg{width:298.327px;padding-top:302.749px;height:0;position:absolute;overflow:hidden;left:1094px;top:272px;z-index:110;} #alternative-larger-piece-svg .drawing line {stroke-dasharray:42;stroke-dashoffset:42;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-larger-piece-svg .drawing path {stroke-dasharray:90;stroke-dashoffset:90;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-larger-piece-svg .drawing rect {stroke-dasharray:237;stroke-dashoffset:237;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-larger-piece-svg .drawing polyline {stroke-dasharray:158;stroke-dashoffset:158;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-larger-piece-svg-larger-piece{width: 100%;padding-top:101%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} /* SMALL PIECE */ #alternative-small-piece-svg{width:148.03px;padding-top:214.911px;height:0;position:absolute;overflow:hidden;left:191px;top:579px;z-index:110;} #alternative-small-piece-svg-small-piece{width: 100%;padding-top:145%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #alternative-small-piece-svg .drawing line {stroke-dasharray:68;stroke-dashoffset:68;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-small-piece-svg .drawing polygon {stroke-dasharray:25;stroke-dashoffset:25;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-small-piece-svg .drawing rect {stroke-dasharray:97;stroke-dashoffset:97;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-small-piece-svg .drawing polyline {stroke-dasharray:55;stroke-dashoffset:55;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-small-piece-svg-mask{position: absolute;right: 52%;top: 32.5%;width: 37%;height: 7%;z-index: 2;background-color:#796561;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #alternative-small-piece-svg.active #alternative-small-piece-svg-mask {width:0;} /* PURPLE NEIGHBOURHOOD */ #alternative-purple-neighbourhood-svg{width:280.292px;padding-top:241.767px;height:0;position:absolute;overflow:hidden;left:559px;top:418px;z-index:110;} #alternative-purple-neighbourhood-svg-purple-neighbourhood{width: 100%;padding-top:86%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #alternative-purple-neighbourhood-svg-purple-neighbourhood .drawing polyline{stroke-dasharray:67;stroke-dashoffset:67;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-purple-neighbourhood-svg-purple-neighbourhood .drawing-window {opacity:0;-webkit-transition:.1s;-moz-transition:.1s;-o-transition:.1s;transition:.1s;} #alternative-purple-neighbourhood-svg-purple-neighbourhood .drawing-window-1{-webkit-transition-delay:0s;-moz-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s;} #alternative-purple-neighbourhood-svg-purple-neighbourhood .drawing-window-2{-webkit-transition-delay:.1s;-moz-transition-delay:.1s;-o-transition-delay:.1s;transition-delay:.1s;} #alternative-purple-neighbourhood-svg-purple-neighbourhood .drawing-window-3{-webkit-transition-delay:.2s;-moz-transition-delay:.2s;-o-transition-delay:.2s;transition-delay:.2s;} #alternative-purple-neighbourhood-svg-purple-neighbourhood .drawing-window-4{-webkit-transition-delay:.3s;-moz-transition-delay:.3s;-o-transition-delay:.3s;transition-delay:.3s;} #alternative-purple-neighbourhood-svg-purple-neighbourhood .drawing-window-5{-webkit-transition-delay:.4s;-moz-transition-delay:.4s;-o-transition-delay:.4s;transition-delay:.4s;} #alternative-purple-neighbourhood-svg-purple-neighbourhood .drawing-window-6{-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s;} #alternative-purple-neighbourhood-svg-purple-neighbourhood .drawing-window-7{-webkit-transition-delay:.6s;-moz-transition-delay:.6s;-o-transition-delay:.6s;transition-delay:.6s;} #alternative-purple-neighbourhood-svg-purple-neighbourhood .drawing-window-8{-webkit-transition-delay:.7s;-moz-transition-delay:.7s;-o-transition-delay:.7s;transition-delay:.7s;} #alternative-purple-neighbourhood-svg-purple-neighbourhood .drawing-window-9{-webkit-transition-delay:.8s;-moz-transition-delay:.8s;-o-transition-delay:.8s;transition-delay:.8s;} #alternative-purple-neighbourhood-svg-purple-neighbourhood .drawing-window-10{-webkit-transition-delay:1s;-moz-transition-delay:1s;-o-transition-delay:1s;transition-delay:1s;} #alternative-purple-neighbourhood-svg.active #alternative-purple-neighbourhood-svg-purple-neighbourhood .drawing-window {opacity:1;} #alternative-purple-neighbourhood-svg-armchair{width: 7.94%;padding-top:10%;left: 34%;top:22%;z-index: 2;height:0;position: absolute;opacity:1;transition:.2s;transition-delay:1.5s} #alternative-purple-neighbourhood-svg.active #alternative-purple-neighbourhood-svg-armchair {transition-delay:.5s;opacity:0;} #alternative-purple-neighbourhood-svg-lamp{width: 4.22%;padding-top:15%;left: 44%;top:17%;z-index: 3;height:0;position: absolute;opacity:1;transition:.2s;transition-delay:1.3s} #alternative-purple-neighbourhood-svg.active #alternative-purple-neighbourhood-svg-lamp {transition-delay:.7s;opacity:0;} #alternative-purple-neighbourhood-svg-table{width: 5.35%;padding-top:5%;left: 49%;top:29%;z-index: 3;height:0;position: absolute;opacity:1;transition:.2s;transition-delay:1.1s} #alternative-purple-neighbourhood-svg.active #alternative-purple-neighbourhood-svg-table {transition-delay:.9s;opacity:0;} #alternative-purple-neighbourhood-svg-box1{width: 4.19%;padding-top:3%;left: 49%;top:22%;z-index: 2;height:0;position: absolute;opacity:1;transition:.2s;transition-delay:.9s} #alternative-purple-neighbourhood-svg.active #alternative-purple-neighbourhood-svg-box1{transition-delay:1.1s;opacity:0;} #alternative-purple-neighbourhood-svg-box2{width: 4.67%;padding-top:3%;left: 43%;top:31%;z-index: 2;height:0;position: absolute;opacity:1;transition:.2s;transition-delay:.7s} #alternative-purple-neighbourhood-svg.active #alternative-purple-neighbourhood-svg-box2 {transition-delay:1.3s;opacity:0;} #alternative-purple-neighbourhood-svg-box3{width: 7.46%;padding-top:7%;left: 48%;top:26%;z-index: 2;height:0;position: absolute;opacity:1;transition:.2s;transition-delay:.5s} #alternative-purple-neighbourhood-svg.active #alternative-purple-neighbourhood-svg-box3 {transition-delay:1.5s;opacity:0;} #alternative-purple-neighbourhood-svg-car{width: 37.64%;padding-top:24%;left: 57%;top:8%;z-index: 2;height:0;position: absolute;transition:.5s;} #alternative-purple-neighbourhood-svg.active #alternative-purple-neighbourhood-svg-car {transition-delay:1.7s;left:120%;} #alternative-purple-neighbourhood-svg-car .drawing polygon{stroke-dasharray:53;stroke-dashoffset:53;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #alternative-purple-neighbourhood-svg-car .drawing line{stroke-dasharray:43;stroke-dashoffset:43;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #alternative-purple-neighbourhood-svg-car svg .car-group {-webkit-animation:alternative_purple_neighbourhood_car .1s alternate linear infinite;-moz-animation:alternative_purple_neighbourhood_car .1s alternate linear infinite;-o-animation:alternative_purple_neighbourhood_car .1s alternate linear infinite;animation:alternative_purple_neighbourhood_car .1s alternate linear infinite;-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-o-animation-play-state:paused;animation-play-state:paused} #alternative-purple-neighbourhood-svg.active #alternative-purple-neighbourhood-svg-car svg .car-group {-webkit-animation-play-state:running;-moz-animation-play-state:running;-o-animation-play-state:running;animation-play-state:running;} @-webkit-keyframes alternative_purple_neighbourhood_car{ from {-webkit-transform:translate(0,0px);-moz-transform:translate(0,0px);-ms-transform:translate(0,0px);-o-transform:translate(0,0px);transform:translate(0,0px);} to {-webkit-transform:translate(0,-2px);-moz-transform:translate(0,-2px);-ms-transform:translate(0,-2px);-o-transform:translate(0,-2px);transform:translate(0,-2px)} } @keyframes alternative_purple_neighbourhood_car{ from {-webkit-transform:translate(0,0px);-moz-transform:translate(0,0px);-ms-transform:translate(0,0px);-o-transform:translate(0,0px);transform:translate(0,0px);} to {-webkit-transform:translate(0,-2px);-moz-transform:translate(0,-2px);-ms-transform:translate(0,-2px);-o-transform:translate(0,-2px);transform:translate(0,-2px)} } /* FOOD */ #alternative-food-svg{width:211.021px;padding-top:201.9px;height:0;position:absolute;overflow:hidden;left:1275px;top:137px;z-index:120;} #alternative-food-svg-food{width: 100%;padding-top:96%;left: 76%;top:10%;z-index: 2;height:0;position: absolute;} #alternative-food-svg .drawing path {stroke-dasharray:94;stroke-dashoffset:94;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-food-svg .drawing circle {stroke-dasharray:80;stroke-dashoffset:80;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-food-svg .drawing line {stroke-dasharray:95;stroke-dashoffset:95;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-food-svg .drawing polygon {stroke-dasharray:180;stroke-dashoffset:180;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-food-svg .text {opacity:0;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-food-svg.active .text {opacity:1;} /* BIKE */ #alternative-bike-svg{width:280.418px;padding-top:136.295px;height:0;position:absolute;overflow:hidden;left:558px;top:659px;z-index:110;} #alternative-bike-svg-bike{width: 100%;padding-top:49%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #alternative-bike-svg .drawing path {stroke-dasharray:355;stroke-dashoffset:355;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-bike-svg .drawing line {stroke-dasharray:75;stroke-dashoffset:75;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-bike-svg .drawing polyline {stroke-dasharray:30;stroke-dashoffset:30;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-bike-svg .drawing2 line {stroke-dasharray:30;stroke-dashoffset:30;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-bike-svg .drawing2 polyline {stroke-dasharray:70;stroke-dashoffset:70;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #alternative-bike-svg.active .drawing2 line, #alternative-bike-svg.active .drawing2 polyline {-webkit-transition-delay:.8s;-moz-transition-delay:.8s;-o-transition-delay:.8s;transition-delay:.8s;} /* BOOK */ #alternative-book-svg{width:210.329px;padding-top:140.181px;height:0;position:absolute;left:393px;top:45px;z-index:110;} #alternative-book-svg-book1{width: 100%;padding-top:67%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #alternative-book-svg-book2-left{width: 100%;padding-top:67%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;visibility:hidden;overflow:hidden;} #alternative-book-svg-book2-pieces{width: 100%;padding-top:67%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;visibility:hidden;} #alternative-book-svg-book2-right{width: 100%;padding-top:67%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;visibility:hidden;} #alternative-book-svg.active #alternative-book-svg-book1{visibility:hidden;} #alternative-book-svg.active #alternative-book-svg-book2-left, #alternative-book-svg.active #alternative-book-svg-book2-pieces, #alternative-book-svg.active #alternative-book-svg-book2-right {visibility:visible;} #alternative-book-svg.active #alternative-book-svg-book2-pieces{transition:1.5s ease-out; top:-10%;} #alternative-book-svg.active #alternative-book-svg-book2-right {transition:1s ease-out; left:5%;} /* HANDS */ #alternative-hands-svg{width:302.754px;padding-top:167.056px;height:0;position:absolute;overflow:hidden;left:1375px;top:340px;z-index:110;} #alternative-hands-svg-hands{width: 100%;padding-top:55%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #alternative-hands-svg .drawing line {stroke-dasharray:75;stroke-dashoffset:75;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-hands-svg .drawing2 line {stroke-dasharray:30;stroke-dashoffset:30;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-hands-svg .drawing2 polyline {stroke-dasharray:70;stroke-dashoffset:70;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;} #alternative-hands-svg.active .drawing2 line, #alternative-hands-svg.active .drawing2 polyline {transition-delay:.5s;} /* BUILDINGS */ #alternative-buildings-paint-svg{width:446.995px;padding-top:204.923px;height:0;position:absolute;overflow:hidden;left:112px;top:377px;z-index:110;} #alternative-buildings-paint-svg-buildings-paint{width: 100%;padding-top:46%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #alternative-buildings-paint-svg .drawing line {stroke-dasharray:140;stroke-dashoffset:140;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-buildings-paint-svg .drawing polyline {stroke-dasharray:81;stroke-dashoffset:81;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-buildings-paint-svg .drawing rect {stroke-dasharray:101;stroke-dashoffset:101;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} /* YELLOW NEIGHBOURHOOD */ #alternative-yellow-neighbourhood-svg{width:241.701px;padding-top:160.76px;height:0;position:absolute;overflow:hidden;left:597px;top:72px;z-index:110;} #alternative-yellow-neighbourhood-svg-box-large{width: 38.16%;padding-top:40%;left: 12%;top:20%;z-index: 1;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #alternative-yellow-neighbourhood-svg-box-large-flip{width: 38.16%;padding-top:40%;left: 12%;top:20%;z-index: 1;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;} #alternative-yellow-neighbourhood-svg-box-small{width: 13.16%;padding-top:14%;left: 74%;top:51%;z-index: 1;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #alternative-yellow-neighbourhood-svg-box-small-flip{width: 13.16%;padding-top:14%;left: 74%;top:51%;z-index: 1;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;} #alternative-yellow-neighbourhood-svg.active #alternative-yellow-neighbourhood-svg-box-large{-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition-delay:0s;-moz-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s;} #alternative-yellow-neighbourhood-svg.active #alternative-yellow-neighbourhood-svg-box-large-flip{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #alternative-yellow-neighbourhood-svg.active #alternative-yellow-neighbourhood-svg-box-small{-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition-delay:0s;-moz-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s;} #alternative-yellow-neighbourhood-svg.active #alternative-yellow-neighbourhood-svg-box-small-flip{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} /* GREEN NEIGHBOURHOOD */ #alternative-green-neighbourhood-svg{width:209.391px;padding-top:213.715px;height:0;position:absolute;overflow:hidden;left:1469px;top:129px;z-index:110;} #alternative-green-neighbourhood-svg-brown1{width: 12.56%;padding-top:22%;left: 26%;top:0%;z-index: 1;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #alternative-green-neighbourhood-svg-brown1-flip{width: 12.56%;padding-top:22%;left: 26%;top:0%;z-index: 1;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;} #alternative-green-neighbourhood-svg-brown2{width: 19.15%;padding-top:27%;left: 34%;top:58%;z-index: 1;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #alternative-green-neighbourhood-svg-brown2-flip{width: 19.15%;padding-top:27%;left: 34%;top:58%;z-index: 1;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;} #alternative-green-neighbourhood-svg-blue1{width: 20.92%;padding-top:36%;left: 68%;top:1%;z-index: 1;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #alternative-green-neighbourhood-svg-blue1-flip{width: 20.92%;padding-top:36%;left: 68%;top:1%;z-index: 1;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;} #alternative-green-neighbourhood-svg-blue2{width: 15.8%;padding-top:32%;left: 4%;top:49%;z-index: 1;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #alternative-green-neighbourhood-svg-blue2-flip{width: 15.8%;padding-top:32%;left: 4%;top:49%;z-index: 1;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;} #alternative-green-neighbourhood-svg.active #alternative-green-neighbourhood-svg-brown1{-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition-delay:0s;-moz-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s;} #alternative-green-neighbourhood-svg.active #alternative-green-neighbourhood-svg-brown1-flip{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #alternative-green-neighbourhood-svg.active #alternative-green-neighbourhood-svg-brown2{-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition-delay:0s;-moz-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s;} #alternative-green-neighbourhood-svg.active #alternative-green-neighbourhood-svg-brown2-flip{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #alternative-green-neighbourhood-svg.active #alternative-green-neighbourhood-svg-blue1{-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition-delay:0s;-moz-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s;} #alternative-green-neighbourhood-svg.active #alternative-green-neighbourhood-svg-blue1-flip{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #alternative-green-neighbourhood-svg.active #alternative-green-neighbourhood-svg-blue2{-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition-delay:0s;-moz-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s;} #alternative-green-neighbourhood-svg.active #alternative-green-neighbourhood-svg-blue2-flip{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} /* TRASH BINS */ #alternative-trash-bins-svg{width:252.715px;padding-top:61.792px;height:0;position:absolute;left:992px;top:698px;z-index:120;} #alternative-trash-bins-svg-trash-bins{width: 100%;padding-top:24%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #alternative-trash-bins-svg .drawing path {stroke-dasharray:65;stroke-dashoffset:65;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-trash-bins-svg .drawing line {stroke-dasharray:101;stroke-dashoffset:101;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-trash-bins-svg .drawing circle {opacity:0;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-trash-bins-svg-trash-bins svg {overflow:visible;} #alternative-trash-bins-svg.active .drawing circle {opacity:1;} /* RED NEIGHBOURHOOD */ #alternative-red-neighbourhood-svg{width:191.238px;padding-top:215.214px;height:0;position:absolute;overflow:hidden;left:0px;top:581px;z-index:110;} #alternative-red-neighbourhood-svg-buildings{width: 100%;padding-top:113%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #alternative-red-neighbourhood-svg-vacant{width: 22.86%;padding-top:35%;left: 57%;top:0%;z-index: 1;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #alternative-red-neighbourhood-svg-vacant-flip{width: 22.86%;padding-top:35%;left: 57%;top:0%;z-index: 1;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;} #alternative-red-neighbourhood-svg-empty{width: 24.61%;padding-top:28%;left: 38%;top:57%;z-index: 1;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #alternative-red-neighbourhood-svg-empty-flip{width: 24.61%;padding-top:28%;left: 38%;top:57%;z-index: 1;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;} #alternative-red-neighbourhood-svg.active #alternative-red-neighbourhood-svg-vacant{-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition-delay:0s;-moz-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s;} #alternative-red-neighbourhood-svg.active #alternative-red-neighbourhood-svg-vacant-flip{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #alternative-red-neighbourhood-svg.active #alternative-red-neighbourhood-svg-empty{-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition-delay:0s;-moz-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s;} #alternative-red-neighbourhood-svg.active #alternative-red-neighbourhood-svg-empty-flip{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} /* BLUE NEIGHBOURHOOD */ #alternative-blue-neighbourhood-svg{width:146.979px;padding-top:184.704px;height:0;position:absolute;overflow:hidden;left:1393px;top:575px;z-index:110;} #alternative-blue-neighbourhood-svg-blue{width: 37.72%;padding-top:34%;left: 5%;top:6%;z-index: 1;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #alternative-blue-neighbourhood-svg-blue-flip{width: 37.72%;padding-top:34%;left: 5%;top:6%;z-index: 1;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;} #alternative-blue-neighbourhood-svg-red{width: 24.59%;padding-top:24%;left: 76%;top:16%;z-index: 1;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #alternative-blue-neighbourhood-svg-red-flip{width: 24.59%;padding-top:24%;left: 76%;top:16%;z-index: 1;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;} #alternative-blue-neighbourhood-svg-purple{width: 34.88%;padding-top:40%;left: 5%;top:42%;z-index: 1;height:0;position: absolute;-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #alternative-blue-neighbourhood-svg-purple-flip{width: 34.88%;padding-top:40%;left: 5%;top:42%;z-index: 1;height:0;position: absolute;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition:.25s linear;-moz-transition:.25s linear;-o-transition:.25s linear;transition:.25s linear;} #alternative-blue-neighbourhood-svg.active #alternative-blue-neighbourhood-svg-blue{-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition-delay:0s;-moz-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s;} #alternative-blue-neighbourhood-svg.active #alternative-blue-neighbourhood-svg-blue-flip{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #alternative-blue-neighbourhood-svg.active #alternative-blue-neighbourhood-svg-red{-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition-delay:0s;-moz-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s;} #alternative-blue-neighbourhood-svg.active #alternative-blue-neighbourhood-svg-red-flip{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} #alternative-blue-neighbourhood-svg.active #alternative-blue-neighbourhood-svg-purple{-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition-delay:0s;-moz-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s;} #alternative-blue-neighbourhood-svg.active #alternative-blue-neighbourhood-svg-purple-flip{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s;} /* BUILDING */ #alternative-building-svg{width:95.169px;padding-top:194.865px;height:0;position:absolute;overflow:hidden;left:1677px;top:311px;z-index:110;} #alternative-building-svg-building{width: 100%;padding-top:205%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} /* HOME */ #alternative-home-svg{width:247.208px;padding-top:262.917px;height:0;position:absolute;overflow:hidden;left:839px;top:286px;z-index:110;} #alternative-home-svg-home{width: 100%;padding-top:106%;left: 0%;top:0%;z-index: 1;height:0;position: absolute;} #alternative-home-svg .drawing rect{stroke-dasharray:136;stroke-dashoffset:136;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} #alternative-home-svg .drawing polyline{stroke-dasharray:126;stroke-dashoffset:126;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} /* WALKING */ #alternative-walking-svg{width:214px;height:239px;position:absolute;overflow:hidden;left:383px;top:184px;z-index:120;} /* WALLET */ #alternative-wallet-svg{width:180.285px;padding-top:185.053px;height:0;position:absolute;left:839px;top:0px;z-index:110;} #alternative-wallet-svg-wallet1{width: 53.01%;padding-top:31%;left: 24%;top:65%;z-index: 4;height:0;position: absolute;} #alternative-wallet-svg-wallet2{width: 53.01%;padding-top:31%;left: 24%;top:63%;z-index: 1;height:0;position: absolute;} #alternative-wallet-svg-background{width: 63.48%;padding-top:7%;left: 19%;top:93%;z-index: 3;height:0;position: absolute;} #alternative-wallet-svg-dolar{width: 65.13%;padding-top:56%;left: 18%;top:2%;z-index: 3;height:0;position: absolute;visibility:visible;} #alternative-wallet-svg-dolar-left{width: 41.55%;padding-top:39%;left: 9%;top:20%;z-index: 3;height:0;position: absolute;visibility:hidden;} #alternative-wallet-svg-dolar-right{width: 37.45%;padding-top:42%;left: 54%;top:10%;z-index: 3;height:0;position: absolute;visibility:hidden;} #alternative-wallet-svg-coin{width: 30.96%;padding-top:34%;left: 36%;top:67%;z-index: 2;height:0;position: absolute;transition:.5s;} #alternative-wallet-svg.active #alternative-wallet-svg-coin{top:27%;} #alternative-wallet-svg.active #alternative-wallet-svg-dolar {visibility:hidden;} #alternative-wallet-svg.active #alternative-wallet-svg-dolar-left {visibility:visible;left:-6%;transition:1s ease-out;} #alternative-wallet-svg.active #alternative-wallet-svg-dolar-right {visibility:visible;left:69%;transition:1s ease-out;}