html.-no-scroll {
  overflow: hidden
}
:root {
  --desktop-width: 1512;
  --desktop-height: 982;
  --mobile-width: 375;
  --mobile-height: 812;
  --full-width: calc(100vw - var(--scrollbar-width, 0px));
  --border-radius: 0;
  --big-radius: 6.25rem;
  --small-radius: .625rem;
  --small-spacing: .625rem;
  --xsmall-radius: .5rem;
  --xsmall-spacing: .3125rem;
  --subgrid-spacing: 0.15rem;
  --subgrid-offset: var(--grid-gutter);
  --button-height: 0.5rem;
  --header-height: calc(var(--button-height) + var(--grid-margin)*2);
  --submenu-height: max(70svh,500px);
  --ease-in-out-power2: cubic-bezier(.645,.045,.355,1);
}

@media screen and ((max-width: 376px) or (max-height:800px)) {
  :root {
      --submenu-height:62svh
  }
}

@media screen and (min-width: 1024px) {
  :root {
      --subgrid-offset:calc(var(--subgrid-margin) - var(--grid-margin));
      --header-height: calc(var(--button-height) + var(--subgrid-margin)*2)
  }
}

:root {
  --grid-columns: 6;
  --grid-margin: .11rem;
  --grid-gutter: .11rem;
  --grid-width: calc(var(--full-width) - var(--grid-margin)*2);
  --grid-column-width: calc((var(--grid-width) - ((var(--grid-columns) - 1)*var(--grid-gutter)))/var(--grid-columns));
  --subgrid-margin: var(--grid-margin);
  --subgrid-gutter: var(--grid-gutter)
}

@media screen and (min-width: 1024px) {
  :root {
      --grid-columns:12;
      --subgrid-gutter: 2.5rem
  }
}


:root {
  --z-index-raised: 10;
  --z-index-modal: 20;
  --z-index-transition: 50;
  --z-index-debug: 9999
 
}

