/* Theme base styles */

/* Core
This is where the CSS files for the core of the theme live  (reset, normalize etc.)
*/



/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}
.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0 1rem;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}
*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}
/* === Generic === */
html {
    scroll-behavior: smooth;
}

body {
    background: var(--black);
}

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

.base.error-page,
.base {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 64px;
    padding-bottom: 64px;
}

@media only screen and (min-width: 768px) {
    .base.error-page,
    .base {
        padding-top: 120px;
        padding-bottom: 120px;
    }
}

.base.error-page {
    padding-top: 0;
}

@media only screen and (min-width: 768px) {
    .base.error-page {
        padding-top: 120px;
    }
}

.base.error-page .wrapper {
    text-align: center;
}

hr {
    border: none;
    background-color: var(--primary);
    height: .25rem;
    width: 7.5rem;
    margin-left: 0;
    margin-bottom: 35px;
}

/* popup */

body.js-open {
    position: relative;
    overflow: clip;
}

.popup-close {
    position: relative;
    z-index: 43;
    width: 30px;
    height: 30px;
    margin-left: auto;
    cursor: pointer;
}

.popup-close::after,
.popup-close::before {
    content: "";
    display: block;
    position: absolute;
    right: 0px;
    top: 10px;
    background: var(--white);
    height: 3px;
    width: 100%;
    opacity: 0.6;
    transition: opacity ease-in-out 0.3s;
}

.popup-close:hover::after,
.popup-close:hover::before {
    opacity: 1;
}

.popup-close::after {
    transform: rotate(-45deg);
}

.popup-close::before {
    transform: rotate(45deg);
}

.popup-close svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.popup-button {
    cursor: pointer;
}

.popup {
    display: none;
    position: fixed;
    z-index: 110;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    padding: 150px 20px;
}

@media only screen and (min-width: 768px) {
    .popup {
        padding: 120px 20px;
    }
}

.popup.is-active {
    display: block;
    
}

.popup-wrapper {
    max-height: 85vh;  /* This ensures the popup won't exceed 80% of the viewport height */
    overflow-y: auto;  /* Enables scrolling if the content exceeds the max height */
    max-width: 980px;
    margin: 0 auto;
    background:rgba(28,28,30,.99);
    position: relative;
    z-index: 41;
    padding: 25px 20px;
    padding-bottom: 140px;
}

@media only screen and (min-width: 768px) {
    .popup-wrapper {
        padding-bottom: 60px;
    }
}

/* Components */
/* wrapper */

.blog-post .buttons {
    padding: 0;
}

