/*===============================================
=====================| COLOR |=================== | COLOR |
===============================================*/
:root {
  --color-background: #f3f4f7;

  --color-white:#ffffff;

  --color-yellow: #FED61E;

  --color-black: #000000;
  --color-black-02: #222222;
  --color-black-03: #333333;

  --color-red: #DB0007;

  --color-blue-01: #172654;
  --color-blue-02: #07182a;

  --color-gray-01: #E3E4E5;
  --color-gray-02: #9EA2A7;

  --color-dourado-01: #C39850;
  --color-dourado-02: #AF7C40;

  --color-01: #a06724;

  --color-03: #b3b3b3;
  --color-04: #374148;
  --color-05: #0e1e40;
  --color-06: #0c1a36;
  --color-07: #14468c;
  --color-08: #0d2f5d;
  --color-09: #082060;
  
  

  --rgba-01: rgba(0, 0, 8, 0.445);

/*====| COLOR REDES SOCIAIS |====*/
  --cbr-facebook: #3b5998;
  --cbr-instagram: #e4405f;
  --cbr-youtube: #ff3333;
  --cbr-twitter: #00acee;
  --cbr-tiktok: #010101;
  --cbr-pinterest: #cb2027;

  /*====| COLOR NOTIFICATION |====*/
  --alert-primary: #2196F3;
  --alert-secondary: #323a45;
  --alert-success: #64DD17;
  --alert-info: #29B6F6;
  --alert-warning: #FFD600;
  --alert-danger: #ef1c1c;

  /*====| COLOR NOTIFICATION |====*/
  --color-whatsapp: #0ba360;
}

/*===============================================
===================| FLEXBOX |=================== | FLEXBOX |
===============================================*/
.flex {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}

.flex .flex-1 {
  flex-basis: 100%;
  margin: 7.5px;
}

.flex .flex-2 {
  flex-basis: calc(50% - 15px);
  margin: 7.5px;
}

.flex .flex-3 {
  flex-basis: calc(33.3333% - 15px);
  margin: 7.5px;
}

.flex .flex-4 {
  flex-basis: calc(25% - 15px);
  margin: 7.5px;
}

.flex .flex-5 {
  flex-basis: calc(20% - 15px);
  margin: 7.5px;
}

.flex .flex-8 {
  flex-basis: calc(12% - 8px);
  margin: 7.5px;
}

/*===============================================
===================| IMAGEM |====================
===============================================*/
.post-thumb { overflow: hidden; }
.post-thumb img {
  transition: all 0.6s linear;
  -moz-transition: all 0.6s linear;
  -webkit-transition: all 0.6s linear;
  -o-transition: all 0.6s linear;
}
.post-thumb:hover img {
  transition: all 0.6s linear;
  transform:scale(1.1);
}

/*===============================================
==================| BOXSTYLES |==================
===============================================*/
.box-shadow-01 { box-shadow: 0px 10px 14px rgba(0, 0, 0, 0.08); }

.border-radius-50 {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}

.transition-1 {
  transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -webkit-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
}

.border-radius-75 {
  border-radius: .75rem;
  -webkit-border-radius: .75rem;
  -moz-border-radius: .75rem;
}

.radius {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

.border-radius-25 {
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  overflow: hidden;
}

.rounded_btn {
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
}

.transition {
  --seconds: 0.2s;
  transition-duration: var(--seconds);
  -moz-transition-duration: var(--seconds);
  -webkit-transition-duration: var(--seconds);
  cursor: pointer;
}

.box-sizing {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*===============================================
===================| BUTTON |====================
===============================================*/
.button-btn {
  cursor: pointer;
  display: inline-block;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0;
  border: none;
  position: relative;
}

.button-white-50 { white: 50%; }

.button-padding { padding: .8em 2em }

.button-radius {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

.button-btn-01 {
  color: var(--color-06);
  border: 3px solid var(--color-06);
}
.button-btn-01:hover {
  background-color: var(--color-06);
  color: var(--color-white);
  border: 3px solid var(--color-06);
}

.button-btn-02 {
  color: var(--color-01);
  background-color: transparent;
  border: 3px solid var(--color-01);
}
.button-btn-02:hover {
  color: var(--color-white);
  background-color: var(--color-01);
  border: 3px solid var(--color-01);
}

.button-btn-bg-02 {
  color: var(--color-white);
  background-color: var(--color-black);
  border: 3px solid var(--color-black);
}
.button-btn-bg-02:hover {
  color: var(--color-black);
  background-color: transparent;
  border: 3px solid var(--color-black);
}

.button-whatsapp {
  color: var(--color-white);
  background-color: var(--color-whatsapp);
  border: 3px solid var(--color-whatsapp);
}
.button-whatsapp:hover {
  color: var(--color-whatsapp);
  background-color: transparent;
  border: 3px solid var(--color-whatsapp);
}

/*===============================================
================| REDES SOCIAIS |================
===============================================*/
.rede-sociais { width: 100%; }
.rede-sociais ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}
.rede-sociais ul li { list-style: none; }
.rede-sociais ul li a {
  width: 45px;
  height: 45px;
  background: var(--color-white);
  text-align: center;
  line-height: 40px;
  font-size: 24px;
  margin:5px;
  display: block;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 3px solid var(--color-white);
  z-index: 1;
}
.rede-sociais ul li a .fab {
  position: relative;
  color: var(--color-red);
  transition: .5s;
  z-index: 3;
}
.rede-sociais ul li a:hover .fab {
  color: var(--color-white);
  transform: rotateY(360deg);
}
.rede-sociais ul li a::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  transition: .5s;
  background-color: var(--color-red);
}
.rede-sociais ul li a:hover::before { top: 0; }