*, *:after, *:before {
  box-sizing: border-box;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, main aside a.download::before, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, dialog {
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  border: 0
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block
}
body {
  line-height: 1
}
ol, ul, li {
  list-style: none
}
table {
  text-align: left;
  border-collapse: collapse;
  border-spacing: 0
}
dialog {
  position: static;
  display: block;
  width: auto;
  height: auto;
  color: inherit;
  background: none
}
input, textarea, button, select {
  padding: 0;
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none
}
textarea {
  vertical-align: top
}
select {
  text-indent: calc((100 / 1px));
  text-overflow: "";
  border: 0;
  border-radius: 0
}
select::-ms-expand {
  display: none
}
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000
}
select option {
  font-family: sans-serif
}
q, blockquote {
  quotes: none
}
q::before, q::after, blockquote::before, blockquote::after {
  content: unset
}
code, pre {
  font-family: monospace;
  font-size: 1rem
}
@font-face {
  font-family: "Futura";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../font/futura.woff2") format("woff2"), url("../font/futura.woff") format("woff")
}
@font-face {
  font-family: "Requiem";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../font/requiem.woff2") format("woff2"), url("../font/requiem.woff") format("woff")
}
:root {
  font-size: 16px
}
@media(max-width: 800px) {
  :root {
    font-size: calc(((((100vw - 640px) / 160) * (16 - 14)) + 14px))
  }
}
@media(max-width: 640px) {
  :root {
    font-size: 14px
  }
}
html, body {
  color: red;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
h3 {
  font-family: "Requiem", serif;
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 1.5vw, 2rem)
}
h4, main aside a.downloadbrochure::before, a.downloadplans::before, a.playvideo::before {
  font-family: "Futura", sans-serif;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase
}
h5 {
  font-family: "Requiem", serif;
  font-size: 1rem
}
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer
}
@media(max-width: 1024px) {
  :root {
    --header_height: 100px
  }
}
@media(max-width: 800px) {
  :root {
    --header_height: calc((((2 / 5) * calc(((((100vw - 640px) / 160) * (160 - 120)) + 120px))) + (calc(((((100vw - 640px) / 160) * (18 - 12)) + 12px)) * 2)))
  }
}
@media(max-width: 640px) {
  :root {
    --header_height: 72px
  }
}
html, body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}
html {
  height: 100%;
  background-color: #d6d1c9
}
html.browser_load *, html.browser_resize * {
  transition: unset !important
}
body {
  display: flex;
  min-height: 100%;
  padding-top: var(--header_height, unset);
  align-items: flex-start;
  flex-direction: column
}
header, main, footer {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto
}
header, footer {
  position: relative
}
header::before, footer::before {
  all: unset;
  position: absolute;
  top: 0;
  left: 0;
  z-index: unset;
  display: block;
  width: 100vw;
  height: 100%;
  margin-left: calc(((50vw - 50%) * -1));
  content: "";
  background: inherit
}
header > *, footer > * {
  position: relative;
  z-index: unset
}
header {
  display: flex;
  padding: 24px;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  background-color: #d6d1c9
}
@media(max-width: 1200px) {
  header {
    padding: calc(((((100vw - 1024px) / 176) * (24 - 18)) + 18px)) 24px
  }
}
@media(max-width: 1024px) {
  header {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 2;
    padding: 18px 24px;
    transform: translateX(-50%)
  }
}
@media(max-width: 800px) {
  header {
    padding: calc(((((100vw - 640px) / 160) * (18 - 12)) + 12px)) 24px
  }
}
@media(max-width: 640px) {
  header {
    padding: 12px 24px
  }
}
header a.logo {
  display: block;
  width: 208px;
  background-color: #212721;
  -webkit-mask-image: url("../gfx/logo.svg");
  mask-image: url("../gfx/logo.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat
}
@media(max-width: 1200px) {
  header a.logo {
    width: calc(((((100vw - 1024px) / 176) * (208 - 160)) + 160px))
  }
}
@media(max-width: 1024px) {
  header a.logo {
    width: 160px
  }
}
@media(max-width: 800px) {
  header a.logo {
    width: calc(((((100vw - 640px) / 160) * (160 - 120)) + 120px))
  }
}
@media(max-width: 640px) {
  header a.logo {
    width: 120px
  }
}
header a.logo::before {
  display: block;
  padding-top: calc(((2 / 5) * 100%));
  content: ""
}
header a.logo > * {
  position: fixed !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0)
}
main {
  position: relative
}
@media(min-width: 1025px) {
  main {
    flex: 1
  }
}
@media(max-width: 1024px) {
  main {
    z-index: 1;
    height: calc(((var(--vh, 1vh) * 100) - var(--header_height)));
    max-height: 100vw
  }
}
main .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  max-height: 100vw;
  margin-left: calc(((50vw - 50%) * -1));
  overflow: hidden
}
main .video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  max-height: 100vw;
  background-image: url("../gfx/video.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform: translate(-50%, -50%)
}
@media(min-aspect-ratio: 16/9) {
  main .video iframe {
    height: calc((100vw * (54 / 127)))
  }
}
@media(max-aspect-ratio: 16/9) {
  main .video iframe {
    width: calc((100vh / (54 / 127)))
  }
}
main aside {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  background-color: rgba(214, 209, 201, .85)
}
@media(min-width: 641px) {
  main aside {
    max-width: 384px;
    min-width: 304px;
    margin: 24px
  }
}
@media(max-width: 640px) {
  main aside {
    width: 100vw;
    height: 100%;
    transform: translateX(0);
    transition: transform 200ms;
    will-change: transform
  }
}
@media(min-width: 641px) {
  main aside a.toggle {
    display: none
  }
}
main aside a.toggle::before, main aside a.toggle::after {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 1.25rem;
  margin: 24px 12px;
  content: ""
}
main aside a.toggle::before {
  height: 1.25rem;
  background-color: #212721;
  -webkit-mask-image: url("../gfx/arrow.svg");
  mask-image: url("../gfx/arrow.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: rotate(180deg);
  transform-origin: 50%;
  transition: transform 200ms;
  will-change: transform
}
main aside a.toggle::after {
  bottom: 0
}
main aside .scroll {
  display: flex;
  height: 100%;
  padding: 24px;
  overflow: auto;
  justify-content: flex-start;
  flex-direction: column
}
@media(max-width: 640px) {
  main aside .scroll {
    padding-right: calc((24px + (1.25rem * 2)))
  }
}
main aside h3 {
  margin-bottom: 4rem;
  color: #212721;
  line-height: 1.25
}
/*===========Plans===========*/
main aside a.downloadplans {
  display: flex;
  height: 1.75rem;
  margin-top: auto;
  align-items: center;
  flex-direction: row;
  border-bottom: 1px solid #212721
}
main aside a.downloadplans::before {
  color: #212721;
  content: "Download Plans";
  transition: opacity 200ms;
  will-change: opacity;
  opacity: 1
}
@media(pointer: fine) {
  main aside a.downloadplans:hover::before {
    opacity: .5
  }
}
main aside a.downloadplans::after {
  display: block;
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  flex: 0 0 auto;
  content: "";
  background-color: #212721;
  -webkit-mask-image: url("../gfx/arrow.svg");
  mask-image: url("../gfx/arrow.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: rotate(90deg);
  transform-origin: 50%
}
/*===========Brochure===========*/

main aside a.downloadbrochure {
  display: flex;
  height: 1.75rem;
  margin-top: auto;
  align-items: center;
  flex-direction: row;
  border-bottom: 1px solid #212721
}
main aside a.downloadbrochure::before {
  color: #212721;
  content: "Download Brochure";
  transition: opacity 200ms;
  will-change: opacity;
  opacity: 1
}
@media(pointer: fine) {
  main aside a.downloadbrochure:hover::before {
    opacity: .5
  }
}
main aside a.downloadbrochure::after {
  display: block;
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  flex: 0 0 auto;
  content: "";
  background-color: #212721;
  -webkit-mask-image: url("../gfx/arrow.svg");
  mask-image: url("../gfx/arrow.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: rotate(90deg);
  transform-origin: 50%
}


/*===========Video===========*/

main aside a.playvideo {
  display: flex;
  font-style: normal;
  font-size: 12px;
  height: 1.75rem;
  margin-top: auto;
  align-items: center;
  flex-direction: row;
  border-bottom: 1px solid #212721
}
main aside a.playvideo::before {
  color: #212721;
  content: "VIEW VIDEO";
  transition: opacity 200ms;
  will-change: opacity;
  opacity: 1
}
@media(pointer: fine) {
  main aside a.playvideo:hover::before {
    opacity: .5
  }
}
main aside a.playvideo::after {
  display: block;
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  flex: 0 0 auto;
  content: "";
  background-color: #212721;
  -webkit-mask-image: url("../gfx/arrow.svg");
  mask-image: url("../gfx/arrow.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: rotate(90deg);
  transform-origin: 50%
}

@media(max-width: 640px) {
  html:not(.aside_active) aside {
    transform: translateX(calc(((100% - (24px + 1.25rem)) * -1)))
  }
}
@media(max-width: 640px) {
  html:not(.aside_active) main aside a.toggle::before {
    transform: rotate(0deg)
  }
}
footer {
  display: grid;
  padding: 24px 24px max(env(safe-area-inset-bottom), 24px);
  align-items: flex-end;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-gap: 24px;
  background-color: #d6d1c9
}
@media(max-width: 1024px) {
  footer {
    position: relative;
    z-index: 1;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto)
  }
}
@media(max-width: 800px) {
  footer {
    grid-template-columns: repeat(2, 1fr)
  }
}
@media(max-width: 448px) {
  footer {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto)
  }
}
footer h4, footer main aside a.download::before, main aside footer a.download::before {
  grid-column: 1/-1;
  color: #212721;
  line-height: 1.4
}

footer address {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column
}
footer address h5 {
  margin-bottom: .375em;
  color: #212721
}
footer address a {
  display: block;
  color: #212721;
  font-family: "Requiem", serif;
  font-size: .875rem;
  opacity: 1
}
@media(pointer: fine) {
  footer address a {
    transition: opacity 200ms;
    will-change: opacity
  }
}
footer address a:not(:last-of-type) {
  margin-bottom: .375em
}
@media(pointer: fine) {
  footer address a:hover {
    opacity: .75
  }
}
footer a.almacantar {
  width: 100%;
  max-width: 160px;
  background-color: #212721;
  -webkit-mask-image: url("../gfx/almacantar.svg");
  mask-image: url("../gfx/almacantar.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat
}
@media(min-width: 1025px) {
  footer a.almacantar {
    margin-left: auto
  }
}
footer a.almacantar::before {
  display: block;
  padding-top: calc(((11 / 50) * 100%));
  content: ""
}