.blog-post-content .buttons .wrapper,
.buttons .wrapper,
.button-group {
    display: flex;
    gap: 35px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* share buttons */

.share {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 45px;
}

.share a {
    text-decoration: none;
    padding: 5px 10px;
    background: linear-gradient(264.09deg, #111115, #1c1c1e);
    border: 1px solid #363636;
    border-radius: 4px;
    transition: all ease-in-out 0.2s;
}

.share a:hover {
    text-decoration: none;
    color: var(--white);
    background-color: #5a6268;
    border-color: #545b62;
}
form {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: white;
    text-transform: initial !important;
}

.popup-form span:hover,
.popup-form span:hover::after,
form span:hover,
form span:hover::after {
    border: none;
    content: none;
}

form .hs-richtext,
form .hs-richtext p {
    margin: 0 0 0.5rem;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    color: var(--white);
    text-transform: initial !important;
    margin-top: 20px;
}

form .hs-richtext img {
    max-width: 100% !important;
}

form label,
form label span {
    color: var(--white);
}

/* Fields */

form .hs-form-field {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    float: none !important;
    width: 100% !important;
    margin-bottom: 2rem;
}

form .hs-form-field .input {
    margin-right: 0 !important;
}

form fieldset {
    max-width: 100% !important;
}

form fieldset:not(:last-of-type) {
    margin-bottom: 1.4rem;
}

form fieldset .hs-form-field {
    margin-bottom: 0;
}

form fieldset.form-columns-2,
form fieldset.form-columns-3 {
    display: grid;
    align-items: flex-start;
    grid-gap: 1.4rem 1.4rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 767px) {

    form fieldset.form-columns-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    form fieldset.form-columns-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

/* Labels */

form label {
    display: block;
    margin-bottom: 0.35rem;
}

form label span {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: var(--white);
    text-transform: initial !important;
}

/* Form Title */
.form-title {
    margin-bottom: 0;
}

/* Help text */

form legend {
    font-size: 0.875rem;
}

/* Inputs */

form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: var(--white);
    border: 1px solid #363636;
    border-radius: 3px;
    background-color: #1c1c1e;
    padding: 9px 10px;
    display: inline-block;
    width: 100% !important;
    height: 48px !important;
}


form textarea {
    resize: vertical;
    line-height: var(--form-input-line-height);
}

form input::placeholder,
form select::placeholder,
form textarea::placeholder {
    color: #7e7e7e;
}

form input:focus-visible,
form select:focus-visible,
form textarea:focus-visible {
    border-radius: 0;
    outline: none;
    border: 1px solid;
}

form legend.hs-field-desc {
    position: absolute;
    right: 0;
    width: auto !important;
}

/* Inputs - checkbox/radio */

form .inputs-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

form .inputs-list>li {
    display: block;
    margin: 0.7rem 0;
}

form .inputs-list input,
form .inputs-list span {
    vertical-align: middle;
}

form input[type=checkbox],
form input[type=radio] {
    cursor: pointer;
    margin-right: 0.35rem;
}

.hs_cos_wrapper.form-title {
    display: none;
}

.form-columns__body.form-checkbox-grid .hs-form-checkbox-display span,
.contact-hero__body.form-checkbox-grid .hs-form-checkbox-display span {
    margin-bottom: 4px;
}

.form-columns__body.form-checkbox-grid form .inputs-list.multi-container,
.contact-hero__body.form-checkbox-grid form .inputs-list.multi-container {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1.4rem;
    row-gap: 0.25rem;
}

@media only screen and (min-width: 480px) {
    .form-columns__body.form-checkbox-grid form .inputs-list.multi-container,
    .contact-hero__body.form-checkbox-grid form .inputs-list.multi-container {
        grid-template-columns: repeat(2,1fr);
    }
}
/* Inputs - date picker */

.hs-dateinput {
    position: relative;
}

.hs-dateinput:before {
    content: '';
    position: absolute;
    right: var(--form-input-padding-right);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20H16V16H20V20ZM14 10H10V14H14V10ZM20 10H16V14H20V10ZM8 16H4V20H8V16ZM14 16H10V20H14V16ZM8 10H4V14H8V10ZM24 2V24H0V2H3V3C3 4.103 3.897 5 5 5C6.103 5 7 4.103 7 3V2H17V3C17 4.103 17.897 5 19 5C20.103 5 21 4.103 21 3V2H24ZM22 8H2V22H22V8ZM20 1C20 0.448 19.553 0 19 0C18.447 0 18 0.448 18 1V3C18 3.552 18.447 4 19 4C19.553 4 20 3.552 20 3V1ZM6 3C6 3.552 5.553 4 5 4C4.447 4 4 3.552 4 3V1C4 0.448 4.447 0 5 0C5.553 0 6 0.448 6 1V3Z' fill='white'/%3E%3C/svg%3E");
}

.fn-date-picker .pika-table thead th {
    color: var(--white);
}

.fn-date-picker td.is-selected .pika-button {
    border-radius: 0;
    box-shadow: none;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
    border-radius: 0 !important;
    color: var(--white);
}

/* Inputs - file picker */

form input[type=file] {
    background-color: transparent;
    border: initial;
    padding: initial;
}

.hs-fieldtype-select .input {
    position: relative;
}

.hs-fieldtype-select .input select {
    position: relative;
}

.hs-fieldtype-select .input::after {
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg width='34' height='22' viewBox='0 0 34 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.995 0.212891L17 13.1896L30.005 0.212891L34 4.20789L17 21.2079L0 4.20789L3.995 0.212891Z' fill='white'/%3E%3C/svg%3E");
}

select.hs-input {
    appearance: none;
}

/* GDPR */

.legal-consent-container .hs-richtext p,
.legal-consent-container .hs-richtext a {
    font-size: 12px;
}

.legal-consent-container .hs-form-booleancheckbox-display>span,
.legal-consent-container .hs-form-booleancheckbox-display>span p {
    margin-left: 2rem !important;
    margin-bottom: 4px;
}

/* Validation */

.hs-form-required {
    color: #f2545b;
}

.hs-input.invalid.error {
    border-color: #f2545b;
}

.hs-error-msg {
    color: #f2545b;
    margin-top: 0.35rem;
    margin-left: var(--form-input-padding-left);
}

/* Submit button */

form input[type=submit],
form .hs-button {
    outline: none;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    transition: all 0.15s linear;
    white-space: normal;
    width: 100%;

    padding: 16px 64px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 16px;
    border: 1px solid;

    display: inline-flex;
    margin-top: 25px;
}
/* Captcha */

.grecaptcha-badge {
    margin: 0 auto;
}


    /* Search button input field and suggestions */
    .body-container-wrapper .hs-search-field__button {
        padding: 15px;
    }

    .body-container-wrapper .hs-search-field__bar--button-inline .hs-search-field__button {
        margin-left: 6px;
        margin-bottom: 0;
    }

    .body-container-wrapper .hs-search-field__button svg {
        height: 15px;
        fill: var(--white);
    }

    .body-container-wrapper .hs-search-field__bar>form>.hs-search-field__input {
        padding: 10px;
    }

    .body-container-wrapper .hs-search-field__suggestions li a {
        color: #494A52;
        padding: 0.35rem 0.7rem;
        text-decoration: none;
        transition: background-color 0.3s;
    }


/* Inputs - Custom Checkbox and Radio buttons shared css */

form .inputs-list.multi-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

form ul.inputs-list.multi-container li.hs-form-checkbox,
form ul.inputs-list li.hs-form-booleancheckbox,
form ul.inputs-list.multi-container li.hs-form-radio {
    margin: 0;
}

form ul.inputs-list.multi-container li.hs-form-checkbox label,
form ul.inputs-list li.hs-form-booleancheckbox label,
form ul.inputs-list.multi-container li.hs-form-radio label {
    position: relative;
}

form ul.inputs-list.multi-container li.hs-form-checkbox label span:not(.hs-form-required),
form ul.inputs-list li.hs-form-booleancheckbox label span:not(.hs-form-required),
form ul.inputs-list.multi-container li.hs-form-radio label span:not(.hs-form-required) {
    display: inline-block;
    margin-right: 16px;
    margin-left: 0 !important;
    padding-left: 46px;
    padding-top: 10px;
} 

form ul.inputs-list.multi-container li.hs-form-checkbox label input,
form ul.inputs-list li.hs-form-booleancheckbox label input,
form ul.inputs-list.multi-container li.hs-form-radio label input {
    height: 36px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 36px;
}

/* Inputs - Custom Checkbox */

form ul.inputs-list.multi-container li.hs-form-checkbox label span:not(.hs-form-required)::before,
form ul.inputs-list li.hs-form-booleancheckbox label span:not(.hs-form-required)::before {
    border: 1px solid;
    content: "";
    height: 36px;
    left: 0;
    position: absolute;
    top: 0;
    width: 36px;

    border: 1px solid var(--white);
    border-radius: 3px;
    background: transparent;
    background-size: 100% 1px;
    background-position: 0 0, 0 100%;
    background-repeat: no-repeat;
    cursor: pointer;
} 

form ul.inputs-list.multi-container li.hs-form-checkbox label span:not(.hs-form-required)::after,
form ul.inputs-list li.hs-form-booleancheckbox label span:not(.hs-form-required)::after {
    content: "";
    opacity: 0;
    position: absolute;
    background: transparent;
    transition: opacity 0.2s ease-in-out;
    cursor: pointer;
    height: 1pc;
    left: 13px;
    top: 7px;
    transform: rotate(45deg);
    width: 10px;
    border-width: 1px;
    border-bottom: 3px solid var(--white);
    border-left: 0 solid var(--white);
    border-right: 3px solid var(--white);
    border-top: 0 solid var(--white);
}

form ul.inputs-list.multi-container li.hs-form-checkbox label input:checked+span:not(.hs-form-required)::after,
form ul.inputs-list li.hs-form-booleancheckbox label input:checked+span:not(.hs-form-required)::after {
    opacity: 1;
}

form ul.inputs-list.multi-container li.hs-form-checkbox label input:focus+span:not(.hs-form-required)::after,
form ul.inputs-list li.hs-form-booleancheckbox label input:focus+span:not(.hs-form-required)::after {
    outline: 3px solid transparent;
    /* For Windows high contrast mode. */
}

/* Inputs - Custom Radio */
form ul.inputs-list.multi-container li.hs-form-radio label span::before {
    border: 1px solid var(--grey-color);
    background: var(--grey-color);
    content: "";
    height: 20px;
    left: 0;
    position: absolute;
    top: 0;
    width: 20px;
    border-radius: 50%;
}

form ul.inputs-list.multi-container li.hs-form-radio label span::after {
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    position: absolute;
    background-color: var(--white-color);
    top: 3px;
    border-radius: 50%;
    -webkit-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out;
    cursor: pointer;
    border: 1px solid var(--white-color);
}

form ul.inputs-list.multi-container li.hs-form-radio label input:checked+span::after {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

form ul.inputs-list.multi-container li.hs-form-radio label input:focus+span::after {
    outline: 3px solid transparent;
    /* For Windows high contrast mode. */
}

/* Templates */
/*
CSS for page templates are styled in this folder, linked into this CSS file and pulled in through a main style sheet
Feel free to add additional style sheets in here for your global HTML elements, just remember to link them up in this file!
*/


/* System */
/* Error pages */

.error-page {
    padding: 7rem 0;
    position: relative;
    text-align: center;
}

@media screen and (min-width: 568px) {
    .error-page {
        padding: 10rem 0;
    }
}

.error-page:before {
    color: #F3F6F9;
    content: attr(data-error);
    font-size: 40vw;
    font-weight: bold;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: -1;
}

@media screen and (min-width: 1100px) {
    .error-page:before {
        font-size: 20rem;
    }
}

/* System pages */

.systems-page {
    margin: 0 auto;
    max-width: 700px;
    padding: 3rem 1.4rem;
}

.systems-page--search-results {
    max-width: 100%;
}

.systems-page .header {
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.systems-page .success {
    background-color: #CDE3CC;
    border: 1.5px solid #4F7D24;
    border-radius: 6px;
    color: #4F7D24;
    display: inline-block;
    margin: 1.4rem 0;
    padding: 0.1rem 0.7rem;
    width: 100%;
}

.systems-page form input {
    max-width: 100%;
}

.base.system-section {
    position: relative;
    hyphens: manual;
    padding-bottom: 220px;
}

.base.system-section .bg-graphic {
    position: absolute;
    z-index: 0;
    top: -115px;
    left: 0;
    width: 100%;
    height: 100%;
}

.base.system-section .bg-graphic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.base.system-section .bg-graphic::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #000 14.97%, rgba(0, 0, 0, 0.00) 48.98%);
}

.base.system-section .bg-graphic::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #000 14.97%, rgba(0, 0, 0, 0.00) 48.98%);
}

.system-section .wrapper .content--small {
    max-width: 930px;
}

.system-section h1 {
    position: relative;
    font-size: 22px;
    line-height: 24px;
    margin-bottom: 64px;
}

.system-section h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -25px;
    display: block;
    width: 120px;
    height: 4px;
    background-color: var(--primary);
}

@media only screen and (min-width: 768px) {
    .system-section h1 {
        font-size: 36px;
        line-height: 42px;
    }
}

.systems-page form input[type='submit'] {
    margin: 0.7rem 0;
    display: block;
}

/* Search pages */

.hs-search-results__title {
    font-size: 1.25rem;
    margin-bottom: 0.35rem;
    text-decoration: underline;
}

.hs-search-results__title:hover {
    text-decoration: none;
}

.hs-search-results__description {
    padding-top: 0.7rem;
}

/* Password prompt */

.password-prompt input[type=password] {
    height: auto !important;
    margin-bottom: 1.4rem;
}

.systems-page #hs-login-widget-remember,
.systems-page #hs-login-widget-remember~label {
    display: inline-block;
    margin-bottom: 0.175rem;
}

.systems-page #hs_login_reset {
    display: block;
    margin-bottom: 0.7rem;
}

/* Backup unsubscribe */

.system-section.backup-unsubscribe h3 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600 !important;
}

.backup-unsubscribe #email-prefs-form div {
    padding-bottom: 0 !important;
}

.backup-unsubscribe input[type=email] {
    font-size: 0.875rem !important;
    margin-bottom: 1.4rem;
    padding: 0.7rem !important;
}

/* Email confirmation page */

.email-confirmation h2 {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 36px;
}

.email-confirmation .page-header {
    margin-bottom: 36px;
}

.email-confirmation .success {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
}

/* Subscription preferences */
.base.system-section .wrapper.preferences {
    position: relative;
    z-index: 12;
}

.base.system-section .email-prefs {
    margin-top: 64px;
    padding: 43px 50px;
    padding-top: 27px; /* subtracted p margin */
    border-radius: 5px;
    background: #18181B;
}

.base.system-section .email-prefs p.header {
    margin-bottom: 48px !important;
}

.email-prefs .item {
    cursor: pointer;
    margin-bottom: 24px;
    padding: 44px 38px;
    border-radius: 5px;
    border: 1px solid #535151;
    background: #000;
    color: white;
}

