
/*-----------------------------------------------------------------------------------*/
/* 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; }

	#content {
		border-bottom: 1px solid #d8dbdf;
		margin-bottom: 40px;
	}

	#content.portfolio,
	.page-template-page-templatesblog-masonry-php #content {
		border-bottom: none;
		margin-bottom: 0;
	}

}


/*-----------------------------------------------------------------------------------*/
/* iPads (landscape) */
/*-----------------------------------------------------------------------------------*/

@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {
	
	div.menu-notice { display: none; }

}


/*-----------------------------------------------------------------------------------*/
/* iPads (portrait) */
/*-----------------------------------------------------------------------------------*/

@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
/* --- Issue with 13" displays. If you remove the orientation it's ok on 13 but it falls on iPad. --- */
	
	.layout-2cl #secondary { clear: right; float: right; }

	#content, #project-content { width: 100%; }

	#primary, #secondary { /*width: 47.8%;*/ width: 100%; }
	#primary { float: left; }

	#site-info { width: 100%; }

	#site-generator {
		float: left;
		text-align: left;
		margin-bottom: 10px;
		width: 100%;
	}

	#footer .custom-menu ul li { margin-left: 0; margin-right: 20px; }

	p.footer-text.right { float: left; }

	/*#portfolios .element,*/
	#projects .element,
	.portfolio2col #projects .element,
	.portfolio4col #projects .element { width: 46.4%; }

	.page-template-page-templatesblog-masonry-sidebar-php #content.masonry { width: 104%; }

	.page-template-page-templatesblog-masonry-php #content .hentry,
	.page-template-page-templatesblog-masonry-sidebar-php #content .hentry {
		width: 43%;
		padding: 2%;
		margin-right: 2%;
	}

	.single-project #related-posts,
	.single-project #related-projects {
		border-top: 1px solid #D8DBDF;
		padding-top: 40px;
	}

}


/*-----------------------------------------------------------------------------------*/
/* iPads (all) */
/*-----------------------------------------------------------------------------------*/

@media only screen and (min-width : 768px) and (max-width : 1024px) {

	/***** Navi - Super Important! *****/

	#navi { float: left; clear: left; margin-top: 25px; margin-left: -12px; }
	#navi ul { width: 100%; display: block; height: auto; }
	/*#navi ul li:first-child a { padding-left: 0; }*/
	#navi ul ul li:first-child a { padding-left: 7px; }

	/**/

	#sidebar-footer .widget-area,
	#sidebar-delta .widget-area { width: 47.8%; }

	#sidebar-footer #second,
	#sidebar-delta #second {
		margin-right: 0;
		padding-right: 0;
	}

	.archives-content,
	.page-template-page-templatesarchives-sidebar-php .archives-content {
		width: 44.5%;
		margin-right: 40px;
	}

}


/*-----------------------------------------------------------------------------------*/
/* Smartphones (portrait + landscape) */
/*-----------------------------------------------------------------------------------*/

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

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

	#navi { float: none; /*height: auto;*/ }

	/**/

	div.menu-notice {
		display: inline-block;
		text-align: center;
		background-color: #fff;
		padding: 2%;
		font-size: 90%;
		line-height: 1.2rem;
	}

	select.responsive_menu {
		display: inline-block;
		background: #202223 url(../images/sprites.png) 12px -167px no-repeat;
		width: 50px;
			height: 39px;
		border: 1px solid #202223;
		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;
		float: right;
		-webkit-transition: all .2s linear 0s;
		-moz-transition: all .2s linear 0s;
		-o-transition: all .2s linear 0s;
		transition: all .2s linear 0s;
	}

	#navi { height: 39px; }

	select.responsive_menu:hover {
		background-color: #111314;
		border-color: #111314;
	}

	/**/

	h1.entry-title,
	h1.page-title {
		font-size: 36px;
		line-height: 2.5rem;
	}

	h2.entry-title {
		font-size: 26px;
		line-height: 2rem;
	}

	.wrapper { width: 85%; }

	#content, #project-content { width: 100%; }

	span.topbar_text {
		width: 100%;
		margin-bottom: 15px;
	}

	#sidebar-header {
		float: left;
		width: 100%;
	}

	#site-info { width: 100%; }

	#site-generator {
		float: left;
		text-align: left;
		margin-bottom: 10px;
	}

	#footer .custom-menu ul li {
		margin-left: 0;
		display: block;
		margin-bottom: 3px;
	}

	p.footer-text.right { float: left; }

	#home-message .custom-menu ul li { display: block; }

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

	#primary, #secondary { width: 100%; }
	#primary { float: left; }

	#sidebar-footer .widget-area,
	#sidebar-delta .widget-area { width: 100%; }

	#sidebar-footer #first, #sidebar-footer #second, #sidebar-footer #third,
	#sidebar-delta #first, #sidebar-delta #second, #sidebar-delta #third {
		margin-right: 0;
		padding-right: 0;
	}

	.archives-content { width: 94%; }

