* { margin: auto 0; font-family: "Segoe UI", Verdana, Tahoma,Helvetica,sans-serif; }
	.body-lock { background: url(../../img/bg/opening1.jpg) no-repeat center fixed; height: 100%; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: top; }
	.body-lock .welcome { font-size: 1.5em; margin: auto; width: 70%; height:50px; position: fixed; top: -30%; left: 0; bottom: 0; right: 0; background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
	.body-lock .blink { font-size: 0.8em; margin: auto; width: 70%; height:50px; position: fixed; top: -20%; left: 0; bottom: 0; right: 0; animation: blinker 1s linear infinite; }
	.body-lock .welcome_logo { margin: auto; width: 70%; position: fixed; top: -11%; left: 0; bottom: 0; right: 0; }
	.body-lock .opening { top: 25%; left: 12%; }
	.body-lock .opening img { text-align:center; position: fixed; top:10%; left:32%; margin: 10px; width: 150px; }

	.body-login { background: url(../../img/bg/login1.jpg) no-repeat center fixed; height: 100%; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: top; }
	.body-login .wrapper { margin: auto; width: 80%; height: 300px; position: fixed; top:1%; left:1%; bottom: 0; right: 0;   }
	.body-login .wrapper .teks1 { font-family: Helvetica; font-size: 1em; font-weight: lighter; color: grey; height: 20px; text-align:center;  }
	.body-login .wrapper .teks2 { font-family: Helvetica; font-size: 2em; font-weight: lighter; color: grey; height: 60px; text-align:center;  }
	.body-login .wrapper .teks3 { font-family: Helvetica; font-size: 1.2em; font-weight: lighter; color: blue; height: 40px; text-align:center;  }
	.body-login .wrapper .teks4 { font-family: Helvetica; font-size: 0,8em; font-weight: lighter; color: red; height: 40px; text-align:center;  }
	.body-login h1 { font-size: 40px; font-weight: bold; margin-bottom: 3px; }
	.body-login .wrapper img { text-align:center; position: fixed; top:10%; left:32%; margin: 10px; width: 150px; }
	.body-login .wrapper input { font-family: courier; width: 500px; text-align:center; font-weight: lighter; font-size: 2em; line-height: 50px; border: 1px solid #f4f4f4; margin-top: 5px; border-radius: 2px;  }
	.body-login .wrapper select { width: 500px; text-align:center; font-weight: normal; font-size: 2em; line-height: 50px; border: 1px solid #f4f4f4; margin-top: 5px; border-radius: 2px;  }
	.body-login .wrapper input:focus { border: 1px solid #ccc; }
	.body-login .loading { margin: auto; width: 70%; height: 300px; position: fixed; top: 50%; left: 0; bottom: 0; right: 0; }
	*/.body-login .wrapper #result { color: red; background: url(../../img/icons/no.png) no-repeat left; padding-left: 18px; display: none; font-size: 15px; }
	
	
	
	.dateandtime { margin: auto; width: 70%; height: 300px; position: fixed; top: 99%; left: 0; bottom: 0; right: 0; }
	.dateandtime .valid { font-size: 2em; color:#1f58ce; font-weight: normal; text-align:center;  }
	.dateandtime .hour-time { font-family: Helvetica; font-size: 3em; font-weight: lighter; color: #3bae25; height: 60px; text-align:center;  }
	.dateandtime .date-time { font-family: Helvetica; font-size: 1em; font-weight: lighter; color: #3bae25; margin-left: 5px; text-align:center; }
	
	.body-login .button {
	  border-radius: 3px;
	  background-color: #1071e9;
	  border: 1px solid;
	  border-color: #5f6976;
	  color: #FFFFFF;
	  text-align: center;
	  font-size: 1.2em;
	  padding: 8px;
	  width: 50%;
	  transition: all 0.5s;
	  cursor: pointer;
	  margin-top: 10px;
	}

	.body-login .button span {
	  cursor: pointer;
	  display: inline-block;
	  position: relative;
	  transition: 0.5s;
	}

	.body-login .button span:after {
	  content: '\00bb';
	  position: absolute;
	  opacity: 0;
	  top: 0;
	  right: -20px;
	  transition: 0.5s;
	}

	.body-login .button:hover span {
	  padding-right: 25px;
	}

	.body-login .button:hover {
	  background-color: #009d04;
	}

	.body-login .button:hover span:after {
	  opacity: 1;
	  right: 0;
	}
}