/* Importação de fontes para usar no projeto */
    @font-face {
      font-family: 'mark-pro-bold';
      font-weight: normal;
      font-style: normal;
      font-display: swap;
      src: url('https://cdn.rugidodoleao.com.br/mark-pro-bold.woff') format('woff');
    }
    @font-face {
      font-family: 'mark-pro-regular';
      font-weight: normal;
      font-style: normal;
      font-display: swap;
      src: url('https://cdn.rugidodoleao.com.br/mark-pro-regular.woff') format('woff');
    }
    /* Animações que existem nesse site */
    @keyframes rodando {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    /* 
    Esse é um arquivo CSS para normalizar o seu site em todos os navegadores
    como se fosse uma configuração padrão 
    */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
      text-decoration: none;
    }
    html {
      font-family: var(--regular);
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      -webkit-tap-highlight-color: transparent;
      background-color: var(--cor-preto);
      scroll-behavior: smooth;
    }
    body {
      margin: 0;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      background-color: var(--cor-preto);
      scroll-behavior: smooth;
    }
    ::selection {
      color: var(--cor-branco);
      background-color: var(--cor-preto);
    }
    a,img,svg,button {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -khtml-user-select: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0.0);
      -webkit-text-size-adjust: none;
      -webkit-touch-callout: none;
      -o-user-select: none;
    }
    a {
      background-color: transparent;
      cursor: pointer;
    }
    img {
      border-style: none;
    }
    button {
      font-family: inherit;
      line-height: 1;
      margin: 0;
      -moz-appearance: none !important;
      -webkit-appearance: button;
      text-transform: none;
      overflow: visible;
      cursor: pointer;
    }
    button * {
      pointer-events: none;
    }
    input {
      font-family: inherit;
      line-height: 1;
      -moz-appearance: none !important;
      overflow: visible;
    }
    textarea {
      font-family: inherit;
      line-height: 1;
      -moz-appearance: none !important;
      overflow: auto;
    }
    [type="button"] {
      -webkit-appearance: button;
    }
    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner {
      border-style: none;
    }
    [hidden] {
      display: none;
      opacity: 0;
      visibility: hidden;
    }
    /* Personaliza a cor do scroll da página */
    html {
      scrollbar-color: var(--cor-preto) var(--cor-principal);
      scrollbar-width: thin;
    }
    ::-webkit-scrollbar-track {
      background-color: var(--cor-preto);
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: var(--cor-principal);
      width: 6px;
      height: 6px;
      border-radius: 10px;
    }
    /* Essas são as variáveis para usar no site e ficar mais escalável a edição das coisas */
    :root {

    /* Variáveis de Cores */
    --cor-branco: #FFFFFF;
    --cor-preto: #1d1d1f;
    --cor-principal: #6F0B0D;
    --cor-cinza-claro: #e3e4ed;

    /* Para inverter cor dos icones */
    .invert { filter: invert(100%); }

    /* Variáveis de Fontes */
    --regular: 'mark-pro-regular';
    --bold: 'mark-pro-bold';
    }
    /* <section class="apresentacao"> */
      section.apresentacao {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      width: 100%;
      padding: 20px;
      position: relative;
      overflow: hidden;
    }
    /* <div class="faixa"> */
    section.apresentacao .faixa {
      width: 2000px;
      height: 500px;
      background-color: var(--cor-principal);
      box-shadow: 0 0 50px 0 var(--cor-principal);
      position: absolute;
      z-index: 1;
      animation: rodandofaixa 10s linear infinite;
    }
    /* Animação que faz a faixa girar */
    @keyframes rodandofaixa {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    /* <div class="conteudo"> */
    section.apresentacao .conteudo {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 100vh;
      background: linear-gradient(0deg, var(--cor-branco), var(--cor-cinza-claro));
      background: -webkit-linear-gradient(0deg, var(--cor-branco), var(--cor-cinza-claro));
      border-radius: 10px;
      padding: 60px 20px;
      position: relative;
      overflow: hidden;
      z-index: 2;
    }
    /* <div class="blush"> */
    section.apresentacao .conteudo .blush {
      width: 1000px;
      height: 1000px;
      background: radial-gradient(var(--cor-principal) 0%, transparent 50%);
      background: -webkit-radial-gradient(var(--cor-principal) 0%, transparent 50%);
      opacity: 0.3;
      border-radius: 50%;
      position: absolute;
      top: -500px;
      z-index: 3;
      animation: piscandoblush 2s linear infinite;
    }
    /* Animação que faz a linha girar */
    @keyframes piscandoblush {
      0% {
        opacity: 0.3;
      }
      50% {
        opacity: 0.1;
      }
      100% {
        opacity: 0.3;
      }
    }
    /* <div class="foto"> */
    section.apresentacao .conteudo .foto {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 4;
    }
    /* <div class="linha"> */
    section.apresentacao .conteudo .foto .linha {
      width: 220px;
      height: 220px;
      border: 2px solid var(--cor-principal);
      border-top: 2px solid transparent;
      border-bottom: 2px solid transparent;
      position: absolute;
      border-radius: 50%;
      animation: rodandolinha 10s linear infinite;
    }
    /* Animação que faz a linha girar */
    @keyframes rodandolinha {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    /* imagem da <div class="foto"> */
    section.apresentacao .conteudo .foto img {
      width: 100%;
      max-width: 200px;
      border-radius: 50%;
    }
    /* <div class="informacao"> */
    section.apresentacao .conteudo .informacao {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      width: 100%;
      max-width: 300px;
      z-index: 4;
      margin: 30px 0 10px 0;
    }
    section.apresentacao .conteudo .informacao h2 {
      font-family: var(--bold);
      font-size: 1.2rem;
      color: var(--cor-principal);
    }
    section.apresentacao .conteudo .informacao p {
      font-family: var(--regular);
      font-size: 0.9rem;
      color: var(--cor-preto);
      line-height: 1.5;
      margin: 5px 0 0 0;
    }
    /* <div class="links"> */
    section.apresentacao .conteudo .links {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 400px;
      z-index: 4;
    }
    /* Link da <div class="links"> */
    section.apresentacao .conteudo .links a {
      display: flex;
      align-items: center;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.05);
      border-radius: 10px;
      margin: 10px 0 0 0;
      transition: all 0.3s;
    }
    section.apresentacao .conteudo .links a:hover {
      background-color: rgba(0, 0, 0, 0.1);
    }
    section.apresentacao .conteudo .links a:hover .icone img {
      transform: scale(1.2);
    }
    section.apresentacao .conteudo .links a .icone {
      padding: 15px;
      height: 100%;
      background-color: var(--cor-principal);
      border-radius: 10px 0 0 10px;
    }

    section.apresentacao .conteudo .links a .icone_2 {
      padding: 15px;
      height: 100%;
      border-radius: 10px 0 0 10px;
    }
    section.apresentacao .conteudo .links a .icone_2 img {
      max-width: 35px;
      transition: all 0.3s;
    }
    section.apresentacao .conteudo .links a .icone img {
      width: 100%;
      max-width: 35px;
      transition: all 0.3s;
    }
    section.apresentacao .conteudo .links a .texto {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 20px;
    }
    section.apresentacao .conteudo .links a .texto h3 {
      font-family: var(--bold);
      font-size: 1rem;
      color: var(--cor-preto);
    }

    section.apresentacao .conteudo .links a .texto .h3_2 {
      font-family: var(--bold);
      font-size: 0.8rem!important;
      color: var(--cor-preto);
    }

    section.apresentacao .conteudo .links a .texto p {
      font-family: var(--regular);
      font-size: 0.8rem;
      color: var(--cor-preto);
      opacity: 0.5;
      margin: 5px 0 0 0;
    }
    /* Link destacado da <div class="links"> */
    section.apresentacao .conteudo .links a.destaque {
      padding: 0;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    section.apresentacao .conteudo .links a.destaque2 {
      padding: 0;
      background-color: #ffffff00;
      padding-top: 10px;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    section.apresentacao .conteudo .links a.destaque .texto {
      padding: 20px;
      align-items: center;
      text-align: center;
    }
    section.apresentacao .conteudo .links a.destaque h4 {
      font-family: var(--bold);
      font-size: 0.8rem;
      color: var(--cor-branco);
      background-color: var(--cor-principal);
      width: 100%;
      padding: 10px;
      border-radius: 10px 10px 10px 10px;
      transition: all 0.3s;
    }
    /* Responsivo */
    @media screen and (max-width: 1000px) {
      /* <section class="apresentacao"> */
      section.apresentacao {
        padding: 10px;
      }
      /* <div class="faixa"> */
      section.apresentacao .faixa {
        height: 200px;
      }
      /* <div class="conteudo"> */
      section.apresentacao .conteudo {
        padding: 50px 20px;
      }
      /* <div class="linha"> */
      section.apresentacao .conteudo .foto .linha {
        width: 170px;
        height: 170px;
      }
      /* imagem da <div class="foto"> */
      section.apresentacao .conteudo .foto img {
        max-width: 150px;
      }
      /* Link da <div class="links"> */
      section.apresentacao .conteudo .links a .icone img {
        max-width: 30px;
      }
      section.apresentacao .conteudo .links a .texto {
        padding: 15px;
      }
    }

    .qrcode-btn {
        line-height: 12px;
        width: 18px;
        margin-top: 30px;
        margin-right: 40px;
        position:absolute;
        top:0;
        right:0;
       }
       .share-btn {
        line-height: 12px;
        width: 18px;
        margin-top: 30px;
        margin-left: 30px;
        position:absolute;
        top:0;
        left:0;
       }
       .share .buttons {
         font-family: var(--bold);
         font-size: 15px;
       }
   
       .btn-text {
         color: var(--cor-preto);
         margin-top: 10px;
       }

       .card-list {
        padding-top: 10px;
        padding-bottom: 10px;
        width: 100%;
        max-width: 400px;
      }
      .card-list .card-image img {
        max-width: 100%;
        display: block;
      }
      
      .card {
        background-color: var(--cor-cinza-claro);
        border-radius: 15px;
        overflow: hidden;
        padding: 1.25rem;
        position: relative;
        transition: .15s ease-in;
      }
      
      .card-image {
        border-radius: 10px;
        overflow: hidden;
      }
      
      .card-header {
        margin-top: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        a {
          background-color: #00000000!important;
          text-align: center;
          font-weight: 600;
          font-size: 1.375rem;
          line-height: 1.25;
          padding-right: 1rem;
          text-decoration: none;
          color: inherit;
          will-change: transform;
          &:after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
          }
        }
        
        
      }
      
      .icon-button {
        border: 0;
        background-color: #fff;
        border-radius: 50%;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        font-size: 1.25rem;
        transition: .25s ease;
        box-shadow: 0 0 0 1px rgba(#000, .05), 0 3px 8px 0 rgba(#000, .15);
        z-index: 1;
        cursor: pointer;
        color: #565656;
        
        svg {
          width: 1em;
          height: 1em;
        }
        &:hover, &:focus {
          background-color: #EC4646;
          color: #FFF;
        }
      }
      
      .card-footer {
        margin-top: 1.25rem;
        border-top: 1px solid var(--cor-principal);
        padding-top: 1.25rem;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }
      
      .card-meta {	
        display: flex;
        align-items: center;
        color: var(--cor-preto);

        svg {
          flex-shrink: 0;
          width: 1em;
          height: 1em;
          margin-right: .25em;
        }
        img {
          flex-shrink: 0;
          width: 1em;
          height: 1em;
          margin-right: .25em;
        }
      }