@import assets/normalise.css;

/*
Theme Name: ColorCote 2015
Author: GWDesign Ltd
Author URI: https://www.gwdesign.co.nz
Description: Custom Theme for ColorCote
Version: 2.0
Text Domain: gwd_colorcote
*/
/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Branding
- Navigation
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* apply a natural box layout model to all elements, but allowing components to change */
html {
    box-sizing:border-box
}

*,:before,:after {
    box-sizing:inherit
}

.container {
    position:relative;
    width:100%;
    max-width:1366px;
    margin:0 auto;
    padding:0;
    box-sizing:border-box;
    background-color:#fff
}

.column,.columns {
    width:100%;
    float:left;
    box-sizing:border-box
}

.column-content {
    margin:2rem
}

.column.first {
    margin-left:0
}

/* For devices larger than 400px */
@media (min-width: 400px) {
.container {
    width:100%;
    padding:0
}

.column,.columns {
    margin-left:4%
}

.top5-content .column,.top5-content .columns {
    margin-left:1.5%
}

.top5-content .five.columns {
    width:38%
}

.top5-content .two.columns {
    width:21%
}

.column:first-child,.columns:first-child {
    margin-left:0
}

.widgetcolumns.columns:first-child,.widgetcolumns.columns:nth-child(3),.widgetcolumns.columns:nth-child(5),.widgetcolumns.columns:nth-child(7) {
    margin-left:0
}

.widgetcolumns.columns {
    margin-left:2%;
    width:49%;
    height:49vw;
    max-height:328px;
    margin-bottom:2%
}
}

/* Distributors Page
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.distributor-entry-content {
    display:block;
    padding:10px 0;
    border-bottom:1px solid #333;
    position:relevant
}

.distributor-entry-content .dist-name {
    color:#666;
    width:100%;
    display:block;
    vertical-align:top;
    margin-right:1%
}

.distributor-entry-content .dist-addy {
    width:70%;
    display:inline-block;
    vertical-align:top;
    margin-right:1%
}

.distributor-entry-content .dist-sub {
    width:30%;
    display:inline-block;
    vertical-align:top;
    margin-right:1%
}

.distributor-entry-content .dist-ph {
    width:100%;
    display:block;
    vertical-align:top
}

.row.column-content.dist {
    margin-top:0!important
}

.row.column-content.disttop {
    margin-bottom:0!important
}

/* For devices larger than 550px */
@media (min-width: 550px) {
.one.column,.one.columns {
    width:4.66666666667%
}

.two.columns {
    width:13.3333333333%
}

.three.columns {
    width:22%
}

.four.columns {
    width:30.6666666667%
}

.five.columns {
    width:39.3333333333%
}

.six.columns {
    width:48%
}

.seven.columns {
    width:56.6666666667%
}

.eight.columns {
    width:65.3333333333%
}

.nine.columns {
    width:74%
}

.ten.columns {
    width:82.6666666667%
}

.eleven.columns {
    width:91.3333333333%
}

.twelve.columns {
    width:100%;
    margin-left:0
}

.one-third.column {
    width:30.6666666667%
}

.two-thirds.column {
    width:65.3333333333%
}

.one-half.column {
    width:48%
}

.one-whole.column {
    width:100%
}

/* Offsets */
.offset-by-one.column,.offset-by-one.columns {
    margin-left:8.66666666667%
}

.offset-by-two.column,.offset-by-two.columns {
    margin-left:17.3333333333%
}

.offset-by-three.column,.offset-by-three.columns {
    margin-left:26%
}

.offset-by-four.column,.offset-by-four.columns {
    margin-left:34.6666666667%
}

.offset-by-five.column,.offset-by-five.columns {
    margin-left:43.3333333333%
}

.offset-by-six.column,.offset-by-six.columns {
    margin-left:52%
}

.offset-by-seven.column,.offset-by-seven.columns {
    margin-left:60.6666666667%
}

.offset-by-eight.column,.offset-by-eight.columns {
    margin-left:69.3333333333%
}

.offset-by-nine.column,.offset-by-nine.columns {
    margin-left:78%
}

.offset-by-ten.column,.offset-by-ten.columns {
    margin-left:86.6666666667%
}

.offset-by-eleven.column,.offset-by-eleven.columns {
    margin-left:95.3333333333%
}

.offset-by-one-third.column,.offset-by-one-third.columns {
    margin-left:34.6666666667%
}

.offset-by-two-thirds.column,.offset-by-two-thirds.columns {
    margin-left:69.3333333333%
}

.offset-by-one-half.column,.offset-by-one-half.columns {
    margin-left:52%
}


#cs-distributor-form {
padding:40px 40px !important;
}

}

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
    font-size:62.5%;
    width:100%
}

