/*
Theme Name: SULO
Theme URI: https://www.sulo.com
Author: effective webwork GmbH
Author URI: https://www.effective-webwork.de/
Description: Client-Theme SULO
Version: 1.0
*/


/*----------------------------------------------------------------------
Sidemenu (Content Navigation)
----------------------------------------------------------------------*/

/* Normal im Flow */
.is-content-nav {
  background: #fff;
  padding: 16px;
  line-height: 1.6;
  transition: all 0.3s ease;
}

/* Titel */
.is-content-nav .widget-title {
  margin: 0 0 10px;
  font-weight: 600;
}

/* Listen-Grundstruktur */
.is-content-nav ul,
.is-content-nav ol {
  margin: 0 0 0 1.2em; /* Einrückung für Hierarchie */
  padding: 0;
    list-style: none !important;
}
.is-content-nav > ul,
.is-content-nav > ol {
  list-style: none; /* nur Top-Level ohne Bullet */
  margin: 0;
  padding: 0;
}

.is-content-nav li { margin: 6px 0; }

.is-content-nav a {
  color: #333;
  text-decoration: none;
}
.is-content-nav a.active {
  font-weight: 600;
  color: #f00;
}

/* Fixierte kompakte Variante (Desktop) */
.is-content-nav.fixed {
  position: fixed;
  top: 15%;
  left: 0;
  width: 180px;
  font-size: 14px;
  padding: 20px;
  z-index: 100;
}
.is-content-nav.fixed .widget-title { font-size: 16px; }

/* Tablet & Mobile als Dock unten */
@media (max-width: 1024px) {
  .is-content-nav,
  .is-content-nav.fixed,
  .is-content-nav.mobile-docked {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 50px !important;
    background: #fff;
    border-top: 1px solid #ddd;
    padding: 8px 0;
    z-index: 200;
    overflow: hidden;
  }

  .is-content-nav .widget-title,
  .is-content-nav.mobile-docked .widget-title {
    display: none;
  }

  .is-content-nav ul,
  .is-content-nav.mobile-docked ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0;
    padding: 0 8px;
    -webkit-overflow-scrolling: touch;
    list-style: none; /* mobile = keine Bullets */
  }

  .is-content-nav li,
  .is-content-nav.mobile-docked li {
    flex: 0 0 auto;
    margin: 0 12px;
    white-space: nowrap;
  }

  .is-content-nav a,
  .is-content-nav.mobile-docked a {
    font-size: 14px;
    padding: 6px 0;
    display: inline-block;
  }

  .is-content-nav a.active,
  .is-content-nav.mobile-docked a.active {
    border-bottom: 2px solid #f00;
    color: #f00;
  }
}

/*----------------------------------------------------------------------
Clone (Sticky Variante)
----------------------------------------------------------------------*/

/* Basis */
.nav-clone {
  background: #fff;
  z-index: 2000;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity .25s ease, transform .25s ease;
}

/* Desktop */
.nav-clone.fixed {
  position: fixed;
  top: 15%;
  left: 0;
  width: 160px;
  padding: 20px 2px;
  font-size: 14px;
}
.nav-clone.fixed.nav-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Mobile */
@media (max-width: 1024px) {
  .nav-clone.mobile-docked {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50px;
    background: #fff;
    border-top: 1px solid #ddd;
    padding: 8px 0;
    overflow: hidden;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
  }

  .nav-clone.mobile-docked .widget-title { display: none; }

  .nav-clone.mobile-docked ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0;
    padding: 0 8px;
    -webkit-overflow-scrolling: touch;
    list-style: none;
  }

  .nav-clone.mobile-docked li {
    flex: 0 0 auto;
    margin: 0 12px;
    white-space: nowrap;
  }

  .nav-clone.mobile-docked a {
    font-size: 14px;
    padding: 6px 0;
    display: inline-block;
  }

  .nav-clone.mobile-docked a.active {
    border-bottom: 2px solid #f00;
    color: #f00;
  }

  .nav-clone.mobile-docked.nav-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/*----------------------------------------------------------------------
Desktop Idle Fade
----------------------------------------------------------------------*/
@media (min-width: 1025px) {
  .nav-clone.fixed:not(:hover) .widget-title { opacity: .5; }
  .nav-clone.fixed:not(:hover) a { opacity: .35; transition: opacity .2s ease; }
  .nav-clone.fixed:not(:hover) a.active { opacity: 1; font-weight: 600; }
  .nav-clone.fixed:hover .widget-title,
  .nav-clone.fixed:hover a { opacity: 1; }
  .nav-clone.fixed a:focus-visible {
    opacity: 1 !important;
    outline: 2px solid #f00;
    outline-offset: 2px;
  }
}




/* --- Mobile/Tablet: Bottom-Bar mit sicherem Horizontal-Scroll --- */
@media (max-width: 1024px) {
  .nav-clone.mobile-docked {
    position: fixed;
    bottom: env(safe-area-inset-bottom); /* iPhone Safe-Area */
    left: 0;
    right: 0;
    width: 100%;
    height: 50px;
    background: #fff;
    border-top: 1px solid #ddd;
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
    z-index: 2000;
    /* WICHTIG: kein overflow:hidden hier – der UL ist der Scroller */
    overflow: visible;
  }

  .nav-clone.mobile-docked .widget-title { display: none; }

  /* Der eigentliche Scroller */
  .nav-clone.mobile-docked ul {
    display: grid;
    grid-auto-flow: column;         /* Items in einer Zeile */
    grid-auto-columns: max-content; /* Breite = Inhalt */
    gap: 16px;                      /* Abstand zwischen Items */

    overflow-x: auto;               /* Horizontal scrollen */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* iOS Momentum */
    overscroll-behavior-x: contain;    /* kein Seiten-Bounce */
    touch-action: pan-x;               /* explizit horizontales Wischen */

    margin: 0;
    padding: 0 12px;
    list-style: none;

    /* optional: sanftes Ein-/Ausschnappen beim Scrollen */
    scroll-snap-type: x proximity;
  }

  .nav-clone.mobile-docked li {
    /* grid steuert die Flusslogik, li nur als Container */
    margin: 0;
    white-space: nowrap;             /* kein Umbruch */
  }

  .nav-clone.mobile-docked a {
    display: block;
    font-size: 14px;
    padding: 6px 0;
    white-space: nowrap;
    scroll-snap-align: center;       /* optional: Snap in die Nähe der Mitte */
  }

  .nav-clone.mobile-docked a.active {
    border-bottom: 2px solid #f00;
    color: #f00;
  }

  /* Scrollbar unsichtbar, aber funktional */
  .nav-clone.mobile-docked ul::-webkit-scrollbar { display: none; }
  .nav-clone.mobile-docked ul {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}





/*----------------------------------------------------------------------
Responsive Table Layout
----------------------------------------------------------------------*/
/* --- Container & collapse --- */
.specs-block{ position:relative; }

.table-wrap{
  --collapsed-height: 20vh;          /* default; can be overridden by data-collapsed-height or JS */
  position: relative;
  max-width: 100%;
  overflow-x: auto;                  /* horizontal scroll */
  -webkit-overflow-scrolling: touch; /* smooth iOS */
  overscroll-behavior: contain;
  cursor: grab;                      /* hint: drag left/right on desktop */
  touch-action: pan-x;               /* allow horizontal swipes */
  transition: max-height .28s ease;
}
.table-wrap.collapsed{
  max-height: var(--collapsed-height);
  overflow-y: hidden;                /* hide vertical overflow when collapsed */
}

/* Bottom fade + centered toggle button (visible only when collapsed) */
.fade-veil{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 72px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: .5rem;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}
.table-wrap:not(.collapsed) .fade-veil{ display: none; }

.expand-btn{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem;
  font: 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #111827; background: #fff;
  border: 1px solid #e5e7eb; border-radius: .5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  cursor: pointer;
  z-index: 3;
}

/* --- Table base --- */
.spec-table{
  border-collapse: separate; /* needed for sticky */
  border-spacing: 0;
  width: 100%;
  table-layout: auto;        /* let content decide widths for readability */
  min-width: 1650px;         /* forces horizontal scroll on small screens */
  font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Cells */
.spec-table td{
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--sulo-lightgrey);
  white-space: nowrap;       /* keep measurements on one line */
  overflow: hidden;
  text-overflow: ellipsis;
  background: #fff;          /* for sticky overlap (Safari/iOS) */
}

/* Sticky header: your first row is the header */
.spec-table tr:first-child td{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sulo-lightgrey);
  font-weight: 600;
}

/* Sticky first column (all rows) */
.spec-table :is(td,th):first-child{
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fff;
  text-align: left;
}
/* Corner cell above everything */
.spec-table tr:first-child :is(td,th):first-child{ z-index: 4; }

/* Readable minimum widths per column (tweak as needed) */
.spec-table td:nth-child(1){  min-width: 260px; } /* Produkt */
.spec-table td:nth-child(2){  min-width: 160px; } /* Deckel */
.spec-table td:nth-child(3){  min-width: 140px; } /* Höhe gesamt */
.spec-table td:nth-child(4){  min-width: 210px; } /* Oberkante Kammaufnahme */
.spec-table td:nth-child(5){  min-width: 150px; } /* Tiefe */
.spec-table td:nth-child(6){  min-width: 150px; } /* Breite */
.spec-table td:nth-child(7){  min-width: 160px; } /* Durchmesser Rad */
.spec-table td:nth-child(8){  min-width: 140px; } /* Nennvolumen */
.spec-table td:nth-child(9){  min-width: 150px; } /* Leergewicht */
.spec-table td:nth-child(10){ min-width: 170px; } /* max. Füllgewicht */
.spec-table td:nth-child(11){ min-width: 180px; } /* Zul. Gesamtgewicht */
.spec-table td:nth-child(12){ min-width: 230px; } /* Einwurfmaß */
.spec-table td:nth-child(13){ min-width: 140px; } /* Achsen Typ */

/* Hover aid (optional) */
.spec-table tr:not(:first-child):hover td,
.spec-table tr:not(:first-child):hover td:first-child{ background: #f9fafb; }

/* Mobile fine-tuning */
@media (max-width: 480px){
  .spec-table{ font-size: 13px; min-width: 1400px; }
}



/*----------------------------------------------------------------------
build in: 11 2021
copyright: effective webwork GmbH
----------------------------------------------------------------------*/
.admin-bar header {
  margin-top: 32px;
}



/*----------------------------------------------------------------------
colors
----------------------------------------------------------------------*/

:root {
    --sulo-red: #EB0000; /* Accessibility: EB0000 */
    --sulo-white: #FFFFFF;
    --sulo-black: #000000;
    --sulo-deepgrey: #202020;
    --sulo-darkgrey: #333333;
    --sulo-midgrey: #555555;
    --sulo-smokegrey: #AAAAAA;
    --sulo-lightgrey: #F6F6F6;
    --sulo-green: #1fa138; /*#76B843;*/
    --sulo-blue: #3E99D4;
    --sulo-yellow: #ffc06d;
    }


/*----------------------------------------------------------------------
Fonts
----------------------------------------------------------------------*/

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v29-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v29-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v29-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v29-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v29-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v29-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v29-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v29-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-condensed-v19-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-condensed-v19-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-condensed-v19-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-condensed-v19-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-condensed-v19-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-condensed-v19-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-slab-regular - latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-slab-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-slab-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-slab-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-slab-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-slab-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-slab-v16-latin-regular.svg#RobotoSlab') format('svg'); /* Legacy iOS */
}


/*----------------------------------------------------------------------
global structure & normalize
----------------------------------------------------------------------*/

body {
    margin: 0;
    border: 0 none;
    padding: 0;
    color: var(--sulo-midgrey);
    background: var(--sulo-white);
    font-family: 'Roboto', 'Arial', sans-serif;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    }

p, form, img, legend, ul, ol, li, h1, h2, h3, h4, h5, h6, dl, dt, dd {
    margin: 0;
    border: 0 none;
    padding: 0;
    }

input, textarea, button, select {
    margin: 0;
    font: inherit;
    text-transform: none;
    accent-color: var(--sulo-red);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }

input[type="submit"], button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    }

textarea {
    overflow: auto;
    }

a {
    color: var(--sulo-red);
    text-decoration: none;
    }

a:hover, a:focus, a:active {
    color: var(--sulo-red);
    text-decoration: underline;
    }

mark {
    background-color: var(--sulo-red);
    color: var(--sulo-white);
    padding: 1px 5px;
    }

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    }

sub {
    bottom: -0.25em;
}

sup {
    top: -0.7em;
    }

strong {
    font-weight: 700;
    }

.wrapper {
    margin: 0px auto;
    max-width: 1280px;
    position: relative;
    }

.clear::after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
    }

.fade * {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }

.flex {
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    }

h1, h1 a {
    font-family: 'Roboto Condensed', 'Arial', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 49px;
    margin-bottom: 1.2rem;
    color: var(--sulo-black);
    }

h2, h2 a {
    font-family: 'Roboto Condensed', 'Arial', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 42px;
    margin-bottom: 1.2rem;
    color: var(--sulo-darkgrey);
    }

.is-highlight-title h2,
h2.is-highlight-title {
    font-weight: 600;
    font-size: 70px !important;
    line-height: 70px !important;
    text-transform: uppercase;
}


h3 {
    font-family: 'Roboto Slab', 'Georgia', serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 32px;
    margin-bottom: 1.2rem;
    color: var(--sulo-midgrey);
    }

h4 {
    font-family: 'Roboto Condensed', 'Arial', sans-serif;
    font-weight: 400;
    font-weight: bold;
    font-size: 22px;
    line-height: 22px;
    margin-bottom: 0.6rem;
    color: var(--sulo-black);
    }

*, ::after, ::before {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    scroll-behavior: smooth;
    }

::-moz-selection,
::selection {
    background: #f00; color: #fff;
}

main ul {
  padding-left:22px;
}

blockquote {
  margin: 0;
  padding: 0;
  font-style: italic;
}

.normalcase {
  text-transform: inherit !important;
}

object {
  outline: none;
}


.post-password-form {
  padding: 200px 20px 300px 20px;
  margin: 0 auto;
  max-width: 600px;
}

.post-password-form p:last-child {
  padding: 50px 0 200px 0;
}





/*----------------------------------------------------------------------
Accessibility
----------------------------------------------------------------------*/

*:focus:not(:focus-visible) {
    outline: none !important;
}

