*{
	margin:auto;
}

@font-face{
	font-family:sanspro;
	src: url(SourceSansPro-Regular.ttf);
}

body{
	font-family:sanspro;
	font-size:16px;
	color:#747474;
	background:#e0e0e0;
}

/* LOGIN */
#logintitle{
	margin:40px 0;
}
#logintitle h1{
	font-size:48px;
	text-align:center;
	color:#1a9382;
}
#loginbox{
	margin:auto;
	width:500px;
	height:300px;
	padding-top:30px;
	background:#1a9382;
	border-radius:20px;
}
.title{
	margin:auto;
	height:40px;
	font-size:20px;
	color:#fff;
	text-align:center;
}
.bottomlogin{
	margin:auto;
	width:300px;
	padding-top:10px;
}
#result{
	font-weight:bold;
	text-align:center;
	color:#C00;
}

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


/*FORM LOGIN*/
.formlog input{
	width:250px;
	padding:10px;
	border:none;
	border-radius:2px;
}
.formlog input:required{
	background:#fff url(../images/red_asterisk.png) no-repeat 98% center;
}
.formlog input:required:valid{
	background:#fff url(../images/valid.png) no-repeat 98% center;
}
.formlog input:focus:invalid{
	background:#fff url(../images/invalid.png) no-repeat 98% center;
}

#tombol{
	margin-left		: 5px;
	display			: inline-block;
	width			: 300px;
	height			: 40px;
	font-size		: 16px;
	text-align		: center;
	text-decoration	: none;
	color			: #fff;
	background		: #4fc5ad;
	border-bottom	: 2px solid #2b7a65;
	cursor			: pointer;
	border-radius:2px;
	-moz-transition: ease 0.3s;
	-webkit-transition: ease 0.3s;
	-o-transition: ease 0.3s;
}
#tombol:hover{
	background		: #73cfbc;
}

@media only screen 
and (min-device-width : 500px) 
and (max-device-width : 800px) {
	
body{
	font-size:10px;
}

/* LOGIN */
#logintitle{
	margin:15px 0;
}
#logintitle h1{
	font-size:32px;
}
#logintitle h3{
	font-size:22px;
}
.sabit{
	width:40px;
}
.imgsabit{
	width:40px;
	height:40px;
}
#loginbox{
	width:400px;
	height:170px;
	padding-top:20px;
	box-shadow:0 0 2px #666;
	border-radius:200px 200px 0 0;
}
#loginboxbottom{
	width:500px;
	height:40px;
	padding-top:8px;
	box-shadow:0 0 2px #666;
}
.bottomlogin{
	width:300px;
	padding-top:10px;
}
.title{
	width:400px;
	height:30px;
	padding-top:5px;
	font-size:14px;
}

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


/*FORM LOGIN*/
.formlog input{ 
	width:180px;
	padding:6px;
	font-size:10px;
	border:none;
	border-radius:2px;
}
#loginboxbottom input.tombol{
	width			: 120px;
	height			: 25px;
	font-size		: 10px;
}
	
}




@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	
body{
	font-size:6px;
}

/* LOGIN */
#logintitle{
	margin:6px 0;
}
#logintitle h1{
	font-size:16px;
}
#logintitle h3{
	font-size:11px;
}
.sabit{
	width:24px;
}
.imgsabit{
	width:24px;
	height:24px;
}
#loginbox{
	width:200px;
	height:100px;
	padding-top:6px;
	box-shadow:0 0 2px #666;
	border-radius:200px 200px 0 0;
}
#loginboxbottom{
	width:260px;
	height:25px;
	padding-top:2px;
	box-shadow:0 0 2px #666;
}
.bottomlogin{
	width:260px;
}
.title{
	width:200px;
	height:10px;
	padding-top:10px;
	font-size:7px;
}

.imglog{
	width:12px;
	height:12px;
}
.captcha{
	height:10px;
}


/*FORM LOGIN*/
.formlog input{ 
	width:80px;
	padding:4px;
	font-size:6px;
	border:none;
	border-radius:2px;
}
#loginboxbottom input.tombol{
	width			: 80px;
	height			: 16px;
	font-size		: 6px;
}
	
}