@charset "UTF-8";
/* CSS Document */



/* RESET */

html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}
del,ins{text-decoration:none}
li{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:baseline}
sub{vertical-align:baseline}
legend{color:#000}


/* CLEAR FIX */
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;height:0;width:0}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
.clearfix{display:block}


/* LAYOUT */



html, body, h1, h2, h3, h4, p, li
{
	color:			#727272;
	font-family: 	'Rosarivo', serif;
}

html,
body
{
	background:			#222222 url('img/background.png');
	
	margin: 	0;
	padding:	0;
	
}
	.flip-container {
		margin:	0 0 3em;
	}

	.front {
	
		
		background:		url(img/fronttrace.png) center center;
		
		height:			500px;
		width:			100%;		
	}
	
	
	#backContentContainer
	{
		margin:			0 auto;
		width:			160px;
	}

@media only screen and (min-width: 630px)
{
	
	body
	{
	  background:			#222222 url('img/background.png');
	  background: 			-webkit-radial-gradient( rgba(0, 0, 0, 0) 65%,   rgba(0, 0, 0, 0.3) 80%,  rgba(0, 0, 0, 0.6) 90%, rgba(0, 0, 0, 0.9)), url('img/background.png'), #222222;
	}
	
	
	/* entire container, keeps perspective */
	.flip-container {
		-webkit-perspective: 	1000;
		-moz-perspective: 		1000;
		
		height:			629px;
		position:		absolute;
		left:			50%;
		top:			50%;
		perspective: 			1000;
		margin:			-315px 0 0 -315px;
		width:			629px;
		
		
	}
		/* flip the pane when hovered */
		.flip-container:hover .flipper, .flip-container.hover .flipper {
			
			
			-webkit-transform: rotateY(180deg);  
			-moz-transform: rotateY(180deg);  
			transform: rotateY(180deg);  
		}
	
	.flip-container, .front, .back {
		
		height:			629px;
		width:			629px;
	}
	
	/* flip speed goes here */
	.flipper {
		-webkit-transition: 0.6s;
		-moz-transition: 	0.6s;
		transition: 		0.6s;
		
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		transform-style: preserve-3d;
	
		position: relative;
	}
	
	/* hide back of pane during swap */
	.front, .back {
		
		-webkit-backface-visibility: hidden;  
		-moz-backface-visibility: hidden;  
		backface-visibility: hidden;  
	
		position: absolute;
		top: 0;
		left: 0;
	}
	
	/* front pane, placed above back */
	.front {
		z-index: 2;
		
		background:		url(img/fronttrace.png);
	}
	
	
	
	/* back, initially hidden pane */
	.back {
	
	
		background:		url(img/back.png);
		
		-webkit-transform: rotateY(180deg);  
		-moz-transform: rotateY(180deg);  
		transform: rotateY(180deg);  
	}
		
		
		#backContentContainer
		{
			position:		relative;
			left:			230px;
			top:			110px;
			margin:			0;
            width:          200px;
			
			
			
		
		}
	
	

}

		

	h1,h2
	{
		display:	none;
	}	
	
	.back ol
	{
		padding:		0 0 0 1.2em;
		width:			200px;
	
	}
	
		.back ol li
		{
			font-size:			13px;
			list-style-type:	decimal;
			padding:			0 0 2em 0;
		}
		
			.back ol li p,
			.back ol li a
			{
				color:				#fff;
				text-decoration:	none;
				line-height:		1.2em;
				
			}
			
			
			.back ol li a:hover
			{
				text-decoration:	underline;
				
			}

			
			
			.yotr,
			.vimeo,
            .facebook,
            .twitter
			{
				background-image:	url(img/spritesheetLinks.png);
				background-repeat:	no-repeat;
				display:			inline-block;
				height:				33px;
				margin:				0;
                padding:            0;
				overflow:			hidden;
				text-indent:		-9999px;
				width:				33px;
			}

			
			.yotr
			{
				background-position:    0 0;
                margin:	                0 0 0 1.3em;
                width:		            33px;
			}
			
			.vimeo
			{
				background-position: -33px 0;
			}

            .facebook
			{
				background-position: -72px 0;
                width:				  28px;
			}

            .twitter
			{
				background-position: -104px 0;
                width:				  28px;
			}
			
			
			.yotr:hover
			{
				background-position: 0 -33px;
			}
			
			.vimeo:hover
			{
				background-position: -33px -33px;
			}

            .facebook:hover
			{
				background-position: -72px -33px;
			}

            .twitter:hover
			{
				background-position: -104px -33px;
			}