/*login floating*/
/*.box {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:400px;
height:400px;
padding:40px;
background:rgba(0,0,0,.8);
box-sizing:border-box;
box-shadow:0 15px 25px rgba(0,0,0,.5);
border-radius:10px;
}

.box h2 {
    margin:0 0 30px;
    padding:0;
    color:whitesmoke ;
    text-align:center;

}

.box .inputBox {
    position:relative;
    }

    .box .inputBox input {
        width: 100%;
        padding: 10px 0;
        font-size: 16px;
        color: #fff;
        letter-spacing:1px;
        margin-bottom :30px;
        border:none;
        border-bottom:1px solid #fff;
        outline:none;
        background:transparent;

    }

    .box .inputBox label 
    {
    position:absolute;
    top:0;
    left:0;
    padding:10px 0;
    font-size:18px;
    color:#fff;
    pointer-events:none;
    transition:.5s;
    }

    .box .inputBox input:focus ~ label,
    .box .inputBox input:valid ~ label {
        top: -18px;
        left: 0;
        color: #03a9f4;
        font-size: 14px;
    }

    .box input[type="submit"] {
        position: relative;
        background: transparent;
        border: none;
        outline: none;
        color: #fff;
        background: #03a9f4;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 5px;
        width: 100%;
        font-size:14px;
        transition: .25s;
    }

        .box input[type="submit"]:hover {
            font-size: 18px;
        }*/

body {
  background-color:  #343a40;
}

.login {
    background-color: #212529e6;
    color: whitesmoke;
    width:100%;
    opacity:75%;

}


/*split page*/
.login,
.image {
    min-height: 100vh;
}

.shadow {
    position: relative;
    z-index: 1;
}

    .shadow.dark-hard::after {
        background: #232323 none repeat scroll 0 0;
        content: "";
        height: 100%;
        left: 0;
        opacity: 0.75;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -1;
    }

.bg-image {
    background-color: darkgray;
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center center;
    opacity:90;
   
}

.lblA, .lblB, .lblC, .lblD, .lblE {
    background-color: #212529e6;
    color: whitesmoke;
    border-top-left-radius: 0;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 0;
    display: block;
    padding: 5px;
    /*width: 180px;*/
    opacity: 0;
    animation-name: hacervisible;
    animation-delay: 1s;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

.show-image {
    
    animation-name: hacervisible;
    animation-delay: 1s;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

.lbldiv {
    position:absolute;
    bottom:10px;
    left:0px;
   
}


@keyframes hacervisible {
   /* from {
        visibility: hidden;
    }

    to {
        visibility: visible;
    }*/

    from {
        opacity:0;
    }

    to {
      opacity:1;
    }
}