/*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */ .x-hamburger{font:inherit;display:inline-flex;overflow:visible;margin:0;padding:15px;cursor:pointer;transition-timing-function:linear;transition-duration:.3s;transition-property:opacity,filter;text-transform:none;color:inherit;border:0;background-color:transparent}.x-hamburger.is-active:hover,.x-hamburger:hover{opacity:.7}.x-hamburger.is-active .x-hamburger-inner,.x-hamburger.is-active .x-hamburger-inner:after,.x-hamburger.is-active .x-hamburger-inner:before{background-color:var(--x-burger-line-color)}.x-hamburger-box{position:relative;display:inline-block;width:40px;height:24px}.x-hamburger-inner{top:50%;display:block;margin-top:-2px}.x-hamburger-inner,.x-hamburger-inner:after,.x-hamburger-inner:before{position:absolute;width:40px;height:4px;transition-timing-function:ease;transition-duration:.3s;transition-property:transform;border-radius:var(--x-burger-line-radius);background-color:var(--x-burger-line-color)}.x-hamburger-inner:after,.x-hamburger-inner:before{display:block;content:""}.x-hamburger-inner:before{top:-10px}.x-hamburger-inner:after{bottom:-10px}.x-hamburger--3dx .x-hamburger-box{perspective:80px}.x-hamburger--3dx .x-hamburger-inner{transition:transform .4s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dx .x-hamburger-inner:after,.x-hamburger--3dx .x-hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dx.is-active .x-hamburger-inner{transform:rotateY(180deg);background-color:transparent!important}.x-hamburger--3dx.is-active .x-hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--3dx.is-active .x-hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--3dx-r .x-hamburger-box{perspective:80px}.x-hamburger--3dx-r .x-hamburger-inner{transition:transform .4s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dx-r .x-hamburger-inner:after,.x-hamburger--3dx-r .x-hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dx-r.is-active .x-hamburger-inner{transform:rotateY(-180deg);background-color:transparent!important}.x-hamburger--3dx-r.is-active .x-hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--3dx-r.is-active .x-hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--3dy .x-hamburger-box{perspective:80px}.x-hamburger--3dy .x-hamburger-inner{transition:transform .4s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dy .x-hamburger-inner:after,.x-hamburger--3dy .x-hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dy.is-active .x-hamburger-inner{transform:rotateX(-180deg);background-color:transparent!important}.x-hamburger--3dy.is-active .x-hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--3dy.is-active .x-hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--3dy-r .x-hamburger-box{perspective:80px}.x-hamburger--3dy-r .x-hamburger-inner{transition:transform .4s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dy-r .x-hamburger-inner:after,.x-hamburger--3dy-r .x-hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dy-r.is-active .x-hamburger-inner{transform:rotateX(180deg);background-color:transparent!important}.x-hamburger--3dy-r.is-active .x-hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--3dy-r.is-active .x-hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--3dxy .x-hamburger-box{perspective:80px}.x-hamburger--3dxy .x-hamburger-inner{transition:transform .4s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dxy .x-hamburger-inner:after,.x-hamburger--3dxy .x-hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dxy.is-active .x-hamburger-inner{transform:rotateX(180deg) rotateY(180deg);background-color:transparent!important}.x-hamburger--3dxy.is-active .x-hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--3dxy.is-active .x-hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--3dxy-r .x-hamburger-box{perspective:80px}.x-hamburger--3dxy-r .x-hamburger-inner{transition:transform .4s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dxy-r .x-hamburger-inner:after,.x-hamburger--3dxy-r .x-hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.x-hamburger--3dxy-r.is-active .x-hamburger-inner{transform:rotateX(180deg) rotateY(180deg) rotate(-180deg);background-color:transparent!important}.x-hamburger--3dxy-r.is-active .x-hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--3dxy-r.is-active .x-hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--arrow.is-active .x-hamburger-inner:before{transform:translate3d(-8px,0,0) rotate(-45deg) scaleX(.7)}.x-hamburger--arrow.is-active .x-hamburger-inner:after{transform:translate3d(-8px,0,0) rotate(45deg) scaleX(.7)}.x-hamburger--arrow-r.is-active .x-hamburger-inner:before{transform:translate3d(8px,0,0) rotate(45deg) scaleX(.7)}.x-hamburger--arrow-r.is-active .x-hamburger-inner:after{transform:translate3d(8px,0,0) rotate(-45deg) scaleX(.7)}.x-hamburger--arrowalt .x-hamburger-inner:before{transition:top .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.x-hamburger--arrowalt .x-hamburger-inner:after{transition:bottom .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.x-hamburger--arrowalt.is-active .x-hamburger-inner:before{top:0;transition:top .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;transform:translate3d(-8px,-10px,0) rotate(-45deg) scaleX(.7)}.x-hamburger--arrowalt.is-active .x-hamburger-inner:after{bottom:0;transition:bottom .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;transform:translate3d(-8px,10px,0) rotate(45deg) scaleX(.7)}.x-hamburger--arrowalt-r .x-hamburger-inner:before{transition:top .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.x-hamburger--arrowalt-r .x-hamburger-inner:after{transition:bottom .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.x-hamburger--arrowalt-r.is-active .x-hamburger-inner:before{top:0;transition:top .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;transform:translate3d(8px,-10px,0) rotate(45deg) scaleX(.7)}.x-hamburger--arrowalt-r.is-active .x-hamburger-inner:after{bottom:0;transition:bottom .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;transform:translate3d(8px,10px,0) rotate(-45deg) scaleX(.7)}.x-hamburger--arrowturn.is-active .x-hamburger-inner{transform:rotate(-180deg)}.x-hamburger--arrowturn.is-active .x-hamburger-inner:before{transform:translate3d(8px,0,0) rotate(45deg) scaleX(.7)}.x-hamburger--arrowturn.is-active .x-hamburger-inner:after{transform:translate3d(8px,0,0) rotate(-45deg) scaleX(.7)}.x-hamburger--arrowturn-r.is-active .x-hamburger-inner{transform:rotate(-180deg)}.x-hamburger--arrowturn-r.is-active .x-hamburger-inner:before{transform:translate3d(-8px,0,0) rotate(-45deg) scaleX(.7)}.x-hamburger--arrowturn-r.is-active .x-hamburger-inner:after{transform:translate3d(-8px,0,0) rotate(45deg) scaleX(.7)}.x-hamburger--boring .x-hamburger-inner,.x-hamburger--boring .x-hamburger-inner:after,.x-hamburger--boring .x-hamburger-inner:before{transition-property:none}.x-hamburger--boring.is-active .x-hamburger-inner{transform:rotate(45deg)}.x-hamburger--boring.is-active .x-hamburger-inner:before{top:0;opacity:0}.x-hamburger--boring.is-active .x-hamburger-inner:after{bottom:0;transform:rotate(-90deg)}.x-hamburger--collapse .x-hamburger-inner{top:auto;bottom:0;transition-delay:.13s;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.13s}.x-hamburger--collapse .x-hamburger-inner:after{top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear}.x-hamburger--collapse .x-hamburger-inner:before{transition:top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--collapse.is-active .x-hamburger-inner{transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--collapse.is-active .x-hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s;opacity:0}.x-hamburger--collapse.is-active .x-hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .16s,transform .13s cubic-bezier(.215,.61,.355,1) .25s;transform:rotate(-90deg)}.x-hamburger--collapse-r .x-hamburger-inner{top:auto;bottom:0;transition-delay:.13s;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.13s}.x-hamburger--collapse-r .x-hamburger-inner:after{top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear}.x-hamburger--collapse-r .x-hamburger-inner:before{transition:top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--collapse-r.is-active .x-hamburger-inner{transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,-10px,0) rotate(45deg)}.x-hamburger--collapse-r.is-active .x-hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s;opacity:0}.x-hamburger--collapse-r.is-active .x-hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .16s,transform .13s cubic-bezier(.215,.61,.355,1) .25s;transform:rotate(90deg)}.x-hamburger--elastic .x-hamburger-inner{top:2px;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);transition-duration:.275s}.x-hamburger--elastic .x-hamburger-inner:before{top:10px;transition:opacity .125s ease .275s}.x-hamburger--elastic .x-hamburger-inner:after{top:20px;transition:transform .275s cubic-bezier(.68,-.55,.265,1.55)}.x-hamburger--elastic.is-active .x-hamburger-inner{transition-delay:75ms;transform:translate3d(0,10px,0) rotate(135deg)}.x-hamburger--elastic.is-active .x-hamburger-inner:before{transition-delay:0s;opacity:0}.x-hamburger--elastic.is-active .x-hamburger-inner:after{transition-delay:75ms;transform:translate3d(0,-20px,0) rotate(-270deg)}.x-hamburger--elastic-r .x-hamburger-inner{top:2px;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);transition-duration:.275s}.x-hamburger--elastic-r .x-hamburger-inner:before{top:10px;transition:opacity .125s ease .275s}.x-hamburger--elastic-r .x-hamburger-inner:after{top:20px;transition:transform .275s cubic-bezier(.68,-.55,.265,1.55)}.x-hamburger--elastic-r.is-active .x-hamburger-inner{transition-delay:75ms;transform:translate3d(0,10px,0) rotate(-135deg)}.x-hamburger--elastic-r.is-active .x-hamburger-inner:before{transition-delay:0s;opacity:0}.x-hamburger--elastic-r.is-active .x-hamburger-inner:after{transition-delay:75ms;transform:translate3d(0,-20px,0) rotate(270deg)}.x-hamburger--emphatic{overflow:hidden}.x-hamburger--emphatic .x-hamburger-inner{transition:background-color .125s ease-in .175s}.x-hamburger--emphatic .x-hamburger-inner:before{left:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,left .125s ease-in .175s}.x-hamburger--emphatic .x-hamburger-inner:after{top:10px;right:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,right .125s ease-in .175s}.x-hamburger--emphatic.is-active .x-hamburger-inner{transition-delay:0s;transition-timing-function:ease-out;background-color:transparent!important}.x-hamburger--emphatic.is-active .x-hamburger-inner:before{top:-80px;left:-80px;transition:left .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;transform:translate3d(80px,80px,0) rotate(45deg)}.x-hamburger--emphatic.is-active .x-hamburger-inner:after{top:-80px;right:-80px;transition:right .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;transform:translate3d(-80px,80px,0) rotate(-45deg)}.x-hamburger--emphatic-r{overflow:hidden}.x-hamburger--emphatic-r .x-hamburger-inner{transition:background-color .125s ease-in .175s}.x-hamburger--emphatic-r .x-hamburger-inner:before{left:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,left .125s ease-in .175s}.x-hamburger--emphatic-r .x-hamburger-inner:after{top:10px;right:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,right .125s ease-in .175s}.x-hamburger--emphatic-r.is-active .x-hamburger-inner{transition-delay:0s;transition-timing-function:ease-out;background-color:transparent!important}.x-hamburger--emphatic-r.is-active .x-hamburger-inner:before{top:80px;left:-80px;transition:left .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;transform:translate3d(80px,-80px,0) rotate(-45deg)}.x-hamburger--emphatic-r.is-active .x-hamburger-inner:after{top:80px;right:-80px;transition:right .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;transform:translate3d(-80px,-80px,0) rotate(45deg)}.x-hamburger--minus .x-hamburger-inner:after,.x-hamburger--minus .x-hamburger-inner:before{transition:bottom .08s ease-out 0s,top .08s ease-out 0s,opacity 0s linear}.x-hamburger--minus.is-active .x-hamburger-inner:after,.x-hamburger--minus.is-active .x-hamburger-inner:before{transition:bottom .08s ease-out,top .08s ease-out,opacity 0s linear .08s;opacity:0}.x-hamburger--minus.is-active .x-hamburger-inner:before{top:0}.x-hamburger--minus.is-active .x-hamburger-inner:after{bottom:0}.x-hamburger--slider .x-hamburger-inner{top:2px}.x-hamburger--slider .x-hamburger-inner:before{top:10px;transition-timing-function:ease;transition-duration:.4s;transition-property:transform,opacity}.x-hamburger--slider .x-hamburger-inner:after{top:20px}.x-hamburger--slider.is-active .x-hamburger-inner{transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--slider.is-active .x-hamburger-inner:before{transform:rotate(-45deg) translate3d(-5.71429px,-6px,0);opacity:0}.x-hamburger--slider.is-active .x-hamburger-inner:after{transform:translate3d(0,-20px,0) rotate(-90deg)}.x-hamburger--slider-r .x-hamburger-inner{top:2px}.x-hamburger--slider-r .x-hamburger-inner:before{top:10px;transition-timing-function:ease;transition-duration:.4s;transition-property:transform,opacity}.x-hamburger--slider-r .x-hamburger-inner:after{top:20px}.x-hamburger--slider-r.is-active .x-hamburger-inner{transform:translate3d(0,10px,0) rotate(-45deg)}.x-hamburger--slider-r.is-active .x-hamburger-inner:before{transform:rotate(45deg) translate3d(5.71429px,-6px,0);opacity:0}.x-hamburger--slider-r.is-active .x-hamburger-inner:after{transform:translate3d(0,-20px,0) rotate(90deg)}.x-hamburger--spin .x-hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.22s}.x-hamburger--spin .x-hamburger-inner:before{transition:top .1s ease-in .25s,opacity .1s ease-in}.x-hamburger--spin .x-hamburger-inner:after{transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--spin.is-active .x-hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(225deg)}.x-hamburger--spin.is-active .x-hamburger-inner:before{top:0;transition:top .1s ease-out,opacity .1s ease-out .12s;opacity:0}.x-hamburger--spin.is-active .x-hamburger-inner:after{bottom:0;transition:bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(-90deg)}.x-hamburger--spin-r .x-hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.22s}.x-hamburger--spin-r .x-hamburger-inner:before{transition:top .1s ease-in .25s,opacity .1s ease-in}.x-hamburger--spin-r .x-hamburger-inner:after{transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--spin-r.is-active .x-hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(-225deg)}.x-hamburger--spin-r.is-active .x-hamburger-inner:before{top:0;transition:top .1s ease-out,opacity .1s ease-out .12s;opacity:0}.x-hamburger--spin-r.is-active .x-hamburger-inner:after{bottom:0;transition:bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(90deg)}.x-hamburger--spring .x-hamburger-inner{top:2px;transition:background-color 0s linear .13s}.x-hamburger--spring .x-hamburger-inner:before{top:10px;transition:top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--spring .x-hamburger-inner:after{top:20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--spring.is-active .x-hamburger-inner{transition-delay:.22s;background-color:transparent!important}.x-hamburger--spring.is-active .x-hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .4s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;transform:translate3d(0,10px,0) rotate(45deg)}.x-hamburger--spring.is-active .x-hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),transform .13s cubic-bezier(.215,.61,.355,1) .22s;transform:translate3d(0,10px,0) rotate(-45deg)}.x-hamburger--spring-r .x-hamburger-inner{top:auto;bottom:0;transition-delay:0s;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.13s}.x-hamburger--spring-r .x-hamburger-inner:after{top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity 0s linear}.x-hamburger--spring-r .x-hamburger-inner:before{transition:top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.x-hamburger--spring-r.is-active .x-hamburger-inner{transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,-10px,0) rotate(-45deg)}.x-hamburger--spring-r.is-active .x-hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity 0s linear .22s;opacity:0}.x-hamburger--spring-r.is-active .x-hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .4s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;transform:rotate(90deg)}.x-hamburger--stand .x-hamburger-inner{transition:transform 75ms cubic-bezier(.55,.055,.675,.19) .4s,background-color 0s linear 75ms}.x-hamburger--stand .x-hamburger-inner:before{transition:top 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.x-hamburger--stand .x-hamburger-inner:after{transition:bottom 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.x-hamburger--stand.is-active .x-hamburger-inner{transition:transform 75ms cubic-bezier(.215,.61,.355,1) 0s,background-color 0s linear .4s;transform:rotate(90deg);background-color:transparent!important}.x-hamburger--stand.is-active .x-hamburger-inner:before{top:0;transition:top 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .4s;transform:rotate(-45deg)}.x-hamburger--stand.is-active .x-hamburger-inner:after{bottom:0;transition:bottom 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .4s;transform:rotate(45deg)}.x-hamburger--stand-r .x-hamburger-inner{transition:transform 75ms cubic-bezier(.55,.055,.675,.19) .4s,background-color 0s linear 75ms}.x-hamburger--stand-r .x-hamburger-inner:before{transition:top 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.x-hamburger--stand-r .x-hamburger-inner:after{transition:bottom 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.x-hamburger--stand-r.is-active .x-hamburger-inner{transition:transform 75ms cubic-bezier(.215,.61,.355,1) 0s,background-color 0s linear .4s;transform:rotate(-90deg);background-color:transparent!important}.x-hamburger--stand-r.is-active .x-hamburger-inner:before{top:0;transition:top 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .4s;transform:rotate(-45deg)}.x-hamburger--stand-r.is-active .x-hamburger-inner:after{bottom:0;transition:bottom 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .4s;transform:rotate(45deg)}.x-hamburger--squeeze .x-hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:75ms}.x-hamburger--squeeze .x-hamburger-inner:before{transition:top 75ms ease .12s,opacity 75ms ease}.x-hamburger--squeeze .x-hamburger-inner:after{transition:bottom 75ms ease .12s,transform 75ms cubic-bezier(.55,.055,.675,.19)}.x-hamburger--squeeze.is-active .x-hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(45deg)}.x-hamburger--squeeze.is-active .x-hamburger-inner:before{top:0;transition:top 75ms ease,opacity 75ms ease .12s;opacity:0}.x-hamburger--squeeze.is-active .x-hamburger-inner:after{bottom:0;transition:bottom 75ms ease,transform 75ms cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(-90deg)}.x-hamburger--vortex .x-hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:.2s}.x-hamburger--vortex .x-hamburger-inner:after,.x-hamburger--vortex .x-hamburger-inner:before{transition-delay:.1s;transition-timing-function:linear;transition-duration:0s}.x-hamburger--vortex .x-hamburger-inner:before{transition-property:top,opacity}.x-hamburger--vortex .x-hamburger-inner:after{transition-property:bottom,transform}.x-hamburger--vortex.is-active .x-hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transform:rotate(765deg)}.x-hamburger--vortex.is-active .x-hamburger-inner:after,.x-hamburger--vortex.is-active .x-hamburger-inner:before{transition-delay:0s}.x-hamburger--vortex.is-active .x-hamburger-inner:before{top:0;opacity:0}.x-hamburger--vortex.is-active .x-hamburger-inner:after{bottom:0;transform:rotate(90deg)}.x-hamburger--vortex-r .x-hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:.2s}.x-hamburger--vortex-r .x-hamburger-inner:after,.x-hamburger--vortex-r .x-hamburger-inner:before{transition-delay:.1s;transition-timing-function:linear;transition-duration:0s}.x-hamburger--vortex-r .x-hamburger-inner:before{transition-property:top,opacity}.x-hamburger--vortex-r .x-hamburger-inner:after{transition-property:bottom,transform}.x-hamburger--vortex-r.is-active .x-hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transform:rotate(-765deg)}.x-hamburger--vortex-r.is-active .x-hamburger-inner:after,.x-hamburger--vortex-r.is-active .x-hamburger-inner:before{transition-delay:0s}.x-hamburger--vortex-r.is-active .x-hamburger-inner:before{top:0;opacity:0}.x-hamburger--vortex-r.is-active .x-hamburger-inner:after{bottom:0;transform:rotate(-90deg)} :root { --x-burger-size: 0.8; --x-burger-line-height: 4px; --x-burger-line-color: currentColor; --x-burger-line-radius: 4px; --x-burger-line-color-active: var(--x-burger-line-color); } .brxe-xburgertrigger { background: none; color: inherit; display: inline-flex; outline: none; cursor: pointer; padding: 10px; line-height: 1; -webkit-tap-highlight-color: transparent; align-items: center; } .brxe-xburgertrigger[class*=brxe-] { width: auto; } .x-hamburger-box { display:flex; background: none; pointer-events: none; transform: scale(var(--x-burger-size)); -webkit-transform: scale(var(--x-burger-size)); color: var(--x-burger-line-color); } .x-hamburger-box.is-active .x-hamburger-inner { background-color: var(--x-burger-line-color-active); } .brxe-xburgertrigger .x-hamburger-inner:before, .brxe-xburgertrigger .x-hamburger-inner:after { height: inherit; background-color: inherit; } .x-hamburger-inner { height: var(--x-burger-line-height); } :root{--x-ff-gap:15px;}.brxe-xfluentform .fluentform input[type=checkbox],.brxe-xfluentform .fluentform input[type=radio]{width:auto;}[data-x-fluent-form*=smartUI] .ff-el-group input[type=checkbox]::after,[data-x-fluent-form*=smartUI] .ff-el-group input[type=radio]::after{content:"";display:block;width:100%;height:100%;padding:0;margin:0;transition:background-color .3s ease;}[data-x-fluent-form*=smartUI] .ff-el-group input[type=checkbox]:checked::after,[data-x-fluent-form*=smartUI] .ff-el-group input[type=radio]:checked::after,[data-x-fluent-form*=smartUI] .ff-el-group .ff_item_selected input[type=checkbox]::after,[data-x-fluent-form*=smartUI] .ff-el-group .ff_item_selected input[type=radio]::after{background-color:#111;}[data-x-fluent-form*=smartUI] .ff-el-group input[type=radio],[data-x-fluent-form*=smartUI] .ff-el-group input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;border-style:solid;border-width:0;outline:0;display:inline-block;min-width:1px;width:15px;height:15px;background:#ddd;margin-right:5px;padding:3px;vertical-align:middle;}:where(.brxe-xfluentform[data-x-fluent-form*=smartUI]) .ff-el-group input[type=radio]{border-radius:100px;}:where(.brxe-xfluentform[data-x-fluent-form*=smartUI]) .ff-el-group input[type=radio]::after{border-radius:inherit;}.brxe-xfluentform .frm-fluent-form > .ff-el-group:last-child{margin-bottom:0;}.brxe-xfluentform .fluentform .ff-el-tc{display:block;}.brxe-xfluentform .fluentform .ff_upload_btn.ff-btn{display:inline-block;}.brxe-xfluentform .fluentform .ff-el-progress-bar{display:flex;align-items:center;justify-content:flex-end;}.brxe-xfluentform .ff-el-phone.ff_el_with_extended_validation{padding-left:55px !important;}.brxe-xfluentform select.ff-el-form-control:not([size]):not([multiple]){height:auto;}@media (min-width: 768px){.brxe-xfluentform .frm-fluent-form .ff-t-cell:first-of-type{padding-left:0 !important;}.brxe-xfluentform .frm-fluent-form .ff-t-cell:last-of-type{padding-right:0 !important;}}.brxe-xfluentform .ff-el-repeat-buttons-list svg{height:1em;width:1em;font-size:20px;}@media (min-width: 768px){.brxe-xfluentform .frm-fluent-form .ff-t-container{display:flex;gap:var(--x-ff-gap);width:100%;}} .brxe-xheaderrow { display: flex; transition-property: height,opacity,transform,background,color; transition-duration: var(--x-header-transition); width: 100%; } #bricks-blank-canvas .actions { z-index: 100; } .x-header_wrap.brx-draggable.is-empty { min-height: 40px; } .brxe-xheaderrow[data-x-overlay=show] { display: none; }:root { --x-offcanvas-duration: 300ms; } .x-offcanvas_inner { background: #fff; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: fixed; height: 100vh; max-width: 100%; width: 300px; overflow-x: hidden; top: 0; left: 0; padding: 30px; z-index: 1000; pointer-events: auto; display: none; } .x-offcanvas_ready { -webkit-transition: -webkit-transform var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1),box-shadow var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1); transition: transform var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1),box-shadow var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1),opacity var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1); -o-transition: -o-transform var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1),box-shadow var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1); display: -webkit-box; display: -ms-flexbox; display: flex; } .x-offcanvas_backdrop { background: rgba(0,0,0,.5); position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; -webkit-transition: all var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1); -o-transition: all var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1); transition: all var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1); pointer-events: auto; z-index: 1000; display: none; } .x-offcanvas_ready + .x-offcanvas_backdrop { display: block; } .x-offcanvas_inner { z-index: 1001; } .x-offcanvas_inner[aria-hidden="false"] + .x-offcanvas_backdrop { opacity: 1; visibility: visible; } .x-offcanvas_inner.x-offcanvas_left { left: 0; right: auto; height: 100vh!important; } .x-offcanvas_inner.x-offcanvas_left[aria-hidden="true"] { transform: translateX(-100%); -webkit-transform: translateX(-100%); } .x-offcanvas_inner.x-offcanvas_right { right: 0; left: auto; height: 100vh!important; } .x-offcanvas_inner.x-offcanvas_right[aria-hidden="true"] { transform: translateX(100%); -webkit-transform: translateX(100%); } .x-offcanvas_inner.x-offcanvas_top { top: 0; bottom: auto; right: 0; left: 0; width: 100%!important; } .x-offcanvas_inner.x-offcanvas_top[aria-hidden="true"] { transform: translateY(-100%); -webkit-transform: translateY(-100%); } .x-offcanvas_inner.x-offcanvas_bottom { top: auto; bottom: 0; right: 0; left: 0; width: 100%!important; } .x-offcanvas_inner.x-offcanvas_bottom[aria-hidden="true"] { transform: translateY(100%); -webkit-transform: translateY(100%); } body.admin-bar .x-offcanvas_backdrop { margin-top: var(--wp-admin--admin-bar--height); } body.bricks-is-frontend .x-offcanvas_inner:focus { outline: none; } .admin-bar .x-offcanvas_inner { margin-top: var(--wp-admin--admin-bar--height); } .x-offcanvas_inner > div { max-width: 100%; } html[class*="x-offcanvas_prevent-scroll"], html[class*="x-offcanvas_prevent-scroll"] > body { overflow: hidden; } .x-offcanvas_inner[aria-hidden="true"][data-type="fade"] { opacity: 0; visibility: hidden; transform: none!important; transition: all var(--x-offcanvas-duration) cubic-bezier(0.77,0,0.175,1) } .x-offcanvas_inner[aria-hidden="false"][data-type="fade"] { opacity: 1; visibility: visible; transform: none!important; } @media (prefers-reduced-motion: reduce) { .x-offcanvas[data-x-offcanvas*=notransition] .x-offcanvas_backdrop, .x-offcanvas[data-x-offcanvas*=notransition] .x-offcanvas_inner { transition: none; } .x-offcanvas[data-x-offcanvas*=fade] .x-offcanvas_inner[aria-hidden="true"] { opacity: 0; visibility: hidden; transform: none!important; } .x-offcanvas[data-x-offcanvas*=fade].x-offcanvas_inner[aria-hidden="false"] { opacity: 1; visibility: visible; transform: none!important; } } @supports (padding-top: env(safe-area-inset-top)) { .x-offcanvas_inner.x-offcanvas_left { --safe-area-inset-bottom: env(safe-area-inset-bottom); height: calc(100% + var(--safe-area-inset-bottom))!important; } .x-offcanvas_inner.x-offcanvas_right { --safe-area-inset-bottom: env(safe-area-inset-bottom); height: calc(100% + var(--safe-area-inset-bottom))!important; } } .admin-bar .x-offcanvas_inner.x-offcanvas_left { left: 0; right: auto; height: auto!important; bottom: 0; } .admin-bar .x-offcanvas_inner.x-offcanvas_right { right: 0; left: auto; height: auto!important; bottom: 0; } /* builder */ component.x-offcanvas, .x-offcanvas[data-id] { transform: none!important; } component.x-offcanvas.is-empty { min-width: 0; min-height: 0; } component > .x-offcanvas_inner, .x-offcanvas[data-id] .x-offcanvas_inner { display: flex; } component > .x-offcanvas_backdrop, .x-offcanvas[data-id] .x-offcanvas_backdrop { display: block; } .brx-body.iframe .x-offcanvas_inner { transform: none; } .brx-body.iframe div[data-x-offcanvas]:not([data-id]) { display: none; } .brx-body.iframe .x-offcanvas > div:nth-child(3) { display: none; } .brx-body.iframe .x-offcanvas_backdrop { opacity: 1; visibility: visible; } .brxe-xslidemenu { width: 100%; flex-direction: column; } .brxe-xslidemenu .menu-item a { color: inherit; display: flex; justify-content: space-between; align-items: stretch; padding: 10px; -webkit-tap-highlight-color: transparent; } .brxe-xslidemenu .menu-item { list-style-type: none; display: flex; flex-direction: column; width: 100%; } .x-slide-menu_list { padding: 0; margin: 0; width: 100%; flex-direction: column; } .brxe-xslidemenu .sub-menu { display: none; flex-direction: column; padding: 0; margin: 0; overflow: hidden; } :root { --x-slide-menu-indent: 0px; } .brxe-xslidemenu .sub-menu { text-indent: var(--x-slide-menu-indent) } .brxe-xslidemenu .sub-menu .sub-menu { text-indent: calc( var(--x-slide-menu-indent) * 2 ) } .brxe-xslidemenu .sub-menu .sub-menu .sub-menu { text-indent: calc( var(--x-slide-menu-indent) * 3 ) } .brxe-xslidemenu .sub-menu .sub-menu .sub-menu .sub-menu { text-indent: calc( var(--x-slide-menu-indent) * 4 ) } .brxe-xslidemenu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu { text-indent: calc( var(--x-slide-menu-indent) * 5 ) } .brxe-xslidemenu .menu-item-has-children > a[href*="#"] .x-slide-menu_dropdown-icon { pointer-events: none; } .x-slide-menu_dropdown-icon { background-color: transparent; fill: currentColor; width: 2em; display: flex; align-items: center; justify-content: center; color: inherit; } .x-slide-menu_dropdown-icon svg { font-size: 1em; height: 1em; width: 1em; stroke: currentColor; } .x-slide-menu_dropdown-icon > * { transition: all 0.4s ease; } [class*=brxe-] .x-slide-menu_dropdown-icon svg { height: 1em; width: 1em; } .x-slide-menu_dropdown-icon[aria-expanded=true] > * { transform: rotateX(180deg); } .x-slide-menu_dropdown-icon-click-area:first-of-type:nth-last-of-type(2) { display: none; } .brxe-xslidemenu a[href='#'] span[itemprop=name] { pointer-events: none; } .brxe-xslidemenu .screen-reader-text { clip: rect(1px,1px,1px,1px); height: 1px; overflow: hidden; position: absolute!important; width: 1px; word-wrap: normal!important; } .brxe-xslidemenu[data-x-expand-current] .current-menu-ancestor > .sub-menu { display: flex; } .brxe-xslidemenu[data-x-slide-menu*=clickSelector] { display: none; } .brx-body.iframe .brxe-xslidemenu[data-x-slide-menu*=hidden] { display: block; } .brx-body.iframe .brxe-xslidemenu.brx-draggable.is-empty { min-height: unset; } .x-sub-menu-icon { display: none; }:root { --x-header-fade-transition: 200ms; } #brx-header.x-header_sticky-active { position: fixed; top: 0; left: 0; right: 0; animation-name: x_header_fadein; animation-duration: var(--x-header-fade-transition); animation-iteration-count: 1; } #brx-header.x-header_sticky-active[data-x-scroll="0"] { animation-duration: 0ms; } .admin-bar #brx-header.x-header_sticky-active { top: var(--wp-admin--admin-bar--height); } #brx-header.x-header_sticky-hidden { animation-name: x_header_fadeout; animation-duration: var(---x-header-fade-transition); animation-iteration-count: 1; opacity: 0; pointer-events: none; } @media (max-width: 682px) { .admin-bar #brx-header.x-header_sticky-active { top: 0; } } @keyframes x_header_fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes x_header_fadeout { 0% { opacity: 1; } 100% { opacity: 0; } } .x-header { transition-duration: var(--x-header-fade-transition); transition-property: transform, opacity, visibility; transition-timing-function: linear; } .scrolling .brxe-xheaderrow { height: var(--x-sticky-header-height)!important; } #brx-header.x-header_not-pin:not([data-x-hide-effect=fade]) { transform: translateY(-100%); } #brx-header.x-header_not-pin[data-x-hide-effect=fade] { animation-name: x_header_fadeout; animation-duration: var(--x-header-fade-transition); animation-iteration-count: 1; opacity: 0; visibility: hidden; } #brx-header.x-header_sticky-active [data-x-sticky=hide]{ display: none!important; } #brx-header:not(.x-header_sticky-active) [data-x-sticky=show] { display: none!important; } #brx-header.x-header_sticky-active [data-x-sticky=show]:not(.brxe-xnotificationbar) { display: flex; }/* File: automatic-bricks.css - Version: 3.3.5 - Generated: 2025-07-07 07:22:58 */ body.bricks-is-frontend.bricks-is-frontend :focus { outline: none; box-shadow: none; } body.bricks-is-frontend.bricks-is-frontend :focus-visible { outline-style: solid; outline-color: var(--focus-color); outline-width: var(--focus-width); outline-offset: var(--focus-offset); } @supports not selector(:focus-visible) { body.bricks-is-frontend.bricks-is-frontend :focus { outline-style: solid; outline-color: var(--focus-color); outline-width: var(--focus-width); outline-offset: var(--focus-offset); } } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--action { --focus-color: var(--action); } body.bricks-is-frontend.bricks-is-frontend .focus--action *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--action:focus-within { --focus-color: var(--action); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--action-hover { --focus-color: var(--action-hover); } body.bricks-is-frontend.bricks-is-frontend .focus--action-hover *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--action-hover:focus-within { --focus-color: var(--action-hover); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--action-ultra-light { --focus-color: var(--action-ultra-light); } body.bricks-is-frontend.bricks-is-frontend .focus--action-ultra-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--action-ultra-light:focus-within { --focus-color: var(--action-ultra-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--action-light { --focus-color: var(--action-light); } body.bricks-is-frontend.bricks-is-frontend .focus--action-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--action-light:focus-within { --focus-color: var(--action-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--action-semi-light { --focus-color: var(--action-semi-light); } body.bricks-is-frontend.bricks-is-frontend .focus--action-semi-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--action-semi-light:focus-within { --focus-color: var(--action-semi-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--action-semi-dark { --focus-color: var(--action-semi-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--action-semi-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--action-semi-dark:focus-within { --focus-color: var(--action-semi-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--action-dark { --focus-color: var(--action-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--action-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--action-dark:focus-within { --focus-color: var(--action-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--action-ultra-dark { --focus-color: var(--action-ultra-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--action-ultra-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--action-ultra-dark:focus-within { --focus-color: var(--action-ultra-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--action-comp { --focus-color: var(--action-comp); } body.bricks-is-frontend.bricks-is-frontend .focus--action-comp *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--action-comp:focus-within { --focus-color: var(--action-comp); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--action-medium { --focus-color: var(--action-medium); } body.bricks-is-frontend.bricks-is-frontend .focus--action-medium *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--action-medium:focus-within { --focus-color: var(--action-medium); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--primary { --focus-color: var(--primary); } body.bricks-is-frontend.bricks-is-frontend .focus--primary *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--primary:focus-within { --focus-color: var(--primary); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--primary-hover { --focus-color: var(--primary-hover); } body.bricks-is-frontend.bricks-is-frontend .focus--primary-hover *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--primary-hover:focus-within { --focus-color: var(--primary-hover); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--primary-ultra-light { --focus-color: var(--primary-ultra-light); } body.bricks-is-frontend.bricks-is-frontend .focus--primary-ultra-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--primary-ultra-light:focus-within { --focus-color: var(--primary-ultra-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--primary-light { --focus-color: var(--primary-light); } body.bricks-is-frontend.bricks-is-frontend .focus--primary-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--primary-light:focus-within { --focus-color: var(--primary-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--primary-semi-light { --focus-color: var(--primary-semi-light); } body.bricks-is-frontend.bricks-is-frontend .focus--primary-semi-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--primary-semi-light:focus-within { --focus-color: var(--primary-semi-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--primary-semi-dark { --focus-color: var(--primary-semi-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--primary-semi-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--primary-semi-dark:focus-within { --focus-color: var(--primary-semi-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--primary-dark { --focus-color: var(--primary-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--primary-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--primary-dark:focus-within { --focus-color: var(--primary-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--primary-ultra-dark { --focus-color: var(--primary-ultra-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--primary-ultra-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--primary-ultra-dark:focus-within { --focus-color: var(--primary-ultra-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--primary-comp { --focus-color: var(--primary-comp); } body.bricks-is-frontend.bricks-is-frontend .focus--primary-comp *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--primary-comp:focus-within { --focus-color: var(--primary-comp); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--primary-medium { --focus-color: var(--primary-medium); } body.bricks-is-frontend.bricks-is-frontend .focus--primary-medium *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--primary-medium:focus-within { --focus-color: var(--primary-medium); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--secondary { --focus-color: var(--secondary); } body.bricks-is-frontend.bricks-is-frontend .focus--secondary *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--secondary:focus-within { --focus-color: var(--secondary); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--secondary-hover { --focus-color: var(--secondary-hover); } body.bricks-is-frontend.bricks-is-frontend .focus--secondary-hover *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--secondary-hover:focus-within { --focus-color: var(--secondary-hover); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--secondary-ultra-light { --focus-color: var(--secondary-ultra-light); } body.bricks-is-frontend.bricks-is-frontend .focus--secondary-ultra-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--secondary-ultra-light:focus-within { --focus-color: var(--secondary-ultra-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--secondary-light { --focus-color: var(--secondary-light); } body.bricks-is-frontend.bricks-is-frontend .focus--secondary-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--secondary-light:focus-within { --focus-color: var(--secondary-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--secondary-semi-light { --focus-color: var(--secondary-semi-light); } body.bricks-is-frontend.bricks-is-frontend .focus--secondary-semi-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--secondary-semi-light:focus-within { --focus-color: var(--secondary-semi-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--secondary-semi-dark { --focus-color: var(--secondary-semi-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--secondary-semi-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--secondary-semi-dark:focus-within { --focus-color: var(--secondary-semi-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--secondary-dark { --focus-color: var(--secondary-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--secondary-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--secondary-dark:focus-within { --focus-color: var(--secondary-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--secondary-ultra-dark { --focus-color: var(--secondary-ultra-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--secondary-ultra-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--secondary-ultra-dark:focus-within { --focus-color: var(--secondary-ultra-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--secondary-comp { --focus-color: var(--secondary-comp); } body.bricks-is-frontend.bricks-is-frontend .focus--secondary-comp *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--secondary-comp:focus-within { --focus-color: var(--secondary-comp); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--secondary-medium { --focus-color: var(--secondary-medium); } body.bricks-is-frontend.bricks-is-frontend .focus--secondary-medium *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--secondary-medium:focus-within { --focus-color: var(--secondary-medium); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--accent { --focus-color: var(--accent); } body.bricks-is-frontend.bricks-is-frontend .focus--accent *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--accent:focus-within { --focus-color: var(--accent); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--accent-hover { --focus-color: var(--accent-hover); } body.bricks-is-frontend.bricks-is-frontend .focus--accent-hover *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--accent-hover:focus-within { --focus-color: var(--accent-hover); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--accent-ultra-light { --focus-color: var(--accent-ultra-light); } body.bricks-is-frontend.bricks-is-frontend .focus--accent-ultra-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--accent-ultra-light:focus-within { --focus-color: var(--accent-ultra-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--accent-light { --focus-color: var(--accent-light); } body.bricks-is-frontend.bricks-is-frontend .focus--accent-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--accent-light:focus-within { --focus-color: var(--accent-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--accent-semi-light { --focus-color: var(--accent-semi-light); } body.bricks-is-frontend.bricks-is-frontend .focus--accent-semi-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--accent-semi-light:focus-within { --focus-color: var(--accent-semi-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--accent-semi-dark { --focus-color: var(--accent-semi-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--accent-semi-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--accent-semi-dark:focus-within { --focus-color: var(--accent-semi-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--accent-dark { --focus-color: var(--accent-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--accent-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--accent-dark:focus-within { --focus-color: var(--accent-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--accent-ultra-dark { --focus-color: var(--accent-ultra-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--accent-ultra-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--accent-ultra-dark:focus-within { --focus-color: var(--accent-ultra-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--accent-comp { --focus-color: var(--accent-comp); } body.bricks-is-frontend.bricks-is-frontend .focus--accent-comp *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--accent-comp:focus-within { --focus-color: var(--accent-comp); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--accent-medium { --focus-color: var(--accent-medium); } body.bricks-is-frontend.bricks-is-frontend .focus--accent-medium *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--accent-medium:focus-within { --focus-color: var(--accent-medium); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--base { --focus-color: var(--base); } body.bricks-is-frontend.bricks-is-frontend .focus--base *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--base:focus-within { --focus-color: var(--base); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--base-hover { --focus-color: var(--base-hover); } body.bricks-is-frontend.bricks-is-frontend .focus--base-hover *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--base-hover:focus-within { --focus-color: var(--base-hover); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--base-ultra-light { --focus-color: var(--base-ultra-light); } body.bricks-is-frontend.bricks-is-frontend .focus--base-ultra-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--base-ultra-light:focus-within { --focus-color: var(--base-ultra-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--base-light { --focus-color: var(--base-light); } body.bricks-is-frontend.bricks-is-frontend .focus--base-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--base-light:focus-within { --focus-color: var(--base-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--base-semi-light { --focus-color: var(--base-semi-light); } body.bricks-is-frontend.bricks-is-frontend .focus--base-semi-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--base-semi-light:focus-within { --focus-color: var(--base-semi-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--base-semi-dark { --focus-color: var(--base-semi-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--base-semi-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--base-semi-dark:focus-within { --focus-color: var(--base-semi-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--base-dark { --focus-color: var(--base-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--base-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--base-dark:focus-within { --focus-color: var(--base-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--base-ultra-dark { --focus-color: var(--base-ultra-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--base-ultra-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--base-ultra-dark:focus-within { --focus-color: var(--base-ultra-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--base-comp { --focus-color: var(--base-comp); } body.bricks-is-frontend.bricks-is-frontend .focus--base-comp *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--base-comp:focus-within { --focus-color: var(--base-comp); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--base-medium { --focus-color: var(--base-medium); } body.bricks-is-frontend.bricks-is-frontend .focus--base-medium *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--base-medium:focus-within { --focus-color: var(--base-medium); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--shade { --focus-color: var(--shade); } body.bricks-is-frontend.bricks-is-frontend .focus--shade *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--shade:focus-within { --focus-color: var(--shade); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--shade-hover { --focus-color: var(--shade-hover); } body.bricks-is-frontend.bricks-is-frontend .focus--shade-hover *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--shade-hover:focus-within { --focus-color: var(--shade-hover); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--shade-ultra-light { --focus-color: var(--shade-ultra-light); } body.bricks-is-frontend.bricks-is-frontend .focus--shade-ultra-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--shade-ultra-light:focus-within { --focus-color: var(--shade-ultra-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--shade-light { --focus-color: var(--shade-light); } body.bricks-is-frontend.bricks-is-frontend .focus--shade-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--shade-light:focus-within { --focus-color: var(--shade-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--shade-semi-light { --focus-color: var(--shade-semi-light); } body.bricks-is-frontend.bricks-is-frontend .focus--shade-semi-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--shade-semi-light:focus-within { --focus-color: var(--shade-semi-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--shade-semi-dark { --focus-color: var(--shade-semi-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--shade-semi-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--shade-semi-dark:focus-within { --focus-color: var(--shade-semi-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--shade-dark { --focus-color: var(--shade-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--shade-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--shade-dark:focus-within { --focus-color: var(--shade-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--shade-ultra-dark { --focus-color: var(--shade-ultra-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--shade-ultra-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--shade-ultra-dark:focus-within { --focus-color: var(--shade-ultra-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--shade-comp { --focus-color: var(--shade-comp); } body.bricks-is-frontend.bricks-is-frontend .focus--shade-comp *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--shade-comp:focus-within { --focus-color: var(--shade-comp); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--shade-medium { --focus-color: var(--shade-medium); } body.bricks-is-frontend.bricks-is-frontend .focus--shade-medium *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--shade-medium:focus-within { --focus-color: var(--shade-medium); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--neutral { --focus-color: var(--neutral); } body.bricks-is-frontend.bricks-is-frontend .focus--neutral *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--neutral:focus-within { --focus-color: var(--neutral); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--neutral-hover { --focus-color: var(--neutral-hover); } body.bricks-is-frontend.bricks-is-frontend .focus--neutral-hover *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--neutral-hover:focus-within { --focus-color: var(--neutral-hover); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--neutral-ultra-light { --focus-color: var(--neutral-ultra-light); } body.bricks-is-frontend.bricks-is-frontend .focus--neutral-ultra-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--neutral-ultra-light:focus-within { --focus-color: var(--neutral-ultra-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--neutral-light { --focus-color: var(--neutral-light); } body.bricks-is-frontend.bricks-is-frontend .focus--neutral-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--neutral-light:focus-within { --focus-color: var(--neutral-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--neutral-semi-light { --focus-color: var(--neutral-semi-light); } body.bricks-is-frontend.bricks-is-frontend .focus--neutral-semi-light *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--neutral-semi-light:focus-within { --focus-color: var(--neutral-semi-light); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--neutral-semi-dark { --focus-color: var(--neutral-semi-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--neutral-semi-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--neutral-semi-dark:focus-within { --focus-color: var(--neutral-semi-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--neutral-dark { --focus-color: var(--neutral-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--neutral-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--neutral-dark:focus-within { --focus-color: var(--neutral-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--neutral-ultra-dark { --focus-color: var(--neutral-ultra-dark); } body.bricks-is-frontend.bricks-is-frontend .focus--neutral-ultra-dark *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--neutral-ultra-dark:focus-within { --focus-color: var(--neutral-ultra-dark); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--neutral-comp { --focus-color: var(--neutral-comp); } body.bricks-is-frontend.bricks-is-frontend .focus--neutral-comp *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--neutral-comp:focus-within { --focus-color: var(--neutral-comp); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--neutral-medium { --focus-color: var(--neutral-medium); } body.bricks-is-frontend.bricks-is-frontend .focus--neutral-medium *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--neutral-medium:focus-within { --focus-color: var(--neutral-medium); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--white { --focus-color: var(--white); } body.bricks-is-frontend.bricks-is-frontend .focus--white *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--white:focus-within { --focus-color: var(--white); } body.bricks-is-frontend.bricks-is-frontend *:focus.focus--black { --focus-color: var(--black); } body.bricks-is-frontend.bricks-is-frontend .focus--black *:focus, body.bricks-is-frontend.bricks-is-frontend .focus--black:focus-within { --focus-color: var(--black); } .skip-link, .link--skip { position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem; transform: translateY(-250%); --btn-min-width: fit-content; background: var(--btn-background); color: var(--btn-text-color); padding-block: var(--btn-padding-block); padding-inline: var(--btn-padding-inline); min-inline-size: var(--btn-min-width); line-height: var(--btn-line-height); font-size: var(--btn-font-size, var(--text-m)); font-weight: var(--btn-font-weight); font-style: var(--btn-font-style); text-transform: var(--btn-text-transform); letter-spacing: var(--btn-letter-spacing); text-decoration: var(--btn-text-decoration); border-width: var(--btn-border-width); border-style: var(--btn-border-style); border-radius: var(--btn-radius); border-color: var(--btn-border-color); transition: var(--btn-transition, var(--transition)); justify-content: var(--btn-justify-content, center); text-align: var(--btn-text-align, center); --btn-background: var(--primary); --btn-background-hover: var(--primary-hover); --btn-text-color: var(--primary-ultra-light); --btn-text-color-hover: var(--primary-ultra-light); --btn-border-color: var(--primary); --btn-border-color-hover: var(--primary-hover); --focus-color: var(--primary-dark); } @media (hover: hover) and (pointer: fine) { .skip-link:hover, .link--skip:hover { background: var(--btn-background-hover); color: var(--btn-text-color-hover); border-color: var(--btn-border-color-hover); text-decoration: var(--btn-text-decoration-hover); } } .skip-link:focus, .link--skip:focus { outline-style: solid; outline-color: var(--focus-color); outline-width: var(--focus-width); outline-offset: var(--focus-offset); } .skip-link:focus, .link--skip:focus { transform: translateY(0); } .bricks-area .hidden-accessible { position: relative !important; inline-size: 2ch !important; block-size: 2ch !important; margin: 0; line-height: 1; visibility: hidden; } .bricks-area .hidden-accessible::before { content: "A"; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: absolute; background: #111; color: #f5f5f5; font-size: max(60%, 13px); padding: 0.5em; inset-block-start: 0; inset-inline-start: 0; inline-size: 20px; block-size: 20px; visibility: visible; border-radius: 50%; } .clickable-parent:not(a) { position: static; } .clickable-parent:not(a) a { position: static; } .clickable-parent:not(a) > a::after { content: ""; position: absolute; inset: 0; cursor: pointer !important; display: flex; z-index: 1; } button.clickable-parent, a.clickable-parent { position: static !important; } button.clickable-parent::after, a.clickable-parent::after { content: ""; position: absolute; inset: 0; cursor: pointer !important; display: flex; z-index: 1; } .bricks-area a.clickable-parent::after, .bricks-area .clickable-parent > a::after { content: ""; position: relative; } body { color: var(--body-color, var(--black)); background-color: var(--body-bg-color, var(--white)); } html:has(body.boxed-layout) { background-color: var(--device-bg-color, var(--white)); } body { font-size: var(--default-font-size, var(--text-m)); color: var(--text-color); line-height: var(--text-line-height); text-wrap: var(--text-text-wrap); } p, li { line-height: var(--text-line-height, calc()); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .h--1, .h--2, .h--3, .h--4, .h--5, .h--6 { line-height: var(--heading-line-height); font-weight: var(--heading-font-weight); max-width: var(--heading-max-width); text-wrap: var(--heading-text-wrap); } h1 { font-size: var(--h1); line-height: var(--h1-line-height); max-width: var(--h1-max-width); } h2 { font-size: var(--h2); line-height: var(--h2-line-height); max-width: var(--h2-max-width); } h3 { font-size: var(--h3); line-height: var(--h3-line-height); max-width: var(--h3-max-width); } h4 { font-size: var(--h4); line-height: var(--h4-line-height); max-width: var(--h4-max-width); } h5 { font-size: var(--h5); line-height: var(--h5-line-height); max-width: var(--h5-max-width); } h6 { font-size: var(--h6); line-height: var(--h6-line-height); max-width: var(--h6-max-width); } body a:where(:not([class*= btn--])) { color: var(--link-color, var(--action)); font-weight: var(--link-weight, 400); -webkit-text-decoration: var(--link-decoration, none); text-decoration: var(--link-decoration, none); text-underline-offset: var(--link-underline-offset, auto); transition: var(--link-transition, var(--transition)); } @media (hover: hover) and (pointer: fine) { body a:where(:not([class*= btn--])):hover { color: var(--link-color-hover, var(--action-hover)); } } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; text-decoration: inherit; color: currentcolor; text-underline-offset: var(--link-underline-offset, auto); } @media (hover: hover) and (pointer: fine) { h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: currentcolor; } } body:where(.bricks-is-frontend), body:where(:not(.bricks-is-frontend)) { color: var(--body-color, var(--black)); } .btn--primary { --btn-background: var(--primary); --btn-background-hover: var(--primary-hover); --btn-text-color: var(--primary-ultra-light); --btn-text-color-hover: var(--primary-ultra-light); --btn-border-color: var(--primary); --btn-border-color-hover: var(--primary-hover); --focus-color: var(--primary-dark); } .btn--primary-dark { --btn-background: var(--primary-dark); --btn-background-hover: var(--primary-ultra-dark); --btn-text-color: var(--primary-ultra-light); --btn-text-color-hover: var(--primary-ultra-light); --btn-border-color: var(--primary-dark); --btn-border-color-hover: var(--primary-ultra-dark); --focus-color: var(--primary-semi-dark); } .btn--primary-light { --btn-background: var(--primary-ultra-light); --btn-background-hover: var(--primary-light); --btn-text-color: var(--primary); --btn-text-color-hover: var(--primary-ultra-dark); --btn-border-color: var(--primary-ultra-light); --btn-border-color-hover: var(--primary-light); --focus-color: var(--primary-light); } .btn--primary.btn--outline { --btn-background: transparent; --btn-background-hover: var(--primary-hover); --btn-text-color: var(--primary); --btn-text-color-hover: var(--primary-ultra-light); --btn-border-width: 0.25rem; --btn-border-color: var(--primary); --btn-border-color-hover: var(--primary-hover); --focus-color: var(--primary-dark); } .btn--primary-dark.btn--outline { --btn-background: transparent; --btn-background-hover: var(--primary-dark); --btn-text-color: var(--primary-dark); --btn-text-color-hover: var(--primary-ultra-light); --btn-border-width: 0.25rem; --btn-border-color: var(--primary-dark); --btn-border-color-hover: var(--primary-dark); --focus-color: var(--primary-dark); } .btn--primary-light.btn--outline { --btn-background: transparent; --btn-background-hover: var(--primary-light); --btn-text-color: var(--primary-light); --btn-text-color-hover: var(--primary-dark); --btn-border-width: 0.25rem; --btn-border-color: var(--primary-light); --btn-border-color-hover: var(--primary-light); --focus-color: var(--primary-dark); } .btn--secondary { --btn-background: var(--secondary); --btn-background-hover: var(--secondary-hover); --btn-text-color: var(--secondary-ultra-light); --btn-text-color-hover: var(--secondary-ultra-light); --btn-border-color: var(--secondary); --btn-border-color-hover: var(--secondary-hover); --focus-color: var(--secondary-dark); } .btn--secondary-dark { --btn-background: var(--secondary-dark); --btn-background-hover: var(--secondary-ultra-dark); --btn-text-color: var(--secondary-ultra-light); --btn-text-color-hover: var(--secondary-ultra-light); --btn-border-color: var(--secondary-dark); --btn-border-color-hover: var(--secondary-ultra-dark); --focus-color: var(--secondary-semi-dark); } .btn--secondary-light { --btn-background: var(--secondary-ultra-light); --btn-background-hover: var(--secondary-light); --btn-text-color: var(--secondary); --btn-text-color-hover: var(--secondary-ultra-dark); --btn-border-color: var(--secondary-ultra-light); --btn-border-color-hover: var(--secondary-light); --focus-color: var(--secondary-light); } .btn--secondary.btn--outline { --btn-background: transparent; --btn-background-hover: var(--secondary-hover); --btn-text-color: var(--secondary); --btn-text-color-hover: var(--secondary-ultra-light); --btn-border-width: 0.25rem; --btn-border-color: var(--secondary); --btn-border-color-hover: var(--secondary-hover); --focus-color: var(--secondary-dark); } .btn--secondary-dark.btn--outline { --btn-background: transparent; --btn-background-hover: var(--secondary-dark); --btn-text-color: var(--secondary-dark); --btn-text-color-hover: var(--secondary-ultra-light); --btn-border-width: 0.25rem; --btn-border-color: var(--secondary-dark); --btn-border-color-hover: var(--secondary-dark); --focus-color: var(--secondary-dark); } .btn--secondary-light.btn--outline { --btn-background: transparent; --btn-background-hover: var(--secondary-light); --btn-text-color: var(--secondary-light); --btn-text-color-hover: var(--secondary-dark); --btn-border-width: 0.25rem; --btn-border-color: var(--secondary-light); --btn-border-color-hover: var(--secondary-light); --focus-color: var(--secondary-dark); } .btn--accent { --btn-background: var(--accent); --btn-background-hover: var(--accent-hover); --btn-text-color: var(--accent-ultra-light); --btn-text-color-hover: var(--accent-ultra-light); --btn-border-color: var(--accent); --btn-border-color-hover: var(--accent-hover); --focus-color: var(--accent-dark); } .btn--base { --btn-background: var(--base); --btn-background-hover: var(--base-hover); --btn-text-color: var(--base-ultra-light); --btn-text-color-hover: var(--base-ultra-light); --btn-border-color: var(--base); --btn-border-color-hover: var(--base-hover); --focus-color: var(--base-dark); } .btn--action { --btn-background: var(--action); --btn-background-hover: var(--action-hover); --btn-text-color: var(--action-ultra-light); --btn-text-color-hover: var(--action-ultra-light); --btn-border-color: var(--action); --btn-border-color-hover: var(--action-hover); --focus-color: var(--action-dark); } .btn--action.btn--outline { --btn-background: transparent; --btn-background-hover: var(--action-hover); --btn-text-color: var(--action); --btn-text-color-hover: var(--action-ultra-light); --btn-border-width: 0.25rem; --btn-border-color: var(--action); --btn-border-color-hover: var(--action-hover); --focus-color: var(--action-dark); } .btn--black { --btn-background: var(--shade-black); --btn-background-hover: var(--action-hover); --btn-text-color: var(--shade-white); --btn-text-color-hover: var(--shade-white); --btn-border-color: var(--shade-black); --btn-border-color-hover: var(--action-hover); --focus-color: var(--action); } .btn--black.btn--outline { --btn-background: transparent; --btn-background-hover: var(--white); --btn-text-color: var(--shade-black); --btn-text-color-hover: var(--action-ultra-light); --btn-border-width: 0.25rem; --btn-border-color: var(--black); --btn-border-color-hover: var(--white); --focus-color: var(--action); } .btn--white { --btn-background: var(--shade-white); --btn-background-hover: var(--action-hover); --btn-text-color: var(--shade-black); --btn-text-color-hover: var(--shade-white); --btn-border-color: var(--shade-white); --btn-border-color-hover: var(--action-hover); --focus-color: var(--action); } .btn--white.btn--outline { --btn-background: transparent; --btn-background-hover: var(--white); --btn-text-color: var(--shade-white); --btn-text-color-hover: var(--action-ultra-light); --btn-border-width: 0.25rem; --btn-border-color: var(--white); --btn-border-color-hover: var(--white); --focus-color: var(--action); } [class*="btn--"]:where(:not(.btn--none, .wp-block-button)) { background: var(--btn-background); color: var(--btn-text-color); padding-block: var(--btn-padding-block); padding-inline: var(--btn-padding-inline); min-inline-size: var(--btn-min-width); line-height: var(--btn-line-height); font-size: var(--btn-font-size, var(--text-m)); font-weight: var(--btn-font-weight); font-style: var(--btn-font-style); text-transform: var(--btn-text-transform); letter-spacing: var(--btn-letter-spacing); text-decoration: var(--btn-text-decoration); border-width: var(--btn-border-width); border-style: var(--btn-border-style); border-radius: var(--btn-radius); border-color: var(--btn-border-color); transition: var(--btn-transition, var(--transition)); justify-content: var(--btn-justify-content, center); text-align: var(--btn-text-align, center); } @media (hover: hover) and (pointer: fine) { [class*="btn--"]:where(:not(.btn--none, .wp-block-button)):hover { background: var(--btn-background-hover); color: var(--btn-text-color-hover); border-color: var(--btn-border-color-hover); text-decoration: var(--btn-text-decoration-hover); } } [class*="btn--"]:where(:not(.btn--none, .wp-block-button)):focus { outline-style: solid; outline-color: var(--focus-color); outline-width: var(--focus-width); outline-offset: var(--focus-offset); } .btn--xs { font-size: var(--text-xs); } .btn--s { font-size: var(--text-s); } .btn--m { font-size: var(--text-m); } .btn--l { font-size: var(--text-l); } .btn--xl { font-size: var(--text-xl); } .btn--xxl { font-size: var(--text-xxl); } .btn--clear.btn--clear, .btn--none.btn--none { background: none; border: none; } .flex-grid--1:not(.brxe-container), .brxe-container.flex-grid--1 { --gap: var(--grid-gap); display: flex; flex-direction: column; gap: var(--gap); } .flex-grid--1:not(.brxe-container) > *, .brxe-container.flex-grid--1 > * { width: 100%; max-width: 100%; flex-basis: auto; } .flex-grid--2:not(.brxe-container), .brxe-container.flex-grid--2 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--2:not(.brxe-container).gap--xs, .brxe-container.flex-grid--2.gap--xs { --gap: var(--space-xs); } .flex-grid--2:not(.brxe-container).gap--s, .brxe-container.flex-grid--2.gap--s { --gap: var(--space-s); } .flex-grid--2:not(.brxe-container).gap--m, .brxe-container.flex-grid--2.gap--m { --gap: var(--space-m); } .flex-grid--2:not(.brxe-container).gap--l, .brxe-container.flex-grid--2.gap--l { --gap: var(--space-l); } .flex-grid--2:not(.brxe-container).gap--xl, .brxe-container.flex-grid--2.gap--xl { --gap: var(--space-xl); } .flex-grid--2:not(.brxe-container).gap--xxl, .brxe-container.flex-grid--2.gap--xxl { --gap: var(--space-xxl); } .flex-grid--2:not(.brxe-container) > *, .brxe-container.flex-grid--2 > * { flex-basis: calc((100% - (var(--gap) * 1)) / 2); } .flex-grid--3:not(.brxe-container), .brxe-container.flex-grid--3 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--3:not(.brxe-container).gap--xs, .brxe-container.flex-grid--3.gap--xs { --gap: var(--space-xs); } .flex-grid--3:not(.brxe-container).gap--s, .brxe-container.flex-grid--3.gap--s { --gap: var(--space-s); } .flex-grid--3:not(.brxe-container).gap--m, .brxe-container.flex-grid--3.gap--m { --gap: var(--space-m); } .flex-grid--3:not(.brxe-container).gap--l, .brxe-container.flex-grid--3.gap--l { --gap: var(--space-l); } .flex-grid--3:not(.brxe-container).gap--xl, .brxe-container.flex-grid--3.gap--xl { --gap: var(--space-xl); } .flex-grid--3:not(.brxe-container).gap--xxl, .brxe-container.flex-grid--3.gap--xxl { --gap: var(--space-xxl); } .flex-grid--3:not(.brxe-container) > *, .brxe-container.flex-grid--3 > * { flex-basis: calc((100% - (var(--gap) * 2)) / 3); } .flex-grid--4:not(.brxe-container), .brxe-container.flex-grid--4 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--4:not(.brxe-container).gap--xs, .brxe-container.flex-grid--4.gap--xs { --gap: var(--space-xs); } .flex-grid--4:not(.brxe-container).gap--s, .brxe-container.flex-grid--4.gap--s { --gap: var(--space-s); } .flex-grid--4:not(.brxe-container).gap--m, .brxe-container.flex-grid--4.gap--m { --gap: var(--space-m); } .flex-grid--4:not(.brxe-container).gap--l, .brxe-container.flex-grid--4.gap--l { --gap: var(--space-l); } .flex-grid--4:not(.brxe-container).gap--xl, .brxe-container.flex-grid--4.gap--xl { --gap: var(--space-xl); } .flex-grid--4:not(.brxe-container).gap--xxl, .brxe-container.flex-grid--4.gap--xxl { --gap: var(--space-xxl); } .flex-grid--4:not(.brxe-container) > *, .brxe-container.flex-grid--4 > * { flex-basis: calc((100% - (var(--gap) * 3)) / 4); } .flex-grid--5:not(.brxe-container), .brxe-container.flex-grid--5 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--5:not(.brxe-container).gap--xs, .brxe-container.flex-grid--5.gap--xs { --gap: var(--space-xs); } .flex-grid--5:not(.brxe-container).gap--s, .brxe-container.flex-grid--5.gap--s { --gap: var(--space-s); } .flex-grid--5:not(.brxe-container).gap--m, .brxe-container.flex-grid--5.gap--m { --gap: var(--space-m); } .flex-grid--5:not(.brxe-container).gap--l, .brxe-container.flex-grid--5.gap--l { --gap: var(--space-l); } .flex-grid--5:not(.brxe-container).gap--xl, .brxe-container.flex-grid--5.gap--xl { --gap: var(--space-xl); } .flex-grid--5:not(.brxe-container).gap--xxl, .brxe-container.flex-grid--5.gap--xxl { --gap: var(--space-xxl); } .flex-grid--5:not(.brxe-container) > *, .brxe-container.flex-grid--5 > * { flex-basis: calc((100% - (var(--gap) * 4)) / 5); } .flex-grid--6:not(.brxe-container), .brxe-container.flex-grid--6 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--6:not(.brxe-container).gap--xs, .brxe-container.flex-grid--6.gap--xs { --gap: var(--space-xs); } .flex-grid--6:not(.brxe-container).gap--s, .brxe-container.flex-grid--6.gap--s { --gap: var(--space-s); } .flex-grid--6:not(.brxe-container).gap--m, .brxe-container.flex-grid--6.gap--m { --gap: var(--space-m); } .flex-grid--6:not(.brxe-container).gap--l, .brxe-container.flex-grid--6.gap--l { --gap: var(--space-l); } .flex-grid--6:not(.brxe-container).gap--xl, .brxe-container.flex-grid--6.gap--xl { --gap: var(--space-xl); } .flex-grid--6:not(.brxe-container).gap--xxl, .brxe-container.flex-grid--6.gap--xxl { --gap: var(--space-xxl); } .flex-grid--6:not(.brxe-container) > *, .brxe-container.flex-grid--6 > * { flex-basis: calc((100% - (var(--gap) * 5)) / 6); } @media (max-width: 1440px) { .flex-grid--xxl-1:not(.brxe-container), .brxe-container.flex-grid--xxl-1 { --gap: var(--grid-gap); display: flex; flex-direction: column; gap: var(--gap); } .flex-grid--xxl-1:not(.brxe-container) > *, .brxe-container.flex-grid--xxl-1 > * { width: 100%; max-width: 100%; flex-basis: auto; } .flex-grid--xxl-2:not(.brxe-container), .brxe-container.flex-grid--xxl-2 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--xxl-2:not(.brxe-container).gap--xxl-xs, .brxe-container.flex-grid--xxl-2.gap--xxl-xs { --gap: var(--space-xs); } .flex-grid--xxl-2:not(.brxe-container).gap--xxl-s, .brxe-container.flex-grid--xxl-2.gap--xxl-s { --gap: var(--space-s); } .flex-grid--xxl-2:not(.brxe-container).gap--xxl-m, .brxe-container.flex-grid--xxl-2.gap--xxl-m { --gap: var(--space-m); } .flex-grid--xxl-2:not(.brxe-container).gap--xxl-l, .brxe-container.flex-grid--xxl-2.gap--xxl-l { --gap: var(--space-l); } .flex-grid--xxl-2:not(.brxe-container).gap--xxl-xl, .brxe-container.flex-grid--xxl-2.gap--xxl-xl { --gap: var(--space-xl); } .flex-grid--xxl-2:not(.brxe-container).gap--xxl-xxl, .brxe-container.flex-grid--xxl-2.gap--xxl-xxl { --gap: var(--space-xxl); } .flex-grid--xxl-2:not(.brxe-container) > *, .brxe-container.flex-grid--xxl-2 > * { flex-basis: calc((100% - (var(--gap) * 1)) / 2); } .flex-grid--xxl-3:not(.brxe-container), .brxe-container.flex-grid--xxl-3 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--xxl-3:not(.brxe-container).gap--xxl-xs, .brxe-container.flex-grid--xxl-3.gap--xxl-xs { --gap: var(--space-xs); } .flex-grid--xxl-3:not(.brxe-container).gap--xxl-s, .brxe-container.flex-grid--xxl-3.gap--xxl-s { --gap: var(--space-s); } .flex-grid--xxl-3:not(.brxe-container).gap--xxl-m, .brxe-container.flex-grid--xxl-3.gap--xxl-m { --gap: var(--space-m); } .flex-grid--xxl-3:not(.brxe-container).gap--xxl-l, .brxe-container.flex-grid--xxl-3.gap--xxl-l { --gap: var(--space-l); } .flex-grid--xxl-3:not(.brxe-container).gap--xxl-xl, .brxe-container.flex-grid--xxl-3.gap--xxl-xl { --gap: var(--space-xl); } .flex-grid--xxl-3:not(.brxe-container).gap--xxl-xxl, .brxe-container.flex-grid--xxl-3.gap--xxl-xxl { --gap: var(--space-xxl); } .flex-grid--xxl-3:not(.brxe-container) > *, .brxe-container.flex-grid--xxl-3 > * { flex-basis: calc((100% - (var(--gap) * 2)) / 3); } .flex-grid--xxl-4:not(.brxe-container), .brxe-container.flex-grid--xxl-4 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--xxl-4:not(.brxe-container).gap--xxl-xs, .brxe-container.flex-grid--xxl-4.gap--xxl-xs { --gap: var(--space-xs); } .flex-grid--xxl-4:not(.brxe-container).gap--xxl-s, .brxe-container.flex-grid--xxl-4.gap--xxl-s { --gap: var(--space-s); } .flex-grid--xxl-4:not(.brxe-container).gap--xxl-m, .brxe-container.flex-grid--xxl-4.gap--xxl-m { --gap: var(--space-m); } .flex-grid--xxl-4:not(.brxe-container).gap--xxl-l, .brxe-container.flex-grid--xxl-4.gap--xxl-l { --gap: var(--space-l); } .flex-grid--xxl-4:not(.brxe-container).gap--xxl-xl, .brxe-container.flex-grid--xxl-4.gap--xxl-xl { --gap: var(--space-xl); } .flex-grid--xxl-4:not(.brxe-container).gap--xxl-xxl, .brxe-container.flex-grid--xxl-4.gap--xxl-xxl { --gap: var(--space-xxl); } .flex-grid--xxl-4:not(.brxe-container) > *, .brxe-container.flex-grid--xxl-4 > * { flex-basis: calc((100% - (var(--gap) * 3)) / 4); } .flex-grid--xxl-5:not(.brxe-container), .brxe-container.flex-grid--xxl-5 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--xxl-5:not(.brxe-container).gap--xxl-xs, .brxe-container.flex-grid--xxl-5.gap--xxl-xs { --gap: var(--space-xs); } .flex-grid--xxl-5:not(.brxe-container).gap--xxl-s, .brxe-container.flex-grid--xxl-5.gap--xxl-s { --gap: var(--space-s); } .flex-grid--xxl-5:not(.brxe-container).gap--xxl-m, .brxe-container.flex-grid--xxl-5.gap--xxl-m { --gap: var(--space-m); } .flex-grid--xxl-5:not(.brxe-container).gap--xxl-l, .brxe-container.flex-grid--xxl-5.gap--xxl-l { --gap: var(--space-l); } .flex-grid--xxl-5:not(.brxe-container).gap--xxl-xl, .brxe-container.flex-grid--xxl-5.gap--xxl-xl { --gap: var(--space-xl); } .flex-grid--xxl-5:not(.brxe-container).gap--xxl-xxl, .brxe-container.flex-grid--xxl-5.gap--xxl-xxl { --gap: var(--space-xxl); } .flex-grid--xxl-5:not(.brxe-container) > *, .brxe-container.flex-grid--xxl-5 > * { flex-basis: calc((100% - (var(--gap) * 4)) / 5); } .flex-grid--xxl-6:not(.brxe-container), .brxe-container.flex-grid--xxl-6 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--xxl-6:not(.brxe-container).gap--xxl-xs, .brxe-container.flex-grid--xxl-6.gap--xxl-xs { --gap: var(--space-xs); } .flex-grid--xxl-6:not(.brxe-container).gap--xxl-s, .brxe-container.flex-grid--xxl-6.gap--xxl-s { --gap: var(--space-s); } .flex-grid--xxl-6:not(.brxe-container).gap--xxl-m, .brxe-container.flex-grid--xxl-6.gap--xxl-m { --gap: var(--space-m); } .flex-grid--xxl-6:not(.brxe-container).gap--xxl-l, .brxe-container.flex-grid--xxl-6.gap--xxl-l { --gap: var(--space-l); } .flex-grid--xxl-6:not(.brxe-container).gap--xxl-xl, .brxe-container.flex-grid--xxl-6.gap--xxl-xl { --gap: var(--space-xl); } .flex-grid--xxl-6:not(.brxe-container).gap--xxl-xxl, .brxe-container.flex-grid--xxl-6.gap--xxl-xxl { --gap: var(--space-xxl); } .flex-grid--xxl-6:not(.brxe-container) > *, .brxe-container.flex-grid--xxl-6 > * { flex-basis: calc((100% - (var(--gap) * 5)) / 6); } } @media (max-width: 1366px) { .flex-grid--xl-1:not(.brxe-container), .brxe-container.flex-grid--xl-1 { --gap: var(--grid-gap); display: flex; flex-direction: column; gap: var(--gap); } .flex-grid--xl-1:not(.brxe-container) > *, .brxe-container.flex-grid--xl-1 > * { width: 100%; max-width: 100%; flex-basis: auto; } .flex-grid--xl-2:not(.brxe-container), .brxe-container.flex-grid--xl-2 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--xl-2:not(.brxe-container).gap--xl-xs, .brxe-container.flex-grid--xl-2.gap--xl-xs { --gap: var(--space-xs); } .flex-grid--xl-2:not(.brxe-container).gap--xl-s, .brxe-container.flex-grid--xl-2.gap--xl-s { --gap: var(--space-s); } .flex-grid--xl-2:not(.brxe-container).gap--xl-m, .brxe-container.flex-grid--xl-2.gap--xl-m { --gap: var(--space-m); } .flex-grid--xl-2:not(.brxe-container).gap--xl-l, .brxe-container.flex-grid--xl-2.gap--xl-l { --gap: var(--space-l); } .flex-grid--xl-2:not(.brxe-container).gap--xl-xl, .brxe-container.flex-grid--xl-2.gap--xl-xl { --gap: var(--space-xl); } .flex-grid--xl-2:not(.brxe-container).gap--xl-xxl, .brxe-container.flex-grid--xl-2.gap--xl-xxl { --gap: var(--space-xxl); } .flex-grid--xl-2:not(.brxe-container) > *, .brxe-container.flex-grid--xl-2 > * { flex-basis: calc((100% - (var(--gap) * 1)) / 2); } .flex-grid--xl-3:not(.brxe-container), .brxe-container.flex-grid--xl-3 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--xl-3:not(.brxe-container).gap--xl-xs, .brxe-container.flex-grid--xl-3.gap--xl-xs { --gap: var(--space-xs); } .flex-grid--xl-3:not(.brxe-container).gap--xl-s, .brxe-container.flex-grid--xl-3.gap--xl-s { --gap: var(--space-s); } .flex-grid--xl-3:not(.brxe-container).gap--xl-m, .brxe-container.flex-grid--xl-3.gap--xl-m { --gap: var(--space-m); } .flex-grid--xl-3:not(.brxe-container).gap--xl-l, .brxe-container.flex-grid--xl-3.gap--xl-l { --gap: var(--space-l); } .flex-grid--xl-3:not(.brxe-container).gap--xl-xl, .brxe-container.flex-grid--xl-3.gap--xl-xl { --gap: var(--space-xl); } .flex-grid--xl-3:not(.brxe-container).gap--xl-xxl, .brxe-container.flex-grid--xl-3.gap--xl-xxl { --gap: var(--space-xxl); } .flex-grid--xl-3:not(.brxe-container) > *, .brxe-container.flex-grid--xl-3 > * { flex-basis: calc((100% - (var(--gap) * 2)) / 3); } .flex-grid--xl-4:not(.brxe-container), .brxe-container.flex-grid--xl-4 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--xl-4:not(.brxe-container).gap--xl-xs, .brxe-container.flex-grid--xl-4.gap--xl-xs { --gap: var(--space-xs); } .flex-grid--xl-4:not(.brxe-container).gap--xl-s, .brxe-container.flex-grid--xl-4.gap--xl-s { --gap: var(--space-s); } .flex-grid--xl-4:not(.brxe-container).gap--xl-m, .brxe-container.flex-grid--xl-4.gap--xl-m { --gap: var(--space-m); } .flex-grid--xl-4:not(.brxe-container).gap--xl-l, .brxe-container.flex-grid--xl-4.gap--xl-l { --gap: var(--space-l); } .flex-grid--xl-4:not(.brxe-container).gap--xl-xl, .brxe-container.flex-grid--xl-4.gap--xl-xl { --gap: var(--space-xl); } .flex-grid--xl-4:not(.brxe-container).gap--xl-xxl, .brxe-container.flex-grid--xl-4.gap--xl-xxl { --gap: var(--space-xxl); } .flex-grid--xl-4:not(.brxe-container) > *, .brxe-container.flex-grid--xl-4 > * { flex-basis: calc((100% - (var(--gap) * 3)) / 4); } .flex-grid--xl-5:not(.brxe-container), .brxe-container.flex-grid--xl-5 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--xl-5:not(.brxe-container).gap--xl-xs, .brxe-container.flex-grid--xl-5.gap--xl-xs { --gap: var(--space-xs); } .flex-grid--xl-5:not(.brxe-container).gap--xl-s, .brxe-container.flex-grid--xl-5.gap--xl-s { --gap: var(--space-s); } .flex-grid--xl-5:not(.brxe-container).gap--xl-m, .brxe-container.flex-grid--xl-5.gap--xl-m { --gap: var(--space-m); } .flex-grid--xl-5:not(.brxe-container).gap--xl-l, .brxe-container.flex-grid--xl-5.gap--xl-l { --gap: var(--space-l); } .flex-grid--xl-5:not(.brxe-container).gap--xl-xl, .brxe-container.flex-grid--xl-5.gap--xl-xl { --gap: var(--space-xl); } .flex-grid--xl-5:not(.brxe-container).gap--xl-xxl, .brxe-container.flex-grid--xl-5.gap--xl-xxl { --gap: var(--space-xxl); } .flex-grid--xl-5:not(.brxe-container) > *, .brxe-container.flex-grid--xl-5 > * { flex-basis: calc((100% - (var(--gap) * 4)) / 5); } .flex-grid--xl-6:not(.brxe-container), .brxe-container.flex-grid--xl-6 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--xl-6:not(.brxe-container).gap--xl-xs, .brxe-container.flex-grid--xl-6.gap--xl-xs { --gap: var(--space-xs); } .flex-grid--xl-6:not(.brxe-container).gap--xl-s, .brxe-container.flex-grid--xl-6.gap--xl-s { --gap: var(--space-s); } .flex-grid--xl-6:not(.brxe-container).gap--xl-m, .brxe-container.flex-grid--xl-6.gap--xl-m { --gap: var(--space-m); } .flex-grid--xl-6:not(.brxe-container).gap--xl-l, .brxe-container.flex-grid--xl-6.gap--xl-l { --gap: var(--space-l); } .flex-grid--xl-6:not(.brxe-container).gap--xl-xl, .brxe-container.flex-grid--xl-6.gap--xl-xl { --gap: var(--space-xl); } .flex-grid--xl-6:not(.brxe-container).gap--xl-xxl, .brxe-container.flex-grid--xl-6.gap--xl-xxl { --gap: var(--space-xxl); } .flex-grid--xl-6:not(.brxe-container) > *, .brxe-container.flex-grid--xl-6 > * { flex-basis: calc((100% - (var(--gap) * 5)) / 6); } } @media (max-width: 991px) { .flex-grid--l-1:not(.brxe-container), .brxe-container.flex-grid--l-1 { --gap: var(--grid-gap); display: flex; flex-direction: column; gap: var(--gap); } .flex-grid--l-1:not(.brxe-container) > *, .brxe-container.flex-grid--l-1 > * { width: 100%; max-width: 100%; flex-basis: auto; } .flex-grid--l-2:not(.brxe-container), .brxe-container.flex-grid--l-2 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--l-2:not(.brxe-container).gap--l-xs, .brxe-container.flex-grid--l-2.gap--l-xs { --gap: var(--space-xs); } .flex-grid--l-2:not(.brxe-container).gap--l-s, .brxe-container.flex-grid--l-2.gap--l-s { --gap: var(--space-s); } .flex-grid--l-2:not(.brxe-container).gap--l-m, .brxe-container.flex-grid--l-2.gap--l-m { --gap: var(--space-m); } .flex-grid--l-2:not(.brxe-container).gap--l-l, .brxe-container.flex-grid--l-2.gap--l-l { --gap: var(--space-l); } .flex-grid--l-2:not(.brxe-container).gap--l-xl, .brxe-container.flex-grid--l-2.gap--l-xl { --gap: var(--space-xl); } .flex-grid--l-2:not(.brxe-container).gap--l-xxl, .brxe-container.flex-grid--l-2.gap--l-xxl { --gap: var(--space-xxl); } .flex-grid--l-2:not(.brxe-container) > *, .brxe-container.flex-grid--l-2 > * { flex-basis: calc((100% - (var(--gap) * 1)) / 2); } .flex-grid--l-3:not(.brxe-container), .brxe-container.flex-grid--l-3 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--l-3:not(.brxe-container).gap--l-xs, .brxe-container.flex-grid--l-3.gap--l-xs { --gap: var(--space-xs); } .flex-grid--l-3:not(.brxe-container).gap--l-s, .brxe-container.flex-grid--l-3.gap--l-s { --gap: var(--space-s); } .flex-grid--l-3:not(.brxe-container).gap--l-m, .brxe-container.flex-grid--l-3.gap--l-m { --gap: var(--space-m); } .flex-grid--l-3:not(.brxe-container).gap--l-l, .brxe-container.flex-grid--l-3.gap--l-l { --gap: var(--space-l); } .flex-grid--l-3:not(.brxe-container).gap--l-xl, .brxe-container.flex-grid--l-3.gap--l-xl { --gap: var(--space-xl); } .flex-grid--l-3:not(.brxe-container).gap--l-xxl, .brxe-container.flex-grid--l-3.gap--l-xxl { --gap: var(--space-xxl); } .flex-grid--l-3:not(.brxe-container) > *, .brxe-container.flex-grid--l-3 > * { flex-basis: calc((100% - (var(--gap) * 2)) / 3); } .flex-grid--l-4:not(.brxe-container), .brxe-container.flex-grid--l-4 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--l-4:not(.brxe-container).gap--l-xs, .brxe-container.flex-grid--l-4.gap--l-xs { --gap: var(--space-xs); } .flex-grid--l-4:not(.brxe-container).gap--l-s, .brxe-container.flex-grid--l-4.gap--l-s { --gap: var(--space-s); } .flex-grid--l-4:not(.brxe-container).gap--l-m, .brxe-container.flex-grid--l-4.gap--l-m { --gap: var(--space-m); } .flex-grid--l-4:not(.brxe-container).gap--l-l, .brxe-container.flex-grid--l-4.gap--l-l { --gap: var(--space-l); } .flex-grid--l-4:not(.brxe-container).gap--l-xl, .brxe-container.flex-grid--l-4.gap--l-xl { --gap: var(--space-xl); } .flex-grid--l-4:not(.brxe-container).gap--l-xxl, .brxe-container.flex-grid--l-4.gap--l-xxl { --gap: var(--space-xxl); } .flex-grid--l-4:not(.brxe-container) > *, .brxe-container.flex-grid--l-4 > * { flex-basis: calc((100% - (var(--gap) * 3)) / 4); } .flex-grid--l-5:not(.brxe-container), .brxe-container.flex-grid--l-5 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--l-5:not(.brxe-container).gap--l-xs, .brxe-container.flex-grid--l-5.gap--l-xs { --gap: var(--space-xs); } .flex-grid--l-5:not(.brxe-container).gap--l-s, .brxe-container.flex-grid--l-5.gap--l-s { --gap: var(--space-s); } .flex-grid--l-5:not(.brxe-container).gap--l-m, .brxe-container.flex-grid--l-5.gap--l-m { --gap: var(--space-m); } .flex-grid--l-5:not(.brxe-container).gap--l-l, .brxe-container.flex-grid--l-5.gap--l-l { --gap: var(--space-l); } .flex-grid--l-5:not(.brxe-container).gap--l-xl, .brxe-container.flex-grid--l-5.gap--l-xl { --gap: var(--space-xl); } .flex-grid--l-5:not(.brxe-container).gap--l-xxl, .brxe-container.flex-grid--l-5.gap--l-xxl { --gap: var(--space-xxl); } .flex-grid--l-5:not(.brxe-container) > *, .brxe-container.flex-grid--l-5 > * { flex-basis: calc((100% - (var(--gap) * 4)) / 5); } .flex-grid--l-6:not(.brxe-container), .brxe-container.flex-grid--l-6 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--l-6:not(.brxe-container).gap--l-xs, .brxe-container.flex-grid--l-6.gap--l-xs { --gap: var(--space-xs); } .flex-grid--l-6:not(.brxe-container).gap--l-s, .brxe-container.flex-grid--l-6.gap--l-s { --gap: var(--space-s); } .flex-grid--l-6:not(.brxe-container).gap--l-m, .brxe-container.flex-grid--l-6.gap--l-m { --gap: var(--space-m); } .flex-grid--l-6:not(.brxe-container).gap--l-l, .brxe-container.flex-grid--l-6.gap--l-l { --gap: var(--space-l); } .flex-grid--l-6:not(.brxe-container).gap--l-xl, .brxe-container.flex-grid--l-6.gap--l-xl { --gap: var(--space-xl); } .flex-grid--l-6:not(.brxe-container).gap--l-xxl, .brxe-container.flex-grid--l-6.gap--l-xxl { --gap: var(--space-xxl); } .flex-grid--l-6:not(.brxe-container) > *, .brxe-container.flex-grid--l-6 > * { flex-basis: calc((100% - (var(--gap) * 5)) / 6); } } @media (max-width: 767px) { .flex-grid--m-1:not(.brxe-container), .brxe-container.flex-grid--m-1 { --gap: var(--grid-gap); display: flex; flex-direction: column; gap: var(--gap); } .flex-grid--m-1:not(.brxe-container) > *, .brxe-container.flex-grid--m-1 > * { width: 100%; max-width: 100%; flex-basis: auto; } .flex-grid--m-2:not(.brxe-container), .brxe-container.flex-grid--m-2 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--m-2:not(.brxe-container).gap--m-xs, .brxe-container.flex-grid--m-2.gap--m-xs { --gap: var(--space-xs); } .flex-grid--m-2:not(.brxe-container).gap--m-s, .brxe-container.flex-grid--m-2.gap--m-s { --gap: var(--space-s); } .flex-grid--m-2:not(.brxe-container).gap--m-m, .brxe-container.flex-grid--m-2.gap--m-m { --gap: var(--space-m); } .flex-grid--m-2:not(.brxe-container).gap--m-l, .brxe-container.flex-grid--m-2.gap--m-l { --gap: var(--space-l); } .flex-grid--m-2:not(.brxe-container).gap--m-xl, .brxe-container.flex-grid--m-2.gap--m-xl { --gap: var(--space-xl); } .flex-grid--m-2:not(.brxe-container).gap--m-xxl, .brxe-container.flex-grid--m-2.gap--m-xxl { --gap: var(--space-xxl); } .flex-grid--m-2:not(.brxe-container) > *, .brxe-container.flex-grid--m-2 > * { flex-basis: calc((100% - (var(--gap) * 1)) / 2); } .flex-grid--m-3:not(.brxe-container), .brxe-container.flex-grid--m-3 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--m-3:not(.brxe-container).gap--m-xs, .brxe-container.flex-grid--m-3.gap--m-xs { --gap: var(--space-xs); } .flex-grid--m-3:not(.brxe-container).gap--m-s, .brxe-container.flex-grid--m-3.gap--m-s { --gap: var(--space-s); } .flex-grid--m-3:not(.brxe-container).gap--m-m, .brxe-container.flex-grid--m-3.gap--m-m { --gap: var(--space-m); } .flex-grid--m-3:not(.brxe-container).gap--m-l, .brxe-container.flex-grid--m-3.gap--m-l { --gap: var(--space-l); } .flex-grid--m-3:not(.brxe-container).gap--m-xl, .brxe-container.flex-grid--m-3.gap--m-xl { --gap: var(--space-xl); } .flex-grid--m-3:not(.brxe-container).gap--m-xxl, .brxe-container.flex-grid--m-3.gap--m-xxl { --gap: var(--space-xxl); } .flex-grid--m-3:not(.brxe-container) > *, .brxe-container.flex-grid--m-3 > * { flex-basis: calc((100% - (var(--gap) * 2)) / 3); } .flex-grid--m-4:not(.brxe-container), .brxe-container.flex-grid--m-4 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--m-4:not(.brxe-container).gap--m-xs, .brxe-container.flex-grid--m-4.gap--m-xs { --gap: var(--space-xs); } .flex-grid--m-4:not(.brxe-container).gap--m-s, .brxe-container.flex-grid--m-4.gap--m-s { --gap: var(--space-s); } .flex-grid--m-4:not(.brxe-container).gap--m-m, .brxe-container.flex-grid--m-4.gap--m-m { --gap: var(--space-m); } .flex-grid--m-4:not(.brxe-container).gap--m-l, .brxe-container.flex-grid--m-4.gap--m-l { --gap: var(--space-l); } .flex-grid--m-4:not(.brxe-container).gap--m-xl, .brxe-container.flex-grid--m-4.gap--m-xl { --gap: var(--space-xl); } .flex-grid--m-4:not(.brxe-container).gap--m-xxl, .brxe-container.flex-grid--m-4.gap--m-xxl { --gap: var(--space-xxl); } .flex-grid--m-4:not(.brxe-container) > *, .brxe-container.flex-grid--m-4 > * { flex-basis: calc((100% - (var(--gap) * 3)) / 4); } .flex-grid--m-5:not(.brxe-container), .brxe-container.flex-grid--m-5 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--m-5:not(.brxe-container).gap--m-xs, .brxe-container.flex-grid--m-5.gap--m-xs { --gap: var(--space-xs); } .flex-grid--m-5:not(.brxe-container).gap--m-s, .brxe-container.flex-grid--m-5.gap--m-s { --gap: var(--space-s); } .flex-grid--m-5:not(.brxe-container).gap--m-m, .brxe-container.flex-grid--m-5.gap--m-m { --gap: var(--space-m); } .flex-grid--m-5:not(.brxe-container).gap--m-l, .brxe-container.flex-grid--m-5.gap--m-l { --gap: var(--space-l); } .flex-grid--m-5:not(.brxe-container).gap--m-xl, .brxe-container.flex-grid--m-5.gap--m-xl { --gap: var(--space-xl); } .flex-grid--m-5:not(.brxe-container).gap--m-xxl, .brxe-container.flex-grid--m-5.gap--m-xxl { --gap: var(--space-xxl); } .flex-grid--m-5:not(.brxe-container) > *, .brxe-container.flex-grid--m-5 > * { flex-basis: calc((100% - (var(--gap) * 4)) / 5); } .flex-grid--m-6:not(.brxe-container), .brxe-container.flex-grid--m-6 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--m-6:not(.brxe-container).gap--m-xs, .brxe-container.flex-grid--m-6.gap--m-xs { --gap: var(--space-xs); } .flex-grid--m-6:not(.brxe-container).gap--m-s, .brxe-container.flex-grid--m-6.gap--m-s { --gap: var(--space-s); } .flex-grid--m-6:not(.brxe-container).gap--m-m, .brxe-container.flex-grid--m-6.gap--m-m { --gap: var(--space-m); } .flex-grid--m-6:not(.brxe-container).gap--m-l, .brxe-container.flex-grid--m-6.gap--m-l { --gap: var(--space-l); } .flex-grid--m-6:not(.brxe-container).gap--m-xl, .brxe-container.flex-grid--m-6.gap--m-xl { --gap: var(--space-xl); } .flex-grid--m-6:not(.brxe-container).gap--m-xxl, .brxe-container.flex-grid--m-6.gap--m-xxl { --gap: var(--space-xxl); } .flex-grid--m-6:not(.brxe-container) > *, .brxe-container.flex-grid--m-6 > * { flex-basis: calc((100% - (var(--gap) * 5)) / 6); } } @media (max-width: 468px) { .flex-grid--s-1:not(.brxe-container), .brxe-container.flex-grid--s-1 { --gap: var(--grid-gap); display: flex; flex-direction: column; gap: var(--gap); } .flex-grid--s-1:not(.brxe-container) > *, .brxe-container.flex-grid--s-1 > * { width: 100%; max-width: 100%; flex-basis: auto; } .flex-grid--s-2:not(.brxe-container), .brxe-container.flex-grid--s-2 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--s-2:not(.brxe-container).gap--s-xs, .brxe-container.flex-grid--s-2.gap--s-xs { --gap: var(--space-xs); } .flex-grid--s-2:not(.brxe-container).gap--s-s, .brxe-container.flex-grid--s-2.gap--s-s { --gap: var(--space-s); } .flex-grid--s-2:not(.brxe-container).gap--s-m, .brxe-container.flex-grid--s-2.gap--s-m { --gap: var(--space-m); } .flex-grid--s-2:not(.brxe-container).gap--s-l, .brxe-container.flex-grid--s-2.gap--s-l { --gap: var(--space-l); } .flex-grid--s-2:not(.brxe-container).gap--s-xl, .brxe-container.flex-grid--s-2.gap--s-xl { --gap: var(--space-xl); } .flex-grid--s-2:not(.brxe-container).gap--s-xxl, .brxe-container.flex-grid--s-2.gap--s-xxl { --gap: var(--space-xxl); } .flex-grid--s-2:not(.brxe-container) > *, .brxe-container.flex-grid--s-2 > * { flex-basis: calc((100% - (var(--gap) * 1)) / 2); } .flex-grid--s-3:not(.brxe-container), .brxe-container.flex-grid--s-3 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--s-3:not(.brxe-container).gap--s-xs, .brxe-container.flex-grid--s-3.gap--s-xs { --gap: var(--space-xs); } .flex-grid--s-3:not(.brxe-container).gap--s-s, .brxe-container.flex-grid--s-3.gap--s-s { --gap: var(--space-s); } .flex-grid--s-3:not(.brxe-container).gap--s-m, .brxe-container.flex-grid--s-3.gap--s-m { --gap: var(--space-m); } .flex-grid--s-3:not(.brxe-container).gap--s-l, .brxe-container.flex-grid--s-3.gap--s-l { --gap: var(--space-l); } .flex-grid--s-3:not(.brxe-container).gap--s-xl, .brxe-container.flex-grid--s-3.gap--s-xl { --gap: var(--space-xl); } .flex-grid--s-3:not(.brxe-container).gap--s-xxl, .brxe-container.flex-grid--s-3.gap--s-xxl { --gap: var(--space-xxl); } .flex-grid--s-3:not(.brxe-container) > *, .brxe-container.flex-grid--s-3 > * { flex-basis: calc((100% - (var(--gap) * 2)) / 3); } .flex-grid--s-4:not(.brxe-container), .brxe-container.flex-grid--s-4 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--s-4:not(.brxe-container).gap--s-xs, .brxe-container.flex-grid--s-4.gap--s-xs { --gap: var(--space-xs); } .flex-grid--s-4:not(.brxe-container).gap--s-s, .brxe-container.flex-grid--s-4.gap--s-s { --gap: var(--space-s); } .flex-grid--s-4:not(.brxe-container).gap--s-m, .brxe-container.flex-grid--s-4.gap--s-m { --gap: var(--space-m); } .flex-grid--s-4:not(.brxe-container).gap--s-l, .brxe-container.flex-grid--s-4.gap--s-l { --gap: var(--space-l); } .flex-grid--s-4:not(.brxe-container).gap--s-xl, .brxe-container.flex-grid--s-4.gap--s-xl { --gap: var(--space-xl); } .flex-grid--s-4:not(.brxe-container).gap--s-xxl, .brxe-container.flex-grid--s-4.gap--s-xxl { --gap: var(--space-xxl); } .flex-grid--s-4:not(.brxe-container) > *, .brxe-container.flex-grid--s-4 > * { flex-basis: calc((100% - (var(--gap) * 3)) / 4); } .flex-grid--s-5:not(.brxe-container), .brxe-container.flex-grid--s-5 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--s-5:not(.brxe-container).gap--s-xs, .brxe-container.flex-grid--s-5.gap--s-xs { --gap: var(--space-xs); } .flex-grid--s-5:not(.brxe-container).gap--s-s, .brxe-container.flex-grid--s-5.gap--s-s { --gap: var(--space-s); } .flex-grid--s-5:not(.brxe-container).gap--s-m, .brxe-container.flex-grid--s-5.gap--s-m { --gap: var(--space-m); } .flex-grid--s-5:not(.brxe-container).gap--s-l, .brxe-container.flex-grid--s-5.gap--s-l { --gap: var(--space-l); } .flex-grid--s-5:not(.brxe-container).gap--s-xl, .brxe-container.flex-grid--s-5.gap--s-xl { --gap: var(--space-xl); } .flex-grid--s-5:not(.brxe-container).gap--s-xxl, .brxe-container.flex-grid--s-5.gap--s-xxl { --gap: var(--space-xxl); } .flex-grid--s-5:not(.brxe-container) > *, .brxe-container.flex-grid--s-5 > * { flex-basis: calc((100% - (var(--gap) * 4)) / 5); } .flex-grid--s-6:not(.brxe-container), .brxe-container.flex-grid--s-6 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--s-6:not(.brxe-container).gap--s-xs, .brxe-container.flex-grid--s-6.gap--s-xs { --gap: var(--space-xs); } .flex-grid--s-6:not(.brxe-container).gap--s-s, .brxe-container.flex-grid--s-6.gap--s-s { --gap: var(--space-s); } .flex-grid--s-6:not(.brxe-container).gap--s-m, .brxe-container.flex-grid--s-6.gap--s-m { --gap: var(--space-m); } .flex-grid--s-6:not(.brxe-container).gap--s-l, .brxe-container.flex-grid--s-6.gap--s-l { --gap: var(--space-l); } .flex-grid--s-6:not(.brxe-container).gap--s-xl, .brxe-container.flex-grid--s-6.gap--s-xl { --gap: var(--space-xl); } .flex-grid--s-6:not(.brxe-container).gap--s-xxl, .brxe-container.flex-grid--s-6.gap--s-xxl { --gap: var(--space-xxl); } .flex-grid--s-6:not(.brxe-container) > *, .brxe-container.flex-grid--s-6 > * { flex-basis: calc((100% - (var(--gap) * 5)) / 6); } } @media (max-width: 360px) { .flex-grid--xs-1:not(.brxe-container), .brxe-container.flex-grid--xs-1 { --gap: var(--grid-gap); display: flex; flex-direction: column; gap: var(--gap); } .flex-grid--xs-1:not(.brxe-container) > *, .brxe-container.flex-grid--xs-1 > * { width: 100%; max-width: 100%; flex-basis: auto; } .flex-grid--xs-2:not(.brxe-container), .brxe-container.flex-grid--xs-2 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--xs-2:not(.brxe-container).gap--xs-xs, .brxe-container.flex-grid--xs-2.gap--xs-xs { --gap: var(--space-xs); } .flex-grid--xs-2:not(.brxe-container).gap--xs-s, .brxe-container.flex-grid--xs-2.gap--xs-s { --gap: var(--space-s); } .flex-grid--xs-2:not(.brxe-container).gap--xs-m, .brxe-container.flex-grid--xs-2.gap--xs-m { --gap: var(--space-m); } .flex-grid--xs-2:not(.brxe-container).gap--xs-l, .brxe-container.flex-grid--xs-2.gap--xs-l { --gap: var(--space-l); } .flex-grid--xs-2:not(.brxe-container).gap--xs-xl, .brxe-container.flex-grid--xs-2.gap--xs-xl { --gap: var(--space-xl); } .flex-grid--xs-2:not(.brxe-container).gap--xs-xxl, .brxe-container.flex-grid--xs-2.gap--xs-xxl { --gap: var(--space-xxl); } .flex-grid--xs-2:not(.brxe-container) > *, .brxe-container.flex-grid--xs-2 > * { flex-basis: calc((100% - (var(--gap) * 1)) / 2); } .flex-grid--xs-3:not(.brxe-container), .brxe-container.flex-grid--xs-3 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--xs-3:not(.brxe-container).gap--xs-xs, .brxe-container.flex-grid--xs-3.gap--xs-xs { --gap: var(--space-xs); } .flex-grid--xs-3:not(.brxe-container).gap--xs-s, .brxe-container.flex-grid--xs-3.gap--xs-s { --gap: var(--space-s); } .flex-grid--xs-3:not(.brxe-container).gap--xs-m, .brxe-container.flex-grid--xs-3.gap--xs-m { --gap: var(--space-m); } .flex-grid--xs-3:not(.brxe-container).gap--xs-l, .brxe-container.flex-grid--xs-3.gap--xs-l { --gap: var(--space-l); } .flex-grid--xs-3:not(.brxe-container).gap--xs-xl, .brxe-container.flex-grid--xs-3.gap--xs-xl { --gap: var(--space-xl); } .flex-grid--xs-3:not(.brxe-container).gap--xs-xxl, .brxe-container.flex-grid--xs-3.gap--xs-xxl { --gap: var(--space-xxl); } .flex-grid--xs-3:not(.brxe-container) > *, .brxe-container.flex-grid--xs-3 > * { flex-basis: calc((100% - (var(--gap) * 2)) / 3); } .flex-grid--xs-4:not(.brxe-container), .brxe-container.flex-grid--xs-4 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--xs-4:not(.brxe-container).gap--xs-xs, .brxe-container.flex-grid--xs-4.gap--xs-xs { --gap: var(--space-xs); } .flex-grid--xs-4:not(.brxe-container).gap--xs-s, .brxe-container.flex-grid--xs-4.gap--xs-s { --gap: var(--space-s); } .flex-grid--xs-4:not(.brxe-container).gap--xs-m, .brxe-container.flex-grid--xs-4.gap--xs-m { --gap: var(--space-m); } .flex-grid--xs-4:not(.brxe-container).gap--xs-l, .brxe-container.flex-grid--xs-4.gap--xs-l { --gap: var(--space-l); } .flex-grid--xs-4:not(.brxe-container).gap--xs-xl, .brxe-container.flex-grid--xs-4.gap--xs-xl { --gap: var(--space-xl); } .flex-grid--xs-4:not(.brxe-container).gap--xs-xxl, .brxe-container.flex-grid--xs-4.gap--xs-xxl { --gap: var(--space-xxl); } .flex-grid--xs-4:not(.brxe-container) > *, .brxe-container.flex-grid--xs-4 > * { flex-basis: calc((100% - (var(--gap) * 3)) / 4); } .flex-grid--xs-5:not(.brxe-container), .brxe-container.flex-grid--xs-5 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--xs-5:not(.brxe-container).gap--xs-xs, .brxe-container.flex-grid--xs-5.gap--xs-xs { --gap: var(--space-xs); } .flex-grid--xs-5:not(.brxe-container).gap--xs-s, .brxe-container.flex-grid--xs-5.gap--xs-s { --gap: var(--space-s); } .flex-grid--xs-5:not(.brxe-container).gap--xs-m, .brxe-container.flex-grid--xs-5.gap--xs-m { --gap: var(--space-m); } .flex-grid--xs-5:not(.brxe-container).gap--xs-l, .brxe-container.flex-grid--xs-5.gap--xs-l { --gap: var(--space-l); } .flex-grid--xs-5:not(.brxe-container).gap--xs-xl, .brxe-container.flex-grid--xs-5.gap--xs-xl { --gap: var(--space-xl); } .flex-grid--xs-5:not(.brxe-container).gap--xs-xxl, .brxe-container.flex-grid--xs-5.gap--xs-xxl { --gap: var(--space-xxl); } .flex-grid--xs-5:not(.brxe-container) > *, .brxe-container.flex-grid--xs-5 > * { flex-basis: calc((100% - (var(--gap) * 4)) / 5); } .flex-grid--xs-6:not(.brxe-container), .brxe-container.flex-grid--xs-6 { --gap: var(--grid-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); justify-content: center; } .flex-grid--xs-6:not(.brxe-container).gap--xs-xs, .brxe-container.flex-grid--xs-6.gap--xs-xs { --gap: var(--space-xs); } .flex-grid--xs-6:not(.brxe-container).gap--xs-s, .brxe-container.flex-grid--xs-6.gap--xs-s { --gap: var(--space-s); } .flex-grid--xs-6:not(.brxe-container).gap--xs-m, .brxe-container.flex-grid--xs-6.gap--xs-m { --gap: var(--space-m); } .flex-grid--xs-6:not(.brxe-container).gap--xs-l, .brxe-container.flex-grid--xs-6.gap--xs-l { --gap: var(--space-l); } .flex-grid--xs-6:not(.brxe-container).gap--xs-xl, .brxe-container.flex-grid--xs-6.gap--xs-xl { --gap: var(--space-xl); } .flex-grid--xs-6:not(.brxe-container).gap--xs-xxl, .brxe-container.flex-grid--xs-6.gap--xs-xxl { --gap: var(--space-xxl); } .flex-grid--xs-6:not(.brxe-container) > *, .brxe-container.flex-grid--xs-6 > * { flex-basis: calc((100% - (var(--gap) * 5)) / 6); } } #bricks-blank-canvas .description { max-width: 100%; } /* File: automatic-frames.css - Version: 3.3.5 - Generated: 2025-07-07 07:22:58 */ :root { --fr-bg-light: var(--bg-light); --fr-bg-dark: var(--bg-dark); --fr-text-light: var(--text-light); --fr-text-dark: var(--text-dark); --fr-card-padding: var(--card-padding, var(--space-m)); --fr-card-gap: var(--card-gap, var(--space-s)); --fr-card-border-size: var(--card-border-width, 0.15rem); --fr-card-border-color: var(--card-border-color, var(--shade-light)); --fr-card-border-style: var(--card-border-style, solid); --fr-card-radius: var(--card-radius, var(--radius-xs)); --fr-card-avatar-radius: var(--card-avatar-radius, 50%); --fr-lede-width: 60ch; --fr-list-pad-y: 0.75em; --fr-list-pad-x: 1.25em; --fr-hero-padding: var(--section-space-xl); } .fr-lede, p.fr-lede { max-width: 60ch; } .fr-hero-padding { padding-block: var(--fr-hero-padding); } .fr-text--light { color: var(--text-light); } .fr-text--dark { color: var(--text-dark); } .fr-bg--light { background-color: var(--bg-light); } .fr-bg--dark { background-color: var(--bg-dark); }