{include file="includes/header.html"} 
{include file="includes/header-holder.html"}

<main class="main" id="main">
  {include file="includes/menu.html"}

  <!-- <div id="fullpagePrimary"> -->

    <section class="section page training products-subcategory {if  $trainings|@count==1 || $trainings|@count==2}products-1-2{elseif  $trainings|@count==3 || $trainings|@count==4}products-3-4{elseif $trainings|@count==5 || $trainings|@count==6}products-5-6{/if}">

      <div class="wrapper">
        <div class="content">
    
          <div class="content-wrapper">
            {include file="includes/breadcrumbs.html"}

            <div class="content-container">
              <div class="col-left">
                <div class="bg" style="background-image: url({image f=$element.imageList[0].filename return='path' })">
                  <div class="heading-xs visible-xs-block">
                    <h1 class="h1 title visible-xs-block">{$element.name}</h1>
                  </div>
                </div>

                {seoHref id_element=11559  class="back"}
                <div class="col-content">
                  <div class="title hidden-xs">{$element.name}</div>
                  <div class="text">
           
                      {$element.content} 
                    
                  </div>
                </div>
                <div class="col-footer">
                    {$element.short_content}
                </div>
              </div>
              <div class="col-right">
                <div class="items-wrapper">
                  {foreach $trainings as $key=>$v}
                  <a href="{seoLink id_element=$v.id withParents=1  parentLink=$parentEvents}" class="item {if ($key==2 and $trainings|count==3) or ($key==4 and $trainings|count==5) or ($key==6 and $trainings|count==7)} item-large{/if}">
                    <div class="img">
                      <img src="{image f=$v.mainImageFilename return='path'}" alt="">
                    </div>
                    <div class="title">{$v.name}</div>
                  </a>
                  {/foreach}  
                </div>
              </div>
            </div>
          </div>
    
        </div>
      </div>
    </section>
  <!-- </div> -->
  <!-- /#fullpage -->
</main>

{include file="includes/footer-holder.html"} 
{include file="includes/footer.html"}