/* ///////////////////////////////// */
/*               Events              */
/* ///////////////////////////////// */

@media only screen and (min-width: 0px) {
    .main {
        background-color: #efefef;
    }
    .inner {
        background-color: #fff;
    }
    .events {
        width: 100%;
        max-width: 1200px;
        height: auto;
        background-color: #efefef;
        padding: 6rem 5vw 2rem 5vw;
        margin: auto;
    }
    .events .container {
        width: 100%;
        max-width: 1000px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .events h1 {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    .events h2 {
        font-size: 1.5rem;
        margin-top: 2rem;
    }
    .events-cards {
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5%;
        margin: 2.5rem 0rem 0rem 0rem;
    }
    .events-cards img {
        width: 100%;
        max-width: 28rem;
        height: auto;
        margin-bottom: 1rem;
    }
    .easter-card {
        height: 0rem;
    }
}

@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 1024px) {
    .events-cards {
        flex-direction: row;
    }
}

@media only screen and (min-width: 1300px) {
}


/* ///////////////////////////////// */
/*              Sermons              */
/* ///////////////////////////////// */

@media only screen and (min-width: 0px) {
    .sermons {
        width: 100%;
        max-width: 1200px;
        height: auto;
        background-color: #efefef;
        padding: 2.5rem 5vw 4rem 5vw;
        margin: auto;
    }
    .sermons .container {
        width: 100%;
        height: 40vh;
        max-width: 1000px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .sermons h1 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    .sermons h2 {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    .sermons p {
        font-size: 1.25rem;
        line-height: 1.5;
        width: 100%;
        max-width: 24rem;
    }
    .sermons img {
        width: 100%;
        max-width: 20rem;
        height: auto;
        border-radius: 1rem;
        margin-bottom: 2rem;
    }
}

@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 1024px) {
}

@media only screen and (min-width: 1300px) {
}


/* ///////////////////////////////// */
/*              Giving               */
/* ///////////////////////////////// */

@media only screen and (min-width: 0px) {
    .giving {
        width: 100%;
        max-width: 1200px;
        height: auto;
        background-color: #efefef;
        padding: 2.5rem 5vw 4rem 5vw;
        margin: auto;
    }
    .giving .container {
        width: 100%;
        height: auto;
        max-width: 1000px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .giving h1 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    .giving h2 {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    .giving p {
        font-size: 1.25rem;
        line-height: 1.5;
        width: 100%;
        max-width: 24rem;
    }
    .giving img {
        width: 100%;
        max-width: 20rem;
        height: auto;
        border-radius: 1rem;
        margin-bottom: 2rem;
    }
}

@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 1024px) {
}

@media only screen and (min-width: 1300px) {
}


/* ///////////////////////////////// */
/*            Small Groups           */
/* ///////////////////////////////// */

@media only screen and (min-width: 0px) {
    .small-groups {
        width: 100%;
        max-width: 1200px;
        height: auto;
        background-color: #efefef;
        padding: 2rem 5vw 2rem 5vw;
        margin: auto;
    }
    .small-groups .container {
        width: 100%;
        height: 50vh;
        max-width: 1000px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .small-groups h1 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    .small-groups h2 {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    .small-groups p {
        font-size: 1.25rem;
        line-height: 1.5;
        width: 22rem;
    }
}

@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 1024px) {
}

@media only screen and (min-width: 1300px) {
}


/* ///////////////////////////////// */
/*              Visit Us             */
/* ///////////////////////////////// */

@media only screen and (min-width: 0px) {
    .visit {
        width: 100%;
        max-width: 70rem;
        height: auto;
        background-color: #efefef;
        padding: 2rem 5vw 3rem 5vw;
        margin: auto;
    }
    .visit .container {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin: auto;
    }
    .visit .info-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 5%;
    }
    .info {
        width: 20rem;
        margin-bottom: 2rem;
    }
    .visit h1 {
        font-size: 2rem;
        margin-bottom: .5rem;
        border-bottom: solid .1rem black;
        width: 20rem;
        padding: 1rem;
        align-self: center;
        text-align: center;
    }
    .visit h2 {
        font-size: 1.5rem;
        margin: 2rem 0rem 1rem 0rem;
        text-align: left;
    }
    .visit p {
        font-size: 1rem;
        line-height: 1.5;
        max-width: 22rem;
        margin-bottom: 2rem;
    }
    .visit .link {
        font-size: 1rem;
        font-weight: 500;
        background-color: #ed352c;
        color: white;
        width: auto;
        text-align: center;
        padding: .5rem 1rem;
        border-radius: 1rem;
        webkit-box-shadow: 0px 1px 8px 0px rgb(0 0 0 / 30%);
        box-shadow: 0px 1px 8px 0px rgb(0 0 0 / 30%);
    }
    .study {
        width: 20rem;
    }
}

@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 1024px) {
}

@media only screen and (min-width: 1300px) {
}


/* ///////////////////////////////// */
/*              About Us             */
/* ///////////////////////////////// */

@media only screen and (min-width: 0px) {
    .page-title {
        position: relative;
        margin-top: 2rem;
        height: 15rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: white;
    }
    .page-title img {
        width: 100%;
        height: 100%;
        position: absolute;
        right: 0;
        bottom: 0;
        object-fit: cover;
        filter: blur(4px);
        z-index: 0;
    }
    .about {
        width: 100%;
        max-width: 70rem;
        height: auto;
        background-color: #efefef;
        padding: 2rem 5vw 2rem 5vw;
        margin: auto;
    }
    .about .container {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin: auto;
    }
    .about .container span {
        text-align: center;
        margin: auto;
        margin-top: 1rem;
        margin-bottom: 1rem;
        padding-bottom: 2rem;
        width: 100%;
        max-width: 25rem;
    }
    .about .info-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 5%;
    }
    .about .info {
        width: 20rem;
        margin-bottom: 4rem;
    }
    .about .link {
        font-size: 1rem;
        font-weight: 500;
        background-color: #ed352c;
        color: white;
        width: auto;
        text-align: center;
        padding: .5rem 1rem;
        border-radius: 1rem;
        webkit-box-shadow: 0px 1px 8px 0px rgb(0 0 0 / 30%);
        box-shadow: 0px 1px 8px 0px rgb(0 0 0 / 30%);
    }
    .main-link {
        width: auto;
        margin: auto;
        margin-bottom: 4rem;
    }
    .page-title h1 {
        font-size: 2.5rem;
        margin-bottom: 2rem;
        width: 20rem;
        margin: auto;
        padding: 1rem;
        align-self: center;
        text-align: center;
        z-index: 1;
        text-shadow: 0px 2px 7px rgba(0,0,0,0.5);
    }
    .about h2 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 1.75rem;
        font-weight: 700;
        margin: auto;
        margin-bottom: 4rem;
        padding-bottom: 1rem;
        width: 100%;
        max-width: 40rem;
        border-bottom: solid .1rem black;
    }
    .about h3 {
        text-align: center;
        margin-bottom: 1rem;
        font-size: 1.5rem;
        font-weight: 500;
    }
    .about p {
        font-size: 1rem;
        line-height: 1.5;
        max-width: 22rem;
    }
    .about h2 img {
        margin-right: 1rem;
    }
    .about-desktop {
        display: none;
    }
    .mb-p-1 > .info > p {
        margin-bottom: 2rem;
    }
    .staff-pic {
        height: 4rem;
        width: auto;
    }
    .leaders h3 {
        text-align: left;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .leaders img {
        margin-right: 1rem;
    }
}

@media only screen and (min-width: 768px) {
    .about-desktop {
        display: inline-block;
    }
    .about-mobile {
        display: none;
    }
}

@media only screen and (min-width: 1024px) {
}

@media only screen and (min-width: 1300px) {
}