.fl-node-u8y6v904pd2x > .fl-row-content-wrap { margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; } .fl-node-u8y6v904pd2x > .fl-row-content-wrap { padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; } @media ( max-width: 768px ) { .fl-node-u8y6v904pd2x.fl-row > .fl-row-content-wrap { padding-right:0px; padding-left:0px; } } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-8fir6oek5xgq { width: 100%; } /*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */.hamburger{font:inherit;display:inline-block;overflow:visible;margin:0;padding:15px;cursor:pointer;transition-timing-function:linear;transition-duration:.15s;transition-property:opacity,filter;text-transform:none;color:inherit;border:0;background-color:transparent}.hamburger.is-active:hover,.hamburger:hover{opacity:.7}.hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner:after,.hamburger.is-active .hamburger-inner:before{background-color:#000}.hamburger-box{position:relative;display:inline-block;width:40px;height:24px}.hamburger-inner{top:50%;display:block;margin-top:-2px}.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{position:absolute;width:40px;height:4px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform;border-radius:4px;background-color:#000}.hamburger-inner:after,.hamburger-inner:before{display:block;content:""}.hamburger-inner:before{top:-10px}.hamburger-inner:after{bottom:-10px}.hamburger--3dx .hamburger-box{perspective:80px}.hamburger--3dx .hamburger-inner{transition:transform .15s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dx .hamburger-inner:after,.hamburger--3dx .hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dx.is-active .hamburger-inner{transform:rotateY(180deg);background-color:transparent!important}.hamburger--3dx.is-active .hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--3dx.is-active .hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--3dx-r .hamburger-box{perspective:80px}.hamburger--3dx-r .hamburger-inner{transition:transform .15s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dx-r .hamburger-inner:after,.hamburger--3dx-r .hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dx-r.is-active .hamburger-inner{transform:rotateY(-180deg);background-color:transparent!important}.hamburger--3dx-r.is-active .hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--3dx-r.is-active .hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--3dy .hamburger-box{perspective:80px}.hamburger--3dy .hamburger-inner{transition:transform .15s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dy .hamburger-inner:after,.hamburger--3dy .hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dy.is-active .hamburger-inner{transform:rotateX(-180deg);background-color:transparent!important}.hamburger--3dy.is-active .hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--3dy.is-active .hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--3dy-r .hamburger-box{perspective:80px}.hamburger--3dy-r .hamburger-inner{transition:transform .15s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dy-r .hamburger-inner:after,.hamburger--3dy-r .hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dy-r.is-active .hamburger-inner{transform:rotateX(180deg);background-color:transparent!important}.hamburger--3dy-r.is-active .hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--3dy-r.is-active .hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--3dxy .hamburger-box{perspective:80px}.hamburger--3dxy .hamburger-inner{transition:transform .15s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dxy .hamburger-inner:after,.hamburger--3dxy .hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dxy.is-active .hamburger-inner{transform:rotateX(180deg) rotateY(180deg);background-color:transparent!important}.hamburger--3dxy.is-active .hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--3dxy.is-active .hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--3dxy-r .hamburger-box{perspective:80px}.hamburger--3dxy-r .hamburger-inner{transition:transform .15s cubic-bezier(.645,.045,.355,1),background-color 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dxy-r .hamburger-inner:after,.hamburger--3dxy-r .hamburger-inner:before{transition:transform 0s cubic-bezier(.645,.045,.355,1) .1s}.hamburger--3dxy-r.is-active .hamburger-inner{transform:rotateX(180deg) rotateY(180deg) rotate(-180deg);background-color:transparent!important}.hamburger--3dxy-r.is-active .hamburger-inner:before{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--3dxy-r.is-active .hamburger-inner:after{transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--arrow.is-active .hamburger-inner:before{transform:translate3d(-8px,0,0) rotate(-45deg) scaleX(.7)}.hamburger--arrow.is-active .hamburger-inner:after{transform:translate3d(-8px,0,0) rotate(45deg) scaleX(.7)}.hamburger--arrow-r.is-active .hamburger-inner:before{transform:translate3d(8px,0,0) rotate(45deg) scaleX(.7)}.hamburger--arrow-r.is-active .hamburger-inner:after{transform:translate3d(8px,0,0) rotate(-45deg) scaleX(.7)}.hamburger--arrowalt .hamburger-inner:before{transition:top .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.hamburger--arrowalt .hamburger-inner:after{transition:bottom .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.hamburger--arrowalt.is-active .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)}.hamburger--arrowalt.is-active .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)}.hamburger--arrowalt-r .hamburger-inner:before{transition:top .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.hamburger--arrowalt-r .hamburger-inner:after{transition:bottom .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)}.hamburger--arrowalt-r.is-active .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)}.hamburger--arrowalt-r.is-active .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)}.hamburger--arrowturn.is-active .hamburger-inner{transform:rotate(-180deg)}.hamburger--arrowturn.is-active .hamburger-inner:before{transform:translate3d(8px,0,0) rotate(45deg) scaleX(.7)}.hamburger--arrowturn.is-active .hamburger-inner:after{transform:translate3d(8px,0,0) rotate(-45deg) scaleX(.7)}.hamburger--arrowturn-r.is-active .hamburger-inner{transform:rotate(-180deg)}.hamburger--arrowturn-r.is-active .hamburger-inner:before{transform:translate3d(-8px,0,0) rotate(-45deg) scaleX(.7)}.hamburger--arrowturn-r.is-active .hamburger-inner:after{transform:translate3d(-8px,0,0) rotate(45deg) scaleX(.7)}.hamburger--boring .hamburger-inner,.hamburger--boring .hamburger-inner:after,.hamburger--boring .hamburger-inner:before{transition-property:none}.hamburger--boring.is-active .hamburger-inner{transform:rotate(45deg)}.hamburger--boring.is-active .hamburger-inner:before{top:0;opacity:0}.hamburger--boring.is-active .hamburger-inner:after{bottom:0;transform:rotate(-90deg)}.hamburger--collapse .hamburger-inner{top:auto;bottom:0;transition-delay:.13s;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.13s}.hamburger--collapse .hamburger-inner:after{top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear}.hamburger--collapse .hamburger-inner:before{transition:top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.hamburger--collapse.is-active .hamburger-inner{transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--collapse.is-active .hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s;opacity:0}.hamburger--collapse.is-active .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)}.hamburger--collapse-r .hamburger-inner{top:auto;bottom:0;transition-delay:.13s;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.13s}.hamburger--collapse-r .hamburger-inner:after{top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear}.hamburger--collapse-r .hamburger-inner:before{transition:top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.hamburger--collapse-r.is-active .hamburger-inner{transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,-10px,0) rotate(45deg)}.hamburger--collapse-r.is-active .hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s;opacity:0}.hamburger--collapse-r.is-active .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)}.hamburger--elastic .hamburger-inner{top:2px;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);transition-duration:.275s}.hamburger--elastic .hamburger-inner:before{top:10px;transition:opacity .125s ease .275s}.hamburger--elastic .hamburger-inner:after{top:20px;transition:transform .275s cubic-bezier(.68,-.55,.265,1.55)}.hamburger--elastic.is-active .hamburger-inner{transition-delay:75ms;transform:translate3d(0,10px,0) rotate(135deg)}.hamburger--elastic.is-active .hamburger-inner:before{transition-delay:0s;opacity:0}.hamburger--elastic.is-active .hamburger-inner:after{transition-delay:75ms;transform:translate3d(0,-20px,0) rotate(-270deg)}.hamburger--elastic-r .hamburger-inner{top:2px;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);transition-duration:.275s}.hamburger--elastic-r .hamburger-inner:before{top:10px;transition:opacity .125s ease .275s}.hamburger--elastic-r .hamburger-inner:after{top:20px;transition:transform .275s cubic-bezier(.68,-.55,.265,1.55)}.hamburger--elastic-r.is-active .hamburger-inner{transition-delay:75ms;transform:translate3d(0,10px,0) rotate(-135deg)}.hamburger--elastic-r.is-active .hamburger-inner:before{transition-delay:0s;opacity:0}.hamburger--elastic-r.is-active .hamburger-inner:after{transition-delay:75ms;transform:translate3d(0,-20px,0) rotate(270deg)}.hamburger--emphatic{overflow:hidden}.hamburger--emphatic .hamburger-inner{transition:background-color .125s ease-in .175s}.hamburger--emphatic .hamburger-inner:before{left:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,left .125s ease-in .175s}.hamburger--emphatic .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}.hamburger--emphatic.is-active .hamburger-inner{transition-delay:0s;transition-timing-function:ease-out;background-color:transparent!important}.hamburger--emphatic.is-active .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)}.hamburger--emphatic.is-active .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)}.hamburger--emphatic-r{overflow:hidden}.hamburger--emphatic-r .hamburger-inner{transition:background-color .125s ease-in .175s}.hamburger--emphatic-r .hamburger-inner:before{left:0;transition:transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,left .125s ease-in .175s}.hamburger--emphatic-r .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}.hamburger--emphatic-r.is-active .hamburger-inner{transition-delay:0s;transition-timing-function:ease-out;background-color:transparent!important}.hamburger--emphatic-r.is-active .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)}.hamburger--emphatic-r.is-active .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)}.hamburger--minus .hamburger-inner:after,.hamburger--minus .hamburger-inner:before{transition:bottom .08s ease-out 0s,top .08s ease-out 0s,opacity 0s linear}.hamburger--minus.is-active .hamburger-inner:after,.hamburger--minus.is-active .hamburger-inner:before{transition:bottom .08s ease-out,top .08s ease-out,opacity 0s linear .08s;opacity:0}.hamburger--minus.is-active .hamburger-inner:before{top:0}.hamburger--minus.is-active .hamburger-inner:after{bottom:0}.hamburger--slider .hamburger-inner{top:2px}.hamburger--slider .hamburger-inner:before{top:10px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform,opacity}.hamburger--slider .hamburger-inner:after{top:20px}.hamburger--slider.is-active .hamburger-inner{transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--slider.is-active .hamburger-inner:before{transform:rotate(-45deg) translate3d(-5.71429px,-6px,0);opacity:0}.hamburger--slider.is-active .hamburger-inner:after{transform:translate3d(0,-20px,0) rotate(-90deg)}.hamburger--slider-r .hamburger-inner{top:2px}.hamburger--slider-r .hamburger-inner:before{top:10px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform,opacity}.hamburger--slider-r .hamburger-inner:after{top:20px}.hamburger--slider-r.is-active .hamburger-inner{transform:translate3d(0,10px,0) rotate(-45deg)}.hamburger--slider-r.is-active .hamburger-inner:before{transform:rotate(45deg) translate3d(5.71429px,-6px,0);opacity:0}.hamburger--slider-r.is-active .hamburger-inner:after{transform:translate3d(0,-20px,0) rotate(90deg)}.hamburger--spin .hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.22s}.hamburger--spin .hamburger-inner:before{transition:top .1s ease-in .25s,opacity .1s ease-in}.hamburger--spin .hamburger-inner:after{transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)}.hamburger--spin.is-active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(225deg)}.hamburger--spin.is-active .hamburger-inner:before{top:0;transition:top .1s ease-out,opacity .1s ease-out .12s;opacity:0}.hamburger--spin.is-active .hamburger-inner:after{bottom:0;transition:bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(-90deg)}.hamburger--spin-r .hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.22s}.hamburger--spin-r .hamburger-inner:before{transition:top .1s ease-in .25s,opacity .1s ease-in}.hamburger--spin-r .hamburger-inner:after{transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)}.hamburger--spin-r.is-active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(-225deg)}.hamburger--spin-r.is-active .hamburger-inner:before{top:0;transition:top .1s ease-out,opacity .1s ease-out .12s;opacity:0}.hamburger--spin-r.is-active .hamburger-inner:after{bottom:0;transition:bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(90deg)}.hamburger--spring .hamburger-inner{top:2px;transition:background-color 0s linear .13s}.hamburger--spring .hamburger-inner:before{top:10px;transition:top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.hamburger--spring .hamburger-inner:after{top:20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.hamburger--spring.is-active .hamburger-inner{transition-delay:.22s;background-color:transparent!important}.hamburger--spring.is-active .hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;transform:translate3d(0,10px,0) rotate(45deg)}.hamburger--spring.is-active .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)}.hamburger--spring-r .hamburger-inner{top:auto;bottom:0;transition-delay:0s;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.13s}.hamburger--spring-r .hamburger-inner:after{top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity 0s linear}.hamburger--spring-r .hamburger-inner:before{transition:top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.hamburger--spring-r.is-active .hamburger-inner{transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,-10px,0) rotate(-45deg)}.hamburger--spring-r.is-active .hamburger-inner:after{top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity 0s linear .22s;opacity:0}.hamburger--spring-r.is-active .hamburger-inner:before{top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;transform:rotate(90deg)}.hamburger--stand .hamburger-inner{transition:transform 75ms cubic-bezier(.55,.055,.675,.19) .15s,background-color 0s linear 75ms}.hamburger--stand .hamburger-inner:before{transition:top 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.hamburger--stand .hamburger-inner:after{transition:bottom 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.hamburger--stand.is-active .hamburger-inner{transition:transform 75ms cubic-bezier(.215,.61,.355,1) 0s,background-color 0s linear .15s;transform:rotate(90deg);background-color:transparent!important}.hamburger--stand.is-active .hamburger-inner:before{top:0;transition:top 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;transform:rotate(-45deg)}.hamburger--stand.is-active .hamburger-inner:after{bottom:0;transition:bottom 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;transform:rotate(45deg)}.hamburger--stand-r .hamburger-inner{transition:transform 75ms cubic-bezier(.55,.055,.675,.19) .15s,background-color 0s linear 75ms}.hamburger--stand-r .hamburger-inner:before{transition:top 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.hamburger--stand-r .hamburger-inner:after{transition:bottom 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0s}.hamburger--stand-r.is-active .hamburger-inner{transition:transform 75ms cubic-bezier(.215,.61,.355,1) 0s,background-color 0s linear .15s;transform:rotate(-90deg);background-color:transparent!important}.hamburger--stand-r.is-active .hamburger-inner:before{top:0;transition:top 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;transform:rotate(-45deg)}.hamburger--stand-r.is-active .hamburger-inner:after{bottom:0;transition:bottom 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;transform:rotate(45deg)}.hamburger--squeeze .hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:75ms}.hamburger--squeeze .hamburger-inner:before{transition:top 75ms ease .12s,opacity 75ms ease}.hamburger--squeeze .hamburger-inner:after{transition:bottom 75ms ease .12s,transform 75ms cubic-bezier(.55,.055,.675,.19)}.hamburger--squeeze.is-active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(45deg)}.hamburger--squeeze.is-active .hamburger-inner:before{top:0;transition:top 75ms ease,opacity 75ms ease .12s;opacity:0}.hamburger--squeeze.is-active .hamburger-inner:after{bottom:0;transition:bottom 75ms ease,transform 75ms cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(-90deg)}.hamburger--vortex .hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:.2s}.hamburger--vortex .hamburger-inner:after,.hamburger--vortex .hamburger-inner:before{transition-delay:.1s;transition-timing-function:linear;transition-duration:0s}.hamburger--vortex .hamburger-inner:before{transition-property:top,opacity}.hamburger--vortex .hamburger-inner:after{transition-property:bottom,transform}.hamburger--vortex.is-active .hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transform:rotate(765deg)}.hamburger--vortex.is-active .hamburger-inner:after,.hamburger--vortex.is-active .hamburger-inner:before{transition-delay:0s}.hamburger--vortex.is-active .hamburger-inner:before{top:0;opacity:0}.hamburger--vortex.is-active .hamburger-inner:after{bottom:0;transform:rotate(90deg)}.hamburger--vortex-r .hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:.2s}.hamburger--vortex-r .hamburger-inner:after,.hamburger--vortex-r .hamburger-inner:before{transition-delay:.1s;transition-timing-function:linear;transition-duration:0s}.hamburger--vortex-r .hamburger-inner:before{transition-property:top,opacity}.hamburger--vortex-r .hamburger-inner:after{transition-property:bottom,transform}.hamburger--vortex-r.is-active .hamburger-inner{transition-timing-function:cubic-bezier(.19,1,.22,1);transform:rotate(-765deg)}.hamburger--vortex-r.is-active .hamburger-inner:after,.hamburger--vortex-r.is-active .hamburger-inner:before{transition-delay:0s}.hamburger--vortex-r.is-active .hamburger-inner:before{top:0;opacity:0}.hamburger--vortex-r.is-active .hamburger-inner:after{bottom:0;transform:rotate(-90deg)} /* Vehicle Megamenu Styles */ /* "Curtain drop" open/close (matches the v5 header): the panel is clipped to nothing (bottom inset 100%) and unrolls downward while the content block slides down its full height in sync, so the megamenu emerges from behind the header. The open bottom inset goes negative so the box-shadow isn't clipped. pointer-events is gated so the panel can't catch hovers while it is retracting (visibility interpolates as visible mid-transition). */ .vehicle-megamenu { position: fixed; top: 100px; /* Will be dynamically updated by JavaScript */ left: 0; right: 0; background: #ffffff; background: var(--megamenu-bg, #ffffff); border: 1px solid #e1e1e1; border-top: none; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0); pointer-events: none; transition: opacity 0.3s ease-in, clip-path 0.3s ease-in, visibility 0.3s; z-index: 9999; width: 100%; margin: 0 auto; } .vehicle-megamenu.show { opacity: 1; visibility: visible; clip-path: inset(0 0 -60px 0); pointer-events: auto; } .vehicle-megamenu-content { padding: 32px 16px; transform: translateY(-100%); transition: transform 0.3s ease-in; } .vehicle-megamenu.show .vehicle-megamenu-content { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .vehicle-megamenu, .vehicle-megamenu-content { transition-duration: 0s; } } .vehicle-megamenu-loading { text-align: center; padding: 40px 20px; color: #666; } .loading-spinner { width: 24px; height: 24px; border: 3px solid #f3f3f3; border-top: 3px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 15px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .vehicle-megamenu.loading .vehicle-megamenu-makes { display: none; } /* Main content layout */ .vehicle-megamenu-main-content { display: flex; gap: 30px; margin-bottom: 20px; } .vehicle-megamenu-vehicles-section { flex: 1; position: relative; overflow: hidden; /* Ensure fade doesn't overflow */ } .vehicle-megamenu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, auto)); gap: 32px 16px; justify-content: right; } .space-header-v3-a .vehicle-megamenu[data-submenu-position="left"] .vehicle-megamenu-grid { justify-content: left; } /* Submenu section */ .vehicle-megamenu-submenu { min-width: 200px; flex-shrink: 0; border-left: 1px solid #e1e1e1; padding-left: 32px; padding-right: 32px; } /* Left-positioned submenu variant */ .vehicle-megamenu .vehicle-megamenu-main-content .vehicle-megamenu-submenu.left { order: -1; border-left: none; border-right: 1px solid #e1e1e1; padding-left: 32px; padding-right: 32px; } .vehicle-megamenu-submenu-header { font-size: 18px; font-weight: 700; color: #333; margin-bottom: 15px; } .vehicle-megamenu-submenu-items { display: flex; flex-direction: column; gap: 8px; } .vehicle-megamenu-submenu-item { font-size: 14px; color: #666; text-decoration: none; padding: 6px 0; transition: color 0.2s ease; } .vehicle-megamenu-submenu-item:hover { color: #0066cc; text-decoration: none; } .models-horizontal span.vehicle-megamenu-model-name { display: block; text-align: center; font-size: 18px; } .vehicle-megamenu-make { padding-bottom: 15px; } .vehicle-megamenu-make:last-child { border-bottom: none; } .vehicle-megamenu-make-header { margin-bottom: 16px; text-align: left; } .vehicle-megamenu-make-title { font-size: 18px; font-weight: 700; color: #333; text-decoration: none; display: block; margin-bottom: 0; transition: color 0.2s ease; } .vehicle-megamenu-make-title:hover { color: #0066cc; text-decoration: none; } .vehicle-megamenu-models { display: flex; flex-direction: column; gap: 8px; } /* Horizontal models row for single-OEM layout */ .vehicle-megamenu-models.models-horizontal { display: grid; align-items: center; padding: 0 0 60px 32px; /* Added bottom padding for fade area */ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; max-height: calc(100vh - 320px); overflow: scroll; position: relative; } .models-horizontal span.vehicle-count { display: block; text-align: center; } .vehicle-megamenu-models.models-horizontal::-webkit-scrollbar { display: none; } /* Wrapper for models-horizontal needs fade effect */ .vehicle-megamenu-vehicles-section:has(.models-horizontal) { position: relative; } .vehicle-megamenu-vehicles-section:has(.models-horizontal)::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(to bottom, transparent 0%, var(--megamenu-bg-fade, rgba(255, 255, 255, 0.7)) 40%, var(--megamenu-bg-fade-strong, rgba(255, 255, 255, 0.95)) 70%, var(--megamenu-bg, #ffffff) 100%); pointer-events: none; z-index: 10; } /* Dark theme support for megamenu fade */ .vehicle-megamenu[data-theme="dark"] { --megamenu-bg: #2d2d2d; --megamenu-bg-fade: rgba(45, 45, 45, 0.7); --megamenu-bg-fade-strong: rgba(45, 45, 45, 0.95); } /* Alternative: if the megamenu has a dark background color set directly */ .vehicle-megamenu[style*="background: #2"] .vehicle-megamenu-vehicles-section:has(.models-horizontal)::after, .vehicle-megamenu[style*="background: #3"] .vehicle-megamenu-vehicles-section:has(.models-horizontal)::after, .vehicle-megamenu[style*="background: #4"] .vehicle-megamenu-vehicles-section:has(.models-horizontal)::after, .vehicle-megamenu[style*="background-color: #2"] .vehicle-megamenu-vehicles-section:has(.models-horizontal)::after, .vehicle-megamenu[style*="background-color: #3"] .vehicle-megamenu-vehicles-section:has(.models-horizontal)::after, .vehicle-megamenu[style*="background-color: #4"] .vehicle-megamenu-vehicles-section:has(.models-horizontal)::after { background: linear-gradient(to bottom, transparent 0%, rgba(45, 45, 45, 0.7) 40%, rgba(45, 45, 45, 0.95) 70%, rgba(45, 45, 45, 1) 100%); } /* * For custom megamenu backgrounds, you should add CSS variables after your custom styles. * Example for dark background #1f1e21: * * .vehicle-megamenu { * background: #1f1e21; * --megamenu-bg: #1f1e21; * --megamenu-bg-fade: rgba(31, 30, 33, 0.7); * --megamenu-bg-fade-strong: rgba(31, 30, 33, 0.95); * } */ /* Direct selector for dark themed megamenus - add this to your custom CSS after setting background */ .vehicle-megamenu.dark-theme .vehicle-megamenu-vehicles-section:has(.models-horizontal)::after { background: linear-gradient(to bottom, transparent 0%, rgba(31, 30, 33, 0.7) 40%, rgba(31, 30, 33, 0.95) 70%, rgba(31, 30, 33, 1) 100%); } .vehicle-megamenu-main-content:has(.vehicle-megamenu-submenu.left) .vehicle-megamenu-models.models-horizontal { padding-left: 0; padding-right: 32px; padding-bottom: 60px; /* Maintain bottom padding for fade area */ } .vehicle-megamenu-submenu.left { text-align: right; } .vehicle-megamenu-submenu.right { text-align: left; } .vehicle-megamenu-models.models-horizontal .vehicle-megamenu-model.has-image img.vehicle-jellybean { width: 160px; height: auto; max-height: 120px; flex: 0 0 auto; display: block; object-fit: contain; transition: transform .25s ease; transform-origin: center center; will-change: transform; } @media (min-width: 1025px) { .vehicle-megamenu-models.models-horizontal .vehicle-megamenu-model.has-image:hover img.vehicle-jellybean { transform: scale(1.06); /* slight enlarge without affecting layout flow */ } .vehicle-megamenu-submenu-items a:hover { text-decoration: underline !important; } li.megamenu-trigger a:after { content: '\f107'; position: absolute; left: 0; right: 0; width: 10px; margin: auto; bottom: -16px; font-family: 'Font Awesome 7 Pro'; font-weight: 100; opacity: 0; transition: .25s all ease-in-out; pointer-events: none; } .space-header-v3-desktop-menu:has(.vehicle-megamenu.show) li.megamenu-trigger a:after { opacity: 1; bottom: -22px; } } .vehicle-megamenu-models.models-horizontal .vehicle-megamenu-model { display: inline-flex; align-items: center; padding: 8px 12px 16px !important; border-radius: 6px; white-space: nowrap; justify-content: center; } .vehicle-megamenu-models.models-horizontal .vehicle-megamenu-model.has-image .vehicle-jellybean { width: 56px; margin-right: 10px; } .vehicle-megamenu-models.models-horizontal::-webkit-scrollbar { height: 4px; } .vehicle-megamenu-model { font-size: 16px; color: #666; text-decoration: none; padding: 6px 0; transition: color 0.2s ease; border-bottom: 1px solid transparent; display: block; font-weight: 600; } .vehicle-megamenu-model:hover { color: #0066cc; text-decoration: none; } /* Jellybean image styles */ .vehicle-megamenu-model.has-image { padding: 8px 0; } .vehicle-megamenu-model-content { display: flex; align-items: center; gap: 6px; } .vehicle-jellybean { width: 64px; height: auto; object-fit: contain; flex-shrink: 0; margin-right: 16px; } a.vehicle-megamenu-make-title:before { content: ''; width: 100%; max-width: 85px; height: 36px; display: block; background-size: contain; background-repeat: no-repeat; vertical-align: middle; background-position: center; margin: auto; } .space-header-v3-column.space-header-v3-column-desktop-menu li.menu-item-has-children ul.sub-menu { width: max-content !important; padding: 12px 0; } .vehicle-megamenu-make-title span { display: none; } a.vehicle-megamenu-make-title[data-make="Chevrolet"]:before { background-image: url(/wp-content/plugins/space-multisite/includes/space-builder/loop-srp/img/logos/chevrolet.png); } a.vehicle-megamenu-make-title[data-make="Chrysler"]:before { background-image: url(/wp-content/plugins/space-multisite/includes/space-builder/loop-srp/img/logos/chrysler.png); } a.vehicle-megamenu-make-title[data-make="Dodge"]:before { background-image: url(/wp-content/plugins/space-multisite/includes/space-builder/loop-srp/img/logos/dodge3.png); height: 50px; margin-top: -14px; } a.vehicle-megamenu-make-title[data-make="Jeep"]:before { background-image: url(/wp-content/plugins/space-multisite/includes/space-builder/loop-srp/img/logos/jeep.png); } a.vehicle-megamenu-make-title[data-make="Toyota"]:before { background-image: url(/wp-content/plugins/space-multisite/includes/space-builder/loop-srp/img/logos/toyota.png); } a.vehicle-megamenu-make-title[data-make="RAM"]:before { background-image: url(/wp-content/plugins/space-multisite/includes/space-builder/loop-srp/img/logos/ram-logo-2.png); } a.vehicle-megamenu-make-title[data-make="Tesla"]:before { background-image: url(/wp-content/plugins/space-multisite/includes/space-builder/loop-srp/img/logos/tesla.png); } a.vehicle-megamenu-make-title[data-make="Rivian"]:before { background-image: url(/wp-content/plugins/space-multisite/includes/space-builder/loop-srp/img/logos/rivian.png); } .vehicle-megamenu-model-text { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; text-align: left; } a.vehicle-megamenu-make-title[data-make="GMC"]:before { background-image: url(/wp-content/plugins/space-multisite/includes/space-builder/loop-srp/img/logos/gmc.png); } a.vehicle-megamenu-make-title[data-make="Buick"]:before { background-image: url(/wp-content/plugins/space-multisite/includes/space-builder/loop-srp/img/logos/buick.png); } /* Models without images keep simple layout */ .vehicle-megamenu-model:not(.has-image) { padding: 6px 0; } .vehicle-count { font-weight: 400; color: #999; font-size: 0.9em; } .vehicle-megamenu-make-title .vehicle-count { color: #0066cc; font-weight: 600; } .vehicle-megamenu-footer { padding-top: 20px; text-align: center; width: 100%; margin-top: 0; } .vehicle-megamenu-error { text-align: center; padding: 40px 20px; color: #999; font-style: italic; } /* Responsive Design */ @media (max-width: 1024px) { .vehicle-megamenu-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; } .vehicle-megamenu-content { padding: 16px; } .vehicle-megamenu-main-content { gap: 16px; } .vehicle-megamenu-submenu { min-width: 180px; padding-left: 16px; } } @media (max-width: 900px) { .vehicle-megamenu-main-content { flex-direction: column; gap: 20px; } .vehicle-megamenu-submenu { border-left: none; border-top: 1px solid #e1e1e1; padding-left: 0; padding-top: 20px; min-width: auto; } } @media (max-width: 768px) { .vehicle-megamenu { display: none !important; /* Hide on mobile - menu should use standard dropdown behavior */ } } /* Integration with existing header styles */ .space-header-v3 { position: relative; } .space-header-v3-column-desktop-menu { position: relative; } /* Ensure megamenu appears above other elements */ .space-header-v3-column-desktop-menu:hover .vehicle-megamenu, .vehicle-megamenu:hover { z-index: 10000; } /* Position megamenu relative to header navigation */ .space-header-v3-desktop-menu { position: relative; } /* Suppress the native WP submenu for the megamenu trigger item */ .space-header-v3-desktop-menu li.megamenu-trigger > .sub-menu, .space-header-v3-desktop-menu li.megamenu-trigger:hover > .sub-menu, .space-header-v3-desktop-menu li.megamenu-trigger:focus-within > .sub-menu { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* Style adjustments for different header styles */ .space-header-v3-a .vehicle-megamenu { margin-top: 0; } .space-header-v3-b .vehicle-megamenu { margin-top: 0; } /* Hover states for menu items that trigger megamenu */ .space-header-v3-desktop-menu a[href*="vehicles"]:hover, .space-header-v3-desktop-menu li:has(.vehicle-megamenu-trigger):hover a { color: #0066cc; } /* Loading state improvements */ .vehicle-megamenu.loading .loading-spinner { border-top-color: var(--fl-button-background-color, #3498db); } /* Custom scrollbar for long lists */ .vehicle-megamenu-models::-webkit-scrollbar { width: 4px; } .vehicle-megamenu-models::-webkit-scrollbar-track { background: #f1f1f1; } .vehicle-megamenu-models::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 2px; } .vehicle-megamenu-models::-webkit-scrollbar-thumb:hover { background: #a1a1a1; } .fl-node-1dtcn0lg2p3f .space-header-v3-wrap .space-header-v3-column-desktop-menu a.vehicle-megamenu-view-all { display: inline-block; padding: 12px 30px; background: var(--primary-color); color: white; text-decoration: none; border-radius: var(--border-radius); font-size: 16px; font-family: inherit; transition: background-color 0.2s ease; } .fl-node-1dtcn0lg2p3f .space-header-v3-wrap .space-header-v3-column-desktop-menu a.vehicle-megamenu-view-all:hover { background: var(--hover-color); color: white; text-decoration: none; } .fl-node-1dtcn0lg2p3f .space-header-v3-wrap .space-header-v3-desktop-menu a.vehicle-megamenu-make-title { font-size: 18px; } .fl-node-1dtcn0lg2p3f .space-header-v3-wrap .space-header-v3-desktop-menu .vehicle-megamenu-content a { letter-spacing: 0; } .fl-node-1dtcn0lg2p3f .space-header-v3-wrap .space-header-v3-desktop-menu a.vehicle-megamenu-model { text-align: left; } .fl-node-1dtcn0lg2p3f .space-header-v3-wrap .space-header-v3-desktop-menu a { padding: 0 8px; white-space: nowrap; } .space-header-v3-b .space-header-v3-wrap { align-items: center; } .space-header-v3-b .space-header-v3-column-search { margin-left: auto; margin-right: 16px; } .space-header-v3-b .space-header-v3-wrap { justify-content: flex-start !important; } .fl-node-1dtcn0lg2p3f .vehicle-megamenu[data-show-images="true"] a.vehicle-megamenu-model { display: none; } .fl-node-1dtcn0lg2p3f .vehicle-megamenu[data-show-images="true"] a.vehicle-megamenu-model.has-image { display: block; } .fl-builder-content.fl-builder-content-49217 { display: none !important; } .noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .v3-filter-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background-color: rgba(51, 51, 51, 0.40); visibility:hidden; opacity:0; } .show-search .v3-filter-overlay { visibility:visible; opacity:1; } .show-offcanvas-menu .fl-node-1dtcn0lg2p3f .v3-filter-overlay { visibility:visible; opacity:1; } .filter-overlay-show .fl-node-1dtcn0lg2p3f .v3-filter-overlay { position: absolute; z-index: 999; visibility: visible; opacity: 1; } .space-v3-header-language { vertical-align: middle; margin-left: 32px; } .space-v3-header-language .switcher .option { position:absolute; } .space-v3-header-language .switcher .selected a { border-radius: var(--border-radius); } .filter-overlay-show .switcher .selected { z-index:99; } .fl-node-1dtcn0lg2p3f .space-header-v3-wrap { display: flex; width: 100%; color: #333333; justify-content: space-between; } .fl-node-1dtcn0lg2p3f .space-header-v3-wrap a { color: #333333; text-decoration:none; transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } .fl-node-1dtcn0lg2p3f .space-header-v3-wrap .space-header-v3-column-desktop-menu a:hover { color: #E89B0C; text-decoration: none; } .space-header-v3 { background-color: #ffffff; box-shadow: 0px 3px 3px rgb(0 0 0 / 8%); } .space-header-v3-column { position: relative; font-size: 14px; flex: auto; align-content: center; width: -webkit-fill-available; } .fl-node-1dtcn0lg2p3f .space-header-v3-offcanvas-menu-wrap .hamburger-inner, .space-header-v3-offcanvas-menu-wrap .hamburger-inner:after, .space-header-v3-offcanvas-menu-wrap .hamburger-inner:before { height:2px; width:28px; background-color: #333333; } .space-header-v3-offcanvas-menu-wrap .hamburger-box { width:28px; height:24px; } .space-header-v3-offcanvas-menu-wrap .hamburger-inner, .space-header-v3-offcanvas-menu-wrap .hamburger-inner:after, .space-header-v3-offcanvas-menu-wrap .hamburger-inner:before { width:24px; } .hamburger--spring:not(.is-active) .hamburger-inner:after { top:16px; } .hamburger--spring:not(.is-active) .hamburger-inner:before { top:8px; } a.space-header-v3-offcanvas-menu-close, a.space-header-v3-offcanvas-menu-close:active, a.space-header-v3-offcanvas-menu-close:focus { position: absolute; top: 0; right: 0; visibility: hidden; font-size: 22px; z-index: 999; color:#333; } .space-header-v3-offcanvas-menu.is-active { visibility:visible; } .space-header-v3-offcanvas-menu.is-active a.space-header-v3-offcanvas-menu-close { visibility:visible; color:#333; } header .space-header-v3-offcanvas-menu a.space-header-v3-offcanvas-menu-close { padding: 16px; } .space-header-v3-offcanvas-menu-wrap .hamburger { padding: 8px; position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; margin:auto; background-color: transparent; height: 34px; left:0; } .space-header-v3-offcanvas-menu-wrap { position: relative; } .space-v3-call-us { display: inline-block; padding: 8px 32px; white-space: nowrap; text-transform: uppercase; font-size: 12px; color: #ffffff; } .space-v3-call-us a, .space-v3-call-us a:focus, .space-v3-call-us a:active, .space-v3-call-us a:hover { color: #ffffff; } .space-v3-call-us a:before { content: '\f095'; font-family: 'Font Awesome 7 Pro'; display: inline-block; margin-right: 12px; text-decoration: none !important; } .space-v3-location-column-call { margin-right: 27px; } .space-v3-location-hours-wrapper span.space-v3-location-hour:before { content: 'Today: '; } .space-v3-location-column-call:after { content: ''; width: 1px; background-color: #ffffff; height: calc(100% - 8px); position: absolute; top: 0; bottom: 0; margin: auto; right: 0; } .space-header-v3-offcanvas-menu { position: absolute; right: 0; top: 0; bottom: 0; visibility:hidden; } .space-header-v3-b .space-header-v3-offcanvas-menu { right: auto; left: 0; } header.fl-builder-content .space-header-v3.space-header-v3-b { padding: 16px 0; } .space-header-v3-offcanvas-menu-wrap a { padding: 0 16px; } .space-header-v3-offcanvas-menu-icon { height: 64px; width: 64px; } .space-header-v3-b .space-header-v3-offcanvas-menu-icon { left:0; } .space-header-v3-offcanvas-menu { transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } .space-header-v3-desktop-menu { text-align: right; padding: 0 16px; } .space-header-v3-b .space-header-v3-desktop-menu { padding: 0 16px; white-space: nowrap; } /*.space-header-v3-desktop-menu li.menu-item-has-children > a:after { content: '\f107'; font-family: 'Font Awesome 7 Pro'; margin-left: 8px; position: relative; }*/ .space-header-v3-offcanvas-menu-wrapper { background-color: white; position: fixed; right:0; color:#333; top: 0; width:0; transition: transform 0.3s cubic-bezier(.36, .66, .04, 1); z-index:9; } .space-header-v3-b .space-header-v3-offcanvas-menu-wrapper { right:auto; left:0; } .space-header-v3-b .is-active .space-header-v3-offcanvas-menu-wrapper { padding-left:0; } .space-header-v3-offcanvas-menu .space-header-v3-offcanvas-menu-wrapper { width: 320px; position: fixed; top: 0; transform: translateX(320px); } .space-header-v3-b .space-header-v3-offcanvas-menu .space-header-v3-offcanvas-menu-wrapper { transform: translateX(-320px); } .space-header-v3-offcanvas-menu.is-active .space-header-v3-offcanvas-menu-wrapper { transform: translateX(0); box-shadow:0px 4px 8px rgb(51 51 51 / 25%); } .space-header-v3-offcanvas-menu-wrapper:before { content: ""; position: absolute; z-index: 99; top: 0; left: 0; width: 100%; height: 30px; pointer-events: none; background-image: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255, 1) 90%); } .space-header-v3-offcanvas-menu-wrapper:after { content: ""; position: absolute; z-index: 99; bottom: 0; left: 0; width: 100%; height: 32px; pointer-events: none; background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1) 70%); } .space-header-v3-offcanvas-menu-wrapper > div { overflow: scroll; height: 100%; max-height: 100vh; min-height:100vh; padding: 32px 0 32px 0; } .show-offcanvas-menu div#wpadminbar { display: none; } .space-header-v3-column-desktop-menu li:last-of-type a { padding-right: 8px; } .fl-node-1dtcn0lg2p3f .space-header-v3-offcanvas-menu-icon button:hover, .space-header-v3-offcanvas-menu-icon button:active, .space-header-v3-offcanvas-menu-icon button:focus, .space-header-v3-offcanvas-menu-icon button:visited { background-color: transparent; color: #333333; border: none; text-decoration: none; } .space-header-v3-column ul.menu { padding-left: 0; margin-bottom: 0; display: block; position: relative; white-space:nowrap; } .space-header-v3-column.space-header-v3-column-desktop-menu ul.sub-menu { display: block; position: absolute; top: 100%; padding-left: 0; right: 0; left: 0; margin: auto; background: #ffffff; width: 200px; box-shadow: 0px 12px 35px rgba(0, 0, 0, 0.2); z-index:9999; } .space-header-v3-column.space-header-v3-column-desktop-menu li.menu-item-has-children { position:relative; overflow: visible; /* Ensure submenus are not clipped */ } /* Ensure desktop menu links don't use flexbox layout */ .space-header-v3-column-desktop-menu .menu-item-has-children > a { display: inline-block; /* Override any flexbox that might leak through */ } /* "Curtain drop" open/close (matches the v5 header + vehicle megamenu): the panel is clipped to nothing (bottom inset 100%) and unrolls downward while its items drift down in sync, so the dropdown reads as sliding out from behind the header. Side/bottom insets go negative when open so the box-shadow isn't clipped; only the bottom edge animates. */ .space-header-v3-column.space-header-v3-column-desktop-menu li.menu-item-has-children ul.sub-menu { opacity: 0; visibility: hidden; clip-path: inset(0 -40px 100% -40px); transition: opacity 0.3s ease-in, clip-path 0.3s ease-in, visibility 0.3s; pointer-events: none; } .space-header-v3-column.space-header-v3-column-desktop-menu li.menu-item-has-children:not(.megamenu-trigger).submenu-show ul.sub-menu { opacity: 1; visibility: visible; clip-path: inset(0 -40px -50px -40px); pointer-events: auto; } .space-header-v3-column.space-header-v3-column-desktop-menu .space-header-v3-desktop-menu ul.sub-menu > li { white-space: normal; display: block; text-align: left; transform: translateY(-14px); transition: transform 0.3s ease-in; } .space-header-v3-column.space-header-v3-column-desktop-menu li.menu-item-has-children:not(.megamenu-trigger).submenu-show ul.sub-menu > li { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .space-header-v3-column.space-header-v3-column-desktop-menu li.menu-item-has-children ul.sub-menu, .space-header-v3-column.space-header-v3-column-desktop-menu .space-header-v3-desktop-menu ul.sub-menu > li { transition-duration: 0s; } } .space-header-v3-column.space-header-v3-column-desktop-menu ul.sub-menu li a { line-height: 36px; padding: 0 16px; transition: all 0.2s ease; position: relative; overflow: hidden; } .space-header-v3-column.space-header-v3-column-desktop-menu ul.sub-menu li a:hover { background: rgba(0, 0, 0, 0.05); padding-left: 20px; transform: translateX(2px); } .space-header-v3-column.space-header-v3-column-desktop-menu ul.sub-menu li a:before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: #f0c541; transform: scaleY(0); transition: transform 0.2s ease; transform-origin: bottom; } .space-header-v3-column.space-header-v3-column-desktop-menu ul.sub-menu li a:hover:before { transform: scaleY(1); transform-origin: top; } .space-header-v3-b .space-header-v3-desktop-menu > * { display:inline-block; } .space-header-v3-column .space-header-v3-desktop-menu ul > li { display: inline-block; white-space: nowrap; padding: 0 4px; } .fl-node-1dtcn0lg2p3f .space-header-v3-column-offcanvas-menu { width: 100px; padding: 0; z-index:1; flex: none; margin-left: auto; } .fl-node-1dtcn0lg2p3f .space-header-v3-b .space-header-v3-column-offcanvas-menu { padding:0; } .show-offcanvas-menu .fl-node-1dtcn0lg2p3f .space-header-v3-column-offcanvas-menu { z-index:99999 !important; } .space-header-v3-column-offcanvas-menu li { display: block; } .space-header-v3-offcanvas-menu-wrapper li a, .space-header-v3-offcanvas-menu-wrapper div ul.menu li a, .space-header-v3-offcanvas-menu-wrapper div ul.menu li a, .space-header-v3-offcanvas-menu-wrapper div ul.menu li li a, .space-header-v3-offcanvas-menu-wrapper div ul.menu li li a { display:block; line-height:34px; font-size:14px; color:#333; } .space-header-v3-column-offcanvas-menu ul.sub-menu { padding: 0; } .space-header-v3-column-offcanvas-menu ul.sub-menu li { padding-left:32px; } .space-header-v3-column-offcanvas-menu li i { width: 14px; margin-right: 10px; font-size: 14px; height: 14px; display: inline-block; } .space-header-v3-column-offcanvas-menu ul.sub-menu li, #menu-off-canvas-and-mobile.menu > li li, .space-header-v3-column-offcanvas-menu #menu-off-canvas-and-mobile-1.menu > li li { padding-left: 40px; } .space-header-v3-column-offcanvas-menu ul li { margin: 4px 0; } .space-header-v3-offcanvas-menu-wrapper div ul.menu li li a, .space-header-v3-offcanvas-menu-wrapper div ul.menu li li a { padding-top: 8px; padding-bottom: 8px; line-height: 1.4; white-space: normal; } .space-header-v3-column-desktop-menu li { margin: 0; } .space-header-v3-column-desktop-menu li a { display: block; line-height: 64px; padding: 0 12px; } .fl-node-1dtcn0lg2p3f .space-header-v3-logo { padding: 0 16px; max-height:80px; } .fl-node-1dtcn0lg2p3f .space-header-v3-logo img { max-height:80px; } .fl-node-1dtcn0lg2p3f .space-header-v3-logo > a > * { max-height: 80px; max-width: 185px; padding:0; height:auto !important; display:inline-block; } .space-header-v3-logo a { display: inline-block; } .space-header-v3-column-search { padding: 0 0 0 16px; min-width: 350px; max-width: 350px; transition: min-width .25s ease-in-out; } .show-search .space-header-v3-column-search { min-width: 350px; } .space-header-v3-b .space-header-v3-column-search { max-width: 350px; padding:0; } .fl-node-1dtcn0lg2p3f .space-header-v3-column-logo { width: auto; text-align:left; flex: none; } .space-header-v3-b .space-header-v3-column-logo { width: auto; } .space-header-v3-b .space-header-v3-column-desktop-menu { width: 336px; } .space-v3-suggestions { position: absolute; top: 32px; width: 100%; left: 0; background: white; overflow:hidden; max-height:0; padding: 0; z-index: 99; color: #333; } .suggestion.elastic, .ai.suggestion { white-space: nowrap; } .space-v3-suggestions.show { max-height: 225px; overflow-y: scroll; border-radius:0 0 var(--border-radius) var(--border-radius); } .space-v4-suggestions .suggestion.suggestion-gotosrp { cursor: default; text-decoration: none !important; background-color: transparent !important; } .space-v4-suggestions .suggestion.suggestion-gotosrp-link { font-weight: 700; } .space-v4-suggestions .suggestion.suggestion-gotosrp-link:before { content:'\f002'; margin-right: 6px; font-family: 'Font Awesome 7 Pro'; display: inline-block; text-decoration: none; } .space-header-v3-b .space-v3-suggestions { top:100%; } .space-header-v3-b .space-v3-suggestions.show { border-top: 1px solid #d8d8dc; } .space-v3-suggestions.transition { transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -webkit-transition: all .15s ease-in-out; box-shadow: 0px 1px 1px rgb(51 51 51 / 25%); border-left: 1px solid #ccc; border-right: 1px solid #ccc; color: #333 !important; z-index:9999; } .search-suggestion-v3 { cursor: pointer; margin: 8px 16px; padding: 4px 8px; font-size: 12px; line-height: 16px; text-transform: capitalize; color: #333; } .space-v3-search-btn { position: absolute; width: 32px; height: 100%; top: 0; opacity:1; right: 0; background-color: #f0c541; color: white; cursor:pointer; border-radius: 0 var(--border-radius) var(--border-radius) 0; display: none; } .fl-node-1dtcn0lg2p3f .space-v3-search-btn { background-color: #f0c541; } .space-builder-page-search-wrap.show .space-v3-search-btn { border-radius: 0 var(--border-radius) 0 0; } .space-v3-search-btn:after { content: '\f002'; font-family: 'Font Awesome 7 Pro'; position: absolute; right: 0; left: 0; top: 0; bottom: 0; margin: auto; background-size: contain; background-position: 50%; text-align: center; line-height: 32px; font-weight: 100; color: #ffffff} .search-suggestion-v3-loading { font-size: 20px; text-align:center; } .search-suggestion-v3 span.nomatch { text-decoration: line-through; color:#A4A4A8; } .search-suggestion-v3.active { background-color: #D8D8DC; border-radius: var(--border-radius); } input.space-v3-search[type="search"] { font-family: inherit !important; padding-right: 0 !important; color: #333; -webkit-appearance: none; height: 32px; border-radius: var(--border-radius); } .fl-node-1dtcn0lg2p3f .space-header-v3-wrap input.space-v3-search[type="search"] { background-color:#F0F0F5; color: #333333; display: block; } body.home .fl-node-1dtcn0lg2p3f.transparent-header .space-header-v3-b .space-header-v3-wrap input.space-v3-search[type="search"] { opacity: 0.65; border-color:transparent; } .fl-node-1dtcn0lg2p3f .space-header-v3-b input.space-v3-search[type="search"]::placeholder { color: #333333; } .space-header-v3-b input.space-v3-search[type="search"] { height:64px; border: none; border-radius: 0; } .space-header-v3-b .space-v3-search-btn { display:none; } .fl-node-1dtcn0lg2p3f .single-video .fl-button-right a.fl-button:hover, .single-video .fl-button-left a.fl-button:hover { background-color:#E89B0C !important; color:white !important; } .single-video .fl-button-right a.fl-button:hover span, .single-video .fl-button-left a.fl-button:hover span { color:white !important; } .search-suggestion-v3:first-of-type { margin-top: 16px !important; } .search-suggestion-v3:last-of-type { margin-bottom: 16px !important; } input.space-global-search::placeholder { opacity: 1; } .space-builder-page-search-wrap.show input.space-v3-search[type="search"] { border-radius: var(--border-radius) var(--border-radius) 0 0; border-bottom:none; } .space-header-v3-b .space-builder-page-search-wrap.show input.space-v3-search[type="search"] { border-radius: 0; } input.space-v3-search::placeholder { font-family: Open Sans, 'Font Awesome 7 Pro'; text-transform: none; color:#A4A4A8; } input.space-v3-search[type="search"]::-webkit-search-cancel-button { background-image:url('/wp-content/plugins/space-multisite/includes/assets/img/times-circle-solid.svg'); background-size:contain; background-position:50%; width:15px; height:15px; opacity:0.5; margin-right:8px; appearance:none; -webkit-appearance:none; } .space-header-v3-b input.space-v3-search[type="search"]::-webkit-search-cancel-button { filter: invert(19%) sepia(10%) saturate(0%) hue-rotate(151deg) brightness(92%) contrast(92%);; } .space-builder-page-search-wrap { position: relative; } .space-header-v3-b .space-builder-page-search-wrap { margin:0; width: 100%; height: 100%; max-height: 60px; } .show-search .space-header-v3-wrap .space-builder-page-search-wrap { z-index:999999; } .show-search .space-header-v3-column-offcanvas-menu { z-index:9; } .nf-field-container.hide-field { display: none; } .space-header-v3-column.mobile-only { display:table-cell; vertical-align:middle; } .space-header-v3-column-mobile-icons-wrap { display: table; float: right; } .space-header-v3-column-mobile-icon { display: table-cell; vertical-align: middle; } .space-header-v3-column-mobile-icon a { padding: 12px 16px; font-size: 20px; } .fl-node-1dtcn0lg2p3f .space-header-v3-column-offcanvas-menu { width:70px; } .space-header-v3-offcanvas-menu-wrap ul.menu > li > a { font-weight:700; } .menu-header-container, .menu-header-search-container { display: inline-block; } a.space-header-v3-desktop-btn { display:none; } .fl-node-1dtcn0lg2p3f .space-header-v3-b a.space-header-v3-desktop-btn { background-color: #; color:#ffffff; display:inline-block; text-transform:uppercase; line-height:32px; font-size:14px; opacity:1; padding:0 16px; text-align:center; margin: 0 16px; } .nf-form-fields-required { display:none; } .space-header-v3-offcanvas-menu-wrapper > div::-webkit-scrollbar { display:none; } .space-header-v3-offcanvas-menu-wrapper a { color:#333; } .space-v3-location-bar a.glink.nturl.notranslate { text-decoration: none !important; } .space-v3-location-address-line-1:not(:empty):after, .space-v3-location-state:not(:empty):after { content: ','; } .space-v3-location-link-wrap a.space-v3-location-link:before { content: '\f3c5'; font-family: 'Font Awesome 7 Pro'; margin-right: 8px; } span.space-v3-location-primary-name-wrap { display: inline-block; line-height: 34px; } span.space-v3-location-primary-name-wrap:hover { text-decoration: underline; } .space-v3-location-bar a.glink span { font-size: 11px; color: #ffffff; } .space-v3-header-language-desktop-top-right, .space-v3-header-language-desktop-top-left { margin-left: 0; } .space-v3-header-language-desktop-top-right { padding-right: 16px; border-left: 1px solid #ffffff; padding-left: 24px; } .space-v3-header-language-desktop-top-center { border-right: 1px solid rgb(199, 199, 199); margin-right: 24px; padding-right: 24px; } .space-v3-header-language-desktop-top-left { padding-left: 16px; float: left; line-height: 32px; } .fl-node-1dtcn0lg2p3f .space-v3-location-bar { background-color: #000000; color: #ffffff; text-align:right; border-bottom: 1px solid rgb(255, 255, 255)} .space-v3-location-column { display: inline-block; vertical-align: middle; position: relative; text-align: right; } .fl-node-1dtcn0lg2p3f .space-v3-location-column-right a.space-v3-location-cta { display: inline-block; padding: 8px 24px; white-space: nowrap; text-transform: uppercase; font-size:12px; color: #ffffff; } .space-v3-location-column.space-v3-location-column-right:before { content: ''; width: 1px; background-color: #ffffff; height: calc(100% - 8px); position: absolute; top: 0; bottom: 0; margin: auto; } .space-v3-location-column.space-v3-location-optional-badge:before { content: ''; width: 1px; background-color: #ffffff; height: calc(100% - 8px); position: absolute; top: 0; bottom: 0; left: 0; margin: auto; } .space-v3-location-column-left { text-align: right; padding-right: 24px; color: #333; text-transform: uppercase; font-size: 12px; cursor:pointer; } .space-v3-location-optional-badge img { height: 14px; } .space-v3-location-optional-badge { padding: 6px 24px; } .space-v3-location-optional-badge a { color: #ffffff; } .space-v3-location-optional-badge a:hover { text-decoration: none; color: #ffffff; } .space-v3-location-optional-badge a:hover span { text-decoration: underline; } .fl-node-1dtcn0lg2p3f .space-v3-location-primary-name { display: inline-block; color: #ffffff; } .fl-node-1dtcn0lg2p3f .space-v3-location-primary-name:before { content: '\f3c5'; font-family: 'Font Awesome 7 Pro'; padding-right: 8px; color: #ffffff; } .space-v3-location { text-transform: none; } .space-v3-location-bar[data-multi="1"] .space-v3-location { margin: 0 8px; border: 1px solid #C7C7C7; padding: 16px; border-radius: 7px; } .fl-node-1dtcn0lg2p3f .space-v3-locations { background: white; position: absolute; right: 0; z-index: 999999; padding: 16px; box-shadow: 0px -2px 8px rgba(51, 51, 51, 0.25); border-radius: var(--border-radius); top: 40px; opacity:0; visibility:hidden; transform:translate(4px, 28px); top:0; text-align:left; cursor:default; } .fl-node-1dtcn0lg2p3f .space-v3-locations[data-count="1"] { padding-left:16px; } .fl-node-1dtcn0lg2p3f a.space-v3-location-primary-name-wrap.no-hover { color: inherit; display: inline-block; } .space-v3-location-primary-name:not(.no-hover):after { display: none; } .space-v3-locations.show { opacity:1; visibility:visible; transform:translate(4px, 34px); } .space-v3-location-address { width: 200px; margin:4px 0; font-size: 14px; line-height: 20px; } .fl-node-1dtcn0lg2p3f .space-v3-location-address a, .space-v3-location-call a, .space-v3-location-link-wrap a { color: #E89B0C; } .fl-node-1dtcn0lg2p3f .space-v3-location-address a:hover, .space-v3-location-call a:hover, .space-v3-location-link-wrap a:hover { color: #E89B0C; } .space-v3-location-name { margin-bottom: 8px; font-size: 20px; line-height: 28px; color: #333; font-weight: 600; white-space:nowrap; } .space-v3-location-call { margin:4px 0; font-size: 14px; line-height: 24px; } .space-v3-location-call-us { display: block; font-weight: 700; margin-top: 16px; margin-bottom: 4px; font-size: 14px; line-height: 14px; color: var(--body-font-color); } .space-v3-location-call-us-link { font-size: 14px; line-height: 24px; } .space-v3-location-link-wrap { margin:4px 0; } .space-v3-location-link-wrap a.space-v3-location-link { font-size: 14px; line-height: 24px; } .space-v3-location-cta-wrap { text-align: center; display: grid; margin: 16px 0 0; width: 100%; gap: 8px; grid-template-columns: repeat(1, 1fr); } .space-v3-location-cta > a { width: 100% !important; } a.space-v3-location-cta-secondary { margin-left: 0 !important; } .space-v3-location-cta { flex: auto; } .fl-node-1dtcn0lg2p3f a.space-v3-location-cta-secondary { color:#333; border:1px solid #333; border-radius:var(--border-radius); margin-left:8px; font-size: 14px; line-height: 24px; padding:12px; text-decoration:none; text-transform:uppercase; display:inline-block; white-space:nowrap; } a.space-v3-location-cta-secondary:hover { color:white; background-color:#333; text-decoration:none; } header .fl-module-v3-header-nav.fl-node-1dtcn0lg2p3f .space-v3-location-cta-wrap a.space-v3-location-cta-primary { border:1px solid var(--primary-button-color); border-radius: var(--border-radius); background-color: var(--primary-button-color); color: var(--primary-button-text-color); font-size: 14px; line-height: 24px; padding:12px; text-decoration:none; text-transform:uppercase; display:inline-block; white-space:nowrap; } header .fl-module-v3-header-nav.fl-node-1dtcn0lg2p3f .space-v3-location-cta-wrap a.space-v3-location-cta-primary:hover { border:1px solid var(--hover-color); background-color: var(--hover-color); color: var(--primary-button-text-color); text-decoration:none; } a.space-v3-location-cta-primary:active, a.space-v3-location-cta-primary:focus { color: #ffffff; } a.space-v3-location-call-us-link:before { font-weight: 400; display: inline-block; text-decoration: none !important; content: '\f095'; margin-right: 4px; font-family: 'Font Awesome 7 Pro'; } .space-v3-location-hours-wrap { font-size: 12px; line-height: 16px; margin:4px 0; } .space-v3-location-hours-val, .space-v3-location-phone { line-height: 20px; font-size: 13px; } .space-v3-location-hours-wrapper { margin:8px 0; color:#333; } .space-v3-location-hours-val:before { content: '\f017'; margin-right:4px; font-family: 'Font Awesome 7 Pro'; } .space-v3-location-title { font-weight: 700; margin-top: 16px; margin-bottom: 4px; font-size: 14px; line-height: 14px; } .space-v3-location-phone:before { content:'\f095'; margin-right:4px; font-family: 'Font Awesome 7 Pro'; } .space-v3-locations { display: flex; } .space-v3-location-primary-name:after { content: '\f107'; font-family: 'Font Awesome 7 Pro'; margin-left: 8px; } .space-v3-location-close { display:none; } .global-bar-mobile { display:none; } .space-v4-suggestions { position: absolute; top: 32px; width: 100%; left: 0; background: white; overflow: hidden; max-height: 0; padding: 0; z-index: 99; color: #333; transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -webkit-transition: all .15s ease-in-out; box-shadow: 0px 1px 1px rgb(51 51 51 / 25%); border-left: 1px solid #ccc; border-right: 1px solid #ccc; color: #333 !important; z-index: 9999; } .space-v4-suggestions.show { max-height: 225px; overflow-y: scroll; border-radius: 0 0 3px 3px; z-index: 99999; } .space-v4-suggestions .suggestion { cursor: pointer; transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -webkit-transition: all .15s ease-in-out; line-height: 20px; padding: 0px 12px; font-size: 13px; margin: 4px 0; } .space-v4-suggestions .suggestion:hover { text-decoration:underline; background-color:#ececec; border-radius: var(--border-radius); } .srp-mobile-nav-dropdown { display:none; } .translated-ltr a.v3-vertical-menus-parent-nav-link { font-size: 10px; } /* MEGA MENU */ #megamenu-multi { max-height: 0; overflow: hidden; transition: .25s all ease-in-out; opacity: 0; position: absolute; top: 100%; width: 100%; overflow-y: scroll; background: #f0c541; } #megamenu-multi.show, .fl-builder-edit.postid-138168 #megamenu-multi { max-height: calc(100vh - 250px); opacity: 1; z-index: 99; } #megamenu-multi .fl-col-group-nested { max-height: 0; overflow: hidden; transition: .25s opacity ease-in-out; opacity:0; visibility: hidden; } #megamenu-multi .fl-col-group-nested.show, .fl-builder-edit.postid-138168 #megamenu-multi .fl-col-group-nested { max-height: calc(100vh - 250px); opacity: 1; visibility: visible; overflow-y: scroll; } #megamenu-multi .space-builder-sales-hours-container, #megamenu-multi .space-builder-service-hours-container { background: inherit; padding-right: 48px; } #megamenu-multi h3, #megamenu-multi span, #megamenu-multi p, #megamenu-multi a { color: white; } #megamenu-multi .fl-col-group-nested .fl-col-content.fl-node-content { position: relative; top: -8px; transition: .25s all ease-in-out; } #megamenu-multi .fl-col-group-nested.show .fl-col-content.fl-node-content { top: 0; } #megamenu-multi .space-builder-sales-hours-title, #megamenu-multi .space-builder-service-hours-title { visibility: hidden; height: 24px; position: relative; } #megamenu-multi .space-builder-sales-hours-title:after, #megamenu-multi .space-builder-service-hours-title:after { visibility: visible; color: white; position: absolute; top: 0; font-weight: 700; font-size: 14px; line-height: 20px; } #megamenu-multi .space-builder-sales-hours-title:after { content: 'Showroom Hours'; } #megamenu-multi .space-builder-service-hours-title:after { content: 'Service Hours'; } #megamenu-multi .megamenu-section ul.menu { margin-top: 32px; padding-left: 40px; } #megamenu-multi .megamenu-section ul.menu li a { padding-top: 6px; padding-bottom: 6px; display: inline-block; } #megamenu-multi .megamenu-section ul.menu li a:hover { text-decoration: underline; } #megamenu-multi .megamenu-section .space-widget-wrap { margin-top: 16px; margin-right: 32px; margin-left: 32px; } #megamenu-multi .megamenu-section { position:relative; } #megamenu-multi .megamenu-section:before { position: absolute; top: 20px; left: 0; content: ''; background: white; height: 285px; width: 1px; } #megamenu-multi .megamenu-section li i { font-weight: 400; margin-right: 12px; display: inline-block; text-decoration: none !important; width: 20px; text-align: left; font-size: 16px; } .megamenu-section li font { text-transform: capitalize; } body.fl-builder-edit header[data-type="header"] { z-index: 1 !important; } #user-return { visibility: hidden; max-height: 0; overflow: hidden; transition: .75s all ease-in-out; opacity: 0; } #user-return.show { visibility: visible; max-height: 700px; opacity: 1; } #user-return-condition { text-transform: capitalize; } span#user-return-vin { margin-right: 32px; } span#user-return-down { margin-left: 16px; } .virtual-showroom-modal { visibility: hidden; opacity: 0; transition: .25s all ease-in-out; position:fixed; top:0; left:0; width:100%; height: 100%; z-index:999999; display:flex; align-items: center; } .virtual-showroom-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; background: rgba(51, 51, 51, 0.8); width: 100%; visibility: hidden; opacity: 0; } .virtual-showroom-modal.show, .virtual-showroom-modal.show .virtual-showroom-bg { visibility: visible; opacity: 1; } div#virtual-showroom { transition: .25s all ease-in-out; position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; max-width: 800px; height: 600px; max-height: calc(100vh - 160px); z-index: 9999999; margin: auto; background: white; box-shadow: 0 2px 18px rgba(0,0,0,0.5); } iframe.virtual-showroom-iframe { position: absolute; left: 0; width: 100%; height: 100%; border: none; } .virtual-showroom-close { position: absolute; top: -20px; right: -20px; z-index: 999999; } .virtual-showroom-close:after { content: '\f00d'; font-family: 'Font Awesome 7 Pro'; background-color: var(--primary-color); color: white; border-radius: 30px; font-size: 20px; width: 40px; height: 40px; display: inline-block; text-align: center; line-height: 40px; transition: .25s all ease-in-out; cursor: pointer; } .virtual-showroom-close:hover:after { background-color: var(--hover-color); } .srp-pricing-overlay-wrapper:has(.srp-pricing-overlay-content:empty) { visibility: hidden; z-index:-1; display: none; } #cookieConsentModal { position: fixed; bottom: 32px; left: 32px; width: 375px; user-select: none; padding: 16px; background-color: white; font-family: inherit; box-shadow: 0px 2px 8px 0px #3333334D; border-radius: 7px; visibility: hidden; height: auto; overflow: scroll; opacity: 0; max-height: calc(100vh - 50px); } #cookieConsentModal.show { visibility: visible; z-index: 99999999999; opacity: 1; } #cookieConsentModal.hide { visibility: hidden; z-index:-1; } #cookieConsentModal .modal-header { font-size: 14px; font-weight: 600; line-height: 24px; margin-bottom: 4px; color: #272727; margin-top: 4px; } #cookieConsentModal .modal-content, #cookieConsentModal .consent-description { font-size: 12px; margin-bottom: 8px; font-weight: 500; color: #68666A; line-height: 16px; letter-spacing: 0.15pt; } .space-header-v3-b .space-header-v3-column-offcanvas-menu { margin-left: 0; } #cookieConsentModal .modal-footer { display: flex; margin-top: -4px; margin-left: -10px; margin-bottom: -8px; } #cookieConsentModal .modal-footer button.cookie-consent-btn, #cookieConsentModal .modal-footer button.cookie-reject-btn { background: transparent; border: none; font-size: 12px; color: #333; padding: 12px; line-height: 16px; font-weight: 700; transition: .25s all ease-in-out; } #cookieConsentModal .modal-footer button.cookie-consent-btn.consent-cancel { color: #A4A4A8; } #cookieConsentModal .modal-footer button.cookie-consent-btn.consent-cancel:hover { color: #68666A; } #cookieConsentModal .modal-footer button.cookie-consent-btn.consent-save { color: var(--primary-color); } #cookieConsentModal .modal-footer button.cookie-consent-btn.consent-save:hover { color: var(--hover-color); } #cookieConsentModal label.consent-label { display: flex; align-items: center; color: #272727; font-size: 12px; font-weight: 600; flex-direction: row; padding-left: 8px; } #cookieConsentModal .consent-toggle { margin-left: 0; position: relative; display: inline-block; width: 27px; height: 14px; margin-right: 12px; font-size: 12px; } #cookieConsentModal .consent-toggle input.consent-input { opacity: 0; width: 0; height: 0; } #cookieConsentModal .consent-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 34px; transition: 0.4s; } #cookieConsentModal .consent-slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: -12px; bottom: 1px; background-color: white; border-radius: 50%; transition: 0.4s; transform: translateX(13px); } #cookieConsentModal input:checked + .consent-slider { background-color: var(--primary-color); } #cookieConsentModal input:checked + .consent-slider:before { transform: translateX(26px); } #cookieConsentModal .state-1 .modal-footer { display: block; overflow: auto; } #cookieConsentModal .modal-footer button#btnAcceptSettings { float: right; color: var(--primary-color); } #cookieConsentModal .modal-footer button#btnAcceptSettings:hover { color: var(--hover-color); } #cookieConsentModal .modal-footer button#btnRejectSettings { float: left; color: #A4A4A8; } #cookieConsentModal .modal-footer button#btnSettings, #cookieConsentModal .modal-footer button#consentBtnBack { float: left; color: #A4A4A8; background: transparent; border: none; font-size: 12px; padding: 12px; line-height: 16px; font-weight: 700; transition: .25s all ease-in-out; } #cookieConsentModal .modal-footer button#btnRejectSettings:hover { color: #68666A; } #cookieConsentModal .modal-footer button#btnSettings:hover { color: #68666A; } .cookie-modal-state.show { display:block; } .cookie-modal-state { display:none; } div#cookie-consent-close { position: absolute; top: 0; right: 0; padding: 8px; line-height: 18px; width: 32px; text-align: center; display: none; } div#cookie-consent-close i:before { font-family: 'Font Awesome 7 Pro'; color: #333; font-size: 18px; cursor: pointer; font-weight: 300; } #cookieConsentModal input#essentialCookies:checked + .consent-slider { background-color: var(--primary-color); opacity: 0.45; pointer-events: none; } label.consent-label[for="unclassifiedCookies"] { display: none !important; } header[data-type="header"]:has(.space-header-v3-transparent-capable.space-header-v3-transparent-mode) .space-v3-location-bar { overflow: hidden; } header[data-type="header"]:not(:has(.space-header-v3-transparent-capable.space-header-v3-transparent-mode)) .space-v3-location-bar { overflow: visible; } @media (max-width:899px) { .virtual-showroom-close { right: 0; } #megamenu-multi { display:none; } .srp-filters-desktop > .srp-filter-tabs { display: none; } .space-v4-suggestions .suggestion { line-height:32px; } body:has(.srp-v5-wrapper) .space-header-v3-column-logo { width: auto; } } @media (max-width:900px) { .space-header-v3-column { display: table-cell; vertical-align: middle; } .fl-node-1dtcn0lg2p3f .space-header-v3-wrap { display: table; width: 100%; } .fl-node-1dtcn0lg2p3f .space-v3-locations { display: block; position:fixed; left:0; margin:auto; width:calc(100% - 16px); } .space-v3-location-bar[data-multi="1"] .space-v3-location { margin-left:0; margin-right:0; margin-bottom:8px; } } @media (max-width:899px) { .mpg-filter-inputs { margin-top: 16px; } .space-v3-search-btn.space-v3-search-btn-mob { top: 8px; right: 12px; width:40px; height:40px; visibility:hidden; } } @media (max-width:767px) { body.mobile-bar-enabled .global-bar-mobile.show { transition: .25s max-height ease-in-out !important; max-height: 85px; } body:has(.space-header-v3.minimize) .global-bar-mobile.mobile-bar-test-0 { max-height: 0; } .space-header-v3-logo-location-bar { overflow: hidden; max-height: 0; transition: .25s max-height ease-in-out; width: 70px; position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; } body:has(.space-header-v3.minimize) .space-header-v3-logo-location-bar { max-height:38px; opacity: 1; visibility:visible; } body:has(.space-header-v3.minimize) .space-header-v3-logo-location-bar img { max-height: 30px; display: block; margin-left: 16px; margin-top: 2px; width: auto !important; opacity: 1; visibility: visible; height: auto !important; } #cookieConsentModal { left: 0; width: calc(100% - 16px); right: 0; bottom: 0; margin: auto; } #cookieConsentModal.show { bottom: 8px; } #cookieConsentModal .modal-footer button#btnAcceptSettings { float: left; } #cookieConsentModal .modal-footer button#btnRejectSettings { float: right; } #cookieConsentModal .modal-footer button#btnSettings { float: right; } .v3-filter-overlay { transition: .25s all ease-in-out; } .v3-vertical-subnav-wrap { display: none !important; } .space-header-v3-offcanvas-menu a.glink { padding: 0 5px; color: #333; } body.mobile-bar-enabled .global-bar-mobile { display:block; } .space-v3-location-hours-3-title[data-value="0"], .space-v3-location-hours-2-title[data-value="0"], .space-v3-location-hours-1-title[data-value="0"] { display:none; } .space-v3-location-cta-wrap { width:100%; table-layout:fixed; } .fl-node-1dtcn0lg2p3f a.space-v3-location-cta-primary, .fl-node-1dtcn0lg2p3f a.space-v3-location-cta-secondary { display:block; } .space-v3-location-address { width: 100%; margin:8px 0; } .space-v3-location-close.show { display: inline-block; position: fixed; top: 32px; right: 5px; font-size: 26px; padding: 16px; color: black; z-index: 9999999; } .space-v3-location-bar[data-multi="1"] .space-v3-location { margin:16px 0; } .space-v3-location-bar[data-multi="1"] .space-v3-location:first-of-type, .space-v3-location-bar[data-multi=""] .space-v3-location:first-of-type { margin-top: 0; } .space-v3-location-bar[data-multi="1"] .space-v3-location:last-of-type, .space-v3-location-bar[data-multi=""] .space-v3-location:last-of-type { margin-bottom: 0; border-bottom:none; } .space-v3-location-primary-name:before, .space-v3-location-primary-name:after { display:none; } .space-v3-location-primary-name { overflow:hidden; } .space-header-v3-b .space-header-v3-offcanvas-menu-wrapper > div.space-v3-header-language { padding:16px 0 0; } .space-header-v3-b .space-header-v3-offcanvas-menu-wrapper > div.space-v3-header-language { display:none; } .space-header-v3-b .space-header-v3-offcanvas-menu.is-active .space-header-v3-offcanvas-menu-wrapper > div.space-v3-header-language { display:block; } .space-v3-location-bar .space-v3-location, .space-v3-location-bar[data-multi="1"] .space-v3-location { border:none; padding:0; border-bottom:1px solid #C7C7C7; border-radius:0; padding-bottom:32px; } .space-v3-location-bar[data-multi=""] .space-v3-location { padding-bottom:0; } .space-v3-location-column.space-v3-location-column-right { display: none; } .fl-node-1dtcn0lg2p3f .space-v3-locations { padding-left:16px; } .fl-node-1dtcn0lg2p3f .space-v3-locations.show { transform: translate(0, 40px); overflow: scroll; height: calc(100vh - 130px); -webkit-overflow-scrolling: touch; } .fl-node-1dtcn0lg2p3f .space-v3-locations[data-count="1"], .fl-node-1dtcn0lg2p3f .space-v3-locations[data-count="2"] { padding-bottom: 16px; height:auto; } .space-v3-location-column.space-v3-location-column-left { height: 0; max-height: 0; line-height: 0; overflow: hidden; } .space-v3-location-bar { background-color:white; height: 0; overflow: hidden; max-height: 0; max-width: 0; opacity: 0; visibility: hidden; } .space-header-v3-offcanvas-menu-wrapper > div.space-v3-header-language { height: auto; max-height: 100%; overflow: hidden; min-height: 0; padding: 16px 0; margin-left: 32px; display: block; width: 175px; } .space-v3-header-language-desktop { display:none; } .space-v3-header-language-mobile { display:block; } .space-header-v3-column-mobile-icons.mobile-only { padding-right: 8px; } .single-vehicle.show-offcanvas-menu .fl-node-1dtcn0lg2p3f .space-header-v3-column-offcanvas-menu { z-index:999999; } .space-header-v3-logo { padding:0 16px; } .space-header-v3-b .space-header-v3-logo { text-align:left; } .single-vehicle.filter-overlay-show .v3-filter-overlay { z-index: 99999; position:fixed; } input.space-v3-search[type="search"] { background-color:#D8D8DC; } .global-search-mob-top input.space-v3-search[type="search"] { background-color:##F0F0F5; color: #333333; } .dark-mode .global-search-mob-top input.space-v3-search[type="search"] { background-color: transparent; } .global-search-mob-top input.space-v3-search[type="search"]::placeholder { color: #333333; font-size:14px !important; } .space-header-v3-b .global-search-mob-top input.space-v3-search[type="search"] { height:48px; } .global-search-mob-top input.space-v3-search[type="search"] { border-radius: var(--border-radius); font-size:14px; } .global-bar-mobile { position: sticky; bottom: 0; left: 0; width: 100%; height: 0; z-index: 99999; background-color: white; padding: 0 16px; box-shadow: 0px -3px 5px rgb(51 51 51 / 16%); border-top: 1px solid #dedede; } .dark-mode .global-bar-mobile { background-color: #272727; } .global-bar-mobile.show { /* transform:translateY(0px); */ padding:16px; height:132px; } .global-bar-mobile.show[data-search="top"] { height:78px; } body:has(.srp-v5-filters) .global-bar-mobile[data-search="top"] { height: 85px; padding: 0; align-content: center; transition: none; -webkit-transition: none; padding-bottom: env(safe-area-inset-bottom); } body:has(.srp-v5-filters) .global-bar-mobile.show[data-search="top"] { bottom:0 !important; } body:has(.srp-v5-filters.show) .global-bar-mobile.show[data-search="top"] { height: 76px; padding: 0; align-content: center; box-shadow: none; background: none; border: none; } body:has(.global-mobile-search-overlay.show) .global-bar-mobile.show[data-search="top"] { z-index: 9; } body:has(.srp-v5-filters.show) header[data-type="header"] { z-index: 999 !important; } body:has(.srp-v5-filters) .global-bar-sections { transition: .25s all ease-in-out; visibility: visible; opacity: 1; height: 76px; transform: translate(0, 0); } body:has(.srp-v5-filters.show) .global-bar-sections { transform: translate(0, 100%); } .mobile-bar-test-1 .global-search-mob { background-color: transparent; box-shadow:none; max-width: 0; } .global-search-mob { position: relative; left: 0; right: 0; margin: auto; width: 100%; padding: 0 0 16px; background-color: white; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; } .global-search-mob-top .space-v3-suggestions.space-v3-suggestions-global-mob { top: 48px; bottom: auto; border-radius: 0 0 var(--border-radius) var(--border-radius); width: calc(100% - 32px); left: 16px; box-shadow:none; } .search-mob-open .v3-filter-overlay { display:none !important; } .global-search-mob-top.global-search-mob { background-color: transparent; padding: 0 16px 16px; } .global-search-mob.global-search-vdp { top:0; } .global-bar-mobile.show-search .global-search-mob { max-width:100vw; background-color: white; box-shadow: 0px -3px 5px rgb(51 51 51 / 16%); } .mobile-bar-test-1 .global-search-mob input, .mobile-bar-test-1 .space-v3-search-btn { visibility:hidden; opacity:0; } .show-search.mobile-bar-test-1 .global-search-mob input { visibility: visible; opacity:1; } .mobile-bar-test-1.global-bar-mobile { box-shadow: 0px -3px 5px rgb(51 51 51 / 16%); } .global-mobile-search-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 99999; background: rgba(51, 51, 51, 0.8); width: 100%; display: none; } .global-mobile-search-overlay.show { display:block; } .fl-node-1dtcn0lg2p3f .global-bar-section a { border-radius: var(--border-radius); } .space-v3-search-btn[data-class="space-v3-search-global-mob"]:after { line-height:34px; } .space-v3-suggestions.space-v3-suggestions-global-mob { top: auto; box-shadow: 0px -3px 5px rgb(51 51 51 / 16%); bottom: 48px; text-align:left; z-index:999999; border-radius: var(--border-radius) var(--border-radius) 0 0; } .global-bar-mobile .space-v4-suggestions { top: auto; box-shadow: 0px -3px 5px rgb(51 51 51 / 16%); bottom: 55px; text-align: left; z-index: 999999; border-radius: 7px 7px 0 0; } .fl-node-1dtcn0lg2p3f .space-v3-search-btn[data-class="space-v3-search-global-mob"] { height: 34px; right: 16px; top: 16px; border-radius: 0 var(--border-radius) var(--border-radius) 0; visibility:hidden; } .vdp-loop-header { z-index:99999; } .global-bar-mobile.show-search .global-search-mob { max-width:100vw; background-color: white; box-shadow: 0px -3px 5px rgb(51 51 51 / 16%); } .space-header-v3-column.desktop-only { display:none; } .space-header-v3-wrap { padding:8px 0; } .space-header-v3-offcanvas-menu-wrapper { position: fixed; right: 0; height: 100%; top: 0; width:0; } .space-header-v3-offcanvas-menu-wrapper > div { height: 100%; max-height: 100%; padding: 16px; padding-bottom:200px; } .space-header-v3-b .space-header-v3-offcanvas-menu-wrapper > div { padding: 16px 16px 200px 0; } .space-header-v3-offcanvas-menu-wrapper:after { height:32px } .fl-node-1dtcn0lg2p3f .space-header-v3-column-logo { max-width:55vw; } .fl-node-1dtcn0lg2p3f .space-header-v3-logo > a > * { max-width:100% !important; } } @media (min-width:768px) and (max-width:1024px) { span.space-v3-location-address-line-1 { display: block; } .space-header-v3-column-desktop-menu li a { padding: 0 16px; } .space-header-v3-column.space-header-v3-column-desktop-menu li.menu-item-has-children:last-child:not(.megamenu-trigger).submenu-show ul.sub-menu { left: auto; right: -24px; } .space-v3-location-bar[data-multi="1"] .space-v3-location { width: max-content; flex: 1; } .fl-node-1dtcn0lg2p3f .space-v3-locations { position: fixed; left: 0; margin: auto; width: calc(100% - 32px); gap: 16px; margin: 0; right: 0; justify-content: center; } } @media (min-width:1025px) { .menu-desktop-nav-container li.menu-item-has-children:last-child > ul.sub-menu { right: 0 !important; position: absolute; left: auto; } .space-header-v3-offcanvas-menu-wrapper ul.sub-menu { position: relative !important; } .space-v3-location-bar[data-multi="1"] .space-v3-location { width: max-content; flex: 1; } .space-header-v3-column.space-header-v3-column-desktop-menu li.menu-item-has-children:last-child:not(.megamenu-trigger).submenu-show ul.sub-menu { left: auto; right: -24px; } .search-suggestion-v3:hover, .search-suggestion-v3.active:hover { background-color: #ececec; border-radius: 7px; } .space-header-v3-offcanvas-menu-wrap ul.menu > li a:hover, .space-header-v3-offcanvas-menu-wrap ul.sub-menu > li a:hover { background: #rgba(240,197,65,0.1); color: #f0c541 !important; } .space-header-v3-offcanvas-menu-wrap ul.menu > li a, .space-header-v3-offcanvas-menu-wrap ul.sub-menu > li a { transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } .space-header-v3-b a.space-header-v3-desktop-btn:hover { opacity:0.85; } .v3-filter-overlay { /* transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out;*/ } } @media (min-width:768px) { .space-header-v3-logo-location-bar { display: none; } .global-search-mob-top.global-search-mob { display: none; } .space-v3-locations[data-count="4"], .space-v3-locations[data-count="5"], .space-v3-locations[data-count="6"] { display: grid; grid-template-columns: repeat(3, 3fr); gap: 16px; max-height: 90vh; overflow: scroll; } .space-v3-location-bar[data-multi="1"] .space-v3-locations[data-count="4"] .space-v3-location, .space-v3-location-bar[data-multi="1"] .space-v3-locations[data-count="5"] .space-v3-location, .space-v3-location-bar[data-multi="1"] .space-v3-locations[data-count="6"] .space-v3-location { margin: 0; min-width: 250px; overflow: auto; } .fl-node-1dtcn0lg2p3f a.space-v3-location-cta-primary, .fl-node-1dtcn0lg2p3f a.space-v3-location-cta-secondary{ font-size: 12px; padding: 12px 8px; } .space-v3-location-column-left:hover { /* background: #f2f2f4; */ } .space-v3-location-bar[data-multi="1"] .space-v3-location:first-of-type { margin-left: 0; } .space-v3-location-bar[data-multi="1"] .space-v3-location:last-of-type { margin-right: 0; } .space-v3-header-language-desktop { display:inline-block; } .space-v3-header-language-mobile { display:none; } .space-header-v3-column.mobile-only { display:none; } input.space-v3-search[type="search"] { background-color:#F0F0F5; } } @media (min-width:768px) and (max-width:1150px) { .space-header-v3[data-language="1"] .menu-header-container { padding-top:0; } .space-v3-header-language .switcher .option { position: fixed; bottom: 40px; border-top: 1px solid #cccccc; } .fl-node-1dtcn0lg2p3f .space-v3-locations { position:fixed; } } @media (max-width: 1250px) { .space-header-v3-column-desktop-menu li a { display: block; line-height: 64px; padding: 0 8px; font-size: 12px; } } @media (max-width: 1099px) { .space-header-v3-column.space-header-v3-column-3.space-header-v3-column-desktop-menu.desktop-only { display:none; } } @media (min-height:800px) { .space-header-v3-offcanvas-menu-wrapper > div { height: 100vh; } } @media (min-width: 768px) and (max-width: 899px) { .global-search-mob-top.global-search-mob { display: none !important; } } /* Compact Search Mode Styles */ @media ( min-width:1400px ) { .vehicle-megamenu-main-content { max-width: 1280px; margin: auto; } } @media ( min-width:1800px ) { .vehicle-megamenu-main-content { max-width: 1400px; margin: auto; } } @media ( min-width: 900px) and ( max-width: 1340px ) { .space-header-v3-column-search, .space-header-v3-b .space-header-v3-column-search { max-width: 400px !important; min-width: 400px !important; } } @media ( min-width: 1100px ) and ( max-width: 1340px ) { .space-header-v3-column.space-header-v3-column-3.space-header-v3-column-desktop-menu.desktop-only { display: block; } } /* Take the BB themer header wrapper out of layout flow so the first page row * (typically a hero) starts at top: 0 and the header overlays it. Scoped via * :has() so non-transparent v3 headers continue to use the default * `position: sticky` from global.css. * * IMPORTANT: avoid the `height: 0; overflow: visible` trick here — the v5 SRP * renderer (`renderSRP` in space-functions.php) measures * `header.fl-builder-content.getBoundingClientRect().bottom` and gates the * "show SRP" branch on a truthy value. A zero-height wrapper produces 0, * which is falsy, and the SRP container never gets `.show`, never gets a * height, and the body never receives `srp-v5`. `position: fixed` keeps the * wrapper's natural height (its bounding rect bottom = header height) while * still removing it from document flow — same visual result as the * height-zero trick, no SRP/VDP regression. */ header[data-type="header"]:has(.space-header-v3-transparent-capable) { position: fixed !important; top: 0; left: 0; right: 0; /* The BB themer wrapper defaults to `background: white` on mobile and * carries a 0 -2px 8px box-shadow on every breakpoint (see global.css: * `header[data-type="header"]` + `header.fl-builder-content[data-type= * "header"]` inside @media (max-width:767px)). Both bleed *above* the * inner `.space-header-v3` module — so even though the module itself * has a transparent background while transparent-mode is active, the * wrapper's white fill leaks through and produces a visible band at * the top of mobile viewports. Forcing the wrapper transparent + dropping * the shadow keeps the overlay truly clean. The shadow is restored on * the inner header in the scrolled state via the existing Style A rules. */ background: transparent !important; box-shadow: none !important; } /* Location bar — when a transparent-style header is rendered, the sibling * location bar collapses while transparent-mode is on (top of page) and * reveals once the user has scrolled (transparent-mode removed). The cap * (240px) is well over the typical location-bar height so its content isn't * clipped during the transition; raise if a site has a taller bar. * * In addition to `max-height`, the bar's colors crossfade in lockstep with * the main nav: at the top of the page the bar inherits the transparent * appearance (bg transparent, text + links = transparent_text_color), and * once revealed it animates back to its configured `location_bar_*` colors. * Even though the bar is hidden via `max-height: 0` while transparent-mode * is active, the color values still need to be the transparent ones so the * brief slice of bar that's visible during the expand animation reads * cohesively with the rest of the header. * * Per-direction transitions: * - scroll DOWN (bar appearing): destination = base rule below → soft * ease-in-out, longer duration so the bar grows + recolors gently. * - scroll UP (bar collapsing): destination = `:has(...transparent-mode)` * rule below → easeOutExpo so it tucks away with the same decisive * motion as the rest of the header. */ header[data-type="header"]:has(.space-header-v3-transparent-capable) .space-v3-location-bar { max-height: 240px; overflow: hidden; transition: max-height 1s cubic-bezier(0.65, 0, 0.35, 1), background-color 1s cubic-bezier(0.65, 0, 0.35, 1), color 1s cubic-bezier(0.65, 0, 0.35, 1), border-color 1s cubic-bezier(0.65, 0, 0.35, 1); } header[data-type="header"]:has(.space-header-v3-transparent-capable) .space-v3-location-bar a { transition: color 1s cubic-bezier(0.65, 0, 0.35, 1); } header[data-type="header"]:has(.space-header-v3-transparent-mode) .space-v3-location-bar { max-height: 0; background-color: transparent !important; color: #ffffff !important; border-color: transparent !important; transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1), color 0.8s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1); } header[data-type="header"]:has(.space-header-v3-transparent-mode) .space-v3-location-bar a { color: #ffffff !important; transition: color 0.8s cubic-bezier(0.16, 1, 0.3, 1); } /* Transition for the scroll-DOWN direction (transparent-mode being REMOVED, * destination = the default Style A appearance). easeInOutCubic gives a * gentle, decelerating-into-place feel — colors ramp up gradually instead of * "rocketing in" the way easeOutExpo does, which is what reads as abrupt for * fading-IN content. */ .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable .space-header-v3-wrap, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable .space-header-v3-wrap a, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable .space-header-v3-offcanvas-menu-wrap .hamburger-inner, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable .space-header-v3-offcanvas-menu-wrap .hamburger-inner:before, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable .space-header-v3-offcanvas-menu-wrap .hamburger-inner:after, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable input.space-v3-search[type="search"], .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable .space-builder-page-search-wrap, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable .global-search-mob, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable .space-builder-page-search-wrap:after, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable .global-search-mob:after, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable .search-v5-icon path, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable .space-header-v3-logo img, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable .space-header-v3-logo svg path { transition: background-color 1s cubic-bezier(0.65, 0, 0.35, 1), color 1s cubic-bezier(0.65, 0, 0.35, 1), border-color 1s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 1s cubic-bezier(0.65, 0, 0.35, 1), fill 1s cubic-bezier(0.65, 0, 0.35, 1), filter 1s cubic-bezier(0.65, 0, 0.35, 1), -webkit-filter 1s cubic-bezier(0.65, 0, 0.35, 1), opacity 1s cubic-bezier(0.65, 0, 0.35, 1); } /* Pin the logo's base filter to invert(0%) instead of relying on the implicit * `none`. Some browsers don't smoothly interpolate between `none` and * `invert(100%)` — making invert(0%) explicit guarantees a clean 0→100→0 * filter animation in both directions. */ .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable .space-header-v3-logo img { -webkit-filter: invert(0%); filter: invert(0%); } /* Transition for the scroll-UP direction (transparent-mode being ADDED, * destination = the transparent appearance). Keeps the easeOutExpo feel * since the OUT direction was reported as perfect. */ .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .space-header-v3-wrap, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .space-header-v3-wrap a, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .space-header-v3-offcanvas-menu-wrap .hamburger-inner, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .space-header-v3-offcanvas-menu-wrap .hamburger-inner:before, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .space-header-v3-offcanvas-menu-wrap .hamburger-inner:after, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode input.space-v3-search[type="search"], .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .space-builder-page-search-wrap, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .global-search-mob, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .space-builder-page-search-wrap:after, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .global-search-mob:after, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .search-v5-icon path, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .space-header-v3-logo img, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .space-header-v3-logo svg path { transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1), color 0.8s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1), fill 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s cubic-bezier(0.16, 1, 0.3, 1), -webkit-filter 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1); } /* === On-load (transparent) state =========================================== * Active while `.space-header-v3-transparent-mode` is on the wrapper. JS * removes the class once the user scrolls past the threshold, at which point * the rules below stop matching and the default Style A styling takes over. */ .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode { background-color: transparent !important; box-shadow: none !important; } /* Transparent-mode link color is applied ONLY to anchors that sit on top of * the hero (the bar/header chrome itself). The following panels each render * on their own opaque/light background, so painting their links white would * make them invisible: * - `.sub-menu` (standard WP nav submenus) * - `.space-header-v3-offcanvas-menu` (mobile slide-in panel) * - `.vehicle-megamenu` (vehicle browse megamenu — * has its own opaque dropdown * with explicit dark text in * css/frontend.css) * * `:not()` here uses CSS Selectors Level 4 syntax (complex selectors inside * :not). Browser support: Chrome 88+, Firefox 84+, Safari 15.4+ — all of * which predate this codebase's other selectors-4 use (we already use * `:has()` elsewhere in the same file). */ .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .space-header-v3-wrap, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .space-header-v3-wrap a:not(.sub-menu a):not(.space-header-v3-offcanvas-menu a):not(.vehicle-megamenu a) { color: #ffffff; } .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .space-header-v3-wrap .space-header-v3-column-desktop-menu a:hover:not(.sub-menu a):not(.vehicle-megamenu a) { color: #ffffff; opacity: 0.75; } /* Hamburger icon bars */ .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .space-header-v3-offcanvas-menu-wrap .hamburger-inner, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .space-header-v3-offcanvas-menu-wrap .hamburger-inner:before, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .space-header-v3-offcanvas-menu-wrap .hamburger-inner:after { background-color: #ffffff; } /* Search input — outline style on transparent so it reads on imagery. */ .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode input.space-v3-search[type="search"] { background-color: transparent !important; color: #ffffff !important; border: 1px solid #ffffff; } /* Placeholder text — repeat across vendor prefixes, browsers won't apply a * combined `::placeholder, ::-webkit-input-placeholder` selector if any one of * them is unrecognized. !important defends against the lower-specificity * `input.space-v3-search::placeholder` global rule. */ .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode input.space-v3-search[type="search"]::placeholder { color: #ffffff !important; opacity: 0.85; } .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode input.space-v3-search[type="search"]::-webkit-input-placeholder { color: #ffffff !important; opacity: 0.85; } .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode input.space-v3-search[type="search"]::-moz-placeholder { color: #ffffff !important; opacity: 0.85; } .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode input.space-v3-search[type="search"]:-ms-input-placeholder { color: #ffffff !important; opacity: 0.85; } /* Search wrapper border — global.css ships a 2px solid `--primary-button-color` * border on `.space-builder-page-search-wrap` / `.global-search-mob` when the * SRP v5 wrapper is on the page. In transparent mode the input itself already * provides a 1px white outline, so the wrapper's primary-color ring is fully * redundant. We zero its color (kept on the wrap, transitioned via * border-color) instead of `border: none` so the 2px doesn't collapse and * shift the layout mid-animation. */ .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .space-builder-page-search-wrap, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .global-search-mob { border-color: transparent !important; } /* "AI Powered" badge — global.css ships a hard-coded white pill via * `body:has(.srp-v5-wrapper) .space-builder-page-search-wrap:after` (and the * mobile equivalent). In transparent mode we strip the white background and * recolor the label so it blends with the hero/imagery beneath the header. */ .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .space-builder-page-search-wrap:after, .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .global-search-mob:after { background: transparent !important; color: #ffffff !important; } /* Search "sparkle"/AI icon — `global.css` paints the SVG paths with the dealer * primary brand color, which doesn't read on dark imagery. Match the * transparent text color so the icon stays visible against the hero. */ .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .search-v5-icon path { fill: #ffffff !important; } /* Logo: invert raster logos so dark artwork reads on dark imagery. * Caveat: this also inverts already-light logos to dark — supply a light * version of your logo if your default logo is white/cream. */ .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .space-header-v3-logo img { -webkit-filter: invert(100%); filter: invert(100%); } /* Inline SVG logos that don't have an explicit Logo Color override follow * the transparent text color while in transparent mode. */ .fl-node-1dtcn0lg2p3f .space-header-v3.space-header-v3-transparent-capable.space-header-v3-transparent-mode .space-header-v3-logo svg path { fill: #ffffff; } /* ── Google Reviews badge (compact pill) ───────────────────────────────── * Optional, default-off badge rendered by reviews-badge.php. Self-contained * dark pill: Google logo, rating value, star bar, review count, verified * check. Starts hidden (inline style) and is revealed by JS once Google data * loads, so it never shows an empty/zeroed state. */ .fl-node-1dtcn0lg2p3f .space-v3-reviews-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: #202124; border-radius: 999px; text-decoration: none; line-height: 1; white-space: nowrap; transition: background-color 0.2s ease, transform 0.2s ease; } .fl-node-1dtcn0lg2p3f .space-v3-reviews-badge:hover { background: #2d2e30; transform: translateY(-1px); } .fl-node-1dtcn0lg2p3f .space-v3-reviews-badge-logo { display: inline-flex; align-items: center; } .fl-node-1dtcn0lg2p3f .space-v3-reviews-badge-rating { color: #ffffff; font-size: 16px; font-weight: 700; } .fl-node-1dtcn0lg2p3f .space-v3-reviews-badge-stars { position: relative; display: inline-block; font-size: 15px; letter-spacing: 1px; } .fl-node-1dtcn0lg2p3f .space-v3-reviews-badge-stars-bg { color: #5f6368; } .fl-node-1dtcn0lg2p3f .space-v3-reviews-badge-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: #fbbc04; } .fl-node-1dtcn0lg2p3f .space-v3-reviews-badge-count { color: #9aa0a6; font-size: 14px; font-weight: 500; } .fl-node-1dtcn0lg2p3f .space-v3-reviews-badge-verified { display: inline-flex; align-items: center; } /* When placed in the Location Bar, sit it in its own right-aligned column. */ .fl-node-1dtcn0lg2p3f .space-v3-location-reviews-badge { display: flex; align-items: center; } .fl-node-1dtcn0lg2p3f .space-header-v3-wrap .space-header-v3-desktop-menu a { font-family: Inter, sans-serif; font-weight: 400; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; } .fl-node-1dtcn0lg2p3f .space-header-v3-logo > a > *, .fl-node-1dtcn0lg2p3f .space-header-v3-logo img, .fl-node-1dtcn0lg2p3f .space-header-v3-logo { max-height: 80px; } .fl-node-1dtcn0lg2p3f .space-header-v3-logo > a > * { max-width: 185px; margin-right: 0px; } .fl-node-1dtcn0lg2p3f > .fl-module-content { margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; } /* Start Global Nodes CSS */ /* End Global Nodes CSS */ /* Start Layout CSS */ /* End Layout CSS */ /* Sticky */ .fl-builder-content[data-type="header"].fl-theme-builder-header-sticky { position: fixed; width: 100%; z-index: 100; } /* Sticky - fix flyout menu */ .fl-theme-builder-flyout-menu-push-left .fl-builder-content[data-type="header"].fl-theme-builder-header-sticky { left: auto !important; transition: left 0.2s !important; } .fl-theme-builder-flyout-menu-push-right .fl-builder-content[data-type="header"].fl-theme-builder-header-sticky { right: auto !important; transition: right 0.2s !important; } .fl-builder-content[data-type="header"].fl-theme-builder-header-sticky .fl-menu .fl-menu-mobile-opacity { height: 100vh; width: 100vw; } .fl-builder-content[data-type="header"]:not([data-overlay="1"]).fl-theme-builder-header-sticky .fl-menu-mobile-flyout { top: 0px; } .fl-theme-builder-flyout-menu-active body { margin-left: 0px !important; margin-right: 0px !important; } .fl-theme-builder-has-flyout-menu, .fl-theme-builder-has-flyout-menu body { overflow-x: hidden; } .fl-theme-builder-flyout-menu-push-right { right: 0px; transition: right 0.2s ease-in-out; } .fl-theme-builder-flyout-menu-push-left { left: 0px; transition: left 0.2s ease-in-out; } .fl-theme-builder-flyout-menu-active .fl-theme-builder-flyout-menu-push-right { position: relative; right: 250px; } .fl-theme-builder-flyout-menu-active .fl-theme-builder-flyout-menu-push-left { position: relative; left: 250px; } .fl-theme-builder-flyout-menu-active .fl-builder-content[data-type="header"] .fl-menu-disable-transition { transition: none; } /* Shrink */ .fl-builder-content[data-shrink="1"] .fl-row-content-wrap, .fl-builder-content[data-shrink="1"] .fl-col-content, .fl-builder-content[data-shrink="1"] .fl-module-content, .fl-builder-content[data-shrink="1"] img { -webkit-transition: all 0.4s ease-in-out, background-position 1ms; -moz-transition: all 0.4s ease-in-out, background-position 1ms; transition: all 0.4s ease-in-out, background-position 1ms; } .fl-builder-content[data-shrink="1"] img { width: auto; } .fl-builder-content[data-shrink="1"] img.fl-photo-img { width: auto; height: auto; } .fl-builder-content[data-type="header"].fl-theme-builder-header-shrink .fl-row-content-wrap { margin-bottom: 0; margin-top: 0; } .fl-theme-builder-header-shrink-row-bottom.fl-row-content-wrap { padding-bottom: 5px; } .fl-theme-builder-header-shrink-row-top.fl-row-content-wrap { padding-top: 5px; } .fl-builder-content[data-type="header"].fl-theme-builder-header-shrink .fl-col-content { margin-bottom: 0; margin-top: 0; padding-bottom: 0; padding-top: 0; } .fl-theme-builder-header-shrink-module-bottom.fl-module-content, .fl-theme-builder-header-shrink-module-bottom.fl-module:where(.fl-module:not(:has(> .fl-module-content))) { margin-bottom: 5px; } .fl-theme-builder-header-shrink-module-top.fl-module-content, .fl-theme-builder-header-shrink-module-bottom.fl-module:where(.fl-module:not(:has(> .fl-module-content))) { margin-top: 5px; } .fl-builder-content[data-type="header"].fl-theme-builder-header-shrink img { -webkit-transition: all 0.4s ease-in-out, background-position 1ms; -moz-transition: all 0.4s ease-in-out, background-position 1ms; transition: all 0.4s ease-in-out, background-position 1ms; } /* Overlay */ .fl-builder-content[data-overlay="1"]:not(.fl-theme-builder-header-sticky):not(.fl-builder-content-editing) { position: absolute; width: 100%; z-index: 100; } .fl-builder-edit body:not(.single-fl-theme-layout) .fl-builder-content[data-overlay="1"] { display: none; } body:not(.single-fl-theme-layout) .fl-builder-content[data-overlay="1"]:not(.fl-theme-builder-header-scrolled):not([data-overlay-bg="default"]) .fl-row-content-wrap, body:not(.single-fl-theme-layout) .fl-builder-content[data-overlay="1"]:not(.fl-theme-builder-header-scrolled):not([data-overlay-bg="default"]) .fl-col-content, body:not(.single-fl-theme-layout) .fl-builder-content[data-overlay="1"]:not(.fl-theme-builder-header-scrolled):not([data-overlay-bg="default"]) .fl-module-box { background: transparent; }