/* ########## TODOS OS TIPOS DE BOTÕES ########## */

.a-botao-padrao{ /* Configuração padrão servindo de base pra todos */
    text-align: center;
    text-transform: uppercase;
    text-decoration: none; /* Tira o sublinhado dos links */
    border: none;
    display: inline-block;
    font-size: 16px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.a-botao-dourado{
    background-color: #B99253;
    color: white;
    border-radius: 5px;
    font-size: 16px;
    padding: 1em;
}

.a-botao-menu-mobile{ /* Botões do menu suspenso (mobile) */
    text-align: center;
    text-transform: uppercase;
    text-decoration: none; /* Tira o sublinhado dos links */
    display: inline-block;
    font-size: 16px;
    background-color: #B99253;
    color: white;
    border-radius: 5px;
    padding: 1em 0;
    width: 100%;
}

.a-botao-marrom{
    background-color: #643825; /* #573323 */
    color: white;
    font-size: 14px;
    border-radius: 8px;
    padding: 0.7em;
}

.a-botao-cinza{
    background-color: #6f6f6f;
    color: white;
    font-size: 14px;
    border-radius: 8px;
    padding: 0.7em;
}

.a-botao-branco{
    background-color: white;
    color: black;
    font-size: 14px;
    border-radius: 8px;
    padding: 0.7em;
}

.a-botao-dourado, .a-botao-menu-mobile:hover{
    background-color: #deb065;
    cursor: pointer;
}

.a-botao-dourado, .a-botao-menu-mobile:active{
    background-color: #deb065;
    cursor: pointer;   
}

.anima-botoes-cards:hover .anima-cards { /* Passa mouse no botão e anima somente os ícones dentro do botão (nos cards com fotos em miniaturas e fundos coloridos) */ 
    animation: rotate 1.5s ease-in-out infinite both;
}

.anima-botoes-cards:active .anima-cards { /* Aperta o botão e anima somente os ícones dentro do botão (nos cards com fotos em miniaturas e fundos coloridos) */ 
    animation: rotate 1.5s ease-in-out infinite both;
}


/* ########## TODOS OS TIPOS DE TEXTOS E CORES ########## */

.branco{ /* Acrescenta a cor BRANCA aos textos */
    color: white;
}

.marrom{ /* Acrescenta a cor MARROM aos textos */
    color: #432918;
}

.vermelho{ /* Acrescenta a cor VERMELHA aos textos */
    color: #7F1B1D;
}

.verde{ /* Acrescenta a cor VERDE aos textos */
    color: #33733F;
}

/* ########## ALTURAS UNIVERSAIS ########## */

.height-50{ /* Força o ajuste da altura em 50% */
    height: 50%;
}

.height-75{ /* Força o ajuste da altura em 75% */
    height: 75%;
}

/* ########## AJUSTES UNIVERSAIS ########## */

.zero{ /* Retira padding e margin de elementos sem formatação específica */
    margin: 0;
    padding: 0;
}

.zero2{ /* Retira padding e margin de elementos sem formatação específica e acrescenta width e height padrões */
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.zero2-mobile{ /* Mesma coisa que o zero2, mas só funciona no mobile */
    display: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


.centro-flex{ /* Centraliza o objeto na VERTICAL e HORIZONTAL pra objetos que ja tenham o proprio height */
    display: flex; /* Funciona bem com imagens mas embola textos e botões */
    align-items: center;
    justify-content: center;
    text-align: center;
}

.centro-grid{ /* Centraliza o objeto na VERTICAL e HORIZONTAL pra objetos que ja tenham o proprio height */
    display: grid; /* Funciona bem com textos e botões mas afina imagens (fica tipo width 0) */
    align-items: center;
    justify-content: center;
    text-align: center;
}

.total-centro{  /* Centraliza o objeto na VERTICAL e HORIZONTAL forçando height 100% */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.centralizar{ /* Centraliza o conteúdo para DIVs e etc */
    text-align: center;
}

.esquerda{ /* Alinha à esquerda o conteúdo para DIVs e etc */
    text-align: left;
}

.direita{ /* Alinha à direita o conteúdo para DIVs e etc */
    text-align: right;
}

.margin-auto{ /* Centraliza */
    margin: 0 auto;
}

.margin-right-x1{ /* Acrescenta 1 espaço de margem na direita (valor aleatório) */
    margin-right: 1em;
}

.margin-left-x1{ /* Acrescenta 1 espaço de margem na esquerda (valor aleatório) */
    margin-left: 1em;
}

.margin-top-x1{ /* Acrescenta 1 espaço de margem no topo (valor aleatório) */
    margin-top: 1em;
}

.margin-top-x2{ /* Acrescenta 2 espaços de margem no topo (valor aleatório) */
    margin-top: 2em;
}

.margin-bottom-x3{ /* Acrescenta 3 espaços de margin na base (valor aleatório) */
    margin-bottom: 3em;
}

.margin-bottom-x5{ /* Acrescenta 3 espaços de margin na base (valor aleatório) */
    margin-bottom: 5em;
}

.padding-height-x1{ /* Acrescenta 1 espaço de padding no topo e 1 espaço no bottom (valor aleatório) */
    padding: 1em 0;
}

.padding-bottom-x3{ /* Acrescenta 3 espaços de padding na base (valor aleatório) */
    padding-bottom: 3em;
}

.padding-bottom-x5{ /* Acrescenta 5 espaços de padding na base (valor aleatório) */
    padding-bottom: 5em;
}

.elemento-pai-tabela{ /* Simula que o elemento pai seja uma tabela para alinhar verticalmente o elemento filho */
    display: table; 
    vertical-align: middle;
}

.elemento-filho-tabela{ /* Simula que o elemento filho é uma célula da tabela pai pra ser alinhado verticalmente */
    display: table-cell; 
    vertical-align: middle; /* Alinha verticalmente o elemento na célula da tabela */
}

.div-border{ /* Adiciona borda pra auxiliar na visualização */
    border: 5px dotted red;
}

/* ########## COLUNAS DUPLAS ########## */

.row{ /* Ocupa 100% da largura da página */
    overflow: hidden; /* A col-2 usa float e precisa do overflow pra não estragar o fluxo */
    width: 100%;
    height: 100%;
}

.col-1{
    box-sizing: border-box;
    width: 100%;
}

.col-2{
    box-sizing: border-box;
    width: 50%;
    float: left;
}

.col-2-10{
    box-sizing: border-box;
    width: 10%;
    float: left;    
}

.col-2-20{
    box-sizing: border-box;
    width: 20%;
    float: left;
}

.col-2-25{
    box-sizing: border-box;
    width: 25%;
    float: left;
}

.col-2-30{
    box-sizing: border-box;
    width: 30%;
    float: left;
}

.col-2-33{
    box-sizing: border-box;
    width: 33%;
    float: left;
}

.col-2-40{
    box-sizing: border-box;
    width: 40%;
    float: left;
}

.col-2-60{
    box-sizing: border-box;
    width: 60%;
    float: left;
}

.col-2-70{
    box-sizing: border-box;
    width: 70%;
    float: left;
}

.col-2-80{
    box-sizing: border-box;
    height: 100%;
    width: 80%;
    float: left;
}

/* ########## EFEITOS GERAIS ########## */

.div-deitada{ /* Efeito pra deitar as DIVs */
  transform:
    perspective(75em)
    rotateX(18deg);
  box-shadow:
    rgba(22, 31, 39, 0.42) 0px 60px 123px -25px,
    rgba(19, 26, 32, 0.08) 0px 35px 75px -35px;
  border-radius: 10px;
  border: 1px solid;
  border-color:
    rgb(213, 220, 226)
    rgb(213, 220, 226)
    rgb(184, 194, 204);
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}