.component_grid-intro-animation { overflow: hidden; background: url(assets/spinner.gif) 50% 50% no-repeat; }

/* Loading */
	.component_grid-intro-animation.loaded { background: none; }

/* Texts */
	.component_grid-intro-animation .h1,
	.component_grid-intro-animation p { color: #fff; padding:0 20px; will-change: opacity, transform; z-index: 3; }
	.component_grid-intro-animation .h1 { font-size: 32px; margin-bottom: 10px; margin-top: 30px; }
	.component_grid-intro-animation.homepage-animation .h1 { bottom: 50%; }
	.component_grid-intro-animation p { font-size: 16px; margin-top: 10px; }
	.component_grid-intro-animation button { position: absolute; left: 40px; bottom: 15%; margin: 20px 0; }
	.component_grid-intro-animation.homepage-animation p { margin-top: 5%; }

/* gfx */
	.component_grid-intro-animation .bg { will-change: transform; z-index: 1; width: 100%; }
	.component_grid-intro-animation .hexagon { background: 50% 0% / 100% auto no-repeat url(data:image/svg+xml,%3csvg%20version=%221.1%22%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22980px%22%20height=%221733px%22%20viewBox=%220%200%20980%201733%22%3e%3cpath%20fill=%22%23B0D400%22%20d=%22M980,0v1733H0V0l415.1,239.4c47.1,27.2,105.2,27.2,152.3,0L980,0z%22/%3e%3c/svg%3e); overflow: auto; position: relative; z-index: 2; padding: 27% 0 20px; margin-top:-27%; }
    .component_grid-intro-animation.homepage-animation .hexagon { background-position: -50% 0; }

	.component_grid-intro-animation .intro-stoerer-image { position: absolute; top: 57%; left: 31%; width: 144px; height: 162px; will-change: opacity, transform; z-index: 4; }

@media (min-width: 980px ) {

	.component_grid-intro-animation { padding-bottom: 0; will-change: transform; }
	.component_grid-intro-animation .container { display: none; }
	.component_grid-intro-animation.loaded .container { display: block; }

	.component_grid-intro-animation .h1,
    .component_grid-intro-animation p { width: 340px; padding:0; margin: 20px 0 0 40px; }
	.component_grid-intro-animation .h1 { margin-top: 100px; font-size: 43px; bottom: 145px; }
	.component_grid-intro-animation p { top: 240px; }
	
    .component_grid-intro-animation .bg { position: absolute; top: 0; left: 0; max-width: none; }
	.component_grid-intro-animation .hexagon { width: 100%; height: 100%; position: absolute;
		background: 0% 50% / auto 100% no-repeat url(data:image/svg+xml,%3csvg%20version=%221.1%22%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22455.8%22%20height=%22405%22%20viewBox=%220%200%20455.8%20405%22%3e%3cpath%20opacity=%221%22%20fill=%22%23b0d400%22%20d=%22M0,0v405h354.6L440,259c10.5-18.2,15.8-37.8,15.8-58.9c0-21-5.3-40.6-15.8-58.9L359,0H0z%22/%3e%3c/svg%3e); z-index: 2;
		left: -5px; top: 0; animation: grid-intro-animation_fadeIn 0.5s 0.25s cubic-bezier(0.360, 1.295, 0.440, 1.005) backwards; padding: 0; margin-top: 0; }

	.component_grid-intro-animation .playbutton { z-index: 4; position: absolute; left: 400px; top: 150px; cursor: pointer; }
	.component_grid-intro-animation .video { z-index:5; position: absolute; left: 960px; width: 100%; height: 100%; }
	.component_grid-intro-animation .video video { width: 720px; height: 405px; background: #fff url(assets/spinner.gif) 50% 50% no-repeat; }
	.component_grid-intro-animation .controls { position: absolute; left: 720px; top:0; background: #006567; height: 100%; padding: 360px 0px 0px 20px; width: 240px; }
	.component_grid-intro-animation .controls svg { cursor: pointer; margin-right:10px; }
	.component_grid-intro-animation .controls .slider { position: absolute; left:90px; top:142px; opacity: 0.3; }
	.component_grid-intro-animation .controls::after { content: ' '; position: absolute; width: 80px; height: 100%; top: 0; right: 0; background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.4)); z-index:10; }

	.component_grid-intro-animation.homepage-animation p { margin-top: 2%; }
	.component_grid-intro-animation.homepage-animation button { bottom: 35%; }
	.component_grid-intro-animation.homepage-animation .h1 { margin-top: 110px; }
}

@media (max-width: 979px) {
	.component_grid-intro-animation .container { visibility: hidden; }
	.component_grid-intro-animation.loaded .container { visibility: visible; }

	.component_grid-intro-animation p br,
	.component_grid-intro-animation .h1 br,
	.component_grid-intro-animation .playbutton,
	.component_grid-intro-animation .video { display: none; }

	.component_grid-intro-animation.homepage-animation .h1 br { display: block; }

    .component_grid-intro-animation button, 
	.component_grid-intro-animation .intro-stoerer-image { display: none; }
}