{% set active_page = 'elements.html' -%}

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

{% set buttons = [{
    class: 'primary',
    text: 'Primary'
},{
    class: 'secondary',
    text: 'Secondary'
},{
    class: 'success',
    text: 'Success'
},{
    class: 'info',
    text: 'Info'
},{
    class: 'warning',
    text: 'Warning'
},{
    class: 'danger',
    text: 'Danger'
}] -%}

{% block footer %}
    {% include "partials/footer.html" %}

    <!-- Large Modal -->
    <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <div class="--o--col-count-2">
                        Why do the nations rage, and the peoples plot a vain thing? The kings of the earth take a stand, and the rulers take counsel together, against Yahweh, and against his Anointed, saying, «Let's break their bonds apart, and cast their cords from us.» He who sits in the heavens will laugh. The LORD will have them in derision. Then he will speak to them in his anger, and terrify them in his wrath: «Yet I have set my King on my holy hill of Zion.» I will tell of the decree. Yahweh said to me, «You are my son. Today I have become your father. Ask of me, and I will give the nations for your inheritance, the uttermost parts of the earth for your possession. You shall break them with a rod of iron. You shall dash them in pieces like a potter's vessel.» Now therefore be wise, you kings. Be instructed, you judges of the earth. Serve Yahweh with fear, and rejoice with trembling. Give sincere homage to the Son, lest he be angry, and you perish in the way, for his wrath will soon be kindled. Blessed are all those who take refuge in him.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Small Modal -->
    <div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalTitleLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    You shall break them with a rod of iron. You shall dash them in pieces like a potter's vessel.» Now therefore be wise, you kings. Be instructed, you judges of the earth.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}
