/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px){
	header{
		height:80px;
		top:-40px;
	}
	
	footer{
		padding-top:52.1875%;
		background-image:url(../images/Footer_Reduced_1024.png);
	}
	
	#headerContent{
		height:40px;
	}
	
	#identity{
		display:none;
	}
	
	#main{
		/*margin-top:96px;*/
	}
	
	#main a{
		float:left;
		width:33.33%;
		font-size:12px;
		padding-top:18px;
		padding-bottom:6px;
		text-align:center;
		letter-spacing:1px;
	}
	
	#feature{
		height:100vh;
	}
	
	
	
	#feature a{
		height:40px;
		line-height:40px;
	}
	
	#book h1{
		width:79.21875%;
	}
	
	.details, .onlineRetailerDetails{
		width:79.21875%;
	}
	
	#book .button{
		height:40px;
		line-height:40px;
	}
	
	
	
	/*#hero .circleButton:last-of-type{
		margin-right:0px;
	}*/
	
	
	
	
	#inspiration p{
		width:79.21875%;
		margin-left:auto;
		margin-right:auto;
	}
	
	/*#inspiration p:first-of-type{
		margin-left:10.402684563758%;
	}
	
	#inspiration p:nth-of-type(2){
		margin-left:20.805369127517%;
	}
	
	#inspiration p:nth-of-type(3){
		margin-left:10.402684563758%;
	}*/
	
	#artistText{
		width:79.21875%;
		margin-left:auto;
		margin-right:auto;
	}
	
	#laurel{
		width:79.21875%;
		padding-top:79.21875%;
		margin-left:auto;
		margin-right:auto;
	}
	
	#copyright{
		bottom:32px;
		left: 10.390625%;
	}
	
	#contactHolder{
		bottom:20px;
		right:10.390625%;
	}
	
	#contactHolder a{
		width:40px;
		float:left;
	}
	
	#fb{
		height:40px;	
		margin-left:20px;
		margin-right:20px;
	}
	
	#email{
		height:32px;
		padding-top:8px;
	}
	
	#overlayContentHolder{
		width:79.21875%;
		margin-top:80px;
		margin-left:-39.609375%;	
	}
	
	#close{
		top:-40px;
		right:0px;
		width:24px;
		height:24px;
		padding:8px;
	}
	
	#kickstarter{
		height:40px;
		line-height:40px;
	}
	
	.butterfly{
		position:absolute;
		width:60px;
		height:59px;
		background-image:url(../images/butterfly_120.png);
		background-size:100%;
		/*-webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,1));
    	filter: drop-shadow(0px 0px 10px rgba(0,0,0,1)); */
		-webkit-filter: drop-shadow(0px 20px 20px rgba(0,0,0,.5));
    	filter: drop-shadow(0px 20px 20px rgba(0,0,0,.5)); 
	}
	
	#main a:active{
		color:#60c2e0;
		-webkit-transition: color 250ms ;
		-moz-transition: color 250ms ;
		-ms-transition: color 250ms ;
		-o-transition: color 250ms ;
		transition: color 250ms ;
	}
	
	#main a.currentSection:active{
		border-bottom: 4px solid #60c2e0;
		color:#60c2e0;
		-webkit-transition: border-bottom 250ms, color 250ms ;
		-moz-transition: border-bottom 250ms, color 250ms ;
		-ms-transition: border-bottom 250ms, color 250ms ;
		-o-transition: border-bottom 250ms, color 250ms ;
		transition: border-bottom 250ms, color 250ms ;
	}
	
	#feature a:active{
		color:#fff;
		background-color:#60c2e0;
		
		-webkit-transition: background-color 250ms, color 250ms, -webkit-box-shadow 250ms ;
		-moz-transition: background-color 250ms, color 250ms, -moz-box-shadow 250ms ;
		-ms-transition: background-color 250ms, color 250ms, -ms-box-shadow 250ms ;
		-o-transition: background-color 250ms, color 250ms, -o-box-shadow 250ms ;
		transition: background-color 250ms, color 250ms, box-shadow 250ms ;
		
		-webkit-box-shadow: inset 0px 0px 0px 4px #60c2e0;
		-moz-box-shadow: inset 0px 0px 0px 4px #60c2e0;
		box-shadow: inset 0px 0px 0px 4px #60c2e0;
	}
	
	#book .button:active{
		color:#fff;
		background-color:#60c2e0;
		
		-webkit-transition: background-color 250ms, color 250ms, -webkit-box-shadow 250ms ;
		-moz-transition: background-color 250ms, color 250ms, -moz-box-shadow 250ms ;
		-ms-transition: background-color 250ms, color 250ms, -ms-box-shadow 250ms ;
		-o-transition: background-color 250ms, color 250ms, -o-box-shadow 250ms ;
		transition: background-color 250ms, color 250ms, box-shadow 250ms ;
		
		-webkit-box-shadow: inset 0px 0px 0px 4px #60c2e0;
		-moz-box-shadow: inset 0px 0px 0px 4px #60c2e0;
		box-shadow: inset 0px 0px 0px 4px #60c2e0;
	}
	
	/*#hero .circleButton:active{
		background-color:#60c2e0;
		
		-webkit-transition: background-color 250ms;
		-moz-transition: background-color 250ms;
		-ms-transition: background-color 250ms;
		-o-transition: background-color 250ms;
		transition: background-color 250ms;
	}*/

	#hero .prevNext:active .cls-1{
		fill:#60c2e0;
		-webkit-transition: fill 250ms;
		-moz-transition: fill 250ms;
		-ms-transition: fill 250ms;
		-o-transition: fill 250ms;
		transition: fill 250ms;
	}

	
	#contactHolder a:active .cls-2{
		fill:#60c2e0;
		-webkit-transition: fill 250ms;
		-moz-transition: fill 250ms;
		-ms-transition: fill 250ms;
		-o-transition: fill 250ms;
		transition: fill 250ms;
	}
	
	#close:active{
		background-color:#60c2e0;
		
		-webkit-transition: background-color 250ms;
		-moz-transition: background-color 250ms;
		-ms-transition: background-color 250ms;
		-o-transition: background-color 250ms;
		transition: background-color 250ms;
	}
	
	#close:active .cls-1{
		fill:#fff;
		
		-webkit-transition: fill 250ms;
		-moz-transition: fill 250ms;
		-ms-transition: fill 250ms;
		-o-transition: fill 250ms;
		transition: fill 250ms;
	}
	
	#kickstarter:active{
		color:#fff;
		background-color:#60c2e0;
		
		-webkit-transition: background-color 250ms, color 250ms, -webkit-box-shadow 250ms ;
		-moz-transition: background-color 250ms, color 250ms, -moz-box-shadow 250ms ;
		-ms-transition: background-color 250ms, color 250ms, -ms-box-shadow 250ms ;
		-o-transition: background-color 250ms, color 250ms, -o-box-shadow 250ms ;
		transition: background-color 250ms, color 250ms, box-shadow 250ms ;
		
		-webkit-box-shadow: inset 0px 0px 0px 4px #60c2e0;
		-moz-box-shadow: inset 0px 0px 0px 4px #60c2e0;
		box-shadow: inset 0px 0px 0px 4px #60c2e0;
	}
}

