:root{
  --primary-color:#425b84;
  --secondary-color: #5b7bb4;
  --max-width: 1100px;
}
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@1,200&display=swap');
*{
  box-sizing: border-box;
  margin:0;
  padding:0;
}
body{
  font: normal 1rem/1.5 'Nunito Sans', sans-serif;
  background: var(--primary-color);
  color:#fff;
  padding-bottom: 50px;
  overflow-x: hidden;
}
#main-header{
  background:  var(--secondary-color);
  padding: 4rem 0;
} 
.container{
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;    
}
h1{
  font-size: 2.3rem;
}

#timeline ul{
  background-color: var(--primary-color);
  padding:50px 0;
}
#timeline ul li{
  list-style: none;
  position: relative;
  width:6px;
  margin:0rem auto;
  padding-top:50px;
  background:#fff;
}

#timeline ul li div{
  position:relative;
  bottom:0;
  width:400px;
  padding:1rem;
  background-color: var(--secondary-color);
  transition: all .5s ease-in-out;
  visibility: hidden;
  opacity: 0;
}
#timeline ul li:nth-child(odd) div{
  left:40px;
  transform: translate(200px, 0);
}
#timeline ul li:nth-child(even) div{
  left:-434px;
  transform: translate(-200px, 0);
}
#timeline ul li:after{
  content: ' ';
  width:25px;
  height: 25px;
  background: #fff;
  position:absolute;
  bottom:0;
  transform:  translatex(-40%);
  border-radius: 50%; 
  transition: all 0.5s ease-in;
}


/* arrow base */
#timeline div:before{
 content: '';
 position: absolute;
 bottom:5px;
 height:0;
 width:0;
 border-style: solid;
}


/* arrow */
#timeline ul li:nth-child(odd) div:before{
  left:-15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent var(--secondary-color)  transparent transparent;
}

#timeline ul li:nth-child(even) div:before{
  right:-15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent var(--secondary-color);
}
#timeline ul li.show div{
  transform: none;
  visibility: visible;
  opacity: 1;
}
#timeline ul li.show:after{
  background: var(--secondary-color);
}

@media(max-width:900px) and (min-width:599px){
  #timeline ul li div{
    width:250px;
  }
  #timeline ul li:nth-child(even) div{
    left: -284px;
  }
}


@media(max-width:600px){
  #timeline ul li{
    margin-left: 20px;
  }
  #timeline ul li div{
    width: calc(100vw -90px)
  }
  #timeline ul li:nth-child(even) div{
    left: 40px;
  }
  #timeline ul li:nth-child(even) div:before{
    left:-15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent var(--secondary-color)  transparent transparent;
  }
}