/*
	Typography mixin
 */
/* CSS Document */
#gg_container {
  background-color: #afdff9;
  font-family: Twinkl, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

:focus {
  outline: none; }

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

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

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

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

.title-text {
  font-size: 14vw;
  width: 70%;
  left: 15%;
  height: 40%;
  margin-top: 5%;
  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; }

#subContainer {
  position: absolute;
  height: auto;
  top: 55%;
  width: 100%;
  color: white;
  padding: 1%;
  font-size: 3vw;
  font-weight: 600; }

.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; }

.panel {
  border-radius: 8px;
  top: 3%;
  padding: 2.5%;
  left: 21.75%;
  width: auto;
  height: 94%;
  background-color: white;
  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;
  margin: auto 0; }

.title-logo {
  z-index: 200; }

#mainPage {
  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: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  width: 93.5%;
  height: 100%;
  top: 0;
  left: 0; }

#table {
  background-color: darkgrey; }

.image-to-make {
  padding: 1%;
  width: 30%;
  height: 95%;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  margin: auto 0;
  text-align: center;
  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: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  font-size: 2vw; }
  .image-to-make .title-image {
    width: 90%;
    height: 10%;
    font-weight: bold;
    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;
    margin: 5%; }
  .image-to-make .final-image {
    padding-bottom: 100%;
    width: 100%;
    margin: auto 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
  .image-to-make .text-desc {
    font-size: 1.1vw;
    margin: 5% 2%;
    text-align: left; }

.scrollable-content {
  height: 80%;
  width: 100%;
  overflow-y: auto;
  border-radius: 12px;
  border: 2px solid gainsboro;
  padding: 1%;
  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: start;
      -ms-flex-pack: start;
          justify-content: flex-start; }

.corner-num {
  position: absolute;
  font-size: 1.2vw;
  font-weight: bold;
  top: 2%;
  left: 2%;
  color: white;
  text-shadow: black 1px 0px 0px, black 0.5403px 0.84147px 0px, black -0.41615px 0.9093px 0px, black -0.98999px 0.14112px 0px, black -0.65364px -0.7568px 0px, black 0.28366px -0.95892px 0px, black 0.96017px -0.27942px 0px; }

.picture-centre {
  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-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  width: 100%; }

.picture-picker-menu-cont {
  width: 90%;
  height: 70%;
  z-index: 1000;
  margin: 0 auto;
  /* display: -webkit-inline-box; */
  display: -ms-inline-flexbox;
  display: -webkit-inline-box;
  display: inline-flex;
  -ms-flex-wrap: wrap;
  overflow-y: scroll;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  flex-wrap: wrap; }

.button-cont {
  width: 100%;
  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: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly; }

.menu-button {
  max-width: 30%;
  height: auto;
  background-color: darkgrey;
  margin: 1.5%;
  border-radius: 12px;
  display: block;
  position: relative; }
  .menu-button:hover {
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);
    cursor: pointer; }

