/* General
================================================== */
img{ max-width: 100%; }

/*hide responsive menus*/
#top-bar .selector,
#navigation .selector { display: none; }


/* Apply To All Responsive Layouts
================================================== */
@media only screen and (max-width: 959px) {
	
	/*hide stuff*/
	/*.flex-direction-nav{ display: none }*/
	.flexslider-container .flex-caption{ display: none }
	#related-posts .read-more{ display: none }
	
	/*responsive top menu*/
	#top-bar .selector option{ background:#000; -webkit-appearance:none; padding: 10px; border-bottom: 1px solid #333; color: #fff }
	#top-bar .selector, 
	#top-bar .selector span{ cursor: pointer !important; -webkit-font-smoothing:antialiased }
	#top-bar .selector, 
	#top-bar .selector *{ margin:0; padding:0 }
	#top-bar .selector select{ top:0px; left:0px; }
	#top-bar .selector{ width: 100%; text-indent: -9999px; }
	#top-bar .selector{ background: #222 url("../images/top-responsive-nav.png") no-repeat center center; height: 45px; width: 45px; display:-moz-inline-box; display:inline-block; vertical-align:middle; zoom:1; *display:inline; cursor: pointer !important; position:relative; overflow:hidden; color: #fff }
	#top-bar .selector select:focus{outline:0; }
	#top-bar .selector span{ display:block; overflow:hidden; text-overflow:ellipsis;  white-space:nowrap }
	#top-bar .selector select{ position:absolute; height:45px; background:none; width:200px; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;  font-size:12px;  font-weight:500;  border:0 !important }
	
	/*navigation top menu*/
	#navigation .selector option{ background:#f5f5f5; -webkit-appearance:none; padding: 10px; border-bottom: 1px solid #ddd }
	#navigation .selector, 
	#navigation .selector span{ cursor: pointer !important; -webkit-font-smoothing:antialiased }
	#navigation .selector, 
	#navigation .selector *{ margin:0; padding:0 }
	#navigation .selector select{ top:0px; left:0px; height: 60px }
	#navigation .selector{ width: 100%; color: #fff; font-weight: bold; line-height: 60px; text-indent: 20px }
	#navigation .selector{ height: 60px; width: 60px; width: 100%; display:-moz-inline-box; display:inline-block; vertical-align:middle; zoom:1; *display:inline; cursor: pointer !important; position:relative; overflow:hidden; background: url("../images/responsive-drop-arrow.png") right center no-repeat }
	#navigation .selector select:focus{outline:0; }
	#navigation .selector span{ display:block; overflow:hidden;  text-overflow:ellipsis;  white-space:nowrap }
	#navigation .selector select{ position:absolute; height:60px; background:none; width:100%; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:12px; font-weight:500; border:0 !important }

		
	/*display dropdown nav*/
	#top-bar .selector,
	#navigation .selector { display: inline-block; }
	#top-bar ul.top-menu,
	#navigation ul { display: none; }
}



/* #Tablet (Portrait) = Design for a width of 730px
================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	/*blog*/
	.entry-left { float: left; width: 150px }
	.entry-right { float: left; margin-left: 20px; width: 280px; }
	#author-bio{ width: 370px }
	
	
	/*services*/
	#services-template-right{ width: 440px }
	#services-template-left{ margin-bottom: 10px }

}



/* Mobile (Portrait) = Design for a width of 280px
================================================== */

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

	/*hide stuff*/
	.flexslider-container .flex-caption,
	#services-sidebar{ display: none }
	
	/*main*/
	#post { width: 100% }
	
	/*header*/
	#logo{ margin: 0 !important }
	#logo img{ margin: 15px 0 }
	#header-right{ display: none }
	
	/*you can enable the right header by uncommenting this
	#header-right{ position: inherit; text-align: center; margin: 10px auto !important; float: none }
	*/
	
	/*slider*/
	.flex-direction-nav li a.flex-next, .flex-direction-nav li a.flex-prev { width: 20px; height: 34px; line-height: 34px; margin-top: -12px; font-size: 11px}
	
	/*titles*/
	#page-heading h1, #page-heading h2{ width: 100% }
	#single-nav{ position: inherit; text-align: center; margin-top: 10px; margin-left: 20px }
	
	/*blog*/
	.entry-left { float: none; width: 100% }
	.entry-right { float: none; width: 100%; margin-top: 20px; margin-left: 0 }
	#related-posts .alignleft{ max-width: 30% }
	.related-entry-excerpt{ display: none }
	#author-bio{ width: 150px  }
	
	/*services*/
	#services-template-left, #services-template-right{ width: 100% }
	#services-template-left{ margin-bottom: 10px }
	
	/*staff*/
	#staff-post-thumbnail{ width: 100%; margin-bottom: 20px }
	
	/*footer*/
	#callout #callout-text,
	#callout #callout-btn{ width: 100%; float: none }
	#callout #callout-btn{ margin-top: 20px }
	#callout #callout-btn .button{ float: none }
	#footer-bottom, #footer-menu{ text-align: center }
	#footer-menu{ margin-top: 5px }
	
	/*other*/
	#error-page-title{ font-size: 80px; line-height: 80px; margin-bottom: 25px; }
	#error-page-text{ margin-top: 0 }
	
	/*comments*/
	.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 }
       
}


/* Mobile (Landscape) = Design for a width of 440px
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	/*slider*/
	.flex-direction-nav li a.flex-next, .flex-direction-nav li a.flex-prev { width: 30px; height: 44px; line-height: 44px; margin-top: -22px; font-size: 12px }

	
	/*blog*/
	#author-bio{ width: 310px }
	.related-entry-excerpt{ display: block }
		
}