/* this to me seems a little hacky */
body { 
  background:#C0392B;
}
div.bg {
   display:block;
  position:absolute;
  margin: 0;
  padding: 0;
  top:0;
  left:0;
  width:100%;
  height:100%;
 
  z-index:0;
}
.wrapper {
  margin: 0 auto;
  padding-top:15%;
  width:1180px;
  clear:both;
}

.login-box {
  position:relative;
  display:inline-block;
  font-family: "helvetica", "arial", sans-serif;
  background:#f8f8f8;
  padding:20px 10px 10px 10px;
  width: 30%;
  height:310px;
  border-radius: 10px;
  float:left;
  left:20px;
}
.branding {
  display:inline-block;
  font-family: "Helvetica","Arial", sans-serif;
  position:relative;
  margin-left:5%;
  color:#fff;
  float:left;
  font-size:1em;
  /*transition: color 1s ease;*/
  text-shadow:0px 2px 2px rgba(0, 0, 0, 0.4);

}
.branding:hover {color: #BDC3C7;}

.login-box h2 {
  text-transform: uppercase;
  color: #888;
  padding:10px;
  margin:0;
  
}

.login-box input {
  border:0; 
  padding:12px; 
  font-size:1.3em;
  color:#aaa; 
  border:solid 1px #ccc; 
  width:90%;
  margin: 5px;
  border-radius: 10px;
  z-index:1;
  float:left;
  /*margin-bottom:15px;*/
}

.pointer {
  display:block;
  width:100px;
  height:100px;
  background:#f8f8f8;
  position:absolute;
  top:30%;
  right:-10px;
  -webkit-transform: rotate(45deg);
  overflow:hidden;
  z-index:-10;
}

.login-box button {
  position:absolute;
  bottom:50px;
  left:10px;
  clear:both;
  width:94%;
  border: none;
  background: #3498db;
  color: #fff;
  padding: 9px 12px 10px;
line-height: 32px;
  font-size:20px;
text-decoration: none;
text-shadow: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
-webkit-backface-visibility: hidden;
font-weight:bold;
}
.login-box button:hover {
  /*background: #2ECC71;*/
  background:#C0392B;
}
.login-box a {
  position:absolute;
  bottom:10px;
  width:100%;
  right:-20%;
  color:#505050;
  font-weight:bold;
}

@import url(http://fonts.googleapis.com/css?family=Roboto);

body {
  
background: -webkit-gradient(#c0392b 25%, #e74c3c 100%);
}


h1 {
  font-family: 'Roboto',sans-serif, cursive;
  text-transform: uppercase;
  font-size: 50px;
  padding-top:20px;
  letter-spacing: 0.25em;
  color: white;
  /*-webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;*/
  text-shadow:
    -1px 1px 0 #3498db,
    -2px 2px 0 #3498db,
    -3px 3px 0 #3498db,
    -4px 4px 0 #3498db,
    -5px 5px 0 #3498db,
    
    7px 8px 0 rgba(0, 0, 0, 0.2);
  
   margin: 100px 0 25px 0;
}

.subtitle {
  font-family: 'Righteous', cursive;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  font-size: 14px;
  
}
.subtitle a {
  text-decoration: none;
  border-bottom: 1px dotted #ccc;
  color: black;
}

.invalid{
	text-align: center;
	color:#C0392B;
	font-family: 'Roboto',sans-serif, cursive;
	font-weight:bold;
}

.invalidtip{
	color:#3498db;
	font-family: 'Roboto',sans-serif, cursive;
	font-weight:bold;
}

@media (max-width: 480px) {
	h2
	{
		font-size: 1em;
	}
	.login-box
	{
		width: 20%;
	}
	.login-box input
	{
		margin: 5px;
	}
	
	.login-box button{
		bottom: 70px;
	}
	
}