@tailwind base;
@tailwind components;
@tailwind utilities;
@import url(./assets/geometria/style.css);
@import url("https://use.typekit.net/iwa1eaz.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;

    --mono45: "mono45-headline", monospace;

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

    --red: #fb4b4f;
    --darkred: #6f051d;
    --black: #1e1414;
    --gray25: #c7c4c4;
    --gray75: #564f4f;
    --mediumblack: #342b2c;
    --lightblack: #403737;
    --sand: #faf3e9;
    

    --cianoclaro: #ADE7EE;
    --ciano: #2FB0C6;
    --cinzaclaro: #E9E9EF;
    --cinza: #71717D;
    --laranja: #ea983e;
    --roxo: #4c3c7e;
}

*,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);
}

.mono45EL {
  font-family: var(--mono45);
  font-weight: 100;
  font-style: normal;
}

.mono45L {
  font-family: var(--mono45);
  font-weight: 300;
  font-style: normal;
}

.mono45 {
  font-family: var(--mono45);
  font-weight: 500;
  font-style: normal;
}

.mono45B {
  font-family: var(--mono45);
  font-weight: 700;
  font-style: normal;
}

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

/* Sections */
.hero {
    min-height: calc(100vh - 62px);
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 766px) {
    .hero {
        min-height: calc(100vh - 62px);
        background-size: cover;
        }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 1023px) {
    .hero {
    min-height: calc(100vh - 63px);
    background-size: cover;
    }
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1280px) {
    .hero {
        min-height: calc(100vh - 128px);
        background-size: cover;
    }
}

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

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

@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;
}