.app-header{
  --ease-in-power1: cubic-bezier(.55,.085,.68,.53);
  --ease-out-power1: cubic-bezier(.25,.46,.45,.94);
  --ease-in-out-power1: cubic-bezier(.455,.03,.515,.955);
  --ease-in-power2: cubic-bezier(.55,.055,.675,.19);
  --ease-out-power2: cubic-bezier(.215,.61,.355,1);
  --ease-in-out-power2: cubic-bezier(.645,.045,.355,1);
  --ease-in-power3: cubic-bezier(.895,.03,.685,.22);
  --ease-out-power3: cubic-bezier(.165,.84,.44,1);
  --ease-in-out-power3: cubic-bezier(.77,0,.175,1);
  --ease-in-power4: cubic-bezier(.755,.05,.855,.06);
  --ease-out-power4: cubic-bezier(.23,1,.32,1);
  --ease-in-out-power4: cubic-bezier(.86,0,.07,1);
  --ease-in-circ: cubic-bezier(.6,.04,.98,.335);
  --ease-out-circ: cubic-bezier(.075,.82,.165,1);
  --ease-in-out-circ: cubic-bezier(.785,.135,.15,.86);
  --ease-in-expo: cubic-bezier(.95,.05,.795,.035);
  --ease-out-expo: cubic-bezier(.19,1,.22,1);
  --ease-in-out-expo: cubic-bezier(1,0,0,1);
  --ease-in-sine: cubic-bezier(.47,0,.745,.715);
  --ease-out-sine: cubic-bezier(.39,.575,.565,1);
  --ease-in-out-sine: cubic-bezier(.445,.05,.55,.95);
  --ease-in-back: cubic-bezier(.6,-.28,.735,.045);
  --ease-out-back: cubic-bezier(.175,.885,.32,1.275);
  --ease-in-out-back: cubic-bezier(.68,-.55,.265,1.55);
  --ease-bounce: cubic-bezier(.47,1.64,.41,.8);
  --ease-out-bounce: cubic-bezier(.17,.67,.3,1.33);
  --ease-out: cubic-bezier(.37,.31,0,1);
  --ease-out-swift: cubic-bezier(.55,0,.1,1);
  --ease-smooth-out: cubic-bezier(.4,0,0,1);
  --ease-smooth-in-out: cubic-bezier(.75,0,.25,1);
  --ease-out-gentle: cubic-bezier(.17,1.38,.35,.96);
  --ease-in-out-soft: cubic-bezier(.4,.15,0,1);
  --color-black: #000;
  --color-charcoal: #282429;
  --color-white: #fff;
  --color-red: #f02222;
  --color-dark-blue: #fff;
  --color-dark-beige: #eae8e4;
  --color-darker-beige: #e2e0db;
  --color-beige: #f1efeb;
  --color-yellow: #ffac3a;
  --color-gray: #d6d9dd;
  --color-gray2: #c1bfbc;
  --color-blue-20: color-mix(in srgb,var(--color-dark-blue),transparent 80%);
  --color-blue-40: color-mix(in srgb,var(--color-dark-blue),transparent 60%);
  --color-overlay: color-mix(in srgb,#1a2f4b,transparent 80%);
  --color-footer: color-mix(in srgb,var(--color-dark-blue),transparent 20%)
}
#menu-modal{
  --ease-in-power1: cubic-bezier(.55,.085,.68,.53);
  --ease-out-power1: cubic-bezier(.25,.46,.45,.94);
  --ease-in-out-power1: cubic-bezier(.455,.03,.515,.955);
  --ease-in-power2: cubic-bezier(.55,.055,.675,.19);
  --ease-out-power2: cubic-bezier(.215,.61,.355,1);
  --ease-in-out-power2: cubic-bezier(.645,.045,.355,1);
  --ease-in-power3: cubic-bezier(.895,.03,.685,.22);
  --ease-out-power3: cubic-bezier(.165,.84,.44,1);
  --ease-in-out-power3: cubic-bezier(.77,0,.175,1);
  --ease-in-power4: cubic-bezier(.755,.05,.855,.06);
  --ease-out-power4: cubic-bezier(.23,1,.32,1);
  --ease-in-out-power4: cubic-bezier(.86,0,.07,1);
  --ease-in-circ: cubic-bezier(.6,.04,.98,.335);
  --ease-out-circ: cubic-bezier(.075,.82,.165,1);
  --ease-in-out-circ: cubic-bezier(.785,.135,.15,.86);
  --ease-in-expo: cubic-bezier(.95,.05,.795,.035);
  --ease-out-expo: cubic-bezier(.19,1,.22,1);
  --ease-in-out-expo: cubic-bezier(1,0,0,1);
  --ease-in-sine: cubic-bezier(.47,0,.745,.715);
  --ease-out-sine: cubic-bezier(.39,.575,.565,1);
  --ease-in-out-sine: cubic-bezier(.445,.05,.55,.95);
  --ease-in-back: cubic-bezier(.6,-.28,.735,.045);
  --ease-out-back: cubic-bezier(.175,.885,.32,1.275);
  --ease-in-out-back: cubic-bezier(.68,-.55,.265,1.55);
  --ease-bounce: cubic-bezier(.47,1.64,.41,.8);
  --ease-out-bounce: cubic-bezier(.17,.67,.3,1.33);
  --ease-out: cubic-bezier(.37,.31,0,1);
  --ease-out-swift: cubic-bezier(.55,0,.1,1);
  --ease-smooth-out: cubic-bezier(.4,0,0,1);
  --ease-smooth-in-out: cubic-bezier(.75,0,.25,1);
  --ease-out-gentle: cubic-bezier(.17,1.38,.35,.96);
  --ease-in-out-soft: cubic-bezier(.4,.15,0,1);
  --color-black: #000;
  --color-charcoal: #282429;
  --color-white: #fff;
  --color-red: #f02222;
  --color-dark-blue: #4d4c4c;
  --color-dark-beige: #eae8e4;
  --color-darker-beige: #e2e0db;
  --color-beige: #f1efeb;
  --color-yellow: #b68a68;
  --color-green: #39aeb2;
  --color-gray: #d6d9dd;
  --color-gray2: #c1bfbc;
  --color-blue-20: color-mix(in srgb,var(--color-dark-blue),transparent 80%);
  --color-blue-40: color-mix(in srgb,var(--color-dark-blue),transparent 60%);
  --color-overlay: color-mix(in srgb,#1a2f4b,transparent 80%);
  --color-footer: color-mix(in srgb,var(--color-dark-blue),transparent 20%)
}
.app-header-container button, .app-header-container input, .app-header-container optgroup, .app-header-container select, .app-header-container textarea {
  color: inherit;
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}
.app-header-container [type=button], .app-header-container [type=reset], .app-header-container [type=submit], .app-header-container button {
  background-color: transparent;
  background-image: none;
  border: 0;
}
.app-header-container button, .app-header-container select {
  text-transform: none;
}
.t-h3 {
  font-size: 0.26rem !important;
  letter-spacing: normal;
}
.t-h3, .t-h4 {
  font-weight: 300;
  line-height: 1.08;
  color: var(--color-dark-blue);
}
.t-h4 {
  font-size: max(20px, min(100* calc(26 / var(--desktop-width))* 1vw, 100* calc(26 / var(--desktop-height))* 1svh));
}
.t-h4, .t-h5 {
  letter-spacing: -.01em;
}
.ui-button[data-v-e2f6a032] {
  align-items: center;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  position: relative;
  cursor: pointer;  
  width: var(--button-height);
  --bg-color: var(--color-white)
}

.ui-image[data-v-92d8f32f] {
  width: 100%
}

.ui-image img[data-v-92d8f32f] {
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%
}


@media (hover: hover) and (pointer:fine) {
  :is(.ui-button[data-v-e2f6a032]:is(a),.ui-button[data-v-e2f6a032]:is(button)):not(:disabled):hover:before {
      transform:scale(1.1) translateZ(0)
  }
}

.ui-button[data-v-e2f6a032]:before {
  background-color: var(--bg-color);
  border-radius:0;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  transition: transform .4s var(--ease-bounce)
}

.ui-button.small[data-v-e2f6a032] {
  width: 2.5rem
}

.ui-button.big[data-v-e2f6a032] {
  width: 4.5rem
}



.ui-button.beige[data-v-e2f6a032] {
  --bg-color: var(--color-beige)
}

.ui-button .container[data-v-e2f6a032] {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 1
}

:is(.ui-button .container) .tt-icon[data-v-e2f6a032],:is(.ui-button .container[data-v-e2f6a032]) .clone {
  position: relative;
  width: 40%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-arrow[data-v-e2f6a032]:is(:is(.ui-button .container) .tt-icon,:is(.ui-button .container) :deep(.clone)) {
  width: 30%
}

.has-anime[data-v-e2f6a032] :is(:is(.ui-button .container) .tt-icon,:is(.ui-button .container) :deep(.clone)) {
  position: absolute
}

:is(.ui-button .container[data-v-e2f6a032]) .clone {
  transform: translate(-5rem)
}

.ui-button.yellow[data-v-e2f6a032] {
  --bg-color: var(--color-yellow)
}



.app-header[data-v-324bbae3] {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  height: var(--header-height);
  pointer-events: none;
  position: fixed;
  width: calc(100% - var(--subgrid-margin)*2);
  z-index: var(--z-index-modal)
}
.subgrid-padding {
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin)
}

@media screen and (min-width: 1024px) {
  .subgrid-padding {
      padding-left:var(--subgrid-margin);
      padding-right: var(--subgrid-margin)
  }
}


.app-header[data-v-324bbae3] a,.app-header[data-v-324bbae3] button {
  pointer-events: all
}

.app-header .app-searchBtn[data-v-324bbae3],.app-header .brand[data-v-324bbae3],.app-header .extras[data-v-324bbae3] {
  opacity: 0;
  transform: translate3d(0,1rem,0)
}

:is(.-theme-white .app-header:not(.is-scrolled)),:is(.-theme-white .app-header:not(.is-scrolled)) .menu-label[data-v-324bbae3] {
  color: var(--color-white)
}

:is(.is-transitioning .app-header:not(.is-scrolled)),:is(.is-transitioning .app-header:not(.is-scrolled)) .menu-label[data-v-324bbae3] {
  transition-delay: .75s
}

.app-header.is-scrolled,.app-header.is-scrolled .menu-label[data-v-324bbae3] {
  opacity: 0;
  top: -100%;
}

:is(.-scroll-up .app-header.is-scrolled) .bg[data-v-324bbae3] {
  opacity: 1
}

:is(.-scroll-up .app-header.is-scrolled),:is(.-scroll-up .app-header.is-scrolled) .menu-label[data-v-324bbae3] {
  opacity: 1;
  transform: none!important
}

:is(.-scroll-up .app-header.is-scrolled) .app-burgerBtn[data-v-324bbae3]:after {
  display: block
}

:is(.-scroll-up .app-header.is-scrolled) .app-burgerBtn[data-v-324bbae3]:before,:is(.-scroll-up .app-header.is-scrolled) .app-searchBtn[data-v-324bbae3]:before {
  background-color: var(--color-beige)
}

.app-header.-extras-hidden .app-burgerBtn[data-v-324bbae3]:after {
  display: none
}

.app-header .bg[data-v-324bbae3] {
  background-color: var(--color-white);
  border-radius: var(--small-radius);
  inset: calc(var(--grid-margin)*.5);
  position: absolute;
  transition: opacity .2s var(--ease-in-out-power2);
  opacity: 0;
  z-index: -1
}

@media screen and (min-width: 1024px) {
  .app-header .bg[data-v-324bbae3] {
      inset:var(--grid-margin)
  }
}
.header-searchBtn{
  display: flex; align-items: center; justify-content: space-between; width: calc(var(--button-height) * 2 + var(--grid-margin));
}
/* header search hover-only visibility */
.global-enquire-button { position: relative; }
.global-enquire-button .header-search {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) scaleX(.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease-in-out-power2), transform .2s var(--ease-in-out-power2);
  background-color: transparent;
  padding: .06rem 0 .14rem 0;
  min-width: 2.6rem;
  z-index: 2;
}
.global-enquire-button .header-search:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: color-mix(in srgb, var(--color-white), transparent 65%);
}
.global-enquire-button.hover .header-search,
.global-enquire-button:focus-within .header-search {
  opacity: 1;
  transform: translateY(-50%) scaleX(1);
  pointer-events: auto;
}
.global-enquire-button .header-search input[type="text"] {
  width: calc(100% - .32rem);
  border: 0;
  outline: none;
  background: transparent;
  color: var(--color-white);
  padding: 0 .08rem 0 0;
  font-size: .16rem;
  line-height: .22rem;
}
.global-enquire-button .header-search input[type="text"]::placeholder { color: color-mix(in srgb, var(--color-white), transparent 55%); }
.global-enquire-button .header-search input[type="text"]::-ms-input-placeholder { color: color-mix(in srgb, var(--color-white), transparent 55%); }
.global-enquire-button .header-search input[type="text"]:-ms-input-placeholder { color: color-mix(in srgb, var(--color-white), transparent 55%); }
.global-enquire-button .header-search:focus-within:after { background-color: color-mix(in srgb, var(--color-white), transparent 35%); }
@media screen and (max-width: 1023px) {
  .global-enquire-button .header-search {
    top: calc(100% + .08rem);
    transform: translateY(0) scaleX(.98);
    width: 90vw;
    padding: 0;
  }
  .global-enquire-button.hover .header-search,
  .global-enquire-button:focus-within .header-search {
    transform: translateY(0) scaleX(1);
  }
  .global-enquire-button .header-search input[type="text"] {
    font-size: .18rem;
    line-height: .26rem;
    height: 0.9rem;
  }
  .global-enquire-button .header-search input[type="text"]::placeholder {
    font-size: .18rem;
  }
}
:is(.app-header .app-searchBtn[data-v-324bbae3],.app-header .app-burgerBtn[data-v-324bbae3]):before {
  transition: background-color .2s var(--ease-in-out-power2),transform .4s var(--ease-bounce)
}

