@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.icon{
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-eye:before {
  content: "\f06e";
}
.icon-eye-slash:before {
  content: "\f070";
}
body{
	margin: 0;
	padding: 0;
	background: url('../img/background.jpg');
	background-size: cover;
	font-family: sans-serif;
}
.box{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 350px;
	height: 400px;
	padding: 80px 40px;
	box-sizing: border-box;
	background: rgba(0,0,0,0.7);
}
.box .box-icon{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	overflow: hidden;
	position: absolute;
	top: calc(-100px/2);
	left: calc(50% - 50px);
}
h2{
	margin: 0;
	padding: 0 0 20px;
	color: #efed40;
	text-align: center;
}
.input-group{
	margin-bottom: 20px;
}
.input-group label{
	margin: 0;
	padding: 0;
	font-weight: bold;
	color: #fff;
}
.input-group .input-control{
	width: 100%;
	border: none;
	border-bottom: 1px solid #fff;
	background: transparent;
	outline: none;
	color: #fff;
	padding: 10px 0px;
	font-size: 16px;
}
::placeholder{
	color: rgba(255,255,255,.5);
}
.tombol{
	width: 100%;
	outline: none;
	border: none;
	border-radius: 15px;
	padding: 10px 0px;
	background: #e91e63;
	color: #fff;
	cursor: pointer;
	margin-bottom: 20px;
}
.tombol:hover,
.tombol:focus{
	background-color: #c71a55;
	color: #e4e4e4;
	transition: .3s;
}
.box a{
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}
.box a:hover,
.box a:focus{
	text-decoration: underline;
}
.icons{
    position: absolute;
    margin-top: -38px;
    right: 0;
    margin-right: 42px;
    letter-spacing: 1px;
    padding: 10px 0;
    cursor: pointer;
    transition: .5s;
    color: #fff;
}