/* Tablet and Mobile */
@media only screen and (max-width:768px) {
    
    body {
    	font: 12px/22px VestaStd-Regular; sans-serif;
    }
    
    h1, h2, h3, h4, h5, h6 {
	    margin-bottom: 15px;
    }
    
    h1 { 
		font-size: 24px;
		line-height: 28px;
	}
	
	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: 24px;
		line-height: 34px;
		width: 100%;
		float: left;
		margin: 0 35px 25px 0;
	}
    
    .header-wrap {
	    padding: 20px 0 20px 0;
    }
    
    .header hgroup {
	    width: 32%;
    }
    
    .logo-text {
	    padding-left: 1000px;
    }
    
    .header-nav {
	    float: right;
	    position: relative;
	    margin-top: 0px;
    }
    
    .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: 24px;
	}
	
	.header-nav span.select {
		display: block;
	}
	
	.mobile-icon {
		position: absolute;
	    width: 30px;
	    height: 30px;
	    font-size: 14px;
	    line-height: 30px;
	    text-indent: 9px;
		color: #777;
	    text-align: center;
	    cursor: default;
	    z-index: 1;
	     -webkit-border-radius: 30px; 
	    -moz-border-radius: 30px; 
	    border-radius: 30px;
	}
	
	.mobile-icon:before {
		font-family: 'FontAwesome';
		-webkit-font-smoothing: antialiased;
		content: "\f0c9";
		position: absolute;
	    color: #201548;
		left: 0;
		top: 0;
		-webkit-transition: .07s ease-in;  
		-moz-transition: .07s ease-in;
		transition: .07s ease-in; 
	}
	
	.header-nav div:hover .mobile-icon:before {
		color: #000000;
		-webkit-transition: .07s ease-in;  
		-moz-transition: .07s ease-in;
		transition: .07s ease-in; 
	}
	
	.search-toggle {
		margin-top: 0px;
	    font-size: 14px;
	}
	
	.hero {
		padding: 7% 0;
		margin-top: 0;
		overflow: hidden;
	}
	
	.hero-icon {
		display: none;
	}
	
	.hero h2 {
		font-size: 28px;
		line-height: 38px;
		margin-bottom: 10px;
		padding: 0;
	}
	
	.portfolio-container {
		padding-top: 35px;	
	}
	
	.portfolio-titles {
		width: 100%;
		margin-bottom: 15px;
	}
	
	.portfolio-link {
		position: relative;
		width: 100%;
		right: auto;
		bottom: auto;
		float: left;
		margin-bottom: 30px;
	}
	
	.portfolio-link a {
		width: 100%;
		display: inline-block;
		text-align: center;
	}
	
	/* Main Content Section */
	
	#content {
		width: 100% !important;
		margin-right: 0;
	}
	
	.single-okay-portfolio #content {
		padding: 0 0 10px 0 !important;
	}
	
	.home #content {
		padding: 0 !important;
	}
	
	.page-titles {
		margin: 0 0 6% 0;
	}

	.page-template-homepage-php .page-titles {
		padding-bottom: 10%;
	}
	
	#sidebar {
		width: 100%;
	}
	
	.sidebar-portfolio {
		margin-top: 0px !important;
	}
	
	#sidebar .search-form {
		max-width: none;
	}
	
	.block-post:last-child {
		margin-bottom: 0 !important;
	}
	
	.blog .post, .archive .post, .search .post {
		margin-bottom: 35px;
		padding-bottom: 0px;
	}
	
	.post .box header {
		width: 85%;
		margin: 30px auto 0 auto;
	}
	
	.post .post-content {
		font: 15px/25px VestaStd-Regular; sans-serif;
		margin: 0 auto 0 auto;
	}
	
	#content p {
		margin-bottom: 20px;
	}
	
	.tax-categories .archive-title {
		width: 100%;
	}
	
	.date-title {
		margin-bottom: 25px;
	}
	
	.single-okay-portfolio .entry-title, .single-okay-portfolio .entry-subtitle {
		width: 100%;
	}
	
	.entry-title {
		font-size: 25px;
		line-height: 50px;
	}
	
	.blog-entry-title {
		margin-bottom: 15px;
	}
	
	.blog-entry-title h2 {
		font-size: 25px;
		line-height: 38px;
		width: 80%;
	}
	
	.entry-subtitle {
		width: 100%;
	}
	
	.intro {
		margin-bottom: 20px;
		font-size: 18px;
		line-height: 26px;
	}
	
	.post .featured-image, .post .fitvid {
		margin-bottom: 20px;
	}
	
	.page-titles .featured-image, .page-titles .fitvid, .page-titles .flexslider .slides {
		margin-top: 25px;
		margin-bottom: 0px;
	}
	
	.page-titles .flexslider .slides {
		margin-top: 85px;
	}
	
	.home .page-titles .flexslider .slides {
		margin-top: 65px;
	}
	
	.page-titles .flexslider .flex-direction-nav {
		float: left;
	}
	
	.page-titles-wrap .flex-direction-nav a {
		width: 50%;
		bottom: auto;
		margin: 20px 0 0 0;
	}
	
	.home .flex-direction-nav a {
		top: -80px !important;
		background: #ffffff;
		background: rgba(255,255,255,0.9);
	}
	
	.page-titles .flex-direction-nav .flex-prev {
		left: 0;
		background: #ffffff;
		background: rgba(255,255,255,0.9);
	}
	
	.single-okay-portfolio .image-wrap li {
		margin-bottom: 5px;
		background: #ffffff;
		background: rgba(255,255,255,0.9);
	}
	
	#content .meta-wrap {
		margin: 10px 0 20px 0;
	}
	
	.share {
		float: left;
		width: 100%;
		margin-top: 20px !important;
		width: 100%;
	}
	
	.share-toggle {
		width: 100%;
		display: inline-block;
	}
	
	.share a {
		text-align: center;
	}
	
	.share span {
		float: none;
	}
	
	.share ul {
		width: 100%;
		top: 45px;
		left: -16px;
	}
	
	.share-list li {
		text-align: center;
	}
	
	.post-navigation-wrap {
		background: #f9f9f9;
		padding: 0px 20px;
		border-top: none;
	}
	
	.post-navigation {
		width: 100%;
	}
	
	.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, .tax-categories .post-nav, .post-type-archive .post-nav {
		width: 100% !important;
		margin-top: 10px;
	}
	
	.blog-comment-block {
		height: 35px;
		width: 35px;
		line-height: 32px;
		font-size: 18px;
	}
	
	.blog-comment-block:after {
		right: 3px;
	}
	
	.comments-wrap {
		padding: 20px 20px 20px 20px;
	}
	
	#comments-title {
		text-align: left;
		margin: -20px -20px 30px -20px;
	}
	
	#comments-title span {
		display: none;
	}
	
	.commentlist li {
		padding-bottom: 20px;
		margin-bottom: 20px;
	}
	
	.commentlist .children li { 
		padding-left: 15px;
	}
	
	.comment-text {
		font: 15px/24px VestaStd-Regular; sans-serif;
	}
	
	.comment-notes {
		margin-bottom: 20px !important;
	}
	
	input[type="text"], input[type="email"], textarea {
		font: 14px/22px VestaStd-Regular; sans-serif;
		padding: 5px 10px;
	}
	
	#footer {
		line-height: 20px;
		margin-top: 30px;
		padding-bottom: 1%;
	}
	
	.footer-widgets .widget {
		width: 100%;
		margin-bottom: 30px;
	}
	
	.footer-widgets .widgettitle {
		margin-bottom: 10px;
	}
	
	.theme-name-icon {
		display: none;
		float: left;
		text-align: left;
	}
	
	.copyright {
		width: 100%;
	}
	
	.social-icons {
		float: left;
	}
	
	#icons.large-icons a {
		width: auto !important;
		margin-right: 10px;
	}
	
}	


/* Mobile */
@media only screen and (max-width:680px) {
	#content {
		margin-top: 0;
		padding: 0 !important;
	}	
	
	.entry-title {
		font-size: 25px;
		line-height: 50px;
	}
	
	.page-template-portfolio-php #content {
		padding-top: 0 !important;
	}
	
	.page-template-portfolio-php #content .posts, .tax-categories #content .posts, .post-type-archive #content .posts {
		margin-top: 0;
		padding: 0;
	}
	
	.post-box-wrap {
		margin-top: 5px;
		margin-bottom: 10px;
	}
}

 
/* Tablet Portrait */
@media only screen and (min-width:755px) and (max-width:768px) {
	body {
    	font: 16px/24px VestaStd-Regular; sans-serif;
    }
    
    .post .post-content {
		font: 17px/27px VestaStd-Regular; sans-serif;
	}
}	


/* 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: 60% !important;
	}
}

@media screen and (max-width:400px) {
	.block-post .entry-title{
		font-size: 25px !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: 28% !important;
	}
}


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