/* CSS Index
01. Default Styles
    - Tooltips
    - Images
    - Icons
    - Buttons
    - Video
    - Video Box
    - Video Content
    - Lists
    - Forms
02. Grid System
    - Spacing
    - Positioning Content
    - Backgrounds
03. Typography
    - Text Styles
    - Header Styles
    - Badge
04. Navigation
    - Header & Navigation
    - Sub Menu
05. Widgets
	- Logo Slider / Product Slider
	- Product Box
06. Pages
	- Product Landing Page
	- Demos
07. Global Site Sections
    - Features
    - Testimonials
    - Pricing Tables
    - FAQ
    - CTA Box
8. Landing Pages
9. Footer
10. Responsive Styles
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --gradient: #e42e3f;
    --ess-red: #e42e3f;
    --ess-red-light: #f13b4c;
    --ess-light: #F7F7FA;
    --ess-dark: #10182b;
    --ess-dark-grey: #353535;
    --white: #ffffff;
    --dark: #1E1E1E;
    --grey: #e1e1e1;
    --dark-grey: #828282;
    --light-grey: #F0F2F4;
    --text-grey: #a9a9a9;
    --secondarycolor: rgba(27, 27, 41, 1);
    --light-red: rgba(220, 12, 56, 0.2);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
    overflow-x: hidden;
}

body {
    color: var(--dark);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
    max-width: 1770px;
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    right: -170px;
    width: 100%;
    height: 100%;
    background: url(images/fine-line.png) no-repeat right top;
    transform-origin: top right;
    z-index: -1;
}

/* ----------------- Language Switcher ----------------- */

.lang-switch {
    position: relative;
}

.lang-switch-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--grey);
    border-radius: 8px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: inherit;
    line-height: 1;
    cursor: pointer;
    transition: border-color 200ms ease, color 200ms ease;
}

.lang-switch-toggle:hover,
.lang-switch-toggle[aria-expanded="true"] {
    border-color: var(--ess-red);
    color: var(--ess-red);
}

.lang-switch-toggle img,
.lang-switch-menu img,
.lang-switch-mobile img {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    flex: none;
}

.lang-switch-caret {
    transition: transform 200ms ease;
}

.lang-switch-toggle[aria-expanded="true"] .lang-switch-caret {
    transform: rotate(180deg);
}

.lang-switch-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 170px;
    padding: 6px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0px 5px 23px 4px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
    z-index: 20;
    text-align: left;
}

.lang-switch-toggle[aria-expanded="true"] + .lang-switch-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#main-header aside#header-cta .lang-switch-menu li {
    padding: 0;
}

#main-header aside#header-cta .lang-switch-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--dark);
    transition: background 200ms ease, color 200ms ease;
}

#main-header aside#header-cta .lang-switch-menu a:hover {
    background: var(--ess-light);
    color: var(--ess-red);
}

#main-header aside#header-cta .lang-switch-menu a.is-current {
    font-weight: 600;
    color: var(--ess-red);
}

.lang-switch-menu a.is-current::after {
    content: '';
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--ess-red);
}

/* Language row inside the burger menu, where #header-cta is hidden */

.lang-switch-mobile {
    display: none;
}

.lang-switch-mobile-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dark-grey);
}

.lang-switch-mobile > div {
    display: flex;
    gap: 10px;
}

#main-header .navbar-nav li.lang-switch-mobile a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--grey);
    border-radius: 8px;
    font-size: 0.95rem;
}

#main-header .navbar-nav li.lang-switch-mobile a.is-current {
    border-color: var(--ess-red);
    color: var(--ess-red);
    font-weight: 600;
}

/* 01 ############################### Default Styles ############################### */

ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

ol li {
    list-style: decimal;
}


/* -------------------Tooltips----------------- */

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: var(--white);
    color: var(--dark);
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    font-size: 0.9rem;
    position: absolute;
    z-index: 1;
    box-shadow: 0px 5px 23px 4px rgba(0, 0, 0, 0.1);
}

.tooltip-bottom {
    top: 135%;
    left: 50%;
    margin-left: -60px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

/*  ----------------- Images  ----------------- */

figure {
    position: relative;
    margin: 0;
}

figure img {
    border-radius: 15px;
    box-shadow: 5px 16px 24px rgb(0 0 0 / 16%);
}

img {
    max-width: 100%;
    max-height: 100%;
    /* With width/height attributes on the markup this keeps the aspect
       ratio while the browser reserves the right space before load. */
    height: auto;
}

img.no-shadow {
    box-shadow: none;
}

.image-dot-left img,
.image-dot-right img {
    z-index: 1;
    position: relative;
}

.image-dot-left:before {
    content: " ";
    position: absolute;
    background: url(images/dots-big.png) repeat;
    display: block;
    height: 300px;
    width: 460px;
    left: -45px;
    top: -50px;
    z-index: 0;
    border-radius: 15px;
}

.image-dot-right:before {
    content: " ";
    position: absolute;
    background: url(images/dots-big.png) repeat;
    display: block;
    height: 300px;
    width: 460px;
    right: -50px;
    top: -50px;
    z-index: 0;
    border-radius: 15px;
}

.image-dot-right.two-images-box picture:nth-of-type(2) {
    position: absolute;
    left: -50px;
    top: 150px;
    z-index: 1;
}

.image-dot-left.two-images-box picture:nth-of-type(2) {
    position: absolute;
    right: -50px;
    top: 150px;
    z-index: 1;
}


/* Image Style 1 */

.image-style-one {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

.image-style-one img {
    width: 100%;
    height: auto;
}

.image-style-one picture:nth-child(2) {
    margin-top:4.5rem;
}


/*  ----------------- Icons  ----------------- */



.icon-shadow {
    background:var(--white);
    height: 75px;
    width: 75px;
    border-radius: 15px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: grid;
    place-items: center;
    margin-bottom: 2rem;
    line-height: 78px;
}

.icon-shadow i {
    color: var(--ess-red);
    font-size: 2.5rem;
}

/* --------------------- Buttons -------------------*/

.button {
    background: var(--gradient);
    display: inline-block;
    border-radius: 35px;
    padding: 12px 36px;
    color: var(--white);
    transition: .2s all ease;
    text-align: center;
    font-weight: 500;
    position: relative;
}

.button::before {
    background:linear-gradient(to left, #f0193d 0%, #e42e3f 100%);
    transition: all 0.3s ease-out;
}

.button:after {
    background: linear-gradient(to right, #e42e3f 0%, #dc0c38 100%);
    color: #fff;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.button:hover:after {
    opacity:0;
}

a.button:before, a.button:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 35px;
}

.button:hover, #main-banner .button:hover  {
    box-shadow: 0 12px 16px hsl(0deg 0% 0% / 20%);
    background: var(--ess-red-light);
    transform: translateY(-5px);
}

#product-banner .cta-double .button.transparent {
    color: var(--dark);
}

#product-banner .cta-double .button.transparent:hover, .button.transparent:hover {
    color: var(--ess-red);
    box-shadow: 0 12px 16px hsl(0deg 0% 0% / 20%);
    
}

.cta-double .hint {
    font-size: 0.9rem;
    display: inline-block;
    padding-left: 1.3rem;
}

#main-header a.button:hover {
    transform:none;
}

.button i {
    line-height: 18px;
    width: 18px;
    position: absolute;
    transition: all .45s cubic-bezier(.25,1,.33,1);
    bottom:-2px;
}

.button:hover i {
    transform:translateX(6px)
}

.button span, .button i {
    position:relative;
    z-index:1;
}

#main-header .button {
    padding: 8px 25px 5px 25px;
}

#main-header a.button::after, #main-header a.button:before, a.button.transparent::after, a.button.transparent::before {
    background:none;
}

.cta-box .button,
#section-banner .button {
    background: var(--gradient);
    color: var(--white)
}

#section-banner .button {
    max-width: 375px;
    margin: 1rem auto;
}
/* Button Transparent */

.button.transparent,
.button.transparent:hover {
    background: none !important;
}

.button.transparent-border {
    background: rgba(250, 250, 250, 0.1);
    box-shadow: none;
    border: 1px solid var(--white);
}


#main-header .button.transparent {
    padding-left: 5px;
    padding-right: 5px;
}

.button.transparent,
#section-banner .button.transparent {
    color: var(--dark);
}

.button.transparent:hover {
    color: var(--ess-red);
}

.link-icon {
    position: relative;
    transition: all 0.2s;
    right: -4px;
    top: 1px;
}

a:hover .link-icon,
.download-report:hover {
    right: -8px;
}


/* Video Button */ 

.button-play {
    display: inline-block;
    width: 110px;
    height: 110px;
    border-radius: 200em;
    text-align: center;
    line-height: 120px;
    color: var(--ess-red);
    font-size: 3rem;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    /* Centers the element */
    position: absolute;
}

.button-play:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 120px;
    height: 120px;
    background: #fff;
    border-radius: 50%;
}

.button-play:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 140px;
    height: 140px;
    background: #fff;
    border-radius: 50%;
    transition: all 200ms;
    opacity: 0.4;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

.button-play:hover:after {
    background: var(--ess-red);
}

.button-play:hover:before {
    background: var(--ess-red);
}

.button-play:hover {
    color: #fff;
}

.button-play i {
    position: relative;
    z-index: 3;
    font-size: 3.5rem;
}


/*-------------------------------Video-------------------------------*/


.product-media {
    position: relative;
}

#essvideo {
    display: none;
}

#essvideo.featherlight-inner {
    display: block;
}

