/*
Theme Name: 	Ian Rhett
Theme URI: 		http://ianrhettmusic.com
Description: 	One page parallax theme
Version: 		4.0
Author: 		Michael Lovett
Author URI: 	http://phatmagnet.com
Tags: 			single page, parallax
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:#ff0; color:#333; }

a:focus{
	outline: medium none;
}

/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/

body,
input,
textarea 			{ /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ }

h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }

/* ---------------------------------------------------------------------------------------------------------- 
03 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/* 400 and up */
@media screen and (min-width:400px) {

					{ /* Place your styles here for all widths greater than 400px */ }

}


@media screen and (max-width: 800px){
	
	.navigation li{
		font-size: 0.5em;
	}
	
	
	.wrapper{
		width: 91% !important;
	}
	
	
	.slide-content p{
		font-size: 0.85em !important;
	}
	
	.mobile-logo-wrapper{padding-top: 37% !important;}
	

}


@media screen and (max-width: 320px){
	
	.navigation li{
		font-size: .5em;
	}
	
	
	.wrapper{
		width: 91% !important;
		
	}
	
		
	
	.slideno{
		font-size: 20px !important;

	}
	
	
	.slide-content p{
		font-size: 0.70em !important;
	}
	
	
	.mobile-logo-wrapper{
		padding-top: 15% !important;
		width: 52% !important;
	}


	#slide1{background-image:url(images/stage-900.jpg) !important;}
	
	

}

/* Retina Display */
@media screen and (-webkit-min-device-pixel-ratio:2) {

	

}




@font-face {
    font-family: 'muscle_creregular';
    src: url('font/muscle_cre-webfont.eot');
    src: url('font/muscle_cre-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/muscle_cre-webfont.woff') format('woff'),
         url('font/muscle_cre-webfont.ttf') format('truetype'),
         url('font/muscle_cre-webfont.svg#muscle_creregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'benchninebold';
    src: url('font/benchnine-bold-webfont.eot');
    src: url('font/benchnine-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/benchnine-bold-webfont.woff') format('woff'),
         url('font/benchnine-bold-webfont.ttf') format('truetype'),
         url('font/benchnine-bold-webfont.svg#benchninebold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'benchninelight';
    src: url('font/benchnine-light-webfont.eot');
    src: url('font/benchnine-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/benchnine-light-webfont.woff') format('woff'),
         url('font/benchnine-light-webfont.ttf') format('truetype'),
         url('font/benchnine-light-webfont.svg#benchninelight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'benchnineregular';
    src: url('font/benchnine-regular-webfont.eot');
    src: url('font/benchnine-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/benchnine-regular-webfont.woff') format('woff'),
         url('font/benchnine-regular-webfont.ttf') format('truetype'),
         url('font/benchnine-regular-webfont.svg#benchnineregular') format('svg');
    font-weight: normal;
    font-style: normal;

}






html,body{
 	font-family: 'benchninebold';;
	width:100%;
	height:100%;
}


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

#nav-wrapper{
	position:fixed;
	top:0;
	left:0;
	width: 100%;
	height: 250px;
	z-index:100;
}


#nav-wrapper-inside{
	position:fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100px;
	z-index:100;
}

.logo{
	width: 250px;
	height: 250px;
	background-color: #fff;
	display:none;
}

.navigation{
	height: 50px;
	background-color: #fff;
	position: relative;
	margin: 0 auto;
	text-align: center;
	font-family: 'muscle_creregular';
}
.navigation li{
	color:#333333;
	display:inline;
	padding: 0 10px;
	margin-bottom:2px;
	font-weight:bold;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	text-align:left;
	width:53px;
}
.navigation li:hover{
	color:#f5b313;
	cursor:pointer;
	/* width:100px!important; */
}





.inside-navigation{
	height: 50px;
	background-color: #fff;
	position: relative;
	margin: 0 auto;
	text-align: center;
	font-family: 'muscle_creregular';
}


.inside-navigation li{
	color:#333333;
	display:inline;
	padding: 0 10px;
	margin-bottom:2px;
	font-weight:bold;
	text-align:left;
	width:53px;
}

	
	.inside-navigation li a:link, .inside-navigation li a:visited{
		text-decoration: none;
		color:#000;
	}
	
	
	.inside-navigation li a:hover{
		text-decoration: none;
		color:#f5b313;
	}



.active{
	
}

a{
	color: red;
}



h2{
	font-family: 'muscle_creregular';
	color:#f5b313;
	font-size: 3.2em;
	height: 90px;
	overflow: hidden;
}


#cd-download{
	z-index: 250;
	position: fixed;
	top: 80%;
	left: 80%;
}


