* {margin: 0;padding: 0;} html *, html:after, html:before {box-sizing: inherit;} html {overflow: hidden;}
.hidden {display: none!important;}

body {width: 100%;height: 342px;min-height: 342px;max-height: 342px;max-width:800px;margin:0 auto ;box-sizing: border-box;font-size: 15px;font-family: 'Roboto', sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;overflow: hidden;}
body.scmp-m-ios{width:100vw;}
.container {position: relative;display: inline-block;width: 100%;max-width:800px;min-width: 290px;height: 100%;margin: 0 auto;    border-top: 5px solid #f2f2f2;}
.title {width: 100%;font-size: 24px;font-family: 'Merriweather', serif;color:#333;font-weight: 600;top: 0;left: 1px;position: relative;border-radius: 3px 3px 0 0;letter-spacing: 0.2px;padding-top: 2px;}
.subheading{ position:relative;margin:8px 0;font-size:13.5px;width:98%; }
.logo{position: absolute;right: 3px;bottom: 1px;font-size: 12px;font-weight:600;letter-spacing:-0.3px;color: #848484;text-transform:uppercase;letter-spacing: 0.2px;transition:opacity 0.6s ease;}
.source {position: absolute;left: 1px;bottom: 1px;font-weight:300;font-size: 10px;color: #848484;border-top: 0.6px solid #f2f2f2;width: 100%;padding-top: 4px;text-transform:uppercase;}
.source a {text-decoration: none;color: #848484;font-weight:600;text-transform:none;}
.source a:hover {text-decoration: none;color: #000;}
.updated{position: absolute;right: 3px;bottom: 1px;font-size: 10px;font-weight:600;letter-spacing:-0.3px;color: #848484;text-transform:uppercase;letter-spacing: 0.2px;transition:opacity 0.6s ease;}
.updated span{ position:relative;left:2px; }
.logo.hide, .updated.hide{ opacity:0; }

.charts{ position: relative;top: 0;width: 98%;margin: 0 1%;margin-left: 0; }
.charts .chart{ position: relative;width: 100%;margin: 16px 4px;margin-left: 0;}
.charts .chart .heading{ position: relative;top: 0;left: 0;font-size: 15px;color: #000;margin-bottom: 14px; }
.charts .chart .outerbar{ position: relative;top: 0;width: 100%;height: 22px;background: none;margin: 4px 0; }
.charts .chart .outerbar .innerbar{position: relative;top: 0;left: 0;width: 0%;height: 100%;transition:width 0.8s ease;}
.charts .chart.current .outerbar .innerbar{ background:#29CCCC; }
.charts .chart.lastyear .outerbar .innerbar{ background:#B3B3B3; }
.charts .chart .value{ font-size:5.8vw;letter-spacing:1px;font-weight:300;position:relative;top:-5px;transition:all 0.4s ease;}
.charts .chart .value .num{ font-weight:500;}
.charts .chart.current .value{ color:#29CCCC;}
.charts .chart.lastyear .value{ color:#B3B3B3;}


.controls{ position: absolute;width: 220px;display: inline-block;right: 12px;top: 42px; }
.controls .control{ position: relative;width: 48%;margin: 0 1%;display: inline-block;text-align: center;border: 1px solid #ccc;color: #ccc;padding:3px 0;cursor:pointer; }
.controls .control:hover{ color:#555;border-color:#555; }
.controls .control.active{ color:#000;border-color:#000;cursor:default; }


.desktopsrc{display:inline-block;}
.mobilesrc{display:none;}


@media screen and (min-width: 700px){
	.charts .chart .value{ font-size:40px;}
}
@media screen and (max-width: 450px){
	.charts{ top:16px; }
	.controls { right: 0;left: 0;height: 44px;text-align: center;width: 100%;bottom: 36px;top: unset;}
	.controls .control { width: 120px;margin: 0 4px;padding: 12px 0; }
}

@media screen and (max-width: 350px){
	.desktopsrc{display:none;}
	.mobilesrc{display:inline-block;}
}



@media screen and (max-width: 290px){
	.charts .chart .value{ font-size:20px;}
}