{% block page %}
	<section id="about{{ page.sub_group ? '_sub_' ~ page.sub_group }}" class="about gray-bg no-padding-bottom">
		<h1>{{ page.name }}</h1>
		<div class="container">
			{% block title %}
				<div class="row os-animation text-center" data-os-animation="fadeInUp">
					<div class="col-md-6 col-sm-6 col-xxs-12 title-text">
						<h2 class="title">{{ page.name }}</h2>
					</div>
					<div class="col-md-6 col-sm-6 col-xxs-12 simple-text">
						<h3 class="description text-left">{{ page.desc }}</h3>
					</div>
				</div>
			{% endblock %}
			
			{% block content %}
				{% block contents %}
					<div class="row os-animation text-left" data-os-animation="fadeInUp">
						<div class="col-md-6 col-sm-6">
							<h3 class="title text-center">{{ data.about[1].title }}</h3>
							<p class="description">{{ data.about[1].desc | cleaner_tag | preg_replace('@<p@', '<p class="description"') | raw }}</p>
						</div>
						<div class="col-md-6 col-sm-6">
							<h3 class="title text-center">{{ data.about[2].title }}</h3>
							<p class="description">{{ data.about[2].desc | cleaner_tag | preg_replace('@<p@i', '<p class="description"') | raw }}</p>
						</div>
					</div>
				{% endblock %}
				
				{% if site.active_activity %}
					{% set cols = 12 // (((data.activities|length == 3) or (data.activities|length > 4)) ? 3 : data.activities|length) %}
					
					{% block activities %}
						<div class="row os-animation text-center" data-os-animation="fadeInUp" id="about_activities">
							<div>
								<h2 class="title">{{ data.type_activity }}</h2>
							</div>
							<div>
								{# {% include 'pages/about_activities.twig' %} #}
								{% for activity in data.activities %}
									{% block activity %}
										<div class="col-md-{{ cols }} col-sm-5 count-box" style="background:{{ activity.color }}">
											<div class="chart easyPieChart" data-line-width="8" data-percent="{{ activity.value }}" data-size="200"><span>{{ activity.value }}%</span></div>
											<h3 class="title margin-top">{{ activity.name }}</h3>
										</div>
									{% endblock %}
								{% endfor %}
								<div class="clearfix"></div>
							</div>
						</div>
					{% endblock %}
				{% endif %}
				
				{% if site.highlights_bottom_active %}
					{% block highlights %}
						<div class="row os-animation" data-os-animation="fadeInUp" id="highlights_bottom">
							<h2>{{ page.name }}</h2>
							<div class="col-md-4 col-sm-4 service-box border-right text-center">
								<div class="service-icon"> <i class="fa fa-pencil-square-o"></i> </div>
								<h3>{{ data.about[3].title }}</h3>
								<p class="content">{{ data.about[3].desc | cleaner_tag | raw }}</p>
							</div>
							<div class="col-md-4 col-sm-4 service-box border-right text-center">
								<div class="service-icon"> <i class="fa fa-comment-o"></i> </div>
								<h3>{{ data.about[4].title }}</h3>
								<p class="content">{{ data.about[4].desc | cleaner_tag | raw }}</p>
							</div>
							<div class="col-md-4 col-sm-4 service-box text-center">
								<div class="service-icon"> <i class="fa fa-bell-o"></i> </div>
								<h3>{{ data.about[5].title }}</h3>
								<p class="content">{{ data.about[5].desc | cleaner_tag | raw }}</p>
							</div>
						</div>
					{% endblock highlights %}
				{% endif %}
			{% endblock content %}
		</div>
	</section>
{% endblock page %}

{% if site.recruit_active %}
	{# recruit #}
	{% block recruit %}
		<section class="testimonials gray-bg no-padding" id="recruit">
		<h1>{{ site.recruit_title }}</h1>
		<div class="color-overlay padding-30">
			<div class="container">
				<div class="row os-animation text-center" data-os-animation="fadeInUp">
					<div>
						<h2 class="title">
							<a href="/recruit.html?lightbox%5Bwidth%5D=320&amp;lightbox%5Bheight%5D=650" class="lightbox">{{ site.recruit_title }}</a>
						</h2>
					</div>
					<div>
						<h3 class="title">
							<a href="/recruit.html?lightbox%5Bwidth%5D=320&amp;lightbox%5Bheight%5D=650" class="lightbox">{{ site.recruit_desc }}</a>
						</h3>
					</div>
				</div>
			</div>
		</section>
	{% endblock %}
{% endif %}