/* TABLET STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 768px) and (max-width: 1024px){
	.container{
		width:93.75%; /* 720 pixels at a 768 pixel screen width (iPads) */
	}

	/*.container{
		width:95.625%;
	}*/
	
	.container-10{
		width:77.604166666667%;
	}
	
	header{
		height:240px;
		top:-120px;
	}
	
	footer{
		padding-top:52.1875%;
		background-image:url(../images/Footer_Reduced_2048.png);
		
	}
	
	#headerContent{
		height:120px;
	}
	
	#identity{
		height:100px;
		margin-top:10px;
		width:240px;
		display:block;
	}
	
	#main{
		margin-top:96px;
		float:right;
	}
	
	#main a{
		float:left;
		margin-left:40px;
		font-size:14px;
		padding-bottom:6px;
		letter-spacing:1px;
	}
	
	#feature a{
		height:40px;
		line-height:40px;
	}
	
	#book .button{
		height:40px;
		line-height:40px;
	}
	
	#gallery{
		padding-top:55%;
	}
	
	#heros{
		height:90%;
	}
	
	#hero{
		height:10%;
		width:520px;
		margin-left:-260px;
		
		
		/*background-color:#ccc;*/
	}
	
	#hero .circleButton{
		width:12px;
		height:12px;
		margin-right:30px;
		margin-top:-6px;
	}
	
	/*#hero .circleButton:last-of-type{
		margin-right:0px;
	}*/
	
	#hero a:nth-of-type(12){
		margin-right:0px;
	}
	
	.prevNext{
		width:14px;
		height:22px;
		margin-top:-11px;
		/*background-color:#f00;*/
	}
	
	#prev{
		margin-right:30px;
	}
	
	#next{
		
	}
	
	#artistText{
		width:47.986577181208%;
		float:left;
	}
	
	#laurel{
		width:47.986577181208%;
		/*padding-top:47.986577181208%;*/
		float:right;
	}
	
	#copyright{
		bottom:24px;
		left:0px;
	}
	
	footer h6{
		bottom:24px;
		left:0px;
		font-size:16px;
		margin-top:12px;
		letter-spacing:2px;
	}
	
	#contactHolder{
		bottom:20px;
		right:0px;
	}
	
	#contactHolder a{
		width:40px;
		float:left;
	}
	
	#fb{
		height:40px;	
		margin-left:20px;
		margin-right:20px;
	}
	
	#email{
		height:32px;
		padding-top:8px;
	}
	
	#overlayContentHolder{
		width:45.3125%;
		margin-top:160px;
		margin-left:-22.65625%;	
	}
	
	#close{
		top:-40px;
		right:-40px;
		width:24px;
		height:24px;
		padding:8px;
	}
	
	#kickstarter{
		height:40px;
		line-height:40px;
	}
	
	.butterfly{
		position:absolute;
		width:120px;
		height:119px;
		background-image:url(../images/butterfly_240.png);
		background-size:100%;
	}
	
	#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 (min-width: 768px) and (max-width: 1024px){
	body{
		/*background-image:url(../images/featureBG_2048.jpg);*/
	}
	
	#backgroundImageHolder{
		background-image:url(../images/featureBG_2048.jpg);
	}
	
	#book{
		padding-top:160px;
	}
	
	#bookHeading{
		width:120px;
		margin-bottom:16px;
	}
	
	#book h1{
		font-size:20px;
		line-height:28px;
		margin-bottom:16px;
		letter-spacing:1px;
	}
	
	#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;
	}

	.onlineRetailersFlexParent{
		display: flex;
	}

	.onlineRetailers{
		width: 47%;
	}

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

	.buttonHolder{
		width:20%;
		margin-bottom: 80px;
	}

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

@media only screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1024px){
	#feature{
		height:50vh;
	}
	
	#featureContentHolder{
		top:35%;
		width:61.458333333333%;
		padding-top:25%;
		margin-left:-30.7291666666665%;
		margin-top:-10%;
	}
	
	#featureContentHolder{
		background-image:url(../images/Title_Web_TP.png);
	}
	
	#feature a{
		/*width:46.464646464646%;*/
		font-size:12px;
		letter-spacing:1px;
		margin-top:64px;
		width:180px;
	}
	
	#book h1{
		width:61.458333333333%
	}
	
	.details, .onlineRetailerDetails{
		width:61.458333333333%;
	}
	
	.slide p{
		width:88.802083333333%;
		padding-left:11.197916666667%;
		top:50%;
	}
	
	#inspiration p{
		width:79.194630872483%;
	}
	
	#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%;*/
	}
	
	#overlayContentHolder{
		width:61.458333333333%;
		margin-left:-30.7291666666665%;	
		padding-top:40px;
	}
	
	.butterfly{
		top:2.5%;
		left:75%;
	}
	
	#laurel{
		padding-top:95.973154362416%;
		background-size:auto 100%;
	}
}

@media only screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1024px){
	#feature{
		height:100vh;
	}
	
	#featureContentHolder{
		top:35%;
		width:61.458333333333%;
		padding-top:25%;
		margin-left:-30.7291666666665%;
		margin-top:-10%;
	}
	
	#featureContentHolder{
		background-image:url(../images/Title_Web_TL.png);
	}
	
	#feature a{
		/*width:46.464646464646%;*/
		font-size:12px;
		letter-spacing:1px;
		margin-top:64px;
		width:180px;
	}
	
	#book h1{
		width:45.3125%;
	}
	
	.details, .onlineRetailerDetails{
		width:45.3125%;
	}
	
	.slide p{
		width:82.5%;
		padding-left:17.5%;
		top:50%;
	}
	
	#inspiration p{
		width:58.389261744966%;
	}
	
	#inspiration p:first-of-type{
		margin-left:10.402684563758%;
	}
	
	#inspiration p:nth-of-type(2){
		margin-left:31.208053691274%;
	}
	
	#inspiration p:nth-of-type(3){
		margin-left:10.402684563758%;
	}
	
	#overlayContentHolder{
		width:45.3125%;
		margin-left:-22.65625%;
		padding-top:40px;
	}
	
	.butterfly{
		top:2.5%;
		left:75%;
	}
	
	#laurel{
		padding-top:47.986577181208%;
		background-size:100%;
	}
}