@media only screen and (max-width: 767px){
	body{
		/*background-image:url(../images/featureBG_1024.jpg);*/
	}
	
	#feature a{
		/*width:79.289940828402%;*/
		font-size:12px;
		letter-spacing:1px;
		margin-top:24px;
		width:180px;
	}
	
	#book{
		padding-top:80px;
	}
	
	#bookHeading{
		width:120px;
		margin-bottom:16px;
	}
	
	#book h1{
		font-size:18px;
		line-height:24px;
		margin-bottom:16px;
	}
	
	#book h1 span{
		letter-spacing:1px;
	}

	.onlineRetailerDetails h6{
		font-size:16px;
		line-height:22px;
		margin-bottom:16px;
	}
	
	.details, .onlineRetailers{
		font-size:16px;
		line-height:22px;
		margin-bottom:40px;
	}

	.onlineRetailers:nth-of-type(1){
		margin-bottom:0px;
	}
	
	#book .button{
		/*width:62.8125%;*/
		font-size:12px;
		letter-spacing:1px;
		margin-bottom:40px;
		width:180px;
	}

	.buttonHolder{
		width:25%;
		margin-bottom: 60px;
	}

	.buttonHolder span{
		font-size: 20px;
	}
	
	#firstSlide{
		background-image:url(../images/1_1024.jpg);
	}
	
	#secondSlide{
		background-image:url(../images/2_1024.jpg);
	}
	
	#thirdSlide{
		background-image:url(../images/3_1024.jpg);
	}
	
	#fourthSlide{
		background-image:url(../images/4_1024.jpg);
	}
	
	#fifthSlide{
		background-image:url(../images/5_1024.jpg);
	}
	
	#sixthSlide{
		background-image:url(../images/6_1024.jpg);
	}
	
	#seventhSlide{
		background-image:url(../images/7_1024.jpg);
	}
	
	#eigthSlide{
		background-image:url(../images/8_1024.jpg);
	}
	
	#ninthSlide{
		background-image:url(../images/9_1024.jpg);
	}
	
	#tenthSlide{
		background-image:url(../images/10_1024.jpg);
	}
	
	#eleventhSlide{
		background-image:url(../images/11_1024.jpg);
	}
	
	#inspiration{
		padding-top:80px;
		padding-bottom:40px;
	}
	
	#inspirationHeading{
		width:200px;
		margin-bottom:8px;
	}
	
	#inspiration p{
		font-size:16px;
		line-height:22px;
		margin-bottom:32px;
	}
	
	#artist{
		padding-top:80px;
		padding-bottom:60px;
	}
	
	#artistHeading{
		width:125px;
		margin-bottom:24px;
	}
	
	#artist p{
		font-size:16px;
		line-height:22px;
		margin-bottom:24px;
	}
	
	footer p{
		font-size:12px;
		margin-top:12px;
	}
	
	#overlay h1{
		font-size:20px;
		line-height:28px;
		letter-spacing:1px;
		margin-bottom:20px;
	}
	
	#overlay h1:nth-of-type(2){
		margin-bottom:32px;
	}
	
	#kickstarter{
		/*width:79.289940828402%;*/
		font-size:12px;
		letter-spacing:1px;
		margin-bottom:20px;
		width:180px;
	}
	
	#overlay p{
		font-size:16px;
		line-height:24px;
		letter-spacing:1px;
	}
}

