Thumbnails move to odd position only in Firefox

Hello everyone,
I recently uploaded my company’s portfolio-website. In the Design and Video sections there is a gallery of work showing thumbnails.
It seems to work fine on Opera, Chrome and Safari (haven’t implemented IE version yet), but on Firefox the thumbnails are shifted to the right of their original position, exactly 50% off.

This is what i’m talking about. The code i wrote is below, HTML and LessCss. Anyone know why this would happen? Thanks very much in advance.

https://www.descuadro.com/?page_id=51

Code:
HTML

<div id="items" class="gallery">
				 <!--GET ALL SUBCATEGORIES OF "4" (ID OF 'DESIGN'  ) -->
		<?php $categories = get_categories("child_of=4"); foreach ($categories as $cat) { ?>
				 <!-- LOOP ALL POSTS IN SUBCATEGORY -->
			<?php query_posts("cat=$cat->cat_ID&showposts=-1&order=DESC&orderby=date"); ?>
				 <!--TITLE OF SUBCATEGORY-->
				<h2><?php single_cat_title(); ?></h2>
				<?php while (have_posts()) : the_post(); ?>
					<div class="item">
						<figure>
							<a href="#">
								<?php if ( has_post_thumbnail()) the_post_thumbnail('big-thumb'); ?>
							</a>
					<!-- LOOP THE HOVER PRETTY PHOTO EFFECT ASWELL -->
							<div class="web">
								<p class="red">
									<?php
									 if ( has_post_thumbnail()) {
									   $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
									echo '<a href="' . $large_image_url[0] . '" rel="prettyPhoto" class="zoom"   alt="">';} ?>
									<img src="assets/images/icons/icon-zoom.png">
									</a>
								</p>
							</div>
						</figure>
						<footer>
							<h1><?php the_title(); ?><time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('d.m.Y'); ?></time></h1>
							<!-- NOTES -->
								<?php if ( get_post_meta($post->ID, "notes", true) ) { ?>
								<p><?php $key="notes"; echo get_post_meta($post->ID, $key, true); ?></p>
								<?php } ?>
							<!-- AUTHOR -->
								<?php if ( get_post_meta($post->ID, "author", true) ) { ?>
								<h2>Designed by <?php $key="author"; echo get_post_meta($post->ID, $key, true); ?></h2>
								<?php } ?>
							<!-- FORMATS -->
								<?php if ( get_post_meta($post->ID, "material", true) ) { ?>
								<h3><?php $key="material"; echo get_post_meta($post->ID, $key, true); ?></h3>
								<?php } ?>

								<?php the_content(); ?>
						</footer>
					</div>
				<?php endwhile; ?>
		<?php }?>

CSS

#items { float: left;
		 width: 100%;
		 padding-left: 1.3em;

	.item { 	float : left;
			position: relative;
			.column(2.40); //TRES por fila (+ 5*2 de margen, last (último) sin margen)
			margin: 0 2.1% 2% 0;

			text-align: center;
			color: @blanco;

			a, a:visited, a:hover { color: @blanco;
									text-decoration: none;}

			a:hover { text-decoration:underline; }

			figure { .column(2.40);
					margin:  0;
					 height: 197px;
					.entry-image { height: 197px; } }

			footer {	text-align: left;
						clear: left;
						font-size: 0.9em;
						color: @rojo;

						h1, h2, h3, p {	margin:0;
										padding: 0.1em 0 0.18em; }

						h1 { 	font: 0.9em 'TeXGyreAdventorBold', 'Helvetica Neue', Helvetica, Arial, Sans-serif;
								text-shadow: none;
								text-transform: uppercase;
								border-bottom: 1px solid @rojo;
								overflow: hidden;
							  }

						h2 {	font: inherit;
								font-size: 0.8em;
								text-transform: uppercase;

								border-bottom: 1px dashed @rojo;
								}

						h3 { 	font: inherit; color: inherit;
								font-size: 0.7em;
								text-transform: none;
								}

						p?{		text-align: inherit;
								color: @rojo;
								font: 0.77em 'TeXGyreAdventorBold', 'Helvetica Neue', Helvetica, Arial, Sans-serif;
								border-bottom: 1px dashed @rojo;
								}

						time { float: right; }
					}	//Cierra Footer

			img {position: absolute;
				margin:0;}

			.video, .web	{	position: relative;
								opacity : 0;

								width: 100%;
								height: 100%;

								transition: opacity 350ms ease-out 100ms;
								-webkit-transition: opacity 350ms ease-out 100ms;
								-o-transition: opacity 350ms ease-out 100ms;
								-moz-transition: opacity 350ms ease-out 100ms; 

								&:hover { opacity: 1;}
							}

					.video { background-color: rgba(54,179,179,.5); }

					.web { background-color: rgba(179,54,54,.5); }		

				.blue img { &:hover { border: solid 4px @azul; } }
				.red img { &:hover { border: solid 4px @rojo; } }

				.blue, .red {
							vertical-align: middle;
							display: inline-block;
							zoom: 1;
							height: 100%;}

				.blue img, .red img {
							width: inherit;
							position: relative;
							float: left;
							margin: 2em;
							margin-top: 2.7em;
							border: solid 4px @blanco;

							border-radius: 10em;
							-webkit-border-radius: 10em;
							-o-border-radius: 10em;
							-moz-border-radius: 10em;

							-webkit-box-shadow : 0 3px 8px rgba(0, 0, 0, .8);
							box-shadow : 0 3px 8px rgba(0, 0, 0, .8);
							-o-box-shadow : 0 3px 8px rgba(0, 0, 0, .8);
							-moz-box-shadow : 0 3px 8px rgba(0, 0, 0, .8);

							-webkit-transition: border-color 150ms ease-out 100ms;
							 }
					}
.last { margin-right: 0; }				

			}

.gallery { 

			h2 { font: 2.5em 300 'Helvetica Neue,' Helvetica, Arial, Sans-serif;
			margin: 1em 0 .15em;
			padding: 0.1em 0 0.4em;
			text-align: left;
			clear: both;}

			h3 {
				font-size: 1.4em; /*	i16 / 18 px	*/
				line-height: 0.1em;
				margin: 2em auto 1.2em;}
			p {	color: @gris;
				font-size: 0.75em ;
				text-align: center;}	

			}

Still fairly new to programming, so there could be some errors there.