header.landing-page {
  color: #fff;
  height: 50px;
  background-color: #333;
  z-index: 1000;
}
header.landing-page .header-title,
header.landing-page .header-elements {
  display: inline-block;
  letter-spacing: 5px;
  font-weight: 300;
}
header.landing-page .header-title {
  font-size: 25px;
  line-height: 2em;
  margin-left: 30px;
}
header.landing-page .header-title .author {
  top: 7px;
  font-size: 10px;
  margin-left: 5px;
  position: relative;
}
header.landing-page .header-elements {
  float: right;
}
header.landing-page .header-elements .link {
  position: absolute;
  color: #fff;
  font-size: 18px;
  line-height: 32px;
}
header.landing-page .header-elements .link:first-child {
  right: 150px;
  top: 9.5px;
}
#GitHubRibbon {
  top: 0;
  right: 0;
  border: 0;
  z-index: 100000;
  position: absolute;
  display: inline-block;
}
.landing-slide {
  height: 900px;
  padding: 50px 0px;
}
.landing-slide.bg-light-gray {
  background-color: #eee;
}
.landing-slide.bg-white {
  color: #d9292f;
  background-color: #fff;
}
.landing-slide.bg-white .context {
  color: #585858;
}
.landing-slide.bg-white .btn {
  color: #d9292f;
  border-color: #d9292f;
}
.landing-slide.bg-red {
  color: #fff;
  background-color: #d9292f;
}
.landing-slide.bg-red .btn {
  color: #fff;
  border-color: #fff;
}
.landing-slide .head-img-wrapper {
  text-align: center;
}
.landing-slide .head-img-wrapper .head-img {
  height: 300px;
}
.landing-slide .sub-title {
  font-size: 30px;
  margin: 0px;
}
.landing-slide .main-title {
  font-size: 64px;
  margin: 10px 0px 40px;
}
.landing-slide .btn,
.landing-slide .context {
  font-size: 24px;
}
.landing-slide .context {
  width: 80%;
  text-align: center;
  margin: 25px auto 50px;
}
.landing-slide .btn {
  display: inline-block;
  opacity: 0.69;
  line-height: 36px;
  text-decoration: none;
  padding: 17px 32px;
}
.landing-slide .btn .arrow {
  display: inline-block;
  position: relative;
  top: -2px;
  width: 25px;
  height: 14px;
}
.landing-slide .btn .arrow .arrow-bone,
.landing-slide .btn .arrow .arrow-head {
  display: inline-block;
  position: absolute;
  background-color: #d9292f;
  height: 2px;
}
.landing-slide .btn .arrow .arrow-bone.bg-red,
.landing-slide .btn .arrow .arrow-head.bg-red {
  background-color: #d9292f;
}
.landing-slide .btn .arrow .arrow-bone.bg-white,
.landing-slide .btn .arrow .arrow-head.bg-white {
  background-color: #fff;
}
.landing-slide .btn .arrow .arrow-head {
  width: 9.899px;
  transform-origin: 100% 50%;
}
.landing-slide .btn .arrow .arrow-bone {
  width: 25px;
  top: 7.5px;
  left: 0px;
}
.landing-slide .btn .arrow .arrow-head.rotate-clock {
  left: 43px;
  top: 8.3px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg) translate(-20px, 20px);
  -moz-transform: rotate(45deg) translate(-20px, 20px);
  -o-transform: rotate(45deg) translate(-20px, 20px);
}
.landing-slide .btn .arrow .arrow-head.rotate-counter-clock {
  left: 29px;
  top: 8.3px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg) translate(-10px, -10px);
  -moz-transform: rotate(-45deg) translate(-10px, -10px);
  -o-transform: rotate(-45deg) translate(-10px, -10px);
}
.landing-slide .btn:hover {
  opacity: 1;
}
.landing-slide .note {
  font-size: 12px;
}
.social-row,
.timerblock {
  text-align: center;
}
.time {
  margin-bottom: 50px;
}
.timer-img-wrapper {
  height: 100px;
}
.social-row {
  margin: 50px 0px;
}
.social-row iframe {
  vertical-align: middle;
}
.social-element {
  vertical-align: middle;
  margin: 20px 10px;
}
.flip-clock-wrapper {
  display: inline-block;
  width: auto;
}
#AdviceTimer .flip-clock-label,
#IssueTimer .flip-clock-label {
  color: #d9292f;
}
.flip-clock-divider .flip-clock-label {
  font-size: 36px;
  position: relative;
  top: 110px;
}
.days.flip-clock-divider .flip-clock-label {
  left: 36px;
}
.hours.flip-clock-divider .flip-clock-label {
  left: 40px;
}
.minutes.flip-clock-divider .flip-clock-label {
  left: 29px;
}
.seconds.flip-clock-divider .flip-clock-label {
  left: 25px;
}
.next-row {
  width: 100%;
  position: absolute;
  text-align: center;
  bottom: 20px;
}
.landing-footer {
  padding: 50px 0px;
}
.landing-footer .credit-signature {
  height: 50px;
  background-color: #333;
  color: #fff;
}
.landing-footer .credit-signature .authors {
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  margin: 0px 15px;
}
#disqus-container {
  padding: 20px 30px;
}
#facebook-social-page-container {
  text-align: center;
}
#GroupTimer:before,
#FinalTimer:before,
#GroupTimer:after,
#FinalTimer:after {
  color: #333;
  font-size: 24px;
  position: relative;
}
#GroupTimer:before,
#FinalTimer:before {
  content: "倒數";
}
#GroupTimer:after,
#FinalTimer:after {
  content: "天";
}
#GroupTimer:before {
  left: 34%;
}
#GroupTimer:after {
  left: 40%;
}
#GroupTimer:before,
#GroupTimer:after {
  color: #d9292f;
}
#FinalTimer:before {
  left: 38%;
}
#FinalTimer:after {
  left: 44%;
}
#FinalTimer:before,
#FinalTimer:after {
  color: #fff;
}
header,
.jrcf-header {
  top: 0px;
  position: fixed;
  height: 50px;
  width: 100%;
  border-bottom: 1px dashed #333;
}
header .title,
.jrcf-header .title {
  font-size: 25px;
  text-align: center;
  line-height: 2em;
}
article {
  padding-top: 100px;
  margin-top: -50px;
}
footer {
  bottom: 0px;
  position: fixed;
  font-size: 14px;
}
@media all and (min-width: 767px) {
  footer {
    height: 100px;
  }
}
@media all and (min-width: 1200px) {
  footer {
    height: 50px;
  }
}
footer iframe,
footer .signature {
  vertical-align: middle;
}
footer .signature {
  margin-left: 40px;
}
.ver-helper {
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.figure-context {
  display: inline-block;
  vertical-align: middle;
}
.jrcf-article .figure {
  padding-top: 50px;
  text-align: center;
}
.jrcf-article .figure .figure-context .image {
  margin-bottom: 25px;
}
.jrcf-article .figure .figure-context .image-info {
  display: block;
  margin: 0 auto;
}
.jrcf-article .figure .figure-context .image-info .credit {
  position: absolute;
  right: 50px;
  top: 350px;
}
.jrcf-article .figure .figure-context .image-info h2 {
  font-size: 2em;
}
.jrcf-article .figure .figure-context img {
  border-radius: 150px;
}
.jrcf-article .desc .stat-context,
.jrcf-article .statpanel .stat-context,
.jrcf-article .desc .desc-context,
.jrcf-article .statpanel .desc-context {
  text-align: justify;
}
@media all and (min-width: 767px) {
  .jrcf-article .desc .stat-context,
  .jrcf-article .statpanel .stat-context,
  .jrcf-article .desc .desc-context,
  .jrcf-article .statpanel .desc-context {
    line-height: 2;
  }
}
@media all and (min-width: 1200px) {
  .jrcf-article .desc .stat-context,
  .jrcf-article .statpanel .stat-context,
  .jrcf-article .desc .desc-context,
  .jrcf-article .statpanel .desc-context {
    line-height: 1.42857143;
  }
}
.jrcf-article .desc .stat-context .title,
.jrcf-article .statpanel .stat-context .title,
.jrcf-article .desc .desc-context .title,
.jrcf-article .statpanel .desc-context .title {
  font-size: 2em;
  border-bottom: 2px solid #333;
  margin-bottom: 30px;
}
.jrcf-article .desc .stat-context .title h2,
.jrcf-article .statpanel .stat-context .title h2,
.jrcf-article .desc .desc-context .title h2,
.jrcf-article .statpanel .desc-context .title h2 {
  margin-bottom: 0px;
}
.jrcf-article .desc .stat-canvas .statrow,
.jrcf-article .statpanel .stat-canvas .statrow {
  margin: 5px 0px;
}
.jrcf-article .desc .stat-canvas .statrow .catname,
.jrcf-article .statpanel .stat-canvas .statrow .catname {
  display: block;
  font-size: 1.2em;
}
.jrcf-article .desc .stat-canvas .statrow .catname,
.jrcf-article .statpanel .stat-canvas .statrow .catname,
.jrcf-article .desc .stat-canvas .statrow .ele,
.jrcf-article .statpanel .stat-canvas .statrow .ele,
.jrcf-article .desc .stat-canvas .statrow .statvalue,
.jrcf-article .statpanel .stat-canvas .statrow .statvalue {
  vertical-align: middle;
}
.jrcf-article .desc .stat-canvas .statrow .ele,
.jrcf-article .statpanel .stat-canvas .statrow .ele {
  display: inline-block;
  margin: 0px 10px;
}
.jrcf-article .desc .stat-canvas .statrow .statvalue,
.jrcf-article .statpanel .stat-canvas .statrow .statvalue {
  font-size: 1.2em;
  font-weight: 800;
  margin-left: 30px;
}
.jrcf-article .scorepanel {
  position: relative;
  height: 100%;
  text-align: center;
}
.jrcf-article .scorepanel .score {
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid #08c;
  line-height: 2;
  height: 300px;
  width: 300px;
}
.jrcf-article .scorepanel .score h1 {
  margin: 0px;
  font-size: 150px;
}
.jrcf-article .scorepanel .score h1::after {
  content: 'pts';
  font-size: 20px;
}
.jrcf-article .socialpage {
  height: 100%;
}
.jrcf-article .socialpage .context {
  display: inline-block;
  vertical-align: middle;
}
.canvas-container {
  text-align: center;
}
.canvas-container .warning {
  position: absolute;
  display: block;
  font-size: 10px;
  right: 0px;
}
@media all and (min-width: 767px) {
  .canvas-container .warning {
    bottom: -20px;
  }
}
@media all and (min-width: 1200px) {
  .canvas-container .warning {
    bottom: 5px;
  }
}
#Radar-Canvas {
  display: inline-block;
  vertical-align: middle;
}
#Radar-Canvas .canvas-title {
  font-size: 1.5em;
}
#Radar-Canvas .radarWrapper {
  display: none;
}
#Radar-Canvas .radarWrapper.highlighted {
  display: inline-block;
}
#Radar-Canvas .radarWrapper.highlighted .radarArea {
  fill-opacity: 1;
}
#PrevNextBtnBar {
  position: fixed;
  right: 30px;
  bottom: 50px;
}
#PrevNextBtnBar .prev,
#PrevNextBtnBar .next {
  position: relative;
  cursor: pointer;
  color: #fff;
  display: inline-block;
  background-color: #0d5287;
  padding: 7.5px 10px;
  font-size: 18px;
  line-height: 1.42857143;
}
#PrevNextBtnBar .prev {
  left: -30px;
}
#PrevNextBtnBar .prev.hidden {
  display: none;
}
#PrevNextBtnBar .prev:hover,
#PrevNextBtnBar .next:hover {
  background-color: #0585e8;
}
#PrevNextBtnBar .prev::before,
#PrevNextBtnBar .next::after {
  content: '';
  top: 0px;
  position: absolute;
  border-style: solid;
  border-width: 20.35714287px;
}
#PrevNextBtnBar .prev::before {
  left: -40px;
  border-color: transparent #0d5287 transparent transparent;
}
#PrevNextBtnBar .next::after {
  right: -40px;
  border-color: transparent transparent transparent #0d5287;
}
#PrevNextBtnBar .next.hidden::after {
  display: none;
}
#PrevNextBtnBar .prev:hover::before {
  border-right-color: #0585e8;
}
#PrevNextBtnBar .next:hover::after {
  border-left-color: #0585e8;
}
@media all and (min-width: 767px) {
  html,
  body,
  #volume,
  #JRCF-root,
  .jrcf-article,
  .jrcf-article-cell,
  .figure,
  .desc,
  .canvas-container {
    height: auto;
  }
  .jrcf-article {
    padding-bottom: 200px;
  }
  .jrcf-article-cell {
    margin: 50px 0px;
  }
  .socialpage {
    text-align: center;
  }
}
@media all and (min-width: 1200px) {
  html,
  body,
  #volume,
  #JRCF-root,
  .jrcf-article,
  .jrcf-article-cell,
  .figure,
  .desc,
  .canvas-container {
    height: 100%;
  }
  .jrcf-article {
    padding-bottom: 0px;
  }
  .jrcf-article-cell {
    margin: 0px;
  }
}