*:focus-visible:not(input, textarea, select) {
    outline: 3px dashed red !important; /* Red outer border */
    outline-offset: 3px !important;
    transition: none !important; /* Disables any animations */
    animation: none !important; /* Ensures no CSS animations run */
}


a:not(.menu-item a):focus-visible {
    box-shadow: inset 0 0 0 3px white !important; /* Inner border */
}








/*----------------------------------------------------------------------
Group Banner
----------------------------------------------------------------------*/

.group-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: -16px 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  z-index: 9999;
}

.group-banner.side {
  justify-content: left;
  margin: 150px 0 0 -155px;
}

.group-banner a img {
  width: 130px;
  height: auto;
  padding: 25px 16px 8px 16px;
  background: var(--sulo-darkgrey);
  border-radius: 0 0 10px 10px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-box-shadow: 1px 10px 20px -13px rgba(0,0,0,0.7);
  box-shadow: 1px 10px 20px -13px rgba(0,0,0,0.7);
}

.group-banner.side a img {
  width: 160px;
  padding: 25px 16px 8px 16px;
  transform: rotate(-90deg);
  transform-origin: bottom right;
  box-shadow: 2px 13px 15px -18px rgba(0,0,0,1);
  -webkit-box-shadow: 2px 13px 15px -18px rgba(0,0,0,1);
  -moz-box-shadow: 2px 13px 15px -18px rgba(0,0,0,1);
}

.group-banner.side:hover {
  margin: 150px 0 0 -145px;
}

.group-banner:hover {
  margin: -8px 0 0 0;
}

.group-banner:hover a img {
  background: var(--sulo-red);
}



/*----------------------------------------------------------------------
Forms
----------------------------------------------------------------------*/

.wpcf7-form input[type="text"],
.wpcf7-form input[type="password"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea,
.wpcf7-form select,
input[type="password"],
input[type="tel"],
input[type="number"]
 {
    border-top: none;
    border-right: none;
    border-bottom: 2px solid transparent;
    border-left: none;
    padding: 8px 15px;
    display: block;
    width: 100%;
    background: var(--sulo-lightgrey);
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
    }

.wpcf7-form input[type="text"]:hover,
.wpcf7-form input[type="password"]:hover,
.wpcf7-form input[type="email"]:hover,
.wpcf7-form textarea:hover,
.wpcf7-form select:hover,
input[type="password"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
.wpcf7-form input[type="password"]:focus,
.wpcf7-form input[type="text"]:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus, {
    background: var(--sulo-lightgrey);
    border-bottom: 2px solid var(--sulo-red);
    }

.wpcf7-form label,
label {
    display: block;
    padding: 15px 0 5px 0;
    }

.wpcf7-form input[type="submit"],
input[type="submit"] {
    display: inline-block;
    box-sizing: border-box;
    font-size: 1em;
    line-height: 1em;
    padding: 0.7em 1.7em;
    margin: 30px 0 0 0;
    border: 2px solid var(--sulo-red);
    color: var(--sulo-red);
    background: var(--sulo-white);
    border-radius: 0;
    text-transform: uppercase;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
    cursor: pointer;
    }

.wpcf7-form input[type="submit"]:hover,
input[type="submit"]:hover {
    background: var(--sulo-red);
    color: var(--sulo-white);
    }

.forms-item-check {
    margin: 30px 0 0 0;
    }

.wpcf7-list-item {
    margin: 0 1em 0 0;
    }

.displaynone {
  display: none;
}

/*----------------------------------------------------------------------
Header
----------------------------------------------------------------------*/

header {
    background: linear-gradient(179deg, rgba(20,20,20,1) 0%, rgba(20,20,20,0) 70%);
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 700;
    }

header.get-sticky,
.menu-solutions-active {
    background: var(--sulo-white);
    position: fixed;
    top: 0;
    width: 100%;
    }

header:hover {
    background: var(--sulo-white);
    }

.portal-header {
    padding: 40px 0;
    font-weight: 700;
    z-index: 800;
    }

header.get-sticky .portal-header {
    padding: 20px 0;
    }

.portal-header ul {
    list-style: none;
    }

.portal-header a {
    color: var(--sulo-white);
    }

.main-navigation {
    width: 100px;
    color: var(--sulo-white);
    margin: 12px 0 0 0;
    }

.main-navigation button {
    cursor: pointer;
    position: relative;
    height: 25px;
    display: block;
    width: 60px;
    margin: 3px auto 0 0;
    background: transparent;
    padding: 0;
    border: 0;
    }

.icon-nav,
.icon-nav::before,
.icon-nav::after {
    background: var(--sulo-white);
    content: "";
    display: none;
    height: 4px;
    transition: 0.5s;
    position: absolute;
    }

.icon-nav {
    width: 32px;
    top: 10px;
    }

.icon-nav::before {
    top: -9px;
    width: 25px;
    }

.icon-nav::after {
    top: 9px;
    width: 25px;
    }

.nav-menu-toggle:hover .icon-nav {
    transform: translatex(5px);
    width: 20px;
    background: var(--sulo-red);
    }

.nav-menu-toggle:hover .icon-nav::before {
    width: 30px;
    background: var(--sulo-red);
    }

.nav-menu-toggle:hover .icon-nav::after {
    width: 25px;
    background: var(--sulo-red);
    }

button .main-menu-text {
    display: block;
    margin: -3px 0 0 0;
    color: var(--sulo-white);
    }

#menu-overlay,
#menu-overlay * {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }

#menu-overlay {
    position: fixed;
    display: block;
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    z-index: 900;
    }

#menu-overlay.overlay-active {
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    }

body.menu-overflow {
    position: fixed;
    width: 100%;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

.main-menu-wrapper {
    position: fixed;
    width: 0;
    height: 100%;
    top: 0;
    left: -2000px;
    right: 0;
    bottom: 0;
    background-color: var(--sulo-white);
    overflow-y: auto;
    }

.overlay-active .main-menu-wrapper {
    width: 33.33%;
    left: 0;
    }

.main-menu {
    margin: 90px 0 60px 0;
    }

.main-menu p {
    color: var(--sulo-smokegrey);
    font-size: 18px;
    }

.main-menu a {
    font-weight: 700;
    color: var(--sulo-black);
    font-size: 21px;
    line-height: 23px;
    text-decoration: none;
    }

.main-menu a:hover {
    font-weight: 700;
    color: var(--sulo-red);
    }

.before-main-menu {
    color: var(--sulo-smokegrey);
    font-size: 18px;
    }

.is-before-menu {
    border-top: 3px solid var(--sulo-lightgrey);
    padding: 30px 60px;
    }

.main-menu-links {
    border-top: 3px solid var(--sulo-lightgrey);
    padding: 30px 60px;
    }

.main-menu-links ul,
.is-before-menu li {
    list-style: none;
    }

.main-menu-links ul li,
.is-before-menu ul li {
    padding: 0 0 15px 0;
    }

.main-menu-links li a,
.main-menu-links li a:hover {
    color: var(--sulo-smokegrey);
    font-size: 18px;
    font-weight: 400;
    padding: 0 0 15px 0;
    display: block;
    }

.main-menu-links li li a {
    font-weight: 700;
    color: var(--sulo-black);
    font-size: 21px;
    line-height: 23px;
    text-decoration: none;
    padding: 0;
    }

.main-menu-links li li a:hover {
    font-weight: 700;
    font-size: 21px;
    line-height: 23px;
    color: var(--sulo-red);
    padding: 0;
    }

.main-menu-links ul li.current_page_item a {
    color: var(--sulo-red);
    }

.is-before-menu ul a:hover {
    color: var(--sulo-red);
    }

.after-main-menu {
    padding: 30px 60px 30px 60px;
    }

.after-main-menu .social-media-links a {
    display: inline-block;
    margin: 0 20px 20px 0;
    padding: 0 0 5px 0;
    border-bottom: 3px solid transparent;
    }

.after-main-menu .social-media-links a:hover {
    border-bottom: 3px solid var(--sulo-red);
    }

.after-main-menu .social-media-links img {
    height: 25px;
    width: auto;
    }

.language-menu-wrapper {
    position: fixed;
    width: 0;
    height: auto;
    left: -2000px;
    right: 0;
    bottom: 0;
    background-color: var(--sulo-white);
    }

.overlay-active .language-menu-wrapper {
    width: 33.33%;
    left: 0;
    }

.language-menu {
    border-top: 3px solid var(--sulo-lightgrey);
    padding: 30px 60px;
    }

#language-overlay {
    position: fixed;
    display: none;
    width: 33.33%;
    height: auto;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 3px solid var(--sulo-lightgrey);
    background-color: var(--sulo-white);
    }

.language-menu-content {
    padding: 30px 60px;
    }

.language-menu-content h3 {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 10px;
    color: var(--sulo-smokegrey);
    }

.language-menu-content ul {
    list-style: none;
    }

.current-site-language {
    padding: 0 0 0 35px;
    border: 0;
    background: transparent;
    cursor: pointer;
    background: url(img/globus-black.svg) left center no-repeat;
    background-size: 25px 25px;
    }

.current-site-language:hover {
    color: var(--sulo-red);
    }

.country-name {
    font-weight: 700;
    cursor: pointer;
    }

.country-name:hover {
    color: var(--sulo-red);
    }

.country.active-country {
    color: var(--sulo-red);
    }

.country ul li a {
    color: var(--sulo-black);
    text-decoration: none;
    padding-left:10px;
    }

.country ul li.active-language a,
.country ul li a:hover {
    color: var(--sulo-red);
    }

.meta-navigation {
    width: calc(100% - 332px);
    margin: 12px 0 0 0;
    }

.meta-navigation li {
    /* text-transform: uppercase; */
    display: inline-block;
    margin: 0 26px 0 0;
    cursor: pointer;
    }

.menu-before-main-menu {
  display: none;
  list-style: none;
}

.external-sulogroup-link .dashicons {
    margin: 6px 0 0 0;
}

.meta-navigation li a,
.meta-navigation li button {
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--sulo-white);
    background: transparent;
    text-decoration: none;
    }

header:hover .icon-nav,
header:hover .icon-nav::before,
header:hover .icon-nav::after,
header.get-sticky .icon-nav,
header.get-sticky .icon-nav::before,
header.get-sticky .icon-nav::after,
.menu-solutions-active .icon-nav,
.menu-solutions-active .icon-nav::before,
.menu-solutions-active .icon-nav::after {
    background: var(--sulo-black);
    }

header:hover .meta-navigation button,
header:hover .meta-navigation li a,
header.get-sticky .meta-navigation button,
header.get-sticky .meta-navigation li a,
header:hover button .main-menu-text,
header.get-sticky button .main-menu-text,
.menu-solutions-active button .main-menu-text {
    color: var(--sulo-black);
    }

.menu-solutions-active .meta-navigation button {
    color: var(--sulo-red) !important;
    }

.meta-navigation li button:hover,
.meta-navigation li a:hover,
header:hover .meta-navigation button:hover,
header:hover .meta-navigation li a:hover,
header.get-sticky .meta-navigation button:hover,
header.get-sticky .meta-navigation li a:hover,
.menu-solutions-active .meta-navigation button:hover,
.menu-solutions-active .meta-navigation li a:hover,
header:hover button:hover .main-menu-text,
header.get-sticky button:hover .main-menu-text {
    color: var(--sulo-red);
    }

.portal-logo {
    display: block;
    width: 232px;
    vertical-align: middle;
    font-size: 0;
    line-height: 0;
    background: url(img/sulo-logo.svg) left center no-repeat;
    background-size: auto 60px;
    }

.portal-logo a {
    display: block;
    width: 232px;
    height: 60px;
    }

.scroll-icon::after {
  content: '';
  background: url(img/icon-scrolldown-white.svg) center center no-repeat;
    background-size: auto;
  background-size: 66px auto;
  cursor: pointer;
  width: 66px;
  height: 70px;
  position: relative;
  display: block;
  margin: -100px auto;
  top: -60px;
  z-index: 103;
  -webkit-animation: updown 1s linear infinite;
}

.scroll-icon:after {
    -webkit-animation: updown 1s infinite alternate;
    animation: updown 1s infinite  alternate;
}
.scroll-icon:after {
    -webkit-animation: updown 1s infinite alternate;
    animation: updown 1s infinite  alternate;
}
@-webkit-keyframes updown {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes updown {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}



/*----------------------------------------------------------------------
Main + Pagebuilder
----------------------------------------------------------------------*/

.main-content {
    width: 100%;
    }

.center {
  text-align: center;
  align-items: center;
}

.so-widget-sow-image .widget-title {
  font-size: 14px;
  font-weight: normal;
  font-family: Roboto;
}

.is-red-border {
  border: 2px solid var(--sulo-red);
}

.is-blue-border {
  border: 2px solid var(--sulo-blue);
}

.is-yellow-border {
  border: 2px solid var(--sulo-yellow);
}

.is-green-border {
  border: 2px solid var(--sulo-green);
}

.is-lightgrey-ground {
    background: var(--sulo-lightgrey);
    }

.is-deepgrey-ground {
    background: var(--sulo-deepgrey);
    }

.is-white-ground {
    background: var(--sulo-white);
    }

.is-blue-ground {
    background: var(--sulo-blue);
    color: var(--sulo-white);
    }

.is-red-ground {
    background: var(--sulo-red);
    color: var(--sulo-white);
    }

.is-green-ground {
    background: var(--sulo-green);
    color: var(--sulo-white);
    }

.is-yellow-ground {
    background: var(--sulo-yellow);
    color: var(--sulo-white);
    }

.is-dark-ground {
    background: var(--sulo-deepgrey);
    color: var(--sulo-white);
    }

.is-blue-ground h2,
.is-blue-ground h3,
.is-blue-ground h4,
.is-green-ground h2,
.is-green-ground h3,
.is-green-ground h4,
.is-red-ground h2,
.is-red-ground h3,
.is-red-ground h4,
.is-dark-ground h2,
.is-dark-ground h3,
.is-dark-ground h4 {
    color: var(--sulo-white);
    }

.main-content ul { //.main-content ol
    margin: 0 0 30px 20px;
    list-style: square;
    }

.main-content h1 {
    font-size: 42px;
    line-height: 42px;
    }

.main-content img {
    max-width: 100%;
    height: auto;
    }

.main-content .widget_sow-hero .sow-slider-image {
   // min-height: 600px;
    }

.main-content .sow-slider-image-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    }

.main-content .is-stage-header {
    min-height: 80vh;
    height: auto;
    width: 100%;
    }

.main-content .is-stage-header .sow-slider-image {
    min-height: 80vh;
    }