#essvideo .vimeo-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.vimeo-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.vimeo-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    /* Adjust this value based on your video's aspect ratio */
    overflow: hidden;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-container::before,
.video-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--white);
    z-index: 1;
}

.video-container::before {
    left: 0;
}

.video-container::after {
    right: 0;
}

.video-container::after {
    content: '';
    position: absolute;
    right: 0;
    height: 100%;
    z-index: 1;
}

.video-container::after {
    top: 0;
}

.video-container::before {
    bottom: 0;
}

/* Video Box */

#video-box {
    padding: 4rem;
    position: relative;
    margin-top: 6rem;
}

#video-box::before {
    position: absolute;
    background: var(--light-grey);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    opacity: 1;
    content: " ";
    z-index: -1;
    border-radius: 25px;
    height: 600px;
}

#video-box .vimeo-wrapper {
    max-width: 1360px;
    margin: -100px auto 0 auto;
    border-radius: 25px;
}


/* Video Content */

.video-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Prevent overflow */
    border-radius: 25px;
    box-shadow: 5px 16px 24px rgb(0 0 0 / 16%);
}

/* Style for the video */
.video-container video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Maintain aspect ratio and cover the container */
    transform: translate(-50%, -50%);
    /* Center the video */
}

video {
    width: 100%;
    height: 100%;
    border-radius: 25px;
    box-shadow: 5px 16px 24px rgb(0 0 0 / 16%);
}


/*---------------------------Lists--------------------------*/

.icon-list {
    margin: 3rem 0 2rem 0;
}

.icon-list li {
    display: grid;
    grid-template-columns: 50px auto;
    gap: 8px;
    line-height: 1.5rem;
}

.icon-list.icon-big li {
    grid-template-columns:90px auto;
    align-items: center;
}

.icon-list.icon-big .icon-shadow {
    margin-bottom:0;
}

.list-icon {
    width: 40px;
    font-size: 1.2em;
    /* Adjust as needed for icon size */
    height: 40px;
    background: #f6dfe1;
    color: var(--ess-red);
    border-radius: 200rem;
    text-align: center;
    align-self: start;
    line-height: 40px;
}

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

form {
    position: relative;
}

input,
select,
textarea,
button {
    width: 100%;
    border-radius: 15px;
}

input,
select,
textarea {
    background: var(--light-grey);
    border-radius: 15px;
    border: none;
    padding: 1rem;
}

#main-footer input {
    background: var(--ess-dark-grey);
    color: var(--light-grey);
}

.newsletter-footer button {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 113px;
    padding: 0.7rem;
    border: none;
    border-radius: 12px;
    background: var(--ess-red);
    color: var(--white);
    font-weight: 500;
}

form .hint {
    display: grid;
    grid-template-columns: 34px 1fr;
    padding-top: 0.7rem;
}

form .hint input {
    width: 15px;
    height: 15px;
    border-radius: 5px;
}

button {
    cursor: pointer;
}

.hint {
    color: var(--dark-grey);
    font-size: 1rem;
    line-height: normal;
}


/* Klaviyo Forms */



.kl-private-reset-css-Xuajs1 input {
    width:100%!important;
}

.kl-private-reset-css-Xuajs1 button.kl-private-reset-css-Xuajs1 {
    padding:0!important;
}

/* Klaviyo Demo Forms */

.needsclick {
    min-height:unset!important;
}

/* 02 ############################### Grid System ############################### */

.row {
    max-width: 1560px;
    margin: 0 auto;
    display: grid;
}

.row-condensed {
    max-width: 1270px;
    margin: 0 auto;
    display: grid;
}

.full-width {
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    position: relative;
    right: 50%;
    width: 100vw;
    display:block;
}

.one-c {
    display: grid;
    grid-template-columns: 1fr;
}

.two-c {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

.two-uc {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2.5rem;
}

.three-c {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2.5rem;
}

.three-uc {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 2.5rem;
}

.four-c {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.five-c {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

.six-c {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

.seven-c {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

.eight-c {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

.twelve-c {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2.5rem;
}

.two-one-c {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4.5rem;
}


/*  ----------------- Spacing  ----------------- */

.spacing-200 {
    padding: 2rem 0;
}

.spacing-300 {
    padding: 3rem 0;
}

.spacing-400 {
    padding: 4rem 0;
}

.spacing-500 {
    padding: 5rem 0;
}

.spacing-600 {
    padding: 6rem 0;
}

.spacing-700 {
    padding: 7rem 0;
}

.spacing-900 {
    padding: 9rem 0;
}

.spacing-negative {
    margin-top: -5rem;
}

.no-spacing-bottom {
    padding-bottom: 0;
}

.no-spacing-top {
    padding-top: 0;
}


/*  ----------------- Positioning Content  ----------------- */

.v-center-content {
    align-self: center;
}

.h-center-content {
    max-width: 580px;
    margin: 0 auto;
}

.h-v-center {
    max-width: 580px;
    margin: 0 auto;
    align-self: center;
}


/*  ----------------- Backgrounds ----------------- */

.bg-light-grey {
    position: relative;
    background: var(--light-grey);
}

.bg-image-half {
    position: relative;
}

/* 03 ############################### Typography ############################### */


body,
h1,
h2,
h3,
h4,
h5,
h6,
textarea,
select,
button {
    font-family: 'Roboto', sans-serif;
}

body,
input,
textarea,
select,
button {
    font-size: 1.1rem;
    line-height: 2.1rem;
    color: var(--dark);
}

h1 {
    font-style: normal;
    font-size: 5rem;
    margin-bottom: 2rem;
    line-height: normal;
}


h2 {
    font-size: 2.8rem;
    font-weight: normal;
    line-height: 3.6rem;
}

h3 {
    font-weight: 700;
}

h4 {
    line-height: 1.4;
}

h5 {
    font-weight: 500;
    font-size: 1.2rem;
}

.cta-box h3 {
    font-size: 2.5rem;
    margin-bottom: 0;
}

h1 span,
h2 span,
h3 span {
    font-weight: 700;
    color: var(--gradient);
}



/*  ----------------- Text Styles  ----------------- */

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

.text-big {
    font-size: 1.4rem;
    line-height: 2.2rem;
}

.mini-title {
    font-weight: bold;
    color: var(--ess-red);
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.9rem;
}

#banner p {
    font-size: 2rem;
    line-height: 2.4rem;
    margin-top: 0;
}

.text-deco:before {
    content: "";
    width: 5px;
    background: var(--tur);
    height: 20px;
    display: inline-block;
    margin-right: 12px;
    position: relative;
    top: 3px;
}

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

.header-style-one {
    max-width: 910px;
    margin: 0 auto 5rem auto;
}

.header-style-one p {
    font-size: 1.3rem;
    color: var(--dark-grey);
}

.header-style-one span,
.header-style-two span {
    font-weight: 700;
}

.header-style-three {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5.5rem;
    max-width: 1260px;
    margin: 0 auto;
    align-items: end;
}

.header-style-three h2,
.header-style-three p {
    padding-top: 0;
    margin-top: 0;
}


.header-style-four {
    display: grid;
    grid-template-columns: repeat(12, 1fr);

}

#section-banner .header-style-four h1 {
    font-size: 4.5rem;
}

.header-style-four h1,
.mini-title {
    grid-column: 3 / span 7;
}

.header-style-four p {
    grid-column: 6 / span 5;
    font-size: 1.4rem;
    color: var(--dark-grey);
}

.header-style-four .cta-double {
    grid-column: 6 / span 5;
}


.twelve-c.story p,
.twelve-c.story h2,
.twelve-c.story blockquote {
    grid-column: 4 / span 6;
}

.twelve-c.story {
    row-gap: 0;
}

.image-right {
    text-align: right;
}

.story-img {
    grid-column: 2 / span 10;
    margin: 1.5rem 0;
}

.story h2 {
    font-weight:700;
}

/* Badge*/

#badge {
    display: block;
    width: 250px;
    height: 250px;
    border-radius: 25px;
    text-align: center;
    line-height: normal;
    background: var(--gradient);
    color: var(--white);
    position: absolute;
    left: 200px;
    top: -75px;
    font-size: 1.7rem;
    padding: 1rem;
}

#badge span {
    font-weight: 700;
    font-size: 6.5rem;
    display: block;
    margin-top: 1rem;
}



/* 04 ############################### Navigation ############################### */

/*  ----------------- Header & Navigation  ----------------- */

.main-header-inner {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    justify-content: center;
    top: 15px;
    width: 100%;
    max-width: 1770px;
    z-index: 99;
    box-sizing: border-box;
    height: 95px;
    font-size: 1.2rem;
    border-radius: 25px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    transition: .2s all ease-in;
}

.home .main-header-inner {
    background:var(--white);
}

.sticky .main-header-inner {
    background: var(--white);
    transition: all .2s;
    top: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    box-shadow: 0px 5px 23px 4px rgba(0, 0, 0, 0.1);
}

#main-header .main-header-inner nav {
    text-align: center;
}

#main-header ul {
    margin: 0;
    padding: 0;
}

#main-header .main-header-inner li {
    padding: 0 17px;
    display: inline-block;
}

#main-header .main-header-inner li a {
    display: inline-block;
    text-decoration: none;
    position: relative;
    font-weight: 500;
    color: var(--dark);
    transition: .2s all ease-in;
}

#main-header .main-header-inner nav a {
    height: 95px;
    line-height: 95px;
}

#main-header .main-header-inner nav a:hover,
#main-header aside#header-cta a:hover {
    color: var(--ess-red);
}

