@-webkit-keyframes fadeout {
  0% {
    opacity: 1; }
  99% {
    opacity: 0; }
  100% {
    opacity: 0;
    display: none;
    pointer-events: none; } }

@keyframes fadeout {
  0% {
    opacity: 1; }
  99% {
    opacity: 0; }
  100% {
    opacity: 0;
    display: none;
    pointer-events: none; } }

@-webkit-keyframes nbounce {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  5% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px); }
  15% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); } }

@keyframes nbounce {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  5% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px); }
  15% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); } }

@-webkit-keyframes bounce {
  0%, 50% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  55% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px); }
  65% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); } }

@keyframes bounce {
  0%, 50% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  55% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px); }
  65% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); } }

body {
  margin: 0;
  padding: 0;
  font-family: "brandon-grotesque", "Arial", sans-serif;
  font-size: 24px;
  line-height: 26px;
  font-weight: 300; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; }

micrio {
  width: 100%;
  height: 100%; }

h1, h2, h3, h4 {
  font-family: "brandon-grotesque", "Arial", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0;
  padding: 0; }

p {
  margin: 0;
  padding: 0; }

a {
  text-decoration: none; }

.button {
  height: 45px;
  line-height: 46px;
  text-transform: uppercase;
  padding: 0px 20px;
  background: #fff;
  color: #000;
  display: inline-block;
  font-weight: 500;
  font-size: 18px; }

