:root
{
--newsBack: rgba(255, 255, 255, 0.9);
--newsBack2: #ffffff;
}

#middle
{
display: flex;
flex-wrap: wrap;
background-color: var(--color5-rgba);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color1-rgba) var(--color4-rgba);
}

.newsList
{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}

#newsListLeft
{
display: flex;
align-items: center;
justify-content: center;
}

#newsListRight
{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}

.newsListTitle
{
display: block;
color: var(--color4);
}

.newsListSumm
{
display: block;
font-family: "Font2";
box-sizing: border-box;
}

/*La news pleine page*/
#newsHidden
{
position: absolute;
top: 3vh;
left: 3vw;
display: flex;
width: 92vw;
height: 92vh;
visibility: hidden;
z-index: 2;
background-color: var(--newsBack2);
border: 1px solid var(--color1);
}

.newsTitle
{
display: block;
color: var(--color4);
}

.newsText
{
display: block;
font-family: "Font2";
box-sizing: border-box;
}

#newsHiddenL
{
display: flex;
align-items: center;
justify-content: center;
}

#newsHiddenR
{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}

		

	/*vertical*/
	@media screen and (orientation: portrait)
	{
		#middle
		{
		width: 98vw;
		height: 76vh;
		justify-content: center;
		}
		
		.newsList
		{
		width: 96vw;
		height: 20vh;
		box-sizing: border-box;
		border: 1px solid var(--color1);
		margin-top: 1vh;
		}
		
		#newsListLeft
		{
		width: 47vw;
		height: 20vh;
		}
		
		#newsListRight
		{
		width: 47vw;
		height: 20vh;
		}
		
		.newsListImg
		{
		max-width: 45vw;
		max-height: 18vh;
		}
		
		.newsListTitle
		{
		height: 5vh;
		width: 47vw;
		font-size: 1.5vh;
		text-align: center;
		}
		
		.newsListSumm
		{
		height: 21vh;
		width: 47vw;
		font-size: 2vh;
		padding: 1vh;
		}
		
		#newsHidden
		{
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		}
		
		
		#newsHiddenL
		{
		width: 92vw;
		height: 45vh;
		}
		
		.newsImg
		{
		max-width: 90vw;
		max-height: 40vh;
		}
		
		#newsHiddenR
		{
		width: 92vw;
		height: 45vh;
		}
		
		.newsTitle
		{
		width: 92vw;
		height: 5vh;
		font-size: 5vw;
		text-align: center;
		}
		
		.newsText
		{
		display: block;
		text-align: justify;
		box-sizing: border-box;
		padding: 1vh;
		width: 92vw;
		height: 37vh;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--color1-rgba) var(--color4-rgba);
		}
	
	}
	
	/*horizontal*/
	@media screen and (orientation: landscape)
	{
		header
		{
		height: 96vh;
		}
		
		#middle
		{
		width: 78vw;
		height: 96vh;
		justify-content: space-around;
		}
		
		.newsList
		{
		width: 24vw;
		height: 50vh;
		box-sizing: border-box;
		border: 1px solid var(--color1);
		margin-top: 1vh;
		}
		
		#newsListLeft
		{
		width: 24vw;
		height: 23vh;
		}
		
		#newsListRight
		{
		width: 24vw;
		height: 26vh;
		}
		
		.newsListImg
		{
		max-width: 18vw;
		height: 22vh;
		}
		
		.newsListTitle
		{
		height: 8vh;
		width: 24vw;
		font-size: 1.5vw;
		text-align: center;
		}
		
		.newsListSumm
		{
		height: 15vh;
		width: 24vw;
		font-size: 1.8vw;
		padding: 1vh;
		}
		
		#newsHidden
		{
		justify-content: center;
		align-items: center;
		}
				
		#newsHiddenL
		{
		width: 45vw;
		height: 92vh;
		}
		
		.newsImg
		{
		max-width: 43vw;
		max-height: 88vh;
		}
		
		#newsHiddenR
		{
		width: 45vw;
		height: 92vh;
		}
		
		.newsTitle
		{
		width: 43vw;
		height: 5vh;
		font-size: 5vh;
		text-align: center;
		}
		
		.newsText
		{
		display: block;
		text-align: justify;
		box-sizing: border-box;
		padding: 1vh;
		width: 43vw;
		height: 45vh;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--color1-rgba) var(--color4-rgba);
		}
		
	}