/* normal aktiv grotesk
font-family: aktiv-grotesk, sans-serif;
font-weight: 400;
font-style: normal;
*/

/*//////////////////////////GENERAL//////////////////////*/

div {
    /* border: red solid 1px; */
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: aktiv-grotesk, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.9em;
    line-height: 1.625em;
    color: black;
}


h1 {
    font-family: aktiv-grotesk, sans-serif;
}

h2 {
    font-size: 6.25em;
    text-transform: uppercase;
    line-height: 0.876em;
    letter-spacing: -0.03em;
    font-weight: 400;
}

/* Extra small devices (phones, 960px and down) */

@media only screen and (max-width: 960px) {
    h2 {
        font-size: 5em;
    }
}

/* Small devices (portrait tablets and large phones,960px and up) */

@media only screen and (min-width: 960px) {
    h2 {
        font-size: 6.25em;
    }
}

h3 {
    font-size: 2em;
    text-transform: uppercase;
    line-height: 1.075em;
    font-weight: 400;
}

@media only screen and (max-width: 768px) {
    h3 {
        font-size: 1.75em;
    }
}

@media only screen and (min-width: 768px) {
    h3 {
        font-size: 2em;
    }
}

/*/////////// HYPERLINK STYLE /////////// */
a {
    color: black;
    text-decoration: underline;
}

a:hover, a:active {
    color: white;
    text-decoration: underline;
}

.navbar-a {
    color: black;
    text-decoration: none;
}

.navbar-a:hover, .navbar-a:active {
    color: white;
    text-decoration: none;
}

.no-underline-link>a{
    color: black;
    text-decoration: none;
}

.no-underline-link>a:active, .no-underline-link>a:hover{
    color: white;
    text-decoration: none;
}

.all-caps {
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.container {
    margin-top: 1.75vh;
    width: 97%;
    margin-bottom: 3%;
}

/*//////////////////////////NAVBAR//////////////////////*/

#navbar {
    /* border-bottom: 1px solid black; */
    padding-bottom: 1%;
}

.navbar-link {
    padding-left: 0;
    padding-bottom: 1%;
    border-bottom: 1px solid black;
}

#navbar-resources {
    text-align: right;
}

/* Extra small devices (phones, 768px and down) */

@media only screen and (max-width: 768px) {
    #navbar-resources, #navbar-projects, #navbar-events, #navbar-reading, #navbar-people, #navbar-blog {
        text-align: left;
    }
}

/* Small devices (portrait tablets and large phones, 768px and up) */

@media only screen and (min-width: 768px) {
    #navbar-resources {
        text-align: right;
    }
    #navbar-projects, #navbar-events, #navbar-reading, #navbar-people, #navbar-blog {
        text-align: center;
    }
}

/*//////////////////////////HOME PAGE//////////////////////*/

.body-home {
    background-color: #F6921E;
    padding-bottom: 2%;
}

/* HOME PAGE LOGO */

#logo-div {
    padding: 0;
    margin: 0;
    float: left;
}

#logo-gif {
    width: 100%;
    float: left;
    padding: 0;
}

/* HOME PAGE BOTTOM */

#bottom-div {
    margin-top: 5%;
    padding: 0;
}

#about-div {
    border-top: 1px solid black;
    padding: 1.25vh 0 0 0;
}

#contact-div {
    border-top: 1px solid black;
    padding: 1.25vh 0 0 0;
}

::-webkit-input-placeholder { /* Edge */
    color: black;
  }
  
  :-ms-input-placeholder { /* Internet Explorer */
    color: black;
  }
  
  ::placeholder {
    color: black;
  }

/*//////////////////////////READING CLUB//////////////////////*/

.body-reading-club {
    background-color: #D9E021;
}

#reading-div {
    margin-top: 0.5vh;
    padding: 0;
}

.col {
    padding: 0;
}

.week-intro {
    padding-bottom: 3vh;
}

.week-reading {
    border-top: 1px solid black;
    padding-top: 1vh;
    margin-bottom: 5vh;
}

.reading-date {
    margin-bottom: 5vh;
}

#reading-h2-div {
    width: 100vw;
}

#mc_embed_signup input.email{
    color: black;
}

#mce-EMAIL{
    color: black;
}

input{
    color: black;
}


/* Extra small devices (phones, 768pxand down) */

@media only screen and (max-width: 768px) {
    #reading-h2-div {
        width: 100vw;
    }
}

/* Small devices (portrait tablets and large phones, 768px and up) */

