*{
	margin:auto;
}

@font-face{
	font-family:font1;
	src:url(../font/Poppins.ttf);
}
@font-face{
	font-family:font2;
	src:url("../font/Comfortaa-Bold.ttf");
}

body{
  	font-family:font1;
	font-size:12px;
	color:#fff;
}

a{
	text-decoration:none;
	color:#474747;
	transition:ease .3s;
}
a:hover{
	color:#188fbc;
}

#background{
	width:100%;
	height:100vh;
	background:#28b366;
	background:url(../../images/background.png) center no-repeat;
    background-size:cover;
}

#spirit{
	position:absolute;
	bottom:0;
}

/* LOADING */
#loading{
	position:relative;
	top:0;
	left:37.5%;
	display:block;
	z-index:99999;
}
#result{
	position:relative;
	bottom:0;
	left:0;
	right:0;
	z-index:99999;
	font-size:12px;
	text-align:center;
	color:#fff;
}
.resultSuccess{
	padding:10px;
	background:#2cbe9e;
	border-radius:8px;
}
.resultFailed{
	padding:10px;
	background:#e95b4c;
	border-radius:8px;
}


/* LOGIN */
#loginbox{
	position:relative;
	z-index:9;
	margin:auto;
	width:250px;
	height:460px;
	padding:40px 60px 0;
	background:#000;
	background:rgba(0,0,0,.75);
	border-radius:20px;
    animation:box 0.5s;
}
@keyframes box{
	0%{
		opacity:0;
		transform:scale(.90);
	}
	100%{
		opacity:1;
		transform:scale(1);
	}
}
#title{
	margin-bottom:10px;
	font-family:font2;
	font-weight:bold;
	text-align:center;
	line-height:30px;
	rotate:-5deg;
	font-size:24px;
}
.red{
	display:inline;
	color:#d33a33;
}
.logo{
	margin-bottom:20px;
	width:100%;
	height:auto;
}
.link{
	position:absolute;
	bottom:20px;
	right:60px;
	font-weight:bold;
	color:#fff;
}
#boxform{
	margin:auto;
	padding:5px 0;
}
.boxicon{
	float:left;
	width:24px;
	height:24px;
	padding:8px 5px 7px 10px;
	background:#188fbc;
	border-radius:8px 0 0 8px;
}

.imglog{
	width:22px;
	height:22px;
}


/*FORM LOGIN*/
.formlog input{
	width:210px;
	padding:8px;
	font-family:font1;
	font-size:15px;
	color:#474747;
	border:none;
	border-radius:0 8px 8px 0;
}
.formlog input:focus{
	outline:none;
}
.formlog input:required{
	background:#fff;
}
.formlog input:required:valid{
	background:#fff;
}
.formlog input:focus:invalid{
	background:#fff;
}

#tombol{
	margin	:10px 0;
	display:inline-block;
	width:250px;
	height:40px;
	padding-top		:8px;
	letter-spacing	:1px;
	font-family		:font1;
	font-weight 	:bold;
	font-size		:14px;
	text-align		:center;
	text-decoration	:none;
	color:#fff;
	background		:#188fbc;
	border-radius 	:8px;
	opacity:1;
	cursor:pointer;
	transition 		:ease 0.3s;
}
#tombol:hover{
	background:#188fbc;
}



@media only screen and (max-device-width:1000px) {
	
	#loginbox{
		margin:0 20px;
		width:240px;
		padding:20px 40px;
	}
	.formlog input{
  		width:200px;
	}	
	#tombol{
		width:240px;
	}
	
}