@charset "utf-8";

.board { background:url(/images/2014/about/story/story-holder-m.png) no-repeat; width: 95%; position:relative; margin: 2rem auto; height:135rem; }
.stories { position:relative; top:18rem; }
.story { position:relative; width:65%; margin:auto; border:0px solid red; display:none; }
.story.current { display:block; }
.story .image_holder { background:url(/images/2014/about/story/image-box.png) no-repeat; position:relative; width:70%; margin:auto; }
.story .desc { margin:1rem auto; }
.story.last .image_holder { background:none; width:110%; left:-5%; top:2rem; }
.story.last .desc { position:relative; top:0; }

.paging_nav { position:absolute; width:100%; top: 95rem; }
.paging_nav .page_holder { background:url(/images/2014/about/story/page-holder.png) no-repeat; width:20%; height:9.5rem; margin-left:40%; font-size:3.5rem; }
.paging_nav .page_holder p { position:relative; margin-top:0; top:2.5rem; }
.paging_nav .button { position:absolute; width:13%; height:10.5rem; top:-0.5rem; background-position:top; cursor:pointer; }
.paging_nav .button.next { background:url(/images/2014/about/story/next-btn-m.png) no-repeat; right:20%; }
.paging_nav .button.prev { background:url(/images/2014/about/story/prev-btn-m.png) no-repeat; left:20%; }
.paging_nav .button:hover {  background-position:bottom; }

@media only screen and (max-width: 480px) {
	.page_title p { margin-top: 1rem; }
	.paging_nav .button { height: 11.5rem; }
}

@media only screen and (min-width: 480px) {
	body { font-size:2.2rem; }
	.board { background:url(/images/2014/about/story/story-holder.png) no-repeat; height:70rem; }
	.stories { top:14.5rem; }
	.story { width:75%; }
	.story .image_holder { width:40%; }
	.story .image_holder, .story .desc { position:relative; display:inline-block; vertical-align:middle; }
	.story .desc { width:55%; margin-left:3%; }
	.paging_nav { top:43rem; width:50%; left:44%; }
	.paging_nav .page_holder { width:25%; height:7rem; margin-left:40%; font-size:2.5rem; }
	.paging_nav .page_holder p { top:1.5rem; }
	.paging_nav .button { width:12%; height:5rem; top:0rem; }
	.paging_nav .button.next { right:20%; }
	.paging_nav .button.prev { left:25%; }
	.story.last .image_holder { width:60%; top:-4rem; left:0; }
	.story.last .desc { width:90%; top:-5rem; text-align:left; }
	.story.last .desc p { margin:0; }
}


/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1025px) {
	.paging_nav { top:44rem; }
	.paging_nav .page_holder { width:96px; height:50px; font-size:1.8rem; position:relative; left:53%; margin-left:-48px; }
	.paging_nav .page_holder p { top:1.3rem; }
	.paging_nav .button { width:60px; height:62px; top:-6px; }
	.paging_nav .button.next { background:url(/images/2014/about/story/next-btn.png) no-repeat; }
	.paging_nav .button.prev { background:url(/images/2014/about/story/prev-btn.png) no-repeat; }
	.paging_nav .button:hover {  background-position:bottom; }
}