+@media screen and (orientation:landscape) and (max-width: 1000px){ 
+	#logo {
+		width:200px;
+    	height: auto;
+	}
+	#app_name{
+		font-size: 16pt;
+	}
+	.spacer{
+		display: none;
+	}
+
+}
+.login {
+  background: #F7F7F7
+}
+.login .fa-paw {
+  font-size: 26px
+}
+a.hiddenanchor {
+  display: none
+}
+.login_wrapper {
+  right: 0px;
+  margin: 0px auto;
+  margin-top: 5%;
+  max-width: 350px;
+  position: relative
+}
+.registration_form,
+.login_form {
+  position: absolute;
+  top: 0px;
+  width: 100%
+}
+.registration_form {
+  z-index: 21;
+  opacity: 0;
+  width: 100%
+}
+.login_form {
+  z-index: 22
+}
+#signup:target ~ .login_wrapper .registration_form,
+#signin:target ~ .login_wrapper .login_form {
+  z-index: 22;
+  animation-name: fadeInLeft;
+  animation-delay: .1s
+}
+#signup:target ~ .login_wrapper .login_form,
+#signin:target ~ .login_wrapper .registration_form {
+  animation-name: fadeOutLeft
+}
+.animate {
+  -webkit-animation-duration: 0.5s;
+  -webkit-animation-timing-function: ease;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-duration: 0.5s;
+  -moz-animation-timing-function: ease;
+  -moz-animation-fill-mode: both;
+  -o-animation-duration: 0.5s;
+  -o-animation-timing-function: ease;
+  -o-animation-fill-mode: both;
+  -ms-animation-duration: 0.5s;
+  -ms-animation-timing-function: ease;
+  -ms-animation-fill-mode: both;
+  animation-duration: 0.5s;
+  animation-timing-function: ease;
+  animation-fill-mode: both
+}
+.login_box {
+  padding: 20px;
+  margin: auto
+}
+.left {
+  float: left
+}
+.alignleft {
+  float: left;
+  margin-right: 15px
+}
+.alignright {
+  float: right;
+  margin-left: 15px
+}
+.clearfix:after,
+form:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden
+}
+.login_content {
+  margin: 0 auto;
+  padding: 25px 0 0;
+  position: relative;
+  text-align: center;
+  text-shadow: 0 1px 0 #fff;
+  min-width: 280px
+}
+.login_content a,
+.login_content .btn-default:hover {
+  text-decoration: none
+}
+.login_content a:hover {
+  text-decoration: underline
+}
+.login_content h1 {
+  font: normal 25px Helvetica, Arial, sans-serif;
+  letter-spacing: -0.05em;
+  line-height: 20px;
+  margin: 10px 0 30px
+}
+.login_content h1:before,
+.login_content h1:after {
+  content: "";
+  height: 1px;
+  position: absolute;
+  top: 10px;
+  width: 27%
+}
+.login_content h1:after {
+  background: #7e7e7e;
+  background: linear-gradient(left, #7e7e7e 0%, #fff 100%);
+  right: 0
+}
+.login_content h1:before {
+  background: #7e7e7e;
+  background: linear-gradient(right, #7e7e7e 0%, #fff 100%);
+  left: 0
+}
+.login_content h1:before,
+.login_content h1:after {
+  content: "";
+  height: 1px;
+  position: absolute;
+  top: 10px;
+  width: 20%
+}
+.login_content h1:after {
+  background: #7e7e7e;
+  background: linear-gradient(left, #7e7e7e 0%, #fff 100%);
+  right: 0
+}
+.login_content h1:before {
+  background: #7e7e7e;
+  background: linear-gradient(right, #7e7e7e 0%, #fff 100%);
+  left: 0
+}
+.login_content form {
+  margin: 20px 0;
+  position: relative
+}
+.login_content form input[type="text"],
+.login_content form input[type="email"],
+.login_content form input[type="password"] {
+  border-radius: 3px;
+  -ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
+  -o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
+  box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
+  border: 1px solid #c8c8c8;
+  color: #777;
+  margin: 0 0 20px;
+  width: 100%
+}
+.login_content form input[type="text"]:focus,
+.login_content form input[type="email"]:focus,
+.login_content form input[type="password"]:focus {
+  -ms-box-shadow: 0 0 2px #ed1c24 inset;
+  -o-box-shadow: 0 0 2px #ed1c24 inset;
+  box-shadow: 0 0 2px #A97AAD inset;
+  background-color: #fff;
+  border: 1px solid #A878AF;
+  outline: none
+}
+#username {
+  background-position: 10px 10px !important
+}
+#password {
+  background-position: 10px -53px !important
+}
+.login_content form div a {
+  font-size: 12px;
+  margin: 10px 15px 0 0
+}
+.reset_pass {
+  margin-top: 10px !important
+}
+.login_content div .reset_pass {
+  margin-top: 13px !important;
+  margin-right: 39px;
+  float: right
+}
+.separator {
+  border-top: 1px solid #D8D8D8;
+  margin-top: 10px;
+  padding-top: 10px
+}
+.button {
+  background: #f7f9fa;
+  background: linear-gradient(top, #f7f9fa 0%, #f0f0f0 100%);
+  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0', GradientType=0);
+  -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
+  -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
+  border-radius: 0 0 5px 5px;
+  border-top: 1px solid #CFD5D9;
+  padding: 15px 0
+}
+.login_content form input[type="submit"],
+#content form .submit {
+  float: left;
+  margin-left: 38px
+}
+
+.centered {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  /* don't forget to add prefixes */
+  transform: translate(-50%, -50%);
+}
+
+.login-box{
+  width: 360px;
+  margin: 7% auto;
+}
+@media (max-width: 768px) {
+  .login-box {
+    width: 90%;
+    margin-top: 20px;
+  }
+}
+.login-box-body {
+  background: #fff;
+  border: 1px solid #c8c8c8;
+  padding: 20px;
+  margin-top: 50%;
+  color: #666;
+}
+.login-box-body {
+  color: #777;
+}
+.login-box-msg{
+  margin: 0;
+  text-align: center;
+  padding: 0 20px 20px 20px;
+}
+
+.slide{
+	position: relative;
+	bottom: 500px;
+	-webkit-animation: slide 1s forwards;
+	animation: slide 1s forwards;
+}
+@-webkit-keyframes slide{
+	100% {bottom: 0;}
+}
+@keyframes slide{
+	100% {bottom: 0;}
+}