* {-webkit-appearance:none;-webkit-text-size-adjust:none;color: #4B575F;margin:0;padding:0;border:0;outline:none;}
h1, h2, h3, p {margin:0 0 20px 0;}
.hide {display: none;}
html {font:24px/40px "PT Sans", Arial, Helvetica, sans-serif;}
body {width:620px;margin:0 auto 100px;padding:0 20px;max-width:100%;-moz-box-sizing:border-box;box-sizing:border-box;}
.ftext {text-align: center;}
h1 {font:40px/50px "PT Sans", Arial, Helvetica, sans-serif;}
h1 strong {color:#ef7f01;font:40px/50px "PT Sans", Arial, Helvetica, sans-serif;}
.hidden {display:none;}
.skills-wheel {-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);height: 560px;margin: 1em auto 2em;overflow: hidden;position: relative;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;width: 560px;}
/* .skills-wheel {width:570px;height:570px;} */
.skills-wheel:before {border-style: solid;border-width: 32px 32px 0 32px;border-color: #ffffff transparent transparent transparent;content:"";height: 0;left: 50%;margin-left: -32px;position: absolute;top: 5px;z-index: 100;width: 0;}
.skills-wheel .btn {background-color: #404040;color: #fff;border: 4px solid #ffffff;-webkit-box-shadow: inset 0 -8px 0 #2b2b2b;-moz-box-shadow: inset 0 -8px 0 #2b2b2b;box-shadow: inset 0 -8px 0 #2b2b2b;font-family:"avantgarde_bold", Helvetica, Arial, sans-serif;height: 100px;left: 50%;line-height: 100px;margin: -54px 0 0 -54px;padding: 0;position: absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;text-decoration: none;text-align: center;text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);text-transform: uppercase;top: 50%;width: 100px;}
.skills-wheel .btn:active {-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;height: 96px;margin-top: -50px;}
.wheel {border: 12px solid #ffffff;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;height: 100%;margin: 0 auto;overflow: hidden;position: relative;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;text-align: center;width: 100%;-webkit-transform-origin: center center;-moz-transform-origin: center center;-ms-transform-origin: center center;-o-transform-origin: center center;transform-origin: center center;}
.wheel li {font-family:"avantgarde_bold", Helvetica, Arial, sans-serif;font-size: 20px;height: 50%;line-height: 24px;list-style: none;left: 50%;margin: 0 0 0 -106px;padding: 0;position: absolute;-webkit-transform-origin: center bottom;-moz-transform-origin: center bottom;-ms-transform-origin: center bottom;-o-transform-origin: center bottom;transform-origin: center bottom;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);top: 0;width: 39.552238806%;}
/* .wheel {border: 15px solid #ffffff;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;height: 100%;margin: -20px -10px;overflow: hidden;position: relative;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;text-align: center;width: 100%;-webkit-transform-origin: center center;-moz-transform-origin: center center;-ms-transform-origin: center center;-o-transform-origin: center center;transform-origin: center center;}
*/
/*
.wheel li {font-family:"avantgarde_bold", Helvetica, Arial, sans-serif;font-size: 20px;height: 50%;line-height: 24px;list-style: none;left: 30%;margin: 0px; padding: 10px;position: absolute;-webkit-transform-origin: center bottom;-moz-transform-origin: center bottom;-ms-transform-origin: center bottom;-o-transform-origin: center bottom;transform-origin: center bottom;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);top: 0;width: 40%;}
*/
.wheel li:before {display: none;}
.wheel a {color: #ffffff;left: 0;position: absolute;text-decoration: none;top: 48px;width: 100%;}
.wheel li:nth-child(1) {-webkit-transform: rotate(0);-moz-transform: rotate(0);-ms-transform: rotate(0);-o-transform: rotate(0);transform: rotate(0);}
.wheel li:nth-child(2) {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
.wheel li:nth-child(3) {-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);}
.wheel li:nth-child(4) {-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-ms-transform: rotate(135deg);-o-transform: rotate(135deg);transform: rotate(135deg);}
.wheel li:nth-child(5) {-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);}
.wheel li:nth-child(6) {-webkit-transform: rotate(225deg);-moz-transform: rotate(225deg);-ms-transform: rotate(225deg);-o-transform: rotate(225deg);transform: rotate(225deg);}
.wheel li:nth-child(7) {-webkit-transform: rotate(270deg);-moz-transform: rotate(270deg);-ms-transform: rotate(270deg);-o-transform: rotate(270deg);transform: rotate(270deg);}
.wheel li:nth-child(8) {-webkit-transform: rotate(315deg);-moz-transform: rotate(315deg);-ms-transform: rotate(315deg);-o-transform: rotate(315deg);transform: rotate(315deg);}
.wheel li:nth-child(odd) img {-webkit-opacity: 0.8;-moz-opacit: 0.8;opacity: 0.8;}
#step1, #step2, #step3, #step4 {margin: 1em auto 1em;width: 560px;}
.logo {margin:auto;text-align:center;padding:20px 0 0 0;border-bottom:1px solid #ccc;}
#step1, #step2, #step3, #step4 {margin:20px auto;}
#step1 {text-align: center;}
#step1 img{width:100%;}
#step1 .button {display:block; width:50%; margin:-50px auto 0; position:relative; top:250px;}
#step2 label {display:inline-block;width:40%;}
#step2 input[type=text],#step2 input[type=email] {display:inline-block;width:40%;padding:10px 15px;font:24px/40px "PT Sans", Arial, Helvetica, sans-serif;border:1px solid #ef7f01;background:#fafafa;border-radius:0;}
#step2 select{display:inline-block;width:46%;padding:10px 15px; font:18px/40px "PT Sans", Arial, Helvetica, sans-serif;border:1px solid #ef7f01;background:#fafafa;border-radius:0; margin-left:-1%;}
#step2 ul {margin:0;list-style:none;}
#step2 ul li:first-of-type {padding:10px; border:1px solid #fff; border-bottom:1px solid #aaa; margin:0 0 20px 0; background:#eee; -moz-box-sizing:border-box;
box-sizing:border-box;}
#step2 ul li {display:block;margin:0 0 10px 0;}
#step2 ul li input {display:inline-block;margin:8px 20px 0 0;width:20px;height:20px;background:#ccc;line-height:40px;border-radius:0;appearance:none;-moz-appearance:none;-webkit-appearance:none;border:1px solid #333;vertical-align:top;}
#step2 ul li input:checked {}
#step2 ul li input:checked:after {display:block;position:absolute;width:30px;height:30px;color:#000;content:'X';font:bold 30px/40px Arial, Helvetica, sans-serif;margin:-8px 0 0 0px;}
#step2 ul li label {display:inline-block;width:inherit;line-height:30px!important;width:91%;}
#step4 {width:100%;top:0;left:0;position:absolute;height:100%;text-align:center;top:-20px;padding:350px 0 30px 0;background:rgba(255,250,240,0.9) url(../images/win.png) center 20px no-repeat;z-index:200;}
.overlay {z-index:199;width:560px;margin:auto;}
#step4 .win {font:bold 50px/60px "PT Sans", Arial, Helvetica, sans-serif;margin:0 0 60px 0;}
#step4 .win span {display:block;font:24px/40px "PT Sans", Arial, Helvetica, sans-serif;margin:20px 0;}
#step4 .win #gewinn {display:block;font:40px/50px "PT Sans", Arial, Helvetica, sans-serif;}
.button {background:#ef7f01;color:#fff;padding:10px 20px;margin:20px 0;display:inline-block;text-decoration:none;border-radius:10px;box-shadow:0px 2px 5px rgba(0,0,0,0.25);}
.button:hover {background:#ff8903;}
.facebook-button {margin:auto;display:block;width:360px;height:60px;background:url(../images/facebook.png) top center no-repeat;}
.facebook-button:hover {cursor:pointer;display:block;width:360px;height:60px;background:url(../images/facebook.png) bottom center no-repeat;}
#step2 p.inputerror input[type=text],#step2 p.inputerror input[type=email] {border:1px solid red;}
#step2 p.inputerror label {color: red;}

#alternate2 a#jabutton {
	margin:50px auto 0;
	top:0;
}
#alternate2 a#neinbutton {
	margin:20px auto 0;
	top:0;
}

.flex-wrapper{
	display:-webkit-flex;
	-webkit-justify-content:center;
	display:flex;
	justify-content:center;
	overflow:hidden;
}



@media only screen and (max-height:800px) {
#step4 {padding:100px 0 0 0;}
}

#step1,#step2,#step3,#step4, .overlay{
	max-width:100%;
}
.logo img{max-width:100%;height:auto;}
#step1 img{max-width:100%; height:auto;display:block;}

li.inputerror{
	border:1px solid #F00!important;
}

@media only screen and (max-width:720px){
	#alternate1 p span{
		font-size:36px!important;
		line-height:36px!important;
	}
}

@media only screen and (max-width:660px){
	.skills-wheel {
		transform: scale(.9,.9)!important;
		position: absolute!important;
		left: 0;
		right:0;
		margin:auto;
	}

	.bgwrapper{
		height:100%;
	}
}

@media only screen and (max-width:560px){
	#step2 ul li label{
		width:80%;
	}
}

