.article
{
	position:relative;
	z-index:1;
	width:100%;
	
	overflow:hidden;
	
	
	display: flex;
	justify-content: center;
	flex-direction: column;	
	
	padding-left:10rem;
	padding-top:5rem;
	padding-bottom:5rem;
	padding-right:10rem;
}

.article.fixed
{
	z-index:-2;
	position:fixed;
	left:0;
	top:0;
	height:100%;
	
	background:none;
}

.article.red
{
	background:url('../../images/includes/grain60p.png') var(--color-highlight);
}

.article.grey
{
	
	height:auto;
	background:url('../../images/includes/grain60p.png') var(--color-grey);
}

.article.grey p
{
	color:var(--color-normal);
}

.article .subtitle
{
	display:inline;
	position:relative;
	width:auto;
	height:auto;
	z-index:0;
	margin:1em;
	margin-left:0.5em;
	margin-bottom:0;
	padding:0;
	font-size:var(--size-abitmore);
	line-height:1em;
	background:none;
	color:var(--color-hover);
}


.article.empty
{
	height:500px;
	opacity:0;
	pointer-events:none;
	background:none;
}

.article.shadow
{
	position:absolute;
	width:100%;
	height:300px;
	z-index:-1;
	//box-shadow:-1em 0.1em 1.5em 0 black;
}

.article:nth-child(1)
{
	opacity:1;
	animation:none;
}

.article:nth-child(2)
{
	opacity:0;	
	animation:fadeIn_fromFarLeft 0.5s 1 ease 2s forwards;
}

.article:nth-child(3)
{
	opacity:0;	
	animation:fadeIn_fromFarLeft 0.5s 1 ease 2.5s forwards;
}

.article:nth-child(4)
{
	opacity:0;	
	animation:fadeIn_fromFarLeft 0.5s 1 ease 2.5s forwards;
}

.article:nth-child(5)
{
	opacity:0;	
	animation:fadeIn_fromFarRight 0.5s 1 ease 3s forwards;
}

.article:nth-child(6)
{
	opacity:0;	
	animation:fadeIn_fromFarLeft 0.5s 1 ease 3.5s forwards;
}

.article:nth-child(7)
{
	opacity:0;	
	animation:fadeIn_fromFarRight 0.5s 1 ease 4s forwards;
}




.article img.background
{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	object-fit:cover;
	opacity:1;
	pointer-events:none;
	z-index:-1;
}

.article img.logo
{
	z-index:-1;
	padding:0;
	margin:0;
	width:auto;
	height:300px;
	position:absolute;
	left:auto;
	right:9rem;
	bottom:0px;
}

.icon.center
{
	padding:0;
	margin:0;
	position:absolute;
	left:50%;
	top:250px;
	pointer-events:auto;
}

.icon.big
{
	transform:scale(2.0,2.0);
	transform-origin: 0% 0%;
}

.appear.right
{
	padding:0;
	
	position:absolute;
	right:calc(50% - 22rem);
	top:250px;
	height:2em;
	width:calc(25% + 22rem);
	
	display: flex;
	justify-content: center;
	flex-direction: column;	
}

.appear.right p
{
	text-align:right;
	margin:0;
	padding-right:calc(1em + 22rem);
	color:var(--color-hover);
	font-size:var(--size-abitmore);
	
	opacity:0;	
	animation:fadeIn_fromLeft 0.6s 1 ease 2.4s forwards;
}

.appear.right.dark p
{
	color:var(--color-dark);
}

.appear.right::before
{
	z-index:0;
	content:'';
	position:absolute;
	left:2px;
	top:1px;
	width:100%;
	height:100%;
	
	opacity:0;
	
	background:var(--color-dark-bg-translucent);
	
	animation:fadeIn_fromLeft 1s 1 ease 2s forwards;
	
	border-radius:0.5em;
}

.appear.right.dark::before
{
	background:none;
}

.main
{
	font-size:var(--size-big);
}

.main b
{
	font-weight:var(--weight-thick);
}