.email-prefs .item .checkbox-row {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.email-prefs .item .checkbox-row .fakelabel {
    display: flex;
    align-items: center;
    gap: 18px;
}

.email-prefs .item .checkbox-row input {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 5px;
    border: 1px solid #FFF;
    background-color: transparent;
    appearance: none;
}

.email-prefs .item .checkbox-row input:checked {
    border: 1px solid #535151;
    background: #FFF;
}

.email-prefs .item .checkbox-row input:checked::after {
    content: "";
    display: block;
    position: relative;
    z-index: 2;
    width: 20px;
    height: 14px;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='19' viewBox='0 0 24 19' fill='none'%3E%3Cpath d='M2 9.7L8.2069 16L22 2' stroke='%23E50043' stroke-width='3'/%3E%3C/svg%3E");
}

.email-prefs .item p {
    margin-bottom: 0;
}

.email-prefs .item:last-of-type {
    margin-bottom: 80px;
}

.email-prefs .item:has(input:checked) {
    border: 1px solid #FFF;
    background: #E50043;
}

form .email-prefs input[type="submit"], form .hs-button {
    width: auto;
    padding: 20px 32px;
}

.email-prefs .subscribe-options p label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.email-prefs .subscribe-options p label input {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    border: 1px solid #FFF;
    background-color: transparent;
    appearance: none;
}

.email-prefs .subscribe-options p label input:checked {
    border: 1px solid #535151;
    background: #FFF;
}

.email-prefs .subscribe-options p label input::after {
    content: "";
    display: block;
    position: relative;
    z-index: 2;
    width: 20px;
    height: 14px;
    background-position: center;
    background-size: contain;
    background-image: none;
}

.email-prefs .subscribe-options p label input:checked::after {
    content: "";
    display: block;
    position: relative;
    z-index: 2;
    width: 20px;
    height: 14px;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='19' viewBox='0 0 24 19' fill='none'%3E%3Cpath d='M2 9.7L8.2069 16L22 2' stroke='%23E50043' stroke-width='3'/%3E%3C/svg%3E");
}


/* hide system check box */
.email-prefs .item:has(#id_8348484) {
    display: none;
}

#email-prefs-form .item.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#email-prefs-form .item.disabled input:disabled {
    cursor: not-allowed;
}

/* Membership pages */

#hs-membership-form a[class*='show-password'] {
    font-size: 0.75rem;
}

/* Input error messages */

.form-input-validation-message ul.hs-error-msgs {
    padding-left: 0;
    margin: 0;
}

.form-input-validation-message ul.hs-error-msgs li {
    margin: 0;
}

/* Blog */
.blog-title.base {
    padding-bottom: 0;
    padding-top: 64px;
}

.blog-title .wrapper .content {
    max-width: 100%;
}

@media only screen and (min-width: 768px) {
    .blog-title .wrapper .content {
        max-width: 60%;
    }

    .blog-title.base {
        padding-bottom: 0;
        padding-top: 80px;
    }
}

.blog-title .wrapper h1,
.blog-title .wrapper p {
    color: var(--white);
}

/* featured section */
.blog-index-top-wrapper {
    position: relative;
}

.blog-index-top-wrapper  img.bg-graphic {
    position: absolute;
    z-index: 1;
    top: -120px;
    left: 0;
    width: 100%;
    height: calc(100% + 120px);
    object-fit: cover;
}

.blog-index-top-content {
    position: relative;
    z-index: 3;
}

.featured .wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-decoration: none;
    background-color: #18181B;
    border-radius: 4px;
    overflow: clip;
}

.featured .wrapper:hover {
    text-decoration: none;
    color: var(--white);
}

.featured .blog-card__tags {
    margin-bottom: 35px;
}

.featured .wrapper .title {
    transition: all ease-in-out 0.3s;
}

.featured .wrapper:hover .title {
    opacity: 0.8;
}

@media only screen and (min-width: 767px) {
    .featured .wrapper {
        flex-direction: row-reverse;
        gap: 120px;
    }
}

@media only screen and (min-width: 1080px) {
    .featured .wrapper {
        gap: 120px;
    }
}

.featured-header {
    width: 100%;
}

@media only screen and (min-width: 767px) {
    .featured-header {
        max-width: 50%;
    }
}

.featured-header img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.featured hr {
    border: none;
    background-color: var(--primary);
    height: .25rem;
    width: 7.5rem;
    margin-left: 0;
    margin-bottom: 35px;
}

.featured-body {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
}

@media only screen and (min-width: 767px) {
    .featured-body {
        max-width: 40%;
        padding-top: 64px;
        padding-bottom: 64px;
        padding-left: 64px;
    }
}

/* tags */

.base.tags {
    padding-top: 0;
    padding-bottom: 0;
}

@media only screen and (min-width: 767px) {
    .base.tags {
        padding-top: 0;
        padding-bottom: 0;
    }
}

.tags .wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;

    h3, .h3 {
        color: var(--white) !important;
        margin-bottom: 0;
        margin-right: 15px;
    }
    
}

.tag {
    background-color: #363636;
    border: 1px solid #363636;
    border-radius: .25rem;
    color: var(--white);
    padding: .375rem;

    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
    text-decoration: none;
}

.tag:hover {
    color: var(--white);
    background-color: var(--primary);
    text-decoration: none;
}

.tag--current {
    color: var(--white);
    background-color: var(--primary);
}

/* pagination */

.base.pagination {
    padding-top: 0px;
    padding-bottom: 0px;
}

@media only screen and (min-width: 768px) {
    .base.pagination {
        padding-top: 0px;
        padding-bottom: 0px;
    }
}

.pagination {
    padding-top: 60px;
    padding-bottom: 60px;
}

.base.pagination ul {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.base.pagination ul li {
    list-style: none;
}

.base.pagination ul li::before {
    content: none;
    display: none;
}

.base.pagination ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 17px 25px;
    color: var(--white) !important;
    text-decoration: none;
}

.pagination ul li a:hover,
.pagination ul li a.pagination--active {
    background-color: #18181B;
    text-decoration: none;
}
.blog-post--basic {
    hyphens: manual;
}

/* Blog post */

.blog-post-content .wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 80px;
}

@media only screen and (min-width: 1080px) {
    .blog-post-content .wrapper {
        flex-direction: row;
        gap: 50px;
    }
}

.post-content {
    max-width: 980px;
}

.post-content img {
    max-width: 100%;
}

.post-content__header img {
    margin-bottom: 25px;
}

.post-content__header h1 {
    margin-bottom: 45px;
}

.post-content__header .tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-bottom: 20px;
}

.post-content__header .tags a {
    color: #B1B2B3;
    text-decoration: none;
}

a:has(img) + em,
img + em {
    display: block;
}

p img + em,
p img + span {
    display: block;
    margin-top: 5px;
}

/* Blog post appendix */

.post-appendix {
    width: 100%;
    display: none;
}

@media only screen and (min-width: 1080px) {
    .post-appendix {
        display: block;
    }
}

.post-appendix-wrapper {
    position: sticky;
    top: 120px;
}

.post-appendix-wrapper .title {
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 35px;
}

.post-appendix-nav {
    display: flex;
    gap: 15px;
    flex-direction: column;
}

.post-appendix-nav a {
    color: var(--white);
    text-decoration: none;
}

/* Blog post author */

.blog-post-author {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 35px;
}

.blog-post-author__header {
    max-width: 52px;
    height: 52px;
    width: 100%;
    border-radius: 50%;
    overflow: clip;
}

.blog-post-author__header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-post-author__body {
    display: flex;
    flex-direction: column;
}

.blog-post-author__body a {
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
}

.blog-post-author__body .blog-post-date {
    color: #B1B2B3;
}

/* Blog */
.blog-title.base {
    padding-bottom: 0;
    padding-top: 64px;
}

.blog-title .wrapper .content {
    max-width: 100%;
}

@media only screen and (min-width: 768px) {
    .blog-title .wrapper .content {
        max-width: 60%;
    }

    .blog-title.base {
        padding-bottom: 0;
        padding-top: 80px;
    }
}

.blog-title .wrapper h1,
.blog-title .wrapper p {
    color: var(--white);
}

/* featured section */
.blog-index-top-wrapper {
    position: relative;
}

.blog-index-top-wrapper  img.bg-graphic {
    position: absolute;
    z-index: 1;
    top: -120px;
    left: 0;
    width: 100%;
    height: calc(100% + 120px);
    object-fit: cover;
}

.blog-index-top-content {
    position: relative;
    z-index: 3;
}

.featured .wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-decoration: none;
    background-color: #18181B;
    border-radius: 4px;
    overflow: clip;
}

.featured .wrapper:hover {
    text-decoration: none;
    color: var(--white);
}

.featured .blog-card__tags {
    margin-bottom: 35px;
}

.featured .wrapper .title {
    transition: all ease-in-out 0.3s;
}

