* {
	box-sizing: border-box;
}

@keyframes slideUp{
	100% {-webkit-transform: translateY(0%)}
	0% {-webkit-transform: translateY(90%)}
}

@keyframes slideDown{
	100% {-webkit-transform: translateY(0%)}
	0% {-webkit-transform: translateY(-90%)}
}

@keyframes slideLeft{
	100% {-webkit-transform: translateX(0%)}
	0% {-webkit-transform: translateX(90%)}
}

@keyframes slideRight{
	100% {-webkit-transform: translateX(0%)}
	0% {-webkit-transform: translateX(-90%)}
}

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 0 0;
}

#canvaswrap{
	display: flex;
	justify-content: center;
	align-items: center;
}

#logocanvas {
    letter-spacing: -0.31em;
}

.slots {
	box-sizing: border-box;
	vertical-align: top;
	font-family: "Verdana";
	margin: 0;
	padding: 0;
	display:inline-block;
	text-align: center;
	border-radius: 0%;
	cursor: default;
	background-color: #fff;
	color: #F00;
}


.slotsRightSlide {
	-webkit-animation-name: slideRight;
	-webkit-animation-duration: 0.5s;
}

.slotsLeftSlide {
	-webkit-animation-name: slideLeft;
	-webkit-animation-duration: 0.5s;
}

.slotsDownSlide {
	-webkit-animation-name: slideDown;
	-webkit-animation-duration: 0.5s;
}

.slotsUpSlide {
	-webkit-animation-name: slideUp;
	-webkit-animation-duration: 0.5s;
}

.slotstrans {
	background-color: transparent;
}

.slots:hover {
	border: 6px solid rgba(255,255,255,0.3);
}

.filledSlot {
	background-color: #000;
	color: #000;
	cursor: default;
}

.emptySlot {
	background-color: #000;
	color: #000;
	visibility: hidden;
	cursor:default;
}

#progress {
	margin-top: 5px;
	text-align: center;
	line-height: 65%;
	letter-spacing: -1px;
	font-weight: bold;
	font-family: "Courier New";
	margin: 0 auto;
}

hr {
	margin: 0;
	width: 100%;
}


.menuButtons:hover {
	box-shadow: 0 0 3px #000000;
	cursor: pointer;
}

canvas {
  outline: none;
  border: none;
}