* {
  margin: 0;
  padding: 0;
}

section {
  overflow: hidden;
}

.sociales {
  text-align: center;
  margin-bottom: 20px;
}
.timeline-title {
  font-size: 34px;
  font-weight: 500;
  text-align: center;
  color: #496573;
  margin-bottom: 15px;
}

#timeline {
  width: 100%;
  height: 450px;
  margin: 0px auto 10px;
  box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.1), 0 0 0 1px hsla(230, 13%, 9%, 0.075),
    0 0.3px 0.4px hsla(230, 13%, 9%, 0.02), 0 0.9px 1.5px hsla(230, 13%, 9%, 0.045),
    0 3.5px 6px hsla(230, 13%, 9%, 0.09);
  padding: 0 !important;
  border-radius: 12px;
  overflow: hidden;
}
.timeline-group {
  position: relative;
  background: url("../images/thin-timeline.png") left 45px top 395px repeat-x;
}
.timeline-group::before {
  content: "";
  position: absolute;
  left: 0;
  top: 393px;
  width: 20px;
  height: 5px;
  background-image: linear-gradient(to right, #fff, rgba(248, 248, 248, 0));
}
.timeline-group::after {
  content: "";
  position: absolute;
  right: 0px;
  top: 393px;
  width: 20px;
  height: 5px;
  background: linear-gradient(to left, #fff, rgba(248, 248, 248, 0));
}
.dates-div {
  overflow: hidden;
}
.dates {
  width: 800px;
  height: 60px;
  overflow: hidden;
}
.dates li {
  list-style: none;
  float: left;
  width: 120px;
  height: 50px;
  font-size: 24px;
  text-align: center;
  background: url("../images/grey-dot.png") center bottom no-repeat;
}
.dates a {
  line-height: 38px;
  /* padding-bottom: 10px; */
}
.dates .selected {
  font-size: 28px;
  font-weight: bold;
  color: #517182;
}
.dates.bottom-date {
  overflow: visible;
  margin-left: 0 !important;
  display: flex;
  justify-content: space-between;
  width:100%; 
}
.dates.bottom-date li {
  font-size: 18px;
}
.dates.bottom-date p {
  color: #527081;
  padding-bottom: 0;
  cursor: pointer;
}
.dates.bottom-date p:hover {
  color: #5bc1ac;
}
.dates.bottom-date p.selected-year {
  border-bottom: solid 2px #758e9b;
}
.dates.timeline-dates {
  margin-top: 3px;
  width: 9999px !important;
  /* margin-left:0!important; */
}
.dates.timeline-dates span {
  font-size: 14pt;
}
.regions {
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.regions .selected {
  font-size: 24px;
}
.regions li {
  float: left;
  margin: 0 30px 0 0;
  padding: 0 0 0 5px;
  height: 20px;
  line-height: 20px;
  list-style: none;
}
.regions li::before {
  /* add the new bullet point */
  display: inline-block;
  content: "";
  -webkit-border-radius: 30%;
  border-radius: 50%;
  height: 14px;
  width: 14px;
  margin-right: 0.6rem;
  background-color: #bdbdbd;
}
.regions li#england-dates::before {
  background-color: #82243f;
}
.regions li#northeast-dates::before {
  background-color: #006992;
}
.regions li#southeast-dates::before {
  background-color: #c8b301;
}
.regions li#caribbean-dates::before {
  background-color: #ee5350;
}

.dates.bottom-date li {
  background: none;
}

