@import url(fonts.css);
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: "va_thesansplainregular", sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: #ebeae6;
  letter-spacing: 0px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

a.main-menu-button {
  position: fixed;
  display: none;
  top: 18px;
  right: 20px;
  box-sizing: border-box;
  padding: 15px 40px 13px;
  color: black;
  text-decoration: none;
  font-family: "Baskerville10Pro", serif;
  font-size: 18px;
  letter-spacing: 0px;
  border: 1px solid black;
  z-index: 10000; }
  a.main-menu-button:hover, a.main-menu-button:active {
    color: white;
    background-color: black; }

body.gallery a.main-menu-button {
  display: block; }
  @media screen and (max-width: 768px) {
    body.gallery a.main-menu-button {
      display: none; } }

/* UI */
#wrapper {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 100%;
  text-align: center;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch; }

#background {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  overflow-X: scroll;
  height: 100%;
  background-position: center center;
  background-image: url("../img/intro-bg.jpg"); }

#intro-boy {
  position: fixed;
  bottom: 25px;
  right: 0px;
  z-index: 3;
  width: 354px;
  height: 316px;
  background: url("../img/intro-boy.png") top center no-repeat;
  background-size: cover; }
  @media screen and (max-width: 1153px) {
    #intro-boy {
      width: 254px;
      height: 226px; } }
  @media screen and (max-height: 1010px) {
    #intro-boy {
      display: none; } }
  @media screen and (max-width: 850px) {
    #intro-boy {
      display: none; } }

#intro-girl {
  position: fixed;
  bottom: 40px;
  left: 0px;
  z-index: 3;
  width: 410px;
  height: 467px;
  background: url("../img/intro-girl.png") top center no-repeat;
  background-size: cover; }
  @media screen and (max-width: 1153px) {
    #intro-girl {
      width: 310px;
      height: 367px; } }
  @media screen and (max-height: 1010px) {
    #intro-girl {
      display: none; } }
  @media screen and (max-width: 850px) {
    #intro-girl {
      display: none; } }

#page-wrapper {
  position: absolute;
  top: 126px;
  left: 0px;
  width: 100%;
  text-align: center;
  overflow: visible; }
  @media screen and (max-width: 1000px) {
    #page-wrapper {
      top: 95px; } }
  @media screen and (max-width: 640px), screen and (max-height: 900px) {
    #page-wrapper {
      top: 75px; } }

#logo {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 390px;
  height: 90px; }
  @media screen and (max-width: 640px), screen and (max-height: 900px) {
    #logo {
      width: 260px;
      height: 60px; } }
  @media screen and (max-width: 400px) {
    #logo {
      width: 215px;
      height: 50px; } }

/* WONKY BGS */
.wonk1 span {
  position: relative;
  color: white; }

.wonky-svg {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%; }

/* SIDEBAR (desktop only) */
#sidebar {
  position: absolute;
  display: none;
  width: 325px;
  min-height: 300px;
  left: 0px; }
  #sidebar .title {
    position: relative;
    margin-left: 20px;
    font-family: "Baskerville10Pro-Italic", serif;
    font-size: 30px;
    padding-top: 14px;
    text-align: left;
    border-top: solid black 1px;
    color: white; }
    @media screen and (max-width: 1000px) {
      #sidebar .title {
        display: none; } }
  #sidebar .sub {
    margin-left: 0px;
    text-align: center;
    border: 0px;
    color: black; }
    @media screen and (max-width: 1000px) {
      #sidebar .sub {
        display: none; } }
  #sidebar .copy {
    font-family: "va_thesansplainregular", sans-serif;
    font-size: 16px;
    font-style: normal;
    width: 220px;
    text-align: left;
    line-height: 130%;
    margin-left: 50px; }
    @media screen and (max-width: 1000px) {
      #sidebar .copy {
        display: none; } }
  #sidebar .title-bg {
    position: absolute;
    width: 180px;
    height: 65px;
    left: 11px;
    margin-top: -10px; }
    @media screen and (max-width: 1000px) {
      #sidebar .title-bg {
        display: none; } }
  #sidebar .nav-image {
    position: relative;
    width: 100%;
    height: 241px;
    background: url("") top center no-repeat;
    background-size: contain;
    margin-top: 40px; }
    @media screen and (max-width: 1000px) {
      #sidebar .nav-image {
        display: none; } }