.featured .wrapper:hover .title {
    opacity: 0.8;
}

@media only screen and (min-width: 767px) {
    .featured .wrapper {
        flex-direction: row-reverse;
        gap: 120px;
    }
}

@media only screen and (min-width: 1080px) {
    .featured .wrapper {
        gap: 120px;
    }
}

.featured-header {
    width: 100%;
}

@media only screen and (min-width: 767px) {
    .featured-header {
        max-width: 50%;
    }
}

.featured-header img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.featured hr {
    border: none;
    background-color: var(--primary);
    height: .25rem;
    width: 7.5rem;
    margin-left: 0;
    margin-bottom: 35px;
}

.featured-body {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
}

@media only screen and (min-width: 767px) {
    .featured-body {
        max-width: 40%;
        padding-top: 64px;
        padding-bottom: 64px;
        padding-left: 64px;
    }
}

/* tags */

.base.tags {
    padding-top: 0;
    padding-bottom: 0;
}

@media only screen and (min-width: 767px) {
    .base.tags {
        padding-top: 0;
        padding-bottom: 0;
    }
}

.tags .wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;

    h3, .h3 {
        color: var(--white) !important;
        margin-bottom: 0;
        margin-right: 15px;
    }
    
}

.tag {
    background-color: #363636;
    border: 1px solid #363636;
    border-radius: .25rem;
    color: var(--white);
    padding: .375rem;

    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
    text-decoration: none;
}

.tag:hover {
    color: var(--white);
    background-color: var(--primary);
    text-decoration: none;
}

.tag--current {
    color: var(--white);
    background-color: var(--primary);
}

/* pagination */

.base.pagination {
    padding-top: 0px;
    padding-bottom: 0px;
}

@media only screen and (min-width: 768px) {
    .base.pagination {
        padding-top: 0px;
        padding-bottom: 0px;
    }
}

.pagination {
    padding-top: 60px;
    padding-bottom: 60px;
}

.base.pagination ul {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.base.pagination ul li {
    list-style: none;
}

.base.pagination ul li::before {
    content: none;
    display: none;
}

.base.pagination ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 17px 25px;
    color: var(--white) !important;
    text-decoration: none;
}

.pagination ul li a:hover,
.pagination ul li a.pagination--active {
    background-color: #18181B;
    text-decoration: none;
}
.blog-post--basic {
    hyphens: manual;
}

/* Blog post */

.blog-post-content .wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 80px;
}

@media only screen and (min-width: 1080px) {
    .blog-post-content .wrapper {
        flex-direction: row;
        gap: 50px;
    }
}

.post-content {
    max-width: 980px;
}

.post-content img {
    max-width: 100%;
}

.post-content__header img {
    margin-bottom: 25px;
}

.post-content__header h1 {
    margin-bottom: 45px;
}

.post-content__header .tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-bottom: 20px;
}

.post-content__header .tags a {
    color: #B1B2B3;
    text-decoration: none;
}

a:has(img) + em,
img + em {
    display: block;
}

p img + em,
p img + span {
    display: block;
    margin-top: 5px;
}

/* Blog post appendix */

.post-appendix {
    width: 100%;
    display: none;
}

@media only screen and (min-width: 1080px) {
    .post-appendix {
        display: block;
    }
}

.post-appendix-wrapper {
    position: sticky;
    top: 120px;
}

.post-appendix-wrapper .title {
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 35px;
}

.post-appendix-nav {
    display: flex;
    gap: 15px;
    flex-direction: column;
}

.post-appendix-nav a {
    color: var(--white);
    text-decoration: none;
}

/* Blog post author */

.blog-post-author {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 35px;
}

.blog-post-author__header {
    max-width: 52px;
    height: 52px;
    width: 100%;
    border-radius: 50%;
    overflow: clip;
}

.blog-post-author__header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-post-author__body {
    display: flex;
    flex-direction: column;
}

.blog-post-author__body a {
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
}

.blog-post-author__body .blog-post-date {
    color: #B1B2B3;
}
/* blog cards */

.blog-cards .blog-cards__header {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    align-items: flex-start;
}

@media only screen and (min-width: 720px) {
    .blog-cards .blog-cards__header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 45px;
    }
}

.blog-cards .blog-cards__header .title {
    margin-bottom: 0;
}

.blog-cards .blog-cards__header .btn {
    margin-top: 0;
}

.blog-cards .blog-cards__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 35px;
}

@media only screen and (min-width: 720px) {
    .blog-cards .blog-cards__body {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px;
    }
}

@media only screen and (min-width: 1199px) {
    .blog-cards .blog-cards__body {
        grid-template-columns: repeat(3, 1fr);
    }
}

.blog-card {
    display: flex;
    flex-direction: column;
    overflow: clip;
    text-decoration: none;
    border-radius: 4px;
    overflow: clip;
}

.blog-card:hover {
    text-decoration: none;
    color: var(--white);
}

.blog-card .title {
    transition: all ease-in-out 0.3s;
}

.blog-card:hover .title {
    opacity: 0.8;
}

.blog-card .blog-card__header {
    width: 100%;
    height: 230px;
}

.blog-card .blog-card__header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card .blog-card__body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 35px 20px;
    background-color: #18181B;
    text-decoration: none;
}

@media only screen and (min-width: 768px) {
    .blog-card .blog-card__body {
        padding: 45px 35px;
    }
}

.blog-card__body .content {
    margin-bottom: 35px;
}

.blog-card__body .content .title {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}

.blog-card__body .blog-post-author {
    margin-top: auto;
}

.blog-card__body .blog-post-author-name {
    font-weight: 600;
}

.blog-card__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-bottom: 20px;
}

.blog-card__tags div {
    color: #B1B2B3;
    text-decoration: none;
}

/* Global Modules */
.site-header {
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    z-index: 23;
}

.site-header .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-header-logo,
.empty-filler {
    max-width: 160px;
    width: 100%;
}

.site-header-menu {
    display: flex;
    gap: 25px;
    color: var(--white);
}

.site-header-menu a,
.site-header-menu span {
    position: relative;
    color: var(--white);
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
}

.site-header-menu a::after,
.site-header-menu span::after {
    content:"";
    position: absolute;
    background: var(--primary);
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 1px;
    opacity: 0;
    transition: opacity .3s ease;
}

.site-header-menu a:hover,
.site-header-menu span:hover {
    text-decoration: none;
}

.site-header-menu a:hover::after,
.site-header-menu span:hover::after {
    opacity: 1;
}

/* Mobile */

.site-header-menu {
    display: none;
}

.hamburger-wrapper .site-header-menu {
    display: none;
}

@media only screen and (min-width: 1025px) {
    .site-header-menu {
        display: flex;
    }

    .hamburger-wrapper {
        display: none;
    }
}

body.js-nav-open {
    overflow: clip;
}

body.js-nav-open .hamburger-wrapper .site-header-menu {
    display: flex;
    position: absolute;
    z-index: 110;
    background: var(--white);
    top: 120px;
    left: 0;
    width: 100%;
    height: 100vh;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 45px;
    flex-direction: column;
    gap: 20px;
}

body.js-nav-open .hamburger-wrapper .site-header-menu > a,
body.js-nav-open .hamburger-wrapper .site-header-menu > span {
    color: var(--black);
}

/* Hamburger */
.hamburger {
    cursor: pointer;
    z-index: 200;
    width: 25px;
    height: 20px;
    display: flex;
    align-items: center;
}

.hamburger span {
    margin: 0 auto;
    position: relative;
}

.hamburger span,
.hamburger span::before,
.hamburger span::after {
    display: block;
    background-color: white;
    transition-property: all;
    transition-duration: .1s;
    width: 25px;
    height: 2px;
}

.hamburger span::before,
.hamburger span::after {
    position: absolute;
    content: '';
}

.hamburger span::before {
    transform: translateY(-7px);
}

.hamburger span::after {
    transform: translateY(7px);
}

.js-nav-open .hamburger {
    transition: transform var(--speed) ease;
}

.js-nav-open .hamburger span {
    background-color: transparent !important;
}

.js-nav-open .hamburger span::before,
.js-nav-open .hamburger span::after {
    transform: translateY(0);
}

.js-nav-open .hamburger span::before {
    transform: rotate(45deg);
}

.js-nav-open .hamburger span::after {
    transform: rotate(-45deg);
}
.footer {
    background-color: var(--black);
    color: var(--white);
    padding-bottom: 100px;
}

/* top footer */

