@font-face {
  font-family: 'Accord Alternate';
  font-weight: bold;
  font-style: normal;
  font-display: block;
  src: url('/style/fonts/accord-alternate/NoSpoon-94f822f7cb.eot');
  src: url('/style/fonts/accord-alternate/NoSpoon-94f822f7cb.eot?#iefix') format('embedded-opentype'),
    url('/style/fonts/accord-alternate/NoSpoon-9b4a09bf8a.woff2') format('woff2'),
    url('/style/fonts/accord-alternate/NoSpoon-50d9b89c3a.woff') format('woff'),
    url('/style/fonts/accord-alternate/NoSpoon-e314542f42.otf') format('opentype'),
    url('/style/fonts/accord-alternate/NoSpoon-a2a7588e10.ttf') format('truetype');
}

@font-face {
  font-family: 'Accord Alternate';
  font-weight: normal;
  font-style: normal;
  font-display: block;
  src: url('/style/fonts/accord-alternate/Productions-c4a938744b.eot');
  src: url('/style/fonts/accord-alternate/Productions-c4a938744b.eot?#iefix') format('embedded-opentype'),
    url('/style/fonts/accord-alternate/Productions-566b0373ef.woff2') format('woff2'),
    url('/style/fonts/accord-alternate/Productions-8b46b360d0.woff') format('woff'),
    url('/style/fonts/accord-alternate/Productions.otf') format('opentype'),
    url('/style/fonts/accord-alternate/Productions-5d7982ded8.ttf') format('truetype');
}

@font-face {
  font-family: 'League Gothic';
  font-weight: normal;
  font-style: normal;
  font-display: block;
  src: url('/style/fonts/league-gothic/LeagueGothic-Regular-08e5fe93de.eot');
  src: url('/style/fonts/league-gothic/LeagueGothic-Regular-08e5fe93de.eot?#iefix') format('embedded-opentype'),
    url('/style/fonts/league-gothic/LeagueGothic-Regular-subset-bba7616556.woff2') format('woff2'),
    url('/style/fonts/league-gothic/LeagueGothic-Regular-subset-b14e1d437c.zopfli.woff') format('woff'),
    url('/style/fonts/league-gothic/LeagueGothic-Regular-subset-bef92f8094.otf') format('opentype'),
    url('/style/fonts/league-gothic/LeagueGothic-Regular-subset-7cbb1fa758.ttf') format('truetype');
}

@font-face {
  font-family: 'League Gothic';
  font-weight: normal;
  font-style: italic;
  font-display: block;
  src: url('/style/fonts/league-gothic/LeagueGothic-Italic-7625b277fa.eot');
  src: url('/style/fonts/league-gothic/LeagueGothic-Italic-7625b277fa.eot?#iefix') format('embedded-opentype'),
    url('/style/fonts/league-gothic/LeagueGothic-Italic-subset-195577272e.woff2') format('woff2'),
    url('/style/fonts/league-gothic/LeagueGothic-Italic-subset-420cd0df10.zopfli.woff') format('woff'),
    url('/style/fonts/league-gothic/LeagueGothic-Italic-subset-b29b95edb2.otf') format('opentype'),
    url('/style/fonts/league-gothic/LeagueGothic-Italic-subset-bc0c088273.ttf') format('truetype');
}

@font-face {
  font-family: 'Skolar Sans';
  font-weight: normal;
  font-style: normal;
  font-display: block;
  /* src: url('/style/fonts/skolar-sans/web/SkolarSansPEWeb-Rg.eot'); */
  /* src: url('/style/fonts/skolar-sans/web/SkolarSansPEWeb-Rg.eot?#iefix') format('embedded-opentype'), */
  src:
    url('/style/fonts/skolar-sans/SkolarSansPE-Rg-subset-c1b898d14c.woff2') format('woff2'),
    url('/style/fonts/skolar-sans/SkolarSansPE-Rg-subset-0f0328a86a.zopfli.woff') format('woff'),
    url('/style/fonts/skolar-sans/SkolarSansPE-Rg-subset-5fefe4234c.otf') format('opentype'),
    url('/style/fonts/skolar-sans/SkolarSansPE-Rg-subset-dc0e6c3294.ttf') format('truetype');
}

