/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */

}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px)
and (max-width : 480px) {
/* Styles */
	nav ul li a {
		font-size: 90%;
	}
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
	.facebookfanbox {
		display: none;
	}
	
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
	/* Styles */
	
	#marker-wrap {
		display: none;
	}
	
	#how-we-work {
	}
	
	#how-we-work .panel-style {
		float: none;
		margin: 0px auto 25px auto; 
		width: 75%;
	}
	
	#how-we-work .design-panel {
		float: left; 
		width: 35%;
		margin-left: 12.5%;
	}
	
	#how-we-work .build-panel {
		float: right; 
		width: 35%;
		margin-right: 12.5%;
	}

}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

/* How we work */


@media only screen
and (max-width : 750px) {
	#recent-work .four-col {
		display: none !important;
	}
	
	#recent-work .two-col {
		width: auto;
		float: none;
	}
}

@media only screen
and (max-width : 1024px) {
	/* Navigation */
	
	/*.navigation .logo p {
		position: absolute !important;
		height: 1px; width: 1px; 
		overflow: hidden;
		clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
		/*clip: rect(1px, 1px, 1px, 1px);
	}*/

}

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

	/* Nav to left */
	
	nav {
		float: left;
	}
	
	nav ul li {
		margin-left: 0px;
		margin-right: 20px;
	}

	#content-footer .addthis_toolbox {
	}

	#recent-work .two-col h4 span {
		font-size: 1.8em;
	}

	#contact-info {
		width: 96%;
	}
	
	/* How we work */
	
	
	#marker-wrap {
		display: none;
	}
		
	.planning-panel {
		margin-top: 25px;
	}
	
	#how-we-work .panel-style {
		width: 100%;
		float: none;
		margin-bottom: 10%;
	}
	
	#how-we-work .support {
		float: right;
		width: 45%;
	}
	
	#how-we-work .design-panel {
		float: left; 
		width: 47%;
	}
	
	#how-we-work .build-panel {
		float: right; 
		width: 47%;
	}
	
	/* Home services */
	
	.home #services {
		background: none;
	}
	
	.home #services .column {
		float: none;
		width: auto;
	}
	
	.home #services .column {
		text-align: left;
	}
	
	.home #services .column a {
		margin: 2% 0;
		padding: 1%;
	}
	
	.home #services .column figure {
		float: left;
		width: 40%;
	}
	
	.home #services .column a .content {
		float: left;
		width: 52%;
		padding: 4%;
	}
	
	/* Blog */
	
	#blog article .meta {
		width: auto;
		float: none;
		background: url(../images/hr.png) repeat-x 0 100%;
		box-shadow: none;
		margin-bottom: 5%;
		padding: 0;
	}
	
	#blog article .meta ul {
		clear: both;
		text-align: right;
		padding-bottom: 10px;
	}
	
	#blog article p, #blog article h2, #blog article h3, #blog article h4, #blog .post-thumb, #blog article h1 {
		padding-left: 0;
	}
	
	#blog article ul {
		margin: 0;
	}
	
	#blog .permalink {
		padding: 6% 0;
	}
	
	#blog article .meta span {
		display: inline;
	}
	
	/* Footer Get in touch */
	
	#recent-work .four-col .project-desc {
		float: none;
		width: auto;
		text-align: center;
	}
	
	#recent-work .four-col .project-img {
		float: none;
		width: auto;
		text-align: center;
	} 
	
	
	/* Footer */
	
	#content-footer .one-col {
		width: 32%;
	}
	
	#content-footer #got-you-covered {
		width: 100%;
	}
	
	#content-footer #got-you-covered .outer {
		margin: 10px auto;
	}
	
	#content-footer #got-you-covered .inner {
		display: block;
		vertical-align: baseline;
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}
	
	#content-footer #got-you-covered .inner a br {
		display: none;
	}
	
}

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

	section#hero span {
		display: none;
		visibility: hidden;
		height: 0px !important;
		width: 0px !important;
		overflow:hidden;
	}

}

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

	#content-footer .one-col {
		float: none;
		width: auto;
		margin: 0;
		text-align: center;
	}
	
	#content-footer .one-col p {
		padding: 0 5% 5% 5%;
	}
}

