@keyframes carouselFadein {
	0% {opacity: 0.0;}
	80% {opacity: 0.0;}
	99% {opacity: 1.0;/*background-color: #f0f;*/}
	100% {opacity: 1.0;}
}

#news {
	display: grid;
	grid-template-rows: 60vh;
	grid-template-columns: auto min(33%, 500px) min(66%, 1000px) auto;
	grid-template-areas: '. newsSelect newsView .';
	background-image: url("/style/svg.php/logo");
	background-position: center;
	background-size: min(400px,50vh,80vw) min(400px,50vh,80vw);
	background-repeat: no-repeat;
}
#newsSelect {
	animation: carouselFadein 2.5s;
	background-color: #000c;
	display: grid;
	grid-area: newsSelect;
	grid-template-areas: '.';
	grid-template-columns: 100%;
	grid-template-rows: auto max-content auto;
	overflow-y: auto;
}
#newsSelect > div > div {
	background-color:#fff1;
	border-right: 16px solid #0000;
	font-size:150%;
	height: 48px;
	margin: 2px 16px 2px 0px;
	padding: 18px 16px 0px 16px;
	overflow-x: hidden;
	transition: all 0.5s ease;
	white-space: nowrap;
}
#newsSelect > div > div.active {
	background-color:#26B78244;
}
#newsView {
	animation: carouselFadein 2.5s;
	background-color: #000c;
	grid-area: newsView;
}
#newsView > div:nth-child(1)
{
	height: calc(60vh - 32px);
	overflow-y: auto;
	padding: 16px;
	position:relative;
}
#newsView > div > div {
	opacity: 0.0;
	overflow-y: auto;
	position: absolute;
	transition: all 0.5s ease;
	visibility: hidden;
	width: calc(100% - 32px);
}
#newsView > div > div > article {
	max-width: unset;
	width: calc(100% - 32px);
	margin-top:16px;
}
#newsView > div > div > article > h1,
#newsView > div > div > article > h2,
#newsView > div > div > article > h3,
#newsView > div > div > article > h4,
#newsView > div > div > article > h5,
#newsView > div > div > article > h6 {
	white-space: nowrap;
}
#newsView > div > div > article > div.metadata {
	/*float:right;*/
	padding: 8px 8px 8px 12px;
	margin-top: 8px;
	border-radius: 8px;
	background-color: #aaa1;
}
#newsView > div > div > article > div.metadata > span {
	display: inline-block;
	padding-right: 32px;
}

#newsView > div > div.active {
	opacity: 1.0;
	visibility: visible;
}

.newsButton {
	display: none;
	position: absolute !important;
	top: 0 !important;
	z-index: 3 !important;
	width: max(5vh,5vw) !important;
	height: max(5vh,5vw) !important;
	background-image: url("/style/svg.php/external/material_design/filled/arrow_circle_down-48dp?c=fff");
	background-position: center;
	background-size: max(5vh,5vw) max(5vh,5vw) !important;
	background-repeat: no-repeat;
	overflow-y: hidden !important;
}

.newsButton.right {
	right: 5vw;
	transform: rotate(-90deg);
}

.newsButton.left {
	left: 5vw;
	transform: rotate(90deg);
}


@media only screen and (max-width: 999px) {
	#news {
		grid-template-areas: '. newsView newsView .';
	}
	#newsSelect {
		display: none;
	}
	.newsButton {
		display: block !important;
		opacity: 0.50 !important;
		visibility: visible !important;
	}
}