:root {
  --logo-large: url("/images/Vierte-D.png");
  --logo-menu: url("/images/logo-cropped.png");
  --hero-large: url("/images/pexels-kevin-kobal-2314922.jpg");
  --icon-automate-mono: url("/images/icons/automate-monochrome.png");
  --icon-data-entry-mono: url("/images/icons/data-entry-monochrome.png");
  --icon-integration-mono: url("/images/icons/integration-monochrome.png");
  --icon-scheduling-mono: url("/images/icons/scheduling3-monochrome.png");
  --light: #eaeaea;
  --white: #ffffff;
  --logo-blue: #5290F7;
  --logo-tetra-purple: #B952F7;
  --logo-tetra-pink: #F75290;
  --instagram-purple: #663BBF;
  --instagram-pink: #DF3D41;
  --instagram-gradient: linear-gradient(to bottom left, var(--instagram-purple), var(--instagram-pink));
  --logo-gradient: linear-gradient(to bottom left, var(--logo-blue), var(--logo-tetra-purple));
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jost/v18/92zPtBhPNqw79Ij1E865zBUv7mz9JQVG.ttf) format('truetype');
}
@font-face {
  font-family: 'Rufina';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rufina/v15/Yq6V-LyURyLy-aKyow.ttf) format('truetype');
}
html {
  scroll-behavior: smooth;
}
html body {
  background: var(--white);
  font-family: 'Jost', sans-serif;
  min-width: 400px;
}
.masthead.segment {
  min-height: 700px;
  padding: 1em 0em;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), var(--hero-large) !important;
  background-size: cover !important;
  background-position-x: center !important;
  background-position-y: center !important;
  filter: grayscale(100%);
}
.masthead.segment::after {
  content: "";
  background: var(--logo-large) center;
  filter: contrast(0%) invert(100%) brightness(5);
  width: 60% !important;
  display: inline-block;
  background-size: 350px;
  background-repeat: no-repeat;
  overflow: visible;
  height: 660px;
}
.monologo {
  position: absolute;
  width: 50%;
  filter: contrast(0%) invert(100%) brightness(5);
  z-index: 10;
}
@media (max-width: 500px) {
  #stickymenu,
  #topmenu {
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  #stickymenu::-webkit-scrollbar,
  #topmenu::-webkit-scrollbar {
    display: none;
  }
}
.logo {
  width: 100px !important;
  margin-right: 1em;
  margin-bottom: -6px;
}
.logo.inverted {
  filter: contrast(0%) invert(100%) brightness(5);
}
.ui.vertical.stripe {
  padding: 8em 0em;
}
.ui.vertical.stripe h3 {
  padding-top: 3em;
  font-size: 2em;
}
.ui.vertical.stripe p {
  font-size: 1.33em;
}
.ui.vertical.stripe.intro {
  background: var(--instagram-gradient);
}
.ui.vertical.stripe.intro h3 {
  padding-top: 0;
  color: white;
}
.ui.vertical.stripe.contact h3 {
  padding-top: 0;
}
.ui.vertical.stripe.contact .message header {
  font-weight: bold;
}
.ui.vertical.stripe.contact .message p {
  font-size: 1em;
}
.ui.vertical.stripe.products h3 {
  padding-top: 1em;
  font-size: 2em;
}
.ui.vertical.stripe.products .column:nth-of-type(1) .product:has(>img) {
  -webkit-mask-image: var(--icon-automate-mono);
  mask-image: var(--icon-automate-mono);
  background: var(--logo-blue);
}
.ui.vertical.stripe.products .column:nth-of-type(2) .product:has(>img) {
  -webkit-mask-image: var(--icon-data-entry-mono);
  mask-image: var(--icon-data-entry-mono);
  background: var(--logo-blue);
}
.ui.vertical.stripe.products .column:nth-of-type(3) .product:has(>img) {
  -webkit-mask-image: var(--icon-integration-mono);
  mask-image: var(--icon-integration-mono);
  background: var(--logo-blue);
}
.ui.vertical.stripe.products .column:nth-of-type(4) .product:has(>img) {
  -webkit-mask-image: var(--icon-scheduling-mono);
  mask-image: var(--icon-scheduling-mono);
  background: var(--logo-blue);
}
.ui.vertical.stripe.products .product:has(>img) {
  height: 80px;
  -webkit-mask-position-x: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background: var(--instagram-gradient);
}
.ui.vertical.stripe.products .product:has(>img) > img {
  display: none;
}
.footer.segment {
  padding: 5em 0em;
}
