@media only screen and (max-width: 780px) {

/* CONTENT POSITION */
#title {
	max-width: 75%;
}
.content {max-width: 100%;}

.title {	width:100%;	top: 25%;}

.title img {	max-width: 75%;}

.title a {	width: 40%;	padding: 3% 0 3% 6%; font-size: 70%;}

.title a:hover {	width: 40%;	padding: 3% 0 3% 6%;	font-size: 70%;}

.sectionwords p{ font-size: 75%;}
.sectiontitle h1{	font-size: 130%;}

.sectiontitle {
	background: rgba(0,0,0,.6);
	max-width:410px;
	padding: 20px;
	left:0;
	top:50px;
}

#fifty {
	width:75px;
}

}

@media only screen and (max-width: 550px) {

/* GRID GUIDES */
.span_2_of_2 {		width: 100%; 	}
.span_1_of_2 {		width: 100%; 	}

.span_3_of_3 {		width: 100%; 	}
.span_2_of_3 {		width: 100%; 	}
.span_1_of_3 {		width: 100%;	}

.col { 		margin: 5% 0 1% 0%;	}


/* TITLE WIDTH */
.title {	width:100%;	top: 15%;}

.title img {	max-width: 85%;}

.title a { width: 100%;	padding: 4% 0 4% 0;	font-size: 80%;}

.title a:hover {	width: 100%;	padding: 4% 0 4% 0;	font-size: 80%;}

.sectionwords p{ font-size: 75%;}
.sectiontitle h1{	font-size: 110%;}

.sectiontitle {
	background: rgba(0,0,0,.6);
	max-width:260px;
	padding: 20px;
	left:0;
	top:50px;
}

.sectionwords{
	background: rgba(0,0,0,.4);
	max-width:260px;
	padding:20px;
	margin-top: 10px;
}

#socialcontainer {
	width: 300px;
	margin: 0 auto;
	position:relative;
	display:block;
	float: left;
	padding: 5px 0 5% 0;
}

.contact{
	background: rgba(0,0,0,.5);
	max-width:260px;
	padding:20px;
	margin-top: 10px;
}

}