@charset "UTF-8";
/* CSS Document */

*{
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;
}

body{
  width: 100%;
  height: 100%;
  font-size: 17px;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
.iEx{
  position: relative;
  width: 1024px;
  height: 768px;
  overflow: hidden;
}
#iExTitle, #iExTitle h1, #iExContent, #iExIcons, #iExImages, #iExImages img{
  position: absolute;
}
.iExTitle, .iExTitle h1, .iExContent, .iExIcons, .iExImages, .iExImages img{
  position: absolute;
}
#iExTitle, .iExTitle{
  width: 100%;
  left: 45px;
  top: 38px;
  z-index: 999;
}
#iExTitle h1, .iExTitle h1{
  font-size: 28px;
  color: rgb(127, 127, 127);
}
#iExContent{
  width: 100%;
  height: 100%;
}
#iExIcons {
  position: absolute;
  z-index: 2;
  width: 1024px;
  height: 768px;
}
#iExImages{
  overflow: hidden;
  width: 100%;
  height: 100%;
}
#iExImages img{
  display: block;
}
.tpIcon{
  width: 24px;
  height: 24px;
  position: absolute;
  background-color: rgb(0, 222, 255);
  border-radius: 50%;
  border: 3px solid rgb(255, 255, 255);
  /*z-index: 100;*/
  /*cursor: pointer;*/
  margin-left: 12px;
  margin-top: 12px;
  pointer-events: none;
}
.tpIconActive{
  width: 48px;
  height: 48px;
  position: absolute;
  background-color: rgba(255, 0, 0, 0);
  border-radius: 50%;
  z-index: 100;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

/* helper classes */
.hidden{
  display: none !important;
}

/* Black & white effect */
.desaturate{
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  -webkit-filter: grayscale(1);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
/* Transperency */
.transparent{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=42)";
  filter: alpha(opacity=42);
  -moz-opacity: 0.42;
  -khtml-opacity: 0.42;
  opacity: 0.42;
}

/* preloader */
#preloader{
  position: absolute;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
  width: 32px;
  height: 32px;
  z-index: 9999;
}


/* LUKA iEx stuff */

.iEx{
  position: relative;
  width: 1024px;
  height: 768px;
  overflow: hidden;
}
#iExTitle, #iExTitle h1, .iExContent, .iExIcons, .iExImages, .iExImages img{
  position: absolute;
}
.iExTitle, .iExTitle h1, .iExContent, .iExIcons, .iExImages, .iExImages img{
  position: absolute;
}
#iExTitle, .iExTitle{
  width: 100%;
  left: 45px;
  top: 38px;
  z-index: 999;
}
#iExTitle h1, .iExTitle h1{
  font-size: 28px;
  color: rgb(127, 127, 127);
}
.iExContent {
  /*backface-visibility: hidden;*/
  /*-webkit-backface-visibility: hidden;*/
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.iExIcons{
  /*position: absolute;
  z-index: 2;*/
  /*width: 1024px;*/
  /*height: 768px;*/
}
.iExImages{
  
}
.iExImages img{

}

/* icons */
.iExIcon{
  width: 27px;
  height: 27px;
  position: absolute;
  background-color: rgb(0, 222, 255);
  border-radius: 50%;
  border: 3px solid rgb(255, 255, 255);
  margin-left: 11px;
  margin-top: 11px;
  pointer-events: none;
}
.iExIconActive{
  width: 48px;
  height: 48px;
  position: absolute;
  background-color: rgba(255, 0, 0, 0);
  border-radius: 50%;
  z-index: 1;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

/* labels */
.absoluter {
  position: absolute;
}
.iExLabels {
  /*position: absolute;
  width: 1024px;
  height: 768px;
  z-index: 1;*/
}
.label {
  top: 0;
  left: 0;
  /*padding: 10px 15px;*/
  text-align: left;
  white-space: normal;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(103, 103, 103);
  border-radius: 6px;
  background-clip: padding-box;
  color: #000000;
  border-radius: 12px;
  z-index: 2;
  /*display: inline-block;*/
  position: fixed;
}
.label p {
  font-size: 19px;
  text-align: center;
  /*text-transform: lowercase;*/
  /*padding: 10px 15px;*/
  margin: 10px 15px;
}
.label-animate {
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;

  animation-name: label-scaleIn;
  animation-duration: 0.15s;
  animation-delay: 0.15s;
  animation-fill-mode: both;
  backface-visibility: hidden;

  -webkit-animation-name: label-scaleIn;
  -webkit-animation-duration: 0.15s;
  -webkit-animation-delay: 0.15s;
  -webkit-animation-fill-mode: both;
  -webkit-backface-visibility: hidden;
}
@keyframes label-scaleIn
{
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@-webkit-keyframes label-scaleIn
{
  from {
    -webkit-transform: scaleY(0);
  }
  to {
    -webkit-transform: scaleY(1);
  }
}


/* helper classes */
.hidden{
  display: none;
}
.webkitDisableClickFeedback{
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

/* Black & white effect */
.desaturate{
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  -webkit-filter: grayscale(1);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
/* Transperency */
.transparent{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=42)";
  filter: alpha(opacity=42);
  -moz-opacity: 0.42;
  -khtml-opacity: 0.42;
  opacity: 0.42;
}

/* preloader */
#preloader{
  position: absolute;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
  width: 32px;
  height: 32px;
  z-index: 9999;
}

/* Font color helper classes */

.textBlue {
  color: rgb(0, 222, 255);
}
.textGreen {
  color: #a0d700;
}



.animate-fadeIn {
  animation-name: animate-fadeIn;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
  backface-visibility: hidden;
  
  -webkit-animation-name: animate-fadeIn;
  -webkit-animation-duration: 0.75s;
  -webkit-animation-fill-mode: forwards;
  -webkit-backface-visibility: hidden;  
}
.animate-fadeOut {
  animation-name: animate-fadeIn;
  animation-duration: 0.1s;
  animation-direction: reverse;
  
  -webkit-animation-name: animate-fadeIn;
  -webkit-animation-duration: 0.1s;
  -webkit-animation-direction: reverse; /* Safari and Chrome */
}
@keyframes animate-fadeIn
{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes animate-fadeIn
{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}