body {
    font-family: 'Karla', sans-serif;
    margin: 0;
}
*, *:after, *:before {
    box-sizing: border-box;
}
br.clear {
    clear: both;
}
.wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 8px;
}
a {
    color: inherit;
}
p {
    font-size: 16px;
    margin: 10px 0;
}
h1, .h1 {
    border-left: 5px solid #0071BC;
    padding: 5px 0 5px 10px;
    color: #808080;
    margin: 10px 0 25px;
    text-transform: uppercase;
}
h2, .h2 {
    border-left: 5px solid #0071BC;
    padding: 5px 0 5px 10px;
    color: #808080;
    margin: 10px 0;
    text-transform: uppercase;
}
h3, .h3 {
    border-left: 5px solid #0071BC;
    padding: 5px 0 5px 10px;
    color: #808080;
    margin: 10px 0;
    text-transform: uppercase;
}
h4, .h4 {
    
}
.textright {
    text-align: right;
}
.textcenter {
    text-align: center;
}
.textleft {
    text-align: left;
}
img {
    max-width: 100%;
}
.hide {
    display: none;
}
.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.greybg {
    background: url('../images/build/greybg.png');
}
.padtb30 {
    padding: 30px 0;
}
/* HEADER */
header {
    background: url('../images/build/bluebg.png');
    padding: 16px 0;
}
.logo img {
    max-width: 260px;
    width: 100%;
}
.col-sm-4.phone {
    padding: 6px 8px;
}
.col-sm-4.search {
    /* padding: 180px 8px; */
}
.phone {
    text-transform: uppercase;
    color: #FFF;
}
p.telno {
    font-size: 28px;
    margin: 0;
    line-height: 36px;
}
p.open {
    font-size: 14px;
    margin: 0;
}
.searchbox button {
    border: none;
    color: #FFF;
    font-size: 22px;
    height: 32px;
    float: left;
}
.searchbox {
    float: right;
}
.searchbox input {
    font-size: 21px;
    border: none;
    padding: 3px;
    height: 32px;
    float: left;
}
.searchbox:after, .cardexp:after, .clearcard:after, .payamount:after {
    content: '';
    display: block;
    clear: both;
}
/* NAV */
.navbar, .searchbox button {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e5e5e5+0,bfbfbf+100 */
    background: #e5e5e5; /* Old browsers */
    background: -moz-linear-gradient(top,  #e5e5e5 0%, #bfbfbf 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #e5e5e5 0%,#bfbfbf 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #e5e5e5 0%,#bfbfbf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#bfbfbf',GradientType=0 ); /* IE6-9 */
}
.nav ul, .myarea ul, ul.productfeaturelist, ul.productList {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.mainnav li, .myarea li {
    float: left;
    position: relative;
}
.mainnav a {
    color: #0071BC;
    text-decoration: none;
    display: block;
    padding: 10px 40px 10px 0;
}
.mainnav {
    font-size: 20px;
}
.mainnav li:last-child > a {
    padding-right: 0;
}
.mainnav ul ul, .mainnav img {
    display: none;
}
.mainnav li:hover > ul {
    display: block;
    width: 300px;
    background: #1072ba;
    z-index: 1000000;
}
.mainnav li li a {
    color: #FFF;
    width: 100%;
    padding: 10px;
}
.mainnav li li {
    width: 100%;
    border-bottom: 1px solid #FFF;
}
.mainnav ul ul ul {
    left: 300px;
    margin-top: -43px;
    border-left: 1px solid #FFF;
}
.mainnav ul ul {
    position: absolute;
    left: 0;
}
li.telno {
    padding: 40px 0;
    text-align: center;
    font-size: 24px;
    color: #FFF;
}
#mobile-menu .searchbox {
    float: none;
    padding: 10px;
}
#mobile-menu .searchbox input {
    width: 80%;
}
#mobile-menu .searchbox button {
    width: 20%;
}
.myarea {
    float: right;
    font-size: 20px;
}
.myarea a {
    text-decoration: none;
    color: #ffffff;
    display: block;
    padding: 0 0 10px 25px;
}
.headimage {
    background: url('../images/build/hydraulic-connections.jpg');
    background-size: cover;
    background-position: center;
    height: 320px;
}
.headimage h1 {
    text-transform: uppercase;
    color: #FFF;
    font-size: 30px;
    margin: 50px 0 0;
    border-left: 5px solid #0071BC;
    padding-left: 10px;
}
.font40 {
    font-size: 40px;
}
/* FORMS */
input#catwebformbutton, input.productSubmitInput, .form input.cat_button, input.cat_button {
    background: url('../images/build/bluebg.png');
    background-position: center;
    font-size: 20px;
    text-transform: uppercase;
    color: #FFF;
    border: none;
    padding: 5px 15px;
    cursor: pointer;
    max-width: 150px;
    display: block;
    -webkit-appearance: none;
   	-moz-appearance: none;
   	appearance: none;
    border-radius: 0;
}
input.productSubmitInput {
    max-width: 200px;
}
input#catwebformbutton:hover, input.productSubmitInput:hover {
    opacity: 0.9;
}
label, .form label, .webform label {
    display: block;
    margin: 5px 0;
    font-size: 16px;
}
/* FOOTER */
.main {
    padding: 25px 0;
}
footer {
    background: #808080;
    color: #FFF;
}
footer .logo {
    padding: 16px 8px;
}
.signup h3, .social h3 {
    float: left;
}
.signup input.cat_textbox, .signup input {
    font-size: 18px;
    border: none;
    padding: 3px;
    height: 30px;
    margin: 11px 0;
    float: left;
}
.signup input.cat_textbox {
    margin-left: 25px;
    max-width: 260px;
}
.social a {
    color: #666;
    font-size: 22px;
    margin: 13px 0 13px 16px;
    display: inline-block;
}
.address {
    margin-top: 17px;
}
/* SCROLLING CATEGORIES */
.catscroll {
    background: url('../images/build/hydraulic.jpg');
    height: 350px;
    background-size: cover;
    background-position: center;
    padding: 20px 0;
    position: relative;
}
.catscroll:after {
    content: '';
    background: rgba(51, 51, 51, 0.6);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 10;
}
.catscroll .wrapper {
    z-index: 10000;
    position: relative;
}
.catscroll h2 {
    color: #FFF;
}
/* Categories */
.productSmall::after, .categorylist::after {
    clear: both;
    content: "";
    display: block;
}
/* SMALL PROD */
.productSmall li, .productfeaturelist li, .catalogueList li, .featcatalogues .catalogue {
    width: 25%;
    float: left;
    padding: 8px;
    border-right: 1px solid #CCC;
    margin: 8px 0;
    position: relative;
}
.productSmall li:hover, .productfeaturelist li:hover, .catalogueList li:hover, .featcatalogues .catalogue:hover {
    outline: 5px solid #808080;
}
.productSmall li:hover h5, .productfeaturelist li:hover h5 {
    font-weight: 700;
}
.productSmall li:nth-child(4n), .productfeaturelist li:nth-child(4n), .catalogueList li:nth-child(4n), .featcatalogues .catalogue:nth-child(4n) {
    border-right: transparent;
}
ul.productSmall {
    margin-left: -8px;
    margin-right: -8px;
}
.productSmall:after, .productfeaturelist:after {
    content: '';
    display: block;
    clear: both;
}
.smallprod {
    padding: 10px;
}
.smallprod h5, .catalogue h5 {
    font-size: 18px;
    margin: 10px 0;
    height: 50px;
    font-weight: 400;
    color: #999;
}
.smallprod a {
    text-decoration: none;
    display: block;
    min-height: 350px;
}
.smallprod .info {
    position: absolute;
    bottom: 10px;
    padding: 0 10px;
}
.smallprod .image {
    transform: translate(-50%,-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 275px;
    padding-bottom: 50px;
}
li.catalogueItemNotFound, li.productItemNotFound {
    display: none;
}
.catalogue .image {
    max-width: 130px;
    max-height: 160px;
    display: inline-block;
    line-height: 160px;
}
p.price {
    font-size: 24px;
    color: #0071BC;
}
.addtobutton {
    position: absolute;
    top: 0;
    right: -1px;
    display: none;
}
.addtobutton img {
    background: #0071BC;
    border: none;
    padding: 5px;
    cursor: pointer;
}
.productSmall li:hover .addtobutton, .productfeaturelist li:hover .addtobutton {
    display: block;
}
.featuredprods {
    padding: 20px 0;
}
.numbers {
    background: #FF8899;
    display: inline-block;
    padding: 0 0 0 10px;
}
.pagination a {
    display: inline-block;
    padding: 10px;
    background: #ff3344;
    margin-left: 10px;
}
.featcatalogues:after {
    content: '';
    display: block;
    clear: both;
}
a.catlink {
    display: block;
    text-decoration: none;
}
/* LARGE PROD */
.productLarge table.productTable td {
    width: 100%;
}
input.productTextInput, .cart-details__voucher input, .cart-details__discount input, .cart-item__quantity input, .form input, .webform input, textarea, input.cat_textbox, select.cat_dropdown, select.cat_listbox {
    font-size: 16px;
    background: #F2F2F2;
    border: none;
    padding: 7px;
    height: 33px;
    width: 100% !important;
    margin: 3px 0 10px;
    border-radius: 0;
}
input.productTextInput {
    width: 60px !important;
    text-align: center;
}
.quantity {
    margin-right: 10px;
}
.quantity:before {
    content: 'QTY';
    font-size: 18px;
    margin-right: 16px;
}
.largeprod h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 32px;
    margin-top: 0;
}
.largeprod .image {
    border: 1px solid #CCC;
    padding:  10px;
    text-align: center;
}
.poplets {
    border-top: none;
    margin: 4px 0 0;
    padding: 0;
}
td.productPopletsItem {
    width: 25%;
    float: left;
    padding: 4px;
}
table.productPoplets {
    margin-left: -4px;
    margin-right: -4px;
    width: 100%;
}
.shop-main {
    margin: 0;
}
.cartsum {
    font-weight: bold;
}
select, select.cat_dropdown, select.cat_listbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    max-width: 310px;
    border-radius: 0;
    font-size: 18px;
    font-family: 'Karla', sans-serif;
    display: block;
    color: #474747;
    border: none;
    padding: 6px 45px 5px 8px;
    position: relative;
    cursor: pointer;
    background-color: #F2F2F2;
    background-image: url(../images/build/downarrow.png);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: calc(100% - 15px) center;
    margin: 4px 0 10px;
    width: 100% !important;
}
.catProdAttributeTitle {
    text-transform: uppercase;
    font-size: 18px;
    float: left;
    margin: 6px 10px 0 0;
}
/* SIDE NAV */
.sidenav h3 {
    background: #0071BC;
    border-left: none;
    padding: 10px;
    color: #FFF;
    margin-bottom: 0;
    border-bottom: 5px solid #808080;
}
.sidenav ul {
    background: #F2F2F2;
    padding: 10px;
}
.sidenav a {
    text-decoration: none;
    display: block;
    padding: 5px;
}
/* CART */
.cart {
    box-shadow: 1px 1px 7px #F2F2F2;
    border: 1px solid #F2F2F2;
}
.cart-item{
    margin-top:15px;
    padding:15px 0;
    position:relative;
}
.cart-headings::before,
.cart-headings::after,
.cart-item::before,
.cart-item::after
{
    content:"";
    display:table;
}
.cart-headings::after,
.cart-item::after{
    clear:both;
}
.cart-details > div,
.cart-item > div{
    padding:5px 15px;
}
.cart-details input,
.cart-item input{
    width:100%;
}
.cart-item__image{
    text-align:center;
}
.cart-details__label,
.cart-item__price::before,
.cart-item__quantity::before,
.cart-item__total::before
{
    display:inline-block;
    background: #FFFFFF;
    color: #2D2D2D;
    padding: 5px 10px 5px 0;
    margin:0 15px 0 0;
    text-align:center;
    font-weight: bold;
}
.cart-details__label--full-width{
    display:block;
    width:100%;
    margin:0;
}
.cart-item__price::before{
    content:"Price";
}
.cart-details__voucher,
.cart-details__discount,
.cart-item__quantity{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.cart-item__quantity::before{
    content:"Quantity";
}
.cart-item__total::before{
    content:"Total";
}
.cart-item__remove a{
    margin-top:15px;
    display:block;
    padding:8px 10px;
    text-align:center;
    background: #F2F2F2;
    color: #000;
    text-decoration:none;
    transition:background 0.3s ease-in-out;
    max-width: 40px;
}
.cart-item__remove a:hover{
    background: #0071BC;
    color: #FFF;
}
.cart-details{
    box-shadow: 1px 1px 7px #F2F2F2;
    border: 1px solid #F2F2F2;
    margin-top:50px;
    padding:15px 0;
}
.cart-details__voucher,
.cart-details__discount{
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
}
.cart-details__voucher input,
.cart-details__discount input{
    -webkit-flex-grow:1;
    -ms-flex-positive:1;
    flex-grow:1;
    width:auto;
    margin-top:10px;
}
.cart-details__voucher .cart-details__total,
.cart-details__discount .cart-details__total{
    -webkit-flex-grow:1;
    -ms-flex-positive:1;
    flex-grow:1;
    line-height:20px;
    padding:5px;
    margin: 6px 0 0;
}
div.cart-details__total{
    margin-top:10px;
}
a#catshopclear{
    font-size: 10px;
    margin-top: 26px;
    padding: 5px 10px;
    font-weight: bold;
}
.cart-buttons{
    margin-top:35px;
    float: right;
}
.cart-buttons:after {
    content: '';
    display: block;
    clear: both;
}
.cart-buttons a{
    display:block;
    background: url('../images/build/greybg.png');
    padding: 5px 25px;
    text-align:center;
    color: #808080;
    text-decoration:none;
    margin-top:15px;
    text-transform: uppercase;
}
.cart-buttons a:hover{
    opacity: 0.8;
}
.cart-details > div{
    margin-top:10px;
}
.cart-headings{
    display:none;
}
.cart-details p {
    margin: 0;
}
.cart-details__voucher input, .cart-details__discount input {
    margin: 9px 0 15px;
    width: auto !important;
}
.cart-details__voucher .cart-details__label, .cart-details__discount .cart-details__label, .cart-details__shipping .cart-details__label {
    text-align: left;
    padding: 5px 0;
    font-size: 18px;
}
.cart-details__subtotal {
    margin-top: 122px;
}

