body {
	font-family: Arial;
}


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

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

.cntl-bar {
	position: absolute;
	width: 1px;
	top: 0;
	bottom: 0;
	background-color: #d7d7d7;
}

.cntl-state {
	position: relative;
	width:100%;
	min-height: 200px;
	margin: 20px 0;
}
.noImg{
    margin:0;
    min-height:0;
}
.noImg .cntl-content{
    padding:0!important
}
.cntl-state:hover .cntl-content h4{
    color:#009ABB;
}
.cntl-state:hover .cntl-image img{
     box-shadow: 0px 4px 8px 0px rgba(68, 68, 68, 0.55);
}
.cntl-state:hover .cntl-icon{
    background-color:#009ABB
}
.cntl-state::after {
	display:block;
	content: ' ';
	clear:both;
}

.cntl-icon {
	border-radius: 50%;
	width: 20px;
	height: 20px;
	background-color: #fff;
	border: solid 2px #009ABB;
	position: absolute;
	top:50%;
    margin-top:-12px;
    transition:all 0.6s;
}

.cntl-content {
	width: 47%;
	padding: 2%;
	border-radius: 8px;
	float:left;
	opacity:1;
	margin-left:-40%;
}

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

.cntl-image {
	opacity:1;
	width: 47%;
	padding: 2%;
    overflow:hidden;
}
@media (min-width:600px){
    .cntl-content {
        width: 47%;
        padding: 2%;
        border-radius: 8px;
        float: left;
        opacity: 1;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        margin-left: -40%;
    }
    .cntl-state:nth-child(2n+2).cntl-animate .cntl-content{
        left:0;
        right:auto;
    }
    .cntl-image {
        opacity: 1;
        width: 47%;
        padding: 2%;
        padding-left:12%;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
    .cntl-state:nth-child(2n+2).cntl-animate .cntl-image{
        right:0;
        left:auto;
        padding-left:2%;
        padding-right:12%;
    }
}
.cntl-state:nth-child(2n+1) .cntl-image>img {
	float:right;
}

.cntl-image img {
	max-width:100%;
    float:left;
    transition:all 0.6s;
}

.cntl-content h4 {
    font-family:"Microsoft YaHei";
    font-size:20px;
	font-weight: 500;
    color:#292929;
	margin-bottom: 10px;
    margin-top:0;
    text-align:left;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    transition:all 0.6s;
}
.cntl-content p{
    font-size:16px;
    color:#797979;
    line-height:30px;
}

/*
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%;
}
.cntl-state:nth-child(2n+2).cntl-animate .cntl-content>h4{
    text-align:right;
}
.cntl-animate .cntl-content {
	opacity:1;
	margin-left:0%;
}

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




/* mobile support */

@media (max-width: 600px) {

	.cntl-bar {
		left:auto;
		right: 37px;
	}

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

	.cntl-image {
		width:80%;
	}

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

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

	.cntl-icon {
		left: auto;
		right: 28px;
	}
    .cntl-content h4{
        text-align:right!important;
    }

}