{literal}   
    <!--<script src="modules/catalogue_29/views/simple/js/jquery.nailthumb.1.1.js"></script>-->
    
  <script src="modules/catalogue_29/views/simple/js/jquery.imagefit.js"></script>
<!--
  <script type="text/javascript">
                jQuery(document).ready(function() {
                    jQuery('.nailthumb-container').nailthumb({width:400,height:280});
                });
  </script> 
 -->
    <!--  <script type="text/javascript">	
 jQuery(document).ready(function(){
		jQuery('.nailthumb-container').nailthumb({
			width:300,
			height:280,
			imageCustomFinder: function(el){
			var image = jQuery('<img />').attr('src',el.attr('href'));
		     image.attr('style','border:rgb(0,0,0)');
		     el.append(image);
			return image;
                        }
  			});
			 Shadowbox.init();
 });
    </script>
 -->
   {/literal} 
<section id="portfolio">
  <div class="container">

 {if !isset($_vars.categorie.name)}                        
    <ul class="portfolio-filter text-center">
      <li><a class="btn btn-default active" href="#" data-filter="*">Toutes</a></li>
      {foreach from=$_vars.cat key=i item=cat name="fe_items"}
      {if $cat.name!='' and $cat.name!='.'}
      <li><a class="btn btn-default" href="#" data-filter=".{$cat.id}">{$cat.name}</a></li>
   	  {/if}
    {/foreach}
    </ul>
 {/if}   
    <!--/#portfolio-filter-->
	 <!-- <div class="" style="height:50px"></div>-->

    <div class="row">
      <div class="portfolio-items isotope" style="  height: 535px; overflow-y: overlay;">
            {foreach from=$_vars.items key=i item=item name="fe_items"}
           
                     {if $_vars.categorie.id==$item.id_cat || !isset($_vars.categorie.name)}
                     {if $item.images.0}{assign var="bar" value=$_module.ressources|cat:'items/'|cat:$item.images.0.url}
                     {elseif $_config.image_item_alt}{assign var="bar" value=$_module.custompath|cat:$_config.image_item_alt}{/if}
                     {if !isset($_vars.categorie.name) }
                    	 {assign var="idcat" value=$item.idcatt}
                     {else}
                   		 {assign var="idcat" value=$item.id_cat}
                     {/if}
                                                    {if $item.images.0}{assign var="bar" value=$_module.ressources|cat:'items/'|cat:$item.images.0.url}{/if}

                          <div class=" portfolio-item {$idcat} col-xs-12 col-sm-4 col-md-3" >
                          <!-- <div class="nailthumb-container"> <img id="iii" class="img-responsive" src="{$bar}" alt=""  ></div> 
                             -->
                             <!-- <a style="border-color:#000;" href="{$bar}" class="demo nailthumb-container" rel="external">	</a>--> 
                             <div class="recent-work-wrap">
                        <a href="{linkToParams vars0='detail' vars1=$item.id vars2=$idcat vars3=$item.urlw}#Contenu1">

                                    <img class="img-responsive" src="{$bar}" style="height:200px"/>
		                                <div class="over">
                                    <h3>{$item.title}</h3>
                                        <!-- <i class="fa fa-eye"></i> Voir -->
                                   
                              </div>
                               </a>
                          </div> 
                          </div>
                     {/if}
            {/foreach}
    </div>
  </div>
</section>
{literal}
<style>
	.portfolio-item {
    height: auto;
	margin:auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    min-height: 250px;
}

.portfolio-item .over {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(255,255,255,.6);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}

.portfolio-item img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
 }
 


.portfolio-item h3 {

color:#9b781a;
text-align:center;
position:relative;
font-size:18px;
background:rgba(255, 255, 255,0.7);
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:8px;
}
#portfolio .row {
    overflow-y: overlay;
    height: 470px;
	/*margin-right: 220px!important;*/
}


	
img.img-responsive {
    height: 213px!important;
}

.portfolio-item:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}

.portfolio-item:hover .over {
opacity:1;
filter:alpha(opacity=100);
}

.portfolio-item:hover h3,.portfolio-item:hover {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}



	.portfolio-items{
		width: 1160px;
	}
section#contenu1 .container {
   width: 1170px !important; 
  }

#portfolio .row {
    margin-left: -10px;
    margin-right: -10px;
	}


.isotope-item {
    z-index: 2;
}
 .portfolio-filter {
    list-style: none outside none;
    margin: 0 0 40px 0;
    padding: 0;
}
.portfolio-filter > li {
    display: inline-block;
	color: #fff !important;
}
.portfolio-filter > li a {
    background: none repeat scroll 0 0 #FFFFFF;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin-right: 20px !important;
    text-transform: uppercase !important;
    transition: all 0.9s ease 0s !important;
    -moz-transition: all 0.9s ease 0s !important;
    -webkit-transition: all 0.9s ease 0s !important;
    -o-transition: all 0.9s ease 0s !important;
    border: 1px solid #F2F2F2 !important;
    outline: none !important;
	color: #000 !important;
	 border-radius: 0px !important; 
}
.portfolio-filter > li a:hover, .portfolio-filter > li a.active {
    color: #fff !important;
    background: #ffa300 !important;
    border: 1px solid #ffa300 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.portfolio-items.isotope{

height: 396px!important;
    overflow: overlay!important;
    position: relative!important;
}

.portfolio-items.isotope::-webkit-scrollbar { width:10px; }
.portfolio-items.isotope::-webkit-scrollbar-track { background-color:#eeeeee; }
.portfolio-items.isotope::-webkit-scrollbar-thumb { background-color:#f5e428; }
.portfolio-items.isotope::-webkit-scrollbar-button { background-color: #eee; }
.portfolio-items.isotope::-webkit-scrollbar-corner { background-color:#eeeeee; }


section#contenu1 a {
    color: #6d3400;
}
.isotope-item {
    z-index: 2;
}


.portfolio-items .recent-work-wrap {
    width: 290px;
    height: 210px;
}
.recent-work-wrap {
    position: relative;
    /* height: 535px; */
    overflow: hidden;
}


.portfolio-filter > li a {
    background: none repeat scroll 0 0 #FFFFFF;
    font-size: 14px;
    font-weight: 400;
    margin-right: 20px;
    text-transform: uppercase;
    transition: all 0.9s ease 0s;
    -moz-transition: all 0.9s ease 0s;
    -webkit-transition: all 0.9s ease 0s;
    -o-transition: all 0.9s ease 0s;
    border: 1px solid #F2F2F2;
    outline: none;
}

</style>
  <script type="text/javascript">
 jQuery(document).ready(function() {
	jQuery('div.im').imagefit({
	mode: 'outside',
	force : 'true',
	halign : center,
	valign : 'middle'
});
   
});
</script>
<script src="modules/catalogue_29/views/simple/js/jquery.isotope.min.js"></script>
<script src="modules/catalogue_29/views/simple/js/portfolio.js"></script>
{/literal}