/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 24 mars 2014, 10:30:34
    Author     : jeremy.b
*/

#main_content_transparent_home  ul{
	padding:0px;
	margin-right: 57px;
}

#content_showroom{
	width: 58%;
	margin:0 auto;
}

#acc_01_01 {
	position:relative;
}

/* Common style */
#content_showroom figure {
	position: relative;
	display:inline-block;
	overflow: hidden;
	margin: 10px 1%;
	min-width: 320px;
	max-width: 480px;
	max-height: 360px;
	width: 30%;
	text-align: center;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */

figure.bloc_showroom img {
	max-width: none;
	width: -webkit-calc(100% + 50px);
	width: calc(100% + 50px);
	opacity: 1;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-40px,0, 0);
	transform: translate3d(-40px,0,0);
	filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

figure.bloc_showroom figcaption {
	text-align: left;
	position: absolute;
	top: 73%;
	left: 7%;
}

figure.bloc_showroom figcaption > div {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2em;
	width: 100%;
	height: 50%;
}

figure.bloc_showroom p {
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.bloc_showroom p {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	letter-spacing: 1px;
	color: white;
	text-transform: uppercase;
	font-weight: bold;
	padding: 0.5em;
	font-size: 16px;
	background: #DB4B4B;
}

figure.bloc_showroom:hover img {
	opacity: 1;
	 filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
}

figure.bloc_showroom:hover img,
figure.bloc_showroom:hover p {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	background: rgba(0,0,0,0.8);
}

/************** Media queries ********************/
@media screen and (max-width : 940px) {
	#main_content_transparent_home {
	width: 100%;
	}
	
	#content_showroom {
    width: 100%;
    position: static;
	}
	
	#content_showroom figure {
	display: inline-block;
	float: none;
	}
}

@media only screen and (min-width : 941px) and (max-width : 1360px) {
	#content_showroom {
	width:98%;
	}
}

@media only screen and (min-width : 1361px) and (max-width : 1700px) {
	#content_showroom {
	width:76%;
	}

}