@charset "UTF-8";
.element-hidden, .js-hide,
.element-invisible {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important; }

ul, ol, .content ol,
.content ul,
.cke_editable ol,
.cke_editable ul {
  padding: 0;
  margin: 0;
  list-style: none; }


.group::after {
  clear: both;
  content: '';
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  visibility: hidden; }

.responsive-video,
.video-embed-field-responsive-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0 !important;
  overflow: hidden;
  display: block; }
  .responsive-video iframe, .video-embed-field-responsive-video iframe,
  .responsive-video object,
  .video-embed-field-responsive-video object,
  .responsive-video embed,
  .video-embed-field-responsive-video embed,
  .responsive-video .video-js,
  .video-embed-field-responsive-video .video-js {
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important; }

@font-face {
  font-family: 'font-icon';
  src: url("../f-icons/f-icons.eot");
  src: url("../f-icons/f-icons.eot?#iefix") format("embedded-opentype"), url("../f-icons/f-icons.woff") format("woff"), url("../f-icons/f-icons.ttf") format("truetype"), url("../f-icons/f-icons.svg#font-icons") format("svg");
  font-weight: normal;
  font-style: normal; }

[class*='font-icon']::before,
[class*='font-icon']::after {
  display: inline-block;
  font-family: 'font-icon';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 30px; }

.icon-search::before {
  content: '\e900'; }

.icon-zoom::before {
  content: '\e90d'; }

.icon-mail::before {
  content: '\e901'; }

.icon-phone::before {
  content: '\e903'; }

.icon-apple::before {
  content: '\e909'; }

.icon-paper::before {
  content: '\e90a'; }

.icon-round-arr::before {
  content: '\e90b'; }

.icon-warn::before {
  content: '\e90c'; }

.icon-cog-mgf::before {
  content: '\e905'; }

.icon-doc::before {
  content: '\e906'; }

.icon-heart::before {
  content: '\e907'; }

.icon-info::before {
  content: '\e908'; }

.icon-arrow-r::before {
  content: '';
  width: 10px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
  display: inline-block;
  -ms-transform-origin: center;
      transform-origin: center; }

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block; }

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden],
template {
  display: none; }

a {
  background-color: transparent; }

a:active,
a:hover {
  outline: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b,
strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

h1 {
  font-size: 2em;
  margin: .67em 0; }

mark {
  background: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -.5em; }

sub {
  bottom: -.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 1em 40px; }

hr {
  box-sizing: content-box;
  height: 0; }

pre {
  overflow: auto; }

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  margin: 0; }

button {
  overflow: visible; }

