.general {
	background-color: #DDD;
}

ul.article_petit {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	clear: both;
	list-style-type : none;
    text-align: center;
    justify-content: center;
}
ul.article_petit li {
	display: inline-block;
    vertical-align: top;
    background:rgba(255,255,255,1);
    margin: 10px 0.5%;
	padding: 10px 10px 5px;
	width: 29%;
	opacity: 1;
	transition: all 0.2s;
	-moz-transition: all 0.2s; /* Firefox 4 */
	-webkit-transition: all 0.2s; /* Safari and Chrome */
	-o-transition: all 0.2s; /* Opera */
	-webkit-box-shadow: 5px 5px 5px -3px rgba(51,51,51,1);
	-moz-box-shadow: 5px 5px 5px -3px rgba(51,51,51,1);
	box-shadow: 5px 5px 5px -3px rgba(51,51,51,1);
}

ul.article_petit li:hover {
	background:rgba(0,0,0,0.4);
}

.article_petit img {
    margin: 0;
    width: 100%;
    //max-width: 680px;
	height: auto;
}

ul.article_petit li h2 {
    font-family: Impact, Futura, sans-serif;
    font-size: 18px;
    line-height: 24px;
	color: #000;
	height: 48px;
    text-align: left;
	margin: 0;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 2px;
}

ul.article_mini {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	clear: both;
	list-style-type : none;
    text-align: center;
}
ul.article_mini li {
	display: inline-block;
    vertical-align: top;
    background:rgba(255,255,255,1);
    margin: 0 0.5% 10px;
	padding: 10px;
	width: 29%;
	opacity: 1;
	transition: all 0.2s;
	-moz-transition: all 0.2s; /* Firefox 4 */
	-webkit-transition: all 0.2s; /* Safari and Chrome */
	-o-transition: all 0.2s; /* Opera */
	-webkit-box-shadow: 5px 5px 5px -3px rgba(51,51,51,1);
	-moz-box-shadow: 5px 5px 5px -3px rgba(51,51,51,1);
	box-shadow: 5px 5px 5px -3px rgba(51,51,51,1);
}

ul.article_mini li:hover {
	background:rgba(0,0,0,0.4);
}

.article_mini img {
    margin: 0;
    width: 100%;
    max-width: 96px;
    float: left;
	height: auto;
}

ul.article_mini li h2 {
    font-family: Impact, Futura, sans-serif;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 2px;
	color: #000;
	height: 63px;
    text-align: left;
/*    font-weight: bold;*/
	margin: 0;
	padding-left: 10px;
    overflow: hidden;
    text-transform: uppercase;
}


.resume_petit, .points {
	color: #000;
	font-size: 14px;
	line-height: 18px;
}

.resume_petit {
    text-align: left;
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 54px;
}

.points {
    margin: 0;
	padding: 0;
	font-style: italic;
    text-align: left;
}


@media only screen and (max-width : 1024px) {
}
    
@media only screen and (max-width : 1280px) {
	ul.article_petit li h2 {
    	font-size: 14px;
	}
}

@media only screen and (min-width : 1600px) { 
}

@media only screen and (min-device-width : 769px) and (max-width : 1023px) {
	ul.article_petit li h2 {
		font-size: 12px;
		line-height: 16px;
	}
	ul.article_mini li h2 {
		font-size: 12px;
		line-height: 16px;
		height: 64px;
	}
}
	

@media only screen and (max-device-width : 768px) {
	.general {
		background-color: #FFF;
	}
	ul.article_petit li {
		border-width: 0;
    	margin: 0 0 20px;
		padding: 0;
		width: 100%;
		-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	}
	ul.article_petit li:hover {
		background:inherit;
	}
	ul.article_petit li h2 {
    	padding: 0 1%;
/*    	text-align: center;*/
    }
    
    ul.article_mini li {
		border-width: 0;
    	margin: 0 0 20px;
		padding: 0;
		width: 100%;
		-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	}
	ul.article_mini li:hover {
		background:inherit;
	}
	ul.article_mini li h2 {
    	padding: 0 10px;
    }
    .resume_petit, .points {
		display: none;
	}
	
}