#header-cta {
    text-align: right;
}

#main-header #header-cta li {
    padding-left: 0;
}

#main-header aside#header-cta a.button:hover {
    background: var(--ess-red) !important;
    color: var(--white);
}

.nav-title img {
    border: 1px solid var(--grey);
    padding: 10px;
    border-radius: 5px;
    height: 50px;
    width: 50px;
    float: left;
}

/* ----------------------Sub Menu---------------------- */

#main-header .main-header-inner .sub-menu {
    background: var(--white);
    width: 100%;
    position: absolute;
    top: 95px;
    left: 0;
    color: var(--dark);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease-in, transform 200ms ease-in, visibility 200ms ease-in;
    box-shadow: 0px 5px 23px 4px rgba(0, 0, 0, 0.1);
    text-align: left;
    padding: 25px;
    max-width: 1260px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 15px;
}

#main-header .main-header-inner .sub-menu .three-c {
    max-width: 900px;
    margin: 0 auto;
}

#main-header .main-header-inner .sub-menu a {
    color: var(--dark) !important;
    transition: .2s all;
}

#main-header .main-header-inner .sub-menu a::before {
    display: none;
}

#main-header .main-header-inner .sub-menu a:hover {
    color: var(--dark) !important;
    opacity: 1;
}

#main-header .main-header-inner .sub-menu a:hover span {
    color: var(--ess-red) !important;
}

#main-header .main-header-inner .sub-menu h5 {
    font-weight: 600;
    margin-bottom: 0.5rem;
    transition: .2s all;
}

#main-header .main-header-inner nav .sub-menu ul li {
    display: block;
    padding:0;
}

#main-header .main-header-inner nav .sub-menu a {
    font-weight: normal;
    line-height: normal;
    padding: 1rem;
    text-transform: none;
    display: block;
    transition: .2s all ease-in;
    color: var(--dark);
    height: unset;
    font-size: 1.1rem;
    padding: 1rem;
}

#main-header .main-header-inner nav .sub-menu a:hover {
        background: var(--ess-light);
        border-radius: 15px;
}

.sub-menu span {
    font-weight:500;
    margin-bottom: 0.5rem;
    transition: .2s all;
    font-size: 1rem;
    line-height: 1.4rem;
}

#main-header .sub-menu span i {
    margin-bottom: 0.5rem;
    transition: .2s all;
    font-size: 1rem;
    line-height: 1.4rem;
    position:relative;
    bottom:-1px;
}

.sub-menu p {
    font-size: 1rem;
    line-height: 1.4rem;
}

#main-header .main-header-inner nav .sub-menu a:hover {
    color: var(--ess-red);
}

#main-header .main-header-inner nav .menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
}

.menu-item-has-children svg {
    transform: rotate(90deg);
    position: relative;
    top: 2px;
    left: 5px;
}


/* -------------------Responsive Navigation---------------- */

.navbar {
    color: var(--white);
    position: fixed;
    top: 30px;
    right: 10px;
    display: none;
    z-index: 99;
}

.navbar li.navbar-header {
    border-bottom: 1px solid #e1e1e1;
    margin-bottom: 15px;
}


.navbar-toggle {
    border: none;
    background-color: transparent;
    cursor: pointer;
    right: 5px;
    position: relative;
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    margin: 4px 0;
    background-color: var(--dark);
    transition: all 0.3s ease-in-out;
}

.open-menu .navbar-toggle .icon-bar:nth-of-type(2) {
    opacity: 0;
}

.open-menu .navbar-toggle .icon-bar:nth-of-type(1) {
    transform: translateY(6px) rotate(45deg);
}

.open-menu .navbar-toggle .icon-bar:nth-of-type(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.navbar-collapse {
    position: fixed;
    top: 0;
    right: -330px;
    width: 330px;
    height: 100%;
    background-color: var(--white);
    z-index: 9999;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    transition: right 0.5s ease;
    overflow-y: auto
}

.navbar-collapse.open {
    right: 0;
}

.navbar-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

.navbar i {
    position: relative;
    top: 3px;
    margin-right: 0.5rem;
}

#main-header .navbar-nav li {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2rem;
    display: block;
}

#main-header .navbar-nav li a {
    display: block;
    padding: 0.6rem 1rem;
    position: relative;
}

#main-header .navbar-nav li a.button {
    color: var(--white);
}

#main-header .navbar-nav li a.button.button.transparent {
    color: var(--dark);
}

.navbar-nav .navbar-header img {
    max-width: 60px;
    margin: 10px 0 10px 10px;
}

#main-header .navbar-nav li.navbar-header {
    display: grid;
    grid-template-columns: 85px 2fr;
    color: var(--dark);
    margin-bottom: 0;

}

#main-header .navbar-nav li.navbar-header div {
    align-self: center;
    font-weight: 600;
}

.navbar-nav li a {
    display: block;
    padding: 10px;
    color: var(--dark);
    text-decoration: none;
}

.dropdown-menu {
    display: none;
    position: static;
    margin: 0;
    padding: 1rem;
    width: auto;
    border: none;
    box-shadow: none;
    margin-left: -1rem;
}

.dropdown-menu li a {
    display: block;
    padding: 10px 10px 10px 48px !important;
    color: var(--dark);
    text-decoration: none;
    font-weight: normal;
    border: none;
}

.navbar .close {
    position: absolute;
    right: 22px;
    font-size: 19px;
    cursor: pointer;
    top: 29px;
    color: var(--dark);
}

.open-menu {
    overflow: hidden;
}

#main-header .navbar-nav .sub-menu-title {
    text-transform: uppercase;
    color: var(--dark);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 15px 10px 5px 25px;
    position: relative;
}

#main-header .navbar-nav li a {
    border-bottom: 1px solid var(--grey);
    padding: 1rem;
}

.sub-menu-title:before {
    content: "";
    height: 18px;
    width: 3px;
    position: absolute;
    left: 15px;
    top: 15px;
}

#res-nav-contact {
    padding: 1rem;
    margin-top: 0.5rem;
}

#res-nav-contact .button {
    margin-bottom: 0.5rem;
    padding: 1rem !important;
}

#res-nav-contact .button.transparent {
    border: 1px solid var(--grey);
    background: none;
    color: var(--dark);
}

#res-nav-contact ul {
    display: block !important;
}

.caret {
    position: absolute;
    right: 28px;
    top: 23px;
    opacity: 0.6;
    transform: rotate(90deg);
}


#main-header i {
    font-size: 1.6rem;
}

/* ----------------------Logo------------------------- */

#logo {
    height: 95px;
    line-height: 95px;
    text-transform: none;
    font-weight: 600;
    font-size: 1.5rem;
}

#logo a {
    display: block;
    color: var(--dark);
}

#logo a figure {
    border-radius: 15px;
    display: block;
    width: 85px;
    height: 85px;
    text-align: center;
    top: 10px;
    left: 0.5rem;
    position: relative;
    float: left;
    margin-right: 1rem;
}

#logo img {
    max-width: 65px;
    position: relative;
    top: 7px;
    box-shadow: none;
}


#main-header .main-header-inner a.button {
    padding: 10px 20px;
    border: 1px solid var(--ess-red);
    color: var(--ess-red);
}

#main-header .main-header-inner a.button:hover {
    background: var(--ess-red);
    color: var(--white);
}

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

#main-footer {
    background: var(--dark);
    color: var(--text-grey);
}

#main-footer h5 {
    margin-bottom: 0.5rem;
    color: var(--white);
}

#main-footer a {
    color: var(--text-grey);
    transition: .2s all;
}

#main-footer a:hover {
    color: var(--ess-red);
}

#copyright {
    border-top: 1px solid var(--ess-dark-grey);
    font-size: 1rem;
    padding-top: 1rem;
}

#copyright ul {
    text-align: right;
}

#copyright ul li {
    display: inline-block;
    padding-left: 0.5rem;
}

.social-media-footer a {
    font-size: 1.8rem;
    display: inline-block;
    margin-right: 0.5rem;
}

#main-footer img {
    max-width: 120px;
    margin-top: 1.5rem;
}

/* 05 ############################### Widgets ############################### */

/* ----------------- Logo Slider ------------------ */

.logo-slider {
    overflow: hidden;
    padding: 30px 0 0 0;
    white-space: nowrap;
    position: relative;
    text-align: center;
}

.logo-slider .text-small {
    font-size: 0.8rem;
    margin-bottom: 1rem;
    color: var(--grey);
    display: none;
}

.logos-slide {
    display: inline-block;
    animation: 45s slide infinite linear;
}

.logos-slide img {
    max-width: 137px;
    max-height: 75px;
    /* Sized by max-height with the width following along, so the width
       attribute on the markup must not become the used width. */
    width: auto;
    margin: 0 40px;
    filter: grayscale(100%);
    display: inline-block;
    vertical-align: middle;
    opacity: 0.6;
}

.logos-slide::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}


@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.logo-slider:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}

.logo-slider:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}

.logo-slider:before,
.logo-slider:after {
    position: absolute;
    top: 0;
    content: '';
    width: 250px;
    height: 100%;
    z-index: 2;
}

/* Product Slider */

#product-slider {
    background: var(--ess-light);
    border-radius: 25px;
    padding: 5rem;
}

.product-slider {
    overflow: hidden;
    padding: 30px 0 40px 0;
    white-space: nowrap;
    position: relative;
    text-align: center;
}

.product-slide {
    display: inline-block;
    animation: 45s slide infinite linear;
}

