@font-face {
		font-family: 'Futura';
		src: url('fonts/futura-lig-webfont.eot');
		src: url('fonts/futura-lig-webfont.eot?#iefix') format('embedded-opentype'),
				 url('fonts/futura-lig-webfont.woff2') format('woff2'),
				 url('fonts/futura-lig-webfont.woff') format('woff'),
				 url('fonts/futura-lig-webfont.ttf') format('truetype'),
				 url('fonts/futura-lig-webfont.svg#futura-lig-webfont') format('svg');
		font-weight: 300;
		font-style: normal;

}

@font-face {
		font-family: 'Ladislav';
		src: url('fonts/ladislav-wf.eot');
		src: url('fonts/ladislav-wf.eot?#iefix') format('embedded-opentype'),
				 url('fonts/ladislav-wf.woff2') format('woff2'),
				 url('fonts/ladislav-wf.woff') format('woff'),
				 url('fonts/ladislav-wf.ttf') format('truetype'),
				 url('fonts/ladislav-wf.svg#ladislav-wf') format('svg');
		font-weight: 400;
		font-style: normal;

}




@font-face {
		font-family: 'Ladislav';
		src: url('fonts/ladislav-bold-wf.eot');
		src: url('fonts/ladislav-bold-wf.eot?#iefix') format('embedded-opentype'),
				 url('fonts/ladislav-bold-wf.woff2') format('woff2'),
				 url('fonts/ladislav-bold-wf.woff') format('woff'),
				 url('fonts/ladislav-bold-wf.ttf') format('truetype'),
				 url('fonts/ladislav-bold-wf.svg#ladislav-bold-wf') format('svg');
		font-weight: 700;
		font-style: normal;

}

@font-face {
		font-family: 'Ladislav';
		src: url('fonts/ladislavlight-wf.eot');
		src: url('fonts/ladislavlight-wf.eot?#iefix') format('embedded-opentype'),
				 url('fonts/ladislavlight-wf.woff2') format('woff2'),
				 url('fonts/ladislavlight-wf.woff') format('woff'),
				 url('fonts/ladislavlight-wf.ttf') format('truetype'),
				 url('fonts/ladislavlight-wf.svg#ladislavlight-wf') format('svg');
		font-weight: 300;
		font-style: normal;

}




@font-face {
		font-family: 'Ladislav';
		src: url('fonts/ladislavsemibold-wf.eot');
		src: url('fonts/ladislavsemibold-wf.eot?#iefix') format('embedded-opentype'),
				 url('fonts/ladislavsemibold-wf.woff2') format('woff2'),
				 url('fonts/ladislavsemibold-wf.woff') format('woff'),
				 url('fonts/ladislavsemibold-wf.ttf') format('truetype'),
				 url('fonts/ladislavsemibold-wf.svg#ladislavsemibold-wf') format('svg');
		font-weight: 600;
		font-style: normal;

}