button,
select {
  text-transform: none; }

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled],
html input[disabled] {
  cursor: default; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

input {
  line-height: normal; }

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

input[type="search"] {
  box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: .35em .625em .75em; }

legend {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto; }

optgroup {
  font-weight: 700; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 20px; }

*,
::after,
::before {
  box-sizing: border-box; }

*::-ms-clear {
  display: none; }

*::-ms-reveal {
  display: none; }

::-webkit-input-placeholder {
  color: #5f5f5f; }

::-moz-placeholder {
  color: #5f5f5f; }

:-moz-placeholder {
  color: #5f5f5f; }

:-ms-input-placeholder {
  color: #5f5f5f; }

::selection {
  background: rgba(216, 108, 170, 0.2); }

html,
body {
  font-family: "Montserrat", sans-serif; }

html {
  font-family: sans-serif;
  min-height: 100vh; }

body {
  color: #000;
  background: #fff;
  height: auto;
  min-width: 320px;
  font-weight: 400;
  line-height: 1.14;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased; }
  body::before {
    opacity: 0;
    top: 0;
    left: 0;
    visibility: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(95, 95, 95, 0.8);
    transition: visibility .3s ease, opacity .3s ease;
    z-index: 10; }

.no-scroll {
  overflow: hidden; }

main {
  min-height: 100%; }

.active-menu {
  overflow: hidden; }
  .active-menu::before {
    opacity: 1;
    visibility: visible;
    z-index: 30; }

img {
  max-width: 100%;
  height: auto;
  display: inherit; }

figure {
  margin: 0 0 40px 0;
  text-align: center; }
  figure img {
    margin-bottom: 20px; }

figcaption {
  font-size: 0.6875rem;
  color: #5f5f5f;
  line-height: 2em; }

a {
  color: #d14e93;
  text-decoration: none;
  transition: color .3s ease; }
  a:hover {
    color: #d86caa; }

.ext .ext {
  display: none; }

iframe {
  max-width: 100%; }

.mobile #livechat-compact-container {
  max-width: 80px;
  -ms-transform: translate(0, 0) !important;
      transform: translate(0, 0) !important; }

hr, input[type=search] {
  box-sizing: content-box; }

.container {
  max-width: 1192px;
  padding: 0 20px;
  margin: auto; }

.ie .grid {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex: 1 1 auto; }

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  line-height: 1.1;
  margin-bottom: .85em;
  font-weight: 700;
  color: #d14e93;
  word-break: break-word; }

h1 {
  font-size: 2.0625rem;
  margin: 0 0 .75em;
  line-height: 1; }

h2 {
  font-size: 1.75rem;
  line-height: 1.2; }

h3 {
  font-size: 1.25rem;
  line-height: 1.2;
  margin-bottom: 1em; }

h4 {
  font-size: 1.125rem;
  margin-bottom: .75em; }

h5,
h6 {
  font-size: 0.9375rem;
  line-height: 1.13; }

p {
  line-height: 1.33;
  margin: 0 0 1em; }

.text-center {
  text-align: center; }

strong {
  font-weight: 600; }

.content ol,
.content ul,
.cke_editable ol,
.cke_editable ul {
  margin: 0 0 1.5em 20px;
  padding: 0; }
  .content ol li,
  .content ul li,
  .cke_editable ol li,
  .cke_editable ul li {
    margin-bottom: 1em;
    line-height: 1.2; }

.content ol,
.cke_editable ol {
  counter-reset: section;
  padding-left: 10px; }
  .content ol li::before,
  .cke_editable ol li::before {
    counter-increment: section;
    content: counter(section) ". ";
    margin-left: -15px; }

.content ul:last-child,
.cke_editable ul:last-child {
  margin-bottom: 0; }

.content ul li,
.cke_editable ul li {
  padding-left: 15px;
  position: relative; }
  .content ul li::before,
  .cke_editable ul li::before {
    content: ' ';
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    background: #5f5f5f; }

.content blockquote,
.cke_editable blockquote {
  font-weight: 700;
  position: relative;
  padding: 0 30px;
  display: inline-block;
  font-style: italic;
  margin: 20px auto;
  color: #d14e93; }
  .content blockquote::before, .content blockquote::after,
  .cke_editable blockquote::before,
  .cke_editable blockquote::after {
    font-size: 2.0625rem;
    content: '"';
    position: absolute; }
  .content blockquote::before,
  .cke_editable blockquote::before {
    left: 0;
    top: 0; }
  .content blockquote p,
  .cke_editable blockquote p {
    font-size: 1.625rem;
    line-height: 1.2;
    display: inline;
    margin: 0;
    font-family: inherit; }

.low-margin-bottom {
  margin-bottom: 5px; }

.rtecenter,
.text-center,
.figure {
  text-align: center; }

.rteright {
  text-align: right; }

.rtejustify {
  text-align: justify; }

table {
  margin: 3.1em 0 2em;
  text-align: left;
  border: 0;
  color: #5f5f5f;
  width: 100%; }
  table caption {
    margin-bottom: 10px;
    text-align: left;
    padding-left: 20px;
    font-size: 15px;
    color: #5f5f5f; }
  table tr:nth-child(even) {
    background: rgba(95, 95, 95, 0.25); }
  table tr td {
    border-bottom: 1px solid #5f5f5f; }
  table td {
    border: 0;
    padding: 20px; }
    table td h1:last-child,
    table td h2:last-child,
    table td h3:last-child,
    table td h4:last-child,
    table td h5:last-child,
    table td h6:last-child,
    table td p:last-child {
      margin-bottom: 0; }
  .gray-bg table tr:last-child td {
    border: none; }

.table-wrapper {
  overflow-x: auto;
  margin-top: 3.1em;
  position: relative;
  background: radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 100% 0;
  background-color: white;
  background-repeat: no-repeat;
  background-size: 10px 100%;
  margin-bottom: 15px; }
  .table-wrapper table {
    min-width: 640px;
    background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)), linear-gradient(to left, white 30%, rgba(255, 255, 255, 0)) 100% 0;
    background-size: 50px 100%;
    background-repeat: no-repeat;
    max-width: none;
    margin-bottom: 0;
    margin-top: 0;
    width: 100% !important; }

th {
  background: #d14e93;
  color: #fff;
  padding: 20px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5); }

thead th {
  border-right: 1px solid rgba(255, 255, 255, 0.5); }
  thead th:last-child {
    border-right: 0; }

.splash-page {
  width: 100%; }

.spalshbg {
  background: #71e8ff;
  height: 100vh;
  display: -ms-flexbox;
  display: flex; }
  .spalshbg .header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-flow: column;
        flex-flow: column;
    width: 100%;
    max-width: 1350px;
    margin: 0 auto; }
    .spalshbg .header .tagline {
      margin-left: auto;
      margin-right: 20%; }
      .spalshbg .header .tagline h2 {
        font-family: "Montserrat", sans-serif;
        font-size: 4.0625rem;
        color: #fff;
        font-weight: 400;
        margin: 0; }
    .spalshbg .header .logo {
      display: -ms-flexbox;
      display: flex;
      width: 814px;
      position: relative;
      margin: -65px auto 0;
      animation: fadeIn ease 5s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards; }
      .spalshbg .header .logo img {
        width: 100%; }
    .spalshbg .header .start-button {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
          justify-content: center;
      width: 100px;
      margin: 0 auto; }
      .spalshbg .header .start-button a {
        color: #fff;
        font-size: 1.875rem;
        font-weight: 500;
        padding: 0 5px;
        position: relative;
        z-index: 1;
        text-decoration: none;
        /* &:after {
           content: '';
           height: 10px;
           position: absolute;
           width: auto;
           background: #554267;
           bottom: 4px;
           z-index: -1;
           left: 0;
           right: 0;
           margin: auto;
         }*/ }
    .spalshbg .header .cloud-wrapper {
      display: -ms-flexbox;
      display: flex; }
      .spalshbg .header .cloud-wrapper.start {
        -ms-flex-pack: start;
            justify-content: flex-start;
        position: relative;
        animation: linear;
        animation-name: leftanimation;
        animation-duration: 3s; }
      .spalshbg .header .cloud-wrapper.end {
        -ms-flex-pack: end;
            justify-content: flex-end;
        animation: linear;
        animation-name: rightanimation;
        animation-duration: 3s; }
      .spalshbg .header .cloud-wrapper .clouds {
        background: url(../img/cloud.png) no-repeat;
        width: 139px;
        height: 53px;
        background-size: 100%; }

.clouds:hover {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  perspective: 1000px; }

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0); }
  20%,
  80% {
    transform: translate3d(2px, 0, 0); }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0); }
  40%,
  60% {
    transform: translate3d(4px, 0, 0); } }

