.show {
  visibility: visible !important;
}
.hide {
  visibility: hidden !important;
}
* {
  margin: 0;
  padding: 0;
}
#ola {
  font-family: 'Segoe UI', 'Frutiger', Arial, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  font-weight: 300;
  font-style: normal;
  color: #ffffff;
  width: 300px;
  height: 600px;
  position: relative;
  background-color: #000;
  overflow: hidden;
  /* #ft-video {
		box-shadow:0px 0px 9px 2px rgba(0,0,0,0.75);

		left:-129px;
		top:-73px;
		position:absolute;
		width:259px;
		height:146px;

		.ft-video-controls {
			width:60px;
		}

		.ft-time-display {
			display: none;
		}

		.ft-video-progress-container {
			display: none;
		}

		.ft-icon-fullscreen {
			display: none;
		}
	} */
}
@-webkit-keyframes simple-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes simple-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes simple-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes simple-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
#ola .animation-fade-in {
  opacity: 0;
}
#ola .animation-fade-in-in {
  -webkit-animation: simple-fade-in 0.5s ease-out;
  animation: simple-fade-in 0.5s ease-out;
  opacity: 1;
}
#ola .animation-fade-long-in-in {
  -webkit-animation: simple-fade-in 1s ease-in;
  animation: simple-fade-in 1s ease-in;
  opacity: 1;
}
#ola .animation-kind-1 {
  opacity: 0;
}
#ola .animation-kind-1-in {
  -webkit-animation: simple-fade-in 0.5s ease-out;
  animation: simple-fade-in 0.5s ease-out;
  opacity: 1;
}
#ola .animation-kind-1-out {
  opacity: 0;
  -webkit-animation: simple-fade-out 0.5s ease-out;
  animation: simple-fade-out 0.5s ease-out;
}
@-webkit-keyframes simple-rotate-x {
  from {
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
  }
  to {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
}
@keyframes simple-rotate-x {
  from {
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
  }
  to {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
}
#ola .animation-rotate-x {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
}
#ola .animation-rotate-x-in {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-animation: simple-rotate-x 0.2s ease-out;
  animation: simple-rotate-x 0.2s ease-out;
}
@-webkit-keyframes simple-rotate-y {
  from {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  to {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}
@keyframes simple-rotate-y {
  from {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  to {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}
#ola .animation-rotate-y {
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
}
#ola .animation-rotate-y-in {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-animation: simple-rotate-y 0.2s ease-in;
  animation: simple-rotate-y 0.2s ease-in;
}
@-webkit-keyframes simple-slide-in {
  from {
    -webkit-transform: translate(300px, 0px);
    transform: translate(300px, 0px);
  }
  to {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
@keyframes simple-slide-in {
  from {
    -webkit-transform: translate(300px, 0px);
    transform: translate(300px, 0px);
  }
  to {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
@-webkit-keyframes simple-slide-out {
  from {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
  to {
    -webkit-transform: translate(-300px, 0px);
    transform: translate(-300px, 0px);
  }
}
@keyframes simple-slide-out {
  from {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
  to {
    -webkit-transform: translate(-300px, 0px);
    transform: translate(-300px, 0px);
  }
}
#ola .animation-kind-3 {
  -webkit-transform: translate(300px, 0px);
  -ms-transform: translate(300px, 0px);
  transform: translate(300px, 0px);
}
#ola .animation-kind-3-in {
  -webkit-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
  -webkit-animation: simple-slide-in 0.5s ease-out;
  animation: simple-slide-in 0.5s ease-out;
}
@-webkit-keyframes copy-up {
  from {
    fill: #fff;
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes copy-up {
  from {
    fill: #fff;
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-webkit-keyframes copy-down {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes copy-down {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes simple-slide-in-left {
  to {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}
@keyframes simple-slide-in-left {
  to {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}
#ola .mosaic-cell-animate-in-play {
  -webkit-animation: simple-slide-in-left 1.5s ease-out forwards;
  animation: simple-slide-in-left 1.5s ease-out forwards;
}
#ola .mosaic-cell-animate-in-play .overlay {
  -webkit-animation: copy-down 0.5s ease-out forwards;
  animation: copy-down 0.5s ease-out forwards;
}
#ola * {
  margin: 0;
  padding: 0;
}
#ola .full-frame {
  width: 300px;
  height: 600px;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}
#ola #logo {
  z-index: 31;
  filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#444')";
  filter: url(#logo-drop-shadow);
  -webkit-filter: url(#logo-drop-shadow);
  filter: drop-shadow(0px 0px 2em rgba(0, 0, 0, 0.5)) drop-shadow(0px 0px 2em rgba(0, 0, 0, 0.5)) drop-shadow(0px 0px 2em rgba(0, 0, 0, 0.5)) drop-shadow(0px 0px 2em rgba(0, 0, 0, 0.5));
}
#ola #logo .gfx {
  position: absolute;
  left: 20px;
  top: 20px;
}
#ola #bg-container {
  left: 149px;
  top: 203px;
  position: absolute;
  z-index: 40;
}
@-webkit-keyframes video-zoom-in {
  to {
    -webkit-transform: scale(1) translate3d(0, 0, 0);
    transform: scale(1) translate3d(0, 0, 0);
  }
}
@keyframes video-zoom-in {
  to {
    -webkit-transform: scale(1) translate3d(0, 0, 0);
    transform: scale(1) translate3d(0, 0, 0);
  }
}
@-webkit-keyframes my-video-zoom-out {
  to {
    -webkit-transform: scale(0) translate3d(0, 0, 0);
    transform: scale(0) translate3d(0, 0, 0);
  }
}
@keyframes my-video-zoom-out {
  to {
    -webkit-transform: scale(0) translate3d(0, 0, 0);
    transform: scale(0) translate3d(0, 0, 0);
  }
}
#ola #bg-container.animate-zoom-in-preset {
  -webkit-transform: scale(0) translate3d(0, 0, 0);
  transform: scale(0) translate3d(0, 0, 0);
}
#ola #bg-container.animate-zoom-in {
  -webkit-animation: video-zoom-in 1s ease-in-out forwards;
  animation: video-zoom-in 1s ease-in-out forwards;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
#ola #bg-container.animate-my-zoom-out {
  -webkit-animation: my-video-zoom-out 1s ease-in-out forwards;
  animation: my-video-zoom-out 1s ease-in-out forwards;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
#ola #bg-so-1 {
  -webkit-box-shadow: 0px 0px 9px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 9px 2px rgba(0, 0, 0, 0.75);
  left: -129px;
  top: -73px;
  position: absolute;
  width: 259px;
  height: 146px;
}
@keyframes video-zoom-in {
  to {
    -webkit-transform: scale(1) translate3d(0, 0, 0);
    transform: scale(1) translate3d(0, 0, 0);
  }
}
#ola #bg-so-1.animate-zoom-in-preset {
  -webkit-transform: scale(0) translate3d(0, 0, 0);
  transform: scale(0) translate3d(0, 0, 0);
}
#ola #bg-so-1.animate-zoom-in {
  -webkit-animation: video-zoom-in 1s ease-in-out forwards;
  animation: video-zoom-in 1s ease-in-out forwards;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
#ola #bg-so-1.move-out {
  left: -529px;
  opacity: 0;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
#ola #bg-so-2 {
  -webkit-box-shadow: 0px 0px 9px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 9px 2px rgba(0, 0, 0, 0.75);
  left: -529px;
  top: -73px;
  position: absolute;
  width: 259px;
  height: 146px;
  opacity: 0;
}
#ola #bg-so-2.move-in {
  left: -129px;
  opacity: 1;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
#ola #cta {
  z-index: 32;
}
#ola #cta .gfx {
  position: absolute;
  right: 25px;
  bottom: 25px;
  width: 112px;
  height: 26px;
  display: block;
  background-color: #529ad3;
  opacity: 0;
}
#ola #cta.play-in .gfx {
  -webkit-animation-name: copy-up;
  animation-name: copy-up;
  -webkit-animation-duration: .7s;
  animation-duration: .7s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
#ola #close {
  font-family: sans-serif;
  font-size: 10px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 51px;
  height: 18px;
  color: #FFF;
  display: block;
  text-align: center;
  z-index: 50;
}
#ola #bg-1 {
  z-index: 10;
  position: relative;
}
@-webkit-keyframes bg-1-zoom-in {
  from {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  to {
    -webkit-transform: matrix(4.38, 0, 0, 4.38, 0, 0);
    transform: matrix(4.38, 0, 0, 4.38, 0, 0);
  }
}
@keyframes bg-1-zoom-in {
  from {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  to {
    -webkit-transform: matrix(4.38, 0, 0, 4.38, 0, 0);
    transform: matrix(4.38, 0, 0, 4.38, 0, 0);
  }
}
#ola #bg-1.bg-1-zoom-in {
  -webkit-animation: bg-1-zoom-in 0.5s ease-in-out;
  animation: bg-1-zoom-in 0.5s ease-in-out;
}
#ola #bg-1 .mosaic-cell {
  display: block;
  float: left;
}
#ola #bg-1 #mosaic,
#ola #bg-1 #bg-1-img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
#ola #bg-1 #mosaic.hide {
  display: none;
}
#ola #bg-1 #mosaic .mosaic-cell-image .overlay {
  background: #000;
}
#ola #bg-1 #mosaic #mosaic-level-0 {
  position: absolute;
  z-index: 5;
  width: 325px;
  height: 340px;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: optimizeSpeed;
}
#ola #bg-1 #mosaic #mosaic-level-1 {
  position: absolute;
  z-index: 4;
  width: 325px;
  height: 340px;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: optimizeSpeed;
}
#ola #bg-1 #mosaic #mosaic-level-2 {
  position: absolute;
  z-index: 3;
  width: 325px;
  height: 340px;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: optimizeSpeed;
}
#ola #bg-1 #mosaic #mosaic-level-3 {
  position: absolute;
  z-index: 2;
  width: 325px;
  height: 340px;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: optimizeSpeed;
}
#ola #bg-1 #mosaic #mosaic-level-4 {
  position: absolute;
  z-index: 1;
  width: 325px;
  height: 340px;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: optimizeSpeed;
}
#ola #bg-1 #mosaic #mosaic-level-5 {
  position: absolute;
  z-index: 0;
  width: 325px;
  height: 340px;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: optimizeSpeed;
}
#ola #bg-1 #bg-1-img {
  -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
  z-index: 0;
}
#ola #bg-1 #bg-1-img img {
  /*width: 368px;
				height: auto;
				position:absolute;
				left:-68px;
				*/
  width: 300px;
  height: 600px;
  position: absolute;
}
#ola #bg-1 #bg-1-img.show {
  display: block;
}
#ola #bg-2 {
  z-index: 11;
}
#ola #bg-2.zoomed-out img {
  -webkit-transform: scale(0.228);
  -ms-transform: scale(0.228);
  transform: scale(0.228);
}
@-webkit-keyframes bg-2-zoom-in {
  from {
    -webkit-transform: scale(0.228) translate3d(0, 0, 0);
    transform: scale(0.228) translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: scale(1) translate3d(0, 0, 0);
    transform: scale(1) translate3d(0, 0, 0);
  }
}
@keyframes bg-2-zoom-in {
  from {
    -webkit-transform: scale(0.228) translate3d(0, 0, 0);
    transform: scale(0.228) translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: scale(1) translate3d(0, 0, 0);
    transform: scale(1) translate3d(0, 0, 0);
  }
}
#ola #bg-2.bg-2-zoom-in {
  -webkit-animation: bg-2-zoom-in 0.5s ease-in-out;
  animation: bg-2-zoom-in 0.5s ease-in-out;
}
#ola #bg-3 {
  z-index: 13;
}
#ola #bg-background {
  z-index: 20;
  -webkit-box-shadow: 0px -220px 40px 0px rgba(0, 0, 0, 0.75) inset;
  box-shadow: 0px -220px 40px 0px rgba(0, 0, 0, 0.75) inset;
}
#ola #copy-background {
  z-index: 21;
  -webkit-box-shadow: 0px 60px 20px 0px rgba(0, 0, 0, 0.75) inset;
  box-shadow: 0px 60px 20px 0px rgba(0, 0, 0, 0.75) inset;
}
#ola #copy-1 p,
#ola #copy-2 p,
#ola #copy-3 p {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 600px;
}
#ola #copy-1 p span svg g,
#ola #copy-2 p span svg g,
#ola #copy-3 p span svg g {
  position: absolute;
  opacity: 0;
}
#ola #copy-1.play-in p span svg g,
#ola #copy-2.play-in p span svg g,
#ola #copy-3.play-in p span svg g {
  -webkit-animation-name: copy-up;
  animation-name: copy-up;
  -webkit-animation-duration: .7s;
  animation-duration: .7s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
#ola #copy-1.play-out p span svg g,
#ola #copy-2.play-out p span svg g,
#ola #copy-3.play-out p span svg g {
  -webkit-animation-name: copy-down;
  animation-name: copy-down;
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  opacity: 0;
}
#ola #copy-1.play-in-done p span svg g,
#ola #copy-2.play-in-done p span svg g,
#ola #copy-3.play-in-done p span svg g {
  fill: #fff;
  opacity: 1;
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
}
#ola #copy-1 {
  z-index: 21;
}
#ola #copy-1 p span svg #copy-1-2 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
#ola #copy-1.play-out p span svg #copy-1-1 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
#ola #copy-1.play-out p span svg #copy-1-2 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
#ola #copy-2 {
  z-index: 22;
}
#ola #copy-2 p span svg #copy-2-2 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
#ola #copy-2.play-out p span svg #copy-2-1 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
#ola #copy-2.play-out p span svg #copy-2-2 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
#ola #copy-3 {
  z-index: 23;
}
#ola #copy-3 p span svg #copy-3-1 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
#ola #copy-3 p span svg #copy-3-2 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}