select, #plz, #nick, #mail, #pass {
	font-size:16px;
	padding:5px;
	border-radius: 10px;
	border:1px solid #ccc; 
	width: 300px;
	margin-top: -10px;
}

#reg h2 {
margin-top:40px;
margin-bottom: 35px;
}

#h2step2 {
color:#ffeb0a;
font-size: 15px; 
margin-top: 50px;
margin-bottom: 5px;
}

#h2step3 {
color:#ffeb0a;
font-size: 15px;
margin-top: 35px;
margin-bottom: 5px;
}

   .disabled, .number, .current-info {
    display:none;
   }  
   li, ul {
    list-style:none
   }
   #plz {
    width: 300px; 
   }

    #plz-error, #nick-error, #mail-error, #pass-error {
    color:#dd472f; 
    width: 100%;
    font-size: 12px;  
    float:left;
   }   
   section p {
    color:#dd472f; 
    font-size: 16px;
    display: block;
   }   

   section a, a:visited {
    color:#de7c1d;
   }  
   
    li .btn {
     width:300px;
    }
   #tag {
    width: 75px;

   }       
   #monat {
    width: 75px;

   }         
   #jahr {
    width: 120px;

   } 
   .wizard>.content {
    overflow:hidden;
    position:relative; 
    width:auto;
   }   
   .wizard>.content>.body {
    position:sticky; 
    width:99%;
   }

   
.clearfix {
    *zoom:1
   }
   .clearfix:before,.clearfix:after {
    display:table;
    content:"";
    line-height:0
   }
   .clearfix:after {
    clear:both
   }
   .hide-text {
    font:0/0 a;
    color:transparent;
    text-shadow:none;
    background-color:transparent;
    border:0
   }
   .input-block-level {
    display:block;
    width:100%;
    min-height:30px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
   }
   article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {
    display:block
   }
   audio,canvas,video {
    display:inline-block;
    *display:inline;
    *zoom:1
   }
   audio:not([controls]) {
    display:none
   }
   a:focus {
    outline:thin dotted #333;
    outline:5px auto -webkit-focus-ring-color;
    outline-offset:-2px
   }

   sub,sup {
    position:relative;
    font-size:75%;
    line-height:0;
    vertical-align:baseline
   }
   sup {
    top:-.5em
   }
   sub {
    bottom:-.25em
   }   

.btn {
		cursor: pointer;
		padding: 10px;
		font-size: 20px;
		margin-left: -35px;  
		color:#FFF;
		margin-top: -10px;  
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #6eb583 0px, #139315 100%) repeat scroll 0 0;
    border: 1px solid #316440;
    border-radius: 20px;
    box-sizing: border-box;
    display: block;
    text-shadow: 0 1px 1px #1c5380;
}


.plzinput{
    border: solid 1px #e1e1e1;
    width: 40%;
    margin-left: 5px;
    text-align: center;
    border-radius: 3px;
    display:inline-block;
}

.choice1,.choice2,.choice3,.choice4{
    position: absolute;
    left: 30%;
    right: 0;
    top: 80;
    bottom: 0;
    text-align:center;
}


.choice2second,.choice3second,.choice4second{
    position: absolute;
    left: 0;
    right: 0;
    top: 80;
    bottom: 0;
    text-align:center;
}

.info{

    padding-top: 10px;
    margin: 0 auto;
    display:block;
    position: relative;
    height: 40px;
    width:70%;

}
.info .fa{
    color:#6bbe66;
}


