/*-----------------------------------------------------------------------------------*/
/* Framework: Media Queries for Standard Devices */
/* http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
/*-----------------------------------------------------------------------------------*/

/* All Mobile ----------- */
@media only screen and (min-width : 240px) and (max-width : 1024px) {

	/* iOS and WinMobile text mobile-optimize j.mp/textsizeadjust */
	html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }

	#navi .custom-menu, #navi .menu ul { display: none; }

	select.responsive_menu {
		display: inline-block;
		background: #fdfdfd url(../images/sprites.png) 12px -167px no-repeat;
		width: 50px;
		border: 1px solid #d8dbdf;
		padding: 10px;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		-o-border-radius: 2px;
		border-radius: 2px;
		color: #8f969c;
		cursor: pointer;
		-webkit-appearance: none;
		-moz-appearance: none;
		-o-appearance: none;
		text-indent: -999999px !important;
	}

	select.responsive_menu:hover {}

	#navi { height: auto; }

	div.menu-notice {
		display: inline-block;
		text-align: center;
		background-color: #f7f8f9;
		padding: 12px;
		margin-top: 25px;
	}

	.widget-latest-tweets { margin-bottom: 25px !important; }

	.single-project.layout-1col #primary, .single-project.layout-1col #secondary { display: none; }

}


