@import url(http://fonts.googleapis.com/css?family=Nunito:400,300);
body, input, button {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body, form, input, button, h1 {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	/*background: url(../../logo/bk5.png) center center/cover fixed no-repeat;*/
	background: black;
	padding: 200px;
	font-family: Nunito, sans-serif;
	font-size: 100%;
	overflow:hidden;
}

form {
	margin: auto;
	padding: 18px 22px;
	width: 320px;
	border-radius: 5px;
	background: black;

}

h1 {
	font: normal 1.6em/1.6em Nunito, sans-serif;
	color: #fff;
  text-align: center;
  margin: 10px 0 23px;
}

input, button {
  width: 100%;
  border: none;
  padding: 16px;
  font-size: 1.1em;
  border-radius: 5px;
  -webkit-transition: background-color 80ms ease-out;
  -moz-transition: background-color 80ms ease-out;
  -o-transition: background-color 80ms ease-out;
  -ms-transition: background-color 80ms ease-out;
  transition: background-color 80ms ease-out;
}

input {
  margin-bottom: 22px;
  background: #eee;
  padding-left: 56px;
}

input[type=text] {
  background-image: url(http://miloluca.github.io/playground/001_User-Login/icons/user.svg);
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: 16px center;
}

input[type=password] {
  background-image: url(http://miloluca.github.io/playground/001_User-Login/icons/lock.svg);
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: 16px center;
}

input:hover {
  background-color: rgb(244, 244, 244);
}

input:focus {
  border-left: 6px solid #00B2ED;
  outline: none;
  background-color: #fff;
}

button {
  background-color: #00B2ED;
  color: #fff;
  cursor: pointer;
}

button:hover, button:focus {
  background-color: #00BFFF;
  outline: none;
}

button:active {
  background-color: #0F93BF;
  opacity: .7;
}
#logo{
	width:280px;
	height:80px;
}