/*
 @import url('http://fonts.googleapis.com/css?family=Just+Another+Hand');
 @import url('http://fonts.googleapis.com/css?family=Lato');
 @import url('http://fonts.googleapis.com/css?family=Raleway');
 */

@font-face {
	font-family: JustAnotherHand;
	src: url(fonts/JustAnotherHand.ttf);
}
@font-face {
	font-family: Raleway;
	src: url(fonts/Raleway-Regular.ttf);
}

@font-face {
	font-family: Raleway;
	src: url(fonts/Raleway-Bold.ttf);
	font-weight: bold;
}

html {
	
	padding: 0px;
	margin: 0px;
}
body {
	height: 5900px;
	background-color: rgba(230, 220, 220, .05);
	padding: 0px;
	margin: 0px;
}

.sublogo-main {
	display: inline-block;
	font-size: 24px;
	font-family: "Just Another Hand"
}
.logo-main {
	display: inline-block;
	font-size: 36px;
	font-family: "Just Another Hand"
}

#header {
	position: relative;
	padding: 15px;
	top: 0px;
	width: 100%;
	background-color: rgba(120, 195, 205, .6);
	box-shadow: 1px 1px 4px rgba(0, 0, 0, .4);
}

#main {
	position: relative;
	min-height: 500px;
	width: 100%;
}

#main-col {
	box-sizing: border-box;
	position: relative;
	top: 0px;
	padding: 0px;
	height: 100%;
	margin: 0px auto;
	width: 800px;
	height: 500px;
}

.screen-holder {
	position: relative;
	margin: 3px;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, .4);
	background-color: rgba(250, 255, 255, .3);
	width: 640px;
	height: 480px;
}

.screen {
	width: 100%;
	height: 100%;
}

.p5-holder {
	position: absolute;
}

.three-holder {
	position: absolute;
}