/**
 * Timeline Page styling
 */

/** Timeline year bubbles (navigation elements / links) **/
#timeline-container a,
#timeline-container-mobile a {
  text-decoration: none;
}

#timeline-container a:hover,
#timeline-container-mobile a:hover {
  text-decoration: underline;
  background-color: inherit;
}

#timeline-container ul,
#timeline-container-mobile ul {
  position: relative;
}

#timeline-container ul {
  min-height: 440px;
}

#timeline-container-mobile ul {
  min-height: 360px;
}

#timeline-container ul,
#timeline-container ol,
#timeline-container-mobile ul,
#timeline-container-mobile ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

#timeline-container ul li,
#timeline-container-mobile ul li {
  position: absolute;
  background: #c6c5c5;
  border-radius: 50%;
  text-align: center;
  z-index: 0;
}

#timeline-container ul li a,
#timeline-container-mobile ul li a {
  color: #fffefe;
}

#timeline-container ul li.active,
#timeline-container-mobile ul li.active {
  background: #b7212d;
  background: -moz-radial-gradient(center, ellipse cover, #b7212d 1%, #6d0019 66%, #4c0010 99%);
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #b7212d 1%, #6d0019 66%, #4c0010 99%);
  /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, #b7212d 1%, #6d0019 66%, #4c0010 99%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b7212d', endColorstr='#4c0010', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  z-index: 100;
}

#timeline-container ul li.active:before,
#timeline-container-mobile ul li.active:before {
  border: 3px solid #8c1924;
  border-radius: 50%;
  position: absolute;
  content: "";
}

#timeline-container-mobile ul li.active:before {
  border: 2px solid #8c1924;
}

/* Text bubbles */
#timeline-container ul li.year-txt {
  width: 88px;
  height: 88px;
  padding: 30px 0 0 0;
}

#timeline-container ul li.year-txt a {
  font-size: 30px;
}

#timeline-container ul li.year-txt.active:before {
  left: -8px;
  top: -8px;
}

#timeline-container ul li.year-txt:before {
  width: 104px;
  height: 104px;
}

#timeline-container-mobile ul li.year-txt {
  width: 82px;
  height: 82px;
  padding: 25px 0 0 0;
}

#timeline-container-mobile ul li.year-txt a {
  font-size: 28px;
}

#timeline-container-mobile ul li.year-txt.active:before {
  left: -7px;
  top: -7px;
}

#timeline-container-mobile ul li.year-txt:before {
  width: 96px;
  height: 96px;
}

/* Large year bubbles */
#timeline-container ul li.year-lg {
  width: 92px;
  height: 92px;
  padding: 30px 0 0 0;
}

#timeline-container ul li.year-lg a {
  font-size: 35px;
  line-height: 35px;
}

#timeline-container ul li.year-lg.active:before {
  left: -8px;
  top: -8px;
}

#timeline-container ul li.year-lg:before {
  width: 108px;
  height: 108px;
}

#timeline-container-mobile ul li.year-lg {
  width: 82px;
  height: 82px;
  padding: 25px 0 0 0;
}

#timeline-container-mobile ul li.year-lg a {
  font-size: 30px;
  line-height: 30px;
}

#timeline-container-mobile ul li.year-lg.active:before {
  left: -7px;
  top: -7px;
}

#timeline-container-mobile ul li.year-lg:before {
  width: 96px;
  height: 96px;
}

/* Medium year bubbles */
#timeline-container ul li.year-md {
  width: 75px;
  height: 75px;
  padding: 14px 0 0 0;
}

#timeline-container ul li.year-md a {
  font-size: 26px;
  line-height: 26px;
}

#timeline-container ul li.year-md.active:before {
  left: -6px;
  top: -6px;
}

#timeline-container ul li.year-md:before {
  width: 87px;
  height: 87px;
}

#timeline-container-mobile ul li.year-md {
  width: 60px;
  height: 60px;
  padding: 10px 0 0 0;
}

#timeline-container-mobile ul li.year-md a {
  font-size: 21px;
  line-height: 21px;
}

#timeline-container-mobile ul li.year-md.active:before {
  left: -6px;
  top: -6px;
}

#timeline-container-mobile ul li.year-md:before {
  width: 72px;
  height: 72px;
}

/* Small year bubbles */
#timeline-container ul li.year-sm {
  width: 44px;
  height: 44px;
}

#timeline-container ul li.year-sm a {
  font-size: 17px;
  line-height: 17px;
}

#timeline-container ul li.year-sm.active:before {
  left: -6px;
  top: -6px;
}

