canvas {
    position: absolute;
    top: 0;
    display: none;
}
@font-face {
  font-family: 'Newsflash';
  font-style: normal;
  font-weight: normal;
  src: local('Newsflash'), url('./font/NewsflashBB.ttf') format('truetype');
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: normal;
  src: local('Anton'), url('./font/anton.woff') format('woff');
}
@font-face {
  font-family: 'EurostileD';
  font-style: normal;
  font-weight: normal;
  src: local('EurostileD'), url('./font/EurostileLTStd-Demi.otf') format('opentype');
}
@font-face {
  font-family: 'EurostileB';
  font-style: normal;
  font-weight: normal;
  src: local('EurostileB'), url('./font/EurostileLTStd-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'Eurostile';
  font-style: normal;
  font-weight: normal;
  src: local('Eurostile'), url('./font/Eurostile.ttf') format('typetype');
}
@font-face {
  font-family: 'Badaboom';
  font-style: normal;
  font-weight: normal;
  src: local('Badaboom'), url('./font/badaboom_bb.woff') format('woff');
}

div {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#master {
    margin: 100px auto;
}
#master td {
    vertical-align: top;
}

#title_chooser {
    font-family: 'Badaboom';
    font-size: 45px;
    color: #09f;
    -webkit-text-stroke: 2px #fff;
    text-shadow:
         -3px 5px 0 #000,
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px 1px 0 #000,
         1px 1px 0 #000;
    letter-spacing: 1px;
    text-align: center;
    line-height: 0.85;
    background: url('./img/stage.png') center center no-repeat;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: perspective(250px) rotateX(25deg) rotateY(25deg) rotate(-8deg);
    width: 200px;
}
.flashme {
    position: relative;
    top: -20px;
}
#hex_master {
    position: relative;
    -webkit-transform-origin: top right;
    -webkit-transform: perspective(1000px) rotateX(35deg) rotateY(25deg) rotateZ(0deg) rotate(-12deg) translateY(70px) translateZ(1px) scale(0.75) translateX(-90px);
    /*-webkit-transform: perspective(600px) rotateX(25deg) rotateY(15deg) rotate(-8deg) translateZ(1px);*/
}
.hexagon {
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
         -o-transform: rotate(120deg);
            transform: rotate(120deg);
    cursor: pointer;
    float: left;
}
.hexagon-in1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}
.hexagon-in2 {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background: #000;
    visibility: visible;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}

.hexagon-in2:hover {
    background: red;
}

.hexagon1 {
    width: 200px;
    height: 100px;
    margin: 5px 2px 5px -20px;
}
#hexgrid {
    float: left;
    clear: both;
}
.indent {
    padding-left: 91px;
}
.setup {
    margin-top: -57px;
}
#hex_contain {
    position: relative;
    overflow: hidden;
    /*border: 1px solid red;*/
    width: 560px;
    /* margin: 0 auto; */
    z-index: 10;
}



#hex_contain2 {
    position: absolute;
    overflow: hidden;
    /*border: 1px solid red;*/
    width: 561px;
    /* margin: 0 auto;
    top: -324px;*/
    top: 0;
    z-index: 1;
}
#hex_contain2 .hexagon1 {
    width: 210px;
    height: 104px;
    margin: 3px 2px 5px -30px;
}

#hex_contain2 .hexagon-in2 {
    background: #fff !important;
}
#hex_contain2 .indent {
    padding-left: 96px;
}
#hex_contain2 .indenteven {
    padding-left: 5px;
}
#hex_contain2 .setup {
    margin-top: -59px;
}




.hexagon-in2 {
    text-align: center;
    position: relative;
}
.hexagon-in2 span {
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    font-family: 'EurostileB';
    font-size: 20px;
    letter-spacing: 1px;
    color: #fff;
    -webkit-font-smoothing: subpixel-antialiased; /* or antialiased; */
    -webkit-text-stroke: .10pt black; /* or 0.01em might be better */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,  0 1px 1px #000;
}


