@charset "UTF-8";

/*
 * ---------------------------------------------------------------------------*
 *                                                                            *
 *                                                                            *
 *  ######## ########   ######## ######## ######## ######  ##       ########  *
 *  ##       ##         ##       ##          ##      ##    ##       ##    ##  *
 *  #####    ##  ####   ######   ########    ##      ##    ##       ##    ##  *
 *  ##       ##    ##   ##             ##    ##      ##    ##       ##    ##  *
 *  ##       ########   #######  ########    ##     ###### ######## ########  * 
 *                                                      por FELIPE GONÇALVES  *
 *                                                                            *
 * ---------------------------------------------------------------------------*
 *                                                                            *
 *   FG ESTILO //  Versão 3.0                                                 *
 *   Autor: Felipe Gonçalves - https://felipegoncalves.com                    *
 *                                                                            *
 *   Sobre: Comandos de estilo CSS em português (pt-br), para facilitar       *
 *   a estilização de páginas web. Ideal para quem estar iniciando uma        *
 *   framework de estilo, ajudando a memorizar as tags de estilos. Pode ser   *
 *   utilizado com outros Frameworks como Bootstrap, por exemplo, sem         *
 *   conflitos de estilização.                                                *
 *                                                                            *
 * ---------------------------------------------------------------------------*
 *                                                                            *
 *   © 2024.                                                                  *
 *   Todos os direitos reservados à Felipe Gonçalves                          *
 *                                                                            *
 * ---------------------------------------------------------------------------*
*/

/* 
  Fonte padrão geral - Open Sans
*/
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
/*
 Fonte padrões do fgestilo - Jost e Unbounded 
 */
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Unbounded:wght@200..900&display=swap");

/**
 * Prédefinição de valores de estilização
 */
:root {
  /* Configurações de Fontes */
  --f-principal: "Open Sans", sans-serif;

  --f-10: 10px !important;
  --f-12: 12px !important;
  --f-14: 14px !important;
  --f-16: 16px !important;
  --f-18: 18px !important;
  --f-20: 20px !important;
  --f-24: 24px !important;
  --f-26: 26px !important;
  --f-28: 28px !important;
  --f-30: 30px !important;
  --f-32: 32px !important;
  --f-34: 34px !important;
  --f-36: 36px !important;
  --f-38: 38px !important;
  --f-40: 40px !important;
  --f-42: 42px !important;
  --f-44: 44px !important;
  --f-46: 46px !important;
  --f-48: 48px !important;
  --f-50: 50px !important;

  /* Configurações de cores */
  /* Sem cor */
  --sem-cor: transparent !important;

  /*************************************************

CONVERTER AS CORES EM RGBA

**************************************************/

  /* tons de cinza do preto ao branco */
  --preto: rgb(32, 32, 32) !important;
  --cinza: rgb(128, 128, 128) !important;
  --cinza-1: rgb(33, 37, 41) !important;
  --cinza-2: rgb(52, 58, 64) !important;
  --cinza-3: rgb(73, 80, 87) !important;
  --cinza-4: rgb(108, 117, 125) !important;
  --cinza-5: rgb(173, 181, 189) !important;
  --cinza-6: rgb(206, 212, 218) !important;
  --cinza-7: rgb(222, 226, 230) !important;
  --cinza-8: rgb(233, 236, 239) !important;
  --cinza-9: rgb(248, 249, 250) !important;
  --branco: rgb(255, 255, 255) !important;

  /* Outras cores */
  --azul: rgb(13, 110, 253) !important;
  --roxo: rgb(111, 66, 193) !important;
  --rosa: #d63384 !important;
  --vermelho: #dc3545 !important;
  --laranja: #fd7e14 !important;
  --amarelo: #ffc107 !important;
  --verde: #198754 !important;
  --ciano: #0dcaf0 !important;

  /* 
  * Configuração do fg estilo - Cores e fontes da marca
  */
  /* Fontes */
  --fg-f-principal: "Jost", sans-serif;
  --fg-f-secundaria: "Unbounded", sans-serif;

  /* Cores */
  --fg-cinza: #7f7f7f;
  --fg-laranja: #ff8f43;
  --fg-roxo: #9838da;
  --fg-ciano: #2dc8c4;
}