body {
    font-size:1.5em;
/* currently ems cause chrome bug misinterpreting rems on body element */
    line-height:1.6;
    font-weight:400;
    font-family:'Open Sans',sans-serif;
    color:#222;
    background-color:#fafafa
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1,h2,h3,h4,h5,h6 {
    margin-top:0;
    margin-bottom:2rem;
    font-weight:300
}

h1 {
    font-size:4rem;
    line-height:1.2;
    letter-spacing:-.1rem
}

h2 {
    font-size:3.6rem;
    line-height:1.25;
    letter-spacing:-.1rem
}

h3 {
    font-size:3rem;
    line-height:1.3;
    letter-spacing:-.1rem
}

h4 {
    font-size:2.4rem;
    line-height:1.35;
    letter-spacing:-.08rem
}

h5 {
    font-size:1.8rem;
    line-height:1.5;
    letter-spacing:-.05rem
}

h6 {
    font-size:1.5rem;
    line-height:1.6;
    letter-spacing:0
}

/* Larger than phablet */
@media (min-width: 550px) {
h1 {
    font-size:5rem
}

h2 {
    font-size:4.2rem
}

h3 {
    font-size:3.6rem
}

h4 {
    font-size:3rem
}

h5 {
    font-size:2.4rem
}

h6 {
    font-size:1.5rem
}
}

p {
    margin-top:0
}

/* Branding
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#mobile-branding {
    height:auto;
    overflow:hidden;
    display:block;
    top:0;
    background-color:#fff;
    z-index:1000;
    width:100%
}

.product-logo {
    width:90%;
    margin:8rem auto
}

/* GilidPanel Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.gilidPanel i.fa-facebook {
    color:#2b323a!important
}

.gilidPanel .search-form {
    margin-bottom:0!important
}

.gilidPanel #search-3 {
    margin-bottom:0!important
}

.gilidPanel-opener a {
    padding:12px 20px!important
}

.gilidPanel-opener a i:before {
    content:"\f0c9"!important;
    *zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#x<?php echo str_replace("\\","","\f0c9");?>;')!important
}

.gilidPanel-opener-opened a i:before {
    content:"\f00d"!important;
    *zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#x<?php echo str_replace("\\","","\f00d");?>;')!important
}

#gilidPanel-slide-right .gilidPanel-wrap span.gldpnl-dropdown {
font-size:20px;
line-height:22px;
padding:0 20px;
}
#gilidPanel-slide-right .gilidPanel-wrap span.gldpnl-dropdown.opened {
font-size:30px;
line-height:22px;
margin-right:1px;
}
#gilidPanel-slide-right .gldpnl-has-children {
display:block;
min-height:20px;
}
#gilidPanel-slide-right .gldpnl-has-children ul.sub-menu {
margin-bottom:10px;
}
#gilidPanel-slide-right .search-btn {
    border:none!important;
    margin-left:-40px;
    background-color:transparent;
    padding:5px 5px 5px 0
}

#gilidPanel-slide-right .search-field {
    background-color:#7a7a7b;
    border-radius:10px;
    border-color:transparent;
    color:#fff!important;
    width:150px
}

div.gilidPanel .gilidPanel-wrap .menu a:hover {
    border-left:none!important;
    padding-left:0!important;
    -webkit-transition-property:none!important;
    -moz-transition-property:none!important;
    -o-transition-property:none!important;
    transition-property:none!important;
    -webkit-transition-duration:.05s;
    -moz-transition-duration:.05s;
    -o-transition-duration:.05s;
    transition-duration:.05s;
    -webkit-transition-timing-function:ease-in-out;
    -moz-transition-timing-function:ease-in-out;
    -o-transition-timing-function:ease-in-out;
    transition-timing-function:ease-in-out
}

div.gilidPanel .gilidPanel-wrap .menu .current-menu-item>a {
    border-left:none!important;
    padding-left:0!important
}

#hero-image {
    width:100%;
    height:20rem;
    background-position:top center;
    background-repeat:no-repeat;
    text-align:center
}

#hero-image h1 {
    color:#fff;
    padding-left:2rem;
    padding-top:5rem;
    text-align:left
}

.page-id-435 #hero-image {
    background-position:-100px 0;
    background-size:922px 200px
}

.page-id-319 #hero-image {
    background-position:center top ;
    background-size:922px 200px
}

.page-id-319 #hero-image h1 {
    padding-left:2rem;
    padding-top:5rem;
    font-size:3rem;
    color:#414042;
    width:63%
}

.page-id-355 #hero-image h1 {
    padding-top:2rem
}

.page-id-355 #hero-image h1 br {
    display:none;
    clear:none
}

#site-logo {
    padding-left:10px;
    padding-top:4px;
    width:110px;
    text-align:center
}

#site-logo img,#site-description img,#unicote-site-description img {
    width:100%
}

#site-description,#unicote-site-description {
    margin-left:0;
    width:100%;
    text-align:center
}

.utilities {
    margin-right:0;
    height:90px;
    margin-bottom:1rem;
    position:relative;
    z-index:100
}

#branding {
    height:auto;
    overflow:visible;
    display:block
}

#header {
    height:auto
}

#footer {
    background-color:#565d63
}

#footer-logo {
    width:180px;
    display:block;
    margin:0 auto
}

#footer-logo img {
    margin:1rem auto;
    width:100%
}

#footer-menu {
    text-align:center;
    margin:0 auto
}

#footer-menu ul,#footer-menu ul li {
    list-style-type:none;
    padding:0;
    margin:0
}

#footer-menu ul li {
    display:inline
}

#footer-menu a {
    color:#fff;
    text-decoration:none;
    border-right:1px solid #fff;
    padding:0 10px 0 5px;
    font-size:1.1rem;
    line-height:1.2;
    letter-spacing:0
}

#footer-menu .fa {
    padding-left:.5rem
}

#footer-menu .fa-inverse {
    color:#565d63
}

#footer-menu a:hover {
    color:#889ead!important
}

#footer-menu li:last-child a {
    border-right:none;
    display:block
}

#footer-menu li:nth-child(4) a {
    border-right:none
}

#copyright {
    color:#fff;
    text-align:center;
    font-size:70%;
    padding:2rem
}

#homeintro {
    background-image:url(img/roofing-cladding-guide-bg.jpg);
    background-position:bottom right;
    background-repeat:no-repeat;
    background-size:100%
}

.the-intro {
    background-image:none;
    background-position:center top;
    background-repeat:repeat-y;
    display:block
}

.tp-bullets.simplebullets.round .bullet {
    background-image:url(img/slide-nav.png)!important
}

.quicklink {
    height:328px;
    text-align:center;
    border-bottom:2px solid #fff
}

.quicklink a {
    width:100%;
    height:328px;
    display:block
}

.quicklink .qllogo {
    margin:0 auto;
    width:100%;
    max-width:100%
}

.one-whole.column {
    padding:0 2rem
}

#homeintro .one-half.column {
    padding-left:2rem;
    padding-right:2rem
}

#homeintro .one-half.column.rcgbg {
    padding-left:2rem;
    padding-right:2rem;
    margin-left:0!important
}

#homeintro .one-half.column.rcgbg h3 {
    padding-top:2rem;
    border-top:1px solid #889ead
}

#homeintro h3 {
    font-weight:300;
    width:100%;
    color:#414042;
    font-size:3rem;
    letter-spacing:.02rem
}

#homeintro p,#homeintro .rcgbg-text {
    font-size:2rem;
    color:#414042;
    font-weight:300;
    letter-spacing:.1rem
}

.rcgbg-text {
    display:block;
    width:80%
}

#homeintro .homeintro-buttons {
    margin-bottom:0;
    margin-top:2rem;
    display:block;
    height:auto;
    clear:both
}

#homeintro .homeintro-buttons button {
    margin-left:0;
    font-size:12px;
    font-size:1.2rem;
    font-weight:400;
    margin-bottom:1rem
}

#homeintro a {
    text-decoration:none;
    color:#414042;
    font-weight:600
}

.spacer {
    height:4rem;
    display:block
}

.smspacer {
    height:2rem;
    display:block
}

sup {
    font-size:40%;
    vertical-align:super;
    font-family:sans-serif
}

#distributor-form {
    position:absolute;
    bottom:0;
    margin-bottom:0;
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;
    left:0;
    right:0;
    font-weight:600;
    color:#414042;
    text-align:center;
    display:block;
    width:100%
}

#distributor-form h4 {
    color:#fff;
    font-weight:700;
    font-size:4rem;
    line-height:4rem
}

#brochure-gallery {
    margin-bottom:4rem;
    display:block;
    height:auto;
    clear:both
}

.brochure-panel {
    background-color:#e2e8eb;
    padding:20px;
    margin-bottom:2rem;
    min-height:260px
}

.brochure-panel-alumigard {
    border:solid 4px #f96876;
    padding:20px;
    margin-bottom:2rem;
    height:auto
}

li.alumigard .cs-info {
    background-color:rgba(249,104,118,0.9)
}

.brochure-panel-magnaflow {
    border:solid 4px #00a7df;
    padding:20px;
    margin-bottom:2rem;
    height:auto
}

li.magnaflow .cs-info {
    background-color:rgba(0,167,223,0.9)
}

.brochure-panel-zinacore {
    border:solid 4px #00b161;
    padding:20px;
    margin-bottom:2rem;
    height:auto
}

li.zinacore .cs-info {
    background-color:rgba(0,177,97,0.9)
}

.img-wrapper,.cs-wrapper {
    width:150px;
    height:150px;
    overflow:hidden;
    display:inline-block;
    position:relative
}

.img-info {
    width:151px;
    height:150px;
    position:absolute;
    bottom:0;
    left:152px;
    background-color:rgba(157,178,190,0.9);
    text-align:center;
    padding:10px;
    padding-top:40px
}

.cs-info {
    width:151px;
    height:150px;
    position:absolute;
    bottom:0;
    left:152px;
    background-color:rgba(157,178,190,0.9);
    text-align:center;
    padding:10px;
    padding-top:25px
}

a .img-info,a .cs-info {
    color:#fff
}

.cs-info .substrate {
    font-size:1.8rem
}

.cs-info .rcs {
    font-size:1.1rem
}

.cs-info .line {
    display:block;
    height:0;
    width:40px;
    border-top:1px solid #fff;
    margin:1rem auto;
    background-color:#fff
}

.single-col-brochures .brochure-panel {
    margin-bottom:2rem!important
}


.brochure-panel-alumigard img.brochure,.brochure-panel-magnaflow img.brochure,.brochure-panel-zinacore img.brochure {
    float:right;
    width:120px;
    height:180px;
    box-shadow:1px 1px 10px rgba(0,0,0,0.6);
    margin-left:1rem;

}

.last .brochure-panel {
    margin-bottom:0
}

.brochure-panel h5 {
    margin-top:0
}

.brochure-panel a {
    position:relative;
    height:0;
    margin:0;
    padding:0
}

.brochure-panel img.brochure,.stepbystep-rc-panel img.brochure,.stepbystep-rr-panel img.brochure {
    float:none;
    width:150px;
    height:212px;
    box-shadow:1px 1px 10px rgba(0,0,0,0.6);
    margin-bottom:2rem
}

.brochure-panel img.envguide {
    float:right;
    width:200px;
    height:69px;
    border:solid 4px #fff;
    box-shadow:1px 1px 10px rgba(0,0,0,0.6)
}

.brochure-panel br,.stepbystep-rc-panel br,.stepbystep-rr-panel br {
    height:0;
    margin:0;
    padding:0;
    display:none
}

.brochure-panel br.show,.stepbystep-rc-panel br.show,.stepbystep-rr-panel br.show {
    display:block
}

.stepbystep-rc-panel {
    background-color:#567685;
    padding:20px;
    margin-bottom:2rem;
    color:#fff
}

.stepbystep-rr-panel {
    background-color:#898a86;
    padding:20px;
    margin-bottom:2rem;
    color:#fff
}

.stepbystep-rr-panel .button-reversed {
    color:#898a86
}

.stepbystep-rc-panel .button-reversed {
    color:#567685
}

.stepbystep-rc-panel p:last-child,.stepbystep-rr-panel p:last-child {
    margin-bottom:0
}

.gettheapp-wide {
    width:100%;
    margin-bottom:1rem
}

.filelist {
}

.filelist ul,.filelist li {
}

.filelist li i {
    color:#414042
}

.filelist li a {
    color:#414042;
    text-decoration:none
}

/* Roof Wash Order Form */
.roofwash-form .gform_wrapper label.gfield_label {
font-weight:normal;
}
.roofwash-form .ginput_container_name span.name_prefix {
display:block;
float:none;
}
.roofwash-form div.ginput_complex.ginput_container.gf_name_has_3 span {
width:50%;
}
.roofwash-form div.ginput_complex.ginput_container.gf_name_has_3 span.name_prefix {
width:100px;
}
.roofwash-form .gform_button {
padding:15px;
height:auto;
float:right;
background-color: #669900; color:#ffffff;  }
.roofwash-form .gform_button:hover {
background-color: #336600; color:#ffffff; }
.roofwash-form .gfield_description img {
width:150px;
margin-right:10px;
}
.form-image {
position:absolute;
right:10%;
top:5%;
max-height:280px;
}

.payment-methods img {
width:100px;
margin-right:10px;
margin-bottom:10px;
}
.roofwash-form  .gform_wrapper .gform_body h2.gsection_title {
font-weight:500;
}
.roofwash-form .gform_wrapper span.ginput_total {
font-size:2.4rem;
}
@media (max-width:900px) {
.roofwash-form div.ginput_complex.ginput_container.gf_name_has_3 span, .roofwash-form .gform_wrapper .top_label input.medium, .gform_wrapper .ginput_complex .ginput_left, .roofwash-form .gform_wrapper .ginput_complex .ginput_right, .roofwash-form .gform_wrapper .ginput_complex .ginput_left  {
width:100%;
}}
@media (max-width:750px) {

.form-image {
right:1%;
top:5%;
max-height:180px;
}
}


#gform_fields_1_2 font {
    font-family:'Open Sans', sans-serif !important;
  font-size:1.3rem !important;}
#gform_fields_1_2 td {
border-bottom:none;
}
#gform_fields_1_2 #field_1_29 table {
margin-bottom:0px;
}
#gform_fields_1_2 #field_1_29 table tfoot tr td strong  {
 font-size:1.6rem !important;
 }
#gform_previous_button_1 { margin-bottom:20px; }
#gform_fields_1_2 #field_1_29 table, #gform_fields_1_2 #field_1_29 table tr {
background-color: #ffffff;
    font-family:'Open Sans', sans-serif !important;
    }    
     #gform_fields_1_2 #field_1_29 table tr:nth-child(12), #gform_fields_1_2 #field_1_29 table tr:nth-child(13) {
display:none;}
   #gform_fields_1_2 #field_1_29 table tbody tr:nth-child(10) td, #gform_fields_1_2 #field_1_29 table tbody tr:nth-child(14) td {
padding-top:20px; 
}
    #gform_fields_1_2 #field_1_29 table tbody tr:nth-child(9) td {
    display:none;
    }
    
    /* #gform_fields_1_2 #field_1_29 table tr table tr table tfoot tr td:nth-child(3) strong:before {content:"NZD";} */
    
