@media only screen
and (min-width : 320px)
and (max-width : 480px) {

body.debug:before {
	position: fixed;
	color: red;
	content: "Both";
}

/* reset */
	body > header,
	body > section,
	body > aside,
	body > footer,
	.home .inside,
	.inside,
	.thumbs,
	aside #contact,
	.staff div.main,
	.staff div.sidebar,
	.service div.main,
	.service div.sidebar,
	.service div.main section,
	.service div.main aside  {
		width: auto;
		min-width: 0;
		margin: 0;
		padding: 0;
		float: none;
	}	
	
/* hide elements */
	a#jets-badge[style],
	#slider-range,
	header #search-form,
	header nav.social,
	#content .aside,
	#aside form,
	#aside .recent,
	aside .address #map,
	#footer nav,
	#footer form,
	#footer .html5logo {
		display: none !important;
	}


.intro {
	font-size: 1.2em;
	line-height: 1.1;
}
	div.intro {
		margin: 1em 0;
	}
	.cke img[style] {
		width: 100% !important;
		height: auto !important;
	}
	.home div.intro h1,
	.home div.intro p,
	.blog div.intro h1,
	.blog div.intro p,
	.project.index div.intro h1,
	.project.index div.intro p {
	    padding-right: 0;
	}
	
/* general wraps */
	body > header,
	section#content .inside,
	body > aside,
	.staff section#content,
	.service section#content,
	section#intro .inside  {
		padding-left: 10px;
		padding-right: 10px;
	}

/* Header */
	header hgroup {
		float: none;
	}
		header hgroup h1.logo {
			display: block;
			float: none;
			margin: 0;
		}
		header hgroup   h1.logo a {
			background-size: 100%;
			width: 290px;
			height: 60px;
		}
	
	/* 	Navigation */
	nav#primary {
		float: none;
		clear: both;
		margin: 0 0 10px 0;
	}
		nav#primary ul {
			overflow: hidden;
			padding-left: 5px;
		}
		nav#primary li a {
			padding: 3px 2px;
			font-size: 11px;
			text-shadow: 0 1px 1px #fff;
		}
		nav#primary li:first-child a {
			padding-left: 0;
		}

		
/* Footer */
	#aside #contact h2 a {
		display: none;
	}
	#footer div {
		float: none;
		width: auto;
		margin: 20px 10px;
	}

/* Section */
section#content {
	width: auto;
}
	.home .featured figure {margin: 0;}
	.home .featured figure a img {
		display: block;
		width: 100%;
	}
	.home .inside {
		padding: 0 0 10px 0;
	}

	
/* Home Thumbs */
	div.overflow {
		display: none;
	}
	.home .thumbs {
		height: auto;
		width: auto;
		margin: 10px 0 0 0;
	}
	.thumbs li.thumb {
		width: 47.5%;
		margin-right: 5%;
	}	
		.thumbs li.thumb:nth-child(2n+2) {
			margin-right: 0;
		}
	
	.home .thumbs li.thumb {
		width: 31%;
		margin: 0 2% 10px 0;
	}
	.home #content .inside {
		padding-right: 0;
	} 
	.thumb div.over span {
		margin: 0;
		line-height: 1.5;
	}
	
	.staff div.thumb img,
	.thumbs li.thumb img {
		width: 100%;
		height: auto;
		background: #f4f4f4;
	}
	.thumb div.over span {
		font-size: 1em;
	}



/* About ******/
.staff div.associates {
	display: none;
}
.staff div.staff {
	overflow: hidden;
}
	.staff div.thumb {
		width: 30%;
		height: auto;
		margin-right: 3%;
		display: inline-block;
	}
		.staff div.thumb:nth-child(3n+3) {
			margin-right: 0;
		}
		.staff div.thumb:nth-child(4n+4) {
			clear: both;
		}
		.thumb figure:before,
		.thumb figure:after {
			top: 60px;
			display: none;
		}
		
		.thumb strong.name {
			font-size: 0.8em;
			line-height: 1.1;
		}
		.thumb span.role {
			font-size: 0.8em;
			line-height: 1.1;	
		}
		.associates .thumbs {
			max-height: 100px;
			margin-bottom: 40px;
		}
		.associates .thumbs li.thumb {
			width: auto;
			height: auto;
			max-width: 100px;
			max-height: 100px;
			margin-right: 10px;
		}
		.staff .jcarousel-prev,
		.staff .jcarousel-next { top: 35px; text-align: center; padding: 0; opacity: 0.5; }
		.staff .jcarousel-prev { left: 5px; }
		.staff .jcarousel-next { right: 5px; }
		
		.associates .thumbs li.thumb img {
			display: block;
			min-width: 100px;
			min-height: 100px;
			max-width: 100px;
			max-height: 100px;
			width: 100px !important;
		}