#letterbox {
    position: relative;
    width: 550px;
    border: 2px solid #fff;
    color: #cf0;
    -webkit-font-smoothing: subpixel-antialiased; /* or antialiased; */
    -webkit-text-stroke: .10pt black; /* or 0.01em might be better */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,  0 1px 1px #000;
    background: rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .5);
    -moz-box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .5);
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .5);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
#letterbox table {
    margin: 15px auto 15px auto;
    position: relative;
}
#letterbox table td {
    font-family: 'Newsflash';
    font-size: 35px;
    letter-spacing: 2px;
}
#letterbox table tr span.percent {
    font-size: 28px;
}
.numeral {
    padding: 0 15px !important;
    width: 64px;
    text-align: right;
}
.barcell {
    padding-top: 9px;
    width: 320px;
    vertical-align: middle;
    position: relative;
    display: block;
}
#heroes, #heralds {
    height: 16px;
    overflow: visible !important;
    float: left;
}
#heroes img {
    float: right;
    right: -2px;
}
#heralds img {
    float: left;
    left: -2px;
}
img[src*="burst"] {
    position: relative;
    top: -13px;
}
img[src*="emblem"] {
    position: relative;
    top: -24px;
}
#heroes img[src*="emblem"] {
    right: -16px;
    display: none;
}
#heralds img[src*="emblem"] {
    left: -16px;
}
#heroes {
    /* width: 76%;*/
    width: 0;
    background: url('./img/heroes.gif') left top;
}
#heralds {
    /* width: 24%; */
    width: 100%;
    background: url('./img/heralds.gif') left top;
}
.red {
    color: #f66;
}
.blue {
    color: #66f;
}
.danger {
    color: #f30;
}
h1, h2 {
    font-family: 'Newsflash';
    font-size: 30px;
    padding: 5px;
    height: 29px;
    overflow: hidden;
}
h2 {
    text-align: right;
    position: absolute;
    top: -3px;
    right: 0;
    display: none;
}
#notice {
    border: 2px solid #666;
    margin: 5px 20px 25px 20px;
    padding: 20px 20px 20px 20px;
    font-family: 'Eurostile';
    font-size: 20px;
    height: 100px;
    color: #fff;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

#hhseekpad {
    width: 320px;
    height: 16px;
    /*
    border: 1px solid red;
    background: rgba(255, 0, 0, 0.5);
    */
    position: absolute;
    right: 0;
    z-index: 2;
}
.star {
    display: inline-block;
    position: relative;
    top: 3px;
    width: 30px;
    height: 30px;
    background: url('./img/stars.png') left top;
}
.no {
    background: url('./img/stars.png') left bottom;
}
#stage_flavor {
    width: 100%;
    background: url('./img/stage/no_stage.png') center center no-repeat;
    height: 270px;
    width: 480px;
    margin: 30px auto;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: perspective(600px) rotateY(-10deg);
}
#text_flavor {
    font-family: 'Newsflash';
    font-size: 25px;
    color: #fff;
    -webkit-font-smoothing: subpixel-antialiased; /* or antialiased; */
    -webkit-text-stroke: .10pt black; /* or 0.01em might be better */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,  0 1px 1px #000;
    position: absolute;
    bottom: -30px;
    width: 100%;
}
#text_flavor table {
    width: 100%;
}
#text_flavor table td:first-child {
    font-family: 'Badaboom';
    color: #ff0;
}
.right {
    text-align: right;
}

.galactus {
    background: url('./img/stage/galactus1.png') center center no-repeat #000;
}
.galactus:hover {
    background: url('./img/stage/galactus2.png') center center no-repeat #000;
}
.victory {
    background: url('./img/stage/victory1.png') center center no-repeat #000;
}
.victory:hover {
    background: url('./img/stage/victory2.png') center center no-repeat #000;
}
.takeyouforaride {
    background: url('./img/stage/takeyouforaride1.png') center center no-repeat #000;
}
.takeyouforaride:hover {
    background: url('./img/stage/takeyouforaride2.png') center center no-repeat #000;
}
.lobby {
    background: url('./img/stage/lobby1.png') center center no-repeat #000;
}
.lobby:hover {
    background: url('./img/stage/lobby2.png') center center no-repeat #000;
}
.trainingroom {
    background: url('./img/stage/trainingroom1.png') center center no-repeat #000;
}
.trainingroom:hover {
    background: url('./img/stage/trainingroom2.png') center center no-repeat #000;
}
.thedailybugle {
    background: url('./img/stage/thedailybugle1.png') center center no-repeat #000;
}
.thedailybugle:hover {
    background: url('./img/stage/thedailybugle2.png') center center no-repeat #000;
}
.metrocity {
    background: url('./img/stage/metrocity1.png') center center no-repeat #000;
}
.metrocity:hover {
    background: url('./img/stage/metrocity2.png') center center no-repeat #000;
}
.katteloxisland {
    background: url('./img/stage/katteloxisland1.png') center center no-repeat #000;
}
.katteloxisland:hover {
    background: url('./img/stage/katteloxisland2.png') center center no-repeat #000;
}
.shieldhelicarrier {
    background: url('./img/stage/shieldhelicarrier1.png') center center no-repeat #000;
}
.shieldhelicarrier:hover {
    background: url('./img/stage/shieldhelicarrier2.png') center center no-repeat #000;
}
.handhideout {
    background: url('./img/stage/handhideout1.png') center center no-repeat #000;
}
.handhideout:hover {
    background: url('./img/stage/handhideout2.png') center center no-repeat #000;
}
.tricelllaboratory {
    background: url('./img/stage/tricelllaboratory1.png') center center no-repeat #000;
}
.tricelllaboratory:hover {
    background: url('./img/stage/tricelllaboratory2.png') center center no-repeat #000;
}
.asgard {
    background: url('./img/stage/asgard1.png') center center no-repeat #000;
}
.asgard:hover {
    background: url('./img/stage/asgard2.png') center center no-repeat #000;
}
.demonvillage {
    background: url('./img/stage/demonvillage1.png') center center no-repeat #000;
}
.demonvillage:hover {
    background: url('./img/stage/demonvillage2.png') center center no-repeat #000;
}
.fateoftheearth {
    background: url('./img/stage/fateoftheearth1.png') center center no-repeat #000;
}
.fateoftheearth:hover {
    background: url('./img/stage/fateoftheearth2.png') center center no-repeat #000;
}
.dangerroom {
    background: url('./img/stage/dangerroom1.png') center center no-repeat #000;
}
.dangerroom:hover {
    background: url('./img/stage/dangerroom2.png') center center no-repeat #000;
}
.mystery {
    background: url('./img/stage/okami1.png') center center no-repeat #000;
}
.mystery:hover {
    background: url('./img/stage/okami1.png') center center no-repeat #000;
}

