@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto+Slab:100,300,400,700|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=latin-ext");
@font-face {
  font-family: "mayascript";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/mayascript/MayaFont-Regular.eot"), url("../fonts/mayascript/MayaFont-Regular.otf") format("opentype"), url("../fonts/mayascript/MayaFont-Regular.woff2") format("woff2"), url("../fonts/mayascript/MayaFont-Regular.woff") format("woff"), url("../fonts/mayascript/MayaFont-Regular.ttf") format("truetype"); }
ul li {
  list-style-type: none; }

* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; }

html {
  box-sizing: border-box;
  height: 100vh; }

body {
  height: 100%;
  background-color: #191005;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  display: flex;
  max-width: 100vw;
  flex-wrap: wrap;
  flex-direction: column; }

header {
  background-color: #ed4747;
  width: 100%;
  display: flex;
  z-index: 100; }
  header .logo_icon {
    font-family: "mayascript";
    font-kerning: normal;
    font-size: 2em;
    line-height: 1em;
    display: none; }
  header .logo_text {
    font-weight: 900;
    font-size: 1.2em;
    line-height: 0.9em; }
  header div[class*="menu_opt"]:hover {
    background-color: #af3434;
    cursor: pointer;
    color: white; }
    header div[class*="menu_opt"]:hover a {
      color: white; }
  header div {
    color: black;
    width: calc(100% / 6);
    text-align: center;
    padding: 0.3em; }
  header a {
    text-decoration: none;
    color: black; }

