* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased; }

a {
  color: inherit;
  text-decoration: none; }

::-webkit-scrollbar {
  display: none; }

::-moz-selection {
  background: #262527;
  color: #FFF; }

::selection {
  background: #262527;
  color: #FFF; }

:focus {
  outline: none; }

@font-face {
  font-family: 'Niveau Grotesk';
  src: url("../font/niveaugrotesk_regular.woff") format("woff"), url("../font/niveaugrotesk_regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'Niveau Grotesk';
  src: url("../font/niveaugrotesk_medium.woff") format("woff"), url("../font/niveaugrotesk_medium.woff2") format("woff2");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: 'Niveau Grotesk';
  src: url("../font/niveaugrotesk_bold.woff") format("woff"), url("../font/niveaugrotesk_bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: 'Univers CE';
  src: url("../font/univers_ce_45.woff") format("woff"), url("../font/univers_ce_45.woff2") format("woff2");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'Univers CE';
  src: url("../font/univers_ce_55.woff") format("woff"), url("../font/univers_ce_55.woff2") format("woff2");
  font-weight: 500;
  font-style: normal; }

.container {
  margin: 0 100px; }

h1.logo {
  height: 52px;
  margin: 0 auto; }
  h1.logo a {
    display: block; }
  h1.logo img {
    display: block;
    height: 52px; }
  h1.logo span {
    display: none; }

h2.bigtitle {
  font-family: 'Niveau Grotesk', sans-serif;
  font-size: 4em;
  font-weight: 700;
  line-height: 1em; }

.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 12px;
  vertical-align: sub; }
  .icon.play {
    background-image: url(../img/icon-play.svg); }
  .icon.stop {
    background-image: url(../img/icon-close.svg); }
  .icon.mail {
    background-image: url(../img/icon-mail.svg); }
  .icon.download {
    background-image: url(../img/icon-save.svg); }

nav {
  padding: 56px 0 52px;
  font-family: 'Niveau Grotesk', sans-serif;
  font-size: 0.9em; }
  nav .container:after {
    content: '';
    display: block;
    clear: both; }
  nav ul.left {
    float: left;
    font-weight: 600;
    list-style: none; }
    nav ul.left li {
      float: left;
      margin: 0 36px 0 0; }
  nav ul.right {
    float: right;
    margin-top: 4px;
    list-style: none; }
    nav ul.right li a {
      padding-bottom: 2px;
      border-bottom: 1px solid #CCB8AB; }
  nav h1.logo {
    position: absolute;
    top: 48px;
    left: calc(50% - 65px); }

nav.fixed {
  position: fixed;
  display: none;
  width: 100%;
  top: 0;
  padding: 28px 0;
  background: #F5F5F5;
  -webkit-transition: 0.5s all ease-in-out;
  -o-transition: 0.5s all ease-in-out;
  transition: 0.5s all ease-in-out;
  z-index: 9; }

body {
  background: #F5F5F5;
  font-family: 'Univers CE', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #262527; }

header {
  position: relative;
  height: calc(100vh - 240px);
  min-height: 540px;
  background-color: #CCB8AB;
  background-image: url(../img/bg-illustration-cover.svg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  color: #FFF; }
  header #introtext {
    display: block; }
  header #introvideo {
    display: none; }
  header h1.logo {
    position: absolute;
    top: 48px;
    left: calc(50% - 65px); }
  header h2.bigtitle {
    text-align: center;
    margin-bottom: 20px; }
  header p.deck {
    line-height: 1.5em;
    text-align: center; }
  header .midtext {
    position: absolute;
    width: 20em;
    top: 50%;
    left: 50%;
    font-size: 1.389vw;
    -webkit-transform: translate(-50%, -55%);
    -ms-transform: translate(-50%, -55%);
    transform: translate(-50%, -55%); }
  header a.togglevideo {
    position: absolute;
    left: 50%;
    bottom: 80px;
    font-weight: 500;
    color: #262527;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }
  header .vidcontainer {
    position: absolute;
    width: 35%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    header .vidcontainer video {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0; }
    header .vidcontainer:before {
      content: '';
      display: block;
      padding-top: 56.25%; }
  header.subpage {
    height: auto;
    min-height: unset;
    background: unset;
    color: #262527; }
    header.subpage .midtext {
      position: static;
      width: 30em;
      margin: 40px auto 100px;
      font-size: 1em;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none; }
      header.subpage .midtext p {
        padding: 0 60px; }

section.mainfeed {
  margin: 0 0 40px; }
  section.mainfeed .container {
    margin: 0 80px; }
  section.mainfeed article {
    position: relative;
    width: calc(50% - 40px);
    margin: 20px; }
    section.mainfeed article img {
      display: block;
      width: 100%; }
    section.mainfeed article:nth-child(-n+2) {
      margin-top: 0; }
    section.mainfeed article:hover ul.tags li {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1); }
  section.mainfeed ul.tags {
    list-style: none; }
    section.mainfeed ul.tags li {
      position: absolute;
      font-family: 'Niveau Grotesk', sans-serif;
      font-size: 0.8em;
      font-weight: 600;
      cursor: -webkit-zoom-in;
      cursor: zoom-in;
      -webkit-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
      -webkit-transition: 0.1s all cubic-bezier(0.5, 0, 1, 0.5);
      -o-transition: 0.1s all cubic-bezier(0.5, 0, 1, 0.5);
      transition: 0.1s all cubic-bezier(0.5, 0, 1, 0.5); }
      section.mainfeed ul.tags li div {
        position: absolute;
        top: -24px;
        right: 0;
        -webkit-transform-origin: 100% 54.54545%;
        -ms-transform-origin: 100% 54.54545%;
        transform-origin: 100% 54.54545%;
        -webkit-transform: rotate(-58deg) translate(0, 0);
        -ms-transform: rotate(-58deg) translate(0, 0);
        transform: rotate(-58deg) translate(0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden; }
        section.mainfeed ul.tags li div span {
          display: block;
          height: 44px;
          padding: 0 4px 0 2px;
          margin: 0 15px 0 26px;
          background: #FFF;
          line-height: 44px;
          white-space: nowrap; }
          section.mainfeed ul.tags li div span:after {
            content: '';
            display: block;
            position: absolute;
            width: 7px;
            height: 7px;
            top: 48%;
            right: -3px;
            background: #CCB8AB;
            border-radius: 50%;
            z-index: 1; }
        section.mainfeed ul.tags li div:before, section.mainfeed ul.tags li div:after {
          content: '';
          display: block;
          position: absolute;
          width: 26px;
          height: 44px;
          top: 0;
          left: 0;
          background-image: url(../img/tag-left.svg); }
        section.mainfeed ul.tags li div:after {
          left: unset;
          right: -11px;
          background-image: url(../img/tag-right.svg); }

.blackoverlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: w-resize;
  z-index: 99; }

aside {
  position: fixed;
  display: none;
  top: 0;
  width: 25%;
  min-width: 432px;
  height: 100vh;
  background: #FFF;
  -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-transition: 0.25s all ease-in-out;
  -o-transition: 0.25s all ease-in-out;
  transition: 0.25s all ease-in-out;
  z-index: 99; }
  aside .container {
    margin: 0 48px;
    margin: 0 3.33333vw; }
  aside span.detail {
    font-size: 0.5em;
    letter-spacing: 0.05em; }
  aside h3 {
    margin: 0 0 12px;
    font-size: 0.9em;
    font-weight: inherit; }
  aside nav {
    padding-bottom: 0; }
    aside nav ul.left {
      margin: 4px 0 0;
      font-weight: 400;
      opacity: 0.5; }
  aside .image img {
    display: block;
    height: 240px; }
  aside .title {
    margin: 20px 0 12px;
    font-family: 'Niveau Grotesk', sans-serif;
    color: #CCB8AB; }
    aside .title h1 {
      margin: 0 0 4px;
      font-size: 2em;
      font-weight: 600; }
    aside .title h2 {
      font-size: 1.1em;
      font-weight: 600; }
    aside .title h4 {
      font-size: 0.75em;
      font-weight: 400; }
  aside .description {
    margin: 0 0 8px; }
    aside .description p {
      font-size: 0.7em;
      line-height: 1.57143em; }
  aside .coloroptions > div {
    width: 100%;
    float: left; }
    aside .coloroptions > div.half {
      width: 50%; }
      aside .coloroptions > div.half ul {
        max-width: 150px; }
  aside .coloroptions ul {
    max-width: unset;
    margin: 4px -6px 0;
    list-style: none; }
    aside .coloroptions ul:after {
      content: '';
      display: block;
      clear: both; }
  aside .coloroptions li {
    float: left;
    margin: 6px; }
  aside .coloroptions img {
    display: block; }
  aside .coloroptions:after {
    content: '';
    display: block;
    clear: both; }
  aside .ctas {
    margin: 32px -4px 0; }
    aside .ctas a {
      display: block;
      float: left;
      padding: 0 20px;
      margin: 0 4px;
      height: 48px;
      font-size: 0.7em;
      line-height: 48px;
      border-radius: 4px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box; }
    aside .ctas .primary {
      background: #262527;
      color: #FFF; }
    aside .ctas .ghost {
      border: 1px solid #CCB8AB;
      color: #CCB8AB; }
    aside .ctas:after {
      content: '';
      display: block;
      clear: both; }
  aside .widgets.container {
    margin-top: 60px;
    margin-bottom: 80px; }
    aside .widgets.container > div {
      margin: 40px 0 0; }
  aside .widgets .photos ul {
    list-style: none;
    cursor: -webkit-grab;
    cursor: grab; }
    aside .widgets .photos ul:after {
      content: '';
      display: block;
      clear: both; }
  aside .widgets .photos li {
    margin: 0 6px; }
  aside .widgets .photos img {
    display: block;
    height: 220px; }
  aside .widgets .other ul {
    list-style: none;
    cursor: -webkit-grab;
    cursor: grab; }
    aside .widgets .other ul:after {
      content: '';
      display: block;
      clear: both; }
  aside .widgets .other li {
    padding: 0 4px;
    margin: 0 20px; }
    aside .widgets .other li:hover span {
      opacity: 1; }
  aside .widgets .other .thumbnail img {
    display: block;
    height: 180px;
    margin: 0 auto; }
  aside .widgets .other h1, aside .widgets .other h2 {
    text-align: center;
    font-family: 'Niveau Grotesk', sans-serif;
    font-weight: 600; }
  aside .widgets .other h1 {
    margin: 20px 0 4px;
    font-size: 0.9em; }
  aside .widgets .other h2 {
    font-size: 0.7em; }
  aside .widgets .other h3 b {
    font-weight: 500; }
  aside .widgets .other span {
    display: block;
    margin: 12px 0 0;
    font-family: 'Univers', sans-serif;
    font-size: 0.7em;
    font-weight: 400;
    color: #CCB8AB;
    text-align: center;
    opacity: 0;
    cursor: pointer; }
  aside .slick-list {
    overflow: unset; }

section.places {
  margin: -60px 0 40px; }
  section.places:after {
    content: '';
    display: block;
    clear: both; }
  section.places .map {
    float: left;
    width: 50%; }
    section.places .map .mapcontainer {
      padding: 60px 0; }
    section.places .map iframe {
      display: block;
      width: calc(100% - 5.55556vw + 20px);
      height: calc(100vh - 120px); }
  section.places ul.locations {
    float: left;
    width: 50%;
    padding: 60px 0;
    list-style: none; }
  section.places li {
    float: left;
    width: 50%; }
  section.places address {
    font-style: normal; }
  section.places h2 {
    margin: 0 0 8px;
    font-family: 'Niveau Grotesk', sans-serif;
    font-size: 2em;
    font-weight: 600;
    color: #CCB8AB; }
  section.places h3 {
    margin: 0 0 8px;
    font-size: 1em;
    font-weight: 400; }
  section.places p {
    font-size: 0.7em;
    line-height: 1.57143em; }
  section.places ul ul {
    margin: 24px 0 0;
    font-size: 0.7em;
    color: #CCB8AB;
    list-style: none; }
    section.places ul ul li {
      width: unset;
      margin: 0 8px 0 0;
      float: left; }
      section.places ul ul li a {
        display: block;
        padding: 16px 20px;
        border: 1px solid #CCB8AB;
        border-radius: 4px; }
        section.places ul ul li a:hover {
          background: #CCB8AB;
          color: #F5F5F5; }

section.browse h3 {
  font-family: 'Univers CE', sans-serif;
  font-size: 2em;
  font-weight: 400;
  color: #CDB9AB; }

section.browse ul {
  list-style: none; }

section.browse .thumbnail img {
  height: 240px; }

footer {
  margin: 0 0 100px;
  font-size: 0.7em;
  text-align: center; }

@media screen and (max-width: 415px) {
  .container {
    margin: 0 24px; }
  h1.logo img {
    height: 48px; }
  nav {
    padding: 28px 0;
    font-size: 0.7em; }
    nav ul.left li {
      margin: 0 16px 0 0; }
    nav ul.right {
      margin-top: 0; }
    nav .icon {
      display: none; }
  header {
    background-image: unset; }
    header h1.logo {
      top: 28px; }
    header h2.bigtitle {
      margin-bottom: 8px;
      font-size: 2.1em; }
    header p.deck {
      font-size: 0.9em; }
    header .midtext {
      width: calc(100vw - 120px);
      padding-top: 104px;
      background-image: url(../img/bg-illustration-mobile.svg);
      background-position: center top;
      background-repeat: no-repeat;
      font-size: 1em;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
    header a.togglevideo {
      font-size: 0.8em;
      bottom: 40px; }
    header .vidcontainer {
      width: 100%; }
    header.subpage nav {
      padding-top: 108px; }
    header.subpage .midtext {
      width: 100%;
      padding-top: 0;
      margin: 16px auto 36px;
      background: none; }
    header.subpage p.deck {
      padding: 4px 40px; }
  section.mainfeed .container {
    margin: 0; }
  section.mainfeed article {
    width: 100%;
    margin: 0 0 12px; }
  section.mainfeed ul.tags li {
    font-size: 0.6em;
    letter-spacing: 0.03em; }
    section.mainfeed ul.tags li div {
      top: -16px; }
      section.mainfeed ul.tags li div span {
        height: 30px;
        padding: 0 2px 0 3px;
        margin: 0 9px 0 17px;
        line-height: 30px; }
        section.mainfeed ul.tags li div span:after {
          width: 5px;
          height: 5px;
          top: 48%;
          right: -3px; }
      section.mainfeed ul.tags li div:before, section.mainfeed ul.tags li div:after {
        width: 18px;
        height: 30px;
        background-size: cover; }
      section.mainfeed ul.tags li div:after {
        right: -8px; }
  aside {
    width: 100%;
    min-width: unset; }
    aside .container {
      margin: 0 24px; }
    aside nav {
      font-size: 0.8em; }
    aside .image img {
      height: 180px; }
    aside .title h1 {
      font-size: 1.6em; }
    aside .title h2 {
      font-size: 0.9em; }
    aside .widgets.container {
      margin-top: 48px; }
      aside .widgets.container div > {
        margin: 32px 0 0; }
    aside .widgets .other span {
      opacity: 1; }
  section.places {
    margin-top: 0; }
    section.places .map {
      width: calc(100% + 48px);
      margin: 0 -24px; }
      section.places .map .mapcontainer {
        padding: 0; }
      section.places .map iframe {
        width: 100%;
        height: 240px; }
    section.places ul.locations {
      width: 100%;
      padding: 16px 0; }
      section.places ul.locations > li {
        width: 100%;
        margin: 16px 0; }
      section.places ul.locations h2 {
        font-size: 1.2em; }
      section.places ul.locations h3 {
        font-size: 0.8em; } }