raf-onboarding header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  transition: all ease 0.6s;
  opacity: 1;
  background-color: var(--theme-light-grey);
  padding: 30px;
  height: 310px;
  transition-delay: 0.4s;
  overflow: hidden; }
  raf-onboarding header img {
    transition: width ease 0.5s;
    width: 400px;
    margin: 0 auto 45px;
    display: block; }
  raf-onboarding header p {
    transition: all ease 0.3s;
    opacity: 1;
    max-width: 400px;
    text-align: left;
    display: block;
    margin: 20px auto;
    color: var(--theme-dark-grey);
    font-size: 18px;
    font-family: var(--theme-font-secondary);
    word-spacing: 2px; }
  raf-onboarding header b {
    color: var(--theme-green); }
  raf-onboarding header.hidden {
    height: 0px;
    padding: 0;
    margin: 0; }
    raf-onboarding header.hidden img {
      opacity: 0;
      width: 1px; }
    raf-onboarding header.hidden p {
      opacity: 0; }

raf-onboarding .onboarding-buttons {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  margin-top: 15px;
  padding: 0 30px; }
  raf-onboarding .onboarding-buttons ion-button[slot='start'] {
    float: left; }
  raf-onboarding .onboarding-buttons ion-button[slot='end'] {
    float: right; }
  raf-onboarding .onboarding-buttons .icon-wrapper {
    right: 5px;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    background-color: var(--theme-green); }
    raf-onboarding .onboarding-buttons .icon-wrapper ion-icon {
      padding: 5px;
      height: 30px;
      width: 30px; }

raf-onboarding #account-info {
  padding-top: 330px;
  margin: 0 auto;
  width: 90%;
  max-width: 800px; }

raf-onboarding raf-setup-payment {
  display: block;
  opacity: 0;
  height: 0px;
  overflow: hidden;
  transition: all ease 0.4s;
  transition-delay: 0.2s; }
  raf-onboarding raf-setup-payment.show {
    opacity: 1;
    overflow: visible;
    height: auto; }

@media only screen and (max-width: 400px) {
  raf-onboarding .onboarding-buttons {
    padding: 0 15px; } }