.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.container-sm .row.row,
.container-md .row.row,
.container-lg .row.row,
.container-xl .row.row,
.container .row.row {
  --bs-gutter-x: 0;
}
.site-footer {
  display: flex;
  flex-direction: column;
}
.sumup-text b {
    padding: 0.25rem !important;
    background: #d1ffef !important;
}
.jiggleme {
  display: flex;
  margin: var(--jiggleme-margin, 1em 0px);
}
.jiggle-space {
  margin-left: 0.3em;
}
.jiggleme.text-left {
justify-content: flex-start;
}
.jiggleme.text-center {
justify-content: center;
}
.jiggleme.text-right {
justify-content: flex-end;
}
.jiggler span {
transition: all 0.2s ease-in-out;
}
.jiggler span:hover {
color: var(--jiggler-color);
}
.fadein {
    opacity: 0;
}
.fadeout {
    opacity: 1;
}
.slidein-left {
  transform: translateX(-100%);
  transition: 1s ease-in-out;
  opacity: 0;
}
.slideout-left {
  transform: translateX(100%);
  transition: 1s ease-in-out;
  opacity: 0;
}
.slidein-right {
  transform: translateX(100%);
  transition: 1s ease-in-out;
  opacity: 0;
}
.slideout-right {
  transform: translateX(-100%);
  transition: 1s ease-in-out;
  opacity: 0;
}
.visible {
  opacity: 1;
  transform: translateX(0);
}

.contact-page {
  background-image: url("/static/images/contact-bg.jpg");
  background-position: 62% 16%;
  background-repeat: no-repeat;

  & #contact-form {
    background-color: rgba(255,255,255,0.5);
    padding: 1rem;
    border-radius: 0.5rem;
  }
}

/* form .field-group { */
  /* display: flex; */
  /* flex-direction: column; */
  /* margin-bottom: 1rem; */
/* } */
/* form .field-group .field { */
  /* display: flex; */
  /* flex-direction: row; */
  /* align-items: center; */
  /* margin-bottom: 0.5rem; */
/* } */

.triple-image-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  width: 100%;
  height: var(--image-height, 400px);

  & > * {
      flex: 1 1 33%;
      width: 33%;
      height: 100%;
      object-fit: cover;
  }
} 

/* Triple image split */
.clipped-image-container {
  position: relative;
  width: 100%;
  height: var(--imageheight, 500px);
  background-color: #222;
}

.image-clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s;
}

.image-clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-clip-1 {
  background-size: cover;
  background-position: center;
  -webkit-clip-path: polygon(0 0, 30% 0, 45% 100%, 0 100%);
  clip-path: polygon(0 0, 30% 0, 45% 100%, 0 100%);
}

.image-clip-2 {
  background-size: cover;
  background-position: center;
  -webkit-clip-path: polygon(30% 0, 70% 0, 55% 100%, 45% 100%);
  clip-path: polygon(30% 0, 70% 0, 55% 100%, 45% 100%);
}

.image-clip-3 {
  background-size: cover;
  background-position: center;
  -webkit-clip-path: polygon(70% 0, 100% 0, 100% 100%, 55% 100%);
  clip-path: polygon(70% 0, 100% 0, 100% 100%, 55% 100%);
}

.clipped-image-container:hover .image-clip {
  -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.clipped-image-container .image-clip:hover {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}


/*  SPLIT BUTTON */
.split-button {
  --width: var(--button-width, 180px);
  position: relative;
  width: var(--width);
  height: calc(var(--width) / 3);
  display: block;
  overflow: hidden;
  border: 2px solid var(--border-color, #4834d4);
  text-align: center;
}

.split-button span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--color, white);
  background-color: var(--background-color, #4834d4);
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: var(--font-size, 22px);
}

.split-button span:nth-child(2) {
  background-color: var(--color, white);
  color: var(--background-color, #4834d4);
  transition: all 0.5s ease;
  clip-path: polygon(57% 0, 100% 0, 100% 100%, 57% 100%, 40% 50%);
}

.split-button:hover span:nth-child(2) {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 50%);
}

.split-button span:nth-child(1):hover ~ span {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%, 100% 50%);
}