.slide{
	background-attachment: fixed;
	width:100%;
	height:100%;
	position: relative;
	box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}

/*
.wrapper{
	width:76%;
	height:auto;
	margin:0 auto;
	position:relative;
	top: 30%;
	padding: 3%;
	background-color: rgba(164,164,164,0.5);
	border: 1px solid #000;
}

	#slide2-wrapper{
		top: 20% !important;
	}
*/


.slideno{
	position:absolute;
	bottom:0px;
	left:0px;
	font-size:100px;
	font-weight:bold;
	color:rgba(255,255,255,0.3);
}


.slide-button{
	display:block;
	width:50px;
	height:50px;
	position:absolute;
	bottom:0px;
	left:50%;
	background-color:#333333;
	background-image:url(images/arrow.png);
	z-index: 25;
}


.slide-button:hover{
	background-color:#494949;
	cursor:pointer;
}

.slide-content{
	color:#fff;
	padding-top: 10%;
}


	.slide-content p{
		font-size: 1.25em;
		margin-bottom: 20px;
	}


/******************************
 SLIDE 1 - Masthead
*******************************/
#slide1{
	background-image:url(http://www.ianrhettmusic.com/record/wp-content/uploads/2014/05/masthead.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: left center;
	max-width: 100%;
}


.mobile-logo-wrapper{
	width: 37%;
	margin: 0 auto;
	padding-top: 6%;
}



/******************************
 SLIDE 2 
*******************************/
#slide2{
	background-image:url(http://www.ianrhettmusic.com/record/wp-content/uploads/2014/06/about-bg2.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	max-width: 100%;
}



/*
#slide2 img:first-child{
	position:absolute;
top: 700px;
left: -150px;
}
#slide2 img:nth-child(2){
	position:absolute;
	top:300px;
	left:100px;
}
#slide2 img:nth-child(3){
	position:absolute;
	top:600px;
	left:300px;
}
#slide2 img:nth-child(4){
	position:absolute;
	top:400px;
	left:300px;
}
#slide2 img:nth-child(5){
	position:absolute;
	top:600px;
	right:300px;
}
#slide2 img:nth-child(6){
	position:absolute;
	top:600px;
	right:300px;
}
#slide2 img:nth-child(7){
	position:absolute;
	top:400px;
	right:100px;
}
#slide2 img:nth-child(8){
	position:absolute;
	top:100px;
	right:300px;
}
*/



.left-content-box{
	float: left;
	width: 740px;
	height: 450px;
	overflow: scroll;
	padding-left: 5%;
}

	.left-content-box p{
		padding-right: 2%;
	}

.right-causes{
	float:left;
	width: 200px;
	height: 100px;
	padding-left: 4%;
	margin-top: 24%;
}



/******************************
 SLIDE 3 
*******************************/
#slide3{
	background-image:url(http://www.ianrhettmusic.com/record/wp-content/uploads/2014/05/music-bg.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	max-width: 100%;
}
#slide3 img:first-child{
	position:absolute;
top: 700px;
left: 300px;
}
#slide3 img:nth-child(2){
	position:absolute;
	top:100px;
	left:100px;
}
#slide3 img:nth-child(3){
	position:absolute;
	top:150px;
	left:300px;
}
#slide3 img:nth-child(4){
	position:absolute;
	top:450px;
	left:300px;
}
#slide3 img:nth-child(5){
	position:absolute;
	top:200px;
	right:300px;
}
#slide3 img:nth-child(6){
	position:absolute;
	top:100px;
	right:300px;
}



.right-content-box{
	float: right;
	width: 740px;
	height: 450px;
	overflow: scroll;
	margin-right: 1.5%;
}

	.right-content-box p{
		padding-right: 2%;
	}
	

.right-content-music-box{
	float: right;
	width: 860px;
	height: 700px;
	overflow: scroll;
	margin-right: 1.5%;
}



.right-content-connect-box{
	float: right;
	width: 860px;
	height: 700px;
	overflow: scroll;
	margin-right: 1.5%;
}

/******************************
 SLIDE 4 
*******************************/

