:root {
	--primary__color: #bbb;
	--secondary__color: #808080;
	--text__color: #bbb;
	--time__color: #fff;

	--bg__color: #000;
	/*--bg__image: url('../img/bg.png');*/

	--btn-primary__bg: var(--primary__color);
	--btn-primary__border: 1px solid var(--btn-primary__bg);
	--btn-primary__color: #fefefe;
	--btn-primary__hover__bg: var(--btn-primary__color);
	--btn-primary__hover__border: 1px solid var(--btn-primary__color);
	--btn-primary__hover__color: var(--btn-primary__bg);

	--session__bg: var(--secondary__color);
	--session__border: 1px solid var(--secondary__color);
	--session__color: #000;
	--session__active__bg: var(--primary__color);
	--session__active__color: var(--secondary__color);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;

	color: var(--text__color);
	font-family: Roboto, Arial;
}

.wrapper {
	position: relative;
	width: 1080px;
	height: 1920px;
	padding: 250px 40px 150px 40px;
	margin-left: auto;
	margin-right: auto;

	background: var(--bg__image) no-repeat top center var(--bg__color);
}

#time {
	position: absolute;
	top: 175px;
	right: 0;
	left: 0;
	padding-left: 40px;
	padding-right: 40px;

	color: var(--time__color);
	font-size: 2em;
}
	#time .time {
		float: right;
	}

.container {
	width: 100%;
	height: 100%;
	/*display: flex;
	flex-direction: column;*/

	overflow: auto;
}

.screen {
	display: none;
	/*flex: 1 0 auto;*/
}

.screen.screen1 {
	/*display: flex;*/
	display: block;
}

.content {
	display: flex;
	/*flex: 1 0 auto;*/
	flex-direction: column;
}

.btn-primary {
	-webkit-appearance: none;
	-moz-appearance: none;
	display: inline-block;
	background-color: var(--btn-primary__bg);
	border: var(--btn-primary__border);
	font-size: 0.875rem;
	font-weight: bold;
	color: var(--btn-primary__color);
	text-align: center;
	text-transform: uppercase;
	vertical-align: middle;
	border-radius: 3px;
	padding: 10px 1rem;
	margin: 0 0 0 0;
	transition: background-color 0.25s ease-out, color 0.25s ease-out;
	cursor: pointer;
}
	.btn-primary:hover {
		background-color: var(--btn-primary__hover__bg);
		border: var(--btn-primary__hover__border);
		color: var(--btn-primary__hover__color);
	}

label {
	font-weight: 700;
}

h1 {
	margin: 1rem 0;

	font-size: 2em;
	line-height: 1.3em;

	color: var(--secondary__color);
}
	h1:first-child {
		margin-top: 0;
	}
	.screen.screen1 h1 {
		font-size: 2.5em;
		text-align: center;
	}

a {
	color: var(--secondary__color);
	text-decoration: none;
}

.session {
	font-size: 2em;
	background-color: var(--session__bg);
	border: var(--session__border);
	color: var(--session__color);
}
	.session.active {
		background-color: var(--session__active__bg);
		color: var(--session__active__color);
	}

.session-time,
.session-body {
	padding: 0.75em;
}

.session-time {
	float: left;
	width: 205px;
}

/* Footer Navigation */
.footer-navigation > * {
	display: inline-block;
	margin-left: 15px;
}
.footer-navigation > *:first-child {
	margin-left: 0;
}
.footer-navigation button {
	padding: 1em;
	background-color: var(--btn-primary__bg);
	border: 0;
	color: var(--btn-primary__color);
	font-size: inherit;
}
.footer-navigation button svg {
    height: 16px;
    margin-right: 10px;
    fill: white;
}
.footer-navigation button * {
    vertical-align: middle;
}