/* Fixed block image */
.fixed-block-image {
  background-attachment: fixed;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: 50% 30%;
  width:100%;
}

.nav-fixed-top {
  position: relative;
}
.nav-fixed-top .nav-wrapper:not(.active) {
  position: absolute;
  z-index: 499;
  top: 0;
  left: 0;
  right: 0;
  transition: all .3s ease-in-out;
}

.nav-fixed-top .nav-wrapper.active {
  position: fixed;
  z-index: 499;
  top: 0;
  left: 0;
  right: 0;
  transition: all .3s ease-in-out;
}
.linter {
  --linter-color: var(--color, inherit);
  --linter-clip-path: var(--clip-path, 0 0, 79% 0, 73% 100%, 0% 100%);
  --linter-height: var(--height, 100px);

  width:100%;
  position:relative;
  z-index:5;
  clip-path: polygon(var(--linter-clip-path, 0 0, 79% 0, 73% 100%, 0% 100%));
  margin-top: calc(-1.5 * calc(var(--linter-height) / 5));
  height: var(--linter-height);
}
.linter::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: var(--linter-color, inherit);
  height: 100%;
  z-index: -1;
  /* transition: all 0.5s ease-in-out; */
}
/* .linter:hover::after { */
  /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); */
/* } */
.body-bg-alternate {
  background-color: var(--bs-body-bg-alternate) !important;
}
.body-bg {
  background-color: var(--bs-body-bg) !important;
}
.border-bg-alternate {
  border-color: var(--bs-border-bg-alternate) !important;
}

.border-bg {
  border-color: var(--bs-border-bg) !important;
}

.ml-auto {
  margin-left: auto !important;
}

