html, body {
  margin: 0;
  padding: 0;
}
body {
  position: relative;
  display: flex;
  width: 100vw;
  min-height: 100vh;
  flex-direction: column;
}
main {
  position: relative;
  width: 100vw;
  flex: 1 0 auto;
  overflow-x: hidden;
  z-index: 1;
}
* {
  font-family: 'Noto Serif', sans-serif;
}
.btn {
  font-family: 'Frontage Condensed', Arial, Helvetica, sans-serif;
  padding: 0 24px;
}
.btn.main {
  background-color: #00aaa5;
  color: #fff;
}
.btn.main:hover {
  background-color: #051c2c;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Frontage Condensed', Arial, Helvetica, sans-serif;
  letter-spacing: -0.02em;
}
.social-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.social-icons .social-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 38px;
  margin: 0 8px;
  line-height: 38px;
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
}
.social-icons.social-green .social-icon {
  background-color: #7a7a7a;
}
.social-icons.social-green .social-icon:hover {
  background-color: #051c2c;
}
.social-icons.social-blue .social-icon {
  background-color: #051c2c;
}
.social-icons.social-blue .social-icon:hover {
  background-color: #00aaa5;
}
.social-icons.social-white .social-icon {
  background-color: #ffffff;
}
.social-icons .social-icon img {
  width: 28px;
  height: 28px;
}
header {
  position: relative;
  width: inherit;
  display: flex;
  flex-direction: row;
  justify-content: center;
  z-index: 2;
}
header nav#navigation {
  width: inherit;
  max-width: 1600px;
  height: auto;
  color: unset;
  background-color: transparent;
  line-height: 100%;
  -webkit-box-shadow: none;
  box-shadow: none;
}
/*
header nav#navigation ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "logo logo logo"
    "social social social"
    "can can can"
    "story story story"
    "buy buy buy"
    "locator locator locator"
    "events faq enews"
    "wholesale wholesale wholesale";
  column-gap: 6px;
  row-gap: 6px;
  padding: 8px;
}
*/
header nav#navigation ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "logo logo"
    "social social"
    "can can"
    "story story"
    "buy buy"
    "locator locator"
    "events faq"
    "wholesale wholesale";
  column-gap: 6px;
  row-gap: 6px;
  padding: 8px;
}
header nav#navigation ul li {
  transition: none;
  float: none;
}
header nav#navigation ul li.nav-logo {
  grid-area: logo;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
header nav#navigation ul li.nav-logo a {
  background-color: transparent;
}
header nav#navigation ul li.nav-logo a img {
  width: 100%;
  vertical-align: middle;
  max-width: 420px;
}
header nav#navigation ul li.nav-social {
  grid-area: social;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}