.cart-details__subtotal, .cart-details__total {
    text-align: right;
    font-size: 18px;
    font-weight: 600;
}
.cart-details__shipping .cart-details__total {
    float: right;
}
.cart-buttons a {
    max-width: 230px;
    float: left;
    margin-left: 10px;
}
a#catshopbuy {
    background: url('../images/build/bluebg.png');
    color: #FFF;
    font-size: 20px;
}
a#catshopquote {
    background: #0071BC;
}
/*  CHECKOUT  */
div.form div.item, div.webform div.item {
    padding: 0;
}
.shop-form label {
    font-size: 16px;
}
.form input, .webform input, textarea {
    margin: 0 0 10px;
    padding: 0 5px;
}
select#CardExpiryMonth, select#CardExpiryYear {
    width: 48% !important;
    float: left;
}
select#CardExpiryMonth {
    margin-right: 11px;
}
.cardtype {
    width: 60%;
    float: left;
    margin-right: 3%;
}
.cardno {
    width: 36%;
    float: left;
}
input[type=radio], input[type="checkbox"] {
    width: auto !important;
    margin: 10px 5px 0 0;
    height: 14px;
}
.system-message, .system-error-message {
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    color: #4D4D4D;
}
.payamount p {
    font-size: 20px;
    font-weight: bold;
    float: left;
    margin-top: 6px;
}
input#Amount {
    background: #FFF;
    font-size: 20px;
    font-weight: bold;
    float: left;
    width: 80% !important;
}
/* TABS */
.tabs ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.tabs li {
    display: inline-block;
    background: url('../images/build/greybg.png');
}
.tabs li a {
    text-decoration: none;
    text-transform: uppercase;
    color: #808080;
    font-weight: bold;
    display: block;
    padding: 10px;
    outline: none;
}
div.ui-tabs-panel {
    padding: 10px;
    border: 1px solid #F2F2F2;
    box-shadow: 1px 1px 2px #F2F2F2;
}
.tabs li.ui-state-active {
    background: url('../images/build/bluebg.png');
}
.tabs li.ui-state-active a {
    color: #FFF;
}
/* CATAGORY SLIDER */
.catslider .catprod {
    background: #FFF;
    text-align: center;
    margin: 5px;
}
.catslider h2 {
    color: #000;
    border: transparent;
    padding: 15px 0;
    font-size: 20px;
    text-transform: none;
    color: #0071BC;
    margin: 0;
}
.catslider * {
    outline: transparent;
}
.slick-slide img {
    display: inline-block;
    max-width: 150px;
    width: 100%;
    margin: 10px;
}
button.slick-prev:before {
    content: "\f104";
    font-family: 'FontAwesome';
    font-size: 60px;
}
button.slick-next:before {
    content: "\f105";
    font-family: 'FontAwesome';
    font-size: 60px;
}
button.slick-arrow {
    font-size: 0;
    background: transparent;
    border: none;
    position: absolute;
    top: 50%;
    margin-top: -33px;
    cursor: pointer;
    color: #FFF;
    transition: color 0.3s;
}
button.slick-arrow:hover {
    color: #0071BC;
}
button.slick-prev.slick-arrow {
    left: -40px;
}
button.slick-next.slick-arrow {
    right: -40px;
}
/* LOG OUT */
.blue-btn a {
    display: block;
    float: right;
    margin: 10px 0 0;
    background: #1072ba;
    padding: 8px;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
}
.blue-btn:after {
    content: '';
    display: block;
    clear: both;
}
/* MAP */
#map {
    height: 300px;
}
/* RESPONSIVE */
@media screen and (min-width: 769px) {
    .mobile {
        display:none;
    }
    .cart-items {
        padding:0 15px;
    }
    .cart-item,
    .cart-headings {
        margin:0 -15px;
    }
    .cart-headings > *,
    .cart-item > div {
        float:left;
        padding:0 15px;
        width: 18%;
    }
    .cart-item > div.cart-item__remove, .cart-headings > .cart-heading__remove {
        width: 10%;
    }
    .cart-headings > * {
        padding:10px 15px;
        background: #0071BC;
        color:#fff;
    }
    .cart-item__price::before, 
    .cart-item__quantity::before, 
    .cart-item__total::before{
        display:none;
    }
    .cart-headings {
        display:block;
        margin: 0;
    }
    .cart-item__remove a {
        margin:0;
    }
}
@media screen and (max-width: 980px) {
    .mainnav {
        font-size: 18px;
    }
    .mainnav a {
        padding: 10px 14px 10px 0;
    }
    .myarea a {
        padding: 10px 0 10px 14px;
    }
    .myarea {
        font-size: 18px;
    }
    p.telno {
        font-size: 25px;
    }
    p.open {
        font-size: 13px;
    }
    .signup h3, .social h3 {
        width: 100%;
        float: none;
    }
    .signup input {
        margin: 0;
    }
    .signup input.cat_textbox {
        margin: 0 0 0 15px;
    }
    .social .textright {
        text-align: left;
    }
}
@media screen and (max-width: 768px) {
    .navbar, header .col-sm-4.search, .col-sm-4.phone {
        display: none;
    }
    .largeprod .col-sm-5 {
        width: 40%;
        float: left;
    }
    .largeprod .col-sm-7 {
        width: 60%;
        float: left;
    }
    .largeprod:after {
        content: '';
        display: block;
        clear: both;
    }
    .productSmall li, td.productPopletsItem, .productfeaturelist li, .featcatalogues .catalogue, .catalogueList li {
        width: 50%;
    }
    .productSmall li:nth-child(2n), .productfeaturelist li:nth-child(2n), .featcatalogues .catalogue:nth-child(2n), .catalogueList li:nth-child(2n) {
        border-right: transparent;
    }
    .col-sm-4.logo {
        width: 65%;
        float: left;
    }
    .triggerbtn {
        width: 35%;
        float: right;
        padding: 0 8px;
        text-align: right;
    }
    .trigger {
        background: #F2F2F2;
        text-align: center;
        width: 40px;
        height: 40px;
        font-size: 27px;
        color: #0071BC;
        padding: 5px;
        display: inline-block;
    }
    .basketbtnmob {
        background: #f2f2f2;
        display: inline-block;
        font-size: 25px;
        color: #0071bc;
        vertical-align: top;
        margin-right: 10px;
    }
    .basketbtnmob a {
        padding: 5px 8px 6px;
        display: block;
    }
    footer .logo {
        padding-bottom: 0;
    }
    footer .textright {
        text-align: left;
    }
    .signup input.cat_textbox {
        margin: 0 0 10px;
        width: 65% !important;
    }
    .signup input#catwebformbutton {
        width: 35% !important;
        margin: 0;
    }
    .col-sm-8.signup:after {
        content: '';
        display: block;
        clear: both;
    }
    .social a {
        margin: 6px 16px 13px 0;
    }
    .cart-details__voucher p, .cart-details__discount p {
        width: 100%;
    }
    .cart-details__subtotal {
        margin-top: 30px;
    }
}
@media screen and (max-width: 480px) {
    .largeprod .col-sm-5, .largeprod .col-sm-7, .featcatalogues .catalogue, .catalogueList li {
        width: 100%;
        float: none;
    }
    .featcatalogues .catalogue, .catalogueList li {
        border-right: none;
    }
    td.productPopletsItem {
        width: 25%;
    }
    footer, footer .textright {
        text-align: center;
    }
    .address {
        margin-top: 0;
    }
    .headimage h1 {
        margin: 40px 0 0;
        font-size: 23px;
    }
    .font40 {
        font-size: 36px;
    }
}




/*GDPR*/
.cc_container {
    background-color: #1071ba!important;
}
.cc_btn{
    background-color:#c2c2c2!important;
}