#gform_fields_1_2 #field_1_29 table strong {   
    font-family:'Open Sans', sans-serif !important;
 font-weight:600 !important; font-size:1.6rem;
}
#gform_fields_1_2 #field_1_29 table tr td { padding: 0px 0px 4px 0px;}
#gform_fields_1_2 #field_1_29 table tr td[width="20"] { padding: 0px; display:none;}
#gform_fields_1_2 #field_1_29 table tr[bgcolor="#EAF2FA"] td { padding: 0px; }
/*									*/
/*									*/
/* 			iPhone 6 Plus 			*/
/*									*/
/*									*/
/*									*/
@media (min-width:412px) and (max-width:418px) {

html {
    width:100%
}

#distributor-form h4 {
    color:#fff;
    font-weight:700;
    font-size:2.5rem;
    line-height:2.5rem
}

#distributor-form {
    margin-bottom:-20px
}
}


#distributor-form .dist-button,#cs-distributor-form .dist-button {
    font-weight:400;
    font-size:1.5rem;
    color:#fff;
    background:#646262;
    background:-moz-linear-gradient(top,#646262 0%,#646262 48%,#4d4d4e 52%,#4d4d4e 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#646262),color-stop(48%,#646262),color-stop(52%,#4d4d4e),color-stop(100%,#4d4d4e));
    background:-webkit-linear-gradient(top,#646262 0%,#646262 48%,#4d4d4e 52%,#4d4d4e 100%);
    background:-o-linear-gradient(top,#646262 0%,#646262 48%,#4d4d4e 52%,#4d4d4e 100%);
    background:-ms-linear-gradient(top,#646262 0%,#646262 48%,#4d4d4e 52%,#4d4d4e 100%);
    background:linear-gradient(to bottom,#646262 0%,#646262 48%,#4d4d4e 52%,#4d4d4e 100%);
    -webkit-border-radius:0 8px 8px 0;
    -moz-border-radius:0 8px 8px 0;
    border-radius:0 8px 8px 0;
    border-color:#fff;
    margin-left:-2.1rem;
    line-height:1.5rem;
    height:3.9rem;
    position:absolute
}

#distributor-form select:focus,#cs-distributor-form select:focus {
    border-color:#424242
}

#distributor-form select {
    border:solid 4px #fff!important;
    line-height:1.5rem;
    height:3.9rem;
    margin-left:-6.1rem;
    padding:2px 6px!important
}

#cs-distributor-form select {
    border:solid 4px #fff!important;
    line-height:1.5rem;
    height:3.9rem;
    padding:2px 6px!important
}

/* Menu Mobile */
#menu {
    display:none
}

/* Top Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#top-menu {
    float:none;
    margin-top:1.1rem;
    margin-left:auto;
    margin-right:1rem;
    margin-bottom:1rem;
    display:none;
    width:100%
}

#top-menu ul,#top-menu ul li {
    list-style-type:none;
    padding:0;
    margin:0;
    text-align:center
}

#top-menu ul li {
display:block;
width:auto;
}
#top-menu ul li ul {
display:none;
background-color: #e2e8eb;
margin-top:-3px;
margin-left:100px;
width:auto;
text-align: left;
z-index: 9999;
padding-top:5px;
}
#top-menu ul li.has-sub a {
padding-right:30px;
}
#top-menu ul li.has-sub a:after {
    content:'';
    position:absolute;
    margin-top:12px;
    margin-left:8px;
    border:5px solid transparent;
    border-top:5px solid #000
}
#top-menu ul li.has-sub li a:after {
border:none;
}
#top-menu ul li.has-sub li a {
padding-right:10px;
}

#top-menu li:hover > ul {
display:block;
position:absolute;
float:left;
}
#top-menu ul li ul li {
border:none;
display:block;
width:auto;
text-align: left;
}
#top-menu ul li ul li:last-child {
padding-bottom:5px;
padding-top:0px;
}

#top-menu ul li ul li a {
    border-right:none;
}

#top-menu a {
    color:#414042;
    text-transform:uppercase;
    text-decoration:none;
    border-right:1px solid #414042;
    padding:5px 10px 5px 5px;
    font-size:1rem;
    line-height:1.2;
    letter-spacing:0
}

#top-menu a:hover {
    color:#889ead!important
}

#top-menu li:last-child a {
    border-right:none
}

#search .search-form .search-field {
    width:75%;
    float:left;
    margin-left:1rem;
    padding:6px 10px;
/* The 6px vertically centers text on FF, ignored by Webkit */
    background-color:#fff;
    border:1px solid #D1D1D1;
    border-radius:4px;
    line-height:normal
}

#search {
    margin-top:2rem;
    text-align:right;
    display:block
}

#search .search-form {
    margin-top:2rem;
    margin-bottom:0
}

.minirow {
    width:100%;
    display:block;
    clear:both;
    margin-bottom:1.5rem
}

.darkpanel {
    padding:3rem 3rem .5rem;
    background-color:#414042;
    float:none;
    width:100%;
    color:#f1f1f0
}

.lightpanel {
    padding:3rem 3rem .5rem;
    background-color:#f1f1f0;
    float:none;
    width:100%;
    color:#414042;
    clear:right
}

/* Latest News Page
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#sidebar .search-form {
    margin-top:2rem
}

#sidebar h3.widget-title {
    font-size:1.5rem;
    font-weight:400
}

#sidebar .widget_recent_entries ul,#sidebar .widget_recent_entries li {
    list-style-type:none
}

#sidebar .post-date {
    color:#889ead;
    display:block;
    margin-bottom:.5rem!important
}

#sidebar .search-form .search-field {
    width:auto;
    background:#fff;
    border:1px solid #889ead;
    outline:0!important;
    color:#889ead;
    font-style:italic;
    border-radius:4px
}

#sidebar .search-form .search-btn {
    background:0 0;
    border:0;
    font-size:18px;
    color:#889ead;
    margin:-2px 0 0 -60px;
    cursor:pointer
}

.post-container img {
    width:100%
}

.post-container .article-title-link a {
    text-decoration:none;
    color:#222
}

.post-container h5.article-title-link {
    margin-bottom:.5rem!important
}

.post-container .item hr {
    margin-bottom:0
}

.post-container .entry-date,.type-post .entry-date {
    color:#889ead;
    display:block;
    margin-bottom:.5rem!important
}

.wp-caption-text {
    font-size:1.3rem
}

footer.entry-footer .cat-links a,footer.entry-footer .tag-links a,.tagcloud a {
    padding:1rem;
    border:solid 1px #222;
    margin:0 .5rem;
    color:#222;
    text-decoration:none
}

.tagcloud a {
    display:inline-block;
    margin-bottom:1rem
}

.widget.widget_tag_cloud {
    margin-bottom:2rem
}

.widget_categories ul {
    list-style-type:none;
    margin:0 0 2rem
}

.widget_categories li a {
    padding:1rem;
    border:solid 1px #222;
    margin:0 .5rem;
    color:#222;
    display:block;
    text-decoration:none
}

.post img.wp-post-image {
    max-width:100%;
    height:auto
}

.article-footer {
    display:block;
    height:2rem
}

/* Latest News Page Masonry
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.masonry {
    margin:1.5em 0;
    padding:0;
    -moz-column-gap:1.5em;
    -webkit-column-gap:1.5em;
    column-gap:1.5em;
    font-size:.85em
}

.item {
    display:inline-block;
    margin:0 0 1.5em;
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box
}

@media only screen and (min-width: 400px) {
.masonry {
    -moz-column-count:1;
    -webkit-column-count:1;
    column-count:1
}
}

@media only screen and (min-width: 700px) {
.masonry {
    -moz-column-count:1;
    -webkit-column-count:1;
    column-count:1
}
}

@media only screen and (min-width: 900px) {
.masonry {
    -moz-column-count:2;
    -webkit-column-count:2;
    column-count:2
}
}

@media only screen and (min-width: 1100px) {
.masonry {
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count:3
}
}

.cat-links {
    display:block;
    min-height:50px;
    height:auto;
    margin-bottom:1rem
}

@media (max-width: 480px) {
.product-tabs-content {
    min-height:604px !important
}
#post-582 h1.hero_title {
font-size:3rem !important;
} #post-582 h1.hero_title br {
display:none;}

}

/*									*/
/*									*/
/* Larger than mobile 400px			*/
/*									*/
/*									*/
/*									*/
@media (min-width: 400px) {
.brochure-panel img.brochure,.stepbystep-rc-panel img.brochure,.stepbystep-rr-panel img.brochure {
    float:right
}

body {
    padding-top:0
}

#site-logo {
    max-width:110px;
    margin-top:0;
    margin-bottom:0
}

#search .search-form {
    margin-bottom:2.5rem
}

#footer-menu li:last-child a {
    display:inline-block
}

#footer-menu li:nth-child(4) a {
    border-right:1px solid #fff
}

.page-id-355 #hero-image h1 {
    padding-top:6rem
}

.page-id-355 #hero-image h1 br {
    display:block;
    clear:none
}

