<div class="giving-widget ">

    
    <div class="fund-selector">

        <!-- Can be a span or a label. Depends on whether or not there's a select -->
        <label for="destination-select" class="fund-selector__title">I want to give to</label>
                    <span class="fund-selector__destination">the Central African Republic</span>
        
        
        <div class="fund-selector-field">
                            <div class="option-selector option-selector--with-text">

                    
                        <div class="option-selector__item option-selector__item--">
                            <input class="option-selector__input" id="radio1" name="" type="radio" value="" />
                            <label class="option-selector__label" for="radio1">£10</label>
                                                            <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                                                    </div>

                    
                        <div class="option-selector__item option-selector__item--">
                            <input class="option-selector__input" id="radio2" name="" type="radio" value="" />
                            <label class="option-selector__label" for="radio2">£20</label>
                                                            <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                                                    </div>

                    
                        <div class="option-selector__item option-selector__item--">
                            <input class="option-selector__input" id="radio3" name="" type="radio" value="" />
                            <label class="option-selector__label" for="radio3">£50</label>
                                                            <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                                                    </div>

                                       
                    <div class="option-selector__item option-selector__item--with-input">
                        <input class="option-selector__input" id="radio10" name="radio3" type="radio" />
                        <div class="custom-input custom-input--currency">
                            <input class="custom-input__input" type="text" />
                        </div>
                                                    <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                                            </div>
                </div>
                    </div>

  <!--        -->

        
            <div class="giving-handles">

                                    <div class="giving-handles__handle giving-handles__handle-" data-amount="">
                        
                    </div>

                                    <div class="giving-handles__handle giving-handles__handle-" data-amount="">
                        
                    </div>

                                    <div class="giving-handles__handle giving-handles__handle-" data-amount="">
                        
                    </div>

                
            </div>

        
                    <div class="fund-selector-field">
                <button class="button pay-by-card"><span>Give by</span></button>
                <a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
            </div>
            </div>
</div>

