@tailwind base;
@tailwind components;
@tailwind utilities;
@import url(./assets/geometria/style.css);

#cc-main {
  --cc-font-family: var(--geometria);
}

.cc--dark-turquoise {
  color-scheme: dark;
  
  --cc-bg: #161a1c;
  --cc-primary-color: rgb(239, 244, 246);
  --cc-secondary-color: #b1bdc3;

  --cc-btn-primary-bg: #60fed2;
  --cc-btn-primary-color: #000;
  --cc-btn-primary-hover-bg: #4dd4ae;
  --cc-btn-primary-hover-color: #000;

  --cc-btn-secondary-bg: #242c31;
  --cc-btn-secondary-color: var(--cc-primary-color);
  --cc-btn-secondary-hover-bg: #d4dae0;
  --cc-btn-secondary-hover-color: #000;

  --cc-cookie-category-block-bg: #1e2428;
  --cc-cookie-category-block-border: #1e2428;
  --cc-cookie-category-block-hover-bg: #242c31;
  --cc-cookie-category-block-hover-border: #242c31;
  --cc-cookie-category-expanded-block-hover-bg: #242c31;
  --cc-cookie-category-expanded-block-bg: #1e2428;
  --cc-toggle-readonly-bg: #343e45;
  --cc-overlay-bg: rgba(4, 6, 8, .85)!important;

  --cc-toggle-on-knob-bg: var(--cc-bg);
  --cc-toggle-readonly-knob-bg: var( --cc-cookie-category-block-bg);

  --cc-separator-border-color: #222a30;

  --cc-footer-border-color: #212529;
  --cc-footer-bg: #0f1112;
} 


:root {
    --animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-duration: 1s;

    --geometria: 'Geometria', sans-serif;
    --geometriaEL: 'Geometria-ExtraLight', sans-serif;
    --geometriaB: 'Geometria-Bold', sans-serif;

    --lust: "lust", sans-serif;

    --white: #ffffff;
    --branco: #ffffff;
    /*--preto: #231F20;*/

    --red: #f76057;
    --blue: #4470b8;
    --lightpink: #f7d0d0;

    --black: #1e1414;
    --gray25: #c7c4c4;
    --gray75: #564f4f;
    --mediumblack: #342b2c;
    --lightblack: #403737;
    --sand: #faf3e9;
    
    --cinzaclaro: #E9E9EF;
    --cinza: #71717D;
    --cinza2: #414141;
    --cinzaescuro: #4d4d4d;
    --laranja: #ea983e;
    --roxo: #4c3c7e;
    --amarelo: #ffd900;
    --begeclaro: #f7f7ef;
    --begeclaro2: #f6f6f0;

    --gold: #bda84a;
    --creme: #fffbe1;
    --yellowlight: #fff186;
    --cremelight: #f7f6f1;
}

*,html,body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: none;
}



html.lenis, html.lenis body {
    height: auto;
   }
   .lenis.lenis-smooth {
    scroll-behavior: auto !important;
   }
   .lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
   }
   .lenis.lenis-stopped {
    overflow: hidden;
   }
   .lenis.lenis-smooth iframe {
    pointer-events: none;
   }

/* prevent drag */
.user-drag-none {
	user-drag: none;
	-webkit-user-drag: none;
	-moz-user-select: none;
}

/* width */
::-webkit-scrollbar {
    width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--cinzaclaro);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--roxo);
    border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--cianoclaro);
}

/* Fonts */
.geometria {
    font-family: var(--geometria);
}
.geometriaEL {
    font-family: var(--geometriaEL);
}
.geometriaB {
    font-family: var(--geometriaB);
}

.lust {
  font-family: var(--lust);
  font-weight: 400;
  font-style: normal;
}

strong {
    font-family: var(--geometriaB);
}

/* Sections */
.hero {
  background: url(./assets/images/banner-hero.webp) no-repeat center center;
  background-size: cover;
  min-height: 100svh;
}

