/* Copyright (c) 2018 Aviado Inc. All rights reserved. */

html, body {
	height: 100%;
}

body {
	font-size: 2vw;
	background-color: #B0B0B0;
}

* {
	margin: 0;
	padding: 0;
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;

	font-family: sans-serif;
	color: #303030;
}

.screen {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.scrollable {
	overflow-x: hidden;
	overflow-y: auto;
}

table.albums {
	table-layout: fixed;
	width: 100%;
	border-spacing: 1em;	
}

table.albums td {
    width: 20%;
    height: 9em;
}

div.image {
	background-size: contain;
	background-repeat: no-repeat;
}

div.slide {
	background-position: center top;
}

div.nav {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2.5em;
	background-position: center;
}

div.caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.5em;
	text-align: center;
}

div.title, div.home {
	position: absolute;
	bottom: 0.3em;
}

div.title>div, div.home>div {
	font-size: 75%;
}

div.caption, div.title>div, div.home>div {
	color: #F0F0F0;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

div.footer {
	position: absolute;
	bottom: 0.3em;
    left: 50%;
    transform: translateX(-50%);
}

div.footer>div.dot {
	margin: 0 0.7em;
	float: left;
	width: 0.7em;
	height: 0.7em;
	border: 1px solid #808080;
	border-radius: 50%;
	background-color: #C0C0C0;
}

div.footer>div.dot.selected {
	background-color: #404040;
}