@font-face {
  font-family: "Light";
  src: url("Light.eot"); /* IE9 Compat Modes */
  src: url("Light.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("Light.ttf") format("truetype"), /* Safari, Android, iOS */
    url("Light.woff") format("woff"), /* Modern Browsers */
    url("Light.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Light", "Helvetica", "Arial", sans-serif;
  font-size: 2.75vw;
  background-color: #000000;
  color: #FF6633;
  overflow: hidden;
  cursor: url("icon-cross.png"), auto;
}

@media screen and (max-width: 800px) {
  body {
    font-size: 5vw;
    background-color: #000000;
    overflow: scroll;
  }
}

a {
  text-decoration: none;
  color: #FF6633;
  cursor: url("icon-cross_2.png"), auto;
}

a:hover {
  text-decoration: none;
  color: #FF6633;
  opacity: 0.5;
  -webkit-animation-name: hover;
  -webkit-animation-duration: 2s;
  animation-name: hover;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

#logo {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-image: url("HK_WebLogo.svg");
  background-repeat: no-repeat;
}

.logoanimationstyle {
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -moz-animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
/*  animation-direction :alternate;
  -webkit-animation-direction :alternate;*/
}

@keyframes logodrehen {
  from {
    top: 100%;
    transform:rotate3d(1, 4, -1, 0deg) scale(0.05,0.05);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  25%{
    top: 75%;
    transform:rotate3d(1, 4, -1, 90deg) scale(0.15,0.15);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  50%{
    top: 50%;
    transform:rotate3d(1, 4, -1, 180deg) scale(0.45,0.45);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  75%{
    top: 25%;
    transform:rotate3d(1, 4, -1, 270deg) scale(0.85,0.85);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  to {
    top: 0;
    transform:rotate3d(1, 4, -1, 360deg) scale(1,1);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

.logoanimation {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: logodrehen;
  animation-name: logodrehen;
}

#info {
  z-index: 1;
  position: absolute;
  left: 4%;
  bottom: 4%;
}

.infoanimationstyle {
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -moz-animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
/*  animation-direction :alternate;
  -webkit-animation-direction :alternate;*/
}

@keyframes infodrehen {
  from {
    bottom: 200%;
    transform: rotate3d(3, 2, -4, 0deg) scale(0.05,0.05);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  25%{
    bottom: 150%;
    transform:rotate3d(2, 5, -3, 90deg) scale(0.15,0.15);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  50%{
    bottom: 100%;
    transform:rotate3d(1, 4, -2, 180deg) scale(0.25,0.25);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  75%{
    bottom: 70%;
    transform:rotate3d(0, 2, -1, 270deg) scale(0.35,0.35);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  to {
    bottom: 4%;
    transform:rotate3d(-1, 2, 0, 360deg) scale(1,1);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

.infoanimation {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: infodrehen;
  animation-name: infodrehen;
}

@keyframes hover {
  0%  { opacity: 1.0; }
  50%   { opacity: 0.5; }
  100%  { opacity: 1.0; }
}