.timeline {
  color: #222;
  text-align: right;
}
.timeline h1,
.timeline ul li .content h2 {
  text-shadow: 1px 1px 1px rgba(56, 56, 56, 0.5);
}
.timeline h1 {
  background: #3d9e67;
  padding: 70px 0;
  font-size: 2.5em;
  /* text-align: center; */
}
.timeline ul {
  /* background: #faf8eb; */
  padding:  0;
  background: url('../../../images/timeline-bg.png') center top;
  background-size: contain;
      background-repeat: no-repeat;
      background-position-y: 0;
}
.timeline ul li {

  position: relative;
  margin: 0 auto;
  width: 34px;
  padding-bottom: 0;
  list-style-type: none;
}
/* .timeline ul li:not(:first-child) {
  background-position-y: -59px;
}
.timeline ul li:nth-child(even) {
  background-position-y: -52px;
} */
.timeline ul li:last-child {
  padding-bottom: 7px;
}
.timeline ul li:after{
  content: '';
  background: #fff;
  position: absolute;
  left: 50%;
  top: 27px;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border: 3px solid #cccccc;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.timeline ul li .hidden {
  opacity: 0;
}
.timeline ul li .content {
  /* background: #67CC8E; */
  position: relative;
  top: 7px;
  width: 400px;
  padding: 20px;
}

.timeline ul li .content .content-img {
  max-width: 100px;
  border-radius: 100px;
  margin: 10px 0;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
.timeline ul li .content h2 {
  color: #2f9ee5;
  padding-bottom: 0;
}
.timeline ul li .content p {
  /* text-align: center; */
}
.timeline ul li .content:after{
  content: '';
  background: #cccccc;
  position: absolute;
  top: 27px;
  width: 50px;
  height: 5px;
}
.timeline ul li:nth-child(odd) .content {
  left: 50px;
  text-align: left;
  /* background: #67CC8E;
  background: -webkit-linear-gradient(-45deg, #56BC83, #67CC8E);
  background: linear-gradient(-45deg, #56BC83, #67CC8E); */
}
.timeline ul li:nth-child(even) .content .content-img {
  float: right;
}
.timeline ul li:nth-child(even) {
   margin-top: -100px;
}
.timeline ul li:nth-child(even)::after{
  top: 27px;
}

.timeline ul li:nth-child(odd) .content:after{
  left: -32px ;
}
.timeline ul li:nth-child(even) .content {
  left: calc(-400px - 35px);
  /* background: #67CC8E;
  background: -webkit-linear-gradient(45deg, #56BC83, #67CC8E);
  background: linear-gradient(45deg, #56BC83, #67CC8E); */
}
.timeline ul li:nth-child(even) .content:after{
  right: -45px;
  top: 27px;
  width: 58px;
}
.easyPaginateNav {
  margin: auto;
  padding-left: 44%;
}
.easyPaginateNav a {
  padding: 0 9px;
      width: 20px;
      height: 20px;
      border-radius: 10px;
      background-color: #ccc;
      float: left;
      font-size: 0;
          margin: 5px;
}
.easyPaginateNav a.current { background-color: #00bff3; }
.easyPaginateNav a.first, .easyPaginateNav a.prev, .easyPaginateNav a.next, .easyPaginateNav a.last {
  display: none;
}

/* -------------------------
   ----- Media Queries -----
   ------------------------- */
@media screen and (max-width: 1020px) {
  .timeline ul li .content {
    width: 41vw;
  }

  .timeline ul li:nth-child(even) .content {
    left: calc(-41vw - 45px);
  }
}
@media screen and (max-width: 700px) {
  .timeline ul {
    background: url('../../../images/timeline-bg.png') left top;
    background-size: contain;
        background-repeat: no-repeat;
        background-position-y: 25px;
  }
  .timeline ul li {
    margin-left: 20px;
        padding-bottom: 0;
  }
  .timeline ul li:nth-child(even) {
     margin-top: -20px;
  }
  .timeline ul li .content {
    width: calc(100vw - 100px);
  }
  .timeline ul li .content h2 {
    text-align: initial;
  }
  .timeline ul li:nth-child(even) .content {
    left: 45px;
    text-align: left;
    /* background: #67CC8E;
    background: -webkit-linear-gradient(-45deg, #56BC83, #67CC8E);
    background: linear-gradient(-45deg, #56BC83, #67CC8E); */
  }
  .timeline ul li:nth-child(even) .content .content-img {
    float: none;
  }
  .timeline ul li:nth-child(odd) .content {
    clear: both;
  }

  .timeline ul li:nth-child(even) .content:after{
    left: -33px;
  }
}