@import url('http://fonts.googleapis.com/css?family=Lobster');

html {font-size: 1em;}

body {
	overflow:hidden; 		/* needed to eliminate scrollbars caused by the background image */
	padding:0;margin:0;		/* necesarry for the raster to fill the screen */
	height:100%;width:100%;
	
	font-family: 'Lobster', cursive;
	font-weight: 400;
	line-height: 1.45;
	color: #aaa;
}

#bgimg {
	position:absolute;
	z-index: -1;
}

#realBody{
	position:absolute;
	margin: 0;
	padding: 60px 0 0 0;
	z-index: 5;				/* Place the new body above the background image */
	overflow:auto; 			/* restore scrollbars for the content */
	height:100%;width:100%;	/* Make the new body fill the screen */
	background: url('../img/raster.png'); /* this is just a fancy raster, you can remove it; I kinda like it though */
}

#exampleDiv {
	width:100%;
	background:#000;
	position:absolute;
	top: 50px;
	text-align:center;
	padding:10px 0;
}

	#exampleDiv a {
		color:#fff;
		font-family:Verdana;
		font-size:12px;
		text-decoration:none;
	}

	#exampleDiv a:hover {
		background:#fff;
		color:#000;
	}

p {margin-bottom: 1.3em;}

h1 {
  margin-top: 25;
  font-size:6vw;
  text-align:center;
}

.shadow {
  color: white;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);

h2 {font-size: 4.236em;}

h3 {font-size: 2.618em;}

h4 {font-size: 1.618em;}

small, .font_small {font-size: 0.618em;}

.parent-div {
  background-color:#333;
  /* Center Div */
  display:block;
  margin: 0 auto;
}
.text {
  font-size:6vw;
  color:#CFF;
  text-align:center;
}