/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
  box-sizing: border-box;

  height: 40px;

  padding: 10px 12px;

  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

/* 
GM add */
@media (min-width: 900px) {
  .section{
    max-width: 800px;
    margin: 0 auto;
  }
}
.section{
  padding-top:0;
}
.hero-body {
  padding-top:1.5rem;
  padding-bottom: 2.5rem;
}
.steps{
  margin-top: 1em;
}
@media (max-width: 768px) {
  .steps{
    margin-top:2em;
    margin-bottom: 2em;
  }
}
fieldset{
  border-top: 1px solid #dadada;
  margin-bottom: 1em;
}
fieldset legend{
  margin-left: -1em;
  margin-bottom: 1em;
  padding-right: 1em;
  text-transform: uppercase;
  font-size: 0.85em;
}
label.label{
  text-transform: capitalize;
}

button.button.is-success{
  margin-top: 2em;
}

footer{
  margin-top: 10em;
}


/*stripe card*/

.stripeCard .form-row{
  background: #cfd7df;
  padding:1em;
  border-radius: 5px;

}

.stopper{
  visibility: hidden;
  display: none !important;
}

.hero.is-success{
  margin-top: 2em;
}