.timeline{
	--uiTimelineMainColor: var(--timelineMainColor, #222);
	--uiTimelineSecondaryColor: var(--timelineSecondaryColor, #fff);
  
	position: relative;
	padding-top: 3rem;
	padding-bottom: 3rem;
  }
  
  .timeline:before{
	content: "";
	width: 4px;
	height: 100%;
	background-color: var(--uiTimelineMainColor);
  
	position: absolute;
	top: 0;
  }
  
  .timeline__group{
	position: relative;
  }
  
  .timeline__group:not(:first-of-type){
	margin-top: 4rem;
  }
  
  .timeline__year{
	padding: .5rem 1.5rem;
	color: var(--uiTimelineSecondaryColor);
	background-color: var(--uiTimelineMainColor);
  
	position: absolute;
	left: 0;
	top: 0;
  }
  
  .timeline__box{
	position: relative;
  }
  
  .timeline__box:not(:last-of-type){
	margin-bottom: 30px;
  }
  
  .timeline__box:before{
	content: "";
	width: 100%;
	height: 2px;
	background-color: var(--uiTimelineMainColor);
  
	position: absolute;
	left: 0;
	z-index: -1;
  }
  
  .timeline__date{
	min-width: 65px;
	position: absolute;
	left: 0;
  
	box-sizing: border-box;
	padding: .5rem 1.5rem;
	text-align: center;
  
	background-color: var(--uiTimelineMainColor);
	color: var(--uiTimelineSecondaryColor);
  }
  
  .timeline__day{
	font-size: 2rem;
	font-weight: 700;
	display: block;
  }
  
  .timeline__month{
	display: block;
	font-size: .8em;
	text-transform: uppercase;
  }
  
  .timeline__post{
	padding: 1.5rem 2rem;
	border-radius: 2px;
	border-left: 3px solid var(--uiTimelineMainColor);
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24);
	background-color: var(--uiTimelineSecondaryColor);
  }
  
  @media screen and (min-width: 641px){
  
	.timeline:before{
	  left: 30px;
	}
  
	.timeline__group{
	  padding-top: 55px;
	}
  
	.timeline__box{
	  padding-left: 80px;
	}
  
	.timeline__box:before{
	  top: 50%;
	  transform: translateY(-50%);  
	}  
  
	.timeline__date{
	  top: 50%;
	  margin-top: -27px;
	}
  }
  
  @media screen and (max-width: 640px){
  
	.timeline:before{
	  left: 0;
	}
  
	.timeline__group{
	  padding-top: 40px;
	}
  
	.timeline__box{
	  padding-left: 20px;
	  padding-top: 70px;
	}
  
	.timeline__box:before{
	  top: 90px;
	}    
  
	.timeline__date{
	  top: 0;
	}
  }
  
  .timeline{
	--timelineMainColor: #4557bb;
	font-size: 16px;
  }
  
  /*
  =====
  DEMO
  =====
  */
  
  @media (min-width: 768px){
  
	html{
	  font-size: 62.5%;
	}
  }
  
  @media (max-width: 767px){
  
	html{
	  font-size: 55%;
	}
  }
  
  body{
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
	font-size: 1.6rem;
	color: #222;
  
	background-color: #f0f0f0;
	margin: 0;
	-webkit-overflow-scrolling: touch;   
	overflow-y: scroll;
	
	display: flex;
	flex-direction: column;
  }
  
  p{
	margin-top: 0;
	margin-bottom: 1.5rem;
	line-height: 1.5;
	font-family: 'Open Sans Condensed', sans-serif;
	color:#4557bb;
  }
  
  p:last-child{
	margin-bottom: 0;
  }
  
  .page{
	max-width: 800px;
	padding: 10rem 2rem 3rem;
	margin-left: auto;
	margin-right: auto;
	order: 1;
  }
  
  .timer {
	border-radius: 2px;
	box-shadow: 0 0 5px 0 rgba(0,0,0,.2);
	display: inline-block;
	margin: 25px;
	padding: 25px 30px;
  }
  
  .timer__item {
	display: inline-block;
	text-align: center;
  }
  
  .timer__item + .timer__item {
	margin-left: 20px;
  }
  
  .timer__value,
  .timer__label {
	display: block;
  }
  
  .timer__value {
	font-size: 28px;
	font-weight: 400;
	margin-bottom: 2px;
  }
  
  .timer__label {
	color: #777;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
  }

  
  h1{
	font-family: 'Pinyon Script', cursive;	
	color:#4557bb;
	align-content: center;
}

h2{
	font-family: 'Open Sans Condensed', sans-serif;	
	color:black;
	align-content: center;
}


hr {
	border: 0;
	clear:both;
	display:block;
	width: 96%;               
	background-color:black;
	height: 1px;
  }
  .btn-group button {
	background-color:wheat ; /* Green background */
	border: 1px white; /* Green border */
	color: white; /* White text */
	padding: 10px 60px; /* Some padding */
	cursor: pointer; /* Pointer/hand icon */
	float: left; /* Float the buttons side by side */
	font-size: medium;
  }
  
  /* Clear floats (clearfix hack) */
  .btn-group:after {
	content: "";
	clear: both;
	display: inline-block;

  }
   
  
  
  .btn-group button:not(:last-child) {
	border-right: none; /* Prevent double borders */
  }
  
  /* Add a background color on hover */
  .btn-group button:hover {
	background-color: gray;
  }