/* PROGRESS */
#job-progress {
  display: block;
  position: relative;
  margin-left: 345px;
  opacity: 0;
  height: auto;
  text-align: left;
  border-top: solid black 1px; }
  @media screen and (max-width: 1000px) {
    #job-progress {
      margin-left: 20px; } }
  @media screen and (max-width: 525px) {
    #job-progress {
      margin-left: 7px; } }
  #job-progress .harness {
    display: inline-block;
    position: relative;
    width: auto; }
    #job-progress .harness .section {
      position: relative;
      display: inline-block;
      font-family: "Baskerville10Pro-Italic", serif;
      font-size: 22px;
      padding: 14px 16px;
      margin-right: 20px;
      margin-top: -1px;
      color: white; }
      @media screen and (max-width: 1000px), screen and (max-height: 900px) {
        #job-progress .harness .section {
          font-size: 18px;
          padding: 10px 12px;
          margin-right: 18px; } }
      @media screen and (max-width: 525px) {
        #job-progress .harness .section {
          font-size: 12px;
          padding: 6px 7px;
          margin-right: 0px; } }
    #job-progress .harness .section.active {
      border: solid #444 3px; }

/* SCREENS */
.screen {
  position: relative;
  display: block;
  opacity: 0;
  margin-top: 40px; }
  @media screen and (max-width: 400px) {
    .screen {
      margin-top: 10px; } }

/* PRE */
#pre, .pre-screen {
  margin-bottom: 30px;
  margin-top: 0px; }
  #pre .title, .pre-screen .title {
    position: relative;
    display: block;
    width: 20%;
    max-width: 60%;
    min-width: 220px;
    padding: 14px 26px;
    margin: 0 auto;
    font-family: "Baskerville10Pro-Italic";
    font-size: 34px; }
    @media screen and (max-width: 640px) {
      #pre .title, .pre-screen .title {
        font-size: 22px;
        padding: 10px 12px;
        min-width: 150px; } }
  #pre .sub, .pre-screen .sub {
    font-family: "Baskerville10Pro";
    font-size: 17px;
    margin: 30px 0 0 -20px;
    text-align: center; }
    @media screen and (max-width: 640px) {
      #pre .sub, .pre-screen .sub {
        font-size: 16px; } }
  #pre .copy, .pre-screen .copy {
    max-width: 550px;
    margin: auto;
    font-size: 15px; }
    #pre .copy.heading, .pre-screen .copy.heading {
      font-family: "Baskerville10Pro";
      font-size: 20px;
      line-height: 130%;
      margin-top: 30px;
      text-align: left; }
    @media screen and (max-width: 640px) {
      #pre .copy, .pre-screen .copy {
        padding: 0px 20px;
        margin-top: 16px;
        font-size: 14px;
        line-height: 18px;
        width: 90%; }
        #pre .copy.heading, .pre-screen .copy.heading {
          font-size: 16px;
          margin-top: 10px; } }

.list {
  max-width: 530px;
  margin: 0 auto;
  font-size: 16px;
  text-align: left;
  line-height: 130%; }
  @media screen and (max-width: 640px) {
    .list {
      width: 90%;
      font-size: 15px; } }

/* INTRO */
#choose-trade {
  margin-top: 0px; }
  #choose-trade .choose-title {
    position: relative;
    display: block;
    width: 20%;
    max-width: 60%;
    min-width: 220px;
    padding: 14px 26px;
    margin: auto;
    margin-top: 0px;
    margin-bottom: 40px;
    font-family: "Baskerville10Pro-Italic", serif;
    font-size: 34px; }
    @media screen and (max-height: 730px) {
      #choose-trade .choose-title {
        margin-bottom: 20px; } }
    @media screen and (max-width: 640px) {
      #choose-trade .choose-title {
        font-size: 23px;
        padding: 10px 12px;
        min-width: 150px;
        margin-top: 30px;
        margin-bottom: 40px; } }

.lady {
  font-family: "Baskerville10Pro-Italic", serif;
  font-size: 20px;
  margin-top: 25px;
  margin-bottom: 35px; }
  @media screen and (max-width: 640px) {
    .lady {
      font-size: 14px;
      margin-bottom: 25px; } }

