h2 {
	font-family: 'Fascinate Inline';
}

.clickable {
	cursor: pointer;
}

toggle.wide-toggle .toggle{
	min-width: 150px;
}

html, body{
	height: 100% !important;
	margin: 0;
	overflow: hidden !important;
	font-family: 'Orbitron';
}

body {
	background-image: url('../images/background.jpg');
}

body.navigator{
	padding-top: 55px;
}

body.qr {
	background-image: none;
}

.player {
	padding-top: 20px;
  height: 260px;
}

.left-controller {
	padding: 20px;
	height: 260px;
}

.right-controller {
	padding: 20px;
	height: 260px;
}

.program-card-container {
	width: 64px;
	position: relative;
	margin: 0 auto;
    display: block;
    clear: right;
}

@keyframes laser {
	0% { opacity: 0.5;}
	35% { opacity: 0.5;}
	40% { opacity: 1;}
	45% { opacity: 0.5;}
	55% { opacity: 0.5;}
	60% { opacity: 1;}
	65% { opacity: 0.5;}
	100% { opacity: 0.5;}
}

.laser-fire {
	z-index: 9;
	animation: laser;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

@keyframes blink {
  0% { opacity: 1;}
  50% { opacity: 0.5;}
  100% { opacity: 1;}
}

@keyframes blink-north {
  0% { opacity: 1; transform: translateY(0%); }
  50% { opacity: 0.5; transform: translateY(-25%); }
  100% { opacity: 1; transform: translateY(0%); }
}

@keyframes blink-east {
	0% { opacity: 1; transform: translateX(0%); }
  50% { opacity: 0.5; transform: translateX(25%); }
  100% { opacity: 1; transform: translateX(0%); }
}

@keyframes blink-south {
	0% { opacity: 1; transform: translateY(0%); }
  50% { opacity: 0.5; transform: translateY(25%); }
  100% { opacity: 1; transform: translateY(0%); }
}

@keyframes blink-west {
	0% { opacity: 1; transform: translateX(0%); }
  50% { opacity: 0.5; transform: translateX(-25%); }
  100% { opacity: 1; transform: translateX(0%); }
}

@keyframes rotatecwstart {
	0% { opacity: 1; transform: rotate(0deg); }
	100% { opacity: 0; transform: rotate(90deg); }
}

@keyframes rotatecwend {
	0% { opacity: 0; transform: rotate(-90deg); }
	100% { opacity: 1; transform: rotate(0deg); }
}

@keyframes rotatecwenddelayed {
	0% { opacity: 0; transform: rotate(-90deg); }
	50% { opacity: 0; transform: rotate(-90deg); }
	100% { opacity: 1; transform: rotate(0deg); }
}

@keyframes rotatecwmiddle {
	0% { opacity: 0; transform: rotate(-90deg); }
	50% { opacity: 1; transform: rotate(0deg); }
	100% { opacity: 0; transform: rotate(90deg); }
}

@keyframes rotateccwstart {
	0% { opacity: 1; transform: rotate(0deg); }
	100% { opacity: 0; transform: rotate(-90deg); }
}

@keyframes rotateccwend {
	0% { opacity: 0; transform: rotate(90deg); }
	100% { opacity: 1; transform: rotate(0deg); }
}

@keyframes rotatemovenorthcwstart {
	0% { opacity: 1; transform: rotate(0deg) translateY(100%); }
	100% { opacity: 0; transform: rotate(90deg) translateY(0%); }
}

@keyframes rotatemovenorthcwend {
	0% { opacity: 0; transform: rotate(-90deg) translateY(100%); }
	100% { opacity: 1; transform: rotate(0deg) translateY(0%); }
}

@keyframes rotatemovenorthccwstart {
	0% { opacity: 1; transform: rotate(0deg) translateY(100%); }
	100% { opacity: 0; transform: rotate(-90deg) translateY(0%); }
}

@keyframes rotatemovenorthccwend {
	0% { opacity: 0; transform: rotate(90deg) translateY(100%); }
	100% { opacity: 1; transform: rotate(0deg) translateY(0%); }
}

@keyframes rotatemoveeastcwstart {
	0% { opacity: 1; transform: rotate(0deg) translateX(-100%); }
	100% { opacity: 0; transform: rotate(90deg) translateX(0%); }
}

@keyframes rotatemoveeastcwend {
	0% { opacity: 0; transform: rotate(-90deg) translateX(-100%); }
	100% { opacity: 1; transform: rotate(0deg) translateX(0%); }
}

@keyframes rotatemoveeastccwstart {
	0% { opacity: 1; transform: rotate(0deg) translateX(-100%); }
	100% { opacity: 0; transform: rotate(-90deg) translateX(0%); }
}

@keyframes rotatemoveeastccwend {
	0% { opacity: 0; transform: rotate(90deg) translateX(-100%); }
	100% { opacity: 1; transform: rotate(0deg) translateX(0%); }
}

@keyframes rotatemovesouthcwstart {
	0% { opacity: 1; transform: rotate(0deg) translateY(-100%); }
	100% { opacity: 0; transform: rotate(90deg) translateY(0%); }
}

@keyframes rotatemovesouthcwend {
	0% { opacity: 0; transform: rotate(-90deg) translateY(-100%); }
	100% { opacity: 1; transform: rotate(0deg) translateY(0%); }
}

@keyframes rotatemovesouthccwstart {
	0% { opacity: 1; transform: rotate(0deg) translateY(-100%); }
	100% { opacity: 0; transform: rotate(-90deg) translateY(0%); }
}

@keyframes rotatemovesouthccwend {
	0% { opacity: 0; transform: rotate(90deg) translateY(-100%); }
	100% { opacity: 1; transform: rotate(0deg) translateY(0%); }
}

@keyframes rotatemovewestcwstart {
	0% { opacity: 1; transform: rotate(0deg) translateX(100%); }
	100% { opacity: 0; transform: rotate(90deg) translateX(0%); }
}

@keyframes rotatemovewestcwend {
	0% { opacity: 0; transform: rotate(-90deg) translateX(100%); }
	100% { opacity: 1; transform: rotate(0deg) translateX(0%); }
}

@keyframes rotatemovewestccwstart {
	0% { opacity: 1; transform: rotate(0deg) translateX(100%); }
	100% { opacity: 0; transform: rotate(-90deg) translateX(0%); }
}

@keyframes rotatemovewestccwend {
	0% { opacity: 0; transform: rotate(90deg) translateX(100%); }
	100% { opacity: 1; transform: rotate(0deg) translateX(0%); }
}

@keyframes movenorth {
	0% { transform: translateY(100%); }
	100% { transform: translateY(0%); }
}

@keyframes moveeast {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(0%); }
}

