.cntl {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-top: 60px;
}

.cntl-center {
	left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}

.cntl-bar {
	position: absolute;
	width: 4px;
	top: 5px;
	bottom: 150px;
	background-color: #BFBFBF;
	/*box-shadow: inset 0px 0px 7px -2px #000;*/
}

.cntl-bar-fill {
	background-color: #FFF;
	position: absolute;
	left:0;
	right:0;
	top:0;
	height:0;
}

.cntl-state {
	position: relative;
	width:100%;
	margin-bottom: 80px;
}

.cntl-state::after {
	display:block;
	content: ' ';
	clear:both;
}

.cntl-state .cntl-icon {
	width: 70px;
	height: 310px;
	position: absolute;
	top: 0;
	text-align: center;
	line-height: 65px;
	font-size: 35px;
	color: #FFF;
	
}
.cntl-states .cntl-state:first-child .cntl-icon {
	/*-webkit-transition-delay: 0s;  Safari */
    /*transition-delay: 0s; */
}
.cntl-state.cntl-animate .cntl-icon .hexagon {
	background-color: #479FB6;
}
.cntl-content {
	width: 30%;
	padding: 0 2%;
	background-color: transparent;
	border-radius: 8px;
	/*border-bottom: solid 3px #CCC;*/
	float: left;
	opacity: 0;
	position: relative;
	/*margin-left: 15%;*/
}

.cntl-state:nth-child(even) .cntl-content::before {
    top: 24px;
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: #FFF;
}

.cntl-state:nth-child(2n+2) .cntl-content {
	float: right;
	margin-right: 10%;
}
.cntl .cntl-state:last-child {
	margin-bottom: 0;
}
.cntl-image {
	opacity: 0;
	width: 35%;
	padding: 2%;
}

.cntl-state:nth-child(2n+1) .cntl-image {
	float:right;
}

.cntl-content h3 {
	font-size: 22px;
	font-weight: 400;
	margin-top: 5px;
	margin-bottom: 12px;
}

.cntl-state .cntl-icon .hexagon {
  position: relative;
  width: 70px; 
  height: 35px;
  background-color: #BFBFBF;
  margin: 20px 0;
  border-left: solid 3px #ffffff;
  border-right: solid 3px #ffffff;
  -moz-transition: background-color .3s linear;
    -o-transition: background-color .3s linear;
    -webkit-transition: background-color .3s linear;
    transition: background-color .3s linear;
    /*-webkit-transition-delay: 1s;  Safari */
    /*transition-delay: 1s;*/
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 49.50px;
  height: 49.50px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 7.2513px;
}

.hexagon:before {
  top: -25px;
  border-top: solid 4.2426px #ffffff;
  border-right: solid 4.2426px #ffffff;
}

.hexagon:after {
  bottom: -25px;
  border-bottom: solid 4.2426px #ffffff;
  border-left: solid 4.2426px #ffffff;
}

/*
animations
*/
.cntl-bar-fill {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}
.cntl-content {
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	-ms-transition: all 0.8s ease;
	transition: all 0.8s ease;
	/*-webkit-transition-delay: 1.2s;  Safari */
    /*transition-delay: 1.2s; */
}
.cntl-image {
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	-ms-transition: all 0.8s ease;
	transition: all 0.8s ease;
	-webkit-transition-delay: 0.5s; /* Safari */
    transition-delay: 0.5s;
}

.cntl-state:nth-child(2n+2) .cntl-content {
	margin-right: 10%;
}

.cntl-animate .cntl-content {
	opacity: 1;
	margin-left: 10%;
	line-height: 1.4;
}

.cntl-animate .cntl-image {
	opacity: 1;
}
.cntl-state:nth-child(2n+2) .cntl-image img {
	float: right;
}
.line-bg {
	position: absolute;
	left: 0;
	right: 0;
	width: 4px;
    height: 100%; 
    background-color: #CCC;
    margin: 0 auto;
}
.line-fill {
	position: absolute;
	left: 0;
	right: 0;
	width: 4px;
    height: 0;
    background-color: #FFF;
    margin: 0 auto;
    -webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
	-webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
}
.cntl-animate .line-fill {
    height: 100%;
}
/*.btn-timeline {
    float: right;
}*/

/* mobile support */

@media (max-width: 600px) {

	.cntl-bar {
		left: auto;
		right: 32px;
	}
	.cntl-animate .cntl-content {
    	margin-left: 0;
	}
	.cntl-content {
		width: 75%;
		float: none;
		padding: 0 0 4% 4%;
	}
	.cntl-state:nth-child(2n+2) .cntl-content {
		margin-right: 0%;
		float: none;
	}

	.cntl-image {
		width: 75%;
	}

	.cntl-state:nth-child(2n+1) .cntl-image {
		float: none;
	}
	
	.animate .cntl-content {
		margin-left: 2%;
	}

	.cntl-icon {
		left: auto;
		right: 0;
	}
	.cntl-state:nth-child(even) .cntl-content::before {
	    top: 24px;
		left: 100%;
		border-color: transparent;
		border-right-color: transparent;
		border-left-color: #FFF;
	}
	.cntl-state .cntl-icon {
		height: 100%;
	}
	.line-bg {
		height: 100%;
	}
	.cntl-animate .line-fill {
    	height: 100%;
	}
	.btn-timeline {
		float: left;
	}

}