body{
    background: url('../img/delmich1.jpg') 
    no-repeat center center fixed;
            background-size: cover;
            -moz-background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
      background-attachment: fixed;
    height:100vh;
    font-family: cursive;
    }
    
    .container{
    height: 100%;
    align-content: center;
    }
    
    .card{
    height: 500px;
    margin-top: auto;
    margin-bottom: auto;
    width: 700px;
    background-color: rgba(0,0,0,0.5) !important;
    }
    i{
        color: #fff;
    }
    
    
    .card-body{
        margin-top: 50px;
    }
    .social_icon img{
    
    text-align: center;
    width: 90px;
    height: 90px;
    }
    
    .social_icon span:hover{
    color: white;
    cursor: pointer;
    }
    
    .card-header h3{
    color: white;
    text-align: center;
    }
    
    .social_icon{
    position: absolute;
    
    top: -45px;
    }
    
    
    .input-group-prepend span{
    width: 50px;
    background-color:rgb(99, 0, 138);
    color: black;
    border:0 !important;
    }
    
    input:focus{
    outline: 0 0 0 0  !important;
    box-shadow: 0 0 0 0 !important;
    
    }
    
    .remember{
    color: white;
    }
    
    .remember input
    {
    width: 20px;
    height: 20px;
    margin-left: 15px;
    margin-right: 5px;
    }
    
    .login_btn{
        margin-top: 35px;
        text-align: center;
        border: 2px solid #fff;
    color: #fff;
    background-color:rgb(99, 0, 138);
    width: 100px;
    }
    
    .login_btn:hover{
    color: rgb(99, 0, 138);
    background-color: white;
    }
    
 




    @media (width: 823px) {





        body{
            background: url('../img/delmich1.jpg') 
            no-repeat center center fixed;
                    background-size: cover;
                    -moz-background-size: cover;
                    -webkit-background-size: cover;
                    -o-background-size: cover;
              background-attachment: fixed;
            height:100vh;
            font-family: cursive;
            }
            
            .container{
            height: 100%;
            align-content: center;
            }
            
            .card{
            height: 360px;
            margin-top: auto;
            margin-bottom: auto;
            width: 700px;
            background-color: rgba(0,0,0,0.5) !important;
            }
            i{
                color: #fff;
            }
            
            
            .card-body{
                margin-top: 30px;
            }
            .social_icon img{
            
            text-align: center;
            width: 70px;
            height: 70px;
            }
            
            .social_icon span:hover{
            color: white;
            cursor: pointer;
            }
            
            .card-header h3{
            color: white;
            text-align: center;
            }
            
            .social_icon{
            position: absolute;
            
            top: -25px;
            }
            
            
            .input-group-prepend span{
            width: 50px;
            height: 30px;
            background-color:rgb(99, 0, 138);
            color: black;
            border:0 !important;
            }
            
            input:focus{
            outline: 0 0 0 0  !important;
            box-shadow: 0 0 0 0 !important;
            
            }
            
            .remember{
            color: white;
            }
            
            .remember input
            {
            width: 20px;
            height: 20px;
            margin-left: 15px;
            margin-right: 5px;
            }
            
            .login_btn{
                margin-top: 35px;
                text-align: center;
                border: 2px solid #fff;
            color: #fff;
            background-color:rgb(99, 0, 138);
            width: 100px;
            }
            
            .login_btn:hover{
            color: rgb(99, 0, 138);
            background-color: white;
            }
            
         .form-control{
             height: 30px;
         }
        
        


    }

    @media (width: 812px) {






        body{
            background: url('../img/delmich1.jpg') 
            no-repeat center center fixed;
                    background-size: cover;
                    -moz-background-size: cover;
                    -webkit-background-size: cover;
                    -o-background-size: cover;
              background-attachment: fixed;
            height:100vh;
            font-family: cursive;
            }
            
            .container{
            height: 100%;
            align-content: center;
            }
            
            .card{
            height: 330px;
            margin-top: auto;
            margin-bottom: auto;
            width: 700px;
            background-color: rgba(0,0,0,0.5) !important;
            }
            i{
                color: #fff;
            }
            
            
            .card-body{
                margin-top: 20px;
            }
            .social_icon img{
            
            text-align: center;
            width: 70px;
            height: 70px;
            }
            
            .social_icon span:hover{
            color: white;
            cursor: pointer;
            }
            
            .card-header h3{
            color: white;
            text-align: center;
            }
            
            .social_icon{
            position: absolute;
            
            top: -25px;
            }
            
            
            .input-group-prepend span{
            width: 50px;
            height: 30px;
            background-color:rgb(99, 0, 138);
            color: black;
            border:0 !important;
            }
            
            input:focus{
            outline: 0 0 0 0  !important;
            box-shadow: 0 0 0 0 !important;
            
            }
            
            .remember{
            color: white;
            }
            
            .remember input
            {
            width: 20px;
            height: 20px;
            margin-left: 15px;
            margin-right: 5px;
            }
            
            .login_btn{
                margin-top: 15px;
                text-align: center;
                border: 2px solid #fff;
            color: #fff;
            background-color:rgb(99, 0, 138);
            width: 100px;
            }
            
            .login_btn:hover{
            color: rgb(99, 0, 138);
            background-color: white;
            }
            
         .form-control{
             height: 30px;
         }
        





    }

    @media (max-width: 767px) {

        body{
            background: url('../img/delmich1.jpg') 
            no-repeat center center fixed;
                    background-size: cover;
                    -moz-background-size: cover;
                    -webkit-background-size: cover;
                    -o-background-size: cover;
              background-attachment: fixed;
            height:100vh;
            font-family: cursive;
            }
            
            .container{
            height: 100%;
            align-content: center;
            }
            
            .card{
            height: 570px;
            margin-top: 10%;
            margin-bottom: auto;
            width: 700px;
            background-color: rgba(0,0,0,0.5) !important;
            }
            i{
                color: #fff;
            }
            
            
            .card-body{
                margin-top: 30px;
            }
            .social_icon img{
            
            text-align: center;
            width: 90px;
            height: 90px;
            }
            
            .social_icon span:hover{
            color: white;
            cursor: pointer;
            }
            
            .card-header h3{
            color: white;
            text-align: center;
            }
            
            .social_icon{
            position: absolute;
            
            top: -45px;
            }
            
            
            .input-group-prepend span{
            width: 50px;
            height: 30px;
            background-color:rgb(99, 0, 138);
            color: black;
            border:0 !important;
            }
            
            input:focus{
            outline: 0 0 0 0  !important;
            box-shadow: 0 0 0 0 !important;
            
            }
            
            .remember{
            color: white;
            }
            
            .remember input
            {
            width: 20px;
            height: 20px;
            margin-left: 15px;
            margin-right: 5px;
            }
            
            .login_btn{
                margin-top: 15px;
                text-align: center;
                border: 2px solid #fff;
            color: #fff;
            background-color:rgb(99, 0, 138);
            width: 100px;
            }
            
            .login_btn:hover{
            color: rgb(99, 0, 138);
            background-color: white;
            }
            
         .form-control{
             height: 30px;
         }
        





    }
    @media (max-width: 480px) {
        body{
            background: url('../img/delmich1.jpg') 
            no-repeat center center fixed;
                    background-size: cover;
                    -moz-background-size: cover;
                    -webkit-background-size: cover;
                    -o-background-size: cover;
              background-attachment: fixed;
            height:100vh;
            font-family: cursive;
            }
            
            .container{
            height: 100%;
            align-content: center;
            }
            
            .card{
            height: 550px;
            margin-top:12%;
            margin-bottom: auto;
            width: 700px;
            background-color: rgba(0,0,0,0.5) !important;
            }
            i{
                color: #fff;
            }
            
            
            .card-body{
                margin-top: 10px;
            }
            .social_icon img{
            
            text-align: center;
            width: 70px;
            height: 70px;
            }
            
            .social_icon span:hover{
            color: white;
            cursor: pointer;
            }
            
            .card-header h3{
            color: white;
            text-align: center;
            }
            
            .social_icon{
            position: absolute;
            
            top: -35px;
            }
            
            
            .input-group-prepend span{
            width: 50px;
            height: 30px;
            background-color:rgb(99, 0, 138);
            color: black;
            border:0 !important;
            }
            
            input:focus{
            outline: 0 0 0 0  !important;
            box-shadow: 0 0 0 0 !important;
            
            }
            
            .remember{
            color: white;
            }
            
            .remember input
            {
            width: 20px;
            height: 20px;
            margin-left: 15px;
            margin-right: 5px;
            }
            
            .login_btn{
                margin-top: 15px;
                text-align: center;
                border: 2px solid #fff;
            color: #fff;
            background-color:rgb(99, 0, 138);
            width: 100px;
            }
            
            .login_btn:hover{
            color: rgb(99, 0, 138);
            background-color: white;
            }
            
         .form-control{
             height: 30px;
         }
        




    }