/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://opensource.org/licenses/mit-license.php	*/


/*	



/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */


#comboNav{ display: none;}


/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	/* GENERAL */
	
	.wrapper{
		width: 768px;}	
	
	#fold{ display: none;}	
	
	#logo{ margin-left: 0px;}
	
	#logo a{ 
		display: block ; 
		width: 768px;}

	#logo img{ 
		display: block; 
		margin: 0 auto;}
	
	/* NAV */
	
	#comboNav{ display: none;}
	
	#nav{ margin-right: 38px;}
	
	#nav>li{ margin-left: 15px;}
	
	/* home slider */
	
	#slider-holder{ padding-bottom: 22px;
	width: 100%;}
	
	#slider-holder #headline{
		margin-left: 0px;
		width: 712px /* 768 - ( 28 x 2)*/; 
		margin: 0px 28px;}

	
	/* HOME */
	
	.home-block{
		padding-left: 28px;}
	
	.home-block figure{
		width: 344px;
		margin-left: 0px;
		margin-right: 24px;}
	
	.home-block figure .thumb{
		width: 324px;}
	
	.left-home-block,
	.right-home-block{ width: 344px;}
		
	.left-home-block{ 
		float: left;
		margin-left: 28px;
		margin-right: 0px;}
	
	.right-home-block{ 
		float: right;
		margin-left: 0px;
		margin-right: 28px;}
	
	
	.home-posts .entry-date em{ display: none;}
	
	.home-posts article{ padding-left: 80px;}
	
	.testimonial-slider{ width: 304px;}
	
	.masthead{ padding: 54px 28px ;}
	
	.clients-logos li{ width: 112px;}
	
	/* PORTFOLIO */
	
	.portfolio-list{
		margin-left: 28px;}
	
	.portfolio-list figure{
		width: 344px; 
		margin-right: 24px;
		margin-left: 0px;}
	
	.portfolio-list figure .thumb{ width: 324px;}
	
	/* PROJECT */
	
	.project-pager{
		padding-left: 28px;
		padding-right: 28px;}
	
	.project-slider{
		margin-left: 28px;
		margin-right: 28px
	;}
	
	#project-content .info{
		width: 160px;
		margin-left: 24px;}
	
	#project-content .description{
		width: 528px;
		margin-right: 28px;}
	
	.related-projects{
		padding-left: 28px;}
	
	.related-heading{ margin-left: 0px;}
	
	.related-projects  figure{
		margin-left: 0px;
		margin-right: 24px;
		width: 160px;}
	

	/* BLOG */
	
	#posts-list,
	#post-content{
		width: 536px;
		margin-left: 28px;}
	
	#posts-list article{
		padding-left: 0px;
		width: 536px;}
	
	#posts-list .entry-date,
	#posts-content .entry-date,
	.home-posts .entry-date{ left: 0px;}
	
	#posts-list .entry-date em,
	#posts-content .entry-date em,
	.home-posts .entry-date em{ display: none;} 
	
	#posts-list .post-heading,
	#posts-content .post-heading{ 
		min-height: 78px;
		margin-left: 80px;}
	

	#posts-list article .feature-image{
		margin-left: 0px;
		width: 526px;}
	
	
	
	/* SIDEBAR */
	
	#sidebar{
		
		width: 152px; 
		margin-left: 24px;}

	/* FOOTER */
	
	.widget-cols{ padding-left: 28px;}
	
	.widget-cols>li{
		width: 160px;
		margin-left: 0px;
		margin-right: 24px;}
	
	.recent-post .post-head { width: 80px;}
	
	.footer-bottom{
		padding-left: 28px;
		padding-right: 28px;}
	
}



