td, th {
  padding:0.35em;
}
    #timeline-embed {
      width: 100%; 
      height: 650px
    }
    .tl-slide 
    .tl-slide-scrollable-container {
      width: 100%;
    }
    .tl-slide-content {
      width: 100% !important;
    }
  .tl-dragging, .tl-timemarker-line-right, .tl-storyslider, .tl-timeline {
      -webkit-user-select:auto;
      -khtml-user-select:auto;
      -moz-user-select:auto;
      -ms-user-select:auto;
      -o-user-select:auto;
      user-select:auto
    }
.tl-slide .tl-slide-content-container .tl-slide-content .tl-text {
  width: 60%;
}
.tl-slide .tl-slide-content-container .tl-slide-content {
  /*height:400px;*/
  /*background:#eee;*/
  overflow:hidden;
}
.tl-media .tl-media-content-container .tl-media-content,
.tl-media .tl-media-content-container .tl-media-content img {
  /*height:310px;*/
}
.tl-text-content-container {
  /*height:380px;*/
}
.tl-text-content-container p {
  font-size:1rem;
}
.keyword-sample {
  position: relative;
  border: 1px solid #403E3C;
  margin:2rem auto 1rem auto ;
}
.keyword-sample .keyword-button {
  background:#41d69f;
  cursor: pointer;
  clear:both;
  height:3.5rem;
  position:relative;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -o-user-select:none;
  user-select:none
}
.keyword-sample .container {
  padding:1.3rem 1rem 0rem 1rem;
  margin-bottom:0.8rem;
}
.keyword-sample .keyword-button img {
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-1.1rem;
  margin-top:-1.1rem;
  height:2.2rem;
  width:2.2rem;
}
.keyword-sample h3 {
  font-size:1.6rem;
  margin:0 0.8rem 0 0;
  text-align: right;
  float:left;
  padding-right:1rem  ;
  max-width:40%;
  height:100%;
  display: block;
  line-height:1;
  color: #000;
  border-right: 3px solid #41d69f;
}
.keyword-sample h3.chinese {
  font-size:2.5rem;
}
@media screen and (min-width: 30em) {
  .keyword-sample .keyword-button {
    width:10%;
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    height:auto;
  }
  .keyword-sample .container {
    width:90%;
    padding:1.3rem 1rem 1.3rem 1rem;
    margin-bottom:0;
  }
  .keyword-sample .keyword-button img {
    margin-left:-1rem;
    margin-top:-1rem;
    height:2rem;
    width:2rem;
  }
}

/*.keyword-sample .keyword-button svg path {
  fill: #fff;
}*/
/*.keyword-sample .keyword-button:hover {
  background: #0bba0b;
}*/
.keyword-sample .container-singlekeyword {
  width:100%;
  cursor: normal;
}

.keyword-sample h3 span {
  font-size:1rem;
  color: #666;
  display:block;
}
.keyword-sample div {
  font-size:0.8rem;
  overflow: hidden;
}
.keyword-sample .test-desc {
  clear:both;
  font-size:0.7rem;
  padding:0.4rem 1rem;
  font-family: monospace;
  background: #eee;
}
.keyword-sample .legend {
  position:absolute;
  top:-0.5rem;
  font-size:0.8rem;
  left:1.6rem;
  background:white;
  z-index:999;
}
/*
    .icons {
      padding-top: 12px;
      padding-bottom: 12px;
      padding-left: 60px;
    }

    .logo-icon {
      padding-right: 4px;
      padding-left: 4px;
      padding-top: 2px;
      padding-bottom: 2px;

      margin-right: 4px;

      border-radius: 10px;
      border-style: outset;
    }

    .keyword-event {
      padding-top: 8px;
    }

    .keyword-table {
      text-align: left;
      border-spacing: 50px 0;
    }

    .keyword-table th {
      border-bottom: 1px solid black;
      padding-bottom: 8px;

    }

    .keyword-table td {
      padding-bottom: 8px;
    }

    .keyword-table td.keyword {
      white-space: nowrap;
    }

    .selected-icon {
      border-style: inset;
      border-color: steelblue;
    }

    .icons {
      padding-top: 12px;
      padding-bottom: 12px;
      padding-left: 60px;
    }

    .logo-icon {
      padding-right: 4px;
      padding-left: 4px;
      padding-top: 2px;
      padding-bottom: 2px;

      margin-right: 4px;

      border-radius: 10px;
      border-style: outset;
    }

    .keyword-event {
      padding-top: 8px;
    }

    .keyword-table {
      text-align: left;
      border-spacing: 50px 0;
    }

    .keyword-table th {
      border-bottom: 1px solid black;
      padding-bottom: 8px;

    }

    .keyword-table td {
      padding-bottom: 8px;
    }

    .keyword-table td.keyword {
      white-space: nowrap;
    }

    .tl-media .tl-media-content-container .tl-media-overlay:after {
      display:block;
      background:#fff;
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
    }
        .tl-media-overlay img, 
        .tl-media-overlay iframe {
          opacity:0.6;
        }

    .tl-media .tl-media-content-container .tl-media-overlay .tl-overlay-area {
      position:absolute;
      top:0;
      z-index:999;
      padding-top:3rem;
      width:80%;
      left:10%;
    }
    .tl-text-content-container hr {
      border-color: #41d69f;
    }
    /*.tl-timeline .tl-text-content-container h3.tl-headline-date,
    .tl-timeline .tl-text-content-container h2.tl-headline {
      color:white;
      background:black;
      display:inline;
      padding:0.2em;
      line-height:1.4;
      -webkit-box-decoration-break: clone;
      font-family: monospace;
    }
    .tl-timeline .tl-text-content-container h3.tl-headline-date {
      display:none;
    }*/
    .tl-media .tl-media-content-container .tl-media-overlay .tl-overlay-area span {
      display: inline-block;
    }
    /*.tl-media .tl-media-content-container .tl-media-overlay:hover .tl-overlay-area {
      opacity:0;
    }

    .tl-media .tl-media-content-container .tl-media-overlay:hover img, 
    .tl-media .tl-media-content-container .tl-media-overlay:hover iframe {
      opacity:1;
    }
        .tl-media .tl-media-content-container .tl-media-overlay .tl-overlay-area h2,
    .tl-media .tl-media-content-container .tl-media-overlay .tl-overlay-area span {
      display:none;
    }*/