..* {overflow:hidden;}

html, body {
  background-color: #ece8da;
  background-image: url(bg.png);
  background-repeat: repeat-x;
  text-align: center;
}

#teaser::before { 
	 content: "";
    display: block;
    padding-top: 100%;
}

#teaser {
  margin: 0px auto;
  background-image: url(text.png);
  max-width: 717px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}

#projects {
	font-family: Verdana, Arial;
	margin: 0px auto;
	max-width: 1000px;
  width: 100%;
	margin-top: -15%;
}



#projects h2 {padding: 0; margin: 0; text-transform: uppercase; font-weight: normal; font-size: 250%; margin-bottom: 30px;}
.proj {width: 29.3333%; float: left; margin: 0 2%;}
.proj img {max-width: 100%; box-sizing: border-box;}


@media all and (min-width: 717px) {
	#projects {
		margin-top: -150px;
	}
}
@media all and (max-width: 600px) {
	#projects h2 {font-size: 200%;}
}
@media all and (max-width: 800px) {
	.proj {width: 96%; float: none; margin: 10px auto; max-width: 380px;}
}