/* Table of Contents
_______________________________________________

- General Content
- Typography
- Header and Navigation
- Images and Media
- Footer
- Media Queries

Dark Green #20430c
Gold #e4c340
Brown #554918
Blue #0e3451
DK green #0a2d2a    10,45,42
_____________________________________________*/

/* General Content
_____________________________________________*/

.main { padding-top: 1%;}
.row: { padding: 2% 0; }
.main-bg, .stripe { 
    background: rgb(84,46,46);
    background: linear-gradient(90deg, rgba(10,45,42,1) 0%, rgba(255,255,255,1) 100%);
    padding-top: 1em;
    border-top: .1em solid #ffbf00;
    border-bottom: .1em solid #ffbf00;
}

.container { padding-bottom: 5em;}

.stripe {
    height: 30px;
    width: 100%;
    padding-top: 10px;
    margin-top: 10px;
    box-sizing: content-box;
}


/* Typography
_____________________________________________*/

body {
    font-family: 'Abel', sans-serif;
    font-size: 1.5em;
    color: black;
}

h2 {
    font-family: 'Permanent Marker', cursive;
    font-size: 3em;
    margin: 0.67em;
}

h2.bio { color: #4C4C4C; font-size: 2em; }

p.bio { 
    color: #fff;
    font-family: 'Permanent Marker', cursive;
    font-size: 1.1em;
    color: #20430c;
    margin-left: 1em;
}

p.scripture {
    vertical-align: middle;
    font-family: 'Permanent Marker', cursive;
    font-size: 1.5em;
    color: #4C4C4C;
    margin-top: 30px;
}

/* Header and Navigation
_____________________________________________*/

/* Main Drop-Down Menu */

/* Style the links inside the navigation bar */

.navbar {
    margin-top: -45px;
}

.navbar a, .nav-item {
    display: inline-block;
    font-weight: 900;
    text-shadow: 1px 1px white;
    padding: 5px 20px;
    margin: 0px 20px;
    text-decoration: none;
    font-size: 2em;
}

/* Change the color of links on hover */
.nav-item a:hover {
  background-color: rgba(255,215,0,.2);
  color: rgba(57,101,134,1);
  font-weight: 700;
}


/* Images and Media
_____________________________________________*/


.landscape { max-width: 100%; box-shadow: 10px 10px 5px grey; border: 1px solid gray;}
.portrait { 
    max-width: 75%; box-shadow: 10px 10px 5px grey;  border: 1px solid gray; display: flex; justify-content: center;
}

img.avatar {
    border-radius: 400px;
    border: 4px solid #fff;
    margin: 2em;
    height: 15em;
}

.portfolio img { 
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.img-title {
    position: absolute;
    top: 50%;
    margin-left: 3em;
    text-align: center;
    color: black;
    font-size: 25px;
    font-family: 'Permanent Marker', cursive;
}

.cat-link {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.cat-link a:hover {
   opacity: 100.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */ 
}

.caption {
    font-size: 1em;
    padding: 5px 0 10px 0;
    text-align: center;
    
}

.cs { font-size: 1em;}

img:hover{opacity: 0.8;}


/* Footer
_____________________________________________*/

ul.social {
    display: block;
    list-style-type: none;
    text-align: center;
}

ul.social li {
    font-size: 3em;
    display: inline;
    padding: 0 2%;
}

ul.social li a {
    color: #667;    
}

ul.social li.facebook a:hover { color: rgb(59,89,252);}
ul.social li.twitter a:hover { color: rgb(0,172,237);}
ul.social li.youtube a:hover { color: rgb(187,0,0);}

p.copyright {
    text-align: center;
    color: #667;
    font-size: 1em;
}


/* Media Queries
_____________________________________________*/


@media (max-width: 479px) {
    .logo a { font-size: 2em;}
    .main { padding-top: 15%; }
    .portfolio img { margin-bottom: 10% display: flex; justify-content: center;}
    img.avatar {left: 40%; }
    .scripture { color: black; }
}
img.avatar { margin-top: 15% }

.cs {
    font-size: 5em;
    text-shadow: 2px 2px black;
}

.inner {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: none;
  width: 100%;
  height: auto;
  padding: 5px;
    vertical-align: middle;
  min-height: 100px;
  background-color: #fff;
}

h2.bio { font-size: 2.5em; }

p.bio { font-size: 1em; color: #4C4C4C; }

ul.social li a { font-size: .75em; }

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––– */

/* Larger than mobile */
@media (max-width: 650px) {
    .logo {
        float: left;
    }
    .logo a { font-size: 1em; }
    .main { padding-top: 5%; }
    .portfolio img { margin-bottom: 10%; }
    img.avatar{ 
        position: relative;
        left: 45%;
        margin-right: -55%;
/*        transform: translate(-50%, -50%);*/
        max-width: 35%;
    }
    h2.bio { font-size: 2em; }
    p.bio { font-size: 1.1em; color: #404040; }
}