/* ------------------------------------------------------------
	Bootstrap's responsive breakpoints
------------------------------------------------------------ */

/* Here be dragons! This is a pretty rough-and-ready "responsive" (fluid what?!) implementation using Bootstraps break points, and is more to be used as a test base for my next project... ;) */



	/* Phone - small tab */
	@media (max-width: 767px) {
		
	body {padding: 0; margin: 0; }

/*	#promo-banner { position: static; margin: -50px; }*/
	#promo-banner p {margin: 3px 0px;	}
	#promo-banner p a {text-decoration: underline; }	
	#promo-banner .hidden-phone {display: none; }
	
	.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 
	{ width: 100% !important; float: none; padding: 20px;

	/*border: 1px solid blue !important;*/	}
	
	.buy, #fivereasons, #toc, #praise, #author, #resources { padding: 30px 0 0px 0; } /*was 115px top*/
	.buy { padding-top: 115px; }
		

	.buy, #fivereasons, #praise, #author, #resources { width: auto; /*background-color: transparent; z-index: 9; border-bottom: 1px solid #333;padding-bottom: 50px;*/ }
		
		
	h2 { font-size: 45px; line-height: 50px; text-transform: ; letter-spacing: -1px; font -style: italic; margin-bottom: 40px; text-align: center !important;
	}
	h3 { font-size: 30px; }
	h4 { font-size: 26px; }
	h5 { font-size: 20px; }
	h6 { font-size: 16px; }
		
		
/*	p { font-size: 18px; line-height: 26px; }*/
	


	 /* title override - centered type */
.title-pad {height: auto; width: auto; position: static; margin-top: 70px; padding-bottom: 0px; }	
.title-position {position: static; width: auto;z-index: 5; margin: 0; }

	h1#title { z-index: 5; font-size: 100px; line-height: 90px; height: auto; padding: ; }

	h1#title br {display: none; }
	
	h1#title > b { display: block; margin: 0; padding: 0; font-size: 40px; line-height: 30px; margin: 5px 0 -30px 0; letter-spacing: 1px; } /*THE and ABOUT*/
	h1#title b:first-child { margin: 20px 0 -3px 0px; } /* THE and 5 */
	h1#title > b:first-child { margin-left: -10px; } /* Just THE */
	
	h1#title span { font-size: 80px; margin: auto; } /* HTML */
	h1#title span > b { font-size: 90px; position: relative; bottom: -5px;left: 3px; } /* 5 */
	
	p.title-sub, p.byline { font-size: 18px; }

	p.title-sub b { display: none; }
	p.title-sub span { display: block; margin-top: 5px; }


	/* navigation override - vertical list */

	.navigation {height: auto; border: 0; display: table; width: 100%; background: transparent;
	}
	.navigation > ul.nav {width: 100%; font-size: 24px; letter-spacing: 1px; margin: 0; height: auto; position: static;  border: 0; background: transparent;
	}
			.navigation > ul li {padding: 10px 30px 15px 30px; height: auto;  float: none; border: 0; /*border-left: 1px solid #333;*/ width: 100%; border: 0px solid; text-align: center;margin-bottom: 0px;background: transparent;
			}
	
			.navigation-fixed { position: static; margin-left:  auto;width: 100%; background: auto; z-index: 1; }

			.navigation a { color: #fff !important;  display: inline !important; text-decoration: underline; }	
	.nav-wrap, .navigation { z-index: 1; }
	
	.navigation ul li:last-child { /*border-left: 1px solid #333;*/	}


/*.navigation a {
  display: inline-block;
  position: relative;
}
.navigation a::after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 1em;
  width: 100%;
  border-bottom: 1px solid pink;
  margin-top: 5px;
}*/


	
/*	.intro p.one { font-size: 22px; line-height: 30px; }*/

	.intro.pad-nav { padding: 0; }
	
	.personal-note { margin: 0; margin-bottom: 40px; }
	
	.email-share {  }
	.email-share h5 {text-align: center;	}
		.email { width: 100%; border: 0; }
		.email-share input { display: block; margin: 10px auto !important; text-align: center; }

		.share { width: 160px; border: 0; position: relative; margin-left: 50%;left: -80px;	}
		.share h5 { text-align: left; margin-left: -5px; }

		.email-share form input[type="submit"] { width: 200px;}

	p.note {text-align: center; }

	.cover-wrap {  }
	.cover-wrap { width: 285px; height: 428px; margin: 10px auto 40px auto !important; }
	.cover-hover {display: none; }
/*	.cover-wrap {position: relative; width:472px; height:698px;} /* width + 40px | height + 50px*!/*/
	.cover-fixed { position: static; margin: 0 auto; }

		img.cover { width: 285px; /* 432px * .66 */ height: 428px; /*648px * .66 */ margin: 0; padding: 0; }

	
	.cover-fixed { position: static; top: 0; }

	.buy-buttons-small { display: none;
/*	height: 200px; width: 150px; margin-left: 50%; left: -75px; border: 1px solid pink;*/
	}


	#quote {margin-right: -0px;}
	
	
			blockquote:before {
			top: 85px;
			font-size: 100px;
			}
			
			blockquote:before {
			margin-left: -45px;
			}	


	.buy img.store-badge {/*width: 60%;*/ margin-top: 20px; }
		
	.buy-book {margin: 0 !important; padding: 0 !important; }
	
		.color-book { padding: 0; }
		.buy .print .color-book h3 {display: none; }

		.buy * { width: auto; float: none; /*max-width: 480px;*/  text-align: center !important; }

		.buy .button-wrap { width: 240px; margin: 10px auto; margin-left: 50%; left: -120px; }

		
	
	.buy h2 { font-size: 45px; margin: 0 ; padding: 0; }
	
	.buy h3, .buy h4 { font-size: 30px; margin: 10px 0 ; padding: 0; text-align: center; }
	.buy h3 small { display: block; margin-top: 5px; }
	.buy h3 b { display: none; }
	
	
	.buy > small { width: 80% !important;  }
		#buy-ebook { width: 100% !important; margin: 10px 10px 20px 10px;  }

	#quote { }

	blockquote {padding: 60px 60px 60px 40px; margin-left: 0px; margin-bottom: 0; }
		blockquote p {font-size: 18px; line-height: 26px;z-index: 100;  position: relative;	/*text-align: justify;*/ }	
		
	
	#fivereasons { }

	#fivereasons h3, #fivereasons p {margin-left: 30px; }
	#fivereasons h3:first-letter {margin-left: -35px; /*color: #666;*/ }


	#toc { width: 100%; }

	#toc h2 { width: auto !important; }
	#toc p { width: auto !important; }
		
		p.sub {text-align: center; width: 100% !important; }



/*	#toc p {width: 100%;  margin-left: 0;
	}*/
	#praise p {
		width: 80%; margin: 15px auto;
	}
	
	}



	/* Phone-ish / portrait-ish / phone overrides */
