/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* Menu*/
#brx-header.x-header_sticky-active .brxe-xheaderrow{
    animation-name: x_header_slide_down !important;
  animation-duration: var(--x-header-fade-transition) !important;
  animation-timing-function: ease-out !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: both !important;

  will-change: transform;
}

@keyframes x_header_slide_down {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

.main-menu-item[aria-current] {
    color: #fff !important;
  font-weight: 700 !important;
}

.x-offcanvas_inner {
    background-color: rgba(0, 27, 54, 0.85);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(20px);
}
.x-hamburger-inner{

  width: 30px !important;
}

.x-hamburger-inner:after {
    width: 25px !important;
}

.x-hamburger-box.is-active .x-hamburger-inner {
    width: 40px !important;
}

.x-hamburger-box.is-active .x-hamburger-inner:after {
    width: 40px !important;
}
/* arw-btn-sticky*/
.arw-btn-sticky {
    pointer-events: none;
  }

  .arw-btn-sticky.visible {
    opacity: 1 !important;
    pointer-events: all;
  }

/* triangle-anim*/
   
   
    .triangle-anim {
  aspect-ratio: 1 / 1;
  width: auto;
}

    .triangle-anim .frame {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* Animierbare Masken-Dreiecke */
    .triangle-anim .cut {
      fill: rgba(0,0,0,0);
      transition: fill 1000ms ease-in-out;
    }
    .triangle-anim .cut.on { fill: rgba(0,0,0,1); }

    /* Fix-Dreiecke (immer durchsichtig, keine Animation) */
    .triangle-anim .fixed {
      fill: rgba(0,0,0,0);
    }

    /* Farbliche Highlights und Cutouts */
    .triangle-anim .highlight { fill: rgba(65,77,125,1); }
    .triangle-anim .highlight-semi { fill: rgba(65,77,125,0.4); }   
    .triangle-anim .permanent-cut { fill: rgba(0,27,54,1); }
    .triangle-anim .permanent-cut-light { fill: rgba(255,255,255,1); }


body .uwy.userway_p3 .userway_buttons_wrapper {
    bottom: 100px !important;
    left: calc(100vw - 65px) !important;
}


@media (max-width: 767px) {
  body .uwy.userway_p3 .userway_buttons_wrapper {
   left: calc(100vw - 10px) !important;
   bottom: 80px !important;
    
}
}