/* CHOOSE TRADE */
#choose-trade a.trade-harness {
  text-decoration: none;
  color: inherit;
  display: inline-block;
  position: relative;
  min-width: 320px;
  margin-bottom: 45px; }
  @media screen and (max-width: 400px) {
    #choose-trade a.trade-harness {
      margin-bottom: 15px; } }
  #choose-trade a.trade-harness .title {
    position: relative;
    display: inline-block;
    padding: 10px 30px;
    font-family: "Baskerville10Pro";
    font-size: 24px; }
    @media screen and (max-width: 400px) {
      #choose-trade a.trade-harness .title {
        font-size: 20px;
        width: 55%; } }
  #choose-trade a.trade-harness .image {
    display: block;
    width: 100%;
    height: 280px;
    margin-top: 25px;
    background: url("") top center no-repeat;
    background-size: contain; }
    @media screen and (max-height: 730px) {
      #choose-trade a.trade-harness .image {
        margin-top: 10px;
        height: 250px; } }
    @media screen and (max-width: 400px) {
      #choose-trade a.trade-harness .image {
        height: 150px;
        margin-top: 8px; } }
  #choose-trade a.trade-harness .name {
    display: block;
    font-family: "Baskerville10Pro-Italic", serif;
    font-size: 32px;
    margin-top: 20px;
    text-align: center; }
    @media screen and (max-width: 400px) {
      #choose-trade a.trade-harness .name {
        font-size: 24px;
        margin-top: 6px; } }
  #choose-trade a.trade-harness .likes {
    display: block;
    width: 100%;
    font-size: 18px;
    text-align: center; }
    @media screen and (max-width: 400px) {
      #choose-trade a.trade-harness .likes {
        font-size: 16px; } }
  #choose-trade a.trade-harness .description {
    display: block;
    width: 300px;
    font-size: 16px;
    line-height: 130%;
    text-align: left;
    margin: 15px auto 0px auto; }
    @media screen and (max-height: 730px) {
      #choose-trade a.trade-harness .description {
        margin-top: 15px; } }
    @media screen and (max-width: 400px) {
      #choose-trade a.trade-harness .description {
        font-size: 14px;
        margin: 10px auto 10px auto;
        width: 80%; } }
#choose-trade .trade-harness.tanner .image {
  background-image: url("../img/choose-tanner-bg.png"); }
#choose-trade .trade-harness.embroiderer .image {
  background-image: url("../img/choose-embroiderer-bg.png"); }
#choose-trade .trade-harness.gilder .image {
  background-image: url("../img/choose-gilder-bg.png"); }

