*
{
	margin:0;
	padding:0;
}

*
{
	margin:0;
	padding:0;
	font-family: monospace;
}

body 
{
	overflow: hidden;
	position: relative;
    background:#001114;
}

html, body, canvas {
	width:  100%;
	height: 100%;
	margin: 0;
  }

body pre 
{ 
	white-space: pre; 
	font-family: monospace; 
	float:left;
	width:44%;
	margin:1.5%;
	padding:1.5%;
	display:none;
}

#phaser
{
	height: 100%;
	display: flex;
}

#loader
{
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%)
}

.lds-ring {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
  }
  .lds-ring div {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 64px;
	height: 64px;
	margin: 8px;
	border: 8px solid #fff;
	border-radius: 50%;
	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	border-color: #fff transparent transparent transparent;
  }
  .lds-ring div:nth-child(1) {
	animation-delay: -0.45s;
  }
  .lds-ring div:nth-child(2) {
	animation-delay: -0.3s;
  }
  .lds-ring div:nth-child(3) {
	animation-delay: -0.15s;
  }
  @keyframes lds-ring {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
  }
  

canvas 
{-webkit-box-shadow: 0px 0px 33px 6px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 33px 6px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 33px 6px rgba(0,0,0,0.75);}

body pre.show
{
	display:block;
}

body pre.vals
{
	position: fixed;
	top:50px;
	left:50px;
}

body pre.switch
{
	position: fixed;
	top:50px;
	right:50px;
}

.stikala
{
	float:left;
	clear:both;
	margin:1.5%;
	padding:1.5%;
	width:94%;
	background:darkgray;
}

.stikala a
{
	float:left;
	display:block;
	color:white;
	background:darkblue;
	padding:15px;
	margin:20px;
	text-decoration: none;
}

.stikala a.active
{
	background:darkgreen;
}

.stikala input
{
	float:left;
	display:block;	
	padding:15px;
	margin:20px;
	width:200px;
}

.pause
{
	background-color: #44393b !important;
}

.pause.active
{
	background-color: #8c0517 !important;
}

video
{
	position: absolute;
	left:0;
	top:0;
	z-index: 1000;
}

.gumbi 
{
	/* display:none; */
	width:100%;
	position: absolute;
	bottom:0;
	height:170px;
	padding-left:40px;
	box-sizing: border-box;

}

.gumbi .sep
{
	width:2%;
	height:170px;
	float:left;
}

.gumbi .gumb 
{
	width:7%;
	box-sizing: border-box;
	margin: 10px 10px 0 0;
	border-radius: 3px;
	background:#dca779;
	height:147px;
	float:left;
	position:relative;
}

.gumbi .gumb .napis-on
{
	position: absolute;
	top:10px;
	left:20px;
	font-size:12px;
	font-family:arial;
	color:#00282f;
}

.gumbi .gumb .napis-top
{
	position: absolute;
	top:10px;
	left:0px;
	width:100%;
	text-align: center;
	font-size:12px;
	font-family:arial;
	color:#00282f;
}

.gumbi .gumb .napis-bottom
{
	position: absolute;
	bottom:25px;
	left:0px;
	width:100%;
	text-align: center;
	font-size:12px;
	font-family:arial;
	color:#00282f;
}

.gumbi .gumb .napis-off
{
	position: absolute;
	top:10px;
	right:20px;
	font-size:12px;
	font-family:arial;
	color:#00282f;
}

.gumbi .gumb .napis
{
	position: absolute;
	bottom:5px;
	left:0;
	width:100%;
	text-align: center;
	font-size:18px;
	font-weight: 500;
	font-family:arial;
	color:#00282f;
}

.gumbi .gumb .btn 
{
	width:60%;
	margin:30px auto 0;
}

.gumbi .gumb .btn.joy 
{
	width:30%;
}

.gumbi .gumb button.left
{
    left: 0;
}

.gumbi .gumb button.right
{
    right: 0;
}
.gumbi .gumb button 
{
	cursor: pointer;
	outline:none;
	width:50%;
	height:50%;
	border:0;
	background:0;
	position: absolute;
    top: 36px;
}

.gumbi .gumb button.joy 
{
	width:100%;
}

.gumbi .gumb button.joy.top 
{
	top:0px;
	height:45%;
}

.gumbi .gumb button.joy.bottom 
{
	bottom: 11px;
    top: auto;
}




.btn-center {max-width:204px; max-height:205px; }
.btn-center::after {content: '\00a0';display: inline-block; width:204px; height:205px; background-position: 49.69400244798042% 2.3255813953488373%;background-size: 500.4901960784314% 120.97560975609755%;background-image: url(btns-sprite.png);padding: 0; }
div.btn-center::after {max-width:204px; width:100%;height:0;padding: 0 0 100.49019607843137% 0;}
.btn-left {max-width:204px; max-height:205px; }
.btn-left::after {content: '\00a0';display: inline-block; width:204px; height:205px; background-position: 74.7858017135863% 2.3255813953488373%;background-size: 500.4901960784314% 120.97560975609755%;background-image: url(btns-sprite.png);padding: 0; }
div.btn-left::after {max-width:204px; width:100%;height:0;padding: 0 0 100.49019607843137% 0;}
.btn-right {max-width:204px; max-height:205px; }
.btn-right::after {content: '\00a0';display: inline-block; width:204px; height:205px; background-position: 99.87760097919217% 2.3255813953488373%;background-size: 500.4901960784314% 120.97560975609755%;background-image: url(btns-sprite.png);padding: 0; }
div.btn-right::after {max-width:204px; width:100%;height:0;padding: 0 0 100.49019607843137% 0;}
.joy-bottom {max-width:134px; max-height:246px; }
.joy-bottom::after {content: '\00a0';display: inline-block; width:134px; height:246px; background-position: 0.11273957158962795% 50%;background-size: 761.9402985074627% 100.8130081300813%;background-image: url(btns-sprite.png);padding: 0; }
div.joy-bottom::after {max-width:134px; width:100%;height:0;padding: 0 0 183.5820895522388% 0;}
.joy-center {max-width:134px; max-height:232px; }
.joy-center::after {content: '\00a0';display: inline-block; width:134px; height:232px; background-position: 30.552423900789176% 6.25%;background-size: 761.9402985074627% 106.89655172413794%;background-image: url(btns-sprite.png);padding: 0; }
div.joy-center::after {max-width:134px; width:100%;height:0;padding: 0 0 173.13432835820896% 0;}
.joy-top {max-width:134px; max-height:235px; }
.joy-top::after {content: '\00a0';display: inline-block; width:134px; height:235px; background-position: 15.332581736189402% 7.6923076923076925%;background-size: 761.9402985074627% 105.53191489361703%;background-image: url(btns-sprite.png);padding: 0; }
div.joy-top::after {max-width:134px; width:100%;height:0;padding: 0 0 175.37313432835822% 0;}