/* audi-fonts-css v1.4.1 */
@font-face{font-family:AudiType;font-stretch:100%;font-style:normal;font-weight:400;src:url(../fonts/AudiTypeVF.woff2) format("woff2-variations"),url(../fonts/AudiType-Normal.woff2) format("woff2"),url(../fonts/AudiType-Normal.woff) format("woff"),url(../fonts/AudiType-Normal.ttf) format("truetype")}@font-face{font-family:AudiType;font-stretch:100%;font-style:normal;font-weight:700;src:url(../fonts/AudiTypeVF.woff2) format("woff2-variations"),url(../fonts/AudiType-Bold.woff2) format("woff2"),url(../fonts/AudiType-Bold.woff) format("woff"),url(../fonts/AudiType-Bold.ttf) format("truetype")}@font-face{font-family:AudiType;font-stretch:100%;font-style:italic;font-weight:400;src:url(../fonts/AudiType-Italic.woff2) format("woff2"),url(../fonts/AudiType-Italic.woff) format("woff"),url(../fonts/AudiType-Italic.ttf) format("truetype")}@font-face{font-family:AudiType;font-stretch:100%;font-style:italic;font-weight:700;src:url(../fonts/AudiType-BoldItalic.woff2) format("woff2"),url(../fonts/AudiType-BoldItalic.woff) format("woff"),url(../fonts/AudiType-BoldItalic.ttf) format("truetype")}@font-face{font-family:AudiTypeExtended;font-stretch:130%;font-style:normal;font-weight:700;src:url(../fonts/AudiTypeVF.woff2) format("woff2-variations"),url(../fonts/AudiType-ExtendedBold.woff2) format("woff2"),url(../fonts/AudiType-ExtendedBold.woff) format("woff"),url(../fonts/AudiType-ExtendedBold.ttf) format("truetype")}@font-face{font-family:AudiTypeExtended;font-stretch:130%;font-style:normal;font-weight:400;src:url(../fonts/AudiTypeVF.woff2) format("woff2-variations"),url(../fonts/AudiType-ExtendedNormal.woff2) format("woff2"),url(../fonts/AudiType-ExtendedNormal.woff) format("woff"),url(../fonts/AudiType-ExtendedNormal.ttf) format("truetype")}@font-face{font-family:AudiTypeExtended;font-stretch:130%;font-style:italic;font-weight:400;src:url(../fonts/AudiType-ExtendedItalic.woff2) format("woff2"),url(../fonts/AudiType-ExtendedItalic.woff) format("woff"),url(../fonts/AudiType-ExtendedItalic.ttf) format("truetype")}@font-face{font-family:AudiTypeExtended;font-stretch:130%;font-style:italic;font-weight:700;src:url(../fonts/AudiType-ExtendedBoldItalic.woff2) format("woff2"),url(../fonts/AudiType-ExtendedBoldItalic.woff) format("woff"),url(../fonts/AudiType-ExtendedBoldItalic.ttf) format("truetype")}@font-face{font-family:AudiTypeWide;font-stretch:105%;font-style:normal;font-weight:700;src:url(../fonts/AudiTypeVF.woff2) format("woff2-variations"),url(../fonts/AudiType-WideBold.woff2) format("woff2") url(../fonts/AudiType-WideBold.woff) format("woff"),url(../fonts/AudiType-WideBold.ttf) format("truetype")}@font-face{font-family:AudiTypeWide;font-stretch:105%;font-style:normal;font-weight:400;src:url(../fonts/AudiTypeVF.woff2) format("woff2-variations"),url(../fonts/AudiType-WideNormal.woff2) format("woff2"),url(../fonts/AudiType-WideNormal.woff) format("woff"),url(../fonts/AudiType-WideNormal.ttf) format("truetype")}@font-face{font-family:AudiTypeWide;font-stretch:105%;font-style:normal;font-weight:200;src:url(../fonts/AudiType-WideLight.woff2) format("woff2"),url(../fonts/AudiType-WideLight.woff) format("woff"),url(../fonts/AudiType-WideLight.ttf) format("truetype")}.audifonts__audi-type{font-family:AudiType,sans-serif}.audifonts__audi-type-extended{font-family:AudiTypeExtended,sans-serif}.audifonts__audi-type-wide{font-family:AudiTypeWide,sans-serif}.audifonts--bold{font-weight:700}.audifonts--light{font-weight:200}.audifonts--italic{font-style:italic}

