body {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-color: #999999;
}

a {
	font-family: 'Archivo Black', sans-serif;
	text-decoration: none;
	color: #000
}

.live h1 {
	font-family: 'Archivo Black', sans-serif;
	text-decoration: none;
	color: #000
}

.live-info {
	overflow-y: scroll;
}

.live-info a {
	transition: all .2s ease-in-out;
}

.live-info a:hover {
	color: #EEE;
}

#container {
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow: hidden;
}

.left, .right {
	position: absolute;
	height: 100vh;
	overflow-y: scroll;
}

.left {
	height: 100%;
	width: 44%;
	left: 3%;
	right: 3%;
	background-color: #999999;
}

.right {
	text-align: center;
	width: 50%;
	left: 50%;
	right: 0;
	margin: auto;

	background-color: #111111;
}

.left-cards {
	height: 100%;
	width: 90%;
	left: 5%;
	right: 5%;
}

.set1, .set2, .set3, .set4 {
	position: absolute;
	width: 25%;
	height: 96%;
	top: 2%;
	bottom: 2%;
}

.set1 {
	left: 10%;
}

.set2 {
	left: 31%;
}

.set3 {
	left: 52%;
}

.set4 {
	left: 73%;
}

.card1, .card2, .card3, .card4,
.card5, .card6, .card7, .card8,
.card9, .card10, .card11, .card12,
.card13, .card14, .card15, .card16 {
	position: absolute;
	max-height: 24%;
	max-width: 80%;
	background-repeat: no-repeat;
	transition: all .2s ease-in-out;
	cursor: pointer;
}

.card1, .card5, .card9, .card13 { top: 0%; }

.card2, .card6, .card10, .card14 { top: 25%; }

.card3, .card7, .card11, .card15 { top: 50%; }

.card4, .card8, .card12, .card16 {top: 75%;}

.card1:hover, .card2:hover, .card3:hover, .card4:hover,
.card5:hover, .card6:hover, .card7:hover, .card8:hover,
.card9:hover, .card10:hover, .card11:hover, .card12:hover,
.card13:hover, .card14:hover, .card15:hover, .card16:hover {
	filter: invert(100%);
}

.card-right, .noise {
	position: absolute;
	height: 60%;
	top: 8%;
	left: 0;
	right: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.card-right {
	background-image: url(https://dl.dropbox.com/s/bq4urxbehbr8ke8/cover.jpg?dl=0);
}

.noise {
	display: none;
	opacity: .25;
}

.card-info {
	display: inline-block;
	position: absolute;
	width: 90%;
	height: 20%;
	left: 5%;
	right: 5%;
	top: 75%;

	text-align: center;
	font-family: 'Archivo Black', sans-serif;
	font-size: .75em;
	color: #FFF;
	line-height: 1;
}

.card-info a { color: #FFF; }

.card-info a:hover {
	color: #999;
	transition: all .2s ease;
}

.stream {
	position: absolute;
	top: 2%;
	right: 2%;

	font-family: 'Archivo Black', sans-serif;
	font-size: .75em;
	color: #FFF;
}

.social-links {
	color: #000;
	text-align: left;
}

.social-links p {
	display: inline-block;
}

.mailer {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.mail-popout {
	opacity: .7;
	background-color: #000000;
	color: #eee;
	position: fixed;
	display: inline-block;
	height: 100%;
	width: 100%;
	text-align: center;
	display: none;
}

.mail-x {
	position: fixed;
	font-size: 5em;
	font-family: 'Archivo Black', sans-serif;
	top: 2%;
	right: 2%;
	color: #FFF;
	cursor: pointer;
	transition: all .2s ease;
}

.mail-x:hover {
	color: #333;
}

#subscribe, #submit, #mce-MMERGE4, .country {

	white-space: nowrap;
	display: inline-block;
	font-size: 1em;
	outline: none;
	border: none;
	font-family: 'Archivo Black', sans-serif;
	background-color: transparent;
	color: #eee;

	-webkit-border-radius: 0;
	border-radius: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}

#subscribe {
	border-bottom: 1px solid #FFF;
}

#submit {
	border-bottom: 1px solid #FFF;
	border-top: 1px solid transparent;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	cursor: pointer;
}

#mce-MMERGE4 {
	text-align: center;
	border: 1px solid #FFF;
}

#submit:hover {
	border: none;
	transition: all .2s ease;

	border: 1px solid #FFF;
}

.fa {
	color: #000;
}

.fa:hover {
	transition: all .2s ease;
	color: #EEE;
}

.stream .fa {
	color: #FFF;
}

.stream .fa:hover {
	transition: all .2s ease;
	color: #999;
}

.nav {
	position: fixed;
	-webkit-transform: rotate(90deg);
	-webkit-transform-origin: 0% 100%;
	-moz-transform: rotate(90deg);
	-moz-transform-origin: 0% 100%;
	transform: rotate(90deg);
	transform-origin: 0% 100%;
	left: 1%;
	width: 100%;
}

.home-button, .about-button, .live-button, .mail-button {
	display:inline;
	font-family: 'Archivo Black', sans-serif;
	cursor: pointer;
	transition: all .2s ease;
}

.social-links {
	display: inline;
}

.live {
	display: none;
	position: absolute;
	line-height: 1;
	left: 16%;
	top: 4%;
}

.home-button:hover, .about-button:hover, .live-button:hover, .mail-button:hover {
	color: #FFF;
}

@media only screen 
and (min-device-width: 1px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
	.left {
		width: 100%;
		height: 50%;
		top: 0%;
		left: 0%;
	}

	.right {
		width: 100%;
		height: 50%;
		top: 50%;
		left: 0%;
	}

	#subscribe, #submit, #mce-MMERGE4, .country {
		font-size: .8em;
		display: block;
	}

	.mailer {
		width: 75%;
		text-align: center;
		left: 0;
		right: 0;
		margin: auto;
	}

	.nav {
		font-size: .5em;
	}

	.social-links {
		position: fixed;
	}

	.card-right, .noise {
		top: 2%;
	}

	.card-info {
		top: 65%;
		font-size: .6em;
	}
}