.fcaptcha-field { margin-bottom:1em; padding:4px; }
.fcaptcha-button { display: inline-block; cursor: pointer; padding-right: 1em }
.fcaptcha-bigbutton
.fcaptcha-button { margin: 1em 0; font-size: 1.3em }
.fcaptcha-error { display: none }
.fcaptcha-mark { display: inline-block; position: relative;
	width: 15px; height: 15px; margin-right: 2px }
.fcaptcha-materialize .fcaptcha-mark { width: 20px; height: 20px;
	margin: 0 12px 0 0 }
.fcaptcha-bigbutton .fcaptcha-mark { width: 1.1em; height: 1.1em;
	margin: 0 .7em 0 0 }
.fcaptcha-square, .fcaptcha-circle, .fcaptcha-check {
	position: absolute; top: 0; box-sizing: border-box;
	left: 0; width: 100%; height: 100% }
.fcaptcha-circle, .fcaptcha-check { opacity: 0; transition: opacity 200ms }
.fcaptcha-square { border: 2px solid rgb(74, 74, 73);
	border-radius: 3px; }
.fcaptcha-materialize .fcaptcha-square {
	border-color: #5a5a5a; border-radius: 2px }
.fcaptcha-circle { border: .3em solid rgb(0, 128, 60);
	border-radius: 2em }
.fcaptcha-check { border: 0; width: 100%; height: 100%;
	transform: none; position: relative; }
.fcaptcha-check::after { display:block; content:""; height:12px;
	width:6px; border-right:2px solid rgb(0, 128, 60);
	border-bottom:2px solid rgb(0, 128, 60);
	transform:rotate(45deg); position:absolute; top:50%; left:50%;
	margin-left:-1px; margin-top:-12px; }
.fcaptcha-materialize .fcaptcha-check::before { content: '';
	display: block; position: absolute; top: 0; left: 0;
	width: 100%; height: 100%; box-sizing: border-box;
	background: #9b8a62; border-radius: 2px }
.fcaptcha-materialize .fcaptcha-check::after { content: '';
	display: block; width: 0; height: 0;
	position: absolute; top: 10px; left: 6px;
	border: 3px solid transparent;
	margin-top: 3px; border-radius: 1px;
	transform: rotateZ(37deg);
	transform-origin: 100% 100%;
	box-sizing: border-box }
.fcaptcha-materialize .fcaptcha-check::before,
.fcaptcha-materialize .fcaptcha-check::after {
	transition: border .25s, background-color .25s,
		width .2s .1s, height .2s .1s, top .2s .1s, left .2s .1s }
.fcaptcha-materialize.fcaptcha-checked .fcaptcha-check::after {
	top: 0; left: 1px; width: 8px; height: 13px;
	border-top: 2px solid transparent;
	border-left: 2px solid transparent;
	border-right: 2px solid black;
	border-bottom: 2px solid black }
.fcaptcha-label { display: inline-block; margin: 0 }
.fcaptcha-mark, .fcaptcha-label { vertical-align: middle;
	cursor: pointer }
.fcaptcha-checking .fcaptcha-square {
	animation: fcaptcha-fadeout 1 400ms 200ms both }
.fcaptcha-checking .fcaptcha-circle { opacity: 1 }
.fcaptcha-loading .fcaptcha-circle {
	animation: fcaptcha-pulse infinite 400ms 400ms both alternate;
	opacity: 1 }
/*.fcaptcha-checked .fcaptcha-square { opacity: 0 }*/
.fcaptcha-checked .fcaptcha-check { opacity: 1 }
.fcaptcha-bigbutton.fcaptcha-checked .fcaptcha-check {
	animation: fcaptcha-grow 1 1s both }
@keyframes fcaptcha-fadeout {
	from { opacity: 1.0 }
	to { opacity: 0.0 }
}
@keyframes fcaptcha-fadein {
	from { opacity: 0 }
	to { opacity: 1 }
}
@keyframes fcaptcha-pulse {
	from { border-width: .3em }
	to { border-width: .1em }
}
@keyframes fcaptcha-grow {
	from { transform: scale3d(.3, .3, 1) }
	to { transform: scale3d(1, 1, 1) }
}

.fcaptcha-overlay { position: absolute; width: 320px; max-width: 90vw;
	z-index:10;
	/* max-height: 100vh; overflow: auto; padding-left: 10px */ }
.fcaptcha-box { border: 1px solid black;
	border-radius: 5px; padding: 10px; background: white;
	color: black; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	max-height: 100vh; overflow: auto }
.fcaptcha-blocks { width: 100%; padding-bottom: 133.333%; position: relative;
	background: #ffffff no-repeat 50% 50%; background-size: contain }
.fcaptcha-block { width: 33.333%; height: 25%; position: absolute;
	box-sizing: border-box; border: 2px solid white; background: transparent }
.fcaptcha-block::before { position: absolute; width: 100%; height: 100%;
	content: ''; display: block; box-sizing: border-box;
	border: 1px solid black; cursor: pointer }
.fcaptcha-block:nth-child(3n+1) { left: 0 }
.fcaptcha-block:nth-child(3n+2) { left: 33.333% }
.fcaptcha-block:nth-child(3n+3) { left: 66.666% }
.fcaptcha-block:nth-child(-n+3) { top: 0 }
.fcaptcha-block:nth-child(n+4):nth-child(-n+6) { top: 25% }
.fcaptcha-block:nth-child(n+7):nth-child(-n+9) { top: 50% }
.fcaptcha-block:nth-child(n+10) { top: 75% }
.fcaptcha-block.fcaptcha-sel {
	animation: fcaptcha-blocksel 1 400ms both linear }
@keyframes fcaptcha-blocksel {
	from { border-width: 2px; background-color: rgba(255,255,128,0) }
	80% { border-width: 7px }
	to { border-width: 2px; background-color: rgba(255,255,128,.4) }
}
.fcaptcha-question { padding: .5em; background: black; color: white;
	border: 2px solid white; margin-bottom: 8px }
.fcaptcha-question:before { display:block; }
.fcaptcha-question.de:before { content:"Bitte wählen Sie alle Felder, die einen Teil eines ASSMANN Produkts enthalten."; }
.fcaptcha-question.en:before { content:"Please select all fields that contain part of an ASSMANN product."; }
.fcaptcha-buttons { padding: 0 2px; text-align: right; margin-top: 8px }
.fcaptcha-buttons a { display: inline-block; padding: .3em;
	text-decoration: none; color: white; text-transform: uppercase;
	background-color: black; cursor: pointer }
.fcaptcha-buttons a:hover { text-decoration: none }

.fcaptcha-omark { position: absolute; left: -8px; top: 30%;
	transform: rotateZ(-45deg); width: 16px; height: 16px;
	box-sizing: border-box;
	border-top: 1px solid black;
	border-left: 1px solid black }
.fcaptcha-omark::before { content: ''; display: block;
	position: absolute; box-sizing: border-box;
	width: 100%; height: 100%;
	border-top: 15px solid white; border-left: 15px solid white }

.fcaptcha-field.error .fcaptcha-square {
	border-color:rgb(192, 13, 13); }
.fcaptcha-field.error .fcaptcha-label { color:rgb(192, 13, 13); }