/* Services */
.service div.main {
	
}
.service div.sidebar {
	margin: 1em 0;
}



/* Projects */
.project.index .thumb.small:nth-child(4n+1):before,
.project.index .thumb.small:nth-child(4n+4):after {
	display: none;
}


	.project.detail #content .main {
/* 		display: none; */
	}
	.project.detail #content aside {
		display: none;
	}

	.project.detail .top details {
/* 		display: none; */
	}
	.project.detail .highlights {
		display: none;
	}
	.project.detail .main .item figure {
		width: 100%;
	}
	.project.detail .main .item figure img {
		width: 88%;
		margin: 10px;
	}
	
	
	.item dt[style] {
			top: 100px !important;
		left: 10px !important;
		width: 40px;
		height: 40px;
		border-radius: 22px;
	}
		.item dt:after {
			width: 40px;
			height: 40px;
			border-radius: 20px;
		}
	.item dd[style] {
			top: 160px !important;
		left: 10px !important;
	}
	
	.project.detail .main .item figure:before,
	.project.detail .main .item figure:after {
		width: 30%;
		bottom: 30px;
	}
		.project.detail .main .item figure:before {left: 7%;}
		.project.detail .main .item figure:after {right: 7%;}


	
/* Blog */
	.blog .intro,
	.blog article span.category,
	.blog ul.categories,
	.blog article header .thumb {
		display: none;
	}
	.blog section .wide {
		background: none;
	}
	.blog ul.archive {
		position: relative;
		bottom: 0; left:0;
		margin: 10px;
	}
		ul.archive li {
			height: auto;
			width: auto;
			min-width: 90px;
			margin-top: 5px;
		}
		ul.archive li ul {
			position: relative;
			top: 0;
		}
			
	.blog section#content article {
		margin-bottom: 40px;
	}
		
			.blog section#content article header h1 {
				margin-bottom: 0;
				font-size: 24px;
			}
			
			.blog section#content article header time {
				left: 0;
				top: 0;
				-webkit-transform: none;  -moz-transform: none;  transform: none; 
				position: relative;
				text-shadow: none;
				display: inline;
				background: none;
				font-size: small;
			}
			
			.blog section#content article header::after {
				display: none;
			}
		
		.blog section#content article div.entry {
			background: none;
			-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
			padding: 0;
		}
		
			.blog section#content article div.entry::before,
			.blog section#content article div.entry::after {
				display: none;
			}
			
			.blog section#content article div.cke img {
				width: 100%;
				height: auto;
			}
			
			.blog article.link .cke > ul {
				padding-left: 0;
				margin: 0 0 0 20px;
			}
			.blog article.link .cke > p {
				display: none;
			}
				
				.blog article iframe,
				.blog article .cke ul li img,
				.blog article .cke ul li .player {
					max-width: 100%;
				}
				.blog article .cke ul li object{
					display: none;
				}
			
		.blog section#content article aside,
		.blog section#content article footer {
			display: none;
		}

	
