@charset "UTF-8";
* {
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility; }

body {
  margin: 0;
  padding: 0;
  color: white;
  background: black;
  font-family: 'Muli';
  font-weight: 300;
  position: relative; }

a {
  color: #919711;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

sup {
  font-size: 65%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em; }

@media (max-width: 768px) {
  .no-mobile {
    display: none; } }

.aparey {
  font-family: 'Aparey', Georgia, serif; }

.bronze {
  color: #ce691a; }

.contain {
  position: relative;
  z-index: 9; }

section {
  height: 100%;
  width: 100%;
  position: relative;
  -webkit-transition: opacity .5s;
  -moz-transition: opacity .5s;
  -ms-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s; }
  section .header {
    height: 100%;
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.5) inset, 0 -10px 20px rgba(0, 0, 0, 0.5) inset;
    position: relative; }
  section .full-center {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 25%; }
    @media (max-width: 768px) {
      section .full-center {
        min-height: auto;
        width: 75%;
        height: 50%;
        margin: 0 13%;
        display: block; } }
  section h1 {
    font-size: 36px;
    text-align: center;
    font-weight: 300;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }
  section .body {
    padding: 80px 0; }
    @media (max-width: 768px) {
      section .body {
        padding: 40px 0; } }
    section .body.thin {
      padding: 20px 0; }
    section .body img {
      max-width: 100%; }
    section .body .center {
      text-align: center; }
    section .body .lit {
      font-size: 16px;
      text-align: center;
      line-height: 140%;
      text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.75);
      padding: 0 20px; }
    section .body .intro-season {
      font-size: 150%;
      font-family: 'Aparey', Georgia, serif;
      color: #c57a3e;
      padding-bottom: .5em;
      display: block; }
    section .body .green {
      color: #919711; }
    section .body .white-box {
      background: white;
      border: 3px double black;
      max-width: 900px;
      margin: 0 auto;
      padding: 40px 100px;
      color: black;
      font-family: 'Muli', Arial, sans-serif;
      line-height: 150%;
      position: relative; }
      @media (max-width: 960px) {
        section .body .white-box {
          max-width: 85% !important;
          padding: 20px !important; } }
      section .body .white-box .callout {
        width: 25%;
        padding: 40px 6% 40px 0;
        border-right: 1px solid #ccc;
        font-size: 28px;
        color: #666;
        line-height: 125%;
        position: absolute;
        top: 50%;
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        font-family: 'Aparey', Georgia, serif;
        text-align: right; }
        @media (max-width: 768px) {
          section .body .white-box .callout {
            position: relative;
            width: 100%;
            border: 0;
            padding: 0;
            -o-transform: translateY(0);
            transform: translateY(0);
            top: auto;
            text-align: center; } }
        section .body .white-box .callout strong {
          color: #c19469; }
        section .body .white-box .callout .author {
          font-style: italic;
          font-weight: 400;
          font-size: 14px;
          line-height: 120%;
          padding-top: 10px;
          font-family: 'Muli', Arial, sans-serif; }
      section .body .white-box .ingredients {
        width: 60%;
        margin-left: 39.5%; }
        @media (max-width: 768px) {
          section .body .white-box .ingredients {
            width: 100%;
            margin: 0; } }
        @media (max-width: 768px) {
          section .body .white-box .ingredients {
            text-align: center; } }
        section .body .white-box .ingredients h2 {
          text-align: center;
          font-size: 16px;
          line-height: 150%;
          font-family: 'Aparey', Georgia, serif;
          text-transform: uppercase;
          letter-spacing: 10px;
          color: #919711;
          padding-bottom: 10px; }
        section .body .white-box .ingredients ul {
          text-align: center; }
          section .body .white-box .ingredients ul li {
            display: inline-block; }
            section .body .white-box .ingredients ul li:before {
              content: "  •  "; }
          @media (max-width: 480px) {
            section .body .white-box .ingredients ul {
              text-align: left;
              list-style-type: disc;
              margin: 0 20px; }
              section .body .white-box .ingredients ul li {
                display: list-item; }
                section .body .white-box .ingredients ul li:before {
                  content: ""; } }
        section .body .white-box .ingredients hr {
          margin: 30px auto;
          width: 25%; }
          section .body .white-box .ingredients hr.mobile {
            display: none; }
            @media (max-width: 768px) {
              section .body .white-box .ingredients hr.mobile {
                display: block; } }
        section .body .white-box .ingredients .warning {
          font-size: 80%;
          color: #999;
          padding-top: 30px;
          text-align: center;
          line-height: 120%; }
          @media (max-width: 480px) {
            section .body .white-box .ingredients .warning {
              text-align: left; } }

.cf:before,
.cf:after {
  content: " ";
  display: table; }

.cf:after {
  clear: both; }

.drink-nav {
  z-index: 10;
  position: fixed;
  right: 10px;
  top: 10px;
  top: 50%;
  -o-transform: translateY(-50%);
  transform: translateY(-50%); }
  @media (max-width: 768px) {
    .drink-nav {
      display: none; } }
  .drink-nav li {
    padding: 5px;
    float: right;
    clear: both;
    overflow: hidden; }
    .drink-nav li a {
      display: block;
      width: 15px;
      height: 15px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 15px;
      position: relative;
      overflow: hidden;
      border: 2px solid #ce691a;
      font-size: 13px;
      color: white; }
      .drink-nav li a.post-load {
        -webkit-transition: .25s;
        -moz-transition: .25s;
        -ms-transition: .25s;
        -o-transition: .25s;
        transition: .25s; }
      .drink-nav li a span {
        position: absolute;
        top: 50%;
        color: rgba(255, 255, 255, 0);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: .25s;
        -moz-transition: .25s;
        -ms-transition: .25s;
        -o-transition: .25s;
        transition: .25s;
        display: none;
        line-height: 130%;
        width: 185px;
        text-align: center; }
      .drink-nav li a:hover {
        background: rgba(0, 0, 0, 0.75);
        border-color: white;
        text-decoration: none;
        width: 200px;
        height: 30px; }
        .drink-nav li a:hover span {
          display: block;
          color: white; }
      .drink-nav li a.active {
        border-color: white; }

#intro .header-bg {
  background: url(../images/bg-intro-temp.jpg) center center no-repeat;
  background-size: contain;
  background-attachment: fixed; }
  @media (max-width: 480px) {
    #intro .header-bg {
      background-position: center 25%; } }
