.magic {
	position: relative;
	height: 20px;
}

.magic + .magic {
	margin-top: 15px;
}

.magic label {
	cursor: pointer;
	position: absolute;
	top: 2px;
	right: 0;
	z-index: 88;
	text-indent: calc(-100% + 180px);
	height: 18px;
	width: 180px;
	background-image: url(../img/Zauberstab.png);
	background-size: cover;
	z-index: 200;
	text-shadow: none;
	font-size: 12px;
	color: white;
	transition: color ease-in-out .2s;
	line-height: 18px;
}

.magic input[type=checkbox]:checked + label {
	color: black;
	text-shadow: 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white;
	transition: color ease-in-out .2s;
}

.magic input[type=checkbox] {
	position: absolute;
	right: 0;
	bottom: 0;
	opacity: 0;
	opacity: 0;
	z-index: 77;
}

.magic .blast {
	transition: all 300ms,;
	position: absolute;
	right: 175px;
	top: -6px;
	height: 35px;
	display: block;
	width: 0;
	max-width: 0;
}

.blue {
	background: transparent url(../img/blue/magic3.png) repeat-x right 2px;
	background-size: contain;
}

.green {
	background: transparent url(../img/green/magic3.png) repeat-x right 2px;
	background-size: contain;
}

.red {
	background: transparent url(../img/red/magic3.png) repeat-x right 2px;
	background-size: contain;
}


.magic input[type=checkbox]:checked ~ div.blast {
	width: calc(100% - 160px);
	z-index: 100;
	max-width: 675px;
}

@media (min-width: 992px) {
	.magic input[type=checkbox]:checked ~ div.blast {
  	max-width: 895px;
	}
}

@media (min-width: 1200px) {
	.magic input[type=checkbox]:checked ~ div.blast {
  	max-width: 1095px;
	}
}

div {
	transform : translateZ(0);
}
