<?php
/** @var  $opportunity_talents */
/** @var  array $matching_candidates */
/** @var  array $pc_list */
/** @var  array $ec_list */
/** @var  array $hcc_list */

$this->title = 'Connecting Talents | Talent matching';

$this->registerCssFile('@web/assets/css/radar-chart.css');
$this->registerJsFile(
	'https://cdn.jsdelivr.net/npm/vue',
	[
		'depends' => [\frontend\assets\CTAsset::className()],
		'position' => \yii\web\View::POS_END,
	]
);
$this->registerJsFile('@web/assets/js/d3.js', [ 'position' => \yii\web\View::POS_BEGIN ] );
$this->registerJsFile('@web/assets/js/radarChart.js', [ 'position' => \yii\web\View::POS_BEGIN ] );
$this->registerJsFile(
	'@web/assets/js/matching-page.js',
	[
		'depends' => [\frontend\assets\CTAsset::className()],
		'position' => \yii\web\View::POS_END,
	]
);
?>
<div id="vue-app">
<div class="matching">
	<section class="matching__inner">
		<h1 class="matching__heading">Talent matching results for Opportunity</h1>
		<div id="filters" class="matching__filters-container">
			<div class="filters js-filters">
				<button class="button button--default button--yellow js-filters-trigger">
					<span class="button__text">filter dashboard ▼</span>
				</button>
				<div class="filters__drop js-filters-drop">
					<div class="filters__inner">
						<form>
							<div class="filters__row">
								<div class="filters__col">
									<div class="form-group">
										<label class="form-group__label">
                              <span class="relative">
                                Professional capabilities
                                <button class="form-group__info js-tooltip-trigger" type="button" data-tooltip-text="<div class='tooltip__item'>Ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit.</div>">
                                  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon--top" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"></path>
                                  </svg>
                                </button>
                              </span>
										</label>
										<div id="professional-capabilities" class="select js-select" data-eui-dropdown>
											<div class="select__inner dd-eui-dropdown" data-eui-dropdown-depth="1">
												<div class="select__value js-select-value"></div>
												<div class="select__items dd-eui-drop">
                                                    <input id="professional-capabilities-0" class="none js-select-option" type="radio" name="professional-capabilities" value="" data-text="" v-model="filter.capability">
                                                    <label class="select__option" for="professional-capabilities-0">Not selected</label>
													<?php if($pc_list): ?>
														<?php foreach ($pc_list as $key => $pc_item): ?>
                                                            <input id="professional-capabilities-<?= $key ?>" class="none js-select-option" type="radio" name="professional-capabilities" value="<?php echo $pc_item; ?>" data-text="<?php echo $pc_item; ?>" v-model="filter.capability">
                                                            <label class="select__option" for="professional-capabilities-<?= $key ?>"><?php echo $pc_item; ?></label>
														<?php endforeach; ?>
													<?php endif; ?>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="filters__col">
									<div class="form-group">
										<label class="form-group__label">
                              <span class="relative">
                                Enabling Competencies
                                <button class="form-group__info js-tooltip-trigger" type="button" data-tooltip-text="<div class='tooltip__item'>Ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit.</div>">
                                  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon--top" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"></path>
                                  </svg>
                                </button>
                              </span>
										</label>
										<div id="enaibling-competencies" class="select js-select" data-eui-dropdown>
											<div class="select__inner dd-eui-dropdown" data-eui-dropdown-depth="1">
												<div class="select__value js-select-value"></div>
												<div class="select__items dd-eui-drop">
                                                    <input id="enaibling-competencies-0" class="none js-select-option" type="radio" name="professional-capabilities" value="" data-text="" v-model="filter.competencies">
                                                    <label class="select__option" for="enaibling-competencies-0">Not selected</label>
													<?php if($ec_list): ?>
														<?php foreach ($ec_list as $key => $ec_item): ?>
                                                            <input id="enaibling-competencies-<?= $key ?>" class="none js-select-option" type="radio" name="professional-capabilities" value="<?php echo $ec_item; ?>" data-text="<?php echo $ec_item; ?>" v-model="filter.competencies">
                                                            <label class="select__option" for="enaibling-competencies-<?= $key ?>"><?php echo $ec_item; ?></label>
														<?php endforeach; ?>
													<?php endif; ?>
                                                </div>
											</div>
										</div>
									</div>
								</div>
								<div class="filters__col">
									<div class="form-group">
										<label class="form-group__label">
                              <span class="relative">
                                Human-centric competencies
                                <button class="form-group__info js-tooltip-trigger" type="button" data-tooltip-text="<div class='tooltip__item'>Ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit.</div>">
                                  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon--top" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"></path>
                                  </svg>
                                </button>
                              </span>
										</label>
										<div id="human-centric-competencies" class="select js-select" data-eui-dropdown>
											<div class="select__inner dd-eui-dropdown" data-eui-dropdown-depth="1">
												<div class="select__value js-select-value"></div>
												<div class="select__items dd-eui-drop">
                                                    <input id="human-centric-competencies-0" class="none js-select-option" type="radio" name="professional-capabilities" value="" data-text="" v-model="filter.human_centric">
                                                    <label class="select__option" for="human-centric-competencies-0">Not selected</label>
                                                    <?php if($hcc_list): ?>
                                                    <?php foreach ($hcc_list as $key => $hcc_item): ?>
                                                            <input id="human-centric-competencies-<?= $key ?>" class="none js-select-option" type="radio" name="professional-capabilities" value="<?php echo $hcc_item; ?>" data-text="<?php echo $hcc_item; ?>" v-model="filter.human_centric">
                                                            <label class="select__option" for="human-centric-competencies-<?= $key ?>"><?php echo $hcc_item; ?></label>
                                                    <?php endforeach; ?>
                                                    <?php endif; ?>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="filters__col">
									<div class="form-group">
										<label class="form-group__label form-group__label--hidden">s</label>
										<button class="button button--default button--full-width button--yellow" type="button" v-on:click="viewShortlistButtonClick">
											<span class="button__text">shortlist</span>
										</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<div id="matching-users" class="matching__users">
			<table class="matching__table">
				<thead class="matching__head">
				<tr>
					<th></th>
					<th class="matching__title">
						<span class="inline-block inline-block--middle uppercase">Drivers</span>
						<svg xmlns="http://www.w3.org/2000/svg" class="icon icon--middle" width="24" height="24" viewBox="0 0 58 58" fill="currentColor">
							<path d="M36.5,4.1c-3.1-1.8-6.4-2-9.9-1.8c-0.7,0-1.2-0.1-1.7-0.6c-1.3-1.2-2.8-1.9-4.6-1.7c-2.3,0.3-4.1,1.4-4.9,3.6
                          c-0.8,2.1-0.9,4.2,0.9,6c1.6,1.7,3.5,2.5,5.8,2c2.3-0.5,3.8-2,4.4-4.2c0.2-0.6,0.4-1.1,1.1-1.3C30.8,5.3,34,5,37.2,6.3
                          c2.7,1.1,4.8,3,6.8,5C42,8.4,39.5,5.9,36.5,4.1z M22.9,8c-1.2,1.2-3.2,1.2-4.4-0.1c-1.1-1.2-1.2-3.1,0-4.3c1.2-1.2,3.1-1.2,4.3,0
                          C24.1,4.9,24.1,6.8,22.9,8z"/>
							<path d="M4.1,20.3c-1.8,3.1-2,6.4-1.8,9.9c0,0.7-0.1,1.2-0.6,1.7c-1.2,1.3-1.9,2.8-1.7,4.6c0.3,2.3,1.3,4.1,3.6,4.9
                          c2.1,0.8,4.2,0.9,6-0.9c1.7-1.6,2.5-3.5,2-5.8c-0.5-2.3-2-3.8-4.2-4.4c-0.6-0.2-1.1-0.4-1.3-1.1C5.3,26,5,22.7,6.3,19.5
                          c1.1-2.7,3-4.8,5-6.8C8.4,14.8,5.9,17.2,4.1,20.3z M8,33.9C9.2,35.1,9.2,37,8,38.2c-1.2,1.1-3.1,1.2-4.3,0c-1.2-1.2-1.2-3.1,0-4.3
                          C4.9,32.7,6.8,32.7,8,33.9z"/>
							<path d="M21.5,53.9c3.1,1.8,6.5,2,9.9,1.8c0.7,0,1.2,0.1,1.7,0.6c1.3,1.2,2.8,1.9,4.6,1.7c2.3-0.3,4.1-1.3,4.9-3.6
                          c0.8-2.1,0.9-4.2-0.9-6c-1.6-1.7-3.5-2.5-5.8-2c-2.3,0.5-3.8,2-4.4,4.2c-0.2,0.6-0.4,1.1-1.1,1.3c-3.2,0.8-6.5,1.1-9.6-0.2
                          c-2.7-1.1-4.8-3-6.8-5C16,49.6,18.5,52.1,21.5,53.9z M35.1,50c1.2-1.2,3.2-1.2,4.4,0.1c1.2,1.2,1.2,3.1,0,4.3
                          c-1.2,1.2-3.1,1.2-4.3,0C33.9,53.1,33.9,51.2,35.1,50z"/>
							<path d="M53.9,37.7c1.8-3.1,2-6.4,1.8-9.9c0-0.7,0.1-1.2,0.6-1.7c1.2-1.3,1.9-2.8,1.7-4.6c-0.3-2.3-1.4-4.1-3.6-4.9
                          c-2.1-0.8-4.2-0.9-6,0.9c-1.7,1.6-2.5,3.5-2,5.8c0.5,2.3,2,3.8,4.2,4.4c0.6,0.2,1.1,0.4,1.3,1.1c0.8,3.2,1.1,6.5-0.2,9.6
                          c-1.1,2.7-3,4.8-5,6.8C49.6,43.2,52.1,40.8,53.9,37.7z M50,24.1C48.8,23,48.8,21,50,19.8c1.2-1.1,3.1-1.2,4.3,0
                          c1.2,1.2,1.2,3.1,0,4.3C53.1,25.3,51.2,25.3,50,24.1z"/>
						</svg>
					</th>
					<th class="matching__title">
						<span class="inline-block inline-block--middle uppercase">Passions</span>
						<svg xmlns="http://www.w3.org/2000/svg" class="icon icon--middle" width="24" height="24" viewBox="0 0 35 33" fill="currentColor">
							<path  d="M31.6,6.5l-1.3-1.3l0.4-0.4c0.1-0.1,0.3-0.3,0.4-0.4c0.3-0.3,0.5-0.5,0.7-0.8c1.2-1.5,0.5-2.3,0.3-2.5
                          c-0.7-0.7-1.7-0.6-2.6,0.1c-0.2,0.1-0.3,0.3-0.5,0.4c-5,5-10,10-14.9,15c-0.2,0.2-0.8,0.8-0.9,1l-0.7,0.7l-0.3-1.1
                          c0-0.3-0.4-1.2-0.6-1.4c-1.1-1.1-2.2-1.8-3.6-2c-1.5-0.2-2.9,0.2-4.3,1.2c-1.7,1.3-2.8,3.1-3.3,5.5c-0.1,0.5-0.1,0.9-0.2,1.4
                          c0,0.2-0.1,0.5-0.1,0.7c0,0.1,0,0.2-0.1,0.3l0,0v2.4l0.1,0.5c0,0.4,0.1,0.9,0.2,1.3c0.2,1.6,0.6,3.2,1.1,4.7c0,0,0,0,0,0
                          c1.8,0.6,3.6,1,5.5,1.1c2.2,0.2,4.1,0.1,5.9-0.3c2.5-0.6,4.3-1.8,5.5-3.7c1.5-2.5,1.1-5.5-1-7.5l-0.1-0.1
                          c-0.3-0.3-0.6-0.5-1.3-0.8L15,20.3l0.6-0.6c1.3-1.3,2.7-2.6,4-3.9c1.3-1.3,2.7-2.6,4-3.9l0.4-0.4l0.4,0.4c0.1,0.1,0.5,0.5,0.6,0.6
                          l1.2,1.2c0.7,0.7,1.3,1.3,2,2c0.5,0.5,1,0.7,1.6,0.5c0.6-0.2,1-0.6,1.1-1.2c0.1-0.5,0-1-0.5-1.5L30,12.9c-0.8-0.8-1.6-1.6-2.5-2.5
                          c-0.2-0.2-0.7-0.6-0.9-0.8l-0.4-0.4l1.9-1.9l3.7,3.7c0.2,0.2,0.4,0.4,0.6,0.6c0.3,0.3,0.7,0.4,1.1,0.4c0.7,0,1.2-0.4,1.5-1.2
                          c0,0,0-0.1,0-0.1v-0.6c-0.2-0.5-0.5-0.9-1-1.3C33.3,8.2,32.4,7.3,31.6,6.5z M15.4,24c1,1.2,0.9,2.5-0.1,3.7c-0.9,1-2,1.6-3.6,1.9
                          c-0.8,0.2-1.6,0.2-2.6,0.2l0,0c-0.8,0-1.7-0.1-2.7-0.2c-0.4-0.1-0.9-0.1-1.3-0.2c-0.2,0-0.4-0.1-0.7-0.1C4,29.3,3.7,29,3.6,28.6
                          c-0.4-2-0.6-3.8-0.5-5.4c0.1-1.8,0.4-3.1,1.1-4.3c0.4-0.7,0.9-1.2,1.6-1.6c0.9-0.6,2-0.5,2.9,0.1c1.2,0.9,1.8,2.2,1.9,3.8
                          c0,0.3,0,0.7,0.1,1l0,0c0.1,0,0.2,0,0.2,0c0.5,0,1.1,0.1,1.6,0.1C13.7,22.6,14.7,23.1,15.4,24z"/>
						</svg>
					</th>
					<th class="matching__title">
						<span class="inline-block inline-block--middle uppercase">Skills</span>
						<svg xmlns="http://www.w3.org/2000/svg" class="icon icon--middle" width="24" height="24" viewBox="0 0 31 31" fill="currentColor">
							<path d="M31,24.9c0,0.4,0,0.9,0,1.3c-0.1,0.3-0.1,0.6-0.2,1c-0.2,0.5-0.4,0.6-0.8,0.2c-0.9-0.8-1.7-1.7-2.5-2.5
                          c-0.4-0.4-0.7-0.4-1,0c-0.5,0.5-1,1-1.5,1.5c-0.4,0.4-0.4,0.6,0,1c0.8,0.9,1.7,1.7,2.5,2.5c0.4,0.4,0.3,0.7-0.2,0.8
                          c-0.9,0.3-1.7,0.3-2.6,0.2c-3.3-0.6-5.3-4.2-4-7.4c0.1-0.2,0.1-0.3-0.1-0.5c-1.5-1.5-3-3-4.5-4.4c-0.1-0.1-0.1-0.1-0.2-0.2
                          c-0.1,0.1-0.1,0.2-0.2,0.3c-3,3-6,6.1-9.1,9.1c-0.3,0.3-0.6,0.5-0.9,0.7c-1.7,0.8-3.4,1.7-5.2,2.5c-0.1,0.1-0.3,0-0.4,0
                          c0-0.1,0-0.2,0-0.3c0-0.1,0.1-0.1,0.1-0.2c0.8-1.6,1.5-3.2,2.3-4.8c0.2-0.5,0.5-0.9,0.9-1.2c3-3,6-6,9-9c0.1-0.1,0.2-0.1,0.4-0.2
                          c-1.7-1.7-3.3-3.2-4.9-4.8c-0.1-0.1-0.2-0.1-0.3,0c-0.7,0.3-1.3,0.4-2.1,0.4c-2.4,0.1-4.7-1.6-5.3-3.9C0.1,6.6,0.1,6.4,0,6.1
                          c0-0.4,0-0.9,0-1.3c0.1-0.3,0.1-0.6,0.2-0.9c0.2-0.6,0.4-0.7,0.9-0.2c0.8,0.8,1.7,1.7,2.5,2.5c0.4,0.4,0.7,0.4,1,0
                          c0.5-0.5,1-1,1.5-1.5c0.4-0.4,0.4-0.6,0-1C5.3,2.8,4.5,1.9,3.6,1.1C3.2,0.7,3.3,0.4,3.8,0.2c0.3-0.1,0.6-0.2,1-0.2
                          c0.4,0,0.8,0,1.3,0c0.1,0,0.1,0,0.2,0.1c3.4,0.5,5.5,4.2,4.2,7.4c-0.1,0.2-0.1,0.3,0.1,0.5c1.5,1.5,3,3,4.5,4.4
                          c0.1,0.1,0.1,0.1,0.2,0.2c3.1-3.1,6.2-6.2,9.3-9.3c1.1,1.1,2.2,2.2,3.3,3.3c-3.1,3.1-6.2,6.2-9.3,9.3c0,0,0,0.1,0,0.1
                          c1.5,1.5,3.1,3.1,4.6,4.6c0.1,0.1,0.2,0.1,0.4,0c3.1-1.3,6.6,0.5,7.4,3.9C30.9,24.6,31,24.7,31,24.9z"/>
							<path d="M31,3.1c-0.2,0.3-0.4,0.6-0.6,0.8c-0.6,0.6-1.2,1.2-1.8,1.8c-1.1-1.1-2.2-2.2-3.3-3.3
                          c0.2-0.2,0.5-0.5,0.7-0.7c0.4-0.4,0.7-0.7,1.1-1.1c0.2-0.2,0.5-0.4,0.7-0.6c0.2,0,0.4,0,0.7,0c1,0.7,1.8,1.5,2.5,2.5
                          C31,2.7,31,2.9,31,3.1z"/>
						</svg>
					</th>
					<th class="matching__title text-center">Note</th>
					<th class="matching__title text-center nowrap">UTC fit score</th>
					<th class="matching__title text-center">Add</th>
				</tr>
				</thead>