/* iPads (landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {
	#navi .custom-menu, #navi .menu ul { display: block; }
	select.responsive_menu, div.menu-notice { display: none; }
}


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

	#header, #footer, #main, #topbar, #sidebar-footer { min-width: 620px; }

	.wrapper { width: 620px; }

	#content { border-bottom: 1px solid #d8dbdf; margin-bottom: 40px; padding-bottom: 20px; }
	#content, #home-content { border-bottom: 1px solid #d8dbdf; margin-bottom: 40px; /*padding-bottom: 20px;*/ }

	#primary, #secondary { float: left; }
	#primary { margin-right: 80px; }
	#primary li.widget-container { margin: 0 80px 40px 0; }
	#primary li.widget-container:nth-child(even) { margin-right: 0; }
	
	li.widget-container { float: left; }
	span.topbar_text { float: left; clear: left; margin-top: 8px; width: 100%; }

	#content.portfolio { border-bottom: none; margin-bottom: 0; }
	#portfolios, #projects { max-width: 640px !important; }
	#portfolios .element, #projects .element { width: 193px; margin-bottom: 30px; /*height: auto !important;*/ /* !important */ }
	#portfolios .element img, #projects .element img { width: 193px; height: 135px; }
	#portfolios .element span.overlay, #projects .element span.overlay { width: 193px; height: 135px; }

	#sidebar-footer .widget-area { float: left; clear: right; display: inline-block; padding-right: 0; margin-right: 80px; }
	#sidebar-footer .widget-area:nth-child(even) {}
	#sidebar-footer #second.widget-area { margin-right: 0; }
	#sidebar-footer #third.widget-area { margin-left: 0; }

	#site-generator { float: left; margin-bottom: 8px; }
	#footer .custom-menu { margin-top: 5px; }
	#footer .custom-menu ul li { margin-right: 20px; margin-left: 0; }

	.layout-2cl #secondary { clear: right; }
	.layout-1col #content { width: 620px; }

	.single-project .hentry { margin-right: 0; margin-bottom: 30px; }

	.single-project #content { border-bottom: none; margin-bottom: 0; }

	.single-project #secondary { display: none; }

	#project-content { width: 620px; }

	#project-details { float: left; width: 100%; border-bottom: 1px solid #d8dbdf; margin-bottom: 40px; padding-bottom: 40px; }

	.project-link { width: 260px; }

	#home-quote .wrapper, #portfolio-quote { width: 580px; }

}


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

	#header, #footer, #main, #topbar, #sidebar-footer  { min-width: 440px; }

	.wrapper { width: 440px; }
	#primary, #secondary { float: left; clear: left; width: 440px; }
	#content, #home-content { width: 440px; border-bottom: 1px solid #d8dbdf; margin-bottom: 40px; padding-bottom: 20px; }
	#home-content:last-of-type { border-bottom: none; margin-bottom: 0px; padding-bottom: 0px; }
	#topbar { display: none; }

	#portfolios { max-width: 440px !important; }
	#portfolios .element, #projects .element {
		height: auto !important; /* !important */
		width: 440px !important;
		border-bottom: 1px solid #d8dbdf;
		margin-bottom: 15px !important;
		padding-bottom: 15px;
		margin-right: 0;
		clear: both;
	}
	#portfolios .element:last-of-type, #projects .element:last-of-type { border-bottom: none; padding-bottom: 0; }
	#portfolios h3.entry-title, #projects h3.entry-title { margin-top: 10px; margin-bottom: 10px; }
	#portfolios p.project-description, #projects p.project-description { float: left; max-width: 195px; margin-right: 10px; }
	
	#portfolios .element img, #projects .element img { float: left; margin-right: 20px; }
	#portfolios .element img, #portfolios .element span.overlay, #projects .element img, #projects .element span.overlay { width: 193px; height: 135px; }
	
	/**/
	#projects { max-width: 440px !important; float: left; }
	#projects .element { width: 200px; margin-bottom: 30px; }
	#projects .element:last-of-type {}
	#projects h3.entry-title {}
	#projects p.project-description {}
	#projects .element img { width: 200px; height: 140px; }
	#projects .element span.overlay { width: 200px; height: 140px; }
	#projects .project_label, .project_label { left: 0; right: auto; }

	#home-message .wrapper { width: 440px; }
	#home-message .custom-menu ul li { display: block; }
	#home-message .custom-menu ul.submenu { display: none; }

	.page-template-page-templateshomepage-php #header .wrapper { border-bottom: 1px solid #d8dbdf; }
	.page-template-page-templateshomepage-php #main { padding-top: 40px; }

	#sidebar-footer .widget-area { width: 100%; float: left; margin-bottom: 40px; padding-right: 0; margin-right: 0; }
	#sidebar-footer .widget-area:last-child { border-bottom: none; }
	#sidebar-footer #second { width: 100%; margin-left: 0px; }
	#sidebar-footer #third { width: 100%; margin-right: 0; margin-left: 0px; }	

	#site-generator { float: left; text-align: left; }
	#footer .custom-menu ul li { margin-left: 0px; display: block; margin-bottom: 2px; }
	p.footer-text { margin-top: 20px; }

	#player-audio, #player-video, .mejs-container, .mejs-overlay, .mejs-poster { width: 440px !important; }
	#player-video, .format-video .mejs-container, .format-video .mejs-overlay { height: 236px !important; } /* child */

	.search-results .search-thumb, .search-results .search-thumb span.overlay { display: none; }

	#footer .custom-menu { margin-top: 10px; margin-bottom: 0; }

	.contact-name, .contact-email { width: 440px; }

	.layout-1col #content { width: 440px; }

	#project-content { width: 440px; }

	.single-project .hentry { width: 440px; margin-right: 0; margin-bottom: 30px; }

	.single-project #content { border-bottom: none; margin-bottom: 0; }
	
	.single-project #secondary { display: none; }

	#project-details {
		float: left;
		clear: left;
		width: 100%;
		padding: 0;
		margin-bottom: 40px;
		border-bottom: 1px solid #d8dbdf;
		padding-bottom: 40px;
	}

	.project-link { float: left; clear: left; width: 260px; }

	span.comments-link { float: left; display: block; margin-top: 7px; width: 100%; }

	.commentlist .children li.comment { margin-left: 0; }

	#home-quote .wrapper,
	.page-template-page-templateshomepage-2col-php #home-quote .wrapper,
	#portfolio-quote { width: 440px; }

	.related-item {
		height: auto !important; /* !important */
		width: 440px;
		border-bottom: 1px solid #d8dbdf;
		padding-bottom: 5px;
		margin-bottom: 15px;
		margin-right: 0;
	}
	.related-item:last-of-type { border-bottom: none; padding-bottom: 0; }
	.related-item img { float: left; margin-right: 20px; }
	#related-posts p.desc, #related-projects p.desc { float: left; max-width: 195px; margin-right: 10px; }

}


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

	#header, #footer, #main, #topbar, #sidebar-footer  { min-width: 300px; }

	.wrapper { width: 300px; /*background-color: #fc0;*/ }
	#primary, #secondary { float: left; clear: left; width: 300px; }
	#home-content { width: 300px; }
	#content { width: 300px; }

	#home-message .wrapper { width: 300px; }

	#player-audio, #player-video, .mejs-container, .mejs-overlay, .mejs-poster { width: 300px !important; }
	#player-video, .format-video .mejs-container, .format-video .mejs-overlay { height: 169px !important; } /* child */

	.contact-name, .contact-email, .contact-message { width: 299px; }

	.layout-1col #content { width: 300px; }
	
	#portfolios { max-width: 300px !important; }
	#portfolios .element {
		height: auto !important; /* !important */
		width: 300px !important;
		border-bottom: none;
		margin-bottom: 30px !important;
		padding-bottom: 0;
		margin-right: 0;
	} 
	#portfolios .element:last-of-type { border-bottom: none; padding-bottom: 0; }
	#portfolios h3.entry-title { margin-top: 20px; border-bottom: none; padding: 0; margin-bottom: 10px; float: none; }
	#portfolios p.project-description { float: none; max-width: 100%; width: 100%; margin-right: 0; }
	#portfolios .element img,
	.home.blog #portfolios .element img,
	.page-template-page-templateshomepage-2col-php #portfolios .element img { width: 300px; height: 210px; float: none; margin-right: 0; }
	#portfolios .element span.overlay,
	.home.blog #portfolios .element span.overlay,
	.page-template-page-templateshomepage-2col-php #portfolios .element span.overlay { width: 300px; height: 210px; }
	/**/
	#projects { max-width: 300px !important; float: left; }
	#projects .element { width: 300px; margin-bottom: 30px; }
	#projects .element:last-of-type {}
	#projects p.project-description { max-width: 300px; }
	#projects .element span.overlay { width: 300px; height: 210px; }
	#projects .project_label, .project_label { display: none; }

	#portfolios h3.entry-title, #projects h3.entry-title {
		margin-top: 20px;
		border-bottom: none;
		padding: 0;
		margin-bottom: 10px;
	}

	#projects .element { width: 300px !important; }

	#portfolios .element img, #projects .element img { width: 300px; height: 210px; float: none; margin-right: 0; }
	/**/

	#project-content { width: 300px; }

	.single-project .hentry { width: 300px; margin-bottom: 30px; }

	.commentlist .children li.comment { margin-left: 0; }

	.format-gallery .gallery-thumb { margin-right: 0; }

	#home-quote .wrapper,
	.page-template-page-templateshomepage-2col-php #home-quote .wrapper,
	#portfolio-quote { width: 300px; }

	#related-posts, #related-projects { max-width: 300px; width: 100%; }
	.related-item { margin-right: 0; width: 300px; }
	.related-item span.overlay { width: 100px; height: 70px; float: right; right: 0;}
	.related-item img { width: 100px; height: 70px; float: right; margin-right: 0px; }
	#related-posts h4.entry-title, #related-projects h4.entry-title { margin-top: 0; }
	#related-posts p.desc, #related-projects p.desc { max-width: 175px; }

}


