html, body {
    position: absolute;
    width: 320px;
    height: 480px;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#sharing{
      width: 320px;
    height: 52px;
    position: absolute;
    bottom: 0;
    z-index: 9;
    display: none;
    color:transparent;
}
#start {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
      z-index: 999;
    width: 320px;
    height: 480px;
}
#lblhr{
    display: none;
}
#lblmin{
    display: none;
}
#timer {
    display: none;
    position: absolute;
    top: 88.5%;
    z-index: 2;
    color: #fff;
    left: 37%;
    transform: translate(-50%,-50%);
    font-size: 24px;
}
div#final_score {
    position: absolute;
    top: 20%;
    left: 35%;
    transform: translate(-50%,-50%);
    z-index: 9;
    color: #093d5a;
    font-size: 35px;
    font-weight: 800;
    display: none;
}
#medium {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    z-index: 1;
    width: 320px;
    height: 480px;
    display: none;
}
#third {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    z-index: 1;
    width: 320px;
    height: 480px;
    display: none;
}
#brand {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    z-index: 1;
    width: 320px;
    height: 480px;
    display: none;
}
#loader {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    width: 320px;
    height: 480px;
    display: none;
}
#message {
    text-align: center;
    width: 320px;
    height: auto;
    color: #fff;
    background: #000;
    position: absolute;
    top: 0;
    z-index: 9;
    padding: 30px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-sizing: border-box;
    display: none;
}
div#main {
    z-index: 999;
    position: absolute;
    color: #fff;
}
canvas {
    position: absolute;
    background-color: transparent;
    display: block;
    margin: 0;
    padding: 0;
    max-width: 640px;
}
video 			{ position: absolute; background-color: transparent; display: none;  margin: 0; padding: 0; }

#_wrapper {
    position: absolute;
    width: 320px;
    height: 480px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
        max-width: 320px !important;
    overflow: hidden;
}
#_content 		{ position: absolute; width: 320px; height: 480px;    max-width: 320px; margin: auto; top: 0; left: 0; right: 0; }
#_progressBar	{ position: absolute; width:   1px; height: 480px; background-color: #000000; margin: auto; top: 0; left: 0; }
#_subline		{ position: absolute; width: 320px; height:  40px; background-color: transparent; margin: auto; left: 0; right: 0; top: 490px; }
#_highlight		{ position: absolute; width: 320px; height:  auto; background-color: transparent; margin: auto; left: 0; right: 0; top: 525px; font-size: 8pt; }
#_brfv4_logo	{ position: absolute; width: 200px; left:     0;   bottom: 0; opacity: 0.5;display: none; }
#_stats	        { position: absolute; width:  80px; height:  48px; left:   0; top:  0; }

#_settingsLeft 	{ position: absolute; width: 160px; height: 480px; background-color: transparent; }
#_settingsRight { position: absolute; width: 255px; height:  100%; background-color: transparent; right: 0;display: none; }
#_msg           { position: absolute; width: 100%;  height:  40px; background-color: transparent; bottom: 0; }