<!--                --><?php //if($opportunity_talents): ?>
                <?php if(false): ?>
                <?php foreach($opportunity_talents as $talent):
                        /** @var \common\models\User $user */
                        $user = $talent->user;
                        /** @var \common\models\UserProfile $profile */
                        $profile = $user->myprofile;
                ?>
					<tr class="user-match" v-show="initFilter(<?= $talent->filter ?>)">
						<td class="user-match__cell nowrap">
							<a class="user-match__ava bg-image js-modal" href="#user-profile" style="background-image: url('<?= $profile->image ?>');"></a>
							<p class="user-match__name"><?= "{$user->username} {$user->surname}" ?></p>
						</td>
						<td class="user-match__cell user-match__cell--third user-match__cell--third_left nowrap">
							<p class="user-match__mark user-match__mark--limited">Drivers</p>
							<div class="user-match__progress">
								<div class="progress">
									<div class="progress__bg">
										<div class="progress__bar" style="width: 90%;"></div>
									</div>
								</div>
							</div>
							<div class="user-match__progress-value"><?= $talent->drivers ?>%</div>
						</td>
						<td class="user-match__cell user-match__cell--third nowrap">
							<p class="user-match__mark user-match__mark--limited">Passions</p>
							<div class="user-match__progress">
								<div class="progress">
									<div class="progress__bg">
										<div class="progress__bar" style="width: 85%;"></div>
									</div>
								</div>
							</div>
							<div class="user-match__progress-value"><?= $talent->passions ?>%</div>
						</td>
						<td class="user-match__cell user-match__cell--third user-match__cell--third_right nowrap">
							<p class="user-match__mark user-match__mark--limited">Skills</p>
							<div class="user-match__progress">
								<div class="progress">
									<div class="progress__bg">
										<div class="progress__bar" style="width: 100%;"></div>
									</div>
								</div>
							</div>
							<div class="user-match__progress-value"><?= $talent->skills ?>%</div>
						</td>
						<td class="user-match__cell text-center">
							<p class="user-match__note"><?= $talent->note ?></p>
						</td>
						<td class="user-match__cell user-match__cell--halved text-center">
							<p class="user-match__mark">UTC fit score:</p>
							<p class="user-match__score"><?= $talent->utc_fit_score ?></p>
						</td>
                        <td v-show="!checkUserInShortlist(<?= $user->id ?>)" class="user-match__cell user-match__cell--halved text-center">
							<p class="user-match__mark">Add a talent</p>
							<a class="user-match__add js-modal" href="#add-talent" v-on:click="clickToAddButton(<?= $user->id ?>)"></a>
						</td>
						<td v-show="checkUserInShortlist(<?= $user->id ?>)" class="user-match__cell user-match__cell--check text-center">
							<span class="user-match__check"></span>
						</td>
					</tr>
                <?php endforeach; ?>
                <?php endif; ?>
                <?php if($matching_candidates): ?>
                    <?php //if(FALSE): ?>
                    <?php
                        /** @var \common\models\tnd\MatchingCandidate $matching_candidate */
	                    foreach ($matching_candidates as $matching_candidate):
		                    /** @var \common\models\User $user */
                            $user = $matching_candidate->user;
                    ?>
                        <?php if($user):
		                    /** @var \common\models\UserProfile $profile */
		                    $profile = $user->myprofile;
                        ?>
                            <tr class="user-match" >
                            <td class="user-match__cell nowrap">
                                <a class="user-match__ava bg-image js-modal" href="#user-profile" style="background-image: url('<?= $profile->image ?>');"></a>
                                <p class="user-match__name"><?= "{$user->username} {$user->surname}" ?></p>
                            </td>
                            <td class="user-match__cell user-match__cell--third user-match__cell--third_left nowrap">
                                <p class="user-match__mark user-match__mark--limited">Drivers</p>
                                <div class="user-match__progress">
                                    <div class="progress">
                                        <div class="progress__bg">
                                            <div class="progress__bar" style="width: <?php echo (int)$matching_candidate->driver_fit_score ?>%;"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="user-match__progress-value"><?php echo (int)$matching_candidate->driver_fit_score ?>%</div>
                            </td>
                            <td class="user-match__cell user-match__cell--third nowrap">
                                <p class="user-match__mark user-match__mark--limited">Passions</p>
                                <div class="user-match__progress">
                                    <div class="progress">
                                        <div class="progress__bg">
                                            <div class="progress__bar" style="width: <?php echo (int)$matching_candidate->passion_fit_score ?>%;"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="user-match__progress-value"><?php echo (int)$matching_candidate->passion_fit_score ?>%</div>
                            </td>
                            <td class="user-match__cell user-match__cell--third user-match__cell--third_right nowrap">
                                <p class="user-match__mark user-match__mark--limited">Skills</p>
                                <div class="user-match__progress">
                                    <div class="progress">
                                        <div class="progress__bg">
                                            <div class="progress__bar" style="width: <?php echo (int)$matching_candidate->skill_fit_score ?>%;"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="user-match__progress-value"><?php echo (int)$matching_candidate->skill_fit_score ?>%</div>
                            </td>
                            <td class="user-match__cell text-center">
                                <p class="user-match__note"><?php echo $profile->note ?></p>
                            </td>
                            <td class="user-match__cell user-match__cell--halved text-center">
                                <p class="user-match__mark">UTC fit score:</p>
                                <p class="user-match__score"><?php echo (int)$matching_candidate->utc_fit_score ?></p>
                            </td>
                            <td v-show="!checkUserInShortlist(<?= $user->id ?>)" class="user-match__cell user-match__cell--halved text-center">
                                <p class="user-match__mark">Add a talent</p>
                                <a class="user-match__add js-modal" href="#add-talent" v-on:click="clickToAddButton(<?= $user->id ?>)"></a>
                            </td>
                            <td v-show="checkUserInShortlist(<?= $user->id ?>)" class="user-match__cell user-match__cell--check text-center">
                                <span class="user-match__check"></span>
                            </td>
                        </tr>
                        <?php endif; ?>
                    <?php endforeach; ?>
                <?php endif; ?>
				</tbody>
			</table>
		</div>
		<div class="default-text matching__text">
			<p>
				You have now seen all the profiles that have been matched at this round with your Opportunity. If you want to see more Profiles, come back to this section shortly when we run the Matching Algorithm again (every 24 hours). Remember, if your Talent Need Definition changes, you can <a class="bold" href="#">edit</a> it in the same section.
			</p>
		</div>

		<div class="questionnaire__pagination pagination">
			<button class="button button--default button--yellow" type="button">
				<span class="button__text text-bright-cherry">1-10 of TOT</span>
			</button>
		</div>
		<div class="questionnaire__nav clearfix">
			<div class="questionnaire__nav-item questionnaire__nav-item--prev">
				<a class="button button--medium button--full-width button--lemon" href="#">
					<span class="button__text button__text--small">previous</span>
				</a>
			</div>
			<div class="questionnaire__nav-item questionnaire__nav-item--next">
				<a class="button button--medium button--full-width button--lemon" href="#">
					<span class="button__text button__text--small">next</span>
				</a>
			</div>
		</div>
	</section>
</div>

<div class="none">
	<div id="add-talent" class="modal modal--small">
		<div class="modal__header">
			<p class="modal__title text-center">Add a Talent</p>
		</div>
		<div class="modal__content">
			<div class="default-text text-center">
				<p>You can either save this profile as a potential team member and send an invitation later when you have made your shortlist.</p>
				<p>You can also send an invitation to join your team right away</p>
			</div>
			<div class="modal__buttons">
				<div class="modal__button">
					<a class="button button--medium button--yellow" v-on:click="addToShortlistClick">
						<span class="button__text">save</span>
					</a>
				</div>
				<div class="modal__button">
					<a class="button button--medium button--yellow js-modal"  href="#talent-added">
						<span class="button__text">invite</span>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="none">
	<div id="talent-added" class="modal modal--small">
		<div class="modal__header">
			<p class="modal__title text-center">Talent added</p>
		</div>
		<div class="modal__content">
			<div class="default-text text-center">
				<p>This person is now part of your potential team members section.</p>
				<p>You can check your shortlist or go on with your selection</p>
			</div>
			<div class="modal__buttons">
				<a class="button button--medium button--yellow js-modal" href="#">
					<span class="button__text">my team</span>
				</a>
			</div>
		</div>
	</div>
