/* 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
	}

	/*navigation top menu*/
	#navigation .selector, 
	#navigation .selector span {
		cursor: pointer !important;
		-webkit-font-smoothing: antialiased
	}

	#navigation .selector {
		width: 100%;
		color: #fff;
		font-weight: bold;
		line-height: 60px;
		text-indent: -9999px
	}

	#navigation .selector {
		height: 45px;
		width: 45px;
		display: -moz-inline-box;
		display: inline-block;
		vertical-align: middle;
		zoom: 1;
		*display: inline;
		cursor: pointer !important;
		position: relative;
		background: #d01d10 url("../images/responsive-menu-btn.png") right center no-repeat;
		opacity: 0.9;
		-moz-opacity: 0.9;
		-webkit-opacity: 0.9;
		-webkit-transition: all .25s linear;
		-moz-transition: all .25s linear;
		-o-transition: all .25s linear;
		-ms-transition: all .25s linear;
		transition: all .25s linear;
	}

	#navigation .selector:hover {
		opacity: 1;
		-moz-opacity: 1;
		-webkit-opacity: 1
	}

	#navigation .selector select:focus {
		outline: 0;
	}

	#navigation .selector span {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}

	#navigation .selector select {
		position: absolute;
		top: 0px;
		left: 0;
		height: 60px;
		background: none;
		width: 100%;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		font-size: 13px;
		font-weight: 500;
		color: #666 !important;
		cursor: pointer;
	}
	#navigation .selector select:hover{
		background: #d01d10;
	}
	#navigation .selector option {
		background: #000;
		-webkit-appearance: none;
		padding: 10px;
		border-bottom: 1px solid #222
	} 
	#navigation .selector, 
	#navigation .selector * {
		margin: 0;
		padding: 0
	}

		
	/*display dropdown nav*/
	#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) {
	
	/*grid*/
	.outerbox {
		width: 730px;
	}

	.grid-1 {
		width: 680px;
	}

	.grid-2 {
		width: 330px;
	}

	.grid-3 {
		width: 214px;
		margin-right: 19px;
		margin-bottom: 19px;
	}

	.grid-4 {
		width: 155px;
	}

	.grid-5 {
		width: 120px;
	}

	.grid-6 {
		width: 100px;
		margin-right: 16px;
		margin-bottom: 16px;
	}
	
	#post .grid-1{
		width: 440px;
	}
	
	#post .grid-2{
		width: 210px;
	}
	
	#post .grid-3{
		width: 134px;
		margin-right: 19px;
		margin-bottom: 19px;
	}
	
	#post .grid-4{
		width: 95px;
	}
	
	#post .grid-5{
		width: 72px;
	}
	
	#post .grid-6{
		width: 60px;
		margin-right: 10px;
		margin-bottom: 10px;
	}
	
	
	
	/*grid edits*/
	.hp-highlight.grid-4 {
		width: 330px;
	}

	.staff-entry.grid-6 .staff-entry-description, .staff-entry.grid-5 .staff-entry-description {
		display: none;
	}
	
	
	/*landing page*/
	#landing-page-content{
		width: 500px;
		font-size: 32px;
		top: -600px;
		left: 50%;
		margin-left: -250px;
	}
	

	/*main*/
	#post {
		width: 440px;
	}

	#sidebar {
		width: 160px;
	}
	
	
	/*portfolio*/
	#single-portfolio-media{
		width: 400px;
	}
	#single-portfolio-info{
		width: 240px;
	}
	
			
	/*blog*/
	.loop-entry-two .loop-entry-thumbnail {
		width: 120px;
	}
	.loop-entry-two .entry-right{
		width: 280px;
	}

	#author-bio {
		width: 350px;
	}
	
	/*slider*/
	#header-slider .flexslider .slide-inner{
		width: 690px;
	}
	
}



/* Mobile (Portrait) = Design for a width of 280px
================================================== */

@media only screen and (max-width: 767px) {
	
	/*grid*/
	.outerbox {
		width: 280px;
	}

	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, #post .grid-1, #post .grid-2, #post .grid-3, #post .grid-4, #post .grid-5, #post .grid-6 {
		width: 230px;
	}
	
	/*main*/
	#post {
		width: 100%;
	}

	#sidebar {
		width: 100%;
		margin-top: 25px;
		padding-top: 25px;
		padding-left: 0;
		border-top: 3px solid #ddd;
		background: none;
	}
	
	
	/*search*/
	#breadcrumbs-wrap{
		display: none;
	}
	
	/*header*/
	#logo {
		margin: 0 !important;
		max-width: 70%;
	}

	#header-right {
		display: none;
	}
	
	
	/*titles*/
	#page-heading h1, #page-heading h2 {
		width: 100%;
	}
	
	/*landing page*/
	#landing-page-content{
		width: 150px;
		font-size: 21px;
		top: -600px;
		left: 50%;
		margin-left: -150px;
	}
	#landing-page-content .button{
		font-size: 12px;
		float: none;
	}

	
	/*portfolio*/
	#single-portfolio-media{
		float: none;
		width: 100%;
		padding-bottom: 25px;
		margin-bottom: 25px;
		border-bottom: 1px solid #e6e6e6;
	}
	#single-portfolio-info{
		float: none;
		width: 100%;
	}
	
	
	/*blog*/
	.loop-entry-two .loop-entry-thumbnail {
		width: 150px;
	}
	.loop-entry-two .entry-right{
		width: 100%;
	}
	#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{ border-top-width: 3px; }
	#footer-bottom, #footer-menu {
		text-align: center;
	}

	#footer-menu {
		margin-top: 5px
	}
	
	
	/*slider*/
	.flexslider-container .flex-caption {
		display: none;
	}

	.flex-control-nav {
		bottom: 15px;
		right: 15px;
	}
	
	/*slider*/
	#header-slider .flexslider .slide-inner{
		width: 230px;
	}
	#header-slider .flex-control-nav,
	.flexslider .flex-direction-nav{
		display: none;
	}
	
	
	/*shortcodes*/
	.pricing-table > li {
		margin-bottom: 25px;
	}
	
	/*404 page*/
	#error-page {
		margin: 25px 0
	}
	
	/*landing page*/
	#landing-page-content{
		padding: 25px;
	}
	
	/*contact page*/
	#contact-map .googlemap{
		height: 100px !important;
	}
	
	/*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*/
	.callout-text{
		float: none;
		margin: 0;
	}
	.callout .button{
		position: inherit;
		top: auto;
		left: auto;
		right: auto;
		margin-top: 20px;
	}
	.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) {
	
	/*grid*/
	.outerbox {
		width: 440px;
	}

	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, #post .grid-1, #post .grid-2, #post .grid-3, #post .grid-4, #post .grid-5, #post .grid-6 {
		width: 390px;
	}
	
	/*landing page*/
	#landing-page-content{
		width: 300px;
		font-size: 24px;
		top: -600px;
		left: 50%;
		margin-left: -150px;
	}
	#landing-page-content .button{
		font-size: 14px;
		float: none;
	}
	
	/*blog*/
	.loop-entry-two .loop-entry-thumbnail {
		width: 100px;
	}
	.loop-entry-two .entry-right{
		width: 260px;
	}
	#author-bio {
		width: 310px;
	}

	.related-entry-excerpt {
		display: block;
	}
	
	/*slider*/
	#header-slider .flexslider .slide-inner{
		width: 390px;
	}
	.flexslider .flex-direction-nav{
		display: block;
	}
	
}