@keyframes heroBoxBorderEnter {
	0% { clip-path: polygon(1% 0%, 50% 50%, 50% 50%, 50% 50%, 50% 50%); }
	20% { clip-path: polygon(1% 0%, 100% 0%, 100% 0%, 100% 0%, 50% 50%); }
	40% { clip-path: polygon(1% 0%, 100% 0%, 100% 100%, 100% 100%, 50% 50%); }
	80% { clip-path: polygon(1% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%); }
	100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%); }
}

@keyframes heroCompositeImageEinsEnter {
	0% { transform: scale(1.3); filter: blur(5px); }
	100% { transform: scale(1); filter: blur(0); }
}
@keyframes heroCompositeImageZweiEnter {
	0% { transform: scale(1.2); filter: blur(5px); }
	100% { transform: scale(1); filter: blur(1px); }
}
@keyframes heroCompositeImageDreiEnter {
	0% { transform: scale(1.1); filter: blur(5px); }
	100% { transform: scale(1); filter: blur(0); }
}

@keyframes heroDiamondEinsEnter {
	0% { transform: scale(2) rotate(45deg) translate(-70%, -70%); opacity: 0; }
	100% { transform: scale(2) rotate(45deg) translate(-50%, -50%); opacity: 1; }
}
@keyframes heroDiamondZweiEnter {
	0% { transform: scale(2) rotate(45deg) translate(30%, 30%); opacity: 0; }
	100% { transform: scale(2) rotate(45deg) translate(50%, 50%); opacity: 0.3; }
}
@keyframes heroDiamondDreiEnter {
	0% { transform: scale(2) rotate(45deg) translate(-70%, 30%); opacity: 0; }
	100% { transform: scale(2) rotate(45deg) translate(-50%, 50%); opacity: 1; }
}
@keyframes heroDiamondVierEnter {
	0% { transform: scale(2) rotate(45deg) translate(30%, -70%); opacity: 0; }
	100% { transform: scale(2) rotate(45deg) translate(50%, -50%); opacity: 1; }
}

@keyframes heroTextEnter {
	0% { transform: translate(-30%, 0%); opacity: 0; }
	100% { transform: translate(0%, 0%); opacity: 1; }
}

.hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
	overflow: hidden; }

.hero .composite-image {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center; }

	.hero .composite-image.eins { 
		animation: heroCompositeImageEinsEnter 0.3s both;
		animation-delay: 0.5s;
		z-index: 0; }
	.hero .composite-image.zwei { 
		animation: heroCompositeImageZweiEnter 0.5s both;
		animation-delay: 0.5s;
		filter: blur(1px);
		z-index: 10;  }	
	.hero .composite-image.drei { 
		animation: heroCompositeImageDreiEnter 0.8s both;
		animation-delay: 0.5s;
		z-index: 20; }

.diamond {
	position: absolute;
	top: 100% - 250px;
	left: 100% - 250px;
	width: 500px;
	height: 500px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } 

	.diamond.eins {
		background-color: rgba(0, 0, 0, 0.1);
		animation: heroDiamondEinsEnter 0.5s both;
		animation-delay: 1s;
		z-index: 5; }
	.diamond.zwei {
		background-color: var(--bexco-zwei);
		animation: heroDiamondZweiEnter 0.5s both;
		animation-delay: 1.6s;
		mix-blend-mode: hard-light;
		z-index: 11; }
	.diamond.drei {
/*		background: linear-gradient(to top, var(--bexco-zwei) 0%, var(--bexco-eins) 100%);*/
		background-color: rgba(0, 0, 0, 0.2);
		animation: heroDiamondDreiEnter 0.5s both;
		animation-delay: 1.2s;
		z-index: 5; }
	.diamond.vier {
		background-color: rgba(255, 255, 255, 0.1);
		animation: heroDiamondVierEnter 0.5s both;
		animation-delay: 1.4s;
		z-index: 5; }

.hero .box {
	position: relative;
	display: flex;
	align-items: end;
	justify-content: end;
	width: 89%;
	height: 68vh; } 	

	.hero .box .border {
		animation: heroBoxBorderEnter 2s both;
		animation-delay: 2s;
		position: absolute;
		width: 100%;
		height: 100%;
		border: 3px solid white;
		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
		z-index: 15; } 	

	.hero .box .content {
		position: relative;
		display: flex;
		width: 100%;
		height: 100%;
		padding: 3%;
		z-index: 25; } 	

	.hero .box .sup {
		animation: heroTextEnter 1s both;
		animation-delay: 3s;
		color: var(--bexco-eins);
		text-align: right;
		text-transform: uppercase;
		font-family: var(--bexco-bold);
		letter-spacing: 0;
		font-size: 3vw;
		padding-right: 1%; }
	.hero .box .sub {
		animation: heroTextEnter 1s both;
		animation-delay: 3.5s;
		text-align: right;
		text-transform: uppercase;
		font-family: var(--bexco-bold);
		font-size: 8vw;
		font-weight: 800;
		letter-spacing: 0;
		line-height: 0.8; }

 .hero .actions {
	animation: heroTextEnter 1s both;
	animation-delay: 3.7s;
 	display: flex;
 	justify-content: flex-end;
	text-transform: uppercase;
	font-size: 0.8vw;
	font-weight: 700;
	letter-spacing: 0; }

	.hero .actions a {
 		background-color: var(--bexco-eins);
		color: white;
		padding: 10px 60px 10px 20px;
		transition: 0.5s;  }

	.hero .actions a.eins {
		background-color: var(--bexco-zwei);
		clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% 50%, calc(100% - 30px) 100%, 0% 100%); }
	.hero .actions a.zwei {
		position: relative;
		left: -20px;
		padding: 10px 50px 10px 60px; 
		clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% 50%, calc(100% - 30px) 100%, 0% 100%, 30px 50%); }

	/*.hero .actions a:hover {
		background-color: var(--bexco-grey);
		color: var(--bexco-eins);
		transition: 0.3s; }*/
		
	.hero .actions a i {
		margin-right: 10px; }

.hero .gradient {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	height: 200px;
	background: linear-gradient(to top, var(--bexco-dark) 0%, transparent 100%);
	z-index: 30; }

.hero.left .box .content {
	align-items: end;
	justify-content: start; }
.hero.left .box .sup {
	text-align: left; }
.hero.left .box .sub {
	text-align: left; }	
.hero.left .actions { 	
	justify-content: start; }

.hero.right .box .content {
	align-items: end;
	justify-content: end; }
.hero.right .box .sup {
	text-align: right; }
.hero.right .box .sub {
	text-align: right; }	
.hero.right .actions { 	
	justify-content: flex-end; }

@media (max-width: 900px) {
	.hero.right .box .content {
	    align-items: center;
	    justify-content: center; }
	.hero .box .sup { 
		font-size: 10vw;
        text-align: center !important;  }
    .hero .box .sub {         
    	font-size: 17vw;
        text-align: center !important; }
    .hero .actions {
    	margin-top: 30px; }
}