@iamproperty/components 3.7.9 → 3.9.0-beta-1

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";.carousel{padding-bottom:3rem}.carousel .carousel__wrapper{position:relative}.carousel .carousel__inner{--gutter-x: 1rem;overflow:auto;scroll-snap-type:x mandatory;margin-right:calc(var(--gutter-x) * -.5);margin-left:calc(var(--gutter-x) * -.5)}.carousel .carousel__inner>.row{flex-wrap:nowrap;margin:0}.carousel .carousel__inner>.row>.col{padding-top:2.25rem;padding-bottom:1.5rem;scroll-snap-align:start;scroll-padding:calc(var(--gutter-x) * -1)}.carousel .carousel__item>*:last-child{margin-bottom:0;padding-bottom:0}body.js-enabled .carousel__inner{scrollbar-width:none;-ms-overflow-style:none}body.js-enabled .carousel__inner::-webkit-scrollbar{display:none}.btn-next,.btn-prev{--marker-bg: var(--colour-secondary);text-indent:100%;white-space:nowrap;background:var(--marker-bg);border-radius:100%;width:2.25rem;height:2.25rem;text-indent:-300rem;overflow:hidden;border:none;position:relative;margin:0 .5rem;padding:0}@media screen and (min-width: 62em){.btn-next,.btn-prev{width:3rem;height:3rem}}.btn-next:disabled,.btn-prev:disabled{opacity:.8;pointer-events:none}.btn-next:after,.btn-prev:after{content:"";position:absolute;right:0;top:0;height:100%;width:100%;background:currentColor;mask-image:var(--icon-arrow);mask-size:50%;mask-repeat:no-repeat;mask-position:50% 60%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:55% 50%;transform:rotate(0)}.btn-next:hover,.btn-next:focus,.btn-prev:hover,.btn-prev:focus{background:var(--colour-warning);color:var(--colour-hover);border-radius:100%}.btn-next:active,.btn-prev:active{border-radius:100%}.btn-prev:after{transform:rotate(180deg)}.carousel:not(.hide-controls){padding-bottom:4.5rem!important}.carousel.hide-controls .carousel__controls{display:none}.carousel .carousel__controls{position:absolute;text-align:center;width:auto;left:0;width:calc(100% + 2rem);margin-left:-1rem;margin-right:-1rem;bottom:-3rem}.carousel .carousel__controls a{width:1rem;height:1rem;min-height:1rem;border-radius:50%;text-indent:-50rem;overflow:hidden;background:currentColor;padding:0;margin:0 .5rem .5rem}.carousel .carousel__controls a:before{display:none}.carousel .carousel__controls a:first-child:last-child{display:none}.carousel .carousel__controls>a:nth-child(10)~a{display:none}.carousel.hide-btns .carousel__wrapper>.btn{display:none}.carousel:not(.hide-btns) .carousel__inner{margin-left:1.75rem;margin-right:1.75rem}.carousel .carousel__wrapper>.btn{position:absolute;top:50%;left:-1.25rem;transform:translateY(-50%)}.carousel .carousel__wrapper>.btn.btn-next{left:auto;right:-1.25rem}@media screen and (min-width: 62em){.carousel .carousel__wrapper>.btn{margin-left:-1rem;margin-right:-1rem}}.carousel .carousel__inner>.row>.col:first-child{margin-left:0!important}@media screen and (min-width: 36em){.carousel .carousel__controls>a:nth-child(10)~a{display:inline-block}.carousel .carousel__inner>.row[class*=row-cols-sm-]>.col{scroll-snap-align:unset}.carousel .carousel__inner>.row-cols-sm-2>.col:nth-child(odd),.carousel .carousel__inner>.row-cols-sm-3>.col:nth-child(3n+1),.carousel .carousel__inner>.row-cols-sm-4>.col:nth-child(4n+1),.carousel .carousel__inner>.row-cols-sm-5>.col:nth-child(5n+1),.carousel .carousel__inner>.row-cols-sm-6>.col:nth-child(6n+1){scroll-snap-align:start}body:not(.js-enabled) .carousel .carousel__inner>.row-cols-sm-2>.col:nth-child(odd),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-sm-3>.col:nth-child(3n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-sm-4>.col:nth-child(4n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-sm-5>.col:nth-child(5n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-sm-6>.col:nth-child(6n+1){margin-left:4rem}.carousel .carousel__controls.cols-sm-2>a:not(:nth-child(odd)),.carousel .carousel__controls.cols-sm-3>a:not(:nth-child(3n+1)),.carousel .carousel__controls.cols-sm-4>a:not(:nth-child(4n+1)),.carousel .carousel__controls.cols-sm-5>a:not(:nth-child(5n+1)),.carousel .carousel__controls.cols-sm-6>a:not(:nth-child(6n+1)){display:none}.carousel .carousel__controls.cols-sm-2>a:first-child:nth-last-child(2),.carousel .carousel__controls.cols-sm-3>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3)),.carousel .carousel__controls.cols-sm-4>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4)),.carousel .carousel__controls.cols-sm-5>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5)),.carousel .carousel__controls.cols-sm-6>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5),a:first-child:nth-last-child(6)){display:none}.carousel.hide-sm-btns .carousel__wrapper>.btn{display:none}.carousel.hide-sm-btns .carousel__inner{margin-left:0;margin-right:0}}@media screen and (min-width: 62em){.carousel .carousel__inner>.row[class*=row-cols-md-]>.col{scroll-snap-align:unset;margin-left:0}.carousel .carousel__inner>.row-cols-md-2>.col:nth-child(odd),.carousel .carousel__inner>.row-cols-md-3>.col:nth-child(3n+1),.carousel .carousel__inner>.row-cols-md-4>.col:nth-child(4n+1),.carousel .carousel__inner>.row-cols-md-5>.col:nth-child(5n+1),.carousel .carousel__inner>.row-cols-md-6>.col:nth-child(6n+1){scroll-snap-align:start}body:not(.js-enabled) .carousel .carousel__inner>.row-cols-md-2>.col:nth-child(odd),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-md-3>.col:nth-child(3n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-md-4>.col:nth-child(4n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-md-5>.col:nth-child(5n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-md-6>.col:nth-child(6n+1){margin-left:50vw}.carousel .carousel__controls.cols-md-2>a:not(:nth-child(odd)),.carousel .carousel__controls.cols-md-3>a:not(:nth-child(3n+1)),.carousel .carousel__controls.cols-md-4>a:not(:nth-child(4n+1)),.carousel .carousel__controls.cols-md-5>a:not(:nth-child(5n+1)),.carousel .carousel__controls.cols-md-6>a:not(:nth-child(6n+1)){display:none}.carousel .carousel__controls.cols-md-2>a:first-child:nth-last-child(2),.carousel .carousel__controls.cols-md-3>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3)),.carousel .carousel__controls.cols-md-4>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4)),.carousel .carousel__controls.cols-md-5>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5)),.carousel .carousel__controls.cols-md-6>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5),a:first-child:nth-last-child(6)){display:none}.carousel.hide-md-btns .carousel__wrapper>.btn{display:none}.carousel.hide-md-btns .carousel__inner{margin-left:0;margin-right:0}}.testimonial{--testimonial-padding: 1rem;--testimonial-spacing: 1rem}@media screen and (min-width: 62em){.testimonial{--testimonial-padding: 4rem;--testimonial-spacing: 2rem}}.testimonial>div:first-child{position:relative;overflow:hidden}.testimonial .circle{color:currentColor;position:absolute;top:-18rem;right:-8rem;font-size:28rem;border-width:4px}.testimonial__images{overflow:auto;scroll-snap-type:x mandatory;display:flex;user-select:none;touch-action:pan-x;height:14.375rem}@media screen and (min-width: 36em){.testimonial__images{height:21.25rem}}@media screen and (min-width: 62em){.testimonial__images{min-height:100%;scroll-snap-type:y mandatory;flex-direction:column;touch-action:pan-y}}.testimonial__images img{scroll-snap-align:start;user-select:none;pointer-events:none;flex-shrink:0}.testimonial .testimonial__controls{display:none}.testimonial.testimonial--multi .testimonial__controls{display:block;position:absolute;bottom:0;left:50%;transform:translate(-50%,50%)}@media screen and (min-width: 62em){.testimonial.testimonial--multi .testimonial__controls{left:auto;bottom:auto;right:0;top:50%;transform:rotate(90deg) translateY(-120%);transform-origin:center}}.testimonial h2{padding:2rem var(--testimonial-padding) 0 var(--testimonial-padding)}@media screen and (min-width: 36em){.testimonial h2{padding-top:3rem}}@media screen and (min-width: 62em){.testimonial h2{padding-top:9rem}}.testimonial__content{--display-none: none;margin:0 var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding);position:relative}@media screen and (min-width: 62em){.testimonial__content{--display-none: block}.testimonial__content blockquote:not(.largest){position:absolute;top:0}}.testimonial[data-show="1"] blockquote:not(:nth-child(1)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="2"] blockquote:not(:nth-child(2)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="3"] blockquote:not(:nth-child(3)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="4"] blockquote:not(:nth-child(4)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="5"] blockquote:not(:nth-child(5)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="6"] blockquote:not(:nth-child(6)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="7"] blockquote:not(:nth-child(7)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="8"] blockquote:not(:nth-child(8)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="9"] blockquote:not(:nth-child(9)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="10"] blockquote:not(:nth-child(10)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial__after{padding:1rem var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding)}.testimonial__images::-webkit-scrollbar{display:none}.testimonial__images{-ms-overflow-style:none;scrollbar-width:none}.property-searchbar fieldset{position:relative}@media screen and (min-width: 62em){.property-searchbar fieldset{position:relative;padding-right:1.5rem}.property-searchbar fieldset:after{content:"";position:absolute;top:0;right:.5rem;display:block;height:100%;width:1px;background-color:var(--colour-muted);opacity:.25}}.property-searchbar .form-control__wrapper{margin-bottom:1rem}@media screen and (min-width: 62em){.property-searchbar .form-control__wrapper{margin-bottom:0}}.property-searchbar .form-label,.property-searchbar label{font-size:.875rem;text-transform:uppercase}@media screen and (min-width: 62em){.property-searchbar .row .row .form-label{display:none}.property-searchbar .form-control,.property-searchbar .form-select{padding:.5rem 1.5rem .5rem .5rem}.property-searchbar .form-select{background-position:right .5rem center}}.property-searchbar .input--locations{padding-right:5.5rem}.property-searchbar .select--miles{position:absolute;bottom:0rem;right:.5rem;width:5rem}@media screen and (min-width: 62em){.property-searchbar .select--miles{right:1.5rem}}.property-searchbar .select--miles label{display:none}.property-searchbar .select--miles select{background-color:transparent;border-color:transparent}@media screen and (min-width: 62em){.property-searchbar .property-searchbar__btn{align-items:flex-end}}.property-searchbar button{margin-top:1rem;margin-bottom:1rem}@media screen and (min-width: 62em){.property-searchbar button{margin:0;padding-left:3.5rem;padding-right:3.5rem}}.property-searchbar--hero .property-searchbar{--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: var(--colour-canvas);padding:1rem;background-color:#fff;width:100%;border-radius:.625rem;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.24);box-shadow:0 2px 4px #0000003d;position:relative}.property-searchbar--hero .property-searchbar .text-primary{color:var(--colour-primary)!important}@media screen and (min-width: 62em){.property-searchbar--hero .property-searchbar{border-radius:3rem;padding:1.5rem 2.5rem}.property-searchbar--hero .property-searchbar .form-label,.property-searchbar--hero .property-searchbar label{margin-bottom:0}.property-searchbar--hero .property-searchbar .form-control,.property-searchbar--hero .property-searchbar .form-select{margin-left:-.5rem;border:none;padding-top:.25rem;padding-bottom:.25rem}.property-searchbar--hero .property-searchbar .form-select{background-position:right 0rem center;padding-right:1rem}.property-searchbar--hero .property-searchbar .property-searchbar__btn{align-items:center}}.nav .nav__mobile-bar{background:var(--colour-primary);color:#fff;--colour-canvas: #262626;--colour-canvas-2: #313131;--colour-body: #BFBFBF;--colour-heading: var(--colour-white);--colour-link: var(--colour-white);--colour-hover: var(--colour-white);--colour-active: var(--colour-white);--colour-border: var(--colour-white);--colour-brand: var(--colour-white);--colour-btn: #00313c;--colour-btn-border: var(--colour-white);--colour-btn-bg: var(--colour-white);--colour-btn-hover: var(--colour-white);--colour-btn-secondary: var(--colour-white);--colour-btn-secondary-border: var(--colour-white);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-white);--colour-btn-secondary-hover: var(--colour-primary-theme);display:flex;flex-direction:column;flex-wrap:nowrap;width:23.4375rem}@media screen and (min-width: 36em){.nav .nav__mobile-bar{width:100%}}.nav .nav__mobile-bar>.container{padding-top:1rem;padding-bottom:1rem;flex-shrink:0;overflow:visible}.nav{overflow-x:hidden;font-weight:700}.nav__inner,.nav__menu--account{display:flex;flex-direction:column;flex-wrap:nowrap}.nav__inner>.container,.nav__menu--account>.container{padding-top:1rem;padding-bottom:0;flex-shrink:0;overflow:visible;z-index:unset}.nav__menu{padding-top:2.25rem;padding-bottom:1rem}.nav .brand{font-size:2.25rem}@media screen and (min-width: 62em){.nav .brand{font-size:3.75rem}}.nav__logo img{height:2.25rem;width:auto}@media screen and (min-width: 36em){.nav__logo img{height:3.75rem;width:auto}}.nav__search-btn,.nav__menu-btn{display:flex}.nav__search-btn label,.nav__menu-btn label{height:1.125rem;width:1.5rem;text-indent:-300%;overflow:hidden;position:relative;cursor:pointer;color:var(--colour-link)}.nav__search-btn label:hover,.nav__search-btn label:focus,.nav__menu-btn label:hover,.nav__menu-btn label:focus{color:var(--colour-hover)}.nav__search-btn label:active,.nav__menu-btn label:active{color:var(--colour-active)}.nav__search-btn label:before,.nav__search-btn label:after,.nav__menu-btn label:before,.nav__menu-btn label:after{content:"";position:absolute;width:0%;height:2px;top:calc(50% - 1px);left:0;background:currentColor;transform-origin:50% 50%;transition:transform .5s,width .5s}.nav__search-btn label{text-indent:0;overflow:visible}.nav__search-btn .icon{height:2rem;width:2rem;margin-top:-.5rem;margin-left:-.0625rem;transition:opacity .5s;color:inherit}.nav__search-btn .icon__outline{stroke-width:2px;stroke:currentColor}.nav__menu-btn{display:flex}.nav__menu-btn label{border-top:2px solid currentColor;border-bottom:2px solid currentColor}.nav__menu-btn label:before,.nav__menu-btn label:after{width:100%}.nav__account-btn label{font-size:1.125rem;text-indent:0;overflow:visible;color:var(--colour-body);height:3rem;line-height:3rem;display:block;border-top:1px solid var(--colour-border);border-bottom:1px solid var(--colour-border)}.nav__account-btn .icon{height:1.75rem;width:1.75rem;margin-top:-.5rem;margin-right:.5rem;transition:opacity .5s;color:inherit}.nav__account-btn .icon__outline{stroke-width:2px;stroke:currentColor}.nav__menu>ul{margin-bottom:0}.nav__menu>ul>li>a{font-size:1.125rem;line-height:2rem;display:inline-block;position:relative;text-decoration:none}.nav__menu>ul>li>a.current{border-left:.375rem solid var(--colour-info);margin-left:-1.25rem;padding-left:.875rem}@media screen and (min-width: 62em){.nav__menu--search{display:none}#showSearch:checked~.nav__inner>.nav__menu--search{order:2;position:absolute;top:100%;left:0;width:100%;background:rgba(0,0,0,.6);height:calc(100vh - 5rem);display:block}}.services{line-height:2rem}.services li{display:flex;justify-content:space-between}.services .service--active:before{content:"";height:1em;width:1em;display:inline-block;background:var(--colour-secondary);margin-right:.5rem;margin-bottom:-.1em;border-radius:50%}.credits{border:2px solid var(--colour-primary);padding:1rem;margin-bottom:2rem;border-radius:.625rem}.credits .h5,.credits ul{padding-inline:1rem}.credits>*:last-child{margin-bottom:0!important}.nav[class*=bg-] .nav__inner{background-color:transparent}.nav__menu--secondary{flex-grow:1;font-weight:700}.nav__menu--secondary .nav__section-link{pointer-events:none;font-weight:700;color:var(--colour-link);font-size:1.125rem}.nav__menu--secondary>.container>ul>li{padding-block:.375rem}.nav__menu--secondary>.container>ul>li:not(:last-child){border-bottom:1px solid var(--colour-border)}.nav__menu--secondary>.container>ul>li a{display:inline-block;font-size:1.125rem;line-height:2.25rem;text-decoration:none;font-weight:700}.nav__menu--secondary>.container>ul>li ul{padding:0}.nav__menu--secondary>.container>ul>li ul a{font-weight:400}.nav__menu--secondary>.container>ul>li ul a .icon{display:none}.nav{position:sticky;top:0;left:0;width:100%;z-index:var(--index-menu)}.nav.is-stuck{-webkit-box-shadow:0 4px 20px -10px rgba(51,51,51,.25);box-shadow:0 4px 20px -10px #33333340}nav+main>*:first-child{padding-top:2rem}.nav__menu,.nav__btn,.nav__menu--secondary{display:none}.nav__inner,.nav__menu--account{position:absolute;top:0;left:100%;background:var(--colour-canvas);z-index:2;width:100%;overscroll-behavior:contain}@media screen and (min-width: 36em){.nav__inner,.nav__menu--account{width:23.4375rem}}.nav__menu--account{z-index:2;height:100vh}.nav:has(#showMenu:checked){min-height:100vh}#showMenu:checked~.nav__inner,#showAccount:checked~.nav__menu--account{height:100vh;overflow:visible;overflow-x:auto;left:0}@media screen and (min-width: 36em){#showMenu:checked~.nav__inner,#showAccount:checked~.nav__menu--account{left:calc(100% - 23.4375rem)}}@media screen and (min-width: 62em){#showAccount~.nav__menu--account{display:none}#showAccount:checked~.nav__menu--account{left:0;width:100%;height:auto;display:block;top:6rem;border-top:.3125rem solid var(--colour-primary);border-bottom:1px solid var(--colour-border-light);-webkit-box-shadow:0px 3px 6px 0px rgba(0,0,0,.16);-moz-box-shadow:0px 3px 6px 0px rgba(0,0,0,.16);box-shadow:0 3px 6px #00000029}}#showMenu:checked~div .nav__menu,#showMenu:checked~div .nav__btn,#showMenu:checked~div .nav__menu--secondary,#showMenu:not(:checked)~#showSearch:checked~div .nav__menu--search{display:block}#showMenu:checked~div .nav__menu-btn label,#showSearch:checked~div .nav__search-btn label{border:0}#showMenu:checked~div .nav__menu-btn label .icon,#showSearch:checked~div .nav__search-btn label .icon{opacity:0}#showMenu:checked~div .nav__menu-btn label:before,#showSearch:checked~div .nav__search-btn label:before{width:100%;transform:rotate(45deg)}#showMenu:checked~div .nav__menu-btn label:after,#showSearch:checked~div .nav__search-btn label:after{width:100%;transform:rotate(-45deg)}@media screen and (min-width: 36em){#showMenu:checked~.nav__bg{content:" ";position:absolute;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.5);z-index:1}}@media screen and (min-width: 62em){.nav__bg{display:none}}@media screen and (min-width: 62em){.nav .nav__mobile-bar{display:none}.nav__logo{height:4rem}#showMenu:checked~.nav__inner,.nav__inner{overflow:visible;position:static;width:100%}.nav .nav__menu{display:flex;padding-bottom:0}.nav__btn,.nav__menu--secondary{display:flex}.nav .nav__inner>.container{padding-bottom:1rem}.nav__search-btn,.nav__btn{order:2;margin-left:1rem}.nav__search-btn .btn,.nav__btn .btn{margin-bottom:0}.nav__menu{padding-top:0}.nav__menu>.list-unstyled{margin-left:-1.5rem!important;margin-right:-1.5rem!important;width:calc(100% + 3rem);margin-bottom:0;padding-top:0;padding-left:1.5rem;padding-right:1.5rem}.nav__menu>.list-unstyled>li{display:inline-block;padding-left:1rem;padding-right:1rem}.nav__menu>.list-unstyled>li:not(:last-child){border-right:1px solid var(--colour-border)}.nav__menu>.list-unstyled>li>a{line-height:1.75rem}.nav__menu>.list-unstyled>li>a.current{border-left:none;padding-left:0;border-bottom:.1875rem solid var(--colour-info)}.nav__account-btn{max-width:fit-content!important}.nav__account-btn label{border:none!important;padding-top:.5rem;position:relative;padding-right:2.5rem}.nav__account-btn label:after{content:"";position:absolute;top:calc(50% + .5rem);right:0;width:1.5em;height:1.5em;background:currentColor;mask-image:var(--icon-arrow);mask-size:50%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transition:transform .2s ease-in-out;transform:rotate(90deg) translate(-50%)}.nav .nav__menu--secondary>.container>.list-unstyled{font-size:.9375rem;padding-top:0}}@media screen and (min-width: 62em){.nav__menu--secondary{background-color:var(--colour-primary);--colour-canvas: #262626;--colour-canvas-2: #313131;--colour-body: #BFBFBF;--colour-heading: var(--colour-white);--colour-link: var(--colour-white);--colour-hover: var(--colour-white);--colour-active: var(--colour-white);--colour-border: var(--colour-white);--colour-brand: var(--colour-white);--colour-btn: #00313c;--colour-btn-border: var(--colour-white);--colour-btn-bg: var(--colour-white);--colour-btn-hover: var(--colour-white);--colour-btn-secondary: var(--colour-white);--colour-btn-secondary-border: var(--colour-white);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-white);--colour-btn-secondary-hover: var(--colour-primary-theme)}.nav__menu--secondary .nav__section-link{pointer-events:all}.nav__menu--secondary>.container{padding-bottom:0}.nav__menu--secondary>.container>.list-unstyled{margin-left:-1rem!important;margin-right:-1rem!important;width:calc(100% + 2rem);margin-bottom:0}.nav__menu--secondary>.container>.list-unstyled>li{display:inline-block;padding-left:1rem;padding-right:1rem;border:none!important;padding-block:0;position:relative}.nav__menu--secondary>.container>.list-unstyled>li a,.nav__menu--secondary>.container>.list-unstyled>li .nav__section-link{display:block;line-height:2.25rem;padding-block:.5rem;cursor:pointer}.nav__menu--secondary>.container>.list-unstyled>li ul{display:none}.nav__menu--secondary>.container>.list-unstyled>li:hover>.nav__section-link,.nav__menu--secondary>.container>.list-unstyled>li:focus>.nav__section-link,.nav__menu--secondary>.container>.list-unstyled>li:focus-within>.nav__section-link{color:var(--colour-selected)}.nav__menu--secondary>.container>.list-unstyled>li:hover ul,.nav__menu--secondary>.container>.list-unstyled>li:focus ul,.nav__menu--secondary>.container>.list-unstyled>li:focus-within ul{display:block;background:white;position:absolute;top:100%;left:0;padding-top:1rem;-webkit-box-shadow:0 4px 20px -10px rgba(51,51,51,.25);box-shadow:0 4px 20px -10px #33333340;--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: var(--colour-canvas);--colour-admin: var(--colour-admin-theme)}.nav__menu--secondary>.container>.list-unstyled>li:hover ul .text-primary,.nav__menu--secondary>.container>.list-unstyled>li:focus ul .text-primary,.nav__menu--secondary>.container>.list-unstyled>li:focus-within ul .text-primary{color:var(--colour-primary)!important}.nav__menu--secondary>.container>.list-unstyled>li:hover ul li,.nav__menu--secondary>.container>.list-unstyled>li:focus ul li,.nav__menu--secondary>.container>.list-unstyled>li:focus-within ul li{padding-inline:1.5rem}.nav__menu--secondary>.container>.list-unstyled>li:hover ul li:last-child,.nav__menu--secondary>.container>.list-unstyled>li:focus ul li:last-child,.nav__menu--secondary>.container>.list-unstyled>li:focus-within ul li:last-child{padding-bottom:1rem}.nav__menu--secondary>.container>.list-unstyled>li:hover ul li.nav__download,.nav__menu--secondary>.container>.list-unstyled>li:focus ul li.nav__download,.nav__menu--secondary>.container>.list-unstyled>li:focus-within ul li.nav__download{background:var(--colour-admin);padding-top:1rem}.nav__menu--secondary>.container>.list-unstyled>li:hover ul li.nav__download+li.nav__download,.nav__menu--secondary>.container>.list-unstyled>li:focus ul li.nav__download+li.nav__download,.nav__menu--secondary>.container>.list-unstyled>li:focus-within ul li.nav__download+li.nav__download{padding-top:0}.nav__menu--secondary>.container>.list-unstyled>li:hover ul a,.nav__menu--secondary>.container>.list-unstyled>li:focus ul a,.nav__menu--secondary>.container>.list-unstyled>li:focus-within ul a{white-space:nowrap;padding:0;line-height:3rem}.nav__menu--secondary>.container>.list-unstyled>li:hover ul a .icon,.nav__menu--secondary>.container>.list-unstyled>li:focus ul a .icon,.nav__menu--secondary>.container>.list-unstyled>li:focus-within ul a .icon{display:inline-block;font-size:1.5em;padding:0;margin:-.15em .25em 0 0}.nav__menu--secondary>.container>.logout-button{display:none}}@media screen and (min-width: 62em){.nav__menu--account>.container:first-child{display:none}.nav__menu--account>.container:not(:first-child){display:flex;flex-wrap:wrap;gap:2rem;align-items:start}.nav__menu--account>.container:not(:first-child):before{display:none}.nav__menu--account>.container:not(:first-child)>.row,.nav__menu--account>.container:not(:first-child) .nav__featured-link,.nav__menu--account>.container:not(:first-child) .credits{flex-basis:22%;flex-grow:1;margin:0}.nav__menu--account>.container:not(:first-child)>.row>.col:first-child,.nav__menu--account>.container:not(:first-child) .nav__featured-link>.row>.col:first-child{max-width:100%!important;width:100%;flex-shrink:0;min-width:100%;margin-bottom:1rem}.nav__menu--account>.container:not(:first-child) .logout-button{min-width:100%}}@media screen and (min-width: 62em){.nav .list-unstyled>li details.nav__mega-menu{position:static;height:4.5rem;margin-bottom:-5rem}}.nav .list-unstyled>li details.nav__mega-menu .inner{z-index:5}.nav .list-unstyled>li details.nav__mega-menu .inner [class*=bg-]{--bs-bg-opacity: 0}@media screen and (min-width: 62em){.nav .list-unstyled>li details.nav__mega-menu .inner [class*=bg-]{--bs-bg-opacity: 1}}@media screen and (min-width: 62em){.nav .list-unstyled>li details.nav__mega-menu .inner{--bs-bg-opacity: 1;position:absolute;top:100%;left:50%;width:100vw!important;max-width:100vw!important;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translate(-50%);background:rgba(0,0,0,.6);height:calc(100vh - 8rem);pointer-events:none;padding-top:0}.nav .list-unstyled>li details.nav__mega-menu .inner .container{padding:0 1.5rem 1rem!important;max-width:90rem!important;text-align:left;pointer-events:all;display:flex}.nav .list-unstyled>li details.nav__mega-menu .inner .container>div{padding:2.25rem}}.nav--inline-search .nav__menu form{position:relative}.nav--inline-search .nav__menu form .form-control__wrapper .form-control{padding-right:3rem}.nav--inline-search .nav__menu form button{position:absolute;bottom:0;right:0;margin:0;z-index:var(--index-focus);border-color:transparent;background:transparent;padding:.85rem 0rem}.nav--inline-search .nav__menu form button .icon{stroke:currentColor}@media screen and (min-width: 62em){.nav--inline-search .nav__menu>.list-unstyled{text-align:left;margin-right:0!important}.nav--inline-search .nav__menu form{min-width:21.875rem;position:relative}.nav--inline-search .nav__menu form .form-control__wrapper{margin-bottom:0;display:flex;align-items:center}.nav--inline-search .nav__menu form .form-control__wrapper label{white-space:nowrap;padding-right:1rem}.nav--inline-search .nav__menu form .form-control__wrapper .form-control{padding:.4375rem 3rem .4375rem 1rem}.nav--inline-search .nav__menu form button{padding:.5rem 0rem}}@media screen and (min-width: 62em){.nav--admin .nav__logo{height:3rem}.nav--admin .nav__logo .brand{font-size:3rem}}.nav--just-account .nav__menu,.nav--just-account .nav__account-btn{display:none!important}@media screen and (min-width: 62em){.nav--just-account .nav__menu,.nav--just-account .nav__account-btn{display:block!important}}.nav--just-account #showMenu:checked~.nav__menu--account{height:100vh;overflow:visible;overflow-x:auto;left:0;pointer-events:none;background:transparent}@media screen and (min-width: 36em){.nav--just-account #showMenu:checked~.nav__menu--account{width:23.4375rem;left:calc(100% - 23.4375rem)}}.nav--just-account #showMenu:checked~.nav__menu--account>.container:first-child{opacity:0}.nav--just-account #showMenu:checked~.nav__menu--account>.container:not(:first-child){pointer-events:all}.stepper{background:#f0f0f0;display:flex;flex-wrap:wrap;margin-bottom:2rem;border:1px solid var(--colour-canvas);overflow:hidden}@media screen and (min-width: 62em){.stepper{flex-wrap:nowrap;overflow-x:auto}}.stepper ol{margin:0;z-index:1;background:var(--colour-canvas);counter-reset:section;width:100%;overflow:auto}@media screen and (min-width: 36em){.stepper ol{display:flex;flex-grow:1;padding-right:calc(2rem + 1px);margin-top:-1px;margin-bottom:-1px;margin-right:calc(-2rem - 2px);clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 50%,calc(100% - 2rem) 100%,0 100%)}}@media screen and (min-width: 62em){.stepper ol{overflow:initial}}.stepper ol li{width:100%;max-width:100%;background:var(--colour-canvas);padding:1px}@media screen and (min-width: 36em){.stepper ol li:first-child a{padding-left:1rem;clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 50%,calc(100% - 2rem) 100%,0 100%)}}@media screen and (min-width: 62em){.stepper ol li:first-child a{padding-left:2rem}}.stepper ol li a{display:block;padding:1rem;text-decoration:none;background:var(--colour-muted);line-height:1;position:relative;color:var(--colour-primary)}@media screen and (min-width: 36em){.stepper ol li a{margin-right:-2rem;padding:2rem 3rem;clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 50%,calc(100% - 2rem) 100%,0 100%,2rem 50%);display:flex;height:100%;vertical-align:baseline;justify-content:center;align-items:center}}.stepper ol li a span{position:relative;display:inline;padding-left:2.25rem}.stepper ol li a span:before{counter-increment:section;content:counter(section);display:block;position:absolute;top:50%;left:0;transform:translateY(-50%);margin-right:.5rem;font-size:.75em;border-radius:50%;border:2px solid currentColor;height:1.5rem;line-height:1.3rem;width:1.5rem;font-family:var(--font-heading);text-align:center}.stepper ol li a.bg-warning span:before,.stepper ol li a.bg-danger span:before{content:"!"}.stepper ol li a.bg-success span:before{content:"\2713";text-indent:-.1em}.stepper ol li a.current{background:var(--colour-primary);color:#fff;pointer-events:none}.stepper ol li a:not([href]){pointer-events:none}.stepper ol li a[href]:hover{opacity:.6}.stepper ol li a[href]:active{opacity:.8}.stepper>span{width:100%;display:flex;padding:1rem;flex-shrink:0;margin:0;position:relative;z-index:0;align-items:center}.stepper>span.stepper__end{display:none}@media screen and (min-width: 62em){.stepper>span{width:max-content;padding:2rem}.stepper>span.stepper__end{padding-left:3.5rem;display:flex}}.tabs:not(.admin-panel){position:relative}.tabs__links{margin-bottom:1.5rem;overflow:visible;padding-bottom:2px;position:relative;display:block}.tabs__links:after{content:"";left:50%;position:relative;height:3px;width:100vw;border-bottom:1px solid var(--colour-border);transform:translate(-50%);display:block;clear:both}.tabs__links .link:not(.text-decoration-none):not(.btn){--is-current: 0;font-weight:700;font-family:var(--font-heading);font-size:1.125rem;cursor:pointer;margin:.5rem 1.5rem 0 0;padding:0;display:inline-block}.tabs__links .link:not(.text-decoration-none):not(.btn):last-child{margin-inline-end:0}.tabs__links .link:not(.text-decoration-none):not(.btn):after{position:absolute;content:"";top:100%;left:50%;height:2px;transform:translate(-50%);background:var(--colour-info);transition:width .5s;width:0%}.tabs__links .link:not(.text-decoration-none):not(.btn):hover:after,.tabs__links .link:not(.text-decoration-none):not(.btn):focus:after,.tabs__links .link:not(.text-decoration-none):not(.btn).focus:after{width:60%}.tabs__links .link:not(.text-decoration-none):not(.btn)[aria-pressed=true]:after,.tabs__links .link:not(.text-decoration-none):not(.btn):active:after,.tabs__links .link:not(.text-decoration-none):not(.btn).active:after{width:100%}.tabs__links .link:not(.text-decoration-none):not(.btn)[aria-pressed=true],.tabs__links .link:not(.text-decoration-none):not(.btn).active{pointer-events:none;outline:var(--contrast-outline-width, 0px) solid var(--colour-primary-theme)!important}
+@charset "UTF-8";.carousel{padding-bottom:3rem}.carousel .carousel__wrapper{position:relative}.carousel .carousel__inner{--gutter-x: 1rem;overflow:auto;scroll-snap-type:x mandatory;margin-right:calc(var(--gutter-x) * -.5);margin-left:calc(var(--gutter-x) * -.5)}.carousel .carousel__inner>.row{flex-wrap:nowrap;margin:0}.carousel .carousel__inner>.row>.col{padding-top:2.25rem;padding-bottom:1.5rem;scroll-snap-align:start;scroll-padding:calc(var(--gutter-x) * -1)}.carousel .carousel__item>*:last-child{margin-bottom:0;padding-bottom:0}body.js-enabled .carousel__inner{scrollbar-width:none;-ms-overflow-style:none}body.js-enabled .carousel__inner::-webkit-scrollbar{display:none}.btn-next,.btn-prev{--marker-bg: var(--colour-secondary);text-indent:100%;white-space:nowrap;background:var(--marker-bg);border-radius:100%;width:2.25rem;height:2.25rem;text-indent:-300rem;overflow:hidden;border:none;position:relative;margin:0 .5rem;padding:0}@media screen and (min-width: 62em){.btn-next,.btn-prev{width:3rem;height:3rem}}.btn-next:disabled,.btn-prev:disabled{opacity:.8;pointer-events:none}.btn-next:after,.btn-prev:after{content:"";position:absolute;right:0;top:0;height:100%;width:100%;background:currentColor;mask-image:var(--icon-arrow);mask-size:50%;mask-repeat:no-repeat;mask-position:50% 60%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:55% 50%;transform:rotate(0)}.btn-next:hover,.btn-next:focus,.btn-prev:hover,.btn-prev:focus{background:var(--colour-warning);color:var(--colour-hover);border-radius:100%}.btn-next:active,.btn-prev:active{border-radius:100%}.btn-prev:after{transform:rotate(180deg)}.carousel:not(.hide-controls){padding-bottom:4.5rem!important}.carousel.hide-controls .carousel__controls{display:none}.carousel .carousel__controls{position:absolute;text-align:center;width:auto;left:0;width:calc(100% + 2rem);margin-left:-1rem;margin-right:-1rem;bottom:-3rem}.carousel .carousel__controls a{width:1rem;height:1rem;min-height:1rem;border-radius:50%;text-indent:-50rem;overflow:hidden;background:currentColor;padding:0;margin:0 .5rem .5rem}.carousel .carousel__controls a:before{display:none}.carousel .carousel__controls a:first-child:last-child{display:none}.carousel .carousel__controls>a:nth-child(10)~a{display:none}.carousel.hide-btns .carousel__wrapper>.btn{display:none}.carousel:not(.hide-btns) .carousel__inner{margin-left:1.75rem;margin-right:1.75rem}.carousel .carousel__wrapper>.btn{position:absolute;top:50%;left:-1.25rem;transform:translateY(-50%)}.carousel .carousel__wrapper>.btn.btn-next{left:auto;right:-1.25rem}@media screen and (min-width: 62em){.carousel .carousel__wrapper>.btn{margin-left:-1rem;margin-right:-1rem}}.carousel .carousel__inner>.row>.col:first-child{margin-left:0!important}@media screen and (min-width: 36em){.carousel .carousel__controls>a:nth-child(10)~a{display:inline-block}.carousel .carousel__inner>.row[class*=row-cols-sm-]>.col{scroll-snap-align:unset}.carousel .carousel__inner>.row-cols-sm-2>.col:nth-child(odd),.carousel .carousel__inner>.row-cols-sm-3>.col:nth-child(3n+1),.carousel .carousel__inner>.row-cols-sm-4>.col:nth-child(4n+1),.carousel .carousel__inner>.row-cols-sm-5>.col:nth-child(5n+1),.carousel .carousel__inner>.row-cols-sm-6>.col:nth-child(6n+1){scroll-snap-align:start}body:not(.js-enabled) .carousel .carousel__inner>.row-cols-sm-2>.col:nth-child(odd),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-sm-3>.col:nth-child(3n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-sm-4>.col:nth-child(4n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-sm-5>.col:nth-child(5n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-sm-6>.col:nth-child(6n+1){margin-left:4rem}.carousel .carousel__controls.cols-sm-2>a:not(:nth-child(odd)),.carousel .carousel__controls.cols-sm-3>a:not(:nth-child(3n+1)),.carousel .carousel__controls.cols-sm-4>a:not(:nth-child(4n+1)),.carousel .carousel__controls.cols-sm-5>a:not(:nth-child(5n+1)),.carousel .carousel__controls.cols-sm-6>a:not(:nth-child(6n+1)){display:none}.carousel .carousel__controls.cols-sm-2>a:first-child:nth-last-child(2),.carousel .carousel__controls.cols-sm-3>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3)),.carousel .carousel__controls.cols-sm-4>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4)),.carousel .carousel__controls.cols-sm-5>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5)),.carousel .carousel__controls.cols-sm-6>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5),a:first-child:nth-last-child(6)){display:none}.carousel.hide-sm-btns .carousel__wrapper>.btn{display:none}.carousel.hide-sm-btns .carousel__inner{margin-left:0;margin-right:0}}@media screen and (min-width: 62em){.carousel .carousel__inner>.row[class*=row-cols-md-]>.col{scroll-snap-align:unset;margin-left:0}.carousel .carousel__inner>.row-cols-md-2>.col:nth-child(odd),.carousel .carousel__inner>.row-cols-md-3>.col:nth-child(3n+1),.carousel .carousel__inner>.row-cols-md-4>.col:nth-child(4n+1),.carousel .carousel__inner>.row-cols-md-5>.col:nth-child(5n+1),.carousel .carousel__inner>.row-cols-md-6>.col:nth-child(6n+1){scroll-snap-align:start}body:not(.js-enabled) .carousel .carousel__inner>.row-cols-md-2>.col:nth-child(odd),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-md-3>.col:nth-child(3n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-md-4>.col:nth-child(4n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-md-5>.col:nth-child(5n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-md-6>.col:nth-child(6n+1){margin-left:50vw}.carousel .carousel__controls.cols-md-2>a:not(:nth-child(odd)),.carousel .carousel__controls.cols-md-3>a:not(:nth-child(3n+1)),.carousel .carousel__controls.cols-md-4>a:not(:nth-child(4n+1)),.carousel .carousel__controls.cols-md-5>a:not(:nth-child(5n+1)),.carousel .carousel__controls.cols-md-6>a:not(:nth-child(6n+1)){display:none}.carousel .carousel__controls.cols-md-2>a:first-child:nth-last-child(2),.carousel .carousel__controls.cols-md-3>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3)),.carousel .carousel__controls.cols-md-4>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4)),.carousel .carousel__controls.cols-md-5>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5)),.carousel .carousel__controls.cols-md-6>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5),a:first-child:nth-last-child(6)){display:none}.carousel.hide-md-btns .carousel__wrapper>.btn{display:none}.carousel.hide-md-btns .carousel__inner{margin-left:0;margin-right:0}}.testimonial{--testimonial-padding: 1rem;--testimonial-spacing: 1rem}@media screen and (min-width: 62em){.testimonial{--testimonial-padding: 4rem;--testimonial-spacing: 2rem}}.testimonial>div:first-child{position:relative;overflow:hidden}.testimonial .circle{color:currentColor;position:absolute;top:-18rem;right:-8rem;font-size:28rem;border-width:4px}.testimonial__images{overflow:auto;scroll-snap-type:x mandatory;display:flex;user-select:none;touch-action:pan-x;height:14.375rem}@media screen and (min-width: 36em){.testimonial__images{height:21.25rem}}@media screen and (min-width: 62em){.testimonial__images{min-height:100%;scroll-snap-type:y mandatory;flex-direction:column;touch-action:pan-y}}.testimonial__images img{scroll-snap-align:start;user-select:none;pointer-events:none;flex-shrink:0}.testimonial .testimonial__controls{display:none}.testimonial.testimonial--multi .testimonial__controls{display:block;position:absolute;bottom:0;left:50%;transform:translate(-50%,50%)}@media screen and (min-width: 62em){.testimonial.testimonial--multi .testimonial__controls{left:auto;bottom:auto;right:0;top:50%;transform:rotate(90deg) translateY(-120%);transform-origin:center}}.testimonial h2{padding:2rem var(--testimonial-padding) 0 var(--testimonial-padding)}@media screen and (min-width: 36em){.testimonial h2{padding-top:3rem}}@media screen and (min-width: 62em){.testimonial h2{padding-top:9rem}}.testimonial__content{--display-none: none;margin:0 var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding);position:relative}@media screen and (min-width: 62em){.testimonial__content{--display-none: block}.testimonial__content blockquote:not(.largest){position:absolute;top:0}}.testimonial[data-show="1"] blockquote:not(:nth-child(1)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="2"] blockquote:not(:nth-child(2)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="3"] blockquote:not(:nth-child(3)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="4"] blockquote:not(:nth-child(4)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="5"] blockquote:not(:nth-child(5)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="6"] blockquote:not(:nth-child(6)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="7"] blockquote:not(:nth-child(7)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="8"] blockquote:not(:nth-child(8)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="9"] blockquote:not(:nth-child(9)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="10"] blockquote:not(:nth-child(10)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial__after{padding:1rem var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding)}.testimonial__images::-webkit-scrollbar{display:none}.testimonial__images{-ms-overflow-style:none;scrollbar-width:none}.property-searchbar fieldset{position:relative}@media screen and (min-width: 62em){.property-searchbar fieldset{position:relative;padding-right:1.5rem}.property-searchbar fieldset:after{content:"";position:absolute;top:0;right:.5rem;display:block;height:100%;width:1px;background-color:var(--colour-muted);opacity:.25}}.property-searchbar .form-control__wrapper{margin-bottom:1rem}@media screen and (min-width: 62em){.property-searchbar .form-control__wrapper{margin-bottom:0}}.property-searchbar .form-label,.property-searchbar label{font-size:.875rem;text-transform:uppercase}@media screen and (min-width: 62em){.property-searchbar .row .row .form-label{display:none}.property-searchbar .form-control,.property-searchbar .form-select{padding:.5rem 1.5rem .5rem .5rem}.property-searchbar .form-select{background-position:right .5rem center}}.property-searchbar .input--locations{padding-right:5.5rem}.property-searchbar .select--miles{position:absolute;bottom:0rem;right:.5rem;width:5rem}@media screen and (min-width: 62em){.property-searchbar .select--miles{right:1.5rem}}.property-searchbar .select--miles label{display:none}.property-searchbar .select--miles select{background-color:transparent;border-color:transparent}@media screen and (min-width: 62em){.property-searchbar .property-searchbar__btn{align-items:flex-end}}.property-searchbar button{margin-top:1rem;margin-bottom:1rem}@media screen and (min-width: 62em){.property-searchbar button{margin:0;padding-left:3.5rem;padding-right:3.5rem}}.property-searchbar--hero .property-searchbar{--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary-theme);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: var(--colour-canvas);--colour-btn-action-hover-bg: var(--colour-light);padding:1rem;background-color:#fff;width:100%;border-radius:.625rem;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.24);box-shadow:0 2px 4px #0000003d;position:relative}.property-searchbar--hero .property-searchbar .text-primary{color:var(--colour-primary)!important}@media screen and (min-width: 62em){.property-searchbar--hero .property-searchbar{border-radius:3rem;padding:1.5rem 2.5rem}.property-searchbar--hero .property-searchbar .form-label,.property-searchbar--hero .property-searchbar label{margin-bottom:0}.property-searchbar--hero .property-searchbar .form-control,.property-searchbar--hero .property-searchbar .form-select{margin-left:-.5rem;border:none;padding-top:.25rem;padding-bottom:.25rem}.property-searchbar--hero .property-searchbar .form-select{background-position:right 0rem center;padding-right:1rem}.property-searchbar--hero .property-searchbar .property-searchbar__btn{align-items:center}}.stepper{background:#f0f0f0;display:flex;flex-wrap:wrap;margin-bottom:2rem;border:1px solid var(--colour-canvas);overflow:hidden}@media screen and (min-width: 62em){.stepper{flex-wrap:nowrap;overflow-x:auto}}.stepper ol{margin:0;z-index:1;background:var(--colour-canvas);counter-reset:section;width:100%;overflow:auto}@media screen and (min-width: 36em){.stepper ol{display:flex;flex-grow:1;padding-right:calc(2rem + 1px);margin-top:-1px;margin-bottom:-1px;margin-right:calc(-2rem - 2px);clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 50%,calc(100% - 2rem) 100%,0 100%)}}@media screen and (min-width: 62em){.stepper ol{overflow:initial}}.stepper ol li{width:100%;max-width:100%;background:var(--colour-canvas);padding:1px}@media screen and (min-width: 36em){.stepper ol li:first-child a{padding-left:1rem;clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 50%,calc(100% - 2rem) 100%,0 100%)}}@media screen and (min-width: 62em){.stepper ol li:first-child a{padding-left:2rem}}.stepper ol li a{display:block;padding:1rem;text-decoration:none;background:var(--colour-muted);line-height:1;position:relative;color:var(--colour-primary)}@media screen and (min-width: 36em){.stepper ol li a{margin-right:-2rem;padding:2rem 3rem;clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 50%,calc(100% - 2rem) 100%,0 100%,2rem 50%);display:flex;height:100%;vertical-align:baseline;justify-content:center;align-items:center}}.stepper ol li a span{position:relative;display:inline;padding-left:2.25rem}.stepper ol li a span:before{counter-increment:section;content:counter(section);display:block;position:absolute;top:50%;left:0;transform:translateY(-50%);margin-right:.5rem;font-size:.75em;border-radius:50%;border:2px solid currentColor;height:1.5rem;line-height:1.3rem;width:1.5rem;font-family:var(--font-heading);text-align:center}.stepper ol li a.bg-warning span:before,.stepper ol li a.bg-danger span:before{content:"!"}.stepper ol li a.bg-success span:before{content:"\2713";text-indent:-.1em}.stepper ol li a.current{background:var(--colour-primary);color:#fff;pointer-events:none}.stepper ol li a:not([href]){pointer-events:none}.stepper ol li a[href]:hover{opacity:.6}.stepper ol li a[href]:active{opacity:.8}.stepper>span{width:100%;display:flex;padding:1rem;flex-shrink:0;margin:0;position:relative;z-index:0;align-items:center}.stepper>span.stepper__end{display:none}@media screen and (min-width: 62em){.stepper>span{width:max-content;padding:2rem}.stepper>span.stepper__end{padding-left:3.5rem;display:flex}}.tabs:not(.admin-panel){position:relative}.tabs__links{margin-bottom:1.5rem;overflow:visible;padding-bottom:2px;position:relative;display:block}.tabs__links:after{content:"";left:50%;position:relative;height:3px;width:100vw;border-bottom:1px solid var(--colour-border);transform:translate(-50%);display:block;clear:both}.tabs__links .link:not(.text-decoration-none):not(.btn){--is-current: 0;font-weight:700;font-family:var(--font-heading);font-size:1.125rem;cursor:pointer;margin:.5rem 1.5rem 0 0;padding:0;display:inline-block}.tabs__links .link:not(.text-decoration-none):not(.btn):last-child{margin-inline-end:0}.tabs__links .link:not(.text-decoration-none):not(.btn):after{position:absolute;content:"";top:100%;left:50%;height:2px;transform:translate(-50%);background:var(--colour-info);transition:width .5s;width:0%}.tabs__links .link:not(.text-decoration-none):not(.btn):hover:after,.tabs__links .link:not(.text-decoration-none):not(.btn):focus:after,.tabs__links .link:not(.text-decoration-none):not(.btn).focus:after{width:60%}.tabs__links .link:not(.text-decoration-none):not(.btn)[aria-pressed=true]:after,.tabs__links .link:not(.text-decoration-none):not(.btn):active:after,.tabs__links .link:not(.text-decoration-none):not(.btn).active:after{width:100%}.tabs__links .link:not(.text-decoration-none):not(.btn)[aria-pressed=true],.tabs__links .link:not(.text-decoration-none):not(.btn).active{pointer-events:none;outline:var(--contrast-outline-width, 0px) solid var(--colour-primary-theme)!important}