.product-slide img {
    max-height: 295px;
    /* Sized by max-height with the width following along, so the width
       attribute on the markup must not become the used width. */
    width: auto;
    display: inline-block;
    vertical-align: middle;
    opacity: 1;
    border-radius: 25px;
    box-shadow: 5px 16px 24px rgb(0 0 0 / 16%);
}

.product-slide::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}


@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.product-slider:before {
    left: 0;
    background: linear-gradient(to left, rgba(247, 247, 255, 0), rgb(247, 247, 255));
}

.product-slider:after {
    right: 0;
    background: linear-gradient(to right, rgba(247, 247, 255, 0), rgb(247, 247, 255));
}

.product-slider:before,
.product-slider:after {
    position: absolute;
    top: 0;
    content: '';
    width: 250px;
    height: 100%;
    z-index: 2;
}

/* ----------------- Product Box ------------------ */

.product-box {
    background: var(--white);
    padding: 1rem;
    border-radius: 25px;
    transition: .2s all ease-in-out;
    z-index: 2;
    box-shadow: 0 .5vw 4vw -.7vw rgba(0, 0, 0, .2);
}


.product-box img {
    border-radius: 10px;
}

.product-box:hover {
    background: var(--white);
    box-shadow: 0 .5vw 2vw -.2vw rgba(0, 0, 0, .25);
}

.product-box:hover h3 {
    color: var(--ess-red);
}

.product-box a {
    color: var(--dark);
}

.product-box h3 {
    font-size: 1.4rem;
    margin-bottom: 0;
    transition: .2s all;
}

.product-content {
    padding: 0 1rem;
}

/* 06 ############################################## Pages ################################################# */

/* --------------- Product Landing Page ---------------- */

#product-banner h1 {
    font-size: 3.2rem;
}

.product-intro {
    grid-column: 1 / span 4;
}

.product-media {
    grid-column: 5/ span 8;
    position: relative;
    padding-left: 2rem;
}

.product-media img {
    box-shadow:none;
}

.testimonial.testimonial-box {
    background: var(--white);
    position: absolute;
    left: -25px;
    bottom: -100px;
    z-index: 1;
    width: 345px;
    padding: 1.5rem 0 1.5rem 1.5rem;
    box-shadow: 5px 16px 24px rgb(0 0 0 / 16%);
}

.testimonial.testimonial-box cite img {
    width: 55px;
    height: 55px;
}


/* ---------------------------------- Demos -------------------------------------- */

#demos input {
    background: var(--white);
    border: 1px solid var(--grey);
    margin-bottom: 0.5rem;
    border-radius: 15px;
}

#demos button {
    border: none;
    border-radius: 15px;
}

.product-download {
    display:grid;
    grid-template-columns: 380px 1fr;
    gap: 2.5rem;
    background: var(--white);
    padding: 1rem;
    border-radius: 25px;
    transition: .2s all ease-in-out;
    box-shadow: 0 .5vw 4vw -.7vw rgba(0, 0, 0, .2);
}

.product-download img {
    border-radius:10px;
}

.product-download .button {
    margin-right:0.5rem;
}


/* 07 ############################### Sections on Sites ############################### */



/*  ----------------- Home ------------------ */

/* Banner */

#main-banner {
background: linear-gradient(40deg, rgba(255,255,255,1) 0%, rgba(236,236,236,1) 100%);
    place-items: center;
    display: grid;
    position: relative;
    padding: 12rem 0;
    height: 950px;
}


#main-banner-content {
    grid-column: 1 / span 5;
    position: relative;
    z-index: 3;
}

#main-banner .cta-double {
    margin-top: 4rem;
}

#main-banner h1 {
    font-size: 4.6rem;
    font-weight: 700;
    margin-top: 0;
}

#main-banner-content .text-big {
    color: var(--dark-grey);
}

.image-container {
    position: absolute;
    right: 0px;
    z-index: 1;
    top: 0;
}

.image-container img {
    max-height: 840px;
    /* Sized by max-height with the width following along, so the width
       attribute on the markup must not become the used width. */
    width: auto;
}

body.home {
    background-image:none;
}

.total-users {
    max-width:400px;
    display:grid;
    grid-template-columns:170px 1fr;
    margin:2rem 0 0 0;
    padding:2rem 0 0 0;
    position:relative;
}

.total-users::before {
    display:block;
    content:" ";
    width:100px;
    height:3px;
    background:var(--grey);
    position:absolute;
    top:0;
    left:0;
}

.total-users p {
    font-size:0.9rem;
    line-height:normal;
}

.total-users span {
    font-weight:bold;
}


/* ---------------------Feedback & Testimonials---------------- */

.home #feedback {
    background:url(images/world-map.png) no-repeat top center;
}

#feedback {
    position: relative;
}

.three-c.spacing-400 .testimonial:nth-child(2n) {
    box-shadow: 0 .5vw 4vw -.7vw rgba(0, 0, 0, .2);
}

.testimonial {
    background: var(--white);
    padding: 3rem;
    border-radius: 25px;
}

.testimonial h5 {
    margin: 0;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

blockquote {
    margin: 0;
    padding: 0;
}

.testimonial q {
    font-size: 1.1rem;
    display: block;
    margin-bottom: 1rem;
}

cite {
    text-transform: none;
    font-weight: bold;
    line-height: normal;
}

cite span {
    display: block;
    font-weight: normal;
    color: var(--dark-grey);
}

.testimonial cite img {
    border-radius: 200rem;
    max-width: 65px;
    float: left;
    margin-right: 1rem;
}

.testimonial-big q {
    font-size: 1.8rem;
}

.star-rating {
    max-width: 100px;
}

.quote-box {
    width: 570px;
    background: var(--white);
    position: absolute;
    padding: 3rem;
    border-radius: 25px;
    box-shadow: 0 .5vw 4vw -.7vw rgba(0, 0, 0, .2);
    bottom: -30px;
    z-index:1;
}


.quote-box q {
    font-size: 1.8rem;
    line-height: 2.4rem;
    position: relative;
}

.quote-box q::before {
    content: "\201C";
    font-family: Arial, sans-serif;
    font-size: 2em;
    line-height: 0.1em;
    vertical-align: -0.4em;
    display: block;
    color: var(--ess-red);
    font-size: 5em;
    font-weight: 900;
    margin: 2.5rem 0 2rem 0;
}

.quote-box cite {
    display: grid;
    margin-top: 1rem;
    grid-template-columns: 115px 250px;
    align-items: center;
}

.quote-box cite span {
    margin-top: 0.3rem;
}

.quote-box img {
    border-radius: 200rem;
    max-width: 100px;
    float: left;
    margin: 1rem 0 0 0;
}

cite {
    font-style: normal;
}

q:before,
q:after {
    content: ''
}


#main-banner .testimonial {
    position: absolute;
    bottom: -20px;
    right:5%;
    z-index: 5;
    box-shadow: 0 .5vw 4vw -.7vw rgba(0, 0, 0, .2);
    max-width: 580px;
    padding: 1.5rem 2rem;
}

/* ------------------------- FAQ ------------------------ */

#faq {
    background: var(--ess-light);
}

#faq .accordion {
    max-width: 960px;
}

.accordion {
    margin: auto;
    width: 100%;
}

.accordion-item {
    cursor: pointer;
    border-radius: 15px;
    margin-bottom: 1rem;
    border-radius: 15px;
}

.accordion-header {
    background: var(--white);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    cursor: pointer;
    padding: 15px;
    margin: 0;
    transition: all 0.3s;
    position: relative;
}

h3.accordion-header {
    font-weight: 500;
    font-size: 1.1rem;
}

.accordion-header::after {
    content: '+';
    font-size: 1.2rem;
    position: absolute;
    right: 15px;
    font-weight: normal;
}

.accordion-header.active::after {
    content: '-';
}

.accordion-header:hover {
    box-shadow: 5px 16px 24px rgb(0 0 0 / 16%);
    color: var(--ess-red);
}

.accordion-content {
    display: none;
    padding: 15px;
    background: var(--white);
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    margin-top: -15px;
    padding-top: 15px;
}

.active .accordion-content {
    display:block;
}

/* -----------------------Numbers--------------------- */

.number {
    display: block;
    line-height: normal;
    font-weight: 700;
    font-size: 4rem;
    margin-bottom: 2rem;
}

#stats .two-c,
#image-grid .two-c {
    column-gap: 1rem;
    row-gap: 1rem;
}

#stats div,
#image-grid div {
    border-radius: 25px;
    overflow: hidden;
}

#stats img,
#image-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#image-grid .right-column div:nth-child(1) {
    background: var(--gradient)
}

#image-grid .right-column div:nth-child(4) {
    background: var(--dark);
}

#banner-grid #image-grid .left-column {
    background: var(--ess-red);
    color: var(--white);
}

/* -------------------CTA Bottom-----------------*/

#cta-bottom {
    background: var(--ess-light);
}

#cta-bottom .header-style-one {
    margin-bottom: 0;
}

#cta-bottom .row-condensed {
    background: var(--white);
    border-radius: 25px;
    margin-bottom: -50px;
    position: relative;
    z-index: 1;
    box-shadow: 0px 5px 23px 4px rgba(0, 0, 0, 0.1);
}



/*---------------------Section Banner--------------------*/

#section-banner {
    padding-top: 90px;
}

#section-banner h1 {
    font-size: 4.2rem;
    margin: 0;
}

.section-image {
    position:relative;
    max-width:1770px;
    margin:0 auto;
}

/* ---------------------------Tabs----------------------- */

.tab-container {}