#intro .body {
  background: url(../images/bg-texture-leather.jpg) center center no-repeat;
  background-size: cover; }

#winter-warmer .header {
  background: url(../images/01_winter_warmer.jpg) center center no-repeat;
  background-size: cover;
  background-attachment: fixed; }
  #winter-warmer .header h1 {
    background: url(../images/title-winterwarmer.png) center center no-repeat;
    background-size: contain;
    text-indent: -9999px;
    overflow: hidden;
    min-height: 300px; }
#winter-warmer .body {
  background: url(../images/bg-texture-pine-temp.jpg) center center no-repeat;
  background-size: cover; }
  #winter-warmer .body h2 {
    color: #a83a37; }
  #winter-warmer .body .white-box {
    border-color: #e2ceba; }

#eight-daze .header {
  background: url(../images/02_eight-daze.jpg) center center no-repeat;
  background-size: cover;
  background-attachment: fixed; }
  #eight-daze .header h1 {
    background: url(../images/title-eightdaze.png) center center no-repeat;
    background-size: contain;
    text-indent: -9999px;
    overflow: hidden;
    min-height: 200px; }
#eight-daze .body {
  background: url(../images/bg-texture-dreidl-temp.jpg) center center no-repeat;
  background-size: cover; }
  #eight-daze .body h2 {
    color: #bf232c; }
  #eight-daze .body .white-box {
    border-color: #e3b148; }

#solstice-sipper .header {
  background: url(../images/03_solstice-sipper.jpg) center center no-repeat;
  background-size: cover;
  background-attachment: fixed; }
  #solstice-sipper .header h1 {
    background: url(../images/title-solsticesipper.png) center center no-repeat;
    background-size: contain;
    text-indent: -9999px;
    overflow: hidden;
    min-height: 300px; }
#solstice-sipper .body {
  background: url(../images/bg-texture-plaid-temp.jpg) center center no-repeat;
  background-size: cover; }
  #solstice-sipper .body h2 {
    color: #2f4159; }
  #solstice-sipper .body .white-box {
    border-color: #2f4159;
    padding: 80px 100px; }

#m-hatten .header {
  background: url(../images/04_M-Hatten.jpg) center center no-repeat;
  background-size: cover;
  background-attachment: fixed; }
  #m-hatten .header h1 {
    background: url(../images/title-mhatten.png) center center no-repeat;
    background-size: contain;
    text-indent: -9999px;
    overflow: hidden;
    min-height: 225px; }
