.bg {
  background-position: center;
  background-size    : 100% 100%;
  height             : 100%;
  box-sizing         : border-box;
}

.loadConfig {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: none;
  border: solid white thin;
  cursor: pointer;
  width: 200px;
  height: 60px;
  font-size: 1.7rem;
  background: none;
  color: white;
  border-radius: 12px;
  z-index: 999;
}

.poi-icon {
  width              : 4em;
  height             : 6em;
  transform          : translate(-50%, -100%);
  background-position: bottom center;
  background-repeat  : no-repeat;
  background-size    : contain;
  transform-origin   : bottom center;
  transition         : transform 0.1s;
}

.poi:hover .poi-icon {
  transform: translate(-50%, -100%) scale(1.3);
}

.poi-default {
  background-image: url('/site/templates/res/ui/General_Default_POI_Info.png');
}

.poi:hover .poi-default {
  background-image: url('/site/templates/res/ui/General_Hover_POI_Info.png');
}

.poi:active .poi-default {
  background-image: url('/site/templates/res/ui/General_Active_POI_Info.png');
}

.poi:focus-visible .poi-icon {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
    box-shadow: var(--accessibility-outline-box-shadow);
    z-index: var(--accessibility-outline-z-index);
}

/* POI text */
.poi:focus-visible > :first-child {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
    box-shadow: var(--accessibility-outline-box-shadow);
    z-index: var(--accessibility-outline-z-index);
}

.poi:active .poi-icon {
    outline: none;
    box-shadow: none;
}

.poi-room {
  background-image: url('/site/templates/res/ui/General_Default_POI_Previous_Room.png');
}

.poi:hover .poi-room {
  background-image: url('/site/templates/res/ui/General_Hover_POI_Previous_Room.png');
}

.poi:active .poi-room {
  background-image: url('/site/templates/res/ui/General_Active_POI_Previous_Room.png');
}

.poi-external {
  background-image: url('/site/templates/res/ui/General_Default_POI_External_Link.png');
}

.poi:hover .poi-external {
  background-image: url('/site/templates/res/ui/General_Hover_POI_External_Link.png');
}

.poi:active .poi-external {
  background-image: url('/site/templates/res/ui/General_Active_POI_External_Link.png');
}

.textblock {
  /* pointer-events: auto; */
  display       : flex;
  flex-direction: column;
  align-items   : flex-start;
}

.textblock>* {
  flex-shrink: 0;
}

.textblock>.scale {
  height        : 100%;
  display       : flex;
  flex-direction: column;
  align-items   : flex-start;
}

.textblock>.scale>* {
  flex-shrink: 0;
}

.stretch {
  align-self: stretch;
}

.service-info .footer {
  display        : flex;
  flex-direction : row;
  justify-content: space-around;
  align-items    : center;
}

.textblock .content {
  box-sizing : content-box;
  flex-shrink: 1;
  overflow-x : hidden;
  overflow-y : auto;
}

.textblock .content ul {
  margin-top: 0;
  margin-bottom: 2em;
}

.cta_l {
  width : 100%;
  height: 75px;
}

.cta_s {
  height: auto;
  width : auto;
  float : right;
}

.show .cta {
  pointer-events: all;
}

.textblock.show .tts {
  pointer-events: all;
}

.textblock .tts {
  position: absolute;
  right   : 5px;
  top     : 10px;
}

.textblock .tts.tts-solo {
  transform: translateY(calc(-100% - 20px));
}

.service-info .tts {
  pointer-events: all;
}

.quote h2 {
  display: none;
}

.pain-points {
  display        : flex;
  flex-direction : column;
  align-items    : stretch;
  justify-content: center;
}

.textblock.a_center {
  transform: translate(0, 0) scale(1, 1) translateY(-50%);
}

.textblock.a_bottom {
  transform: translate(0, 0) scale(1, 1) translateY(-100%);
}

/* Appear */

.fade-in- {
  visibility    : hidden;
  pointer-events: none;
  opacity       : 0;
}

/* Fade in */

.fade-in-1 {
  visibility    : hidden;
  pointer-events: none;
  opacity       : 0;
  transition    : transform ease-out 500ms, visibility ease-out 500ms, opacity ease-out 500ms;
}

/* Zoom in */

.fade-in-2 {
  visibility    : hidden;
  pointer-events: none;
  opacity       : 0;
  transform     : translate(0, 0) scale(0, 0);
  transition    : transform ease-out 500ms, visibility ease-out 500ms, opacity ease-out 500ms;
}

.fade-in-2.textblock.a_center {
  transform: translate(0, 0) scale(0, 0) translateY(-50%);
}

.fade-in-2.textblock.a_bottom {
  transform: translate(0, 0) scale(0, 0) translateY(-100%);
}

/* Fly in */

.fade-in-3 {
  visibility    : hidden;
  pointer-events: none;
  opacity       : 0;
  transform     : translate(0, -30px) scale(1, 1);
  transition    : transform ease-out 500ms, visibility ease-out 500ms, opacity ease-out 500ms;
}