.tabs {
    display: flex;
    background-color: #fff;
    border-radius: 35px;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    justify-content: space-evenly;
    padding: 5px;
    margin-top: -30px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.tab {
    padding: 10px 25px;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 25px;
    width: 100%;
    text-transform: uppercase;
    font-weight: 500;
}

.tab:hover {
    background-color: var(--tur);
    color: var(--white);
}

.tab.active {
    background-color: var(--tur);
    color: var(--white);
}

.content {
    display: none;
}

.content.active {
    display: block;
}



/* -----------------------------------------External Plugins----------------------------------------- */
/* -------------------------------------------------------------------------------------------- */


/**
 * Featherlight – ultra slim jQuery lightbox
 * Version 1.7.13 - http://noelboss.github.io/featherlight/
 *
 * Copyright 2018, Noël Raoul Bossart (http://www.noelboss.com)
 * MIT Licensed.
**/

.featherlight-inner .two-c {
    max-width: 1210px;
    margin: 150px auto 0 auto;
}

[class*='lightbox-content-'] {
    display: none;
}

html.with-featherlight {
    /* disable global scrolling when featherlights are visible */
    overflow: hidden;
}

.featherlight {
    display: none;
    /* dimensions: spanning the background from edge to edge */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483647;
    /* z-index needs to be >= elements on the site. */
    /* position: centering content */
    text-align: center;
    /* insures that the ::before pseudo element doesn't force wrap with fixed width content; */
    white-space: nowrap;
    /* styling */
    cursor: pointer;
    /* IE8 "hack" for nested featherlights */
}

/* support for nested featherlights. Does not work in IE8 (use JS to fix) */

.featherlight:before {
    /* position: trick to center content vertically */
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.featherlight .featherlight-content {
    /* make content container for positioned elements (close button) */
    position: relative;
    /* position: centering vertical and horizontal */
    vertical-align: middle;
    display: inline-block;
    justify-content: center;
    /* dimensions: cut off images */
    overflow: auto;
    /* dimensions: handling large content */
    margin: 0;
    height: 100%;
    width: 100%;
    /* styling */
    cursor: auto;
    /* reset white-space wrapping */
    white-space: normal;
    background: url(images/fine-line.png) no-repeat left top;
    background-color: #fff;
}

/* contains the content */
.featherlight .featherlight-inner {
    /* make sure its visible */
    vertical-align: middle;
    margin-top: 4rem;
}

#essvideo.featherlight-inner {
    margin-top:0;
}

.featherlight-image {
    border-radius: 25px;
    box-shadow: 5px 16px 24px rgb(0 0 0 / 16%);
}

/* don't show these though */
.featherlight script.featherlight-inner,
.featherlight link.featherlight-inner,
.featherlight style.featherlight-inner {
    display: none;
}

.featherlight .featherlight-close-icon {
    /* position: centering vertical and horizontal */
    position: fixed;
    z-index: 9999;
    top: 25px;
    right: 25px;
    line-height: 25px;
    width: 50px;
    height: 50px;
    font-size: 25px;
    border-radius: 200em;
    cursor: pointer;
    text-align: center;
    font-family: Arial, sans-serif;
    background: var(--ess-red);
    color: var(--white);
    border: none;
    padding: 0;
}

.featherlight .featherlight-close-icon::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.featherlight-iframe .featherlight-content {
    border-bottom: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

.featherlight iframe {
    /* styling */
    border: none;
}

.featherlight * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* 08 ############################### Landing Pages ############################### */

/* Reduzierter Header: Logo und eine Sprungnavigation innerhalb der Seite,
   keine Links auf andere Seiten. Die Navigation erbt Schrift, Höhe und
   Hover-Farbe von #main-header, hier wird nur das Raster angepasst. */

.header-landing .main-header-inner {
    grid-template-columns: auto 1fr auto;
}

/* Muss die Zentrierung aus "#main-header .main-header-inner nav" schlagen. */

#main-header.header-landing .main-header-inner nav {
    text-align: right;
}

#main-header.header-landing .main-header-inner li:last-child {
    padding-right: 0;
}

/* Feste Leiste am unteren Rand, nur auf schmalen Bildschirmen. */

.lp-sticky-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    padding: 0.8rem 1.5rem calc(0.8rem + env(safe-area-inset-bottom, 0px)) 1.5rem;
    background: var(--white);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
    text-align: center;
}

.lp-sticky-cta .button {
    display: block;
    width: 100%;
    color: var(--white);
}

.lp-cta {
    padding-left: 1.6rem;
    padding-right: 1.5rem;
    white-space: nowrap;
}

/* "#main-header .main-header-inner a.button" färbt Buttons im Header rot,
   weil dort sonst nur der transparente Button steht. Der gefüllte CTA
   braucht weiße Schrift, sonst steht Rot auf Rot. */

#main-header.header-landing .main-header-inner .lp-cta a.button,
#main-header.header-landing .main-header-inner .lp-cta a.button:hover {
    color: var(--white);
}

/* Formular in der Lightbox. Gleiches Muster wie #essvideo: im Fluss der
   Seite versteckt, sichtbar erst als Inhalt der Lightbox. */

/* Der fixierte Header endet bei 110px, das scroll-padding-top von html
   liegt bei 88px. Ohne diesen Zuschlag verschwindet die Überschrift eines
   angesprungenen Abschnitts hinter dem Header. */

body.landing section[id] {
    scroll-margin-top: 2rem;
}

#demoform {
    display: none;
}

/* Die Lightbox der Seite ist für Videos gedacht und deshalb bildschirmfüllend.
   Für das Formular reicht eine Karte in der Mitte. */

/* Über-uns-Abschnitt: zentrierte Überschrift, Bild darunter, dann die
   Firmengeschichte in zwei Spalten. */

.ueberuns-bild picture {
    display: block;
    border-radius: 25px;
    overflow: hidden;
}

.ueberuns-bild img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: none;
}

.ueberuns-text h3 {
    margin-top: 0;
}

.ueberuns-text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .ueberuns-text {
        gap: 0;
    }
}

/* Auf Landing Pages ohne Hintergrundfarbe - die weiße Box mit Schatten
   steht dann frei auf der Seite. Die normale Website behält ihr helles Grau. */

body.landing #cta-bottom {
    background: none;
}

/* Reduzierter Footer: Logo und die Pflichtlinks.
   #cta-bottom .row-condensed zieht sich mit margin-bottom: -50px über den
   Footer; der große Footer fängt das mit seinem Innenabstand ab, dieser
   braucht ihn explizit, sonst liegt die weiße Box auf den Links. */

.footer-landing #copyright {
    align-items: center;
    padding: 5.5rem 0 2rem 0;
    border-top: none;
}

.footer-landing-brand {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.footer-landing-brand img {
    width: 46px;
    height: 46px;
    box-shadow: none;
}

/* Formular-Overlay. #demoform bleibt an seiner Stelle im Dokument - würde
   es verschoben oder entfernt, baut Klaviyo sein Formular ab -, hier wird es
   nur als zentrierte Karte über der Seite eingeblendet. */

.lp-modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(16, 24, 43, 0.6);
    z-index: 2147483646;
}

#demoform.lp-modal-open {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: 520px;
    max-height: 88vh;
    overflow: auto;
    padding: 2.5rem;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    z-index: 2147483647;
}

.lp-modal-active {
    overflow: hidden;
}

.lp-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    padding: 0;
    line-height: 36px;
    font-size: 22px;
    border: none;
    border-radius: 200em;
    background: var(--ess-red);
    color: var(--white);
    cursor: pointer;
}

#demoform:not(.lp-modal-open) .lp-modal-close {
    display: none;
}

/* Anmeldeformular an der Stelle der beiden CTA-Buttons, also direkt neben
   dem Video im Banner. */

.lp-form {
    display: block;
    max-width: 420px;
}

.lp-form h2 {
    font-size: 1.5rem;
    line-height: 1.3;
    margin: 0 0 0.5rem 0;
}

.lp-form > p {
    margin: 0 0 1.2rem 0;
}

.lp-form .hint {
    display: block;
    font-size: 0.9rem;
    color: var(--dark-grey);
    padding-top: 0.9rem;
}

.lp-form .hint a {
    color: var(--dark-grey);
    text-decoration: underline;
}

/* Unter 992px passt die Sprungnavigation nicht mehr in eine Zeile - gemessen
   bricht sie ab 950px um. Statt sie zu quetschen oder ein Menü aufzuklappen
   bleibt auf schmalen Bildschirmen nur das Logo stehen, mittig. Die Seite ist
   kurz und das Formular steht direkt darunter im Banner. */

@media (max-width: 991px) {
    .lp-form {
        max-width: none;
    }

    .lp-nav,
    .lp-cta {
        display: none;
    }

    .lp-sticky-cta {
        display: block;
    }

    /* Die Leiste liegt fest über der Seite. Der Footer braucht darunter
       genug Platz, sonst verdeckt sie Impressum, Datenschutz und AGB.
       Der Selektor muss "#main-footer { padding: 0 1.5rem }" aus den
       Responsive-Regeln schlagen, daher die id mit im Selektor. */

    body.landing #main-footer.footer-landing {
        padding-bottom: 8rem;
    }

    .header-landing .main-header-inner {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .header-landing #logo a figure {
        float: none;
        display: inline-block;
        vertical-align: middle;
        top: 0;
        left: 0;
        margin-right: 0.9rem;
    }
}

@media (max-width: 575px) {
    .header-landing #logo {
        font-size: 1.25rem;
    }

    .header-landing #logo a figure {
        width: 62px;
        height: 62px;
    }

    .footer-landing #copyright {
        gap: 1rem;
    }
}