.button{
    width: 100%;
    height: 72%;
}
.choice-block{
    display: inline-block;
    border: none;
    outline: medium none;
    vertical-align: top;
    width: 16%;
    height: 100%;
    margin-left:30px;
    margin-right:30px;
}
.overlay{
    position:fixed;
    background:rgba(0,0,0,0.7);
    width:100%;
    height:100%;
    z-index:99999999999999999;
    overflow:hidden;
}
.form{
    position:absolute;
    width: 85%;
    max-width: 1330px;
    min-height: 500px;
    border-radius:20px;
    background:#FFF;
    z-index:99999999;
    margin: auto;
    left:0;
    right:0;
    bottom:20;
    top:20;
}
.formimgmitte{
    position:absolute;
    left:0;
    right:0;
    top:20;
    margin:auto;
    width:40%;
    z-index:999999;
    border-radius:5px;
    max-height: 400px;
}
.formimgrechts{
    position:absolute;
    right:20;
    top:42;
    margin: auto;
    width:35%;
    -webkit-filter: blur(6px);
    filter: blur(6px);
    border-radius:5px;
    max-height: 400px;
}
.formimglinks{
    position:absolute;
    left:20;
    top:42;
    margin: auto;
    width:35%;
    -webkit-filter: blur(6px);
    filter: blur(6px);
    border-radius:5px;
    max-height: 400px;
}
.formimg{
    padding: 0;
    margin: 35px 0 0 0;
    list-style: none;
    position: relative;
    height:45%;
}
.control{
    height: 90px;
    margin: 15px 0 70px;
}
.loginov{
    position: relative;
    padding: 14px;
    width: 220px;
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    text-shadow: none;
    height: auto;
    border-radius: 9px;
    font-size: 19px;
    display: inline-block;
    background: linear-gradient(to bottom, #24a1f3 0%,#1b83c9 47%,#1369a3 100%);
    border: 2px solid #267db9;
    float:left;
    margin-top:25px;
    margin-left:100px;
}
.regov{
    position: relative;
    padding: 14px;
    width: 230px;  
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    text-shadow: none;
    height: auto;
    border-radius: 9px;
    font-size: 19px;
    display: inline-block;
    background-color: #e9405a;
    border-color: #e9405a;
    float:right;
    margin-top:25px;
    margin-right:100px;
}
.buttonf img{
    width:110px;
}
.fa-wifi{
    color:#6bbe66;
}
.unten{
    font-size: 1.1em;
    margin-top: 5px;
    height:27%;
    box-shadow: 0 -6px 6px 0 #ccc;
    overflow: hidden;
}
.profil-daten,.profil-info{
    border-right: 1px solid #3d485a;
    word-wrap: normal;
    border-radius: 0px;
    margin-top: 25px;
    float: left;
    width: 20%;
    padding: 0px 10px 0 2.5%;
    min-height: 250px;
}
.fantasy{
    float: left;
    width: 40%;
    margin-top: 25px;
    text-align: left;
    padding: 0px 10px 0 2.5%;
    min-height: 250px;
}
.profil-daten span,.profil-info span,.fantasy span{
    line-height:30px;
}
.iframeform{
    min-height:450px; 
    width:500px;
    background:#FFF;
    border-radius:20px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    position:absolute;
    left:0;
    right:0;
    top:100;
    margin: auto;
    z-index:9999999999;
}
.iframe{
    margin:0 auto;
}
.mobilename{
	display:none;
}
.mobileregscreen{
	display:none;
}
.firstbg{
    background:rgba(0,0,0,0.4);
    position:fixed;
    width:100%;
    height:100%;
    z-index:9999;
}
.smallbox{
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    border: none;
    padding: 20px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
    outline: 0;
    overflow: auto;
    left:15%;
    top:30%;
    width:350px;
    z-index:999999999;
    text-align:center;
}
.smallbox span{
    font-size: 25px;
    margin-bottom: 20px;
    display:block;
}
.ok{
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 5px 15px;
    font-size: 19px;
    line-height: 1.42857143;
    border-radius: 4px;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-shadow: 1px 1px 2px #222;
    color: #ffffff;
    background-color: #6eb3e2;
    border-color: #6eb3e2;
}

.arrows{
    position: absolute;
    left: 28%;
    top: 58%;
    width: 30%;
    height: 40%;
    z-index: 1040;
    color: #fff;
    font-size: 5vw;
}

.arrows i {
    position:absolute;
    display:block;
}

.arrows .first{
    top: -8%;
    left: 0%;
    -moz-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
    -o-transform: rotate(-25deg);
    transform: rotate(-25deg);
}
.arrows .second{
    top: 31%;
    left: 16%;
    -moz-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    -webkit-transform: rotate(-50deg);
    -o-transform: rotate(-50deg);
    transform: rotate(-50deg);
}
.arrows .third{
    top: 60%;
    left: 44%;
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -webkit-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
    transform: rotate(-70deg);
}
.arrows .forth{
    top: 68%;
    left: 80%;
}
.whiteinfo{
    background:#FFF;
    width:300px;
    left:10px;
    position:absolute;
    margin:15px;
    padding:15px;
    border-radius:10px;
    max-width:320px;
    border:#ccc;
    text-align:left;
    top:150px;
    z-index:9999999;
}
.match{
    background:#FFF;
    max-width:320px;
    min-height:520px;
    margin:15px;
    border-radius:10px;
    position:absolute;
    right:10px;
    top:100px;
    height:80%;
    width:100%;
    z-index:9999;
}
.magich{
    border:none;
    background:#FFF;
    width:49.6%;
    height:50px;
    color:#e9405a;
    border-top-left-radius:10px;
    font-weight:bold;
    font-size:19px;
    outline:none;
    cursor:pointer;
}
.mat{
    border:none;
    background:#cccccc;
    width:49%;
    height:50px;
    color:#313540;
    border-top-right-radius:10px;
    font-weight:bold;
    font-size:19px;
    outline:none;
    cursor:pointer;
}
.matchimages img{
    width:45%;
    float:left;
    margin:2.5%;
    border-radius:6px;
    cursor:pointer;
    position:relative;
    height:auto;
    overflow:hidden;
}
.matchimages2 img{
    width:45%;
    float:left;
    margin:2.5%;
    border-radius:6px;
    cursor:pointer;
    position:relative;
    height:auto;
    overflow:hidden;
}

.sh1 {color:#e9405a;text-shadow: 0 0 4px #000; }
.sh2 {color:#6bbe66;text-shadow: 0 0 4px #000; }
h1 { font-size:26px; }	

@media only screen and (max-width:1300px){

  h1 {color:#fff; font-size:22px; margin-bottom: 0; margin-top: 10px;}	
  
	.yesno{
		max-width:500px;
	}
	
	.form{
		position:fixed;
		top:0;
		bottom:0;
	}

    .images img{
        height:80%;
    }



}
  
@media only screen and (max-width:600px){
	
   #reg h2 {
     margin-top:15px;
   }
   #h2step2 {
     margin-top: 15px;
   }
   #h2step2b {
     margin-left: 30px;
   }
   #h2step3 {
     margin-top: -10px;
   }
}