@media screen and (max-width: 480px) {
		
	.alignleft, .alignright {
		float: none;
		margin: 10px 0px;
	}
	
	.column{
		clear:both!important;
		display:block!important;
		width:90%!important;
		float:none!important;
		margin:0 auto !important;
		padding:0!important;
	}
	
	.logo, .logo img  {
		float: none !important;
		margin-left: 5px;
	}
	
	.navigation .logo p, .navigation .logo h1 {
		font-size: 0.7125em;
		float: none;
		clear: both;
		margin-left: 2px;
	}
	
	nav {
		float: none !important;
		padding-top: 15px!important;
	}
	
	nav ul {
		clear: both;
		padding-bottom: 5px;
		overflow: hidden;
	}
	
	nav li {
		margin:0 10px !important;
		display:block;
		padding:0;
		text-align:left!important;
		width:auto;
	}
	
	nav li a {
		height: auto !important;
		padding: 4px 0!important;
	}
	
	img {
		height: auto;
	}
	
	#contact-info {
		font-size: 80%;
	}
	
	#contact-info p, #contact-form, #twitter-updates {
		float: none !important;
		width: auto !important;
		margin: 0;
	}
	
	#twitter-updates {
		width: 85%;
		margin-top: 20px;
	}
	
	.home #services .column {
		text-align: center;
	}
	
	.home #services .column figure {
		float: none;
		width: auto;
		margin: 0 18%;
	}
	
	.home #services .column a .content {
		float: none;
		width: auto;
		padding: 4%;
	}
	
	#how-we-work .copy {
		float: none;
		width: auto;
	}
	
	#how-we-work .support {
		float: right;
		width: auto;
		padding-top: 15px;
	}
	
	#filters li {
		float: none;
		width: auto;
		padding-top: 10px;
	}	
	
	.client-grid-item {
		width: 100%;
		position: relative;
	}
			
	.client-meta .client-content {
		float: none;
		width: auto;
	}
	
	.client-meta .client-content h2 {
		font-size: 1.3em;
	}
	
	#clients-grid .client-grid-item.large {
		width: auto;
	}
	
	#clients-grid .client-grid-item .back-button {
		top: 8px;
		right: 8px;
		width: 30px;
		height: 36px;
		display: block;
		overflow: hidden;
		background-position: top right;
	}
	
	.stitch-style .inner h2 {
		font-size: 1.8em;
	}
	
	#clients-grid .client-grid-item {
		width: 96.5%;
		height: auto;
	}

	section#hero {
		display: none;
		visibility: hidden;
		height: 0px !important;
		width: 0px !important;
		overflow:hidden;
	}
		
	.column{
		clear:both!important;
		display:block!important;
		width:90%!important;
		float:none!important;
		margin:0 auto !important;
		padding:0!important;
	}
	
	.logo, .logo img  {
		float: none !important;
	}
	
	.navigation .logo {
		display: block;
	}
	
	.navigation .logo p, .navigation .logo h1 {
		font-size: 0.7125em;
	}
	
	nav {
		float: none !important;
		padding-top: 15px!important;
	}
	
	nav li {
		margin:0 10px !important;
		display:block;
		padding:0;
		text-align:left!important;
		width:auto;
	}
	
	nav li a {
		height: auto !important;
		padding: 4px 0!important;
	}
	
	img {
		height: auto;
	}
	
	#contact-info {
		font-size: 80%;
	}
	
	#contact-info p, #contact-form, #twitter-updates {
		float: none !important;
		width: auto !important;
		margin: 0;
	}
	
	#twitter-updates {
		width: 85%;
		margin-top: 20px;
	}
	
	.home #services .column {
		text-align: center;
	}
	
	.home #services .column figure {
		float: none;
		width: auto;
		margin: 0 18%;
	}
	
	.home #services .column a .content {
		float: none;
		width: auto;
		padding: 4%;
	}
	
	#how-we-work .copy {
		float: none;
		width: auto;
	}
	
	#how-we-work .support {
		float: right;
		width: auto;
		padding-top: 15px;
	}
	
	#filters li {
		float: none;
		width: auto;
		padding-top: 10px;
	}
	
	
	#content-footer .addthis_toolbox {
		margin: 0 auto 25px auto;
		float: none;
		width: 47%;
	}
	
	#how-we-work .design-panel {
		float: none; 
		width: 100%;
	}
	
	#how-we-work .build-panel {
		float: none; 
		width: 100%;
	}
	
	/* blog meta and addthis */
	
	#blog .panel-style .addthis_toolbox {
		width: 100%;
	}
	
	#blog article .meta .addthis_toolbox a{
		margin-bottom: 10px;
	}
	
	.meta li a { 
		width: 100%;
		text-align: center;
	}

}