@-ms-viewport {
    width: device-width;
}

@media only screen and (min-device-width: 800px) {
    html {
        overflow: hidden;
    }
}

html {
    height: 100%;
}

body {
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #154263;
}

#animation {
    position: relative;
    width: 640px;
    height: 1030px;
}

#animation > img {
    position: absolute;
    /*display: none;*/
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    opacity: 0;
    width: 100%;
    height: 100%;
}

#introduce_pic {
    top: 65px;
    z-index: 20000;
    width: 100%;

    position: absolute;
    overflow: hidden;

    /* Prevent native touch events on Windows */
    -ms-touch-action: none;

    /* Prevent the callout on tap-hold and text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* Prevent text resize on orientation change, useful for web-apps */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}

#introduce_pic > img {
    position: absolute;
    /* Prevent elements to be highlighted on tap */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* Put the scroller into the HW Compositing layer right from the start */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

#caseGrise {
    z-index: 1500;
    width: 100%;
    height: 100%;
    position: absolute;
}

#progress {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 10px;
    width: 200px;
    position: absolute;

    box-shadow: 0px 0px 10px #111111 inset;
}

#charge {
    height: 10px;
    width: 0px;
    position: absolute;
    background-color: #D1A478;
    box-shadow: 0px 0px 5px #222 inset;
}

@-webkit-keyframes charge {
    0% {
        width: 0px;
    }
    100% {
        width: 100%;
    }
}

@keyframes charge {
    0% {
        width: 1px;
    }
    100% {
        width: 100%;
    }
}

#caseGrise #load {
    color: #222;
    font-family: calibri;
    text-align: center;
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-size: 11px;
}