/* Tablet and Mobile */
@media only screen and (max-width:755px) {
    
    body {
    	font: 14px/26px 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
    }
    
    h1 { 
		font-size: 30px;
		line-height: 36px;
	}
	
	h2 { 
		font-size: 24px;
		line-height: 28px;
	 }
	
	h3 { 
		font-size: 18px;
		line-height: 26px;
	}
	
	h4 { 
		font-size: 16px;
		line-height: 20px;
	}
    
    blockquote {
	    font-size: 20px;
	    line-height: 28px;
    }
    
    .pull-quote {
		font-size: 26px;
		line-height: 34px;
		width: 100%;
		float: left;
		margin: 0 35px 25px 0;
	}
    
    .header-wrap {
	    padding: 20px;
    }
    
    .header hgroup {
	    width: 75%;
    }
    
    .header-nav {
	    float: right;
	    position: relative;
	    margin-top: 0;
    }
    
    .nav {
	    display: none;
    }
    
    .select-menu {
	    display: block;
	    width: 100%;
	    float: left;
	    -webkit-appearance: none;
	    height: 30px;
	    opacity: 0;
    }
	
	.header-nav select.select-menu {
	    position: relative;
	    z-index: 10;
	    width: 30px;
	    height: 30px !important;
	    line-height: 26px;
	}
	
	.header-nav span.select {
		display: block;
	}
	
	.mobile-icon {
		position: absolute;
	    width: 30px;
	    height: 30px;
	    font-size: 14px;
	    line-height: 32px;
	    text-indent: 9px;
	    color: #fff;
	    text-align: center;
	    background: #1d1f20;
	    cursor: default;
	    z-index: 1;
	}
	
	.mobile-icon:before {
		font-family: 'FontAwesome';
		-webkit-font-smoothing: antialiased;
		content: "\f0c9";
		position: absolute;
		color: #fff;
		left: 0;
		top: 0;
		color: #777;
	}
	
	.header .search-form {
		position: relative;
		top: -17px;
		padding: 0;
	}
	
	.header .search-form .search-form-input {
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.header .search-form .submit {
		right: -2px;
	}
	
	#wrapper {
		padding: 20px;
	}
	
	.hero {
		margin-bottom: 35px;
		margin-top: 20px;
	}
	
	.hero h2 {
		font-size: 44px;
		line-height: 52px;
		margin-bottom: 0px;
	}
	
	.hero h3 {
		font-size: 22px;
		line-height: 32px;
		padding: 15px;
		margin-right: 0;
		margin-bottom: 0px;
	}
	
	#content {
		width: 100%;
		margin-right: 0;
	}
	
	#sidebar {
		width: 100%;
		margin-top: 40px;
	}
	
	.sidebar-portfolio {
		margin-top: 0px !important;
	}
	
	#sidebar .search-form {
		max-width: none;
	}
	
	.blog .post, .archive .post, .search .post {
		margin-bottom: 25px;
	}
	
	.post .box header {
		width: 85%;
		margin: 30px auto 0 auto;
	}
	
	.post .post-content {
		font: 14px/24px 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
		width: 85%;
		margin: 0 auto 40px auto;
	}
	
	#content p {
		margin-bottom: 20px;
	}
	
	.tax-categories .archive-title {
		width: 100%;
	}
	
	.date-title {
		margin-bottom: 25px;
	}
	
	.entry-title {
		font-size: 40px;
		line-height: 50px;
		padding: 0 0 25px 0;
	}
	
	.intro {
		margin-top: -5px;
		font-size: 16px;
		line-height: 26px;
	}
	
	.post .featured-image, .post .fitvid {
		margin-bottom: 30px;
	}
	
	.single-okay-portfolio .image-wrap li {
		margin-bottom: 5px;
	}
	
	#content .meta-wrap {
		margin: 10px 0 35px 0;
	}
	
	.share a {
		font-size: 18px;
	}
	
	.post-navigation {
		width: 85%;
	}
	
	.post-navigation a {
		width: 100%;
		padding: 10px 0;
		text-align: center;
	}
	
	.post-navigation .next-nav a {
		text-align: center;
		border-top: solid 1px #eee;
	}
	
	.page-template-blocks-php #content .post-nav {
		width: 100%;
		margin-top: 10px;
	}
	
	.comments-wrap {
		width: 85%;
		padding: 35px 0 20px 0;
	}
	
	.commentlist .children li { 
		padding-left: 25px;
	}
	
	#footer {
		margin: 0 0 30px 20px;
		padding-right: 20px;
		line-height: 20px;
	}
	
}	


/* Big Tablet */
@media only screen and (min-width:755px) and (max-width:800px) {
	#wrapper {
		padding: 20px;
	}
	
	.header-wrap {
	    padding: 20px 20px;
    }
	
	#sidebar {
		width: 25%;
	}
	
	#content {
		width: 72%;
		margin-right: 3%;
	}
	
	.comments-wrap, .post-navigation, .post .box header, .post .post-content {
		width: 90%;
	}
	
	#footer {
		margin-left: 20px;
	}
}
 
 
/* Tweaking for Tablet Portrait */
@media only screen and (min-width:755px) and (max-width:768px) {
	
	.single-okay-portfolio #sidebar {
		width: 100%;
	}
	
	.single-okay-portfolio #content {
		width: 100%;
		margin-right: 0;
	}
	
	.pull-quote {
		margin-right: 25px;
		width: 29%;
	}
}	


/* Tweaking for iPad Landscape */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
	#sidebar {
		width: 25%;
	}
	
	#content {
		width: 72%;
		margin-right: 3%;
	}
	
	.block-post .entry-title {
		font-size: 26px !important;
		line-height: 38px !important;
	}
}

/* Responsive Blocks */

@media screen and (min-width:500px) {
	.post-box-wrap {
		max-width: 1600px;
		overflow: hidden;
		color: #fff;
	}
	
	.block-post {
		position: relative;
		top: 0;
		overflow: hidden;
	}
}

/* One Column */

@media screen and (min-width:300px) {
	.block-post, .post-type-archive-okay-portfolio .post-box {
		width: 100%;
		margin: 0 0 20px 0 !important; 
		padding-bottom: 100%;
	}
	
	.block-post .entry-title {
		font-size: 62px !important;
		line-height: 64px !important;
		font-weight: 200 !important;
	}
}

@media screen and (max-width:400px) {
	.block-post .entry-title{
		font-size: 36px !important;
		line-height: 48px !important;
		font-weight: 200 !important;
	}
}

@media screen and (min-width:400px) {
	.block-post .entry-title {
		font-size: 40px !important;
		line-height: 54px !important;
		font-weight: 200 !important;
	}
}

/* Two Column */

@media screen and (min-width:700px) {
	.block-post {
		width: 47%;
		margin: 0 3% 20px 0 !important;
		padding-bottom: 47%;
	}
}

/* Three Column */

@media screen and (min-width:1000px) {
	.block-post {
		width: 31%;
		margin: 0 2.2% 30px 0 !important;
		padding-bottom: 31%;
	}
}