body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  color: #232323;
}

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
            
.timeline-div {
  width: 100%;
  height: 134px;
  max-width: 800px;
  margin: -35px 0px 0px 20px;  
  justify-content: center;    
}

.timeline-div .events {
  position: relative;
  background-color: #efece4;
  height: 10px;
  width: 79%;
  border-radius: 4px;
  margin: 5em 10px;
 }

.timeline-div .events ol {
  margin: 0px -100px;
  padding: 0;
  text-align: center;
}

.timeline-div .events ul {
  list-style: none;
}

.timeline-div .events ul li {
  display: inline-block;
  width: 23.65%;
  margin: 0;
  padding: 0;
}

.timeline-div .events ul li a {
  font-family: 'Lato', sans-serif;font-weight:bold;
  font-size: 18px;
  color: #1e1530;
  text-decoration: none;
  position: relative;
  top: 25px !important;
}

.timeline-div .events ul li a:after {
  content: '';
  position: absolute;
  bottom: 22px;
  left: 50%;
  right: auto;
  height: 28px;
  width: 28px;
  border-radius: 50%;
  border: 7px solid #50b893;
  background:#efece4;
  transition: 0.3s ease;
  transform: translateX(-50%);
}


.timeline-div .events ul li a.selected:after {
  background-color: white;
  border:7px solid #50b893;
}
            
.events-content {
  width: 100%;
  height: 100px;
  max-width: 800px;
  margin: 0 auto;
  display: flex;      
  justify-content: left;
}

.events-content li {
  display: none;
  list-style: none;
}

.events-content li.selected {
  display: initial;
}

