media-queries.css

/* Tablet and Mobile */
@media only screen and (max-width:768px) {

    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;
    }

    .nav-toggle {
    	display: block;
    }

    .container {
		-webkit-transform: translate(0px, 0px);
		-moz-transform: translate(0px, 0px);
		-o-transform: translate(0px, 0px);
		-ms-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
		-webkit-transition: 0.15s ease;
		-moz-transition: 0.15s ease;
		-o-transition: 0.15s ease;
		transition: 0.15s ease;
	}

	.container.active {
		-webkit-transform: translate(-12em, 0px);
		-moz-transform: translate(-12em, 0px);
		-o-transform: translate(-12em, 0px);
		-ms-transform: translate(-12em, 0px);
		transform: translate(-12em, 0px);
	}

	#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;
	}

	.block-post .box {
		display: none;
	}

	.block-post:hover .featured-image {
		opacity: 1;
	}

	.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;
	}

	.post-content .fitvid {
		margin-bottom: 0;
	}

	.single-array-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;
	}

}


/* Tweaking for Tablet Portrait */
@media only screen and (min-width:768px) and (max-width:768px) {
	.single-array-portfolio #sidebar {
		width: 100%;
	}

	.single-array-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) {
	.nav {
    	display: block;
    }

	#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-array-portfolio .post-box {
		width: 100%;
		margin: 0 0 20px 0 !important;
		padding-bottom: 100%;
	}
}

/* Two Column */

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

/* Three Column */

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