.story #story { display: block }
#story {
  display: none;
}
#story .links {
  margin: 15px 0 0;
  text-align: center;
  text-transform:uppercase;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
#story .links li {
  display: block;
  list-style-type: none;
  font-size: 1rem;
}
#story .links li div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  padding: 0 15px;
}
.accessible #story .links {
  flex-wrap: wrap;
}
.accessible #story .links li {
  border: 1px solid black;
  margin: 5px;
}
#story .links li.active {
  font-weight: bold;
  text-decoration: underline;
}
#story .content > div {
  display: none;
  padding-bottom: env(safe-area-inset-bottom);
}
#story .content div.active {
  display:block;
  animation: mfadein 0.6s;
}

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

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

/* FAQ */

.privacy #privacy { display: block }
.account_terms #account_terms { 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: 1rem;
  width:calc(100vw - 40px);
  box-sizing:border-box;
  margin:10px auto 20px;
  clear:both
}

#hub .content .body:last-child  {
  margin:20px 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: 1rem;
  text-transform:uppercase
}

.content-header .title {
  margin:0;
  padding:0;
  line-height:1.4em;
}

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

.content-share {
  border:1px solid black;
  padding: 0 12px;
  height: 48px;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  float:right
}

.content-header span.date, .content-header span.store {
  font-size: 1rem;
}

/* 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:24px;
  height:48px;
  top:26vh;
  content:'';
  transform:translateY(-50%) translateZ(0);
  transform-origin:top right;
  left:20px;
  font-size: 1.125rem;
  padding:3px 3px 3px 1px;
  z-index:2;
  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:24px;
  height:48px;
  top:26vh;
  content:'';
  transform:translateY(-50%) translateZ(0);
  transform-origin:top right;
  right:20px;
  font-size: 1.125rem;
  padding:3px 1px 3px 3px;
  z-index:2;
  position:absolute;
  display:block;
}
.accessible .gallery-left,
.accessible .gallery-right {
  width: 48px;
}

@-webkit-keyframes gallery-fade {
  0%{opacity:0}
  20%{opacity:1}
  78% {opacity:1}
  100% {opacity:0}
}
/* 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
}
.vscroll .fade-cover {
  display: none;
}

/*
.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: 1.063rem;
  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);
  max-height:100vw;
  position:relative;
  left:-75px;
}

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

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

.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: 1rem;
}


.archive h2 {
  font-size: 1.563rem;
  font-weight: normal;
}
.archive h2 b {
  font-size: 1.75rem;
}
.archive .body {
  font-size: 0.875rem;
  line-height: 1.4rem;
  font-weight: 100;
}

#archive .heading {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  pointer-events: none;
}
#archive .menu .items {
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: 50% 50%;
  transform: translateZ(0) translateX(-50%) translateY(-50%);
}
#archive .row .image {
  position: absolute;
  top: 10%; left: 50%;
  transform-origin: 50% 50%;
  transform: translateZ(0) translateX(-50%) translateY(0%);
}
#archive .row .text {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 16px 0;
}
#archive .menu {
  position: fixed;
  display: none;
}
#archive.menu .menu {
  display: block;
}

.accessible #archive .row .image,
.accessible #archive .row .text {
  position: relative;
  top: auto;
  left: auto;
  transform: translateZ(0);
}

#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%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid black;
  background: white;
  padding:0;
  height: 48px;
  font-size: 1rem;
  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: 150px;
}
#archive .row {
  position: relative;
  min-height: 80vh;
  -webkit-perspective: 500px;
  perspective: 500px;
  margin-bottom: 5em;
}
#archive .row .image {
  width: 100%; height: 100%;
  max-height: 80vh;
  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 > div {
  width: 80%;
}
.accessible #archive .row .image {
  display: block;
  height: 50vh;
  opacity: 1 !important;
}
.accessible #archive .row .text {
  display: block;
  margin: 0 auto;
  opacity: 1 !important;
  width: 90%;
}

.gallery-target {
  display: none;
}
.accessible .gallery-target {
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 100vw;
  height: 52vh;
}
.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%);
}

#archive {
  box-sizing:border-box
}