@keyframes leftanimation {
  0% {
    margin-left: -200px; }
  50% {
    margin-left: -100px; }
  75% {
    margin-left: -50px; }
  100% {
    margin-left: 0; } }

@keyframes rightanimation {
  0% {
    margin-right: -200px; }
  50% {
    margin-right: -100px; }
  75% {
    margin-right: -50px; }
  100% {
    margin-right: 0; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes bounce-2 {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(-30px); }
  100% {
    transform: translateY(0); } }

#preloader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1a1a1a;
  z-index: 999999;
  position: fixed;
  background-image: url(../img/load.gif);
  background-repeat: no-repeat;
  background-position: center; }

.guest-page {
  background: #73bed7; }
  .guest-page .guestpage .container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    height: 100vh;
    overflow: hidden;
    max-width: 1920px; }
  .guest-page .guestpage .character-column {
    display: -ms-flexbox;
    display: flex;
    position: relative; }
  .guest-page .guestpage .star {
    position: absolute;
    left: -75%;
    top: -29%; }
  .guest-page .guestpage .guest-info {
    width: 50%;
    font-family: 'Jost', sans-serif;
    margin-left: 5%; }
    .guest-page .guestpage .guest-info h3 {
      font-size: 50px;
      font-weight: 400;
      color: #554267;
      text-transform: uppercase; }
    .guest-page .guestpage .guest-info label {
      font-size: 50px;
      font-weight: 400;
      color: #554267;
      text-transform: uppercase; }
    .guest-page .guestpage .guest-info input {
      -webkit-appearance: none;
      background: transparent;
      box-shadow: none;
      border: 0;
      border-bottom: 6px dashed #554267;
      margin-left: 20px;
      width: 30%;
      font-size: 50px;
      text-transform: uppercase;
      outline: 0;
      color: #554267; }

.cha {
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 200px;
  width: 100%;
  background-image: url(../img/walkcycle.png);
  background-repeat: no-repeat;
  background-position: 0 50%; }

body {
  /* background: url('../img/bg.jpg') repeat-x center; */
  background: #71e8ff;
  width: 100%;
  background-attachment: fixed;
  background-size: cover; }

.logo {
  width: 170px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 115;
  margin: 10px; }

.mainscreen {
  max-width: 1920px;
  margin: 0 auto;
  background: url("../img/bg.jpg") repeat-x center; }
  .mainscreen .main {
    max-width: 1900px;
    padding: 0; }
  .mainscreen .screenplay {
    max-width: 1900px;
    display: -ms-flexbox;
    display: flex;
    bottom: 0;
    -ms-flex-pack: justify;
        justify-content: space-between;
    position: fixed;
    width: 100%;
    margin: 0 auto;
    padding: 0 25px 0 170px; }
    .mainscreen .screenplay .character {
      width: 250px;
      z-index: 111;
      margin-bottom: 40px;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: end;
          align-items: flex-end; }
    .mainscreen .screenplay .building {
      width: 1600px;
      margin-bottom: -10px;
      position: relative;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: end;
      align-items: flex-end; }
      .mainscreen .screenplay .building .character-stairs {
        position: absolute;
        background-image: url("../img/stair_2.png");
        height: 187px;
        width: 124px;
        z-index: 11;
        left: 41%; }
        .mainscreen .screenplay .building .character-stairs.reverse {
          -ms-transform: scaleY(-1);
              transform: scaleY(-1); }
  .mainscreen .bottom-bg {
    width: 100%;
    bottom: 0;
    background: url(../img/2-wall-road-pole.webp) no-repeat bottom;
    height: 100%;
    position: fixed;
    left: 0;
    z-index: -1;
    background-size: 100% 791px; }
  .mainscreen .bubble-wrapper {
    position: relative;
    width: 100%; }
    .mainscreen .bubble-wrapper img.thought {
      width: 499px;
      max-width: none;
      position: absolute;
      left: 161px;
      top: -127px; }

.cc {
  position: absolute;
  width: calc(100% - 976px);
  height: 187px;
  bottom: 0;
  left: 100px; }

.character-1 {
  position: absolute;
  background-image: url("../img/walk.png");
  height: 187px;
  width: 124px;
  z-index: 11;
  bottom: 31px; }
  .character-1.reverse {
    background-image: url("../img/walk-r-l.webp"); }

.ground-floor {
  width: 1920px;
  position: relative;
  margin: 0 auto; }

.colorbox {
  position: fixed;
  max-width: 90%;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: #3dc295;
  top: 50%;
  -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  z-index: 115;
  border-bottom-left-radius: 45px;
  border-bottom-right-radius: 45px;
  animation: fadeIn ease 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  display: none; }
  .colorbox.wild {
    max-width: 90%; }
  .colorbox.green {
    background: #73bed7; }
    .colorbox.green:after {
      background: #b9edff; }
  .colorbox.yellow {
    background: #ff9930; }
    .colorbox.yellow:after {
      background: #ffd5aa; }
  .colorbox.fadeout {
    animation: fadeOut ease 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards; }
  .colorbox:after {
    content: '';
    height: 50px;
    background: #15774c;
    content: '';
    top: 0;
    width: 100%;
    position: absolute;
    left: 0; }
  .colorbox .box-container {
    text-align: left;
    color: #fff;
    padding: 50px 70px;
    font-weight: 600;
    height: auto;
    z-index: 116;
    overflow-y: scroll; }
    .colorbox .box-container hr {
      border-top: 0px;
      color: #f9f3ea !important;
      margin: 0 0 20px 0;
      background: none !important; }
    .colorbox .box-container.maxheight {
      height: 80vh;
      overflow-y: scroll;
      z-index: 116; }
    .colorbox .box-container.left p {
      text-align: left; }
    .colorbox .box-container h2 {
      font-size: 60px;
      color: #f9f3ea;
      text-transform: uppercase;
      margin: 30px 0 15px;
      font-family: 'Francois One', sans-serif;
      font-weight: 900; }
    .colorbox .box-container p, .colorbox .box-container a {
      font-size: 18px;
      font-weight: 500;
      color: #f9f3ea; }
    .colorbox .box-container a {
      color: #15774c;
      text-decoration: none; }
      .colorbox .box-container a:hover {
        color: #f9f3ea; }
    .colorbox .box-container a.continue-btn {
      color: #fff;
      font-size: 18px;
      text-transform: uppercase;
      display: block;
      font-weight: 700;
      text-align: center;
      width: 240px;
      margin-top: 40px;
      background: #15774c;
      margin: 0 auto;
      padding: 5px 2px; }
      .colorbox .box-container a.continue-btn:hover {
        background: #f9f3ea;
        color: #15774c;
        transition: all 1s; }

#Scene {
  position: fixed;
  width: 1920px;
  height: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: url("../img/bg.png") bottom top; }

.character-stairs {
  position: absolute;
  background-image: url("../img/stair_2.png");
  height: 187px;
  width: 124px;
  z-index: 11;
  left: 50%; }
  .character-stairs.tired {
    background-image: url(../img/idle.png) !important;
    width: 104px !important;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: unset !important;
    left: 42% !important; }
    .character-stairs.tired.reverse {
      -ms-transform: none;
          transform: none; }
  .character-stairs.reverse {
    -ms-transform: scaleY(-1);
        transform: scaleY(-1); }

.parallax-layer1 {
  position: absolute;
  height: 800px;
  background-repeat: no-repeat; }

#bg1 {
  background: url("../img/2-first-floor-new.webp") left bottom;
  width: 6786px;
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 751px; }
  #bg1 .railings {
    position: absolute;
    left: 3667px;
    z-index: 114;
    bottom: -41px; }
  #bg1 .nav.first {
    left: 3426px;
    top: 268px; }
  #bg1 .nav.second {
    left: 2916px;
    top: 253px; }
  #bg1 .nav.third {
    left: 2028px;
    top: 318px; }
  #bg1 .text-format.one {
    left: 3426px;
    top: 268px;
    width: 185px; }
  #bg1 .text-format.two {
    left: 2916px;
    top: 253px;
    width: 189px; }
  #bg1 .text-format.three {
    left: 1854px;
    top: 318px;
    width: 190px; }

