@font-face                                                                     { font-family:'billybold'; src:url('fonts/billybold-webfont.woff2') format('woff2'), url('fonts/billybold-webfont.woff') format('woff'); font-weight:normal; font-style:normal; }
*                                                                              { box-sizing:border-box; }
html, body                                                                     { width:100%; height:100%; }
body                                                                           { margin:0; padding:0; font-size:10px; font-family:'billybold', sans-serif; background-color:#1c1c1c; color:#FFF; }

.tt-container                                                                  { position:relative; display:inline-block; width:100%; height:100%; -webkit-perspective:1000px; -moz-perspective:1000px; -o-perspective:1000px; -ms-perspective:1000px; perspective:1000px; }
  .tt-card                                                                     { width:100%; min-height:100vh; margin:0; padding:0; list-style:none; -webkit-transform-style:preserve-3d; -webkit-transition:all 0.5s linear; -moz-transform-style:preserve-3d; -moz-transition:all 0.5s linear; -o-transform-style:preserve-3d; -o-transition:all 0.5s linear; transform-style:preserve-3d; transition:all 0.5s linear; -ms-transform-style:preserve-3d; -ms-transition:all 0.5s linear; }
    .tt-face                                                                   { position:absolute; left:0; width:100%; min-height:100vh; margin:0; padding:0 20px 20px; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -o-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; background-color:#222; }
    .tt-face:nth-child(2n)                                                     { display:block; -webkit-transform:rotateY(180deg); -webkit-box-sizing:border-box; -moz-transform:rotateY(180deg); -moz-box-sizing:border-box; -o-transform:rotateY(180deg); -o-box-sizing:border-box; -ms-transform:rotateY(180deg); -ms-box-sizing:border-box; transform:rotateY(180deg); box-sizing:border-box; }
      .tt-face a                                                               { color:#FFF; }

    .tt-face.home                                                              { margin:0; padding:0; background:url(../img/homepage.jpg) center no-repeat #000; background-size:cover; }
    .tt-face.home a                                                            { position:absolute; display:block; left:0; top:0; width:100vw; height:100vh; }

    .tt-face.results                                                           { background:url(../img/results.jpg) center top no-repeat #1C1C1C; background-size:contain; }
      .tt-face.results a                                                       { position:absolute; display:block; left:0; top:0; width:90vw; height:94vh; }
      .tt-face.results .score                                                  { position:absolute; left:0; top:82px; width:100%; color:#FFF; font-size:1.8rem; text-transform:uppercase; text-align:center; }
      .tt-face.results .replay                                                 { position:absolute; left:0; top:92px; width:100%; height:3em; line-height:3em; color:#BA141A; font-size:1.5rem; text-transform:uppercase; text-align:center; font-weight:bold; text-decoration:none; }
      .tt-face.results .getitnow                                               { left:25%; top:inherit; bottom:4.7rem; width:50%; height:auto; }
        .tt-face.results .getitnow img                                         { max-width:100%; }
      .tt-face.results .share                                                  { left:25%; top:inherit; bottom:2.5rem; width:50%; height:auto; }
        .tt-face.results .share img                                            { max-width:100%; }


    .tt-face.results                                                           { background:url(../img/results.jpg) center top no-repeat #1C1C1C; background-size:contain; }

.question-number                                                               { float:left; font-size:4rem; }
.logo                                                                          { float:right; margin-top:11px; max-width:41%; }
.question-image                                                                { max-width:100%; border-radius:10px; border:3px solid #FFF; }
.question                                                                      { margin:0.6rem 0; font-size:1.3rem; line-height:1.1; text-transform:uppercase; }

.answers                                                                       { margin:0 0 50px 0; padding:0; list-style:none; font-family:verdana, sans-serif; }
  .answers li                                                                  { margin-bottom:10px; }
  .answers li:last-child                                                       { margin-bottom:0; }
    .answers li a                                                              { display:block; font-size:1rem; border:3px solid #FFF; border-radius:10px; color:#FFF; text-decoration:none; background-color:#000; }
      .answers li a span                                                       { display:inline-block; margin-right:15px; padding:10px; border-right:3px solid #FFF; }
      .answers li a.selected                                                   { background-color:#900; }

.hidden                                                                        { display:none !important; }

.footer                                                                        { position:absolute; bottom:10px; width:94vw; padding-bottom:3px; text-align:center; font-family:verdana,sans-serif; color:#777; }
  .footer img                                                                  { position:absolute; bottom:0; }
  .footer img:first-child                                                      { left:-6px; max-width:17%; }
  .footer img:last-child                                                       { right:10px; max-width:15%; }

  .home .footer                                                                { width:100%; }
  .home .footer img:first-child                                                { left:10px; }

/* iPhone 6 / Galaxy S5 */
@media screen and (min-width: 360px) {
.logo                                                                          { margin-top:12px; max-width:33%; }
      .tt-face.results .score                                                  { top:97px; font-size:2.1rem; }
      .tt-face.results .replay                                                 { top:107px; font-size:1.8rem; }
      .tt-face.results .getitnow                                               { bottom:5.4rem; }
      .tt-face.results .share                                                  { bottom:2.7rem; }
}

/* iPhone 6+ / Nexus 5X */
@media screen and (min-width: 412px) {
.logo                                                                          { margin-top:10px; max-width:31%; }
      .tt-face.results .score                                                  { top:110px; font-size:2.1rem; }
      .tt-face.results .replay                                                 { top:118px; font-size:1.9rem; }
      .tt-face.results .getitnow                                               { bottom:5.9rem; }
      .tt-face.results .share                                                  { bottom:3rem; }
}