.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;
}

/* FAQ */

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

.page .content {
  padding: 10px;
}

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

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

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

.hub_item {
  position: relative;
}

.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-left {
  border:1px solid black;
  background:rgba(255,255,255,1);
  background-image:url(../img/left-arrow.png);
  background-size:5px 10px;
  background-repeat:no-repeat;
  background-position:center;
  width:15px;
  height:30px;
  top:26vh;
  content:'';
  transform:translateY(-50%);
  transform-origin:top right;
  left:20px;
  font-size:18px;
  padding:3px 3px 3px 1px;
  z-index:999;
  position:absolute;
  display:block;
}

.gallery-right {
  border:1px solid black;
  background:rgba(255,255,255,1);
  background-image:url(../img/right-arrow.png);
  background-size:5px 10px;
  background-repeat:no-repeat;
  background-position:center;
  width:15px;
  height:30px;
  top:26vh;
  content:'';
  transform:translateY(-50%);
  transform-origin:top right;
  right:20px;
  font-size:18px;
  padding:3px 1px 3px 3px;
  z-index:999;
  position:absolute;
  display:block;
}

/* 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;
}


.archive h2 {
  font-size: 25px;
  font-weight: normal;
}
.archive h2 b {
  font-size: 28px;
}
.archive .body {
  font-size: 14px;
  line-height: 1.2em;
  font-weight: 100;
}

#archive .heading {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  pointer-events: none;
}
#archive .menu .items,
#archive .row .image,
#archive .row .text {
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: 50% 50%;
  transform: translateZ(0) translateX(-50%) translateY(-50%);
}

#archive .menu .items {
  border-top: 1px solid transparent;
}

#archive.menu .menu {
  opacity: 1;
  pointer-events: auto;
}
#archive .menu {
  background: rgba(255,255,255,0.8);
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
#archive .menu .items {
  width: 100%;
}
#archive .menu .item:first-of-type {
  border-top: 1px solid black;
}
#archive .menu .item {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid black;
  background: white;
  padding:12px 0;
  font-size:14px;
  letter-spacing:0.7px
}

#archive .scroll {
  top: 0; left: 0;
  height: 100%;
}
#archive .row:first-of-type {
  margin-top: 7em;
}
#archive .row:last-of-type {
  margin-bottom: 10em;
}
#archive .row {
  position: relative;
  min-height: 80vh;
  -webkit-perspective: 500px;
  perspective: 500px;
  margin-bottom: 5em;
}
#archive .row .image {
  width: 100%; height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
#archive .row.loading .image {
  background-repeat: no-repeat;
  background-size: auto auto;
  background-position: center center;
  background-image: url('../img/spinner.gif') !important;
}
#archive .row .text {
  width: 80%;
}

.gallery-video-post {
position:relative;
}

.gallery-video-post .play {
width:60px;
height:60px;
border-radius:100px;
background:white;
box-shadow:0px 0px 2px #000;
position:absolute;
transform:translateY(-50%) translateX(-50%);
top:50%;
left:50%;
}

.gallery-video-post .play:before {
content:'';
	width: 0; 
	height: 0; 
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid black;
  position:absolute;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}