@media only screen and (max-width:470px){
	h1 strong{
		font-size:24px;
		line-height:28px;
	}

	html, #step2 input[type="text"], #step4 .win, #step2 select, #step2 input[type="email"]{
		font-size:16px;
		line-height:24px;
	}

	#step2 select{
		width:48%;
	}

	#step2 ul li label{
		line-height:24px!important;
	}

	#step2 ul li input{
		margin-top:3px;
	}
}

@media only screen and (max-width:380px){
	#step1 .button{
		width:70%;
		top:180px;
	}

	#step2 input[type="text"], #step2 label{
		display:block;
		float:none;
		width:100%;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
}

#emailvorhanden
{
	width: 100%;
	display: inline-block;
	font-size: 13px;
	text-align: right;
}


@media only screen and (max-width:580px){.skills-wheel{	transform:scale(.9,.9)!important;position:absolute!important;left:0;}}
@media only screen and (max-width:570px){.skills-wheel{	transform:scale(.7,.7)!important;}}
@media only screen and (max-width:540px){.skills-wheel{	transform:scale(.7,.7)!important;margin-top:-50px!important}}
@media only screen and (max-width:500px){.skills-wheel{	transform:scale(.6,.6)!important;margin-left:-8%!important;}}
@media only screen and (max-width:460px){.skills-wheel{	transform:scale(.5,.5)!important;margin-left:-11%!important;margin-top:-120px!important;}}
@media only screen and (max-width:450px){.skills-wheel{	margin-left:-13%!important}}
@media only screen and (max-width:440px){.skills-wheel{	margin-left:-16%!important}}
@media only screen and (max-width:430px){.skills-wheel{	margin-left:-20%!important}}
@media only screen and (max-width:420px){.skills-wheel{	margin-left:-18%!important}}
@media only screen and (max-width:400px){.skills-wheel{	transform:scale(.4,.4)!important;margin-left:-18%!important;margin-top:-160px!important;}}
@media only screen and (max-width:390px){.skills-wheel{margin-left:-25%!important}}
@media only screen and (max-width:380px){.skills-wheel{margin-left:-23%!important}}
@media only screen and (max-width:370px){.skills-wheel{margin-left:-25%!important}}
@media only screen and (max-width:360px){.skills-wheel{margin-left:-28%!important}}
@media only screen and (max-width:350px){.skills-wheel{margin-left:-30%!important}}
@media only screen and (max-width:340px){.skills-wheel{margin-left:-34%!important}}
@media only screen and (max-width:330px){.skills-wheel{margin-left:-38%!important}}
@media only screen and (max-width:320px){.skills-wheel{margin-left:-42%!important}}
@media only screen and (max-width:310px){.skills-wheel{margin-left:-46%!important}}
@media only screen and (max-width:300px){.skills-wheel{margin-left:-48%!important}}





