/* 
	FABRICS DIRECT
	LAYOUT STYLESHEET
	PLASTIC STUDIO
	EMMA BAKER
	JULY 2014
*/

* {
	margin: 0;
	padding: 0;
}

header{
	position: relative;
}

.inner {
	width: 1200px;
	margin: 0 auto;
}

.standard-content.inner {
	width: 980px;
	padding-top: 4em;
	padding-bottom: 4em;
}

.page-wrap {
	margin-top: 3em;
}
	
.clear {
	clear: both;
}

.rego-thanks {
    text-align: center;
    padding-top: 5px;
}

/***	LINKS	***/	

a.readmore,
p.readmore > a {
	font-family: OpenSansSemibold; 
	color: #2c2b2b; 
	margin: 20px 0 0;
}
a.readmore:hover,
p.readmore > a:hover {
	color: #f26522;
}
	
.pglink {
	font-family: OpenSansLight;
	font-size: 1.4em; 
	display: inline-block; 
	margin: 0 0 4px; }
	
.pglink.centered {
	display: block;
	text-align: center; }
	
.button {
	font-size: 1.6em;
	color: #000;
	display: inline-block;
	border: 2px solid #000;
	padding: 30px 25px; }
	
.button.orange {
	color: #f26522;
	border-color: #f26522; }
	
.button.centered {
	display: block;
	width: 360px;
	margin: 20px auto; }
	
	
.in-page-button {
	padding: 0.7em 1em;
	border: 1px solid #232222;
	display: inline-block;
	margin-right: 0.5em;
	margin-top: 0.5em;
}

.in-page-button:hover {
	background-color: #EEEEEE;
}



/***	COLOURS		***/	
.Pink { color: #a23465; }
.Aqua { color: #007f8b; }
.white { color: #fff; }
.Sky { color: #2dbecc; }
	
	
/***	ICONS	***/
.icon {
	background-image: url('../images/small-icons.png'); 
	background-repeat: no-repeat; }
	
.icon.address {
	width: 23px;
	height: 41px; }
	
.icon.social {
	width: 26px;
	height: 26px; }
	
/*.icon.social.facebook { background-position: 0px -49px; }
.icon.social.twitter { background-position: 0px -90px; width: 29px; }
.icon.social.pinterest { background-position: 0px -133px; }
.icon.social.email { background-position: 0px -175px; }*/
	
	
	
	
/*****
		COLUMNS
*****/
	
.col {
	float: left;
}

.col-3{
	width: 33.3%;
	float: left;
}

.col.right {
	float: right; }
	
.col.third {				width: 33.3334%;}	
.col.two-thirds {			width: 66.6667%;}	
.col.half {					width: 50%;}	
.col.quarter {				width: 25%;}	
.col.one-fifth {			width: 20%;}
.col.two-fifths {			width: 40%;}
.col.three-fifths {			width: 60%;}
.col.four-fifths {			width: 80%;}
	
.col > .col-liner {
	margin: 0 15px;
}

.col.third.first > .col-liner {
	margin-left: 0;
}

.col.third.last > .col-liner {
	margin-right: 0;
}
	
.col.third.with-spacers {
	width: 31%;
	margin-right: 3.5%;
	margin-bottom: 30px;
}
	
.col.third.with-spacers.last {
	margin-right: 0;
}

	
	
/*****
		HEADER 
*****/

header .liner {
	background: url('../images/page-header-bg.jpg') top center repeat #f26522; 
	padding: 50px 0; 
	width: 1200px;
	margin: 0 auto;}

header .inner {
	margin: 0 auto;
	max-width: 1100px; }
	
#branding h1 {
	margin: 0;
	float: left; }

.page-intro {
	margin-top: 30px; }
	
.home .page-intro {
	width: 725px;
	margin: 70px auto 30px; }
	
.page-intro h2 {
	font-size: 4.6em;
	color: #fff; }
	
.page-intro h2.heading-right {
	float: right; }
	
.page-intro h3 {
	font-family: OpenSansLight;
	color: #fff; }
	
	
/*****
		PROMO PANELS
*****/

.promo {
	display: block;
	float: left;
	height: 473px; 
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: relative;
}

.promo .liner {
	/*margin: 140px 0 0 100px;*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
}
	
.promo h2 {
	font-size: 6em;
	line-height: 1em;
	display: inline-block;
	background: #fff; 
	padding: 5px 10px 10px; 
	margin: 0; }
	
.promo p {
	font-family: OpenSansLight;
	font-size: 2em; 
	line-height: 1em; 
	margin: 55px 0 0 100px; }
	
.promo .pglink {
	background: #fff; 
	padding: 6px 10px; 
	margin: 0; }
	
/* .promo .pglink:hover {
	text-decoration: underline; }
 */	
	
.promo.slider {
	position: relative; }
	
.promo.slider .slide {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0; }
	
	
/*****
		LOGOS
*****/

/** On Home page **/
.logos {
	position: relative; 
	margin-bottom: 30px; }
	
.logos .inner {
	margin-top: 50px;
	width: 928px;
	height: 140px;
	overflow: hidden;
}

.logos .slider {
	height: 100%; }

.logos .slider .slick-track {
	top: 0 !important; }

.logo {
	display: block; 
	float: left; 
	margin: 0 6px; }

.logos .readmore {
	text-align: center;
	padding-bottom: 10px;
	border-bottom: 1px dashed #9b999a;
	width: 60px;
	display: block;
	margin: 10px auto; }

.logos .readmore a {
	color: #9b999a; }

	
/** On suppliers page **/

.all-logos .logo {
	opacity: 1;
	margin: 0 50px 30px; 
	padding-bottom: 10px; 
	border-bottom: 1px solid #fff; }
	
.all-logos .logo:hover {
	border-bottom: 1px dashed #9b999a; }
	
	
	
/*****
		HOME PAGE 
*****/	
	
.home header {
	background: url('../../../assets/PageBanners/homepage-banner.jpg') no-repeat 50% 50%; 
	height: 650px; }
	
.intro-panels > .inner {
	margin: 90px auto 80px;
	padding: 0;
	width: 980px;
}
	
.intro-panels .col > .col-liner {
	overflow-y: visible;
	padding-bottom: 30px;
	position: relative;
}

.intro-panels .readmore {
	position: absolute;
	bottom: 0;
	padding-bottom: 10px;
	border-bottom: 1px dashed #9b999a;
	width: 100%;
}



/*****
		CONSULTING 
*****/

.testimonials.col.two-thirds {
	border-top: 1px solid #ccc;
	padding-top: 40px;
	margin-top: 40px;
	float: left;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 64%;
}
.testimonials blockquote {
	border-left: 5px solid #f26522;
	padding-left: 10px;
	margin-left:  10px;
}


	
/*****
		SPECIALS PAGE 
*****/	

.specials > .inner {
	width: 980px;
}

.special .liner {
	margin: 25px; 
	position: relative; }
	
.special .liner img {
	width: 100%; }

.special .liner .date {
	background: url('../images/special-date-triangle.png') no-repeat;
	color: #fff; 
	position: absolute;
	top: -12px;
	left: -15px;
	z-index: 2; 
	width: 131px;
	height: 114px; }
	
.special .liner .date span {
	display: block;
    font-size: 1.2em;
    height: 24px;
    width: 52px;
	position: absolute;
	left: 20px;
    top: 40px;
	transform: rotate(-41deg);
	-ms-transform: rotate(-41deg); /* IE 9 */
	-webkit-transform: rotate(-41deg); /* Opera, Chrome, and Safari */ }
	
/* .special h3 .readmore {
	font-family: OpenSansLight;
	font-size: 1.5em;
	color: #f26522; } */

/* Featured */
.special.featured {
	background: #ebecec; 
	margin-bottom: 30px; 
	overflow: hidden;
	margin: 30px 0; 
	/* height: 557px; */ }	
	
.special.featured .liner {
	padding: 0 400px 0 0; }
	
.special.featured .liner img {
	position: absolute;
	top: -25px;
	left: inherit;
	right: -25px;
	width: auto; }
	
.special.featured .liner .date {
	top: -25px;
	left: -25px;
	background-position: -10px -7px;
	width: 113px;
	height: 99px; }
	
.special.featured .liner .date span {
	font-size: 1.1em; 
	width: 95px; 
	left: 8px;
	top: 21px; }
	
.special.featured h1 {
	font-family: OpenSansLight; 
	font-size: 11em; 
	line-height: 0.8em;
	margin: 0 0 15px; }
	
.special.featured h2 {
	font-family: OpenSansLight; 
	font-size: 4em;
	text-transform: uppercase;
	/* line-height: 0.8em; */ }
	
.special.featured h3 {
	font-family: OpenSansLight; 
	color: #006c76; }

.special.single.featured .liner .date {
	top: -25px;
	left: -25px;
	background-position: -12px -12px;
	width: 105px;
	height: 92px; }	
	
.special.single.featured h1 {
	font-size: 8em; }
	
.special.single.featured .liner .date span {
	left: 4px;
	top: 14px; }


	
/* Standard */
.special.standard > .liner {
	background: #ebecec; 
	margin: 0; 
	overflow: hidden;
	padding: 0 0 10px 0; 
	min-height: 92px; 
	position: relative; }

.special.standard.row-last {
	margin-right: 0; }

.special.standard h3 {
	font-family: OpenSansLight;
	font-size: 1.8em;
	color: #f26522;
	line-height: 1.1em;
	margin: 0 0 20px;
	padding: 0 10px; }
	
.special.standard .readmore {
	float: right;
	margin: 0 10px; }

.special.standard:hover .liner .readmore {
	color: #f26522;
}
	
/** Social links **/

.newsletter-signup{
	display: inline-block;
	width: 100%;
}

.sharing {
	width: 100%; 
	max-width: 500px;
	margin: 0 auto;
}

.signup{
	border: solid 2px #f26522;
	padding: 20px 0;
	box-sizing: border-box;
}

.sharing p,
.sharing .svg-links a {
	float: left; 
	margin: 0 10px; }
	
.sharing p {
	margin: 3px 0;
	font-size: 1.6em;
	color: #f26522;
	display: inline-block;
}

.social{
	height: auto;
	line-height: 45px;
}

.social svg{
    border-radius: 1px;
    fill: #2c2b2b;
    height: 1.8em;
    width: auto;
    max-width: 22px;
}

.social svg:hover{
	fill: #f26522;
}

.social.facebook svg{
	height: 1.6em;
}

.social.facebook{
	line-height: 42px;
}

.fa{
	color: #000;
	font-size: 2em;
}

.call-to-actions{
	max-width: 980px;
	width: 100%;
	margin: 40px auto 0;
}

.call-to-actions .half{
	box-sizing: border-box;
	float: left;
	padding: 0 10px;
	width: 100%;
}

.svg-header,
.svg-links{
	float: left;
	width: 50%;
}

.svg-header{
}
.svg-links{
    box-sizing: border-box;
    padding-left: 20px;
}

.svg-header p{
	text-align: right;
	width: 100%;
}

.newsletter-signup .sharing p{
	width: 100%;
	text-align: center;
}

.newsletter-signup .sharing a{
	color: #f26522;
}

.old-news{
	margin: 25px 0;
	text-align: center;
}

.old-news a:hover{
	color: #f26522;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}
	
/*****
		CONTACT PAGE 
*****/	
	
.email-button {
	display: inline-block;
	-moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #232222;
    border-color: -moz-use-text-color -moz-use-text-color -moz-use-text-color #f26522;
    border-image: none;
    border-style: none none none solid;
    border-width: 0 0 0 5px;
    color: #ffffff;
    cursor: pointer;
    font-size: 1.2em;
    padding: 1.5em 1.8em;
	margin: 20px 0 0;
    text-transform: uppercase; }
	
.email-button:hover {
	transition: all 0.2s ease-in-out 0s;
	background: #f26522; }


/*****
		SEO LINKS 
*****/

.seo-links .inner {
	border-top: 1px solid #ccc; 
	padding-top: 15px;
	margin-top: 50px; }
	
.seo-links a {
	display: block;
	text-align: center;
	color: #9b999a; }
	
.seo-links a:hover {
	color: #555; }
	

/**
* Featured project
**/


.feat-project .right img{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	padding: 0 15px;
}


/**
* Newsletter page
**/

.newsletter-page .form-holder{
	background-color: #ebecec;
	width: 100%;
	padding: 40px 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.newsletter-page .page-text{
	padding: 70px 0 50px;
	text-align: center;
}

.newsletter-page .form-holder input.text, textarea{
	width: 50%;
}	

.campaign-holder{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 20px;
	margin-bottom: 50px;
}
.campaign-wrapper{
	height: 100px;
	background-color: #ebecec;
	position: relative;
}

.campaign-wrapper h4{
	position: absolute;
	bottom: 35px;
	width: 100%;
	text-align: center;
	margin: 0;
	font-weight: normal;
	color: #f26522;
}

.campaign-wrapper .date{
	position: absolute;
	top: 22px;
	left: 0;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	-o-transform: rotate(315deg);
	-ms-transform: rotate(315deg);
	transform: rotate(315deg);
	/*background-color: #B6B6B6;*/
}

.campaign-wrapper .triangle-topleft{
	position: absolute;
	top:0;
	width: 0;
	height: 0;
	border-top: 80px solid #B6B6B6;
	border-right: 80px solid transparent;
}


/*****
		FOOTER 
*****/

.main {
	padding-bottom: 155px;
}

footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	left: 0;
	z-index: 9;
}

footer .inner {
	width: 1200px;
	margin: 0 auto;
	color: #fff;
}

footer .col-liner{
	color: #fff;
	display: block;
	height: 105px;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
}

footer .col.black {
	background: #232222;
}
	
footer .col.half h3 {
	margin: 0 0 5px; }
	
footer .col.quarter h3 {
	margin: 0 0 5px; }
	
footer .col.grey {
	background: #9a9a9a; }
	
footer .col.orange {
	background: #f26522; }
	
footer .icon.address {
	float: left;
	margin: 0 8px 0 0; }






/*.newsletter-signup{
	display: inline-block;
	width: 100%;
}

.sharing{
	border: solid 2px #f26522;
	padding: 30px 0 20px;
	box-sizing: border-box;
	width: 100%;
}

.sharing p,
.sharing .svg-links a {
	float: left; 
	margin: 0 10px; }
	
.sharing p {
	margin: 3px 0;
	font-size: 1.6em;
	color: #f26522;
	display: inline-block;
}

.social{
	height: auto;
	line-height: 45px;
}

.social svg{
    border-radius: 1px;
    fill: #2c2b2b;
    height: 1.8em;
    width: auto;
    max-width: 22px;
}

.social svg:hover{
	fill: #f26522;
}

.social.facebook svg{
	height: 1.6em;
}

.social.facebook{
	line-height: 42px;
}

.fa{
	color: #000;
	font-size: 2em;
}

.call-to-actions{
	max-width: 980px;
	width: 100%;
	margin: 40px auto 0;
}

.call-to-actions .half{
	box-sizing: border-box;
	float: left;
	padding: 0 10px;
	width: 50%;
}

.svg-header,
.svg-links{
	float: left;
	width: 50%;
}

.svg-header{
	min-width: 203px;
}
.svg-links{
	min-width: 168px;
}

.svg-header p{
	text-align: right;
	width: 100%;
}

.newsletter-signup .sharing p{
	width: 100%;
	text-align: center;
}

.newsletter-signup .sharing a{
	color: #f26522;
}*/

@media (max-width: 480px) {
	.svg-header, .svg-links {
	    float: none;
	    width: 100%;
	}

	.svg-header p{
		text-align: center;
	}
	.svg-links {
		padding: 10px 0 0 5px;
	    display: block;
	    margin: 0 auto;
	    width: 173px;
	}
}

/*@media (max-width: 870px) {

	.svg-header,
	.svg-links{
		float: none;
		width: 100%;
	}

	.svg-header p{
		text-align: center;
		width: 100%;
	}

	.svg-links {
	    display: block;
	    margin: 0 auto;
	    width: 168px;
	}

}

@media (max-width: 530px) {

	.call-to-actions .half{
		width: 100%;
	}

}*/