/* Compatibility styles for the Vue migration. Original GraphBerry styles are in main.css. */
@font-face { font-family: Oswald; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/oswald-latin-300.woff2') format('woff2'); }
@font-face { font-family: Oswald; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/oswald-latin-400.woff2') format('woff2'); }
@font-face { font-family: Oswald; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/oswald-latin-700.woff2') format('woff2'); }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
section[id], .contact-anchor { scroll-margin-top: 90px; }
.home-fullscreen { min-height: 600px; height: 100svh; }
.hero-title { margin: 0; }
.hero-content { position: relative; }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #fff; padding: 0 10px; }
.hero-prev { left: 0; }
.hero-next { right: 0; }
.godown, .goup { display: grid; place-items: center; color: #000; }
.goup { display: inline-grid; }
.heading > .section-description { color: #707070; text-transform: none; font-size: 16px; font-weight: 300; line-height: inherit; width: 80%; margin: 0 auto; }
.branded-section .heading > .section-description, .branded-section .heading > div { color: #fff; }
.section-description > p { width: 100%; }
.heading h2 { font-size: 30px; margin-top: 20px; margin-bottom: 10px; }
.feature-description { margin-bottom: 10px; }
.process .heading h2 { color: #fff; font-size: 20px; }
.process-item img { object-fit: contain; }
.contact-call-to-action { text-align: center; margin-bottom: 50px; }
.centered-pills .nav-pills { display: flex; justify-content: center; flex-wrap: wrap; }
.nav-pills > li > button { text-transform: uppercase; font-size: 16px; font-weight: 300; color: #707070; padding: 10px 0; background: transparent; border: 0; }
.nav-pills > li > button::before { content: '\f0c8'; margin: 0 15px; font-family: FontAwesome; font-size: 16px; }
.nav-pills > li:first-child > button::before { display: none; }
.nav-pills > li.active > button, .nav-pills > li > button:hover { color: #e3d54e; }
.ambient-button { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; }
.ambient-button img { width: 100%; }
.ambient-title { display: block; color: #fff; text-transform: uppercase; font-size: 16px; font-weight: 700; }
.ambient-button:focus-visible .mask { opacity: 1; }
.ambient-viewer { width: min(1100px, 96vw); max-height: 95svh; border: 0; padding: 40px; background: #131316; color: #fff; overflow: auto; }
.ambient-viewer::backdrop { background: rgba(0,0,0,.85); }
.ambient-viewer figure { margin: 0; text-align: center; }
.ambient-viewer figure img { max-width: 100%; max-height: 75svh; object-fit: contain; }
.ambient-viewer figcaption { padding-top: 12px; }
.ambient-viewer button { position: absolute; background: #131316; color: #fff; border: 0; font-size: 32px; width: 40px; }
.viewer-close { top: 0; right: 0; }
.viewer-prev { top: 50%; left: 0; }
.viewer-next { top: 50%; right: 0; }
.contact-link, .location-address { color: #707070; overflow-wrap: anywhere; }
.contact-status { text-align: center; color: #fff; background: #234c2e; padding: 15px; }
.contact-error { background: #6a291f; }
.contact-trap { position: absolute; left: -10000px; }
.form-control { height: auto; }
.product-page { min-height: 80vh; padding: 130px 0 70px; }
.products-page { padding-top: 100px; }
.product-breadcrumb { padding: 20px 0; }
.product-actions { text-align: center; padding: 40px 0; }
.product-actions a { display: inline-block; margin: 10px; }
.product-image { max-height: 500px; margin: auto; }
:focus-visible { outline: 3px solid #e3d54e; outline-offset: 3px; }
@media (max-width: 767px) {
  .home-fullscreen { min-height: 500px; }
  .slide { padding: 30px 10px; }
  .hero-title .lead { font-size: clamp(28px, 7vw, 45px); width: 85%; }
  .navbar-brand img, .navbar-small .navbar-brand img { max-width: 220px; height: auto; }
  .navbar-collapse.in { background: #131316; max-height: calc(100svh - 80px); }
  .navbar-smak .nav { padding: 5px 0; }
  .navbar-nav > li > a { padding: 14px 20px; }
  .contact-form .form-control { margin-bottom: 15px; }
  .process-item { margin-bottom: 30px; }
  .ambient-viewer { padding: 40px 25px; }
  .number-item { margin-bottom: 20px; }
  .contact-link { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .branded-section, .home { background-attachment: scroll; }
}