/********************
LAYOUT / STICKY FOOTER
********************/

html,
body {
   margin:0;
   padding:0;
   height:100%;
}

#wrapper {
   width: 100%;
   min-height:100%;
   position:relative;
}

section {
   max-width: 960px;
   margin: 0 auto;
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}

footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
}

/********************
GENERAL
********************/

a {
   text-decoration: none;
   margin: 0;
}

/********************
HEADING
********************/

#logo {
   margin: 0;
}

header {
   width: 100%;
   height: 250px;
   min-width: 400px;
   background: linear-gradient(black, transparent),
            linear-gradient(to top, black, transparent 50%),
            url('../img/bg_brick1.jpg') no-repeat;
   background-size: cover;
   border-bottom: solid 5px black;
   position: relative;
   margin-bottom: 20px;
}

h1, h2 {
   text-align: center;
}

h1 {
   font-family: 'Oswald', sans-serif;
   margin: 0;
   padding: 20px 0;
   font-size: 2em;
   font-weight: normal;
   line-height: 0.8em;
}

h2 {
   font-size: 0.75em;
   margin: -5px 0 0;
   font-weight: normal;
}

/********************
Navigation
********************/

nav {
   position: absolute;
   bottom: 5%;
   height: 20px;
   margin: 0 auto;
   left: 0;
   right: 0;
}

/*nav:after {
   content:''; 
   width:60px; 
   height:2px; 
   background: #D8D8D8; 
   position:absolute; 
   bottom: 20px;
   margin: 0 auto;
   left: 0;
   right: 0;
}*/

nav ul {
   text-align: center;
   margin: 0;
   padding: 0;
/* opacity: 0;
   transition: opacity .3s linear;*/
}

nav li {
   min-width: 50px;
   display: inline-block;
}

nav li:not(:last-child) {
   margin-right: 15px;
}

nav a {
   font-family: 'Oswald', sans-serif;
   font-size: 1em;
   height: 100%;
}

nav ul:hover {
   /*opacity: 1;*/
}

/********************
FOOTER
********************/

footer {
   height: 75px;
   text-align: center;
   font-size: 0.75em;
   padding-top: 50px;
   border-top: 1px solid #D8D8D8;
}

footer p {
   margin: 0;
   padding: 10px 0;
}

.social-icon {
   width: 20px;
   height: 20px;
   margin: 0 5px;
}

/********************
PAGE: ABOUT
********************/

.profile-photo {
   display: block;
   max-width: 150px;
   margin: 0 auto 30px;
   border-radius: 10%;
}

/********************
PAGE: CONTACT
********************/

.contact-info {
   list-style: none;
   padding: 0;
   margin: 0;
   font-size: 0.9em;
}

.contact-info a {
   display: block;
   min-height: 20px;
   background-repeat: no-repeat;
   background-size: 20px 20px;
   padding: 0 0 0 30px;
   margin: 0 0 5px;
}

.contact-info li.mail a {
   background-image: url('../img/mail.png');
}

.contact-info li.phone a {
   background-image: url('../img/phone.png');
}

.contact-info li.twitter a {
   background-image: url('../img/twitter.png');
}

/********************
COLORS
********************/

/* logo text */
h1, h2 {
   color: #D8D8D8;
}

/* site body */
body {
   background-color: #ffffff;
   co
   lor: #999999;
}
/* links */
a {
   color: #D8D8D8;
}

nav a {
   color: #D8D8D8;
} 

nav a:hover,
nav a.selected {
   color: #fff;
   box-shadow: 0 2px #D8D8D8;
} 

footer {
   background-color: #F8F8F8 ;
}