/* -----------------------------------------Responsive----------------------------------------- */
/* -------------------------------------------------------------------------------------------- */


.hide-desktop {
    display: none;
}

@media (max-width:575px) {

    body, input, textarea, select, button {
        line-height: 1.7rem;
    }


    /* Defaults & Layout */

    #main-nav,
    #header-cta,
    .vertical-line,
    .hide-mobile,
    #section-style-boxed .row img,
    .featherlight-inner::after,
    .image-dot-left:before,
    .image-dot-right:before,
    #badge, body::before, #main-banner .testimonial, .home .image-container {
        display: none;
    }

    .hide-desktop, 
    .one-c,
    .two-c,
    .two-uc,
    .three-c,
    .three-uc,
    .four-c,
    .five-c,
    .six-c,
    .seven-c,
    .eight-c,
    .twelve-c,
    .navbar,
    .two-one-c,
    .header-style-four {
        display: block;
    }

    main,
    #main-banner-content,
    #cta-bottom .row-condensed, #faq, .full-width {
        padding: 0 1.5rem;
    }

    #section-style-boxed .row {
        margin: -75px auto 0 auto;
    }

    .image-dot-right.two-images-box .image-two {
        position: absolute;
        left: 20px;
        top: 150px;
        z-index: 1;
        max-width: 140px;
    }

    .open-menu .main-header-inner {
        z-index: 97;
    }

    body.open-menu::after {
        background:rgba(0,0,0,0.8);
        content: " ";
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 98;
    }

    .open-menu .navbar-collapse.open {
        z-index: 101;
    }


    /* Spacing */

    .spacing-900,
    .spacing-700,
    .spacing-600,
    .spacing-500 {
        padding: 3rem 0;
    }

    .spacing-400 {
        padding: 2rem 0;
    }

    #feedback .header-style-one {
        padding: 2rem 0 0 0;
    }


    .header-style-one {
        margin-bottom: 1rem;
    }

    #main-footer,
    #section-banner {
        padding: 0 1.5rem;
    }

    .main-header-inner {
        top:0;
    }

    #essvideo.featherlight-inner {
        margin-top: 95px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        border-radius: 25px;
        max-width: 400px;
        margin: 95px auto;
    }


    /* Header */

    .main-header-inner {
        height: 85px;
        grid-template-columns: 2.5fr 1fr;
        border-radius:0;
    }

    .sticky .main-header-inner {
        border-radius: 0;
    }

    #logo a figure {
        top: 10px;
        left: 0.5rem;
        width: 65px;
    }

    #logo {
        font-size: 1.2rem;
    }

    #logo img {
        position: absolute;
        max-width: 50px;
        left: 15px;
        margin-right: 0.5rem;
    }

    .navbar-nav li.navbar-header img {
        max-width: 60px;
        margin: 10px 0 10px 10px;
    }


    /* Header Styles */

    .header-style-three, .header-style-one, .header-style-four {
        display: block;
        text-align:center;
    }

    .header-style-four {
        padding-top:7rem;
    }

    .product-intro, #section-banner .header-style-one {
        padding-top:5rem;
    }

    
    .header-style-one p, .header-style-four p {
        font-size: 1.1rem;
        line-height: 1.6rem;
    }

    .story.spacing-400 {
        padding:0;
    }

/* Buttons */

#section-banner .button {
    margin:0;
}

    /* Typography */

    h1, #section-banner .header-style-four h1, #product-banner h1, #section-banner h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 2em;
        line-height: 2.3rem;
    }

    h4 {
        font-size: 1.3rem;
        margin-bottom: 0;
    }

    .text-big {
        font-size: 1.2rem;
        line-height: 2rem;
    }

    /* Images */

    .image-style-one picture:nth-child(2) {
        margin:0;
    }

    .image-style-one {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        margin-bottom:4rem;
    }

    .image-dot-left.two-images-box picture:nth-child(2) {
        right: 43px;
        top: 150px;
        z-index: 1;
        max-width: 120px;
    }

    .image-dot-right.two-images-box picture:nth-child(2) {
        left: 43px;
        top: 150px;
        z-index: 1;
        max-width: 120px;
    }

    .two-images-box {
        margin-bottom: 4rem;
    }

figure.spacing-700, picture.spacing-700 {
    padding:0;
}

img.full-width {
    padding:0;
}

    /*--------------Sections------------*/

    /* Home Banner */

    #main-banner {
            padding: 120px 0 50px 0;
            height: 780px;
            text-align: center;
    }

    #main-banner h1 {
        font-size: 3rem;
        margin-top: 0;
    }

    #main-banner .cta-double {
        margin-top: 2rem;
    }

    /* Product Box */

    .product-box {
        box-shadow: 0 .5vw 4vw -.7vw rgba(0, 0, 0, .2);
        margin-bottom: 1rem;
    }

    /* CTA Box */

    .cta-box {
        height: unset;
    }

    .cta-content {
        margin: -35px 1rem 2.5rem 1rem;
    }

    .cta-image {
        position: relative;
        left: 0;
        top: -25px;
        max-width: 310px;
        margin: 0 auto;
    }

    .cta-box h3 {
        font-size: 2.2rem;
    }

    #cta-bottom .row-condensed {
        padding:2rem;
    }

    /* Login Box */

    .login-page #section-banner.section-banner-v2 h1 {
        font-size: 2.2rem;
    }

    #login-box a {
        border-right: none;
        border-bottom: 1px solid var(--grey);
        display: grid;
        grid-template-columns: 100px 2fr;
        text-align: left;
        gap: 1.5rem;
        line-height: normal;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    #login-box h3 {
        font-size: 1.2rem;
        font-weight: 500;
        margin: 0;
        padding: 0;
        margin-bottom: 0.5rem;
    }

    #section-style-boxed #login-box img {
        max-width: 110px;
        display: block;
    }

    #section-style-boxed #login-box p {
        display: none;
    }



    /* Quote Box */

    .quote-box {
        position: relative;
        bottom: 0;
        width: 100%;
        display: none;
    }

    /* Testimonial */

    .testimonial {
        padding: 1.5rem;
    }

    .three-c.spacing-400 .testimonial:nth-child(2n) {
        box-shadow: none;
        background: var(--ess-light);
        margin:1rem 0;
    }


    /* Contact Us & Forms */

    #contact-us {
        display: block;
    }

    #contact-us div {
        margin-bottom: 0.5rem;
    }

    /* Product Landing Page*/

    .product-intro {
        text-align:center;
    }

    .cta-double .hint {
     display:none;
    }

    #stats div, #image-grid div {
        overflow:unset;
    }

    #stats img, #image-grid img {
        border-radius:25px;
    }

    #image-grid .right-column div:nth-child(1), #image-grid .right-column div:nth-child(4) {
        background:none;
    }

    .video-container {
        margin-bottom:4rem;
    }

    .two-c.spacing-600 {
        padding:1rem 0;
    }

    .icon-list li {
        padding:1rem;
    }


    .product-media {
        padding-left: 0;
    }

    #video-box {
        padding: 1rem;
        margin-top: 3rem;
    }

    #video-box .vimeo-wrapper {
        margin: 0 auto 0 auto;
        border-radius: 25px;
    }

    #video-box::before {
        height: unset;
    }


    #product-slider {
        padding:1rem;
    }

    .product-slider:before, .product-slider:after {
        width: 45px;
    }


    /* Footer */

    #copyright ul {
        text-align: left;
    }

    #copyright ul li {
        padding-left: 0;
        padding-right: 0.5rem;
    }



}

/* Small Devices (Phones to Tablets) */
@media (min-width: 576px) and (max-width: 767px) {

    body, input, textarea, select, button {
        line-height: 1.7rem;
    }


    /* Defaults & Layout */

    #main-nav,
    #header-cta,
    .vertical-line,
    .hide-mobile,
    #section-style-boxed .row img,
    .featherlight-inner::after,
    .image-dot-left:before,
    .image-dot-right:before,
    #badge, body::before, #main-banner .testimonial, .home .image-container, #image-grid .left-column {
        display: none;
    }

    .hide-desktop, 
    .one-c,
    .two-c,
    .two-uc,
    .three-c,
    .three-uc,
    .four-c,
    .five-c,
    .six-c,
    .seven-c,
    .eight-c,
    .twelve-c,
    .navbar,
    .two-one-c,
    .header-style-four {
        display: block;
    }

    main,
    #main-banner-content,
    #cta-bottom .row-condensed, #faq, .full-width {
        padding: 0 1.5rem;
    }

    #section-style-boxed .row {
        margin: -75px auto 0 auto;
    }

    .image-dot-right.two-images-box .image-two {
        position: absolute;
        left: 20px;
        top: 150px;
        z-index: 1;
        max-width: 140px;
    }

    .open-menu .main-header-inner {
        z-index: 97;
    }

    body.open-menu::after {
        background:rgba(0,0,0,0.8);
        content: " ";
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 98;
    }

    .open-menu .navbar-collapse.open {
        z-index: 101;
    }


    /* Spacing */

    .spacing-900,
    .spacing-700,
    .spacing-600,
    .spacing-500 {
        padding: 3rem 0;
    }

    .spacing-400 {
        padding: 2rem 0;
    }

    #feedback .header-style-one {
        padding: 2rem 0 0 0;
    }


    .header-style-one {
        margin-bottom: 1rem;
    }

    #main-footer,
    #section-banner {
        padding: 0 1.5rem;
    }

    .main-header-inner {
        top:0;
    }

    #essvideo.featherlight-inner {
        margin-top: 95px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        border-radius: 25px;
        max-width: 540px;
        margin: 95px auto;
    }


    /* Header */

    .main-header-inner {
        height: 85px;
        grid-template-columns: 2.5fr 1fr;
        border-radius:0;
    }

    .sticky .main-header-inner {
        border-radius: 0;
    }

    #logo a figure {
        top: 10px;
        left: 0.5rem;
        width: 65px;
    }

    #logo {
        font-size: 1.2rem;
    }

    #logo img {
        position: absolute;
        max-width: 50px;
        left: 15px;
        margin-right: 0.5rem;
    }

    .navbar-nav li.navbar-header img {
        max-width: 60px;
        margin: 10px 0 10px 10px;
    }


    /* Header Styles */

    .header-style-three, .header-style-one, .header-style-four {
        display: block;
        text-align:center;
    }

    .header-style-four {
        padding-top:7rem;
    }

    .product-intro, #section-banner .header-style-one {
        padding-top:5rem;
    }

    
    .header-style-one p, .header-style-four p {
        font-size: 1.1rem;
        line-height: 1.6rem;
    }

    .story.spacing-400 {
        padding:0;
    }

