/* 
Paleta de cores
#e4491c
#ccc9a1
#F0FFCE
#4C230A
#280004
 */
 :root {
  --padding-section: 30px;
  --padding-padrao: 30px;
  --margin-padrao: 10px;
  --cor-bw-00: #ffffff;
  --cor-bw-01: #f3f3f3;
  --cor-bw-02: #e4e4e4;
  --cor-bw-03: #d1d1d1;
  --cor-bw-04: #b6b6b6;
  --cor-bw-05: #858585;
  --cor-bw-06: #757575;
  --cor-bw-07: #464646;
  --cor-bw-08: #363636;
  --cor-bw-09: #242424;
  --cor-bw-10: #000000;
  --cor-bw-00-transp-00: #ffffffe0;
  --cor-bw-00-transp-01: #ffffffb9;
  --cor-bw-10-transp-00: #000000ce;
  --cor-03: #ffffff;
  --cor-04: #fffcfa;
  --cor-05: #FFF0E2;
  --cor-06: #f3dac2;
  --cor-07: #f3cfae;
  --cor-08: #f5c9a0;
  --cor-09: #fcc28d;
  --cor-10: #f5ad6a;
  --cor-transp-05: #FFF0E2f1;
  --cor-transp-06: #FFF0E2c9;
  --cor-transp-07: #FFF0E296;
  --cor-transp-08: #FFF0E26b;
  --cor-transp-09: #FFF0E242;
  --cor-transp-10: #FFF0E200;
  --cor-destaque-03: #a4c71f;
  --cor-destaque-04: #d8c80d;
  --cor-destaque-05: #e94264;
  --cor-destaque-06: #e50d7e;
  --cor-destaque-07: #9f4191;
  --cor-success-05: #00ff4c;
  --cor-success-06: #00973f;
  --cor-success-07: #00722f;
  --cor-link-05: #00aeff;
  --cor-escura-02: #a15813;
  --cor-escura-03: #8d4a0b;
  --cor-escura-04: #743a05;
  --cor-escura-05: #633001;
  --cor-escura-06: #4e2600;
  --cor-escura-07: #381b00;
  --cor-claro-03: #f7f4d6;
  --cor-claro-04: #e2dfb9;
  --cor-claro-05: #ccc9a1;
  --cor-claro-06: #c0bc8b;
  --cor-claro-07: #a5a06f;
  --cor-fundo-03: #ffffff;
  --cor-fundo-04: #e1e4eb;
  --cor-fundo-05: #d1d2d4;
  --cor-fundo-06: #bfc0c2;
  --cor-fundo-07: #a3a4a5;
  --gradient-1: linear-gradient(90deg, #e0ff4b, #ffbe00 32.21%, #ff7163 62.89%, #ff6fff);
  --gradient-2: linear-gradient(0deg, #90BE27, #8dc016 50%, #98C80D);
  --gradient-3: linear-gradient(0deg, #E94264, #e94296 50%, #A04492);
  --gradient-4: linear-gradient(90deg, #a2c61d, #e94264 32.21%, #e60d7d 62.89%, #9f4091);
}
html,body {
  width: 100%;
  height: 100%;
  background-color: var(--cor-04);
  color: var(--cor-escura-06);
}
.navbar {
  background-color: var(--cor-05);
}
.navbar-brand {
  margin-right: 0;
  margin-left: 10px;
}
.navbar-collapse {
 flex-grow: unset;
}
.navbar-expand-lg .navbar-nav .nav-link {
 padding: 5px 20px;
 font-size: 15px;
} 
.nav-item:not(:last-child) {
 margin-right: 10px;
}
.nav-item a {
    position: relative;
    transition: 0.3s ease;
}
.nav-item a:before {
    position: absolute;
    content: '';
    background: var(--cor-destaque-07);
    width: 0;
    height: 3px;
    bottom: 0;
    left: 0;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s; /* Animation */
}
.navbar-nav .nav-item.active .nav-link:before {
    position: absolute;
    content: '';
    background: var(--cor-destaque-07);
    width: 100%;
    height: 3px;
    bottom: 0;
    left: 0;

}
.nav-item a:hover:before, .navbar-nav .nav-link.active:before {
    width: 100%;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
 color: var(--cor-destaque-07);
}
a, a:hover {
  text-decoration: none;
  color: unset;
}
.botao {
  padding: 15px 25px;
  color: var(--cor-bw-10);
  background-image: var(--gradient-2);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-transform: uppercase;
  text-align: center;
  font-weight: 600;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.botao:hover {
  color: var(--cor-bw-00);
  background-image: var(--gradient-3);
}
.botao-outline {
 color: var(--cor-bw-00);
 border: 2px solid var(--cor-bw-00);
 background-color: transparent;
 background-image: none;
}
.botao-outline:hover {
  background-color: transparent;
  background-image: none;
  background-color: var(--cor-bw-06);
}
.botao-dark {
  border-radius: 50px;
  color: var(--cor-bw-00);
  border: 2px solid var(--cor-bw-00);
}
.botao-dark:hover {
  color: var(--cor-escura-05);
}
.botao i {
  margin-right: 10px;
}
.botao-menu {
 color: var(--cor-destaque-07);
 background-color: transparent;
}
.botao-menu:hover {
  border-bottom: 2px solid var(--cor-destaque-07);
}
.gradient-1 {
  background-image: var(--gradient-1);
}
.gradient-2 {
  background-image: var(--gradient-2);
}
.gradient-3 {
  background-image: var(--gradient-3);
}
.gradient-4 {
  background-image: var(--gradient-4);
}
.texto-transparente {
  background-clip: text;
  color: #0000;
  font-weight: 700;
}
section {
  padding: var(--padding-padrao);
}
section .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
section h1, section p {
  text-align: center;
  max-width: 70%;
}
.loading {
  text-align: center;
}
.loading img {
  width: 60px;
}
.alert {
  display: none;
}
.hide {
  display: none!important;
}
.fadeIn {
  animation: 2s fadeIn 0s ease-in forwards;
}
.fadeInOut {
  animation: 2s fadeInOut 0s infinite;
}
.slideUp {
  animation: 1s slideUp 0s ease-in forwards;
}
.sumir {
  animation: 1s sumir 0s ease-in forwards;
}
.mostrar {
  animation: 1s mostrar 0s ease-in forwards;
}
.fullWidth {
  animation: .5s fullWidth 0s ease-in forwards;
}
.autoWidth {
  animation: .5s autoWidth 0s ease-in forwards;
}
/* BOTÕES FIXOS */
.botoes_fixos {
  position: fixed;
  display: flex;
  flex-direction: row;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  opacity: 1;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s; /* Animation */
}
.botoes_fixos a:not(:first-child), .botoes_fixos div.botao_fixo:not(:first-child) {
  margin-left: 30px;
}
.botoes_fixos.sobe {
  flex-direction: column;
}
.botoes_fixos.sobe a, .botoes_fixos.sobe div.botao_fixo {
  margin-left: 0;
}
.botoes_fixos .whatsapp{
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background-color: #0d8608;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-bw-00);
  font-size: 35px;
  padding: 30px;
  cursor: pointer;
}
@keyframes fadeIn {
  0%   {opacity: 0;}
  25%  {opacity: .25;}
  50%  {opacity: .5;}
  75%  {opacity: .75;}
  100% {opacity: 1;}
}
@keyframes fadeInOut {
  0%   {opacity: 0;}
  25%  {opacity: .5;}
  50%  {opacity: 1;}
  75%  {opacity: .5;}
  100% {opacity: 0;}
}
@keyframes fullWidth{
  from {
    width: 0px;
    opacity: 0;
  }
  to {
    width: 100%;
    opacity: 1;
  }
}
@keyframes autoWidth{
  from {
    width: 100%;
    opacity: 1;
  }
  to {
    width: 0px;
    opacity: 0;
  }
}
@keyframes sumir{
  from {
    max-width: 200px;
    opacity: 1;
  }
  to {
    max-width: 0px;
    opacity: 0;
  }
}
@keyframes mostrar{
  from {
    max-width: 0px;
    opacity: 0;
  }
  to {
    max-width: 200px;
    opacity: 1;
  }
}
@keyframes slideDown{
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideUp{
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}