:is(.app-header .brand) a[data-v-324bbae3] {
  color: var(--color-dark-blue);
  display: inline-block;
  height: 0.47rem;
  transition: color .3s var(--ease-out-power2),opacity .2s var(--ease-in-out-power2)
}

@media screen and (min-width: 1024px) {
  :is(.app-header .brand) a[data-v-324bbae3] {
      height:0.47rem
  }
}
.app-header .extras[data-v-324bbae3] {
  align-items: center;
  display: flex;
  gap: var(--subgrid-spacing);
  margin-left: auto
}

:is(.app-header .extras) .menu-label[data-v-324bbae3] {
  color: var(--color-dark-blue);
  font-size:0.2rem;
  transition: color .3s var(--ease-out-power2),opacity .2s var(--ease-in-out-power2)
}

@media screen and (max-width: 1023px) {
  :is(.app-header .extras) .menu-label[data-v-324bbae3] {
      display:none
  }
}

:is(:is(.app-header .extras) .app-burgerBtn[data-v-324bbae3]):after {
  content: "Menu";
  left: calc(var(--subgrid-spacing)*-1);
  opacity: 0;
  position: absolute;
  transform: translate(-100%)
}

.tt-modal[data-v-61692b67] {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  visibility: hidden;
  width: 100%;
  z-index: var(--z-index-modal)
}