#bg2 {
  background: url("../img/1-ground-floor-new.webp") bottom left;
  width: 6786px;
  /* these images are big… but worth it. */
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 0; }
  #bg2 .nav.first {
    left: 1970px;
    top: 376px; }
  #bg2 .nav.second {
    left: 2271px;
    top: 294px; }
  #bg2 .nav.third {
    left: 3026px;
    top: 412px; }
  #bg2 .text-format.one {
    left: 1970px;
    top: 376px;
    width: 121px; }
  #bg2 .text-format.two {
    left: 2271px;
    top: 294px;
    width: 100px; }
  #bg2 .text-format.three {
    left: 3026px;
    top: 412px;
    width: 126px; }

#tree {
  background: url("../img/tree-1.png") left bottom;
  width: 1684px;
  /* these images are big… but worth it. */
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 0;
  background-attachment: fixed; }

.character-11 {
  position: absolute;
  background-image: url("../img/0-walk-right.webp");
  width: 338px;
  height: 507px;
  left: 776px;
  z-index: 11;
  bottom: 81px; }

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Black background with opacity */
  z-index: 112;
  pointer-events: none;
  /* Add a pointer on hover */ }

.character-main {
  position: absolute;
  background-image: url("../img/1-walk-right.png");
  width: 338px;
  height: 507px;
  left: 776px;
  z-index: 11;
  bottom: 81px; }
  .character-main.reverse {
    background-image: url("../img/1-walk-left.webp"); }
  .character-main.tired-bg {
    /*transform: none !important;*/ }

