.brexit-timeline * {
     box-sizing: border-box;
}

.timeline {
     margin-top: 20px;
     overflow: auto;
     position: relative;
     width: 100%;
}

.timeline hr {
     margin: 0px 0px 20px;
}

.timeline::before {
     background-color: #5b5555;
     content: "";
     height: 100%;
     left: 50%;
     margin: 0px auto;
     position: absolute;
     top: 0px;
     width: 4px;
}

.timeline h2 {
     background: #5b5555 none repeat scroll 0% 0%;
     color: white;
     font-size: 30px;
     margin: 0px auto;
     padding-left: 10px;
     padding-right: 10px;
     position: relative;
     text-align: center;
     width: 200px;
     z-index: 2;
}

.timeline h3 {
     border: 0px none;
     color: inherit;
     font-weight: 300;
}

.timeline .timeline-items {
     list-style-type: none;
     overflow: hidden;
     padding-left: 0px;
     padding-top: 110px;
}

.timeline .timeline-items .timeline-item {
     background-color: white;
     left: -10px;
     margin-bottom: 100px;
     padding: 20px;
     position: relative;
     width: 45%;
}

.timeline .timeline-items .timeline-item h3 {
     font-weight: 700;
}

.timeline .timeline-items .timeline-item.is-hidden {
     visibility: hidden;
}

.timeline .timeline-items .timeline-item a {
     font-weight: 700;
}

.timeline .timeline-items .timeline-item .time::before {
     content: "";
     font-family: FontAwesome,sans-serif;
     margin-right: 10px;
}

.timeline .timeline-items .timeline-item::before {
     content: "";
     height: 0px;
     position: absolute;
     right: -1em;
     top: 0px;
     width: 0px;
}

.timeline .timeline-items .timeline-item::after {
     background: #5b5555 none repeat scroll 0% 0%;
     border-radius: 100%;
     content: "";
     height: 30px;
     left: calc(100% + 10.4%);
     position: absolute;
     top: -15px;
     width: 30px;
}

.timeline .timeline-items .timeline-item:nth-of-type(2n+1) {
     background-color: #5bc5f2;
     color: #000000;
}

.timeline .timeline-items .timeline-item:nth-of-type(2n+1) hr {
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0); 
}

.timeline .timeline-items .timeline-item:nth-of-type(2n+1) a {
     color: #002d72;
}

.timeline .timeline-items .timeline-item:nth-of-type(2n+1)::before {
     border-right: 1em solid transparent;
     border-top: 1em solid #5bc5f2;
}

.timeline .timeline-items .timeline-item:nth-of-type(2n) {
     background-color: #0066b2;
     color: white;
}

.timeline .timeline-items .timeline-item:nth-of-type(2n) hr {
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0); 
}

.timeline .timeline-items .timeline-item:nth-of-type(2n) a {
     color: #ffffff;
}

.timeline .timeline-items .timeline-item:nth-of-type(2n)::before {
     border-right: 1em solid transparent;
     border-top: 1em solid #0066b2;
}

.timeline .timeline-items .timeline-item.inverted {
     left: 54%;
     position: relative;
     text-align: right;
}

.timeline .timeline-items .timeline-item.inverted::before {
     content: "";
     height: 0px;
     left: -1em;
     position: absolute;
     top: 0px;
     width: 0px;
}

.timeline .timeline-items .timeline-item.inverted::after {
     background: #5b5555 none repeat scroll 0% 0%;
     border-radius: 100%;
     content: "";
     height: 30px;
     left: calc(-8.78% - 13px);
     position: absolute;
     top: -15px;
     width: 30px;
}

.timeline .timeline-items .timeline-item.inverted:nth-of-type(2n+1) {
     background-color: #5bc5f2;
     color: #000000;
}

.timeline .timeline-items .timeline-item.inverted:nth-of-type(2n+1) hr {
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0); 
}

.timeline .timeline-items .timeline-item.inverted:nth-of-type(2n+1) a {
     color: #002d72;
}

.timeline .timeline-items .timeline-item.inverted:nth-of-type(2n+1)::before {
     border-left: 1em solid transparent;
     border-top: 1em solid #5bc5f2;
}

.timeline .timeline-items .timeline-item.inverted:nth-of-type(2n) {
     background-color: #0066b2;
     color: white;
}

