.bg{background: url(../images/history_bg.png); position: absolute; z-index: -1; }
.bg img{width: 100%;}

.cntl {
	width: 90%;
	position: relative;
	max-width: 1200px;
	margin: 300px auto;
}

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

.cntl-bar {
	position: absolute;
	width: 6px;
	top: 0;
	bottom: 0;
	background-color: #ccc;
	box-shadow: inset 0px 0px 7px -2px #000;
}


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

}

.cntl-state {
	position: relative;
	width:100%;
	min-height: 400px;
	margin: 50px 0;
}

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

.cntl-icon {
	border-radius: 50%;
	width: 12vw;
	height: 12vw;
	background: #e62129 url(../images/up.png) center 9vw no-repeat;
	box-shadow: 0px 0px 19px -9px #000;
	position: absolute;
	top: -30%;
	text-align: center;
	line-height: 12vw;
	font-size: 4rem;
	color: #fff;
}

.cntl-content {
	width: 40%;
	padding:7% 2%;
	/*background-color: rgba(238, 238, 238, 0.25);
	border-radius: 8px;
	border-bottom: solid 3px #009ABB;*/
	float:right;
	opacity:0;
	position:relative;
	margin-left:-40%;
}

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

.cntl-image {
	opacity:0;
	width: 40%;
	padding: 7% 2%;
	float:right;
}

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

.cntl-image img {
	width:100%;
}

.cntl-content h4 {
	font-size:2rem;
	font-weight: normal;
	margin-bottom: 10px;
	color:#e62129;
}

.cntl-content p{margin-bottom: 100px; line-height: 30px; font-size: 14px;}
.cntl-content i{background: #000; width: 30px; height: 30px; border-radius: 50px; margin-left: -21%; display: table; margin-top: 30px; position: absolute;}

/*
animations
*/
.cntl-bar-fill,.cntl-content,.cntl-image {
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	transition: all 500ms ease;
}

.cntl-state:nth-child(2n+2).cntl-animate .cntl-content {
	margin-right:0%;
	text-align: right;
}

.cntl-state:nth-child(2n+2).cntl-animate .cntl-content i{right: -16.5%;}

.cntl-animate .cntl-content {
	opacity:1;
	margin-left:0%;
}

.cntl-animate .cntl-image {
	opacity:1;
}

@media(max-width: 1280px){
.cntl-icon{font-size: 3rem;top: -20%;}
.cntl-content p{margin-bottom: 80px;}
.cntl{margin: 200px auto;}
}


/* mobile support */

@media (max-width: 768px) {
  .cntl-icon{width: 25vw; height: 25vw; line-height: 25vw; background: #e62129 url(../images/up.png) center 18vw no-repeat;}
  .cntl-content p{margin-bottom: 40px;}
	.cntl-bar {
		left:auto;
		right: 60px;
	}

	.cntl-content {
		width:80%;
		float:none;
	}
	.cntl-state:nth-child(2n+2) .cntl-content {
		margi-right:0%;
		float:none;
	}
    .cntl-state:nth-child(1n+1).cntl-animate .cntl-content i{right:-13%; }
	.cntl-state:nth-child(2n+2).cntl-animate .cntl-content i {
    right: -10.5%;
}

	.cntl-image {
		width:80%;
		float:left;
	}

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

	.animate .cntl-content {
		margin-left: 2%;
	}

	.cntl-icon {
		left: auto;
		right: -24px;
	}

}

@media(max-width:414px ){
	.cntl-icon{font-size: 2rem;background-size: 20%; right: -16px;top: 0;}
	.cntl-bar { right: 30px;}
	.cntl-state{padding-top: 100px;}
	.cntl-state:nth-child(2n+2).cntl-animate .cntl-content i { right: -12.5%;}
	.cntl { margin: 60px auto;}
}