.main-content .is-stage-header .sow-slider-image-wrapper {
    padding: 10% 10px 0 0px !important;
    }

.main-content .is-productfamily-header .sow-slider-image {
    min-height: 600px;
    }

.main-content .is-productfamily-header .sow-slider-image-wrapper {
    padding: 400px 10px 100px 10px !important;
    }

.main-content .is-content-header .sow-slider-image {
    min-height: 600px;
    }

.main-content img.is-job-header {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
    margin-bottom: 80px;
}

.main-content .is-content-header .sow-slider-image-wrapper {
    padding: 400px 10px 100px 10px !important;
    }

.sow-slider-image-container h1 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 59px !important;
    line-height: 59px !important;
    width: 60%;
    margin: 0 0 0 0 !important;
    padding: 10px 20px;
    background: var(--sulo-red);
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    }

.sow-slider-image-container .subtitle {
    display: block;
    width: 60%;
    font-weight: 400;
    text-transform: normal;
    font-size: 26px !important;
    line-height: 26px !important;
    margin: 0 0 1.4rem 0 !important;
    padding: 0 20px 60px 20px;
    background: var(--sulo-red);
    color: var(--sulo-white);
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    }

.sow-slider-image-container h2 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 59px !important;
    line-height: 59px !important;
    width: 50%;
    margin: 0 0 1.4rem 0 !important;
    }

.sow-slider-image-container h3 {
    font-weight: 400;
    font-size: 32px !important;
    line-height: 36px !important;
    width: 50%;
    margin: 0 0 1.4rem 0 !important;
    }

.sow-slider-image-container h4 {
    font-weight: 400;
    font-size: 22px !important;
    line-height: 22px !important;
    margin: 0 0 0.6rem 0 !important;
    }

.sow-slider-image-container p {
    font-size: 17px !important;
    line-height: 1.2 !important;
    }

.sow-slider-base .sow-slider-pagination {
    z-index: 160 !important;
    }

.so-widget-sow-hero .sow-slider-base .sow-slider-pagination {
    padding: 0 0 0 30px !important;
    text-align: left !important;
    }

.so-widget-sow-hero .sow-slider-pagination li a {
    border-radius: 0 !important;
    height: 20px !important;
    width: 20px !important;
    margin: 0 15px 0 0 !important;
    }

.so-widget-sow-button *,
.sow-accordion-panel-header  {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    }

[class*="sulobase"] .ow-button-base a {
    box-sizing: border-box;
    font-size: 1em;
    padding: 0.7em 1.7em;
    background: transparent;
    border: 2px solid var(--sulo-white);
    color: var(--sulo-white);
    border-radius: 0;
    }

[class*="sulobase"] .ow-button-base a:active,
[class*="sulobase"] .ow-button-base a:hover {
    color: var(--sulo-black);
    }

[class*="sulobase"] .ow-button-base a.ow-button-hover:hover {
    background: var(--sulo-white);
    border-color: var(--sulo-white);
    }

/* Barrierefreiheit */
.so-widget-sow-hero [class*="sulobase"] .ow-button-base a,
.is-hover-teaser [class*="sulobase"] .ow-button-base a {
    box-sizing: border-box;
    font-size: 1em;
    padding: 0.7em 1.7em;
    background: var(--sulo-white);
    border: 0;
    color: var(--sulo-black);
    border-radius: 0;
    }

.so-widget-sow-hero [class*="sulobase"] .ow-button-base a:active,
.so-widget-sow-hero [class*="sulobase"] .ow-button-base a:hover {
    background: var(--sulo-red);
    color: var(--sulo-white);
    }

.so-widget-sow-hero [class*="sulobase"] .ow-button-base a.ow-button-hover:hover {
    background: var(--sulo-red);
    }



[class*="suloredsimple"] .ow-button-base a {
    box-sizing: border-box;
    font-size: 1em;
    padding: 0.7em 1.7em;
    background: var(--sulo-red);
    border: 2px solid var(--sulo-red);
    color: var(--sulo-white);
    border-radius: 0;
    text-decoration: none;
    cursor: pointer;
    }

[class*="suloredsimple"] .ow-button-base a:active,
[class*="suloredsimple"] .ow-button-base a:hover {
    color: var(--sulo-red);
    }

[class*="suloredsimple"] .ow-button-base a.ow-button-hover:hover {
    background: var(--sulo-white);
    border-color: var(--sulo-red);
    }

[class*="sulowhitesimple"] .ow-button-base a {
    box-sizing: border-box;
    font-size: 1em;
    padding: 0.7em 1.7em;
    background: var(--sulo-white);
    border: 2px solid var(--sulo-red);
    color: var(--sulo-red);
    border-radius: 0;
    }

[class*="so-widget-sow-button"] .ow-button-base a .sow-icon-image {
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  min-height: 40px;
  min-width: 40px;
}

[class*="sulowhitesimple"] .sowb-button > span {
  align-items: center;
  vertical-align: middle;
}

[class*="sulogreen"] .ow-button-base a {
    box-sizing: border-box;
    font-size: 1em;
    padding: 0.7em 1.7em;
    background: var(--sulo-green);
    border: 2px solid var(--sulo-green);
    color: var(--sulo-white);
    border-radius: 0;
    }

[class*="suloblue"] .ow-button-base a {
    box-sizing: border-box;
    font-size: 1em;
    padding: 0.7em 1.7em;
    background: var(--sulo-blue);
    border: 2px solid var(--sulo-blue);
    color: var(--sulo-white);
    border-radius: 0;
    }

[class*="sulogrey"] .ow-button-base a {
    box-sizing: border-box;
    font-size: 1em;
    padding: 0.7em 1.7em;
    background: var(--sulo-midgrey);
    border: 2px solid var(--sulo-midgrey);
    color: var(--sulo-white);
    border-radius: 0;
    }

[class*="sulowhitesimple"] .ow-button-base a:active,
[class*="sulowhitesimple"] .ow-button-base a:hover,
[class*="sulogreen"] .ow-button-base a:active,
[class*="sulogreen"] .ow-button-base a:hover,
[class*="suloblue"] .ow-button-base a:active,
[class*="suloblue"] .ow-button-base a:hover,
[class*="sulogrey"] .ow-button-base a:active,
[class*="sulogrey"] .ow-button-base a:hover {
    color: var(--sulo-white);
    }

[class*="sulowhitesimple"] .ow-button-base a.ow-button-hover:hover,
[class*="sulogreen"] .ow-button-base a.ow-button-hover:hover,
[class*="suloblue"] .ow-button-base a.ow-button-hover:hover,
[class*="sulogrey"] .ow-button-base a.ow-button-hover:hover {
    background: var(--sulo-red);
    border-color: var(--sulo-red);
    }

.box-bottomoverlay {
    position: relative;
    }

.box-bottomoverlay::after {
    position: relative;
    display: block;
    content: "";
    width: 100%;
    height: auto;
    min-height: 100px;
    font-size: 0;
    line-height: 0;
    background: url(img/box-bottomoverlay.svg) center top no-repeat;
    margin: -50px 0 0 0;
    z-index: 200;
    }

.table-tiles-smartsulo {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap !important;
}

.table-tiles-smartsulo .panel-grid-cell:not(.panel-grid-cell .panel-grid-cell) {
    width: 20% !important;
    margin: 0 60px 100px 0 !important;
}

@media only screen and (max-width: 1800px) {
    .table-tiles-smartsulo .panel-grid-cell:not(.panel-grid-cell .panel-grid-cell) {
        width: 40% !important;
    }
}

@media only screen and (max-width: 1100px) {
    .table-tiles-smartsulo .panel-grid-cell:not(.panel-grid-cell .panel-grid-cell) {
        width: 100% !important;
    }
}

@media only screen and (max-width: 800px) {
    .table-tiles-smartsulo .panel-grid-cell:not(.panel-grid-cell .panel-grid-cell) {
        width: 100% !important;
        margin: 0 0 100px 0 !important;
    }
}

.tile-title-smartsulo {
    background-color: var(--sulo-red);
    padding: 20px;
    height: 160px;
    width:  100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.tile-title-smartsulo h3 {
    color: var(--sulo-white);
}

@media only screen and (max-width: 800px) {
    .tile-title-smartsulo {
      padding: 20px;
      height: 100px;
      width:  100%;
    }
}

.is-word-tile-black {
  background-color: var(--sulo-smokegrey);
  color: white;
  padding: 20px;
  font-size: 22px;
  height: 100px;
  text-transform: uppercase;
}

.is-word-tile-white {
  background-color: var(--sulo-white);
  padding: 20px;
  font-size: 22px;
  height: 100px;
  text-transform: uppercase;
}

.is-word-tile-red {
  background-color: var(--sulo-red);
  color: white;
  padding: 20px;
  font-size: 22px;
  height: 100px;
  text-transform: uppercase;
}

.is-hover-teaser,
.is-hover-teaser * {
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
    }

.is-hover-teaser:hover {
    margin: -5px 0 5px 0;
    box-shadow: 0px 0px 20px 6px rgba(0, 0, 0, 0.5);
    }

.is-hover-teaser .so-widget-sow-button {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    }

.is-hover-teaser .so-widget-sow-cta {
    color: var(--sulo-white);
    height: 400px;
    width: 100%;
    display: flex;
  	flex-direction: column;
  	justify-content: flex-end;
    }


.is-productfilter .is-hover-teaser .so-widget-sow-cta {
    height: 200px;
}


.is-teaser-icon .so-widget-sow-cta {
    height: 300px !important;
}

.double-teaser-high .so-widget-sow-cta {
    height: 830px;
    }

.is-hover-teaser .so-widget-sow-cta {
    background: linear-gradient(10deg, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0) 70%);
    }

.is-teaser-icon .so-widget-sow-cta {
    background: none !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;
    }

.is-hover-teaser:hover .so-widget-sow-cta {
    background: rgba(255,0,0,0.8);
    }

.is-hover-teaser .sow-cta-base {
    border: none !important;
    }

.is-hover-teaser .sow-cta-base .sow-cta-text {
    float: none !important;
    text-align: left !important;
    }

.is-hover-teaser .sow-cta-title {
    font-size: 32px;
    line-height: 34px;
    margin: 0 !important;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    color: var(--sulo-white);
    }

.is-teaser-icon .sow-cta-base .sow-cta-text {
    text-align: center !important;
    }

.is-hover-teaser .sow-cta-subtitle {
    font-size: 0px;
    line-height: 0;
    color: var(--sulo-white);
    visibility: hidden;
    }

.is-teaser-icon .sow-cta-subtitle {
    justify-content: flex-end !important;
    font-size: 19px;
    line-height: 1.2;
    visibility: visible;
    }

.is-teaser-icon img {
    padding: 40px 0 40px 0;
    }

.is-hover-teaser:hover .sow-cta-subtitle {
    font-size: 19px;
    line-height: 1.2;
    visibility: visible;
    }

.is-hover-teaser .so-widget-sow-button {
    margin: 20px 0 0 0 !important;
    }

.is-hover-teaser .so-widget-sow-button a[href="#"] {
    display: none;
    }

.is-hover-item,
.is-hover-item * {
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
    }

.is-hover-item:hover {
    margin: -5px 0 5px 0;
    box-shadow: 0px 0px 20px 6px rgba(0, 0, 0, 0.5);
    }

.is-hover-item .so-widget-sow-editor {
    background: rgba(0,0,0,0.3);
    color: var(--sulo-white);
    height: 400px;
    width: 100%;
    display: flex;
    padding: 2em 2.5em;
	flex-direction: column;
	justify-content: flex-end;
    }

.is-hover-item .so-widget-sow-editor:hover {
    background: rgba(255,0,0,0.8);
    }

.is-hover-item h4 {
    font-size: 32px;
    line-height: 34px;
    margin: 0 !important;
    color: var(--sulo-white);
    }

.is-hover-item.is-double-item-high .so-widget-sow-editor {
    height: 830px;
    }

.is-hover-item .so-widget-sow-cta {
    background: rgba(0,0,0,0.3);
    }

.is-hover-item:hover .so-widget-sow-cta {
    background: rgba(255,0,0,0.8);
    }

.is-hover-item .sow-cta-base .sow-cta-text {
    float: none !important;
    text-align: left !important;
    }

.is-hover-item ul,
.is-hover-item ol,
.is-hover-item p {
    font-size: 0px;
    line-height: 0;
    visibility: hidden;
    margin: .4em 0 0 0;
    }

.is-hover-item ul,
.is-hover-item ol {
    margin: .4em 0 0 20px;
    }

.is-hover-item:hover ul,
.is-hover-item:hover ol,
.is-hover-item:hover p {
    font-size: 19px;
    line-height: 1.2;
    visibility: visible;
    }

.is-hover-item.start-open ul,
.is-hover-item.start-open ol,
.is-hover-item.start-open p {
    font-size: 19px;
    line-height: 1.2;
    visibility: visible;
    }

.is-icon-item,
.is-icon-item * {
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
    }

.is-icon-item {
    background-position: top right+35px !important;
    background-size: 100px 80px !important;
    background-repeat: no-repeat !important;
    padding: 40px 40px 40px 0;
    }

.is-icon-item:hover {
    background-size: 110px 80px !important;
    background-position: top right+55px !important;
    }

.is-icon-item .sow-cta-title {

    }
    /*
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 2s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%232d3561' /%3E%3Cstop offset='25%25' stop-color='%23c05c7e' /%3E%3Cstop offset='50%25' stop-color='%23f3826f' /%3E%3Cstop offset='100%25' stop-color='%23ffb961' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3' stroke-dasharray='388'/%3E %3C/svg%3E") 1;

  */
.is-icon-item .sow-cta-base {
    border: none !important;
    padding: 0;
    height: 100%;
    }


.is-icon-item .sow-cta-wrapper {
  display: flex;
  flex-direction: column;
  padding-top: 40px;
}


.is-icon-item .so-widget-sow-cta {
    height: 400px;
    width: 100%;
    padding: 80px 0 0 0;
    flex-direction: column;
    justify-content: flex-start;
}

.is-icon-item-double-height .so-widget-sow-cta {
    height: auto !important;
}

.is-icon-item .sow-cta-text {
  flex-direction: column;
  justify-content: flex-start;
}
.is-icon-item .so-widget-sow-button {
  align-self: flex-start;
  justify-content: flex-end;
}

.is-icon-item-double-height .so-widget-sow-button {
  margin-top: 20px !important;
}

