.registrationSteps { border-bottom: 1px dotted #CCC; padding: 20px 0 10px; }
.stepButton { width: calc(25% - 20px); float: left; text-align: center; font-size: 14px; padding: 10px; line-height: 18px; }
.stepButton.join, .stepButton.noPay { width: calc(33.33% - 20px); }
.stepButton.renew { width: 50%; }
.stepButton.completed { color: #DDD; }
.stepButtonNumber { width: 35px; height: 35px; text-align: center; background: #E6E6E6; border-radius: 17.5px; line-height: 35px; margin: 0 auto 10px; font-family: 'Merriweather', serif; font-size: 18px; }
.stepButtonNumber.completed { color: #DDD; }
.stepButtonNumber.active { background: #091B2B; color: #FFF; font-weight: 700; }
.formButton { border-top: 1px dotted #CCC; margin: 20px 0 0; }
.formButton.alt { border-top: none; }
button.completedButton { width: 35px; height: 35px; text-align: center; background: #E6E6E6; border-radius: 17.5px; line-height: 35px; margin: 0 auto 10px; font-family: 'Merriweather', serif; font-size: 18px; color: #DDD; border: 0; }
.formButton input, #conservationForm input[type="submit"] { background: #091B2B; color: #FFF; border: 0; font-family: 'Merriweather'; margin: 20px auto 0; display: block; font-weight: 700; font-size: 18px; letter-spacing: 1px; }
.formButton input:hover, #conservationForm input[type="submit"]:hover { background: #005D66; cursor: pointer; }
.formRequired { color: #C00; vertical-align: super; font-size: 9px; }
.formHeader { float: left; width: calc(70% - 10px); margin: 5px 0 15px calc(30% + 10px); }
.formLabel { float: left; width: calc(30% - 10px); text-align: right; height: 40px; line-height: 40px; margin: 5px 10px 5px 0; }
.formDropdown, .formText { float: left; width: calc(70% - 10px); height: 40px; line-height: 40px; margin: 5px 0 5px 10px; }
.formText.detail { height: auto; line-height: auto; }
.formText.multiline { height: auto; line-height: 19px; font-size: 14px; }
.formText.multilineLg { height: auto; line-height: 28px; padding-top: 4px; }
.formText.checkboxes { height: auto; line-height: 24px; padding-top: 8px; }
.formText input[type="text"], .formText input[type="password"], .formText input[type="email"], .formText input[type="date"], .formText input[type="number"] { font-size: 16px; line-height: 24px; padding: 2px 5px; border: 1px solid #BBB; font-family: 'Roboto', sans-serif; width: calc(100% - 10px); }
.formText textarea { font-size: 16px; line-height: 24px; padding: 2px 5px; border: 1px solid #BBB; width: calc(100% - 10px); font-family: 'Roboto', sans-serif; }
.formDivider { border-top: 1px dotted #CCC; width: 100%; height: 20px; margin-top: 20px; }
.formWaiver input[type="text"] { width: 100%; }
.formAgreement { width: calc(100% - 10px); margin: 0 20px 10px; }
.clear.extraSpace { margin-bottom: 1em; }
.cancelled { text-transform: uppercase; display: inline-block; }
.eventRegistrationForm { margin-bottom: 20px; }

@media screen and (max-width: 700px) {
  .eventInfo { order: 1; width: calc(100% - 20px); }
  .eventDetails, .eventRegistrationForm { order: 1; width: calc(100% - 20px); padding: 10px; }
}