/* calvin c williams website stylesheet */

html, body {
	padding: 0;
	margin: 0;
	height: 100%;
}

body {
	background-color: #fff;
	color: #3c291f;
	font-family: "brandon-grotesque-n3", "brandon-grotesque", sans-serif;
	font-weight: 300;
}


h1, h2, h3 {
	font-family: "brandon-grotesque-n9", "brandon-grotesque", sans-serif;
	font-weight: 900;
	margin: 0 auto;
}

a {
	text-decoration: none;
	color: #00507e;
}

a:hover { text-decoration: underline; }
a:visited { color: #0070b1; }

figure.hover { cursor: pointer }

#center {
	position: relative;
	float: right;
	overflow: hidden;
	height: 100%;
	text-align: center;
	margin: 0 auto;
}

#bio img {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	border: 1px solid #ccc;
}

#bottom {
	position: absolute;
	bottom: 0px;
	width: 230px;
}

#inside {
	position: relative;
	height: auto;
	float: left;
}

#side {
	position: fixed;
	width: 280px;
	height: 100%;
	background-image: url('../images/side.png');
	text-align: center;
	z-index: 1000;
}

#sideinner {
	width: 230px;
	height: 100%;
	padding: 20px 20px 0px 20px;
}

#scrollbox {
	width: 200px;
	visibility: hidden;
	margin: 0 auto;
}

#scrollup, #scrolldown {
	width: 100px;
	height: 50px;
	margin: 0 auto;
}

#scrollup { background-image: url('../images/up.png'); }
#scrolldown { background-image: url('../images/down.png'); }

.fullBg {
	position: fixed;
	top: 0;
	left: 135px;
	overflow: hidden;
}

.barriers {
	width: 100%;
	height: 10px;
}

.flip-container {
	width: 250px;
	height: 250px;
	position: relative;
	float: left;
	border: 1px solid #ccc;
	background-image: url('../images/starbg.jpg');
	background-position: center;
	margin: 10px;
	overflow: hidden;
	-webkit-perspective: 1000;
	   -moz-perspective: 1000;
		 -o-perspective: 1000;
			perspective: 1000;
}

.noflip-container {
	width: 250px;
	height: 250px;
	position: relative;
	float: left;
	border: 1px solid #ccc;
	margin: 10px;
}

.flipper {
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transition: 0.9s;
	   -moz-transition: 0.9s;
		 -o-transition: 0.9s;
			transition: 0.9s;
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
		 -o-transform-style: preserve-3d;
			transform-style: preserve-3d;
}

.flipper.flipped {
	-webkit-transform: rotateY(-180deg);
	   -moz-transform: rotateY(-180deg);
		 -o-transform: rotateY(-180deg);
			transform: rotateY(-180deg);
}

.flipper figure {
	position: absolute;
	display: block;
	margin: 0;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
		 -o-backface-visibility: hidden;
			backface-visibility: hidden;
}

.flipper .hover {
	z-index: 3;
	width: 230px;
	height: 230px;
	padding: 10px;
	background-image: url('../images/hbg.png');
	text-align: center;
}

.flipper .hover h1 {
	font-size: 40px;
	position: absolute;
	bottom: 20px;
	line-height: 44px;
	color: #fff;
	width: 230px;
}

.flipper .front {
	z-index: 2;
	width: 100%;
	height: 100%;	
}
.flipper .back {
	overflow: hidden;
	width: 500px;
	height: 100%;
	-webkit-transform: rotateY(180deg);
	   -moz-transform: rotateY(180deg);
		 -o-transform: rotateY(180deg);
			transform: rotateY(180deg);
}

.flipper .back .info1 {
	width: 250px;
	height: 250px;
	float: left;
}

.flipper .back .info2 {
	width: 230px;
	height: 230px;
	padding: 10px;
	float: left;
	background-color: #fff;
	font-size: 16px;
}

.flipper .back .info2 h2 {
	font-size: 28px;
}