html, body {width: 100%; height: 100%;}

body {
    animation: fadeInBody 800ms forwards;
    -moz-animation: fadeInBody 800ms forwards;
    -webkit-animation: fadeInBody 800ms forwards;
}

#producerinfo {position: fixed; bottom: 15px; color: rgba(0,0,0,.5); font-size: .85em; text-align: center; width: 100%; line-height: 1;}
#producerinfo a {color: inherit;}

@keyframes fadeInBody {from {opacity: 0;background: #fff;} to {opacity: 1;background: #eee;}}
@-moz-keyframes fadeInBody {from {opacity: 0;background: #fff;} to {opacity: 1;background: #eee;}}
@-webkit-keyframes fadeInBody {from {opacity: 0;background: #fff;} to {opacity: 1;background: #eee;}}


.mt-3 {margin-top: 1.5rem;}
p.videolink {color: #666;}
p.videolink a{font-weight: bold; color:inherit;}
p.videolink a:hover {color: rgb(81,193,237);}

.video-modal .modal-body {padding: 2px;}

body .waitloader {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 180px; height: 180px; border-radius: 100%;
    background-color: #fff;
    box-sizing: content-box;
    background-image: url(../gfx/pepito.png);
    background-position:  center center;
    background-repeat:  no-repeat;
    background-size: contain;
    z-index: -1;
    opacity: 0; 
    transition: border 1500ms, opacity 300ms; 
    z-index: -1;
    border: 1px solid rgba(255,255,255,0);
    animation: bouncewait 500ms forwards;
    transition: all 300ms;
}
body .wait_demo {
    position: fixed;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    width: 400px; height: 200px; border-radius: 100%;
    background-color: #fff;
    box-sizing: content-box;
    background-position:  center center;
    background-repeat:  no-repeat;
    background-size: contain;
    opacity: 0; 
    z-index: -1;
    border: 1px solid rgba(255,255,255,0);
}
body .wait_gif {
    position: fixed;
    left: 28%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100px; border-radius: 100%;
    background-color: #fff;
    box-sizing: content-box;
    background-image: url(../gfx/pepito_sm.gif);
    background-position:  center center;
    background-repeat:  no-repeat;
    background-size: contain;
    transition: border 1500ms, opacity 300ms; 
    border: 1px solid rgba(255,255,255,0);
    /*animation: bouncewait 500ms forwards;*/
    transition: all 300ms;
}
body .waittxt {
    position: fixed;
    left: 8%;
    top: 80%;
    font-size: 15px;
    /*transform: translate(-50%, -80%);*/
    /*background-color: #fff;*/
    box-sizing: content-box;
}
body .waitloaderright {
    position: fixed;
    left: 62%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 180px; height: 180px; border-radius: 100%;
    /*background-color: #fff;*/
    box-sizing: content-box;
    background-image: url(../gfx/pepito_right.png);
    background-position:  center center;
    background-repeat:  no-repeat;
    background-size: contain;
    border: 1px solid rgba(255,255,255,0);
}

@keyframes bouncewait {
    0% {width: 180px; height: 180px;}
    50% {width: 160px; height: 160px;}
    100% {width: 180px; height: 180px;}
}

body.wait .waitloader {opacity: 1; border: 3200px solid rgba(255,255,255,1); z-index: 100;}
body.wait .wait_demo {opacity: 1; border: 3200px solid rgba(255,255,255,1); z-index: 100;}

.site-wrapper {
    display: table;
    height: 100%;
    min-height: 100%;
    width: 100%;   
}
.site-wrapper-inner {
    display: table-cell;
    vertical-align: top;
}
.cover-container {
    margin-left: auto;
    margin-right: auto;
}


.logform {width: 260px; margin: 0px auto 0 auto; text-align: left;}
.loginform {animation-name: fademein; animation-duration: 1s;}
.error .loginform {animation-duration: 1ms;}
@keyframes fademein {
    0% {opacity: 0;}
    30% {opacity: 0; transform: scale(0.8,0.8);}
    100% {opacity: 1; transform: scale(1,1);}
}


.demologincontainer .formwrapper {background: #032938; padding: 4rem 0; margin-bottom: 4.5rem;}

.demovideocontainer p {margin: 2rem 0;}
.demovideo img {width: 100%; height: auto;}

@media (min-width: 992px){
    .demologin .row {
        display: flex;
        align-items: center;
    }
    .demologin {
        background: #032938;
    }
    
    .demovideocontainer {
        margin-bottom: 0;
    }

    .demologin::before  {
        content: "";
        width: 100%;
        left: 0%;
        top: 0;
        bottom: 0;
        transform: translate(0,0);
        position: absolute;
        background: #ccc;
        z-index: 0;
        -webkit-clip-path: polygon(0 0, 55% 0, 45% 100%, 0 100%);
        clip-path: polygon(0 0, 55% 0, 45% 100%, 0 100%);
    
    }
    #producerinfo.demo {mix-blend-mode: difference; color: rgba(255,255,255,.5);}

}

.demovideo {width: 100%; position: relative; display: block;}
.demovideo::after {
    content: "";
    position: absolute;
    z-index: 2;
    background: url(/gfx/video_overlay.png) center center no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    opacity: 1;
    transition: all 300ms;
}

.demovideo:hover::after {
    opacity: .7;
}

.logform fieldset {transition: all .3s;}
.logform fieldset .form-group {margin-bottom: .7em;}
.logform h1 {font-size: 1.3em; color: rgb(27,140,209); margin-bottom: 10px; font-weight: 300; }
.logform h1 img {width: 150px; display: block; margin: 0 auto 1rem;}
.input-group:hover .input-group-text,  .input-group:hover input {border-color: #bbb;}

.logform .input-group-text i {width: 10px; text-align:center;}

.site-wrapper-inner {vertical-align: middle;}
.cover-container {width: 100%;}

.btn { transition: all .3s;}

span.pw-check {position: absolute; right: 0; top: 0; bottom: 0; width: 30px; display: block; z-index: 100; line-height: 30px; text-align: center; cursor: help;
}
span.pw-same-check {position: absolute; right: 0; top: 0; bottom: 0; width: 30px; display: block; z-index: 100; line-height: 30px; text-align: center; cursor: help;}


/* FIX FOCUS */

.form-control:focus {
    border-color: #ccc;
    box-shadow: none;
    outline: 0 none;
    background: #fcffe8;
}

/* Anpassungen LOGIN */
.form-login .input-group-text {font-size: 14px; color: #999; background: #fff; border-right: 1px solid #eee !important;}
/*.form-login input.form-control {border-left: none !important;}*/

/* Passwort check */

.pwcheck {margin: 1rem 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.pwcheck p {margin: 0; padding: .25rem 0;}
.pwcheck ul {list-style: none; margin: 0; padding: 0;} 
.pwcheck ul li {border-top: 1px dotted #ddd; padding: .25rem 0;}
.pwcheck.checked ul li .bi-exclamation {color: #900;}
.pwcheck ul li .bi-check {color: #28a745;}