@keyframes fromLeft {
    0% {transform: translateX(-50px); opacity: 0}
    100%   {transform: translateX(0); opacity: 1}
}
@keyframes fromTop {
    0% {transform: translateY(-50px); opacity: 0}
    100%   {transform: translateY(0); opacity: 1}
}
@keyframes toTop {
    0% {transform: translateY(50px); opacity: 0}
    100%   {transform: translateY(0); opacity: 1}
}
.loaded .from-left-animation,.loaded .from-top-animation,.loaded .to-top-animation{
    opacity: 0;
}
.loaded .active .from-top-animation {
    animation-name: fromTop;
    animation-duration: 800ms;
    animation-fill-mode: both;
    transform-style: preserve-3d;
}
.loaded .active .to-top-animation {
    animation-name: toTop;
    animation-duration: 800ms;
    animation-fill-mode: both;
    transform-style: preserve-3d;
}
.loaded .active .from-left-animation {
    animation-name: fromLeft;
    animation-duration: 800ms;
    animation-fill-mode: both;
    transform-style: preserve-3d;
}

.header-banner {
	/* background-image: url("https://www.121watt.de/wp-content/uploads/2019/03/seminar-situation.jpg"); */
	background-image: url("https://www.121watt.de/wp-content/themes/121watt_2019/img/seminar-situation-online-marketing.jpg");
	background-size: cover;
	background-position: center;
	
    width: 100%;
    height: 525px;
    color: #000;
	opacity: 1;
	display: block;
	margin: 0 auto 1.5rem;
	position: relative;
	top: 0;
	font-size: 21px;
	line-height: 1.5;
}
.header-banner .headline {
	display: block;
    font-size: 40px;
    font-weight: 600;
    font-family: Arial, sans-serif;
    letter-spacing: 0;
    line-height: 1;
    margin: 0 0 1rem;
}
.header-banner .banner-content {
    width: 840px;
	float: right;
	padding: 2.5rem 0;
}
.header-banner .banner-content img {
	width: auto;
	height: 250px;
	float: right;
	margin: 0 0 1rem 2rem;
}
.header-banner p{    
    letter-spacing: 0;
    margin: 0;
}
.header-banner .button-container {
	margin-top: 3em;
}


/* Mobile */
@media all and (max-width: 1080px) {
    .header-banner h2, .header-banner .headline {
        font-size: 30px;
    }
	.header-banner .button-container {
		margin-top: 1em;
	}
}
@media all and (max-width: 960px) {    
    .header-banner {
		height: auto;
		min-height: 300px;
		margin-top: -1rem;
	}
	.header-banner .banner-content {
		width: auto;
		float: none;
	}
}
@media all and (min-width: 960px) and (max-width: 1200px) {
	.header-banner .banner-content {
		width: 69%;
	}
	.header-banner .headline {
		font-size: 30px;
		line-height: 36px;
		margin-bottom: 15px;
	}
}
@media all and (max-width: 550px) {
	.header-banner h2, .header-banner .headline {
		font-size: 26px;
		line-height: 1.2;
	}
	.header-banner, .header-banner a {
		font-size: 16px;
		line-height: 22px;
	}
	.header-banner a {
		padding: 5px 10px;
	}
	.header-banner .banner-content img {
		height: 200px;
		margin: 0 0 1rem 1rem;
	}
}
@media all and (max-width: 420px) {
	.header-banner .banner-content img {
		height: 125px;
	}
}
@media all and (max-width: 370px) {
	.header-banner .banner-content img {
		height: 100px;
	}
}
@media all and (max-width: 290px) {	
	.header-banner .banner-content img {
		height: 85px;
	}
	.header-banner, .header-banner a {
		font-size: 14px;
		line-height: 20px;
	}
}
@media all and (max-width: 230px) {
	.header-banner {
		display: none;
	}
}