html, body {min-height: 100vh;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main {display: block;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, main {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
ol, ul {list-style:none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,  q:before, q:after {content:''; content:none;}
del {text-decoration: line-through;}
svg:not(:root) {overflow: hidden;}
abbr[title], dfn[title] {border-bottom: 1px dotted; cursor: help;}
table {width: 100%; border-collapse: collapse; border-spacing: 0; empty-cells: show; table-layout: fixed;}
input, select {vertical-align: middle;}
input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
button, input, select, textarea {margin: 0; font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;}
textarea {resize: none;}
button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer;}
button[disabled], html input[disabled] {cursor: default;}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0; *height: 13px; *width: 13px;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
img {display: block; max-width: 100%; height: auto !important;}
td img {vertical-align: top;}
address {display: inline;}
code, kbd, pre, samp {font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 14px;}
pre {white-space: pre; white-space: pre-wrap; word-wrap: break-word;}
a:hover, a:active {outline: none;}
a, a:hover, a:visited {text-decoration: none;}
iframe {display: block; max-width: 100%;}
fieldset {border: 1px solid #c0c0c0; padding: 16px;}
::-webkit-input-placeholder {color: #fff; font-family: "Raleway", Arial, sans-serif; font-size: 48px; font-weight: 300;}
:-moz-placeholder {color: #fff; font-family: "Raleway", Arial, sans-serif; font-size: 48px; font-weight: 300;}
::-moz-placeholder {color: #fff; font-family: "Raleway", Arial, sans-serif; font-size: 48px; font-weight: 300;}
:-ms-input-placeholder {color: #fff; font-family: "Raleway", Arial, sans-serif; font-size: 48px; font-weight: 300;}
*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.cf:before, .cf:after {content:""; display:table;} .cf:after {clear:both;}
@font-face {
  font-family: 'zap';
  src: url('fonts/zapf_humanist_601_bt-webfont.woff2') format('woff2'),
       url('fonts/zapf_humanist_601_bt-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'julesbig';
  src: url('fonts/jules_big_bold_swashes-webfont.woff2') format('woff2'),
       url('fonts/jules_big_bold_swashes-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'brandonb';
  src: url('fonts/brandon_bld_2-webfont.woff2') format('woff2'),
       url('fonts/brandon_bld_2-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'brandoni';
  src: url('fonts/brandon_reg_it_1-webfont.woff2') format('woff2'),
       url('fonts/brandon_reg_it_1-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'didone';
  src: url('fonts/theanodidot-regular-webfont.woff2') format('woff2'),
       url('fonts/theanodidot-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font: 16px/1.6em "brandonb", Helvetica, Arial, sans-serif;
  background-color: #e6e6e6;
  color: #333;
  overflow-x: hidden;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -ms-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  position: relative;
}
.wrapper {
  width: 660px;
  height: 580px;
  margin: 0 auto;
}
  .slide {position: relative; background-color: #e6e6e6; display: none;}
    .slide.current {display: block;}
    .slide.question .content {
      width: 94%;
      margin: 0 auto;
      position: relative;
      z-index: 400;
      top: 50%;
      -moz-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }
      .slide.question .content .content-left {
        width: 40%;
        float: left;
        padding: 0 16px 0 0;
      }
      .slide.question .content .content-right {
        width: 60%;
        float: left;
      }
        .slide.question.q6 .content .content-right, .slide.question.q9 .content .content-right {padding: 24px 0 0 0;}
        .slide.question.q10 .content .content-right {padding: 54px 0 0 0;}
        .slide.question .content .content-left p {
          font-size: 16px; 
          text-transform: uppercase;
          margin: 0 0 8px 0;
          padding: 8px 0 0 0;
          font-family: "didone", Georgia, serif;
        }
        .slide.question .content .content-left h3 {
          font-size: 24px;
          text-transform: uppercase;
          font-weight: 400;
          line-height: 1.2em;
        }
        .slide.question .content .content-right a {
          display: block;
          font-size: 14px;
          margin: 0 0 8px 0;
          background-color: #fff;
          padding: 6px 0;
          text-align: center;
          color: #333;
          text-transform: uppercase;
          -webkit-transition: background 300ms linear;
          -moz-transition: background 300ms linear;
          -ms-transition: background 300ms linear;
          -o-transition: background 300ms linear;
          transition: background 300ms linear;
        }
          .slide.question .content .content-right a:last-of-type {margin: 0;}
          .slide.question .content .content-right a:hover, .slide.question .content .content-right a.selected {background-color: #6dc199; color: #fff;}
.nav {width: 100%; position: absolute; left: 0; top: 16px; display: none;}
.nav.active {display: block; z-index: 9999;}
  .nav a {
    display: inline-block;
    width: 14px;
    height: 14px;
    font: 0/0 a;
    color: transparent;
    background-color: #fff;
    border-radius: 50%;
    margin: 0 3px;
    -webkit-transition: background 300ms linear;
    -moz-transition: background 300ms linear;
    -ms-transition: background 300ms linear;
    -o-transition: background 300ms linear;
    transition: background 300ms linear;
    position: relative;
    top: 5px;
    vertical-align: top;
  }
    .nav a.current, .nav a:hover {background-color: #6dc199;}
  .nav .nav-inner {display: table; margin: 0 auto; height: 24px; font-size: 0; position: relative; padding: 0 0 0 17px;}
    .nav .nav-inner:before {
      display: block;
      content: "";
      width: 14px;
      height: 24px;
      background: url(images/nav-icon.png) no-repeat scroll;
      position: absolute;
      left: 0;
      top: 0;
    }
  .slide.question .next-slide, .slide.question .view-result {
    display: block;
    width: 120px;
    background-color: #6dc199; 
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    text-align: center;
    padding: 6px 0;
    position: absolute;
    bottom: 32px;
    left: 50%;
    margin: 0 0 0 -60px;
  }
    .slide.question .next-slide span, .slide.question .view-result span {
      display: inline-block;
      padding: 0 12px 0 0;
      background: url(images/get-started-icon.png) no-repeat right center scroll;
    }
  .slide .slide-bg {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    max-width: 50%;
  }
  .slide-default {height: 94%;}
    .slide-default .content {
      width: 50%;
      position: relative;
      z-index: 400;
      top: 50%;
      -moz-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      text-align: center;
    }
    .slide-default h2 {
      font-size: 18px;
      letter-spacing: 3px;
      text-transform: uppercase;
      text-align: center;
      margin: 0 0 24px 0;
    }
      .slide-default h2 span {
        display: block;
        text-transform: none;
        letter-spacing: 0;
        font-size: 30px;
        font-family: "julesbig", Helvetica, Arial, sans-serif;
        padding: 8px 0;
      }
    .slide-default .get-started {
      display: inline-block;
      background: #6dc199 url(images/get-started-icon.png) no-repeat 91% center scroll;
      color: #fff;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 8px 24px 8px 16px;
    }
  .slide.question {height: 94%;}
  .slide.q1 {background: #e6e6e6 url(images/q1-bg.jpg) no-repeat left bottom scroll; background-size: 60%;}
  .slide.q2 {background: #e6e6e6 url(images/q2-bg.jpg) no-repeat left bottom scroll; background-size: contain;}
  .slide.q3 {background: #e6e6e6 url(images/q3-bg.jpg) no-repeat left bottom scroll; background-size: contain;}
  .slide.q4 {background: #e6e6e6 url(images/q4-bg.jpg) no-repeat left bottom scroll; background-size: contain;}
  .slide.q5 {background: #e6e6e6 url(images/q5-bg.jpg) no-repeat left bottom scroll; background-size: 70%;}
  .slide.q6 {background: #e6e6e6 url(images/q1-bg.jpg) no-repeat left bottom scroll; background-size: 60%;}
  .slide.q7 {background: #e6e6e6 url(images/q2-bg.jpg) no-repeat left bottom scroll; background-size: contain;}
  .slide.q8 {background: #e6e6e6 url(images/q3-bg.jpg) no-repeat left bottom scroll; background-size: contain;}
  .slide.q9 {background: #e6e6e6 url(images/q4-bg.jpg) no-repeat left bottom scroll; background-size: contain;}
  .slide.q10 {background: #e6e6e6 url(images/q5-bg.jpg) no-repeat left bottom scroll; background-size: 70%;}
  
.rcontent {width: 94%; margin: 0 auto; padding: 48px 0 0 0;}
  .rcontent .rcontent-left {
    width: 45%;
    float: left;
    padding: 24px 24px 0 0;
    text-align: center;
  }
    .rcontent .rcontent-left h4 {
      font-size: 28px;
      color: #000;
      text-align: center;
      text-transform: uppercase;
      margin: 0;
      position: relative;
      padding: 0 0 132px 0;
    }
      .rcontent .rcontent-left h4 span {
        display: block;
        color: #6dc199;
        margin: 0 0 8px 0;
        text-transform: none;
        font-family: "julesbig", Helvetica, Arial, sans-serif;
        line-height: 36px;
        font-size: 30px;
      }
      .rcontent .rcontent-left h4:before {
        display: block;
        content: "";
        width: 124px;
        height: 124px;
        background-attachment: scroll;
        background-repeat: no-repeat;
        background-size: cover !important;
        position: absolute;
        left: 50%;
        bottom: 0;
        margin: 0 0 0 -62px;
      }
      .cck-1 .rcontent .rcontent-left h4:before {background-image: url(images/cocktail-thumb.png);}
      .cck-2 .rcontent .rcontent-left h4:before {background-image: url(images/cck2-thumb.png);}
      .cck-3 .rcontent .rcontent-left h4:before {background-image: url(images/cck3-thumb.png);}
      .cck-4 .rcontent .rcontent-left h4:before {background-image: url(images/cck4-thumb.png);}
      .cck-5 .rcontent .rcontent-left h4:before {background-image: url(images/cck5-thumb.png);}
      .cck-6 .rcontent .rcontent-left h4:before {background-image: url(images/cck6-thumb.png);}
      .cck-7 .rcontent .rcontent-left h4:before {background-image: url(images/cck7-thumb.png);}
      .cck-8 .rcontent .rcontent-left h4:before {background-image: url(images/cck8-thumb.png);}
      .cck-9 .rcontent .rcontent-left h4:before {background-image: url(images/cck9-thumb.png);}
      .cck-10 .rcontent .rcontent-left h4:before {background-image: url(images/cck10-thumb.png);}
      .mck-1 .rcontent .rcontent-left h4:before {background-image: url(images/mck1-thumb.png);}
      .mck-2 .rcontent .rcontent-left h4:before {background-image: url(images/mck2-thumb.png);}
      .mck-3 .rcontent .rcontent-left h4:before {background-image: url(images/mck3-thumb.png);}
      .mck-4 .rcontent .rcontent-left h4:before {background-image: url(images/mck4-thumb.png);}
      .mck-5 .rcontent .rcontent-left h4:before {background-image: url(images/mck5-thumb.png);}
      .mck-6 .rcontent .rcontent-left h4:before {background-image: url(images/mck6-thumb.png);}
      .mck-7 .rcontent .rcontent-left h4:before {background-image: url(images/mck7-thumb.png);}
      .mck-8 .rcontent .rcontent-left h4:before {background-image: url(images/mck8-thumb.png);}
      .mck-9 .rcontent .rcontent-left h4:before {background-image: url(images/mck9-thumb.png);}
      .mck-10 .rcontent .rcontent-left h4:before {background-image: url(images/mck10-thumb.png);}
    .rcontent .rcontent-left img {margin: 0 auto 16px auto; max-width: 134px;}
    .rcontent .rcontent-left .social-share {font-size: 0; margin: 0 0 16px 0;}
      .rcontent .rcontent-left .social-share a {
        display: inline-block;
        width: 32px;
        height: 32px;
        font: 0/0 a;
        color: transparent;
        margin: 0 4px;
        background-attachment: scroll;
        background-repeat: no-repeat;
        background-size: cover !important;
      }
        .rcontent .rcontent-left .social-share a.fb {background-image: url(images/fb-icon.png);}
        .rcontent .rcontent-left .social-share a.tw {background-image: url(images/tw-icon.png);}
    .rcontent .rcontent-left p {
      text-transform: uppercase;
      text-align: center;
      color: #000;
      margin: 0 0 8px 0;
      font-size: 14px;
      font-family: "brandoni", Helvetica, Arial, sans-serif;
    }
    .rcontent .rcontent-left .view-drink {
      display: inline-block;
      background-color: #6dc199;
      color: #fff;
      text-transform: uppercase;
      font-size: 14px;
      text-align: center;
      padding: 6px 16px;
    }
  .rcontent .rcontent-right {
    width: 55%;
    float: left;
    padding: 16px;
    background-color: #fff;
    overflow-y: auto;
    max-height: 490px;
  }
    .rcontent .rcontent-right ol {list-style-type: decimal; margin: 0 0 0 16px;}
    .rcontent .rcontent-right ul {list-style-type: disc; margin: 0 0 16px 16px;}
    .rcontent .rcontent-right li {color: #000; margin: 0 0 4px 0; font-family: "zap", Helvetica, Arial, sans-serif;}
    .rcontent .rcontent-right p {text-transform: uppercase; margin: 0 0 4px 0;}

@media (max-width: 540px) {
  .wrapper {width: 100%;}
  .slide-default .content {
    top: 32px;
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    width: 100%;
    margin: 0 auto;
  }
  .slide .slide-bg {top: auto; bottom: 0; max-width: 80%;}
  .slide.question .content {
    width: 96%;
    top: 48px;
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  .slide.question .content .content-left h3 {font-size: 18px;}
  .slide.question .content .content-left {
    width: 100%;
    float: none;
    padding: 0 0 16px 0;
    text-align: center;
  }
  .slide.question .content .content-right {
    width: 100%;
    float: none;
    margin: 0 auto 24px auto;
    padding: 0 !important;
  }
  .slide.question .next-slide, .slide.question .view-result {position: relative; margin: 0 auto; clear: both; top: 48px; left: auto;}
  .rcontent {width: 96%; padding: 16px 0 0 0;}
  .rcontent .rcontent-left {
    width: 100%;
    float: none;
    padding: 0 0 24px 0 !important;
  }
  .rcontent .rcontent-right {
    width: 100%;
    float: none;
    max-height: 264px;
  }
  .rcontent .rcontent-left h4 {font-size: 24px;}
    .rcontent .rcontent-left h4 span {font-size: 20px;}
}