/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width:320px) and (max-width:840px) {
	* { margin: auto 0; font-family: "Segoe UI", Verdana, Tahoma,Helvetica,sans-serif; }
	.body-lock { background: url(../../img/bg/opening_mob.jpg) no-repeat center fixed; height: 100%; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: top; }
	.body-lock .dateandtime { font-size: 1em; color: #fff; position: absolute; bottom: 5%; left: 3%; display: inline-block; }
	.body-lock .dateandtime .hour-time { font-size: 2em; font-weight: lighter; height: 100px;  }
	.body-lock .dateandtime .date-time { font-size: 2em; font-weight: lighter; margin-left: 5px; }
	.body-lock .welcome { font-size: 2em; }
	.body-lock .opening { top: 25%; left: 11%; }

	.body-login { background: url(../../img/bg/login_mob.jpg) no-repeat center fixed; height: 100%; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: top; }
	.body-login .logo { margin: auto; position: absolute; top: -70%; left: 0; bottom: 0; right: 0; display: inline-block; }
	.body-login .logo img { text-align:center; position: absolute; top:10%; display: inline-block; }
	.body-login .dateandtime { margin: auto; width: 70%; height: 320px; position: fixed; top: 80%; left: 0; bottom: 0; right: 0; }
	.body-login .dateandtime .valid { font-size: 0.5em; color:#1f58ce; font-weight: normal; text-align:center;  }
	.body-login .dateandtime .hour-time { font-family: Helvetica; font-size: 3em; font-weight: lighter; color: #3bae25; height: 50px; text-align:center;  }
	.body-login .dateandtime .date-time { font-family: Helvetica; font-size: 1em; font-weight: lighter; color: #3bae25; margin-left: 5px; text-align:center; }
	.body-login .wrapper { margin: auto; width: 70%; height: 300px; position: absolute; top: 0; left: 0; bottom: 0; right: 0;  }
	.body-login h1 { font-size: 40px; font-weight: bold; margin-bottom: 3px; }
	.body-login .wrapper img { position: fixed; top:10%; left:35%; margin: 10px; width: 100px; }
	.body-login .wrapper input { font-family: courier; width: 300px; text-align:center; font-weight: lighter; font-size: 1em; line-height: 30px; border: 1px solid #f4f4f4; margin-top: 5px; border-radius: 2px;  }
	.body-login .wrapper select { width: 300px; text-align:center; font-weight: normal; font-size: 1.5em; line-height: 20px; border: 1px solid #f4f4f4; margin-top: 5px; border-radius: 2px;  }
	.body-login .wrapper input:focus { border: 1px solid #ccc; }
	*/.body-login .wrapper #result { color: red; background: url(../../img/icons/no.png) no-repeat left; padding-left: 18px; display: none; font-size: 15px; }
	
	.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: 300px;
	  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;
	}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width:840px) and (max-width:1024px) {
	* { margin: auto 0; font-family: "Segoe UI", Verdana, Tahoma,Helvetica,sans-serif; }
	.body-lock { background: url(../../img/bg/opening_mob.jpg) no-repeat center fixed; height: 100%; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: top; }
	.body-lock .dateandtime { font-size: 1em; color: #fff; position: absolute; bottom: 15%; left: 3%; display: inline-block; }
	.body-lock .dateandtime .hour-time { font-size: 2em; font-weight: lighter; height: 100px;  }
	.body-lock .dateandtime .date-time { font-size: 2em; font-weight: lighter; margin-left: 5px; }
	.body-lock .welcome { font-size: 4em; }
	.body-lock .opening { margin: auto; width:100%; position: absolute; top:10%; display: inline-block; }

	.body-login { background: url(../../img/bg/login_mob.jpg) no-repeat center fixed; height: 100%; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: top; }
	.body-login .logo { margin: auto; position: absolute; top: -50%; left: 0; bottom: 0; right: 0; display: inline-block; }
	.body-login .logo img { text-align:center; position: absolute; top:10%; display: inline-block; }
	.body-login .dateandtime { margin: auto; width: 70%; height: 300px; position: fixed; top: 80%; left: 0; bottom: 0; right: 0; }
	.body-login .dateandtime .valid { font-size: 1em; color:#1f58ce; font-weight: normal; text-align:center;  }
	.body-login .dateandtime .hour-time { font-family: Helvetica; font-size: 6em; font-weight: lighter; color: #3bae25; height: 100px; text-align:center;  }
	.body-login .dateandtime .date-time { font-family: Helvetica; font-size: 2em; font-weight: lighter; color: #3bae25; margin-left: 5px; text-align:center; }
	.body-login .wrapper { margin: auto; width: 100%; height: 300px; position: fixed; top:15%; left:25%; bottom: 0; right: 0;  }
	.body-login h1 { font-size: 40px; font-weight: bold; margin-bottom: 3px; }
	.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 .wrapper #result { color: red; background: url(../../img/icons/no.png) no-repeat left; padding-left: 18px; display: none; font-size: 15px; }
	
	.body-login .button {
	  border-radius: 3px;
	  background-color: #1071e9;
	  border: 1px solid;
	  border-color: #5f6976;
	  color: #FFFFFF;
	  text-align: center;
	  font-size: 2em;
	  padding: 8px;
	  width: 500px;
	  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;
	}
}


@media only screen and (min-width:1024px) {
	* { margin: auto 0; font-family: "Segoe UI", Verdana, Tahoma,Helvetica,sans-serif; }
	.body-lock { background: url(../../img/bg/opening.jpg) no-repeat center fixed; height: 100%; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: top; }
	.body-lock .dateandtime { font-size: 1em; color: #fff; position: absolute; bottom: 5%; left: 3%; display: inline-block; }
	.body-lock .dateandtime .hour-time { font-size: 2em; font-weight: lighter; height: 100px;  }
	.body-lock .dateandtime .date-time { font-size: 2em; font-weight: lighter; margin-left: 5px; }
	.body-lock .opening { margin: auto; width:100%; position: absolute; top:10%; display: inline-block; }
	.body-lock .opening img { text-align:center; position: fixed; top:10%; left:32%; margin: 10px; width: 150px; }
	.body-lock .opening .welcome { font-size: 4em; text-align:center; top:10%; display: inline-block; }

	.body-login { background: url(../../img/bg/login.jpg) no-repeat center fixed; height: 100%; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: top; }
	.body-login .logo { margin: auto; position: absolute; top: -50%; left: 0; bottom: 0; right: 0; display: inline-block; }
	.body-login .logo img { text-align:center; position: absolute; top:10%; display: inline-block; }
	.body-login .dateandtime { margin: auto; width: 70%; height: 300px; position: absolute; top: 80%; left: 0; bottom: 0; right: 0; display: inline-block; }
	.body-login .dateandtime .valid { font-size: 1em; color:#1f58ce; font-weight: normal; text-align:center;  }
	.body-login .dateandtime .hour-time { font-family: Helvetica; font-size: 6em; font-weight: lighter; color: #3bae25; height: 100px; text-align:center;  }
	.body-login .dateandtime .date-time { font-family: Helvetica; font-size: 2em; font-weight: lighter; color: #3bae25; margin-left: 5px; text-align:center; }
	.body-login .wrapper { margin: auto; width: 70%; height: 300px; position: fixed; top:35%; left:0; bottom: 0; right: 0; text-align:center; display: inline-block;  }
	.body-login h1 { font-size: 40px; font-weight: bold; margin-bottom: 3px; }
	.body-login .wrapper table { text-align:center; position: absolute; }
	.body-login .wrapper input { font-family: courier; width: 300px; text-align:center; font-weight: lighter; font-size: 1em; line-height: 30px; border: 1px solid #f4f4f4; margin-top: 5px; border-radius: 2px;  }
	.body-login .wrapper select { width: 300px; text-align:center; font-weight: normal; font-size: 1.5em; line-height: 30px; border: 1px solid #f4f4f4; margin-top: 5px; border-radius: 2px;  }
	.body-login .wrapper input:focus { border: 1px solid #ccc; }
	
	.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: 300px;
	  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;
	}
}