#issues {
  width: 66800px !important;
  height: 350px;
  overflow: hidden;
}
#issues b {
  font-size: 2rem;
}
#issues li {
  width: 800px;
  height: 350px;
  list-style: none;
  float: left;
}
#issues li:last-child {
  width: 800px;
}
#issues li:first-child {
  margin-left: 225px;
}
#issues li.selected {
  width: 800px;
  height: 350px;
  list-style: none;
  float: left;
}
.desktop-dates-heading {
  color: #000;
  font-size: 48px;
  padding: 20px 40px !important;
  /* margin: 20px 0; */
  /* text-shadow: #000 1px 1px 2px; */
}
@media (max-width: 1374px) {
  #issues li.selected {
    width: 700px;
  }
  .slider p {
    font-size: 1rem;
  }
}
@media (max-width: 1254px) {
  #issues li.selected {
    width: 600px;
  }
}
@media (max-width: 1163px) {
  #issues li.selected {
    width: 500px;
  }
  #issues b {
    font-size: 1.5rem;
  }
  #issues h1 {
    margin-top: 0;
  }
  .dates.timeline-dates {
    margin-top: 10px;
  }
  .dates li {
    font-size: 20px;
  }
  .dates .selected {
    font-size: 30px;
  }
  .slider p {
    font-size: 0.9rem;
  }
}
@media (max-width: 1044px) {
  #issues li.selected {
    width: 450px;
  }
  .slider p {
    font-size: 0.85rem;
  }
  #issues li h1 {
    padding: 0px 40px !important;
    /* margin: 20px 0; */
    /* text-shadow: #000 1px 1px 2px; */
  }
}
@media (max-width: 994px) {
  #issues li:first-child {
    margin-left: 225px;
  }
}
@media (max-width: 900px) {
  #issues li.selected {
    width: 400px;
  }
  #issues li:first-child {
    margin-left: 125px;
  }
  .slider {
    padding: 0 !important;
    margin-top: 0;
  }
}
@media (max-width: 819px) {
  #timeline,
  .dates.bottom-date,
  #timeline-title-hr {
    display: none;
  }
  .section-padding {
    padding: 0;
  }
}
#issues .timeline-date {
  font-style: italic;
  font-weight: 500;
  padding: 0 30px;
}

#next,
#prev {
  position: absolute;
  top: 0;
  font-size: 70px;
  top: 170px;
  width: 50px;
  /* height: 38px; */
  background-position: 0 0;
  background-repeat: no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}
#next:hover,
#prev:hover {
  /* background-position: 0 -76px; */
}
#next {
  right: 0;
  background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' fill='currentColor' class='bi bi-caret-right-fill' viewBox='0 0 16 16'><path d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/></svg>");
}
#prev {
  left: 20px;
  background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' fill='currentColor' class='bi bi-caret-left-fill' viewBox='0 0 16 16'><path d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/></svg>");
}
#next.disabled,
#prev.disabled {
  opacity: 0.2;
}

.slider {
  margin-top: 10px;
  padding: 0 30px;
}

@media (max-width: 1164px) {
  .slider {
    margin-top: 10px;
    padding: 0 10px;
  }
}

@media (max-width: 992px) {
  .slider {
    margin-top: 10px;
    padding: 0 40px;
  }
}

@media (max-width: 900px) {
  .slider {
    margin-top: 10px;
    padding: 0 40px;
  }
}

.regions-container {
  width: 100%;
  background: #eeeeee;
  text-align: center;
  border: 1px solid #e4e4e4;
  border-radius: 12px;
}
.regions {
  margin-bottom: 30px;
}
.regions li {
  width: 100%;
  margin-left: 0;
  transition: 0.3s linear;
}

.region-highlight {
  /* font-weight: bold; */
  text-decoration: underline;
  transform: scale(1.2);
  -ms-transform: scale(1.2);
  -moz-transform: scale(1.2);
}
@media (max-width: 994px) {
  .regions li {
    font-size: 12pt;
  }
}
@media (max-width: 820px) {

  .region-highlight {
    /* font-weight: bold; */
    text-decoration: underline;
    transform: scale(1.1);
  -ms-transform: scale(1.1);
  -moz-transform: scale(1.1);
  }
}
.England.highlight {
  background: url("../images/england-dot.png") center bottom no-repeat;
}
.Northeast.highlight {
  background: url("../images/north-dot.png") center bottom no-repeat;
}
.Southeast.highlight {
  background: url("../images/south-dot.png") center bottom no-repeat;
}
.Caribbean.highlight {
  background: url("../images/caribbean-dot.png") center bottom no-repeat;
}

