body {
    background: url(../img/halftone.png) 0 repeat fixed;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Raleway', sans-serif;
}

h1, h2, h3, h4, h5 {
    font-family: 'Bitter', serif;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.5em;
}

#home h1{
    color: #ffc04d;
    font-size: 4em;
    text-align: center;
}

#home .container{
    margin: 0 auto;
    max-width: 700px;
    position: fixed;
    padding-left: 20%;
    padding-top: 13%;
    z-index: 2;
}

.navigation {
    position: fixed;
    z-index: 999;
    text-align: center;
    width: 100%;
    padding-right: 50px;
    padding-left: 50px;
}

.navigation li{
    display: inline;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 30px;
    float: left;
}

.navigation a{
    color: rgb(122, 174, 139);
    text-decoration: none;
}

.navigation a:hover{
    color: rgb(152, 217, 174);
}

/*.navigation a.active{
    color: rgb(71, 103, 85);
    text-decoration: underline;
}*/
            
#home, #contact{ 
    background: url(../img/halftone.png) 0 repeat fixed; min-height: 600px;
    background-color: #4F4E60;
    height: 100%;
    margin: 0 auto;
    width: 100%; 
    position: relative;
    padding-bottom: 0;
}

#contact {
    margin-bottom: 30px;
    padding-top: 90px;
}

#contact h1, #contact h2, #contact h3{
    color: #ffc04d;
}

#contact a, #about a{
    color: #d42b1e;
	    }
	    
#contact a:hover, #about a:hover{
    color: #d47f72;
}

#footer{ 
    background: url(../img/halftone.png) 0 repeat fixed;
    position: fixed;
    height: 95px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    border-top: solid;
    border-color: rgba(185, 226, 189, 0.3);
    border-top-width: 8px;
    padding-top: 8px;
    text-align: center;
}

#footer span{
    margin-top: -5px;
}
 
#portfolio, #about{
    background: url(../img/congruent_pentagon.png) 0 repeat fixed; min-height: 600px;
    background-color: #A8995A;
    height: 100%; 
    margin: 0 auto; 
    width: 100%; 
    position: relative;
    padding-top: 20px;
    z-index: 4;
}

#about{
    padding-top: 80px;
}

#about h2{
    color: #ffc04d;
}




#portfolio{
    padding-bottom: 40px;
}

#portfolio2 { 
    background-color: #fffccf;
    height: 400px; 
    margin: 0 auto;
    width: 100%; 
    max-width: 1920px; 
    position: relative;
    padding-top: 80px;
    z-index: 3;
}

#portfolio2 h1, #home h2{
    color: #545454;
}

#contact .container{
    padding-top: 5%;
}

#contact {
    z-index: 5;
}

.container{
    margin: 0 auto;
    max-width: 700px;
    position: relative;
    padding-top: 20px;
}

span{
    font-style: italic;
    font-size: 0.5em;
    color: #333;
    clear: both;
}


#cf {
  position:relative;
  height:400px;
  width:400px;
  margin:0 auto;
  bottom: -200px;
  margin-right: 40px;
  float: right;
  clear: both;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}


/**
 * Social Links
 */
#social_links {
    overflow: hidden;
}

#footer .container{
    margin: 0 auto;
    max-width: 700px;
    position: relative;
    padding-top: 0px;
    padding-left: 28px;
}

#social_links li {
    float: left;
    list-style: none;
    margin: 0 10px 10px;
    text-align: center;
}
	
#social_links li a {
    background: url(../img/social_icons.png) no-repeat;
    display: block;
    height: 72px;
    text-indent: -9999px;
    width: 72px;
}
		
#social_links li.vimeo a:hover{ background-position: 0 -72px; }

#social_links li.twitter a { background-position: -72px 0; }
#social_links li.twitter a:hover { background-position: -72px -72px; }

#social_links li.linkedin a { background-position: -144px 0; }
#social_links li.linkedin a:hover { background-position: -144px -72px; }

#social_links li.pinterest a { background-position: -216px 0; }
#social_links li.pinterest a:hover { background-position: -216px -72px; }

#social_links li.instagram a { background-position: -288px 0; }
#social_links li.instagram a:hover { background-position: -288px -72px; }

#social_links li.facebook a { background-position: -360px 0; }
#social_links li.facebook a:hover { background-position: -360px -72px; }

#social_links li.wordpress a { background-position: -432px 0; }
#social_links li.wordpress a:hover { background-position: -432px -72px; }