<div class="testimonial8">
<div class="owl-carousel owl-theme testi8 text-center">
<!-- item -->
<div class="item">
<div class="bg" style="background-image:url(https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/testimonial/background1.jpg)">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 col-md-10">
<h3 class="text-white mb-4">"Needless to say we are extremely satisfied with the results. Thank you for making it painless, pleasant!"</h3>
<a href="#" class="play-icon db text-decoration-none" data-toggle="modal" data-target="#exampleModal"><i class="icon-control-play"></i></a>
<h5 class="text-white mb-0 mt-3 font-weight-normal">Mark Freeman</h5>
<span class="text-white font-13">VP of Design at xyz inc.</span>
</div>
</div>
</div>
</div>
</div>
<!-- item -->
<div class="item">
<div class="bg" style="background-image:url(https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/testimonial/background1.jpg)">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 col-md-10">
<h3 class="text-white mb-4">"Needless to say we are extremely satisfied with the results. Thank you for making it painless, pleasant!"</h3>
<a href="#" class="play-icon db text-decoration-none" data-toggle="modal" data-target="#exampleModal"><i class="icon-control-play"></i></a>
<h5 class="text-white mb-0 mt-3 font-weight-normal">Mark Freeman</h5>
<span class="text-white font-13">VP of Design at xyz inc.</span>
</div>
</div>
</div>
</div>
</div>
<!-- item -->
<!-- item -->
<div class="item">
<div class="bg" style="background-image:url(https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/testimonial/background1.jpg)">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 col-md-10">
<h3 class="text-white mb-4">"Needless to say we are extremely satisfied with the results. Thank you for making it painless, pleasant!"</h3>
<a href="#" class="play-icon db text-decoration-none" data-toggle="modal" data-target="#exampleModal"><i class="icon-control-play"></i></a>
<h5 class="text-white mb-0 mt-3 font-weight-normal">Mark Freeman</h5>
<span class="text-white font-13">VP of Design at xyz inc.</span>
</div>
</div>
</div>
</div>
</div>
<!-- item -->
</div>
<!-- Popup -->
<div class="modal fade" id="exampleModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Watch video</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="yt-player">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/DDwbjWCgxVM?" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<!-- Popup -->
</div>
@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500);
.testimonial8 {
font-family: "Montserrat", sans-serif;
color: #8d97ad;
font-weight: 300;
}
.testimonial8 h1,
.testimonial8 h2,
.testimonial8 h3,
.testimonial8 h4,
.testimonial8 h5,
.testimonial8 h6 {
color: #3e4555;
}
.testimonial8 h5 {
line-height: 22px;
font-size: 18px;
}
.testimonial8 .font-13 {
font-size: 13px;
}
.testimonial8 .subtitle {
color: #8d97ad;
line-height: 24px;
}
.testimonial8 .testi8 {
margin-bottom: 80px;
}
.testimonial8 .testi8 .bg {
background-size: cover;
padding: 150px 0;
}
.testimonial8 .testi8 .play-icon {
font-size: 34px;
color: #ffffff;
}
.testimonial8 .testi8 .owl-dots {
display: inline-block;
position: relative;
top: -45px;
}
.testimonial8 .testi8 .owl-dots .owl-dot {
border-radius: 100%;
width: 70px;
height: 70px;
background-size: cover;
margin-right: 10px;
opacity: 0.4;
cursor: pointer;
}
.testimonial8 .testi8 .owl-dots .owl-dot span {
display: none;
}
.testimonial8 .testi8 .owl-dots .owl-dot.active,
.testimonial8 .testi8 .owl-dots .owl-dot:hover {
opacity: 1;
}
$('.testi8').owlCarousel({
loop: true,
margin: 20,
nav: false,
dots: true,
autoplay: true,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: false
},
1650: {
items: 1
}
}
})