.is-icon-item-double-height .sow-cta-text {
  height: 800px;
}




.is-icon-item .sow-cta-title {
    font-size: 32px;
    line-height: 34px;
    margin: 0 !important;
    padding: 0 0 10px 0;
}


.is-icon-item .so-widget-sow-cta::before {
  display: flex;
  flex-direction: column;
  margin-top:-70px;
  content: "";
  height:5px;
  width:77%;
  background-color: #ff0000;
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  transition: all 0.7s ease;
}


.is-icon-item:hover .so-widget-sow-cta::before {
 transform: translate(30px, 0);
  width:65%;
}

@keyframes nudge {
  0%,100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(30px, 0);
  }

}

.is-icon-item .sow-cta-subtitle {
  min-height:110px;
}

.is-icon-item .so-widget-sow-button a[href="#"] {
    display: none;
    }

.is-without-icon {
  padding-top: 0;
  padding-bottom: 0;
}

.is-without-icon .so-widget-sow-cta,
.is-without-icon .sow-cta-wrapper {
    height: auto !important;
    padding: 0;
}

.is-without-icon .so-widget-sow-cta::before {
  display: none;
}

.is-without-icon .sow-cta-subtitle::before {
  display: flex;
  flex-direction: column;
  margin: 20px 0;
  content: "";
  height: 5px;
  width: 77%;
  background-color: #ff0000;
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  transition: all 0.7s ease;
}

.is-without-icon:hover .sow-cta-subtitle::before {
 transform: translate(30px, 0);
  width:65%;
}

.is-below-header-icon::after {
  display: flex;
  flex-direction: column;
  margin-top:0;
  content: "";
  height:5px;
  width:100%;
  background-color: #ff0000;
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  transition: all 0.7s ease;
  margin-left: -100%;
  margin-top: -53%;
}

.is-feature-item {
    text-align: center;
    border-bottom: 10px solid var(--sulo-lightgrey);
    margin: 40px 0 0 0;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
    }

.is-feature-item:hover {
    border-bottom: 10px solid var(--sulo-red);
    }

.is-feature-item h2,
.is-feature-item h2 a {
    color: var(--sulo-red);
    }

.is-feature-item p {
    min-height: 80px;
    }

.is-content-slider .panel-layout {
    padding: 60px 80px;
    margin: 30px 60px;
    box-shadow: 0px 0px 20px 6px rgba(200, 200, 200, 0.5);
    }

.is-content-slider .sow-slider-pagination li a {
    background: var(--sulo-smokegrey) !important;
    }

.is-content-slider .sow-slider-pagination li.sow-active a {
    background: var(--sulo-red) !important;
    }

.is-content-slider .sow-slider-pagination {
    text-align: center !important;
    bottom: 0px !important;
    padding: 0px !important;
    }

.is-content-slider .sow-slider-pagination li a {
    border-radius: 0 !important;
    height: 10px !important;
    width: 60px !important;
    margin: 0 15px 0 0 !important;
    }

.sow-slider-base .sow-slide-nav {
    z-index: 150 !important;
    }

.is-content-slider .sow-slider-base .sow-slide-nav a {
    color: var(--sulo-smokegrey) !important;
    }

.is-fullwidth-teaser-text {
    padding: 120px 0 120px 0px;
    max-width: 625px;
    margin: 0 0 0 auto;
    }

.is-download-item,
.is-download-item * {
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
    }

.is-download-item {
    min-height: 300px;
    padding: 30px 30px 0 30px;
    color: var(--sulo-white);
    background: url(img/sulo-logo-trans.svg) right bottom no-repeat var(--sulo-midgrey);
    background-size: 50px auto;
    }

.is-download-item:hover {
    background: url(img/sulo-logo-trans.svg) right bottom no-repeat var(--sulo-red);
    background-size: 50px auto;
    margin: -5px 0 5px 0;
    box-shadow: 0px 0px 20px 6px rgba(0, 0, 0, 0.5);
    }

.is-download-item h4 {
    color: var(--sulo-white);
    min-height: 190px;
    }

.is-download-item a {
    background: url(img/download.svg) left center no-repeat;
    background-size: auto 20px;
    padding: 0 0 0 30px;
    color: var(--sulo-white);
    }

.is-download-item:hover a {
    border: 2px solid var(--sulo-white);
    background-position: 10px center;
    padding: 8px 15px 8px 40px;
    }

.is-download-item:hover a:hover {
    border: 2px solid var(--sulo-darkgrey);
    background: url(img/download.svg) left center no-repeat var(--sulo-darkgrey);
    background-size: auto 20px;
    background-position: 10px center;
    text-decoration: none;
    }

.is-product-title {
    /*margin: -400px 0 0 0;*/
    margin-top: -400px !important;
    position: relative;
    z-index: 100;
    }

.is-product-title .widget_media_image {
    width: 100%;
    margin: 0 auto 0 0;
    }

.is-product-title .so-widget-image {
  max-height: 480px;
}

.is-product-title .sow-slider-base ul.sow-slider-images li.sow-slider-image {
  display: flex;
  justify-content: center;
}


.is-product-title .widget_media_image img,
.is-product-title .sow-slider-base ul.sow-slider-images li.sow-slider-image,
.is-product-title .sow-slider-images li img {
    max-height: 500px;
    width: auto;
    }

.is-product-headline h1 {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    min-width: 300px;
    margin: 60px 0 0 0;
    }

.is-product-headline h1 strong {
    display: inline-block;
    background: var(--sulo-red);
    color: var(--sulo-white);
    font-size: 59px;
    line-height: 59px;
    padding: 15px 0;
    }

.is-product-headline sup,
.sow-slider-image-container sup {
    font-size: 50%;
    margin: 0 -15px 0 0;
    }

.is-product-headline h1 span {
    display: inline-block;
    background: var(--sulo-white);
    font-family: 'Roboto Slab', 'Georgia', serif;
    font-weight: 400;
    padding: 8px 0;
    margin: 3px 0 0 0;
    }

.is-image-tabs .sow-tabs-tab-container {
    padding: 0 !important;
    }

.is-image-tabs .sow-tabs-panel-container {
    background: transparent !important;
    }

.is-image-tabs .sow-tabs-panel {
    padding: 0 30px 30px 30px !important;
    }

.is-image-tabs .sow-tabs-tab {
    font-size: 0 !important;
    border: 2px solid var(--sulo-white);
    margin: 0 0 5px 0 !important;
    padding: 2px !important;
    }

.is-tabs-configurator .sow-tabs-tab {
    font-size: 20px !important;
    font-weight: bold;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    padding-bottom: 10px !important;
    }

.is-image-tabs .sow-tabs-tab:hover {
    background: transparent !important;
    border: 2px solid var(--sulo-midgrey) !important;
    }

.is-tabs-configurator .sow-tabs-tab:hover {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid var(--sulo-midgrey) !important;
    }

.is-image-tabs .sow-tabs-tab img {
    width: 60px !important;
    height: auto !important;
    margin: 0 !important;
    }

.is-tabs-configurator .sow-tabs-tab img {
    width: 250px !important;
    height: auto !important;
    margin: 0 !important;
    }

.is-image-tabs .sow-tabs-tab.sow-tabs-tab-selected {
    background: transparent !important;
    border: 2px solid var(--sulo-red) !important;
    }

.is-tabs-configurator .sow-tabs-tab.sow-tabs-tab-selected {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid var(--sulo-red) !important;
    }




/*----------------------------------------------------------------------
Simple Tab Styles
----------------------------------------------------------------------*/

.simple-tabs {

    }

.simple-tabs .sow-tabs .sow-tabs-panel-container .sow-tabs-panel .sow-tabs-panel-content {
    font-size: 16px;
    }

.simple-tabs .widget-title {
    margin-bottom: 80px !important;
    font-size: 58px !important;
    line-height: 60px !important;
    }

.simple-tabs .sow-tabs .sow-tabs-tab-container {
    background: none !important;
    padding: 0 !important;
    color: var(--sulo-black) !important;
    border-bottom: 3px solid var(--sulo-lightgrey) !important;
    }

.simple-tabs .sow-tabs .sow-tabs-panel-container {
    padding: 40px !important;
    background: none !important;
    }

.simple-tabs .sow-tabs .sow-tabs-panel-container .sow-tabs-panel .sow-tabs-panel-content {
    font-size: 20px !important;
    }

.simple-tabs .sow-tabs .sow-tabs-panel-container .sow-tabs-panel{
    padding: 0 !important;
    }

.simple-tabs .sow-tabs .sow-tabs-tab-container .sow-tabs-tab {
    background: none !important;
    color: var(--sulo-midgrey) !important;
    font-size: 100% !important;
    font-weight: 500 !important;
    border-bottom: 4px solid transparent !important;
    }

.simple-tabs .sow-tabs .sow-tabs-tab-container .sow-tabs-tab.sow-tabs-tab-selected,
.simple-tabs .sow-tabs .sow-tabs-tab-container .sow-tabs-tab:hover {
    background: none !important;
    color: var(--sulo-black) !important;
    border-bottom: 4px solid var(--sulo-red) !important;
    }

.simple-tabs.green .sow-tabs .sow-tabs-tab-container .sow-tabs-tab.sow-tabs-tab-selected,
.simple-tabs.green .sow-tabs .sow-tabs-tab-container .sow-tabs-tab:hover {
    border-bottom: 4px solid var(--sulo-green) !important;
    }




/*----------------------------------------------------------------------
Simple Accordion Styles
----------------------------------------------------------------------*/

.is-simple-accordion {

    }

.is-simple-accordion .sow-accordion-panel-header {
    background: transparent !important;
    color: var(--sulo-black) !important;
    font-weight: bold;
    font-size: 120%;
    }

.is-simple-accordion .sow-accordion-panel-border {
    background: transparent !important;
    }

.is-simple-accordion .sow-accordion-panel {
    border-left: 8px solid var(--sulo-lightgrey);
    transition: all 0.5s ease;
    }

.is-simple-accordion .sow-accordion-panel-open,
.is-simple-accordion .sow-accordion-panel:hover {
    border-left: 8px solid var(--sulo-red);
    transition: all 0.5s ease;
    }

.is-simple-accordion .sow-accordion-panel-open .sow-accordion-title {
    color: var(--sulo-red) !important;
    }



/*----------------------------------------------------------------------
Simple Before <> After image compare
----------------------------------------------------------------------*/

.av-before-after{
    --pos: 50%;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    width: 100%;
    border-radius: 0;
}

.av-before-after__img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
}

.av-before-after__img--top{
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.av-before-after__divider{
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 0;
    transform: translateX(-50%);
    pointer-events: none;
}

.av-before-after__divider::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    background: rgba(255,255,255,1);
    box-shadow: 0 0 0 1px rgba(0,0,0,.06);
    transform: translateX(-50%);
}

.av-before-after__handle{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 999px;
    background: var(--sulo-red);
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    transform: translate(-50%, -50%);
}

.av-before-after__handle span{
    position: relative;
    width: 8px;
    height: 12px;
    display: block;
}

.av-before-after__handle span:first-child::before,
.av-before-after__handle span:last-child::before{
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.av-before-after__handle span:first-child::before{
    left: 0;
    border-right: 5px solid var(--sulo-white);
}

.av-before-after__handle span:last-child::before{
    right: 0;
    border-left: 5px solid var(--sulo-white);
}

.av-before-after__range{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}

@media (max-width: 767px){
    .av-before-after__handle{
        width: 40px;
        height: 40px;
    }
}



/*----------------------------------------------------------------------
Zoomable image
----------------------------------------------------------------------*/

.is-zoomable-image {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.is-zoomable-image .sow-image-container {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}

.is-zoomable-image .sow-image-container img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
  transform: scale(1);
}

/* Zoom icon - shown only on first image */
.is-zoomable-image .sow-image-container:first-child .zoom-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.8);
  padding: 4px 6px;
  border-radius: 50%;
  font-size: 14px;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s;
}

.is-zoomable-image .sow-image-container:not(:first-child) .zoom-icon {
  display: none;
}





.is-sustainable-logos-row .panel-layout .panel-grid .panel-grid-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
  gap: 20px;
}

.is-sustainable-logos-row {
  border-bottom: 2px solid var(--sulo-lightgrey);
}


.is-sustainable-logos-row::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--sulo-green);
    transition: width 1s;
}

.is-sustainable-logos-row:hover::after {
    width: 100%;
    transition: width 1s;
}

.is-sustainable-logos-row .panel-layout .panel-grid .panel-grid-cell .panel-last-child {

}

.is-sustainable-logos-row .panel-layout .panel-grid .panel-grid-cell .widget_sow-image,
.is-sustainable-logos-row .panel-layout .panel-grid .panel-grid-cell img {
    min-width: 80px !important;
    max-width: 80px !important;
}

.is-set-image-height img {
    height: 300px !important;
    width: auto;
    padding: 0 0 40px 0;
    }

.is-set-logos-size img {
    height: 140px !important;
    width: auto;
    padding: 0 35px 25px 0;
    }

.is-contact-widget,
.is-contact-widget * {
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
    }

.is-contact-widget {
    position: fixed;
    right: -1000px;
    bottom: 10%;
    z-index: 600;
    width: 140px;
    height: auto;
    }

.is-contact-widget.show-contact {
    right: 0;
    }

@keyframes pulse-shadow {
    0% {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.7);
    }

    70% {
    box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0);
    }

    100% {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    }
}

.is-contact-widget .widget_media_image {
    position: relative;
    border-radius: 50%;
    border: 5px solid var(--sulo-red);
    width: 110px;
    height: 110px;
    margin: 0 30px 0 0 !important;
    z-index: 605;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
	animation: pulse-shadow 2s infinite;
    }

.is-contact-widget .widget_media_image img {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50%;
    border: 2px solid var(--sulo-white);
    }

.is-contact-widget .widget_custom_html {
    position: absolute;
    right: -1000px;
    bottom: 70px;
    background: var(--sulo-white);
    padding: 30px 30px 60px 30px !important;
    margin: 0 !important;
    box-shadow: 0px 0px 30px 6px rgba(0, 0, 0, 0.4);
    width: 450px;
    }

.is-contact-widget:hover .widget_custom_html {
    right: 0;
    }

.is-contact-widget:hover .widget_media_image {
    box-shadow: 0px 0px 0px 0px transparent;
    animation-play-state: paused;
    }

.is-contact-widget .widget_custom_html h4 {
    margin: 0;
    }

.is-contact-widget .widget_custom_html p {
    margin: 0 0 15px 0;
    }

