#introduction{background-color: #ffffff;
			padding: 2em;
			font-size: 1.12em;
			line-height: 1.6em;
			margin-bottom: 2em;}
.ns_box1{	display: inline-block;
			width: 390px;
			height: 390px;
			margin: 0 15px 30px 15px;
			overflow: hidden;
			background-color: #FFF;
			box-shadow: 0 1px 2px rgba(0,0,0,0.2);}
.ns_box1:hover{
			box-shadow: 0 3px 4px rgba(0,0,0,0.4);}
.ns_box1:hover .ns_img_div::after{
			background-color: rgba(0,0,0,0.5);}
.ns_box1 h3{margin: 0;
			font-weight: normal;
			font-size: 1em;}
.ns_box1 h3 a{display: block;
			position: absolute;
			width: 370px;
			height: 216px;
			margin: 0;
			padding: 159px 10px 15px 10px;
			color: #fefefe;
			text-align: left;
			font-family: 'Ubuntu', sans-serif;
			font-size: 1.6em;
			font-weight: 500;
			line-height: 1.4;
			text-decoration: none;
			background-image:-webkit-linear-gradient(rgba(0,0,0,0) 0px, rgba(0,0,0,0) 110px, rgba(0,0,0,0.15) 130px, rgba(0,0,0,0.5) 165px, rgba(0,0,0,0.5) 219px, rgba(0,0,0,0) 219px);
			background-image:-o-linear-gradient(rgba(0,0,0,0) 0px, rgba(0,0,0,0) 110px, rgba(0,0,0,0.15) 130px, rgba(0,0,0,0.5) 165px, rgba(0,0,0,0.5) 219px, rgba(0,0,0,0) 219px);
			background-image:linear-gradient(rgba(0,0,0,0) 0px, rgba(0,0,0,0) 110px, rgba(0,0,0,0.15) 130px, rgba(0,0,0,0.5) 165px, rgba(0,0,0,0.5) 219px, rgba(0,0,0,0) 219px);
			z-index: 100;}
.ns_img_div{position: absolute;
			width: 390px;
			height: 219px;
			background-size: cover;
			overflow: hidden;
			background-position: center top;}
.ns_img_div::after{
			content: '';
			display: block;
			position: absolute;
			width: 390px;
			height: 219px;
			background-color: rgba(0,0,0,0);
			transition-duration: 0.3s;}
.ns_box1:hover .ns_img_div::after{
			background-color: rgba(0,0,0,0.5);}
.ns_desc{	position: absolute;
			width: 360px;
			height: 117px;
			overflow: hidden;
			text-align: left;
			margin: 234px 0 0 0;
			color: #505050;
			font-size: 1.1em;
			padding: 0 20px;
			line-height: 1.5;}
.ns_vues{	position: absolute;	
			margin: 363px 0 0 20px;
			color: #bf0000;}
.ns_date::before{
			content: '';
			margin: 0 8px 2px 8px;
			display: inline-block;
			height: 5px;
			width: 5px;
			background-color: #d96666;
			border-radius: 50%;}
.ns_loupe{	position: absolute;
			width: 390px;
			height: 219px;
			overflow: hidden;}
.ns_loupe::after{
			position: relative;
			display: block;
			content: '';
			right:300px;
			top: 40px;
			width: 390px;
			height: 50px;
			background-image: url("../svg/loupe_2.svg");
			background-position: center;
			background-repeat: no-repeat;
			transition-duration:0.3s;
			-webkit-transition-duration:0.3s;
			-moz-transition-duration:0.3s;
			-o-transition-duration:0.3s;}
.ns_box1:hover .ns_loupe::after{
			right:0px;}

/****************************************
*
*	Versions tablettes
*
*****************************************/
@media screen and (max-width: 1040px){
	.ns_box1{	width: 360px;
				margin: 0 5px 15px 5px;}
	.ns_img_div{width: 360px;}
	.ns_box1 h3 a{width: 340px;
				font-size: 1.5em;}
	.ns_desc{	width: 340px;
				padding: 0 10px;}
	.ns_vues{	margin: 363px 0 0 10px;}
	.ns_loupe{	width: 360px;}
	.ns_loupe::after{width: 360px;}
}
/****************************************
*
*	Versions smartphones
*
*****************************************/
@media screen and (max-width: 635px){
	.ns_box1{	display: block;
				width: calc(100% - 10px);
				margin: 5px;}
	.ns_img_div{width: calc(100% - 10px);}
	.ns_box1 h3 a{width: calc(100% - 30px);}
	.ns_desc{	width: calc(100% - 30px);}
	.ns_loupe{	display: none;}
}
/****************************************
*
*	Versions petits mobiles
*
*****************************************/
@media screen and (max-width: 359px){
	.ns_box1 h3 a{font-size: 1.3em;}
}
