html {min-height: 100%;}
body {font-family: 'Roboto', sans-serif; font-size: 15px; min-height: 100%; margin: 0; }
.bg > div {position: absolute; top: 50%; left: 50%; width: 100vmax; height: 100vmax; margin-top: -50vmax; margin-left: -50vmax; animation: spinner 100s infinite linear; background: url("../images/shine.svg") center no-repeat; background-size: cover; }
.bg > div:after {position: absolute;content: '';width: 100%;height: 100%;top: 0; left: 0; background: radial-gradient(circle, rgba(164, 38, 29, 0), #a4261d 71%);}

.disclaimer {position: absolute; bottom: 0; left: 0; font-size: 12px; color: rgba(255,255,255,0.6); padding: 4px 10px; }
.game {position: relative; background: #a4261d; overflow: hidden}
.gameOuter {display: flex; height: 100vh; padding: 10px; box-sizing: border-box; width: 100%; max-width: 60.6vh; margin: 0 auto; justify-content: center; align-items: center}
.gameOuter > div {position: relative; width: 100%; }
.gameOuter > div > div {position: relative; background-size: contain ; width: 100%; height: 0; padding-bottom: 165%; }			
.gameOuter > div > div > div {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}	
.gameOuter > div > div .instructions {position: absolute; bottom: 0; top: auto; left: 0; width: 100%; height: 9%; color: #fff; text-align:center;}	
.gameOuter > div > div > div > .top{position:relative; width:100%; height: 16.5%; z-index: 1}	
.gameOuter > div > div > div > .top > i {display:block; height: 100%; background: url("../images/game/walls_logo.png") center no-repeat; background-size: contain; }	
.gameOuter > div > div > div > .mid{position: absolute; top: 8.25%; width:100%; height: 81.8%}	

.gameOuter > div > div > div > .mid > .midOuter{position: absolute; width:100%; height: 100%; background: linear-gradient(90deg, rgba(182,153,80,1) 0%, rgba(255,255,255,1) 50%, rgba(182,153,80,1) 100%); box-sizing: border-box; padding: 8px}	
.gameOuter > div > div > div > .mid > .midOuter > .midInner {position:relative; width:100%; height: 100%; border: 2px solid #fff; box-sizing: border-box; background: #a4261d; overflow: hidden;  }	
.gameOuter > div > div > div > .mid > .midOuter > .midInner > .sky{position:absolute; width:100%; height: 15%; background: rgb(148,191,238); background: linear-gradient(164deg, rgba(148,191,238,1) 0%, rgba(255,255,255,1) 100%); top: 0; }
.gameOuter > div > div > div > .mid > .midOuter > .midInner > .sky i {position:absolute; width:100%; height: 0; padding-bottom: 100%; top: -25%; background: url("../images/shine.svg") center no-repeat; background-size: contain; animation: spinner 50s infinite linear; }
.gameOuter > div > div > div > .mid > .midOuter > .midInner > .crowd {position: absolute; left: 0; top: 16%; width:100%; height: 20%; background: rgb(40,68,93); background: linear-gradient(180deg, rgba(40,68,93,1) 0%, rgba(66,102,134,1) 20%);}

.gameOuter > div > div > div > .mid > .midOuter > .midInner > .crowd .crowd1 {position: absolute; left: 0%; width: 102%; top: 0; height: 100%; background: url("../images/game/crowd1.svg") center no-repeat; background-size: 100% auto; animation: crowd 8s infinite; }
.gameOuter > div > div > div > .mid > .midOuter > .midInner > .crowd .crowd2 {position: absolute; left: 0%; width: 102%; top: 0; height: 100%; background: url("../images/game/crowd2.svg") center no-repeat; background-size: 100% auto; animation: crowd 10s infinite; }
.gameOuter > div > div > div > .mid > .midOuter > .midInner > .crowd .crowd3 {position: absolute; left: 0%; width: 102%; top: 0; height: 100%; background: url("../images/game/crowd3.svg") center no-repeat; background-size: 100% auto; animation: crowd 12s infinite; }

.gameOuter > div > div > div > .mid > .midOuter > .midInner > .artwork {position:absolute; width:100%; height: 100%; background: url("../images/game/game artwork_6.svg") center no-repeat; background-size: contain}	

.gameOuter > div > div > div > .mid > .midOuter > .midInner > .midInnerBanner{position:absolute; width:100%; height: 8%; top:33.9%; overflow: hidden;}

.gameOuter > div > div > div > .mid > .midOuter > .midInner > .midInnerBanner > .images {background: url('../images/game/gamebanner.png') repeat-x left; background-size: 66.6% auto; position: absolute; left: 0; top: 0; height: 100%; width: 300%; animation: slide 40s linear infinite; transform: translate3d(0, 0, 0);}

.gameOuter > div > div > div > .bot{position: absolute; bottom: 0; width:100%; height: 10%}		
.gameOuter > div > div > div > .mid > .midOuter > .midInner .goal {position: absolute; left: 0; width: 100%; top: 26.5%; height: 19%; background: url("../images/game/goal.svg") center no-repeat; background-size: contain;}
.gameOuter > div > div > div > .mid > .midOuter > .midInner .ball {position: absolute; left: 44%; top: 80%; width: 12%; height: 0; cursor: pointer; }
.gameOuter > div > div > div > .mid > .midOuter > .midInner .ball .ball1 {content: ""; position: absolute;  left: 0; width: 100%; height: 0; padding-bottom: 100%; transform: translate(0, -50%); background: url("../images/game/ball.svg") center no-repeat; background-size: contain;}
.gameOuter > div > div > div > .mid > .midOuter > .midInner .ball .shadow {content: ""; position: absolute; left: -5%; width: 110%; height: 0; padding-bottom: 40%; transform: translate(0, 50%); background: #27461b; border-radius: 50%; }
.gameOuter > div > div > div > .mid > .midOuter > .midInner .arrow {position: absolute; left: 0; top: 70%; width: 100%; height: 20%; background: url("../images/game/arrows.svg") center no-repeat; background-size: contain;}
.gameOuter > div > div > div > .mid > .midOuter > .midInner .arrow.pulse {animation: pulse 2s infinite;}

.gameOuter > div > div > div > .mid > .midOuter > .midInner .players {position: absolute; top: 35%; left: 0; width: 100%; height: 32%; }
.gameOuter > div > div > div > .mid > .midOuter > .midInner .players > div {position: absolute; top: 0; height: 100%; width: 25%; background-position: center; background-repeat: no-repeat; background-size: contain;}
.gameOuter > div > div > div > .mid > .midOuter > .midInner .players > div svg {height: 100%}
.gameOuter > div > div > div > .mid > .midOuter > .midInner .players > div.p1 {left: 10%; }					
.gameOuter > div > div > div > .mid > .midOuter > .midInner .players > div.p2 {left: 29%; }
.gameOuter > div > div > div > .mid > .midOuter > .midInner .players > div.p3 {left: 48%; }
.gameOuter > div > div > div > .mid > .midOuter > .midInner .players > div.p4 {left: 67%; }

.gameOuter > div > div > div > .mid > .midOuter > .midInner .win {display: none; position: absolute; top: 10%; left: 0; height: 45%; width: 100%;}
.gameOuter > div > div > div > .mid > .midOuter > .midInner .win .win1 {position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: url("../images/game/win1.svg") center no-repeat; background-size: contain; }
.gameOuter > div > div > div > .mid > .midOuter > .midInner .win .win2 {position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: url("../images/game/win2.svg") center no-repeat; background-size: contain; }
.gameOuter > div > div > div > .mid > .midOuter > .midInner .win .win3 {position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: url("../images/game/win3.svg") center no-repeat; background-size: contain; }

.gameOuter > div > div > div > .mid > .midOuter > .midInner .lose {display: none; position: absolute; top: 10%; left: 0; height: 45%; width: 100%;}
.gameOuter > div > div > div > .mid > .midOuter > .midInner .lose .lose1 {position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: url("../images/game/lose1.svg") center no-repeat; background-size: contain; }
.gameOuter > div > div > div > .mid > .midOuter > .midInner .lose .lose2 {position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: url("../images/game/lose2.svg") center no-repeat; background-size: contain; }


.blink {display:none;}

@keyframes slide {
	0%    { left: 0; }
	100%  { transform: translateX(-66.6%);  }
}			
@keyframes spinner {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@keyframes crowd {
	0% {left: 0;}
	50% {left: -2%;}
	100% {left: 0%;}
}
@keyframes pulse {
	0% {opacity: 1;}
	50% {opacity: 0.3;}
	100% {opacity: 1;}
}

.grass {opacity:0.7;fill:#42662A;}
.p1_skin{fill:#E8AE6E;}
.p2_skin{fill:#974D23;}			
.p3_skin{fill:#EAAA7E;}			
.p4_skin{fill:#D39762;}

#p1Body {animation: p1Body 2s ease infinite; transform-origin: 50% 60%;}
#p1ArmLeft {animation: p1ArmLeft 2s ease infinite; transform-origin: 50% 40%;}
#p1ArmRight {animation: p1ArmRight 2s ease infinite; transform-origin: 50% 40%;}
#p1Head {animation: p1Head 2s ease infinite; transform-origin: 50% 40%;} 
@keyframes p1Body {
	0%    { transform: translateY(0%);  }
	20%    { transform: translateY(2%);  }
	40%    { transform: translateY(0%);  }
}
@keyframes p1ArmLeft {
	0%    { transform: rotate(0deg); }
	20%  { transform: rotate(-5deg);  }
	40%    { transform: rotate(0deg); }
}
@keyframes p1ArmRight {
	0%    { transform: rotate(0deg); }
	20%  { transform: rotate(5deg);  }
	40%    { transform: rotate(0deg); }
}
@keyframes p1Head {
	0%    { transform: translateY(0%);  }
	20%    { transform: translateY(-0.5%);  }
	40%    { transform: translateY(0%);  }
}

#p2Body {animation: p2Body 1.3s ease infinite; transform-origin: 50% 60%;  }
#p2Head  {animation: p2Arm 1.3s ease infinite; transform-origin: 50% 20%;  }
#p2ArmLeft {animation: p2Arm 1.3s ease infinite; transform-origin: 50% 40%;  }
#p2ArmRight {animation: p2Arm 1.3s ease infinite; transform-origin: 50% 40%;  }
@keyframes p2Body {
	0%    { transform: rotate(1deg);  }
	50%  { transform: rotate(-1deg);  }
	100%  { transform: rotate(1deg);  }
}
@keyframes p2Arm {
	0%    { transform: rotate(-5deg); }
	50%  { transform: rotate(5deg);  }
	100%  { transform: rotate(-5deg);  }
}			

#p3Body {animation: p3Body 2s linear infinite; transform-origin: 50% 50%;}
#p3HairRight {animation: p3Hair 2s linear infinite; transform-origin: 58% 13%;}
#p3HairLeft {animation: p3Hair 2s linear infinite; transform-origin: 42% 13%;}
#p3Head {animation: p3head 2s linear infinite; transform-origin: 48% 28%;}
@keyframes p3Hair {
	0%    { transform: rotate(-10deg); }
	50%    { transform: rotate(10deg); }
	100%    { transform: rotate(-10deg); }
}
@keyframes p3head {
	0%    { transform: rotate(10deg); }
	50%    { transform: rotate(-10deg); }
	100%    { transform: rotate(10deg); }
}
@keyframes p3Body {
	0%    { transform: rotate(-2deg); }
	50%    { transform: rotate(2deg); }
	100%    { transform: rotate(-2deg); }
}

#p4Body {animation: p4Body 2s linear infinite; transform-origin: 50% 80%;}
#p4Fringe {animation: p4Fringe 1s linear infinite; transform-origin: 43% 11%;}
#p4ArmLeft {animation: p4ArmLeft 0.8s ease infinite; transform-origin: 50% 40%;}
#p4ArmRight {animation: p4ArmRight 0.8s ease infinite; transform-origin: 50% 40%;}
@keyframes p4Body {
	0%    { transform: rotate(1deg); }
	30%    { transform: rotate(1deg); }
	40%    { transform: rotate(-2deg); }
	60%    { transform: rotate(-2deg); }
	70%    { transform: rotate(1deg); }
	100%    { transform: rotate(1deg); }
}
@keyframes p4Fringe {
	0%    { transform: rotate(0deg); }
	50%    { transform: rotate(10deg); }
	100%    { transform: rotate(0deg); }
}
@keyframes p4ArmLeft {
	0%    { transform: rotate(0deg); }
	50%  { transform: rotate(-5deg);  }
	100%    { transform: rotate(0deg); }
}
@keyframes p4ArmRight {
	0%    { transform: rotate(0deg); }
	50%  { transform: rotate(5deg);  }
	100%    { transform: rotate(0deg); }
}