.is-contact-widget .widget_custom_html a[href^="tel:"],
.main-menu a[href^="tel:"],
a.phone {
    background: url(img/phone-black.svg) left center no-repeat;
    background-size: 20px 20px;
    color: var(--sulo-black);
    padding: 0 0 0 35px;
    }

.is-contact-widget .widget_custom_html a[href^="mailto:"],
.is-contact-widget .widget_custom_html a[href^="javascript:;"],
.main-menu a[href^="mailto:"],
.main-menu a[href^="javascript:;"],
a.mail {
    background: url(img/mail-black.svg) left center no-repeat;
    background-size: 20px 20px;
    color: var(--sulo-black);
    padding: 0 0 0 35px;
    }

.main-menu a[data-icon*="contactform"] {
    background: url(img/contactform-black.svg) left center no-repeat;
    background-size: 20px 20px;
    color: var(--sulo-black);
    padding: 0 0 0 35px;
    }

.main-menu a[data-icon*="contactperson"] {
    background: url(img/contactperson-black.svg) left center no-repeat;
    background-size: 20px 20px;
    color: var(--sulo-black);
    padding: 0 0 0 35px;
    }

.is-contact-widget .active {
    right: 0;
    }

.is-contact-widget .widget_custom_html a:hover {
    color: var(--sulo-red);
    text-decoration: none;
    }

.is-contact-widget .download-message {
    padding: 20px 0 20px 0;
    margin: 0 0 40px 0;
    border-bottom: 2px solid #f00;
    }

.is-contact-widget .download-message strong {
    padding: 0 0 5px 0;
    }

.is-contact-widget .download-message p {
    padding: 0;
    margin: 0;
    font-size: 18px;
    }

.is-contact-widget.whatsapp-white-border .widget_media_image {
    border: 5px solid #fff;
}


.is-scrolltop-widget {

}

.is-scrolltop-widget,
.is-scrolltop-widget * {
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
    cursor: pointer;
    }

.is-scrolltop-widget {
    position: fixed;
    left: -1000px;
    bottom: 20px;
    z-index: 600;
    background-color: var(--sulo-lightgrey);
    border: 1px solid var(--sulo-lightgrey);
    padding: 0px 10px 5px 10px;
    }

.is-scrolltop-widget::after {
    content: "";
    display: inline-block;
    width: 0px;
    height: 0px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--sulo-midgrey);
    }

.is-scrolltop-widget:hover {
    background-color: var(--sulo-red);
    border: 1px solid var(--sulo-red);
    }

.is-scrolltop-widget:hover::after {
    border-bottom: 10px solid var(--sulo-white);
    }

.is-scrolltop-widget.show-scrolltop {
    left: 20px;
    }

.is-icon-widget h2 {
	font-size: 28px;
}

.is-icon-widget img {
	height: 100px;
	width: auto;
	padding-bottom: 20px;
}

.is-notfound {
    background: var(--sulo-red);
    color: var(--sulo-white);
    }

.is-notfound * {
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
    }

.is-notfound .is-content-header {
  background: url(https://downloads.sulo.com/Contents/Jobs/SULO-Jobs-Team.jpg) no-repeat;
  background-size: cover;
  background-position-y: -110px;
  width: 100%;
  height: 50vh;
  padding-bottom: 0;
}


.is-notfound h1 {
    color: var(--sulo-white);
    }

.notfound-content {
    padding: 10vh 0 30vh 0;
    }

.notfound-button a {
    display: inline-block;
    margin: 30px 0 0 0;
    padding: 0.7em 1.7em;
    background: transparent;
    border: 2px solid var(--sulo-white);
    color: var(--sulo-white);
    text-decoration: none;
    }

.notfound-button a:active,
.notfound-button a:hover {
    color: var(--sulo-black);
    border: 2px solid var(--sulo-black);
    }

.is-has-overlay {
    position: relative;
    }

.is-has-overlay::after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    }

.is-has-overlay div {
    z-index: 50;
    }

.panel-row-style,
.panel-widget-style {
    scroll-margin-top: 150px;
    }


.so-premium-image-overlay {
    background-color: var(--sulo-lightgrey);
}

.is-button-buy .so-widget-sow-button a {
  font-weight: 900;
  font-size: 1.15em;
  min-width: 400px;
  height: 60px;
}

.is-marketplace-listings * {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.is-marketplace-listings .is-logo {
    border-bottom: 2px solid var(--sulo-smokegrey);
    padding: 0 0 20px 0;
}

.is-marketplace-listings .panel-grid-cell:hover .is-logo {
    border-bottom: 2px solid var(--sulo-red);
}

.is-marketplace-listings .is-logo img {
    /* filter: grayscale(1); */
    width: 160px;
    max-width: 160px;
}

.is-marketplace-listings .panel-grid-cell:hover .is-logo img {
    filter: grayscale(0);
}

.is-marketplace-listings .is-variant-list .panel-grid-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 0 !important;

}

.is-marketplace-listings .is-variant-list .widget_sow-image {
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.is-marketplace-listings .is-variant-list img  {
    display: block;
    width: 50px;
    height: 50px;
    margin: 5px;
}

.is-marketplace-listings .is-variant-list .widget_sow-image {
    height: 140px;
}

.is-marketplace-listings .is-variant-list .so-widget-sow-image:hover img {
    margin: 0 0 5px 0;
    width: 60px;
    height: 60px;
    box-shadow: 0px 6px 18px -5px rgba(0, 0, 0, 1);
}

.is-marketplace-listings .is-variant-list .so-widget-sow-image:hover .widget-title a {
    color: var(--sulo-red) !important;
}

.is-marketplace-listings .is-variant-list .so-widget-sow-image .sow-image-container a::after {
    content: "\f174";
    font-family: 'dashicons';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: var(--sulo-white) !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.is-marketplace-listings .is-variant-list .so-widget-sow-image:hover .sow-image-container a::after {
    content: "\f504";
}

.is-marketplace-listings .is-variant-list .widget-title  {
    font-family: 'Roboto', 'Arial', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    width: 50px;
    text-align: center;
    margin: 5px;
}


.is-marketplace-listings .is-variant-list .widget-title a {
    color: var(--sulo-midgrey);
    text-decoration: none;
}



.job-tiles-container {
  display: grid;
  gap: 40px;
  margin-bottom: 40px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  perspective: 800px; /* only matters for 3D transforms on children */
}


.job-tile {
    flex: 1 1 20%;
    height: 340px;
    border: 0;
    padding: 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s ease, box-shadow 0.5s ease; /* Faster transition for rotation */
    transform-style: preserve-3d; /* Preserve the 3D transform */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.job-tile a {
  cursor: pointer;
}

.job-tile:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
}

.job-tile .job-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 60px;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
    z-index: 1;
}

.job-tile:hover .job-image {
    transform: scale(1.05);
}

.job-tile:hover * {
  cursor: pointer;
}

.job-tile .job-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--sulo-red);
    padding: 10px;
    color: white;
    z-index: 2;
    transition: all 0.3s ease;
}

.job-tile:hover .job-info {
    padding-bottom: 40px;
}

.job-tile h4 {
    margin: 0;
    padding: 10px;
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.job-tile .job-location {
    font-size: 14px;
    margin-top: 5px;
    color: white;
}


ul.job-list-1 li,
ul.job-list-2 li,
ul.job-list-3 li {
    list-style: none;
    position: relative;
    padding-left: 55px; /* Platz für das Häkchen */
    margin-bottom: 10px;
}



/* Standard-Styling für Häkchen im Kasten */
ul.job-list-3 li::before {
    content: "✓"; /* Häkchen-Symbol */
    color: red;  /* Farbe des Häkchens */
    font-weight: bold;
    position: absolute;
    left: 0; /* Position des Häkchens am linken Rand */
    top: 0;
    width: 25px; /* Breite des Bereichs für das Häkchen */
    height: 25px; /* Höhe des Bereichs für das Häkchen */
    text-align: center;
    line-height: 25px; /* Vertikales Zentrieren des Häkchens */
    border: 2px solid red;
    border-radius: 5px;
    margin-right: 10px;
}

/* Für die ersten beiden ULs: Häkchen ohne Kasten */
ul.job-list-1 li::before,
ul.job-list-2 li::before {
    content: "✓"; /* Häkchen-Symbol */
    color: black;  /* Farbe des Häkchens */
    font-weight: bold;
    position: absolute;
    left: 0; /* Position des Häkchens am linken Rand */
    top: 0;
    width: 25px; /* Breite des Bereichs für das Häkchen */
    height: 25px; /* Höhe des Bereichs für das Häkchen */
    text-align: center;
    line-height: 25px; /* Vertikales Zentrieren des Häkchens */
    border: 0; /* Kein Rahmen */
}




/*----------------------------------------------------------------------
Solutions-Menu
----------------------------------------------------------------------*/

#solutions-overlay,
#solutions-overlay *,
.solutions-menu * {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }

#solutions-overlay {
    position: fixed;
    display: block;
    width: 100%;
    height: 0;
    top: -100%;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--sulo-white);
    z-index: 850;
    overflow-y: auto;
    }

#solutions-overlay.solution-active {
    height: calc(100% - 130px);
    min-height: fit-content;
    top: 130px;
    border-top: 3px solid var(--sulo-lightgrey);
    background-color: rgba(0, 0, 0, 0.7);
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    }

.get-sticky.menu-solutions-active #solutions-overlay.solution-active {
    height: calc(100% - 100px);
    top: 100px;
    }

.solutions-menu {
  /*  margin: 30px 0 0 0; */
    background: var(--sulo-white);
    padding: 30px 0 160px 0;
    hyphens: auto;
    height: 100vh;
    }

.solutions-menu img {
    max-height: 110px;
    width: auto;
    max-width: 160px;
    }

.solutions-menu .menu-item-img {
    display: block;
    margin: -15px -15px 10px -15px;
    }

.solutions-menu ul {
    list-style: none;
    width: 300px;
    position: relative;
    hyphens: auto;
    word-wrap: break-word;
    }

.solutions-menu ul:first-child {
    border-right: 3px solid var(--sulo-lightgrey);
    padding: 30px 0 30px 0;
    }

.solutions-menu ul ul {
    min-width: 935px;
    position: absolute;
    top: 0;
    left: 300px;
    width: 100%;
    padding: 15px 0 0 30px;
    }

.solutions-menu ul ul ul {
    min-width: 875px;
    position: relative;
    top: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    padding: 30px 0 60px 0;

    }

.solutions-menu ul li {
    border-right: 3px solid transparent;
    margin: 0 -3px 30px 0;
    }

.solutions-menu ul li a {
    display: block;
    color: var(--sulo-black);
    font-weight: 700;
    line-height: 23px;
    text-decoration: none;
    }

.solutions-menu ul li a:hover {
    color: var(--sulo-red);
    text-decoration: none;
    }

.solutions-menu ul li li {
    border: 0px solid transparent;
    display: none;
    margin: 15px;

    }

.solutions-menu ul li:hover {
    border-right: 3px solid var(--sulo-red);
    }

.solutions-menu ul li:hover a {
    color: var(--sulo-red);
    }

.solutions-menu ul li li a {
    background: url(img/menu-arrow-right.svg) no-repeat right center;
    background-size: 18px 18px;
    padding: 0 30px 0 0;
    display: inline;
    }

.solutions-menu li.firstlevel-active > .sub-menu > li > a img {
    display: none;
}

.solutions-menu ul li:hover li a {
    color: var(--sulo-black);
    }

.solutions-menu ul li:hover li a:hover {
    color: var(--sulo-red);
    }

.solutions-menu ul li:hover li li a:hover {
    color: var(--sulo-black);
    }

.solutions-menu ul ul li:hover,
.solutions-menu ul ul ul li:hover {
    border-right: 0px solid transparent;
    }

.solutions-menu ul li li li {
    border: 0px solid transparent;
    display: inline-block;
    width: 160px;
    text-align: center;
    margin: 0 15px 0 0;
    }

.solutions-menu ul li li li a,
.solutions-menu ul li:hover li li a {
    display: block;
    border-bottom: 3px solid transparent;
    padding: 15px;
    font-weight: 400;
    color: var(--sulo-black);
    background: transparent;
    }

.solutions-menu ul li li li a:hover,
.solutions-menu ul li li li.current-menu-item a {
    background: var(--sulo-lightgrey);
    border-bottom: 3px solid var(--sulo-red);
    color: var(--sulo-black);
    }

.solutions-menu ul li li li a img {
  transform: inherit;
  -webkit-transform: scale(0.95);
  -moz-transform: scale(0.95);
  -ms-transform: scale(0.95);
  -o-transform: scale(0.95);
  transform: scale(0.95);
}


