@import url(http://fonts.googleapis.com/css?family=The+Girl+Next+Door|Alegreya+Sans);
/* Starter CSS by RCNEIL 
font-family: 'The Girl Next Door', cursive;
font-family: 'Alegreya Sans', sans-serif;

*/

* {
	transition: 300ms; 
	-webkit-transition: 300ms;
	-ms-transition: 300ms;
	-moz-transition: 300ms;
	-webkit-transition: 300ms;
}
/*CAREFUL THE CSS TRANSITIONS MESS UP SOME JQUERY SLIDERS BUT LOOK REAL COOL FOR RESIZING */


body {
	margin:0px; padding:0px;
	width:100%; height:100%; 
	font-family: 'Alegreya Sans', sans-serif;
	color:#fff;
	overflow-y: scroll;
	overflow-x: hidden;
	background: #000; 
}
 
div { display:block; position:relative; margin:0px auto; padding:0px; }

.container {
	float:none; clear:both; margin:0px auto; padding:0px;
	width:100%; height:auto; 	
}

.row {
	float:none; clear:both; margin:0px auto; padding:0px; 
	width:100%; height:auto; 
	max-width:350px; 
}

/*UNIVERSAL SPAN SELECTOR */
div[class*='span'] {
	float:left; margin:0px auto; padding:15px 0%; height:auto;
}
/*UNIVERSAL SPAN SELECTOR */


.span5 { width:5%; }
.span10 { width:10%; }
.span15 { width:15%; }
.span20 { width:20%; }
.span25 { width:25%; }
.span30 { width:30%; }
.span33 { width:33%; }
.span35 { width:35%; }
.span40 { width:40%; }
.span45 { width:45%; }
.span50 { width:50%; }
.span55 { width:55%; }
.span60 { width:60%; }
.span65 { width:65%; }
.span66 { width:66%; }
.span70 { width:70%; }
.span75 { width:75%; }
.span80 { width:80%; }
.span85 { width:85%; }
.span90 { width:90%; }
.span100 { padding:15px 1% !important;width:98%; }


.table {
	display:table; position:absolute; height:100%; width:100%;
}

.table-cell {
	display: table-cell;
	text-align: left;
	vertical-align: bottom;
	width:auto;
	height:auto;
	z-index:100;
}


h1, h2, h3, h4, h5, h6 {
	margin:2px auto;
	font-weight:400;
	
}

h1 { font-size:36px; line-height:32px; font-family: 'The Girl Next Door', cursive; text-align:center;  }
h3 { font-size:18px; line-height:22px; text-align:center;    }

p {
}

a:link, a:visited {
	text-decoration:none;
	color:#888;
}

a:hover {
	color:#336699;
}



img, a img {
	border:0px; display:block; width:100%; height:auto; 
}

small {
	font-size:80%;
}

.bold, strong {
	font-weight:bold;
}

.italic, em {
	font-style:italic;
}

.hidden {
	display:none;
}

.clear {
	clear:both; float:none; display:block; position:relative; 
}


.error {
	color:red;
}

#info {
	z-index:10; position:relative;
}


.colorwheel .span10 {
	padding:0px;
	height:35px; 
	background:#000; 
	border-radius:50%; 
	opacity:0.2; 
}




/**** MEDIA QUERIES *****/
/**** MEDIA QUERIES *****/
/**** MEDIA QUERIES *****/
@media all and (max-width:600px) {

div[class*='span'] {
	float:none; clear:both; width:90%; padding:0px 5%; margin:0px auto;
}

h1, h3 { float:none; clear:both; margin:0px auto; text-align:center; padding:10px 0px; }


.colorwheel .span10 {
	float:left; width:10%; clear:none; 
	padding:0px;
	height:32px; 
	background:#121212; 
}

}

@media all and (min-height:501px) and (max-height:958px) {



}
/**** MEDIA QUERIES *****/
/**** MEDIA QUERIES *****/
/**** MEDIA QUERIES *****/