package/package.json

@@ -5,7 +5,7 @@
     "name": "iamproperty"
   },
   "private": false,
-  "version": "3.7.9",
+  "version": "3.9.0-beta-1",
   "scripts": {
     "bootstrap": "copyfiles -u 2 node_modules/bootstrap/**/* assets/bootstrap",
     "dev": "npm run copy && node local_modules/delete-assets.js && vite --host",

package/src/components/Actionbar/Actionbar.vue

@@ -0,0 +1,20 @@
+<template>
+  <iam-actionbar>
+    <slot></slot>
+  </iam-actionbar>
+</template>
+
+<script>
+import iamActionbar from '../../../assets/js/components/actionbar/actionbar.component.min.js'
+
+if (!window.customElements.get('iam-actionbar'))
+  window.customElements.define('iam-actionbar', iamActionbar);
+
+export default {
+  name: 'Actionbar',
+  props: {
+  },
+  mounted(){
+  }
+}
+</script>

package/src/components/Actionbar/README.md

@@ -0,0 +1,40 @@
+```
+<Actionbar data-selectall data-search>
+  
+  <div class="dialog__wrapper">
+    <button class="btn btn-action mb-0 me-0">Quick filter</button>
+    <dialog class="dialog--list">
+      <div class="pb-0">
+        <input type="radio" name="sorta" data-sort="" id="follow-up-oldesta" value="follow-up-oldest">
+        <label for="follow-up-oldesta" class="radio--tick">Option 1</label>
+
+        <input type="radio" name="sorta" data-sort="" id="follow-up-newesta" value="follow-up-newest">
+        <label for="follow-up-newesta" class="radio--tick">Option 2</label>
+
+        <input type="radio" name="sorta" data-sort="" id="date-instructed-oldesta" value="date-instructed-oldest" checked="" autofocus="true">
+        <label for="date-instructed-oldesta" class="radio--tick">Option 3</label>
+
+        <input type="radio" name="sorta" data-sort="" id="date-instructed-newesta" value="date-instructed-newest">
+        <label for="date-instructed-newesta" class="radio--tick mb-0">Option 4</label>
+      </div>
+    </dialog>
+  </div>
+
+  <button class="btn btn-primary btn-sm fa-plus" id="uploadBtn">Upload document</button>
+
+  <button class="btn btn-action fa-pen-to-square" data-single slot="selected">Edit</button>
+  <button class="btn btn-action fa-box-archive" slot="selected">Archive</button>
+  <button class="btn btn-action fa-trash-can" slot="selected">Delete</button>
+  <hr slot="selected" />
+  <button class="btn btn-action" slot="selected">Cancel</button>
+
+</Actionbar>
+```
+**Properties**
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| data-selectall | - | - | Optional flag to include the select all button |
+| data-search | - | - | Optional flag to include the search button and functionality |
+| data-switchviews | - | - | Optional flag to include the switch views buttons |
+| data-view | String | square | Required if you have the above flag set. Can be set to wither 'square','list' or 'small'. |

package/src/components/Nav/Nav.vue

@@ -1,213 +1,38 @@
 <template>
-  <nav :class="`nav${hasSecondarySlot?` has-secondary`:''}`" ref="wrapper">
+  <iam-nav ref="wrapper">
 
-    <input type="checkbox" name="showMenu" id="showMenu" class="d-none" />
-    <input type="checkbox" name="showSearch" id="showSearch" class="d-none" />
-    <input type="checkbox" name="showAccount" id="showAccount" class="d-none" />
+    <slot></slot>
 
-    <!-- Mobile bar -->
-    <div class="nav__mobile-bar">
-      <div class="container">
-        <div class="row">
-          <div class="col mw-md-fit-content nav__logo" v-if="hasLogoSlot">
-            <slot name="logo"></slot>
-          </div>
-          <div class="col mw-md-fit-content nav__logo" v-else>
-            <a href="/" class="text-decoration-none mb-0">
-              <Logo :id="logo" :path="logopath" :desc="logotext" class="pb-0"></Logo>
-            </a>
-          </div>
-
-          <div class="col mw-fit-content d-md-none flex-row align-items-center nav__menu-btn">
-            <label for="showMenu">Menu</label>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="nav__inner">
-      <div class="container">
-        <div class="row">
-          <div class="col mw-md-fit-content nav__logo" v-if="hasLogoSlot">
-            <slot name="logo"></slot>
-          </div>
-          <div class="col mw-md-fit-content nav__logo" v-else>
-            <a href="/" class="text-decoration-none mb-0">
-              <Logo :id="logo" :path="logopath" :desc="logotext" class="pb-0"></Logo>
-            </a>
-          </div>
-
-          <div class="col mw-fit-content nav__search-btn flex-row align-items-center" v-if="hasSearchSlot">
-            <label for="showSearch">
-              <svg class="icon" viewBox="0 0 32 32">
-                <title>Search</title>
-                <ellipse cx="14.92" cy="13.81" rx="11.92" ry="11.81" class="icon__outline" />
-                <line x1="22.68" y1="22.75" x2="30" y2="30" class="icon__outline" />
-              </svg>
-            </label>
-          </div>
-
-          <div class="col mw-fit-content d-md-none flex-row align-items-center nav__menu-btn">
-            <label for="showMenu">Menu</label>
-          </div>
-
-          <!-- Main menu -->
-          <div class="col-12 col-md nav__menu ms-auto flex-row align-items-center">
-            <slot></slot>
-          </div>
-
-          <div class="col nav__account-btn flex-row align-items-center" v-if="hasAccountSlot">
-            <label for="showAccount">
-
-              <svg class="icon" viewBox="0 0 28 28">
-                <path d="M14,28a13.861,13.861,0,0,1-9.268-3.533l-.023.047-.721-.738L3.62,23.4l.012-.023a14,14,0,1,1,20.735,0l.012.023-.367.377-.722.738-.024-.045A13.855,13.855,0,0,1,14,28Zm0-9.58a10.5,10.5,0,0,0-1.368.092c-.085.012-.17.03-.252.047-.061.013-.124.026-.187.037l-.077.013c-.266.047-.54.095-.8.165-.108.029-.215.065-.318.1-.063.022-.125.043-.188.063l-.08.026c-.223.071-.454.144-.671.234-.125.05-.245.11-.362.168l-.146.072-.045.021c-.208.1-.423.2-.623.312-.131.074-.257.158-.379.239l-.106.07-.068.044c-.176.114-.359.232-.528.359-.137.1-.267.218-.393.327l-.054.047c-.174.15-.355.306-.519.47-.132.134-.258.277-.38.416l-.018.021c-.16.184-.3.35-.437.527-.12.161-.23.33-.337.494-.076.117-.146.238-.214.356a12.495,12.495,0,0,0,17.109,0l-.022-.037c-.061-.1-.125-.212-.192-.315-.1-.156-.214-.333-.338-.5-.141-.188-.293-.363-.436-.526-.113-.13-.253-.292-.4-.438-.161-.162-.337-.314-.517-.468l-.08-.069c-.118-.1-.24-.209-.368-.307-.183-.137-.379-.264-.568-.387l-.026-.017-.106-.07c-.125-.083-.251-.166-.381-.24-.207-.118-.429-.222-.643-.322l-.024-.011-.152-.074c-.116-.057-.235-.116-.356-.165-.214-.087-.438-.159-.656-.229l-.1-.031c-.066-.021-.132-.043-.2-.066-.1-.035-.2-.07-.309-.1-.264-.07-.538-.118-.8-.165l-.078-.014c-.063-.011-.126-.024-.187-.037-.082-.017-.167-.035-.252-.047A10.483,10.483,0,0,0,14,18.421Zm0-1.473a11.871,11.871,0,0,1,1.54.1c.1.013.192.033.284.052.069.014.139.028.209.04.34.058.672.118,1,.2.14.036.278.082.412.127l.151.05c.309.1.587.188.859.3.148.059.293.127.433.194l.13.061c.306.142.553.266.775.389.188.107.368.22.535.328.26.166.489.322.7.478.156.117.316.244.49.389.209.176.412.361.622.567.156.154.3.293.43.443.209.23.4.472.542.657l.051.066c.1.134.21.272.308.416.021.031.045.061.068.09a1.267,1.267,0,0,1,.085.117,12.525,12.525,0,1,0-19.24,0c.026-.04.056-.078.084-.114s.05-.064.073-.1c.1-.141.2-.278.3-.409l.046-.059c.2-.264.378-.478.555-.672.137-.152.281-.3.417-.43.215-.21.422-.4.635-.578.18-.15.332-.271.479-.381.208-.155.433-.31.709-.486.174-.111.346-.219.526-.319.274-.153.55-.285.783-.393l.112-.053c.144-.069.293-.14.445-.2.282-.113.578-.208.864-.3l.159-.052c.132-.044.265-.088.4-.124.331-.087.675-.148,1-.2.068-.012.137-.026.2-.039.094-.019.191-.039.288-.052A11.827,11.827,0,0,1,14,16.948Z" transform="translate(0 -0.001)" />
-  	<path d="M5.2,10.4a5.2,5.2,0,1,1,5.2-5.2A5.206,5.206,0,0,1,5.2,10.4Zm0-8.915A3.714,3.714,0,1,0,8.915,5.2,3.719,3.719,0,0,0,5.2,1.486Z" transform="translate(8.8 4.8)" />
-
-              </svg>
-              <span>My account</span>
-            </label>
-          </div>
-
-          <div class="col-12 col-md nav__btn mw-md-fit-content flex-row align-items-center" v-if="btnlink">
-            <a :href="btnlink" class="btn me-0" v-html="btntext"></a>
-          </div>
-
-
-
-        </div>
-      </div>
-      <div class="nav__menu--secondary" v-if="hasSecondarySlot">
-        <div class="container">
-          <slot name="secondary"></slot>
-        </div>
-      </div>
-      <div class="nav__menu--search" v-if="hasSearchSlot">
-        <div class="bg-gradient pt-4">
-          <div class="container">
-            <slot name="search"></slot>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="nav__menu--account" v-if="hasAccountSlot">
-      <div class="container">
-        <div class="row mb-4">
-          <div class="col mw-md-fit-content nav__logo" v-if="hasLogoSlot">
-            <slot name="logo"></slot>
-          </div>
-          <div class="col mw-md-fit-content nav__logo" v-else>
-            <a href="/" class="text-decoration-none mb-0">
-              <Logo :id="logo" :path="logopath" :desc="logotext" class="pb-0"></Logo>
-            </a>
-          </div>
-
-          <div class="col mw-fit-content d-md-none flex-row align-items-center nav__menu-btn">
-            <label for="showAccount">Account</label>
-          </div>
-
-        </div>
-      </div>
-      <div class="container">
-        <slot name="account"></slot>
-      </div>
-
-    </div>
-
-    <span class="nav__bg"></span>
-  </nav>
+  </iam-nav>
 </template>
 
-<style lang="scss">
-@import "../../../assets/sass/components/nav.scss";
-</style>
-
 <script>
-import nav from '../../../assets/ts/modules/nav'
-import Logo from '../../foundations/Logo/Logo.vue'
-import Input from '../../components/Input/Input.vue'
-
-
 export default {
   components: {
-    Input,
-    Logo
   },
   name: 'Nav',
-  props: {
-    logo: {
-      type: String,
-      required: false
-    },
-    logotext: {
-      type: String,
-      required: false
-    },
-    logopath: {
-      type: String,
-      required: false
-    },
-    search: {
-      type: String,
-      required: false
-    },
-    btnlink: {
-      type: String,
-      required: false
-    },
-    btntext: {
-      type: String,
-      required: false
-    },
-    propertylink: {
-      type: String,
-      required: false
-    },
-    movebutlerlink: {
-      type: String,
-      required: false
-    },
-    iamsoldlink: {
-      type: String,
-      required: false
-    }
-  },
-  data () {
-    return {
-      locationSave: ''
-    }
-  },
-  methods: {
-    subIsActive (input) {
-      const paths = Array.isArray(input) ? input : [input]
-      return paths.some(path => {
-        return this.$route.path.indexOf(path) === 0 // current path starts with this path string
-      })
-    }
-  },
-  computed: {
-    hasLogoSlot() {
-      return !!this.$slots.logo
-    },
-    hasSecondarySlot() {
-      return !!this.$slots.secondary
-    },
-    hasSearchSlot() {
-      return !!this.$slots.search
-    },
-    hasAccountSlot() {
-      return !!this.$slots.account
-    },
-    isMarketplace() {
-      return false;
-    }
-  },
   mounted(){
 
     this.$nextTick(function () {
+      
+      import('../../../assets/js/components/nav/nav.component.min.js').then(module => {
+
+        if (!window.customElements.get(`iam-nav`))
+          window.customElements.define(`iam-nav`, module.default);
+
+      }).catch((err) => {
+        console.log(err.message);
+      });
+
+
 
-      nav(this.$refs.wrapper);
     })
+
+
+  },
+  methods: {
+
   }
 }
+
 </script>

package/src/components/Nav/README.md

@@ -1,23 +1,53 @@
-### Usage
-
 ```
-<Nav></Nav>
+<nav>
+<Nav>
+  <a href="/" class="brand brand--property" slot="logo">
+    <svg>
+      <title>iamproperty</title>
+      <use xlink:href="/svg/logo.svg#logo-property"></use>
+    </svg>
+  </a>
+
+  <a href="/" class="selected">Lorem ipsum</a>
+  <a href="/">Lorem ipsum</a>
+  <a href="/">Lorem ipsum</a>
+  <a href="/">Lorem ipsum</a>
+
+  <button class="btn btn-primary">Lorem ipsum</button>
+</Nav>
+</nav>
 ```
 
-### Properties
+**Properties**
 
 | Option | Type | Default Value | Description |
 | ------ | ---- | ------------- | ----------- |
-| logo | String | property | Update which logo is shown |
-| logotext | String | - | Optional logo text |
-| btnlink | String | - | Optional button can be added, used mainly for links relating to user accounts. |
-| btntext | String | - | Text used within the above button |
+| data-search  | String | - | Optional, displays a search button and form. The value passed through is used for the forms action attribute. |
+| data-list  | String | - | Optional string with an ID of a datalist, note this list needs to be added as an element in the component |
+| data-prevent-search  | String | - | Flag that prevents the search form submitting allowing it to used purely with JavaScript |
+| data-searcd-open  | String | - | Flag that opens the search bar on desktop on page load. |
 
-
-### Slots
+**Slots**
 
 | Option | Default Value | Description |
 | ------ | ------------- | ----------- |
-| default | - | Populates the main nav area, use a ul.list-unstyled element  |
-| secondary | - |Populates the secondary nav area (top bar when on desktop), use a ul.list-unstyled element |
-| search | - | Populates the search featured area area |
+| default | - | Populates the main nav area |
+| logo | - | A place to add the logo to the site |
+| secondary | - | Moves the link upto the top of the navbar on desktop |
+| actions | - | A place to add buttons |
+| dual | - | Plave the link or list to the right of the nav, forcing the default slot to the left. |
+
+**Class modifiers**
+
+- Adding a class of **.bg-primary** will change the background of the navbar without chaning the menu background. 
+- Adding a class of **.nav--sticky** will add etxra styling to make the navbar stick to the top of the page
+- Adding a class of **.nav--xs-sticky** will add etxra styling to make the navbar stick to the top of the page BUT only on the mobile view.
+
+**Dispatched events**
+
+| Event | Dispatched when | Details passed|
+| ------ | ------------- | ----------- |
+| search-keydown | When a user uses the search input field and triggers the keydown event. | { search: $inputValue } |
+| search-keyup | When a user uses the search input field and triggers the keyup event. | { search: $inputValue } |
+| search-change | When a user uses the search input field and triggers the change event. | { search: $inputValue } |
+| search-submit | When a user uses the search form and triggers the submit event. | { search: $inputValue } |