body {
	background-color: #eee;
	background: url(../img/n-grey-bkg.jpg) no-repeat center fixed;
	background-size:cover;
}

#wraper {
	background-color: #fff;
}

#rubrica{
	background: url(../img/r-news-boutiques.png) no-repeat top right;
}

section, header, footer{
	box-shadow: 0px 3px 20px #000;
}


section{
	margin-top:0.5em;
	margin-bottom:0.5em;
//	background: #066;
	float: left;
	position: relative;
	}
	
.illu{
	position:absolute;
	top:0;
	left:0;
	width:60%;
	height:100%;
	}		
	
#sec1 .illu{	
	background: #fff url(../img/n-design-05.jpg) no-repeat top center;	
//	background-size:cover;
	}
		
.illu-img {
	position:absolute;
	}				
	
#il1{
	bottom:0;
	left:19%;
	width:20%;
	height:auto;
	}
	
#il2{
	top:740px;
	left:15%;
	width:15%;
	height:auto;
	}	
		
#il3{
	top:60%;
	right:40%;
	width:25%;
	height:auto;
	}	
	
#il4{
	bottom:5%;
	left:0;
	width:22%;
	height:auto;
	}	
	
	
						
	
article {
	background: rgba(255,255,255,1);
	width: 40%;
	float: right;
}


@media only screen and (min-width: 801px) and (max-width: 1100px) {	

#il1{
	bottom:0;
	left:25%;
	width:27%;
	height:auto;
	}
	
#il2{
	top:750px;
	left:10%;
	width:18%;
	height:auto;
	}	
		
#il3{
	top:830px;
	right:40%;
	width:30%;
	min-width:320px;
	height:auto;
	}	
	
#il4{
	top:65%;
	left:0;
	width:29%;
	min-width:270px;
	height:auto;
	}
	
}

@media only screen and (max-width: 800px) {

.illu{
width:100%;
height:800px;
position:relative;
background-size: contain;
}

article {
width: 100%;
height:50%;
}


.illu-img, #il1, #il2, #il3, #il4 {
	position:static;
	float:left;
	height:auto;
	}
	
#il1{
	width:28.7%;
}
#il2{
	width:24.8%;
}
#il3{
	width:22.8%;
}	
#il4{
	width:23.7%;
}

}