/* ============================================================================== */
/* 1. Media Queries for Responsive Layout
/* ============================================================================== */

/** 1.1 Tablet **/

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.wrap { width: 712px;}
		#cta { font-size: 36px; line-height: normal;}
		article.description.singlecol { width: 22% !important; margin: 0 !important;}
		article.singlecol, article.onethirdcol, #portfolio article.onethirdcol, #articles article.onethirdcol { width: 26.8% !important;}
		#home .widget_ct_dribbble img { width: 159px; height: 119px;}
			.widget_ct_dribbble li { margin-right: 0;}
		#archive-header h1 { font-size: 2.25em;}
		#archive-header p {top: 30px; font-size: 0.875em;}
		div#contact-info, div#social-links { word-wrap: break-word;}
		ul.ctTabs li a { padding: 10px 10px;}
		ul.portfolio li { float: left; width: 181px;}
			ul.portfolio li img { width: 183px;}
		.view-grid { left: 324px;}
		.widget_ct_portfolio li a { height: 119px;}
		.widget_ct_dribbble li img { height: 64px; width: 85px;}
		section#content.leftcol, #sidebar { width: 100%; }
}

/** 1.2 Mobile (Portrait/320px) **/

@media only screen and (min-width: 0px) and (max-width: 480px) {
	header { padding: 1px 0 0 0; text-align: center;}
		.wrap { width: 300px; padding: 0 10px;}
			ul#tags-nav li { margin-bottom: 5px;}
			ul.portfolio { list-style: none; width: 100%;}
				ul.portfolio li { float: left; width: 258px;}
					ul.portfolio li img { width: 260px;}
			.view-grid { left: 118px;}
			.single-portfolio .singlecol,
			.single-portfolio .onethirdcol,
			.single-portfolio .twocol,
			.single-portfolio .twothirdcol,
			.single-portfolio .threecol { float: none; width: 100%;}
			.widget_ct_portfolio li a { display: block; height: 165px;}
			.flickr_badge_image { float: left; margin: 0 7px 0 0;}
				.widget_ct_dribbble li img { height: 88px; width: 118px;}
		
}

/** 1.2 Mobile (Portrait/320px & Landscape/480px) **/

@media only screen and (min-width: 0px) and (max-width: 767px) {
	section#main { padding-top: 15px !important;}
	#archive section#main, .single-post section#main { padding-top: 0 !important;}
		#topbar { padding: 5px 0;}
			#topbar p { float: none !important; text-align: center; line-height: 1.5em;}
			#topbar div.right { display: none;}
				#topbar img.left { top: 0;}
		#textlogo { float: none !important; text-align: center;}
		#logo { display: block; margin: 30px auto 0 auto; float: none !important;}
		nav { float: left !important; width: 100%; margin: 15px 0 !important;}
		header nav ul { display: none;}
		nav select { float: left; display: inline-block !important; width: 100%; padding: 1%; border: 1px solid #ccc; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; outline: none;}
		#cta { font-size: 21px; line-height: normal; margin-bottom: 15px !important;}
		.flex-direction-nav { display: none !important;}
		.flex-caption { bottom: 15px !important;}
		.flex-caption h1 { font-size: 1.25em !important;}
		.flex-caption p { font-size: 0.75em !important;}
		article.description.singlecol { width: 100% !important; margin: 0 !important;}
		section.threecol { width: 100% !important; float: left !important; margin: 0 !important;}
		section.leftcol { float: none !important; width: 100% !important;}
		#archive article,
		#single article,
		#page article,
		#home aside.widget { margin: 0 0 30px 0;}
		#home aside.widget { width: 100%; float: none; clear: both;}
		#archive-header { margin: 15px 0;}
			#archive-header h1 { font-size: 1.5em; margin: 0 0 3px 0 !important;}
			#archive-header p { text-align: left; float: none !important; top: 5px; left: 0; font-size: 0.875em; margin: 0 0 10px 0 !important; clear: both;}
		article.singlecol, article.onethirdcol { width: 93.5% !important; clear: both; margin-right: 0 !important;}
		article h2.entry-title { margin: 3px 0 8px 0 !important;} 
			.article-content { width: 100%; float: none;}
				article ul.meta { width: 100%; float: none;}
					article ul.meta li.date { border-bottom: 0; background: none; padding: 0;}
					article ul.meta li.author,
					article ul.meta li.category, 
					article ul.meta li.comments-num, 
					article ul.meta li.tags,
					article ul.meta li.print,
					article ul.meta li.twitter,
					article ul.meta li.linkedin,
					article ul.meta li.google { display: none;}
			#form-wrap { width: 100% !important; margin: 0 0 30px 0;}
			div#contact-info { float: left;}
			div#social-links { float: right;}
			div#contact-info, div#social-links { width: 48.7% !important; margin-right: 0; word-wrap: break-word;}
			nav.portfolio-nav { width: 100%; margin: 0 !important;}
		#sidebar { float: none !important; width: 98.9% !important; margin-bottom: 15px; clear: both;}
			#sidebar-inner, #sidebar .widget { clear: both;}
		footer nav, footer p { margin: 0 !important;}
			footer nav { width: 100%; padding: 5px 0 0 0;}
			footer p { float: none !important; font-size: .55em !important; padding: 0 0 5px 0 !important;}
			#resize_me { display: none;}
		article img { max-width: 260px; }
}

/** 1.4 Wide Mobile (Landscape/480px) **/

@media only screen and (min-width: 480px) and (max-width: 767px) {
	.wrap { width: 460px; padding: 0 10px;}
		#topbar p { float: none !important; text-align: center; font-size: .75em !important;}
		#topbar div.right { display: none;}
			#topbar img.left { top: 0;}
		article article.singlecol, article article.onethirdcol { width: 458px !important;}
		article.description h2 { margin-bottom: 5px !important;}
		article.description p { font-size: 1em !important;}
			article h3 {}
				article p.author { font-size: .75em !important;}
		#archive-header { margin-top: 15px;}
		#archive-header h1 { margin: 0 0 3px 0 !important;}
		ul#tags-nav li {}
		ul.portfolio li { float: left; width: 418px;}
			ul.portfolio li img { width: 420px;}
		.view-grid { left: 198px;}
		.widget_ct_portfolio li a { display: block; height: 266px;}
		.widget_ct_dribbble li:nth-child(2n+2) { margin-right: 10px;}
			.widget_ct_dribbble li:nth-child(4n+4) { margin-right: 0;}
				.widget_ct_dribbble li img { height: 72px; width: 93px;}
		#resize_me { display: none;}
	article img { max-width: 440px; }
}