/*#region Variables (2026 Standard) */
:root {
  --color-white: #fff;
  --color-bg-light: #f6f6f6;
  --color-bg-dark: #11142b;
  --color-text: #484848;
  --color-primary: #37d9bd;
  --color-gradient-start: #0ecfad;
  --color-gradient-end: #0c4f9a;
  
  --gradient-main: linear-gradient(-45deg, var(--color-gradient-end), var(--color-gradient-start));
  --gradient-hover: linear-gradient(-45deg, var(--color-gradient-start), var(--color-gradient-end));
  
  --shadow-sm: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
  
  --radius-lg: 20px;
  --radius-md: 10px;
  --radius-sm: 5px;
}
/*#endregion*/

/*#region Fonts*/
@font-face { font-family: "Exo 2"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/exo-2-v20-latin-300.eot"); src: local(""), url("../fonts/exo-2-v20-latin-300.eot?#iefix") format("embedded-opentype"), url("../fonts/exo-2-v20-latin-300.woff2") format("woff2"), url("../fonts/exo-2-v20-latin-300.woff") format("woff"), url("../fonts/exo-2-v20-latin-300.ttf") format("truetype"), url("../fonts/exo-2-v20-latin-300.svg#Exo2") format("svg"); }
@font-face { font-family: "Exo 2"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/exo-2-v20-latin-regular.eot"); src: local(""), url("../fonts/exo-2-v20-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/exo-2-v20-latin-regular.woff2") format("woff2"), url("../fonts/exo-2-v20-latin-regular.woff") format("woff"), url("../fonts/exo-2-v20-latin-regular.ttf") format("truetype"), url("../fonts/exo-2-v20-latin-regular.svg#Exo2") format("svg"); }
@font-face { font-family: "Exo 2"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/exo-2-v20-latin-500.eot"); src: local(""), url("../fonts/exo-2-v20-latin-500.eot?#iefix") format("embedded-opentype"), url("../fonts/exo-2-v20-latin-500.woff2") format("woff2"), url("../fonts/exo-2-v20-latin-500.woff") format("woff"), url("../fonts/exo-2-v20-latin-500.ttf") format("truetype"), url("../fonts/exo-2-v20-latin-500.svg#Exo2") format("svg"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-v25-latin-500.eot"); src: local(""), url("../fonts/montserrat-v25-latin-500.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat-v25-latin-500.woff2") format("woff2"), url("../fonts/montserrat-v25-latin-500.woff") format("woff"), url("../fonts/montserrat-v25-latin-500.ttf") format("truetype"), url("../fonts/montserrat-v25-latin-500.svg#Montserrat") format("svg"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-v25-latin-700.eot"); src: local(""), url("../fonts/montserrat-v25-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat-v25-latin-700.woff2") format("woff2"), url("../fonts/montserrat-v25-latin-700.woff") format("woff"), url("../fonts/montserrat-v25-latin-700.ttf") format("truetype"), url("../fonts/montserrat-v25-latin-700.svg#Montserrat") format("svg"); }
/*#endregion*/

/*#region General*/
html {
  background: transparent;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: visible;
  line-height: 1.75;
}

body {
  position: relative;
  background-color: var(--color-bg-light);
  overflow: hidden;
  min-height: 100vh;
}

a, .uk-link {
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: color .15s ease-out;
}

main { margin-top: -100px; }
button:hover { cursor: pointer; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.25; }
h1 { font-size: 3.25rem; }
h2 { font-size: 2.75rem; }
h3 { font-size: 2.5rem; }
h4 { font-size: 2.1875rem; line-height: 1.2; }
h5 { font-size: 1.375rem; line-height: 1.45; }
h6 { font-size: 1.5625rem; line-height: 1.4; }

.tm-heading {
  & h1 { font-size: 4rem; }
  & h2 { font-size: 3rem; }
  & h3 { font-size: 2.5rem; }
}

footer a { color: var(--color-text); }
/*#endregion*/

/*#region Page*/
.page { scrollbar-width: none; }
.uk-container { max-width: 1400px; }

.myleo-grid-item {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.mr-50px { margin-right: 50px; }
.ml-50px { margin-left: 50px; }
myleo-button > * { white-space: nowrap; }
.text-center { text-align: center; }

.media-video, .media-video-center {
  position: absolute;
  width: 100%;
  color: var(--color-white);
  & * { color: var(--color-white); }
}
.media-video { bottom: 25px; }
.media-video-center { bottom: 40px; }

.media-video-wrapper {
  position: relative;
  margin-inline: auto;
  width: 1920px;
}

.uk-section-secondary, .uk-section-wallpaper {
  color: var(--color-white);
  background-color: var(--color-bg-dark);
}
.uk-section-wallpaper * { color: var(--color-white); }

.uk-section-header {
  background-color: var(--color-bg-dark);
  background-image: url(/content/home/myleodsc_home_bg_header_01.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.uk-section-wallpaperspediteur {
  color: var(--color-white);
  background-image: url("../img/wallpaperspediteur.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position-y: 0%;
}

.uk-width-2-3\@m .float-image { margin-right: calc((100% / 3.001) / -2); }
.uk-first-column.uk-width-2-3\@m .float-image { margin-left: calc((100% / 3.001) / -2); }

#myleo-footer {
  padding: 40px;
  font-size: 14px;
  background: var(--color-white);
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.001), 0 0px 35px 0 rgba(0, 0, 0, 0.02);
}

.uk-section-default { background: transparent; }
.uk-hidden-small { display: block; }
.uk-visible-small { display: none; }

.myleo-white-bg .uk-container {
  margin-top: 40px;
  padding-block: 40px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
}

.myleo-white-bg-tile {
  margin-inline: 10px;
  padding: 25px;
  text-align: center;
  background: var(--color-white);
  border-radius: var(--radius-lg);
}

.uk-background-video { position: relative; background: transparent; }

.myleo-white-bg-tiles .uk-grid-margin {
  width: 30% !important;
  text-align: center;
  margin-right: 40px;
  padding-left: 0;
  padding-block: 40px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
}

/*#region Wave Option */
.wave_none #wave-top { display: none; }

.wave_small #wave-top, .wave_large #wave-top {
  content: " ";
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 585px;
  background: transparent url("../img/wave_default.svg") bottom center no-repeat;
  background-size: 4000px;
  z-index: -100;
}

.wave_large #wave-top { height: 1035px; }

:is(#page-contact, #page-search).wave_large #wave-top {
  height: 1235px;
  top: -111px;
}

.wave_small .page main { margin-top: 0px; }

#wave-bottom {
  content: " ";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1000px;
  background: transparent url("../img/wave_bottom.svg") top center no-repeat;
  background-size: cover;
  pointer-events: none;
  z-index: -1;
  display: none;
}

.scrolled #wave-bottom { display: block; }

@media (width <= 960px) {
  .wave_large .page section:first-of-type {
    margin-bottom: 25px;
    padding-bottom: 0;
    background: rgba(17, 20, 43, 1);
  }
}
/*#endregion */

/*#region Navigation (Nested & Modern) */
body.uk-offcanvas-container {
  overflow: hidden !important;
  & [uk-sticky] { width: 100% !important; }
}

.uk-sticky {
  & .myleo-submenu::after {
    margin-left: 10px;
    width: 14px;
    height: 14px;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22rgba%28255,255,255,0.75%29%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E');
    background-repeat: no-repeat;
  }
  
  & .uk-navbar-nav > li > a::after { content: ""; }
  & [class*="uk-drop-bottom"] { margin-top: 0; }

  & a, 
  & .uk-navbar-nav > li > a, 
  & .uk-navbar-dropdown-nav, 
  & .uk-navbar-dropdown-nav > li > a {
    color: var(--color-white);
    font-size: 14px;
    text-transform: uppercase;
  }

  & a:hover,
  & .uk-navbar-nav > li > a:hover,
  & .uk-navbar-dropdown-nav > li > a:hover,
  & li.uk-active,
  & li.uk-nav-header {
    color: var(--color-primary);
  }

  & .uk-navbar-dropdown-nav > li > a { text-transform: none; }
  
  & .uk-sticky-fixed,
  & .uk-navbar-container {
    color: var(--color-white);
    background-color: transparent;
  }

  & .uk-navbar-container.uk-navbar-sticky,
  & .uk-navbar-dropdown {
    background-color: rgba(42, 44, 59, 0.95);
  }

  & .uk-navbar-container .uk-navbar-dropdown {
    padding: 15px 25px;
    border-radius: var(--radius-lg);
  }

  & .uk-button.uk-button-primary {
    padding: 0 20px;
    line-height: 29px;
    &:hover { color: var(--color-white); }
  }

  & .uk-button.uk-button-secondary {
    padding: 0 16px;
    line-height: 25px;
  }

  & a .subline,
  & .uk-navbar-nav > li > a .subline,
  & .uk-navbar-dropdown-nav .subline,
  & .uk-navbar-dropdown-nav > li > a .subline {
    font-size: 11px;
  }
}

#page-search .uk-navbar-container { background-color: rgba(42, 44, 59, 0.95); }

.uk-navbar-dropdown.uk-drop.uk-drop-boundary.uk-open.uk-drop-bottom-center,
.uk-navbar-dropdown.uk-open.uk-navbar-dropdown-bottom-left {
  margin-top: 20px;
}

.uk-button-secondary { border: 2px solid var(--color-primary); }

myleo-button {
  & .myleo-active { font-weight: bold; color: var(--color-white); }
  & .myleo-inactive { color: rgba(255, 255, 255, 0.5); }
}

@media (width <= 500px) { .uk-offcanvas-bar { width: 100%; } }

.uk-offcanvas-bar {
  & li > a { font-size: 16px; }
  & .uk-nav-sub li {
    & > a { font-size: 14px; text-transform: none; }
    &.uk-nav-header { color: var(--color-primary); }
  }
}
/*#endregion */

.highlight, .myleo-product-divider { color: var(--color-primary) !important; }

.myleo-separator, .myleo-separator-white, .myleo-separator-event {
  position: relative;
  height: 1px;
  display: inherit;
  background: var(--color-gradient-start);
  margin: 20px auto;
}

.myleo-separator {
  width: 160px;
  height: 4px;
  background: var(--gradient-hover);
}

.myleo-separator-white { width: 120px; }
.myleo-separator-event { width: 100%; }

.myleo-blog-categories {
  margin-top: 50px;
  text-align: center !important;
  gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  
  &.uk-subnav-divider > :nth-child(n + 2):not(.uk-first-column)::before {
    border-left-color: transparent;
  }
  
  & sup { display: none; }
  
  & .uk-button {
    padding: 0 16px;
    background: var(--color-white);
    font-size: 0.85rem;
    font-weight: bold;
    line-height: 25px;
    text-transform: uppercase;
    border-color: #747474;
    color: #747474;
    
    &:hover { border-color: var(--color-primary); color: var(--color-primary); }
    &.active { color: var(--color-white); background-color: var(--color-primary); border-color: var(--color-primary); }
  }
}

.myleo-blog-head-container { margin-top: 60px; }

.myleo-process-title {
  display: block;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--color-primary) !important;
  letter-spacing: 2px;
}

.myleo-blog-title {
  padding-inline: 10px;
  font-size: 2.625rem;
  line-height: 1.2;
  color: var(--color-white);
  
  &.new {
    margin: -15px 0 20px 0;
    padding-inline: 0;
  }
}

.myleo-blog-estimate, .myleo-blog-date, .myleo-blog-share a, .myleo-blog-author { color: var(--color-white); }
.myleo-blog-date, .myleo-blog-author span { font-weight: bold; }

.myleo-blog-estimate {
  margin-bottom: 15px;
  & span {
    padding: 0 10px 10px 0;
    font-size: 14px;
    line-height: 28px;
    border-bottom: 1px solid var(--color-primary);
  }
}

.myleo-close-catergory { margin-right: 5px; font-weight: normal; }

.myleo-article-title {
  display: block;
  margin: 0;
  font-size: 14px;
  line-height: 28px;
  font-weight: normal;
  text-transform: uppercase;
  color: var(--color-primary) !important;
}

.myleo-page-separator {
  position: relative;
  width: 40px;
  height: 4px;
  display: inherit;
  background: var(--gradient-main);
  margin: 20px auto 60px auto;
}

.myleo-product-bold { font-family: "Exo 2", sans-serif; font-weight: 500 !important; }
.myleo-product-thin { font-family: "Exo 2", sans-serif; font-weight: 300 !important; }

:is(h1, h2, h3, h4, h5, h6).myleo-headline-gradient,
:is(h1, h2, h3, h4, h5, h6) span.myleo-headline-gradient,
.myleo-headline-gradient :is(h1, h2, h3, h4, h5, h6) {
  background: linear-gradient(45deg, var(--color-gradient-start), var(--color-gradient-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.myleo-home h1 { font-size: 3em; }
.wave_large main section:nth-of-type(1) * { color: var(--color-white); }
.myleo-client { display: block; margin: 0; font-size: 14px; line-height: 22px; font-weight: normal; }

@media (width <= 768px) {
  h1, h2, h3, h4 { font-size: 26px; line-height: 36px; }
  h5, h6 { font-size: 1.25rem; line-height: 1.55; }
  .myleo-process-title { font-size: 14px; }
  blockquote { font-size: 1.2rem; line-height: 1.2; }
}

/* Buttons */
.uk-button { transition: all 0.2s ease-in-out !important; }

.uk-button-primary {
  display: inline-block;
  position: relative;
  font-size: 14px;
  color: var(--color-white);
  font-weight: 700;
  text-transform: uppercase;
  background: var(--gradient-main);
  background-size: 100%;
  cursor: pointer;
  border: 0px;
  z-index: 100;
  padding: 16px 32px;
  line-height: 1.5;
  
  &::before {
    display: block;
    position: absolute;
    inset: 0;
    background: var(--gradient-hover);
    content: "";
    opacity: 0;
    z-index: -100;
    transition: opacity 0.45s;
    border-radius: inherit;
  }
  
  &:hover::before { opacity: 1; }
}

.uk-button-secondary {
  display: inline-block;
  position: relative;
  font-size: 14px;
  color: var(--color-white);
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 100;
  padding: 16px 32px;
  line-height: 1.5;

  &::before {
    display: block;
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0;
    z-index: -100;
    background-color: #3c4377;
    transition: opacity 0.45s;
    border-radius: inherit;
  }
  
  &:hover, &:focus { background-color: #3c4377; color: var(--color-white); }
}

/* Form (Nested) */
.myleo-form-style {
  & input, & textarea, & select {
    margin-bottom: 40px;
    padding: 19px 20px;
    width: 100%;
    height: 100%;
    font-size: 16px;
    background: var(--color-white);
    border: 0px;
    box-sizing: border-box;
    border-radius: var(--radius-md);
    outline: none;
    box-shadow: var(--shadow-sm) !important;
    
    &:focus { box-shadow: var(--shadow-md) !important; }
  }

  & select {
    height: auto !important;
    font-weight: bold;
    appearance: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='black'><polygon points='0,0 8,0 4,4'/></svg>") no-repeat scroll 85% 60% var(--color-white);
  }

  & input::placeholder { font-weight: 700; color: var(--color-text); }
  & textarea::placeholder { color: var(--color-text); }

  & .checkbox {
    display: block;
    position: relative;
    margin-bottom: 12px;
    padding-left: 35px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;

    & input {
      position: absolute;
      width: 0;
      height: 0;
      opacity: 0;
      cursor: pointer;

      &:checked ~ .checkmark {
        background-color: var(--color-text);
        &::after { display: block; }
      }
    }

    & .checkmark {
      position: absolute;
      top: 0; left: 0;
      width: 25px; height: 25px;
      background-color: var(--color-white);
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-sm) !important;
      
      &::after {
        display: none;
        position: absolute;
        content: "";
        top: 4px; left: 9px;
        width: 5px; height: 10px;
        border: solid var(--color-white);
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
      }
    }

    &:hover input ~ .checkmark { background-color: var(--color-white); }
  }
}

/* popup */
#popup, #newsletter {
  position: fixed;
  padding: 35px 25px 15px 25px;
  bottom: 25px;
  right: 25px;
  z-index: 999;
  width: 280px;
  font-family: "Montserrat", sans-serif !important;
  color: var(--color-white);
  font-weight: 500;
  text-align: center;
  background: transparent url("../img/bg_newsletter.jpg") center center no-repeat;
  background-size: cover;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08), 0 2px 5px 0 rgba(0, 0, 0, 0.04);
  
  &.hide { display: none; }
  & h5 { margin-top: 15px; color: var(--color-white); }
  & a { margin: 25px 0; }
  
  & .popup-text, & .newsletter-text {
    position: relative;
    margin: 0 auto;
  }
  
  & #close-popup, & #close-newsletter {
    position: absolute;
    top: -15px;
    right: -5px;
    width: 15px;
    height: 15px;
    color: var(--color-white);
    cursor: pointer;
    background: transparent url("../img/icons/close.svg") center center no-repeat;
    background-size: cover;
  }
}

#newsletter {
  text-align: left;
  background: #f52561;
  & h4 { color: var(--color-white); }
  & #close-newsletter { top: -53px; }
}

/* Articles */
.myleo-blog-header { margin-top: 55px; }

.myleo-article {
  & .uk-card { border-radius: var(--radius-lg); margin-bottom: 40px; }
  
  & .uk-card-body, & .uk-card-project {
    padding: 2.5rem;
    background-color: var(--color-white);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin-top: 20px;
  }
  
  & .uk-card-project { border-radius: var(--radius-lg); }
  
  & .uk-card-footer {
    padding: 1rem 2.5rem 2.5rem 2.5rem;
    background-color: var(--color-white);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  & .uk-card-media-top, & .uk-card-media-top img { border-radius: var(--radius-lg); }
  & .uk-card-media-left, & .uk-card-media-left img { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
  & .uk-card-media-right, & .uk-card-media-right img { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
  
  & .uk-card h2 {
    font-size: clamp(1.4rem, 2vw, 1.75rem) !important;
    line-height: 32px;
    hyphens: auto;
    margin-top: 0;
  }
  
  & .uk-section-small { margin-top: 35px; }
}

#page-career .myleo-article .uk-card {
  & h2 { font-size: 1.25rem !important; }
  & .quote {
    font-size: 150px;
    font-weight: 700;
    line-height: 0px;
    color: #86ecf700;
    -webkit-text-stroke: 2px var(--color-primary);
    padding-bottom: -140px;
  }
}

/* Footer */
#myleo-footer {
  & .uk-nav-header { font-weight: bold; }
  & .uk-logo-footer { padding-left: 0; justify-content: left; min-height: auto; }
  & .uk-button.footer-right, & .footer-right {
    float: right;
    margin-left: 20px;
    padding-block: 10px;
  }
}

/* Accordion */
.uk-accordion {
  margin: 0 auto;
  padding-bottom: 20px;
  border-bottom: 1px solid #d8d8d8;
}

.uk-accordion-title {
  border-top: 1px solid #d8d8d8;
  font-weight: bold;
  padding-top: 40px;
  padding-bottom: 15px;
  
  &::before {
    content: "";
    width: 1.4em; height: 1.4em;
    margin-left: 10px; margin-right: 00px;
    float: right;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: var(--color-bg-light);
    border-radius: 50%;
  }
}

.uk-open > .uk-accordion-title::before {
  background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E');
}

.UserLogoGrid {
  --gridColumnCount: 5;
  --gridRowGap: 60px;
  display: grid;
  grid: auto/repeat(var(--gridColumnCount), 1fr);
  place-items: center;
  row-gap: var(--gridRowGap);
}

/* List (Nested & Modernized) */
ol, ul {
  &.is-style-check-list {
    padding-left: 0.5rem;
    & > li {
      align-items: baseline; display: block; line-height: 28px;
      padding-bottom: 0.5rem; padding-left: 1.5em; padding-top: 0.6rem;
      position: relative; width: 100%;
      
      &::before {
        background: var(--gradient-main);
        content: ""; display: block; flex-shrink: 0;
        height: 1.25em; width: 1em; left: 0; margin-right: 0.5rem;
        mask-image: url(../img/sprite.svg?#check-usage);
        position: absolute; top: 0.75rem; font-weight: bold;
      }
    }

    &.arrow > li::before { mask-image: url(../img/sprite.svg?#arrow-usage); }
    &.buffer > li::before { mask-image: url(../img/sprite.svg?#buffer-usage); }
    &.check > li::before { mask-image: url(../img/sprite.svg?#check-usage); }
    &.chevron-large > li::before { mask-image: url(../img/sprite.svg?#chevron-large-usage); }
    &.chevron-right > li::before { mask-image: url(../img/sprite.svg?#chevron-right-usage); }
    &.cross > li::before { mask-image: url(../img/sprite.svg?#cross-usage); }
    &.email > li::before { mask-image: url(../img/sprite.svg?#email-usage); }
    &.external > li::before { mask-image: url(../img/sprite.svg?#external-usage); }
    &.globe > li::before { mask-image: url(../img/sprite.svg?#globe-usage); }
    &.hamburger > li::before { mask-image: url(../img/sprite.svg?#hamburger-usage); }
    &.link > li::before { mask-image: url(../img/sprite.svg?#link-usage); }
    &.map-marker > li::before { mask-image: url(../img/sprite.svg?#map-marker-usage); }
    &.padlock-locked > li::before { mask-image: url(../img/sprite.svg?#padlock-locked-usage); }
    &.padlock-unlocked > li::before { mask-image: url(../img/sprite.svg?#padlock-unlocked-usage); }
    &.play > li::before { mask-image: url(../img/sprite.svg?#play-usage); }
    &.search > li::before { mask-image: url(../img/sprite.svg?#search-usage); }
    &.share > li::before { mask-image: url(../img/sprite.svg?#share-usage); }
    &.star > li::before { mask-image: url(../img/sprite.svg?#star-usage); }
    &.user > li::before { mask-image: url(../img/sprite.svg?#user-usage); }
  }

  &.is-style-check-standard {
    padding-left: 1.5rem;
    & > li {
      align-items: baseline; line-height: 28px;
      padding-bottom: 0.5rem; padding-left: 0.5em; padding-top: 0.6rem;
      position: relative; width: 100%;
    }
  }
}

/* Timeline */
.timeline {
  position: relative;
  margin: 0 auto;
  & * { box-sizing: border-box; }
  
  &::after {
    content: ""; position: absolute;
    width: 6px; background-color: var(--color-white);
    top: 0; bottom: 0; left: 50%; margin-left: -3px;
  }
  
  & .container {
    padding: 10px 40px; position: relative;
    background-color: inherit; width: 50%;
    
    &::after {
      content: ""; position: absolute;
      width: 25px; height: 25px; right: -17px;
      background-color: var(--color-white);
      border: 4px solid var(--color-primary);
      top: 15px; border-radius: 50%; z-index: 1;
    }
  }

  & .left { left: 0; }
  & .right { left: 50%; }

  & .left::before, & .right::before {
    content: " "; height: 0; position: absolute;
    top: 22px; width: 0; z-index: 1; border: medium solid var(--color-white);
  }

  & .left::before {
    right: 30px;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent var(--color-white);
  }

  & .right::before {
    left: 30px;
    border-width: 10px 10px 10px 0;
    border-color: transparent var(--color-white) transparent transparent;
  }

  & .right::after { left: -16px; }

  & .content {
    padding: 20px 30px;
    background-color: var(--color-white);
    position: relative;
    border-radius: 6px;
  }
}

@media screen and (width <= 600px) {
  .timeline {
    &::after { left: 31px; }
    & .container {
      width: 100%;
      padding-left: 70px;
      padding-right: 25px;
      &::before {
        left: 60px; border: medium solid var(--color-white);
        border-width: 10px 10px 10px 0;
        border-color: transparent var(--color-white) transparent transparent;
      }
    }
    & .left::after, & .right::after { left: 15px; }
    & .right { left: 0%; }
  }

  .UserLogoGrid { --gridColumnCount: 2; }
}

/* Contact Badge */
.contact-badge {
  position: fixed;
  top: 125px; right: 0;
  height: 200px; width: 60px;
  background: var(--color-primary);
  cursor: pointer; z-index: 999;
  
  & a {
    position: relative;
    top: 70px; right: 70px;
    display: block;
    width: 200px; height: 60px;
    color: var(--color-white);
    font-size: 21px; line-height: 65px;
    text-align: center; text-transform: uppercase;
    font-weight: 700;
    transform: rotate(270deg);
  }
}

@media screen and (width <= 600px) { .contact-badge { display: none; } }

/** login **/
html:has(#search-modal.open) { overflow: hidden; }

.btn-login, .btn-close, .btn-search {
  background: transparent;
  border-color: transparent;
  color: var(--color-white);
  display: inline-flex;
}

.btn-login > svg, .btn-search > svg { width: 1.25rem; height: 1.25rem; }
.btn-close > svg { width: 2.25rem; height: 2.25rem; }

#page-search {
  & .search-result {
    text-align: left;
    & .description > * { all: unset; }
    & .description strong { font-weight: normal; }
    & + .search-result { margin-top: 1.5rem; }
    & h3 { font-size: 1.5rem; color: var(--color-primary); margin-bottom: 0; }
    & .description { max-height: 3.25rem; overflow: hidden; }
  }
  & main input[type="search"] { background-color: #eee; font-size: 1.75rem; height: 4.25rem; padding: 0 1rem; }
  & main .uk-search-icon-flip { background-color: #ddd; width: 60px; cursor: pointer; }
}

#search-modal {
  display: grid;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(3px);
  color: var(--color-white);
  z-index: 999;
  height: 100vh;
  transform: scale(0);
  transition: transform 155ms, opacity 330ms;
  opacity: 0;
  
  &.open {
    place-items: center;
    transform: scale(1);
    opacity: 1;
    backdrop-filter: blur(5px);
    z-index: 99999;
  }
  
  & > .btn-close { position: absolute; top: 1rem; right: 1rem; }
  
  & form {
    & input { color: var(--color-white); }
    & input::placeholder { color: #ccc; }
    & button { align-self: center; }
    & .uk-flex { gap: 1rem; }
  }
}

.leo-sidemenu { opacity: 0; }

body[id^="page-news"] {
  & h1, & h2, & h3, & h4, & h5, & h6 { line-height: 1.25 !important; }
  & h1, & h2 { font-weight: 700 !important; }
  & h3, & h4, & h5, & h6 { font-weight: 300 !important; }
  & h1 { font-size: clamp(1.5rem, 5vw, 2.5rem) !important; }
  & h2 { font-size: clamp(1.4rem, 2vw, 2rem) !important; }
  & h3 { font-size: clamp(1.33rem, 5vw, 1.55rem) !important; }
  & h4 { font-size: clamp(1.25rem, 5vw, 1.4rem) !important; }
  & h5, & h6 { font-size: clamp(1.1rem, 5vw, 1.35rem) !important; }
}

.leo-card-item {
  display: table;
  height: 600px;
  overflow: hidden;
  padding: 75px;
}

/** leo-slider overlay **/
.swiffy-slider-cover-overlay { position: absolute !important; top: 45vh; }

/** Leo ticker **/
@keyframes sliding-band {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - 2rem)); }
}

.leo-ticker {
  display: flex; flex-direction: column; gap: 2rem;
  position: absolute; top: 0; left: 0; right: 0;
  
  & > * > * { display: flex; flex-wrap: nowrap; flex-grow: 1; flex-shrink: 0; gap: 2rem; }
  
  & .leo-top-ticker > * { animation: sliding-band 30s infinite linear; }
  & .leo-top-ticker > * > * {
    padding: 10px 32px; text-transform: uppercase;
    background-blend-mode: overlay;
    font-size: clamp(0.5rem, 0.7vw, 1.25rem);
    font-weight: bold; border-radius: 50px;
    border: 2px solid var(--color-primary); letter-spacing: 1px;
  }
}

.leo-top-ticker, .leo-bottom-ticker { display: flex; gap: 2rem; }
.leo-bottom-ticker > * { animation: sliding-band 60s infinite linear; }
.leo-bottom-ticker > * > * {
  padding: 10px 32px; text-transform: uppercase;
  background-blend-mode: overlay; font-size: clamp(0.5rem, 0.7vw, 1.25rem);
  font-weight: bold; border-radius: 50px;
  border: 2px solid var(--color-primary); letter-spacing: 1px;
}

.leo-ticker-logo {
  display: flex; flex-direction: column; position: relative;
  & > * > * { display: flex; flex-wrap: nowrap; flex-grow: 5; flex-shrink: 0; gap: 2rem; align-items: center; text-align: center; }
  & .leo-top-ticker-logo > * { animation: sliding-band 30s infinite linear; }
  & .leo-top-ticker-logo > * > * { padding: 10px 32px; }
}

.leo-top-ticker-logo { display: flex; gap: 2rem; }

@media (width <= 1240px) { .uk-navbar-right .btn-login { display: none; } }
@media (width <= 1140px) { .uk-navbar-right .btn-search { display: none; } }

@media (width <= 960px) {
  .uk-navbar-right .btn-search { display: block; }
  .uk-sticky-fixed { z-index: 9999 !important; }

  #offcanvas .uk-offcanvas-bar {
    padding: 99px 0 1rem 0;
    background-color: rgba(42, 44, 59, 0.95);
    backdrop-filter: blur(2px);
    overflow: hidden;
  }

  .scrolled #offcanvas .uk-offcanvas-bar { top: 99px; padding: 0; }

  .leo-sidemenu {
    position: relative; height: 100%; opacity: 1;
    
    & ul { list-style: none; padding-left: 0; margin: 0; }
    & > * { transition: all 330ms; width: 100%; position: absolute; top: 0; }
    & ul li { line-height: 1.2; }
    
    & ul li.uk-parent, & ul li > a {
      padding: 1rem; display: flex; align-items: center;
      justify-content: space-between; color: #f3f3f3;
      font-weight: bold; gap: 1rem;
    }
    
    & ul li.uk-parent [uk-icon] { flex-shrink: 0; }
    
    & [data-page] > p {
      color: var(--color-white); font-weight: bold; margin: 0; padding: 1rem; cursor: pointer;
      border: 2px solid rgba(255, 255, 255, 0.15); border-left: 0; border-right: 0;
      &:hover { background-color: rgba(255, 255, 255, 0.15); }
      & * { pointer-events: none; }
    }
    
    & ul li.uk-parent * { pointer-events: none; }
    
    & ul li > a {
      width: 100%; padding: 1rem; display: flex; align-items: center;
      justify-content: space-between; box-sizing: border-box;
      &:hover { color: var(--color-primary); }
      & span:last-child { flex-shrink: 0; }
    }
    
    & ul li .subtitle { font-size: 12px; color: #fefefe; font-weight: normal; }
    & ul li:hover { cursor: pointer; background-color: rgba(255, 255, 255, 0.15); }
    & ul li .myleo-active { color: var(--color-primary); }
    
    & [data-page="1"] { transform: translateX(calc(-100%)); }
    & [data-page="2"] { transform: translateX(calc(100% + 50px)); }
    & [data-page="2"].left { transform: translateX(calc(-100% - 50px)); }
    & [data-page="3"] { transform: translateX(calc(100% + 50px)); }
    & [data-page="1"].active, & [data-page="2"].active, & [data-page="3"].active { transform: translateX(0); }
  }

  button.uk-navbar-item:hover { color: var(--color-primary); }

  .image-grid .uk-grid.uk-grid-stack > div > div { margin-left: 0 !important; }
  .image-grid .uk-grid.uk-grid-stack img { width: 100%; }
  .myleo-grid-item.ml-50px { margin-left: 0; }
  .myleo-grid-item.mr-50px { margin-right: 0; }
  #next myleo-feature-list { margin-top: 2rem; }
}

@media (width <= 640px) {
  #myleo-footer .uk-button.footer-right,
  #myleo-footer .footer-right { float: left !important; margin-left: 0 !important; }
  #wave-bottom, .uk-hidden-small { display: none; }
  .uk-visible-small { display: block; }
  .leo-card-item { padding: 2rem; }
  .tm-heading h1 { font-size: 1.45rem; }
  .tm-heading h2 { font-size: 1.35rem; }
  .tm-heading h3 { font-size: 1.25rem; }
}

@media (width <= 390px) { .uk-navbar-right .btn-search { display: none; } }

/**#region Slider**/
.slider-container {
  padding: 1rem; box-sizing: border-box;
  & > * { width: 100%; height: 100%; justify-content: space-between; }
  
  & .slider-container-item-content {
    flex-grow: 1;
    & .myleo-process-title { font-size: 0.85rem; margin: 0; }
    & h3 { font-size: 1.33rem; margin: 0; }
    & h3 + p { flex-grow: 1; }
    & myleo-button > * { white-space: nowrap; }
  }
  
  & > * > picture {
    width: 30%; flex-shrink: 0; height: 100%;
    & img { object-fit: cover; height: 100%; }
  }
}

/** new contact form **/
h3.with-select {
  max-width: 100%; box-sizing: border-box;
  & .myleo-headline-gradient { position: relative; display: flex; }
}

.myleo-select-inherit {
  appearance: none; background: transparent; border: none; color: inherit;
  filter: none; font-weight: inherit; max-width: 100%; overflow: hidden;
  padding-right: 3rem; white-space: normal; font: inherit; font-size: 2rem;
  
  & + .select-chevron {
    position: absolute; width: 2rem; color: black; right: 0;
    top: 50%; transform: translate(0, -50%); z-index: -1;
    pointer-events: none; display: block;
  }
  
  & > option { font-size: 1rem; color: black; font-weight: normal; }
}

.uk-form-danger { outline: 1px solid red !important; }

.myleo-form-success {
  display: flex; align-items: center; justify-content: center;
  & svg {
    color: green; background-color: hsl(120, 70%, 90%);
    padding: 0.5rem; border-radius: 50%; width: 2rem;
    height: 2rem; box-sizing: content-box;
  }
}

.hon { position: absolute; inset: 0; height: 0; width: 0; opacity: 0; z-index: -1; }

@media (width <= 1024px) { .slider-container li picture { display: none; } }
/**#endregion**/

/**#header Slider**/
.text-fader {
  & .text-content {
    font-size: 3em; font-weight: bold; color: var(--color-white);
    
    & span.line {
      opacity: 0; animation-fill-mode: forwards;
      animation-timing-function: ease; animation-duration: 0.8s; display: none;
    }
    
    & span.colour .letter { color: var(--color-white); transition: all 0.1s ease; }
    
    &.in span.line { animation-name: textFaderIn; display: block; }
    &.in span.colour.go .letter { color: var(--color-primary); }
    
    /* Using native nesting for child delays */
    &.in span.colour.go {
      & .letter:nth-child(1) { transition-delay: 0.04s; }
      & .letter:nth-child(2) { transition-delay: 0.08s; }
      & .letter:nth-child(3) { transition-delay: 0.12s; }
      & .letter:nth-child(4) { transition-delay: 0.16s; }
      & .letter:nth-child(5) { transition-delay: 0.20s; }
      & .letter:nth-child(6) { transition-delay: 0.24s; }
      & .letter:nth-child(7) { transition-delay: 0.49s; }
      & .letter:nth-child(8) { transition-delay: 0.56s; }
      & .letter:nth-child(9) { transition-delay: 0.63s; }
      & .letter:nth-child(10) { transition-delay: 0.7s; }
      & .letter:nth-child(11) { transition-delay: 0.77s; }
      & .letter:nth-child(12) { transition-delay: 0.84s; }
      & .letter:nth-child(13) { transition-delay: 0.91s; }
      & .letter:nth-child(14) { transition-delay: 0.98s; }
      & .letter:nth-child(15) { transition-delay: 1.05s; }
      & .letter:nth-child(16) { transition-delay: 1.12s; }
      & .letter:nth-child(17) { transition-delay: 1.19s; }
      & .letter:nth-child(18) { transition-delay: 1.26s; }
      & .letter:nth-child(19) { transition-delay: 1.33s; }
      & .letter:nth-child(20) { transition-delay: 1.4s; }
      & .letter:nth-child(21) { transition-delay: 1.47s; }
      & .letter:nth-child(22) { transition-delay: 1.54s; }
      & .letter:nth-child(23) { transition-delay: 1.61s; }
      & .letter:nth-child(24) { transition-delay: 1.68s; }
      & .letter:nth-child(25) { transition-delay: 1.75s; }
      & .letter:nth-child(26) { transition-delay: 1.82s; }
      & .letter:nth-child(27) { transition-delay: 1.89s; }
      & .letter:nth-child(28) { transition-delay: 1.96s; }
      & .letter:nth-child(29) { transition-delay: 2.03s; }
      & .letter:nth-child(30) { transition-delay: 2.1s; }
    }
    
    &.out span.line { animation-name: textFaderOut; display: block; }
  }
}

@keyframes textFaderIn {
  from { opacity: 0; transform: translateY(0); }
  to { opacity: 1; transform: translateY(25%); }
}
@keyframes textFaderOut {
  from { opacity: 1; transform: translateY(25%); }
  to { opacity: 0; transform: translateY(50%); }
}