.timeline {
   position: relative;
   max-width: 800px;
   margin: 0 auto;
   padding-top: 20px;
   background-color: inherit;
   top:20px;
}
.pencil-bottom{position: relative;right: 366px;top: 20px;z-index: 1;}
.timeline:after {
   content: '';
   position: absolute;
   width:107px;
   background-color: #3290B1;
   left: 46%;
   top: 0;
   bottom: 0;
   margin-left: -2px; background:url(../png/pencil-grey-bg.png);background-repeat:repeat-y;
}
.timeline-wrap .timeline li:last-child{padding: 0px;margin: 0px;height: 0px;top: -50px;left: 0px;}
.timeline-wrap .timeline li{list-style:none;}
.timeline--first:after {
   top: 20px;
}

.era {
   text-align: center;
   position: relative;
   z-index: 1;
   padding-bottom: 20px;left: 0px;top: -45px;
}

.era__title {
   /*background-color: #3290B1;*/
   color: #EEEEEE;
   display: inline-block;
  /* padding: 10px 20px;
   border-radius: 4px;*/
   cursor: default;
}

.entry {
   padding: 10px 30px 40px 30px;
   width: 75%;
   position: relative;
   background-color: inherit;
}

.entry--right {
   margin-left: 53%;
}

.entry__content {
   padding:15px 15px;
   background-color: #EEEEEE;
   position: relative;
   border-radius: 4px;
   cursor: default;
   transition: all 0.3s ease 0s;
   /*box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.2);*/min-height:170px;
}
.timeline-wrap .timeline .entry--left .time-icon-div{float: left;width: 100px;height: 140px;border-right: 2px solid #fff;margin: 0px 20px 0px 0px;text-align: center;
display: flex;align-items: center;justify-content: center;}
.entry--left .entry__content{border-radius:70px 0px 0px 70px;right: 42%;}
.timeline-wrap{padding: 0px 0px 225px 0px;}
.timeline-outer{position:relative;float:left;width: 100%;height: 100%;margin:20px 0px 0px 0px;}
.entry--right .entry__content{border-radius:0px 70px 70px 0px;}
.entry--left .entry__content:nth-child(1){background-color:#ccc;}
.timeline-wrap .timeline li:nth-child(2) .entry__content{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fd9f05+0,ee761c+100 */
background: #fd9f05; /* Old browsers */
background: -moz-linear-gradient(left, #fd9f05 0%, #ee761c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #fd9f05 0%,#ee761c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #fd9f05 0%,#ee761c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd9f05', endColorstr='#ee761c',GradientType=0 ); /* IE6-9 */}
.timeline-wrap .timeline li:nth-child(2) .entry__content h2, .timeline-wrap .timeline li:nth-child(2) .entry__content p{text-align:right;}
.timeline-wrap .timeline .entry--right .entry__content h2, .timeline-wrap .timeline .entry--right .entry__content p{text-align:left;}
.timeline-wrap .timeline .entry--right .time-icon-div {float: right;width: 100px;height: 140px;border-left: 2px solid #fff;margin: 0px 0px 0px 20px;text-align: center; display: flex;align-items: center;justify-content: center;}
.timeline-wrap .timeline li:nth-child(3) .entry__content{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d81a84+0,fd73bf+100 */
background: #d81a84; /* Old browsers */
background: -moz-linear-gradient(left, #d81a84 0%, #fd73bf 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #d81a84 0%,#fd73bf 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #d81a84 0%,#fd73bf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d81a84', endColorstr='#fd73bf',GradientType=0 ); /* IE6-9 */}
.timeline-wrap .timeline li:nth-child(4) .entry__content{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#60cbfc+0,0498dc+100 */
background: #60cbfc; /* Old browsers */
background: -moz-linear-gradient(top, #60cbfc 0%, #0498dc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #60cbfc 0%,#0498dc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #60cbfc 0%,#0498dc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60cbfc', endColorstr='#0498dc',GradientType=0 ); /* IE6-9 */}
.timeline-wrap .timeline li:nth-child(5) .entry__content{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8ab238+0,c2ed6a+100 */
background: #8ab238; /* Old browsers */
background: -moz-linear-gradient(top, #8ab238 0%, #c2ed6a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #8ab238 0%,#c2ed6a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #8ab238 0%,#c2ed6a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8ab238', endColorstr='#c2ed6a',GradientType=0 ); /* IE6-9 */	}
.timeline-wrap .timeline li:nth-child(6) .entry__content{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ad73fa+0,56209d+100 */
background: #ad73fa; /* Old browsers */
background: -moz-linear-gradient(left, #ad73fa 0%, #56209d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ad73fa 0%,#56209d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to left, #ad73fa 0%,#56209d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ad73fa', endColorstr='#56209d',GradientType=0 ); /* IE6-9 */}*/
.entry__content:hover {
   background-color: #FFFFFF;
}
.timeline-wrap .timeline li.entry:nth-child(2):after{background-image:url(../png/step1.png);background-repeat:no-repeat;width:101px; height:102px;right: 137px;top: 50px;}
.timeline-wrap .timeline li.entry:nth-child(3):after{background-image:url(../png/step2.png);background-repeat:no-repeat;width:101px; height:102px;right: -73px;}
.timeline-wrap .timeline li.entry:nth-child(4):after{background-image:url(../png/step3.png);background-repeat:no-repeat;width:101px; height:102px;right: 137px;top: 50px;}
.timeline-wrap .timeline li.entry:nth-child(5):after{background-image:url(../png/step4.png);background-repeat:no-repeat;width:101px; height:102px;right: -73px;}
.timeline-wrap .timeline li.entry:nth-child(6):after{background-image:url(../png/step5.png);background-repeat:no-repeat;width:101px; height:102px;right: 137px;top: 50px;}
.entry:before {
   content: " ";
   height: 0;
   position: absolute;
   top: 20px;
   width: 0;
   z-index: 1;
}

.entry:after {
   content: '';
   position: absolute;
   width: 24px;
   height: 24px;
   right: -17px;
   /*background-color: #EEEEEE;
   border: 4px solid #3290B1;*/
   top: 40px;
   /*border-radius: 50%;*/
   z-index: 1;
 
}

.entry--right:after {
   right: auto;
   left: -75px;
}

.timeline-wrap .timeline li .entry__content h2  {
   color: #fff;
   margin-bottom: 0.5em;
   font-family: "Raleway", Helvetica, sans-serif;
   font-size: 22px;
   font-weight: bold;
}

.timeline-wrap .timeline li .entry__content p {
   color: #fff;
   font-family: "Raleway", Helvetica, sans-serif;
   font-size: 15px;
   line-height: 1.4;
}

@media all and (max-width: 500px) {
   .timeline:after {
      left: 33.75px;
   }
   .era {
      text-align: left;
      padding-left: 31.875px;
   }
   .entry {
      width: 100%;
      margin-left: 0;
      padding-left: 64px;
      padding-right: 20px;
   }
   .entry:before {
      right: auto;
      left: 56px;
      margin-left: 0;
   }
   .entry:after {
      left: 15px;
   }
}