.h-300px {
   height: 300px;
}

.h-350px {
   height: 350px;
}

.min-h-350px {
   min-height: 350px;
}

.min-h-260px {
   min-height: 260px;
}

.hidden {
      display: none !important;
}

.opacity-0 {
      opacity: 0 !important;
}

/* Loader do vídeo da home: overlay absoluto sobre a área reservada do hero
   (antes ficava no fluxo com altura fixa de 1071px no desktop, somando um
   segundo salto de layout enquanto o vídeo carregava). */
.card-video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #c7c7c7;
   z-index: 20;
   transition: opacity .3s ease;
}


/* HTML: <div class="loader"></div> */
.loader {
   width: 50px;
   --b: 8px;
   aspect-ratio: 1;
   border-radius: 50%;
   padding: 1px;
   background: conic-gradient(#0000 10%,#ed5623) content-box;
   -webkit-mask: repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg), radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
   -webkit-mask-composite: destination-in;
   mask-composite: intersect;
   animation: l4 1s infinite steps(10);
}

@keyframes l4 {
   to {
      transform: rotate(1turn)
   }
}

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
   display: block;
   max-width: 100%;
   height: auto;
}

@font-face {
   font-family: 'Raleway-Bold';
   src: url("../fonts/Raleway-Bold.ttf") format("truetype");
}

@font-face {
   font-family: 'Raleway-ExtraBold';
   src: url("../fonts/Raleway-ExtraBold.ttf") format("truetype");
}

@font-face {
   font-family: 'Raleway-Light';
   src: url("../fonts/Raleway-Light.ttf") format("truetype");
}

@font-face {
   font-family: 'Raleway-Regular';
   src: url("../fonts/Raleway-Regular.ttf") format("truetype");
}

@font-face {
   font-family: 'Raleway-Thin';
   src: url("../fonts/Raleway-Thin.ttf") format("truetype");
}

.titulo-home {
   z-index: 777;
   color: #ffffff;
   top: 25vw;
   width: 100%;
   padding: 0 22vw;
   font-size: 4vw;
   letter-spacing: 3vw;
   text-align: center !important;
   text-shadow: 2px 2px 2px #ffffff !important;
   font-family: "Raleway-Light", sans-serif !important;
   font-weight: 200 !important;
   line-height: 1.42857143;
}

h3.heading-h3 {
   font-size: 30px;
}

.area-video {
   position: relative;
   width: 100%;
   padding: 0;
   top: -90px;
   margin-bottom: -97px;
   overflow: hidden;
}

   /* Reserva a altura do hero ANTES de o vídeo carregar (o Vídeo01_SITE.mp4 é
      3840x2160 = 16:9). Sem isso, o <video> sem metadados cai no tamanho padrão
      de mídia (300x150), a área nasce "menor" e a página salta quando o vídeo
      chega. Técnica do padding-top (56.25% = 9/16) por compatibilidade ampla. */
   .area-video::before {
      content: "";
      display: block;
      padding-top: 56.25%;
   }

   /* Fora do fluxo: o tamanho intrínseco do vídeo nunca mais dita o layout */
   .area-video video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
   }

   .area-video img {
      width: 100%;
      height: calc(100% - 7px);
      position: absolute;
   }

.portfolio-details-list.coluna {
   display: -ms-grid;
   display: grid;
   -ms-grid-columns: 1fr 30px 1fr;
   grid-template-columns: repeat(1, 1fr);
   grid-gap: 62px 30px;
}

.inner-text {
   width: 100%;
   padding: 0 22vw;
   letter-spacing: 3vw;
   text-align: center !important;
   font-weight: 200 !important;
   line-height: 1.42857143;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
   z-index: 10;
}

   .inner-text .text-top {
      font-size: 4vw;
      font-family: "Raleway-Light", sans-serif !important;
      font-weight: 100 !important;
      text-shadow: 2px 2px 2px #000 !important;
      color: #ffffff;
   }

   .inner-text .text-bottom {
      letter-spacing: 0.2vw;
      font-size: 2.5vw;
      font-family: "Raleway-Light", sans-serif !important;
      text-align: center !important;
      text-shadow: 2px 2px 2px #ffffff !important;
      color: #25272b;
      font-family: Raleway, sans-serif !important;
   }

video {
   object-fit: contain;
   overflow-clip-margin: content-box;
   overflow: clip;
}

audio, canvas, progress, video {
   display: inline-block;
   vertical-align: baseline;
}

.header-default .header__wrapper .header-left .logo a img {
   padding-top: 30px;
   padding-bottom: 30px;
   width: 150px;
   height: auto;
   max-width: 100%;
}

.header-default.headroom--not-top .header__wrapper .header-left .logo a img {
   width: 90px;
}

.brand {
   height: 60px !important;
}

   .brand a img {
      align-items: center !important;
      text-align: center !important;
      vertical-align: middle !important;
      height: 100% !important;
      max-height: 100%;
      max-width: 100%;
      object-fit: contain;
   }

.brand-arrow .slick-btn i {
   color: #ffffff;
}

a {
   color: #ed5623;
}

   a:active, a:hover {
      color: #d44a1b;
      outline: 0;
   }

.copyright .copyright-left p {
   margin: 0;
   font-size: 14px;
   font-weight: 500;
   line-height: 2;
   font-family: "Montserrat", sans-serif;
   color: #ffffff;
   opacity: 0.7;
}

.copyright .copyright-right p {
   opacity: 0.7;
}


/* Brand Guideline Colors */
.bg-azul-abissal { background-color: #004888 !important; }
.text-azul-abissal { color: #004888 !important; }
.bg-onda-celeste { background-color: #00A0DD !important; }
.text-onda-celeste { color: #00A0DD !important; }
.border-onda-celeste { border-color: #00A0DD !important; }

/* Ajustes Mobile para o Video e Texto Inicial */
@media (max-width: 767px) {
    .area-video {
        top: -80px;
        margin-bottom: -80px;
    }
    .area-video video {
        object-fit: cover;
        min-height: 450px;
    }
    .inner-text {
        padding: 0 2vw;
        letter-spacing: 0;
        top: 55%;
    }
    .inner-text .text-top {
        font-size: 6vw;
        letter-spacing: 0.5vw;
        width: 100%;
        margin: 0 auto;
    }
    .inner-text .text-bottom {
        font-size: 3.5vw;
        letter-spacing: 0;
        margin-top: 10px;
    }
}