/* CSS Document */
* {
	box-sizing:border-box;
	margin:0px;
	padding:0px;
}
html, body {
}
body {
	background:#000000;
	color:#ffffff;
	margin:0px;
	padding:0px;
	font:0.9em/1 Arial, Helvetica, sans-serif;
}
.clearer {
	clear:both;
}
.all {
	position:absolute;
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	width:1920px;
	height:1200px;
	background:#fff;
	overflow:hidden;
}
.content {
	position:absolute;
	display:block;
	top:0px;
	left:0px;
	width:1920px;
	height:1200px;
}

.page {
	display:block;
	width:1920px;
	height:1200px;
	position:absolute;
	top:0px;
	left:0px;
	background-size:contain;
	background-position:center center;
}
.page1 {
	display:block;
}
.page1 .logokombi {
	position:absolute;
	width:1300px;
	height:755px;
	display:block;
	left:310px;
	top:100px;
}
.page1 .go {
	position:absolute;
	width:510px;
	height:200px;
	display:block;
	left:705px;
	top:930px;
}


.page2 {
	display:none;
}
.page2 .select {
	position:absolute;
	width:290px;
	height:70px;
	display:block;
	left:815px;
	top:100px;
}
.page2 .left, .page2 .right {
	position:absolute;
	width:500px;
	height:845px;
	display:block;
	left:300px;
	top:250px;
}
.page2 .right {
	left:auto;
	right:300px;
}


.page3 {
	display:none;
}
.page3 #kamera {
	position:absolute;
	display:block;
	top:60px;
	left:0px;
	width:1920px;
	height:1080px;
}
.kamerarahmen, .filterimage {
	position:absolute;
	display:block;
	top:0px;
	left:0px;
	width:1920px;
	height:1200px;
}
.kamerarahmen {
	background-image:url("../images/rahmen.png");
	background-repeat:no-repeat;
}
.kamerarahmen.rahmen2 {
	background-image:url("../images/rahmen2.png");
	background-repeat:no-repeat;
}
.kamerarahmen .buttonkamera {
	display:block;
	width:180px;
	height:70px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-90px;
	margin-top:-35px;
	background:url("../images/photo.png") no-repeat;
}
.kamerarahmen .timer {
	display:block;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	font-size:800px;
	text-align:center;
	line-height:1080px;
	color:#fff;
}


.page4 {
	display:none;
	background-size:contain;
}
.page4 .filters, .page4 .icons {
	/*display:block;*/
	display:none;
	position:absolute;
	width:500px;
	left:50px;
	top:100px;
	height:900px;
}
.page4 .icons .icon, .page4 .filters .filter {
	display:block;
	position:absolute;
	width:300px;
	height:300px;
	left:100px;
	background-size:cover;
	background-position:center center;
}
.page4 .icons .icon, .page4 .filters .filter {
	width:250px;
	height:250px;
	left:125px;
}
.page4 .icons .icon.cloud, .page4 .filters .filter {
	top:0px;
}
.page4 .icons .icon.fussball, .page4 .filters .filter.filter2 {
	top:300px;
}
.page4 .filters .filter.aktiv {
	border:5px solid #ff8000;
}
.page4 .filters .filter .fme {
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
}


.page5 {
	display:none;
}
.page5 .logokombi {
	position:absolute;
	width:630px;
	height:370px;
	display:block;
	left:645px;
	top:100px;
}
.page5 .printit, .page5 .mailit {
	position:absolute;
	width:250px;
	height:70px;
	display:block;
	left:835px;
	top:550px;
}
.page5 .mailit {
	top:700px;
}
.page5 .mailinput {
	position:absolute;
	width:450px;
	height:70px;
	display:block;
	left:1115px;
	top:700px;
	border:5px solid #c11e0c;
	border-radius:10px;
	outline:none;
	padding:10px;
	font-size:25px;
}
.page5 .mailinput.error {
	-webkit-animation: bounce-top 0.9s both;
	        animation: bounce-top 0.9s both;
}
@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}


.sepia {
	backdrop-filter:sepia();
}
.grayscale {
	backdrop-filter:grayscale();
}
.page4 .icons .icon img { 	
	width:100% !important;
	height:100% !important;
}
.page4 .filters {
	left:auto;
	right:50px;
}
.page4 .reset, .page4 .next {
	display:block;
	position:absolute;
	width:200px;
	height:80px;
	left:200px;
	top:1060px;
}
.page4 .next {
	left:auto;
	right:200px;
}
.page4 .dropicons {
	display:block;
	width:720px;
	height:1080px;
	position:absolute;
	top:60px;
	bottom:60px;
	left:600px;
	right:600px;
}
.kamerafoto {
	position:absolute;
	display:block;
	top:0px;
	left:0px;
	width:1920px;
	height:1200px;
}