.marker-panel {
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100vh;
  background: #fff;
  display: none;
  overflow: hidden;
  transition: -webkit-transform 300ms ease-out;
  transition: transform 300ms ease-out;
  transition: transform 300ms ease-out, -webkit-transform 300ms ease-out;
  -webkit-transform: translateX(100%);
          transform: translateX(100%); }
  @media all and (max-width: 529px) {
    .marker-panel {
      width: 100%; } }
  .marker-panel .panel-closer {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer; }
    .marker-panel .panel-closer svg g {
      fill: #000; }
  .marker-panel .inner-panel {
    height: 100%;
    padding-bottom: 80px;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; }
    .marker-panel .inner-panel > *:first-child:last-child {
      min-height: 101%; }
  .marker-panel.visible {
    display: block;
    -webkit-transform: translateX(0%);
            transform: translateX(0%); }
  .marker-panel article {
    padding: 40px; }
    @media all and (max-width: 529px) {
      .marker-panel article {
        padding: 40px 20px 20px 20px; } }
    .marker-panel article h3 {
      font-size: 42px;
      line-height: 40px;
      text-transform: uppercase;
      font-family: "brandon-grotesque", "Arial", sans-serif;
      margin-bottom: 10px; }
      @media all and (max-width: 529px) {
        .marker-panel article h3 {
          font-size: 34px;
          line-height: 36px; } }
    .marker-panel article img {
      width: 100% !important;
      height: auto !important;
      margin-bottom: 10px; }
    .marker-panel article .html {
      width: 100%;
      padding-bottom: 56.25%;
      position: relative;
      margin-bottom: 10px; }
      .marker-panel article .html iframe {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%; }
    .marker-panel article p, .marker-panel article .body {
      font-size: 24px;
      line-height: 26px; }

.swiper-container {
  height: 100%; }
  .swiper-container .micrio-container a.logo {
    display: none; }
  .swiper-container .micrio-container .marker-container .marker {
    background: transparent;
    border-radius: 0 !important;
    border-width: 2px !important;
    -webkit-transform: translate3D(0, 0, 0);
            transform: translate3D(0, 0, 0);
    box-shadow: none; }
  .swiper-container .micrio-container .marker-container:hover .marker, .swiper-container .micrio-container .marker-container.opened .marker {
    background: #fff !important;
    border-radius: 0 !important;
    -webkit-transform: translate3D(0, 0, 0);
            transform: translate3D(0, 0, 0);
    box-shadow: none !important; }
  .swiper-container .micrio-container .marker-container .marker-title {
    top: 0;
    left: 40px;
    text-transform: uppercase;
    font-family: "brandon-grotesque", "Arial", sans-serif;
    font-size: 32px;
    line-height: 32px;
    width: 300px;
    text-align: left;
    opacity: 1;
    -webkit-transform: translate3D(0, 0, 0);
            transform: translate3D(0, 0, 0);
    text-shadow: none; }
    @media all and (max-width: 529px) {
      .swiper-container .micrio-container .marker-container .marker-title {
        font-size: 24px;
        line-height: 26px;
        max-width: 240px; } }
  .swiper-container .micrio-container .marker-popup {
    display: none; }
    .swiper-container .micrio-container .marker-popup .micrio-icon.close {
      display: none; }
  .swiper-container .swiper-slide .video-container {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    background: #000;
    overflow: hidden; }
    .swiper-container .swiper-slide .video-container video {
      /* Make video to at least 100% wide and tall */
      min-width: 100%;
      min-height: 100%;
      /* Setting width & height to auto prevents the browser from stretching or squishing the video */
      width: auto;
      height: auto;
      /* Center the video */
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      opacity: 0;
      transition: 1s opacity .6s ease-out; }
    .micrio-active .swiper-container .swiper-slide .video-container {
      -webkit-animation: fadeout .5s;
              animation: fadeout .5s;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards;
      -webkit-animation-delay: .5s;
              animation-delay: .5s;
      pointer-events: none; }
  .swiper-container .swiper-slide.swiper-slide-active .video-container video {
    opacity: 1; }
  .swiper-container .swiper-slide .content-outer {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent; }
    .micrio-active .swiper-container .swiper-slide .content-outer {
      -webkit-animation: fadeout .5s;
              animation: fadeout .5s;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards;
      pointer-events: none; }
  .swiper-container .swiper-slide .content-container {
    padding-left: 7.9%;
    padding-top: 16.6vh; }
    @media all and (max-height: 520px) {
      .swiper-container .swiper-slide .content-container {
        padding-top: 5vh; } }
    @media all and (max-height: 680px) {
      .swiper-container .swiper-slide .content-container {
        padding-top: 8vh; } }
    @media all and (max-width: 529px) {
      .swiper-container .swiper-slide .content-container {
        padding-top: 8vh;
        padding-right: 7%;
        padding-left: 7%; } }
    .swiper-container .swiper-slide .content-container .header {
      color: #fff;
      margin-bottom: 120px; }
      .swiper-container .swiper-slide .content-container .header span {
        font-family: "brandon-grotesque", "Arial", sans-serif;
        font-size: 36px;
        line-height: 36px;
        display: block;
        margin-bottom: 6px; }
        @media all and (max-width: 529px) {
          .swiper-container .swiper-slide .content-container .header span {
            font-size: 28px; } }
      .swiper-container .swiper-slide .content-container .header h1 {
        font-size: 84px;
        line-height: 72px;
        margin-bottom: 10px;
        margin-left: -4px; }
        @media all and (max-width: 1024px) {
          .swiper-container .swiper-slide .content-container .header h1 {
            font-size: 48px;
            line-height: 52px; } }
        @media all and (max-width: 529px) {
          .swiper-container .swiper-slide .content-container .header h1 {
            font-size: 34px;
            line-height: 36px; } }
      @media all and (max-height: 680px) {
        .swiper-container .swiper-slide .content-container .header {
          margin-bottom: 40px; } }
      @media all and (max-width: 529px) {
        .swiper-container .swiper-slide .content-container .header {
          margin-bottom: 40px; } }
    .swiper-container .swiper-slide .content-container p {
      margin-bottom: 35px;
      max-width: 580px;
      color: #fff; }
      @media all and (max-width: 529px) {
        .swiper-container .swiper-slide .content-container p {
          width: 100%; } }
  .swiper-container .swiper-slide .swiper-button {
    display: inline-block;
    width: 30px;
    height: 30px;
    cursor: pointer; }
    .swiper-container .swiper-slide .swiper-button.swiper-prev-button {
      -webkit-animation: nbounce 8s infinite;
              animation: nbounce 8s infinite;
      background: url("/360tour/icons/pijl links.svg") no-repeat;
      margin-right: 10px; }
    .swiper-container .swiper-slide .swiper-button.swiper-next-button {
      -webkit-animation: bounce 8s infinite;
              animation: bounce 8s infinite;
      background: url("/360tour/icons/pijl rechts.svg") no-repeat; }
  .swiper-container .micrio-closer {
    display: none;
    position: absolute;
    z-index: 999;
    top: 20px;
    left: 20px;
    color: #fff;
    width: 30px;
    height: 30px;
    background: url("/360tour/icons/close.svg") 50% 50% no-repeat;
    cursor: pointer; }
    .micrio-visible .swiper-container .micrio-closer {
      display: block; }
    .micrio-active .swiper-container .micrio-closer {
      display: block; }

.micrio-container > .controls {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0); }

.micrio-container button.micrio-icon.play-main {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='64px' height='64px' viewBox='0 0 64 64' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='app' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='gebouwspecial' transform='translate(-108.000000, -58.000000)'%3E%3Cg id='playicon' transform='translate(108.000000, 58.000000)'%3E%3Ccircle id='Oval' fill='%23FFFFFF' cx='32' cy='32' r='32'%3E%3C/circle%3E%3Cpolygon id='Line' fill='%23000000' points='24 18 24 47 45 32.5'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 64px 64px; }