/*-----------------------------------------------------------------------------------*/
/* Design */
/*-----------------------------------------------------------------------------------*/

/* All Mobile ----------- */
@media only screen and (min-width : 240px) and (max-width : 1024px) {

	#navi { background-color: #fff; }
	#content, #home-content { border-bottom: none; padding-bottom: 30px; margin-bottom: 20px; }
	#secondary { margin-bottom: 30px; }

	.single-project .project.hentry { margin-bottom: 0px; }

	.single-project #content { margin-bottom: 30px; }

	select.responsive_menu {
		background: #171c20 url(../images/sprites.png) 12px -167px no-repeat;
		border: 1px solid #171c20;
		-webkit-border-radius: 1px;
		-moz-border-radius: 1px;
		-o-border-radius: 1px;
		border-radius: 1px;
	}

}


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

	#navi { background-color: transparent; }

	#home-message .wrapper { padding-left: 0; max-width: 620px; }

	#portfolios .element, #projects .element { padding: 10px; margin-right: 10px !important; width: 180px !important; }

	#portfolios .element span.overlay,
	#projects .element span.overlay,
	#portfolios .element img,
	#projects .element img { width: 180px; height: 126px; }
	
	#primary span.view, #secondary span.view { top: 41%; left: 39%; }

	.project_label { top: 10px; right: 10px; }

	#portfolios span.view, #projects span.view { top: 40%; left: 36.5%; }

	.tax-portfolios p.portfolio-header-description, .tax-portfolios #projects-home p.portfolio-header-description { float: left; text-align: left; margin-top: 10px; }

	.tax-portfolios ul#filters, .tax-portfolios span.ooops { float: left; }

	#portfolio-home .wrapper, #projects-home .wrapper { margin-bottom: 0; }

	#content { border-bottom: none; margin-bottom: 20px; padding-bottom: 30px; }

	#primary { margin-right: 20px; width: 260px; }

	#secondary { width: 260px; margin-bottom: 30px; }

	#primary span.overlay, #secondary span.overlay { width: 260px; height: 182px; }

	#project-details {
		padding: 30px !important;
		width: 560px;
		margin-top: -2px;
		margin-bottom: 20px;
		border-bottom: none;
	}

}


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

	#content, #home-content, #primary, #secondary { width: 440px; padding: 20px; }

	.page-template-page-templateshomepage-php #header .wrapper { border-bottom: none; }

	.page-template-page-templateshomepage-php #main { padding-top: 0px; }

	#home-message .wrapper { padding-left: 0px; width: 440px; }

	#home-quote .wrapper, #portfolio-quote { width: 400px; }

	#portfolios { max-width: 440px !important; }
	
	#portfolios .element, #projects .element { padding: 10px; border-bottom: none; max-width: 420px; margin-bottom: 10px !important; }
	
	#portfolios .element:last-of-type, #projects .element:last-of-type { padding-bottom: 10px; }
	
	p.portfolio-header-description, #projects-home p.portfolio-header-description { float: left; text-align: left; width: auto; margin-top: 10px; }
	
	#portfolios h3.entry-title { float: none; }

	#projects { max-width: 440px !important; }

	#projects .element { width: 480px; margin-right: 0; height: auto !important; }
	
	#projects .element img { width: 193px; height: 135px; float: left; margin-right: 20px; }
	
	#projects h3.entry-title { margin-top: 10px; margin-bottom: 10px; }

	#projects p.project-description { float: left; max-width: 195px; margin-right: 10px; }

	#projects .element span.overlay { width: 193px; height: 135px; }

	#projects footer.entry-meta { margin-top: 0; }

	.single-project .project.hentry { padding: 20px; width: 400px; }

	.single-project #content, .single-project.layout-1col #content { max-width: 400px; }
	
	#projects .element { max-width: 530px; margin-right: 0; border-bottom: none !important; border-right: none !important; border-left: none !important; padding: 15px 0 0 0; /*height: auto !important;*/ }
	
	.project_label { top: 15px; left: 0px; background-color: transparent; }

	.tax-portfolios #projects .element { padding: 10px; }
	.tax-portfolios #projects .element:hover { border-color: none; }
	.tax-portfolios .project_label { top: 10px; left: 10px; }
	.tax-portfolios #projects h3.entry-title { margin-top: 13px; }

	#projects .element:hover { border-color: #D8DBDF; }

	#portfolios span.view, #projects span.view { top: 40%; left: 36.5%; }

	#sidebar-footer #first, #sidebar-footer #second { border-bottom: 1px solid #d8dbdf; }

	span.comments-link { display: none; }

	ul#filters, span.ooops { float: left; }

	.related-item { width: 440px; }

	#related-posts p.desc, #related-projects p.desc { max-width: 145px; }

	#project-details { width: 400px; margin-top: -2px; padding: 20px !important; padding-top: 10px !important; border-bottom: none; margin-bottom: 20px; }

}


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

	#content, #home-content, #primary, #secondary { width: 280px; padding: 20px; }

	#home-message .wrapper { width: 300px; }

	#portfolios, #projects { max-width: 302px !important; }

	#portfolios .element,
	#projects .element {
		border: 1px solid #D8DBDF !important;
		padding: 10px;
		width: 280px !important;
		margin-bottom: 20px !important;
		margin-right: 0;
		-webkit-border-radius: 1px;
		-moz-border-radius: 1px;
		-o-border-radius: 1px;
		border-radius: 1px;
	}

	#portfolios .element { border: none!important; }

	#portfolios .element span.overlay, #projects .element span.overlay { width: 280px; height: 197px; }

	#portfolios .element img, #projects .element img { width: 280px; height: 197px; float: none; margin-right: 0; }
	
	#projects p.project-description { float: left; max-width: 100%; margin-right: 10px; }
	
	#projects h3.entry-title, .tax-portfolios #projects h3.entry-title { margin-top: 25px; }

	#portfolios span.view, #projects span.view { top: 43%; left: 41%; }

	p.portfolio-header-description, #projects-home p.portfolio-header-description { width: 290px; }

	.single-project .project.hentry { width: 260px; }

	.single-project #content, .single-project.layout-1col #content { max-width: 260px; }

	#home-quote .wrapper, #portfolio-quote { width: 260px; }

	.wrapper { width: 300px; }

	p.portfolio-header-description, #projects-home p.portfolio-header-description { width: 270px; }

	#related-posts span.view, #related-projects span.view { top: 33%; left: 24%; }
	
	#sidebar-footer span.view { top: 42%; left: 40%; }
	
	#primary .widget-portfolio img.portfolio-image,
	#secondary .widget-portfolio img.portfolio-image,	
	#primary .widget-blog img,
	#secondary .widget-blog img { width: 280px; height: 196px; }

	#primary span.overlay, #secondary span.overlay  { width: 280px; height: 196px;  }

	span.by-author { margin-left: 15px; }

	span.cat-links { margin-left: 65px; }

	.widget-blog span.by-author { margin-left: auto }

	.related-item { width: 260px; }

	#project-details { width: 260px; }

	.project_label { top: 10px; right: 10px; left: auto; background-color: transparent; }

	#tagline {
		float: none;
		text-align: right;
		margin-top: 0;
		margin-bottom: 35px;
		max-width: 160px;
		float: right;
	}

}