@font-face {
  font-family: 'Skolar Sans';
  font-weight: normal;
  font-style: italic;
  font-display: block;
  /* src: url('/style/fonts/skolar-sans/web/SkolarSansPEWeb-It.eot'); */
  /* src: url('/style/fonts/skolar-sans/web/SkolarSansPEWeb-It.eot?#iefix') format('embedded-opentype'), */
  src:
    url('/style/fonts/skolar-sans/SkolarSansPE-It-subset-89b44f43a9.woff2') format('woff2'),
    url('/style/fonts/skolar-sans/SkolarSansPE-It-subset-1da19aefe3.zopfli.woff') format('woff'),
    url('/style/fonts/skolar-sans/SkolarSansPE-It-subset-b2e2bdd2d5.otf') format('opentype'),
    url('/style/fonts/skolar-sans/SkolarSansPE-It-subset-ab70f2a8d6.ttf') format('truetype');
}

@font-face {
  font-family: 'Skolar Sans';
  font-weight: bold;
  font-style: normal;
  font-display: block;
  /* src: url('/style/fonts/skolar-sans/web/SkolarSansPEWeb-Bd.eot'); */
  /* src: url('/style/fonts/skolar-sans/web/SkolarSansPEWeb-Bd.eot?#iefix') format('embedded-opentype'), */
  src:
    url('/style/fonts/skolar-sans/SkolarSansPE-Bd-subset-c2e8ca1eb7.woff2') format('woff2'),
    url('/style/fonts/skolar-sans/SkolarSansPE-Bd-subset-0b9a74032a.zopfli.woff') format('woff'),
    url('/style/fonts/skolar-sans/SkolarSansPE-Bd-subset-21a9a287d1.otf') format('opentype'),
    url('/style/fonts/skolar-sans/SkolarSansPE-Bd-subset-e1db1ce6a6.ttf') format('truetype');
}

@font-face {
  font-family: 'Skolar Sans';
  font-weight: bold;
  font-style: italic;
  font-display: block;
  /* src: url('/style/fonts/skolar-sans/web/SkolarSansPEWeb-Bd.eot'); */
  /* src: url('/style/fonts/skolar-sans/web/SkolarSansPEWeb-Bd.eot?#iefix') format('embedded-opentype'), */
  src:
    url('/style/fonts/skolar-sans/SkolarSansPE-BdIt-subset-3ab0bb5c91.woff2') format('woff2'),
    url('/style/fonts/skolar-sans/SkolarSansPE-BdIt-subset-58570738fa.zopfli.woff') format('woff'),
    url('/style/fonts/skolar-sans/SkolarSansPE-BdIt-subset-6631ba04bd.otf') format('opentype'),
    url('/style/fonts/skolar-sans/SkolarSansPE-BdIt-subset-453d99b272.ttf') format('truetype');
}

* {
  box-sizing: border-box;
}

nav, div, p, ul, ol, dl, address {
  transition: margin 0.25s ease, padding 0.25s ease, height 0.25s ease, width 0.25s ease;
}

ul {
  padding: 0;
}

li + li {
  margin-top: .25rem;
}

body, .shading {
  min-height: 480px;
}

body {
  background-color: rgb(16, 16, 16);
  padding: 0;
  margin: 0;
  background-size: cover;
  height: 100vh;
  color: whitesmoke;
  color: rgb(235, 235, 235);
  text-align: left;
  font-family: skolar-sans-latin-extended-1, skolar-sans-latin-extended-2, 'Proxima Nova', 'Noto Sans', 'Source Sans Pro', 'Roboto', 'Helvetica Neue', Helvetica, sans-serif;
  font-family: 'Skolar Sans', 'Proxima Nova', 'Noto Sans', 'Source Sans Pro', 'Roboto', 'Helvetica Neue', Helvetica, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-y: scroll;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 1);
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: flex-start;
  width: 100vw;
  padding-top: 3.25rem;
}

main > .content {
  margin-top: -.5rem;
  padding: 0 2.25rem;
}