.page-id-435 #hero-image {
    background-position:center top;
    background-size:1366px 300px
}
/* Roof Wash Page
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.page-id-1836 section.entry-content #roof-wash {
    background-image:none;
    margin-right:0px;
    position: relative;
    margin-top:100px;
}
#roof-wash p {
text-align:center;
}
#roof-wash img {
width:100%;
max-width:400px;
margin:0 auto;
}

#roof-wash .product-price {
border-radius: 50%;
background-color: #ffffff;
width:150px;
height:150px;
border:solid 6px #f96876;
text-align:center;
color:#f96876;
position: absolute;
left:50%;
top:50px;
}
#roof-wash .price-only {
font-weight:700;
display:block;
margin-top:10px;
margin-bottom:0px;
font-size:2rem;
}
#roof-wash .plus-delivery {
font-weight:700;
display:block;
font-size:1.4rem;
}
#roof-wash .price-actual {
font-weight:700;
display:block;
font-size:5rem;
line-height:1;
}
#roof-wash .price-actual .dollarsign, #roof-wash .price-actual .decimals {
font-size:2rem;
position: relative;
top:-20px;
}

.why-use-roofwash {
background-color:#e2e8eb;
border-radius: 20px;
padding:20px;
}

.tick-list {
list-style-type:none;
}
.tick-list li {
position:relative;
line-height:1.5;
display:block;
}
.tick-list li:before {
content: " ";
width:37px;
height:37px;
background-image: url(/wp-content/uploads/2017/08/roof-wash-tick.svg);
background-repeat:no-repeat;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    margin-top:-5px
}



/* Top Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#top-menu {
    float:right;
    margin-top:1.1rem;
    margin-right:1rem;
    display:none;
    width:auto
}

#search {
    display:none
}

#top-menu ul,#top-menu ul li {
    list-style-type:none;
    padding:0;
    margin:0
}

#top-menu ul li {
    display:inline
}

#top-menu a {
    color:#414042;
    text-transform:uppercase;
    text-decoration:none;
    border-right:1px solid #414042;
    padding:0 15px 0 10px;
    font-size:1.1rem;
    line-height:1.2;
    letter-spacing:0
}

#top-menu a:hover {
    color:#889ead!important
}

#top-menu li:last-child a {
    border-right:none
}

#site-logo {
    width:110px;
    text-align:center;
    padding-left:10px
}

#site-logo img,#site-description img, #unicote-site-description img {
    width:100%
}

#site-description, #unicote-site-description {
    margin-left:0;
    width:100%;
    text-align:center
}

.utilities {
    margin-right:0
}

#branding {
    height:auto;
    overflow:visible;
    display:block
}

#header {
    height:auto
}

#branding {
    margin-left:1rem
}

#homeintro .one-half.column {
    padding-left:2rem;
    padding-right:2rem
}

#homeintro .one-half.column.rcgbg {
    padding-left:2rem;
    padding-right:2rem
}

#product-landing .one-whole.column {
    padding:0 2rem
}

#homeintro h3 {
    width:100%
}
}

/*										*/
/*										*/
/* Larger than phablet 550px			*/
/*(also point when grid becomes active)	*/
/*										*/
/*										*/
@media (min-width: 550px) {


.page-id-1836 section.entry-content #roof-wash {
    background-image:url(/wp-content/uploads/2017/08/roofwash-bg-flourish.png);
    background-repeat:no-repeat;
    background-position: right center;
    background-size: 50%;
    margin-right:-2rem;
    padding-right:2rem;
}


.product-logo {
    width:400px;
    margin-top:9rem;
    margin-left:10rem
}




#branding {
    margin-left:1rem;
    height:12rem;
    overflow:hidden;
    display:block
}

#site-logo {
    min-width:110px;
    max-width:218px
}

#site-logo img,#site-description img , #unicote-site-description img {
    width:100%
}

.gilidPanel-opener {
}

#site-description {
    margin-top:5rem;
    margin-left:22rem;
    width:50%;
    max-width:36rem;
    float:left;
    position:absolute
}
#unicote-site-description {
    margin-top:5rem;
    margin-left:0rem;
    width:100%;
    max-width:36rem;
    float:left;
    position:absolute
}
#header {
    display:block;
    clear:both;
    height:auto;
    max-height:16rem
}

.the-intro {
    background-image:url(img/homeintro-line.png)
}

#homeintro {
    background-size:680px 480px
}

#homeintro .one-half.column.rcgbg {
    margin-left:4%!important
}

#homeintro .one-half.column.rcgbg h3 {
    padding-top:0;
    border-top:none
}

#search .search-form .search-field {
    width:145px;
    float:none
}

#search {
    margin-top:6.4rem;
    text-align:right;
    display:block
}

#homeintro p,#homeintro .rcgbg-text {
    font-size:2rem
}

/* Distributors Page
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.distributor-entry-content {
    display:block;
    padding:10px 0;
    border-bottom:1px solid #333;
    position:relevant
}

.distributor-entry-content .dist-name {
    color:#666;
    width:24%;
    display:inline-block;
    vertical-align:top;
    margin-right:1%
}

.distributor-entry-content .dist-addy {
    width:24%;
    display:inline-block;
    vertical-align:top;
    margin-right:1%
}

.distributor-entry-content .dist-sub {
    width:24%;
    display:inline-block;
    vertical-align:top;
    margin-right:1%
}

.distributor-entry-content .dist-ph {
    width:25%;
    display:inline-block;
    vertical-align:top
}

.row.column-content.dist {
    margin-top:0!important
}

.row.column-content.disttop {
    margin-bottom:0!important
}
}
@media (max-width: 900px) {

  #menu a {
    padding:12px 5px !important;
}
}

/*							*/
/*							*/
/* Larger than tablet 750px	*/
/*							*/
/*							*/
/*							*/
@media (min-width: 750px) {


#top-menu {
    display:block;

}



#hero-image {
    width:100%;
    height:30rem;
    background-size:1366px 300px;
    text-align:left
}

#hero-image h1 {
    color:#fff;
    padding-left:12.6rem;
    padding-top:6.6rem;
    font-size:6.6rem
}

.page-id-319 #hero-image {
    background-size:1366px 300px;
    background-position:top left
}

.page-id-319 #hero-image h1 {
    padding-left:10rem;
    padding-top:6.6rem;
    font-size:6.6rem;
    color:#414042;
    width:65rem
}

.brochure-panel {
    margin-bottom:0
}

#menu, #menu ul,#menu li,#menu a {
    border:none;
    margin:0;
    padding:0;
    line-height:1;
    color:#fff;
    text-decoration:none
}

#menu {
    min-height:3.9rem;
    height:auto;
    display:block;
    width:100%;
    border-color:#889ead;
    background-color:#889ead;
    position:absolute;
	    z-index:10000;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}

#menu a {
    padding:12px 5px; 
    font-size:1.35rem !important;
}

#menu ul li.has-sub a {
    padding:12px 10px
}

#menu,#menu > ul > li > ul > li a:hover {
}

#menu > ul {
    list-style:inside none;
    padding:0;
    margin:0
}

#menu > ul > li {
    list-style:inside none;
    padding:0;
    margin:0;
    float:left;
    display:inline-block;
}

#menu > ul > li > a {
    outline:none;
    display:block;
    position:relative;
    text-align:center;
    text-decoration:none;
    font-weight:400;
    font-size:1.5rem;
    color:#fff;
    border-right:1px solid #fff;    
    background-color: #889ead;

}

#menu > ul > li > a:hover {
    color:#fff;
    background-color:#565d63
}

#menu > ul > li:first-child > a {
    border-radius:5px 0 0 5px
}

#menu ul li.has-sub:hover > a {
    padding-bottom:13px;
    padding-top:13px;
    top:-1px;
    z-index:999;
    background-color:#565d63
}

#menu ul li.has-sub:hover > ul,#menu ul li.has-sub:hover > div {
    display:inline-block;
}

#menu ul li.has-sub > a:hover {
}

#menu ul li > ul,#menu ul li > div {
    display:none;
    width:auto;
    position:absolute;
    top:2.5rem;
    margin-left:0;
    padding:10px 0;
    background-color:#565d63;
    border-radius:0 0 5px 5px;
    z-index:999
}

#menu ul li:last-child > ul,#menu ul li:last-child > div {
    right:0
}

#menu ul li > ul {
    width:180px;
    position:absolute;
    margin-top:12px;
}

#menu ul li > ul li {
    display:block;
    list-style:inside none;
    padding:0;
    margin:0;
    position:relative
}

#menu ul li > ul li a {
    outline:none;
    display:block;
    position:relative;
    margin:0;
    padding:8px 20px;
    color:#fff;
    text-decoration:none
}

#menu ul li.has-sub ul li a:hover {
    background-color:#676d73
}

#menu ul ul a:hover {
    color:#fff
}

#menu > ul > li.has-sub > a:hover:before {
    border-top:5px solid #fff
}

#menu ul li:last-child a {
    border-right:none
}

.single-case-study #menu #menu-item-510 {
    background-color:#676d73
}

#menu li.current-menu-item > a {
    background-color:#676d73
}

#menu li.current-menu-parent > a {
    background-color:#676d73
}
#menu li.rw-new.button {
    margin-bottom:7px;
}

#menu li.rw-new.button > a {
height:20px;
border-radius:10px 10px 10px 10px;
    background-color:#33cc66;
    margin-left:10px;
    margin-top:10px;
    font-size:10px;
    font-size:1rem !important;
    padding:5px 10px !important;
    font-weight:800;
    }


#header {
    height:16rem
}

#site-logo {
    max-width:218px;
    min-width:110px;
    width:100%
}
#unicote-site-description img {
width:100%;}

#unicote-site-description {
    margin-top:4.7rem;
    margin-left:50rem;
    width:100%;
    max-width:38rem;
    float:left;
    position:absolute
}
.gilidPanel-opener {
    display:none
}

.container {
    width:100%;
    padding:0
}

.column,.columns {
    margin-left:4%
}

.column:first-child,.columns:first-child {
    margin-left:0
}

.widgetcolumns.columns:first-child,.widgetcolumns.columns:nth-child(4),.widgetcolumns.columns:nth-child(7) {
    margin-left:0
}

.widgetcolumns.columns {
    margin-left:2%;
    width:32%;
    height:32vw;
    max-height:328px;
    margin-bottom:2%
}

.widgetcolumns.columns:nth-child(3),.widgetcolumns.columns:nth-child(5) {
    margin-left:2%!important
}

#distributor-form h4 {
    font-size:3rem;
    line-height:3rem
}

#distributor-form .dist-button {
    -webkit-border-radius:8px 8px 8px 8px;
    -moz-border-radius:8px;
    border-radius:8px 8px 8px 8px
}

#homeintro {
    background-image:url(img/roofing-cladding-guide-bg.jpg)
}

.minirow {
    width:100%;
    display:block;
    clear:both;
    margin-bottom:1.5rem
}

.darkpanel {
    padding:3rem 3rem .5rem;
    background-color:#414042;
    float:left;
    width:50%;
    color:#f1f1f0
}

.dark {
    padding:3rem 3rem .5rem;
    background-color:#414042;
    color:#f1f1f0
}

.lightpanel {
    padding:3rem 3rem .5rem;
    background-color:#f1f1f0;
    float:left;
    width:50%;
    color:#414042;
    clear:right
}
}

/*								*/
/*								*/
/* Larger than desktop 1000px	*/
/*								*/
/*								*/
/*								*/
@media (min-width: 1000px) {


.page-id-1836 section.entry-content #roof-wash {
    margin-right:0px;
}