.wdhemail{
    display: none!important; 
}

#bottom .pop *{
	color: #000!important;
	}




#bottom {
	background:#e5e5e5;
	padding:50px;
	color:#888;
	font-size:0.8rem;
	line-height:1rem;
}

#bottom *:last-of-type {

}

#bottom > ul {
	background:#333;
	list-style:none;
	margin:0;
	padding:1rem;
	text-align:center;
	margin:0 -50px -50px;
}

#bottom > ul li {
	display:inline-block;
}

#bottom > ul li a {
	display:inline-block;
	padding:0.5rem;
	text-decoration:none;
	color:#ccc;
	font-weight:bold;
}

#bottom > ul li a:hover {
	color:#fff;
}



#popfix {
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.5);
	z-index:502;
}

#popfix.active {
	display:block;
}

.pop {
	background:#fff;
	color:#000;
	padding:50px;
	font-size:1rem;
	line-height:1.5rem;
	position:fixed;
	height:80vh;
	width:60vw;
	top:10vh;
	left:20vw;
	display:none;
	z-index:503;
	box-sizing:border-box;
	overflow:auto;
}

.pop.active {
	display:block;
}

.popx {
	display:block;
	background:#c44;
	color:#fff;
	width:30px;
	height:30px;
	text-align:center;
	text-decoration:none;
	font-size:1.5rem;
	line-height:1.5rem;
	position:absolute;
	top:0;
	right:0;
}

.popx:hover {
	background:#666;
}

.pop ul {
	margin-left:20px;
}