#main-container{
	width: 100%;
	overflow: auto;
	text-align: center;
}
#brico-container{
	width: 85%;
	margin: auto;
	background-color: #f8f8f8;
	border-radius: 2px;
	box-shadow: 11px 12px 35px #282727;
	margin-bottom: 50px;
	max-width: 1155px;
}		
@media handheld, screen and (max-width: 640px){
	#brico-container {
			width: 100%;
	}
}
title{
	text-transform: uppercase !important;
}
.section-header{
	  float: left;
	  width: 98%;
	  clear: both;
	  margin-left: 1%;
	  text-align: left;
	  height: 30px;
	  padding-left: 2%;
	  background: linear-gradient(rgb(174, 33, 56), rgb(165, 70, 70), rgb(174, 33, 56));
	  color: white;
	  border-radius: 2px;
	  border: double 2px rgb(173, 111, 111);
	  position: relative;
	}
.section-header > h2{
		line-height: 29px;
		font-weight: 500;
		text-transform: uppercase;
		font-family: konig-regular;
	}	
	

#highlights, #promos{
	width: 100%;
	clear: both;
	margin: auto;
	text-align: center;
	margin-top: 20px;	
}
	.product{
		margin: 15px;
		position: relative;
		display: inline-table;
		width: 250px;
		height: 185px;
		background-color: white;
		box-shadow: rgb(206, 206, 206) 0px 1px 2px 0px;
		text-align: left;
		border-radius: 1px;
	}
	.image-product{
		  display: block;
		  width: 250px;
		  padding: 15px 10px 18px 10px;
		  border-bottom: solid 1px #CECECE;
	}				
	.product-name{
		padding: 10px;
		font-size: 16px;
		font-family: konig-regular;
		color: #363649;
	}
