@font-face {
    font-family: museoslab-500;
    src: url(fonts/museoslab-500.otf)
    }
	
@font-face {
    font-family: opensans-regular;
    src: url(fonts/opensans-regular.ttf)
    }
	
@font-face {
    font-family: opensans-semibold;
    src: url(fonts/opensans-semibold.ttf)
    }

@font-face {
    font-family: opensans-bold;
    src: url(fonts/opensans-bold.ttf)
    }

body {
    background-color: white;
}

#logo {
	position: center;
	margin:auto;
	width: 150px;
	height: 150px;
	background-color: white;
	background-image: url(images/homepage-logo.png);
	}


#wrapper {
    position: relative;
    margin: 0 auto;
	height: 800px;
    background-color: white;
}

#mainNav {
	background-color: #0072bc;
}

.nav-text {
	color: black;
}

header {
    position: relative;
    width: auto;
    height: 258px;
    background-color: #0072bc;
}

@media only screen and (max-width: 320px) {
	header {
	position: relative;
    width: auto;
    height: 200px;
    background-color: #0072bc;
	}
}

.name {
	max-width: 34em;
    position: relative;
    margin: 0 auto;
    width: 441px;
    height: 51px;
    color: white;
    background-color: none;
    top: 4em;
}

hr { 
    display: block;
    margin-top: 5.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 2px;
}

.job {
    position: relative;
    margin: 0 auto;
    width: 253px;
    height: 31px;
    color: white;
    background-color: none;
}

		
.thumbnail { 
   	position: relative; 
  	width: 100%; /* for IE 6 */
}

.thumbnail:hover {
	opacity: 0.3;
}


#links {
    position: relative;
    margin: 0 auto;
    width: 674px;
    height: 20px;
    background-color: none;
    top: 60px;
}

#body {
    position: relative;
	padding-top: 45px;
    height: auto;
    background-color: white;
    top: px;
}

hr {
    display: block;
    width: 150px;
}
 	   
h1 {
    font-family: museoslab-500;
    font-size: 4em;
    text-align: center;
}

h2 {
    font-family: museoslab-500;
    font-size: 2em;
    text-align: center;
}

@media only screen and (max-width: 768px) {
		h1 { font-size:3em;}
		h2 { font-size:1.5em;}
}

@media only screen and (max-width: 320px) {
		h1 { font-size:2em;}
		h2 { font-size:1em;}
}
   
p3 {
	font-family: museoslab-500;
	font-size: 16pt;
	color: white;
}

@media only screen and (max-width: 320px) {
		p3 { font-size:12pt;}
}

p4 {
	color: white;
}

/* Style all font awesome icons */
.fa {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
    opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
    background: #3B5998;
    color: white;
}

/* Linkedin */
.fa-linkedin {
	background: #0077B5;
	color: white;
}
/* Behance */
.fa-behance {
	background: #1769ff;
	color: white;
}