@media screen and (max-width:767px){
/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/


h1 {
	text-align:center;
	margin-top:40px;
	margin-bottom: 20px;
	}
	
.container {
	padding: 0px 30px 40px;
	}


/*** HEADER ***/
div#logo {
	display: block;
	width: 100%;
	text-align: center;
	}
	
div#main_nav {
	display: none;
	}
	

/*** ABOUT ***/
.about {
	margin-top: 50px;
	}

.bio_left {
	display: block;
	width:100%;
	margin-right:0%;
	}
	
.bio_right {
	display: block;
	width:100%;
	}

.about-photo {
	text-align:center;
	margin:20px auto;
	padding: 0px;
	float: none;
	width: 100%;
	width:35%;
	position:relative;
	}  
	
.about-photo img {
	float: none;
	}	

@media screen and (max-width:520px){
	.about-photo {
		width:50%;
		}
}     		

.about-photo img {
	text-align:center;
	margin: auto;	
	float: center;
}



.about-skills h4 {
	text-align:center;
	margin-top:20px;
	}

.about-services {
	margin:0;
	}

.about-services p {
	font-weight:400; 
	font-size:1.2em; 
	line-height:1.5em;
	text-align:center;
	}

.about-skills {
	margin:20px auto 0px;
	}


	
.about-skills p {
	font-weight:400; 
	font-size:1.2em; 
	line-height:1.5em;
	text-align:center;
}


/*** WORK ***/
.thumbs {
	width:300px;
	text-align: center;
	margin: auto;
	}
.portfolio_thumb {
	margin-bottom:20px;
	}
	
.portfolio_thumb h4{
	font-size: 22px;
	}

.portfolio_thumb a:active{
	outline: none;
	}

.teaser:hover {
	height:100%;
	width:100%;
	top:0px;
	left:0px;
	}

.teaser:hover h3 {
	margin:80px 30px 0;
	}


.project {
	padding-top:50px;
	width:100%;
	border-top: 1px solid #333;
	margin-bottom:20px;
}

.project_image_border {
	border-right: 0px solid #000000; 
	min-height:100px;  
}

.project_image_background {
	padding:5% 0 0;
	margin:0;
}

img.project_image_logo {
	width: 80%;
	margin:0 10% 5%; 
	padding:10%; 
	background:#fff; 
	border:0px solid red;
	-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.25);
	-moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.25);
	box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.25);
}

img.project_image {
	width: 100%;
	margin: 0 auto 5%; 
	padding:0; 
	background:#fff; 
	border:0px solid green;
	-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.25);
	-moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.25);
	box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.25);
}

img.project_image_bar {
	width: 100%;
	margin: 0 auto; 
	padding:0; 
	background:#fff; 
	border:0px solid green;
	-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.25);
	-moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.25);
	box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.25);
}

img.project_image_bc {
	width: 60%;
	margin: 0 20% 5%; 
	padding:0; 
	background:#fff; 
	border:0px solid green;
	-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.25);
	-moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.25);
	box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.25);
}

img.project_image_quarter {
	width: 25%;
	margin:0 37.5% 5%; 
	padding:0; 
	background:#fff; 
	border:0px solid blue;
	-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.25);
	-moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.25);
	box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.25);
}

img.project_image_quarter_last {
	width: 25%;
	margin:0 37.5% 5%; 
	padding:0; 
	background:#fff; 
	border:0px solid blue;
	-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.25);
	-moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.25);
	box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.25);
}

img.project_image_half {
	width: 50%;
	margin:0 25% 5%; 
	padding:0; 
	background:#fff; 
	border:0px solid blue;
	-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.25);
	-moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.25);
	box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.25);
}

img.project_image_half_last {
	width: 50%;
	margin:0 25% 5%; 
	padding:0; 
	background:#fff; 
	border:0px solid blue;
	-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.25);
	-moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.25);
	box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.25);
}

img.project_image_book {
	width: 70%;
	margin:0 15% 5%; 
	padding:0; 
	background:#fff; 
	border:0px solid blue;
	-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.25);
	-moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.25);
	box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.25);
}

img.project_image_mobile {
	width: 70%;
	margin:0 15% 5%; 
	padding:0; 
	background:none; 
	border:0px solid blue;

}

.details {
	
	}

.project h3 {
	display: none;
}

.project h5 {
	margin:0 auto 10px;
	text-align:center;

}

.project p {
	text-align: center;
	}	

.project a{
	font-size:14px;
}

.hiddendiv {display:none;}

.visiblediv {display:block;}

.company, .client_type, .services, .website, .note, .projects p {
	border-bottom: none;
	margin-left: 0px;
	}


.company p, .client_type p, .services p, .website p, .note p {
	font-size:13px;
	margin:0 auto 10px;
	text-align:center;
	line-height:2em;
}		
			
.company a, .note p {
	display: none;
	}
.nav_work .note {
	display: none;
	}
		
.nav_work_mobile {
	border-top: 1px solid #333;
	height: 24px;
	border-bottom: 1px solid #333;
	float:left;
	}	
.nav_prev {
	font-size:13px;
	}

.nav_next {
	font-size:13px;
	}
	

/*** CONTACT ***/


input {
	padding: 2%;
	}

input.text1, input.text2 {
	display: block;
	width: 100%;
	}

#message {
	padding: 2%;
	}

input, textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
	}

#footer a{
	margin: 5px 0 5px 0px;
	}

div#footer_left {
	display:none;
	}
	
div#twitter_div {
	margin: 3px 30px 0;
	height:200px;
	}
	
div#footer_middle {
	float: left;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	height: 110px;
	margin-bottom:30px;
	}
	
div#footer_middle img {
	margin: 25px auto 0;
	padding: 0 5px;	
	}
	
div#footer_right {
	display:none;
	}
	
div#footer_right p{	
	margin: 15px 60px 0;
	}	


div#footer_legal {
	text-align: center; 
	}
	
div#footer_legal p {
	font-size: 11px;
	text-align:center;
	}			
	
/* Twitter */
.p-name .customisable-highlight {
	color:#fff;
	text-decoration: none;
}

}

 @media only screen and (min-device-width: 1px) and (max-device-width: 480px) {
    /* CSS Rules to go here */		
#nav-btn {
	background: transparent; 
	border-bottom: 12px double #fff; 
	border-top: 4px solid #fff;
	height: 4px; 
	width:10%;
	float:right;
	display:inline;
	margin-top:10px;
	}
	
.touch {

}	
	
}