/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: #fff;
    color: var(--brand-dark);
    cursor: pointer;
    padding: 2em;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    font-size: 1.25vw;
    font-weight: 700;
    border-radius: 5px;
    filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.15));
    margin-bottom: 2.5vw;
  }

  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active, .accordion:hover {
    background-color: var(--brand-light-grey);
  }

  /* Style the accordion panel. Note: hidden by default */
  .panel {
    padding: 0 2.5vw;
    background-color: white;
    overflow: hidden;
    margin-bottom: 2.5vw;
    max-height: 0;
    margin:0;
    transition: max-height 0.2s ease-out;
  }

  section#resources,
  section#faq {
    padding: 7.5vw;
}

section#resources {
    padding-top: 2.5vw;
}

.panel p:first-of-type {
    margin-top: 0;
}

button.accordion:first-of-type {
    margin-top: 2.5vw;
}

button.accordion.active i {
    transform: rotate(45deg);
    color: var(--brand-dark-grey);
}

button.accordion i {
    color: var(--brand-primary);
    margin-right: 1em;
    transition: .25s all ease-out;
    font-size: 1.5vw;
}

section#faq {
    padding-top: 7.5vw;
}

@media screen and (max-width: 767px) {
    .accordion {
        padding: 1em;
        font-size: 5.5vw;
        margin-bottom: 5.5vw;
    }
    button.accordion i {
        color: var(--brand-primary);
        margin-right: 1em;
        transition: .25s all ease-out;
        font-size: 5.5vw;
    }
    button.accordion:first-of-type {
        margin-top: 7.5vw;
    }
}