/*!
 * Project:   Honest Tea
 * Date:      2013/07/07
/* ---------------------------------------- */

* { margin: 0; padding: 0; }

html { overflow-y: scroll; font-size: 100.01%; }
body { background: #f2f1ec url(img/bg-a.jpg) 50% 0 repeat; font-size: 62.5%; }

body, textarea, input, select, option, button { color: #555; font: 18px/1.25 Enriqueta,Georgia,serif; }
div, form, blockquote, article, aside, details, figcaption, figure, footer, header, menu, nav, section, ul, ol, dl, p, table, pre, h1, h2, h3, h4, h5, h6 { display: block; margin: 0 0 15px; } :last-child { margin-bottom: 0 !important; } .last-child { margin-bottom: 0 !important; }

/*! fonts --------- */

@font-face { font-family: 'Novecentowide'; src: url('assets/fonts/2013/Novecentowide-Normal-webfont.eot'); src: url('assets/fonts/2013/Novecentowide-Normal-webfont.eot#iefix') format('embedded-opentype'), url('assets/fonts/2013/Novecentowide-Normal-webfont.woff') format('woff'), url('assets/fonts/2013/Novecentowide-Normal-webfont.ttf') format('truetype'), url('https://thenationalhonestyindex.com/assets/css/2013/img/Novecentowide-Normal-webfont.svg') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Novecentowide'; src: url('assets/fonts/2013/Novecentowide-Bold-webfont.eot'); src: url('assets/fonts/2013/Novecentowide-Bold-webfont.eot#iefix') format('embedded-opentype'), url('assets/fonts/2013/Novecentowide-Bold-webfont.woff') format('woff'), url('assets/fonts/2013/Novecentowide-Bold-webfont.ttf') format('truetype'), url('https://thenationalhonestyindex.com/assets/css/2013/img/Novecentowide-Bold-webfont.svg') format('svg'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Novecentowide Light'; src: url('assets/fonts/2013/Novecentowide-Light-webfont.eot'); src: url('assets/fonts/2013/Novecentowide-Light-webfont.eot#iefix') format('embedded-opentype'), url('assets/fonts/2013/Novecentowide-Light-webfont.woff') format('woff'), url('assets/fonts/2013/Novecentowide-Light-webfont.ttf') format('truetype'), url('https://thenationalhonestyindex.com/assets/css/2013/img/Novecentowide-Light-webfont.svg') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Novecentowide Medium'; src: url('assets/fonts/2013/Novecentowide-Medium-webfont.eot'); src: url('assets/fonts/2013/Novecentowide-Medium-webfont.eot#iefix') format('embedded-opentype'), url('assets/fonts/2013/Novecentowide-Medium-webfont.woff') format('woff'), url('assets/fonts/2013/Novecentowide-Medium-webfont.ttf') format('truetype'), url('https://thenationalhonestyindex.com/assets/css/2013/img/Novecentowide-Medium-webfont.svg') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Novecentowide Demibold'; src: url('assets/fonts/2013/Novecentowide-DemiBold-webfont.eot'); src: url('assets/fonts/2013/Novecentowide-DemiBold-webfont.eot#iefix') format('embedded-opentype'), url('assets/fonts/2013/Novecentowide-DemiBold-webfont.woff') format('woff'), url('assets/fonts/2013/Novecentowide-DemiBold-webfont.ttf') format('truetype'), url('https://thenationalhonestyindex.com/assets/css/2013/img/Novecentowide-DemiBold-webfont.svg') format('svg'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Enriqueta'; src: url('assets/fonts/2013/enriqueta-regular-webfont.eot');src: url('assets/fonts/2013/enriqueta-regular-webfont.eot#iefix') format('embedded-opentype'), url('assets/fonts/2013/enriqueta-regular-webfont.woff') format('woff'), url('assets/fonts/2013/enriqueta-regular-webfont.ttf') format('truetype'),url('https://thenationalhonestyindex.com/assets/css/2013/img/enriqueta-regular-webfont.svg') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Enriqueta'; src: url('assets/fonts/2013/enriqueta-bold-webfont.eot'); src: url('assets/fonts/2013/enriqueta-bold-webfont.eot#iefix') format('embedded-opentype'), url('assets/fonts/2013/enriqueta-bold-webfont.woff') format('woff'), url('assets/fonts/2013/enriqueta-bold-webfont.ttf') format('truetype'), url('https://thenationalhonestyindex.com/assets/css/2013/img/enriqueta-bold-webfont.svg') format('svg'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Fontello'; src: url('assets/fonts/2013/fontello.eot'); src: url('assets/fonts/2013/fontello.eot#iefix') format('embedded-opentype'), url('assets/fonts/2013/fontello.woff') format('woff'), url('assets/fonts/2013/fontello.ttf') format('truetype'), url('https://thenationalhonestyindex.com/assets/css/2013/img/fontello.svg') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Bebas Neue'; src: url('assets/fonts/2013/bebasneue2-webfont.eot'); src: url('assets/fonts/2013/bebasneue2-webfont.eot#iefix') format('embedded-opentype'), url('assets/fonts/2013/bebasneue2-webfont.woff') format('woff'), url('assets/fonts/2013/bebasneue2-webfont.ttf') format('truetype'), url('https://thenationalhonestyindex.com/assets/css/2013/img/bebasneue2-webfont.svg') format('svg'); font-weight: normal; font-style: normal; }

/*! layout -------- */

.root-a { position: relative; overflow: hidden; width: 100%; margin: 0; }
 .root-a, .root-a *, .root-a *:before, .root-a *:after { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
 .root-a > * { max-width: 960px; margin-left: auto; margin-right: auto; }
 .root-a > header { position: relative; z-index: 30; min-height: 100px; margin-bottom: 0; padding: 20px 0 30px; }
 .lt-ie9 .root-a > header { min-height: 50px; }
  .root-a > header:before { position: absolute; left: -100%; right: -100%; top: 0; bottom: 0; z-index: -1; content: ' '; background: url(img/bg-b.png) 50% 100% repeat-x; }
  .root-a > header .logo { position: absolute; left: 0; top: 8px; margin: 0; }
   .root-a > header .logo a { display: block; width: 218px; }
  .root-a > header .tagline { position: absolute; left: 240px; top: 12px; margin: 0; color: #fff; font: 14px/21px Helvetica Neue,Helvetica,Arial,sans-serif; text-transform: uppercase; }
   .root-a > header .tagline span { display: block; }
  .root-a > header .skips, .root-a > header .skips ul { position: absolute; position: fixed; top: 50%; left: 0; z-index: 9999; list-style: none; width: 100%; height: 0; margin: -30px 0 0; padding: 0; text-align: center; }
   .root-a > header .skips li { position: absolute; left: 0; top: 0; width: 100%; height: 0; font: bold 50px/1 Calibri,Myriad Pro,Arial,Helvetica Neue,Helvetica,sans-serif; }
    .root-a > header .skips li a { display: inline-block; position: fixed; left: -10001px; margin: 0 auto; padding: 20px 30px; border: 1px dotted #fff; border-color: rgba(255,255,255,0.7); -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;  background: #333; background: rgba(0,0,0,0.6); color: #fff; text-align: center; text-decoration: none; outline: none; }
    .root-a > header .skips li a:focus, .root-a > header .skips li a:active { position: relative; left: 0; }
  .root-a > header .nav { position: absolute; right: 0; top: 23px; }
   .root-a > header .nav ul { list-style: none; margin: 0; padding: 0; }
    .root-a > header .nav ul li { position: relative; float: left; }
    .root-a > header .nav ul li ~ li { margin-left: 20px; }
     .root-a > header .nav ul li:before { display: none; }
     .root-a > header .nav ul li.icon a, .root-a > header .nav ul li > span { display: block; width: 48px; height: 48px; border-radius: 5px; border: 1px solid #678339; border-width: 1px 0 0 1px; background: #93bb51 url(img/nav-a-icons-a.png) 500px 500px no-repeat; }
     .root-a > header .nav ul li.icon.users a { background-position: 0 0; } .root-a > header .nav ul li.icon.users a:hover { background-position: 0 -50px; }
     .root-a > header .nav ul li.icon.video a { background-position: -50px 0; } .root-a > header .nav ul li.icon.video  a:hover { background-position: -50px -50px; }
     .root-a > header .nav ul li.icon.results a { background-position: -100px 0; } .root-a > header .nav ul li.icon.results a:hover { background-position: -100px -50px; }
     .root-a > header .nav ul li.icon.coupon a { background-position: -150px 0; } .root-a > header .nav ul li.icon.coupon a:hover { background-position: -150px -50px; }
     .root-a > header .nav ul li.icon a:hover { background-color: #fff; }
     .root-a > header .nav ul li.icon.font a { overflow: hidden; background-color: #93bb51; color: #fff; font: 28px/47px Fontello; text-align: center; text-indent: 333%; white-space: nowrap; text-shadow: #618c19 -1px -1px 0; }
     .root-a > header .nav ul li.icon.font a.active { border-color: #38342d; background: #504a41; text-shadow: #25221e -1px -1px 0; }
     .root-a > header .nav ul li.icon.font.menu { display: none; }
      .root-a > header .nav ul li.icon.font a:before { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ''; text-indent: 0; }
      .root-a > header .nav ul li.icon.font a.active:after { position: absolute; left: 50%; bottom: -10px; overflow: hidden; content: ''; margin: 0 0 0 -5px; border: 5px solid transparent; border-top-color: #504a41; }
      .root-a > header .nav ul li.icon.font.menu a:before { content: '\e806'; }
      .root-a > header .nav ul li a span { visibility: hidden; position: absolute; left: -45px; right: -45px; top: 55px; z-index: -1; margin: 15px 0 0; padding: 10px 5px; border-radius: 3px; background: #504a41; color: #fff; font: bold 12px/1.2 Novecentowide,Helvetica Neue,Helvetica,Arial,sans-serif; text-transform: uppercase; text-align: center; opacity: 0; -webkit-backface-visibility: hidden; }
      .root-a > header .nav ul li.users a span { left: -80px; right: -80px; }
      .root-a > header .nav ul li a span { -ms-transition: all 0.35s; -moz-transition: all 0.35s; -webkit-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; }
      .root-a > header .nav ul li a:hover span { visibility: visible; z-index: 10; margin-top: 0; opacity: 1; }
     .root-a > header .nav ul li.like > span { width: auto; padding: 14px 7px; line-height: 1; }
       .root-a > header .nav ul li a span:before { position: absolute; left: 50%; top: -10px; overflow: hidden; content: ''; width: 0; height: 0; margin: 0 0 0 -5px; border: 5px solid transparent; border-bottom-color: #504a41; }
     .root-a > header .nav ul li em { position: absolute; left: -10001px; top: -10001px; }
 .root-a > section { margin-bottom: 0; }
 .root-a > footer { position: relative; margin-bottom: 0; padding: 20px 0 15px; }
  .root-a > footer:before { position: absolute; left: -100%; right: -100%; top: 0; bottom: 0; z-index: -1; content: ' '; border-top: 1px solid #cac6bd; border-top-color: rgba(88,83,69,0.25); background: #d3cfc0; background: rgba(122,110,73,0.25); }
  .root-a > footer:before { -webkit-box-shadow: inset 0 1px 0 #e5e1d7; -moz-box-shadow: inset 0 1px 0 #e5e1d7; box-shadow: inset 0 1px 0 #e5e1d7; }
  .root-a > footer:after { display: block; overflow: hidden; clear: both; content: ""; width: 100%; height: 0; }
  .root-a > footer p { float: left; margin: 0; color: #767368; font: 12px/25px Novecentowide Medium,Helvetica Neue,Helvetica,Arial,sans-serif; text-shadow: #dfdbd0 0 1px 0; }
   .root-a > footer p a { color: inherit; }
   .root-a > footer p span { padding: 0 5px; }
  .root-a > footer ul { float: right; list-style: none; margin: 0; padding: 0; }
   .root-a > footer ul li { float: left; }
   .root-a > footer ul li ~ li { margin-left: 20px; }
    .root-a > footer ul li:before { display: none; }
    .root-a > footer ul li > a { display: block; position: relative; overflow: hidden; width: 30px; height: 30px; margin: 0; font-size: 0; text-indent: 101%; white-space: nowrap; }
     .root-a > footer ul li > a:before { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ''; color: #9e998e; font: 25px/25px Fontello; text-indent: 0; text-align: center; text-shadow: rgba(255,255,255,0.5) 1px 1px 0; }
     .root-a > footer ul li.facebook > a:before { content: '\e802'; }
     .root-a > footer ul li.twitter > a:before { content: '\e804'; font-size: 20px; }
     .root-a > footer ul li.google > a:before { content: '\e801'; }
     .root-a > footer ul li.pinterest > a:before { content: '\e800'; }
     .root-a > footer ul li.email > a:before { content: '\e803'; }
     .root-a > footer ul li.youtube > a:before { content: '\e805'; }

/*! grids --------- */

.grid-a { margin: -30px 0 0 -30px; letter-spacing: -.35em; }
 .grid-a > .column { display: inline-block; border: 1px solid transparent; border-width: 30px 0 0 30px; margin: 0; letter-spacing: 0; vertical-align: top; }
 .grid-a > .column.w5 { width: 5%; } .grid-a > .column.w10 { width: 10%; } .grid-a > .column.w15 { width: 15%; } .grid-a > .column.w20 { width: 20%; } .grid-a > .column.w25 { width: 25%; } .grid-a > .column.w30 { width: 30%; } .grid-a > .column.w35 { width: 35%; } .grid-a > .column.w40 { width: 40%; } .grid-a > .column.w45 { width: 45%; } .grid-a > .column.w50 { width: 50%; } .grid-a > .column.w55 { width: 55%; } .grid-a > .column.w60 { width: 60%; } .grid-a > .column.w65 { width: 65%; } .grid-a > .column.w70 { width: 70%; } .grid-a > .column.w75 { width: 75%; } .grid-a > .column.w80 { width: 80%; } .grid-a > .column.w85 { width: 85%; } .grid-a > .column.w90 { width: 90%; } .grid-a > .column.w95 { width: 95%; } .grid-a > .column.w100 { width: 100%; }
 .grid-a > .column.w8 { width: 8.33%; } .grid-a > .column.w16 { width: 16.66%; } .grid-a > .column.w33 { width: 33.33%; }.grid-a > .column.w66 { width: 66.67%; }
 .grid-a > .column.o5 { margin-left: 5%; } .grid-a > .column.o10 { margin-left: 10%; } .grid-a > .column.o15 { margin-left: 15%; } .grid-a > .column.o20 { margin-left: 20%; } .grid-a > .column.o25 { margin-left: 25%; } .grid-a > .column.o30 { margin-left: 30%; } .grid-a > .column.o35 { margin-left: 35%; } .grid-a > .column.o40 { margin-left: 40%; } .grid-a > .column.o45 { margin-left: 45%; } .grid-a > .column.o50 { margin-left: 50%; } .grid-a > .column.o55 { margin-left: 55%; } .grid-a > .column.o60 { margin-left: 60%; } .grid-a > .column.o65 { margin-left: 65%; } .grid-a > .column.o70 { margin-left: 70%; } .grid-a > .column.o75 { margin-left: 75%; } .grid-a > .column.o80 { margin-left: 80%; } .grid-a > .column.o85 { margin-left: 85%; } .grid-a > .column.o90 { margin-left: 90%; } .grid-a > .column.o95 { margin-left: 95%; } .grid-a > .column.o100 { margin-left: 100%; }
 .grid-a > .column.o8 { margin-left: 8.33%; } .grid-a > .column.o16 { margin-left: 16.66%; } .grid-a > .column.o33 { margin-left: 33.33%; }.grid-a > .column.o66 { margin-left: 66.67%; }

/*! elements ------ */

.compare-a { position: relative; margin: 0 0 40px; }
 .compare-a:after { display: block; overflow: hidden; clear: both; content: ""; width: 100%; height: 0; }
 .compare-a > .left { float: left; width: 380px; margin: 0; }
 .compare-a > .right { float: right; width: 380px; margin: 0; }
 .compare-a > .go { position: absolute; left: 50%; top: 200px; width: 120px; margin: 0 0 0 -60px; padding: 0; }
 .compare-a > .vs { position: absolute; left: 50%; top: 120px; width: 120px; margin: 0 0 0 -60px; padding: 0; color: #d7d4ca; font: bold 68px/1 Novecentowide Demibold,Helvetica Neue,Helvetica,Arial,sans-serif; text-align: center; }
  .compare-a h2 { margin: 0 0 20px; color: #30302f; font: bold 24px/25px Novecentowide,Helvetica Neue,Helvetica,Arial,sans-serif; text-align: center; }
  .compare-a > .go h2 { margin: 0 0 25px; color: #878580; font-size: 16px; line-height: 1.2; text-shadow: rgba(255,255,255,0.75) 0 1px 0; }
  .compare-a > .go .action { margin: 0 0 35px; }
   .compare-a > .go .action > :first-child { display: block; overflow: hidden; width: 80px; height: 84px; margin: 0 auto; padding: 0; border: none; background: url(img/compare-a-submit-a.png) no-repeat; text-indent: 101%; white-space: nowrap; }
   .compare-a > .go .action > :first-child:hover { background-position: -80px 0; }
  .compare-a > .go .share { list-style: none; margin: 0 0 75px; padding: 0; }
   .compare-a > .go .share li { position: relative; overflow: hidden; width: 80px; height: 84px; margin: 0 auto 15px; }
    .compare-a > .go .share li:before { display: block; }
    .compare-a > .go .share li a { display: block; overflow: hidden; width: 84px; height: 200px; background: url(img/compare-a-share-a.png) no-repeat; text-indent: 101%; white-space: nowrap; }
    .compare-a > .go .share li.twitter a { background-position: -80px 0; }
    .compare-a > .go .share li.email a { background-position: -160px 0; }
    .compare-a > .go .share li a:hover { margin-top: -100px; }
  .compare-a > .go .back { border: 1px solid #e4e0d7; border-radius: 3px; background: #f8f5f0; color: #878580; font: bold 14px/20px Novecentowide,Helvetica Neue,Helvetica,Arial,sans-serif; text-transform: uppercase; text-align: center; }
   .compare-a > .go .back a { display: block; padding: 20px 0 10px; color: inherit; text-decoration: none; }
    .compare-a > .go .back a:before { display: block; overflow: hidden; content: ''; width: 44px; height: 48px; margin: 0 auto 10px; background: url(img/compare-a-back-a.png) no-repeat; }
    .compare-a > .go .back a:hover:before { background-position: -44px 0; }
 .compare-a > .info { position: absolute; right: 80px; bottom: 22px; margin: 0; padding: 0; font-size: 14px; line-height: 20px; font-weight: bold; text-align: right; text-transform: uppercase; }
  .compare-a > .info a { padding-right: 20px; background: url(img/intro-a-arrow-a.png) 100% 40% no-repeat; }
.compare-a.results { margin: 0 -65px 40px; padding: 64px; border: 1px solid #efebe4; border-radius: 5px; background: #fcfaf8 url(img/compare-a-arrow-a.png) 50% 35px no-repeat; background-color: rgba(255,255,255,0.5); }
 .compare-a.results .go { padding-top: 50px; }
  .compare-a.results .go h2 { position: absolute; left: -40px; right: -40px; top: -200px; height: 65px; margin: 0; padding: 10px 0 0; background: #000; color: #fff; font: bold 14px/25px Novecentowide,Helvetica Neue,Helvetica,Arial,sans-serif; text-shadow: none; }
   .compare-a.results .go h2 strong { display: block; font-size: 22px; }

.coupon-a { position: relative; margin: 0 0 30px; padding: 25px 0 85px; text-align: center; }
 .coupon-a:before { position: absolute; left: -100%; right: -100%; top: 0; bottom: 0; z-index: -1; content: ' '; background: #efebe3; background: rgba(122,110,73,0.08); }
 .coupon-a > h2 { overflow: hidden; height: 77px; margin: 0 0 45px; background: url(img/coupon-a-header-a.png) 50% 0 no-repeat; text-indent: 333%; white-space: nowrap; }
 .coupon-a > p { margin: 0 0 35px; font-size: 18px; font-weight: bold; text-transform: uppercase; }
 .coupon-a > .box { display: inline-block; position: relative; }
  .coupon-a > .box figure { margin: 0; }
   .coupon-a > .box figure img { display: block; }
  .coupon-a > .box p { position: absolute; left: 0; top: 50%; right: 0; margin: -61px 0 0; }
   .coupon-a > .box p > span.like { display: inline-block; vertical-align: middle; }
   .coupon-a > .box p > span.button { display: inline-block; margin: 0 0 0 20px; padding-left: 100px; background: url(img/coupon-a-arrow-a.png) 0 50% no-repeat; vertical-align: middle; }
    .coupon-a > .box p > span.button a { display: block; display: block; overflow: hidden; width: 118px; height: 123px; background: url(img/coupon-a-button-a.png) no-repeat; font-size: 0; text-indent: 101%; white-space: nowrap; }
    .coupon-a > .box p > span.button a:hover { background-position: -120px 0; }

.intro-a { position: relative; height: 413px; margin: 0 0 90px; padding: 90px 0 0; color: #fff; text-align: center; }
.root-a > section > .intro-a:first-child { margin-top: -10px; }
 .intro-a:before { position: absolute; left: -100%; right: -100%; top: 0; bottom: 0; z-index: -1; content: ' '; background: #1c1c1c url(img/intro-a-bg-a.jpg) 50% 100% no-repeat; }
 .intro-a:after { position: absolute; left: 50%; bottom: -81px; content: ''; width: 178px; height: 81px; margin: 0 0 0 -88px; background: url(img/intro-a-bg-b.png) no-repeat; }
 .intro-a h2 { margin: 0 0 30px; font: 48px/1 Novecentowide Light,Helvetica Neue,Helvetica,Arial,sans-serif; text-transform: uppercase; }
  .intro-a h2 strong { display: block; font: 64px/1 Novecentowide Medium,Helvetica Neue,Helvetica,Arial,sans-serif; }
 .intro-a p { line-height: 1.44; }
 .intro-a p.more { position: absolute; left: 50px; right: 50px; bottom: 20px; text-align: right; text-transform: uppercase; }
  .intro-a p.more:before { position: absolute; left: 50%; bottom: -30px; z-index: 15; content: ''; width: 49px; height: 36px; margin: 0 0 0 -25px; background: url(img/intro-a-icons-a.png) no-repeat; }
  .intro-a p.more a { padding-right: 20px; background: url(img/intro-a-arrow-a.png) 100% 55% no-repeat; font-size: 13px; }

.mobnav-a { display: block; position: absolute; left: 0; top: 90px; right: 0; z-index: 20; }
.mobnav-a { -ms-transition: all 0.35s; -moz-transition: all 0.35s; -webkit-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; }
:root .mobnav-a { display: block; -webkit-transform: translateY(-150%); -moz-transform: translateY(-150%); -ms-transform: translateY(-150%); -o-transform: translateY(-150%); transform: translateY(-150%); }
.mobnav-a.active { display: block; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }
 .mobnav-a:before { position: absolute; left: -100%; right: -100%; top: 0; bottom: 0; z-index: -1; content: ' '; background: #504a41; }
 .mobnav-a:after { position: absolute; left: 50%; bottom: -81px; content: ''; width: 178px; height: 81px; margin: 0 0 0 -88px; background: url(img/mobnav-a-arrow-a.png) no-repeat; }
 .mobnav-a ul { list-style: none; margin: 0; padding: 25px 0 0; }
  .mobnav-a ul li { position: relative; margin: 0 0 10px; padding: 0 0 10px; font: bold 16px/1.44 Novecentowide,Helvetica Neue,Helvetica,Arial,sans-serif; text-transform: uppercase; text-shadow: #2b2723 -1px -1px 0; }
   .mobnav-a ul li:before { position: absolute; left: -100%; right: -100%; bottom: 1px; content: ''; width: auto; border: none; border-bottom: 1px dashed #342f28; border-right: 1px solid transparent; }
   .mobnav-a ul li:after { position: absolute; left: -100%; right: -100%; bottom: 0; content: ''; width: auto; border: none; border-bottom: 1px dashed #665f55; }
   .mobnav-a ul li a { display: block; color: #fff; }
   .mobnav-a ul li em { display: none; }

.results-a { padding: 70px 0 100px; text-align: center; }
 .results-a h2 { margin: 0 0 20px; padding-top: 50px; background: url(img/results-a-icon-a.png) 50% 0 no-repeat; color: #85b742; font: bold 24px/1 Novecentowide,Helvetica Neue,Helvetica,Arial,sans-serif; text-transform: uppercase; text-shadow: #fff 0 1px 0; }
  .results-a figure img { width: auto !important; height: auto !important; }

.js .select-a { display: inline-block; position: relative; width: 100%; height: 22px; background: #f88400; color: #fff; font: bold 14px/22px Novecentowide,Helvetica Neue,Helvetica,Arial,sans-serif; text-transform: uppercase; }
 .js .select-a:after { position: absolute; right: 10px; top: 50%; content: ''; margin: -3px 0 0; border: 5px solid transparent; border-top-color: #fff; }
 .js .select-a span { display: block; position: absolute; left: 5px; top: 0; bottom: 0; right: 30px; overflow: hidden; height: 100%; text-overflow: ellipsis; white-space: nowrap; }
 .js .select-a select { position: relative; z-index: 2; float: left; width: 100%; height: 100%; border: none; opacity: 0; filter: alpha(opacity=0); }
  .js .select-a select option { padding: 2px 3px; font: bold 14px/22px Novecentowide,Helvetica Neue,Helvetica,Arial,sans-serif; }

.share-a { margin: 0 0 35px; }
 .share-a p { margin: 0 0 15px; color: #747474; font: bold 13px/1.2 Novecentowide,Helvetica Neue,Helvetica,Arial,sans-serif; text-transform: uppercase; }
 .share-a ul { list-style: none; margin: 0; padding: 0; letter-spacing: -.35em; }
  .share-a ul li { display: inline-block; margin: 0; letter-spacing: 0; }
  .share-a ul li ~ li { margin-left: 10px; }
   .share-a ul li:before { display: none; }
   .share-a ul li > a { display: block; position: relative; overflow: hidden; width: 30px; height: 30px; margin: 0; font-size: 0; text-indent: 101%; white-space: nowrap; text-decoration: none; }
    .share-a ul li > a:before { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ''; color: #fff; font: 16px/30px Fontello; text-indent: 0; text-align: center; text-shadow: rgba(0,0,0,0.25) 0 1px 0; }
    .share-a ul li.facebook > a:before { background: #193b7b; content: '\e802'; }
    .share-a ul li.twitter > a:before { background: #2aa9e0; content: '\e804'; font-size: 13px; }
    .share-a ul li.google > a:before { background: #d3492c; content: '\e801'; }
    .share-a ul li.pinterest > a:before { background: #c9242d; content: '\e800'; }
    .share-a ul li.email > a:before { background: #323232; content: '\e803'; }
    .share-a ul li.youtube > a:before { background: #c4302b; content: '\e805'; }
    :root .share-a ul li > a:after { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ''; background: #fff; opacity: 0; }
    .share-a ul li > a:hover:after { opacity: 0.1; }

.video-a { position: relative; padding: 150px 0; text-align: center; }
 .video-a:before { position: absolute; left: -100%; right: -100%; top: 0; bottom: 0; z-index: -1; content: ' '; background: url(img/video-a-bg-a.jpg) 50% 0 repeat; }

.user-a {  }
 .user-a > .wrap { padding: 15px; background: #e8e5db; background: rgba(122,110,73,0.12); }
  .user-a .avatar { overflow: hidden; position: relative; margin: 0 0 25px; }
  	/*.user-a.left .avatar { background: url(img/avatar-background-left.png) 0 0 no-repeat; }
  	.user-a.right .avatar { background: url(img/avatar-background-right.png) 0 0 no-repeat; }*/
   .user-a .avatar img, .user-a .avatar embed, .user-a .avatar svg, .user-a .avatar .layer { display: block; position: absolute; margin: 0 auto; }
   	
   	/*.results*/
   	.user-a .avatar .bottle { background: url(img/bottle-progress-01.png) 100% top no-repeat; width: 20.1%; height: 55%; bottom: 2.85%; }
   		.user-a.left .avatar .bottle { right: 0.2%; }
   		.user-a.right .avatar .bottle { left: -0.1%; }
   		.user-a.female .avatar .bottle { background-position: left top; }
   		.user-a.male .avatar .bottle { background-position: 106.5% top; }
   	.results .user-a .avatar img.final { width: 70%; top: 7%; }
   		.results .user-a.left .avatar img.final { right: 2%; } 
   		.results .user-a.right .avatar img.final { left: 7%; } 
   	
   
   .user-a .avatar img.base.layer { width: 58%; top: 21%; }
   	.user-a.left .avatar img.base.layer { right: 11%; }
   	.user-a.right .avatar img.base.layer { left: 10.5%; }
   .user-a .avatar .hair.layer, .user-a .avatar .accessory.layer { width: 60%; height: 90%; top: 6%;  }
   	.user-a.left .avatar .hair.layer, .user-a.left .avatar .accessory.layer { right: 12.5%; }
    .user-a.right .avatar .hair.layer, .user-a.right .avatar .accessory.layer { left: -14%; }
   

   	.user-a.female .avatar .hair.layer { right: 12.5%; background: url(img/female-hair-template-short-01.png) 0 0 no-repeat; }
   		.user-a.female .avatar .hair.layer.medium { background-image: url(img/female-hair-template-medium-01.png); }
   		.user-a.female .avatar .hair.layer.long { background-image: url(img/female-hair-template-long-01.png); }
 		.user-a.male .avatar .hair.layer { right: 12.5%; background: url(img/male-hair-template-short-01.png) 0 0 no-repeat; }
   		.user-a.male .avatar .hair.layer.medium { background-image: url(img/male-hair-template-medium-01.png); }
   		.user-a.male .avatar .hair.layer.long { background-image: url(img/male-hair-template-long-01.png); }

 		.user-a .avatar .hair.layer.none { background: none; }
 		
 		.user-a.female .avatar .accessory.layer { right: 12.5%;  background: url(img/female-accessories-template-jewelry-01.png) 0 0 no-repeat; }
   		.user-a.female .avatar .accessory.layer.glasses { background-image: url(img/female-accessories-template-glasses-01.png); }
   		.user-a.female .avatar .accessory.layer.hat { background-image: url(img/female-accessories-template-hat-01.png); }
   		.user-a.female .avatar .accessory.layer.facialHair { background: none; }
   		
   		
 		.user-a.male .avatar .accessory.layer { right: 12.5%; background: url(img/male-accessories-template-jewelry-01.png) 0 0 no-repeat; }
   		.user-a.male .avatar .accessory.layer.glasses { background-image: url(img/male-accessories-template-glasses-01.png); }
   		.user-a.male .avatar .accessory.layer.hat { background-image: url(img/male-accessories-template-hat-01.png); }
   		.user-a.male .avatar .accessory.layer.facialHair { background-image: url(img/male-accessories-template-facialHair-01.png); }
   		

 		.user-a .avatar .state { position:absolute; width: 35%; height: 35%; bottom: 0; margin: 0; }
 			.user-a .avatar .state .img { background: url(img/states-01.png) 0 0 no-repeat; background-size: 180% auto; margin: 5% 10%; height: 80%; width: 70%; }
 			.user-a .avatar .state span { position: absolute;  bottom: 18%; font-size: 90%; font-weight: bold; font-family: Novecentowide,Helvetica Neue,Helvetica,Arial,sans-serif; }
 			
		.user-a.left .avatar .state { left: 0;}
			.user-a.left .avatar .state .img { float: left; }
			.user-a.left .avatar .state span { right: 10%; }
		.user-a.right .avatar .state { right: 0;}
			.user-a.right .avatar .state .img { float: right; }
			.user-a.right .avatar .state span { left: 10%; }
		
		.user-a.male .avatar .state .img { background-position: 110% 0; }
   		
  .user-a h3 { margin: 0 0 15px; color: #504a41; font: bold 18px/1 Enriqueta,Georgia,serif; text-transform: uppercase; }
  .user-a .box { position: relative; margin: 0 0 20px; padding: 10px; background: #fff; }
   .user-a .box h4 { position: relative; margin: 0; padding: 5px 0 15px; color: #f88400; font: bold 18px/20px Novecentowide,Helvetica Neue,Helvetica,Arial,sans-serif; text-transform: uppercase; }
   .user-a .box.toggled h4 { padding-bottom: 5px; }
   .js .user-a .box.toggled h4 { cursor: pointer; }
    .js .user-a .box.toggled h4:before { position: absolute; right: 0; top: 9px; content: ''; width: 14px; height: 14px; background: url(img/user-a-toggle-a.png) no-repeat; }
    .js .user-a .box.toggled.on h4:before { background-position: 0 -14px; }
   .js .user-a .box.toggled > .wrap { display: none; margin-top: 10px; }
   .js .user-a .box.toggled.on > .wrap { display: block; }
   .user-a .box .req { position: absolute; right: 10px; top: 15px; color: #c1baae; font: bold 14px/20px Novecentowide,Helvetica Neue,Helvetica,Arial,sans-serif; }
   .user-a .box label, .user-a .box .label { color: #000; font: bold 14px/22px Novecentowide,Helvetica Neue,Helvetica,Arial,sans-serif; text-transform: uppercase; }
    .user-a .box label em, .user-a .box .label em { color: #c1baae; font-style: normal; }
   .user-a .box .select { padding-left: 100px; }
    .user-a .box .select:after { display: block; overflow: hidden; clear: both; content: ""; width: 100%; height: 0; }
    .user-a .box .select label { float: left; width: 100px; margin: 0 0 0 -100px; }
    .user-a .box .select .select-a {  }
   .user-a .box .gender { position: relative; padding-left: 100px; }
    .user-a .box .gender:after { display: block; overflow: hidden; clear: both; content: ""; width: 100%; height: 0; }
    .user-a .box .gender .label { float: left; margin: 0 0 0 -100px; }
    .user-a .box .gender ul { list-style: none; margin: 0; padding: 0; }
     .user-a .box .gender ul li { float: left; }
     .user-a .box .gender ul li ~ li { margin-left: 10px; }
      .user-a .box .gender ul li:before { display: none; }
      .user-a .box .gender ul li label { display: inline-block; position: relative; width: 22px; height: 30px; margin: -4px 0 0; background: url(img/user-a-gender-a.png) no-repeat; font-size: 0; vertical-align: top; }
       .user-a .box .gender ul li label span { visibility: hidden; position: absolute; left: -35px; right: -35px; top: 40px; z-index: -1; margin: 15px 0 0; padding: 10px 5px; border-radius: 3px; background: #504a41; color: #fff; font: bold 12px/1.2 Novecentowide,Helvetica Neue,Helvetica,Arial,sans-serif; text-transform: uppercase; text-align: center; opacity: 0; -webkit-backface-visibility: hidden; }
       .user-a .box .gender ul li label span { -ms-transition: all 0.35s; -moz-transition: all 0.35s; -webkit-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; }
       .user-a .box .gender ul li label:hover span { visibility: visible; z-index: 10; margin-top: 0; opacity: 1; }
        .user-a .box .gender ul li label span:before { position: absolute; left: 50%; top: -10px; overflow: hidden; content: ''; width: 0; height: 0; margin: 0 0 0 -5px; border: 5px solid transparent; border-bottom-color: #504a41; }
      .user-a .box .gender ul li input { float: left; margin: 4px 5px 0 0; }
      :root .user-a .box .gender ul li input { position: absolute; left: -10001px; }
      .user-a .box .gender ul li.male label { background-position: -25px 0; }
      .user-a .box .gender ul li input:checked ~ label { background-position: 0 -30px; }
      .user-a .box .gender ul li.male input:checked ~ label { background-position: -25px -30px; }
   .user-a .box .color { }
    .user-a .box .color .label { display: block; margin: 0 0 10px; }
    .user-a .box .color ul { list-style: none; margin: 0; padding: 0; letter-spacing: -.35em; }
     .user-a .box .color ul li { display: inline-block; width: 11.11%; letter-spacing: 0; text-align: center; }
      .user-a .box .color ul li:before { display: none; }
      .user-a .box .color ul li input { margin: 0 0 5px; }
      :root .user-a .box .color ul li input { position: absolute; left: -10001px; }
      .user-a .box .color ul li label { display: block; position: relative; }
      .user-a .box .color ul li input:checked + label:before { position: absolute; left: 50%; top: 0; content: ''; width: 36px; height: 36px; margin: -5px 0 0 -18px; border-radius: 50%; border: 3px solid #f88400; }
   .user-a .box .style, .user-a .box.accessories { }
    .user-a .box .style .label, .user-a .box.accessories .label { display: block; margin: 0 0 10px; }
    .user-a .box .style ul, .user-a .box.accessories ul { list-style: none; margin: 0; padding: 0; letter-spacing: -.35em; }
     .user-a .box .style ul li, .user-a .box.accessories ul li { display: inline-block; width: 25%; letter-spacing: 0; text-align: center; }
     		.user-a ul li.acc0 label { float: left; padding: 20px 0; }
      .user-a .box .style ul li:before, .user-a .box.accessories ul li:before { display: none; }
      .user-a .box .style ul li input, .user-a .box.accessories ul li input { margin: 0 0 5px; }
      :root .user-a .box .style ul li input, :root .user-a .box.accessories ul li input { position: absolute; left: -10001px; }
      .user-a .box .style ul li label, .user-a .box.accessories ul li label { display: block; position: relative; height: 72px; width: 72px;}
      	.user-a .box.accessories ul li label { font-size: 10px; }
      .user-a .box .style ul li input:checked + label:before, .user-a .box.accessories ul li input:checked + label:before { position: absolute; left: 50%; top: 0; content: ''; width: 86px; height: 86px; margin: -10px 0 0 -43px; border-radius: 50%; border: 3px solid #f88400; }
   .user-a .box.result { text-align: center; }
    .user-a .box.result p { margin: -20px 0 0; color: #000; font-size: 36px; font-weight: bold; text-align: center; text-transform: uppercase; }
     .user-a .box.result p strong { display: block; margin: 0 0 -15px !important; font: 200px/1 Bebas Neue,Helvetica Neue,Helvetica,Arial,sans-serif; }
      .user-a .box.result p strong small { display: inline-block; margin: 20px -50px 0 0; font-size: 76px; vertical-align: top; }

.user-a.male { }
   .user-a.male .box h4 { color: #85b742; }
   .user-a.male .select-a { background: #85b742; }
   .user-a.male .box .gender ul li input:checked ~ label { background-position: 0 -60px; }
   .user-a.male .box .gender ul li.male input:checked ~ label { background-position: -25px -60px; }
   .user-a.male .box .color ul li input:checked + label:before,
   .user-a.male .box .style ul li input:checked + label:before, .user-a.male .box.accessories ul li input:checked + label:before { border-color: #85b742; }

/*! headers ------- */

/*! buttons ------- */

/*! helpers ------- */

.offset { position: absolute !important; left: -10001px !important; overflow: hidden !important; }

.alignright { float: right; margin: 0 0 20px 20px; }
.alignleft { float: left; margin: 0 20px 20px 0; }
 .alignright img, .alignleft img { display: block; max-width: none; }

/*! defaults ------ */

form { }
 label { cursor: pointer; vertical-align: middle; }
 label:first-child { display: block; margin: 0 0 5px; }
  label em { color: #f00; }
 input[type=text], input[type=password], input[type=search], input[type=email], textarea { width: 100%; height: 30px; padding: 0 4px; border: 1px solid #ccc; vertical-align: top; line-height: 28px }
 textarea { overflow: auto; height: 100px; padding: 3px 3px 3px 4px; line-height: 1.2; resize: vertical; }
 select { width: 100%; height: 30px; padding: 5px; border: 1px solid #ccc; background: #fff; }
 button { overflow: visible; height: 30px; padding: 0 9px; border: 1px solid #ccc; background: #ddd; cursor: pointer; } button::-moz-focus-inner { padding: 0; border: none; }

::-webkit-input-placeholder { color: #ccc; font-style: italic; }
:-ms-input-placeholder { color: #ccc !important; font-style: italic; }
:-moz-placeholder { color: #ccc; font-style: italic; }
::-moz-placeholder { color: #ccc; font-style: italic; }
.placeholder { color: #ccc !important; font-style: italic; }

table { display: table; border-collapse: collapse; border-spacing: 0; }
 table th, table td { padding: 5px 10px; border: 1px solid #eee; }

h1, h2, h3, h4, h5, h6 { font: bold 10px/1.2 Helvetica Neue,Helvetica,Arial,sans-serif; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
h5 { font-size: 12px; }
h6 { font-size: 10px; }

ul, ol, dd, blockquote { padding-left: 40px; }
 ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; }
 
ol { list-style: none; counter-reset: ordered; }
 ol li { counter-increment: ordered; }
  ol li:before { position: absolute; content: counter(ordered) ')'; width: 15px; margin: 0 0 0 -30px; text-align: right; }

ul { list-style: none; }
 ul li { }
  ul li:before { float: left; overflow: hidden; content: '>'; width: 0; height: 0; margin: 6px 0 0 -20px; border: 4px solid transparent; border-left-color: #444; }

a { color: #9bc555; text-decoration: none; }
a:hover, a:focus, a:active { color: #9bc555; text-decoration: underline; }
 a span { cursor: pointer; }

img { max-width: 100%; border-width: 0; } .lt-ie9 img { max-width: none; }
img { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

pre { font-family: Consolas,Monaco,Courier New,monospace; white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

hr, div.hr { overflow: hidden; width: 100%; height: 1px; margin: 15px 0; border: none; border-top: 1px solid #eee; background: none; font-size: 0; } div.hr * { display: none; }

/*! mobile -------- */

@media screen and (max-width: 960px) {  

body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
img { width: auto; height: auto; }
 
.root-a { }
 .root-a > * { max-width: 640px; padding: 0 10px; }
 .root-a > header { }
  .root-a > header > .logo { margin-left: 10px; margin-top: 3px; }
  .root-a > header > .tagline { display: none; }
  .root-a > header > .nav { padding-right: 10px; }
   .root-a > header > .nav li { display: none; }
   .root-a > header .nav ul li.icon.font.menu { display: block; }
 .root-a > footer { text-align: center; }
 .root-a > footer p { float: none; line-height: 2; }
  .root-a > footer p span { display: none; }
  .root-a > footer p a { display: block; }
 .root-a > footer ul { float: none; margin: 0 0 20px; }
  .root-a > footer ul li { float: none; display: inline-block; }
 
.compare-a { }
 .compare-a h2 { font-size: 20px; }
 .compare-a > .left { float: none; width: auto; margin: 0 0 20px; }
 .compare-a > .right { float: none; width: auto; margin: 0 0 20px; }
 .compare-a > .info { position: relative; left: 0; top: 0; right: 0; bottom: 0; width: auto; margin: 20px 0 40px; text-align: center; }
 .compare-a > .go { position: relative; left: 0; top: 0; width: auto; margin: 40px auto; }
  .compare-a > .go h2 { max-width: 320px; margin: 0 auto 20px; font-size: 24px; text-align: center; }
  .compare-a > .go .share { text-align: center; letter-spacing: -.35em; }
   .compare-a > .go .share li { display: inline-block; letter-spacing: 0; vertical-align: top; }
   .compare-a > .go .share li ~ li { margin: 0 0 0 20px; }
  .compare-a > .go .back { max-width: 150px; margin: 0 auto; }
 .compare-a > .vs { position: relative; left: 0; top: 0; width: auto; margin: 0 auto 10px; font-size: 80px; }
.compare-a.results { margin: 0 0 40px; padding: 0; border: none; border-radius: 0; background: none; }
 .compare-a.results .go { padding: 0; }
  .compare-a.results .go h2 { position: relative; left: 0; right: 0; top: 0; width: auto; max-width: none; height: auto; margin: 0 -10px 165px; padding: 20px 0; font-size: 18px; }
   .compare-a.results .go h2:before { position: absolute; left: 50%; bottom: -140px; content: ''; width: 185px; height: 140px; margin: 0 0 0 -92px; background: url(img/compare-a-arrow-a.png) 50% 100% no-repeat; }
   .compare-a.results .go h2 strong { font-size: 24px; }
  .compare-a.results .go .share { margin-bottom: 40px; }
  
.coupon-a { padding-bottom: 40px; }
 .coupon-a > h2 { margin: 0 -10px 20px; }
 .coupon-a > p { font-size: 16px; }

.intro-a { height: auto; margin-bottom: 70px; padding: 30px 0; }
 .intro-a:after { bottom: -50px; clip: rect(31px, 178px, 81px, 0); }
 .intro-a h2 { margin: 0 0 20px; font-size: 24px; line-height: 1.3; }
  .intro-a h2 strong { font-size: 32px; }
 .intro-a p { font-size: 14px; }
 .intro-a p.more {  }
  .intro-a p.more:before { width: 32px; height: 24px; margin-left: -16px; background-size: cover; }
  .intro-a p.more a { display: none; }

.mobnav-a {  }
 .mobnav-a:after { bottom: -50px; clip: rect(31px, 178px, 81px, 0); }
  
.results-a { padding: 30px 0 40px; }
 .results-a h2 { margin: 0 0 15px; }
 .results-a p { font-size: 18px; }

.share-a {  }
 .share-a ul { margin-top: 20px; }
  .share-a ul li ~ li { margin-left: 20px; }
   .share-a ul li > a { width: 44px; height: 44px; border-radius: 3px; }
    .share-a ul li > a:before { font-size: 22px; line-height: 44px; }
    .share-a ul li.twitter > a:before { font-size: 19px; }

.video-a { padding: 50px 0; }
 .video-a iframe { width: 620px; height: 348px; }
 
.user-a { }
 .user-a .box .select { }
  .user-a .box .select label { line-height: 34px; }
  .user-a .box .select .select-a { height: 34px; line-height: 34px; }
 
} @media screen and (max-width: 640px) {
  
.video-a iframe { width: 460px; height: 258px; }
 
} @media screen and (max-width: 480px) {
 
.coupon-a > .box p > span.button { margin-left: -9px; margin-right: -29px; }
.coupon-a > .box p > span.button { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); }
 
.video-a iframe { width: 364px; height: 204px; }
  
} @media screen and (max-width: 384px) {
 

.intro-a p { font-size: 12px; }
.video-a iframe { width: 340px; height: 191px; }
.user-a .box .color ul li { width: 20%; }
.user-a .box .style ul li { width: 33.33%; }
.user-a .box.result h4 { max-width: 200px; margin-left: auto; margin-right: auto; }
 
} @media screen and (max-width: 360px) {

.coupon-a > .box p > span.button { margin-left: -37px; margin-right: -57px; }
.coupon-a > .box p > span.button { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); }
.video-a iframe { width: 300px; height: 169px; }
.user-a .box.result p strong small { font-size: 56px; margin-right: -40px; }

}