@keyframes movesouth {
	0% { transform: translateY(-100%); }
	100% { transform: translateY(0%); }
}

@keyframes movewest {
	0% { transform: translateX(100%); }
	100% { transform: translateX(0%); }
}

@keyframes crashnorth {
	0% { transform: translateY(0%); }
	25% { transform: translateY(-25%); }
	35% { transform: translateY(-19%); }
	45% { transform: translateY(-21%); }
	55% { transform: translateY(-12%); }
	65% { transform: translateY(-15%); }
	75% { transform: translateY(-6%); }
	85% { transform: translateY(-9%); }
	95% { transform: translateY(-1%); }
	100% { transform: translateY(0%); }
}

@keyframes crasheast {
	0% { transform: translateX(0%); }
	25% { transform: translateX(25%); }
	35% { transform: translateX(19%); }
	45% { transform: translateX(21%); }
	55% { transform: translateX(12%); }
	65% { transform: translateX(15%); }
	75% { transform: translateX(6%); }
	85% { transform: translateX(9%); }
	95% { transform: translateX(1%); }
	100% { transform: translateX(0%); }
}

@keyframes crashsouth {
	0% { transform: translateY(0%); }
	25% { transform: translateY(25%); }
	35% { transform: translateY(19%); }
	45% { transform: translateY(21%); }
	55% { transform: translateY(12%); }
	65% { transform: translateY(15%); }
	75% { transform: translateY(6%); }
	85% { transform: translateY(9%); }
	95% { transform: translateY(1%); }
	100% { transform: translateY(0%); }
}