<div class="section --o--demo-bg-gold-pattern --o--demo-bg-orange-90">
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3 p-b-9 m-t-10 text-xs-center --o--text-xs-light">
                    <h1>Cards</h1>
                    <h5 class="--o--line-height-normal">
                        Cards can be of various styles with headers, media or even action buttons. They can be organized in columns as bellow. Style like shadow etc can be variable.
                    </h5>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section">
    <div class="section-content">
        <div class="container">
            <div class="row p-y-9">
                <div class="col-md-4">
                    <div class="card --o--shadow-2 --o--shadow-hover-4 --o--transition">
                        <div class="card-img-container">
                            <img class="card-img-top" src="https://placehold.it/550x400" alt="Card image cap">
                            <div class="card-img-overlay card-img-overlay-on-hover  text-xs-center card-img-overlay-bottom card-img-overlay-fade-to-top --o--transition"  >
                                <div class="--o--icon-set --o--icon-set-transparent --o--transition">
                                    <a class="--o--icon-set-item --o--transition --o--text-xs-light" href="#">
                                        <i class="fa fa-instagram"></i>
                                    </a>
                                    <a class="--o--icon-set-item --o--transition --o--text-xs-light" href="#">
                                        <i class="fa fa-linkedin"></i>
                                    </a>
                                    <a class="--o--icon-set-item --o--transition --o--text-xs-light" href="#">
                                        <i class="fa fa-facebook"></i>
                                    </a>
                                    <a class="--o--icon-set-item --o--transition --o--text-xs-light" href="#">
                                        <i class="fa fa-twitter"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <h3 class="card-title"><a href="single-post.html">Icons on image hover</a></h3>
                            <h6 class="card-subtitle font-italic text-muted">By <a href="staff-single.html">Christos</a> on May 1977</h6>
                        </div>
                        <div class="card-block">
                            <p class="card-text">Blessed is the man who doesn't walk in the counsel of the wicked, nor stand in the way of sinners, nor sit in the seat of scoffers; but his delight is in Yahweh's law. On his law he meditates day and night. He will be like a tree planted by the streams of water.</p>
                        </div>
                        <div class="card-footer">
                            <div class="--o--icon-set pull-xs-right">
                                <a class="--o--icon-set-item --o--transition text-muted" href="#">
                                    <i class="fa fa-instagram"></i>
                                </a>
                                <a class="--o--icon-set-item --o--transition text-muted" href="#">
                                    <i class="fa fa-linkedin"></i>
                                </a>
                                <a class="--o--icon-set-item --o--transition text-muted" href="#">
                                    <i class="fa fa-facebook"></i>
                                </a>
                                <a class="--o--icon-set-item --o--transition text-muted" href="#">
                                    <i class="fa fa-twitter"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card --o--shadow-2 --o--shadow-hover-4 --o--transition">
                        <div class="card-img-container">
                            <div id="carousel-card-2" class="carousel w-100 card-carousel slide" data-ride="carousel">
                                <div class="carousel-inner" role="listbox">
                                    <div class="carousel-item active">
                                        <img src="https://placehold.it/550x400" alt="Card image">
                                    </div>
                                    <div class="carousel-item">
                                        <img src="https://placehold.it/550x400" alt="Card image">
                                    </div>
                                </div>
                            </div>
                            <a class="left carousel-control" href="#carousel-card-2" role="button" data-slide="prev">
                                <span class="icon-prev" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                                </a>
                            <a class="right carousel-control" href="#carousel-card-2" role="button" data-slide="next">
                                <span class="icon-next" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                        <div class="card-block">
                            <h3 class="card-title"><a href="gallery-post.html">Card With Image</a></h3>
                            <p class="card-text">Blessed is the man who doesn't walk in the counsel of the wicked, nor stand in the way of sinners, nor sit in the seat of scoffers; but his delight is in Yahweh's law. On his law he meditates day and night. He will be like a tree planted by the streams of water.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card --o--shadow-2 --o--shadow-hover-4 --o--transition">
                        <div class="card-img-container">
                            <img class="card-img" src="https://placehold.it/350x350" alt="Card image">
                            <div class="card-img-overlay card-img-overlay-fade-to-bottom">
                                <h3 class="card-title"><a href="video-post.html">Image Card & footer</a></h3>
                                <h6 class="card-subtitle font-italic">By <a href="#">Christos</a> on May 1977</h6>
                            </div>
                        </div>
                        <div class="card-footer">
                            <a href="single-post.html" class="text-uppercase text-muted">Read More</a>
                            <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-share-alt"></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" href="#">
                                    <i class="fa fa-instagram"></i>
                                </a>
                                <a class="--o--icon-set-item --o--transition text-muted" href="#">
                                    <i class="fa fa-linkedin"></i>
                                </a>
                                <a class="--o--icon-set-item --o--transition text-muted" href="#">
                                    <i class="fa fa-facebook"></i>
                                </a>
                                <a class="--o--icon-set-item --o--transition text-muted" href="#">
                                    <i class="fa fa-twitter"></i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="card card-inverse card-primary --o--shadow-2 --o--shadow-hover-4 --o--transition">
                        <div class="card-block">
                            <blockquote class="card-blockquote blockquote">
                                <p>or now we see only a reflection as in a mirror; then we shall see face to face.</p>
                                <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
                            </blockquote>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <p class="text-xs-center lead m-t-3">
                        For more Cards visit the <a href="cards.html">Cards Page</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section --o--demo-bg-gold-pattern --o--demo-bg-orange-90">
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3 p-y-9 text-xs-center --o--text-xs-light">
                    <h1>Buttons</h1>
                    <h5 class="--o--line-height-normal">
                        Three different size variations starting from large down to small buttons.
                    </h5>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section">
    <div class="section-content">
        <div class="container">
            <div class="row m-t-9 text-xs-center">
                <div class="col-md-12">
                    <strong>Large button</strong>. 36 pixel height, 14px font size and 30px left &amp; right margins.
                </div>
                <div class="col-md-12 p-y-1">
                    {% for button in buttons %}
                    <button type="button" class="btn btn-lg btn-{{button.class}} --o--shadow-2 m-r-1">
                        {{button.text}}
                    </button>
                    {% endfor %}
                </div>
                <div class="col-md-12">
                    <strong>Regular button</strong>. 36 pixel height, 14px font size and 30px left &amp; right margins.
                </div>
                <div class="col-md-12 p-y-1">
                    {% for button in buttons %}
                    <button type="button" class="btn btn-{{button.class}} --o--shadow-2 m-r-1">
                        {{button.text}}
                    </button>
                    {% endfor %}
                </div>
                <div class="col-md-12">
                    <strong>Small button</strong>. 36 pixel height, 14px font size and 30px left &amp; right margins.
                </div>
                <div class="col-md-12 p-y-1">
                    {% for button in buttons %}
                    <button type="button" class="btn btn-{{button.class}} btn-sm --o--shadow-2 m-r-1">
                        {{button.text}}
                    </button>
                    {% endfor %}
                </div>
            </div>
            <!-- outline buttons -->
            <div class="row text-xs-center">
                <div class="col-md-12 m-t-9">
                    <p class="lead">
                        Outline Buttons
                    </p>
                </div>
                <div class="col-md-12 p-y-1">
                    {% for button in buttons %}
                    <button type="button" class="btn btn-outline-{{button.class}} btn-lg m-r-1">
                        {{button.text}}
                    </button>
                    {% endfor %}
                </div>
                <div class="col-md-12 p-y-1">
                    {% for button in buttons %}
                    <button type="button" class="btn btn-outline-{{button.class}} m-r-1">
                        {{button.text}}
                    </button>
                    {% endfor %}
                </div>
                <div class="col-md-12 p-y-1">
                    {% for button in buttons %}
                    <button type="button" class="btn btn-outline-{{button.class}} btn-sm m-r-1">
                        {{button.text}}
                    </button>
                    {% endfor %}
                </div>
            </div>
            <!-- icon buttons -->
            <div class="row m-t-9 text-xs-center">
                <div class="col-md-12">
                    <p class="lead">
                        Icon Buttons
                    </p>
                </div>
                <div class="col-md-12 p-y-1">
                    {% for button in buttons %}
                    <button class="btn btn-{{button.class}} btn-lg --o--shadow-2 m-r-1">
                        <i class="fa fa-cloud-download"></i> {{button.text}}
                    </button>
                    {% endfor %}
                </div>
                <div class="col-md-12 p-y-1">
                    {% for button in buttons %}
                    <button class="btn btn-{{button.class}} --o--shadow-2 m-r-1">
                        <i class="fa fa-cloud-download"></i> {{button.text}}
                    </button>
                    {% endfor %}
                </div>
                <div class="col-md-12 p-y-1">
                    {% for button in buttons %}
                    <button class="btn btn-{{button.class}} --o--shadow-2 btn-sm m-r-1">
                        <i class="fa fa-cloud-download"></i> {{button.text}}
                    </button>
                    {% endfor %}
                </div>
            </div>
            <!-- button states -->
            <div class="row m-b-9 m-t-9 text-xs-center">
                <div class="col-md-12">
                    <p class="lead">
                        Button Hover &amp; States
                    </p>
                </div>
                <div class="col-md-12">
                    <strong>Hover Shadow</strong>. Make your button pop by adding an on hover shadow effect.
                </div>
                <div class="col-md-12 p-y-1">
                    {% for button in buttons %}
                    <button type="button" class="btn btn-{{button.class}} --o--shadow-hover-10 --o--transition m-r-1">
                        {{button.text}}
                    </button>
                    {% endfor %}
                </div>
                <div class="col-md-12">
                    <strong>Disabled</strong>. To show that a button isn't clickable you can disable it.
                </div>
                <div class="col-md-12 p-y-1">
                    {% for button in buttons %}
                    <button type="button" class="btn btn-{{button.class}} m-r-1" disabled>
                        {{button.text}}
                    </button>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section --o--demo-bg-gold-pattern --o--demo-bg-orange-90">
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3 p-y-9 text-xs-center --o--text-xs-light">
                    <h1>Alerts</h1>
                    <h5 class="--o--line-height-normal">
                        Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
                    </h5>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section">
    <div class="section-content">
        <div class="container">
            <div class="row p-y-9">
                <div class="col-md-6 offset-md-3 p-y-1">
                    <div class="alert  --o--shadow-10 --o--shadow-hover-15 --o--transition m-b-3 alert-success" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <strong>Well done!</strong> You successfully read this important alert message.
                    </div>
                    <div class="alert  --o--shadow-10 --o--shadow-hover-15 --o--transition m-b-3 alert-info" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                    </div>
                    <div class="alert  --o--shadow-10 --o--shadow-hover-15 --o--transition m-b-3 alert-warning" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <strong>Warning!</strong> Better check yourself, you're not looking too good.
                    </div>
                    <div class="alert  --o--shadow-10 --o--shadow-hover-15 --o--transition m-b-0 alert-danger" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <strong>Oh snap!</strong> Change a few things up and try submitting again.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section --o--demo-bg-gold-pattern --o--demo-bg-orange-90">
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3 p-y-9 text-xs-center --o--text-xs-light">
                    <h1>Breadcrumbs</h1>
                    <h5 class="--o--line-height-normal">
                        Indicate the current page's location within a navigational hierarchy.
                    </h5>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section">
    <div class="section-content">
        <div class="container">
            <div class="row p-y-9">
                <div class="col-md-12 p-y-1">
                    <nav class="breadcrumb --o--shadow-10 --o--transition">
                        <a class="breadcrumb-item" href="#">Home</a>
                        <a class="breadcrumb-item" href="#">Library</a>
                        <a class="breadcrumb-item" href="#">Data</a>
                        <span class="breadcrumb-item active">Bootstrap</span>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section --o--demo-bg-gold-pattern --o--demo-bg-orange-90">
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3 p-y-9 text-xs-center --o--text-xs-light">
                    <h1>Pagination</h1>
                    <h5 class="--o--line-height-normal">
                        Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.
                    </h5>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section">
    <div class="section-content">
        <div class="container">
            <div class="row p-y-9 text-xs-center">
                <div class="col-md-12">
                    <div class="col-md-12 p-y-1">
                    <p class="lead m-t-3">Normal pagination</p>
                    <nav>
                        <ul class="pagination --o--shadow-10 --o--shadow-hover-15">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                    <span class="sr-only">Previous</span>
                                </a>
                            </li>
                            <li class="page-item active"><a class="page-link" href="#">1</a> <span class="sr-only">(current)</span></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
                    <p class="lead m-t-3">Small</p>
                    <nav aria-label="...">
                        <ul class="pagination --o--shadow-10 --o--shadow-hover-15 pagination-sm">
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                    <span class="sr-only">Previous</span>
                                </a>
                            </li>
                            <li class="page-item"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div class="col-md-12 p-y-1">
                    <p class="lead m-t-3">Large</p>
                    <nav aria-label="...">
                        <ul class="pagination --o--shadow-10 --o--shadow-hover-15 pagination-lg">
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                    <span class="sr-only">Previous</span>
                                </a>
                            </li>
                            <li class="page-item"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>

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