/* Buttons */

#section-banner .button {
    margin:0;
}

    /* Typography */

    h1, #section-banner .header-style-four h1, #product-banner h1, #section-banner h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 2em;
        line-height: 2.3rem;
    }

    h4 {
        font-size: 1.3rem;
        margin-bottom: 0;
    }

    .text-big {
        font-size: 1.2rem;
        line-height: 2rem;
    }

    /* Images */

    .image-style-one picture:nth-child(2) {
        margin:0;
    }

    .image-style-one {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        margin-bottom:4rem;
    }

    .image-dot-left.two-images-box picture:nth-child(2) {
        right: 43px;
        top: 150px;
        z-index: 1;
        max-width: 180px;
    }

    .image-dot-right.two-images-box picture:nth-child(2) {
        left: 43px;
        top: 150px;
        z-index: 1;
        max-width: 180px;
    }

    .two-images-box {
        margin-bottom: 4rem;
    }

figure.spacing-700, picture.spacing-700 {
    padding:0;
}

img.full-width {
    padding:0;
}

    /*--------------Sections------------*/

    /* Home Banner */

    #main-banner {
            padding: 120px 0 50px 0;
            height: 650px;
            text-align: center;
    }

    #main-banner h1 {
        font-size: 3rem;
        margin-top: 0;
    }

    #main-banner .cta-double {
        margin-top: 2rem;
    }

    .total-users { 
        margin:2rem auto 0 auto;
    }

    .logos-slide img {
        max-width: 60px;
    }

    /* Products */

    #products .four-c {
        display: grid;
        grid-template-columns: 50% 50%;
        column-gap: 10px;
        row-gap: 0px;
    }

    .product-box {
        box-shadow: 0 .5vw 4vw -.7vw rgba(0, 0, 0, .2);
        margin-bottom: 1rem;
    }

/* Image Grid */

#image-grid .right-column.two-c {
    display:grid;
    grid-template-columns: 50% 50%;
    column-gap: 10px;
    row-gap: 10px;
}

    /* CTA Box */

    .cta-box {
        height: unset;
    }

    .cta-content {
        margin: -35px 1rem 2.5rem 1rem;
    }

    .cta-image {
        position: relative;
        left: 0;
        top: -25px;
        max-width: 310px;
        margin: 0 auto;
    }

    .cta-box h3 {
        font-size: 2.2rem;
    }

    #cta-bottom .row-condensed {
        padding:2rem;
    }

    /* Login Box */

    .login-page #section-banner.section-banner-v2 h1 {
        font-size: 2.2rem;
    }

    #login-box a {
        border-right: none;
        border-bottom: 1px solid var(--grey);
        display: grid;
        grid-template-columns: 100px 2fr;
        text-align: left;
        gap: 1.5rem;
        line-height: normal;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    #login-box h3 {
        font-size: 1.2rem;
        font-weight: 500;
        margin: 0;
        padding: 0;
        margin-bottom: 0.5rem;
    }

    #section-style-boxed #login-box img {
        max-width: 110px;
        display: block;
    }

    #section-style-boxed #login-box p {
        display: none;
    }



    /* Quote Box */

    .quote-box {
        position: relative;
        bottom: 0;
        width: 100%;
        display: none;
    }

    /* Testimonial */

    .testimonial {
        padding: 1.5rem;
    }

    .three-c.spacing-400 .testimonial:nth-child(2n) {
        box-shadow: none;
        background: var(--ess-light);
        margin:1rem 0;
    }


    /* Contact Us & Forms */

    #contact-us {
        display: block;
    }

    #contact-us div {
        margin-bottom: 0.5rem;
    }

    /* Product Landing Page*/

    .product-intro {
        text-align:center;
    }

    .cta-double .hint {
     display:none;
    }

    #stats div, #image-grid div {
        overflow:unset;
    }

    #stats img, #image-grid img {
        border-radius:25px;
    }

    #image-grid .right-column div:nth-child(1), #image-grid .right-column div:nth-child(4) {
        background:none;
    }

    .video-container {
        margin-bottom:4rem;
    }

    .two-c.spacing-600 {
        padding:1rem 0;
    }

    .icon-list li {
        padding:1rem;
    }


    .product-media {
        padding-left: 0;
    }

    #video-box {
        padding: 1rem;
        margin-top: 3rem;
    }

    #video-box .vimeo-wrapper {
        margin: 0 auto 0 auto;
        border-radius: 25px;
    }

    #video-box::before {
        height: unset;
    }


    #product-slider {
        padding:1rem;
    }

    .product-slider:before, .product-slider:after {
        width: 45px;
    }


    /* Footer */

    #copyright ul {
        text-align: left;
    }

    #copyright ul li {
        padding-left: 0;
        padding-right: 0.5rem;
    }



}



@media (min-width:768px) and (max-width:991px) {

    body, input, textarea, select, button {
        line-height: 1.8rem;
    }


    /* Defaults & Layout */

    #main-nav,
    #header-cta,
    .hide-mobile,
    #section-style-boxed .row img,
    .featherlight-inner::after,
    .image-dot-left:before,
    .image-dot-right:before,
    #badge, body::before, #main-banner .testimonial, .home .image-container, #image-grid .left-column {
        display: none;
    }

    .hide-desktop, 
    .one-c,
    .two-c,
    .two-uc,
    .four-c,
    .five-c,
    .six-c,
    .seven-c,
    .eight-c,
    .twelve-c,
    .navbar,
    .two-one-c,
    .header-style-four {
        display: block;
    }

    main,
    #main-banner-content,
    #cta-bottom .row-condensed, #faq, .full-width {
        padding: 0 1.5rem;
    }

    #section-style-boxed .row {
        margin: -75px auto 0 auto;
    }

    .image-dot-right.two-images-box .image-two {
        position: absolute;
        left: 20px;
        top: 150px;
        z-index: 1;
        max-width: 140px;
    }

    .open-menu .main-header-inner {
        z-index: 97;
    }

    body.open-menu::after {
        background:rgba(0,0,0,0.8);
        content: " ";
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 98;
    }

    .open-menu .navbar-collapse.open {
        z-index: 101;
    }


    /* Spacing */

    .spacing-900,
    .spacing-700,
    .spacing-600,
    .spacing-500 {
        padding: 3rem 0;
    }

    .spacing-400 {
        padding: 2rem 0;
    }

    #feedback .header-style-one {
        padding: 2rem 0 0 0;
    }


    .header-style-one {
        margin-bottom: 1rem;
    }

    #main-footer,
    #section-banner {
        padding: 0 1.5rem;
    }

    .main-header-inner {
        top:0;
    }

    /* Header */

    .main-header-inner {
        height: 85px;
        grid-template-columns: 2.5fr 1fr;
        border-radius:0;
    }

    .sticky .main-header-inner {
        border-radius: 0;
    }

    #logo a figure {
        top: 10px;
        left: 0.5rem;
        width: 65px;
    }

    #logo {
        font-size: 1.2rem;
    }

    #logo img {
        position: absolute;
        max-width: 50px;
        left: 15px;
        margin-right: 0.5rem;
    }

    .navbar-nav li.navbar-header img {
        max-width: 60px;
        margin: 10px 0 10px 10px;
    }


    /* Header Styles */

    .header-style-three, .header-style-one, .header-style-four {
        display: block;
        text-align:center;
    }

    .header-style-four {
        padding-top:7rem;
    }

    .product-intro, #section-banner .header-style-one {
        padding-top:5rem;
    }

    
    .header-style-one p, .header-style-four p {
        font-size: 1.1rem;
        line-height: 1.6rem;
    }

    .story.spacing-400 {
        padding:0;
    }

    .header-style-one {
        max-width: 580px;
        margin: 0 auto;
    }

/* Buttons */

#section-banner .button {
    margin:0;
}

    /* Typography */

    h1, #section-banner .header-style-four h1, #product-banner h1, #section-banner h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 2em;
        line-height: 2.3rem;
    }

    h4 {
        font-size: 1.3rem;
        margin-bottom: 0;
    }

    .text-big {
        font-size: 1.2rem;
        line-height: 2rem;
    }

    /* Images */

    .image-style-one picture:nth-child(2) {
        margin:0;
    }

    .image-style-one {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        margin-bottom:4rem;
    }

    .image-dot-left.two-images-box picture:nth-child(2) {
        right: 43px;
        top: 150px;
        z-index: 1;
    }

    .image-dot-right.two-images-box picture:nth-child(2) {
        left: 43px;
        top: 150px;
        z-index: 1;
    }

    .two-images-box {
        margin-bottom: 4rem;
    }

