*{
	margin:auto;
}

@font-face{
	font-family:font1;
	src:url("../font/Heebo-Medium.ttf");
}
@font-face{
	font-family:font2;
	src:url(../font/Syncopate-Regular.ttf);
}

body{
	font-family:font1;
	font-size:15px;
	color:#474747;
}

#background{
	width:100%;
	height:100vh;
	background:#fff;
	background:url(../images/finance.jpg) center no-repeat;
    background-size:cover;
}

#result{
	position:relative;
	bottom:0;
	left:0;
	right:0;
	z-index:99999;
	color:#fff;
	text-align:center;
}
.resultSuccess{
	padding:10px 0;
	font-size:13px;
	line-height:17px;
	background:#2bba7a;
	border-radius:4px;
}
.resultFailed{
	padding:10px 0;
	font-size:13px;
	line-height:17px;
	background:#ef6454;
	border-radius:4px;
}

/* LOGO */
.iconlogo{
	position:relative;
	left:-15px;
	margin-bottom:30px;
	width:160px;
	height:auto;
}


/* PAGE */
#page{
	position:absolute;
	left:60px;
	top:60px;
	z-index:999999;
	width:800px;
}

#content{
	width:100%;
	height:460px;
    animation:zoom .5s;
}
@keyframes zoom{
	from{
		transform:scale(0.9);
	}
	to{
		transform:scale(1);
	}
}


/* LEFT */
#left{
	float:left;
	width:400px;
	background:rgba(48,99,98,.8);
    border-radius:8px 0 0 8px;
}
@supports (-webkit-backdrop-filter:none) or (backdrop-filter:none){
    #left{
        -webkit-backdrop-filter:blur(20px);
        backdrop-filter:blur(20px);
    }
}
#leftfill{
	height:380px;
	padding:40px 0;
	text-align:center;
	color:#fff;
}
#leftfill h3{
	margin-bottom:60px;
	font-weight:normal;
	font-size:18px;
	color:#fff;
}
#leftfill h1{
    font-family:font2;
	line-height:60px;
	font-size:28px;
	letter-spacing:10px;
	color:#d5f944;
}


/* RIGHT */
#right{
	float:right;
	width:400px;
	height:380px;
	padding:40px 0;
	background:rgba(255,255,255,.7);
    border-radius:0 8px 8px 0;
}
@supports (-webkit-backdrop-filter:none) or (backdrop-filter:none){
    #right{
        -webkit-backdrop-filter:blur(20px);
        backdrop-filter:blur(20px);
    }
}

#loginbox{
	margin:auto;
	padding-top:10px;
	width:240px;
}
.title{
	margin:20px 0;
	line-height:60px;
    font-family:font2;
	font-size:24px;
	font-weight:bold;
	text-align:right;
	color:#212121;
	border-bottom:1px dashed #fff;
}
#boxform{
	margin:auto;
	padding:5px 0;
}
.boxicon{
	float:left;
	width:20px;
	height:20px;
	padding:8px 11px 9px 7px;
	background:#46a7a1;
    border-radius:4px 0 0 4px;
}
.bottomlogin{
	margin-top:20px;
	width:240px;
}

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


/*FORM LOGIN*/
.formlog input{
	width:182px;
	padding:8px;
	font-family	:font1;
	color:#474747;
	background:#e0e0e0;
	border:1px solid #e0e0e0;
    border-radius:0 4px 4px 0;
    outline:none;
	transition:all 0.3s Ease;
}
.formlog input:focus{
	background:#fff;
	border:1px solid #fff;
	color:#474747;
}

#tombol{
	display			: inline-block;
	width			: 239px;
	padding			: 10px 0;
	font-family		: font2;
	font-size		: 15px;
    font-weight     : bold;
	text-align		: center;
	text-decoration	: none;
	color			: #fff;
	background		: #46a7a1;
	border			: none;
    border-radius   : 4px;
	cursor			: pointer;
	transition:all 0.3s Ease;
}



@media only screen and (max-width:800px){
	.iconlogo{
		left:-5px;
	}
	#page{
		position:static;
		margin:0 10px;
    	padding:40px 0 0;
    	width:calc(100% - 20px);
	}
	#left{
		width:100%;
		border-radius:6px 6px 0 0;
	}
	#leftfill{
		height:auto;
		padding:20px 0 40px;
		text-align:center;
		color:#fff;
	}
	#leftfill h3{
		margin-bottom:40px;
		font-weight:normal;
		font-size:14px;
	}
	#leftfill h1{
		margin-bottom:0;
		line-height:50px;
		letter-spacing:5px;
		font-size:28px;
	}
	
	#right{
		width:100%;
		padding:0;
		height:300px;
		border-radius:0 0 6px 6px;
	}
	#loginbox{
		margin:auto;
		padding:15px 0;
	}
	.title{
		margin:0 0 10px;
		line-height:40px;
		letter-spacing:1px;
		font-size:20px;
	}

	
	/* LOGO */
	.iconlogo{
		margin:20px 0;
		width:100px;
		height:auto;
	}
	
	#content{
		height:auto;
	}
	.bottomlogin{
  		margin:0 auto;
	}
}