/*
===============================================================================
  Subbscribe style
===============================================================================
*/
#subbscribe {
  padding: 0;
  margin: 0;
  color: #7b8993;
  position: fixed;
  right: 15px;
  bottom: 15px;
  border: 1px solid #e9e9e9;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-weight: 300;
  font-size: 17px;
  width: 300px;
  font-size: 15px;
  box-shadow: 0 1px 2px #e9e9e9;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #fff;
  z-index: 100001;
}
#subbscribe a {
  color: #7b8993;
  text-decoration: underline;
}
#subbscribe a:hover,
#subbscribe a:focus,
#subbscribe a:visited,
#subbscribe a:active {
  color: #7b8993;
}
#subbscribe .subbscribe-alert {
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 10px;
}
#subbscribe .subbscribe-error {
  color: #fd392b;
}
#subbscribe .subbscribe-success {
  color: #9fce70;
}
#subbscribe .animate {
  -moz-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
#subbscribe .subb-title {
  padding: 12px 12px 10px 12px;
  font-weight: bold;
  border: 1px solid #e9e9e9;
  border-width: 0 0 1px 0;
}
#subbscribe .subb-title .close-x {
  float: right;
  margin-top: 5px;
  color: #dcdcdc;
  cursor: pointer;
}
#subbscribe .subb-body {
  padding: 15px;
  position: relative;
}
#subbscribe .subb-body .subb-thumbnail {
  width: 40px;
  height: 40px;
  display: inline-block;
  float: left;
  margin-bottom: 15px;
}
#subbscribe .subb-body .subb-thumbnail img {
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#subbscribe .subb-body .subb-button {
  float: right;
  margin-top: 5px;
  color: #fff;
  border: none;
  font-weight: bold;
  padding: 9px 10px 9px 10px;
  font-size: 12px;
  cursor: pointer;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#subbscribe .subb-body .subb-button:hover {
  -moz-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
#subbscribe .subb-body .subb-button:disabled {
  opacity: .5;
}
#subbscribe .subb-body .subb-hidden {
  display: block;
}
#subbscribe .subb-body .subb-hidden .subb-site {
  float: left;
  font-weight: bold;
  font-size: 14px;
  margin-top: 12px;
  margin-left: 10px;
}
#subbscribe .subb-body .subb-form {
  padding-left: 5px;
}
#subbscribe .subb-body .subb-form p {
  margin-top: 5px;
  margin-bottom: 15px;
  font-size: 13px;
  font-weight: 500 !important;
  width: 100%;
}
#subbscribe .subb-body .subb-form input {
  text-indent: 8px;
  font-weight: 500;
  margin-bottom: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #dcdcdc;
  padding: 7px;
  font-size: 12px;
  display: block;
  width: 100%;
  padding: 5px 0;
}
#subbscribe .subb-body .subb-form input.error {
  border-color: #fd392b;
}
#subbscribe .subb-body .subb-form input:focus {
  outline: 0 none;
  resize: none !important;
  box-shadow: none !important;
  -moz-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
#subbscribe .subb-body .footer {
  font-size: 10px;
  text-align: right;
}
/*
===============================================================================
  Animations
===============================================================================
*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
/*
===============================================================================
  Media queries
===============================================================================
*/
@media (max-width: 550px) {
  #subbscribe {
    width: 92%;
  }
}
