.cntl { position: relative; width: 100%; overflow: hidden; }

.jq22-container { background: url("../images/his_bg.jpg") no-repeat scroll 0 0/cover; padding: 0 5rem 2.5rem; }
@media screen and (min-width: 1920px) { .jq22-container { padding: 0 6.25rem 3.125rem; } }
.jq22-container h1.t { font-size: 1.5rem; font-weight: bold; padding: 5rem 0; text-align: center; }

.cntl-center { left: 0; right: 0; margin-left: auto; margin-right: auto; }

.cntl-bar { position: absolute; width: 10px; top: 0; bottom: 0; /*background-color: #ccc;
box-shadow: inset 0px 0px 7px -2px #000;*/ }

.cntl-bar-fill { /*background-color: #009ABB;*/ position: absolute; left: 0; right: 0; top: 0; height: 0; }

.cntl-state { position: relative; width: 100%; min-height: 200px; margin-bottom: 50px; }

.cntl-state::after { display: block; content: ' '; clear: both; }

.cntl-icon { border-radius: 50%; width: 4.5rem; height: 4.5rem; background-color: #000; /*border: solid 3px #009ABB;
box-shadow: 0px 0px 19px -9px #000;*/ position: absolute; top: 0; text-align: center; line-height: 4.5rem; color: #fff; font-size: 0.9rem; }
@media screen and (min-width: 1920px) { .cntl-icon { font-size: 1.125rem; width: 5.625rem; height: 5.625rem; line-height: 5.625rem; } }

.cntl-content { width: 50%; padding: 0 2%; /*	background-color: rgba(238, 238, 238, 0.25);
	border-radius: 8px;
	border-bottom: solid 3px #009ABB;*/ /*	float:left;*/ opacity: 0; position: relative; margin-left: -40%; }

.cntl-state:nth-child(2n+2) .cntl-content { float: right; margin-right: -40%; }

.cntl-image { opacity: 0; width: 40%; padding: 2%; }
.cntl-image p { font-size: 0.875rem; line-height: 1.5rem; }

.cntl-state:nth-child(2n+1) .cntl-image { /*float:right;*/ }

.cntl-state:nth-child(2n+2) .cntl-image { /*float:right;*/ position: absolute; right: 0; top: 3.125rem; }

.cntl-image img { width: 100%; margin-bottom: 10px; }

.cntl-content h4 { font-size: 1.125rem; font-weight: 700; margin-bottom: 10px; border-bottom: 1px solid #999999; line-height: 2.5rem; }

/*
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-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: 0; } }

/*# sourceMappingURL=cntl.css.map */