.tt-modal.-active[data-v-61692b67] {
  visibility: visible
}
#menu-modal[data-v-43247261] {
  color: var(--color-dark-blue);
  transition: visibility 0s linear 1.2s;
  --btn-margin:0.22rem;
  --bg-end-radius: calc(var(--small-radius) + var(--grid-margin));
  --btn-spacing: .15625rem;
  --subgrid-spacing: 0.27rem;
  --link-height: 0.51rem;
  --px: 0;
  --py: 0;
  --pr: 0
}

@media screen and (min-width: 1024px) {
  #menu-modal[data-v-43247261] {
      --btn-margin:0.11rem;
      --link-height:  0.51rem;
  }
}

#menu-modal.-active[data-v-43247261] {
  transition-delay: 0s
}

@media screen and (max-width: 1023px) {
  #menu-modal.-active .inner[data-v-43247261] {
      transform:translateZ(0)
  }
}

:is(#menu-modal.-active .inner[data-v-43247261]):before {
  clip-path: inset(calc(var(--btn-margin) - var(--subgrid-offset)*var(--py)) calc(var(--btn-margin) - var(--subgrid-offset)*var(--px)) calc((100% - var(--button-height) - var(--btn-margin))*(1 - var(--py)) + (var(--btn-margin) - var(--subgrid-offset))*var(--py)) calc((100% - var(--button-height) - var(--btn-margin))*(1 - var(--px))))
}

@media screen and (min-width: 1024px) {
  :is(#menu-modal.-active .inner[data-v-43247261]):before {
      opacity:1;
      transition: opacty 0s linear 0s
  }
}

#menu-modal.-active .close[data-v-43247261] {
  transform: scale(1) translateZ(0);
  transition: transform .4s var(--ease-out-power2) .2s;
  color: var(--color-white);
}

:is(#menu-modal.-active .close[data-v-43247261]):focus {
  outline: none
}

@media screen and (max-width: 1023px) {
  #menu-modal.-active .close[data-v-43247261] {
      transition-delay:.5s
  }
}

:is(#menu-modal.-active .close[data-v-43247261]):after {
  opacity: 1;
  transform: translateZ(0);
  transition: opacity .4s var(--ease-out-power2) .6s,transform .4s var(--ease-out-power2) .6s;
  color: #4d4c4c;
  font-size: 0.2rem;
}

@media screen and (max-width: 1023px) {
  :is(#menu-modal.-active .close[data-v-43247261]):after {
      transition:opacity .4s var(--ease-out-power2) 1.1s,transform .4s var(--ease-out-power2) 1.1s
  }
}

#menu-modal.-active .main-links li[data-v-43247261] {
  --d: calc(.4s + var(--index)*.08s)
}

#menu-modal.-active .sub-links li[data-v-43247261] {
  --d: calc(.6s + var(--row-index)*.08s)
}

:is(#menu-modal.-active .main-links,#menu-modal.-active .sub-links) a[data-v-43247261],:is(#menu-modal.-active .main-links,#menu-modal.-active .sub-links) button[data-v-43247261] {
  opacity: 1;
  transform: translateZ(0);
  transition: color .4s var(--ease-out-power2),opacity .5s var(--ease-out-power2) var(--d),transform .6s var(--ease-out-power2) var(--d)
}

#menu-modal.-active .bottom .ui-card[data-v-43247261] {
  clip-path: inset(0 0 0 0 round var(--border-radius));
  opacity: 1;
  transform: translateZ(0);
  --d: .8s;
  margin: 0;
  transition: opacity .6s var(--ease-out-power2) var(--d),clip-path .6s var(--ease-out-power2) var(--d),transform .6s var(--ease-out-power2) var(--d)
 
}

:is(#menu-modal.-active .socials) .ui-button[data-v-43247261] {
  --d: .8s;
  opacity: 1;
  transform: scale(1);
  color: var(--color-dark-blue);
  transition: opacity .4s var(--ease-out-power2) var(--d),transform .4s var(--ease-out-power2) var(--d)
 
}

#menu-modal .bg[data-v-43247261] {
  background-color: #716f6abf;
  cursor: pointer;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: opacity .4s var(--ease-out-power2)
}

