<html>
<head>
</head>
<body>
<div id="content">
<div class="round ball bowling" id="bowling1">
<div class="round finger"></div>
<div class="round finger"></div>
<div class="round finger"></div>
</div>
<div class="round ball bowling" id="bowling2">
<div class="ballRotate">
<div class="round finger"></div>
<div class="round finger"></div>
<div class="round finger"></div>
</div>
</div>
<div class="round ball bowling" id="bowling3">
<div class="ballRotate">
<div class="round finger"></div>
<div class="round finger"></div>
<div class="round finger"></div>
</div>
</div>
<div class="round basketBall" id="basketBall1">
<div class="in round">
<div class="in round"></div>
</div>
<div class="in round">
<div class="in round"></div>
</div>
<div class="rectangle"></div>
<div class="rectangle"></div>
</div>
<div class="treadmill round" id="treadmill1">
<div class="cog round rotateIn">
<div class="in round">
<div class="rectangle vertical"></div>
<div class="rectangle"></div>
</div>
</div>
<div class="wheel round"></div>
<div class="wheel round"></div>
<div class="footer">
<div class="rectangle"></div>
<div class="rectangle vertical"></div>
</div>
<div class="footer">
<div class="rectangle"></div>
<div class="rectangle vertical"></div>
</div>
</div>
<div class="treadmill round" id="treadmill2">
<div class="cog round rotateIn">
<div class="in round">
<div class="rectangle vertical"></div>
<div class="rectangle"></div>
</div>
</div>
<div class="wheel round"></div>
<div class="wheel round"></div>
<div class="footer">
<div class="rectangle"></div>
<div class="rectangle vertical"></div>
</div>
<div class="footer">
<div class="rectangle"></div>
<div class="rectangle vertical"></div>
</div>
</div>
<div class="treadmill round" id="treadmill3">
<div class="cog round rotateIn">
<div class="in round">
<div class="rectangle vertical"></div>
<div class="rectangle"></div>
</div>
</div>
<div class="wheel round"></div>
<div class="wheel round"></div>
<div class="footer">
<div class="rectangle"></div>
<div class="rectangle vertical"></div>
</div>
<div class="footer">
<div class="rectangle"></div>
<div class="rectangle vertical"></div>
</div>
</div>
<div class="mouseMotor" id="mouseMotor1">
<div class="in">
<div class="cog round rotateIn">
<div class="in round">
<div class="rectangle vertical"></div>
<div class="rectangle"></div>
</div>
</div>
<div class="cog round">
<div class="in round"></div>
</div>
<div class="piston">
<div class="cog round"></div>
</div>
<div class="mouse">
<div class="headMouse round">
<div class="eye round"></div>
<div class="snout round"></div>
</div>
<div class="ear round">
<div class="in round"></div>
</div>
<div class="bodyMouse round"></div>
<div class="footMouse"></div>
<div class="footMouse"></div>
</div>
</div>
</div>
<div class="mouseMotor" id="mouseMotor2">
<div class="in">
<div class="cog round rotateIn">
<div class="in round">
<div class="rectangle vertical"></div>
<div class="rectangle"></div>
</div>
</div>
<div class="cog round">
<div class="in round"></div>
</div>
<div class="piston">
<div class="cog round"></div>
</div>
<div class="mouse">
<div class="headMouse round">
<div class="eye round"></div>
<div class="snout round"></div>
</div>
<div class="ear round">
<div class="in round"></div>
</div>
<div class="bodyMouse round"></div>
<div class="footMouse"></div>
<div class="footMouse"></div>
</div>
</div>
</div>
<div class="mouseMotor" id="mouseMotor3">
<div class="in">
<div class="cog round rotateIn">
<div class="in round">
<div class="rectangle vertical"></div>
<div class="rectangle"></div>
</div>
</div>
<div class="cog round">
<div class="in round"></div>
</div>
<div class="piston">
<div class="cog round"></div>
</div>
<div class="mouse">
<div class="headMouse round">
<div class="eye round"></div>
<div class="snout round"></div>
</div>
<div class="ear round">
<div class="in round"></div>
</div>
<div class="bodyMouse round"></div>
<div class="footMouse"></div>
<div class="footMouse"></div>
</div>
</div>
</div>
<div class="node" id="node1">
<div class="in"></div>
<div class="in"></div>
</div>
<div class="node" id="node2">
<div class="in"></div>
<div class="in"></div>
</div>
<div class="node" id="node3">
<div class="in"></div>
<div class="in"></div>
</div>
<div class="wall">
<div class="lign">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
<div class="lign">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
</div>
<div class="basket">
<div id="contentRamp1">
<div class="ramp wood">
<div class="in"></div>
</div>
</div>
<div id="contentRamp2">
<div class="ramp wood">
<div class="in"></div>
</div>
</div>
<div class="panel wood">
<div class="in"></div>
</div>
<div class="pylon">
<div class="end"><div class="in"></div></div>
<div class="end"><div class="in"></div></div>
<div class="in"></div>
</div>
<div class="contentPylonRound">
<div class="pylonRound">
<div class="in"></div>
<div class="in"></div>
<div class="end"><div class="in"></div></div>
<div class="end"><div class="in"></div></div>
</div>
<div class="separate"></div>
</div>
</div>
</div>
</body>
</html>
xxxxxxxxxx
*{
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;
animation-fill-mode: both;
animation-fill-mode: both;
animation-timing-function: linear;
animation-timing-function: linear;
animation-iteration-count:infinite;
animation-iteration-count:infinite;
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{
transform: rotate(90deg);
transform: rotate(90deg);
transform: rotate(90deg);
}
.round{
border-radius: 99em;
border-radius: 99em;
border-radius: 99em;
}
.rotateIn {
animation-name: rotateIn;
animation-name: rotateIn;
transform: rotate(360deg);
transform: rotate(360deg);
}
@-webkit-keyframes rotateIn {
0% {
transform: rotate(0deg);
}
100% {
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;
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;
animation-delay:2s;
}
#mouseMotor2{
top: 102%;
left: 29%;
}
#mouseMotor2 .mouse, #mouseMotor2 .in .cog, #mouseMotor2 .mouse .footMouse, #treadmill2 .cog{
animation-delay:3s;
animation-delay:3s;
}
#mouseMotor3{
top: -96%;
right: 44%;
}
#mouseMotor3 .mouse, #mouseMotor3 .in .cog, #mouseMotor3 .mouse .footMouse, #treadmill3 .cog{
animation-delay:4s;
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{
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%;
animation-name: mouseAnim;
animation-name: mouseAnim;
animation-fill-mode: both;
animation-fill-mode: both;
animation-timing-function: linear;
animation-timing-function: linear;
animation-duration: .5s;
animation-duration: .5s;
animation-iteration-count:infinite;
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);
transform: rotate(45deg);
animation-name: mouseWalk;
animation-name: mouseWalk;
animation-duration: .5s;
animation-duration: .5s;
animation-fill-mode: both;
animation-fill-mode: both;
animation-timing-function: linear;
animation-timing-function: linear;
animation-iteration-count:infinite;
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%;
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%;
transform: rotate(90deg);
transform: rotate(90deg);
animation-name: bowling1Anim;
animation-name: bowling1Anim;
animation-duration: 2.4s;
animation-duration: 2.4s;
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%;
animation-name: bowling2Move;
animation-name: bowling2Move;
animation-delay: 2.4s;
animation-delay: 2.4s;
animation-duration: .6s;
animation-duration: .6s;
animation-timing-function: ease-in;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
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%;
animation-name: bowling3Move;
animation-name: bowling3Move;
animation-delay: 3.4s;
animation-delay: 3.4s;
animation-duration: .6s;
animation-duration: .6s;
animation-timing-function: ease-in;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
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;
transform: rotate(0deg);
transform: rotate(0deg);
}
.ballRotate {
display: block;
position: absolute;
width: 100%;
padding-bottom: 100%;
animation-name: bowlingRotate;
animation-name: bowlingRotate;
animation-duration: 1s;
animation-duration: 1s;
animation-timing-function: linear;
animation-timing-function: linear;
animation-iteration-count:infinite;
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 {
animation-delay: 2.4s;
animation-delay: 2.4s;
}
#bowling3 .ballRotate {
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%;
animation-name:basketBallAnim;
animation-name:basketBallAnim;
animation-delay: 4s;
animation-delay: 4s;
animation-duration: 6s;
animation-duration: 6s;
animation-timing-function: ease-out;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-fill-mode: forwards;
transform: rotate(-45deg);
transform: rotate(-45deg);
}
@-webkit-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);}
}
@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);
transform: rotate(90deg);
top: 53%;
}
/*NODE*/
#node1{
transform: rotate(-4deg);
transform: rotate(-4deg);
left: 12%;
top: 214%;
width: 12%;
}
#node2{
transform: rotate(-49deg);
transform: rotate(-49deg);
left: 36.12%;
top: 116%;
width: 9%;
}
#node3{
transform: rotate(-57deg);
transform: rotate(-57deg);
left: 54%;
top: -81%;
width: 8%;
}
.node{
display: block;
position:absolute;
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);
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;
border-radius: .2em;
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);
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);
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);
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%;
border-top-right-radius: 2.7em;
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%;
border-top-right-radius: 2em;
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%;
border-top-right-radius: 1.4em;
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;
}