main > .content.content--collection {
  margin-top: 0;
  width: 100%;
  max-width: 90%;
  height: 100%;
  text-align: center;
  margin: 1.5rem auto;
}

.collection-heading {
  margin-top: 0;
}

.products {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 75vw;
  margin: 0 auto;
}

.product-item {
  text-decoration: none;
  width: 100%;
  max-width: 256px;
}

.product-item + .product-item {
  margin-top: 1.5rem;
}

@media only screen and (min-width: 42.6em) {
  .product-item + .product-item {
    margin-top: 0;
  }
}

.product-link {
  display: block;
  height: 256px;
  text-align: center;
}

.product-tagline {
  margin: 0;
  font-size: 1.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-colors {
  list-style: none;
  padding: 0;
  margin: .5rem auto 0;
  height: 1.6rem;
  font-size: 0;
}

.product-colors > li {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 .125rem;
}

.color {
  width: 1.5rem;
  height: 1.5rem;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  border-color: transparent;
  box-shadow: 1px 1px 0 rgba(235,235,235,.75);
  border-width: 1px;
  padding: 0;
  border-radius: 0;
}

.color.color--red {
  background-color: hsl(0, 50%, 50%);
}

.color.color--blue {
  background-color: hsl(200, 50%, 50%);
}

.view.view--about {
  /* max-width: 38.2rem; */
  max-width: 34.8rem;
}

@media only screen and (min-width: 34.8em) {
  @supports ((-webkit-hyphens: auto) or (hyphens: auto)) {
    .view.view--about {
      text-align: justify;
      -webkit-hyphens: auto;
          -ms-hyphens: auto;
              hyphens: auto;
    }
  }
}

picture {
  line-height: 0;
}

img, picture, video, audio, iframe {
  max-width: 100%;
}

.branding {
  font-size: 3rem;
  margin: 0 auto;
  line-height: 1.375;
  font-weight: bold;
}

.sub-brand {
  font-weight: normal;
}

@media only screen and (min-width: 21em) {
  .branding {
    font-size: 3.3rem;
  }
}

@media only screen and (min-width: 26em) {
  .branding {
    font-size: 3.6rem;
  }
}

.product-heading {
  margin: .75rem auto 0;
}

.product-category {
  margin: 0;
  font-size: 1.125rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.product-rundown > div {
  display: inline-block;
}

.product-rundown > :first-child::after {
  display: inline-block;
  content: ' · ';
  font-size: 1.5rem;
  line-height: 0;
  position: relative;
  top: .125rem;
  margin-left: .5rem;
  margin-right: .125rem;
}

.intro {
  margin: 0;
  line-height: 1.25;
  text-align: center;
}

.intro > p {
  margin: .75rem auto;
}

.intro > :first-child {
  margin-top: 0;
}

.intro > :last-child {
  margin-bottom: 0;
}

p, ul, ol, dl, address {
  max-width: 39rem;
  font-size: 1.25rem;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, address {
  width: 100%;
  /* margin-left: auto;
  margin-right: auto; */
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'League Gothic', sans-serif;
  text-transform: uppercase;
  font-weight: normal;
  line-height: 0.8;
}

.heading-with-button {
  display: flex;
  align-items: center;
}

h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 3rem;
}

h3, h4, h5, h6 {
  line-height: 0;
  font-family: inherit;
  font-weight: bold;
}

.film + .genre {
  margin-top: 0.5rem;
}

h3:not(.film), h4:not(.film), h5:not(.film), h6:not(.film) {
  text-transform: none;
}

h3.film, h4.film, h5.film, h6.film {
  margin-bottom: 0;
}

h3.film > cite, h4.film > cite, h5.film > cite, h6.film > cite {
  font-style: normal;
}

.film > cite,
.film > span {
  vertical-align: middle;
  line-height: 0.9;
}

.film > span {
  /* font-weight: normal; */
  font-size: .8em;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.75rem;
}

h5, h6 {
  font-size: 1rem;
}

.ww {
  display: inline-block;
}

.shading {
  background-image:
    linear-gradient(
      to right, rgba(16, 16, 16, 0.9),
      rgba(16, 16, 16, 0.9)
    ),
    url('/img/osman-rana-332236-unsplash--hi-contrast-bw@0,1875x-e04faf796a.jpg')
  ;
  background-repeat: repeat, no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.shading.shading--lighter {
  background-image:
    linear-gradient(
      to right, rgba(16, 16, 16, 0.8),
      rgba(16, 16, 16, 0.8)
    ),
    url('/img/osman-rana-332236-unsplash--hi-contrast-bw@0,1875x-e04faf796a.jpg')
  ;
}

@media
  only screen and (-webkit-min-device-pixel-ratio: 1.25),
  only screen and (-webkit-min-device-pixel-ratio: 2.0833333333333335),
  only screen and (min-resolution: 200dpi),
  only screen and (min-resolution: 1.25dppx),
  only screen and (min-width: 1351px)
{
  .shading {
    background-image:
      linear-gradient(
        to right, rgba(16, 16, 16, 0.9),
        rgba(16, 16, 16, 0.9)
      ),
      url('/img/osman-rana-332236-unsplash--hi-contrast-bw@0,25x-2de6cf5477.jpg')
    ;
  }
}

@media
  only screen and (-webkit-min-device-pixel-ratio: 1.25),
  only screen and (-webkit-min-device-pixel-ratio: 2.0833333333333335),
  only screen and (min-resolution: 200dpi),
  only screen and (min-resolution: 1.25dppx),
  only screen and (min-width: 1351px)
{
  .shading.shading--lighter {
    background-image:
      linear-gradient(
        to right, rgba(16, 16, 16, 0.8),
        rgba(16, 16, 16, 0.8)
      ),
      url('/img/osman-rana-332236-unsplash--hi-contrast-bw@0,25x-2de6cf5477.jpg')
    ;
  }
}

@media
  only screen and (min-width: 1351px) and (-webkit-min-device-pixel-ratio: 1.25),
  only screen and (min-width: 1351px) and (-webkit-min-device-pixel-ratio: 2.0833333333333335),
  only screen and (min-width: 1351px) and (min-resolution: 200dpi),
  only screen and (min-width: 1351px) and (min-resolution: 1.25dppx),
  only screen and (min-width: 2702px)
{
  .shading {
    background-image:
      linear-gradient(
        to right, rgba(16, 16, 16, 0.9),
        rgba(16, 16, 16, 0.9)
      ),
      url('/img/osman-rana-332236-unsplash--hi-contrast-bw@0,5x-b54e2a4f0b.jpg')
    ;
  }
}

@media
  only screen and (min-width: 1351px) and (-webkit-min-device-pixel-ratio: 1.25),
  only screen and (min-width: 1351px) and (-webkit-min-device-pixel-ratio: 2.0833333333333335),
  only screen and (min-width: 1351px) and (min-resolution: 200dpi),
  only screen and (min-width: 1351px) and (min-resolution: 1.25dppx),
  only screen and (min-width: 2702px)
{
  .shading.shading--lighter {
    background-image:
      linear-gradient(
        to right, rgba(16, 16, 16, 0.8),
        rgba(16, 16, 16, 0.8)
      ),
      url('/img/osman-rana-332236-unsplash--hi-contrast-bw@0,5x-b54e2a4f0b.jpg')
    ;
  }
}

@media
  only screen and (min-width: 2702px) and (-webkit-min-device-pixel-ratio: 1.25),
  only screen and (min-width: 2702px) and (-webkit-min-device-pixel-ratio: 2.0833333333333335),
  only screen and (min-width: 2702px) and (min-resolution: 200dpi),
  only screen and (min-width: 2702px) and (min-resolution: 1.25dppx),
  only screen and (min-width: 4052px)
{
  .shading {
    background-image:
      linear-gradient(
        to right, rgba(16, 16, 16, 0.9),
        rgba(16, 16, 16, 0.9)
      ),
      url('/img/osman-rana-332236-unsplash--hi-contrast-bw@0,75x-23611b9a5b.jpg')
    ;
  }
}

@media
  only screen and (min-width: 2702px) and (-webkit-min-device-pixel-ratio: 1.25),
  only screen and (min-width: 2702px) and (-webkit-min-device-pixel-ratio: 2.0833333333333335),
  only screen and (min-width: 2702px) and (min-resolution: 200dpi),
  only screen and (min-width: 2702px) and (min-resolution: 1.25dppx),
  only screen and (min-width: 4052px)
{
  .shading.shading--lighter {
    background-image:
      linear-gradient(
        to right, rgba(16, 16, 16, 0.8),
        rgba(16, 16, 16, 0.8)
      ),
      url('/img/osman-rana-332236-unsplash--hi-contrast-bw@0,75x-23611b9a5b.jpg')
    ;
  }
}

@media
  only screen and (min-width: 4052px) and (-webkit-min-device-pixel-ratio: 1.25),
  only screen and (min-width: 4052px) and (-webkit-min-device-pixel-ratio: 2.0833333333333335),
  only screen and (min-width: 4052px) and (min-resolution: 200dpi),
  only screen and (min-width: 4052px) and (min-resolution: 1.25dppx),
  only screen and (min-width: 5403px)
{
  .shading {
    background-image:
      linear-gradient(
        to right, rgba(16, 16, 16, 0.9),
        rgba(16, 16, 16, 0.9)
      ),
      url('/img/osman-rana-332236-unsplash--hi-contrast-bw-ff5fbaf82b.jpg')
    ;
  }
}

@media
  only screen and (min-width: 4052px) and (-webkit-min-device-pixel-ratio: 1.25),
  only screen and (min-width: 4052px) and (-webkit-min-device-pixel-ratio: 2.0833333333333335),
  only screen and (min-width: 4052px) and (min-resolution: 200dpi),
  only screen and (min-width: 4052px) and (min-resolution: 1.25dppx),
  only screen and (min-width: 5403px)
{
  .shading.shading--lighter {
    background-image:
      linear-gradient(
        to right, rgba(16, 16, 16, 0.8),
        rgba(16, 16, 16, 0.8)
      ),
      url('/img/osman-rana-332236-unsplash--hi-contrast-bw-ff5fbaf82b.jpg')
    ;
  }
}

.shading.shading--splash {
  height: 100%;
  min-height: 30rem;
}

.shading.shading--splash > main {
  justify-content: center;
}

a, a:visited, .nav-link {
  color: rgb(235, 235, 235);
}

a:hover, a:focus {
  text-decoration: none;
}

.site-nav {
  flex: 1;
  text-align: center;
  margin: 3rem auto;
  font-size: 1.25rem;
  line-height: 0.9;
}

article + article {
  margin-top: 1.5rem;
}

summary {
  cursor: default;
}

.site-nav, .nav-submenu {
  height: 2rem;
}

.nav-submenu,
.nav-submenu__menu {
  width: 6rem;
}

.nav-content {
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.nav-link {
  margin: 0 0.25rem;
  white-space: nowrap;
  display: inline-block;
  font-family: 'League Gothic', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 2.5rem;
}

@supports ( display: flex ) {
  .nav-link {
    margin: 0;
  }
}

.nav-content {
  display: flex;
  justify-content: space-evenly;
}

.nav-content:has( a:nth-child(3) ) {
  justify-content: space-between;
}

.footer {
  position: relative;
  z-index: 0;
  min-height: 36px;
  margin: .75rem auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.footer p {
  margin: .25rem auto;
}

.social-media {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 12.9rem;
}

.copyright {
  max-width: 17.5rem;
}

.copyright,
.social-media > a {
  opacity: 0.5;
  transition: opacity .25s ease;
}

.social-media > a {
  vertical-align: middle;
}

.copyright:hover,
.copyright:focus,
.social-media > a:hover,
.social-media > a:focus {
  opacity: 1;
}

.footer p:first-child,
.footer p + p {
  margin-top: 0;
}

.footer p:last-child {
  margin-bottom: 0;
}

.footer, .footer p {
  font-size: .5rem;
  font-size: .75rem;
}

.columns {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-width: 39rem;
     -moz-column-width: 39rem;
          column-width: 39rem;
  width: 79rem;
  -webkit-column-gap: 1rem;
     -moz-column-gap: 1rem;
          column-gap: 1rem;
}

.column {
  -webkit-column-break-inside: avoid;
     -moz-column-break-inside: avoid;
          break-inside: avoid-column;
} 

.columns > .column:first-child > h2 {
  margin-top: 0;
}

button.speak, .button.speak {
  background-color: transparent;
  color: inherit;
  border: none;
  padding: .75rem;
  margin-left: .3333rem;
  border-radius: 3rem;
  line-height: 0;
}

/* Material Button - https://codepen.io/finnhvman/pen/MQyJxV */
.speak {
  position: relative;
  transition: box-shadow 0.2s;
  background-color: rgb(33, 150, 243);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.speak::-moz-focus-inner {
  border: none;
}

/* Overlay */
.speak::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(255, 255, 255);
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: inherit;
}

/* Ripple */
.speak::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  padding: 50%;
  width: 32px; /* Safari */
  height: 32px; /* Safari */
  background-color: rgb(255, 255, 255);
  opacity: 0;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  transition: opacity 1s, -webkit-transform 0.5s;
  transition: opacity 1s, transform 0.5s;
  transition: opacity 1s, transform 0.5s, -webkit-transform 0.5s;
  border-radius: inherit;
}

/* Hover, Focus */
.speak:hover,
.speak:focus {
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}

.speak:hover::before {
  opacity: 0.08;
}

.speak:focus::before {
  opacity: 0.24;
}

.speak:hover:focus::before {
  opacity: 0.3;
}

/* Active */
.speak:active {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.speak:active::after {
  opacity: 0.32;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
  transition: -webkit-transform 0s;
  transition: transform 0s;
  transition: transform 0s, -webkit-transform 0s;
}

/* Disabled */
.speak:disabled {
  color: rgba(0, 0, 0, 0.38);
  background-color: rgba(0, 0, 0, 0.12);
  box-shadow: none;
  cursor: initial;
}

.speak:disabled::before {
  opacity: 0;
}

.speak:disabled::after {
  opacity: 0;
}
/* End Material Button */

nav, .hamburger, audio, .volume {
  z-index: 5;
}

#checkout {
  width: 100%;
}

.cart {
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  background: rgb(16, 16, 16);
  color: rgb(235, 235, 235);
  padding: 2.1rem 0.75rem;
  width: 29rem;
  max-width: 100vw;
  height: 100vh;
  -webkit-transform: translate(30rem);
          transform: translate(30rem);
  transition: 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) -webkit-transform;
  transition: 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) transform;
  transition: 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) transform, 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) -webkit-transform;
  box-shadow: 0 0 1rem rgba(0,0,0,0.5);
  z-index: 4;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.cart[data-empty] {
  justify-content: center;
}

.cart-heading:first-child {
  margin-top: 0;
  color: transparent;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.cart-heading + .cart-text {
  margin-top: 0;
}

.cart-contents {
  transition: 0.25s ease height, 0.75s ease opacity;
  width: 100%;
  text-align: center;
}

.cart-contents img {
  margin-left: auto;
  margin-right: auto;
}

#cart-empty {
  transition: 0.75s ease opacity;
}

#cart-empty[hidden] {
  opacity: 0;
}

