html, body {
	background-color: #000000;
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	font-family: 'Muli', sans-serif;
	color: #cccccc;
}

#container {
	width: 100%;
	height: 100%;
	padding: 1px 5px;
}

.quarter {
	width: calc(50% - 5px);
	float: left;
}

.stream {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border: 3px solid #000000;
}

.wrapper {
	padding-bottom: 56.55%;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.active {
	border: 3px solid #ff3333;
}

.title {
	background-color: #000000;
	opacity: 0.3;
	border-bottom-right-radius: 4px;
	padding: 0px 8px 5px 5px;
	color: #ffffff;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
}

.overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1500;
}

.live .overlay {
	cursor: pointer;
}

.offline {
	background-color: #111111;
}

.offline p {
	position: absolute;
	text-align: center;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;

}