<div class="section --o--demo-bg-gold-pattern --o--demo-bg-orange-90">
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3 p-y-9 text-xs-center --o--text-xs-light">
                    <h1>Carousel</h1>
                    <h5 class="--o--line-height-normal">
                        A slideshow component for cycling through elements—images or slides of text—like a carousel. Nested carousels are not supported.
                    </h5>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section">
    <div class="section-content">
        <div class="container">
            <div class="row p-y-9">
                <div class="col-md-8 offset-md-2 p-y-1">
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="carousel-captionactive --o--transition"></li>
                            <li class="--o--transition" data-target="#carousel-example-generic" data-slide-to="1"></li>
                            <li class="--o--transition" data-target="#carousel-example-generic" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner" role="listbox">
                            <div class="carousel-item active">
                                <img src="https://placehold.it/1600x1000" alt="First slide">
                                <div class="carousel-caption">
                                    <h3>First slide label</h3>
                                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img src="https://placehold.it/1600x1000" alt="Second slide">
                            </div>
                            <div class="carousel-item">
                                <img src="https://placehold.it/1600x1000" alt="Third slide">
                            </div>
                        </div>
                        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                            <span class="icon-prev" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                            <span class="icon-next" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section --o--demo-bg-gold-pattern --o--demo-bg-orange-90">
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3 p-y-9 text-xs-center --o--text-xs-light">
                    <h1>Forms</h1>
                    <h5 class="--o--line-height-normal">
                        Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.
                    </h5>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section">
    <div class="section-content">
        <div class="container">
            <div class="row p-y-9">
                <div class="col-md-8 offset-md-2 p-y-1">
                    <form action="contact_mailer.php" class="contact-form" id="contactForm">
                        <div class="row ">
                            <div class="col-md-6">
                                <input type="text" id="name" name="name" class="form-control --o--shadow-0 --o--shadow-focus-2 --o--transition" placeholder="Name">
                            </div>
                            <div class="col-md-6">
                                <input type="email" id="email" name="email" class="form-control --o--shadow-0 --o--shadow-focus-2 --o--transition" placeholder="Your Email">
                            </div>
                            <div class="col-md-12">
                                <textarea id="message" name="message" rows="8" class="form-control --o--shadow-0 --o--shadow-focus-2 --o--transition m-y-3" placeholder="Your Comment"></textarea>
                            </div>
                            <div class="col-md-12">
                                <div class="form-check m-b-2">
                                    <label class="form-check-label">
                                        <input class="form-check-input" type="checkbox" value="">
                                        I would like to receive more sermons!
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-12 m-b-2">
                                <div class="form-group">
                                    <label class="d-block">How often?</label>
                                    <select class="custom-select --o--shadow-4 --o--shadow-hover-8 --o--transition w-100">
                                        <option selected>Weekly</option>
                                        <option value="1">Monthly</option>
                                        <option value="2">Daily</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-check m-b-2">
                                    <label class="d-block m-b-1">Please state your gender</label>
                                    <label for="radio-male" class="form-check-inline form-check-label">
                                        <input id="radio-male" type="radio" name="gender" class="form-check-input" value="male" > Male
                                    </label>
                                    <label for="radio-female" class="form-check-inline form-check-label">
                                        <input id="radio-female" type="radio" name="gender" class="form-check-input" value="female"> Female
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <input type="submit" value="Send" class="btn btn-primary --o--shadow-2">
                            </div>
                        </div>
                        <div class="oxy-messages p-t-2"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section --o--demo-bg-gold-pattern --o--demo-bg-orange-90">
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3 p-y-9 text-xs-center --o--text-xs-light">
                    <h1>Accordions & Tabs</h1>
                    <h5 class="--o--line-height-normal">
                        Use accordions and tabs that allows you to toggle content on your pages.
                    </h5>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="section">
    <div class="section-content">
        <div class="container">
            <div class="row p-y-9">
                <div class="col-md-6 offset-md-3">
                    <div id="accordion" class="--o--shadow-10 --o--shadow-hover-15 --o--transition panel-group" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingOne">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        Collapsible Group Item #1
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                <div>
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                                <h4 class="panel-title">
                                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        Collapsible Group Item #2
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                                <div>
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingThree">
                                <h4 class="panel-title">
                                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                        Collapsible Group Item #3
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                                <div>
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row p-b-15">
                <div class="col-md-6 offset-md-3">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
                        </li>
                    </ul>
                    <div class="tab-content p-a-2 --o--shadow-2">
                        <div class="tab-pane active" id="home" role="tabpanel">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                        </div>
                        <div class="tab-pane" id="profile" role="tabpanel">
                            3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
                        </div>
                        <div class="tab-pane" id="messages" role="tabpanel">
                            Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                        </div>
                        <div class="tab-pane" id="settings" role="tabpanel">
                            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section --o--demo-bg-gold-pattern --o--demo-bg-orange-90">
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3 p-y-9 text-xs-center --o--text-xs-light">
                    <h1>Popovers</h1>
                    <h5 class="--o--line-height-normal">
                        Add small overlay content, like those found in iOS, to any element for housing secondary information.
                    </h5>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section">
    <div class="section-content">
        <div class="container">
            <div class="row p-y-9 text-xs-center">
                <div class="col-md-4 offset-md-2 m-b-3">
                    <button type="button" class="btn btn-primary w-100" data-toggle="popover" data-trigger="focus" data-placement="top" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle top popover</button>
                </div>
                <div class="col-md-4 m-b-3">
                    <button type="button" class="btn btn-primary w-100" data-toggle="popover" data-trigger="focus" data-placement="left" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle left popover</button>
                </div>
                <div class="col-md-4 offset-md-2">
                    <button type="button" class="btn btn-primary w-100" data-toggle="popover" data-trigger="focus" data-placement="bottom" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle bottom popover</button>
                </div>
                <div class="col-md-4 ">
                    <button type="button" class="btn btn-primary w-100" data-toggle="popover" data-trigger="focus" data-placement="right" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle right popover</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section --o--demo-bg-gold-pattern --o--demo-bg-orange-90">
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3 p-y-9 text-xs-center --o--text-xs-light">
                    <h1>Progress</h1>
                    <h5 class="--o--line-height-normal">
                        Stylize the HTML5 <code>&#60;progress&#62;</code> element with a few extra classes and some crafty browser-specific CSS. Be sure to read up on the browser support.
                    </h5>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section">
    <div class="section-content">
        <div class="container">
            <div class="row p-y-9 text-xs-center">
                <div class="col-md-6 offset-md-3">
                    <div class="text-xs-center" id="example-caption-1">Reticulating splines&hellip; 0%</div>
                    <progress class="progress m-b-3" value="0" max="100" aria-describedby="example-caption-1"></progress>

                    <div class="text-xs-center" id="example-caption-2">Reticulating splines&hellip; 25%</div>
                    <progress class="progress m-b-3" value="25" max="100" aria-describedby="example-caption-2"></progress>

                    <div class="text-xs-center" id="example-caption-3">Reticulating splines&hellip; 50%</div>
                    <progress class="progress m-b-3" value="50" max="100" aria-describedby="example-caption-3"></progress>

                    <div class="text-xs-center" id="example-caption-4">Reticulating splines&hellip; 75%</div>
                    <progress class="progress m-b-3" value="75" max="100" aria-describedby="example-caption-4"></progress>

                    <div class="text-xs-center" id="example-caption-5">Reticulating splines&hellip; 100%</div>
                    <progress class="progress m-b-3" value="100" max="100" aria-describedby="example-caption-5"></progress>
                </div>
                <div class="col-md-6 offset-md-3 m-t-9" >
                    <p class="lead">
                        Contextual alternatives
                    </p>
                    <progress class="progress m-b-3 progress-success" value="25" max="100"></progress>
                    <progress class="progress m-b-3 progress-info" value="50" max="100"></progress>
                    <progress class="progress m-b-3 progress-warning" value="75" max="100"></progress>
                    <progress class="progress m-b-3 progress-danger" value="100" max="100"></progress>
                </div>
                <div class="col-md-6 offset-md-3 m-t-9" >
                    <p class="lead">
                        With indicator & labels
                    </p>
                    <div class="progress-wrapper m-x-1">
                        <progress class="progress" value="25" max="100"></progress>
                        <i class="fa fa-map-marker progress-indicator"></i>
                        <div class="progress-progress clearfix">
                            <span class="pull-xs-left text-muted">$230 raised</span>
                            <span class="pull-xs-right --o--font-weight-700">$2000 total</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section --o--demo-bg-gold-pattern --o--demo-bg-orange-90">
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3 p-y-9 text-xs-center --o--text-xs-light">
                    <h1>Tooltips</h1>
                    <h5 class="--o--line-height-normal">
                        Tooltips are an updated version, which don’t rely on images, use CSS3 for animations, and data-attributes for local title storage.
                    </h5>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section">
    <div class="section-content">
        <div class="container">
            <div class="row p-y-9 text-xs-center">
                <div class="col-md-4 offset-md-2">
                    <button type="button" class="btn btn-primary m-b-3" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
                        Tooltip on top
                    </button>
                </div>
                <div class="col-md-4">
                    <button type="button" class="btn btn-primary m-b-3" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
                        Tooltip on right
                    </button>
                </div>
                <div class="col-md-4 offset-md-2">
                    <button type="button" class="btn btn-primary m-b-3" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
                        Tooltip on bottom
                    </button>
                </div>
                <div class="col-md-4">
                    <button type="button" class="btn btn-primary m-b-3" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
                        Tooltip on left
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section --o--demo-bg-gold-pattern --o--demo-bg-orange-90">
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3 p-y-9 text-xs-center --o--text-xs-light">
                    <h1>Modals & Popups</h1>
                    <h5 class="--o--line-height-normal">
                        Our Modals & Popups are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
                    </h5>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section">
    <div class="section-content">
        <div class="container">
            <div class="row p-t-9 p-b-9 text-xs-center">
                <div class="col-md-12 m-b-1">
                    <strong>Modals</strong> can be normal or wide and host any type of content
                </div>
                <div class="col-md-4 offset-md-2">
                    <button type="button" class="btn btn-primary btn" data-toggle="modal" data-target="#smallModal">
                        Normal Modal
                    </button>
                </div>
                <div class="col-md-4 m-b-9">
                    <button type="button" class="btn btn-primary btn" data-toggle="modal" data-target="#largeModal">
                        Wide Modal
                    </button>
                </div>
                <div class="col-md-12 m-b-1">
                    <strong>Popups</strong> can be uses for image callery or even to open a video, audio & and a map
                </div>
                <div class="col-md-4 offset-md-2">
                    <button data-links="assets/images/divinity/divinity-01-800x500.jpg, assets/images/divinity/divinity-03-800x500.jpg, assets/images/divinity/divinity-05-800x500.jpg" data-prev-text="Previous" data-next-text="Next" class="magnific-gallery btn btn-primary btn">
                        Gallery popup
                    </button>

                </div>
                <div class="col-md-4 m-b-3">
                    <a href="https://www.youtube.com/watch?v=ghb6eDopW8I" data-links="assets/images/divinity/divinity-01-800x500.jpg, assets/images/divinity/divinity-03-800x500.jpg, assets/images/divinity/divinity-05-800x500.jpg" data-prev-text="Previous" data-next-text="Next" class="magnific-youtube btn btn-primary btn">
                        Video popup
                    </a>

                </div>
                <div class="col-md-4 offset-md-2">
                    <a href="http://oxy-wp-media.s3.amazonaws.com/divinity-html/sermon.mp3" class="magnific-audio btn btn-primary btn">
                        Audio popup
                    </a>
                </div>
                <div class="col-md-4">
                    <a href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&amp;hl=en&amp;t=v&amp;hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom" class="magnific-gmaps btn btn-primary">
                        Map Popup
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}