/*
//
//
// HARRISON J WOOD :: Harrison@harrisonjwood.com
//
//
*/


/*
//==============================================
//
// BOILERPLATE
//
//==============================================
*/

html,button,input,select,textarea { color: #222; }
body {
	font-size: 16px;
	line-height: 16px;
	font-weight: 400;
	color: #fff;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-family: "brandon-grotesque", sans-serif;
}
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
img { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
.clearfix:before,.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }


/*
//
// Responsive Grid
//
*/

.grid { clear: both; padding: 0px; margin: 0px; }
.col { display: block; float:left; margin: 1% 0 0% 1.6%; }
.col:first-child { margin-left: 0; }

.colspan_2_of_2 { width: 100%; }
.colspan_1_of_2 { width: 49.2%; }

.colspan_3_of_3 { width: 100%; }
.colspan_2_of_3 { width: 66.1%; }
.colspan_1_of_3 { width: 32.2%; }

.colspan_4_of_4 { width: 100%; }
.colspan_3_of_4 { width: 74.6%; }
.colspan_2_of_4 { width: 49.2%; }
.colspan_1_of_4 { width: 21.8%; }

.row:before, .row:after { content:""; display:table; }
.row:after { clear:both; }

/*
//==============================================
//
// DEFAULT
//
//==============================================
*/

h1 { 
	text-transform: uppercase;
	font-size: 2.250em;
	line-height: 1.55em;
	font-weight: 700;
	border-bottom: 8px solid #fff;
	display: inline-block;
	margin-bottom: 35px;
}

img {
	max-width: 100%;
	width: auto/9;
	height: auto;
}

a { color: #fff; text-decoration: none; }

.section {
	padding-top: 100px;
	padding-bottom: 100px;
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
}

.container {
	width: 755px;
	margin: 0 auto;
}

.quote {
	font-size: 1.875em;
	line-height: 1.875em;
}

.artists {
	font-size: 1.250em;
	line-height: 1.875em;
	width: 545px;
	margin: 0 auto;
}

.header {
	min-height: 610px;
	background: url('../img/header.jpg');
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: center bottom;
	-webkit-background-size: cover;     
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.header h1 {
	font-weight: 300;
	border-bottom: none;
	margin-bottom: 0px;
	/*position: relative;
	top: -175px;*/
	display: block;
	margin-top: -183px;
}


.bio {
	background: url('../img/yellow.jpg');
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: center bottom;
	-webkit-background-size: cover;     
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;	
}

.credits {
	background: url('../img/white.jpg');
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: right bottom;
	-webkit-background-size: cover;     
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;	
    
    color: #333333;
}
.credits h1 { border-bottom-color: #333; }
.credits .quote { margin-bottom: 30px; }

.footer {
	background: url('../img/black.jpg');
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: right bottom;
	-webkit-background-size: cover;     
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;	
}

.footer { padding-top: 75px; padding-bottom: 75px; }


.contact { margin-bottom: 40px; font-size: 1.250em; }

.social {}
.social a {
	display: inline-block;
	width: 40px;
	opacity: 0.5;
	margin-left: 5px;
	margin-right: 5px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.social a:hover { opacity: 1; }

.sponsors { margin-top: 40px; }
.sponsors img { max-width: 180px; margin: 0 auto; }
.sponsors a {
	opacity: 0.5;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
.sponsors a:hover {
	opacity: 1;
}
/*
//==========================================================
//
// DEVICE
//
//==========================================================
*/

@media only screen and (max-width: 800px) {

	body { font-size: 12px; line-height: 12px; }
	
	.container { width: 92%; }
	
	.artists { width: 90%; }
	
	.signature { max-width: 500px; margin: 0 auto; }
	.header { min-height: 500px; padding-bottom: 0px; }
	.header h1 { margin-top: -110px; }
	
	.contact { margin-bottom: 40px; font-size: 1.850em; }
	
	.sponsors img { max-width: 140px; }
}


@media only screen and (max-width: 570px) {
	body { font-size: 10px; line-height: 10px; }
	.container { width: 99%; }
	.section { padding-top: 50px; padding-bottom: 50px; padding-left: 10px; padding-right: 10px; }
	.signature { max-width: 300px; margin: 0 auto; }
	.header { min-height: 320px; padding-bottom: 0px; }
	.header h1 { margin-top: -60px; font-size: 1.850em; font-weight: 500; }
	
	.colspan_2_of_2,
	.colspan_1_of_2,
	.colspan_3_of_3,
	.colspan_2_of_3,
	.colspan_1_of_3,
	.colspan_4_of_4,
	.colspan_3_of_4,
	.colspan_2_of_4,
	.colspan_1_of_4 { width: 100%; }
}