@charset "UTF-8";
/* CSS Document */

/* Table of Contents_________________
-General Content
-Typography
-Header and Navigation
-Images and Media
-Footer
-Media Queries
____________________________________*/


/* General Content__________________*/
.main {
    padding-top: 3%;}
.row {
    padding: 2% 0;}
.green {
    background-color: #c8b0d1;}

/* Typography_______________________*/
body {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5em;
    color: #000;}
h2 {
    font-family: 'Mr Bedfort', cursive;
    font-size: 3em;
    line-height: 0.5em;
    margin: 0.67em;}
h2.bio {
    color: #8436a1;}
p.bio {
    color: #fff;}

/* Header and Navigation____________*/
header.main_nav {
    padding: 1% 0;
    display: block;}
.logo {
    margin: 5% auto;
    text-align: center;
    }
.logo a {
    color: #fff;
    text-decoration: none;
    padding: 2px 10px 0 10px;
    margin: 0;}
.logo a:hover {
    opacity: 0.8;}

/* Images and Media_________________*/
img {max-width: 100%;}
img.outline {
    border: 1px solid #c2c7c8;}
img.avatar{
	border-radius: 400px;
	border: 5px solid #fff;}
img:hover {
    opacity: 0.8;}

/* Footer___________________________*/
ul.social {
    display: block;
    margin: 5% 0;
    list-style-type: none;
    text-align: center;}
ul.social li {
    font-size: 3em;
    display: inline;
    padding: 0 2%;}
ul.social li a {
    color: #4b4f58;}
ul.social li.facebook a:hover {
    color: rgb(59,89,152);}
ul.social li.twitter a:hover {
    color: rgb(0,172,237);}
ul.social li.instagram a:hover {
    color: rgb(81,127,237);}
ul.social li.youtube a:hover {
    color: rgb(187,0,0);}
ul.social li.flickr a:hover {
    color: rgb(255,0, 132);}
ul.social li.linkedin a:hover {
    color: rgb(0, 123,182);}
ul.social li.email a:hover {
    color: #99c8d5;
}
p.copyright {
    text-align: center;
    color: #4b4f58;
    font-size: 1em;}


/* Media Queries____________________*/

    /* Larger than mobile */
    @media (max-width: 479px) {
	    .logo a{font-size: 2em;}
	    .main{padding-top:15%;}
	    .portfolio img{margin-bottom: 10%;}
	    img.avatar{margin-top: 15%;}
	    h2.bio{font-size: 2.5em;}
	    p.bio{font-size: 1.25em;color: #3f7f7c;}
	    ul.social li a{font-size: .75em;}
}