html,body {height:100%;width:100%;max-width:930px;box-sizing:border-box; margin: 0 auto}
body{font-family:'Roboto',sans-serif;font-size:20px; background: #15a3bf; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;line-height:1.6em;}
body.widget { background: #fff;  }
h1, h2, h3 {font-family: 'Oswald', sans-serif;}
h1, h2, h3, h4, h5, h6, p, hr { margin-top: 0; }
h3 { font-size: 1.1em }
/*.widget #main, .widget #section2, .widget #section3, .widget #section4, .widget #chartswrapper { display: none }*/
 #main,  #section2,  #section3,  #section4,  #chartswrapper { display: none }
.page { display: block; height: 50px; }
.page { display: none }
.page.header { margin-bottom: 40px; }
#header { top: 0; left: 0; right: 0; height: 49px; border-bottom: 1px solid #0d859d; background: rgb(21, 163, 191); z-index: 60; transition: background .5s ease; position: absolute; }
#header:hover { background: rgb(12, 133, 157); }
#header h1 { float: left; margin-right: 20px; font-size: 18px; font-weight: 800; line-height: 49px; color: #ffffff; }
#header h1::selection { color: #FCFEFF; background: #b5b5b5; }
#header h1 a { font-size: 1em; }
#header .menu a { margin-right: 1%; padding: 4px 6px; font-size: 0.7em; text-decoration: none; line-height: 49px; color: #888; }
#header .m-menu { display: none; }
#header .m-menu-label { display: none; }
#header a { transition: color .5s ease; }
#header a:hover { color: #66522D; }
#header a::selection { color: #FCFEFF; background: #888; }
#header #masthead { display: block; float:left; width: 268px; height: 100%; margin-right: 25px; box-shadow: 1px 0 0 #0d859d; text-indent: -9999px; vertical-align: middle; background: url(../images/scmp-logo-white.png) center center no-repeat; background-size: 82%; overflow: hidden; z-index:1000; }
#header .share > p { display: inline-block; margin: 0; height: 49px; line-height: 49px; vertical-align: bottom; font-size: .7em; color: #d6f8ff; }
#header .social-btn { display: inline-block; width: 20px; height: 49px; line-height: 49px; vertical-align: middle; cursor: pointer; color: #57d8f1; }
.share.pullright { float: right; margin-right: 20px; }
.small { font-size: .7em }
#main { background-color: #672359; width: 100%; height: 100%; background-size: cover; background-image: url('../images/bg-2.jpg'); background-position: bottom; min-height: 650px; background-repeat: no-repeat; overflow-x: hidden; position: relative;  }
#maps { position:relative; }
#maps .map { display: none; }
#maps .selected { display:block; }
.control { width: 100%;text-align: center; box-sizing: border-box; padding: 0 5%; position: absolute; top: 520px; }
.control label { display: block; color: #fff;font-family: 'Oswald', sans-serif; text-align: left; font-size: 3em; line-height: 80px;;  }
#year { width: 100%; box-sizing: border-box; }
.years { width:calc(100% - 60px); margin:0 auto; display:block; height:25px; }
.years h3 {display:inline-block;width:8.5%;color:#fff; box-sizing:border-box; float: left; margin-left: 2.85%; }
.years h3:first-child{ margin-left: 0; }
.label.selected { color: #7dfff4; }
.clear { clear: both; }
.remark{ font-size: .7em; color: #fff; display: block; width: 98%; text-align: center; margin: 0 1%; padding-top: 20px; white-space: nowrap;;}
.markers { width:5%; height:15%; position:absolute; top:300px; left:310px; background:url('../images/mark-w.svg') center center no-repeat; cursor:pointer; font-size:1em;font-family: 'Oswald', sans-serif; line-height:2.3em; z-index:50; }
.markers.selected { background:url('../images/mark-p.svg')0 0 no-repeat; color: #fff ;animation-name: marker ; animation-duration: .5s; }
.markers p { display: block; width: 100%; text-align: center; line-height: 47px; font-size: 1em; padding-top: 20%;}
.markers.selected p { padding-top: 0% }
.markerUK { top:8%; left:4.5%;  }
.markerHK { top:30.5%; left:42%;  }
.markerDE { top:10%; left:8.5%;  }
.markerCN { top:20.5%; left:37.5%;  }
.markerAU { top:66.5%; left:48.5%;  }
.markerUS { top:19.5%; left:68.5%;  }
.markerFI { top:4.5%; left:10.5%;  }
.markerFR { top:13.5%; left:6.5%;  }
.markerCA { top:10.5%; left:64.5%;  }
.markerPH { top:38.5%; left:44.5%;  }
.markerBE { top:4.5%; left:6.5%;  }
.markerCH { top:13.5%; left:9.5%;  }
.markerMO { top:32%; left:40.5%; l:;  }
.markerDK { top:13.5%; left:6.5%;  }
.markerMA { top:26.5%; left:2.5%;  }
.markerTW { top:29.5%; left:44.5%;  }
.markerKR { top:22.5%; left:44.5%;  }
.markerAR { top:67.5%; left:79.5%;  }
.markerSY { top:22.5%; left:17.5%;  }
.markerTH { top:38.5%; left:38.5%;  }
.markerID { top:50.5%; left:45.5%;  }
.markerINT, .markerOther { top:53.5%; left:26.5%;  }
.markerNL { top:8.5%; left:7.5%;  }
.markerDEN { top:13.5%; left:6.5%;  }
.markerIT {top:17.5%; left:10.5%;  }
.markerBR { top:53.5%; left:83.5%;  }
.markerJM { top:13.5%; left:6.5%;  }
.markerDK { top:6%; left:9.5%;  }
.markerJP { top:20.5%; left:47.5%; l:;  }
.markerINK { top:13.5%; left:6.5%;  }
.markerAT { top:11.5%; left:10.5%;  }
.markerNZ { top:73.5%; left:56.5%;  }
.markerIE { top:4.5%; left:5.5%;  }
.markerES { top:18.5%; left:3.5%;  }
.markerIS { top:3.5%; left:1.5%;  }
.markerMX { top:33.5%; left:65.5%;  }
.markerML { top:29.5%; left:4.5%;  }
.markerJM { top:32.5%; left:73.5%;  }
.markerDN { top:13.5%; left:6.5%;  }
.markerSE { top:4.5%; left:7.5%;  }
.markerMY { top:40.5%; left:36.5%;  }
.markerGY { top:42.5%; left:78.5%;  }
.markerLU { top:13%; left:9.5%;  }
.markerSG { top:43.5%; left:38%;  }
.markerTR { top:19.5%; left:15.5%;  }
.markerMU { top:59.5%; left:22.5%;  }
.markers { background-size:85%; background-position:center bottom;  }
 .markers p { padding-top:20%;   }
.container {position: absolute;right: 60px;width: 280px; background: rgba(49, 7, 50, 0.8); padding: 10px 30px 30px 30px; box-sizing: border-box; color: #fff;display: none;z-index: 100;top: -450px; } 
.container h3{ margin: 10px 0; display: inline-block; }
.container .content { height: 255px; }
.content h4{     background: #dd00ff;
    display: inline-block;
    padding: 0 7px;
    font-size: .8em;
    line-height: 1.5em;
 margin: 10px 0;  }
.select-content {    clear: both; text-align: left; margin-bottom: 30px;    font-size: 1em; }
.select-content p { text-transform:uppercase; line-height:1.25em; margin-bottom:13px; font-size:.8em;  }
.lnr-cross{ float:right; font-size:1.4em; margin:14px -6px 0 0; cursor:pointer;  }
#objects {  position: absolute; top: 0 ; left: 0;  margin-left: 2%; }
.path { position: absolute; top: 0 ; left: 0; opacity: 0; }
.mapbars-wrapper { width:calc(100% - 410px); text-align:left; left:340px; padding:10px; position:absolute; bottom:110px; z-index:100;  }
.bars { display: inline-block; cursor: pointer; margin: 0 2px; text-align: center;; }
.bars.selected {  }
.bars.selected .no { background:#5c2159;  color:#ffffff; animation-name: marker; animation-duration: .5s; }
.bars .cu{ display:inline-block; background:#fff; font-size:.7em; width:20px; line-height:20px; padding:2px 2px; text-align: center; }
.bars .no { display:block; width:18px; height:18px; line-height:18px; font-size:0.7em; background:#fff; border-radius:50%; color:#007a91; text-align: center; margin:0 auto; }
.map-bars { background:rgba(255, 255, 255, 0.5); padding:5px;  }
.map-bars p { font-size:.8em; position:absolute; top:-23px; left:10px; color:#fff; text-shadow:1px 0  1px rgba(1, 0, 0, 1); text-align:right;  }
.map-bars .no1 { font-size:2em; color:#befffa; font-weight:800;  }
.map-bars .no2 { font-size:2em; color:#befffa; font-weight:800;  }
.map-bars { display: none; }
#map-bar2008 { display: block; }
.bars .flag-icon { font-size: .8em }
.barINT .flag{ background:url('../images/int.jpg')0 0 no-repeat; background-size: 110%}

/*section2 */
#section2{ background:#CEF2F4; color: #666; padding:20px; min-height:440px; }
#section3 { background:#CEF2F4; color: #666; padding:20px; min-height:570px; box-sizing:border-box; }
#section4 { background:#CEF2F4; color: #666; padding:20px; }
#section2 p {  }
.section.inner { position: relative; }
#section3 .section.inner  { max-width:750px; margin: 0 auto }
.title.left { width: 25%; float: left }
.content.right { float: left; width: 75%; }
#fans { width: 65%; margin: 20px 0; }
#fans-from { width: 65%; margin-top: 35px; min-height: 300px; }
#fans-from .title.left { width: 25%; float: left } 
#fans-from .content.right { float: left; width: 75%; } 
#fans .content.right { height: 100px; position: relative; border-bottom: 2px solid #a7d3d7; }
#fans .bars { width: 8%; background: #fff; display: inline-block; margin-right: 1.5%; position: relative; z-index: 2; vertical-align: bottom; }
#fans .bars:hover { background:#00abbb; transition:all ease .4s;  }
#bar2008 { height: 3% !important; }
#bar2009 { height:8% !important; }
#bar2010 { height:7% !important; }
#bar2011 { height:30% !important; }
#bar2012 { height: 33.3% !important }
#bar2013 { height: 50% !important }
#bar2014 { height: 75% !important }
#bar2015 { height: 100% !important }
#grid60, #grid30 { border-bottom:1px dotted #a7d3d7; position:absolute; width:100%; top:-2px; height:1px;  }
#grid30 { top:48.5%; z-index:0; }
#grid60 span, #grid30 span { float: right; font-size: .6em; margin-top: -14px; margin-right: 10px; color: #00abbb; }
.fans-year { position:absolute; bottom:-38px; font-size:.7em; text-align:center; width:50px; color:#ee2664;  }
#bar2009 .fans-year {}
#fans-from .wrapper { width: 100%; box-sizing: border-box; padding: 15px; background: #fff; height: 140px; max-width: 450px;}
#local { background:url('https://multimedia.scmp.com/clockenflap/images/fans1.svg') right top no-repeat;  width: 82%; float: left; height: 100%;  }
#overseas .countries { display:none; }
#overseas  {  background:url('https://multimedia.scmp.com/clockenflap/images/fans2.svg') left top no-repeat;  display:inline-block;  width: 18%;  float:left;  height:100%; }
#overseas p { font-size: .7em }
p.tooltips {; border-bottom:1px dotted #fff; display: block}
#powerTip { font-size: .8em !important; padding: 0 5px !important; }
#tooltips-countries { display: none; }
#fans-from .title.left p { display:inline-block; vertical-align:top; line-height:25px; height:25px; margin-top:20px; font-size:.7em;  }
.fan-unit {  background:url('../images/fans3.svg')left top no-repeat;  display:inline-block;  width:20px;  height:26px;  margin-top:20px; }
#timer { top:0; right:5%; position:absolute; width:25%;  }
#timer svg { width:220px; height:280px;  }
.timer-path { cursor: pointer; }
#triangle-up {width: 0;height: 0;border-left: 20px solid transparent;border-right: 20px solid transparent;border-bottom: 15px solid #fff;margin-left: 83%;}
.timer-path:focus { outline: none; }
.tooltips-hours { display: none; } 

/*section3*/
#site-info { margin:20px auto 0 auto; text-align:center; width:100%; opacity: 0; height: 210px !important;;  }
.site-icon {  background:url('../images/icon-stage.svg')center top no-repeat; display: inline-block; width:17% ; height: 80px;  background-size:60px;  margin:0 1%; }
.art {  background:url('../images/icon-art.svg') center top no-repeat; background-size: 60px; }
.kid {  background:url('../images/icon-kid.svg') center top no-repeat; background-size: 60px; }
.food {  background:url('../images/icon-food.svg') center top no-repeat;  background-size: 60px;}
.beer {  background:url('../images/icon-beer.svg') center top no-repeat;  background-size: 60px;  margin-right:0;}
.stage { margin-left:0;}
#site-base { position: relative; margin-top: -20px; }
.info-txt {padding:20px 10%;font-size:.8em;line-height:1.6em !important;  }
#site-year{    position: absolute;top: 0;left: 0; width: 100%; }
#site-year img.active { animation-name: active; animation-duration: .5s; }
.site-object { position: absolute;top: 0;left: 0; width: 100%; height: 98%; }
.stage-block { opacity: 0}
.info-drinks, .info-food, .info-kid, .info-art, .info-stage { display: inline-block; width: 19%; vertical-align: top; font-size: .7em; height: 104px; }
.info-content p{line-height: 1.1em; margin-bottom: 11px;text-align: center; }
.info-content { background:#b1dddf; padding:15px 0; display: none; margin-top:0px;  }
#info2011 .info-txt {     position: absolute;
        top: 45px;
    left: 0;
    height: 30px;
    padding: 0; font-size: .7em;}
.info2011.site-icon-wrapper { margin-top: 60px; }
#info2010 p { padding: 20px; line-height: 1.6em }
.bar-hk:before { content: "HK" }
#hf-light1 {  animation-name: blank; animation-duration: 2s;animation-iteration-count:infinite; }
#hf-light2 {  animation-name: blank2; animation-duration: 1.5s;animation-iteration-count:infinite; }
#hf-light3 {  animation-name: blank3; animation-duration: 2s;animation-iteration-count:infinite; }

#at-light1, #at-light1-2013, #at-light1-2012 ,#at-light1-2011 ,#at-light1-2009 ,#at-light3-2008 ,#at-light5-2008, .light2010a, #fd-light2-2016, #hf-light2-2016, #kf-light2-2016  {  animation-name: blank; animation-duration: 1.5s;animation-iteration-count:infinite; }
#at-light2, #at-light2-2013, #at-light2-2012 ,#at-light2-2011 ,#at-light2-2009 ,#at-light2-2008 ,#at-light6-2008, .light2010b, #fd-light1-2016, #hf-light1-2016, #kf-light1-2016  {  animation-name: blank2; animation-duration: 2s;animation-iteration-count:infinite; }
#at-light3, #at-light3-2013, #at-light3-2012 ,#at-light3-2011 ,#at-light3-2009 ,#at-light1-2008 ,#at-light7-2008, #fd-light3-2016, #hf-light3-2016, #kf-light3-2016 {  animation-name: blank3; animation-duration: 1.6s;animation-iteration-count:infinite; }

.words {  }
.words p { font-size:.9em; line-height:1.5em; text-align:center;  }
.words .s { font-weight:900; color:#666;  }
.words .m { font-size:1.2em; color:#7b4bab; font-weight:900;  }
.siteinfo { position:absolute; top:10%; left:10%; background:rgba(0, 0, 0, 0.75); color:#fff; font-size:.7em; line-height:1.2em; padding:5px 10px; box-sizing:border-box; text-align:center; opacity: 0; }
.triangle-up2 {height: 0;border-left: 15px solid transparent;border-right: 15px solid transparent;border-top: 10px solid rgba(0, 0, 0, 0.8);display: block;top: 42px;position: absolute;width: 0px;left: calc(50% - 15px);}
.info-stage p { cursor: pointer; }
.s2014-hf.siteinfo { top:30%; left:73%;  }
.siteinfo.s2014-ys  { top:15% ; left: 22% }
.siteinfo.s2014-rs  { top:29% ; left: 66% }
.siteinfo.s2014-re { top:17% ; left: 33% }
.siteinfo.s2014-mo { top:21% ; left: 37% }
.siteinfo.s2014-ac { top:8% ; left: 16% }
.siteinfo.s2014-sd { top:62% ; left: 44.5% }
.siteinfo.s2014-cm { top:20% ; left: 58% }
.siteinfo.s2014-es  { top:13% ; left: 70% }
.siteinfo.s2014-cs { top:20% ; left: 44% }
.siteinfo.active {  opacity: 1;  }
.stage-block { cursor: pointer; display: block; z-index: 999; }
.s2016-hf{ top:13%; left:41%; }
.s2016-rs{ top:12%; left:72.5%; }
.s2016-es{ top:21%; left:25%; }
.s2016-kf{ top:19%; left:14%; }
.s2016-fd{ top:14%; left:35%; }
.s2016-cs{ top:29%; left:71%; }
.s2016-cm{ top:28%; left:78%; }
.s2016-dj{ top:28%; left:60%; }
.s2016-es{ top:43%; left:73%; }
.s2015-hf{ top:34%; left:74%; }
.s2015-rs{ top:30%; left:17.5%; }
.s2015-es{ top:21%; left:25%; }
.s2015-ys{ top:38%; left:25%; }
.s2015-at{ top:27%; left:40%; }
.s2015-cs{ top:40%; left:49%; }
.s2015-cm{ top:25%; left:57%; }
.s2015-sd{ top:53%; left:29%; }
.s2015-as{ top:36%; left:17%; }
.s2013-hf { top:32%; left:72%;}
.s2013-vs { top:15%; left:63%;}
.s2013-ft { top:18%; left:75%;}
.s2013-sd { top:62%; left:45%;}
.s2013-es { top:12%; left:17%;}
.s2013-ys { top:29%; left:30%;}
.s2013-re { top:20%; left:19%;}
.s2013-rs { top:31%; left:66%;}
.s2012-rs { top:33%; left:77%; }
.s2012-hf { top:27%; left:68%; }
.s2012-ne { top:14%; left:18%; }
.s2012-cm { top:10%; left:10%; }
.s2012-ys { top:18%; left:23%; }
.s2012-pk { top:29%; left:31%; }
.s2012-ts { top:57%; left:44%; }
.s2012-ft { top:57%; left:55%; }
.s2011-rs { top:16%; left:23%; }
.s2011-pp { top:35%; left:32%; }
.s2011-ft { top:14%; left:16%; }
.s2011-hf { top:18%; left:29%; }
.s2011-sf { top:42%; left:38%; }
.info-content .info-stage p {color:#2f7373;cursor:pointer;line-height:16px;}
.siteinfo-wrapper {display: none;position: absolute;top: 0;width: 104%;height: 110%; }
.mobile { display: none; }
.instruction {     display: block;
    width: 80%;
    margin: 0 auto;     color: #569b9e;     position: absolute;     top: 20%;     left: 10%;     text-align: center;     font-size: 1.6em;     line-height: 1.5em;;; }
input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #50555C;
  background: #15A3BF;
  border-radius: 0px;
  border: 0px solid #000000;
  padding: 0 30px; 
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 2px #000000;
  border: 0px solid #000000;
  height: 15px;
  width: 8.55%;
  border-radius: 0px;
  background: #7dfff4;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -2.5px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #15A3BF;
}
input[type=range]:hover::-webkit-slider-runnable-track {
  background: #15A3BF;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #50555C;
  background: #15A3BF;
  border-radius: 0px;
  border: 0px solid #000000;
  padding: 0 30px; 
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 2px #000000;
  border: 0px solid #000000;
  height: 15px;
  width: 10%;
  border-radius: 0px;
  background: #7dfff4;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: calc(100%-60px);
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-width: 3px 0;
  border-color: transparent;
  color: transparent;
  padding: 0 30px ; 
}
input[type=range]::-ms-fill-lower {
  background: #15A3BF;
  border: 0px solid #000000;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #50555C;
}
input[type=range]::-ms-fill-upper {
  background: #15A3BF;
  border: 0px solid #000000;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #50555C;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 2px #000000;
  border: 0px solid #000000;
  height: 15px;
  width: 50px;
  border-radius: 0px;
  background: #7dfff4;
  cursor: pointer;
  margin: 0 25px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #15A3BF;
}
input[type=range]:focus::-ms-fill-upper {
  background: #15A3BF;
}

select{
    padding: 10px;
    border: solid #b8b8b8 1px;
    background-repeat: no-repeat;    
    background-color: transparent;
    
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    display: inline-block;
    
    -webkit-user-select: none;  
    -moz-user-select: none;   
    -ms-user-select: none;      
    user-select: none;
    color: #514642;
    text-align: center;
    float: none;
    
    background-position: 95% center;;
    background-size: 10%;
    
    border-radius: 0;  
    width: 150px;  
    margin: 10px;   
    font-size: .8em;   
    background-image: url("../images/select.svg");
}
select{ display: block; margin: 0 auto; outline: none; }

@keyframes marker {
    0%   {transform: scale(.3);}
    50%  {transform: scale(1.2);}
    100% {transform: scale(1);}
}
@keyframes active {
    0%   { opacity: 0 }
    100% {opacity: 1}
}

@keyframes siteactive {
    0%   { opacity: 0; transform: scale(.3); }
    50%  {opacity: .5; transform: scale(1.2);}
    100% { opacity: 1; transform: scale(1);}
}

@keyframes blank {
    0%  { opacity: 1 }
    20% { opacity: 0 }
    40% { opacity: 0 }
    60% { opacity: 1 }
    80% { opacity: 0 }
    100% {opacity: 1 }
}

@keyframes blank2 {
    0%  { opacity: 0 }
    20% { opacity: 1 }
    40% { opacity: 1 }
    60% { opacity: 0 }
    80% { opacity: 1 }
    100% {opacity: 0 }
}

@keyframes blank3 {
    0%  { opacity: 1 }
    20% { opacity: 1 }
    40% { opacity: 0 }
    60% { opacity: 0 }
    80% { opacity: 1 }
    100% {opacity: 0 }
}







* {margin:0;padding:0;
}