.story #story { display: block }
#story {
  display: none;
}
#story .links {
  margin: 15px 0 0;
  text-align: center;
  text-transform:uppercase;
}
#story .links li {
  padding: 10px;
  list-style-type: none;
  display: inline-block;
}
#story .links li:before {
  content: ' | ',
}
#story .links li:first-child:before {
  content: '',
}
#story .links li.active {
  font-weight: bold;
  text-decoration: underline;
}
#story .content > div {
  display: none;
}
#story .content div.active {
  display: block;
}

.hub #hub { display: block }
#hub {
  display: none;
}

.archive #archive { display: block }
#archive {
  display: none;
}

.privacy #privacy { display: block }
.terms #terms { display: block }
.returns #returns { display: block }
.care #care { display: block }
.page {
  display: none;
}

.page .content {
  padding: 10px;
}

#content .content .body {
  letter-spacing:0.35px;
  font-size:12px;
  width:calc(100vw - 40px);
  box-sizing:border-box;
  margin:10px auto 20px;
}

#content .content .body:last-child {
  margin:10px auto 100px;
}

.content-header {
  width:calc(100vw - 40px);
  box-sizing:border-box;
  margin:20px auto 0px;
}

.content-header .title, .content-header .subtitle {
  display:block;
  font-weight:bold;
  font-size:14px;
  text-transform:uppercase
}

.content-header .title {
  margin:0;
  padding:0;
  line-height:13px;
}

.content-header .subtitle {
  padding-bottom:10px
}

.content-share {
  border:1px solid black;
  padding:4px 8px;
  float:right
}

.content-header span.date, .content-header span.store {
  font-size:10px;
}

/* NOTE: optional arrows */

.gallery-multiple-images::before {
  border:1px solid black;
  top:50%;
  transform:scale(.5,1) translateY(-50%);
  transform-origin:top left;
  left:20px;
  content:'\25C0';
  font-size:18px;
  padding:3px 14px 3px 11px;
  z-index:999;
  position:absolute;
  display:block;
  background:rgba(255,255,255,1);
}

.gallery-multiple-images::after {
  border:1px solid black;
  top:50%;
  transform:scale(.5,1) translateY(-50%);
  transform-origin:top right;
  right:20px;
  content:'\25B6';
  font-size:18px;
  padding:3px 11px 3px 14px;
  z-index:999;
  position:absolute;
  display:block;
  background:rgba(255,255,255,1);
}

/* NOTE: not sure if this down arrow is necessary.. the fade
         might do..? what do you think? it can be removed
         with javascript when the body hits the bottom of
         the page */

.fade-cover {
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
  position:fixed;
  bottom:0;
  width:100vw;
  height:100px;
  box-sizing:border-box
}

.fade-cover::before {
  border:1px solid black;
  top:50%;
  left:50%;
  margin-left:-24px;
  transform:scale(1,.5) translateY(-50%);
  transform-origin:bottom right;
  content:'\25BC';
  font-size:17px;
  padding:9px 11px;
  z-index:999;
  position:absolute;
  display:block;
  background:rgba(255,255,255,1);
}

#story img {
  box-sizing:border-box;
  width:calc(100vw + 150px);
  position:relative;
  left:-75px;
}

ul.links {
  -webkit-padding-start: 0px!important
}

.archive h1 {
  font-size:26px;
  border-bottom:0;
  margin-top:8px;
  padding-bottom:0;
  line-height:24px;
}

.archive .subtitle {
  box-sizing:border-box;
  width:calc(100vw - 10px);
  position:relative;
  text-align:center;
  margin:0 0 12px;
  padding:0;
  font-weight:bold;
  font-size:14px;
}

/* NOTE: not really sure how this is going to work on the archive page
         based on the pdf mockup */

.archive .above {
  width:calc(100vw - 80px);
  box-sizing:border-box;
  margin:0 auto;
}

.archive h2 {
font-size:32px
}