{% extends "layouts/default.html" %}

{% block content %}

<div class="section">
    <div class="section-background">
        <div class="section-bg-image section-bg-image-size-lg-contain section-bg-image-position-xs-top section-bg-image-paralax --o--opacity-5 --o--demo-bg-image-6-flipped"></div>
    </div>
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-10 offset-md-1">
                    <h2 class="--o--heading-bordered text-capitalize --o--os-animation m-t-25 m-b-3"  data-os-animation="fadeIn" data-os-animation-delay=".3s">
                        <small class="text-muted font-italic">Featured</small> Sermon
                    </h2>
                </div>
                <div class="col-md-10 offset-md-1">
                    <div class="card card-hero --o--shadow-2 --o--shadow-hover-8 --o--transition --o--os-animation m-b-9" data-os-animation="fadeIn" data-os-animation-delay=".6s">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="card-img-container" >
                                    <img class="card-img" src="https://placehold.it/640x800" alt="Card image">
                                </div>
                            </div>
							<div class="col-lg-6">
								<div class="card-block">
									<h2 class="card-title m-b-2">The Ingredients Of A Life Of Faith</h2>
                                    <h6 class="card-subtitle font-italic text-muted m-b-3">by <a href="staff-single.html">Christos</a> about <a href="sermons-list.html#">God & All</a></h6>
									<p class="card-text">Learn about your life's mission and then do it!</p>
								</div>
    							<div class="card-footer">
                                    <div class="--o--icon-set pull-xs-right">
                                        <a class="--o--icon-set-item magnific-audio --o--transition text-muted" href="http://oxy-wp-media.s3.amazonaws.com/divinity-html/sermon.mp3">
                                            <i class="fa fa-headphones"></i>
                                        </a>
                                        <a class="--o--icon-set-item --o--transition text-muted magnific-youtube" href="https://www.youtube.com/watch?t&v=GKWYhSEml0w">
                                            <i class="fa fa-play-circle"></i>
                                        </a>
                                        <a target="_blank" class="--o--icon-set-item --o--transition text-muted" href="http://oxy-wp-media.s3.amazonaws.com/divinity-html/sermon.pdf">
                                            <i class="fa fa-file-text-o"></i>
                                        </a>
                                    </div>
                                </div>
							</div>
						</div>
                    </div>
                </div>

                <div class="col-md-10 offset-md-1">
                    <h2 class="--o--heading-bordered text-capitalize --o--os-animation m-b-3"  data-os-animation="fadeIn" data-os-animation-delay=".3s">
                        <small class="text-muted font-italic">Other</small> Sermons
                    </h2>
                </div>

                <div class="col-md-10 offset-md-1">
                    <div class="card card-horizontal card-hero --o--shadow-8 --o--shadow-hover-16 --o--transition --o--os-animation m-b-30" data-os-animation="fadeIn" data-os-animation-delay=".6s">
                        <div class="row">
                            <div class="col-lg-6">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item --o--transition --o--shadow-hover-8">
                                        <div class="list-group-item-content text-truncate">
                                            <h5 class="list-group-item-title m-b-0 pull-xs-left text-truncate">
                                                <i class="fa fa-microphone text-muted p-r-2 "></i>
                                                <a href="single-sermon.html">
                                                    Praise God For His Deliverance From Your Fears
                                                </a>
                                            </h5>
                                        </div>
                                        <div class="list-group-item-actions">
                                            <div class="--o--icon-set --o--icon-set-expandable --o--transition pull-xs-right">
                                                <a class="--o--icon-set-item --o--transition --o--icon-set-item-trigger text-muted" href="#">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                </a>
                                                <a class="--o--icon-set-item --o--transition --o--icon-set-item-close " href="#">
                                                    <i class="fa fa-close"></i>
                                                </a>
                                                 <a class="--o--icon-set-item magnific-audio --o--transition text-muted" href="http://oxy-wp-media.s3.amazonaws.com/divinity-html/sermon.mp3">
                                                    <i class="fa fa-headphones"></i>
                                                </a>
                                                <a class="--o--icon-set-item --o--transition text-muted magnific-youtube" href="https://www.youtube.com/watch?t&v=GKWYhSEml0w">
                                                    <i class="fa fa-play-circle"></i>
                                                </a>
                                                <a target="_blank" class="--o--icon-set-item --o--transition text-muted" href="http://oxy-wp-media.s3.amazonaws.com/divinity-html/sermon.pdf">
                                                    <i class="fa fa-file-text-o"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="list-group-item --o--transition --o--shadow-hover-8">
                                        <div class="list-group-item-content text-truncate">
                                            <h5 class="list-group-item-title m-b-0 pull-xs-left text-truncate">
                                                <i class="fa fa-microphone text-muted p-r-2 "></i>
                                                <a href="single-sermon.html">
                                                    Overcoming Fear In Witnessing
                                                </a>
                                            </h5>
                                        </div>
                                        <div class="list-group-item-actions">
                                            <div class="--o--icon-set --o--icon-set-expandable --o--transition pull-xs-right">
                                                <a class="--o--icon-set-item --o--transition --o--icon-set-item-trigger text-muted" href="#">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                </a>
                                                <a class="--o--icon-set-item --o--transition --o--icon-set-item-close " href="#">
                                                    <i class="fa fa-close"></i>
                                                </a>
                                                 <a class="--o--icon-set-item magnific-audio --o--transition text-muted" href="http://oxy-wp-media.s3.amazonaws.com/divinity-html/sermon.mp3">
                                                    <i class="fa fa-headphones"></i>
                                                </a>
                                                <a target="_blank" class="--o--icon-set-item --o--transition text-muted" href="http://oxy-wp-media.s3.amazonaws.com/divinity-html/sermon.pdf">
                                                    <i class="fa fa-file-text-o"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="list-group-item --o--transition --o--shadow-hover-8">
                                        <div class="list-group-item-content text-truncate">
                                            <h5 class="list-group-item-title m-b-0 pull-xs-left text-truncate">
                                                <i class="fa fa-microphone text-muted p-r-2 "></i>
                                                <a href="single-sermon.html">
                                                    Gifts And Callings Are Without Repentance
                                                </a>
                                            </h5>
                                        </div>
                                        <div class="list-group-item-actions">
                                            <div class="--o--icon-set --o--icon-set-expandable --o--transition pull-xs-right">
                                                <a class="--o--icon-set-item --o--transition --o--icon-set-item-trigger text-muted" href="#">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                </a>
                                                <a class="--o--icon-set-item --o--transition --o--icon-set-item-close " href="#">
                                                    <i class="fa fa-close"></i>
                                                </a>
                                                 <a class="--o--icon-set-item magnific-audio --o--transition text-muted" href="http://oxy-wp-media.s3.amazonaws.com/divinity-html/sermon.mp3">
                                                    <i class="fa fa-headphones"></i>
                                                </a>
                                                <a class="--o--icon-set-item --o--transition text-muted magnific-youtube" href="https://www.youtube.com/watch?t&v=GKWYhSEml0w">
                                                    <i class="fa fa-play-circle"></i>
                                                </a>
                                                <a target="_blank" class="--o--icon-set-item --o--transition text-muted" href="http://oxy-wp-media.s3.amazonaws.com/divinity-html/sermon.pdf">
                                                    <i class="fa fa-file-text-o"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="list-group-item --o--transition --o--shadow-hover-8">
                                        <div class="list-group-item-content text-truncate">
                                            <h5 class="list-group-item-title m-b-0 pull-xs-left text-truncate">
                                                <i class="fa fa-microphone text-muted p-r-2 "></i>
                                                <a href="single-sermon.html">
                                                    Faith Is The Substance
                                                </a>
                                            </h5>
                                        </div>
                                        <div class="list-group-item-actions">
                                            <div class="--o--icon-set --o--icon-set-expandable --o--transition pull-xs-right">
                                                <a class="--o--icon-set-item --o--transition --o--icon-set-item-trigger text-muted" href="#">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                </a>
                                                <a class="--o--icon-set-item --o--transition --o--icon-set-item-close " href="#">
                                                    <i class="fa fa-close"></i>
                                                </a>
                                                <a class="--o--icon-set-item --o--transition text-muted magnific-youtube" href="https://www.youtube.com/watch?t&v=GKWYhSEml0w">
                                                    <i class="fa fa-play-circle"></i>
                                                </a>
                                                <a target="_blank" class="--o--icon-set-item --o--transition text-muted" href="http://oxy-wp-media.s3.amazonaws.com/divinity-html/sermon.pdf">
                                                    <i class="fa fa-file-text-o"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="list-group-item --o--transition --o--shadow-hover-8">
                                        <div class="list-group-item-content text-truncate">
                                            <h5 class="list-group-item-title m-b-0 pull-xs-left text-truncate">
                                                <i class="fa fa-microphone text-muted p-r-2 "></i>
                                                <a href="single-sermon.html">
                                                    Praise God For His Deliverance From Your Fears
                                                </a>
                                            </h5>
                                        </div>
                                        <div class="list-group-item-actions">
                                            <div class="--o--icon-set --o--icon-set-expandable --o--transition pull-xs-right">
                                                <a class="--o--icon-set-item --o--transition --o--icon-set-item-trigger text-muted" href="#">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                </a>
                                                <a class="--o--icon-set-item --o--transition --o--icon-set-item-close " href="#">
                                                    <i class="fa fa-close"></i>
                                                </a>
                                                 <a class="--o--icon-set-item magnific-audio --o--transition text-muted" href="http://oxy-wp-media.s3.amazonaws.com/divinity-html/sermon.mp3">
                                                    <i class="fa fa-headphones"></i>
                                                </a>
                                                <a class="--o--icon-set-item --o--transition text-muted magnific-youtube" href="https://www.youtube.com/watch?t&v=GKWYhSEml0w">
                                                    <i class="fa fa-play-circle"></i>
                                                </a>
                                                <a target="_blank" class="--o--icon-set-item --o--transition text-muted" href="http://oxy-wp-media.s3.amazonaws.com/divinity-html/sermon.pdf">
                                                    <i class="fa fa-file-text-o"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-lg-6">
                                <div class="card-img-container">
                                    <img class="card-img" src="https://placehold.it/800x1000" alt="Card image">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}