@font-face {
	font-family: ProximaNovaLight;
	src: url("/static/fonts/proxima-nova/ProximaNova-Light.otf");
}
/*
@font-face {
	font-family: ProximaNova;
	src: url("/static/fonts/proxima-nova/ProximaNova-Regular.otf");
}

@font-face {
	font-family: ProximaNovaSemibold;
	src: url("/static/fonts/proxima-nova/ProximaNova-Semibold.otf");
}

@font-face {
	font-family: ProximaNovaBold;
	src: url("/static/fonts/proxima-nova/ProximaNova-Bold.otf");
}
*/

body, html, #page-el, .index-page-component, .stream-viewer-component, .stream-viewer-component canvas {
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	padding: 0;
}
body, html, div, p, canvas {
	margin: 0;
	border: 0;
	padding: 0;
}

body {
	font-family: sans-serif;
	color: white;
	background-color: #34495e;
}

@-moz-keyframes spin {
	from { -moz-transform: rotate(0deg); }
	to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

.icon-spin {
	-webkit-animation-name: spin;
	-webkit-animation-duration: 4000ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: spin;
	-moz-animation-duration: 4000ms;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-ms-animation-name: spin;
	-ms-animation-duration: 4000ms;
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function: linear;
	animation-name: spin;
	animation-duration: 4000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.thin-button {
	font-family: ProximaNovaLight;
	font-size: 16px;
	line-height: 14px;
	padding: .85rem 1rem .7rem 1rem;
	letter-spacing: .07em;
	color: white;
	border: solid 1px #b6bbcc;
	border-radius: 25px;
	outline: 0 !important;
	background-color: #2d3e50;
}

font-family: ProximaNovaLight;
font-size: 16px;
line-height: 14px;
padding: .85rem 1rem .7rem 1rem;
letter-spacing: .07em;
color: white;
border: solid 1px #b6bbcc;
border-radius: 25px;
outline: 0 !important;
background-color: #2d3e50;

.stream-viewer-component {
	position: relative;
	background-color: #34495e;
	color: white;
}
.stream-viewer-component .message {
	font-family: ProximaNovaLight;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.stream-viewer-component .message h1 {
	font-size: 32px;
}
.stream-viewer-component .message .button {
	font-size: 32px;
}
.stream-viewer-component .spinner {
	width: 60px;
	height: 60px;
	color: black;
}

.stream-viewer-component canvas {
	background-color: #34495e;
	color: white;
	width: 1px;
	height: 1px;
}
.stream-viewer-component .show-vr-el {
	position: absolute;
	bottom: 15px;
	right: 15px;
	color: white;
}