body {
}

.page-header, h1 {
    text-align: center;
    font-family:Georgia;
    text-shadow: 0 0 0.001em grey;
}



/*at the very top*/
#about {
    font-size:20px;
    font-family:sans-serif;
    text-shadow: 0 0 0.001em grey;

}

@media (max-width:700px) {
      #about {
    font-size:18px;
    }
}


@media (max-width:400px) {
     #about {
    font-size:16px;
    }
}





/*
    Font Styling 
*/
#mission {
    text-align: center;
}

#ourMission {
    text-align: center;
    text-shadow: 0 0 0.001em grey;
}






/*Bullet Points */

p {
    font-size:18px;
    font-family:sans-serif;
}

@media (max-width:700px) {
     p {
    font-size:16px;
    }
}


@media (max-width:400px) {
     p {
    font-size:12px;
    }
}


#staffpic {
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:35%;
    height:auto;
    /*box-shadow: 0 0 0.5em black;*/
}

@media (max-width:400px) {
     #staffpic {
    width:55%;
    }
}


/*Titles for the bullet points*/
h3 {
    font-family:Georgia;
    text-decoration:underline;
    text-shadow: 0 0 0.0001em black;
}



@media (max-width:700px) {
     h3 {
    font-size:22px;
    }
}


@media (max-width:400px) {
     h3 {
    font-size:18px;
    }
}


#bigContainer {
    border: solid  rgba(20,158,27,1);
    border-width: 0px 2px 2px 2px; 
    box-shadow: 0 5px 0.6em rgba(20,158,27,0.61);
    background-color:white;
}

#bullets {
    border:solid #2C6CB0;
}







/*Bul1 and bul2 are for styling the bullet points them self */
#bul1 {
    font-family:Arial;
    font-size:15px;
    text-shadow: 0 0 0.001em grey;
}

@media (max-width:700px) {
     #bul1 {
    font-size:14px;
    }
}


@media (max-width:400px) {
     #bul1 {
    font-size:12px;
    }
}


#bul2 {
    font-family:Arial;
    font-size:15px;
    text-shadow: 0 0 0.001em grey;
}

@media (max-width:700px) {
     #bul2 {
    font-size:14px;
    }
}


@media (max-width:400px) {
     #bul2 {
    font-size:12px;
    }
}



/*
    This is for centering the media objects
*/
#format {
    visibility:hidden;
    height:10px;
    width:auto;
}

@media (max-width:1200px) {
     #format {
    display:none;
    }
}


/*
    This is used for pages with 2 panels 
    for them to stay cetner for col-md
*/

@media (min-width:1200px) {
     #format2 {
    display:none;
    }
}
@media (max-width:1200px) {
     #format2 {
    visibility:hidden;
    }
}

@media (max-width:992px) {
    #format2 {
        display: none;
    }
}