<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> -->