/* All Responsive
================================================== */
@media only screen and (max-width: 959px) { 
	/*logo*/
	#logo { display: block; float: none; margin: 0; text-align: center; }
	#logo img { display: block; margin: 0 auto; }
	#navigation-toggle { display: block; height: 19px; width: 24px; background: url("images/bars.png"); margin: 0 auto 30px;  }
	#navigation-toggle { color: #8b8b8b; }
	#navigation-toggle:hover { color: #fff; }
	#site-navigation{ display: none; }
	.sidr { position: absolute; position: fixed; top: 0; height: 100%; z-index: 999999; width: 320px; overflow-x: none; overflow-y: auto;font-size: 13px; background: #333; color: #fff; }
	#sidr-main { padding: 40px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
	.sidr.right { left: auto; right: -320px; }
	.sidr.left { left: -320px; right: auto; }
	.sidr a { color: #707070; }
	.sidr a:hover { color: #fff; }
	.sidr ul li ul { border-top: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: -8px; margin-left: 0; margin-top: 10px; 
	}
	.sidr ul li ul li { background: url("images/caret.png") 12px center no-repeat; padding-left: 30px; }
	.sidr-class-toggle-sidr-close { display: block; height: 19px; width: 24px; background: url("images/bars.png"); margin-bottom: 40px; }
	li.sidr-class-menu-item { border-bottom: 1px solid rgba(255,255,255,0.1); padding: 8px 0; }
	ul.sidr-class-sub-menu li.sidr-class-menu-item:last-child { border-color: transparent; }
}
/* Tablet (Portrait)
================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) { 
	/*grid*/
	.container { width: 700px }
	.portfolio-entry.span_1_of_4,
	.footer-box.span_1_of_4 { width: 49.2% }
	.portfolio-entry.span_1_of_4.col-3,
	.footer-box.span_1_of_4.col-3 { clear: both; margin-left: 0; }
	/*main*/
	#post { width: 440px }
	/*sidebar*/
	.sidebar-container { width: 220px; padding-left: 40px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
	/*search*/
	.search-entry-text { width: 280px }
	/*portfolio*/
	#portfolio-cats li { margin-bottom: 6px }
	#portfolio-cats { margin-top: 30px }
}
/* Mobile (Portrait)
================================================== */
@media only screen and (max-width: 767px) { 
	.flex-caption { display: none !important; }
	/*grid*/
	.container { width: 280px }
	.col{ width: 100% !important; margin-left: 0 1!important; }
	/*main*/
	#post { width: 100% }
	.sidebar-container { width: 100%; margin-top: 50px; }
	#post-pagination { position: inherit; right: auto; margin-top: 20px; }
	/*portfolio*/
	#portfolio-cats li { width: 100%; text-align: center; }
	#portfolio-cats li:after { content: ''; margin-right: 0; }
	#portfolio-cats li a { display: block; float: none; }
	.portfolio-entry.span_1_of_3.col-1,
	.portfolio-entry.span_1_of_3.col-2,
	.portfolio-entry.span_1_of_3.col-3 { padding: 0 !important; }
	/*comments*/
	.comment-details { margin-left: 0; text-align: center; }
	.comment-details:after { display: none }
	.comment-avatar { display: inline-block; margin-bottom: 10px; position: inherit; top: auto; left: auto; }
	.comment-date { display: block }
	.comment-break { display: none }
	.comment-reply-link { display: block; padding-bottom: 10px; margin-bottom: 10px; }
	.children { margin: 30px 0 0 }
	.children li.depth-2, .children li.depth-3, .children li.depth-4, .children li.depth-5, .children li.depth-6, .children li.depth-7, .children li.depth-8, .children li.depth-9, .children li.depth-10 { margin: 0 }
	#footer-bottom-left, #footer-bottom-right { float: none; text-align: center; }
	#footer-bottom-right { margin-top: 20px }
	#portfolio-cats li { margin-bottom: 10px }
	.comment-meta .reply { margin-left: 0 }
	.comment-meta .reply a { margin-top: 10px }
	/*callout*/
	#cta-left,
	#cta-right { width: 100%; margin: 0; }
	#cta-right  { margin-top: 20px; }
	/*footer menu*/
	#bottombar .footer-menu > li { float: none; margin: 0 0 20px; }
}
/* Mobile (Landscape)
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) { 
	.container { width: 480px }
	.sidr { width: 480px; }
	.sidr.right { right: -480px; }
}