:is(#menu-modal .bg) .logo-container[data-v-43247261] {
  color: var(--color-beige);
  left: 25%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%)
}

@media screen and (max-width: 1023px) {
  :is(#menu-modal .bg) .logo-container[data-v-43247261] {
      display:none
  }
}

:is(:is(#menu-modal .bg) .logo-container) .tt-icon[data-v-43247261] {
  display: block;
  opacity: 0;
  transform: scale(.25);
  transition: opacity .4s var(--ease-out-power2),transform .4s var(--ease-out-power2);
  width: 14vw
}

#menu-modal .inner[data-v-43247261] {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  height: var(--submenu-height);
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1
}

@media screen and (max-width: 1023px) {
  #menu-modal .inner[data-v-43247261] {
      background-color:var(--color-white);
      border-bottom-left-radius: var(--border-radius);
      border-bottom-right-radius: var(--border-radius);
      transform: translate3d(0,-100%,0);
      transition: transform .6s var(--ease-in-out-power4)
  }
}

@media screen and (min-width: 1024px) {
  #menu-modal .inner[data-v-43247261] {
      height:calc(100vh - var(--grid-gutter)* 2);
      width:calc(50vw - var(--grid-gutter)*2);
      padding: var(--btn-margin);
  }
}

:is(#menu-modal .inner[data-v-43247261]):before {
  background-color: var(--color-white);
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: -1
}

@media screen and (max-width: 1023px) {
  :is(#menu-modal .inner[data-v-43247261]):before {
      display:none
  }
}

@media screen and (min-width: 1024px) {
  :is(#menu-modal .inner[data-v-43247261]):before {
      opacity:0;
      transition: opacity .4s var(--ease-out-power2) .75s
  }
}

:is(#menu-modal .inner[data-v-43247261]):before {
  clip-path: inset(calc(var(--btn-margin) - var(--subgrid-offset)*var(--py) + 5px) calc(var(--btn-margin) - var(--subgrid-offset)*var(--px)) calc((100% - var(--button-height) - var(--btn-margin))*(1 - var(--py)) + (var(--btn-margin) - var(--subgrid-offset))*var(--py) + 10px) calc((100% - var(--button-height) - var(--btn-margin))*1.015*(1 - var(--px))) );
  will-change: clip-path,opacity
  
}

#menu-modal .inner-bg[data-v-43247261] {
  background-color: #706e6a;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  cursor: pointer;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: opacity .4s var(--ease-out-power2),visibility 0s linear .4s;
  visibility: hidden;
  z-index: 1
}

.-active[data-v-43247261]:is(#menu-modal .inner-bg) {
  opacity: .75;
  transition-delay: 0s;
  visibility: visible
}

@media screen and (min-width: 1024px) {
  #menu-modal .inner-bg[data-v-43247261] {
      display:none
  }
}

#menu-modal .main-links[data-v-43247261] {
  padding-left: calc(var(--grid-margin)*2);
  padding-top:0.11rem
}

@media screen and (min-width: 1024px) {
  #menu-modal .main-links[data-v-43247261] {
      padding-left:0.25rem
  }
}

:is(#menu-modal .main-links) a[data-v-43247261],:is(#menu-modal .main-links) button[data-v-43247261] {
  align-items: center;
  display: flex;
  height: var(--link-height);
  opacity: 0;
  transform: translate3d(0,1rem,0);
  transition: color .4s var(--ease-out-power2),opacity .4s var(--ease-out-power2),transform 0s linear .4s
}

@media screen and (min-width: 1024px) {
  :is(#menu-modal .main-links) a[data-v-43247261],:is(#menu-modal .main-links) button[data-v-43247261] {
      padding:0;
      width: 30vw
  }
}

