:root {
  --color-1: #003399;
  --color-2: #0a0a74;
  --color-3: #2c44cc;
  --color-4: #0414d4;
}

.color1 {
  color: var(--color-1) !important;
}
.color2 {
  color: var(--color-2) !important;
}
.color3 {
  color: var(--color-3) !important;
}
.color4 {
  color: var(--color-4) !important;
}

.bg-color1 {
  background-color: var(--color-1) !important;
}
.bg-color2 {
  background-color: var(--color-2) !important;
}
.bg-color3 {
  background-color: var(--color-3) !important;
}
.bg-color4 {
  background-color: var(--color-4) !important;
}

.scroll-top {
  bottom: 0;
  right: 2rem;
  position: fixed;
  display: none;
}
.active {
  display: flex;
}


/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #FFFFFF;
}


.imgLoader {
  width: 60px;
  object-fit: contain;
  position: fixed;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  mix-blend-mode: multiply;
  animation: glowFade 1s ease-in-out infinite;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
  border: 6px solid #FFF;
  border-top-color: var(--color-2);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: animate-preloader 1s linear infinite;
}

@keyframes  glowFade {
  to {
    top: calc(50% - 10px);
    left: calc(50% - 10px);
    width: 20px;
    height: 20px;
    opacity: 0.1;
  }
  from {
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    width: 60px;
    height: 60px;
    opacity: 1;
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


/***************** HEADER **********************/
.wppButton {
  font-weight: 600;
  z-index: 6000 !important;
}
.topoImgDiv{
  position: relative;
  background: url('../img/logotopo.svg') no-repeat;
  background-position: right top;
  background-size: 295px;
}
.topoImgDiv:after{
  position: absolute;
  content: "";
  bottom: -1.5rem;
  left: 0;
  width: 100%;
  height: 35%;
  background: url('../img/triangulo.svg') no-repeat;
  background-position: center bottom;
  background-size: contain;
}
.btnInstaTopo{
  position: absolute;
  bottom: 1rem;
  left: 0;
  z-index: 5000;
}

#why, #contato {
  position: relative;
  background: rgb(0,51,153);
  background: linear-gradient(90deg, rgba(0,51,153,1) 34%, rgba(0,1,253,1) 83%);
  z-index: 5000 !important;
}
#why > div, #contato > div, iframe, a {
  z-index: 6000 !important;
}
.btnWWdotK {
  z-index: 7000 !important;
}
#baseline {
  background: rgb(0,51,153);
  background: linear-gradient(90deg, rgba(0,51,153,1) 34%, rgba(0,1,253,1) 83%);
}
#why:after, #contato:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url('../img/triangulosR.svg') no-repeat;
  background-position: left top;
  background-size: 300px;
  z-index: 10 !important;
}
#why:before, #contato:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  right: 0;
  bottom: 0;
  background: url('../img/triangulosL.svg') no-repeat;
  background-position: right bottom;
  background-size: 300px;
  z-index: 10 !important;
}
.cardContato {
 border: 1px solid #FFF;
 border-radius: 0 15px ;
}
.cardWhy {
  border: 1px solid #FFF;
  border-radius: 0 15px;
  height: 100%;
  background-color: rgba(44,68,204,0.7);
}
.boxImage {
  padding: 0rem 2rem ;
  background: url('../img/moldura.svg') no-repeat;
  background-position: center bottom;
  background-size: contain;
}
.colImage{
  padding: 6rem;
  background: url('../img/triangulos.svg') no-repeat;
  background-position: center;
  background-size: contain;
  max-width: 500px;
}
#share {
  background: url('../img/compartilhando.png') no-repeat;
  background-position: center;
  background-size: cover;
  min-height: 350px;
}


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

@media  (max-width: 769px) {

}

@media  (min-width: 1100px) {

}