* { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
html { overflow: hidden; }
html *, html *:before, html *:after { box-sizing: inherit; }
body { width: 100%; height: 450px; box-sizing: border-box; font-size: 16px; font-family: 'PT Sans', sans-serif; color: #777065; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none !important; }
a { -webkit-user-select: none !important; }
.hidden { display: none !important; opacity: 0; animation: none !important; transition: none !important; }
.container { position: relative; width: 100%; max-width: 660px; height: 100%; margin: 0 auto; overflow: hidden; background: #e3e9ec; }
.title { position: absolute; top: 15px; left: 20px; max-width: calc(100% - 145px); font-size: 1.8em; font-family: 'PT Sans Narrow', sans-serif; font-weight: 600; line-height: 1.05; color: #374763; z-index: 5; }

.controls { top: 10px; right: 20px; width: 94px; height: 40px; border-radius: 5px; background: #F1F6FF; z-index: 5; transition: all .5s ease;position: absolute; }
.controls .control-button { position: absolute; top: 2px; width: 20px; font-size: 1.5em; text-align: center; line-height: 36px; color: #868B96; cursor: pointer; z-index: 2; transition: all .5s ease; }
.controls .control-button.prev-button { left: 4px; }
.controls .control-button.next-button { right: 4px; }
.controls .control-button:hover { color: #596273; }
.controls .control-button.inactive { opacity: .3; cursor: default; }
.controls .control-progress { position: absolute; top: 2px; right: 0; width: 100%; font-size: .8em; font-weight: 600; text-align: center; line-height: 36px; color: #868B96; }

.progress { position: absolute; top: 5px; right: 119px; width: 50px; height: 50px; border-radius: 50%; border: 1px solid #B7B2AA; overflow: hidden; z-index: 5; transform: scale(.8); background: rgba(255, 255, 255, .3); }
.progress .progress-half { position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden; }
.progress .progress-half .progress-half-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(255, 255, 255); }
.progress .progress-half.progress-half-1 { left: calc(50% - 1px); border-top-right-radius: 25px; border-bottom-right-radius: 25px; }
.progress .progress-half.progress-half-1 .progress-half-area { transform-origin: 0 50%; }
.progress .progress-half.progress-half-2 { left: 0; border-top-left-radius: 25px; border-bottom-left-radius: 25px; }
.progress .progress-half.progress-half-2 .progress-half-area { transform-origin: 100% 50%; }
.progress .progress-button { position: absolute; top: 4px; left: 4px; width: 40px; height: 40px; border-radius: 50%; font-size: 1.6em; text-align: center; line-height: 40px; color: #8C7A5C; transition: color .5s ease; }
.progress .progress-button.ion-android-refresh { font-size: 1.7em; cursor: pointer; }
.progress .progress-button.ion-android-refresh:hover { color: #6B5837; }
.progress.complete { }

.overlays .overlay-subtitles .overlay-subtitle { position: absolute; top: 65px; left: 20px; width: calc(100% - 40px); font-size: .95em; color: #4E5156; z-index: 2; transition: opacity .5s ease; text-shadow: 0px 1px 0px #fff; }
.overlays .overlay-subtitles .overlay-subtitle.hidden { display: block !important; opacity: 0 !important; z-index: -1 !important; }

.overlays .overlays-top { position: absolute; background: #c1c9cf; top: 0; left: 0; width: 100%; height: 450px;; }
.overlays .overlays-top .svgs { position: absolute; left: 0; width: 100%; z-index: 1; transition: .3s all ease; top: 0px; }
.overlays .overlays-top .svgs .svg { position: absolute; top: 0px; left: calc(50% - 330px); width: 660px; height: 450px; transform-origin: center center; transition: transform .4s ease, left .4s ease, top .4s ease; }
.overlays .overlays-top .overlay-items { position: absolute;  }
.overlays-top .time-line  { width: 90%; height: 150px; z-index: 4; left: 5%; bottom: 20px;  }
.overlays-top .tests { border-radius: 50%; width: 30px; height: 30px; background: rgb(250, 182, 51); position: absolute; font-family: "PT Sans Narrow";  }
.overlays-top .tests .text { position: absolute; top: -20px; width: 4em; left: 50%; margin-left: -2em; text-align: center; color: #7a1b1b; font-weight: 700; font-family: "PT Sans Narrow";;;  }
.overlays-top .test-6 .text { top: -16px;  }
.overlays-top .test-1 { width: 3px; height: 3px; left: 12%; top: 67%;  }
.overlays-top .test-2 { width: 3.2px; height: 3.2px; left: 31%; top: 66%; box-shadow: 0 0 0 3px rgba(253, 222, 165, 0.74);  }
.overlays-top .test-3 { width: 9.6px; height: 9.6px; left: 58%; top: 61%; box-shadow: 0 0 0 2px rgba(253, 222, 165, 0.74);  }
.overlays-top .test-4 { width: 9.6px; left: 78%; top: 61%; box-shadow: 0 0 0 2px rgba(253, 222, 165, 0.74); height: 9.6px;  }
.overlays-top .test-5 { width: 16px; height: 16px; top: 55%; left: 87%;  }
.overlays-top .test-6 { width: 45px; height: 45px; box-shadow: 0 0 0 15px rgba(253, 222, 165, 0.74); top: 10%; left: 94%;  }
.overlays-top .chart-axis { width: 90%; height: 150px; left: 5%; bottom: 20px ; z-index: 3;;;  }
.overlays-top .axis {}
.overlays-top .axis-x { position: absolute; bottom: 20px; left: 0; width: 100%; border-top: 2px #4682b4 solid; font-size: .9em;  }
.overlays-top .years{ float: left; width: 14.2%; text-align: center; position: relative;;}
.overlays-top .years:before { content:''; border-left: 1px solid #4682b4; position:absolute; top:-1px; height:6px; width:2px; left:50%; }
.overlays-top .axis-y { width: 100%; height: 100px; position: relative; margin-top: 5px; font-size: .9em;  }
.overlays-top .kilotons { position: absolute; top: 0px; left: 10px; color: #7b1e1e; font-family: "PT Sans Narrow"; font-weight: 700;  }
.overlays-top .mag { position: absolute; top: 0px; left: 70px; color: #ffffff; background: #8da7b0; padding: 0 5px; font-weight: 700; font-family:" PT Sans Narrow";  }
.overlays-top .mag-text { position: absolute; top: -20px; width: 3em; left: 50%; margin-left: -1.5em; text-align: center; color: #ffffff; font-size: .8em; font-weight: 700; background: rgba(141, 167, 176, 0.8);  }
.overlays-top .kilo { left:0; position:absolute; width:100%; color:#7b1e1e; font-size:.9em; }
.overlays-top .kilo-100:before { content:" "; border-top:1px dotted #fff; left:30px; position:absolute; width:calc(100% - 30px); top:10px; }
.overlays-top .kilo-50:before { content:" "; border-top:1px dotted rgba(255, 255, 255, 0.6); top:10px; left:30px; position:absolute; width:calc(100% - 30px); }
.overlays-top .kilo-10:before { content:" "; width:calc(100% - 30px); position:absolute; left:30px; top:7px; border-top:1px dotted rgba(255, 255, 255, 0.4); }
.overlays-top .kilo-100 { width: 100%; bottom: calc(100% - 40px); }
.overlays-top .kilo-50 { top: calc(50% - 0px); }
.overlays-top .kilo-10 { top: calc(90% - 10px ); }
.overlays-top .leaders { z-index: 2; width: 90%; height: 150px; bottom: 20px; left: 5%; color: #fff; font-weight: 700;  }
.overlays-top .leader.kju{ width: 57%; height: 150px; float: left; background: rgba(189, 195, 191, 0.8);  }
.overlays-top .leader.kji{ width: 43%; background: rgba(167, 170, 168, 0.8); height: 150px; float: left;  }
.overlays-top .leader.kji .text{ position: absolute; bottom: 0; left: 14%;;  }
.overlays-top .leader.kju .text{ position: absolute; bottom: 0; left: 65%;;  }
.overlays-top .contents { z-index: 3;  }
.overlays-top .contents .content{ opacity: 0; position: absolute; top: 50px; left: 40px;  }

#overlays-inter { }
.overlays-inter .chart-axis { width: 95%; height: 230px;z-index: 3;z-index: 3; position: absolute; top: 170px; left: 0;;;  }
.overlays-inter .axis {}
.overlays-inter .axis-x { position: absolute; bottom: 20px; left: 7em; width: calc(100% - 7em); border-top: 2px #4682b4 solid; font-size: .9em;  }
.overlays-inter .axis-y .country { text-align: right; display: block; margin: 15px 0; }
.overlays-inter .years{ float: left; width: 12.4%; text-align: center; position: relative;;}
.overlays-inter .year-45{  width: 4%;  }
.overlays-inter .year-17{  width: 6%;  }
.overlays-inter .years span { margin-top: 5px; display: block;  }
.overlays-inter .years:before { content:''; border-left: 1px solid #ffffff; position:absolute; top:-170px; height:168px; width:2px; left:50%; }
.overlays-inter .axis-y { width: 7em; height: 170px; position: relative; font-size: .9em; border-right: 1px solid #4682b4; padding-right: 5px;  }
.keys { position: absolute; top: 130px; right: 30px;  }
.key { display: block; float: left; width: 20px; background: #da6c06; font-size: .8em;height: 15px; text-align: center;;  }
.key-0 { background: #ffffff; width: 62px;;  }
.key-1 { opacity: 1; background: #f3e1d2;; }
.key-2 { opacity: .2 }
.key-3 { opacity: .3 }
.key-4 { opacity: .4 }
.key-5 { opacity: 1; background: #e4ac79; }
.key-6 { opacity: .6 }
.key-7 { opacity: .7 }
.key-8 { opacity: .8 }
.key-9 { opacity: .9 }
.key-10 {opacity: 1; width: 30px;background: #c50311;color: #fff;  }
.key-title { display: block; text-align: right;;  }
.time-unit{ float: left; height: 10px;  }
.unit-0 { background: #fff;;  }
.unit-10 { background: #f3e1d2;;  }
.unit-20 { background: #ead2bd;  }
.unit-30 {  }
.unit-40 { background: #e6b88f;  }
.unit-50 { background: #e4ac79;  }
.unit-60 {  }
.unit-70 {  }
.unit-80 { background: #de8534;  }
.unit-90 {  }
.unit-100 { background: #c50311;;  }
.time-bars { z-index: 5; position: absolute; top: 170px; left: 7em; width: calc(100% - 7em); height: 230px;  }
.time-bar { position: absolute;;;  }
.time-bar.us { top: 89px; left: 0%; width: 9%; border: 1px solid #ffffff;  }
.time-bar.us .time-unit { width: 7.1% }
.time-bar.kr { top: 22px; left: 75%; width: 13.5%; border: 1px solid #ffffff;  }
.time-bar.kr .time-unit { width: 16.6% }
.time-bar.cn { top: 57px; left: 24%; width: 3.5%; border: 1px solid #ffffff;  }
.time-bar.cn .time-unit { width: 33.3%;; }
.time-bar.ru { top: 123px; left: 18%; width: 5%; border: 1px solid #ffffff;  }
.time-bar.ru .time-unit { width: 25% }
.summary { position: absolute; font-family: "PT Sans Narrow"; font-weight: 700;  }
.summary.kr { top: 17px; left: 89%;  }
.summary.kr .text{ line-height: 1; margin-top: -7px; margin-left: -6px; }
.summary.cn { left: 29%; top: 52px;  }
.summary.us { top: 84px; left: 10%;  }
.summary.ru { top: 117px; left: 24%;  }
.summary .icon { background: url(../images/explose.png) 0 0 no-repeat; width: 20px; height: 20px; display: inline-block; background-size: 20px;  }
.summary .text { display: inline-block; vertical-align: top; color: #d96c07; line-height: 24px;  }
.country.ru br { display: none }

.overlays .overlays-top .remark { position: absolute; bottom: 10px; left: 20px; font-size: .9em; color: #4E5156; }
.overlays .overlay-source { position: absolute; bottom: 0; font-size: .8em; color: #55575C; z-index: 3; left: 20px; }
.overlays .overlay-source p { float: left }
.overlays .overlay-source a { font-weight: 600; text-decoration: none; color: #55575C; transition: all .5s ease; float: left; margin-left: 5px; }
.overlays .overlay-source a:hover { text-decoration: underline; }

#svg-1 #city text { font-family: 'PT Sans', sans-serif; fill: #3b4a66; }
#svg-1 #rings { animation: 2s blink infinite;}

.title-share {  }
.title-share  p { margin: 10px; color: #0c385f;  }
.title-share  a { margin: 10px; color: #108eff; text-decoration: none; border-bottom: 1px dotted #108eff; display: inline-block; z-index: 2; position: relative;  }
.title-container.share #title { display: none }
.frame-3 .overlay-items , .frame-3 .overlay-source{ display: none  }
.twitter-button { background: #5DB7D8; ;width: 34px; border-radius: 3px; text-align: center; line-height: 34px; color: #fff; cursor: pointer; transition: all .5s ease; margin: 0 5px; }
.facebook-button { background: #6D90D8; width: 34px; border-radius: 3px; text-align: center; line-height: 34px; color: #fff; cursor: pointer; transition: all .5s ease; margin: 0 5px; } 
.share-block { width: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.29); height: 450px; z-index: 1;  }
.redirect-share-buttons {  z-index: 2;  position: relative; }
.share-wrapper { display: block; position: absolute; z-index: 10; top: 150px; background: rgb(255, 255, 255); left: calc(50% - 150px); padding: 20px; box-sizing: border-box; width: 300px; text-align: center; }
@keyframes blink { 
  0% { opacity: 1 }
  50% { opacity: .3 }
  100% { opacity: 1 }
}


@media screen and (min-width: 400px) {
}
@media screen and (min-width: 460px) {
  .overlays .overlays-tree .overlay-header p { font-size: 1em; }
}
@media screen and (min-width: 500px) {
  .title { left: 40px; max-width: 400px; }
  .overlays .overlay-subtitles .overlay-subtitle { left: 40px; width: 460px; font-size: 1.05em; }
  #overlay-subtitle-1-2, #overlay-subtitle-1-1 { width: 300px; }
  .overlays .overlays-top .remark { left: calc(50% - 230px); width: 460px; }
  .overlays .overlays-tree .overlay-header { left: calc(50% - 230px); width: 460px; }
}
@media screen and (min-width: 560px) {
  .overlays .overlays-tree .overlay-chart { left: calc(50% - 260px); width: 520px; }
  .overlays .overlays-tree .overlay-chart .overlay-chart-content { width: calc(40% - 20px); }
}
@media screen and (min-width: 660px) {
  .overlays-top .svgs .svg { left: 0; width: 100%; height: 450px; }
}
@media screen and (max-width: 540px) {
  .title { font-size: 1.6em; }
  #overlay-subtitle-1-2, #overlay-subtitle-1-1 { width: 270px; top: 45px; }
}
@media screen and (max-width: 460px) {
  .title { top: 10px; font-size: 1.5em; line-height: .9; }
  #overlay-subtitle-1-2, #overlay-subtitle-1-1 { width: 300px; } 
}
@media screen and (max-width: 420px) {
  .overlays .overlay-subtitles .overlay-subtitle { font-size: .9em !important }
  .overlays .overlay-subtitles .overlay-subtitle#overlay-subtitle-2-1 { top: 60px; }

  .overlays .overlays-top .svgs { top: 0; }
  .overlays .overlays-top .svgs .svg { left: calc(50% - 310px); width: 600px; top: 0; }

  .overlays .overlays-top .overlay-btns { top: 220px; }

  .overlays .overlays-top .remark { bottom: 4px; width: 160px; font-size: .85em; line-height: 1.1; }
  .overlays .overlay-source { bottom: 6px; width: 170px; text-align: right; line-height: 1.1; }
  .overlays .overlays-top .overlay-items { transform: scale(.9); left: 0; }
  #overlay-subtitle-1-2, #overlay-subtitle-1-1 { width: 220px; top: 45px; }
  .progress  { top: 1px; right: 95px; transform: scale(.75) }
  .controls { transform: scale(.9); right: 0px; top: 5px; }
  .overlays-inter .chart-axis .axis-x{ left: 3.5em; width: calc(100% - 3.5em); bottom: -10px;  }
  .overlays-inter .chart-axis .axis-y{ width: 3.5em; height: 200px;  }
  .overlays-inter .time-bars { width: calc(100% - 3.5em); left: 3.5em;  }
  .summary.kr { top: 17px; left: 89%;  }
  .summary.cn { left: 29%; top: 67px;  }
  .summary.us { top: 104px; left: 10%;  }
  .summary.ru { top: 152px; left: 24%;  }
  .time-bar.kr {}
  .time-bar.cn { top: 73px;}
  .time-bar.us { top: 109px;}
  .time-bar.ru { top: 158px;}
  .overlays-inter .years:before { height: 200px; top: -202px;}
  .overlays-inter .axis-y .country { font-size: .9em; margin: 17px 0px;  }
  .country.ru br { display: block }
}
@media screen and (max-width: 330px) {
  .title { top: 13px; left: 15px; max-width: calc(100% - 125px); font-size: 1.25em; }
  .controls { right: 5px; }
  .overlays .overlays-top .svgs .svg { left: calc(50% - 325px); width: 600px; top: 0px; }
  .overlays .overlay-subtitles .overlay-subtitle { left: 15px; width: calc(100% - 30px); }
   #overlay-subtitle-1-2, #overlay-subtitle-1-1 {  top: 40px;  width: 200px; }

}
@media screen and (max-width: 300px) {
    .title { top: 13px; left: 15px; max-width: calc(100% - 125px); font-size: 1.1em; }
  .overlays .overlays-top .svgs .svg { left: calc(50% - 341px); width: 600px; top: 0px; }
}