:is(:is(#menu-modal .main-links) button,:is(#menu-modal .main-links) a) span[data-v-43247261] {
  display: block
}

@media (hover: hover) and (pointer:fine) {
  :is(:is(#menu-modal .main-links) button[data-v-43247261],:is(#menu-modal .main-links) a[data-v-43247261]):not([aria-expanded=true]):not(:disabled):hover {
      color:color-mix(in srgb,var(--color-dark-blue) 50%,transparent 50%)
  }
}

:is(#menu-modal .main-links) button[data-v-43247261] {
  position: relative
}

[aria-expanded=true][data-v-43247261]:is(:is(#menu-modal .main-links) button):before {
  opacity: 1
}

[aria-expanded=true]:is(:is(#menu-modal .main-links) button)+.dropdown[data-v-43247261] {
  visibility: visible
}

:is(:is(#menu-modal .main-links) button[data-v-43247261]):before {
  background-color: var(--color-beige);
  content: "";
  height: 100%;
  left: calc(var(--grid-margin)*-1);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: opacity .3s var(--ease-out-power2);
  width: 70vw;
  z-index: -1
}

@media screen and (min-width: 1024px) {
  :is(:is(#menu-modal .main-links) button[data-v-43247261]):before {
      left:calc(0.24rem * -1);
      width: 30vw
  }
}

#menu-modal .sub-link-wrapper[data-v-43247261] {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin: var(--btn-margin);
  margin-top: auto;
  width: calc(100% - (var(--grid-margin) + var(--grid-margin)*2))
}

#menu-modal .sub-links[data-v-43247261] {
  -moz-column-gap: var(--subgrid-spacing);
  column-gap: var(--subgrid-spacing);
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: auto;
  padding: calc(var(--grid-margin)*2);
  row-gap: calc(var(--small-spacing)*.5);
  width: 100%
}

@media screen and (min-width: 1024px) {
  #menu-modal .sub-links[data-v-43247261] {
      padding:var(--subgrid-margin) var(--subgrid-spacing);
      width: calc(var(--grid-column-width)*4 + var(--grid-gutter)*3)
  }
}

:is(#menu-modal .sub-links) a[data-v-43247261] {
  display: inline-block;
  opacity: 0;
  position: relative;
  transform: translate3d(0,.5rem,0);
  transition: opacity .4s var(--ease-out-power2),transform 0s linear .4s
}

:is(:is(#menu-modal .sub-links) a[data-v-43247261]):after {
  background-color: var(--color-dark-blue);
  bottom: 0;
  content: "";
  display: block;
  height: .0625rem;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .4s var(--ease-out-power2);
  width: 100%
}

@media (hover: hover) and (pointer:fine) {
  :is(:is(#menu-modal .sub-links) a[data-v-43247261]):not(:disabled):hover:after {
      transform:scaleX(1);
      transform-origin: left center
  }
}

#menu-modal .socials[data-v-43247261] {
  align-items: center;
  display: flex;
  gap: var(--grid-gutter);
  justify-content: center;
  padding-right: var(--subgrid-margin)
}

:is(#menu-modal .socials) .ui-button[data-v-43247261] {
  opacity: 0;
  transform: scale(.25);
  transition: opacity .4s var(--ease-out-power2),transform .4s var(--ease-out-power2)
}

#menu-modal .bottom[data-v-43247261] {
  padding-bottom: 0;
  padding-right: var(--grid-margin);
  width:calc(100% - var(--grid-margin));
}

@media screen and (min-width: 1024px) {
  #menu-modal .bottom[data-v-43247261] {
      padding-bottom:  var(--grid-margin);
  }
}

:is(#menu-modal .bottom) .ui-card[data-v-43247261] {
  height:1.5rem
}



@media screen and (min-width: 1024px) {
  :is(#menu-modal .bottom) .ui-card[data-v-43247261] {
      height:calc(33.33333svh - var(--grid-margin)*16/2);
      width:auto;
  }
}

#menu-modal .close[data-v-43247261] {
  position: absolute;
  right: 0.3rem;
  top: 0.3rem;
  transform: scale(0) translateZ(0);
  transition: transform .4s var(--ease-out-power2) .2s;
  z-index: 1;
  border: 0;
  border-radius:0;
}

@media screen and (max-width: 1023px) {
  #menu-modal .close[data-v-43247261] {
      transition-delay:0s
  }
}

:is(#menu-modal .close[data-v-43247261]):after {
  content: "Close";
  left: calc(var(--subgrid-spacing)*-1);
  margin-left: -100%;
  opacity: 0;
  position: absolute;
  transform: translate3d(0,.5rem,0);
  transition: opacity .4s var(--ease-out-power2),transform 0s linear .4s
}

@media screen and (max-width: 1023px) {
  :is(#menu-modal .close[data-v-43247261]):after {
      display:none;
      transition-delay: 0s
  }
}

#menu-modal .submenu-bg[data-v-43247261] {
  height: 100%;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transition: visibility 0s linear 1.2s;
  visibility: hidden;
  width: calc(50vw - var(--grid-gutter)*.5);
  --bg-margin: calc(var(--btn-margin) - var(--subgrid-offset));
  --menu-index: -1
}

@media screen and (max-width: 1023px) {
  #menu-modal .submenu-bg[data-v-43247261] {
      display:none
  }
}

:is(#menu-modal .submenu-bg) .plus-icon[data-v-43247261] {
  align-items: center;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  opacity: 0;
  position: absolute;
  right: var(--btn-margin);
  top: var(--btn-margin);
  transition: opacity .3s var(--ease-out-power2),transform 0s linear .3s;
  width: var(--button-height)
}

:is(:is(#menu-modal .submenu-bg) .plus-icon) .tt-icon[data-v-43247261] {
  transform: rotate(180deg);
  width: 30%
}

.-active[data-v-43247261]:is(#menu-modal .submenu-bg) {
  transition-delay: 0s;
  visibility: visible
}

.-active[data-v-43247261]:is(#menu-modal .submenu-bg):before {
  clip-path: inset(var(--bg-margin) calc(var(--bg-margin)/2) var(--bg-margin) var(--bg-margin) )!important;
  opacity: 1;
  transition: clip-path .6s var(--ease-in-out-power4)!important;
  will-change: clip-path
}

.-active:is(#menu-modal .submenu-bg) .plus-icon[data-v-43247261],.-active[data-v-43247261]:is(#menu-modal .submenu-bg):after {
  opacity: 0!important;
  transition: none!important
}

#menu-modal.-active .-hovered[data-v-43247261]:is(#menu-modal .submenu-bg) {
  transition-delay: 0s;
  visibility: visible
}

:is(#menu-modal.-active .-hovered[data-v-43247261]:is(#menu-modal .submenu-bg)):before {
  clip-path: inset(calc(var(--btn-margin) + var(--link-height)*var(--menu-index)) var(--btn-margin) calc(100% - var(--button-height) - var(--btn-margin) - var(--link-height)*var(--menu-index)) calc(100% - var(--button-height) - var(--btn-margin)) round var(--button-height))
}

