/* USING CUSTOM FONTS */

@font-face { font-family: "brownstdlight"; src: url("../fonts/brown.std.light.otf"); }
@font-face { font-family: "brownstdreg"; src: url("../fonts/brown.std.regular.otf"); }
@font-face { font-family: "brownstdbold"; src: url("../fonts/brown.std.bold.otf"); }

h1 { font: normal 36px "brownstdbold"; }
h2 { font: normal 26px "brownstdreg"; }
h3 { font: normal 16px "brownstdlight"; }


/* defaults so we can see what we're doing */
/* #foreground { background: rgba(0,255,0,0.2); }*/
/* #background { background: rgba(0,0,255,0.2); }*/


/* elegantly fade in our content once everything has loaded */
body { background: black; }
.overlapper { display: none; }


/* ----------------------------------------
	Global Styles
---------------------------------------- */

.circle { border-radius: 50%; }


/* ----------------------------------------
	Page 01
---------------------------------------- */

#page-01 #background {
	background: url('../assets/demo-poster.png');
	background-size: cover;
	background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#page-01 .circle {
	width: 300px;
	height: 300px;
	background: yellow;
	position: absolute;
	bottom: 10%;
	right: 10%;
}

#page-01 .text {
	position: absolute;
	margin: auto;
	height: 1em;
	top: 0; left: 0; right: 0; bottom: 0;
	text-align: center;
	font-size: 100px;
}