/* Configurações de tags */
* {
  margin: 0px;
  padding: 0px;
}

/* Links */
a {
  text-decoration: none !important;

  &:hover {
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s linear !important;
  }
}

/* Tags padrões gerais */
header,
footer,
section {
  width: 100%;
}

/*
  * ----------------------------------------------------------------------------*  
  *                                                                             *
  *  (!) IMPORTANTE!                                                            *
  *  --                                                                         *
  *  Para que o FGESTILO funcione corretamente, utilize na tag BODY ou HTML     *
  *  uma das classes: 'fgestilo', 'fg-estilo' ou 'fg_estilo'.                   *
  *                                                                             *
  * ----------------------------------------------------------------------------*
  */
.fgestilo,
.fg-estilo,
.fg_estilo {
  /*
  * ----------------------------------------------------------------------------*  
  *                                                                             *
  *  FONTES                                                                     *
  *  --                                                                         *
  *  Utilize o prefixo 'f-', 'f_', 'fonte-' ou 'fonte_' e em seguida a palavre  *
  *  'principal' para aplicar a fonte no site. Você também pode configurar a    *
  *  sua fonte importando do Google Fonts.                                      *
  *                                                                             *
  *  Caso queira usar as fontes padrões do FGESTILO, use os prefixos:           *
  *  'fg-p-' ou 'fg_f_' e em seguida 'principal' ou 'secundaria'.                *
  *                                                                             *
  * ----------------------------------------------------------------------------*
  */
  & .f-principal,
  & .f_principal,
  & .fonte-principal,
  & .fonte_principal {
    font-family: var(--f-principal);
  }

  & .fg-f-principal,
  & .fg_f_principal {
    font-family: var(--fg-f-principal);
  }

  & .fg-f-secundaria,
  & .fg_f_secundaria {
    font-family: var(--fg-f-secundaria);
  }

  /*
  * ----------------------------------------------------------------------------*  
  *                                                                             *
  *  TAMANHO DE FONTES                                                          *
  *  --                                                                         *
  *  Utilize o prefixo 'f-', 'f_', 'fonte-' ou 'fonte_' e em seguida o número   *
  *  do tamanho da fonte. Os valores dos tamanhos de fontes são multplos de 2,  *
  *  ou seja, são de 2 em 2, e vão de 10 a 50.                                  *
  *  Ex.: f-10, f-12, f-14, f-16 ... f-50.                                      *
  *                                                                             *
  * ----------------------------------------------------------------------------*
  */
  & .f-10,
  & .f_10,
  & .fonte-10,
  & .fonte_10 {
    font-size: var(--f-10) !important;
  }

  & .f-11,
  & .f_11,
  & .fonte-11,
  & .fonte_11 {
    font-size: var(--f-11) !important;
  }

  & .f-12,
  & .f_12,
  & .fonte-12,
  & .fonte_12 {
    font-size: var(--f-12) !important;
  }

  & .f-14,
  & .f_14,
  & .fonte_14,
  & .fonte-14 {
    font-size: var(--f-14) !important;
  }

  & .f-16,
  & .f_16,
  & .fonte_16,
  & .fonte-16 {
    font-size: var(--f-16) !important;
  }

  & .f-18,
  & .f_18,
  & .fonte_18,
  & .fonte-18 {
    font-size: var(--f-18) !important;
  }

  & .f-20,
  & .f_20,
  & .fonte_20,
  & .fonte-20 {
    font-size: var(--f-20) !important;
  }

  & .f-22,
  & .f_22,
  & .fonte_22,
  & .fonte-22 {
    font-size: var(--f-22) !important;
  }

  & .f-24,
  & .f_24,
  & .fonte_24,
  & .fonte-24 {
    font-size: var(--f-24) !important;
  }

  & .f-26,
  & .f_16,
  & .fonte_16,
  & .fonte-26 {
    font-size: var(--f-26) !important;
  }

  & .f-28,
  & .f_28,
  & .fonte_28,
  & .fonte-28 {
    font-size: var(--f-28) !important;
  }

  & .f-30,
  & .f_30,
  & .fonte_30,
  & .fonte-30 {
    font-size: var(--f-30) !important;
  }

  & .f-32,
  & .f_32,
  & .fonte_32,
  & .fonte-32 {
    font-size: var(--f-32) !important;
  }

  & .f-34,
  & .f_34,
  & .fonte_34,
  & .fonte-34 {
    font-size: var(--f-34) !important;
  }

  & .f-36,
  & .f_36,
  & .fonte_36,
  & .fonte-36 {
    font-size: var(--f-36) !important;
  }

  & .f-38,
  & .f_38,
  & .fonte_38,
  & .fonte-38 {
    font-size: var(--f-38) !important;
  }

  & .f-40,
  & .f_40,
  & .fonte_40,
  & .fonte-40 {
    font-size: var(--f-40) !important;
  }

  & .f-42,
  & .f_42,
  & .fonte_42,
  & .fonte-42 {
    font-size: var(--f-42) !important;
  }

  & .f-44,
  & .f_44,
  & .fonte_44,
  & .fonte-44 {
    font-size: var(--f-44) !important;
  }

  & .f-46,
  & .f_46,
  & .fonte_46,
  & .fonte-46 {
    font-size: var(--f-46) !important;
  }

  & .f-48,
  & .f_48,
  & .fonte_48,
  & .fonte-48 {
    font-size: var(--f-48) !important;
  }

  & .f-50,
  & .f_50,
  & .fonte_50,
  & .fonte-50 {
    font-size: var(--f-50) !important;
  }

  /*
  * ----------------------------------------------------------------------------*  
  *                                                                             *
  *  ALINHAMENTO DE TEXTO                                                       *
  *  --                                                                         *
  *  Utilize o prefixo 'f-', 'f_', 'fonte-' ou 'fonte_' e em seguida a direção  *
  *  que você deseja.                                                           *
  *                                                                             *
  * ----------------------------------------------------------------------------*
  */
  & .esquerda,
  & .f-esquerda,
  & .f_esquerda,
  & .fonte-esquerda,
  & .fonte_esquerda {
    text-align: left !important;
  }

  & .direita,
  & .f-direita,
  & .f_direita,
  & .fonte-direita,
  & .fonte_direita {
    text-align: right !important;
  }

  & .centro,
  & .f-centro,
  & .f_centro,
  & .fonte-centro,
  & .fonte_centro {
    text-align: center !important;
  }

  & .justificado,
  & .f-justificado,
  & .f_justificado,
  & .fonte-justificado,
  & .fonte_justificado {
    text-align: justify !important;
  }

  /*
  * ----------------------------------------------------------------------------*  
  *                                                                             *
  *  ESTILO DAS FONTES                                                          *
  *  --                                                                         *
  *  Utilize o prefixo 'f-', 'f_', 'fonte-' ou 'fonte_' e o estilo da fonte     * 
  *  Ex: f-normal, f-negrito                                                    * 
  *                                                                             *
  * ----------------------------------------------------------------------------*
  */
  & .normal,
  & .fonte-normal,
  & .fonte_normal,
  & .f-normal,
  & .f_normal {
    font-weight: normal !important;
  }

  & .negrito,
  & .fonte-negrito,
  & .fonte_negrito,
  & .f-negrito,
  & .f_negrito {
    font-weight: bold !important;
  }

  & .italico,
  & .fonte-italico,
  & .fonte_italico,
  & .f-italico,
  & .f_italico {
    font-style: italic !important;
  }

  & .obliquo,
  & .fonte-obliquo,
  & .fonte_obliquo,
  & .f-obliquo,
  & .f_obliquo {
    font-style: oblique !important;
  }

  & .riscado,
  & .fonte-riscado,
  & .fonte_riscado,
  & .f-riscado,
  & .f_riscado {
    text-decoration: line-through !important;
  }

  & .sublinhado,
  & .fonte-sublinhado,
  & .fonte_sublinhado,
  & .f-sublinhado,
  & .f_sublihado {
    text-decoration: underline !important;
  }

  /* Transformação */
  & .maiusculo,
  & .fonte-maiusculo,
  & .fonte_maiusculo,
  & .f-maiusculo,
  & .f_maiusculo {
    text-transform: uppercase !important;
  }

  & .minusculo,
  & .fonte-minusculo,
  & .fonte_minusculo,
  & .f-minusculo,
  & .f_minusculo {
    text-transform: lowercase !important;
  }

  /*
  * ----------------------------------------------------------------------------*  
  *                                                                             *
  *  PESO DAS FONTES                                                            *
  *  --                                                                         *
  *  Utilize o prefixo 'f-p', 'f_p', 'f-peso-' ou 'f-peso-' e a numeração do    * 
  *  peso da fonte. Ex: f-p-5 para adicionar o peso de 500 a sua fonte.         * 
  *  IMPORTANTE: Antes de suar essa propriedade, certifique-se se sua fonte     *
  *  possue a variação de peso de fonte.                                        *
  *                                                                             *
  * ----------------------------------------------------------------------------*
  */
  & .f-peso-3,
  & .f_peso_3,
  & .f-p-3,
  & .f_p_3 {
    font-weight: 300;
  }

  & .f-peso-4,
  & .f_peso_4,
  & .f-p-4,
  & .f_p_4 {
    font-weight: 400;
  }

  & .f-peso-5,
  & .f_peso_5,
  & .f-p-5,
  & .f_p_5 {
    font-weight: 500;
  }

  & .f-peso-6,
  & .f_peso_6,
  & .f-p-6,
  & .f_p_6 {
    font-weight: 600;
  }

  & .f-peso-7,
  & .f_peso_7,
  & .f-p-7,
  & .f_p_7 {
    font-weight: 700;
  }

  & .f-peso-8,
  & .f_peso_8,
  & .f-p-8,
  & .f_p_8 {
    font-weight: 800;
  }

  & .f-peso-9,
  & .f_peso_9,
  & .f-p-9,
  & .f_p_9 {
    font-weight: 900;
  }

  /*
  * ----------------------------------------------------------------------------*  
  *                                                                             *
  *  CORES BÁSICAS                                                              *
  *  --                                                                         *
  *  Utilize o prefixo 'cor-', 'cor_', 'c-' ou 'c_' e a cor que você deseja.    * 
  *  Ex: azul, roxo, rosa, vermelho, laranja, amarelo, verde, preto, cinza na   *
  *  escala de 1 a 7, e branco                                                  * 
  *                                                                             *
  * ----------------------------------------------------------------------------*
  */
  & .azul,
  & .cor-azul,
  & .cor_azul,
  & .c-azul,
  & .c_azul {
    color: var(--azul) !important;
  }

  & .roxo,
  & .cor-roxo,
  & .cor_roxo,
  & .c-roxo,
  & .c_roxo {
    color: var(--roxo) !important;
  }

  & .rosa,
  & .cor-rosa,
  & .cor_rosa,
  & .c-rosa,
  & .c_rosa {
    color: var(--rosa) !important;
  }

  & .vermelho,
  & .cor-vermelho,
  & .cor_vermelho,
  & .c-vermelho,
  & .c_vermelho {
    color: var(--vermelho) !important;
  }

  & .laranja,
  & .cor-laranja,
  & .cor_laranja,
  & .c-laranja,
  & .c_laranja {
    color: var(--laranja) !important;
  }

  & .amarelo,
  & .cor-amarelo,
  & .cor_amarelo,
  & .c-amarelo,
  & .c_amarelo {
    color: var(--amarelo) !important;
  }

  & .verde,
  & .cor-verde,
  & .cor_verde,
  & .c-verde,
  & .c_verde {
    color: var(--verde) !important;
  }

  & .preto,
  & .cor-preto,
  & .cor_preto,
  & .c-preto,
  & .c_preto {
    color: var(--preto) !important;
  }

  & .cinza,
  & .cor-cinza,
  & .cor_cinza,
  & .c-cinza,
  & .c_cinza {
    color: var(--cinza) !important;
  }

  & .cinza-1,
  & .cor-cinza-1,
  & .cor_cinza_1,
  & .c-cinza-1,
  & .c_cinza_1 {
    color: var(--cinza-1) !important;
  }

  & .cinza-2,
  & .cor-cinza-2,
  & .cor_cinza_2,
  & .c-cinza-2,
  & .c_cinza_2 {
    color: var(--cinza-2) !important;
  }

  & .cinza-3,
  & .cor-cinza-3,
  & .cor_cinza_3,
  & .c-cinza-3,
  & .c_cinza_3 {
    color: var(--cinza-3) !important;
  }

  & .cinza-4,
  & .cor-cinza-4,
  & .cor_cinza_4,
  & .c-cinza-4,
  & .c_cinza_4 {
    color: var(--cinza-4) !important;
  }

  & .cinza-5,
  & .cor-cinza-5,
  & .cor_cinza_5,
  & .c-cinza-5,
  & .c_cinza_5 {
    color: var(--cinza-5) !important;
  }

  & .cinza-6,
  & .cor-cinza-6,
  & .cor_cinza_6,
  & .c-cinza-6,
  & .c_cinza_6 {
    color: var(--cinza-6) !important;
  }

  & .cinza-7,
  & .cor-cinza-7,
  & .cor_cinza_7,
  & .c-cinza-7,
  & .c_cinza_7 {
    color: var(--cinza-7) !important;
  }

  & .cinza-8,
  & .cor-cinza-8,
  & .cor_cinza_8,
  & .c-cinza-8,
  & .c_cinza_8 {
    color: var(--cinza-8) !important;
  }

  & .cinza-9,
  & .cor-cinza-9,
  & .cor_cinza_9,
  & .c-cinza-9,
  & .c_cinza_9 {
    color: var(--cinza-9) !important;
  }

  & .branco,
  & .cor-branco,
  & .cor_branco,
  & .c-branco,
  & .c_branco {
    color: var(--branco) !important;
  }

  /* cores de fundo */
  & .fundo-transparente,
  & .fundo_transparente,
  & .f-transparente,
  & .f_transparente {
    background-color: var(--sem-cor) !important;
  }

  & .fundo-azul,
  & .fundo_azul,
  & .f-azul,
  & .f_azul {
    background-color: var(--azul) !important;
  }

  & .fundo-roxo,
  & .fundo_roxo,
  & .f-roxo,
  & .f_roxo {
    background-color: var(--roxo) !important;
  }

  & .fundo-rosa,
  & .fundo_rosa,
  & .f-rosa,
  & .f_rosa {
    background-color: var(--rosa) !important;
  }

  & .fundo-vermelho,
  & .fundo_vermelho,
  & .f-vermelho,
  & .f_vermelho {
    background-color: var(--vermelho) !important;
  }

  & .fundo-laranja,
  & .fundo_laranja,
  & .f-laranja,
  & f._laranja {
    background-color: var(--laranja) !important;
  }

  & .fundo-amarelo,
  & .fundo_amarelo,
  & .f-amarelo,
  & .f_amarelo {
    background-color: var(--amarelo) !important;
  }

  & .fundo-verde,
  & .fundo_verde,
  & .f-verde,
  & .f_verde {
    background-color: var(--verde) !important;
  }

  & .fundo-ciano,
  & .fundo_ciano,
  & .f-ciano,
  & .f_ciano {
    background-color: var(--ciano) !important;
  }

  & .fundo-preto,
  & .fundo_preto,
  & .f-preto,
  & .f_preto {
    background-color: var(--preto) !important;
  }

  & .fundo-cinza-1,
  & .fundo_cinza_1,
  & .f-cinza-1,
  & .f_cinza_1 {
    background-color: var(--cinza-1) !important;
  }

  & .fundo-cinza-2,
  & .fundo_cinza_2,
  & .f-cinza-2,
  & .f_cinza_2 {
    background-color: var(--cinza-2) !important;
  }

  & .fundo-cinza-3,
  & .fundo_cinza_3,
  & .f-cinza-3,
  & .f_cinza_3 {
    background-color: var(--cinza-3) !important;
  }

  & .fundo-cinza-4,
  & .fundo_cinza_4,
  & .f-cinza-4,
  & .f_cinza_4 {
    background-color: var(--cinza-4) !important;
  }

  & .fundo-cinza-5,
  & .fundo_cinza_5,
  & .f-cinza-5,
  & .f_cinza_5 {
    background-color: var(--cinza-5) !important;
  }

  & .fundo-cinza-6,
  & .fundo_cinza_6,
  & .f-cinza-6,
  & .f_cinza_6 {
    background-color: var(--cinza-6) !important;
  }

  & .fundo-cinza-7,
  & .fundo_cinza_7,
  & .f-cinza-7,
  & .f_cinza_7 {
    background-color: var(--cinza-7) !important;
  }

  & .fundo-cinza-8,
  & .fundo_cinza_8,
  & .f-cinza-8,
  & .f_cinza_8 {
    background-color: var(--cinza-8) !important;
  }

  & .fundo-cinza-9,
  & .fundo_cinza_9,
  & .f-cinza-9,
  & .f_cinza_9 {
    background-color: var(--cinza-9) !important;
  }

  & .fundo-branco,
  & .fundo_branco,
  & .f-branco,
  & .f_branco {
    background-color: var(--branco) !important;
  }

  /*
  * ----------------------------------------------------------------------------*  
  *                                                                             *
  *  BOTÃO                                                                      *
  *  --                                                                         *
  *  Utilize a palavra 'botao' para criar o estilo básico do botão              *
  *  peso da fonte.                                                             * 
  *                                                                             *
  * ----------------------------------------------------------------------------*
  */
  & .botao {
    padding: 6px 12px;
    font-size: var(--f-14);
    color: var(--cor-preto);
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;

    &:hover {
      background-color: var(--cor-cinza-200);
      color: var(--cor-preto);
    }
  }

  /*
    Tamamho do botão
  */
  & .botao-p,
  & .botao_p,
  & .botao_pequeno,
  & .botao-pequeno,
  & .b_pequeno,
  & .b-pequeno {
    font-size: small;
  }

  & .botao-m,
  & .botao_m,
  & .botao_medio,
  & .botao-medio,
  & .b_medio,
  & .b-medio {
    font-size: large;
  }

  & .botao-g,
  & .botao_g,
  & .botao_grande,
  & .botao-grande,
  & .b_grande,
  & .b-grande {
    font-size: xx-large;
  }

  & .botao-t,
  & .botao_t,
  & .botao_total,
  & .botao-total,
  & .b_total,
  & .b-total {
    width: 100% !important;
    padding: 12px 24px;
  }

  /*
  * ----------------------------------------------------------------------------*  
  *                                                                             *
  *  BOX                                                                        *
  *  --                                                                         *
  *  Utilize a palavra 'box' para criar o estilo básico da caixa de conteúdo.   *
  *                                                                             *
  * ----------------------------------------------------------------------------*
  */
  & .box {
    background-color: #fff;
    padding: 20px 30px;
    box-shadow: 0px 2px 8px #ededed;
  }

  & .box-redonda {
    border-radius: 15px;
  }

  /*
  * ----------------------------------------------------------------------------*  
  *                                                                             *
  *  ESPAÇAMENTO INTERNO                                                        *
  *  --                                                                         *
  *  Use o préfixo 'esp-int-' ou 'esp_int_' e depois o valor. Use 'esp-int'     *
  *  sem falor para adicionar o valor base, que é 4.                            *
  *                                                                             *
  *  Os valores são múltiplos de 4, e vão de 4 até 60                           *
  *                                                                             *
  * ----------------------------------------------------------------------------*
  */
  .esp-int,
  .esp_int {
    padding: 4px;
  }

  .esp-int-8,
  .esp_int_8 {
    padding: 8px;
  }

  .esp-int-12,
  .esp_int_12 {
    padding: 12px;
  }

  .esp-int-16,
  .esp_int_16 {
    padding: 16px;
  }

  .esp-int_20,
  .esp_int_20 {
    padding: 20px;
  }

  .esp-int-24,
  .esp_int_24 {
    padding: 24px;
  }

  .esp-int-28,
  .esp_int_28 {
    padding: 28px;
  }

  .esp-int-32,
  .esp_int_32 {
    padding: 32px;
  }

  .esp-int-36,
  .esp_int_36 {
    padding: 36px;
  }

  .esp-int-40,
  .esp_int_40 {
    padding: 40px;
  }

  .esp-int-44,
  .esp_int_44 {
    padding: 44px;
  }

  .esp-int-48,
  .esp_int_48 {
    padding: 48px;
  }

  .esp-int-52,
  .esp_int_52 {
    padding: 52px;
  }

  .esp-int-56,
  .esp_int_56 {
    padding: 56px;
  }

  .esp-int-60,
  .esp_int_60 {
    padding: 60px;
  }

  /*
  * ----------------------------------------------------------------------------*  
  *                                                                             *
  *  ESPAÇAMENTO EXTERNO                                                        *
  *  --                                                                         *
  *  Use o préfixo 'esp-ext-' ou 'esp_ext_' e depois o valor. Use 'esp-ext'     *
  *  sem falor para adicionar o valor base, que é 4.                            *
  *                                                                             *
  *  Os valores são múltiplos de 4, e vão de 4 até 60                           *
  *                                                                             *
  * ----------------------------------------------------------------------------*
  */
  .esp-ext,
  .esp_ext {
    margin: 4px;
  }

  .esp-ext-8,
  .esp_ext_8 {
    margin: 8px;
  }

  .esp-ext-12,
  .esp_ext_12 {
    margin: 12px;
  }

  .esp-ext-16,
  .esp_ext_16 {
    margin: 16px;
  }

  .esp-ext_20,
  .esp_ext_20 {
    margin: 20px;
  }

  .esp-ext-24,
  .esp_ext_24 {
    margin: 24px;
  }

  .esp-ext-28,
  .esp_ext_28 {
    margin: 28px;
  }

  .esp-ext-32,
  .esp_ext_32 {
    margin: 32px;
  }

  .esp-ext-36,
  .esp_ext_36 {
    margin: 36px;
  }

  .esp-ext-40,
  .esp_ext_40 {
    margin: 40px;
  }

  .esp-ext-44,
  .esp_ext_44 {
    margin: 44px;
  }

  .esp-ext-48,
  .esp_ext_48 {
    margin: 48px;
  }

  .esp-ext-52,
  .esp_ext_52 {
    margin: 52px;
  }

  .esp-ext-56,
  .esp_ext_56 {
    margin: 56px;
  }

  .esp-ext-60,
  .esp_ext_60 {
    margin: 60px;
  }

  /*
  * ----------------------------------------------------------------------------*  
  *                                                                             *
  *  MOBILE / DESKTOP                                                           *
  *  --                                                                         *
  *  Use o préfixo 'para-' e 'para_' e depois o valor.                          *
  *                                                                             *
  * ----------------------------------------------------------------------------*
  */
  & .para-mobile,
  & .para_mobile,
  & .para-mob,
  & .para_mob,
  & .para-celular,
  & .para_celular {
    display: none;
  }

  & .para-desktop,
  & .para_desktop,
  & .para-desk,
  & .para_desk,
  & .para-pc,
  & .para_pc {
    display: block;
  }

  /*
  * ----------------------------------------------------------------------------*  
  *                                                                             *
  *  GUIA                                                                       *
  *  --                                                                         *
  *  Utilize a palavra 'guia' para criar o estilo básico do guia.               *
  *  Use o gui nas cores: vermelho, verde, azul e amarelo                       *
  *                                                                             *
  * ----------------------------------------------------------------------------*
  */
  & .guia {
    border: 1px solid #808080;
  }

  & .guia-vermelho,
  & .guia_vermelho {
    border: 1px solid #dc3545;
  }

  & .guia-verde,
  & .guia_verde {
    border: 1px solid #198754;
  }

  & .guia-azul,
  & .guia_azul {
    border: 1px solid #0dcaf0;
  }

  & .guia-amarelo,
  & .guia_amarelo {
    border: 1px solid #ffc107;
  }
}