/* 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*/
	#related-posts .read-more{ display: none }
	.flexslider-container .flex-caption {display: none; }

	/*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: 45px }
	#navigation .selector{ width: 100%; color: #777; font-weight: bold; line-height: 45px; text-indent: 20px }
	#navigation .selector{ height: 45px; width: 45px; 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:45px; background:none; width:100%; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:12px; font-weight:500; border:0 !important }

		
	/*display dropdown nav*/
	#navigation .selector { display: inline-block; }
	#top-bar ul.top-menu,
	#navigation ul { display: none; }
	
	/*slider*/
	.flex-caption,
	.flex-control-nav{ display: none; }
	.flex-direction-nav li a.flex-next, .flex-direction-nav li a.flex-prev { width: 25px; height: 25px; line-height: 25px; }
	.flex-direction-nav li a.flex-next { left: 30px; }
	.flex-direction-nav li a.flex-prev { left: 5px; }
}



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

}



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

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

	
	/*main*/
	#post { width: 100% }
	#sidebar{ margin-top: 25px; padding-top: 25px; border-top: double #eee; }
	
	/*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 }
	*/
	
	/*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  }
	
	/*staff*/
	#staff-post-thumbnail{ width: 100%; margin-bottom: 20px }
	
	/*footer*/
	#footer-bottom, #footer-menu{ text-align: center }
	#footer-menu{ margin-top: 5px }
	
	/*shortcodes*/
	.pricing-table > li{ margin-bottom: 25px; }
	
	/*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 }
	
	/*shortcodes*/
	.one-half,
	.one-third,
	.one-fourth,
	.one-fifth,
	.one-sixth,
	.one-two-third,
	.one-three-fourths { width: 100%; margin: 0 0 25px; }
	
	.alert-red.alignright,
	.alert-yellow.alignright,
	.alert-green.alignright,
	.alert-blue.alignright,
	.alert-red.alignleft,
	.alert-yellow.alignleft,
	.alert-green.alignleft,
	.alert-blue.alignleft { width: 100%; margin: 25px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
       
}


/* Mobile (Landscape) = Design for a width of 440px
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	/*blog*/
	#author-bio{ width: 310px }
	.related-entry-excerpt{ display: block }
		
}