
body, html {
    overflow: hidden;
}

#Cocos2dGameContainer {
    position: absolute !important;
}

#gameCanvas {
    position: absolute !important;
}

#video-player {
    display: none;
    position: absolute;
    width: 1024px;
    height: 768px;
    background: url('../res/images/video_player_scene/2-4_videoPlayerbackground.png') no-repeat;
}

#video-player .mask {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}
#video-player .mask.dim {
    background-image: url('../res/images/video_player_scene/mask-background.png');
}
#video-player .mask.lit {
    background: url('../res/images/video_player_scene/mask-background-lit.png');
}

#video-player video {
    position: absolute;
    top: 183px;
    left: 239px;
    width: 624px;
    height: 351px;
    background-color: black;
}

.video-control-button {
    position: absolute;
    width: 58px;
    height: 52px;
}

#play-stop-button {
    top: 401px;
    right: 111px;
    background: url('../res/images/video_player_scene/2-4_videoPlayerstopButton.png') no-repeat;
}

#play-stop-button.play-state {
    background: url('../res/images/video_player_scene/2-4_videoPlayerplayButton.png') no-repeat;
}

#play-stop-button.stop-state {
    background: url('../res/images/video_player_scene/2-4_videoPlayerstopButton.png') no-repeat;
}

#skip-button {
    top: 475px;
    right: 129px;
    background: url('../res/images/video_player_scene/2-4_videoPlayerskipButton.png') no-repeat;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#final-menu,
#skip-menu {
    display: none;
    position: absolute;
    top: 85vh;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-40%, -50%);
    -ms-transform: translate(-50%, -50%);
}

#final-menu a,
#skip-menu a {
    width: 20em;
    height: 6em;
    background-size: contain;

    display: table-cell;
    vertical-align: middle;
    text-align: center;

    font-family: PostinoStd;
    color: #000000 !important;
    text-decoration: none;
    position: relative;
    cursor: pointer;
}

#reload-button {
    background: url('../res/images/button_blue_left.png') no-repeat center;
    padding-left: 2em;
}

#quit-button {
    background: url('../res/images/button_blue_right.png') no-repeat center;
    padding-right: 2em;
}

#large-skip-button {
    background: url('../res/images/button_blue_right.png') no-repeat center;
    padding-right: 2em;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@font-face {
    font-family: MyriadProRegular;
    src: url('../res/fonts/MyriadPro-Regular.ttf');
}
@font-face {
    font-family: MyriadProCond;
    src: url('../res/fonts/MyriadPro-Cond.ttf');
}
@font-face {
    font-family: PostinoStd;
    src: url('../res/fonts/Postino-Std.ttf');
}
