{% block page %}
	<section class="section about" id="about{{ page.sub_group ? '_sub_' ~ page.sub_group }}">
		<h1>{{ page.name }}</h1>
		{% block title %}<h2 class="header-text">{{ page.name }}</h2>{% endblock %}
		{% block content %}
			{% block contents %}
				<div class="content text-center">
					<h3 class="caption text-center">{{ page.desc }}</h3>
					<div class="col-md-6 col-sm-6 text-left">
						<h3>{{ data.about[1].title }}</h3>
						{{ data.about[1].desc | cleaner_tag | raw }}
					</div>
					<div class="col-md-6 col-sm-6 text-left">
						<h3>{{ data.about[2].title }}</h3>
						{{ data.about[2].desc | cleaner_tag | raw }}
					</div>
					<div class="clearfix"></div>
				</div>
			{% endblock %}
			
			{% if site.active_activity %}
				{% block activities %}
					<div class="content">
						{# include 'pages/about_activities.twig' #}
						<div class="col-md-8 col-sm-12">
							<div id="diagram"></div>
							<div class="get">
								{% set dots = '' %}
								{% for activity in data.activities %}
									{% block activity %}
										<div class="arc">
											<span class="text">{{ activity.name }}</span>
											<input type="hidden" class="percent" value="{{ activity.value }}">
											<input type="hidden" class="color" value="{{ activity.color }}">
										</div>
									{% endblock %}
									
									{% set dots = dots ~ '<p><i class="fa fa-arrow-right"></i> ' ~ activity.name ~ '</p>' %}
								{% endfor %}
							</div>
						</div>
						<div class="col-md-4 col-sm-12">
							<h3>{{ data.type_activity }}:</h3>
							{{ dots | raw }}
						</div>
						<div class="clearfix"></div>
					</div>
				{% endblock %}
			{% else %}
				{# corrige bug em que as actividades aparecem desalinhadas #}
				<div class="clearfix">&nbsp;</div>
			{% endif %}
			
			{% if site.highlights_bottom_active %}
				{% block highlights %}
					<div class="content">
						<!-- icons -->
						<div id="about_highlights" class="icon_about text-center">
							<div class="col-md-4 col-sm-4">
								<div>
									<span><i class="fa fa-heart fa-5x"></i></span>
									<h2>{{ data.about[3].title | stripslashes | raw }}</h2>
								</div>
							</div>
							<div class="col-md-4 col-sm-4">
								<div>
									<span><i class="fa fa-road fa-5x"></i></span>
									<h2>{{ data.about[4].title | stripslashes | raw }}</h2>
								</div>
							</div>
							<div class="col-md-4 col-sm-4">
								<div>
									<span><i class="fa fa-dashboard fa-5x"></i></span>
									<h2>{{ data.about[5].title | stripslashes | raw }}</h2>
								</div>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
				{% endblock highlights %}
			{% endif %}
		{% endblock content %}
	</section>
{% endblock page %}

{% if site.recruit_active %}
	{% block recruit %}
		<section class="section testimonials" id="testimonials">
			<h1>{{ site.recruit_title }}</h1>
			<div class="content text-center">
				<h2>
					<a href="/recruit.html?lightbox%5Bwidth%5D=320&amp;lightbox%5Bheight%5D=650" class="lightbox">{{ site.recruit_title }}</a>
				</h2>
				<h5>
					<a href="/recruit.html?lightbox%5Bwidth%5D=320&amp;lightbox%5Bheight%5D=650" class="lightbox">{{ site.recruit_desc }}</a>
				</h5>
			</div>
		</section>
	{% endblock %}
{% endif %}