/* Website created by John Visser (http://johnvisser.net - http://redleafhq.com) */


/* GENERAL */
body, p, li {font-family: 'Roboto', sans-serif; color: #000; font-size: 16px;}
a {transition: color 0.2s ease; -webkit-transition: color 0.2s ease; -o-transition: color 0.2s ease; -ms-transition: color 0.2s ease; -moz-transition: color 0.2s ease;}
a:link {color: #82281C; text-decoration: none;}
a:hover, a:focus, a:visited {color: #6E892F;}
h3 {font-family: 'Alegreya', serif; font-weight: 400; margin-top: 0;}
h4 {font-family: 'Roboto', sans-serif; font-weight: 700;}


/* BACKGROUND COLORS */
header, footer {background: #3c2d20 url('img/bg.jpg') top left no-repeat; background-size: cover;}
#about {background: #9BBF45;}
#school {background: #E1DFD2;}
#comments {background: #F7F7F7;}
#donations {background: #E1DFD2;}


/* HEADER & FOOTER */
header {color: #E1DFD2; text-align: center; padding: 45px 10px; width: 100%; height: 380px; position: fixed; top: 0; left: 0; z-index: -1;}
header h1 {font-size: 63px; font-family: 'Alegreya', serif; margin-top: 0; margin-bottom: 0; text-shadow: #000 0 3px 3px;}
header h1.small {font-size: 40px; margin-top: 10px; margin-bottom: 30px;}
header h2 {font-size: 22px; margin-bottom: 0; color: #E1DFD2;}
header s {color: #9BBF45; text-shadow: #000 0 1px 1px;}
header p {color: #9BBF45; font-size: 20px!important; font-family: 'Architects Daughter', cursive; text-shadow: #000 0 2px 2px;}
nav ul {margin-top: 50px;}
nav ul.list-inline li {font-size: 18px; padding-right: 12px; padding-left: 12px; font-variant: small-caps;}
nav a:link, nav a:focus, nav a:active, nav a:visited {color: #F7F7F7; border-bottom: 1px solid #F7F7F7; text-decoration: none;}
nav a:hover {color: #98BE41; border-bottom: 1px solid #98BE41;}
footer {padding-top: 45px; padding-bottom: 15px;}
footer p {color: #F7F7F7; font-size: 13px; text-align: center;}


/* SECTIONS */
main {margin-top: 380px;}
section {padding-top: 45px; padding-bottom: 45px;}
#comments h3, #donations h3 {font-size: 30px;}
#comments, #donations {text-align: center;}
#about img {margin-top: 40px; box-shadow: 3px 3px 15px -2px #333;}
#about a:hover {color: #000!important;}
#about a:visited, #about a:focus {color: #82281C;}
#school .graduation img {margin-top: 40px;}
#school .college {margin-top: 20px;}
#school .college img {margin-top: 40px;}
#comments p {font-size: 20px; font-family: 'Architects Daughter', cursive; margin-bottom: 15px;}
#comments .instructions {font-size: 14px; font-family: 'Roboto', sans-serif; color: #82281C; margin-bottom: 30px; text-align: left;}
#donations p {font-size: 20px;}
#donations p.thanks {font-family: 'Architects Daughter', cursive; font-size: 24px; margin-top: 15px;}
#donations p.small {font-size: 14px; font-family: 'Roboto', sans-serif; margin-top: 30px; margin-bottom: 0;}
#donations p.small a {color: #000!important; border-bottom: 1px solid #000;}
#donations p.small a:hover {color: #82281C!important; border-color: #82281C;}
#donations .btn {margin-top: 10px; padding: 10px 25px; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0;  text-shadow: #000 0 1px 1px;}


/* OTHER */
#comments, #donations {border-top: 2px solid #9BBF45;}    
#top {margin-top: 25px;}
#top a {color: #9BBF45; font-size: 20px; cursor: pointer; bottom: 0; text-shadow: #000 0 2px 2px;}
#top a:hover {color: #F7F7F7;}


/* MEDIA QUERIES */
@media (max-width: 479px) {
    header h1 {margin-bottom: 20px;}
    nav ul {margin-top: 0;}
    nav ul li {padding-left: 0!important; padding-right: 0!important; width: 45%; text-align: center;}
}

@media (max-width: 767px) {
    header {height: auto; position: inherit; z-index: auto;}
    header h1 {font-size: 48px;}
    header h1.small {font-size: 30px;}
    header h2, header p {font-size: 18px!important;}
    nav ul li {padding-top: 10px; font-size: 16px!important;}
    main {margin-top: 0; margin-bottom: 0;}
    #about img {margin-top: 0; margin-bottom: 40px;}
    .graduation img, .college img {width: 30%; margin: 5px 0 20px 20px!important;}
}