/* Simple Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* body */
body {
  background: #e9e9e9;
  color: #5e5e5e;
  font: 400 87.5%/1.5em 'Open Sans', sans-serif;
}

/* Form Layout */
.form-wrapper {
  background: #fff;
  margin: 3em auto;
  padding: 0 1em;
  max-width: 350px;
}

h1 {
  text-align: center;
  padding: 1em 0;
}

form {
  padding: 0 1.5em;
}

.form-item {
  margin-bottom: 0.75em;
  width: 100%;
}

.form-item input {
  background: #fff;
  border: none;
  border-bottom: 2px solid #e9e9e9;
  color: #666;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  height: 50px;
  transition: border-color 0.3s;
  width: 100%;
}

.form-item input:focus {
  border-bottom: 2px solid #c0c0c0;
  outline: none;
}

.button-panel {
  margin: 2em 0 0;
  width: 100%;
}

.button-panel .button {
  background: #428ad3;
  border: none;
  color: #fff;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2em;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  transition: background 0.3s ease-in-out;
  width: 100%;
  height: 40px;
}

.button:hover {
  background: #045ab1;
}

.form-footer {
  font-size: 1em;
  padding: 2em 0;
  text-align: center;
}

.form-footer a {
  color: #8c8c8c;
  text-decoration: none;
  transition: border-color 0.3s;
}

.form-footer a:hover {
  border-bottom: 1px dotted #8c8c8c;
}




/* Engine buttono */

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* font-size: 62.5%; */
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

.btn-engine-start {
  position: relative;

  width: 145px;
  height: 145px;
  margin: 0 auto;

  border-radius: 50%;
  background: white;
  background: -webkit-linear-gradient(
    315deg,
    white 0%,
    white 22%,
    #ddd 44%,
    #a5a5a5 52%,
    black 100%
  );
  background: linear-gradient(
    135deg,
    white 0%,
    white 22%,
    #ddd 44%,
    #a5a5a5 52%,
    black 100%
  );
  -webkit-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

.btn-engine-start:before {
  position: absolute;
  top: 7.5px;
  left: 7.5px;

  display: block;

  width: 130px;
  height: 130px;

  content: "";

  border-radius: 50%;
  background: #515151;
  background: -webkit-linear-gradient(
    -45deg,
    #515151 0%,
    #515151 19%,
    #ededed 50%,
    white 77%,
    white 100%
  );
  background: -webkit-linear-gradient(
    315deg,
    #515151 0%,
    #515151 19%,
    #ededed 50%,
    white 77%,
    white 100%
  );
  background: linear-gradient(
    135deg,
    #515151 0%,
    #515151 19%,
    #ededed 50%,
    white 77%,
    white 100%
  );

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#515151', endColorstr='#ffffff', GradientType=1);
}

.btn-engine-start:hover a.btn-engine-start-in:before {
  top: 20px;

  background: #61c419;
  -webkit-box-shadow: 0 0 6px rgba(97, 196, 25, 0.3);
  box-shadow: 0 0 6px rgba(97, 196, 25, 0.3);
}

.btn-engine-start:hover a.btn-engine-start-in {
  padding: 37px 0 0;

  color: #b4e391;
  -webkit-box-shadow: inset 0 1px 1px black, 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 1px black, 0 1px 2px rgba(0, 0, 0, 0.5);
  text-shadow: 0 0 6px rgba(97, 196, 25, 0.3), 0 0 6px rgba(97, 196, 25, 0.3);
}

a.btn-engine-start-in {
  font-size: 14px;
  line-height: 1.2;

  position: absolute;
  top: 18px;
  left: 18px;

  width: 109px;
  height: 109px;
  padding: 35px 0 0;

  color: #fff;
  border-radius: 50%;
  background: #959595;
  background: -webkit-linear-gradient(
    -45deg,
    #959595 0%,
    #0d0d0d 46%,
    #010101 50%,
    #0a0a0a 69%,
    #1b1b1b 100%
  );
  background: -webkit-linear-gradient(
    315deg,
    #959595 0%,
    #0d0d0d 46%,
    #010101 50%,
    #0a0a0a 69%,
    #1b1b1b 100%
  );
  background: linear-gradient(
    135deg,
    #959595 0%,
    #0d0d0d 46%,
    #010101 50%,
    #0a0a0a 69%,
    #1b1b1b 100%
  );
  -webkit-box-shadow: inset 0 2px 2px white, 0 2px 4px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 2px 2px white, 0 2px 4px rgba(0, 0, 0, 0.5);

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#959595', endColorstr='#1b1b1b', GradientType=1);
}

a.btn-engine-start-in:before {
  position: absolute;
  top: 18px;
  left: calc(50% - 13px);

  width: 26px;
  height: 8px;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border-radius: 10px;
  background: green;
  background: #555;
}

a.btn-engine-start-in span {
  font-size: 10px;
}