.notificacao {
  opacity: 0.95;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.mesh01 {
  background: url(./assets/images/DBVC_CampanhaDeSaude_Maio_mesh_01.webp) no-repeat center;
  background-size: cover;
}

.hero {
    min-height: calc(100vh - 62px);
    background: url(./assets/images/banner-hero.webp) no-repeat center center;
    background-size: cover;
}

.bg-milk {
  background: url(./assets/images/bg-gradient-milk.webp) no-repeat top center;
  background-size: cover;
}

.faq {
  background: url(./assets/images/bg-faq.webp) no-repeat right top;
  background-size: cover;
}

.universo {
  background: url(./assets/images/universo.webp) no-repeat top center;
  background-size: cover;
}
.mamadeira {
  background: #000 url(./assets/images/universo_2.webp) no-repeat top center;
  background-size: contain;
}

.frame {
  background: url(./assets/images/frame-item.webp) no-repeat top center;
  background-size: contain;
  min-width: 100%;
  min-height: 120px;
}
.frameshort {
  background: url(./assets/images/frame-item-short.webp) no-repeat top center;
  background-size: cover;
}
.pictures {
  background: url(./assets/images/bilhoes-de-historias.webp) no-repeat top center;
  background-size: cover;
  min-height: 100vh;
}
/*
.video-insta {
  min-height: 100vh !important; 
}

.video-insta video {
  min-height: 100vh !important;
}

video.bg {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 600px;
    object-fit: cover;
    pointer-events: none;
}
*/
.banner-hero{
  background: #000 url(./assets/images/header_bg_low.webp) no-repeat bottom center;
  background-size: cover;
  position: relative;
  height: calc(100vh - 128px);
  overflow: hidden;
}
.bg-stars {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
}

.bg-morro {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
}

.bg-silluete {
  width: 9vw;
  height: auto;
  position: absolute;
  left: 50%;
  bottom: 11vh;
  z-index: 0;
  transform: translate(-50%);
}

.bg-points {
  width: 22vw;
  position: absolute;
  right: 26vw;
  top: 50px;
  z-index: 0;
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 766px) {
    .banner-hero {
        background: #000 url(./assets/images/header-mobile.webp) no-repeat bottom center;
        background-size: cover;
        min-height: calc(100vh - 28px);
        }
    #gt_float_wrapper {
          left: auto !important;
          right: 20px !important;
        }
    .bg-morro {
          min-width: 300vw;
          position: absolute;
          left: 50%;
          bottom: 7vh;
          z-index: 1;
          transform: translate(-50%) !important;
        }
    .bg-silluete {
          width: 25vw;
          height: auto;
          position: absolute;
          left: 50%;
          bottom: 15.6vh;
          z-index: 1;
          transform: translate(-50%);
        }
    .bg-points {
          width: 80vw;
          position: absolute;
          left: 50%;
          transform: translate(-50%) !important;
          top: 90px;
          z-index: 1;
        }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only (min-width: 768px) and (max-width: 1280px) {
    .banner-hero {
    min-height: 100vh;
    background-size: cover;
    }
    .bg-silluete {
          width: 35vw;
          height: auto;
          position: absolute;
          left: 50%;
          bottom: 0;
          z-index: 1;
          transform: translate(-50%);
    }
}
/* Extra large devices (large laptops and desktops, 1200px and up)
@media only screen and (min-width: 1280px) {
    .banner-hero {
        min-height: calc(100vh - 128px);
        background-size: cover;
    }
} */

.video-player{
   background: url(./assets/images/bg-video-player.webp) bottom right no-repeat;
   background-size: contain;
}

.sec03 {
  background: url(./assets/images/bg-02.webp) top left no-repeat;
   background-size: contain;
}

.sec04 {
  background: url(./assets/images/bg-05.webp) top right no-repeat;
   background-size: contain;
}

.donut-segment,
.graph-pie-segment {
  animation: draw 2s alternate-reverse infinite;
}

.ico {
  fill: none;
  stroke: var(--lightpink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}

.icon {
  background-color: var(--blue);
  padding: 0.145em;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#vitimas{
  font-size: 10.4em;
  color: #000;
  font-weight: 600;
  letter-spacing: -0.0625em;
  line-height: 1.2em;
  padding: 0.2em 0.15em 0.1em 0.08em;
  text-align: center;
  font-family: var(--geometriaB);
}

.sign {
  border: 1em solid #fb4b4f;
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  width: 18em;
  height: 18em;
}

.legendas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.notify{
  background: url(./assets/images/speak-baloon.svg) no-repeat center left;
  background-size: contain;
  /*
  position: absolute;
  padding: 5px;
  top: 40%;
  width: 80%;
  left: -140px;
  backdrop-filter: drop-shadow(4px 4px 4px #000);
  -webkit-backdrop-filter: drop-shadow(4px 4px 4px #000);*/

}

.mask{
  padding: 0px;
  position: absolute;
  mask: url('./assets/images/map-brasil-dot.svg');
  -webkit-mask: url('./assets/images/map-brasil-dot.svg');
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.badget{
  padding: 0.445em 0.825em;
  text-align: center;
  font-family: var(--navigo);
  border: 2px solid var(--amarelo);
  background-color: var(--branco);
  border-radius: 16px;
  width: auto;
  font-size: clamp(1rem, -0.475rem + 3.6vw, 1.45rem);
  display: inline-block;
}

.mesh1 {
  background: url(./assets/images/bg-mesh-01.webp) no-repeat center center;
  background-size: cover;
  min-height: 280px;
}
.mesh2 {
  background: url(./assets/images/bg-mesh-02.webp) no-repeat center center;
  background-size: cover;
  min-height: 280px;
}
.mesh3 {
  background: url(./assets/images/bg-mesh-03.webp) no-repeat center center;
  background-size: cover;
  min-height: 280px;
}

.mask-not {
  width: 100%;
  height: 100%;
  max-height: 120px;
  background: linear-gradient(0deg, rgba(246,246,240,0) 0%, rgba(246,246,240,1) 80%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.speed {
  background: url(./assets/images/bg-speed.webp) no-repeat top right;
  background-size: cover;
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 766px) {
  .speed {
    background: url(./assets/images/bg-speed.webp) no-repeat top left;
    background-size: cover;
  }
}
.showchar {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

@keyframes draw {
  from {
    stroke-dasharray: 0 100;
  }
}

ul.check {
  list-style-type: none;
}

ul.check li:before {
  content: '\2014';
  position: absolute;
  margin-left: -20px;
}

.overlay {
    position: absolute;
    background: rgba(113,113,125,0.75);
    /*min-height: 100%;*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.dropdown:hover .dropdown-menu {
    display: block;
    z-index: 10;
  }
  
  
  /* Display drop-down menu on hover */
  nav ul li:hover > ul {
      display: inherit;
  }
      
  /* Change this in order to change the symbol of the drop-down menu */
  li > a:after {
    content: '';
    font-size: 0.875rem;
    margin-left: 0.5rem;
  }
  li > a:only-child:after {
    content: '';
  }
  
  .search-input::placeholder{
    font-size: medium;
    color: #fff;
  }
  
  
  .nav-language {
    width: auto;
    background-color: #4c3c7e;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
    line-height: 1;
    display: flex;
    align-items: center;
    border-radius: 70px 0px 0px 70px;
    position: fixed;
    right: 0px;
    /*top: 138px;*/
    padding: 6px 4px 6px 6px;
    gap: 5px;
    transition: all .3s ease-in-out;
    z-index: 10;
  }
  
  /*
  .nav-language.closed {
    width: 96px;
    background-color: var(--yellow-attention);
    color: var(--white);
    font-size: 0.8rem;
    line-height: 1.2;
    display: flex;
    align-items: center;
    border-radius: 70px 0px 0px 70px;
    position: absolute;
    top: 138px;
    padding: 6px 4px 6px 6px;
    gap: 6px;
    overflow: hidden;
    right: -68px;
    transition: all .5s ease-in-out;
  }
  */
  .nav-language a {
    color: var(--branco);
    font-size: 0.685rem;
    cursor: pointer;
  }
  
  .nav-language a:hover {
    color: var(--branco);
    font-size: 0.685rem;
    text-decoration: underline;
  }
  
  #switcher.trigger {
    display: flex;
    width: 64px;
    gap: 8px;
  }
  
  .esconde {
      -webkit-animation:elastic once infinite;
      -webkit-animation-name: run;
      -webkit-animation-duration: 1s;
  }     
      @-webkit-keyframes run {
      0% { left: 90%;}
      50%{ left : 100%;}
      100%{ left : 90%;}
  }

  body > .skiptranslate,.goog-logo-link,.gskiptranslate,.goog-te-gadget span,.goog-te-banner-frame,#goog-gt-tt, .goog-te-balloon-frame,div#goog-gt-{
    display: none!important;
  }
  #google_translate_element {
    text-align: center;
  }
  .goog-te-gadget {
    color: transparent!important;
    font-size:0px;
  }
  .goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
  }
  #google_translate_element select{
    background:var(--cianoclaro);
    color: var(--cinza);
    border: none;
    font-weight:bold;
    border-radius:3px;
    padding:8px 12px
  }





@-webkit-keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translateY(-25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translateY(-25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes slideInleft {
  0% {
    opacity: 0;
    transform: translateX(25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInleft {
  0% {
    opacity: 0;
    transform: translateX(25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(-25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(-25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.75);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.75);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes zoomReverseIn {
  0% {
    opacity: 0;
    transform: scale(1.25);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes zoomReverseIn {
  0% {
    opacity: 0;
    transform: scale(1.25);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes flipInY {
  0% {
    opacity: 0;
    transform: perspective(90vw) rotateY(67.5deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes flipInY {
  0% {
    opacity: 0;
    transform: perspective(90vw) rotateY(67.5deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
[data-animation] {
  opacity: 0;
  -webkit-animation-timing-function: var(--animation-timing-function);
          animation-timing-function: var(--animation-timing-function);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-duration: var(--animation-duration);
          animation-duration: var(--animation-duration);
  will-change: transform, opacity;
}

.animations-disabled,
.animations-disabled [data-animation] {
  -webkit-animation: none !important;
          animation: none !important;
  opacity: 1 !important;
}

.slideInUp {
  -webkit-animation-name: slideInUp;
          animation-name: slideInUp;
}

.slideInDown {
  -webkit-animation-name: slideInDown;
          animation-name: slideInDown;
}

.slideInLeft {
  -webkit-animation-name: slideInleft;
          animation-name: slideInleft;
}

.slideInRight {
  -webkit-animation-name: slideInRight;
          animation-name: slideInRight;
}

.fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
}

.zoomIn {
  -webkit-animation-name: zoomIn;
          animation-name: zoomIn;
}

.zoomReverseIn {
  -webkit-animation-name: zoomReverseIn;
          animation-name: zoomReverseIn;
}

.flipInY {
  -webkit-animation-name: flipInY;
          animation-name: flipInY;
}

.flipOutY {
  -webkit-animation-name: flipInY;
          animation-name: flipInY;
  animation-direction: reverse;
}



.swiper {
 overflow: visible !important;
}

.swiper-button-prev, .swiper-button-next {
    position: relative;
    /*top: var(--swiper-navigation-top-offset, 50%);
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    z-index: 10;*/
    width: 60px;
    cursor: pointer;
    display: flex;
    margin-top: 10px;
    align-items: center;
    justify-content: center;
    color: var(--gold);
}

.swiper-button-prev {
   background: url(./assets/images/arrow-left.svg) no-repeat center center;
}
.swiper-button-next {
   background: url(./assets/images/arrow-right.svg) no-repeat center center;
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    content: '';
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content: '';
}