<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">How can we help?</h2>
<p class="text-center">Clarity offers a wide range of services within the field of business development and consulting.<br>
Select one of the topics below to learn more about what we have to offer or<br>
feel free to <a href="http://clarityplace.com/contact"><i>Contact Us</i></a> with any questions you might have and we will gladly try to help!
</p>
<br>
<ul class="timeline">
<li class="timeline">
<div class="timeline-image">
<img class="img-circle img-responsive" src="http://clarityplace.com/wp-content/uploads/step1b.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Step One</h4>
<h4 class="subheading">Development</h4>
</div>
<div class="timeline-body">
<p class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="line"></div>
</li>
<li class="timeline">
<div class="timeline-image">
<img class="img-circle img-responsive" src="http://clarityplace.com/wp-content/uploads/step1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Step Two</h4>
<h4 class="subheading">Design</h4>
</div>
<div class="timeline-body">
<p class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="line"></div>
</li>
<li class="timeline">
<div class="timeline-image">
<img class="img-circle img-responsive" src="http://clarityplace.com/wp-content/uploads/step2.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Step Three</h4>
<h4 class="subheading">Procurement</h4>
</div>
<div class="timeline-body">
<p class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="line"></div>
</li>
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="http://clarityplace.com/wp-content/uploads/step3-1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Step Four</h4>
<h4 class="subheading">Real Estate</h4>
</div>
<div class="timeline-body">
<p class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="line"></div>
</li>
<li class="timeline">
<div class="timeline-image">
<img class="img-circle img-responsive" src="http://clarityplace.com/wp-content/uploads/step5.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Step Five</h4>
<h4 class="subheading">Furniture, Fixtures & Equipment</h4>
</div>
<div class="timeline-body">
<p class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="line"></div>
</li>
<li>
<div class="timeline-image">
<img class="img-circle img-responsive" src="http://clarityplace.com/wp-content/uploads/step6.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Step Six</h4>
<h4 class="subheading">Project Closeout / Warranties</h4>
</div>
<div class="timeline-body">
<p class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="line"></div>
</li>
<li class="timeline">
<div class="timeline-image">
<img class="img-circle img-responsive" src="http://clarityplace.com/wp-content/uploads/stepconsult.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Post-Construct</h4>
<h4 class="subheading">Business Operations</h4>
</div>
<div class="timeline-body">
<p class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
.timeline {
position: relative;
padding:4px 0 0 0;
margin-top:22px;
list-style: none;
}
.timeline>li:nth-child(even) {
position: relative;
margin-bottom: 50px;
height: 180px;
right:-100px;
}
.timeline>li:nth-child(odd) {
position: relative;
margin-bottom: 50px;
height: 180px;
left:-100px;
}
.timeline>li:before,
.timeline>li:after {
content: " ";
display: table;
}
.timeline>li:after {
clear: both;
min-height: 170px;
}
.timeline > li .timeline-panel {
position: relative;
float: left;
width: 41%;
padding: 0 20px 20px 30px;
text-align: right;
}
.timeline>li .timeline-panel:before {
right: auto;
left: -15px;
border-right-width: 15px;
border-left-width: 0;
}
.timeline>li .timeline-panel:after {
right: auto;
left: -14px;
border-right-width: 14px;
border-left-width: 0;
}
.timeline>li .timeline-image {
z-index: 100;
position: absolute;
left: 50%;
border: 7px solid #3b5998;
border-radius: 100%;
background-color: #3b5998;
box-shadow: 0 0 5px #4582ec;
width: 200px;
height: 200px;
margin-left: -100px;
}
.timeline>li .timeline-image h4 {
margin-top: 12px;
font-size: 10px;
line-height: 14px;
}
.timeline>li.timeline-inverted>.timeline-panel {
float: right;
padding: 0 30px 20px 20px;
text-align: left;
}
.timeline>li.timeline-inverted>.timeline-panel:before {
right: auto;
left: -15px;
border-right-width: 15px;
border-left-width: 0;
}
.timeline>li.timeline-inverted>.timeline-panel:after {
right: auto;
left: -14px;
border-right-width: 14px;
border-left-width: 0;
}
.timeline>li:last-child {
margin-bottom: 0;
}
.timeline .timeline-heading h4 {
margin-top:22px;
margin-bottom: 4px;
padding:0;
color: #b3b3b3;
}
.timeline .timeline-heading h4.subheading {
margin:0;
padding:0;
text-transform: none;
font-size:18px;
color:#333333;
}
.timeline .timeline-body>p,
.timeline .timeline-body>ul {
margin-bottom: 0;
color:#808080;
}
/*Style for even div.line*/
.timeline>li:nth-child(odd) .line:before {
content: "";
position: absolute;
top: 60px;
bottom: 0;
left: 690px;
width: 4px;
height:340px;
background-color: #3b5998;
-ms-transform: rotate(-44deg); /* IE 9 */
-webkit-transform: rotate(-44deg); /* Safari */
transform: rotate(-44deg);
box-shadow: 0 0 5px #4582ec;
}
/*Style for odd div.line*/
.timeline>li:nth-child(even) .line:before {
content: "";
position: absolute;
top: 60px;
bottom: 0;
left: 450px;
width: 4px;
height:340px;
background-color: #3b5998;
-ms-transform: rotate(44deg); /* IE 9 */
-webkit-transform: rotate(44deg); /* Safari */
transform: rotate(44deg);
box-shadow: 0 0 5px #4582ec;
}
/* Medium Devices, .visible-md-* */
@media (min-width: 992px) and (max-width: 1199px) {
.timeline > li:nth-child(even) {
margin-bottom: 0px;
min-height: 0px;
right: 0px;
}
.timeline > li:nth-child(odd) {
margin-bottom: 0px;
min-height: 0px;
left: 0px;
}
.timeline>li:nth-child(even) .timeline-image {
left: 0;
margin-left: 0px;
}
.timeline>li:nth-child(odd) .timeline-image {
left: 690px;
margin-left: 0px;
}
.timeline > li:nth-child(even) .timeline-panel {
width: 76%;
padding: 0 0 20px 0px;
text-align: left;
}
.timeline > li:nth-child(odd) .timeline-panel {
width: 70%;
padding: 0 0 20px 0px;
text-align: right;
}
.timeline > li .line {
display: none;
}
}
/* Small Devices, Tablets */
@media (min-width: 768px) and (max-width: 991px) {
.timeline > li:nth-child(even) {
margin-bottom: 0px;
min-height: 0px;
right: 0px;
}
.timeline > li:nth-child(odd) {
margin-bottom: 0px;
min-height: 0px;
left: 0px;
}
.timeline>li:nth-child(even) .timeline-image {
left: 0;
margin-left: 0px;
}
.timeline>li:nth-child(odd) .timeline-image {
left: 520px;
margin-left: 0px;
}
.timeline > li:nth-child(even) .timeline-panel {
width: 70%;
padding: 0 0 20px 0px;
text-align: left;
}
.timeline > li:nth-child(odd) .timeline-panel {
width: 70%;
padding: 0 0 20px 0px;
text-align: right;
}
.timeline > li .line {
display: none;
}
}
/* Custom, iPhone Retina */
@media only screen and (max-width: 767px) {
.timeline > li:nth-child(even) {
margin-bottom: 0px;
min-height: 0px;
right: 0px;
}
.timeline > li:nth-child(odd) {
margin-bottom: 0px;
min-height: 0px;
left: 0px;
}
.timeline>li .timeline-image {
position: static;
width: 150px;
height: 150px;
margin-bottom:0px;
}
.timeline>li:nth-child(even) .timeline-image {
left: 0;
margin-left: 0;
}
.timeline>li:nth-child(odd) .timeline-image {
float:right;
left: 0px;
margin-left:0;
}
.timeline > li:nth-child(even) .timeline-panel {
width: 100%;
padding: 0 0 20px 14px;
}
.timeline > li:nth-child(odd) .timeline-panel {
width: 100%;
padding: 0 14px 20px 0px;
}
.timeline > li .line {
display: none;
}
}
