/* 
	FABRICS DIRECT
	MOBILE STYLESHEET
	PLASTIC STUDIO
	EMMA BAKER
	OCTOBER 2014
*/

@media (max-width: 1200px) {

	/* body { border: 1px solid blue; } */
	
	header .liner {
		width: 100%;
	}
	
	.inner,
	footer .inner,
	.standard-content.inner {
		width: 94%;
		padding-left: 3%;
		padding-right: 3%;
	}
	
	.promo .liner {
		width: 80%; }
		
	.standard-content.inner .col.third.last > .col-liner {
		margin: 0; }
		
	.standard-content.inner .col.third.last > .col-liner img {
		width: 49%; }
		

	/** Contact **/
	
	.user-defined-form.standard-content.inner .col.two-thirds,
	.user-defined-form.standard-content.inner .col.third.last {
		width: 49%; 
		float: left; 
		clear: none; 
		margin: 0 0 20px; }
		
	.user-defined-form.standard-content.inner .col.third.last img {
		width: auto; }

	.promo h2 {
		font-size: 4em; }

}

@media (max-width: 1060px) {

		
	.promo p {
		font-size: 1.6em; }

	footer .col-liner {
		height: 105px; }
	
	header nav{
		float: left;
		width: 100%;
	}

}

@media (max-width: 980px) {

	/* body { border: 1px solid green; } */
	
	header .inner,
	.intro-panels > .inner,
	footer > .inner,
	.logos > .inner,
	.specials .inner {
		width: 94%;
		padding-left: 3%;
		padding-right: 3%;
	}
	
	header .liner {
		padding: 20px 0; }
	

	/** Homepage **/
	
	.intro-panels .inner {
		margin: 40px 0 0; }
	
	.home .page-intro {
		width: 100%; 
		margin: 30px 0 0; }
		
	.page-intro h2 {
		font-size: 3em; }
		
	.page-intro h3 {
		font-size: 1.7em; }
	
	.promo.col.three-fifths,
	.promo.col.two-fifths {
		width: 50%; 
		height: 350px; }
		
	.promo.slider .slide {
		background-size: 160% auto; 
		background-position: center center; }
		
	.promo h2 {
		font-size: 3.5em; }
		
		
	/** 2 Col pages **/
	
	.standard-content.inner .col.two-thirds .col.half {
		width: 100%; }
	
	.testimonials.col.two-thirds {
		width: 100%; 
		margin: 0; }
		
		
	/** Suppliers page **/
	
	.all-logos .logo {
		margin: 0 1% 20px;
		width: 30%; }
		
	.all-logos .logo img {
		max-width: 100%; }
	
	
	
	/** Contact **/
	
	.user-defined-form.standard-content.inner .col.third.last > .col-liner img {
		width: 100%; }

		
	/** Footer **/
	footer .col-liner {
		height: 120px; }	
		
}

@media (max-width: 890px) {
	.col-3{
		width: 50%;
	}
}


@media (max-width: 850px) {
	.promo {
		height: 400px;
	}
}


@media (max-width: 800px) {
		
	/** Specials **/
	
	.special.featured .liner {
		padding: 0; }
	
	.special.featured .liner img {
		width: 40%; 
		position: static;
		float: right;
		margin: 0 0 10px 10px; }
		
	.special.featured h1 {
		font-size: 8em; }
	
	.col.third.with-spacers {
		width: 49%; 
		float: left;
		margin: 0 2% 2% 0; 
		clear: none; }
		
	.col.third.with-spacers.even { margin-right: 0; }
	.special.standard.row-last { margin-right: 2%; }
		
	
	
}

@media (max-width: 750px) {
	.newsletter-page .form-holder #Form_NewsletterSubscriptionForm{
		padding-top: 20px;
	}

	.promo {
		height: 250px;
	}

	.col,
	.col.one-fifth,
	.col.two-fifths,
	.col.three-fifths,
	.col.four-fifths,
	.promo.col.three-fifths,
	.promo.col.two-fifths,
	.col.half,
	.col.third,
	.col.half,
	.col.two-thirds,
	.col.three-quarters,
	.col.quarter	{
		float: none;
		clear: both;
		width: 100%;
	}

	.col > .col-liner,
	.col.one-fifth > .col-liner,
	.col.two-fifths > .col-liner,
	.col.three-fifths > .col-liner,
	.col.four-fifths > .col-liner,
	.col.half > .col-liner,
	.col.third > .col-liner,
	.col.half > .col-liner,
	.col.two-thirds > .col-liner,
	.col.three-quarters > .col-liner {
		margin-left: 0;
		margin-right: 0;
		height: auto;
	}

	.feat-project .right img{
		width: 50%;
		padding: 15px 0 0;
		float: left;
	}

}