button, .button {
  background: rgb(235, 235, 235);
  color: rgb(16, 16, 16);
  border: 1px solid transparent;
  font-size: 1.5rem;
  padding: 0.375rem .75rem;
  border-bottom: 0.25rem solid hsla(0, 0%, 40%, 0.5);
  border-right: 0.125rem solid hsla(0, 0%, 50%, 0.5);
  position: relative;
  transition: 0.25s ease height, 0.25s ease opacity;
}

button, .button, [type="text"], [type="number"] {
  border-radius: .3rem;
}

[type="text"], [type="number"] {
  border-color: transparent;
}

button:active {
  border-bottom-color: transparent;
  border-right-color: transparent;
  top: .25rem;
  left: .125rem;
}

button[disabled], .button[disabled] {
  opacity: 0.25;
  cursor: not-allowed;
}

.hamburger {
  position: relative;
  height: 3rem;
  padding: 0 !important;
  width: 25px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
}

:checked ~ .cart {
  -webkit-transform: none;
          transform: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cart-links {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 90%;
  max-width: 39rem;
  margin-left: auto;
  margin-right: auto;
}

.cart-links > li + li {
  margin-top: 1rem;
}

.brand-name {
  white-space: nowrap;
}

.branding {
  font-family: 'Accord Alternate', 'AccordAlternate', 'Ubuntu', 'Noto Sans', 'Source Sans Pro', 'Roboto', 'Helvetica Neue', Helvetica, sans-serif;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  font-size: 2.8rem;
  width: 256px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
}

.branding.branding--nav {
  display: block;
  width: auto;
  margin: 0 auto;
}

.branding:lang(ja) {
  font-family: inherit;
}

.brand,
.sub-brand {
  transition: margin ease 0.25s, height ease 0.25s;
  width: 256px;
  height: 61px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.branding.branding--nav > .brand,
.branding.branding--nav > .sub-brand {
  width: auto;
  display: inline-block;
  display: inline-flex;
}

.sub-brand {
  font-weight: normal;
  margin-top: 1.1rem;
}

.branding.branding--nav > .sub-brand {
  margin-top: 0;
}

.logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.2rem;
  width: 82.32421875%;
}

.language {
  font-size: 1.5rem;
  z-index: 2;
  padding-left: .75rem;
  width: 10rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: left;
  width: 4.5rem;
}

.cart-toggle {
  width: 2.25rem;
}

.language a {
  display: inline-block;
}

.language a:hover,
.language a:focus {
  text-decoration: underline;
}

.language a:not(.active) {
  text-decoration: none;
}

.controls {
  height: 3.7rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: auto;
  margin: .5rem auto;
  margin: 0;
  position: fixed;
  top: 0;
  padding: 1rem 0.5rem;
  z-index: 1;
  /* box-shadow: 0 1rem 0.4rem rgb(16 16 16); */
}

@media only screen and (min-width: 44em) {
  .controls {
    flex-direction: row;
    margin: .5rem auto .75rem auto;
    margin: 0;
  }
}

.cart-links ul {
  list-style-type: none;
  margin-top: .75rem;
  padding-left: 1.5rem;
}

.cart-links ul > li::before {
  content: '▶ ';
  margin-right: .5rem;
  display: inline-block;
  vertical-align: middle;
  font-size: .5em;
}

.inline-block {
  display: inline-block;
  vertical-align: middle;
}

.inline-block.inline-block--baseline {
  vertical-align: baseline;
}

.controls__right {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  padding-right: .75rem;
  width: 2.25rem;
  text-align: right;
}

.product__header {
  margin-bottom: 1.5rem;
}

.product__name {
  margin-bottom: 0;
}

.product__tagline {
  margin: 0 auto 0.25rem;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: column;
  width: 99.4rem;
  max-width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 44em) {
  .row {
    flex-direction: row;
  }

  .column {
    width: 50%;
  }
}

.column {
  width: 100%;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}


.column.column--image {
  text-align: center;
  width: 100%;
}

.column.column--image > img,
.column.column--image > picture > img {
  width: 100%;
}

@media only screen and (min-width: 44em) {
  .column.column--image {
    text-align: right;
  }
}

dd {
  margin: 0;
}

figure {
  margin: 0;
}

blockquote {
  padding: .25rem 1rem;
  margin: 0 0 1rem -1.25rem;
  border-left: .25rem solid #eeeeee;
  padding: .25rem 1rem .5rem;
}

blockquote > p {
  margin: 0;
}

figure > blockquote + figcaption {
  margin-top: -0.5rem;
  margin-bottom: 1rem;
}

figcaption {
  font-style: italic;
  color: #aaa;
}

.column + .column {
  margin-top: 1rem;
}

@media only screen and (min-width: 44em) {
  .column + .column {
    margin: 1rem 0 0 2rem;
  }
}

input, select, textarea {
  font-size: 1.125rem;
  height: 1.85rem;
}

@media only screen and (min-width: 44em) {
  .column > img,
  .column > picture > img {
    position: sticky;
    position: -webkit-sticky;
    top: 12.5%;
  }
}

.hpg-wizard table {
  line-height: 1;
}

.table-cell-wrapper {
  height: 1.9rem;
  margin: .125rem;
  opacity: 1;
  overflow: hidden;
  transition: 0.25s ease height, 0.75s ease opacity;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.table-cell-wrapper.table-cell-wrapper--cart {
  height: 8rem;
  justify-content: center;
}

.table-column.table-column--actions > .table-cell-wrapper {
  width: 1.5rem;
}

td:first-child > .table-cell-wrapper {
  margin-left: 0;
}

.repeater [data-repeater-item]:not(:first-child) > td > .table-cell-wrapper {
  height: 0;
  opacity: 0;
}

table {
  border-collapse: collapse;
}

@media only screen and (min-width: 44em) {
  .table-column.table-column--colorway,
  .table-column.table-column--qty {
    width: auto;
  }
}

td.table-colum {
  overflow: hidden;
}

.qty {
  width: 4.2em;
  width: 3.5em;
}

.table-action {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  line-height: 0;
  font-size: 1rem;
  border: .00625em solid transparent;
  border-bottom: 0.125em solid hsla(0, 0%, 40%, 0.5);
  border-right: 0.0125em solid hsla(0, 0%, 50%, 0.5);
}

.table-action.table-action--add {
  background-color: #5cb85c;
  border-color: hsla(110,100%,25%,1);
  margin-right: auto;
}

.table-action.table-action--remove {
  background-color: #d9534f;
  border-color: hsla(0,100%,25%,1);
}

button:hover,
button:active {
  outline: none;
}

tbody > tr:not(:first-child) > .table-column.table-column--actions > .table-action.table-action--add {
  display: none;
}

fieldset {
  margin-bottom: 1rem
}

.row + .row {
  margin-top: 1.5rem;
}

@media only screen and (min-width: 44em) {
  .row + .row {
    margin-top: 3rem;
  }
}

fieldset {
  max-width: 100%;
  margin: 0 auto;
  height: 6rem;
  border: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  margin-bottom: 1.25rem;
}

@media only screen and (min-width: 44em) {
  fieldset {
    margin-bottom: 0;
  }
}

#add-to-cart {
  width: 100%;
  text-align: left;
}

#your-order {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  flex-wrap: wrap;
  max-width: 18rem;
}