main {
  max-width: 100%; }
  main.row {
    flex-direction: row; }
  main.column {
    flex-direction: column;
    align-items: center; }
  main.typo {
    padding: 0; }
  main .title_p {
    margin-top: 0;
    font-size: 1.8em !important; }
  main .main_content {
    width: 100%;
    height: calc(100vh - 6.5em);
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    transition: all 0.25s ease; }
    main .main_content .main_content_title {
      width: 25%;
      position: relative; }
      main .main_content .main_content_title .fa-question-circle {
        position: absolute;
        bottom: 4em; }
        main .main_content .main_content_title .fa-question-circle:hover {
          color: #ed4747;
          cursor: pointer; }
      main .main_content .main_content_title .codice_page {
        width: 85%; }
    main .main_content .main_content_info {
      width: calc(70% - 40px);
      height: auto;
      display: grid;
      grid-template-columns: 25% 25% 25% 25%;
      padding: 5em; }
      main .main_content .main_content_info div {
        padding: 20px 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 65%;
        background-size: contain;
        align-items: center; }
      main .main_content .main_content_info .grid_item {
        cursor: pointer; }
        main .main_content .main_content_info .grid_item.grid_item_1 {
          background-image: url("../img/glif1.png"); }
        main .main_content .main_content_info .grid_item.grid_item_2 {
          background-image: url("../img/glif2.png"); }
        main .main_content .main_content_info .grid_item.grid_item_3 {
          background-image: url("../img/glif3.png"); }
        main .main_content .main_content_info .grid_item.grid_item_4 {
          background-image: url("../img/glif4.png"); }
        main .main_content .main_content_info .grid_item.grid_item_5 {
          background-image: url("../img/glif5.png"); }
        main .main_content .main_content_info .grid_item.grid_item_6 {
          background-image: url("../img/glif6.png"); }
        main .main_content .main_content_info .grid_item.grid_item_7 {
          background-image: url("../img/glif7.png"); }
        main .main_content .main_content_info .grid_item.grid_item_8 {
          background-image: url("../img/glif8.png"); }
        main .main_content .main_content_info .grid_item.grid_item_9 {
          grid-row-start: 3;
          grid-row-end: 5;
          grid-column-start: 1;
          grid-column-end: 3;
          background-image: url("../img/indig1.png");
          background-size: contain; }
        main .main_content .main_content_info .grid_item.grid_item_10 {
          grid-row-start: 3;
          grid-row-end: 5;
          grid-column-start: 3;
          grid-column-end: 5;
          background-image: url("../img/indig2.png");
          background-size: contain; }
    main .main_content .main_content_info_typo {
      width: calc(75% - 60px);
      background-color: #443a34;
      display: flex;
      flex-wrap: wrap;
      font-family: "mayascript" !important; }
      main .main_content .main_content_info_typo .typo_textarea, main .main_content .main_content_info_typo .typo_keyboard {
        text-decoration: none;
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: center;
        transition: all 0.5s ease; }
        main .main_content .main_content_info_typo .typo_textarea textarea, main .main_content .main_content_info_typo .typo_keyboard textarea {
          background-color: #b2aeab;
          color: black;
          font-family: "mayascript";
          font-kerning: normal;
          outline: none;
          font-size: 7em;
          padding: 0 60px;
          width: calc(100% - 86px);
          margin: 20px 40px;
          height: calc(100% - 40px); }
        main .main_content .main_content_info_typo .typo_textarea ul, main .main_content .main_content_info_typo .typo_keyboard ul {
          color: black !important; }
      main .main_content .main_content_info_typo .keyboard {
        width: 100%;
        padding-top: 10px; }
      main .main_content .main_content_info_typo .typo_open_close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: calc(5% - 2px);
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        transition: all 0.25s ease; }
        main .main_content .main_content_info_typo .typo_open_close span {
          transition: all 0.25s ease; }
          main .main_content .main_content_info_typo .typo_open_close span.closed {
            transform: rotate(180deg);
            transition: all 0.25s ease; }
  main span.fa.fa-angle-left {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 10px;
    transition: all 0.25s ease; }
    main span.fa.fa-angle-left:hover {
      cursor: pointer; }
    main span.fa.fa-angle-left.with_sidebar {
      transform: translateX(-20vw) rotate(180deg);
      transition: all 0.45s ease; }
  main .main_content.with_sidebar {
    width: 80%;
    transform: translateX(-12%);
    transition: all 0.45s ease; }
  main .sidebar_content {
    background-color: #443a34;
    width: 20%;
    height: calc(100vh - 2.5em);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: column;
    position: fixed;
    top: 0;
    z-index: -200;
    left: calc(100vw - 20%);
    transition: all 0.45s ease;
    border-left: 1px solid white; }
    main .sidebar_content .image_detail {
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      height: 30%;
      margin-top: 30px !important; }
    main .sidebar_content .syllabic {
      padding: 0.4em; }
    main .sidebar_content .meaning {
      padding: 0.4em; }
    main .sidebar_content .description {
      padding: 0.4em;
      font-size: 12px; }
    main .sidebar_content .image_detail, main .sidebar_content .syllabic, main .sidebar_content .meaning, main .sidebar_content .description {
      margin: 0 35px; }
      main .sidebar_content .image_detail *, main .sidebar_content .syllabic *, main .sidebar_content .meaning *, main .sidebar_content .description * {
        margin: 0; }
  main .sidebar_content.invisible_sidebar {
    transition: all 0.25s ease;
    left: 99.9vw; }
  main .main_transalor_title, main .main_content_title {
    width: 100%;
    color: white;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 4em 0em 4em 5em; }
    main .main_transalor_title h1, main .main_content_title h1 {
      margin: 0;
      font-weight: 700; }
    main .main_transalor_title .description, main .main_content_title .description {
      font-weight: lighter; }
  main .main_translator_content {
    background-color: #443a34;
    width: 88%;
    margin-top: 5em;
    padding: 10px 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    main .main_translator_content h3 {
      margin: 0;
      font-weight: normal; }
    main .main_translator_content .translator_spanish, main .main_translator_content .translator_mayan {
      width: 40%; }
      main .main_translator_content .translator_spanish .translator_spanish_header, main .main_translator_content .translator_spanish .translator_mayan_header, main .main_translator_content .translator_mayan .translator_spanish_header, main .main_translator_content .translator_mayan .translator_mayan_header {
        width: 100%;
        padding: 5px 0px; }
        main .main_translator_content .translator_spanish .translator_spanish_header label, main .main_translator_content .translator_spanish .translator_mayan_header label, main .main_translator_content .translator_mayan .translator_spanish_header label, main .main_translator_content .translator_mayan .translator_mayan_header label {
          font-size: 10px; }
      main .main_translator_content .translator_spanish .translator_spanish_content, main .main_translator_content .translator_spanish .translator_mayan_content, main .main_translator_content .translator_mayan .translator_spanish_content, main .main_translator_content .translator_mayan .translator_mayan_content {
        width: 100%;
        color: black; }
        main .main_translator_content .translator_spanish .translator_spanish_content .textarea_container, main .main_translator_content .translator_spanish .translator_mayan_content .textarea_container, main .main_translator_content .translator_mayan .translator_spanish_content .textarea_container, main .main_translator_content .translator_mayan .translator_mayan_content .textarea_container {
          position: relative; }
          main .main_translator_content .translator_spanish .translator_spanish_content .textarea_container textarea, main .main_translator_content .translator_spanish .translator_mayan_content .textarea_container textarea, main .main_translator_content .translator_mayan .translator_spanish_content .textarea_container textarea, main .main_translator_content .translator_mayan .translator_mayan_content .textarea_container textarea {
            font-size: 22px;
            width: 100%;
            height: 100%;
            resize: none;
            background-color: #b2aeab;
            border: none;
            overflow: auto;
            outline: none; }
          main .main_translator_content .translator_spanish .translator_spanish_content .textarea_container span, main .main_translator_content .translator_spanish .translator_mayan_content .textarea_container span, main .main_translator_content .translator_mayan .translator_spanish_content .textarea_container span, main .main_translator_content .translator_mayan .translator_mayan_content .textarea_container span {
            position: absolute;
            bottom: 13px;
            right: 10px;
            color: #443a34; }
        main .main_translator_content .translator_spanish .translator_spanish_content p, main .main_translator_content .translator_spanish .translator_mayan_content p, main .main_translator_content .translator_mayan .translator_spanish_content p, main .main_translator_content .translator_mayan .translator_mayan_content p {
          color: white;
          padding-top: 4px;
          font-size: 9px; }

footer {
  z-index: 100;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3.5em;
  background-color: #dba94c;
  color: black;
  font-size: 12px; }
  footer.typo {
    margin-top: 0px; }
  footer .footer_content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: calc(100% - 120px);
    margin: 0 auto; }
    footer .footer_content .copyright .copy_text {
      margin: 0 0.5em; }
    footer .footer_content .copyright .fa-github {
      color: black;
      font-size: 1.2em;
      line-height: 0.8em; }
      footer .footer_content .copyright .fa-github:hover {
        opacity: 0.5; }
    footer .footer_content div {
      width: calc(100%/3); }
    footer .footer_content div.american_museum {
      text-align: right; }

#owl-demo .item img {
  display: block;
  width: 100%;
  height: auto; }