.timeline .timeline-items .timeline-item.inverted:nth-of-type(2n) hr {
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0); 
}

.timeline .timeline-items .timeline-item.inverted:nth-of-type(2n) a {
     color: #ffffff;
}

.timeline .timeline-items .timeline-item.inverted:nth-of-type(2n)::before {
     border-left: 1em solid transparent;
     border-top: 1em solid #0066b2;
}

.timeline .timeline-items .timeline-item.centered {
     position: relative;
     text-align: justify;
     width: 100%;
}

.timeline .timeline-items .timeline-item.centered::before {
     content: "";
     height: 0px;
     left: calc(50% - 4px);
     position: absolute;
     top: -12px;
     width: 0px;
}

.timeline .timeline-items .timeline-item.centered::after {
     display: none;
}

.timeline .timeline-items .timeline-item.centered:nth-of-type(2n+1) {
     background-color: #5bc5f2;
     color: #000000;
}

.timeline .timeline-items .timeline-item.centered:nth-of-type(2n+1) hr {
      border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0); 
}

.timeline .timeline-items .timeline-item.centered:nth-of-type(2n+1) a {
     color: #002d72;
}

.timeline .timeline-items .timeline-item.centered:nth-of-type(2n+1)::before {
     border-color: -moz-use-text-color rgba(0, 0, 0, 0) #5bc5f2;
     border-style: none solid solid;
     border-width: 0px 1em 1em;
}

.timeline .timeline-items .timeline-item.centered:nth-of-type(2n) {
     background-color: #0066b2;
     color: white;
}

.timeline .timeline-items .timeline-item.centered:nth-of-type(2n) hr {
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0); 
}

.timeline .timeline-items .timeline-item.centered:nth-of-type(2n) a {
     color: #ffffff;
}

.timeline .timeline-items .timeline-item.centered:nth-of-type(2n)::before {
     border-color: -moz-use-text-color rgba(0, 0, 0, 0) #0066b2;
     border-style: none solid solid;
     border-width: 0px 1em 1em;
}

.timeline .timeline-items .timeline-item.centered.grey {
     background-color: #75787b;
     color: white;
}

.timeline .timeline-items .timeline-item.centered.grey hr {
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #FFFFFF, #f0f0f0); 
}

.timeline .timeline-items .timeline-item.centered.grey a {
     color: #cccccc;
}

.timeline .timeline-items .timeline-item.centered.grey::before {
     border-color: -moz-use-text-color rgba(0, 0, 0, 0) #75787b;
     border-style: none solid solid;
     border-width: 0px 1em 1em;
}

@media screen and (max-width: 640px) {
  .timeline .timeline-items .timeline-item:nth-of-type(2n), .timeline .timeline-items .timeline-item:nth-of-type(2n+1) { position: relative; margin-bottom: 100px; left: -10px; padding: 20px; width: 100%; text-align: left; }
  .timeline .timeline-items .timeline-item::before, .timeline .timeline-items .timeline-item.inverted::before { content: ""; width: 0px; height: 0px; position: absolute; left: calc(50% - 4px); top: -12px; }
  .timeline .timeline-items .timeline-item::after, .timeline .timeline-items .timeline-item.inverted::after { display: none; }
  .timeline .timeline-items .timeline-item:nth-of-type(2n)::before { border-width: 0px 1em 1em; border-style: none solid solid; border-color: -moz-use-text-color rgba(0, 0, 0, 0) #0066b2; }
  .timeline .timeline-items .timeline-item:nth-of-type(2n+1)::before { border-width: 0px 1em 1em; border-style: none solid solid; border-color: -moz-use-text-color rgba(0, 0, 0, 0) #5bc5f2; }
  .timeline .timeline-items .timeline-item.inverted:nth-of-type(2n)::before { border-width: 0px 1em 1em; border-style: none solid solid; border-color: -moz-use-text-color rgba(0, 0, 0, 0) #0066b2; }
  .timeline .timeline-items .timeline-item.inverted:nth-of-type(2n+1)::before { border-width: 0px 1em 1em; border-style: none solid solid; border-color: -moz-use-text-color rgba(0, 0, 0, 0) #5bc5f2; }
}