#news{
	/*
	|--------------------------------------------------------------------------
	| Bloc des news
	|--------------------------------------------------------------------------
	*/
	.content{
		display: flex;
		justify-content: space-between;

		.news__title{
			@extend .din-extraBlack;
			font-size: 1.5rem;
			margin-bottom: 30px;
		}

		.news__body{
			@extend .absara-regular;
			font-size: 1rem;
		}


		//News Générales
		.news_generales{
			display: flex;
			flex-direction: column;
			margin-bottom: 30px;
			padding-left:0;
			width: 72%;

			.newsitem{
				display: flex;
				justify-content: space-between;
				margin-bottom: 30px;

				.date-image{
					display: flex;
					width: 54%;

					.date{
						@extend .absara-regular;
						font-size: 1rem;
						margin-right: 10px;
						width: 20%;
						border-top: 1px solid black;
						text-align: center;
						padding-top: 3px;
					}
				}

				.news_generale_text{
					width: 43%;

					.news__text.ellipsis{
						display: none;
					}
				}
			}
		}


		// News de salon
		.events{
			display:flex;
			flex-direction:column;
			padding-right: 0;
			width: 25%;

			.introduction{
				margin-bottom: 0px;

				h2{
					padding-bottom: 20px;
					margin-bottom: 20px;
					border-bottom: 1px solid $black;
				}
			}

			.event{
				margin-bottom: 30px;
			}
		}
	}

	/*
	|--------------------------------------------------------------------------
	| Newsletter
	|--------------------------------------------------------------------------
	*/
	.newsletter{
		width:100%;
		margin-top: 60px;

		a{
			@extend .din-bold;
			font-size: 1rem;

			text-align: center;

			display:flex;
			justify-content:center;
			align-items:center;

			width:100%;
			height:40px;
			border:2px solid black;
		
			&:hover{
				background-color: #000;
				color:white;
			}
		}
	}	
}



/*
|--------------------------------------------------------------------------
| IPAD VERTICAL
|--------------------------------------------------------------------------
*/
@media screen and (max-width: 768px){
	#news{
		.content{
			flex-direction: column-reverse;

			.newsletter{
				width: 50%;
				margin: 60px auto;
			}
			
			.news_generales{
				width: 100%;

				.newsitem{
					flex-direction: column;
					flex-wrap: wrap;

					.date-image{
						width: 100%;

						.date{
							width: 16%;
						}

						.image{
							width:100%;
							margin-bottom: 20px;

							img{
								width:100%;
							}
						}
					}
				

					.news_generale_text{
						width:100%;
						margin-left: 0px;

						.news__title{
							margin-bottom: 5px;
						}
					}
				}
			}


			// News de salon
			.events{
				width: 66%;
				display:flex;
				flex-direction: column;
				margin: 0 auto;

				.event img{
					margin-bottom: 6px;
					width: 100%;
				}

				.introduction h2{
					border-top: none;
					text-align: center;
					padding-top: 10px;
					padding-left: 5px;

					.news__title{
						margin-bottom: 30px;
					}
				}
			}
		}
	}
}



/*
|--------------------------------------------------------------------------
| PHONES
|--------------------------------------------------------------------------
*/
@media screen and (max-width: 480px){
	#news{
		.content{
			.newsletter{
				width: 100%;
			}
			
			.news_generales{
				.newsitem{
					.news_generale_text{
	
						.news__text.ellipsis{
							display: block;

							.openNews{
								text-decoration: underline;
								cursor: pointer;
							}

							&.newsClose{
								display: block;
							}

							&.newsOpen{
								display: none;
							}
						}

						.news__text.fullText{
							display: none;

							&.newsClose{
								display: none;
							}

							&.newsOpen{
								display: block;
							}
						}				
					}
				}
			}
		}
	}
}