website/_includes/index.css

/* Animation */

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Main */

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
html,
body {
	width: 100%;
	height: 100%;
}
body {
	background: #eee;
	color: #777777;
	font-family: montserratlight, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.000em;
	line-height: 1;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

::-moz-selection {
	background: rgba(0, 0, 0, .3);
}

::selection {
	background: rgba(0, 0, 0, .3);
}
h1,
h2 {
	color: #555;
	font-family: montserratbold, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 3.000em;
	font-style: normal;
	font-weight: normal;
	letter-spacing: 1px;
	margin: 0 0 0.438em 0;
	text-transform: uppercase;
}
a {
	color: #555;
	text-decoration: none;
}
a:hover,
a:focus {
	color: #767676;
}

/* Icons */

.logo:before {
	content: '\1F525';
}
.play:before {
	content: "\2139";
}
.downloads:before {
	content: "\2193";
}

/* Main */

.main {
	display: table;
	height: 100%;
	width: 100%;
}
.main-container {
	animation: fadein 1s;
	display: table-cell;
	vertical-align: middle;
	padding: 3.000em 4% 3.000em 12%;
	text-align: center;
}
.main p {
	margin: 0 0 1.875em 0;
	line-height: 1.6;
}

/* Navigation */

#navigation {
	background: #555;
	display: table;
	height: 100%;
	position: fixed;
	table-layout: fixed;
	text-align: center;
}
#navigation span {
	display: table-row;
}
#navigation a:before {
	font-family: 'icons';
}
#navigation a.logo {
	font-size: 3.250em;
	padding: 0.250em;
}
#navigation a {
	color: #eee;
	display: table-cell;
	font-size: 1.875em;
	padding: 0.875em;
	vertical-align: middle;
}
#navigation a:hover,
#navigation a:focus {
	color: #fff;
}

/* Buttons */

.button {
	background: #555;
	border-radius: 0.375em;
	color: #eee;
	cursor: pointer;
	display: inline-block;
	font-family: montserratregular, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.000em;
	margin: 0 0.313em 0 0.313em;
	padding: 0.938em;
	text-transform: uppercase;
}
.button:hover,
.button:focus {
	background: #767676;
	color: #eee;
}

/* Responsive Design */

@media (min-width: 0px) {
	html {
		font-size: 84%;
	}
}
@media (min-width: 100px) {
	html {
		font-size: 86%;
	}
}
@media (min-width: 200px) {
	html {
		font-size: 88%;
	}
}
@media (min-width: 300px) {
	html {
		font-size: 90%;
	}
}
@media (min-width: 400px) {
	html {
		font-size: 92%;
	}
}
@media (min-width: 500px) {
	html {
		font-size: 94%;
	}
}
@media (min-width: 600px) {
	html {
		font-size: 96%;
	}
}
@media (max-width: 600px) {
	#navigation {
		height: auto;
		width: 100%;
	}
	#navigation span{
		display: table-cell;
	}
	#navigation a {
		display: inline-block;
	}
	.main-container {
		padding: 8.125em 4% 3.000em 4%;
	}
}
@media (min-width: 700px) {
	html {
		font-size: 98%;
	}
}
@media (min-width: 800px) {
	html {
		font-size: 100%;
	}
}
@media (min-width: 900px) {
	html {
		font-size: 102%;
	}
}
@media (min-width: 1000px) {
	html {
		font-size: 104%;
	}
}
@media (min-width: 1100px) {
	html {
		font-size: 106%;
	}
}

@media (min-width: 1200px) {
	html {
		font-size: 108%;
	}
}
@media (min-width: 1300px) {
	html {
		font-size: 110%;
	}
}
@media (min-width: 1400px) {
	html {
		font-size: 112%;
	}
}
@media (min-width: 1500px) {
	html {
		font-size: 114%;
	}
}
@media (min-width: 1600px) {
	html {
		font-size: 116%;
	}
}
@media (min-width: 1700px) {
	html {
		font-size: 118%;
	}
}
@media (min-width: 1800px) {
	html {
		font-size: 120%;
	}
}
@media (min-width: 1900px) {
	html {
		font-size: 122%;
	}
}
@media (min-width: 2000px) {
	html {
		font-size: 124%;
	}
}
@media (min-width: 2100px) {
	html {
		font-size: 126%;
	}
}
@media (min-width: 2200px) {
	html {
		font-size: 128%;
	}
}
@media (min-width: 2300px) {
	html {
		font-size: 130%;
	}
}
@media (min-width: 2400px) {
	html {
		font-size: 132%;
	}
}
@media (min-width: 2500px) {
	html {
		font-size: 134%;
	}
}
@media (min-width: 2600px) {
	html {
		font-size: 136%;
	}
}
@media (min-width: 2700px) {
	html {
		font-size: 138%;
	}
}
@media (min-width: 2800px) {
	html {
		font-size: 140%;
	}
}
@media (min-width: 2900px) {
	html {
		font-size: 142%;
	}
}
@media (min-width: 3000px) {
	html {
		font-size: 144%;
	}
}
@media (min-width: 3100px) {
	html {
		font-size: 146%;
	}
}
@media (min-width: 3200px) {
	html {
		font-size: 148%;
	}
}
@media (min-width: 3300px) {
	html {
		font-size: 150%;
	}
}
@media (min-width: 3400px) {
	html {
		font-size: 152%;
	}
}
@media (min-width: 3500px) {
	html {
		font-size: 154%;
	}
}
@media (min-width: 3600px) {
	html {
		font-size: 156%;
	}
}
@media (min-width: 3700px) {
	html {
		font-size: 158%;
	}
}
@media (min-width: 3800px) {
	html {
		font-size: 160%;
	}
}
@media (min-width: 3900px) {
	html {
		font-size: 162%;
	}
}
@media (min-width: 4000px) {
	html {
		font-size: 164%;
	}
}
@media (min-width: 4100px) {
	html {
		font-size: 166%;
	}
}
@media (min-width: 4200px) {
	html {
		font-size: 168%;
	}
}
@media (min-width: 4300px) {
	html {
		font-size: 170%;
	}
}
@media (min-width: 4400px) {
	html {
		font-size: 172%;
	}
}
@media (min-width: 4500px) {
	html {
		font-size: 174%;
	}
}
@media (min-width: 4600px) {
	html {
		font-size: 176%;
	}
}
@media (min-width: 4700px) {
	html {
		font-size: 178%;
	}
}
@media (min-width: 4800px) {
	html {
		font-size: 180%;
	}
}
@media (min-width: 4900px) {
	html {
		font-size: 182%;
	}
}
@media (min-width: 5000px) {
	html {
		font-size: 184%
	}
}
@media (min-width: 5100px) {
	html {
		font-size: 186%;
	}
}