/* GLOBAL */
	.component_grid-xing360-animation button { cursor: pointer; }
	.component_grid-xing360-animation .container { position: absolute; right: 0; top: 0; width: 877px; height: 811px; }
	.component_grid-xing360-animation.small .container { width: 628px; height: 691px; top: 120px; }
	.component_grid-xing360-animation .h1 span { color: #b0d400; }
	.component_grid-xing360-animation .h3 { font-weight: 600; }

/* MAIN CONTAINERS */
	.component_grid-xing360-animation > div { padding: 40px 20px; background: #fff; }

/* MAIN TEXT CONTENT */
	.component_grid-xing360-animation > div .h1 { margin: 0; display: inline; }

/* INFO PANEL */
	.component_grid-xing360-animation .info { position: absolute; width: 343px; top: 50%; left: -290px; }
	.component_grid-xing360-animation.small .info { top: 42.6%; width: 351px; }
	.component_grid-xing360-animation.small .info p { width: 90%; }
	.component_grid-xing360-animation .info > div { position: absolute; left: 0; top: 0; pointer-events: none; }
	.component_grid-xing360-animation .info > div.active { z-index: 2; pointer-events: all; }
	.component_grid-xing360-animation .info > div > .line { position: absolute; right: 0; top: 50px; width: 0; border-bottom: 2px #000 solid; -webkit-transition: width 0.25s 1s ease-out; transition: width 0.25s 1s ease-out; }
	.component_grid-xing360-animation .info > div.active > .line { width: 100%; }
	.component_grid-xing360-animation.big .info > div > .line::after { content: ""; position: absolute; left: calc(100% - 1px); top: 0px; width: 17%; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); border-bottom: 2px #000 solid; }
	.component_grid-xing360-animation .info > div > * { opacity: 0; -webkit-transform: translate(0, 100%); transform: translate(0, 100%); -webkit-transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out; transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out; transition: opacity 0.5s ease-out, transform 0.5s ease-out; transition: opacity 0.5s ease-out, transform 0.5s ease-out, -webkit-transform 0.5s ease-out; }
	.component_grid-xing360-animation .info > div.active > * { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); }
	.component_grid-xing360-animation .info > div > p { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
	.component_grid-xing360-animation .info > div > button { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }

/* THE WHEEL */
	.component_grid-xing360-animation .container { display: none; }

@media (min-width: 980px) {
	/* MAIN CONTAINERS */
		.component_grid-xing360-animation { background: linear-gradient(#fff,#f2f2f2); }
		.component_grid-xing360-animation > div { position: absolute; padding: 40px; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.05))); background: linear-gradient(rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.05)); }

	/* MAIN TEXT CONTENT */
		.component_grid-xing360-animation > div .headline { width: 670px; }
		.component_grid-xing360-animation.big > div > p { width: 40%; }
		.component_grid-xing360-animation.small > div > p { width: 47%; }

	/* THE WHEEL */
		.component_grid-xing360-animation .container { display: block; }
		.component_grid-xing360-animation .container .bigwheel { position: absolute; width: 80%; padding-bottom: 80%; background: url('assets/wheel.svg') 50% 50% / 115% 115% no-repeat; left: 50%; top: 55%; border-radius: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); will-change: transform; visibility: hidden; }

	/* PRODUCT BUBBLES */
		.component_grid-xing360-animation .bigwheel > div { position: absolute; width: 23%; padding-bottom: 23%; left: 38.5%; top: 38.5%; background: #fff; border-radius: 100%; }
		.component_grid-xing360-animation .bigwheel > div::after { content: ""; position: absolute; display: block; z-index: -1; background: #fff; width: 23%; height: 23%; border-radius: 100%; top: 59.6%; left: -3.7%; }
		.component_grid-xing360-animation .bigwheel > div > div { position: absolute; width: 100%; height: 100%; opacity: 0.3; border: 6px solid #000; border-radius: 100%; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; cursor: pointer; background: #fff 50% 50% no-repeat; will-change: transform, opacity; }
 		.component_grid-xing360-animation.small .bigwheel > div > div { border-width: 4px; }
 		.component_grid-xing360-animation .bigwheel > div > div::after { content: ""; position: absolute; display: block; width: 25.6%; height: 25.6%; background: #000 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3e%3cg stroke='%23fff' stroke-width='4' stroke-linecap='round' transform='translate(13,13)'%3e%3cline x1='0' y1='0' x2='16' y2='16'/%3e%3cline x1='16' y1='0' x2='0' y2='16'/%3e%3c/g%3e%3c/svg%3e") 50% 50% / contain no-repeat; border-radius: 100%; top: 60.4%; left: -7.97%; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: -webkit-transform 0.5s ease-out; transition: -webkit-transform 0.5s ease-out; transition: transform 0.5s ease-out; transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out; }
 		.component_grid-xing360-animation .bigwheel > div > div.active::after { -webkit-transform: rotate(0deg); transform: rotate(0deg); }

		.component_grid-xing360-animation .bigwheel > div > div.active { -webkit-animation: grid-xing360-animation_activation 0.5s ease-out both; animation: grid-xing360-animation_activation 0.5s ease-out both; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; opacity: 1; }
		.component_grid-xing360-animation .bigwheel > div > div:hover { opacity: 1; }
		.component_grid-xing360-animation .bigwheel > div > div > span.h3 { position: absolute; left: 50%; white-space: nowrap; bottom: 0; margin: 0; -webkit-transform: translate(-50%, 125%); transform: translate(-50%, 125%); opacity: 0; text-shadow: -2px -2px 3px #FAFAFA, 2px -2px 3px #FAFAFA, 2px 2px 3px #FAFAFA, -2px 2px 3px #FAFAFA; -webkit-transition: opacity 0.25s ease-in-out, -webkit-transform 0.25s ease-out; transition: opacity 0.25s ease-in-out, -webkit-transform 0.25s ease-out; transition: opacity 0.25s ease-in-out, transform 0.25s ease-out; transition: opacity 0.25s ease-in-out, transform 0.25s ease-out, -webkit-transform 0.25s ease-out; }
 		.component_grid-xing360-animation .bigwheel > div > div:hover > span { opacity: 1; display: block; -webkit-transform: translate(-50%, 175%); transform: translate(-50%, 175%); -webkit-transition: display 0s 0.25s ease-in-out, opacity 0.25s ease-in-out, -webkit-transform 0.25s ease-out; transition: display 0s 0.25s ease-in-out, opacity 0.25s ease-in-out, -webkit-transform 0.25s ease-out; transition: display 0s 0.25s ease-in-out, opacity 0.25s ease-in-out, transform 0.25s ease-out; transition: display 0s 0.25s ease-in-out, opacity 0.25s ease-in-out, transform 0.25s ease-out, -webkit-transform 0.25s ease-out; }

		@-webkit-keyframes grid-xing360-animation_activation { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(1.1); transform: scale(1.1); } 50% { -webkit-transform: scale(1); transform: scale(1); } 75% { -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { -webkit-transform: scale(1); transform: scale(1); } }
		@keyframes grid-xing360-animation_activation { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(1.1); transform: scale(1.1); } 50% { -webkit-transform: scale(1); transform: scale(1); } 75% { -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { -webkit-transform: scale(1); transform: scale(1); } }

	/* LOGO */
		.component_grid-xing360-animation .bigwheel > span { position: absolute; display: block; width: 45%; padding-bottom: 45%; background: url('assets/product-xing360-border.svg') 50% 50% / contain no-repeat; left: 50%; top: 50%; opacity: 0.35; -webkit-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; will-change: transform, opacity; cursor: pointer; }
		.component_grid-xing360-animation .bigwheel > span:hover,
		.component_grid-xing360-animation .bigwheel > span.active { opacity: 1; }
}

@media (max-width: 979px) {
	.component_grid-xing360-animation .copy > br { display: none; }
	.component_grid-xing360-animation .headline br { display: none; }
	.component_grid-xing360-animation .headline .h1:first-child::after { content: " "; }
}