/* Modal Message */
	#modal {
		top: -100%;
		padding: 5px 0;
		height: auto;
		background: #8cc63f;
	}
	#modal .inside {
	    padding: 0 25px 0 5px;
	}
		#modal a.close {
			position: absolute;
			right: 5px;
			top: 5px;
			bottom: 5px;
		}



		/* Catalyst	page */
		header h2 a:after {
			background-size: 50% auto;
			top: 0;
		}
		.social-ss {
			margin-top: 0;
		}
		h1, section h2, .showcase-content h2 {
			font-size: 22px;
			line-height: 1.3;
		}
			#showcase .home h2,
			section h2 {
				margin: 1em 0 .5em;
			}
		h3 {
			font-size: 100%;
			margin-bottom: .5em;
		}
		
		header hgroup h1.logo a {
			height: auto;
			margin: 0 0 5px 0;
			font-size: 65px;
			line-height: 1;
		}
		nav#primary li a {
			text-shadow: none;
		}
		
		#featured {
			min-height: 0;
			overflow: hidden;
			background: #fff;
			padding-bottom: 0;
		}
		#showcase-nav {
			display: none;
		}
		
		.showcase-slide {
			padding: 0 15px 15px;
			background-size: auto 70px;
			background-position: center bottom;
			background-repeat: repeat-x;
			background-color: #fff;
			background-image: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(198,209,218,1) 100%);
			background-image: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(198,209,218,1) 100%);
			background-image: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(198,209,218,1) 100%);
			background-image: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(198,209,218,1) 100%);
			background-image: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(198,209,218,1) 100%);
		}
		.showcase-slide:first-child {
			background: none;
		}

		#showcase img {
			width: 100%;
			height: auto;
		}
		#showcase img.leading {
			margin-left: -6%;
			margin-right: -6%;
			width: 112%;
		}
		#showcase .plugins .block-short img {
			max-width: 120px;
			margin: 0;
		}
			#showcase .plugins .block-short {
				float: left;
				width: 40%;
				margin: 0 5% 0 0;
			}
			#showcase .block-group .block-short:last-child {
				display: none;
			}
			
		.cke div.c3 {
			width: 100%;
			margin: 0 0 2em;
		}
		
		
		.cke p {
			font-size: 14px;
		}
		#content .cke img {
			width: 40px;
			border-width: 3px;
		}
		#showcase .block-short,
		#showcase .block-long {
			float: none;
			margin: 0 0 1em 0;
			width: 100%;
		}
		
		.macbook,
		a[href^="#showcase-navigation-button"] {
			display: none;
		}
		
		#showcase .icon {
			margin-bottom: 0;
		}
}



/* Smartphones (landscape) ----------- */
@media only screen
and (min-width: 321px)
and (max-width: 480px) {
	
	body.debug:before {
		position: fixed;
		color: red;
		content: "Landscape";
	}
	body:after {
		content: "Landscape";
		display: none;
	}
	
		nav#primary li a {
			font-size: 16px;
			padding: 5px 8px;
		}



	/* Projects - Display */
	.project.detail .top {
		width: 100%;
	}
	
	.project.detail .top figure {
		width: auto;
		max-width: 380px !important;
		min-height: 0;
		
		margin: 10px;
		padding: 15px 15px 120px;
		position: relative;
		background: url("../../img/monitor.jpg") no-repeat scroll 0 0 transparent;
		-webkit-background-size: 100%; -moz-background-size: 100%; background-size: 100%;
	}
	.project.detail .top figure img {
		max-width:  380px !important;
		height: auto;
		border: none;
	}
	
	.project.detail .top .details {
		float: none;
		width: auto;
		padding: 10px;
	}
}


/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {

	body.debug:before {
		position: fixed;
		color: red;
		content: "Portrait";
	}
	body:after {
		content: "Portrait";
		display: none;
	}
	
	/* Projects - Display */
	.project.detail .top figure {
		width: auto;
		min-height: 0;
		margin: 10px;
		padding: 0;
		background: none;
		position: relative;
	}
		.project.detail .top figure:after {
			display: block;
			content: "□";
			width: 10px;
			height: 10px;
			border: 1px solid #333;
			border-radius: 10px;
			position: absolute;
			right: 4px;
			top: 47%;
			line-height: 1;
			padding: 0;
			text-align: center;
			font-size: 8px;
			
		}
	.project.detail .top figure img {
		max-width: 260px !important;
		min-height: 160px;
		height: auto;
		border: 20px solid black;
		border-radius: 15px;
	}
	
/*
	.project.detail #content .main,
	.project.detail #content aside {
		display: none;
	}
*/
}