figure.spacing-700, picture.spacing-700 {
    padding:0;
}

img.full-width {
    padding:0;
}

    /*--------------Sections------------*/

    /* Home Banner */

    #main-banner {
            padding: 120px 0 50px 0;
            height: 650px;
            text-align: center;
    }

    #main-banner h1 {
        font-size: 3rem;
        margin-top: 0;
    }

    #main-banner .cta-double {
        margin-top: 2rem;
    }

    .total-users { 
        margin:2rem auto 0 auto;
    }

    .logos-slide img {
        max-width: 60px;
    }

    /* Products */

    #products .four-c {
        display: grid;
        grid-template-columns: 50% 50%;
        column-gap: 10px;
        row-gap: 0px;
    }

    .product-box {
        box-shadow: 0 .5vw 4vw -.7vw rgba(0, 0, 0, .2);
        margin-bottom: 1rem;
    }

/* Image Grid */

#image-grid .right-column.two-c {
    display:grid;
    grid-template-columns: 50% 50%;
    column-gap: 10px;
    row-gap: 10px;
}

    /* CTA Box */

    .cta-box {
        height: unset;
    }

    .cta-content {
        margin: -35px 1rem 2.5rem 1rem;
    }

    .cta-image {
        position: relative;
        left: 0;
        top: -25px;
        max-width: 310px;
        margin: 0 auto;
    }

    .cta-box h3 {
        font-size: 2.2rem;
    }

    #cta-bottom .row-condensed {
        padding:2rem;
    }

    /* Login Box */

    .login-page #section-banner.section-banner-v2 h1 {
        font-size: 2.2rem;
    }

    #login-box a {
        border-right: none;
        border-bottom: 1px solid var(--grey);
        display: grid;
        grid-template-columns: 100px 2fr;
        text-align: left;
        gap: 1.5rem;
        line-height: normal;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    #login-box h3 {
        font-size: 1.2rem;
        font-weight: 500;
        margin: 0;
        padding: 0;
        margin-bottom: 0.5rem;
    }

    #section-style-boxed #login-box img {
        max-width: 110px;
        display: block;
    }

    #section-style-boxed #login-box p {
        display: none;
    }



    /* Quote Box */

    .quote-box {
        position: relative;
        position: relative;
        bottom: 330px;
        left: 15px;
        width: 50%;
        padding:2rem;
    }

    .quote-box q {
        font-size: 1.2rem;
        line-height: 1.7rem;
    }

    /* Feedback */

    .home #feedback {
        margin-top:-330px;
    }

    #feedback .three-c {
        grid-template-columns: 1fr 1fr;
    }

    /* Testimonial */

    .testimonial {
        padding: 1.5rem;
    }

    .three-c.spacing-400 .testimonial:nth-child(2n) {
        box-shadow: none;
        background: var(--ess-light);
        margin:1rem 0;
    }

    /* Product Landing Page*/

    .product-intro {
        text-align:center;
    }

    .cta-double .hint {
     display:none;
    }

    #stats div, #image-grid div {
        overflow:unset;
    }

    #stats img, #image-grid img {
        border-radius:25px;
    }

    #image-grid .right-column div:nth-child(1), #image-grid .right-column div:nth-child(4) {
        background:none;
    }

    .video-container {
        margin-bottom:4rem;
    }

    .two-c.spacing-600 {
        padding:1rem 0;
    }

    .icon-list li {
        padding:1rem;
    }


    .product-media {
        padding-left: 0;
    }

    #video-box {
        padding: 1rem;
        margin-top: 3rem;
    }

    #video-box .vimeo-wrapper {
        margin: 0 auto 0 auto;
        border-radius: 25px;
    }

    #video-box::before {
        height: unset;
    }


    #product-slider {
        padding:1rem;
    }

    .product-slider:before, .product-slider:after {
        width: 45px;
    }

    /* About us */

    .story p, .story h2 {
        max-width:580px;
        margin:0 auto;
    }

    /* Footer */

    #main-footer .four-c, #copyright.two-c {
        display:grid;
        grid-template-columns: 1fr 1fr;
    }

    #copyright {
        padding-bottom:0.8rem;
    }

    #copyright ul li {
        padding-left: 0;
        padding-right: 0.5rem;
    }

    #copyright p {
        margin:0;
        padding:0;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {

    body::before, .image-dot-left:before, .image-dot-right:before, #main-nav, #header-cta {
        display:none;
    }

    main,
    #main-banner-content, #faq, .full-width {
        padding: 0 1.5rem;
    }

    .open-menu .main-header-inner {
        z-index: 97;
    }

    body.open-menu::after {
        background:rgba(0,0,0,0.8);
        content: " ";
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 98;
    }

    .open-menu .navbar-collapse.open {
        z-index: 101;
    }


    .navbar {
        display:block;
    }


    /* Header */



    #main-header .main-header-inner li {
        padding: 0px 10px;
    }

    .main-header-inner {
        height: 85px;
        grid-template-columns: 2.5fr 1fr;
        border-radius: 0;
    }


    /* Buttons */

    .button {
        padding: 12px 25px;
    }

    .cta-double.spacing-200 {
        padding-top:0;
    }

    .cta-double .hint {
        padding-left: 0.8rem;
    }

        /* Main Banner */

        #main-banner {
            height: 920px;
        }

        #main-banner .testimonial {
            position: absolute;
            bottom: -20px;
            right: 2%;
            z-index: 5;
            box-shadow: 0 .5vw 4vw -.7vw rgba(0, 0, 0, .2);
            max-width: 450px;
            padding: 1.5rem 2rem;
        }

        #main-banner-content {
            grid-column: 1 / span 7;
        }

        .home .image-container {
                top: 96px;
                max-width: 580px;
            }

            .image-box picture {
                border-radius:25px;
            }

            #product-banner .spacing-900 {
                padding-bottom:5rem;
            }


            /* Landing Page */

            .product-intro {
                grid-column: 1 / span 5;
            }

            .product-media {
                grid-column: 6 / span 8;
            }

            /* Typography */

            #product-banner h1 {
                font-size: 2.2rem;
            }

            h2 {
                font-size: 2.4rem;
                line-height: 3rem;
            }

            /* Images */

            .image-dot-right.two-images-box picture:nth-of-type(2) {
                left: 26px;
                top: 215px;
                max-width: 190px;
            }

            .image-dot-left.two-images-box picture:nth-of-type(2) {
                right: 20px;
                top: 220px;
                max-width: 190px;
            }

                /* Products */

    #products .four-c {
        display: grid;
        grid-template-columns: 50% 50%;
        column-gap: 10px;
        row-gap: 0px;
    }

    .product-box {
        box-shadow: 0 .5vw 4vw -.7vw rgba(0, 0, 0, .2);
        margin-bottom: 1rem;
    }

    

}

@media (min-width: 1200px) and (max-width: 1399px) {
    body::before, .image-dot-left:before, .image-dot-right:before {
        display:none;
    }

    main,
    #main-banner-content, #faq, .full-width {
        padding: 0 1.5rem;
    }



    /* Header */

    #main-header .main-header-inner li {
        padding: 0px 10px;
    }

    .main-header-inner {
        display: grid;
        grid-template-columns: 1.4fr 2fr 1fr;
    }

    #main-header .main-header-inner a.button {
        padding: 10px 10px;
    }

    /* Buttons */

    .button {
        padding: 12px 25px;
    }

    .cta-double.spacing-200 {
        padding-top:0;
    }

    .cta-double .hint {
        padding-left: 0.8rem;
    }

        /* Main Banner */

        #main-banner {
            height: 920px;
        }

        #main-banner .testimonial {
            position: absolute;
            bottom: -20px;
            right: 2%;
            z-index: 5;
            box-shadow: 0 .5vw 4vw -.7vw rgba(0, 0, 0, .2);
            max-width: 450px;
            padding: 1.5rem 2rem;
        }

        #main-banner-content {
            grid-column: 1 / span 7;
        }

        .home .image-container {
                top: 96px;
                max-width: 580px;
            }

            .image-box picture {
                border-radius:25px;
            }

            #product-banner .spacing-900 {
                padding-bottom:5rem;
            }


            /* Landing Page */

            .product-intro {
                grid-column: 1 / span 5;
            }

            .product-media {
                grid-column: 6 / span 8;
            }

            /* Typography */

            #product-banner h1 {
                font-size: 2.2rem;
            }

            h2 {
                font-size: 2.4rem;
                line-height: 3rem;
            }

            /* Images */

            .image-dot-right.two-images-box picture:nth-of-type(2) {
                left: 26px;
                top: 215px;
                max-width: 190px;
            }

            .image-dot-left.two-images-box picture:nth-of-type(2) {
                right: 20px;
                top: 220px;
                max-width: 190px;
            }


}


@media (min-width: 1400px) and (max-width: 1600px) {

    body::before, .image-dot-left:before, .image-dot-right:before {
        display:none;
    }

    main,
    #main-banner-content, #faq, .full-width {
        padding: 0 1.5rem;
    }
}
/* Language switcher: the header bar (#header-cta) is hidden below 1200px,
   so the burger menu carries the switcher instead. */

@media (max-width: 1199px) {
    .lang-switch-mobile {
        display: block;
    }
}