{% if page.jumbotron.slider %}
<div class="{% if page.jumbotron.video %}video {% endif %}row {% if page.jumbotron.background-image %}background-image {% endif %}
{% if page.image.background-class %}{{page.image.background-class}}{% endif %}"
    id="jumbotron" {% if page.jumbotron.background-image %}
    style=" background-image: url('{{page.jumbotron.background-image}}');" {% else %}
    class="jumbotron text-center featured-jumbotron" {% endif %}>
        <div id="jumbotron-slider" class="owl-carousel owl-theme full-width-slider">
            {% for slide in page.jumbotron.slider.slides %}
            <div class="item owl-slide flex-center {% if slide.darken %}overlay{% endif %} {% if forloop.first %}active{% endif %}"
            {% if slide.image %}style="{% if slide.slide-style %}{{slide.slide-style}}{% endif %} background-image: url({{slide.image}});"{% endif %}>
                {% if slide.title %}
                    <h2 class="slide-title {% if slide.title-class %}{{slide.title-class}}{% endif %}{% if slide.description %}desc-title{% endif %}">{{slide.title}}</h2>
                {% endif %}
                {% if slide.description %}
                <div class="owl--text slide-desc">
                    <p {% if slide.desciption-class %}class="{{slide.description-class}}"{% endif%}>
                        {{slide.description}}
                    </p>
                    {% if slide.buttons %}
                        {% for button in slide.buttons %}
                            <a href="{{button.url}}" 
                            class="btn btn-primary {% if button.class %}{{button.class}}{% endif %}">
                            {{button.title}} {% if button.icon %}<i class="{{button.icon}}"></i>{% endif %}
                        </a>
                        {% endfor %}
                    {% endif %}
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
</div>
{% else %}
<div class="{% if page.jumbotron.video %}video {% endif %}row {% if page.jumbotron.background-image %}background-image {% endif %}
{% if page.image.background-class %}{{page.image.background-class}}{% endif %}{% if site.data.settings.jumbotron.darken %}overlay{% endif %}" id="jumbotron" 
{% if page.jumbotron.background-image %}
    style="background-image: url('{{page.jumbotron.background-image}}');"
{% else %}
    class="jumbotron text-center featured-jumbotron"
{% endif %}> <!--Row -->
    {% if page.jumbotron.video %}
    <video autoplay muted preload="none" poster="{{page.jumbotron.video.poster}}" loop id="jumbotronVideo">
        {% if page.jumbotron.video.source.mp4 %}
            <source src="{{page.jumbotron.video.source.mp4}}" type="video/mp4">
        {% endif %}
        {% if page.jumbotron.video.source.ogg %}
            <source src="{{page.jumbotron.video.source.ogg}}" type="video/ogg">
        {% endif %}
        {% if page.jumbotron.video.source.webm %}
            <source src="{{page.jumbotron.video.source.webm}}" type="video/webm">
        {% endif %}
    </video>
    {% endif %}
    <div id="jumbotron-content" class=" flex-container"> <!--Jumbotron div -->        
        <div class="container flex-center" id="jumbotron-text"> <!--Container -->
        {% if page.jumbotron.image %}
            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{page.jumbotron.image}}"
            class="{% if page.jumbotron.animation == "fade" %}fade-in-one{% endif %} img-responsive center-block lazyload"
             alt="{{site.title}} homepage header image.">
        {% endif %}
        {% if page.jumbotron.title %}
            {% if page.jumbotron.title.lines %}
                <h1>
                {% for line in page.jumbotron.title.lines %}
                    <span class="{{line.class}}">{{line.text}}</span>
                {% endfor %}
                </h1>
            {% else %}
                <h1 class="{% if page.jumbotron.animation == "fade" %}fade-in-one{% endif %}" id="jumbotron-heading">
                    {{page.jumbotron.title}}
                </h1>
            {% endif %}
        {% elsif page.title %}
        <h1 class="{% if page.jumbotron.animation == "fade" %}fade-in-one{% endif %}" id="jumbotron-heading">
            {{page.title}}
        </h1>
        {% else %}
            <h1 class="{% if page.jumbotron.animation == "fade" %}fade-in-one{% endif %}" id="jumbotron-heading">
                {{site.title}}
            </h1>
        {% endif %}
        {% if page.jumbotron.description %}
            <p class="center-block {% if page.jumbotron.animation == "fade" %}fade-in-two{% endif %}
             {% if page.jumbotron.description-class %} {{page.jumbotron.description-class}} {% endif%}" id="jumbotron-sub-title">
                {{page.jumbotron.description}}
            </p>
        {% elsif page.description %}
            <p class="center-block {% if page.jumbotron.animation == "fade" %}fade-in-two{% endif %} 
            {% if page.jumbotron.description-class %} {{page.jumbotron.description-class}} {% endif%} " id="jumbotron-sub-title">
            {{page.description}}
            </p>
        {% endif %}
        {% if page.jumbotron.buttons %}
        <p id="buttons">
            {% for button in page.jumbotron.buttons %}
            <a class="{% if button.class %}{{button.class}}{% else %}btn btn-primary btn-lg{% endif %} {% if page.jumbotron.animation == "fade" %}fade-in-three{% endif %}" href="{{button.url}}" role="button">
                {{button.title}} {% if button.icon %}<i class="{{button.icon}}"></i>{% endif %}
            </a>
            {% endfor %}
        </p>
        {% endif %}
        {% if page.jumbotron.include %}
            {% include {{page.jumbotron.include}} %}
        {% endif %}
        </div><!-- End Jumbotron Container Div -->  
    </div> <!--End Jumbotron div -->
    {% if page.jumbotron.triangle-divider %}
        <div class="big-triangle"></div>
    {% endif %}
</div> <!--row -->
{% endif %}