/* QUESTIONS */
.question-content {
  position: relative;
  display: block;
  text-align: left;
  width: auto;
  margin-left: 345px; }
  @media screen and (max-width: 1000px) {
    .question-content {
      margin-left: 0px; } }
  .question-content .main-image {
    display: block;
    margin: 0px;
    background: url("") top left no-repeat;
    background-size: contain;
    min-height: 300px;
    width: 100%; }
    @media screen and (max-width: 525px) {
      .question-content .main-image {
        min-height: 280px; } }
  .question-content .activity-placeholder, .question-content .activity {
    position: relative;
    display: block;
    width: 90%;
    max-width: 700px;
    margin-top: 10px;
    overflow: hidden; }
    @media screen and (max-width: 1000px) {
      .question-content .activity-placeholder, .question-content .activity {
        width: 100%; } }
    .question-content .activity-placeholder .preloader-harness, .question-content .activity .preloader-harness {
      z-index: 1000;
      display: none;
      position: absolute;
      top: 0px;
      width: 100%;
      background-color: rgba(111, 144, 167, 0.2); }
      .question-content .activity-placeholder .preloader-harness .preloader-inner, .question-content .activity .preloader-harness .preloader-inner {
        display: table-cell;
        position: relative;
        width: 100%;
        vertical-align: middle; }
        .question-content .activity-placeholder .preloader-harness .preloader-inner .preloader, .question-content .activity .preloader-harness .preloader-inner .preloader {
          position: relative;
          display: block;
          width: 100%;
          text-align: center; }
          @media screen and (max-width: 525px) {
            .question-content .activity-placeholder .preloader-harness .preloader-inner .preloader, .question-content .activity .preloader-harness .preloader-inner .preloader {
              bottom: 10px; } }
          .question-content .activity-placeholder .preloader-harness .preloader-inner .preloader .msg, .question-content .activity .preloader-harness .preloader-inner .preloader .msg {
            position: relative;
            display: block;
            color: black;
            font-size: 20px;
            margin: auto; }
            @media screen and (max-width: 525px) {
              .question-content .activity-placeholder .preloader-harness .preloader-inner .preloader .msg, .question-content .activity .preloader-harness .preloader-inner .preloader .msg {
                font-size: 16px; } }
          .question-content .activity-placeholder .preloader-harness .preloader-inner .preloader .perc, .question-content .activity .preloader-harness .preloader-inner .preloader .perc {
            position: relative;
            display: block;
            width: 50%;
            height: 20px;
            padding: 5px;
            margin: 5px auto auto;
            background-color: #b7b7b7;
            text-align: left; }
            @media screen and (max-width: 525px) {
              .question-content .activity-placeholder .preloader-harness .preloader-inner .preloader .perc, .question-content .activity .preloader-harness .preloader-inner .preloader .perc {
                height: 13px;
                margin-top: 0px; } }
            .question-content .activity-placeholder .preloader-harness .preloader-inner .preloader .perc .bar, .question-content .activity .preloader-harness .preloader-inner .preloader .perc .bar {
              position: relative;
              display: block;
              width: 0%;
              height: 20px;
              margin: 0px;
              padding: 0px;
              background-color: #6f90a7; }
              @media screen and (max-width: 525px) {
                .question-content .activity-placeholder .preloader-harness .preloader-inner .preloader .perc .bar, .question-content .activity .preloader-harness .preloader-inner .preloader .perc .bar {
                  height: 13px; } }
    .question-content .activity-placeholder .game, .question-content .activity .game {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%; }
    .question-content .activity-placeholder .game-screens, .question-content .activity .game-screens {
      position: relative;
      display: table;
      width: 100%; }
      .question-content .activity-placeholder .game-screens .game-screens-harness, .question-content .activity .game-screens .game-screens-harness {
        position: relative;
        display: table-cell;
        width: 100%;
        vertical-align: middle; }
        .question-content .activity-placeholder .game-screens .game-screens-harness .game-screen, .question-content .activity .game-screens .game-screens-harness .game-screen {
          display: block;
          position: relative;
          text-align: center; }
          .question-content .activity-placeholder .game-screens .game-screens-harness .game-screen.intro, .question-content .activity .game-screens .game-screens-harness .game-screen.intro {
            width: 100%;
            height: 100%;
            background: url("../games/tanner/screens/bg-intro.png") center center no-repeat;
            background-size: contain; }
            .question-content .activity-placeholder .game-screens .game-screens-harness .game-screen.intro .title, .question-content .activity .game-screens .game-screens-harness .game-screen.intro .title {
              display: block;
              position: absolute;
              top: 28%;
              left: 39%;
              width: 61%;
              color: #47314e;
              font-family: "Baskerville10Pro-Italic", serif;
              font-size: 46px;
              line-height: 55px;
              text-align: left; }
              @media screen and (max-width: 640px), screen and (max-height: 900px) {
                .question-content .activity-placeholder .game-screens .game-screens-harness .game-screen.intro .title, .question-content .activity .game-screens .game-screens-harness .game-screen.intro .title {
                  font-size: 38px; } }
              @media screen and (max-width: 525px), screen and (max-height: 730px) {
                .question-content .activity-placeholder .game-screens .game-screens-harness .game-screen.intro .title, .question-content .activity .game-screens .game-screens-harness .game-screen.intro .title {
                  font-size: 21px; } }
            .question-content .activity-placeholder .game-screens .game-screens-harness .game-screen.intro .copy, .question-content .activity .game-screens .game-screens-harness .game-screen.intro .copy {
              display: block;
              position: absolute;
              top: 66%;
              left: 5%;
              width: 90%;
              font-size: 20px;
              color: white;
              text-align: left; }
              @media screen and (max-width: 640px), screen and (max-height: 900px) {
                .question-content .activity-placeholder .game-screens .game-screens-harness .game-screen.intro .copy, .question-content .activity .game-screens .game-screens-harness .game-screen.intro .copy {
                  font-size: 18px;
                  line-height: 26px; } }
              @media screen and (max-width: 525px), screen and (max-height: 730px) {
                .question-content .activity-placeholder .game-screens .game-screens-harness .game-screen.intro .copy, .question-content .activity .game-screens .game-screens-harness .game-screen.intro .copy {
                  font-size: 13px;
                  line-height: 20px;
                  top: 61%; } }
            .question-content .activity-placeholder .game-screens .game-screens-harness .game-screen.intro .start-button, .question-content .activity .game-screens .game-screens-harness .game-screen.intro .start-button {
              position: absolute;
              bottom: 3%;
              left: 5%; }
          .question-content .activity-placeholder .game-screens .game-screens-harness .game-screen.box, .question-content .activity .game-screens .game-screens-harness .game-screen.box {
            display: block;
            position: relative;
            margin: auto;
            width: 75%;
            background-color: #ebeae6;
            padding: 4% 5%;
            text-align: left; }
            .question-content .activity-placeholder .game-screens .game-screens-harness .game-screen.box .title, .question-content .activity .game-screens .game-screens-harness .game-screen.box .title {
              width: 100%;
              color: #333333;
              font-family: "Baskerville10Pro";
              letter-spacing: -.5px;
              font-size: 21px;
              text-align: left;
              margin-top: 20px; }
              @media screen and (max-width: 525px), screen and (max-height: 730px) {
                .question-content .activity-placeholder .game-screens .game-screens-harness .game-screen.box .title, .question-content .activity .game-screens .game-screens-harness .game-screen.box .title {
                  font-size: 17px; } }
              .question-content .activity-placeholder .game-screens .game-screens-harness .game-screen.box .title.line, .question-content .activity .game-screens .game-screens-harness .game-screen.box .title.line {
                border-top: 1px solid #333333;
                padding-top: 10px;
                margin-top: 0px; }
            .question-content .activity-placeholder .game-screens .game-screens-harness .game-screen.box .copy, .question-content .activity .game-screens .game-screens-harness .game-screen.box .copy {
              font-size: 16px;
              color: #333333;
              text-align: left;
              margin-top: 8px; }
              @media screen and (max-width: 525px), screen and (max-height: 730px) {
                .question-content .activity-placeholder .game-screens .game-screens-harness .game-screen.box .copy, .question-content .activity .game-screens .game-screens-harness .game-screen.box .copy {
                  font-size: 13px;
                  line-height: 20px; } }
            .question-content .activity-placeholder .game-screens .game-screens-harness .game-screen.box .start-button, .question-content .activity .game-screens .game-screens-harness .game-screen.box .start-button {
              position: relative;
              margin-top: 20px;
              display: inline-block;
              margin-right: 10px; }
              .question-content .activity-placeholder .game-screens .game-screens-harness .game-screen.box .start-button.right, .question-content .activity .game-screens .game-screens-harness .game-screen.box .start-button.right {
                float: right; }
  .question-content .question {
    display: block;
    position: relative;
    font-family: "va_thesansplainregular", sans-serif;
    font-size: 20px;
    width: 70%;
    margin: 20px 0px 0px;
    padding: 15px 20px; }
    @media screen and (max-width: 400px) {
      .question-content .question {
        font-size: 15px;
        width: 80%;
        line-height: 19px;
        margin-top: 8px; } }
    .question-content .question .result-title {
      display: block;
      font-family: "Baskerville10Pro-Italic", serif;
      font-size: 30px; }
      @media screen and (max-width: 400px) {
        .question-content .question .result-title {
          font-size: 23px; } }
    .question-content .question .result-copy {
      display: block;
      font-size: 20px;
      line-height: 22px; }
      .question-content .question .result-copy .title {
        display: block;
        margin-top: 15px;
        font-style: italic;
        font-size: 110%; }
      .question-content .question .result-copy .message {
        display: block;
        margin-top: 16px;
        line-height: 150%; }
      @media screen and (max-width: 400px) {
        .question-content .question .result-copy {
          font-size: 13px;
          line-height: 15px; } }
  .question-content .answer {
    position: relative;
    display: inline-block;
    margin: 20px 10px 0px; }
    @media screen and (max-width: 400px) {
      .question-content .answer {
        margin: 10px 6px 0px; } }
    .question-content .answer a {
      min-width: 120px;
      font-size: 22px;
      text-align: center; }
      @media screen and (max-width: 400px) {
        .question-content .answer a {
          min-width: 0px;
          font-size: 16px; } }
  .question-content .next-button, .question-content .continue-button, .question-content .try-again-button {
    position: relative;
    display: inline-block;
    margin: 10px 0px 10px 10px; }

.activity .perc-harness {
  position: absolute;
  display: none;
  bottom: 20px;
  width: 100%;
  text-align: center; }
  @media screen and (max-width: 525px) {
    .activity .perc-harness {
      bottom: 10px; } }
  .activity .perc-harness .msg {
    position: relative;
    display: block;
    color: white;
    font-size: 20px;
    margin: auto; }
    @media screen and (max-width: 525px) {
      .activity .perc-harness .msg {
        font-size: 16px; } }
  .activity .perc-harness .perc {
    position: relative;
    display: block;
    width: 50%;
    height: 20px;
    padding: 5px;
    margin: 5px auto auto;
    background-color: #b7b7b7;
    text-align: left; }
    @media screen and (max-width: 525px) {
      .activity .perc-harness .perc {
        height: 13px;
        margin-top: 0px; } }
    .activity .perc-harness .perc .bar {
      position: relative;
      display: block;
      width: 0%;
      height: 20px;
      margin: 0px;
      padding: 0px;
      background-color: #6f90a7; }
      @media screen and (max-width: 525px) {
        .activity .perc-harness .perc .bar {
          height: 13px; } }

#gallery-size {
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  border: 1px solid red;
  width: 1280px;
  height: 1024px;
  z-index: 10000;
  pointer-events: none; }
  @media screen and (max-width: 1279px) {
    #gallery-size {
      display: none; } }
  #gallery-size .label {
    display: block;
    position: absolute;
    bottom: 0px;
    right: 0px;
    background: red;
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
    color: white;
    padding: 4px 5px; }