.character-stairs-main {
  position: absolute;
  background-image: url("../img/stairs.png");
  width: 338px;
  height: 507px;
  z-index: 11;
  bottom: 81px;
  right: 761px; }
  .character-stairs-main.reverse {
    -ms-transform: scaleX(-1);
        transform: scaleX(-1); }
  .character-stairs-main.tired-bg {
    background-image: url("../img/idle.png");
    transition: background-image 1s; }

#bg3 {
  background: url("../img/3-second-floor.webp") bottom left;
  width: 6786px;
  /* these images are big… but worth it. */
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 1449px; }
  #bg3 .railings {
    position: absolute;
    left: 1169px;
    z-index: 114;
    width: 513px;
    bottom: -1px; }
  #bg3 .character-team {
    position: absolute;
    left: 995px;
    z-index: 135;
    top: -74px; }

#bg4 {
  background: url("../img/3-second-floor-new.webp") bottom left;
  width: 6786px;
  /* these images are big… but worth it. */
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 1498px; }
  #bg4 .railings {
    position: absolute;
    left: 1314px;
    z-index: 114;
    width: 508px;
    bottom: -68px; }
  #bg4 .nav.first,
  #bg4 .hreflink.first {
    left: 1946px;
    top: 296px; }
  #bg4 .nav.second,
  #bg4 .hreflink.second {
    left: 3202px;
    top: 344px; }
  #bg4 .text-format.one {
    left: 1946px;
    top: 296px;
    width: 100px; }
  #bg4 .text-format.two {
    left: 3202px;
    top: 344px;
    width: 150px; }

