.darkbg {
    background: #201E1E;
}

.firstbackground {
    background: url(../../Images/loginbg1.jpg);
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 60%;
    position: relative;
}

    .firstbackground:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #00000087;
        content: '';
    }
/* .firstbackground::after {
    background: url(../img/loginbg2.jpg);
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: right top;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    background-size: 100%;
    clip-path: polygon(56.5% 0%, 100% 0%, 100.1% 100.3%, 43.2% 100.3%);
} */
.rightImg {
    background: url(../../Images/loginbg2.jpg);
    height: 100vh;
    clip-path: polygon(20.6% 0%, 100% 0%, 100.1% 100.3%, 5% 100.3%);
    background-repeat: no-repeat;
    background-position: right top;
    width: 60%;
    float: right;
}

.trackline_logo {
    font-size: 35px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 20px;
    display: inline-block;
}

form {
    padding: 0px;
    margin: 0px;
}

.log {
    margin: 10% auto 0% 20%;
    background-color: #FFF;
    padding: 30px 280px 100px 30px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 20px;
}

    .log h2 {
        color: #000000;
        font-size: 25px;
        margin-bottom: 30px;
        font-weight: 400;
        display: none;
    }

    .log .input-cont {
        position: relative;
        margin: 0 0px 30px;
    }

        .log .input-cont:last-of-type {
            margin-bottom: 30px;
        }

        .log .input-cont input {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 40px;
            outline: none;
            color: #212121;
            font-size: 22px;
            font-weight: 400;
            background: none;
            border: none;
        }

            .log .input-cont input:focus {
                outline: none;
                box-shadow: none
            }

        .log .input-cont label {
            position: absolute;
            color: #948c8c;
            top: 0;
            left: 0;
            line-height: 40px;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -o-transition: .3s;
            transition: .3s;
        }

        .log .input-cont input:focus + label {
            margin-top: -30px;
            -webkit-transform: scale(.8);
            -moz-transform: scale(.8);
            -o-transform: scale(.8);
            transform: scale(.8);
            color: #bdbdbd;
        }

    .log .border1,
    .log .border2 {
        position: absolute;
        height: 1px;
        background-color: #9E9E9E;
        left: 0;
        bottom: 0;
        width: 100%;
    }

        .log .border1::after,
        .log .border1::before,
        .log .border2::after,
        .log .border2::before {
            content: "";
            position: absolute;
            bottom: 0;
            width: 0;
            height: 2px;
            -webkit-transition: .5s;
            -moz-transition: .5s;
            -o-transition: .5s;
            transition: .5s;
        }

        .log .border1::after,
        .log .border2::after {
            right: 50%;
            background-color: #B29A76;
        }

        .log .border1::before,
        .log .border2::before {
            left: 50%;
            background-color: #B29A76;
        }

    .log .input-cont input:focus ~ .border1::after,
    .log .input-cont input:focus ~ .border1::before,
    .log .input-cont input:focus ~ .border2::after,
    .log .input-cont input:focus ~ .border2::before {
        width: 50%;
    }

    .log .signbutton {
        display: block;
        border: 2px solid transparent;
        padding: 5px 30px;
        font-size: 18px;
        cursor: pointer;
        color: #ffffff;
        background: #B29A76;
        border-radius: 4px;
        -webkit-transition: .5s;
        -moz-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
    }

        .log form input[type="submit"]:focus {
            outline: none;
        }

        .log form input[type="submit"]:hover {
            border: 2px solid #B29A76;
        }

/* Responsive CSS */
@media only screen and (max-width:767px) {
    .firstbackground {
        background-size: cover;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height:100vh;
    }

    .log {
        padding: 40px;
        margin: 0px;
        position: inherit;
    }

    .rightImg {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .firstbackground {
        background-size: cover;
        height:100vh;
    }

    .log {
        padding: 40px 150px 100px 30px;
    }

    .rightImg {
        background-position: center top;
    }
}

@media (min-width: 413px) and (max-width: 898px) and (orientation: landscape) {
    .firstbackground {
        height: 100vh;
    }
    .log {
        margin: 0% auto 0% 20%;
    }
}

@media (-webkit-device-pixel-ratio: 1) {
    .rightImg {
        clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 350%);
    }
    .log {
        padding: 30px 200px 100px 30px;
    }
}