</div>
<div class="none">
	<div id="user-profile" class="modal user-modal">
		<div class="modal__header">
			<p class="modal__title">Name Surname</p>
		</div>
		<div class="modal__content">
			<div class="profile-m">
				<div class="profile-m__row">
					<div class="profile-m__col profile-m__col--small">
						<div class="profile-m__section">
							<p class="profile-m__title">Matching score</p>
							<div class="progress-section clearfix">
								<div class="left">
									<p class="progress-section__title">
										<svg xmlns="http://www.w3.org/2000/svg" class="icon icon--middle" width="24" height="24" viewBox="0 0 58 58" fill="currentColor">
											<path d="M36.5,4.1c-3.1-1.8-6.4-2-9.9-1.8c-0.7,0-1.2-0.1-1.7-0.6c-1.3-1.2-2.8-1.9-4.6-1.7c-2.3,0.3-4.1,1.4-4.9,3.6
                              c-0.8,2.1-0.9,4.2,0.9,6c1.6,1.7,3.5,2.5,5.8,2c2.3-0.5,3.8-2,4.4-4.2c0.2-0.6,0.4-1.1,1.1-1.3C30.8,5.3,34,5,37.2,6.3
                              c2.7,1.1,4.8,3,6.8,5C42,8.4,39.5,5.9,36.5,4.1z M22.9,8c-1.2,1.2-3.2,1.2-4.4-0.1c-1.1-1.2-1.2-3.1,0-4.3c1.2-1.2,3.1-1.2,4.3,0
                              C24.1,4.9,24.1,6.8,22.9,8z"/>
											<path d="M4.1,20.3c-1.8,3.1-2,6.4-1.8,9.9c0,0.7-0.1,1.2-0.6,1.7c-1.2,1.3-1.9,2.8-1.7,4.6c0.3,2.3,1.3,4.1,3.6,4.9
                              c2.1,0.8,4.2,0.9,6-0.9c1.7-1.6,2.5-3.5,2-5.8c-0.5-2.3-2-3.8-4.2-4.4c-0.6-0.2-1.1-0.4-1.3-1.1C5.3,26,5,22.7,6.3,19.5
                              c1.1-2.7,3-4.8,5-6.8C8.4,14.8,5.9,17.2,4.1,20.3z M8,33.9C9.2,35.1,9.2,37,8,38.2c-1.2,1.1-3.1,1.2-4.3,0c-1.2-1.2-1.2-3.1,0-4.3
                              C4.9,32.7,6.8,32.7,8,33.9z"/>
											<path d="M21.5,53.9c3.1,1.8,6.5,2,9.9,1.8c0.7,0,1.2,0.1,1.7,0.6c1.3,1.2,2.8,1.9,4.6,1.7c2.3-0.3,4.1-1.3,4.9-3.6
                              c0.8-2.1,0.9-4.2-0.9-6c-1.6-1.7-3.5-2.5-5.8-2c-2.3,0.5-3.8,2-4.4,4.2c-0.2,0.6-0.4,1.1-1.1,1.3c-3.2,0.8-6.5,1.1-9.6-0.2
                              c-2.7-1.1-4.8-3-6.8-5C16,49.6,18.5,52.1,21.5,53.9z M35.1,50c1.2-1.2,3.2-1.2,4.4,0.1c1.2,1.2,1.2,3.1,0,4.3
                              c-1.2,1.2-3.1,1.2-4.3,0C33.9,53.1,33.9,51.2,35.1,50z"/>
											<path d="M53.9,37.7c1.8-3.1,2-6.4,1.8-9.9c0-0.7,0.1-1.2,0.6-1.7c1.2-1.3,1.9-2.8,1.7-4.6c-0.3-2.3-1.4-4.1-3.6-4.9
                              c-2.1-0.8-4.2-0.9-6,0.9c-1.7,1.6-2.5,3.5-2,5.8c0.5,2.3,2,3.8,4.2,4.4c0.6,0.2,1.1,0.4,1.3,1.1c0.8,3.2,1.1,6.5-0.2,9.6
                              c-1.1,2.7-3,4.8-5,6.8C49.6,43.2,52.1,40.8,53.9,37.7z M50,24.1C48.8,23,48.8,21,50,19.8c1.2-1.1,3.1-1.2,4.3,0
                              c1.2,1.2,1.2,3.1,0,4.3C53.1,25.3,51.2,25.3,50,24.1z"/>
										</svg>
										<span class="inline-block inline-block--middle">Drivers</span>
									</p>
								</div>
								<div class="right">
									<p class="progress-section__percent">90%</p>
								</div>
								<div class="progress">
									<div class="progress__bg">
										<div class="progress__bar" style="width: 90%;"></div>
									</div>
								</div>
							</div>
							<div class="progress-section clearfix">
								<div class="left">
									<p class="progress-section__title">
										<svg xmlns="http://www.w3.org/2000/svg" class="icon icon--middle" width="21" height="19" viewBox="0 0 35 33" fill="currentColor">
											<path  d="M31.6,6.5l-1.3-1.3l0.4-0.4c0.1-0.1,0.3-0.3,0.4-0.4c0.3-0.3,0.5-0.5,0.7-0.8c1.2-1.5,0.5-2.3,0.3-2.5
                              c-0.7-0.7-1.7-0.6-2.6,0.1c-0.2,0.1-0.3,0.3-0.5,0.4c-5,5-10,10-14.9,15c-0.2,0.2-0.8,0.8-0.9,1l-0.7,0.7l-0.3-1.1
                              c0-0.3-0.4-1.2-0.6-1.4c-1.1-1.1-2.2-1.8-3.6-2c-1.5-0.2-2.9,0.2-4.3,1.2c-1.7,1.3-2.8,3.1-3.3,5.5c-0.1,0.5-0.1,0.9-0.2,1.4
                              c0,0.2-0.1,0.5-0.1,0.7c0,0.1,0,0.2-0.1,0.3l0,0v2.4l0.1,0.5c0,0.4,0.1,0.9,0.2,1.3c0.2,1.6,0.6,3.2,1.1,4.7c0,0,0,0,0,0
                              c1.8,0.6,3.6,1,5.5,1.1c2.2,0.2,4.1,0.1,5.9-0.3c2.5-0.6,4.3-1.8,5.5-3.7c1.5-2.5,1.1-5.5-1-7.5l-0.1-0.1
                              c-0.3-0.3-0.6-0.5-1.3-0.8L15,20.3l0.6-0.6c1.3-1.3,2.7-2.6,4-3.9c1.3-1.3,2.7-2.6,4-3.9l0.4-0.4l0.4,0.4c0.1,0.1,0.5,0.5,0.6,0.6
                              l1.2,1.2c0.7,0.7,1.3,1.3,2,2c0.5,0.5,1,0.7,1.6,0.5c0.6-0.2,1-0.6,1.1-1.2c0.1-0.5,0-1-0.5-1.5L30,12.9c-0.8-0.8-1.6-1.6-2.5-2.5
                              c-0.2-0.2-0.7-0.6-0.9-0.8l-0.4-0.4l1.9-1.9l3.7,3.7c0.2,0.2,0.4,0.4,0.6,0.6c0.3,0.3,0.7,0.4,1.1,0.4c0.7,0,1.2-0.4,1.5-1.2
                              c0,0,0-0.1,0-0.1v-0.6c-0.2-0.5-0.5-0.9-1-1.3C33.3,8.2,32.4,7.3,31.6,6.5z M15.4,24c1,1.2,0.9,2.5-0.1,3.7c-0.9,1-2,1.6-3.6,1.9
                              c-0.8,0.2-1.6,0.2-2.6,0.2l0,0c-0.8,0-1.7-0.1-2.7-0.2c-0.4-0.1-0.9-0.1-1.3-0.2c-0.2,0-0.4-0.1-0.7-0.1C4,29.3,3.7,29,3.6,28.6
                              c-0.4-2-0.6-3.8-0.5-5.4c0.1-1.8,0.4-3.1,1.1-4.3c0.4-0.7,0.9-1.2,1.6-1.6c0.9-0.6,2-0.5,2.9,0.1c1.2,0.9,1.8,2.2,1.9,3.8
                              c0,0.3,0,0.7,0.1,1l0,0c0.1,0,0.2,0,0.2,0c0.5,0,1.1,0.1,1.6,0.1C13.7,22.6,14.7,23.1,15.4,24z"/>
										</svg>
										<span class="inline-block inline-block--middle">Passions</span>
									</p>
								</div>
								<div class="right">
									<p class="progress-section__percent">70%</p>
								</div>
								<div class="progress">
									<div class="progress__bg">
										<div class="progress__bar" style="width: 70%;"></div>
									</div>
								</div>
							</div>
							<div class="progress-section clearfix">
								<div class="left">
									<p class="progress-section__title">
										<svg xmlns="http://www.w3.org/2000/svg" class="icon icon--middle" width="20" height="20" viewBox="0 0 31 31" fill="currentColor">
											<path d="M31,24.9c0,0.4,0,0.9,0,1.3c-0.1,0.3-0.1,0.6-0.2,1c-0.2,0.5-0.4,0.6-0.8,0.2c-0.9-0.8-1.7-1.7-2.5-2.5
                              c-0.4-0.4-0.7-0.4-1,0c-0.5,0.5-1,1-1.5,1.5c-0.4,0.4-0.4,0.6,0,1c0.8,0.9,1.7,1.7,2.5,2.5c0.4,0.4,0.3,0.7-0.2,0.8
                              c-0.9,0.3-1.7,0.3-2.6,0.2c-3.3-0.6-5.3-4.2-4-7.4c0.1-0.2,0.1-0.3-0.1-0.5c-1.5-1.5-3-3-4.5-4.4c-0.1-0.1-0.1-0.1-0.2-0.2
                              c-0.1,0.1-0.1,0.2-0.2,0.3c-3,3-6,6.1-9.1,9.1c-0.3,0.3-0.6,0.5-0.9,0.7c-1.7,0.8-3.4,1.7-5.2,2.5c-0.1,0.1-0.3,0-0.4,0
                              c0-0.1,0-0.2,0-0.3c0-0.1,0.1-0.1,0.1-0.2c0.8-1.6,1.5-3.2,2.3-4.8c0.2-0.5,0.5-0.9,0.9-1.2c3-3,6-6,9-9c0.1-0.1,0.2-0.1,0.4-0.2
                              c-1.7-1.7-3.3-3.2-4.9-4.8c-0.1-0.1-0.2-0.1-0.3,0c-0.7,0.3-1.3,0.4-2.1,0.4c-2.4,0.1-4.7-1.6-5.3-3.9C0.1,6.6,0.1,6.4,0,6.1
                              c0-0.4,0-0.9,0-1.3c0.1-0.3,0.1-0.6,0.2-0.9c0.2-0.6,0.4-0.7,0.9-0.2c0.8,0.8,1.7,1.7,2.5,2.5c0.4,0.4,0.7,0.4,1,0
                              c0.5-0.5,1-1,1.5-1.5c0.4-0.4,0.4-0.6,0-1C5.3,2.8,4.5,1.9,3.6,1.1C3.2,0.7,3.3,0.4,3.8,0.2c0.3-0.1,0.6-0.2,1-0.2
                              c0.4,0,0.8,0,1.3,0c0.1,0,0.1,0,0.2,0.1c3.4,0.5,5.5,4.2,4.2,7.4c-0.1,0.2-0.1,0.3,0.1,0.5c1.5,1.5,3,3,4.5,4.4
                              c0.1,0.1,0.1,0.1,0.2,0.2c3.1-3.1,6.2-6.2,9.3-9.3c1.1,1.1,2.2,2.2,3.3,3.3c-3.1,3.1-6.2,6.2-9.3,9.3c0,0,0,0.1,0,0.1
                              c1.5,1.5,3.1,3.1,4.6,4.6c0.1,0.1,0.2,0.1,0.4,0c3.1-1.3,6.6,0.5,7.4,3.9C30.9,24.6,31,24.7,31,24.9z"/>
											<path d="M31,3.1c-0.2,0.3-0.4,0.6-0.6,0.8c-0.6,0.6-1.2,1.2-1.8,1.8c-1.1-1.1-2.2-2.2-3.3-3.3
                              c0.2-0.2,0.5-0.5,0.7-0.7c0.4-0.4,0.7-0.7,1.1-1.1c0.2-0.2,0.5-0.4,0.7-0.6c0.2,0,0.4,0,0.7,0c1,0.7,1.8,1.5,2.5,2.5
                              C31,2.7,31,2.9,31,3.1z"/>
										</svg>
										<span class="inline-block inline-block--middle">Skills</span>
									</p>
								</div>
								<div class="right">
									<p class="progress-section__percent">100%</p>
								</div>
								<div class="progress">
									<div class="progress__bg">
										<div class="progress__bar" style="width: 100%;"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="profile-m__col profile-m__col--small">
						<div class="profile-m__section">
							<p class="profile-m__title">User's unique talent code</p>
							<p class="profile-m__subtitle">
								<svg xmlns="http://www.w3.org/2000/svg" class="icon icon--middle" width="24" height="24" viewBox="0 0 58 58" fill="currentColor">
									<path d="M36.5,4.1c-3.1-1.8-6.4-2-9.9-1.8c-0.7,0-1.2-0.1-1.7-0.6c-1.3-1.2-2.8-1.9-4.6-1.7c-2.3,0.3-4.1,1.4-4.9,3.6
                          c-0.8,2.1-0.9,4.2,0.9,6c1.6,1.7,3.5,2.5,5.8,2c2.3-0.5,3.8-2,4.4-4.2c0.2-0.6,0.4-1.1,1.1-1.3C30.8,5.3,34,5,37.2,6.3
                          c2.7,1.1,4.8,3,6.8,5C42,8.4,39.5,5.9,36.5,4.1z M22.9,8c-1.2,1.2-3.2,1.2-4.4-0.1c-1.1-1.2-1.2-3.1,0-4.3c1.2-1.2,3.1-1.2,4.3,0
                          C24.1,4.9,24.1,6.8,22.9,8z"/>
									<path d="M4.1,20.3c-1.8,3.1-2,6.4-1.8,9.9c0,0.7-0.1,1.2-0.6,1.7c-1.2,1.3-1.9,2.8-1.7,4.6c0.3,2.3,1.3,4.1,3.6,4.9
                          c2.1,0.8,4.2,0.9,6-0.9c1.7-1.6,2.5-3.5,2-5.8c-0.5-2.3-2-3.8-4.2-4.4c-0.6-0.2-1.1-0.4-1.3-1.1C5.3,26,5,22.7,6.3,19.5
                          c1.1-2.7,3-4.8,5-6.8C8.4,14.8,5.9,17.2,4.1,20.3z M8,33.9C9.2,35.1,9.2,37,8,38.2c-1.2,1.1-3.1,1.2-4.3,0c-1.2-1.2-1.2-3.1,0-4.3
                          C4.9,32.7,6.8,32.7,8,33.9z"/>
									<path d="M21.5,53.9c3.1,1.8,6.5,2,9.9,1.8c0.7,0,1.2,0.1,1.7,0.6c1.3,1.2,2.8,1.9,4.6,1.7c2.3-0.3,4.1-1.3,4.9-3.6
                          c0.8-2.1,0.9-4.2-0.9-6c-1.6-1.7-3.5-2.5-5.8-2c-2.3,0.5-3.8,2-4.4,4.2c-0.2,0.6-0.4,1.1-1.1,1.3c-3.2,0.8-6.5,1.1-9.6-0.2
                          c-2.7-1.1-4.8-3-6.8-5C16,49.6,18.5,52.1,21.5,53.9z M35.1,50c1.2-1.2,3.2-1.2,4.4,0.1c1.2,1.2,1.2,3.1,0,4.3
                          c-1.2,1.2-3.1,1.2-4.3,0C33.9,53.1,33.9,51.2,35.1,50z"/>
									<path d="M53.9,37.7c1.8-3.1,2-6.4,1.8-9.9c0-0.7,0.1-1.2,0.6-1.7c1.2-1.3,1.9-2.8,1.7-4.6c-0.3-2.3-1.4-4.1-3.6-4.9
                          c-2.1-0.8-4.2-0.9-6,0.9c-1.7,1.6-2.5,3.5-2,5.8c0.5,2.3,2,3.8,4.2,4.4c0.6,0.2,1.1,0.4,1.3,1.1c0.8,3.2,1.1,6.5-0.2,9.6
                          c-1.1,2.7-3,4.8-5,6.8C49.6,43.2,52.1,40.8,53.9,37.7z M50,24.1C48.8,23,48.8,21,50,19.8c1.2-1.1,3.1-1.2,4.3,0
                          c1.2,1.2,1.2,3.1,0,4.3C53.1,25.3,51.2,25.3,50,24.1z"/>
								</svg>
								<span class="inline-block inline-block--middle">Drivers</span>
							</p>
							<div class="profile-m__avatar avatar">
								<div class="avatar__inner">
									<div class="avatar__image bg-image" style="background-image: url();"></div>
									<span class="avatar__circles avatar__circles--dark avatar__circles--1"></span>
									<span class="avatar__circles avatar__circles--dark avatar__circles--2"></span>
									<span class="avatar__element avatar__element--position_top">
                          <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 99 99">
                            <circle fill-rule="evenodd" clip-rule="evenodd" fill="#facc76" cx="49.5" cy="49.5" r="49.5"/>
                            <path fill="#FFFFFF" d="M77.5,46.8c-0.1-0.6-0.3-1.2-0.4-1.8c-0.3-1.3-0.5-2.7-1-4c-3.9-11-11.7-17.5-23.2-19.3
                              c-0.2,0-0.3-0.1-0.5-0.1c-0.1,0-0.2-0.1-0.3-0.1l-5.3,0l-0.1,0c-0.5,0.1-0.9,0.2-1.4,0.3c-1,0.2-2,0.4-2.9,0.6
                              c-11.2,2.8-19.6,12.4-20.9,24c-1.6,15.2,8.8,28.8,23.8,31c0.3,0.1,0.7,0.1,1,0.2l0.5,0.1l5.1,0l0.1,0c0.4-0.1,0.8-0.2,1.2-0.2
                              c0.9-0.2,1.8-0.3,2.7-0.6c11.6-2.9,19.7-12.1,21.2-24c0-0.1,0-0.2,0.1-0.2c0-0.1,0.1-0.1,0.1-0.2l0-0.1v-5.3L77.5,46.8z
                               M44.7,69.1c-0.2-1.1-0.7-2-1.1-3c-0.2-0.4-0.4-0.7-0.5-1.1c-0.5-1-0.4-2.3,0.3-3.3c0.7-1.1,1.9-1.7,3.3-1.6
                              c0.2,0,0.5,0.2,0.8,0.4c0.2,0.2,0.4,0.3,0.6,0.5c0.8,0.6,1.5,1.2,2.1,1.9c2.3,2.6,5.4,4.3,9.7,5.4c1.4,0.3,2.8,0.7,4.2,1l0.6,0.1
                              c-3,2.8-9.9,5.1-15.7,5.1c-1.6,0-3-0.2-4.1-0.6c0-0.4,0-0.8,0-1.1C44.8,71.7,44.9,70.4,44.7,69.1z M53.4,62
                              c-0.9-0.8-1.8-1.6-2.7-2.4c-0.5-0.4-0.9-0.8-1.4-1.3c-1.4-1.3-3.2-1.6-4.9-0.8c-1.5,0.7-2.7,1.5-3.6,2.4c-1.6,1.7-1.9,3.7-0.9,5.8
                              c0.5,1,0.9,1.9,1.4,2.9c0.7,1.4,0.8,3,0.4,4.7c-4.6-0.6-12.8-7.6-14.6-12.4c0.1,0,0.3,0,0.4-0.1c0.9-0.1,1.8-0.3,2.7-0.5
                              c1.6-0.4,2.9-0.9,4.1-1.4c1.6-0.7,1.8-1.8,1.6-3.2l-0.1-0.3c-0.1-0.4-0.2-0.9-0.2-1.3c-0.1-1.4,0.4-1.9,1.8-2.1
                              c0.4,0,0.7,0,1.1-0.1c0.7,0,1.4,0,2.2-0.2c1.1-0.3,2.1-1,2.8-1.7c1.3-1.5,2.5-3.2,3.6-4.8l0.3-0.4c1.1-1.6,1-3.6-0.2-4.9
                              c-1.8-1.8-3.7-3.3-5.4-4.6c-0.2-0.2-0.5-0.3-0.9-0.3c-0.5,0-1,0.1-1.4,0.4c-0.8,0.5-1.4,1.1-2.1,1.8c-0.3,0.3-0.5,0.4-0.9,0.4h0
                              c-0.1,0-0.2,0-0.4-0.1c-2.3-0.6-4.5-1.5-6.9-3.1c3.4-4.5,7.7-7.6,13-9.2c2.7-0.8,5.5-1.2,8.5-1c0.3,0,0.4,0.1,0.4,0.1
                              c0,0,0,0.1,0,0.3c-0.1,2.5,0.7,4.8,2.4,6.8c0.9,1,1.8,2,2.6,2.9l0.3,0.4c1.1,1.1,2.5,1.6,4.1,1.5c0.3,0,0.6,0,1-0.1
                              c0.4,0,0.7,0,1.1-0.1c0.2,0,0.3,0,0.3,0c0,0.1,0,0.2-0.1,0.3c-0.2,0.4-0.3,0.9-0.5,1.3c-0.4,1.3-0.9,2.4-1.5,3.4
                              c-1.3,1.9-1.7,3.9-1.1,6c0.5,2.2,1.1,4.2,1.9,6.2c0.6,1.7,2,2.6,4,2.6l0.2,0c0.6,0,1.1,0,1.7-0.1c0.6,0,1.2-0.1,1.9-0.1
                              c1.5,0,3,1.3,3.3,2.7c0,0.2,0,0.4-0.1,0.7c-1.1,2.7-2.7,5.1-4.7,7.2c-0.2,0.2-0.5,0.3-0.8,0.3c-4.2-0.5-7.8-1.5-11.2-3
                              c-0.7-0.3-1.3-0.8-1.9-1.4C53.8,62.3,53.6,62.1,53.4,62z M34.8,40.5c2.2,0.7,3.9,0.2,5.1-1.3c0.2-0.2,0.5-0.5,0.8-0.7
                              c0.1,0,0.1-0.1,0.2-0.1c0.3,0.3,0.6,0.5,0.9,0.8C42.9,40,44,41,45,42c0.4,0.4,0.3,0.9,0,1.4c-0.4,0.5-0.8,1.1-1.2,1.6
                              c-0.8,1.1-1.6,2.2-2.5,3.2c-0.3,0.4-1,0.6-1.6,0.8l-0.3,0.1c-0.2,0.1-0.5,0-0.8,0c-0.2,0-0.3,0-0.5,0c-1.9,0-3.4,0.6-4.3,1.7
                              c-0.9,1.1-1.2,2.7-0.9,4.5c0.1,0.5,0.2,1,0.1,1.1c-0.1,0.1-0.7,0.3-1,0.4c-1.4,0.4-2.9,0.7-4.4,1L26.3,58c-0.1,0-0.2,0-0.2,0
                              c-0.1,0-0.2,0-0.3-0.3c-2.3-7.1-1.7-13.9,1.8-20.5l1.2,0.6c1.4,0.7,2.8,1.4,4.2,2c0.5,0.2,0.9,0.3,1.4,0.5L34.8,40.5z M67.8,53
                              c-0.8,0.1-1.4,0.2-1.9,0.2c-1.3,0-1.5-0.3-2.5-3.2c-0.4-1.3-0.7-2.7-0.8-4.2c0-0.7,0.2-1.5,0.6-2.2c1.2-2.2,2.4-4.5,2.8-7.2
                              c0.1-1,0-1.7-0.4-2.2c-0.5-0.6-1.4-0.8-2-0.9c-0.5,0-1,0-1.5,0c-0.5,0-1,0.1-1.4,0c-0.9-0.1-1.5-0.3-1.8-0.6
                              c-1.3-1.3-2.5-2.7-3.8-4.4c-0.6-0.8-0.9-1.9-0.8-3.3c6.4,0.9,12.3,4.7,16.1,10.6c3.9,5.9,5.2,12.9,3.6,19.3c-1.3-1.3-2.9-2-4.9-2
                              C68.6,52.9,68.2,52.9,67.8,53z"/>
                            <path fill="#FFFFFF" d="M51.5,50.3l-0.1,0c-1.9,0-3.3,1.4-3.4,3.3c0,1.8,1.4,3.4,3.1,3.5l0.1,0c1.7,0,3.4-1.7,3.4-3.5
                              C54.6,51.7,53.3,50.4,51.5,50.3z M51.5,53.5c0,0,0.1,0.1,0.1,0.1c-0.1,0.1-0.3,0.2-0.4,0.3c0,0-0.1-0.1-0.1-0.1
                                C51.2,53.6,51.3,53.5,51.5,53.5z M51.2,56.5C51.2,56.5,51.2,56.5,51.2,56.5L51.2,56.5L51.2,56.5z"/>
                          </svg>
                        </span>
									<span class="avatar__element avatar__element--active avatar__element--position_right">
                          <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 99 99">
                            <circle fill-rule="evenodd" clip-rule="evenodd" fill="#facc76" cx="49.5" cy="49.5" r="49.5"/>
                            <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M74.3,50c-1-5.2-2.8-10.2-5.7-14.8c-1.3-2-3-3.6-4.7-5.5c0.2,1.6,0.4,3,0.5,4.4c0.2,2.1,0.2,4.3-0.6,6.3
                              c-0.8,2-2.3,3-4,2.9c-1.4-0.1-2.6-0.9-3.4-2c-1.5-1.9-1.9-4.1-1.6-6.4c0.2-1.6,0.6-3.1,0.9-4.7c0.3-1.8,0.6-3.7,0.3-5.6
                              c-0.7-3.5-4.3-7.1-8.1-7.9c0.2,1.1,0.5,2.2,0.7,3.3c0.6,2.8-0.1,5.1-2.7,6.8c-0.8,0.5-1.6,1.1-2.4,1.7c-4.1,3-6.3,7.1-6.1,12.2
                              c0.1,1.6,0.4,3.1,0.6,4.7c0.3,2,0.1,3.9-1.5,5.3c-0.8,0.7-1.6,0.8-2.4,0.2c-0.4-0.3-0.7-0.6-1-0.9c-1.5-2-2-4.4-1.8-6.8
                              c0.1-1.7,0.4-3.4,0.6-5.3c-0.4,0.5-0.7,0.9-1,1.3c-1.8,2.4-3.7,4.7-4.9,7.6c-2,5.1-2.1,10.4-0.8,15.7c1.5,6,4.5,11.2,9.4,15
                              c5.4,4.2,11.6,5.6,18.3,4.8c7-0.8,12.7-4.1,16.8-9.8C74.2,65.6,75.9,58.1,74.3,50z M72.3,56.1c-0.3,8.5-3.7,15.6-11,20.4
                              c-4.1,2.7-8.8,3.5-13.7,3.2c-5.8-0.4-10.7-2.8-14.5-7.1c-3.4-3.8-5.4-8.3-6.1-13.4c-0.6-3.9-0.3-7.8,1.2-11.6
                              c0.1-0.3,0.3-0.7,0.4-1c0-0.1,0.1-0.1,0.2-0.2c0.2,0.7,0.3,1.3,0.6,1.9c0.6,1.7,1.5,3.3,2.9,4.4c1.8,1.4,4,1.3,5.8-0.2
                              c2.2-1.9,2.8-4.3,2.4-7.1c-0.3-1.7-0.6-3.4-0.6-5.1c-0.1-4,1.6-7.2,4.8-9.6c1.1-0.9,2.3-1.6,3.5-2.4c2.1-1.5,3.3-3.5,3.2-6.1
                              c0-0.1,0-0.2,0-0.4c1.2,1.2,1.8,2.5,2,4.1c0.2,2.2-0.3,4.3-0.8,6.4c-0.6,3-0.7,5.9,0.7,8.8c1.3,2.6,3.2,4.4,6.3,4.8
                              c2.2,0.3,4-0.6,5.4-2.3c1.3-1.5,1.8-3.4,2.1-5.3c0-0.2,0-0.3,0.1-0.5c0.1,0,0.2-0.1,0.3-0.1c0.8,1.7,1.6,3.4,2.3,5.1
                              C71.2,47,72.5,51.5,72.3,56.1z"/>
                            <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M61.2,56c-1.9-2.3-4-4.4-5.9-6.7c-1.3-1.5-2.6-3.1-3.7-4.8c-1.5-2.4-2.2-5.1-2.1-7.9c0-0.9,0-1.7,0-2.8
                              c-1.1,1-2.1,1.9-3,2.8c-3.1,3.1-4.1,6.9-2.9,11.1c0.7,2.5,1.9,4.9,2.8,7.4c0.6,1.5,1.2,3,1.6,4.6c0.6,2.7-1.4,4.8-4,4.4
                              c-1.1-0.2-2.1-0.6-3-1.1c-1.7-1-2.7-2.7-3.4-4.5c-0.4-1-0.7-2.1-1.1-3.2c-0.5,1.1-1.1,2.2-1.5,3.2c-2.7,6.2-0.9,12.7,4.7,16.5
                              c4.3,2.9,9.1,3.6,14.1,2.5c4.5-1,8-3.5,10.1-7.7c1.3-2.6,1.5-5.2,0.5-8C63.6,59.6,62.6,57.7,61.2,56z M61.5,68.6
                              c-1.8,3.5-4.7,5.5-8.5,6.3c-4.5,0.9-8.7,0.3-12.4-2.5c-3.4-2.6-4.8-6-4.2-10.5c0.3,0.4,0.5,0.6,0.7,0.9c2,2.5,4.5,3.9,7.8,3.7
                                c3.6-0.2,6.2-3.5,5.6-7.1c-0.4-2.5-1.5-4.7-2.5-6.9c-1-2.3-2-4.5-2.3-7c-0.2-2.1,0.1-4,1.3-5.8c0.3,1.1,0.6,2.2,1,3.3
                                c1.1,3.1,3.2,5.5,5.3,7.9c2,2.2,4.1,4.3,5.9,6.7c1.1,1.4,1.8,3.1,2.5,4.7C62.8,64.5,62.5,66.6,61.5,68.6z"/>
                          </svg>
                        </span>
									<span class="avatar__element avatar__element--position_bottom">
                          <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 99 99">
                            <circle fill-rule="evenodd" clip-rule="evenodd" fill="#facc76" cx="49.5" cy="49.5" r="49.5"/>
                            <path fill="#FFFFFF" d="M73.9,36.5c-2.7-0.6-5,0.1-6.8,2c-2.1,2.2-2.1,5.9-0.1,7.9c0.7,0.7,1.7,0.7,2.4,0.1c0.8-0.6,0.9-1.6,0.3-2.5
                              c-0.5-0.8-0.7-1.6-0.4-2.3c0.2-0.7,0.8-1.3,1.7-1.6c1.4-0.5,2.7-0.2,3.8,0.7c1.1,1,1.5,2.4,1.2,3.9c-0.5,2.1-2.6,3.6-5,3.6l-4.6,0
                              l-13.7,0c-6.2,0-12.3,0-18.5,0c-0.9,0-1.5,0.4-1.8,1.1c-0.2,0.6-0.2,1.2,0.2,1.6c0.4,0.5,1,0.8,1.8,0.8c2.9,0,5.9,0,8.8,0l9.6,0
                              l8.8,0c3,0,6.1,0,9.1,0c0.9,0,1.7-0.1,2.5-0.3c2.3-0.5,4.3-2,5.5-3.9c1.1-1.9,1.4-4.1,0.8-6.1C78.6,38.9,76.7,37.2,73.9,36.5z"/>
                            <path fill="#FFFFFF" d="M58.7,57.7c-1.9,0-3.9-0.1-6.3-0.1c-1.6,0-3.2,0-4.9,0c-1.6,0-3.3,0-4.9,0h-0.5v0l-6.7,0c-2.8,0-5.6,0-8.5,0
                              c-0.6,0-1.1,0.1-1.5,0.4c-0.7,0.4-0.8,1.2-0.6,1.9c0.2,0.8,0.9,1.3,1.8,1.3c0.8,0,1.6,0,2.3,0l28.6,0c1.9,0,3.4,0.6,4.4,1.9
                              c1,1.2,1.2,2.6,0.7,4c-0.5,1.3-1.5,2.1-2.9,2.3c-1.1,0.2-2.2-0.3-2.8-1.1c-0.4-0.5-0.5-1.2-0.4-1.8c0.1-0.5,0.1-1.1-0.2-1.6
                              c-0.2-0.3-0.5-0.7-1.2-0.8c-0.1,0-0.3,0-0.4,0c-0.9,0-1.6,0.7-1.8,1.8c-0.4,2.5,0.4,4.5,2.5,5.9c2.2,1.5,4.6,1.6,7.1,0.4
                              c2.5-1.3,3.8-3.4,4-6.2c0.1-2-0.7-4.1-2.2-5.7C62.9,58.7,60.8,57.8,58.7,57.7z"/>
                            <path fill="#FFFFFF" d="M41.1,42.8c1.9,0,3.9,0,5.8,0c1,0,2-0.2,2.9-0.4c4.3-1.3,6.9-5.3,6.2-9.6c-0.6-3.8-4.1-6.8-8-6.8
                              c-0.5,0-1.1,0.1-1.6,0.2c-3.2,0.7-5.2,2.6-5.9,5.6c-0.2,0.7-0.2,1.5-0.1,2.4c0.1,0.9,0.9,1.5,1.9,1.3c0.9-0.1,1.6-0.8,1.5-1.8
                              c0-1.4,0.4-2.5,1.4-3.3c1.4-1,3.5-1.1,5-0.1c1.6,1,2.4,2.9,2,4.7c-0.6,2.5-2.8,4.2-5.4,4.2l-10.2,0c-5.1,0-10.2,0-15.4,0
                              c-0.4,0-0.9,0.1-1.2,0.2c-0.7,0.3-1.1,1.1-0.9,2c0.2,0.8,0.9,1.4,1.9,1.4c2.1,0,4.1,0,6.2,0l6.9,0L41.1,42.8z"/>
                          </svg>
                        </span>
									<span class="avatar__element avatar__element--position_left">
                          <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 99 99">
                            <circle fill-rule="evenodd" clip-rule="evenodd" fill="#facc76" cx="49.5" cy="49.5" r="49.5"/>
                            <path fill="#FFFFFF" d="M65.4,50.9c-1.4-2.5-3.1-4.8-4.8-7.1c-0.4-0.6-0.9-1.2-1.3-1.9l-0.3-0.4C57,38.8,55,36,53.4,32.9
                              c-0.8-1.5-1.8-3.6-2.2-5.9c-0.2-1.2-0.3-2.3-0.4-3.5c0-0.4-0.1-0.9-0.1-1.3c0-0.1,0-0.2,0-0.2c-2.9,2.8-5.1,5.2-6.9,7.5
                              c-2,2.7-3.8,5.5-5.3,8.2c-2.2,3.9-4,7.5-5.3,11.1c-0.9,2.4-1.5,4.5-1.9,6.7c-0.5,2.6-0.4,5.2,0.3,7.8c1,3.7,3,6.9,6,9.4
                              c2.6,2.2,5.6,3.5,8.8,4c0.4,0.1,0.9,0.1,1.3,0.2l0.5,0.1h2c0.1,0,0.2-0.1,0.3-0.1c2.4-0.2,4.6-0.8,6.7-1.8c2.5-1.2,4.7-3,6.5-5.2
                              c1.2-1.5,2.1-3.1,2.7-4.9c0.8-2.1,1.2-4.4,1.1-6.6C67.8,55.6,66.6,53.1,65.4,50.9z M64.5,61.7c-0.5,2.7-1.7,5-3.5,7.1
                              c-2.7,3-5.9,4.7-9.8,5.1c-0.6,0.1-1.2,0.1-1.8,0.1l0,0c-3.4,0-6.5-1.1-9.2-3.1c-2.5-1.9-4.3-4.4-5.3-7.5c-0.8-2.5-0.9-5.2-0.4-8
                              c1-4.5,2.8-8.5,4.2-11.5c1.9-3.8,4-7.4,6.4-10.9c0.4-0.6,0.9-1.2,1.3-1.8l0.4-0.5c0.1-0.1,0.2-0.2,0.3-0.3l1.2-1.4l0.8,2
                              c0.1,0.3,0.2,0.6,0.3,0.8c1.1,2.7,2.6,5.3,4.7,8.4c1.1,1.6,2.2,3.1,3.3,4.7c1.1,1.5,2.2,3.1,3.3,4.6c1.5,2.2,2.6,4.2,3.4,6.2
                              C64.9,57.3,65,59.3,64.5,61.7z"/>
                            <path fill="#FFFFFF" d="M42.5,61.3c-1.2-2.8-1.1-5.7-0.9-8.6c0.1-1.2,0.3-2.4,0.4-3.7c-2.2,2.3-3.4,5-3.6,8.2
                              c-0.2,3.1,0.8,5.8,2.7,8.1c1.6,1.9,3.6,3.3,6.2,3.7c0.8,0.1,1.6,0.2,2.5,0c-0.5-0.3-0.9-0.5-1.2-0.7
                              C45.8,66.7,43.8,64.3,42.5,61.3z"/>
                          </svg>
                        </span>
								</div>
							</div>
						</div>
					</div>
					<div class="profile-m__col profile-m__col--untitled">
						<div class="profile-m__section profile-m__section--small">
							<p class="profile-m__subtitle">
								<svg xmlns="http://www.w3.org/2000/svg" class="icon icon--middle" width="20" height="20" viewBox="0 0 31 31" fill="currentColor">
									<path d="M31,24.9c0,0.4,0,0.9,0,1.3c-0.1,0.3-0.1,0.6-0.2,1c-0.2,0.5-0.4,0.6-0.8,0.2c-0.9-0.8-1.7-1.7-2.5-2.5
                          c-0.4-0.4-0.7-0.4-1,0c-0.5,0.5-1,1-1.5,1.5c-0.4,0.4-0.4,0.6,0,1c0.8,0.9,1.7,1.7,2.5,2.5c0.4,0.4,0.3,0.7-0.2,0.8
                          c-0.9,0.3-1.7,0.3-2.6,0.2c-3.3-0.6-5.3-4.2-4-7.4c0.1-0.2,0.1-0.3-0.1-0.5c-1.5-1.5-3-3-4.5-4.4c-0.1-0.1-0.1-0.1-0.2-0.2
                          c-0.1,0.1-0.1,0.2-0.2,0.3c-3,3-6,6.1-9.1,9.1c-0.3,0.3-0.6,0.5-0.9,0.7c-1.7,0.8-3.4,1.7-5.2,2.5c-0.1,0.1-0.3,0-0.4,0
                          c0-0.1,0-0.2,0-0.3c0-0.1,0.1-0.1,0.1-0.2c0.8-1.6,1.5-3.2,2.3-4.8c0.2-0.5,0.5-0.9,0.9-1.2c3-3,6-6,9-9c0.1-0.1,0.2-0.1,0.4-0.2
                          c-1.7-1.7-3.3-3.2-4.9-4.8c-0.1-0.1-0.2-0.1-0.3,0c-0.7,0.3-1.3,0.4-2.1,0.4c-2.4,0.1-4.7-1.6-5.3-3.9C0.1,6.6,0.1,6.4,0,6.1
                          c0-0.4,0-0.9,0-1.3c0.1-0.3,0.1-0.6,0.2-0.9c0.2-0.6,0.4-0.7,0.9-0.2c0.8,0.8,1.7,1.7,2.5,2.5c0.4,0.4,0.7,0.4,1,0
                          c0.5-0.5,1-1,1.5-1.5c0.4-0.4,0.4-0.6,0-1C5.3,2.8,4.5,1.9,3.6,1.1C3.2,0.7,3.3,0.4,3.8,0.2c0.3-0.1,0.6-0.2,1-0.2
                          c0.4,0,0.8,0,1.3,0c0.1,0,0.1,0,0.2,0.1c3.4,0.5,5.5,4.2,4.2,7.4c-0.1,0.2-0.1,0.3,0.1,0.5c1.5,1.5,3,3,4.5,4.4
                          c0.1,0.1,0.1,0.1,0.2,0.2c3.1-3.1,6.2-6.2,9.3-9.3c1.1,1.1,2.2,2.2,3.3,3.3c-3.1,3.1-6.2,6.2-9.3,9.3c0,0,0,0.1,0,0.1
                          c1.5,1.5,3.1,3.1,4.6,4.6c0.1,0.1,0.2,0.1,0.4,0c3.1-1.3,6.6,0.5,7.4,3.9C30.9,24.6,31,24.7,31,24.9z"/>
									<path d="M31,3.1c-0.2,0.3-0.4,0.6-0.6,0.8c-0.6,0.6-1.2,1.2-1.8,1.8c-1.1-1.1-2.2-2.2-3.3-3.3
                          c0.2-0.2,0.5-0.5,0.7-0.7c0.4-0.4,0.7-0.7,1.1-1.1c0.2-0.2,0.5-0.4,0.7-0.6c0.2,0,0.4,0,0.7,0c1,0.7,1.8,1.5,2.5,2.5
                          C31,2.7,31,2.9,31,3.1z"/>
								</svg>
								<span class="inline-block inline-block--middle">Skills</span>
							</p>
							<table class="skills skills--dark">
								<tbody class="skills__body">
								<tr class="skills__row">
									<td class="skills__cell skills__cell--name">enabling competences</td>
									<td class="skills__cell skills__cell--value">
										<a href="#">unlock</a>
									</td>
									<td class="skills__cell skills__cell--value">
										<a href="#">unlock</a>
									</td>
								</tr>
								<tr class="skills__row">
									<td class="skills__cell skills__cell--name">professional competences</td>
									<td class="skills__cell skills__cell--value">
										<a href="#">unlock</a>
									</td>
									<td class="skills__cell skills__cell--value">
										<a href="#">unlock</a>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
						<div class="profile-m__section profile-m__section--small">
							<p class="profile-m__subtitle">
								<svg xmlns="http://www.w3.org/2000/svg" class="icon icon--middle" width="21" height="19" viewBox="0 0 35 33" fill="currentColor">
									<path d="M31.6,6.5l-1.3-1.3l0.4-0.4c0.1-0.1,0.3-0.3,0.4-0.4c0.3-0.3,0.5-0.5,0.7-0.8c1.2-1.5,0.5-2.3,0.3-2.5
                          c-0.7-0.7-1.7-0.6-2.6,0.1c-0.2,0.1-0.3,0.3-0.5,0.4c-5,5-10,10-14.9,15c-0.2,0.2-0.8,0.8-0.9,1l-0.7,0.7l-0.3-1.1
                          c0-0.3-0.4-1.2-0.6-1.4c-1.1-1.1-2.2-1.8-3.6-2c-1.5-0.2-2.9,0.2-4.3,1.2c-1.7,1.3-2.8,3.1-3.3,5.5c-0.1,0.5-0.1,0.9-0.2,1.4
                          c0,0.2-0.1,0.5-0.1,0.7c0,0.1,0,0.2-0.1,0.3l0,0v2.4l0.1,0.5c0,0.4,0.1,0.9,0.2,1.3c0.2,1.6,0.6,3.2,1.1,4.7c0,0,0,0,0,0
                          c1.8,0.6,3.6,1,5.5,1.1c2.2,0.2,4.1,0.1,5.9-0.3c2.5-0.6,4.3-1.8,5.5-3.7c1.5-2.5,1.1-5.5-1-7.5l-0.1-0.1
                          c-0.3-0.3-0.6-0.5-1.3-0.8L15,20.3l0.6-0.6c1.3-1.3,2.7-2.6,4-3.9c1.3-1.3,2.7-2.6,4-3.9l0.4-0.4l0.4,0.4c0.1,0.1,0.5,0.5,0.6,0.6
                          l1.2,1.2c0.7,0.7,1.3,1.3,2,2c0.5,0.5,1,0.7,1.6,0.5c0.6-0.2,1-0.6,1.1-1.2c0.1-0.5,0-1-0.5-1.5L30,12.9c-0.8-0.8-1.6-1.6-2.5-2.5
                          c-0.2-0.2-0.7-0.6-0.9-0.8l-0.4-0.4l1.9-1.9l3.7,3.7c0.2,0.2,0.4,0.4,0.6,0.6c0.3,0.3,0.7,0.4,1.1,0.4c0.7,0,1.2-0.4,1.5-1.2
                          c0,0,0-0.1,0-0.1v-0.6c-0.2-0.5-0.5-0.9-1-1.3C33.3,8.2,32.4,7.3,31.6,6.5z M15.4,24c1,1.2,0.9,2.5-0.1,3.7c-0.9,1-2,1.6-3.6,1.9
                          c-0.8,0.2-1.6,0.2-2.6,0.2l0,0c-0.8,0-1.7-0.1-2.7-0.2c-0.4-0.1-0.9-0.1-1.3-0.2c-0.2,0-0.4-0.1-0.7-0.1C4,29.3,3.7,29,3.6,28.6
                          c-0.4-2-0.6-3.8-0.5-5.4c0.1-1.8,0.4-3.1,1.1-4.3c0.4-0.7,0.9-1.2,1.6-1.6c0.9-0.6,2-0.5,2.9,0.1c1.2,0.9,1.8,2.2,1.9,3.8
                          c0,0.3,0,0.7,0.1,1l0,0c0.1,0,0.2,0,0.2,0c0.5,0,1.1,0.1,1.6,0.1C13.7,22.6,14.7,23.1,15.4,24z"/>
								</svg>
								<span class="inline-block inline-block--middle">Passions</span>
							</p>
							<div class="profile-m__passions passions">
								<div class="passions__inner">
									<a class="passions__item passions__item--dark passions__item--position_top-left" href="#">unlock</a>
									<a class="passions__item passions__item--dark passions__item--position_top-right" href="#">unlock</a>
									<a class="passions__item passions__item--dark passions__item--position_bottom-right" href="#">unlock</a>
									<a class="passions__item passions__item--dark passions__item--position_bottom-left" href="#">unlock</a>
									<button class="passions__icon" type="button">
										<svg xmlns="http://www.w3.org/2000/svg" class="icon icon--middle" width="16" height="19" viewBox="0 0 74 92" fill="currentColor">
											<path class="st0" d="M46.4,38.3c-0.3-0.2-0.5-0.3-0.8-0.4c-5.7-2.5-12.5-1.3-17.1,3c-1,0.9-2,1.9-2.9,2.9c-7,7-14,14-21,21
                              c-4,4.1-5.5,9-4.2,14.6c1.3,6,5.1,10,10.9,11.7c5.9,1.7,11.3,0.4,15.7-4c7.8-7.7,15.5-15.5,23.3-23.2c3.5-3.5,5.2-7.7,4.8-12.7
                              c-0.1-2-0.7-3.9-1.6-5.8c-1.7,1.7-3.3,3.3-4.9,4.9c-0.2,0.2-0.2,0.5-0.2,0.8c0.4,3-0.5,5.7-2.6,7.9C38,66.8,30,74.7,22.1,82.6
                              c-2.3,2.3-5.2,3.1-8.4,2.5c-3.5-0.7-5.8-2.9-6.8-6.3c-1-3.5-0.2-6.6,2.3-9.2c7.8-7.9,15.7-15.8,23.6-23.6c2.2-2.2,4.9-3,7.9-2.7
                              c0.2,0,0.6,0,0.7-0.1C43.1,41.6,44.7,39.9,46.4,38.3z"/>
											<path fill-rule="evenodd" clip-rule="evenodd" d="M60.2,0.2c0.6,0.2,1.3,0.3,1.9,0.5c11.7,3.1,15.9,17.5,7.5,26.2C61.6,35,53.6,43,45.5,50.9
                              c-4.8,4.7-10.6,5.5-16.8,3.2c-0.3-0.1-0.6-0.3-1.1-0.5c1.6-1.6,3.2-3.2,4.7-4.7c0.2-0.2,0.6-0.2,0.8-0.1c3.2,0.4,5.8-0.7,8.1-3
                              c7.7-7.8,15.5-15.5,23.2-23.3c3.8-3.8,3.8-9.7,0-13.3c-3.5-3.3-9-3.4-12.6,0c-1.2,1.1-2.2,2.2-3.4,3.3
                              C41.7,19.5,34.9,26.2,28.1,33c-2.3,2.3-3.2,5-2.8,8.1c0,0.2,0,0.6-0.2,0.7c-1.5,1.6-3.1,3.1-4.7,4.7c-1-2-1.6-4.1-1.7-6.2
                              c-0.2-4.7,1.4-8.7,4.7-12.1c7.8-7.9,15.7-15.7,23.6-23.6c2.4-2.3,5.2-3.8,8.5-4.3c0.2,0,0.3-0.1,0.5-0.2
                              C57.4,0.2,58.8,0.2,60.2,0.2z"/>
											<path fill-rule="evenodd" clip-rule="evenodd" d="M46.4,38.3c-1.7,1.7-3.3,3.3-4.9,4.9c-0.1,0.1-0.5,0.1-0.7,0.1c-3.1-0.3-5.7,0.5-7.9,2.7
                              c-7.9,7.9-15.8,15.7-23.6,23.6c-2.5,2.6-3.3,5.7-2.3,9.2c1,3.4,3.3,5.5,6.8,6.3c3.2,0.7,6.1-0.2,8.4-2.5
                              c8-7.9,15.9-15.8,23.8-23.7c2.2-2.2,3-4.8,2.6-7.9c0-0.3,0-0.6,0.2-0.8c1.6-1.6,3.2-3.2,4.9-4.9c1,1.9,1.5,3.8,1.6,5.8
                              c0.3,5-1.3,9.2-4.8,12.7C42.5,71.5,34.8,79.3,27,87c-4.4,4.4-9.8,5.7-15.7,4c-5.8-1.7-9.6-5.7-10.9-11.7
                              c-1.2-5.6,0.2-10.5,4.2-14.6c7-7,14-14,21-21c1-1,1.9-2,2.9-2.9c4.5-4.3,11.3-5.5,17.1-3C45.9,38,46.1,38.1,46.4,38.3z"/>
										</svg>
									</button>
									<span class="passions__diagonals"></span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<p class="profile-m__message">
					If you accept this request to join you will be invited to contact this person, start to get to know each other, and verify the reciprocal terms of engagement in your Opportunity.
					Request successfully accepted, the user is now part of your Team!
				</p>
			</div>
		</div>
	</div>
