@import url('https://fonts.googleapis.com/css?family=Montserrat');
.st0{fill:#fdcb6e}.st1{fill:#ffeaa7}.st3{opacity:.53;fill:#fab1a0}
*, *:before, *:after {
  box-sizing: border-box;
}
:root {
  font-family: 'Montserrat', sans-serif;
}
body {
  background-color: #d63031;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23000000' stroke-width='66' stroke-opacity='0.03' %3E%3Ccircle fill='%23d63031' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23d93833' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23dc4236' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%23df4b39' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23e2543c' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%23e55e3f' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23e76842' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23ea7146' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%23ec7b49' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%23ee844d' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%23f18e51' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%23f39755' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%23f5a059' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23f7a95d' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23f8b261' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%23faba65' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%23fcc36a' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23fdcb6e' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.modal {
  background: white;
  padding: 20px;
  width: 90%;
  max-width: 600px;
  margin: 100px auto;
  text-align: center;
  position: relative;
  padding-bottom: 60px;
  box-shadow: 0 5px 20px rgba(black, .2), 0 30px 20px -20px rgba(black, .4);
  &__container {
    height: 100%;
  }
}
.form {
  overflow: hidden;
  &__step__container {
    display: flex;
    align-items: center;
    transition: .5s ease-in-out;
  }
  &__step {
    h3 {
      opacity: .3;
      text-transform: uppercase;
      letter-spacing: .1em;
    }
    h4 {
      opacity: .6;
      position: relative;
      &:after {
        content: '';
        display: block;
        position: absolute;
        background: #333;
        opacity: .4;
        bottom: -10px;
        height: 1.5px;
        width: 40%;
        margin: 0 30%;
        
      }
    }
  }
  &__nav {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    background: linear-gradient(36deg, #d63031, #e17055);
    & > a {
      display: block;
      width: 50%;
      line-height: 50px;
      text-decoration: none;
      padding: 0 8%;
      color: white;
      &.disabled {
        opacity: .2;
        cursor-events: none;
      }
    }
    &__prev {
      text-align: left;
    }
    &__next {
      text-align: right;
    }
  }
}

.donation-boxes {
  display: flex;
  justify-content: center;
  .box {
    input {
      display: none;
      &:checked ~ label {
        box-shadow: 0 0 8px 2px #fdcb6e;
      }
    }
    label {
      display: block;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      
      box-shadow: 0 0 0px 1px #EEE;
      border-radius: 5px;
      margin: 10px;
      font-size: 2em;
      transition: .3s;
      cursor: pointer;
      &:hover {
        background: #FAFAFA;
      }
      svg {
        max-width: 100%;
        max-height: 100%;
        padding: 5px;
        margin: 0 auto;
      }
    }
  }
}

a.btn {
  display: inline-block;
  text-decoration: none;
  padding: 0 25px;
  height: 50px;
  line-height: 50px;
  background: #fdcb6e;
  border-radius: 5px;
  color: white;
  margin: 10px;
  transition: .3s;
  &--cta {
    background: linear-gradient(36deg, #d63031, #e17055);
    &:hover {
      background: linear-gradient(36deg, #e17055, #d63031);
    }
  }
}

.form__bullet {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  margin: 8px;
  background: #CCC;
  cursor: pointer;
  transition: .5s .15s;
  &__container {
    display: flex;
    justify-content: center;
  }
  &--active {
    background: #e17055;
    box-shadow: 0 0 4px #e17055;
    pointer-events: none;
  }
}