.footer-top {
    background: linear-gradient(180deg,#1c1c1e 0,#111115);
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
}

.footer-top .wrapper {
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: center;
    align-items: center;
}

@media only screen and (min-width: 560px) {
    .footer-top .wrapper {
        flex-wrap: wrap;
        gap: 50px;
        justify-content: center;
        align-items: flex-start;
        flex-direction: row;
    }
}

.footer-top a {
    color: #B1B2B3;
    font-size: 20px;
    line-height: 2rem;
    font-weight: 400;
    transition: color .3s ease;
    text-decoration: none;
}

.footer-top a:hover {
    color: var(--primary);
    text-decoration: none;
}

/* body footer */

.footer-body {
    padding-top: 64px;
    padding-bottom: 64px;
    padding-left: 20px;
    padding-right: 20px;
}

.footer-body .wrapper {
    display: grid;
    gap: 50px;
    grid-template-columns: 1fr;
}

@media only screen and (min-width: 560px) {
    .footer-body .wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 1200px) {
    .footer-body .wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}

.footer-body .footer-col .title {
    color: var(--white);
    font-weight: 400;
    font-size: 24px;
    line-height: 2.52rem;
    text-decoration: none;
}

.footer-body .footer-col .title:hover {
    text-decoration: none;
    opacity: 0.8;
}

.footer-body .footer-col .sub-menu {
    border-top: 2px solid #363636;
    padding-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-body .footer-col .sub-menu a {
    color: #B1B2B3;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    text-decoration: none;
}

.footer-body .footer-col .sub-menu a:hover {
    color: var(--white);
    opacity: 1;
    text-decoration: none;
}

/* Footer bottom */

.footer-bottom {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
}

.footer-bottom .wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 35px;
}

@media only screen and (min-width: 678px) {
    .footer-bottom .wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
    }
}

.footer-bottom .footer-bottom-col {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

@media only screen and (min-width: 678px) {
    .footer-bottom .footer-bottom-col {
        gap: 50px;
        align-items: center;
    }
}

.footer-bottom .footer-bottom-col:last-of-type {
    gap: 15px;
}

.footer-bottom .footer-bottom-col a {
    display: flex;
    gap: 5px;
    align-items: center;
    color: var(--white);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    text-decoration: none;
}

.footer-bottom .footer-bottom-col a:hover {
    color: var(--primary);
    text-decoration: none;
}

.footer-bottom .footer-bottom-col a span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #7e8182;
    border-radius: 0.5rem;
}

.footer-bottom .footer-bottom-col a:hover span {
    background-color: var(--primary);
}

.footer-bottom .footer-bottom-col a span {
    background-color: #373639;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 1.25rem;
    border-radius: .5rem;
    display: block;
    height: 2rem;
    margin-right: .5rem;
    overflow: hidden;
    position: relative;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    width: 2rem;
}

.footer-bottom .footer-bottom-col a span.tel {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.235 18.44c-1.347 0-2.67-.21-3.923-.624-.614-.21-1.369-.018-1.744.367l-2.474 1.868c-2.868-1.532-4.635-3.298-6.146-6.145l1.813-2.41c.47-.47.64-1.157.437-1.801a12.51 12.51 0 01-.627-3.93A1.768 1.768 0 009.806 4h-4.04C4.791 4 4 4.792 4 5.765 4 16.923 13.077 26 24.235 26c.973 0 1.765-.792 1.765-1.765v-4.03c0-.973-.792-1.764-1.765-1.764z' fill='%23FFF'/%3E%3C/svg%3E");
}

.footer-bottom .footer-bottom-col a span.mail {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23FFF' fill-rule='nonzero'%3E%3Cpath d='M18.909 15.123l8.09 5.115V9.792zM3 9.792v10.446l8.091-5.115zM25.5 6.75h-21c-.748 0-1.342.558-1.455 1.276L15 15.904l11.955-7.877c-.112-.718-.706-1.276-1.455-1.276zM17.535 16.03l-2.122 1.397a.75.75 0 01-.825 0l-2.123-1.4-9.417 5.957c.116.713.707 1.266 1.452 1.266h21c.746 0 1.337-.553 1.452-1.266l-9.417-5.955z'/%3E%3C/g%3E%3C/svg%3E");
}

.footer-bottom .footer-bottom-col a span.linkedin {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.56 11.654H5.263v12.904H9.56zm14.101 1.179c-.902-.985-2.096-1.478-3.58-1.478a5.16 5.16 0 00-1.492.202 3.383 3.383 0 00-1.132.567 5.557 5.557 0 00-.736.677 5.592 5.592 0 00-.508.689v-1.835H11.93l.013.625c.01.417.013 1.701.013 3.854s-.008 4.96-.026 8.424h4.284v-7.2c0-.443.048-.794.143-1.055a2.77 2.77 0 01.827-1.113c.37-.3.827-.45 1.374-.45.747 0 1.296.259 1.647.775.352.517.528 1.23.528 2.142v6.901h4.283v-7.395c0-1.902-.45-3.345-1.354-4.33zM7.437 5.443c-.72 0-1.304.211-1.75.632-.448.42-.671.952-.671 1.595 0 .633.217 1.163.65 1.588.435.426 1.008.638 1.72.638h.025c.73 0 1.318-.212 1.765-.638.447-.425.666-.954.657-1.588-.008-.643-.23-1.174-.664-1.595-.434-.421-1.011-.632-1.732-.632z' fill='%23FFF'/%3E%3C/svg%3E");
}

.footer-bottom .footer-bottom-col a span.xing {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.932 8c-.217 0-.399.073-.49.215-.095.147-.081.336.02.528l2.43 4.026c.005.007.005.012 0 .02l-3.82 6.449c-.099.19-.094.38 0 .528a.536.536 0 00.47.234h3.596c.538 0 .797-.347.98-.664L14 12.769a8195.31 8195.31 0 01-2.472-4.124c-.179-.305-.45-.645-1-.645H6.931zm14.934-4c-.531 0-.761.312-.952.632L13 17.722l5.053 8.646c.177.294.449.632.994.632h3.552c.214 0 .382-.075.472-.212.095-.141.092-.329-.007-.513l-5.014-8.544a.018.018 0 010-.021l7.874-12.986c.099-.183.101-.37.007-.512-.09-.137-.258-.212-.472-.212h-3.593z' fill='%23FFF'/%3E%3C/svg%3E");
}

.footer-bottom .footer-bottom-col a span.twitter {
    background-image: url("data:image/svg+xml, %3Csvg width='256' height='256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M139.85,118.25l46.39-53.92h-10.99l-40.28,46.82-32.17-46.82h-37.11l48.65,70.8-48.65,56.55h10.99l42.54-49.44,33.98,49.44h37.11l-50.45-73.43h0Zm-15.06,17.5l-4.93-7.05-39.22-56.1h16.89l31.65,45.27,4.93,7.05,41.14,58.85h-16.89l-33.57-48.02h0Z' fill='%23FFF'/%3E%3C/svg%3E");
}

.footer-bottom .footer-bottom-col a span.facebook {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.346 8.32h1.826V5.14a23.576 23.576 0 00-2.66-.14c-2.632 0-4.436 1.656-4.436 4.7v2.8h-2.905v3.555h2.905V25h3.562v-8.944h2.788l.442-3.555h-3.23v-2.45c0-1.027.277-1.73 1.708-1.73z' fill='%23FFF'/%3E%3C/svg%3E");
}

.footer-bottom .footer-bottom-col a span.youtube {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.04 7h.048l.368.002c.787.004 2.481.022 4.215.086l.548.022c1.732.075 3.412.2 4.171.41a3.025 3.025 0 012.116 2.14c.451 1.67.49 4.93.494 5.696v.206c-.002.428-.03 4.013-.494 5.798a3.025 3.025 0 01-2.116 2.14c-1.678.447-7.855.494-9.15.5h-.479c-1.292-.006-7.456-.055-9.151-.52a3.025 3.025 0 01-2.116-2.14c-.45-1.71-.49-5.137-.494-5.746v-.187c.004-.607.045-4.02.494-5.747.277-1.04 1.107-1.88 2.115-2.16 1.599-.426 7.278-.489 8.934-.498L14.911 7h.049zM13 12v7l6-3.5-6-3.5z' fill='%23FFF'/%3E%3C/svg%3E");
}

/* Powerline */

.cmp-powerline {
    transition: transform 0.6s ease-out; /* Smooth transition */
    will-change: transform; /* Optimize performance */
}

.cmp-powerline.translate-out {
    transform: translateY(300%);
}

.cmp-powerline {
    -webkit-font-smoothing: antialiased;
    background-color: var(--black);
    bottom: 0;
    display: block;
    position: fixed;
    -webkit-transform: translateY(60px);
    transform: translateY(60px);
    -webkit-transition: -webkit-transform .75s ease-in-out;
    transition: -webkit-transform .75s ease-in-out;
    transition: transform .75s ease-in-out;
    transition: transform .75s ease-in-out,-webkit-transform .75s ease-in-out;
    width: 100%;
    z-index: 21
}

@media(max-width: 1281px) {
    .cmp-powerline {
        -webkit-transform:translateY(20px);
        transform: translateY(20px)
    }
}

