body{
background: url('../images/yogurt.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;
}

.container{
height: 100%;
align-content: center;
}

.card{
height: auto;
margin-top: auto;
margin-bottom: auto;
width: 400px;
background-color: rgba(0,0,0,0.5) !important;
}
i{
    color: #fff;
}


.card-body{
    margin-top: 50px;
}
.social_icon img{


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{
    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;
}

.links{
color: white;
}

.links a{
margin-left: 4px;
}


@media (width: 823px) {

    body{
        background: url('../img/napolitano.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;
        }
        
        .container{
        height: 100%;
        align-content: center;
        }
        
        .card{
        height: auto;
        margin-top: auto;
        margin-bottom: auto;
        width: 400px;
        background-color: rgba(0,0,0,0.5) !important;
        }

        i{
            color: #fff;
        }
        
        
        .card-body{
            margin-top: 50px;
        }
        .social_icon img{
        
        
        width: 70px;
        height: 70px;
        }
        
.center{
    display: block;
    text-align: center;
}


        .social_icon span:hover{
        color: white;
        cursor: pointer;
        }
        
        .card-header h3{
        color: white;
        text-align: center;
        }
        
        .social_icon{
        position: absolute;
        
        top: -20px;
        }
        
        .input-group-prepend span{
        width: 40px;
        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{
            text-align: center;
            border: 1px solid #fff;
        color: #fff;
        background-color:rgb(99, 0, 138);
        width: 80px;
        }
        
        .login_btn:hover{
        color: rgb(99, 0, 138);
        background-color: white;
        }
        
        .links{
            font-family: 'shriacha';
            font-size: 14px;
        color: white;
        }
        
        a{
            font-family: 'shriacha';
            font-size: 14px;
        margin-left: 4px;
        }
}





@media (width: 812px) {


    body{
background: url('../images/yogurt.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: auto;
        margin-top: auto;
        margin-bottom: auto;
        width: 400px;
        background-color: rgba(0,0,0,0.5) !important;
        }

        i{
            color: #fff;
        }
        
        
        .card-body{
            margin-top: 50px;
        }
        .social_icon img{
        
        
        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: -20px;
        }
        
        .input-group-prepend span{
        width: 40px;
        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{
            text-align: center;
            border: 1px solid #fff;
        color: #fff;
        background-color:rgb(99, 0, 138);
        width: 80px;
        }
        
        .login_btn:hover{
        color: rgb(99, 0, 138);
        background-color: white;
        }
        
        .links{
            font-family: 'shriacha';
            font-size: 14px;
        color: white;
        }
        
        a{
            font-family: 'shriacha';
            font-size: 14px;
        margin-left: 4px;
        }
}


@media (max-width: 767px) {



    body{
background: url('../images/yogurt.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;
        
        }
        
        .container{
        height: 100%;
        align-content: center;
        }
        
        .card{
        height: auto;
        margin-top: auto;
        margin-bottom: auto;
        width: 400px;
        background-color: rgba(0,0,0,0.5) !important;
        }

        i{
            color: #fff;
        }
        
        
        .card-body{
            margin-top: 50px;
        }
        .social_icon img{
        
        
        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: -20px;
        }
        
        .input-group-prepend span{
        width: 40px;
        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{
            text-align: center;
            border: 1px solid #fff;
        color: #fff;
        background-color:rgb(99, 0, 138);
        width: 80px;
        }
        
        .login_btn:hover{
        color: rgb(99, 0, 138);
        background-color: white;
        }
        
        .links{
            font-family: 'shriacha';
            font-size: 14px;
        color: white;
        }
        
        a{
            font-family: 'shriacha';
            font-size: 14px;
        margin-left: 4px;
        }


}



@media (width: 568px) {
    body{
background: url('../images/yogurt.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: auto;
        margin-top: auto;
        margin-bottom: auto;
        width: 400px;
        background-color: rgba(0,0,0,0.5) !important;
        }

        i{
            color: #fff;
        }
        
        
        .card-body{
            margin-top: 50px;
        }
        .social_icon img{
        
        
        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: -5px;
        }
        
        .input-group-prepend span{
        width: 40px;
        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{
            text-align: center;
            border: 1px solid #fff;
        color: #fff;
        background-color:rgb(99, 0, 138);
        width: 80px;
        }
        
        .login_btn:hover{
        color: rgb(99, 0, 138);
        background-color: white;
        }
        
        .links{
            font-family: 'shriacha';
            font-size: 14px;
        color: white;
        }
        
        a{
            font-family: 'shriacha';
            font-size: 14px;
        margin-left: 4px;
        }




}




@media (max-width: 480px) {


    body{
background: url('../images/yogurt.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:90vh;
       
        }
        
        .container{
        height: 100%;
        align-content: center;
        }
        
        .card{
        height: auto;
        margin-top: 15%;
        margin-bottom: auto;
        width: 400px;
        background-color: rgba(0,0,0,0.5) !important;
        }

        i{
            color: #fff;
        }
        
        
        .card-body{
            margin-top: 50px;
        }
        .social_icon img{
        
        
        width: 80px;
        height: 80px;
        }
        
        .social_icon span:hover{
        color: white;
        cursor: pointer;
        }
        
        .card-header h3{
        color: white;
        text-align: center;
        }
        
        .social_icon{
        position: absolute;
        
        top: -40px;
        }
        
        .input-group-prepend span{
        width: 40px;
        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{
            text-align: center;
            border: 1px solid #fff;
        color: #fff;
        background-color:rgb(99, 0, 138);
        width: 100px;
        }
        
        .login_btn:hover{
        color: rgb(99, 0, 138);
        background-color: white;
        }
        
        .links{
            font-family: 'shriacha';
            font-size: 16px;
        color: white;
        }
        
        a{
            font-family: 'shriacha';
            font-size: 16px;
        margin-left: 4px;
        }






}