body{
    font-family: AudiTypeExtended;
    background-color: #dbdbdb;
   
}

.body_lock_scroll{
  overflow: hidden;
    max-height: 100vh;
    height: 100vh;
}

.opacity0{
  opacity: 0;
}
@media screen and (min-width: 1024px){
  .bug-dak {
      padding: 2rem 4.5rem 1rem;
}
}
/* Styles to make skrollable work. Copy these to your file. */
/* .skrollable {
    position:fixed;
    z-index:100;
 }
 .skrollr-mobile .skrollable {
    position:absolute;
 }
 .skrollable .skrollable {
    position:absolute;
 }
 
 .skrollable .skrollable .skrollable {
    position:static;
 } */
/* End skrollable styles */


/* 
https://bulma.io/documentation/ 
*/



#properties, .slide1, .slide2, .slide3, .cta_scroll_to_continue{
  pointer-events: none;
}

.cta_scroll_to_continue{
  z-index: 99999;
  color: aquamarine;
}

.layout {
    width: 1366px;
    height: 768px;
  
    display: grid;
    grid:
      "header" auto
      "main" 1fr
      "footer" auto
      / 1fr;
    gap: 8px;

  }

  .section {
    scroll-snap-type: y mandatory;
  }
  
  .header { grid-area: header; }
  .hero { grid-area: main; }
  .footer { grid-area: footer; }

  .hero-content{
    /* background: url(../assets/hero-image.png) center center no-repeat; 
    background-size: cover;
    */
    position: relative;
    z-index: 0;
  }

  .p_80{
    padding: 80px;
  }

  .p_0{
    padding: 0;
  }

  .hidden {
    display: none;
  }

  .title{
    font-weight: 200;
  }

  .title_tecnologias{

      z-index: 1;
      max-width: 90vw;
  
  }
  
  .hero.video .hero-video {
    position: relative;
    z-index: 0;
  }

    .hero-video {
    position: fixed;
    z-index:9999;
    left: 0;
    min-height: 100%;
    min-width: 100%;
    height: 90vh;
    /* left: 0; */
    /* top: 100vh; */
    transform: translate3d(0, 0, 0);
}



#controlsVideoHero:hover .img_play,
#controlsVideoHero:hover .img_pause,
#controlsVideoHero:hover .img_unmute,
#controlsVideoHero:hover .img_mute {
  opacity: 1;
}

.img_play {
  position: absolute;
  z-index: 99999 !important;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  background-image: url(../assets/imgs/play.png);
  background-size: 50px 50px;
  cursor: pointer;
  transition:  .5s ease;
  opacity: 0;
}

.img_pause{
  position: absolute;
  z-index: 99999 !important;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  background-image: url(../assets/imgs/pause.png);
  background-size: 50px 50px;
  display: none;
  cursor: pointer;
  opacity: 0;
  transition:  .5s ease;
}

.img_unmute{
  position: absolute;
  z-index: 99999 !important;
  top:0%;
  right:0%;
  width: 70px;
  height:70px;
  background-image: url(../assets/imgs/unmuted.png);
  background-size: 70px 70px;
  cursor: pointer;
  opacity: 0;
  transition:  .5s ease;
}

.img_mute{
  position: absolute;
  z-index: 99999 !important;
  top:0%;
  right:0%;
  width: 70px;
  height:70px;
  background-image: url(../assets/imgs/muted.png);
  background-size: 70px 70px;
  display: none;
  cursor: pointer;
  opacity: 0;
  transition:  .5s ease;
}


  .hero.video .hero-video video {
    width: 100%;
    height: 100%;
  }


  .hero-video video {
    left: 0;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 50%;
    transform: translate3d(0%, -55%, 0);
}

  .hero.video .hero-body {
  position: absolute;
  }

  .bgvid{
    /* background: url(../assets/video-image.png) center center no-repeat; */
  }

