* {
margin: 0;
padding: 0;
border: 0;
}

body { 
  font-family: 'Avenir', sans-serif;
  color: #FFF;
  background: #262626;
  text-align: center;
  -webkit-text-size-adjust: 100%;
}

h1, h2{ 
	font-family: "Bebas Neue", sans-serif;
}

p {
	font-size:18px;
}

a {
    color: white;
    text-decoration: none;
	padding-top: 10px;
	font-weight: 900;
}

/* STRUCTURE */

#pagewrap {
	max-width: 856px;
	margin: auto;
}

#header {
	max-width: 856px;
	height: auto;
	background-color: #efd551;
	color: #FFF;
	padding: 25px 35px 0px 35px;
	padding-bottom: 7%
}

#hero {
	width: 30%;
    padding: 0% 4% 0% 1%;
    float: left;
}

#bigwords {
	width: 64%;
    padding-top: 1%;
    }

#social {
	padding-top: 1%;
	padding-left: 36%;
}
 
#social li {
  display: inline;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
  
#social li a {
  border-bottom: none;
  }
  
#social li img {
  width: 5%;
  margin-right: 3%;
  float: left;
}

#work {
	margin: auto;
	float: none;
	text-align: left;
	background: #212121;
	padding: 0px 58px 48px 58px;
}

#work h2{
	font-size:35px;
	padding: 48px 0px 10px 0px;
}

#work hr {
  border: 0;
  clear:both;
  display:block;
  width: 100%;               
  background-color: white;
  height: 2px;
}

#work p {
  padding: 20px 0px 0px 0px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

td {
  padding-top: 18px;
  margin-right: 30px;
  font-size:18px;
}

#footer {
	clear: both;
}

#footer p {
padding: 100px 0px 50px 0px;
font-size:14px;
text-align: left;
color: #808080;
}



/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

/* for 668px or less */
@media screen and (max-width: 668px) {

#header {
/* 	background-color: white; */
}

#work {
	padding: 0px 35px 48px 35px;
}

#work h2{
	font-size:32px;
}

p {
	font-size:17px;
}

td {
  font-size:17px;
}

#footer p {
padding: 60px 0px 0px 0px;
font-size:12px;
}

}


/* for 590px or less */
@media screen and (max-width: 600px) {

#header {
	height: auto;
	padding-bottom: 10%;
}

#hero {
    width: 50%;
    float: none;
}

#bigwords {
	width: 80%;
	margin: 0px auto;
	padding-top: 3%;
	display: block;
}

#social {
	padding-top: 4%;
	padding-left: 11%;
}

#social li img {
  width: 6%;
  margin-right: 3%;
  float: left;
}

#work {
	padding: 0px 30px 48px 30px;
}

#work h2{
	font-size:33px;
}

p {
	font-size:18px;
}

td {
  font-size:18px;
}

#footer p {
padding: 40px 0px 0px 0px;
font-size:12px;
}

/* for 504px or less */
@media screen and (max-width: 460px) {

#header {
	padding-bottom: 12%;
/* 	background-color: white; */
}

#hero {
    width: 70%;
    float: none;
}

#bigwords {
	width: 100%;
	margin: 0px auto;
	padding-top: 5%;
	display: block;
}

#social {
	padding-top: 7%;
	padding-left: 1%;
}

#social li img {
  width: 8%;
  margin-right: 4%;
  float: left;
}

#work {
	padding: 0px 30px 48px 30px;
}

#work h2{
	font-size:26px;
}

p {
	font-size:15px;
}

td {
  font-size:15px;
}


/* for 340px or less */
@media screen and (max-width: 340px) {

#header {
	padding-bottom: 12%;
}

#hero {
    width: 70%;
    float: none;
}

#bigwords {
	width: 100%;
	margin: 0px auto;
	padding-top: 5%;
	display: block;
}

#social {
	padding-top: 7%;
	padding-left: 1%;
}

#social li img {
  width: 8%;
  margin-right: 4%;
  float: left;
}

#work {
	padding: 0px 30px 48px 30px;
}

#work h2{
	font-size:26px;
}

p {
	font-size:13px;
}

td {
  font-size:13px;
}