.cmp-powerline.fadeout {
    -webkit-transform: translateY(15pc);
    transform: translateY(15pc)
}

.cmp-powerline.higher {
    -webkit-transform: translateY(6px);
    transform: translateY(6px)
}

.cmp-powerline__items {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 106pc;
    position: relative;
    top: 3px
}

@media(max-width: 1736px) {
    .cmp-powerline__items {
        margin-left:2.5rem;
        margin-right: 2.5rem;
        width: auto!important
    }
}

@media(max-width: 1025px) {
    .cmp-powerline__items {
        margin-left:2rem;
        margin-right: 2rem;
        width: auto!important
    }
}

.cmp-powerline__items__background {
    background-color: var(--black);
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1
}

.cmp-powerline__items:after,.cmp-powerline__items:before {
    background-color: var(--primary);
    border-bottom: 1px solid var(--white);
    border-left: 1px solid var(--white);
    border-top: 1px solid var(--white);
    content: "";
    height: 100%;
    margin-left: -.125rem;
    position: absolute;
    width: calc(50vw - 50% + 4px)
}

@media(max-width: 1281px) {
    .cmp-powerline__items:after,.cmp-powerline__items:before {
        margin-left:-.125rem
    }
}

@media(max-width: 400px) {
    .cmp-powerline__items:after,.cmp-powerline__items:before {
        border-left:none
    }
}

.cmp-powerline__items:before {
    right: 100%
}

.cmp-powerline__items:after {
    left: calc(100% - 3px)
}

@media(max-width: 1281px) {
    .cmp-powerline__items {
        height:1.5625rem
    }
}

.cmp-powerline__item {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: transparent;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    flex-grow: 1;
    justify-content: center;
    line-height: 1.6875rem;
    margin: 0 -.1875rem;
    position: relative;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

@media(max-width: 1281px) {
    .cmp-powerline__item {
        display:none
    }
}

.cmp-powerline__item a {
    text-decoration: none;
}

.cmp-powerline__item__link {
    background-color: var(--white);
    clip-path: polygon(97% 0,100% 50%,97% 100%,0 100%,11px 50%,0 0);
    cursor: pointer;
    width: 25%;
    height: 27px;
}

@media(hover: hover) {
    .cmp-powerline__item__link:hover a {
        color:var(--black);
    }

    .cmp-powerline__item__link:hover:before {
        background: var(--white);
    }
}

.cmp-powerline__item__link:before {
    background: var(--primary);
    clip-path: polygon(calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,.5px 100%,11px 50%,.5px 0);
    content: "";
    display: block;
    height: 25px;
    position: absolute;
    top: 1px;
    width: 99%;
    z-index: -1
}

@media(max-width: 1736px) {
    .cmp-powerline__item__link {
        clip-path:polygon(97% 0,100% 50%,97% 100%,0 100%,11px 50%,0 0);
        height: 27px;
    }

    .cmp-powerline__item__link:before {
        clip-path: polygon(calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,1px 100%,11px 50%,1px 0)
    }
}

@media(max-width: 1546px) {
    .cmp-powerline__item__link {
        clip-path:polygon(97% 0,100% 50%,97% 100%,0 100%,9px 50%,0 0)
    }

    .cmp-powerline__item__link:before {
        clip-path: polygon(calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,1px 100%,9px 50%,1px 0)
    }
}

@media(max-width: 1376px) {
    .cmp-powerline__item__link {
        clip-path:polygon(97% 0,100% 50%,97% 100%,0 100%,9px 50%,0 0)
    }

    .cmp-powerline__item__link:before {
        clip-path: polygon(calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,1px 100%,9px 50%,1px 0)
    }
}

.cmp-powerline__item__beforelogo {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    background: var(--white);
    clip-path: polygon(100% 0,100% 50%,100% 100%,0 100%,11px 50%,0 0);
    flex-grow: 0;
    margin-right: 1.3125rem;
    width: 3.4375rem
}

.cmp-powerline__item__beforelogo:before {
    background: var(--primary);
    clip-path: polygon(calc(100% - 1px) 1px,calc(100% - 1px) 50%,calc(100% - 1px) calc(100% - 1px),2px calc(100% - 1px),12.5px 50%,2px 1px);
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: -1
}

@media(max-width: 1736px) {
    .cmp-powerline__item__beforelogo {
        clip-path:polygon(100% 0,100% 50%,100% 100%,0 100%,11px 50%,0 0)
    }

    .cmp-powerline__item__beforelogo:before {
        clip-path: polygon(calc(100% - 1px) 1px,calc(100% - 1px) 50%,calc(100% - 1px) calc(100% - 1px),3px calc(100% - 1px),12.5px 50%,3px 1px);
        height: 100%;
        width: 100%
    }
}

@media(max-width: 1546px) {
    .cmp-powerline__item__beforelogo {
        clip-path:polygon(100% 0,100% 50%,100% 100%,0 100%,9px 50%,0 0)
    }

    .cmp-powerline__item__beforelogo:before {
        clip-path: polygon(calc(100% - 1px) 1px,calc(100% - 1px) 50%,calc(100% - 1px) calc(100% - 1px),2px calc(100% - 1px),10.5px 50%,2px 1px);
        height: 100%;
        width: 100%
    }
}

@media(max-width: 1281px) {
    .cmp-powerline__item__beforelogo {
        -webkit-box-flex:1;
        -ms-flex-positive: 1;
        clip-path: polygon(100% 0,100% 50%,100% 100%,0 100%,9px 50%,0 0);
        display: block;
        flex-grow: 1
    }

    .cmp-powerline__item__beforelogo:before {
        clip-path: polygon(calc(100% - 1px) 1px,calc(100% - 1px) 50%,calc(100% - 1px) calc(100% - 1px),2px calc(100% - 1px),10.5px 50%,2px 1px);
        height: 100%;
        width: 100%;
        z-index: 0
    }
}

@media(max-width: 1155px) {
    .cmp-powerline__item__beforelogo {
        clip-path:polygon(100% 0,100% 50%,100% 100%,0 100%,8px 50%,0 0)
    }

    .cmp-powerline__item__beforelogo:before {
        clip-path: polygon(calc(100% - 1px) 1px,calc(100% - 1px) 50%,calc(100% - 1px) calc(100% - 1px),2px calc(100% - 1px),9.5px 50%,2px 1px);
        height: 100%;
        width: 100%
    }
}

@media(max-width: 960px) {
    .cmp-powerline__item__beforelogo {
        clip-path:polygon(100% 0,100% 50%,100% 100%,0 100%,8px 50%,0 0)
    }

    .cmp-powerline__item__beforelogo:before {
        clip-path: polygon(calc(100% - 1px) 1px,calc(100% - 1px) 50%,calc(100% - 1px) calc(100% - 1px),2px calc(100% - 1px),9.5px 50%,2px 1px);
        height: 100%;
        width: 100%
    }
}

@media(max-width: 760px) {
    .cmp-powerline__item__beforelogo {
        clip-path:polygon(100% 0,100% 50%,100% 100%,0 100%,8px 50%,0 0)
    }

    .cmp-powerline__item__beforelogo:before {
        clip-path: polygon(calc(100% - 1px) 1px,calc(100% - 1px) 50%,calc(100% - 1px) calc(100% - 1px),2px calc(100% - 1px),9.5px 50%,2px 1px);
        height: 100%;
        width: 100%
    }
}

@media(max-width: 480px) {
    .cmp-powerline__item__beforelogo {
        clip-path:polygon(100% 0,100% 50%,100% 100%,0 100%,8px 50%,0 0)
    }

    .cmp-powerline__item__beforelogo:before {
        clip-path: polygon(calc(100% - 1px) 1px,calc(100% - 1px) 50%,calc(100% - 1px) calc(100% - 1px),2px calc(100% - 1px),9.5px 50%,2px 1px);
        height: 100%;
        width: 100%
    }
}

@media(max-width: 400px) {
    .cmp-powerline__item__beforelogo {
        clip-path:polygon(100% 0,100% 50%,100% 100%,0 100%,8px 50%,0 0);
        margin-right: 0;
        width: 100%
    }

    .cmp-powerline__item__beforelogo:before {
        clip-path: polygon(calc(100% - 1px) 1px,calc(100% - 1px) 50%,calc(100% - 1px) calc(100% - 1px),2px calc(100% - 1px),9.5px 50%,2px 1px);
        height: 100%;
        width: 100%
    }
}

.cmp-powerline__item__logo {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    border: none;
    flex-grow: 0;
    margin-right: .5625rem;
    width: 3.9375rem
}

.cmp-powerline__item__logo:after,.cmp-powerline__item__logo:before {
    display: none
}

@media(max-width: 1281px) {
    .cmp-powerline__item__logo {
        -webkit-box-flex:0;
        -ms-flex-positive: 0;
        display: block;
        flex-grow: 0;
        width: 3.6875rem
    }
}

@media(max-width: 400px) {
    .cmp-powerline__item__logo {
        display:none;
        margin-right: 0;
        visibility: hidden;
        width: 0
    }
}

.cmp-powerline__item__link a,.cmp-powerline__item__link p {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    justify-content: flex-start
}

.cmp-powerline__item__link a:before,.cmp-powerline__item__link p:before {
    content: "";
    display: block;
    width: 1rem
}

.cmp-powerline__item__link:nth-child(2) a:before,.cmp-powerline__item__link:nth-child(2) p:before {
    width: 1.5rem
}

.cmp-powerline__item::marker {
    display: none
}

.cmp-powerline__item:last-child,.cmp-powerline__item:nth-child(2) {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0
}

@media(max-width: 1281px) {
    .cmp-powerline__item:last-child,.cmp-powerline__item:nth-child(2) {
        display:list-item
    }
}

.cmp-powerline__item:nth-child(2) {
    background: var(--white);
    border-bottom: 1px solid var(--white);
    border-top: 1px solid var(--white);
    clip-path: polygon(50% 0,100% 50%,50% 100%,0 100%,0 50%,0 0);
    width: 1.5625rem;
    z-index: -1
}

.cmp-powerline__item:nth-child(2):before {
    background: var(--primary);
    clip-path: polygon(50% 0,100% 50%,50% 100%,0 100%,0 50%,0 0);
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 1.5px;
    width: 99%
}

@media(max-width: 1736px) {
    .cmp-powerline__item:nth-child(2) {
        clip-path:polygon(50% 0,100% 50%,50% 100%,0 100%,0 50%,0 0)
    }

    .cmp-powerline__item:nth-child(2):before {
        clip-path: polygon(9pt 0,100% 50%,9pt 100%,0 100%,0 50%,0 0)
    }
}

@media(max-width: 1546px) {
    .cmp-powerline__item:nth-child(2) {
        clip-path:polygon(60% 0,100% 50%,60% 100%,0 100%,0 50%,0 0)
    }

    .cmp-powerline__item:nth-child(2):before {
        clip-path: polygon(14px 0,100% 50%,14px 100%,0 100%,0 50%,0 0)
    }
}

@media(max-width: 1281px) {
    .cmp-powerline__item:nth-child(2) {
        clip-path:polygon(79% 0,100% 50%,79% 100%,0 100%,0 50%,0 0);
        display: block;
        width: 2.5rem
    }

    .cmp-powerline__item:nth-child(2):before {
        clip-path: polygon(80% 0,100% 50%,80% 100%,0 100%,0 50%,0 0)
    }
}

.cmp-powerline__item:last-child,.cmp-powerline__item:last-child:after,.cmp-powerline__item:last-child:before {
    display: none
}

.cmp-powerline__item a,.cmp-powerline__item p {
    -webkit-font-smoothing: antialiased;
    color: var(--white);
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    text-indent: 0;
    text-transform: uppercase;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

@media(max-width: 1281px) {
    .cmp-powerline__item a,.cmp-powerline__item p {
        font-size:0
    }
}

.cmp-powerline__logo {
    bottom: -1.125rem;
    height: 75pt;
    position: absolute;
    right: 1px;
    width: 72px
}

@media(max-width: 1281px) {
    .cmp-powerline__logo {
        left:auto
    }
}

.cmp-powerline__logo img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    width: 100%
}

.cmp-powerline__footer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    background-color: transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    height: 2.0625rem;
    justify-content: flex-start;
    margin-bottom: 3.9375rem;
    width: 100%
}

