@charset "UTF-8";

@font-face {
  font-family: ForleyBold;
  src: url("../fonts/ForleyOrange-Bold.woff2");
}

@font-face {
  font-family: ForleyRegular;
  src: url("../fonts/ForleyOrange-Regular.woff2");
}

@font-face {
  font-family: VelocitaZero;
  src: url("../fonts/Velocita-Zero.woff2");
}

:root {
  --hh-blue: #000533;
  --hh-neon: #00ffff;
}

.gab {background-color: #2f261e;}
.grillsnacks {background-color: #000;}
.spacecocktails {background-color: #010613;}
.harrytoast {background-color: white;}
.mainova {background-color: #012D73;}
.hdi {background-color: #00682A;}
.harrytype {background-color: #13368A;}
.fau {background-color: #013876;}
.fausymbols {background-color: #041E42;}
.fausans {background-color: white;}
.nrw {background-color: #384B6F;}
.walbusch {background-color: #002149;}
.wrt {background-color: #E2001A;}
.dmsoft {background-color: #0D44BA;}
.metabo {background-color: #0B453A;}
.nort {background-color: #11216E;}
.northeadline {background-color: white;}
.ika {background-color: #161C52;}
.ikacompact {background-color: #161C52;}
.sero {background-color: #172983;}
.velocita {background-color: #141624;}
.zwo {background-color: #FFD100;}
.forley {background-color: #000000;}
.mium {background-color: #280071;}


* {
  margin: 0;
  padding: 0;
  border: none;
  font-weight: 100;
  /* outline: hsla(180, 100%, 20%, 0.4) solid 1px; */
}

html {
  font-size: 1em;
}

body {
  font-family: ForleyRegular, system-ui, sans-serif;
  font-size: 1em;
  line-height: 1.5;
  background-color: var(--hh-blue);
  min-height: 100vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nowrap {
  white-space: nowrap;
}

a {
  border: none;
  text-decoration: none;
  color: var(--hh-neon);
}

nav a {
  color: var(--hh-blue);
}

b {
  font-family: ForleyBold, system-ui, sans-serif;
}

ul {
  list-style: none;
}

p {
  font-size: 1.2rem;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--hh-blue);
  padding: min(2vw, 1em) 6%;
  max-width: 46em;
  /* background-color: beige; */
}

h1,
h2,
h3 {
  font-family: VelocitaZero;
  color: var(--hh-blue);
  letter-spacing: -0.025rem;
  line-height: 1.1;
  text-wrap: pretty;
  text-wrap: balance;
}

h2 {
  font-size: 4.3rem;
}

h3 {
  font-size: 2rem;
  line-height: 1.3;
  padding: min(2vw, 1em) 6%;
}

.bold {
  font-family: ForleyBold, system-ui, sans-serif;
}

.bg-hh-neon{
  background-color: var(--hh-neon);
}



/*    P A G E S    */

.hero {
  width: 100vw;
  overflow: hidden;
  position: relative;
}

.awards {
  width: 20em; 
  padding-top: 2em;
}

.caseimg {
  width: 100vw;
}

.slideshow {
  position: relative;
  /* width: 100vw; */
  /* overflow: hidden; */
  /* background-color: #00682A; */
}

.slide {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity .8s ease;
}

.slide.active {
  opacity: 1;
}

.about img {
  margin: 2em;
  width: 20em !important;
  clip-path: circle(50% at 50% 50%);
}

.hero img,
.hero video {
  position: relative;
  width: 100vw;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}

.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  padding: 4em 0 3em 0;
}

.title {
  font-size: 5rem;
  color: var(--hh-neon);
  padding: 0.4em 5% 0.0em;
  max-width: 46em;
}

.subline {
  font-size: 2rem;
  color: var(--hh-neon);
  padding: min(2vw, 0.5em) 6% 0em;
  /* padding: 3em; */
  max-width: 46em;
  text-wrap: pretty;
  text-wrap: balance;
}

.description {
  padding: 2em;  
}

.description p {
  color: var(--hh-neon);
}

.white {
  color: white;
}

.hh-blue {
  color: var(--hh-blue) !important;
}

.hh-neon {
  color: var(--hh-neon);
}

.bg-white {
  display: flex;
  flex-direction: column;
  background-color: white;
}

.bg-hh-neon {
  display: flex;
  flex-direction: column;
  background-color: var(--hh-neon);
}

.caption {
  background-color: white;
  width: 100vw;
}

.caption p {
  font-size: 0.8rem;
  text-align: left;
  color: var(--hh-blue);
  padding: 2vw 4vw 4vw;
}

.divider {
  height: 4px;
}

@media only screen and (max-width: 600px) {
  .awards {
    width: 15em; 
  }
  
  .hero img,
  .hero video {
    width: 120vw;
  }

  .subline {
    font-size: 1rem;
  }
  
  p {
    font-size: 1rem;
  }

  .title {
    font-size: 1.7rem;
    line-height: 1.3;
    padding: 0.6em 3% 0.6em;
  }
  
  h2 {
    font-size: 1.7rem;
    line-height: 1.3;
  }
  
  h3 {
  font-size: 1.7rem;
  }

  .caption p {
    font-size: 0.7rem;
  }

}









/*    H E A D E R    */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 999;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

@media only screen and (min-width: 600px) {  
  .topspacer {
    height: 90px;
  }
}

.hh-logo {
  display: block;
}

.hh-logo img {
  width: 400px;
  padding: 20px;
}

.hamburger {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  width: 40px;
  height: 20px;
  padding: 20px;
  background-image: url(../img/menu.svg);
  background-size: 40%;
  background-position: center;
  background-repeat: no-repeat;
  /* background-color: #000533; */
}

.navOpen .hamburger {
  background-image: url(../img/menu-close.svg);
}

.hamburger:hover {
  cursor: pointer;
}

nav {
  position: fixed;
  z-index: 1000;
  width: 300px;
  height: 100dvh;
  top: 0;
  right: 0;
  text-align: left;
  background-color: var(--hh-neon);
  color:  var(--hh-blue);
  opacity: 0;
  transform-origin: top right;
  transform: scale(0%) translate(50%, -50%);
  filter: blur(400px);
  transition: all ease 0.3s;
}

.navOpen nav {
  opacity: 1;
  transform: scale(100%) translate(0%, 0%);
  filter: blur(0px);
}

body.navOpen {
  overflow: hidden;
}

body.navOpen::after {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 999;
  opacity: 0;
}

nav ul {
  display: flex;
  flex-direction: column;
  margin-top: 120px;
  margin-bottom: 120px;
}

nav a, 
.current {
  display: block;
  padding: 15px 20px;
}

nav a:hover {
  background-color: var(--hh-blue);
  color:  var(--hh-neon);
}

.current {
  background-color: white;
  color: var(--hh-blue);
}

@media only screen and (max-width: 600px) {
  .header {
    position: sticky;
    background-color: inherit;
  }
  
  .hh-logo img, .hamburger {
    padding: 5vw 4vw 4vw 4vw;
  }
  
  .hh-logo img {
    width: 65vw;
  }
  
  .hamburger img {
    width: 5vw;
  }
  
  .hamburger {
    width: 7vw;
    height: 5vw;
  }

  /* .navOpen .hamburger {
    width: 10vw;
  } */
  
  nav {
    width: 100vw;
    height: 100dvh;
  }
  
  nav ul {
    /* text-align: center; */
    gap: 20px;
    font-size: 1.7rem;
}

nav a, .current {
    padding: 5vw 4vw 4vw 4vw;
}
}



/*    F O O T E R    */

.footer {
  margin-top: 100px;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  justify-items: center;
}

.hh-logo-footer,
.footer p,
.footer-socials {
  color: var(--hh-neon);
  padding: 1em 0;
}

.hh-logo-footer img {
  width: 400px;
}

.footer p {
  padding-top: 0;
  padding-bottom: 30px;
  font-size: 0.9rem;
  text-align: center;
}

.footer-socials img {
  width: 5em;
}

.button {
  padding: 9px 16px 7px;
  margin: 60px 0;
  border-radius: 500px;
  font-family: VelocitaZero;
  letter-spacing: 0.075rem;
  line-height: 1;
  color: var(--hh-blue);
  background-color: var(--hh-neon);
}

.button:hover {
  color: var(--hh-neon);
  background-color: var(--hh-blue);
}

@media only screen and (max-width: 600px) {
  .footer {
    padding-bottom: 15vw;
  }

  .hh-logo-footer img {
    width: 75vw;
  }

  .footer-socials img {
    width: 18vw;
  }
}



/*    L A N D I N G P A G E    */

.casepreview {
  width: 100vw;
  height: auto;
  aspect-ratio: 16/9;
  overflow: hidden;
  display: flex;
  justify-content: center; 
  align-items: center;
}

.snippet img,
.snippet video {
  width: 100vw;
}

.snippet h1 {
  font-size: 2rem;
  text-align: left;
  padding: 15px 10px 0px 17px;
  color: var(--hh-neon);
}

.snippet p {
  font-size: 1.2rem;
  text-align: left;
  padding: 4px 10px 35px 19px;
  color: var(--hh-neon);
  text-wrap: pretty;
  text-wrap: balance;
}

@media only screen and (max-width: 600px) {

  .casepreview {
    aspect-ratio: 16/10;
  }

  .snippet img,
  .snippet video {
    width: 110%;
  }
  
  .snippet h1 {
    font-size: 1.6rem;
    padding: 3vw 4vw 0vw 3.5vw;
  }

  .snippet p {
    font-size: 1rem;
    padding: 1vw 4vw 8vw 4vw;
  }
}




/*    privacypolicy    */

body.privacypolicy {
  font-family: ForleyRegular, system-ui, sans-serif;
  font-size: 1em;
  line-height: 1.5;
  text-align: left;
}

.privacypolicy .section {
  align-items: flex-start;
}

.privacypolicy p {
  text-align: left;
  color: var(--hh-neon);
}

.privacypolicy h1,
.privacypolicy h2,
.privacypolicy h3,
.privacypolicy h4 {
  font-family: ForleyBold, system-ui, sans-serif;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--hh-neon);
  padding: min(2vw, 1em) 6%;
}

.privacypolicy h4 {
  padding-bottom: 0;
}