html, body {
    font-family: 'Raleway', sans-serif;
    margin: 0; padding: 0; border: 0;
    height: 100%;
}
body {display: table; width: 100%;}
body > header,
main {display: table-row;}
main {height: 100%;}

body > header,
h1, h2, h3, h4, h5, h6 {font-family: 'Roboto Slab', serif;}

body > header {
    color: #fff;
    text-align: center;
    background: url(i/header.jpg) no-repeat center;
    margin: 0;
    background-size: cover;
    text-shadow: 0.1em 0.1em 0.125em #000;
}
body > header span {font-size: 0.4em}

body > nav a {
    text-align: center;
    font-family: 'The Girl Next Door', cursive;
    color: #000;
    text-decoration: none;
}

#main-wrap {
    padding: 0 1.5em 5em;
}
main article > a {
    text-decoration: none;
}
body.bio main section header {padding: 80% 1em 1em;}
main article header {padding: 40% 0.5em 00.5em 0.5em;}
body.bio main section header,
main article header {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    border-radius: 0.25em;
    color: #FFF;
}
main article header h2,
main article header p {text-shadow: 0 0.1em 6px #000;}
main header h2,
main header p {
    margin: 0;
    text-align: left !important;
    line-height: normal !important;
}
main header p {
    font-style: Italic;
}

#main-wrap > article p,
#main-wrap > article li,
#main-wrap > section p,
#main-wrap > section li {
    text-align: justify;
    line-height: 1.8em;
    letter-spacing: 0.025em;
}
#main-wrap > article aside.scripture {
    color: #cc8a00;
    padding: 2em;
    font-size: 1.2em;
    font-style: italic;
}
main article + article {
    padding-top: 2em;
    margin-top: 2em;
    border-top: 2px solid #EEE;
}
body > footer {
    display: table;
    width: 100%;
    background-color: #eee;
    box-shadow: inset 0 3em 3em -4em #AAA;
}
body > footer > section {
    padding: 2em 0;
}
body > footer p {
    margin: 0;
    line-height: 1.4em;
}

a { color: #cc8a00; }
a:hover { color: #A36E00; }

/* All Screens EXCEPT Mobile */
@media all and (min-width: 760px){
    body > header:before,
    body > header:after {content: ""; display: block;}
    body > header:before {padding-top: 2%;}
    body > header:after {padding-top: 20%;}
    
    body > nav {
        display: table;
        width: 100%;
        max-width: 1080px;
        position: relative;
        margin: 0.5em auto 8em;
    }
    body.blog > nav {
        margin-bottom: 15%;
    }
    body > nav a {
        display: table-cell;
        width: 13%;
        font-size: 180%;
    }
    #portrait {
        display: table-cell;
        width: 22%;
        position: relative;
        color: #FFF;
        text-align: center;
        text-indent: -9999em;
    }
    #portrait:after {
        content: "";
        display: block;
        position: absolute;
        background: url(http://builttolove.net/i/portrait.jpg) center no-repeat;
        background-size: cover;
        border: 0.25em solid #FFF;
        border-radius: 50%;
        padding-bottom: 100%;
        width: 100%;
        margin-top: -60%;
    }

    #main-wrap {
        width: 100%;
        max-width: 860px;
        box-sizing: border-box;
        margin: 2em auto 0;
    }
    body > footer > section {
        display: table-cell;
        vertical-align: top;
        text-align: right;
        width: 300px;
    }
    body > footer > section + section {
        text-align: center;
    }
    body > footer > section + section + section {
        text-align: left;
    }
    
    /* Per page styles */
    body.bio main section {
        display: table-cell;
        box-sizing: content-box;
        width: 50%;
        padding-right: 1em;
    }
    body.bio main section + section {
        padding-left: 1em;
        padding-right: 0;
    }
    
}
/* Mega Screens */
@media all and (min-width: 1600px) {
    body > header {font-size: 8em;}
}

/* Laptop Screens */
@media all and (min-width: 1080px) and (max-width: 1600px) {
    body > header  {font-size: 7em;}
}

