/* teilAuto overrides on top of slides.min.css (the car-sharing landing-page
   framework), modelled on buchbinder's bub-inline.css. Loaded last, only on "/". */

@font-face {
  font-family: "ZwoWeb-Regular";
  src: url("/assets/fonts/ZwoWeb-Regular.ttf");
  font-display: swap;
}
@font-face {
  font-family: "ZwoWeb-Italic";
  src: url("/assets/fonts/ZwoWeb-Italic.ttf");
  font-display: swap;
}
@font-face {
  font-family: "ZwoWeb-BoldItalic";
  src: url("/assets/fonts/ZwoWeb-BoldItalic.ttf");
  font-display: swap;
}

.hidden {
  display: none;
}
.page-loaded .scroll .slide {
  transition: none !important;
}

/* Brand fonts: body in ZwoWeb-Regular, headings in ZwoWeb-BoldItalic (the
   legal pages use the same faces). */
.slides,
.slides p,
.slides span,
.slides a {
  font-family: "ZwoWeb-Regular", sans-serif;
  font-weight: 400;
}
.slides h1,
.slides h2,
.slides h3,
.slides h4,
.slides h5,
.slides h6 {
  font-family: "ZwoWeb-BoldItalic", sans-serif;
  font-weight: 400;
}
.slides i {
  font-family: "ZwoWeb-Italic", sans-serif;
  font-style: normal;
}

/* Brand accent (teilAuto green) where buchbinder uses its red. */
.menuIndented li::before {
  content: "\00BB";
  display: inline-block;
  color: #75b42b;
}
.sidebar .mainMenu a {
  color: #75b42b !important;
}
.menu-subheadline {
  position: relative;
  font-weight: 800 !important;
  color: #666666;
}
.menu-subheadline::before {
  content: "";
  position: absolute;
  left: -40px;
  bottom: 12px;
  height: 2px;
  width: 28px;
  background: #666666;
}
li a {
  color: inherit !important;
}
p a,
a {
  color: #75b42b !important;
  font-weight: 500 !important;
}

/* Section padding and the hero background, as on buchbinder. */
.container .wrap:not(.noSpaces),
.container .wrap.spaceWrap,
.container .wrap .spaceWrap {
  padding: 90px calc(8% + 15px);
}
.background {
  object-fit: cover;
  height: 100vh;
  width: 100%;
}

/* Entrance animations the framework runtime would trigger: show at once. */
.slides [class*="ae-"],
.slides .fromLeft,
.slides .fromRight,
.slides .fromCenter,
.slides .later {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.slides .kenBurns .background {
  opacity: 1 !important;
}

/* Hero: same sizes as buchbinder's slide 1; the signup widget takes the place
   of the phone mockup in the right column, styled as in the customer
   integration guide (370px, min 420px, rounded, shadow; 90% of the screen and
   centred on phones). iframe-resizer sets the height. */
#SignUpWidget {
  display: block;
  margin: 0 auto;
  border: none;
  border-radius: 10px;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
  width: 370px;
  min-height: 420px;
}
@media (max-width: 600px) {
  /* 90% of the viewport, centred in it: the column sits inside the wrap's
     side padding, so the frame is pulled out by the difference. */
  #SignUpWidget {
    width: 90vw;
    margin-left: calc(50% - 45vw);
  }
}
@media (min-width: 769px) {
  .slide.portalHero .container .wrap {
    padding-top: 90px;
  }
  .portalHero h1 {
    font-size: 36px;
  }
  .portalHero p.large {
    font-size: 17px;
  }
  .portalHero .button img {
    width: auto;
    height: 48px;
  }
}
/* The widget is taller than a phone screen: let the slide grow instead of
   clipping, stack the columns and give them room. */
@media (max-width: 768px) {
  .slide.portalHero {
    height: auto !important;
    min-height: 100vh;
  }
  .slide.portalHero .content,
  .slide.portalHero .container {
    height: auto;
    min-height: 100vh;
  }
  .slide.portalHero .container .wrap {
    padding-top: 120px;
    padding-bottom: 96px;
  }
  #SignUpWidget {
    margin-bottom: 56px;
  }
  .portalHero h1 {
    margin-bottom: 28px !important;
  }
  .portalHero p.large {
    margin-bottom: 48px !important;
  }
}