@charset "UTF-8";
.fade {
	-webkit-animation: topimgr 1.0s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.2s both;
	animation: topimgr 1.0s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.2s both;}

	
			

#random{
	width:calc(100% - 18px);
	height:auto;
	position:relative;
	top:-51px;
	border:#FFF4E0 solid 2px;
	box-shadow:	0 0 30px rgb(0 0 0 / 0.8),
	0 0 40px rgb(0 0 0 / 0.5);
	padding:7px;
		background-repeat:no-repeat;
	background-position:center center;
	background-attachment:scroll;
	background-size:cover;
}
	
	
	
	@-webkit-keyframes random {
			  0% {
				opacity: 0;
			  }
			  100% {
				opacity: 1.0;
			  }
			}
			@keyframes random {
			  0% {
				opacity: 0;
			  }
			  100% {
				opacity: 1.0;
			  }
			}
			
	.heartbeat {
	-webkit-animation: heartbeat 3s ease-in-out infinite both;
	        animation: heartbeat 3s ease-in-out infinite both;
}


@-webkit-keyframes heartbeat {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes heartbeat {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}


.crossfade {
    position: relative;
    display: inline-block;
    width: 99%;          /* entspricht der Bildbreite */
}

.crossfade img {
    width: 100%;
    height: auto;
}

.crossfade .img2 {
    position: absolute;
    top: 0;
    left: 0;
}

/* Animation */
.img1 {
    animation: fade1 7s infinite;
}

.img2 {
    animation: fade2 7s infinite;
}

@keyframes fade1 {
    0%,45%   { opacity: 1; }
    50%,95%  { opacity: 0; }
    100%     { opacity: 1; }
}

@keyframes fade2 {
    0%,45%   { opacity: 0; }
    50%,95%  { opacity: 1; }
    100%     { opacity: 0; }
}