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

/*header hover*/
header .bricks-nav-menu > li:not(.current_page_item) > a:hover { background-color:#fff!important; }

/*header*/
body.single-project header li.nav_projects a,
body.single-post header li.nav_news a { background-color:#093662!important; color:#81d4fa!important; box-shadow:0 0 0 rgba(33,33,33,0.5) inset,  0 -4px 0 #074f97 inset!important; }

/*header mobile*/
body.single-project header .brxe-nav-menu.mobile-nav li.nav_projects a,
body.single-post header .brxe-nav-menu.mobile-nav li.nav_news a { box-shadow:0 0 0 rgba(33,33,33,0.5) inset!important; }


	/*body.single-project header li.nav_projects a:hover,
	body.single-post header li.nav_news a:hover {
		background-color:#fff!important; color:#000!important;
	}*/

/*footer*/
body footer .bricks-nav-menu > li.current-menu-item a,
body.single-project footer li.nav_projects a,
body.single-post footer li.nav_news a { background-color:#0f0f0f; color:#81d4fa!important; }
#footer { z-index: 3!important; }


/*other*/
.blurred-element {
border-bottom:2px dashed rgba(125,125,125,0.5);
}

body.bricks-is-frontend .blurred-element {
  filter: blur(10px);   opacity: 0; border-bottom:0;
  transition: filter 1s ease-out, opacity 1s ease-out;
}
body.bricks-is-frontend .blurred-element.fade-in {
  filter: blur(0);
  opacity: 1;
}


/*anims*/
.service_hover { transition:background 0.23s ease-in-out, color 0.23s ease-in-out, text-shadow 0.23s ease-in-out; }

.bounce { transition: filter 0.3s ease-in-out; }
.bounce:hover { border-bottom:1px dashed #0C457C!important; filter: brightness(1.5); }
.bounce:hover .icon {
  animation: bounce 1s 1;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(15px);
  }
  60% {
    transform: translateX(7px);
  }
}






.border-breathe {
  --border-angle: 0turn;
  --main-bg: conic-gradient(
      from var(--border-angle),
      #112,
      #112 5%,
      #112 60%,
      #112 95%
    );
  
  border-top: solid 5px transparent;
  border-radius: 3px;
  --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #08f, #0cf 99%, transparent);
  
  background: 
    var(--main-bg) padding-box,
    var(--gradient-border) border-box, 
    var(--main-bg) border-box;
  background-position: center center;
  animation: bg-spin 3s linear infinite;
  @keyframes bg-spin {
    to {
      --border-angle: 1turn;
    }
  }

  &:hover {
    animation-play-state: paused;
  }
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}