@charset "utf-8";
body  {background-image: url('../img/pexels-photo-132197.jpeg'); padding:0px;margin:0px;
}
div.main {
   
   
    background-image: url('../img/pexels-photo-132197.jpeg');
    height: calc(100vh);
    width: 100%;
}

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;}
/* ---------- LOGIN ---------- */
.middle {  display: flex; width: 60%;margin-top: 120px;}

#login form span.fa {background-color: #fff;border-radius: 3px 0px 0px 3px;color: #000;	display: block;	float: left;height: 50px; font-size:24px;line-height: 50px;	text-align: center;	width: 50px;}
#login form input {	height: 50px;border: none;}
fieldset{ padding:0; border:0; margin: 0;}
#login form input[type="text"], input[type="password"] {background-color: #fff;border-radius: 0px 3px 3px 0px;color: #000;margin-bottom: 1em;padding: 0 16px;width: 87% !important;}
#login form input[type="submit"] {  border-radius: 3px;  -moz-border-radius: 3px;  -webkit-border-radius: 3px;  background-color: #000000;  color: #eee;  font-weight: bold;  text-transform: uppercase; padding: 5px 10px; /*height: 30px;*/}
#login form input[type="submit"]:hover {background-color: #d44179;}
#login > p {text-align: center;}
#login > p span {padding-left: 5px;}
.small-text{color: #000;}
    .small-text:hover {color:#fff;
    }
    
    #signup form input[type="text"], input[type="password"] {background-color: #fff;color: #000;width: 100%;height:43px;}
   

@media(max-width:767px){
	.middle {  display: flex; width:95%;margin-top: 100px;}

#login form input[type="text"], input[type="password"] {width: 83%;}

div.main{height:100%;}

}

@media(max-width:480px){
	.middle {  display: flex; width:95%;margin-top: 100px;}

#login form input[type="text"], input[type="password"] {width: 83%;}

div.main{height:calc(100vh);}
}
@media(max-width:320px){
#login form input[type="text"], input[type="password"] {width: 80%;}
div.main{height:calc(100vh);}
}
@media(max-width: 480px){
    #login form span.fa {
        width: 29px;
    
    }
}