#m-hatten .body {
  background: url(../images/bg-texture-strands-temp.jpg) center center no-repeat;
  background-size: cover; }
  #m-hatten .body h2 {
    color: #be7d59; }
  #m-hatten .body .white-box {
    border-color: #a5a693; }

#red-ryder .header {
  background: url(../images/05_Red-Ryder.jpg) center center no-repeat;
  background-size: cover;
  background-attachment: fixed; }
  #red-ryder .header h1 {
    background: url(../images/title-redryder.png) center center no-repeat;
    background-size: contain;
    text-indent: -9999px;
    overflow: hidden;
    min-height: 225px; }
#red-ryder .body {
  background: url(../images/bg-texture-wood-grain-temp.jpg) center center no-repeat;
  background-size: cover; }
  #red-ryder .body h2 {
    color: #c13633; }
  #red-ryder .body .white-box {
    border-color: #c13633; }

#magical-minty-meltdown .header {
  background: url(../images/06_Minty-Meltdown.jpg) center center no-repeat;
  background-size: cover;
  background-attachment: fixed; }
  #magical-minty-meltdown .header h1 {
    background: url(../images/title-magicalmintymeltdown.png) center center no-repeat;
    background-size: contain;
    text-indent: -9999px;
    overflow: hidden;
    min-height: 200px; }
#magical-minty-meltdown .body {
  background: url(../images/bg-texture-peppermint-temp.jpg) center center no-repeat;
  background-size: cover; }
  #magical-minty-meltdown .body h2 {
    color: #5b2117; }
  #magical-minty-meltdown .body .white-box {
    border-color: #582920; }

#eggcellent-holidays .header {
  background: url(../images/07_Eggcellent.jpg) center center no-repeat;
  background-size: cover;
  background-attachment: fixed; }
  #eggcellent-holidays .header h1 {
    background: url(../images/title-eggcellentholidays.png) center center no-repeat;
    background-size: contain;
    text-indent: -9999px;
    overflow: hidden;
    min-height: 300px; }
#eggcellent-holidays .body {
  background: url(../images/bg-texture-eggcellent-temp.jpg) center center no-repeat;
  background-size: cover; }
  #eggcellent-holidays .body h2 {
    color: #e0a879; }
  #eggcellent-holidays .body .white-box {
    border-color: #b78c44; }

#whipped-russian .header {
  background: url(../images/08_Russian.jpg) center center no-repeat;
  background-size: cover;
  background-attachment: fixed; }
  #whipped-russian .header h1 {
    background: url(../images/title-whippedrussian.png) center center no-repeat;
    background-size: contain;
    text-indent: -9999px;
    overflow: hidden;
    min-height: auto;
    width: 75%;
    height: 50%;
    margin: 0 13%;
    display: block; }
#whipped-russian .body {
  background: url(../images/bg-texture-constructivist-temp.jpg) center center no-repeat;
  background-size: cover; }
  #whipped-russian .body h2 {
    color: #653e1b; }
  #whipped-russian .body .white-box {
    border-color: #5a617c; }

#bloody-merry .header {
  background: url(../images/09_Bloody-Merry.jpg) center center no-repeat;
  background-size: cover;
  background-attachment: fixed; }
  #bloody-merry .header h1 {
    background: url(../images/title-bloodymerry.png) center center no-repeat;
    background-size: contain;
    text-indent: -9999px;
    overflow: hidden;
    min-height: 250px; }
#bloody-merry .body {
  background: url(../images/bg-texture-impressionist-temp.jpg) center center no-repeat;
  background-size: cover; }
  #bloody-merry .body h2 {
    color: #94b3a7; }
  #bloody-merry .body .white-box {
    border-color: #94b3a7; }

#dom-savini .body {
  background: url(../images/bg-texture-leather.jpg) center center no-repeat;
  background-size: cover;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.25) inset; }
  #dom-savini .body img {
    max-width: 50%; }
    @media (max-width: 768px) {
      #dom-savini .body img {
        max-width: 75%; } }

/* Fix iOS's removal of fixed backgrounds */
html[data-platform*=iPad] section .header,
html[data-platform*=iPad] section .header-bg,
html[data-platform*=iPhone] section .header,
html[data-platform*=iPhone] section .header-bg {
  background-attachment: scroll !important; }