.container {
    width:100%;
    padding:0
}

.column,.columns {
    margin-left:4%
}

.column:first-child,.columns:first-child {
    margin-left:0
}

.widgetcolumns.columns:first-child,.widgetcolumns.columns:nth-child(5) {
    margin-left:0!important
}

.widgetcolumns.columns {
    margin-left:1.333333%;
    width:24%;
    height:24vw;
    max-height:328px;
    margin-bottom:1.333333%
}

.widgetcolumns.columns > div {
    width:100%
}

.widgetcolumns.columns:nth-child(3),.widgetcolumns.columns:nth-child(4),.widgetcolumns.columns:nth-child(7) {
    margin-left:1.333333%!important
}

#distributor-form h4 {
    font-size:3rem;
    line-height:3rem
}

#distributor-form .dist-button {
    -webkit-border-radius:8px 8px 8px 8px;
    -moz-border-radius:8px;
    border-radius:8px 8px 8px 8px
}
}

#carousel-cs.no-carousel ul {
    list-style-type:none!important;
    margin:0
}

#carousel-cs.no-carousel li {
    display:inline-block
}

.spacer {
    height:4rem;
    display:block
}

.smspacer {
    height:2rem;
    display:block
}

.cs-navigation a {
    text-decoration:none;
    font-weight:400;
    color:#565d63
}

.cs-navigation {
    vertical-align:middle;
    padding-top:.5rem
}

.cs-navigation .previous {
    float:left;
    width:300px;
    text-align:left;
    display:block;
    margin-top:1rem
}

.cs-navigation .next {
    float:right;
    width:300px;
    text-align:right;
    display:block;
    margin-top:1rem
}

.cs-navigation .next .buttons {
    float:right;
    margin-left:20px
}

.cs-navigation .previous .buttons {
    float:left;
    margin-right:20px
}

.cs-navigation .buttons {
    background:#565d63;
    border-radius:35px;
    display:block;
    width:35px;
    height:35px;
    color:#fff;
    font-weight:700;
    text-align:center;
    line-height:35px;
    text-decoration:none;
    font-size:22px;
    margin-top:-.5rem
}

span.wpcf7-checkbox span.wpcf7-list-item {
    display:block;
    margin-left:40px;
    text-align:left;
    width:auto;
    height:auto;
    text-indent:-20px;
    padding-bottom:5px;
    padding-top:5px
}

#hearabout-boxes.wpcf7-checkbox span.wpcf7-list-item {
    width:11.5rem!important;
    display:inline-block;
    margin-right:10px
}

.dark-form {
    background-color:#e2e8eb;
    display:block;
    padding-top:20px
}

.darkest-form {
    background-color:#889ead;
    display:block;
    padding-top:20px
}

.darkest-form button {
    padding:5px 20px;
    height:auto;
    width:auto;
    color:#889ead!important;
    border-radius:20px
}

.darkest-form button.reset {
    margin-left:20px;
    background-color:#e2e8eb;
    border-color:#e2e8eb


}

#hero-image {
    position:relative
}
#hero-image .project-triangle {
    background-image:url(img/white-cs-arrow-up.svg);
    background-repeat:no-repeat;
    background-position:top left;
    padding-top:100px;
    text-align:center;
    width:190px;
    height:162px;
    display:block;
    position:absolute;
    bottom:-2px;
}

#cs-content .alternate-image {
    width:100%;
    max-height:225px;
    height:225px;
    position:relative;
    display:block
}

#cs-content .project-triangle {
    border-color:#4d4f50 transparent;
    border-style:solid;
    border-width:0 60px 105px;
    height:0;
    width:0;
    position:absolute;
    bottom:-2px;
    left:2.1rem;
    z-index:10000
}




#cs-content .project-details strong {
    font-weight:600
}

#cs-content .project-info {
    padding:40px 40px 20px;
    width:100%
}


#cs-content .alumigard-residential, #cs-content .alumigard-commercial-neg {
    background-image:url(img/sm-alumigard-logo-rev.svg);
    background-repeat:no-repeat;
    background-position:center top;
    background-size:240px 40px;
    margin-top:1rem;
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
    width:240px;
    min-height:50px;
    height:auto
}

#cs-content .alumigard-commercial-pos {
    background-image:url(img/sm-alumigard-logo.svg);
    background-repeat:no-repeat;
    background-position:center top;
    background-size:240px 40px;
    margin-top:1rem;
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
    width:240px;
    min-height:50px;
    height:auto
}

#cs-content .alumigard-commercial-b {
    background-image:url(img/sm-alumigard-logo-b.svg);
    background-repeat:no-repeat;
    background-position:center top;
    background-size:240px 40px;
    margin-top:1rem;
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
    width:240px;
    min-height:50px;
    height:auto
}

#cs-content .magnaflow-residential, #cs-content .magnaflow-commercial-neg {
    background-image:url(img/sm-magnaflow-logo-rev.svg);
    background-repeat:no-repeat;
    background-position:center top;
    background-size:240px 40px;
    margin-top:1rem;
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
    width:240px;
    min-height:50px;
    height:auto
}

#cs-content .magnaflow-commercial-pos {
    background-image:url(img/sm-magnaflow-logo.svg);
    background-repeat:no-repeat;
    background-position:center top;
    background-size:240px 40px;
    margin-top:1rem;
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
    width:240px;
    min-height:50px;
    height:auto
}
#cs-content .zinacore-residential {
    background-image:url(img/sm-zinacore-logo-rev.svg);
    background-repeat:no-repeat;
    background-position:center top;
    background-size:240px 40px;
    margin-top:1rem;
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
    width:240px;
    min-height:50px;
    height:auto
}

#cs-content .zinacore-commercial-pos {
    background-image:url(img/sm-zinacore-logo.svg);
    background-repeat:no-repeat;
    background-position:left top;
    background-size:240px 40px;
    margin-top:1rem;
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
    width:240px;
    min-height:50px;
    height:auto
}

#cs-content .zinacore-commercial-neg {
    background-image:url(img/sm-zinacore-logo-rev.svg);
    background-repeat:no-repeat;
    background-position:left top;
    background-size:240px 40px;
    margin-top:1rem;
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
    width:240px;
    min-height:50px;
    height:auto
}


#cs-content .project-map {
    float:right;
}
#cs-content .project-details {
    width:58%;
    float:left;
    display:block;
    font-weight:300
}




#cs-distributor-form {
    background-image:url(img/distributor-wide-ql-bg.jpg);
    background-size:cover;
    font-weight:600;
    color:#414042;
    text-align:left;
    display:block;
    width:100%;
    height:225px;
    padding:40px 10px
}

#cs-distributor-form h4 {
    color:#fff;
    font-weight:700;
    font-size:4rem;
    line-height:4rem;
    text-align:left
}




@media (max-width: 550px) {

#cs-distributor-form h4 {
text-align: center!important;
};
.case-study h2 {
font-size:2.4rem;
}
#cs-content .zinacore-commercial-pos {
background-size: 80%;
}

#cs-content .project-map {
    float:none;
    text-align: center;
}

#cs-content .project-map img {
    margin:1rem auto

}
#cs-content  .project-details {
    width:100%;
    float:none;
    display:block;
    font-weight:300;
}

}




/*									*/
/*									*/
/* Larger than desktop HD 1200px	*/
/*									*/
/*									*/
/*									*/
@media (min-width: 1200px) {

.page-id-1836 section.entry-content #roof-wash {
    background-image:url(/wp-content/uploads/2017/08/roofwash-bg-flourish.png);
    background-repeat:no-repeat;
    background-position: right center;
    background-size: 50%;
    margin-right:-100px;
    padding-right:100px
}

/* Case Study Page
–––––––––––––––––––––––––––––––––––––––––––––––––– */


#hero-image .project-triangle {
    left:10rem
}

#cs-content {
    display:block;
    width:100%
}

#cs-content.residential {
    color:#fff;
    background-color:#4d4f50
}


#carousel-cs.no-carousel ul {
    list-style:none!important
}

#carousel-cs.no-carousel li {
    display:inline-block
}

.cs-navigation a {
    text-decoration:none;
    font-weight:400;
    color:#565d63
}

.cs-navigation {
    vertical-align:middle;
    padding-top:.5rem
}

.cs-navigation .previous {
    float:left;
    width:auto;
    text-align:left
}

.cs-navigation .next {
    float:right;
    width:auto;
    text-align:right
}

.cs-navigation .next .buttons {
    float:right;
    margin-left:20px
}

.cs-navigation .previous .buttons {
    float:left;
    margin-right:20px
}

.cs-navigation .buttons {
    background:#565d63;
    border-radius:35px;
    display:block;
    width:35px;
    height:35px;
    color:#fff;
    font-weight:700;
    text-align:center;
    line-height:35px;
    text-decoration:none;
    font-size:22px;
    margin-top:-.5rem
}



.dark-form {
    background-color:#e2e8eb;
    display:block;
    padding-top:20px
}

.darkest-form {
    background-color:#889ead;
    display:block;
    padding-top:20px
}

.darkest-form button {
    padding:5px 20px;
    height:auto;
    width:auto;
    color:#889ead!important;
    border-radius:20px
}

.darkest-form button.reset {
    margin-left:20px;
    background-color:#e2e8eb;
    border-color:#e2e8eb
}

.wpcf7-form input[type="text"],.wpcf7-form input[type="email"],.wpcf7-form select {
    width:90%
}

.wpcf7-form span.required {
    color:red
}

.zero-height {
    padding-bottom:4rem!important;
    padding-top:4rem!important;
    background-color:#e2e8eb!important
}

div.wpcf7-response-output {
    margin:0 10rem!important;
    padding:0
}

.no-bot-margin {
    margin-bottom:0!important
}

.superceded {
    color:#666!important
}

.wpcf7-list-item input {
    width:25px;
    height:25px;
    margin-right:10px;
    vertical-align:top
}

span.wpcf7-checkbox span.wpcf7-list-item {
    display:block;
    margin-left:40px;
    text-align:left;
    width:auto;
    height:auto;
    text-indent:-40px;
    padding-bottom:5px;
    padding-top:5px
}

