/*
	Typography mixin
 */
/* CSS Document */
#picture-quiz-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; }

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

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

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

.fit-me-button {
  height: 100%;
  width: 80%;
  margin: 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;
  text-wrap: nowrap; }

.title-text {
  font-size: 14vw;
  width: 50%;
  left: 25%;
  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; }

#titlePage {
  width: 100%;
  height: 100%; }

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

#mainPage {
  height: 100%;
  width: 93.5%;
  padding: 1%; }

.panel {
  position: relative;
  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;
  height: 100%;
  width: 100%;
  background: white;
  border-radius: 12px;
  padding: 1.5%; }
  .panel .all-content {
    position: relative;
    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: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
  .panel .button-cont {
    height: 10%;
    width: 100%; }
  .panel .top-box {
    min-height: 15%;
    height: 63%; }
    .panel .top-box .question-text-box {
      width: 100%;
      max-height: 100%;
      height: 100%;
      margin-bottom: 1%;
      padding: 1%;
      font-size: 2vw;
      font-weight: 600; }
    .panel .top-box .question-image-box {
      width: 100%;
      max-height: 100%;
      min-height: 10%;
      height: 75%;
      margin-bottom: 1%;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center; }
  .panel .play-again {
    height: 15%;
    padding: 5%; }
    .panel .play-again .play-again-inner {
      height: 100%;
      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; }
  .panel .top-smaller {
    height: 15%; }
    .panel .top-smaller .question-text-box {
      height: 100%; }
  .panel .bottom-bigger {
    height: 70% !important; }
  .panel .bottom-box {
    width: 100%;
    position: relative;
    height: 50%;
    padding: 1%;
    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;
    margin: 1% 0; }
    .panel .bottom-box .answerBox {
      width: 100%;
      height: 100%;
      position: relative;
      border: 3px solid gainsboro;
      border-radius: 12px;
      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: center;
          -ms-flex-pack: center;
              justify-content: center; }
      .panel .bottom-box .answerBox:hover {
        -webkit-transform: scale(1.02);
            -ms-transform: scale(1.02);
                transform: scale(1.02);
        cursor: pointer; }
      .panel .bottom-box .answerBox .answer-box-image {
        height: 70%;
        width: 100%;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat; }
      .panel .bottom-box .answerBox .answer-button-bottom {
        width: 100%;
        height: 30%;
        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; }
        .panel .bottom-box .answerBox .answer-button-bottom span {
          width: 100%; }

.no-image .answer-button-bottom {
  height: 100% !important; }

.bottom-box .no-text .answer-box-image {
  height: 100% !important; }

.text-quiz {
  height: 65%; }
  .text-quiz .no-image .answer-button-bottom {
    text-align: left !important; }

.picture-quiz {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: row !important;
          flex-direction: row !important;
  height: 33% !important; }

.text-quiz {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: column !important;
          flex-direction: column !important; }

.correct-or-no {
  margin-top: 1%;
  width: 100%;
  height: 8%;
  -webkit-transition: height;
  -o-transition: height;
  transition: height;
  color: white;
  padding: 1%;
  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; }
  .correct-or-no .text-inner {
    width: 100%;
    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; }

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

.jodal .jodal-text {
  font-size: 2.6vw;
  height: 40% !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; }

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

#answerPage {
  height: 100%;
  width: 93.5%;
  padding: 1%; }

#tableHead {
  position: relative;
  width: 70%;
  left: 2.5%;
  top: 7.5%;
  font-size: 2vw;
  color: #292728;
  text-align: left; }

#answerTable {
  position: absolute;
  width: 100%;
  font-weight: bold;
  border-collapse: collapse; }

.titles-cont {
  width: 100%;
  height: 8%;
  margin-bottom: 1%;
  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: start;
      -ms-flex-pack: start;
          justify-content: flex-start; }

.end-titles {
  width: 75%;
  height: 100%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-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;
  font-weight: bold;
  font-size: 1.5vw; }
  .end-titles .user-answer-text {
    width: 48%; }
  .end-titles .actual-answer-text {
    width: 48%; }
  .end-titles .score-text {
    width: 10%; }

#answerTable tbody td {
  padding: 1%;
  border-width: 4px;
  border-style: solid; }
  #answerTable tbody td .answerBox {
    width: 100% !important;
    border: 3px solid gainsboro !important;
    padding: 1%;
    background-color: white !important;
    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;
    text-align: center;
    margin: 2% auto; }
    #answerTable tbody td .answerBox .answer-box-image {
      height: 80%;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat; }
  #answerTable tbody td .no-image {
    border: none !important;
    height: auto !important;
    text-align: left;
    width: 100% !important; }

.table-container {
  position: relative;
  width: 70%;
  height: 100%;
  border-style: solid;
  border-color: lightgray;
  border-width: 2px;
  overflow-y: auto;
  overflow-x: hidden; }

