/*
	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;
  height: 100%; }
  #gg_container p {
    margin: unset; }

#mainPage {
  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: start;
      -ms-flex-pack: start;
          justify-content: start;
  width: 93.5%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

.foreground-container {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 103;
  position: absolute;
  pointer-events: none;
  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; }

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

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

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

.span-full-col {
  height: 40%;
  width: 97%;
  padding: 1rem;
  margin: 1rem auto 1rem 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;
  -ms-flex-line-pack: center;
      align-content: center;
  border-radius: 8px;
  line-height: normal; }

.span-full-row {
  height: 48%;
  width: 97%;
  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;
  -ms-flex-line-pack: center;
      align-content: center;
  border-radius: 8px; }

.full-inner {
  width: 100%;
  height: 100%; }

.span-full-title {
  margin-left: 2%;
  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;
  -ms-flex-line-pack: center;
      align-content: center;
  text-align: center;
  height: 16%;
  color: white; }

p {
  margin: auto; }

.audio-span {
  height: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.border-3 {
  border: 3px solid black;
  -webkit-box-shadow: 3px 4px 7px -3px #6e6e6e;
          box-shadow: 3px 4px 7px -3px #6e6e6e; }

.pan-back {
  background-color: white; }

.pan-height {
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  border-radius: 8px;
  padding: 1rem; }

.brand-tab {
  padding: 1rem;
  width: 20%;
  height: 100%;
  background-color: white;
  margin: 0 1rem;
  border-radius: 0 0 12px 12px; }

.brand-tab-inner {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center; }

.fa-play {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: center;
      align-self: center; }

.filler-tab {
  opacity: 0; }

.audio-button {
  margin: 5px;
  border-radius: 60px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: 5px 8px 5px 12px;
  padding: 2px 8px 2px 12px;
  font-weight: 600;
  font-size: large;
  text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
  background-color: orange;
  color: white;
  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;
  -ms-flex-line-pack: center;
      align-content: center;
  text-align: center; }
  .audio-button:hover {
    cursor: pointer;
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1); }

.span-title-cont {
  text-shadow: black 2px 0px 0px, black 1.75517px 0.95885px 0px, black 1.0806px 1.68294px 0px, black 0.14147px 1.99499px 0px, black -0.83229px 1.81859px 0px, black -1.60229px 1.19694px 0px, black -1.97998px 0.28224px 0px, black -1.87291px -0.70157px 0px, black -1.30729px -1.5136px 0px, black -0.42159px -1.95506px 0px, black 0.56732px -1.91785px 0px, black 1.41734px -1.41108px 0px, black 1.92034px -0.55883px 0px;
  width: 100%;
  max-width: 75%;
  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; }
  .span-title-cont h {
    -webkit-text-stroke-width: 1.5px;
    -webkit-text-stroke-color: #000000;
    -webkit-text-fill-color: #8ADAFF; }

.ll-image-cont {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 0%;
  height: 120%;
  background-image: url("lightning-languages-22-character.png"); }

.image-cover {
  background-size: cover;
  height: 100%;
  background-color: white;
  border: 3px solid black;
  margin-left: 1rem; }

.fas {
  font-family: "Font Awesome 5 Free" !important; }

.fa-play {
  margin-right: 8px;
  font-size: x-large; }

.title-change {
  text-align: start;
  margin: 0;
  height: 70%;
  width: 100%;
  text-wrap: 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; }

.text-bottom {
  width: 125%; }

#top-box-long, #audio-box, #optional-box {
  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;
  line-height: 1.4; }

#optional-box {
  height: auto; }

.bigger-line-height {
  line-height: 2; }

.font-button .path1::before {
  color: inherit !important; }

.outer-scroll {
  height: 100%;
  padding: unset; }

.can-scroll {
  padding: unset;
  background-color: white;
  border-radius: 12px;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  font-size: larger !important;
  border: 9px solid white; }
  .can-scroll .ll-image-cont {
    background-position: top !important; }
  .can-scroll .span-full-col, .can-scroll .span-full-row {
    height: auto;
    font-size: larger !important; }