ACCORDION

										
/*--------- Collapse Style 1 ----------*/

<div class="col-sm-12">
<div class="who-we-are">
<h4>Collapse Style 1</h4>
<div class="who-we-are-left">
<div class="service-accordion">
<div aria-multiselectable="true" role="tablist" id="accordion" class="panel-group">
<div class="panel panel-default">
<div id="headingOne" role="tab" class="panel-heading">
<h4 class="panel-title">
<a aria-controls="collapseOne" aria-expanded="false" href="#collapseOne" data-parent="#accordion" data-toggle="collapse" role="button" class="collapsed">
who we are
</a>
</h4>
</div>
<div aria-labelledby="headingOne" role="tabpanel" class="panel-collapse collapse in" id="collapseOne" aria-expanded="true">
<div class="panel-body">
<p>Who we are Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in nisi ut nulla iaculs trist iq ue in vitae nibh. Phasellus ac nisl vel erat mollis aliquam. Morbi non orci consq ua t, mat tis en im et, impe rdiet eros. Phasellus eget dolor in dui posuere consequat et sed tortor. Pe llentes que feugiat id mi at ultrices. Suspendisse at ante sollici tudin ipsum iaces. Pelle ntes que feugia id mi at ultrices.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div id="headingTwo" role="tab" class="panel-heading">
<h4 class="panel-title">
<a aria-controls="collapseTwo" aria-expanded="false" href="#collapseTwo" data-parent="#accordion" data-toggle="collapse" role="button" class="collapsed">
our mission
</a>
</h4>
</div>
<div aria-labelledby="headingTwo" role="tabpanel" class="panel-collapse collapse" id="collapseTwo" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<p>Our mission Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in nisi ut nulla iaculs trist iq ue in vitae nibh. Phasellus ac nisl vel erat mollis aliquam. Morbi non orci consq ua t, mat tis en im et, impe rdiet eros. Phasellus eget dolor in dui posuere consequat et sed tortor. Pe llentes que feugiat id mi at ultrices. Suspendisse at ante sollici tudin ipsum iaces. Pelle ntes que feugia id mi at ultrices. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div id="headingThree" role="tab" class="panel-heading">
<h4 class="panel-title">
<a aria-controls="collapseThree" aria-expanded="false" href="#collapseThree" data-parent="#accordion" data-toggle="collapse" role="button" class="collapsed">
What we do
</a>
</h4>
</div>
<div aria-labelledby="headingThree" role="tabpanel" class="panel-collapse collapse" id="collapseThree" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<p>What we do Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in nisi ut nulla iaculs trist iq ue in vitae nibh. Phasellus ac nisl vel erat mollis aliquam. Morbi non orci consq ua t, mat tis en im et, impe rdiet eros. Phasellus eget dolor in dui posuere consequat et sed tortor. Pe llentes que feugiat id mi at ultrices. Suspendisse at ante sollici tudin ipsum iaces. Pelle ntes que feugia id mi at ultrices. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div id="headingfour" role="tab" class="panel-heading">
<h4 class="panel-title">
<a aria-controls="collapsefour" aria-expanded="false" href="#collapsefour" data-parent="#accordion" data-toggle="collapse" role="button" class="collapsed">
our clients
</a>
</h4>
</div>
<div aria-labelledby="headingfour" role="tabpanel" class="panel-collapse collapse" id="collapsefour" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<p>Our clients What we do Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in nisi ut nulla iaculs trist iq ue in vitae nibh. Phasellus ac nisl vel erat mollis aliquam. Morbi non orci consq ua t, mat tis en im et, impe rdiet eros. Phasellus eget dolor in dui posuere consequat et sed tortor. Pe llentes que feugiat id mi at ultrices. Suspendisse at ante sollici tudin ipsum iaces. Pelle ntes que feugia id mi at ultrices. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
										
									

										
/*--------- Collapse Style 1 ----------*/
.service-accordion .panel-default > .panel-heading {
background: none;
}
.service-accordion .panel-title {
font-family: montserrat;
font-size: 13px;
font-weight: normal;
}
.service-accordion .panel-heading {
border-radius: 0;
padding: 0;
}
.service-accordion .panel-group .panel {
border-radius: 0;
}
.service-accordion .panel-title > a {
display: block;
font-size: 13px;
font-weight: 700;
padding: 15px 15px 15px 65px;
position: relative;
text-decoration: none;
text-transform: uppercase;
transition: all 0.3s ease 0s;
}
.service-accordion .panel {
box-shadow: none;
}
.service-accordion .panel-body > p {
color: #656565;
font-family: open sans;
}
.service-accordion .panel-group {
margin-bottom: 0;
}
.service-accordion .panel-title a.collapsed:before,
.service-accordion .panel-title a:before {
border-right: 1px solid #ddd;
content: "\f055 ";
font-family: fontawesome;
left: -1px;
padding: 15px;
position: absolute;
top: 0;
font-weight: 400;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.service-accordion .panel-title a:before {
content: "\f056";
}
.service-accordion .panel-title a:hover {
color: #333;
}
.service-accordion .panel-title > a:hover:before {
background: #ff4081;
color: #fff;
border-right: 1px solid #ff4081;
}
.service-accordion .panel-title > a:hover:after {
background: #ff4081;
color: #fff;
border-right: 1px solid #ff4081;
}