/**********************************
Description...: MOBILE THEME
Last Changed..: 2017-04-06 16:16:43 +0100
Notes #1......:
/******************/
@media screen and (max-device-width: 880px), screen and (max-width: 880px) {
  /*SUPER SIZE MONITOR*/
  body {
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: 100%;
  }

  .container {
    width: auto;
  }

  main, footer {
    width: 92%;
    margin: 0 4%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
@media screen and (max-device-width: 768px), screen and (max-width: 768px) {
  /*TABLET, get rid of the exessive margins*/
  main {
    padding-left: 20px;
    padding-right: 20px;
  }

  main h2, main h3, main h4, main h5, main h6, main p, main ul, main ol,
  main .ans-yes, main .ans-no {
    margin-left: 20px;
    margin-right: 20px;
  }
  main p, main ul li, main ol li {
    margin-bottom: 16px;
  }

  .line, .question .line {
    margin-left: 20px;
    margin-right: 20px;
  }

  main button.option-nah,
  main button.option-skip-2-3, main button.option-skip-2-3, main button.option-skip-5-6,
  main button.option-skip-7-8 {
    margin-left: 0;
    margin-right: 0;
  }

  main button, main .next, main .reset {
    margin-left: 20px;
    margin-right: 20px;
  }

  main .ques-0a .next, main .ques-0b .next {
    margin-left: 0;
  }

  main button.option-goback, main button.option-undo {
    right: 0px;
  }
}
@media screen and (max-device-width: 640px), screen and (max-width: 640px) {
  /*SMARTPHONE*/
  body {
    font-size: 80%;
  }

  main {
    padding-left: 0px;
    padding-right: 0px;
  }

  main h2, main h3, main h4, main h5, main h6 {
    font-size: 1.8em;
  }

  main p.intro {
    font-size: 1.8em;
  }

  main .ques-0a h1 {
    font-size: 3em;
  }

  main .ques-0b h2 {
    padding-left: 40px;
    background-size: 30px;
  }

  main button, main .next, main .reset {
    padding: 18px 30px;
  }

  main .reset {
    padding-left: 60px;
  }

  main .next {
    padding-right: 60px;
  }

  main button.option-goback, main button.option-undo {
    right: 20px;
  }
}
@media screen and (max-device-width: 500px), screen and (max-width: 500px) {
  main img {
    float: none;
    max-width: 100%;
    margin: 20px 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  main h4 {
    padding-right: 90px;
  }

  main .ques-6 ans-no h4 {
    padding-right: 0;
  }

  main .option-skip-2-3, main .option-skip-2-4,
  main .option-skip-4-5, main .option-skip-4-6,
  main .option-skip-5-7,
  main .option-skip-6-7 {
    clear: left;
    margin-left: 20px;
  }
}
@media screen and (max-device-width: 380px), screen and (max-width: 380px) {
  /*MOBILE*/
  main .ques-0a .next, main .ques-0b .next {
    min-width: auto;
    padding-left: 20px;
    padding-right: 40px;
  }
}
/* IE only (forces a nicer mobile view for IE's?) ----------- */
@-ms-viewport {}

/*# sourceMappingURL=theme-mobile.css.map */