#timeline-container ul li.year-sm:before {
  width: 52px;
  height: 52px;
}

#timeline-container-mobile ul li.year-sm {
  width: 38px;
  height: 38px;
  /* padding: 6px 0 0 0; */
}

#timeline-container-mobile ul li.year-sm a {
  font-size: 15px;
  line-height: 15px;
}

#timeline-container-mobile ul li.year-sm.active:before {
  left: -5px;
  top: -5px;
}

#timeline-container-mobile ul li.year-sm:before {
  width: 48px;
  height: 48px;
}

/** Year bubble positioning **/

/* xs/sm/md positioning - right to left (mobile container only) */
@media screen and (max-width: 991.98px) /* LG */ {
  #timeline-container-mobile ul li.year-1983 {
    left: 1px;
    top: 1px;
  }

  #timeline-container-mobile ul li.year-1984 {
    left: 110px;
    top: 15px;
  }

  #timeline-container-mobile ul li.year-1989 {
    left: 65px;
    top: 75px;
  }

  #timeline-container-mobile ul li.year-1993 {
    left: 30px;
    top: 135px;
  }

  #timeline-container-mobile ul li.year-1994 {
    left: 110px;
    top: 155px;
  }

  #timeline-container-mobile ul li.year-1997 {
    left: 20px;
    top: 180px;
  }

  #timeline-container-mobile ul li.year-1999 {
    left: 95px;
    top: 240px;
  }

  #timeline-container-mobile ul li.year-2000 {
    left: 160px;
    top: 255px;
  }

  #timeline-container-mobile ul li.year-2002 {
    left: 120px;
    top: 1px;
  }

  #timeline-container-mobile ul li.year-2004 {
    left: 50px;
    top: 18px;
  }

  #timeline-container-mobile ul li.year-2005 {
    left: 90px;
    top: 70px;
  }

  #timeline-container-mobile ul li.year-2006 {
    left: 175px;
    top: 120px;
  }

  #timeline-container-mobile ul li.year-2007 {
    left: 135px;
    top: 201px;
  }

  #timeline-container-mobile ul li.year-2008 {
    left: 90px;
    top: 245px;
  }

  #timeline-container-mobile ul li.year-2009 {
    left: 1px;
    top: 255px;
  }

  #timeline-container-mobile ul li.year-2010 {
    left: 105px;
    top: 315px;
  }

  #timeline-container-mobile ul li.year-2011 {
    left: 128px;
    top: 1px;
  }

  #timeline-container-mobile ul li.year-2012 {
    left: 190px;
    top: 5px;
  }

  #timeline-container-mobile ul li.year-2013 {
    left: 165px;
    top: 90px;
  }

  #timeline-container-mobile ul li.year-2014 {
    left: 85px;
    top: 75px;
  }

  #timeline-container-mobile ul li.year-2015 {
    left: 75px;
    top: 140px;
  }

  #timeline-container-mobile ul li.year-2016 {
    left: 5px;
    top: 170px;
  }

  #timeline-container-mobile ul li.year-2017 {
    left: 95px;
    top: 205px;
  }

  #timeline-container-mobile ul li.year-2018 {
    left: 138px;
    top: 211px;
  }

  #timeline-container-mobile ul li.year-2019 {
    left: 185px;
    top: 295px;
  }

  #timeline-container-mobile ul li.year-2020 {
    left: 135px;
    top: 1px;
  }

  #timeline-container-mobile ul li.year-2021 {
    left: 90px;
    top: 70px;
  }

  #timeline-container-mobile ul li.year-2022 {
    left: 1px;
    top: 120px;
  }

  #timeline-container-mobile ul li.year-now {
    left: 105px;
    top: 201px;
  }
}