@media only screen and (min-width: 44em) {
  #your-order {
    justify-content: space-around;
    margin: 0 auto;
    max-width: 100%;
  }
}

@media only screen and (min-width: 69em) {
  #your-order {
    max-width: 80%;
  }
}

#your-order > * {
  display: inline-block;
  vertical-align: middle;
  height: auto;
}

@media only screen and (min-width: 44em) {
  #your-order > * {
    flex: .3333;
  }
}

[itemprop="offers"] {
  width: 8rem;
  margin: 0;
  text-align: left;
}

#add-to-cart-cta {
  font-size: 1.2rem;
  white-space: nowrap;
}

@media only screen and (min-width: 52em) {
  #add-to-cart-cta {
    font-size: 1.5rem;
  }
}

.button-holder.button-holder--order > table,
.button-holder.button-holder--add {
  margin: 0 auto;
}

@media only screen and (min-width: 44em) {
  .button-holder.button-holder--order > table,
  .button-holder.button-holder--add {
    position: relative;
    left: 0.4375rem;
    width: 20.5rem;
  }
}

.button-holder.button-holder--add {
  margin-top: .25rem;
}

@media only screen and (min-width: 44em) {
  .button-holder.button-holder--offers {
    order: 1;
  }

  #your-order > .button-holder.button-holder--order {
    order: 2;
    flex: 1;
  }

  .button-holder.button-holder--add-to-cart {
    order: 3;
  }
}

.notice {
  padding: 1rem;
  border-radius: .3em;
  border: .125rem solid rgb(235,235,235);
  margin-bottom: 1.75rem;
}

.notice.notice--purple {
  background-color: hsla( 270, 33.333333%, 50%, .8 );
  border: none;
}

.product-colors > li {
  vertical-align: top;
}

/* Duochromatic Colorways */
.color {
  border-left: 0;
  border-top: 0;
}

.color.color--white-base {
  border-bottom: 1.5rem solid white;
}


.color.color--red-accent {
  border-right: 1.5rem solid #cc0026;
}