/* 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" /> */
.quiz-wrapper {
  background: url(../img/bg-stars.jpg);
  background-size: contain;
  overflow: hidden;
  text-align: left; }
  .quiz-wrapper html, .quiz-wrapper body, .quiz-wrapper div, .quiz-wrapper span, .quiz-wrapper applet, .quiz-wrapper object, .quiz-wrapper iframe,
  .quiz-wrapper h1, .quiz-wrapper h2, .quiz-wrapper h3, .quiz-wrapper h4, .quiz-wrapper h5, .quiz-wrapper h6, .quiz-wrapper p, .quiz-wrapper blockquote, .quiz-wrapper pre,
  .quiz-wrapper a, .quiz-wrapper abbr, .quiz-wrapper acronym, .quiz-wrapper address, .quiz-wrapper big, .quiz-wrapper cite, .quiz-wrapper code,
  .quiz-wrapper del, .quiz-wrapper dfn, .quiz-wrapper em, .quiz-wrapper img, .quiz-wrapper ins, .quiz-wrapper kbd, .quiz-wrapper q, .quiz-wrapper s, .quiz-wrapper samp,
  .quiz-wrapper small, .quiz-wrapper strike, .quiz-wrapper strong, .quiz-wrapper sub, .quiz-wrapper sup, .quiz-wrapper tt, .quiz-wrapper var,
  .quiz-wrapper b, .quiz-wrapper u, .quiz-wrapper i, .quiz-wrapper center,
  .quiz-wrapper dl, .quiz-wrapper dt, .quiz-wrapper dd, .quiz-wrapper ol, .quiz-wrapper ul, .quiz-wrapper li,
  .quiz-wrapper fieldset, .quiz-wrapper form, .quiz-wrapper label, .quiz-wrapper legend,
  .quiz-wrapper table, .quiz-wrapper caption, .quiz-wrapper tbody, .quiz-wrapper tfoot, .quiz-wrapper thead, .quiz-wrapper tr, .quiz-wrapper th, .quiz-wrapper td,
  .quiz-wrapper article, .quiz-wrapper aside, .quiz-wrapper canvas, .quiz-wrapper details, .quiz-wrapper embed,
  .quiz-wrapper figure, .quiz-wrapper figcaption, .quiz-wrapper footer, .quiz-wrapper header, .quiz-wrapper hgroup,
  .quiz-wrapper menu, .quiz-wrapper nav, .quiz-wrapper output, .quiz-wrapper ruby, .quiz-wrapper section, .quiz-wrapper summary,
  .quiz-wrapper time, .quiz-wrapper mark, .quiz-wrapper audio, .quiz-wrapper video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline; }
  .quiz-wrapper html {
    line-height: 1; }
  .quiz-wrapper ol, .quiz-wrapper ul {
    list-style: none; }
  .quiz-wrapper table {
    border-collapse: collapse;
    border-spacing: 0; }
  .quiz-wrapper caption, .quiz-wrapper th, .quiz-wrapper td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle; }
  .quiz-wrapper q, .quiz-wrapper blockquote {
    quotes: none; }
    .quiz-wrapper q:before, .quiz-wrapper q:after, .quiz-wrapper blockquote:before, .quiz-wrapper blockquote:after {
      content: "";
      content: none; }
  .quiz-wrapper a img {
    border: none; }
  .quiz-wrapper article, .quiz-wrapper aside, .quiz-wrapper details, .quiz-wrapper figcaption, .quiz-wrapper figure, .quiz-wrapper footer, .quiz-wrapper header, .quiz-wrapper hgroup, .quiz-wrapper main, .quiz-wrapper menu, .quiz-wrapper nav, .quiz-wrapper section, .quiz-wrapper summary {
    display: block; }

.quiz-wrapper .intro-text {
  background: #fbdd13;
  padding: 0 20px;
  margin: 0 0 80px;
  text-align: center;
  overflow: hidden; }
  .quiz-wrapper .intro-text p {
    max-width: 600px;
    margin: 40px auto;
    color: #000;
    line-height: 1.5em;
    font-size: 1.2em; }
    .quiz-wrapper .intro-text p strong {
      font-weight: 700; }
.quiz-wrapper .wrap {
  max-width: 720px;
  margin: auto;
  color: #060606;
  font-size: 1em;
  line-height: 1.7em;
  font-family: 'Montserrat', sans-serif; }
