#sign-up-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(4, 4, 4, 0.95);
  z-index: 999;
  top: 0;
  left: 0;
}
#sign-up-popup {
  position: fixed;
  top: 20%;
  left: 0;
  z-index: 1000;
  width: 100%;
  display: none;
}
.sign-up-align {
  width: auto;
  margin: 0 auto;
  padding: 40px;
}

svg,
circle {
  margin: 0px !important;
  padding: 0px !important;
}
.sociable-loader {
  text-align: center
}
.circular {
  -webkit-animation: rotate 3s linear infinite;
  animation: rotate 3s linear infinite;
  height: 100px;
  position: relative;
  width: 100px;
}
.path {
  stroke-dasharray: 1, 440;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 440;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 440;
    stroke-dashoffset: -77;
  }
  100% {
    stroke-dasharray: 89, 440;
    stroke-dashoffset: -272;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 440;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 440;
    stroke-dashoffset: -77;
  }
  100% {
    stroke-dasharray: 89, 440;
    stroke-dashoffset: -272;
  }
}
@-webkit-keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}
@keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}


.sign-up-box .sociable-loader {
  position: absolute;
  bottom: 10px;
  width: 100%;
  left: 0;
  z-index: 100;
  text-align: center
}

.sign-up-box {
  background: #fff;
  width: 380px;
  margin: 0 auto;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px #55cdff;
  position: relative;
}

.sign-up-box label {
  display: block;
  color: #777;
  font-size: 14px;
  margin-bottom: 8px;
}

.sign-up-box input[type=email] {
  border-radius: 3px;
  border: 1px solid #d8d8d8;
  padding: 15px;
  width: 100%;
}

#sent-verification {
  margin-top: 30px;
}

.sociable-gen-btn {
  display: block;
  margin-top: 10px;
  text-align: center;
  border: 1px solid #1ca3db !important;
  background: #fff !important;
  color: #1ca3db !important;
  padding: 10px 15px;
  border-radius: 3px;
}

.sociable-gen-btn:hover {
  background: #1ca3db !important;
  color: #fff !important;
}

.sign-up-info {
  line-height: 20px;
  color: #fff;
  background: #1ca3db;
  padding: 20px;
}

.sign-up-form {
  padding: 20px;
}

.sign-up-pad {
  padding: 20px;
}

.sociable-disabled {
  pointer-events: none;
  opacity: .6
}

.sociable-success {
  background: #36f357;
  padding: 10px;
  color: #fff;
  border-radius: 3px;
}

.sociable-error {
  background: #ff2121;
  padding: 10px;
  color: #fff;
  border-radius: 3px;
}

.sign-up-box .sociable-error, .sign-up-box .sociable-success {
  margin-bottom: 20px;
}

#sociable-login .form-row {
  text-align: center;
}

#sociable-login .form-row img {
  display: inline-block;
  opacity: .9;
  max-width: 100%;
}

#sociable-login .form-row a:hover img {
  opacity: 1;
}