﻿body {
    margin: 0;
    padding: 0;
    /*background: url('../../images/bg.jpg');*/
    background-image: url('../../images/bg.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
    height: 100vh;
}
.box{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:400px;
    padding:40px;
    background:rgba(0,0,0,.1);
    box-sizing:border-box;
    box-shadow:0 15px 25px rgba(0,0,0,.5);
    border-radius:10px;


}
.box h2 {
    margin:0 0 30px;
    padding:0px;
    color:#fff;
    text-align:center;

}
    .box .inputBox {
        position:relative;

    }
        .box .inputBox .inputlogin {
            width: 100%;
            padding: 10px 0;
            font-size: 16px;
            color: #fff;
            margin-bottom: 50px;
            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: 16px;
            pointer-events: none;
            transition: .5s;
            background: transparent;
        }
        .box .inputBox .inputlogin:focus ~ label,
        .box .inputBox .inputlogin:valid ~ label {
            top: -27px;
            left: 0;
            color: #03a9f4;
            font-size: 12px;
        }
    .box .submit {
        /*background: transparent;
        border: none;
        outline: none;
        color: #fff;
        background: #03a9f4;
        padding:10px 20px;
        cursor:pointer;
        border-radius:5px;*/
        background: transparent;
        margin-left: 95px;
        position: relative;
        padding: 15px 30px;
        color: #2196f3;
        letter-spacing: 2px;
        text-transform: uppercase;
        transition: 0.5s;
        background: black;
        border: none;
        text-decoration: none;
    }
        .submit::before{
            content:'';
            position:absolute;
            top:0;
            left:0px;
            width:50%;
            height:100%;
            background:rgba(255,255,255,0.2);

        }
        .box .submit svg,
        .box .submit svg rect {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            fill: transparent;
        }
            .box .submit svg rect {
                stroke-width: 2;
                stroke: #2196f3;
                stroke-dasharray: 100;
                animation: animate 2s linear infinite;
            }
            @keyframes animate{
                0%{
                    stroke-dashoffset:400;
                }
                100%{
                    stroke-dashoffset:0;
                }

            }