header nav#navigation ul li.nav-main a {
  background-color: #e6e7e8;
  color: #051c2c;
  font-size: 1.85rem;
  text-align: center;
  line-height: 100%;
  padding: 8px 0;
  font-weight: bold;
}
header nav#navigation ul li.nav-main a:hover {
  background-color: #cdcecf;
}
header nav#navigation ul li.nav-secondary a {
  font-family: 'Frontage Condensed', Arial, Helvetica, sans-serif;
  letter-spacing: -0.02em;
  background-color: #051c2c;
  color: #fff;
  font-size: 1.35rem;
  text-align: center;
  line-height: 100%;
  padding: 8px 0;
  font-weight: normal;
}
header nav#navigation ul li.nav-secondary a:hover {
  background-color: #1f3646;
}
header nav#navigation ul li.nav-desktop {
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  margin-top: 8px;
}
header nav#navigation ul li.nav-desktop a {
  font-family: 'Frontage Condensed', Arial, Helvetica, sans-serif;
  color: #7a7a7a;
  background-color: transparent !important;
  padding: 4px;
  -webkit-transition: color .3s;
  transition: color .3s;
}
header nav#navigation ul li.nav-desktop a:hover {
  color: #051c2c;
}
header nav#navigation ul li.nav-desktop a::after {
  content: " | ";
  color: #7a7a7a !important;
}
header nav#navigation ul li.nav-desktop a:last-child::after {
  content: "";
}
header nav#navigation ul li.can {
  grid-area: can;
}
header nav#navigation ul li.story {
  grid-area: story;
}
header nav#navigation ul li.buy {
  grid-area: buy;
}
header nav#navigation ul li.locator {
  grid-area: locator;
}
header nav#navigation ul li.events {
  grid-area: events;
}
header nav#navigation ul li.faq {
  grid-area: faq;
}
header nav#navigation ul li.enews {
  grid-area: enews;
}
header nav#navigation ul li.wholesale {
  grid-area: wholesale;
}
header nav#navigation ul li.nav-desktop {
  grid-area: skyline;
}
.vignette {
  display: block;
  height: 300px;
}
.vignette .vignette-image {
  width: 100vw;
  height: inherit;
  background-size: cover;
  background-position: center center;
}
footer {
  position: relative;
  z-index: 2;
}
footer .footer-social {
  background-color: #e6e7e8;
  text-align: center;
  padding: 24px 0;
}
footer .footer-social h4,
footer .footer-social h4 a {
  font-family: 'Frontage Condensed', Arial, Helvetica, sans-serif;
  color: #051c2c;
  margin: 0;
  font-size: 1.5rem;
}
footer .footer-social .social-icons {
  justify-content: center;
  padding: 16px 0;
}
footer .footer-social .social-icons a {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  margin: 0 8px;
  line-height: 32px;
}
footer .footer-social .social-icons a img {
  width: 18px;
  height: 18px;
}
footer .footer-social h4 a {
  -webkit-transition: color .3s;
  transition: color .3s;
}
footer .footer-social h4 a:hover {
  color: #00aaa5;
}
footer .footer-main,
footer .footer-main nav.navigation-footer,
footer .footer-copy {
  background-color: #051c2c;
  color: #ffffff;
}
footer .footer-main {
  padding: 48px 0 24px 0;
}
footer .footer-main nav.navigation-footer {
  width: auto;
  height: auto;
  line-height: 110%;
  -webkit-box-shadow: none;
  box-shadow: none;
}
footer .footer-main nav.navigation-footer ul {
  display: flex;
  flex-direction: column;
  padding: 0;
}
footer .footer-main nav.navigation-footer ul li {
  padding-bottom: 24px;
  padding-right: 16px;
}
footer .footer-main nav.navigation-footer ul li a {
  display: inline-block;
  font-family: 'Frontage Condensed', Arial, Helvetica, sans-serif;
  background-color: transparent !important;
  color: #ffffff;
  font-size: 1.25rem;
  line-height: 125%;
  padding: 0;
  -webkit-transition: color .3s;
  transition: color .3s;
}
footer .footer-main nav.navigation-footer ul li a:hover {
  color: #00aaa5;
}
footer .footer-main .newsletter {
  padding: 24px 0;
}
footer .footer-main .newsletter h5 {
  font-family: 'Frontage Condensed', Arial, Helvetica, sans-serif;
  font-size: 1.25rem;
}
footer .footer-main .newsletter .newsletter-container {
  margin-bottom: 16px;
}
footer .footer-main .newsletter input {
  font-size: 1rem;
  color: #333;
  height: 48px;
  padding: 0 16px;
}
footer .footer-main .newsletter .btn {
  background-color: #00aaa5;
  margin-top: 8px;
}
footer .footer-main .newsletter .btn:hover {
  background-color: #007773;
}
footer .footer-main .social-icons {
  padding: 24px 0;
  justify-content: center;
}
footer .footer-main .social-icons a {
  width: 48px;
  height: 48px;
  border-radius: 48px;
  line-height: 48px;
}
footer .footer-main .social-icons a:hover {
  background-color: #00aaa5;
}
footer .footer-main .social-icons a img {
  width: 36px;
  height: 36px;
}
footer .footer-main .about p {
  margin: 0;
  font-style: italic;
  line-height: 175%;
}
footer .footer-main .about p a,
footer .footer-copy address a {
  white-space: nowrap;
  color: #00aaa5;
  -webkit-transition: color .3s;
  transition: color .3s;
}
footer .footer-main .about p a:hover,
footer .footer-copy address a:hover {
  color: #007773;
}
footer .footer-copy p.disclaimer,
footer .footer-copy address,
footer .footer-copy p.copyright {
  margin: 0;
}
footer .footer-copy p.disclaimer,
footer .footer-copy address {
  font-size: .8rem;
  line-height: 110%;
  margin-bottom: 8px;
}
footer .footer-copy {
  padding: 16px 0;
}
footer .footer-copy address {
  margin-bottom: 24px;
  font-style: normal;
}
footer .footer-copy p.copyright {
  font-size: .8rem;
  text-align: center;
}