@media (max-width: 1366px) {
  main.typography {
    padding: 4em 4em 4em 5em; }
    main.typography .main_transalor_title {
      padding: 0; }
    main.typography .main_translator_content {
      width: 100%; }
  main .main_content .main_content_title {
    padding: 5em 0em 4em 5em;
    margin: 0; }
    main .main_content .main_content_title p {
      margin-top: 0; }
  main .main_content .main_content_info {
    padding: 4em 2em 2em 2.5em; } }
@media (max-width: 1024px) and (orientation: portrait) {
  main.row .main_content {
    flex-direction: column; }
    main.row .main_content .main_content_title {
      height: 25%;
      width: 100%;
      padding: 4em;
      margin: 0; }
      main.row .main_content .main_content_title .codice_page {
        display: none; }
      main.row .main_content .main_content_title .fa-question-circle {
        position: absolute;
        bottom: 0.2em;
        right: 3em; }
    main.row .main_content .main_content_info {
      height: 75%;
      width: 100%;
      padding: 4em; }
      main.row .main_content .main_content_info .grid_item_9, main.row .main_content .main_content_info .grid_item_10 {
        height: 40vw !important; }
    main.row .main_content .main_content_info_typo {
      height: 70%;
      width: 100%; }

  main.row.typo {
    padding: 0; } }
@media (max-width: 1024px) and (orientation: landscape) {
  main .main_content .main_content_title {
    padding: 8em 0em 4em 5em;
    margin: 0; } }
@media (max-width: 768px) {
  main .main_translator_content .translator_spanish, main .main_translator_content .translator_mayan {
    width: 45%; }

  main.row {
    padding: 0; }
    main.row .main_content_title {
      width: 30%;
      margin: 0; }
    main.row .main_content_info {
      width: 70%; }
      main.row .main_content_info .grid_item_9, main.row .main_content_info .grid_item_10 {
        height: 24vw; } }
@media (max-width: 640px) and (orientation: landscape) {
  main.row {
    padding: 0; }
    main.row .main_content.column {
      flex-direction: row; }
      main.row .main_content.column .main_content_title {
        width: 50%;
        margin: 0;
        padding: 6vh 0 0 3em; }
        main.row .main_content.column .main_content_title p {
          font-size: 0.8em; }
        main.row .main_content.column .main_content_title h1 {
          font-size: 1.2em; }
      main.row .main_content.column .main_content_info {
        width: 50%;
        padding: 6vh; }
        main.row .main_content.column .main_content_info .grid_item_9, main.row .main_content.column .main_content_info .grid_item_10 {
          height: 24vw; } }
@media (max-width: 640px) and (orientation: portrait) {
  main {
    padding: 0 40px; }
    main .main_translator_content .translator_spanish, main .main_translator_content .translator_mayan {
      width: 100%; }
    main .main_transalor_title {
      margin-top: 20px;
      margin-bottom: 30px; }
      main .main_transalor_title p.description {
        display: none; }

  main .main_content.column {
    flex-direction: column; }
    main .main_content.column .main_content_title {
      width: 100%; }
      main .main_content.column .main_content_title p {
        font-size: 0.8em; }
      main .main_content.column .main_content_title h1 {
        font-size: 1.2em; }
    main .main_content.column .main_content_info {
      width: 100%; }
      main .main_content.column .main_content_info .grid_item_9, main .main_content.column .main_content_info .grid_item_10 {
        height: 24vw; }

  header div {
    padding: 0; }
    header div p {
      font-size: 0.8em;
      margin: 0.7em; }
  header .logo_icon {
    display: block;
    font-size: 2em;
    line-height: 0.6em; }
  header .logo_text {
    display: none; }

  footer {
    height: 3em;
    font-size: 0.7em; }
    footer p {
      margin: 0.95em; }
    footer img {
      width: 9em;
      height: auto; }
    footer .footer_content {
      padding: 0 1em;
      width: 100%; }
      footer .footer_content .copyright {
        width: 100%; }
        footer .footer_content .copyright .copy_text {
          display: none; }
        footer .footer_content .copyright .fa-github {
          margin-left: 0.3em; } }
