.onboarding {
  background: rgba(30, 49, 134, 1);
  background: -moz-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(30, 49, 134, 1)), color-stop(100%, rgba(17, 27, 73, 1)));
  background: -webkit-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
  background: -o-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
  background: -ms-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
  background: linear-gradient(to bottom, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
  color: #fff;
  height: 100%;
  .bar.bar-header {
    background: rgb(30, 49, 134);
    color: #fff;
    button {
      color: #fff;
    }
    .secondary-buttons {
      button {
        color: rgba(255, 255, 255, .5);
      }
    }
  }
  .bar.bar-stable{
    border-color: transparent;
    border:none;
  }
  ion-content {
    height: 100%;
    .scroll{
      height: 100%;
    }
    color: #fff;
    h2, h3{color:#fff;}
    h2 {
      font-size: 1.4rem;
    }
    p {
      &.tagline {
        color: rgba(255, 255, 255, .5);
      }
    }
    #cta {
      background-size: contain;
      width: 100%;
      clear: both;
      height: 23rem;
      margin-bottom: -3rem;
      background-position: center;
      background-repeat: no-repeat;
      img {
        height: 16rem;
      }
    }
    button {
      color:#fff;
    }
    @media (min-width: 450px){
      p{
        font-size: 1.1rem;
        line-height: 1.5rem;
      }
    }
  }
  .col {
    @include center-block(.5rem);
  }
  .swiper-pagination {
    &-bullet {
      background: rgb(100, 124, 232);
      &-active {
        background: rgb(100, 124, 232);
      }
    }
  }
  .button-transparent{
    background: none !important;
  }
  .button-translucent{
    background: rgba(215, 215, 215, 0.1)
  }
  .button-primary{
    background: rgb(100, 124, 232) !important;
    color:#fff;
  }
  .light-blue{
    color:rgb(100, 124, 232);
  }
}

@media (min-width: 400px){
  .onboarding{
    ion-content{
      h2{
        font-size: 2rem;
      }
      p{
        font-size: 1.4rem;
        line-height: 1.9rem;
      }
      p,h2,h3{
        max-width: 600px !important;
      }
      button{
        max-width: 400px !important; 
      }
    }
  }
}

@import "terms-of-use";
@import "onboard-welcome";
@import "onboard-tour";
@import "onboard-collect-email";
@import "onboard-backup-request";
@import "onboard-backup-warning";
@import "onboard-disclaimer";
@import "onboard-push-notifications";