@media (max-width: 479px) {
	
	* {max-width: 479px;}
		 /* title override - centered type */
.title-pad {}	
.title-position { }

	h1#title { font-size: 80px ; line-height: 73px;}
	h1#title > b { font-size: 30px; line-height: 30px; margin: 5px 0 -30px 0; } /*THE and ABOUT*/
	h1#title > b:first-child { margin-left: -4px; } /* Just THE */
	
	h1#title span { font-size: 64px; margin: auto; } /* HTML */
	h1#title span > b { font-size: 73px; position: relative; bottom: -5px;left: 3px; } /* 5 */
	
	p.title-sub, p.byline { font-size: 16px; width: 100%;text-align: center;padding: 0; margin: 20px 0px; }

	p.title-sub b { display: none; }
	p.title-sub span { display: block; margin-top: 5px; }

}



	/* tablet + tiny desktop */
	
	@media (min-width: 768px) and (max-width: 959px) {

/*	* {border: 1px solid pink; }*/

	.container, .span12, .span8 {width: 768px; }

	#promo-banner p {margin-left: 0px;	}

	.buy, #fivereasons, #toc, #praise, #author, #resources { padding: 85px 0 0px 0; }
	/*reduced by 30px as inner spanX divs are padded 30px, except toc*/

/*	.title-position {width: 768px; margin-left: -384px; }*/
	.title-position {position: static; width: auto;z-index: 5; margin: 0 auto;  }

/*#quote, #toc, .intro {d isplay: none; margin: 0 !important; padding: 0 !important; }*/

		.nav-wrap, .navigation, .navigation > ul {width: 768px; font-size: 21px; margin: 0 !important ; }
		.navigation > ul {width: 768px; font-size: 21px; }		
		.navigation > ul li {padding: 20px 10px; }
		.navigation > ul li a { color: #fff; }

		.navigation-fixed {margin-left:  -382px !important;width: 768px;   
		}


		.intro {width: 768px; }
		.intro .span5 { width: 368px; padding-left: 10px; margin-left: 40px; }		
		.intro .span3 { margin-left: -30px; }

		.intro .testimonials { margin-left: 70px; margin-right: -320px; }

			.intro .testimonial { width: 570px; }
			
		.cover-fixed { position: relative; margin-bottom: 100px; }
		.cover-wrap .buy-buttons-small { position: absolute; bottom: 10px; left: 55px; text-align: center; line-height: 28px; text-transform: uppercase; 			
			padding: 5px; border-radius: 5px; 
			-webkit-transition: background 0.5s ease-out; }
			

		.cover-wrap { height: 500px; width: 312px; margin-left: 75px; }
		.cover-hover { height: 430px;  }
		.cover-hover, .cover-hover a { height: 430px; width: 290px; margin: 0; } 
		img.cover {width: 290px; height: 430px; margin-left: 55px; margin: 0; }
/*		.cover-wrap i {display: none; }		 */
		 .cover-wrap .buy-buttons-small {bottom: 5px; margin: 0 -30px 0 -88px;  }

		.cover-fixed { position: relative !important; top: auto !important; }
	
		.email-share {margin: 50px -300px 0 50px; }
		.email { width: 400px; margin-right: 30px; }

		.buy { padding-bottom: 0px; }

			.buy h2 { margin-left: -0px; }
/*			.buy h3 { text-align: center; }
			.buy h3 b {display: ; margin-left: -30px; }*/
			.buy .span5 {width: 768px; padding: 0 0px 20px 0px ; }

			.buy .span5 {width: 768px;}
			
			.paypal { width: 60%; }
			.bw-book small { width: 30% !important; margin-left: 15px !important; }

		#quote {margin: inherit 0 !important; padding: 0; width: 768px; border-top: 0 ; }	
			#quote blockquote { padding-left: 150px; margin: 0; }
			#quote blockquote:before { 
			color: #222;
			position: absolute;
			top: 190px;
			font-size: 300px;
			z-index: 1;
			margin-bottom: ;
			font-family: "PT Serif", Georgia, sans-serif;
			width: 50px;
			content: '\201C';
			height: 0;
			margin-left: -130px;
			  }			


		#quote .offset2 {margin: 0; }
			
			
			
		#fivereasons { }

			#fivereasons h2 b {display: block; }
	
			#fivereasons .span5, #praise .span5, #author .span5, #resources .span5   {width: 768px; padding: 0px; }		
			
			#fivereasons .span5 * { margin-left: 0 !important; }
			#fivereasons p, #fivereasons h3 { margin-right: 30px !important; width: 600px !important; }

						
		#toc {width: 768px;margin: 0 !important; padding: 30px; padding-top: 115px; }

			#toc h2, #toc p.sub { }
			
			#toc .span5 { width: 600px; }			

		#praise { }
		
			.testimonial { width: 80%;/* margin: 0 auto;*/ }


		#author { }
		
		#author p, #resources p { width: 570px !important; }		

		div[role="contentinfo"] { text-align: center; }

	}

	
	@media (max-width: 979px) {
			.navigation {/*font-size: 24px; */letter-spacing: 0px;	}
			.navigation > ul { margin-left: 10px;	}
		
			.navigation-fixed {  /*margin-left:  -470px;width: 980px;  */}
	}

	/* tab landscape - desktop-ish */
	@media (min-width: 960px) and (max-width: 1199px) {

	h2 { margin-left: -30px;	 }

		#quote {margin-right: -10px; }
	
		.navigation {/*font-size: 24px; */letter-spacing: 0px;	}
		.navigation > ul { margin-left: 10px;	}
		
		.navigation-fixed {  margin-left:  -470px;width: 980px;  }


		.email-share {margin: 0 -50px; }
		.email-share .email {width: 280px; margin-right: 20px; padding-right: 15px; }
		.email-share .email p.note {line-height: 18px;}
		
		.email-share .email input[type="submit"] {margin: 15px auto 2px auto; }
		
		#buy-ebook { text-align: left; float: left;width: auto; margin: 10px 15px ; }
/*		.paypal { margin: 0 -40px 0 -25px; padding: 10px 1px 10px 10px; }*/

.short-button { margin: 15px 0 5px 15px; }

		.buy-badge { width: 179px; margin: 0px; }
		.buy-badge img { width: 155px; }

		.buy .print .span3 { float: none; width: 500px; }
			.buy .print .button-wrap { float: left;  clear: both; }
			.buy .print .span3 small { float: left; width: 200px; margin: 15px 0 0 10px; }
			
			/*Yikes, better clear that*/
			.buy .print .span3 { *zoom: 1; }
			.buy .print .span3:before, .buy .print .span3:after { display: table;  content: ""; }
			.buy .print .span3:after { clear: both; }

		.buy .print .color-book h3 {display: none; }


	}
	/* wide screen */
	@media (min-width: 1200px) {
		.navigation > ul { margin-left: 70px;letter-spacing: 1px;	}
		
				.email-share .email {width: 280px; margin-right: 20px; padding-right: 15px; }
				.email-share h5 br {display: none;	}

		.email-share .email input[type="submit"] {margin: 15px auto 2px auto; }

		.email-share .email p.note {margin: 5px 0 0 0  !important; }
	}
	
	/* wide screen + tall */	
