@font-face {
	font-family: 	"Monaco";
	src: 			local("Monaco"), url ('https://github.com/todylu/monaco.ttf/blob/master/monaco.ttf') format("truetype");
}

@font-face {
    font-family: 'FiraSans'; /*a name to be used later*/
    src: url('/res/font/firasans/OTF/FiraSans-Regular.otf'); /*URL to font*/
}

@font-face {
    font-family: 'FiraSans Light'; /*a name to be used later*/
    src: url('/res/font/firasans/OTF/FiraSans-Light.otf'); /*URL to font*/
}

@font-face {
    font-family: 'Kontra'; /*a name to be used later*/
    src: url('/res/font/kontrapunkt/KontrapunktBold.otf'); /*URL to font*/
}

@font-face {
    font-family: 'Kontra Light'; /*a name to be used later*/
    src: url('/res/font/kontrapunkt/KontrapunktLight.otf'); /*URL to font*/
}

@font-face {
    font-family: 'Kontra Italic'; /*a name to be used later*/
    src: url('/res/font/kontrapunkt/KontrapunktLightItalic.otf'); /*URL to font*/
}

body {
	background-color: #000;
	font-family: 	"FiraSans";
	font-size: 		20px;
	letter-spacing: 1px;
	margin: 		0;
	color: #DFD2D0;
}

#bg {
	position: fixed;
	width: 100%;
	height: 100%;
	background-image: url('/res/img/hexpattern.jpg');
	background-repeat: repeat;
	background-size: 539px 313px;
	background-blend-mode: darken;
	background-color: #222;
}

a, a:visited {
	color: #50a0f0;
	text-decoration: none;
}

a:hover {
	color: #50f0a0;
}

blockquote {
	color: #101010;
	font-size: 22px;
	font-style: italic;
}

h1,h2,h3 {
	font-family: "Kontra";
}

.header {
	margin: 		0px auto;
}

.header a {
	text-decoration: none;
}

#logoContainer {
	position: fixed;
	text-decoration: none;
}

#logoContainer:hover .social-element {
	left: 0px;
}

#homeLogo {
	color: #aaa;
	text-align: center;
	top: 0px;
	left: 0px;
	height: 30px;
	width: 30px;
	padding: 20px;
	font-size: 24px;
}

.social-element {
	position: inherit;
	margin: 15px;
	width: 100px;
	left: -100px;
	transition: all 0.25s ease-in-out;
}

#homeLogo:hover {
	background: #000;
	color: #fff;
}

.nav {
	height: 		73px;
	margin: 		0;
	margin-left: 	40px;
}

.nav ul {
	font-family:	"FiraSans";
	list-style: 	none;
	height: 		100%;
	margin: 		0;
	padding: 		0px;
}

.nav li {
	color: 			#ccc;
	position: 	relative;
	float: 		left;
	width: 		130px;
	height: 	30px;
	padding: 	20px 20px;
	text-align: center;
	font-size: 	24px;
	font-weight:100;
	margin-left:0px;
	margin-bottom:0px;
}

.nav li:hover {
	color: 	#fff;
	background: 	#3d3d3d;
}


.container {
	position: 		relative;
	width: 			100%;
	height: 		100%;
	min-height: 	600px;
	max-width: 		900px;
	margin: 		0px auto;
}

.inner-content {
	position: 	relative;
	width: 		90%;
	padding: 	50px 10% 100px 10%;
	float: 		left;
}

.overlay {
	color: #eee;
	margin: auto;
	position: absolute;
	top: 0;bottom: 0; /* Aligns Vertically - Remove for Horizontal Only */
	left: 0;right: 0;
 	padding: 15px;
	background-color: #444;
	width: 550px;
	height: 400px;
	border: 4px solid white;
	border-radius: 9px;
	overflow: auto;
}

#overlay_container {
	display: none;
	background-color: rgba(0,0,0,0.5);
	position: fixed;
	width: 100%;
	height: 100%;
	font-size: 12px;
	top: 0px;
	left: 0px;
}


.footer {
	clear: 			both;
	position: 		relative;
	bottom: 		0px;
	width: 			100%;
}

.footer-message {
	position: 	relative;
	text-align: center;
	color: 		#dedede;
	font-size: 	12px;
	width: 		350px;
	margin: 	10px auto;
}

.tweet-container {
	width: 500px;
	min-width: 220px;
	margin: 0 auto;
}