.promo{
  position: relative;
  width: 200px;
  height: 240px;
  margin: 10px;
  border-radius: 2px;
  display: inline-table;
  margin-top: 15px;
  background-color: white;
  padding: 5px;
  background-color: rgb(234, 234, 234);
  transition: all .5s ease;
  font-size: .9em;
  color: rgb(60, 60, 78);
}
.promo:hover{
	box-shadow: 1px 1px 10px rgb(163, 163, 163), -1px -1px 10px rgb(163, 163, 163),
				-1px 1px 10px rgb(163, 163, 163), 1px -1px 10px rgb(163, 163, 163);
	z-index: 20;
	transform: scale(1.2) translate(0,10px);
}
.promo > img {
	  border: solid 1px rgb(186, 134, 134);
}
.promo-details{
	margin-top: 5px;
}		
	.new-price{
		font-family: konig-bold;
		color: black;
		display: block;
	}
	.old-price{
		font-family: konig-light;
		 text-decoration:line-through;
		 font-size: 0.8em;
		 color: red;
		 display: block;
	}
	.ribbon-wrapper-green {
		  width: 85px;
		  height: 88px;
		  overflow: hidden;
		  position: absolute;
		  top: -2px;
		  right: -2px;
	}
	.ribbon-green {
	  font: bold 15px Sans-Serif;
	  color: #333;
	  text-align: center;
	  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
	  -webkit-transform: rotate(45deg);
	  -moz-transform:    rotate(45deg);
	  -ms-transform:     rotate(45deg);
	  -o-transform:      rotate(45deg);
	  position: relative;
	  padding: 7px 0;
	  left: -5px;
	  top: 15px;
	  width: 120px;
		  background-color: #E52634;
	  background: -webkit-linear-gradient(top, #F0557E, #E52634);
	  background: -moz-linear-gradient(top, #F0557E, #E52634);
	  color: #6a6340;
	  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
	  text-transform: uppercase;
	  font-family: konig-bold;
	  color: white;
	}
	.ribbon-green:before, .ribbon-green:after {
	  content: "";
	  border-top:   3px solid #6e8900;   
	  border-left:  3px solid transparent;
	  border-right: 3px solid transparent;
	  position:absolute;
	  bottom: -3px;
	}
	.ribbon-green:before {
	  left: 0;
	}
	.ribbon-green:after {
	  right: 0;
	}
	
	#gammes{
		 overflow: auto;
	}
	article{
		  width: 95%;
		  padding: 10px;
		  margin: 50px auto;
		  box-shadow: 0 0 2px silver;
		  overflow: auto;
		  background-color: rgb(174, 33, 56);
		  color: white;
	}
	article > img{
		position: relative;
		display: block;
		margin: 10px 15px 10px 5px;
		float: left;
		width: auto;
		max-width: 34%;
		padding: 10px;
		border: solid 1px silver;
		box-shadow: 0 0 1px silver;
		transition: all .5s ease;
		background-color: white;
		z-index: 10;
	}
	article > img:hover{
		transform: scale(1.05);
		box-shadow: 1px 1px 5px silver;
	}
	article > p{
		  font-family: konig-light;
		  text-align: justify;
		  font-size: .95em;
		  padding: 15px;
	}
	
	@media handheld, screen and (max-width: 678px){
		article > img{
		  max-width: 100%;
		  height: auto;
		  margin: 20px auto;
		  display: inline-block;
		  float: none;
		}			
		.product p{
			font-size: 0.9em;
		}	
		.price-big{
			display: none;
		}			
		.product span{
			padding: 15px 5px;
			font-size: 14px;
			font-family: konig-bold;
			color: #d6474e;
		}		
		.product-description, .caracts, .disponibilite, .produit-data{
			display: none;				
		}				
	}
	@media handheld, screen and (min-width: 679px){
		.product{
			width: 90%;
			height: 180px;
			clear: both;
			transition: all .5s ease;
		}
		.product:hover{
			transform: scale(1.1);
		}
		.image-product {
		  display: block;
		  height: inherit;
		  width: 160px;
		  height: 227px;
		  padding: 20px;
		  border: none;
		  float: left;
		}
		.price-big{
		  position: absolute;
		  height: 100%;
		  width: 12%;
		  background-color: rgb(174, 33, 56);
		  top: 0;
		  right: 0;			
	      text-align: center;	
		  color: white;		
	      font-family: konig-bold;
	      line-height: 2.5em;				  	      
		}
		.price-small{
			display: none;
		}
		.price-amount{
			font-size: 1.4vw;
			display: block;
			margin: 3px;
		}
		.square-meter{
			font-size: .5em;
		}
		.ttc{
			font-size: 1em;
			display: block;
					margin-top: 35%;
		}
		.product-name{
			 font-family: konig-bold;
			 color: #473A3D;
			 padding-bottom: 5px;
			 margin-top: 8px;
			 text-align: center;
			 font-size: 1.25em;
		}
		.product-description{
			  font-size: .8em !important;
			  color: rgb(126, 89, 89);
			  margin-left: 10px;
			  padding: 10px;
			  font-family: konig-light;
		}
		.produit-data{
			width: 67%;
					float: left;
		}				
		.progress {
 					width: 100%;	  					
 					background-color: #E5DFDF;
				margin-bottom: 0;
		}
		.disponibilite{
				  overflow: auto;
				  margin-top: 20px;
				  text-align: left;
				  color: rgb(71, 58, 61);
				  font-size: .9em;
				  clear: both;
		}
		.caracts{
				  clear: both;
				  height: 80px;
				  width: 100%;
				  float: left;
				  text-align: center;
		}
		.caract, .marque{
			height: 60px;
			width: auto;
			margin: 0 1%;
			vertical-align: middle;
		}
		.helper {
		    display: inline-block;
		    height: 100%;
		    vertical-align: middle;
		}
}

@media handheld, screen and (min-width: 1073px){
		.caracts {
  			height: 65px;
		}
		
		.caract {
  			height: 35px;
		}		
}