body {
    font-family: "Arial", sans-serif;
    overflow-x: hidden;
    font-size: 0.875rem;
}

.shadow {
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
}

h1, h2, h3, h4 {
    text-transform: capitalize;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}

@media screen and (min-width: 800px) {
    body {
        font-size: 1rem;
    }
}

.btn-default {
    text-transform: uppercase;
    background: hsl(185, 62%, 45%);
    color: #fff;
    padding: 0.375rem 0.75rem;
    letter-spacing: 0.25rem;
    display: inline-block;
    /* font-weight: 700; */
    transition: all 0.3s linear;
    font-size: 0.875rem;
    border: 2px solid transparent;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.btn-default:hover {
    color: hsl(184, 91%, 17%);
    background: hsl(184, 80%, 74%);
    text-decoration: none;
}

/* .btn-danger {
    color: #fff;
    background-color: #fce413;
    border-color: #fce413;
} */

/* .masthead {
    background-color: rgb(217 218 249);
    color: purple;
    height: auto;
    padding-bottom: 15px;
    padding-top: 10px;
    background: url("../static/club_pic_2.jpg") center bottom/cover no-repeat fixed;
    min-height: 70vh;
} */

.masthead img {
    object-fit: cover;
    width: 100vw;
}

.nav-tab {
    line-height: 30px;
}

img {
    margin-bottom: 0.57rem;
    max-width: 100%;
}

body {
    font-family: "Roboto", sans-serif;
    background-color: #fdfdfd;
}

.head_text {
    color: white;
}

.card {
    box-shadow: 0 4px 48px #e3e7eb;
}

.sidebar-container {
    box-shadow: none;
}

.card-body {
    overflow: hidden;
}

.sidebar-card-body img {
    width: 80%;
}

.sidebar-container {
    display: none;
}

@media screen and (min-width: 768px) {
    .sidebar-container {
        display: block;
    }
    .event-section {
        display: none;
    }
}

@media screen and (min-width: 1200px) {
    .sidebar-card-body img {
        width: 60%;
    }
}

.section {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.section-title {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title h2 {
    text-transform: uppercase;
}

.section-title span {
    color: hsl(185, 62%, 45%);
}

.section-center {
    width: 90vw;
    margin: 0 auto;
    max-width: 1170px;
}

@media screen and (min-width: 992px) {
    .section-center {
        width: 95vw;
    }
    .section {
        padding: 5rem 0;
    }
    .section-title {
        margin-bottom: 4rem;
    }
}

/*
===============
About
===============
*/

.homepage-container {
    background-color: #e3e7eb;
}

h2 {
    font-size: 2rem;
    line-height: 1.25;
}

@media screen and (min-width: 800px) {
    h2 {
        font-size: 3.5rem;
    }
    h2 {
        line-height: 1;
    }
}

.about-img, .about-info, .img-container {
    margin-top: 1rem;
}

.about-img img, .img-container img {
    width: 100%;
    display: block;
}

@media screen and (min-width: 992px) {
    .about-center {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .about-img, .about-info {
        flex: 0 0 calc(50% - 2rem);
        margin-bottom: 0;
        align-self: center;
    }
    .about-info {
        margin-top: 0;
    }
    .btn-default {
        margin-bottom: 0;
    }
}

@media screen and (min-width: 1170px) {
    .about-img::before {
        content: "";
        position: absolute;
        border: 0.5rem solid hsl(185, 62%, 45%);
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        top: -1.5rem;
        left: -1.5rem;
        /* one way to make sure that img is closer to us another way is by using the class .about-photo used below */
        /* z-index: -1; */
    }
    .about-img {
        position: relative;
    }
    .about-photo {
        position: relative;
    }
}

/*
==================
Contact
==================
*/

form {
    overflow: hidden;
}

.contact {
    background: #f1f5f8;
}

.contact-form, .contact-info {
    margin: 1rem 0;
}

.contact-item {
    margin-bottom: 1.75rem;
}

.contact-title {
    color: hsl(185, 84%, 25%);
    font-size: 1rem;
}

.contact-text {
    text-transform: uppercase;
    font-size: 1rem;
}

.contact-form {
    background: white;
    border-radius: 0.5rem;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s linear;
    max-width: 35rem;
}

.contact-form:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.contact-form h3 {
    padding-top: 1.25rem;
    color: #617d98;
    text-transform: uppercase;
}

.form-group {
    padding: 1rem 1.5rem;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    margin-bottom: 1.25rem;
    background: #f1f5f8;
    border-radius: 0.5rem;
    /* letter-spacing: 0.25rem; */
}

/* for some browsers we need to directly target placeholders for styling purposes */

.submit-btn {
    display: block;
    width: 100%;
    padding: 1rem;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

@media screen and (min-width: 992px) {
    .contact-center {
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
    }
    .contact-form, .contact-info {
        width: 50%;
    }
    .contact-title {
        font-size: 1.2rem;
    }
    .contact-text {
        font-size: 1.2rem;
    }
}

/*
===============
Footer
===============
*/

.content-container {
    min-height: 100vh;
}

.footer {
    background: hsl(209, 61%, 16%);
    text-align: center;
    padding: 3rem 2rem;
}

.footer-links, .footer-icons {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.footer-link {
    color: #fff;
    text-transform: capitalize;
    font-size: 1rem;
    margin-right: 1rem;
    letter-spacing: 0.25rem;
    transition: all 0.3s linear;
}

.footer-link:hover {
    color: hsl(185, 62%, 45%);
    text-decoration: none;
}

.footer-icon {
    font-size: 2rem;
    margin-right: 1rem;
    color: hsl(184, 80%, 74%);
    transition: all 0.3s linear;
}

.footer-icon:hover {
    color: hsl(185, 62%, 45%);
}

.copyright {
    text-transform: capitalize;
    letter-spacing: 0.25rem;
    color: #fff;
}

@media screen and (min-width: 992px) {
    .copyright {
        font-size: 1.2rem;
    }
    .footer-link {
        font-size: 1.2rem;
    }
}

.recaptcha-messages {
    color: #0a6c75
}