#bg6 {
  width: 6786px;
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 2245px;
  position: relative;
  height: 1000px; }

#bg5 {
  background: url("../img/4-third-floor-newest.webp") bottom left;
  width: 6786px;
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 2245px; }
  #bg5 .railings {
    position: absolute;
    left: 3576px;
    z-index: 114;
    width: 577px;
    bottom: -40px; }
  #bg5 .nav.first {
    left: 1428px;
    top: 461px; }
  #bg5 .text-format.one {
    left: 1428px;
    top: 461px;
    width: 140px; }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes blinker {
  from {
    transform: scale(1); }
  to {
    transform: scale(1.6); } }

.overflow {
  overflow: hidden; }

.nav,
.hreflink {
  border: 2px solid #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  position: absolute;
  animation: blinker .7s infinite alternate;
  z-index: 111;
  cursor: pointer; }
  .nav:after,
  .hreflink:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #fff;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
  .nav:before,
  .hreflink:before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #fff;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    -ms-transform: translateY(-50%);
        transform: translateY(-50%); }

.three-column {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center; }

.three-column > .view-row {
  -ms-flex: 1 1 30%;
      flex: 1 1 30%;
  /*grow | shrink | basis */
  padding: 10px;
  margin-bottom: 10px; }
  .three-column > .view-row a {
    color: #fff; }

.cross {
  position: absolute;
  width: 40px;
  height: 40px;
  color: #fff;
  right: 0;
  z-index: 2;
  font-weight: bold;
  top: 7px;
  right: 6px;
  cursor: pointer;
  font-size: 35px; }
  .cross:hover {
    color: #3dc295;
    transition: all 1s; }

.cloud-container .cloud {
  background: url(../img/cloud.png) no-repeat;
  display: block;
  position: absolute;
  z-index: 99999; }
  .cloud-container .cloud.cloud1 {
    width: 104px;
    height: 53px;
    background-size: 100%;
    bottom: 685px;
    right: 300px; }
  .cloud-container .cloud.cloud2 {
    width: 139px;
    height: 53px;
    bottom: 500px;
    right: 28px;
    background-size: 100%;
    -ms-transform: scaleX(-1);
        transform: scaleX(-1); }
  .cloud-container .cloud.cloud3 {
    width: 90px;
    height: 53px;
    bottom: 481px;
    right: 877px;
    background-size: 100%; }
  .cloud-container .cloud.cloud4 {
    width: 70px;
    height: 53px;
    bottom: 629px;
    right: 1023px;
    background-size: 100%; }

.team-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column; }
  .team-wrapper .team-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    border-bottom: 1px solid #fff;
    padding: 10px 0; }
    .team-wrapper .team-row .team-info {
      padding: 05px 10px; }
    .team-wrapper .team-row .team-dp {
      -ms-flex: none;
          flex: none;
      width: 100px; }
    .team-wrapper .team-row p {
      text-align: left; }
    .team-wrapper .team-row:last-child {
      border: none; }

