@import url("https://use.typekit.net/qpq2rlm.css");
@import url('https://fonts.cdnfonts.com/css/euclid-circular-b');

:root {
    /* Fonts */
    --font-blenny: 'blenny', sans-serif;
    --euclid: 'Euclid Circular B', sans-serif;
                                                
    /* Colors */
    --white: #fff;
    --gray-light: #f3f3f3;
    --yellow-attention: #f8b526;
    --light-blue: #5cd5f1;
    --pink: #db2e6b;
}

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

.euclid {
    font-family: var(--euclid);
}

.blenny {
    font-family: var( --font-blenny);
}

.hero-01 {
    background: url(./assets/imagens/B_hero_01.jpg) center center no-repeat;
    min-height: calc(100vh - 133px);
    /*overflow: hidden;*/
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 766px) {
    .hero-01 {
        background: url(./assets/imagens/DOR_Campanha_Uso_Consciente_Home_mobile.jpg) top center no-repeat;
        min-height: calc(100vh - 64px);
        background-size: cover;
        }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 767px) {
    .hero-01 {
    background: url(./assets/imagens/DOR_Campanha_Uso_Consciente_Home_tablet.jpg) top center no-repeat;
    min-height: calc(100vh - 64px);
    background-size: cover;
    }
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1280px) {
    .hero-01 {
        background: url(./assets/imagens/B_hero_01.jpg) center center no-repeat;
        min-height: calc(100vh - 133px);
        background-size: cover;
    }
}

.hero-02 {
    background: var(--gray-light);
}

section.video {
    background: url(./assets/imagens/DOR_UsoConsciente_bg_f4f4_up.png) center center;
    
}

section.dados {
    background: url(./assets/imagens/DOR_UsoConsciente_dominoParalax_todos.png) 52% center no-repeat;
    background-size: cover;
}

section.items {
    background: url(./assets/imagens/DOR_UsoConsciente_bg_f4f4_down-xl.png);
    background-position: 0 -200px;
}

section.alert {
    background: url(./assets/imagens/DOR_UsoConsciente_bg_f4f4_down-xl.png);
    background-position: 0 -410px;
}

section.downloads {
    background: url(./assets/imagens/DOR_domino_bg_full.png) center center no-repeat;
    background-size: cover;
}

.guia {
    background: url(./assets/imagens/DOR_UsoConsciente_bg_f4f4_up.png) center center;
}

video.bg {
    position: relative;
    width: 100%;
    height: auto;
    object-fit: cover;
    pointer-events: none;
}
.overlay {
    position: absolute;
    text-align: center;
    background: rgba(0,0,0,0.60);
    min-height: 100%;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Flip card */

.flip-card {
    background-color: transparent;
    width: 310px;
    height: 310px;
    perspective: 1000px;
  }
  
  .flip-card-inner {
    position: relative;
    width: 310px;
    height: 310px;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -moz-backface-visibility: hidden; 
  }
  
  .flip-card:focus {
      outline: 0;
  }
  
  .flip-card:hover .flip-card-inner,
  .flip-card:focus .flip-card-inner{
    transform: rotateY(180deg);
    
  }
  
  .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 310px;
    height: 310px;
    border-radius: 18px;
  }
  
  .flip-card-front {
    background: #FFE31A;
    color: black;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .flip-card-back {
    background: #FFE31A;
    color: #403809;
    transform: rotateY(180deg);
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .flip-card-back h3 {
    font-size: 20px;
    font-family: "glodok", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #403809;
  }
  
  
  .gallery-cell {
    background-color: transparent;
    width: 310px;
    height: 310px;
    perspective: 1000px;
  }
  
  .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.5s;
    transform-style: preserve-3d;
  }
  
  .gallery-cell:hover .wrapper,
  .gallery-cell.flipped .wrapper {
    transform: rotateY(180deg);
  }
  
  .card__face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .card__face--front {
    background-color: transparent;
  }
  
  .card__face--back {
    background-color: #db2e6b;
    color: white;
    transform: rotateY(180deg);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .card_contents {
      overflow-y: hidden;
      margin: 0;
      display: flex;
  }

 .card_contents p{
     font-family: var(--euclid);
     padding: 0 2rem;
     line-height: 1.25;
     font-size: 1.10rem;
}


.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(--white);
  font-size: 0.685rem;
  cursor: pointer;
}

.nav-language a:hover {
  color: var(--white);
  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;
}
.goog-te-gadget {
  color: transparent!important;
  font-size:0px;
}
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}
#google_translate_element select{
  background:#2b1a12;
  color:#fff4e4;
  border: none;
  font-weight:bold;
  border-radius:3px;
  padding:8px 12px
}