.solutions-menu ul li li li a:hover img {
  transform: inherit;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.solutions-menu ul li li li.current-menu-item.menu-item-is-productfamily a {
    background: var(--sulo-lightgrey);
    border-bottom: 3px solid transparent;
    }

.solutions-menu ul li li li.current-menu-item.menu-item-is-productfamily {
    background: var(--sulo-lightgrey);
    border-bottom: 3px solid var(--sulo-red);
    color: var(--sulo-smokegrey);
    font-size: 18px;
    }

.solutions-menu .menu-item-description {
    color: var(--sulo-smokegrey);
    font-size: 18px;
    display: inline-flex;
    }

.solutions-menu .menu-item-block .menu-item-description {
    display: block;
    }

.solutions-menu .menu-title-big-red > a  {
    font-size: 44px;
    color: var(--sulo-red) !important;
}

.solutions-menu .ow-button-base a {
    display: block;
    color: var(--sulo-white) !important;
    width: fit-content;
}

.solutions-menu .ow-button-base a:hover {
    color: var(--sulo-red) !important;
}



.solutions-menu .firstlevel-active > a {
    color: var(--sulo-red);
    text-decoration: none;
    }


.menu-close {
    background: url(img/menu-close.svg) no-repeat center center;
    background-size: 24px 24px;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    margin: 30px;
    z-index: 950;
    }

.menu-close:hover {
    transform: rotate(180deg);
    }

.menu-close button {
    display: block;
    width: 30px;
    height: 30px;
    font-size: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    }

.activeMenu {
    display: block !important;
    }

.solutions-menu .menu-item-is-productfamily {
    padding: 25px 0;
    background: var(--sulo-lightgrey);
}

.solutions-menu ul li:hover li .menu-item-is-productfamily a:hover {
    border-bottom: 3px solid transparent;
}

.menu-item-is-productfamily .menu-item-description {
    display: inline-block;
    background: var(--sulo-midgrey);
    color: var(--sulo-white);
    width: 100%;
    padding: 5px 0;
    cursor: pointer;
    hyphens: initial;
}

.menu-item-is-productfamily:hover .menu-item-description {
    background: var(--sulo-red);
}

.menu-item-is-productfamily .menu-item-img {
    display:none;
}


/*----------------------------------------------------------------------
Footer
----------------------------------------------------------------------*/

footer {
    background: var(--sulo-darkgrey);
    color: var(--sulo-smokegrey);
    font-size: 14px;
    }

footer small {
    font-size: 14px;
    }

footer a {
    color: var(--sulo-smokegrey);
    }

footer a:hover {
    color: var(--sulo-white);
    text-decoration: none;
    }

footer ul {
    list-style: none;
    }

footer address {
    font-style: normal;
    color: var(--sulo-white);
    line-height: 1.4;
    margin: 30px 0;
    }

.footer-logo {
    display: block;
    width: 232px;
    vertical-align: middle;
    font-size: 0;
    line-height: 0;
    background: url(img/sulo-logo-grey.svg) left center no-repeat;
    background-size: auto 60px;
    }

.footer-logo a {
    display: block;
    width: 232px;
    height: 60px;
    }

.footer-main {
    padding: 45px 0 15px 0;
    }

.footer-contact {
    width: 20%;
    min-width: 232px;
    }

.footer-navigation {
    width: 80%;
    }

.footer-navigation div ul {
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    }

.footer-navigation div ul li {
    width: calc(20% - 30px);
    margin: 0 0 30px 30px;
    }

.footer-navigation div ul li a {
    font-weight: 700;
    color: var(--sulo-white);
    font-size: 16px;
    text-decoration: none;
    }

.footer-navigation div ul li li {
    width: 100%;
    margin: 0;
    }

.footer-navigation div ul li li a {
    font-weight: 400;
    font-size: 14px;
    color: var(--sulo-smokegrey);
    }

.footer-navigation div ul li li a:hover {
    color: var(--sulo-white);
    }

.footer-meta {
    background: var(--sulo-deepgrey);
    padding: 30px 0;
    }

.footer-meta small {
    width: 33.33%;
    }

.footer-is-imprint-menu {
    width: 66.66%;
    display: block;
    text-align: right;
    }

.footer-meta li {
    display: inline-block;
    margin: 0 0 0 30px;
    }


/*----------------------------------------------------------------------
Popup
----------------------------------------------------------------------*/


.popupcontainer,
.embedpopupcontainer {
    position: fixed;
    display:flex;
    flex-wrap: column;
    align-items: center;
    justify-content: center;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color: rgba(0,0,0,0.5);
    z-index:1000;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
}
.popupcontainer .menu-close {
    margin: 5px 5px 0 0;
    background-size: 16px 16px;
    align-self: flex-end;
    margin-bottom: auto !important;
}

.embedpopupcontainer .menu-close  {
    margin: none;
    /*background-size: 16px 16px;*/
}

.not-active {
    display: none;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
}

.popupcontainer-inner {
    display: flex;
    align-items: center;
    justify-content:space-between;
    width: 90%;
    max-width: 850px;
    background-color: var(--sulopopup-bg-color);
    background-position: 200px;
    color: var(--sulopopup-text-color);
    background-size: cover;
    box-shadow: 0px 0px 30px 6px rgb(0 0 0 / 40%);
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
}

.embedpopupcontainer-inner {
    display: flex;
    align-items: center;
    justify-content:space-between;
    width: 90%;
    max-width: 1024px;
    background-color: var(--sulopopup-bg-color);
    background-position: 200px;
    color: var(--sulopopup-text-color);
    background-size: cover;
    box-shadow: 0px 0px 30px 6px rgb(0 0 0 / 40%);
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
  }


.popup-message {
    align-self: flex-start;
    width: 30%;
    background-color: var(--sulopopup-bg-color);
    padding: 15px 15px;
    font-size: 18px;
    text-align: left;
}

.popup-message p {
    padding: 20px 0;
}

.popupcontainer-inner .menu-close {
    position: inherit;
    width: 30px;
    font-size: 20px;
    color: var(--sulopopup-text-color);
    align-self: flex-end;
    background-color: transparent;
    border: none;
    margin-bottom: 10px;
}

.popupcontainer-inner img {
    width: 100%;
}

.popupcontainer-inner .popup-buttons {
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content:space-between;
}

.popupcontainer-inner .accept {
    background-color: var(--sulopopup-bg-color);
    border: none;
    border-radius: 5px;
    width: 200px;
    padding: 14px;
    font-size: 16px;
    color: var(--sulopopup-text-color);
    box-shadow: 0px 6px 18px -5px rgba(237, 103, 85, 1);
}

.popupcontainer-inner [class*="sulobase"] {
    margin-bottom: 10px;
}

.popupcontainer-inner [class*="sulobase"] .ow-button-base a {
  box-sizing: border-box;
  font-size: 1em;
  padding: 0.7em 1.7em;
  background: transparent;
  border: 2px solid var(--sulopopup-text-color);
  color: var(--sulopopup-text-color);
}

.popupcontainer-inner [class*="sulobase"]:hover > .ow-button-base a {
  box-sizing: border-box;
  font-size: 1em;
  padding: 0.7em 1.7em;
  background: var(--sulopopup-text-color);;
  border: 2px solid var(--sulopopup-text-color);
  color: var(--sulopopup-bg-color);
}





/*----------------------------------------------------------------------
Banner Top Popup
----------------------------------------------------------------------*/

.banner-top-popupcontainer {
    position: fixed;
    display: flex;
    flex-direction: wrap;
    align-items: center;
    justify-content: center;
    width:100%;
    height:40px;
    top:0;
    left:0;
    background-color: #ff0000;
    color: white;
    font-size: 16px;
    line-height:16px;
    transition: all 1s ease;
    z-index: 700;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
}

.banner-top-popupcontainer img {
    height: 40px;
    width: auto;
    padding-right: 20px;
}

.banner-top-popupcontainer .menu-close {
    margin: 5px 40px 0 0;
    background-size: 16px 16px;
}

.close-white {
    background: url(img/menu-close-white.svg) no-repeat center center;
}

.header-drop-active {
    top: 40px !important;
}

.solutions-overlay-drop-active {
    top: 179px !important;
}



/*----------------------------------------------------------------------
Popup Lead Form
----------------------------------------------------------------------*/
/* Backdrop overlay */
#lead-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9998;
}

/* Popup container */
#lead-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    width: 80%;
    max-width: 400px;
    z-index: 9999;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

/* Close button */
#lead-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
}


/* Style the contact images inside the dropdown */
#lead-form select option img.contact-image {
    width: 30px;
    height: 30px;
    border-radius: 50%; /* Make the image round */
    vertical-align: middle;
    margin-right: 10px;
}





/*----------------------------------------------------------------------
Loading Configurator spinner
----------------------------------------------------------------------*/


.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid var(--sulo-red);
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--sulo-red) transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}



/*----------------------------------------------------------------------
Widget Postal Codes
----------------------------------------------------------------------*/
#postcodesalessearch{
 margin: 0 0 20px 0;
}

.widget-postcodessales .selection-content {
    padding: 100px 40px 40px 350px;
}

select,
.widget-postcodessales .select2-container--default .select2-selection--single {
    font-size: 18px;
    border: 0;
    border-radius: 0px;
    border-bottom: 1px solid var(--sulo-red);
    background-color: var(--sulo-lightgrey);
    padding: 10px;
    height: 50px;
    width: auto;
    min-width: 260px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #f00 !important;
}


/*
.select2-container--default .select2-selection--single .select2-selection__arrow::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
}*/


.select2-container--default .select2-selection--single .select2-selection__arrow b {
      border-width: 10px 10px 0 10px !important;
      margin-left: -15px !important;
      margin-top: 6px !important;
}

.select2-search__field,
.select2-results__options,
.select2-results__option--selectable,
.select2-results__option,
.select2-results__message {
  font-size: 0.9em;
}

.select2-dropdown {
  margin: 20px 0 0 0;
  width: auto;
  min-width: 200px;
  padding: 5px;
  border: none !important;
  border-radius: 0 !important;
  background-color: var(--sulo-lightgrey);
  min-width: 300px;
  top: -70px;
  box-shadow: 0px 19px 27px 0px rgba(0,0,0,0.6);
  padding: 20px;
}

.select2-dropdown--below {

}

.select2-search--dropdown .select2-search__field {
  border-bottom: 2px solid var(--sulo-red) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--sulo-smokegrey);
}

.is-contact-widget .widget_media_image.highlight {
  animation: highlight-shadow 1s infinite;
  animation-iteration-count: 1;
}

@keyframes highlight-shadow {
    0% {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
    }

    80% {
    box-shadow: 0px 0px 0px 600px rgba(0, 0, 0, 0.3);
    }

    100% {
    box-shadow: 0px 0px 0px 800px rgba(0, 0, 0, 0);
    }
}

.button-small {
  font-size: 0.8em !important;
}


.is-contact-widget .widget_custom_html.active-search {
  right: 0 !important;
}


.smalltext {
  font-size: 18px;
}

.is-contact-widget .custom-html-widget .settings {
  float: right;
  display: none;
  transform: translateY(-10px);
  color: var(--sulo-black);
}

.is-contact-widget .custom-html-widget .settings:hover {
  color: var(--sulo-red);
}



/* Hover-Animation for Contact Page picture */

.set-contact {
  position: relative;
  cursor: pointer;
}

.set-contact .sow-image-container .so-widget-image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.set-contact-overlay {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.set-contact:hover .sow-image-container .so-widget-image {
  opacity: 0.3;
}

.set-contact:hover .sow-image-container .set-contact-overlay {
  opacity: 1;
}





/* Show or hide widget-postcodessales if cookie is set / or not */
.hide {
  transition: .5s ease;
  display: none;
}

/*----------------------------------------------------------------------
BorlabsCookie
----------------------------------------------------------------------*/
.brlbs-cmpnt-container,
.brlbs-cmpnt-container * {
  border-radius: 0 !important;
}

.BorlabsCookie ._brlbs-video-youtube a._brlbs-btn {
    border-radius: 0 !important;
  	font-size: 20px;
}


.widget_media_video {
    position: relative;
    width: 100%;
    /* padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ */
}

.responsive-video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* oder 9 / 16 für Hochformat-Videos */
  overflow: hidden;
}


.responsive-video-wrapper iframe,
.responsive-video-wrapper .brlbs-cmpnt-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}




/*----------------------------------------------------------------------
Blog Post Artikel (CPT)
----------------------------------------------------------------------*/
.backtoblogoverview {
  background-image: url('https://downloads.sulo.com/Contents/Home/SULO-circular-eco.jpg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  height: 50px;
  padding: 80px;
  max-width: 1120px;
  margin: 0 auto;
}

.is-blog-post .panel-grid:nth-of-type(2) {
  z-index: 100;
  position: relative;
  background-color: var(--sulo-white);
  padding: 80px 80px 0 80px;
  margin-top: -400px;
}

.is-blog-post-info {
  padding: 0 40px 40px 40px;
}

.is-blog-post-info img {
  max-width: 110px;
}

.is-blog-content-list li{
  line-height: 40px;
}

.product-archive-loop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  box-sizing: border-box;
}

/* Base panel style */
.product-archive-loop .panel-50 {
  flex: 1 1 calc(16.66% - 20px); /* grow, shrink, basis */
  max-width: calc(16.66% - 20px);
  box-sizing: border-box;
  min-width: 100%; /* optional: to prevent shrinking too much */
}

/* 4 per row max */
@media (max-width: 1280px) {
  .product-archive-loop .panel-50 {
    flex: 1 1 calc(25% - 20px);
    max-width: calc(25% - 20px);
  }
}

