body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

html {
  background: #f3f3f3; }

body {
  color: #707070;
  font-family: "Quicksand", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3; }

*::-moz-selection {
  background: #ff8e05;
  color: #fff; }

*::selection {
  background: #ff8e05;
  color: #fff; }

.text-white,
.link-white {
  color: #fff !important; }
  .text-white:hover,
  .link-white:hover {
    color: #fff !important; }

.wow {
  visibility: hidden; }

.vh {
  padding-bottom: 125px; }
  @media only screen and (min-width: 768px) {
    .vh {
      height: calc(100vh - 105px);
      padding-bottom: 0;
      -webkit-transition: height .2s;
      transition: height .2s; } }

.overflow-scroll {
  overflow: scroll; }

.content-area {
  background-color: #f3f3f3;
  padding-bottom: 30px; }

h1 {
  color: #505050;
  font-size: 1.5rem;
  font-weight: 700; }
  @media only screen and (min-width: 370px) {
    h1 {
      font-size: 2rem; } }
  @media (min-width: 992px) {
    h1 {
      font-size: 2.5rem; } }

h2 {
  font-size: 1.25rem; }
  @media only screen and (min-width: 370px) {
    h2 {
      font-size: 1.5rem; } }

.childrens-happiness footer {
  background: #fff;
  bottom: 0;
  -webkit-box-shadow: 0 8px 36px 10px #bbb;
          box-shadow: 0 8px 36px 10px #bbb;
  height: 105px;
  position: fixed;
  width: 100%;
  z-index: 3; }
  .childrens-happiness footer img {
    max-height: 100px;
    max-width: 100%; }

.btn-primary {
  background-color: #ff8e05;
  border-color: #ff8e05;
  border-radius: 3px;
  -webkit-box-shadow: 10px 11px 24px -9px #bbb;
          box-shadow: 10px 11px 24px -9px #bbb;
  color: #fff;
  display: inline-block;
  font-weight: 500;
  padding: 14px 58px;
  -webkit-transition: all .2s;
  transition: all .2s; }
  @media (min-width: 768px) {
    .btn-primary {
      font-size: 1.125rem; } }
  @media (min-width: 1200px) {
    .btn-primary {
      font-size: 1.25rem; } }
  .btn-primary:hover, .btn-primary:active {
    background-color: #ff9e29 !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    color: #fff !important;
    text-decoration: none; }
  .btn-primary:focus {
    border-color: #ff8e05;
    -webkit-box-shadow: none;
            box-shadow: none;
    outline: 0; }
  .btn-primary.questions {
    font-size: 1rem;
    padding: 8px 10px; }
    @media only screen and (min-width: 370px) {
      .btn-primary.questions {
        padding: 10px 20px; } }
    @media only screen and (min-width: 480px) {
      .btn-primary.questions {
        font-size: 1.25rem;
        padding: 12px 26px; } }
    @media only screen and (min-width: 640px) {
      .btn-primary.questions {
        padding: 14px 40px; } }
    .btn-primary.questions.short-answer {
      padding: 10px 20px; }
  .btn-primary.btn-twitter {
    background-color: #f3f3f3 !important;
    border: 2px solid #1da1f2;
    border-radius: 3px;
    -webkit-box-shadow: 10px 11px 24px -9px #bbb !important;
            box-shadow: 10px 11px 24px -9px #bbb !important;
    padding: 14px 40px 16px;
    -webkit-transition: all .2s;
    transition: all .2s; }
    .btn-primary.btn-twitter:hover, .btn-primary.btn-twitter:active, .btn-primary.btn-twitter:focus {
      background-color: #fff !important;
      border-color: #1da1f2 !important; }
    .btn-primary.btn-twitter:active {
      -webkit-box-shadow: none !important;
              box-shadow: none !important; }
  .btn-primary.btn-twitter-v2 {
    background-color: #f3f3f3 !important;
    border: 2px solid #1da1f2;
    border-radius: 3px;
    -webkit-box-shadow: 10px 11px 24px -9px #bbb !important;
            box-shadow: 10px 11px 24px -9px #bbb !important;
    padding: 8px 10px 10px;
    -webkit-transition: all .2s;
    transition: all .2s; }
    @media only screen and (min-width: 370px) {
      .btn-primary.btn-twitter-v2 {
        padding: 10px 20px 12px; } }
    .btn-primary.btn-twitter-v2:hover, .btn-primary.btn-twitter-v2:active, .btn-primary.btn-twitter-v2:focus {
      background-color: #fff !important;
      border-color: #1da1f2 !important; }
    .btn-primary.btn-twitter-v2:active {
      -webkit-box-shadow: none !important;
              box-shadow: none !important; }

p {
  font-size: 1rem; }
  @media only screen and (min-width: 370px) {
    p {
      font-size: 1.125rem; } }

.font-small {
  font-size: .8rem;
  margin-bottom: .5rem; }
  @media (min-width: 992px) {
    .font-small {
      font-size: 1rem; } }

.font-medium {
  font-weight: 500; }
  @media only screen and (min-width: 370px) {
    .font-medium {
      font-size: 1.25rem; } }
  @media only screen and (min-width: 480px) {
    .font-medium {
      font-size: 1.5rem; } }

.answer-container {
  margin-top: .5rem; }

.twitter-container {
  margin: .25rem 0 2.5rem;
  text-align: center; }

.red-text {
  color: #ff6d4d; }

.red-bg {
  background-color: #ffe1da; }

.green-text {
  color: #60c659; }

.green-link {
  color: #60c659;
  font-size: .875rem;
  text-decoration: underline; }

.green-list li {
  color: #60c659;
  font-size: 1rem; }
  .green-list li p {
    color: #707070;
    font-size: 1rem; }

.modal-header {
  border-bottom: 0; }
  .modal-header .close {
    font-size: 3.5rem;
    padding: 0 15px; }
    .modal-header .close:focus {
      outline: 0; }

.modal .info-circle {
  margin-bottom: 10px;
  margin-top: -30px;
  text-align: center; }

.modal-content {
  border-radius: 0; }

.modal-body {
  padding: 1rem 1.5rem; }

.hidden {
  display: none; }

.info-box {
  background-color: #fff;
  -webkit-box-shadow: 0 3px 16px 2px #bbb;
          box-shadow: 0 3px 16px 2px #bbb;
  margin-bottom: 1.5rem;
  padding-top: 1rem;
  position: relative; }
  .info-box .btn-primary {
    border-radius: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
    font-size: 1rem;
    padding: 12px 46px; }
    @media only screen and (min-width: 370px) {
      .info-box .btn-primary {
        font-size: 1.25rem;
        padding: 13px 54px; } }
  .info-box .cta-disabled {
    background-color: #e3e3e3;
    color: #505050; }
  .info-box .info-icon {
    background-color: #e3e3e3; }
  .info-box .info-icon-wrapper {
    height: 55px; }
  .info-box .icon-info {
    bottom: 0;
    position: absolute;
    right: 0; }
  .info-box .info-box-content {
    padding: .5rem; }
  .info-box .icon-copy {
    bottom: 16px;
    left: 0;
    max-width: 83%;
    position: absolute; }
    @media only screen and (min-width: 768px) {
      .info-box .icon-copy {
        left: 10px; } }
    @media only screen and (min-width: 996px) {
      .info-box .icon-copy {
        left: 20px; } }
  .info-box .chart-container {
    height: 150px;
    min-height: 150px; }
    @media only screen and (min-width: 370px) {
      .info-box .chart-container {
        height: 160px;
        min-height: 160px; } }
    @media only screen and (min-width: 768px) {
      .info-box .chart-container {
        margin-bottom: .5rem;
        margin-top: 1rem; } }
    @media only screen and (min-width: 370px) {
      .info-box .chart-container.friends-chart-container img {
        height: 170px; } }
    @media only screen and (min-width: 996px) {
      .info-box .chart-container.friends-chart-container img {
        height: 180px; } }
  .info-box .mum-2016,
  .info-box .dad-2016 {
    display: none; }
  .info-box .mum-2009,
  .info-box .mum-2016 {
    left: 10px; }
    @media only screen and (min-width: 370px) {
      .info-box .mum-2009,
      .info-box .mum-2016 {
        left: auto;
        right: 0; } }
  .info-box .dad-2009,
  .info-box .dad-2016 {
    left: 0; }
  .info-box .peacock-chart-girls {
    display: none; }
  .info-box .pie-chart,
  .info-box .peacock-chart {
    position: absolute; }
  .info-box .pie-chart {
    max-width: 190px; }
  .info-box .peacock-chart {
    height: 168px;
    left: 50%;
    margin-left: -140px;
    margin-top: -84px;
    top: 50%;
    width: 280px; }
    @media only screen and (min-width: 370px) {
      .info-box .peacock-chart {
        height: 192px;
        margin-left: -160px;
        margin-top: -96px;
        width: 320px; } }
  .info-box .angry-face {
    height: 30px;
    width: 30px; }
    @media only screen and (min-width: 768px) {
      .info-box .angry-face {
        height: 36px;
        width: 36px; } }
  .info-box .angry-row {
    margin: auto;
    width: 270px; }
    @media only screen and (min-width: 768px) {
      .info-box .angry-row {
        width: 300px; } }

.checkbox-row {
  background-color: #fff;
  height: 40px;
  margin-bottom: 3px;
  position: relative; }
  @media only screen and (min-width: 370px) {
    .checkbox-row {
      height: 46px; } }
  @media only screen and (min-width: 768px) {
    .checkbox-row {
      height: 54px;
      margin-bottom: 5px; } }
  .checkbox-row.checked {
    background-color: #d6ebd5; }
  .checkbox-row.unchecked {
    opacity: .5; }
  .checkbox-row input[type="checkbox"] + label {
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 0;
    color: #707070;
    font-size: .9rem;
    height: 20px;
    left: 20px;
    line-height: 1.3;
    position: absolute;
    text-indent: 28px;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    -webkit-transition: all ease-out 200ms;
    transition: all ease-out 200ms;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    white-space: nowrap;
    width: 20px; }
    @media only screen and (min-width: 370px) {
      .checkbox-row input[type="checkbox"] + label {
        font-size: 1rem;
        line-height: 1; } }
    @media only screen and (min-width: 768px) {
      .checkbox-row input[type="checkbox"] + label {
        font-size: 1.125rem; } }
    .checkbox-row input[type="checkbox"] + label::after {
      border-bottom: 4px solid #60c659;
      border-left: 4px solid #60c659;
      content: '';
      height: 10px;
      left: 50%;
      opacity: 0;
      position: absolute;
      top: 25%;
      -webkit-transform: rotate(-45deg);
              transform: rotate(-45deg);
      -webkit-transform-origin: bottom left;
              transform-origin: bottom left;
      -webkit-transition: all ease-out 200ms;
      transition: all ease-out 200ms;
      width: 0; }
  .checkbox-row input[type="checkbox"]:checked + label {
    border: 1px solid #707070; }
    .checkbox-row input[type="checkbox"]:checked + label::after {
      opacity: 1;
      width: 21px; }
  .checkbox-row #chk1,
  .checkbox-row #chk2,
  .checkbox-row #chk3,
  .checkbox-row #chk4,
  .checkbox-row #chk5,
  .checkbox-row #chk6 {
    display: none; }

.landing .container > .vh {
  padding-top: 5%; }
  @media only screen and (min-width: 370px) {
    .landing .container > .vh {
      padding-top: 12%; } }
  @media only screen and (min-width: 768px) {
    .landing .container > .vh {
      padding-top: 0; } }

.landing .faces {
  margin-top: 1rem;
  max-width: 500px; }
  @media only screen and (min-width: 370px) {
    .landing .faces {
      margin-top: 1.5rem; } }
  @media (min-width: 768px) {
    .landing .faces {
      margin-top: 3rem; } }
  @media (min-width: 992px) {
    .landing .faces {
      margin-top: 4rem; } }
  .landing .faces > div {
    display: inline-block; }

.landing .btn-primary {
  margin-top: 1rem; }
  @media only screen and (min-width: 370px) {
    .landing .btn-primary {
      margin-top: 2rem; } }
  @media (min-width: 768px) {
    .landing .btn-primary {
      margin-top: 3rem; } }
  @media (min-width: 992px) {
    .landing .btn-primary {
      margin-top: 4rem; } }

.section-page .section-heading {
  color: #60c659; }

.section-page .heading-bar {
  height: 90px; }
  @media only screen and (min-width: 768px) {
    .section-page .heading-bar {
      height: 110px; } }
  @media only screen and (min-width: 1200px) {
    .section-page .heading-bar {
      height: 120px; } }
  .section-page .heading-bar img {
    height: 95px;
    width: 95px; }
    @media only screen and (min-width: 768px) {
      .section-page .heading-bar img {
        height: 105px;
        width: 105px; } }
    @media only screen and (min-width: 1200px) {
      .section-page .heading-bar img {
        height: 115px;
        width: 115px; } }

.section-page .content {
  min-height: 200px;
  padding-top: .5rem; }
  @media only screen and (min-width: 370px) {
    .section-page .content {
      padding-top: 1rem; } }
  @media only screen and (min-width: 768px) {
    .section-page .content {
      padding-top: 2rem; } }

.section-page .ctas {
  margin-top: 1rem; }
  @media only screen and (min-width: 370px) {
    .section-page .ctas {
      margin-top: 2rem; } }
  .section-page .ctas .cta-separator {
    padding: 0 .25rem; }
    @media only screen and (min-width: 370px) {
      .section-page .ctas .cta-separator {
        padding: 0 .5rem; } }

.section-page .vh {
  padding-bottom: 70px;
  padding-top: 5%; }
  @media only screen and (min-width: 370px) {
    .section-page .vh {
      padding-top: 12%; } }
  @media only screen and (min-width: 768px) {
    .section-page .vh {
      height: calc(100vh - 60px);
      padding-bottom: 0;
      padding-top: 0;
      -webkit-transition: height .2s;
      transition: height .2s; } }

.section-page .back-and-next .container {
  max-width: 100% !important; }

.section-page .back-and-next .row {
  height: 60px; }
  @media only screen and (min-width: 370px) {
    .section-page .back-and-next .row {
      height: 75px; } }
  @media only screen and (min-width: 768px) {
    .section-page .back-and-next .row {
      height: 95px; } }
  .section-page .back-and-next .row a {
    color: #707070;
    display: inline-block;
    font-size: 1rem;
    padding: 20px 0;
    width: 100%; }
    @media only screen and (min-width: 370px) {
      .section-page .back-and-next .row a {
        font-size: 1.125rem; } }
    @media only screen and (min-width: 768px) {
      .section-page .back-and-next .row a {
        font-size: 1.25rem;
        padding: 35px 0; } }
    .section-page .back-and-next .row a:hover {
      text-decoration: none; }
    .section-page .back-and-next .row a:focus {
      outline: 0; }
    .section-page .back-and-next .row a::-moz-selection {
      background: #fff; }
    .section-page .back-and-next .row a::selection {
      background: #fff; }
  .section-page .back-and-next .row .right-border {
    border-right: 1px solid #999; }

.section-page .back {
  font-weight: 400; }

.section-page .next {
  font-weight: 500; }
  .section-page .next.share {
    font-size: 1rem; }
    @media only screen and (min-width: 370px) {
      .section-page .next.share {
        font-size: 1.25rem; } }

.section-page footer {
  height: 60px; }
  @media only screen and (min-width: 370px) {
    .section-page footer {
      height: 75px; } }
  @media only screen and (min-width: 768px) {
    .section-page footer {
      height: 95px; } }

.section-page .smiles-container {
  width: 230px; }
  .section-page .smiles-container .sad {
    opacity: .5; }

.section-page .community-img-container {
  height: 200px;
  position: relative; }
  .section-page .community-img-container .community-2009,
  .section-page .community-img-container .community-2009-2,
  .section-page .community-img-container .community-2016,
  .section-page .community-img-container .community-2016-2,
  .section-page .community-img-container .community-2016-replay {
    left: 50%;
    margin-left: -140px;
    margin-top: -100px;
    position: absolute;
    top: 50%; }
  .section-page .community-img-container img {
    height: 220px;
    width: 280px; }

.section-page.screen-3 .btn-primary, .section-page.screen-5 .btn-primary {
  padding: 12px 32px; }
  @media only screen and (min-width: 370px) {
    .section-page.screen-3 .btn-primary, .section-page.screen-5 .btn-primary {
      padding: 14px 32px; } }
  @media only screen and (min-width: 768px) {
    .section-page.screen-3 .btn-primary, .section-page.screen-5 .btn-primary {
      width: 180px; } }

.section-page.screen-11 .btn-primary {
  padding: 12px 20px; }
  @media only screen and (min-width: 370px) {
    .section-page.screen-11 .btn-primary {
      padding: 14px 32px; } }
  @media only screen and (min-width: 768px) {
    .section-page.screen-11 .btn-primary {
      width: 180px; } }

.section-page.screen-8 .btn-primary {
  padding: 12px 13px; }
  @media only screen and (min-width: 370px) {
    .section-page.screen-8 .btn-primary {
      padding: 14px 23px; } }
  @media only screen and (min-width: 768px) {
    .section-page.screen-8 .btn-primary {
      padding: 14px 32px;
      width: 180px; } }

.splash-page .heading {
  margin-top: 1rem; }
  @media only screen and (min-width: 370px) {
    .splash-page .heading {
      margin-top: 0; } }

.splash-page .container > .vh {
  margin-top: 1rem;
  padding-bottom: 70px;
  padding-top: 5%; }
  @media only screen and (min-width: 370px) {
    .splash-page .container > .vh {
      padding-top: 12%; } }
  @media only screen and (min-width: 768px) {
    .splash-page .container > .vh {
      height: calc(100vh - 60px);
      padding-bottom: 0;
      padding-top: 0;
      -webkit-transition: height .2s;
      transition: height .2s; } }

.splash-page .ripple-container {
  margin-top: 1rem;
  min-height: 167px;
  position: relative;
  text-align: center; }
  @media only screen and (min-width: 640px) {
    .splash-page .ripple-container {
      min-height: 200px; } }
  @media only screen and (min-width: 768px) {
    .splash-page .ripple-container {
      margin: 2rem auto 0;
      max-width: 525px; } }
  @media only screen and (min-width: 768px) {
    .splash-page .ripple-container {
      margin-top: 2.5rem; } }
  .splash-page .ripple-container img {
    margin-left: -125px;
    max-width: 250px;
    position: absolute;
    top: 0;
    width: 250px; }
    @media only screen and (min-width: 768px) {
      .splash-page .ripple-container img {
        margin-left: -150px;
        max-width: 300px;
        width: 300px; } }

.horse-race .twitter {
  margin-top: 1rem; }

@media only screen and (min-width: 370px) {
  .horse-race iframe {
    height: 300px !important;
    width: 100% !important; } }

@media only screen and (min-width: 640px) {
  .horse-race iframe {
    height: 320px !important; } }

@media only screen and (min-width: 768px) {
  .horse-race iframe {
    height: 340px !important; } }

@media only screen and (min-width: 996px) {
  .horse-race iframe {
    height: 360px !important; } }

.summary-page h1 {
  color: #60c659;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  margin-top: 1.5rem; }
  @media only screen and (min-width: 370px) {
    .summary-page h1 {
      margin-bottom: 1.5rem; } }

.summary-page h3 {
  color: #60c659;
  font-size: 1.25rem;
  margin-bottom: 1rem; }

.summary-page .tab-content {
  background-color: #fff;
  -webkit-box-shadow: 0 3px 16px 2px #bbb;
          box-shadow: 0 3px 16px 2px #bbb;
  padding: 1rem; }
  @media only screen and (min-width: 768px) {
    .summary-page .tab-content {
      padding: 2rem; } }

.summary-page .tab-headline {
  font-size: 1.125rem;
  font-weight: 500; }

.summary-page .nav-tabs {
  border-bottom: 0; }

.summary-page .nav-link {
  border: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  color: #707070;
  font-size: .9rem; }
  @media only screen and (min-width: 370px) {
    .summary-page .nav-link {
      font-size: 1rem; } }
  .summary-page .nav-link.active {
    color: #60c659;
    font-weight: 500; }
    .summary-page .nav-link.active .underline {
      border-top: 2px solid #60c659; }
  .summary-page .nav-link .underline {
    border-top: 2px solid transparent;
    margin-top: 3px; }

.summary-page .font-medium {
  font-size: 1.25rem; }

.summary-page .font-small {
  font-size: .9rem; }

.summary-page .data-by {
  font-size: .9rem;
  font-weight: 500; }
  @media only screen and (min-width: 370px) {
    .summary-page .data-by {
      font-size: 1rem; } }

.summary-page .btn-primary {
  font-size: 1rem;
  max-width: 295px;
  padding: 10px 38px; }
  @media only screen and (min-width: 480px) {
    .summary-page .btn-primary {
      padding: 14px 38px; } }

.summary-page .share-url {
  font-size: 14px;
  margin-bottom: 1rem;
  padding: .25rem;
  width: 100%; }

.top-tips h1 {
  color: #60c659;
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 1rem;
  margin-top: 1.5rem; }
  @media only screen and (min-width: 370px) {
    .top-tips h1 {
      margin-bottom: 1.5rem; } }

.top-tips h3 {
  color: #ff8e05;
  font-size: 1.25rem;
  margin-bottom: .25rem; }
  @media only screen and (min-width: 370px) {
    .top-tips h3 {
      margin-bottom: .5rem; } }
  @media only screen and (min-width: 768px) {
    .top-tips h3 {
      margin-bottom: 1rem; } }
  @media only screen and (min-width: 1024px) {
    .top-tips h3 {
      margin-bottom: 2rem; } }

.top-tips .tip-container {
  padding: .25rem; }
  .top-tips .tip-container .tip {
    background-color: #fff;
    height: 300px;
    padding: .5rem; }
    @media only screen and (min-width: 370px) {
      .top-tips .tip-container .tip {
        height: 360px;
        padding: 1rem; } }
    @media only screen and (min-width: 480px) {
      .top-tips .tip-container .tip {
        height: 375px; } }
    @media only screen and (min-width: 768px) {
      .top-tips .tip-container .tip {
        padding: 1.5rem; } }

.top-tips .number {
  margin-bottom: .25rem; }
  @media only screen and (min-width: 370px) {
    .top-tips .number {
      margin-bottom: .5rem; } }
  @media only screen and (min-width: 768px) {
    .top-tips .number {
      margin-bottom: 1rem; } }
  .top-tips .number img {
    height: 30px;
    margin: auto;
    width: 30px; }

.top-tips .tip-icon img {
  margin: auto;
  max-width: 80px; }
  @media only screen and (min-width: 370px) {
    .top-tips .tip-icon img {
      max-width: 120px; } }
  @media only screen and (min-width: 768px) {
    .top-tips .tip-icon img {
      max-width: 130px; } }

.top-tips p {
  font-size: .9rem; }
  @media only screen and (min-width: 370px) {
    .top-tips p {
      font-size: 1rem; } }
  @media only screen and (min-width: 768px) {
    .top-tips p {
      padding: 0 1rem; } }
  @media only screen and (min-width: 1024px) {
    .top-tips p {
      padding: 0 2rem; } }

.top-tips .slick-prev,
.top-tips .slick-next {
  height: 22px;
  width: 22px; }
  @media only screen and (min-width: 768px) {
    .top-tips .slick-prev,
    .top-tips .slick-next {
      height: 25px;
      width: 25px; } }

.top-tips .slick-prev {
  left: -22px; }
  @media only screen and (min-width: 768px) {
    .top-tips .slick-prev {
      left: -25px; } }

.top-tips .slick-next {
  right: -22px; }
  @media only screen and (min-width: 768px) {
    .top-tips .slick-next {
      right: -25px; } }

.top-tips .slick-prev::before,
.top-tips .slick-next::before {
  color: #707070;
  font-size: 24px; }
  @media only screen and (min-width: 768px) {
    .top-tips .slick-prev::before,
    .top-tips .slick-next::before {
      font-size: 27px; } }