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

html body .brxe-nav-menu .bricks-nav-menu li[data-static] > .sub-menu,
:where(.brxe-nav-menu) .bricks-nav-menu li[data-static] .sub-menu {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  height: 100vh !important;
  width: 25vw !important;
  opacity: 1 !important;
  transition: all 0.5s linear !important;
}
/* dec 16 override */
/* paste Bricks’ exact selector here */
.brxe-nav-menu .bricks-nav-menu li[data-static] > ul.sub-menu {
  position: fixed !important;
}

/* dec 16 override */
:where(.brxe-nav-menu) .bricks-nav-menu li[data-static] .sub-menu {
	position:fixed!important;
	height:100vh;
	width:50vw;
	top:0;
	right:0;
  opacity: 1;
}
/*:where(.brxe-nav-menu) .bricks-nav-menu li.current-menu-parent .sub-menu {
  visibility: visible;
  display: inline-block;
  padding: var(--space-xxl);
  transition:sub-nav-slide-in 500ms ease-in-out both;
}*/
.fr-modal--open .menu-item .brx-submenu-toggle a {
  display:block;
}

.fr-modal--open .menu-item a,
.fr-modal--open .menu-item:nth-child(0) .brx-submenu-toggle a,
.fr-modal--open .menu-item .sub-menu li a {
  opacity: 0;
  animation: nav-fade-in 500ms ease forwards;
  transition: padding 0.4s;
}
.bricks-nav-menu > li:hover > .brx-submenu-toggle > *
{
  padding-left: 10px;
}
.fr-modal--open .bricks-nav-menu .open .sub-menu {
  /*padding: var(--space-xxl);*/
  animation: sub-nav-slide-in 500ms ease-in-out both;
}
li.menu-item-has-children .brx-submenu-toggle a {
  color: white;
}
%root% .bricks-nav-menu .sub-menu > li > a {
  transition: all 500ms ease-in-out;

}
.fr-modal--open .menu-item li a:hover {
  color: var(--black-trans-70);
  padding-left: 30px;
}
.fr-modal--open .menu-item:nth-child(1) a,
.fr-modal--open .menu-item .sub-menu li:nth-child(1) a {
  animation-delay: 0ms;
}
.bricks-nav-menu > li:nth-child(1):hover > .brx-submenu-toggle > *,
.bricks-nav-menu > li:nth-child(1).active > .brx-submenu-toggle > *,
.bricks-nav-menu > li:nth-child(1).current-menu-parent > .brx-submenu-toggle > * {
  color: var(--secondary)!important;
}
.fr-modal--open .menu-item:nth-child(1) .sub-menu {
  background: var(--secondary);
}
.fr-modal--open .menu-item:nth-child(2) a,
.fr-modal--open .menu-item .sub-menu li:nth-child(2) a {
  animation-delay: 200ms;
}
.bricks-nav-menu > li:nth-child(2):hover > .brx-submenu-toggle > *,
.bricks-nav-menu > li:nth-child(2).active > .brx-submenu-toggle > *
{
  color: var(--aqua)!important;
}
.fr-modal--open .menu-item:nth-child(2) .sub-menu {
  background: var(--aqua);
}
.fr-modal--open .menu-item:nth-child(3) a,
.fr-modal--open .menu-item .sub-menu li:nth-child(3) a {
  animation-delay: 300ms;
}
.bricks-nav-menu > li:nth-child(3):hover > .brx-submenu-toggle > *,
.bricks-nav-menu > li:nth-child(3).active > .brx-submenu-toggle > * {
  color: var(--light-blue)!important;
}
.fr-modal--open .menu-item:nth-child(3) .sub-menu {
  background: var(--light-blue);
}
.fr-modal--open .menu-item:nth-child(4) a,
.fr-modal--open .menu-item .sub-menu li:nth-child(4) a {
  animation-delay: 400ms;
}
.bricks-nav-menu > li:nth-child(4):hover > .brx-submenu-toggle > *,
.bricks-nav-menu > li:nth-child(4).active > .brx-submenu-toggle > * {
  color: var(--red)!important;
}
.fr-modal--open .menu-item:nth-child(4) .sub-menu {
  background: var(--red);
}
.fr-modal--open .menu-item:nth-child(5) a,
.fr-modal--open .menu-item .sub-menu li:nth-child(5) a {
  animation-delay: 500ms;
}
.bricks-nav-menu > li:nth-child(5):hover > .brx-submenu-toggle > *,
.bricks-nav-menu > li:nth-child(5).active > .brx-submenu-toggle > * {
  color: var(--orange)!important;
}
.fr-modal--open .menu-item:nth-child(5) .sub-menu {
  background: var(--orange);
}
.fr-modal--open .menu-item:nth-child(6) a,
.fr-modal--open .menu-item .sub-menu li:nth-child(6) a {
  animation-delay: 600ms;
}
.bricks-nav-menu > li:nth-child(6):hover > .brx-submenu-toggle > *,
.bricks-nav-menu > li:nth-child(6).active > .brx-submenu-toggle > * {
  color: var(--green)!important;
}
.fr-modal--open .menu-item:nth-child(6) .sub-menu {
  background: var(--green);
}
.fr-modal--open .menu-item:nth-child(7) a,
.fr-modal--open .menu-item .sub-menu li:nth-child(7) a {
  animation-delay: 700ms;
}
.bricks-nav-menu > li:nth-child(7):hover > .brx-submenu-toggle > *,
.bricks-nav-menu > li:nth-child(7).active > .brx-submenu-toggle > * {
  color: var(--blue)!important;
}
.fr-modal--open .menu-item:nth-child(7) .sub-menu {
  background: var(--blue);
}
.fr-modal--open .menu-item:nth-child(8) a,
.fr-modal--open .menu-item .sub-menu li:nth-child(8) a {
  animation-delay: 800ms;
}
.bricks-nav-menu > li:nth-child(8):hover > *,
.bricks-nav-menu > li:nth-child(8).active > * {
  color: var(--purple)!important;
}
.fr-modal--open .menu-item:nth-child(8) .sub-menu {
  background: var(--purple);
}
.fr-modal--open .menu-item:nth-child(9) a,
.fr-modal--open .menu-item .sub-menu li:nth-child(9) a {
  animation-delay: 900ms;
}
.fr-modal--open .menu-item:nth-child(10) a,
.fr-modal--open .menu-item .sub-menu li:nth-child(10) a {
  animation-delay: 1000ms;
}
.fr-modal--open .menu-item:nth-child(11) a,
.fr-modal--open .menu-item .sub-menu li:nth-child(11) a {
  animation-delay: 1100ms;
}
.fr-modal--open .menu-item:nth-child(12) a,
.fr-modal--open .menu-item .sub-menu li:nth-child(12) a {
  animation-delay: 1200ms;
}
.fr-modal--open .menu-item:nth-child(13) a,
.fr-modal--open .menu-item .sub-menu li:nth-child(13) a {
  animation-delay: 1300ms;
}
.fr-modal--open .menu-item:nth-child(14) a,
.fr-modal--open .menu-item .sub-menu li:nth-child(14) a {
  animation-delay: 1400ms;
}
.fr-modal--open .menu-item:nth-child(15) a,
.fr-modal--open .menu-item .sub-menu li:nth-child(15) a {
  animation-delay: 1500ms;
}
.fr-modal--open .menu-item:nth-child(16) a,
.fr-modal--open .menu-item .sub-menu li:nth-child(16) a {
  animation-delay: 1600ms;
}
.fr-modal--open .menu-item:nth-child(17) a,
.fr-modal--open .menu-item .sub-menu li:nth-child(17) a {
  animation-delay: 1700ms;
}
.fr-modal--open .menu-item:nth-child(18) a,
.fr-modal--open .menu-item .sub-menu li:nth-child(18) a {
  animation-delay: 1800ms;
}
.fr-modal--open .menu-item:nth-child(19) a,
.fr-modal--open .menu-item .sub-menu li:nth-child(19) a {
  animation-delay: 1900ms;
}
.fr-modal--open .menu-item:nth-child(20) a,
.fr-modal--open .menu-item .sub-menu li:nth-child(20) a {
  animation-delay: 2000ms;
}
@keyframes nav-fade-in {
  from {
    transform: translate3d(0,50px,0);
    opacity: 0;
  }
  to {
    transform: translate3d(0,0,0);
    opacity: 1;
  }
}
@keyframes sub-nav-slide-in {
  from {
    transform: translate(50vw,0);
    opacity: 0;
  }
  to {
    transform: translate(0,0);
    opacity: 1;
  }
}
@keyframes sub-nav-slide-out {
  from {
    transform: translate(0,0);
    opacity: 1;
  }
  to {
    transform: translate(50vw,0);
    opacity: 0;
  }
}