html, body, img { overflow: hidden; margin: 0; padding: 0; border: 0;}html { background-repeat: repeat-x; background-position: left top; background-image: url(../img/sky.png); background-size: 100% 400px; background-attachment: fixed;}body { font-size: 24px; background-repeat: repeat-x; background-position: left bottom; background-image: url(../img/bg-x3.png); background-size: auto 166px; background-attachment: fixed;}body, input { font-family: 'Open Sans', sans-serif;}html, body { height: 100%;}* { box-sizing: border-box; outline: 0;}* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); appearance: none; -moz-appearance: none; -webkit-appearance: none;}textarea, select, button, input { appearance: button; -moz-appearance: button; -webkit-appearance: button;}input[type="text"] { appearance: none; -moz-appearance: none; -webkit-appearance: none;}textarea, input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="number"] { -webkit-user-select: auto !important; -khtml-user-select: auto !important; -moz-user-select: auto !important; -ms-user-select: auto !important; user-select: auto !important;}* { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -moz-touch-callout: none; -ms-touch-callout: none; touch-callout: none; -webkit-user-drag: none; -moz-user-drag: none; -ms-user-drag: none; user-drag: none;}textarea, select, input { -webkit-user-select: auto !important; -khtml-user-select: auto !important; -moz-user-select: auto !important; -ms-user-select: auto !important; user-select: auto !important;}.mainlogo { position: fixed; left: 50%; width: 50%; top: 50%; min-width: 240px; transform: translate(-50%, -50%); z-index: 1000; transition: all 0.9s cubic-bezier(0.87, -0.41, 0.19, 1.44);}.mainlogo.mainlogo--background { z-index: 0; opacity: 0.7;}html.loaded .mainlogo { top: 40px; transform: translate(-50%, 0);}html.loaded2 .mainlogo { transition: 2s;}@keyframes loading { 0% { left: -1800px;} 100% { left: 0;}}#loading { position: fixed; left: 0; bottom: 0; z-index: 900; width: 100%; height: 100%; background: white; transition: all 0.9s cubic-bezier(0.87, -0.41, 0.19, 1.44); }#loading span { transform: translate(-50%, -50%); width: 100px; border-radius: 100px; display: block; position: absolute; top: 50%; left: 50%; width: 25%; min-width: 120px; margin-top: 8%; padding-bottom: 1.5%; background: #009fbc; overflow: hidden; opacity: 0.5; transition: 0.3s; width: 50%; min-width: 240px;}html.loaded #loading span { opacity: 0;}html.loaded #loading { transform: translate(-60%, -60%) rotateX(90deg) rotateY(0deg) rotateZ(135deg);}html.isMobile.loaded #loading { transition: 0.5s; transform: translateY(100%);}html.loaded.loaded2 .mainlogo { opacity: 0; visibility: hidden;}html.loaded.loaded2 .mainlogo.mainlogo--background { opacity: 1; opacity: 0.7; visibility: visible;}#loading span:after { content: ''; width: 1800px; top: 0; left: 0; height: 100%; position: absolute; animation: loading 3s linear infinite; background-image: linear-gradient(to right, #009fbc, #ddd, #009fbc, #009fbc, #ddd, #009fbc);}.mainlogo svg path { transition: 1s; fill: #009fbc; }#start { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; transition: 1s; opacity: 0; visibility: hidden;}html.loaded2.gamestart #start { opacity: 0; visibility: hidden;}html.loaded2 #start { opacity: 1; visibility: visible;}#start .box { text-align: center; transform: translate(-50%, -50%); top: 50%; left: 50%; position: absolute;}#start .box .code { margin-bottom: 20px; font-size: 18px; background: #333; border: 0; padding: 6px 40px 0; border-radius: 1000px; display: inline-block; box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.1); text-align: center; vertical-align: bottom; display: inline-block; color: #999; height: 116px; position: relative; padding-right: 106px; line-height: 36px; overflow: hidden; min-width: 290px; transition: 1s; transition: all 0.9s cubic-bezier(0.87, -0.41, 0.19, 1.44);}@media screen and (max-width: 719px) { #start .box .code { font-size: 14px;}}#start .box .code .gameSolo { font-size: 11px; color: #ccc;} #start .box .code .gameSolo span { font-weight: bold; color: white; transition: 0.3s;} #start .box .code .gameSolo:hover span { color: #009fbc;}@media screen and (max-width: 719px) { #start .box .code .gameSolo { font-size: 9px;}}#start .box .code .copy { width: 76px; height: 76px; position: absolute; top: 20px; right: 20px; background-color: #222; border-radius: 1000px; display: block; transition: 0.5s; cursor: pointer; padding-top: 52px; background-size: 36%; background-image: url(../img/copy.svg); background-repeat: no-repeat; background-position: top 36% center; line-height: 0;}#start .box .code .copy:after { content: 'copy'; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; font-weight: bold; color: white;}#start .box .code .copy:hover { background-color: #009fbc;}html.loaded2.gamestart #start .box .code, #start .box .code { transform: translateY(-50px); opacity: 0; visibility: hidden;}html.loaded2 #start .box .code { transform: translateY(0); opacity: 1; visibility: visible;}#start .box .code .gameId { font-weight: bold; font-size: 48px; text-transform: uppercase; color: white;}html.loaded2.gamestart #start .box .form, #start .box .form { transition: 1s; transition: all 0.9s cubic-bezier(0.87, -0.41, 0.19, 1.44); transform: translateY(50px); opacity: 0; visibility: hidden;}html.loaded2 #start .box .form { transform: translateY(0); opacity: 1; visibility: visible;}#start .box .form input[type="text"] { border: 0; background: #fff; width: 240px; height: 60px; line-height: 45px; border-bottom: 10px solid #eee; display: inline-block; color: #666; font-size: 24px; text-transform: uppercase; box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.1); text-align: center; vertical-align: bottom; font-weight: bold;}#start .box .form input[type="submit"] { border: 0; background: #009fbc; width: 120px; height: 60px; line-height: 45px; border-bottom: 10px solid #0091ab; display: inline-block; color: white; font-size: 24px; text-transform: uppercase; box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.1); cursor: pointer; font-weight: bold; transition: 0.3s; vertical-align: bottom;}#start .box .form input[type="submit"]:hover { border-bottom: 0px solid #0091ab; height: 50px; margin-top: 10px;}#game { perspective: 2000px; width: 100%; height: 100%; transition: 1s; z-index: 5; position: relative;}html.show--team1 #game, html.show--team2 #game { perspective: 1000px;}#game .floor { width: 960px; height: 960px; margin: 0 auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%) rotateX(0deg) rotateY(0deg) rotateZ(90deg) scale(2); transition: 2s; transition: all 2s cubic-bezier(0.87, -0.41, 0.19, 1.44); transform-style: preserve-3d; background-size: cover; background-color: #49b293; background-color: white; background-color: #c0d5d8; background-image: linear-gradient(135deg, #418671, #4c947f); background-color: #418671;}#game .floor:after { display: block; position: absolute; top: 50%; width: 100%; background-color: rgba(76, 147, 126, 1); background-color: #c0d5d8; content: ''; z-index: 10; transition: 0.2s; height: 0; margin: 0;}html.show--team1 #game .floor:after, html.show--team2 #game .floor:after { height: 8px; margin-top: -4px;}html.show--team1 #game .floor { transform: translate(-50%, -60%) rotateX(60deg) rotateY(0deg) rotateZ(135deg); box-shadow: 5px -5px 45px rgba(0, 0, 0, 0.1);}html.show--team2 #game .floor { transform: translate(-50%, -60%) rotateX(60deg) rotateY(0deg) rotateZ(-45deg); box-shadow: 5px 5px 45px rgba(0, 0, 0, 0.1);}@media screen and (max-width: 1300px) { #game { transform: scale(0.75);}}@media screen and (max-height: 760px) { #game { transform: scale(0.75);}}@media screen and (max-width: 1000px) { #game { transform: scale(0.52);} html.show--team1 #game .floor { transform: translate(-50%, -60%) rotateX(50deg) rotateY(0deg) rotateZ(135deg);} html.show--team2 #game .floor { transform: translate(-50%, -60%) rotateX(50deg) rotateY(0deg) rotateZ(-45deg);}}@media screen and (max-height: 640px) { #game { transform: scale(0.55);}}@media screen and (max-width: 719px) { #game { transform: scale(0.36);} html.show--team1 #game .floor { transform: translate(-50%, -60%) rotateX(50deg) rotateY(0deg) rotateZ(180deg);} html.show--team2 #game .floor { transform: translate(-50%, -60%) rotateX(50deg) rotateY(0deg) rotateZ(0deg);}}@media screen and (max-height: 480px) { #game { transform: scale(0.45);}}@media screen and (max-width: 479px) { #game { transform: scale(0.25);}}#game .floor .w5, #game .floor .w4, #game .floor .w3, #game .floor .w2, #game .floor .w1 { width: 50%; height: 50%; position: absolute; z-index: 10000; transform-origin: top left; display: none;}#game .floor .w1 { transform: rotateY(90deg) translateY(0%) translateX(-100%);}#game .floor .w2 { transform: rotateY(90deg) translateZ(960px) translateY(0%) translateX(-100%);}#game .floor .w3 { height: 100%; transform: rotateZ(-90deg) rotateY(90deg) translateZ(-480px) translateY(0%) translateX(-100%);}#game .floor .w4 { height: 100%; transform: rotateZ(-90deg) rotateY(180deg) translateZ(-480px) translateY(0%) translateX(0%);}#game .floor .w5 { height: 100%; transform: rotateZ(-90deg) rotateY(90deg) translateZ(0) translateY(0%) translateX(-100%);}html.playSolo #game .floor .w5, html.playSolo #game .floor .w4, html.playSolo #game .floor .w3, html.playSolo #game .floor .w2, html.playSolo #game .floor .w1 { display: block;}@keyframes floorAnimation { from { transform: translate(-50%, -60%) rotateX(60deg) rotateY(0deg) rotateZ(-45deg);} to { transform: translate(-50%, -60%) rotateX(60deg) rotateY(0deg) rotateZ(315deg);}}#game .floor.animation { animation: floorAnimation 10s linear infinite;}#game .floor .square { width: 80px; height: 80px; float: left; display: block; position: relative;}#game .floor .square:after { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; content: ''; transition: 0.3s; border-radius: 0; transform: translate(-50%, -50%);}#game .floor .square[data-counter="133"]:before, #game .floor .square[data-counter="12"]:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: 'powered by'; text-align: center; font-size: 8px; display: block; padding-top: 20px; color: #009fbc; background-size: 50%; background-position: center center; background-repeat: no-repeat; background-image: url(../img/d2.svg); z-index: 10; transition: 1s; opacity: 0;}#game .floor .square[data-counter="12"]:before { transform: translateX(5px) translateY(-15px) rotate(-135deg);} html.show--team1 #game .floor .square[data-counter="12"]:before { opacity: 1;}#game .floor .square[data-counter="133"]:before { transform: translateX(0px) translateY(-10px) rotate(45deg);} html.show--team2 #game .floor .square[data-counter="133"]:before { opacity: 1;}html.show--team1 #game .floor .square.team2:after, html.show--team2 #game .floor .square.team1:after { background-color: rgba(255, 255, 255, 0.5);}html.show--team1 #game .floor .square.team1:hover:after, html.show--team2 #game .floor .square.team2:hover:after { background-color: rgba(76, 147, 126, 0.7); }html.isTouch.show--team1 #game .floor .square.team1:hover:after, html.isTouch.show--team2 #game .floor .square.team2:hover:after { background-color: transparent;}#game .floor .square[data-counter="133"]:hover:before, #game .floor .square[data-counter="12"]:hover:before { transition: 0.3s !important; opacity: 0 !important;}#game .floor .person { width: 80px; height: 80px; float: left; display: block; position: absolute; transition: 0.3s; transform-style: preserve-3d; z-index: 20;}#game .floor .person.hide { transform: translateZ(120px) !important; opacity: 0; visibility: hidden;}#game .floor .person .cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d;} html.show--cube #game .floor .person .cube { display: none;}#game .floor .person .em { transform-style: preserve-3d; position: absolute; display: none;} html.show--cube #game .floor .person .em { display: block;}@keyframes personTeam2Animation3d { from { transform: translateZ(0);} to { transform: translateZ(10px);}}@keyframes personTeam1Animation3d { from { transform: translateZ(0) translateX(80px) scaleX(-1); transform: translateZ(0px) translateY(80px) translateX(80px) rotateZ(180deg);} to { transform: translateZ(10px) translateY(80px) translateX(80px) rotateZ(180deg);}}#game .floor .person.team2 .em { animation: personTeam2Animation3d 1s alternate infinite;}#game .floor .person.team1 .em { animation: personTeam1Animation3d 1s alternate infinite;}#game .floor .person.team1[data-id="0"] .em { animation-delay: 0s;}#game .floor .person.team1[data-id="1"] .em { animation-delay: 0.2s;}#game .floor .person.team1[data-id="2"] .em { animation-delay: 0.4s;}#game .floor .person.team2[data-id="3"] .em { animation-delay: 0.6s;}#game .floor .person.team2[data-id="4"] .em { animation-delay: 0.8s;}#game .floor .person.team2[data-id="5"] .em { animation-delay: 1s;}@keyframes head3dAnimation { 0% { transform: translate3d(25px, 24px, 48px) rotateZ(1deg);} 50% { transform: translate3d(24px, 24px, 54px) rotateZ(0);} 100% { transform: translate3d(23px, 24px, 48px) rotateZ(-1deg);}}#game .floor .person em { transform-style: preserve-3d; position: absolute; display: none;} html.show--cube #game .floor .person em { display: block;} #game .floor .person em b { position: absolute; width: 8px; height: 8px; transition: 0.3s; background-color: #31735e; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2)); image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges;} #game .floor .person em b:nth-child(1) { transform: rotateY(0deg) translateZ(0);} #game .floor .person em b:nth-child(2) { transform: rotateY(90deg) translateZ(0); transform-origin: bottom right;} #game .floor .person em b:nth-child(3) { transform: rotateY(180deg) translateZ(0);} #game .floor .person em b:nth-child(4) { transform: rotateY(-90deg) translateZ(0); transform-origin: bottom left;} #game .floor .person em b:nth-child(5) { transform: rotateX(90deg) translateZ(0); transform-origin: top left;} #game .floor .person em b:nth-child(6) { transform: rotateX(-90deg) translateZ(0); transform-origin: bottom left;} #game .floor .person em.head3d { transform: translate3d(24px, 24px, 48px); animation: head3dAnimation 2s alternate infinite;} #game .floor .person em.head3d b { width: 32px; height: 32px; background-size: cover;} #game .floor .person em.head3d b:nth-child(1) { transform: rotateY(0deg) translateZ(32px);} #game .floor .person em.head3d b:nth-child(1), #game .floor .person em.head3d b:nth-child(6) { background-image: url(../img/face--back.png);} #game .floor .person em.head3d b:nth-child(2) { background-image: url(../img/face--left.png); transform: rotateX(-90deg) rotateY(-90deg) translateZ(0);} #game .floor .person em.head3d b:nth-child(4) { background-image: url(../img/face--left.png); transform: rotateX(-90deg) rotateY(-90deg) translateZ(0px) translateX(-32px);} #game .floor .person em.head3d b:nth-child(5) { background-image: url(../img/face--front.png); transform: rotateX(-90deg) rotateY(0deg) translateY(-32px) translateZ(0px);} html.santa #game .floor .person em.head3d b:nth-child(1) { background-image: url(../img/face--top--santa--tr.png);} html.santa #game .floor .person em.head3d b:nth-child(6) { background-image: url(../img/face--back--santa--tr.png);} html.santa #game .floor .person em.head3d b:nth-child(2) { background-image: url(../img/face--left--santa--tr.png);} html.santa #game .floor .person em.head3d b:nth-child(4) { background-image: url(../img/face--left--santa--tr.png);} html.santa #game .floor .person em.head3d b:nth-child(5) { background-image: url(../img/face--front--santa--tr.png);} #game .floor .person em.body3d { transform: translate3d(24px, 32px, 0);} #game .floor .person em.body3d b { width: 32px; height: 16px; background-size: cover;} #game .floor .person em.body3d b:nth-child(1) { transform: rotateY(0deg) translateZ(48px);} #game .floor .person em.body3d b:nth-child(2) { width: 48px; transform: rotateY(90deg) translateZ(-16px);} #game .floor .person em.body3d b:nth-child(4) { width: 48px;} #game .floor .person em.body3d b:nth-child(5) { width: 32px; height: 48px;} #game .floor .person em.body3d b:nth-child(6) { height: 48px; transform: rotateX(-90deg) translateZ(-32px);} #game .floor .person em.body3d b:nth-child(1) { background-image: url(../img/body--top.png);} #game .floor .person em.body3d b:nth-child(2), #game .floor .person em.body3d b:nth-child(4) { background-image: url(../img/body--left.png);} #game .floor .person em.body3d b:nth-child(5), #game .floor .person em.body3d b:nth-child(6) { background-image: url(../img/body--front.png);} #game .floor .person em.arm { transition: 0.2s;} #game .floor .person em.arm b { width: 16px; height: 16px; background-size: cover;} #game .floor .person em.arm b:nth-child(1) { transform: rotateY(0deg) translateZ(48px);} #game .floor .person em.arm b:nth-child(2) { width: 48px; transform: rotateY(90deg) rotateZ(180deg) translateZ(-32px) translateX(48px) translateY(16px);} #game .floor .person em.arm b:nth-child(4) { width: 48px;} #game .floor .person em.arm b:nth-child(5) { width: 16px; height: 48px;} #game .floor .person em.arm b:nth-child(6) { height: 48px; transform: rotateX(-90deg) translateZ(-32px) rotateX(180deg) translateY(48px);} #game .floor .person em.arm b:nth-child(3) { background-image: url(../img/arm--top.png);} #game .floor .person em.arm b:nth-child(1) { background-image: url(../img/hand.png);} #game .floor .person em.arm b:nth-child(2), #game .floor .person em.arm b:nth-child(4) { background-image: url(../img/arm.png);} #game .floor .person em.arm b:nth-child(5), #game .floor .person em.arm b:nth-child(6) { background-image: url(../img/arm--r.png);} html.santa #game .floor .person em.arm b:nth-child(3) { background-image: url(../img/arm--top.png);} html.santa #game .floor .person em.arm b:nth-child(1) { background-image: url(../img/hand--santa.png);} html.santa #game .floor .person em.arm b:nth-child(2), html.santa #game .floor .person em.arm b:nth-child(4) { background-image: url(../img/arm--santa--tr.png);} html.santa #game .floor .person em.arm b:nth-child(5), html.santa #game .floor .person em.arm b:nth-child(6) { background-image: url(../img/arm--r--santa--tr.png);} #game .floor .person em.arm.left { transform: translate3d(56px, 48px, 48px) rotateX(-180deg) rotateY(0);} #game .floor .person em.arm.right { transform: translate3d(8px, 32px, 0);}#game .floor .person.team2 em b { background-color: #a20d0d;}#game .floor .person.fired em b { background-color: red;}#game .floor .person.team1[data-id="0"] .head3d { animation-delay: 0s;}#game .floor .person.team1[data-id="1"] .head3d { animation-delay: 0.2s;}#game .floor .person.team1[data-id="2"] .head3d { animation-delay: 0.4s;}#game .floor .person.team2[data-id="3"] .head3d { animation-delay: 0.6s;}#game .floor .person.team2[data-id="4"] .head3d { animation-delay: 0.8s;}#game .floor .person.team2[data-id="5"] .head3d { animation-delay: 1s;}#game .floor .person.fire em.arm.right { transform: translate3d(8px, 32px, 32px) rotateX(10deg) rotateY(-10deg); transform-origin: 0 0px;}#game .floor .person em.arm.right { transform: translate3d(8px, 48px, 45px) rotateX(165deg) rotateY(5deg) rotateZ(-5deg);}#game .floor .person.fire em.arm.left { transform: translate3d(56px, 48px, 48px) rotateX(-180deg) rotateY(10deg);}#game .floor .person .cube__face { position: absolute; width: 80px; height: 80px;}@keyframes personTeam1Animation { from { transform: rotateY(-90deg) rotateZ(90deg) rotateX(0deg) translateZ(0px) translateX(0px) translateY(-40px) scaleX(-1);} to { transform: rotateY(-90deg) rotateZ(90deg) rotateX(0deg) translateZ(0px) translateX(0px) translateY(-50px) scaleX(-1);}}@keyframes personTeam2Animation { from { transform: rotateY(-90deg) rotateZ(90deg) rotateX(0deg) translateZ(0px) translateX(0px) translateY(-40px);} to { transform: rotateY(-90deg) rotateZ(90deg) rotateX(0deg) translateZ(0px) translateX(0px) translateY(-50px);}}#game .floor .person.team2 .cube__face.cube__face--content { animation: personTeam2Animation 1s alternate infinite; transform: rotateY(-90deg) rotateZ(90deg) rotateX(0deg) translateZ(0px) translateX(0px) translateY(-40px);}#game .floor .person.team1 .cube__face.cube__face--content { animation: personTeam1Animation 1s alternate infinite; transform: rotateY(-90deg) rotateZ(90deg) rotateX(0deg) translateZ(0px) translateX(0px) translateY(-40px) scaleX(-1);}#game .floor .person.team1[data-id="0"] .cube__face.cube__face--content { animation-delay: 0s;}#game .floor .person.team1[data-id="1"] .cube__face.cube__face--content { animation-delay: 0.2s;}#game .floor .person.team1[data-id="2"] .cube__face.cube__face--content { animation-delay: 0.4s;}#game .floor .person.team2[data-id="3"] .cube__face.cube__face--content { animation-delay: 0.6s;}#game .floor .person.team2[data-id="4"] .cube__face.cube__face--content { animation-delay: 0.8s;}#game .floor .person.team2[data-id="5"] .cube__face.cube__face--content { animation-delay: 1s;}#game .floor .person .cube__face.cube__face--content { transition: 1s; transform-origin: center center; background: rgba(255, 255, 255, 0.3); border-radius: 1000px;} html.show--cube #game .floor .person .cube__face.cube__face--content { background: transparent;}#game .floor .person .cube__face.cube__face--front { transform: rotateY(0deg) translateZ(80px);}#game .floor .person .cube__face.cube__face--right { transform: rotateY(90deg) translateZ(0); transform-origin: bottom right;}#game .floor .person .cube__face.cube__face--back { transform: rotateY(180deg) translateZ(0);}#game .floor .person .cube__face.cube__face--left { transform: rotateY(-90deg) translateZ(0); transform-origin: bottom left;}#game .floor .person .cube__face.cube__face--top { transform: rotateX(90deg) translateZ(0); transform-origin: top left;}#game .floor .person .cube__face.cube__face--bottom { transform: rotateX(-90deg) translateZ(0); transform-origin: bottom left;}#game .floor .person .life { position: absolute; top: 50%; left: 5px; width: 5px; height: 25px; transform: translateY(-50%); background: rgba(255, 255, 255, 0.5); border-radius: 100px; overflow: hidden;} html.show--cube #game .floor .person .life { position: absolute; top: auto; left: 0px; width: 4px; height: 25px; transform: translateY(-50%); background: rgba(255, 255, 255, 0.1); border-radius: 100px; overflow: hidden; transform: translateY(4px) translateX(8px) translateZ(24px) rotateX(-90deg);}html.show--cube #game .floor .person.team2 .life { transform: translateY(-13px) translateX(8px) translateZ(24px) rotateX(-90deg);} html.show--cube.show--team2 #game .floor .person.team2 .life { transform: translateY(4px) translateX(8px) translateZ(24px) rotateX(-90deg) !important;}html.show--cube.show--team2 #game .floor .person.team1 .life { transform: translateY(-13px) translateX(8px) translateZ(24px) rotateX(-90deg);}#game .floor .person .life span { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; transition: 0.3s; border-radius: 1000px;}#game .floor .person.team1 .life span { background: #009fbc;}#game .floor .person.team2 .life span { background: #31735e;}#game .floor .person .power { position: absolute; top: 50%; right: 5px; width: 5px; height: 25px; transform: translateY(-50%); background: rgba(255, 255, 255, 0.5); border-radius: 1000px; overflow: hidden; z-index: 10;} html.show--cube #game .floor .person .power { position: absolute; top: auto; right: 0px; width: 4px; height: 25px; transform: translateY(4px) translateX(24px) translateZ(24px) rotateX(-90deg); background: rgba(255, 255, 255, 0.1); border-radius: 1000px; overflow: hidden; z-index: 10;}html.show--cube #game .floor .person.team2 .power { transform: translateY(-13px) translateX(24px) translateZ(24px) rotateX(-90deg);} html.show--cube.show--team2 #game .floor .person.team2 .power { transform: translateY(4px) translateX(24px) translateZ(24px) rotateX(-90deg) !important;}html.show--cube.show--team2 #game .floor .person.team1 .power { transform: translateY(-13px) translateX(24px) translateZ(24px) rotateX(-90deg);}#game .floor .person .power span { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background-image: linear-gradient(0, orange, red); border-radius: 1000px; transition-timing-function: linear;}#game .floor .person.fire .power span { height: 100%; transition: 0.7s;}#game .floor .person .body { background-size: auto 75%; background-position: center center; background-repeat: no-repeat; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} html.show--cube #game .floor .person .body { display: none;}#game .floor .person.team1 .body { background-image: url(../img/team1.png);} html.show--isabella #game .floor .person.team1 .body { background-image: url(../img/koala.png);} html.show--wilson-edition #game .floor .person.team1 .body { background-size: cover; border-radius: 1000px; background-image: url(../img/wilson1.jpg);}html.show--wilson-edition #game .floor .person.team1.fire .body { background-image: url(../img/wilson1-fire.jpg);}#game .floor .person.team2 .body { background-image: url(../img/team2.png);} html.show--isabella #game .floor .person.team2 .body { background-image: url(../img/bear.png);} html.show--wilson-edition #game .floor .person.team2 .body { background-size: cover; border-radius: 1000px; background-image: url(../img/wilson2.jpg);}html.show--wilson-edition #game .floor .person.team2.fire .body { background-image: url(../img/wilson2-fire.jpg);}#game .floor .person:after { content: ''; position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; width: 100%; height: 100%; opacity: 0.2; transition: 0.3s; border-radius: 1000px; animation: personTeamAfter3d 1s alternate infinite;}html.show--team2 #game .floor .person.team2.active:after, html.show--team1 #game .floor .person.team1.active:after { transform: translate(-50%, -50%) scale(2);}@keyframes personTeamAfter3d { from { width: 60%; height: 60%;} to { width: 50%; height: 50%;}}#game .floor .person.team1[data-id="0"]:after { animation-delay: 0s;}#game .floor .person.team1[data-id="1"]:after { animation-delay: 0.2s;}#game .floor .person.team1[data-id="2"]:after { animation-delay: 0.4s;}#game .floor .person.team2[data-id="3"]:after { animation-delay: 0.6s;}#game .floor .person.team2[data-id="4"]:after { animation-delay: 0.8s;}#game .floor .person.team2[data-id="5"]:after { animation-delay: 1s;}#game .floor .person.team1:after { background: #009fbc;}#game .floor .person.team2:after { background: #31735e;}html.show--team1 #game .floor .person.team1.active:after, html.show--team2 #game .floor .person.team2.active:after { opacity: 1;}#game .floor .person.team1.draggable, #game .floor .person.team2.draggable { transition: none;}#game .floor .bullet { width: 20px; height: 20px; background: rgba(0, 0, 0, 0.1); position: absolute; transform-style: preserve-3d;}@keyframes bulletAnimation { from { transform: translate3d(0px, 0px, 50px) rotateX(0deg);} to { transform: translate3d(0px, 0px, 10px) rotateX(360deg);}}#game .floor .bullet .cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform: translate3d(0px, 0px, 50px); animation: bulletAnimation 0.55s linear infinite; transition: 0.15s;}#game .floor .bullet .cube.hide { opacity: 0;}#game .floor .bullet .cube__face { position: absolute; width: 20px; height: 20px; background-color: #009fbc; background-color: #c0d5d8; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2));}#game .floor .bullet .cube__face.cube__face--front { transform: rotateY(0deg) translateZ(10px);}#game .floor .bullet .cube__face.cube__face--right { transform: rotateY(90deg) translateZ(10px);}#game .floor .bullet .cube__face.cube__face--back { transform: rotateY(180deg) translateZ(10px);}#game .floor .bullet .cube__face.cube__face--left { transform: rotateY(-90deg) translateZ(10px);}#game .floor .bullet .cube__face.cube__face--top { transform: rotateX(90deg) translateZ(10px);}#game .floor .bullet .cube__face.cube__face--bottom { transform: rotateX(-90deg) translateZ(10px);}.copied { text-align: center; font-size: 14px; display: block; color: #999; background-color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -250%) scale(0.1) rotate(-45deg); z-index: 200; box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.1); border-radius: 10px; transition: all 0.9s cubic-bezier(0.87, -0.41, 0.19, 1.44); padding: 10px 20px; opacity: 0; visibility: hidden; font-weight: bold; background-color: #009fbc; color: white;}.copied.show { opacity: 1; visibility: visible; transition: 0.5s; transform: translate(-50%, -50%) scale(1);}.copied.show--1 { transform: translate(-50%, -100%) scale(1) rotate(4deg);}.copied.show--2 { transform: translate(-50%, -90%) scale(1) rotate(-4deg);}.copied.show--3 { transform: translate(-50%, -80%) scale(1) rotate(2deg);}.copied.show--4 { transform: translate(-50%, -70%) scale(1) rotate(-2deg);}.copied.show--5 { transform: translate(-50%, -60%) scale(1) rotate(-6deg);}.copied.show--6 { transform: translate(-50%, -50%) scale(1) rotate(6deg);}.copied.show--7 { transform: translate(-50%, -40%) scale(1) rotate(8deg);}.copied.show--7 { transform: translate(-50%, -30%) scale(1) rotate(-8deg);}#error { position: fixed; top: 0; left: 0; z-index: 200; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: all 0.9s cubic-bezier(0.87, -0.41, 0.19, 1.44);}#error .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}#error .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.1) rotate(-45deg); z-index: 20; width: 100%; max-width: 320px; background: white; box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.1); border-radius: 10px; transition: all 0.9s cubic-bezier(0.87, -0.41, 0.19, 1.44); padding: 20px;}#error .image { margin: 0 auto; width: 160px; height: 160px; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url(../img/no.svg); display: block;}#error .close { position: absolute; width: 40px; height: 40px; top: 20px; right: 20px; transform: rotate(45deg); transform: rotate(45deg) scale(0.7); cursor: pointer;}#error .close:after, #error .close:before { width: 100%; height: 8px; background: #333; content: ''; display: block; border-radius: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg);}#error .close:after { transform: translate(-50%, -50%);}#error .text { text-align: center; margin-top: 20px; font-size: 18px; display: block; color: #999;}html.show--error #error { opacity: 1; visibility: visible; transition: 0.3s;}html.show--error #error .box { transform: translate(-50%, -50%) scale(1) rotate(2deg);}#win, #lose { position: fixed; top: 0; left: 0; z-index: 200; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: all 0.9s cubic-bezier(0.87, -0.41, 0.19, 1.44); font-family: 'comix_loudregular'; text-transform: uppercase;}#win span, #lose span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.1); display: block; z-index: 20; font-size: 10vw; text-align: center; color: #009fbc; transition: 0.5s; letter-spacing: -20px; transition: all 0.9s cubic-bezier(0.87, -0.41, 0.19, 1.44); text-shadow: 3px 3px 20px rgba(0, 0, 0, 0.1); display: block; width: 100%;}html.show--win #win, html.show--lose #lose { opacity: 1; visibility: visible; transition: 0.3s;}html.show--win #win span, html.show--lose #lose span { transform: translate(-50%, -50%) scale(1); letter-spacing: -5px;}.countdown { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: 1s; z-index: 1000;}.countdown span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.1); transition: 0.5s; transition: all 0.9s cubic-bezier(0.87, -0.41, 0.19, 1.44); font-size: 20vw; text-align: center; width: 100%; display: block; color: #009fbc; font-family: 'comix_loudregular'; text-transform: uppercase;}html.show--count1 .countdown.countdown--1, html.show--count2 .countdown.countdown--2, html.show--count3 .countdown.countdown--3, html.show--countgo .countdown.countdown--go { opacity: 1; visibility: visible;}.countdown.countdown--1 span:after { content: '1';}.countdown.countdown--2 span:after { content: '2';}.countdown.countdown--3 span:after { content: '3';}.countdown.countdown--go span:after { content: 'go!';}html.show--count1 .countdown.countdown--1 span, html.show--count2 .countdown.countdown--2 span, html.show--count3 .countdown.countdown--3 span, html.show--countgo .countdown.countdown--go span { transform: translate(-50%, -50%) scale(1);}@font-face { font-family: 'comix_loudregular'; src: url('../fonts/comix_loud-webfont.woff2') format('woff2'), url('../fonts/comix_loud-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}.publisher { display: none;}#by { position: fixed; bottom: 0; right: 0; z-index: 101;} #by a { color: #009fbc; text-decoration: none; font-size: 10px; padding: 10px; display: block;}