.row-3-1 {
  width: 100%;
  height: 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: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  .row-3-1 > .section-3 {
    width: 75%;
    height: 100%; }
  .row-3-1 > .section-1 {
    width: 22.5%;
    left: 75%;
    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: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly; }

.column-1-2-2-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: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 20%;
  height: 100%; }
  .column-1-2-2-1 > .section-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center; }
  .column-1-2-2-1 > .section-1 {
    height: 20%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center; }

.grey-rectangle {
  border: 4px solid lightgray;
  width: 100%;
  height: 70%;
  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;
  text-align: center; }

.numberBold {
  font-size: 6vw;
  font-weight: bold; }

.numberLine {
  height: 2%;
  -ms-flex-item-align: center;
      align-self: center;
  width: 60%; }

.total-score {
  display: inline;
  text-align: center;
  font-weight: bold;
  color: #292728;
  height: 100%;
  width: 21%;
  margin-left: 3%;
  left: 75%;
  -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; }

.cross-wrong {
  color: #dc2c3d; }

.check-right {
  color: #04984b; }

tbody {
  font-size: 1.5rem !important; }

.answer-table-q-image {
  width: 100%;
  height: 20%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; }

.check-button {
  position: relative;
  width: 95%;
  height: 100% !important;
  left: 2.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; }

.next-button {
  position: relative;
  width: 95%;
  height: 100%;
  left: 2.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; }

.answer-button {
  width: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.15s;
  -o-transition: opacity 0.15s;
  transition: opacity 0.15s;
  position: relative;
  margin: 0.5% 0 0.5% 0;
  font-size: 2.2vw;
  padding: 1% 2% 1% 2%;
  height: 30%;
  background-color: #eee;
  border: 3px solid lightgray;
  border-radius: 8px; }

.question-insert {
  position: relative;
  height: 25%;
  font-size: 2.5vw;
  margin: 1%;
  width: 100%; }

.check-button:hover {
  -webkit-transform: scale(1.03);
      -ms-transform: scale(1.03);
          transform: scale(1.03); }

.next-button:hover {
  -webkit-transform: scale(1.03);
      -ms-transform: scale(1.03);
          transform: scale(1.03); }

.shake {
  -webkit-animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
          animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000px;
          perspective: 1000px; }

@-webkit-keyframes shake {
  10%, 90% {
    -webkit-transform: translate3d(-1px, 0, 0);
            transform: translate3d(-1px, 0, 0); }
  20%, 80% {
    -webkit-transform: translate3d(2px, 0, 0);
            transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% {
    -webkit-transform: translate3d(-4px, 0, 0);
            transform: translate3d(-4px, 0, 0); }
  40%, 60% {
    -webkit-transform: translate3d(4px, 0, 0);
            transform: translate3d(4px, 0, 0); } }

@keyframes shake {
  10%, 90% {
    -webkit-transform: translate3d(-1px, 0, 0);
            transform: translate3d(-1px, 0, 0); }
  20%, 80% {
    -webkit-transform: translate3d(2px, 0, 0);
            transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% {
    -webkit-transform: translate3d(-4px, 0, 0);
            transform: translate3d(-4px, 0, 0); }
  40%, 60% {
    -webkit-transform: translate3d(4px, 0, 0);
            transform: translate3d(4px, 0, 0); } }

.shake {
  -webkit-animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
          animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000px;
          perspective: 1000px; }

@keyframes shake {
  10%, 90% {
    -webkit-transform: translate3d(-1px, 0, 0);
            transform: translate3d(-1px, 0, 0); }
  20%, 80% {
    -webkit-transform: translate3d(2px, 0, 0);
            transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% {
    -webkit-transform: translate3d(-4px, 0, 0);
            transform: translate3d(-4px, 0, 0); }
  40%, 60% {
    -webkit-transform: translate3d(4px, 0, 0);
            transform: translate3d(4px, 0, 0); } }

.text-quiz .answerBox .answer-button-bottom {
  width: 100%;
  height: 100% !important; }
  .text-quiz .answerBox .answer-button-bottom * {
    margin: auto; }

.eyfs-branding .question-text-box {
  text-align: center !important;
  font-weight: bold !important; }

.eyfs-branding #mainPage {
  padding: 2%; }

.arabic-branding .question-text-box, .egypt-branding .question-text-box {
  text-align: right !important; }

.arabic-branding .no-image .answer-button-bottom, .egypt-branding .no-image .answer-button-bottom {
  text-align: right !important; }

.in-set-button {
  width: 120px;
  height: 82px;
  width: 5rem;
  height: 5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: flex;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  padding: 0.4rem;
  width: 6rem;
  height: 4.5rem;
  border-radius: 1.5rem;
  -ms-flex-item-align: center;
      align-self: center;
  position: relative;
  padding: 0.5rem !important;
  border: 5px solid #E4DBCF;
  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; }
  .in-set-button svg {
    fill: white !important; }
  .in-set-button:hover {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
    cursor: pointer; }

.contain-both {
  height: 25%;
  margin-bottom: 1%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.top-smaller .contain-both {
  height: 100%; }