body > .title {
  xdisplay: none;
  -webkit-transition: opacity 5s ease;
  transition: opacity 5s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  xz-index: 10;
  background: #be0c15 none center center no-repeat;
  background-size: contain;
}
body > .title.fade-out {
  opacity: 0;
  pointer-events: none;
}
.class-top {
  z-index: 8;
}
.class-hide {
  display: none;
}
.micrio-container {
  width: 100vw;
  height: 100vh;
  -webkit-transition: opacity 5s ease;
  transition: opacity 5s ease;
  -webkit-perspective: 800px;
          perspective: 800px;
}
.micrio-container:not(.visible) {
  opacity: 0;
}
.micrio-container .hide {
  opacity: 0 !important;
  pointer-events: none;
}
.micrio-container .markers-container {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: 0;
  height: 0;
}
.micrio-container .markers-container .marker-container {
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.micrio-container .markers-container .marker-container.class-title {
  z-index: 20;
}
.micrio-container .markers-container .marker-container.class-fast {
  -webkit-transition-duration: 0.5s, 0.5s;
          transition-duration: 0.5s, 0.5s;
}
.micrio-container .markers-container .marker-container .image {
  position: absolute;
  background: transparent none center center no-repeat;
  background-size: contain;
  -webkit-transition: opacity 1s ease-in-out, -webkit-transform 1s ease-in-out;
  transition: opacity 1s ease-in-out, -webkit-transform 1s ease-in-out;
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  transition: transform 1s ease-in-out, opacity 1s ease-in-out, -webkit-transform 1s ease-in-out;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.micrio-container .markers-container .marker-container img {
  -webkit-transition: opacity 1s ease, -webkit-transform 2s ease-in-out;
  transition: opacity 1s ease, -webkit-transform 2s ease-in-out;
  transition: transform 2s ease-in-out, opacity 1s ease;
  transition: transform 2s ease-in-out, opacity 1s ease, -webkit-transform 2s ease-in-out;
}
.micrio-container .markers-container .marker-container.blur {
  opacity: 0;
}
.micrio-container .markers-container .marker-container.xhalf-blur {
  -webkit-filter: blur(5px);
          filter: blur(5px);
}
.micrio-container .markers-container .marker-container.out {
  pointer-events: none !important;
}
.micrio-container .markers-container .marker-container.out > .image {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 300px);
          transform: translate3d(0, 0, 300px);
}
.micrio-container .markers-container .marker-container.out.class-single {
  -webkit-transition-delay: 4s;
          transition-delay: 4s;
}
.micrio-container .markers-container .marker-container.class-front {
  z-index: 20;
}
.micrio-container .markers-container .marker-container.has-video:hover {
  z-index: 1000;
}
.micrio-container .markers-container .marker-container .video {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent none center center no-repeat;
  background-size: cover;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.25s ease-in-out;
  transition: -webkit-transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
}
.micrio-container .markers-container .marker-container .video:hover {
  -webkit-transform: translate3d(0, 0, 20px);
          transform: translate3d(0, 0, 20px);
}
.micrio-container .markers-container .marker-container img.play {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}
.micrio-container .markers-container .marker-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
}
.micrio-container .markers-container .marker-container h3.subtitle {
  position: absolute;
  left: 0;
  top: 100%;
  margin: 0;
}
#end {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #bd0d14;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 5s ease;
  transition: opacity 5s ease;
  z-index: 11;
}
body.ended #end {
  opacity: 1;
}
.marker-container[id^=T5] {
  -webkit-transition: opacity 2s ease-in-out, -webkit-filter 2s ease-in-out;
  transition: opacity 2s ease-in-out, -webkit-filter 2s ease-in-out;
  transition: filter 2s ease-in-out, opacity 2s ease-in-out;
  transition: filter 2s ease-in-out, opacity 2s ease-in-out, -webkit-filter 2s ease-in-out;
}
.marker-container[id^=T5].blur {
  -webkit-filter: blur(10px);
          filter: blur(10px);
}
.marker-container[id^=T5].out {
  pointer-events: none;
}
.marker-container[id^=T5].out > .image {
  opacity: 0 !important;
  -webkit-transform: translate3d(0, 0, 300px);
          transform: translate3d(0, 0, 300px);
}
.marker-container[id^=T7-I].blur {
  opacity: 0 !important;
}
.marker-container[id$=BG] {
  pointer-events: none !important;
}
.marker-container#T5-I4 {
  -webkit-transform: translate3d(750px, 230px, 150px) !important;
          transform: translate3d(750px, 230px, 150px) !important;
  width: 1000px;
  height: 750px;
  position: relative;
  overflow: hidden;
  z-index: 11;
}
.marker-container#T5-I4.out {
  opacity: 0;
}
.marker-container#T5-I4 .bla {
  height: 25%;
  position: relative;
  margin: 0 50px;
  -webkit-transition: margin-top 0.5s ease, opacity 0.5s 0.5s ease;
  transition: margin-top 0.5s ease, opacity 0.5s 0.5s ease;
  opacity: 0;
}
.marker-container#T5-I4 .bla:first-child {
  margin-top: 560px;
}
.marker-container#T5-I4 .bla.shown {
  opacity: 1;
}
.marker-container#T5-I4 .bla img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: top;
}
.marker-container#T5-I4 .bla img:first-child:nth-last-child(2) {
  width: 70%;
}
.marker-container#T5-I4 .bla img:first-child:nth-last-child(2) ~ img {
  width: 30%;
}