*
{
	padding:  0;
	margin:  0;
}


body
{
	background: #eee;
	display: flex;
	
 	flex:  1 1;
 	align-items: center;
 	justify-content: center;
 	align-content: center;
 	font-family: 'Poppins', sans-serif;
		font-weight: 400;
		font-size:  14px;
}

.outer-container
{
	width: 100%;
	max-width: 600px;
	height: 300px;
	display: block;
	position: relative;
}
.container
{
	width: 100%;
	height: 100%;
	
	
	display: block;
	overflow-x: scroll;
	-ms-overflow-style: none;  /* IE and Edge */
  	scrollbar-width: none;
  	position: relative;
}

.outer-container:before
{
	display: block;
	content: "";
	position: absolute;
	top:  80px;
	left:  50%;
	transform: translate(-50%, -50%);
	width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  
  border-top: 20px solid #333;
}
.container::-webkit-scrollbar {
  display: none;
}

.inner-container
{
	width:  auto;
	height: 100px;
	margin: 100px;
	margin-left: 0;
	margin-right: 0;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

.timeblock
{
	min-width: 20px;
	height: 100%;
	display: block;
	position: relative;
	
}
.timeblock p
{
	position: absolute;
	bottom:  0;
	left: 50%;
	transform: translate(-50%, 100%);
	color:  #333;
	padding-top:  5px;
}
.timeblock:after
{
	display: block;
	content:  "";
	width: 1px;
	height: 100%;
	background: #555;
	position: absolute;
	top:  50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.mini-timeblock:after
{
	height: calc(100% - 40px);
	background: #999;
}

.grey900
{
	background: #999;
}

.grey700
{
	background: #777;
}