@import url(http://weloveiconfonts.com/api/?family=zocial);

[class*="zocial-"]:before {
    font-family: 'zocial',sans-serif;
}
/* Ellipsis - http://joelsaupe.com/programming/multiple-line-ellipsis-css/ */
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.nav a {
    margin: 0;
    display: block;
    font-size: 1.5em;
    padding: 0 .5em;
    color: #000;
    text-decoration: none;
    font-weight: 100;
    line-height: 2em;
}

body {
    font-family: 'Roboto',sans-serif;
}
a{
	text-decoration: none;
}
hr {
    height: 6px;
    border: 0;
    box-shadow: inset 2px 6px 6px -6px #BBBBBB;
}

h1 {
    font-size: 32px;
}

h1,h2 {
    font-weight: 100;
}

h3 {
    color: #bcbbbb;
}

h3,h4 {
    font-weight: 400;
    font-size: 20px;
}

h4,h5 {
    color: #666756;
}

h1,h2,h3,h4,h5,figure {
    text-transform: uppercase;
    margin: 0;
}

h5{
	font-weight: 300;
	text-transform: lowercase;
	text-decoration: none;
}

img {
    display: inline-block;
}

.wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    vertical-align: center;
}

.content {
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.feat_work_img {
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

#splash {
    width: 100%;
    margin: 0 auto 1em;
}

.header_svg {
	display: inline-block;
    width: auto;
    height: 5em;
}
#name_contact {
    text-align: center;
}
.highlighted_work {
    text-align: center;
    display: inline-block;
    width: 31%;
    margin-right: 3.5%;
}


/* Nav */
nav{
	z-index: 999;
	background-color: white;
	text-align: left;
}
nav a{
	display: block;
	text-decoration: none;
}
nav a span{
	margin-left: 1em;
}

@media screen and (min-width:900px) {
    .wrapper {
        width: 900px;
    }
    .highlighted_work:last-child{
		margin-right: 0px;
	}
}

@media screen and (max-width:701px){
	.highlighted_work{
		width:48%;
		margin: 0px 2% 1.5em 0px;
	}
}
@media screen and (max-width: 550px){
	h1{
		font-size: 24px;
	}
	h2{
		font-size: 20px;
	}
	.header_svg{
		height:4em;
	}
}
@media screen and (max-width: 450px){
	h1{
		font-size: 18px;
	}
	h2{
		font-size: 14px;
	}
	h1, h2{
		font-weight: 300;
	}
	.header_svg{
		height:3em;
	}
}
@media screen and (max-width: 400px){
	.highlighted_work{
		width: 95%;
		margin: 0px auto 1.5em auto;
	}
	#splash{
		display:none;
	}
}