/* Tablets (portrait) */
@media only screen and (max-width : 980px) {

	HR 											{ width:auto; }

	/* story directory (homepage) */
	#directory .story-link-container			{ padding-left:140px; }
	.story-item 								{ width:290px; }
	.story-item:nth-of-type(3n) 				{ margin-right:15px; }
	.story-item:nth-of-type(2n) 				{ margin-right:0; }

	/* main story */
	.aesop-entry-content > .inner 				{ width:100%; max-width:100%; }

	/* story cover */
	#cover 										{ width:65%; }
	#cover .inner 								{ width:80%; }

	/* components */
	.aesop-component							{  }

	.aesop-video-component,
	.aesop-video-container						{ width:100%; }
	.fluid-width-video-wrapper iframe,
	.fluid-width-video-wrapper object,
	.fluid-width-video-wrapper embed			{ width:100% !important; }
	.aesop-video-container.aesop-component-align-right,
	.aesop-video-component-caption.aesop-component-align-right
												{ margin-right:0; }
	.aesop-video-container.aesop-component-align-left,
	.aesop-video-component-caption.aesop-component-align-left
												{ margin-left:0; }

	.aesop-quote-component 						{ padding-right:0; width:90% !important; }

	.aesop-gallery-component 					{ padding-right:0; }

	.aesop-parallax-sc-caption-wrap				{ max-width:420px; padding:35px;
												  background:rgba(0,0,0,0.5);
												  color:#fff; font-size:30px; line-height:32px; }
	.aesop-parallax-sc-caption-wrap.bottom-right{ right:0; }
	.aesop-parallax-sc-caption-wrap.bottom-left { left:0; }
	.aesop-parallax-sc-caption-wrap.top-right	{ right:0; }
	.aesop-parallax-sc-caption-wrap.top-left 	{ left:0; }

	.aesop-image-component 						{ width:100% !important; }
	.aesop-image-component-caption 				{ padding-left:15px; padding-right:15px; width:100% !important; }
	.aesop-image-component-image	 			{ width:100% !important; }
	.aesop-image-component-image IMG	 		{ width:100% !important; height:auto; }
	.aesop-image-component-image .aesop-cap-cred,
	.aesop-image-component-image.aesop-component-align-right .aesop-cap-cred,
	.aesop-image-component-image.aesop-component-align-left .aesop-cap-cred
												{ padding-left:0; width:auto; }

	.aesop-character-component 					{ padding-right:30px; }

	/* tables */
	TABLE 										{ width:95%; }

	/* references */
	.references									{ padding:10px; }

}

/* smart phones (landscape) */
@media only screen and (max-height : 370px) {
	/* story cover */
	#cover 										{ width:100%; bottom:0; height:100%; padding-top:140px; }
	#cover .inner 								{ width:100%; }
	#cover .quote								{ display:none; }

	/* hide chapters */
	#jorgen-story-header .chapter-pips 			{ display:none; }
}

/* Smartphones */
@media only screen and (max-width : 850px) {
	* 											{ box-sizing:border-box; }

	/* header */
	#jorgen-story-header.front-page				{ padding-right:8px; }
	#jorgen-story-header.page 					{ height:110px; }
	#jorgen-story-header.page .header-links		{ display:inline; position:static; }
	#jorgen-story-header .chapter-pips 			{ display:none; }
	#jorgen-story-header.page .mobile-row1 		{ position:absolute; left:110px; top:57px; }
	#jorgen-story-header.page .mobile-row2 		{ position:absolute; left:110px; top:80px; }
	#jorgen-story-header A.link					{ line-height:normal; }
	#jorgen-story-header.page A.socialmedia		{ margin-top:0; }
	#jorgen-story-header .jorgen-story-title	{ width:auto; line-height:1em; padding:10px 5px 10px 15px; position:absolute; float:none; top:0; left:103px; right:20px; }

	/* story directory (homepage) */
	#directory 									{ padding-top:100px; }
	#directory .inner 							{ padding:0 10px; }
	#directory .intro,
	#directory .story-link-container			{ padding-left:0; }
	.story-item 								{ height:auto; }
	.story-item:nth-of-type(3n),
	.story-item:nth-of-type(2n) 				{ margin-right:0; }

	/* story cover */
	#cover 										{ width:100%; bottom:0; height:100%; padding-top:140px; }
	#cover .inner 								{ width:100%; }
	#cover .quote								{ margin-top:20px;
												  font-size:18px; }

	/* components */
	BODY .aesop-quote-component 				{ margin:0; width:100% !important; padding:20px; }
	BODY .aesop-quote-component BLOCKQUOTE 		{ font-size:20px !important; }
	BODY .aesop-image-component-image.aesop-component-align-right
												{ padding:0; }

	.aesop-parallax-sc-caption-wrap				{ /*font-size:20px; line-height:22px;*/ }
}