@keyframes crashwest {
	0% { transform: translateX(0%); }
	25% { transform: translateX(-25%); }
	35% { transform: translateX(-19%); }
	45% { transform: translateX(-21%); }
	55% { transform: translateX(-12%); }
	65% { transform: translateX(-15%); }
	75% { transform: translateX(-6%); }
	85% { transform: translateX(-9%); }
	95% { transform: translateX(-1%); }
	100% { transform: translateX(0%); }
}

@keyframes fallnorth {
	0% { transform: translateY(0%) scale(1, 1); opacity: 1;}
	100% { transform: translateY(-100%) scale(0, 0); opacity: 1; }
}

@keyframes falleast {
	0% { transform: translateX(0%) scale(1, 1); opacity: 1; }
	100% { transform: translateX(100%) scale(0, 0); opacity: 1; }
}

@keyframes fallsouth {
	0% { transform: translateY(0%) scale(1, 1); opacity: 1; }
	100% { transform: translateY(100%) scale(0, 0); opacity: 1; }
}

@keyframes fallwest {
	0% { transform: translateX(0%) scale(1, 1); opacity: 1; }
	100% { transform: translateX(-100%) scale(0, 0); opacity: 1; }
}

@keyframes crush {
	0% { opacity: 1; transform: translateY(0%) scale(1, 1); }
	100% {opacity: 0; transform: translateY(50%) scale(1.5, 0); }
}

.piece.rotate-move-north-left-start {
	animation-name: rotatemovenorthccwstart;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	opacity: 0;
}

