/**
 * Colors
 * Primary: #0f9988
 * Active:  #3caa9d
 */
.header {
  position: relative;
  overflow: hidden;
}

.legal {
  position: absolute;
  top: 8px;
  right: 8px;
}
.legal a {
  margin-right: 8px;
  font-size: 0.6em;
  color: rgba(255, 255, 255, 0.8) !important;
}

.form-control {
  border-radius: 0;
  background-color: rgba(255,255,255,0.9);
}

.btn {
  border-radius: 0;
}

.btn-primary,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
  border-color: #0f9988;
  background-color: #0f9988;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
  border-color: #3caa9d;
  background-color: #3caa9d;
}

.invite-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.invite-cta-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.box-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #FCAE3A transparent transparent;
}
.box-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #0E9888 transparent;
}

.title {
  font-family: 'Cute Font', Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,0.8);
}
.subtitle {
  color: rgba(0,0,0,0.8);
}

.img-preview {
  text-align: center;
}

@media (min-width: 0px) {
  .box-top    { border-width: 0 240px 240px 0; }
  .box-bottom { border-width: 0 0 75vh 150vw; }

  .img-logo {
    height: 32px;
    margin-top: 1em;
    margin-bottom: 1em;
  }
  
  .title {
    margin-top: .5em;
    margin-bottom: 0;
    font-size: 4em;
    line-height: 1;
  }
  .subtitle {
    margin-bottom: .25em;
    font-size: 1.5em;
  }
  .description {
    margin-bottom: 1em;
    font-size: 1em;
  }

  .img-store { height: 56px; }

  .img-preview img {
    width: 100%;
    max-width: 360px;
  }
}
@media (min-width: 576px) {}
@media (min-width: 768px) {
  .box-top    { border-width: 0 1000px 600px 0; }
  .box-bottom { border-width: 0 0 700px 1200px; }

  .img-logo {
    height: 64px;
    margin-bottom: 2em;
  }

  .title {
    margin-top: 0;
    font-size: 6em;
  }
  .subtitle { font-size: 2.5em; }
  .description { font-size: 1.5em; }

  .img-store { height: 64px; }

  .img-preview img {
    max-width: 400px;
  }
}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}