@media (max-width: 690px) {
	
	.home header {
		height: 400px; }
	
	/** Homepage **/
	
	.logos .inner {
		margin-top: 20px; }

	.main { padding: 0; }
	
	/** Footer **/
	
	footer { position: static; }
	
	footer .col {
		width: 100% !important; }
	
	footer .col-liner {
		padding: 10px 20px; 
		height: auto; }
		
}

@media (max-width: 590px) {
	.col-3{
		width: 100%;
	}
}

@media (max-width: 660px) {
	
	/* MOBILE NAV POPUP */
	#mobile-nav {
		display: block;
		font-family: OpenSansBold;
		font-size: 1.3em;
		color: #fff;
		text-transform: uppercase;
		position: absolute;
		top: 19px;
		right: 10px; 
		cursor: pointer; }	
	
	header nav {
		width: 100%; } 	

	header nav ul {
		/*display: none;*/
		background: #fff; 
		width: 100%;
		position: absolute; 
		z-index: 3; }
		
	header nav ul li a {
		float: none;
		width: 90%; 
		margin: 0;
		padding: 10px 5%; }
		
	header nav ul li a:hover {
		color: #fff;
		background: #888; }
		
	header nav ul li.current a, 
	header nav ul li.section a {
		color: #fff;
		background: #535353;
	}

	
}

@media (max-width: 540px){
	
/* 	body { border: 1px solid red; } */
		
	h3 {
		font-size: 1.6em; }
		
	p {
		font-size: 1.11em; }
	
/*	.col,
	.col.one-fifth,
	.col.two-fifths,
	.col.three-fifths,
	.col.four-fifths,
	.promo.col.three-fifths,
	.promo.col.two-fifths,
	.col.half,
	.col.third,
	.col.half,
	.col.two-thirds,
	.col.three-quarters,
	.col.quarter	{
		float: none;
		clear: both;
		width: 100%;
	}

	.col > .col-liner,
	.col.one-fifth > .col-liner,
	.col.two-fifths > .col-liner,
	.col.three-fifths > .col-liner,
	.col.four-fifths > .col-liner,
	.col.half > .col-liner,
	.col.third > .col-liner,
	.col.half > .col-liner,
	.col.two-thirds > .col-liner,
	.col.three-quarters > .col-liner {
		margin-left: 0;
		margin-right: 0;
		height: auto;
	}*/

	.page-intro h2 {
		font-size: 2.5em; }
		
	.home .page-intro h3 br {
		display: none; }
	
	/** Header / Layout **/
	
	#branding h1 {
		width: 80%; }
	
	#branding h1 a,
	#branding h1 a img {
		display: block;
		max-width: 100%; }
	
	
	
	/** Homepage **/

	.home .page-intro h2 {
		font-size: 2.5em; }
		
	.home .page-intro h3 {
		font-size: 1.5em; }
	
	.promo.col.three-fifths,
	.promo.col.two-fifths {
		overflow: hidden;
		height: 300px; }
		
/*	.promo .liner {
		margin: 100px auto 0; }*/
		
	.logos .slider .logo img {
		margin: 0 auto; }
		
	/** Specials **/
		
	.special.featured .liner .date,
	.special.single.featured .liner .date {
		height: 70px;
		background-position: -10px -37px; }
		
	.special.featured .liner .date span,	
	.special.single.featured .liner .date span {
		left: -6px;
		top: 8px; }
		
	.special.featured h1,
	.special.single.featured h1 {
		font-size: 4em; }	
	
	.special.featured h3 {
		font-size: 1.5em; }
		
	.special.standard .liner .date {
		background-position: -9px -13px;
		height: 80px; }
		
	.special.standard .liner .date span {
		left: 16px;
		top: 30px; 
		font-size: 1em; }
		
		
	/** Suppliers page **/
	
	.all-logos .logo {
		margin: 0 1% 20px;
		width: 48%; }
		
	.all-logos .clear {
		clear: none; }
		
		
	.button.centered {
		width: 94%;
		padding: 4% 0;
		text-align: center; }
	
		
}

@media (max-width: 420px){

	/** New In **/
	
	.col.third.with-spacers {
		width: 100%;
		margin: 0 0 3%; }
		
	.special.featured h1, .special.single.featured h1 {
		font-size: 3em; 
		padding-top: 25px; }
		
	.special .sharing p {
		margin: 3px 20px 10px 0; }
		
	.icon.social.facebook {	
		clear: left; }
		
		
	/** Subscription form **/
	input.text, textarea {
		width: 60%; }

	/** Contact **/
	
	.user-defined-form.standard-content.inner .col.two-thirds,
	.user-defined-form.standard-content.inner .col.third.last {
		width: 100%;  }

}

@media (max-width: 400px){
	.feat-project .right img{
		width: 100%;
		float: none;
	}
}

@media (max-width: 660px){
	header nav .main-nav{
		display: none!important;
	}
	header nav .main-nav.open{
		display: block!important;
	}
}