*{
	margin:auto;
}

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

body, html, php {
	height: 100%;
	margin: 0;
	font-family:sanspro;
	color:#747474;
}

.bg {
  /* The image used */
  background-image: url("../images/background.png");

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* LOGIN */
#logintitle{
	margin:-37% 0;
}
#logintitle h1{
	font-size:70%;
	font-weight:normal;
	text-align:center;
	text-transform:uppercase;
	color:#006a8c;
}
#loginbox{
	margin:auto;
	width:50%;
	height:50%;
}
.title{
	margin:auto;
	height:50%;
	font-size:250%;
	color:#fff;
	text-align:center;
}
.bottomlogin{
	margin:auto;
	width:50%;
	height:10%;
}
#result{
	font-weight:bold;
	text-align:center;
	color:#C00;
}

.imglog{
	margin:10% 20% 0 0;
	width:70%;
	height:70%;
}


/*FORM LOGIN*/
.formlog input{
	width:70%;
	font-size:70%;
	color:#fff;
	border:none;
	border-bottom:2px solid #fff;
}
.formlog input:required{
	background:none;
	border-bottom:2px solid #fff;
	box-shadow:none;
}
.formlog input:required:valid{
	background:none;
	border-bottom:2px solid #5cd053;
}
.formlog input:focus:invalid{
	background:none;
	border-bottom:2px solid #db5858;
}

#tombol{
	display			: inline-block;
	width			: 80%;
	height			: 80px;
	font-size		: 90%;
	text-align		: center;
	text-decoration	: none;
	color			: #fff;
	background		: #454b6f;
	border-bottom	: 2px solid #044d64;
	cursor			: pointer;
	-moz-transition: ease 0.3s;
	-webkit-transition: ease 0.3s;
	-o-transition: ease 0.3s;
}
#tombol:hover{
	background		: #5eb5d0;
}



@media only screen 
and (min-device-width : 500px) 
and (max-device-width : 1300px) {

body {
	height: 100%;
	margin: 0;
	font-family:sanspro;
	color:#747474;
	font-size:10px;
}

.bg {
  /* The image used */
  background-image: url("../images/loadingz.png");

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/* LOGIN */
#logintitle{
	margin:-100% 0;
}
#logintitle h1{
	font-size:70%;
}
#logintitle h3{
	font-size:70%;
}
.sabit{
	width:40px;
}
.imgsabit{
	width:40px;
	height:40px;
}
#loginbox{
	width:80%;
	height:40%;
	padding-top:20px;
	box-shadow:0 0 2px #666;
}
#loginboxbottom{
	width:70%;
	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:300%;
}

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


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




@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	
body, html, php {
	height: 100%;
	margin: 0;
	font-family:sanspro;
	color:#747474;
	font-size:6px;
}

.bg {
  /* The image used */
  background-image: url("../images/background3.png");

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* LOGIN */
#logintitle{
	margin:-130% 0;
}
#logintitle h1{
	font-size:16px;
}
#logintitle h3{
	font-size:11px;
}
.sabit{
	width:24px;
}
.imgsabit{
	width:24px;
	height:24px;
}
#loginbox{
	width:90%;
	height:40%;
	padding-top:6px;
	box-shadow:0 0 2px #666;
}
#loginboxbottom{
	width:70%;
	height:40%;
	padding-top:2px;
	box-shadow:0 0 2px #666;
}
.bottomlogin{
	width:260px;
}
.title{
	width:200px;
	height:10px;
	padding-top:10px;
	font-size:570%;
}

.imglog{
	width:100%;
	height:60%;
}
.captcha{
	height:10px;
}


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