.fade-in-3.textblock.a_center {
  transform: translate(0, -30px) scale(1, 1) translateY(-50%);
}

.fade-in-3.textblock.a_bottom {
  transform: translate(0, -30px) scale(1, 1) translateY(-100%);
}

.show {
  /* pointer-events: all; */
  visibility: visible;
  opacity   : 1;
  transform : translate(0, 0) scale(1, 1);
}

.show.textblock.a_center {
  transform: translate(0, 0) scale(1, 1) translateY(-50%);
}

.show.textblock.a_bottom {
  transform: translate(0, 0) scale(1, 1) translateY(-100%);
}

.services {
  display                 : grid;
  grid-template-columns   : 61.8% 38.2%;
  /* grid-template-columns: 50% 50%; */
  grid-template-rows      : 100%;
  height                  : 100%;
  width                   : 100%;
  overflow                : hidden;
}

.show .services .service-list p {
  pointer-events: all;
}

.references {
  height        : 100%;
  width         : 100%;
  overflow      : hidden;
  display       : flex;
  flex-direction: column;
}

.references .content {
  flex: 1;
}

.show .references p {
  pointer-events: all;
  cursor        : pointer;
}

.services .service-list,
.services .service-info {
  display       : flex;
  flex-direction: column;
}

.services .service-list h1,
.services .service-info h1 {
  flex-grow  : 0;
  flex-shrink: 0;
}

.services .service-info .content {
  flex-grow  : 0;
  flex-shrink: 1;
  overflow-y : auto;
  font-size  : 1.3em;
}

.textblock .service-info h1,
.textblock .service-info img {
  width     : 100%;
  margin    : 0;
  box-sizing: border-box;
}

.segments {
  width   : 100%;
  height  : 100%;
  overflow: hidden;
  display : grid;
}

.segments-2,
.segments-3,
.segments-4 {
  grid-template-columns: 1fr 1fr;
  gap                  : 8px;
}

.segments a {
  width              : 100%;
  height             : 100%;
  display            : inline-block;
  background-color   : black;
  background-image   : url('/site/templates/res/ui/General_Room_Link.png');
  background-position: center;
  background-repeat  : no-repeat;
  background-size    : 10em;
  pointer-events     : auto;
  overflow           : hidden;
}

.segments img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  transition: all 0.3s ease-in-out;
}

.segments img:hover {
  transform: scale(1.1);
  opacity  : 0.6;
}

/* MODAL */

/* The Modal (background) */
.modal {
  display         : none;
  position        : fixed;
  z-index         : 30;
  left            : 0;
  top             : 0;
  width           : 100%;
  height          : 100%;
  background-color: rgba(0, 0, 0, 0.4);
  flex-direction  : column;
  justify-content : center;
  align-items     : center;
}

.modal-content.default {
  border-image-source: url('/site/templates/res/ui/General_Popup_Background.png');
  border-image-slice : 44 51 fill;
  border-image-width : 44px 51px;
  border-image-repeat: stretch;
  border-image-outset: 0 51px;
  width              : 90%;
}

/* Modal Content */
.modal-content {
  padding   : 20px;
  max-width : 1200px;
  min-height: 200px;
  max-height: calc(100% - 200px);
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: visible;
  position  : relative;
}

/* The Close Button */
button.close {
  width: 44px;
  height: 44px;
  text-align: center;
  margin-right: -12px;
  position: sticky;
  top: 0.25em;
  color: #51b037;
  overflow: visible;
  font-size: 28px;
  float: right;
  font-weight: bold;
}

button.close:hover,
button.close:focus {
  color          : #000;
  text-decoration: none;
  cursor         : pointer;
}

body:not(.help) .help-note {
  visibility: hidden;
  opacity   : 0;
}

.help-note {
  opacity   : 1;
  padding   : 1em;
  color     : white;
  position  : fixed;
  background: #083624c7;
  border    : white solid 2px;
  max-width : 300px;
  transition: all 0.75s ease-in-out;
}

.overlay button.help-note {
  padding   : 1em;
  color     : white;
  background: #083624c7;
  border    : white solid 2px;
}

body.help .help-note.delay-1 {
  transition-delay: 0.4s;
}

body.help .help-note.delay-2 {
  transition-delay: 0.8s;
}

body.help .help-note.delay-3 {
  transition-delay: 1.2s;
}

body.help .help-note.delay-4 {
  transition-delay: 1.6s;
}

body.help .help-note.delay-5 {
  transition-delay: 2.0s;
}

#webviewer {
  pointer-events: auto;
  border: none;
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 1650px) {
  .poi-icon {
    width : 3.2em;
    height: 4.8em;
  }
}

@media only screen and (max-width: 1200px) {
  .poi-icon {
    width : 2em;
    height: 3em;
  }
}

@media screen and (max-height: 480px),
screen and (max-width: 820px) {
  .modal-content {
    padding   : 20px;
    max-width : 1200px;
    min-height: 200px;
    max-height: calc(100% - 50px);
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: visible;
    position  : relative;
  }
}