<div id="kudo-wrap">
  <div class="adj-layer"
        <div class="row">
            <div class="col-md-12">
                <div class="carousel slide" data-ride="carousel" id="quote-carousel">
                    <!-- Carousel Slides / Quotes -->
                    <div class="carousel-inner text-center">
                        <!-- Quote 1 -->
                        <div class="item active">
                            <blockquote>
                                <div class="row">
                                    <div class="col-sm-8 col-sm-offset-2 quote-content">
                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
                                        <cite><span>Jan Baby</span><br>
                                                    RMT<br>
                                                    TLC Medical Massage
                                        </cite>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                        <!-- Quote 2 -->
                        <div class="item">
                            <blockquote>
                                <div class="row">
                                    <div class="col-sm-8 col-sm-offset-2 quote-content">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
                                      <cite><span>Joe Blow</span><br />
                                              Web Developer<br />
                                              Fort Collins Basement</cite>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                        <!-- Quote 3 -->
                        <div class="item">
                            <blockquote>
                                <div class="row">
                                    <div class="col-sm-8 col-sm-offset-2 quote-content">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. .</p>
                                        <cite><span>Clint Eastwood</span><br />
                                              Carmel Cowboy<br />
                                              Hog's Breath Inn</cite>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                    </div>
                    <!-- Bottom Carousel Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive avatar" src="https://s3.amazonaws.com/tlcmedicalmassage/wp-content/uploads/Jan-Alexander-La-Jolla-Shores-Beach-Square-400x400.jpg" alt="">
                        </li>
                        <li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive avatar" src="https://s3.amazonaws.com/flashypublic/Flash+Monterey+Solo.jpg" alt="">
                        </li>
                        <li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive avatar" src="https://s3.amazonaws.com/flashypublic/Clint+Eastwood.jpg" alt="">
                        </li>
                    </ol>

                    <!-- Carousel Buttons Next/Prev -->
                    <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
                    <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
                </div>
            </div>
        </div>
      
    </div>

#kudo-wrap{
  width: 100%; 
  height: 810px;
  margin: 0 auto; 
  background-image: url(https://s3.amazonaws.com/tlcmedicalmassage/wp-content/uploads/WaterStandingWave.jpg);
  background-size: cover;
}
.adj-layer {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 50px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.quote-content{
  border: 0;
  margin: 0;
  padding: 5px 45px 0 40px;
  background: none;
  color: gray;
  font-family: Georgia, serif;
  font-size: 1.5em;
  font-style: italic;
  line-height: 1.4 !important;
  margin: 0 0 0 7%;
  position: relative;
  text-shadow: 0 1px #fff;
  text-align: left;
  z-index: 1;
  width: 90%;
}
.quote-content cite{
  color: gray;
  display: block;
  font-size: .5em;
}
.quote-content cite > span{
  color: #39BBCE;
  font-size: .9em;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 1px white;
}
img.avatar{
  border: 3px solid rgba(57,187,206,0.8);
  border-radius: 50%;
}

#quote-carousel {
    padding: 0 10px 30px 10px;
    margin-top: 60px;
}
#quote-carousel .carousel-control { /* left right arrows */
    background: none;
    color: #CACACA;
    font-size: 2.3em;
    text-shadow: 0 1px white;
    margin-top: 120px;
}
#quote-carousel .carousel-indicators {
    position: relative;
    right: 50%;
    top: auto;
    bottom: 0px;
    margin-top: 20px;
    margin-right: -19px;
}
#quote-carousel .carousel-indicators li {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    opacity: 0.4;
    overflow: hidden;
    transition: all .4s ease-in;
    vertical-align: middle;
}
#quote-carousel .carousel-indicators .active {
    width: 128px;
    height: 128px;
    opacity: 1;
    transition: all .2s;
}
.item blockquote {
    border-left: none;
    margin: 0;
}
.item blockquote p:before { /* quotemarks */
  content: '\201C';
  color: #39BBCE;
  font-size: 7.5em;
  font-weight: 700;
  opacity: .3;
  position: absolute;
  top: -.4em;
  left: .05em;
  text-shadow: none;
  z-index: -300;
}