<div class="giving-widget {% if giving_page %} giving-widget--giving-page{% endif %}">

    {% if fund_frequency %}
        <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
            <div class="form-small-col-6">
                <input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
                <label class="field-set__label field-set__label--radio" for="radio1">Once</label>
            </div>
            <div class="form-small-col-6">
                <input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
                <label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
            </div>
        </div>
    {% endif %}

    <div class="fund-selector">

        <!-- Can be a span or a label. Depends on whether or not there's a select -->
        <label for="destination-select" class="fund-selector__title">{{ fund_selector_title }}</label>
        {% if fund_selected %}
            <span class="fund-selector__destination">{{ fund_selected }}</span>
        {% endif %}

        {% if funds %}
            <div class="fund-selector__destinations fund-selector-field">
                <div class="custom-select">
                    <span class="custom-select__selected-value"></span>
                    <select class="custom-select__input" id="destination-select">
                        {% for fund in funds %}
                            <option value="{{ fund.id }}">{{ fund.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        {% endif %}

        <div class="fund-selector-field">
            {% if fund_input_type == 'text' %}
                <div class="custom-input custom-input--currency">
                    <input class="custom-input__input" type="text" />
                </div>
            {% elseif fund_input_type == 'radio' %}
                <div class="option-selector {% if fund_radios[0].text %}option-selector--with-text{% endif %}">

                    {% for radio in fund_radios %}

                        <div class="option-selector__item option-selector__item--{{ radio.regularity }}">
                            <input class="option-selector__input" id="{{ radio.id }}" name="{{ radio.regularity }}" type="radio" value="{{ radio.amount }}" {% if radio.checked %} checked="checked"{% endif %}/>
                            <label class="option-selector__label" for="{{ radio.id }}">{{ radio.label }}</label>
                            {% if radio.text %}
                                <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                            {% endif %}
                        </div>

                    {% endfor %}
                   
                    <div class="option-selector__item option-selector__item--with-input">
                        <input class="option-selector__input" id="radio10" name="radio3" type="radio" />
                        <div class="custom-input custom-input--currency">
                            <input class="custom-input__input" type="text" />
                        </div>
                        {% if fund_radios_custom_input_text %}
                            <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>

  <!--       {% if fund_frequency %}
            <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
                <div class="form-small-col-6">
                    <input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
                    <label class="field-set__label field-set__label--radio" for="radio1">Once</label>
                </div>
                <div class="form-small-col-6">
                    <input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
                    <label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
                </div>
            </div>
        {% endif %} -->

        {% if fund_input_type == 'radio' %}

            <div class="giving-handles">

                {% for radio in fund_radios %}
                    <div class="giving-handles__handle giving-handles__handle-{{ radio.regularity }}" data-amount="{{ radio.amount }}">
                        {{ radio.handle }}
                    </div>

                {% endfor %}

            </div>

        {% endif %}

        {% if giving_options %}
            <div class="fund-selector-field payment-methods">
                <div class="payment-methods__item payment-methods__item--once">
                    <div class="payment-methods__button">
                        <button class="button pay-by-card"><span>Pay by card</span></button>
                    </div>
                    <div class="payment-methods__button">
                        <button class="button pay-by-paypal"><span>Pay by</span></button>
                    </div>
                </div>
                {% if fund_frequency %}
                    <div class="payment-methods__item payment-methods__item--regularly">
                        <div class="payment-methods__button">
                            <button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
                        </div>
                    </div>
                {% endif %}
            </div>
        {% else %}
            <div class="fund-selector-field">
                <button class="button pay-by-card"><span>Give by</span></button>
                <a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
            </div>
        {% endif %}
    </div>
</div>

<div class="giving-widget ">

            <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
            <div class="form-small-col-6">
                <input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
                <label class="field-set__label field-set__label--radio" for="radio1">Once</label>
            </div>
            <div class="form-small-col-6">
                <input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
                <label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
            </div>
        </div>
    
    <div class="fund-selector">

        <!-- Can be a span or a label. Depends on whether or not there's a select -->
        <label for="destination-select" class="fund-selector__title">I want to give to</label>
        
                    <div class="fund-selector__destinations fund-selector-field">
                <div class="custom-select">
                    <span class="custom-select__selected-value"></span>
                    <select class="custom-select__input" id="destination-select">
                                                    <option value="1">The greatest need</option>
                                                    <option value="2">the Central African Republic</option>
                                                    <option value="3">the South Sudan Crisis</option>
                                            </select>
                </div>
            </div>
        
        <div class="fund-selector-field">
                            <div class="custom-input custom-input--currency">
                    <input class="custom-input__input" type="text" />
                </div>
                    </div>

  <!--                   <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
                <div class="form-small-col-6">
                    <input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
                    <label class="field-set__label field-set__label--radio" for="radio1">Once</label>
                </div>
                <div class="form-small-col-6">
                    <input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
                    <label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
                </div>
            </div>
         -->

        
                    <div class="fund-selector-field payment-methods">
                <div class="payment-methods__item payment-methods__item--once">
                    <div class="payment-methods__button">
                        <button class="button pay-by-card"><span>Pay by card</span></button>
                    </div>
                    <div class="payment-methods__button">
                        <button class="button pay-by-paypal"><span>Pay by</span></button>
                    </div>
                </div>
                                    <div class="payment-methods__item payment-methods__item--regularly">
                        <div class="payment-methods__button">
                            <button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
                        </div>
                    </div>
                            </div>
            </div>
</div>

<div class="giving-widget {% if giving_page %} giving-widget--giving-page{% endif %}">

    {% if fund_frequency %}
        <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
            <div class="form-small-col-6">
                <input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
                <label class="field-set__label field-set__label--radio" for="radio1">Once</label>
            </div>
            <div class="form-small-col-6">
                <input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
                <label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
            </div>
        </div>
    {% endif %}

    <div class="fund-selector">

        <!-- Can be a span or a label. Depends on whether or not there's a select -->
        <label for="destination-select" class="fund-selector__title">{{ fund_selector_title }}</label>
        {% if fund_selected %}
            <span class="fund-selector__destination">{{ fund_selected }}</span>
        {% endif %}

        {% if funds %}
            <div class="fund-selector__destinations fund-selector-field">
                <div class="custom-select">
                    <span class="custom-select__selected-value"></span>
                    <select class="custom-select__input" id="destination-select">
                        {% for fund in funds %}
                            <option value="{{ fund.id }}">{{ fund.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        {% endif %}

        <div class="fund-selector-field">
            {% if fund_input_type == 'text' %}
                <div class="custom-input custom-input--currency">
                    <input class="custom-input__input" type="text" />
                </div>
            {% elseif fund_input_type == 'radio' %}
                <div class="option-selector {% if fund_radios[0].text %}option-selector--with-text{% endif %}">

                    {% for radio in fund_radios %}

                        <div class="option-selector__item option-selector__item--{{ radio.regularity }}">
                            <input class="option-selector__input" id="{{ radio.id }}" name="{{ radio.regularity }}" type="radio" value="{{ radio.amount }}" {% if radio.checked %} checked="checked"{% endif %}/>
                            <label class="option-selector__label" for="{{ radio.id }}">{{ radio.label }}</label>
                            {% if radio.text %}
                                <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                            {% endif %}
                        </div>

                    {% endfor %}
                   
                    <div class="option-selector__item option-selector__item--with-input">
                        <input class="option-selector__input" id="radio10" name="radio3" type="radio" />
                        <div class="custom-input custom-input--currency">
                            <input class="custom-input__input" type="text" />
                        </div>
                        {% if fund_radios_custom_input_text %}
                            <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>

  <!--       {% if fund_frequency %}
            <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
                <div class="form-small-col-6">
                    <input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
                    <label class="field-set__label field-set__label--radio" for="radio1">Once</label>
                </div>
                <div class="form-small-col-6">
                    <input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
                    <label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
                </div>
            </div>
        {% endif %} -->

        {% if fund_input_type == 'radio' %}

            <div class="giving-handles">

                {% for radio in fund_radios %}
                    <div class="giving-handles__handle giving-handles__handle-{{ radio.regularity }}" data-amount="{{ radio.amount }}">
                        {{ radio.handle }}
                    </div>

                {% endfor %}

            </div>

        {% endif %}

        {% if giving_options %}
            <div class="fund-selector-field payment-methods">
                <div class="payment-methods__item payment-methods__item--once">
                    <div class="payment-methods__button">
                        <button class="button pay-by-card"><span>Pay by card</span></button>
                    </div>
                    <div class="payment-methods__button">
                        <button class="button pay-by-paypal"><span>Pay by</span></button>
                    </div>
                </div>
                {% if fund_frequency %}
                    <div class="payment-methods__item payment-methods__item--regularly">
                        <div class="payment-methods__button">
                            <button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
                        </div>
                    </div>
                {% endif %}
            </div>
        {% else %}
            <div class="fund-selector-field">
                <button class="button pay-by-card"><span>Give by</span></button>
                <a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
            </div>
        {% endif %}
    </div>
</div>

<div class="giving-widget ">

    
    <div class="fund-selector">

        <!-- Can be a span or a label. Depends on whether or not there's a select -->
        <label for="destination-select" class="fund-selector__title">I want to give to</label>
        
                    <div class="fund-selector__destinations fund-selector-field">
                <div class="custom-select">
                    <span class="custom-select__selected-value"></span>
                    <select class="custom-select__input" id="destination-select">
                                                    <option value="1">The greatest need</option>
                                                    <option value="2">the Central African Republic</option>
                                                    <option value="3">the South Sudan Crisis</option>
                                            </select>
                </div>
            </div>
        
        <div class="fund-selector-field">
                            <div class="custom-input custom-input--currency">
                    <input class="custom-input__input" type="text" />
                </div>
                    </div>

  <!--        -->

        
                    <div class="fund-selector-field">
                <button class="button pay-by-card"><span>Give by</span></button>
                <a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
            </div>
            </div>
</div>

<div class="giving-widget {% if giving_page %} giving-widget--giving-page{% endif %}">

    {% if fund_frequency %}
        <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
            <div class="form-small-col-6">
                <input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
                <label class="field-set__label field-set__label--radio" for="radio1">Once</label>
            </div>
            <div class="form-small-col-6">
                <input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
                <label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
            </div>
        </div>
    {% endif %}

    <div class="fund-selector">

        <!-- Can be a span or a label. Depends on whether or not there's a select -->
        <label for="destination-select" class="fund-selector__title">{{ fund_selector_title }}</label>
        {% if fund_selected %}
            <span class="fund-selector__destination">{{ fund_selected }}</span>
        {% endif %}

        {% if funds %}
            <div class="fund-selector__destinations fund-selector-field">
                <div class="custom-select">
                    <span class="custom-select__selected-value"></span>
                    <select class="custom-select__input" id="destination-select">
                        {% for fund in funds %}
                            <option value="{{ fund.id }}">{{ fund.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        {% endif %}

        <div class="fund-selector-field">
            {% if fund_input_type == 'text' %}
                <div class="custom-input custom-input--currency">
                    <input class="custom-input__input" type="text" />
                </div>
            {% elseif fund_input_type == 'radio' %}
                <div class="option-selector {% if fund_radios[0].text %}option-selector--with-text{% endif %}">

                    {% for radio in fund_radios %}

                        <div class="option-selector__item option-selector__item--{{ radio.regularity }}">
                            <input class="option-selector__input" id="{{ radio.id }}" name="{{ radio.regularity }}" type="radio" value="{{ radio.amount }}" {% if radio.checked %} checked="checked"{% endif %}/>
                            <label class="option-selector__label" for="{{ radio.id }}">{{ radio.label }}</label>
                            {% if radio.text %}
                                <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                            {% endif %}
                        </div>

                    {% endfor %}
                   
                    <div class="option-selector__item option-selector__item--with-input">
                        <input class="option-selector__input" id="radio10" name="radio3" type="radio" />
                        <div class="custom-input custom-input--currency">
                            <input class="custom-input__input" type="text" />
                        </div>
                        {% if fund_radios_custom_input_text %}
                            <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>

  <!--       {% if fund_frequency %}
            <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
                <div class="form-small-col-6">
                    <input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
                    <label class="field-set__label field-set__label--radio" for="radio1">Once</label>
                </div>
                <div class="form-small-col-6">
                    <input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
                    <label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
                </div>
            </div>
        {% endif %} -->

        {% if fund_input_type == 'radio' %}

            <div class="giving-handles">

                {% for radio in fund_radios %}
                    <div class="giving-handles__handle giving-handles__handle-{{ radio.regularity }}" data-amount="{{ radio.amount }}">
                        {{ radio.handle }}
                    </div>

                {% endfor %}

            </div>

        {% endif %}

        {% if giving_options %}
            <div class="fund-selector-field payment-methods">
                <div class="payment-methods__item payment-methods__item--once">
                    <div class="payment-methods__button">
                        <button class="button pay-by-card"><span>Pay by card</span></button>
                    </div>
                    <div class="payment-methods__button">
                        <button class="button pay-by-paypal"><span>Pay by</span></button>
                    </div>
                </div>
                {% if fund_frequency %}
                    <div class="payment-methods__item payment-methods__item--regularly">
                        <div class="payment-methods__button">
                            <button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
                        </div>
                    </div>
                {% endif %}
            </div>
        {% else %}
            <div class="fund-selector-field">
                <button class="button pay-by-card"><span>Give by</span></button>
                <a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
            </div>
        {% endif %}
    </div>
</div>

<div class="giving-widget ">

    
    <div class="fund-selector">

        <!-- Can be a span or a label. Depends on whether or not there's a select -->
        <label for="destination-select" class="fund-selector__title">I want to give to</label>
                    <span class="fund-selector__destination">the Central African Republic</span>
        
        
        <div class="fund-selector-field">
                            <div class="option-selector ">

                    
                        <div class="option-selector__item option-selector__item--">
                            <input class="option-selector__input" id="radio1" name="" type="radio" value="" />
                            <label class="option-selector__label" for="radio1">£10</label>
                                                    </div>

                    
                        <div class="option-selector__item option-selector__item--">
                            <input class="option-selector__input" id="radio2" name="" type="radio" value="" />
                            <label class="option-selector__label" for="radio2">£20</label>
                                                    </div>

                    
                        <div class="option-selector__item option-selector__item--">
                            <input class="option-selector__input" id="radio3" name="" type="radio" value="" />
                            <label class="option-selector__label" for="radio3">£50</label>
                                                    </div>

                                       
                    <div class="option-selector__item option-selector__item--with-input">
                        <input class="option-selector__input" id="radio10" name="radio3" type="radio" />
                        <div class="custom-input custom-input--currency">
                            <input class="custom-input__input" type="text" />
                        </div>
                                            </div>
                </div>
                    </div>

  <!--        -->

        
            <div class="giving-handles">

                                    <div class="giving-handles__handle giving-handles__handle-" data-amount="">
                        
                    </div>

                                    <div class="giving-handles__handle giving-handles__handle-" data-amount="">
                        
                    </div>

                                    <div class="giving-handles__handle giving-handles__handle-" data-amount="">
                        
                    </div>

                
            </div>

        
                    <div class="fund-selector-field">
                <button class="button pay-by-card"><span>Give by</span></button>
                <a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
            </div>
            </div>
</div>

<div class="giving-widget {% if giving_page %} giving-widget--giving-page{% endif %}">

    {% if fund_frequency %}
        <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
            <div class="form-small-col-6">
                <input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
                <label class="field-set__label field-set__label--radio" for="radio1">Once</label>
            </div>
            <div class="form-small-col-6">
                <input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
                <label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
            </div>
        </div>
    {% endif %}

    <div class="fund-selector">

        <!-- Can be a span or a label. Depends on whether or not there's a select -->
        <label for="destination-select" class="fund-selector__title">{{ fund_selector_title }}</label>
        {% if fund_selected %}
            <span class="fund-selector__destination">{{ fund_selected }}</span>
        {% endif %}

        {% if funds %}
            <div class="fund-selector__destinations fund-selector-field">
                <div class="custom-select">
                    <span class="custom-select__selected-value"></span>
                    <select class="custom-select__input" id="destination-select">
                        {% for fund in funds %}
                            <option value="{{ fund.id }}">{{ fund.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        {% endif %}

        <div class="fund-selector-field">
            {% if fund_input_type == 'text' %}
                <div class="custom-input custom-input--currency">
                    <input class="custom-input__input" type="text" />
                </div>
            {% elseif fund_input_type == 'radio' %}
                <div class="option-selector {% if fund_radios[0].text %}option-selector--with-text{% endif %}">

                    {% for radio in fund_radios %}

                        <div class="option-selector__item option-selector__item--{{ radio.regularity }}">
                            <input class="option-selector__input" id="{{ radio.id }}" name="{{ radio.regularity }}" type="radio" value="{{ radio.amount }}" {% if radio.checked %} checked="checked"{% endif %}/>
                            <label class="option-selector__label" for="{{ radio.id }}">{{ radio.label }}</label>
                            {% if radio.text %}
                                <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                            {% endif %}
                        </div>

                    {% endfor %}
                   
                    <div class="option-selector__item option-selector__item--with-input">
                        <input class="option-selector__input" id="radio10" name="radio3" type="radio" />
                        <div class="custom-input custom-input--currency">
                            <input class="custom-input__input" type="text" />
                        </div>
                        {% if fund_radios_custom_input_text %}
                            <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>

  <!--       {% if fund_frequency %}
            <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
                <div class="form-small-col-6">
                    <input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
                    <label class="field-set__label field-set__label--radio" for="radio1">Once</label>
                </div>
                <div class="form-small-col-6">
                    <input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
                    <label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
                </div>
            </div>
        {% endif %} -->

        {% if fund_input_type == 'radio' %}

            <div class="giving-handles">

                {% for radio in fund_radios %}
                    <div class="giving-handles__handle giving-handles__handle-{{ radio.regularity }}" data-amount="{{ radio.amount }}">
                        {{ radio.handle }}
                    </div>

                {% endfor %}

            </div>

        {% endif %}

        {% if giving_options %}
            <div class="fund-selector-field payment-methods">
                <div class="payment-methods__item payment-methods__item--once">
                    <div class="payment-methods__button">
                        <button class="button pay-by-card"><span>Pay by card</span></button>
                    </div>
                    <div class="payment-methods__button">
                        <button class="button pay-by-paypal"><span>Pay by</span></button>
                    </div>
                </div>
                {% if fund_frequency %}
                    <div class="payment-methods__item payment-methods__item--regularly">
                        <div class="payment-methods__button">
                            <button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
                        </div>
                    </div>
                {% endif %}
            </div>
        {% else %}
            <div class="fund-selector-field">
                <button class="button pay-by-card"><span>Give by</span></button>
                <a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
            </div>
        {% endif %}
    </div>
</div>

<div class="giving-widget giving-widget--inline">
    <div class="fund-selector">
        <!-- Can be a span or a label. Depends on whether or not there's a select -->
        <span class="fund-selector__title">DONATE NOW</span>

        <div class="fund-selector-field">
            <div class="option-selector">
                <div class="option-selector__item">
                    <input class="option-selector__input" id="radio17" name="radio6" type="radio" checked="checked" />
                    <label class="option-selector__label" for="radio17">&pound;10</label>
                </div>
                <div class="option-selector__item">
                    <input class="option-selector__input" id="radio18" name="radio6" type="radio" />
                    <label class="option-selector__label" for="radio18">&pound;20</label>
                </div>
                <div class="option-selector__item">
                    <input class="option-selector__input" id="radio19" name="radio6" type="radio" />
                    <label class="option-selector__label" for="radio19">&pound;50</label>
                </div>
                <div class="option-selector__item option-selector__item--with-input">
                    <input class="option-selector__input" id="radio20" name="radio6" type="radio" />
                    <div class="custom-input custom-input--currency">
                        <input class="custom-input__input" type="text" placeholder="other" />
                    </div>
                </div>
            </div>
        </div>

                <div class="fund-selector-field payment-methods">
            <div class="payment-methods__item payment-methods__item--once">
                <div class="payment-methods__button">
                    <button class="button pay-by-card"><span>Pay by card</span></button>
                </div>
                <div class="payment-methods__button">
                    <button class="button pay-by-paypal"><span>Pay by</span></button>
                </div>
            </div>
            <div class="payment-methods__item payment-methods__item--regularly">
                <div class="payment-methods__button">
                    <button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="giving-widget giving-widget--inline">
    <div class="fund-selector">
        <!-- Can be a span or a label. Depends on whether or not there's a select -->
        <span class="fund-selector__title">DONATE NOW</span>

        <div class="fund-selector-field">
            <div class="option-selector">
                <div class="option-selector__item">
                    <input class="option-selector__input" id="radio17" name="radio6" type="radio" checked="checked" />
                    <label class="option-selector__label" for="radio17">&pound;10</label>
                </div>
                <div class="option-selector__item">
                    <input class="option-selector__input" id="radio18" name="radio6" type="radio" />
                    <label class="option-selector__label" for="radio18">&pound;20</label>
                </div>
                <div class="option-selector__item">
                    <input class="option-selector__input" id="radio19" name="radio6" type="radio" />
                    <label class="option-selector__label" for="radio19">&pound;50</label>
                </div>
                <div class="option-selector__item option-selector__item--with-input">
                    <input class="option-selector__input" id="radio20" name="radio6" type="radio" />
                    <div class="custom-input custom-input--currency">
                        <input class="custom-input__input" type="text" placeholder="other" />
                    </div>
                </div>
            </div>
        </div>

                <div class="fund-selector-field payment-methods">
            <div class="payment-methods__item payment-methods__item--once">
                <div class="payment-methods__button">
                    <button class="button pay-by-card"><span>Pay by card</span></button>
                </div>
                <div class="payment-methods__button">
                    <button class="button pay-by-paypal"><span>Pay by</span></button>
                </div>
            </div>
            <div class="payment-methods__item payment-methods__item--regularly">
                <div class="payment-methods__button">
                    <button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="giving-widget ">

    
    <div class="fund-selector">

        <!-- Can be a span or a label. Depends on whether or not there's a select -->
        <label for="destination-select" class="fund-selector__title">I want to give to</label>
                    <span class="fund-selector__destination">the Central African Republic</span>
        
        
        <div class="fund-selector-field">
                            <div class="custom-input custom-input--currency">
                    <input class="custom-input__input" type="text" />
                </div>
                    </div>

  <!--        -->

        
                    <div class="fund-selector-field">
                <button class="button pay-by-card"><span>Give by</span></button>
                <a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
            </div>
            </div>
</div>

<div class="giving-widget {% if giving_page %} giving-widget--giving-page{% endif %}">

    {% if fund_frequency %}
        <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
            <div class="form-small-col-6">
                <input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
                <label class="field-set__label field-set__label--radio" for="radio1">Once</label>
            </div>
            <div class="form-small-col-6">
                <input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
                <label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
            </div>
        </div>
    {% endif %}

    <div class="fund-selector">

        <!-- Can be a span or a label. Depends on whether or not there's a select -->
        <label for="destination-select" class="fund-selector__title">{{ fund_selector_title }}</label>
        {% if fund_selected %}
            <span class="fund-selector__destination">{{ fund_selected }}</span>
        {% endif %}

        {% if funds %}
            <div class="fund-selector__destinations fund-selector-field">
                <div class="custom-select">
                    <span class="custom-select__selected-value"></span>
                    <select class="custom-select__input" id="destination-select">
                        {% for fund in funds %}
                            <option value="{{ fund.id }}">{{ fund.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        {% endif %}

        <div class="fund-selector-field">
            {% if fund_input_type == 'text' %}
                <div class="custom-input custom-input--currency">
                    <input class="custom-input__input" type="text" />
                </div>
            {% elseif fund_input_type == 'radio' %}
                <div class="option-selector {% if fund_radios[0].text %}option-selector--with-text{% endif %}">

                    {% for radio in fund_radios %}

                        <div class="option-selector__item option-selector__item--{{ radio.regularity }}">
                            <input class="option-selector__input" id="{{ radio.id }}" name="{{ radio.regularity }}" type="radio" value="{{ radio.amount }}" {% if radio.checked %} checked="checked"{% endif %}/>
                            <label class="option-selector__label" for="{{ radio.id }}">{{ radio.label }}</label>
                            {% if radio.text %}
                                <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                            {% endif %}
                        </div>

                    {% endfor %}
                   
                    <div class="option-selector__item option-selector__item--with-input">
                        <input class="option-selector__input" id="radio10" name="radio3" type="radio" />
                        <div class="custom-input custom-input--currency">
                            <input class="custom-input__input" type="text" />
                        </div>
                        {% if fund_radios_custom_input_text %}
                            <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>

  <!--       {% if fund_frequency %}
            <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
                <div class="form-small-col-6">
                    <input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
                    <label class="field-set__label field-set__label--radio" for="radio1">Once</label>
                </div>
                <div class="form-small-col-6">
                    <input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
                    <label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
                </div>
            </div>
        {% endif %} -->

        {% if fund_input_type == 'radio' %}

            <div class="giving-handles">

                {% for radio in fund_radios %}
                    <div class="giving-handles__handle giving-handles__handle-{{ radio.regularity }}" data-amount="{{ radio.amount }}">
                        {{ radio.handle }}
                    </div>

                {% endfor %}

            </div>

        {% endif %}

        {% if giving_options %}
            <div class="fund-selector-field payment-methods">
                <div class="payment-methods__item payment-methods__item--once">
                    <div class="payment-methods__button">
                        <button class="button pay-by-card"><span>Pay by card</span></button>
                    </div>
                    <div class="payment-methods__button">
                        <button class="button pay-by-paypal"><span>Pay by</span></button>
                    </div>
                </div>
                {% if fund_frequency %}
                    <div class="payment-methods__item payment-methods__item--regularly">
                        <div class="payment-methods__button">
                            <button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
                        </div>
                    </div>
                {% endif %}
            </div>
        {% else %}
            <div class="fund-selector-field">
                <button class="button pay-by-card"><span>Give by</span></button>
                <a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
            </div>
        {% endif %}
    </div>
</div>

<div class="giving-widget ">

            <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
            <div class="form-small-col-6">
                <input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
                <label class="field-set__label field-set__label--radio" for="radio1">Once</label>
            </div>
            <div class="form-small-col-6">
                <input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
                <label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
            </div>
        </div>
    
    <div class="fund-selector">

        <!-- Can be a span or a label. Depends on whether or not there's a select -->
        <label for="destination-select" class="fund-selector__title"> </label>
                    <span class="fund-selector__destination">Your gift is powerful in God&#039;s hand.</span>
        
        
        <div class="fund-selector-field">
                            <div class="option-selector ">

                    
                        <div class="option-selector__item option-selector__item--once">
                            <input class="option-selector__input" id="radio41" name="once" type="radio" value="10"  checked="checked"/>
                            <label class="option-selector__label" for="radio41">£10</label>
                                                    </div>

                    
                        <div class="option-selector__item option-selector__item--once">
                            <input class="option-selector__input" id="radio42" name="once" type="radio" value="20" />
                            <label class="option-selector__label" for="radio42">£20</label>
                                                    </div>

                    
                        <div class="option-selector__item option-selector__item--once">
                            <input class="option-selector__input" id="radio43" name="once" type="radio" value="50" />
                            <label class="option-selector__label" for="radio43">£50</label>
                                                    </div>

                    
                        <div class="option-selector__item option-selector__item--regular">
                            <input class="option-selector__input" id="radio44" name="regular" type="radio" value="11"  checked="checked"/>
                            <label class="option-selector__label" for="radio44">£11</label>
                                                    </div>

                    
                        <div class="option-selector__item option-selector__item--regular">
                            <input class="option-selector__input" id="radio45" name="regular" type="radio" value="21" />
                            <label class="option-selector__label" for="radio45">£21</label>
                                                    </div>

                    
                        <div class="option-selector__item option-selector__item--regular">
                            <input class="option-selector__input" id="radio46" name="regular" type="radio" value="51" />
                            <label class="option-selector__label" for="radio46">£51</label>
                                                    </div>

                                       
                    <div class="option-selector__item option-selector__item--with-input">
                        <input class="option-selector__input" id="radio10" name="radio3" type="radio" />
                        <div class="custom-input custom-input--currency">
                            <input class="custom-input__input" type="text" />
                        </div>
                                            </div>
                </div>
                    </div>

  <!--                   <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
                <div class="form-small-col-6">
                    <input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
                    <label class="field-set__label field-set__label--radio" for="radio1">Once</label>
                </div>
                <div class="form-small-col-6">
                    <input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
                    <label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
                </div>
            </div>
         -->

        
            <div class="giving-handles">

                                    <div class="giving-handles__handle giving-handles__handle-once" data-amount="10">
                        £10 could do this that and that
                    </div>

                                    <div class="giving-handles__handle giving-handles__handle-once" data-amount="20">
                        £20 could do this that and that
                    </div>

                                    <div class="giving-handles__handle giving-handles__handle-once" data-amount="50">
                        £50 could do this that and that
                    </div>

                                    <div class="giving-handles__handle giving-handles__handle-regular" data-amount="11">
                        £10 regularly could do this that and that
                    </div>

                                    <div class="giving-handles__handle giving-handles__handle-regular" data-amount="21">
                        £20 regularly could do this that and that
                    </div>

                                    <div class="giving-handles__handle giving-handles__handle-regular" data-amount="51">
                        £50 regularly could do this that and that
                    </div>

                
            </div>

        
                    <div class="fund-selector-field payment-methods">
                <div class="payment-methods__item payment-methods__item--once">
                    <div class="payment-methods__button">
                        <button class="button pay-by-card"><span>Pay by card</span></button>
                    </div>
                    <div class="payment-methods__button">
                        <button class="button pay-by-paypal"><span>Pay by</span></button>
                    </div>
                </div>
                                    <div class="payment-methods__item payment-methods__item--regularly">
                        <div class="payment-methods__button">
                            <button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
                        </div>
                    </div>
                            </div>
            </div>
</div>

<div class="giving-widget {% if giving_page %} giving-widget--giving-page{% endif %}">

    {% if fund_frequency %}
        <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
            <div class="form-small-col-6">
                <input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
                <label class="field-set__label field-set__label--radio" for="radio1">Once</label>
            </div>
            <div class="form-small-col-6">
                <input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
                <label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
            </div>
        </div>
    {% endif %}

    <div class="fund-selector">

        <!-- Can be a span or a label. Depends on whether or not there's a select -->
        <label for="destination-select" class="fund-selector__title">{{ fund_selector_title }}</label>
        {% if fund_selected %}
            <span class="fund-selector__destination">{{ fund_selected }}</span>
        {% endif %}

        {% if funds %}
            <div class="fund-selector__destinations fund-selector-field">
                <div class="custom-select">
                    <span class="custom-select__selected-value"></span>
                    <select class="custom-select__input" id="destination-select">
                        {% for fund in funds %}
                            <option value="{{ fund.id }}">{{ fund.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        {% endif %}

        <div class="fund-selector-field">
            {% if fund_input_type == 'text' %}
                <div class="custom-input custom-input--currency">
                    <input class="custom-input__input" type="text" />
                </div>
            {% elseif fund_input_type == 'radio' %}
                <div class="option-selector {% if fund_radios[0].text %}option-selector--with-text{% endif %}">

                    {% for radio in fund_radios %}

                        <div class="option-selector__item option-selector__item--{{ radio.regularity }}">
                            <input class="option-selector__input" id="{{ radio.id }}" name="{{ radio.regularity }}" type="radio" value="{{ radio.amount }}" {% if radio.checked %} checked="checked"{% endif %}/>
                            <label class="option-selector__label" for="{{ radio.id }}">{{ radio.label }}</label>
                            {% if radio.text %}
                                <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                            {% endif %}
                        </div>

                    {% endfor %}
                   
                    <div class="option-selector__item option-selector__item--with-input">
                        <input class="option-selector__input" id="radio10" name="radio3" type="radio" />
                        <div class="custom-input custom-input--currency">
                            <input class="custom-input__input" type="text" />
                        </div>
                        {% if fund_radios_custom_input_text %}
                            <span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>

  <!--       {% if fund_frequency %}
            <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
                <div class="form-small-col-6">
                    <input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
                    <label class="field-set__label field-set__label--radio" for="radio1">Once</label>
                </div>
                <div class="form-small-col-6">
                    <input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
                    <label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
                </div>
            </div>
        {% endif %} -->

        {% if fund_input_type == 'radio' %}

            <div class="giving-handles">

                {% for radio in fund_radios %}
                    <div class="giving-handles__handle giving-handles__handle-{{ radio.regularity }}" data-amount="{{ radio.amount }}">
                        {{ radio.handle }}
                    </div>

                {% endfor %}

            </div>

        {% endif %}

        {% if giving_options %}
            <div class="fund-selector-field payment-methods">
                <div class="payment-methods__item payment-methods__item--once">
                    <div class="payment-methods__button">
                        <button class="button pay-by-card"><span>Pay by card</span></button>
                    </div>
                    <div class="payment-methods__button">
                        <button class="button pay-by-paypal"><span>Pay by</span></button>
                    </div>
                </div>
                {% if fund_frequency %}
                    <div class="payment-methods__item payment-methods__item--regularly">
                        <div class="payment-methods__button">
                            <button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
                        </div>
                    </div>
                {% endif %}
            </div>
        {% else %}
            <div class="fund-selector-field">
                <button class="button pay-by-card"><span>Give by</span></button>
                <a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
            </div>
        {% endif %}
    </div>
</div>

<div class="giving-widget" data-image-id="example-image-2" data-text-id="example-text-2">
    <div class="destination-info">
        <div id="example-image-2" class="destination-info__image" data-image="http://lorempixel.com/380/155"></div>
        <div id="example-text-2" class="destination-info__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis tincidunt odio, ac convallis orci. Nulla elementum convallis lorem ar.</div>
    </div>
    <div class="fund-selector">
        <!-- Can be a span or a label. Depends on whether or not there's a select -->
        <label for="destination-select" class="fund-selector__title">I want to give to</label>

        <div class="fund-selector__destinations fund-selector-field">
            <div class="custom-select">
                <span class="custom-select__selected-value"></span>
                <select class="custom-select__input" id="destination-select">
                    <option data-image="http://lorempixel.com/100/100" data-text="Quisque quis tincidunt odio, ac convallis orci. Nulla elementum convallis lorem ar." value="1">The Greatest Need</option>
                    <option data-image="http://lorempixel.com/200/200" data-text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." value="2">the Central African Republic</option>
                    <option data-image="http://lorempixel.com/300/300" data-text="three" value="3">the South Sudan Crisis</option>
                </select>
            </div>
        </div>
        <div class="fund-selector-field">
            <div class="custom-input custom-input--currency">
                <input class="custom-input__input" type="text" />
            </div>
        </div>
        <div class="fund-selector-field">
            <button class="button pay-by-card"><span>Pay by card</span></button>
        </div>
    </div>
</div>

<div class="giving-widget" data-image-id="example-image-2" data-text-id="example-text-2">
    <div class="destination-info">
        <div id="example-image-2" class="destination-info__image" data-image="http://lorempixel.com/380/155"></div>
        <div id="example-text-2" class="destination-info__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis tincidunt odio, ac convallis orci. Nulla elementum convallis lorem ar.</div>
    </div>
    <div class="fund-selector">
        <!-- Can be a span or a label. Depends on whether or not there's a select -->
        <label for="destination-select" class="fund-selector__title">I want to give to</label>

        <div class="fund-selector__destinations fund-selector-field">
            <div class="custom-select">
                <span class="custom-select__selected-value"></span>
                <select class="custom-select__input" id="destination-select">
                    <option data-image="http://lorempixel.com/100/100" data-text="Quisque quis tincidunt odio, ac convallis orci. Nulla elementum convallis lorem ar." value="1">The Greatest Need</option>
                    <option data-image="http://lorempixel.com/200/200" data-text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." value="2">the Central African Republic</option>
                    <option data-image="http://lorempixel.com/300/300" data-text="three" value="3">the South Sudan Crisis</option>
                </select>
            </div>
        </div>
        <div class="fund-selector-field">
            <div class="custom-input custom-input--currency">
                <input class="custom-input__input" type="text" />
            </div>
        </div>
        <div class="fund-selector-field">
            <button class="button pay-by-card"><span>Pay by card</span></button>
        </div>
    </div>
</div>

<div class="churches-chart">
    <div class="churches-chart__image" data-svg="/images/mainsite5/churches-chart/donut.svg">
        <img src="/images/mainsite5/churches-chart/churches-chart-placehold.png" alt="Connected chart">
    </div>
    <ul class="churches-chart__legend">
        <li class="churches-chart__legend-item churches-chart__legend-item--give" data-id="give"><a href="#give-section">Partner your church</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--respond" data-id="respond"><a href="#respond-section">Pray</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--connect-church" data-id="connect-church"><a href="#connect-church-section">Act</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--prayer" data-id="prayer"><a href="#prayer-section">Resources</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--youth" data-id="youth"><a href="#youth-section">Request a speaker</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--church-life" data-id="church-life"><a href="#church-life-section">Youth</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--go-with-tearfund" data-id="go-with-tearfund"><a href="#go-with-tearfund-section">Go Overseas</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--lend-a-hand" data-id="lend-a-hand"><a href="#lend-a-hand">Emergency Response</a></li>
    </ul>
    <div class="churches-chart__details">
        <article id="give-section" class="churches-chart-detail churches-chart-detail--give">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Partner your church</h1>
            <div class="churches-chart-detail__copy">
                <p>You can build a lasting relationship between your church and one of our church based partners overseas through Connected Church.</p>
            </div>
            <a class="button" href="https://connected.tearfund.org/">Find out more</a>
        </article>
        <article id="respond-section" class="churches-chart-detail churches-chart-detail--respond">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Pray</h1>
            <div class="churches-chart-detail__copy">
                <p>Tearfund’s work is rooted in prayer. Get your church praying about where it’s needed the most. Click through to sign up for One Voice prayer emails and to find resources for your church.</p>
            </div>
            <a class="button" href="http://www.tearfund.org/pray">View Resources and Sign Up</a>
        </article>
        </article>
        <article id="connect-church-section" class="churches-chart-detail churches-chart-detail--connect-church">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Act</h1>
             <div class="churches-chart-detail__copy">
                <p>We need to take action to beat poverty and injustice. This includes calling on leaders in the UK and globally to change laws and policies, and making changes in our own lives too. Click through to sign up for Tearfund Action emails and to find resources for your church.</p>
            </div>
            <a class="button" href="http://www.tearfund.org/action">View Resources and Sign Up</a>

        </article>
        <article id="prayer-section" class="churches-chart-detail churches-chart-detail--prayer">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Resources</h1>
            <div class="churches-chart-detail__copy">
                <p>All of our resources in one handy space! Check out our Bible studies, information to help you organise a fundraiser, service outlines and other ready-to-use resources.</p>
            </div>
            <a class="button" href="https://www.tearfund.org/en/about_you/resources/for_churches/">View Resources
</a>
        </article>
        <article id="youth-section" class="churches-chart-detail churches-chart-detail--youth">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Request a speaker</h1>
            <div class="churches-chart-detail__copy">
                <p>Inspire your church with an accredited Tearfund speaker who can share amazing stories of lives changed through our church-based partners overseas.</p>
            </div>
            <a class="button" href="https://www.tearfund.org/en/about_you/book_a_speaker/">Book a speaker</a>
        </article>
        <article id="church-life-section" class="churches-chart-detail churches-chart-detail--church-life">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Youth</h1>
            <div class="churches-chart-detail__copy">
                <p>Bible studies, activities and lesson plans to keep young people informed, inspired and involved.</p>
            </div>
            <a class="button" href="https://www.tearfund.org/en/about_you/youth/">See resources</a>
        </article>
        <article id="go-with-tearfund-section" class="churches-chart-detail churches-chart-detail--go-with-tearfund">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Go Overseas</h1>
            <div class="churches-chart-detail__copy">
                <p>Come on a Tearfund Go overseas trip with a group from your church and get inspired together.</p>
            </div>
            <a class="button" href="https://www.tearfund.org/en/about_you/go_overseas/">View trips</a>
        </article>
         <article id="lend-a-hand-section" class="churches-chart-detail churches-chart-detail--lend-a-hand">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Emergency Response</h1>
            <div class="churches-chart-detail__copy">
                <p>When disasters strike overseas, there is often desperate need and the Church feels moved to help. Click through to support the latest emergency and sign up to the Church Leader Newsletter below to receive information and updates when they happen. </p>
            </div>
            <a class="button" href="https://www.tearfund.org/en/latest/burundi_crisis_appeal/">Respond to emergencies</a>
        </article>
    </div>
</div>

<div class="churches-chart">
    <div class="churches-chart__image" data-svg="/images/mainsite5/churches-chart/donut.svg">
        <img src="/images/mainsite5/churches-chart/churches-chart-placehold.png" alt="Connected chart">
    </div>
    <ul class="churches-chart__legend">
        <li class="churches-chart__legend-item churches-chart__legend-item--give" data-id="give"><a href="#give-section">Partner your church</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--respond" data-id="respond"><a href="#respond-section">Pray</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--connect-church" data-id="connect-church"><a href="#connect-church-section">Act</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--prayer" data-id="prayer"><a href="#prayer-section">Resources</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--youth" data-id="youth"><a href="#youth-section">Request a speaker</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--church-life" data-id="church-life"><a href="#church-life-section">Youth</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--go-with-tearfund" data-id="go-with-tearfund"><a href="#go-with-tearfund-section">Go Overseas</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--lend-a-hand" data-id="lend-a-hand"><a href="#lend-a-hand">Emergency Response</a></li>
    </ul>
    <div class="churches-chart__details">
        <article id="give-section" class="churches-chart-detail churches-chart-detail--give">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Partner your church</h1>
            <div class="churches-chart-detail__copy">
                <p>You can build a lasting relationship between your church and one of our church based partners overseas through Connected Church.</p>
            </div>
            <a class="button" href="https://connected.tearfund.org/">Find out more</a>
        </article>
        <article id="respond-section" class="churches-chart-detail churches-chart-detail--respond">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Pray</h1>
            <div class="churches-chart-detail__copy">
                <p>Tearfund’s work is rooted in prayer. Get your church praying about where it’s needed the most. Click through to sign up for One Voice prayer emails and to find resources for your church.</p>
            </div>
            <a class="button" href="http://www.tearfund.org/pray">View Resources and Sign Up</a>
        </article>
        </article>
        <article id="connect-church-section" class="churches-chart-detail churches-chart-detail--connect-church">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Act</h1>
             <div class="churches-chart-detail__copy">
                <p>We need to take action to beat poverty and injustice. This includes calling on leaders in the UK and globally to change laws and policies, and making changes in our own lives too. Click through to sign up for Tearfund Action emails and to find resources for your church.</p>
            </div>
            <a class="button" href="http://www.tearfund.org/action">View Resources and Sign Up</a>

        </article>
        <article id="prayer-section" class="churches-chart-detail churches-chart-detail--prayer">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Resources</h1>
            <div class="churches-chart-detail__copy">
                <p>All of our resources in one handy space! Check out our Bible studies, information to help you organise a fundraiser, service outlines and other ready-to-use resources.</p>
            </div>
            <a class="button" href="https://www.tearfund.org/en/about_you/resources/for_churches/">View Resources
</a>
        </article>
        <article id="youth-section" class="churches-chart-detail churches-chart-detail--youth">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Request a speaker</h1>
            <div class="churches-chart-detail__copy">
                <p>Inspire your church with an accredited Tearfund speaker who can share amazing stories of lives changed through our church-based partners overseas.</p>
            </div>
            <a class="button" href="https://www.tearfund.org/en/about_you/book_a_speaker/">Book a speaker</a>
        </article>
        <article id="church-life-section" class="churches-chart-detail churches-chart-detail--church-life">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Youth</h1>
            <div class="churches-chart-detail__copy">
                <p>Bible studies, activities and lesson plans to keep young people informed, inspired and involved.</p>
            </div>
            <a class="button" href="https://www.tearfund.org/en/about_you/youth/">See resources</a>
        </article>
        <article id="go-with-tearfund-section" class="churches-chart-detail churches-chart-detail--go-with-tearfund">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Go Overseas</h1>
            <div class="churches-chart-detail__copy">
                <p>Come on a Tearfund Go overseas trip with a group from your church and get inspired together.</p>
            </div>
            <a class="button" href="https://www.tearfund.org/en/about_you/go_overseas/">View trips</a>
        </article>
         <article id="lend-a-hand-section" class="churches-chart-detail churches-chart-detail--lend-a-hand">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Emergency Response</h1>
            <div class="churches-chart-detail__copy">
                <p>When disasters strike overseas, there is often desperate need and the Church feels moved to help. Click through to support the latest emergency and sign up to the Church Leader Newsletter below to receive information and updates when they happen. </p>
            </div>
            <a class="button" href="https://www.tearfund.org/en/latest/burundi_crisis_appeal/">Respond to emergencies</a>
        </article>
    </div>
</div>

<div class="transparency-chart">
    <div class="transparency-chart__image" data-svg="/images/mainsite5/transparency-chart/donut.svg">
        <img src="/images/mainsite5/transparency-chart/donut.png" alt="Transparency chart">
    </div>
    <ul class="transparency-chart__legend">
        <li class="transparency-chart__legend-item transparency-chart__legend-item--disaster-response" data-id="disaster-response"><a href="#disaster-response-section">Disaster Response</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--developing-communities" data-id="developing-communities"><a href="#developing-communities-section">Developing Communities</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--global-church" data-id="global-church"><a href="#global-church-section">Enabling the global church to act</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--changing-policies" data-id="changing-policies"><a href="#changing-policies-section">Changing unjust policies</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--fundraising" data-id="fundraising"><a href="#fundraising-section">Fundraising</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--running-costs" data-id="running-costs"><a href="#running-costs-section">Support &amp; Running costs</a></li>
    </ul>
    <div class="transparency-chart__details">
        <article id="disaster-response-section" class="transparency-chart-detail transparency-chart-detail--disaster-response">
            <span class="transparency-chart-detail__spend">38p</span>
            <h1 class="transparency-chart-detail__title">Responding to Disaster</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="developing-communities-section" class="transparency-chart-detail transparency-chart-detail--developing-communities">
            <span class="transparency-chart-detail__spend">31p</span>
            <h1 class="transparency-chart-detail__title">Developing Communities</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="global-church-section" class="transparency-chart-detail transparency-chart-detail--global-church">
            <span class="transparency-chart-detail__spend">10p</span>
            <h1 class="transparency-chart-detail__title">Enabling the Global Church to Act</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="changing-policies-section" class="transparency-chart-detail transparency-chart-detail--changing-policies">
            <span class="transparency-chart-detail__spend">6p</span>
            <h1 class="transparency-chart-detail__title">Changing unjust policies</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="fundraising-section" class="transparency-chart-detail transparency-chart-detail--fundraising">
            <span class="transparency-chart-detail__spend">9p</span>
            <h1 class="transparency-chart-detail__title">Fundraising</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="running-costs-section" class="transparency-chart-detail transparency-chart-detail--running-costs">
            <span class="transparency-chart-detail__spend">6p</span>
            <h1 class="transparency-chart-detail__title">Support &amp; Running costs</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
    </div>
</div>

<div class="transparency-chart">
    <div class="transparency-chart__image" data-svg="/images/mainsite5/transparency-chart/donut.svg">
        <img src="/images/mainsite5/transparency-chart/donut.png" alt="Transparency chart">
    </div>
    <ul class="transparency-chart__legend">
        <li class="transparency-chart__legend-item transparency-chart__legend-item--disaster-response" data-id="disaster-response"><a href="#disaster-response-section">Disaster Response</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--developing-communities" data-id="developing-communities"><a href="#developing-communities-section">Developing Communities</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--global-church" data-id="global-church"><a href="#global-church-section">Enabling the global church to act</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--changing-policies" data-id="changing-policies"><a href="#changing-policies-section">Changing unjust policies</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--fundraising" data-id="fundraising"><a href="#fundraising-section">Fundraising</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--running-costs" data-id="running-costs"><a href="#running-costs-section">Support &amp; Running costs</a></li>
    </ul>
    <div class="transparency-chart__details">
        <article id="disaster-response-section" class="transparency-chart-detail transparency-chart-detail--disaster-response">
            <span class="transparency-chart-detail__spend">38p</span>
            <h1 class="transparency-chart-detail__title">Responding to Disaster</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="developing-communities-section" class="transparency-chart-detail transparency-chart-detail--developing-communities">
            <span class="transparency-chart-detail__spend">31p</span>
            <h1 class="transparency-chart-detail__title">Developing Communities</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="global-church-section" class="transparency-chart-detail transparency-chart-detail--global-church">
            <span class="transparency-chart-detail__spend">10p</span>
            <h1 class="transparency-chart-detail__title">Enabling the Global Church to Act</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="changing-policies-section" class="transparency-chart-detail transparency-chart-detail--changing-policies">
            <span class="transparency-chart-detail__spend">6p</span>
            <h1 class="transparency-chart-detail__title">Changing unjust policies</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="fundraising-section" class="transparency-chart-detail transparency-chart-detail--fundraising">
            <span class="transparency-chart-detail__spend">9p</span>
            <h1 class="transparency-chart-detail__title">Fundraising</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="running-costs-section" class="transparency-chart-detail transparency-chart-detail--running-costs">
            <span class="transparency-chart-detail__spend">6p</span>
            <h1 class="transparency-chart-detail__title">Support &amp; Running costs</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
    </div>
</div>

<div class="full-banner 
							 
				"
	>

	
	
	
		<div class="inner">
							<div class="full-banner__content-wrapper
								"><!-- RESPONSIVE CONTAINER -->
											<!-- CONTENT START -->
						<div class="full-banner__content ">

							<!-- If author header -->
							
							
							<h1 class="full-banner__title 
																">About us</h1>
							
							<!-- Buttons -->
							
							
							<!-- If article has author -->
															<div class="article-byline  article-byline--no-image ">

									
									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							
							<!-- If sharing is on -->
							
							<!-- If is filter banner -->
																			<!-- CONTENT END -->
					</div>
				</div>
									</div>

	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
			full-banner--image 	full-banner--gradient full-banner--gradient-full			 
				"
			data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
	>

	
	
	
		<div class="inner">
							<div class="full-banner__content-wrapper
								"><!-- RESPONSIVE CONTAINER -->
											<!-- CONTENT START -->
						<div class="full-banner__content ">

							<!-- If author header -->
							
							
							<h1 class="full-banner__title 
																">About us</h1>
							
							<!-- Buttons -->
							
							
							<!-- If article has author -->
							
							<!-- If sharing is on -->
							
							<!-- If is filter banner -->
																			<!-- CONTENT END -->
					</div>
				</div>
									</div>

	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
							 
				"
	>

	
	
	
		<div class="inner">
							<div class="full-banner__content-wrapper
								"><!-- RESPONSIVE CONTAINER -->
											<!-- CONTENT START -->
						<div class="full-banner__content full-banner__content--author-no-bg">

							<!-- If author header -->
															<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							
							
							<h1 class="full-banner__title 
								full-banner__title--small								">About us</h1>
							
							<!-- Buttons -->
							
							
							<!-- If article has author -->
							
							<!-- If sharing is on -->
							
							<!-- If is filter banner -->
																			<!-- CONTENT END -->
					</div>
				</div>
									</div>

	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<header class="run-to-the-beat-header">
	<div class="responsive-image-header">
		<picture class="">
			<source media="(min-width: 1400px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1400, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1200, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1000, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=2000 2x">
			<source media="(min-width: 800px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=800, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1600 2x">
		  	<source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=647, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=465, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=375, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=750 2x">
		 	<img src="https://www.tearfund.org/~/media/images/testing/story-header-desktop.jpg" alt="Bolivia">
		</picture>

		<div class="responsive-image-header__text-container">
			<div class="responsive-image-header__text">
				<p>Poverty destroys lives.<br />Join the fightback.</p>
				<a class="button" href="#">Sign up now</a>
			</div>
		</div>

		<picture class="mobile-only">
		  	<source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=647, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=465, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=375, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=750 2x">
		 	<img src="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg" alt="Bolivia">
		</picture>
	</div>
</header>

<header class="run-to-the-beat-header">
	<div class="responsive-image-header">
		<picture class="">
			<source media="(min-width: 1400px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1400, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1200, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1000, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=2000 2x">
			<source media="(min-width: 800px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=800, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1600 2x">
		  	<source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=647, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=465, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=375, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=750 2x">
		 	<img src="https://www.tearfund.org/~/media/images/testing/story-header-desktop.jpg" alt="Bolivia">
		</picture>

		<div class="responsive-image-header__text-container">
			<div class="responsive-image-header__text">
				<p>Poverty destroys lives.<br />Join the fightback.</p>
				<a class="button" href="#">Sign up now</a>
			</div>
		</div>

		<picture class="mobile-only">
		  	<source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=647, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=465, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=375, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=750 2x">
		 	<img src="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg" alt="Bolivia">
		</picture>
	</div>
</header>

<div class="full-banner 
			full-banner--image 		 full-banner--featured		 
				"
			data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
	>

	
	
	
		<div class="inner">
			<div class="full-banner--featured-panel">				<div class="full-banner__content-wrapper
				 full-banner--content-bottom				 full-banner--content-bottom-mobile"><!-- RESPONSIVE CONTAINER -->
											<!-- CONTENT START -->
						<div class="full-banner__content ">

							<!-- If author header -->
							
							
							<h1 class="full-banner__title 
																 full-banner__title--open-sans">The world’s focus on Central Africa</h1>
							<p>Where the need is greatest</p>
							<!-- Buttons -->
															<div class="full-banner__buttons">
																			<a href="#" class="button">Button</a>
																												<a href="#" class="button">Button</a>
																	</div>
							
							
							<!-- If article has author -->
							
							<!-- If sharing is on -->
							
							<!-- If is filter banner -->
																			<!-- CONTENT END -->
					</div>
				</div>
							</div>		</div>

	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	full-banner--bottom-content 		full-banner--image 	full-banner--gradient full-banner--gradient-left	 full-banner--featured	 full-banner--fullscreen	 
				"
			data-image="/images/mainsite5/gvt-header.jpg" data-mobile-image="/images/mainsite5/gvt-header.jpg"
	>

	
	
	
		<div class="inner">
			<div class="full-banner--featured-panel">				<div class="full-banner__content-wrapper
				 full-banner--content-bottom				 full-banner--content-bottom-mobile"><!-- RESPONSIVE CONTAINER -->
					<div class="full-banner--content-left">						<!-- CONTENT START -->
						<div class="full-banner__content ">

							<!-- If author header -->
							
							
							<h1 class="full-banner__title 
																">WHERE DOES GOD WANT YOU TO SERVE?</h1>
							
							<!-- Buttons -->
							
							
							<!-- If article has author -->
							
							<!-- If sharing is on -->
							
							<!-- If is filter banner -->
													</div>						<!-- CONTENT END -->
					</div>
				</div>
									<div class="gvt-trip-picker">
			    <div class="gvt-trip-picker__controls">
			        <div id="pagelayout_0_articleheader_0_titlebottom_0_PnlFilters" class="gvt-trip-picker__filters">
						<div class="custom-select gvt-trip-picker__select gvt-trip-picker__select--who"><span class="custom-select__selected-value">Who</span><select name="pagelayout_0$articleheader_0$titlebottom_0$ctl02" class="custom-select__input">
							<option value="Who" data-null="true">Who</option>
							<option value="me">Just me</option>
							<option value="couple">We're a couple</option>
							<option value="family">We're a family</option>
							<option value="group">We're a group</option>

						</select></div><div class="custom-select gvt-trip-picker__select gvt-trip-picker__select--when"><span class="custom-select__selected-value">When</span><select name="pagelayout_0$articleheader_0$titlebottom_0$ctl05" class="custom-select__input">
							<option value="When" data-null="true">When</option>
							<option value="2017 Winter">2017 Winter</option>
							<option value="2018 Spring">2018 Spring</option>
							<option value="2018 Summer">2018 Summer</option>
							<option value="2018 Autumn">2018 Autumn</option>
							<option value="2018 Winter">2018 Winter</option>
							<option value="2019 Spring">2019 Spring</option>

						</select></div><div class="custom-select gvt-trip-picker__select gvt-trip-picker__select--where"><span class="custom-select__selected-value">Where</span><select name="pagelayout_0$articleheader_0$titlebottom_0$ctl08" class="custom-select__input">
							<option value="Where" data-null="true">Where</option>
							<option value="Bangladesh">Bangladesh</option>
							<option value="Bolivia">Bolivia</option>
							<option value="Cambodia">Cambodia</option>
							<option value="Colombia">Colombia</option>
							<option value="India">India</option>
							<option value="Malawi">Malawi</option>
							<option value="Peru">Peru</option>
							<option value="South Africa">South Africa</option>
							<option value="Tanzania">Tanzania</option>
							<option value="Thailand">Thailand</option>
							<option value="Uganda">Uganda</option>
							<option value="Zambia">Zambia</option>

						</select></div><div class="custom-select gvt-trip-picker__select gvt-trip-picker__select--what"><span class="custom-select__selected-value">How Long</span><select name="pagelayout_0$articleheader_0$titlebottom_0$ctl11" class="custom-select__input">
							<option value="How Long" data-null="true">How Long</option>
							<option value="2weeks">2 Weeks</option>
							<option value="1month">1 Month</option>
							<option value="3months">3 Months</option>
							<option value="6months">6 Months</option>
							<option value="other">Other</option>

						</select></div>
					</div>
			        <a href="#" class="gvt-trip-picker__reset">Show All</a>
			    </div>
			    <div class="gvt-trip-picker__options">
			        <a class="ls-button-red" title="Find out more" href="/en/about_you/go_overseas/my_trip/faqs_new/">All you need to know</a>
			        <a class="ls-button-turquoise" title="Apply Now" href="/en/about_you/go_overseas/my_trip/apply_now/">Apply Now</a>
			    </div>
			</div>							</div>		</div>

	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
			full-banner--image 	full-banner--gradient full-banner--gradient-	 full-banner--featured	 full-banner--fullscreen	 full-banner--video 
				"
			data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
	>

	
			<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="http://www.tearfund.org/images/mainsite5/c16/c16-poster.jpg">
				<source src="/images/videos/mainsite5/summer-campaign/video.mp4" type="video/mp4">
				<source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.ogg" type="video/ogg">
				<source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.webm" type="video/webm">
			</video>
		</div>
	
	
		<div class="inner">
			<div class="full-banner--featured-panel">				<div class="full-banner__content-wrapper
				 full-banner--content-center				 full-banner--content-center-mobile"><!-- RESPONSIVE CONTAINER -->
											<!-- CONTENT START -->
						<div class="full-banner__content ">

							<!-- If author header -->
							
							
							<h1 class="full-banner__title 
																">Summer appeal</h1>
							
							<!-- Buttons -->
							
							
							<!-- If article has author -->
							
							<!-- If sharing is on -->
							
							<!-- If is filter banner -->
																			<!-- CONTENT END -->
					</div>
				</div>
							</div>		</div>

	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
							 
				"
	>

	
	
	
		<div class="inner">
							<div class="full-banner__content-wrapper
								"><!-- RESPONSIVE CONTAINER -->
											<!-- CONTENT START -->
						<div class="full-banner__content ">

							<!-- If author header -->
							
							
							<h1 class="full-banner__title 
																">About us</h1>
							
							<!-- Buttons -->
							
							
							<!-- If article has author -->
															<div class="article-byline ">

																			<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
										</div>
									
									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							
							<!-- If sharing is on -->
															<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							
							<!-- If is filter banner -->
																			<!-- CONTENT END -->
					</div>
				</div>
									</div>

	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
			full-banner--image 		 full-banner--featured	 full-banner--fullscreen	 
				"
			data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
	>

	
	
	
		<div class="inner">
			<div class="full-banner--featured-panel">				<div class="full-banner__content-wrapper
				 full-banner--content-center				 full-banner--content-center-mobile"><!-- RESPONSIVE CONTAINER -->
											<!-- CONTENT START -->
						<div class="full-banner__content ">

							<!-- If author header -->
							
															<div class="community-fundraising-banner__logo"></div>
							
							<h1 class="full-banner__title 
																 full-banner__title--open-sans">The word’s focus on Central Africa</h1>
							<p>Where the need is greatest</p>
							<!-- Buttons -->
															<div class="full-banner__buttons">
																			<a href="#" class="button">Button</a>
																												<a href="#" class="button">Button</a>
																	</div>
							
							
							<!-- If article has author -->
							
							<!-- If sharing is on -->
							
							<!-- If is filter banner -->
																			<!-- CONTENT END -->
					</div>
				</div>
							</div>		</div>

	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
			full-banner--image 		 full-banner--featured		 
				 scalable-banner "
			data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
	>

	
		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="/slider/feature-banner.jpg?w=1400, /slider/feature-banner.jpg?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="/slider/feature-banner.jpg?w=1200, /slider/feature-banner.jpg?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="/slider/feature-banner.jpg?w=1000, /slider/feature-banner.jpg?w=2000 2x">
			<source media="(min-width: 800px)" srcset="/slider/feature-banner.jpg?w=800, /slider/feature-banner.jpg?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="/slider/feature-banner.jpg?w=647, /slider/feature-banner.jpg?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="/slider/mobile-feature.jpg?w=647, /slider/mobile-feature.jpg?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="/slider/mobile-feature.jpg?w=465, /slider/mobile-feature.jpg?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="/slider/mobile-feature.jpg?w=375, /slider/mobile-feature.jpg?w=750 2x" alt="Bolivia">
		 	<img src="/slider/mobile-feature.jpg" alt="Bolivia">
		</picture>

	
	
		<div class="scalable_banner__content-container">
	
		<div class="inner">
			<div class="full-banner--featured-panel">				<div class="full-banner__content-wrapper
				 full-banner--content-bottom				 full-banner--content-bottom-mobile"><!-- RESPONSIVE CONTAINER -->
											<!-- CONTENT START -->
						<div class="full-banner__content ">

							<!-- If author header -->
							
							
							<h1 class="full-banner__title 
																 full-banner__title--open-sans">The world’s focus on Central Africa</h1>
							<p>Where the need is greatest</p>
							<!-- Buttons -->
															<div class="full-banner__buttons">
																			<a href="#" class="button">Button</a>
																												<a href="#" class="button">Button</a>
																	</div>
							
							
							<!-- If article has author -->
							
							<!-- If sharing is on -->
							
							<!-- If is filter banner -->
																			<!-- CONTENT END -->
					</div>
				</div>
							</div>		</div>

		</div>
	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
							 
				"
	>

	
	
	
		<div class="inner">
							<div class="full-banner__content-wrapper
								"><!-- RESPONSIVE CONTAINER -->
											<!-- CONTENT START -->
						<div class="full-banner__content ">

							<!-- If author header -->
							
							
							<h1 class="full-banner__title 
																">About us</h1>
							
							<!-- Buttons -->
							
							
							<!-- If article has author -->
															<div class="article-byline ">

																			<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
										</div>
									
									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							
							<!-- If sharing is on -->
							
							<!-- If is filter banner -->
																			<!-- CONTENT END -->
					</div>
				</div>
									</div>

	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="story-hero">
	<picture class="story-hero__image">
		<source media="(min-width: 1400px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1400, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2800 2x">
		<source media="(min-width: 1200px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1200, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2400 2x">
		<source media="(min-width: 1000px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1000, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2000 2x">
		<source media="(min-width: 800px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=800, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1600 2x">
	  	<source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=647, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1294 2x">
	 	<source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=465, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=930 2x">
	 	<source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=375, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=750 2x" alt="Bolivia">
	 	<img src="https://www.tearfund.org/~/media/images/testing/story-header-mobile.jpg" alt="Bolivia">
	</picture>
</div>

<div class="story-hero">
	<picture class="story-hero__image">
		<source media="(min-width: 1400px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1400, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2800 2x">
		<source media="(min-width: 1200px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1200, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2400 2x">
		<source media="(min-width: 1000px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1000, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2000 2x">
		<source media="(min-width: 800px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=800, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1600 2x">
	  	<source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=647, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1294 2x">
	 	<source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=465, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=930 2x">
	 	<source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=375, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=750 2x" alt="Bolivia">
	 	<img src="https://www.tearfund.org/~/media/images/testing/story-header-mobile.jpg" alt="Bolivia">
	</picture>
</div>

<div class="full-banner 
			full-banner--image 				 
				"
			data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
	>

	
	
	
		<div class="inner">
							<div class="full-banner__content-wrapper
								"><!-- RESPONSIVE CONTAINER -->
											<!-- CONTENT START -->
						<div class="full-banner__content ">

							<!-- If author header -->
							
							
							<h1 class="full-banner__title 
																">About us</h1>
							
							<!-- Buttons -->
							
							
							<!-- If article has author -->
							
							<!-- If sharing is on -->
							
							<!-- If is filter banner -->
																			<!-- CONTENT END -->
					</div>
				</div>
									</div>

	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
			full-banner--image 		 full-banner--featured	 full-banner--fullscreen	 full-banner--video 
				"
			data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
	>

	
			<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="http://www.tearfund.org/images/mainsite5/c16/c16-poster.jpg">
				<source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.mp4" type="video/mp4">
				<source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.ogg" type="video/ogg">
				<source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.webm" type="video/webm">
			</video>
		</div>
	
	
		<div class="inner">
			<div class="full-banner--featured-panel">				<div class="full-banner__content-wrapper
				 full-banner--content-bottom				 full-banner--content-bottom-mobile"><!-- RESPONSIVE CONTAINER -->
											<!-- CONTENT START -->
						<div class="full-banner__content ">

							<!-- If author header -->
							
							
							<h1 class="full-banner__title 
																">The world’s focus on Central Africa</h1>
							<p>Where the need is greatest</p>
							<!-- Buttons -->
															<div class="full-banner__buttons">
																			<a href="#" class="button">Button</a>
																												<a href="#" class="button">Button</a>
																	</div>
							
							
							<!-- If article has author -->
							
							<!-- If sharing is on -->
							
							<!-- If is filter banner -->
																			<!-- CONTENT END -->
					</div>
				</div>
							</div>		</div>

	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
			full-banner--image 		 full-banner--featured		 
	 full-banner--jubilee-sub			"
			data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
	>

	
	
	
		<div class="inner">
			<div class="full-banner--featured-panel">				<div class="full-banner__content-wrapper
				 full-banner--content-top				 full-banner--content-top-mobile"><!-- RESPONSIVE CONTAINER -->
					<div class="full-banner--content-left">						<!-- CONTENT START -->
						<div class="full-banner__content ">

							<!-- If author header -->
							
							
							<h1 class="full-banner__title 
																 full-banner__title--open-sans">PLAY YOUR PART</h1>
							<p>To beat poverty and injustice, we need to tackle climate change.</p>
							<!-- Buttons -->
															<div class="full-banner__buttons">
																			<a href="#" class="button">Act today</a>
																										</div>
							
							
							<!-- If article has author -->
							
							<!-- If sharing is on -->
							
							<!-- If is filter banner -->
													</div>						<!-- CONTENT END -->
					</div>
				</div>
							</div>		</div>

	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner full-banner--image full-banner--featured scalable-banner">

	<picture class="scalable-banner__image">
		<source media="(min-width: 1400px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1400, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2800 2x">
		<source media="(min-width: 1200px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1200, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2400 2x">
		<source media="(min-width: 1000px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1000, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2000 2x">
		<source media="(min-width: 800px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=800, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1600 2x">
	  	<source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=647, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1294 2x">
	 	<source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=465, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=930 2x">
	 	<source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=375, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=750 2x" alt="Bolivia">
	 	<img src="https://www.tearfund.org/~/media/images/testing/story-header-mobile.jpg" alt="Bolivia">
	</picture>
</div>

<div class="full-banner full-banner--image full-banner--featured scalable-banner">

	<picture class="scalable-banner__image">
		<source media="(min-width: 1400px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1400, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2800 2x">
		<source media="(min-width: 1200px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1200, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2400 2x">
		<source media="(min-width: 1000px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1000, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2000 2x">
		<source media="(min-width: 800px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=800, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1600 2x">
	  	<source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=647, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1294 2x">
	 	<source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=465, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=930 2x">
	 	<source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=375, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=750 2x" alt="Bolivia">
	 	<img src="https://www.tearfund.org/~/media/images/testing/story-header-mobile.jpg" alt="Bolivia">
	</picture>
</div>

<div class="full-banner 
			full-banner--image 				 
	 full-banner--jubilee-sub			"
			data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
	>

	
	
	
		<div class="inner">
							<div class="full-banner__content-wrapper
								"><!-- RESPONSIVE CONTAINER -->
											<!-- CONTENT START -->
						<div class="full-banner__content ">

							<!-- If author header -->
							
							
							<h1 class="full-banner__title 
																">About us</h1>
							
							<!-- Buttons -->
							
							
							<!-- If article has author -->
							
							<!-- If sharing is on -->
							
							<!-- If is filter banner -->
																			<!-- CONTENT END -->
					</div>
				</div>
									</div>

	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div id="pagelayout_0_articleheader_0_GivingHeader" class="fullwidth-giving-ask fullwidth-giving-ask--video banner-emergency__chevron banner-emergency__strip" data-image="https://www.tearfund.org/~/media/images/appeals/myanmar/landingpage_banner.jpg?h=450&amp;w=1280" style="background-image: url(&quot;https://www.tearfund.org/~/media/images/appeals/myanmar/landingpage_banner.jpg?h=450&amp;w=1280&quot;);">
    <div class="full-banner--gradient full-banner--gradient-bottom"></div>
    <!-- <div class="full-video">
        <video width="100%" loop="" height="auto" id="video" autoplay="autoplay" preload="auto" poster="http://www.tearfund.org/images/mainsite5/c16/c16-poster.jpg">
            <source src="/images/videos/mainsite5/summer-campaign/video.mp4" type="video/mp4">
                <source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.ogg" type="video/ogg">
                    <source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.webm" type="video/webm">
                    </video>
                </div> -->

    <div class="full-banner__video-aspect-ratio">
        <div class="full-banner__video-wrap" data-video='[{"url": "/images/videos/mainsite5/summer-campaign/header-loop.mp4","mimeType": "video/mp4"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.ogv","mimeType": "video/ogg"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.webm","mimeType": "video/webm"}]'></div>
    </div>

    <div id="pagelayout_0_articleheader_0_GivingHeaderInner" class="inner">
        
        <h1 id="pagelayout_0_articleheader_0_TitleText" class="fullwidth-giving-ask__title">Something Great Emergency Appeal</h1>
        <div id="pagelayout_0_articleheader_0_SecondLine" class="fullwidth-giving-ask__secondary">the Myanmar Refugees Emergency Appeal</div>
        <div id="pagelayout_0_articleheader_0_GivingWidget_GivingWidgetInner">
    <div id="pagelayout_0_articleheader_0_GivingWidget_GivingLargeRow">
		
        <div id="pagelayout_0_articleheader_0_GivingWidget_GivingWidgetWidth">
            <div id="pagelayout_0_articleheader_0_GivingWidget_GivingWidgetOuter" class="giving-widget giving-widget--inline" data-image-id="pagelayout_0_articleheader_0_GivingHeader" data-text-id="pagelayout_0_articleheader_0_TitleText">

                <div class="fund-selector">

                    <!-- Can be a span or a label. Depends on whether or not there's a select -->
                    <label id="pagelayout_0_articleheader_0_GivingWidget_label_destination" for="destination-select" class="fund-selector__title">DONATE NOW</label>

                    <span id="pagelayout_0_articleheader_0_GivingWidget_SingleFund" class="fund-selector__destination" giving-page="/en/give/myanmar_refugees_emergency_appeal/"></span>

                    

                    <div id="pagelayout_0_articleheader_0_GivingWidget_StandardAmount" class="fund-selector-field">
                        <div class="custom-input custom-input--currency">
                            <input name="pagelayout_0$articleheader_0$GivingWidget$tbAmount" type="text" id="pagelayout_0_articleheader_0_GivingWidget_tbAmount" class="custom-input__input">
                        </div>
                    </div>

                    

                    

                    

                    <div id="pagelayout_0_articleheader_0_GivingWidget_SinglePaymentMethod" class="fund-selector-field">
                         <div style="display: block;" class="payment-methods__item payment-methods__item--once">
                            <div class="payment-methods__button">
                                <button onclick="__doPostBack('pagelayout_0$articleheader_0$GivingWidget$btnSinglePayByCard','')" id="pagelayout_0_articleheader_0_GivingWidget_btnSinglePayByCard" class="button pay-by-card"><span>Pay by card</span></button>
                            </div>
                            <div class="payment-methods__button">
                                <button onclick="__doPostBack('pagelayout_0$articleheader_0$GivingWidget$btnSinglePayByPaypal','')" id="pagelayout_0_articleheader_0_GivingWidget_btnSinglePayByPaypal" class="button pay-by-paypal"><span>Pay by</span></button>
                            </div>
                        </div>
                        
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
    </div>
<div class="js-background-image" style="background-image: url(&quot;https://www.tearfund.org/~/media/images/appeals/myanmar/landingpage_banner.jpg?h=450&amp;w=1280&quot;);"></div></div>

<div id="pagelayout_0_articleheader_0_GivingHeader" class="fullwidth-giving-ask fullwidth-giving-ask--video banner-emergency__chevron banner-emergency__strip" data-image="https://www.tearfund.org/~/media/images/appeals/myanmar/landingpage_banner.jpg?h=450&amp;w=1280" style="background-image: url(&quot;https://www.tearfund.org/~/media/images/appeals/myanmar/landingpage_banner.jpg?h=450&amp;w=1280&quot;);">
    <div class="full-banner--gradient full-banner--gradient-bottom"></div>
    <!-- <div class="full-video">
        <video width="100%" loop="" height="auto" id="video" autoplay="autoplay" preload="auto" poster="http://www.tearfund.org/images/mainsite5/c16/c16-poster.jpg">
            <source src="/images/videos/mainsite5/summer-campaign/video.mp4" type="video/mp4">
                <source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.ogg" type="video/ogg">
                    <source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.webm" type="video/webm">
                    </video>
                </div> -->

    <div class="full-banner__video-aspect-ratio">
        <div class="full-banner__video-wrap" data-video='[{"url": "/images/videos/mainsite5/summer-campaign/header-loop.mp4","mimeType": "video/mp4"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.ogv","mimeType": "video/ogg"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.webm","mimeType": "video/webm"}]'></div>
    </div>

    <div id="pagelayout_0_articleheader_0_GivingHeaderInner" class="inner">
        
        <h1 id="pagelayout_0_articleheader_0_TitleText" class="fullwidth-giving-ask__title">Something Great Emergency Appeal</h1>
        <div id="pagelayout_0_articleheader_0_SecondLine" class="fullwidth-giving-ask__secondary">the Myanmar Refugees Emergency Appeal</div>
        <div id="pagelayout_0_articleheader_0_GivingWidget_GivingWidgetInner">
    <div id="pagelayout_0_articleheader_0_GivingWidget_GivingLargeRow">
		
        <div id="pagelayout_0_articleheader_0_GivingWidget_GivingWidgetWidth">
            <div id="pagelayout_0_articleheader_0_GivingWidget_GivingWidgetOuter" class="giving-widget giving-widget--inline" data-image-id="pagelayout_0_articleheader_0_GivingHeader" data-text-id="pagelayout_0_articleheader_0_TitleText">

                <div class="fund-selector">

                    <!-- Can be a span or a label. Depends on whether or not there's a select -->
                    <label id="pagelayout_0_articleheader_0_GivingWidget_label_destination" for="destination-select" class="fund-selector__title">DONATE NOW</label>

                    <span id="pagelayout_0_articleheader_0_GivingWidget_SingleFund" class="fund-selector__destination" giving-page="/en/give/myanmar_refugees_emergency_appeal/"></span>

                    

                    <div id="pagelayout_0_articleheader_0_GivingWidget_StandardAmount" class="fund-selector-field">
                        <div class="custom-input custom-input--currency">
                            <input name="pagelayout_0$articleheader_0$GivingWidget$tbAmount" type="text" id="pagelayout_0_articleheader_0_GivingWidget_tbAmount" class="custom-input__input">
                        </div>
                    </div>

                    

                    

                    

                    <div id="pagelayout_0_articleheader_0_GivingWidget_SinglePaymentMethod" class="fund-selector-field">
                         <div style="display: block;" class="payment-methods__item payment-methods__item--once">
                            <div class="payment-methods__button">
                                <button onclick="__doPostBack('pagelayout_0$articleheader_0$GivingWidget$btnSinglePayByCard','')" id="pagelayout_0_articleheader_0_GivingWidget_btnSinglePayByCard" class="button pay-by-card"><span>Pay by card</span></button>
                            </div>
                            <div class="payment-methods__button">
                                <button onclick="__doPostBack('pagelayout_0$articleheader_0$GivingWidget$btnSinglePayByPaypal','')" id="pagelayout_0_articleheader_0_GivingWidget_btnSinglePayByPaypal" class="button pay-by-paypal"><span>Pay by</span></button>
                            </div>
                        </div>
                        
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
    </div>
<div class="js-background-image" style="background-image: url(&quot;https://www.tearfund.org/~/media/images/appeals/myanmar/landingpage_banner.jpg?h=450&amp;w=1280&quot;);"></div></div>

<div class="full-banner 
							 
				"
	>

	
	
	
		<div class="inner">
							<div class="full-banner__content-wrapper
								"><!-- RESPONSIVE CONTAINER -->
											<!-- CONTENT START -->
						<div class="full-banner__content ">

							<!-- If author header -->
							
							
							<h1 class="full-banner__title 
								full-banner__title--small								">ARTICLE HEADER HERE. WHICH CAN BE MORE WORDS LIKE REALLY LONG TITLES</h1>
							
							<!-- Buttons -->
							
							
							<!-- If article has author -->
							
							<!-- If sharing is on -->
							
							<!-- If is filter banner -->
																			<!-- CONTENT END -->
					</div>
				</div>
									</div>

	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
							 
				"
	>

	
	
	
		<div class="inner">
							<div class="full-banner__content-wrapper
								"><!-- RESPONSIVE CONTAINER -->
											<!-- CONTENT START -->
						<div class="full-banner__content ">

							<!-- If author header -->
							
							
							<h1 class="full-banner__title 
								full-banner__title--small								">ARTICLE HEADER HERE. WHICH CAN BE MORE WORDS LIKE REALLY LONG TITLES</h1>
							
							<!-- Buttons -->
							
							
								<div class="article-summary-details__tags">
																			<div class="article-summary-details__tag">
											One
										</div>
																			<div class="article-summary-details__tag">
											Two
										</div>
																			<div class="article-summary-details__tag">
											Three
										</div>
																	</div>

							
							<!-- If article has author -->
															<div class="article-byline ">

																			<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
										</div>
									
									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							
							<!-- If sharing is on -->
															<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							
							<!-- If is filter banner -->
																			<!-- CONTENT END -->
					</div>
				</div>
									</div>

	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
			full-banner--image 				 
				"
			data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
	>

	
	
	
		<div class="inner">
							<div class="full-banner__content-wrapper
								"><!-- RESPONSIVE CONTAINER -->
											<!-- CONTENT START -->
						<div class="full-banner__content ">

							<!-- If author header -->
							
							
							<h1 class="full-banner__title 
								full-banner__title--small								">ARTICLE HEADER HERE. WHICH CAN BE MORE WORDS LIKE REALLY LONG TITLES</h1>
							
							<!-- Buttons -->
							
							
								<div class="article-summary-details__tags">
																			<div class="article-summary-details__tag">
											One
										</div>
																			<div class="article-summary-details__tag">
											Two
										</div>
																			<div class="article-summary-details__tag">
											Three
										</div>
																	</div>

							
							<!-- If article has author -->
															<div class="article-byline ">

																			<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
										</div>
									
									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							
							<!-- If sharing is on -->
															<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							
							<!-- If is filter banner -->
																			<!-- CONTENT END -->
					</div>
				</div>
									</div>

	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
							 
				"
	>

	
	
	
		<div class="inner">
							<div class="full-banner__content-wrapper
								"><!-- RESPONSIVE CONTAINER -->
											<!-- CONTENT START -->
						<div class="full-banner__content ">

							<!-- If author header -->
							
							
							<h1 class="full-banner__title 
																">About us</h1>
							
							<!-- Buttons -->
							
							
							<!-- If article has author -->
							
							<!-- If sharing is on -->
							
							<!-- If is filter banner -->
																			<!-- CONTENT END -->
					</div>
				</div>
									</div>

	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
		full-banner--filter 					 
				"
	>

	
	
	
		<div class="inner">
							<div class="full-banner__content-wrapper
								"><!-- RESPONSIVE CONTAINER -->
											<!-- CONTENT START -->
						<div class="full-banner__content ">

							<!-- If author header -->
							
							
							<h1 class="full-banner__title 
								full-banner__title--small								">FILTERED BY: GENDER</h1>
							
							<!-- Buttons -->
							
							
							<!-- If article has author -->
							
							<!-- If sharing is on -->
							
							<!-- If is filter banner -->
															<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
																			<!-- CONTENT END -->
					</div>
				</div>
									</div>

	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<header>

		<img class="mobile-only" src="/images/mainsite5/jubilee/2-cities/videos/2Cities_Bristol_MOBILE.jpg" />

		<div class="full-banner full-banner--video full-banner--image full-banner--two-cities" data-image="/images/mainsite5/jubilee/2-cities/videos/bristol.jpg">

			<!-- <div class="inner">
				<div class="full-banner__implicit-height-outer">
					<div class="full-banner__implicit-height-inner">

						<div class="full-banner__content full-banner__content--overlaid">
							<h1 class="full-banner__title full-banner--video__title">About us</h1>
						</div>

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

			<div class="full-banner__video-aspect-ratio">
				<div class="full-banner__video-wrap" data-video='[{"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.mp4","mimeType": "video/mp4"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.ogv","mimeType": "video/ogg"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.webm","mimeType": "video/webm"}]'></div>
			</div>

			<!-- <div class="full-banner__video-aspect-ratio">
				<div class="full-banner__video-wrap" data-video='[{"url": "/images/mainsite5/jubilee/2-cities/videos/merseyside.mp4","mimeType": "video/mp4"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/merseyside.ogv","mimeType": "video/ogg"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/merseyside.webm","mimeType": "video/webm"}]'></div>
			</div> -->

		</div>
	</header>

<header>

		<img class="mobile-only" src="/images/mainsite5/jubilee/2-cities/videos/2Cities_Bristol_MOBILE.jpg" />

		<div class="full-banner full-banner--video full-banner--image full-banner--two-cities" data-image="/images/mainsite5/jubilee/2-cities/videos/bristol.jpg">

			<!-- <div class="inner">
				<div class="full-banner__implicit-height-outer">
					<div class="full-banner__implicit-height-inner">

						<div class="full-banner__content full-banner__content--overlaid">
							<h1 class="full-banner__title full-banner--video__title">{{ banner_title }}</h1>
						</div>

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

			<div class="full-banner__video-aspect-ratio">
				<div class="full-banner__video-wrap" data-video='[{"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.mp4","mimeType": "video/mp4"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.ogv","mimeType": "video/ogg"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.webm","mimeType": "video/webm"}]'></div>
			</div>

			<!-- <div class="full-banner__video-aspect-ratio">
				<div class="full-banner__video-wrap" data-video='[{"url": "/images/mainsite5/jubilee/2-cities/videos/merseyside.mp4","mimeType": "video/mp4"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/merseyside.ogv","mimeType": "video/ogg"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/merseyside.webm","mimeType": "video/webm"}]'></div>
			</div> -->

		</div>
	</header>

<div class="full-banner 
			full-banner--image 	full-banner--gradient full-banner--gradient-right	 full-banner--featured	 full-banner--fullscreen	 
				"
			data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
	>

	
	
	
		<div class="inner">
			<div class="full-banner--featured-panel">				<div class="full-banner__content-wrapper
				 full-banner--content-bottom				 full-banner--content-bottom-mobile"><!-- RESPONSIVE CONTAINER -->
					<div class="full-banner--content-right">						<!-- CONTENT START -->
						<div class="full-banner__content ">

							<!-- If author header -->
							
							
							<h1 class="full-banner__title 
																 full-banner__title--open-sans">The world’s focus on Central Africa</h1>
							<p>Where the need is greatest</p>
							<!-- Buttons -->
															<div class="full-banner__buttons">
																			<a href="#" class="button">Button</a>
																												<a href="#" class="button">Button</a>
																	</div>
							
							
							<!-- If article has author -->
							
							<!-- If sharing is on -->
							
							<!-- If is filter banner -->
													</div>						<!-- CONTENT END -->
					</div>
				</div>
							</div>		</div>

	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
			full-banner--image 	full-banner--gradient full-banner--gradient-left	 full-banner--featured	 full-banner--fullscreen	 
				"
			data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
	>

	
	
	
		<div class="inner">
			<div class="full-banner--featured-panel">				<div class="full-banner__content-wrapper
				 full-banner--content-bottom				 full-banner--content-bottom-mobile"><!-- RESPONSIVE CONTAINER -->
					<div class="full-banner--content-left">						<!-- CONTENT START -->
						<div class="full-banner__content ">

							<!-- If author header -->
							
							
							<h1 class="full-banner__title 
																 full-banner__title--open-sans">The world’s focus on Central Africa</h1>
							<p>Where the need is greatest</p>
							<!-- Buttons -->
															<div class="full-banner__buttons">
																			<a href="#" class="button">Button</a>
																												<a href="#" class="button">Button</a>
																	</div>
							
							
							<!-- If article has author -->
							
							<!-- If sharing is on -->
							
							<!-- If is filter banner -->
													</div>						<!-- CONTENT END -->
					</div>
				</div>
							</div>		</div>

	</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->

    <section class="bq19-text-w-image bq19-section  bq19-section--white  ">
        <div class="bq19-text-w-image__content bq19-inner">
            <div class="bq19-text-w-image__text">
                                    <div class="bq19-rich-text">
                        <h2 class="bq19-h2">
                            
                                                            Heading Text
                                                    </h2>

                                                    <p>Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge success with <strong>500 churches</strong> and <strong>23,000 people</strong> taking part.</p>

                            <p>On Saturday 16 November, churches and other groups up and down the country will once again take part in the Big Quiz Night - a huge multi-venue, nationwide quiz - and we want it to be even bigger and better.</p>
                        
                                                    <a class="button bq19-button" href="#">Call to action</a>
                                            </div>
                            </div>
            <div class="bq19-text-w-image__image">
                                    <img srcset="http://placehold.it/468x453 1x, http://placehold.it/936x906 2x"
                        src="http://placehold.it/468x453"
                        alt="" />
                            </div>
        </div>
    </section>

{% for text_with_image in text_with_images %}
    <section class="bq19-text-w-image bq19-section {% if text_with_image.background_color %}bq19-section--{{ text_with_image.background_color }} {% else %} bq19-section--white {% endif %} {% if text_with_image.reverse %}bq19-text-w-image--reverse{% endif %}">
        <div class="bq19-text-w-image__content bq19-inner">
            <div class="bq19-text-w-image__text">
                {% for section in text_with_image.content_sections %}
                    <div class="bq19-rich-text">
                        <h2 class="{% if text_with_image.small_headings %}bq19-h3{% else %}bq19-h2{% endif %}">
                            {% if section.preheading %}
                                <span class="bq19-text-w-image__preheading">{{section.preheading}}</span>
                            {% endif %}

                            {% if section.heading %}
                                {{section.heading}}
                            {% else %}
                                Heading Text
                            {% endif %}
                        </h2>

                        {% if section.text %}
                            {{section.text | raw}}
                        {% else %}
                            <p>Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge success with <strong>500 churches</strong> and <strong>23,000 people</strong> taking part.</p>

                            <p>On Saturday 16 November, churches and other groups up and down the country will once again take part in the Big Quiz Night - a huge multi-venue, nationwide quiz - and we want it to be even bigger and better.</p>
                        {% endif %}

                        {% if section.button_text %}
                            <a class="button bq19-button" href="#">{{ section.button_text }}</a>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
            <div class="bq19-text-w-image__image">
                {% if text_with_image.img_src_retina %}
                    <img srcset="{{ text_with_image.img_src }} 1x, {{ text_with_image.img_src_retina }} 2x"
                        src="{{ text_with_image.img_src }}"
                        alt="" />
                {% else %}
                    <img alt="" src="{{ text_with_image.img_src }}">
                {% endif %}
            </div>
        </div>
    </section>
{% endfor %}

<section class="bq19-section">
    <h2 class="bq19-h2">Centered Text heading</h2>
</section>

<section class="bq19-section">
    <h2 class="bq19-h2">Centered Text heading</h2>
</section>

<section class="bq19-split-ctas">
    
        <div class="bq19-split-ctas__col bq19-split-ctas__col--img-offset">
            <h2 class="bq19-split-ctas__heading bq19-h3">FAQ'S</h2>
            <div class="bq19-rich-text">
                <p class="bq19-split-ctas__summary">The answer to all your questions</p>
            </div>
            <a class="secondary-button bq19-button" href="#">Find out more</a>

            <div class="bq19-split-ctas__image">
                <img 
                    srcset="/images/mainsite5/big-quiz-2019/faq.gif 1x, /images/mainsite5/big-quiz-2019/faq@2x.gif 2x" 
                    src="/images/mainsite5/big-quiz-2019/faq.gif" 
                    alt=""/>
            </div>
        </div>

        <div class="bq19-split-ctas__col bq19-split-ctas__col--dark bq19-split-ctas__col--stars">
            <h2 class="bq19-split-ctas__heading bq19-h3">The big quiz night guide</h2>
            <div class="bq19-rich-text">
                <p class="bq19-split-ctas__summary">Full details about how to host your quiz</p>
            </div>
            <a class="button button--transparent bq19-button" href="#">Find out more</a>

            <div class="bq19-split-ctas__image">
                <img 
                    srcset="/images/mainsite5/big-quiz-2019/shakespeare.gif 1x, /images/mainsite5/big-quiz-2019/shakespeare@2x.gif 2x" 
                    src="/images/mainsite5/big-quiz-2019/shakespeare.gif" 
                    alt=""/>
            </div>
        </div>
    
</section>

<section class="bq19-split-ctas">
    {% if split_ctas is defined %}

        {% for cta in split_ctas %}
            <div class="bq19-split-ctas__col
                    {% if cta.background_dark %}bq19-split-ctas__col--dark{% endif %}
                    {% if cta.background_stars %}bq19-split-ctas__col--stars{% endif %}
                    {% if cta.image_offset %}bq19-split-ctas__col--img-offset{% endif %}
                    ">
                {% if cta.heading %}
                    <h2 class="bq19-split-ctas__heading bq19-h3">{{cta.heading}}</h2>
                {% endif %}
                <div class="bq19-rich-text">
                    {% if cta.summary %}
                        <p class="bq19-split-ctas__summary">{{cta.summary}}</p>
                    {% endif %}
                </div>
                {% if cta.button_text %}
                    <a class="secondary-button bq19-button" href="#">{{cta.button_text}}</a>
                {% endif %}

                {% if cta.img_src %}
                    <div class="bq19-split-ctas__image">
                        <img alt="" src="{{cta.img_src}}">
                    </div>
                {% endif %}
            </div>
        {% endfor %}

    {% else %}

        <div class="bq19-split-ctas__col bq19-split-ctas__col--img-offset">
            <h2 class="bq19-split-ctas__heading bq19-h3">FAQ'S</h2>
            <div class="bq19-rich-text">
                <p class="bq19-split-ctas__summary">The answer to all your questions</p>
            </div>
            <a class="secondary-button bq19-button" href="#">Find out more</a>

            <div class="bq19-split-ctas__image">
                <img 
                    srcset="/images/mainsite5/big-quiz-2019/faq.gif 1x, /images/mainsite5/big-quiz-2019/faq@2x.gif 2x" 
                    src="/images/mainsite5/big-quiz-2019/faq.gif" 
                    alt=""/>
            </div>
        </div>

        <div class="bq19-split-ctas__col bq19-split-ctas__col--dark bq19-split-ctas__col--stars">
            <h2 class="bq19-split-ctas__heading bq19-h3">The big quiz night guide</h2>
            <div class="bq19-rich-text">
                <p class="bq19-split-ctas__summary">Full details about how to host your quiz</p>
            </div>
            <a class="button button--transparent bq19-button" href="#">Find out more</a>

            <div class="bq19-split-ctas__image">
                <img 
                    srcset="/images/mainsite5/big-quiz-2019/shakespeare.gif 1x, /images/mainsite5/big-quiz-2019/shakespeare@2x.gif 2x" 
                    src="/images/mainsite5/big-quiz-2019/shakespeare.gif" 
                    alt=""/>
            </div>
        </div>
    {% endif %}

</section>

<div class="bq19-hero bq19-resources__hero">
	<div class="bq19-inner">
		<div class="bq19-hero__text center-text">
			<h1 class="bq19-hero__heading">RESOURCES</h1>
			<p class="bq19-hero__strapline">Order or download resources to make your night fabulous</p>
			<a class="button button--bold bq19-button bq19-button--no-margin" href="#">Sign up to host</a>
		</div>
		<div class="bq19-hero-image">
			<img class="bq19-hero-image__sprite"
				srcset="/images/mainsite5/big-quiz-2019-resources/hero.png 1x, /images/mainsite5/big-quiz-2019/hero-image/text@2x.png 2x"
				src="/images/mainsite5/big-quiz-2019-resources/hero.png"
				alt="" />
		</div>
	</div>
</div>

<div class="bq19-hero bq19-resources__hero">
	<div class="bq19-inner">
		<div class="bq19-hero__text center-text">
			<h1 class="bq19-hero__heading">RESOURCES</h1>
			<p class="bq19-hero__strapline">Order or download resources to make your night fabulous</p>
			<a class="button button--bold bq19-button bq19-button--no-margin" href="#">Sign up to host</a>
		</div>
		<div class="bq19-hero-image">
			<img class="bq19-hero-image__sprite"
				srcset="/images/mainsite5/big-quiz-2019-resources/hero.png 1x, /images/mainsite5/big-quiz-2019/hero-image/text@2x.png 2x"
				src="/images/mainsite5/big-quiz-2019-resources/hero.png"
				alt="" />
		</div>
	</div>
</div>

<section class="bq19-split-ctas">
    
                    <div class="bq19-split-ctas__col
                                                                                ">
                                    <h2 class="bq19-split-ctas__heading bq19-h3">This is heading text</h2>
                                <div class="bq19-rich-text">
                                            <p class="bq19-split-ctas__summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                    </div>
                                    <a class="secondary-button bq19-button" href="#">Call to Action</a>
                
                                    <div class="bq19-split-ctas__image">
                        <img alt="" src="http://placehold.it/360x210">
                    </div>
                            </div>
        
    
</section>

<section class="bq19-split-ctas">
    {% if split_ctas is defined %}

        {% for cta in split_ctas %}
            <div class="bq19-split-ctas__col
                    {% if cta.background_dark %}bq19-split-ctas__col--dark{% endif %}
                    {% if cta.background_stars %}bq19-split-ctas__col--stars{% endif %}
                    {% if cta.image_offset %}bq19-split-ctas__col--img-offset{% endif %}
                    ">
                {% if cta.heading %}
                    <h2 class="bq19-split-ctas__heading bq19-h3">{{cta.heading}}</h2>
                {% endif %}
                <div class="bq19-rich-text">
                    {% if cta.summary %}
                        <p class="bq19-split-ctas__summary">{{cta.summary}}</p>
                    {% endif %}
                </div>
                {% if cta.button_text %}
                    <a class="secondary-button bq19-button" href="#">{{cta.button_text}}</a>
                {% endif %}

                {% if cta.img_src %}
                    <div class="bq19-split-ctas__image">
                        <img alt="" src="{{cta.img_src}}">
                    </div>
                {% endif %}
            </div>
        {% endfor %}

    {% else %}

        <div class="bq19-split-ctas__col bq19-split-ctas__col--img-offset">
            <h2 class="bq19-split-ctas__heading bq19-h3">FAQ'S</h2>
            <div class="bq19-rich-text">
                <p class="bq19-split-ctas__summary">The answer to all your questions</p>
            </div>
            <a class="secondary-button bq19-button" href="#">Find out more</a>

            <div class="bq19-split-ctas__image">
                <img 
                    srcset="/images/mainsite5/big-quiz-2019/faq.gif 1x, /images/mainsite5/big-quiz-2019/faq@2x.gif 2x" 
                    src="/images/mainsite5/big-quiz-2019/faq.gif" 
                    alt=""/>
            </div>
        </div>

        <div class="bq19-split-ctas__col bq19-split-ctas__col--dark bq19-split-ctas__col--stars">
            <h2 class="bq19-split-ctas__heading bq19-h3">The big quiz night guide</h2>
            <div class="bq19-rich-text">
                <p class="bq19-split-ctas__summary">Full details about how to host your quiz</p>
            </div>
            <a class="button button--transparent bq19-button" href="#">Find out more</a>

            <div class="bq19-split-ctas__image">
                <img 
                    srcset="/images/mainsite5/big-quiz-2019/shakespeare.gif 1x, /images/mainsite5/big-quiz-2019/shakespeare@2x.gif 2x" 
                    src="/images/mainsite5/big-quiz-2019/shakespeare.gif" 
                    alt=""/>
            </div>
        </div>
    {% endif %}

</section>

<div class="bq19-host-sign-up bq19-section">
	<div class="bq19-host-sign-up__top bq19-inner center-text">
		<h2 class="bq19-host-sign-up__heading">Be part of something huge</h2>
		<a class="bq19-button bq19-button--no-margin button button--bold" href="#">Sign up to host</a>
	</div>

	<div class="bq19-host-sign-up__bottom">
		<img class="bq19-host-sign-up__figure"
				srcset="/images/mainsite5/big-quiz-2019/host-sign-up/caber@2x.png 1x, /images/mainsite5/big-quiz-2019/host-sign-up/caber@2x.png 2x"
				src="/images/mainsite5/big-quiz-2019/host-sign-up/caber@2x.png"
				alt="" />
	</div>
</div>

<div class="bq19-host-sign-up bq19-section">
	<div class="bq19-host-sign-up__top bq19-inner center-text">
		<h2 class="bq19-host-sign-up__heading">Be part of something huge</h2>
		<a class="bq19-button bq19-button--no-margin button button--bold" href="#">Sign up to host</a>
	</div>

	<div class="bq19-host-sign-up__bottom">
		<img class="bq19-host-sign-up__figure"
				srcset="/images/mainsite5/big-quiz-2019/host-sign-up/caber@2x.png 1x, /images/mainsite5/big-quiz-2019/host-sign-up/caber@2x.png 2x"
				src="/images/mainsite5/big-quiz-2019/host-sign-up/caber@2x.png"
				alt="" />
	</div>
</div>

    <section class="bq19-text-w-image bq19-section bq19-section--green  ">
        <div class="bq19-text-w-image__content bq19-inner">
            <div class="bq19-text-w-image__text">
                                    <div class="bq19-rich-text">
                        <h2 class="bq19-h2">
                            
                                                            Heading Text
                                                    </h2>

                                                    <p>Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge success with <strong>500 churches</strong> and <strong>23,000 people</strong> taking part.</p>

                            <p>On Saturday 16 November, churches and other groups up and down the country will once again take part in the Big Quiz Night - a huge multi-venue, nationwide quiz - and we want it to be even bigger and better.</p>
                        
                                                    <a class="button bq19-button" href="#">Call to action</a>
                                            </div>
                            </div>
            <div class="bq19-text-w-image__image">
                                    <img alt="" src="http://placehold.it/468x453">
                            </div>
        </div>
    </section>

{% for text_with_image in text_with_images %}
    <section class="bq19-text-w-image bq19-section {% if text_with_image.background_color %}bq19-section--{{ text_with_image.background_color }} {% else %} bq19-section--white {% endif %} {% if text_with_image.reverse %}bq19-text-w-image--reverse{% endif %}">
        <div class="bq19-text-w-image__content bq19-inner">
            <div class="bq19-text-w-image__text">
                {% for section in text_with_image.content_sections %}
                    <div class="bq19-rich-text">
                        <h2 class="{% if text_with_image.small_headings %}bq19-h3{% else %}bq19-h2{% endif %}">
                            {% if section.preheading %}
                                <span class="bq19-text-w-image__preheading">{{section.preheading}}</span>
                            {% endif %}

                            {% if section.heading %}
                                {{section.heading}}
                            {% else %}
                                Heading Text
                            {% endif %}
                        </h2>

                        {% if section.text %}
                            {{section.text | raw}}
                        {% else %}
                            <p>Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge success with <strong>500 churches</strong> and <strong>23,000 people</strong> taking part.</p>

                            <p>On Saturday 16 November, churches and other groups up and down the country will once again take part in the Big Quiz Night - a huge multi-venue, nationwide quiz - and we want it to be even bigger and better.</p>
                        {% endif %}

                        {% if section.button_text %}
                            <a class="button bq19-button" href="#">{{ section.button_text }}</a>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
            <div class="bq19-text-w-image__image">
                {% if text_with_image.img_src_retina %}
                    <img srcset="{{ text_with_image.img_src }} 1x, {{ text_with_image.img_src_retina }} 2x"
                        src="{{ text_with_image.img_src }}"
                        alt="" />
                {% else %}
                    <img alt="" src="{{ text_with_image.img_src }}">
                {% endif %}
            </div>
        </div>
    </section>
{% endfor %}

<div class="bq19-quote bq19-section bq19-section--white">
	<div class="bq19-quote__inner bq19-inner">
		<blockquote class="bq19-quote__blockquote">
			<div class="bq19-quote__text">
				<p class="bq19-quote__text-inner bq19-color-turquoise">&lsquo;It was easy to organise, well planned and great fun!&rsquo;</p>
			</div>

			<footer class="bq19-quote__footer">Big Quiz Night host</footer>
		</blockquote>
	</div>
</div>

<div class="bq19-quote bq19-section bq19-section--white">
	<div class="bq19-quote__inner bq19-inner">
		<blockquote class="bq19-quote__blockquote">
			<div class="bq19-quote__text">
				<p class="bq19-quote__text-inner bq19-color-turquoise">&lsquo;It was easy to organise, well planned and great fun!&rsquo;</p>
			</div>

			<footer class="bq19-quote__footer">Big Quiz Night host</footer>
		</blockquote>
	</div>
</div>

<div class="bq19-find-nearest-quiz bq19-section">
	<div class="bq19-find-nearest-quiz__top bq19-inner">
		<img
			alt=""
			class="bq19-find-nearest-quiz__car"
			src="/images/mainsite5/big-quiz-2019/nearest-quiz/robin-reliant.png" 
			srcset="/images/mainsite5/big-quiz-2019/nearest-quiz/robin-reliant.png 1x, /images/mainsite5/big-quiz-2019/nearest-quiz/robin-reliant.png 2x"
		/>
		<h2 class="bq19-find-nearest-quiz__heading">Find your nearest quiz</h2>
		<form class="bq19-find-nearest-quiz__form">
			<input class="bq19-find-nearest-quiz__input" placeholder="Enter your postcode..." />
			<button class="bq19-find-nearest-quiz__button bq19-button button button--bold" href="#">Find a quiz night</button>
		</form>
	</div>

	<div class="bq19-find-nearest-quiz__bottom">
		<div class="bq19-find-nearest-quiz__wrapper">
		<div class="bq19-find-nearest-quiz__card-container">
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.0 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.1 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.2 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.3 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.4 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.5 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.6 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.7 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.8 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.9 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.10 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.11 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
					</div>
		</div>
	</div>
</div>

<div class="bq19-find-nearest-quiz bq19-section">
	<div class="bq19-find-nearest-quiz__top bq19-inner">
		<img
			alt=""
			class="bq19-find-nearest-quiz__car"
			src="/images/mainsite5/big-quiz-2019/nearest-quiz/robin-reliant.png" 
			srcset="/images/mainsite5/big-quiz-2019/nearest-quiz/robin-reliant.png 1x, /images/mainsite5/big-quiz-2019/nearest-quiz/robin-reliant.png 2x"
		/>
		<h2 class="bq19-find-nearest-quiz__heading">Find your nearest quiz</h2>
		<form class="bq19-find-nearest-quiz__form">
			<input class="bq19-find-nearest-quiz__input" placeholder="Enter your postcode..." />
			<button class="bq19-find-nearest-quiz__button bq19-button button button--bold" href="#">Find a quiz night</button>
		</form>
	</div>

	<div class="bq19-find-nearest-quiz__bottom">
		<div class="bq19-find-nearest-quiz__wrapper">
		<div class="bq19-find-nearest-quiz__card-container">
			{% for i in 0..11 %}

				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.{{i}} Miles Away</div>
					{# NOTE: Removed from design, commenting in case needed #}
					<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			{% endfor %}
		</div>
		</div>
	</div>
</div>

<section class="bq19-case-study bq19-section bq19-section--yellow">
	<div class="bq19-case-study__content bq19-inner">
		<div class="bq19-case-study__media">
			<img alt="" src="https://images.unsplash.com/photo-1516676237310-04deffe44aac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="bq19-case-study__image bq19-object-fit-image" />>
		</div>
		<div class="bq19-case-study__text">
			<h2 class="bq19-case-study__heading bq19-h2">Help people like martha</h2>
			<div class="bq19-case-study__rich-text bq19-rich-text">
				<p>Every pound raised will transform the lives of people like Martha from Nigeria. She fled her rural village with her young baby when the rest of her family were killed in a dispute over land. Martha feels traumatised and is desperate for counselling and support.</p>
			</div>

			<a class="bq19-case-study__button button-underline button-underline--white" href="#">Read Martha’s story</a>
		</div>
	</div>
</section>

<section class="bq19-case-study bq19-section bq19-section--yellow">
	<div class="bq19-case-study__content bq19-inner">
		<div class="bq19-case-study__media">
			<img alt="" src="https://images.unsplash.com/photo-1516676237310-04deffe44aac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="bq19-case-study__image bq19-object-fit-image" />>
		</div>
		<div class="bq19-case-study__text">
			<h2 class="bq19-case-study__heading bq19-h2">Help people like martha</h2>
			<div class="bq19-case-study__rich-text bq19-rich-text">
				<p>Every pound raised will transform the lives of people like Martha from Nigeria. She fled her rural village with her young baby when the rest of her family were killed in a dispute over land. Martha feels traumatised and is desperate for counselling and support.</p>
			</div>

			<a class="bq19-case-study__button button-underline button-underline--white" href="#">Read Martha’s story</a>
		</div>
	</div>
</section>

<section class="bq19__footer-signup bq19-footer-signup bq19-section">
    <div class="bq19-inner">
        <div class="bq19-footer-signup__content">
            <h2 class="bq19-footer-signup__heading bq19-h2 bq19-color-turquoise">hundreds of churches. thousands of people. ONE BIG QUIZ.</h2>
            <a class="button bq19-button" href="#">Sign up to host</a>
        </div>
        
        <img alt="" class="bq19-footer-signup__mandella" src="/images/mainsite5/big-quiz-2019/mandela.gif" srcset="/images/mainsite5/big-quiz-2019/mandela.gif 1x, /images/mainsite5/big-quiz-2019/mandela@2x.gif 2x">
        <img alt="" class="bq19-footer-signup__car" src="/images/mainsite5/big-quiz-2019/nearest-quiz/DeLorean@2x.png" srcset="/images/mainsite5/big-quiz-2019/nearest-quiz/DeLorean@2x.png 1x, /images/mainsite5/big-quiz-2019/nearest-quiz/DeLorean@2x.png 2x">
    </div>


    <picture>
        <source media="(min-width: 48em)" srcset="/images/mainsite5/big-quiz-2019/one-big-quiz-background.jpg 1x, /images/mainsite5/big-quiz-2019/one-big-quiz-background@2x.jpg 2x">
        <source srcset="/images/mainsite5/big-quiz-2019/one-big-quiz-background-mobile.jpg 1x, /images/mainsite5/big-quiz-2019/one-big-quiz-background-mobile@2x.jpg 2x">
        <img alt="" class="bq19-footer-signup__background-image bq19-object-fit-image" src="/images/mainsite5/big-quiz-2019/one-big-quiz-background.jpg">
    </picture>
</section>

<section class="bq19__footer-signup bq19-footer-signup bq19-section">
    <div class="bq19-inner">
        <div class="bq19-footer-signup__content">
            <h2 class="bq19-footer-signup__heading bq19-h2 bq19-color-turquoise">hundreds of churches. thousands of people. ONE BIG QUIZ.</h2>
            <a class="button bq19-button" href="#">Sign up to host</a>
        </div>
        
        <img alt="" class="bq19-footer-signup__mandella" src="/images/mainsite5/big-quiz-2019/mandela.gif" srcset="/images/mainsite5/big-quiz-2019/mandela.gif 1x, /images/mainsite5/big-quiz-2019/mandela@2x.gif 2x">
        <img alt="" class="bq19-footer-signup__car" src="/images/mainsite5/big-quiz-2019/nearest-quiz/DeLorean@2x.png" srcset="/images/mainsite5/big-quiz-2019/nearest-quiz/DeLorean@2x.png 1x, /images/mainsite5/big-quiz-2019/nearest-quiz/DeLorean@2x.png 2x">
    </div>


    <picture>
        <source media="(min-width: 48em)" srcset="/images/mainsite5/big-quiz-2019/one-big-quiz-background.jpg 1x, /images/mainsite5/big-quiz-2019/one-big-quiz-background@2x.jpg 2x">
        <source srcset="/images/mainsite5/big-quiz-2019/one-big-quiz-background-mobile.jpg 1x, /images/mainsite5/big-quiz-2019/one-big-quiz-background-mobile@2x.jpg 2x">
        <img alt="" class="bq19-footer-signup__background-image bq19-object-fit-image" src="/images/mainsite5/big-quiz-2019/one-big-quiz-background.jpg">
    </picture>
</section>

<div class="bq19-wave bq19-wave--color-green-primary">
	<svg class="bq19-wave__image" width="1400px" height="100px" viewBox="0 0 1400 100" preserveAspectRatio="none" focusable="false">
		<path d="M0,5 C700,-30 800,220 1400,20 L1400,100 L0,100" />
	</svg>
</div>

<div class="bq19-wave bq19-wave--color-green-primary">
	<svg class="bq19-wave__image" width="1400px" height="100px" viewBox="0 0 1400 100" preserveAspectRatio="none" focusable="false">
		<path d="M0,5 C700,-30 800,220 1400,20 L1400,100 L0,100" />
	</svg>
</div>

    <section class="bq19-text-w-image bq19-section  bq19-section--white  ">
        <div class="bq19-text-w-image__content bq19-inner">
            <div class="bq19-text-w-image__text">
                                    <div class="bq19-rich-text">
                        <h2 class="bq19-h3">
                                                            <span class="bq19-text-w-image__preheading">Step 1</span>
                            
                                                            Heading Text
                                                    </h2>

                                                    <p>Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge</p>
                        
                                            </div>
                                    <div class="bq19-rich-text">
                        <h2 class="bq19-h3">
                                                            <span class="bq19-text-w-image__preheading">Step 2</span>
                            
                                                            Heading Text
                                                    </h2>

                                                    <p>Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge</p>
                        
                                            </div>
                            </div>
            <div class="bq19-text-w-image__image">
                                    <img alt="" src="http://placehold.it/468x453">
                            </div>
        </div>
    </section>

{% for text_with_image in text_with_images %}
    <section class="bq19-text-w-image bq19-section {% if text_with_image.background_color %}bq19-section--{{ text_with_image.background_color }} {% else %} bq19-section--white {% endif %} {% if text_with_image.reverse %}bq19-text-w-image--reverse{% endif %}">
        <div class="bq19-text-w-image__content bq19-inner">
            <div class="bq19-text-w-image__text">
                {% for section in text_with_image.content_sections %}
                    <div class="bq19-rich-text">
                        <h2 class="{% if text_with_image.small_headings %}bq19-h3{% else %}bq19-h2{% endif %}">
                            {% if section.preheading %}
                                <span class="bq19-text-w-image__preheading">{{section.preheading}}</span>
                            {% endif %}

                            {% if section.heading %}
                                {{section.heading}}
                            {% else %}
                                Heading Text
                            {% endif %}
                        </h2>

                        {% if section.text %}
                            {{section.text | raw}}
                        {% else %}
                            <p>Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge success with <strong>500 churches</strong> and <strong>23,000 people</strong> taking part.</p>

                            <p>On Saturday 16 November, churches and other groups up and down the country will once again take part in the Big Quiz Night - a huge multi-venue, nationwide quiz - and we want it to be even bigger and better.</p>
                        {% endif %}

                        {% if section.button_text %}
                            <a class="button bq19-button" href="#">{{ section.button_text }}</a>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
            <div class="bq19-text-w-image__image">
                {% if text_with_image.img_src_retina %}
                    <img srcset="{{ text_with_image.img_src }} 1x, {{ text_with_image.img_src_retina }} 2x"
                        src="{{ text_with_image.img_src }}"
                        alt="" />
                {% else %}
                    <img alt="" src="{{ text_with_image.img_src }}">
                {% endif %}
            </div>
        </div>
    </section>
{% endfor %}

    <section class="bq19-text-w-image bq19-section  bq19-section--white  bq19-text-w-image--reverse">
        <div class="bq19-text-w-image__content bq19-inner">
            <div class="bq19-text-w-image__text">
                                    <div class="bq19-rich-text">
                        <h2 class="bq19-h2">
                            
                                                            Heading Text
                                                    </h2>

                                                    <p>Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge success with <strong>500 churches</strong> and <strong>23,000 people</strong> taking part.</p>

                            <p>On Saturday 16 November, churches and other groups up and down the country will once again take part in the Big Quiz Night - a huge multi-venue, nationwide quiz - and we want it to be even bigger and better.</p>
                        
                                                    <a class="button bq19-button" href="#">Call to action</a>
                                            </div>
                            </div>
            <div class="bq19-text-w-image__image">
                                    <img alt="" src="http://placehold.it/468x453">
                            </div>
        </div>
    </section>

{% for text_with_image in text_with_images %}
    <section class="bq19-text-w-image bq19-section {% if text_with_image.background_color %}bq19-section--{{ text_with_image.background_color }} {% else %} bq19-section--white {% endif %} {% if text_with_image.reverse %}bq19-text-w-image--reverse{% endif %}">
        <div class="bq19-text-w-image__content bq19-inner">
            <div class="bq19-text-w-image__text">
                {% for section in text_with_image.content_sections %}
                    <div class="bq19-rich-text">
                        <h2 class="{% if text_with_image.small_headings %}bq19-h3{% else %}bq19-h2{% endif %}">
                            {% if section.preheading %}
                                <span class="bq19-text-w-image__preheading">{{section.preheading}}</span>
                            {% endif %}

                            {% if section.heading %}
                                {{section.heading}}
                            {% else %}
                                Heading Text
                            {% endif %}
                        </h2>

                        {% if section.text %}
                            {{section.text | raw}}
                        {% else %}
                            <p>Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge success with <strong>500 churches</strong> and <strong>23,000 people</strong> taking part.</p>

                            <p>On Saturday 16 November, churches and other groups up and down the country will once again take part in the Big Quiz Night - a huge multi-venue, nationwide quiz - and we want it to be even bigger and better.</p>
                        {% endif %}

                        {% if section.button_text %}
                            <a class="button bq19-button" href="#">{{ section.button_text }}</a>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
            <div class="bq19-text-w-image__image">
                {% if text_with_image.img_src_retina %}
                    <img srcset="{{ text_with_image.img_src }} 1x, {{ text_with_image.img_src_retina }} 2x"
                        src="{{ text_with_image.img_src }}"
                        alt="" />
                {% else %}
                    <img alt="" src="{{ text_with_image.img_src }}">
                {% endif %}
            </div>
        </div>
    </section>
{% endfor %}

<div class="inner">
	<span class="icon-disaster-grey"></span>
	<span class="icon-hunger-grey"></span>
	<span class="icon-conflict-grey"></span>
	<span class="icon-matter-grey"></span>
	<span class="icon-health-grey"></span>
	<span class="icon-money-grey"></span>
	<span class="icon-see-grey"></span>
	<span class="icon-blog-grey"></span>
	<span class="icon-calendar-grey"></span>
	<span class="icon-gender-grey"></span>
	<span class="icon-children-grey"></span>
	<span class="icon-church-grey"></span>
	<span class="icon-water-grey"></span>
	<span class="icon-communities-grey"></span>
	<span class="icon-injustice-grey"></span>
	<span class="icon-vulnerable-grey"></span>
	<span class="icon-signup-grey"></span>
	<span class="icon-empowerment-grey"></span>
	<span class="icon-livelihoods-grey"></span>
	<span class="icon-climate-grey"></span>
	<span class="icon-hiv-grey"></span>
	<span class="icon-marginalised-grey"></span>
	<span class="icon-education-grey"></span>
	<span class="icon-whole-person-grey"></span>
</div>

<div class="inner">
	<span class="icon-disaster-{{colour}}"></span>
	<span class="icon-hunger-{{colour}}"></span>
	<span class="icon-conflict-{{colour}}"></span>
	<span class="icon-matter-{{colour}}"></span>
	<span class="icon-health-{{colour}}"></span>
	<span class="icon-money-{{colour}}"></span>
	<span class="icon-see-{{colour}}"></span>
	<span class="icon-blog-{{colour}}"></span>
	<span class="icon-calendar-{{colour}}"></span>
	<span class="icon-gender-{{colour}}"></span>
	<span class="icon-children-{{colour}}"></span>
	<span class="icon-church-{{colour}}"></span>
	<span class="icon-water-{{colour}}"></span>
	<span class="icon-communities-{{colour}}"></span>
	<span class="icon-injustice-{{colour}}"></span>
	<span class="icon-vulnerable-{{colour}}"></span>
	<span class="icon-signup-{{colour}}"></span>
	<span class="icon-empowerment-{{colour}}"></span>
	<span class="icon-livelihoods-{{colour}}"></span>
	<span class="icon-climate-{{colour}}"></span>
	<span class="icon-hiv-{{colour}}"></span>
	<span class="icon-marginalised-{{colour}}"></span>
	<span class="icon-education-{{colour}}"></span>
	<span class="icon-whole-person-{{colour}}"></span>
</div>

<div class="inner">
	<span class="icon-disaster-yellow"></span>
	<span class="icon-hunger-yellow"></span>
	<span class="icon-conflict-yellow"></span>
	<span class="icon-matter-yellow"></span>
	<span class="icon-health-yellow"></span>
	<span class="icon-money-yellow"></span>
	<span class="icon-see-yellow"></span>
	<span class="icon-blog-yellow"></span>
	<span class="icon-calendar-yellow"></span>
	<span class="icon-gender-yellow"></span>
	<span class="icon-children-yellow"></span>
	<span class="icon-church-yellow"></span>
	<span class="icon-water-yellow"></span>
	<span class="icon-communities-yellow"></span>
	<span class="icon-injustice-yellow"></span>
	<span class="icon-vulnerable-yellow"></span>
	<span class="icon-signup-yellow"></span>
	<span class="icon-empowerment-yellow"></span>
	<span class="icon-livelihoods-yellow"></span>
	<span class="icon-climate-yellow"></span>
	<span class="icon-hiv-yellow"></span>
	<span class="icon-marginalised-yellow"></span>
	<span class="icon-education-yellow"></span>
	<span class="icon-whole-person-yellow"></span>
</div>

<div class="inner">
	<span class="icon-disaster-{{colour}}"></span>
	<span class="icon-hunger-{{colour}}"></span>
	<span class="icon-conflict-{{colour}}"></span>
	<span class="icon-matter-{{colour}}"></span>
	<span class="icon-health-{{colour}}"></span>
	<span class="icon-money-{{colour}}"></span>
	<span class="icon-see-{{colour}}"></span>
	<span class="icon-blog-{{colour}}"></span>
	<span class="icon-calendar-{{colour}}"></span>
	<span class="icon-gender-{{colour}}"></span>
	<span class="icon-children-{{colour}}"></span>
	<span class="icon-church-{{colour}}"></span>
	<span class="icon-water-{{colour}}"></span>
	<span class="icon-communities-{{colour}}"></span>
	<span class="icon-injustice-{{colour}}"></span>
	<span class="icon-vulnerable-{{colour}}"></span>
	<span class="icon-signup-{{colour}}"></span>
	<span class="icon-empowerment-{{colour}}"></span>
	<span class="icon-livelihoods-{{colour}}"></span>
	<span class="icon-climate-{{colour}}"></span>
	<span class="icon-hiv-{{colour}}"></span>
	<span class="icon-marginalised-{{colour}}"></span>
	<span class="icon-education-{{colour}}"></span>
	<span class="icon-whole-person-{{colour}}"></span>
</div>

<div class="inner">
	<span class="icon-disaster-trans"></span>
	<span class="icon-hunger-trans"></span>
	<span class="icon-conflict-trans"></span>
	<span class="icon-matter-trans"></span>
	<span class="icon-health-trans"></span>
	<span class="icon-money-trans"></span>
	<span class="icon-see-trans"></span>
	<span class="icon-blog-trans"></span>
	<span class="icon-calendar-trans"></span>
	<span class="icon-gender-trans"></span>
	<span class="icon-children-trans"></span>
	<span class="icon-church-trans"></span>
	<span class="icon-water-trans"></span>
	<span class="icon-communities-trans"></span>
	<span class="icon-injustice-trans"></span>
	<span class="icon-vulnerable-trans"></span>
	<span class="icon-signup-trans"></span>
	<span class="icon-empowerment-trans"></span>
	<span class="icon-livelihoods-trans"></span>
	<span class="icon-climate-trans"></span>
	<span class="icon-hiv-trans"></span>
	<span class="icon-marginalised-trans"></span>
	<span class="icon-education-trans"></span>
	<span class="icon-whole-person-trans"></span>
</div>

<div class="inner">
	<span class="icon-disaster-{{colour}}"></span>
	<span class="icon-hunger-{{colour}}"></span>
	<span class="icon-conflict-{{colour}}"></span>
	<span class="icon-matter-{{colour}}"></span>
	<span class="icon-health-{{colour}}"></span>
	<span class="icon-money-{{colour}}"></span>
	<span class="icon-see-{{colour}}"></span>
	<span class="icon-blog-{{colour}}"></span>
	<span class="icon-calendar-{{colour}}"></span>
	<span class="icon-gender-{{colour}}"></span>
	<span class="icon-children-{{colour}}"></span>
	<span class="icon-church-{{colour}}"></span>
	<span class="icon-water-{{colour}}"></span>
	<span class="icon-communities-{{colour}}"></span>
	<span class="icon-injustice-{{colour}}"></span>
	<span class="icon-vulnerable-{{colour}}"></span>
	<span class="icon-signup-{{colour}}"></span>
	<span class="icon-empowerment-{{colour}}"></span>
	<span class="icon-livelihoods-{{colour}}"></span>
	<span class="icon-climate-{{colour}}"></span>
	<span class="icon-hiv-{{colour}}"></span>
	<span class="icon-marginalised-{{colour}}"></span>
	<span class="icon-education-{{colour}}"></span>
	<span class="icon-whole-person-{{colour}}"></span>
</div>

<a href="#" class="button button--green">Link as a button</a>
<button class="button button--green" type="input">Button as a button</button>

<a href="#" class="button button--green">{{ button_one }}</a>
<button class="button button--green" type="input">{{ button_two }}</button>

<div class="element-bg">
	<a href="#" class="button button--white">Link as a button</a>
	<button class="button button--white" type="input">Button as a button</button>
</div>

<div class="element-bg">
	<a href="#" class="button button--white">{{ button_one }}</a>
	<button class="button button--white" type="input">{{ button_two }}</button>
</div>

<a href="#" class="secondary-button">Link as a button</a>
<button class="secondary-button" type="input">Button as a button</button>

<a href="#" class="secondary-button">{{ button_one }}</a>
<button class="secondary-button" type="input">{{ button_two }}</button>

<a href="#" class="button-underline">Button underline</a>

<a href="#" class="button-underline">Button underline</a>

<a href="#" class="button">Link as a button</a>
<button class="button" type="input">Button as a button</button>

<a href="#" class="button">{{ button_one }}</a>
<button class="button" type="input">{{ button_two }}</button>

<div class="element-bg">
	<a href="#" class="button button--transparent">Link as a button</a>
	<button class="button button--transparent" type="input">Button as a button</button>
</div>

<div class="element-bg">
	<a href="#" class="button button--transparent">{{ button_one }}</a>
	<button class="button button--transparent" type="input">{{ button_two }}</button>
</div>

<div class="giving-header fullwidth-giving-ask--emergency">
    <div class="inner">
        <div id="fullwidth-image" class="giving-header__image" data-image="/slider/photo5.jpg"></div>

        <div class="large-row">
            <div class="large-col-6">
                <h1 class="giving-header__title" id="fullwidth-text"> CENTRAL AFRICAN REPUBLIC APPEAL</h1>
                <div class="giving-header__link"><a href="#">VIEW PRAYER RESORUCES AND FIND OUT MORE</a></div>
            </div>
            <div class="large-col-6">
                <div class="giving-widget giving-widget--mini">
                    <div class="fund-selector">
                        <!-- Can be a span or a label. Depends on whether or not there's a select -->
                        <span for="destination-select" class="fund-selector__title">Donate Now</span>

                        <div class="fund-selector-field">
                            <div class="custom-input custom-input--currency">
                                <input class="custom-input__input" type="text">
                            </div>
                        </div>

                        <div class="fund-selector-field payment-methods">
                            <div class="payment-methods__item payment-methods__item--once" style="display: block;">
                                <div class="payment-methods__button">
                                    <button class="button pay-by-card"><span>Pay by card</span></button>
                                </div>
                                <div class="payment-methods__button">
                                    <button class="button pay-by-paypal"><span>Pay by</span></button>
                                </div>
                            </div>
                            <div class="payment-methods__item payment-methods__item--regularly" style="display: none;">
                                <div class="payment-methods__button">
                                    <button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="giving-header fullwidth-giving-ask--emergency">
    <div class="inner">
        <div id="fullwidth-image" class="giving-header__image" data-image="/slider/photo5.jpg"></div>

        <div class="large-row">
            <div class="large-col-6">
                <h1 class="giving-header__title" id="fullwidth-text"> CENTRAL AFRICAN REPUBLIC APPEAL</h1>
                <div class="giving-header__link"><a href="#">VIEW PRAYER RESORUCES AND FIND OUT MORE</a></div>
            </div>
            <div class="large-col-6">
                <div class="giving-widget giving-widget--mini">
                    <div class="fund-selector">
                        <!-- Can be a span or a label. Depends on whether or not there's a select -->
                        <span for="destination-select" class="fund-selector__title">Donate Now</span>

                        <div class="fund-selector-field">
                            <div class="custom-input custom-input--currency">
                                <input class="custom-input__input" type="text">
                            </div>
                        </div>

                        <div class="fund-selector-field payment-methods">
                            <div class="payment-methods__item payment-methods__item--once" style="display: block;">
                                <div class="payment-methods__button">
                                    <button class="button pay-by-card"><span>Pay by card</span></button>
                                </div>
                                <div class="payment-methods__button">
                                    <button class="button pay-by-paypal"><span>Pay by</span></button>
                                </div>
                            </div>
                            <div class="payment-methods__item payment-methods__item--regularly" style="display: none;">
                                <div class="payment-methods__button">
                                    <button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="inner">
			<div class="search-result">
			<div class="search-result__type">
				<div class="search-result__circle">
					WWW
				</div>
			</div>
			<div class="search-result__content">
				<a href="#" class="search-result__title"><h2>One big mountain</h2></a>
				<a href="#" class="search-result__url">/en/give/one_mountain</a>
				<div class="search-result__excerpt">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in suscipit nisl. Sed volutpat id arcu nec iaculis. Maecenas ullamcorper, urna pretium vulputate pretium, ante nulla dignissim diam, et fringilla nulla justo eu nulla.</p>
				</div>
			</div>
		</div>
	</div>

<div class="inner">
	{% for result in search_results %}
		<div class="search-result">
			<div class="search-result__type">
				<div class="search-result__circle">
					{{ result.type }}
				</div>
			</div>
			<div class="search-result__content">
				<a href="#" class="search-result__title"><h2>{{ result.title }}</h2></a>
				<a href="#" class="search-result__url">{{ result.url }}</a>
				<div class="search-result__excerpt">
					<p>{{ result.excerpt }}</p>
				</div>
			</div>
		</div>
	{% endfor %}
</div>

<div class="pagination clearfix">
	<div class="article-inner">
		<div class="prev">
			<a href="#">< Previous</a>
		</div> 
		<ul class="page-links">
			<li class="current">1</li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
		</ul>
		<div class="next">
			<a href="#">Next ></a>
		</div>
	</div>
</div>

<div class="pagination clearfix">
	<div class="article-inner">
		<div class="prev">
			<a href="#">< Previous</a>
		</div> 
		<ul class="page-links">
			<li class="current">1</li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
		</ul>
		<div class="next">
			<a href="#">Next ></a>
		</div>
	</div>
</div>

<div class="article-inner search-summary">
	About 1350 results for 'One big mountain'
</div>

<div class="article-inner search-summary">
	About {{search_results_no}} results for '{{search_term}}'
</div>

<div class="content-grid inner clearfix">

	<a href="#" class="content-grid__block content-grid__block--full content-grid__image" style='background-image: url("http://via.placeholder.com/970x484");'>
		<div class="content-grid__footer content-grid__footer--green content-grid__footer--large">LATEST FUNDRAISER EVENT</div>
	</a>
	
	<a href="#" class="content-grid__block content-grid__block--half content-grid__image" style='background-image: url("http://via.placeholder.com/485x363");'>
		<div class="content-grid__footer content-grid__footer--green content-grid__footer--large">LATEST FUNDRAISER EVENT</div>
	</a>

	<a href="#" class="content-grid__block content-grid__block--half content-grid__image" style='background-image: url("http://via.placeholder.com/485x363");'>
		<div class="content-grid__footer content-grid__footer--green content-grid__footer--large">LATEST FUNDRAISER EVENT</div>
	</a>


			<a href="" class="content-grid__block content-grid__block--quarter 
		 content-grid__colour content-grid__block--yellow						"
				>
			<div>
									<h4>						‘‘FOR BECKY&#039;S CRAZY FAMILY WHO ARE GOING FOR A SWIM IN THE SEA TODAY. XX’’
					</h4>					<div class="content-grid__giving-meta">ANONYMOUS - £10.00 + £2.50 Gift Aid</div>
							</div>
		</a>

			<a href="" class="content-grid__block content-grid__block--quarter 
				 content-grid__image				"
					style='background-image: url("http://via.placeholder.com/242x242");'
				>
			<div>
									<div class="content-grid__footer content-grid__footer--0">Martha Collison has raised £6,970.45</div>							</div>
		</a>

			<a href="" class="content-grid__block content-grid__block--quarter 
				 content-grid__image				"
					style='background-image: url("http://via.placeholder.com/242x242");'
				>
			<div>
																</div>
		</a>

			<a href="" class="content-grid__block content-grid__block--quarter 
						content-grid__icon content-grid__resources		"
				>
			<div>
									<h3>						Resources
					</h3>					<div class="content-grid__giving-meta"></div>
							</div>
		</a>

			<a href="" class="content-grid__block content-grid__block--quarter 
						content-grid__icon content-grid__join		"
				>
			<div>
									<h3>						Join Us!
					</h3>					<div class="content-grid__giving-meta"></div>
							</div>
		</a>

			<a href="" class="content-grid__block content-grid__block--quarter 
		 content-grid__colour content-grid__block--yellow						"
				>
			<div>
									<h4>						‘‘FOR BECKY&#039;S CRAZY FAMILY WHO ARE GOING FOR A SWIM IN THE SEA TODAY. XX’’
					</h4>					<div class="content-grid__giving-meta">ANONYMOUS - £10.00 + £2.50 Gift Aid</div>
							</div>
		</a>

			<a href="" class="content-grid__block content-grid__block--quarter 
				 content-grid__image				"
					style='background-image: url("http://via.placeholder.com/242x242");'
				>
			<div>
																</div>
		</a>

			<a href="" class="content-grid__block content-grid__block--quarter 
		 content-grid__colour content-grid__block--yellow						"
				>
			<div>
									<h4>						Other funds
					</h4>					<div class="content-grid__giving-meta"></div>
							</div>
		</a>

			<a href="" class="content-grid__block content-grid__block--quarter 
		 content-grid__colour content-grid__block--yellow						"
				>
			<div>
									<h4>						‘‘FOR BECKY&#039;S CRAZY FAMILY WHO ARE GOING FOR A SWIM IN THE SEA TODAY. XX’’
					</h4>					<div class="content-grid__giving-meta">ANONYMOUS - £10.00 + £2.50 Gift Aid</div>
							</div>
		</a>

			<a href="" class="content-grid__block content-grid__block--quarter 
						content-grid__icon content-grid__inspired		"
				>
			<div>
									<h3>						Get inspired
					</h3>					<div class="content-grid__giving-meta"></div>
							</div>
		</a>

			<a href="" class="content-grid__block content-grid__block--quarter 
				 content-grid__image				"
					style='background-image: url("http://via.placeholder.com/242x242");'
				>
			<div>
																</div>
		</a>

			<a href="" class="content-grid__block content-grid__block--quarter 
						content-grid__icon content-grid__in-touch		"
				>
			<div>
									<h3>						Get in touch
					</h3>					<div class="content-grid__giving-meta"></div>
							</div>
		</a>

	
</div>