.cntl {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin: 75px 0;

}

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

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


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

}

.cntl-state {
	position: relative;
	width:100%;
	min-height: 200px;
}

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

.cntl-icon {
	border-radius: 50%;
	width: 120px;
	height: 120px;
	background-color: #4c8ec7;
	position: absolute;
	top: 0;
	text-align: center;
	line-height: 120px;
	font-size: 40px;
	color: #fff;

}

.cntl-content {
	width: 40%;
	padding: 2%;
	background-color: #88b7d5;
	float: right;
	opacity: 0;
	position: relative;
	border-radius: 0;
}

.cntl-state:nth-child(odd) .cntl-content {
	float:right;
}

.cntl-image {
	opacity:0;
	width: 50%;
	padding: 0;
}

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

.cntl-content h4 {
	font-weight: normal;
	margin-bottom: 10px;
}


/*
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(even).cntl-animate .cntl-content {
	margin-right:0;
	float:left;
	margin-left:6%;
}

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

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



.timeline-years{
	margin-top:115px;
	position: fixed;
	right: -20px;
	top: 170px;
	bottom: 0;
}

.timeline-years ul{
	margin: 0;
	list-style: none;
	padding: 0;
	font-weight: 700;
	font-size: 16px;
}


.timeline-years ul li a{
	color:grey;
}

.timeline-years ul li a:hover, .timeline-years ul li a:active{
	color:#4c8ec7;
}

.cntl-content {
	position: relative;
	background: #88b7d5;
}
.cntl-content:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-right-color: #9CB9DE;
	border-width: 15px;
}



.cntl-state:nth-child(even) .cntl-content:after{
	left: 100%;
	border-left-color:#DAE4F3;
	border-width: 15px;
	margin-top: -15px;
	border-right-color: transparent;

}

.cntl-state:nth-child(even) .cntl-content {
    background: #DAE4F3;
}


.cntl-state:nth-child(odd) .cntl-content{
	background:#9CB9DE;
}


.cntl-state:nth-child(odd) .cntl-content:after {
	border-right-color: #9CB9DE;
	border-width: 15px;
	margin-top: -15px;
}


.cntl-state:nth-child(odd) .cntl-content h4 b {
       color: #fff;
   }

.cntl-state:nth-child(even) .cntl-content h4 b {
    color: #006FB7;
}

.cntl-state .cntl-image img{

    width: 100%; /*20em*/
    height: 100%; /*20em*/
    margin: 0;/* 17*/
    position: relative;

}

.top-margin{
    margin-top: 120px;
}


/* mobile support */

@media (max-width: 600px) {

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

    .cntl-content {
        width:80%;
        float:none;
    }
    .cntl-state:nth-child(odd) .cntl-content {
        margin-right:0;
        float:left;
        margin-left: 0;
    }

    .cntl-image {
        width:80%;
    }

    .cntl-state:nth-child(even) .cntl-image {
        float:none;
    }

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

    .cntl-icon {
        left: auto;
        right: 0;
        line-height: 3;
        font-size: 30px;
        width: 90px;
        height: 90px;
    }


    .cntl-content:after {
        border-width: 10px;
        left: 100%;
        top: 50%;

    }

    .cntl-state:nth-child(even) .cntl-content:after{
        left: 100%;
        border-left-color: #DAE4F3;
        border-width: 12px;
        border-right-color: transparent;
    }

    .cntl-state:nth-child(odd) .cntl-content:after{
        left: 100%;
        border-left-color: #9CB9DE;
        border-width: 12px;
        border-right-color: transparent;
    }


    .cntl-animate .cntl-content{
        padding: 15px;
        font-size: .9em;
    }


    .cntl-state:nth-child(even).cntl-animate .cntl-content{
        margin-bottom: 20px;
    }


    .cntl-state:nth-child(even) .cntl-content:after{
        margin-top: 0;
    }



    .cntl-state-image.cntl-image-wrapper{
        background-color: transparent;
    }


    .cntl-image-wrapper .cntl-image {
        float: left;
    }

    .text-content p {
        margin: 0;
    }

	.cntl-state:nth-child(even).cntl-animate .cntl-content {
		margin-left: 0;
	}

}



@media (min-width: 601px) {
    .cntl-state:nth-child(even).cntl-animate .cntl-content {
        margin-right: 0;
        float: left;
        margin-left: 6%;
    }

}