/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}img,embed,iframe,object,audio,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}

html, body {
  position: relative;
  background-color: #000;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  letter-spacing: .075em;
  width: 100vw;
  height: 100vh;
}

.gallery-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh - 4vw);
  max-height: calc(100vh - 2rem);
}
.tns-item {
  display: flex;
  align-items: center;
  text-align: left;
  height: calc(100vh - 4vw);
  max-height: calc(100vh - 2rem);
  justify-content: center;
  flex-direction: column;
}
.template-home .tns-item {
  justify-content: flex-end;
}
.tns-item img {
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;

  border-width: .625rem;
  border-style: solid;
  -webkit-border-image: 
    -webkit-linear-gradient(top, rgba(40,40,40,1) 0%,rgba(0,0,0,1) 40%,rgba(40,40,40,1) 100%) 1;
  -moz-border-image:
    -moz-linear-gradient(top, rgba(40,40,40,1) 0%, rgba(0,0,0,1) 40%, rgba(40,40,40,1) 100%) 1;    
  border-image:
    linear-gradient(to bottom, rgba(40,40,40,1) 0%,rgba(0,0,0,1) 40%,rgba(40,40,40,1) 100%) 1;
}

.template-home .tns-item img {
  width: calc(100vw - 8vw);
  height: calc(100vh - 8vw);
}

.lazyload,
.lazyloading {
  opacity: 0;
}
.lazyloaded {
  opacity: 1;
  transition: opacity 300ms;
}

figcaption {
  position: absolute;
  display: flex;
  align-items: center;
  left: calc(50vw + 3.5rem);
  bottom: -4vw;
  height: 4vw;
  opacity: .8;
  text-shadow: 0 0 3em rgba(0,0,0,.5), 0 0 2em rgba(0,0,0,.6), 0 0 1em rgba(0,0,0,.8);
  max-width: calc(50vw - 3.5rem);
}
@media (max-width: 50rem) {
  figcaption {
    bottom: -2rem;
    height: 2rem;
  }
}
figcaption p {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-nav {
  z-index: 99;
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 4vw);
  padding: 4vw 12vw 0;
  text-shadow: 0 0 3em rgba(0,0,0,.5), 0 0 2em rgba(0,0,0,.6), 0 0 1em rgba(0,0,0,.8);
  background-color: rgba(0,0,0,0);
  transition: background-color 200ms;
  text-transform: uppercase;
}

.site-nav a,
.site-nav [data-nav-drop],
.site-nav .nav-toggle,
.footer-nav a {
  text-decoration: none;
  color: #fff;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.site-nav a:hover,
.site-nav [data-nav-drop]:hover,
.site-nav .nav-toggle:hover,
.gallery-controls button:hover,
.footer-nav a:hover {
  color: rgb(114,152,55);
  color: var(--highlight-color);
  transition: color 100ms ease;
}

[data-nav-drop]:hover {
  cursor: default;
}

.site-nav .nav-toggle,
.gallery-controls button {
  background: none;
  border: none;
  outline: none;
  font-size: 1em;
  letter-spacing: .075em;
  margin: 0;
  padding: 0;
}

.gallery-controls {
  position: absolute;
  display: flex;
  outline: none;
  bottom: 0;
  left: calc(50vw - 3rem);
  width: 6rem;
  height: 4vw;
  min-height: 2rem;
  opacity: .8;
  z-index: 9;
}
.gallery-controls button {
  font-family: 'FontAwesome';
  color: #fff;
  margin: 0 .5em;
  width: 1em;
  text-shadow: 0 0 3em rgba(0,0,0,.5), 0 0 2em rgba(0,0,0,.6), 0 0 1em rgba(0,0,0,.8);
}
.gallery-controls button:nth-child(2) {
  order: 3;
}

.site-nav ul {
  margin: .5em 0;
}
.site-nav > ul {
  font-size: 1.2em;
  flex-grow: 1;
  justify-content: center;
  display: flex;
  flex-direction: column;
  transition: opacity 200ms;
}

.site-nav .depth-1:not(.active) ul {
  display: none;
}
.site-nav .depth-2 {
  padding-left: 1em;
}
.site-nav .depth-3 {
  padding-left: 1em;
}
.site-nav .depth-1.visible ul {
  display: block;
}

.footer-nav {
  position: absolute;
  display: flex;
  align-items: center;
  left: 0;
  width: calc(50vw - 3.5rem);
  bottom: 0;
  height: 4vw;
  min-height: 2rem;
  opacity: .8;
  text-transform: uppercase;

  margin: 0;
  justify-content: flex-end;
  font-size: 1em;
  pointer-events: auto;
}

.template-home .footer-nav {
  width: calc(100vw - 12vw);
}
.template-default .footer-nav {
  justify-content: flex-start;
  left: 20vw;
}

.text-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh - 4vw);
  padding: 8vw 20vw 4vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.text-container > div {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.text-container h1 {
  font-size: 1.5em;
  margin-bottom: .5em;
}
.text-container p {
  margin-bottom: 1em;
}
.text-container a {
  color: #fff;
}