.tech-holder{
  position: absolute;
  width: 400vw;
  overflow: hidden;
}

.is_sticky{
  position: sticky;
  top:0;
  left:0;
}

.bottom_section{
  position: absolute;
  bottom:-100vh;
}

.s{
  position: absolute;
  top: 0;
  width:100vw;
  height:100vh;
  opacity: 0.5;
}


.slide{
  height: 100vh;
  width: 100vw;
  
}

.slide1{
  /* background-color: red; */
}

.slide2{
  /* background-color: yellow; */
}

.slide3{
  /* background-color: green; */
}

.slide4{
  background-color: #d9d9d9;
  opacity: 1;
  top:100vh;
}

footer{
  position: absolute;
    bottom: 0;
    width: 100vw;
    color: black;
    /* padding: 3rem 1.5rem 3rem !important; */
}

.container-intro-video-background, .container-intro-3d-background{
  position: absolute;
  min-width: 100vw;
  min-height: 100vh;
  overflow-y: hidden;
}

.intro-video-background, .intro-3d-background{
  position: absolute;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  /* height: auto; */
}

.intro-video-background {
  object-fit: cover;
}


.intro-3d-background{
  height: 100vh;
}


.video-background {
  width: 25%;
  position: absolute;
  /* min-width: 100vw;
  min-height: 100vh; */
}


/* #container {
  height: 250vh;
} */

.cursor_unmute {
  display: none;
  width: 50px;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  border: 1px solid black;
  border-radius: 50%;
  pointer-events: none;
  background-image: url('../assets/active-speaker.png');
  background-position: center;
  background-size: cover;
  filter: contrast(1.75);

}

.is_unmuted{
  pointer-events: none;
  background-image: url('../assets/inaactive-speaker.png');
}




/*  CROSS CORNER  */


.cross-corner_topleft {
    position: fixed; 
    z-index: 99999;
    left: 40px;
    top: 30px;
    background-image: url('../assets/imgs/cross.png'); 
    background-size: cover; 
    width: 20px;
    height: 20px; 
    pointer-events: none;
}

.cross-corner_topright {
    position: fixed;
    z-index: 99999;
    right: 40px;
    top: 30px;
    background-image: url('../assets/imgs/cross.png'); 
    background-size: cover; 
      width: 20px;
    height: 20px; 
    pointer-events: none;
}

.cross-corner_bottomleft {
    position: fixed; 
    z-index: 99999;
    left: 40px; 
    bottom: 30px;
    background-image: url('../assets/imgs/cross.png'); 
    background-size: cover; 
      width: 20px;
    height: 20px; 
    pointer-events: none;
}

.cross-corner_bottomright  {
    position: fixed; 
    z-index: 99999;
    right: 40px;
    bottom: 30px; 
    background-image: url('../assets/imgs/cross.png'); 
    background-size: cover; 
    width: 20px;
    height: 20px; 
    pointer-events: none;
}


.margen-frame-video  {
  padding: 50% 0;
}

.center_mobile_message{
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 90%;
}

.mobile-warning{
  min-height: 100vh;
  min-width: 100vw;
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999999;
  display: none;
  padding: 5vw;
}


.mobile-warning  img{
  padding: 20px;
  padding-top: 40px;
}


.mobile-warning-text{
  font-size: 16px;
  color: #fff;
}

.mobile-warning-text.small{
  font-size: 12px;
}

#output{
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100vh;
  min-width: 100vw;
  pointer-events: none;
}

@media screen and (max-width:980px) {
  .mobile-warning{
    display: block;
  }
 }


 .footer {
  padding: 20px 20px 20px 88px !important;
 }

 .footer .row {
   padding: 0 !important;
}

.footer a{
    color: #fff;
    cursor: pointer;
    font-family: 'AudiType';
    font-size: 12px;
    font-stretch: 105%;
    line-height: 20px;
    text-decoration: none;
    font-weight: 600;
}

.footer a:hover{
  color: #d9d9d9 !important;
}