@media screen and (min-width: 451px) {
  .vignette {
    height: 350px;
  }
  .vignette.small {
    height: 320px;
  }
  footer .footer-main nav.navigation-footer ul {
    flex-direction: row;
    flex-wrap: wrap;
  }
  footer .footer-main nav.navigation-footer ul li {
    width: 50%;
  }
  footer .footer-main nav.navigation-footer ul li a,
  footer .footer-main .newsletter h5 {
    font-size: 1.5rem;
  }
  footer .footer-main .newsletter .newsletter-container {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  footer .footer-main .newsletter .btn {
    margin: 0 0 0 8px;
  }
  footer .footer-main .about p {
    font-size: 1.1rem;
  }
  footer .footer-copy p.disclaimer,
  footer .footer-copy address,
  footer .footer-copy p.copyright {
    font-size: .9rem;
  }
}
@media screen and (min-width: 601px) {
  /*
  header nav#navigation ul {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      " . . social social"
      "logo logo logo logo"
      "can can story story"
      "buy buy locator locator"
      "events enews enews faq"
      "wholesale wholesale wholesale wholesale";
    column-gap: 6px;
    row-gap: 6px;
    padding: 0 8px 8px 8px;
  }
  */
  header nav#navigation ul {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      " . social"
      "logo logo"
      "can story"
      "buy locator"
      "events faq"
      "wholesale wholesale";
    column-gap: 6px;
    row-gap: 6px;
    padding: 0 8px 8px 8px;
  }
  header nav#navigation ul li.nav-social {
    align-items: flex-end;
    justify-content: center;
    padding: 8px 0 0 0;
  }
  header nav#navigation ul li.nav-social .social-icons a.social-icon {
    width: 32px;
    height: 32px;
    border-radius: 32px;
    margin: 0 4px;
    line-height: 32px;
  }
  header nav#navigation ul li.nav-social .social-icons a.social-icon img {
    width: 22px;
    height: 22px;
  }
  .vignette {
    height: 400px;
  }
  .vignette.small {
    height: 340px;
  }
  footer .footer-social {
    padding: 36px 0;
  }
  footer .footer-social .footer-social-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  footer .footer-social .footer-social-container > h4,
  footer .footer-social .footer-social-container > div {
    width: 35%;
  }
  footer .footer-social h4 {
    white-space: nowrap;
  }
  footer .footer-social h4, footer .footer-social h4 a {
    font-size: 1.25rem;
  }
  footer .footer-social h4:first-child {
    text-align: right;
  }
  footer .footer-social h4:last-child {
    text-align: left;
  }
  footer .footer-social .social-icons {
    flex: 1;
    padding: 0 8px;
  }
  footer .footer-social .social-icons a {
    margin: 0 4px;
  }
  footer .footer-main .footer-main-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  footer .footer-main nav.navigation-footer,
  footer .footer-main .newsletter {
    width: 50%;
  }
  footer .footer-main nav.navigation-footer {
    padding-right: 16px;
    border-right: 2px solid #fff;
  }
  footer .footer-main .newsletter {
    padding: 0 0 0 16px;
  }
  footer .footer-main .about {
    width: 100%;
    margin-top: 36px;
  }
  footer .footer-main nav.navigation-footer ul li a,
  footer .footer-main .newsletter h5 {
    font-size: 1.25rem;
  }
  footer .footer-main .newsletter h5 {
    margin-top: 0;
  }
  footer .footer-main .social-icons {
    padding: 8px 0;
  }
  footer .footer-main .social-icons a {
    width: 38px;
    height: 38px;
    border-radius: 38px;
    line-height: 38px;
  }
  footer .footer-main .social-icons a img {
    width: 28px;
    height: 28px;
  }
}
@media screen and (min-width: 801px) {
  .vignette {
    height: 450px;
  }
  .vignette.small {
    height: 360px;
  }
  footer .footer-social .footer-social-container > h4,
  footer .footer-social .footer-social-container > div {
    width: 37%;
  }
  footer .footer-main nav.navigation-footer ul li a,
  footer .footer-main .newsletter h5 {
    font-size: 1.5rem;
  }
  footer .footer-main .social-icons a {
    width: 48px;
    height: 48px;
    border-radius: 48px;
    line-height: 48px;
  }
  footer .footer-main .social-icons a img {
    width: 36px;
    height: 36px;
  }
}
@media screen and (min-width: 993px) {
  header nav#navigation ul {
    grid-template-columns: 1fr 1fr 2fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      " . . skyline skyline social"
      "can story logo buy locator";
    column-gap: 0;
    row-gap: 0;
    padding: 0 8px 8px 8px;
    align-items: center;
  }
  header nav#navigation ul li.nav-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  header nav#navigation ul li.nav-main.can,
  header nav#navigation ul li.nav-main.story {
    justify-content: flex-end;
  }
  header nav#navigation ul li.nav-main.buy,
  header nav#navigation ul li.nav-main.locator {
    justify-content: flex-start;
  }
  header nav#navigation ul li.nav-main a {
    display: block;
    background-color: transparent;
    font-size: 1.15rem;
    padding: 8px 16px;
  }
  header nav#navigation ul li.nav-main a:hover {
    background-color: #e6e7e8;
  }
  header nav#navigation ul li.nav-logo a img {
    max-width: 200px;
  }
  header nav#navigation ul li.nav-secondary {
    display: none;
  }
  header nav#navigation ul li.nav-desktop {
    display: flex;
  }
  header nav#navigation ul li.nav-social {
    align-items: flex-start;
    padding: 8px 0 0 8px;
  }
  header nav#navigation ul li.nav-social .social-icons a.social-icon {
    width: 28px;
    height: 28px;
    border-radius: 28px;
    margin: 0 2px;
    line-height: 28px;
  }
  header nav#navigation ul li.nav-social .social-icons a.social-icon img {
    width: 16px;
    height: 16px;
  }
  .vignette {
    height: 500px;
  }
  .vignette.small {
    height: 380px;
  }
  footer .footer-social h4, footer .footer-social h4 a {
    font-size: 1.75rem;
  }
  footer .footer-social .social-icons a {
    width: 38px;
    height: 38px;
    border-radius: 38px;
    line-height: 38px;
  }
  footer .footer-social .social-icons a img {
    width: 24px;
    height: 24px;
  }
}
@media screen and (min-width: 1201px) {
  header nav#navigation ul {
    grid-template-columns: 1fr 1fr 1fr 2fr 1fr 1fr 1fr;
    grid-template-areas:
        " . . . skyline skyline skyline social"
        " can can story logo buy locator locator ";
  }
  header nav#navigation ul li.nav-logo a img {
    max-width: 240px;
  }
  header nav#navigation ul li.nav-main a {
    font-size: 1.35rem;
  }
  .vignette {
    height: 550px;
  }
  .vignette.small {
    height: 400px;
  }
  footer .footer-social .footer-social-container > h4,
  footer .footer-social .footer-social-container > div {
    width: 38%;
  }
  footer .footer-main nav.navigation-footer,
  footer .footer-main .about {
    width: 30%;
  }
  footer .footer-main .newsletter {
    width: 40%;
    padding: 0 16px;
    border-right: 2px solid #fff;
  }
  footer .footer-main .newsletter h5 {
    text-align: center;
  }
  footer .footer-main .about {
    padding-left: 16px;
    margin-top: 0;
  }
  footer .footer-main nav.navigation-footer ul li a,
  footer .footer-main .newsletter h5 {
    font-size: 1.25rem;
  }
  footer .footer-main .social-icons a {
    width: 38px;
    height: 38px;
    border-radius: 38px;
    line-height: 38px;
  }
  footer .footer-main .social-icons a img {
    width: 28px;
    height: 28px;
  }
}
@media screen and (min-width: 1601px) {
  header nav#navigation ul {
    grid-template-columns: 1fr 1fr 1fr 1fr 2fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
        " . . . . . skyline skyline skyline social"
        " can can can story logo buy locator locator locator";
  }
  header nav#navigation ul li.nav-logo a img {
    max-width: 280px;
  }
  header nav#navigation ul li.nav-main a {
    font-size: 1.5rem;
  }
  .vignette {
    height: 600px;
  }
  .vignette.small {
    height: 420px;
  }
  footer .footer-social .footer-social-container > h4,
  footer .footer-social .footer-social-container > div {
    width: 40%;
  }
  footer .footer-main nav.navigation-footer ul li a,
  footer .footer-main .newsletter h5 {
    font-size: 1.5rem;
  }
  footer .footer-main .social-icons a {
    width: 48px;
    height: 48px;
    border-radius: 48px;
    line-height: 48px;
  }
  footer .footer-main .social-icons a img {
    width: 36px;
    height: 36px;
  }
  footer .footer-main .about p {
    font-size: 1.25rem;
  }
}
@media screen and (min-width: 1801px) {
  .vignette {
    height: 700px;
  }
  .vignette.small {
    height: 440px;
  }
}
@media screen and (min-width: 2001px) {
  .vignette {
    height: 800px;
  }
}
@media screen and (min-width: 2201px) {
  .vignette {
    height: 900px;
  }
}