.tilePiece {
  display: table-cell;
  width: 120px;
  height: 120px;
  border: 1px solid white;
  cursor: pointer;
  position: relative;
  -webkit-transition: border 1s ease-in-out;
  -o-transition: border 1s ease-in-out;
  transition: border 1s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.back-button {
  width: 80%;
  margin: 0 auto;
  padding: 3%;
  height: 12%;
  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: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly; }
  .back-button .inner-text {
    width: 60%;
    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; }

.menu-button-spare {
  position: absolute;
  top: 3%;
  left: 3%;
  width: 14%;
  height: 10%;
  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: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly; }
  .menu-button-spare .inner-text {
    width: 60%;
    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; }

.left-arrow {
  width: 20%;
  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; }

.pop-up-answer {
  position: absolute;
  width: 93.5%;
  height: 100%;
  z-index: 110;
  top: 0;
  background-color: rgba(0, 0, 0, 0.95); }

.grid3 .tile1 {
  background-position: left top; }

.grid3 .tile2 {
  background-position: center top; }

.grid3 .tile3 {
  background-position: right top; }

.grid3 .tile4 {
  background-position: left center; }

.grid3 .tile5 {
  background-position: center center; }

.grid3 .tile6 {
  background-position: right center; }

.grid3 .tile7 {
  background-position: left bottom; }

.grid3 .tile8 {
  background-position: center bottom; }

.grid3 .tile9 {
  background: white !important;
  cursor: default !important; }

.grid4 .tile1 {
  background-position: left top; }

.grid4 .tile2 {
  background-position: calc(100%/3) top; }

.grid4 .tile3 {
  background-position: calc((100%/3)*2) top; }

.grid4 .tile4 {
  background-position: calc((100%/3)*3) top; }

.grid4 .tile5 {
  background-position: left calc(100%/3); }

.grid4 .tile6 {
  background-position: calc(100%/3) calc(100%/3); }

.grid4 .tile7 {
  background-position: calc((100%/3)*2) calc(100%/3); }

.grid4 .tile8 {
  background-position: calc((100%/3)*3) calc(100%/3); }

.grid4 .tile9 {
  background-position: left calc((100%/3)*2); }

.grid4 .tile10 {
  background-position: calc((100%/3)) calc((100%/3)*2); }

.grid4 .tile11 {
  background-position: calc((100%/3)*2) calc((100%/3)*2); }

.grid4 .tile12 {
  background-position: calc((100%/3)*3) calc((100%/3)*2); }

.grid4 .tile13 {
  background-position: left calc((100%/3)*3); }

.grid4 .tile14 {
  background-position: calc((100%/3)) calc((100%/3)*3); }

.grid4 .tile15 {
  background-position: calc((100%/3)*2) calc((100%/3)*3); }

.grid4 .tile16 {
  background: white !important;
  cursor: default !important; }

.grid5 .tile1 {
  background-position: left top; }

.grid5 .tile2 {
  background-position: calc(100%/4) top; }

.grid5 .tile3 {
  background-position: calc((100%/4)*2) top; }

.grid5 .tile4 {
  background-position: calc((100%/4)*3) top; }

.grid5 .tile5 {
  background-position: calc((100%/4)*4) top; }

.grid5 .tile6 {
  background-position: left calc(100%/4); }

.grid5 .tile7 {
  background-position: calc((100%/4)) calc(100%/4); }

.grid5 .tile8 {
  background-position: calc((100%/4)*2) calc(100%/4); }

.grid5 .tile9 {
  background-position: calc((100%/4)*3) calc((100%/4)); }

.grid5 .tile10 {
  background-position: calc((100%/4)*4) calc((100%/4)); }

.grid5 .tile11 {
  background-position: left calc((100%/4)*2); }

.grid5 .tile12 {
  background-position: calc((100%/4)) calc((100%/4)*2); }

.grid5 .tile13 {
  background-position: calc((100%/4)*2) calc((100%/4)*2); }

.grid5 .tile14 {
  background-position: calc((100%/4)*3) calc((100%/4)*2); }

.grid5 .tile15 {
  background-position: calc((100%/4)*4) calc((100%/4)*2); }

.grid5 .tile16 {
  background-position: left calc((100%/4)*3); }

.grid5 .tile17 {
  background-position: calc((100%/4)) calc((100%/4)*3); }

.grid5 .tile18 {
  background-position: calc((100%/4)*2) calc((100%/4)*3); }

.grid5 .tile19 {
  background-position: calc((100%/4)*3) calc((100%/4)*3); }

.grid5 .tile20 {
  background-position: calc((100%/4)*4) calc((100%/4)*3); }

.grid5 .tile21 {
  background-position: left calc((100%/4)*4); }

.grid5 .tile22 {
  background-position: calc((100%/4)) calc((100%/4)*4); }

.grid5 .tile23 {
  background-position: calc((100%/4)*2) calc((100%/4)*4); }

.grid5 .tile24 {
  background-position: calc((100%/4)*3) calc((100%/4)*4); }

.grid5 .tile25 {
  background: white !important;
  cursor: default !important; }

.pulse-anim {
  -webkit-animation-name: pulse;
          animation-name: pulse;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-duration: 4s;
          animation-duration: 4s; }

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  10% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05); }
  20% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  30% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05); }
  40% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05); }
  60% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  70% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05); }
  80% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  90% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  10% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05); }
  20% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  30% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05); }
  40% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05); }
  60% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  70% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05); }
  80% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  90% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

.border-gone {
  border: none; }

.tile9Complete {
  background-position: right bottom !important; }

.tile16Complete {
  background-position: calc((100%/3)*3) calc((100%/3)*3) !important; }

.tile25Complete {
  background-position: calc((100%/4)*4) calc((100%/4)*4) !important; }

#menuPanel {
  height: 88%;
  left: 10%;
  width: 80%; }