/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v13/DgBpgaYycijFA8v2hNt7MfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v13/peRd8sj511qE2lHtK-QfcPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v13/yg0glPPxXUISnKUejCX4qfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v13/pEobIV_lL25TKBpqVI_a2w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}



/*********************************************************************
SALVATTORE
*********************************************************************/
/* Again, you re free to use and define the classes: */

.clean{clear:both;}
.clearAfter {
    content: '';
    display: block;
    clear: both;}

	/*BACKGROUND des etiquettes en fonction des rubriques*/
	.backgroundRub1 {background:#8A5E8C!important;box-shadow: 7px 0 0 #8A5E8C, -7px 0 0 #8A5E8C, 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)!important;}/*SPIP*/
	.backgroundRub2 {background:#116272!important;box-shadow: 7px 0 0 #116272, -7px 0 0 #116272, 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)!important;}}/*WEBDESIGN*/
	.backgroundRub3 {background:!important;}
	.backgroundRub4 {background:#8A5E8C!important;box-shadow: 7px 0 0 #8A5E8C, -7px 0 0 #8A5E8C, 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)!important;}/*SPIP*/
	.backgroundRub5 {background:#8A5E8C!important;box-shadow: 7px 0 0 #8A5E8C, -7px 0 0 #8A5E8C, 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)!important;}/*SPIP*/
	.backgroundRub6 {background:#8A5E8C!important;box-shadow: 7px 0 0 #8A5E8C, -7px 0 0 #8A5E8C, 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)!important;}/*SPIP*/
	.backgroundRub7 {background:!important;}
	.backgroundRub8 {background:!important;}
	.backgroundRub8 {background:!important;}
	.backgroundRub9 {background:!important;}
	.backgroundRub10{background:!important;}
	.backgroundRub11{background:#2384FD!important;box-shadow: 7px 0 0 #2384FD, -7px 0 0 #2384FD, 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)!important;}}/*MODELE*/
	.backgroundRub12{background:!important;}
	.backgroundRub13{background:!important;}
	.backgroundRub14{background:#ff4e00!important;box-shadow: 7px 0 0 #ff4e00, -7px 0 0 #ff4e00, 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)!important;}}/*CONFERENCE*/
	.backgroundRub15{background:!important;}	
	.backgroundRub16{background:!important;}	
	.backgroundRub17{background:#8A5E8C!important;box-shadow-color:#8A5E8C!important;}/*SPIP*/	
	
	
	
.zoneTitre{position:relative;display:table;}

	.zoneTitre .titrePrincipal{
		position:relative;
		display:inline-block;
		margin:0 5px 0 0;
		padding:15px 20px;
		font-family:'Oswald';
		font-size:40px;
		font-weight:200;
		font-style:normal;
		text-transform:uppercase;
		color:white;
		background:#7eb200;}
		
	.zoneTitre .zone_titreSecondaire{
		display:table-cell;vertical-align:bottom;}
		
		.zoneTitre .titreSecondaire{
			display:list-item;float:left;
			margin:5px 5px 0 0;
			padding:5px 15px;
			list-style-type:none;
			font-family:'Oswald';
			font-size:15px;
			text-transform:uppercase;letter-spacing:1px;
			color:white;
			background:#ccc;
			border:1px solid #ccc;}
			.zoneTitre .titreSecondaire:hover{color:#ccc;background:white;border:1px solid#ccc;}


.column { float: left;}
.size-1of1 { width: 100%;}
.size-1of2 { width: 50%;}
.size-1of3 { width: 33.333%;}
.size-1of4 { width: 25%;}
.size-1of5 { width: 20%;}
.size-1of6 { width: 16.666%;}


	#grid-actualite .grid-item > #grid-actualite .grid-item{margin-top:15px;}
	#grid-actualite .grid-item{display:block;position:relative;margin:5px;background:#f0f0f0;}
		#grid-actualite .grid-item:hover{cursor:pointer;}
	
	#grid-actualite .grid-item-in{display:none;padding:10px;}
	#grid-actualite .grid-item .logo {position:relative;}
		#grid-actualite .grid-item .logo .effet{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);transition:all ease 0.2s;}

	#grid-actualite .grid-item .logo img{width:100%;height:auto;}
	/* #grid-actualite .grid-item .logo .info{position:absolute;display:inline-block;padding:0 5px;top:0px;right:0px;color:white;line-height:20px;font-size:11px;background:rgba(0,0,0,0.8);} */
	/* #grid-actualite .grid-item .logo .info .comment{display:inline-block;padding:5px 10px 5px 25px;background:url(../img/ico_comment.svg) left center no-repeat;background-size:100%;} */

	#grid-actualite .grid-item .logo .info{position:absolute;display:inline-block;top:0px;right:0px;}
	#grid-actualite .grid-item .logo .info .comment{display:inline-block;padding:5px 9px;color:white;font-size:13px;font-family: 'Oswald', sans-serif;background:rgba(0,0,0,0.6);border-left:2px solid white;border-bottom:2px solid white}	
	
	#grid-actualite .grid-item .logo .info .comment:before{position:absolute;bottom:-8px;left:4px;display:block;content:"";width:0;border-color:transparent white;border-style:solid;border-width:0 0 8px 10px;}
	#grid-actualite .grid-item .logo .info .comment:after{position:absolute;bottom:-4px;left:6px;display:block;content:"";width:0;border-color:transparent rgba(0,0,0,0.9);border-style:solid;border-width:0 0 6px 7px;}
	
	/* #grid-actualite .grid-item .logo .info .comment:before{width: 0;height: 0;border-style: solid;border-width: 10px 10px 0 0px;border-color: blue transparent transparent transparent;} */
	/* #grid-actualite .grid-item .logo .info .comment:after{width: 0;height: 0;border-style: solid;border-width: 15px 15px 0 0px;border-color: red transparent transparent transparent;}	 */
	
	#grid-actualite .grid-item .logo .inner{position:absolute;display:block;bottom:10px;left:10px;width:80%;margin-left:3px/*decalage a cause des BORDER EN BOX SHADOW*/;}
	#grid-actualite .grid-item .logo .etiquette{
		position:relative;
		display:inline-block;
		padding-top:1px;
		height:23px;line-height:23px;
		text-transform:uppercase;
		font-family: 'Oswald', sans-serif;font-size:13px;letter-spacing:1px;
		color:white;
		background:#c00;
		box-shadow: 7px 0 0 #c00, -7px 0 0 #c00, 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}

		
	#grid-actualite .grid-item .logo .titre{
		position:relative;
		display:inline;
		min-height:30px;line-height:30px;
		font-family: 'Oswald', sans-serif;
		font-size:22px;
		color:#000;
		background:white;
		box-shadow: 7px 0 0 white, -7px 0 0 white, 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
		transition:all ease 0.5s;}
	/* HOVER*/	
		#grid-actualite .grid-item:hover .logo .titre{
			color:black;
			box-shadow: 7px 0 0 white, -7px 0 0 white, 0 3px 6px rgba(0,0,0,0.5), 0 3px 6px rgba(0,0,0,0.5);
			transition:all ease 0.5s;}
		#grid-actualite .grid-item:hover .logo .effet{background:rgba(0,0,0,0);transition:all ease 0.2s;}
	
	
@media screen and (max-width: 849px){
	#grid-actualite[data-columns]::before {content: '1 .column.size-1of1';}
	.zoneTitre .titrePrincipal{display:block;text-align:center;}
	.zoneTitre .zone_titreSecondaire{display:block;vertical-align:bottom;clear:both;}
}

@media screen and (min-width: 850px) and (max-width: 1199px) {
	#grid-actualite[data-columns]::before {content: '2 .column.size-1of2';}
}
@media screen and (min-width: 1200px) and (max-width: 1499px) {
	#grid-actualite[data-columns]::before {content: '3 .column.size-1of3';}
}
@media screen and (min-width: 1500px) and (max-width: 1999px)  {
	#grid-actualite[data-columns]::before {content: '4 .column.size-1of4';}
}
@media screen and (min-width: 2000px) and (max-width: 2299px)  {
	#grid-actualite[data-columns]::before {content: '5 .column.size-1of5';}
}
@media screen and (min-width: 2300px) {
	#grid-actualite[data-columns]::before {content: '6 .column.size-1of6';}
}