@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow');
#cboxContent {
    background: #9c9c9b;
    overflow: visible;
}
.grid {
	padding: 20px 0px 100px 0px;
	max-width: 1900px;
	margin: 0 auto;
	list-style: none;
}

.grid li {
	display: inline-block;
	width: 300px;
	height:330px;
	margin: 0;
	padding: 0px 70px 0px 0px;
	text-align: left;
	position: relative;
}

.grid figure {
	font-size:10pt;
	margin: 0;
	position: relative;
	width:100%;
	/*border: 1px solid #BE9E56;*/
}

.grid figure img {
	max-width: 100%;
	display: block;
	position: relative;
}

.grid figcaption {
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px;
	background: #BE9E56;
	color: #222222;
	font-size:10pt;
}

.grid figcaption h3 {
	font-size:10pt !important;
	line-height:10pt !important;
	margin: 0;
	margin-bottom:5px;
	padding: 0;
	color: #fff;
}
.grid figcaption h2 {
	margin: 0;
	margin-top:5px;
	padding: 0;
	color: #DDD;
}

.grid figcaption span:before {
	content: '';
}

.grid a {
	text-align: center;
	padding: 5px 10px;
	border-radius: 2px;
	display: inline-block;
	background: #222222;
	color: #fff;
}

/* Individual Caption Styles */
/* Caption Style 4 */
.cs-style-4 li {
	-webkit-perspective: 1700px;
	-moz-perspective: 1700px;
	perspective: 1700px;
	-webkit-perspective-origin: 0 50%;
	-moz-perspective-origin: 0 50%;
	perspective-origin: 0 50%;
}

.cs-style-4 figure {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.cs-style-4 figure > div {
	overflow: hidden;
}

.cs-style-4 figure img {
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	transition: transform 0.4s;
}

.no-touch .cs-style-4 figure:hover  img,
.cs-style-4 figure.cs-hover img {
	/*-webkit-transform: translateX(25%);
	-moz-transform: translateX(25%);
	-ms-transform: translateX(25%);
	transform: translateX(25%);
	-webkit-transform: scale(1.1);
	-moz-transform:  scale(1.1);
	-ms-transform:  scale(1.1);
	transform:  scale(1.1);*/
}

.no-touch .cs-style-4 figure:hover  .intro-product,
.cs-style-4 figure.cs-hover .intro-product {
	background-color:#977834; 
}
.no-touch .cs-style-4 figure:hover ,
.cs-style-4 figure.cs-hover {
	background-color:#F0F0F0; 
}

.cs-style-4 figcaption {
	height: 92%;
	width: 94%;
	opacity: 0;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: rotateY(-90deg);
	-moz-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
	transition: transform 0.4s, opacity 0.1s 0.3s;
}

.no-touch .cs-style-4 figure:hover figcaption,
.cs-style-4 figure.cs-hover figcaption {
	opacity: 1;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	transform: rotateY(0deg);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s;
	transition: transform 0.4s, opacity 0.1s;
}
a.info {
	position: absolute;
	top:160px;
	right:2px;
}
a.panier {
	position: absolute;
	bottom: 2px;
	right: 2px;
}
a.panier:hover {
	color: #222;
	background-color: #FFF;
}
a.info:hover {
	color: #FFF;
	background-color: #977834;
}
figure .name {
	position:absolute;
	color:#fff; 
	font-weight:300;
	font-family:'PT Sans Narrow', sans-serif;
	padding:2px; 
	top:0;
	float:left;
	text-shadow: 1px 1px 1px #000;
	font-size:20px;
}
.intro-product {
	background-color:#BE9E56; 
	position:absolute; 
	top:190px;
	height:70px;
	width:100%;
	/*border: 1px solid #BE9E56;
	left:-1px;*/
}
.intro-product .description {
	position:relative;
	height:50px;
	width:98%;
	top:0px;
	float:left;
	color:#FFF; 
	padding: 1%;
	font-size: 9pt;
}
.info {
	position:absolute;
	color:#000; 
	top:20px;
	padding:2px; 
}

.qte {
	position:absolute;
	top:38px;
	left:0px;
	color:#FFF; 
	padding:2px; 
}
.qte input {
	color:#000;
	height: 15px;
	width: 25px;
	padding: 4px;	
}
.qte a:hover {
	color:#000;
	background-color:#FFF; 
}
.price {
	color:#BE9E56; 
	font-weight:300;
	padding:2px; 
}

.cs-style-4 figcaption a.info {
	position: absolute;
	top:auto;
	bottom: 20px !important;
	right:auto;
}
.cs-style-4 figcaption a.panier {
	position: absolute;
	top:auto;
	bottom: 20px !important;
	right: 20px !important;
}
.cs-style-4 figcaption a.panier:hover , .cs-style-4 figcaption a.info:hover {
	color: #222 !important;
	background-color: #FFF !important;
}

@media screen and (max-width: 320px) {
	.grid {
		padding: 0px 10px 100px 0px;
	}
	.grid li {
		width: 100%;
		padding:20px 0px;
	}
	#content input[type="text"], #content textarea {
		padding: 4px !important;
	}
	#image {
		width:275px;
	}
}
@media screen and (width: 480px) {
	.cs-style-4 figcaption {
		width:91%;
		height: 88%;
	}
}