/* 2 per row max */
@media (max-width: 768px) {
  .product-archive-loop .panel-50 {
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}

/* 1 per row */
@media (max-width: 480px) {
  .product-archive-loop .panel-50 {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.blog-archive-loop {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
	max-width: 1280px;
	margin: 0 auto;
}

.blog-archive-loop .panel-50:nth-of-type(2n+1) {
  flex-basis: calc(50% - 20px );
  margin: 0 0 20px 0;
  flex-grow: 1;
}

.blog-archive-loop .panel-50:nth-of-type(2n) {
  flex-basis: calc(50% - 20px );
  margin: 0 0 20px 20px;
  flex-grow: 1;
}

.blog-archive-loop .sow-cta-base a,
.blog-archive-loop .sow-cta-base a .sow-cta-text {
  text-decoration: none;
  color: var(--sulo-white);
}


.blog-archive-loop .is-hover-teaser .sow-cta-subtitle {
  font-weight: normal;
}

#blog-pagination {
  display: flex;
  align-items: center;
  margin-top: 40px;
}

.pagination a {
  padding: 0.7em 1.7em;
  background-color: var(--sulo-red);
  color: var(--sulo-white);
  border: 2px solid transparent;
  text-decoration: none;
}

.pagination a:hover {
  background-color: var(--sulo-white);
  color: var(--sulo-red);
  border: 2px solid var(--sulo-red);
}

.blog-loop-slider-image img {
  padding-right: 40px;
  min-width: 485px;
  max-width: 600px;
  max-height: 220px;
  object-fit: cover;
}


.blog-loop-slider .is-content-slider {
  box-shadow: none;
  min-height: 500px;
}

.is-blog-post .is-content-slider .panel-layout {
	box-shadow: none;
}

.blog-loop-slider .is-content-slider .panel-layout {
  	box-shadow: none;
}

.blog-shadow {
  background: #fff;
	box-shadow: 0px 0px 20px 6px rgba(200, 200, 200, 0.5) !important;
  padding: 60px 80px;
  margin: 30px 60px;
}

.ow-button-base a {
  text-decoration: none;
}

.is-blog-aside {
    display:flex;
    flex-wrap: no-wrap;
    justify-content: center;
    position: fixed;
    top: 18vh;
    width: 70px;
    padding: 5px;
    background-color: var(--sulo-lightgrey);
}

.bottom-blog-single {
  display: flex;
  flex-wrap: row wrap;
  justify-content: space-around;
  width: 100%;
}

.post-details-cat,
.post-details-tag {
    font-size: 18px;
  margin-bottom: 20px;
    text-decoration: none;
}

.post-details-cat a[rel=tag] {
  text-transform: uppercase;
}

.post-details-cat a[rel=tag],
.post-details-tag a[rel=tag] {
  display: inline-block;
  padding: 0.3em 1.3em;
  margin: 0.2em 0;
  color: var(--sulo-black);
  text-decoration: none;
  border: 1px solid var(--sulo-midgrey);
}

.post-details-tag a[rel=tag]::before {
  content: "#";
}

.postdetails a[rel=tag]:hover {
  background-color: var(--sulo-midgrey);
  color: var(--sulo-white);
}

/*----------------------------------------------------------------------
Social Icons
----------------------------------------------------------------------*/
.blog-social-icons {
  display:flex;
  flex-wrap: wrap ;
  align-items: flex-start;
  margin-bottom: 10px;
}

.blog-social-icons .-linkback .dashicons {
  color: var(--sulo-red) !important;
}

.blog-social-icons a span.dashicons {
  font-size: 30px !important;
  color: var(--sulo-black) !important;
  padding: 15px;
  cursor: pointer;
}

.blog-social-icons a:hover span.dashicons {
  color: var(--sulo-red) !important;
}


.social-media-links .dashicons,
.social-media-links .dashicons:before {
  width: 35px;
  height: 35px;
  font-size: 30px;
}



/*----------------------------------------------------------------------
Scroll position
----------------------------------------------------------------------*/

/* The progress container (grey background) */
.progress-container {
  width: 100%;
  height: 4px;
  background: var(--sulo-lightgrey);
  display: none;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 4px;
  background: var(--sulo-red);
  width: 0%;
}

.progress-container-show {
  display: block;
}



/* Accordion Subsidiaries Embedded from SULO MAINHOST */

.accordion_subsidiaries .panel-grid-cell {
  width: 100%; /* Stretch Embed 100% */
}






/*----------------------------------------------------------------------
Solutions Focus Content IFAT 2024
----------------------------------------------------------------------*/


.is-overview-topics,
#content-topics .content-topic-single.active {
  scale: 1;
  transition: max-height 0.5s ease-in;
}


.is-overview-topics .panel-grid-cell .so-panel {
  height: 50vh;
  margin: 0 !important;
  padding: 0 !important;
}


.is-overview-topics .panel-grid-cell .so-panel .panel-widget-style {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.is-overview-topics .panel-grid-cell {
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.is-overview-topics .panel-grid-cell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.0);
  z-index: 1;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.is-overview-topics .panel-grid-cell:hover::before {
  background-color: rgba(255, 0, 0, 0.5);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.is-overview-topics .panel-grid-cell h2 {
  position: relative;
  z-index: 2;
}

.is-overview-topics .panel-grid-cell {
  margin-bottom: 0 !important;
}

.is-overview-topics .panel-grid-cell .so-panel h2 {
  color: var(--sulo-white);
  padding: 60px;
  font-size: 75px;
  line-height: 65px;
  text-transform: uppercase;
  text-align: center;
}


.is-image-with-text .so-widget-sow-image {
  display: flex;
  flex-direction: row; /* Lay items out in a row */
  position: relative; /* Establish positioning context */
}


.is-image-with-text .widget-title {
  padding: 10px;
  position: absolute; /* Position divs absolutely */
  left: 0; /* Align divs to the left */
  top: 0; /* Align divs to the top */
  display: flex; /* Use flexbox for centering */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  text-align: center;
  text-transform: uppercase;
  height: 100%; /* Stretch divs to the height of the parent */
  width: 100%;
  display: none;
}


.is-headline-highlight {
  font-size: 120px !important;
  line-height: 120px !important;
}


.is-red-border {
  border: 2px solid var(--sulo-red);
}

.is-green-border {
  border: 2px solid var(--sulo-green);
}

.is-blue-border {
  border: 2px solid var(--sulo-blue);
}

/* .is-red-border .widget-title {
  color: var(--sulo-white);
} */


.is-red-dot-highlight {
  color: var(--sulo-white);
  text-align: center;
}

.is-red-dot-highlight::before {
  display: inline-block;
  content: '';
  background-color: #f00;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.is-deepgrey-ground-fade-bottom {
  background: linear-gradient(to bottom, #202020 5%, #252525 20%, transparent 100%)
}


.is-blur-ground {
  box-shadow: 0 20px 40px rgba(57,76,96,.15);
  backdrop-filter: blur(20px);
  border: 2px solid;
}

[class^="is-tile-round-"] {
  transition: all 0.3s ease; /* Smooth transition for both hover and leave */
  will-change: transform; /* Inform the browser to optimize for the upcoming transform */
  backface-visibility: hidden; /* Prevent flickering */
}

[class^="is-tile-round-"]:hover {
  transform: translateY(-20px); /* Move up by 20px on hover */
  box-shadow: 0 20px 40px rgba(57,76,96,.6);
}

.panel-grid-cell-empty [class^="is-tile-round-"] {
  display: none;
}

[class^="is-tile-round-"].no-tile,
[class^="is-tile-round-"]:hover.no-tile {
  background: inherit;
  border-radius: 0;
  padding: inherit;
  box-shadow: 0;
}



.is-tile-round-white {
  background: var(--sulo-white);
  border-radius: 20px;
  padding: 40px 20px;
  box-shadow: 0 20px 40px rgba(57,76,96,.3);
  }

.is-tile-round-darkgrey {
  background: var(--sulo-darkgrey);
  color: var(--sulo-white) !important;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(57,76,96,.3);
  }

.is-tile-round-green {
  background: var(--sulo-green);
  color: var(--sulo-white);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(57,76,96,.3);
  }

.is-tile-round-white-benefits {
  background: var(--sulo-white);
  border-radius: 20px;
  padding: 40px 20px;
  box-shadow: 0 20px 40px rgba(57,76,96,.3);
  transition: all 0.5s ease;
  }

.is-tile-round-white-benefits:hover {
  background: var(--sulo-red);
  color: var(--sulo-white) ;
  }

.is-tile-round-white-benefits p {
  /* position: absolute; */
  top: 0;
  left: 0;
  padding: 40px 20px;
  border-radius: 20px;
  align-content: center;
  height: 100%;
  width: 100%;
  font-size: 18px;
  /* visibility: hidden; */
  }

.is-tile-round-white-benefits:hover h4,
.is-tile-round-white-benefits:hover p,
.is-tile-round-white-benefits:hover [class^="sow-icon-"] {
  color: var(--sulo-white) !important;
  visibility: visible;
  transition: all 0.5s ease;
  }

.is-tile-round-white .so-widget-sow-image img {
  max-height: 100px;
  }

.is-tile-round-white .so-widget-sow-image .widget-title {
  font-size: 20px;
  margin: 10px 0 0 0;
  }

.is-image-titles .widget-title {
  color: #fff;
  font-size: 18px;
  }

.scroll-container {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  }

.scroll-container::-webkit-scrollbar {
  width: 0;
  height: 0;
  }

.scroll-container img {
  width: auto;
  max-width: unset !important;
  height: 1000px;
  }


.list-check-highlight-white ul,
.list-check-highlight-red ul,
.list-arrow-right-highlight-white ul,
.list-arrow-right-highlight-red ul {
  list-style: none;
  margin: 0;
  padding: 0;
  }

.list-check-highlight-white ul li,
.list-check-highlight-red ul li,
.list-arrow-right-highlight-white ul li,
.list-arrow-right-highlight-red ul li {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 16px;
  font-size: 90%;
}

.list-check-highlight-white ul li::before,
.list-check-highlight-red ul li::before,
.list-arrow-right-highlight-white ul li::before,
.list-arrow-right-highlight-red ul li::before {
  content: '';
  display: inline-block;
  height: 26px;
  width: 26px;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 10px 0 0;
  flex-shrink: 0;
  }

.list-check-highlight-white ul li::before {
  background-image: url(img/check-highlight-white.svg);
  }

.list-check-highlight-red ul li::before {
  background-image: url(img/check-highlight-red.svg);
  }

.list-arrow-right-highlight-white ul li::before {
  background-image: url(img/arrow-right-highlight-white.svg);
  }

.list-arrow-right-highlight-red ul li::before {
  background-image: url(img/arrow-right-highlight-red.svg);
  }

.panel-background-overlay {
  background-repeat: no-repeat;
}



.is-sustainable-carousel .sow-carousel-item-title {
  display: none;
  }

/* .is-sustainable-carousel .slick-list {
    padding: 0 85px 0 85px;
} */

/* .is-sustainable-carousel .slick-track {
    width: max-content !important;
}

.is-sustainable-carousel .slick-track {
  width: 10000px !important;
}
*/

/* .is-sustainable-carousel .sow-carousel-item {
    width: 600px !important;
  } */

  .is-sustainable-carousel .sow-carousel-content {
    height: auto;
    width: auto;
  }

  .is-sustainable-carousel .sow-carousel-item .panel-widget-style {
      height: 400px;
      /* width: 600px !important; */
      padding: 40px;
  }

  .is-sustainable-carousel .sow-carousel-item:hover .panel-background-overlay {
    transition: all 0.5s ease;
    opacity: 0.95;
  }

  .is-sustainable-carousel .sow-carousel-item:hover .panel-widget-style,
  .is-sustainable-carousel .sow-carousel-item:hover .panel-background-overlay {
    transition: all 0.5s ease;

  }


.is-sustainable-carousel .slick-dots li button::before,
.is-navi-bars .sow-slider-pagination li a {
  content: '' !important;
  display: block;
  font-family: initial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  text-align: center;
  background: var(--sulo-smokegrey);
  width: 28px !important;
  height: 10px !important;
  border-radius: 0 !important;
  transition: all 0.5s ease;
}

.is-sustainable-carousel .slick-dots li.slick-active button::before,
.is-navi-bars .sow-slider-pagination li.sow-active a {
  background: var(--sulo-green);
  width: 70px !important;
  transition: all 0.5s ease;
}

.is-red-ground .is-navi-bars .sow-slider-pagination li a {
  background: var(--sulo-white) !important;
}

.is-red-ground .is-navi-bars .sow-slider-pagination li.sow-active a {
  background: var(--sulo-black) !important;
}

.is-navi-bars .sow-slide-nav {
  display: none !important;
}

.is-navi-bars .sow-slider-image-container h4 {
  font-size: 140% !important;
  line-height: 100% !important;
}

.is-navi-bars .sow-slider-image-container p {
  font-size: inherit !important;
  line-height: inherit !important;
}

.list-sustainable {
    list-style: none !important; /* Remove default list style */
    padding-left: 0; /* Add some padding to the left to account for the icons */
    position: relative;
}

.list-sustainable li {
    position: relative;
    padding: 0 0 1em 2em;
    font-size: 80%;
}

.list-sustainable.small li {
    padding: 0 0 0.5em 2em;
    font-size: 80%;
}

.list-sustainable li::before {
    font-family: 'FontAwesome'; /* Ensure the correct Font Awesome 4 family */
    content: '\f06c'; /* fa-info-circle icon (Font Awesome 4) */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1em; /* Adjust icon size as needed */
    display: inline-block;
    color: var(--sulo-green); /* Adjust the color as per your design */
    transition: transform 0.3s ease; /* Smooth transition for the rotation */
    transition: all 0.5s ease;
}

.list-sustainable li:hover::before {
    transform: rotate(-10deg); /* Rotate icon on hover */
    font-size: 1.2em;
    transition: all 1s ease;
}

.list-sustainable.white li::before {
    color: var(--sulo-white); /* Adjust the color as per your design */
}



[data-aos="scroll-scale"] {
  transition: transform 0.1s ease;
}

.scroll-scale,
.scroll-move {
  transition: transform 0.1s ease;
}


.is-accordion-centered .sow-accordion .sow-accordion-panel .sow-accordion-panel-header {
  flex-direction: column !important;
  text-align: center;
}

.is-accordion-centered .sow-accordion .sow-accordion-panel .sow-accordion-panel-header .sow-accordion-open-close-button {
  margin-top: 10px;
  transition: transform 0.3s ease;
  transform: rotate(0deg) scale(1.3);
}

.is-accordion-centered .sow-accordion .sow-accordion-panel .sow-accordion-panel-header:hover .sow-accordion-open-close-button {
  transition: transform 0.3s ease;
  transform: rotate(90deg) scale(1.5);
}


/*----------------------------------------------------------------------
Orwak Products Swiss
----------------------------------------------------------------------*/

.is-orwak-product-cards .widget_sow-image {
  margin-bottom: 0;
}

.is-orwak-product-cards .widget_sow-editor {
  padding: 20px;
  border-top: 3px solid transparent;
  transition: all 0.5s ease;
}

.is-orwak-product-cards .panel-grid-cell:hover > .widget_sow-editor {
  background-color: var(--sulo-lightgrey);
  height: stretch;
  border-top: 10px solid red;
  transition: all 0.5s ease;
}

 .is-orwak-product-cards .panel-grid-cell .widget_sow-image .sow-image-container img {
    transform: scale(0.9);
    transition: transform 0.3s ease-in-out;
}

.is-orwak-product-cards .panel-grid-cell:hover > .widget_sow-image .sow-image-container img {
    transform: scale(1);
}

.is-orwak-product-cards .widget_sow-editor .widget-title {
  font-family: 'Roboto';
  font-size: 22px;
  font-weight: 600;
  color: var(--sulo-black);
}

.is-orwak-product-cards .widget_sow-editor .textwidget {
  font-size: 16px;
}
/*
.is-orwak-product-cards .widget_sow-editor .textwidget a {
  display: block;
  margin-top: 1.2rem;
}
 */








/*----------------------------------------------------------------------
Small Desktop
----------------------------------------------------------------------*/

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

   .wrapper {
        margin: 0px 30px;
        max-width: 100%;
        }

    .overlay-active .main-menu-wrapper,
    .overlay-active .language-menu-wrapper,
    #language-overlay {
        width: 50%;
        }

    .main-content .sow-slider-image-wrapper {
        padding-left: 30px !important;
        padding-right: 30px !important;
        }

    .is-fullwidth-teaser-text {
        padding: 80px 30px 80px 30px;
        max-width: 100%;
        margin: auto;
        }

    .footer-contact {
        width: 100%;
        }

    .footer-navigation {
        width: 100%;
        }

    .footer-navigation div ul li {
        width: calc(33.33% - 30px);
        margin: 0 30px 30px 0;
        }

    .solutions-menu img {
        height: auto;
        width: auto;
        max-width: 140px;
        max-height: 100px;
        }

    .solutions-menu ul ul {
        min-width: 780px;
        }

    .solutions-menu ul ul ul {
        min-width: 620px;
        }

    .solutions-menu ul li li li {
        width: 140px;
        margin: 0 10px 0 0;
        }

    .solutions-menu ul li li li a {
        font-size: 18px;
        padding: 12px !important;
        }

    .main-content .is-stage-header .sow-slider-image-wrapper {
        padding: 10% 30px 0 30px !important;
        }

    .main-content .is-productfamily-header .sow-slider-image {
        min-height: 400px;
        }

    .main-content .is-productfamily-header .sow-slider-image-wrapper {
        padding: 300px 30px 100px 30px !important;
        }

    .main-content .is-content-header .sow-slider-image {
        min-height: 400px;
        }

    .main-content .is-content-header .sow-slider-image-wrapper {
        padding: 300px 30px 100px 30px !important;
        }

    .panel-row-style {
          scroll-margin-top: 100px;
        }

    .widget_sow-editor,
    .widget_sow-button,
    .widget_sow-image-grid,
    .widget_sow-tabs,
    .widget_sow-image,
    .widget_custom_html {
        padding: 0 20px !important;
    }


    .widget-postcodessales .select2-container--default .select2-selection--single {
      font-size: 16px;
    }


    .is-button-buy .so-widget-sow-button a {
      min-width: 100%;
    }

}



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

  #solutions-overlay{
    overflow-y: auto !important;
  }

  .solutions-menu ul ul {
    min-width: 600px;
  }

}


