html {
  font-size: 11px;
  border: 10px double #dfcfa0;
  min-height: 120%;
}
@media screen and (min-width: 480px) {
  html {
    font-size: calc(11px + 9 * ((100vw - 480px) / 800));
  }
}
body {
  background-color: #477985;
  font-family: "Open sans condensed", sans-serif;
  color: #ece2c6;
  text-align: justify;
  line-height: 1.7;
  width: 97%;
  margin: auto;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
sup {
  vertical-align: super;
  font-size: smaller;
}
em {
  font-style: italic;
  color: #ffd700;
}
i {
  color: #000;
  font-weight: bold;
  font-size: 1.2em;
}
a {
  text-decoration: none !important;
  color: #000 !important;
}
.note {
  display: block;
  background-color: #477985;
  font-size: 0.7em;
  width: 100%;
  border-top: #365c66;
  position: fixed;
  color: #fff8dc;
  padding: 1em;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  text-align: center;
  letter-spacing: 1px;
}
.note a {
  text-decoration: none;
  color: #fff8dc;
}
section {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-height: 40vh;
}
section .section-wrapper {
  padding: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
}
.line {
  width: 90%;
  height: 4px;
  background: #ece2c6;
  margin-top: 15vh;
  left: 5%;
  position: absolute;
}
.line:hover {
  cursor: pointer;
}
.line .year {
  background-color: #ece2c6;
  border-radius: 50%;
  float: left;
  position: relative;
  left: 5.3%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-right: calc(2.3% - 10px);
  margin-left: calc(2.3% - 10px);
  width: 20px;
  height: 20px;
  top: -8px;
}
.line .year::before {
  content: attr(data-timelinelabel);
  position: absolute;
  top: -110px;
  left: -25px;
  width: 250px;
  -webkit-transform: rotateZ(-45deg);
          transform: rotateZ(-45deg);
  display: block;
  font-size: 0.8em;
  font-weight: bold;
}
.line .year::after {
  content: attr(data-mobiletext);
  position: absolute;
  top: 23px;
  left: -15px;
  padding: 10px;
  font-size: 0.8em;
  text-align: center;
}
.line .quarter {
  background-color: transparent !important;
  border-radius: 50%;
  float: left;
  position: relative;
  left: 2.3%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-right: calc(2% - 5px);
  margin-left: calc(2% - 5px);
  width: 10px;
  height: 10px;
  top: -2px;
}
.line .complete {
  background-color: #ffd700;
}
.line .dot.active {
  background-color: #f43;
  cursor: pointer;
}
#timeline {
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: #ccb800;
  color: #000;
}
#description {
  min-height: 50vh;
  background-color: #477985;
}
#description {
  padding: 1em 6em;
}
#p1 a,
#p2 a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
}
#description .section-wrapper > div {
  display: none;
}
#description .section-wrapper > div.text-default {
  display: block;
}
#description p:first-child {
  font-size: 1.2em;
  font-weight: bold;
  padding-bottom: 0.5em;
}
@media all and (max-width: 600px) {
  .line .year {
    width: 20px;
    height: 20px;
    margin-right: calc(2.65% - 10px);
    margin-left: calc(2.65% - 10px);
    top: -8px;
  }
  .line .quarter {
    width: 10px;
    height: 10px;
    margin-right: calc(2.65% - 5px);
    margin-left: calc(2.65% - 5px);
    top: -3px;
  }
}
@media all and (min-width: 481px) {
  .quarter.q1 {
    display: none;
  }
  .dot:hover {
    background-color: #477985;
    cursor: pointer;
  }
}
@media all and (max-width: 480px) {
  #timeline {
    padding-bottom: 10px;
    padding-top: 0;
  }
  #description {
    margin-top: 65vh;
    min-height: 60vh;
    padding: 1em 3em;
  }
  .line {
    height: auto;
    background: transparent;
    margin-top: 10px;
  }
  .line .year,
  .line .quarter {
    border-radius: 0;
    float: none;
    position: static;
    margin-right: 0;
    margin-left: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    height: auto;
    text-align: center;
    -webkit-transition: background-color 500ms;
    transition: background-color 500ms;
  }
  .line .year::after,
  .line .quarter::after {
    content: attr(data-mobiletext);
    display: block;
    padding-top: 12px;
  }
  .line .year.complete,
  .line .quarter.complete {
    background-color: #34495e;
    color: #fbfcfc;
  }
  .line .year.active,
  .line .year.complete.active,
  .line .quarter.active,
  .line .quarter.complete.active {
    background-color: #ff6347;
    color: #fbfcfc;
  }
  .line .year {
    display: block;
  }
  .line .year::before {
    display: none;
  }
  .line .year::after {
    position: static;
  }
  .line .quarter {
    display: none !important;
  }
  .line .quarter.y2017 {
    display: block;
  }
}
.mini-preview-anchor {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}
.mini-preview-anchor:hover .mini-preview-wrapper {
  z-index: 4;
  opacity: 1;
  margin-top: 6px;
  -webkit-transition: opacity 0.3s, margin-top 0.3s;
  transition: opacity 0.3s, margin-top 0.3s;
}
.mini-preview-wrapper {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  opacity: 0;
  margin-top: -18px;
  border: none;
  -webkit-box-shadow: 4px 4px 6px rgba(0,0,0,0.3);
          box-shadow: 4px 4px 6px rgba(0,0,0,0.3);
  -webkit-transition: z-index steps(1) 0.3s, opacity 0.3s, margin-top 0.3s;
  transition: z-index steps(1) 0.3s, opacity 0.3s, margin-top 0.3s;
}
.mini-preview-loading,
.mini-preview-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.mini-preview-loading {
  display: table;
  height: 100%;
  width: 100%;
  font-size: 1.25rem;
  text-align: center;
  color: #f5ead4;
  background-color: #59513f;
}
.mini-preview-loading::before {
  content: 'Loading...';
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.mini-preview-cover {
  background-color: rgba(0,0,0,0);
}
.mini-preview-frame {
  border: none;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}