/*
	Typography mixin
 */
/* CSS Document */
#word-mat-container {
  font-family: twinkl, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

:focus {
  outline: none; }

.border-radius {
  border-radius: 8px; }

.text-button.play {
  width: 40%;
  line-height: 1.15;
  padding: 2.5% 1.5% 2.5% 1.5%;
  font-size: 2vw;
  border: none; }

.play-sound {
  width: 20%;
  height: 20%;
  border-radius: 50% !important;
  margin: 2% !important;
  position: absolute;
  top: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  background-color: white; }

.play-sound:hover {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
  cursor: pointer; }

.rt-play-circle {
  width: 100%;
  height: 100%; }

#lets-go-button {
  width: 20%;
  font-size: 3vw;
  height: 12%;
  padding: 0.6%; }

.fit-me-button {
  height: 100%;
  width: 80%;
  margin: auto;
  white-space: nowrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.title-text {
  width: 70%;
  left: 15%;
  height: 40%;
  margin-top: 5%;
  top: 0 !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

#subContainer {
  position: absolute;
  height: auto;
  top: 55%;
  width: 100%;
  color: white;
  padding: 1%;
  font-size: 3vw;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.jodal .jodal-title {
  font-size: 5vw;
  margin: 0 auto; }

.jodal .jodal-text {
  font-size: 2.6vw; }

.jodal .answer-text {
  text-align: center;
  z-index: 100;
  width: 90%;
  height: 15%;
  margin: 0 auto;
  margin-bottom: 5%; }

.jodal .jodal-sub-text {
  font-size: 2.6vw; }

#mainPage {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.panel {
  border-radius: 8px;
  position: absolute;
  top: 3%;
  left: 1.75%;
  width: 90%;
  height: 94%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.game-bottom-area {
  height: 30%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
  padding: 1%;
  text-align: center; }

.game-top-area {
  height: 65%;
  width: 100%;
  display: inline-grid;
  padding: 1%; }

.dropAreaCard {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background-color: white;
  border: black 2px solid;
  border-radius: 12px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  margin: 2%; }
  .dropAreaCard .top {
    height: 70%;
    width: 100%;
    padding: 5%; }
  .dropAreaCard .bottom {
    height: 30%;
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background-color: gainsboro;
    border-radius: 0 0 12px 12px;
    border-collapse: inherit; }
    .dropAreaCard .bottom .contentDropSquare {
      width: 100%; }

.dropAreaCard .bottom .contentDropSquare:nth-child(1) {
  border-radius: 0 0 0 12px !important; }
  .dropAreaCard .bottom .contentDropSquare:nth-child(1) .contentDropSquare {
    border-radius: 0 0 0 12px !important; }

.dropAreaCard .bottom .contentDropSquare:last-child {
  border-radius: 0 0 12px 0 !important; }
  .dropAreaCard .bottom .contentDropSquare:last-child .contentDropSquare {
    border-radius: 0 0 12px 0 !important; }

.drop-layout-1 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; }
  .drop-layout-1 .game-top-area {
    height: 100%;
    width: 70%;
    grid-template-columns: auto;
    grid-template-rows: auto; }
  .drop-layout-1 .game-bottom-area {
    height: 100%;
    width: 37%; }
  .drop-layout-1.decoy .game-top-area {
    height: 100%;
    width: 55%;
    grid-template-columns: auto;
    grid-template-rows: auto; }
  .drop-layout-1.decoy .game-bottom-area {
    height: 100%;
    width: 45%; }

.drop-layout-2 {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  .drop-layout-2 .game-top-area {
    grid-template-columns: 50% 50%;
    grid-template-rows: auto; }
  .drop-layout-2.decoy .game-top-area {
    height: 60%; }
  .drop-layout-2.decoy .game-bottom-area {
    height: 40%; }

.drop-layout-3 {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  .drop-layout-3 .game-top-area {
    grid-template-columns: 33.3% 33.3% 33.3%;
    grid-template-rows: auto; }
  .drop-layout-3.decoy .game-top-area {
    height: 60%; }
  .drop-layout-3.decoy .game-bottom-area {
    height: 40%; }

.drop-layout-4 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; }
  .drop-layout-4 .game-top-area {
    height: 100%;
    width: 70%;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%; }
  .drop-layout-4 .game-bottom-area {
    height: 100%;
    width: 30%; }
  .drop-layout-4.decoy .game-top-area {
    width: 60%; }
  .drop-layout-4.decoy .game-bottom-area {
    width: 40%; }

.contentDropSquare {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  height: 100%;
  width: 25%;
  border: grey 1px dashed;
  background-color: white;
  margin: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -ms-flex-line-pack: center;
      align-content: center;
  text-align: center;
  font-size: 20px;
  border-collapse: collapse;
  vertical-align: middle;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  justify-self: center;
  justify-items: center; }
  .contentDropSquare .contentDropSquare {
    border-collapse: collapse;
    border: none;
    height: 100% !important;
    width: 100% !important;
    cursor: auto !important; }
  .contentDropSquare :hover {
    cursor: pointer; }

.content-square-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 70%;
  width: 70%;
  margin: 15%; }

.center-me-papi {
  height: auto;
  width: 100%; }

.image-display {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.text-display {
  height: 90%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.has-both .image-display {
  height: 60% !important; }

.has-both .text-display {
  height: 30%;
  margin: 2.5% 0; }

.full-page-jodal-overlay {
  position: absolute;
  z-index: 101;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%; }

#play-again {
  margin: auto; }

.round-result-screen {
  -webkit-transition: background-color 2s;
  -o-transition: background-color 2s;
  transition: background-color 2s; }

.card-wrapper {
  width: 24%;
  height: 100%; }

.stars-container {
  z-index: 100;
  height: 25%;
  width: 40%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.completed-words-container {
  width: 80%;
  height: 40%;
  z-index: 1;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 500;
  font-size: 3vw; }

.star-outer {
  color: #fcaf17;
  width: 30%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

#next-question-button {
  margin: auto; }

.pulsate {
  -webkit-animation-name: pulsate;
          animation-name: pulsate;
  -webkit-animation-duration: 0.5s !important;
          animation-duration: 0.5s !important; }

@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

@keyframes pulsate {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

.foreground-container {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 103;
  position: absolute;
  pointer-events: none; }

.game-bottom-area .eyfs-branding .contentDropSquare {
  margin: 1% !important; }