/*
 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
*/

.x-header_sticky-active .x-header_wrap {
	backdrop-filter: blur(3px);
}


/* Hotspot Image
 * =================================================== */
.x-marker_popover-content img {
	margin-bottom: var(--space-s);
}

.x-marker_popover-content strong {
	color: var(--text-dark);
}

.x-marker_popover-content p {
	color: var(--text-dark-muted);
}


/* Marker
 * =================================================== */
mark {
  -webkit-animation: 1.5s highlight 1.5s 1 normal forwards;
          animation: 1.5s highlight 1.5s 1 normal forwards;
  background-color: none;
  background: linear-gradient(90deg, var(--primary-light) 50%, rgba(255, 255, 255, 0) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
	animation-delay: 5s;
	padding-left: 10px;
	padding-right: 10px;
}

@-webkit-keyframes highlight {
  to {
    background-position: 0 0;
  }
}

@keyframes highlight {
  to {
    background-position: 0 0;
  }
}



/* Avoid FUC on frontend
 * =================================================== */
.bricks-is-frontend .animation-trigger{
  opacity:0;
}

.animation-trigger {
    --delay: attr(data-delay number);
}
 
/* Animated Class */
.animate {
    animation-name: fadeAnimation;
    animation-delay: calc(var(--delay, 1) * 150ms);
    animation-duration: var(--duration, 600ms);
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}
 
/* Change translate Origin */
.animation--left-to-right{
  --translate: -40px,0,0;
}
.animation--right-to-left{
  --translate: 40px,0,0;
}
.animation--top-to-bottom{
  --translate: 0,-40px,0;
}
.animation--bottom-to-top{
  --translate: 0,40px,0;
}
 
/* Keyframes */
@keyframes fadeAnimation{
  from{
    transform: translate3d(var(--translate));
  }
  to{
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}