<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 ---------->
<!---->
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,700,800,900|Poppins:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<section id="rapid">
<div class="container">
<div class="row">
<div class="slider-wrap">
<div id="carousel-example-generic" class="carousel slide vertical" data-ride="carousel">
<div class="col-md-6">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">
<h3><span>Top Tier <br/>Professional</h3>
</li>
<li data-target="#carousel-example-generic" data-slide-to="1">
<h3><span>Rapid response<br/>To Needs</span></h3>
</li>
<li data-target="#carousel-example-generic" data-slide-to="2">
<h3><span>National Network<br/>of Talent</span></h3>
</li>
</ol>
</div>
<div class="col-md-6">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="" id="tab1">
<div class="text-wrap">
<h2>High Quality</h2>
<ul class="">
<li class="">Three Levels of Screening </li>
<li class="">World-Class Service</li>
<li class="">Domain Expertise</li>
</ul>
</div>
<img src="http://via.placeholder.com/350x150" alt="tab1" class="img img-responsive">
</div>
</div>
<div class="item">
<div class="" id="tab1">
<div class="text-wrap">
<h2>High KJFBkjbkj</h2>
<ul class="">
<li class="">Three Levels of Screening </li>
<li class="">World-Class Service</li>
<li class="">Domain Expertise</li>
</ul>
</div>
<img src="http://via.placeholder.com/350x150" alt="tab1" class="img img-responsive">
</div>
</div>
<div class="item">
<div class="" id="tab1">
<div class="text-wrap">
<h2>High sdfgdgdlk</h2>
<ul class="">
<li class="">Three Levels of Screening </li>
<li class="">World-Class Service</li>
<li class="">Domain Expertise</li>
</ul>
</div>
<img src="http://via.placeholder.com/350x150" alt="tab1" class="img img-responsive">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="scroll white" href="#wasting"><span></span></a>
</section>
#rapid .panel-default:hover .panel-title {
color: #01A759;
}
#rapid {
padding: 5% 0;
}
#rapid .panel-default:hover .panel-title {
color: #01A759;
}
#rapid .panel-default .panel-title * {
font: 300 25px/37px montserrat;
color: #7c7c7c;
}
#rapid .panel-default {
box-shadow: none;
border: none;
}
#rapid .carousel-indicators li h3:hover span, #rapid .carousel-indicators li.active h3 span{
font: 500 25px/37px montserrat;
color: #01A759;
transition: .5s;
}
#rapid .panel-default .panel-title span {
display: inline-block;
margin: 0 0 0 3rem;
transition: .5s;
}
#rapid .carousel-indicators li h3::before {
content: '';
background-image: url(../img/sprite.png);
width: 55px;
height: 45px;
display: inline-block;
float: left;
margin: 0 0px 0px auto;
background-size: 260%;
background-repeat: no-repeat;
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
#rapid .carousel-indicators li:first-of-type h3::before {
background-position: 16px 12px;
}
#rapid .carousel-indicators li:first-of-type h3:hover::before, #rapid .carousel-indicators li:first-of-type.active h3::before {
background-position: 16px -32px;
}
#rapid .carousel-indicators li:nth-child(2) h3::before {
background-position: -42px 6px;
}
#rapid .carousel-indicators li:nth-child(2) h3:hover::before, #rapid .carousel-indicators li:nth-child(2).active h3::before {
background-position: -42px -34px;
}
#rapid .carousel-indicators li:last-of-type h3::before {
background-position: -94px 5px;
}
#rapid .carousel-indicators li:last-of-type h3:hover::before, #rapid .carousel-indicators li.active:last-of-type h3 .panel-title::before {
background-position: -94px -34px;
}
#rapid .text-wrap h2 {
font: 700 30px/37px montserrat;
color: #7c7c7c;
margin: 0 0rem 2rem auto;
letter-spacing: 6px;
position: relative;
}
#rapid .text-wrap h2::after {
content: '';
border-bottom: 1px solid #7c7c7c;
width: 100px;
position: absolute;
bottom: -13px;
left: 0;
}
#rapid .text-wrap ul {
padding: 0 0 0 2rem;
font: 300 20px/37px montserrat;
color: #7c7c7c;
margin: 0 0 1rem auto;
}
#rapid .text-wrap ul li {
color: inherit;
}
#rapid .carousel-indicators {
position: unset;
width: auto;
margin: 0;
}
#rapid .carousel-indicators li {
display: block;
width: 100%;
text-align: left;
background: transparent;
margin: 0;
height: auto;
border-radius: 0;
font: 300 25px/37px montserrat;
color: #7c7c7c;
border: none;
padding: 10px 15px;
}
#rapid .carousel-indicators li h3 {
display: block;
color: inherit;
text-align: left;
text-indent: 0;
}
#rapid .carousel-indicators li h3 span {
display: inline-block;
margin: 0 0 0 20px;
}
.carousel.vertical .carousel-inner .item {
-webkit-transition: 0.6s ease-in-out top;
-moz-transition: 0.6s ease-in-out top;
-ms-transition: 0.6s ease-in-out top;
-o-transition: 0.6s ease-in-out top;
transition: 0.6s ease-in-out top;
}
.carousel.vertical .active {
top: 0;
}
.carousel.vertical .next.left, .carousel.vertical .prev.right {
top: 0;
}
.carousel.vertical .active.left, .carousel.vertical .prev {
top: -100%;
}
.carousel.vertical .next,.carousel.vertical .active.right {
top: 100%;
}
.carousel.vertical .item {
left: 0;
}
/*From Bootstrap Version 3.7.7*/
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner>.item {
-webkit-transition: -webkit-transform .6s ease-in-out;
-o-transition: -o-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px
}
.carousel-inner>.item.active.right, .carousel-inner>.item.next {
left: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
.carousel-inner>.item.active.left, .carousel-inner>.item.prev {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
.carousel-inner>.item.active, .carousel-inner>.item.next.left, .carousel-inner>.item.prev.right {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
