/*
Date Modified:  24/11/14
Author:         Silkstream Ltd
Author URL:     http://www.silkstream.net
Title:          Responsive Stylesheet
*/

img, object { max-width: 100%; height: auto;}
iframe, object, embed, video {max-width:100%;}

fieldset{padding:10px;border:1px solid #ccc;margin-bottom:1.5em;}
label{cursor:pointer;}
input, textarea, select{font-family: inherit; outline:none;}
table{page-break-before:always;}

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?wp1q2l');
    src:url('fonts/icomoon.eot?#iefixwp1q2l') format('embedded-opentype'),
    url('fonts/icomoon.woff?wp1q2l') format('woff'),
    url('fonts/icomoon.ttf?wp1q2l') format('truetype'),
    url('fonts/icomoon.svg?wp1q2l#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-close:before {  content: "\e600";  }
.icon-arrow-down:before {  content: "\e601";  }
.icon-arrow-left:before {  content: "\e602";  }
.icon-arrow-right:before {  content: "\e603";  }
.icon-arrow-up:before {  content: "\e604";  }
.icon-burger:before {  content: "\e60a";  }
.icon-facebook:before {  content: "\e606";  }
.icon-googleplus:before {  content: "\e607";  }
.icon-twitter:before {  content: "\e60f";  }
.icon-youtube:before {  content: "\e610";  }
.icon-tick:before {  content: "\e60e";  }
.icon-cross:before {  content: "\e611";  }

.row-wrapper { margin: 0 auto; max-width:990px; width: 100%; position:relative;} /** add max-width for responsive - 1100px; **/
.row-fluid { width:100%; *zoom: 1;}
.row-fluid:before, .row-fluid:after { display: table;content: "";line-height: 0; }
.row-fluid:after {clear: both; }
.row-fluid [class*="span"] {display: block;width: 100%;min-height: 20px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;float: left;}
.row-fluid [class*="push"],
.row-fluid [class*="pull"] {position: relative;}
.row-fluid .span-parent {padding-left: 0;padding-right: 0;}

.row-fluid .span1 {width:1%;}
.row-fluid .span2 {width:2%;}
.row-fluid .span5 {width:5%;}
.row-fluid .span4 {width:4%;}
.row-fluid .span10 {width:10%;}
.row-fluid .span15 {width:15%;}
.row-fluid .span20 {width:20%;}
.row-fluid .span25 {width:25%;}
.row-fluid .span30 {width:30%;}
.row-fluid .span35 {width:35%;}
.row-fluid .span40 {width:40%;}
.row-fluid .span45 {width:45%;}
.row-fluid .span48 {width:48%;}
.row-fluid .span49 {width:49%;}
.row-fluid .span50 {width:50%;}
.row-fluid .span55 {width:55%;}
.row-fluid .span60 {width:60%;}
.row-fluid .span65 {width:65%;}
.row-fluid .span70 {width:70%;}
.row-fluid .span75 {width:75%;}
.row-fluid .span80 {width:80%;}
.row-fluid .span85 {width:85%;}
.row-fluid .span90 {width:90%;}
.row-fluid .span95 {width:95%;}
.row-fluid .span100 {width:100%;}
.row-fluid .span33 {width:33.3%;}
.row-fluid .span66 {width:66%;}

.row-fluid .push5 {left:5%;}
.row-fluid .push4 {left:4%;}
.row-fluid .push10 {left:10%;}
.row-fluid .push15 {left:15%;}
.row-fluid .push20 {left:20%;}
.row-fluid .push25 {left:25%;}
.row-fluid .push30 {left:30%;}
.row-fluid .push35 {left:35%;}
.row-fluid .push40 {left:40%;}
.row-fluid .push45 {left:45%;}
.row-fluid .push50 {left:50%;}
.row-fluid .push55 {left:55%;}
.row-fluid .push60 {left:60%;}
.row-fluid .push65 {left:65%;}
.row-fluid .push70 {left:70%;}
.row-fluid .push75 {left:75%;}
.row-fluid .push80 {left:80%;}
.row-fluid .push85 {left:85%;}
.row-fluid .push90 {left:90%;}
.row-fluid .push95 {left:95%;}
.row-fluid .push100 {left:100%;}
.row-fluid .push33 {left:33%;}
.row-fluid .push66 {left:66%;}

.row-fluid .pull5 {left:-5%;}
.row-fluid .pull10 {left:-10%;}
.row-fluid .pull15 {left:-15%;}
.row-fluid .pull20 {left:-20%;}
.row-fluid .pull25 {left:-25%;}
.row-fluid .pull30 {left:-30%;}
.row-fluid .pull35 {left:-35%;}
.row-fluid .pull40 {left:-40%;}
.row-fluid .pull45 {left:-45%;}
.row-fluid .pull50 {left:-50%;}
.row-fluid .pull55 {left:-55%;}
.row-fluid .pull60 {left:-60%;}
.row-fluid .pull65 {left:-65%;}
.row-fluid .pull70 {left:-70%;}
.row-fluid .pull75 {left:-75%;}
.row-fluid .pull80 {left:-80%;}
.row-fluid .pull85 {left:-85%;}
.row-fluid .pull95 {left:-90%;}
.row-fluid .pull100 {left:-100%;}
.row-fluid .pull33 {left:-33%;}
.row-fluid .pull66 {left:-66%;}

.row-fluid .prefix-5 {margin-left:5%;}
.row-fluid .prefix-10 {margin-left:10%;}
.row-fluid .prefix-15 {margin-left:15%;}
.row-fluid .prefix-20 {margin-left:20%;}
.row-fluid .prefix-25 {margin-left:25%;}
.row-fluid .prefix-30 {margin-left:30%;}

.row-fluid .suffix-5 {margin-right:5%;}
.row-fluid .suffix-10 {margin-right:10%;}
.row-fluid .suffix-15 {margin-right:15%;}
.row-fluid .suffix-20 {margin-right:20%;}
.row-fluid .suffix-25 {margin-right:25%;}
.row-fluid .suffix-30 {margin-right:30%;}

.row-fluid .minus-prefix-5 {margin-left:-5%;}
.row-fluid .minus-prefix-10 {margin-left:-10%;}
.row-fluid .minus-prefix-15 {margin-left:-15%;}
.row-fluid .minus-prefix-20 {margin-left:-20%;}
.row-fluid .minus-prefix-25 {margin-left:-25%;}
.row-fluid .minus-prefix-30 {margin-left:-30%;}

.navlink, #respBrowseby, .resp-new-adverts, .resp-new-testimonial, .resp-new-form, .resp-new-blocks, .resp-new-blog {display: none;}

#navNew { display:none; position:absolute; top: 115px; background: #17084a; z-index:99999; right:0; width:100%; text-align:left; padding:10px 0; display:none; border-radius:0 0 3px 3px; }
#navNew li.home i,
#navNew li + li a i,
#navNew li ul li span, #navNew li .sub,
#navNew li.divider, #navNew .basket {display:none;}
#navNew > li { margin:0 15px;}
#navNew li a { padding:9px 5px; color:#fff; text-decoration:none; display:block; border-bottom:1px solid #fff; border-bottom:1px solid rgba(255,255,255,0.25);}
#navNew li a:hover {background:rgba(255,255,255,0.10);}

#navNew li #searchForm { width:100%; background:#fff; border-radius: 2px; padding:0 0 10px 0; margin-bottom:1%; margin-top:1%; position:relative;}
#navNew li #searchForm input[type="text"]{ border:none; background: rgb(240, 240, 240); color:#888; font-size:145%; width: 93.5%; margin:0 1%; padding:1.90%;}
#navNew li #searchForm span { display:block; position:absolute; right: 3.5%; top: 24%; width:27px; height:27px; z-index:999;}
#navNew li #searchForm input.go { display:block; position:absolute; right:-1px; top:-1px; padding:0; width:48px; height: 29px; border:none; text-indent:-99999px; font-size:0; cursor:pointer;background:none;}
#navNew .basket_search  a:hover {background: #216397 ;}

#column,
#content,
#page,
#category,
#product,
#news,
#county,
#town,
#installation,
#installs {display:block; float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; margin:0;}

#column { width: 23.5%;}

#content,
#page,
#category,
#product,
#news,
#county,
#town,
#installation,
#installs { margin:0; width: 74.5%; margin-left: 2.0%;}
#county #town {margin:0; width:100%;}

.home #column,
.home-new #column,
.product #column { width: 23.4%; margin-left: 2.0%;}

.home-new #content,
.home #content{
    margin: 0; width: 100%;
}

.product #product { margin:0; width: 74.5%;}


.product #column { float:right}

.items-row-wrapper {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -webkit-align-content: space-between;
    -webkit-align-items: flex-start;

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    align-content: space-between;
}

.items .item { width: 32%; margin-bottom: 1.5em; text-align: center;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.items .item img{}

.itemVdiv,
.itemHdiv {display:none;}

/** Category Nav **/
#respBrowseby {margin: 0 0 1.5em 0;}
#respBrowseby > a { background: #EE9600; color:#fff; display:block; padding: 10px; text-decoration:none; text-transform:uppercase; border-radius: 3px; font-family:SquareSerifLightBold; font-size: 135%;}
#respBrowseby > a > em { vertical-align: text-top; padding: 0 2px; font-size: 115%;}
#respBrowseby > a:hover { background:#ffa100;}

#respBrowseby > ul { background: #FFECCC; padding:0; display: none; border-radius: 0 0 4px 4px;}
#respBrowseby > ul > li { border-bottom:1px dotted #fff;}
#respBrowseby > ul > li a{ padding:10px; display:block; text-decoration:none; color:#222;}
#respBrowseby > ul > li a:hover { background:#ffdb9f;}

/******* Global Classes *******/
.fltLeft { float:left !important;}
.fltRight { float:right !important;}
.txtalignLeft { text-align:left;}
.txtalignRight { text-align:right;}
.aligncenter, img.aligncenter {display: block;margin-left: auto;margin-right: auto; text-align: center;}

.clearfix:before,
.clearfix:after {content: " "; display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
.hide { display: none;}

/* Custom Scroll bars - Grey */
::-webkit-scrollbar {width:12px;}
::-webkit-scrollbar-track {background: rgba(248,248,248,1);  -webkit-border-radius:10px;border-radius: 10px;}
::-webkit-scrollbar-thumb {-webkit-border-radius:0;border-radius:8px;background: rgba(0,0,0,0.25); padding:10px; border:2px solid rgba(248,248,248,1);}
::-webkit-scrollbar-thumb:hover {background: rgba(0,0,0,0.45); }
::-webkit-scrollbar-thumb:window-inactive {background: rgba(0,0,0,0.25);}

::-webkit-input-placeholder {color:#9196b6;}
:-moz-placeholder {color:#9196b6;}
::-moz-placeholder {color:#9196b6;}
:-ms-input-placeholder {color:#9196b6;}

.error::-webkit-input-placeholder {color:#ed1c24;}
.error:-moz-placeholder {color:#ed1c24;}
.error::-moz-placeholder {color:#ed1c24;}
.error:-ms-input-placeholder {color:#ed1c24;}

@media screen and (max-width: 989px) {

    body {font-size: 85%;}

    #recentInstalls {  padding: 20px 0;}
    #recentInstalls .item { margin:20px 0 0 0; text-align: center;}
    #recentPhotos {  margin: 6px 0 0 0; position:relative; float: none}
    #recentPhotos .scrollItems {position:relative; width:100%; text-align: center; overflow:hidden;}
    #recentPhotos .scrollItems > div {width:100%;}
    #recentPhotos .scrollItems img{border: 2px solid white; margin:0 5px;width: 200px;height: auto;}
    #recentPhotos .rightbtn {right:10px;}
    #recentPhotos .leftbtn {left:10px;}


    /*** Checkout ***/
    #Checkoutstages { background-size: 100%; padding-bottom:10%; max-width: 940px; width: 100%; height: 100%;}
    #Checkoutstages.stage1 {background-image: url(/images/resp/checkout_step1.jpg); background-position: 0 0;}
    #Checkoutstages.stage2 {background-image:url(/images/resp/checkout_step2.jpg); background-position: 0 0;}
    #Checkoutstages.stage3 {background-image:url(/images/resp/checkout_step3.jpg); background-position: 0 0;}
    #Checkoutstages.stage4 {background-image:url(/images/resp/checkout_step4.jpg); background-position: 0 0;}

    #basketPromotion {float:none; width:96%; padding:2%; margin:15px 0 0 0;}
    table#basketProducts .image,
    table#basketProducts th { display:none;}
    table#basketProducts .remove {width:30px;}
    table#basketProducts td {padding:5px 5px;}
    table#basketProducts .quantity{ width:20px;}
    table#basketProducts .description a{ font-size:15px;}
    table#basketProducts .price {font-size:15px;}

    #basketTotals { clear:both; float:none; width:100%; margin:20px 0 0 0;}
    #basketTotals table#basketFooter {width:100%;margin:0 0 15px 0;padding:0;}
    #basketTotals table#basketFooter tr th {padding:3px 0; }
    #basketTotals table#basketFooter th:first-child{ text-align:left;}
    #basketTotals table#basketFooter th:last-child{ text-align:right;}

    /******* Checkout Step 2 ********/
    #standardCheckout,
    #expressCheckout {margin:0 0 25px 0; min-height:0; width:92%;  padding:4%; float:none;}
    #standardCheckout div,
    #expressCheckout div{height:auto;}

    #standardCheckout a{ display:block;}

    #expressCheckout form.checkoutForm ul li label{width:25%;}
    #expressCheckout input[type='submit'] {margin:0 0 0 25%;}
    #expressCheckout a { display:block; margin:10px 0 0 25%;}

    /******* Checkout Step 3 ********/
    div#CheckoutColumn { width:100%; float:none;}
    form.checkoutForm { margin:20px 0;}
    form.withMargin { margin:20px 0 0 0}

    form.checkoutForm ul li label{ display:block; height:auto; width:100%; float:none;}

    form.checkoutForm ul li.inputMed input,
    form.checkoutForm ul li.inputMed select,
    form.checkoutForm ul li.inputMed textarea{ padding:1.25%; width:96%; display:block; margin:0;}

    form.checkoutForm ul li.inputMed select {width:98%; height:40px;}
    form.checkoutForm ul li.inputMed textarea{ resize:vertical; min-height:120px;}

    form.checkoutForm ul li.checkbox label{ width:auto; height:auto; }
    form.checkoutForm ul li.checkbox input{ width:auto; float:left;}
    form.checkoutForm span.error {display:block;}

    ul#basketTerms { text-align:left; padding:1%; margin: 0 0 13px 0;}
    ul#basketTerms label{ float:none; vertical-align:middle; margin:0; padding:0; display: inline;}
    ul#basketTerms input{ float:none; display:inline; vertical-align:middle; margin:0; padding:0;}
    ul#basketTerms span.error{ display:inline;}

    form.withMargin fieldset#contactdetails,
    form.withMargin fieldset#billingdetails,
    form.withMargin fieldset#deliverydetails,
    form.withMargin fieldset#regdetails,
    form.withMargin fieldset#regdetails{ background:none;}


    /******* Account CSS ********/
    #accountColumn {width:100%; float:none; margin-bottom:15px;}
    #accountContent {margin:0; float:none;}
    .orderInfo ul {margin: 0;}
    .orderInfo .info { width: 100%; float: none; margin: 0 0 10px 0;}
    .ordersInfo { width:100%;}
}

@media screen and (max-width: 960px) {

    body {font-size: 80%;}

    .utilites ul,
    #basketSearch,
    #navigation {display:none !important;}

    #phone { font: bold 150% Arial,Helvetica,sans-serif;}
    #phone span { display:block;}

    .utilites {margin: 15px 0 0 0;width: auto;}
    #header {border-bottom: 5px solid #17084a;}
    #logo{ width:auto; height:auto; display:block; position:relative;}
    #logo a{ max-width:100px; min-width:100px; width:auto; height:auto; margin-bottom:1em;}

    .navlink { display:block; height: 30px; position:absolute; background: #17084a;right:0; bottom: 0; z-index: 100; font-size: 1.6em; padding: 10px 10px 0 10px; text-align: center; line-height: 1; color: #fff; text-decoration:none; border-radius: 2px 2px 0 0; z-index: 9999;}

    .basket_search > .label {display: none;}

    .items .item a .title{width: 90%;}

    #footer {text-align:center;}
    #footerSocial {float: none;  width: 100%;}

    #footerLinks {margin:20px 0 0 0;}
    #footerLinks ul{ display:block; float:none; border:none; margin:0; padding: 0;}
    #footerLinks ul + ul{ margin:0 0 25px 0;}

    #footerLinks ul + ul li.title{ display:none;}
    #footerLinks ul + ul + ul li.title{ display:block;}

    #navNew li #searchForm input[type="text"]{ font-size:110%;}

    .proForm .btn input.enquireProduct {font-size:105%;padding-left:0; padding-right:0;}

}

@media screen and (max-width:880px) {

    .proForm .btn input{
        text-align: center;
        font: bold 14px Arial, Helvetica, sans-serif;
        background-image:none;
    }

    .block .bd a.btnContact {
        text-align: center;
        font: bold 12px Arial, Helvetica, sans-serif;
    }

    .block .bd a.btnContact span {display:none;}

    .proForm .btn input.enquireProduct {font-size:90%;}


}

@media screen and (max-width:768px) {

    .home #column,
    .home #content,
    #column,
    #content,
    #page,
    #category,
    #product,
    .product #product,
    #news,
    #county,
    #town,
    #installs,
    #installation { width: 100%; margin-left: 0;}

    .row-fluid [class*="span"] {display: block;width: 100%;float:none;margin-top: 4px;}
    .row-fluid [class*="push"], .row-fluid [class*="pull"] { left:0;}

    #column { text-align: center; display:none;}
    .home-new #column,
    .home #column { display:block;}

    .home #column,
    .home-new #column  { width:100%; margin-left:0;}
    .home-new #content,
    .home #content { margin:0; width: 100%;}


    .home #content .news{height:auto;}
    #homeFeatured .Featured div{ position:relative; left:0; bottom:0; background:#17084a; padding:20px 20px 10px 20px; max-width: 100%; text-align: center; border:2px solid #fff; border-bottom:none;}
    #homeFeatured .Featured div p {display:none}
    #homeFeatured .Featured div h2 {font-size: 125%;}

    .resp-new-adverts,
    .resp-new-testimonial,
    .resp-new-form,
    .resp-new-blocks,
    .resp-new-blog,
    #respBrowseby {display:block;}

    .resp-new-adverts { text-align: center; }
    .resp-new-adverts .advert {display: inline-block; vertical-align: top; margin: 0 0 20px 0;}

    .resp-new-testimonial {text-align: center;}

    #featuredControls { bottom: 25%; left: 5%; right: 0; width: 95%; z-index:100; text-align: center;}
    #ftNext,
    #ftPrev,
    #ftPause,
    #ftPlay {display: inline-block; float:left; position: relative; background-size: 185%; width: 24px; height: 23px;}

    #ftPrev {background-position: 1px 0px;}
    #ftNext { background-position:-22px 0px;}
    #ftPause {background-position:-22px -22px;}
    #ftPlay {display:none; left:0px; background-position: 1px -22px;}

    #ftPrev,
    #ftNext,
    #ftPause,
    #ftPlay {left:0;}

    #proTabs > ul > li{ float:none; margin: 0 0 4px 0; font: bold 13px Arial, Helvetica, sans-serif;}
    #proTabs > ul > li a{ background: #FAB200; display:block; border: none; padding:6px 9px; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; color:#fff;}
    #proTabs > ul > li a:hover { background: #FAB200; text-decoration: underline;}
    #proTabs > ul > li.on a{border: none; background: #000; color:#fff; cursor:text; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;padding: 8px 9px;}

    #wrap {display:inline-block; overflow:hidden; float:none; width:100%; max-width:97%; text-align:center; padding:5px; margin:0;}
    #wrap a {float:none;}
    #wrap img {display:inline}
    #proImages .thumbs { display:block; width: 100%; margin:0 0 25px 0; float:none; clear:both;}
    #proImages .thumbs a { width: auto; display:inline-block; float:none; padding: 1%;}

    #enquireProductBox li.col { width: 100%;}
    #enquireProductBox input.txt {width: 90%;}
    #enquireProductBox textarea { width: 90%;}


    .home-sectors-n4 .home-sectors-item {width:48%;}


    /*** Landing Pages CSS ***/
    #landing-page-form {max-width: 310px; margin:0 auto; width: 100%;float:none;}
    #landing-page-content {float: none; width: 100%;margin-right:0;}


}

.utilites #phone .mobileNumber{display: none;}

@media screen and (max-width:550px) {

    .tweets {width: 100%; float:none; margin-left: 0;height:auto; }
    .tweets .bd{ height: 168px;}
    .tweets .tweet {  height: 85px;}
    .home #content .news{ width: 100%; height:auto;}
    .items .item { width: 49%;}

    #phone span.mediahawkNumber5361{display: none;}
    .utilites #phone .mobileNumber{display:block;}

    #proInstallations .item { text-align:center;}
    #proInstallations .item .img{width:100%; float:none; display:block; margin:0 auto 15px; max-width: 209px;}
    #proInstallations .item .wrapper { width:100%; display:block; margin: 0;float:none;}

    #suggested .item a{ width: 48%; margin-right: 2%;}
    #suggested .item a > img { width: 100%;}
    #suggested .item a + a { margin-right: 0;}
    #suggested .item a + a + a { margin-right: 2%;}
    #suggested .item a + a + a + a { margin-right: 0;}

    #register form input[type='submit'],
    #account form input[type='submit'] {
        margin-left:0;
    }

    /******* Town CSS *******/
    #town .item .img{ display:block; float:none; margin:0 auto 15px; max-width:208px; max-height:150px;}
    #town .item .wrapper {margin:0; text-align:center;}
}

/* Just in case... */
@media screen and (max-width:300px) {
    .items .item { width: 100%;}
}
/*** IE7 ***/
.lt-ie8 {}