html,body{margin:0px;padding:0px;}
html{background-color:#93C136;}
#ErrorBox{display:none;}
.loginscreen{
    overflow: hidden;position: fixed;width:100vw;height:100vh;
    background-image: url(includes/BG4_klein.jpg);
    background-size: cover;
}
.whitetransparent{
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.7);
    position: absolute;
    z-index:1;
}
.quer{background-color: #93C136;position: absolute;width:100%;height:200vh;transform: rotate(15deg);
     left:50%;
     top:-50%;
     overflow: hidden;
     z-index:2;
}
.textscreen{
    position: relative;width:calc(50% - 40px);padding:20px;
    text-align: right;
    z-index:3;
}
.loginform{
    background-color:#ffffff;
    position: relative;width:calc(50% - 300px);margin:50px;left:calc(50% + 100px);padding:10px;border-radius: 20px;
    border: 0px solid #ffffff;
    z-index:3;
    font-size:14pt;
}
.loginform input{width:calc(100% - 60px);display:block;font-size:20pt; margin:30px;border-radius: 5px;}
.loginscreen .logo{width:70%;position: relative;max-width: 600px;}
.placeholder{
    font-size:20pt;font-weight: bold;
}
.loginform input[type=submit],.btn{letter-spacing: 0.408em;}
.LoginError{
    margin:5px 30px;
    position: relative;
    font-size: 18pt;
    font-weight: bold;
    color:#f00;
    width: calc(100% - 60px);
    text-align: left;
    display: none;
}
.btn{
    margin: 30px;
    position: relative;
    background-color:#93c136;
    padding: 10px;
    font-size: 20pt;
    font-weight: bold;
    color:#222;
    width: calc(100% - 80px);
    text-align: center;
    display: none;
    cursor: pointer;
}
.btn:hover{
    padding:9px;
    border:1px solid #222;
    border-radius: 5px;
}
@media(max-width:1200px){
    .quer{left:30%;}
    .loginform{left:calc(30% + 100px);width:calc(70% - 300px)}
    .textscreen{width:calc(30%);}
    .textscreen .logo{width:100%;}
}
@media(max-width:800px){
    .quer{display:none;}
    .loginform{left:0px;width:calc(100% - 80px);margin:30px;padding:5px;}
    .textscreen{width:calc(100% - 40px);background-color: #ffffff;}
    .textscreen .logo{width:100%; max-width: 300px;margin:0 auto;position: relative;display:block;}
    .loginform input{font-size:16px;
                    margin:15px 5px;
                    width:calc(100% - 10px);
    }
    .loginscreen{overflow: auto;background-image: none;}
    .whitetransparent{background-color: transparent;}
}

@media(max-height:500px){
    .whitetransparent{background-color: transparent;}
   .quer{display:none;}
   .loginscreen{overflow: auto;background-image: none;}
   .textscreen{background-color: #ffffff;position: relative;display: inline-block;width: calc(100% - 40px);text-align: center;}
   .loginform{left:auto;margin:50px auto;}
}