/*----------------------------------------------------------------------
Tablet
----------------------------------------------------------------------*/

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

    .portal-header {
        padding: 30px 0;
        }

    .main-navigation {
        width: 70px;
        }

    .meta-navigation {
        width: calc(100% - 220px);
        }

    .menu-before-main-menu {
        display: block;
        border-top: 3px solid var(--sulo-lightgrey);
        padding: 30px 60px;
        }

    .menu-before-main-menu li  {
        padding: 10px 0;
    }

    .menu-before-main-menu li a:hover {
        color: var(--sulo-red);
    }

    .menu-before-main-menu a.external-sulogroup-link {
        background: url(img/globus-black.svg) left center no-repeat;
        background-size: 20px 20px;
        color: var(--sulo-black);
        padding: 0 0 0 35px;
    }

    .menu-before-main-menu a.vacatures-link {
        background: url(img/contactperson-black.svg) left center no-repeat;
        background-size: 20px 20px;
        color: var(--sulo-black);
        padding: 0 0 0 35px;
    }

    .meta-navigation ul {
        display: none;
        }

    .icon-nav,
    .icon-nav::before,
    .icon-nav::after {
        display: block;
        }

    button .main-menu-text {
        /*display: none;*/
        padding: 0 0 0 50px;
        }

    .portal-logo,
    .footer-logo {
        width: 150px;
        background-size: auto 40px;
        }

    .portal-logo a,
    .footer-logo a {
        width: 150px;
        height: 40px;
        }

    .sow-slider-image-container h1,
    .sow-slider-image-container h2,
    .sow-slider-image-container h3,
    .sow-slider-image-container h4,
    .sow-slider-image-container .subtitle {
        width: 100%;
        }

    .main-content .is-stage-header .sow-slider-image-container {
        background: rgba(20,20,20,0.3);
        }

    .main-content .is-stage-header .sow-slider-image-wrapper {
        padding: 180px 30px 0 30px !important;
        }

    .main-content .is-productfamily-header .sow-slider-image {
        min-height: 360px;
        }

    .main-content .is-productfamily-header .sow-slider-image-wrapper {
        padding: 260px 10px 80px 10px !important;
        }

    .main-content .is-content-header .sow-slider-image {
        min-height: 360px;
        }

    .main-content .is-content-header .sow-slider-image-wrapper {
        padding: 260px 10px 80px 10px !important;
        }

    .is-hover-teaser .so-widget-sow-cta {
        height: auto;
        }

    .double-teaser-high .so-widget-sow-cta {
        height: 400px;
        }

    .is-hover-teaser:hover,
    .is-hover-item:hover {
        margin: 0;
        box-shadow: 0px 0px 0px 0px transparent;
        }

    .is-hover-teaser .sow-cta-subtitle,
    .is-hover-teaser:hover .sow-cta-subtitle,
    .is-hover-item ul,
    .is-hover-item ol,
    .is-hover-item p,
    .is-hover-item:hover ul,
    .is-hover-item:hover ol,
    .is-hover-item:hover p  {
        font-size: 19px;
        line-height: 1.2;
        visibility: visible;
        }

    .is-feature-item {
        margin: 0;
        }

    .is-feature-item p {
        min-height: auto;
        padding: 0 0 30px 0;
        }

    .is-fullwidth-teaser-text {
        padding: 80px 30px 50px 30px;
        }

    .is-download-item {
        min-height: 200px;
        background-size: 40px auto;
        }

    .is-download-item:hover {
        background-size: 40px auto;
        margin: 0;
        box-shadow: 0px 0px 0px 0px transparent;
        }

    .is-download-item h4 {
        min-height: 100px;
        }

    .is-product-title {
        /*margin: -450px 0 0 0;*/
        margin-top: -450px !important;
        }

    .is-product-title .so-widget-image {
      max-height: 220px;
    }

    .is-product-headline h1 {
        min-width: 200px;
        margin: 30px 0 0 0;
        }

    .is-product-headline h1 span {
        background: var(--sulo-lightgrey);
        font-family: 'Roboto Slab', 'Georgia', serif;
        margin: 5px 0 0 0;
        }

    .main-menu {
        margin: 0 0 60px 0;
        }

    .overlay-active .main-menu-wrapper,
    .overlay-active .language-menu-wrapper,
    #language-overlay {
        width: 100%;
        }

    .is-before-menu,
    .menu-before-main-menu,
    .main-menu-links,
    .language-menu,
    .language-menu-content {
        padding: 30px 30px;
        }

    .solutions-menu-in-main-nav-title {
        text-transform: uppercase;
        color: var(--sulo-smokegrey);
        font-size: 18px;
        font-weight: 400;
        padding: 30px 0 0 30px;
        display: block;
        border-top: 3px solid var(--sulo-lightgrey);
        }

    .after-main-menu {
        padding: 30px 30px 60px 30px;
        }

    .menu-close {
        position: relative;
        margin: 30px 30px 30px 30px;
        }

    .language-menu-content .menu-close {
        margin: 0 0 15px 0;
        }

    #solutions-overlay.solution-active {
        height: calc(100% - 100px);
        top: 100px;
        }

    .get-sticky.menu-solutions-active #solutions-overlay.solution-active {
        height: calc(100% - 80px);
        top: 80px;
        }

    .solutions-menu {
        margin: 0 0 0 0;
        padding: 30px 0 0 0;
        height: 100%;
        }

    .solutions-menu img {
        height: 100%;
        width: auto;
        max-width: 100%;
        max-height: 120px;
        }

    .solutions-menu ul {
        width: 100%;
        }

    .solutions-menu ul:first-child {
        border-right: 0;
        }

    .solutions-menu li > a {
        background: url(img/menu-arrow-down.svg) right center no-repeat;
        background-size: 18px 18px;
        }

    .solutions-menu li.firstlevel-active > a {
        background: url(img/menu-arrow-up.svg) right center no-repeat;
        background-size: 18px 18px;
        }

    .solutions-menu ul ul {
        min-width: auto;
        position: relative;
        left: 0;
        padding: 15px 0 0 0;
        }

    .solutions-menu ul ul ul {
        min-width: auto;
        position: relative;
        }

    .solutions-menu ul li {
        border-right: 0;
        margin: 0 0 30px 0;
        }

    .solutions-menu ul li li {
        margin: 0 0 15px 0;
        }

    .solutions-menu ul li:hover {
        border-right: 0;
        }

    .solutions-menu ul li li li {
        width: calc(20% - 15px);
        }

    .solutions-menu .menu-title-big-red > a  {
        font-size: 24px;
    }

    .is-contact-widget {
        width: 85px;
        }

    .is-contact-widget .widget_media_image {
        width: 70px;
        height: 70px;
        margin: 0 15px 0 0 !important;
        }

    .is-contact-widget .widget_media_image img {
        transition: .5s ease;
        width: 60px !important;
        height: 60px !important;
        }

    .is-contact-widget .widget_custom_html {
        bottom: 40px;
        }

    .footer-meta small {
        width: 100%;
        }

    .footer-is-imprint-menu {
        width: 100%;
        text-align: left;
        }

    .footer-navigation div ul li li,
    .footer-meta li {
        display: block;
        margin: 5px 0 0 0;
        }

    .notfound-content {
        padding: 5vh 0 30vh 0;
        }

    .widget-postcodessales .selection-content {
        padding: 20px;
        background-color: var(--sulo-white);
    }

    .is-blog-post .panel-grid:nth-of-type(2) {
      padding: 0px;
      margin-top: -40vh;
    }

    .blog-archive-loop .panel-50:nth-of-type(2n+1) {
      flex-basis: 100%;
    }

    .blog-archive-loop .panel-50:nth-of-type(2n) {
      margin: 0 0 20px 0;
      flex-basis: 100%;
    }

    .backtoblogoverview {
        min-height: 200px;
    }

    .bottom-blog-single {
        min-height: 200px;
    }

    .is-blog-post .panel-grid:nth-of-type(2) {
      width: 80vw;
      padding: 10px;
      margin-top: -250px;
    }


    .blog-archive-loop .is-hover-teaser .sow-cta-subtitle {
        font-size: 0px;
        line-height: 0;
        visibility: hidden;
        }

    .is-blog-aside {
        z-index: 150;
        position: fixed;
        top:inherit;
        bottom: 0;
        width: 100%;
        height: 40px;
        padding: 0;
        background-color: var(--sulo-lightgrey);
    }

    .bottom-blog-single {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
    }

    .blog-social-icons {
      display:flex;
      flex-wrap: wrap ;
      align-items: flex-start;
      margin-bottom: 10px;
    }

    .blog-social-icons a span.dashicons {
      font-size: 22px !important;
      color: var(--sulo-black) !important;
      padding: 10px;
    }


    .blog-loop-slider-image {
      min-width: 100%;
      max-width: 100%;
      max-height: 200px;
      margin: 0 0 20px 0;
    }

    .blog-loop-slider-image img {
      padding-right: 0;
      min-width: 100%;
      max-width: auto;
      max-height: 200px;
      object-fit: cover;
    }

    .blog-shadow {
      padding: 0 0 20px 0;
      flex-direction: column;
    }

    .is-scrolltop-widget {
        bottom: 10px;
        padding: 0px 10px 5px 10px;
        }

    .is-scrolltop-widget::after {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid var(--sulo-midgrey);
        }

    .is-scrolltop-widget:hover::after {
        border-bottom: 5px solid var(--sulo-white);
        }

    .is-scrolltop-widget.show-scrolltop {
        left: 10px;
        }

}


/*----------------------------------------------------------------------
Smartphone
----------------------------------------------------------------------*/

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

    .group-banner {
      top: inherit;
      bottom: 0;
      margin: 0 0 -16px 0;
      align-items: flex-end;
    }

    .group-banner:hover {
      bottom: 0;
      margin: 0 0 -10px 0;
      align-items: flex-end;
    }

    .group-banner a img {
      width: 130px;
      height: auto;
      padding: 8px 16px 20px 16px;
      background: var(--sulo-darkgrey);
      border-radius: 10px 10px 0 0;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      transition: all 0.5s ease;
    }


    body {
        font-size: 17px;
        }

    h1,
    .sow-slider-image-container h2,
    .sow-slider-image-container h1,
    .is-product-headline h1 strong {
        font-size: 34px !important;
        line-height: 36px !important;
        }

    .sow-slider-image-container .subtitle {
        font-size: 20px !important;
        line-height: 22px !important;
    }

    h2,
    .main-content h1 {
        font-size: 28px;
        }

    h3 {
        font-size: 24px;
        }

    .sow-slider-image-container h3 {
      font-size: 20px !important;
      line-height: 20px !important;
    }

    h4 {
        font-size: 22px;
        }

    .main-navigation {
        width: 50px;
        margin: 5px 0 0 0;
        }

    .meta-navigation {
        width: calc(100% - 200px);
        margin: 8px 0 0 0;
        }

    .solutions-menu ul li li li {
        width: calc(50% - 15px);
        }

    .main-content .is-stage-header .sow-slider-image-wrapper {
        padding: 160px 30px 0 30px !important;
        }

    .footer-navigation div ul li {
        width: calc(50% - 30px);
        }

    .footer-navigation div ul li li {
        width: 100%;
        }

    .is-product-title {
        /*margin: -250px 0 0 0;*/
        margin-top: -250px !important;
        }

    .is-product-title .widget_media_image {
        width: 65%;
        margin: 0 auto;
        }

    .is-content-slider .panel-layout {
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: 0px 0px 0px 0px transparent;
        }

    .sow-slider-image-container p {
        font-size: 15px !important;
      }

    .is-set-image-height img {
        height: auto !important;
        max-height: 250px;
        width: auto;
        }

    .is-set-logos-size img {
        height: 120px !important;
        width: auto;
        padding: 0 20px 20px 0;
        }

    .is-image-bottom-set img {
        max-height: 200px !important;
        height: initial !important;
        width: auto !important;
    }

    .is-same-panel-height {
        height: 400px !important;
    }

    .is-contact-widget .widget_custom_html {
        /*width: auto;
        min-width: 300px;
        */
        max-width: 100vw;
        }

    .popup-message {
        align-self: flex-start;
        width: 100%;
        }

    .popupcontainer-inner .popup-buttons {
        flex-wrap: column;
        }

    .popupcontainer-inner .menu-close {
        display: none;
        }

    .notfound-content {
        padding: 0 0 30vh 0;
        }

    .is-marketplace-listings .is-variant-list .widget_sow-image {
      height: auto;
    }

}





@media (-webkit-device-pixel-ratio: 1.5),
(-moz-device-pixel-ratio: 1.5),
(-moz-device-pixel-ratio: 1.25),
(-moz-device-pixel-ratio: 1.25) {
  :root {
    zoom: 0.70;
  }

  .is-contact-widget .widget_custom_html {
      width: 500px;
  }
}


@media screen and (min-width: 1300px) and (max-width: 1600px) and (min-height: 500px) and (max-height: 900px) {
  :root {
    zoom: 0.80;
  }

  .is-contact-widget .widget_custom_html {
      width: 500px;
  }
}