
        <!-- slider -->
        <section class="slider clearfix">
            <div class="fullwidthbanner-container">
                <div class="fullwidthbanner ">
                    <ul>
                        <li data-transition="boxslide" data-slotamount="10" data-masterspeed="300">
                            <img src="img/slider/img-slider.jpg" alt="">
                            <div class="caption white lft" 
                                 data-x="20"
                                 data-y="230"
                                 data-speed="400"
                                 data-start="1000"
                                 data-easing="easeOutExpo"> 
                                 THE FRUIT OF THE SPIRIT :
                            </div>
                            <div class="caption bg-purple lft" 
                                 data-x="20"
                                 data-y="280"
                                 data-speed="500"
                                 data-start="1400"
                                 data-easing="easeOutExpo"> 
                                 <div>LOVE</div>
                            </div>
                        </li>
                        <li data-transition="boxslide" data-slotamount="10" data-masterspeed="300">
                            <img src="img/slider/img-slider2.jpg" alt="">
                            <div class="tp-caption white lft" 
                                 data-x="20"
                                 data-y="230"
                                 data-speed="400"
                                 data-start="1000"
                                 data-easing="easeOutExpo"> 
                                 THE FRUIT OF THE SPIRIT :
                            </div>
                            <div class="tp-caption bg-purple lft" 
                                 data-x="20"
                                 data-y="280"
                                 data-speed="500"
                                 data-start="1400"
                                 data-easing="easeOutExpo"> 
                                 <div>LOVE</div>
                            </div>
                        </li>
                    </ul>
                    <div class="tp-bannertimer"></div>
                </div>
            </div>  
            <div class="pattern-slider"></div>
        </section>
        <div class="content">
            <!-- lastest sermon -->
            <section class="last-sermon">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 hidden-xs hidden-sm">
                            <span><i class="icon fa fa-microphone"></i></span>
                            <h2>THE LASTEST SERMON</h2>
                        </div>
                        <div class="col-md-6 col-sm-12 col-xs-12">
                            <audio id="player1" src="assets/music/Amazing_Grace_Piano.mp3" preload="none" type="audio/mp3" controls="controls">
                                <p>Your browser leaves much to be desired.</p>          
                            </audio>
                        </div>
                        <div class="col-md-2 visible-lg visible-md text-center">
                            <a href="sermons-list.html" class="btn salmon">ALL SERMONS</a>
                        </div>
                        
                    </div>
                </div>
            </section>

            <!-- causes -->
            <section class="causes">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 ">
                            <div class="h2">
                                <h2>OUR CAUSES</h2>
                            </div>
                        </div> 
                    </div>
                    <div class="row mTop20">
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <div class="item">
                                <a href="#" title="">
                                    <div class="bloc-image">
                                        <img src="img/cause1.jpg" alt="">
                                        <div class="mask">
                                            <button class="btn white">Read more</button>
                                        </div>
                                    </div>
                                </a>
                                <div class="desc">
                                    <h3><a href="#" title="">help us Build a New Church</a></h3>
                                    <p>Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.  ntellus a odio tincidunt auctor a...</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <div class="item">
                                <a href="#" title="">
                                    <div class="bloc-image">
                                        <img src="img/cause2.jpg" alt="">
                                        <div class="mask">
                                            <button class="btn white">Read more</button>
                                        </div>
                                    </div>
                                </a>
                                <div class="desc">
                                    <h3><a href="#" title="">new highschool for african teens</a></h3>
                                    <p>Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.  ntellus a odio tincidunt auctor a...</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <div class="item">
                                <a href="#" title="">
                                    <div class="bloc-image">
                                        <img src="img/cause3.jpg" alt="">
                                        <div class="mask">
                                            <button class="btn white">Read more</button>
                                        </div>
                                    </div>
                                </a>
                                <div class="desc">
                                    <h3><a href="#" title="">HELP FOR A CHARITY HOSPITAL</a></h3>
                                    <p>Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.  ntellus a odio tincidunt auctor a...</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- quotation image -->
            <section class="quotation mBottom20 hidden-xs">
                <p class="quote">I will instruct you and teach you in the way you should go;<br> I will counsel you with my eye upon you.</p>
                <p class="source">Psalm 32:8</p>
            </section>

            <!-- upcoming events / recent news -->
            <section>
                <div class="container">
                    <div class="row">
                        <!-- upcoming events -->
                        <div class="col-md-6 col-xs-12">
                            <div class="h2">
                                <h2>UPCOMING EVENTS</h2>
                            </div>
                            <ul class="upcoming-events">
                                <li class="clearfix">
                                    <div class="col-xs-2 beta text-center"> 
                                        <span class="event-day">18</span>
                                        <span class="event-month">AUG</span>
                                    </div>
                                    <div class="col-xs-7">
                                        <h3>
                                            <a href="#" title="" class="event-title">Tuesday Prayer</a>
                                        </h3>
                                        <p class="infos">Unify Church | 9:00 AM</p>
                                    </div>
                                    <div class="col-xs-3 details delta text-right">
                                        <a href="events-list.html" class="btn outline">DETAILS</a>
                                    </div>
                                </li>
                               <li class="clearfix">
                                    <div class="col-xs-2 beta text-center"> 
                                        <span class="event-day">24</span>
                                        <span class="event-month">SEPT</span>
                                    </div>
                                    <div class="col-xs-7">
                                        <h3>
                                            <a href="#" title="" class="event-title">Bible Study Meeting</a>
                                        </h3>
                                        <p class="infos">Unify Church | 9:00 AM</p>
                                    </div>
                                    <div class="col-xs-3 details delta text-right">
                                        <a href="events-list.html" class="btn outline">DETAILS</a>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="col-xs-2 beta text-center"> 
                                        <span class="event-day">03</span>
                                        <span class="event-month">OCT</span>
                                    </div>
                                    <div class="col-xs-7">
                                        <h3>
                                            <a href="#" title="" class="event-title">Staff Members Prayer</a>
                                        </h3>
                                        <p class="infos">Unify Church | 9:00 AM</p>
                                    </div>
                                    <div class="col-xs-3 details delta text-right">
                                        <a href="events-list.html" class="btn outline">DETAILS</a>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="col-xs-2 beta text-center"> 
                                        <span class="event-day">21</span>
                                        <span class="event-month">NOV</span>
                                    </div>
                                    <div class="col-xs-7">
                                        <h3>
                                            <a href="#" title="" class="event-title">Church Picnic</a>
                                        </h3>
                                        <p class="infos">Unify Church | 9:00 AM</p>
                                    </div>
                                    <div class="col-xs-3 details delta text-right">
                                        <a href="events-list.html" class="btn outline">DETAILS</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- recent news -->
                        <div class="col-md-6 col-xs-12">
                            <div class="h2">
                                <h2>RECENT NEWS</h2>
                            </div>
                            <ul class="recent-news">
                                <li class="clearfix">
                                    <div class="col-md-6 col-sm-4 col-xs-4 beta">
                                        <img src="img/recent-news1.jpg" alt="">
                                    </div>
                                    <div class="col-md-6 col-sm-8 col-xs-8 beta">
                                        <div class="news-title">
                                            <h3><a href="" title="">Aenean sollicitudinlorem</a></h3>
                                            <div class="date">
                                                <i class="fa fa-calendar mRight5"></i>
                                                on 10th June 2014
                                            </div>
                                        </div>
                                        <div class="mTop10">
                                            <p>Elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit... </p>
                                            <a href="" title="" class="mTop20 more">Read more</a>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="col-md-6 col-sm-4 col-xs-4 beta ">
                                        <img src="img/recent-news2.jpg" alt="">
                                    </div>
                                    <div class="col-md-6 col-sm-8 col-xs-8 beta">
                                        <div class="news-title">
                                            <h3><a href="" title="">Aenean sollicitudinlorem</a></h3>
                                            <div class="date">
                                                <i class="fa fa-calendar mRight5"></i>
                                                on 10th June 2014
                                            </div>
                                        </div>
                                        <div class="mTop10">
                                            <p>Elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit... </p>
                                            <a href="" title="" class="mTop20 more">Read more</a>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            <section class="from-gallery">
                <div class="container">
                    <div class="row">
                        <div class="col-md-3 col-sm-12">
                            <p class="title">FROM THE<br>GALLERY</p>
                            <a href="" title="" class="btn white view"> View Gallery</a>
                        </div>
                        <div class="col-md-9 col-sm-12 col-xs-12">
                            <div class="col-xs-4">
                                <a href="#" title="" class="image">
                                    <div class="bloc-image">
                                        <img src="assets/gallery/img1.jpg" alt="">
                                        <div class="mask">
                                            <button><i class="fa fa-link fa-rotate-180"></i></button>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-xs-4">
                                <a href="#" title="" class="image">
                                    <div class="bloc-image">
                                        <img src="assets/gallery/img2.jpg" alt="">
                                        <div class="mask">
                                            <button><i class="fa fa-link fa-rotate-180"></i></button>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-xs-4">
                               <a href="#" title="" class="image">
                                    <div class="bloc-image">
                                        <img src="assets/gallery/img3.jpg" alt="">
                                        <div class="mask">
                                            <button><i class="fa fa-link fa-rotate-180"></i></button>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

            </section>
        </div>