#slide4{
	background-image:url(http://www.ianrhettmusic.com/record/wp-content/uploads/2014/05/show-bg.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	max-width: 100%;
}
#slide4 .parallaxbg{
	position:absolute;
	right:40px;
	top:40px;
	font-size:28px;
	color:rgba(51,51,51,0.3);
}



/******************************
 SLIDE 5 - Blog Slide
*******************************/
#slide5{
	background-image:url(http://www.ianrhettmusic.com/record/wp-content/uploads/2014/05/blog-bg.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	max-width: 100%;
}


.blog-content-box{
	float: right;
	width: 540px;
	height: 450px;
	overflow: scroll;
	margin-right: 1.5%;
}


	.blog-content-box h3{
		margin-bottom: 2%;
	}


	.blog-content-box h3 a{
		font-size: 1.7em;
		color: #fff;
		text-decoration: none;
	}
	
	
	.new-read-more{
		text-align: right;
		text-decoration: none;
	}
	
	
		.new-read-more a{
			text-decoration: none;
			color:#f5b313;
		}

.blog-sidebar-content-box{
	float: right;
	width: 200px;
	height: 450px;
	overflow: scroll;
	margin-right: 1.5%;
}

	.blog-content-box p{
		font-family: 'benchninebold' !important;
		padding-right: 2%;
	}



#more-posts-container{
	clear: both;
	margin-left: 65%;
	padding-top: 4%;
	
}

.more-posts{
	font-size: 1.5em;
	
}

.more-posts a{
	text-decoration: none;
	color:#f5b313;
	font-family: 'muscle_creregular' !important;
}


.moretag{
	margin-left: 2%;
}
/******************************
 SLIDE 6 - Contact Slide
*******************************/

#slide6{
	background-image:url(http://www.ianrhettmusic.com/record/wp-content/uploads/2014/05/contact-bg.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	max-width: 100%;
}


#connect-title{
	float: left;
	color:#f5b313;
	font-size: 1.7em;
}


#social-links{
	float: left;
	padding-left: 1%;
	padding-bottom: 2%;
	width: 80%;
}


	#social-links li{
		display: inline;
		padding-right: 1%;
	}


#wpcf7-f50-o1{
	clear:both;
}


.wpcf7-form p{
	margin-bottom: 11px;
}





/******************************
Inside Pages
*******************************/


.inside-page-bg{
	background-image:url(http://www.ianrhettmusic.com/record/wp-content/uploads/2014/05/blog-bg-e1403554326638.jpg);
/*
	background-repeat: no-repeat;
	background-color: #000;
*/
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	max-width: 100%;
}



.inside-mailing-page-bg{
	background-image:url(http://www.ianrhettmusic.com/record/wp-content/uploads/2014/05/contact-bg.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	max-width: 100%;
}


.post-container{
	width: 75%;
	margin: 0 auto;
	padding: 10%;
	background-color: rgba(255, 255, 255, 0.7);
}


	.post-container h3{
		margin-bottom: 2%;
	}


	.post-container h3 a:link, .post-container h3 a:visited{
		font-size: 1.7em;
		color: #000;
		text-decoration: none;
	}


	.post-container h3 a:hover{
		font-size: 1.7em;
		color:#f5b313;
		text-decoration: none;
	}


	.post-container p{
		font-size: 1.25em;
		line-height: 1.7em;
		margin-bottom: 1%;
		font-family: 'benchnineregular';
	}
	
	
	.post-container li{
		padding-top:1%;
		padding-bottom: 1.5%;
	}
	
#respond{
	padding-top: 4%;
}


	.form-allowed-tags{
		font-size: .7em !important;
	}
	
	
	
.wp-pagenavi{
	padding-top: 2%;
	padding-bottom: 2%;
}



.left-cause{
	float: left;
	width: 45%;
	height: 150px;
	margin-bottom: 2%;
	background-color: #dedede;
	border: 1px solid #464646;
}


.right-cause{
	float: right;
	width: 45%;
	height: 150px;
	margin-bottom: 2%;
	background-color: #dedede;
	border: 1px solid #464646;
}

.clear{clear:both;}

.inside-img{
	float: left;
	width: 100px;
	padding-right: 2%;
	padding-top: 5%;
	padding-left: 2%;
}


.inside-cause-copy{
	float: left;
	width: 70%;
	padding-right: 2%;
	padding-top: 4%;
}