*{ margin:0; padding:0; } body{ background-color:#2eb5b8; /*background:url(tim.png);*/ background-size:100%,100%; margin-top:30%; } #content{ display: block; position: relative; padding-bottom: 6%; top: 50%; } .cog{ display:block; position:absolute; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; -webkit-transform-origin: center center; transform-origin: center center; } .cog .in{ display:block; position:relative; width:100%; padding-bottom: 100%; } .cog .rectangle{ display: block; position: absolute; width: 100%; padding-bottom: 20%; top: 40%; background-color: #dbdbdb; } .vertical{ -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } .round{ -webkit-border-radius: 99em; -moz-border-radius: 99em; border-radius: 99em; } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; -webkit-transform: rotate(360deg); transform: rotate(360deg); } @-webkit-keyframes rotateIn { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes rotateIn { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /*TREADMILL*/ #treadmill1{ top: 200%; left: 14%; } #treadmill2{ top: 0%; left: 32%; } #treadmill3{ top: -190%; left: 48%; } .treadmill{ display:block; width:15%; padding-bottom: 2.5%; position:absolute; height: 0; background-color:#2853d6; } .treadmill .cog{ width:12%; padding:2.5%; left:60%; background-color:#dbdbdb; z-index:16; -webkit-animation-duration: .7s; animation-duration: .7s; } .treadmill .cog .rectangle{ background-color: #dbdbdb; } .treadmill .cog .in{ background-color:#2853d6; } .treadmill .footer { display: block; position: absolute; width: 12%; padding-bottom: 12%; top: 50%; z-index: 12; left: 1%; } .treadmill .footer .rectangle{ display: block; position: absolute; width: 25%; padding-bottom: 100%; background-color: #dbdbdb; left: 45%; } .treadmill .footer .vertical{ top: 45%; } .treadmill > .footer + .footer{ margin-left:84%; } .treadmill .wheel{ display: block; position: absolute; width: 13%; padding-bottom: 12%; top: 15%; background-color: #1944C5; z-index: 11; left: 2%; } .treadmill > .wheel + .wheel{ margin-left:83%; } /*MOUSE MOTOR*/ #mouseMotor1{ top: 200%; left: 5%; } #mouseMotor1 .mouse, #mouseMotor1 .in .cog, #mouseMotor1 .mouse .footMouse, #treadmill1 .cog { animation-delay:2s; -webkit-animation-delay:2s; } #mouseMotor2{ top: 102%; left: 29%; } #mouseMotor2 .mouse, #mouseMotor2 .in .cog, #mouseMotor2 .mouse .footMouse, #treadmill2 .cog{ animation-delay:3s; -webkit-animation-delay:3s; } #mouseMotor3{ top: -96%; right: 44%; } #mouseMotor3 .mouse, #mouseMotor3 .in .cog, #mouseMotor3 .mouse .footMouse, #treadmill3 .cog{ animation-delay:4s; -webkit-animation-delay:4s; } .mouseMotor{ display: block; position: absolute; width: 8%; padding: 0.5%; background-color: #4AC282; } .mouseMotor > .in{ display: block; position: relative; width: 100%; padding-bottom: 60%; } .mouseMotor > .in > .cog{ -webkit-animation-duration: 1s; animation-duration: 1s; } .mouseMotor > .in > .cog:nth-child(1){ width: 47%; padding: 9%; left: 0%; top: -4%; background-color: #37B074; } .mouseMotor > .in > .cog:nth-child(1) > .in{ width: 100%; padding-bottom: 100%; background-color: #2eb5b8; } .mouseMotor > .in > .cog:nth-child(1) > .in > .rectangle{ background-color: #1944C5; } .mouseMotor > .in > .cog:nth-child(2){ width: 14%; padding: 5%; right: 5%; top: 7%; background-color: #dbdbdb; z-index: 16; } .mouseMotor > .in >.cog:nth-child(2) .in{ background-color: #CACACA; } .mouseMotor > .in > .piston{ display: none; position: absolute; width: 37%; padding-bottom: 17%; background-color: #1FA0A3; bottom: 0%; right: 0%; z-index: 10; } .mouseMotor > .in > .piston > .cog{ width: 0%; padding: 35%; left: 15%; top: -60%; background-color: #1FA0A3; } .mouse { display: block; position: absolute; width: 30%; padding-bottom: 15%; bottom: 13%; left: 21%; -webkit-animation-name: mouseAnim; animation-name: mouseAnim; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-duration: .5s; animation-duration: .5s; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; } @-webkit-keyframes mouseAnim { 0% {left: 21%;} 50% {left: 16%;} 100% {left: 21%;} } @keyframes mouseAnim { 0% {left: 21%;} 50% {left: 16%;} 100% {left: 21%;} } .mouse .bodyMouse{ display: block; position: absolute; width: 80%; padding-bottom: 40%; background-color: #EDEDED; bottom: 0%; left: 0%; } .mouse .footMouse{ display: block; position: absolute; width: 26%; padding-bottom: 26%; background-color: #EDEDED; bottom: -15%; left: 13%; transform: rotate(45deg); -webkit-transform: rotate(45deg); -webkit-animation-name: mouseWalk; animation-name: mouseWalk; -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; } @-webkit-keyframes mouseWalk { 0% {left: 13%;} 50% {left: 18%;} 100% {left: 13%;} } @keyframes mouseWalk { 0% {left: 13%;} 50% {left: 18%;} 100% {left: 13%;} } .mouse .footMouse + .footMouse{ left: 32%; -webkit-animation-name: mouseWalk2 !important; animation-name: mouseWalk2 !important; } @-webkit-keyframes mouseWalk2 { 0% {left: 36%;} 50% {left: 28%;} 100% {left: 36%;} } @keyframes mouseWalk2 { 0% {left: 36%;} 50% {left: 28%;} 100% {left: 36%;} } .mouse .headMouse{ display: block; position: absolute; width: 56%; padding-bottom: 49%; background-color: #EDEDED; bottom: 0%; left: 34%; } .mouse .headMouse > .eye{ display: block; position: absolute; width: 14%; padding-bottom: 14%; background-color: #1D1D1D; bottom: 53%; left: 61%; z-index: 15; } .mouse .headMouse > .snout{ display: block; position: absolute; width: 53%; padding-bottom: 39%; background-color: #EDEDED; bottom: 0%; left: 61%; } .mouse .ear{ display: block; position: absolute; width: 14%; padding: 6%; background-color: #EDEDED; bottom: 43%; left: 42%; z-index: 15; } .mouse .ear > .in{ display: block; position: relative; width: 100%; padding-bottom: 150%; background-color: #DB8676; } /*BOWLING BALL*/ #bowling1{ left: 7%; top: 114%; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation-name: bowling1Anim; animation-name: bowling1Anim; -webkit-animation-duration: 2.4s; animation-duration: 2.4s; -webkit-animation-timing-function: linear; animation-timing-function: linear; opacity:1; } @-webkit-keyframes bowling1Anim { 0%, 70% {top: -550%;transform: rotate(0deg);opacity:0;} 74% {opacity:1;} 84% {top: 114%;} 88% {top: 90%;} 92% {top: 114%;transform: rotate(90deg);} 95% {top: 100%;} 100% {top: 114%;} } @keyframes bowling1Anim { 0%, 70% {top: -550%;transform: rotate(0deg);opacity:0;} 74% {opacity:1;} 84% {top: 114%;} 88% {top: 90%;} 92% {top: 114%;transform: rotate(90deg);} 95% {top: 100%;} 100% {top: 114%;} } #bowling2{ left: 16%; top: 115%; -webkit-animation-name: bowling2Move; animation-name: bowling2Move; -webkit-animation-delay: 2.4s; animation-delay: 2.4s; -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes bowling2Move { 0% {left: 16%;} 100% {left: 23.7%;} } @keyframes bowling2Move { 0% {left: 16%;} 100% {left: 23.7%;} } #bowling3{ left: 34%; top: -85%; -webkit-animation-name: bowling3Move; animation-name: bowling3Move; -webkit-animation-delay: 3.4s; animation-delay: 3.4s; -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes bowling3Move { 0% {left: 34%;} 100% {left: 41.8%;} } @keyframes bowling3Move { 0% {left: 34%;} 100% {left: 41.8%;} } .ball { display: block; position: absolute; width: 5.2%; padding-bottom: 5.2%; } .bowling{ background-color: #1944C5; position: absolute; display: block; -webkit-transform: rotate(0deg); transform: rotate(0deg); } .ballRotate { display: block; position: absolute; width: 100%; padding-bottom: 100%; -webkit-animation-name: bowlingRotate; animation-name: bowlingRotate; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; } @-webkit-keyframes bowlingRotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } @keyframes bowlingRotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } #bowling2 .ballRotate { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; } #bowling3 .ballRotate { -webkit-animation-delay: 3.4s; animation-delay: 3.4s; } .bowling .finger{ display: block; position: absolute; width: 10%; padding-bottom: 10%; background-color: #1D1D1D; } .bowling .finger:nth-child(1){ top: 22%; left:47%; } .bowling .finger:nth-child(2){ top: 24%; left:65%; } .bowling .finger:nth-child(3){ top: 38%; left:54%; } /*BASKET BALL*/ #basketBall1{ left: 50%; top: -285%; -webkit-animation-name:basketBallAnim; animation-name:basketBallAnim; -webkit-animation-delay: 4s; animation-delay: 4s; -webkit-animation-duration: 6s; animation-duration: 6s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } @-webkit-keyframes basketBallAnim { 0% {left: 50%;top: -285%;-webkit-transform: rotate(-45deg);} 6% {left: 60%;top: -285%;width: 5.8%;padding-bottom: 5.8%;} 10% {left: 75%;top: -198%;width: 5.5%;}/*panel*/ 14%{left: 71%;top: -220%;width: 5.8%;-webkit-transform: rotate(180deg);} 16%{left: 66%;top: -210%;width: 5.5%;}/*panel*/ 20%{left: 70%;top: -200%;width: 5.8%;} 23%{left: 72%;top: -128%;width: 5.5%;-webkit-transform: rotate(45deg);}/*panel*/ 25%{left: 70%;top: -96%;width: 5.5%;} 29%{left: 74%;top: 55%;width: 5.8%;padding-bottom: 5.8%;} 32%{left: 80%;top: 275%;padding-bottom: 5.2%;-webkit-transform: rotate(360deg);} /*sol*/ 34%{left: 75%;top: 185%;padding-bottom: 6%;} 36%{left: 72%;top: 275%;padding-bottom: 5.2%;} /*sol*/ 38%{left: 70%;top: 224%;padding-bottom: 6%;} 40%{left: 68%;top: 280%;padding-bottom: 5.2%;} /*sol*/ 42%{left: 67%;top: 248%;padding-bottom: 5.8%;} 43%{left: 66%;top: 272%;padding-bottom: 5.4%;} /*sol*/ 44%{left: 65.5%;top: 256%;padding-bottom: 5.8%;-webkit-transform: rotate(0deg);} 45%{left: 65%;top: 272%;padding-bottom: 5.6%;} /*sol*/ 46%{left: 64.5%;top: 268%;padding-bottom: 5.8%;} 47%{left: 64%;top: 272%;padding-bottom: 5.6%;} /*sol*/ 90%, 100%{left: 59%;top: 270%;padding-bottom: 5.8%;-webkit-transform: rotate(-150deg);} } @keyframes basketBallAnim { 0% {left: 50%;top: -285%;transform: rotate(-45deg);} 6% {left: 60%;top: -285%;width: 5.8%;padding-bottom: 5.8%;} 10% {left: 75%;top: -198%;width: 5.5%;}/*panel*/ 14%{left: 71%;top: -220%;width: 5.8%;transform: rotate(180deg);} 16%{left: 66%;top: -210%;width: 5.5%;}/*panel*/ 20%{left: 70%;top: -200%;width: 5.8%;} 23%{left: 72%;top: -128%;width: 5.5%;transform: rotate(45deg);}/*panel*/ 25%{left: 70%;top: -96%;width: 5.5%;} 29%{left: 74%;top: 55%;width: 5.8%;padding-bottom: 5.8%;} 32%{left: 80%;top: 275%;padding-bottom: 5.2%;transform: rotate(360deg);} /*sol*/ 34%{left: 75%;top: 185%;padding-bottom: 6%;} 36%{left: 72%;top: 275%;padding-bottom: 5.2%;} /*sol*/ 38%{left: 70%;top: 224%;padding-bottom: 6%;} 40%{left: 68%;top: 280%;padding-bottom: 5.2%;} /*sol*/ 42%{left: 67%;top: 248%;padding-bottom: 5.8%;} 43%{left: 66%;top: 272%;padding-bottom: 5.4%;} /*sol*/ 44%{left: 65.5%;top: 256%;padding-bottom: 5.8%;transform: rotate(0deg);} 45%{left: 65%;top: 272%;padding-bottom: 5.6%;} /*sol*/ 46%{left: 64.5%;top: 268%;padding-bottom: 5.8%;} 47%{left: 64%;top: 272%;padding-bottom: 5.6%;} /*sol*/ 90%, 100%{left: 59%;top: 270%;padding-bottom: 5.8%;transform: rotate(-150deg);} } .basketBall{ overflow:hidden; background-color:#C26125; display: block; position: absolute; width: 5.8%; padding-bottom: 5.8%; } .basketBall > .in{ display: block; position: absolute; background-color: #AB4D24; width: 100%; padding: 5%; } .basketBall > .in:nth-child(1){ left: 0%; top: -78%; } .basketBall .in:nth-child(2){ left: 0%; top: 72%; } .basketBall .in > .in{ display: block; position: relative; width: 100%; padding-bottom: 100%; background-color: #C26125; } .basketBall .rectangle{ display: block; position: absolute; width: 125%; padding-bottom: 5%; background-color: #AB4D24; top: 50%; left: -11%; } .basketBall .rectangle + .rectangle{ transform: rotate(90deg); -webkit-transform: rotate(90deg); top: 53%; } /*NODE*/ #node1{ transform: rotate(-4deg); -webkit-transform: rotate(-4deg); left: 12%; top: 214%; width: 12%; } #node2{ transform: rotate(-49deg); -webkit-transform: rotate(-49deg); left: 36.12%; top: 116%; width: 9%; } #node3{ transform: rotate(-57deg); -webkit-transform: rotate(-57deg); left: 54%; top: -81%; width: 8%; } .node{ display: block; position:absolute; -webkit-transform-origin: left center; transform-origin: left center; padding-bottom: 2%; z-index:15; } .node > .in { display: block; position:absolute; width:100%; background-color:#1d1d1d; } #node1 > .in {padding-bottom:2%;} #node2 > .in {padding-bottom:3%;} #node3 > .in {padding-bottom:3%;} .node > .in + .in { bottom: -8%; transform: rotate(3deg); -webkit-transform: rotate(3deg); } /*WALL*/ .wall{ display: block; position: absolute; width: 85%; padding-bottom: 2.5%; background-color: #dbdbdb; bottom: -308%; right: 5%; } .wall .lign{ display: block; position: absolute; width: 104%; } .wall .lign:nth-child(1){ left: -0.8%; top: -13%; } .wall .lign:nth-child(2){ left: -.5%; bottom: -10%; } .wall .lign .brick{ display: block; float: left; position: relative; margin: 0 0.2%; width: 3.5%; padding-top: 1.5%; background-color: #BE3F3F; border-radius: .2em; -webkit-border-radius: .2em; -moz-border-radius: .2em; } .wall .lign:nth-child(1) .brick:nth-child(1){ width: 2%; } .wall .lign:nth-child(1) .brick:nth-child(25){ width: 5%; } .wall .lign:nth-child(2) .brick:nth-child(1){ width: 4%; } .wall .lign:nth-child(2) .brick:nth-child(2){ width: 2.5%; } /*BASKET*/ .wood{ background-color: #C26125; } .ramp{ display:block; position:absolute; width:10%; padding-top:10%; top:20%; right:20%; transform: rotate(45deg); -webkit-transform: rotate(45deg); } #contentRamp1{ display: block; position: absolute; width: 7%; padding-bottom: 12%; left: 63%; top: -187%; overflow: hidden; } #contentRamp1 .ramp{ display: block; position: absolute; width: 200%; padding-bottom: 24%; top: 32%; left: -40%; transform: rotate(40deg); -webkit-transform: rotate(40deg); } #contentRamp1 .ramp > .in{ display: block; position: absolute; background-color: #AB4D24; width: 200%; padding-bottom: 9%; top: 24%; left: -40%; } #contentRamp2{ display: block; position: absolute; width: 3%; padding-bottom: 12%; left: 77.5%; top: -187%; overflow: hidden; } #contentRamp2 .ramp{ display: block; position: absolute; width: 200%; padding-bottom: 70%; top: 40%; left: -48%; transform: rotate(-40deg); -webkit-transform: rotate(-40deg); } #contentRamp2 .ramp > .in{ display: block; position: absolute; background-color: #AB4D24; width: 200%; padding-bottom: 21%; top: 24%; left: -40%; } .panel{ display: block; position: absolute; width: 3%; padding-bottom: 16%; top: -267%; right: 17%; overflow: hidden; z-index: 10; } .panel > .in{ display: block; position: absolute; background-color: #AB4D24; width: 60%; padding-bottom: 540%; top: 0%; left: 20%; } .pylon{ display: block; position: absolute; background-color: #CACACA; width: 2.6%; padding-bottom: 22%; top: -31%; right: 11%; } .pylon .in{ display: block; position: absolute; background-color: #B6B6B6; width: 50%; padding-bottom: 900%; top: 0%; left: 0%; } .pylon .end{ display: block; position: absolute; background-color: #CACACA; width: 120%; padding-bottom: 70%; top: 0%; right: -8%; z-index: 9; } .pylon .end + .end{ top: 100%; } .pylon .end .in{ display: block; position: absolute; background-color: #BEBEBE; width: 68%; padding-bottom: 58%; top: 0%; left: 0%; } .contentPylonRound{ display: block; position: absolute; width: 10%; padding-bottom: 10%; top: -135%; right: 11%; z-index: 9; } .pylonRound{ display: block; position: absolute; background-color: #CACACA; width: 66%; padding-bottom: 66%; top: 0%; right: 0%; -webkit-border-top-right-radius: 2.7em; -moz-border-top-right-radius: 2.7em; border-top-right-radius: 2.7em; } .pylonRound > .in{ display: block; position: absolute; background-color: #B6B6B6; width: 70%; padding-bottom: 80%; top: 20%; right: 20%; -webkit-border-top-right-radius: 2em; -moz-border-top-right-radius: 2em; border-top-right-radius: 2em; } .pylonRound > .in + .in{ display: block; position: absolute; background-color: #2eb5b8; width: 62%; padding-bottom: 64%; top: 39%; right: 39%; -webkit-border-top-right-radius: 1.4em; -moz-border-top-right-radius: 1.4em; border-top-right-radius: 1.4em; } .pylonRound .end{ display: block; position: absolute; background-color: #CACACA; width: 48%; padding-bottom: 23%; top: 79%; right: -4%; z-index: 9; } .pylonRound .end > .in{ display: block; position: absolute; background-color: #BEBEBE; width: 68%; padding-bottom: 59%; top: 0%; left: 0%; } .pylonRound .end + .end{ width: 30%; padding-bottom: 50%; top: -6%; left: 0%; } .pylonRound .end + .end > .in{ display: block; position: absolute; background-color: #BEBEBE; width: 100%; padding-bottom: 106%; top: 37%; left: 0%; } .contentPylonRound .separate{ display: block; position: absolute; background-color: #B3B3B3; width: 31%; padding-bottom: 2%; top: 66%; right: -2%; z-index: 12; }