.authentication{

    height: 100vh;
    max-height: 1050px;
    padding: 0;
    position: relative;
    
    .container >.content-center{
        position: relative;
        text-align: center;
        padding: 0 15px;
        width: 100%;
        max-width: 960px;
        z-index: 99;
        margin: 0 auto;
        padding-top: 120px;
    }

    &::before{
        background-color: #191f28;
        content: '';        
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 184px;
    }

    .company_detail{
        @extend .align-left;
        color: $grey-800;

        .logo{
            @extend .m-t-0;
            @extend .m-b-40;
            color: $white;

            img{
                width: 40px;
                vertical-align: top;
            }
        }

        h3{
            font-weight: $font-weight-300;
            text-transform: uppercase;            
            letter-spacing: 2px;
            @extend .m-b-10;
            i{
                font-size: 30px;
                margin: 0 2px;
            }
        }
        p{  
            letter-spacing: 1px;
            font-weight: $font-weight-300;
        }
        .social_link{
            @extend .padding-0;
            @extend .m-b-15;

            li{
                @extend .inlineblock;
            }         
        }
        .footer ul li:first-child{
            a{
                @extend .p-l-0;
            }
        }
    }

    .card-plain{

        border-radius: $border-radius-large;
        padding-bottom: $padding-base-horizontal;
        max-width: 330px;
        padding: 20px;
        background: $white;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);

        &.card-plain{
            margin: 0 auto;
            
        }
        .header{
            @extend .m-b-20;
            h5{
                @extend .m-b-0;
            }
            img{
                width: 80px;
                border: 3px solid $white;
                box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
            }
        }
        .footer{
            padding: 15px 0;
        }
    }
   
    .checkbox{
        label{
            font-size: 12px;
        }
    }

    canvas {
        display: block;
        vertical-align: bottom;
    }

    #particles-js {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
} 

@media screen and (max-width: 992px) {
    .authentication{
        .company_detail{
            text-align: center;
            margin-bottom: 30px;
        }
    }
}

@media only screen and (max-width: 767px) {
    .authentication{

        &::before{
            position: absolute;
            height: 115px;
        }
        .container>.content-center{
            transform:none;
            position: relative;
            top: auto;
            left: auto;
            padding: 40px 0;
        }
        .company_detail{
            h3{
                font-size: 24px;
            }
        }
    }
}