.mr-auto {
  margin-right: auto !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ml-0 {
  margin-left: 0 !important;
}
.mr-0 {
  margin-right: 0 !important;
}
.ml-1 {
  margin-left: 0.5rem !important;
}

.mr-1 {
  margin-right: 0.5rem !important;
}

.ml-2 {
  margin-left: max(1rem, 2%) !important;
}

.mr-2 {
  margin-right: max(1rem, 2%) !important;
}

.ml-3 {
  margin-left: max(2rem, 4%) !important;
}

.mr-3 {
  margin-right: max(2rem, 4%) !important;
}

.ml-4 {
  margin-left: max(4rem, 8%) !important;
}

.mr-4 {
  margin-right: max(4rem, 8%) !important;
}

.ml-5 {
  margin-left: max(6rem, 12%) !important;
}

.mr-5 {
  margin-right: max(6rem, 12%) !important;
}

.blog-detail-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.blog-detail-meta {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-bottom: 1rem;
}
.blog-detail-meta > *:not(:last-child) {
  margin-right: 0.5rem;
}

.blog-detail-date {
  font: var(--blog-detail-date-font, 1rem/1.5rem var(--font-family-base, inherit));
  font-style: var(--blog-detail-date-font-style, italic);
  color: var(--blog-detail-date-color, #6c757d);
}

.hoverlift {
  transition: all 0.2s ease-in-out;
}
.hoverlift:hover {
  transform: translateY(-5px);
}
.shadow-display {
  box-shadow: var(--shadow-display, 0 0 0.5rem rgba(0,0,0,0.15));
  transition: all 0.2s ease-in-out;
}
.shadow-display:hover {
  box-shadow: var(--shadow-display-hover, 0 0 1rem rgba(0,0,0,0.15));
}

.category-listing {
  background: rgb(6,0,94);
  background: linear-gradient(0deg, rgba(6,0,94,1) 0%, rgba(8,0,128,1) 100%);
  position: relative;
  padding: 1.5rem;
  padding-left: 0 !important;
}

.category-listing::before {
  content: "";
  clip-path: polygon(0% 0%, 55% 0, 60% 50%, 55% 100%, 0% 100%);
  background-color: #f8f9fa;
  z-index: 1;
  position: absolute;
  top: 0;
  left: -2px;
  right: 0;
  bottom: 0;
}

.category-listing > * {
  position: relative;
  z-index: 2;
  padding-left: 1.5rem !important;
}

.step-links {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 1rem;
}

.step-links > * {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.navbar-collapse.collapsing ul,
.navbar-collapse.show ul {
  background-color: var(--bs-collapsed-navbar-bg) !important;
  height: 100%;
  border-radius: 0px 0px 10px 10px;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,.15);
}
.navbar-collapse.collapsing ul li a,
.navbar-collapse.show ul li a {
  color: var(--bs-collapsed-navbar-color) !important;
  font-size: 1.2rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
}

.navbar-collapse.collapsing ul li a:hover,
.navbar-collapse.show ul li a:hover {
  color: var(--bs-collapsed-navbar-color-hover) !important;
  background-color: var(--bs-collapsed-navbar-bg-hover) !important;
}

.navbar-collapse.collapsing ul li a.active,
.navbar-collapse.show ul li a.active {
  color: var(--bs-collapsed-navbar-color-active) !important;
  background-color: var(--bs-collapsed-navbar-bg-active) !important;
}

.hover-squiggle {
  --color: var(--bs-primary, #0d6efd);
  --size: .15em;
  
  line-height:1.1em;
  padding-bottom: calc(2.1*var(--size));
  background: 
    conic-gradient(from 135deg at top,var(--color) 90deg,#0000 0) 
      left 0 bottom var(--size)/calc(2*var(--size)) var(--size) repeat-x,
    conic-gradient(from -45deg at bottom,var(--color) 90deg,#0000 0) 
      left var(--size) bottom 0/calc(2*var(--size)) var(--size) repeat-x;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) 0/var(--grad,0%) padding-box no-repeat;
  transition: .5s;
}
.hover-squiggle:hover {
  --grad: 100%;
  color: var(--color);
}

.dropdown {
  position: relative;
}
.dropdown .dropdown-menu {
  position: absolute !important;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 0.25rem;
}
#htmx-page-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background-color: rgba(0,0,0,0.5); */
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bg-primary-light {
  background-color: rgba(var(--bs-primary-rgb, rgb(32, 103, 209)), 0.5) !important;
}
.bg-secondary-light {
  background-color: rgba(var(--bs-secondary-rgb, rgb(108, 117, 125)), 0.5) !important;
}
.sumup-container {
  position: relative;
}
.text-banner {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 30px 40px;
  color: white;

  & .text-banner-heading {
    text-transform: uppercase;
  }

  & h1, & h2, & h3, & h4, & h5, & h6 {
      margin: 0;
  }
}

.text-banner::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--background-color, black);
  background: linear-gradient(346deg, var(--background-color, black) 0%, rgba(0,0,0,1) 100%);
  opacity: 0.7;
}

.text-banner::after {
  content: "";
  z-index: -2;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
}

.col.px-1:first-child,
.col.px-2:first-child,
.col.px-3:first-child,
.col.px-4:first-child,
.col.px-5:first-child,
.col.pr-1:first-child,
.col.pr-2:first-child,
.col.pr-3:first-child,
.col.pr-4:first-child,
.col.pr-5:first-child,
.col.pl-1:first-child,
.col.pl-2:first-child,
.col.pl-3:first-child,
.col.pl-4:first-child,
.col.pl-5:first-child {
  padding-left: 0 !important;
}
.col.px-1:last-child,
.col.px-2:last-child,
.col.px-3:last-child,
.col.px-4:last-child,
.col.px-5:last-child,
.col.pr-1:last-child,
.col.pr-2:last-child,
.col.pr-3:last-child,
.col.pr-4:last-child,
.col.pr-5:last-child,
.col.pl-1:last-child,
.col.pl-2:last-child,
.col.pl-3:last-child,
.col.pl-4:last-child,
.col.pl-5:last-child {
  padding-right: 0 !important;
}
.blog-post-block {
  color: var(--bs-body-color);
  /*background-color: var(--bs-body-bg-alternate);*/
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /*border: 1px solid var(--bs-body-bg-alternate);*/

  & h1, & h2, & h3, & h4, & h5, & h6 {
      margin-top: 1rem;
      margin-bottom: 1rem;
  }
}
.blog-post-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.blog-post-block-action {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0.5rem;
  margin-top: auto;
}
.ga-carousel {
  --width:            100%;
  --height:           400px;
  --border-radius:    10px;
  --btn-height:       50px;


  position:         relative;
  width:            var(--width);
  height:           var(--height);
  border-radius:    var(--border-radius);
  background-color: var(--bs-body-bg);
  overflow:         hidden;

  &.vertical .ga-carousel-item .carousel-margin {
      padding-right: calc(var(--btn-height) * 1.5);
  }

  &:not(.vertical) .ga-carousel-item .carousel-margin {
      padding-bottom: calc(var(--btn-height) * 1.5);
  }

  & .ga-carousel-items {
      position: absolute;
      top:      0;
      left:     0;
      right:    0;
      bottom:   0;
      display:  flex;
      width:    100%;
      height:   100%;
  }

  & .ga-carousel-item > .carousel-cta {
      padding: 2rem;
  }

  &:not(.vertical) .ga-carousel-items {
      flex-direction: row;
  }

  &.vertical .ga-carousel-items {
      flex-direction: column;
  }

  & .ga-carousel-items .ga-carousel-item {
      flex: 0 0 100%;  
      height: 100%;    
      width:  100%;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  & .ga-carousel-item > *:not(.nostyle) {
      object-fit: cover;
      flex: 0 0 100%;  
      height: 100%;    
      width:  100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
  }
  & .ga-carousel-controls:has(.ga-carousel-indicator) {
    justify-content: space-between;
  }
  & .ga-carousel-controls:not(:has(.ga-carousel-indicator)) {
    justify-content: space-around;
  }
  
  & .ga-carousel-controls {
      position:        absolute;
      display:         flex;
      align-items:     center;
      pointer-events:  none;
      justify-content: space-evenly;
      width:           100%;
  }

  & .ga-carousel-controls button {
      padding: 0;
      cursor:             pointer;
      pointer-events:     all;
      border:             none;
      color:              var(--bs-body-color);
      background-color:   var(--bs-body-bg);
      border-radius:      var(--border-radius);
      height:             var(--btn-height);
      width:              var(--btn-height);
      font-size:          calc(var(--btn-height) / 2);
      transition:         opacity 0.2s ease-in-out;
  }

  &:not(.vertical) .ga-carousel-controls {
      bottom: 0;
      left:            0;
      right:           0;
      height:          calc(var(--btn-height) * 1.5);
      flex-direction: row;
  }

  &:not(.vertical) .ga-carousel-controls .ga-carousel-button-backward {
      margin-left: 20px;
  }

  &:not(.vertical) .ga-carousel-controls .ga-carousel-button-forward {
      margin-right: 20px;
  }
      
  &:not(.vertical) .arrow-vertical {
      display: none;
  }
  &.vertical .arrow-horizontal {
      display: none;
  }

  &.vertical .ga-carousel-controls {
      right:           10px;
      top:             0;
      bottom:          0;
      width:           calc(var(--btn-height) * 1.5);
      height:          100%;
      flex-direction:  column;
  }

  &.rounded .ga-carousel-controls button {
      border-radius: 50%;
      overflow: hidden;
  }

  & .ga-carousel-buttons button svg {
      width:   var(--btn-height);
      height:  var(--btn-height);
      margin:  0;
      padding: 0;
  }

  & .ga-carousel-indicators {
      display:         flex;
      justify-content: center;
      align-items:     center;
      pointer-events: none;
  }

  &:not(.vertical) .ga-carousel-indicators {
      flex-direction: row;
  }

  &.vertical .ga-carousel-indicators {
      flex-direction: column;
  }

  & .ga-carousel-indicator {
      cursor:             pointer;
      pointer-events:     all;
      border:             none;
      background-color:   var(--bs-body-color);
      border-radius:      50%;
      height:             30px;
      width:              30px;
      border:             2px solid var(--bs-border-color);
      font-size:          calc(var(--btn-height) / 2);
      transition:         opacity 0.2s ease-in-out;
      margin:             10px;

      &.active {
          background-color:   var(--bs-body-bg);
          border:             2px solid var(--bs-body-color);
      }
  }

}