.roller
{
	position:absolute;
	right:0px;
	top:0px;
	width:300px;
	height:300px;
	pointer-events:none;
	z-index:1001;
}

.roller .inner
{
	position:absolute;
	top:29%;
	left:29%;
	width:142%;
	height:142%;
	transform:rotate(-45deg);
	pointer-events:auto;
}

.roller .bg
{
	position:absolute;
	top:0px;
	right:0px;
	width:35%;
	height:100%;
	background:url(../images/riss_2022.png) top right/424px no-repeat;
	transition: 1s ease-out;
}

.roller.open .bg
{
	animation: rolleranimation 6s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
}

@keyframes rolleranimation {
	 
	 0%    {width: 35%;   }
  	 10%   {width: 35%;    }
	 20%   {width: 100%;    }
	 80%   {width: 100%;    }
	 90%   {width: 35%;    }
	 100%  {width: 35%;    }
}

.roller:hover .bg
{
	width:100%;
}

.roller .handle
{
	position:absolute;
	left:-42px;
	top:0px;
	height:100%;
	width:84px;
	background:url(../images/rolle.png) top right/100% no-repeat;
}


@media (max-width: 1025px)
{	
	.roller .bg
	{
		width:100%;
	}	
}


@media (max-width: 700px)
{	
	.roller
	{
		width:150px;
		height:150px;
	}
		
	.roller .bg
	{
		background:url(../images/riss_2022.png) top right/212px no-repeat;
	}
		
	.roller .handle
	{
		left:-21px;
		width:42px;
	}
	
}