@font-face {
  font-family: "F 37 Moontrial";
  src: url('../fonts/F37MoonTrial-ExtraBoldItalic.otf') format("opentype"), url('../fonts/F37MoonTrial-BoldItalic.otf') format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "F 37 Moontrial";
  src: url('../fonts/F37MoonTrial-Light.otf') format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "F 37 Moontrial";
  src: url('../fonts/F37MoonTrial-LightItalic.otf') format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "F 37 Moontrial";
  src: url('../fonts/F37MoonTrial-ThinItalic.otf') format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "F 37 Moontrial Demi";
  src: url('../fonts/F37MoonTrial-Demi.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "F 37 Moontrial";
  src: url('../fonts/F37MoonTrial-Thin.otf') format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "F 37 Moontrial";
  src: url('../fonts/F37MoonTrial-ExtraBold.otf') format("opentype"), url('../fonts/F37MoonTrial-Bold.otf') format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "F 37 Moontrial";
  src: url('../fonts/F37MoonTrial-Black.otf') format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "F 37 Moontrial";
  src: url('../fonts/F37MoonTrial-DemiItalic.otf') format("opentype"), url('../fonts/F37MoonTrial-RegularItalic.otf') format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "F 37 Moontrial";
  src: url('../fonts/F37MoonTrial-Regular.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "F 37 Moontrial";
  src: url('../fonts/F37MoonTrial-BlackItalic.otf') format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

.w-layout-hflex {
  flex-direction: row;
  align-items: flex-start;
  display: flex;
}

.canvas {
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid #000;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.canvas.absolute {
  z-index: 2;
  aspect-ratio: auto;
  object-fit: fill;
  border-style: none;
  width: 100%;
  height: 100%;
  margin-left: -180px;
  display: block;
  position: absolute;
  inset: 0%;
  overflow: visible;
}

.button {
  color: #000;
  text-transform: uppercase;
  background-color: #70da4d;
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg');
  background-position: 16px;
  background-repeat: no-repeat;
  background-size: 32px;
  border: 1px solid #000;
  border-radius: 8px;
  padding: 16px 16px 16px 64px;
  font-size: .8rem;
  font-weight: 400;
}

.button:hover {
  color: #70da4d;
  background-color: #000;
}

.button:active {
  opacity: 1;
  color: #70da4d;
  background-color: #1a1a1a;
}

.button:focus {
  color: #70da4d;
  background-color: #1a1a1a;
}

.button.splash-card {
  z-index: 4;
  color: #000;
  background-image: url('../images/Khazna_arrow.svg');
  background-position: 95%;
  background-repeat: no-repeat;
  background-size: 24px;
  padding-left: 16px;
  padding-right: 72px;
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
  position: relative;
}

.button.splash-card:hover {
  filter: invert();
  color: #000;
  background-color: #fff;
  border-color: #fff;
  text-decoration: none;
}

.button.back {
  background-image: url('../images/close_icon_black.svg');
  background-position: 100%;
  background-size: 10px;
  border-style: none;
  border-radius: 0;
  padding: 0 18px 0 0;
  font-size: .75rem;
  font-weight: 400;
}

.button.back:hover {
  color: #000;
  background-color: #70da4d;
}

.button.cooling {
  background-image: url('../images/icon_cooling.svg');
}

.button.cooling:hover {
  color: #70da4d;
}

.button.datahall {
  background-image: url('../images/icon_datahall.svg');
}

.button.datahall:hover {
  color: #70da4d;
}

.button.scalable {
  background-image: url('../images/icon_scalable.svg');
}

.button.scalable:hover {
  color: #70da4d;
}

.button.connectivity {
  background-image: url('../images/icon_energy.svg');
}

.button.connectivity:hover {
  color: #70da4d;
}

.button.security {
  background-image: url('../images/icon_security.svg');
}

.button.security:hover {
  color: #70da4d;
}

.body {
  color: #70d94e;
  background-color: #70da4d;
  font-family: Space Mono, sans-serif;
  font-size: 1rem;
}

.expansion_space {
  width: 100%;
  max-width: none;
  position: absolute;
  inset: 0%;
}

.h1 {
  color: #1a1a1a;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  font-family: "F 37 Moontrial", Arial, sans-serif;
  font-size: 4.4rem;
  font-weight: 700;
  line-height: 90%;
}

.button-container {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.button-container.absolute {
  z-index: 2;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: #000;
  background-color: #70db4d;
  border: 1px solid #000;
  border-radius: 8px;
  flex-flow: column;
  align-content: flex-start;
  align-items: stretch;
  width: 20%;
  max-width: 100%;
  padding: 16px;
  display: flex;
  position: absolute;
  inset: 40px 40px auto auto;
}

.logo-container {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  max-height: 100%;
  margin-top: 0;
  margin-left: 0;
}

.logo {
  height: 100%;
}

.graphic {
  width: 100%;
  max-width: none;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0%;
}

.graphic.l_wall, .graphic.bl_wall, .graphic.br_wall {
  max-width: none;
}

.graphic.expansion_state {
  max-width: none;
  display: none;
}

.graphic.noc, .graphic.soc, .graphic.reception_desk, .graphic.dc_6, .graphic.dc_5, .graphic.dc_4, .graphic.dc_3, .graphic.dc_2, .graphic.dc_1, .graphic.meeting_room, .graphic.fr_wall, .graphic.fl_wall, .graphic.intelligence_grid, .graphic.energy_transistors, .graphic.electrical_shed {
  max-width: none;
}

.graphic.cooling_fan {
  display: none;
}

.floor {
  max-width: none;
  position: absolute;
  inset: 0%;
}

.grid {
  width: 100%;
  max-width: none;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0%;
  overflow: visible;
}

.div-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  place-items: center;
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}

.content-container {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.content-container.absolute {
  z-index: 2;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: #1a1a1a;
  background-color: #70db4d;
  border: 1px solid #000;
  border-radius: 8px;
  flex-flow: wrap;
  align-content: flex-start;
  width: 20%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 16px;
  font-size: .75rem;
  display: none;
  position: absolute;
  inset: 40px 40px auto auto;
}

.content {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.content.data_hall, .content.cooling, .content.scalability, .content.security, .content.energy, .content.energy_resiliency {
  display: none;
}

.splash-container {
  z-index: 3;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  color: #1a1a1a;
  grid-template-rows: min-content min-content auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-rows: auto;
  grid-auto-columns: 1fr;
  justify-content: center;
  place-items: start stretch;
  height: 100%;
  padding: 40px;
  display: grid;
  position: absolute;
  inset: 0%;
}

.splash-card {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.link-block {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: #1a1a1a;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.icon.size-4 {
  width: 16px;
  height: 16px;
}

.icon.size-1 {
  width: 4px;
  height: 4px;
}

.icon.size-2 {
  width: 8px;
  height: 8px;
}

.line-seperator {
  border-bottom: 1px solid #000;
  padding-top: 0;
}

.flex-horizontal.header {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  text-transform: uppercase;
  border-bottom: 1px solid #000;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 20px;
}

.flex-horizontal.cg-2 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
}

.flex-horizontal.cg-4 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
}

.text-block.header {
  text-transform: uppercase;
  font-size: 1.25rem;
}

.image {
  width: 32px;
}

.background {
  width: 100%;
  max-width: none;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.background.l_wall, .background.bl_wall, .background.br_wall {
  max-width: none;
}

.background.expansion_state {
  max-width: none;
  display: none;
}

.background.noc, .background.soc, .background.reception_desk, .background.dc_6, .background.dc_5, .background.dc_4, .background.dc_3, .background.dc_2, .background.dc_1, .background.meeting_room, .background.fr_wall, .background.fl_wall, .background.intelligence_grid, .background.energy_transistors, .background.electrical_shed {
  max-width: none;
}

@media screen and (min-width: 1920px) {
  .canvas.absolute {
    position: absolute;
    inset: 0%;
    overflow: hidden;
  }

  .button {
    background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg');
    background-position: 16px;
    background-repeat: no-repeat;
    background-size: 32px;
    padding: 16px 16px 16px 64px;
    font-size: 12px;
    font-weight: 400;
  }

  .h1 {
    padding-bottom: 0;
    font-size: 7rem;
    line-height: 90%;
  }

  .button-container.absolute {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    text-transform: uppercase;
    background-color: #70db4d;
    align-items: stretch;
    width: 20%;
    font-size: 12px;
    font-weight: 400;
    display: flex;
    position: absolute;
    inset: 40px 40px auto auto;
  }

  .graphic {
    vertical-align: middle;
    flex: none;
    display: block;
    inset: 0%;
    overflow: visible;
  }

  .grid {
    aspect-ratio: 16 / 9;
    opacity: 100;
    object-fit: cover;
    display: block;
  }

  .div-block {
    grid-template-rows: auto auto auto auto auto;
    padding: 40px;
    display: block;
  }

  .content-container.absolute {
    width: 100%;
    max-width: 20%;
    position: absolute;
    inset: 40px 40px auto auto;
  }

  .splash-container {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-rows: min-content min-content auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    place-items: center stretch;
    height: 100%;
    padding: 40px;
    display: grid;
    inset: 0%;
  }

  .flex-horizontal {
    justify-content: space-between;
    align-items: flex-start;
  }

  .flex-horizontal.header {
    color: #000;
    text-transform: uppercase;
    border-bottom: 1px solid #000;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
  }

  .text-block {
    color: #000;
  }

  .image {
    width: 32px;
  }

  .background {
    vertical-align: middle;
    flex: none;
    display: block;
    inset: 0%;
    overflow: visible;
  }
}

#w-node-_9eece7ee-4283-5e98-228c-d8130d548c42-b2615d97 {
  place-self: center;
}

#w-node-_0046d914-1d82-63f7-a9a0-63378a6f894b-b2615d97 {
  grid-area: 1 / 6 / 2 / 7;
  place-self: start end;
}

#w-node-b0e98239-2733-ad4c-d367-ce23bf2ce99e-b2615d97 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_80e99158-7b73-49ee-a04f-af0decc09e5e-b2615d97 {
  grid-area: span 1 / span 6 / span 1 / span 6;
  align-self: start;
}

#w-node-_9483cb2f-2548-d86a-287b-49b4303a65cb-b2615d97 {
  grid-area: 3 / 1 / 4 / 4;
}

#w-node-_6e1e545f-5819-cb41-63b8-e6f2a14e7c34-b2615d97 {
  grid-area: 5 / 1 / 6 / 4;
  place-self: end start;
}