</div>
<!-- Matching user profile modal -->
<div class="none">
	<div id="matching-user-profile" class="modal user-modal">
		<div class="modal__header">
			<p class="modal__title">Matching user profile</p>
		</div>
		<div class="modal__content">
			<div class="profile-m">
				<div class="profile-m__row">
					<div class="profile-m__col profile-m__col--small">
						<div class="profile-m__section">
							<p class="profile-m__title">User info</p>
							<p class="profile-m__name">Name Surname</p>
							<a class="profile-m__email" href="mailto:emmarossi@gmail.com">emmarossi@gmail.com</a>
						</div>
						<div class="profile-m__section">
							<p class="profile-m__title">Matching score</p>
							<div class="progress-section clearfix">
								<div class="left">
									<p class="progress-section__title">
										<svg xmlns="http://www.w3.org/2000/svg" class="icon icon--middle" width="24" height="24" viewBox="0 0 58 58" fill="currentColor">
											<path d="M36.5,4.1c-3.1-1.8-6.4-2-9.9-1.8c-0.7,0-1.2-0.1-1.7-0.6c-1.3-1.2-2.8-1.9-4.6-1.7c-2.3,0.3-4.1,1.4-4.9,3.6
                              c-0.8,2.1-0.9,4.2,0.9,6c1.6,1.7,3.5,2.5,5.8,2c2.3-0.5,3.8-2,4.4-4.2c0.2-0.6,0.4-1.1,1.1-1.3C30.8,5.3,34,5,37.2,6.3
                              c2.7,1.1,4.8,3,6.8,5C42,8.4,39.5,5.9,36.5,4.1z M22.9,8c-1.2,1.2-3.2,1.2-4.4-0.1c-1.1-1.2-1.2-3.1,0-4.3c1.2-1.2,3.1-1.2,4.3,0
                              C24.1,4.9,24.1,6.8,22.9,8z"/>
											<path d="M4.1,20.3c-1.8,3.1-2,6.4-1.8,9.9c0,0.7-0.1,1.2-0.6,1.7c-1.2,1.3-1.9,2.8-1.7,4.6c0.3,2.3,1.3,4.1,3.6,4.9
                              c2.1,0.8,4.2,0.9,6-0.9c1.7-1.6,2.5-3.5,2-5.8c-0.5-2.3-2-3.8-4.2-4.4c-0.6-0.2-1.1-0.4-1.3-1.1C5.3,26,5,22.7,6.3,19.5
                              c1.1-2.7,3-4.8,5-6.8C8.4,14.8,5.9,17.2,4.1,20.3z M8,33.9C9.2,35.1,9.2,37,8,38.2c-1.2,1.1-3.1,1.2-4.3,0c-1.2-1.2-1.2-3.1,0-4.3
                              C4.9,32.7,6.8,32.7,8,33.9z"/>
											<path d="M21.5,53.9c3.1,1.8,6.5,2,9.9,1.8c0.7,0,1.2,0.1,1.7,0.6c1.3,1.2,2.8,1.9,4.6,1.7c2.3-0.3,4.1-1.3,4.9-3.6
                              c0.8-2.1,0.9-4.2-0.9-6c-1.6-1.7-3.5-2.5-5.8-2c-2.3,0.5-3.8,2-4.4,4.2c-0.2,0.6-0.4,1.1-1.1,1.3c-3.2,0.8-6.5,1.1-9.6-0.2
                              c-2.7-1.1-4.8-3-6.8-5C16,49.6,18.5,52.1,21.5,53.9z M35.1,50c1.2-1.2,3.2-1.2,4.4,0.1c1.2,1.2,1.2,3.1,0,4.3
                              c-1.2,1.2-3.1,1.2-4.3,0C33.9,53.1,33.9,51.2,35.1,50z"/>
											<path d="M53.9,37.7c1.8-3.1,2-6.4,1.8-9.9c0-0.7,0.1-1.2,0.6-1.7c1.2-1.3,1.9-2.8,1.7-4.6c-0.3-2.3-1.4-4.1-3.6-4.9
                              c-2.1-0.8-4.2-0.9-6,0.9c-1.7,1.6-2.5,3.5-2,5.8c0.5,2.3,2,3.8,4.2,4.4c0.6,0.2,1.1,0.4,1.3,1.1c0.8,3.2,1.1,6.5-0.2,9.6
                              c-1.1,2.7-3,4.8-5,6.8C49.6,43.2,52.1,40.8,53.9,37.7z M50,24.1C48.8,23,48.8,21,50,19.8c1.2-1.1,3.1-1.2,4.3,0
                              c1.2,1.2,1.2,3.1,0,4.3C53.1,25.3,51.2,25.3,50,24.1z"/>
										</svg>
										<span class="inline-block inline-block--middle">Drivers</span>
									</p>
								</div>
								<div class="right">
									<p class="progress-section__percent">90%</p>
								</div>
								<div class="progress">
									<div class="progress__bg">
										<div class="progress__bar" style="width: 90%;"></div>
									</div>
								</div>
							</div>
							<div class="progress-section clearfix">
								<div class="left">
									<p class="progress-section__title">
										<svg xmlns="http://www.w3.org/2000/svg" class="icon icon--middle" width="21" height="19" viewBox="0 0 35 33" fill="currentColor">
											<path  d="M31.6,6.5l-1.3-1.3l0.4-0.4c0.1-0.1,0.3-0.3,0.4-0.4c0.3-0.3,0.5-0.5,0.7-0.8c1.2-1.5,0.5-2.3,0.3-2.5
                              c-0.7-0.7-1.7-0.6-2.6,0.1c-0.2,0.1-0.3,0.3-0.5,0.4c-5,5-10,10-14.9,15c-0.2,0.2-0.8,0.8-0.9,1l-0.7,0.7l-0.3-1.1
                              c0-0.3-0.4-1.2-0.6-1.4c-1.1-1.1-2.2-1.8-3.6-2c-1.5-0.2-2.9,0.2-4.3,1.2c-1.7,1.3-2.8,3.1-3.3,5.5c-0.1,0.5-0.1,0.9-0.2,1.4
                              c0,0.2-0.1,0.5-0.1,0.7c0,0.1,0,0.2-0.1,0.3l0,0v2.4l0.1,0.5c0,0.4,0.1,0.9,0.2,1.3c0.2,1.6,0.6,3.2,1.1,4.7c0,0,0,0,0,0
                              c1.8,0.6,3.6,1,5.5,1.1c2.2,0.2,4.1,0.1,5.9-0.3c2.5-0.6,4.3-1.8,5.5-3.7c1.5-2.5,1.1-5.5-1-7.5l-0.1-0.1
                              c-0.3-0.3-0.6-0.5-1.3-0.8L15,20.3l0.6-0.6c1.3-1.3,2.7-2.6,4-3.9c1.3-1.3,2.7-2.6,4-3.9l0.4-0.4l0.4,0.4c0.1,0.1,0.5,0.5,0.6,0.6
                              l1.2,1.2c0.7,0.7,1.3,1.3,2,2c0.5,0.5,1,0.7,1.6,0.5c0.6-0.2,1-0.6,1.1-1.2c0.1-0.5,0-1-0.5-1.5L30,12.9c-0.8-0.8-1.6-1.6-2.5-2.5
                              c-0.2-0.2-0.7-0.6-0.9-0.8l-0.4-0.4l1.9-1.9l3.7,3.7c0.2,0.2,0.4,0.4,0.6,0.6c0.3,0.3,0.7,0.4,1.1,0.4c0.7,0,1.2-0.4,1.5-1.2
                              c0,0,0-0.1,0-0.1v-0.6c-0.2-0.5-0.5-0.9-1-1.3C33.3,8.2,32.4,7.3,31.6,6.5z M15.4,24c1,1.2,0.9,2.5-0.1,3.7c-0.9,1-2,1.6-3.6,1.9
                              c-0.8,0.2-1.6,0.2-2.6,0.2l0,0c-0.8,0-1.7-0.1-2.7-0.2c-0.4-0.1-0.9-0.1-1.3-0.2c-0.2,0-0.4-0.1-0.7-0.1C4,29.3,3.7,29,3.6,28.6
                              c-0.4-2-0.6-3.8-0.5-5.4c0.1-1.8,0.4-3.1,1.1-4.3c0.4-0.7,0.9-1.2,1.6-1.6c0.9-0.6,2-0.5,2.9,0.1c1.2,0.9,1.8,2.2,1.9,3.8
                              c0,0.3,0,0.7,0.1,1l0,0c0.1,0,0.2,0,0.2,0c0.5,0,1.1,0.1,1.6,0.1C13.7,22.6,14.7,23.1,15.4,24z"/>
										</svg>
										<span class="inline-block inline-block--middle">Passions</span>
									</p>
								</div>
								<div class="right">
									<p class="progress-section__percent">70%</p>
								</div>
								<div class="progress">
									<div class="progress__bg">
										<div class="progress__bar" style="width: 70%;"></div>
									</div>
								</div>
							</div>
							<div class="progress-section clearfix">
								<div class="left">
									<p class="progress-section__title">
										<svg xmlns="http://www.w3.org/2000/svg" class="icon icon--middle" width="20" height="20" viewBox="0 0 31 31" fill="currentColor">
											<path d="M31,24.9c0,0.4,0,0.9,0,1.3c-0.1,0.3-0.1,0.6-0.2,1c-0.2,0.5-0.4,0.6-0.8,0.2c-0.9-0.8-1.7-1.7-2.5-2.5
                              c-0.4-0.4-0.7-0.4-1,0c-0.5,0.5-1,1-1.5,1.5c-0.4,0.4-0.4,0.6,0,1c0.8,0.9,1.7,1.7,2.5,2.5c0.4,0.4,0.3,0.7-0.2,0.8
                              c-0.9,0.3-1.7,0.3-2.6,0.2c-3.3-0.6-5.3-4.2-4-7.4c0.1-0.2,0.1-0.3-0.1-0.5c-1.5-1.5-3-3-4.5-4.4c-0.1-0.1-0.1-0.1-0.2-0.2
                              c-0.1,0.1-0.1,0.2-0.2,0.3c-3,3-6,6.1-9.1,9.1c-0.3,0.3-0.6,0.5-0.9,0.7c-1.7,0.8-3.4,1.7-5.2,2.5c-0.1,0.1-0.3,0-0.4,0
                              c0-0.1,0-0.2,0-0.3c0-0.1,0.1-0.1,0.1-0.2c0.8-1.6,1.5-3.2,2.3-4.8c0.2-0.5,0.5-0.9,0.9-1.2c3-3,6-6,9-9c0.1-0.1,0.2-0.1,0.4-0.2
                              c-1.7-1.7-3.3-3.2-4.9-4.8c-0.1-0.1-0.2-0.1-0.3,0c-0.7,0.3-1.3,0.4-2.1,0.4c-2.4,0.1-4.7-1.6-5.3-3.9C0.1,6.6,0.1,6.4,0,6.1
                              c0-0.4,0-0.9,0-1.3c0.1-0.3,0.1-0.6,0.2-0.9c0.2-0.6,0.4-0.7,0.9-0.2c0.8,0.8,1.7,1.7,2.5,2.5c0.4,0.4,0.7,0.4,1,0
                              c0.5-0.5,1-1,1.5-1.5c0.4-0.4,0.4-0.6,0-1C5.3,2.8,4.5,1.9,3.6,1.1C3.2,0.7,3.3,0.4,3.8,0.2c0.3-0.1,0.6-0.2,1-0.2
                              c0.4,0,0.8,0,1.3,0c0.1,0,0.1,0,0.2,0.1c3.4,0.5,5.5,4.2,4.2,7.4c-0.1,0.2-0.1,0.3,0.1,0.5c1.5,1.5,3,3,4.5,4.4
                              c0.1,0.1,0.1,0.1,0.2,0.2c3.1-3.1,6.2-6.2,9.3-9.3c1.1,1.1,2.2,2.2,3.3,3.3c-3.1,3.1-6.2,6.2-9.3,9.3c0,0,0,0.1,0,0.1
                              c1.5,1.5,3.1,3.1,4.6,4.6c0.1,0.1,0.2,0.1,0.4,0c3.1-1.3,6.6,0.5,7.4,3.9C30.9,24.6,31,24.7,31,24.9z"/>
											<path d="M31,3.1c-0.2,0.3-0.4,0.6-0.6,0.8c-0.6,0.6-1.2,1.2-1.8,1.8c-1.1-1.1-2.2-2.2-3.3-3.3
                              c0.2-0.2,0.5-0.5,0.7-0.7c0.4-0.4,0.7-0.7,1.1-1.1c0.2-0.2,0.5-0.4,0.7-0.6c0.2,0,0.4,0,0.7,0c1,0.7,1.8,1.5,2.5,2.5
                              C31,2.7,31,2.9,31,3.1z"/>
										</svg>
										<span class="inline-block inline-block--middle">Skills</span>
									</p>
								</div>
								<div class="right">
									<p class="progress-section__percent">100%</p>
								</div>
								<div class="progress">
									<div class="progress__bg">
										<div class="progress__bar" style="width: 100%;"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="profile-m__col profile-m__col--small">
						<div class="profile-m__section">
							<p class="profile-m__title">User's unique talent code</p>
							<p class="profile-m__subtitle">
								<svg xmlns="http://www.w3.org/2000/svg" class="icon icon--middle" width="24" height="24" viewBox="0 0 58 58" fill="currentColor">
									<path d="M36.5,4.1c-3.1-1.8-6.4-2-9.9-1.8c-0.7,0-1.2-0.1-1.7-0.6c-1.3-1.2-2.8-1.9-4.6-1.7c-2.3,0.3-4.1,1.4-4.9,3.6
                          c-0.8,2.1-0.9,4.2,0.9,6c1.6,1.7,3.5,2.5,5.8,2c2.3-0.5,3.8-2,4.4-4.2c0.2-0.6,0.4-1.1,1.1-1.3C30.8,5.3,34,5,37.2,6.3
                          c2.7,1.1,4.8,3,6.8,5C42,8.4,39.5,5.9,36.5,4.1z M22.9,8c-1.2,1.2-3.2,1.2-4.4-0.1c-1.1-1.2-1.2-3.1,0-4.3c1.2-1.2,3.1-1.2,4.3,0
                          C24.1,4.9,24.1,6.8,22.9,8z"/>
									<path d="M4.1,20.3c-1.8,3.1-2,6.4-1.8,9.9c0,0.7-0.1,1.2-0.6,1.7c-1.2,1.3-1.9,2.8-1.7,4.6c0.3,2.3,1.3,4.1,3.6,4.9
                          c2.1,0.8,4.2,0.9,6-0.9c1.7-1.6,2.5-3.5,2-5.8c-0.5-2.3-2-3.8-4.2-4.4c-0.6-0.2-1.1-0.4-1.3-1.1C5.3,26,5,22.7,6.3,19.5
                          c1.1-2.7,3-4.8,5-6.8C8.4,14.8,5.9,17.2,4.1,20.3z M8,33.9C9.2,35.1,9.2,37,8,38.2c-1.2,1.1-3.1,1.2-4.3,0c-1.2-1.2-1.2-3.1,0-4.3
                          C4.9,32.7,6.8,32.7,8,33.9z"/>
									<path d="M21.5,53.9c3.1,1.8,6.5,2,9.9,1.8c0.7,0,1.2,0.1,1.7,0.6c1.3,1.2,2.8,1.9,4.6,1.7c2.3-0.3,4.1-1.3,4.9-3.6
                          c0.8-2.1,0.9-4.2-0.9-6c-1.6-1.7-3.5-2.5-5.8-2c-2.3,0.5-3.8,2-4.4,4.2c-0.2,0.6-0.4,1.1-1.1,1.3c-3.2,0.8-6.5,1.1-9.6-0.2
                          c-2.7-1.1-4.8-3-6.8-5C16,49.6,18.5,52.1,21.5,53.9z M35.1,50c1.2-1.2,3.2-1.2,4.4,0.1c1.2,1.2,1.2,3.1,0,4.3
                          c-1.2,1.2-3.1,1.2-4.3,0C33.9,53.1,33.9,51.2,35.1,50z"/>
									<path d="M53.9,37.7c1.8-3.1,2-6.4,1.8-9.9c0-0.7,0.1-1.2,0.6-1.7c1.2-1.3,1.9-2.8,1.7-4.6c-0.3-2.3-1.4-4.1-3.6-4.9
                          c-2.1-0.8-4.2-0.9-6,0.9c-1.7,1.6-2.5,3.5-2,5.8c0.5,2.3,2,3.8,4.2,4.4c0.6,0.2,1.1,0.4,1.3,1.1c0.8,3.2,1.1,6.5-0.2,9.6
                          c-1.1,2.7-3,4.8-5,6.8C49.6,43.2,52.1,40.8,53.9,37.7z M50,24.1C48.8,23,48.8,21,50,19.8c1.2-1.1,3.1-1.2,4.3,0
                          c1.2,1.2,1.2,3.1,0,4.3C53.1,25.3,51.2,25.3,50,24.1z"/>
								</svg>
								<span class="inline-block inline-block--middle">Drivers</span>
							</p>
							<div class="profile-m__avatar avatar">
								<div class="avatar__inner">
									<div class="avatar__image bg-image" style="background-image: url();"></div>
									<span class="avatar__circles avatar__circles--dark avatar__circles--1"></span>
									<span class="avatar__circles avatar__circles--dark avatar__circles--2"></span>
									<span class="avatar__element avatar__element--position_top">
                          <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 99 99">
                            <circle fill-rule="evenodd" clip-rule="evenodd" fill="#facc76" cx="49.5" cy="49.5" r="49.5"/>
                            <path fill="#FFFFFF" d="M77.5,46.8c-0.1-0.6-0.3-1.2-0.4-1.8c-0.3-1.3-0.5-2.7-1-4c-3.9-11-11.7-17.5-23.2-19.3
                              c-0.2,0-0.3-0.1-0.5-0.1c-0.1,0-0.2-0.1-0.3-0.1l-5.3,0l-0.1,0c-0.5,0.1-0.9,0.2-1.4,0.3c-1,0.2-2,0.4-2.9,0.6
                              c-11.2,2.8-19.6,12.4-20.9,24c-1.6,15.2,8.8,28.8,23.8,31c0.3,0.1,0.7,0.1,1,0.2l0.5,0.1l5.1,0l0.1,0c0.4-0.1,0.8-0.2,1.2-0.2
                              c0.9-0.2,1.8-0.3,2.7-0.6c11.6-2.9,19.7-12.1,21.2-24c0-0.1,0-0.2,0.1-0.2c0-0.1,0.1-0.1,0.1-0.2l0-0.1v-5.3L77.5,46.8z
                               M44.7,69.1c-0.2-1.1-0.7-2-1.1-3c-0.2-0.4-0.4-0.7-0.5-1.1c-0.5-1-0.4-2.3,0.3-3.3c0.7-1.1,1.9-1.7,3.3-1.6
                              c0.2,0,0.5,0.2,0.8,0.4c0.2,0.2,0.4,0.3,0.6,0.5c0.8,0.6,1.5,1.2,2.1,1.9c2.3,2.6,5.4,4.3,9.7,5.4c1.4,0.3,2.8,0.7,4.2,1l0.6,0.1
                              c-3,2.8-9.9,5.1-15.7,5.1c-1.6,0-3-0.2-4.1-0.6c0-0.4,0-0.8,0-1.1C44.8,71.7,44.9,70.4,44.7,69.1z M53.4,62
                              c-0.9-0.8-1.8-1.6-2.7-2.4c-0.5-0.4-0.9-0.8-1.4-1.3c-1.4-1.3-3.2-1.6-4.9-0.8c-1.5,0.7-2.7,1.5-3.6,2.4c-1.6,1.7-1.9,3.7-0.9,5.8
                              c0.5,1,0.9,1.9,1.4,2.9c0.7,1.4,0.8,3,0.4,4.7c-4.6-0.6-12.8-7.6-14.6-12.4c0.1,0,0.3,0,0.4-0.1c0.9-0.1,1.8-0.3,2.7-0.5
                              c1.6-0.4,2.9-0.9,4.1-1.4c1.6-0.7,1.8-1.8,1.6-3.2l-0.1-0.3c-0.1-0.4-0.2-0.9-0.2-1.3c-0.1-1.4,0.4-1.9,1.8-2.1
                              c0.4,0,0.7,0,1.1-0.1c0.7,0,1.4,0,2.2-0.2c1.1-0.3,2.1-1,2.8-1.7c1.3-1.5,2.5-3.2,3.6-4.8l0.3-0.4c1.1-1.6,1-3.6-0.2-4.9
                              c-1.8-1.8-3.7-3.3-5.4-4.6c-0.2-0.2-0.5-0.3-0.9-0.3c-0.5,0-1,0.1-1.4,0.4c-0.8,0.5-1.4,1.1-2.1,1.8c-0.3,0.3-0.5,0.4-0.9,0.4h0
                              c-0.1,0-0.2,0-0.4-0.1c-2.3-0.6-4.5-1.5-6.9-3.1c3.4-4.5,7.7-7.6,13-9.2c2.7-0.8,5.5-1.2,8.5-1c0.3,0,0.4,0.1,0.4,0.1
                              c0,0,0,0.1,0,0.3c-0.1,2.5,0.7,4.8,2.4,6.8c0.9,1,1.8,2,2.6,2.9l0.3,0.4c1.1,1.1,2.5,1.6,4.1,1.5c0.3,0,0.6,0,1-0.1
                              c0.4,0,0.7,0,1.1-0.1c0.2,0,0.3,0,0.3,0c0,0.1,0,0.2-0.1,0.3c-0.2,0.4-0.3,0.9-0.5,1.3c-0.4,1.3-0.9,2.4-1.5,3.4
                              c-1.3,1.9-1.7,3.9-1.1,6c0.5,2.2,1.1,4.2,1.9,6.2c0.6,1.7,2,2.6,4,2.6l0.2,0c0.6,0,1.1,0,1.7-0.1c0.6,0,1.2-0.1,1.9-0.1
                              c1.5,0,3,1.3,3.3,2.7c0,0.2,0,0.4-0.1,0.7c-1.1,2.7-2.7,5.1-4.7,7.2c-0.2,0.2-0.5,0.3-0.8,0.3c-4.2-0.5-7.8-1.5-11.2-3
                              c-0.7-0.3-1.3-0.8-1.9-1.4C53.8,62.3,53.6,62.1,53.4,62z M34.8,40.5c2.2,0.7,3.9,0.2,5.1-1.3c0.2-0.2,0.5-0.5,0.8-0.7
                              c0.1,0,0.1-0.1,0.2-0.1c0.3,0.3,0.6,0.5,0.9,0.8C42.9,40,44,41,45,42c0.4,0.4,0.3,0.9,0,1.4c-0.4,0.5-0.8,1.1-1.2,1.6
                              c-0.8,1.1-1.6,2.2-2.5,3.2c-0.3,0.4-1,0.6-1.6,0.8l-0.3,0.1c-0.2,0.1-0.5,0-0.8,0c-0.2,0-0.3,0-0.5,0c-1.9,0-3.4,0.6-4.3,1.7
                              c-0.9,1.1-1.2,2.7-0.9,4.5c0.1,0.5,0.2,1,0.1,1.1c-0.1,0.1-0.7,0.3-1,0.4c-1.4,0.4-2.9,0.7-4.4,1L26.3,58c-0.1,0-0.2,0-0.2,0
                              c-0.1,0-0.2,0-0.3-0.3c-2.3-7.1-1.7-13.9,1.8-20.5l1.2,0.6c1.4,0.7,2.8,1.4,4.2,2c0.5,0.2,0.9,0.3,1.4,0.5L34.8,40.5z M67.8,53
                              c-0.8,0.1-1.4,0.2-1.9,0.2c-1.3,0-1.5-0.3-2.5-3.2c-0.4-1.3-0.7-2.7-0.8-4.2c0-0.7,0.2-1.5,0.6-2.2c1.2-2.2,2.4-4.5,2.8-7.2
                              c0.1-1,0-1.7-0.4-2.2c-0.5-0.6-1.4-0.8-2-0.9c-0.5,0-1,0-1.5,0c-0.5,0-1,0.1-1.4,0c-0.9-0.1-1.5-0.3-1.8-0.6
                              c-1.3-1.3-2.5-2.7-3.8-4.4c-0.6-0.8-0.9-1.9-0.8-3.3c6.4,0.9,12.3,4.7,16.1,10.6c3.9,5.9,5.2,12.9,3.6,19.3c-1.3-1.3-2.9-2-4.9-2
                              C68.6,52.9,68.2,52.9,67.8,53z"/>
                            <path fill="#FFFFFF" d="M51.5,50.3l-0.1,0c-1.9,0-3.3,1.4-3.4,3.3c0,1.8,1.4,3.4,3.1,3.5l0.1,0c1.7,0,3.4-1.7,3.4-3.5
                              C54.6,51.7,53.3,50.4,51.5,50.3z M51.5,53.5c0,0,0.1,0.1,0.1,0.1c-0.1,0.1-0.3,0.2-0.4,0.3c0,0-0.1-0.1-0.1-0.1
                                C51.2,53.6,51.3,53.5,51.5,53.5z M51.2,56.5C51.2,56.5,51.2,56.5,51.2,56.5L51.2,56.5L51.2,56.5z"/>
                          </svg>
                        </span>
									<span class="avatar__element avatar__element--active avatar__element--position_right">
                          <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 99 99">
                            <circle fill-rule="evenodd" clip-rule="evenodd" fill="#facc76" cx="49.5" cy="49.5" r="49.5"/>
                            <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M74.3,50c-1-5.2-2.8-10.2-5.7-14.8c-1.3-2-3-3.6-4.7-5.5c0.2,1.6,0.4,3,0.5,4.4c0.2,2.1,0.2,4.3-0.6,6.3
                              c-0.8,2-2.3,3-4,2.9c-1.4-0.1-2.6-0.9-3.4-2c-1.5-1.9-1.9-4.1-1.6-6.4c0.2-1.6,0.6-3.1,0.9-4.7c0.3-1.8,0.6-3.7,0.3-5.6
                              c-0.7-3.5-4.3-7.1-8.1-7.9c0.2,1.1,0.5,2.2,0.7,3.3c0.6,2.8-0.1,5.1-2.7,6.8c-0.8,0.5-1.6,1.1-2.4,1.7c-4.1,3-6.3,7.1-6.1,12.2
                              c0.1,1.6,0.4,3.1,0.6,4.7c0.3,2,0.1,3.9-1.5,5.3c-0.8,0.7-1.6,0.8-2.4,0.2c-0.4-0.3-0.7-0.6-1-0.9c-1.5-2-2-4.4-1.8-6.8
                              c0.1-1.7,0.4-3.4,0.6-5.3c-0.4,0.5-0.7,0.9-1,1.3c-1.8,2.4-3.7,4.7-4.9,7.6c-2,5.1-2.1,10.4-0.8,15.7c1.5,6,4.5,11.2,9.4,15
                              c5.4,4.2,11.6,5.6,18.3,4.8c7-0.8,12.7-4.1,16.8-9.8C74.2,65.6,75.9,58.1,74.3,50z M72.3,56.1c-0.3,8.5-3.7,15.6-11,20.4
                              c-4.1,2.7-8.8,3.5-13.7,3.2c-5.8-0.4-10.7-2.8-14.5-7.1c-3.4-3.8-5.4-8.3-6.1-13.4c-0.6-3.9-0.3-7.8,1.2-11.6
                              c0.1-0.3,0.3-0.7,0.4-1c0-0.1,0.1-0.1,0.2-0.2c0.2,0.7,0.3,1.3,0.6,1.9c0.6,1.7,1.5,3.3,2.9,4.4c1.8,1.4,4,1.3,5.8-0.2
                              c2.2-1.9,2.8-4.3,2.4-7.1c-0.3-1.7-0.6-3.4-0.6-5.1c-0.1-4,1.6-7.2,4.8-9.6c1.1-0.9,2.3-1.6,3.5-2.4c2.1-1.5,3.3-3.5,3.2-6.1
                              c0-0.1,0-0.2,0-0.4c1.2,1.2,1.8,2.5,2,4.1c0.2,2.2-0.3,4.3-0.8,6.4c-0.6,3-0.7,5.9,0.7,8.8c1.3,2.6,3.2,4.4,6.3,4.8
                              c2.2,0.3,4-0.6,5.4-2.3c1.3-1.5,1.8-3.4,2.1-5.3c0-0.2,0-0.3,0.1-0.5c0.1,0,0.2-0.1,0.3-0.1c0.8,1.7,1.6,3.4,2.3,5.1
                              C71.2,47,72.5,51.5,72.3,56.1z"/>
                            <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M61.2,56c-1.9-2.3-4-4.4-5.9-6.7c-1.3-1.5-2.6-3.1-3.7-4.8c-1.5-2.4-2.2-5.1-2.1-7.9c0-0.9,0-1.7,0-2.8
                              c-1.1,1-2.1,1.9-3,2.8c-3.1,3.1-4.1,6.9-2.9,11.1c0.7,2.5,1.9,4.9,2.8,7.4c0.6,1.5,1.2,3,1.6,4.6c0.6,2.7-1.4,4.8-4,4.4
                              c-1.1-0.2-2.1-0.6-3-1.1c-1.7-1-2.7-2.7-3.4-4.5c-0.4-1-0.7-2.1-1.1-3.2c-0.5,1.1-1.1,2.2-1.5,3.2c-2.7,6.2-0.9,12.7,4.7,16.5
                              c4.3,2.9,9.1,3.6,14.1,2.5c4.5-1,8-3.5,10.1-7.7c1.3-2.6,1.5-5.2,0.5-8C63.6,59.6,62.6,57.7,61.2,56z M61.5,68.6
                              c-1.8,3.5-4.7,5.5-8.5,6.3c-4.5,0.9-8.7,0.3-12.4-2.5c-3.4-2.6-4.8-6-4.2-10.5c0.3,0.4,0.5,0.6,0.7,0.9c2,2.5,4.5,3.9,7.8,3.7
                                c3.6-0.2,6.2-3.5,5.6-7.1c-0.4-2.5-1.5-4.7-2.5-6.9c-1-2.3-2-4.5-2.3-7c-0.2-2.1,0.1-4,1.3-5.8c0.3,1.1,0.6,2.2,1,3.3
                                c1.1,3.1,3.2,5.5,5.3,7.9c2,2.2,4.1,4.3,5.9,6.7c1.1,1.4,1.8,3.1,2.5,4.7C62.8,64.5,62.5,66.6,61.5,68.6z"/>
                          </svg>
                        </span>
									<span class="avatar__element avatar__element--position_bottom">
                          <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 99 99">
                            <circle fill-rule="evenodd" clip-rule="evenodd" fill="#facc76" cx="49.5" cy="49.5" r="49.5"/>
                            <path fill="#FFFFFF" d="M73.9,36.5c-2.7-0.6-5,0.1-6.8,2c-2.1,2.2-2.1,5.9-0.1,7.9c0.7,0.7,1.7,0.7,2.4,0.1c0.8-0.6,0.9-1.6,0.3-2.5
                              c-0.5-0.8-0.7-1.6-0.4-2.3c0.2-0.7,0.8-1.3,1.7-1.6c1.4-0.5,2.7-0.2,3.8,0.7c1.1,1,1.5,2.4,1.2,3.9c-0.5,2.1-2.6,3.6-5,3.6l-4.6,0
                              l-13.7,0c-6.2,0-12.3,0-18.5,0c-0.9,0-1.5,0.4-1.8,1.1c-0.2,0.6-0.2,1.2,0.2,1.6c0.4,0.5,1,0.8,1.8,0.8c2.9,0,5.9,0,8.8,0l9.6,0
                              l8.8,0c3,0,6.1,0,9.1,0c0.9,0,1.7-0.1,2.5-0.3c2.3-0.5,4.3-2,5.5-3.9c1.1-1.9,1.4-4.1,0.8-6.1C78.6,38.9,76.7,37.2,73.9,36.5z"/>
                            <path fill="#FFFFFF" d="M58.7,57.7c-1.9,0-3.9-0.1-6.3-0.1c-1.6,0-3.2,0-4.9,0c-1.6,0-3.3,0-4.9,0h-0.5v0l-6.7,0c-2.8,0-5.6,0-8.5,0
                              c-0.6,0-1.1,0.1-1.5,0.4c-0.7,0.4-0.8,1.2-0.6,1.9c0.2,0.8,0.9,1.3,1.8,1.3c0.8,0,1.6,0,2.3,0l28.6,0c1.9,0,3.4,0.6,4.4,1.9
                              c1,1.2,1.2,2.6,0.7,4c-0.5,1.3-1.5,2.1-2.9,2.3c-1.1,0.2-2.2-0.3-2.8-1.1c-0.4-0.5-0.5-1.2-0.4-1.8c0.1-0.5,0.1-1.1-0.2-1.6
                              c-0.2-0.3-0.5-0.7-1.2-0.8c-0.1,0-0.3,0-0.4,0c-0.9,0-1.6,0.7-1.8,1.8c-0.4,2.5,0.4,4.5,2.5,5.9c2.2,1.5,4.6,1.6,7.1,0.4
                              c2.5-1.3,3.8-3.4,4-6.2c0.1-2-0.7-4.1-2.2-5.7C62.9,58.7,60.8,57.8,58.7,57.7z"/>
                            <path fill="#FFFFFF" d="M41.1,42.8c1.9,0,3.9,0,5.8,0c1,0,2-0.2,2.9-0.4c4.3-1.3,6.9-5.3,6.2-9.6c-0.6-3.8-4.1-6.8-8-6.8
                              c-0.5,0-1.1,0.1-1.6,0.2c-3.2,0.7-5.2,2.6-5.9,5.6c-0.2,0.7-0.2,1.5-0.1,2.4c0.1,0.9,0.9,1.5,1.9,1.3c0.9-0.1,1.6-0.8,1.5-1.8
                              c0-1.4,0.4-2.5,1.4-3.3c1.4-1,3.5-1.1,5-0.1c1.6,1,2.4,2.9,2,4.7c-0.6,2.5-2.8,4.2-5.4,4.2l-10.2,0c-5.1,0-10.2,0-15.4,0
                              c-0.4,0-0.9,0.1-1.2,0.2c-0.7,0.3-1.1,1.1-0.9,2c0.2,0.8,0.9,1.4,1.9,1.4c2.1,0,4.1,0,6.2,0l6.9,0L41.1,42.8z"/>
                          </svg>
                        </span>
									<span class="avatar__element avatar__element--position_left">
                          <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 99 99">
                            <circle fill-rule="evenodd" clip-rule="evenodd" fill="#facc76" cx="49.5" cy="49.5" r="49.5"/>
                            <path fill="#FFFFFF" d="M65.4,50.9c-1.4-2.5-3.1-4.8-4.8-7.1c-0.4-0.6-0.9-1.2-1.3-1.9l-0.3-0.4C57,38.8,55,36,53.4,32.9
                              c-0.8-1.5-1.8-3.6-2.2-5.9c-0.2-1.2-0.3-2.3-0.4-3.5c0-0.4-0.1-0.9-0.1-1.3c0-0.1,0-0.2,0-0.2c-2.9,2.8-5.1,5.2-6.9,7.5
                              c-2,2.7-3.8,5.5-5.3,8.2c-2.2,3.9-4,7.5-5.3,11.1c-0.9,2.4-1.5,4.5-1.9,6.7c-0.5,2.6-0.4,5.2,0.3,7.8c1,3.7,3,6.9,6,9.4
                              c2.6,2.2,5.6,3.5,8.8,4c0.4,0.1,0.9,0.1,1.3,0.2l0.5,0.1h2c0.1,0,0.2-0.1,0.3-0.1c2.4-0.2,4.6-0.8,6.7-1.8c2.5-1.2,4.7-3,6.5-5.2
                              c1.2-1.5,2.1-3.1,2.7-4.9c0.8-2.1,1.2-4.4,1.1-6.6C67.8,55.6,66.6,53.1,65.4,50.9z M64.5,61.7c-0.5,2.7-1.7,5-3.5,7.1
                              c-2.7,3-5.9,4.7-9.8,5.1c-0.6,0.1-1.2,0.1-1.8,0.1l0,0c-3.4,0-6.5-1.1-9.2-3.1c-2.5-1.9-4.3-4.4-5.3-7.5c-0.8-2.5-0.9-5.2-0.4-8
                              c1-4.5,2.8-8.5,4.2-11.5c1.9-3.8,4-7.4,6.4-10.9c0.4-0.6,0.9-1.2,1.3-1.8l0.4-0.5c0.1-0.1,0.2-0.2,0.3-0.3l1.2-1.4l0.8,2
                              c0.1,0.3,0.2,0.6,0.3,0.8c1.1,2.7,2.6,5.3,4.7,8.4c1.1,1.6,2.2,3.1,3.3,4.7c1.1,1.5,2.2,3.1,3.3,4.6c1.5,2.2,2.6,4.2,3.4,6.2
                              C64.9,57.3,65,59.3,64.5,61.7z"/>
                            <path fill="#FFFFFF" d="M42.5,61.3c-1.2-2.8-1.1-5.7-0.9-8.6c0.1-1.2,0.3-2.4,0.4-3.7c-2.2,2.3-3.4,5-3.6,8.2
                              c-0.2,3.1,0.8,5.8,2.7,8.1c1.6,1.9,3.6,3.3,6.2,3.7c0.8,0.1,1.6,0.2,2.5,0c-0.5-0.3-0.9-0.5-1.2-0.7
                              C45.8,66.7,43.8,64.3,42.5,61.3z"/>
                          </svg>
                        </span>
								</div>
							</div>
						</div>
					</div>
					<div class="profile-m__col profile-m__col--untitled">
						<div class="profile-m__section profile-m__section--small">
							<p class="profile-m__subtitle">
								<svg xmlns="http://www.w3.org/2000/svg" class="icon icon--middle" width="20" height="20" viewBox="0 0 31 31" fill="currentColor">
									<path d="M31,24.9c0,0.4,0,0.9,0,1.3c-0.1,0.3-0.1,0.6-0.2,1c-0.2,0.5-0.4,0.6-0.8,0.2c-0.9-0.8-1.7-1.7-2.5-2.5
                          c-0.4-0.4-0.7-0.4-1,0c-0.5,0.5-1,1-1.5,1.5c-0.4,0.4-0.4,0.6,0,1c0.8,0.9,1.7,1.7,2.5,2.5c0.4,0.4,0.3,0.7-0.2,0.8
                          c-0.9,0.3-1.7,0.3-2.6,0.2c-3.3-0.6-5.3-4.2-4-7.4c0.1-0.2,0.1-0.3-0.1-0.5c-1.5-1.5-3-3-4.5-4.4c-0.1-0.1-0.1-0.1-0.2-0.2
                          c-0.1,0.1-0.1,0.2-0.2,0.3c-3,3-6,6.1-9.1,9.1c-0.3,0.3-0.6,0.5-0.9,0.7c-1.7,0.8-3.4,1.7-5.2,2.5c-0.1,0.1-0.3,0-0.4,0
                          c0-0.1,0-0.2,0-0.3c0-0.1,0.1-0.1,0.1-0.2c0.8-1.6,1.5-3.2,2.3-4.8c0.2-0.5,0.5-0.9,0.9-1.2c3-3,6-6,9-9c0.1-0.1,0.2-0.1,0.4-0.2
                          c-1.7-1.7-3.3-3.2-4.9-4.8c-0.1-0.1-0.2-0.1-0.3,0c-0.7,0.3-1.3,0.4-2.1,0.4c-2.4,0.1-4.7-1.6-5.3-3.9C0.1,6.6,0.1,6.4,0,6.1
                          c0-0.4,0-0.9,0-1.3c0.1-0.3,0.1-0.6,0.2-0.9c0.2-0.6,0.4-0.7,0.9-0.2c0.8,0.8,1.7,1.7,2.5,2.5c0.4,0.4,0.7,0.4,1,0
                          c0.5-0.5,1-1,1.5-1.5c0.4-0.4,0.4-0.6,0-1C5.3,2.8,4.5,1.9,3.6,1.1C3.2,0.7,3.3,0.4,3.8,0.2c0.3-0.1,0.6-0.2,1-0.2
                          c0.4,0,0.8,0,1.3,0c0.1,0,0.1,0,0.2,0.1c3.4,0.5,5.5,4.2,4.2,7.4c-0.1,0.2-0.1,0.3,0.1,0.5c1.5,1.5,3,3,4.5,4.4
                          c0.1,0.1,0.1,0.1,0.2,0.2c3.1-3.1,6.2-6.2,9.3-9.3c1.1,1.1,2.2,2.2,3.3,3.3c-3.1,3.1-6.2,6.2-9.3,9.3c0,0,0,0.1,0,0.1
                          c1.5,1.5,3.1,3.1,4.6,4.6c0.1,0.1,0.2,0.1,0.4,0c3.1-1.3,6.6,0.5,7.4,3.9C30.9,24.6,31,24.7,31,24.9z"/>
									<path d="M31,3.1c-0.2,0.3-0.4,0.6-0.6,0.8c-0.6,0.6-1.2,1.2-1.8,1.8c-1.1-1.1-2.2-2.2-3.3-3.3
                          c0.2-0.2,0.5-0.5,0.7-0.7c0.4-0.4,0.7-0.7,1.1-1.1c0.2-0.2,0.5-0.4,0.7-0.6c0.2,0,0.4,0,0.7,0c1,0.7,1.8,1.5,2.5,2.5
                          C31,2.7,31,2.9,31,3.1z"/>
								</svg>
								<span class="inline-block inline-block--middle">Skills</span>
							</p>
							<table class="skills skills--dark">
								<tbody class="skills__body">
								<tr class="skills__row">
									<td class="skills__cell skills__cell--name">enabling competences</td>
									<td class="skills__cell skills__cell--value">
										<a href="#">unlock</a>
									</td>
									<td class="skills__cell skills__cell--value">
										<a href="#">unlock</a>
									</td>
								</tr>
								<tr class="skills__row">
									<td class="skills__cell skills__cell--name">professional competences</td>
									<td class="skills__cell skills__cell--value">
										<a href="#">unlock</a>
									</td>
									<td class="skills__cell skills__cell--value">
										<a href="#">unlock</a>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
						<div class="profile-m__section profile-m__section--small">
							<p class="profile-m__subtitle">
								<svg xmlns="http://www.w3.org/2000/svg" class="icon icon--middle" width="21" height="19" viewBox="0 0 35 33" fill="currentColor">
									<path d="M31.6,6.5l-1.3-1.3l0.4-0.4c0.1-0.1,0.3-0.3,0.4-0.4c0.3-0.3,0.5-0.5,0.7-0.8c1.2-1.5,0.5-2.3,0.3-2.5
                          c-0.7-0.7-1.7-0.6-2.6,0.1c-0.2,0.1-0.3,0.3-0.5,0.4c-5,5-10,10-14.9,15c-0.2,0.2-0.8,0.8-0.9,1l-0.7,0.7l-0.3-1.1
                          c0-0.3-0.4-1.2-0.6-1.4c-1.1-1.1-2.2-1.8-3.6-2c-1.5-0.2-2.9,0.2-4.3,1.2c-1.7,1.3-2.8,3.1-3.3,5.5c-0.1,0.5-0.1,0.9-0.2,1.4
                          c0,0.2-0.1,0.5-0.1,0.7c0,0.1,0,0.2-0.1,0.3l0,0v2.4l0.1,0.5c0,0.4,0.1,0.9,0.2,1.3c0.2,1.6,0.6,3.2,1.1,4.7c0,0,0,0,0,0
                          c1.8,0.6,3.6,1,5.5,1.1c2.2,0.2,4.1,0.1,5.9-0.3c2.5-0.6,4.3-1.8,5.5-3.7c1.5-2.5,1.1-5.5-1-7.5l-0.1-0.1
                          c-0.3-0.3-0.6-0.5-1.3-0.8L15,20.3l0.6-0.6c1.3-1.3,2.7-2.6,4-3.9c1.3-1.3,2.7-2.6,4-3.9l0.4-0.4l0.4,0.4c0.1,0.1,0.5,0.5,0.6,0.6
                          l1.2,1.2c0.7,0.7,1.3,1.3,2,2c0.5,0.5,1,0.7,1.6,0.5c0.6-0.2,1-0.6,1.1-1.2c0.1-0.5,0-1-0.5-1.5L30,12.9c-0.8-0.8-1.6-1.6-2.5-2.5
                          c-0.2-0.2-0.7-0.6-0.9-0.8l-0.4-0.4l1.9-1.9l3.7,3.7c0.2,0.2,0.4,0.4,0.6,0.6c0.3,0.3,0.7,0.4,1.1,0.4c0.7,0,1.2-0.4,1.5-1.2
                          c0,0,0-0.1,0-0.1v-0.6c-0.2-0.5-0.5-0.9-1-1.3C33.3,8.2,32.4,7.3,31.6,6.5z M15.4,24c1,1.2,0.9,2.5-0.1,3.7c-0.9,1-2,1.6-3.6,1.9
                          c-0.8,0.2-1.6,0.2-2.6,0.2l0,0c-0.8,0-1.7-0.1-2.7-0.2c-0.4-0.1-0.9-0.1-1.3-0.2c-0.2,0-0.4-0.1-0.7-0.1C4,29.3,3.7,29,3.6,28.6
                          c-0.4-2-0.6-3.8-0.5-5.4c0.1-1.8,0.4-3.1,1.1-4.3c0.4-0.7,0.9-1.2,1.6-1.6c0.9-0.6,2-0.5,2.9,0.1c1.2,0.9,1.8,2.2,1.9,3.8
                          c0,0.3,0,0.7,0.1,1l0,0c0.1,0,0.2,0,0.2,0c0.5,0,1.1,0.1,1.6,0.1C13.7,22.6,14.7,23.1,15.4,24z"/>
								</svg>
								<span class="inline-block inline-block--middle">Passions</span>
							</p>
							<div class="profile-m__passions passions">
								<div class="passions__inner">
									<a class="passions__item passions__item--dark passions__item--position_top-left" href="#">unlock</a>
									<a class="passions__item passions__item--dark passions__item--position_top-right" href="#">unlock</a>
									<a class="passions__item passions__item--dark passions__item--position_bottom-right" href="#">unlock</a>
									<a class="passions__item passions__item--dark passions__item--position_bottom-left" href="#">unlock</a>
									<button class="passions__icon" type="button">
										<svg xmlns="http://www.w3.org/2000/svg" class="icon icon--middle" width="16" height="19" viewBox="0 0 74 92" fill="currentColor">
											<path class="st0" d="M46.4,38.3c-0.3-0.2-0.5-0.3-0.8-0.4c-5.7-2.5-12.5-1.3-17.1,3c-1,0.9-2,1.9-2.9,2.9c-7,7-14,14-21,21
                              c-4,4.1-5.5,9-4.2,14.6c1.3,6,5.1,10,10.9,11.7c5.9,1.7,11.3,0.4,15.7-4c7.8-7.7,15.5-15.5,23.3-23.2c3.5-3.5,5.2-7.7,4.8-12.7
                              c-0.1-2-0.7-3.9-1.6-5.8c-1.7,1.7-3.3,3.3-4.9,4.9c-0.2,0.2-0.2,0.5-0.2,0.8c0.4,3-0.5,5.7-2.6,7.9C38,66.8,30,74.7,22.1,82.6
                              c-2.3,2.3-5.2,3.1-8.4,2.5c-3.5-0.7-5.8-2.9-6.8-6.3c-1-3.5-0.2-6.6,2.3-9.2c7.8-7.9,15.7-15.8,23.6-23.6c2.2-2.2,4.9-3,7.9-2.7
                              c0.2,0,0.6,0,0.7-0.1C43.1,41.6,44.7,39.9,46.4,38.3z"/>
											<path fill-rule="evenodd" clip-rule="evenodd" d="M60.2,0.2c0.6,0.2,1.3,0.3,1.9,0.5c11.7,3.1,15.9,17.5,7.5,26.2C61.6,35,53.6,43,45.5,50.9
                              c-4.8,4.7-10.6,5.5-16.8,3.2c-0.3-0.1-0.6-0.3-1.1-0.5c1.6-1.6,3.2-3.2,4.7-4.7c0.2-0.2,0.6-0.2,0.8-0.1c3.2,0.4,5.8-0.7,8.1-3
                              c7.7-7.8,15.5-15.5,23.2-23.3c3.8-3.8,3.8-9.7,0-13.3c-3.5-3.3-9-3.4-12.6,0c-1.2,1.1-2.2,2.2-3.4,3.3
                              C41.7,19.5,34.9,26.2,28.1,33c-2.3,2.3-3.2,5-2.8,8.1c0,0.2,0,0.6-0.2,0.7c-1.5,1.6-3.1,3.1-4.7,4.7c-1-2-1.6-4.1-1.7-6.2
                              c-0.2-4.7,1.4-8.7,4.7-12.1c7.8-7.9,15.7-15.7,23.6-23.6c2.4-2.3,5.2-3.8,8.5-4.3c0.2,0,0.3-0.1,0.5-0.2
                              C57.4,0.2,58.8,0.2,60.2,0.2z"/>
											<path fill-rule="evenodd" clip-rule="evenodd" d="M46.4,38.3c-1.7,1.7-3.3,3.3-4.9,4.9c-0.1,0.1-0.5,0.1-0.7,0.1c-3.1-0.3-5.7,0.5-7.9,2.7
                              c-7.9,7.9-15.8,15.7-23.6,23.6c-2.5,2.6-3.3,5.7-2.3,9.2c1,3.4,3.3,5.5,6.8,6.3c3.2,0.7,6.1-0.2,8.4-2.5
                              c8-7.9,15.9-15.8,23.8-23.7c2.2-2.2,3-4.8,2.6-7.9c0-0.3,0-0.6,0.2-0.8c1.6-1.6,3.2-3.2,4.9-4.9c1,1.9,1.5,3.8,1.6,5.8
                              c0.3,5-1.3,9.2-4.8,12.7C42.5,71.5,34.8,79.3,27,87c-4.4,4.4-9.8,5.7-15.7,4c-5.8-1.7-9.6-5.7-10.9-11.7
                              c-1.2-5.6,0.2-10.5,4.2-14.6c7-7,14-14,21-21c1-1,1.9-2,2.9-2.9c4.5-4.3,11.3-5.5,17.1-3C45.9,38,46.1,38.1,46.4,38.3z"/>
										</svg>
									</button>
									<span class="passions__diagonals"></span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<p class="profile-m__message">
					If you accept this request to join you will be invited to contact this person, start to get to know each other, and verify the reciprocal terms of engagement in your Opportunity.
					Request successfully accepted, the user is now part of your Team!
				</p>
				<div class="profile-m__buttons">
					<div class="profile-m__button">
						<button class="button button--medium button--full-width button--yellow" type="button">
							<span class="button__text button__text--small">ok</span>
						</button>
					</div>
					<div class="profile-m__button">
						<button class="button button--medium button--full-width button--yellow" type="button">
							<span class="button__text button__text--small">cancel</span>
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</div>