@import "http://www.thetimes.co.uk/fonts/Solido-Bold.css";
.quiz-container.theme-default .quiz .quiz-card-container[data-card-type="question"]:nth-child(even),
.quiz-container.theme-default .quiz .quiz-card-container .quiz-card .results-container .results .complete-result-container .complete-result .complete-question-container:nth-child(even) {
  background-color: #dbcbdb; }
  .quiz-container.theme-default .quiz .quiz-card-container[data-card-type="question"]:nth-child(even) .question-text,
  .quiz-container.theme-default .quiz .quiz-card-container .quiz-card .results-container .results .complete-result-container .complete-result .complete-question-container:nth-child(even) .question-text {
    color: black !important; }

.quiz-container.theme-default .quiz .quiz-card-container[data-card-type="question"]:nth-child(odd),
.quiz-container.theme-default .quiz .quiz-card-container .quiz-card .results-container .results .complete-result-container .complete-result .complete-question-container:nth-child(odd) {
  background-color: #883eba; }

.quiz-container .quiz .quiz-card-container .quiz-card .introstitial-container {
  color: white !important; }
  .quiz-container .quiz .quiz-card-container .quiz-card .introstitial-container .body {
    text-shadow: 2px 2px black;
    font-family: Solido-Bold !important; }

.quiz-container .quiz .quiz-card-container .quiz-card .results-container .results .result-container .result {
  display: none !important; }
  .quiz-container .quiz .quiz-card-container .quiz-card .results-container .results .result-container .result.highlight {
    display: block !important; }
    .quiz-container .quiz .quiz-card-container .quiz-card .results-container .results .result-container .result.highlight .result-header {
      font-size: 2em !important; }
    .quiz-container .quiz .quiz-card-container .quiz-card .results-container .results .result-container .result.highlight .result-body img {
      max-width: 100%; }

.quiz-container.theme-custom .quiz .quiz-card-container .quiz-card .submit-container .submit .submit-btn {
  position: relative;
  visibility: hidden; }
  .quiz-container.theme-custom .quiz .quiz-card-container .quiz-card .submit-container .submit .submit-btn:after {
    content: 'Click for your hip-hop persona';
    visibility: visible;
    display: block;
    position: absolute;
    padding: 10px 20px;
    color: #fff;
    background-color: #883eba;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    top: 0;
    left: 0;
    width: 100px; }

.answers-container {
  overflow-x: hidden; }

.quiz > div:nth-of-type(2) .question-container, .quiz > div:nth-of-type(4) .question-container, .quiz > div:nth-of-type(6) .question-container, .quiz > div:nth-of-type(7) .question-container {
  max-width: 100% !important; }
.quiz > div:nth-of-type(2) .question, .quiz > div:nth-of-type(4) .question, .quiz > div:nth-of-type(6) .question, .quiz > div:nth-of-type(7) .question {
  width: 600px;
  margin: 0 auto; }
  @media screen and (max-width: 600px) {
    .quiz > div:nth-of-type(2) .question, .quiz > div:nth-of-type(4) .question, .quiz > div:nth-of-type(6) .question, .quiz > div:nth-of-type(7) .question {
      width: 100%; } }
.quiz > div:nth-of-type(2) .dragdrop, .quiz > div:nth-of-type(4) .dragdrop, .quiz > div:nth-of-type(6) .dragdrop, .quiz > div:nth-of-type(7) .dragdrop {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; }
.quiz > div:nth-of-type(2) .dragdrop-container, .quiz > div:nth-of-type(4) .dragdrop-container, .quiz > div:nth-of-type(6) .dragdrop-container, .quiz > div:nth-of-type(7) .dragdrop-container {
  padding-top: 20px;
  width: 100% !important;
  max-width: 100% !important; }
.quiz > div:nth-of-type(2) .drops-container, .quiz > div:nth-of-type(4) .drops-container, .quiz > div:nth-of-type(6) .drops-container, .quiz > div:nth-of-type(7) .drops-container {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2; }
.quiz > div:nth-of-type(2) .drags-container, .quiz > div:nth-of-type(4) .drags-container, .quiz > div:nth-of-type(6) .drags-container, .quiz > div:nth-of-type(7) .drags-container {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1; }
.quiz > div:nth-of-type(2) .drops-container, .quiz > div:nth-of-type(2) .drags-container, .quiz > div:nth-of-type(4) .drops-container, .quiz > div:nth-of-type(4) .drags-container, .quiz > div:nth-of-type(6) .drops-container, .quiz > div:nth-of-type(6) .drags-container, .quiz > div:nth-of-type(7) .drops-container, .quiz > div:nth-of-type(7) .drags-container {
  width: 700px !important;
  margin: 0 auto; }
  @media screen and (max-width: 700px) {
    .quiz > div:nth-of-type(2) .drops-container, .quiz > div:nth-of-type(2) .drags-container, .quiz > div:nth-of-type(4) .drops-container, .quiz > div:nth-of-type(4) .drags-container, .quiz > div:nth-of-type(6) .drops-container, .quiz > div:nth-of-type(6) .drags-container, .quiz > div:nth-of-type(7) .drops-container, .quiz > div:nth-of-type(7) .drags-container {
      width: 100% !important; } }
.quiz > div:nth-of-type(2) .drop-container, .quiz > div:nth-of-type(2) .drag-container, .quiz > div:nth-of-type(4) .drop-container, .quiz > div:nth-of-type(4) .drag-container, .quiz > div:nth-of-type(6) .drop-container, .quiz > div:nth-of-type(6) .drag-container, .quiz > div:nth-of-type(7) .drop-container, .quiz > div:nth-of-type(7) .drag-container {
  display: inline-block;
  vertical-align: top;
  margin: 10px 10px 0 0 !important; }
  @media screen and (max-width: 600px) {
    .quiz > div:nth-of-type(2) .drop-container, .quiz > div:nth-of-type(2) .drag-container, .quiz > div:nth-of-type(4) .drop-container, .quiz > div:nth-of-type(4) .drag-container, .quiz > div:nth-of-type(6) .drop-container, .quiz > div:nth-of-type(6) .drag-container, .quiz > div:nth-of-type(7) .drop-container, .quiz > div:nth-of-type(7) .drag-container {
      margin: 10px 0 0 0 !important; } }
.quiz > div:nth-of-type(2) .drags-header-text, .quiz > div:nth-of-type(2) .drops-header-text, .quiz > div:nth-of-type(4) .drags-header-text, .quiz > div:nth-of-type(4) .drops-header-text, .quiz > div:nth-of-type(6) .drags-header-text, .quiz > div:nth-of-type(6) .drops-header-text, .quiz > div:nth-of-type(7) .drags-header-text, .quiz > div:nth-of-type(7) .drops-header-text {
  text-align: left !important; }
.quiz > div:nth-of-type(2) .drag.draggable, .quiz > div:nth-of-type(4) .drag.draggable, .quiz > div:nth-of-type(6) .drag.draggable, .quiz > div:nth-of-type(7) .drag.draggable {
  height: 120px !important;
  width: 120px;
  margin: 0 auto 50px;
  background-color: transparent !important; }
  @media screen and (max-width: 767px) {
    .quiz > div:nth-of-type(2) .drag.draggable, .quiz > div:nth-of-type(4) .drag.draggable, .quiz > div:nth-of-type(6) .drag.draggable, .quiz > div:nth-of-type(7) .drag.draggable {
      height: 70px !important;
      width: 70px; } }
  .quiz > div:nth-of-type(2) .drag.draggable .drag-text, .quiz > div:nth-of-type(4) .drag.draggable .drag-text, .quiz > div:nth-of-type(6) .drag.draggable .drag-text, .quiz > div:nth-of-type(7) .drag.draggable .drag-text {
    position: relative;
    top: 98%;
    padding: 10px 0 !important; }
  .quiz > div:nth-of-type(2) .drag.draggable.selected, .quiz > div:nth-of-type(4) .drag.draggable.selected, .quiz > div:nth-of-type(6) .drag.draggable.selected, .quiz > div:nth-of-type(7) .drag.draggable.selected {
    background-color: #fff !important; }
    .quiz > div:nth-of-type(2) .drag.draggable.selected .drag-text, .quiz > div:nth-of-type(4) .drag.draggable.selected .drag-text, .quiz > div:nth-of-type(6) .drag.draggable.selected .drag-text, .quiz > div:nth-of-type(7) .drag.draggable.selected .drag-text {
      display: none; }
.quiz > div:nth-of-type(2) .drop.dropzone, .quiz > div:nth-of-type(4) .drop.dropzone, .quiz > div:nth-of-type(6) .drop.dropzone, .quiz > div:nth-of-type(7) .drop.dropzone {
  height: 120px !important;
  width: 120px;
  margin: 0 auto 50px;
  overflow: visible !important;
  background-color: transparent !important; }
  @media screen and (max-width: 767px) {
    .quiz > div:nth-of-type(2) .drop.dropzone, .quiz > div:nth-of-type(4) .drop.dropzone, .quiz > div:nth-of-type(6) .drop.dropzone, .quiz > div:nth-of-type(7) .drop.dropzone {
      height: 70px !important;
      width: 70px; } }
  .quiz > div:nth-of-type(2) .drop.dropzone .drop-text, .quiz > div:nth-of-type(4) .drop.dropzone .drop-text, .quiz > div:nth-of-type(6) .drop.dropzone .drop-text, .quiz > div:nth-of-type(7) .drop.dropzone .drop-text {
    position: relative;
    top: 98%;
    padding: 10px 0 !important; }

.quiz-container .quiz > div:nth-of-type(6) .drags-container, .quiz-container .quiz > div:nth-of-type(6) .drops-container {
  width: 550px !important; }
  @media screen and (max-width: 550px) {
    .quiz-container .quiz > div:nth-of-type(6) .drags-container, .quiz-container .quiz > div:nth-of-type(6) .drops-container {
      width: 100% !important; } }
.quiz-container .quiz > div:nth-of-type(6) .drop.dropzone {
  height: 180px !important;
  background-color: #fff !important; }
  @media screen and (max-width: 767px) {
    .quiz-container .quiz > div:nth-of-type(6) .drop.dropzone {
      height: 260px !important; } }
.quiz-container .quiz > div:nth-of-type(6) .question-container .dragdrop .drops-container .drops .drop-container .drop-text {
  top: inherit !important;
  padding: 10px 2px !important; }

.quiz > div:nth-of-type(7) .drop.dropzone {
  height: 180px !important; }
  @media screen and (max-width: 767px) {
    .quiz > div:nth-of-type(7) .drop.dropzone {
      height: 120px !important; } }

.quiz > div:nth-of-type(3) .answers {
  width: 100%; }
  @media screen and (max-width: 767px) {
    .quiz > div:nth-of-type(3) .answers {
      padding-left: 10%; } }
  .quiz > div:nth-of-type(3) .answers .answer-container {
    display: inline-block;
    width: 80%; }
    @media screen and (min-width: 767px) {
      .quiz > div:nth-of-type(3) .answers .answer-container {
        width: 30%; } }

.quiz > div:nth-of-type(5) .question-image img {
  margin: 0 auto; }
.quiz > div:nth-of-type(5) .answers .answer-container {
  width: 80%;
  padding-left: 10%; }

.quiz > div:nth-of-type(8) .question-image img {
  margin: 0 auto; }
.quiz > div:nth-of-type(8) .answers {
  padding-left: 10%;
  width: 100%; }
  .quiz > div:nth-of-type(8) .answers .answer-container {
    display: inline-block;
    width: 80%; }
    @media screen and (min-width: 767px) {
      .quiz > div:nth-of-type(8) .answers .answer-container {
        width: 39%; } }

/*# sourceMappingURL=custom.css.map */