#hearabout-boxes.wpcf7-checkbox span.wpcf7-list-item {
    width:11.5rem!important;
    display:inline-block;
    margin-right:10px
}

.column-content {
    margin:2rem 10rem
}

#distributor-form .dist-button {
    -webkit-border-radius:0 8px 8px 0;
    -moz-border-radius:0 8px 8px 0;
    border-radius:0 8px 8px 0
}

#site-description {
    margin-top:4.7rem;
    margin-left:22rem;
    width:100%;
    max-width:38rem;
    float:left;
    position:absolute
}
#unicote-site-description {
    margin-top:4.7rem;
    margin-left:50rem;
    width:100%;
    max-width:38rem;
    float:left;
    position:absolute
}
#search .search-form .search-field {
    width:245px
}

#homeintro .one-half.column {
    padding-left:10rem;
    padding-right:2rem
}

#homeintro .one-half.column.rcgbg {
    padding-left:2rem;
    padding-right:17rem
}

#product-landing .one-whole.column {
    padding:0 10rem
}

#menu {
    padding:0rem 0rem 0rem 10rem !important
}

.utilities {
    margin-right:10rem;
    width:auto;
}


#header {
    height:16rem
}

#branding {
    margin-left:10rem
}

#menu,#menu ul,#menu li,#menu a {
    border:none;
    margin:0;
    padding:0;
    line-height:1;
    color:#fff;
    text-decoration:none
}

#menu {
    min-height:3.9rem;
    height:auto;
        display:block;
    padding:0;
    margin:0;
    width:100%;
    border-color:#889ead;
    background-color:#889ead;
    position:absolute;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}

#menu a {
    padding:12px 15px
}

#menu ul li.has-sub a {
    padding:12px 35px 12px 15px
}

#menu,#menu > ul > li > ul > li a:hover {
}

#menu > ul {
    list-style:inside none;
    padding:0;
    margin:0
}

#menu > ul > li {
    list-style:inside none;
    padding:0;
    margin:0;
    float:left;
    display:block;
    position:relative
}

#menu > ul > li > a {
    outline:none;
    display:block;
    position:relative;
    text-align:center;
    text-decoration:none;
    font-weight:400;
    font-size:1.5rem;
    color:#fff;
    border-right:1px solid #fff
}

#menu > ul > li > a:hover {
    color:#fff
}

#menu > ul > li:first-child > a {
    border-radius:5px 0 0 5px
}

#menu > ul > li > a::after {
    content:'';
    position:absolute;
    top:-1px;
    bottom:-1px;
    right:-2px;
    z-index:99
}

#menu ul li.has-sub:hover > a::after {
    top:0;
    bottom:0
}

#menu > ul > li.has-sub > a:before {
    content:'';
    position:absolute;
    top:18px;
    right:15px;
    border:5px solid transparent;
    border-top:5px solid #fff
}

#menu > ul > li.has-sub:hover > a:before {
    top:19px
}

#menu ul li.has-sub:hover > a {
    padding-bottom:13px;
    padding-top:13px;
    top:-1px;
    z-index:999;
    background-color:#565d63
}

#menu ul li.has-sub:hover > ul,#menu ul li.has-sub:hover > div {
    display:inline-block
}

#menu ul li.has-sub ul li a:hover {
    background-color:#676d73
}

#menu ul li > ul,#menu ul li > div {
    display:none;
    width:auto;
    position:absolute;
    margin-left:0;
    padding:10px 0;
    background-color:#565d63;
    border-radius:0 0 5px 5px;
    z-index:999
}

#menu ul li > ul {
    width:200px;
    position:absolute;
}

#menu ul li > ul li {
    display:block;
    list-style:inside none;
    padding:0;
    margin:0;
    position:relative;
}

#menu ul li > ul li a {
    outline:none;
    display:block;
    position:relative;
    margin:0;
    padding:8px 20px;
    color:#fff;
    text-decoration:none
}

#menu ul ul a:hover {
    color:#fff
}

#menu > ul > li.has-sub > a:hover:before {
    border-top:5px solid #fff
}

#menu ul li:last-child a {
    border-right:none;
    border-radius:0 5px 5px 0px
}

#distributor-form h4 {
    font-size:4.4rem;
    line-height:4.4rem
}
}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
    color:#1EAEDB
}

a:hover {
    color:#0FA0CE
}

a.sliderlink {
    color:#fff;
    text-decoration:none;
    font-weight:600
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,button,input[type="submit"],input[type="reset"],input[type="button"] {
    display:inline-block;
    height:32px;
    padding:0 15px;
    color:#555;
    text-align:center;
    font-size:12px;
    font-size:1.2rem;
    font-weight:600;
    line-height:32px;
    letter-spacing:.1rem;
    text-decoration:none;
    white-space:nowrap;
    background-color:transparent;
    border-radius:15px;
    border:1px solid #bbb;
    cursor:pointer;
    box-sizing:border-box
}

.button-primary.large-red {
margin-top:40px;
font-style:italic;
    color:#FFF;
    background-color:#f96876;
    border-color:#f96876;
    height:60px;
    padding:10px 65px;
    font-size:20px;
    font-size:2.6rem;
    border:1px solid #f96876;
}

.button:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover,.button:focus,button:focus,input[type="submit"]:focus,input[type="reset"]:focus,input[type="button"]:focus {
    color:#333;
    border-color:#888;
    outline:0
}

.button.button-primary,button.button-primary,input[type="submit"].button-primary,input[type="reset"].button-primary,input[type="button"].button-primary {
    color:#FFF;
    background-color:#889ead;
    border-color:#889ead
}

.button.button-reversed,button.button-reversed,input[type="submit"].button-reversed,input[type="reset"].button-reversed,input[type="button"].button-reversed {
    color:#000;
    background-color:#fff;
    border-color:#fff
}

.button.button-primary:hover,button.button-primary:hover,input[type="submit"].button-primary:hover,input[type="reset"].button-primary:hover,input[type="button"].button-primary:hover,.button.button-primary:focus,button.button-primary:focus,input[type="submit"].button-primary:focus,input[type="reset"].button-primary:focus,input[type="button"].button-primary:focus {
    color:#FFF;
    background-color:#1EAEDB;
    border-color:#1EAEDB
}

.button i,button i,input[type="submit"] i,input[type="reset"] i,input[type="button"] i,.button.button-primary i,button.button-primary i,input[type="submit"].button-primary i,input[type="reset"].button-primary i,input[type="button"].button-primary i {
    vertical-align:middle;
    padding-left:10px;
    margin-top:-2px
}

.button.button-zinacore,button.button-zinacore,input[type="submit"].button-zinacore,input[type="reset"].button-zinacore,input[type="button"].button-zinacore {
    color:#FFF;
    background-color:#00b161;
    border-color:#00b161
}

.button.button-zinacore-more,button.button-zinacore-more,input[type="submit"].button-zinacore-more,input[type="reset"].button-zinacore-more,input[type="button"].button-zinacore-more {
    color:#FFF;
    background-color:#009c5a;
    border-color:#009c5a
}

.button.button-magnaflow,button.button-magnaflow,input[type="submit"].button-magnaflow,input[type="reset"].button-magnaflow,input[type="button"].button-magnaflow {
    color:#FFF;
    background-color:#00a7df;
    border-color:#00a7df
}

.button.button-magnaflow-more,button.button-magnaflow-more,input[type="submit"].button-magnaflow-more,input[type="reset"].button-magnaflow-more,input[type="button"].button-magnaflow-more {
    color:#FFF;
    background-color:#0e7bb8;
    border-color:#0e7bb8
}

.button.button-alumigard,button.button-alumigard,input[type="submit"].button-alumigard,input[type="reset"].button-alumigard,input[type="button"].button-alumigard {
    color:#FFF;
    background-color:#f96876;
    border-color:#f96876
}

.button.button-alumigard-more,button.button-alumigard-more,input[type="submit"].button-alumigard-more,input[type="reset"].button-alumigard-more,input[type="button"].button-alumigard-more {
    color:#FFF;
    background-color:#c13f53;
    border-color:#c13f53
}



/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="search"] {
    height:32px!important;
    padding-top:4px!important;
    padding-bottom:4px!important
}

input[type="search"]:focus {
    font-weight:300
}

input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea,select {
    height:38px;
    font-size:1.6rem;
    padding:6px 10px;
/* The 6px vertically centers text on FF, ignored by Webkit */
    background-color:#fff;
    border:1px solid #D1D1D1;
    border-radius:4px;
    box-shadow:none;
    box-sizing:border-box
}
.wpcf7-form input[type="email"], .wpcf7-form input[type="text"] 
 {
    width:100%
}


/* Removes awkward default styles on some inputs for iOS */
input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none
}

textarea {
    min-height:65px;
    padding-top:6px;
    padding-bottom:6px
}

input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,textarea:focus,select:focus {
    font-size:1.6rem;
    border:1px solid #33C3F0;
    outline:0
}

label,legend {
    display:block;
    margin-bottom:.5rem;
    font-weight:600
}

fieldset {
    padding:0;
    border-width:0
}

input[type="checkbox"],input[type="radio"] {
    display:inline
}

label > .label-body {
    display:inline-block;
    margin-left:.5rem;
    font-weight:400
}

/* HEADER SEARCH FORM */
#search .search-form {
    position:relative;
    margin-bottom:0
}

#search .search-form .search-field {
    background:#fff;
    border:1px solid #889ead;
    outline:0!important;
    color:#889ead;
    font-style:italic;
    border-radius:4px
}

#search .search-field:focus,#search .search-field::selection {
    background:#fff;
    color:#889ead;
    font-style:normal;
    font-weight:300
}

#search .search-btn {
    background:0 0;
    border:0;
    font-size:18px;
    color:#889ead;
    margin:-2px 0 0 -60px;
    cursor:pointer
}

#search .search-btn:hover {
    color:#414042
}

#search .search-field::-moz-placeholder {
    color:#889ead;
    opacity:1
}

#search .search-field:-ms-input-placeholder {
    color:#889ead
}

#search .search-field::-webkit-input-placeholder {
    color:#889ead
}