.end-content {
  display: block;
  position: relative;
  text-align: center;
  margin-top: 0px; }
  .end-content .end-congrats {
    font-family: "Baskerville10Pro-Italic", serif;
    font-size: 45px; }
    @media screen and (max-width: 400px) {
      .end-content .end-congrats {
        font-size: 34px;
        margin: 10px auto 15px auto; } }
  .end-content .end-caption {
    font-family: "va_thesansplainregular", sans-serif;
    font-size: 20px;
    line-height: 20px; }
    @media screen and (max-width: 400px) {
      .end-content .end-caption {
        font-size: 13px;
        line-height: 14px;
        margin: 15px auto 15px auto; } }
  .end-content .end-guild-box {
    display: block;
    position: relative;
    max-width: 50%;
    font-family: "Baskerville10Pro-Italic", serif;
    margin: auto;
    margin-top: 30px;
    padding: 20px; }
    @media screen and (max-width: 400px) {
      .end-content .end-guild-box {
        max-width: 90%;
        margin-top: 10px;
        padding: 10px; } }
    .end-content .end-guild-box .end-guild-intro {
      font-size: 20px; }
      @media screen and (max-width: 400px) {
        .end-content .end-guild-box .end-guild-intro {
          font-size: 16px; } }
    .end-content .end-guild-box .end-guild-title {
      position: relative;
      font-size: 40px;
      margin-top: 8px;
      color: white; }
      @media screen and (max-width: 400px) {
        .end-content .end-guild-box .end-guild-title {
          font-size: 22px;
          margin-top: 5px; } }
  .end-content .end-image {
    display: block;
    position: relative;
    width: 100%;
    height: 400px;
    margin: 30px auto;
    background: url("") center center no-repeat;
    background-size: contain; }
    @media screen and (max-width: 400px) {
      .end-content .end-image {
        height: 180px;
        margin: 7px auto; } }
  .end-content .end-image.tanner {
    background-image: url("../img/end-tanner.png"); }
  .end-content .end-image.gilder {
    background-image: url("../img/end-gilder.png"); }
  .end-content .end-image.embroiderer {
    background-image: url("../img/end-embroiderer.png"); }

#gilder-question-2 .game-screens-harness .game-screen.full.intro {
  background: url("../games/gilder/gilding_start.png") center center no-repeat;
  background-size: contain; }

#embroiderer-question-2 .game-screens-harness .game-screen.full.intro {
  background: url("../games/stitch/sewing-intro.png") center center no-repeat;
  background-size: contain; }