/*	#portfolios .element,*/
	#projects .element,
	.portfolio2col #projects .element,
	.portfolio4col #projects .element {
		width: 46.4%;
	}

	.page-template-page-templatesblog-masonry-php #content .hentry,
	.page-template-page-templatesblog-masonry-sidebar-php #content .hentry {
		width: 90.9%;
		padding: 2.5%;
	}

	.related-item { width: 46.4%; }

	span.posted-on, span.by-author, span.cat-links, span.tag-links, span.comments-link { display: block; }

	span.comments-div { display: none; }

	ul#filters li { display: block; }

	ul#filters span.sep { display: none; }

}


/*-----------------------------------------------------------------------------------*/
/* Smartphones (portrait only) */
/*-----------------------------------------------------------------------------------*/

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

	#logo { max-width: 75%; }

	#primary, #secondary { float: left; width: 100%; }

	#portfolios .element,
	#projects .element,
	.portfolio2col #projects .element,
	.portfolio4col #projects .element {
		width: 95.2%;
		margin-right: 0;
	}

	.page-template-page-templatesblog-masonry-php #content .hentry,
	.page-template-page-templatesblog-masonry-sidebar-php #content .hentry {
		width: 86.9%;
		padding: 4.5%;
	}

	.related-item {
		width: 95.9%;
		margin-right: 0;
	}

}


/* Mobile devices */
@media (max-width: 359px) {

	.gallery {
		margin-left: 0;
	}

	.gallery .gallery-item,
	.gallery-columns-2.gallery-size-thumbnail .gallery-item {
		max-width: none;
		width: 49%;
		width: -webkit-calc(50% - 4px);
		width:         calc(50% - 4px);
	}

	.gallery-columns-1.gallery-size-medium,
	.gallery-columns-1.gallery-size-thumbnail,
	.gallery-columns-2.gallery-size-thumbnail,
	.gallery-columns-3.gallery-size-thumbnail {
		display: block;
	}

	.gallery-columns-1 .gallery-item,
	.gallery-columns-1.gallery-size-medium .gallery-item,
	.gallery-columns-1.gallery-size-thumbnail .gallery-item {
		text-align: center;
		width: 98%;
		width: -webkit-calc(100% - 4px);
		width:         calc(100% - 4px);
	}

	.gallery-columns-3 .gallery-item:nth-of-type(3n),
	.gallery-columns-5 .gallery-item:nth-of-type(5n),
	.gallery-columns-7 .gallery-item:nth-of-type(7n),
	.gallery-columns-9 .gallery-item:nth-of-type(9n) {
		margin-right: 4px;
	}

	.gallery br {
		display: none;
	}

	.gallery .gallery-item:nth-of-type(even) {
		margin-right: 0;
	}

}


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

}


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

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

	/*#header.clone {
		display: none;
	}*/

	/*#projects h3.project-title,
	#projects p.project-description { padding-left: 10%; padding-right: 10%; }*/

	#portfolio-quote p { margin-bottom: 30px; float: none; }

}



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



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

}



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

	#home-message h1 {
		font-size: 5.5rem;
	}

	.col1 { width: 100%; }

	.col1.right {
		width: 100%;
		float: left;
	}

}



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

	article .entry-content h2 {
		font-size: 26px;
	}

	.portfolio h1.entry-title,
	.single-project h1.entry-title,
	.single-post h1.entry-title {
		font-size: 36px;
		line-height: 2.5rem;
		margin-bottom: 1530pxpx;
	}

	.format-quote h1.quote {
		line-height: 30px;	
	}

	.format-quote h1.quote a {
		font-size: 21px;
		line-height: 10px;	
	}

	#home-message h1 {
		font-size: 4.5rem;
	}

	.col1 {
		width: 100%;
		margin-bottom: 30px;
	}

	.col1.right {
		width: 100%;
		float: left;
	}

	#portfolio-home .element {
		width: 26%;
	}

	.page-template-page-templatesblog-fullwidh-php header.entry-meta, .blog header.entry-meta {
		width: 100%;
	}

	.page-template-page-templatesblog-fullwidh-php .entry-content, .page-template-page-templatesblog-fullwidh-php footer.entry-meta, .blog .entry-content, .blog footer.entry-meta {
		width: 100%;
		float: left;	
	}

}



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

	#home-message h1 {
		font-size: 2.7rem;
	}

	#portfolio-home .element {
		width: 95.2%;
		border-right: none;
		border-bottom: 1px solid #E5E9EE;
		padding-bottom: 25px;
		margin-bottom: 25px;
		padding-right: 0;
		margin-right: 0;	
	}

}



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