/* Product Logos */
.zinacore-logo {
    background-image:url(img/sm-zinacore-logo.svg);
    background-repeat:no-repeat;
    background-position:top left;
    width:170px;
    height:50px;
    display:block;
    text-indent:250%;
    white-space:nowrap;
    overflow:hidden
}

.magnaflow-logo {
    background-image:url(img/sm-magnaflow-logo.svg);
    background-repeat:no-repeat;
    background-position:top left;
    width:190px;
    height:50px;
    display:block;
    text-indent:250%;
    white-space:nowrap;
    overflow:hidden
}

.alumigard-logo {
    background-image:url(img/sm-alumigard-logo.svg);
    background-repeat:no-repeat;
    background-position:top left;
    width:180px;
    height:50px;
    display:block;
    text-indent:250%;
    white-space:nowrap;
    overflow:hidden
}

.usage-icons img {
    vertical-align:middle
}

.usage-icons img:last-child {
    margin-right:1rem
}

/* Product Warranties */
.product-warranties img {
    width:100%
}

.product-warranties {
    padding-bottom:3rem
}

.product-warranties .fineprint {
    font-size:1rem
}

.product-info {
    border-top:solid 2px #98aebb;
    padding-top:5rem;
    margin-top:2rem
}

/* Product Tabs
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.product-tabs {
    position:relative;
    width:100%;
    background-color:#b5c3cc
}

.product-tabs::after {
    content:"";
    display:table;
    clear:both
}

.product-tabs::after {
/* subtle gradient layer on top right - to indicate it's possible to scroll */
    position:absolute;
    top:0;
    right:0;
    height:50px;
    width:50px;
    z-index:1;
    pointer-events:none;
    background:-webkit-linear-gradient(right,#f8f7ee,rgba(248,247,238,0));
    background:linear-gradient(to left,#f8f7ee,rgba(248,247,238,0));
    visibility:visible;
    opacity:1;
    -webkit-transition:opacity .3s 0s,visibility 0 0;
    -moz-transition:opacity .3s 0s,visibility 0 0;
    transition:opacity .3s 0s,visibility 0 0
}

.no-cssgradients .product-tabs::after {
    display:none
}

.product-tabs.is-ended::after {
/* class added in jQuery - remove the gradient layer when it's no longer possible to scroll */
    visibility:hidden;
    opacity:0;
    -webkit-transition:opacity .3s 0s,visibility 0 .3s;
    -moz-transition:opacity .3s 0s,visibility 0 .3s;
    transition:opacity .3s 0s,visibility 0 .3s
}

.product-tabs nav {
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    background:#b5c3cc;
}

.product-tabs ul {
    margin:0
}

.product-tabs-content {
    background:#fff;
    padding:0;
    height:auto;
    padding-bottom:10rem;
    display:block
}

.product-tabs-navigation a {
    font-size:16px!important;
    text-decoration:none;
    text-align:center!important;
    max-width:230px;
    width:100%;
    padding-bottom:15px;
    padding-left:2px;
    padding-right:2px;
    padding-top:10px!important;
    display:table-cell;
    vertical-align:middle;
    background-size:80%;
    font-family:'Open Sans',sans-serif;
    font-weight:400!important;
    color:#222!important;
    opacity:0.2;
	}
	
	.product-tabs-navigation li.selected a {
opacity:1;
}
.product-tabs-navigation a.allcolours-tab {
padding-top:10px !important;
}
.allcolours-tab div {
position:absolute;
top:30px;
font-size:10px;
text-align: center;
width:100%;
display:block;
height:10px;
} 

@media only screen and (min-width: 768px) {
.product-tabs-content {
    background:#fff;
    padding:0 10rem
}

.product-tabs-navigation a {
    font-size:26px!important;
    background-size:initial;
    width:100px!important
}

.product-tabs::after {
    display:none
}

.product-tabs nav {
    top:0;
    left:0;
    height:100%;
    z-index:1
}

.allcolours-tab div {
top:40px;
}

}


.product-tabs-navigation {
padding-top:1rem;
    width:auto;
    padding-left:0;
margin-bottom:-5px;
}

.product-tabs-navigation::after {
height:0px;margin:0;
    display:none;
}

.product-tabs-navigation li {
display:block;
float:left;
list-style-type:none;
        background:#b5c3cc;
width:280px;
border-bottom: 60px solid #edf0f2;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	position:relative;
	margin:0px;
	padding:0px;
    line-height:normal;
}
.product-tabs-navigation li.selected {
border-bottom-color:#ffffff;
}


.product-tabs-navigation a {
    position:absolute;
    background-size:auto;
	text-align:center;
    font-size:.75rem;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-weight:700;
    color:#c3c2b9;

	}


.no-touch .product-tabs-navigation a:hover {
    color:#29324e;
    background-color:rgba(233,230,202,0.3)
}

.product-tabs-navigation a.selected {
    color:#29324e
}

.zinacore-tab {
    background-image:url(img/sm-zinacore-logo.svg);
    background-repeat:no-repeat;
    background-position:center 16px;
    text-indent:200%;
    white-space:nowrap;
    overflow:hidden
}

.magnaflow-tab {
    background-image:url(img/sm-magnaflow-logo.svg);
    background-repeat:no-repeat;
    background-position:center 16px;
    text-indent:200%;
    white-space:nowrap;
    overflow:hidden
}

.alumigard-tab {
    background-image:url(img/sm-alumigard-logo.svg);
    background-repeat:no-repeat;
    background-position:center 16px;
    text-indent:200%;
    white-space:nowrap;
    overflow:hidden
}

@media only screen and (min-width: 768px) {
.product-tabs-content {
    background:#fff;
    padding:0 10rem
}

.product-tabs-navigation {
/* move the nav to the left on medium sized devices */
    width:auto;
    padding-left:10rem;
    margin-bottom:0
}

.product-tabs-navigation a {
    width:230px !important;
    padding-top:46px
}

.product-tabs-navigation a.selected {
}

.product-tabs-navigation a::before {
    top:22px
}
}

@media only screen and (min-width: 960px) {
.product-tabs-navigation {
/* tabbed on top on big devices */
    width:auto;
    background-color:#b5c3cc;
}
.product-tabs nav {
    position:relative;
    float:none;
    background:transparent;
    box-shadow:none
}
.product-tabs-navigation a {
    width:230px!important;
    text-align:left;
    font-size:14px;
    font-size:.875rem;
    padding:0
}

.product-tabs-navigation a.allcolours-tab {
line-height:normal;
}
.product-tabs-navigation a.selected {
}

.product-tabs-navigation a::before {
    top:50%;
    margin-top:-10px;
    margin-left:0;
    left:38px
}
}

.product-tabs-content li {
    display:none;
    padding:1.4em
}

.product-tabs-content li.selected {
    display:block;
    -webkit-animation:cd-fade-in .5s;
    -moz-animation:cd-fade-in .5s;
    animation:cd-fade-in .5s
}

.product-tabs-content li p {
    font-size:1.5rem;
    line-height:1.6;
    font-weight:400;
    font-family:'Open Sans',sans-serif;
    margin-bottom:2rem
}

.product-image {
    width:100%;
    margin-bottom:1rem
}

.product-image img {
    width:100%;
    max-width:510px
}

.product-additional-info {
    border-top:solid 2px #98aebb;
    margin:0 2rem;
    padding-top:5rem;
    display:block;
    height:auto
}

.product-additional-info .product-mapsimg {
    border:solid 5px #fff;
    box-shadow:1px 1px 5px rgba(0,0,0,0.4)
}

@media only screen and (min-width: 768px) {
.product-additional-info {
    border-top:solid 2px #98aebb;
    margin:0 10rem 5rem;
    padding-top:5rem;
    display:block;
    height:auto
}

.product-tabs-content {
    min-height:446px
}

.product-tabs-content li {
    padding:4rem 0
}
}

@media only screen and (min-width: 960px) {
.product-tabs-content {
    height:auto !important
}

.product-tabs-content li {
    padding:4rem 0
}

.product-tabs-content li p {
    font-size:1.5rem
}
}

@-webkit-keyframes cd-fade-in {
0% {
    opacity:0
}

100% {
    opacity:1
}
}

@-moz-keyframes cd-fade-in {
0% {
    opacity:0
}

100% {
    opacity:1
}
}

@keyframes cd-fade-in {
0% {
    opacity:0
}

100% {
    opacity:1
}
}

/* ColorCote Colour Swatches
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.app-bg {
    background-image:url(/wp-content/uploads/2015/09/get-app-bg.jpg);
    background-position:bottom right;
    background-repeat:no-repeat;
    background-size:50%
}

.colour-swatch {
    width:100%;
    height:120px;
    float:left;
    margin-right:15px;
    margin-bottom:15px
}

@media (min-width: 768px) {
.colour-swatch {
    width:210px;
    height:120px;
    float:left;
    margin-right:15px;
    margin-bottom:15px
}
}

.colour-swatch p {
    padding:2px
}

.swatches {
    width:100%;
    overflow:hidden
}

.swatch {
    display:block;
    width:100%;
    min-height:90px
}

.cccs-key {
    float:right
}

.key-item {
    display:inline-block;
    padding-top:10px;
    margin-right:20px
}

.only {
    margin-right:20px;
    color:#939597;
    font-size:1.4rem
}

img.cccs-icon {
    display:inline-block;
    margin-right:5px;
    vertical-align:middle;
    padding-bottom:5px
}

/*  TOP5 Tab  */
.top5-content .swatch {
    text-align:center;
    position:relative;
    height:330px
}

.top5-content .resene-swatch {
    display:block;
    padding:4rem 1.5rem 1rem;
    margin-bottom:1rem;
    height:9rem;
    font-weight:300;
    line-height:1.2
}

.top5-content .ironsand-img {
    background:url(/wp-content/uploads/2015/09/ironsand-example.jpg);
    background-size:cover;
    height:330px
}

.top5-content .greyfriars-img {
    background:url(/wp-content/uploads/2015/09/greyfriars-example.jpg);
    background-size:cover;
    height:330px
}

.top5-content .titania-img {
    background:url(/wp-content/uploads/2015/09/titania-example.jpg);
    background-size:cover;
    height:330px
}

.top5-content .sandstone-grey-img {
    background:url(/wp-content/uploads/2015/09/sandstone-grey-example.jpg);
    background-size:cover;
    height:330px
}

.top5-content .black-img {
    background:url(/wp-content/uploads/2015/09/black-example.jpg);
    background-size:cover;
    height:330px
}

.contrast-title {
    text-transform:uppercase;
    margin-bottom:.8rem;
    line-height:1.1;
    font-weight:400;
    color:#222;
    font-size:1.5rem
}

.contrast-picks {
    height:330px;
    overflow:hidden;
    min-width:165px
}


/* COLOURS */
.rs-cougar {
    background-color:#aaa08d;
    color:#fff
}

.rs-quarter-bianca {
    background-color:#f9f8f0;
    color:#222
}

.rs-thunderbird {
    background-color:#923830;
    color:#fff
}

.rs-delta {
    background-color:#999b95;
    color:#fff
}

.rs-hint-of-grey {
    background-color:#dfddd6;
    color:#222
}

.rs-blue-bayoux {
    background-color:#62777e;
    color:#fff
}

.rs-triple-ash {
    background-color:#9f9b86;
    color:#fff
}

.rs-half-cararra {
    background-color:#dfe2d2;
    color:#222
}

.rs-double-mondo {
    background-color:#4a4237;
    color:#fff
}

.rs-baltic-sea {
    background-color:#3c3d3e;
    color:#fff
}

.rs-sea-fog {
    background-color:#dfddd6;
    color:#222
}

.rs-clockwork-orange {
    background-color:#bf6031;
    color:#fff
}

.rs-mountain-mist {
    background-color:#a09f9c;
    color:#fff
}

.rs-quarter-merino {
    background-color:#f2eee9;
    color:#222
}

.rs-citron {
    background-color:#8e9a21;
    color:#fff
}

.rs-fineprint {
    font-size:1.2rem!important
}

.top5-content .project-triangle {
    background-image:url(img/white-cs-arrow-up-top5.svg);
    background-repeat:no-repeat;
    background-position:top center;
    padding-top:50px;
    text-align:center;
    width:100%;
    height:200px;
    display:block;
    bottom:0;
    position:absolute
}

.top5-content .project-triangle .number {
    font-size:7.7rem;
    line-height:7.7rem;
    display:block;
    padding-top:10px;
    color:#222
}

.top5-content .top-5 {
    margin-bottom:4rem
}

/*  WHITES  */
.cccs-threadbow-white {
    background-color:#dde1e0
}

.cccs-pacific-white {
    background-color:#dbdfdf
}

.cccs-off-white {
    background-color:#d3d4cd
}

.cccs-pacific-cloud {
    background-color:#e0ddd0
}

.cccs-titania {
    background-color:#d5d3c7
}

.cccs-bone-white {
    background-color:#c7c3b6
}

.cccs-smooth-cream {
    background-color:#ddd3b6
}

/*  GREYS  */
.cccs-gull-grey {
    background-color:#b7b7b2
}

.cccs-sandstone-grey {
    background-color:#898a86
}

.cccs-grey-flannel {
    background-color:#777875
}

.cccs-thunder-grey {
    background-color:#61605b
}

.cccs-greyfriars {
    background-color:#575a5c
}

.cccs-seabird {
    background-color:#5d5d5e
}

.cccs-slate {
    background-color:#504f4f
}

.cccs-windsor-grey {
    background-color:#434649
}

.cccs-lancewood {
    background-color:#464647
}

.cccs-black {
    background-color:#3c3d3e
}

/*  BLUES & GREENS  */
.cccs-nimbus {
    background-color:#567685
}

.cccs-new-denim-blue {
    background-color:#565d63
}

.cccs-storm-blue {
    background-color:#4d5761
}

.cccs-slate-blue {
    background-color:#464c57
}

.cccs-smokey {
    background-color:#8a8f8b
}

.cccs-mist-green {
    background-color:#808974
}

.cccs-rivergum {
    background-color:#6a7669
}

.cccs-forest-fern {
    background-color:#5b6660
}

.cccs-permanent-green {
    background-color:#485c4f
}

.cccs-karaka {
    background-color:#4f4e48
}

/*  REDS & BROWNS  */
.cccs-desert-sand {
    background-color:#c3b298
}

.cccs-terracotta {
    background-color:#aa705a
}

.cccs-pioneer-red {
    background-color:#8d4941
}

.cccs-scoria {
    background-color:#724640
}

.cccs-pebble {
    background-color:#a49685
}

.cccs-lichen {
    background-color:#91866e
}

.cccs-mudstone {
    background-color:#6d6b66
}

.cccs-lignite {
    background-color:#5d514a
}

.cccs-weathered-copper {
    background-color:#605851
}

.cccs-ironsand {
    background-color:#54514f
}

/*  METALLICS  */
.cccs-metallic-silver {
    background-color:#acafad
}

.cccs-metallic-gunmetal {
    background-color:#999998
}

/*  BRIGHTS  */
.cccs-lazerite-blue {
    background-color:#3d5a8a
}

.cccs-poppy {
    background-color:#cc4741
}

/* Roof Viewer Page Items
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.app-badges .column {
    text-align:center
}

.app-badges .column img {
    max-width:300px;
    width:100%;
    height:auto;
    margin:0 auto
}

.appblue {
    color:#00a7df
}

.app-badges {
    display:block;
    clear:both;
    height:auto;
    margin-bottom:2rem
}

/* Design Page Items
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#minimum-maintenance {
    background-color:#dbe2e7;
    padding:2rem 4rem
}

#minimum-maintenance ul {
    list-style:square;
    margin-left:2rem
}

#design-icons .row {
    display:block;
    padding-bottom:1rem;
    height:auto
}

#design-icons .row img {
    width:40px
}

/* Contact Us Page Items
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#contact-details .row {
    display:block;
    margin-bottom:1rem;
    width:100%
}

#contact-details .row span {
    vertical-align:top
}

#contact-details .row .name {
    display:inline-block;
    width:25%;
    word-break:break-inside
}

#contact-details .row .position {
    display:inline-block;
    width:50%;
    word-break:break-inside
}

#contact-details .row .phone {
    display:inline-block;
    width:25%;
    word-break:break-inside
}
/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
    list-style:circle outside;
    margin-left:20px
}

ol {
    list-style:decimal inside
}

ol,ul {
    padding-left:0;
    margin-top:0
}

ul ul,ul ol,ol ol,ol ul {
    margin:1.5rem 0 1.5rem 3rem;
    font-size:90%
}

li {
    margin-bottom:1rem
}

#numbered-list ol {
    counter-reset:li;
/* Initiate a counter */
    margin-left:0;
/* Remove the default left margin */
    padding-left:0
/* Remove the default left padding */
}

