/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

@font-face {
  font-family: 'Mark Pro';
  src: url('https://bico.group/hubfs/font-face/Mark%20Pro.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Mark Pro';
  src: url('https://bico.group/hubfs/font-face/Mark%20Pro%20Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Mark Pro';
  src: url('https://bico.group/hubfs/font-face/Mark%20Pro%20Italic.otf') format('opentype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Mark Pro';
  src: url('https://bico.group/hubfs/font-face/Mark%20Pro%20Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Maxeville';
  src: url('https://bico.group/hubfs/font-face/Maxeville-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --color-primary: #0000fa;
  --color-primary-hover: #000041;
}

.button,
.button_cta a,
.widget-type-cta,
.cta_button {
  font-family: Mark Pro, sans-serif;
  text-transform: uppercase;
}

.button[class*="_primary_cta"],
button_cta a,
.widget-type-cta,
.cta_button {
  padding: 16px 18px 14px;
}
 
/* Reset incorrect button styling */
div.widget-type-cta {
  background: none !important; 
  border: none !important;
  border-radius: 0 !important;
  padding: inerit !important;
  line-height: inherit !important;
}

a.button[class*="_primary_cta"]:where(:not(.button--arrow)),
a.cta_button {
  --btn-color: var(--color-primary);
 
  background-color: var(--btn-color);
  border-color: var(--btn-color); 
}

a.button--arrow {
  padding: 17px 0 13px 0 !important;
}

[data-alt="1"] {
  a.button--arrow {
    --btn-color: #0000fa;
    padding: 16px 18px 14px !important;
    background-color: var(--btn-color);
    border-color: var(--btn-color); 
    color: white;
    
    &:after {
      content: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 13'%3E%3Cpath d='M37.5303 7.0303a.75.75 0 000-1.0606l-4.7729-4.773a.75.75 0 00-1.0607 1.0607L35.9393 6.5l-4.2426 4.2426a.75.75 0 001.0607 1.0607l4.7729-4.773zM0 7.25h37v-1.5H0v1.5z' fill='%23ffffff'/%3E%3C/svg%3E");
    }
    
    &:hover,
    &:active,
    &:focus {
      --btn-color: var(--color-primary-hover);
      background-color: var(--btn-color);
      border-color: var(--btn-color); 
    }
  }
}

a.button[class*="_primary_cta"]:where(:not(.button--arrow)),
a.cta_button{
  &:hover,
  &:active,
  &:focus {
    --btn-color: var(--color-primary-hover);
    background-color: var(--btn-color);
    border-color: var(--btn-color); 
  }
}

/* Increase hit area for secondary text button*/
.widget_1688917251348__secondary_cta {
  padding: 14px 0;
}

/* NAV BAR */
body:not[data-alt] .kl-navbar__button .cta_button {
  padding-top: 15px;
}

.kl-navbar__item {
  margin: 0 clamp(0px, 1vw, 20px);
}

/* Remove hover line on menu button*/
.kl-navbar__button:hover > span:after, .kl-navbar__button:focus > span:after, .kl-navbar__button:active > span:after, .kl-navbar__button--active > span:after {
  visibility: hidden !important;
}

@media screen and (min-width: 921px) and (max-width: 1140px ){
  .kl-navbar__logo {
    max-width: 160px !important;
    margin-right: 16px !important;
  }
  .kl-navbar__parent {
     margin: 0 8px !important;
  }
  .kl-navbar__parent > a:after {
    margin-left: 4px !important;
  }
  :is(.kl-navbar__button, .Navbar__button) a {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .Navbar__button {
    margin-left: 8px !important;
  }
}

@media screen and (max-width: 921px) {
  .kl-navbar__end {
    gap: 16px;
    margin: 0 -40px;
  }
    
  .Navbar__button {
    margin-left: 0 !important;
  }   
}
@media screen and (max-width: 480px) {
  .kl-navbar__end {
    width: 100%;
    flex-direction: column;
    gap: 12px;
    margin: 0;
  }
  .Navbar__button {
    margin-left: 0 !important;
    width: 100%;
  }
  .Navbar__button a {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box !important;
  }
}

/* ----- SYSTEM PAGES -- */
header.system-logo {
  padding-top: 50px;
}
header.system-logo img {
  width: 300px;
  height: auto;
}

.hs-action-menu-icon {
  margin: 0 !important;