/* Percentage based positioning for md and larger.  */
@media screen and (min-width: 992px) {
  #timeline-container ul li.year-1983 {
    left: 0.0%;
    top: 0.0%;
  }

  #timeline-container ul li.year-1984 {
    left: 3.2%;
    top: 23.0%;
  }

  #timeline-container ul li.year-1989 {
    left: 6.0%;
    top: 40.0%;
  }

  #timeline-container ul li.year-1993 {
    left: 10.5%;
    top: 64.5%;
  }

  #timeline-container ul li.year-1994 {
    left: 11.0%;
    top: 75.0%;
  }

  #timeline-container ul li.year-1997 {
    left: 16.2%;
    top: 55.0%;
  }

  #timeline-container ul li.year-1999 {
    left: 19.5%;
    top: 40.0%;
  }

  #timeline-container ul li.year-2000 {
    left: 21.0%;
    top: 20.0%;
  }

  #timeline-container ul li.year-2002 {
    left: 26.0%;
    top: 10.0%;
  }

  #timeline-container ul li.year-2004 {
    left: 31.2%;
    top: 20.0%;
  }

  #timeline-container ul li.year-2005 {
    left: 32.5%;
    top: 37.0%;
  }

  #timeline-container ul li.year-2006 {
    left: 35.7%;
    top: 60.0%;
  }

  #timeline-container ul li.year-2007 {
    left: 39.0%;
    top: 77.0%;
  }

  #timeline-container ul li.year-2008 {
    left: 45.2%;
    top: 65.0%;
  }

  #timeline-container ul li.year-2009 {
    left: 45.5%;
    top: 40.0%;
  }

  #timeline-container ul li.year-2010 {
    left: 50.0%;
    top: 27.0%;
  }

  #timeline-container ul li.year-2011 {
    left: 52.0%;
    top: 13.0%;
  }

  #timeline-container ul li.year-2012 {
    left: 55.2%;
    top: 20.0%;
  }

  #timeline-container ul li.year-2013 {
    left: 60.0%;
    top: 46.0%;
  }

  #timeline-container ul li.year-2014 {
    left: 61.0%;
    top: 57.0%;
  }

  #timeline-container ul li.year-2015 {
    left: 64.0%;
    top: 76.0%;
  }

  #timeline-container ul li.year-2016 {
    left: 69.0%;
    top: 61.0%;
  }

  #timeline-container ul li.year-2017 {
    left: 72.0%;
    top: 50.0%;
  }

  #timeline-container ul li.year-2018 {
    left: 71.0%;
    top: 26.0%;
  }

  #timeline-container ul li.year-2019 {
    left: 74.0%;
    top: 7.0%;
  }

  #timeline-container ul li.year-2020 {
    left: 81.0%;
    top: 15.0%;
  }

  #timeline-container ul li.year-2021 {
    left: 84.0%;
    top: 38.0%;
  }

  #timeline-container ul li.year-2022 {
    left: 85.5%;
    top: 55.0%;
  }

  #timeline-container ul li.year-now {
    left: 91.0%;
    top: 75.0%;
  }
}


/** Timeline content (each year is in its own .timeline-content container) **/
.timeline-content {
  min-height: 300px;
  display: none;
  opacity: 0;
}

.timeline-content.active {
  display: block;
  opacity: 1;
}

.timeline-content h2 {
  font-size: 41px;
  text-align: center;
  position: relative;
  color: #8c1924;
  margin: 0 0 18px 0;
  padding: 0 0 5px 0;
  border-top: 1px solid #c6c5c5;
  border-bottom: 1px solid #c6c5c5;
}

.timeline-content h2 a {
  color: #8c1924;
  display: block;
  position: absolute;
  width: 18px;
  height: 37px;
  top: 6px;
  transition: none;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
}

.timeline-content h2 a:hover {}

.timeline-content h2 .prev {
  left: 50%;
  margin-left: -90px;
  font-size: 70px;
  line-height: 45px;
}

.timeline-content h2 .next {
  right: 50%;
  margin-right: -70px;
  font-size: 70px;
  line-height: 45px;
}

.timeline-content img {
  float: right;
  margin: 0;
}

.timeline-content img.figure {
  max-width: 300px;
}

.timeline-content .caption {}

.timeline-content .caption p {
  font-size: 1.25em;
  margin: 0 0 10px 0 !important;
  padding: 5px 0 10px 82px !important;
  min-height: 62px !important;
}

#timeline-container-mobile .timeline-content img {}

#timeline-container-mobile .timeline-content img.figure {
  max-width: 100px;
}

#timeline-container-mobile .timeline-content .caption {}

#timeline-container-mobile .timeline-content .caption p {
  font-size: 1.0em;
  margin: 0 0 10px 0 !important;
  padding: 5px 0 10px 82px !important;
  min-height: 50px !important;
}

.timeline-content .caption p strong {
  background-color: #8c1924;
  color: #fff;
  padding: 3px;
}

.timeline-content .caption p.oversight {
  background: url(/themes/custom/b5aamds25/img/timeline/icon-caption-oversight.png) no-repeat;
}

.timeline-content .caption p.foundation {
  background: url(/themes/custom/b5aamds25/img/timeline/icon-caption-foundation.png) no-repeat;
}

.timeline-content .caption p.continued {
  background: url(/themes/custom/b5aamds25/img/timeline/icon-caption-continued.png) no-repeat;
}

.timeline-content .caption p.impact {
  font-size: 1.4em;
}

/** END **/