@keyframes pulsar_animacao {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
  
  .pulsar {
    animation: pulsar_animacao 1s infinite;
  }
  
  #container_pdf_jm {
  
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgb(142,249,243);
      background: linear-gradient(168deg, rgba(142,249,243,1) 29%, rgba(131,119,209,1) 94%);
      padding: 3px;
      height: 100vh;
      box-sizing: border-box;
      position: fixed;
      overflow-y: auto;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      color: white;
      text-shadow: 1px 0px black;
      display: none;
      z-index: 9999;
  
  }
  
  .tela_inicial_pdf_jm {
  
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      height: 50%;
      color:  rgba(131,119,209,1);
      text-shadow: 0 0 white;
  
  }
  
  .tela_inicial_pdf_jm div {
      margin: 5px 0;
  }
  
  .tela_inicial_pdf_jm h3 {
      font-size: 2rem;
      font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
      margin-top: 0;
  }
  
  div#entrar_nomes_pdf_jm input {
  
      border: none;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
    margin: 3px 0;
  
  }
  
  div#entrar_nomes_pdf_jm input::placeholder {
    font-size: 11px;
    margin: 3px 0;
  }
  
  .iniciar_pdf_jm, .som_pdf_jm, .fechar_pdf_jm, .jogo_da_memoria_pdf_jm {
     
      color: white;
      font-weight: bold;
      font-family: Arial, Helvetica, sans-serif;
      border-radius: 3px;
      margin: 3px;
      border: none;
      padding: 3px 5px;
      cursor: pointer;
  
  }
  
  .iniciar_pdf_jm, .jogo_da_memoria_pdf_jm {
      background-color: #00c0ff;
      text-align: center;
  }

  .jogo_da_memoria_pdf_jm{
    display: block;
    margin: 3px auto;
    padding: 5px 20px;
  }
  
  .som_pdf_jm {
      background-color: #2196f3;
  }
  
  .fechar_pdf_jm {
      background-color: #f44336;
  }
  
  .iniciar_pdf_jm:hover,  .jogo_da_memoria_pdf_jm:hover {
  
      background-color: #FFB400;
  
  }
  
  .som_pdf_jm:hover {
  
  background-color: #73bcf7;
  
  }
  
  
  .som_desativado_pdf_jm {
  background-color: #dfdfdf;
  }
  
  .fechar_pdf_jm:hover {
  
  background-color: #ff6c61;
  
  }
  
  
  #info_pdf_jm {
      
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 28px;  
      padding: 3px 5px;
      border-radius: 5px;
      background-color: #c6c9cf;
      box-sizing: border-box;
      margin: 5px 0; 
      visibility: hidden;
      opacity:0;
      transition: opacity 0.3s linear;
  
  }
  
  #info_pdf_jm div {
      margin: auto;
  }
  
  #jogador1_pdf_jm, #jogador2_pdf_jm {display: flex; align-items: center;}
  
  #container_cartas_pdf_jm {
  
      display:flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      visibility: hidden;
      opacity:0;
      transition:opacity 0.3s linear;
  
  }
  
  .carta_pdf_jm {
    position: relative;
    min-width: 55px;
    min-height: 70px;
    width: 8vw;
    height: 27vh;
    perspective: 1000px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    margin: 3px;
    color: #444;
    text-shadow: none;
    font-weight: 400;
    
  }
  
  .carta_interior_pdf_jm {
  
     position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    border-radius: 3px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
      
  }
  
  .carta_interior_pdf_jm button.fechar_pdf_jm {
  
      position: absolute;
      z-index: 3000;
      left: 0;
      right: 0;
      top: -8px;
      width: 14px;
      height: 14px;
      font-size: 7px;
      margin: auto;
      display: none;
      text-align: center;
      padding: 0;
  
  }
  
  .virada_pdf_jm {
      transform: rotateY(180deg);
  }
  
  .frente_pdf_jm, .verso_pdf_jm {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    padding: 7px;
    box-sizing: border-box;
    overflow-y: auto;
     border-radius: 3px;
    display: flex;
    align-items: center;
  }
  
  .verso_pdf_jm span{
  
      margin-left: auto;
      margin-right: auto;
      max-width: 100%;
  
  }
  
  .frente_pdf_jm {
  
      background-image: url('https://livro.online/wp-content/uploads/2022/02/LogoRegistroAlpha.svg');
      background-repeat: no-repeat;
      background-color: #444;
      background-position: center;
      background-size:contain;
  
  }
  
  .verso_pdf_jm {
      
  transform: rotateY(180deg);
   background-color: antiquewhite;
  }
  
  .verso_pdf_jm span {
  margin: auto;
  word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  @media only screen and (max-width: 500px) {
    .carta_pdf_jm {
      font-size: 0.6em;
    }
  }
  
  /* Estilo da scrollbar das cartas*/
  .verso_pdf_jm::-webkit-scrollbar {
    width: 5px; /* largura */
    height: 10px; /* altura */
  }
  
  /* Cor da barra de rolagem */
  .verso_pdf_jm::-webkit-scrollbar-thumb {
    background-color: #999;
  }
  
  /* Cor da alça da barra de rolagem */
  .verso_pdf_jm::-webkit-scrollbar-track {
    background-color: #fff;
  }
  
  .nome_pdf_jm {
      display:block;
      margin-right: 3px;
      text-align: right;
      width: 23vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .pontuacao_pdf_jm {display:inline-block;}
  
  
  .disponivel_pdf_jm {
      cursor: grabbing; /* Essa classe defini se podemos virar ou não uma carta. O código javascript leva ela em conta */
  }
  
  
  .tela_final_pdf_jm {
  
      position: absolute;
      display: none;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto; 
      width: 300px;
      height: 200px;
      box-sizing: border-box;
      padding: 5px 15px;
      color: #444;
      border-radius: 6px;
      box-shadow: 2px 1px 15px 7px #5c5f62;
      background-color: antiquewhite;
      font-weight: 500;
      text-shadow: none;
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
      z-index: 2000; 
  
  }
  
  .tela_final_pdf_jm button {
  
      border-radius: 6px;
      box-sizing: border-box;
      padding: 10px 15px;
      color: #fff;
      font-weight: bold;
      background-color: #f44336;
      cursor: pointer;
      border: none;
      margin: 10px;
  
  }
  
  .tela_final_pdf_jm button:hover {
      
  background-color: #ff6c61;
  }
  
  
  
  /********************************************* Jogo Percurso das Frações *******************************************/
  
  

  
  .btn_pf {
  
      background-color: #00c0ff;
      color: #fff;
      padding: 8px 10px;
      border: none;
      font-weight: bold;
      cursor: pointer;
      border-radius: 5px;
      display: block;
      margin: 8px auto;
  
  }
  
  .btn_pf:hover {
  
      background-color: #FFB400;
  
  }
  
  .jogo_ativo_pf {
  
   background-color: #d70f00;
  
  }
  
  .jogo_ativo_pf:hover {
  
      background-color: #e94d42;
  
  }
  
  
  #tela_inicial_pf {
  
      width: 100%;
      height: 100%;
      display: none;
      opacity: 0;
      transition: opacity 1s ease-in-out;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      color: #fff;
      background: rgb(177,206,52);
      background: linear-gradient(0deg, rgba(177,206,52,1) 1%, rgba(255,108,97,1) 50%);
      padding: 20px 3px;
      box-sizing: border-box;
      flex-wrap: wrap;
  
  }
  
  #tela_inicial_pf button {
      color: #fff;
  background-color: rgb(255, 108, 97);
  font-weight: bold;
  font-size: 1.3rem;
  border-radius: 5px;
  padding: 5px;
  cursor: pointer;
  border: none;
  }
  
  #tela_inicial_pf button:hover {
      background-color: rgb(255, 121, 111);
  }
  
  #numJogadores_pf {
  
      border: 1px #fff solid;
  background-color: #444;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  
  }
  
  #info_inicial_jogadores_pf {
  
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;
      margin: 25px 0;
  
  }
  
  
  .jogador_div_pf {
  
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 10px 3px;
      margin: 10px;
      border: #fff 1px solid;
      border-radius: 20px;
  
  }
  
  .jogador_div_pf div {
      margin: 3px 0 10px 0;
      font-weight: bold;;
  }
  
  .jogador_div_pf input {
      width: 85%;
  border: none;
  border-radius: 2px;
  
  }
  
  .jogador_div_pf span {
      font-size: 0.7rem;
      margin-top: 3px;
      margin-bottom: 10px;
  }
  
  #jogador_3_pf, #jogador_4_pf, #jogador_5_pf, #jogador_6_pf, #jogador_7_pf, #jogador_8_pf {
  
      display: none;
  
  }
  
  .peca_pf, .peca_amostra_pf {
    font-size: 25px;
    width: 23px;
    height: 28px;
    text-shadow: 0 1px 1px #fff;
    z-index: 10;
    color: #000;
  }
  
  .peca_pf {
      display: none;
  }
  
  
  .peao_solido_pf::before {
    content: "♟";
  }
  
  .bispo_solido_pf::before {
      content: "♝";
  }
  
  .cavalo_solido_pf::before {
      content: "♞";
  }
  
  .torre_solida_pf::before {
      content: "♜";
  }
  .peao_vazado_pf::before {
      content: "♙";
  }
  
  .bispo_vazado_pf::before {
      content: "♗";
  }
  
  .cavalo_vazado_pf::before {
      content: "♘";
  }
  
  .torre_vazada_pf::before {
      content: "♖";
  }
  
  #info_pf {
      display: none;
      justify-content: flex-start;
      align-items: center;
      background-color: #dfdfdf;
      border-radius: 5px;
      box-sizing: border-box;
      padding: 10px;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 40;
      box-shadow: 2px 2px 5px #777;
  }
  
  .som_pf {
  
      color: white;
      font-weight: bold;
      font-family: Arial, Helvetica, sans-serif;
      border-radius: 3px;
      margin: 3px;
      border: none;
      padding: 3px 5px;
      cursor: pointer;
      box-shadow: 2px 2px 1px #777;
  
  }
  
  .som_pf {
      background-color: #2196f3;
  
  }
  
  .som_pf:hover {
  
  background-color: #73bcf7;
  box-shadow: -2px -2px 1px #777;
  
  }
  
  
  .som_desativado_pf {
  background-color: #dfdfdf;
  }
  
  .vez_el_pf {
      margin: 3px 8px;
      color: #000;
  }
  
  @keyframes anim_pulsar_pf {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.9);
    }
    100% {
      transform: scale(1);
    }
  }
  
  .pulsar_pf {
      animation: anim_pulsar_pf 1s infinite;
  }
  
  
  .tabuleiro_pf{
  
      display: none;
      grid-template-columns: repeat(5, 1fr);
      box-sizing: border-box;
      background-color: cornflowerblue;
      padding: 70px 3px;
      border-radius: 3px;
      opacity: 0;
      transition: all .5s ease-in-out;
  
  }
  
  .tabuleiro_item_pf{
  
      
      min-height: 120px;
      min-width: 50px;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      justify-content: center;
  
  }
  
  .casa_pf {
  
      position: relative;
      border: 2px solid #fff;
      padding: 2px;
      text-align: center;
  
  }
  
  .numero_casa_pf {
  
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-weight: bold;
      font-size: 1.9rem;
  
  }
  
  #c_34_pf {
  
      background: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),
                  linear-gradient(-45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);
      background-size: 20px 20px;
      background-color: #999;
  
  }
  
  
  #janela_definicao_ordem_pf, #janela_de_jogadas_pf {
  
      position: fixed;
      display: none;
      margin: 20px auto 35px auto;
      box-sizing: border-box;
      padding: 40px;
      max-width: 800px;
      min-width: 275px;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 91%;
      max-height: 90vh;
      height: 650px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #444;
      color: #fff;
      box-shadow: 2px 2px 5px #777;
      z-index: 50;
      overflow: auto;
      border-radius: 10px;
      transition: opacity 0.7s ease-in-out;
  
  }

  #janela_definicao_ordem_pf h3 {
      color: #fff;
  }
  
  .el_pergunta_pf {
  
      width: 95%;
      box-sizing: border-box;
      padding: 2px 10px 15px 10px;
      margin: 30px auto;
      background-color: antiquewhite;
      border-radius: 3px;
      color: #444;
      font-weight: 300;
  
  }
  
  .numerador_pf, .denominador_pf, .el_resp_pf {
  
      border: 1px solid #444;
      background-color: #fff;
      cursor: text;
      width: 60px;
      text-align: center;
      margin: 0 27px;
  
  }
  
  .bt_responder_pf {
  
      border: none;
      background-color: rgb(4, 189, 236);
      color: #fff;
      border-radius: 3px;
      cursor: pointer;
      font-weight: bold;
      padding: 5px 15px;
      font-size: small;
  
  }
  
  .bt_responder_pf:hover {
  
      background-color: rgb(65, 202, 236);
  
  
  }
  
  
  .msg_sorteio_ordem {
      padding: 10px;
      background-color: #73bcf7;
      border-radius: 5px;
      margin: 10px;
      transition: opacity .3s ease-in-out;
  }
  
  
  .dado_pf-container {
    perspective: 800px;
    width: 210px;
    height: 210px;
    margin: auto;
    position: relative;
  }
  
  .dado_pf {
    width: 100px;
    height: 100px;
    position: relative;
    top: 20px;
    left: 5px;
    transform-style: preserve-3d;
    transition: transform 1s ease-in-out;
    transform: rotateX(-14deg) rotateY(195deg) rotateZ(-30deg);
    cursor: grab;
  }
  
  .dado_pf-face {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid #eae7dd;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    font-size: 24px;
    border-radius: 5px;
    box-shadow: 0 0 3px 1px #ece4d9;
    color:#000;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.95);
    background: rgb(242,237,219);
  background: linear-gradient(78deg, rgba(242,237,219,1) 27%, rgba(223,218,201,1) 64%);
  }
  
  .dado_pf-face div.linha {
      width: 100%;
      text-align: center;
      display: flex;
      justify-content: center;
  }
  
  div.linha div {
  
      width: 100%;
  
  }
  
  .front {
    transform: translateZ(50px);
  }
  
  .back {
    transform: translateZ(-50px) rotateY(180deg);
  }
  
  .right {
    transform: translateX(50px) rotateY(90deg);
  }
  
  .left {
    transform: translateX(-50px) rotateY(-90deg);
  }
  
  .top {
    transform: translateY(-50px) rotateX(90deg);
  }
  
  .bottom {
    transform: translateY(50px) rotateX(-90deg);
  }
  
  #rolar_dado_pf {
      margin: 30px 20px;
  }
  
  .mostrar_face_1 {
      transform: rotateX(2deg) rotateY(-5deg);
  }
  .mostrar_face_2 {
      transform: rotateX(-821deg) rotateY(715deg);
  }
  .mostrar_face_3 {
      transform: rotateX(-362deg) rotateY(-458deg);
  }
  .mostrar_face_4 {
      transform: rotateX(369deg) rotateY(444deg);
  }
  .mostrar_face_5 {
      transform: rotateX(813deg) rotateZ(-371deg);
  }
  .mostrar_face_6 {
      transform: rotateX(1623deg) rotateY(1448deg);
  }
  
  
  
  .dado_8_pf-container {
    perspective: 400px;
    width: 210px;
    height: 210px;
    margin: auto;
    position: relative;
  }
  
  .dado_8_pf {
    width: 100px;
    height: 200px;
    position: relative;
    top: 20px;
    left: 5px;
    transform-style: preserve-3d;
    transition: transform 1s ease-in-out;
    transform: rotateX(-14deg) rotateY(228deg);
    cursor: grab;
  }
  
  .dado_8_pf-face {
      width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid #F0AB01; /* Cor e tamanho do triângulo */
        position: absolute;
    font-size: 24px;
    border-radius: 6px;
    
  }
  
  .dado_8_pf-face span {
      text-shadow: 0px 1px 3px rgb(0 0 0 / 95%);
      color: #fff;
      font-weight: bold;
      position: absolute;
        top: 65px;
        left: -8px;
        transform: translate(-50%, -50%);
        text-align: center;
        width: 100%; /* Definindo a largura do texto para ocupar todo o espaço */
        line-height: 100px;
       
  }
  
  .superior_pf, .inferior_pf {
      transform-style: preserve-3d;  
  }
  
  .inferior_pf {
      transform-origin: center center;
      transform: rotateX(180deg) translateY(-200px) translateZ(100px);
  }
  
  .face_1_d8, .face_2_d8 {
      transform-origin: center bottom;
      transform: rotateX(30deg);
  }
  
  .face_3_d8, .face_8_d8 {
      transform-origin: right bottom;
      transform: translateZ(-100px) rotateY(90deg) rotateX(30deg);
  }
  
  .face_4_d8, .face_7_d8 {
      transform-origin: left bottom;
      transform: translateZ(-100px) rotateY(-90deg) rotateX(30deg);
  
  }
  
  .face_5_d8, .face_6_d8 {
      transform-origin: center bottom;
      transform: translateZ(-100px) rotateY(180deg) rotateX(30deg);
  }
  
  
  #rolar_dado_8_pf {
      margin: 30px 20px;
  }
  
  .mostrar_face_1_d8{
      transform: rotateX(0deg) rotateY(-2deg);
  }
  .mostrar_face_2_d8 {
      transform: rotateX(162deg) rotateY(7deg);
  }
  .mostrar_face_3_d8 {
      transform: rotateX(463deg) rotateY(442deg) rotateZ(404deg);
  }
  .mostrar_face_4_d8 {
      transform: rotateX(369deg) rotateY(444deg);
  }
  .mostrar_face_5_d8 {
      transform: rotateX(1242deg) rotateY(338deg) rotateZ(1292deg);
  }
  .mostrar_face_6_d8 {
      transform: rotateX(888deg) rotateY(903deg) rotateZ(755deg);
  }
  .mostrar_face_7_d8 {
      transform: rotateX(2505deg) rotateY(2428deg) rotateZ(2719deg);
  }
  .mostrar_face_8_d8 {
      transform: rotateX(1898deg) rotateY(1724deg) rotateZ(1550deg);
  }
  
  
  
  
  /************************************************* FIM Jogo Percurso das Frações **************************************/
  
  
  
  /********************************************* Jogo Card das Frações *******************************************/
  
  
  .botao-jogo-cf {
          background-color: #00c0ff;
          color: #fff;
          padding: 8px 10px;
          border: none;
          font-weight: bold;
          cursor: pointer;
          border-radius: 5px;
          margin: 8px auto;
          display: block;
      }
  
      .botao-jogo-cf:hover {
  
          background-color: #FFB400;
  
      }
  
      .btn_ativo_cf {
  
          background-color: #d70f00;
  
      }
  
      .btn_ativo_cf:hover {
  
          background-color: #e94d42;
  
      }
  
      #container_cf {
        
          background-color: #61d2ff;
          box-sizing: border-box;
          padding: 10px;
          width: 100%;
          border-radius: 5px;
          margin-bottom: 20px;
      }
  
      
      .bt_pular_cf, .bt_corrigir_cf, .falar_el_cf, .som_el_cf {
  
          color: #2a90ea;
          border: none;
          border-radius: 5px;
          font-size: 25px;
          width: 50px;
          font-weight: bold;
          cursor: pointer;
          padding: 5px;
          box-sizing: border-box;
  
      }
  
      .bt_pular_cf:hover, .bt_corrigir_cf:hover, .falar_el_cf:hover, .som_el_cf:hover {
          background-color: #73bcf7;
      }
  
  
      .bt_desativado_cf, .bt_desativado_cf:hover {
          background-color: rgba(0, 0, 0, 0);
          color: #999;
          cursor: auto;
      }
  
      .som_desativado_cf {
  background-color: rgba(0, 0, 0, 0);
  }
  
  
      @keyframes deslizarParaEsquerda_anim_cf {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-110%);
    }
  }
  
  @keyframes deslizarParaDireita_anim_cf {
    0% {
      transform: translateX(-110%);
    }
    100% {
      transform: translateX(0%);
    }
  }
  
      .deslizarParaEsquerda_cf {
  
          animation: deslizarParaEsquerda_anim_cf 0.7s ease-in-out forwards;
  
      }
  
      .deslizarParaDireita_cf {
  
          animation: deslizarParaDireita_anim_cf 0.7s ease-in-out forwards;
  
      }
  
  
      #container_jogo_cf {
  
          display: none;
          box-sizing: border-box;
  
      }
  
  
  
      .container_tela_inicial_cf {
    text-align: center;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    background: rgb(97,210,255);
  background: linear-gradient(0deg, rgba(97,210,255,1) 14%, rgba(255,108,97,1) 80%);
  color: #fff;
  padding: 25px 10px;
  }
  
  .container_tela_inicial_cf  h2 {
    margin-bottom: 20px;
  }
  
  .grupo_cf {
    margin-bottom: 20px;
  }
  
  .grupo_cf > div {
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  .container_tela_inicial_cf input[type="text"] {
    padding: 5px;
    width: 200px;
    border-radius: 5px;
  }
  
  button.bt_iniciar_cf {
    background-color: green;
    color: white;
    padding: 10px 20px;
    border: none;
    font-weight: bolder;
    border-radius: 5px;
    cursor: pointer;
  }
  
  button.bt_iniciar_cf:hover{
      
      background-color: rgb(25, 172, 25);
  
  }
  
  
  
      .trilha_dos_cards_cf{
  
          overflow: hidden;
          padding: 10px;
          box-sizing: border-box;
          display: flex;
          gap: 20px;
  
      }
  
  
      .card_papel_cf {
        
        box-sizing: border-box;
        background-color: transparent;
        perspective: 5000px;
        width: 100%;
        max-width: 767px;
        flex: 0 0 auto;
  
      }
  
      .card_interior_cf {
  
          position: relative;
          border: none;
          padding: 0;
          font-family: Arial, sans-serif;
          width: 100%;
          height: 100%;
          border-radius: 2px;
          background-color: #f2f2f2;
          box-shadow: 2px 2px 5px #999;
          box-sizing: border-box;
          transition: transform 0.6s;
          transform-style: preserve-3d;
  
      }
  
      .container_linhas_cf {
  
          position: relative;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          padding-top: 40px;
          padding-bottom: 10px;
  
      }
  
  
      .linha_cf {
        width: 100%;
        height: 20px;
        background-image: repeating-linear-gradient(to bottom, transparent, transparent 10px, #2390f7 10px, #2377f5 11px);
        background-size: 100% 20px;
        margin-bottom: 10px;
        opacity: 0.13;
        transition: opacity .6s;
      }
  
      .primeira-linha_cf {
  
          background-image: repeating-linear-gradient(to bottom, transparent, transparent 10px, #f33535 10px, #e01414 11px);
  
      }
  
      .papel_overlay_cf {
  
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0.13;
          background-color: aliceblue;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
  
      }
  
      .card_papel_cf.virado_cf .card_interior_cf {
          transform: rotateY(180deg);
      }
  
      .card_papel_cf.virado_cf  .linha_cf{
          opacity: 0.1;
      }
  
      .frente_cf, .verso_cf {
  
          position: absolute;
          font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
          display: flex;
          align-items: center;
          flex-direction: column;
          padding: 15px;
          font-size: 1.3rem;
          transform-style: preserve-3d;
          overflow: auto;
  
      }
  
      .verso_cf {transform: rotateY(180deg);}
  
     .numerador_cf, .denominador_cf {
  
          border: 1px solid #777;
          background-color: #fff;
          cursor: text;
          width: 60px;
          text-align: center;
          margin: 0 27px;
  
     }
  
  
  /********************************************* FIM Jogo Card das Frações *******************************************/