.lamppost {
  position: absolute;
  left: 966px;
  width: 198px;
  z-index: 105;
  top: -283px; }

.tree-part {
  position: absolute;
  right: 2245px;
  width: 508px;
  z-index: 0;
  top: -282px; }

.cloud-container-1 .cloud {
  background: url(../img/cloud.png) no-repeat;
  display: block;
  position: absolute;
  z-index: 1; }
  .cloud-container-1 .cloud.cloud1 {
    width: 200px;
    height: 100px;
    background-size: 100%;
    bottom: 639px;
    left: 1000px; }
  .cloud-container-1 .cloud.cloud2 {
    width: 150px;
    height: 100px;
    background-size: 100%;
    bottom: 639px;
    right: 3200px; }
  .cloud-container-1 .cloud.cloud3 {
    width: 200px;
    height: 100px;
    background-size: 100%;
    bottom: 439px;
    right: 2400px; }
  .cloud-container-1 .cloud.cloud4 {
    width: 100px;
    height: 53px;
    background-size: 100%;
    bottom: 539px;
    left: 1600px; }

.characters-wrapper {
  position: relative; }
  .characters-wrapper .character-one {
    position: absolute;
    left: 2160px;
    width: 155px;
    top: 296px;
    z-index: 11; }
  .characters-wrapper .character-two {
    position: absolute;
    left: 2021px;
    width: 229px;
    top: 332px;
    z-index: 115; }
  .characters-wrapper .character-three {
    position: absolute;
    left: 2272px;
    width: 229px;
    top: 306px;
    z-index: 115; }

.text-format {
  position: absolute;
  display: block;
  height: 30px;
  z-index: 111;
  cursor: pointer; }

