.open-button {
font-family:'Open Sans'; font-size:1.1rem;
  background-color:#008ed6;
  color: white;
  padding:13px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom:0;
  left:0;
  width: 280px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  transition:all 0.5s;
  z-index: 9999;
}
.open-button::after {content:"\f077"; font-family:FontAwesome; line-height:25px; right:20px; position:absolute;}
/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  border: 3px solid #f1f1f1;
  z-index: 9999;
}
/* Add styles to the form container */
.form-container {
  max-width: 320px;
  padding: 10px;
  background-color: white; transition:all 0.5s;
}
.form-container h1 {font-size:1.3rem; text-align:center;}
.form-container p {text-align:center;}
/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}
/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}
.close {
  float: right; margin-right:5px;
  font-size:35px;
  font-weight: bold;
  color:#008ed6 !important;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: .5;
  background:none; border:none;
  transition:all 0.3s;
}
.close:hover,
.close:focus {
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: .9;
}
/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1; bottom:5px;
}