/* Colors

    Teal
        #4ec2c0
        rbg(79,194,192)

    Lavendar Grey
        #5a687e

    Warm Black
        #434343

    Light Grey
        #f6f6f6

*/


body, body * {
	margin: 0; 
	padding: 0;
	box-sizing: border-box; /* includes padding in the measurement of content */
}

html {
    font-size: 16px;
}

article, footer, header, main, nav, section {
    display: block;
}

img {
    border: none;  /* IE fix */
    max-width: 100%;
}

body { 
    font-size: 100%;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    line-height: 1.4;
}

a {
    text-decoration: none;
}

.clear-both {
    clear: both;
}

header {
    width: 100%;
    overflow: auto;
}

#inner-header {
    border-bottom: 1px solid #000;
    margin: 0 auto 64px auto;
    margin: 0 auto 4em auto;
    padding-top: 1em;
    max-width: 1220px;
    max-width: 76.25rem; /* 1220px */
    overflow: auto;
    width: 92%;
}

#wrapper {
	margin: 0 auto;
    max-width: 1220px;
    max-width: 76.25rem; /* 1220px */
    width: 92%;
}

#primary-nav {
    clear: none;
    display: inline;
	float: right;
    font-weight: 600;
}

#primary-nav ul {
    list-style-type: none;
}

#primary-nav li {
    font-size: 1em;
    letter-spacing: .04em;
    display: inline-block;
    float: left;
    line-height: 5em;
    padding: 0 0 0 1em;
}

#primary-nav a:link, #primary-nav a:visited {
	color: #000;
}

#primary-nav a:hover, #primary-nav a:focus, #primary-nav a:active {
    color: #5a687e;
}

#logo {
    color: #000;
    float: left;
    letter-spacing: .06em;
}

#logo:hover, #logo:active {
    color: #5a687e;
}

p a:link, p a:visited {
	color: #4ec2c0;
}

p a:hover, p a:focus, p a:active {
    color: #5a687e;
}

h1 {
    font-size: 2.75em;
    font-weight: 200;
}

h2 {
    font-size: 2em;
    margin-bottom: 1em;
}

h3 {
    font-size: ;
    margin-bottom: ;
}

h4 {
    font-size: ;
    margin-bottom: ;
}

.project-title {
    color: #5a687e;
    font-family: 'Lora', 'Baskerville', serif;
    font-weight: 400;
    font-size: 1.55em;
    letter-spacing: .15em;
}

.project-description p {
    margin-bottom: 16px;
    margin-bottom: 1rem;
}

.project-description ul, section ul {
    padding-left: 32px;
    padding-left: 2em;
}

.two-column-portfolio {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 32px; /* Chrome, Safari, Opera */
    -moz-column-gap: 32px; /* Firefox */
    column-gap: 32px;
    -webkit-column-gap: 2rem; /* Chrome, Safari, Opera */
    -moz-column-gap: 2rem; /* Firefox */
    column-gap: 2rem;
}

.two-column-portfolio img {
    margin-bottom: 32px;
    margin-bottom: 2rem;
}

.img-outline {
    border: 1px solid #e3e3e3;
}

.project-gray-background {
    background-color: #f6f6f6;
    padding: 32px;
    padding: 2em;
}

section {
    margin-bottom: 80px;
    margin-bottom: 5em;
    margin-bottom: 5rem;
}



/* start columns */
.thumbnail-columns {
    margin: 0 auto;
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
    -moz-column-gap: 20px; /* Firefox */
    column-gap: 20px;
    -webkit-column-gap: 1.25rem; /* Chrome, Safari, Opera */
    -moz-column-gap: 1.25rem; /* Firefox */
    column-gap: 1.25rem;
}

.thumbnail-columns img {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 16px;
    margin-bottom: 1rem;
}
/* end columns */




/* start footer */
footer {
    background-color: #434343;
    color: #FFF;
    clear: both;
    text-align: center;
}

footer p {
    font-size: .75em;
    font-weight: 200;
    line-height: 3em;
}



/* start sticky footer */
html, body {
    height: 100%;
}

.page-wrap {
    min-height: 100%;
    margin-bottom: -2.4em;  
    margin-bottom: -2.4rem;
}

.page-wrap:after {
    content: "";
    display: block;
}

footer, .page-wrap:after {
    height: 2.4em; 
    height: 2.4rem; 
}
/* end sticky footer */



.max-width-620 {
    margin: 0 auto;
    max-width: 620px;
    max-width: 38.75rem; /* 620px */
}

#about p {
    color: #434343;
    font-size: 1.25em;
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 28px;
    margin-bottom: 1.75em;
}

#about h2 {
    margin-bottom: .5em;
    color: #434343;
    font-size: 2em;
    font-weight: 400;
    text-align: center;
}

#about img {
    max-width: 300px;
    margin: 0 auto 32px auto;
    margin: 0 auto 2em auto;
    display: block;
}

#about a:link, #about a:visited {
	color: #434343;
}

#about a:hover, #about a:focus, #about a:active {
    color: #5a687e;
}

.ul-space-after {
    margin-bottom: 24px;
    margin-bottom: 1.5em;
}





/********************* 960px width *********************/
@media (max-width: 60em) {

  .thumbnail-columns {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
  }
    
    
    
    
    
}


/********************* 800px width *********************/
@media (max-width: 50em) {
    
    #wrapper, #inner-header {
        width: 85%;
    }
    
    .two-column-portfolio {
        -webkit-column-count: 1; /* Chrome, Safari, Opera */
        -moz-column-count: 1; /* Firefox */
        column-count: 1;
    }

    
}



/********************* 596px width *********************/
@media (max-width: 37.25em) {
    
    #primary-nav li {
        font-size: .9em;
        line-height: 4em;
    }
    
    #logo {
        font-size: 2em;
    }
    
    #about img {
        width: 60%;
    }
    
    #about h2 {
        font-size: 1.85em;
    }
    
    
}




/********************* 450px width *********************/
@media (max-width: 28.125em) {
    
    .thumbnail-columns {
        -webkit-column-count: 1; /* Chrome, Safari, Opera */
        -moz-column-count: 1; /* Firefox */
        column-count: 1;
    }
    
}



/********************* 425px width *********************/
@media (max-width: 26.5625em) {
    
    #logo {
        float: none;
        text-align: center;
    }
    
    #primary-nav {
        float: none;
        text-align: center;
    }
    
    #primary-nav ul {
        margin: 0 auto;
    }
    
    #primary-nav li {
        float: none;
    }

    
}