.events-content li h2 {
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 500;
  color: #919191;
  font-size: 2.5em;
} .timeline-wrap .timeline22 {  border-radius: 2px;  position: relative;  height: 0;  margin: auto;  background: #FFF;  display: block;  -webkit-animation: drawLine 1s ease-in-out;          animation: drawLine 1s ease-in-out;  -webkit-animation-delay: 1.2s;          animation-delay: 1.2s;  -webkit-animation-fill-mode: forwards;          animation-fill-mode: forwards;}.timeline-wrap .timeline22 .item-1 {  position: absolute;  top: 4%;  width: 120px;  border-radius: 10px;  height: 50px;  margin-left: 12px;  display: inline-block;  margin-top: -1vh;  -webkit-transform: scale(0.001);          transform: scale(0.001);  -webkit-animation: bounceIn 0.2s ease-in-out;          animation: bounceIn 0.2s ease-in-out;  -webkit-animation-delay: 1.8s;          animation-delay: 1.8s;  -webkit-animation-fill-mode: forwards;          animation-fill-mode: forwards;}.timeline-wrap .timeline22 .item-1:before {  color: #fff;  font-size: 23px;  display: inline-block;  width: 0;  height: 0;  margin-left: 6px;  margin-top: 26px;  -webkit-transform: rotate(180deg);          transform: rotate(180deg);}.timeline-wrap .timeline22 .item-3 {  position: absolute;  top: 9%;  width: 120px;  border-radius: 10px;  height: 50px;  margin-left: 12px;  display: inline-block;  margin-top: -1vh;  -webkit-transform: scale(0.001);          transform: scale(0.001);  -webkit-animation: bounceIn 1s ease-in-out;          animation: bounceIn 1s ease-in-out;  -webkit-animation-delay: 3.2s;          animation-delay: 3.2s;  -webkit-animation-fill-mode: forwards;          animation-fill-mode: forwards;}.timeline-wrap .timeline22 .item-3:before {  color: #fff;  font-size: 23px;  display: inline-block;  width: 0;  height: 0;  margin-left: 6px;  margin-top: 0px;  -webkit-transform: rotate(180deg);          transform: rotate(180deg);}.timeline-wrap .timeline22 .item-5 {  position: absolute;  top: 9%;  width: 120px;  border-radius: 10px;  height: 50px;  margin-left: 12px;  display: inline-block;  margin-top: -1vh;  -webkit-transform: scale(0.001);          transform: scale(0.001);  -webkit-animation: bounceIn 1s ease-in-out;          animation: bounceIn 1s ease-in-out;  -webkit-animation-delay: 4.2s;          animation-delay: 4.2s;  -webkit-animation-fill-mode: forwards;          animation-fill-mode: forwards;}.timeline-wrap .timeline22 .item-5:before {  color: #fff;  font-size: 23px;  display: inline-block;  width: 0;  height: 0;  margin-left: 6px;  margin-top: 0px;  -webkit-transform: rotate(180deg);          transform: rotate(180deg);}.timeline-wrap .timeline22 .right {  margin-left: -128px;  box-shadow: 3px 3px 0px #8d5b2f;}.timeline-wrap .timeline22 .right:before {  float: right;  -webkit-transform: rotate(0deg);          transform: rotate(0deg);  text-shadow: 3px 3px 0px #8d5b2f;  margin-right: 6px;  margin-left: 0;  margin-top: -4px;}@-webkit-keyframes bounceIn {  0% {    -webkit-transform: scale(0.0001);            transform: scale(0.0001);  }  60% {    -webkit-transform: scale(1.1);            transform: scale(1.1);  }  80% {    -webkit-transform: scale(0.9);            transform: scale(0.9);  }  100% {    -webkit-transform: scale(1);            transform: scale(1);  }}@keyframes bounceIn {  0% {    -webkit-transform: scale(0.0001);            transform: scale(0.0001);  }  60% {    -webkit-transform: scale(1.1);            transform: scale(1.1);  }  80% {    -webkit-transform: scale(0.9);            transform: scale(0.9);  }  100% {    -webkit-transform: scale(1);            transform: scale(1);  }}@-webkit-keyframes drawLine {  0% {    height: 0;  }  100% {    height: 80vh;  }}@keyframes drawLine {  0% {    height: 0;  }  100% {    height: 10vh;  }}.timeline-wrap-1 .timeline12 {  border-radius: 2px;  position: relative;  height: 0;  margin: auto;  display: block;  -webkit-animation: drawLine 1s ease-in-out;          animation: drawLine 1s ease-in-out;  -webkit-animation-delay: 1.2s;          animation-delay: 1.2s;  -webkit-animation-fill-mode: forwards;          animation-fill-mode: forwards;}.timeline-wrap-1 .timeline12 .item-11 {  position: absolute;  top: 20%;  width: 100%;  border-radius: 10px;  height: 50px;  margin-left: 12px;  display: inline-block;  margin-top: -1vh;  -webkit-transform: scale(0.001);          transform: scale(0.001);  -webkit-animation: bounceIn 0.2s ease-in-out;          animation: bounceIn 0.2s ease-in-out;  -webkit-animation-delay: 1.8s;          animation-delay: 1.8s;  -webkit-animation-fill-mode: forwards;          animation-fill-mode: forwards;}.timeline-wrap-1 .timeline12 .item-11:before {  font-size: 23px;  display: inline-block;  width: 0;  height: 0;  margin-left: 6px;  margin-top: 26px;  -webkit-transform: rotate(180deg);          transform: rotate(180deg);}.timeline-wrap-1 .timeline12 .item-33 {  position: absolute;  top: -8%;  width: 100%;  border-radius: 10px;  height: 50px;  margin-left: 12px;  display: inline-block;  margin-top: 2vh;  -webkit-transform: scale(0.001);          transform: scale(0.001);  -webkit-animation: bounceIn 1s ease-in-out;          animation: bounceIn 1s ease-in-out;  -webkit-animation-delay: 2.2s;          animation-delay: 2.2s;  -webkit-animation-fill-mode: forwards;          animation-fill-mode: forwards;}.timeline-wrap-1 .timeline12 .item-33:before {  font-size: 23px;  display: inline-block;  width: 0;  height: 0;  margin-left: 6px;  margin-top: 26px;  -webkit-transform: rotate(180deg);          transform: rotate(180deg);}.timeline-wrap-1 .timeline12 .item-55 {  position: absolute;  top:-2%;  width: 100%;  border-radius: 10px;  height: 50px;  margin-left: 12px;  display: inline-block;  margin-top: 2vh;  -webkit-transform: scale(0.001);          transform: scale(0.001);  -webkit-animation: bounceIn 1s ease-in-out;          animation: bounceIn 1s ease-in-out;  -webkit-animation-delay: 3.2s;          animation-delay: 3.2s;  -webkit-animation-fill-mode: forwards;          animation-fill-mode: forwards;}.timeline-wrap-1 .timeline12 .item-55:before {  color: #fff;  font-size: 23px;  display: inline-block;  width: 0;  height: 0;  margin-left: 6px;  margin-top: 26px;  -webkit-transform: rotate(180deg);          transform: rotate(180deg);}.timeline-wrap-1 .timeline12 .right {  margin-left: -128px;  box-shadow: 3px 3px 0px #8d5b2f;}.timeline-wrap-1 .timeline12 .right:before {  float: right;  -webkit-transform: rotate(0deg);          transform: rotate(0deg);  text-shadow: 3px 3px 0px #8d5b2f;  margin-right: 6px;  margin-left: 0;  margin-top: -4px;}@-webkit-keyframes bounceIn {  0% {    -webkit-transform: scale(0.0001);            transform: scale(0.0001);  }  60% {    -webkit-transform: scale(1.1);            transform: scale(1.1);  }  80% {    -webkit-transform: scale(0.9);            transform: scale(0.9);  }  100% {    -webkit-transform: scale(1);            transform: scale(1);  }}@keyframes bounceIn {  0% {    -webkit-transform: scale(0.0001);            transform: scale(0.0001);  }  60% {    -webkit-transform: scale(1.1);            transform: scale(1.1);  }  80% {    -webkit-transform: scale(0.9);            transform: scale(0.9);  }  100% {    -webkit-transform: scale(1);            transform: scale(1);  }}@-webkit-keyframes drawLine {  0% {    height: 0;  }  100% {    height: 80vh;  }}@keyframes drawLine {  0% {    height: 0;  }  100% {    height: 10vh;  }} .timeline-1-wrap .timeline-21 {	 margin-left:-94px;  border-radius: 2px;  position: relative;  height: 0;  display: block;  -webkit-animation: drawLine 1s ease-in-out;          animation: drawLine 1s ease-in-out;  -webkit-animation-delay: 1.0s;          animation-delay: 1.0s;  -webkit-animation-fill-mode: forwards;          animation-fill-mode: forwards;}.timeline-1-wrap .timeline-21 .item1 {  position: absolute;  top: 4%;  border-radius: 10px;  height: 50px;  display: inline-block;  margin-top: -2vh;  -webkit-transform: scale(0.001);          transform: scale(0.001);  -webkit-animation: bounceIn 1s ease-in-out;          animation: bounceIn 1s ease-in-out;  -webkit-animation-delay: 1.5s;          animation-delay: 1.5s;  -webkit-animation-fill-mode: forwards;          animation-fill-mode: forwards;}.timeline-1-wrap .timeline-21 .item1:before {  color: #fff;  font-size: 23px;  display: inline-block;  width: 0;  height: 0;  margin-top: 26px;  -webkit-transform: rotate(180deg);          transform: rotate(180deg);}.timeline-1-wrap .timeline-21 .item2 {  position: absolute;  top: 4%;  border-radius: 10px;  height: 50px;  display: inline-block;  margin-top: -2vh;  -webkit-transform: scale(0.001);          transform: scale(0.001);  -webkit-animation: bounceIn 1s ease-in-out;          animation: bounceIn 1s ease-in-out;  -webkit-animation-delay: 2.0s;          animation-delay: 2.0s;  -webkit-animation-fill-mode: forwards;          animation-fill-mode: forwards;}.timeline-1-wrap .timeline-21 .item2:before {  color: #fff;  font-size: 23px;  display: inline-block;  width: 0;  height: 0;  margin-top: 26px;  -webkit-transform: rotate(180deg);          transform: rotate(180deg);}.timeline-1-wrap .timeline-21 .item3 {  position: absolute;  top: 4%;  border-radius: 10px;  height: 50px;  display: inline-block;  margin-top: -2vh;  -webkit-transform: scale(0.001);          transform: scale(0.001);  -webkit-animation: bounceIn 1s ease-in-out;          animation: bounceIn 1s ease-in-out;  -webkit-animation-delay: 2.8s;          animation-delay: 2.8s;  -webkit-animation-fill-mode: forwards;          animation-fill-mode: forwards;}.timeline-1-wrap .timeline-21 .item3:before {  color: #fff;  font-size: 23px;  display: inline-block;  width: 0;  height: 0;  margin-top: 26px;  -webkit-transform: rotate(180deg);          transform: rotate(180deg);}.timeline-1-wrap .timeline-21 .item4 {  position: absolute;  top: 4%;  border-radius: 10px;  height: 50px;  display: inline-block;  margin-top: -2vh;  -webkit-transform: scale(0.001);          transform: scale(0.001);  -webkit-animation: bounceIn 1s ease-in-out;          animation: bounceIn 1s ease-in-out;  -webkit-animation-delay: 3.5s;          animation-delay: 3.5s;  -webkit-animation-fill-mode: forwards;          animation-fill-mode: forwards;}.timeline-1-wrap .timeline-21 .item4:before {  color: #fff;  font-size: 23px;  display: inline-block;  width: 0;  height: 0;  margin-top: 26px;  -webkit-transform: rotate(180deg);          transform: rotate(180deg);}
@media (max-width:425px){.timeline-div .events ul li a{font-size:14px;top:30px !important;}.timeline-1-wrap .timeline-21{margin-left: -61px !important;}.timeline-div{margin: -35px 0px 0px 12px !important;}.timeline-1-wrap .timeline-21 .item1{top:6% !important;}	}

@media (max-width:600px){.timeline-wrap .timeline22 .item-3{margin-left:39px !important;}.timeline-wrap .timeline22 .item-5 {margin-left:39px !important;}	
.timeline-div .events ol{margin: 0px -51px;}		
}@media (max-width:375px){.timeline-wrap .timeline22 .item-3{margin-left:41px !important;}.timeline-wrap .timeline22 .item-5 {margin-left:41px !important;}	}@media (max-width:360px){.timeline-wrap .timeline22 .item-3{margin-left:39px !important;}.timeline-wrap .timeline22 .item-5 {margin-left:39px !important;}	}@media (max-width:320px){.timeline-div .events ul li a{font-size:12px !important;}}