@charset "utf-8";
/* Styles for The Herbal CommitTea Website 1.01 */
.desktop {
    display: none;
}

body {
    color: #000000;
}

a {
    color: #E28DA9;
}


/*Add padding for easy reading */
.row {
    padding-left: 1em;
    padding-right: 1em;
}

/* Navigation */
.navbar-light .navbar-nav .nav-link {
    font-weight: bold;
    color: #DB7093;
}

.navbar.fixed-top.navbar-expand-lg.navbar-light {
    background-color: rgba(255, 255, 255, 0.7);
}

a.active {
    border-bottom: 0.25em solid black;
}

/*Logo in header, resize and add spacing before and after */
#logo {
    width: 20em;
    margin: 0 auto;
    padding-top: 5em;
    padding-bottom: 1em;
}

/*Detials */
.button {
    color: white;
    background-color: #DB7093;
    border: none;
    font-weight: bold;
    padding: 0.3em;
    cursor: pointer;
}

p.bolded {
    font-weight: bold;
}

.center {
    margin: 0 auto;
    text-align: center;
}

.italic {
    font-style: italic;
}

.page-banner {
    padding-bottom: 1em;
}

/*Div background colors */
.color {
    padding: 4em;
}

.lightpink {
    background-color: #efdee7;
}


/*Home Page Banner */

.jumbotron {
    background-image: url(/images/hct/mainbanner.jpg);
    background-position: center;
    background-size: cover;
}

    .jumbotron .container {
        position: relative;
        background-color: rgba(255, 255, 255, 0.5);
        max-width: 40rem;
        padding-left: 3em;
        padding-bottom: 1em;
        margin: 0 auto;
    }

section.jumbotron.jumbotron-fluid {
    margin-bottom: 0;
}

#mc-embedded-subscribe-banner {
    padding-left: 5em;
    padding-right: 5em;
}

/*Instagram Feed */
.column {
    width: 33.33%;
    float: left;
}

#instafeed {
    border-top: 0.2em solid #DB7093;
    border-bottom: 0.2em solid #DB7093;
}

.instafeed {
    padding: 0.2em;
}

/*Footer*/

.footer {
    padding: 2em 2em 0 2em;
}

.icons {
    width: 2em;
}

.footerend {
    margin: 0 auto;
    padding-top: 1em;
}

/* MailChimp Signup */
#mc-embedded-subscribe {
    width: 100%;
    margin-top: 0.5em;
}

/*Quick Changes for bigger screens */
@media only screen and (min-width: 830px) {
    .mobile {
        display: none;
    }

    .desktop {
        display: block;
    }

    /*Instagram Feed */
    .column {
        float: left;
        width: 16.66%;
    }

    /*Reviews slider*/
    p.name {
        text-align: right;
    }

    .stars {
        text-align: center;
        color: #DB7093;
    }

    .spaces {
        padding-top: 1em;
    }
}