.piece.rotate-move-north-left-end {
	animation-name: rotatemovenorthccwend;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

.piece.rotate-move-north-right-start {
	animation-name: rotatemovenorthcwstart;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	opacity: 0;
}

.piece.rotate-move-north-right-end {
	animation-name: rotatemovenorthcwend;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

.piece.rotate-move-east-left-start {
	animation-name: rotatemoveeastccwstart;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	opacity: 0;
}

.piece.rotate-move-east-left-end {
	animation-name: rotatemoveeastccwend;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

.piece.rotate-move-east-right-start {
	animation-name: rotatemoveeastcwstart;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	opacity: 0;
}

.piece.rotate-move-east-right-end {
	animation-name: rotatemoveeastcwend;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

.piece.rotate-move-south-left-start {
	animation-name: rotatemovesouthccwstart;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	opacity: 0;
}

.piece.rotate-move-south-left-end {
	animation-name: rotatemovesouthccwend;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

.piece.rotate-move-south-right-start {
	animation-name: rotatemovesouthcwstart;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	opacity: 0;
}

.piece.rotate-move-south-right-end {
	animation-name: rotatemovesouthcwend;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

.piece.rotate-move-west-left-start {
	animation-name: rotatemovewestccwstart;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	opacity: 0;
}

.piece.rotate-move-west-left-end {
	animation-name: rotatemovewestccwend;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

.piece.rotate-move-west-right-start {
	animation-name: rotatemovewestcwstart;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	opacity: 0;
}

.piece.rotate-move-west-right-end {
	animation-name: rotatemovewestcwend;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

.piece.animate-rotate-cw-start {
	animation-name: rotatecwstart;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	opacity: 0;
}

.piece.animate-rotate-cw-end {
	animation-name: rotatecwend;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

.piece.animate-rotate-cw-end-delayed {
	animation-name: rotatecwenddelayed;
	animation-duration: 1s;
	animation-iteration-count: 1;
}

.piece.animate-rotate-cw-middle {
	animation-name: rotatecwmiddle;
	animation-duration: 1s;
	animation-iteration-count: 1;
	opacity: 0;
}

.piece.animate-rotate-ccw-start {
	animation-name: rotateccwstart;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	opacity: 0;
}

.piece.animate-rotate-ccw-end {
	animation-name: rotateccwend;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

.piece.move-north {
	animation-name: movenorth;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

.piece.move-east {
	animation-name: moveeast;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

.piece.move-south {
	animation-name: movesouth;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

.piece.move-west {
	animation-name: movewest;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

.piece.crash-north {
	animation-name: crashnorth;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

.piece.crash-east {
	animation-name: crasheast;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

.piece.crash-south {
	animation-name: crashsouth;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

.piece.crash-west {
	animation-name: crashwest;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

.piece.fall-north {
	animation-name: fallnorth;
	animation-duration: 1s;
	animation-iteration-count: 1;
	opacity: 0;
}

.piece.fall-east {
	animation-name: falleast;
	animation-duration: 1s;
	animation-iteration-count: 1;
	opacity: 0;
}

.piece.fall-south {
	animation-name: fallsouth;
	animation-duration: 1s;
	animation-iteration-count: 1;
	opacity: 0;

}
.piece.fall-west {
	animation-name: fallwest;
	animation-duration: 1s;
	animation-iteration-count: 1;
	opacity: 0;
}

.piece.animate-crushing {
	animation-name: crush;
	animation-duration: 1s;
	animation-iteration-count: 1;
	opacity: 0;
}

.blink {
	animation-name: blink;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.piece {
  z-index: 14;
}

.piece-north {
  z-index: 14;
  animation-name: blink-north;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.piece-east {
  z-index: 14;
  animation-name: blink-east;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.piece-south {
  z-index: 14;
  animation-name: blink-south;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.piece-west {
  z-index: 14;
  animation-name: blink-west;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.rotate90 {
	transform:rotate(90deg);
}

.rotate180{
	transform:rotate(180deg);
}

.rotate270{
	transform:rotate(270deg);
}

.col-center {
	float: none;
	margin-left: auto;
	margin-right: auto;
}

.vertical-center {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#qrcode img {
	width: 100%;
}

#qrcode-red {
	background-color: red;
}

#qrcode-red img {
	width: 100%;
	position: relative;
	top: 50%;
	transform: translate(0, 50%);
}

#qrcode-blue {
	background-color: blue;
}

#qrcode-blue img {
	width: 100%;
	position: relative;
	top: 50%;
	transform: translate(0, 50%);
}

.tile {
	background-color: black;
}

.tile:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.tile div{
	background-color: rgba(0,0,0,0);
}

.tile img{
	position: absolute;
	width: 100%;
}

.board .row{
	margin-left: 0;
	margin-right: 0;
}

.client-hamburger-menu {
	position: fixed;
	top: 20px;
	left: 20px;
}

.robot-icon {
	position: fixed;
	top: 20px;
	right: 20px;
}

.tile.col-xs-1 {
	padding-right: 0;
	padding-left: 0;
}

.well {
	height: 95px;
	padding: 5px;
}

.well.active-card-background {
	background-color: green;
}

.well.locked {
	background-color: red;
}

.well.extra-card-background {
  	background-color: grey;
}

.well.locked img {
	cursor: not-allowed;
}

.well.active-card-background img {
	cursor: grab;
	cursor: -webkit-grab;
}

.well.extra-card-background img {
	cursor: grab;
	cursor: -webkit-grab;
}

.well.active-card-background img:active {
	cursor: grabbing;
	cursor: -webkit-grabbing;
}

.well.extra-card-background img:active {
	cursor: grabbing;
	cursor: -webkit-grabbing;
}

.dragging {
	border-color: yellowgreen;
	border-width: 1px;
	border-style: dashed;
	z-index: 100;
}

.dragover {
	border-color: black;
}

.damage-number {
	position: absolute;
	top: 0;
	left: 40px;
}

.program-card {
	width: 38px;
	margin-top: 20px;
}

.server-initiative {
	position: absolute;
	top: -7px;
	right: 10px;
	color: rgb(224, 200, 15);
	display: inline;
	font-size: xx-small;
}

.active-card {
	border-style: solid;
	border-width: 2px;
	border-color: green;
	border-radius: 2px;
}

.card-locked {
	width: 15px;
	position: absolute;
	top: 25px;
	right: 23px;
}

.selected_tile {
	border: 3px inset white;
}

@keyframes scoring {
	0% { opacity: 0; transform: scale(0, 0);}
	10% { opacity: 1; transform: scale(0.2, 0.2);}
	15% { transform: scale(0.3, 0.3) rotate(90deg);}
	20% { transform: scale(0.4, 0.4) rotate(180deg);}
	25% { transform: scale(0.5, 0.5) rotate(270deg);}
	30% { transform: scale(0.6, 0.6) rotate(0deg);}
	35% { transform: scale(0.7, 0.7) rotate(90deg);}
	40% { transform: scale(0.8, 0.8) rotate(180deg);}
	45% { transform: scale(0.9, 0.9) rotate(270deg);}
	50% { transform: scale(1, 1) rotate(0deg);}
	60% { transform: scale(1.5, 1.5);}
	70% { transform: scale(1, 1);}
	80% { transform: scale(1.5, 1.5);}
	90% { transform: scale(1, 1);}
	100% { opacity: 0;}
}

.goal{
	opacity: 0;
	z-index: 50;
	display: block;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
}

.goal.score{
	animation-name: scoring;
	animation-duration: 4s;
	animation-iteration-count: 1;
	opacity: 0;
}

@keyframes shooting-panel {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes weapon-text {
	0% { opacity: 0; }
	50% { opacity: 0; }
	75% { opacity: 1; }
	88% { opacity: 0.8; }
	100% { opacity: 1; }
}

@keyframes weapon-text-laser-fire {
	0% { opacity: 0; transform: translate(-50%, -20%) rotate(90deg);}
	50% { opacity: 0; transform: translate(-50%, -20%) rotate(90deg); }
	100% { opacity: 1; transform: translate(100%, -20%) rotate(90deg); }
}

@keyframes robot-nick-left {
	0% { opacity: 0; }
	66% { transform: translate(-50%, 0); opacity: 0; }
	93% { transform: translate(10%, 0); opacity: 1; }
	96% { transform: translate(-5%, 0); }
	100% { trasform: translate(0, 0) }
}

@keyframes robot-nick-right {
	0% { transform: translate(50%, 0); opacity: 0; }
	80% { transform: translate(-10%, 0); opacity: 1; }
	90% { transform: translate(5%, 0); }
	100% { transform: translate(0, 0); }
}

.shooting-panel{
	opacity: 0;
	z-index: 50;
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: khaki;
}

.shooting-panel.shooting{
	opacity: 1;
	animation-name: shooting-panel;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

.shooting-panel.shooting .shooter .nick{
	animation-name: robot-nick-left;
	animation-duration: 1s;
	animation-iteration-count: 1;
}

.shooting-panel.shooting .text{
	animation-name: weapon-text;
	animation-duration: 2s;
	animation-iteration-count: 1;
}

.shooting-panel.shooting img.shooting-panel-laser{
	animation-name: weapon-text-laser-fire;
	animation-duration: 3s;
	animation-iteration-count: 1;
}

.shooting-panel.shooting .victim .nick{
	animation-name: robot-nick-left;
	animation-duration: 3s;
	animation-iteration-count: 1;
}


/*# sourceMappingURL=app.css.map*/