.cmp-powerline__footer__content {
    margin-left: auto;
    margin-right: auto;
    margin-top: .5rem;
    max-width: 106pc;
    width: 100%
}

@media(max-width: 1736px) {
    .cmp-powerline__footer__content {
        margin-left:2.5rem;
        margin-right: 2.5rem;
        width: auto!important
    }
}

@media(max-width: 1025px) {
    .cmp-powerline__footer__content {
        margin-left:2rem;
        margin-right: 2rem;
        width: auto!important
    }
}

.cmp-powerline__footer__content a {
    margin-left: 1.25rem;
    margin-top: .3125rem
}

@media(max-width: 1281px) {
    .cmp-powerline__footer__content a {
        margin-left:1.75rem
    }
}

.cmp-powerline__footer__content img {
    height: .5625rem;
    -o-object-fit: contain;
    object-fit: contain;
    width: 10.9375rem
}

@media(max-width: 1025px) {
    .separator:not(.header):not(.footer):not(.powerline):not(.webshop):not(.anchor-navigation) {
        height:0;
        margin-bottom: 0
    }
}

html[class*=aem-AuthorLayer] .cmp-teaser--type-hero-darkoverlay .cmp-teaser__powerline {
    margin-top: -12.5rem
}

html[class*=aem-AuthorLayer] .cmp-teaser--type-hero-small-logo .cmp-teaser__powerline {
    margin-top: -12.5rem
}

@media(max-width: 1736px) {
    .cmp-powerline__item__link {
        clip-path:polygon(97% 0,100% 50%,97% 100%,0 100%,11px 50%,0 0)
    }

    .cmp-powerline__item__link:before {
        clip-path: polygon(calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,1px 100%,11px 50%,1px 0)
    }
}

@media(max-width: 1546px) {
    .cmp-powerline__item__link {
        clip-path:polygon(97% 0,100% 50%,97% 100%,0 100%,9px 50%,0 0)
    }

    .cmp-powerline__item__link:before {
        clip-path: polygon(calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,1px 100%,9px 50%,1px 0)
    }
}

@media(max-width: 1376px) {
    .cmp-powerline__item__link {
        clip-path:polygon(97% 0,100% 50%,97% 100%,0 100%,9px 50%,0 0)
    }

    .cmp-powerline__item__link:before {
        clip-path: polygon(calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,1px 100%,9px 50%,1px 0)
    }
}



@media(max-width:1025px){
    .separator:not(.header):not(.footer):not(.powerline):not(.webshop):not(.anchor-navigation){
        height:0;
        margin-bottom:0;
    }
}
.cmp-powerline__item.cmp-powerline__item__link a:hover,
.cmp-powerline__item.cmp-powerline__item__link a {
    text-decoration: none;
}

.cmp-teaser__powerline,html[class*=aem-AuthorLayer] .cmp-teaser--type-hero-darkoverlay .cmp-teaser__powerline,html[class*=aem-AuthorLayer] .cmp-teaser--type-hero-small-logo .cmp-teaser__powerline{margin-top:-12.5rem}html[class*=aem-AuthorLayer] .cmp-teaser--type-hero-darkoverlay .cmp-teaser,html[class*=aem-AuthorLayer] .cmp-teaser--type-hero-darkoverlay .cmp-teaser__content,html[class*=aem-AuthorLayer] .cmp-teaser--type-hero-darkoverlay .cmp-teaser__image,html[class*=aem-AuthorLayer] .cmp-teaser--type-hero-darkoverlay .cmp-teaser__video{max-height:46.875rem!important;min-height:46.875rem!important}html[class*=aem-AuthorLayer] .cmp-teaser--type-hero-darkoverlay .cmp-teaser__powerline{margin-top:-12.5rem}html[class*=aem-AuthorLayer] .cmp-teaser--type-hero-small-logo .cmp-teaser,html[class*=aem-AuthorLayer] .cmp-teaser--type-hero-small-logo .cmp-teaser__content,html[class*=aem-AuthorLayer] .cmp-teaser--type-hero-small-logo .cmp-teaser__image,html[class*=aem-AuthorLayer] .cmp-teaser--type-hero-small-logo .cmp-teaser__video{max-height:46.875rem!important;min-height:46.875rem!important}html[class*=aem-AuthorLayer] .cmp-teaser--type-hero-small-logo .cmp-teaser__powerline{margin-top:-12.5rem}

/* Modules */
.contact .wrapper {
    display: flex;
    flex-direction: column;
    gap: 45px;
}

@media only screen and (min-width: 767px) {
    .contact .wrapper {
        flex-direction: row;
        gap: 64px;
    }
}

@media only screen and (min-width: 1080px) {
    .contact .wrapper {
        gap: 120px;
    }
}

.contact-header {
    border-radius: 4px;
    overflow: clip;
    width: 100%;
}

@media only screen and (min-width: 767px) {
    .contact-header {
        max-width: 50%;
    }
}

.contact-header img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.contact hr {
    border: none;
    background-color: var(--primary);
    height: .25rem;
    width: 7.5rem;
    margin-left: 0;
    margin-bottom: 35px;
}

@media only screen and (min-width: 767px) {
    .contact-body {
        padding-top: 64px;
        padding-bottom: 64px;
        max-width: 40%;
    }
}

/* modifiers */

@media only screen and (min-width: 767px) {
    .contact--reversed .wrapper {
        flex-direction: row-reverse;
    }
}

