@font-face {
	font-family: 'DarkMatter';
	src: url('../font/DarkMatter.ttf') format('truetype');
}
body {overflow:hidden;}


#plane {
	width:1000vw;
	height:1000vh;
}
#plane img {
	position:absolute;
	transform: translate(-50%,-50%);
	box-shadow:0 0 10px rgba(0,0,0,0.9);
	width: auto;
    max-width: 50vmax;
	max-height: 60vmin;
	min-height: 10vh;
	background-color:grey;
	cursor:pointer;
	transition: linear 0.1s;
}
#plane img:hover {
	margin: -4px 0 0 -4px;
	box-shadow:5px 5px 10px rgba(0,0,0,0.5);
}
#viewer {
	position:fixed;
    -webkit-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
}
#viewer.show {
	opacity:1;
}
#viewer.hide {
	opacity:0;
	pointer-events:none;
}
/* #view.hide #viewercache {pointer-events:none;} */
#viewercache {
	position:fixed;
	height:100%;
	width:100%;
	top:0;
	left:0;
	background-color:rgba(0,0,0,0.5);
}
#viewerimg {
	height:100%;
	pointer-events:pointer;
}
#viewer {
	position:fixed;
	height:100%;
	width:100%;
	top:0;
	left:0;
	text-align:center;
}
#viewtitle {
    display: table-cell;
    vertical-align: middle;
	/* font-family: 'DarkMatter'; */
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	background-color:black;
	color:white;
	font-size:6vmin;
	padding:2vmin;
	text-align:center;
    -webkit-transition: 0s linear;
    transition: 0s linear;
}
#viewtitle.off {
	opacity:0;
    -webkit-transition: 1s linear;
    transition: 1s linear;
}
#viewtitle.on {
	opacity:1;
}
#view{
	position: fixed;
	top:0;left:0;
	height: 100vh;
	width: 100vw;
    background-repeat: no-repeat;
    background-position: 50%;
	background-size: contain;
	display: none;
}
.show #view{
	display: block;
}

/*===============================================================
							ICONS
===============================================================*/
#home img{
	height:80px;
	padding:10px;
}
#icons{
	position: fixed;
    top: 0;
    left: 0;
    width: auto;
	height: auto;
}
#icons.open{
    width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.5);
}
.icon{
	width: 50px;
    height: 50px;
    border-radius: 10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-repeat: no-repeat;
    background-position: 50%;
	padding: 10px;
	cursor: pointer;
	margin:auto;
}
.icon.selected{
	background-color: black;
	padding-right: 24px;
}

#iconscont{
	position: absolute;
    font-size: 0;
}
#genrelist{
	position: absolute;
    top: 30px;
    left: 90px;
    background-color: black;
    border-radius: 10px;
    padding: 10px;
    max-width: 55vw;
    height: 80vh;
    overflow-y: auto;
    text-align: center;
	display: none;
}
#genrelist.open{
	display: block;
}

#titlehint{
	display: none;
	background-color: rgba(255,255,255,0.9);
	box-shadow: 1px 1px 2px grey;
	padding:4px;
	/* border-radius: 10px; */
	position: fixed;
	transform: translate(-50%,-100%);
	pointer-events: none;
}
#titlehint.active{
	display: inline-block;
}


.miniature{
	display: inline-block;
	width: 10vmin;
	height: 10vmin;
	min-width: 80px;
	min-height: 80px;
	cursor: pointer;
	margin: 1vmin;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50%;
	border-radius: 50%;
}

@media screen and (orientation: portrait) {
	#iconscont{
		width:100vw;
	}
	.icon{
		display: inline-block;
		padding-bottom: 15px;
		border-radius: 10px;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	.icon.selected{
		padding:10px;
		padding-bottom: 24px;
	}
	#genrelist{
		top: 100px;
		left: 30px;
		max-height: 55vh;
		height: auto;
		width: 80vw;
		max-width: none;
	}
	#genrelist.open{
		display: block;
	}

}

@media screen and (max-width: 400px) {

	.icon{
		height: 40px;
		width: 40px;
	}


}

@media screen and (max-height: 400px) {

	.icon{
		height: 40px;
	}


}

@media screen and (max-width: 320px) {
	#home img{
		padding:10px 4px;
	}
	.icon{
		height: 30px;
		width: 30px;
	}


}

@media screen and (max-height: 320px) {
	#home img{
		padding:4px 10px;
	}
	.icon{
		height: 30px;
	}


}