@media only screen and (max-width:960px){

    .firstscreen{
        display:block!important;
    }
    
    .arrows{
	    display:none;
    }

	.smallbox{
		left:0;
		right:0;
		margin: auto;
		width:90%;
		padding:0;
	}
	
	.smallboxpadding{
		padding:20px;
		display:none;
	}

    .secondscreen{
        display:none!important;
    }

	.formular{
		display:none;
	}
	
	.buttons{
		display:none;
	}
	
	.header{
		display:none;
	}
	
	.mheader{
		display:block;
	    background:#3e3f40;
	    height:55px;
	    width:100%;
	    position:absolute;
	    z-index:9999999;
	}
	
	.logo{
		width:285px;
        margin:0 auto;
        margin-top:-15px;
	}
	
	.images img{
		border:none;
		height:100%;
		width:100%;
	}
	
	.choice1,.choice2,.choice3,.choice4{
		position:relative;
		width:100%;
		height:100%;
		left:0;
		top:0;
	}
	
	.info{
		display:none;
	}
	
	.images{
		height:100%;
		width:100%;
		margin:0;
	}

    .choice-block{
        display: inline-block;
        border: none;
        outline: medium none;
        vertical-align: top;
        width: 16%;
        height: 100%;
        margin-left:0px;
        margin-right:0px;
    }
	
	.bgimg1,.bgimg2,.bgimg3{
		transform:none;
		object-fit:cover;
	}
	
	.yesno{
		position:absolute;
		width:350px;
		left:0;
		right:0;
		margin: auto;
		bottom:20;
		z-index:9999999;
		height:100px;
		background:rgba(0,0,0,0.3);
		border-radius:50px;
        padding-top:0;
	}
	
	.heartimg, .crossimg{
		background-size:contain;
	}
	
	.heartimg:hover, .crossimg:hover{
		background-size:contain;
	}
	
	.button{
		height:100%;
		width:100%;
	}

	.choice-block{
		width:40%;
        height:100%;

	}
	
	.mobilename{
		display:block;
		position:absolute;
		z-index:9999999;
		bottom:110;
		text-align:center;
		left:0;
		right:0;
		margin:auto;
	}
	
	.regscreen{
		display:none!important;
	}

	.mheader{
		display:none!important;
	}

	.firstscreen{
		display:none!important;
	}	
		
	.mobileregscreen{
		display:block;
		z-index:9999999999999999999999;
		background:#303540;
		width:100%;
		color:#ababab;
		font-size:17px;
	}
	
	.mobileiframe{
		width:350px;
		margin:0 auto;
	}
	
	.mobilelogo{
		width:350px;
		margin:0 auto;
		border-bottom:2px solid #ababab;
	}
	
}