* { margin: 0; padding: 0; }
html *, html *:before, html *:after { box-sizing: inherit; }
body { width: 100%; max-width: 660px; height: 100px; box-sizing: border-box; margin: 0 auto; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: rgba(0,0,0,0); color: #666; overflow: hidden; }
h2 { font-family: 'PT Sans', sans-serif; font-size: .95em; font-weight: 600; line-height: 1.1; color: #eee; }
h3 { font-family: 'PT Sans', sans-serif; font-weight: 600; color: #F4C175; }
h4 { font-family: 'PT Sans', sans-serif; color: #2ab7b7; }
p, span, a { font-family: 'PT Sans', sans-serif; }
.hidden { display: none !important; }
.box { height: 100%; overflow: hidden; }
.container { position: relative; width: 100%; height: 100%; margin: 0 auto; /*border-top: 3px solid #fff; border-bottom: 3px solid #fff; background: rgba(84, 0, 0, 1);*/ }

.info-box { position: relative; width: calc(100% - 105px); height: 100%; padding: 18px 4px; }
.info-box .summary { position: absolute; bottom: 15px; }
.info-box .summary p { font-size: .9em; font-family: 'PT Sans', sans-serif; font-weight: 600; text-transform: uppercase; line-height: 1.1; color: #EADCDC; }
.info-box .summary p span.large { font-size: 1.4em; font-family: 'PT Sans', sans-serif; font-weight: 700; color: #fff; }
.info-box .nominated { position: absolute; bottom: 5px; }
.info-box .nominated p { font-size: .7em; font-family: 'PT Sans', sans-serif; line-height: 1.1; color: #555; }
.info-box .nominated p span { font-family: 'PT Sans', sans-serif; }

.chart-box { position: absolute; top: 22px; right: 4px; width: 90px; height: 70px; }
.chart-box .chart { width: 100%; height: 100%; }
.chart-box .chart .area { display: inline-block; position: relative; float: left; width: 28%; height: 100%; z-index: 2; }
.chart-box .chart .area .label { position: absolute; bottom: 0; left: 0; width: 100%; height: 15px; font-size: .6em; font-family: 'PT Sans', sans-serif; font-weight: 600; text-align: center; line-height: 15px; color: #EADCDC; }
.iphone .chart-box .chart .area .label { font-size: .55em; }
.chart-box .chart .area .bar { position: absolute; top: 0; left: 4px; width: calc(100% - 8px); height: 52px; z-index: 2; }
.chart-box .chart .area .bar .bar-inner { position: absolute; bottom: 0; left: 0; width: 100%; height: 0; transition: height 1s ease, bottom 1s ease; }
.chart-box .chart .area .bar .bar-inner.bar-confirmed { z-index: 2; }
/*.chart-box .chart .area.area-lam .label { color: #6D92E0; }*/
.chart-box .chart .area.area-lam .bar .bar-inner.bar-confirmed { background: #B5BFD6; }
/*.chart-box .chart .area.area-tsang .label { color: #4EBF83; }*/
.chart-box .chart .area.area-tsang .bar .bar-inner.bar-confirmed { background: #A6C3B3; }
/*.chart-box .chart .area.area-woo .label { color: #DBC872; }*/
.chart-box .chart .area.area-woo .bar .bar-inner.bar-confirmed { background: #DED3A0; }
/*.chart-box .chart .area.area-ri .label { color: #DB7676; }*/
.chart-box .chart .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.chart-box .chart .overlay .overlay-line { position: absolute; left: 0; width: 100%; height: 0; border: 1px dashed #AD7979; z-index: 1; }
.chart-box .chart .overlay .overlay-line span { position: absolute; top: -10px; right: 0; font-size: .6em; font-weight: 600; line-height: 10px; color: #EADCDC; }
.chart-box .chart .overlay .overlay-line.overlay-nom { top: 39px; }
.chart-box .chart .overlay .overlay-line.overlay-win { top: 0; }

@media screen and (min-width: 425px) {
  h2 { font-size: 1em; }
  .info-box .summary p { font-size: 1em; }
}

@media screen and (max-width: 300px) {
  h2 { font-size: .85em; }
  .info-box .summary p { font-size: .85em; }
}

@media screen and (max-width: 260px) {
  .info-box { padding: 8px 4px; }
  .info-box .summary { bottom: 8px; }
  .info-box .summary p { font-size: .8em; }
}