body {
    margin: 0;
    padding: 0;
    background-color: #000;
    text-align: center;
    font-family: 'Arial';
    font-size: 0;
    color: #fff;
}

a {
    color: #9296F1;
}

div[data-pixi] {
    position: relative;
    display: inline-block;
}

.device-ios div[data-pixi] {
    overflow:auto;
    -webkit-overflow-scrolling:touch;
}

#help{
    position: absolute;
    z-index: 20;
    color: black;
    top: 20px;
    left: 120px;
}
video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    background-size: cover;
}

.no-javascript, .browser-not-supported {
    max-width: 600px;
    margin: 0 auto;
}

@font-face {
  font-family: 'Main';
  src: url('fonts/OpenSans-CondBold.eot'); /* IE9 Compat Modes */
  src: url('fonts/OpenSans-CondBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/OpenSans-CondBold.woff') format('woff'), /* Modern Browsers */
       url('fonts/OpenSans-CondBold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/OpenSans-CondBold.svg#c6198b987cb1ef17cbdeae404be150ec') format('svg'); /* Legacy iOS */
  font-style:   normal;
  font-weight:  400;
}

@font-face {
  font-family: 'Signika';
  src: url('fonts/signika-regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/signika-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/signika-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/signika-regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/signika-regular.svg#c6198b987cb1ef17cbdeae404be150ec') format('svg'); /* Legacy iOS */
  font-style:   normal;
  font-weight:  400;
}

@font-face {
  font-family: 'Tipico';
  src: url('fonts/tipico-regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/tipico-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/tipico-regular.ttf')  format('truetype'); /* Safari, Android, iOS */

       font-style:   normal;
       font-weight:  400;
}

@font-face {
  font-family: 'Ubuntu';
  font-style:   bold;
  font-weight:  400;
  src: url('fonts/ubuntu-bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/ubuntu-bold.woff') format('woff'), /* Modern Browsers */
       url('fonts/ubuntu-bold.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
  font-family: 'UbuntuItalic';
  font-style:   italic;
  font-weight:  400;
  src: url('fonts/ubuntu-italic.eot'); /* IE9 Compat Modes */
  src: url('fonts/ubuntu-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/ubuntu-italic.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
  font-family: 'TipicoBold';
  src: url('fonts/tipico-medium.eot'); /* IE9 Compat Modes */
  src: url('fonts/tipico-medium.woff') format('woff'), /* Modern Browsers */
       url('fonts/tipico-medium.ttf')  format('truetype'); /* Safari, Android, iOS */
       font-style:   bold;
       font-weight:  400;
}

/* Chinese font */
@font-face {
   font-family: 'Noto Sans SC';
   font-style: normal;
   font-weight: 400;
   src: url(//fonts.gstatic.com/ea/notosanssc/v1/NotoSansSC-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanssc/v1/NotoSansSC-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanssc/v1/NotoSansSC-Regular.otf) format('opentype');
 }

@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 400;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
 }

 @font-face {
    font-family: 'WH Sans';
    src: url('fonts/WHSans150904-Bold.eot'); /* IE9 Compat Modes */
    src: url('fonts/WHSans150904-Bold.woff') format('woff'), /* Modern Browsers */
         url('fonts/WHSans150904-Bold.otf')  format('opentype'),
         url('fonts/WHSans150904-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */
         font-style: bold;
         font-weight: 400;
}
@font-face {
   font-family: 'WH Sans Condensed';
   src: url('fonts/WHSans150904-BoldCondensed.eot'); /* IE9 Compat Modes */
   src: url('fonts/WHSans150904-BoldCondensed.woff') format('woff'), /* Modern Browsers */
        url('fonts/WHSans150904-BoldCondensed.otf')  format('opentype'),
        url('fonts/WHSans150904-BoldCondensed.ttf')  format('truetype'); /* Safari, Android, iOS */
        font-style: normal;
        font-weight: 400;
 }
.preloader {
    position: fixed;

    transition: opacity 2s;
    -webkit-transition: opacity 2s;
    opacity: 1;

    font-family: Arial, "Sans Serif";
    color: #fff;
}

.rotated .preloader {
    transform: rotate(90deg);
    transform-origin: 0 0;
    left: 100%;
}

.preloader.preloader--hidden {
    opacity: 0;
}

.preloader div, .preloader h1 {
    padding: 0;
    border: 0;
    margin: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

.preloader h1 {
    background-image: url("preloader_powered.png");
    background-size: contain;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    width: 29em;
    height: 5em;

    line-height: 100%;
    margin: auto;
    position: relative;
    top: 50%;
    left: 50%;

    margin-top: -10em;
    margin-left: -15em;
}

.preloader .progressbar {
    background-image: url("progress_background.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 100% 100%;
    width: 23em;
    height: 1em;
    max-width: 106px;
    position: relative;

    margin-top: 62em;
    margin-left: auto;
    margin-right: auto;
}

.preloader .progressbar > div {
    background-image: url("progress_line.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    height: 100%;
    width: 0%;

    transition: width 1s;
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
    -ms-transition: width 1s;
    -o-transition: width 1s;
}

.preloader .logo {
    background-image: url("preloader_logo.png");
    background-position: 100 0;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: contain;
    width: 40em;
    height: 10em;

    line-height: 100%;
    margin: auto;
    position: relative;
    top: 55%;
    left: 0%;

    -moz-animation-name: showLogo;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -moz-animation-duration: 1.6s;

    -webkit-animation-name: showLogo;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 1.6s;

    -o-animation-name: showLogo;
    -o-animation-iteration-count: 1;
    -o-animation-timing-function: linear;
    -o-animation-duration: 1.6s;

    -ms-animation-name: showLogo;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;
    -ms-animation-duration: 1.6s;

    animation-name: showLogo;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-duration: 1.6s;
}


@-moz-keyframes showLogo {
    0% {
        opacity: 0;
        -moz-transform: scale(0.9) translateY(5px);
    }
    100% {
        opacity: 1;
        -moz-transform: scale(1) translateY(0);
    }
}

@-webkit-keyframes showLogo {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.9) translateY(5px);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(0);
    }
}

@-ms-keyframes showLogo {
    0% {
        opacity: 0;
        -ms-transform: scale(0.9) translateY(5px);
    }
    100% {
        opacity: 1;
        -ms-transform: scale(1) translateY(0);
    }
}

@-o-keyframes showLogo {
    0% {
        opacity: 0;
        -o-transform: scale(0.9) translateY(5px);
    }
    100% {
        opacity: 1;
        -o-transform: scale(1) translateY(0);
    }
}

@keyframes showLogo {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.preloader .legal {
    display: block;
    text-align: center;
    color: #fff;
    font-size: 3em;
    position: absolute;
    width: 100%;
    color: #888;
    bottom: 1em;
}

iframe {
    width: 100%;
    height: 100%;
    border: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #000;
}