/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }

a img {
  border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

@font-face {
  font-family: "Didot";
  src: url('../fonts/Didot/Didot.eot?1465475124');
  src: url('../fonts/Didot/Didot.eot?&1465475124#iefix') format('embedded-opentype'), url('../fonts/Didot/Didot.woff?1465475124') format('woff'), url('../fonts/Didot/Didot.ttf?1465475123') format('truetype'), url('../fonts/Didot/Didot.svg?1465475124') format('svg'); }
@font-face {
  font-family: "Didot-Italic";
  src: url('../fonts/Didot/Didot-Italic.eot?1465475124');
  src: url('../fonts/Didot/Didot-Italic.eot?&1465475124#iefix') format('embedded-opentype'), url('../fonts/Didot/Didot-Italic.woff?1465475124') format('woff'), url('../fonts/Didot/Didot-Italic.ttf?1465475124') format('truetype'), url('../fonts/Didot/Didot-Italic.svg?1465475124') format('svg'); }
@font-face {
  font-family: "Gotham-Medium";
  src: url('../fonts/Gotham Medium/Gotham-Medium.eot?1465475409');
  src: url('../fonts/Gotham Medium/Gotham-Medium.eot?&1465475409#iefix') format('embedded-opentype'), url('../fonts/Gotham Medium/Gotham-Medium.woff?1465475409') format('woff'), url('../fonts/Gotham Medium/Gotham-Medium.ttf?1465475409') format('truetype'), url('../fonts/Gotham Medium/Gotham-Medium.svg?1465475409') format('svg'); }
@font-face {
  font-family: "Gotham-Book";
  src: url('../fonts/Gotham Book/Gotham-Book.eot?1465475408');
  src: url('../fonts/Gotham Book/Gotham-Book.eot?&1465475408#iefix') format('embedded-opentype'), url('../fonts/Gotham Book/Gotham-Book.woff?1465475408') format('woff'), url('../fonts/Gotham Book/Gotham-Book.ttf?1465475408') format('truetype'), url('../fonts/Gotham Book/Gotham-Book.svg?1465475408') format('svg'); }
.cf {
  overflow: hidden;
  *zoom: 1; }

body {
  font-family: "Gotham-Medium", arial, sans-serif;
  font-weight: 100; }

.wrapper {
  width: 100%;
  max-width: 990px;
  margin: auto;
  text-align: center;
  color: #1A1A1A;
  font-size: 1em; }
  .wrapper p {
    line-height: 1.4em; }
  @media screen and (max-width: 700px) {
    .wrapper {
      max-width: 320px; } }

.header {
  background-color: #F8F7F4; }
  .header img {
    max-width: 100%;
    margin-bottom: 40px; }
  .header h1 {
    text-align: center; }
    .header h1 img {
      max-width: 90%;
      margin: 40px auto; }
      @media (max-width: 400px) {
        .header h1 img {
          width: 200px; } }
  .header p {
    font-family: "Gotham-Book", arial, sans-serif;
    display: block;
    max-width: 820px;
    padding: 0 20px;
    margin: 0 auto 20px; }
  .header .social {
    max-width: 408px;
    margin: auto;
    padding: 1.7em 0; }
    .header .social li {
      max-width: 38px;
      display: inline-block;
      float: left;
      margin: 0 15px; }
    @media screen and (max-width: 700px) {
      .header .social {
        max-width: 240px; }
        .header .social li {
          margin: 0 1px; } }

.q h2 {
  font-family: "Gotham-Book", arial, sans-serif;
  font-size: 1.8em;
  text-transform: uppercase;
  margin: 1em 0.2em; }
  .q h2.error {
    color: red; }
  .q h2 span {
    font-family: "Didot-Italic", times, serif;
    display: block;
    padding: 20px 0;
    font-size: 2em; }
.q .answers {
  background: #F8F7F4;
  padding: 20px 10px; }
.q .a {
  box-sizing: border-box;
  width: 33.33%;
  padding: 0 10px;
  float: left;
  cursor: pointer; }
  @media screen and (max-width: 700px) {
    .q .a {
      width: 50%; }
      .q .a:nth-child(3) {
        float: none;
        margin: auto;
        clear: both; } }
  .q .a .inner {
    background-color: #fff;
    margin: 0.8em 0.4em; }
    .q .a .inner img {
      width: 100%; }
    .q .a .inner .label {
      font-weight: 700;
      display: table;
      width: 100%;
      height: 50px; }
      .q .a .inner .label span {
        display: table-cell;
        vertical-align: middle; }
  .q .a.active .inner {
    background-color: #1A1A1A !important;
    color: #fff; }
  .q .a:hover .inner {
    background-color: #eee; }

.submit .go {
  margin: 1.7em;
  display: block; }
  .submit .go img {
    max-width: 100%; }

.footer {
  background-color: #F8F7F4;
  visibility: hidden; }
  .footer.active {
    visibility: visible; }
  .footer .inner {
    padding: 20px 20px 20px 10px;
    margin-bottom: 10px; }
    @media screen and (max-width: 700px) {
      .footer .inner {
        padding: 10px; } }
  .footer .result_wrap {
    overflow: visible; }
    .footer .result_wrap .left, .footer .result_wrap .right {
      box-sizing: border-box;
      width: 50%; }
      @media screen and (max-width: 700px) {
        .footer .result_wrap .left, .footer .result_wrap .right {
          width: 100%; } }
    .footer .result_wrap .slider {
      display: relative;
      overflow: visible; }
      .footer .result_wrap .slider button {
        position: absolute;
        background: none;
        border: 0;
        font-family: "Gotham-Book", arial, sans-serif;
        font-weight: 700;
        top: 50%;
        cursor: pointer;
        font-size: 1.2em;
        z-index: 99; }
        .footer .result_wrap .slider button.slick-prev {
          left: -10px; }
        .footer .result_wrap .slider button.slick-next {
          right: -10px; }
    .footer .result_wrap .slide {
      padding: 0 10px; }
      .footer .result_wrap .slide img {
        max-width: 100%; }
    .footer .result_wrap .left {
      float: left; }
      @media screen and (max-width: 700px) {
        .footer .result_wrap .left {
          display: none; } }
      .footer .result_wrap .left .gif {
        padding: 0 10px 20px; }
        .footer .result_wrap .left .gif img {
          width: 100%; }
        @media screen and (max-width: 700px) {
          .footer .result_wrap .left .gif {
            display: none; } }
      @media screen and (max-width: 700px) {
        .footer .result_wrap .left .slider {
          display: none; } }
    .footer .result_wrap .right {
      float: right;
      padding-left: 10px; }
      @media screen and (max-width: 700px) {
        .footer .result_wrap .right {
          padding: 0; } }
      .footer .result_wrap .right .result-box {
        background: #fff;
        padding-bottom: 20px; }
        .footer .result_wrap .right .result-box .gif {
          display: none; }
          @media screen and (max-width: 700px) {
            .footer .result_wrap .right .result-box .gif {
              display: block; }
              .footer .result_wrap .right .result-box .gif img {
                max-width: 100%; } }
        .footer .result_wrap .right .result-box h2 {
          text-transform: uppercase;
          font-size: 1.3em;
          margin: 0.5em 0; }
          .footer .result_wrap .right .result-box h2 span {
            font-size: 3em;
            line-height: 1em;
            display: block;
            font-family: "Didot", times, serif;
            margin: 18px 0; }
          @media screen and (max-width: 700px) {
            .footer .result_wrap .right .result-box h2 {
              font-size: 1.1em; }
              .footer .result_wrap .right .result-box h2 span {
                font-size: 2.7em; } }
        .footer .result_wrap .right .result-box .slider {
          display: none;
          margin: 10px 0; }
          @media screen and (max-width: 700px) {
            .footer .result_wrap .right .result-box .slider {
              display: block; } }
        .footer .result_wrap .right .result-box .desc {
          font-family: "Gotham-Book", arial, sans-serif; }
        .footer .result_wrap .right .result-box .link {
          display: inline-block;
          margin: auto;
          background: #000;
          margin: 10px 5% 0;
          padding: 10px 0;
          max-width: 250px;
          width: 90%;
          text-transform: uppercase;
          font-size: 1.2em;
          box-sizing: border-box; }
          .footer .result_wrap .right .result-box .link.shop {
            margin-top: 40px; }
          .footer .result_wrap .right .result-box .link a {
            color: #fff;
            text-decoration: none; }
  .footer .share-box {
    float: right;
    width: 45%; }
    .footer .share-box .inner {
      padding: 1em; }
    .footer .share-box .intro {
      font-weight: 400;
      font-size: 1.2em;
      line-height: 1.4em;
      text-align: left; }
      .footer .share-box .intro span {
        text-transform: uppercase;
        font-weight: 700; }

.comp {
  display: none;
  margin-top: 10px;
  background: #F8F7F4; }
  .comp.active {
    display: block; }
  .comp.complete form {
    display: none; }
  .comp.complete .form-submit {
    display: block; }
  .comp .form-submit {
    display: none; }
  .comp .inner {
    padding: 20px; }
    .comp .inner h2 {
      font-family: "Didot", times, serif;
      font-size: 2.5em; }
      @media screen and (max-width: 700px) {
        .comp .inner h2 {
          font-size: 2.4em; } }
    .comp .inner p {
      display: block;
      max-width: 700px;
      margin: auto; }
      .comp .inner p.intro {
        padding: 20px 0; }
    .comp .inner .share-buttons {
      padding: 1em 0;
      margin-bottom: 1.5em; }
      .comp .inner .share-buttons a {
        margin: 0 0.5em; }
    .comp .inner .form .col {
      display: inline-block;
      text-align: left; }
      .comp .inner .form .col label {
        display: block;
        margin: 0 0 0 5px; }
    .comp .inner .form .email input,
    .comp .inner .form .fname input,
    .comp .inner .form .sname input {
      width: 168px;
      height: 30px;
      border: 1px solid #B3B3B3;
      padding: 0 5px;
      color: #333333;
      margin: 0 5px 1em; }
    .comp .inner .form .email input {
      box-sizing: border-box;
      width: 450px; }
    @media screen and (max-width: 700px) {
      .comp .inner .form .email {
        width: 100%; }
        .comp .inner .form .email input {
          max-width: 450px;
          width: 100%; } }
    .comp .inner .form .col_long {
      padding: 10px 0; }
    .comp .inner .form .submit {
      padding: 10px;
      width: 250px;
      color: #fff;
      background: #000;
      font-family: "Gotham-Medium", arial, sans-serif;
      border: 0;
      font-size: 1em;
      margin: 20px 0 10px;
      cursor: pointer; }