/*---------------------------------------
  VERTICAL STYLES            
-----------------------------------------*/
.vertical-container {
  position: relative;
}
.vertical-container:before,
.vertical-container:after {
  display: none;
  content: "";
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(147, 147, 147, 1) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}
#vertical-timeline {
  display: none;
  width: 500px;
  height: 600px;
  overflow: hidden;
  position: relative;
}
.vertical-dates {
  width: 100px;
  height: 600px;
  overflow: hidden;
  float: left;
}
.vertical-dates li {
  list-style: none;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 20px;
  padding-left: 10px;
  background: url("../images/mobile-grey-dot.png") left center no-repeat;
}
.vertical-dates a {
  line-height: 34px;
  padding-bottom: 10px;
}
.vertical-dates .vertical-selected {
  font-size: 20px;
  text-decoration: underline;
}
.vertical-dates.vertical-time {
  display: none;
  height: 55px !important;
}
.vertical-dates.vertical-time li {
  background-image: none;
  line-height: normal;
}
.vertical-dates.vertical-time a {
  line-height: normal;
  padding: 0;
  text-decoration: none;
}
.vertical-dates.vertical-time a.selected-year {
  border-bottom: solid 2px #758e9b;
}
.vertical-span {
  font-size: 16px;
}
#vertical-issues {
  width: 400px;
  height: 600px;
  overflow: hidden;
  float: left;
}
#vertical-issues li {
  width: 400px;
  height: 600px;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vertical-issues-heading {
  font-size: 24px !important;
  text-align: center !important;
  padding: 0 40px;
  margin-bottom: 15px;
}
.vertical-issues-text{
  padding: 0 30px;
}
#vertical-issues li p {
  font-size: 12pt;
  margin: 10px 20px;
  font-weight: normal;
  line-height: 22px;
}

#grad_top,
#grad_bottom {
  width: 500px;
  height: 80px;
  position: absolute;
}
#grad_top {
  top: 0;
  background: url("../images/grad_top.png") repeat-x;
}
#grad_bottom {
  bottom: 0;
  background: url("../images/grad_bottom.png") repeat-x;
}

#vertical-next,
#vertical-prev {
  position: absolute;
  left: 55%;
  font-size: 70px;
  width: 38px;
  height: 22px;
  background-repeat: no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}
#vertical-next:hover,
#vertical-prev:hover {
  background-position: 0 0;
}
#vertical-next {
  bottom: 5px;
  background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='currentColor' class='bi bi-caret-down-fill' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
}
#vertical-prev {
  top: 0;
  background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='currentColor' class='bi bi-caret-up-fill' viewBox='0 0 16 16'><path d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/></svg>");
}
#vertical-next.disabled,
#vertical-prev.disabled {
  opacity: 0.2;
}
.vertical-dates li.England-mobile.mobile-highlight {
  background: url("../images/mobile-englang-dot.png") left center no-repeat;
}
.vertical-dates li.Northeast-mobile.mobile-highlight {
  background: url("../images/mobile-northeast-dot.png") left center no-repeat;
}
.vertical-dates li.Southeast-mobile.mobile-highlight {
  background: url("../images/mobile-southeast-dot.png") left center no-repeat;
}
.vertical-dates li.Caribbean-mobile.mobile-highlight {
  background: url("../images/mobile-caribbean-dot.png") left center no-repeat;
}

@media (max-width: 819px) {
  #vertical-timeline {
    display: block;
  }
  .vertical-dates.vertical-time {
    display: flex;
    justify-content: space-between;
    height: 55px !important;
  }
  .vertical-container:before,
  .vertical-container:after {
    display: block;
  }
  .regions-container {
    margin-top: 60px;
  }
  .vertical-dates.vertical-time {
    height: 40px !important;
  }
}
@media (max-width: 520px) {
  #vertical-timeline {
    max-width: 400px;
  }
  #vertical-issues {
    width: 300px;
  }
  #vertical-issues li {
    width: 300px;
  }
}
@media (max-width: 428px) {
  #vertical-timeline {
    max-width: 330px;
  }
  #vertical-issues {
    width: 230px;
  }
  #vertical-issues li {
    width: 230px;
  }
  #vertical-issues li p {
    font-size: 12pt;
    margin: 0;
  }
  #vertical-issues li h1 {
    font-size: 20px;
  }
  .vertical-dates.vertical-time li {
    font-size: 12pt;
  }
  .regions li {
    margin: 0 !important;
  }
}