/* INTRO ANIMATION

01	GENERAL


*/

/* -----------------------------------------------------------------------
	01	GENERAL
/* ---------------------------------------------------------------------*/

 .wfbb-intro-animation {
	 background: #fff;
	position: fixed;
	width: 100%;
	height: 100%;
     z-index: 1000000000000;
}

.wfbb-intro-animation svg {
	width: 100%;
	height: 100%;
}

.wfbb-intro-animation rect#Loading_Bar {
    fill: var(--color-primary);
}

.wfbb-intro-animation .bb-cutout,
.wfbb-intro-animation .bb-loading {
	opacity: 0;
}

.wfbb-intro-animation .wfbb-logo-animation {
	opacity: 0;;
	transform-origin: 50% 50%;
	animation: wfbb_logo .75s ease-in-out 5s forwards;
}

.wfbb-intro-animation .wfbb-logo-animation #wfbb-arbeit-logo,
.wfbb-intro-animation .wfbb-logo-animation #energyagency-logo {
	display: none;
}

.wfbb-intro-animation .bb-cutout,
.wfbb-intro-animation .bb-loading {
	transform: scale(1.6);
}

.wfbb-intro-animation .bb-cutout {
	transform-origin: 50% 50%;
	animation: bb_overlay .1s ease-in-out 3.75s forwards, bb_maps_shift .75s ease-in-out 5s forwards;
}

.wfbb-intro-animation .bb-loading {
	transform-origin: 50% 30%;
	transform: scale(1.6);
	animation: bb_loading 1s ease-in-out 4s forwards, bb_maps_shift .75s ease-in-out 5s forwards;
}

.wfbb-intro-animation #Brandenburg_Outline {
	fill: none;
	stroke: var(--color-primary);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 500 501;
	stroke-dashoffset: 500;
	animation: map_path 4s ease-in-out 0s forwards;
}

.wfbb-intro-animation #Gruppe_maskieren_1,
.wfbb-intro-animation .Deutschland-Map,
.wfbb-intro-animation .Brandenburg-Map {
	transform: scale(1);
	transform-origin: 50% 50%;
}

.wfbb-intro-animation .Brandenburg-Map {
	animation: bb_maps_shift .75s ease-in-out 5s forwards;
}

.wfbb-intro-animation #Gruppe_maskieren_1 {
	animation: map_zoom 2s ease-in-out 1.5s forwards, maps_fadeout .75s ease-in-out 2.5s forwards;
}

@keyframes map_path {
	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes map_zoom {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.6)
	}
}

@keyframes maps_fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes bb_overlay {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes bb_loading {
	0% {
		opacity: 0;
		transform-origin: 50% 30%;
	}
	30% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform-origin: 50% 50%;
	}
}

@keyframes bb_maps_shift {
	0% {
		transform-origin: 50% 50%;
	}
	100% {
		transform-origin: 60% 50%;
	}
}

@keyframes wfbb_logo {
	0% {
		opacity: 0;
		transform: translateX(0%);
	}
	100% {
		opacity: 1;
		transform: translateX(5%);
	}
}

.intro-animation-button {
	position: absolute;
	bottom: 0;
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 0 0 3rem 0;
}


@media (max-width: 991px) {
    
    .wfbb-intro-animation {
        transform: scale(1.5);
    }
      
}

@media (max-width: 767px) {
    
    .wfbb-intro-animation {
        display: none !important;
        transform: scale(2.5);
    }
      
}

@media (max-width: 500px) {
    
    .wfbb-intro-animation {
        transform: scale(3);
    }
      
}