html, body {
  margin: 0;
  padding: 0;
  font-family: 'Karla', sans-serif;
  line-height: 1.3;
  background-color: #3f5846;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}


h1{
  margin: 64px auto;
  margin: 4rem auto;
  max-width: 1000px;
  padding: 0 20px;
  text-shadow: 0 2px 2px #2C4934;
}
h1 { font-size: 40px; }
@media(max-width: 740px){
  h1 { font-size: 26px;margin:0.5rem 1rem 1rem 1rem; }
}
@media(max-width: 568px){
  h1 { font-size: 22px;margin:0.5rem 1rem 1rem 1rem; }
}
@media(max-width: 414px){
  h1 { font-size: 26px;margin:2rem 1rem;  }
}
p.caption {
  font-size: 11.2px;
  font-size: 0.7rem;
  margin-bottom: 0;
  margin-top: 0;
}

iframe {
  display: block;
  border: none;
  margin-bottom: 0;
  padding: 0;
  border: 0;
  position: fixed;
  top:0;
  width:100% !important;
}
button, a{
  font-family: 'Karla', sans-serif;
  border:1px solid #F3F0D5;
  background-color:#F3F0D5;
  border-radius: 5px;
  font-size: 20px;
  color:#3f5846;
  padding: 10px 20px;
  cursor: pointer;
  outline: 0;
  margin-bottom: 10px;
  text-decoration: none;
  font-weight: 100;
}
button + button, a + a{
  margin-left: 10px;
}

button.filled{
  border-color: #3f5846;
  color: #F3F0D5;
  background-color: rgba(243, 240, 213, 0.3);
  text-shadow: 0 2px 2px rgba(0,0,0,0.2);
  background-color: #3f5846;
}
@media(max-width:400px){
  button, a{
    font-size: 16px;
  }
}
@media(max-width:320px){
  button, a{
    font-size: 15px;
  }
}
.vrview button{
  text-shadow: 0 2px 2px rgba(0,0,0,0.2);
}

.brand{
  position: absolute;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  top:20px;
  z-index: 90;
  color:#F3F0D5;
  font-size: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: transparent;
  border:0;
  padding: 0;
    margin: 0;
    width:100%;
}
.brand p{
  padding: 0;
    margin: 0 7px 0 0;
}
.brand-logo svg{
  fill:#F3F0D5;
  height:11px;
  width:auto;
}
.logo {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}
.logo svg{
  width: 200px;
  margin: 0 auto;
  fill: #F3F0D5;
  height: 61px;
}
@media(max-width:740px){
  .logo svg{
    margin-top: -10px;
    width: 140px;
    height: auto;
  }
}
.stage-end h1{
  margin: 4rem auto 1.5rem;
}
@media (max-width: 568px){
  .stage-end h1{
    margin: 0.5rem auto 0.5rem;
  }
}
 .spinner-screen{
   display: none;
 }
.loadet .spinner-screen{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 1;
  position: fixed;
  z-index: 9999999;
  width:100%;
  background-color: #3f5846;
  height:100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: 0.2s opacity ease;
  transition: 0.2s opacity ease;
}
.spinner-screen.remove{
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  opacity: 0;
}
.spinner-screen-group{
  color:#F3F0D5;
  font-size: 20px;
}
@media(max-width: 767px){
  .spinner-screen-group{
    font-size: 20px;
    line-height: 34px;
  }
}
.loadet .spinner-screen-item{
  position: absolute;
  top:calc(50% - 40px);
  left:20px;
  width:calc(100% - 80px);
  padding:0 20px 20px;
  will-change: transform;
  -webkit-animation-name: spin;
          animation-name: spin;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: steps();
          animation-timing-function: steps();
  opacity: 0;
  -webkit-transform: translateY(100px) scale(0.9);
          transform: translateY(100px) scale(0.9);
  text-align: center;
  max-width: 100%;
}
@media(max-width: 767px){
  .spinner-screen-item{
    text-align: left;
  }
}
.loadet .spinner-screen-item:nth-child(2){
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.loadet .spinner-screen-item:nth-child(3){
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}

@-webkit-keyframes spin {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  20% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
}

@keyframes spin {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  20% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
}

.loadet .spinner-screen-loader{
  content:"";
  width:100%;
  height:4px;
  background-color: #F3F0D5;
  position: fixed;
  top:0;
  left:0;
  -webkit-animation-name: loadBar;
          animation-name: loadBar;
  -webkit-animation-duration: 4.1s;
          animation-duration: 4.1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes loadBar {
  from{
    width:0;
  }
  to{
    width:100%;
  }
}
@keyframes loadBar {
  from{
    width:0;
  }
  to{
    width:100%;
  }
}

.spinner-screen-item span {
  -webkit-animation-name: dot;
          animation-name: dot;
  -webkit-animation-duration: 1.4s;
          animation-duration: 1.4s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.spinner-screen-item span:nth-child(2) {
  -webkit-animation-delay: .2s;
          animation-delay: .2s;
}

.spinner-screen-item span:nth-child(3) {
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
}

@-webkit-keyframes dot {
  0% {
    opacity: .2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: .2;
  }
}

@keyframes dot {
  0% {
    opacity: .2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: .2;
  }
}


.load-screen{
  display: none;
}
.load-screen.active{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 1;
  position: fixed;
  z-index: 9999999;
  width:100%;
  background-color: #fff;
  height:100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: 0.5s opacity ease;
  transition: 0.5s opacity ease;
}

.load-screen-group{
  color:#3f5846;
  font-size: 20px;
}
@media(max-width: 767px){
  .load-screen-group{
    font-size: 20px;
    line-height: 24px;
  }
}
.load-screen.active .load-screen-item{
  position: absolute;
  top:calc(50% - 40px);
  left:20px;
  width:calc(100% - 80px);
  padding:0 20px 20px;
  -webkit-animation-name: spin;
          animation-name: spin;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: steps();
          animation-timing-function: steps();
  opacity: 0;
  -webkit-transform: translateY(100px) scale(0.9);
          transform: translateY(100px) scale(0.9);
  text-align: center;
  max-width: 100%;
  text-shadow: 0 2px 2px rgba(0,0,0,0);
}
@media(max-width: 767px){
  .load-screen-item{
    text-align: left;
  }
}
.load-screen.active .load-screen-item:nth-child(2){
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.load-screen.active .load-screen-item:nth-child(3){
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}
.load-screen.active .load-screen-item:nth-child(4){
  -webkit-animation-delay: 4.2s;
          animation-delay: 4.2s;
}

@-webkit-keyframes loader {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  20% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
}

@keyframes loader {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  20% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
}

.load-screen.active .load-screen-loader{
  content:"";
  width:100%;
  height:4px;
  background-color: #3f5846;
  position: fixed;
  top:0;
  left:0;
  -webkit-animation-name: loadBar2;
          animation-name: loadBar2;
  -webkit-animation-duration: 5.5s;
          animation-duration: 5.5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes loadBar2 {
  from{
    width:0;
  }
  to{
    width:100%;
  }
}
@keyframes loadBar2 {
  from{
    width:0;
  }
  to{
    width:100%;
  }
}

.load-screen.active .load-screen-item span {
  -webkit-animation-name: loaddot;
          animation-name: loaddot;
  -webkit-animation-duration: 1.4s;
          animation-duration: 1.4s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.load-screen.active .load-screen-item span:nth-child(2) {
  -webkit-animation-delay: .2s;
          animation-delay: .2s;
}

.load-screen.active .load-screen-item span:nth-child(3) {
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
}

@-webkit-keyframes loaddot {
  0% {
    opacity: .2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: .2;
  }
}

@keyframes loaddot {
  0% {
    opacity: .2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: .2;
  }
}



.stage{
  display: none;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.stage.active{
  display: block;
}


.stage.active .scene{
  position: absolute;
  z-index: 90;
  width: 100%;
  text-align: center;
  font-size: 30px;
  color:#F3F0D5;
  top:50%;
}
.stage.active .scene-1{
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  -webkit-animation: sceneOne;
          animation: sceneOne;
  -webkit-animation-fill-mode:forwards;
          animation-fill-mode:forwards;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.stage-end.active .scene-1{
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  -webkit-animation: sceneTwo;
          animation: sceneTwo;
  -webkit-animation-fill-mode:forwards;
          animation-fill-mode:forwards;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes sceneOne {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  15% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
  }
  85% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
}
@keyframes sceneOne {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  15% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
  }
  85% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
}
.stage.active .scene-2{
  opacity: 0;
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
  -webkit-animation: sceneTwo;
          animation: sceneTwo;
  -webkit-animation-fill-mode:forwards;
          animation-fill-mode:forwards;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-delay: 5.9s;
          animation-delay: 5.9s;
}
@-webkit-keyframes sceneTwo {
  0% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes sceneTwo {
  0% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
.stage.active .scene-2 .enter{
  opacity: 0;
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
  -webkit-animation: sceneTwo, wiggle;
          animation: sceneTwo, wiggle;
  -webkit-animation-fill-mode:forwards, forwards;
          animation-fill-mode:forwards, forwards;
  -webkit-animation-iteration-count:1, infinite;
          animation-iteration-count:1, infinite;
  -webkit-animation-duration: 0.5s, 2.72s;
          animation-duration: 0.5s, 2.72s;
  -webkit-animation-delay: 6.8s, 7.2s;
          animation-delay: 6.8s, 7.2s;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

@-webkit-keyframes wiggle {
  0% { -webkit-transform:translate(0,0); transform:translate(0,0) }
  4.41177% { -webkit-transform:translate(5px,0); transform:translate(5px,0) }
  8.82353% { -webkit-transform:translate(0,0); transform:translate(0,0) }
  13.23529% { -webkit-transform:translate(5px,0); transform:translate(5px,0) }
  17.64706% { -webkit-transform:translate(0,0); transform:translate(0,0) }
  22.05882% { -webkit-transform:translate(5px,0); transform:translate(5px,0) }
  26.47059% { -webkit-transform:translate(0,0); transform:translate(0,0) }
  100% { -webkit-transform:translate(0,0); transform:translate(0,0) }
}

@keyframes wiggle {
  0% { -webkit-transform:translate(0,0); transform:translate(0,0) }
  4.41177% { -webkit-transform:translate(5px,0); transform:translate(5px,0) }
  8.82353% { -webkit-transform:translate(0,0); transform:translate(0,0) }
  13.23529% { -webkit-transform:translate(5px,0); transform:translate(5px,0) }
  17.64706% { -webkit-transform:translate(0,0); transform:translate(0,0) }
  22.05882% { -webkit-transform:translate(5px,0); transform:translate(5px,0) }
  26.47059% { -webkit-transform:translate(0,0); transform:translate(0,0) }
  100% { -webkit-transform:translate(0,0); transform:translate(0,0) }
}


.vrview-buttons{
  text-align: center;
  position: absolute;
  bottom:30px;
  width:100%;
}
.stage{
  position: absolute;
  height:100%;
  width:100%;
  top:0;
  left:0;
}
.video-bg {
   position: fixed;
   top: 0; right: 0; bottom: 0; left: 0;
   overflow: hidden;
   height: 100%;
 }
.video-bg > video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }
 /* 1. No object-fit support: */
 @media (min-aspect-ratio: 16/9) {
  .video-bg > video { height: 300%; top: -100%; }
 }
 @media (max-aspect-ratio: 16/9) {
  .video-bg > video { width: 300%; left: -100%; }
 }
 /* 2. If supporting object-fit, overriding (1): */
@supports (object-fit: cover) {
.video-bg > video {
   top: 0; left: 0;
   width: 100%; height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
 }
}
body.vjs-full-window .player_wrapper{
   position: static;
}
#videojs-panorama-player{
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}
.vjs-marker{
   white-space: normal;
   width: 100px;
   font-size: 2em;
}
.video-js .vjs-control-bar{
 background-color: transparent;
}
.video-js .vjs-play-control{
 display: none;
}
.video-js .vjs-progress-control{
 display: none;
}
.video-js .vjs-time-control{
 display: none;
}

.location{
 display: none;
}
.loadet .location{
  display: inline;
}

.location{
  -webkit-transform: translateY(-100%) translateX(-50%);
          transform: translateY(-100%) translateX(-50%);
  opacity: 0;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  position: fixed;
  z-index: 99999999;
  top:0;
  left:50%;
  border-radius:0 0 5px 5px;
  padding: 5px 20px;
  background-color: #F3F0D5;
}
@media(max-width:450px){
  .location{
    width:100%;
  }
}
.active.location{
  -webkit-transform: translateY(0) translateX(-50%);
          transform: translateY(0) translateX(-50%);
  opacity: 1;
}

.location-place{
  font-size: 17px;
  color: #000000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 100;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.location-place-icon{
  margin-right: 10px;
}
.location-place-icon svg{
  width: 17px;
  height:23px;
  fill:#3f5846;
}

.load-360{
  position: absolute;
  text-align: center;
  bottom:50px;
}
.load-360-svg{
  margin-bottom: 10px;
}
.load-360-text{
 color: #3f5846;
}