/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {
	
	/* GENERAL */
	
	#fold{ display: none;}
	
	.wrapper{ width: 320px;}	
	
	
	h1,h2,h3,h4,h5,h6{
		font-family: Helvetica, Arial, sans-serif;
		font-weight: bold;}
	
	h1{ text-align: center;
		font-size: 24px;}

	h2{ font-size: 18px;}
	
	h3{ font-size: 16px;}
	
	h4{ font-size: 16px;}
	
	h5{ font-size: 16px;}
	
	h6{ font-size: 16px;}
	
	
		
	.masthead .subheading{
		float: left;
		width: 100%;}
	
	/* LOGO */
	
	#logo{ margin-left: 0px;}
	
	#logo a{ 
		display: block ; 
		width: 320px;}

	#logo img{ 
		display: block; 
		margin: 0 auto;}


	/* home slider */
	
	#slider-holder{ 
		padding-bottom: 22px;
		width: 100%;}
	
	.home-slider { 
		width: 320px; 
		padding: 0px;
		margin-bottom: 58px;} 
	
	#slider-holder #headline{
		margin-left: 0px;
		width: 280px /* 320 - ( 20 x 2)*/; 
		margin: 0px 20px;}
	
	/* Layout */
	
	.one-half,
	.one-third,
	.one-fourth,
	.alumni-one-half{ 
		width: 280px;
		margin-right: 0px;}
	
	.one-half2{
		text-align: center; 
		width: 280px;
		margin-right: 0px;}
	
	.one-half2-last{
		text-align: center; 
		width: 280px;
		margin-top: -3em;
		margin-right: 0px;}
	/* NAV */
	
	#nav{ display: none;}
	#comboNav{ display: block;}
	
	/* HOME */
		
	.home-block figure{
		width: 280px;
		margin-left: 20px;}
	
	.home-block figure .thumb{
		width: 260px;}
	
		
	.left-home-block,
	.right-home-block{ 
		width: 280px;
		float: left;
		margin-left: 20px;
		margin-right: 0px;}
	
	.home-posts .entry-date{ left: 0px;}
	
	.home-posts .entry-date em{ display: none;}
	
	.home-posts article{ padding-left: 80px;}
	
	.testimonial-slider{ 
		width: 240px;   /* 280 - ( 20 x 2) */
		margin-bottom: 50px;}
	
	.clients-logos li{ width: 138px;}
	
	/* PORTFOLIO */
	
	.portfolio-list{
		margin-left: 20px;}
	
	.portfolio-list figure{
		width: 280px; /* 320 - ( 2 x 20) */ 
		margin-right: 0px;
		margin-left: 0px;}
	
	.portfolio-list figure .thumb{ width: 260px;}
	
	.masthead{
		line-height: 1em;}
	
	.masthead h1{
		width: 100%;}
	
	.masthead .cat-nav{
		float: left;
		width: 100%;}
	
	/* PROJECT */
	
	.project-pager{
		padding-left: 20px;
		padding-right: 20px;}
	
	.project-slider{
		margin-left: 20px;
		margin-right: 20px
	;}
	
	#project-content .info{
		width: 280px;
		margin-left: 20px;
		margin-bottom: 54px;}
	
	#project-content .description{
		width: 280px;
		float: left;
		margin-left: 20px;
		margin-right: 0px;}
	
	.related-projects{
		padding-left: 20px;}
	
	.related-heading{ margin-left: 0px;}
	
	.related-projects  figure{
		margin-left: 0px;
		margin-right: 0px;
		width: 280px;}

	/* BLOG */
	#page-content{
		font-size: 14px;}
	
	#posts-list{
		width: 320px;}
	
	#posts-list article{
		padding-left: 0px;
		font-size: 14px;}
	
	#posts-list table{
		font-size: 14px;}
	
	#posts-list .entry-date{
		position: static;
		width: 100%;
		height: auto;
		padding: 10px 0px;
		text-align: center;
		margin-bottom: 20px;}
	
	#posts-list .entry-date .number,
	#posts-list .entry-date .month,
	#posts-list .entry-date .year{
		display: inline;
		font-size: 13px;
		margin-right: 3px;}
	
	#posts-list .entry-date em{ display: none ;}
	
	#posts-list .post-heading,
	#posts-content .post-heading{
		margin-left: 20px;
		margin-right: 20px;
		margin-bottom: 19px;
		line-height: 1.0em;}
	
	#posts-list .feature-image,
	#post-content .feature-image{
		width: 270px; /* 320 - 2 x 20  - 2 x 5*/
		margin-left: 20px;
		margin-bottom: 21px;}
	
	#posts-list .excerpt{
		display: block;
		margin-left: 20px;
		margin-right: 20px;
		margin-bottom: 20px;}
	
	.page-navigation{
		margin-left: 20px;
		margin-right: 20px;
		font-size: 13px;}
	
	/* SINGLE */
	
	.commentlist { margin: 30px 20px ;}
	
	#comments-wrap h4{ 
		margin-left: 20px;
		margin-right: 20px;}
	
	#respond{
		margin-left: 20px;
		margin-right: 20px;}
	
	/* SIDEBAR */
	
	#sidebar{
		width: 280px; 
		margin-left: 20px;
		line-height: 1.2em;}
	
	#sidebar li {
	margin-bottom: 7px;
	font-size: 13px;}
	
	/* FOOTER */
	
	.widget-cols{ padding-left: 0px;}
	
	.widget-cols>li{
		width: 280px;
		margin-left: 20px;
		margin-right: 20px;
		margin-bottom: 20px;}
	
	.recent-post .post-head { width: 200px;}
	
	.footer-bottom{
		padding-left: 20px;
		padding-right: 20px;}
	
	/* form */
	
	#contactForm{ 
		width: 280px;}
	
	#contactForm input[type="text"],
	#contactForm textarea{ 
		width: 240px;}
	
	#contactForm label,
	#commentform label{
		padding-left: 0px;
		padding-bottom: 10px;
		margin-top: -15px;
		display: block;}
}