.quiz-wrapper .header {
  text-align: center; }
  .quiz-wrapper .header img {
    max-width: 100%; }
.quiz-wrapper .q_wrap {
  margin: 20px 0 80px; }
  @media screen and (max-width: 425px) {
    .quiz-wrapper .q_wrap {
      margin: 20px 0 40px; } }
  .quiz-wrapper .q_wrap .q {
    overflow: hidden;
    margin: 40px 0;
    text-shadow: #000 2px 3px 4px; }
    @media screen and (max-width: 425px) {
      .quiz-wrapper .q_wrap .q {
        font-size: 80%; } }
    .quiz-wrapper .q_wrap .q .num {
      color: #013c5e;
      font-size: 3.5em;
      line-height: 66px;
      float: left;
      width: 70px;
      color: #fbdd13; }
      @media screen and (max-width: 425px) {
        .quiz-wrapper .q_wrap .q .num {
          float: none;
          margin: 10px auto;
          text-align: center; } }
    .quiz-wrapper .q_wrap .q h2 {
      width: calc(100% - 70px);
      margin: 0 0 0 70px;
      font-size: 2em;
      line-height: 1.2em;
      color: #fff; }
      @media screen and (max-width: 425px) {
        .quiz-wrapper .q_wrap .q h2 {
          margin: 0;
          width: 100%;
          text-align: center; } }
  .quiz-wrapper .q_wrap .bg_wrap {
    padding: 20px;
    background: #fff;
    overflow: hidden; }
  .quiz-wrapper .q_wrap .vid {
    margin: 0 0 20px; }
    .quiz-wrapper .q_wrap .vid img {
      max-width: 100%;
      vertical-align: bottom;
      cursor: pointer; }
    .quiz-wrapper .q_wrap .vid .iframe_wrap {
      display: none;
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      max-width: 100%; }
      .quiz-wrapper .q_wrap .vid .iframe_wrap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
    .quiz-wrapper .q_wrap .vid.show img {
      display: none; }
    .quiz-wrapper .q_wrap .vid.show .iframe_wrap {
      display: block; }
  .quiz-wrapper .q_wrap .ans_wrap .ans {
    background: #e1e1e1;
    cursor: pointer;
    margin: 10px 0;
    padding: 10px;
    overflow: hidden;
    display: table; }
    .quiz-wrapper .q_wrap .ans_wrap .ans:hover, .quiz-wrapper .q_wrap .ans_wrap .ans.active {
      background: #98c2d7; }
    .quiz-wrapper .q_wrap .ans_wrap .ans .check {
      height: 35px;
      width: 35px;
      float: left;
      margin: 10px 5px;
      background: url("../img/check.png");
      background-repeat: no-repeat;
      background-position: 0 -35px; }
    .quiz-wrapper .q_wrap .ans_wrap .ans.active .check {
      background-position: 0 0; }
    .quiz-wrapper .q_wrap .ans_wrap .ans p {
      line-height: 24px;
      padding: 5px;
      font-size: 1.1em;
      text-align: left;
      vertical-align: middle;
      display: table-cell; }
.quiz-wrapper .submit_wrap {
  margin: 40px 0 80px;
  text-align: center; }
  .quiz-wrapper .submit_wrap.hide {
    display: none; }
  .quiz-wrapper .submit_wrap .submit {
    padding: 10px 15px;
    background: #fbdd13;
    color: #060606;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    border: 0;
    font-size: 2em;
    cursor: pointer;
    width: initial; }
.quiz-wrapper .result {
  text-align: center;
  margin: 40px 0;
  padding: 30px;
  background: #fff;
  display: none; }
  .quiz-wrapper .result.show {
    display: block; }
  .quiz-wrapper .result h3 {
    color: #013c5e;
    font-size: 4em;
    line-height: 1em; }
  .quiz-wrapper .result h2 {
    display: inline-block;
    background: #013c5e;
    color: #fff;
    padding: 10px 15px;
    font-size: 2em;
    line-height: 1em;
    margin: 30px 0;
    font-style: italic;
    width: initial; }
  .quiz-wrapper .result p {
    margin: 20px 0; }
    .quiz-wrapper .result p.desc {
      margin: 20px 0 60px; }
  .quiz-wrapper .result a {
    margin: 10px;
    display: inline-block; }