.bg {
	display:block;
	position:absolute;
	width:1408px;
	height:704px;
	left:0px;
	top:0px;
	background-color:#000000;
	background-position:top center;
	background-size:cover;
	z-index:5000;
	/* 9 x 4 */
}
.choosebg, .chooseborder {
	display:block;
	margin:auto;
	width:1200px;
}
.choosebg ul, .chooseborder ul {
	display:block;
	margin:0px;
	padding:0px;
}
.choosebg ul li {
	display:block;
	margin:0px;
	width:50%;
	padding:10px;
	float:left;
}
.choosebg ul li a {
	display:block;
	background-color:red;
	width:100%;
	padding-top:50%;
	position:relative;
}
.choosebg ul li a img {
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
}


.chooseborder ul li {
	display:block;
	margin:0px;
	width:100%;
	padding:10px;
	float:left;
}
.chooseborder ul li a {
	display:block;
	margin:auto;
	background:red;
	width:100%;
	background-size:cover;
	background-position:center center;
}
.chooseborder ul li a.border1 {
	width:380px;
	height:214px;
	margin-top:81.125px;
}
.chooseborder ul li a.border2 {
	width:380px;
	height:380px;
}
.chooseborder ul li a.border3 {
	width:214px;
	height:380px;
}



.scanprint {
	position:absolute;
	display:block;
	left:210px;
	top:0px;
	width:390px;
	height:460px;
	cursor:pointer;
}
.send {
	position:absolute;
	display:block;
	left:465px;
	top:50px;
	width:1390px;
	height:460px;
}
.send .preview {
	display:block;
	position:absolute;
	left:0px;
	top:30px;
	width:380px;
	height:380px;
	background-size:contain;
	background-position:center center;
	background-repeat: no-repeat;
}

.send .form {
	display:block;
	position:absolute;
	left:460px;
	top:0px;
}
.send form {
	margin:0px;
	padding:0px;
	position:absolute;
	left:555px;
	top:405px;
}
.send form input {
	margin:0px;
	position:absolute;
	display:block;
	left:0px;
	top:0px;
	width:335px;
	height:40px;
	padding:0px 10px;
	font-size:25px;
	font-style:italic;
	border:1px solid #c11e0c;
	background:#ffffff;
	color:#000000;
}
.send form button {
	position:absolute;
	display:block;
	left:335px;
	top:0px;
	width:40px;
	height:40px;
	font-size:25px;
	background:#c11e0c;
	color:#ffffff;
	text-align:center;
	border:none;
	cursor:pointer;
}
.close {
	position:absolute;
	display:block;
	right:10px;
	top:10px;
	width:40px;
	height:40px;
	font-size:40px;
	color:#ffffff;
	text-align:center;
	border:none;
	cursor:pointer;
	line-height:40px;
}
#scancode {
	position:absolute;
	display:block;
	top:50%;
	left:50%;
	margin-left:-320px;
	margin-top:-240px;
	width:640px;
	height:480px;
}
#scancode video {
	display:block;
	position:absolute;
	left:0px;
	top:0px;
	width:640px;
	height:480px;
}
#scancode canvas {
	display:block;
	position:absolute;
	left:0px;
	top:0px;
	width:640px;
	height:480px;
}
.scan {
	display:block;
	position:absolute;
	top:0px;
	left:730px;
	width:780px;
	height:460px;
	cursor:pointer;
}
.foto {
	display:block;
	position:absolute;
	top:0px;
	left:640px;
	width:840px;
	height:460px;
	cursor:pointer;
}
img {
	max-width:100%;
	height:auto;
}
#webcam {
	display:block;
	width:1280px;
	height:720px;
	position:relative;
}
.loaderbg {
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	background:rgba(255, 255, 255, 0.5);
	z-index:10000;
}
.loaderbg .loader {
	display:block;
	position:absolute;
	width:50px;
	height:50px;
	top:50%;
	left:50%;
	margin-left:-25px;
	margin-top:-25px;
	color:#000000;
	font-size:48px;
	line-height:50px;
	text-align:center;
}
.content .ui-icon-gripsmall-diagonal-se {
	background-image:none;
	background:#c11e0c;
	border-radius:50%;
}
.config {
	color:#000;
	display:block;
	width:600px;
	position:absolute;
	left:50%;
	margin-left:-300px;
	top:50px;
	bottom:50px;
	overflow-y:scroll;
	padding-right:20px;
}
.config p, .config h1 {
	margin:10px 0px;
}
.config img {
	width:100%;
	height:auto;
}
fieldset {
	margin:10px 0px;
	padding:0px 10px;
}
.formline {
	margin:10px 0px;
	padding-bottom:10px;
	border-bottom:1px solid #ccc;
}
.formline:after {
	display:block;
	content:'';
	clear:both;
}
.formline .preview {
	width:150px;
	border:1px solid #ccc;
	padding:4px;
	float:left;
	margin-right:10px;
}
.formline .label, .formline .input {
	margin-bottom:10px;
	float:left;
	width:calc(100% - 170px);
}
.formline:last-child {
	padding-bottom:0px;
	border-bottom:none;
}
input[type=submit] {
	width:200px;
	height:30px;
}