body {
	margin: 0;
	overflow: hidden;
	background-color: #222;
}

a {
	text-decoration: none;
	opacity: 0.7;
	color: #666666;
	transition: opacity 0.3s;
}

a:hover {
	opacity: 1;
}

#ui.state-0 .btn-info a {
	color: #666666;
}

#ui.state-1 .btn-info a {
	color: #666666;
}

#ui.state-2 .btn-info a {
	color: #7A7937;
}

#ui.state-0 .info a {
	color: #52daab;
}

#ui.state-1 .info a {
	color: #FC0E1D;
}

#ui.state-2 .info a {
	color: #7A7937;
}

#ui.state-knm .info a {
	color: #0ee7e6;
}

.btn-info {
	position: absolute;
	bottom: 20px;
	right: 20px;

	font-family: sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #CCCCCC;

	z-index: 999;
}

.btn-info a {
	padding: 10px;
}

.info {
	position: absolute;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    color: rgba(255, 255, 255, 0.3);
    height: 100%;
    font-size: 14px;
    font-family: sans-serif;
    display: flex;
	justify-content: center;
	align-items: center;
	transform: translate3d(100%, 0, 0);
	transition: transform 0.4s ease-in-out;
}

.info.open {
	transform: translate3d(0, 0, 0);
}

.info-wrapper {
	padding: 150px 140px 150px 160px;
}

.info .block {
	margin-top: 50px;
}
.info .block:nth-child(1) {
	margin-top: 0;
}

h3 {
	font-size: 13px;
	color: #999;
}

p {
	margin: 6px auto;
}

p.mobile { display: none; }
body.mobile p.desktop { display: none; }
body.mobile p.mobile { display: block; }

@media (max-width: 800px) {
	.info { width: 100%; background: black; }
	.info-wrapper { padding: 0; }
}

@media (max-height: 400px) {
	.info .block { margin: 10px 50px; float: left; }
}