#volumetric {
    height: 50px;
    width: 54px;
    position: absolute;
    right: 5px;
    bottom: 5px;
}
#volumetric li {
    width: 10px;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    bottom: 0;
}
#volumetric li:nth-child(1) {
    left: 0px;
}
#volumetric li:nth-child(2) {
    left: 11px;
}
#volumetric li:nth-child(3) {
    left: 22px;
}
#volumetric li:nth-child(4) {
    left: 33px;
}
#volumetric li:nth-child(5) {
    left: 44px;
}
#time {
    width: 50px;
    text-align: center;
    position: absolute;
    left: 5px;
    bottom: 5px;
}
.seconds {
    font-family: 'Newsflash';
    letter-spacing: 2px;
    font-size: 40px;
    color: #000;
    -webkit-font-smoothing: subpixel-antialiased; /* or antialiased; */
    -webkit-text-stroke: .10pt #fff; /* or 0.01em might be better */
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff,  0 1px 1px #fff;
}
.time {
    font-family: 'Newsflash';
    letter-spacing: 1px;
    font-size: 20px;
    color: #000;
    -webkit-font-smoothing: subpixel-antialiased; /* or antialiased; */
    -webkit-text-stroke: .10pt #fff; /* or 0.01em might be better */
    text-shadow: -1px -1px 0 #0c9, 1px -1px 0 #0c9, -1px 1px 0 #0c9, 1px 1px 0 #0c9,  0 1px 1px #0c9;
}
#bumping {
    width: 480px;
    padding: 25px 0 0 150px;
    position: absolute;
    z-index: 9999;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: perspective(600px) rotateY(-10deg);
    display: none;
}
#victory {
    position: absolute;
    width: 480px;
    height: 270px;
    border: 1px solid #000;
    margin: 30px 0 0 35px;
    display: none;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: perspective(600px) rotateY(-10deg);
}
.winner {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 10;
}
#victory div {
    float: left;
    height: 270px;
    overflow: hidden;
}
#victory div img {
    text-align: center;
    position: relative;
    top: -25px;
    width: 100%;
}
.first {
    width: 200px;
}
.second {
    position: absolute;
    left: 140px;
    border-right: 10px solid #000;
    width: 200px;
    z-index: 5;
    -webkit-transform: skew(-8deg) translateX(-25px);
       -moz-transform: skew(-8deg) translateX(-25px);
         -o-transform: skew(-8deg) translateX(-25px);
            transform: skew(-8deg) translateX(-25px);
}
.second div {
    width: 200px;
    border-left: 10px solid #000;
    background-position: center center;
    -webkit-transform: skew(16deg) translateX(40px);
       -moz-transform: skew(16deg) translateX(40px);
         -o-transform: skew(16deg) translateX(40px);
            transform: skew(16deg) translateX(40px);
}
.second div img {
    -webkit-transform: skew(-8deg) translateX(-35px) translateY(-30px);
       -moz-transform: skew(-8deg) translateX(-35px) translateY(-30px);
         -o-transform: skew(-8deg) translateX(-35px) translateY(-30px);
            transform: skew(-8deg) translateX(-35px) translateY(-30px);
}
.third {
    position: absolute;
    right: 0;
    width: 200px;
}