.game_content {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  transition: all 0.25s ease;
  height: calc(100vh - 6.5em); }
  .game_content .column {
    height: 100%; }
    .game_content .column.info_column {
      overflow-y: auto;
      width: 22%;
      padding: 4em 0 0 6em; }
      .game_content .column.info_column .column_introduction {
        margin-bottom: 0.3em;
        font-size: 1.8em; }
      .game_content .column.info_column .column_main_title {
        margin: 0;
        font-size: 2em;
        font-weight: 700; }
      .game_content .column.info_column .column_description {
        font-weight: 100;
        margin-bottom: 1.5em; }
      .game_content .column.info_column .glyph_slide .glyph_box {
        display: grid;
        grid-template-columns: 3.7vw 7.4vw 3.7vw;
        grid-template-rows: 3.7vw 7.4vw 3.7vw;
        margin: 2em 0 0.2em 0;
        font-family: "mayascript";
        font-kerning: normal; }
        .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx {
          position: relative; }
          .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx div {
            position: absolute;
            line-height: 0;
            font-size: 11.9vw;
            top: 3.65vw; }
          .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx.glyph_box02 {
            border: 1px solid gray; }
            .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx.glyph_box02 div {
              top: 1.8vw;
              left: 1.26vw;
              -webkit-transform: rotate(-90deg);
              -moz-transform: rotate(-90deg);
              -ms-transform: rotate(-90deg);
              -o-transform: rotate(-90deg);
              transform: rotate(-90deg); }
          .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx.glyph_box04 {
            border: 1px solid gray; }
            .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx.glyph_box04 div {
              left: -0.57vw;
              -webkit-transform: scaleX(-1);
              -moz-transform: scaleX(-1);
              -ms-transform: scaleX(-1);
              -o-transform: scaleX(-1);
              transform: scaleX(-1); }
          .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx.glyph_box05 {
            border: 1px solid #DBA94C; }
            .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx.glyph_box05 div {
              z-index: 1;
              left: -0.65vw; }
          .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx.glyph_box06 {
            border: 1px solid gray; }
            .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx.glyph_box06 div {
              left: -0.57vw; }
          .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx.glyph_box08 {
            border: 1px solid gray; }
            .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx.glyph_box08 div {
              top: 1.8vw;
              left: 1.26vw;
              -webkit-transform: rotate(90deg);
              -moz-transform: rotate(90deg);
              -ms-transform: rotate(90deg);
              -o-transform: rotate(90deg);
              transform: rotate(90deg); }
      .game_content .column.info_column .glyph_slide .number_box {
        display: none;
        grid-template-columns: 3.6vw 3.6vw 3.6vw 3.6vw;
        grid-template-rows: 14.8vw;
        margin: 2em 0 0.2em 0;
        font-family: "mayascript";
        font-kerning: normal; }
        .game_content .column.info_column .glyph_slide .number_box .n_box {
          position: relative;
          border: 1px solid gray; }
          .game_content .column.info_column .glyph_slide .number_box .n_box div {
            position: absolute;
            font-size: 12.3vw;
            line-height: 0;
            top: 7.33vw;
            left: 0.5vw; }
            .game_content .column.info_column .glyph_slide .number_box .n_box div.zero {
              margin-left: -0.05em; }
      .game_content .column.info_column .glyph_slide .slide_arrows {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-around;
        color: #DBA94C;
        cursor: pointer;
        margin-left: -1.5vw; }
        .game_content .column.info_column .glyph_slide .slide_arrows #arrow_right, .game_content .column.info_column .glyph_slide .slide_arrows #arrow_left {
          transition: all 0.2s ease;
          -webkit-transition: all 0.2s ease;
          -moz-transition: all 0.2s ease;
          -ms-transition: all 0.2s ease;
          -o-transition: all 0.2s ease; }
          .game_content .column.info_column .glyph_slide .slide_arrows #arrow_right:hover, .game_content .column.info_column .glyph_slide .slide_arrows #arrow_left:hover {
            opacity: 0.5;
            -webkit-transform: scale(1.5);
            -moz-transform: scale(1.5);
            -ms-transform: scale(1.5);
            -o-transform: scale(1.5);
            transform: scale(1.5);
            transition: all 0.2s ease;
            -webkit-transition: all 0.2s ease;
            -moz-transition: all 0.2s ease;
            -ms-transition: all 0.2s ease;
            -o-transition: all 0.2s ease; }
      .game_content .column.info_column .glyph_slide .glyph_title {
        margin-top: 1em;
        font-size: 1.3em;
        font-weight: 300; }
      .game_content .column.info_column .glyph_slide .glyph_mayan {
        font-style: italic;
        font-weight: 200;
        padding-top: 0.3em;
        opacity: 0.7; }
      .game_content .column.info_column .glyph_slide .glyph_trans_num {
        font-style: italic;
        padding-top: 0.3em;
        font-weight: 200;
        font-size: 0.7em;
        opacity: 0.4; }
      .game_content .column.info_column .glyph_slide .glyph_description {
        font-weight: 200;
        margin-top: 0.3em;
        opacity: 0.6;
        font-size: 0.9em; }
    .game_content .column.game_column {
      width: 40%;
      height: calc(100vh - 13.5em); }
      .game_content .column.game_column .game_main_box {
        display: grid;
        grid-template-columns: 10vw 20vw 10vw;
        grid-template-rows: 10vw 20vw 10vw;
        font-family: "mayascript";
        font-kerning: normal; }
        .game_content .column.game_column .game_main_box .droppable {
          position: relative;
          font-size: 32.2vw; }
          .game_content .column.game_column .game_main_box .droppable.completed {
            border-color: transparent !important; }
          .game_content .column.game_column .game_main_box .droppable.green {
            border: 0;
            border: 3px solid green; }
          .game_content .column.game_column .game_main_box .droppable.red {
            border: 0;
            border: 3px solid red; }
        .game_content .column.game_column .game_main_box .box02 div, .game_content .column.game_column .game_main_box .box04 div, .game_content .column.game_column .game_main_box .box05 div, .game_content .column.game_column .game_main_box .box06 div, .game_content .column.game_column .game_main_box .box08 div {
          position: absolute;
          line-height: 0;
          top: 9.9vw; }
        .game_content .column.game_column .game_main_box .box02 {
          border: 3px solid gray; }
          .game_content .column.game_column .game_main_box .box02 div {
            top: 4.85vw;
            left: 3.4vw;
            -webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            transform: rotate(-90deg); }
        .game_content .column.game_column .game_main_box .box04 {
          border: 3px solid gray; }
          .game_content .column.game_column .game_main_box .box04 div {
            left: -1.6vw;
            -webkit-transform: scaleX(-1);
            -moz-transform: scaleX(-1);
            -ms-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            transform: scaleX(-1); }
        .game_content .column.game_column .game_main_box .box05 {
          border: 3px solid #DBA94C; }
          .game_content .column.game_column .game_main_box .box05 div {
            z-index: 1;
            left: -1.95vw; }
        .game_content .column.game_column .game_main_box .box06 {
          border: 3px solid gray; }
          .game_content .column.game_column .game_main_box .box06 div {
            left: -1.6vw; }
        .game_content .column.game_column .game_main_box .box08 {
          border: 3px solid gray; }
          .game_content .column.game_column .game_main_box .box08 div {
            top: 4.85vw;
            left: 3.4vw;
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg); }
      .game_content .column.game_column .game_number_box {
        display: none;
        grid-template-columns: 10vw 10vw 10vw 10vw;
        grid-template-rows: 40vw;
        font-family: "mayascript";
        font-kerning: normal; }
        .game_content .column.game_column .game_number_box .droppable {
          position: relative; }
          .game_content .column.game_column .game_number_box .droppable.completed {
            border-color: transparent !important; }
          .game_content .column.game_column .game_number_box .droppable div {
            position: absolute;
            font-size: 33.3vw;
            top: -3.4vw;
            left: 1.5vw; }
            .game_content .column.game_column .game_number_box .droppable div.zero {
              margin-left: -0.05em; }
          .game_content .column.game_column .game_number_box .droppable.green {
            border: 0;
            border: 3px solid green; }
          .game_content .column.game_column .game_number_box .droppable.red {
            border: 0;
            border: 3px solid red; }
        .game_content .column.game_column .game_number_box .number_box01, .game_content .column.game_column .game_number_box .number_box02, .game_content .column.game_column .game_number_box .number_box03, .game_content .column.game_column .game_number_box .number_box04 {
          border: 3px solid gray; }
    .game_content .column.glyphs_column {
      z-index: 100;
      user-select: none;
      width: 23%;
      background-color: #443a34;
      border-left: 2px solid black; }
      .game_content .column.glyphs_column .arrow {
        display: none; }
        .game_content .column.glyphs_column .arrow span {
          user-select: none; }
      .game_content .column.glyphs_column .glyphs {
        width: 100%; }
        .game_content .column.glyphs_column .glyphs .minus {
          cursor: pointer; }
        .game_content .column.glyphs_column .glyphs .principal_sign .principal_title {
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          justify-content: space-between;
          border-top: 1px solid black;
          border-bottom: 1px solid black;
          color: black;
          font-weight: 500;
          font-size: 0.9em;
          padding: 0.3em;
          background-color: #DBA94C; }
        .game_content .column.glyphs_column .glyphs .principal_sign .principal_elements {
          padding: 0.4em;
          padding-right: 0;
          cursor: pointer;
          display: flex;
          flex-flow: row wrap;
          align-items: center;
          justify-content: space-around;
          font-size: calc(2.1vw + 2.1vh + .5em);
          font-family: "mayascript";
          font-kerning: normal;
          line-height: 1em; }
          .game_content .column.glyphs_column .glyphs .principal_sign .principal_elements .sign {
            padding-right: 0.3em; }
        .game_content .column.glyphs_column .glyphs .other_signs .others_title {
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          justify-content: space-between;
          border-top: 1px solid black;
          border-bottom: 1px solid black;
          color: black;
          font-weight: 500;
          font-size: 0.9em;
          padding: 0.3em;
          background-color: #CE8546; }
          .game_content .column.glyphs_column .glyphs .other_signs .others_title .title_text .light {
            font-size: 0.8em;
            font-weight: 300; }
        .game_content .column.glyphs_column .glyphs .other_signs .others_elements {
          padding: 0.4em;
          padding-right: 0;
          cursor: pointer;
          display: flex;
          flex-flow: row wrap;
          align-items: center;
          justify-content: space-around;
          font-size: calc(2.1vw + 2.1vh + .5em);
          font-family: "mayascript";
          font-kerning: normal;
          line-height: 1em; }
          .game_content .column.glyphs_column .glyphs .other_signs .others_elements .sign {
            padding-right: 0.3em; }
        .game_content .column.glyphs_column .glyphs .numbers .numbers_title {
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          justify-content: space-between;
          border-top: 1px solid black;
          border-bottom: 1px solid black;
          color: black;
          font-weight: 500;
          font-size: 0.9em;
          padding: 0.3em;
          background-color: #af3434; }
        .game_content .column.glyphs_column .glyphs .numbers .numbers_elements {
          padding: 0.4em;
          padding-right: 0;
          cursor: pointer;
          display: flex;
          flex-flow: row wrap;
          align-items: center;
          justify-content: space-around;
          font-size: calc(1.5vw + 1.5vh + .5em);
          font-family: "mayascript";
          font-kerning: normal; }

.remodal.remodal_game {
  padding: 0; }
  .remodal.remodal_game #modalContent {
    width: 100%;
    height: 29vw; }
    .remodal.remodal_game #modalContent .remodal-img {
      height: 29vw;
      background-repeat: no-repeat;
      background-size: 100% 100%; }

@media (max-width: 1366px) {
  .game_content .column.info_column {
    padding: 4em 0 0 5em; }
    .game_content .column.info_column .glyph_slide .slide_arrows {
      margin-left: -1.2vw; }
  .game_content .column.game_column .game_main_box {
    margin: 9vh 0; }
  .game_content .column.game_column .game_number_box {
    margin: 11vh 0; }
    .game_content .column.game_column .game_number_box .droppable div {
      top: -3.5vw; }
  .game_content .column.glyphs_column {
    width: 20%; }
    .game_content .column.glyphs_column .glyphs .principal_sign .principal_elements {
      padding: 0.3em;
      padding-right: 0;
      font-size: calc(4.2vw + .5em); }
      .game_content .column.glyphs_column .glyphs .principal_sign .principal_elements .sign {
        padding-right: 0.2em; }
    .game_content .column.glyphs_column .glyphs .other_signs .others_elements {
      padding: 0.3em;
      padding-right: 0;
      font-size: calc(3.6vw + 1em); }
      .game_content .column.glyphs_column .glyphs .other_signs .others_elements .sign {
        padding-right: 0.2em; } }
@media (max-width: 1024px) and (orientation: portrait) {
  .game_content .column.info_column {
    width: 32%;
    padding: 4em 0 0 4em; }
    .game_content .column.info_column .glyph_slide .glyph_box {
      grid-template-columns: 6vw 12vw 6vw;
      grid-template-rows: 6vw 12vw 6vw; }
      .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx div {
        font-size: 19vw;
        top: 6vw; }
      .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx.glyph_box02 div {
        top: 2.9vw;
        left: 1.96vw; }
      .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx.glyph_box04 div {
        left: -0.95vw; }
      .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx.glyph_box05 div {
        left: -1.05vw; }
      .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx.glyph_box06 div {
        left: -0.95vw; }
      .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx.glyph_box08 div {
        top: 2.9vw;
        left: 1.96vw; }
    .game_content .column.info_column .glyph_slide .number_box {
      grid-template-columns: 6vw 6vw 6vw 6vw;
      grid-template-rows: 24vw; }
      .game_content .column.info_column .glyph_slide .number_box .n_box div {
        font-size: 19.9vw;
        line-height: 0;
        top: 11.9vw;
        left: 1vw; }
    .game_content .column.info_column .glyph_slide .slide_arrows {
      margin-top: 0.5em;
      margin-left: -1.1em; }
  .game_content .column.game_column {
    width: 60%; }
    .game_content .column.game_column .game_main_box {
      grid-template-columns: 13.25vw 26.5vw 13.25vw;
      grid-template-rows: 13.25vw 26.5vw 13.25vw; }
      .game_content .column.game_column .game_main_box .droppable {
        font-size: 42.5vw; }
      .game_content .column.game_column .game_main_box .box02 div, .game_content .column.game_column .game_main_box .box04 div, .game_content .column.game_column .game_main_box .box05 div, .game_content .column.game_column .game_main_box .box06 div, .game_content .column.game_column .game_main_box .box08 div {
        top: 13.1vw; }
      .game_content .column.game_column .game_main_box .box02 div {
        top: 6.4vw;
        left: 4.5vw; }
      .game_content .column.game_column .game_main_box .box04 div {
        left: -2.2vw; }
      .game_content .column.game_column .game_main_box .box05 div {
        left: -2.35vw; }
      .game_content .column.game_column .game_main_box .box06 div {
        left: -2.2vw; }
      .game_content .column.game_column .game_main_box .box08 div {
        top: 6.4vw;
        left: 4.5vw; }
    .game_content .column.game_column .game_number_box {
      grid-template-columns: 13.25vw 13.25vw 13.25vw 13.5vw;
      grid-template-rows: 53vw; }
      .game_content .column.game_column .game_number_box .droppable {
        position: relative; }
        .game_content .column.game_column .game_number_box .droppable div {
          position: absolute;
          font-size: 44vw;
          top: -4.5vw;
          left: 2vw; }
  .game_content .column.glyphs_column {
    position: fixed;
    width: 100%;
    height: 28em;
    bottom: 2.5em;
    right: 0; }
    .game_content .column.glyphs_column .glyphs .principal_sign {
      border: 0; }
      .game_content .column.glyphs_column .glyphs .principal_sign .principal_elements {
        justify-content: center;
        padding: 0.2em 1.3em;
        font-size: calc(6.2vw + .5em); }
    .game_content .column.glyphs_column .glyphs .other_signs {
      border: 0; }
      .game_content .column.glyphs_column .glyphs .other_signs .others_elements {
        justify-content: center;
        padding: 0.2em;
        padding-right: 0;
        font-size: calc(5.4vw + 1em); }
    .game_content .column.glyphs_column .glyphs .numbers {
      border: 0; }
      .game_content .column.glyphs_column .glyphs .numbers .numbers_elements {
        padding: 0.2em;
        justify-content: center;
        font-size: calc(2.5vw + 1.5vh + .5em); }
        .game_content .column.glyphs_column .glyphs .numbers .numbers_elements .number {
          margin-right: 1em; } }
@media (max-width: 1024px) and (orientation: landscape) {
  .game_content .column.info_column {
    padding: 4em 0 0 3em;
    width: 26%; }
    .game_content .column.info_column .glyph_slide .glyph_box {
      margin: 1em 1.3em; }
    .game_content .column.info_column .glyph_slide .number_box {
      margin: 1em 1.3em; }
    .game_content .column.info_column .glyph_slide .slide_arrows {
      margin-left: -0.5em; }
  .game_content .column.game_column {
    margin: 0 5vw; }
    .game_content .column.game_column .game_main_box {
      margin: 10.5vh -2vh; }
    .game_content .column.game_column .game_number_box {
      margin: 10.5vh -2vh; }
  .game_content .column.glyphs_column {
    width: 25%; }
    .game_content .column.glyphs_column .glyphs .principal_sign .principal_elements {
      font-size: calc(3.8vw + .75em); }
    .game_content .column.glyphs_column .glyphs .other_signs .others_elements {
      font-size: calc(3.3vw + .75em); } }
@media (max-width: 768px) {
  .game_content {
    height: calc(100vh - 6.5em); }
    .game_content .column.info_column {
      width: 33%;
      padding: 4.5em 0 0 2em; }
      .game_content .column.info_column .glyph_slide .glyph_box {
        margin: 0.2em 0.9em; }
      .game_content .column.info_column .glyph_slide .number_box {
        margin: 0.2em 0.9em; }
      .game_content .column.info_column .glyph_slide .slide_arrows {
        margin-left: -0.8em; }
    .game_content .column.game_column {
      width: 60%;
      padding-top: 4.8em; }
      .game_content .column.game_column .game_main_box {
        margin: 11vh -0.6em; }
      .game_content .column.game_column .game_number_box {
        margin: 11vh -0.6em; }
    .game_content .column.glyphs_column {
      position: fixed;
      width: 100%;
      height: 26em;
      bottom: 2em;
      right: 0;
      transform: translateY(23em);
      transition: all 0.45s ease;
      border-left: 0; }
      .game_content .column.glyphs_column.invisible {
        transform: translateY(0);
        transition: all 0.45s ease; }
      .game_content .column.glyphs_column .arrow {
        display: flex;
        justify-content: center; }
        .game_content .column.glyphs_column .arrow .arroww {
          cursor: pointer;
          color: black;
          transition: transform 0.45s ease; }
          .game_content .column.glyphs_column .arrow .arroww.with {
            transform: rotate(180deg);
            transition: all 0.45s ease; }
      .game_content .column.glyphs_column .glyphs .principal_sign {
        border: 0; }
      .game_content .column.glyphs_column .glyphs .other_signs {
        border: 0; }
        .game_content .column.glyphs_column .glyphs .other_signs .others_elements .sign {
          padding-right: 0.1em; }
      .game_content .column.glyphs_column .glyphs .numbers {
        border: 0; } }
@media (max-width: 640px) and (orientation: landscape) {
  .game_content .column.info_column {
    width: 50%;
    padding: 6vh 0 0 3em; }
    .game_content .column.info_column .column_introduction {
      display: none; }
    .game_content .column.info_column .column_main_title {
      font-size: 1.2em; }
    .game_content .column.info_column .column_description {
      margin-bottom: 0.7em; }
    .game_content .column.info_column .glyph_slide .glyph_box, .game_content .column.info_column .glyph_slide .number_box {
      margin: 0 14vh; }
    .game_content .column.info_column .glyph_slide .number_box .n_box div {
      font-size: 12vw;
      top: 7.3vw;
      left: 0.3vw; }
      .game_content .column.info_column .glyph_slide .number_box .n_box div.zero {
        margin-left: -0.05em; }
    .game_content .column.info_column .glyph_slide .slide_arrows {
      font-size: 0.7em;
      width: 44%;
      margin: 0 6.8vw;
      margin-top: 0.5em; }
    .game_content .column.info_column .glyph_slide .glyph_title, .game_content .column.info_column .glyph_slide .glyph_mayan, .game_content .column.info_column .glyph_slide .glyph_trans_num, .game_content .column.info_column .glyph_slide .glyph_description {
      display: none; }
  .game_content .column.game_column {
    width: 50%;
    padding-top: 0;
    margin-top: -4em; }
    .game_content .column.game_column .game_main_box {
      margin: 0 7.5vh;
      grid-template-columns: 9vw 18vw 9vw;
      grid-template-rows: 9vw 18vw 9vw; }
      .game_content .column.game_column .game_main_box .droppable {
        font-size: 29vw; }
      .game_content .column.game_column .game_main_box .box02 div, .game_content .column.game_column .game_main_box .box04 div, .game_content .column.game_column .game_main_box .box05 div, .game_content .column.game_column .game_main_box .box06 div, .game_content .column.game_column .game_main_box .box08 div {
        top: 8.6vw; }
      .game_content .column.game_column .game_main_box .box02 div {
        top: 4vw;
        left: 2.7vw; }
      .game_content .column.game_column .game_main_box .box04 div {
        left: -1.7vw; }
      .game_content .column.game_column .game_main_box .box05 div {
        left: -2.15vw; }
      .game_content .column.game_column .game_main_box .box06 div {
        left: -1.7vw; }
      .game_content .column.game_column .game_main_box .box08 div {
        top: 4vw;
        left: 2.7vw; }
    .game_content .column.game_column .game_number_box {
      margin: 0 7.5vh;
      grid-template-columns: 9vw 9vw 9vw 9vw;
      grid-template-rows: 36vw; }
      .game_content .column.game_column .game_number_box .droppable div {
        font-size: 30vw;
        top: -3.5vw;
        left: 1vw; }
  .game_content .column.glyphs_column {
    height: 20.5em;
    transform: translateY(19.1em); }
    .game_content .column.glyphs_column .arrow {
      height: 1.3em; }
      .game_content .column.glyphs_column .arrow span.fa-2x {
        font-size: 1.3em; }
    .game_content .column.glyphs_column .glyphs .principal_sign .principal_elements {
      padding: 0.2em;
      font-size: calc(6.2vw + .5em); }
    .game_content .column.glyphs_column .glyphs .other_signs .others_elements {
      padding: 0.2em;
      font-size: calc(4.5vw + .9em); } }
@media (max-width: 640px) and (orientation: portrait) {
  .game_content {
    flex-flow: column nowrap; }
    .game_content .column.info_column {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      align-items: flex-start;
      justify-content: space-around;
      width: 100%;
      height: 55%;
      padding: 7vh 4vh 3vh 3vh; }
      .game_content .column.info_column .info_column_text {
        width: 40%;
        margin-right: 1em; }
        .game_content .column.info_column .info_column_text .column_introduction {
          display: none; }
        .game_content .column.info_column .info_column_text .column_main_title {
          font-size: 1.2em; }
        .game_content .column.info_column .info_column_text .column_description {
          font-size: 0.8em; }
      .game_content .column.info_column .glyph_slide .glyph_box {
        grid-template-columns: 8vw 16vw 8vw;
        grid-template-rows: 8vw 16vw 8vw; }
        .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx div {
          font-size: 25vw;
          top: 8vw; }
        .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx.glyph_box02 div {
          top: 3.9vw;
          left: 2.75vw; }
        .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx.glyph_box04 div {
          left: -1.15vw; }
        .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx.glyph_box05 div {
          left: -1.35vw; }
        .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx.glyph_box06 div {
          left: -1.3vw; }
        .game_content .column.info_column .glyph_slide .glyph_box .glyph_boxx.glyph_box08 div {
          top: 3.9vw;
          left: 2.75vw; }
      .game_content .column.info_column .glyph_slide .number_box {
        margin: 0;
        grid-template-columns: 8vw 8vw 8vw 8vw;
        grid-template-rows: 32vw; }
        .game_content .column.info_column .glyph_slide .number_box .n_box div {
          font-size: 26vw;
          top: 16vw;
          left: 1.2vw; }
      .game_content .column.info_column .glyph_slide .slide_arrows {
        margin-left: 0.15em;
        font-size: 0.7em; }
      .game_content .column.info_column .glyph_slide .glyph_box {
        margin: 0; }
      .game_content .column.info_column .glyph_slide .glyph_title, .game_content .column.info_column .glyph_slide .glyph_mayan, .game_content .column.info_column .glyph_slide .glyph_trans_num, .game_content .column.info_column .glyph_slide .glyph_description {
        display: none; }
    .game_content .column.game_column {
      width: 100%;
      padding-top: 0; }
      .game_content .column.game_column .game_main_box {
        grid-template-columns: 18vw 36vw 18vw;
        grid-template-rows: 18vw 36vw 18vw;
        margin: 2vh 7.5vh; }
        .game_content .column.game_column .game_main_box .droppable div {
          font-size: 58vw;
          top: 17.3vw;
          left: -3.3vw; }
        .game_content .column.game_column .game_main_box .droppable.box02 div {
          top: 8.1vw;
          left: 5.8vw; }
        .game_content .column.game_column .game_main_box .droppable.box04 div {
          left: -3vw; }
        .game_content .column.game_column .game_main_box .droppable.box06 div {
          left: -3.2vw; }
        .game_content .column.game_column .game_main_box .droppable.box08 div {
          top: 8.1vw;
          left: 5.45vw; }
      .game_content .column.game_column .game_number_box {
        grid-template-columns: 18vw 18vw 18vw 18vw;
        grid-template-rows: 72vw;
        margin: 2vh 7.5vh; }
        .game_content .column.game_column .game_number_box .droppable div {
          font-size: 59vw;
          top: -6.5vw;
          left: 2.4vw; }
          .game_content .column.game_column .game_number_box .droppable div.zero {
            margin-left: -0.05em; }
    .game_content .column.glyphs_column {
      height: 16.8em;
      transform: translateY(15.4em); }
      .game_content .column.glyphs_column .arrow {
        height: 1.3em; }
        .game_content .column.glyphs_column .arrow span.fa-2x {
          font-size: 1.3em; }
      .game_content .column.glyphs_column .glyphs .principal_sign .principal_elements {
        padding: 0.2em;
        font-size: calc(6.2vw + .5em); }
      .game_content .column.glyphs_column .glyphs .other_signs .others_elements {
        padding: 0.2em;
        font-size: calc(4.5vw + .9em); } }
.landing_content {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  flex-flow: column nowrap;
  justify-content: center;
  width: 75%;
  position: absolute;
  left: 50%;
  top: 45%;
  -webkit-transform: translate(-50%, -45%);
  -moz-transform: translate(-50%, -45%);
  -ms-transform: translate(-50%, -45%);
  -o-transform: translate(-50%, -45%);
  transform: translate(-50%, -45%);
  font-size: calc(.7vw + .7vh + .4em); }
  .landing_content .landing_title .landing_title_intro {
    margin-bottom: 0.3em; }
  .landing_content .landing_title .landing_title_mayascript {
    font-weight: 700;
    font-size: calc(3.5vw + 1.5vh + 1.5em);
    margin: 0; }
  .landing_content .landing_title .button_center {
    text-align: center; }
    .landing_content .landing_title .button_center .button_start {
      display: inline-block;
      text-decoration: none;
      color: white;
      padding: 0.5em;
      margin-top: 1em;
      border: 2px solid white;
      transition: all 0.2s ease;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease; }
      .landing_content .landing_title .button_center .button_start:hover {
        color: black;
        background-color: white;
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
        transition: all 0.2s ease;
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -ms-transition: all 0.2s ease;
        -o-transition: all 0.2s ease; }

#fullscreen_button {
  position: absolute;
  margin: 5em;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease; }
  #fullscreen_button:hover {
    opacity: 0.5;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease; }

*:-webkit-full-screen {
  width: 100%;
  height: 100%; }

*:-ms-fullscreen, *:fullscreen {
  position: fixed;
  margin: 0;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%; }

/*# sourceMappingURL=styles.css.map */