/* contact links */

.contact .contact-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 35px;
}

.contact-links a {
    display: flex;
    gap: 5px;
    align-items: center;
    color: var(--white);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    text-decoration: none;
}

.contact-links a:hover {
    color: var(--primary);
    text-decoration: none;
}

.contact-links a span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #7e8182;
    border-radius: 0.5rem;
}

.contact-links a:hover span {
    background-color: var(--primary);
}

.contact-links a span {
    background-color: #373639;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 1.25rem;
    border-radius: .5rem;
    display: block;
    height: 2rem;
    margin-right: .5rem;
    overflow: hidden;
    position: relative;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    width: 2rem;
}

.contact-links a span.tel {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.235 18.44c-1.347 0-2.67-.21-3.923-.624-.614-.21-1.369-.018-1.744.367l-2.474 1.868c-2.868-1.532-4.635-3.298-6.146-6.145l1.813-2.41c.47-.47.64-1.157.437-1.801a12.51 12.51 0 01-.627-3.93A1.768 1.768 0 009.806 4h-4.04C4.791 4 4 4.792 4 5.765 4 16.923 13.077 26 24.235 26c.973 0 1.765-.792 1.765-1.765v-4.03c0-.973-.792-1.764-1.765-1.764z' fill='%23FFF'/%3E%3C/svg%3E");
}

.contact-links a span.mail {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23FFF' fill-rule='nonzero'%3E%3Cpath d='M18.909 15.123l8.09 5.115V9.792zM3 9.792v10.446l8.091-5.115zM25.5 6.75h-21c-.748 0-1.342.558-1.455 1.276L15 15.904l11.955-7.877c-.112-.718-.706-1.276-1.455-1.276zM17.535 16.03l-2.122 1.397a.75.75 0 01-.825 0l-2.123-1.4-9.417 5.957c.116.713.707 1.266 1.452 1.266h21c.746 0 1.337-.553 1.452-1.266l-9.417-5.955z'/%3E%3C/g%3E%3C/svg%3E");
}

.contact-links a span.linkedin {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.56 11.654H5.263v12.904H9.56zm14.101 1.179c-.902-.985-2.096-1.478-3.58-1.478a5.16 5.16 0 00-1.492.202 3.383 3.383 0 00-1.132.567 5.557 5.557 0 00-.736.677 5.592 5.592 0 00-.508.689v-1.835H11.93l.013.625c.01.417.013 1.701.013 3.854s-.008 4.96-.026 8.424h4.284v-7.2c0-.443.048-.794.143-1.055a2.77 2.77 0 01.827-1.113c.37-.3.827-.45 1.374-.45.747 0 1.296.259 1.647.775.352.517.528 1.23.528 2.142v6.901h4.283v-7.395c0-1.902-.45-3.345-1.354-4.33zM7.437 5.443c-.72 0-1.304.211-1.75.632-.448.42-.671.952-.671 1.595 0 .633.217 1.163.65 1.588.435.426 1.008.638 1.72.638h.025c.73 0 1.318-.212 1.765-.638.447-.425.666-.954.657-1.588-.008-.643-.23-1.174-.664-1.595-.434-.421-1.011-.632-1.732-.632z' fill='%23FFF'/%3E%3C/svg%3E");
}

/* Theme overrides */






:root {
    --primary: #e50043;
    --black: #000000;
    --white: #FFFFFF;
}



























html {
  font-size: 16px default;
}

body {
  font-family: Montserrat, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
  font-size: 16px;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  color: var(--white);
}

@media only screen and (min-width: 768px) {
    body {
        font-size: 16px;
    }
}

/* Paragraphs */

p {
    font-family: Montserrat, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
}

/* Anchors */

a {
    ;
    font-size: ;
    text-decoration: underline;
    color: var(--white);
    transition: all ease-in-out 0.2s;
}

a:hover,
a:focus ,
a:active {
  ;
  text-decoration: underline;
  color: rgba(255,255,255, 0.7);
  transition: all ease-in-out 0.2s;
}

@media only screen and (min-width: 768px) {
    a {
        font-size: ;
    }
}

/* Headings */

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: 600;
}

h1,
.h1 {
    font-family: Montserrat, sans-serif; font-style: normal; font-weight: 600; text-decoration: none;
    font-size: 26px;
    line-height: 1.1;
}

h2,
.h2 {
    font-family: Montserrat, sans-serif; font-style: normal; font-weight: 600; text-decoration: none;
    font-size: 22px;
    line-height: 1.1;
}

h3,
.h3 {
    font-family: Montserrat, sans-serif; font-style: normal; font-weight: 600; text-decoration: none;
    font-size: 22px;
    line-height: 1.1;
}

h4,
.h4 {
    font-family: Montserrat, sans-serif; font-style: normal; font-weight: 600; text-decoration: none;
    font-size: 20px;
    line-height: 1.1;
}

h5,
.h5 {
    font-family: Montserrat, sans-serif; font-style: normal; font-weight: 600; text-decoration: none;
    font-size: 18px;
    line-height: 1.1;
}

h6  
.h6 {
    font-family: Montserrat, sans-serif; font-style: normal; font-weight: 600; text-decoration: none;
    font-size: 18px;
    line-height: 1.1;
}

@media only screen and (min-width: 768px) {
    h1,
    .h1 {

        font-size: 48px;
    }
    
    h2,
    .h2 {
        font-size: 36px;
    }
    
    h3,
    .h3 {
        font-size: 36px;
    }
    
    h4,
    .h4 {
        font-size: 20px;
    }
    
    h5,
    .h5 {
        font-size: 18px;
    }
    
    h6,
    .h6 {
        font-size: 18px;
    }
}

/* Blockquote */

blockquote {
    ;
    font-size: ;
}

@media only screen and (min-width: 768px) {
    blockquote {
        font-size: ;
    }
}

/* Lists */

.post-content__body ul,
.base ul {
  padding-left: 30px;
}

.post-content__body ul li,
.base ul li {
  position: relative;
  gap: 10px;
  list-style: none;
  margin-bottom: 8px;
}

.post-content__body ul li::before,
.base ul li::before {
  content:"";
  position: absolute;
  left: -23px;
  width: 100%;
  max-width: 14px;
  height: 14px;
  background-color: white;
  margin-top: 3px;
}

.post-content__body .popup-form ul li::before,
.base .popup-form ul li::before {
    content: none;
    display: none;
}

.post-content__body .popup-form .inputs-list,
.base .popup-form .inputs-list,
.post-content__body .popup-form .inputs-list.multi-container,
.base .popup-form .inputs-list.multi-container {
    margin-top: 10px;
    padding-left: 0;
}



.blog-post .buttons.base .wrapper,
.buttons.base .wrapper { 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 25px;
    flex-wrap: wrap;
}

@media only screen and (min-width: 768px) {
    .blog-post .buttons.base .wrapper,
    .buttons.base .wrapper { 
        display: flex;
        gap: 25px;
        flex-wrap: wrap;
    }
}



.btn,
.cta_button span {
    padding: 16px 64px !important;
    border-radius: 4px !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 18px !important;

    display: inline-flex !important;
    margin-top: 25px !important;
    width: 100% !important;
    height: auto !important;
    text-decoration: none !important;
    justify-content: center;
    text-align: center;
}

@media only screen and (min-width: 568px) {
    .btn,
    .cta_button span {
        width: auto !important;
    }
}

form input[type=submit],
form .hs-button, 
.btn-1,
.cta_button span {
    background-color: #0d9be2 !important;
    border: 1px solid #0d9be2 !important;
    color: #ffffff !important;
    transition: all ease-in-out 0.3s !important;
}

form input[type=submit]:hover,
form .hs-button:hover,
.btn-1:hover,
.cta_button span:hover {
    background-color: rgba(95, 202, 255, 1) !important;
    border: 1px solid rgba(95, 202, 255, 1) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}



/* @font-face {
    font-family: 'Test';
    src: url('https://www.cideon.blog/hubfs/Blog/fonts/montserrat-regular.woff2') format('woff2'),
        url('https://www.cideon.blog/hubfs/Blog/fonts/montserrat-regular.woff') format('woff'),
        url('https://www.cideon.blog/hubfs/Blog/fonts/montserrat-regular.ttf') format('ttf'),
        url('https://www.cideon.blog/hubfs/Blog/fonts/montserrat-regular.eot') format('eot');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: "test", Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.4
}

p,span, ul li {
    font-family: "test", Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.4
}

a {
    font-family: "test", Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.4
}

blockquote {
    font-family: "test", Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.4
}

h1, .h1 {
    font-family: "test", Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.1
}

h2, .h2 {
    font-family: "test", Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.1
}

h3, .h3 {
    font-family: "test", Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.1
}

h4, .h4 {
    font-family: "test", Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.1
}

h5, .h5 {
    font-family: "test", Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.1
}

h6, .h6 {
    font-family: "test", Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.1
} */