/*===============================================
=====================| COLOR |=================== | COLOR |
===============================================*/
:root {
  --color-01: #a06724;
  --color-02: #07182a;
  --color-03: #b3b3b3;
  --color-04: #374148;

  --color-white: #ffffff;



  --cbr-body-font:#4B4949;

  --cbr-white-00: #ffffff;
  --cbr-white-01: #f7f7f7;
  --cbr-white-02: #eaeaea;

  --cbr-black-00: #0C0A0A;
  --cbr-black-01: #6e777d;

  --cbr-orange: #FF6600;

  --cbr-yellow: #fcb900;

  --cbr-blue-00: #0d6efd;
  --cbr-blue-01: #0B0D26;

/*====| COLOR FACEBOOK |====*/
  --cbr-whatsapp: #27D045;
  --cbr-facebook: #3b5998;
  --cbr-instagram: #e4405f;
  --cbr-telegram: #23A0DC;
  --cbr-tiktok: #010101;
  --cbr-youtube: #FE0002;
  --cbr-twitter: #00acee;
  --cbr-pinterest: #cb2027;
}

/*===============================================
===================| 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;
}

/*===============================================
==================| BOXSTYLES |==================
===============================================*/
.border-radius-50 {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}

.transition-1 { transition: all 0.5s ease 0s; }

.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 / REDONDO ===============*/
.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;
  padding: .8em 2.4em !important;
}

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

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

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

/*===============================================
================| REDES SOCIAIS |================
===============================================*/
.rede-sociais { width: 100%; }
.rede-sociais ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.rede-sociais ul li { list-style: none; }
.rede-sociais ul li a {
  width: 50px;
  height: 50px;
  background: var(--cbr-white-00);
  text-align: center;
  line-height: 42px;
  font-size: 24px;
  margin:5px;
  display: block;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 3px solid var(--cbr-white-00);
  z-index: 1;
}
.rede-sociais ul li a .fab {
  position: relative;
  color: var(--cbr-blue-00);
  transition: .5s;
  z-index: 3;
}
.rede-sociais ul li a:hover .fab {
  color: var(--cbr-white-00);
  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;
}
.rede-sociais ul li a:hover::before { top: 0; }

.rede-sociais ul li:nth-child(1) a::before { background: var(--cbr-whatsapp); }
.rede-sociais ul li:nth-child(2) a::before { background: var(--cbr-facebook); }
.rede-sociais ul li:nth-child(3) a::before { background: var(--cbr-instagram); }
.rede-sociais ul li:nth-child(4) a::before { background: var(--cbr-telegram); }
.rede-sociais ul li:nth-child(5) a::before { background: var(--cbr-tiktok); }
.rede-sociais ul li:nth-child(6) a::before { background: var(--cbr-youtube); }
.rede-sociais ul li:nth-child(7) a::before { background: var(--cbr-twitter); }
.rede-sociais ul li:nth-child(8) a::before { background: var(--cbr-pinterest); }