:is(#menu-modal.-active .-hovered:is(#menu-modal .submenu-bg)) .plus-icon[data-v-43247261],:is(#menu-modal.-active .-hovered[data-v-43247261]:is(#menu-modal .submenu-bg)):after {
  opacity: 1;
  margin-top: 0.15rem;
  transform: translate3d(0,calc(var(--link-height)*var(--menu-index)),0);
  transition: opacity .3s var(--ease-out-power2),transform .4s var(--ease-out-power2)
  
}

:is(#menu-modal.-active .-first-hovered:is(#menu-modal .submenu-bg)) .plus-icon[data-v-43247261],:is(#menu-modal.-active .-first-hovered[data-v-43247261]:is(#menu-modal .submenu-bg)):after {
  transition: opacity .3s var(--ease-out-power2)
}

:is(#menu-modal.-active[data-v-43247261] :is(#menu-modal .submenu-bg)):before {
  clip-path: inset(var(--btn-margin) var(--btn-margin) calc(100% - var(--btn-margin) - var(--button-height)) calc(100% - var(--btn-margin) - var(--button-height)));
  transition: opacity 0s linear .4s,clip-path .4s var(--ease-in-out-power2);
  will-change: clip-path,opacity
}

:is(#menu-modal .submenu-bg[data-v-43247261]):before {
  background-color: var(--color-white);
  clip-path: inset(calc(var(--btn-margin) - var(--subgrid-offset)*var(--py) + 5px) calc((100% - var(--button-height) - var(--btn-margin))*1.015*(1 - var(--px))) calc((100% - var(--button-height) - var(--btn-margin))*(1 - var(--py)) + (var(--btn-margin) - var(--subgrid-offset))*var(--py) + 5px) calc(var(--btn-margin) - var(--subgrid-offset)*var(--px)) );
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  will-change: clip-path,opacity;
  z-index: -1
}

@media screen and (min-width: 1024px) {
  :is(#menu-modal .submenu-bg[data-v-43247261]):before {
      transition:opacity .4s var(--ease-out-power2) .8s
  }
}

:is(#menu-modal .submenu-bg[data-v-43247261]):after {
  background-color: var(--color-white);
  content: "";
  height: var(--button-height);
  opacity: 0;
  position: absolute;
  right: var(--btn-margin);
  top: var(--btn-margin);
  transition: opacity .3s var(--ease-out-power2),transform 0s linear .3s;
  width: var(--button-height);
  z-index: -1
}

#menu-modal[data-v-43247261] .collection-card,#menu-modal[data-v-43247261] .ui-card {
  clip-path: inset(3rem 3rem 3rem 3rem round var(--border-radius));
  opacity: 0;
  transform: translate3d(0,3rem,0);
  transition: opacity .3s var(--ease-out-power2),transform 0s linear .4s,clip-path 0s linear .4s
}

#menu-modal .dropdown[data-v-43247261] {
  padding: var(--grid-margin);
  display: grid;
  align-items: center;
  gap: var(--grid-margin);
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  height: var(--submenu-height);
  left: 0;
  position: fixed;
  transition: visibility 0s linear 1s;
  visibility: hidden;
  width: 100%;
  z-index: 1
}

@media screen and (max-width: 1023px) {
  #menu-modal .dropdown[data-v-43247261] {
    --dropdown-height: var(--submenu-height) - var(--grid-margin) - .5rem;
      background-color:var(--color-beige);
      border-top-left-radius: var(--border-radius);
      border-top-right-radius: var(--border-radius);
      padding: .5rem var(--grid-margin) var(--grid-margin);
      top: calc(100dvh - var(--dropdown-height));
      width: calc(100% - var(--grid-margin)*2);
      transform: translate3d(0,100%,0);
      transition: transform .6s var(--ease-in-out-power2),visibility 0s linear .6s
  }
}

@media screen and (min-width: 1024px) {
  #menu-modal .dropdown[data-v-43247261] {
      height:calc(100svh - var(--grid-margin)*4);
      padding: calc(var(--grid-margin)*2);
      top: 0;
      width: calc(50vw - var(--grid-gutter)*4)
  }
}

.-active[data-v-43247261]:is(#menu-modal .dropdown) {
  transition-delay: 0s
}

@media screen and (max-width: 1023px) {
  .-active[data-v-43247261]:is(#menu-modal .dropdown) {
      transform:translateZ(0)
  }
}

.-active[data-v-43247261]:is(#menu-modal .dropdown) .collection-card,.-active[data-v-43247261]:is(#menu-modal .dropdown) .ui-card {
  clip-path: inset(0 0 0 0 round var(--border-radius));
  opacity: 1;
  transform: translateZ(0);
  --d: calc(.4s + var(--index)*.04s);
  transition: opacity .4s var(--ease-out-power2) var(--d),clip-path .4s var(--ease-out-power2) var(--d),transform .4s var(--ease-out-power2) var(--d);
  height:calc(var(--cardh) / 3 - 0.66rem - 0.11rem);
  width: calc(50vw - 0.66rem - 0.56rem);
  --cardh: calc(100vh - 0.44rem);
}

:is(#menu-modal .dropdown[data-v-43247261]) .app-dragControl {
  left: 0;
  padding: .25rem 0 .25rem;
  position: absolute;
  top: 0
}

.sr-only {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  clip: rect(0, 0, 0, 0);
  border-width: 0;
  white-space: nowrap;
}

