/* ================ The Timeline ================ */

.timeline {
  position: relative;
  width: 900px;
  margin: 20px auto 0 auto;
  padding: 1em 0;
  list-style-type: none;
}

.timeline:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: ' ';
  display: block;
  width: 6px;
  height: 100%;
  margin-left: -3px;
  background: linear-gradient(
    to bottom,
    rgba(80,80,80,0) 0%,
    rgb(80,80,80) 8%,
    rgb(80,80,80) 92%,
    rgba(80,80,80,0) 100%
  );
  z-index: 5;
}

.timeline li {
  position: relative;
  padding: 1.4em 0;
  list-style: none;
}

.timeline li:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* 圆圈统一挂在 li 上，而不是挂在 .flag 上 */
.timeline li:before {
  content: ' ';
  position: absolute;
  left: 50%;
  top: 1.7em;
  width: 12px;
  height: 12px;
  margin-left: -10px;
  background: #fff;
  border-radius: 50%;
  border: 4px solid rgb(51, 0, 111);
  z-index: 10;
}

/* 左右栏 */
.direction-l {
  position: relative;
  width: 400px;
  float: left;
  text-align: right;
}

.direction-r {
  position: relative;
  width: 400px;
  float: right;
  text-align: left;
}

/* institution 名称 */
.flag-wrapper {
  position: relative;
  display: block;
}

.flag {
  position: relative;
  display: inline-block;
  background: rgb(248,248,248);
  padding: 6px 10px;
  border-radius: 5px;
  font-weight: 600;
  line-height: 1.35;
}

.direction-l .flag {
  text-align: right;
  box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-r .flag {
  text-align: left;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

/* 彻底取消旧圆圈 */
.direction-l .flag:before,
.direction-r .flag:before {
  display: none;
  content: none;
}

/* 小箭头 */
.direction-l .flag:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-left-color: rgb(248,248,248);
  border-width: 8px;
  pointer-events: none;
}

.direction-r .flag:after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-right-color: rgb(248,248,248);
  border-width: 8px;
  pointer-events: none;
}

/* 时间 */
.time-wrapper {
  display: inline-block;
  line-height: 1em;
  font-size: 0.66666em;
  color: rgb(51, 0, 111);
  vertical-align: middle;
  margin-top: 5px;
}

.direction-l .time-wrapper {
  float: left;
}

.direction-r .time-wrapper {
  float: right;
}

.time {
  display: inline-block;
  padding: 4px 6px;
  background: rgb(248,248,248);
}

/* 描述 */
.desc {
  margin: 1em 0.75em 0 0;
  font-size: 0.77777em;
  line-height: 1.5em;
}

.direction-l .desc {
  text-align: right;
}

.direction-r .desc {
  margin: 1em 0 0 0.75em;
  text-align: left;
}

/* ================ Timeline Media Queries ================ */

@media screen and (max-width: 1000px) {
  .timeline {
    width: 760px;
  }

  .direction-l,
  .direction-r {
    width: 340px;
  }
}

@media screen and (max-width: 800px) {
  .timeline {
    width: 680px;
  }

  .direction-l,
  .direction-r {
    width: 300px;
  }
}

@media screen and (max-width: 660px) {
  .timeline {
    width: 100%;
    padding: 4em 0 1em 0;
  }

  .timeline:before {
    left: 50%;
  }

  .timeline li {
    padding: 2em 0;
  }

  .timeline li:before {
    top: -0.4em;
  }

  .direction-l,
  .direction-r {
    float: none;
    width: 100%;
    text-align: center;
  }

  .direction-l .flag,
  .direction-r .flag {
    text-align: center;
  }

  .direction-l .flag:after,
  .direction-r .flag:after {
    content: "";
    position: absolute;
    left: 50%;
    top: -8px;
    height: 0;
    width: 0;
    margin-left: -8px;
    border: solid transparent;
    border-bottom-color: rgb(255,255,255);
    border-width: 8px;
    pointer-events: none;
  }

  .flag {
    background: rgb(255,255,255);
    z-index: 15;
  }

  .time-wrapper {
    display: block;
    position: relative;
    margin: 4px 0 0 0;
    z-index: 14;
  }

  .direction-l .time-wrapper,
  .direction-r .time-wrapper {
    float: none;
  }

  .desc {
    position: relative;
    margin: 1em 1em 0 1em;
    padding: 1em;
    background: rgb(245,245,245);
    box-shadow: 0 0 1px rgba(0,0,0,0.20);
    z-index: 15;
    text-align: center;
  }

  .direction-l .desc,
  .direction-r .desc {
    margin: 1em 1em 0 1em;
    padding: 1em;
    text-align: center;
  }
}

/* ================ Timeline Media Queries ================ */

@media screen and (max-width: 1000px) {
  .timeline {
    width: 640px;
  }

  .direction-l {
    position: relative;
    width: 290px;
    float: left;
    text-align: right;
  }

  .direction-r {
    position: relative;
    width: 290px;
    float: right;
  }
}

@media screen and (max-width: 800px) {
  .timeline {
    width: 620px;
  }

  .direction-l {
    position: relative;
    width: 280px;
    float: left;
    text-align: right;
  }

  .direction-r {
    position: relative;
    width: 280px;
    float: right;
  }
}

@media screen and (max-width: 660px) {

  .timeline {
    width: 100%;
    padding: 4em 0 1em 0;
  }

  .timeline li {
    padding: 2em 0;
  }

  .direction-l,
  .direction-r {
    float: none;
    width: 100%;

    text-align: center;
  }

  .flag-wrapper {
    text-align: center;
  }

  .flag {
    background: rgb(255,255,255);
    z-index: 15;
  }

  .direction-l .flag:before,
  .direction-r .flag:before {
    position: absolute;
    top: -30px;
    left: 50%;
    content: ' ';
    display: block;
    width: 12px;
    height: 12px;
    margin-left: -9px;
    background: #fff;
    border-radius: 10px;
    border: 4px solid rgb(51, 0, 111);
    z-index: 10;
  }

  .direction-l .flag:after,
  .direction-r .flag:after {
    content: "";
    position: absolute;
    left: 50%;
    top: -8px;
    height: 0;
    width: 0;
    margin-left: -8px;
    border: solid transparent;
    border-bottom-color: rgb(255,255,255);
    border-width: 8px;
    pointer-events: none;
  }

  .time-wrapper {
    display: block;
    position: relative;
    margin: 4px 0 0 0;
    z-index: 14;
  }

  .direction-l .time-wrapper {
    float: none;
  }

  .direction-r .time-wrapper {
    float: none;
  }

  .desc {
    position: relative;
    margin: 1em 0 0 0;
    padding: 1em;
    background: rgb(245,245,245);
    -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
    -moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
    box-shadow: 0 0 1px rgba(0,0,0,0.20);
    
    z-index: 15;
  }

  .direction-l .desc,
  .direction-r .desc {
    position: relative;
    margin: 1em 1em 0 1em;
    padding: 1em;
    
    z-index: 15;
  }
}

@media screen and (min-width: 400px ?? max-width: 660px) {
  .direction-l .desc,
  .direction-r .desc {
    margin: 1em 4em 0 4em;
  }
}