*{box-sizing:border-box;}

body {
  background: #efefef; 
}


.log-form {
  width: 40%;
  min-width: 320px;
  max-width: 475px;
  background: #fff;
  margin: 150px auto;
  
  box-shadow: 0px 2px 5px rgba(0,0,0,.25);
 
  }
  
  .form {
    display: block;
    width: 100%;
    padding: 10px 2em;
  }
	.reset-form {
		display: none;
		width: 100%;
		padding: 2em;
	}
	.reset-link {
		cursor: pointer;
		color: blue;
		text-align: center;
		padding-bottom: 10px;
	}
	.green {color: green;}
	.red {color: red;}
	#userMessage {text-align: center;}
 
  h2 {
    width: 100%;
    color: #fff;
    font-family: 'open sans condensed';
    font-size: 1.35em;
    display: block;
    background:#01c0c8;
    width: 100%;
    text-transform: uppercase;
    padding: .75em 1em .75em 1.5em;
    box-shadow:inset 0px 1px 1px fadeout(white, 95%);
    border: 1px solid darken(#2a2a2a, 5%);
    //text-shadow: 0px 1px 1px darken(#2a2a2a, 5%);
    margin: 0;
    font-weight: 200;
  }
  button,
  input[type="text"],
  input[type="password"] {
    display: block;
    margin: auto auto;
    width: 100%;
    margin: 0px 0 20px;
    padding: 20px;
    border: none;
    border: 1px solid #eaeaea;
    padding-bottom: 1.25em;
    color: #000;
  }
  #password {
	  margin-bottom: 5px;
  }
  .show {
	  margin-top: 5px;
	  margin-bottom: 20px;
  }
	.show input {
		margin-right: 10px;
	}
  .btn {
    display: inline-block;
    background: #1fb5bf;
    border: 1px solid darken(#1fb5bf, 5%);
    padding: 15px 20px;
    color: white;
    margin-right: .5em;
    box-shadow: inset 0px 1px 0px fadeout(white, 80%); 
	cursor: pointer;
	border-radius: 20px;
  }


	.button {
	  position: relative;
	  padding: 8px 16px;
	  background: #01c0c8;
	  border: none;
	  outline: none;
	  border-radius: 10px;
	  cursor: pointer;
	}

	.button:active {
	  background: #007a63;
	}

	.button__text {
	  font: bold 20px "Quicksand", san-serif;
	  color: #ffffff;
	  transition: all 0.2s;
	}

	.button--loading .button__text {
	  visibility: hidden;
	  opacity: 0;
	}

	.button--loading::after {
	  content: "";
	  position: absolute;
	  width: 16px;
	  height: 16px;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  margin: auto;
	  border: 4px solid transparent;
	  border-top-color: #ffffff;
	  border-radius: 50%;
	  animation: button-loading-spinner 1s ease infinite;
	}

	@keyframes button-loading-spinner {
	  from {
		transform: rotate(0turn);
	  }

	  to {
		transform: rotate(1turn);
	  }
	}
	#message {
		text-align: center;
	}
	.good {
		padding: 20px 0 10px;
		color: green;
		font-weight: bold;
	}
 	.bad {
		padding: 20px 0 10px;
		color: red;
		font-weight: bold;
	}
  
  .forgot {
    color: lighten(#1fb5bf, 10%);
    line-height: .5em;
    position: relative;
    top: 2.5em;
    text-decoration: none;
    font-size: .75em;
    margin:0;
    padding: 0;
    float: right;
  }