/* Tablet Screens*/
@media all and (max-width: 1080px) and (min-width: 760px) {
    body > header  {font-size: 6em;}
}
/* Mobile Screens */
@media all and (max-width: 760px) {
    body > header  {
        font-size: 3em;
        padding: 1% 1% 1% 0;
    }
    body > nav {
        position: absolute;
        top: 4em;
        right: 4em;
        background-color: #CCC;
        width: 60%;
        text-align: center;
        box-shadow: 2px 0 1em -0.25em #000;
        
        border-radius: 1em;
    }
    body > nav > a {
        display: none;
        font-size: 2.5em;
        border-bottom: 1px solid #777;
    }
    body > nav > a:last-child {
        border-bottom: none;
    }
    body > nav.touch > a {
        display: block;
    }
    #portrait {
        text-align: center;
        background: url(i/portrait.jpg) center no-repeat;
        background-size: cover;
        border: 0.25em solid #FFF;
        color: #FFF;
        text-shadow: 0.1em 0.1em 0.125em #000;
        border-radius: 50%;
        position: absolute;
        border-bottom: none;
        top: -4em;
        right: -4em;
        width: 5em;
        height: 2em;
        padding-top: 3em;
    }
    #main-wrap {
        margin-top: 2em;
    }
    #main-wrap > article p,
    #main-wrap > article li,
    #main-wrap > section p,
    #main-wrap > section li {
        text-align: left;
    }
    body > footer > section {
        padding: 2em 1em;
        text-align: center;
    }

    /* Per page styles */
    body.bio main section {
        margin-bottom: 2em;
    }
}
@media all and (max-width: 600px) {
    body > header {
        font-size: 2.5em;
    }
}
@media all and (max-width: 400px) {
    body > header {
        font-size: 2em;
    }
    body > header:before,
    body > header:after {content: ""; display: block; padding-top: 0.4em;}
}









.photos {
    margin-top: 4em;
}
.photos > header {
    margin-bottom: 1em;
}
.photos li,
.photos ul {
    margin: 0; padding: 0;
    list-style-type: none; 
}
.photos img {
    margin: 0 1em 1em 0;
}
.photos li a {
    text-decoration: none;
    color: #000;
}

.photos img,
.left {float: left;}
.right {float: right;}

/* Floats and Clears */
.photos li {overflow: auto;}
figure, body.blog h3 {clear: both;}
figure.left + p,
figure.left + h4 {clear: right;}
figure.right + p,
figure.right + h4 {clear: left;}

/* Figure Styles */
figure {text-align: center; margin: 0 1.5em 0.8em;}
figure.left {margin-left: 0;}
figure.right {margin-right: 0;}
figure.left,
figure.right {max-width: 35%;}
figure img {max-width: 100%;}
figcaption {font-size: 0.8em; font-style: Italic; color: #888;}
figure.pullquote {
    padding: 0 1em;
    background-color: #909698;
    color: white;
    font-weight: bold;
}

/* Heading Styles */
body.blog  h3 {color: #cc8a00; margin-top: 2em; padding-bottom: 0.4em; border-bottom: 4px solid #DDD;}
h4 {margin-bottom: 0;}
h4 + p,
h4 + figure + p {margin-top: 0;}



.contact #main-wrap {
    max-width: 400px;
    margin-bottom: 4em;
}
.contact #main-wrap > header{
    margin-bottom: 2em;
}
.contact form label {
    display: block;
}
.contact form input,
.contact form textarea {
    font-size: 1.4em;
    width:100%;
    box-sizing: border-box;
    margin-bottom:1em;
    padding:4px;
    border: 1px solid #CCC;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
}
.contact form input:focus,
.contact form textarea:focus {
  box-shadow: 0 0 5px #A36E00;
  border: 1px solid #cc8a00;
}
.contact form textarea {
    height: 6em;
    resize: none;
}
#submit-button {
    display: block;
    width: 60%;
    margin: 0 auto;
    font-size: 1.2em;
    cursor: pointer;
    padding: 0.5em;
    border: 0;
    color: white;
    text-shadow: 2px 2px 1px #A36E00;
    text-decoration: none;
    background: #cc8a00;
    box-shadow: 1px 0px #A36E00, 0px 1px #DBAD4D,
                2px 1px #A36E00, 1px 2px #DBAD4D,
                3px 2px #A36E00, 2px 3px #DBAD4D,
                4px 3px #A36E00, 3px 4px #DBAD4D,
                5px 4px #A36E00, 4px 5px #DBAD4D,
                6px 5px #A36E00, 5px 6px #DBAD4D;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
}
#submit-button:hover,
#submit-button:focus {
    transform: translate(2px, 2px);
    box-shadow: 1px 0px #A36E00, 0px 1px #DBAD4D,
                2px 1px #A36E00, 1px 2px #DBAD4D,
                3px 2px #A36E00, 2px 3px #DBAD4D,
                4px 3px #A36E00, 3px 4px #DBAD4D;
}
#submit-button:active {
    transform: translate(4px, 4px);
    box-shadow: 1px 0px #A36E00, 0px 1px #DBAD4D,
                2px 1px #A36E00, 1px 2px #DBAD4D;
}
#loading {
    width:32px;
    height:32px;
    background-image:url(../img/loading.gif);
    display:block;
    position:absolute;
    right:130px;
    bottom:16px;
    display:none;
}
#errors,
#success {
    border:solid 1px;
    padding: 0.5em;
    margin: 0 0 2em;
    border-radius:8px;
    display:none;
}
#errors.visible,
#success.visible {display:block;}
#errors {
    border-color: #E58E8E;
    background-color:#FFE6E6
}
#success {
    border-color: #83D186;
    background-color: #D3EDD3;
}
#errors li {
    padding:2px;
    list-style:none;
}
#errors li:before {content: ' - ';}
#errors #info:before {content: '';}