#w-node-_98bf0f3f-ca23-5c92-b879-1677332282a0-b2615d97 {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-e70f50fa-9ff6-163b-c7b3-60aa28791404-b2615d97 {
  grid-area: 8 / 2 / 9 / 3;
}

#w-node-e70f50fa-9ff6-163b-c7b3-60aa28791408-b2615d97 {
  grid-area: 8 / 4 / 9 / 5;
}

#w-node-e70f50fa-9ff6-163b-c7b3-60aa2879140c-b2615d97 {
  grid-area: 8 / 6 / 9 / 7;
}

#w-node-e70f50fa-9ff6-163b-c7b3-60aa28791406-b2615d97 {
  grid-area: 8 / 3 / 9 / 4;
}

#w-node-abc394cd-84bf-a0de-3a81-8fb591a8f21e-b2615d97 {
  grid-area: 1 / 5 / 2 / 7;
}

@media screen and (min-width: 1920px) {
  #w-node-b0e98239-2733-ad4c-d367-ce23bf2ce99e-b2615d97, #w-node-_80e99158-7b73-49ee-a04f-af0decc09e5e-b2615d97, #w-node-_9483cb2f-2548-d86a-287b-49b4303a65cb-b2615d97 {
    align-self: start;
  }

  #w-node-_98bf0f3f-ca23-5c92-b879-1677332282a0-b2615d97 {
    grid-area: span 6 / span 6 / span 6 / span 6;
  }

  #w-node-abc394cd-84bf-a0de-3a81-8fb591a8f21e-b2615d97 {
    grid-row: 1 / 4;
    grid-column-start: 6;
  }
}