@media only screen and (min-width: 768px) {
    #reading-h2-div {
        width: 50vw;
    }
}

/*//////////////////////////EVENTS//////////////////////*/

#event-div {
    margin-top: 0.5vh;
    padding: 0;
}

.body-events {
    background-color: #BB7A2A;
}

.week-event {
    border-top: 1px solid black;
    padding-top: 1vh;
    margin-bottom: 5vh;
}

.event-date {
    margin-bottom: 1%;
}

.event-title {
    margin-bottom: 5%;
}

#event-h2-div {
    width: 100vw;
}

/*//////////////////////////PROJECTS//////////////////////*/

.body-projects {
    background-color: #A8D9E5;
}

.project-div {
    padding: 1% 0%;
    display: inline-block;
    vertical-align: top;
}

#project-title-div {
    padding-bottom: 1vh;
    border-bottom: 1px solid black;
    padding-top: 0.5vh
}

.project-img {
    position: relative;
    vertical-align: top;
}

/* Extra small devices (phones, 768pxand down) */

@media only screen and (max-width: 768px) {
    .project-img {
        width: 94vw;
        float: left;
        padding-bottom: 3%;
    }
    .project-title {
        padding-top: 3%;
    }
}

/* Small devices (portrait tablets and large phones, 768px and up) */

@media only screen and (min-width: 768px) {
    .project-img {
        width: 28vw;
        float: right;
    }
}

.project-div-full {
    border-bottom: 1px solid black;
}

/*//////////////////////////PEOPLE//////////////////////*/

.body-people {
    background-color: #417EF6;
}

.people-div {
    padding: 1% 0%;
    display: inline-block;
    vertical-align: top;
}

#people-title-div {
    padding-bottom: 1vh;
    border-bottom: 1px solid black;
    padding-top: 0.5vh;
}

.people-div-full {
    border-bottom: 1px solid black;
}

.people-url-div {
    padding: 2% 0%;
}

.people-img {
    position: relative;
    vertical-align: top;
}

.people-img:hover {
    cursor: pointer;
}

#emily-div {
    border-bottom: none;
}

/* Extra small devices + smaller(phones, 768pxand down) */

@media only screen and (max-width: 768px) {
    .people-img {
        width: 96vw;
        float: left;
        padding-bottom: 3%;
    }
    .people-name {
        padding-top: 3%;
    }
}

/* Small devices + above (portrait tablets and large phones, 768px and up) */

@media only screen and (min-width: 768px) {
    .people-img {
        width: 28vw;
        float: right;
    }
}

/*//////////////////////////RESOURCES//////////////////////*/

.body-resources {
    background-color: #39B54A;
}

#resource-title-div {
    padding-top: 0.5vh;
}

#resource-events-div, #resource-grant-div, #resource-org-div {
    border-bottom: 1px solid black;
}

#resource-events-div, #resource-grant-div, #resource-org-div, #resource-readings-div {
    padding-top: 3%;
    line-height: 2em;
}

#resource-h2-div {
    width: 100vw;
}



/* Small devices(portrait tablets and large phones, 768px and up) */

@media only screen and (max-width: 768px) {
    .resources-text-div {
        width: 100%;
    }
    #resource-h2-div {
        width: 100vw;
    }
}

/* Above small device */

@media only screen and (min-width: 768px) {
    #resource-h2-div {
        width: 50vw;
    }
}

/*////////////////////////// NEWSLETTER SIGN UP //////////////////////*/

/* MailChimp Form Embed Code - Horizontal Super Slim - 12/16/2015 v10.7
Adapted from: http://blog.heyimcat.com/universal-signup-form/ */

#mc_embed_signup form {
    text-align: left;
    padding: 10px 0 10px 0;
}

.mc-field-group {
    display: inline-block;
}

/* positions input field horizontally */

#mc_embed_signup input.email {
    font-family: aktiv-grotesk, sans-serif;
    font-size: 0.9em;
    border: 1px solid black;
    color: black;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    color: black;
    background-color: #F6921E;
    box-sizing: border-box;
    height: 32px;
    padding: 0px 0.4em;
    display: inline-block;
    margin: 0;
    width: 350px;
    vertical-align: top;
}

#mc_embed_signup label {
    display: block;
    font-size: 1em;
    padding-bottom: 10px;
    font-weight: normal;
}

#mc_embed_signup .clear {
    display: inline-block;
}

/* positions button horizontally in line with input */