/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	/* GENERAL */
	
	#fold{ display: none;}
	
	.wrapper{ width: 480px;}	
	 
	/* LOGO */
	
	#logo a{ 
		width: 480px;}
	 
	 /* Layout */
	
	.one-half,
	.one-third,
	.one-fourth,
	.alumni-one-half{ 
		width: 440px;
		margin-right: 0px;}
	.one-half2,
	.one-half2-last{
		text-align: center; 
		width: 440px;
		margin-right: 0px;}
	.one-half2-last{
		text-align: center; 
		width: 440px;
		margin-top: -3em;
		margin-right: 0px;}
	 /* home slider */
	
	.home-slider { width: 480px;}
	
	#slider-holder #headline{
		margin-left: 0px;
		width: 436px /* 480 - ( 22 x 2)*/; 
		margin: 0px 20px;}
	
	
	/* HOME */
		
	.home-block figure{
		width: 436px; /* 480 - (22 x 2) */
		margin-left: 22px;}
	
	.home-block figure .thumb{
		width: 416px;}
	
	.left-home-block,
	.right-home-block{ 
		width: 436px;
		float: left;
		margin-left: 22px;
		margin-right: 0px;}
	
	.testimonial-slider{ 
		width: 396px;   /* 436 - ( 20 x 2) */
		margin-bottom: 50px;}
	
	.clients-logos li{ width: 143px;}
	
	/* PORTFOLIO */
	
	.portfolio-list figure{
		width: 440px; /* 480 - ( 2 x 20) */ 
		margin-right: 0px;
		margin-left: 0px;}
	
	.portfolio-list figure .thumb{ width: 420px;}
	
	/* PROJECT */
	
	
	#project-content .info,
	#project-content .description{
		width: 440px;
		margin-left: 20px;
		margin-bottom: 54px;}
			
	.related-projects  figure{
		width: 440px;}
	
	/* BLOG */
	#page-content{
		font-size: 15px;}
	
	#posts-list{
		width: 480px;}
	
	#posts-list article{
		
		font-size: 15px;}
	
	#posts-list table{
		font-size: 15px;}
	
	
	#posts-list .feature-image,
	#post-content .feature-image{
		width: 430px; /* 480 - 2 x 20  - 2 x 5*/
		margin-left: 20px;
		margin-bottom: 21px;}
	
	.page-navigation{
		font-size: 15px;}
	
	
	/* form */
	
	#contactForm{ 
		width: 440px;}
	
	#contactForm input[type="text"],
	#contactForm textarea{ 
		width: 400px;}
	
	#contactForm label,
	#commentform label{
		padding-left: 0px;
		padding-bottom: 10px;
		margin-top: -15px;
		display: block;}
	
	/* SIDEBAR */
	
	#sidebar{
		width: 440px; 
		margin-left: 20px;}
	#sidebar li {
		margin-bottom: 7px;
		font-size: 13px;}
	
	/* FOOTER */
	
	.widget-cols>li{
		width: 436px;
		margin-left: 20px;
		margin-right: 20px;
		margin-bottom: 20px;}
	
	.recent-post .post-head { width: 350px;}
	
	.footer-bottom{
		padding-left: 22px;
		padding-right: 22px;}
}