.dropdown .collection-card[data-v-30e5559c], .dropdown .ui-card[data-v-30e5559c] {
  grid-column: span 2;
}

.ui-card[data-v-ff92402c] {
  height: calc(var(--submenu-height) / 3);
  padding:0.33rem  0.4rem;
  position: relative;
  width: calc(50vw - 0.66rem - 0.66rem);
  margin: 0 auto;
}

@media (hover: hover) and (pointer:fine) {
  .ui-card:not(:disabled):hover .ui-button[data-v-ff92402c]:before {
      transform:scale(1.1) translateZ(0)
  }

  @media screen and (pointer: fine) {
      .ui-card:not(:disabled):hover .media[data-v-ff92402c]:after {
          opacity:.15
      }
  }

  .ui-card:not(:disabled):hover .media .ui-image[data-v-ff92402c] img {
      transform: scale(1.025) translateZ(0)
  }

  .ui-card:not(:disabled):hover .ui-button[data-v-ff92402c] .tt-icon {
      transform: translate(5rem);
      width: 30%
  }

  .ui-card:not(:disabled):hover .ui-button[data-v-ff92402c] .clone {
      transform: translate(0)
  }

  .ui-card:not(:disabled):hover .ui-button[data-v-ff92402c] .clone,.ui-card:not(:disabled):hover .ui-button[data-v-ff92402c] .tt-icon {
      transition: transform .4s var(--ease-in-out-soft)
  }
}

.ui-card .media[data-v-ff92402c] {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1
}

:is(.ui-card .media[data-v-ff92402c]):after {
  background-color: #2c2c2c;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: opacity .4s var(--ease-out-power2)
}

@media screen and (pointer: coarse) {
  :is(.ui-card .media[data-v-ff92402c]):after {
      opacity:.15
  }
}

:is(.ui-card .media) .ui-image[data-v-ff92402c] {
  height: 100%
}
:is(.ui-card .title) .ui-image[data-v-ff92402c] {
  height: 100%
}

:is(:is(.ui-card .media) .ui-image[data-v-ff92402c]) img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform .4s var(--ease-out-power2)
}
:is(:is(.ui-card .title) .ui-image[data-v-ff92402c]) img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform .4s var(--ease-out-power2)
}

:is(.ui-card .title-link[data-v-ff92402c]):before {
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute
}

.ui-card .title[data-v-ff92402c] {
  color: var(--color-white)
}

.ui-card .ui-button[data-v-ff92402c] {
  bottom: 1rem;
  position: absolute;
  right: 1rem
}

.ui-card[data-v-ff92402c] .bg{background-color: #39aeb2; width: 100%; height: 100%;}


.app-dragControl[data-v-9097774f] {
  display: block;
  padding: .25rem 0 .25rem;
  position: relative;
  width: 100%
}

@media screen and (min-width: 1024px) {
  .app-dragControl[data-v-9097774f] {
      display:none
  }
}

.app-dragControl[data-v-9097774f]:before {
  background-color: var(--color-gray2);
  content: "";
  display: block;
  height: .025rem;
  left: 50%;
  position: absolute;
  transform: translate(-50%);
  width: calc(var(--grid-column-width)*2 + var(--grid-gutter)*1)
}

.-active[data-v-43247261]:is(#menu-modal .dropdown.is-odd) .ui-card {
  height: calc(100% - 0.11rem - 0.55rem);
  width: calc(100% - 0.66rem - 0.13rem);
}
:is(#menu-modal .dropdown.is-odd) .ui-card {
  height: calc(100% - 0.11rem - 0.55rem);
  width: calc(100% - 0.66rem - 0.13rem);
}

@media screen and (min-width: 1024px) { 
  .-active[data-v-43247261]:is(#menu-modal .dropdown.is-odd) .ui-card {
    height:calc(100% - 0.11rem - 0.55rem);
    width: calc(100% - 0.66rem - 0.13rem);
  }
 }


 @media screen and (max-width: 1023px) {
  #menu-modal.-active .bottom .ui-card[data-v-43247261] {
    width: calc(100% - var(--grid-margin)* 4 - 0.66rem);
    margin: 0 auto;
  }
  :is(#menu-modal .bottom) .ui-card[data-v-43247261] {
    width: calc(100% - var(--grid-margin)* 4 - 0.66rem) !important;
    margin: 0 auto;
  }
  .-active[data-v-43247261]:is(#menu-modal .dropdown) .ui-card {
    width: calc(100% - var(--grid-margin)* 4 - 0.66rem);
    height:calc(var(--submenu-height) / 3 - var(--grid-margin)* 4 - 0.66rem);
    margin: 0 auto;
  }
  :is(#menu-modal .dropdown) .ui-card {
    width: calc(100% - var(--grid-margin)* 4 - 0.66rem);
    height:calc(var(--submenu-height) / 3 - var(--grid-margin)* 4 - 0.66rem);
    margin: 0 auto;
  }
  :is(.ui-button .container) .tt-icon[data-v-e2f6a032], :is(.ui-button .container[data-v-e2f6a032]) .clone{
    font-size: 0.18rem;
  }
  :is(.ui-button .container) .tt-icon[data-v-e2f6a032] img, :is(.ui-button .container[data-v-e2f6a032]) .clone img{
    width: 100%;
  }
  .ui-logo{text-align: center;}
  .ui-logo img{
    width:auto;
    margin-right: 0.2rem;
    margin-top: 0.1rem;}
}