@font-face {
    font-family: 'fira_sansbold';
    src: url('/fonts/firasans-bold.eot');
    src: url('/fonts/firasans-bold.eot?#iefix') format('embedded-opentype'),
         url('/fonts/firasans-bold.woff2') format('woff2'),
         url('/fonts/firasans-bold.woff') format('woff'),
         url('/fonts/firasans-bold.ttf') format('truetype'),
         url('/fonts/firasans-bold.svg#fira_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fira_sansbold_italic';
    src: url('/fonts/firasans-bolditalic.eot');
    src: url('/fonts/firasans-bolditalic.eot?#iefix') format('embedded-opentype'),
         url('/fonts/firasans-bolditalic.woff2') format('woff2'),
         url('/fonts/firasans-bolditalic.woff') format('woff'),
         url('/fonts/firasans-bolditalic.ttf') format('truetype'),
         url('/fonts/firasans-bolditalic.svg#fira_sansbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fira_sansitalic';
    src: url('/fonts/firasans-italic.eot');
    src: url('/fonts/firasans-italic.eot?#iefix') format('embedded-opentype'),
         url('/fonts/firasans-italic.woff2') format('woff2'),
         url('/fonts/firasans-italic.woff') format('woff'),
         url('/fonts/firasans-italic.ttf') format('truetype'),
         url('/fonts/firasans-italic.svg#fira_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fira_sanslight';
    src: url('/fonts/firasans-light.eot');
    src: url('/fonts/firasans-light.eot?#iefix') format('embedded-opentype'),
         url('/fonts/firasans-light.woff2') format('woff2'),
         url('/fonts/firasans-light.woff') format('woff'),
         url('/fonts/firasans-light.ttf') format('truetype'),
         url('/fonts/firasans-light.svg#fira_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fira_sanslight_italic';
    src: url('/fonts/firasans-lightitalic.eot');
    src: url('/fonts/firasans-lightitalic.eot?#iefix') format('embedded-opentype'),
         url('/fonts/firasans-lightitalic.woff2') format('woff2'),
         url('/fonts/firasans-lightitalic.woff') format('woff'),
         url('/fonts/firasans-lightitalic.ttf') format('truetype'),
         url('/fonts/firasans-lightitalic.svg#fira_sanslight_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fira_sansmedium';
    src: url('/fonts/firasans-medium.eot');
    src: url('/fonts/firasans-medium.eot?#iefix') format('embedded-opentype'),
         url('/fonts/firasans-medium.woff2') format('woff2'),
         url('/fonts/firasans-medium.woff') format('woff'),
         url('/fonts/firasans-medium.ttf') format('truetype'),
         url('/fonts/firasans-medium.svg#fira_sansmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fira_sansmedium_italic';
    src: url('/fonts/firasans-mediumitalic.eot');
    src: url('/fonts/firasans-mediumitalic.eot?#iefix') format('embedded-opentype'),
         url('/fonts/firasans-mediumitalic.woff2') format('woff2'),
         url('/fonts/firasans-mediumitalic.woff') format('woff'),
         url('/fonts/firasans-mediumitalic.ttf') format('truetype'),
         url('/fonts/firasans-mediumitalic.svg#fira_sansmedium_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fira_sansregular';
    src: url('/fonts/firasans-regular.eot');
    src: url('/fonts/firasans-regular.eot?#iefix') format('embedded-opentype'),
         url('/fonts/firasans-regular.woff2') format('woff2'),
         url('/fonts/firasans-regular.woff') format('woff'),
         url('/fonts/firasans-regular.ttf') format('truetype'),
         url('/fonts/firasans-regular.svg#fira_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}
html {font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
body {line-height: 16px; font-size:14px; color:#000; font-family: 'fira_sansregular'; overflow-x:hidden;}
body.overflow-hidden {overflow: hidden;}
*, div, p {
	font-feature-settings: "liga" 0;
	-webkit-font-feature-settings: "liga" 0;
	-moz-font-feature-settings: "liga" 0;
	font-variant:normal;
}
ol, ul {list-style: none;}
blockquote, q {quotes: none}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none
}
*{margin:0; padding: 0;}
.clear:before,
.clear:after { content: ""; display: table;}
.clear:after, .clear-both { clear: both;}

p {padding-bottom:12px; line-height:1.4em !important; font-size:16px;}

a {color:#000; text-decoration:none;}
a:hover {text-decoration:underline;}

img {border: 0; width:100%;}
svg:not(:root) {overflow: hidden;}

button {overflow: visible;}
button, select {
    text-transform: none
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button; cursor: pointer;
}
button[disabled], html input[disabled] {cursor: default;}
button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0;}
input {line-height: normal;}

/* Clear Fix */
.group:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0;
	}
* html .group             { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */

.float-left {float:left;}
.float-right {float:right;}

.header-cover {
	position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 2000; height:71px;
	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);	
}

.wrapper {max-width:1000px; margin:0 auto; text-align:center;}

.menu-wrap {width:100%;}
.menu-cover ul {float:right !important;}
.menu-cover ul li {padding-left:20px; padding-right:20px; float:left; font-family: 'fira_sansmedium'; letter-spacing:0.1em;}
.menu-cover ul li a {color:#999; text-decoration:none; text-transform:uppercase; line-height:65px; display:inline-block; border-top:4px solid #fff; font-size:1.1em;}
.menu-cover ul li a:hover {color:#666; text-decoration:none;}
.menu-cover ul li a.selected {color:#666; text-decoration:none; border-bottom: none; pointer-events: none;}
.menu-cover ul li a.select-click {color:#666; text-decoration:none; border-bottom: none;}
.spacer-link {padding-right:5px}

.divider {border-left: 1px solid #f57921; line-height:30px !important; margin-right:25px; padding-top:5px; padding-bottom:5px;}
.special-link {padding-right:0 !important;}
.special-link a {border-top:4px solid #f57921 !important; color:#f57921 !important;}

.mobile-menu {width:29px !important; position:absolute; right:35px; top:22px; z-index:600; cursor:pointer !important;}
#show-mobile {display:none;}

@media only screen and (min-width: 961px) {
	.has-sub:hover ul {display: block; opacity: 1; visibility: visible;}
	.has-sub ul {position:absolute; float:none; display: none; opacity: 0; visibility: hidden; margin-left:-20px; padding-bottom:7px;}
	.has-sub ul li {display:block; float:none; line-height:38px !important; padding:0; text-align:left; font-family: 'fira_sansregular'; letter-spacing:0.02em;}
	.has-sub ul li a {line-height:38px; display:block; border:none; padding-left:20px; padding-right:20px; background-color:#fff; text-transform:none;}
	.has-sub ul li a:hover {background-color:#f57921; color:#fff;}
}
@media only screen and (max-width: 960px) {	
	#show-mobile {display:block;}
	.menu-cover {display:none; height:auto; background:#fff; text-align:center; position:absolute; width:100%; top:71px;
		-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    	-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
	}
	.menu-cover ul {float:none !important; margin:0 auto;}
	.menu-cover ul li {padding:0 !important; line-height:65px; font-size:1.4em; text-align:center; float:none; font-family: 'fira_sansregular';}
	.menu-cover ul li a {display:block; line-height:65px;}
	.divider {display:none}
	.special-link a {border:none;}
	.special-link {margin-left:-2px !important; line-height:65px;}
	
	.prod_menu {display:none;}
	/*
	.has-sub ul {position:relative; float:none; display: block; padding:0;}
	.has-sub ul li {display:block; float:none; line-height:65px !important; padding:0; font-size:1em !important;}
	.has-sub ul li a {line-height:65px; display:block; border:none;}
	*/
}

.top-logo {width:178px !important; height:71px; float:left; background-color:#f57921;}

.cover {width:100%; display: table;}
.content {position:relative; z-index:1500; margin-top:71px; width:100%;}

/*========== Full Width Mobile menu ==========*/
.hamburger {
  padding: 0;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, -webkit-filter;
  transition-property: opacity, filter;
  transition-property: opacity, filter, -webkit-filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }

.hamburger:hover {opacity: 0.7;}
.hamburger-box {width: 32px; height: 24px; display: inline-block; position: relative;}
.hamburger-inner {display: block; top: 50%; margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 32px;
    height: 4px;
    background-color: #999;
    border-radius: 3px;
    position: absolute;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {content: ""; display: block;}
.hamburger-inner::before {top: -10px;}
.hamburger-inner::after {bottom: -10px;}
.hamburger--3dx .hamburger-box {-webkit-perspective: 80px; perspective: 80px;}

.hamburger--3dx .hamburger-inner {
  transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
    transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dx.is-active .hamburger-inner {
background-color: transparent; -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
.hamburger--3dx.is-active .hamburger-inner::before {
    -webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
            transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--3dx.is-active .hamburger-inner::after {
    -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg);
            transform: translate3d(0, -10px, 0) rotate(-45deg); }

/*========== End. Full Width Mobile menu ==========*/



/*========== ROOFING CALCULATOR ==========*/
.right-items {right:0; top:0; padding-top:3px; position:absolute; z-index:1000;}
.rt-icon {font-size:36px; display:block; clear:both; float:right; right:0; padding:6px; width:46px; background-color:#fff; color:#f47920; margin-bottom:3px; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);}

.rt-roof {display:block; clear:both; right:0; padding:10px; background-color:#f47920; width:100px; margin-bottom:3px; font-size:1em; color:#fff; text-transform:uppercase; cursor:pointer !important; text-align:left;}
.rt-roof svg {fill:#ffffff; width:80px; margin-bottom:4px;}
.rt-roof:hover {text-decoration:none; color:#f8c8af;}
.rt-roof > svg:hover {fill:#f8c8af;}
.rt-roof:focus {outline:none;}
@media only screen and (max-width: 850px) {
	/*.roof-text {display:none}*/
	.rt-roof svg {width:60px;}
	.rt-roof {padding:8px; width:92px;}
}
@media only screen and (max-width: 560px) {
	.roof-text {font-size:0.85em;}
	.rt-roof svg {width:50px;}
	.rt-roof {padding:6px; width:79px;}
}


.roof-calc-wrap {background-color:#fff; display:none;}
.roof-calc-title {padding:25px; padding-top:15px; padding-bottom:12px; text-transform:uppercase; background-color:#f57921; font-size:1.4em;}
.roof-calc-inner {padding:40px; background-color:#f1f1f1;}
.calc-form-item {width:100%; margin-bottom:18px;}
.item-label {float:left; width:40%; font-size:1.15em; line-height:1.3em; padding-top:3px; text-transform:uppercase; color:#666;}
.item-label span {font-size:0.85em; text-transform:none;}
.item-input {float:left; width:50%}
.item-input input {padding:6px; border:1px solid #999; background-color:#fff; font-size:1em; width:65%; color:#666;}
select.custom-select {
	-webkit-appearance: none;  /*REMOVES DEFAULT CHROME & SAFARI STYLE*/
    -moz-appearance: none;  /*REMOVES DEFAULT FIREFOX STYLE*/
    color: #666;
    padding: 8px;
    border:1px solid #999 !important;
	font-size:1em; width:65%;
    cursor: pointer;
	outline:none;
	border-radius:0;
	background: #fff url(/images/pages-generic/drop-down-arrow.png) no-repeat right center;
    background-size: 40px 37px; /*TO ACCOUNT FOR @2X IMAGE FOR RETINA */
}
.calc-btn {background-color:#f57921 !important; font-size:1.4em; text-align:center; width:65%; padding-top:15px; padding-bottom:12px; border:none !important; text-transform:uppercase; color:#fff !important;}

select.custom-select:focus, .calc-btn:focus {outline: none;}
.calc-results {padding-top:20px;}
.calc-results .item-label {text-align:right; color:#666; font-size:4.2em; width:44%; line-height:0.8em;}
.calc-results .item-input {padding-left:2%; width:52%; text-align:left; font-size:1.6em; line-height:1.2em; color:#666;}
.roof-calc-inner .footer {line-height:1.3em;color:#666;font-size:0.85em; text-transform:none;}
.item-input .calc-error {border:1px solid #cc0000;}

@media only screen and (max-width: 760px) {
	.roof-calc-inner {padding:25px; padding-bottom:10px;}
	.item-label, .item-input {float:none; width:100%;}
	.item-input input {width:85%;}
	select.custom-select {width:85%;}
	.calc-btn {width:100%;}
	.calc-results .item-label {float:left; width:44%;}
	.calc-results .item-input {float:left; font-size:1.45em;}
}
@media only screen and (max-width: 760px) and (max-height: 450px) {
	.roof-calc-title {padding:15px; padding-top:5px; padding-bottom:5px; font-size:1.2em;}
    .roof-calc-inner {padding:20px;}
    .calc-form-item {margin-bottom:10px;}
    .item-label {float:left; width:55%; font-size:1.1em; line-height:1.2em;}
    .item-label span {font-size:0.8em;}
    .item-input {float:left; width:45%}
    .item-input input {padding:4px; width:85%;}
    
    .calc-results .item-label {width:40%;}
	.calc-results .item-input {font-size:1.4em; width:55%;}
	.calc-results .calc-form-item {margin-bottom:8px;}
	.roof-calc-inner .footer {line-height:1.2em; font-size:0.8em;}
}
@media only screen and (max-width: 420px) {
	.roof-calc-inner {padding:20px; padding-bottom:5px;}
	.calc-results .item-label {width:34%;}
	.calc-results .item-input {font-size:1.4em; width:64%;}
	.calc-results .calc-form-item {margin-bottom:8px;}
	.roof-calc-inner .footer {line-height:1.2em; font-size:0.8em;}
}
@media only screen and (max-width: 369px) {
	.roof-calc-inner {padding-bottom:2px;}
	.calc-results .item-label {width:24%;}
	.calc-results .item-input {font-size:1.2em;}
	.calc-results .calc-form-item {margin-bottom:5px;}
	.roof-calc-inner .footer {line-height:1.1em;}
	.calc-btn {padding-top:8px; padding-bottom:6px;}
	.calc-form-item {margin-bottom:8px;}
}



/*========== HOME HERO ==========*/
.hero-image, .prod-image {-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; height:auto;}
/*
.hero-title {position:absolute; top: 50%; width:100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
*/
.home-text {width:38%;}
.home-text p {font-size:1.5em !important; color:#fff; width:100%; text-align:center; margin:0 auto; line-height:1.5em !important; font-family: 'fira_sanslight'; letter-spacing:0.02em;}
		
		
/*========== HOME PRODS ==========*/
.home-prods {text-align:center;}
.prod-list {padding-bottom:8px;}
.page-inner {padding-bottom:8px; text-align:center;}
.home-prod-title, .section-heading {font-size:3.1em; font-family: 'fira_sanslight'; line-height:3em; color:#a4a4a4;}
.row {width:100%; overflow:hidden; margin-bottom:2px; margin-left:1px;}
.col_3 {height:auto; width:33.333333%; float:left; border-right:2px solid #fff; border-bottom:2px solid #fff; background:#000 !important;}
.col_3 a {position:relative; width:100%; height:100%; display:block; overflow:hidden;}				
.col_3 a img {display: block !important; width:100%;
	cursor:pointer !important;
	-o-transition:all .5s ease-in-out;
	-ms-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
}
.col_3 a > img:hover {
	opacity:0.8 !important;
	filter:alpha(opacity=80) !important;
	transform: scale(1.05);
}	
			
.col-text {position:absolute; width:100%; bottom:0; left:0; padding-top:18px; padding-bottom:18px; font-size:1.5em; color:#fff;}

@media only screen and (min-width: 1500px) {
	.col_3 {width:24.999999%;}
}
@media only screen and (max-width: 960px) {
	.prod-list .row {width:100%; margin:0 auto;}
	.col_3 {width:49.888888%;}
}
@media only screen and (max-width: 560px) {
	.row {margin-left:0;}
	.col_3 {width:100%; float:none; border-right:none;}
	.home-prod-title {font-size:2.5em; line-height:2.6em;}
	.col_3 a > img:hover {
		opacity:1 !important;
		filter:alpha(opacity=100) !important;
		transform:none;
	}
}


/*========== GALLERY ================*/
.stock_list .row {margin:0 auto;}
.stock_list .col_3 {background:none !important;}
@media only screen and (min-width: 1500px) {
   .stock_list .col_3 {width:33.333333%;}
   .stock_list .row {max-width:1280px;}
}
@media only screen and (max-width: 960px) {
   .stock_list .col_3 {width:33.333333%;}
}
@media only screen and (max-width: 760px) {
   .stock_list .col_3 {width:100%; float:left;}
}
.stock_list .col_3 a {
	-o-transition:all .5s ease-in-out;
	-ms-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
}
#stock-1 { 
    background:url(/images/stockists/bunnings_off.jpg), url(/images/stockists/bunnings.jpg);
    background-repeat:no-repeat, no-repeat;
    background-size:contain, contain;
}
#stock-2 { 
    background:url(/images/stockists/placemakers_off.jpg), url(/images/stockists/placemakers.jpg);
    background-repeat:no-repeat, no-repeat;
    background-size:contain, contain;
}
#stock-3 { 
    background:url(/images/stockists/itm_off.jpg), url(/images/stockists/itm.jpg);
    background-repeat:no-repeat, no-repeat;
    background-size:contain, contain;
}
#stock-1:hover {background:url(/images/stockists/bunnings.jpg) no-repeat; background-size:contain;}
#stock-2:hover {background:url(/images/stockists/placemakers.jpg) no-repeat; background-size:contain;}
#stock-3:hover {background:url(/images/stockists/itm.jpg) no-repeat; background-size:contain;}


/*========== HOW TO ==========*/
.vid-wrap {background-color:#eeeeee; padding-top:4.6%; padding-bottom:5.1%;}        
.vid-inner {margin:0 auto; width:75%; position:relative;}
.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:0;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
@media only screen and (max-width: 800px) {
	.vid-wrap {padding-top:6%; padding-bottom:4%;}        
    .vid-inner {width:82%;}
}	
		
		
/*========== PRODUCT PAGES ==========*/
.hero-image img {display:block;}
.fixings-image {background:url(/images/products/main/fixings-main.jpg) center no-repeat; background-size:cover;}
.prod-details {margin:0 auto; position:absolute; width:100%; bottom:0; left:0; text-align:center;}

.badges {position:absolute; width:185px; right:2.3%; margin-top:-270px; text-align:right;}

.roof-types {width:62%; text-align:center;}
.roof-type {width:48.5% !important; display: inline-block; *display:inline; line-height: 48px; height:50px; font-size:1.3em !important; text-transform:uppercase; border:4px solid #fff; border-bottom:none;}

.roof-type a {display:block; width:100%; height:100%; position:relative; text-decoration:none; color:#fff;}
#roof-type-lt {border-right:none;}
#roof-type-rt {border-left:none;}
#roof-type-lt a {text-align:left; padding-left:8.5%;}
#roof-type-rt a {text-align:right; padding-right:22% !important;}
.roof-type-on {background-color:#fff !important;}

.white-text {color:#fff;}

.svg-wrap {position:absolute; width:100%; height:100%;}
.svg-wrap svg {width:95px; margin-top:5px;}
.svg-left {text-align:right; left:0; padding-right:12px;}
.svg-right {text-align:left; right:0; padding-left:15px;}

.prod_colour {width:100%; margin:0 auto; padding-bottom:35px; padding-top:20px; border-top:4px solid #fff;}
.wrapper {text-align:center;}
.prod_colour .wrapper {-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d;}
.prod-arrow {position:absolute; top: 50%; transform: translateY(-50%); z-index:2500; width:30px;}
.prod-arrow a {cursor:pointer !important;}
.prev-arrow {left:0;}
.next-arrow {right:0;}
@media only screen and (max-width: 1100px) {
	.roof-types {width:70%;}
}
@media only screen and (max-width: 900px) {
	.roof-types {width:90%;}
}
@media only screen and (max-width: 800px) {
	.prod_colour {min-height:200px;}
	.prev-arrow {left:10px;}
    .next-arrow {right:10px;}
	.prod-arrow {width:25px;}
	.roof-types {width:100%;}
    .roof-type {width:50% !important;}
}
@media only screen and (max-width: 600px) {
   .prod-arrow {top: 3%; transform: translateY(-3%); width:20px;}
   .svg-wrap svg {width:75px;}
}
@media only screen and (max-width: 530px) {
   .prod-arrow {top: 2%; transform: translateY(-2%); width:18px;}
   #roof-type-lt a {padding-left:10px !important;}
   #roof-type-rt a {padding-right:19px !important;}
   .svg-wrap svg {width:60px;}
   .svg-wrap {margin-top:-4px;}
   .roof-type {font-size:1.2em; line-height: 47px;}
   .prod_colour {min-height:190px;}
}
@media only screen and (max-width: 420px) {
   .roof-type {font-size:1.18em !important;}
   .svg-wrap svg {width:50px;}
}
@media only screen and (max-width: 348px) {
   .roof-type {font-size:1.1em !important;}
}

.prod_colour h1 {font-size:3.8em; line-height:1em; font-family: 'fira_sanslight'; color:#fff; width:100%;}
.prod_colour h1 span {font-size:0.46em; position:relative; vertical-align:top; line-height:1em;}
@media only screen and (max-width: 800px) {
	.prod_colour h1 {font-size:3.2em; width:75%; margin:0 auto;}
}
@media only screen and (max-width: 500px) {
	.prod_colour h1 {font-size:2.6em; padding-top:1.4%; width:82%; text-align:center}
}
.prod-stats {text-align:center; width:85% !important; position:relative; padding-top:10px; font-family: 'fira_sanslight'; color:#fff; margin:0 auto; margin-bottom:12px;}
.prod-stats ul {margin:0 auto; padding:0; text-align:center;}
.prod-stats ul li {display: inline-block; zoom:1; *display:inline; text-align:center; margin:0 auto;}

.three-stat {width:32%; padding-left:1.888%; padding-right:1.888%;}
.two-stat {width:41%; padding-left:2.5%; padding-right:2.5%;}
.mid-stat {}

.prod-stats ul li+li {border-left: 1px solid #fff}
.prod-stats ul li:last-child {padding-right:0 !important;}
.prod-stats ul li:first-child {padding-left:0 !important;}

.stats-icon {font-size:3.5em; line-height:normal; height:auto; text-align:center; width:100%;}
.stats-txt {font-size:1.5em; line-height:1.27em; padding-top:5px !important; text-transform:uppercase; text-align:center; width:100%; margin:0 auto; font-family: 'fira_sansregular';}
.icon-img {display: inline-block; zoom:1; *display:inline; position:relative; vertical-align:middle; }
.stats-icon img {margin-left:11px; margin-bottom:5px; display:block; height:70px; width:auto;}

.prod-downloads {text-align:left; padding-left:15%; padding-right:15%; width:70%;}
.prod-downloads ul {min-width:500px !important;}
.prod-downloads li {width:50%; float:left; margin-bottom:8px;display:inline-block;}
.prod-downloads li a {line-height:40px; cursor:pointer; text-decoration:underline;}
.dn-svg {float:left; width:29px; height:36px; margin-right:15px;}


.round-wrap {text-align:center; position:absolute; bottom: 0; transform: perspective(1px) translateY(100%); width:100%; padding-top:5px;}
.fixings-round {top: 89.5%; transform: perspective(1px) translateY(-89.5%);}
.round-button-circle {
	margin-right:5px; margin-left:8px; margin-top:10px; display:inline-block;
	width: 13px; height:13px;
	border:1px solid #fff;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-khtml-border-radius: 6px;
	overflow:hidden;
	-moz-box-shadow: 1px 1px 0 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: 1px 1px 0 1px rgba(0,0,0,0.1);
	box-shadow: 1px 1px 0 1px rgba(0,0,0,0.1);
	cursor:pointer !important;
}
.round-button-circle:hover, .round-selected {background:#fff !important;}

@media only screen and (max-width: 870px) {
	.prod-stats {width:90% !important;}
	.stats-icon {font-size:3.3em;}
	.stats-icon img {height:65px;}
	.stats-txt {font-size:1.4em;}
}
@media only screen and (max-width: 735px) {
	.prod-stats {width:95% !important;}
	.stats-icon {font-size:3.2em;}
	.stats-icon img {height:62px;}
}
@media only screen and (min-width: 1280px) {
	.prod-downloads {width:65%;}
	.prod-downloads li {min-width: 200px;}
}
@media only screen and (max-width: 700px) {
	.prod-downloads {padding:0; width:55%; margin:0 auto; overflow:hidden !important;}
	.prod-downloads li {width:100%; float:none;}
	.stats-icon img {height:50px; margin-left:6px;}
	.stats-icon {font-size:2.5em;}
	.stats-txt {font-size:1.3em; line-height:1.1em;}
	.prod_colour {padding-bottom:31px; padding-top:16px;}
	.prod-stats {padding-top:20px; width:90% !important;}
	/*.round-wrap {display:none;}*/
}
@media only screen and (max-width: 637px) {
	.stats-txt {width:100%;}
}
@media only screen and (max-width: 636px) {
	.stats-txt {font-size:1.25em; width:92%;}
}
@media only screen and (max-width: 546px) {
	.icon-img {display: block !important; text-align:center; margin:0 auto; width:100%;}
	.icon-img img {display: block !important; margin:0 auto; clear:both !important;}
	.prod_colour {padding-bottom:30px !important;}
	
	.prod-stats {width:98% !important;}
	
	.stats-icon {font-size:2.9em;}
	.stats-icon img {height:65px;}
	.stats-txt {font-size:1.18em; padding-top:12px !important; width:95.5%; padding-bottom:8px;}
}

@media only screen and (max-width: 480px) {
	.prod-downloads {width:65%;}
}
@media only screen and (max-width: 340px) {
	.prod-downloads {width:85%;}
	.three-stat {width:32%; padding-left:0 !important; padding-right:0 !important;}
	.prod-stats {width:100% !important; margin:0 auto;}
	.stats-txt {font-size:0.9em;}
	.stats-icon {font-size:2.5em;}
	#roof-type-lt a {padding-left:5px !important;}
    #roof-type-rt a {padding-right:12px !important;}
   .svg-wrap svg {width:35px;}
   .roof-type {line-height: 40px; height:41px; font-size:1.2em;}
}

							
.prod_section h1 {font-size:3.1em; font-family: 'fira_sanslight'; line-height:3em;}
@media only screen and (max-width: 636px) {
	.prod_section h1 {font-size:2.6em; line-height:2.8em;}
}


.prod-display-title {color:#fff;}
.prod_section {text-align:center; padding-bottom:35px; margin-top:8px;}
.column-left, .column-right {margin-bottom:15px; width:50%;}
.column-left {float:left;}
.column-right {float:right;}

@media only screen and (max-width: 800px) {
	.column-left, .column-right {float:none; width:100%;}
}

.feature-wrap {padding-left:22px; padding-right:30px; display:table;}
.prod-feat-icon {width:78px; margin-right:30px; float:left;}
.prod-feat-icon img {width:100%; height:auto}
.prod-feat-text {text-align:left; font-family:Arial, sans-serif; display:table-cell; vertical-align:middle; }
.prod-feat-text p {color:#fff; line-height:1.35em; font-size:1em; letter-spacing:0.08em}

.section-title {width:80%; margin:0 auto; padding-top:40px; padding-bottom:35px;}
.section-title h1 {line-height:1.1em;}

.prod_info {background-color:#eeeeee;}
.info-text {
	-webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -webkit-column-gap: 4em;
     -moz-column-gap: 4em;
          column-gap: 4em;
		  text-align:left;
		  padding-left:20px;
		  padding-right:20px;
}
.info-text p {padding-bottom: 13px; line-height:1.4em; color:#333;}



/*========== FIXINGS ==========*/

.fixings .prod_colour {height:235px;}
@media only screen and (max-width: 560px) {
	.fixings .prod_colour {height:190px;}
}
.fixings .wrapper {position: relative; top: 45%; transform: perspective(1px) translateY(-45%);}
.fixings_list {background-color:#fff;}
.fixings_list h2 {font-size:2.4em; font-family: 'fira_sanslight'; line-height:1.1; color:#293864; margin-bottom:18px;}
.how-to h2 {color:#f57921;}

.fx-content {text-align:left; padding-left:40px; padding-right:20px; padding-top:25px;}
.fx-content p {line-height:1.3em !important;}
.fixings_list .row {background-color:#eeeeee; margin-bottom:8px;}
.fixings_list .row .column-left img {display:block; margin:0;}
.fixings_list .row .column-left {margin:0;}
.fx-content .dn-link {fill:#293864;}
.fx-content .dn-svg {float:left; width:29px; height:36px; margin-right:15px;}
.fx-link {margin-top:20px}
.fx-link a {line-height:40px;}

@media only screen and (max-width: 800px) {
	.fx-content {padding-left:20px;}
}





/*===========  HOME CHANGES  ============*/
.home-heading {background: rgba(244, 121, 32, 0.85); border:none;}
@media only screen and (max-width: 1050px) {
	.home-text {width:50% !important;}
	.home-text p {font-size:1.45em !important; line-height:1.45em !important;}
}
@media only screen and (max-width: 800px) {
	.home-text {width:70% !important;}
	.home-text p {font-size:1.4em !important; line-height:1.3em !important;}
}
@media only screen and (max-width: 710px) {
	.home-text {width:75% !important;}
	.home-text p {font-size:1.38em !important; line-height:1.28em !important;}
}
@media only screen and (max-width: 560px) {
	.home-text {width:95% !important;}
	.home-text p {font-size:1.3em !important; line-height:1.28em !important;}
}
@media only screen and (max-width: 370px) {
	.home-text p {font-size:1.22em !important; line-height:1.25em !important;}
}
@media only screen and (max-width: 360px) {
	.home-text p {font-size:1.2em !important; line-height:1.25em !important;}
}



.base-colour-text {color:#666;}
.base-colour-bg {background-color:#666;}



#button-1 {background: rgba(244, 121, 32, 0.85);}
#button-2 {background: rgba(153, 153, 153, 0.85);}
#button-3 {background: rgba(179, 129, 30, 0.85);}
#button-4 {background: rgba(250, 191, 38, 0.85);}
#button-5 {background: rgba(194, 195, 193, 0.85);}
#button-6 {background: rgba(142, 164, 187, 0.85);}
#button-7 {background: rgba(27, 44, 93, 0.85);}

@media only screen and (max-width: 560px) {
	.home-prod-title {font-size:2.5em; line-height:1.1em; padding-top:30px; padding-bottom:28px; text-align:center;}
}




/*===================  OTHER LINKS  ====================*/

.other-prods {width:100%; text-align:center; position:relative; overflow:hidden; padding-top:23px; clear:both; display:block;}
.other-prods h3 {color:#666; font-size:1.8em; font-family: 'fira_sanslight'; line-height:1.1em; padding-bottom:30px;}
.col_2 {float:left; display:block; width:50%; padding-bottom:15px; padding-top:15px; text-align:center; cursor:pointer; border-bottom:1px solid #fff;}
.col_2 img {height:30px; display:block; margin:0 auto;}
#other-left {background-color:#202A59;}
#other-right {background-color:#f57921; border-left:1px solid #fff;}
		
@media only screen and (max-width: 760px) {
	.col_2 {width:100%; float:none;}
	#other-right {border-left:none;}
}		
		

/*===================  FOOTER  ====================*/
footer .footer-content {width:100%; background-color:#f57921;}
footer .container {width:90%; margin:0 auto; clear:both; padding-top:30px; color:#fff;}
footer .container a {color:#fff; text-decoration:none;}
footer .container a:hover {text-decoration:underline;}
.row {clear:both;}
.footer-left {width:50%; padding-bottom:25px; text-align:left;}
.ul-col {margin-right: 38px; float:left !important; position:relative; padding:0;}
.ul-col li {display:block; line-height:1.5em; text-transform:uppercase; font-size:1.05em;}

.footer-right {text-align:right;}
.footer-right a {text-align:center; font-size:2em; color:#fff; margin-left:11px;}
#ph-num, .num-right {font-size:1.6em; color:#fff; font-family: 'fira_sanslight'; line-height:1.8em;}
#ph-num {padding-right:10px;}
#ph-num:hover {color:#fff; text-decoration:underline;}
.footer-right a:hover {color:#000;}
.footer-small {padding-top:15px; padding-bottom:15px; text-align:right; width:100%; border-top:1px solid #fff; font-size:0.95em;}
@media only screen and (min-width: 900px) {
	#ph-num {pointer-events: none; cursor: default;}
}


.clear-both {clear:both;}


/*===================  GALLERY PAGE  ====================*/
.max-width {max-width:1600px;}
.item {position:relative; background:#000 !important;}
.gallery-wrap .item a {position:relative;}
.gallery-wrap .item a:focus {outline:none;}
.item a img{
	cursor:pointer !important;
	-o-transition:all .5s ease-in-out;
	-ms-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
}
.item a > img:hover {
	opacity:0.6 !important;
	filter:alpha(opacity=60) !important;
}
.img-overlay {position:absolute; width:100%; height:40px; line-height:40px; color:#fff; text-indent:20px; background:rgba(0,0,0,0.4); z-index:5000; bottom:0;}




/* ========================  CONTACT FORM  ==========================*/
form {margin:0; padding:0;}

.container {padding-top:20px; width:100%;}

.page-main-wrap {text-align:center; min-height:600px;}
.contact-wrap {background:url(/images/pages-generic/contact-main.jpg) no-repeat top center; background-size:cover; padding-top:25px; padding-bottom:8%; text-align:center;}
.contact-inner {position:relative; margin:0 auto; width:38%;}
#contact-heading {line-height: 1.1em; padding-top:35px; padding-bottom:56px;}
#form-messages {font-size:1.2em;}


/* ========================  FAQs  ==========================*/
.faq-wrap {text-align:left; background:url(/images/faq/main.jpg) no-repeat top left; background-size:cover; min-height:630px;}
.q_list {background-color: #eeeeee; margin:0 auto; padding-top:35px !important; padding-bottom:10px !important;}
.q_list p {font-size:1.2em; line-height:1.2em;}
.q_list .row {padding-bottom: 28px; padding-left:15px; padding-right:15px; text-align:left;}
.q-item {color: #f47920; padding-bottom:5px;}
.q-item, .a-item {padding-left:28px;}
.q-num {position:absolute; font-size:1.5em; color:#f57921; font-family: 'fira_sanslight'; padding-top:4px; text-align:right;}
.a-item p {padding-bottom:10px;}
.a-item p strong {font-family: 'fira_sansmedium';}

@media only screen and (max-width: 760px) {
	.page-main-wrap {min-height:500px;}
	.footer-left {width:42%;}
	.footer-left .ul-col {margin-right: 0 !important;}
	.footer-left .ul-col li {font-size:1em; padding-right:12px;}
	.footer-small {text-align:left;}
	.footer-small .float-left, .footer-small .float-right {float:none;}
}
@media only screen and (max-width: 500px) {
	.page-main-wrap {min-height:380px;}
	.footer-left .ul-col li {padding-right:0;}
	.footer-left {width:120px;}
}


/* ========================  PRODUCT TWEAKS  ==========================*/
.prod-image {min-height:780px;}
.landing .content-inner {margin-top:71px}
@media only screen and (max-width: 760px) {
	.prod-image {min-height:680px;}
	.rt-icon {display:none;}
}

@media only screen and (max-width: 500px) {
	.prod-image {min-height:750px !important;}	
}

@media only screen and (max-width: 420px) {
	.home .hero-image {height:91vh !important;}	
}
@media only screen and (max-width: 360px) {
	.home .hero-image {min-height:650px !important;}	
}



#form-div {position:relative; width: 100%;}
#form-div .column-left, #form-div .column-right {margin:0; width:48.8%;}

@media only screen and (max-width: 960px) {
	.contact-inner {width:60%;}
	#form-div .column-left, #form-div .column-right {float:none; width:100%;}
}
@media only screen and (max-width: 500px) {
	.contact-inner {width:90%;}
}
.feedback-input {
	color:#3c3c3c;
	font-size: 1em;
	border-radius: 0;
	line-height: 1.1em;
	background-color: #fbfbfb;
	margin-bottom: 11px;
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
    border: 1px solid rgba(0,0,0,0);
	padding:10px 10px 10px 40px;
}

.feedback-input:focus{
	background: #fff;
	box-shadow: 0;
	border: 1px solid #666;
	color: #666;
	outline: none;
}
#form-messages {line-height:normal; color:#fff; font-size:1.1em; margin-top:-10px; padding-bottom:8px;}

.focused {color:#666; border:black solid 1px;}

/* Icons ---------------------------------- */
#formfname, #formlname{
	background-image: url(/images/pages-generic/name.svg);
	background-size: 20px 20px;
	background-position: 8px 7px;
	background-repeat: no-repeat;
}

#formfname:focus, #formlname:focus{
	background-image: url(/images/pages-generic/name.svg);
	background-size: 20px 20px;
	background-position: 8px 7px;
	background-repeat: no-repeat;
}

#formemail{
	background-image: url(/images/pages-generic/email.svg);
	background-size: 20px 20px;
	background-position: 10px 7px;
	background-repeat: no-repeat;
}

#formemail:focus{
	background-image: url(/images/pages-generic/email.svg);
	background-size: 20px 20px;
    background-position: 10px 7px;
	background-repeat: no-repeat;
}


#formph{
	background-image: url(/images/pages-generic/phone.svg);
	background-size: 20px 20px;
	background-position: 10px 7px;
	background-repeat: no-repeat;
}

#formph:focus{
	background-image: url(/images/pages-generic/phone.svg);
	background-size: 20px 20px;
    background-position: 10px 7px;
	background-repeat: no-repeat;
}

#formcomment{
	background-image: url(/images/pages-generic/comment.svg);
	background-size: 20px 20px;
	background-position: 10px 7px;
	background-repeat: no-repeat;
}

textarea {
    width: 100%;
    height: 160px;
    line-height: 1.1em;
    resize:vertical;
}

.button-link {
	border:none;
	background-color:#f47920; display:inline-block; padding:11px; color:#FFF;
	text-decoration:none;
	outline:none;
	cursor:pointer;
	width:100%;
	font-size:1.2em;
	-webkit-appearance: none;
    border-radius: 0;
}
.button-link:focus {
	outline:none;	
}
.button-link:hover {
	text-decoration:none;
	background-color:#666;
}
.button-link:active {
	text-decoration:none;
	background-color:#f47920;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
	background-color:white;
}
::-webkit-input-placeholder {
 color:#ccc;
}
:-moz-placeholder {
 color:#ccc;
}
::-moz-placeholder {
 color:#ccc;
}
:-ms-input-placeholder {
 color:#ccc;
}

@-webkit-keyframes fadeinout {
  50% { opacity: 1; }
}

@keyframes fadeinout {
  50% { opacity: 1; }
}
@media only screen and (max-width: 760px) {
	.ul-col {margin-right: 25px;}
}
@media only screen and (max-width: 480px) {
}