/*
 * Datenbankvorlage Fake News Generator
* Version 1.0
 * @Autor 2022 Florian Dagner
 * @license CC BY-NC-SA 2.0 DE
 */

.flexnews
{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start
}

.flexitem
{
	width:350px;
	padding:5px
}

@media only screen and (max-width: 900px) {
  .flexitem {
   width:100%;
  }
}

.image
{
	min-height:100px;
}

.white-on-red
{
	text-transform:uppercase;
	background-color:red;
	color:#fff;
	font-weight:700;
	text-align:center;
	vertical-align:middle;
	display:table-cell;
	padding:3px 6px;
	font-size:calc(10px + (16 - 10) * ((100vw - 320px) / (1600 - 320)));
	position:absolute;
	top:10px
}

.content
{
	max-width:900px;
	width:98%;
	display:block;
	position:relative;
	background-color:#000
}

.content img
{
	width:100%;
	height:100%
}

.news-bg
{
	position:absolute;
	filter:blur(5px);
	width:100%;
	background-position:center
}

.bottom
{
	position:relative
}

.bottom .headline
{
	background-color:rgba(255,0,0,0.8);
	color:#fff;
	font-size:calc(20px + (40 - 20) * ((100vw - 320px) / (1600 - 320)));
	text-align:left;
	display:block;
	padding:3px;
	bottom:5%;
	position:absolute
}

.bottom .headlinelist
{
	background-color:rgba(255,0,0,1.0);
	color:#fff;
	font-size:20px;
	text-align:left;
	display:block;
	padding:3px
}

.bottom .ticker
{
	color:#fff
}

.ticker .time
{
	width:100px;
	text-align:center;
	font-weight:700;
	color:#000;
	float:left
}

.ticker .text
{
	padding-left:10px;
	color:#000;
	background-color:rgba(230,230,230,1.0)
}