#numbered-list ol > li {
    position:relative;
/* Create a positioning context */
    margin:0 0 6px 2em;
/* Give each list item a left margin to make room for the numbers */
    padding:4px 8px;
/* Add some spacing around the content */
    list-style:none
/* Disable the normal item numbering */
}

#numbered-list ol > li:before {
    content:counter(li);
/* Use the counter as content */
    counter-increment:li;
/* Increment the counter by 1 */
/* Position and style the number */
    position:absolute;
    top:-2px;
    left:-2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;
/* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    margin-right:8px;
    margin-top:5px;
    padding:2px 4px;
    color:#666;
    border:solid 1px #666;
    font-family:"Helvetica Neue",Arial,sans-serif;
    text-align:center;
    border-radius:50%
}

#numbered-list li ol,#numbered-list li ul {
    margin-top:6px
}

#numbered-list ol ol li:last-child {
    margin-bottom:0
}


.terms-conditions {
font-size:1.2rem;
}
.terms-conditions .claim {
padding:20px 30px 10px 20px;
border:solid 2px #f96876;
font-weight:600;
}

.terms-conditions ul {
    list-style:none outside;
    margin-left:30px}
    
.terms-conditions li {
    margin-left:0px
    }
.terms-conditions .num {
margin-left:-30px;
display:inline-block;
width:30px;
}

.half-column {
width:50%;
float:left;
text-align:center;
}
.half-column img {
width:80%;
height:auto;
}


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
    padding:.2rem .5rem;
    margin:0 .2rem;
    font-size:90%;
    white-space:nowrap;
    background:#F1F1F1;
    border:1px solid #E1E1E1;
    border-radius:4px
}

pre > code {
    display:block;
    padding:1rem 1.5rem;
    white-space:pre
}

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,td {
    padding:12px 15px;
    text-align:left;
    border-bottom:1px solid #E1E1E1
}

th:first-child,td:first-child {
    padding-left:0
}

th:last-child,td:last-child {
    padding-right:0
}

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,.button {
    margin-bottom:1rem
}

input,textarea,select,fieldset {
    margin-bottom:1.5rem
}

pre,blockquote,dl,figure,table,p,ul,ol,form {
    margin-bottom:2.5rem
}

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
    width:100%;
    box-sizing:border-box
}

.u-max-full-width {
    max-width:100%;
    box-sizing:border-box
}

.u-pull-right {
    float:right
}

.u-pull-left {
    float:left
}

.screen-reader-text {
    position:absolute;
    left:-999em
}

.hide {
    display:none
}

.unhide {
    display:inline
}

.alignright {
    float:right;
    margin-left:10px;
    margin-bottom:10px
}

.alignleft {
    float:left;
    margin-right:10px;
    margin-bottom:10px
}

.mb {
    width:1rem;
    display:block
}

/* Larger than mobile */
@media (min-width: 400px) {
.mb {
    width:1rem;
    display:inline-block
}
}

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
    margin-top:3rem;
    margin-bottom:3.5rem;
    border-width:0;
    border-top:1px solid #E1E1E1
}

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Self Clearing Goodness */
.container::after,.row::after,.u-cf {
    content:"";
    display:table;
    clear:both
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
/* Larger than mobile */
@media (min-width: 400px) {

}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {

}

/* Larger than tablet */
@media (min-width: 750px) {

}

/* Larger than desktop */
@media (min-width: 1000px) {

}

/* Larger than Desktop HD */
@media (min-width: 1200px) {

}