html, body {
    scroll-behavior: unset;
}
.grey {
    width: 100%;
    height: 123px;
    background: rgba(196,196,196,.15);
}
h3, h4 {
    text-transform: unset;
    width: 100%;
    text-align: left;
    line-height: 63px;
}
h4 {
    line-height: 37px;
}
h6 {
    font-size: 20px;
    line-height: 25px;
    color: rgba(0,0,0,.7);
    padding-top: 14px;
    text-transform: unset;
}
.inner {
    width: 100%;
    min-height: calc(100% - 273px);
    padding: 72px 81px;
}
.disorder, .about, .faq, .team {
    display: grid;
    column-gap: 25px;
    max-width: 1275px;
}
.faq .q {
    width: 100%;
    background: rgba(196, 196, 196, 0.15);
    margin-top: 26px;
    padding: 27px;
    padding-right: 17px;
    cursor: pointer;
    position: relative;
}
    .faq .q::before, .faq .q::after {
        content: "";
        position: absolute;
        right: 30px;
        top: 44px;
        width: 35px;
        height: 3px;
        background: #4a4a4a;
    }
    .faq .q::after {
        transform: rotate(-90deg);
        transition: 250ms;
    }
    .faq .q .a {
        overflow: hidden;
        max-height: 0px;
        transition: max-height 1s cubic-bezier(0, 1, 0, 1) -.1s;
    }
    .faq .q.open::after {
        transform: rotate(0deg);
    }
    .faq .q.open .a {
        max-height: 9999px;
        transition-timing-function: cubic-bezier(0.5, 0, 1, 0); 
        transition-delay: 0s;
    }
    .faq div:nth-child(2):not(.a) {
        margin-top: 40px;
    }
    .faq .a p {
        margin-top: 18px;
        cursor: auto;
    }
    .faq .q h4 {
        padding-left: 31px;
        padding-right: 73px;
    }
        .faq .q h4::before {
            content: "Q:";
            position: absolute;
            color:#D13C3C;
            left: 27px;
        }
    .faq .a p b {
        font-family: 'Fjalla One', sans-serif;
        font-size: 30px;
    }
.about {
    grid-template-columns: 1fr 1fr;
}
    .about h3, .about h4 {
        grid-column: 1/3;
    }
.team {
    padding-top: 69px;
    grid-template-columns: repeat(3, 1fr);
}
    .team h3 {
        grid-column: 1/4;
    }
    .team h4 {
        text-align: center;
    }
    .team h5 {
        padding-top: 5px;
    }
    .team div {
        width: 100%;
        text-align: center;
        padding: 49px 0 59px 0;
        max-width: 295px;
        cursor: pointer;
    }
    .team img {
        max-width: 295px;
        border-radius: 10px;
        margin-bottom: 23px;
        width: 100%;
    }
    .team .left {
        margin-left: 0;
    }
    .team .right {
        margin-right: 0;
    }
.disorder .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 39px;
}
    .disorder h4 {
        margin-top: 5px;
    }
    .disorder .img {
        margin-top: 37px;
        width: 100%;
        height: 215px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
        .anorexia .img {
            background-image: url(../images/disorders/anorexia.jpg);
        }
        .bulimia .img {
            background-image: url(../images/disorders/bulimia.jpg);
        }
        .other .img {
            background-image: url(../images/disorders/other-eating-disorders.jpg);
            background-position: top center;
        }
        .fbt .img {
            background-image: url(../images/disorders/family-based-theraphy.jpg);
            background-position: top center;
        }
        .gp .img {
            background-image: url(../images/disorders/empowering-girls.jpg);
        }
        .help .img {
            background-image: url(../images/disorders/helping-parents.jpg);
        }

.overlay, .modal {
    display: none;
}
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(194,194,194,.66);
    z-index: 9998;
}
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
    height: calc(100% - 50px);
    max-width: 1298px;
    max-height: 725px;
    background: white;
    border-radius: 10px;
    padding: 50px 38px 35px 38px;
    z-index: 9999;
}
    .modal .container {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 334px 1fr 1fr;
        column-gap: 28px;
        text-align: center;
        overflow: auto;
    }
    .modal h4 {
        text-align: center;
        margin-top: 27px;
    }
    .modal img {
        width: 100%;
    }
    .modal p {
        margin-top: 0;
        padding-bottom: 21px;
        text-align: left;
        font-size: 18px;
    }
.cancel {
    width: 44px;
    height: 44px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}
    .cancel::before {
        content: "";
        width: 2px;
        height: 23px;
        position: absolute;
        background: #4a4a4a;
        transform: rotate(45deg) translate(23px, 11px);
    }
    .cancel::after {
        content: "";
        width: 2px;
        height: 23px;
        position: absolute;
        background: #4a4a4a;
        transform: rotate(-45deg) translate(-11px, 23px);
    }

@media only screen and (max-width: 1200px) {
    .modal .container {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media only screen and (max-width: 750px) {
    .inner {
        padding: 72px 27px;
    }
    h3 {
        font-size: 40px;
        line-height: 45px;
        margin-top: 15px;
    }
    .about {
        grid-template-columns: 1fr;
    }
        .about h3, .about h4 {
            grid-column: 1;
        }
    .team {
        grid-template-columns: 1fr;
    }
        .team h3 {
            grid-column: 1;
            text-align: center;
        }
        .team .left, .team .right {
            margin-left: auto;
            margin-right: auto;
        }
    .modal {
        padding: 65px 18px 31px 18px;
    }
    .modal .container {
        grid-template-columns: 1fr;
    }
    .modal .container div {
        margin-bottom: 27px;
    }
}
@media only screen and (max-width: 450px) {
    .faq .a p b {
        font-size: 25px;
    }
}