html {background: transparent; margin: 0; padding: 0; }
body {overflow: hidden; margin: 0; padding: 0; background: #121110; font-family: 'Ladislav', Arial, Helvetica, Tahoma, 'Sans Serif'; font-size: 24px; font-weight: 400; line-height: 1.25; }
body .fl {font-family: Futura, Helvetica, Arial; font-weight: 300; }

.fw, .ff {width: 1920px; }
.ff {height: 1080px; }
.oh {overflow: hidden; }
.circle {-moz-border-radius: 500px; -webkit-border-radius: 500px; border-radius: 500px; }
/* transparent */
.trans
{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: .5; opacity: .5; }

/* INVISIBLE */
.inv, .inv div, .inv img,
.controls
{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; }

/* VISIBLE over invisible */
.vis, .vis div, .vis img,
.controls.vis
{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; }

/* INVISIBLE over visible */
.vis.inv
{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; }

#cnt {position: relative; margin: 0 auto; overflow: hidden; background: #121110 url(bg/inactive-triangels.png) no-repeat 0 0; color: #fff; }
.game-phase {position: absolute; display: none; }
.game-phase.active {display: block; }

.stripes, .stripes img {position: absolute; }
.stripe0 {left: 0px; }
.stripe1 {left: 0px; }
.stripe2 {left: 102px; }
.stripe3 {left: 208px; }
.stripe4 {left: 317px; }
.stripe5 {left: 420px; }
.stripe6 {left: 479px; }
.stripe7 {left: 627px; }
.stripe8 {left: 691px; }
.stripe9 {left: 806px; }
.stripe10 {left: 853px; }
.stripe11 {left: 973px; }
.stripe12 {left: 1100px; }
.stripe13 {left: 1168px; }
.stripe14 {left: 1307px; }
.stripe15 {left: 1392px; }
.stripe16 {left: 1453px; }
.stripe17 {left: 1558px; }
.stripe18 {left: 1627px; }
.stripe19 {left: 1717px; }

/*
	I N T R O
*/
/*
.intro.stripes img {display: none; opacity: 0; }
#intro.active .stripes img {display: block; }
*/
#intro.active .stripes img {opacity: 0; transition: .3s cubic-bezier(.3,0,.7,1); }
#intro.active .stripes .stripe0, #intro.active .stripes .stripe19 {transition-delay: .9s; }
#intro.active .stripes .stripe1, #intro.active .stripes .stripe18 {transition-delay: .8s; }
#intro.active .stripes .stripe2, #intro.active .stripes .stripe17 {transition-delay: .7s; }
#intro.active .stripes .stripe3, #intro.active .stripes .stripe16 {transition-delay: .6s; }
#intro.active .stripes .stripe4, #intro.active .stripes .stripe15 {transition-delay: .5s; }
#intro.active .stripes .stripe5, #intro.active .stripes .stripe14 {transition-delay: .4s; }
#intro.active .stripes .stripe6, #intro.active .stripes .stripe13 {transition-delay: .3s; }
#intro.active .stripes .stripe7, #intro.active .stripes .stripe12 {transition-delay: .2s; }
#intro.active .stripes .stripe8, #intro.active .stripes .stripe11 {transition-delay: .1s; }
#intro.active .stripes .stripe9, #intro.active .stripes .stripe10 {transition-delay: .0s; }

#intro.active.show .stripes img {opacity: 1; transition: .5s cubic-bezier(.3,0,.7,1); }
#intro.active.show .stripes .stripe0, #intro.active.show .stripes .stripe19 {transition-delay: .0s; }
#intro.active.show .stripes .stripe1, #intro.active.show .stripes .stripe18 {transition-delay: .1s; }
#intro.active.show .stripes .stripe2, #intro.active.show .stripes .stripe17 {transition-delay: .2s; }
#intro.active.show .stripes .stripe3, #intro.active.show .stripes .stripe16 {transition-delay: .3s; }
#intro.active.show .stripes .stripe4, #intro.active.show .stripes .stripe15 {transition-delay: .4s; }
#intro.active.show .stripes .stripe5, #intro.active.show .stripes .stripe14 {transition-delay: .5s; }
#intro.active.show .stripes .stripe6, #intro.active.show .stripes .stripe13 {transition-delay: .6s; }
#intro.active.show .stripes .stripe7, #intro.active.show .stripes .stripe12 {transition-delay: .7s; }
#intro.active.show .stripes .stripe8, #intro.active.show .stripes .stripe11 {transition-delay: .8s; }
#intro.active.show .stripes .stripe9, #intro.active.show .stripes .stripe10 {transition-delay: .9s; }

#game-name {position: absolute; left: 50%; top: 288px; }
#game-name div {position: absolute; transition: .5s ease-out; opacity: 0; }
#game-name div span {display: block; position: absolute; }
#kavalier {position: absolute; left: 50%; top: 900px; transform: translateX(-50%); transition: 1s ease-in-out; opacity: 0; }
#np-game-of {font-size: 100px; font-weight: 400; }
#np-and {left: -87px; }
#np-ice {right: 87px; transform-origin: right center; }
#np-ice, #np-and, #np-fire {top: 65px; font-size: 206px; font-weight: 700; }
#np-fire {left: 53px; transform-origin: left center; }

#intro.show #np-game-of {opacity: 1; transition-delay: .9s; }
#intro.show #np-ice {transition-delay: 1.2s; opacity: 1; animation: pop .5s forwards 1.2s; }
#intro.show #np-and {transition-delay: 1.5s; opacity: 1; }
#intro.show #np-fire {transition-delay: 1.7s; opacity: 1; animation: pop .5s forwards 1.7s; }
#intro.show #kavalier {transition-delay: 2s; opacity: 1; }
/*
#intro.show div {transition: none !important; animation: none !important; }
#intro.show div span {display: none; }
#intro.show div span:first-child {display: block; }
*/

#np-game-of span:nth-child(1) {left: -156px; }
#np-game-of span:nth-child(2) {left: -111px; }
#np-game-of span:nth-child(3) {left: -64px; }
#np-game-of span:nth-child(4) {left: 11px; }
#np-game-of span:nth-child(5) {left: 78px; }
#np-game-of span:nth-child(6) {left: 125px; }

#np-fire span:nth-child(2) {left: 67px; }
#np-fire span:nth-child(3) {left: 115px; }
#np-fire span:nth-child(4) {left: 182px; }

#np-ice span:nth-child(1) {right: 200px; }
#np-ice span:nth-child(2) {right: 101px; }
#np-ice span:nth-child(3) {right: 0; }

.explode #game-name div span {animation: particle .3s forwards linear; transition: .3s cubic-bezier(.2,0,.4,1); }
.explode #np-game-of span:nth-child(1) {transform: translate(-517px,-363px) rotate(50deg); }
.explode #np-game-of span:nth-child(2) {transform: translate(-380px,-540px) rotate(-120deg); }
.explode #np-game-of span:nth-child(3) {transform: translate(59px,-669px) rotate(230deg); }
.explode #np-game-of span:nth-child(4) {transform: translate(415px,-500px) rotate(-40deg); }
.explode #np-game-of span:nth-child(5) {transform: translate(510px,-300px) rotate(90deg); }
.explode #np-game-of span:nth-child(6) {transform: translate(510px,-236px) rotate(145deg); }

.explode #np-ice span:nth-child(1) {transform: translate(-428px,76px) rotate(50deg); }
.explode #np-ice span:nth-child(2) {transform: translate(-490px,130px) rotate(-120deg); }
.explode #np-ice span:nth-child(3) {transform: translate(-545px,255px) rotate(-40deg); }

.explode #np-and span {transform: translate(-290px,628px) rotate(45deg); }

.explode #np-fire span:nth-child(1) {transform: translate(570px,330px) rotate(90deg); }
.explode #np-fire span:nth-child(2) {transform: translate(560px,200px) rotate(145deg); }
.explode #np-fire span:nth-child(3) {transform: translate(505px,185px) rotate(-120deg); }
.explode #np-fire span:nth-child(4) {transform: translate(450px,80px) rotate(50deg); }

/*
 G A M E   P R O G R E S S
*/

#game-start-countdown {opacity: 0; position: absolute; left: 50%; top: 50%; transition: .3s; }
#game-start-countdown.vis {opacity: 1; }
#game-start-countdown * {position: absolute; }
#game-start-countdown .rotated-line-box {bottom: 0; width: 200px; height: 200px; overflow: hidden; }
#game-start-countdown .rotated-line-box:nth-child(1) {left: 0; transform-origin: left bottom; animation: countdown-rotate 1s forwards cubic-bezier(0,.5,.6,1) infinite; }
#game-start-countdown .rotated-line-box:nth-child(2) {left: 0; transform-origin: left bottom; animation: countdown-rotate 1s forwards cubic-bezier(0,.5,.6,1) infinite .3s; }
#game-start-countdown .rotated-line-box div {top: 50%; width: 100%; height: 100%; border: 3px solid #fff; box-sizing: border-box; border-radius: 100px; }
#game-start-countdown .rotated-line-box:nth-child(1) div {left: -50%; border-color: #0075d9; }
#game-start-countdown .rotated-line-box:nth-child(2) div {left: -50%; border-color: #ff0000; }
.countdown-value {opacity: 0; font-size: 120px; color: #fff; text-align: center; transform: translate(-50%,-50%); }
.vis .countdown-value {opacity: 0; animation: countdown-value .9s forwards ease-out; }
.vis #countdown3 {animation-delay: 0s; }
.vis #countdown2 {animation-delay: 1s; }
.vis #countdown1 {animation-delay: 2s; }
.vis #countdownGO {animation-delay: 3s; }

@keyframes countdown-rotate {
	0% {transform: rotate(0deg); }
	50% {transform: rotate(360deg); }
	100% {transform: rotate(360deg); }
}
@keyframes countdown-value {
	0% {opacity: 1; transform: translate(-50%,-50%); }
	100% {opacity: 0; transform: translate(-50%,-50%) scale(1.3,1.3); }
}


.tl {position: absolute; opacity: 0; /*transform: rotate(-.1deg);*/ }
.tl img {position: absolute; transform: translate(-50%,-50%); }
#tl11 img {transform: translate(-49%, -50%); }
#tl13 img {transform: translate(-50%, -49.1%); }
#tl28 img {transform: translate(-50.1%, -49.1%); }
#tl31 img {transform: translate(-49.5%, -47.8%); }
#tl36 img {transform: translate(-50%, -49%); }
#tl42 img {transform: translate(-50%, -48%); }
#tl48 img {transform: translate(-50%, -49.7%); }
#tl50 img {transform: translate(-50%, -49.1%); }
#tl65 img {transform: translate(-50%, -49.4%); }
.tl span {display: block; text-align: center; font-size: 10px; position: absolute; transform: translate(-50%,-50%); color: #fff; text-shadow: 0 0 1px rgba(0,0,0,1); }
/*.tl.vis {animation: wave 1s alternate infinite; }*/
.tl.vis {animation: fade 12s forwards; }
.tl.vis {opacity: 1; }
.tl.vis:nth-child(1n) .red, .tl.vis:nth-child(1n) .blue {opacity: 1; animation: wave 2s forwards infinite; }
.tl.vis:nth-child(2n) .red, .tl.vis:nth-child(2n) .blue {opacity: 1; animation: wave 2.6s forwards infinite; }
.tl.vis:nth-child(3n) .red, .tl.vis:nth-child(3n) .blue {opacity: 1; animation: wave 3.15s forwards infinite; }
.tl.vis .redl, .tl.vis .bluel {animation: light-fade 3s forwards ease-in; }
.tl.red .blue, .tl.red .bluel {display: none; }
.tl.blue .red, .tl.blue .redl {display: none; }
.tl.red.blue .blue, .tl.red.blue .bluel {display: none; }
.tl.red.blue .red, .tl.red.blue .redl {display: block; }
#cnt.end .tl.vis, #cnt.end .tl.vis .bluel, #cnt.end .tl.vis .redl {animation-play-state: paused; }

@keyframes wave {
	0% {opacity: .8; }
	30% {opacity: 1; }
	100% {opacity: .8; }
}

@keyframes blink {
	0% {opacity: .3; }
	100% {opacity: 1; }
}

@keyframes fade {
	0% {opacity: 0; }
	2% {opacity: 1; }
	100% {opacity: 0; }
}

@keyframes light-fade {
	0% {opacity: 1; }
	100% {opacity: 0; }
}
@keyframes stripe-fade-in {
	0% {opacity: 0; }
	100% {opacity: 1; }
}
@keyframes stripe-fade-out {
	0% {opacity: 1; }
	100% {opacity: 0; }
}
@keyframes pop {
	0% {transform: scale(.3,.3); }
	18% {transform: scale(1.5,1.5); }
	45% {transform: scale(.8,.8); }
	75% {transform: scale(1.1,1.1); }
	100% {transform: scale(1,1); }
}


.game-progress.stripes img {display: none; opacity: 0; }
.game-progress.stripes img.active {display: block; animation: stripe-fade-in 1.5s forwards cubic-bezier(.3,0,.7,1); }

.red-text {color: #f1005d; }
.blue-text {color: #00bef3; }

.score-box {position: absolute; top: 72px; width: 466px; height: 172px; box-sizing: border-box; transform-origin: center top; }
.score-box  div {position: absolute; left: 82px; }
.score-box .player {top: 20px; font-size: 52px; }
.score-box .score {top: 99px; font-size: 32px; }
#red-score {left: 72px; background: url(bg/score-red.png) no-repeat 0 0; }
#blue-score {right: 72px; background: url(bg/score-blue.png) no-repeat 0 0; }
#bonus {position: absolute; top: 72px; left: 50%; width: 196px; height: 116px; box-sizing: border-box; padding-top: 56px; background: url(bg/bonus-box.png) no-repeat 0 0; transform: translateX(-50%); color: #979797; text-align: center; font-size: 32px; }
#remaining-time {position: absolute; top: 214px; left: 50%; transform: translateX(-50%); width: 690px; height: 30px; border: 3px solid #717171; padding: 6px; box-sizing: border-box; }
#remaining-time div.stripe-box {position: relative; width: 100%; height: 100%; }
#remaining-time div div {position: absolute; left: 50%; transform: translateX(-50%); width: 0; height: 100%; background: #717171; }

.score-line {display: none; }
#redScoreLine {position: absolute; left: 0; width: 1px; height: 100%; background: red; }
#blueScoreLine {position: absolute; right: 0; width: 1px; height: 100%; background: blue; }

#round-result {opacity: 0; }
#cnt.end #round-result {opacity: 1; animation: pop .5s forwards; transition: .3s ease-out; }
#cnt.end-canceled #round-result {opacity: 0; animation: none; }
#round-result {position: absolute; width: 100%; top: 686px; text-align: center; }
#round-result .who-won-text {margin: 0 auto; font-size: 120px; font-weight: 700; }
#round-result.red-text .blue-won {display: none; }
#round-result.blue-text .red-won {display: none; }
#round-result .score {padding-top: 20px; font-size: 70px; }


.explosion {position: absolute; left: 50%; top: 50%; }
#intro .explosion {top: 40%; }
.explosion .etl {position: absolute; }
.explosion .trajectory {position: absolute; }
.explosion .trajectory img {opacity: 0; position: absolute; }
.explosion.explode .trajectory {animation: expand .3s forwards cubic-bezier(.2,0,.4,1); }
.explosion.explode .trajectory img {animation: particle .3s forwards linear; transition: .3s; transform: translate(-50%,-50%); }
/*
#explosion .etl0 .trajectory {animation-delay: 3s; }
#explosion .etl0 .trajectory img {animation-delay: 3s; }
#explosion .etl1 .trajectory {animation-delay: 3.3s; }
#explosion .etl1 .trajectory img {animation-delay: 3.3s; }
*/
@keyframes expand {
	0% {transform: translateX(0); }
	100% {transform: translateX(900px); }
}

@keyframes particle {
	0% {opacity: 0; }
	20% {opacity: 1; }
	100% {opacity: 0; }
}

/*
	S T A T S
*/
/*
.intro.stripes img {display: none; opacity: 0; }
*/
#stats .stripes {display: none; }
#stats.red #stripes-stats-red, #stats.blue #stripes-stats-blue {display: block; }
#stats .stripes img {opacity: 0; }
#stats.red .stripes img, #stats.blue .stripes img {transition: .5s cubic-bezier(.3,0,.7,1); }
#stats.show img {opacity: 1; }

#stats.red .stripes .stripe0 {transition-delay: .0s; }
#stats.red .stripes .stripe1 {transition-delay: .05s; }
#stats.red .stripes .stripe2 {transition-delay: .1s; }
#stats.red .stripes .stripe3 {transition-delay: .15s; }
#stats.red .stripes .stripe4 {transition-delay: .20s; }
#stats.red .stripes .stripe5 {transition-delay: .25s; }
#stats.red .stripes .stripe6 {transition-delay: .30s; }
#stats.red .stripes .stripe7 {transition-delay: .35s; }
#stats.red .stripes .stripe8 {transition-delay: .40s; }
#stats.red .stripes .stripe9 {transition-delay: .45s; }
#stats.red .stripes .stripe10 {transition-delay: .50s; }
#stats.red .stripes .stripe11 {transition-delay: .55s; }
#stats.red .stripes .stripe12 {transition-delay: .60s; }
#stats.red .stripes .stripe13 {transition-delay: .65s; }
#stats.red .stripes .stripe14 {transition-delay: .70s; }
#stats.red .stripes .stripe15 {transition-delay: .75s; }
#stats.red .stripes .stripe16 {transition-delay: .80s; }
#stats.red .stripes .stripe17 {transition-delay: .85s; }
#stats.red .stripes .stripe18 {transition-delay: .90s; }
#stats.red .stripes .stripe19 {transition-delay: .95s; }

#stats.blue .stripes .stripe19 {transition-delay: .0s; }
#stats.blue .stripes .stripe18 {transition-delay: .05s; }
#stats.blue .stripes .stripe17 {transition-delay: .1s; }
#stats.blue .stripes .stripe16 {transition-delay: .15s; }
#stats.blue .stripes .stripe15 {transition-delay: .20s; }
#stats.blue .stripes .stripe14 {transition-delay: .25s; }
#stats.blue .stripes .stripe13 {transition-delay: .30s; }
#stats.blue .stripes .stripe12 {transition-delay: .35s; }
#stats.blue .stripes .stripe11 {transition-delay: .40s; }
#stats.blue .stripes .stripe10 {transition-delay: .45s; }
#stats.blue .stripes .stripe9 {transition-delay: .50s; }
#stats.blue .stripes .stripe8 {transition-delay: .55s; }
#stats.blue .stripes .stripe7 {transition-delay: .60s; }
#stats.blue .stripes .stripe6 {transition-delay: .65s; }
#stats.blue .stripes .stripe5 {transition-delay: .70s; }
#stats.blue .stripes .stripe4 {transition-delay: .75s; }
#stats.blue .stripes .stripe3 {transition-delay: .80s; }
#stats.blue .stripes .stripe2 {transition-delay: .85s; }
#stats.blue .stripes .stripe1 {transition-delay: .90s; }
#stats.blue .stripes .stripe0 {transition-delay: .95s; }


#chart-add, #chart-results {opacity: 0; position: absolute; left: 527px; width: 864px; font-size: 41px; font-weight: 700; }
#stats.show #chart-add, #stats.show #chart-results {opacity: 1; transition: .5s ease-out; }
#stats.show #chart-add {transition-delay: 1s; }
#stats.show #chart-results {transition-delay: 1.3s; }
#chart-add {top: 124px; }
#chart-results {top: 527px; }
.red #chart-add, #chart-results .red {color: #ff83c4; }
.blue #chart-add, #chart-results .blue {color: #38c9fb; }
form, input, label {margin: 0; padding: 0; border: 0; }
.label {padding: 0 0 25px 5px; }
.field {position: relative; margin: 4px 0 39px 0; }
label {position: absolute; left: -190px; width: 150px; height: 85px; padding-top: 22px; text-align: right; }
input {display: block; width: 100%; height: 93px; box-sizing: border-box; padding: 0 20px; border: 0; line-height: 93px; color: black !important; font-family: Ladislav, Helvetica, Arial, Tahoma; font-size: 41px; font-weight: 700; }
.red input {background: url(bg/input-red.png) no-repeat 0 0; }
.blue input {background: url(bg/input-blue.png) no-repeat 0 0; }

#stats .player {clear: both; height: 76px; opacity: 0; }
#stats .player .nick {float: left; }
#stats .player .dots {float: left; width: auto; margin-left: 5px; }
#stats .player.winner .dots {display: none; }
#stats .player.red .dots {float: left; width: 30px; height: 100%; background: url(bg/dot-red.png) repeat-x 0 33px; }
#stats .player.blue .dots {float: left; width: 30px; height: 100%; background: url(bg/dot-blue.png) repeat-x 0 33px; }
#stats .player .points {float: right; }
#stats .player.winner .nick, #stats .player.winner .points {animation: blink .5s alternate infinite; }


/*


	C O N T R O L S  H E L P S 

*/
.controls {position: absolute; top: 990px; width: 100%; text-align: center; }
.controls.vis {transition: .3s ease-out; animation: blink 1.2s reverse .5s 3; }
.controls .key, .controls .key div {display: inline-block; }
.controls .key {margin: 0 30px; }
.controls .key-button {padding: 3px 10px; margin-right: 10px; background: #fff; color: #333; text-transform: uppercase; font-weight: 700; }
.controls .key-function {}


.test {display: none; }
#test {display: none; position: fixed; top: 0; left: 50%; transform: translateX(-50%); background: white; color: darkred; padding: 10px; }
#test2 {position: fixed; top: 50px; left: 50%; transform: translateX(-50%); background: white; color: darkred; padding: 10px; }
#test3 {position: fixed; top: 100px; width: 100%; box-sizing: border-box; background: white; color: darkred; padding: 10px; }
/*
#cnt.noTrans #scene0 *, #cnt.noTrans #scene1 *, #cnt.noTrans #scene2 *, #cnt.noTrans #scene3 *, #cnt.noTrans #scene4 * {-webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; }

#cnt.help #left, #cnt.help #right {display: none; }
*/