#mc_embed_signup .button {
    font-size: 1em;
    border: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    letter-spacing: .03em;
    color: #fff;
    background-color: #000;
    box-sizing: border-box;
    height: 32px;
    line-height: 32px;
    padding: 0 18px;
    display: inline-block;
    margin: 0;
    transition: all 0.23s ease-in-out 0s;
}

#mc_embed_signup .button:hover {
    background-color: black;
    cursor: pointer;
}

#mc_embed_signup div#mce-responses {
    float: left;
    top: -1.4em;
    padding: 0em .5em 0em .5em;
    overflow: hidden;
    width: 90%;
    margin: 0 5%;
    clear: both;
}

#mc_embed_signup div.response {
    margin: 1em 0;
    padding: 1em .5em .5em 0;
    font-weight: bold;
    float: left;
    top: -1.5em;
    z-index: 1;
    width: 80%;
}

#mc_embed_signup #mce-error-response {
    display: none;
}

#mc_embed_signup #mce-success-response {
    color: black;
    display: none;
}

#mc_embed_signup label.error {
    display: block;
    float: none;
    width: auto;
    margin-left: 1.05em;
    text-align: left;
    padding: .5em 0;
}

@media (max-width: 768px) {
    #mc_embed_signup input.email {
        width: 100%;
        margin-bottom: 5px;
    }
    #mc_embed_signup .clear {
        display: block;
        width: 100%
    }
    #mc_embed_signup .button {
        width: 100%;
        margin: 0;
    }
}

.subscribe-container {
    border-top: 1px solid black;
    padding-left: 0;
    margin-left: 0;
    padding: 0;
}

input:focus, select:focus, textarea:focus, button:focus {
    outline: none;
}

/*////////////////////////// BLOG //////////////////////*/

.body-blog {
    background-color: #DDD;
}

#blog-title-div {
    padding-bottom: 1vh;
    border-bottom: 1px solid black;
    padding-top: 0.5vh;
}

.hr-blog {
    border-top: 1px solid black;
}

.blog-container {
    margin: 0;
    padding: 0;
}

#blog-div {
    margin: 0;
    padding-left: 0px;
    padding-right: 0px;
}

/* Small devices(portrait tablets and large phones, 768px and up) */

@media only screen and (max-width: 768px) {
    #blog-div {
        margin: 0;
        padding-left: 0px;
        padding-right: 0px;
    }
}

/* Above small device */

@media only screen and (min-width: 768px) {
    #blog-div {
        margin: 0;
        padding-left: 0px;
        padding-right: 0px;
    }
}

.blog-h1 {
    font-family: aktiv-grotesk, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.25em;
    line-height: 1em;
    color: black;
    text-transform: uppercase;
    padding-top: 3%
}

.body-blog {
    font-family: aktiv-grotesk, sans-serif;
    padding-bottom: 5%;
}

.pagination-div {
    padding-left: 3%;
    font-size: 1em;
}

#previous_span, #page_number_span, #next_span {
    padding-right: 5%;
}

.row {
    margin-left: 0px;
    margin-right: 0px;
}

/* Small devices(portrait tablets and large phones, 768px and up) */

@media only screen and (max-width: 768px) {
    .content {
        width: 100%;
    }
}

/* Above small device */

@media only screen and (min-width: 768px) {
    .content {
        width: 80%;
    }
}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
    .content {
        width: 70%;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
    .content {
        width: 60%;
    }
}

.tag-name {
    border: 1px solid black;
    color: black;
    padding: 0.75% 1.65%;
    font-size: 1em;
    font-family: aktiv-grotesk, sans-serif;
    margin-right: 1%;
    margin-top: 3%;
}

.tag-name:hover{
    color: white;
}

.post-title-link {
    text-decoration: none;
}

.post-title-link:active, .post-title-link:hover{
    text-decoration: none;
    color: white;
}

.tag-link, .tag-link:active, .tag-link:hover {
    text-decoration: none;
    color: white;
}

.content{
    padding: 1.5% 0%;
}

.tag-title{
    border-bottom: 1px solid black;
    padding-bottom: 1%;
}

.tag-posts {
    padding-top: 1%;
}

.upcoming {
            font-size: 1.6em;
            line-height: 0.675em;

            color: #000000;
            background-color: #ffffff;

            padding: .4em;
            border-radius: 10px 10px 10px 10px;
            font-family: aktiv-grotesk, sans-serif;

        }
.archive {
    font-size: 1.6em;
    line-height: 0.675em;

    color: #ffffff; 
    background-color: #000000;

    padding: 0.4em;
    border-radius: 10px 10px 10px 10px;
    font-family: aktiv-grotesk, sans-serif;

}