/*	@media (min-width: 1200px) and (min-height:845px) {
		 .cover-wrap .buy-buttons-small {bottom: -35px !important; margin: 0 -20px 0 -0px !important;  }
		 .cover-wrap .buy-buttons-small a {padding: 5px 10px; font-size: 12px; }
		 .cover-wrap .buttons-row-2 { margin-top: 5px; margin-left: -20px; }

	}	*/
	
	 /* short screen */
	 @media	(max-height: 845px) { /*was 768px*/
		.cover-wrap { height: 500px; width: 312px; margin-left: 75px; }
		.cover-hover { height: 430px;  }
		.cover-hover, .cover-hover a { height: 430px; width: 290px; margin: 0; } 
		img.cover {width: 290px; height: 430px; margin-left: 55px; margin: 0; }
/*		.cover-wrap i {display: none; }		 */

		.buttons-row-2 { margin-left: 5px; margin-top: 5px; }
		 .cover-wrap .buy-buttons-small {margin: 0 -30px 0 0px; bottom: -17px !important; left: -2px;  }
		 .cover-wrap .buy-buttons-small a { padding: 6px 6px; margin: 0 1px; font-size: 11px; text-shadow: none; }
 	 }

	/* shorter screen */
	@media	(max-height: 650px) { /*was 768px*/
		.cover-wrap { height: 410px; width: 312px; margin-left: 75px; }
		.cover-hover { height: 344px; margin-left: 35px !important; }
		.cover-hover, .cover-hover a { height: 344px; width: 232px; margin: 0; } 
		img.cover {width: 232px; height: 344px; margin-left: 35px;  }
/*		.cover-wrap i {display: none; }		 */
		.buttons-row-2 { margin-left: -5px; margin-top: 0px; }
		 .cover-wrap .buy-buttons-small {margin: 0 -30px 0 0px; bottom: -10px !important; left: -1px;  }
		 .cover-wrap .buy-buttons-small a { padding: 4px 4px; margin: 0 1px; font-size: 11px; text-shadow: none; }
			
	 }


	/* OH GOD iOS POSITION:FIXED IS BUGGY AS, so no position fixed for tablet-y devices */
	@media	(max-width: 1024px) and (max-height: 768px) { 
			#promo-banner { position: absolute;  }
			.intro.pad-nav { padding-top: 0 !important; }			
			.navigation-fixed { position: static !important; margin: 0 0 20px 0 !important; }	
			.cover-fixed { position: relative !important; top: auto !important;    }
/*			.cover-fixed { position: static !important; border: 1px solid pink; 			}			*/
			.navigation-fixed { position: static !important; margin-left:  auto;width: 100%; background: auto; z-index: 1; }
	}