@media screen and (min-width: 1440px) {
  #w-node-_80e99158-7b73-49ee-a04f-af0decc09e5e-b2615d97 {
    align-self: start;
  }
}


@font-face {
  font-family: 'F 37 Moontrial';
  src: url('../fonts/F37MoonTrial-ExtraBoldItalic.otf') format('opentype'), url('../fonts/F37MoonTrial-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'F 37 Moontrial';
  src: url('../fonts/F37MoonTrial-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'F 37 Moontrial';
  src: url('../fonts/F37MoonTrial-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'F 37 Moontrial';
  src: url('../fonts/F37MoonTrial-ThinItalic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'F 37 Moontrial Demi';
  src: url('../fonts/F37MoonTrial-Demi.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'F 37 Moontrial';
  src: url('../fonts/F37MoonTrial-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'F 37 Moontrial';
  src: url('../fonts/F37MoonTrial-ExtraBold.otf') format('opentype'), url('../fonts/F37MoonTrial-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'F 37 Moontrial';
  src: url('../fonts/F37MoonTrial-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'F 37 Moontrial';
  src: url('../fonts/F37MoonTrial-DemiItalic.otf') format('opentype'), url('../fonts/F37MoonTrial-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'F 37 Moontrial';
  src: url('../fonts/F37MoonTrial-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'F 37 Moontrial';
  src: url('../fonts/F37MoonTrial-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}