@media only screen and (orientation: portrait) and (max-width: 767px){
	#backgroundImageHolder{
		background-image:url(../images/featureBG_1024.jpg);
	}
	
	#featureContentHolder{
		top:25%;
		width:79.21875%;
		padding-top:79.21875%;
		margin-left:-39.609375%;
		margin-top:-12.5%;
		background-image:url(../images/Title_Web_1024.png);
	}
	
	#gallery{
		padding-top:60%;
	}
	
	#heros{
		height:85%;
	}
	
	.slide p{
		width:89.609375%;
		padding-left:10.390625%;
		top:50%;
		
		font-size:10px;
		line-height:15px;
		margin-top:-10px;
	}
	
	.slide span{
		display:block;
	}
	
	#hero{
		height:15%;
		width:68px;
		margin-left:-34px;
		
		/*background-color:#ccc;*/
	}
	
	#hero .circleButton{
		display:none;
		
		/*width:10px;
		height:10px;
		margin-right:16px;
		margin-top:-5px;*/
	}
	
	.prevNext{
		width:14px;
		height:22px;
		margin-top:-11px;
		/*background-color:#f00;*/
	}
	
	#prev{
		margin-right:20px;
	}
	
	#next{
		margin-left:20px;
	}
	
	.butterfly{
		top:1.5%;
		left:75%;
	}
	
	#copyright{
		bottom:20px;
		left: 10.390625%;
	}
	
	footer h6{
		bottom:42px;
		left:10.390625%;
		font-size:12px;
		margin-top:12px;
		letter-spacing:2px;
		width:auto;
	}
}

@media only screen and (orientation: landscape) and (max-width: 767px){
	#backgroundImageHolder{
		background-image:url(../images/featureBG_2048.jpg);
	}
	
	#featureContentHolder{
		top:35%;
		width:79.21875%;
		width:46.40625%;	
		padding-top:25%;
		margin-left:-23.203125%;
		margin-top:-10%;
		background-image:url(../images/Title_Web_1024.png);
	}
	
	#gallery{
		padding-top:55%;
	}
	
	#heros{
		height:90%;
	}
	
	.slide p{
		width:89.609375%;
		padding-left:10.390625%;
		top:50%;
		
		font-size:10px;
		line-height:15px;
		margin-top:-10px;
	}
	
	#hero{
		height:10%;
		
		width:68px;
		margin-left:-34px;
	}
	
	#hero .circleButton{
		display:none;
		
		/*width:10px;
		height:10px;
		margin-right:16px;
		margin-top:-5px;*/
	}
	
	.prevNext{
		width:12px;
		height:18px;
		margin-top:-9px;
		/*background-color:#f00;*/
	}
	
	#prev{
		margin-right:20px;
	}
	
	#next{
		margin-left:20px;
	}
	
	.butterfly{
		top:1.5%;
		left:75%;
	}
	
	#copyright{
		bottom:32px;
		left: 10.390625%;
	}
	
	footer h6{
		bottom:32px;
		left:0px;
		font-size:12px;
		margin-top:12px;
		letter-spacing:2px;
	}
}

@media only screen and (max-height: 480px){
	#overlayContentHolder{
		padding-top:20px;
	}
}

@media only screen and (min-height: 481px){
	#overlayContentHolder{
		padding-top:40px;
	}
}