<!-- html del -->

<section id="section-6">
            <div class="wrapper">
                <h5>User Stories</h5>

                    <div class="owl-carousel owl-theme">
                        <div>
                            <img src="images/user-2.png">
                            <div class="userStory">
                                <h3>Jane Smith</h3>
                                <p>Sed do eiusmod tempor incididunt ut labore
                                    et dolore magna aliqua. Lorem ipsum dolor sit amet,
                                    consectetur adipiscing elit, sed do eiusmod.
                                </p>
                                <div class="stars">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>

                                </div>
                            </div>
                        </div>
                        <div>
                            <img src="images/user-1.png" class="activeImg">
                            <div class="userStory activeText test">
                                <h3>Jonathan Laene</h3>
                                <p>Sed do eiusmod tempor incididunt ut labore
                                    et dolore magna aliqua. Lorem ipsum dolor sit amet,
                                    consectetur adipiscing elit, sed do eiusmod.
                                </p>
                                <div class="stars">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>

                                </div>
                            </div>
                        </div>
                        <div>
                            <img src="images/user-3.png" >
                            <div class="userStory">
                                <h3>Eric Doe</h3>
                                <p>Sed do eiusmod tempor incididunt ut labore
                                    et dolore magna aliqua. Lorem ipsum dolor sit amet,
                                    consectetur adipiscing elit, sed do eiusmod.
                                </p>
                                <div class="stars">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star-half"></i>

                                </div>

                            </div>
                        </div>
                        <div>
                            <img src="images/user-2.png" >
                            <div class="userStory">
                                <h3>Jane Smith</h3>
                                <p>Sed do eiusmod tempor incididunt ut labore
                                    et dolore magna aliqua. Lorem ipsum dolor sit amet,
                                    consectetur adipiscing elit, sed do eiusmod.
                                </p>
                                <div class="stars">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </section>

/* css del */


#section-6 .wrapper .owl-carousel div .activeImg{
    width: 55% !important;
    box-shadow: 0px 15px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 15px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 15px rgba(0,0,0,0.3);
    -o-box-shadow: 0px 15px rgba(0,0,0,0.3);
    border-radius:150px;
    -webkit-transition: 0.1s;
    -o-transition: 0.1s;
    transition: 0.1s;
    padding-top:100px;
}

.owl-carousel div div h3{
    font-size:1.5em;
    font-weight:bold;
    color:#00baff;
    padding:45px 0 25px 0;
}

.owl-carousel div div p{
    line-height: 30px;
    color: gray;
    font-size:1em;
    font-weight: 300;
    padding:0 0 40px 0;
    padding:0 10px 0 10px;
}

.userStory{
    display:none;
}
.activeText{
    display: block;
}

/*jquery del*/



    $('.owl-carousel').owlCarousel({
        loop:true,
        margin:10,
        dots: false,
        nav:true,
        responsiveClass:true,
        responsive:{
            0:{
                items:1,
                nav:true
            },
            751:{
                items:3,
                nav:true
            }
        }
    })