@media only screen and (min-width: 680px) {
    figure {
      text-align: inherit; }
  .grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(auto, 1fr))[4];
        grid-template-columns: repeat(4, minmax(auto, 1fr));
    grid-gap: 24px; } }

@media only screen and (min-width: 768px) {
    h1 {
      font-size: 2.375rem; }
    h2 {
      font-size: 2rem; }
    .table-wrapper {
      border: 0;
      background: transparent; }
      .table-wrapper table {
        background: none; } }

@media only screen and (min-width: 1025px) {
    body::before {
      display: none; }
    .active-menu {
      overflow-y: auto; } }

@media screen and (min-width: 1200px) and (max-width: 1600px) {
    .cc {
      width: calc(100% - 878px); } }

@media only screen and (max-width: 479px) {
      .spalshbg .header {
        max-width: 320px; }
          .spalshbg .header .tagline h2 {
            font-size: 1rem; }
        .spalshbg .header .logo {
          margin: -15px auto 0;
          width: 70%; }
          .spalshbg .header .cloud-wrapper.start {
            margin-bottom: 20px; }
          .spalshbg .header .cloud-wrapper.end {
            margin-bottom: 10px; } }

@media only screen and (max-width: 767px) {
  .container-fluid {
    padding: 0 15px; }
      .spalshbg .header {
        max-width: 479px; }
        .spalshbg .header .tagline {
          margin-right: 23%; }
          .spalshbg .header .tagline h2 {
            font-size: 1.5rem; }
        .spalshbg .header .logo {
          width: 70%;
          margin-top: -25px; }
          .spalshbg .header .cloud-wrapper.start {
            margin-bottom: 40px; }
          .spalshbg .header .cloud-wrapper .clouds {
            width: 100px;
            height: 38px; } }

@media only screen and (max-device-width: 768px) {
      .mainscreen .screenplay {
        width: 5000px; }
        .mainscreen .screenplay .building {
          margin-right: 350px; }
    .cc {
      width: calc(100% - 1181px); }
    .colorbox {
      max-width: 30%;
      -ms-transform: none;
          transform: none;
      top: unset; }
      .colorbox.wild {
        max-width: 30%; }
        .colorbox .box-container.maxheight {
          height: 700px; }
    #Scene {
      -ms-transform: scale(1.5);
          transform: scale(1.5);
      -ms-transform-origin: right bottom;
          transform-origin: right bottom;
      transition: all 1.5s; }
    #bg2 .colorbox {
      margin-top: -10%; } }

@media only screen and (max-width: 1600px) {
        .mainscreen .screenplay .character {
          width: 200px; }
          .mainscreen .screenplay .building .character-stairs {
            left: 40.5%; }
        .mainscreen .bubble-wrapper img.thought {
          width: 312px;
          left: 120px;
          top: -91px; }
    .character-stairs {
      left: 48.5%; } }

@media screen and (min-device-width: 320px) and (max-device-width: 768px) {
        .mainscreen .bubble-wrapper img.thought {
          left: 142px;
          top: -91px; } }

@media only screen and (max-device-width: 1600px) {
      .character-stairs.tired {
        background-position: bottom !important; } }

@media only screen and (max-width: 1023px) {
      .guest-page .guestpage .container {
        display: block;
        height: auto; }
      .guest-page .guestpage .character-column .character {
        max-width: none;
        width: 100%; }
      .guest-page .guestpage .star {
        left: -35%;
        top: -8%;
        width: 60%; }
      .guest-page .guestpage .guest-info {
        width: 100%;
        margin: 20px auto; }
        .guest-page .guestpage .guest-info h3 {
          font-size: 2.25rem; }
        .guest-page .guestpage .guest-info label {
          font-size: 2.25rem; }
        .guest-page .guestpage .guest-info input {
          font-size: 36px;
          width: 100%;
          margin: 0; } }

/*# sourceMappingURL=main.css.map */